/* ============================================================
   Xctrl — shared stylesheet (all pages)
   Quiet, editorial layout: white space, large type, big photos.
   Type: Hanken Grotesk (self-hosted)
   ============================================================ */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/HankenGrotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/HankenGrotesk-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- Tokens ---------- */
:root{
  --bg:#000000;
  --bg-alt:#0b0b0c;
  --card:#161617;
  --ink:#f5f5f7;
  --ink-2:#d2d2d7;
  --muted:#a1a1a6;
  --faint:#86868b;
  --line:#333336;
  --line-soft:#1f1f22;
  --link:#2997ff;
  --sosh:#FFDF00;              /* soshctrl only, used sparingly */
  --radius:28px;
  --radius-sm:18px;
  --wrap:1120px;
  --wide:1400px;
  --gutter:clamp(20px,5vw,48px);
  --nav-h:64px;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:17px;line-height:1.55;font-weight:420;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
::selection{background:var(--ink);color:#000;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-0.025em;line-height:1.08;color:var(--ink);text-wrap:balance;}
.lede,.statement{text-wrap:pretty;}
p{margin:0;}
strong{font-weight:650;}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:6px;}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter);}
.wide{width:100%;max-width:calc(var(--wide) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter);}
.narrow{width:100%;max-width:calc(760px + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter);}
.section{padding:clamp(88px,12vw,160px) 0;}
.section.tight{padding:clamp(64px,8vw,110px) 0;}
.alt{background:var(--bg-alt);}
.center{text-align:center;}

