@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
/* UI Trax — site stylesheet (2026 redesign)
   One deep-emerald stage. A single 3D core travels behind every page and
   changes shape and colour section by section, from emerald to gold. */
:root{
  color-scheme:dark;
  --bg:#05110D;
  --surface:#0C1D17;
  --surface-2:#12281F;
  --line:#234035;
  --fg:#F1F5EC;
  --muted:#9FB3A6;
  --accent:#F5B940;
  --accent-2:#2BD98F;
  --on-accent:#05110D;
  --glass:rgba(12,29,23,.78);
  --display:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --gut:clamp(16px,4vw,56px);
  --r:clamp(16px,2vw,28px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:6px}
.wrap{max-width:1440px;margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.04em;line-height:.95}
h2{font-size:clamp(38px,7vw,112px);font-weight:700}
h2.md{font-size:clamp(32px,4.6vw,68px)}
p{margin:0}
em.g{font-style:normal;color:var(--accent)}
.muted{color:var(--muted)}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}

/* stage, progress, cursor */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
main,footer{position:relative;z-index:1}
.prog{position:fixed;inset:0 0 auto 0;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:60}
.cur{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:70;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease)}
.cur.big{width:64px;height:64px;margin:-32px 0 0 -32px}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled,.nav.open{background:rgba(5,17,13,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.logo{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;text-decoration:none;display:flex;align-items:center;gap:10px;min-height:44px;white-space:nowrap}
.logo b{width:12px;height:12px;background:var(--accent);border-radius:50%;display:block}
.links{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);font-size:15px}
.links a{text-decoration:none;color:var(--muted);min-height:44px;display:inline-flex;align-items:center;transition:color .2s;white-space:nowrap}
.links a:hover,.links a[aria-current="page"]{color:var(--fg)}
.links a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
.nav-r{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1.5px solid var(--fg);background:transparent;color:var(--fg);cursor:pointer;font-family:var(--body);transition:background .25s,color .25s,border-color .25s;will-change:transform;white-space:nowrap}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.pri:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent)}
.btn.sm{min-height:44px;padding:0 18px;font-size:14px}
.btn svg{width:18px;height:18px;flex:none}
.menu-btn{display:none}
.overlay{position:fixed;inset:0;z-index:49;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:4px;overflow:auto;padding:96px max(var(--gut),env(safe-area-inset-right,0px)) 40px max(var(--gut),env(safe-area-inset-left,0px))}
.overlay a{font-family:var(--display);font-weight:700;font-size:clamp(30px,10vw,60px);letter-spacing:-.04em;text-decoration:none;line-height:1.15}
.overlay a.hot{color:var(--accent)}
@media (max-width:1020px){.links{display:none}.menu-btn{display:inline-flex}}
@media (max-width:520px){.nav-r .btn.pri{display:none}}

