/* torque.fyi — site stylesheet. Brand values from 5. Brand/1. Brand Guidelines (Torque Brand Guide):
   navy #101114 canvas, orange #FF6B00 for one thing per view, cream #F5F0E8 text,
   Space Grotesk headings (tight), Inter body (1.7). Fonts are self-hosted: no third-party requests. */

@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  color-scheme:dark;
  --navy:#101114;--navy-2:#0B0C0E;--navy-3:#08090A;--navy-up:#17191D;
  --orange:#FF6B00;--orange-press:#E8650E;--orange-07:rgba(255,107,0,.07);--orange-soft:rgba(255,107,0,.55);
  --cream:#F5F0E8;--cream-2:#D4CFC9;--muted:#A89F94;
  --line:rgba(245,240,232,.10);--line-2:rgba(245,240,232,.18);
  --display:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(16px,5vw,64px);--max:1200px;--measure:62ch;
  --step--1:clamp(.8rem,.78rem + .1vw,.875rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.0625rem);
  --step-1:clamp(1.15rem,1.08rem + .35vw,1.35rem);
  --step-2:clamp(1.45rem,1.25rem + 1vw,2rem);
  --step-3:clamp(1.9rem,1.5rem + 2vw,3rem);
  --step-4:clamp(2.4rem,1.7rem + 3.6vw,4.6rem);
  --step-5:clamp(2.6rem,1.6rem + 5vw,6rem);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;background:var(--navy)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--navy);color:var(--cream-2);font:400 var(--step-0)/1.7 var(--body);overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{font-family:var(--display);color:var(--cream);margin:0;letter-spacing:-.03em;line-height:1.05;text-wrap:balance;font-weight:700}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--cream);color:var(--navy);padding:.6rem 1rem;border-radius:8px;font-weight:600}