/* ---------- Type ---------- */
.eyebrow{display:block;font-size:14px;font-weight:600;letter-spacing:0;color:var(--muted);margin:0 0 14px;}
.display{font-size:clamp(38px,6vw,78px);font-weight:600;letter-spacing:-0.04em;line-height:1.0;}
.h2{font-size:clamp(36px,5.2vw,64px);font-weight:600;letter-spacing:-0.035em;line-height:1.05;}
.h3{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-0.025em;line-height:1.15;}
.lede{font-size:clamp(19px,1.9vw,24px);line-height:1.45;color:var(--muted);font-weight:450;letter-spacing:-0.01em;}
.body{font-size:17px;line-height:1.6;color:var(--ink-2);}
.muted{color:var(--muted);}
.center .lede{margin-left:auto;margin-right:auto;}
.statement{font-size:clamp(28px,3.6vw,48px);font-weight:600;letter-spacing:-0.03em;line-height:1.18;color:var(--ink);}
.statement .dim{color:var(--faint);}
/* Centered statement: hovering makes the word under the cursor stand out, one word at a time (see site.js) */
.word-hover{margin-left:auto;margin-right:auto;text-align:center;}
.word-hover .w{transition:color .3s ease;}
.word-hover.hovering .w{color:#5a5a5e;}
.word-hover.hovering .w.on{color:var(--ink);}
@media (prefers-reduced-motion:reduce){.word-hover .w{transition:none;}}

/* ---------- Buttons & links ---------- */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;}
.center .actions{justify-content:center;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;font:inherit;font-size:16px;font-weight:550;text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.btn-primary{background:#f5f5f7;color:#000;}
.btn-primary:hover{background:#d6d6d9;}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent;}
.btn-line:hover{border-color:var(--ink);}
.more{display:inline-flex;align-items:center;gap:4px;font-size:17px;font-weight:500;color:var(--link);text-decoration:none;}
.more:hover{text-decoration:underline;text-underline-offset:3px;}
.more::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:rotate(45deg);margin-left:4px;}
.more.ext::after{transform:none;border:none;width:auto;height:auto;content:"\2197";margin-left:2px;font-size:.9em;}

/* ---------- Reading progress (thin link-blue line at the very top) ---------- */
.read-progress{position:fixed;top:0;left:0;right:0;z-index:101;height:2px;background:var(--link);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;will-change:transform;}

/* ---------- Navigation (menu bar + hover panels) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;transition:background-color .15s ease-out;}
/* Transparent over the top of the hero; turns black once the page scrolls */
.nav.scrolled{background:#000;}
.nav.menu-open,.nav.open{background:#000;}
/* backdrop-filter would trap the fixed mobile sheet inside the bar, so drop it while open */
.nav.open{-webkit-backdrop-filter:none;backdrop-filter:none;}
/* logo | centered page links | buttons — equal side columns keep the links truly centered */
.nav-bar{max-width:calc(1180px + var(--gutter)*2);height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;}
.nav-logo{display:flex;align-items:center;justify-self:start;margin-left:24px;}
.nav-logo img{height:24px;width:auto;filter:brightness(0) invert(1);}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);}
.nav-links a{font-size:15px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .2s;padding:8px 0;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
.nav-links a:not([href]){cursor:pointer;}
.nav-links a:hover,.nav-links a.on,.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-cta{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.nav-cta .btn{min-height:32px;padding:0 14px;gap:6px;font-size:13px;font-weight:500;}
.nav-cta .btn svg{width:12px;height:12px;}
.btn-soft{background:#1f1f1f;color:var(--ink);}
.btn-soft:hover{background:#333;}
/* "Try soshctrl" buttons turn yellow on hover */
.btn[href="https://soshctrl.com"]:hover{background:#ffd60a;color:#000;}
/* ...except in the top bar, where it only greys a touch */
.nav-cta .btn[href="https://soshctrl.com"]:hover{background:#d6d6d9;color:#000;}
/* ...and not on buttons marked .no-sosh-hover ("Meet soshctrl" on the home page), which keep the plain primary hover */
.btn.btn-primary.no-sosh-hover:hover{background:#d6d6d9;color:#000;}
/* Yellow button (product page hero) */
.btn-yellow{background:#ffd60a;color:#000;min-height:38px;padding:0 18px;gap:6px;font-size:14px;}
.btn-yellow svg{width:16px;height:16px;}
.btn.btn-yellow:hover{background:#ffe14d;color:#000;}
.nav-drop{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.2,.7,.2,1);}
.nav.menu-open .nav-drop{grid-template-rows:1fr;}
.nav-drop>div{overflow:hidden;}
.nav-panel{display:none;justify-content:center;gap:clamp(32px,5vw,80px);padding:16px 0 24px;opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease;}
.nav-panel.on{display:flex;}
.nav.menu-open .nav-panel.on{opacity:1;transform:none;}
.nav-col{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-width:clamp(180px,16vw,240px);}
.nav-h{margin:0 0 4px;font-size:12px;font-weight:500;color:var(--muted);}
.nav-big,.nav-sm{color:var(--ink);text-decoration:none;font-size:clamp(16px,1.2vw,18px);font-weight:500;letter-spacing:-0.02em;line-height:1.4;transition:opacity .2s;}
.nav-big:hover,.nav-sm:hover{opacity:.6;}
.nav-panel .nav-h{font-size:13.5px;}
.nav-panel .nav-big{font-size:clamp(21px,1.6vw,24px);}
.nav-panel .nav-sm{font-size:clamp(14.5px,1.05vw,16px);}
.nav-panel .nav-col:last-child:not(:first-child){gap:6px;}
.nav-panel[data-panel="product"] .nav-big{font-size:clamp(28px,2.2vw,34px);font-weight:400;letter-spacing:-0.025em;line-height:1.2;}
.nav-prod-logo{display:inline-flex;align-items:center;}
.nav-prod-logo img{display:block;height:0.88em;width:auto;filter:brightness(0) invert(1);}
.nav-ext{display:inline-flex;align-items:center;gap:.35em;}
.nav-ext .ext-arrow{width:.75em;height:.75em;flex:none;}
.nav-shade{position:fixed;inset:0;z-index:99;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;}
.nav-shade.on{opacity:1;visibility:visible;}
.nav-toggle{display:none;width:40px;height:40px;margin-right:-8px;border:none;background:none;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;}
.nav-toggle span{position:relative;display:block;width:18px;height:2px;background:currentColor;transition:background-color .25s;}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .25s ease,top .25s ease;}
.nav-toggle span::before{top:-6px;} .nav-toggle span::after{top:6px;}
.nav.open .nav-toggle span{background:transparent;}
.nav.open .nav-toggle span::before{top:0;transform:rotate(45deg);}
.nav.open .nav-toggle span::after{top:0;transform:rotate(-45deg);}
.nav-sheet{display:none;}
@media (max-width:900px){
  .nav-links,.nav-drop,.nav-cta .btn{display:none;}
  .nav-bar{grid-template-columns:1fr auto;}
  .nav-toggle{display:inline-flex;}
  .nav-sheet{display:block;position:fixed;top:var(--nav-h);left:0;right:0;height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));background:#000;padding:8px var(--gutter) 48px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;}
  .nav.open .nav-sheet{opacity:1;visibility:visible;}
  /* One plain list of sections; tapping a section opens the links that live inside it */
  .sheet-nav{padding:6px 0 4px;}
  .sheet-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:19px 0;border:none;border-bottom:1px solid var(--line-soft);background:none;font:inherit;font-size:22px;font-weight:500;letter-spacing:-0.015em;line-height:1.3;text-align:left;color:var(--ink);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .sheet-chev{flex:none;color:var(--muted);transition:transform .28s ease,color .2s ease;}
  .sheet-item.on>.sheet-row .sheet-chev{transform:rotate(180deg);color:var(--ink);}
  .sheet-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
  .sheet-item.on .sheet-sub{grid-template-rows:1fr;}
  .sheet-sub>div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility .3s;}
  .sheet-item.on .sheet-sub>div{visibility:visible;}
  .sheet-sub a{display:block;padding:9px 0;font-size:15.5px;font-weight:450;letter-spacing:-0.005em;line-height:1.3;color:var(--ink);text-decoration:none;}
  .sheet-sub>div>a:first-child{padding-top:14px;}
  .sheet-sub>div>a:last-child{padding-bottom:16px;}
  .sheet-sub .nav-ext{display:inline-flex;}
  .sheet-sub .ext-arrow{width:.85em;height:.85em;}
  .sheet-sub .nav-prod-logo{padding-bottom:20px;}
  .sheet-sub .nav-prod-logo img{height:1.5em;}
  .sheet-sub .nav-prod-logo .ext-arrow{width:1.5em;height:1.5em;}
  .sheet-cta{display:flex;flex-direction:column;gap:10px;margin-top:26px;}
}

/* First section on inner pages clears the fixed nav */
.page-first{padding-top:calc(var(--nav-h) + clamp(64px,9vw,120px));}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:var(--nav-h) 0 0;text-align:center;}
/* The animation comes first; the headline follows closely below it */
.hero>.wrap{display:flex;flex-direction:column;justify-content:center;padding-top:clamp(96px,12vw,180px);padding-bottom:clamp(120px,15vw,220px);}
.hero .display{font-size:clamp(32px,4.6vw,60px);}
.hero .lede{max-width:600px;margin:20px auto 0;font-size:clamp(17px,1.5vw,19px);}
.hero .actions{margin-top:28px;justify-content:center;}
.hero .btn{min-height:42px;padding:0 22px;font-size:15px;}
.hero .more{font-size:15px;}
/* Hero title: neutral brushed-silver sheen running diagonally across the letters, with soft
   black lighting feathered into the top-left of the "A" and the bottom-right end of the line.
   All layers are clipped to the text, so the shading only shows inside the letters. The sheen sits
   on the static pieces either side of the rotating word, never on an ancestor of it: desktop
   Chrome/Edge clip an ancestor's background to every descendant's glyphs, ignoring their opacity,
   transform and overflow, which paints all the stacked rotator words on top of each other. */
.hero-title .lit-text{display:inline-block;padding-bottom:.08em;filter:drop-shadow(0 0 20px rgba(255,255,255,.1)) drop-shadow(0 2px 36px rgba(255,255,255,.06));}
.hero-title .lit-a,.hero-title .lit-b{-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-title .lit-a{background:
  radial-gradient(1.1em 1em at 0 0,rgba(0,0,0,.38),rgba(0,0,0,.14) 45%,transparent 100%),
  linear-gradient(115deg,#c4c8ce 0%,#e6e8eb 55%,#f5f5f7 100%);-webkit-background-clip:text;background-clip:text;}
.hero-title .lit-b{background:
  radial-gradient(1.1em 1em at 100% 100%,rgba(0,0,0,.38),rgba(0,0,0,.14) 45%,transparent 100%),
  linear-gradient(115deg,#fff 0%,#d3d6db 30%,#f5f5f7 62%,#c9cdd3 100%);-webkit-background-clip:text;background-clip:text;}
/* Soft white light in the background behind the hero title */
.hero-title{position:relative;isolation:isolate;}
.hero-title::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:min(120%,1100px);height:320%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.11),rgba(255,255,255,.05) 45%,transparent 100%);}
/* Rotating word in the hero title: each word swipes up out of a clipped slot while the next one
   rises in from below. Words carry their own sheen because moving (transformed) text isn't reliably
   painted by the parent's background-clip:text. */
.hero-rotator{display:inline-grid;vertical-align:baseline;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;transition:width .42s cubic-bezier(.2,.8,.2,1);}
.hero-word{grid-area:1/1;justify-self:start;white-space:nowrap;background:linear-gradient(115deg,#d3d6db 0%,#fff 45%,#e6e8eb 70%,#b9bec5 100%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(110%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s ease;}
.hero-word.is-on{transform:none;opacity:1;}
.hero-word.is-out{transform:translateY(-110%);opacity:0;}
@media (prefers-reduced-motion:reduce){.hero-rotator,.hero-word{transition:none;}}
.hero-media{position:relative;margin-top:clamp(56px,7vw,88px);border-radius:var(--radius);overflow:hidden;aspect-ratio:21/10;background:var(--card);}
.hero-media>img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-media .mark{position:absolute;left:50%;top:50%;height:52%;width:auto;transform:translate(-50%,-50%);opacity:.95;}
@media (max-width:700px){.hero-media{aspect-ratio:4/5;}.hero-media .mark{height:34%;}}

/* Hero background: a photo of a dark ridged floor running to the horizon between two curved
   walls. It is anchored to the first screen (svh units), dimmed right down so it stays in the
   background, kept dark behind the wordmark and tagline, and falls away to black before the headline. */
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#000;}
.hero-bg img{position:absolute;left:0;top:0;width:100%;height:112vh;height:112svh;object-fit:cover;object-position:50% 58%;filter:brightness(.45) saturate(.8);}
/* Vignette: dark under the nav, darker behind the wordmark and tagline, black below the shot */
.hero-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse min(46vw,520px) 22svh at 50% 52svh,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 100%),
  linear-gradient(to bottom,rgba(0,0,0,.8) 0,rgba(0,0,0,.2) 9svh,rgba(0,0,0,0) 24svh),
  linear-gradient(to bottom,rgba(0,0,0,0) 70svh,rgba(0,0,0,.6) 92svh,#000 112svh);}
/* Phones: the shot is landscape, so covering a portrait screen crops it down to its flat middle and
   both walls disappear. Instead the whole shot is shown, just wider than the screen, and lifted up the
   page so it sits with the wordmark rather than in a band along the bottom: the walls come in from
   both edges at around half height and the floor fades out into the black below. max-width overrides
   the global img cap; the height follows the width (128vw x 896/1200 = 95.6vw) and the top is masked
   into the black sky so the edge of the shot never shows. Note the scale does not change how high the
   walls sit (a wider shot crops their peaks by as much as it lifts them) -- the 72svh anchor does.
   Landscape phones already frame the shot like a laptop, so they keep the cover. */
@media (max-width:700px) and (orientation:portrait){
  .hero-bg img{left:-14%;width:128%;max-width:none;height:auto;
    top:calc(72vh - 95.6vw);top:calc(72svh - 95.6vw);
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 14%,#000 88%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 14%,#000 88%,rgba(0,0,0,0) 100%);}
  /* The wordmark and tagline ride up with the shot, so the whole hero sits together under the nav
     instead of leaving a tall empty strip above it */
  .hero-logo{top:12%;}
  .hero-tag{top:calc(12% + clamp(71px,7.8vw,107px));}
  /* Same vignette: the soft patch follows the wordmark up, and the floor is taken to black across its
     foreground so the bottom edge of the shot never shows */
  .hero-bg::after{background:
    radial-gradient(ellipse min(46vw,520px) 22svh at 50% 20svh,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.8) 0,rgba(0,0,0,.2) 9svh,rgba(0,0,0,0) 24svh),
    linear-gradient(to bottom,rgba(0,0,0,0) 58svh,rgba(0,0,0,.5) 68svh,#000 74svh);}
}

/* Hero animation box: transparent so the hero background shows through */
.hero-anim{background:transparent;isolation:isolate;}
/* Full-bleed: the animation box runs edge to edge, right under the nav, and fills the rest of the screen */
.hero-bleed{width:100%;}
.hero-bleed .hero-anim{margin-top:0;border-radius:0;aspect-ratio:auto;height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));min-height:420px;}

.hero-logo{position:absolute;left:50%;top:44%;z-index:1;width:min(31%,400px);height:auto;transform:translate(-50%,-50%);overflow:visible;}
/* Plays once (5s), then stops on the centred Xctrl:
   1. X (both halves overlapping in the centre), held for about 0.5s
   2. X splits apart, ctrl is written between the halves, one letter at a time (c, t, r, l)
   3. ctrl fades out, both halves slide at the same time and meet where the X sits in the centred Xctrl
      (the left half moves a little to the right, the right half travels much further to the left)
   4. ctrl is written again on the right of that X, one letter at a time, so Xctrl sits in the centre of the page
   5. it stays there; the animation does not loop
   The letters (hlLetter) do both writings; the fade out between them (hlCtrl) acts on the whole word.
   X offsets: 428/-428 = joined in the centre, 0/0 = split, 130/-726 = X of the centred Xctrl.
   ctrl offset: 0 = between the halves, 174 = right of the X in the centred Xctrl. */
.hero-logo .hl-xl{transform:translateX(428px);animation:hlXL 5s forwards;}
.hero-logo .hl-xr{transform:translateX(-428px);animation:hlXR 5s forwards;}
.hero-logo .hl-ctrl{animation:hlCtrl 5s forwards;}
.hero-logo .hl-ctrl path{opacity:0;animation:hlLetter 5s ease both;}
.hero-logo .hl-ctrl .hl-t{animation-delay:.12s;}
.hero-logo .hl-ctrl .hl-r{animation-delay:.24s;}
.hero-logo .hl-ctrl .hl-l{animation-delay:.36s;}
@keyframes hlXL{
  0%,10%{transform:translateX(428px);animation-timing-function:cubic-bezier(.65,0,.35,1);}
  33.6%,67%{transform:translateX(0);animation-timing-function:cubic-bezier(.65,0,.35,1);}
  86.6%,100%{transform:translateX(130px);}
}
@keyframes hlXR{
  0%,10%{transform:translateX(-428px);animation-timing-function:cubic-bezier(.65,0,.35,1);}
  33.6%,67%{transform:translateX(0);animation-timing-function:cubic-bezier(.65,0,.35,1);}
  86.6%,100%{transform:translateX(-726px);}
}
/* ctrl only moves while it is invisible; the word is shown again (86.6%) while its letters are still hidden */
@keyframes hlCtrl{
  0%,56%{opacity:1;transform:translateX(0);}
  66%,68%{opacity:0;transform:translateX(0);}
  70%,86.4%{opacity:0;transform:translateX(174px);}
  86.6%,100%{opacity:1;transform:translateX(174px);}
}
/* Each letter is written in (rises out of a blur) twice: between the halves, then right of the X.
   70% resets the letters while the whole word is hidden by hlCtrl. */
@keyframes hlLetter{
  0%,25.6%{opacity:0;transform:translateY(14px);filter:blur(6px);}
  37.6%,68%{opacity:1;transform:none;filter:none;}
  70%,86.6%{opacity:0;transform:translateY(14px);filter:blur(6px);}
  98.6%,100%{opacity:1;transform:none;filter:none;}
}
/* Small grey line about the company, under the logo; visible straight away with the X */
.hero-tag{position:absolute;left:50%;top:calc(44% + clamp(71px,7.8vw,107px));z-index:1;width:min(90%,560px);transform:translateX(-50%);margin:0;font-size:clamp(15px,1.3vw,18px);line-height:1.5;color:var(--faint);text-wrap:balance;}
@media (max-width:700px){.hero-logo{width:57%;}}
@media (prefers-reduced-motion:reduce){
  .hero-logo,.hero-logo *,.hero-tag{transition:none !important;animation:none !important;}
  /* Static final wordmark: X on the left, ctrl on its right */
  .hero-logo .hl-xl{transform:translateX(130px);}
  .hero-logo .hl-xr{transform:translateX(-726px);}
  .hero-logo .hl-ctrl{transform:translateX(174px);}
  .hero-logo .hl-ctrl path{opacity:1;}
}

/* ---------- Photo figures ---------- */
.figure{margin:0;}
.figure .ph{border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);}
.figure .ph img{width:100%;height:100%;object-fit:cover;}
.figure figcaption{margin-top:14px;font-size:14px;color:var(--muted);}
.ratio-16x9{aspect-ratio:16/9;} .ratio-4x3{aspect-ratio:4/3;} .ratio-4x5{aspect-ratio:4/5;} .ratio-3x2{aspect-ratio:3/2;} .ratio-21x9{aspect-ratio:21/9;}
@media (max-width:700px){.ratio-21x9{aspect-ratio:4/3;}}

/* Photo deck (soshctrl): one photo at a time, sliding sideways. Positions and the timer bar are set in site.js */
.deck,.figure .deck{position:relative;background:none;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;}
.deck.dragging{cursor:grabbing;}
.deck-card{position:absolute;top:6%;left:0;height:80%;aspect-ratio:3/2;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-alt);box-shadow:0 24px 60px rgba(0,0,0,.5);will-change:transform;}
.figure .deck-card img{pointer-events:none;}
.js .deck-card{opacity:0;}
/* Timer bar under the photo: one segment per photo, the current one fills while it is shown */
.deck-bar{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);display:flex;gap:6px;}
.deck-seg{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;}
.deck-seg i{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left center;}
@media (max-width:700px){.deck-card{top:7%;height:78%;}.deck-bar{bottom:6.5%;}}

/* ---------- Section heads ---------- */
.head{max-width:820px;}
.head.center{margin:0 auto;}
.head .lede{margin-top:20px;}
.head+*,.wrap:has(>.head:last-child)+.wide{margin-top:clamp(48px,6vw,80px);}

/* ---------- Tiles (photo cards) ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);}
.tile{background:var(--bg);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;}
.tile{background:var(--card);}
.tile .ph{aspect-ratio:4/3;overflow:hidden;}
.tile .ph img{width:100%;height:100%;object-fit:cover;}
.tile .tx{padding:clamp(24px,2.6vw,32px);}
.tile h3{font-size:clamp(21px,1.9vw,24px);letter-spacing:-0.02em;line-height:1.2;}
.tile .ph-grad{background:#05070f;}
.tile .ph-grad canvas{display:block;width:100%;height:100%;}
.tile .ph-logo{background:#000;display:flex;align-items:center;justify-content:center;}
.tile .ph-logo img{width:auto;height:52%;object-fit:contain;}
.tile .ph-wordmark img{width:56%;height:auto;filter:brightness(0) invert(1);}
.tile .ph-soshctrl img{width:68%;height:auto;}
.tile p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--ink-2);}
@media (max-width:900px){.tiles{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto;}}

/* ---------- Product intro ---------- */
.product-logo{height:clamp(34px,4vw,46px);width:auto;margin:0 auto 26px;}
.product-glyph{height:clamp(56px,6vw,76px);width:auto;margin:0 auto 20px;}
.product-title{font-size:clamp(16px,1.4vw,18px);font-weight:400;letter-spacing:-0.02em;line-height:1.25;}
/* Product hero fills the first screen (below the nav), content centred */
.product-hero{padding-top:var(--nav-h);}
.product-hero>.wrap:first-child{min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;justify-content:center;padding-top:24px;padding-bottom:24px;}
.product-hero>.wrap:first-child>.head{width:100%;max-width:960px;}
.product-hero .product-glyph{height:clamp(72px,10vh,120px);margin-bottom:clamp(20px,3vh,32px);}
.product-hero .product-logo{height:clamp(44px,8vh,88px);margin-bottom:clamp(24px,4vh,40px);}
.product-hero .product-title{font-size:clamp(14px,1.2vw,17px);}
.product-hero{position:relative;isolation:isolate;}
/* Soft yellow/white glow behind the product hero, drifting slowly */
/* Each glow wanders across the whole hero on its own path and timing */
@property --pg1x{syntax:'<percentage>';inherits:false;initial-value:20%;}
@property --pg1y{syntax:'<percentage>';inherits:false;initial-value:25%;}
@property --pg2x{syntax:'<percentage>';inherits:false;initial-value:80%;}
@property --pg2y{syntax:'<percentage>';inherits:false;initial-value:70%;}
@property --pg3x{syntax:'<percentage>';inherits:false;initial-value:75%;}
@property --pg3y{syntax:'<percentage>';inherits:false;initial-value:20%;}
.product-hero::before{content:"";position:absolute;top:0;left:0;width:100%;height:100vh;height:100svh;z-index:-2;pointer-events:none;
  background:
    radial-gradient(40% 45% at var(--pg1x) var(--pg1y),rgba(255,223,0,.26),transparent 70%),
    radial-gradient(35% 40% at var(--pg2x) var(--pg2y),rgba(255,255,255,.08),transparent 70%),
    radial-gradient(30% 35% at var(--pg3x) var(--pg3y),rgba(255,223,0,.17),transparent 70%);
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent);
  animation:product-hero-g1 18s ease-in-out infinite,product-hero-g2 22s ease-in-out infinite,product-hero-g3 20s ease-in-out infinite;}
@keyframes product-hero-g1{
  0%,100%{--pg1x:20%;--pg1y:25%;}
  25%{--pg1x:80%;--pg1y:20%;}
  50%{--pg1x:75%;--pg1y:75%;}
  75%{--pg1x:25%;--pg1y:70%;}
}
@keyframes product-hero-g2{
  0%,100%{--pg2x:80%;--pg2y:70%;}
  25%{--pg2x:30%;--pg2y:80%;}
  50%{--pg2x:15%;--pg2y:30%;}
  75%{--pg2x:60%;--pg2y:15%;}
}
@keyframes product-hero-g3{
  0%,100%{--pg3x:75%;--pg3y:20%;}
  33%{--pg3x:20%;--pg3y:45%;}
  66%{--pg3x:55%;--pg3y:80%;}
}
@media (prefers-reduced-motion:reduce){.product-hero::before{animation:none;}}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line-soft);font-size:13px;font-weight:550;color:var(--ink-2);}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--sosh);box-shadow:0 0 0 1px #00000014;}

/* ---------- Feature carousel (soshctrl page): cards with a text top and a small UI mock at the bottom ---------- */
.features{margin-top:clamp(72px,9vw,128px);}
/* A sideways row: trackpad, swipe, or drag with the mouse (see site.js). Exactly 3 whole cards in view (2 on tablets, 1 on phones), no half cards. */
.fc-track{--fc-gap:clamp(14px,1.4vw,18px);--fc-cols:3;max-width:1180px;margin:0 auto;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--fc-cols) - 1) * var(--fc-gap)) / var(--fc-cols));gap:var(--fc-gap);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none;}
.fc-track::-webkit-scrollbar{display:none;}
.fc-track.dragging{cursor:grabbing;scroll-snap-type:none;}
/* Card: preview panel on top, text underneath */
.fc{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-soft);border-radius:0;padding:10px;}
.fc-stage{position:relative;isolation:isolate;overflow:hidden;height:clamp(320px,26vw,360px);border-radius:0;background:#0b0b0c;padding:24px 20px 0;display:flex;justify-content:center;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent);}
.fc-text{padding:22px 16px 30px;}
.fc h3{font-size:clamp(20px,1.7vw,22px);letter-spacing:-0.02em;line-height:1.2;}
.fc-text p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--muted);}
@media (max-width:1000px){.fc-track{--fc-cols:2;}}
@media (max-width:640px){.fc-track{--fc-cols:1;}}
/* White scroll bar under the cards (thumb position and width set in site.js) */
.fc-scroll{position:relative;width:120px;height:4px;margin:32px auto 0;border-radius:99px;background:rgba(255,255,255,.14);cursor:pointer;touch-action:none;}
.fc-scroll::before{content:"";position:absolute;inset:-10px 0;}
.fc-thumb{position:absolute;top:0;left:0;height:100%;border-radius:inherit;background:#fff;cursor:grab;}
.fc-scroll.dragging .fc-thumb{cursor:grabbing;}

/* Mock UI pieces inside the preview panel (decorative, aria-hidden) */
.fc-ui{width:100%;max-width:320px;font-size:13.5px;line-height:1.45;color:var(--ink-2);}
.fc-win{background:#161617;border:1px solid #2a2a2d;border-radius:14px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.45);}
.fc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:-2px 0 16px;padding-bottom:12px;border-bottom:1px solid #1f1f22;font-size:13px;}
.fc-head b{font-weight:600;color:var(--ink);}
.fc-head span{color:var(--faint);white-space:nowrap;}
.fc-label{display:block;font-size:12px;font-weight:550;color:var(--faint);margin:0 0 6px;}
.fc-field{padding:10px 12px;border-radius:10px;background:#0b0b0c;border:1px solid #2a2a2d;color:var(--ink);margin-bottom:14px;}
.fc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.fc-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid #2f2f32;font-size:12.5px;color:var(--ink-2);}
.fc-chip.on{background:rgba(255,223,0,.12);border-color:rgba(255,223,0,.35);color:var(--ink);}
.fc-btn{display:flex;align-items:center;justify-content:center;height:38px;border-radius:10px;background:var(--ink);color:#000;font-size:13.5px;font-weight:550;}
.fc-btn.ghost{background:#1f1f22;color:var(--ink);}
.fc-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #1f1f22;}
.fc-row:first-of-type,.fc-head+.fc-row{border-top:none;padding-top:0;}
.fc-row .t{flex:1;min-width:0;}
.fc-row .t b{display:block;font-weight:550;color:var(--ink);}
.fc-row .t span{display:block;font-size:12.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fc-row .v{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;}
.fc-pf{flex:none;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:650;color:#fff;}
.fc-pf svg{width:18px;height:18px;display:block;}
.fc-pf.yt{background:#fff;}
.fc-pf.yt svg{width:22px;height:22px;}
.fc-pf.ig{background:linear-gradient(45deg,#feda75,#fa7e1e 25%,#d62976 55%,#962fbf 80%,#4f5bd5);}
.fc-pf.tt{background:#000;border:1px solid #333;}
.fc-pf.fb{background:none;}
.fc-pf.fb svg{width:32px;height:32px;}
.fc-live{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:#30d158;}
.fc-live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.fc-bubble{background:#0b0b0c;border:1px solid #2a2a2d;border-radius:16px;padding:14px;}
.fc-bubble p{margin:8px 0 14px;color:var(--ink);}
.fc-acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
.fc-acts .fc-btn{height:34px;font-size:12.5px;}
/* Week strip */
.fc-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:16px;text-align:center;font-size:11.5px;color:var(--faint);}
.fc-week div{padding:8px 0 10px;border-radius:10px;background:#0b0b0c;}
.fc-week div.on{background:#232326;color:var(--ink);}
.fc-week b{display:block;margin-top:4px;font-size:14px;font-weight:550;color:var(--ink);}
.fc-week i{display:block;width:5px;height:5px;margin:6px auto 0;border-radius:50%;background:var(--ink-2);}
/* Spend meter */
.fc-big{font-size:34px;font-weight:600;letter-spacing:-0.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
.fc-big small{font-size:14px;font-weight:450;letter-spacing:0;color:var(--faint);margin-left:6px;}
.fc-bar{height:8px;border-radius:99px;background:#1f1f22;margin:14px 0 18px;overflow:hidden;}
.fc-bar span{display:block;height:100%;border-radius:inherit;background:var(--sosh);}
.fc-spark{display:block;width:100%;height:56px;margin-top:4px;}
.fc-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#3a3a3e;}
.fc-dot.on{background:var(--sosh);}
.fc-dot.live{background:#30d158;}
.fc-tag{flex:none;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:550;font-variant-numeric:tabular-nums;}
.fc-tag.up{background:rgba(48,209,88,.12);color:#30d158;}
.fc-tag.down{background:rgba(255,69,58,.12);color:#ff453a;}
.fc-arrow{text-align:center;color:var(--faint);font-size:16px;line-height:1;margin:10px 0 12px;}
.fc-bars{display:flex;align-items:flex-end;gap:6px;height:64px;margin:16px 0 18px;}
.fc-bars span{flex:1;border-radius:4px 4px 2px 2px;background:#3a3a3e;}
.fc-bars span.f{background:repeating-linear-gradient(135deg,rgba(255,223,0,.55) 0 4px,rgba(255,223,0,.2) 4px 8px);}

/* ---------- Steps (sticky lead photo + scrolling side cards) ---------- */
.steps{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,1fr);align-items:start;gap:clamp(20px,2vw,28px);}
.step-main{position:sticky;top:calc(var(--nav-h) + 24px);}
.step-side{display:flex;flex-direction:column;gap:clamp(48px,6vw,88px);}
.step .figure .ph{aspect-ratio:1/1;border-radius:var(--radius-sm);}
.step-lead .figure .ph{aspect-ratio:16/9;}
.step h3{margin-top:22px;font-size:17px;font-weight:600;letter-spacing:-0.015em;line-height:1.3;}
.step-lead h2{margin-top:26px;font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-0.025em;line-height:1.2;}
.step-lead .lede{margin-top:10px;font-size:13px;line-height:1.5;color:var(--faint);}
.step .meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:14px;font-size:13px;line-height:1.45;color:var(--faint);}
.step .meta b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
@media (max-width:900px){.steps{grid-template-columns:1fr;gap:clamp(48px,8vw,72px);}.step-main{position:static;}.step-side{display:grid;grid-template-columns:1fr 1fr;gap:40px 16px;}}
@media (max-width:560px){.step-side{grid-template-columns:1fr;}}

/* ---------- Dark band ---------- */
#name{padding-top:48px;position:relative;isolation:isolate;overflow:hidden;overflow:clip;}
#name .wrap{position:relative;z-index:1;}
.name-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(32px,5vw,72px);margin-top:clamp(56px,7vw,96px);text-align:center;}
.name-grid .glyph{line-height:0;}
.name-grid .glyph img{height:clamp(56px,6vw,80px);width:auto;margin:0 auto;}
.name-grid h3{margin-top:18px;font-size:clamp(22px,2vw,26px);}
.name-grid p{max-width:34ch;margin:10px auto 0;font-size:15px;line-height:1.55;color:var(--muted);}
@media (max-width:760px){.name-grid{grid-template-columns:1fr;}}
/* Why Xctrl title: tied to scrolling. The title sits at the top of .name-pop (so there's no empty space above it),
   pins once it reaches the middle of the screen, and stays there for 150vh of scrolling (a spacer below it; sticky
   needs the room inside the box, padding would not count).
   Only while it is pinned (so each part moves in a straight line): "Many sources," slides in from the left,
   "one center." from the right, then "You in control." rises from below (reversing on the way back up). Ranges are
   measured from the moment the top of .name-pop enters at the bottom of the screen; the pin runs from 50vh to 200vh. Uses CSS scroll-driven animations where supported (no JavaScript,
   off the main thread); elsewhere site.js sets --p (that distance in screen heights). Only transform and opacity
   change. #name uses overflow:clip (not hidden) so it isn't a scroll container: the timeline follows the page and
   the sticky title works. */
.name-pop{view-timeline:--pop block;}
.name-pop::after{content:"";display:block;height:150vh;}
.name-stick{position:sticky;top:50vh;transform:translateY(-50%);}
.name-pop .h2{margin:0;}
.pop-you{color:var(--link);}
.pop-title .pp{display:inline-block;will-change:transform,opacity;}
@keyframes pp-left{from{opacity:0;transform:translateX(-40vw);}to{opacity:1;transform:none;}}
@keyframes pp-right{from{opacity:0;transform:translateX(40vw);}to{opacity:1;transform:none;}}
@keyframes pp-up{from{opacity:0;transform:translateY(1.2em);}to{opacity:1;transform:none;}}
@supports (animation-timeline:view()){
  .pop-title .pp{animation:pp-left linear both;animation-timeline:--pop;}
  .pop-title .pp1{animation-range:cover 50vh cover 110vh;}
  .pop-title .pp2{animation-name:pp-right;animation-range:cover 95vh cover 155vh;}
  .pop-title .pp3{animation-name:pp-up;animation-range:cover 140vh cover 200vh;}
}
@supports not (animation-timeline:view()){
  .js .name-pop{--p:0;}
  .js .pop-title .pp{opacity:var(--k);transform:translateX(calc((var(--k) - 1) * 40vw));}
  .js .pop-title .pp1{--k:clamp(0,(var(--p) - .5) / .6,1);}
  .js .pop-title .pp2{--k:clamp(0,(var(--p) - .95) / .6,1);transform:translateX(calc((1 - var(--k)) * 40vw));}
  .js .pop-title .pp3{--k:clamp(0,(var(--p) - 1.4) / .6,1);transform:translateY(calc((1 - var(--k)) * 1.2em));}
}
@media (prefers-reduced-motion:reduce){.name-pop::after{display:none;}.name-stick{position:static;transform:none;}
  .pop-title .pp{animation:none!important;opacity:1!important;transform:none!important;}}
/* Logo split: X and ctrl start joined as the Xctrl mark in the middle (offsets --dx/--dy set by site.js),
   slide apart into their columns once the block reveals, then each description fades in underneath. */
.name-grid.lg-split{margin-top:0;align-items:start;}
.js .lg-split .glyph img{transform:translate(var(--dx,0px),var(--dy,0px));transition:transform 1.2s cubic-bezier(.65,0,.35,1) .4s;}
.js .lg-split.in .glyph img{transform:none;}
.js .lg-split .lg-tx{opacity:0;transform:translateY(14px);filter:blur(6px);transition:opacity .7s ease,transform .7s ease,filter .7s ease;transition-delay:1.5s;}
.js .lg-split .lg-col+.lg-col .lg-tx{transition-delay:1.65s;}
.js .lg-split.in .lg-tx{opacity:1;transform:none;filter:none;}
@media (prefers-reduced-motion:reduce){.js .lg-split .glyph img{transform:none;transition:none;}.js .lg-split .lg-tx{opacity:1;transform:none;filter:none;transition:none;}}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);}
.stat{padding:clamp(28px,3vw,40px) clamp(0px,2vw,28px) 0 0;}
.stat .n{font-size:clamp(38px,4.2vw,56px);font-weight:600;letter-spacing:-0.045em;line-height:1;}
.stat .l{margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--muted);max-width:220px;}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr);row-gap:8px;}}

/* ---------- Reach (contact details) ---------- */
.reach{display:grid;grid-template-columns:1fr auto 1fr;max-width:1040px;margin:0 auto;padding:0;list-style:none;text-align:center;}
.reach li{padding:8px clamp(16px,3vw,40px);}
.reach li+li{border-left:1px solid var(--line-soft);}
.reach h3{margin:0 0 14px;font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted);}
.reach p{display:flex;flex-wrap:nowrap;justify-content:center;gap:18px;margin:0;font-size:18px;line-height:1.4;font-weight:500;letter-spacing:-0.01em;color:var(--ink);white-space:nowrap;}
.reach a{color:var(--ink);text-decoration:none;transition:color .2s;}
.reach a:hover,.reach a:focus-visible{color:var(--muted);}
@media (max-width:760px){.reach{grid-template-columns:1fr;row-gap:36px;}.reach li+li{border-left:none;}}

/* ---------- "What we are" list (one straight row per item, blue strikethrough on hover) ---------- */
.notgrid{margin:48px 0 0;padding:0;list-style:none;border-top:1px solid var(--line-soft);}
.notgrid li{display:grid;grid-template-columns:34px minmax(220px,1fr) 2fr;align-items:center;column-gap:clamp(20px,3vw,40px);padding:clamp(18px,2vw,24px) clamp(12px,1.6vw,20px);border-bottom:1px solid var(--line-soft);transition:background .4s ease;}
.notgrid li:hover{background:var(--bg-alt);}
.not-ic{display:block;width:34px;height:34px;fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible;}
.not-ic .ic{stroke:var(--faint);stroke-width:1.5;transition:stroke .4s ease,opacity .4s ease;opacity:.75;}
.notgrid li:hover .ic{stroke:var(--ink-2);opacity:1;}
.notgrid h3{font-size:clamp(19px,1.6vw,21px);letter-spacing:-0.02em;}
.notgrid p{font-size:15px;line-height:1.55;color:var(--muted);}
.notgrid h3,.notgrid p{transition:color .2s ease;}
.notgrid li:hover h3,.notgrid li:hover p{color:var(--link);}
@media (max-width:760px){.notgrid li{grid-template-columns:34px 1fr;row-gap:6px;align-items:start;}.notgrid p{grid-column:2;}}

/* ---------- Split (image + text) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,6vw,96px);}
.split .actions{margin-top:30px;}
.split .body{margin-top:18px;}
.split .body+.body{margin-top:14px;}
@media (max-width:900px){.split{grid-template-columns:1fr;}}

/* ---------- Star globe (About story): text on top, draggable globe of stars below ---------- */
#story{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(64px,8vw,110px);}
#story .wrap{position:relative;z-index:1;}
.story-stars{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;}
.story-globe .head{margin:0 auto;}
.story-globe .body{margin:18px auto 0;max-width:640px;}
.story-globe .actions{margin-top:26px;justify-content:center;}
.star-globe{position:relative;margin:clamp(24px,4vw,48px) auto 0;width:min(100%,640px);aspect-ratio:1/1;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
.star-globe.dragging{cursor:grabbing;}
.star-globe canvas{display:block;width:100%;height:100%;}
.globe-pin{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .35s ease;will-change:transform;}
.globe-pin.on{opacity:1;}
.globe-tip{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .2s ease;will-change:transform;z-index:1;}
.globe-tip.on{opacity:1;}
.globe-tip .globe-pin-label{border-color:rgba(67,197,111,.45);}
.globe-pin-dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--link);box-shadow:0 0 0 3px rgba(41,151,255,.25),0 0 18px 4px rgba(41,151,255,.7);}
.globe-pin-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--link);animation:globe-ping 2.2s ease-out infinite;}
@keyframes globe-ping{from{transform:scale(1);opacity:.9;}to{transform:scale(3.4);opacity:0;}}
.globe-pin-label{position:absolute;left:16px;top:-14px;white-space:nowrap;padding:5px 11px;border-radius:99px;background:rgba(11,11,12,.82);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:600;line-height:1.25;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.globe-pin-label small{display:block;font-size:11px;font-weight:450;color:var(--muted);}
@media (prefers-reduced-motion:reduce){.globe-pin-dot::after{animation:none;}}

/* ---------- soshctrl ribbon (card above the footer, drifting gradient) ---------- */
.ribbon-section{padding-bottom:0;}
.ribbon-after-hero{padding-top:0;padding-bottom:0;}
/* Home: same space below the ribbon as the hero leaves above it (matches .hero>.wrap padding-bottom) */
.ribbon-after-hero+.section-explore{padding-top:clamp(120px,15vw,220px);}
.ribbon-end{padding-bottom:clamp(56px,7vw,96px);}
.ribbon-flush-top{padding-top:0;}
/* Contact CTA directly above the ribbon: keep the two cards close together */
#contact:has(+.ribbon-flush-top){padding-bottom:clamp(16px,2vw,32px);}
.ribbon{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius);background:#0a0a0a;border:1px solid var(--line-soft);color:#fff;text-align:center;}
/* Drifting gradient behind the card, built so the browser never has to repaint it: each blob is its own soft ellipse
   that only moves (transform) and fades (opacity), which the graphics chip animates on its own. The layer is twice the
   card's size (inset:-50%) and each blob is placed and sized in % of that layer: --x/--y is its resting centre and
   --rx/--ry its radius. Only the inner 70% of each radius is coloured (the rest is transparent), so each blob box is
   cut to that. The keyframes move each blob by (target - resting centre), divided by the blob's own size because
   translate % is measured against the blob, not the layer. site.js pauses it all while the card is off screen. */
.ribbon-bg{position:absolute;inset:-50%;z-index:-1;overflow:hidden;pointer-events:none;animation:ribbon-drift 23s ease-in-out infinite alternate;}
.ribbon-bg i{position:absolute;width:calc(var(--rx)*1.4);height:calc(var(--ry)*1.4);left:calc(var(--x) - var(--rx)*.7);top:calc(var(--y) - var(--ry)*.7);background:radial-gradient(closest-side,var(--c),transparent);}
/* Stacked bottom to top in the page (violet first, main yellow last), the same order the gradients used to paint in */
.ribbon-bg .b1{--x:25%;--y:35%;--rx:36%;--ry:44%;--c:rgba(255,223,0,.75);animation:ribbon-b1 13s ease-in-out infinite;}
.ribbon-bg .b2{--x:75%;--y:65%;--rx:34%;--ry:42%;--c:rgba(255,214,0,.65);animation:ribbon-b2 17s ease-in-out infinite;}
.ribbon-bg .b3{--x:50%;--y:50%;--rx:30%;--ry:38%;--c:rgba(255,230,40,.40);animation:ribbon-b3 11s ease-in-out infinite;}
.ribbon-bg .b4{--x:60%;--y:25%;--rx:22%;--ry:30%;--c:rgba(255,150,30,.30);animation:ribbon-b4 9s ease-in-out infinite;}
.ribbon-bg .b5{--x:40%;--y:78%;--rx:26%;--ry:34%;--c:rgb(90,70,255);opacity:.14;animation:ribbon-b5 19s ease-in-out infinite;}
.ribbon-bg.is-paused,.ribbon-bg.is-paused i{animation-play-state:paused;}
.ribbon::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 90% at 50% 50%,rgba(0,0,0,.58),rgba(0,0,0,.16));}
.ribbon-inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:clamp(18px,2vw,26px) var(--gutter);}
.ribbon-inner > img{height:clamp(32px,3vw,42px);width:auto;}
.ribbon-wordmark{display:inline-block;height:0.74em;width:auto;vertical-align:baseline;filter:brightness(0) invert(1);}
.ribbon-title{font-size:clamp(24px,3vw,36px);font-weight:600;letter-spacing:-0.03em;color:#fff;}
/* soshctrl "o" icon. The span holds a real, invisible "o" so the word selects and copies like text; its letter-spacing trims
   the "o" to the icon's slot (0.042em bearing + 0.845ex icon + 0.009em). The icon is painted over it by ::after, sized in ex
   (the rendered font's x-height) so it shares the baseline and top line of the "s" beside it (Hanken Grotesk's round letters at
   weight 600 run from 0.0187ex below the baseline to 1.0187ex). site.js adds .is-selected while the "o" is selected, turning the icon black like
   the selected letters (the icon is white, so brightness(0) makes it black). */
.brand-o{color:transparent;letter-spacing:calc(0.845ex - 0.523em);}
.brand-o::selection{color:transparent;}
.brand-o::after{content:"";display:inline-block;width:0.76ex;height:0.933ex;vertical-align:-0.0168ex;margin:0 calc(0.009em + 0.0425ex) 0 calc(-0.009em - 0.8025ex);background:url(../img/logo/soshctrl-o.png?v=2) center/contain no-repeat;}
.brand-o.is-selected::after{filter:brightness(0);}
.ribbon .btn{min-height:38px;padding:0 20px;font-size:15px;margin-top:2px;}
@keyframes ribbon-drift{
  0%{transform:translate(-3%,-2%) rotate(-4deg) scale(1);}
  50%{transform:translate(3%,2%) rotate(3deg) scale(1.08);}
  100%{transform:translate(-1%,3%) rotate(6deg) scale(1.03);}
}
/* Main yellow: wide sweep left to right and back along the top (rests at 25% 35%, blob 50.4% x 61.6% of the layer) */
@keyframes ribbon-b1{
  0%,100%{transform:translate(calc(-3% / .504),0);}
  25%{transform:translate(calc(23% / .504),calc(-7% / .616));}
  50%{transform:translate(calc(47% / .504),calc(5% / .616));}
  75%{transform:translate(calc(19% / .504),calc(23% / .616));}
}
/* Second yellow: counter-orbit along the bottom, opposite to b1 (rests at 75% 65%, blob 47.6% x 58.8%) */
@keyframes ribbon-b2{
  0%,100%{transform:translate(calc(1% / .476),calc(1% / .588));}
  30%{transform:translate(calc(-23% / .476),calc(7% / .588));}
  60%{transform:translate(calc(-47% / .476),calc(-7% / .588));}
  80%{transform:translate(calc(-19% / .476),calc(-21% / .588));}
}
/* Soft core: small figure-eight around the centre (rests at 50% 50%, blob 42% x 53.2%) */
@keyframes ribbon-b3{
  0%,100%{transform:translate(0,0);}
  25%{transform:translate(calc(12% / .42),calc(-10% / .532));}
  50%{transform:translate(0,calc(2% / .532));}
  75%{transform:translate(calc(-12% / .42),calc(12% / .532));}
}
/* Orange spark: quick diagonal dart (rests at 60% 25%, blob 30.8% x 42%) */
@keyframes ribbon-b4{
  0%,100%{transform:translate(calc(4% / .308),calc(3% / .42));}
  35%{transform:translate(calc(-26% / .308),calc(15% / .42));}
  70%{transform:translate(calc(10% / .308),calc(37% / .42));}
}
/* Violet accent: slow wander that fades in and out (rests at 40% 78%, blob 36.4% x 47.6%) */
@keyframes ribbon-b5{
  0%,100%{transform:translate(calc(-2% / .364),calc(-4% / .476));opacity:.06;}
  40%{transform:translate(calc(26% / .364),calc(-18% / .476));opacity:.26;}
  70%{transform:translate(calc(-10% / .364),calc(-42% / .476));opacity:.14;}
}
@media (prefers-reduced-motion:reduce){.ribbon-bg,.ribbon-bg i{animation:none;}}

/* ---------- team (about page, between the story and the contact CTA) ---------- */
/* Same black background as the story above, so there is no hard edge. The top
   of the star wave canvas is not faded: the stars above the wave trail up
   into the story there. The other sides fade out. */
.team{position:relative;isolation:isolate;overflow:hidden;padding:clamp(96px,12vw,160px) 0;background:var(--bg);}
.team .wrap{position:relative;z-index:1;}
.star-wave{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,#000,#000 78%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,#000,#000 78%,transparent);
  mask-composite:intersect;}
.team+#contact{padding-top:clamp(24px,3vw,48px);}
.team-list{display:flex;flex-wrap:wrap;justify-content:center;gap:16px clamp(48px,8vw,120px);margin:0;padding:0;list-style:none;text-align:center;}
.team-list li{display:flex;flex-direction:column;gap:8px;}
.team-role{font-size:14px;font-weight:600;color:var(--muted);}
.team-name{font-size:17px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);}

/* ---------- manifesto ribbon (moving band above footer) ---------- */
.manifesto-ribbon{overflow:hidden;background:var(--bg);border-top:2px solid var(--line-soft);border-bottom:2px solid var(--line-soft);color:var(--ink);}
.manifesto-track{display:flex;width:max-content;animation:manifesto-scroll 45s linear infinite;}
.manifesto-ribbon:hover .manifesto-track{animation-play-state:paused;}
.manifesto-item{flex:none;padding:14px 0 14px 28px;font-size:15px;font-weight:600;letter-spacing:.01em;white-space:nowrap;}
@keyframes manifesto-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.manifesto-track{animation:none;}}

/* ---------- Contact emails (contact page) ---------- */
.mail-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:clamp(14px,1.4vw,18px);margin:clamp(40px,5vw,64px) 0 0;padding:0;list-style:none;}
@media (min-width:1100px){.mail-list{grid-template-columns:repeat(4,minmax(0,1fr));}}
/* Each inbox is its own card: muted icon on top, then the text block, address pinned to the bottom so the cards line up */
.mail-list a{display:flex;flex-direction:column;height:100%;padding:clamp(24px,2.4vw,30px);border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--bg-alt);color:inherit;text-decoration:none;transition:background .35s ease,border-color .35s ease;}
.mail-list a:hover,.mail-list a:focus-visible{background:var(--card);border-color:var(--line);}
.mail-ic{display:block;width:42px;height:42px;margin-bottom:clamp(30px,3.4vw,44px);fill:none;stroke:var(--faint);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.45;transition:stroke .35s ease,opacity .35s ease;}
.mail-list a:hover .mail-ic,.mail-list a:focus-visible .mail-ic{stroke:var(--ink-2);opacity:.7;}
.mail-list h3{font-size:17px;letter-spacing:-0.02em;}
.mail-list p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted);}
.mail-addr{margin-top:auto;padding-top:18px;width:fit-content;font-size:15px;font-weight:550;color:var(--link);overflow-wrap:anywhere;}
.mail-list a:hover .mail-addr,.mail-list a:focus-visible .mail-addr{text-decoration:underline;}

