/* FAIRSKY-REDESIGN-WIRED */
@layer base, redesign;
@import url("css/00-tokens.css?v=1788917005") layer(redesign);
@import url("css/01-bands.css?v=1788917005") layer(redesign);
@import url("css/02-type.css?v=1788917005") layer(redesign);
@import url("css/03-chrome.css?v=1788917005") layer(redesign);
@import url("css/04-surfaces.css?v=1788917005") layer(redesign);
@import url("css/05-motion.css?v=1788917005") layer(redesign);
@import url("css/06-assets.css?v=1788917005") layer(redesign);
/* Component-scoped layers. Each one owns exactly one surface, top to bottom,
   desktop AND mobile, so no two of them ever compete for the same declaration
   and no shared file has to be edited to add a surface. */
@import url("css/07-exhibits.css?v=1788917005") layer(redesign);
@import url("css/08-services.css?v=1788917005") layer(redesign);
@import url("css/09-innerpages.css?v=1788917005") layer(redesign);
@import url("css/10-servicepages.css?v=1788917005") layer(redesign);
@import url("css/11-shell.css?v=1788917005") layer(redesign);
@import url("css/12-home.css?v=1788917005") layer(redesign);
/* Curation layer. Imports last, owned by the orchestrator, and holds ONLY
   cross-stream corrections that no single surface owner could have made,
   because each one is a judgement about the whole page rather than about one
   component. Every rule here names the streams it reconciles. */
@import url("css/13-curate.css?v=1788917005") layer(redesign);
/* Direction A. One continuous dark room. Imports last, owns the homepage. */
@import url("css/14-dirA.css?v=1788917005") layer(redesign);
/* Direction A, ambient motion. In a dark room the light moves, not the furniture. */
@import url("css/15-motion-a.css?v=1788917005") layer(redesign);
/* Direction A, block 03. The three service objects, emitted by tools/service_objects.py. */
@import url("css/16-objects-a.css?v=1788917005") layer(redesign);
/* Curation of round three. Imports last; cross-stream corrections only. */
@import url("css/17-curate-a.css?v=1788917005") layer(redesign);
/* Aliveness layer. LAST import, so it wins on equal specificity. Owns every
   surface BETWEEN the objects: panel faces, wells, dividers, buttons.
   Nothing it touches is allowed to remain a flat fill. */
@import url("css/18-alive.css?v=1788917005") layer(redesign);
@import url("css/19-hero-material.css?v=1788917005") layer(redesign);
@import url("css/20-header.css?v=1788917005") layer(redesign);
@import url("css/21-ground.css?v=1788917005") layer(redesign);
@import url("css/22-ghost.css?v=1788917005") layer(redesign);
/* The divider band. Variant 03 of the study, the words carry the size. */
@import url("css/23-divider.css?v=1788917005") layer(redesign);
@import url("css/23-hero-mark.css?v=1788917005") layer(redesign);
@import url("css/30-dossier.css?v=1788917005") layer(redesign);
@import url("css/31-reveal-failsafe.css?v=1788917005") layer(redesign);
@import url("css/32-compose.css?v=1788917005") layer(redesign);
@import url("css/33-stack.css?v=1788917005") layer(redesign);
/* c1 · cinema layer, imports last so it can correct any surface owner */
@import url("css/40-cinema.css?v=1788917005") layer(redesign);
/* 36 · services row. Imported LAST so it wins over 40-cinema for #services. */
@import url("css/36-services-row.css?v=1788917005") layer(redesign);
/* The brand cards, Igor construction. Imports after 36 so it owns .brands. */
@import url("css/37-brand-cards.css?v=1788917005") layer(redesign);
@import url("css/38-bg.css?v=1788917005") layer(redesign);
/* UNLAYERED ON PURPOSE, see the header of the file. */
@import url("css/50-light.css?v=1788917005");
/* 51 · TYPE in the manner of capital.com. UNLAYERED ON PURPOSE, same device as 50. */
@import url("css/51-type.css?v=1788917005");
/* 52 · SERVICES takes L1's three grounds. UNLAYERED, must beat 50-light. */
/* 52-services-grounds.css REMOVED 2026-09-07: Mia rejected the light services
   ground, "нет светло плохо". The file stays on disk for reference. */