.skip:focus{left:16px}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- labels, buttons ---------- */
.eyebrow{font:600 var(--step--1)/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);border-radius:2px;flex:none}
.eyebrow .dot{color:var(--cream-2)}
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:var(--h);padding:0 1.5rem;border-radius:999px;font:600 1rem/1 var(--display);letter-spacing:-.01em;text-decoration:none;transition:transform .25s var(--ease),background .2s,color .2s,box-shadow .25s;white-space:nowrap}
.btn-primary{background:var(--orange);color:#101114;box-shadow:0 10px 30px -12px rgba(255,107,0,.65)}
.btn-primary:hover{background:#ff7a1a;transform:translateY(-1px)}
.btn-primary:active{background:var(--orange-press);transform:none}
.btn-ghost{color:var(--cream);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--cream-2)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.link{color:var(--cream);text-decoration:underline;text-decoration-color:var(--orange-soft);text-underline-offset:.22em;text-decoration-thickness:1.5px}
.link:hover{text-decoration-color:var(--orange)}

/* ---------- header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(16,17,20,.72);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-header.scrolled{border-bottom-color:var(--line);background:rgba(11,12,14,.86)}
.nav{display:flex;align-items:center;gap:1.5rem;height:68px}
.logo{display:block;flex:none;line-height:0}
.logo img{height:26px;width:auto}
.nav-links{display:flex;gap:1.75rem;margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav-links a{font:500 .92rem/1 var(--display);color:var(--cream-2);text-decoration:none;letter-spacing:-.005em;padding:.5rem 0}
.nav-links a:hover{color:var(--cream)}
.nav .btn{--h:40px;padding:0 1.1rem;font-size:.9rem}
.menu-toggle{display:none}
@media (max-width:900px){
  .nav-links{display:none}
  .nav .btn{margin-left:auto}
  .menu{position:relative}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--cream);cursor:pointer;list-style:none}
  .menu-toggle::-webkit-details-marker{display:none}
  .menu[open] .nav-links{display:flex;flex-direction:column;gap:.25rem;position:absolute;right:0;top:52px;min-width:220px;background:var(--navy-2);border:1px solid var(--line);border-radius:16px;padding:.75rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
  .menu[open] .nav-links a{display:block;padding:.75rem .75rem;font-size:1rem}
}
@media (min-width:901px){.menu{display:contents}.menu>summary{display:none}}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding-block:clamp(88px,12vw,168px)}
.sec-deep{background:var(--navy-2)}
.sec-deepest{background:var(--navy-3)}
.sec-head{display:grid;gap:1.25rem;max-width:44rem}
.sec-head h2{font-size:var(--step-4)}
.sec-head .lede{font-size:var(--step-1);color:var(--cream-2);line-height:1.55;max-width:var(--measure)}
.prose{display:grid;gap:1.1rem;max-width:var(--measure)}
.prose p{color:var(--cream-2)}
.prose strong{color:var(--cream);font-weight:600}
.hl{color:var(--orange)}
.cream{color:var(--cream)}
.two{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,96px);align-items:center}
@media (min-width:960px){.two{grid-template-columns:1.05fr 1fr}.two.flip>:first-child{order:2}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,7vw,96px) clamp(72px,9vw,128px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,72px);align-items:center}
@media (min-width:1000px){.hero-grid{grid-template-columns:1.25fr .9fr}}
.hero h1{font-size:var(--step-5);font-weight:700;letter-spacing:-.045em;line-height:.98}
.hero h1 span{display:block}
.hero h1 .dim{color:rgba(245,240,232,.42)}
.money{margin-top:clamp(20px,2.4vw,32px);font:600 var(--step-2)/1.2 var(--display);color:var(--cream);letter-spacing:-.025em;max-width:26ch}
.money em{font-style:normal;color:var(--orange)}
.hero .how{margin-top:1.25rem;font-size:var(--step-1);line-height:1.55;max-width:40ch;color:var(--cream-2)}
.hero-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}
.cred{margin-top:1.25rem;font-size:var(--step--1);color:var(--muted);max-width:52ch;line-height:1.6}
.cred b{color:var(--cream-2);font-weight:500}

.portrait{position:relative;aspect-ratio:4/5;width:100%;max-width:460px;margin-inline:auto}
.portrait .dial{position:absolute;inset:-9%;width:118%;height:118%;pointer-events:none}
.portrait .frame{position:absolute;inset:0;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#202227,#101114 70%);box-shadow:0 40px 90px -40px rgba(0,0,0,.8),inset 0 0 0 1px var(--line)}
.dial .tick{stroke:var(--line-2);stroke-width:2}
.dial .tick.major{stroke:rgba(245,240,232,.4);stroke-width:2.5}
.dial .arc{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:420 2000;stroke-dashoffset:420;animation:sweep 2.4s .4s var(--ease) forwards}
.dial .spin{transform-origin:300px 300px;animation:spin 90s linear infinite}
@keyframes sweep{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- placeholders (visible on purpose: Rich's inputs) ---------- */
.ph{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:180px;background:
  repeating-linear-gradient(135deg,rgba(245,240,232,.025) 0 12px,transparent 12px 24px),linear-gradient(160deg,#1F2125,#101114);
  border:1.5px dashed rgba(255,107,0,.45);border-radius:inherit;color:var(--muted);text-align:center;padding:1.25rem}
.ph .ph-in{display:grid;gap:.4rem;justify-items:center;max-width:30ch}
.ph .ph-id{font:700 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);background:rgba(255,107,0,.1);padding:.4rem .6rem;border-radius:999px}
.ph .ph-what{font:500 .95rem/1.4 var(--display);color:var(--cream-2)}
.ph .ph-size{font:500 .75rem/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.ph-t{display:inline-block;font:600 .8em/1.3 var(--display);color:var(--orange);background:rgba(255,107,0,.1);border:1px dashed rgba(255,107,0,.5);border-radius:6px;padding:.1em .45em;letter-spacing:.01em}
.media{border-radius:24px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 30px 80px -40px rgba(0,0,0,.7)}
.media.tall{aspect-ratio:4/5}
.media.wide{aspect-ratio:21/9}
.media img{width:100%;height:100%;object-fit:cover}

/* ---------- offers ---------- */
.offers{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:880px){.offers{grid-template-columns:repeat(3,1fr)}}
.offer{position:relative;display:flex;flex-direction:column;gap:1rem;padding:clamp(24px,3vw,36px);border-radius:24px;background:linear-gradient(180deg,rgba(245,240,232,.045),rgba(245,240,232,.015));box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s}
.offer:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line-2)}
.offer .k{font:600 .78rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.offer h3{font-size:var(--step-2)}
.offer .sub{font:500 var(--step-0)/1.4 var(--display);color:var(--cream)}
.offer p{font-size:.98rem}
.offer .go{margin-top:auto;padding-top:.5rem;font:600 .92rem/1 var(--display);color:var(--cream);display:inline-flex;gap:.5rem;align-items:center}
.offer .go span{color:var(--orange);transition:transform .25s var(--ease)}
.offer:hover .go span{transform:translateX(4px)}
.offer .glyph{width:56px;height:56px}
.glyph .g-line{fill:none;stroke:var(--cream-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.glyph .g-acc{fill:none;stroke:var(--orange);stroke-width:1.8;stroke-linecap:round}
.glyph .g-dot{fill:var(--orange)}

/* ---------- problem: paper vs reality ---------- */
.steps-vis{display:grid;gap:28px;padding:clamp(24px,3vw,40px);border-radius:24px;background:var(--navy-3);box-shadow:inset 0 0 0 1px var(--line)}
.steps-vis .row{display:grid;gap:12px}
.steps-vis .lbl{display:flex;justify-content:space-between;font:600 .78rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.steps-vis .lbl b{color:var(--cream);font-variant-numeric:tabular-nums;letter-spacing:0;font-size:.95rem}
.pips{display:flex;flex-wrap:wrap;gap:6px}
.pips i{display:block;height:34px;flex:1 1 0;min-width:10px;border-radius:6px;background:rgba(245,240,232,.14)}
.pips.real i{background:rgba(245,240,232,.08);box-shadow:inset 0 0 0 1px rgba(245,240,232,.08)}
.pips.real i.x{background:rgba(255,107,0,.16);box-shadow:inset 0 0 0 1px rgba(255,107,0,.35)}
.steps-vis .note{font-size:.9rem;color:var(--muted);line-height:1.5}
.kicker{font:500 var(--step-1)/1.45 var(--display);color:var(--cream);letter-spacing:-.015em;max-width:34ch}

/* ---------- want: six months from now ---------- */
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:clamp(20px,3vw,32px);border-radius:24px;background:var(--navy-3);box-shadow:inset 0 0 0 1px var(--line)}
.calendar .dow{font:600 .7rem/1 var(--display);letter-spacing:.12em;color:var(--muted);text-align:center;padding-bottom:6px}
.calendar .d{aspect-ratio:1;border-radius:8px;background:rgba(245,240,232,.05);position:relative}
.calendar .d.on{background:rgba(245,240,232,.16)}
.calendar .d.on::after{content:"";position:absolute;inset:34% 34%;border-radius:50%;background:var(--cream-2)}
.calendar .d.on.acc::after{background:var(--orange)}
.calendar .cap{grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem;margin-top:10px;font-size:.85rem;color:var(--muted)}
.reveal-cal .d.on{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .reveal-cal:not(.in) .d.on{opacity:.25;transform:scale(.85)}

/* ---------- are / not ---------- */
.isnot{display:grid;grid-template-columns:1fr;gap:16px;margin-top:clamp(40px,5vw,64px)}
@media (min-width:860px){.isnot{grid-template-columns:1fr 1fr}}
.isnot .col{padding:clamp(24px,3vw,40px);border-radius:24px;box-shadow:inset 0 0 0 1px var(--line)}
.isnot .col.are{background:linear-gradient(180deg,rgba(255,107,0,.06),rgba(255,107,0,0) 60%)}
.isnot h3{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:1.25rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ticks li{display:grid;grid-template-columns:28px 1fr;gap:.75rem;padding:.9rem 0;border-top:1px solid var(--line);color:var(--cream);font:500 var(--step-0)/1.45 var(--display);letter-spacing:-.01em}
.ticks li:first-child{border-top:0}
.ticks li::before{content:"";width:18px;height:18px;margin-top:.2em;border-radius:50%;background:var(--orange);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ticks.no li{color:var(--cream-2)}
.ticks.no li::before{background:var(--muted);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}

/* ---------- engine sections (lead scout, content, training) ---------- */
.engine-top{display:grid;gap:clamp(40px,5vw,72px);grid-template-columns:1fr;align-items:end}
@media (min-width:980px){.engine-top{grid-template-columns:1.1fr .9fr}}
.flow{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;gap:0;grid-template-columns:1fr;counter-reset:f}
@media (min-width:760px){.flow{grid-template-columns:repeat(2,1fr);column-gap:clamp(32px,4vw,64px)}}
@media (min-width:1100px){.flow.four{grid-template-columns:repeat(4,1fr)}.flow.three{grid-template-columns:repeat(3,1fr)}}
.flow li{counter-increment:f;display:grid;gap:.6rem;align-content:start;padding:1.5rem 0 2rem;border-top:1px solid var(--line);position:relative}
.flow li::before{content:counter(f);font:600 .8rem/1 var(--display);color:var(--orange);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.flow li::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--orange);transition:width 1.1s var(--ease)}
.flow.in li::after{width:100%}
.flow.in li:nth-child(2)::after{transition-delay:.15s}.flow.in li:nth-child(3)::after{transition-delay:.3s}.flow.in li:nth-child(4)::after{transition-delay:.45s}
.flow h3{font-size:var(--step-1);letter-spacing:-.02em}
.flow p{font-size:.98rem}
.aside-line{margin-top:clamp(24px,3vw,40px);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;padding:clamp(20px,2.4vw,28px) clamp(20px,3vw,36px);border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(245,240,232,.025)}
.aside-line p{color:var(--cream);font:500 var(--step-1)/1.4 var(--display);letter-spacing:-.015em;max-width:44ch}

/* lead scout radar */
.radar{position:relative;aspect-ratio:1;width:100%;max-width:520px;margin-inline:auto}
.radar svg{width:100%;height:100%}
.radar .ring{fill:none;stroke:var(--line)}
.radar .co{fill:rgba(245,240,232,.22)}
.radar .co.fit{fill:var(--orange)}
.radar .sweep{transform-origin:260px 260px;animation:spin 7s linear infinite}
.radar .link{stroke:var(--orange-soft);stroke-width:1.2;fill:none;stroke-dasharray:4 5}
.radar .you{fill:var(--cream)}
.radar text{fill:var(--cream-2);font:600 13px var(--display);letter-spacing:.08em}
.radar .ping{fill:none;stroke:var(--orange);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ping 2.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}

/* content engine fan */
.fan{position:relative;padding:clamp(20px,3vw,32px);border-radius:24px;background:var(--navy-3);box-shadow:inset 0 0 0 1px var(--line)}
.fan svg{width:100%;height:auto}
.fan .wave rect{fill:var(--cream-2)}
.fan .path{fill:none;stroke:rgba(245,240,232,.2);stroke-width:1.4}
.fan .path.lit{stroke:var(--orange);stroke-dasharray:6 8;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-28}}
.fan .tile{fill:rgba(245,240,232,.06);stroke:var(--line-2)}
.fan text{fill:var(--cream-2);font:600 12px var(--display);letter-spacing:.06em}
.fan .src{fill:rgba(255,107,0,.12);stroke:var(--orange-soft)}

/* GRIP levels */
.levels{display:grid;gap:16px;grid-template-columns:1fr;margin-top:clamp(48px,6vw,80px)}
@media (min-width:880px){.levels{grid-template-columns:repeat(3,1fr)}}
.level{padding:clamp(24px,3vw,36px);border-radius:24px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:.75rem;align-content:start;background:rgba(245,240,232,.02)}
.level.first{background:linear-gradient(180deg,rgba(255,107,0,.08),rgba(255,107,0,.0) 70%);box-shadow:inset 0 0 0 1px rgba(255,107,0,.35)}
.level .tag{font:600 .75rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.level h3{font-size:var(--step-2)}
.level .who{font:500 .95rem/1.4 var(--display);color:var(--cream)}
.level .meter{display:flex;gap:4px;margin-top:.25rem}
.level .meter i{height:4px;flex:1;border-radius:2px;background:rgba(245,240,232,.12)}
.level .meter i.on{background:var(--orange)}
.partner{margin-top:16px;display:grid;gap:1rem;grid-template-columns:1fr;align-items:center;padding:clamp(24px,3vw,36px);border-radius:24px;box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:880px){.partner{grid-template-columns:auto 1fr}}
.partner h3{font-size:var(--step-2)}
.course{margin-top:clamp(64px,8vw,112px)}
.course h3{font-size:var(--step-3);margin-bottom:1.25rem}

/* ---------- where are you now: the gauge ---------- */
.gauge-wrap{display:grid;gap:clamp(32px,4vw,56px);grid-template-columns:1fr;margin-top:clamp(40px,5vw,64px);align-items:center}
@media (min-width:1000px){.gauge-wrap{grid-template-columns:.9fr 1.1fr}}
.gauge{width:100%;max-width:520px;margin-inline:auto}
.gauge .seg{fill:none;stroke-width:18;stroke:rgba(245,240,232,.10)}
.gauge .seg.on{stroke:rgba(245,240,232,.28)}
.gauge .seg.hot{stroke:var(--orange)}
.gauge .tk{stroke:rgba(245,240,232,.35);stroke-width:2}
.gauge .needle{transform-origin:260px 260px;transform:rotate(var(--a,0deg));transition:transform 1.1s cubic-bezier(.3,1.4,.4,1)}
.gauge .needle line{stroke:var(--cream);stroke-width:4;stroke-linecap:round}
.gauge .hub{fill:var(--navy-3);stroke:var(--cream);stroke-width:3}
.gauge text{fill:var(--muted);font:600 13px var(--display);letter-spacing:.14em}
.gauge .unit{fill:var(--muted);font:500 12px var(--body);letter-spacing:.04em}
.stages{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.stage{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;padding:1.1rem 1.25rem;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line);cursor:default;transition:background .3s,box-shadow .3s}
.stage .n{grid-row:span 2;font:600 .8rem/1.6 var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
.stage h3{font-size:var(--step-1);letter-spacing:-.01em}
.stage p{font-size:.95rem}
.stage.active,.stage:hover{background:rgba(245,240,232,.04);box-shadow:inset 0 0 0 1px var(--line-2)}
.stage.active .n{color:var(--orange)}

/* ---------- philosophy ---------- */
.big-quote{font:600 var(--step-3)/1.15 var(--display);color:var(--cream);letter-spacing:-.03em;max-width:24ch;margin:0}
.big-quote::before{content:"\201C";display:block;color:var(--orange);font-size:1.6em;line-height:.6;margin-bottom:.2em}
.quote-by{margin-top:1.5rem;display:flex;align-items:center;gap:.9rem;font-size:.95rem;color:var(--muted)}
.quote-by b{color:var(--cream);font-weight:600;font-family:var(--display)}
.avatar{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none}
.avatar .ph{min-height:0;padding:0;border-width:1px}
.docpharm{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2rem}
.docpharm div{padding:1.25rem;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line)}
.docpharm div:last-child{box-shadow:inset 0 0 0 1px rgba(255,107,0,.4);background:rgba(255,107,0,.05)}
.docpharm b{display:block;font:600 .75rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.docpharm div:last-child b{color:var(--orange)}
.docpharm p{font:500 .98rem/1.45 var(--display);color:var(--cream)}

/* ---------- how we work: track ---------- */
.track{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:0;position:relative}
@media (min-width:980px){.track{grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,32px)}}
.track li{position:relative;display:grid;gap:.6rem;align-content:start;padding:0 0 2.25rem 44px}
@media (min-width:980px){.track li{padding:44px 0 0}}
.track li::before{content:"";position:absolute;left:8px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--navy-2);box-shadow:inset 0 0 0 2px var(--cream-2);z-index:1}
.track li:first-child::before{background:var(--orange);box-shadow:0 0 0 6px rgba(255,107,0,.15)}
.track li::after{content:"";position:absolute;left:14px;top:22px;bottom:0;width:2px;background:var(--line)}
.track li:last-child::after{display:none}
@media (min-width:980px){
  .track li::before{left:0;top:0}
  .track li::after{left:22px;right:calc(-1 * clamp(20px,2.4vw,32px));top:6px;bottom:auto;width:auto;height:2px}
}
.track .step{font:600 .75rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.track h3{font-size:var(--step-2);letter-spacing:-.025em}
.track p{font-size:.98rem}
.track .note{font:500 .85rem/1.4 var(--display);color:var(--cream)}
.commit{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:860px){.commit{grid-template-columns:1fr 1fr}}
.commit div{padding:clamp(24px,3vw,36px);border-radius:24px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:.75rem;align-content:start}
.commit div:first-child{background:rgba(255,107,0,.05);box-shadow:inset 0 0 0 1px rgba(255,107,0,.3)}
.commit h3{font-size:var(--step-2)}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,80px);align-items:center}
@media (min-width:980px){.about-grid{grid-template-columns:.8fr 1.2fr}}
.about-photo{border-radius:28px;overflow:hidden;aspect-ratio:4/5;max-width:440px;width:100%;margin-inline:auto}
.brands{margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.brands .k{font:600 .75rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.brands ul{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 2rem}
.brands li{font:700 var(--step-2)/1 var(--display);color:rgba(245,240,232,.55);letter-spacing:-.02em;text-transform:uppercase}
.path{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0}
.path li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.8rem 0;border-top:1px solid var(--line);font-size:.98rem}
.path li b{font:600 .8rem/1.8 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.path li span{color:var(--cream)}

/* ---------- follow rich ---------- */
.follow-grid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:clamp(48px,6vw,72px)}
@media (min-width:980px){.follow-grid{grid-template-columns:1.1fr .9fr}}
.panel{padding:clamp(24px,3vw,36px);border-radius:24px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(245,240,232,.02);display:grid;gap:1.25rem;align-content:start;min-width:0}
.panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem}
.panel h3{font-size:var(--step-2)}
.panel .meta{font-size:.85rem;color:var(--muted)}
.issues{list-style:none;margin:0;padding:0;display:grid}
.issues li{display:grid;grid-template-columns:3.25rem 1fr;gap:.75rem;padding:.85rem 0;border-top:1px solid var(--line);align-items:baseline}
.issues li b{font:600 .8rem/1 var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
.issues a,.issues span.t{font:500 1rem/1.4 var(--display);color:var(--cream);text-decoration:none;letter-spacing:-.01em}
.issues a:hover{color:var(--orange)}
.eps{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:560px){.eps{grid-template-columns:repeat(2,1fr)}}
.ep{display:grid;gap:.6rem;text-decoration:none;min-width:0}
.ep .thumb{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#1A1C20}
.ep .thumb img{width:100%;height:100%;object-fit:cover}
.ep .thumb .play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(16,17,20,.75);box-shadow:inset 0 0 0 1px rgba(245,240,232,.4);display:grid;place-items:center;transition:transform .25s var(--ease),background .25s}
.ep:hover .play{transform:scale(1.08);background:var(--orange)}
.ep .play::before{content:"";margin-left:4px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--cream)}
.ep .t{font:500 .95rem/1.35 var(--display);color:var(--cream)}
.ep .poster{position:absolute;inset:0;display:grid;align-content:end;padding:1rem;background:linear-gradient(160deg,#25282D,#101114);font:600 1rem/1.25 var(--display);color:var(--cream);letter-spacing:-.01em}
.ep iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.posts{list-style:none;margin:0;padding:0;display:grid}
.posts li{padding:1rem 0;border-top:1px solid var(--line);display:grid;gap:.4rem}
.posts q{font:500 1rem/1.45 var(--display);color:var(--cream);quotes:"\201C" "\201D";letter-spacing:-.01em}
.posts .pm{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.82rem;color:var(--muted)}
.posts .pm a{color:var(--cream-2)}
.profiles{display:flex;flex-wrap:wrap;gap:10px}
.profiles a{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);text-decoration:none;font:500 .92rem/1 var(--display);color:var(--cream)}
.profiles a:hover{box-shadow:inset 0 0 0 1px var(--orange)}
.profiles svg{width:16px;height:16px;fill:var(--cream-2)}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(40px,5vw,64px);max-width:52rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.35rem 0;font:600 var(--step-1)/1.35 var(--display);color:var(--cream);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--orange),var(--orange)) center/14px 2px no-repeat,linear-gradient(var(--orange),var(--orange)) center/2px 14px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 1.5rem;max-width:var(--measure)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,80px);align-items:start}
@media (min-width:980px){.contact-grid{grid-template-columns:1fr 1fr}}
.book{display:grid;gap:1.25rem;align-content:start}
.book h2{font-size:var(--step-4)}
.book .btn{justify-self:start;--h:58px;font-size:1.05rem;padding:0 1.75rem}
.book .small{font-size:.92rem;color:var(--muted)}
form.contact{display:grid;gap:14px;padding:clamp(24px,3vw,36px);border-radius:24px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(245,240,232,.02)}
.contact .fr{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:620px){.contact .fr{grid-template-columns:1fr 1fr}}
.contact label{display:grid;gap:.45rem;font:600 .78rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contact label .opt{letter-spacing:.04em;text-transform:none;font-weight:500}
.contact input,.contact textarea{width:100%;font:400 1rem/1.4 var(--body);color:var(--cream);background:var(--navy-3);border:1px solid var(--line-2);border-radius:12px;padding:.85rem .95rem;transition:border-color .2s,box-shadow .2s}
.contact textarea{min-height:130px;resize:vertical}
.contact input:focus,.contact textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,0,.18)}
.contact .hp{position:absolute;left:-9999px}
.contact button{justify-self:start;border:0;cursor:pointer;font-family:var(--display)}
.contact .fine{font-size:.82rem;color:var(--muted);line-height:1.55}