/* ---------- CTA card ---------- */
.cta{position:relative;overflow:hidden;background:#000;container-type:inline-size;color:#fff;text-align:center;padding:clamp(48px,6vw,84px) var(--gutter);}
/* Wide 5:1 artwork: fills the card height and centres, so only the black side padding is cropped; on narrow screens it shrinks to the card width so the mark is never cut off. */
.cta>img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:auto;max-width:none;height:100%;height:min(100%,100cqw);opacity:.6;}
/* The artwork has no hard edges: it fades out on all four sides, so it melts into the black page wherever it ends. */
.cta>img,.cta>canvas{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-composite:intersect;}
/* site.js redraws the artwork on a canvas so the dust wave can drift; it copies the (hidden) image's size, and the still image stays as the fallback. */
.cta>canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.6;}
.cta.cta-live>img{visibility:hidden;}
/* The blue and purple colour flowing through the X: site.js places it exactly over the X in the artwork. It is only as big as the X, so it skips the edge fade. */
.cta>canvas.cta-glass{-webkit-mask-image:none;mask-image:none;opacity:1;pointer-events:none;}
/* Dims the middle behind the copy and melts the artwork into the page black in a soft ellipse: it is fully black
   well before every edge and corner of the card, so no box or outline shows where the artwork is cropped.
   The artwork is far wider than the card, so its own left and right fade falls outside the card and the wave is
   cut off square at the sides; the first layer fades those two edges out, so no vertical seam shows there. */