/* home hero */
.hero{position:relative;min-height:clamp(600px,100svh,980px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero::before,.phero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(60% 55% at 72% 42%,rgba(43,217,143,.20),rgba(43,217,143,0) 70%),radial-gradient(40% 40% at 82% 28%,rgba(245,185,64,.12),rgba(245,185,64,0) 70%)}
@media (max-width:800px){.hero::after,.phero::after{content:"";position:absolute;inset:auto 0 0 0;height:78%;background:linear-gradient(rgba(5,17,13,0),rgba(5,17,13,.88) 38%);z-index:-1}}
.hero .wrap{width:100%;padding-block:120px clamp(28px,5vw,56px);display:flex;flex-direction:column;gap:clamp(20px,3vw,32px)}
h1{font-size:clamp(52px,min(11.5vw,19.5vh),190px);font-weight:800;line-height:.86;letter-spacing:-.055em}
.hero h1{max-width:11ch}
h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
h1 .w i{display:inline-block;font-style:normal;animation:up 1s var(--ease) both;animation-delay:calc(var(--i) * 80ms + 150ms)}
@keyframes up{from{transform:translateY(110%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-sub{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;animation:fade .9s .7s var(--ease) both}
.hero-sub p{max-width:46ch;font-size:clamp(17px,1.5vw,21px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-foot{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:20px;border-top:1px solid var(--line);animation:fade .9s .9s var(--ease) both}

/* inner page hero */
.phero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(132px,17vw,220px) clamp(48px,7vw,96px)}
.phero .wrap{display:flex;flex-direction:column;gap:clamp(18px,2.6vw,30px)}
.phero h1{font-size:clamp(44px,8.6vw,136px);max-width:13ch}
.phero p.lead{max-width:52ch;font-size:clamp(17px,1.6vw,22px);animation:fade .9s .6s var(--ease) both}
.phero .cta-row{animation:fade .9s .75s var(--ease) both}

/* marquee */
.mq{border-block:1px solid var(--line);overflow:hidden;padding-block:clamp(18px,2.4vw,30px)}
.mq-t{display:flex;gap:clamp(28px,4vw,64px);width:max-content;animation:slide 40s linear infinite}
.mq-t span{font-family:var(--display);font-weight:700;font-size:clamp(34px,6vw,92px);letter-spacing:-.04em;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1.2px var(--muted)}
.mq-t span.f{color:var(--fg);-webkit-text-stroke:0}
.mq-t i{width:clamp(12px,1.4vw,20px);height:clamp(12px,1.4vw,20px);background:var(--accent);border-radius:50%;align-self:center;flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

section{padding-block:clamp(64px,9vw,150px)}
section.tight{padding-top:0}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,4.5vw,64px)}
.head p{max-width:40ch;color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}

/* reveal */
.js .rv{opacity:0;transform:translateY(44px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* reel */
.reel{position:relative;aspect-ratio:16/9;max-height:82vh;width:100%;border-radius:clamp(18px,2.4vw,36px);overflow:hidden;background:linear-gradient(120deg,#149C68,#06281C 72%);border:1px solid var(--line)}
.reel video{width:100%;height:100%;object-fit:cover}
.reel-btn{position:absolute;inset:0;width:100%;border:0;cursor:pointer;background:linear-gradient(0deg,rgba(5,17,13,.55),rgba(5,17,13,.15));color:var(--fg);display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,28px);font-family:var(--display);font-weight:800;font-size:clamp(34px,9vw,140px);letter-spacing:-.05em;line-height:1}
.play{width:clamp(44px,7vw,104px);height:clamp(44px,7vw,104px);border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none;transition:transform .4s var(--ease)}
.reel-btn:hover .play{transform:scale(1.14)}
.play svg{width:36%;height:36%}

/* work (home) */
.work{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.work-l{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:28px}
.work-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.work-list a{display:flex;align-items:center;gap:12px;min-height:48px;text-decoration:none;color:var(--muted);border-top:1px solid var(--line);transition:color .3s,padding .3s var(--ease)}
.work-list li:last-child a{border-bottom:1px solid var(--line)}
.work-list a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .3s var(--ease)}
.work-list a.on{color:var(--fg);padding-left:6px}
.work-list a.on::before{transform:scale(1)}
.work-r{display:flex;flex-direction:column;gap:clamp(40px,6vw,96px);min-width:0}
@media (max-width:900px){.work{grid-template-columns:minmax(0,1fr)}.work-l{position:static}.work-list{display:none}}

/* media card (video or image) */
.pc{display:flex;flex-direction:column;gap:16px;text-decoration:none;min-width:0}
.pv{aspect-ratio:16/9;width:100%;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);overflow:hidden;position:relative;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),border-color .3s}
.pc:hover .pv,.pv:hover{border-color:var(--accent)}
.pv video,.pv img{width:100%;height:100%;object-fit:cover}
.pv::after{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at var(--mx,70%) var(--my,20%),rgba(245,185,64,.20),transparent 70%);pointer-events:none}
.pv .tagp{position:absolute;left:12px;top:12px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:rgba(5,17,13,.8);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.pm{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px}
.pm h3{font-size:clamp(24px,3vw,42px);font-weight:700}
.pm span{color:var(--muted);font-size:15px}

/* services rows (home) */
.svc{border-top:1.5px solid var(--fg)}
.srow{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) minmax(0,2fr) 48px;gap:14px clamp(16px,3vw,48px);align-items:center;padding-block:clamp(20px,2.6vw,36px);border-bottom:1px solid var(--line);text-decoration:none;isolation:isolate;transition:color .35s,padding .45s var(--ease)}
.srow::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s var(--ease);z-index:-1}
.srow:hover{color:var(--on-accent);padding-inline:clamp(12px,2vw,28px)}
.srow:hover::before{transform:scaleY(1)}
.srow h3{font-size:clamp(26px,4vw,60px);font-weight:700}
.srow p{color:var(--muted);transition:color .35s;min-width:0}
.srow:hover p{color:var(--on-accent)}
.srow .pr{font-family:var(--mono);font-size:14px;white-space:nowrap}
.srow svg{width:32px;height:32px;justify-self:end;transition:transform .45s var(--ease)}
.srow:hover svg{transform:rotate(45deg)}
@media (max-width:820px){.srow{grid-template-columns:minmax(0,1fr) 40px}.srow p,.srow .pr{grid-column:1}.srow svg{grid-row:1;grid-column:2}}

/* trax omni band */
.omni-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:end}
.omni h2{font-size:clamp(46px,9vw,150px);font-weight:800;line-height:.86}
.omni p.lead{font-size:clamp(18px,1.7vw,24px);max-width:36ch;font-weight:500}
.wave{display:flex;align-items:center;gap:clamp(3px,.5vw,6px);height:clamp(80px,12vw,170px)}
.wave i{flex:1 1 0;min-width:2px;background:linear-gradient(var(--accent),var(--accent-2));border-radius:99px;height:var(--h,30%);animation:wv 1.2s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@keyframes wv{to{height:calc(100% - var(--h,30%))}}
.feat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.feat li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;padding-block:14px;border-top:1px solid var(--line)}
.feat li:last-child{border-bottom:1px solid var(--line)}
.feat b{font-weight:600}
.feat span{color:var(--muted)}
.omni-l{display:flex;flex-direction:column;gap:clamp(20px,3vw,36px);min-width:0}
.panel{display:flex;flex-direction:column;gap:24px;min-width:0;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,36px)}
.shot{border-radius:var(--r);border:1px solid var(--line);overflow:hidden;background:var(--surface)}
.shot img{width:100%;height:auto}
@media (max-width:900px){.omni-g{grid-template-columns:minmax(0,1fr)}}

/* tiles */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.tile{grid-column:span 2;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:200px;min-width:0}
.tile.w{grid-column:span 4}
.tile.h{grid-column:span 3}
.tile strong{font-family:var(--display);font-weight:800;font-size:clamp(44px,6.5vw,104px);letter-spacing:-.05em;line-height:.9}
.tile h3{font-size:clamp(22px,2.6vw,38px);font-weight:700}
.tile p{color:var(--muted)}
.tile.hot{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tile.hot p{color:#33453B}
.tile .n{font-family:var(--mono);font-size:13px;color:var(--accent)}
@media (max-width:900px){.tile,.tile.w,.tile.h{grid-column:span 6;min-height:0}}

/* founder */
.fd{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.ph{aspect-ratio:1;width:100%;max-width:420px;border-radius:50%;overflow:hidden;border:2px solid var(--accent);background:var(--surface)}
.ph img{width:100%;height:100%;object-fit:cover}
.fd-t{display:flex;flex-direction:column;gap:22px;min-width:0}
.fd-t p.big{font-family:var(--display);font-weight:500;font-size:clamp(23px,3vw,46px);letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px;padding-top:22px;border-top:1px solid var(--line)}
.facts div{display:flex;flex-direction:column;gap:2px}
.facts span{color:var(--muted);font-size:15px}
.avatars{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.avatars img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1.5px solid var(--line)}
@media (max-width:760px){.fd{grid-template-columns:minmax(0,1fr)}.ph{max-width:240px}}

/* service cards (services page) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(14px,1.8vw,24px)}
.card{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:border-color .3s,transform .5s var(--ease)}
.card:hover{border-color:var(--accent);transform:translateY(-6px)}
.card .pv{border-radius:0;border:0;border-bottom:1px solid var(--line)}
.card-b{padding:clamp(18px,2.2vw,30px);display:flex;flex-direction:column;gap:14px;flex:1}
.card-b h3{font-size:clamp(24px,2.4vw,34px);font-weight:700}
.price{font-family:var(--mono);font-size:14px;color:var(--accent)}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:15.5px}
.ticks li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start}
.ticks li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-2);margin-top:.5em}
.card-b .btn{margin-top:auto;align-self:flex-start}
.minidash{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto 1fr;gap:10px;padding:clamp(14px,2vw,24px)}
.minidash u{display:block;height:44px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.minidash u.a{background:var(--accent);border-color:var(--accent)}
.minidash .bars{grid-column:1/-1;display:flex;align-items:flex-end;gap:8px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);padding:12px}
.minidash .bars i{flex:1;border-radius:6px 6px 0 0;background:var(--accent-2);height:var(--h)}
.minidash .bars i:nth-child(3n){background:var(--accent)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(12px,1.6vw,20px);counter-reset:st}
.step{counter-increment:st;border-top:1.5px solid var(--fg);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.step::before{content:counter(st,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:var(--accent)}
.step h3{font-size:clamp(22px,2.2vw,30px);font-weight:700}
.step p{color:var(--muted)}

/* pricing */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--glass);text-decoration:none;font-size:15px;transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(12px,1.6vw,20px)}
.plan{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:16px;min-width:0}
.plan.rec{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.plan-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan-h b{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.badge{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:4px 10px}
.amt{font-family:var(--display);font-weight:800;font-size:clamp(48px,5vw,76px);letter-spacing:-.05em;line-height:.9}
.plan .btn{margin-top:auto}
.pgroup{display:flex;flex-direction:column;gap:clamp(20px,3vw,36px);scroll-margin-top:96px}
.pgroup + .pgroup{margin-top:clamp(56px,8vw,120px)}
.pgroup .note{color:var(--muted);font-size:15px}
.clist{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--fg)}
.clist li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:8px 24px;padding-block:18px;border-bottom:1px solid var(--line)}
.clist b{font-family:var(--display);font-size:clamp(20px,2vw,28px);letter-spacing:-.02em}
.clist span{color:var(--muted)}
@media (max-width:640px){.clist li,.feat li{grid-template-columns:minmax(0,1fr)}}

/* faq */
.faq{border-top:1.5px solid var(--fg)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.02em;line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:24px;color:var(--accent);transition:transform .3s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);max-width:70ch;padding-bottom:22px}

/* team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(14px,1.8vw,24px)}
.member{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.2vw,28px);display:flex;flex-direction:column;gap:14px;align-items:flex-start;transition:border-color .3s,transform .5s var(--ease)}
.member:hover{border-color:var(--accent);transform:translateY(-6px)}
.member img{width:112px;height:112px;border-radius:50%;object-fit:cover;border:2px solid var(--line)}
.member h3{font-size:26px;font-weight:700}
.member .role{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.member p{color:var(--muted);font-size:15.5px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font-size:13.5px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--muted)}
.inline-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.inline-links a{color:var(--accent);text-underline-offset:4px}

/* two-column split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.split.c{align-items:center}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.quote{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.025em;line-height:1.15}

/* contact */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:14px;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(5,17,13,.7);color:var(--fg);font:inherit}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.form-note{grid-column:1/-1;color:var(--muted);font-size:14.5px}
.form-msg{grid-column:1/-1;border:1px solid var(--accent-2);border-radius:14px;padding:14px 16px}
.form-msg.err{border-color:#FF8B7A;color:#FFC2B8}
@media (max-width:640px){.form{grid-template-columns:minmax(0,1fr)}}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(12px,1.6vw,20px)}
.info .tile{grid-column:auto;min-height:0;justify-content:flex-start;gap:10px}
.info .tile h3{font-size:22px}
.info a{color:var(--fg);text-underline-offset:4px}

