/* =====================================================================
   AFTERBURNER – shared design system
   Brand fonts: Space Grotesk (display) + Inter (body), per Brand Guide 2026.
   Legacy Stratum + Open Sans stack retired. Accent: #FF4B22
   ===================================================================== */

:root{
  --bg:#0A0A0A;
  --bg-2:#101010;
  --surface:#151514;
  --surface-2:#1B1B19;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --text:#F6F5F2;
  --muted:#A4A4A0;
  --faint:#84847E;
  --orange:#FF4B22;
  --orange-d:#E13C15;
  --orange-soft:rgba(255,75,34,.10);
  --orange-glow:rgba(255,75,34,.55);
  --maxw:1340px;
  --gut:clamp(20px,4.4vw,64px);
  --ease:cubic-bezier(.2,1,.22,1);
  --stratum:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--orange);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer}
section{position:relative;scroll-margin-top:96px}

/* ---------- type ---------- */
.stratum,h1,h2,h3,h4{font-family:var(--stratum);font-weight:700;text-transform:uppercase;line-height:.98;letter-spacing:-.01em}
h1{font-size:clamp(2.9rem,8vw,7.2rem)}
h2{font-size:clamp(2rem,5vw,4rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.9rem)}
p{text-wrap:pretty}
.lbl{font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.lbl .o{color:var(--orange)}
.kicker{display:inline-flex;align-items:center;gap:13px;font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.kicker::before{content:"";width:34px;height:2px;background:var(--orange)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.pad{padding-top:clamp(72px,9vw,140px);padding-bottom:clamp(72px,9vw,140px)}
.rule{height:1px;background:var(--line)}

/* ---------- reveal animations ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.left{transform:translateX(-34px)}
.js .rv.left.in{transform:none}
.js .rv.scale{transform:scale(.95)}
.js .rv.scale.in{transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}.js .rv.d5{transition-delay:.40s}
/* clip reveal for headings */
.js .clip{overflow:hidden;display:inline-block;vertical-align:top}
.js .clip>span{display:inline-block;transform:translateY(108%);transition:transform 1s var(--ease)}
.js .clip.in>span{transform:none}

/* scroll progress */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--orange);z-index:1200;box-shadow:0 0 10px var(--orange-glow);transition:width .1s linear}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:16px 28px;transition:.4s var(--ease);border-radius:0}
.btn .a{transition:transform .4s var(--ease)}
.btn:hover .a{transform:translateX(5px)}
.btn-fill{background:var(--orange);color:#fff;box-shadow:0 0 0 rgba(255,75,34,0)}
.btn-fill:hover{background:var(--orange-d);transform:translateY(-2px);box-shadow:0 14px 44px -10px var(--orange-glow)}
.btn-line{border:1px solid var(--line-2);color:var(--text)}
.btn-line:hover{border-color:var(--text);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.btn-light{background:var(--text);color:var(--bg)}
.btn-light:hover{transform:translateY(-2px)}

/* ============ NAV ============ */
header{position:fixed;inset:0 0 auto 0;z-index:1100;border-bottom:1px solid transparent;transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s,transform .45s var(--ease)}
header.hidebar{transform:translateY(-102%)}
header.solid{background:rgba(10,10,10,.82);backdrop-filter:blur(14px) saturate(150%);border-bottom-color:var(--line)}
.nav{max-width:var(--maxw);margin:0 auto;padding:20px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav .logo img{height:44px;width:auto;display:block;transition:height .4s var(--ease)}
header.solid .nav .logo img{height:36px}
.nav-mid{display:flex;gap:2px}
.nav-mid a{font-family:var(--body);font-weight:600;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:10px 12px;position:relative;transition:color .3s;white-space:nowrap}
.nav-mid a:hover{color:var(--text)}
.nav-mid a.active{color:var(--text)}
.nav-mid a::after{content:"";position:absolute;left:16px;right:16px;bottom:2px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-mid a:hover::after{transform:scaleX(1)}
.nav-mid a.active::after{transform:scaleX(1)}
.nav-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:700;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;padding:13px 24px;background:var(--orange);color:#fff;border-radius:0;transition:.35s var(--ease);white-space:nowrap}
.nav-cta:hover{background:var(--orange-d);box-shadow:0 10px 36px -10px var(--orange-glow)}
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{width:26px;height:2px;background:var(--text);transition:.35s var(--ease)}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#mob{position:fixed;inset:0;z-index:1050;background:var(--bg-2);padding:104px var(--gut) 40px;transform:translateY(-101%);visibility:hidden;transition:transform .55s var(--ease),visibility .55s;display:flex;flex-direction:column}
#mob.open{transform:none;visibility:visible}
#mob a{font-family:var(--stratum);font-size:clamp(1.9rem,8vw,2.7rem);text-transform:uppercase;padding:15px 0;border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:baseline;color:var(--text)}
#mob a i{font-family:var(--body);font-style:normal;font-weight:700;font-size:.78rem;color:var(--orange)}

/* ============ PAGE HERO (sub-pages) ============ */
.phero{padding:190px 0 clamp(54px,7vw,96px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phero .mark-bg{position:absolute;right:-50px;top:50%;transform:translateY(-50%);width:min(460px,44vw);opacity:.06;pointer-events:none}
.phero .kicker{margin-bottom:28px}
.phero h1{font-size:clamp(3rem,7.6vw,6.6rem);max-width:18ch}
.phero h1 .o{color:var(--orange)}
.phero .sub{margin-top:30px;max-width:58ch;color:var(--muted);font-size:clamp(1.05rem,1.4vw,1.24rem)}
.phero .crumbs{font-family:var(--body);font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:32px}
.phero .crumbs a:hover{color:var(--orange)}
.phero .crumbs span{color:var(--orange)}

/* ============ HOME HERO (split) ============ */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1.06fr .94fr;background:var(--bg);overflow:hidden}
.hero-left{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:124px clamp(36px,4vw,72px) 56px max(var(--gut),calc(50vw - var(--maxw)/2 + var(--gut)))}
.hero-right{position:relative;overflow:hidden;background:#101012}
.hero-right img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.06);animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1) translateX(0)}to{transform:scale(1.07) translateX(-1.5%)}}
.hero-right::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 9%,rgba(10,10,10,.9) 22%,rgba(10,10,10,.45) 40%,transparent 58%)}
.hero .topline{display:flex;gap:18px;align-items:center;margin-bottom:30px;flex-wrap:wrap}
.hero h1{font-size:clamp(3rem,5.6vw,6.2rem);letter-spacing:-.005em;text-shadow:0 1px 26px rgba(0,0,0,.55)}
.hero h1 .o{color:var(--orange);text-shadow:0 0 60px var(--orange-glow)}
.hero h1 .ovf{display:block;overflow:hidden}
.js .hero h1 .ovf>span{display:block;transform:translateY(106%);animation:rise 1.1s var(--ease) forwards}
.js .hero h1 .ovf:nth-child(2)>span{animation-delay:.12s}
.js .hero h1 .ovf:nth-child(3)>span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.hero-sub{max-width:46ch;margin-top:22px;color:var(--muted);font-size:clamp(1.04rem,1.3vw,1.2rem);line-height:1.55}
.hero-sub b{color:var(--text);font-weight:600}
.js .hero-sub,.js .hero-actions,.js .hero-proof{opacity:0;animation:fade 1s var(--ease) .5s forwards}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-proof{display:flex;margin-top:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero-proof .pf{padding:18px 24px 18px 0;margin-right:24px;border-right:1px solid var(--line)}
.hero-proof .pf:last-child{border-right:none;margin-right:0}
.hero-proof .pv{font-family:var(--stratum);font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1;color:var(--text)}
.hero-proof .pv .u{color:var(--orange)}
.hero-proof .pl{margin-top:6px;font-family:var(--body);font-weight:600;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
.hero-scroll{position:absolute;left:max(var(--gut),calc(50vw - var(--maxw)/2 + var(--gut)));bottom:26px;z-index:3;font-family:var(--body);font-weight:600;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}
.hero-scroll .ln{width:42px;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.hero-scroll .ln::after{content:"";position:absolute;inset:0;width:40%;background:var(--orange);animation:sweep 1.9s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}

/* ============ CLIENTS MARQUEE ============ */
.clients{padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.clients .cap{text-align:center;font-family:var(--body);font-weight:700;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:22px}
.mq{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;gap:54px;padding-right:54px;white-space:nowrap;animation:mq 44s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-track span{font-family:var(--stratum);font-size:1.4rem;color:#52524e;transition:color .3s}
.mq-track span:hover{color:var(--text)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ SECTION HEADER ============ */
.sh{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(44px,5.5vw,74px)}
.sh .kicker{margin-bottom:22px}
.sh h2{max-width:18ch}
.sh h2 .o{color:var(--orange)}
.sh .lead{color:var(--muted);font-size:1.05rem;max-width:44ch;justify-self:end}

/* ============ MANIFESTO ============ */
.manifesto p{font-family:var(--stratum);font-size:clamp(1.7rem,4.2vw,3.4rem);line-height:1.12;text-transform:uppercase;max-width:1040px}
.manifesto .dim{color:var(--faint)}
.manifesto .o{color:var(--orange)}
.manifesto .by{margin-top:42px;font-family:var(--body);font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:14px}
.manifesto .by::before{content:"";width:34px;height:2px;background:var(--line-2)}

/* ============ EXPERTISE LIST ============ */
.exp{border-top:1px solid var(--line)}
.exp-row{display:grid;grid-template-columns:70px 1.1fr 1.6fr;gap:30px;align-items:center;padding:34px 6px;border-bottom:1px solid var(--line);position:relative;cursor:default;color:inherit}
.exp-row .n{font-family:var(--stratum);font-size:1rem;color:var(--faint)}
.exp-row h3{font-size:clamp(1.4rem,2.7vw,2.2rem)}
.exp-row p{color:var(--muted);font-size:1rem}

/* ============ METHOD (FLEX) – scroll driven ============ */
.method{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flexwrap{display:grid;grid-template-columns:4fr 8fr;gap:clamp(34px,5vw,84px);align-items:start}
.flexside{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ftabs{display:flex;flex-direction:column}
.ftab{display:flex;align-items:baseline;gap:16px;padding:18px 0 18px 22px;border-left:2px solid var(--line);position:relative;transition:.4s var(--ease);text-align:left;width:100%}
.ftab::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.ftab .ti{font-family:var(--stratum);font-size:.9rem;color:var(--faint);transition:color .4s}
.ftab .tn{font-family:var(--stratum);font-size:clamp(1.4rem,2.6vw,2rem);color:var(--faint);transition:color .4s}
.ftab.on .tn{color:var(--text)}.ftab.on .ti{color:var(--orange)}.ftab.on::before{transform:scaleY(1)}
.ftab:hover .tn{color:var(--muted)}.ftab.on:hover .tn{color:var(--text)}
.fsteps{display:flex;flex-direction:column}
.fstep{padding:clamp(40px,6vw,76px) 0;border-top:1px solid var(--line);position:relative;transition:opacity .5s var(--ease)}
.fsteps .fstep:first-child{border-top:none;padding-top:0}
.fstep .bn{font-family:var(--stratum);font-size:clamp(4rem,9vw,7rem);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--line-2);margin-bottom:16px}
.fstep .ph{font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:16px}
.fstep h3{font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:18px;max-width:20ch}
.fstep p{color:var(--muted);font-size:1.12rem;line-height:1.7;max-width:56ch}
.fstep .pull{margin-top:26px;padding:22px 26px;background:var(--surface);border-left:2px solid var(--orange);font-family:var(--stratum);font-size:1.15rem;text-transform:uppercase;line-height:1.2;color:var(--text)}
.mfoot{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:64px;padding-top:48px;border-top:1px solid var(--line)}
.mfoot .k{font-family:var(--body);font-weight:700;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.mfoot h3{font-family:var(--stratum);font-size:1.2rem;text-transform:uppercase;margin-bottom:9px}
.mfoot p{color:var(--muted);font-size:.95rem}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(38px,5vw,64px) 46px;border-right:1px solid var(--line)}
.stat:first-child{padding-left:0}
.stat:last-child{border-right:none;padding-right:0}
.stat .v{font-family:var(--stratum);font-size:clamp(2.2rem,3.6vw,3.5rem);line-height:1;white-space:nowrap}
.stat .v .u{color:var(--orange)}
.stat .l{margin-top:13px;font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ============ CARDS ============ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--surface);border:1px solid var(--line);padding:32px 28px 28px;display:flex;flex-direction:column;min-height:300px;position:relative;overflow:hidden;transition:transform .45s var(--ease),border-color .45s,background .45s;border-radius:3px}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%),var(--orange-soft),transparent 55%);opacity:0;transition:opacity .5s;pointer-events:none}
.card:hover{transform:translateY(-6px);border-color:var(--line-2);background:var(--surface-2)}
.card:hover::after{opacity:1}
.card.feat{border-top:3px solid var(--orange)}
.card .ct{display:flex;justify-content:space-between;align-items:center;margin-bottom:auto;padding-bottom:28px;position:relative;z-index:1}
.card .tag{font-family:var(--body);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.card.feat .tag{color:var(--orange)}
.card .dur{font-family:var(--stratum);font-size:.95rem;color:var(--orange)}
.card h3{font-size:1.42rem;margin-bottom:14px;line-height:1.04;position:relative;z-index:1}
.card p{color:var(--muted);font-size:.96rem;flex:1;position:relative;z-index:1}
.card .cf{margin-top:24px;display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text);position:relative;z-index:1}
.card .cf .a{color:var(--orange);transition:transform .4s var(--ease)}
.card:hover .cf .a{transform:translateX(5px)}

/* ============ SERVICE TILES (home) ============ */
.svcs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.svc{position:relative;border:1px solid var(--line);background:var(--surface);min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;padding:38px;overflow:hidden;transition:.5s var(--ease);border-radius:3px}
.svc::after{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),var(--orange-soft),transparent 55%);opacity:0;transition:opacity .5s;pointer-events:none}
.svc:hover{border-color:var(--orange);transform:translateY(-6px)}
.svc:hover::after{opacity:1}
.svc .ghost{position:absolute;right:-10px;top:-26px;font-family:var(--stratum);font-size:9rem;color:rgba(255,255,255,.025);line-height:1;pointer-events:none}
.svc .tn{font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:auto;position:relative;z-index:1}
.svc h3{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:14px;line-height:1.02;position:relative;z-index:1}
.svc p{color:var(--muted);font-size:1rem;margin-bottom:22px;max-width:42ch;position:relative;z-index:1}
.svc .cf{font-family:var(--body);font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;gap:9px;align-items:center;position:relative;z-index:1}
.svc .cf .a{color:var(--orange);transition:transform .4s var(--ease)}
.svc:hover .cf .a{transform:translateX(5px)}
/* method strip */
.mstrip{margin-top:18px;border:1px solid var(--line);background:linear-gradient(100deg,var(--surface),var(--bg-2));padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;border-radius:3px;transition:.5s var(--ease)}
.mstrip:hover{border-color:var(--line-2)}
.mstrip .mt{font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.mstrip h3{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.04}
.mstrip p{color:var(--muted);font-size:.98rem;max-width:48ch;margin-top:8px}

/* ============ TEAM ============ */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.team.wide{grid-template-columns:repeat(4,1fr)}
.mbr{position:relative}
.mbr .pic{position:relative;aspect-ratio:4/4.7;overflow:hidden;background:linear-gradient(180deg,#17120f,#0c0c0c);border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center}
.mbr .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(1) contrast(1.04);transition:filter .5s,transform .7s var(--ease);z-index:1}
.mbr:hover .pic img{filter:grayscale(1) contrast(1.08);transform:scale(1.04)}
.mbr .pic .init{font-family:var(--stratum);font-size:3.4rem;color:#2a221d;z-index:0}
.mbr .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(8,8,8,.55) 58%,rgba(8,8,8,.96));z-index:2;transition:background .5s var(--ease)}
.mbr:hover .pic::after{background:linear-gradient(180deg,transparent 10%,rgba(8,8,8,.6) 40%,rgba(8,8,8,.97) 72%)}
.mbr .role{position:absolute;top:12px;left:12px;z-index:3;font-family:var(--body);font-weight:700;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);border:1px solid rgba(255,75,34,.4);background:rgba(8,8,8,.55);padding:4px 8px;border-radius:2px}
.mbr .info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px;text-shadow:0 1px 14px rgba(0,0,0,.85)}
.mbr .nm{font-family:var(--stratum);font-size:1.18rem;text-transform:uppercase;line-height:1}
.mbr .rl{font-family:var(--body);font-weight:600;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);margin-top:7px}
.mbr .bio{max-height:0;overflow:hidden;opacity:0;color:#E7E6E2;font-size:.84rem;line-height:1.55;margin-top:0;transition:max-height .6s var(--ease),opacity .5s,margin-top .5s}
.mbr:hover .bio{max-height:240px;opacity:1;margin-top:10px}
.mbr.join{background:var(--orange);padding:24px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;aspect-ratio:4/4.7;border-radius:3px}
.mbr.join h3{font-size:1.42rem;line-height:1.04}
.mbr.join .btn{align-self:flex-start;background:#0c0c0c;color:#fff}

/* ============ REVIEWS ============ */
.revs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.rev{background:var(--surface);border:1px solid var(--line);padding:38px;transition:.45s var(--ease);border-radius:3px}
.rev:hover{border-color:var(--line-2);transform:translateY(-4px)}
.rev .st{color:var(--orange);letter-spacing:.25em;font-size:.82rem;margin-bottom:22px}
.rev{position:relative;overflow:hidden}
.rev .qm{position:absolute;top:8px;right:22px;font-family:var(--stratum);font-size:5.5rem;line-height:1;color:var(--orange);opacity:.12;pointer-events:none}
.rev p{font-family:var(--body);font-weight:400;font-size:1.02rem;line-height:1.65;color:var(--muted);position:relative;z-index:1}
.rev .by{margin-top:24px;font-family:var(--body);font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.rev .by .c{color:var(--faint);display:block;margin-top:4px;font-weight:400}

/* ============ CTA STRIP ============ */
.cta{padding:clamp(80px,12vw,170px) 0;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cta .mark-bg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,60vw);opacity:.05;pointer-events:none}
.cta-inner{position:relative;z-index:2}
.cta h2{font-size:clamp(2.6rem,7.5vw,6rem)}
.cta h2 .o{color:var(--orange);text-shadow:0 0 50px var(--orange-glow)}
.cta p{max-width:48ch;margin:24px auto 36px;color:var(--muted);font-size:1.12rem}
.cta .acts{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ============ CONTACT ============ */
.cgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,88px);align-items:start}
.ci .it{padding:24px 0;border-bottom:1px solid var(--line)}
.ci .it:first-child{border-top:1px solid var(--line)}
.ci .k{font-family:var(--body);font-weight:700;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.ci .v{font-family:var(--stratum);font-size:clamp(1.2rem,2.2vw,1.6rem);text-transform:uppercase;transition:color .3s}
.ci a.v:hover{color:var(--orange)}
.ci .s{color:var(--muted);font-size:.92rem;margin-top:5px}
form .fld{margin-bottom:20px}
form label{display:block;font-family:var(--body);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
form input,form textarea,form select{width:100%;background:var(--surface);border:1px solid var(--line);padding:15px 16px;color:var(--text);font-family:var(--body);font-size:1rem;border-radius:2px;transition:border-color .3s,background .3s}
form input:focus,form textarea:focus,form select:focus{outline:none;border-color:var(--orange);background:var(--surface-2)}
form textarea{resize:vertical;min-height:120px}
form .two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
form .btn{width:100%;justify-content:center;margin-top:4px}
.fnote{font-family:var(--body);font-size:.7rem;color:var(--faint);margin-top:15px;text-align:center}

/* ============ FOOTER ============ */
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:64px 0 32px}
.ftop{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;padding-bottom:44px;border-bottom:1px solid var(--line)}
.fbr{max-width:330px}
.fbr img{height:44px;width:auto;max-width:100%;margin-bottom:20px}
.fbr p{color:var(--muted);font-size:.93rem}
.fcols{display:flex;gap:62px;flex-wrap:wrap}
.fcol h6{font-family:var(--body);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:15px}
.fcol a{display:block;color:var(--muted);font-size:.93rem;padding:6px 0;transition:color .3s}
.fcol a:hover{color:var(--orange)}
.fbot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:24px;font-family:var(--body);font-weight:600;font-size:.68rem;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .nav-mid,.nav-cta{display:none}
  .burger{display:flex}
  .team,.team.wide{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:880px){
  .sh{grid-template-columns:1fr}.sh .lead{justify-self:start}
  .flexwrap{grid-template-columns:1fr}
  .flexside{position:static;min-height:0}
  .flexloop{max-width:340px;margin:8px auto 28px}
  .cards,.svcs,.revs{grid-template-columns:1fr}
  .mfoot{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr}
  .exp-row{grid-template-columns:46px 1fr;gap:14px}
  .exp-row p{display:none}
  .hero-stat{display:none}
  .hero-scroll{display:none}
}
@media(max-width:560px){
  .team,.team.wide{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid var(--line);padding-left:0;padding-right:0}
  form .two{grid-template-columns:1fr}
}
@media(max-width:980px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-left{padding:124px var(--gut) 54px;justify-content:flex-start}
  .hero-right{min-height:56vh;order:2}
  .hero-right img{object-position:50% 15%}
  .hero-right::before{background:linear-gradient(0deg,var(--bg),transparent 44%)}
  .hero-scroll{display:none}
}

/* ============ MOBILE HERO HEADLINE SAFETY ============ */
@media(max-width:600px){
  .hero h1{font-size:clamp(2.5rem,11vw,3.4rem)}
  .hero h1 .ovf{overflow:visible}
  .js .hero h1 .ovf>span{transform:none;animation:none}
  .hero-proof{flex-wrap:wrap;gap:6px 0}
  .hero-proof .pf{padding:12px 16px 12px 0;margin-right:16px}
  .hero-left{padding-top:112px}
  .phero h1{font-size:clamp(1.55rem,5.6vw,2.4rem);max-width:100%;white-space:normal;overflow-wrap:break-word}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  .js .flexloop.rv{opacity:1;transform:none}
  .js .clip>span{transform:none}
  .js .hero h1 .ovf>span{transform:none}
  .js .hero-sub,.js .hero-actions,.js .hero-stat{opacity:1;animation:none}
}

/* accessibility focus */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}

/* ============ REVIEWS PAGE extras ============ */
.rev-feature{position:relative;overflow:hidden;border:1px solid var(--line);border-left:3px solid var(--orange);background:linear-gradient(120deg,var(--surface),var(--bg-2));padding:clamp(38px,5vw,70px);border-radius:3px;margin-bottom:18px}
.rev-feature .qm{position:absolute;top:0;right:34px;font-family:var(--stratum);font-size:13rem;line-height:.8;color:var(--orange);opacity:.08;pointer-events:none}
.rev-feature .st{color:var(--orange);letter-spacing:.25em;font-size:.9rem;margin-bottom:22px}
.rev-feature p{font-family:var(--stratum);font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.12;text-transform:uppercase;max-width:24ch;position:relative;z-index:1}
.rev-feature .by{margin-top:28px;font-family:var(--body);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.rev-feature .by .c{color:var(--faint);display:block;margin-top:4px;font-weight:400}
.revs.cols3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.revs.cols3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.revs.cols3{grid-template-columns:1fr}}

/* ============ REVIEWS: trust bar + masonry ============ */
.trustbar{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface)}
.trustbar .tb{padding:26px 24px;text-align:center;border-right:1px solid var(--line)}
.trustbar .tb:last-child{border-right:none}
.trustbar .tb .s{color:var(--orange);letter-spacing:.22em;font-size:.82rem}
.trustbar .tb .v{font-family:var(--stratum);font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:1;margin-top:10px}
.trustbar .tb .v .u{color:var(--orange)}
.trustbar .tb .l{font-family:var(--body);font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:9px}
.revmasonry{column-count:3;column-gap:18px}
.revmasonry .rev{break-inside:avoid;width:100%;margin:0 0 18px}
.revmasonry .rev.big{background:linear-gradient(120deg,rgba(255,75,34,.08),var(--surface));border-left:3px solid var(--orange)}
.revmasonry .rev.big p{font-family:var(--stratum);text-transform:uppercase;font-size:1.5rem;line-height:1.14}
@media(max-width:980px){.trustbar{grid-template-columns:repeat(2,1fr)}.trustbar .tb:nth-child(2){border-right:none}.trustbar .tb:nth-child(-n+2){border-bottom:1px solid var(--line)}.revmasonry{column-count:2}}
@media(max-width:600px){.trustbar{grid-template-columns:1fr}.trustbar .tb{border-right:none;border-bottom:1px solid var(--line)}.revmasonry{column-count:1}}

