/* =====================================================================
   3X CAPITAL — PREMIUM CINEMA  ·  shared design system
   Black / red / white. Optima + IBM Plex Mono. Motion is transform/opacity/
   clip-path only (compositor). Every page loads this file; page-specific
   rules live in each page's own <style>.
   ===================================================================== */

:root{
  --black:#0a0a0a; --coal:#121212; --panel:#161616; --panel-2:#1c1c1c;
  --ink:#f5f2f0; --dim:rgba(245,242,240,.62); --faint:rgba(245,242,240,.38);
  --red:#720000; --red-dark:#390000; --red-lift:#cc3333;
  --line:rgba(245,242,240,.14); --line-soft:rgba(245,242,240,.08);
  --head:'optima-lt-pro',Optima,'Optima Nova',Candara,'Gill Sans','Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --max:1280px; --pad:32px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:thin;scrollbar-color:var(--red-dark) var(--black)}
body{background:var(--black);color:var(--ink);font-family:var(--head);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--head);font-weight:400;letter-spacing:-0.015em}
button{font-family:inherit}
::selection{background:var(--red);color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wrap-n{max-width:880px;margin:0 auto;padding:0 var(--pad)}
a:focus-visible,button:focus-visible{outline:2px solid var(--red-lift);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- type ---------- */
.mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.mono b{color:var(--red-lift);font-weight:500}
.h1{font-size:clamp(44px,7vw,104px);line-height:1.0;font-weight:400;letter-spacing:-0.02em}
.h2{font-size:clamp(34px,4.6vw,60px);line-height:1.04;font-weight:400}
.h3{font-size:clamp(22px,2.4vw,32px);line-height:1.15;font-weight:400}
.h1 i,.h2 i,.h3 i{font-style:normal;color:var(--red-lift)}
.lead{font-size:clamp(17px,1.8vw,22px);line-height:1.55;color:var(--ink)}
.body{font-size:15.5px;line-height:1.8;color:var(--dim)}
.body p+p{margin-top:1.2em}
.body b,.body strong{color:var(--ink);font-weight:600}
.eyebrow{display:block;margin-bottom:26px}
.eyebrow.drawn::before{transform:scaleX(1)}
/* the red hairline that draws over a label: add .hair to any .mono */
.hair{position:relative;display:inline-block;padding-top:14px}
.hair::before{content:"";position:absolute;left:0;top:0;width:38px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease) .1s}
.center .hair::before,.hair.c::before{left:50%;margin-left:-19px;transform-origin:50% 50%}
.hair.drawn::before{transform:scaleX(1)}

/* ---------- buttons / links ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--head);font-size:15px;font-weight:600;padding:17px 36px;border:0;border-radius:999px;cursor:pointer;transition:transform .35s,box-shadow .35s,background .35s,color .35s,border-color .35s}
.btn-red{background:linear-gradient(135deg,var(--red-dark),var(--red));color:#fff}
.btn-red:hover{box-shadow:0 16px 40px rgba(114,0,0,.45);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:13px 26px;font-size:13.5px}
.tlink{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--red);padding-bottom:6px;transition:color .3s;white-space:nowrap}
.tlink:hover{color:var(--red-lift)}
.arrow::after{content:"→";display:inline-block;transition:transform .35s}
.arrow:hover::after{transform:translateX(4px)}

/* ---------- motion primitives ---------- */
.js [data-reveal]{opacity:0;transform:translateY(36px)}
.js [data-hero]{opacity:0;transform:translateY(40px)}
.lr{display:block;overflow:hidden}
.lr>span{display:inline-block;will-change:transform}
.w{opacity:.18}
.chap{display:flex;align-items:center;gap:18px;margin-bottom:54px}
.chap::after{content:"";flex:1;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease)}
.chap.drawn::after{transform:scaleX(1)}
.chap .mono{white-space:nowrap}
.chap .n{font-family:var(--mono);font-size:11px;color:var(--red-lift);letter-spacing:.2em}

/* ---------- page wipe (inner pages) ---------- */
#wipe{position:fixed;inset:0;z-index:200;background:var(--black);display:flex;align-items:center;justify-content:center;clip-path:inset(0 0 0% 0);pointer-events:none}
#wipe img{height:64px;opacity:0;transform:translateY(14px)}

/* ---------- header ---------- */
header.site{position:fixed;inset:0 0 auto;z-index:100;padding:22px 0;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
/* header scrim band: the film can open on frames as bright as the nav text,
   so the transparent header carries its own gradient instead of trusting the
   hero grade. Fades over ~150px, removed the moment the header goes solid. */
.dark-hero header.site:not(.solid)::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(rgba(5,5,5,.58),rgba(5,5,5,.28) 55%,transparent);pointer-events:none;z-index:-1}

header.site.solid{background:rgba(10,10,10,.82);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:12px 0;border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav>a img{height:50px;transition:transform .4s;transform-origin:left center}
header.site.solid .nav>a img{transform:scale(.8)}
.nav ul{display:flex;gap:30px;list-style:none}
.nav ul a{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.8;transition:opacity .3s,color .3s,border-color .3s;padding-bottom:4px;border-bottom:1px solid transparent}
.nav ul a:hover,.nav ul a.on{opacity:1;border-color:var(--red-lift)}
.nav .btn{padding:13px 26px;font-size:13.5px}
.nav-r{display:flex;align-items:center;gap:18px}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative}
.burger i{position:absolute;left:10px;right:10px;height:1px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:28px}
.burger.x i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1000px){.nav ul{display:none}.nav .btn{display:none}.burger{display:block}}

