/* ============================================================
   AVANT GARDE DENTAL — hero
   Loads AFTER css/styles.css and overrides section 5.

   Your clip is lit like a product shot on a silver backdrop, so the
   hero is built as that studio rather than a dark landing panel: the
   page ground is tuned to the clip's own edge tones so the two read
   as one continuous field.

   On scroll the lights go down — the ground whitens, the arches
   recede, and the credentials strip rises out of the white.
   ============================================================ */

/* ------------------------------ header ---------------------------------- */
/* Bigger logo, taller bar, and the whole row pushed out to the screen edges
   instead of being penned inside the 1200px measure. */
:root { --header-h: 96px; }
.logo-link img { height: 62px; }

.site-header .wrap {
  max-width: none;
  padding-inline: clamp(1.5rem, 3.5vw, 4rem);
}
.header-inner { gap: 1.25rem; }
.nav { margin-left: auto; gap: .15rem; }
.nav-link { padding-inline: 1rem; }

@media (max-width: 1080px) {
  .nav-link { padding-inline: .7rem; }
}
@media (max-width: 820px) {
  :root { --header-h: 92px; }
  .logo-link img { height: 58px; }
}
@media (max-width: 640px) {
  :root { --header-h: 78px; }
  .logo-link img { height: 48px; }
}

/* ------------------------------ buttons --------------------------------- */
/* The stock gradient ends on a bright leaf green that reads cheap next to the
   navy. Same brand move, deeper landing: the green becomes a jewel tone and
   the blue halo underneath goes neutral and tight. */
.btn-primary {
  background: linear-gradient(102deg, #0A84E8 0%, #12A2C4 54%, #2FAE6E 100%);
  box-shadow: 0 2px 10px rgba(10, 37, 64, .18);
}
.btn-primary:hover {
  background: linear-gradient(102deg, #0977D2 0%, #1194B4 54%, #279C61 100%);
  box-shadow: 0 6px 20px rgba(10, 37, 64, .24);
}

/* ---------------- tokens (scoped, nothing global changes) --------------- */
.hero-scene {
  --p: 0;                    /* scroll progress 0 -> 1, set by js/main.js */

  --stage-wash:  #EEF0F4;    /* airy field behind the type */
  --stage-meet:  #C6C9D4;    /* sampled from the clip's left edge */
  --stage-mid:   #A0AAB8;
  --stage-deep:  #86929F;    /* sampled from the clip's right edge */
  --stage-ink:   #33475C;    /* body copy on silver, passes AA */
  --stage-blue:  #0F5FA8;    /* eyebrow: azure deepened for contrast */
}

/* ------------------------------ scene ---------------------------------- */
/* The scene is taller than the hero; the difference is the scroll runway
   the transition plays across. */
.hero-scene {
  position: relative;
  height: calc(clamp(560px, calc(100svh - var(--header-h)), 720px) + 280px);
  min-height: 0;
}

.hero {
  position: sticky;
  top: var(--header-h);
  height: clamp(560px, calc(100svh - var(--header-h)), 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;

  /* One silver field across the whole hero. The old version ran light on the
     copy side and grey on the clip side, and that difference read as a seam
     down the middle. Near-horizontal, matching the clip's own falloff. */
  background:
    radial-gradient(85% 80% at 58% 40%,
      rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 74%),
    linear-gradient(92deg,
      #DCE1E8 0%,
      #D5DAE2 34%,
      var(--stage-meet) 56%,
      #BEC6D2 80%,
      #B4BDCA 100%);
}

/* The old 4px gradient rule marked the bottom of a navy block. There is no
   longer an edge for it to mark — the credentials hairline does that job. */
.hero::after { content: none; }

/* ------------------------------ stage ---------------------------------- */
/* Sized to the clip's native 640x592 so it is never letterboxed, anchored
   past the right edge of the viewport so that side needs no treatment. */
.hero-stage {
  position: absolute;
  top: 50%;
  /* Aligned to the content container's right edge rather than the
     viewport's, so the gap to the copy doesn't grow with window width. */
  right: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gutter));
  translate: 0 -50%;
  width: min(34%, 460px);
  aspect-ratio: 640 / 592;
  z-index: 1;
  pointer-events: none;
}

/* Directional lift: flattens the clip's own left-to-right falloff so its
   backdrop sits in the same range as the page around it. */
.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(92deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.16) 65%,
    rgba(255,255,255,.30) 100%);
  opacity: calc(1 - var(--p) * 1.2);

  /* Feathered exactly like the clip beneath it. Without this the lift is a
     hard-edged rectangle sitting on the page — a visible box around the
     glass, which is worse than the tonal difference it was fixing. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero-stage-media {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* the box matches the clip's ratio, so nothing crops */

  /* The arches sit 107px from the top and 85px from the bottom, so those edges
     get a real feather. They run almost to the left and right edges, so those
     sides get only a hairline — just enough to kill the straight line, with the
     page gradient doing the rest of the work. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  transform: translate3d(0, calc(var(--p) * -30px), 0)
             scale(calc(1 - var(--p) * 0.05));
  opacity: calc(1 - var(--p) * 1.2);
  will-change: transform, opacity;
}

/* Engines without mask-composite would render the two layers as a union,
   i.e. no feather at all. Give them the vertical fade on its own. */
@supports not ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  .hero-stage-media {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  }
}