/* visually-hidden (a11y) – present for screen readers, invisible on screen */
.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}
/* skip link (a11y) */
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--orange);color:#fff;padding:12px 18px;font-family:var(--body);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;border-radius:0 0 4px 0}
.skip:focus{left:0}

/* hide watermark */
.mark-bg{display:none}

/* ===================== POLISH V2 ===================== */
/* film grain texture */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.028;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* custom scrollbar */
::-webkit-scrollbar{width:11px;background:var(--bg)}
::-webkit-scrollbar-thumb{background:#262624;border-radius:6px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--orange)}
html{scrollbar-color:#262624 var(--bg);scrollbar-width:thin}

/* button shine sweep */
.btn{position:relative;overflow:hidden}
.btn-fill::before{content:"";position:absolute;top:0;left:-70%;width:42%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn-fill:hover::before{left:130%}

/* card hover glow */
.card:hover,.svc:hover{box-shadow:0 18px 50px -22px rgba(0,0,0,.8),0 0 0 1px rgba(255,75,34,.22)}
.rev:hover{box-shadow:0 14px 40px -20px rgba(0,0,0,.8)}

/* hero trust microcopy */
.hero-trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;font-family:var(--body);font-weight:600;font-size:.74rem;letter-spacing:.05em;color:var(--muted)}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange)}