@layer base {

@font-face{font-family:Gilroy;src:url(fonts/Gilroy-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url(fonts/Gilroy-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url(fonts/Gilroy-ExtraBold.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  --brand:#7132F5; --brand-soft:#7F47F6; --brand-text:#9C70F8; --gold:#FFCE42;
  --n-950:#06020C; --n-900:#0A0416; --n-850:#100722; --n-800:#170A31; --n-700:#220F4A;
  --n-300:#9E98A8; --n-200:#D1CED6; --n-100:#F1F0F3; --white:#fff;
  --ink:#fff; --ink-dim:rgba(255,255,255,.64); --ink-faint:rgba(255,255,255,.42);
  --hair:rgba(255,255,255,.08); --hair-strong:rgba(255,255,255,.16);
  --font:"Gilroy",system-ui,-apple-system,"Segoe UI",sans-serif;
  --container:2100px; --pad:clamp(20px,3.2vw,72px); --hdr-h:clamp(62px,4.1vw,86px); --col-gap:clamp(16px,1.9vw,26px); --btn-px:clamp(26px,2.1vw,44px); --btn-r:clamp(10px,.58vw,13px); --btn-h-sm:clamp(42px,2.55vw,54px); --btn-h-lg:clamp(52px,3.2vw,66px);
  --grad-brand:linear-gradient(180deg,#7132F5,#7F47F6);
  --ease:cubic-bezier(.16,1,.3,1);
  --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  position:relative; margin:0; background:var(--n-950); color:var(--ink);
  font-family:var(--font); font-weight:400;
  font-size:clamp(16px,1.2vw,23px); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--container); margin:0 auto; padding-inline:var(--pad)}

h1,h2,h3,h4{font-weight:400; overflow-wrap:break-word; letter-spacing:-.018em; line-height:.98; margin:0; text-wrap:balance;
  -webkit-text-stroke:.011em currentColor}
h1{
  font-size:clamp(40px,5.85vw,113px); line-height:1.02;
  font-weight:700; letter-spacing:-.032em;
  -webkit-text-stroke:0            /* Bold already carries the weight — no synthesis on top */
}
.hero h1{max-width:12.6ch; text-wrap:pretty}
h2{font-size:clamp(29px,3.7vw,70px); letter-spacing:-.02em; font-weight:400; line-height:1.08}
h3{font-size:clamp(20px,1.6vw,31px); letter-spacing:-.012em; line-height:1.2; font-weight:400}
p{margin:0}

.eyebrow{
  font-size:clamp(12px,.8vw,15px); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin:0 0 var(--s4)
}
.lede{font-size:clamp(17px,1.4vw,27px); color:var(--ink-dim); max-width:52ch; line-height:1.5}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--btn-h-lg); padding:0 var(--btn-px); border:0; border-radius:var(--btn-r); cursor:pointer;
  font-weight:700; font-size:clamp(16px,1vw,21px); letter-spacing:-.005em;
  background:var(--grad-brand); color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px rgba(113,50,245,.34);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 2px 6px rgba(0,0,0,.5),0 20px 46px rgba(113,50,245,.46); filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn--light{
  background:#fff; color:var(--n-950);
  box-shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.5)
}
.btn--light:hover{background:#F1F0F3; filter:none; box-shadow:0 2px 6px rgba(0,0,0,.35),0 20px 44px rgba(0,0,0,.6)}
.btn--ghost{
  background:transparent; color:var(--ink); box-shadow:none;
  border:1px solid var(--hair-strong); min-height:var(--btn-h-sm); padding:0 var(--btn-px); font-size:15px
}
.btn--ghost:hover{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.28); box-shadow:none; filter:none}
.btn--sm{min-height:var(--btn-h-sm); padding:0 var(--btn-px); border-radius:var(--btn-r);
  font-size:clamp(14px,.88vw,18px); font-weight:400; letter-spacing:normal; border-radius:clamp(10px,.661vw,17px)}
.arrowlink{
  display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:16px;
  color:var(--brand-text); border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .18s var(--ease), border-color .18s var(--ease), gap .18s var(--ease)
}
.arrowlink:hover{color:#fff; border-color:var(--brand-soft); gap:14px}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:80;
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease)
}
.hdr[data-stuck="1"]{
  background:rgba(10,4,22,.72); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--hair); box-shadow:0 12px 40px rgba(0,0,0,.4)
}
body.menu-open .hdr{background:rgba(10,4,22,.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}
.hdr__in{display:flex; align-items:center; gap:0; min-height:var(--hdr-h)}
.brandmark{display:flex; align-items:center; gap:clamp(11px,.9vw,14px); flex-shrink:0}
.brandmark svg{width:clamp(28px,1.95vw,40px); height:clamp(28px,1.95vw,40px); flex-shrink:0}
.brandmark b{font-weight:700; font-size:clamp(17px,1.16vw,24px); letter-spacing:-.02em; white-space:nowrap}
.brandmark span{color:var(--ink-faint); font-weight:400}

.nav{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:0; margin-left:0}
.navlinks{display:flex; align-items:center; gap:clamp(0px,.34vw,8px); min-width:0; margin:0 auto}
.navactions{display:flex; align-items:center; gap:clamp(10px,1vw,18px); margin-left:0; flex-shrink:0}
.nav a,.nav button.navtop{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; background:none; border:0; cursor:pointer;
  padding:6px clamp(8px,.55vw,13px); border-radius:9px; font-size:clamp(17px,1.02vw,21px); font-weight:400;
  line-height:1.405; letter-spacing:0; color:#fff;
  transition:color .16s var(--ease), background .16s var(--ease)
}
.nav a:hover,.nav button.navtop:hover,.nav .has-menu:hover>button.navtop{color:#fff; background:rgba(255,255,255,.08)}
.nav a.portal{
  padding:0 var(--btn-px); min-height:var(--btn-h-sm); border-radius:var(--btn-r);
  font-size:clamp(11.5px,.68vw,14px); font-weight:400; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.82); border:1px solid var(--hair-strong);
  transition:color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease)
}
.nav a.portal:hover{color:#fff; border-color:var(--hair-strong); background:rgba(255,255,255,.05)}
.nav a.portal svg{width:10px; height:10px; opacity:.7; flex-shrink:0}
.nav a.portal:hover svg{opacity:1}
.nav a.cta{
  color:#fff; justify-content:center;
  font-size:clamp(14px,.88vw,18px); font-weight:400; letter-spacing:0;
  min-height:var(--btn-h-sm); padding:0 var(--btn-px); border-radius:var(--btn-r);
  /* same box in both states — the border is always there, only its colour changes */
  border:1px solid var(--hair-strong);
  background-color:transparent;
  background-image:var(--grad-brand);
  background-size:100% 0%; background-repeat:no-repeat; background-position:50% 100%;
  box-shadow:0 0 0 rgba(113,50,245,0);
  transition:background-size .5s var(--ease), border-color .5s var(--ease),
             box-shadow .5s var(--ease), transform .18s var(--ease)
}
.hdr[data-stuck="1"] .nav a.cta{
  background-size:100% 100%; border-color:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 26px rgba(113,50,245,.32)
}
.nav a.cta:hover{
  background-size:100% 100%; border-color:transparent; color:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.5),0 14px 32px rgba(113,50,245,.44)
}
@media(prefers-reduced-motion:reduce){.nav a.cta{transition:none}}
.chev{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .24s var(--ease); opacity:.75}
.has-menu{position:relative}
.has-menu::after{content:""; position:absolute; left:0; right:0; top:100%; height:10px}
.has-menu:hover .chev,.has-menu:focus-within .chev,.has-menu.open .chev{transform:rotate(225deg) translateY(1px); opacity:1}
.menu{
  position:absolute; top:calc(100% + 10px); left:50%; min-width:min(340px,86vw);
  margin-left:calc(min(340px,86vw) / -2);
  background:rgba(23,10,49,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--hair-strong); border-radius:16px; padding:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.5),0 30px 70px rgba(0,0,0,.75);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s
}
.has-menu:hover .menu,.has-menu:focus-within .menu,.has-menu.open .menu{opacity:1; visibility:visible; transform:none}
.has-menu.open>.navtop{color:#fff; background:rgba(255,255,255,.08)}
.menu a{display:block; padding:11px 14px; border-radius:9px; color:rgba(255,255,255,.78); font-size:15px}
.navlinks>a,.navlinks>.has-menu>.navtop{
  font-size:clamp(17px,1.02vw,21px); font-weight:400; letter-spacing:0;
  /* Gilroy has no Medium (500) — SOFTSWISS uses TT Turns Medium.
     A hairline stroke in the text's own colour synthesises the missing weight;
     0.2px was calibrated against their measured stroke density. */
  -webkit-text-stroke:.0098em currentColor
}
.menu a strong{display:block; color:#fff; font-weight:700; letter-spacing:-.01em}
.menu a em{display:block; font-style:normal; font-size:13px; color:var(--ink-faint); margin-top:2px}
.menu a:hover{background:rgba(255,255,255,.08)}
.menu a:hover strong{color:var(--brand-text)}

.cta-mobile{display:none}
.cta-short{display:none}
@media(max-width:440px){.cta-long{display:none}.cta-short{display:inline}}
.burger{display:none; margin-left:auto; margin-inline-start:auto; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--hair-strong); border-radius:10px; cursor:pointer}
.burger i{display:block; width:18px; height:2px; background:#fff; position:relative; transition:background .2s}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; transition:transform .24s var(--ease)}
.burger i::before{top:-6px} .burger i::after{top:6px}
body.menu-open .burger i{background:transparent}
body.menu-open .burger i::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .burger i::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:979px){
  .burger{display:flex; margin-left:clamp(10px,2vw,16px)}
  .cta-mobile{
    display:inline-flex; margin-left:auto; flex-shrink:0;
    min-height:clamp(40px,9.5vw,46px); padding:0 clamp(15px,4vw,26px);
    font-size:clamp(13px,3.6vw,16px)
  }
  .nav{
    position:fixed; inset:var(--hdr-h) 0 auto; margin:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--n-900); border-bottom:1px solid var(--hair); padding:var(--s5) var(--pad) var(--s7);
    transform:translateY(-8px); opacity:0; visibility:hidden; transition:.24s var(--ease);
    gap:0; margin:0
  }
  .navlinks{flex-direction:column; align-items:stretch; gap:0; margin:0}
  .navactions{flex-direction:column; align-items:stretch; gap:0; margin:0}
  body.menu-open .nav{transform:none; opacity:1; visibility:visible}
  .nav a,.nav button.navtop{padding:14px 0; font-size:17px; justify-content:space-between}
  .has-menu::after{display:none}
  .menu{position:static; margin-left:0; min-width:0; backdrop-filter:none; -webkit-backdrop-filter:none;
    opacity:1; visibility:visible; transform:none; box-shadow:none;
    background:transparent; border:0; border-left:1px solid var(--hair); border-radius:0;
    margin:0 0 var(--s4) 6px; padding:0 0 0 14px; min-width:0; display:none}
  .has-menu.open .menu{display:block}
    .nav a.portal{margin:var(--s6) 0 0; width:100%; min-height:52px; padding:0 var(--btn-px);
    justify-content:space-between; font-size:12px; border-color:var(--hair-strong)}
  .nav a.cta{margin:var(--s4) 0 0; width:100%; min-height:52px; padding:0 var(--btn-px); justify-content:center}
}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  padding:clamp(48px,7vw,88px) 0 clamp(76px,8.5vw,116px);
  min-height:calc(100vh - var(--hdr-h));
  min-height:calc(100svh - var(--hdr-h));
}
@media(max-height:620px){.hero{min-height:0}}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hair)
}
.topglow{
  position:absolute; top:0; left:0; right:0; z-index:0; pointer-events:none;
  height:min(1180px,112vh);
  background:radial-gradient(62% 52% at 50% 30%, rgba(113,50,245,.42), rgba(113,50,245,.10) 48%, transparent 74%)
}
main{position:relative; z-index:1}
.hero__in{position:relative; width:100%}
.hero__in>*{position:relative; z-index:1}
.hero .disciplines{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 0;
  margin:clamp(24px,2.4vw,40px) 0 0; font-size:clamp(17px,1.55vw,30px); font-weight:400; color:#fff;
  -webkit-text-stroke:.015em currentColor
}
.hero .disciplines span{display:inline-flex; align-items:center; line-height:1.15}
.hero .disciplines span:not(:last-child)::after{
  content:"\00B7"; margin:0 .62em; color:rgba(255,255,255,.34);
  -webkit-text-stroke:0; font-weight:400
}
.hero .audience{margin-top:clamp(18px,1.7vw,30px); color:var(--ink-dim); font-size:clamp(17px,1.45vw,28px); line-height:1.45; max-width:40ch}
.hero .cta-row{margin-top:clamp(30px,3.2vw,48px)}