/* ---------- footer ---------- */
.closing{padding-block:clamp(72px,9vw,120px);text-align:left}
.closing .line{font:700 var(--step-4)/1.02 var(--display);color:var(--cream);letter-spacing:-.04em;max-width:18ch}
.closing .row{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
footer.site-footer{background:var(--navy-3);border-top:1px solid var(--line);padding-block:40px calc(40px + env(safe-area-inset-bottom,0px));font-size:.88rem;color:var(--muted)}
.foot{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:860px){.foot{grid-template-columns:auto 1fr auto;align-items:center}}
.foot img{height:20px;width:auto}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.foot a{color:var(--cream-2);text-decoration:none}
.foot a:hover{color:var(--cream)}
.foot .legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;padding-top:1.25rem;border-top:1px solid var(--line)}

/* ---------- sticky mobile CTA ---------- */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(11,12,14,0),rgba(11,12,14,.94) 38%);display:none}
.mcta .btn{width:100%}
@media (max-width:900px){.js .mcta{display:block;transform:translateY(110%);transition:transform .4s var(--ease)}.js .mcta.show{transform:none}}

/* ---------- reveal (content is visible without JS; motion only when JS runs) ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* ---------- legal pages ---------- */
.legal-page{padding-block:clamp(56px,8vw,112px)}
.legal-page h1{font-size:var(--step-4);margin-bottom:.75rem}
.legal-page h2{font-size:var(--step-2);margin:2.5rem 0 .75rem}
.legal-page .prose{max-width:68ch}
.legal-page ul{margin:0;padding-left:1.2rem;display:grid;gap:.35rem}
.legal-page table{width:100%;border-collapse:collapse;font-size:.95rem}
.legal-page th,.legal-page td{text-align:left;padding:.7rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.legal-page th{color:var(--cream);font-family:var(--display);font-weight:600}
.draft-note{padding:1rem 1.25rem;border-radius:14px;border:1.5px dashed rgba(255,107,0,.5);background:rgba(255,107,0,.06);color:var(--cream);font-size:.95rem;margin-bottom:2rem}

/* ---------- review mode: add #review to the URL ---------- */
.review [data-c]{outline:1.5px dashed rgba(255,107,0,.85);outline-offset:4px;position:relative}
.review [data-c="edit"]{outline-color:rgba(120,190,255,.9)}
.review [data-c]::after{content:attr(data-c);position:absolute;top:-10px;right:-6px;z-index:5;font:700 10px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;padding:3px 6px;border-radius:4px;background:var(--orange);color:#101114}
.review [data-c="edit"]::after{background:#78beff}
.review-bar{position:fixed;left:16px;bottom:16px;z-index:60;background:var(--navy-3);color:var(--cream);border:1px solid var(--line-2);border-radius:14px;padding:.8rem 1rem;font-size:.82rem;max-width:320px;box-shadow:0 20px 50px -20px #000;display:none}
.review .review-bar{display:block}
.review-bar b{color:var(--orange)}

/* ---------- round 2 adjustments ---------- */
.hero h1{font-size:clamp(2.5rem,1.2rem + 5.2vw,5.4rem);max-width:none}
.hero .hero-grid{margin-top:clamp(28px,4vw,56px)}
@media (min-width:1000px){.hero .hero-grid{grid-template-columns:1.1fr .9fr}}
.portrait{max-width:420px}
.portrait .dial{inset:-17%;width:134%;height:134%}
.dial .tick{stroke:rgba(245,240,232,.16)}
.dial .tick.major{stroke:rgba(245,240,232,.45)}
.menu-links{display:none}
@media (max-width:900px){
  nav[aria-label="Main"]{display:none}
  .menu{order:3}
  .menu[open] .menu-links{display:flex;flex-direction:column;gap:.25rem;list-style:none;margin:0;position:absolute;right:0;top:52px;min-width:220px;background:var(--navy-2);border:1px solid var(--line);border-radius:16px;padding:.75rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);z-index:5}
  .menu-links a{display:block;padding:.75rem;font:500 1rem/1 var(--display);color:var(--cream);text-decoration:none}
}
@media (min-width:901px){.menu{display:none}nav[aria-label="Main"]{margin-left:auto}.nav-links{margin-left:0}}
.nav-links{display:flex}
@media (max-width:900px){.nav-links{display:none}}
.follow-grid .panel.wide{grid-column:1/-1}
.panel.wide .posts-wrap{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:900px){.panel.wide .posts-wrap{grid-template-columns:1fr 1.2fr;align-items:start}}
.ep .thumb .poster + .play + * {display:none}
.ep.has-poster .t{display:none}
.faq-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,64px)}
@media (min-width:980px){.faq-grid{grid-template-columns:.8fr 1.2fr}.faq-grid .sec-head{position:sticky;top:110px;align-self:start}.faq-grid .faq{margin-top:0}}
.faq-grid .sec-head h2{font-size:var(--step-4)}
.contact label>span{display:inline}
/* hero portrait inside the torque dial */
.portrait{aspect-ratio:1/1;max-width:500px}
.portrait .dial{inset:0;width:100%;height:100%}
.portrait .frame{inset:9.5%;border-radius:50%}
.portrait .frame .ph{border-radius:50%}
.portrait .frame .ph-in{max-width:22ch}
@media (max-width:999px){.portrait{max-width:380px}}

/* 1.1 hero: what we do, then the three offers */
.hero h1{font-size:clamp(2.4rem,1.2rem + 4.6vw,5rem);max-width:16ch}
.hero .money{margin-top:0}
.hero-offers{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:8px;max-width:34rem}
.hero-offers a{display:grid;grid-template-columns:9.5rem 1fr;gap:.25rem 1rem;align-items:baseline;padding:.85rem 1rem;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:box-shadow .25s,background .25s}
.hero-offers a:hover{box-shadow:inset 0 0 0 1px var(--line-2);background:rgba(245,240,232,.03)}
.hero-offers b{font:600 1.02rem/1.3 var(--display);color:var(--cream);letter-spacing:-.01em}
.hero-offers b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-right:.6rem;vertical-align:.12em}
.hero-offers span{font-size:.95rem;line-height:1.45;color:var(--cream-2)}
@media (max-width:520px){.hero-offers a{grid-template-columns:1fr;padding:.7rem .9rem}}
.hero .how{margin-top:1rem;font-size:.95rem;color:var(--muted);max-width:52ch}
.hero .cred{margin-top:.5rem}

