/* V8 — Full, un-clipped 1080p hero followed by intentional beige breathing room.
   Preserve the video, red artwork, and all below-the-fold sections unchanged. */
:root { --approved-beige: #f2e6d8; }
body { background:#f2eee9; }
.page-shell { max-width:1440px; width:100%; overflow:hidden; box-shadow:none; position:relative; margin-inline:auto; }
/* Display all phones and shadows. Trim only the final unused cream strip of the source video, never the phones. */
.hero { min-height:0!important; padding:0!important; margin:0!important; background:none!important; overflow:hidden!important; }
.hero::before {display:none!important;}
.hero-motion {
  position:relative!important;
  width:100%!important;
  height:min(52.083333vw, 750px)!important;
  aspect-ratio:auto!important;
  max-height:none!important;
  display:block!important;
  background:var(--approved-beige)!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.hero-motion video {
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  display:block!important;
  aspect-ratio:16/9!important;
  object-fit:contain!important;
  margin:0!important;
  padding:0!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.hero-motion .reduce-motion-poster {
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  object-fit:contain!important;
}
/* The header overlays the empty top strip of the beige animation — not the phones. */
.header {
  max-width:1440px!important;
  height:72px!important;
  left:0!important;
  top:0!important;
  background:transparent!important;
  padding:12px clamp(26px,5.4vw,76px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:42px;
  z-index:30!important;
}
.header .brand { flex:0 0 auto; }
.header .brand img {
  width:126px!important;
  height:auto!important;
  filter:brightness(0) saturate(100%) invert(13%) sepia(48%) saturate(1444%) hue-rotate(335deg) brightness(88%) contrast(96%)!important;
}
.header .nav { display:flex; gap:35px; margin-right:auto; }
.header .nav a { color:#3d1c15!important; text-shadow:none!important; font-size:13px; font-weight:600; }
.header .nav-demo {
  background:#5e170c!important; color:#fff8ed!important; font-weight:800;
  border-radius:6px!important; box-shadow:0 3px 10px rgba(70,20,8,.14)!important;
}
/* Create a true beige separator *after* the entire video rather than overlaying or masking it. */
.hero-copy-band {
  position:relative!important;
  z-index:2!important;
  background:#920a04 url('assets/bg-hero.webp') center center/cover no-repeat!important;
  padding:53px 32px 61px!important;
  border-top:26px solid #ead8ca!important;
  min-height:0!important;
  margin:0!important;
  isolation:isolate;
}
.hero-copy-band::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(20,0,0,.13),transparent 28%, transparent 72%,rgba(20,0,0,.1))!important;
  pointer-events:none;
}
.hero-copy-band .hero-copy { max-width:1200px!important; width:100%; position:relative; z-index:2; }
.hero-copy-band h1 {
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(42px,5.45vw,76px)!important;
  font-weight:600!important;
  line-height:1.06!important;
  letter-spacing:-.035em!important;
  color:#fff3e7!important;
  text-shadow:0 2px 14px rgba(33,0,0,.22)!important;
  margin:0 auto 19px!important;
}
.hero-copy-band h1 em {
  font-family:Georgia,"Times New Roman",serif!important;
  font-style:italic!important;
  font-weight:500!important;
  letter-spacing:-.05em!important;
  color:#f7c278!important;
  white-space:nowrap;
}
.hero-copy-band .hero-copy>p {
  max-width:800px!important;
  margin:0 auto 25px!important;
  font-family:"DM Sans",Arial,sans-serif!important;
  font-weight:500!important;
  font-size:clamp(14px,1.4vw,17px)!important;
  line-height:1.7!important;
  color:#fff4e8!important;
}
.hero-copy-band .hero-actions { display:flex; justify-content:center; align-items:center; gap:32px; }
.hero-copy-band .button-cream {
  background:#fff4e4!important; color:#531c11!important;
  font-size:13px; font-weight:800;
  border-radius:8px; padding:16px 24px;
}
.hero-copy-band .text-link {
  color:#fff9ee!important; font-size:13px; font-weight:700;
  text-shadow:none!important;
  text-decoration:none; border-bottom:1px solid rgba(255,245,231,.6); padding:2px 0 5px;
}
/* Below the opening, retain the exact previously approved warm-cream section
   background, not a different red background. */
.features,.showcase {background-color:#f1ece4!important;}
@media(max-width:800px) {
  .hero-motion{height:auto!important;overflow:visible!important;}
  .header {padding:8px 20px!important;height:57px!important;gap:12px;}
  .header .brand img{width:88px!important;}
  .header .nav{display:none!important;}
  .header .nav-demo{display:none!important;}
  .header .menu-button{display:flex!important;margin-left:auto;}
  .header .menu-button span{background:#4b1c14!important;}
  .hero-motion {aspect-ratio:auto!important;}
  .hero-copy-band{padding:36px 18px 43px!important;border-top-width:16px!important;}
  .hero-copy-band h1{font-size:clamp(31px,5.8vw,47px)!important;line-height:1.1!important;}
  .hero-copy-band .hero-actions{flex-wrap:wrap;gap:17px;}
  .hero-copy-band .hero-copy>p{font-size:14px!important;}
}
@media(max-width:480px) {
  .header {height:48px!important;padding:7px 13px!important;}
  .header .brand img{width:68px!important;}
  .hero-motion {aspect-ratio:auto!important;}
  .hero-copy-band h1{font-size:clamp(27px,7.4vw,37px)!important;}
  .hero-copy-band h1 em{white-space:normal!important;}
  .hero-copy-band .hero-actions{gap:16px;}
  .hero-copy-band .button-cream{padding:13px 17px;}
  .hero-copy-band {background-position:50% 50%!important;}
}
@media(prefers-reduced-motion:reduce) {
  .hero-motion video{display:none!important;}
  .hero-motion .reduce-motion-poster{display:block!important;}
}