/* Maasive Mixes — site styles
   Single dark visual world by design (the brand mark is white-on-black). Tokens first, components after.
   Shape system: all-sharp, radius 0 everywhere. One accent hue (brand red), a deeper shade for button fills. */

@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/big-shoulders-display-var.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/archivo-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --ink:#0a0a0b;
  --ink-2:#111113;
  --ink-3:#18181b;
  --line:#2a2a2f;
  --line-soft:#1e1e22;
  --bone:#ecebe6;
  --bone-2:#c9c7c1;
  --mute:#8d8a86;
  --red:#ed4350;
  --red-btn:#d8323f;
  --red-btn-hover:#c62f3b;
  --red-ink:#26100f;
  --display:"Big Shoulders Display","Arial Narrow","Helvetica Neue",Impact,sans-serif;
  --body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --container:1200px;
  --gutter:clamp(16px,4.5vw,44px);
  --aside-col:260px;
  --header-h:72px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:#fff}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:#fff}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:inherit;line-height:inherit}
ul,ol{margin:0;padding:0;list-style:none}
strong{font-weight:600;color:#fff}
em{font-style:italic}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:.005em;text-wrap:balance}
.h1{font-size:clamp(56px,8.6vw,124px);font-weight:900;line-height:.88;letter-spacing:-.005em}
.h2{font-size:clamp(40px,5.4vw,72px)}
.h3{font-family:var(--body);font-weight:600;font-size:clamp(19px,1.5vw,21px);line-height:1.3;letter-spacing:-.01em;color:#fff}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--bone-2);max-width:60ch;text-wrap:pretty}
.prose{max-width:64ch;color:var(--bone-2);text-wrap:pretty}
.prose p + p{margin-top:1em}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500}
.num{font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;padding-block:24px;display:flex;align-items:center;background:rgba(10,10,11,.84);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid transparent;transition:border-color .25s,padding .35s var(--ease)}
.site-header.is-stuck{padding-block:13px}
.site-header::before{content:"";position:absolute;left:50%;top:-40%;width:min(720px,80vw);height:180%;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(237,67,80,.16),rgba(237,67,80,.05) 55%,transparent 75%);opacity:1;transition:opacity .35s}
.site-header.is-stuck::before{opacity:.35}
.site-header{overflow:hidden}
.site-header .container{position:relative}
.site-header.is-stuck{border-bottom-color:var(--line-soft)}
.site-header .container{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
.brand{grid-column:2;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.brand-svg{height:clamp(56px,4.6vw,92px);width:auto;display:block;transition:height .35s var(--ease)}
.site-header.is-stuck .brand-svg{height:40px}
.brand-svg .s0{filter:drop-shadow(0 0 6px rgba(237,67,80,.75)) drop-shadow(0 0 18px rgba(237,67,80,.35))}
.brand:hover .brand-svg .s0{filter:drop-shadow(0 0 8px rgba(237,67,80,1)) drop-shadow(0 0 26px rgba(237,67,80,.5))}
.brand-svg .s0{transition:filter .3s}
/* the header CTA only exists once the hero's own button has scrolled away */
.header-cta{grid-column:3;justify-self:end;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.site-header.show-cta .header-cta{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.header-cta{transition:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:stretch;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:22px;line-height:1;text-decoration:none;color:#fff;background:var(--red-btn);border:1px solid var(--red-btn);transition:background .18s,border-color .18s,transform .18s;white-space:nowrap}
.btn:hover{background:var(--red-btn-hover);border-color:var(--red-btn-hover);color:#fff}
.btn:active{transform:translateY(1px)}
.btn .btn-label{display:inline-flex;align-items:center;padding:17px 24px 15px}
.btn .btn-price{display:inline-flex;align-items:center;gap:8px;padding:0 20px;border-left:1px solid rgba(255,255,255,.28);font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.02em}
.btn .btn-price s{font-size:.68em;opacity:.72;text-decoration-thickness:2px}
.btn-sm{font-size:19px}
.btn-sm .btn-label{padding:13px 18px 11px}
.btn-sm .btn-price{font-size:19px;padding:0 16px}
.btn-block{width:100%;justify-content:center}
.btn-block .btn-label{flex:1;justify-content:center}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,6vw,88px) 0;position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(1100px 700px at 8% 0%,rgba(237,67,80,.13),transparent 60%),
  radial-gradient(900px 600px at 100% 45%,rgba(255,255,255,.035),transparent 60%)}
.hero-knob{position:absolute;z-index:-1;right:-6vw;top:-4vw;width:clamp(360px,44vw,760px);height:auto;color:#fff;opacity:.05;fill:currentColor;pointer-events:none;transform-origin:50% 50%;animation:turn 140s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero-knob{animation:none}}
@media (max-width:700px){.hero-knob{right:-30vw;top:34vh;width:110vw;opacity:.04}}
.hero .container{position:relative}
.hero .eyebrow{margin-bottom:clamp(18px,2.6vw,30px)}
.hero .h1{max-width:18ch}
.hero .lead{margin-top:clamp(20px,3vw,32px)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px}
.hero-secondary{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px}
.hero-secondary:hover{color:#fff;border-bottom-color:var(--bone)}

/* ---------- motion ----------
   One language: things rise out of the page. Hero on load, the rest on scroll. JS opts in (no-JS is static),
   reduced-motion turns it all off, and every element rests in its visible state. */
.js .hero [data-in]{animation:rise .8s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}
.js .hero .h1[data-in]{animation:mask-rise 1s var(--ease) both;animation-delay:90ms}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mask-rise{from{opacity:0;transform:translateY(34px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 -12% 0)}}
.reveal-init [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.reveal-init [data-reveal="stamp"]{transform:scale(1.12);transition-duration:.55s}
.reveal-init [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .hero [data-in],.js .hero .h1[data-in]{animation:none}
  .reveal-init [data-reveal]{opacity:1;transform:none;transition:none}
}

/* video */
.video{margin-top:clamp(36px,5vw,64px)}
.video-frame{position:relative;aspect-ratio:16/9;background:var(--ink-2);border:1px solid var(--line);overflow:hidden}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s var(--ease)}
.video-frame iframe.in{opacity:1}
.video-poster{transition:opacity .45s var(--ease)}
.video-poster.out{opacity:0;pointer-events:none}
.video-poster{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;text-align:left}
.video-poster img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.video-poster:hover img{transform:scale(1.015)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(72px,8vw,96px);height:clamp(72px,8vw,96px);background:var(--red-btn);display:grid;place-items:center;z-index:2;transition:transform .2s,background .2s;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.play svg{width:40%;height:40%;margin-left:6%;fill:#fff}
.video-poster:hover .play{transform:translate(-50%,-50%) scale(1.05);background:var(--red-btn-hover)}
.video-caption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* ---------- logo marquee ---------- */
.logos{padding-block:clamp(28px,4vw,44px);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-top:clamp(48px,7vw,88px)}
.logos .eyebrow{margin-bottom:22px}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;gap:clamp(48px,6vw,84px);align-items:center;animation:marquee 70s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{height:clamp(30px,3.4vw,44px);width:auto;opacity:.78;transition:opacity .2s}
.marquee-track img:hover{opacity:1}
.marquee-track img.tall{height:clamp(42px,4.6vw,58px)}
.marquee-track img.short{height:clamp(22px,2.4vw,30px)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{mask-image:none;-webkit-mask-image:none}
  .marquee-track{animation:none;width:auto;flex-wrap:wrap;gap:28px 40px;justify-content:center}
  .marquee-track .dup{display:none}
}

/* ---------- sections ---------- */
.section{padding-block:clamp(64px,9vw,120px)}
.section + .section{border-top:1px solid var(--line-soft)}
.section > .container > .h2{margin-bottom:clamp(32px,4.5vw,64px)}
.section > .container > .lead{margin-bottom:clamp(28px,4vw,48px)}
/* two-column sections: the left column carries a fact (a person, a number, a spec), never a label */
.section-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,32px)}
@media (min-width:960px){.section-grid{grid-template-columns:var(--aside-col) minmax(0,1fr)}}
.aside{align-self:start}
@media (min-width:960px){.aside{position:sticky;top:calc(var(--header-h) + 28px)}}
.section-body > .h2{margin-bottom:clamp(20px,3vw,32px)}
.section-body > .lead{margin-bottom:clamp(28px,4vw,48px)}

/* ---------- about ---------- */
.person img{width:100%;max-width:300px;aspect-ratio:4/5;height:auto;object-fit:cover;border:1px solid var(--line)}
.person .name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:30px;line-height:1;color:#fff;margin-top:16px}
.person .role{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:8px;line-height:1.7;max-width:22ch}
.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,64px)}
@media (min-width:800px){.about-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.stats{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
.stat{padding:18px 0 16px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px}
.stat .v{font-family:var(--display);font-weight:900;font-size:clamp(44px,5vw,64px);line-height:.9;color:#fff;font-variant-numeric:tabular-nums}
.stat .v span{color:var(--red)}
.stat .k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.credits{margin-top:28px}
.credits .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.credits ul{display:flex;flex-wrap:wrap;gap:8px 0}
.credits li{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:20px;line-height:1;color:var(--bone-2)}
.credits li:not(:last-child)::after{content:"/";color:var(--line);margin:0 10px;font-weight:400}

.quote-band{margin-top:clamp(40px,6vw,64px);padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
@media (min-width:700px){.quote-band{grid-template-columns:auto minmax(0,1fr)}}
.quote-band img{width:96px;height:96px;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.quote-band blockquote{margin:0}
.quote-band .q{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,3.4vw,42px);line-height:.98;color:#fff;text-wrap:balance}
.quote-band .q em{color:var(--red);font-style:normal}
.quote-band .who{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:14px;line-height:1.7}
.quote-band .who b{color:var(--bone);font-weight:500}

/* ---------- learn grid ---------- */
.learn-wrap{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media (min-width:960px){.learn-wrap{grid-template-columns:minmax(280px,360px) minmax(0,1fr)}}
.learn-photo{margin:0;max-width:360px}
@media (min-width:960px){.learn-photo{position:sticky;top:calc(var(--header-h) + 28px)}}
.learn-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}
.learn{display:grid;grid-template-columns:1fr;gap:0 clamp(24px,4vw,56px)}
@media (min-width:700px){.learn{grid-template-columns:repeat(2,minmax(0,1fr))}}
.learn li{padding:22px 0 26px;border-top:1px solid var(--line);position:relative}
.learn li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--red);transition:width .45s var(--ease)}
.learn li:hover::before{width:100%}
.learn .h3{margin-bottom:8px}
.learn p{color:var(--mute);font-size:16px;max-width:46ch;text-wrap:pretty}

/* ---------- tracklist ---------- */
.specs{display:grid;gap:14px;border-top:1px solid var(--line);padding-top:18px}
.spec .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.spec .v{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;text-transform:uppercase;margin-top:4px;color:#fff}
.side{margin-top:clamp(28px,4vw,44px)}
.side-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:2px solid var(--bone)}
.side-head .t{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(28px,3.4vw,40px);line-height:1;color:#fff}
.side-head .t span{color:var(--red)}
.side-head .r{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.track{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 18px;padding:18px 0;border-bottom:1px solid var(--line-soft);align-items:start}
@media (min-width:700px){.track{grid-template-columns:72px minmax(0,26ch) minmax(0,1fr);gap:0 28px;padding:20px 0}}
.track .n{font-family:var(--display);font-weight:900;font-size:clamp(34px,3.6vw,44px);line-height:.9;color:var(--bone-2);font-variant-numeric:tabular-nums;transition:color .15s}
.track{position:relative}
.track::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--red);transition:width .45s var(--ease)}
.track:hover::after{width:100%}
.track:hover .n{color:var(--red)}
.track .h3{font-size:19px;transition:transform .3s var(--ease)}
.track:hover .h3{transform:translateX(4px)}
.track p{color:var(--mute);font-size:15.5px;line-height:1.55;text-wrap:pretty;grid-column:2;margin-top:6px}
@media (min-width:700px){.track p{grid-column:3;margin-top:2px}}

/* ---------- extras (bento, 6 cells, two wide) ---------- */
.bento{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media (min-width:760px){.bento{grid-template-columns:repeat(3,minmax(0,1fr))}.bento .wide{grid-column:span 2}}
.cell{background:var(--ink);transition:background .3s;padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;min-height:100%;position:relative;overflow:hidden}
.cell .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:500}
.cell .h3{font-size:20px}
.cell p{color:var(--mute);font-size:15.5px;line-height:1.55;text-wrap:pretty;max-width:52ch}
.cell .big{font-family:var(--display);font-weight:900;font-size:clamp(64px,7vw,104px);line-height:.85;color:#fff;margin:6px 0 4px}
.cell .big span{color:var(--red)}
.cell .big small{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-left:6px;vertical-align:baseline}
.cell.tint{background:var(--red-ink)}
.cell.tint .tag{color:var(--red)}
.cell.tint p{color:var(--bone-2)}
.cell.wide{justify-content:flex-end}
.cell.has-bg .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:.32;pointer-events:none}
.cell.has-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 30%,rgba(10,10,11,.55) 65%,rgba(10,10,11,.25));pointer-events:none}
.cell.has-bg > :not(.bg){position:relative;z-index:1}
.cell.has-bg:hover .bg{opacity:.45}
.cell:hover{background:var(--ink-2)}
.cell.tint:hover{background:#2d1412}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px)}
@media (min-width:700px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.quotes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.quotes figure{margin:0;padding:26px 26px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:100%}
.quotes blockquote{margin:0;font-size:17.5px;line-height:1.5;color:var(--bone);text-wrap:pretty}
.quotes blockquote::before{content:"\201C";display:block;font-family:var(--display);font-weight:900;font-size:48px;line-height:.6;color:var(--red);margin-bottom:10px}
.quotes figcaption{margin-top:0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.quotes figcaption b{color:var(--bone-2);font-weight:500}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:16px;padding:18px 0;font-family:var(--body);font-weight:600;font-size:18px;color:#fff;transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq summary .x{position:relative;width:20px;height:20px;justify-self:end}
.faq summary .x::before,.faq summary .x::after{content:"";position:absolute;left:0;top:9px;width:20px;height:2px;background:currentColor;transition:transform .2s}
.faq summary .x::after{transform:rotate(90deg)}
.faq details[open] summary .x::after{transform:rotate(0)}
.faq .a{padding:0 0 22px;max-width:62ch;color:var(--bone-2)}
.faq details[open] .a{animation:rise .35s var(--ease) both}
@media (prefers-reduced-motion:reduce){.faq details[open] .a{animation:none}}
.faq .a p + p{margin-top:.8em}

/* ---------- guarantee ---------- */
.days{font-family:var(--display);font-weight:900;font-size:clamp(96px,12vw,168px);line-height:.8;color:#fff;letter-spacing:-.01em}
.days small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:14px;font-weight:500}
.guarantee .h2{max-width:19ch}
.guarantee .aside{overflow:hidden}
.days{transform-origin:left center}

/* ---------- offer ---------- */
.offer{padding-block:clamp(64px,9vw,120px);border-top:1px solid var(--line-soft)}
.offer-card{display:grid;grid-template-columns:1fr}
@media (min-width:860px){.offer-card{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.offer-main{padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:22px;border-bottom:1px solid var(--line)}
@media (min-width:860px){.offer-main{border-bottom:0;border-right:1px solid var(--line)}}
.offer-main .name{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,4vw,48px);line-height:.95;color:#fff}
.price{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.price .now{font-family:var(--display);font-weight:900;font-size:clamp(88px,11vw,132px);line-height:.85;color:#fff;letter-spacing:-.01em}
.price .now sup{font-size:.4em;vertical-align:top;top:.25em;position:relative;color:var(--red)}
.price .was{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:flex;flex-direction:column;gap:6px}
.price .was s{color:var(--bone-2);text-decoration-color:var(--red);text-decoration-thickness:3px;font-size:36px;font-family:var(--display);font-weight:800;letter-spacing:.02em;line-height:1}
.offer-meta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2);line-height:1.9}
.offer-fine{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--mute);line-height:1.7;text-transform:uppercase}
.offer-fine a{color:var(--bone-2)}
.offer-list{padding:clamp(24px,4vw,44px)}
.offer-list .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.offer-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line-soft);font-size:16px;color:var(--bone)}
.offer-list li:last-child{border-bottom:1px solid var(--line-soft)}
.offer-list li::before{content:"";width:12px;height:12px;margin-top:7px;background:var(--red);clip-path:polygon(0 45%,35% 80%,100% 15%,100% 35%,35% 100%,0 65%)}
.offer-list li b{color:#fff;font-weight:600}
.offer-list li span{color:var(--mute)}

/* ---------- pointer spotlight on cards (hover devices only) ----------
   Two things follow the cursor: a red light in the 1px border (painted to the border box under the card's
   padding-box fill, revealed by fading the border to transparent) and a soft red wash inside the card
   (a pseudo-element that fades in). The card also lifts 3px. Nothing runs on touch devices. */
.spot{border:1px solid var(--line);background:var(--spot-fill,var(--ink-2)) padding-box;transition:border-color .4s var(--ease),transform .45s var(--ease)}
.spot > *{position:relative;z-index:1}
@media (hover:hover) and (pointer:fine){
  .spot{background:linear-gradient(var(--spot-fill,var(--ink-2)),var(--spot-fill,var(--ink-2))) padding-box,radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(237,67,80,1),rgba(237,67,80,.7) 40%,rgba(255,255,255,.22) 85%) border-box}
  .spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
    background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(237,67,80,.22),rgba(237,67,80,.07) 32%,transparent 62%)}
  .spot:hover{border-color:transparent}
  .spot:hover::before{opacity:1}
  .spot:hover,.reveal-init .spot.in:hover{transform:translateY(-3px)}
  .offer-card.spot:hover,.reveal-init .offer-card.spot.in:hover{transform:none}
  .offer-card.spot::before{background:radial-gradient(720px circle at var(--mx,50%) var(--my,50%),rgba(237,67,80,.14),rgba(237,67,80,.04) 35%,transparent 65%)}
}
.offer-card.spot{--spot-fill:var(--ink-2);border-color:var(--bone-2)}

/* ---------- grain: a fixed, non-interactive film layer so the black reads as paper, not a screen ---------- */
@media (min-width:900px){
  body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.045;mix-blend-mode:screen;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size:220px 220px}
}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:40px 48px;color:var(--mute);font-size:13px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media (min-width:860px){.footer-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.site-footer p{max-width:70ch;text-wrap:pretty}
.site-footer p + p{margin-top:.7em}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.footer-links a{text-decoration:none;color:var(--bone-2)}
.footer-links a:hover{color:#fff;text-decoration:underline}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- legal pages ---------- */
.legal{padding-block:clamp(48px,7vw,96px)}
.legal .h1{font-size:clamp(44px,7vw,96px);max-width:12ch}
.legal .meta{margin:18px 0 40px;color:var(--mute)}
.legal article{max-width:68ch;color:var(--bone-2)}
.legal article h2{font-family:var(--body);font-weight:600;color:#fff;font-size:20px;margin:36px 0 10px}
.legal article p{margin:0 0 1em}
.legal article ul{list-style:disc;padding-left:1.3em;margin:0 0 1em}
.legal article li{margin:.3em 0}
.legal article a{color:var(--bone)}
.back{display:inline-flex;gap:10px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--bone-2);margin-top:40px}
.back:hover{color:#fff}

/* ---------- misc ---------- */
.thanks{padding-block:clamp(56px,8vw,112px)}
.thanks .h1{font-size:clamp(44px,7vw,96px);max-width:14ch}
.thanks .lead{max-width:56ch;margin:20px 0 32px}
.thanks ol{list-style:none;padding:0;margin:0 0 36px;max-width:62ch;counter-reset:s}
.thanks li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:20px 0;border-top:1px solid var(--line);counter-increment:s}
.thanks li:last-child{border-bottom:1px solid var(--line)}
.thanks li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);color:var(--red);font-size:13px;letter-spacing:.12em;padding-top:5px}
.thanks li b{display:block;color:#fff;font-weight:600;font-size:18px;margin-bottom:6px}
.thanks li p{margin:0;color:var(--bone-2)}
.thanks .actions{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.thanks .fine{margin-top:32px;color:var(--mute);font-size:14px;max-width:60ch;line-height:1.6}
.thanks .fine a{color:var(--bone)}
.notfound{min-height:60vh;display:grid;place-items:center;text-align:center;padding-block:80px}
.notfound .h1{font-size:clamp(80px,20vw,240px)}
@media (max-width:560px){
  .btn{font-size:19px}
  .btn .btn-label{padding:14px 16px 12px}
  .btn .btn-price{font-size:19px;padding:0 12px}
  .btn .btn-price s{display:none}
  .btn-sm .btn-label{padding:12px 14px 10px}
  .btn-sm .btn-price{padding:0 12px}
  .site-header .container{display:flex;justify-content:center}
  .site-header.show-cta .container{justify-content:space-between}
  .header-cta{display:none}
  .site-header.show-cta .header-cta{display:block}
  .brand-svg{height:40px}
  .site-header{padding-block:16px}
  .site-header.is-stuck{padding-block:10px}
  .site-header.is-stuck .brand-svg{height:30px}
  :root{--header-h:56px}
}

/* ===================== v2 overrides: image-first, poster-like stacked storytelling ===================== */
.v2 .display.mixed{text-transform:none;letter-spacing:-.01em;font-weight:700;line-height:.96}
.v2 .h2{font-size:clamp(38px,5vw,66px)}
.v2 .section{padding-block:clamp(40px,5vw,64px)}
.v2 .wall{padding-top:clamp(36px,4.5vw,56px);padding-bottom:clamp(36px,4.5vw,56px)}
.v2 .faq2{padding-top:clamp(32px,4vw,44px)}
.v2 .gatefold{padding-top:clamp(36px,4.5vw,64px);padding-bottom:clamp(28px,3vw,44px)}
.v2 .extras2{padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(28px,3.5vw,44px)}
.v2 .section + .section{border-top:0}
.v2 .dossier{padding-bottom:clamp(28px,3vw,40px)}
/* phones: sections sit a hair closer, the metrics strip and the quote too */
@media (max-width:600px){
  .v2 .section{padding-block:34px}
  .v2 .gatefold{padding-top:18px;padding-bottom:28px}
  .v2 .extras2{padding-top:32px;padding-bottom:28px}
  .v2 .faq2{padding-top:32px}
  /* metrics to quote: a little more room; quote to the learn heading: a lot less */
  .v2 .proof{padding-top:26px;padding-bottom:24px}
  .v2 .proof .metrics-row{margin-bottom:72px}
}

/* header floats over the hero image */
.site-header{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;margin-bottom:calc(-1 * (var(--header-h) + 60px))}
/* inner pages (legal, thank-you, 404) have no hero to float over: give the content back the room the header's negative margin took */
.legal,.thanks{padding-top:calc(var(--header-h) + 60px + clamp(28px,5vw,64px))}
.notfound{padding-top:calc(var(--header-h) + 60px + 40px)}
/* gradient lives on a pseudo that runs past the header's bottom edge: Chrome draws a faint seam on a gradient box with a fractional height */
.site-header::after{content:"";position:absolute;left:0;right:0;top:0;bottom:-12px;z-index:-1;background:linear-gradient(180deg,rgba(10,10,11,.82),rgba(10,10,11,0) 88%);transition:opacity .25s}
.site-header.is-stuck::after{opacity:0}
.site-header.is-stuck{background:rgba(10,10,11,.86);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px)}
.site-header::before{opacity:0;transition:opacity .3s}
.site-header.is-stuck::before{opacity:.5}
.brand-svg .s0,.brand:hover .brand-svg .s0{filter:none}

/* ---------- hero: full-bleed studio photo, text bottom-left ---------- */
.hero2{position:relative;min-height:min(92vh,980px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--ink);border:0;aspect-ratio:auto}
.hero2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%;z-index:-2;transform-origin:50% 100%}
.hero2-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(10,10,11,.28) 0%,rgba(10,10,11,0) 26%,rgba(10,10,11,.42) 58%,rgba(10,10,11,.96) 100%),
  linear-gradient(90deg,rgba(10,10,11,.66) 0%,rgba(10,10,11,.22) 40%,rgba(10,10,11,0) 68%)}
@media (max-width:900px){
  .hero2-bg{height:66%;object-position:48% 100%}
  .hero2-shade{background:linear-gradient(180deg,rgba(10,10,11,.3) 0%,rgba(10,10,11,0) 18%,rgba(10,10,11,.55) 44%,var(--ink) 64%)}
}
.hero2-inner{position:relative;padding-block:clamp(120px,16vw,200px) clamp(28px,4vw,48px)}
.hero2 .h1{max-width:20ch;font-size:clamp(56px,8.4vw,132px);font-weight:800;line-height:.86;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero2 .eyebrow{margin-bottom:clamp(16px,2vw,26px);color:var(--bone-2)}
.hero2-row{display:grid;grid-template-columns:1fr;gap:20px 48px;align-items:end;margin-top:clamp(20px,3vw,32px)}
@media (min-width:900px){.hero2-row{grid-template-columns:minmax(0,1fr) auto}}
.hero2 .lead{max-width:44ch;color:var(--bone)}
.hero2 .hero-actions{margin-top:0;gap:14px 28px}
.link-arrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);border-bottom:1px solid var(--bone-2);padding-bottom:5px;transition:color .2s,border-color .2s}
.link-arrow::after{content:" \2192"}
.link-arrow:hover{color:#fff;border-bottom-color:#fff}
.hero2 iframe{z-index:5}
.hero2 .video-poster{position:static;width:auto;height:auto;display:inline;cursor:pointer}
/* scroll-driven slow push-in where supported (anchored at the bottom edge, so it never opens a gap) */
@supports (animation-timeline: scroll()){
  .hero2-bg{animation:drift linear both;animation-timeline:scroll();animation-range:0 120vh}
  @keyframes drift{from{transform:scale(1)}to{transform:scale(1.08)}}
  @media (prefers-reduced-motion:reduce){.hero2-bg{animation:none}}
}

/* ---------- logos strip: centered, bigger ---------- */
.logos2{padding-block:clamp(28px,4vw,44px) clamp(28px,4vw,48px);text-align:center;border-bottom:1px solid var(--line-soft)}
.strip-label{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:28px}
.logos2 .marquee-track img{height:clamp(36px,4.2vw,56px);opacity:.85}
.logos2 .marquee-track img.tall{height:clamp(50px,5.6vw,72px)}
.logos2 .marquee-track img.short{height:clamp(26px,3vw,38px)}
/* phones: the hero's intro link and the logo strip sit closer together */
@media (max-width:900px){
  .hero2-inner{padding-bottom:18px}
  .logos2{padding-top:18px}
  .logos2 .strip-label{margin-bottom:20px}
}

/* ---------- dossier: layered image crop frames + right-third caption ---------- */
.dossier-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,80px);align-items:center}
@media (min-width:960px){.dossier-grid{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)}}
/* four frames: the stage dive leads, the Chino selfie with a drawn-on note, the LED shot, and the black and white console portrait overlapping the corner */
.frames{position:relative;aspect-ratio:4/6;min-height:0}
@media (min-width:960px){.frames{aspect-ratio:5/4;min-height:420px}}
.frames figure{position:absolute;margin:0;border:1px solid var(--line);background:var(--ink-2);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.frames img{width:100%;height:100%;object-fit:cover;display:block}
.frames .f1{left:0;top:0;width:100%;height:38%}
.frames .f1 img{object-position:50% 12%}
.frames .f4{left:0;top:41%;width:48%;height:29%}
.frames .f4 img{object-position:45% 0}
.frames .f3{right:0;top:46%;width:46%;height:24%}
.frames .f3 img{opacity:.85}
.frames .f2{left:0;bottom:0;width:100%;height:27%}
.frames .f2 img{object-position:30% 20%}
@media (min-width:960px){
  .frames .f1{width:62%;height:58%}
  .frames .f1 img{object-position:50% 40%}
  .frames .f4{left:auto;right:0;top:0;width:35%;height:50%}
  .frames .f3{right:auto;left:0;top:auto;bottom:0;width:36%;height:32%}
  .frames .f2{left:auto;right:0;width:58%;height:44%}
  .frames .f2 img{object-position:30% 50%}
}
/* reveal: each frame wipes up from its bottom edge while the photo settles from a slight zoom, staggered; the block itself no longer slides */
.reveal-init .frames[data-reveal]{opacity:1;transform:none;transition:none}
.frames .f1{--f:0}.frames .f4{--f:1}.frames .f3{--f:2}.frames .f2{--f:3}
.reveal-init .frames figure{opacity:0;transition:opacity .45s var(--ease);transition-delay:calc(var(--f) * 160ms)}
.reveal-init .frames figure img{clip-path:inset(100% 0 0 0);transform:scale(1.12);transition:clip-path 1s cubic-bezier(.16,1,.3,1),transform 1.8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--f) * 160ms)}
.reveal-init .frames.in figure{opacity:1}
.reveal-init .frames.in figure img{clip-path:inset(0 0 0 0);transform:none}
@media (prefers-reduced-motion:reduce){.reveal-init .frames figure,.reveal-init .frames figure img{opacity:1;clip-path:none;transform:none;transition:none}}
/* the note: a red arrow draws itself from the caption up to Chino once the frames have revealed */
.frames .f4 figcaption{left:auto;right:10px;bottom:8px;text-align:right;color:#fff;font-weight:500;font-size:11px;line-height:1.5;letter-spacing:.1em;padding:6px 8px;background:rgba(10,10,11,.72);border-left:2px solid var(--red)}
.frames .note{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.frames .note path{fill:none;stroke:var(--red);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.reveal-init .frames .note path{stroke-dashoffset:1}
.reveal-init .frames.in .note .n1{animation:note-draw .8s var(--ease) 1.25s forwards}
.reveal-init .frames.in .note .n2{animation:note-draw .25s var(--ease) 2s forwards}
@keyframes note-draw{to{stroke-dashoffset:0}}
.reveal-init .frames .f4 figcaption{opacity:0;transition:opacity .5s var(--ease) 1.1s}
.reveal-init .frames.in .f4 figcaption{opacity:1}
@media (prefers-reduced-motion:reduce){.reveal-init .frames .note path{stroke-dashoffset:0;animation:none}.reveal-init .frames .f4 figcaption{opacity:1;transition:none}}
.frames figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-2)}
.dossier-text .eyebrow{margin-bottom:14px}
.dossier-text .role{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:12px 0 22px;line-height:1.7}
.dossier-text .prose{font-size:16.5px}
.credits2{margin-top:28px}
.credits2 .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.credits2 ol{columns:2;column-gap:24px}
.credits2 li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line-soft);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:18px;color:var(--bone-2);break-inside:avoid}
.credits2 .idx{font-family:var(--mono);font-size:11px;color:var(--red);letter-spacing:.08em}