/* ---------- mobile menu ---------- */
.mnav{position:fixed;inset:0;z-index:99;background:var(--black);display:flex;flex-direction:column;justify-content:center;padding:100px var(--pad) 40px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);visibility:hidden}
.mnav.open{clip-path:inset(0 0 0% 0);visibility:visible}
.mnav ul{list-style:none}
.mnav li{overflow:hidden}
.mnav li a,.mnav li button{display:inline-block;background:none;border:0;padding:0;cursor:pointer;text-align:left;font-family:var(--head);font-size:clamp(34px,9vw,56px);line-height:1.2;transform:translateY(110%);transition:transform .8s var(--ease);color:var(--ink)}
.mnav li a.on{color:var(--red-lift)}
.mnav.open li a,.mnav.open li button{transform:translateY(0)}
.mnav .m-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;opacity:0;transition:opacity .6s .5s}
.mnav.open .m-foot{opacity:1}
.mnav .m-foot a{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* ---------- page hero (inner pages) ---------- */
.ph{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;padding:140px 0 72px}
.ph.short{min-height:72vh;min-height:72svh}
.ph.center{align-items:center;text-align:center}
.ph.center .ph-body{display:flex;flex-direction:column;align-items:center}
.ph.center .ph-sub{margin-left:auto;margin-right:auto}
.ph-media{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.ph::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,.62),rgba(10,10,10,.24) 36%,rgba(10,10,10,.32) 62%,rgba(10,10,10,.94))}
.ph.plain{background:var(--black)} .ph.plain::after{background:none}
.ph .wrap{width:100%}
.ph .h1{max-width:14ch}
.ph-sub{font-size:clamp(17px,1.8vw,22px);line-height:1.55;max-width:46ch;color:var(--ink);margin-top:28px}
.h-ctas{display:flex;align-items:center;gap:26px;margin-top:34px;flex-wrap:wrap}
.ph.center .h-ctas{justify-content:center}
.ph-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.h-cue{position:absolute;right:44px;bottom:44px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
.h-cue span{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);writing-mode:vertical-rl}
.h-cue i{width:1px;height:52px;background:var(--line);overflow:hidden;position:relative}
.h-cue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--red-lift);animation:cue 2.2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes cue{to{top:110%}}
@media(max-width:900px){.ph{padding-top:110px}.h-cue{display:none}}

/* ---------- statement (centred title sequence) ---------- */
.state{padding:170px 0;background:var(--black);text-align:center}
.state .eyebrow{display:inline-block;margin-bottom:44px}
.st-h{margin:0 auto}
.st-line{display:block;overflow:hidden;font-family:var(--head);font-size:clamp(44px,7.2vw,104px);line-height:1.04;letter-spacing:-0.015em;font-weight:400}
.st-line>span{display:inline-block;will-change:transform}
.st-line.red>span{color:var(--red-lift)}
.st-note{font-size:clamp(16px,1.6vw,20px);line-height:1.7;color:var(--dim);max-width:52ch;margin:44px auto 0}
@media(max-width:480px){.st-line{font-size:clamp(34px,10.4vw,44px)}}

/* ---------- sections ---------- */
.sec{padding:130px 0}
.sec.tight{padding:96px 0}
.sec.coal{background:var(--coal)}
.sec.black{background:var(--black)}
.sec.rule{border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:54px;flex-wrap:wrap}
.sec-head .mono{display:block;margin-bottom:18px}
.sec-head .h2{margin-top:0}
.sec-head p{max-width:52ch}
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.two.v-center{align-items:center}
.two .sticky{position:sticky;top:120px}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:40px}.two .sticky{position:static}.sec{padding:96px 0}}

/* ---------- media frames ---------- */
.frame{position:relative;border-radius:10px;overflow:hidden;isolation:isolate;background:var(--panel)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.frame:hover img{transform:scale(1.04)}
.frame.r43{aspect-ratio:4/3}.frame.r34{aspect-ratio:3/4}.frame.r169{aspect-ratio:16/9}.frame.r219{aspect-ratio:21/9}.frame.r1{aspect-ratio:1}
.frame .cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2}
.frame .shade::after,.frame.shade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.04) 44%,rgba(10,10,10,.85));z-index:1}
.chip-red{position:absolute;z-index:2;top:18px;left:18px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--red);padding:8px 14px;border-radius:2px}
.chip{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:7px 12px;border-radius:2px}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}.grid.c5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.grid.c5{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid.c2,.grid.c3,.grid.c4,.grid.c5{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line-soft);border-radius:10px;padding:30px 28px;transition:border-color .4s,transform .4s}
.card:hover{border-color:var(--line)}
.card .n{font-family:var(--mono);font-size:11px;color:var(--red-lift);letter-spacing:.2em;display:block;margin-bottom:22px}
.card h3{font-size:20px;font-weight:600;line-height:1.25}
.card p{font-size:14.5px;line-height:1.7;color:var(--dim);margin-top:12px}
/* image card with caption, used for projects / communities / studio / agents */
.icard{position:relative;display:block;border-radius:10px;overflow:hidden;isolation:isolate;background:var(--panel)}
.icard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .5s}
.icard:hover img{transform:scale(1.06)}
.icard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.05) 44%,rgba(10,10,10,.86))}
.icard .cap{position:absolute;z-index:2;left:20px;right:20px;bottom:20px}
.icard .cap b{display:block;font-family:var(--head);font-size:20px;font-weight:600;color:#fff;line-height:1.2;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:8px;transition:border-color .35s}
.icard:hover .cap b{border-color:#fff}
.icard .cap span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,240,.7);margin-bottom:10px}
.icard .cap small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,240,.7);margin-top:10px}
.icard.r34{aspect-ratio:3/4}.icard.r43{aspect-ratio:4/3}.icard.r1{aspect-ratio:1}.icard.r169{aspect-ratio:16/9}.icard.tall{aspect-ratio:3/4.3}