.scrollcue{
  position:absolute; right:var(--pad); bottom:clamp(26px,3.1vw,58px); z-index:2; pointer-events:none;
  display:flex; align-items:center; gap:clamp(9px,.63vw,17px);
  font-size:clamp(14px,.88vw,18px); font-weight:400; letter-spacing:0; color:#fff;
  opacity:1; transition:opacity .45s var(--ease), transform .45s var(--ease)
}
.scrollcue[data-hide="1"]{opacity:0; transform:translateY(10px)}
.mouse{
  position:relative; display:block; flex-shrink:0;
  width:clamp(17px,.99vw,21px); height:clamp(27px,1.5625vw,33px);
  border:2px solid rgba(255,255,255,.9); border-radius:999px
}
.mouse b{
  position:absolute; left:50%; top:14%; width:3px; height:22%;
  margin-left:-1.5px; border-radius:2px; background:#fff;
  animation:wheel 1.9s cubic-bezier(.16,1,.3,1) infinite
}
@keyframes wheel{
  0%{transform:translateY(0); opacity:0}
  15%{opacity:1}
  60%{transform:translateY(150%); opacity:1}
  85%,100%{transform:translateY(190%); opacity:0}
}
@media(prefers-reduced-motion:reduce){.mouse b{animation:none; opacity:.85}}


/* ---------- hero eagle ---------- */
.hero__art{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  right:calc(var(--pad) * -1); top:47%; width:clamp(340px,46vw,966px);
  transform:translateY(-50%);
  animation:float 9s ease-in-out infinite
}
.hero__art::before{
  content:""; position:absolute; inset:-10%; border-radius:50%; z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(113,50,245,.42), transparent 70%);
  filter:blur(6px)
}
.hero__art img{width:100%; height:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
@keyframes float{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 18px))}}
@media(max-width:1079px){
  .hero{align-items:center}
  .hero__art{
    position:relative; right:auto; top:auto; transform:none;
    width:min(56vw,320px); margin:0 auto clamp(22px,5vw,40px); align-self:center;
    animation:bob 8s ease-in-out infinite
  }
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .hero__art::before{inset:-20%; background:radial-gradient(50% 50% at 50% 50%, rgba(113,50,245,.36), transparent 70%)}
}
@media(prefers-reduced-motion:reduce){.hero__art{animation:none}}

/* ---------- proof ---------- */
.proof{border-bottom:1px solid var(--hair); background:var(--n-900)}
.proof__in{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair)}
.proof__cell{background:var(--n-900); padding:clamp(36px,5vw,64px) clamp(20px,3vw,40px)}
.proof__cell{transition:background .4s var(--ease)}
.proof__cell:hover{background:var(--n-850)}
.proof__cell .num{
  font-size:clamp(46px,6.4vw,86px); font-weight:700; letter-spacing:-.03em; line-height:.9;
  color:var(--gold); font-variant-numeric:tabular-nums
}
.proof__cell .lbl{margin-top:14px; font-size:clamp(15px,1.25vw,25px); font-weight:400; color:var(--ink); letter-spacing:-.01em}
.proof__cell .sub{margin-top:8px; font-size:clamp(13.5px,.95vw,18px); color:var(--ink-faint)}
@media(max-width:760px){
  .proof__in{grid-template-columns:1fr}
  .proof__cell{padding:28px var(--pad); display:flex; align-items:baseline; gap:18px}
  .proof__cell .num{font-size:52px}
  .proof__cell .txt{padding-top:6px}
  .proof__cell .lbl{margin-top:0}
}

