/* cmsms stylesheet: Simpson_Custom modified: Saturday, January 31, 2026 12:21:10 PM */
body {font-family: Georgia}

.scrolled .header {
    --background-color: rgba(7, 12, 16, 1.0);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
}

.page-title h1 {
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 10px;
}

.header .logo img {
    max-height: 60px;
    margin-right: 8px;
}

.footer .footer-about .logo img {
    max-height: 70px;
    margin-right: 6px;
}

a {
    color: #990000;
    text-decoration: none;
    transition: 0.3s;
}

/* ==========================================
   HERO: lock video to 16:9 (not full height)
   Targets your existing structure:
   #hero > .hero-background > video + .overlay
========================================== */
/* ============================
   HERO full-bleed + centered
============================ */

/* Force #hero to be full viewport width even if it sits inside a constrained wrapper */
#hero.hero{
  position: relative;
  overflow: hidden;

  /* FULL BLEED (this is the key) */
  width: 100vw;
  left: 50%;
  margin-left: -50vw;

  /* Keep your 16:9 behavior */
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  max-height: 85vh;
}

/* Fallback ONLY if aspect-ratio isn't supported */
#hero.hero::before{
  content:"";
  display:block;
  padding-top: 56.25%;
}
@supports (aspect-ratio: 16 / 9){
  #hero.hero::before{ display:none; }
}

/* Background layer spans the viewport width */
#hero .hero-background{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* The actual video: center in viewport and cover */
#hero .video-background{
  position: absolute;
  top: 50%;
  left: 50%;

  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;

  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center center;

  z-index: 0;
}

/* Overlay spans everything */
#hero .overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

#hero .container{
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;        /* vertical center */
  justify-content: center;    /* horizontal center */
  text-align: center;         /* center text itself */
}

#hero .hero-content{
  width: 100%;
  max-width: 900px;           /* optional: keeps luxury proportions */
  margin: 0 auto;
}

.hero h1{
  font-size: clamp(34px, 4.2vw, 48px);
  font-weight: 400;
  line-height: 1.1;
}

.hero p {
  font-size: clamp(12px, 1.2vw, 18px);
    line-height: 1.0;
    font-weight:200;
    color: #fff;
  display: flex;
  align-items: center;        /* vertical center */
  justify-content: center;    /* horizontal center */
  text-align: center;         /* center text itself */
width:100%
}

#hero .overlay{
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.55) 100%
  );
}

* ============================
   MOBILE HERO: make video taller
============================ */

@media (max-width: 768px){
  #hero.hero{
    aspect-ratio: 4 / 5;   /* taller than 16:9 */
    max-height: none;
    min-height: 70vh;      /* guarantees presence */
  }

  #hero .container{
    padding-top: 10vh;     /* pushes text down slightly */
    padding-bottom: 10vh;
  }
}

/* Extra small phones */
@media (max-width: 480px){
  #hero.hero{
    aspect-ratio: 3 / 4;
    min-height: 75vh;
  }
}