/* ---------- rows list (services / jobs / faq) ---------- */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:64px 1fr auto;gap:28px;align-items:start;padding:34px 0;border-bottom:1px solid var(--line);position:relative}
.row .n{font-family:var(--mono);font-size:11px;color:var(--red-lift);letter-spacing:.2em;padding-top:10px}
.row h3{font-size:clamp(22px,2.6vw,34px);font-weight:400;line-height:1.15;transition:transform .5s var(--ease),color .3s}
.row:hover h3{transform:translateX(10px)}
.row .d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.row .d>p{overflow:hidden;font-size:15px;line-height:1.7;color:var(--dim);max-width:56ch}
.row:hover .d,.row.on .d{grid-template-rows:1fr}
.row:hover .d>p,.row.on .d>p{margin-top:14px}
.row .r{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);padding-top:12px;white-space:nowrap}
.row::before{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.row:hover::before{transform:scaleX(1)}
@media(max-width:700px){.row{grid-template-columns:44px 1fr;gap:16px}.row .r{grid-column:2}}
/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;background:none;border:0;color:var(--ink);text-align:left;font-family:var(--head);font-size:clamp(17px,1.7vw,21px);cursor:pointer}
.faq-q i{position:relative;width:22px;height:22px;flex:0 0 22px}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--red-lift);transition:transform .5s var(--ease)}
.faq-q i::after{transform:rotate(90deg)}
.faq-i.on .faq-q i::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.faq-a>div{overflow:hidden}
.faq-a p{font-size:15px;line-height:1.75;color:var(--dim);padding:0 0 26px;max-width:64ch}
.faq-i.on .faq-a{grid-template-rows:1fr}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:44px 28px 40px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--head);font-size:clamp(40px,4.6vw,64px);font-weight:400;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.stat b em{font-style:normal;color:var(--red-lift)}
.stat span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-top:16px;line-height:1.7}
@media(max-width:700px){.stat{border-right:0;border-bottom:1px solid var(--line);padding:30px 0}.stat:last-child{border-bottom:0}}

/* ---------- facts (property / community / developer key facts) ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.fact{padding:26px 24px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact em{display:block;font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.fact strong{display:block;font-family:var(--head);font-size:clamp(18px,1.8vw,24px);font-weight:600;margin-top:10px;line-height:1.2}
.fact strong i{font-style:normal;color:var(--red-lift)}
@media(max-width:900px){.facts{grid-template-columns:1fr 1fr}.fact:nth-child(2n){border-right:0}.fact:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ---------- ranking table (3X Developer Index · dxbinteract pattern) ---------- */
.rank{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.rank th{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);text-align:left;padding:0 18px 18px;border-bottom:1px solid var(--line);font-weight:500}
.rank td{padding:22px 18px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:15px}
.rank tr{transition:background .3s}
.rank tbody tr:hover{background:var(--panel)}
.rank .pos{font-family:var(--head);font-size:clamp(22px,2.2vw,30px);color:var(--red-lift);width:72px}
.rank .who{display:flex;align-items:center;gap:18px}
.rank .who img{height:30px;width:72px;object-fit:contain;filter:invert(1) grayscale(1) brightness(1.7);opacity:.8}
.rank .who b{font-weight:600;font-size:16px}
.rank .who small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.rank .num{text-align:right;color:var(--ink)}
.rank .bar{position:relative;height:2px;background:var(--line-soft);min-width:120px}
.rank .bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--red-dark),var(--red-lift));transform-origin:0 50%;transform:scaleX(var(--v,0));transition:transform 1.4s var(--ease)}
.rank .bar.drawn i{transform:scaleX(var(--v,0))}
.rank .r-link{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.rank tr:hover .r-link{color:var(--red-lift)}
.rank-wrap{overflow-x:auto}
@media(max-width:800px){.rank .hide-m{display:none}.rank td,.rank th{padding-left:10px;padding-right:10px}}

/* ---------- developers rail ---------- */
.devs{padding:96px 0;background:var(--coal);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.devs .mono{display:block;text-align:center;margin-bottom:44px}
.rail{display:flex;width:max-content;animation:rail 60s linear infinite}
.rail:hover{animation-play-state:paused}
.rail-g{display:flex;align-items:center;flex:0 0 auto}
.rail-g img{height:44px;width:auto;max-width:150px;object-fit:contain;margin:0 44px;filter:invert(1) grayscale(1) brightness(1.7);opacity:.62;transition:opacity .4s}
.rail-g img:hover{opacity:1}
@keyframes rail{to{transform:translateX(-50%)}}
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logo-cell{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px;transition:background .4s;position:relative}
.logo-cell img{max-height:46px;max-width:78%;object-fit:contain;filter:invert(1) grayscale(1) brightness(1.7);opacity:.62;transition:opacity .4s,transform .5s var(--ease)}
a.logo-cell:hover{background:var(--panel)} a.logo-cell:hover img{opacity:1;transform:scale(1.06)}
.logo-cell .lc-n{position:absolute;left:12px;top:10px;font-family:var(--mono);font-size:9px;color:var(--faint);letter-spacing:.2em}
@media(max-width:1000px){.logo-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.logo-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- consultant stage (cutout on red glow) ---------- */
.guide{position:relative;background:var(--black);overflow:hidden}
.guide .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end}
.g-copy{padding:130px 0}
.g-copy p{font-size:15px;line-height:1.75;color:var(--dim);margin-top:22px;max-width:46ch}
.g-acts{display:flex;gap:18px;margin-top:36px;flex-wrap:wrap;align-items:center}
.g-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:560px}
.g-stage::before{content:"";position:absolute;left:50%;bottom:-8%;transform:translateX(-50%);width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(114,0,0,.2),transparent 65%)}
.g-photo{position:relative;width:min(440px,100%);height:min(560px,64vh);object-fit:cover;object-position:top;border-radius:12px;border:1px solid var(--line-soft)}
.g-id{position:static;margin-top:20px;width:min(440px,100%)}
.g-id b{display:block;font-family:var(--head);font-size:22px;font-weight:600}
.g-id span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:8px}
@media(max-width:900px){.guide .wrap{grid-template-columns:1fr;gap:0}.g-copy{padding:80px 0 0}.g-stage{min-height:0;margin-top:40px}.g-photo{height:min(430px,54vh)}}
/* agent cutout tile (team page) */
.acard{position:relative;display:block;border-radius:10px;overflow:hidden;background:radial-gradient(120% 80% at 50% 100%,rgba(114,0,0,.32),var(--panel) 70%);aspect-ratio:3/4;isolation:isolate;border:1px solid var(--line-soft);transition:border-color .4s}
.acard:hover{border-color:var(--line)}
.acard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.acard:hover img{transform:scale(1.04)}
.acard .cap{position:absolute;left:18px;right:18px;bottom:18px;z-index:2}
.acard .cap b{display:block;font-family:var(--head);font-size:18px;font-weight:600;color:#fff}
.acard .cap span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,242,240,.7);margin-top:6px}
.acard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,transparent,rgba(10,10,10,.9));z-index:1}
.mono-av{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-family:var(--head);font-size:64px;color:var(--red-lift);letter-spacing:-0.02em}

