/* UM Client Hub — component styles. Extends tokens.css.
   Follows the portfolio site's structures: capsule nav, 2px no-fill cards,
   work-card covers with a scrim, Oswald marquee chips, bordered CTA bands,
   dot rail. No colour, radius, font or timing literal lives in here. */

main,.foot{position:relative;z-index:1}

.um-section{padding:var(--sec) 0;position:relative}
.um-section>.um-container,.hero>.um-container{position:relative;z-index:1}

/* ---------- nav: floating capsule ---------- */
.nav{position:fixed;top:22px;left:0;right:0;z-index:80;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 var(--pad);pointer-events:none;transition:top var(--t-short) var(--ease-out)}
.nav>*{pointer-events:auto}
.nav-row{display:flex;align-items:center;gap:10px}
.nav-mark{display:flex;align-items:center;gap:12px;height:52px;padding:0 22px 0 16px;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-pill);background:var(--site-black);transition:border-color var(--t-short) var(--ease-out)}
.nav-mark:hover{border-color:var(--accent)}
.nav-mark img{height:26px;width:auto}
.nav-mark b{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);line-height:1;white-space:nowrap}
.nav-cap{display:flex;align-items:center;gap:2px;height:52px;padding:0 8px;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-pill);background:var(--site-black)}
.nav-l{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--fg-secondary);padding:12px 16px;border-radius:var(--radius-pill);transition:color var(--t-short) var(--ease-out)}
.nav-l:hover,.nav-l.on{color:var(--fg)}
.nav-thm{width:34px;height:34px;margin-left:6px;border-radius:var(--radius-pill);border:var(--border-card-width) solid var(--border);background:transparent;color:var(--fg-secondary);font-size:13px;transition:border-color var(--t-short) var(--ease-out),color var(--t-short) var(--ease-out)}
.nav-thm:hover{border-color:var(--accent);color:var(--accent)}
.nav .um-btn-primary{height:52px}
.nav.solid .nav-mark,.nav.solid .nav-cap{background:var(--glass);backdrop-filter:blur(14px)}
.nav-note{display:inline-flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-pill);background:var(--site-black);font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-secondary);transition:border-color var(--t-short) var(--ease-out),opacity var(--t-short) var(--ease-out),transform var(--t-short) var(--ease-out)}
.nav-note:hover{border-color:var(--accent);color:var(--fg-secondary)}
.nav-note i{width:22px;height:22px;border-radius:var(--radius-pill);background:var(--accent-wash);color:var(--accent);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px}
.nav.solid .nav-note{opacity:0;transform:translateY(-8px);pointer-events:none}
@media(max-width:1080px){.nav-mark b{display:none}.nav-mark{padding:0 16px}}
@media(max-width:900px){
.nav{top:12px}
.nav-row{width:100%;justify-content:space-between;gap:10px}
.nav-l,.nav-note{display:none}
.nav .um-btn-primary{display:none}
.nav-cap{padding:0;border:0;background:transparent;height:auto}
.nav.solid .nav-cap{background:transparent;backdrop-filter:none}
.nav-thm{margin-left:0;width:52px;height:52px;background:var(--site-black);border-color:var(--border);font-size:15px}
.nav-mark b{display:inline}
}

/* ---------- mobile dock: the iOS camera-mode selector, in brand ---------- */
.dock{display:none}
@media(max-width:900px){
.dock{display:block;position:fixed;left:12px;right:12px;bottom:14px;z-index:110}
.dock-in{position:relative;display:flex;flex-direction:column;gap:0;border:var(--border-card-width) solid var(--border);border-radius:26px;background:var(--glass);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);overflow:hidden;box-shadow:var(--lift)}
.dock-modes{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 50%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.dock-modes::-webkit-scrollbar{display:none}
.dock-m{flex:0 0 auto;scroll-snap-align:center;padding:8px 16px;background:transparent;border:0;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-tertiary);white-space:nowrap;transition:color var(--t-short) var(--ease-out),transform var(--t-short) var(--ease-out)}
.dock-m.on{color:var(--accent);transform:scale(1.06)}
/* the dot the selected mode sits over, the way the camera dial marks its centre */
.dock-pip{position:absolute;left:50%;top:44px;width:5px;height:5px;margin-left:-2.5px;border-radius:var(--radius-pill);background:var(--accent);pointer-events:none;z-index:2}
.dock-cta{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px;border-top:1px solid var(--rule);background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.dock-cta:hover{color:var(--accent-ink)}
body{padding-bottom:132px}
.totop{bottom:140px}
.ck{bottom:132px}
}
@media(prefers-reduced-motion:reduce){.dock-m{transition:none}}
@media(max-width:720px){.nav{top:14px}}