/* ---------- services ---------- */
.sec{padding:clamp(72px,9vw,128px) 0}
.sec__head{
  margin-bottom:clamp(36px,4.5vw,56px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--col-gap); align-items:start
}
.sec__head>.eyebrow{grid-column:1; grid-row:1}
.sec__head>h2{grid-column:1; grid-row:2}
.sec__head>.lede{grid-column:2; grid-row:2; margin-top:0; padding-top:.34em}
@media(max-width:860px){
  .sec__head{grid-template-columns:1fr; row-gap:clamp(16px,3vw,24px)}
  .sec__head>h2{grid-column:1; grid-row:2}
  .sec__head>.lede{grid-column:1; grid-row:3; padding-top:0}
}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--col-gap)}
@media(max-width:1080px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.cards{grid-template-columns:1fr}}

.card{
  position:relative; display:block; cursor:pointer; overflow:hidden;
  aspect-ratio:16/11; border-radius:clamp(16px,1.6vw,22px);
  background:var(--n-850); border:1px solid var(--hair);
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease)
}
.card:hover,.card:focus-within,.card.open{
  transform:translateY(-6px); border-color:rgba(127,71,246,.55);
  box-shadow:0 2px 6px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.6)
}
@media(max-width:760px){.card{aspect-ratio:4/3}}
@media(max-width:430px){.card{aspect-ratio:1/1}}

/* the visual */
.card__art{position:absolute; inset:0; overflow:hidden}
.card__art svg{
  width:100%; height:100%; display:block;
  transition:transform .7s var(--ease); transform-origin:60% 40%
}
.card:hover .card__art svg,.card:focus-within .card__art svg,.card.open .card__art svg{transform:scale(1.07)}
.card__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,2,12,.15) 0%, rgba(6,2,12,.45) 46%, rgba(6,2,12,.92) 88%);
  transition:background .45s var(--ease)
}
.card:hover .card__scrim,.card:focus-within .card__scrim,.card.open .card__scrim{
  background:linear-gradient(180deg, rgba(6,2,12,.35) 0%, rgba(6,2,12,.72) 40%, rgba(6,2,12,.96) 82%)
}

/* the text layer */
.card__body{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column
}
.card__t{
  margin:0; -webkit-text-stroke:.011em currentColor;
  font-size:clamp(25px,2.9vw,54px); font-weight:400; letter-spacing:-.02em; line-height:1.05
}
.card__reveal{
  display:grid; grid-template-rows:0fr; opacity:0; margin-top:0;
  transition:grid-template-rows .45s var(--ease), opacity .3s var(--ease), margin .45s var(--ease)
}
.card:hover .card__reveal,.card:focus-within .card__reveal,.card.open .card__reveal{
  grid-template-rows:1fr; opacity:1; margin-top:clamp(14px,1.6vw,20px)
}
.card__reveal>div{overflow:hidden; min-height:0}
.card__list{display:flex; flex-wrap:wrap; gap:7px}
.card__list em{
  font-style:normal; font-size:clamp(12.5px,.85vw,16px); font-weight:700; padding:6px 11px; border-radius:7px;
  background:rgba(255,255,255,.09); border:1px solid var(--hair); color:var(--ink)
}
.card__out{margin-top:16px; font-size:clamp(15px,1.15vw,22px); line-height:1.5; color:var(--ink-dim); max-width:46ch}
.card__go{
  margin-top:18px; display:inline-flex; align-items:center; gap:8px;
  font-size:clamp(14px,.95vw,18px); font-weight:700; color:var(--brand-text)
}
.card__hit{position:absolute; inset:0; z-index:3}

