:root{
    --navy:#0D1628; --navy-deep:#070C1A; --navy-mid:#16223A;
    --gold:#C2985A; --gold-light:#D9B876; --gold-deep:#7E6031;
    --steel:#6B6B6B;
    --paper:#EEEDE7; --paper-alt:#E6E4DD; --paper-card:#F6F4EE;
    --ink:#14182A; --ink-soft:#3A3F4F;
    --forest:#2E3B33;
    --serif:'Cormorant Garamond', Georgia, serif;
    --num:'DM Serif Display', Georgia, serif;
    --sans:'Inter', -apple-system, sans-serif;
    --mono:'IBM Plex Mono', ui-monospace, monospace;
    --ease:cubic-bezier(.22,.61,.36,1);
    --edge:clamp(20px, 6vw, 120px);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.7}
  ::selection{background:var(--gold); color:var(--navy-deep)}
  img{display:block; max-width:100%}
  a{color:inherit; text-decoration:none}
  button{font:inherit; cursor:pointer; background:none; border:0; color:inherit}

  .mono{font-family:var(--mono); font-size:.68rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase}
  .arr{display:inline-block; transition:transform .35s var(--ease)}
  .eyebrow{font-size:.72rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-deep); display:inline-flex; align-items:center; gap:.7em}
  .eyebrow::before{content:''; width:26px; height:1px; background:var(--gold); opacity:.8}
  .eyebrow.on-dark{color:var(--gold-light)}
  /* A hard break that only applies where there is room for it. Below this the
     line wraps on its own rather than breaking in an odd place. */
  .br-wide{display:inline}
  @media(max-width:760px){.br-wide{display:none}}
  /* One leading value for every display heading. Large serif type at 1.0 sets
     too tight and the old 1.12 on the Academy headline read visibly looser than
     the rest; 1.06 holds across 26px through 70px. The hero is the one
     exception, at nearly double the next size down it needs less. */
  h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.06; letter-spacing:-.01em}
  h2{font-size:clamp(2.1rem,5vw,4rem)}
  .gold-i{font-style:italic; color:var(--gold); font-weight:500}
  .lede{font-size:clamp(1.02rem,1.4vw,1.26rem); color:var(--ink-soft); max-width:60ch; font-weight:300}
  .dark .lede, .deep .lede{color:rgba(255,255,255,.74)}

  /* ---------- NAV ---------- */
  header{position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:18px var(--edge); transition:.5s var(--ease)}
  header.docked{background:rgba(7,12,26,.85); backdrop-filter:blur(14px); padding:12px var(--edge); box-shadow:0 1px 0 rgba(194,152,90,.18)}
  /* Two lockups, one at a time. Over the hero there is room for the full stacked
     mark; once the bar docks it drops to the wordmark, which lets the bar itself
     collapse to nav height instead of staying logo height. Swapped by display so
     the header actually gets shorter, with a short fade so the change reads as
     deliberate rather than as a flicker. Both images are decorative; the anchor
     carries the accessible name. */
  .brand{display:block; line-height:0}
  .brand img{display:block; height:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
  /* One lockup, the horizontal, in both header states; it only breathes out
     a little at the top of the page and settles when the nav docks. */
  .brand .brand-full{width:clamp(170px,15vw,220px)}
  .brand .brand-mark{display:none; width:clamp(150px,12.5vw,180px)}
  header.docked .brand-full{display:none}
  header.docked .brand-mark{display:block; animation:brandIn .38s var(--ease)}
  @keyframes brandIn{from{opacity:0}to{opacity:1}}
  nav{display:flex; align-items:center; gap:34px}
  .nav-links{display:flex; gap:30px; list-style:none}
  .nav-links a{color:rgba(255,255,255,.82); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; padding:4px 0; position:relative; transition:.3s}
  .nav-links a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold); transition:.35s var(--ease)}
  .nav-links a:hover{color:#fff}
  .nav-links a:hover::after{width:100%}
  .btn{font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; padding:13px 26px; border-radius:2px; transition:.4s var(--ease); display:inline-block; border:1px solid transparent; cursor:pointer}
  .btn-ghost{border-color:rgba(194,152,90,.6); color:var(--gold-light)}
  .btn-ghost:hover{background:var(--gold); color:var(--navy-deep); border-color:var(--gold)}
  .btn-solid{background:var(--gold); color:var(--navy-deep)}
  .btn-solid:hover{background:var(--gold-light)}
  .menu-toggle{display:none; flex-direction:column; gap:5px; padding:6px}
  .menu-toggle span{width:26px; height:1.5px; background:#fff; transition:.3s}

  /* ---------- HERO ---------- */
  .hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden}
  .hero-media{position:absolute; inset:0}
  .hero-media img{width:100%; height:100%; object-fit:cover}
  .hero-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s ease}
  .hero-media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,12,26,.55) 0%, rgba(7,12,26,.15) 32%, rgba(7,12,26,.55) 72%, rgba(7,12,26,.92) 100%)}
  .hero-inner{position:relative; z-index:2; padding:0 var(--edge) clamp(56px,8vh,110px); width:100%; max-width:1150px}
  .hero h1{margin-top:clamp(16px,2.2vh,28px); font-size:clamp(2.8rem,7vw,6rem); line-height:1.0; color:#fff; text-shadow:0 2px 40px rgba(0,0,0,.35)}
  .hero .lede{color:rgba(255,255,255,.86); margin:24px 0 36px; font-size:clamp(1.05rem,1.5vw,1.35rem)}
  .hero-cta{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
  .scroll-cue{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,.6); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px}
  .scroll-cue .line{width:1px; height:44px; background:linear-gradient(var(--gold),transparent); animation:drop 2.2s ease-in-out infinite}
  @keyframes drop{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}
  .rise{opacity:0; transform:translateY(26px); animation:rise 1.1s var(--ease) forwards}
  @keyframes rise{to{opacity:1; transform:none}}
  .d1{animation-delay:.15s}.d2{animation-delay:.34s}.d3{animation-delay:.53s}.d4{animation-delay:.72s}.d5{animation-delay:.9s}

  section{position:relative}
  .wrap{padding:clamp(84px,13vh,180px) var(--edge)}
  .dark{background:var(--navy); color:#fff}
  .deep{background:var(--navy-deep); color:#fff}

  /* ---------- STATEMENT ---------- */
  .statement .col{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(40px,7vw,110px); align-items:end; margin-top:38px}
  .statement .big{font-size:clamp(1.9rem,3.9vw,3.4rem); max-width:20ch}
  /* Trust marks, not buttons: a hairline rule and four columns rather than
     four pills, which read as things you could click. */
  .proof{list-style:none; display:flex; flex-wrap:wrap; margin-top:clamp(44px,6vw,70px); border-top:1px solid rgba(20,24,42,.16); padding-top:26px}
  .proof li{flex:1 1 0; min-width:168px; padding:0 clamp(16px,2.2vw,32px); border-left:1px solid rgba(20,24,42,.11); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); line-height:1.5}
  .proof li:first-child{padding-left:0; border-left:0}
  .proof li::before{content:''; display:block; width:5px; height:5px; border-radius:50%; background:var(--gold); margin-bottom:12px}
  @media(max-width:700px){
    .proof li{flex:1 1 44%; min-width:0; padding:0 0 0 16px; margin-bottom:18px}
    .proof li:nth-child(odd){padding-left:0; border-left:0}
  }

  @media(max-width:860px){.statement .col{grid-template-columns:1fr; gap:30px}}

  /* ---------- INSIDE THE ACADEMY, THE PICTURE STRIP ---------- */
  /* A slow marquee of the room. Hovering the strip stops it and hovering a card
     widens it, which is why the travel is a fixed pixel distance set from JS
     rather than a percentage: a card changing width mid-loop would otherwise
     drag the whole track sideways. */
  /* --gal-h drives both the strip height and the width a card opens to, so an
     opened card is exactly the photos' 4:5 and nothing is cropped. */
  .gal{--gal-h:clamp(340px,40vw,500px); background:var(--paper); padding:0 0 clamp(70px,9vh,110px)}
  .gal-head{display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; padding:0 var(--edge) 22px}
  .gal-hint{font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel)}
  .gal-hint .h-touch{display:none}
  .gal-viewport{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
                mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .gal-track{display:flex; gap:14px; width:max-content; will-change:transform}
  .gal-track.run{animation:galScroll var(--gal-dur,70s) linear infinite}
  @keyframes galScroll{to{transform:translateX(var(--gal-shift,-50%))}}
  .gal:hover .gal-track.run{animation-play-state:paused}

  .gal-card{position:relative; flex:none; width:clamp(150px,15vw,208px); height:var(--gal-h); margin:0; overflow:hidden;
            border-radius:2px; border:1px solid rgba(20,24,42,.1); background:var(--navy-deep);
            transition:width .62s cubic-bezier(.44,0,.56,1), border-color .5s var(--ease), box-shadow .62s var(--ease)}
  .gal-card img{width:100%; height:100%; object-fit:cover; filter:saturate(.5) brightness(.9); transition:filter .62s var(--ease)}
  .gal-card::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(7,12,26,.86) 0%, rgba(7,12,26,.15) 42%, transparent 70%); opacity:0; transition:opacity .5s var(--ease)}
  .gal-card figcaption{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 18px; opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease) .1s, transform .45s var(--ease) .1s}
  .gal-card .g-k{display:block; font-family:var(--serif); font-size:1.16rem; color:#fff; line-height:1.15}
  .gal-card .g-v{display:block; margin-top:5px; font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light)}
  .gal-card:hover{width:calc(var(--gal-h) * .8); border-color:var(--gold); box-shadow:0 22px 50px rgba(13,22,40,.22)}
  .gal-card:hover img{filter:saturate(1) brightness(1)}
  .gal-card:hover::after, .gal-card:hover figcaption{opacity:1}
  .gal-card:hover figcaption{transform:none}

  /* No hover on touch: let the strip be dragged instead, and show the captions,
     since there is no way to reveal them otherwise. */
  @media(hover:none){
    /* full 4:5 frames to swipe through, rather than slivers that never open */
    .gal{--gal-h:clamp(300px,92vw,420px)}
    .gal-card{width:calc(var(--gal-h) * .8)}
    .gal-hint .h-hover{display:none}
    .gal-hint .h-touch{display:inline}
    .gal-viewport{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; mask-image:none; -webkit-mask-image:none; padding:0 var(--edge)}
    .gal-viewport::-webkit-scrollbar{display:none}
    .gal-track{animation:none!important}
    .gal-card::after, .gal-card figcaption{opacity:1}
    .gal-card figcaption{transform:none}
    .gal-card img{filter:saturate(.8)}
  }

  /* ---------- INSIDE THE ACADEMY (tabs) ---------- */
  .inside{background:var(--navy-deep); color:#fff; overflow:visible}
  .tabbar-shell{position:sticky; top:64px; z-index:40; background:rgba(7,12,26,.92); backdrop-filter:blur(12px); border-top:1px solid rgba(194,152,90,.22); border-bottom:1px solid rgba(194,152,90,.22)}
  .tabbar{display:flex; gap:0; max-width:1200px; margin:0 auto; overflow-x:auto; scrollbar-width:none}
  .tabbar::-webkit-scrollbar{display:none}
  .tab{flex:1 0 auto; min-width:200px; text-align:left; padding:20px 26px; border-right:1px solid rgba(194,152,90,.14); color:rgba(255,255,255,.66); transition:.35s var(--ease); position:relative}
  .tab:first-child{border-left:1px solid rgba(194,152,90,.14)}
  .tab .t-num{font-family:var(--num); font-style:italic; font-size:.95rem; color:var(--gold); display:block; margin-bottom:4px; transition:.35s}
  .tab .t-name{font-family:var(--serif); font-size:1.25rem; letter-spacing:.01em}
  .tab .t-tag{display:block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; margin-top:5px; color:rgba(255,255,255,.4)}
  .tab::after{content:''; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:.45s var(--ease)}
  .tab.active{color:#fff}
  .tab.active .t-name{font-weight:600}
  .tab.active .t-num{color:var(--gold-light)}
  .tab.active::after{transform:scaleX(1)}
  .tab:hover{color:#fff}

  .panels{max-width:1200px; margin:0 auto; padding:clamp(48px,7vh,90px) clamp(20px,3vw,26px) clamp(80px,10vh,130px)}
  .panel{display:none; animation:panelIn .8s var(--ease)}
  .panel.active{display:block}
  @keyframes panelIn{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
  .panel-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,70px); align-items:center}
  .panel-grid.rev{direction:rtl}
  .panel-grid.rev>*{direction:ltr}
  .panel h3{font-size:clamp(1.9rem,3.4vw,3rem); color:#fff; margin:14px 0 18px}
  .panel .status{display:inline-block; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; padding:6px 12px; border-radius:2px; margin-bottom:16px}
  .status.live{background:rgba(194,152,90,.16); color:var(--gold-light); border:1px solid rgba(194,152,90,.45)}
  .status.soon{background:rgba(255,255,255,.06); color:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.25)}
  .panel p{color:rgba(255,255,255,.74); font-weight:300; max-width:52ch}
  .stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:34px; border:1px solid rgba(194,152,90,.25); border-radius:2px; overflow:hidden}
  .stat{background:rgba(255,255,255,.03); padding:18px 16px}
  .stat .s-big{display:block; font-family:var(--num); font-style:italic; font-weight:500; font-size:clamp(1.4rem,2.4vw,2rem); color:var(--gold-light); line-height:1}
  .stat .s-lab{display:block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.68); margin-top:8px; line-height:1.5}
  /* Source footage is all 16:9, which next to a tall column of copy leaves the
     panel looking short. The frame holds a taller ratio and the media is
     cropped into it, so both tabs stand the same height and neither jumps. */
  .visual{position:relative; border-radius:2px; overflow:hidden; border:1px solid rgba(194,152,90,.3); box-shadow:0 30px 80px rgba(0,0,0,.5); aspect-ratio:4/3}
  .visual img{width:100%; height:100%; object-fit:cover; object-position:left center}
  .visual .v-film{display:block; width:100%; height:100%; object-fit:cover; background:var(--navy-deep)}
  .visual .v-cap{position:absolute; left:0; right:0; bottom:0; padding:14px 18px; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.85); background:linear-gradient(0deg, rgba(7,12,26,.85), transparent)}

  /* session file mock (tab 3) */
  .file-card{background:var(--paper-card); color:var(--ink); border-radius:3px; padding:clamp(22px,3vw,34px); box-shadow:0 30px 80px rgba(0,0,0,.5); border:1px solid rgba(194,152,90,.5); max-width:520px}
  .file-card .f-head{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid rgba(20,24,42,.14); padding-bottom:14px; margin-bottom:18px}
  .file-card .f-name{font-family:var(--serif); font-size:1.5rem}
  .file-card .f-date{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep)}
  .f-row{display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-bottom:1px dashed rgba(20,24,42,.12); font-size:.92rem}
  .f-row .k{color:var(--ink-soft); font-weight:300}
  .f-row .v{font-family:var(--num); font-style:italic; color:var(--navy); font-size:1.05rem}
  .f-note{margin-top:16px; background:rgba(194,152,90,.1); border-left:2px solid var(--gold); padding:12px 16px; font-size:.88rem; color:var(--ink-soft); font-style:italic}
  .f-foot{margin-top:16px; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel)}

  /* ---------- COACHES ---------- */
  .coaches-head{padding:clamp(100px,14vh,180px) var(--edge) 56px; display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; background:var(--navy); color:#fff}
  .coaches-head .mono{color:var(--gold-light); display:flex; align-items:center; gap:14px}
  .coaches-head .mono::before{content:''; width:34px; height:1px; background:var(--gold)}
  .coaches-head h2{font-size:clamp(2.4rem,5vw,4.4rem); color:#fff; margin-top:18px}
  .coaches-head p{color:rgba(255,255,255,.66); max-width:36ch}
  .triptych{display:flex; min-height:82vh; background:var(--navy)}
  .tpanel{position:relative; flex:1; overflow:hidden; transition:flex .9s var(--ease); border-left:1px solid rgba(194,152,90,.25); display:flex; align-items:flex-end}
  .tpanel:first-child{border-left:0}
  .tpanel:hover{flex:1.9}
  .tpanel .ph{position:absolute; inset:0}
  .tpanel .ph img{width:100%; height:100%; object-fit:cover; object-position:center 18%; filter:saturate(.9); transition:1s var(--ease)}
  .tpanel:hover .ph img{filter:saturate(1)}
  .tpanel::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(13,22,40,.92) 0%, rgba(13,22,40,.28) 42%, rgba(13,22,40,.05) 70%); z-index:1}
  .tpanel .tc{position:relative; z-index:2; padding:26px clamp(18px,2.2vw,34px) 30px; width:100%; color:#fff}
  .tpanel .lead{font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--navy-deep); background:var(--gold); display:inline-block; padding:5px 9px; border-radius:2px; margin-bottom:12px}
  .tpanel h3{font-size:clamp(1.5rem,2.2vw,2.1rem); color:#fff}
  .tpanel .role{font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-light); margin-top:6px}
  .tpanel .bio{max-height:0; opacity:0; overflow:hidden; transition:max-height .9s var(--ease), opacity .7s var(--ease) .1s}
  .tpanel:hover .bio{max-height:340px; opacity:1}
  .tpanel .bio p{font-size:.86rem; color:rgba(255,255,255,.78); margin-top:14px; max-width:46ch}
  .tpanel .book{margin-top:16px; border-top:1px solid rgba(194,152,90,.4)}
  .tpanel .book a{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:rgba(255,255,255,.85); transition:.3s}
  .tpanel .book a:hover{color:var(--gold-light)}
  .tpanel .book a:hover .arr{transform:translate(3px,-3px)}
  .tpanel .book .l{font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light)}
  .trip-note{background:var(--navy); text-align:center; padding:clamp(44px,6vh,64px) var(--edge) clamp(80px,11vh,120px)}
  .trip-note::before{content:''; display:block; width:44px; height:1px; background:var(--gold); margin:0 auto 24px}
  .trip-note p{font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.8rem); line-height:1.35; color:rgba(255,255,255,.88); max-width:46ch; margin:0 auto}
  @media(max-width:880px){
    .triptych{flex-direction:column; min-height:0}
    .tpanel{min-height:66vh; border-left:0; border-top:1px solid rgba(194,152,90,.25)}
    .tpanel .bio{max-height:none; opacity:1}
    .gal-track{animation:none!important}
    .gal-viewport{overflow-x:auto}
    .phone .p-inner{transform:none!important}
    .phone .p-bar i{width:25%!important}
    .tpanel:hover{flex:1}
  }

  /* ---------- WAYS TO TRAIN ---------- */

  /* ---------- THE CLIENT JOURNEY ---------- */
  .jgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:64px; border-top:1px solid rgba(20,24,42,.18)}
  .jstep{padding:28px 26px 6px 0; position:relative}
  .jstep::before{content:''; position:absolute; top:-1px; left:0; width:44px; height:2px; background:var(--gold)}
  .jstep .j-num{font-family:var(--num); font-style:italic; font-size:1.05rem; color:var(--gold-deep)}
  .jstep h3{font-size:clamp(1.25rem,1.8vw,1.6rem); margin:12px 0 10px}
  .jstep p{font-size:.88rem; color:var(--ink-soft); font-weight:300; max-width:30ch}
  .journey-foot{margin-top:56px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
  .journey-foot .note{font-size:.85rem; color:var(--ink-soft); font-weight:300; max-width:56ch}
  @media(max-width:960px){.jgrid{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.jgrid{grid-template-columns:1fr}}

  /* ---------- PHONE MOCK (the member app) ---------- */
  /* ---------- THE MEMBER APP MOCK ---------- */
  .phone-wrap{display:flex; flex-direction:column; align-items:center}
  .phone{width:min(300px,78vw); background:linear-gradient(160deg,#1B2437,#080D1B 45%); border-radius:46px; padding:11px; position:relative;
         box-shadow:0 50px 110px rgba(0,0,0,.6), 0 0 0 1.5px rgba(194,152,90,.4), inset 0 0 0 1px rgba(255,255,255,.06)}
  /* side buttons, just enough to read as hardware rather than a rounded box */
  .phone .p-btn{position:absolute; width:2px; background:rgba(194,152,90,.4); border-radius:2px}
  .phone .p-btn-vol{left:-2px; top:112px; height:56px}
  .phone .p-btn-pwr{right:-2px; top:132px; height:74px}
  .phone .scr{background:var(--paper); border-radius:36px; overflow:hidden; color:var(--ink); font-size:12px; line-height:1.45;
              display:flex; flex-direction:column; height:544px; position:relative}
  .phone .notch{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:88px; height:20px; background:#080D1B; border-radius:12px; z-index:4}
  /* a soft diagonal sheen so the glass does not read flat */
  .phone .scr::after{content:''; position:absolute; inset:0; pointer-events:none; z-index:5; border-radius:36px;
                     background:linear-gradient(122deg, rgba(255,255,255,.16) 0 14%, transparent 34%)}

  .phone .p-status{flex-shrink:0; display:flex; justify-content:space-between; align-items:center; padding:11px 20px 4px; font-size:8.5px; font-weight:600; letter-spacing:.04em; color:var(--ink); z-index:6; position:relative}
  .phone .p-status-r{display:flex; align-items:center; gap:4px}
  .phone .p-sig, .phone .p-wifi, .phone .p-batt{display:block; background:var(--ink); border-radius:1px}
  .phone .p-sig{width:11px; height:7px; clip-path:polygon(0 70%,22% 70%,22% 100%,0 100%, 26% 40%,48% 40%,48% 100%,26% 100%, 52% 18%,74% 18%,74% 100%,52% 100%, 78% 0,100% 0,100% 100%,78% 100%)}
  .phone .p-wifi{width:9px; height:7px; clip-path:polygon(50% 100%,0 34%,14% 22%,50% 62%,86% 22%,100% 34%)}
  .phone .p-batt{width:15px; height:7.5px; border-radius:2px; position:relative}
  .phone .p-batt::after{content:''; position:absolute; right:-2.5px; top:2px; width:1.5px; height:3.5px; background:var(--ink); border-radius:0 1px 1px 0}

  .phone .p-view{flex:1; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16px,#000 calc(100% - 14px),transparent 100%);
                 mask-image:linear-gradient(180deg,transparent 0,#000 16px,#000 calc(100% - 14px),transparent 100%)}
  .phone .p-inner{display:flex; flex-direction:column; gap:9px; padding:14px 15px 18px}
  /* The screen pans slowly once the section is revealed, so the mock reads as a
     live app being scrolled rather than a flat screenshot. */
  .reveal.in .phone .p-inner{animation:appScroll 26s cubic-bezier(.5,0,.5,1) 1.2s infinite}
  @keyframes appScroll{
    0%,10%{transform:translateY(0)}
    30%,38%{transform:translateY(-150px)}
    58%,66%{transform:translateY(-300px)}
    86%,100%{transform:translateY(0)}
  }

  .phone .p-greet{padding:2px 2px 2px}
  .phone .p-eyebrow{font-size:8px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); font-weight:500}
  .phone .p-name{font-family:var(--serif); font-size:22px; line-height:1.1; margin-top:2px}
  .phone .p-card{background:#fff; border:1px solid rgba(20,24,42,.09); border-radius:13px; padding:12px 13px; box-shadow:0 5px 16px rgba(13,22,40,.055)}
  .phone .p-card.navy{background:linear-gradient(150deg,var(--navy-mid),var(--navy)); color:#fff; border-color:transparent}
  .phone .p-card.goldtop{border-top:2px solid var(--gold)}
  .phone .p-lab{font-size:7.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); font-weight:500}
  .phone .navy .p-lab{color:var(--gold-light)}
  .phone .p-serif{font-family:var(--serif); font-size:15px; margin-top:3px; line-height:1.25}
  .phone .navy .p-serif{color:var(--gold-light); font-style:italic}
  .phone .p-bar{height:4px; border-radius:2px; background:rgba(255,255,255,.16); margin-top:10px; overflow:hidden}
  .phone .p-bar i{display:block; height:100%; width:25%; background:linear-gradient(90deg,var(--gold),var(--gold-light))}
  .reveal.in .phone .p-bar i{animation:barFill 1.6s var(--ease) .9s both}
  @keyframes barFill{from{width:0}to{width:25%}}
  .phone .p-sub{font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-top:7px}
  .phone .p-sub.on-navy{color:rgba(255,255,255,.66)}

  /* practice plan: the items tick themselves off in sequence */
  .phone .p-todo{list-style:none; margin-top:10px; display:flex; flex-direction:column; gap:7px}
  .phone .p-todo li{display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--ink-soft)}
  .phone .p-todo .tick{width:13px; height:13px; flex-shrink:0; border-radius:50%; border:1.5px solid rgba(20,24,42,.22); position:relative; transition:.4s var(--ease)}
  .phone .p-todo .tick::after{content:''; position:absolute; left:3.5px; top:1.5px; width:3.5px; height:7px; border:solid #fff; border-width:0 1.5px 1.5px 0; transform:rotate(45deg) scale(0); transition:.3s var(--ease)}
  .reveal.in .phone .p-todo li.t1 .tick, .reveal.in .phone .p-todo li.t2 .tick, .reveal.in .phone .p-todo li.t3 .tick{animation:tickOn .01s linear forwards}
  .reveal.in .phone .p-todo li.t1 .tick{animation-delay:1.5s}
  .reveal.in .phone .p-todo li.t2 .tick{animation-delay:2.1s}
  .reveal.in .phone .p-todo li.t3 .tick{animation-delay:2.7s}
  @keyframes tickOn{to{background:var(--forest); border-color:var(--forest)}}
  .reveal.in .phone .p-todo li.t1 .tick::after{animation:tickMark .3s var(--ease) 1.5s forwards}
  .reveal.in .phone .p-todo li.t2 .tick::after{animation:tickMark .3s var(--ease) 2.1s forwards}
  .reveal.in .phone .p-todo li.t3 .tick::after{animation:tickMark .3s var(--ease) 2.7s forwards}
  @keyframes tickMark{to{transform:rotate(45deg) scale(1)}}
  .reveal.in .phone .p-todo li.t1, .reveal.in .phone .p-todo li.t2, .reveal.in .phone .p-todo li.t3{animation:todoDone .3s var(--ease) forwards}
  .reveal.in .phone .p-todo li.t1{animation-delay:1.5s} .reveal.in .phone .p-todo li.t2{animation-delay:2.1s} .reveal.in .phone .p-todo li.t3{animation-delay:2.7s}
  @keyframes todoDone{to{color:var(--steel)}}

  .phone .p-video{margin-top:9px; aspect-ratio:16/9; border-radius:9px; background:linear-gradient(135deg,#16223A,#0D1628); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden}
  .phone .p-video::after{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 70%, rgba(194,152,90,.28), transparent 62%)}
  .phone .p-play{width:26px; height:26px; border-radius:50%; background:var(--gold); position:relative; z-index:2}
  .phone .p-play::after{content:''; position:absolute; left:10px; top:7px; border-left:8px solid var(--navy-deep); border-top:6px solid transparent; border-bottom:6px solid transparent}
  .phone .p-dur{position:absolute; right:7px; bottom:6px; z-index:2; font-size:7.5px; letter-spacing:.1em; color:rgba(255,255,255,.8); background:rgba(7,12,26,.6); padding:2px 5px; border-radius:3px}

  .phone .p-gap{display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; border-bottom:1px solid rgba(20,24,42,.07); font-size:10.5px; color:var(--ink-soft)}
  .phone .p-gap:last-of-type{border-bottom:0}
  .phone .p-gap b{font-family:var(--num); font-size:15px; font-weight:400; color:var(--ink)}

  .phone .p-tabs{flex-shrink:0; display:flex; justify-content:space-around; border-top:1px solid rgba(20,24,42,.09); padding:9px 0 11px; font-size:6.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); background:var(--paper-card); z-index:3}
  .phone .p-tabs b{color:var(--gold-deep); font-weight:500}
  .mock-cap{margin-top:18px; text-align:center; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5)}

  /* ---------- TWO ROOMS (split screen) ---------- */
  .rooms{display:flex; min-height:92vh}
  .room{position:relative; flex:1; overflow:hidden; display:flex; align-items:flex-end; color:#fff; transition:flex .9s var(--ease)}
  .room:hover{flex:1.45}
  .room .ph{position:absolute; inset:0}
  .room .ph img{width:100%; height:100%; object-fit:cover; transition:1.2s var(--ease); transform:scale(1.04)}
  .room:hover .ph img{transform:scale(1)}
  .room::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(7,12,26,.9) 0%, rgba(7,12,26,.25) 45%, rgba(7,12,26,.15) 100%); z-index:1}
  .room .rc{position:relative; z-index:2; padding:30px clamp(20px,3vw,44px) 40px; width:100%}
  .room .mono{color:var(--gold-light); margin-bottom:12px; display:block}
  .room h3{font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,3.4vw,3.2rem); color:#fff; margin-bottom:10px}
  .room p{color:rgba(255,255,255,.75); font-size:.94rem; max-width:40ch; margin-bottom:18px}
  .room .go{font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light); display:inline-flex; align-items:center; gap:8px}
  .room:hover .go .arr{transform:translate(3px,-3px)}
  @media(max-width:880px){
    .rooms{flex-direction:column; min-height:0}
    .room{min-height:64vh}
    .room:hover{flex:1}
  }

  /* ---------- CLUB TEASE ---------- */
  .club .club-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(16px,2vw,26px); margin-top:56px}
  .club figure{position:relative; overflow:hidden; border-radius:2px}
  .club figure img{width:100%; height:100%; object-fit:cover; transition:1.4s var(--ease)}
  .club figure:hover img{transform:scale(1.05)}
  .club .tall{grid-row:span 2}
  .club .stack{display:grid; gap:clamp(16px,2vw,26px)}
  @media(max-width:860px){.club .club-grid{grid-template-columns:1fr}.club .tall{grid-row:auto}}
  .cap{position:absolute; left:0; bottom:0; padding:16px 18px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; z-index:2; background:linear-gradient(0deg, rgba(7,12,26,.8), transparent)}
  .capture{margin-top:64px; border:1px solid rgba(194,152,90,.35); border-radius:2px; padding:clamp(28px,4vw,48px); display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,60px); align-items:center; background:rgba(255,255,255,.02)}
  @media(max-width:860px){.capture{grid-template-columns:1fr}}
  .capture h3{color:#fff; font-size:clamp(1.5rem,2.6vw,2.2rem)}
  .capture p{color:rgba(255,255,255,.65); font-weight:300; font-size:.94rem; margin-top:10px}
  .cap-form{display:flex; gap:10px}
  .cap-form input{flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.2); border-radius:2px; padding:14px 16px; color:#fff; font:inherit; font-size:.9rem}
  .cap-form input::placeholder{color:rgba(255,255,255,.4)}
  .cap-form input:focus{outline:none; border-color:var(--gold)}
  @media(max-width:560px){.cap-form{flex-direction:column}}
  /* the opening list: name, email, what they are interested in */
  .cap-form-full{flex-direction:column; align-items:stretch; gap:14px}
  .cap-row{display:flex; gap:10px}
  .cap-row input[type=text]{flex:0 1 38%}
  @media(max-width:560px){.cap-row{flex-direction:column}.cap-row input[type=text]{flex:1}}
  .cap-interest{border:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
  .cap-interest legend{float:left; margin-right:6px; font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6)}
  .cap-interest label{cursor:pointer}
  .cap-interest input{position:absolute; opacity:0; pointer-events:none}
  .cap-interest span{display:inline-block; padding:7px 14px; border:1px solid rgba(255,255,255,.25); border-radius:999px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75); transition:.3s var(--ease)}
  .cap-interest input:checked + span{background:var(--gold); border-color:var(--gold); color:var(--navy-deep); font-weight:600}
  .cap-interest input:focus-visible + span{outline:2px solid var(--gold-light); outline-offset:2px}
  .cap-form-full .btn{align-self:flex-start}
  .cap-consent{font-size:.72rem; color:rgba(255,255,255,.5); line-height:1.5}
  .cap-consent a{color:var(--gold-light); border-bottom:1px solid rgba(217,184,118,.4)}
  .cap-msg{font-size:.86rem; color:var(--gold-light); min-height:1.2em}
  .cap-msg.err{color:#f2a08a}
  .cap-done{font-family:var(--serif); font-size:1.4rem; line-height:1.35; color:#fff}

  /* ---------- FAQ ---------- */
  .faq-list{max-width:820px; margin-top:50px}
  /* The FAQ column is narrow, so on a wide screen the section otherwise sits
     hard left with a dead half-page beside it. Centre the column, keep the
     text itself left aligned. */
  .expect-inner{max-width:900px; margin-inline:auto}
  details{border-top:1px solid rgba(20,24,42,.14)}
  details:last-child{border-bottom:1px solid rgba(20,24,42,.14)}
  summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 4px; font-family:var(--serif); font-size:clamp(1.15rem,1.8vw,1.45rem); transition:.3s}
  summary::-webkit-details-marker{display:none}
  summary .plus{font-family:var(--num); font-style:italic; color:var(--gold-deep); font-size:1.3rem; transition:.4s var(--ease)}
  details[open] summary .plus{transform:rotate(45deg)}
  details .a{padding:0 4px 26px; color:var(--ink-soft); font-weight:300; font-size:.95rem; max-width:64ch}

  /* ---------- VISIT ---------- */
  .reserve .r-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,7vw,100px); align-items:start}
  @media(max-width:860px){.reserve .r-grid{grid-template-columns:1fr; gap:44px}}
  .reserve .lede{margin-top:18px}
  .r-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
  .info-list{list-style:none; display:grid; gap:24px}
  .info-list li{border-top:1px solid rgba(255,255,255,.14); padding-top:15px}
  .info-list .k{font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-light); margin-bottom:6px}
  .info-list .v{font-family:var(--serif); font-size:1.35rem; color:#fff}
  .info-list .v a:hover{color:var(--gold-light)}
  .info-list .v-name{display:block; font-style:italic; color:var(--gold-light)}
  .note-sm{font-size:.8rem; color:rgba(255,255,255,.5); margin-top:20px; font-weight:300; max-width:48ch}

  /* ---------- FOOTER ---------- */
  footer{background:var(--navy-deep); color:rgba(255,255,255,.6); padding:64px var(--edge) 38px}
  .foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; padding-bottom:42px; border-bottom:1px solid rgba(255,255,255,.1)}
  .foot-brand img{width:170px}
  .foot-tag{margin-top:16px; font-family:var(--serif); font-size:1.08rem; line-height:1.4; color:rgba(255,255,255,.72); max-width:34ch}
  .foot-col a{line-height:1.5}
  .foot-nav{display:flex; gap:46px; flex-wrap:wrap}
  .foot-col h4{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-light); margin-bottom:15px; font-weight:500}
  .foot-col a{display:block; font-size:.88rem; color:rgba(255,255,255,.62); margin-bottom:9px; transition:.3s}
  .foot-col a:hover{color:#fff}
  .foot-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:24px; font-size:.76rem}

  /* ---------- PRIVACY + TERMS ---------- */
  body.legal-body{background:var(--paper)}
  .legal-hero{background:var(--navy-deep); color:#fff; padding:clamp(140px,18vh,200px) var(--edge) clamp(56px,8vh,90px)}
  .legal-hero .back-home{display:flex; width:max-content; align-items:center; gap:10px; font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light); margin-bottom:34px}
  .legal-hero .back-home:hover{color:var(--gold)}
  .legal-hero h1{margin-top:18px; font-size:clamp(2.6rem,6vw,4.6rem); color:#fff}
  .legal-meta{margin-top:18px; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55)}
  .legal{display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(30px,6vw,90px); padding:clamp(56px,8vh,100px) var(--edge) clamp(80px,12vh,140px); max-width:1180px; margin:0 auto}
  .legal-toc{position:sticky; top:100px; align-self:start; display:flex; flex-direction:column; align-items:stretch; gap:2px; border-left:1px solid rgba(20,24,42,.14)}
  .legal-toc a{padding:6px 0 6px 16px; margin-left:-1px; border-left:1px solid transparent; font-size:.8rem; color:var(--ink-soft); transition:.3s var(--ease)}
  .legal-toc a:hover{color:var(--gold-deep); border-left-color:var(--gold)}
  .legal-body-text{max-width:68ch}
  .legal-body-text h2{font-size:clamp(1.6rem,2.6vw,2.1rem); margin:52px 0 14px; scroll-margin-top:100px}
  .legal-body-text h2:first-child{margin-top:0}
  .legal-body-text p, .legal-body-text li{font-size:.98rem; color:var(--ink-soft); font-weight:300; line-height:1.75}
  .legal-body-text p + p, .legal-body-text ul + p{margin-top:14px}
  .legal-body-text ul + p{margin-top:18px}
  .legal-body-text strong{font-weight:500; color:var(--ink)}
  .legal-body-text ul{margin:12px 0 0; padding-left:20px; display:grid; gap:8px}
  .legal-body-text li::marker{color:var(--gold)}
  .legal-body-text a{color:var(--gold-deep); border-bottom:1px solid rgba(126,96,49,.35)}
  .legal-body-text a:hover{color:var(--gold)}
  .legal-lede{font-family:var(--serif); font-size:clamp(1.25rem,2vw,1.5rem)!important; line-height:1.45!important; color:var(--ink)!important; font-weight:400!important; margin-bottom:8px}
  .legal-see{margin-top:30px!important; padding-top:20px; border-top:1px solid rgba(20,24,42,.12)}
  @media(max-width:860px){
    .legal{grid-template-columns:1fr}
    .legal-toc{position:static; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 14px; border-left:0; border-bottom:1px solid rgba(20,24,42,.12); padding-bottom:18px}
    .legal-toc a{padding:2px 0; border-left:0; font-size:.76rem}
  }

  /* modal */
  .modal-back{position:fixed; inset:0; background:rgba(7,12,26,.7); backdrop-filter:blur(6px); z-index:200; display:none; align-items:center; justify-content:center; padding:20px}
  .modal-back.open{display:flex}
  .modal{background:var(--paper); border-radius:3px; max-width:480px; width:100%; padding:clamp(28px,4vw,44px); position:relative; border-top:2px solid var(--gold)}
  .modal h3{font-size:1.7rem; margin-bottom:12px}
  .modal p{font-size:.92rem; color:var(--ink-soft); font-weight:300; margin-bottom:10px}
  .modal .x{position:absolute; top:14px; right:18px; font-size:1.4rem; color:var(--steel); line-height:1; z-index:3}
  .modal .m-actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}

  /* Booking modal. Mindbody's embeddable widget stops dead at the service list
     on this plan, so the modal does the choosing on-brand and hands off to
     Mindbody's booking flow, which handles account creation, times and payment. */
  .modal.booking{max-width:640px; padding:0; display:flex; flex-direction:column; max-height:min(90vh,860px); overflow:hidden}
  .book-head{padding:30px clamp(22px,3vw,36px) 20px; flex-shrink:0}
  .book-head h3{margin-bottom:8px}
  .book-head p{margin:0; font-size:.9rem}
  .book-body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px clamp(22px,3vw,36px) 8px}
  .book-opt{display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; text-align:left; padding:18px 20px; margin-bottom:12px; border:1px solid rgba(20,24,42,.16); border-radius:2px; background:#fff; transition:.35s var(--ease)}
  .book-opt:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:0 10px 30px rgba(13,22,40,.09)}
  .book-opt .bo-name{display:block; font-family:var(--serif); font-size:1.32rem; line-height:1.15}
  .book-opt .bo-meta{display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); margin-top:5px}
  .book-opt .bo-go{font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); white-space:nowrap; display:inline-flex; align-items:center; gap:7px}
  .book-opt:hover .bo-go .arr{transform:translate(3px,-3px)}
  .book-note{font-size:.8rem; color:var(--ink-soft); font-weight:300; margin:6px 0 4px}
  .book-foot{padding:16px clamp(22px,3vw,36px) 22px; border-top:1px solid rgba(20,24,42,.1); display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; flex-shrink:0}
  .book-foot span, .book-foot a{font-size:.76rem; color:var(--ink-soft)}
  .book-foot a{color:var(--gold-deep); border-bottom:1px solid rgba(142,108,57,.4)}
  .book-foot a:hover{color:var(--gold)}
  body.modal-open{overflow:hidden}
  @media(max-width:600px){
    .modal.booking{max-height:94vh}
    .book-opt{padding:16px}
    .book-opt .bo-go{display:none}
  }
  .btn-line{background:transparent; border:1px solid var(--ink); color:var(--ink)}
  .btn-line:hover{background:var(--ink); color:var(--paper)}

  .reveal{opacity:0; transform:translateY(28px); transition:opacity 1.15s var(--ease), transform 1.15s var(--ease)}
  /* Photographs unveil rather than slide: the frame opens from a letterboxed
     crop while the image itself settles from a slight zoom. The two motions
     run at different speeds on purpose; matched durations read as one cheap
     effect, offset ones read as depth. */
  figure.reveal, .unveil.reveal{clip-path:inset(10% 0 10% 0); transition:opacity 1.15s var(--ease), transform 1.15s var(--ease), clip-path 1.4s var(--ease)}
  /* scale, not transform: hover zooms elsewhere use transform, and the two
     compose instead of fighting over one property */
  figure.reveal img, .unveil.reveal img{scale:1.07; transition:scale 1.9s var(--ease), transform 1.4s var(--ease), filter .62s var(--ease)}
  figure.reveal.in, .unveil.reveal.in{clip-path:inset(0 0 0 0)}
  figure.reveal.in img, .unveil.reveal.in img{scale:1}
  .reveal.in{opacity:1; transform:none}

  @media(max-width:940px){
    .nav-links, nav>.btn{display:none}
    .menu-toggle{display:flex}
    nav.open .nav-links{display:flex; position:fixed; inset:0; background:var(--navy-deep); flex-direction:column; align-items:center; justify-content:center; gap:30px; z-index:90}
    nav.open .nav-links a{color:#fff; font-size:1.05rem}
    .scroll-cue{display:none}
    .tabbar-shell{top:56px}
    .panel-grid{grid-template-columns:1fr}
    .visual{aspect-ratio:16/10}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important; transition:none!important}
    .rise,.reveal{opacity:1; transform:none}
    .tpanel .bio{max-height:none; opacity:1}
  }