/* ---------- side rail ---------- */
.rail{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:4px;padding:12px 10px;background:var(--glass);backdrop-filter:blur(10px);border:var(--border-card-width) solid var(--border);border-radius:var(--radius-pill)}
.rail a{position:relative;display:flex;align-items:center;justify-content:center;width:16px;height:28px}
.rail a::after{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:var(--border);transition:all var(--t-short) var(--ease-out)}
.rail a:hover::after{background:var(--fg-secondary)}
.rail a.on::after{background:var(--accent);width:8px;height:8px}
.rail .tip{position:absolute;right:26px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--site-black);border:var(--border-card-width) solid var(--border);border-radius:var(--radius-pill);padding:6px 12px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--fg);opacity:0;pointer-events:none;transition:opacity var(--t-short) var(--ease-out)}
.rail a:hover .tip{opacity:1}
@media(max-width:1180px){.rail{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding:168px 0 0;overflow:hidden}
.hero-glow{display:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(348px,.76fr);max-width:100%;gap:44px;align-items:center;position:relative}
.hero-title{overflow-wrap:break-word;word-break:normal;hyphens:none;font-family:var(--font-display);font-weight:700;font-size:var(--fs-hero);line-height:.94;letter-spacing:-.01em;text-transform:uppercase;margin:26px 0 26px;min-height:var(--h1-lock,auto)}
.caret{display:inline-block;width:.06em;height:.82em;margin-left:.06em;background:var(--accent);vertical-align:baseline;animation:um-caret 1s steps(1) infinite}
@keyframes um-caret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.hero-title.done{min-height:0}
.hero-title.done .caret{display:none}
@media(prefers-reduced-motion:reduce){.caret{display:none}}
.hero-sub{font-size:17px;color:var(--fg-secondary);max-width:50ch;line-height:1.6}
.hero-ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:36px}
.hero-fine{margin-top:16px;font-size:var(--fs-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-tertiary)}
/* the four mini cards under the hero, each opening to say more */
.hmini{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:56px}
.hm{border:var(--border-card-width) solid var(--border);border-radius:var(--radius-card);overflow:hidden;transition:border-color var(--t-short) var(--ease-out)}
.hm.on{border-color:var(--accent)}
.hm-top{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 18px 16px;background:transparent;border:0;text-align:left;position:relative}
.hm-k{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-tertiary)}
.hm-v{display:flex;align-items:baseline;gap:7px;white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1.42;letter-spacing:-.01em;color:var(--fg);font-variant-numeric:tabular-nums;text-transform:uppercase}
.hm-v .accent{font-size:19px}
.hm-top i{position:absolute;top:18px;right:16px;width:18px;height:18px}
.hm-top i::before,.hm-top i::after{content:"";position:absolute;top:50%;left:50%;background:var(--fg-tertiary);transform:translate(-50%,-50%);transition:all var(--t-short) var(--ease-out)}
.hm-top i::before{width:11px;height:2px}
.hm-top i::after{width:2px;height:11px}
.hm.on .hm-top i::before{background:var(--accent)}
.hm.on .hm-top i::after{opacity:0}
.hm-b{max-height:0;overflow:hidden;transition:max-height var(--t-medium) var(--ease-out)}
.hm.on .hm-b{max-height:180px}
.hm-b p{padding:0 18px 20px;font-size:13px;line-height:1.6;color:var(--fg-secondary);border-top:1px solid var(--rule);padding-top:14px;margin-top:2px}
@media(max-width:1080px){.hmini{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hmini{grid-template-columns:1fr}}
@media(max-width:860px){.hero{padding:120px 0 0}.hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}.hero-copy{min-width:0}.hmini{margin-top:40px}}
@media(max-width:560px){:root{--fs-hero:clamp(30px,8.4vw,42px)}.hero-sub{font-size:15.5px}}