/* ---------- why ---------- */
.why{background:var(--n-900); border-block:1px solid var(--hair); position:relative; overflow:hidden}
.why::before{
  content:""; position:absolute; inset:-30% -10% auto; height:700px; pointer-events:none;
  background:radial-gradient(52% 50% at 50% 0%, rgba(113,50,245,.26), transparent 68%)
}
.why__in{position:relative}
.exhibits{display:grid; grid-template-columns:1fr 1fr; gap:var(--col-gap); margin-top:clamp(36px,4.5vw,56px)}
@media(max-width:860px){.exhibits{grid-template-columns:1fr}}
.exhibit{
  border-radius:16px; overflow:hidden; border:1px solid var(--hair); background:var(--n-850);
  box-shadow:0 2px 4px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.55);
  transition:transform .4s var(--ease), border-color .4s var(--ease)
}
.exhibit:hover{transform:translateY(-5px); border-color:rgba(127,71,246,.45)}
.plate{
  position:relative; aspect-ratio:2/1; display:grid; place-items:center; padding:12%;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(152deg,#3A1794 0%,#7132F5 46%,#5A22C9 100%);
  overflow:hidden
}
.plate[data-brand="ks"]{background:
    radial-gradient(120% 90% at 50% 118%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(152deg,#170A31 0%,#3A1794 52%,#220F4A 100%)}
.plate::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%)
}
.plate .lockup{position:relative; width:min(62%,300px); height:auto; filter:drop-shadow(0 6px 22px rgba(0,0,0,.45))}
.plate .pending{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 10px; border-radius:6px; color:#FFE29A;
  background:rgba(6,2,12,.55); border:1px dashed rgba(255,206,66,.5)
}
.risknote{
  margin-top:20px; font-size:14px; line-height:1.55; color:#FFE29A; max-width:78ch;
  padding:14px 16px; border-radius:11px;
  background:rgba(255,206,66,.07); border:1px dashed rgba(255,206,66,.32)
}
.risknote strong{color:var(--gold)}
.exhibit figcaption{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px; border-top:1px solid var(--hair); font-size:14px
}
.exhibit b{font-weight:700; font-size:clamp(16px,1.15vw,22px); letter-spacing:-.015em}
.exhibit span{color:var(--ink-faint); font-size:13px}
.why .claim{
  margin-top:clamp(32px,4vw,48px); display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--s5)
}
.why .claim p{font-size:clamp(19px,2vw,30px); font-weight:400; letter-spacing:-.018em}
.why .thirdbrand{margin-top:18px; font-size:14px; color:var(--ink-faint)}

/* ---------- markets ---------- */
.markets{padding:clamp(46px,5.4vw,88px) 0; border-block:1px solid var(--hair)}
.markets__in{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:clamp(14px,1.6vw,40px)}
.markets h2{
  font-size:clamp(20px,1.75vw,33px); font-weight:700; letter-spacing:-.015em;
  color:var(--ink); -webkit-text-stroke:0; max-width:none; line-height:1.2; flex:0 1 auto; min-width:0
}
.markets ul{
  display:flex; flex-wrap:wrap; gap:8px 0; margin:0; padding:0; list-style:none;
  font-size:clamp(15px,1.22vw,24px); font-weight:400; color:var(--ink-dim);
  letter-spacing:0; line-height:1.3
}
.markets li{display:inline-flex; align-items:center; line-height:1.3; color:var(--ink-dim)}
.markets li:not(:last-child)::after{content:"\00B7"; margin:0 .62em; color:rgba(255,255,255,.3)}

/* ---------- recognition ---------- */
.recog{
  position:relative; overflow:hidden;
  background:var(--n-900); border-bottom:1px solid var(--hair);
  padding:clamp(64px,7.5vw,116px) 0 clamp(56px,6.5vw,100px)
}
.recog::before{
  content:""; position:absolute; inset:auto -10% -55% 40%; height:70%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(113,50,245,.20), rgba(113,50,245,0) 70%);
  pointer-events:none
}
.recog>.wrap{position:relative}
.recog__lbl{
  font-size:clamp(12px,.78vw,15px); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:var(--ink-faint); margin:0;
  display:flex; align-items:center; gap:12px; -webkit-text-stroke:0
}
.recog__lbl::before{content:""; width:20px; height:2px; background:var(--gold); flex:0 0 auto; border-radius:2px}
.recog__block{margin-top:clamp(30px,3.2vw,54px)}
.recog__block:first-of-type{margin-top:0}
.recog__lblrow{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:10px clamp(20px,2.4vw,44px); margin-bottom:clamp(16px,1.4vw,24px)
}
.awards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.2vw,22px)}
.award{
  display:flex; align-items:center; gap:clamp(16px,1.5vw,28px);
  background:var(--n-850); border:1px solid var(--hair);
  border-radius:clamp(14px,1.3vw,20px); padding:clamp(14px,1.2vw,20px);
  transition:border-color .45s var(--ease), transform .45s var(--ease)
}
.award:hover{border-color:rgba(255,206,66,.4); transform:translateY(-3px)}
.award__badge{flex:0 0 auto; display:block; width:clamp(128px,11.4vw,208px); border-radius:clamp(10px,.8vw,14px); overflow:hidden; line-height:0}
.award__badge img{width:100%; height:auto; display:block}
.award__txt{min-width:0}
.award__name{
  margin:0; font-size:clamp(16px,1.28vw,25px); font-weight:700; letter-spacing:-.015em;
  color:var(--ink); line-height:1.22
}
.award__meta{
  margin:clamp(7px,.6vw,11px) 0 0; font-size:clamp(13px,1.02vw,20px); line-height:1.45;
  color:var(--ink-dim); display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px
}
.tag{
  display:inline-flex; align-items:center; padding:.28em .68em; border-radius:999px;
  font-size:.82em; font-weight:700; letter-spacing:.01em; white-space:nowrap;
  color:var(--ink-dim); background:rgba(255,255,255,.06); border:1px solid var(--hair-strong)
}
.tag--win{color:#231404; background:var(--gold); border-color:transparent}

.conflogos{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--hair); border-radius:clamp(14px,1.3vw,20px);
  background:rgba(255,255,255,.025); overflow:hidden
}
.conflogos li{
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(96px,7.6vw,148px); padding:clamp(16px,1.4vw,26px)
}
.conflogos li+li{border-left:1px solid var(--hair)}
.conflogos .cl{width:auto; display:block; opacity:.82; transition:opacity .4s var(--ease), transform .4s var(--ease)}
.conflogos li:hover .cl{opacity:1; transform:translateY(-2px)}
.cl--sigma{height:clamp(46px,3.7vw,72px)}
.cl--ice{height:clamp(27px,2.1vw,41px)}
.cl--igb{height:clamp(29px,2.3vw,45px)}
.cl--sbc{height:clamp(24px,1.9vw,37px)}
.conf__note{
  margin:0; font-size:clamp(13px,1.02vw,20px); line-height:1.5;
  color:var(--ink-dim); max-width:56ch; text-align:right
}

.photostrip{margin:clamp(30px,3.4vw,60px) 0 0}
.photostrip ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1vw,18px)
}
.photostrip li{
  border-radius:clamp(12px,1.1vw,18px); overflow:hidden; line-height:0;
  border:1px solid var(--hair); background:var(--n-850)
}
.photostrip img{
  width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/3;
  transition:transform .7s var(--ease); transform-origin:50% 45%
}
.photostrip li:hover img{transform:scale(1.045)}
.recog__more{margin-top:clamp(22px,2.2vw,38px)}
.photostrip figcaption{
  margin-top:clamp(12px,1vw,18px); font-size:clamp(12px,.9vw,17px);
  color:var(--ink-faint); letter-spacing:.01em
}
@media(max-width:980px){
  .awards{grid-template-columns:1fr}
  .conf__note{max-width:none; text-align:left}
}
@media(max-width:640px){
  .conflogos{grid-template-columns:repeat(2,1fr)}
  .conflogos li:nth-child(3),.conflogos li:nth-child(4){border-top:1px solid var(--hair)}
  .conflogos li:nth-child(3){border-left:0}
}
@media(max-width:640px){
  .award{gap:14px; padding:12px}
  .award__badge{width:104px}
  .photostrip ul{grid-template-columns:repeat(2,1fr)}
  .photostrip img{aspect-ratio:3/4}
}
@media(max-width:400px){
  .award{flex-direction:column; align-items:flex-start}
  .award__badge{width:150px}
}

/* ---------- contact ---------- */
.contact{
  padding:clamp(48px,4.6vw,80px) 0 clamp(44px,4vw,72px);
  min-height:100svh; display:flex; align-items:center
}
.contact>.wrap{max-width:1280px}
.contact .sec__head{margin-bottom:clamp(24px,2.6vw,38px)}
.contact .lede{max-width:58ch}
.contact__grid{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  gap:var(--col-gap)
}
@media(max-width:940px){.contact__grid{grid-template-columns:1fr}}

.panel{
  display:flex; flex-direction:column;
  background:var(--n-850); border:1px solid var(--hair);
  border-radius:clamp(16px,1.6vw,22px); padding:clamp(22px,2vw,34px)
}

.form{gap:clamp(12px,1vw,17px)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1vw,17px)}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.field--grow{display:flex; flex-direction:column; flex:1}
.field label{display:block; font-size:clamp(12.5px,.8vw,15px); font-weight:700; color:var(--ink-faint); margin-bottom:7px; letter-spacing:.02em}
.field input,.field textarea{
  width:100%; background:var(--n-900); border:1px solid var(--hair); border-radius:11px;
  padding:clamp(13px,.92vw,17px) 17px; font-size:clamp(15px,.95vw,18px);
  transition:border-color .18s var(--ease), background .18s var(--ease)
}
.field--grow textarea{flex:1}
.field textarea{min-height:clamp(96px,6vw,116px); resize:vertical; line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.28)}
.field input:focus,.field textarea:focus{outline:0; border-color:var(--brand-soft); background:var(--n-850)}
.form .submit{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px 20px; margin-top:auto; padding-top:clamp(6px,.8vw,12px)
}
.form .submit small{color:var(--ink-faint); font-size:clamp(13.5px,.9vw,17px)}
.form .submit small a{color:var(--brand-text); font-weight:700}