/* ---------- oversized metrics strip ---------- */
.proof{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding-top:clamp(8px,1.5vw,20px);padding-bottom:clamp(24px,3vw,40px)}
.proof .container{position:relative}
.proof .metrics-row{margin-bottom:clamp(52px,6vw,88px)}
.metrics-row{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:700px){.metrics-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.metric + .metric{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,40px)}}
.metric .v{font-family:var(--display);font-weight:800;font-size:clamp(64px,8.5vw,132px);line-height:.85;color:#fff;font-variant-numeric:tabular-nums}
.metric .v em{font-style:normal;color:var(--red)}
.metric .k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:12px}
@media (max-width:699px){.metric{text-align:left}}

/* ---------- centered pull quote ---------- */
.pull{position:relative;text-align:center;margin:0 auto;max-width:1000px}
.proof::after{content:"";position:absolute;left:50%;top:30%;width:min(1100px,100vw);height:64%;transform:translateX(-50%);pointer-events:none;z-index:-2;background:radial-gradient(closest-side,rgba(237,67,80,.09),transparent)}
.wave{position:absolute;left:0;right:0;bottom:0;top:32%;width:100%;height:68%;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 30%,#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 30%,#000 78%,transparent);mask-composite:intersect}
.pull .q{font-size:clamp(34px,5.2vw,76px);font-weight:800;line-height:.96;color:#fff}
.pull .q em{color:var(--red);font-style:normal}
/* an ink pool behind the quote so the red word stays legible over the red bars; the wave still shows around it (denser on phones, where the bars sit right behind the words) */
.pull::before{content:"";position:absolute;left:-8%;right:-8%;top:-18%;bottom:-10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,rgba(10,10,11,.94) 0%,rgba(10,10,11,.8) 36%,rgba(10,10,11,.4) 62%,rgba(10,10,11,0) 82%)}
.pull .q{text-shadow:0 2px 26px rgba(10,10,11,.95),0 0 6px rgba(10,10,11,.8)}
@media (max-width:900px){
  .pull::before{left:-14%;right:-14%;top:-20%;bottom:-12%;background:radial-gradient(ellipse at 50% 44%,rgba(10,10,11,.97) 0%,rgba(10,10,11,.9) 38%,rgba(10,10,11,.55) 62%,rgba(10,10,11,0) 84%)}
}
.pull footer{display:inline-flex;align-items:center;gap:16px;margin-top:32px;text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);line-height:1.7}
.pull footer img{width:72px;height:72px;object-fit:cover;filter:grayscale(1)}
.pull footer b{color:var(--bone);font-weight:500}