/* prose (legal) */
.prose{max-width:74ch;display:flex;flex-direction:column;gap:16px;color:var(--muted)}
.prose h2{font-size:clamp(26px,3vw,40px);color:var(--fg);margin-top:22px;line-height:1.05}
.prose ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.prose b,.prose strong{color:var(--fg)}
.prose a{color:var(--accent)}

/* closing cta + footer */
.cta{padding-bottom:clamp(40px,6vw,80px)}
.cta h2{font-size:clamp(42px,9vw,160px);font-weight:800;line-height:.88;max-width:12ch}
.cta .cta-row{margin-top:clamp(24px,4vw,52px)}
footer{border-top:1px solid var(--line);background:linear-gradient(rgba(5,17,13,.6),rgba(5,17,13,.92))}
.fcols{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);padding-block:clamp(40px,5vw,72px)}
.fcol{display:flex;flex-direction:column;gap:10px;min-width:0}
.fcol p{color:var(--muted);max-width:34ch}
.fcol a{text-decoration:none;color:var(--muted);min-height:32px;display:inline-flex;align-items:center;transition:color .2s;overflow-wrap:anywhere}
.fcol a:hover{color:var(--accent)}
.fcol .label{margin-bottom:6px}
.soc{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.soc a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--fg)}
.soc a:hover{border-color:var(--accent);color:var(--accent)}
.soc svg{width:18px;height:18px}
@media (max-width:900px){.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}.fcol.first{grid-column:1/-1}}
@media (max-width:420px){.fcols{grid-template-columns:minmax(0,1fr)}}
.mark{font-family:var(--display);font-weight:800;font-size:clamp(64px,22.5vw,420px);letter-spacing:-.06em;line-height:.78;white-space:nowrap;display:flex;align-items:baseline;gap:.06em;padding-top:.1em;overflow:hidden}
.mark b{width:.16em;height:.16em;border-radius:50%;background:var(--accent);display:block;flex:none}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:20px calc(20px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:14px}
.legal a{color:var(--muted)}
.wa{position:fixed;right:max(26px,env(safe-area-inset-right,0px));bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:40;width:48px;height:48px;border-radius:50%;background:#1FAF57;color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .3s var(--ease)}
.wa:hover{transform:scale(1.1)}
.wa svg{width:24px;height:24px}

@media (max-width:800px){.hero-foot{display:none}}
/* very narrow screens (fold cover) */
@media (max-width:340px){
  body{font-size:16px}
  .btn{padding:0 16px;min-height:46px}
  .nav .wrap{height:64px}
  .logo{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  h1 .w i,.hero-sub,.hero-foot,.phero p.lead,.phero .cta-row,.mq-t,.wave i{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .pv,.card,.member{transition:none}
}
/* ===== refinement pass ===== */
:root{--muted:#AEC0B4}
body{font-size:16.5px;line-height:1.6;background-image:radial-gradient(rgba(241,245,236,.04) 1px,transparent 1px);background-size:28px 28px}
section{padding-block:clamp(64px,8vw,128px)}
section.tight{padding-top:0}

/* type scale: confident, not shouting */
h1{font-size:clamp(44px,min(8.2vw,14.5vh),132px);font-weight:700;line-height:.92;letter-spacing:-.045em}
.hero h1{max-width:12ch}
.phero h1{font-size:clamp(38px,6.2vw,96px);max-width:15ch;line-height:.96}
h2{font-size:clamp(32px,5vw,76px);line-height:1;letter-spacing:-.035em}
h2.md{font-size:clamp(28px,3.4vw,50px)}
.omni h2{font-size:clamp(40px,6.4vw,100px);font-weight:700;line-height:.94}
.cta h2{font-size:clamp(40px,7.4vw,116px);font-weight:700;line-height:.94}
.mq-t span{font-size:clamp(26px,4vw,60px)}
.tile strong{font-size:clamp(40px,5vw,76px);font-weight:700}
.tile h3{font-size:clamp(21px,2.2vw,30px)}
.amt{font-size:clamp(42px,4.2vw,60px);font-weight:700}
.pm h3{font-size:clamp(21px,2.3vw,32px)}
.reel-btn{font-size:clamp(30px,6vw,88px);font-weight:700}
.fd-t p.big{font-size:clamp(22px,2.6vw,38px);line-height:1.12}
.card-b h3{font-size:clamp(22px,2.1vw,29px)}
.quote{font-size:clamp(20px,2.1vw,29px)}
.mark{font-weight:700}
.label{color:var(--accent-2);font-weight:500}
.hero-sub p{font-size:clamp(16.5px,1.35vw,19px)}
.phero p.lead{font-size:clamp(16.5px,1.4vw,20px)}

/* nav: links sit in a capsule and read as buttons */
.links{gap:2px;padding:5px;border-radius:999px;background:rgba(12,29,23,.74);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.links a{color:var(--fg);font-weight:500;padding:0 16px;min-height:40px;border-radius:999px;transition:background .2s,color .2s}
.links a:hover{background:var(--surface-2);color:var(--fg)}
.links a[aria-current="page"]{background:var(--fg);color:var(--bg);box-shadow:none}

/* buttons */
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn:active{transform:scale(.97)}

/* hero: keep copy readable beside the 3D scene */
@media (min-width:801px){.hero::after,.phero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,17,13,.78),rgba(5,17,13,0) 60%)}}
.proofs{list-style:none;margin:0;padding:20px 0 0;display:flex;flex-wrap:wrap;gap:10px 30px;font-size:14.5px;color:var(--fg)}
.proofs li{display:flex;align-items:center;gap:10px}
.proofs li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

/* pointer glow on cards */
.tile,.card,.plan,.member,.sx-pane{position:relative}
.tile::before,.card::before,.plan::before,.member::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(245,185,64,.13),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none}
.tile:hover::before,.card:hover::before,.plan:hover::before,.member:hover::before{opacity:1}
.tile.hot::before{display:none}

/* service explorer (home) */
.sx{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(16px,3vw,48px);align-items:start}
.sx-tabs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sx-tab{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:0 16px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--muted);font:inherit;text-align:left;cursor:pointer;transition:color .25s,background .25s,padding .35s var(--ease)}
.sx-tab .t{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.9vw,26px);letter-spacing:-.02em;line-height:1.1;display:flex;align-items:center;gap:12px}
.sx-tab .t::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .3s var(--ease);flex:none;margin-left:-20px}
.sx-tab .p{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.sx-tab:hover{color:var(--fg)}
.sx-tab[aria-selected="true"]{color:var(--fg);background:var(--glass);padding-left:36px}
.sx-tab[aria-selected="true"] .t::before{transform:scale(1)}
.sx-tab[aria-selected="true"] .p{color:var(--accent)}
.sx-panes{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));min-width:0}
.sx-pane{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;animation:fade .45s var(--ease)}
.sx-pane .pv{border-radius:0;border:0;border-bottom:1px solid var(--line);transform:none}
.sx-b{padding:clamp(18px,2.4vw,32px);display:flex;flex-direction:column;gap:14px}
.sx-b h3{font-size:clamp(23px,2.4vw,34px);font-weight:700}
.sx-b p{color:var(--muted)}
@media (max-width:900px){
  .sx{grid-template-columns:minmax(0,1fr)}
  .sx-tabs{flex-direction:row;gap:8px;border:0;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sx-tabs::-webkit-scrollbar{display:none}
  .sx-tab{flex:none;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;color:var(--fg)}
  .sx-tab .t{font-family:var(--body);font-size:15px;letter-spacing:0}
  .sx-tab .t::before,.sx-tab .p{display:none}
  .sx-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);padding-left:16px}
  .sx-panes{position:static}
}
@media (prefers-reduced-motion:reduce){.sx-pane{animation:none}.btn svg{transition:none}}

