/* Sprint 3.1: isolated cinematic hero over the unchanged 2.1.2 body. */
/* The legacy mobile sheet uses overflow-x:hidden on body, which disables sticky pinning. */
html, body { overflow-x: clip; overflow-y: visible; }
.site-nav {
  position: fixed;
  z-index: 60;
  transition: background .36s ease, color .36s ease, border-color .36s ease, box-shadow .36s ease;
}
.site-nav.v3-nav-light,
.site-nav.v3-nav-light.gm-nav-scrolled {
  color: #241f1b;
  background: rgba(255, 250, 243, .92);
  box-shadow: 0 10px 32px rgba(60, 40, 28, .1);
}
.site-nav.v3-nav-light .nav-cta {
  color: #fffaf3;
  background: #241f1b;
}

.v3-hero-track {
  position: relative;
  height: 220svh;
  background: #151112;
}
.v3-hero-scene {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 610px;
  overflow: hidden;
  isolation: isolate;
  color: #f5eee5;
  background: radial-gradient(ellipse at 74% 47%, #302724 0%, #181416 39%, #0c0b0c 76%);
}
.v3-hero-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--v3-light-progress, 0);
  background: radial-gradient(ellipse at 65% 78%, rgba(255, 232, 193, .44), transparent 58%);
  pointer-events: none;
}
.v3-ambient {
  position: absolute;
  left: 48%;
  top: 12%;
  width: 55vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(170, 120, 70, .28), rgba(120, 70, 45, .08) 44%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.v3-orbit {
  position: absolute;
  left: calc(70% - min(36vh, 33vw));
  top: calc(50% - min(36vh, 33vw));
  width: min(72vh, 66vw);
  aspect-ratio: 1;
  border: 1px solid rgba(236, 206, 161, .12);
  border-radius: 50%;
  pointer-events: none;
}
.v3-orbit--two { transform: scale(1.35); opacity: .4; }
.v3-light {
  position: absolute;
  right: 15%;
  top: 8%;
  width: 2px;
  height: 90%;
  transform: rotate(25deg);
  background: linear-gradient(transparent, rgba(255, 230, 183, .14), transparent);
  filter: blur(8px);
  pointer-events: none;
}
.v3-hero-copy {
  position: absolute;
  z-index: 5;
  left: clamp(28px, 8vw, 150px);
  top: 50%;
  width: min(38vw, 530px);
  transform: translateY(-50%);
}
.v3-eyebrow {
  margin: 0;
  color: #dfbf93;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .26em;
}
.v3-hero-copy h1 {
  margin: 1.1rem 0 1.4rem;
  font: 400 clamp(3.8rem, 5vw, 6rem)/.98 Georgia, "Times New Roman", serif;
  letter-spacing: -.055em;
}
.v3-hero-copy h1 i { display: block; color: #e3c9a5; font-weight: 400; }
.v3-lede {
  max-width: 32rem;
  margin: 0 0 2.1rem;
  color: #cfc3b5;
  font-size: clamp(.88rem, 1.07vw, 1.04rem);
  line-height: 1.75;
}
.v3-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.v3-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 0 1.35rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  text-align: center;
  transition: background .2s, border-color .2s, transform .2s;
}
.v3-button:hover { transform: translateY(-2px); }
.v3-button--primary { background: #dcc29c; color: #211811; }
.v3-button--primary:hover { background: #f1d9af; }
.v3-button--quiet { border-color: rgba(237, 217, 184, .24); color: #f5eee5; }
.v3-button--quiet:hover { border-color: #d9bd8f; }
.v3-showcase {
  position: absolute;
  z-index: 3;
  inset: 7% 3% 4% 43%;
  perspective: 1300px;
  pointer-events: none;
}
.v3-showcase__halo {
  position: absolute;
  inset: 17% 0 2% 15%;
  background: radial-gradient(ellipse, rgba(199, 145, 88, .22), transparent 64%);
  filter: blur(25px);
}
.v3-sample {
  position: absolute;
  top: 49%;
  left: 50%;
  margin: 0;
  aspect-ratio: .46;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
}
.v3-phone-crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: clamp(19px, 2.2vw, 34px);
  background: #382e2b;
  box-shadow: 0 35px 90px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255, 230, 195, .25), inset 0 0 0 2px rgba(255, 255, 255, .06);
}
.v3-phone-crop img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  max-width: none;
  height: 113%;
  transform: translate(-50%, -50%);
}
.v3-sample figcaption {
  position: absolute;
  left: 50%;
  bottom: -2rem;
  width: 260px;
  transform: translateX(-50%);
  color: #ddd0bf;
  text-align: center;
  font-size: .59rem;
  letter-spacing: .09em;
  opacity: .7;
}
.v3-sample--main { z-index: 3; width: clamp(180px, 21vw, 286px); }
.v3-sample--left { z-index: 2; left: 19%; top: 54%; width: clamp(135px, 16vw, 218px); opacity: .88; }
.v3-sample--right { z-index: 1; left: 81%; top: 46%; width: clamp(135px, 16vw, 218px); opacity: .84; }
.v3-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #eed3a9;
  box-shadow: 0 0 15px 5px rgba(240, 202, 135, .5);
}
.v3-spark--one { left: 12%; top: 17%; }
.v3-spark--two { right: 7%; bottom: 20%; }
.v3-progress {
  position: absolute;
  z-index: 8;
  bottom: 7%;
  left: clamp(28px, 8vw, 150px);
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #c9bca8;
  font-size: .61rem;
  letter-spacing: .2em;
}
.v3-progress > div { width: 90px; height: 1px; background: rgba(255, 255, 255, .3); }
.v3-progress i { display: block; width: 0; height: 1px; background: #e9c992; }
.v3-transition {
  position: absolute;
  z-index: 10;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(17, 12, 12, .35), rgba(15, 10, 13, .08)), url('../assets/hero-bodas.webp') center / cover no-repeat;
  clip-path: inset(24% 16% 24% 64% round 28px);
  will-change: clip-path, opacity;
}
.v3-transition__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 253, 248, .89), rgba(255, 253, 248, .96));
  opacity: 0;
}