/* ---------- quote band ---------- */
.quote{padding:140px 0;background:var(--coal);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quote blockquote{font-size:clamp(24px,3.2vw,44px);line-height:1.25;max-width:28ch;font-weight:400}
.quote blockquote::before{content:"\201C";color:var(--red-lift)}
.quote cite{display:block;font-style:normal;margin-top:38px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.quote cite b{display:block;font-family:var(--head);font-size:18px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600;margin-bottom:8px}

/* ---------- reviews (white cuts on maroon) ---------- */
.trust{padding:120px 0;background:linear-gradient(165deg,#4a0606 0%,#2c0404 56%,#180707 100%)}
.trust .sec-head .mono{color:rgba(245,230,230,.72)}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.t-card{background:#fff;color:#0d0d0d;border-radius:12px;padding:30px 28px 26px;display:flex;flex-direction:column;box-shadow:0 18px 44px rgba(0,0,0,.3)}
.t-who{display:flex;align-items:center;gap:14px}
.t-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--head);font-weight:700;font-size:16px;flex-shrink:0;background:linear-gradient(140deg,#8c1b1b,#5a0000)}
.t-who b{font-family:var(--head);font-size:16px;font-weight:600;display:block}
.t-who small{color:#8a8a8a;font-size:12.5px;font-family:var(--mono)}
.t-stars{color:#FBBC04;font-size:14px;letter-spacing:2px;margin:16px 0 10px}
.t-card p{position:relative;font-size:14.5px;line-height:1.7;color:#3d3a35;padding-left:18px}
.t-card p::before{content:"\201C";position:absolute;left:-4px;top:-12px;font-family:Georgia,serif;font-size:52px;line-height:1;color:rgba(114,0,0,.14)}
.t-g{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6d6a64}
@media(max-width:900px){.t-grid{grid-template-columns:1fr}}

/* ---------- film (YouTube) ---------- */
.film{padding:120px 0;background:var(--black)}
.f-frame{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:21/9;border:1px solid var(--line)}
.f-frame iframe,.f-mini iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.f-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.f-row>*{min-width:0}
.f-mini{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line)}
.f-t{display:block;font-family:var(--head);font-size:15px;font-weight:600;letter-spacing:-0.008em;margin-top:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){.f-frame{aspect-ratio:16/9}.f-row{grid-template-columns:1fr;gap:34px}.f-t{white-space:normal}}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:26px}
.field span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);padding:12px 0;font-family:var(--head);font-size:17px;outline:none;border-radius:0;transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red-lift)}
.field textarea{min-height:110px;resize:vertical}
.field select option{background:var(--panel);color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
@media(max-width:600px){.f2{grid-template-columns:1fr}}
.form-ok{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-lift);margin-top:20px}
.form.sent .form-ok{display:block}

/* ---------- CTA ---------- */
.cta{padding:150px 0 130px;background:var(--coal);border-top:1px solid var(--line);text-align:center}
.cta .mono{display:block;margin-bottom:30px}
.cta h2{font-size:clamp(38px,5.4vw,72px);line-height:1.02;max-width:16ch;margin:0 auto}
.cta h2 i{font-style:normal;color:var(--red-lift)}
.cta .btn{margin-top:46px}
.cta .sub{display:block;margin-top:22px}

/* ---------- footer ---------- */
footer.site{padding:100px 0 40px;background:var(--black);border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px;margin-bottom:64px}
footer img.flogo{height:50px}
.f-addr{font-family:var(--head);font-size:14px;line-height:1.9;color:var(--dim);margin-top:24px}
.f-tel{display:inline-block;font-family:var(--head);font-size:15px;font-weight:600;color:var(--ink);margin-top:18px;transition:color .3s}
.f-tel:hover{color:var(--red-lift)}
footer h3.fh{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:24px;color:var(--ink)}
footer ul{list-style:none}
footer li{margin-bottom:13px}
footer li a{font-family:var(--head);font-size:14.5px;color:var(--dim);transition:color .3s;border-bottom:1px solid transparent;padding-bottom:2px}
footer li a:hover{color:var(--ink);border-color:var(--red)}
.f-nl{font-family:var(--head);font-size:14px;line-height:1.7;color:var(--dim)}
.news{display:flex;border-bottom:1px solid var(--line);margin-top:16px}
.news input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);padding:12px 0;outline:none;font-family:var(--head);font-size:15px}
.news input::placeholder{color:var(--faint)}
.news button{background:none;border:0;color:var(--red-lift);font-size:22px;cursor:pointer;transition:transform .3s}
.news button:hover{transform:translateX(4px)}
.f-bot{padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.f-legal{display:flex;gap:10px 26px;flex-wrap:wrap}
.f-legal a{color:var(--faint);transition:color .3s}
.f-legal a:hover{color:var(--ink)}
@media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr;gap:40px 28px}}
@media(max-width:600px){.f-grid{grid-template-columns:1fr}}