.cta::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,0) 13%,rgba(0,0,0,0) 87%,#000 100%),radial-gradient(closest-side ellipse at 50% 50%,rgba(0,0,0,.45) 0%,rgba(0,0,0,.2) 30%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.3) 74%,rgba(0,0,0,.7) 88%,#000 99%);}
.cta>*:not(img):not(canvas){position:relative;z-index:1;}
.cta h2{color:#fff;font-size:clamp(28px,3.6vw,44px);}
.cta .lede{color:#d2d2d7;font-size:clamp(16px,1.4vw,18px);max-width:480px;margin:14px auto 0;}
.cta .actions{margin-top:26px;justify-content:center;}

/* Scroll CTA (Approach): a wide ›ctrl‹ closes into the lockup, then the headline and buttons arrive.
   Without JS (or with reduced motion) it simply shows the finished lockup. site.js drives the scroll states. */
.xl-section{position:relative;}
.xl-stage{display:flex;align-items:center;justify-content:center;padding:clamp(88px,12vw,160px) var(--gutter);overflow:hidden;}
.js .xl-section{height:300vh;}
.js .xl-stage{position:sticky;top:0;height:100vh;height:100svh;padding-top:0;padding-bottom:0;}
.xl{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center;}
.xl-mark{width:min(196px,24vw);will-change:transform;}
.xl-mark svg{display:block;width:100%;height:auto;overflow:visible;fill:#fff;}
.xl-copy{margin-top:clamp(24px,3.3vw,42px);will-change:opacity,transform;}
.xl-copy .h2{color:#fff;font-size:clamp(17px,1.6vw,21px);font-weight:500;letter-spacing:-0.025em;}
.xl-copy .actions{margin-top:18px;justify-content:center;gap:12px;}
.xl-btn{min-height:36px;padding:0 18px;font-size:14px;}
.xl-btn svg{width:14px;height:14px;}
@media (prefers-reduced-motion:reduce){
  .js .xl-section{height:auto;}
  .js .xl-stage{position:static;height:auto;padding:clamp(88px,12vw,160px) var(--gutter);}
}

/* ---------- Footer ---------- */
.foot{background:var(--bg);color:var(--muted);font-size:13px;line-height:1.5;padding:56px 0 56px;}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;padding-bottom:12px;}
.foot-logo img{height:24px;width:auto;}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:44px 0 32px;}
.foot-cols h4{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 18px;letter-spacing:0;}
.foot-cols a,.foot-cols p{display:block;width:fit-content;color:var(--ink);text-decoration:none;margin:0 0 16px;}
.foot-cols a:hover{color:var(--muted);}
.foot-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding-top:20px;color:var(--faint);}
.foot-social{display:flex;align-items:center;gap:26px;}
.foot-social a{display:flex;color:var(--ink);transition:opacity .2s;}
.foot-social a:hover{opacity:.65;}
@media (max-width:700px){.foot-cols{grid-template-columns:repeat(2,1fr);}}

/* ---------- Reveal (quiet fade-up, JS adds .js to <html>) ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);}
.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none;}}

/* ---------- Document pages (FAQ + legal) ---------- */
.doc-hero{padding:calc(var(--nav-h) + clamp(56px,8vw,104px)) 0 clamp(24px,3vw,40px);}
.doc-hero h1{font-size:clamp(40px,6vw,72px);letter-spacing:-0.04em;line-height:1.02;}
.doc-hero .lede{margin-top:20px;max-width:640px;}
.doc-hero .lede a{color:var(--link);text-decoration:none;}
.doc-hero .lede a:hover{text-decoration:underline;}
.doc-hero--center{text-align:center;}
.doc-hero--center h1{font-size:clamp(32px,4.2vw,48px);letter-spacing:-0.035em;line-height:1.08;}
.doc-hero--center .lede{margin:14px auto 0;max-width:560px;font-size:clamp(16px,1.4vw,18px);}
.dates{margin-top:18px;font-size:14px;color:var(--muted);}
.doc{padding-bottom:clamp(80px,10vw,140px);}
.doc h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:-0.025em;margin:2.2em 0 .5em;padding-top:1.1em;border-top:1px solid var(--line-soft);}
.doc h3{font-size:18px;letter-spacing:-0.01em;margin:1.6em 0 .35em;}
.doc p,.doc li{font-size:17px;line-height:1.7;color:var(--ink-2);}
.doc p{margin:0 0 1em;}
.doc ul{padding-left:1.2em;margin:0 0 1em;}
.doc li{margin:.4em 0;}
.doc a{color:var(--link);text-decoration:none;}
.doc a:hover{text-decoration:underline;text-underline-offset:2px;}
.doc strong{color:var(--ink);}
.doc code{font-size:.9em;background:var(--card);padding:2px 6px;border-radius:6px;}
.card,.idcard{background:var(--card);border-radius:var(--radius-sm);padding:clamp(22px,3vw,32px);margin:8px 0 12px;}
.card p{margin:.6em 0;font-size:16px;} .card p:first-child{margin-top:0;} .card p:last-child{margin-bottom:0;}
.hl{background:rgba(255,223,0,.18);color:var(--ink);padding:0 .2em;border-radius:4px;font-weight:550;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.tblwrap{overflow-x:auto;margin:1.2em 0;}
.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:620px;}
.tbl th,.tbl td{text-align:left;padding:12px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink-2);}
.tbl th{font-size:13px;font-weight:600;color:var(--ink);}
.idrow{display:flex;flex-wrap:wrap;gap:6px 16px;padding:14px 0;border-bottom:1px solid var(--line);}
.idrow:first-child{padding-top:0;} .idrow:last-child{border-bottom:none;padding-bottom:0;}
.idrow .k{flex:none;width:190px;font-size:14px;font-weight:550;color:var(--muted);padding-top:2px;}
.idrow .v{flex:1;min-width:220px;font-size:17px;font-weight:500;color:var(--ink);}

