/* ================= v6 — research-led hero, WebGL, micro-interactions ================= */

/* ---------- FIX: flipped gold letters render solid (no ghost glyphs) ---------- */
.wi:has(.ch){background:none!important;-webkit-text-fill-color:currentColor!important;padding:0!important;margin:0!important}
.gold .ch,.gold-split .ch,.gold-split .wi.ch{background:none!important;color:var(--gold-2)!important;-webkit-text-fill-color:currentColor!important}
.dark .gold .ch,.service .gold .ch{color:var(--gold)!important}
.gold-split{-webkit-text-fill-color:currentColor!important}

/* ---------- HERO (all pages) ---------- */
.hero5{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:110px 0 0;overflow:hidden;background:var(--black)}
.gl-bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;background:radial-gradient(ellipse at 70% 30%,#eccdb0,transparent 60%),radial-gradient(ellipse at 20% 80%,#f1dcc7,transparent 55%),var(--black)}
.hero5 > .container{position:relative;z-index:2;flex:1;display:flex;align-items:center}
.h5-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;width:100%}
.hero5 h1{font-size:clamp(46px,min(5.3vw,9.6vh),96px);line-height:1;font-weight:500;letter-spacing:-.015em;margin:20px 0 0}
.hero5 .lead{margin:24px 0 0;color:#5d5149;max-width:560px}
.hero5 .hero-ctas{margin-top:34px}
.h5-trust{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:30px;font-size:13px;color:var(--muted);letter-spacing:.04em}
.h5-trust .stars{color:var(--gold-2);letter-spacing:3px}
.h5-trust .dot{width:4px;height:4px;border-radius:50%;background:var(--gold-2)}
.h5-media{position:relative;height:min(74vh,660px);display:flex;justify-content:center;align-items:center}
.h5-frame{position:relative;height:100%;aspect-ratio:9/15;border-radius:32px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(90,55,30,.6);transform-style:preserve-3d}
.h5-frame video,.h5-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.h5-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.h5-card{position:absolute;left:-12%;bottom:11%;z-index:3;display:flex;align-items:center;gap:14px;background:rgba(255,250,244,.94);backdrop-filter:blur(10px);border-radius:20px;padding:12px 18px 12px 12px;box-shadow:var(--shadow)}
.h5-ba{width:118px;height:76px;border-radius:12px;overflow:hidden;position:relative}
.h5-ba img{width:100%;height:100%;object-fit:cover}
.h5-ba::after{content:"BEFORE · AFTER";position:absolute;left:6px;bottom:5px;font-size:8px;letter-spacing:.14em;color:#fff;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:6px}
.h5-card b{display:block;font-family:var(--serif);font-size:24px;font-weight:500;line-height:1.1}
.h5-card span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.h5-stat{position:absolute;right:-6%;top:10%;z-index:3;background:rgba(255,250,244,.94);backdrop-filter:blur(10px);border-radius:20px;padding:14px 20px;box-shadow:var(--shadow);text-align:center}
.h5-stat strong{display:block;font-family:var(--serif);font-weight:500;font-size:40px;line-height:1;color:var(--gold-2)}
.h5-stat span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.h5-badge{position:absolute;right:-4%;bottom:-3%;z-index:4;width:126px;height:126px;border-radius:50%;background:#1d1714;color:#f5ede4;display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.h5-badge svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite}
.h5-badge text{font-family:var(--sans);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;fill:#e3bf98}
.h5-badge .arr{width:30px;height:30px;stroke:#f5ede4;fill:none;stroke-width:1.5;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.h5-badge:hover{transform:scale(1.08)}
.h5-badge:hover .arr{transform:rotate(-45deg)}
.h5-marquee{position:relative;z-index:2;margin-top:44px;border-top:1px solid var(--line);background:rgba(255,250,244,.55);backdrop-filter:blur(6px);overflow:hidden;padding:18px 0}
.h5-track{display:flex;gap:46px;width:max-content;animation:marq 40s linear infinite;font-family:var(--display);font-size:15px;letter-spacing:.3em;color:var(--ivory)}
.h5-track span::after{content:"✦";margin-left:46px;color:var(--gold-2)}

/* ---------- page transition gold layer ---------- */
.pt-gold{position:fixed;inset:0;z-index:199;background:linear-gradient(120deg,#c99868,#93603a 60%,#7a4d2d);pointer-events:none;display:none}

/* ---------- SVG swash under gold headline words ---------- */
.gold-split{position:relative}
.has-swash{display:inline-block}
.swash{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.32em;overflow:visible;pointer-events:none}
.swash path{fill:none;stroke:var(--gold-2);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dark .swash path,.hz .swash path{stroke:var(--gold)}

/* ---------- scroll progress ring / back to top ---------- */
.top-ring{position:fixed;right:26px;bottom:26px;z-index:60;width:58px;height:58px;border-radius:50%;background:rgba(255,250,244,.9);backdrop-filter:blur(8px);box-shadow:var(--shadow);border:0;cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(20px) scale(.8);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.top-ring.on{opacity:1;transform:none}
.top-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.top-ring circle{fill:none;stroke-width:2.5}
.top-ring .bg{stroke:rgba(122,84,52,.15)}
.top-ring .fg{stroke:#93603a;stroke-dasharray:157;stroke-dashoffset:157;stroke-linecap:round}
.top-ring i{width:16px;height:16px;display:block;border-left:1.6px solid #1d1714;border-top:1.6px solid #1d1714;transform:translateY(3px) rotate(45deg);transition:transform .4s}
.top-ring:hover i{transform:translateY(-1px) rotate(45deg)}

/* ---------- glare hover ---------- */
.glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:5;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 45%)}
.has-glare:hover .glare{opacity:1}
.has-glare{position:relative}

/* ---------- nav text roll ---------- */
.roll{display:inline-flex;flex-direction:column;overflow:hidden;height:1.25em;line-height:1.25em;vertical-align:top}
.roll span{display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
a:hover > .roll span{transform:translateY(-100%)}

/* ---------- text fill sweep ---------- */
.fill-wrap{padding:110px 0 40px;text-align:center;overflow:hidden}
.fill-text{font-family:var(--serif);font-weight:500;font-size:clamp(54px,9vw,150px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(122,84,52,.4);background:linear-gradient(90deg,#93603a,#c99868) no-repeat;background-size:0% 100%;-webkit-background-clip:text;background-clip:text}

/* ---------- Flip gallery (results) ---------- */
.flip-filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.flip-filters button{background:var(--panel);border:1px solid var(--line);color:var(--ivory);padding:12px 22px;border-radius:999px;font:inherit;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .35s,color .35s,transform .35s}
.flip-filters button:hover{transform:translateY(-2px)}
.flip-filters button.on{background:#1d1714;color:#fff;border-color:transparent}
.flip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.flip-grid .story-card .ba-slide,.flip-grid .story-card .single-photo{max-height:58vh}

/* ---------- reels: posters, play on hover ---------- */
.reel .play{transition:transform .4s,opacity .4s}
.reel.playing .play{transform:scale(0);opacity:0}
.marquee-reels .reel video{background:#111}

/* ---------- FIX: coaching stacking cards stay sticky (glare made them relative) ---------- */
.stack-card,.stack-card.has-glare{position:sticky}

/* ---------- FIX: "1 missed workout" no longer written twice ---------- */
.hz-after small{display:none!important}

/* ---------- WHY EUPHORIA ---------- */
.why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.why-media{position:sticky;top:110px;height:min(78vh,640px);display:flex;justify-content:center}
.why-frame{height:100%;aspect-ratio:9/15;border-radius:32px;overflow:hidden;box-shadow:var(--shadow)}
.why-frame video{width:100%;height:100%;object-fit:cover}
.why-chip{position:absolute;left:4%;bottom:8%;background:rgba(255,250,244,.94);backdrop-filter:blur(8px);border-radius:18px;padding:14px 18px;box-shadow:var(--shadow)}
.why-chip b{display:block;font-family:var(--serif);font-weight:500;font-size:22px}
.why-chip span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.why-copy h2{margin:16px 0 18px}
.why-copy .lead{color:var(--muted)}
.why-list{display:grid;gap:18px;margin-top:40px}
.why-item{display:flex;gap:22px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px 26px;box-shadow:var(--shadow);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.why-item:hover{transform:translateX(10px)}
.why-item svg{flex:none;width:52px;height:52px;fill:none;stroke:var(--gold-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.why-item h3{font-size:28px;margin-bottom:6px}
.why-item p{color:var(--muted);font-size:15.5px}

/* ---------- RESULTS VIEWER ---------- */
.rv-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-top:56px}
.rv-stage{position:relative;display:flex;justify-content:center}
.rv-stage .ba-slide{width:min(100%,460px);aspect-ratio:3/4;max-height:70vh;border-radius:26px;box-shadow:var(--shadow)}
.rv-hint{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.rv-tag{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2)}
.rv-name{font-size:clamp(44px,4.6vw,72px);margin:10px 0 18px}
.rv-quote{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,28px);line-height:1.4;color:var(--ivory);min-height:4.2em}
.rv-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:30px}
.rv-thumbs button{position:relative;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:1;background:#ddd;transition:border-color .3s,transform .4s cubic-bezier(.2,.8,.2,1);opacity:.6}
.rv-thumbs button img{width:100%;height:100%;object-fit:cover}
.rv-thumbs button:hover{transform:translateY(-4px);opacity:1}
.rv-thumbs button.on{border-color:var(--gold-2);opacity:1}
.rv-bar{height:2px;background:var(--line);margin-top:18px;border-radius:2px;overflow:hidden}
.rv-bar i{display:block;height:100%;background:var(--gold-grad);transform-origin:left;transform:scaleX(0)}

/* ---------- REELS: fixed row, autoplay, controls ---------- */
.reels.reels-row{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:row;grid-auto-columns:auto;scroll-snap-type:none;gap:16px;margin-top:50px;overflow:visible;animation:none;width:auto;padding:0}
.reels-row .reel{aspect-ratio:9/16;width:auto!important;cursor:default}
.reels-row .reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reels-row .reel video.crop-top{transform:scale(1.17);transform-origin:50% 100%}
.reels-row .reel:hover{transform:translateY(-6px)}
.reel-ui{position:absolute;top:12px;right:12px;z-index:3;display:flex;gap:8px}
.reel-ui button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,9,8,.55);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .3s,background .3s}
.reel-ui button:hover{transform:scale(1.1);background:rgba(201,152,104,.85)}
.reel-ui svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round}

/* ---------- FORM: fits the screen, side copy stays put ---------- */
.cta-grid > div:first-child{position:sticky;top:110px;align-self:start}
.opt-card{aspect-ratio:3/3.5;max-height:42vh}
.ap{padding:36px 40px}
.ap-step h3{font-size:clamp(28px,2.6vw,38px)}

/* ================= FOOTER with animated logo ================= */
.ft{position:relative;overflow:hidden;padding:64px 0 0;background:#1a1411!important;color:#f5ede4}
.ft-glow{position:absolute;left:50%;bottom:-30vw;width:110vw;height:60vw;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(201,152,104,.28),transparent 62%);pointer-events:none}
.ft .container{position:relative;z-index:2}
.ft-cta{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid rgba(233,201,168,.16)}
.ft-title{font-size:clamp(32px,3.4vw,52px);margin-top:10px;line-height:1.05}
.ft-cta-btns{display:flex;gap:14px;flex-wrap:wrap}
.ft-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding:36px 0 0}
.ft-about p{color:#b9ada2;font-size:14.5px;max-width:340px}
.ft h4{font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#e3bf98;font-weight:500;margin-bottom:14px}
.ft ul{list-style:none;display:grid;gap:8px}
.ft ul a{color:#cfc3b7;font-size:14px}
.ft ul a:hover{color:#fff}
.ft .socials{margin-top:18px}
.ft .socials a{border-color:rgba(233,201,168,.25)}
.ft .socials svg{stroke:#e3bf98}

/* the logo (single SVG so it always keeps its proportions) */
.ft-logo{position:relative;display:block;margin:30px auto 0;width:min(700px,88vw);z-index:2;color:inherit}
.ft-svg{display:block;width:100%;height:auto;overflow:visible}
.ft-svg .ft-word{font-family:var(--display);font-size:128px;font-weight:400}
.ft-svg .ft-script{font-family:var(--script);font-size:66px;fill:#ecc9a6}
.ft-svg .ft-ln{stroke:#e3bf98;stroke-width:1.2;opacity:.8}
.ft-svg .ft-sw{fill:none;stroke:url(#ftSw);stroke-width:2.6;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(246,220,192,.55))}
.ft-svg .ft-spark{filter:drop-shadow(0 0 10px rgba(255,236,210,.9))}.ft-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 20px 20px;border-top:1px solid rgba(233,201,168,.14);font-size:13px;color:#a0948a;position:relative;z-index:2}
.ft .btn-ghost{color:#f5ede4!important;border-color:rgba(245,237,228,.35)!important}

@media (max-width:900px){
  .ft{padding-top:56px}
  .ft-cols{grid-template-columns:1fr 1fr;gap:36px}
  .ft-about{grid-column:1/-1}
}
@media (max-width:600px){
  .ft-cols{grid-template-columns:1fr}
  .ft-cta{align-items:flex-start}
  .ft-bottom{padding-bottom:110px}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .why-grid,.rv-grid{grid-template-columns:1fr;gap:50px}
  .why-media{position:relative;top:0;height:min(64vh,520px)}
  .reels.reels-row{grid-template-columns:repeat(3,1fr)}
  .cta-grid > div:first-child{position:static}
}
@media (max-width:640px){
  .reels.reels-row{display:flex;overflow-x:auto;overflow-y:hidden;gap:12px;padding:6px 0 6px}
  .reels-row .reel{flex:none;width:62vw!important}
  .reels-row .reel:hover{transform:none}
  .rv-thumbs{grid-template-columns:repeat(6,1fr);gap:6px}
  .why-item{padding:20px;gap:16px}
  .why-item h3{font-size:24px}
  .opt-card{max-height:none}
}
@media (max-width:1080px){
  .h5-grid{grid-template-columns:1fr;gap:46px}
  .hero5{padding-top:100px}
  .h5-media{height:min(64vh,560px);margin-bottom:10px}
  .h5-card{left:0}
  .h5-stat{right:0}
  .h5-badge{right:4%}
  .flip-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hero5 h1{font-size:clamp(40px,11.5vw,56px)}
  .h5-media{height:min(60vh,480px)}
  .h5-card{bottom:4%;padding:8px 12px 8px 8px}
  .h5-ba{width:84px;height:56px}
  .h5-card b{font-size:19px}
  .h5-stat{top:4%;padding:10px 14px}
  .h5-stat strong{font-size:30px}
  .h5-badge{width:96px;height:96px;bottom:-2%}
  .top-ring{display:none}
  .flip-grid{grid-template-columns:1fr}
  .h5-trust{font-size:12px}
}