.person__top{display:flex; align-items:center; gap:18px}
.avatar{
  width:clamp(56px,3.6vw,70px); height:clamp(56px,3.6vw,70px); border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background:var(--grad-brand);
  font-weight:700; font-size:clamp(21px,1.6vw,30px); letter-spacing:-.02em;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset
}
.person__top b{display:block; font-weight:700; font-size:clamp(19px,1.3vw,25px); letter-spacing:-.02em}
.person__top span{display:block; color:var(--ink-faint); font-size:clamp(14px,.95vw,18px); margin-top:4px}
.person>p,.founder__card>p{margin-top:clamp(16px,1.4vw,22px); color:var(--ink-dim); font-size:clamp(15px,1.05vw,20px); line-height:1.5}

/* standalone component — used in the contact panel and on the company page,
   so it must not depend on any parent class */
.links{
  display:flex; flex-direction:column; gap:0; margin-top:auto;
  padding-top:clamp(14px,1.2vw,20px)
}
.links a{
  display:flex; align-items:center; gap:13px; padding:clamp(9px,.65vw,12px) 0;
  font-size:clamp(15px,1.05vw,20px); font-weight:400; color:var(--ink);
  border-top:1px solid var(--hair); transition:color .18s var(--ease)
}
.links a:hover{color:var(--brand-text)}
.links svg{
  width:clamp(17px,1.1vw,21px); height:clamp(17px,1.1vw,21px);
  flex-shrink:0; flex-grow:0; opacity:.55
}
.todo{
  margin-top:clamp(14px,1.1vw,18px); padding:11px 13px; border-radius:10px;
  font-size:clamp(12.5px,.82vw,15px); line-height:1.45;
  background:rgba(255,206,66,.09); border:1px dashed rgba(255,206,66,.4); color:#FFE29A
}

/* ---------- footer ---------- */
.foot{background:var(--n-900); border-top:1px solid var(--hair); padding:clamp(48px,6vw,72px) 0 40px}
.foot__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s7) var(--s6)}
@media(max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot__grid{grid-template-columns:1fr}}
.foot h4{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.foot ul a{font-size:clamp(15px,1vw,19px); font-weight:400; color:var(--ink-dim)}
.foot ul a:hover{color:#fff}
.foot .blurb{color:var(--ink-faint); font-size:14px; line-height:1.55; margin-top:16px; max-width:36ch}
.foot__bottom{
  display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6); justify-content:space-between; align-items:center;
  margin-top:clamp(40px,5vw,64px); padding-top:26px; border-top:1px solid var(--hair);
  font-size:13px; color:var(--ink-faint)
}
.rg{display:inline-flex; align-items:center; gap:9px}
.rg b{
  display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  border:1.5px solid var(--ink-faint); font-size:11px; font-weight:800
}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.07s} .rv-d2{transition-delay:.14s} .rv-d3{transition-delay:.21s} .rv-d4{transition-delay:.28s}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ================= subpages ================= */
.skiplink{position:absolute; left:-9999px; top:0}
.skiplink:focus{left:12px; top:12px; z-index:200}

/* --- subpage hero: full screen, same rhythm as the homepage --- */
.phero{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
  padding:clamp(44px,6vw,84px) 0 clamp(64px,7.5vw,104px);
  min-height:calc(100vh - var(--hdr-h));
  min-height:calc(100svh - var(--hdr-h));
  border-bottom:1px solid var(--hair)
}
@media(max-height:620px){.phero{min-height:0}}
.phero__in{position:relative; z-index:1; width:100%}
.phero__grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(28px,3.6vw,88px); align-items:center
}
.phero .eyebrow{margin-bottom:clamp(12px,1.2vw,20px)}
.phero h1{font-size:clamp(38px,5vw,96px); max-width:15ch; line-height:1.02}
.phero__lede{
  margin-top:clamp(18px,1.8vw,32px); color:var(--ink-dim);
  font-size:clamp(17px,1.4vw,27px); line-height:1.5; max-width:46ch
}

/* the visual is the same mark the visitor clicked on the homepage */
.phero__art{
  position:relative; border-radius:clamp(16px,1.6vw,24px); overflow:hidden;
  border:1px solid var(--hair); background:var(--n-850);
  box-shadow:0 2px 6px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.55);
  animation:pheroFloat 11s ease-in-out infinite
}
@keyframes pheroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* the mark breathes very slowly, so the screen is never quite static */
.phero__art svg{animation:pheroBreathe 18s ease-in-out infinite; transform-origin:58% 46%}
@keyframes pheroBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* the single gold element in each mark carries the pulse */
.phero__art .accent{animation:pheroAccent 3.6s ease-in-out infinite}
@keyframes pheroAccent{0%,100%{opacity:.55}50%{opacity:1}}

/* a slow sheen crossing the panel */
.phero__art::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.07) 48%, transparent 58%);
  transform:translateX(-120%);
  animation:pheroSheen 7.5s ease-in-out infinite
}
@keyframes pheroSheen{0%,62%{transform:translateX(-120%)}92%,100%{transform:translateX(120%)}}

@media(prefers-reduced-motion:reduce){
  .phero__art,.phero__art svg,.phero__art .accent,.phero__art::after{animation:none}
  .phero__art::after{opacity:0}
}
.phero__art svg{display:block; width:100%; height:auto; aspect-ratio:16/11}
.phero__art--mark{border:0; background:none; box-shadow:none; overflow:visible; animation:pheroFloat 9s ease-in-out infinite}
.phero__art--mark::after{display:none}
.phero__art--mark img{width:100%; height:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.phero__art--mark::before{
  content:""; position:absolute; inset:-10%; border-radius:50%; z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(113,50,245,.4), transparent 70%);
  filter:blur(6px)
}

@media(max-width:1079px){
  .phero{align-items:center; min-height:calc(100svh - var(--hdr-h))}
  .phero__grid{grid-template-columns:1fr; gap:clamp(22px,5vw,40px)}
  .phero__art{order:-1; max-width:min(78vw,460px)}
  .phero__art--mark{max-width:min(56vw,320px); margin-inline:auto}
  .phero h1{max-width:none}
}

/* --- what is included --- */
.inc{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--col-gap)}
@media(max-width:860px){.inc{grid-template-columns:1fr}}
.inc__item{
  background:var(--n-850); border:1px solid var(--hair);
  border-radius:clamp(16px,1.6vw,22px); padding:clamp(22px,2.2vw,38px);
  transition:border-color .35s var(--ease), transform .35s var(--ease)
}
.inc__item:hover{border-color:rgba(127,71,246,.4); transform:translateY(-3px)}
.inc__item h3{margin-bottom:12px}
.inc__item p{color:var(--ink-dim); font-size:clamp(15px,1.05vw,20px); line-height:1.5}