/* ---------- wizard ---------- */
.wiz{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(5,5,5,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wiz.open{display:flex}
.wiz-panel{position:relative;width:min(880px,100%);max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:clamp(28px,4.5vw,56px)}
.wiz-x{position:absolute;top:18px;right:20px;width:42px;height:42px;border:0;background:none;color:var(--ink);font-size:19px;cursor:pointer;opacity:.7;transition:opacity .3s,transform .3s}
.wiz-x:hover{opacity:1;transform:rotate(90deg)}
.wiz-h{font-size:clamp(28px,3.6vw,46px);line-height:1.06}
.wiz-sub{display:block;margin-top:14px}
.wiz-step{display:none}
.wiz-step.on{display:block}
.wiz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.wiz-card{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--coal);cursor:pointer;padding:0;aspect-ratio:4/3;display:flex;align-items:flex-end;transition:border-color .35s,transform .35s}
.wiz-card:hover{border-color:var(--red-lift);transform:translateY(-4px)}
.wiz-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.wiz-card span{position:relative;z-index:2;width:100%;padding:14px 16px;font-family:var(--head);font-size:17px;font-weight:600;color:var(--ink);text-align:left;background:linear-gradient(180deg,transparent,rgba(5,5,5,.82))}
.wiz-bar{align-items:flex-end;justify-content:flex-start;background:var(--coal)}
.wiz-bar i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,var(--red),var(--red-dark));opacity:.8}
.wiz-flat{aspect-ratio:auto;padding:34px 0;align-items:center;justify-content:center}
.wiz-flat span{background:none;text-align:center;padding:0}
.wiz-brief{font-size:16px;line-height:1.8;color:var(--dim);margin-top:26px;max-width:46ch}
.wiz-brief b{color:var(--ink)}
.wiz .btn{margin-top:30px}
.wiz-note{display:block;margin-top:18px;text-transform:none;letter-spacing:.06em}
.wiz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:38px;padding-top:20px;border-top:1px solid var(--line)}
.wiz-prev{background:none;border:0;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;visibility:hidden}
.wiz-prev.show{visibility:visible}
.wiz-prev:hover{color:var(--ink)}
.wiz-grid.g2{grid-template-columns:repeat(2,1fr)}
.ap-form{margin-top:34px}
.ap-form .btn{margin-top:8px}
.ap-err{color:var(--red-lift)}
@media(max-width:700px){.wiz-grid,.wiz-grid.g2{grid-template-columns:1fr}.wiz-card{aspect-ratio:16/7}.wiz-flat{aspect-ratio:auto}}

/* ---------- custom cursor (fine pointers only) ----------
   .cur / .cur-ring are moved by GSAP (inline transform); the visible parts are
   inner elements so CSS states can scale them without fighting that transform. */
@media(pointer:fine){
  .cur,.cur-ring{position:fixed;left:0;top:0;z-index:300;pointer-events:none;width:0;height:0}
  .cur i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--red-lift);transition:transform .35s var(--ease),opacity .25s;will-change:transform}
  .cur-ring .disc{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(245,242,240,.55);transition:transform .5s var(--ease),background .35s,border-color .35s;will-change:transform}
  .cur-ring .tag{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#0a0a0a;opacity:0;transition:opacity .25s .05s}
  body.cur-hover .cur i{transform:scale(.5)}
  body.cur-hover .cur-ring .disc{transform:scale(1.55);border-color:var(--red-lift)}
  body.cur-label .cur i{opacity:0}
  body.cur-label .cur-ring .disc{transform:scale(2);background:var(--ink);border-color:var(--ink)}
  body.cur-label .cur-ring .tag{opacity:1}
  body.cur-down .cur-ring .disc{transform:scale(1.2)}
  body.cur-label.cur-down .cur-ring .disc{transform:scale(1.8)}
}
@media(pointer:coarse){.cur,.cur-ring{display:none}}