/* ------------------------------ copy ----------------------------------- */
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 0;
  transform: translate3d(0, calc(var(--p) * -44px), 0);
  opacity: calc(1 - var(--p) * 1.2);
  will-change: transform, opacity;
}

.hero-copy { max-width: min(52%, 40rem); }

.hero .eyebrow { color: var(--stage-blue); }

.hero h1.hero-title {
  color: var(--navy);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.hero .lead {
  color: var(--stage-ink);
  font-size: clamp(1.0625rem, 1.45vw, 1.25rem);
  line-height: 1.72;
  max-width: 48ch;
  margin-top: 1.7rem;
}

/* Primary keeps the brand gradient, but the glow comes down. A tight,
   neutral shadow reads considerably more expensive than a blue halo. */
/* (primary button styling now lives in the buttons block above) */

/* The phone button is glass, echoing the object it sits beside. */
.hero .btn-onstage {
  border-color: rgba(10, 37, 64, .28);
  color: var(--navy);
  background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero .btn-onstage:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

/* ------------------------- the lights going down ------------------------ */
/* Squared, so the white arrives late and fast rather than greying the whole
   scroll. By the time the scene releases, the hero is already the same white
   as the credentials strip below it — which is what hides the seam. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--mist);
  opacity: calc(var(--p) * var(--p));
  pointer-events: none;
}

/* ----------------------------- responsive ------------------------------- */
@media (max-width: 1080px) {
  .hero-copy { max-width: 52%; }
  .hero-stage { width: min(44%, 500px); right: var(--gutter); }
}

@media (max-width: 820px) {
  /* No sticky runway on small screens — the hero is a plain section and the
     arches sit above the copy where they can be seen at full width. */
  .hero-scene { height: auto; min-height: 0; }

  .hero {
    position: relative;
    height: auto;
    min-height: 0;
    display: block;
    padding-block: clamp(1.5rem, 5vw, 2.5rem) clamp(3rem, 9vw, 4.5rem);
    background:
      linear-gradient(178deg,
        #DFE4EB 0%,
        var(--stage-meet) 42%,
        #BCC4D0 72%,
        #DDE2E9 100%);
  }

  .hero-inner,
  .hero-stage-media { transform: none; opacity: 1; }
  .hero-veil { display: none; }

  .hero-stage {
    position: relative;
    top: auto;
    right: auto;
    translate: none;
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
    margin-block: 0 .5rem;
  }
  /* Full bleed on mobile, so only the top and bottom need feathering. */
  .hero-stage-media {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  }

  .hero-copy { max-width: none; }
  .hero-title br { display: none; }
  .hero .lead { max-width: none; }
  .hero .btn-row .btn { flex: 1 1 auto; }
}

/* ------------------------------- motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-scene { height: auto; min-height: 0; }
  .hero {
    position: relative;
    height: auto;
    min-height: 0;
    display: block;
    padding-block: clamp(3rem, 8vw, 5rem);
  }
  .hero-inner,
  .hero-stage-media { transform: none; opacity: 1; }
  .hero-veil { display: none; }
  .hero-stage {
    position: relative;
    top: auto;
    right: auto;
    translate: none;
    width: min(100%, 38rem);
    margin: 2.5rem auto 0;
  }
  .hero-copy { max-width: none; }
}
/* ---------- hero → next section handoff ---------- */
@media (min-width: 821px) {
  .hero-scene + .section { padding-top: clamp(2rem, 4vw, 3.5rem); }
}
@media (min-width: 821px) {
  .hero-scene + .section {
    position: relative;
    z-index: 4;
    margin-top: -140px;
    background: var(--mist);
  }
}
/* Larger logo, with the bar grown to match so it isn't cramped. */
:root { --header-h: 112px; }
.logo-link img { height: 76px; }

@media (max-width: 820px) {
  :root { --header-h: 104px; }
  .logo-link img { height: 68px; }
}
@media (max-width: 640px) {
  :root { --header-h: 88px; }
  .logo-link img { height: 56px; }
}

/* Stage resized to the skull clip's native 704x560. */
.hero-stage { aspect-ratio: 704 / 560; }

/* Larger hero stage. Was min(34%, 460px). */
.hero-stage { width: min(44%, 620px); }

@media (max-width: 1080px) {
  .hero-stage { width: min(50%, 560px); }
}

/* ============================================================
   Matching the page ground to the clip's own backdrop.
   Sampled: clip corners ~#7E8B9E, page right edge was #B4BDCA.
   Both move toward ~#A5AFC0 so there's no rectangle.
   ============================================================ */

.hero {
  background:
    radial-gradient(85% 80% at 42% 40%,
      rgba(255,255,255,.50) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(92deg,
      #DCE1E8 0%,
      #D2D8E1 30%,
      #C2C9D6 50%,
      #B0B9C9 72%,
      #A5AFC0 100%);
}

/* The lift is now radial, not directional: transparent through the middle
   where the skull is, rising to ~30% white at the edges where the clip's
   own backdrop needs to meet the page. */
.hero-stage::after {
  background: radial-gradient(ellipse 58% 58% at 50% 48%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.16) 72%,
    rgba(255,255,255,.32) 100%);
}

/* Softer feather on both layers, so the rectangle dissolves rather than
   ending. Wider than before on every side. */
.hero-stage::after,
.hero-stage-media {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ============================================================
   Back to the arches clip. Reverts the skull-specific overrides
   above to their original values.
   ============================================================ */
.hero-stage {
  aspect-ratio: 640 / 592;
  width: min(34%, 460px);
}
@media (max-width: 1080px) {
  .hero-stage { width: min(44%, 500px); right: var(--gutter); }
}

.hero {
  background:
    radial-gradient(85% 80% at 58% 40%,
      rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 74%),
    linear-gradient(92deg,
      #DCE1E8 0%,
      #D5DAE2 34%,
      var(--stage-meet) 56%,
      #BEC6D2 80%,
      #B4BDCA 100%);
}

.hero-stage::after {
  background: linear-gradient(92deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.16) 65%,
    rgba(255,255,255,.30) 100%);
}

.hero-stage::after,
.hero-stage-media {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media (max-width: 820px) {
  /* Hiding the br removed the space too. Two lines fit fine here. */
  .hero-title br { display: inline; }

  /* Was full-bleed with negative margins, which cropped the clip. */
  .hero-stage {
    width: min(100%, 22rem);
    margin-inline: auto;
  }
  .hero-stage-media { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 820px) {
  /* Feather the clip's edges without the horizontal crop that the
     full-bleed version had. */
  .hero-stage-media {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }

  /* The hero was ending in the middle of the next section's eyebrow. */
  .hero { padding-block: clamp(1.5rem, 5vw, 2.5rem) clamp(2.5rem, 8vw, 4rem); }
  .hero-scene + .section { padding-top: clamp(2.5rem, 7vw, 3.5rem); }
}

@media (max-width: 820px) {
  /* Force real separation between the hero and what follows. The
     previous attempt was being overridden. */
  .hero-scene {
    padding-bottom: 3rem !important;
    background: linear-gradient(178deg,
      #DFE4EB 0%, var(--stage-meet) 42%, #BCC4D0 72%, #DDE2E9 100%);
  }
  .hero {
    padding-block: 1.5rem 0 !important;
    background: transparent !important;
  }
  .hero-scene + .section {
    padding-top: 3rem !important;
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 820px) {
  /* Background belongs on .hero — it carries the content, so padding
     and gradient have to live on the same element. */
  .hero-scene { background: none !important; padding-bottom: 0 !important; }
  .hero {
    background: linear-gradient(178deg,
      #DFE4EB 0%, var(--stage-meet) 42%, #BCC4D0 72%, #DDE2E9 100%) !important;
    padding-block: 1.5rem 3rem !important;
  }
}

/* The desktop overlap must not apply on any phone or tablet. The old
   821px threshold was too close to large-phone viewport widths. */
@media (max-width: 1024px) {
  .hero-scene + .section {
    margin-top: 0 !important;
    padding-top: 2.5rem !important;
    position: static !important;
  }
}

/* .hero switches from sticky to relative on mobile, but `top` was never
   cleared — so it kept shifting the hero 112px down over the section
   below without moving its layout box. This was the overlap. */
@media (max-width: 1024px) {
  .hero { top: auto !important; }
}