/* Teamworks hero: scroll-scrubbed video + callouts. Depends on the global tokens in site-tokens.css */
/* ------------------------------------------------------------------
   HERO  |  scroll-scrubbed 3D knee video (signature)
   Outer section is tall; inner stage is sticky for the duration.
------------------------------------------------------------------ */
.hero{position:relative;height:340vh;background:var(--navy-900);color:#fff}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media canvas,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero-media canvas,.hero-media .hero-static{display:none}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,24,42,.92) 0%,rgba(6,24,42,.72) 34%,rgba(6,24,42,.15) 62%,rgba(6,24,42,0) 100%),
  linear-gradient(180deg,rgba(6,24,42,.55) 0%,rgba(6,24,42,0) 30%,rgba(6,24,42,0) 70%,rgba(6,24,42,.8) 100%)}
.hero-content{position:relative;z-index:2;padding-top:var(--header-h);display:grid;gap:40px}
.hero-copy{max-width:640px}
.hero-copy .eyebrow{color:var(--teal-300)}
.hero-copy h1{font-size:clamp(2.5rem,5.4vw,4.75rem);font-weight:700;margin-top:22px;color:#fff}
.hero-copy h1 em{font-style:normal;color:var(--teal-300)}
.hero-copy .lede{margin-top:22px;font-size:clamp(1.05rem,1.4vw,1.25rem);color:rgba(255,255,255,.8);max-width:52ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center}

/* Callout bubbles: the live site's three benefits, anchored to points on the
   knee in VIDEO coordinates (percent of the 1920x1080 frame) and converted
   through the object-fit: cover / object-position math in JS. */
.callouts{position:absolute;inset:0;z-index:3;pointer-events:none}
.callout{position:absolute;left:0;top:0;width:0;height:0;opacity:0;transition:opacity .22s ease-out;--len:100px;--ang:0deg}
.callout.is-on{opacity:1}
.callout-dot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--teal-300);box-shadow:0 0 0 3px rgba(6,24,42,.55),0 0 0 4px rgba(255,255,255,.85)}
.callout-dot::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(94,211,207,.7);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:0}}
.callout-line{position:absolute;left:0;top:0;height:1.5px;width:var(--len);background:linear-gradient(90deg,var(--teal-300),rgba(94,211,207,.55));transform-origin:0 50%;transform:rotate(var(--ang)) scaleX(0);transition:transform .25s ease-out}
.callout.is-on .callout-line{transform:rotate(var(--ang)) scaleX(1)}
/* Round frosted-glass bubble. --d is the diameter; JS reads it for the leader line. */
.callout-card{--d:188px;position:absolute;left:0;top:0;width:var(--d);height:var(--d);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;
  background:radial-gradient(120% 120% at 28% 18%,rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 42%,rgba(255,255,255,.04) 70%),rgba(10,34,56,.26);
  backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -14px 28px rgba(6,24,42,.22),0 0 0 6px rgba(255,255,255,.05),0 22px 48px rgba(0,0,0,.35);
  transform:scale(.55);transform-origin:50% 100%;transition:transform .32s cubic-bezier(.2,1.3,.4,1)}
.callout.is-on .callout-card{transform:scale(1)}
.callout-card h3{font-size:1.08rem;color:#fff;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(6,24,42,.45)}
.callout-card p{margin-top:6px;font-size:.8rem;line-height:1.38;color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(6,24,42,.45);max-width:15ch}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.callout-card{background:rgba(10,34,56,.82)}}
@media (prefers-reduced-motion:reduce){
  .callout,.callout-line,.callout-card{transition:none}
  .callout-dot::after{animation:none;opacity:.6;transform:none}
}
.hero-hint{position:absolute;right:var(--gutter);bottom:28px;z-index:2;display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero-hint .wheel{width:22px;height:34px;border:2px solid rgba(255,255,255,.5);border-radius:12px;position:relative}
.hero-hint .wheel::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
.hero.is-finished .hero-hint{opacity:0;transition:opacity .3s}

/* Hero to statement hand-off: the hero stays pinned exactly where it is and
   the statement slides up over it, swinging flat from a tilted plane
   (scroll-linked, JS). The hero gets one extra screen of scroll, which the
   statement overlaps, so the hero is fully covered before it would move. */
main{overflow-x:clip}
/* Everything after the hero scrolls above the pinned stage, so it never shows through */


@media (max-width:900px){
  .hero{height:300vh}
  .hero-media video,.hero-media canvas,.hero-media img{object-position:57% 50%}
  .hero-scrim{background:linear-gradient(180deg,rgba(6,24,42,.75) 0%,rgba(6,24,42,.35) 35%,rgba(6,24,42,.3) 60%,rgba(6,24,42,.92) 100%)}
  .hero-content{gap:26px;align-self:end;padding-bottom:40px}
  .hero-copy h1{margin-top:16px}
  .hero-copy .lede{margin-top:14px}
  .hero-ctas{margin-top:22px}
  .callout-card{--d:150px;padding:16px}
  .callout-card h3{font-size:.92rem}
  .callout-card p{font-size:.72rem;margin-top:4px}
  .hero-hint{display:none}
  .hero-copy .eyebrow{font-size:.7rem;letter-spacing:.1em}
}

/* ------------------------------------------------------------------
   Hero to statement hand-off (restored on Dan's instruction, 2026-10-26):
   the hero stays pinned and unchanged; the About (statement) container
   rises over it, swinging flat from a tilted plane (scroll-linked, hero.js).
   The hero gets one extra screen of scroll that the statement overlaps.
------------------------------------------------------------------ */
.hero.has-handoff{height:440vh}
.e-con.hero-wrap ~ .e-con{position:relative;z-index:2}
.e-con.statement.is-3d{margin-top:-100vh;margin-top:-100svh;margin-block-start:-100svh;position:relative;z-index:2;transform-origin:50% 85vh;will-change:transform;transition:none;box-shadow:0 -30px 80px rgba(6,24,42,calc(var(--lift,0) * .45))}
@media (max-width:900px){.hero.has-handoff{height:400vh}}
@media (prefers-reduced-motion:reduce){.hero.has-handoff{height:340vh}.e-con.statement.is-3d{margin-top:0;margin-block-start:0;transform:none!important;box-shadow:none}}

/* ------------------------------------------------------------------
   Light hero variant (physio clinic footage, 2026-10-30): bright background,
   navy header and copy, white wash instead of the dark scrims.
   Active when body.hero-light (theme mod twh_hero_variant = physio).
------------------------------------------------------------------ */
.hero-light .hero{background:#f3f7f9;color:var(--navy-900)}
.hero-light .hero-media video,.hero-light .hero-media canvas,.hero-light .hero-media img{object-position:62% 50%}
.hero-light .hero-scrim{background:
  linear-gradient(90deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.62) 34%,rgba(255,255,255,0) 62%,rgba(255,255,255,0) 100%),
  linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 26%)}