/* --- point of difference --- */
.diff{background:var(--n-900); border-block:1px solid var(--hair); position:relative; overflow:hidden}
.diff::before{
  content:""; position:absolute; inset:-40% -10% auto; height:640px; pointer-events:none;
  background:radial-gradient(52% 50% at 50% 0%, rgba(113,50,245,.24), transparent 68%)
}
.diff__in{position:relative}
.diff__list{
  list-style:none; margin:0; padding:0; display:grid; gap:0;
  border-top:1px solid var(--hair)
}
.diff__list li{
  padding:clamp(18px,1.7vw,28px) 0 clamp(18px,1.7vw,28px) clamp(28px,2.4vw,44px);
  border-bottom:1px solid var(--hair); position:relative;
  font-size:clamp(16px,1.2vw,23px); color:var(--ink); line-height:1.45
}
.diff__list li::before{
  content:""; position:absolute; left:0; top:calc(clamp(18px,1.7vw,28px) + .55em);
  width:clamp(12px,.9vw,16px); height:2px; background:var(--gold)
}

/* --- adjacent services --- */
.adj__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--col-gap)}
@media(max-width:900px){.adj__grid{grid-template-columns:1fr}}
.adj__card{
  display:block; background:var(--n-850); border:1px solid var(--hair);
  border-radius:clamp(16px,1.6vw,22px); padding:clamp(22px,2.2vw,38px);
  transition:border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease)
}
.adj__card:hover{border-color:rgba(127,71,246,.55); transform:translateY(-4px); background:var(--n-800)}
.adj__card h3{margin-bottom:10px}
.adj__card p{color:var(--ink-dim); font-size:clamp(14px,1vw,19px)}
.adj__card .card__go{margin-top:18px}

/* --- brands page --- */
.brandlist{display:grid; gap:var(--col-gap)}
.brandrow{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(20px,2.4vw,44px);
  align-items:center; background:var(--n-850); border:1px solid var(--hair);
  border-radius:clamp(16px,1.6vw,22px); overflow:hidden
}
@media(max-width:860px){.brandrow{grid-template-columns:1fr}}
.brandrow__plate{
  position:relative; aspect-ratio:16/10; display:grid; place-items:center; padding:10%;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(152deg,#3A1794 0%,#7132F5 46%,#5A22C9 100%)
}
.brandrow__plate[data-brand="ks"]{background:
  radial-gradient(120% 90% at 50% 118%, rgba(255,255,255,.12), transparent 60%),
  linear-gradient(152deg,#170A31 0%,#3A1794 52%,#220F4A 100%)}
.brandrow__plate[data-brand="caf"]{background:
  radial-gradient(120% 90% at 50% 118%, rgba(255,255,255,.10), transparent 60%),
  linear-gradient(152deg,#220F4A 0%,#5A22C9 55%,#170A31 100%)}
.brandrow__plate::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%)
}
.brandrow__plate .lockup{position:relative; width:min(62%,300px); height:auto; filter:drop-shadow(0 6px 22px rgba(0,0,0,.45))}
.lockup--type{
  position:relative; width:auto; color:#fff; font-weight:700;
  font-size:clamp(22px,2.1vw,38px); letter-spacing:-.02em; text-align:center;
  text-shadow:0 6px 22px rgba(0,0,0,.45)
}
.brandrow__plate .pending{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 10px; border-radius:6px; color:#FFE29A;
  background:rgba(6,2,12,.55); border:1px dashed rgba(255,206,66,.5)
}
.brandrow__body{padding:clamp(22px,2.2vw,44px)}
@media(max-width:860px){.brandrow__body{padding:clamp(20px,4vw,28px)}}
.brandrow__meta{
  margin:10px 0 16px; font-size:clamp(12px,.8vw,15px); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold)
}
.brandrow__body>p:last-child{color:var(--ink-dim); font-size:clamp(15px,1.05vw,20px); line-height:1.5}

/* --- company page --- */
.founder__grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--col-gap); align-items:stretch}
@media(max-width:940px){.founder__grid{grid-template-columns:1fr}}
.founder__card,.reg{display:flex; flex-direction:column}
.reg h3{margin-bottom:10px}
.reg__lede{color:var(--ink-dim); font-size:clamp(14px,1vw,19px); margin-bottom:clamp(18px,1.6vw,26px)}
.reg dl{margin:0; display:grid; gap:0; border-top:1px solid var(--hair)}
.reg dl>div{
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; align-items:baseline;
  padding:clamp(12px,1vw,17px) 0; border-bottom:1px solid var(--hair)
}
.reg dt{color:var(--ink-faint); font-size:clamp(14px,.95vw,18px)}
.reg dd{margin:0; font-size:clamp(15px,1vw,19px); color:var(--ink)}
.reg dd a{color:var(--brand-text); font-weight:700}
.pendingval{color:#FFE29A; font-style:italic}
.reg .todo{margin-top:auto}

/* --- current page marker --- */
.navlinks>a[aria-current="page"],.has-menu.is-active>.navtop{color:#fff}
.navlinks>a[aria-current="page"]{position:relative}
.navlinks>a[aria-current="page"]::after{
  content:""; position:absolute; left:clamp(8px,.55vw,13px); right:clamp(8px,.55vw,13px);
  bottom:2px; height:1.5px; background:var(--gold); border-radius:2px
}
.menu a[aria-current="page"]{background:rgba(255,255,255,.07)}
.menu a[aria-current="page"] strong{color:var(--gold)}

/* --- honest "nothing here yet" panel --- */
.notice{max-width:74ch}
.notice>p{color:var(--ink-dim); font-size:clamp(15px,1.15vw,21px); line-height:1.55}
.notice .links{margin-top:clamp(18px,1.6vw,26px)}

/* ---------- newsroom: tabs, posts, events ---------- */
.tabs{
  position:relative; display:inline-flex; gap:4px; padding:4px;
  border:1px solid var(--hair); border-radius:999px; background:rgba(255,255,255,.03);
  margin-bottom:clamp(26px,2.8vw,46px)
}
.tab{
  position:relative; z-index:1; appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:clamp(14px,1.05vw,20px); font-weight:700; letter-spacing:-.005em;
  color:var(--ink-dim); padding:clamp(9px,.7vw,14px) clamp(20px,1.6vw,32px); border-radius:999px;
  display:inline-flex; align-items:center; gap:9px; transition:color .35s var(--ease)
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:#fff}
.tab__n{
  font-size:.72em; font-weight:700; line-height:1; padding:.32em .55em; border-radius:999px;
  background:rgba(255,255,255,.10); color:var(--ink-dim); transition:background .35s var(--ease), color .35s var(--ease)
}
.tab[aria-selected="true"] .tab__n{background:rgba(0,0,0,.28); color:rgba(255,255,255,.9)}
.tabs__ink{
  position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:0;
  border-radius:999px; background:var(--grad-brand);
  box-shadow:0 2px 6px rgba(0,0,0,.4), 0 14px 34px rgba(113,50,245,.36);
  transition:transform .55s var(--ease), width .55s var(--ease)
}
.tabpanel[hidden]{display:none}

.posts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--col-gap)}
.post{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--n-850); border:1px solid var(--hair); border-radius:clamp(16px,1.6vw,22px);
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease)
}
.post:hover{transform:translateY(-5px); border-color:rgba(127,71,246,.5); box-shadow:0 2px 6px rgba(0,0,0,.5),0 26px 60px rgba(0,0,0,.55)}
.post__media{aspect-ratio:16/9; overflow:hidden; background:var(--n-800); line-height:0}
.post__media img{width:100%; height:100%; object-fit:cover; display:block}
.post__media--badge{display:flex; align-items:center; justify-content:center; padding:clamp(16px,1.5vw,26px); background:var(--n-800)}
.post__media--badge img{width:auto; height:100%; max-width:100%; object-fit:contain; border-radius:clamp(8px,.6vw,11px)}
.post__body{padding:clamp(18px,1.6vw,28px); display:flex; flex-direction:column; gap:clamp(9px,.8vw,14px)}
.post__meta{
  margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:clamp(12px,.9vw,17px); color:var(--ink-faint)
}
.post__body h3{
  margin:0; font-size:clamp(17px,1.36vw,27px); font-weight:700; letter-spacing:-.018em;
  line-height:1.22; color:var(--ink); -webkit-text-stroke:0
}
.post__body>p:last-child{margin:0; font-size:clamp(14px,1.06vw,20px); line-height:1.55; color:var(--ink-dim)}