/* mobile menu stagger */
#mob a{opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
#mob.open a{opacity:1;transform:none}
#mob.open a:nth-child(1){transition-delay:.08s}#mob.open a:nth-child(2){transition-delay:.13s}#mob.open a:nth-child(3){transition-delay:.18s}#mob.open a:nth-child(4){transition-delay:.23s}#mob.open a:nth-child(5){transition-delay:.28s}#mob.open a:nth-child(6){transition-delay:.33s}#mob.open a:nth-child(7){transition-delay:.38s}

/* method timeline rail */
.fsteps{position:relative;padding-left:30px}
.fsteps::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,var(--orange),var(--line) 30%,var(--line) 70%,transparent)}
.fstep::after{content:"";position:absolute;left:-34px;top:clamp(46px,6vw,82px);width:9px;height:9px;border-radius:50%;background:var(--bg-2);border:2px solid var(--orange);box-shadow:0 0 12px var(--orange-glow)}
.fsteps .fstep:first-child::after{top:6px}
@media(max-width:880px){.fsteps{padding-left:22px}.fstep::after{left:-26px}}

/* process cards (Teach / Demo / Do) – no connector arrows */
.cards.flow{position:relative}

/* "best for" line on offer cards */
.card .bf{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--body);font-size:.78rem;color:var(--muted);position:relative;z-index:1}
.card .bf b{color:var(--orange);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:3px}