.hero-light .hero-copy .eyebrow{color:#0A6F6D}
.hero-light .hero-copy .eyebrow::before{background:#0A6F6D}
.hero-light .hero-copy h1{color:var(--navy-900)}
.hero-light .hero-copy h1 em{color:#0A6F6D}
.hero-light .hero-copy .lede{color:#1F3A4D}
.hero-light .hero .btn-ghost{border-color:rgba(6,24,42,.45);color:var(--navy-900)}
.hero-light .hero .btn-ghost:hover{border-color:var(--navy-900);background:rgba(6,24,42,.06)}
.hero-light .hero-hint{color:#1F3A4D}
.hero-light .hero-hint .wheel{border-color:rgba(6,24,42,.45)}
.hero-light .hero-hint .wheel::after{background:var(--navy-900)}
/* Callout bubbles keep the dark glass so they read on the white clinic; dot gets a navy ring */
.hero-light .callout-dot{background:var(--teal-500);box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 4px rgba(6,24,42,.55)}
.hero-light .callout-dot::after{border-color:rgba(1,171,168,.8)}
.hero-light .callout-line{background:linear-gradient(90deg,var(--teal-600),rgba(10,143,140,.6))}
.hero-light .callout-card{background:radial-gradient(120% 120% at 28% 18%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 42%,rgba(255,255,255,0) 70%),rgba(6,24,42,.78);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 0 0 6px rgba(6,24,42,.06),0 22px 48px rgba(6,24,42,.28)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hero-light .callout-card{background:rgba(6,24,42,.9)}}
/* Header over the light hero (transparent state only; the scrolled solid header keeps white text) */
.hero-light .site-header:not(.is-scrolled){color:var(--navy-900)}
.hero-light .site-header:not(.is-scrolled) .nav>li>a,.hero-light .site-header:not(.is-scrolled) .nav>li>button{color:var(--navy-900)}
.hero-light .site-header:not(.is-scrolled) .nav>li>a:hover,.hero-light .site-header:not(.is-scrolled) .nav>li>button:hover,.hero-light .site-header:not(.is-scrolled) .nav>li>button[aria-expanded="true"]{background:rgba(6,24,42,.07)}
.hero-light .site-header:not(.is-scrolled) .nav>li>a[aria-current="page"]{color:#0A6F6D}
.hero-light .site-header:not(.is-scrolled) .header-phone{color:#1F3A4D}
.hero-light .site-header:not(.is-scrolled) .header-phone:hover{color:var(--navy-900)}
.hero-light .site-header:not(.is-scrolled) .menu-toggle{color:var(--navy-900)}
.hero-light .site-header:not(.is-scrolled) .menu-toggle:hover{background:rgba(6,24,42,.07)}
/* Scrolled header turns to dark glass, so the white logo comes back */
.hero-light .site-header .brand .logo-white{display:none}
.hero-light .site-header.is-scrolled .brand .logo-dark{display:none}
.hero-light .site-header.is-scrolled .brand .logo-white{display:block}
@media (max-width:900px){
  .hero-light .hero-media video,.hero-light .hero-media canvas,.hero-light .hero-media img{object-position:78% 50%}
  .hero-light .hero-scrim{background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.2) 30%,rgba(255,255,255,.35) 55%,rgba(255,255,255,.92) 100%)}
}

/* ------------------------------------------------------------------
   Still variant (physio-still, 2026-11-02): the original clinic photo,
   one screen tall, three callouts shown together, no scroll track.
------------------------------------------------------------------ */
.hero.is-still{height:100vh;height:100svh}
.hero.is-still .hero-stage{position:relative}
.hero.is-still .hero-media video,.hero.is-still .hero-media canvas{display:none}
.hero.is-still .hero-media .hero-static{display:block}
.hero.is-still .hero-hint{display:none}
.hero.is-still .callout{transition:opacity .45s ease-out}
.hero.is-still .callout-card{transition:transform .5s cubic-bezier(.2,1.3,.4,1)}
@media (max-width:1100px){.hero.is-still .callout-card{--d:150px;padding:16px}.hero.is-still .callout-card h3{font-size:.92rem}.hero.is-still .callout-card p{font-size:.72rem}}
@media (max-width:900px){.hero.is-still .callout-card{--d:132px;padding:14px}.hero.is-still .callout-card h3{font-size:.86rem}.hero.is-still .callout-card p{font-size:.68rem}}
@media (max-width:640px){.hero.is-still .callout-card{--d:112px;padding:10px}.hero.is-still .callout-card h3{font-size:.78rem}.hero.is-still .callout-card p{font-size:.62rem;margin-top:3px}}