/* FAQ accordion */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:clamp(18px,2vw,22px);font-weight:600;letter-spacing:-0.015em;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .ic{flex:none;color:var(--muted);transition:transform .25s ease;}
.faq details[open] summary .ic{transform:rotate(45deg);color:var(--ink);}
/* While an answer slides shut (site.js), the icon turns back straight away */
.faq details.is-closing summary .ic{transform:none;color:var(--muted);}
.faq .ans{padding:0 0 26px;max-width:680px;}
.faq .ans p{margin:0 0 12px;}
.faq .ans p:last-child{margin-bottom:0;}

/* Home "doors" to each landing page */
.door{text-decoration:none;color:inherit;transition:background-color .25s ease;}
.door:hover{background:#1d1d1f;}
.door .tx{display:flex;flex-direction:column;flex:1;}
.door .more{margin-top:auto;padding-top:18px;}
.door:hover .more{text-decoration:underline;text-underline-offset:3px;}
/* Home explore: bigger square-edged photos, text underneath */
.section-explore{padding-bottom:clamp(104px,12vw,176px);}
.section-explore+.section{padding-top:0;}
.tiles-explore{gap:clamp(16px,2vw,32px);max-width:1220px;margin-left:auto;margin-right:auto;}
.tiles-explore .tile,.tiles-explore .tile:hover{background:transparent;border-radius:0;}
.tiles-explore .ph{aspect-ratio:1/1;border-radius:0;border:1px solid var(--line);}
.tiles-explore .tx{padding:20px 0 0;}
.tiles-explore h3{font-size:clamp(19px,1.6vw,21px);}
.tiles-explore p{margin-top:8px;font-size:15px;line-height:1.5;}
.tiles-explore .tile:hover h3{text-decoration:underline;text-underline-offset:4px;}
@media (max-width:900px){.tiles-explore{max-width:500px;}}
/* Approach page intro: slightly smaller heading/lede, sits higher */
#approach.page-first{padding-top:calc(var(--nav-h) + clamp(72px,9vw,128px));position:relative;isolation:isolate;}
/* Short tinted fade from the top of the page, gone by the headline */
#approach.page-first::before{content:"";position:absolute;top:0;left:0;right:0;height:calc(var(--nav-h) + clamp(72px,9vw,128px));z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 140% at 25% 0%,rgba(255,255,255,.16),transparent 70%),
    radial-gradient(50% 140% at 75% 0%,rgba(200,200,205,.12),transparent 70%),
    linear-gradient(180deg,rgba(70,70,74,.50),transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 25%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 25%,transparent 100%);}