/* ---------- legal / long copy ---------- */
.prose{font-size:15.5px;line-height:1.85;color:var(--dim)}
.prose h2{font-size:clamp(22px,2.4vw,30px);color:var(--ink);margin:54px 0 16px}
.prose h3{font-size:19px;color:var(--ink);margin:34px 0 10px;font-weight:600}
.prose p+p{margin-top:1em}
.prose ul{margin:12px 0 12px 20px}
.prose li{margin-bottom:6px}
.prose a{color:var(--ink);border-bottom:1px solid var(--red)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-hero]{opacity:1!important;transform:none!important}
  .st-line>span,.lr>span{transform:none!important}
  .w{opacity:1!important}
  .hair::before,.chap::after{transform:scaleX(1)!important}
  .rank .bar i{transform:scaleX(var(--v,0))!important}
  .h-cue i::after{animation:none}
  .rail{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  *{transition:none!important}
}

/* ---------- motion layer v2: everything below is transform / opacity / clip-path only ---------- */
.pbar{position:fixed;left:0;top:0;z-index:101;width:100%;height:2px;background:var(--red-lift);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.xfade{position:fixed;inset:0;z-index:250;background:var(--black);clip-path:inset(100% 0 0 0);pointer-events:none;will-change:clip-path}
header.site{transition:background .4s,border-color .4s,transform .5s var(--ease)}
header.site.hide{transform:translateY(-100%)}
.ph-media{will-change:transform;transform-origin:50% 40%}
.js .icard img,.js .frame>img,.js .frame>video,.js .lg-hero img,.js .lg-card img{will-change:transform,clip-path}
.btn-red{position:relative;overflow:hidden;isolation:isolate}
.btn-red::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg) translateX(0);transition:transform .9s var(--ease);pointer-events:none}
.btn-red:hover::after{transform:skewX(-18deg) translateX(480%)}
.tlink{position:relative;border-bottom:0;padding-bottom:6px}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);transform:scaleX(1);transform-origin:0 50%;transition:transform .5s var(--ease)}
.tlink:hover::after{transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s var(--ease)}
.tlink:hover{color:var(--red-lift)}
/* home hero: cycling kicker */
.h-cycle{display:flex;align-items:center;gap:16px;margin-bottom:26px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.h-cycle .cy{position:relative;overflow:hidden;height:16px;min-width:36ch}
.h-cycle .cy span{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform}
.h-cycle .cy span b{color:var(--red-lift);font-weight:500}
.h-cycle i{position:relative;width:38px;height:1px;background:var(--line);overflow:hidden}
.h-cycle i::after{content:"";position:absolute;inset:0;background:var(--red-lift);transform:scaleX(0);transform-origin:0 50%}
.h-cycle i.run::after{animation:cyrun 3.2s linear forwards}
@keyframes cyrun{to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  .pbar,.xfade{display:none}
  header.site.hide{transform:none}
  .h-cycle i.run::after{animation:none;transform:scaleX(1)}
}

/* ---------- motion layer v3 ---------- */
.wipe-edge{position:fixed;left:0;right:0;top:0;height:3px;background:var(--red-lift);z-index:251;transform:translateY(100vh);pointer-events:none;will-change:transform}
.js header.site .nav>a,.js header.site .nav ul>li>a,.js header.site .nav-r{opacity:0}
.row{position:relative}
.row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);opacity:.35;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s var(--ease)}
.row.in::after{transform:scaleX(1)}
.stat{position:relative}
.stat::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease) .3s}
.stat.in::after{transform:scaleX(1)}
@media(max-width:700px){.stat::after{left:0;right:0}}
footer.site{position:relative}
.f-streak{position:absolute;left:0;top:-1px;width:100%;height:1px;background:linear-gradient(90deg,var(--red-lift),var(--red) 40%,transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--ease)}
.f-streak.in{transform:scaleX(1)}
.js footer.site .f-grid>div,.js footer.site .f-bot{opacity:0}
.icard,.card,.t-card,.acard,.logo-cell{transform-style:preserve-3d;backface-visibility:hidden}
.btn{will-change:transform}
@media (prefers-reduced-motion: reduce){
  .wipe-edge{display:none}
  .js header.site .nav>a,.js header.site .nav ul>li>a,.js header.site .nav-r,.js footer.site .f-grid>div,.js footer.site .f-bot{opacity:1}
  .row::after,.stat::after,.f-streak{transform:scaleX(1)}
}