/* the long CTA cannot stay on one line on a phone: let it wrap and shrink
   rather than push past the card it sits in */
@media(max-width:640px){
.um-btn-primary,.um-btn-ghost{max-width:100%;white-space:normal;text-align:center;letter-spacing:.08em;padding:14px 22px;font-size:13px}
.um-btn-primary.lg{padding:16px 24px;font-size:13.5px}
.close{padding:52px 20px}
.close .um-btn-primary{width:100%;justify-content:center}
.band .um-btn-primary,.honest .um-btn-primary{width:100%;justify-content:center}
}

/* ---------- hero showcase: phone + module pills ---------- */
.show{--phone-w:clamp(230px,25vw,286px);position:relative;display:flex;align-items:flex-start;justify-content:flex-end;min-width:0}
/* the pills float on top of the phone, staggered, the way the device shots do it */
.show-pills{position:absolute;right:calc(100% - 26px);top:8%;z-index:6;display:flex;flex-direction:column;gap:10px;align-items:stretch;width:168px;animation:um-float 6s ease-in-out infinite reverse}
.spill{background:var(--site-black);color:var(--fg-secondary);border:var(--border-card-width) solid var(--border);border-radius:var(--radius-pill);padding:11px 16px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-align:center;box-shadow:var(--lift);transition:transform var(--t-short) var(--ease-out),border-color var(--t-short) var(--ease-out),color var(--t-short) var(--ease-out),background var(--t-short) var(--ease-out)}
.spill:hover{border-color:var(--border-strong);color:var(--fg)}
.spill.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.show-pills .spill.on{transform:none}
.show-phone{position:relative;z-index:2;width:var(--phone-w);animation:um-float 7s ease-in-out infinite;display:flex;flex-direction:column;align-items:center;gap:18px}
.show-phone>.show-pills{pointer-events:auto}
.sp-frame{position:relative;width:var(--phone-w);aspect-ratio:9/19.5;background:var(--card-dark);border:var(--border-card-width) solid var(--border-strong);border-radius:var(--radius-phone);overflow:hidden}
.sp-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:32%;height:14px;border-radius:0 0 12px 12px;background:var(--card-dark);z-index:3}
.sp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity var(--t-micro) var(--ease-out)}
.sp-img.on{opacity:1;transition:opacity var(--t-short) var(--ease-out) 120ms}
.sp-cap{width:118%;margin:0 -9%;text-align:center;font-size:13px;line-height:1.55;color:var(--fg-secondary)}
@media(max-width:1140px){.spill{padding:9px 12px;font-size:9.5px}.show-pills{width:148px}.show{--phone-w:clamp(196px,20vw,232px)}.show-pills{gap:8px}}
@media(prefers-reduced-motion:reduce){.show-phone,.show-pills{animation:none}}
@media(max-width:860px){.sp-cap{width:100%;margin:0}.show{flex-direction:column-reverse;align-items:center;gap:22px;padding-left:0;justify-content:center}.show-phone{flex-direction:column-reverse;gap:20px;width:auto}.show-pills{position:static;width:auto;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}.show-pills .spill{transform:none!important}.show{--phone-w:min(250px,62vw)}}

/* ---------- section head ---------- */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap;margin-bottom:48px}
.head h2{margin-top:14px}
.head .aside{color:var(--fg-secondary);font-size:var(--fs-body-sm);max-width:36ch;line-height:1.55}