/* hero layout: copy and actions stay left, the 3D scene owns the right */
.hero-sub{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:22px}
.proofs{max-width:620px}
@media (max-width:800px){.proofs{display:none}}

/* hero fit: headline, actions and proof all land above the fold on a laptop */
.hero .wrap{padding-block:104px clamp(24px,3vw,40px);gap:clamp(16px,2.2vw,26px)}
.hero h1{font-size:clamp(44px,min(8.2vw,12.6vh),132px)}
.proofs{max-width:none;padding-top:16px}
/* ===== phase 3: logo, dock, visibility ===== */
:root{--muted:#BDCDC2;--line:#2C4F41;--glass:rgba(10,26,20,.9)}
body{font-size:17px}
.label{font-size:12.5px}
.ticks{font-size:16px}
.pm span,.facts span,.field label,.form-note,.pgroup .note{font-size:15.5px}
.sx-tab .p,.srow .pr,.price{font-size:13.5px}
.tile p,.card-b p,.member p,.step p{font-size:16px}
.legal{font-size:14.5px}
.btn{font-size:15.5px}
.btn.sm{font-size:14.5px}
.fcol a,.fcol p,.fcol .muted{font-size:16px}

/* logo */
.logo{gap:11px;font-size:23px;font-weight:700}
.logo svg{width:32px;height:30px;flex:none;color:var(--fg)}
.logo b{display:none}

/* mobile dock: the main pages are always one tap away */
.dock{display:none}
@media (max-width:1020px){
  .dock{display:flex;position:fixed;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:45;gap:2px;padding:5px;border-radius:999px;background:rgba(8,24,18,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 12px 34px rgba(0,0,0,.45);overflow-x:auto;scrollbar-width:none}
  .dock::-webkit-scrollbar{display:none}
  .dock a{flex:1 0 auto;min-height:46px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap;color:var(--fg)}
  .dock a[aria-current="page"]{background:var(--fg);color:var(--bg)}
  .dock a.go{background:var(--accent);color:var(--on-accent);font-weight:600}
  .legal{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .wa{bottom:calc(152px + env(safe-area-inset-bottom,0px));right:max(22px,env(safe-area-inset-right,0px))}
  .utx-root{bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;right:16px!important}
  .nav-r .btn.pri{display:none}
}

/* dock fit: all five links visible on a 360px phone */
@media (max-width:1020px){.dock a{padding:0 9px;font-size:14px}.dock a.go{padding:0 13px}}
@media (max-width:420px){.dock{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));padding:4px;gap:0}.dock a{padding:0 7px}.dock a.go{padding:0 11px}}
@media (max-width:340px){.dock a{font-size:13px;padding:0 6px}}
/* ===== phase 4: full width, new logo ===== */
:root{--gut:clamp(16px,3.4vw,72px)}
.wrap{max-width:1920px}
.logo svg{width:32px;height:32px}
@media (min-width:1700px){
  .phero h1{font-size:clamp(96px,5.6vw,132px)}
  .cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
  body{font-size:18px}
}
/* ===== phase 5: 3D footer ticker, 3D cards ===== */
.tick{perspective:900px;overflow:hidden;padding-top:clamp(20px,3vw,48px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.tick-in{transform:rotateX(24deg);transform-origin:50% 100%}
.tick-row{display:flex;align-items:center;gap:clamp(20px,3vw,60px);width:max-content;animation:slide 34s linear infinite}
.tw{font-family:var(--display);font-weight:800;font-size:clamp(60px,12.5vw,220px);letter-spacing:-.05em;line-height:.92;white-space:nowrap;padding-bottom:.06em;background:linear-gradient(100deg,var(--fg) 0%,var(--fg) 42%,var(--accent) 50%,var(--fg) 58%,var(--fg) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
.tw.o{background:none;-webkit-text-stroke:1.5px var(--accent-2);animation:none}
.tick svg{width:clamp(52px,9.5vw,160px);height:clamp(52px,9.5vw,160px);flex:none;color:var(--fg)}
@keyframes shine{from{background-position:130% 0}to{background-position:-130% 0}}
.tick:hover .tick-row{animation-play-state:paused}

/* cards lean toward the pointer */
.js .tile.rv.in,.js .plan.rv.in,.js .member.rv.in{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--ease),border-color .3s,opacity .9s var(--ease)}
.js .member.rv.in:hover{transform:perspective(1100px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.price{display:inline-flex;align-items:center;gap:8px}
.price::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
@media (prefers-reduced-motion:reduce){.tick-row,.tw{animation:none}.js .tile.rv.in,.js .plan.rv.in,.js .member.rv.in{transform:none}}

/* footer polish */
footer{background:linear-gradient(rgba(5,17,13,.9),var(--bg) 46%)}
@media (min-width:1021px){.legal{padding-right:96px}}
.tick-row{animation-duration:40s}
/* ===== phase 6: compact footer, balanced hero ===== */
/* closing call to action: one calm card */
.cta{padding-block:clamp(40px,6vw,96px)}
.cta-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;padding:clamp(26px,4vw,60px);border:1px solid var(--line);border-radius:calc(var(--r) + 6px);background:linear-gradient(115deg,rgba(20,156,104,.32),rgba(10,26,20,.94) 62%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cta-t{display:flex;flex-direction:column;gap:12px;min-width:0;flex:1 1 380px}
.cta h2{font-size:clamp(30px,4.2vw,60px);line-height:1.02;max-width:18ch;font-weight:700}
.cta-t p{color:var(--muted);max-width:44ch}
.cta .cta-row{margin-top:0}

/* footer: small and quiet */
footer{background:var(--bg)}
.fcols{padding-block:clamp(36px,4.5vw,60px) clamp(22px,3vw,36px)}
.legal{border-top:1px solid var(--line);padding-top:18px}
.legal a{text-underline-offset:3px}

/* hero: copy sits in the middle of the screen, nothing empty above it */
.hero{align-items:center;min-height:clamp(560px,86svh,840px)}
.hero .wrap{padding-block:112px 48px}
@media (max-width:900px){
  .hero{min-height:0;align-items:flex-start}
  .hero .wrap{padding-block:92px clamp(250px,38svh,330px)}
  .hero::after{content:"";position:absolute;inset:0 0 auto 0;height:66%;background:linear-gradient(rgba(5,17,13,.94) 62%,rgba(5,17,13,0));z-index:-1}
  .proofs{display:none}
}

/* dock on fold cover screens */
@media (max-width:340px){.dock a[href="/crm/"]{display:none}}
/* ===== phase 7: type, motion, colour block ===== */
:root{--display:"Archivo","Arial Black",Arial,sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
body{font-size:16.5px;line-height:1.62;letter-spacing:-.005em}
h1,h2,h3,h4{letter-spacing:-.015em}
/* wide, heavy, upper-case headlines */
h1,h2,.mq-t span,.reel-btn,.tile strong{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
h1{font-size:clamp(34px,min(5.6vw,10vh),96px);line-height:.98}
.hero h1{font-size:clamp(34px,min(5.6vw,10vh),96px);max-width:11ch}
.phero h1{font-size:clamp(30px,4.6vw,78px);max-width:15ch;line-height:1}
h2{font-size:clamp(26px,3.5vw,56px);line-height:1.02}
h2.md{font-size:clamp(22px,2.5vw,40px)}
.omni h2{font-size:clamp(30px,4.6vw,76px);font-weight:800;line-height:.98}
.cta h2{font-size:clamp(22px,2.7vw,42px);font-weight:800;line-height:1.05;max-width:16ch}
.mq-t span{font-size:clamp(22px,3.2vw,48px)}
.reel-btn{font-size:clamp(24px,4.6vw,70px)}
.tile strong{font-size:clamp(34px,4vw,64px)}
h3,.sx-tab .t,.faq summary,.clist b,.logo{font-weight:700;letter-spacing:-.02em}
.logo{font-stretch:112%;font-weight:800;font-size:21px}
.fd-t p.big{font-weight:600;letter-spacing:-.025em;font-size:clamp(21px,2.4vw,36px);line-height:1.15}
.quote{font-weight:600}
.btn{font-weight:600;letter-spacing:0}
.label{letter-spacing:.16em}
@media (min-width:1700px){.phero h1{font-size:clamp(78px,4.4vw,104px)}body{font-size:17.5px}}

/* motion: headings arrive out of a blur, media opens from a slanted shape */
main{animation:fade .6s var(--ease) both}
.js h2.rv{opacity:0;filter:blur(14px);transform:translate(-40px,0);transition:opacity .8s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.js h2.rv.in{opacity:1;filter:blur(0);transform:none}
.js .pc.rv,.js .card.rv,.js .reel.rv,.js .shot.rv{clip-path:polygon(18% 12%,100% 0,82% 88%,0 100%);opacity:0;transform:translateY(50px) scale(.96);transition:clip-path 1.1s var(--ease),opacity .7s var(--ease),transform 1.1s var(--ease),border-color .3s}
.js .pc.rv.in,.js .card.rv.in,.js .reel.rv.in,.js .shot.rv.in{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1;transform:none}
.js .card.rv.in:hover{transform:translateY(-6px)}

/* colour block: the product band cuts across the page */
.omni{position:relative;isolation:isolate;padding-block:clamp(96px,13vw,200px);margin-block:clamp(16px,3vw,48px)}
.omni::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,#0F8257,#0A5A3E);clip-path:polygon(0 5vw,100% 0,100% calc(100% - 5vw),0 100%)}
.omni .label{color:#F1F5EC}
.omni h2 em.g{color:#FFD27A}
.omni .wave i{background:linear-gradient(#FFD27A,#F1F5EC)}
.omni .panel{background:rgba(5,17,13,.9)}
@media (prefers-reduced-motion:reduce){
  main{animation:none}
  .js h2.rv,.js .pc.rv,.js .card.rv,.js .reel.rv,.js .shot.rv{opacity:1;filter:none;transform:none;clip-path:none;transition:none}
}

/* phase 7b: inner page heroes start right under the menu */
.phero{padding-block:clamp(104px,9vw,150px) clamp(40px,6vw,84px)}
/* ===== phase 8: 3D icons, showcase scenes ===== */
/* 3D icon on every text card */
.ico3d{position:relative;width:60px;height:60px;flex:none;display:grid;place-items:center;border-radius:18px;color:var(--fg);background:linear-gradient(145deg,#1FA873,#07382A);border:1px solid rgba(241,245,236,.35);transform-style:preserve-3d;transform:perspective(520px) rotateX(20deg) rotateY(-26deg);transition:transform .6s var(--ease);box-shadow:0 18px 30px rgba(0,0,0,.4);animation:bob 5s ease-in-out infinite}
.ico3d::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform:translateZ(-16px) translate(7px,7px);opacity:.9}
.ico3d::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#05110D;transform:translateZ(-8px) translate(3.5px,3.5px)}
.ico3d svg{position:relative;z-index:1;width:28px;height:28px;transform:translateZ(14px)}
.tile.ic:hover .ico3d,.step.ic:hover .ico3d{transform:perspective(520px) rotateX(0) rotateY(0) translateY(-4px) scale(1.06)}
.tile.ic{justify-content:flex-start;gap:16px}
.tile.ic p{margin-top:auto}
.tile.hot .ico3d{border-color:rgba(5,17,13,.25)}
.info .tile.ic{gap:10px}.info .tile.ic p{margin-top:0}
.step.ic::before{position:absolute;right:0;top:18px}
.step.ic{position:relative}
@keyframes bob{50%{translate:0 -5px}}
.tile.ic:nth-child(2n) .ico3d{animation-delay:-1.6s}.tile.ic:nth-child(3n) .ico3d{animation-delay:-3.1s}

/* showcase scenes: layered 3D illustrations that follow the pointer */
.pv.vis{transform:none;perspective:900px;display:grid;place-items:center;background:radial-gradient(70% 80% at 72% 26%,rgba(43,217,143,.26),transparent 70%),linear-gradient(160deg,#0E2A20,#07140F)}
.sc{position:relative;width:64%;aspect-ratio:10/7;transform-style:preserve-3d;transform:rotateX(calc(14deg + var(--rx,0deg))) rotateY(calc(-26deg + var(--ry,0deg)));transition:transform .5s var(--ease)}
.ly{position:absolute;inset:0}
.ly svg{width:100%;height:100%;display:block;overflow:visible}
.l1{transform:translateZ(-46px)}.l2{transform:translateZ(8px);filter:drop-shadow(0 16px 22px rgba(0,0,0,.5))}.l3{transform:translateZ(64px);animation:bob 4s ease-in-out infinite}
.card:hover .sc{transform:rotateX(calc(4deg + var(--rx,0deg))) rotateY(calc(-8deg + var(--ry,0deg))) scale(1.05)}
@media (prefers-reduced-motion:reduce){.ico3d,.l3{animation:none}}