/* ---------- motion layer v4 ---------- */
/* section rules draw instead of simply being there */
.sec.rule,.devs,.quote,.cta{border-top-color:transparent!important;position:relative}
.sec.rule::before,.devs::before,.quote::before,.cta::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--ease)}
.sec.rule.in::before,.devs.in::before,.quote.in::before,.cta.in::before{transform:scaleX(1)}
/* ticker band */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--black);padding:18px 0}
.ticker .tk{display:flex;align-items:center;width:max-content;animation:tk 42s linear infinite;will-change:transform}
.ticker:hover .tk{animation-play-state:paused}
.ticker span{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.ticker i{display:block;width:6px;height:6px;border-radius:50%;background:var(--red-lift);margin:0 34px;flex:0 0 6px}
@keyframes tk{to{transform:translateX(-50%)}}
.ring i{transform-origin:50% 50%}
@media (prefers-reduced-motion: reduce){
  .sec.rule::before,.devs::before,.quote::before,.cta::before{transform:scaleX(1)}
  .ticker .tk{animation:none}
}

/* ---------- people: staggered portrait masonry with pill labels (the humaan.com/about pattern) ---------- */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start}
.people>*:nth-child(4n+1),.people>*:nth-child(4n+3){margin-top:76px}
.pcard{position:relative;display:block;border-radius:18px;overflow:hidden;isolation:isolate;aspect-ratio:3/4;background:radial-gradient(120% 90% at 50% 100%,rgba(114,0,0,.22),var(--panel) 72%);border:1px solid var(--line-soft);transition:border-color .4s}
.pcard:hover{border-color:var(--line)}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .9s var(--ease)}
.pcard:hover img{transform:scale(1.04)}
.pcard .mono-av{top:44%}
.pcard .pill{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:10px;max-width:calc(100% - 28px);background:#fff;color:#0a0a0a;border-radius:999px;padding:4px 14px 4px 4px;font-family:var(--head);font-size:13.5px;line-height:1.2;box-shadow:0 8px 24px rgba(0,0,0,.22);transform:translateY(8px);opacity:0;transition:transform .6s var(--ease),opacity .5s}
.pcard.in .pill,.pcard:hover .pill{transform:translateY(0);opacity:1}
.pcard .pill b{flex:0 0 auto;background:var(--red);color:#fff;border-radius:999px;padding:8px 14px;font-weight:600;white-space:nowrap}
.pcard .pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.people-wide{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 var(--pad)}
@media(max-width:1100px){.people{grid-template-columns:repeat(3,1fr)}.people>*{margin-top:0!important}.people>*:nth-child(3n+2){margin-top:56px!important}}
@media(max-width:700px){.people{grid-template-columns:repeat(2,1fr);gap:14px}.people>*{margin-top:0!important}.people>*:nth-child(2n){margin-top:40px!important}.pcard .pill{left:10px;bottom:10px;font-size:12px;padding:3px 10px 3px 3px}.pcard .pill b{padding:6px 10px}}
body.theme-mono .pcard{background:radial-gradient(120% 90% at 50% 100%,rgba(245,242,240,.12),var(--panel) 72%)}
body.theme-mono .pcard .pill b{background:#0a0a0a}
body.theme-crimson .pcard{background:radial-gradient(120% 90% at 50% 100%,rgba(138,10,10,.3),var(--panel) 72%)}
body.theme-white .pcard{background:radial-gradient(120% 90% at 50% 100%,rgba(114,0,0,.12),var(--panel-2) 72%);border-color:var(--line-soft)}
body.theme-white .pcard .pill{box-shadow:0 8px 24px rgba(10,10,10,.14)}

/* ---------- mega menu (mirrors the WordPress header: has-sub / sub / sub-cards) ---------- */
/* the panel anchors to the fixed header itself, so it spans the full width */
.nav ul li{position:static}
.nav ul{position:static}
.has-sub>a .caret{display:inline-block;width:7px;height:7px;margin-left:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .35s var(--ease)}
.has-sub.open>a .caret,.has-sub:focus-within>a .caret{transform:rotate(225deg) translateY(-1px)}
.sub{position:absolute;left:0;right:0;top:100%;padding-top:18px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s,transform .45s var(--ease),visibility 0s .35s;pointer-events:none;z-index:99}
.has-sub.open .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;pointer-events:auto}
.sub-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;background:rgba(16,16,16,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:14px;padding:34px 38px 36px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.sub-title{display:inline-block;font-family:var(--head);font-size:clamp(19px,1.8vw,24px);font-weight:600;color:var(--ink);margin-bottom:24px;transition:color .3s}
.sub-title:hover{color:var(--red-lift)}
.sub-groups{display:flex;gap:44px;flex-wrap:wrap}
.sub-col{min-width:150px}
.sub-h{display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.sub-col a{display:block;font-family:var(--head);font-size:14.5px;color:var(--dim);padding:5px 0;transition:color .3s,transform .35s var(--ease)}
.sub-col a:hover{color:var(--ink);transform:translateX(4px)}
.sub-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.sub-card{position:relative;display:block;border-radius:10px;overflow:hidden;isolation:isolate;aspect-ratio:4/3;border:1px solid var(--line-soft)}
.sub-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.sub-card:hover img{transform:scale(1.05)}
.sub-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.05) 40%,rgba(10,10,10,.85));z-index:1}
.sub-chip{position:absolute;z-index:2;top:10px;left:10px;font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--red);padding:5px 9px;border-radius:2px}
.sub-name{position:absolute;z-index:2;left:12px;right:12px;bottom:10px;font-family:var(--head);font-size:14px;font-weight:600;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:8px}
.sub-name i{font-style:normal;transition:transform .35s}
.sub-card:hover .sub-name i{transform:translateX(4px)}
@media(max-width:1000px){.sub,.caret{display:none}}
body.theme-mono .sub-chip{background:#f5f2f0;color:#0a0a0a}
body.theme-white .sub-inner{background:rgba(255,255,255,.97);box-shadow:0 30px 80px rgba(10,10,10,.16)}
body.theme-crimson .sub-inner{background:rgba(26,6,6,.97)}


/* ---------- hero copy: the words live under the film, never over it ---------- */
.hero-copy{padding:88px 0 96px;background:var(--black)}
.hero-copy .h1{max-width:16ch}
.hero-copy.center{text-align:center}
.hero-copy.center .h1{max-width:22ch;margin:0 auto}
.hero-copy.center .ph-sub{margin-left:auto;margin-right:auto}
.hero-copy.center .h-ctas{justify-content:center}
.hero-copy .h-cycle{margin-bottom:22px}
.hero-copy.center .h-cycle{justify-content:center}
.hero-copy .h-bottom{margin-top:34px}
/* clean film: a lighter grade now that no type sits on it */
.hero::after{background:linear-gradient(180deg,rgba(10,10,10,.62),rgba(10,10,10,.16) 34%,rgba(10,10,10,.16) 62%,rgba(10,10,10,.82))}
.ph::after{background:linear-gradient(180deg,rgba(10,10,10,.44),rgba(10,10,10,.14) 38%,rgba(10,10,10,.18) 64%,rgba(10,10,10,.82))}
@media(max-width:700px){.hero-copy{padding:64px 0 72px}}




/* ---------- full-bleed image band ---------- */
/* Edge to edge and square-cornered, but capped in height: a 21:9 crop on a wide
   screen would otherwise become an 800px slab. The caption lines up with the page
   gutter instead of hugging the viewport edge. Only for bands outside .wrap.
   width:100% is load-bearing: with width:auto Chrome re-resolves the width from
   the ratio once max-height clamps the height, and the band stops being full-bleed. */
.band{width:100%;border-radius:0;max-height:min(72vh,600px)}
.band .cap{left:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));right:var(--pad);bottom:30px}
@media(max-width:900px){.band{aspect-ratio:16/9;max-height:54vh}.band .cap{left:var(--pad);bottom:20px}}