/* ---------- video ---------- */
.vid{position:relative;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--card-dark)}
.vid video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.vid-cap{position:absolute;left:0;right:0;bottom:0;padding:64px 28px 24px;pointer-events:none;background:var(--scrim);color:#fff}
.vid-cap b{display:block;font-family:var(--font-display);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.01em}
.vid-cap span{font-size:13px;color:#AAA;letter-spacing:.04em}

/* ---------- card grids ---------- */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:1080px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.g3,.g2{grid-template-columns:1fr}}
@media(max-width:620px){.g4{grid-template-columns:1fr}}

.pain{display:flex;flex-direction:column;gap:14px;padding:30px 26px}
.pain .n{font-family:var(--font-display);font-weight:700;font-size:38px;line-height:1;color:var(--border);letter-spacing:-.02em}
.pain:hover .n{color:var(--accent)}
.pain p{color:var(--fg-secondary);font-size:14px;line-height:1.6}

.step{display:flex;flex-direction:column;gap:12px;padding:28px 24px}
.step .n{font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1;color:var(--accent);letter-spacing:-.02em}
.step p{color:var(--fg-secondary);font-size:14px;line-height:1.6;flex:1}
.step .foot{margin-top:6px;padding-top:16px;border-top:1px solid var(--rule);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--fg-tertiary)}

/* ---------- hub modules: the work-card structure ---------- */
.mod{position:relative;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-card);overflow:hidden;background:var(--card-dark);transition:border-color var(--t-short) var(--ease-out)}
.mod:hover{border-color:var(--accent)}
.mod-cover{position:relative;aspect-ratio:4/3;overflow:hidden}
.mod-cover img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform var(--t-standard) var(--ease-out)}
.mod:hover .mod-cover img{transform:scale(1.05)}
.mod-meta{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;background:var(--scrim);pointer-events:none}
.mod-meta .title{font-weight:700;font-size:18px;color:#fff}
.mod-meta .tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#AAA;margin-bottom:6px}
.mod-meta .arrow{width:36px;height:36px;flex:none;border:var(--border-card-width) solid var(--border-strong);border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
.mod:hover .mod-meta .arrow{border-color:var(--accent);color:var(--accent)}
.mod-b{padding:20px 24px 24px;border-top:1px solid var(--rule)}
.mod-b p{color:var(--fg-secondary);font-size:14px;line-height:1.6}

/* ---------- the human section ---------- */
.human{display:grid;grid-template-columns:1fr .9fr;gap:56px;align-items:start}
.ticks{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-direction:column;gap:0}
.ticks li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--fg)}
.ticks li:first-child{border-top:1px solid var(--rule)}
.ticks li::before{content:"+";color:var(--accent);font-weight:800;flex:none;line-height:1.5}
.quote{display:flex;flex-direction:column;gap:22px;padding:32px}
.quote .who{display:flex;align-items:center;gap:14px}
.quote .av{width:52px;height:52px;flex:none;border-radius:var(--radius-pill);border:var(--border-card-width) solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.04em;color:var(--accent);background:var(--accent-wash)}
.quote .nm{font-weight:700;font-size:14px}
.quote .ro{font-size:11px;letter-spacing:.06em;color:var(--fg-tertiary);margin-top:3px}
.quote blockquote{margin:0;font-size:20px;line-height:1.45;font-weight:500;color:var(--fg)}
.quote .foot{padding-top:20px;border-top:1px solid var(--rule)}
@media(max-width:900px){.human{grid-template-columns:1fr;gap:34px}}

/* ---------- the sticky stack: cards pin, each stage phase arrives on scroll ---------- */
.stick{position:relative;height:calc(var(--cards,4) * 100vh)}
.stick-in{position:sticky;top:0;min-height:100vh;display:grid;grid-template-columns:1fr .96fr;gap:56px;align-items:center;padding:110px 0}
.stick-copy{align-self:center}
.stick-count{display:flex;align-items:baseline;gap:12px;margin-top:34px}
.stick-count b{font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1;color:var(--accent)}
.stick-count span{font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-tertiary);max-width:26ch;line-height:1.5}
.stick-bar{margin-top:20px;height:2px;background:var(--rule);max-width:320px}
.stick-bar i{display:block;height:100%;width:25%;background:var(--accent)}
.stick-stack{position:relative;display:grid}
.scard{grid-area:1/1;display:flex;flex-direction:column;gap:16px;padding:34px;background:var(--site-black);border:var(--border-card-width) solid var(--border);border-radius:var(--radius-card);transition:border-color var(--t-medium) var(--ease-out);will-change:transform,opacity;backface-visibility:hidden}
.scard.on{border-color:var(--accent)}
.scard-top{display:flex;align-items:center;justify-content:space-between;gap:18px}
.scard-n{font-family:var(--font-display);font-weight:700;font-size:28px;line-height:1;color:var(--border)}
.scard.on .scard-n{color:var(--accent)}
.scard blockquote{margin:0;font-size:18px;line-height:1.45;font-weight:500;color:var(--fg)}
.scard .ticks{margin-top:auto}
.scard .ticks li{padding:11px 0;font-size:13.5px}
@media(max-width:960px){.stick{height:auto}.stick-in{grid-template-columns:1fr;gap:36px;min-height:auto;padding:0;position:static}.stick-stack{display:flex;flex-direction:column;gap:16px}.scard{transform:none!important;opacity:1!important}.stick-bar,.stick-count{display:none}}