.hero .hero-grid{margin-top:0;align-items:center}
.hero h1{max-width:none;font-size:clamp(2.4rem,1.1rem + 4.2vw,4.6rem);margin-bottom:1.25rem}

/* ---- 1.2: scannable page ---- */
.band{padding-block:clamp(72px,9vw,128px)}
.punch{list-style:none;margin:0;padding:0;display:grid;gap:0}
.punch li{font:600 var(--step-2)/1.25 var(--display);letter-spacing:-.025em;color:var(--cream);padding:1rem 0 1rem 2.1rem;border-top:1px solid var(--line);position:relative}
.punch li::before{content:"";position:absolute;left:0;top:1.55rem;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--orange)}
.punch li:last-child{color:var(--orange)}
.punch li:last-child::before{background:var(--orange)}
.rv.in .punch li,.punch.rv.in li{animation:rise .6s var(--ease) both}
.punch.rv.in li:nth-child(2){animation-delay:.12s}.punch.rv.in li:nth-child(3){animation-delay:.24s}.punch.rv.in li:nth-child(4){animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.row{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,80px);align-items:center;margin-top:clamp(56px,8vw,112px)}
@media (min-width:960px){.row{grid-template-columns:1fr 1fr}.row.flip>.row-vis{order:2}}
.row-vis{width:100%;max-width:480px;margin-inline:auto}
.row-txt{display:grid;gap:.9rem;max-width:34rem}
.row-txt .k{font:600 .78rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.row-txt h3{font-size:var(--step-3);letter-spacing:-.035em}
.row-txt .lead{font:500 var(--step-1)/1.4 var(--display);color:var(--cream);letter-spacing:-.015em}
.muted{color:var(--muted);font-weight:500}
.bul{list-style:none;margin:.4rem 0 0;padding:0}
.bul li{padding:.7rem 0 .7rem 1.7rem;border-top:1px solid var(--line);position:relative;line-height:1.5}
.bul li::before{content:"→";position:absolute;left:0;color:var(--orange);font-family:var(--display)}

.levels-mini{display:grid;gap:14px;padding:clamp(20px,3vw,32px);border-radius:24px;background:var(--navy-3);box-shadow:inset 0 0 0 1px var(--line)}
.lv{display:flex;justify-content:space-between;align-items:center;border-radius:14px;padding:1.1rem 1.25rem;box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .35s var(--ease),background .35s}
.lv b{font:600 var(--step-1)/1 var(--display);color:var(--cream);letter-spacing:-.02em}
.lv span{font:600 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lv1{background:var(--orange);box-shadow:none}.lv1 b,.lv1 span{color:var(--navy)}
.lv2{margin-left:8%}.lv3{margin-left:16%}
.lv:hover{transform:translateX(6px)}

.own{margin:clamp(56px,7vw,96px) auto 0;max-width:40ch;text-align:center;font:600 var(--step-2)/1.3 var(--display);color:var(--cream);letter-spacing:-.025em}
@media (min-width:980px){.track.three{grid-template-columns:repeat(3,1fr)}}

.facts{list-style:none;margin:1.5rem 0 0;padding:0}
.facts li{padding:.75rem 0;border-top:1px solid var(--line);color:var(--cream-2);line-height:1.5}
.facts b{color:var(--cream)}
.quote-line{margin-top:1.75rem;font:600 var(--step-2)/1.25 var(--display);color:var(--cream);letter-spacing:-.025em;max-width:28ch}
.small-cta{margin-top:1.25rem;font-size:var(--step--1);color:var(--muted)}
.row-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:2rem}
.closing .row-cta{justify-content:flex-start}
.ep.has-poster .thumb .play{left:14px;top:14px;margin:0;width:38px;height:38px}
.ep.has-poster .play::before{border-width:7px 0 7px 11px;margin-left:3px}
/* 1.2: photos back in, diagrams float on top */
.row-vis.stack{position:relative;max-width:520px;padding-bottom:18%}
.stack>.ph,.stack>img,.stack>picture,.stack>video{display:block;aspect-ratio:4/5;border-radius:24px;overflow:hidden;width:82%;height:auto}
.stack>picture img{width:100%;height:100%;object-fit:cover}
.row.flip .stack>.ph,.row.flip .stack>picture{margin-left:auto}
.stack>.card{position:absolute;bottom:0;right:0;width:62%;background:var(--navy-3);border-radius:20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 1px var(--line-2)}
.row.flip .stack>.card{right:auto;left:0}
.stack>.card.radar{aspect-ratio:1;padding:10px}
.stack>.card.fan{padding:14px}
.stack>.card.levels-mini{padding:16px;gap:10px}
.stack .lv{padding:.75rem .9rem}.stack .lv b{font-size:1rem}
.media-pair{display:grid;gap:16px}
.media-pair>.ph:first-child{aspect-ratio:21/9;border-radius:24px}
.media-pair>.ph:last-child{aspect-ratio:16/10;width:70%;margin-left:auto;border-radius:24px}
.stack>img,.stack>video{width:82%!important;height:auto!important;aspect-ratio:4/5;border-radius:24px;object-fit:cover}
.row.flip .stack>img,.row.flip .stack>video{margin-left:auto}
.media-pair>img,.media-pair>video{border-radius:24px}
.media-pair>:first-child{aspect-ratio:21/9}
.media-pair>:last-child{aspect-ratio:16/10;width:70%!important;height:auto!important;margin-left:auto}
.two>*,.row>*{min-width:0}
.media-pair{grid-template-columns:minmax(0,1fr)}.media-pair>*,.stack>*{min-width:0}.ph .ph-in{max-width:min(30ch,90%)}
@media (max-width:600px){.stack>.card{width:72%}.stack .lv span{display:none}.stack .lv2{margin-left:6%}.stack .lv3{margin-left:12%}}

/* ================= 1.3: film-first foundation ================= */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body{background:#08090A}
.site-header:not(.scrolled){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.btn-lg{--h:58px;font-size:1.05rem;padding:0 1.8rem}
.btn-ghost{background:rgba(245,240,232,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.eyebrow-o{font:600 .8rem/1.2 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin:0 0 1rem}
.giant{font:700 clamp(2.5rem,1.2rem + 5.2vw,6.4rem)/.98 var(--display);letter-spacing:-.048em;color:var(--cream);margin:0;max-width:17ch;text-wrap:balance}

/* media treatment: one grade and grain over everything, stock and generated alike */
.reel>*,.bg>*,.film>*{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;border-radius:0}
/* 30 Sept (Rich): no darkening filter on pictures; colour is matched in the files themselves */
.reel video,.reel img,.bg video,.bg img,.film video,.film img,.rich-photo img,.portrait-sm img{filter:none}
/* 30 Sept (Rich): navy overlay removed from all pictures. .grade now only carries the grain (test, switch off by setting --grain-o to 0). Text over pictures gets a soft text-shadow, nothing on the picture itself. */
.grade{position:absolute;inset:0;z-index:1;pointer-events:none;background:none}
.grade~*{text-shadow:0 1px 2px rgba(8,9,10,.35),0 2px 28px rgba(8,9,10,.55)}
.grade::after,.film::after,.rich-photo::after,.portrait-sm::after{content:"";position:absolute;inset:-50%;background-image:var(--grain);opacity:var(--grain-o,.07);mix-blend-mode:overlay;pointer-events:none;animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.grade::after,.film::after,.rich-photo::after,.portrait-sm::after{animation:none}}

/* placeholders inside film slots: moving light instead of stripes, label bottom right */
.reel .ph,.bg .ph,.film .ph,.rich-photo .ph,.portrait-sm .ph{border:0;border-radius:0;min-height:0;background:
  radial-gradient(40% 55% at var(--x,30%) var(--y,40%),rgba(255,107,0,.22),transparent 70%),
  radial-gradient(60% 70% at 75% 65%,rgba(60,90,140,.35),transparent 70%),
  linear-gradient(160deg,#1B1D21,#08090A);animation:drift 14s ease-in-out infinite alternate;place-items:end end;padding:18px}
.reel .ph:nth-child(2){--x:70%;--y:30%}.reel .ph:nth-child(3){--x:45%;--y:70%}.reel .ph:nth-child(4){--x:20%;--y:25%}
@keyframes drift{from{background-position:0 0,0 0,0 0}to{background-position:8% -6%,-10% 8%,0 0}}
.reel .ph-in,.bg .ph-in,.film .ph-in,.rich-photo .ph-in,.portrait-sm .ph-in{justify-items:end;text-align:right;max-width:34ch;z-index:3;position:relative}
.reel .ph-in{margin-bottom:84px}

/* HERO */
.hero-film{position:relative;min-height:100svh;margin-top:-72px;display:grid;align-items:end;overflow:hidden;background:#08090A;isolation:isolate}
.reel{position:absolute;inset:0}
.reel>*{opacity:0;transition:opacity 1.4s ease}
.reel>:first-child{opacity:1}
.js .reel>*{opacity:0}.js .reel>.on{opacity:1}
.js .reel>.on{animation:kb 9s ease-out both}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-copy{position:relative;z-index:2;padding-block:140px clamp(72px,11vh,120px)}
.kicker-sm{font:600 .78rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-2);margin:0 0 1.4rem;opacity:.85}
.hero-film h1{font:700 clamp(2.9rem,1.2rem + 6.4vw,7.6rem)/.95 var(--display);letter-spacing:-.052em;color:var(--cream);max-width:13ch;margin:0;text-wrap:balance}
.hero-film .money{max-width:30ch}
.scroll-cue{position:absolute;z-index:2;left:50%;bottom:22px;width:24px;height:38px;margin-left:-12px;border-radius:14px;box-shadow:inset 0 0 0 1.5px rgba(245,240,232,.45)}
.scroll-cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--cream);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media (max-width:700px){.scroll-cue{display:none}.hero-copy{padding-bottom:96px}}

/* HIGHLIGHTS */
.highlights{padding-block:clamp(80px,10vw,140px) clamp(64px,8vw,110px);background:#0B0C0E}
.hl-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:clamp(28px,3vw,44px)}
.hl-head h2{font:700 clamp(2rem,1.4rem + 2.4vw,3.4rem)/1 var(--display);letter-spacing:-.04em;margin:0}
.hl-nav{display:flex;gap:10px}
.hl-btn{width:44px;height:44px;border-radius:50%;border:0;background:rgba(245,240,232,.1);color:var(--cream);font:600 1.1rem/1 var(--display);cursor:pointer;transition:background .2s}
.hl-btn:hover{background:rgba(245,240,232,.2)}
.no-js .hl-nav{display:none}
.hl-track{list-style:none;margin:0;display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:0 max(var(--gutter),calc((100vw - var(--max)) / 2)) 8px;scroll-padding-inline:max(var(--gutter),calc((100vw - var(--max)) / 2))}
.hl-track::-webkit-scrollbar{display:none}
.hl-card{flex:0 0 min(84vw,560px);scroll-snap-align:start;border-radius:28px;background:linear-gradient(180deg,#1C1E22,#101114);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:transform .4s var(--ease)}
.hl-card:hover{transform:translateY(-4px)}
.hl-card a{display:flex;flex-direction:column;height:clamp(460px,62vh,620px);padding:clamp(24px,2.6vw,36px);text-decoration:none;color:inherit;gap:20px}
.hl-t{font:500 clamp(1.15rem,1rem + .6vw,1.45rem)/1.35 var(--display);letter-spacing:-.015em;color:var(--cream-2);margin:0;max-width:26ch}
.hl-t b{color:var(--cream);font-weight:700}
.hl-vis{flex:1;display:grid;place-items:center;min-height:0}
.hl-vis.radar{aspect-ratio:auto;max-width:none}.hl-vis.radar svg{max-height:100%;width:auto;max-width:100%}
.hl-vis.fan{padding:0;background:none;box-shadow:none}
.hl-vis.levels-mini{background:none;box-shadow:none;padding:0;align-content:center;width:100%}
.keysvg{width:100%;max-width:420px;height:auto}.keysvg text{fill:var(--cream-2);font:600 12px var(--display);letter-spacing:.14em}

/* CHAPTERS */
.chapter{position:relative;padding-block:clamp(96px,12vw,180px)}
.chapter .ch-head{text-align:center;margin:0 auto clamp(40px,5vw,72px)}
.chapter .ch-head .giant{margin-inline:auto}
.chapter.full{min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate;padding-block:120px clamp(80px,10vw,140px)}
.chapter.full .bg{position:absolute;inset:0}
.chapter.full .ch-copy{position:relative;z-index:2}
.chapter.full .giant{max-width:15ch}
.ch-head{margin-bottom:clamp(36px,4vw,64px)}
.punch.rv{margin-top:2.2rem;max-width:34rem}
.punch.rv li{font-size:clamp(1.2rem,1rem + .8vw,1.6rem)}
.grow{--p:1;width:calc(86% + 14% * var(--p));margin-inline:auto;max-width:1680px}
.film{position:relative;aspect-ratio:21/9;border-radius:calc(28px * (1 - var(--p)) + 4px);overflow:hidden;background:#0B0C0E}
@media (max-width:760px){.film{aspect-ratio:4/5}.grow{width:100%;padding-inline:var(--gutter)}.film{border-radius:22px}}
.trio{list-style:none;padding-top:clamp(36px,4vw,64px);display:grid;gap:clamp(20px,3vw,48px);grid-template-columns:1fr}
@media (min-width:860px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio li{font:500 clamp(1.05rem,.95rem + .4vw,1.3rem)/1.45 var(--display);letter-spacing:-.01em;color:var(--cream-2);padding-top:1.1rem;border-top:1px solid var(--line-2)}
.trio li b{color:var(--cream)}
.trio.col{grid-template-columns:1fr!important;padding-top:0;align-content:center}
.duo{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px);align-items:center;padding-top:clamp(36px,4vw,64px)}
@media (min-width:860px){.duo{grid-template-columns:.8fr 1.2fr}}
.portrait-sm{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;max-width:420px}
.portrait-sm>*{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}

/* HOW */
.steps3{list-style:none;padding:0;margin:0;display:grid;gap:clamp(20px,2.4vw,32px);grid-template-columns:1fr}
@media (min-width:860px){.steps3{grid-template-columns:repeat(3,1fr)}}
.steps3 li{padding:clamp(28px,3vw,40px);border-radius:28px;background:linear-gradient(180deg,#1C1E22,#101114);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:.6rem;align-content:start}
.steps3 .big{font:700 clamp(4rem,3rem + 4vw,7rem)/.9 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--orange)}
.steps3 h3{font-size:var(--step-2);letter-spacing:-.025em;margin:.4rem 0 0}
.steps3 p{margin:0;color:var(--cream-2)}

/* RICH */
.rich-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,88px);align-items:center}
@media (min-width:980px){.rich-grid{grid-template-columns:.85fr 1.15fr}}
.rich-photo{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;max-width:560px}
.rich-photo>*{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
.tiles{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,36px) clamp(16px,2vw,28px)}
.tiles li{display:grid;gap:.35rem;padding-top:1rem;border-top:1px solid var(--line-2)}
.tiles .num{font:700 clamp(2.4rem,1.6rem + 3vw,4.2rem)/.95 var(--display);letter-spacing:-.05em;background:linear-gradient(90deg,var(--cream),#ffb27a);-webkit-background-clip:text;background-clip:text;color:transparent}
.tiles .lbl{font-size:.95rem;color:var(--cream-2);line-height:1.35}
.cv{margin-top:clamp(24px,2.6vw,36px);max-width:52ch;color:var(--cream-2)}
.cv b{color:var(--cream)}
.faq-grid .ch-head{margin-bottom:0}
.close .giant{max-width:18ch}
@media (max-width:700px){.reel .ph-in{display:none}}
/* highlights: training table and fishing */
.tsvg,.fsvg{width:100%;max-width:440px;height:auto;overflow:hidden}
.tsvg text,.fsvg text{fill:var(--cream-2);font:600 11px var(--display);letter-spacing:.14em}
.t-board{fill:#0B0C0E;stroke:var(--line-2)}
.t-bar{fill:rgba(245,240,232,.25);transform-box:fill-box;transform-origin:bottom;animation:barup 4s var(--ease) infinite}
.t-bar.b4{fill:var(--orange)}.b2{animation-delay:.15s}.b3{animation-delay:.3s}.b4{animation-delay:.45s}
@keyframes barup{0%,10%{transform:scaleY(.2)}40%,85%{transform:scaleY(1)}100%{transform:scaleY(.2)}}
.t-person circle,.t-person path{fill:#23385a}
.t-person:nth-of-type(2) circle,.t-person:nth-of-type(2) path{fill:#2b4368}
.t-coach circle,.t-coach path{fill:var(--orange)}
.t-arm{fill:none!important;stroke:var(--orange);stroke-width:8;stroke-linecap:round;transform-origin:322px 136px;animation:point 4s ease-in-out infinite}
@keyframes point{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
.t-table{fill:#1C1E22;stroke:var(--line-2)}
.t-bub rect{fill:var(--cream)}.t-bub circle{fill:#101114}
.t-bub{opacity:0;animation:bub 6s ease-in-out infinite}
.u2{animation-delay:2s}.u3{animation-delay:4s}
@keyframes bub{0%,4%{opacity:0;transform:translateY(6px)}10%,28%{opacity:1;transform:none}34%,100%{opacity:0}}
.t-spark path{stroke:var(--orange);stroke-width:3;stroke-linecap:round;fill:none}
.t-spark{opacity:0;animation:spark 6s ease-in-out infinite 1s}
@keyframes spark{0%,40%{opacity:0}48%,60%{opacity:1}70%,100%{opacity:0}}
.f-sun{fill:rgba(255,107,0,.18)}
.f-dock{fill:#2b4368}.f-post{stroke:#2b4368;stroke-width:6}
.f-coach circle,.f-coach path{fill:var(--orange)}
.f-arm{fill:none!important;stroke:var(--orange);stroke-width:7;stroke-linecap:round}
.f-kid circle,.f-kid path{fill:var(--cream-2)}
.f-rod{stroke:var(--cream);stroke-width:3.5;stroke-linecap:round;fill:none;transform-origin:122px 158px;animation:rod 5s ease-in-out infinite}
.f-line{stroke:rgba(245,240,232,.5);stroke-width:1.2;fill:none;transform-origin:122px 158px;animation:rod 5s ease-in-out infinite}
@keyframes rod{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
.f-bob circle{fill:var(--orange)}
.f-bob{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.f-fish{fill:var(--orange);offset-path:path("M300 214 Q316 150 336 214");offset-rotate:auto;animation:jump 5s ease-in-out infinite;opacity:0}
@keyframes jump{0%,55%{offset-distance:0%;opacity:0}58%{opacity:1}80%{offset-distance:100%;opacity:1}82%,100%{offset-distance:100%;opacity:0}}
.f-water path{fill:#1E2024}
.f-water{animation:wave 6s linear infinite}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(40px)}}
@media (prefers-reduced-motion:reduce){.tsvg *,.fsvg *{animation:none!important}.t-bub.u1{opacity:1}.f-fish{display:none}}

/* gauge: stage-specific next step */
.stage-cta{margin-top:clamp(24px,3vw,40px);display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;padding:clamp(20px,2.4vw,32px);border-radius:24px;background:linear-gradient(90deg,rgba(255,107,0,.12),rgba(255,107,0,.03));box-shadow:inset 0 0 0 1px rgba(255,107,0,.35)}
.stage-cta p{margin:0;font:500 var(--step-1)/1.4 var(--display);color:var(--cream);max-width:46ch}
.stage-cta b{color:var(--orange)}
.stage{cursor:pointer}
.sub-sm{margin-top:.8rem;color:var(--cream-2);font-size:var(--step-0)}
.lede-lg{margin-top:1.2rem;font:500 var(--step-1)/1.45 var(--display);color:var(--cream-2);max-width:40ch}
#contact .giant{font-size:clamp(2.2rem,1.4rem + 3vw,4rem)}

/* ===== 1.5 palette (Rich, 30 Sept 2026): Apple-style alternation =====
   Dark graphite sections where film has to glow, warm light sections where people read.
   Orange stays the single accent. Navy retired on the site (too close to Unreal Personas).
   This block overrides the tokens above; delete it to return to 1.4. */
:root{
  --paper:#F3F2EE;--paper-2:#FFFFFF;--ink:#16171A;--ink-2:#45484E;--ink-3:#6E7178;
}
html,body{background:var(--navy)}
.site-header:not(.scrolled) .nav a,.site-header:not(.scrolled) a:not(.btn){text-shadow:0 1px 10px rgba(8,9,10,.55)}

/* light sections: flip the text tokens inside them */
#content,#how,#follow,#faq{
  background:var(--paper);color:var(--ink-2);color-scheme:light;
  --cream:var(--ink);--cream-2:var(--ink-2);--muted:var(--ink-3);
  --line:rgba(22,23,26,.10);--line-2:rgba(22,23,26,.18);
}
#content h1,#content h2,#content h3,#how h2,#how h3,#follow h2,#follow h3,#faq h2,#faq h3{color:var(--ink)}
#how .steps3 li{background:var(--paper-2);box-shadow:0 1px 0 rgba(22,23,26,.04),0 12px 40px -24px rgba(22,23,26,.25)}
#follow .panel{background:var(--paper-2);box-shadow:0 12px 40px -28px rgba(22,23,26,.3)}
#follow .ep .thumb{background:#E6E4DF}
#follow .ep .poster{background:linear-gradient(160deg,#2a2d33,#16171a);color:#F5F0E8}
#follow .ep .play{background:rgba(22,23,26,.7)}
#faq{background:var(--paper)}
#content .film{background:#E6E4DF}
#content .grow{--p:0}

/* text on pictures: soft fade behind the copy only, never across the whole frame */
.hero-film .grade{background:linear-gradient(90deg,rgba(8,9,10,.62) 0%,rgba(8,9,10,.34) 34%,rgba(8,9,10,0) 62%)}
.chapter.full .grade{background:linear-gradient(90deg,rgba(8,9,10,.58) 0%,rgba(8,9,10,.3) 36%,rgba(8,9,10,0) 64%)}
@media (max-width:760px){
  .hero-film .grade,.chapter.full .grade{background:linear-gradient(0deg,rgba(8,9,10,.72) 0%,rgba(8,9,10,.42) 42%,rgba(8,9,10,.08) 68%,rgba(8,9,10,.25) 100%)}
}
.hero-film{background:var(--navy-3)}
.hero-film .kicker-sm{color:#F5F0E8;opacity:1}
.film{background:var(--navy-2)}

/* move subjects away from the copy */
.chapter.full[aria-labelledby="h-problem"] .bg img{object-position:72% 40%}
@media (min-width:761px){.chapter.full[aria-labelledby="h-problem"] .bg img{transform:scaleX(-1)}}

/* closing: building mirrored so the sky sits behind the copy; dark text on the sky (desktop) */
@media (min-width:761px){
  .chapter.full.close .bg img{transform:scaleX(-1);object-position:50% 60%}
  .chapter.full.close .grade{background:linear-gradient(90deg,rgba(243,242,238,.55) 0%,rgba(243,242,238,.2) 40%,rgba(243,242,238,0) 60%)}
  .chapter.full.close .giant{color:var(--ink);text-shadow:none}
  .chapter.full.close .grade~*{text-shadow:none}
}

/* speaking: move Rich away from the headline on wide screens (1.7) */

/* phones get their own tall crop of RICH-01 (upscaled 2x), instead of a thin slice of the wide one */

/* RICH-03 on phones: its own 3:2 crop so all three people stay in (1.8) */


/* 1.9 Rich photos: speaking slider, training film, how-it-works photo */
#speaking .slides>*{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
#speaking .slides:not(.live)>:first-child,#speaking .slides>.on{opacity:1}
#speaking .slides img{object-position:50% 30%}
#speaking .slides img:nth-child(2){object-position:60% 30%}
@media (max-width:760px){
  #speaking .slides img{object-position:53% 30%}
  #speaking .slides img:nth-child(2){object-position:90% 30%}
}
.sl-dots{position:absolute;z-index:3;right:clamp(20px,4vw,56px);bottom:clamp(28px,4vw,56px);display:flex;gap:8px}
.sl-dots button{width:28px;height:3px;padding:0;border:0;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer;position:relative}
.sl-dots button::after{content:"";position:absolute;inset:-12px -2px}
.sl-dots button[aria-current="true"]{background:#fff}
.sl-dots button:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (max-width:760px){.sl-dots{right:auto;left:var(--gutter);top:96px;bottom:auto}}
#training .grow .film img{object-position:50% 12%}
@media (max-width:760px){#training .grow .film{aspect-ratio:3/2;background:#0B0C0E}#training .grow .film img{opacity:1;object-position:72% 20%}}
.how-photo{aspect-ratio:21/9;border-radius:22px;overflow:hidden;margin:0 auto clamp(40px,5vw,72px);max-width:1180px;background:#E9E7E1}
.how-photo img{object-position:30% 28%}
@media (max-width:760px){.how-photo{aspect-ratio:4/3;border-radius:18px}.how-photo img{object-position:12% 30%}}

/* 2.0 motion further down the page */
#contact{position:relative;isolation:isolate;overflow:hidden}
#contact .contact-film{position:absolute;inset:0;z-index:-1;opacity:.22;pointer-events:none}
#contact .contact-film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--navy-3) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,var(--navy-3) 100%)}
.portrait-sm video{display:block}
/* slow drift on the photos of Rich, so the lower page keeps moving */
@keyframes drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(-1.2%,-.6%,0)}}
@keyframes drift-s{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:no-preference){
  #speaking .slides>.on{animation:drift-s 7.5s ease-out both}
  .how-photo img,#training .grow .film img,.rich-photo img{animation:drift 18s ease-in-out infinite alternate}
}
.how-photo,.rich-photo{overflow:hidden}