/* ---------- cursor label ---------- */
/* Label mode used to keep the 38px disc and centre the text inside it. Any label
   longer than about six characters is wider than the circle, so the text spilled
   past the edge and sat on top of whatever heading was behind it. The disc now
   steps aside and the tag carries its own pill, inverted against the page so it
   stays legible in every theme without a per-theme override. */
body.cur-label .cur-ring .disc,body.cur-label.cur-down .cur-ring .disc{transform:scale(0);opacity:0}
.cur-ring .tag{padding:9px 15px;border-radius:999px;background:var(--ink);color:var(--black);transform:translate(-50%,-50%) scale(.86);transition:opacity .25s .05s,transform .3s var(--ease)}
body.cur-label .cur-ring .tag{transform:translate(-50%,-50%) scale(1)}

/* .tlink rides on <button> wherever it fires an action rather than navigating */
button.tlink{background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;color:var(--ink)}

/* a group photograph in a wide crop should give its height budget to the faces:
   centre-cropping takes evenly off the top and the bottom and clips the back row */
.frame img.pos-high{object-position:50% 36%}

/* ============ MOBILE PASS (Oct 2026, from the live phone test) ============ */
/* the cycling line was clipped by its own min-width: the longest phrase runs 34 characters */
.h-cycle .cy{min-width:48ch}
/* floating WhatsApp: phones and tablets only */
.wa-fab{display:none}
@media(max-width:1000px){
  .wa-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .25s var(--ease),opacity .2s}
  .wa-fab svg{width:28px;height:28px;display:block}
  .wa-fab:active{transform:scale(.93)}
  .mnav.open~.wa-fab,.wiz.open~.wa-fab{opacity:0;visibility:hidden;pointer-events:none}
  /* text links: a 44px touch box around the same visual footprint */
  .tlink{padding-top:13px;padding-bottom:19px;margin-top:-13px;margin-bottom:-13px}
  .tlink::after{bottom:13px}
  footer li{margin-bottom:0}
  footer li a{display:inline-block;padding:11px 0}
  .f-tel{padding:12px 0;margin-top:6px}
  .f-legal a{display:inline-block;padding:14px 0}
  /* the last footer row must end above the floating button (16px offset + 56px button) */
  .f-bot{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .mnav .m-foot a{display:inline-block;padding:15px 0}
  .row .r{display:inline-block;padding:15px 0 14px}
  .row .r.apply{padding-top:22px}
  .rank .r-link{display:inline-block;padding:15px 0}
  button.chip{min-height:44px;padding:0 16px}
  .office p a{display:inline-block;padding:13px 0;margin:-9px 0}
  .card.office .tel{padding:11px 0;margin-top:11px}
}
@media(max-width:700px){
  .h-cycle{font-size:10px;letter-spacing:.1em;gap:12px}
  .h-cycle .cy{flex:1 1 auto;min-width:0}
  .h-cycle i{width:28px;flex:0 0 28px}
  .devs .mono{padding:0 var(--pad);line-height:2.1}
  .devs .mono .tlink{display:table;margin:10px auto 0!important}
  .devs .mono .dot{display:none}
  .rail-g img{height:52px;max-width:170px;margin:0 28px;opacity:.9}
  .ticker span{font-size:12px;letter-spacing:.2em}
  .chip,.chip-red{font-size:10.5px}
  .ph:not(.plain)::after{background:linear-gradient(180deg,rgba(10,10,10,.5),rgba(10,10,10,.14) 30%,rgba(10,10,10,.48) 56%,rgba(10,10,10,.9))}
}