/* ---------- the screenshot lightbox ---------- */
.mod-cover{display:block;width:100%;padding:0;border:0;background:var(--surface);cursor:zoom-in;position:relative;aspect-ratio:4/3;overflow:hidden}
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:5vh 5vw;background:rgba(8,10,14,.88);backdrop-filter:blur(6px);animation:um-ckin var(--t-short) var(--ease-out) both}
.lb-fig{margin:0;display:flex;flex-direction:column;gap:14px;align-items:center;max-height:90vh}
.lb-fig img{border:var(--border-card-width) solid var(--border-strong);border-radius:var(--radius-card);max-height:82vh;width:auto;object-fit:contain;background:var(--card-dark)}
.lb-fig figcaption{font-size:var(--fs-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#AAA}
.lb-x{position:absolute;top:22px;right:22px;width:46px;height:46px;border-radius:var(--radius-pill);border:var(--border-card-width) solid rgba(255,255,255,.28);background:transparent;color:#fff;font-size:15px;transition:border-color var(--t-short) var(--ease-out),color var(--t-short) var(--ease-out)}
.lb-x:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- back to the top ---------- */
.totop{position:fixed;bottom:28px;right:28px;z-index:90;width:52px;height:52px;border-radius:var(--radius-pill);border:var(--border-card-width) solid var(--border);background:var(--glass);backdrop-filter:blur(10px);color:var(--fg-secondary);font-size:16px;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity var(--t-medium) var(--ease-out),transform var(--t-medium) var(--ease-out),border-color var(--t-short) var(--ease-out),color var(--t-short) var(--ease-out)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:1180px){.totop{bottom:18px;right:18px}}

/* ---------- who this is for: swipeable categories, illustrations cycling ---------- */
.nrail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 6px;scrollbar-width:none}
.nrail::-webkit-scrollbar{display:none}
.ncat{flex:0 0 clamp(300px,32vw,420px);scroll-snap-align:center;display:flex;flex-direction:column;gap:18px;padding:26px;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-card);background:var(--site-black);transition:border-color var(--t-short) var(--ease-out)}
.ncat.on{border-color:var(--accent)}
.ncat-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ncat-n{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1;color:var(--border)}
.ncat.on .ncat-n{color:var(--accent)}
.nstage{position:relative;display:grid;aspect-ratio:4/3;border:1px solid var(--rule);border-radius:var(--radius-small);overflow:hidden;background:var(--surface)}
.nfig{grid-area:1/1;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;opacity:0;transition:opacity var(--t-medium) var(--ease-out)}
.nfig.on{opacity:1}
.nfig img{width:74%;height:auto;object-fit:contain}
.nfig figcaption{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-secondary);text-align:center;opacity:0;transform:translateY(6px);transition:opacity var(--t-medium) var(--ease-out),transform var(--t-medium) var(--ease-out)}
.nfig.titled figcaption{opacity:1;transform:none}
.ncat-b{font-size:13.5px;line-height:1.6;color:var(--fg-secondary);margin-top:auto}
.nnav{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.nnav-b{width:46px;height:46px;border-radius:var(--radius-pill);border:var(--border-card-width) solid var(--border);background:transparent;color:var(--fg-secondary);font-size:15px;transition:border-color var(--t-short) var(--ease-out),color var(--t-short) var(--ease-out)}
.nnav-b:hover{border-color:var(--accent);color:var(--accent)}
@media(prefers-reduced-motion:reduce){.nfig{opacity:1}.nfig figcaption{opacity:1;transform:none}.nstage{display:flex;flex-direction:column;aspect-ratio:auto}}
@media(max-width:620px){.ncat{flex:0 0 82vw;padding:20px}}

/* ---------- inside the hub: vertical scroll drives a horizontal track ----------
   The section is tall, its inner pins to the viewport, and the cards slide
   sideways as you scroll down. Each card fades up as it reaches centre and
   fades back as it leaves, so one is always the subject. */
.hubsec{position:relative;height:calc(var(--hub-cards,6) * 58vh + 100vh)}
.hubpin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:22px;overflow:hidden}
.hubpin>.um-container{width:100%}
.htrack{display:flex;gap:22px;width:max-content;will-change:transform}
.hbarwrap{width:100%}
.htrack>.mod{flex:0 0 clamp(290px,27vw,400px);will-change:transform,opacity}
.htrack>.mod .mod-cover{aspect-ratio:16/10}
.htrack>.mod .mod-b{padding:16px 20px 20px}
.htrack>.mod .mod-b p{font-size:13.5px}
.hbar{height:2px;background:var(--rule);max-width:280px}
.hbar i{display:block;height:100%;width:0;background:var(--accent)}
@media(max-width:900px){
.hubsec{height:auto}
.hubpin{position:static;height:auto;overflow:visible;gap:22px}
.htrack{display:grid;grid-template-columns:1fr;width:auto;transform:none!important;gap:16px}
.htrack>.mod{flex:none;opacity:1!important;transform:none!important}
.hbar{display:none}
}