/* The approved benefits strip rises into the last light frame. Its content remains unchanged. */
main > .benefits-strip { position: relative; z-index: 12; margin-top: -25svh; }

@media (max-width: 900px) {
  .v3-hero-copy {
    top: 12%;
    left: 7%;
    right: 7%;
    width: auto;
    transform: none;
    text-align: center;
  }
  .v3-hero-copy h1 { max-width: 720px; margin: 1rem auto; font-size: clamp(3.3rem, 7.5vw, 5rem); }
  .v3-hero-copy h1 i { display: inline; }
  .v3-lede { max-width: 600px; margin: 0 auto 1.2rem; }
  .v3-actions { justify-content: center; }
  .v3-showcase { inset: 43% 0 3%; }
  .v3-sample--main { width: clamp(200px, 29vw, 250px); }
  .v3-sample--left { left: 22%; top: 52%; width: clamp(145px, 22vw, 190px); }
  .v3-sample--right { left: 78%; top: 48%; width: clamp(145px, 22vw, 190px); }
  .v3-progress { left: 7%; bottom: 3%; }
}
@media (max-width: 700px) {
  .v3-hero-scene { min-height: 650px; }
  .v3-hero-copy { top: 13%; left: 6%; right: 6%; }
  .v3-eyebrow { font-size: .56rem; line-height: 1.4; }
  .v3-hero-copy h1 { font-size: clamp(2.95rem, 11.5vw, 4.7rem); line-height: .99; margin: .8rem auto .65rem; }
  .v3-lede { max-width: 430px; margin-bottom: 1rem; font-size: .76rem; line-height: 1.55; }
  .v3-actions { gap: .55rem; }
  .v3-button { min-height: 42px; padding: 0 .92rem; font-size: .54rem; letter-spacing: .1em; }
  .v3-showcase { inset: 49% 0 3%; }
  .v3-ambient { width: 100vw; left: 0; top: 37%; }
  .v3-orbit { width: 75vw; left: 12.5%; top: 47%; }
  .v3-sample--main { width: clamp(155px, 41vw, 205px); }
  .v3-sample--left { left: 20%; top: 53%; width: clamp(105px, 29vw, 150px); }
  .v3-sample--right { left: 80%; top: 47%; width: clamp(105px, 29vw, 150px); }
  .v3-sample figcaption { display: none; }
  .v3-progress { bottom: 3.5%; left: 6%; font-size: .54rem; }
  .v3-progress > div { width: 66px; }
  .site-nav.v3-nav-light { border-color: rgba(90, 63, 38, .15); }
  .site-nav.v3-nav-light .site-nav__toggle { color: #241f1b; border-color: rgba(90, 63, 38, .2); background: rgba(90, 63, 38, .05); }
  .site-nav.v3-nav-light nav { border-color: rgba(90, 63, 38, .15); background: rgba(255, 250, 243, .98); }
  .site-nav.v3-nav-light nav a:not(.nav-cta) { color: #241f1b; border-color: rgba(90, 63, 38, .15); background: rgba(90, 63, 38, .04); }
}
@media (max-width: 420px) {
  .v3-hero-copy { top: 12.5%; }
  .v3-hero-copy h1 { font-size: clamp(2.65rem, 11.2vw, 3.7rem); }
  .v3-lede { font-size: .72rem; }
  .v3-showcase { inset: 47% 0 3%; }
  .v3-sample--main { width: 41vw; }
  .v3-sample--left, .v3-sample--right { width: 28vw; }
  .v3-sample--left { left: 19%; }
  .v3-sample--right { left: 81%; }
  .v3-button { padding: 0 .7rem; font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v3-hero-track { height: 100svh; }
  .v3-hero-scene { position: relative; background: linear-gradient(180deg, #151112 0%, #1d1717 78%, #fffdf8 100%); }
  .v3-transition { display: none; }
  .v3-sample { transform: translate(-50%, -50%) !important; opacity: 1 !important; will-change: auto; }
  .v3-hero-copy { opacity: 1 !important; }
  .v3-progress { display: none; }
  .v3-button { transition: none; }
}