/* contact: next steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:clamp(40px,5vw,64px)}
.step{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:24px;position:relative}
.step .n{font-family:var(--stratum);font-size:2rem;color:var(--orange);line-height:1}
.step h3{font-size:1.02rem;margin:12px 0 6px}
.step p{color:var(--muted);font-size:.9rem;line-height:1.55}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* contact: side quote + call line */
.sidequote{margin-top:26px;padding:20px 22px;background:var(--surface);border-left:2px solid var(--orange);border-radius:0 4px 4px 0}
.sidequote p{font-size:.95rem;color:var(--text);font-style:italic;line-height:1.55}
.sidequote .w{margin-top:10px;font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.callline{margin-top:18px;text-align:center;font-size:.9rem;color:var(--muted)}
.callline a{color:var(--text);font-weight:700;border-bottom:1px solid var(--orange)}
.callline a:hover{color:var(--orange)}

/* FAQ accordion */
.faq{border-top:1px solid var(--line)}
.fqi{border-bottom:1px solid var(--line)}
.fq{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding:22px 4px;font-family:var(--stratum);font-size:clamp(1.05rem,2vw,1.3rem);text-transform:uppercase;letter-spacing:.01em;transition:color .3s}
.fq:hover{color:var(--orange)}
.fq i{font-style:normal;color:var(--orange);font-family:var(--body);font-weight:600;font-size:1.4rem;line-height:1;transition:transform .4s var(--ease)}
.fqi.open .fq i{transform:rotate(45deg)}
.fa{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.fa p{padding:0 4px 22px;color:var(--muted);max-width:64ch;line-height:1.65}

/* success page */
.okwrap{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:130px var(--gut) 80px;position:relative;overflow:hidden}
.okwrap .tick{width:84px;height:84px;border-radius:50%;border:2px solid var(--orange);display:flex;align-items:center;justify-content:center;margin:0 auto 30px;box-shadow:0 0 40px var(--orange-glow);animation:tickpop .7s var(--ease) both}
.okwrap .tick svg{width:38px;height:38px;stroke:var(--orange);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:tickdraw .7s .25s var(--ease) forwards}
@keyframes tickpop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes tickdraw{to{stroke-dashoffset:0}}
.okwrap h1{font-size:clamp(2.2rem,6vw,4.4rem)}
.okwrap h1 .o{color:var(--orange)}
.okwrap p{color:var(--muted);max-width:48ch;margin:18px auto 36px;font-size:1.06rem}
.okwrap .acts{display:flex;gap:13px;flex-wrap:wrap;justify-content:center}

/* ===================== PREMIUM MOTION V3 ===================== */
/* page entrance: content rises from black */
main{animation:pageenter .7s var(--ease) both}
@keyframes pageenter{from{opacity:.001;transform:translateY(16px)}to{opacity:1;transform:none}}

/* two-tone page-exit wipe (orange chased by black) */
#wipe{position:fixed;inset:0;z-index:3000;pointer-events:none;background:var(--orange);transform:translateY(101%);transition:transform .42s cubic-bezier(.76,0,.24,1)}
#wipe::after{content:"";position:absolute;inset:0;background:var(--bg);transform:translateY(101%);transition:transform .42s cubic-bezier(.76,0,.24,1) .09s}
#wipe.go{transform:none;pointer-events:auto}
#wipe.go::after{transform:none}

/* word-cascade headline reveal */
.wso{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.wsi{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease)}
.ws-in .wsi{transform:none}

/* cursor glow (desktop) */
#cglow{position:fixed;left:0;top:0;width:540px;height:540px;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(circle,rgba(255,75,34,.075),transparent 62%);mix-blend-mode:screen;transform:translate(-50%,-50%);will-change:transform;opacity:0;transition:opacity .6s}
body.glow-on #cglow{opacity:1}

/* hero photo curtain reveal on load */
.hero-right{position:relative}
.hero-right::after{content:"";position:absolute;inset:0;z-index:3;background:var(--orange);transform-origin:right;animation:curtain 1s .15s cubic-bezier(.76,0,.24,1) both}
@keyframes curtain{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media(prefers-reduced-motion:reduce){
  #wipe,#cglow{display:none}
  main{animation:none}
  .wsi{transform:none;transition:none}
  .hero-right::after{display:none}
}

/* ===================== CINEMATIC V4 ===================== */
/* --- FLEX: scroll-linked ignition rail --- */
.frail{position:absolute;left:0;top:8px;width:2px;height:0;background:linear-gradient(180deg,#ff8a5c,var(--orange));box-shadow:0 0 14px var(--orange-glow);z-index:1;pointer-events:none}
.fstep::after{border-color:var(--line-2);background:var(--bg-2);box-shadow:none;transition:border-color .5s,box-shadow .5s,background .5s,transform .5s var(--ease)}
.fstep.lit::after{border-color:var(--orange);background:var(--orange);box-shadow:0 0 16px var(--orange-glow);transform:scale(1.25)}

/* --- FLEX: cinematic spotlight focus --- */
.fsteps.focusing .fstep{opacity:.28;filter:saturate(.6);transform:scale(.985);transition:opacity .65s var(--ease),transform .65s var(--ease),filter .65s}
.fsteps.focusing .fstep.focus{opacity:1;filter:none;transform:none}

/* --- FLEX: numeral ignition --- */
.fstep .bn{transition:filter .6s var(--ease),-webkit-text-stroke .6s}
.fstep.focus .bn{background:linear-gradient(135deg,#ff9d6b 0%,var(--orange) 45%,#c22e0e 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(255,75,34,.4);filter:drop-shadow(0 0 22px rgba(255,75,34,.38));animation:bnflare .9s var(--ease)}
@keyframes bnflare{0%{filter:drop-shadow(0 0 0 rgba(255,75,34,0))}45%{filter:drop-shadow(0 0 38px rgba(255,75,34,.75))}100%{filter:drop-shadow(0 0 22px rgba(255,75,34,.38))}}

/* --- FLEX: phase label + pull-quote draw --- */
.fstep .ph{opacity:0;transform:translateX(-14px);letter-spacing:.34em;transition:opacity .6s var(--ease) .1s,transform .6s var(--ease) .1s,letter-spacing .8s var(--ease) .1s}
.fstep.focus .ph,.fstep.lit .ph{opacity:1;transform:none;letter-spacing:.18em}
.fstep .pull{border-left:none;position:relative}
.fstep .pull::before{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--orange);box-shadow:0 0 10px var(--orange-glow);transform:scaleY(0);transform-origin:top;transition:transform .9s var(--ease) .25s}
.fstep.focus .pull::before,.fstep.lit .pull::before{transform:none}

/* --- FLEX tabs: active number swap --- */
.ftab .ti{transition:color .4s,transform .4s var(--ease)}
.ftab.on .ti{transform:translateY(-2px) scale(1.15)}

/* --- global: 3D flip-up entrances for cards --- */
.js .rv.card,.js .rv.svc,.js .rv.rev,.js .rv.mbr,.js .rv.step{transform:perspective(800px) rotateX(8deg) translateY(34px);transform-origin:50% 100%}
.js .rv.card.in,.js .rv.svc.in,.js .rv.rev.in,.js .rv.mbr.in,.js .rv.step.in{transform:none}

/* --- global: kicker line draws in --- */
.js .rv .kicker::before,.js .kicker.rv::before{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .2s}
.js .rv.in .kicker::before,.js .kicker.rv.in::before{transform:scaleX(1)}

/* --- global: staggered list rows with divider sweep --- */
.js .exp .exp-row{opacity:0;transform:translateX(-30px)}
.js .exp.rows-in .exp-row{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .exp.rows-in .exp-row:nth-child(1){transition-delay:.05s}
.js .exp.rows-in .exp-row:nth-child(2){transition-delay:.15s}
.js .exp.rows-in .exp-row:nth-child(3){transition-delay:.25s}
.js .exp.rows-in .exp-row:nth-child(4){transition-delay:.35s}
.js .exp.rows-in .exp-row:nth-child(5){transition-delay:.45s}
.exp-row{position:relative}
.exp-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line-2);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);opacity:.6}

/* --- stats: ignition pop when counted --- */

@keyframes statpop{0%{transform:scale(.9);text-shadow:0 0 0 rgba(255,75,34,0)}55%{transform:scale(1.03);text-shadow:0 0 34px rgba(255,75,34,.5)}100%{transform:scale(1);text-shadow:0 0 0 rgba(255,75,34,0)}}

@media(prefers-reduced-motion:reduce){
  .frail{display:none}
  .fsteps.focusing .fstep{opacity:1;filter:none;transform:none}
  .fstep .ph{opacity:1;transform:none;letter-spacing:.18em}
  .fstep .pull::before{transform:none}
  .js .exp .exp-row{opacity:1;transform:none}
  .js .rv.card,.js .rv.svc,.js .rv.rev,.js .rv.mbr,.js .rv.step{transform:none}
  .js .rv .kicker::before,.js .kicker.rv::before{transform:scaleX(1)}
}

/* ===================== INTENSITY V5 ===================== */
/* cards: pronounced 3D rise (overrides V4 subtle version) */
.js .rv.card,.js .rv.svc,.js .rv.rev,.js .rv.mbr,.js .rv.step{
  transform:perspective(900px) rotateX(22deg) translateY(64px) scale(.94);
  transform-origin:50% 100%;
  transition:opacity 1.05s var(--ease),transform 1.05s var(--ease);
}
.js .rv.card.in,.js .rv.svc.in,.js .rv.rev.in,.js .rv.mbr.in,.js .rv.step.in{transform:none}

/* rows: deeper slide + clearer cascade */
.js .exp .exp-row{opacity:0;transform:translateX(-64px)}
.js .exp.rows-in .exp-row{transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .exp.rows-in .exp-row:nth-child(1){transition-delay:.05s}
.js .exp.rows-in .exp-row:nth-child(2){transition-delay:.18s}
.js .exp.rows-in .exp-row:nth-child(3){transition-delay:.31s}
.js .exp.rows-in .exp-row:nth-child(4){transition-delay:.44s}
.js .exp.rows-in .exp-row:nth-child(5){transition-delay:.57s}
/* divider draws orange once on entrance, then settles */
.js .exp.rows-in .exp-row::after{animation:rowline 1.1s var(--ease) both}
.js .exp.rows-in .exp-row:nth-child(1)::after{animation-delay:.25s}
.js .exp.rows-in .exp-row:nth-child(2)::after{animation-delay:.38s}
.js .exp.rows-in .exp-row:nth-child(3)::after{animation-delay:.51s}
.js .exp.rows-in .exp-row:nth-child(4)::after{animation-delay:.64s}
.js .exp.rows-in .exp-row:nth-child(5)::after{animation-delay:.77s}
@keyframes rowline{0%{transform:scaleX(0);opacity:.9}70%{transform:scaleX(1);opacity:.9}100%{transform:scaleX(1);opacity:0}}

/* kicker: longer line, glowing draw, label slides in */
.kicker::before{width:54px;box-shadow:0 0 0 rgba(255,75,34,0)}
.js .rv .kicker::before,.js .kicker.rv::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .1s,box-shadow .9s .1s}
.js .rv.in .kicker::before,.js .kicker.rv.in::before{transform:scaleX(1);box-shadow:0 0 16px var(--orange-glow)}
.js .rv .kicker,.js .kicker.rv{overflow:visible}

/* stat ignition: fires when the COUNTER FINISHES (class added by JS) */
.stat.done .v,.tb.done .v{animation:statpop .9s var(--ease) both}
@keyframes statpop{0%{transform:scale(1);text-shadow:0 0 0 rgba(255,75,34,0)}40%{transform:scale(1.08);text-shadow:0 0 44px rgba(255,75,34,.85)}100%{transform:scale(1);text-shadow:0 0 0 rgba(255,75,34,0)}}

@media(prefers-reduced-motion:reduce){
  .js .rv.card,.js .rv.svc,.js .rv.rev,.js .rv.mbr,.js .rv.step{transform:none}
  .js .exp .exp-row{opacity:1;transform:none}
  .js .exp.rows-in .exp-row::after{animation:none}
  .stat.done .v,.tb.done .v{animation:none}
}

/* ===================== FLEX LOOP DIAGRAM ===================== */
.flexloop{width:100%;max-width:380px;margin:0 auto;padding:0}
/* grows out of the dead space below the tab index as it scrolls into view */
.js .flexloop.rv{opacity:0;transform:scale(.45);transform-origin:center;transition:opacity .9s var(--ease),transform 1.05s var(--ease)}
.js .flexloop.rv.in{opacity:1;transform:none}
.flexloop svg{width:100%;height:auto;overflow:visible;display:block}
.flexloop .fl-node circle{fill:var(--surface);stroke:rgba(255,75,34,.5);stroke-width:2;transition:fill .45s var(--ease),stroke .45s var(--ease),filter .45s var(--ease)}
.flexloop .fl-n{fill:var(--orange);font-family:var(--stratum);font-size:16px;letter-spacing:.06em;text-anchor:middle;transition:fill .45s var(--ease)}
.flexloop .fl-w{fill:var(--muted);font-family:var(--stratum);font-size:17px;letter-spacing:.04em;text-anchor:middle;transition:fill .45s var(--ease)}
/* active step: the matching node lights up as the reader scrolls */
.flexloop .fl-node.on circle{fill:var(--orange);stroke:var(--orange);filter:drop-shadow(0 0 14px var(--orange-glow))}
.flexloop .fl-node.on .fl-n{fill:#fff}
.flexloop .fl-node.on .fl-w{fill:#fff}
.flexloop .fl-node{cursor:pointer}
.flexloop .fl-c{fill:var(--orange);font-family:var(--stratum);font-size:38px;letter-spacing:.07em;text-anchor:middle}
.flexloop .fl-cs{fill:var(--muted);font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-anchor:middle;font-weight:600;font-family:var(--body)}
.flexloop .fl-ring{transform-box:fill-box;transform-origin:center}
.js .flexloop .fl-ring{animation:flspin 40s linear infinite}
@keyframes flspin{to{transform:rotate(360deg)}}
.flexloop .fl-chev path{opacity:.34;animation:flpulse 3.2s ease-in-out infinite}
.flexloop .fl-chev path:nth-child(2){animation-delay:.8s}
.flexloop .fl-chev path:nth-child(3){animation-delay:1.6s}
.flexloop .fl-chev path:nth-child(4){animation-delay:2.4s}
@keyframes flpulse{0%,100%{opacity:.34}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .js .flexloop .fl-ring{animation:none}
  .flexloop .fl-chev path{animation:none;opacity:.5}
}

/* clickable cards (keynotes + TGX) render as links */
a.card{color:inherit;text-decoration:none;cursor:pointer}

/* ===================== NAV DROPDOWN (What We Do) ===================== */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-t{font-family:var(--body);font-weight:600;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:10px 12px;display:inline-flex;align-items:center;gap:7px;position:relative;transition:color .3s;cursor:pointer;white-space:nowrap}
.nav-dd-t:hover,.nav-dd:hover .nav-dd-t,.nav-dd-t.active{color:var(--text)}
.nav-dd-t .cv{font-size:.66em;transition:transform .35s var(--ease);opacity:.8}
.nav-dd:hover .nav-dd-t .cv{transform:rotate(180deg)}
.nav-dd-t::after{content:"";position:absolute;left:16px;right:16px;bottom:2px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-dd:hover .nav-dd-t::after,.nav-dd-t.active::after{transform:scaleX(1)}
/* invisible hover bridge so the menu doesn't drop on the gap */
.nav-dd::before{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.nav-dd-menu{position:absolute;top:calc(100% + 12px);left:6px;min-width:230px;background:rgba(12,12,12,.97);backdrop-filter:blur(14px) saturate(150%);border:1px solid var(--line);border-radius:5px;padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;box-shadow:0 26px 64px -22px rgba(0,0,0,.9);z-index:60}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd-menu a{font-family:var(--body);font-weight:600;font-size:.86rem;letter-spacing:.03em;text-transform:none;color:var(--muted);padding:12px 14px;border-radius:3px;transition:color .25s,background .25s,padding-left .25s}
.nav-dd-menu a:hover{color:var(--text);background:rgba(255,75,34,.10);padding-left:18px}

/* homepage: three service cards */
.svcs.three{grid-template-columns:repeat(3,1fr)}
.svcs.three .svc{min-height:340px;padding:32px}
@media(max-width:960px){.svcs.three{grid-template-columns:1fr}}

/* centered two-card layout (keynotes) */
.cards.two{grid-template-columns:repeat(2,minmax(0,440px));justify-content:center}
@media(max-width:880px){.cards.two{grid-template-columns:1fr}}

/* =====================================================================
   IMAGERY  (added 2026-07)
   Figure wrapper, full-bleed bands, image/text splits, galleries.
   ===================================================================== */
.figw{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.figw img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:grayscale(1) contrast(1.07);transition:transform 1.2s var(--ease),filter .5s var(--ease)}
.figw:hover img{filter:grayscale(.82) contrast(1.07)}
.figw:hover img{transform:scale(1.04)}
.figw .fcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px 20px;
  background:linear-gradient(transparent,rgba(10,10,10,.55) 38%,rgba(10,10,10,.94));text-shadow:0 1px 8px rgba(0,0,0,.8);
  font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.figw .fcap .o{color:var(--orange)}

/* full-bleed image band */
.band{position:relative;min-height:clamp(420px,50vw,660px);display:flex;align-items:center;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;filter:grayscale(1) contrast(1.07)}
.band>img.pos-left{object-position:22% center}
.band>img.pos-center{object-position:50% center}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.74) 42%,rgba(10,10,10,.30) 100%)}
.band .wrap{position:relative;z-index:2;width:100%;padding-top:clamp(48px,7vw,80px);padding-bottom:clamp(48px,7vw,80px)}
.band h2{max-width:15ch}
.band p{max-width:48ch;color:var(--muted);margin-top:20px;font-size:1.02rem}
.band .kicker{margin-bottom:20px}
@media(max-width:700px){.band::after{background:linear-gradient(180deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.92) 60%)}}

/* image + text split */
.isplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.isplit .figw{aspect-ratio:4/3}
.isplit .kicker{margin-bottom:18px}
.isplit h2{margin-bottom:20px}
.isplit p{color:var(--muted)}
.isplit p+p{margin-top:16px}
.isplit .btn{margin-top:28px}
.isplit.rev .icol-img{order:2}
@media(max-width:860px){.isplit{grid-template-columns:1fr}.isplit.rev .icol-img{order:0}}

/* gallery grid */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal.two{grid-template-columns:repeat(2,1fr)}
.gal .figw{aspect-ratio:4/3}
@media(max-width:860px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gal{grid-template-columns:1fr}}


/* ---- audit fixes, 1 Sep 2026 ---- */
/* WCAG AA: white on brand orange was 3.34:1 and failed. Black on the same
   orange is 6.28:1 and keeps the brand colour exactly. */
.btn-fill{color:#000}
.btn-fill:hover{color:#000}
.nav-cta{color:#000}
.nav-cta:hover{color:#000}
.btn-fill:focus-visible{outline:2px solid var(--text);outline-offset:3px}

/* header phone */
.nav-tel{font-family:var(--body);font-weight:700;font-size:.8rem;letter-spacing:.06em;
  color:var(--text);white-space:nowrap;margin-right:18px;padding:6px 0;
  border-bottom:1px solid transparent;transition:.3s var(--ease)}
.nav-tel:hover{color:var(--orange);border-bottom-color:var(--orange)}
@media(max-width:1180px){.nav-tel{display:none}}

/* keynote / format spec lists */
.spec{list-style:none;margin:14px 0 0;padding:0;position:relative;z-index:1}
.spec li{font-family:var(--body);font-size:.82rem;line-height:1.5;color:var(--muted);
  padding-left:16px;position:relative;margin-bottom:6px}
.spec li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--orange)}

/* fee strip sits inside a section, not a link */
.mstrip[style]{text-decoration:none}
.mstrip p{margin-top:8px;max-width:62ch}


/* ---- callsign + bureau pages, 1 Sep 2026 ---- */
.csbox{background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:clamp(26px,4vw,44px);max-width:760px;margin:0 auto}
.csbox form{margin:0}
.csout{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);text-align:center}
.cslabel{font-family:var(--body);font-weight:700;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.csname{font-family:var(--stratum);font-size:clamp(1.5rem,5.2vw,2.9rem);line-height:1.05;
  color:var(--text);letter-spacing:-.01em;margin-bottom:14px;text-transform:uppercase;
  overflow-wrap:break-word;text-wrap:balance}
.csreason{font-family:var(--body);font-size:.95rem;color:var(--muted);max-width:46ch;margin:0 auto 24px}
.csacts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.bpcopy{background:var(--surface);border:1px solid var(--line);border-radius:3px;margin-bottom:16px}
.bpch{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.bpn{display:none}
.bpch b{font-family:var(--body);font-weight:700;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text);margin-right:12px}
.bpw{font-family:var(--body);font-size:.72rem;color:var(--faint);letter-spacing:.04em}
.bpbtn{font-family:var(--body);font-weight:700;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;padding:8px 16px;background:transparent;color:var(--text);
  border:1px solid var(--line-2,var(--line));border-radius:2px;cursor:pointer;transition:.3s var(--ease)}
.bpbtn:hover{border-color:var(--orange);color:var(--orange)}
.bpbtn.ok{background:var(--orange);color:#000;border-color:var(--orange)}
.bpct{padding:20px 22px}
.bpct p{font-family:var(--body);font-size:.9rem;line-height:1.65;color:var(--muted);margin:0 0 12px;max-width:76ch}
.bpct p:last-child{margin-bottom:0}

.bpgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:820px){.bpgrid{grid-template-columns:1fr}}
.bpcard{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:26px 24px}
.bpcard h3{font-family:var(--stratum);font-size:1.05rem;margin:0 0 12px;color:var(--text)}
.bpbig{font-family:var(--stratum);font-size:1.5rem;color:var(--orange);margin:0 0 8px}
.bpnote{font-family:var(--body);font-size:.82rem;color:var(--faint);margin:0 0 12px}
.bpfrom{font-family:var(--body);font-weight:400;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-left:8px}
.bptags{display:flex;flex-wrap:wrap;gap:7px}
.bptags span{font-family:var(--body);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border:1px solid var(--line);border-radius:2px;color:var(--muted)}
.bpcard .spec li b{color:var(--text)}


/* nav phone: beat the generic .nav a rules, and get out of the way
   before the desktop nav runs out of room */
#hdr .nav a.nav-tel{display:inline-flex;align-items:center;white-space:nowrap;line-height:1}
@media(max-width:1400px){#hdr .nav a.nav-tel{display:none}}


/* Callsign hero: the headline holds one line at every width.
   .phero h1 caps at 18ch, which is what forced the wrap. */
.phero h1.oneline{max-width:none;white-space:nowrap;font-size:clamp(1.2rem,5.9vw,5.4rem)}
@media(max-width:760px){.phero h1.oneline{white-space:nowrap;max-width:none;font-size:clamp(1.2rem,5.9vw,2.9rem)}}

/* Contact blocks: stacked phone/email were rendering flush as inline anchors */
.ci .it a.v{display:block}
.ci .it a.v + a.v{margin-top:8px}

/* Callsign: one assignment per visitor, no re-roll */
.csonce{margin-top:18px;color:var(--faint);font-size:.85rem;font-style:italic}

/* Sticky mobile call bar. The phone number is hidden in the header below
   1400px, which buried the highest-intent action on every phone. */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:1040;display:none;
  align-items:center;gap:12px;padding:13px var(--gut) calc(13px + env(safe-area-inset-bottom));
  background:var(--orange);color:#000;text-decoration:none;
  box-shadow:0 -8px 30px -12px rgba(0,0,0,.85)}
.callbar .cb-t{font-family:var(--body);font-weight:600;font-size:.95rem;letter-spacing:.01em}
.callbar .cb-t b{font-weight:800}
.callbar .cb-s{margin-left:auto;font-family:var(--body);font-weight:600;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;opacity:.72}
@media(max-width:1400px){
  .callbar{display:flex}
  body{padding-bottom:60px}
  footer{padding-bottom:14px}
}
@media(min-width:861px) and (max-width:1400px){.callbar .cb-s{opacity:.8}}
/* the mobile menu covers the viewport at z-index 1050, so it sits above this */

/* Audience switcher — one method, four different reasons for being here */
.ptabs{display:flex;flex-wrap:wrap;gap:2px;margin:34px 0 0;border-bottom:1px solid var(--line)}
.ptab{appearance:none;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);padding:14px 18px;position:relative;
  transition:color .3s var(--ease)}
.ptab:hover{color:var(--text)}
.ptab::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)}
.ptab.is-on{color:var(--text)}
.ptab.is-on::after{transform:scaleX(1)}
.ptab:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.ppanel{border-left:3px solid var(--orange);background:var(--surface);
  border-top:1px solid var(--line);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.ppanel.is-on{animation:ppfade .5s var(--ease) both}
@keyframes ppfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pp-in{padding:clamp(26px,4vw,48px);max-width:760px}
.pp-in h3{font-size:clamp(1.5rem,2.9vw,2.15rem);line-height:1.05;margin-bottom:20px}
.pp-in p{color:var(--muted);font-size:1rem;line-height:1.65}
.pp-in p+p{margin-top:14px}
.pp-call{margin-top:24px;padding:18px 22px;background:var(--bg);
  border-left:2px solid var(--line);color:var(--text);font-size:.95rem;line-height:1.6}
.pp-cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);transition:gap .3s var(--ease)}
.pp-cta:hover{gap:16px}
@media(max-width:680px){
  .ptabs{gap:0}
  .ptab{flex:1 1 auto;padding:12px 12px;font-size:.64rem;letter-spacing:.09em}
  .ptab::after{left:10px;right:10px}
}
@media(prefers-reduced-motion:reduce){.ppanel.is-on{animation:none}}