/* ---------- toolkit marquees ---------- */
.mq-band{position:relative;padding:64px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden}
.mq-lbl{display:flex;align-items:center;gap:16px;padding:0 var(--pad);margin-bottom:32px;font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--fg-tertiary);font-weight:700}
.mq-lbl::before,.mq-lbl::after{content:"";height:1px;background:var(--rule);flex:1}
.mq{overflow:hidden}
.mq+.mq{margin-top:14px}
.mq-track{display:flex;gap:24px;width:max-content;animation:um-marquee linear infinite}
.mq-track.rev{animation-direction:reverse}
@keyframes um-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq:hover .mq-track{animation-play-state:paused}
.tchip{display:inline-flex;align-items:center;gap:13px;padding:12px 26px;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-secondary);white-space:nowrap;transition:color var(--t-short) var(--ease-out),border-color var(--t-short) var(--ease-out)}
.tchip:hover{color:var(--fg);border-color:var(--accent)}
.tchip img{width:22px;height:22px;object-fit:contain;flex:none}
.tchip .dot{display:none}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none;flex-wrap:wrap;width:auto}}
.sec-note{display:grid;grid-template-columns:1fr 1.35fr;gap:36px;align-items:start;padding:34px}
.sec-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
@media(max-width:900px){.sec-note{grid-template-columns:1fr;gap:22px}}

/* ---------- transparency: bordered band, the loudest thing on the page ---------- */
.band{position:relative;overflow:hidden;border:var(--border-card-width) solid var(--accent);border-radius:var(--radius-lg);padding:64px var(--pad)}
.band-h{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;margin:22px 0 26px;max-width:17ch}
.band p{color:var(--fg-secondary);font-size:17px;line-height:1.65;max-width:60ch;margin-bottom:16px}
.band p b{color:var(--fg);font-weight:700}
.band .row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
.band-when{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-pill);font-size:var(--fs-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-secondary)}
.band-when i{display:none}
@media(max-width:720px){.band{padding:40px 24px}}