.events{list-style:none; margin:0; padding:0; border:1px solid var(--hair); border-radius:clamp(16px,1.6vw,22px); overflow:hidden; background:rgba(255,255,255,.02)}
.event{
  display:grid; grid-template-columns:clamp(96px,9vw,168px) minmax(0,1fr) auto auto;
  align-items:center; gap:clamp(16px,1.8vw,36px);
  padding:clamp(18px,1.7vw,30px) clamp(18px,1.7vw,32px);
  transition:background .4s var(--ease)
}
.event+.event{border-top:1px solid var(--hair)}
.event:hover{background:rgba(255,255,255,.03)}
.event__logo{display:flex; align-items:center; justify-content:flex-start}
.event__txt h3{margin:0; font-size:clamp(17px,1.36vw,27px); font-weight:700; letter-spacing:-.018em; line-height:1.22; color:var(--ink); -webkit-text-stroke:0}
.event__txt p{margin:6px 0 0; font-size:clamp(13px,1vw,19px); color:var(--ink-dim); line-height:1.4}
.event__date{margin:0; text-align:right; white-space:nowrap}
.event__date b{display:block; font-size:clamp(15px,1.15vw,22px); font-weight:700; color:var(--ink); letter-spacing:-.01em}
.event__date span{display:block; margin-top:3px; font-size:clamp(12px,.9vw,17px); color:var(--ink-faint)}
.event__act{display:flex; flex-direction:column; align-items:flex-end; gap:9px}
.event__site{font-size:clamp(12px,.9vw,17px); color:var(--ink-faint); text-decoration:none; transition:color .3s var(--ease)}
.event__site:hover{color:var(--brand-text)}
.event__note{margin:clamp(18px,1.6vw,28px) 0 0; font-size:clamp(14px,1.06vw,20px); line-height:1.55; color:var(--ink-dim); max-width:78ch}

@media(max-width:1100px){
  .posts{grid-template-columns:repeat(2,1fr)}
  .event{grid-template-columns:clamp(84px,10vw,130px) minmax(0,1fr) auto; row-gap:14px}
  .event__act{grid-column:2/4; flex-direction:row; align-items:center; justify-content:flex-start; gap:18px}
}
@media(max-width:700px){
  .posts{grid-template-columns:1fr}
  .event{grid-template-columns:1fr auto; gap:12px 16px}
  .event__logo{grid-column:1/3; justify-content:flex-start}
  .event__date{text-align:left}
  .event__act{grid-column:1/3}
}

/* ---------- careers: role accordions ---------- */
.roles{display:flex; flex-direction:column; gap:clamp(10px,.9vw,16px)}
.role{
  background:var(--n-850); border:1px solid var(--hair); border-radius:clamp(14px,1.3vw,20px);
  overflow:hidden; transition:border-color .4s var(--ease)
}
.role[open],.role:hover{border-color:rgba(127,71,246,.42)}
.role>summary{
  list-style:none; cursor:pointer; display:grid;
  grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:clamp(14px,1.6vw,32px);
  padding:clamp(18px,1.6vw,30px) clamp(18px,1.7vw,32px)
}
.role>summary::-webkit-details-marker{display:none}
.role__name{font-size:clamp(17px,1.42vw,28px); font-weight:700; letter-spacing:-.018em; color:var(--ink); line-height:1.2}
.role__meta{font-size:clamp(12px,.95vw,18px); color:var(--ink-faint); white-space:nowrap}
.role__chev{
  width:clamp(26px,2vw,34px); height:clamp(26px,2vw,34px); border-radius:50%;
  border:1px solid var(--hair-strong); position:relative; flex:0 0 auto;
  transition:transform .45s var(--ease), border-color .45s var(--ease)
}
.role__chev::before,.role__chev::after{
  content:""; position:absolute; inset:50% auto auto 50%; background:var(--ink);
  transform:translate(-50%,-50%); transition:opacity .35s var(--ease)
}
.role__chev::before{width:11px; height:1.6px}
.role__chev::after{width:1.6px; height:11px}
.role[open] .role__chev{transform:rotate(180deg); border-color:var(--brand-soft)}
.role[open] .role__chev::after{opacity:0}
.role__body{padding:0 clamp(18px,1.7vw,32px) clamp(20px,1.9vw,34px); border-top:1px solid var(--hair); margin-top:-1px; padding-top:clamp(18px,1.6vw,28px)}
.role__lede{margin:0 0 clamp(16px,1.5vw,26px); font-size:clamp(15px,1.15vw,22px); line-height:1.55; color:var(--ink-dim); max-width:88ch}
.role__cols{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.2vw,48px)}
.role__cols h4{
  margin:0 0 clamp(10px,.9vw,16px); font-size:clamp(12px,.78vw,15px); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ink-faint); -webkit-text-stroke:0
}
.role__cols ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:clamp(8px,.7vw,13px)}
.role__cols li{
  position:relative; padding-left:20px; font-size:clamp(14px,1.06vw,20px);
  line-height:1.5; color:var(--ink-dim)
}
.role__cols li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:2px; border-radius:2px; background:var(--gold)}
.role__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px clamp(16px,1.5vw,26px);
  margin-top:clamp(20px,1.9vw,34px); padding-top:clamp(18px,1.6vw,26px); border-top:1px solid var(--hair)
}
.role__hint{font-size:clamp(13px,1vw,19px); color:var(--ink-faint)}
@media(max-width:760px){
  .role>summary{grid-template-columns:minmax(0,1fr) auto; row-gap:6px}
  .role__meta{grid-column:1; grid-row:2; white-space:normal}
  .role__chev{grid-column:2; grid-row:1/3}
  .role__cols{grid-template-columns:1fr}
}

}