/* ---------- learn: off-grid offset over duotone texture ---------- */
.learn2{position:relative;overflow:hidden;isolation:isolate}
.learn2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.11;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent)}
.learn2 .rings{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent)}

/* ---------- the finder: pick the problem, see the lessons that fix it ---------- */
.finder-head{display:grid;grid-template-columns:1fr;gap:clamp(14px,2.5vw,36px);align-items:end;margin-bottom:clamp(24px,3.5vw,40px)}
@media (min-width:900px){.finder-head{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.finder-head .eyebrow{margin-bottom:14px}
.finder-head .h2{max-width:14ch}
.finder-head .lead{max-width:46ch;color:var(--bone-2)}
.finder{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.5vw,40px);align-items:start}
@media (min-width:960px){.finder{grid-template-columns:minmax(220px,.62fr) minmax(0,2fr)}}
/* tabs: a rail on desktop, a scrolling strip on phones */
.ftabs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.ftab{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;text-align:left;padding:13px 12px 13px 0;background:none;border:0;border-bottom:1px solid var(--line);color:var(--bone-2);cursor:pointer;position:relative;transition:color .2s,padding-left .25s var(--ease)}
.ftab::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .25s var(--ease)}
.ftab .ft{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:20px;letter-spacing:.01em}
.ftab .fc{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.ftab .fc b{font-weight:500;color:var(--mute)}.ftab .fc i{font-style:normal}
.ftab.is-on .fc b{color:var(--bone-2)}
.ftab:hover{color:#fff}
.ftab.is-on{color:#fff;padding-left:14px}
.ftab.is-on::before{transform:scaleY(1)}
.ftab:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
@media (max-width:959px){
  .ftabs{flex-direction:row;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;border-top:0;gap:8px;padding:2px 0 6px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .ftabs::-webkit-scrollbar{display:none}
  .ftab{flex:none;width:auto;min-width:140px;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 14px;border:1px solid var(--line);scroll-snap-align:start;background:var(--ink-2)}
  .ftab::before{display:none}
  .ftab.is-on{padding-left:14px;border-color:var(--red);background:var(--ink-3)}
  .ftab .ft{font-size:17px}
  .ftab .fc i{display:none}
}
/* panel */
.fpanel{display:grid;grid-template-columns:1fr;gap:18px 28px}
.fpanel[hidden],.fmore[hidden]{display:none}
@media (min-width:1180px){.fpanel{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.fpanel .fhead{grid-column:1 / -1}.fpanel .flist{grid-column:2;grid-row:2 / span 2}.fpanel .ffeat{grid-column:1;grid-row:2}.fpanel .fmore{grid-column:2}}
.fhead .h3{font-size:clamp(28px,3.4vw,46px);font-weight:700;line-height:.98;color:#fff;max-width:20ch}
.fhead p{color:var(--bone-2);font-size:15.5px;line-height:1.55;margin-top:10px;max-width:60ch;text-wrap:pretty}
/* featured lesson: the free one plays in place; a locked one shows the padlock and opens the checkout */
.ffeat .lesson-play{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line);padding:0;cursor:pointer;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.ffeat .lesson-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:transform 1.2s var(--ease),opacity .4s}
.ffeat .lesson-play:hover img{transform:scale(1.03);opacity:1}
.ffeat .lesson-play iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.play-ring{position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(10,10,11,.55);border:1px solid rgba(236,235,230,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;transition:transform .3s var(--ease),background .3s}
.play-ring i{display:block;width:0;height:0;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;margin-left:5px}
.ffeat.is-free .lesson-play:hover .play-ring{transform:translate(-50%,-50%) scale(1.08);background:var(--red-btn);border-color:var(--red-btn)}
.free-tag{position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--red-btn);padding:7px 10px}
.lock-big{position:absolute;left:14px;top:14px;width:34px;height:34px;border-radius:50%;background:rgba(10,10,11,.72);border:1px solid rgba(236,235,230,.35);display:flex;flex-direction:column;align-items:center;justify-content:center}
.lock-big::before{content:"";width:10px;height:8px;border:1.5px solid var(--bone);border-bottom:0;border-radius:5px 5px 0 0}
.lock-big::after{content:"";width:14px;height:10px;background:var(--bone);border-radius:2px}
.veil-big{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,11,.5);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .25s}
.ffeat .lesson-play:hover .veil-big,.ffeat .lesson-play:focus-visible .veil-big{opacity:1}
.ffeat .play-ring,.ffeat .free-tag{display:none}
.ffeat.is-free .play-ring,.ffeat.is-free .free-tag{display:grid}
.ffeat.is-free .free-tag{display:block}
.ffeat.is-free .lock-big,.ffeat.is-free .veil-big{display:none}
.ffeat .lesson-play.is-playing > :not(iframe){display:none}
.free-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding:12px 2px 0}
.free-meta .ft{font-weight:600;font-size:16px;color:#fff}
.free-meta .fd{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:3px}
/* lesson rows */
.flist{list-style:none;border-top:1px solid var(--line)}
.fgrp{padding:16px 0 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2)}
.fgrp.is-freegrp{color:var(--red)}
.fgrp.is-more{display:none}
.flist.is-open .fgrp.is-more{display:block}
.ffeat .nothumb-big{position:absolute;inset:0;display:none;place-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);background:var(--ink-3)}
.ffeat.no-img .lesson-play img{display:none}
.ffeat.no-img .nothumb-big{display:grid}
.frow.is-more{display:none}
.flist.is-open .frow.is-more{display:block}
.frow-btn{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:center;width:100%;text-align:left;padding:8px 6px 8px 0;background:none;border:0;border-bottom:1px solid var(--line-soft);color:var(--bone);cursor:pointer;transition:background .2s}
.frow-btn:hover{background:rgba(255,255,255,.03)}
.frow-btn:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.frow.is-on .frow-btn{background:rgba(237,67,80,.08)}
.fth{position:relative;display:block;aspect-ratio:16/9;background:var(--ink-3);overflow:hidden;border:1px solid var(--line-soft)}
.fth img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.fth .nothumb{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.fth .lock{position:absolute;left:5px;top:5px;width:18px;height:18px;border-radius:50%;background:rgba(10,10,11,.75);border:1px solid rgba(236,235,230,.3);display:flex;flex-direction:column;align-items:center;justify-content:center}
.fth .lock::before{content:"";width:6px;height:4px;border:1.2px solid var(--bone);border-bottom:0;border-radius:3px 3px 0 0}
.fth .lock::after{content:"";width:8px;height:6px;background:var(--bone);border-radius:1px}
.fth .fb{position:absolute;left:5px;top:5px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red-btn);padding:3px 6px}
.ftx{display:grid;gap:3px;min-width:0}
.ftt{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--bone);text-wrap:pretty}
.frow.is-free .ftt{color:#fff}
.ftd{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.fmore{margin-top:12px;background:none;border:1px solid var(--line);color:var(--bone);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:12px 16px;cursor:pointer;width:100%;transition:border-color .2s,color .2s}
.fmore:hover{border-color:var(--bone);color:#fff}
.flist.is-open + .fmore{display:none}
@media (max-width:600px){.frow-btn{grid-template-columns:88px minmax(0,1fr)}.ftt{font-size:14px}}

/* ---------- modules: gatefold spread with the oversized 15 ---------- */
.gatefold-head{display:grid;grid-template-columns:1fr;gap:clamp(16px,3vw,40px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
@media (min-width:800px){.gatefold-head{grid-template-columns:auto minmax(0,1fr)}}
.fifteen{font-family:var(--display);font-weight:900;font-size:clamp(140px,22vw,340px);line-height:.78;color:#fff;letter-spacing:-.02em;width:max-content;transform-origin:left center}
.fifteen::after{content:"";display:block;width:64px;height:6px;background:var(--red);margin-top:18px}
.gatefold .lead{margin-top:16px;max-width:52ch}
.sides{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px);align-items:start}
@media (min-width:760px){.sides{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.sides{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}}
.side2 .side-head{border-bottom:2px solid var(--bone);padding-bottom:10px;margin-bottom:6px}
.side2 li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.side2 .n{font-family:var(--display);font-weight:800;font-size:28px;line-height:1;color:var(--red);font-variant-numeric:tabular-nums;padding-top:2px}
.side2 .h3{font-size:17px;font-weight:600;text-wrap:balance}
.side2 p{color:var(--mute);font-size:14.5px;margin-top:4px;max-width:50ch;text-wrap:pretty}

/* ---------- gapless bento ---------- */
.gapless{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(28px,4vw,48px)}
@media (min-width:760px){.gapless{grid-template-columns:repeat(3,minmax(0,1fr))}.gapless .wide{grid-column:span 2}}
.gcell{position:relative;overflow:hidden;padding:30px 28px 32px;display:flex;flex-direction:column;gap:10px;min-height:260px;background:var(--ink-2);justify-content:flex-end}
.gcell:nth-child(2),.gcell:nth-child(6){background:var(--ink-3)}
.gcell.tint{background:var(--red-btn);color:#fff}
.gcell.tint .tag{color:#fff}.gcell.tint p{color:rgba(255,255,255,.85)}
.gcell .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:500}
.gcell .h3{font-size:20px}
.gcell p{color:var(--mute);font-size:15.5px;line-height:1.55;max-width:52ch;text-wrap:pretty}
.gcell .big{font-family:var(--display);font-weight:800;font-size:clamp(64px,7vw,110px);line-height:.85;color:#fff;margin-bottom:6px}
.gcell .big span{color:var(--red)}
.gcell .big small{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-left:8px;font-weight:500}
.gcell.has-bg .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right top;opacity:.28;pointer-events:none}
.gcell.has-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink-2) 25%,rgba(17,17,19,.6) 60%,rgba(17,17,19,.2));pointer-events:none}
.gcell.has-bg > :not(.bg){position:relative;z-index:1}
/* Travels artwork in the stems cell: cover sits on the right, text keeps the left; the red field bleeds over the art's left edge */
.gcell.has-art{min-height:340px}
.gcell.has-art > :not(.art){position:relative;z-index:1;max-width:52%}
.gcell.has-art .art{position:absolute;top:0;right:0;bottom:0;width:48%;pointer-events:none}
.gcell.has-art .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.gcell.has-art .art::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--red-btn) 0%,rgba(216,50,63,.55) 22%,rgba(216,50,63,0) 55%)}
.gcell.has-art .art .smoke{position:absolute;inset:0;width:100%;height:100%;z-index:2}
@media (max-width:759px){
  /* stacked cells size to their text; the desktop min-height was pushing the copy to the bottom of an empty box */
  .gcell{min-height:0;padding:26px 24px 28px}
  .gcell.has-bg{min-height:220px}
  .gcell.has-art{min-height:0;padding-top:250px}
  .gcell.has-art > :not(.art){max-width:none}
  .gcell.has-art .art{width:100%;bottom:auto;height:250px}
  .gcell.has-art .art img{object-position:50% 12%}
  .gcell.has-art .art::before{background:linear-gradient(180deg,rgba(216,50,63,0) 55%,var(--red-btn) 100%)}
}

/* ---------- split testimonial quote wall ---------- */
.wall-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,6vw,80px);align-items:start}
@media (min-width:960px){.wall-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.featured{position:sticky;top:calc(var(--header-h) + 32px)}}
.featured .eyebrow{margin-bottom:18px}
.featured .fq{font-size:clamp(30px,3.8vw,54px);font-weight:700;text-transform:none;line-height:1.02;letter-spacing:-.01em;color:#fff}
.featured .who{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:22px}
.wall-list figure{margin:0;padding:20px 0 22px;border-top:1px solid var(--line)}
.wall-list blockquote{margin:0;font-size:17px;line-height:1.55;color:var(--bone)}
.wall-list figcaption{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* ---------- faq centered, narrow ---------- */
.faq2 .container{max-width:860px}
.faq2 .h2{text-align:center;margin-bottom:clamp(28px,4vw,48px)}
.faq2 .faq{max-width:none}

/* ---------- offer: color-blocked diptych ---------- */
.diptych{display:grid;grid-template-columns:1fr}
@media (min-width:900px){.diptych{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.dip-red{background:var(--red);color:var(--ink);position:relative;overflow:hidden}
.dip-red .dip-inner{position:relative;padding-bottom:calc(clamp(48px,7vw,104px) + 110px)}
.dip-wave{position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none;isolation:isolate}
.dip-wave .wave{top:0;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-over;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-composite:add}
.dip-ink{background:var(--ink-2);color:var(--bone)}
.dip-inner{padding:clamp(48px,7vw,104px) var(--gutter);max-width:calc(var(--container) / 2);margin-inline:auto;width:100%;display:flex;flex-direction:column;gap:20px}
@media (min-width:900px){.dip-red .dip-inner{margin-inline:auto 0}.dip-ink .dip-inner{margin-inline:0 auto}}
.dip-red .eyebrow{color:rgba(10,10,11,.7)}
.dip-price{font-family:var(--display);font-weight:900;font-size:clamp(120px,15vw,220px);line-height:.82;letter-spacing:-.02em;color:var(--ink)}
.dip-price sup{font-size:.36em;vertical-align:top;top:.3em;position:relative}
.dip-was{font-size:17px;color:rgba(10,10,11,.85);max-width:40ch}
.dip-was s{text-decoration-thickness:2px}
.btn.btn-ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.btn-ink:hover{background:#000;border-color:#000}
.dip-fine{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(10,10,11,.7);line-height:1.7}
.dip-list li{padding:12px 0;border-top:1px solid var(--line);font-size:16px}
.dip-list li:last-child{border-bottom:1px solid var(--line)}
.dip-list b{color:#fff;font-weight:600}.dip-list span{color:var(--mute)}
.dip-g{color:var(--bone-2);font-size:15px;margin-top:8px;max-width:56ch}
.dip-g b{color:#fff;font-weight:600}
.dip-g a{color:var(--bone)}

/* module rows: real lesson counts, and the full list behind a disclosure */
.side2 .meta{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
/* four sides: compact heads */
.side2 .side-head{display:block}
.side2 .side-head .t{font-size:clamp(26px,2.6vw,34px)}
.side2 .side-head .r{margin-top:6px;font-size:11px;line-height:1.6}
.side2 .side-head .rn{display:block;color:var(--bone-2)}

/* ---------- hero video player: opens over the hero, closes with the button, Esc, or a click outside the frame ---------- */
.hero-player{position:absolute;inset:0;z-index:6;background:rgba(10,10,11,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:calc(var(--header-h) + 100px) var(--gutter) 24px;cursor:pointer;animation:player-in .35s var(--ease)}
.player-cta{cursor:default;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.player-cta.is-waiting{opacity:0;transform:translateY(8px);pointer-events:none}
.player-cta .btn{display:inline-flex}
@keyframes player-in{from{opacity:0}to{opacity:1}}
.player-frame{position:relative;width:100%;max-width:min(1180px,calc((92vh - var(--header-h) - 204px) * 16 / 9));aspect-ratio:16/9;background:#000;cursor:default;box-shadow:0 30px 90px rgba(0,0,0,.65)}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:1;display:block}
.player-close{position:absolute;top:calc(var(--header-h) + 76px);right:var(--gutter);z-index:7;display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);background:rgba(10,10,11,.7);border:1px solid var(--line);padding:11px 14px 11px 16px;cursor:pointer;transition:border-color .2s,color .2s}
.player-close:hover{border-color:var(--bone);color:#fff}
.player-close i{position:relative;width:12px;height:12px;display:block}
.player-close i::before,.player-close i::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.player-close i::after{transform:rotate(-45deg)}
.hero2.is-playing .hero2-inner{visibility:hidden}
@media (max-width:900px){.hero-player{padding:calc(var(--header-h) + 100px) var(--gutter) 24px;align-items:center}.player-frame{max-width:none;box-shadow:none}.player-close{right:var(--gutter)}}

/* touch targets: the intro link and the footer links get a taller hit area on phones */
@media (hover:none) and (pointer:coarse){
  .link-arrow{padding-top:10px;padding-bottom:10px;margin-top:-10px}
  .site-footer a{display:inline-block;padding:8px 0}
  .dip-g a{padding:6px 0}
}