/* ---------- orbit ---------- */
.orbit{position:relative;width:100%;aspect-ratio:1/1;max-width:420px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.orbit-ring{position:absolute;inset:0;border-radius:var(--radius-pill);border:1px solid var(--rule);animation:um-spin 42s linear infinite}
.orbit-ring.r2{inset:14%;animation-duration:60s;animation-direction:reverse}
.orbit-ring.r3{inset:28%;animation-duration:84s;border-color:var(--border)}
@keyframes um-spin{to{transform:rotate(360deg)}}
.orbit-core{width:30%;aspect-ratio:1/1;border-radius:var(--radius-pill);position:relative;z-index:3;display:flex;align-items:center;justify-content:center;background:var(--site-black);border:var(--border-card-width) solid var(--border)}
.orbit-core img{width:46%}
/* ---------- thought bubbles orbiting the mark ---------- */
.orbit-pill{position:absolute;z-index:4;width:max-content;max-width:158px;background:var(--site-black);border:var(--border-card-width) solid var(--border);border-radius:22px;padding:12px 18px;font-size:12.5px;font-weight:600;color:var(--fg);line-height:1.4}
/* the two trailing dots that make it a thought, not a speech bubble */
.orbit-pill::before,.orbit-pill::after{content:"";position:absolute;border:var(--border-card-width) solid var(--border);background:var(--site-black);border-radius:var(--radius-pill)}
.orbit-pill::before{width:11px;height:11px;bottom:-9px;left:24px}
.orbit-pill::after{width:6px;height:6px;bottom:-19px;left:16px}
.orbit-pill.flip::before{left:auto;right:24px}
.orbit-pill.flip::after{left:auto;right:16px}
/* three layers: the arm sweeps the circle, the seat rides its top edge, the
   counter cancels the sweep so the words never turn upside down */
.orbit-arm{position:absolute;inset:14%;z-index:4;pointer-events:none;animation:um-spin 34s linear infinite}
.orbit-seat{position:absolute;top:0;left:50%;width:0;height:0}
.orbit-counter{position:absolute;top:0;left:0;animation:um-spin 34s linear infinite reverse}
.orbit-counter>.orbit-pill{position:absolute;left:0;top:0;transform:translate(-50%,-50%);pointer-events:auto}
.orbit-text{display:inline-block;animation:um-fade var(--t-standard) var(--ease-out) both}
@keyframes um-fade{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}
.why{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:center;margin-bottom:48px}
@media(max-width:900px){.why{grid-template-columns:1fr;gap:28px}.orbit{max-width:340px}.orbit-pill{max-width:130px;font-size:11.5px;padding:10px 14px}}
@media(prefers-reduced-motion:reduce){.orbit-ring,.orbit-text{animation:none}}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.fq{border:var(--border-card-width) solid var(--border);border-radius:var(--radius-card);overflow:hidden;transition:border-color var(--t-short) var(--ease-out)}
.fq.on{border-color:var(--accent)}
.fq>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:22px;background:transparent;border:0;padding:24px 26px;text-align:left;font-family:var(--font-body);font-weight:700;font-size:17px;color:var(--fg)}
.fq>button i{width:30px;height:30px;flex:none;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-pill);position:relative;transition:all var(--t-short) var(--ease-out)}
.fq>button i::before,.fq>button i::after{content:"";position:absolute;top:50%;left:50%;background:var(--fg-secondary);transform:translate(-50%,-50%);transition:all var(--t-short) var(--ease-out)}
.fq>button i::before{width:11px;height:2px}
.fq>button i::after{width:2px;height:11px}
.fq.on>button i{border-color:var(--accent)}
.fq.on>button i::before{background:var(--accent)}
.fq.on>button i::after{opacity:0}
.fq-a{max-height:0;overflow:hidden;transition:max-height var(--t-medium) var(--ease-out)}
.fq.on .fq-a{max-height:340px}
.fq-a p{padding:0 26px 26px;color:var(--fg-secondary);font-size:15px;line-height:1.65;max-width:68ch}

/* ---------- close ---------- */
.close{text-align:center;position:relative;overflow:hidden;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-lg);padding:80px var(--pad)}
.close h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;margin:0 auto 22px;max-width:15ch}
.close p{color:var(--fg-secondary);font-size:17px;max-width:44ch;margin:0 auto 32px}
.close .fine{display:block;margin-top:20px;font-size:var(--fs-meta);letter-spacing:.1em;color:var(--fg-tertiary)}
@media(max-width:720px){.close{padding:52px 24px}}