#approach .head .h2{font-size:clamp(32px,5.2vw,64px);}
/* Approach intro: X closed, opens once on load to reveal the headline between its brackets */
#approach .head{max-width:1120px;}
.ax{--bw:.58em;--o:.08em;position:relative;width:fit-content;max-width:100%;margin:0 auto;padding:0 calc(var(--bw) + .4em);font-size:clamp(32px,5.2vw,64px);}
#approach .head .ax-text{font-size:1em;margin:0;}
#approach .head+.tiles-list{margin-top:clamp(80px,10vw,140px);}
.ax-b{position:absolute;z-index:1;top:50%;width:var(--bw);height:auto;margin-top:calc(var(--bw) * -1.006);overflow:visible;transition:left 1s cubic-bezier(.65,0,.35,1) .15s,right 1s cubic-bezier(.65,0,.35,1) .15s;}
.ax-l{left:calc(50% - var(--bw) + var(--o));}
.ax-r{right:calc(50% - var(--bw) + var(--o));}
.ax-text>span{display:inline-block;white-space:nowrap;opacity:0;transform:translateY(14px);filter:blur(6px);transition:opacity .3s ease,transform .3s ease,filter .3s ease;}
/* Plays once when the heading comes into view (the .in class is added once and never removed) */
.head.in .ax-l{left:0;transition-delay:.8s;}
.head.in .ax-r{right:0;transition-delay:.8s;}
.head.in .ax-text>span{opacity:1;transform:none;filter:none;transition-duration:.6s;transition-delay:calc(1.5s + var(--i) * .08s);}
.ax-reset,.ax-reset *{transition:none !important;}
@media (prefers-reduced-motion:reduce){.ax *{transition:none !important;}.ax-l{left:0;}.ax-r{right:0;}.ax-text>span{opacity:1;transform:none;filter:none;}}
@media (max-width:600px){.ax{--bw:.5em;padding:0 calc(var(--bw) + .25em);}}
/* Approach cycle: after the intro, the X closes while the letters spin away like slot reels, then opens to reveal the next sentence */
/* duration and easing must match MOVE and EASE in site.js */
.head.in .ax.ax-cycle .ax-b{transition-delay:0s;transition-duration:3s;transition-timing-function:cubic-bezier(.4,0,.6,1);}
/* JS runs the whole intro itself: words show at once (the brackets uncover them), no fade */
.ax.ax-cycle .ax-text>span{opacity:1;transform:none;filter:none;transition:none;}
.head.in .ax.ax-closed .ax-l{left:calc(50% - var(--bw) + var(--o));}
.head.in .ax.ax-closed .ax-r{right:calc(50% - var(--bw) + var(--o));}
.ax-c{position:relative;display:inline-block;vertical-align:top;}
.ax-c.is-rolling .ax-g{visibility:hidden;}
.ax-win{position:absolute;top:-.35em;bottom:-.35em;left:-.06em;right:-.06em;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 .3em,#000 calc(100% - .3em),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 .3em,#000 calc(100% - .3em),transparent 100%);}
.ax-reel{position:absolute;top:.35em;left:0;right:0;text-align:center;will-change:transform;}
.ax-reel>i{display:block;height:1.6em;font-style:normal;white-space:pre;}
/* Who it's for: stacked list, small square photo left, text right */
#who .head .h2{font-size:clamp(26px,3vw,36px);letter-spacing:-0.03em;}
#who .head .lede{margin-top:12px;font-size:clamp(15px,1.3vw,17px);max-width:560px;}
/* Company numbers: smaller, centred heading */
#numbers .head .h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-0.03em;}
#numbers .head .lede{margin-top:14px;font-size:clamp(16px,1.5vw,20px);max-width:640px;}
#contact .head .lede{font-size:clamp(15px,1.3vw,17px);max-width:560px;}
/* Company contact details: smaller heading, much smaller description */
#reach .head .h2{font-size:clamp(30px,4vw,48px);letter-spacing:-0.03em;}
#reach .head .lede{margin-top:14px;font-size:clamp(16px,1.5vw,19px);line-height:1.5;max-width:600px;}
#numbers .head+.stats{margin-top:clamp(36px,4.6vw,62px);}
#numbers .stat{text-align:center;padding-top:clamp(24px,2.8vw,36px);padding-left:clamp(0px,1vw,14px);padding-right:clamp(0px,1vw,14px);}
#numbers .stat .n{font-size:clamp(46px,5.2vw,70px);}
#numbers .stat .l{margin-left:auto;margin-right:auto;margin-top:14px;font-size:clamp(15px,1.3vw,17px);max-width:270px;}
/* Company numbers: the row stays put and each stat rises in on its own, left to right */
.js #numbers .stats.reveal{opacity:1;transform:none;transition:none;}
.js #numbers .stat{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.js #numbers .stats.in .stat{opacity:1;transform:none;}
.js #numbers .stat:nth-child(2){transition-delay:.25s;}
.js #numbers .stat:nth-child(3){transition-delay:.5s;}
.js #numbers .stat:nth-child(4){transition-delay:.75s;}
@media (prefers-reduced-motion:reduce){.js #numbers .stat{opacity:1;transform:none;transition:none;}}
.tiles-list{grid-template-columns:1fr;gap:30px;max-width:820px;margin-left:auto;margin-right:auto;}
.tiles-list .tile{flex-direction:row;align-items:center;gap:clamp(20px,4vw,40px);background:transparent;border-radius:0;overflow:visible;}
.tiles-list .ph{flex:0 0 calc(clamp(112px,20vw,230px) + 60px);height:clamp(112px,20vw,230px);aspect-ratio:auto;margin-left:-60px;border-radius:6px;}
.tiles-list .tx{padding:0;}
.tiles-list h3{font-size:clamp(18px,1.8vw,22px);font-weight:500;letter-spacing:-0.01em;line-height:1.35;}
.tiles-list p{margin-top:12px;font-size:15px;line-height:1.5;color:var(--muted);}
@media (max-width:900px){.tiles-list{max-width:none;gap:20px;}.tiles-list .ph{flex-basis:calc(clamp(112px,20vw,230px) + 24px);margin-left:0;}.tiles-list p{font-size:14px;}}
.head+.reach{margin-top:clamp(40px,5vw,64px);}

/* ---------- Company hero: centered title over drifting word rows ---------- */
/* Exactly one screen tall: nav space on top, copy centered in the rest */
.company-hero{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;padding:calc(var(--nav-h) + 24px) 0 24px;display:flex;align-items:center;}
.company-hero>.wrap{position:relative;z-index:1;}
.company-hero-inner{max-width:680px;margin:0 auto;text-align:center;}
.company-hero-inner .h2{font-size:clamp(28px,3.6vw,44px);line-height:1.1;}
.company-hero-inner .body{margin-top:18px;}
.company-hero-inner .body+.body{margin-top:14px;}
.company-hero-inner .actions{justify-content:center;margin-top:30px;}
/* Rows that would not fully fit wrap into an off-screen column, so no row is ever cut */
.ch-bg{position:absolute;inset:var(--nav-h) 0 0;z-index:-1;overflow:hidden;display:flex;flex-flow:column wrap;align-content:flex-start;justify-content:space-evenly;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);}
/* Dim the words behind the copy so it stays readable */
.company-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(46% 52% at 50% 50%,var(--bg-alt) 35%,transparent 100%);}
.ch-row{width:100%;overflow:hidden;}
.ch-track{display:flex;width:max-content;animation:ch-left 60s linear infinite;}
.ch-row:nth-child(even) .ch-track{animation-name:ch-right;animation-duration:70s;}
.ch-row:nth-child(3n) .ch-track{animation-duration:80s;}
.ch-track span{flex:none;padding-right:1.1em;font-size:clamp(18px,2.2vw,30px);font-weight:400;letter-spacing:-0.01em;line-height:1.3;color:rgba(245,245,247,.11);white-space:nowrap;}
@keyframes ch-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes ch-right{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@media (prefers-reduced-motion:reduce){.ch-track{animation:none;}}

/* About title: one line; "ctrl" grows into "controlling" once the block reveals */
#about.page-first{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--nav-h) + 48px);padding-bottom:48px;}#about .head{max-width:1120px;}
#about .about-title{white-space:nowrap;font-size:clamp(14px,4.4vw,56px);isolation:isolate;}
/* Soft white glow behind "ctrl"/"controlling"; it follows the word's width as it grows and shrinks */
#about .ctrl-word{position:relative;}
#about .ctrl-word::before{content:"";position:absolute;inset:-45% -30%;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.32),rgba(255,255,255,.11) 55%,transparent 100%);filter:blur(16px);}
#about .lede{font-size:clamp(15px,1.3vw,18px);max-width:640px;}
#about .actions{margin-top:36px;}
/* padding + equal negative margin gives the glyphs room inside the clip (the "g" descender and its side overhang)
   without moving the line; border-box + scrollWidth in site.js keep the measured width in step with the padding */
.ctrl-in{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.1em .12em .35em;margin:-.1em -.12em -.35em;}
/* loops ctrl -> controlling -> ctrl: 4.6s cycle = 1.2s grow, 1.5s hold, 1.2s shrink, .7s hold */
.js .ctrl-in{max-width:0;opacity:0;}
.ctrl-in-1{--w-max:var(--w,1.3em);}
.ctrl-in-2{--w-max:var(--w,.7em);}
.ctrl-in-3{--w-max:var(--w,2em);}
.js .reveal.in .ctrl-in{animation:ctrl-grow 4.6s cubic-bezier(.65,0,.35,1) .5s infinite both;}
.js .reveal.in .ctrl-in-2{animation-delay:.58s;}
.js .reveal.in .ctrl-in-3{animation-delay:.66s;}
@keyframes ctrl-grow{
  0%,100%{max-width:0;opacity:0;}
  26.1%,58.7%{max-width:var(--w-max);opacity:1;}
  84.8%{max-width:0;opacity:0;}
}
@media (prefers-reduced-motion:reduce){.js .ctrl-in,.js .reveal.in .ctrl-in{max-width:none;opacity:1;animation:none;}}
@media (prefers-reduced-motion:reduce){.sheet-sub,.sheet-chev{transition:none;}}

/* ---------- Phone refinements ----------
   Tablet and phone only; the desktop layout above is untouched. */
@media (max-width:900px){
  /* Logo lines up with the page gutter, like the menu button on the right */
  .nav-logo{margin-left:0;}
  /* Menu sheet: one short list of sections, sub-links smaller and grey so the sheet stays easy to scan */
  .sheet-row{padding:18px 0;font-size:21px;}
  .sheet-sub a{padding:8px 0;font-size:15px;}
  .sheet-cta .btn{min-height:50px;font-size:16px;}
  .nav-sheet{overscroll-behavior:contain;padding-bottom:calc(48px + env(safe-area-inset-bottom));}
}
@media (max-width:700px){
  /* Scroll CTA (Approach, About): a bigger lockup and a shorter scroll, so there is less empty black to scroll through */
  .xl-mark{width:min(196px,46vw);}
  .js .xl-section{height:220vh;}
  .xl-copy .h2{font-size:19px;}
  .xl-btn{min-height:42px;padding:0 20px;font-size:15px;}
  /* CTA card: a smaller X behind the copy (the canvases copy the image's size, so they shrink with it) and artwork a little dimmer so the copy on top of it reads cleanly */
  .cta>img{height:min(100%,70cqw);}
  .cta>img,.cta>canvas{opacity:.4;}
  .cta>canvas.cta-glass{opacity:.7;}
  .cta .lede{text-shadow:0 1px 12px rgba(0,0,0,.8);}
  /* Footer: the link groups stack in one column, then the social icons and the copyright line sit centred at the bottom */
  .foot{padding:48px 0 calc(40px + env(safe-area-inset-bottom));}
  .foot-cols{grid-template-columns:minmax(0,1fr);gap:34px;padding:32px 0 8px;}
  .foot-cols h4{margin-bottom:6px;}
  .foot-cols a,.foot-cols p{padding:9px 0;margin:0;}
  .foot-logo{display:inline-block;padding:10px 0;margin:-10px 0;}
  .foot-base{flex-direction:column;align-items:center;text-align:center;gap:20px;padding-top:36px;}
  .foot-social{gap:10px;margin-left:0;justify-content:center;}
  .foot-social a{padding:12px;}
  /* Company title: "controlling" gets its own line, so the growing word never pushes text onto another line */
  #about .about-title{white-space:normal;font-size:clamp(30px,9vw,44px);line-height:1.12;}
  #about .ctrl-word{display:table;margin:0 auto;}
}
@media (max-width:600px){
  .section{padding:72px 0;}
  .section.tight{padding:56px 0;}
  .ribbon-after-hero+.section-explore{padding-top:96px;}
  .section-explore{padding-bottom:96px;}
  /* Hero: headline sits a little closer to the animation */
  .hero>.wrap{padding-top:64px;padding-bottom:96px;}
  /* Intro paragraph reads as supporting text on a phone, not a second headline */
  .hero .lede{margin-top:16px;font-size:15px;line-height:1.5;}
  .hero .actions{gap:14px 24px;}
  /* soshctrl ribbon: a slimmer card on a phone, so it reads as a band rather than a block */
  .ribbon-inner{gap:6px;padding:14px var(--gutter);}
  .ribbon-inner > img{height:27px;}
  .ribbon-title{font-size:21px;}
  .ribbon .btn{min-height:30px;padding:0 14px;font-size:13px;font-weight:500;margin-top:1px;}
  /* Home tiles: square photos on a phone, like the desktop grid */
  .tiles-explore .ph{aspect-ratio:1/1;}
  /* Approach list: small square photo at the top left, so the text gets the width it needs */
  .tiles-list{gap:36px;}
  .tiles-list .tile{align-items:flex-start;gap:18px;}
  .tiles-list .ph{flex:0 0 84px;height:84px;}
  .tiles-list h3{font-size:18px;}
  .tiles-list h3 br{display:none;}
  .tiles-list p{margin-top:8px;font-size:15px;}
  /* Contact: the heading keeps its distance from the fixed header (the .section padding above would otherwise eat the nav clearance) */
  #contact.page-first{padding-top:calc(var(--nav-h) + 72px);}
  /* Contact inboxes: tighter cards, with the icon closer to the text */
  .mail-list{gap:12px;}
  .mail-ic{width:36px;height:36px;margin-bottom:22px;}
  .mail-addr{padding-top:14px;font-size:16px;}
  /* Text links with arrows: a taller tap area without changing the look */
  .more{padding:8px 0;}
  /* Document pages: tables that fit stay in place; wider ones scroll sideways edge to edge, with a soft shadow showing there is more */
  .tbl:not(:has(th:nth-child(3))){min-width:0;}
  .tblwrap{margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1);padding:0 var(--gutter);-webkit-overflow-scrolling:touch;
    background:linear-gradient(90deg,var(--bg) 30%,transparent) left/40px 100% no-repeat local,linear-gradient(270deg,var(--bg) 30%,transparent) right/40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,rgba(255,255,255,.14),transparent) left/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(255,255,255,.14),transparent) right/14px 100% no-repeat scroll;}
  .tbl th,.tbl td{padding:12px 10px;}
  .doc-hero h1{font-size:clamp(34px,10vw,44px);}
  .idrow .k{width:100%;}
  .idrow .v{min-width:0;}
  /* FAQ: question text wraps nicely next to the plus icon */
  .faq summary{padding:20px 0;font-size:18px;line-height:1.3;}
}
/* Touch screens: hover-only effects stay off after a tap */
@media (hover:none){
  .notgrid li:hover{background:none;}
  .notgrid li:hover h3{color:var(--ink);}
  .notgrid li:hover p{color:var(--muted);}
  .notgrid li:hover .ic{stroke:var(--faint);opacity:.75;}
  .mail-list a:hover{background:var(--bg-alt);border-color:var(--line-soft);}
  .mail-list a:hover .mail-ic{stroke:var(--faint);opacity:.45;}
  .tiles-explore .tile:hover h3{text-decoration:none;}
}