/* ---------- footer ---------- */
.foot{margin-top:80px;border-top:1px solid var(--rule);padding:52px 0 36px}
.foot-row{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-mark img{height:30px;margin-bottom:14px}
.foot-mark b{display:block;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.foot-mark p{color:var(--fg-secondary);font-size:13px;max-width:32ch;line-height:1.55}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-col h4{font-size:10px;letter-spacing:.22em;color:var(--fg-tertiary);font-weight:700;text-transform:uppercase;margin-bottom:14px}
.foot-col a{display:block;color:var(--fg-secondary);font-size:13px;margin-bottom:9px}
.foot-col a:hover{color:var(--fg)}
.foot-bot{margin-top:36px;padding-top:24px;border-top:1px solid var(--rule-dim);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11px;color:var(--fg-tertiary);letter-spacing:.1em}

/* ---------- cookies ---------- */
.ck{position:fixed;left:var(--pad);bottom:28px;z-index:120;max-width:440px;background:var(--site-black);border:var(--border-card-width) solid var(--border);border-radius:var(--radius-card);padding:26px;animation:um-ckin var(--t-medium) var(--ease-out) both}
@keyframes um-ckin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ck b{display:block;font-family:var(--font-display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px}
.ck p{color:var(--fg-secondary);font-size:13px;line-height:1.6;margin-bottom:20px}
.ck-act{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:720px){.ck{left:16px;right:16px;max-width:none;bottom:16px}}

/* ---------- legal ---------- */
.legal{padding:170px 0 var(--sec)}
.legal h1{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,5.4vw,72px);line-height:.95;text-transform:uppercase;letter-spacing:-.01em;margin:22px 0 16px}
.back{font-size:var(--fs-label);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-secondary)}
.back:hover{color:var(--fg)}
.legal-meta{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 0}
.legal-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:36px 0 44px}
.legal-tabs a{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-secondary);border:var(--border-card-width) solid var(--border);border-radius:var(--radius-pill);padding:11px 20px;transition:border-color var(--t-short) var(--ease-out),color var(--t-short) var(--ease-out)}
.legal-tabs a:hover{border-color:var(--border-strong);color:var(--fg)}
.legal-tabs a.on{border-color:var(--accent);color:var(--accent)}
.legal-b{padding:26px 0;border-bottom:1px solid var(--rule)}
.legal-b h2{font-size:16px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;margin-bottom:10px}
.legal-b p{color:var(--fg-secondary);font-size:15px;line-height:1.7;max-width:74ch}

/* ---------- tweaks panel: hidden unless the host turns Tweaks on ---------- */
.twk[hidden]{display:none}
.twk{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:300;display:flex;align-items:flex-start}
.twk-tab{width:38px;height:38px;border:var(--border-card-width) solid var(--border);border-right:0;border-radius:var(--radius-pill) 0 0 var(--radius-pill);background:var(--glass);backdrop-filter:blur(12px);color:var(--fg-secondary);font-size:14px}
.twk-b{width:0;overflow:hidden;transition:width var(--t-short) var(--ease-out)}
.twk.open .twk-b{width:250px;padding:18px;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-card) 0 0 var(--radius-card);background:var(--glass);backdrop-filter:blur(18px)}
.twk-b b{display:block;font-size:var(--fs-label);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-tertiary);margin-bottom:14px}
.twk-r{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--rule);font-size:12.5px;font-weight:600;color:var(--fg-secondary)}
.twk-r select{background:transparent;color:var(--fg);border:1px solid var(--border);border-radius:var(--radius-small);padding:5px 7px;font-family:var(--font-body);font-size:12px}
.twk-sw{display:flex;gap:6px}
.twk-sw button{width:20px;height:20px;border-radius:var(--radius-pill);border:2px solid transparent;cursor:pointer}
.twk-sw button.on{border-color:var(--fg)}
@media(max-width:900px){.twk{display:none}}

/* The toolkit marquee and the mobile dock carousel intentionally overflow their
   boxes; without a root clip their width leaks into the PAGE scroll and a phone
   can pan the whole site 30px sideways. clip (not hidden) keeps position:sticky
   and the inner scrollers working. */
html,body{overflow-x:clip}