@import "./typography.css";
/* ============================================================
   BRISA — Dala design system implementation
   Canvas: pure black void. Hierarchy from scale, not weight.
   ============================================================ */
:root{
  --black:#000000;
  --text:#ffffff;
  --text-2:#9a9a9a;
  --text-3:#bdbdbd;
  --iris:#8052ff;
  --iris-hi:#9470ff;
  --amber:#ffb829;
  --verdant:#15846e;

  --gap-sm:48px;
  --gap-lg:84px;
  --pad-sm:24px;
  --pad-lg:38px;
  --el-gap-sm:6px;
  --el-gap-lg:18px;

  --radius:24px;
  --maxw:1280px;

  --font:'Aptos','Montserrat',Arial,sans-serif;
  --font-heading:'Montserrat','Aptos',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:var(--font);
  font-weight:200;
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
canvas{display:block}

/* ---------- typography ---------- */
h1,h2,h3,h4,.display,.h1,.h2,.h3{ font-family:var(--font-heading) }
h1,h2,h3,h4{ font-weight:400; margin:0; letter-spacing:-0.04em; line-height:1.02 }

.display{
  font-size:clamp(2.6rem,6.1vw,6.5rem);
  font-weight:400;
  letter-spacing:-0.04em;
  line-height:0.97;
  margin:0;
}
.h1{
  font-size:clamp(2.3rem,5.2vw,4.875rem);
  font-weight:400;
  letter-spacing:-0.04em;
  line-height:1.0;
  margin:0;
}
.h2{
  font-size:clamp(1.85rem,3.8vw,3.25rem);
  font-weight:400;
  letter-spacing:-0.035em;
  line-height:1.06;
  margin:0;
}
.h3{
  font-size:clamp(1.35rem,2.3vw,2rem);
  font-weight:400;
  letter-spacing:-0.03em;
  line-height:1.15;
  margin:0;
}
.numeral{
  font-size:clamp(4.5rem,15vw,14rem);
  font-weight:400;
  letter-spacing:-0.05em;
  line-height:0.86;
  margin:0;
  display:block;
}

.lead{
  font-size:clamp(1.125rem,1.45vw,1.375rem);
  font-weight:200;
  line-height:1.5;
  color:var(--text-3);
  margin:0;
}
.body{ font-size:18px; font-weight:200; line-height:1.6; color:var(--text-2); margin:0 }
.body-w{ font-size:18px; font-weight:200; line-height:1.6; color:var(--text-3); margin:0 }
.small{ font-size:15px; font-weight:200; line-height:1.6; color:var(--text-2); margin:0 }

.label{
  font-size:14px;
  font-weight:600;
  letter-spacing:0.025em;
  text-transform:uppercase;
  color:var(--text-3);
  margin:0;
  display:block;
}
.label-amber{ color:var(--amber) }
.label-iris{ color:var(--iris) }
.label-dim{ color:var(--text-2) }

.stack > * + *{ margin-top:var(--el-gap-lg) }
.stack-sm > * + *{ margin-top:var(--el-gap-sm) }

/* ---------- layout ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--pad-lg);
  padding-right:var(--pad-lg);
}
@media (max-width:720px){
  .wrap{ padding-left:var(--pad-sm); padding-right:var(--pad-sm) }
}

section{ position:relative }
.sect{ padding-top:var(--gap-lg); padding-bottom:var(--gap-lg) }
.sect-sm{ padding-top:var(--gap-sm); padding-bottom:var(--gap-sm) }
@media (max-width:900px){
  .sect{ padding-top:var(--gap-sm); padding-bottom:var(--gap-sm) }
}

/* asymmetric two-column */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:clamp(30px,4vw,72px);
  align-items:center;
}
.split-wide{ grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr) }
.split-narrow{ grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:clamp(22px,3vw,54px) }
.split-top{ align-items:start }
@media (max-width:900px){
  .split,.split-wide,.split-narrow{ grid-template-columns:1fr; gap:28px }
  .split-rev-m > .col-a{ order:2 }
  .split-rev-m > .col-b{ order:1 }
}
.flip > .col-a{ order:2 }
.flip > .col-b{ order:1 }
@media (max-width:900px){
  .flip > .col-a{ order:1 }
  .flip > .col-b{ order:2 }
}

/* ---------- actions ---------- */
a{ color:var(--text); text-decoration:none }

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 30px;
  border-radius:999px;
  background:var(--iris);
  color:#ffffff;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.005em;
  border:none;
  cursor:pointer;
  font-family:var(--font);
  transition:background .22s ease, transform .22s ease;
}
.cta:hover{ background:var(--iris-hi) }
.cta:active{ transform:translateY(1px) }

.ghost{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  color:var(--text);
  font-size:15px;
  font-weight:400;
  letter-spacing:0.005em;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:var(--font);
  transition:color .22s ease;
}
.ghost .arw{ transition:transform .22s ease; color:var(--text-2) }
.ghost:hover{ color:var(--amber) }
.ghost:hover .arw{ transform:translateX(5px); color:var(--amber) }

.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,3vw,34px) }

.tlink{
  color:var(--text-2);
  font-size:15px;
  font-weight:200;
  transition:color .2s ease;
  cursor:pointer;
}
.tlink:hover{ color:var(--text) }

/* focus visibility — required, never removed */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:4px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--iris); color:#fff; padding:12px 20px; border-radius:var(--radius);
  font-size:14px; font-weight:600;
}
.skip:focus{ left:16px; top:16px }

/* ---------- navigation: transparent over black, no border, no blur ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  transition:background .3s ease, transform .35s cubic-bezier(.4,0,.2,1);
}
.nav{ border-bottom:1px solid var(--amber) }
.nav.scrolled{ background:#000000 }
.nav.hidden{ transform:translateY(-100%) }
.nav.nav-open{ transform:none; background:#000000 }
.nav-in{
  max-width:var(--maxw); margin:0 auto;
  padding:20px var(--pad-lg);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
@media (max-width:720px){ .nav-in{ padding:18px var(--pad-sm) } }

.brand{ display:flex; align-items:center; cursor:pointer; flex:none }
.mark{ display:block; color:var(--text); fill:currentColor; width:auto }
.mark-nav{ height:40px; aspect-ratio:315/117 }
@media (max-width:900px){ .mark-nav{ height:34px } }
@media (max-width:720px){ .mark-nav{ height:30px } }
.mark-foot{ height:34px; aspect-ratio:315/117 }

.nav-links{ display:flex; align-items:center; gap:clamp(14px,1.9vw,26px) }
.nav-links a{
  font-size:14px; font-weight:600; letter-spacing:0.025em;
  color:var(--text-2); transition:color .2s ease; cursor:pointer;
}
.nav-links a:hover,.nav-links a.on{ color:var(--text) }

/* ---------- navigation sub-menus ---------- */
.nav-item{ position:relative; display:flex; align-items:center }
.nav-item > a{ display:inline-flex; align-items:center; gap:7px; padding:10px 0 }
.nav-caret{ width:7px; height:7px; flex:none; opacity:.55; transition:transform .22s ease, opacity .22s ease }
.nav-caret svg{ display:block; width:100%; height:100% }
.nav-item:hover .nav-caret,.nav-item.open .nav-caret{ opacity:1; transform:rotate(180deg) }

.subnav{
  position:absolute; top:100%; left:-18px;
  min-width:270px; padding:14px 18px 18px;
  background:#000000;
  border:1px solid #2a2a2a;
  border-radius:var(--radius);
  display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:10;
}
.nav-item:hover .subnav,.nav-item:focus-within .subnav,.nav-item.open .subnav{
  opacity:1; visibility:visible; transform:translateY(0);
}
/* a panel that would run past the right edge anchors to its item's right */
.subnav-right{ left:auto; right:-18px }
.subnav a{
  display:block; padding:9px 10px; margin:0 -10px;
  font-size:14px; font-weight:200; letter-spacing:0;
  text-transform:none; color:var(--text-2);
  border-radius:12px; white-space:nowrap;
  transition:color .18s ease, background .18s ease;
}
.subnav a:hover{ color:var(--text); background:#101010 }

/* a long list (every case study) runs in two columns rather than off-screen */
.subnav-wide{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 18px; min-width:520px }

@media (max-width:900px){
  .nav-links{ overflow-y:auto; padding-top:96px; padding-bottom:48px; justify-content:flex-start }
  .nav-item{ display:block; width:100% }
  .nav-item > a{ font-size:24px; font-weight:400; letter-spacing:-0.03em; color:var(--text); padding:12px 0 }
  .nav-caret{ width:10px; height:10px }
  .subnav-right{ right:auto }
  .subnav{
    position:static; opacity:1; visibility:visible; transform:none;
    border:none; border-radius:0; padding:0 0 10px 2px;
    min-width:0; background:transparent;
  }
  .subnav-wide{ grid-template-columns:1fr; min-width:0 }
  .subnav a{ font-size:16px; padding:7px 0; margin:0 }
  .subnav a:hover{ background:transparent }
}
.nav-cta{ margin-left:8px }
.nav-cta .cta{ min-height:44px; padding:0 24px; font-size:14px }

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:44px; height:44px; align-items:center; justify-content:center; padding:0;
}
.nav-toggle span{ display:block; width:22px; height:1px; background:var(--text); position:relative }
.nav-toggle span::before,.nav-toggle span::after{
  content:''; position:absolute; left:0; width:22px; height:1px; background:var(--text);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span::before{ top:-7px } .nav-toggle span::after{ top:7px }
.nav-open .nav-toggle span{ background:transparent }
.nav-open .nav-toggle span::before{ transform:translateY(7px) rotate(45deg) }
.nav-open .nav-toggle span::after{ transform:translateY(-7px) rotate(-45deg) }

@media (max-width:900px){
  .nav-toggle{ display:flex }
  .nav-links{
    position:fixed; inset:0; background:var(--black);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:28px; padding:0 var(--pad-sm);
    transform:translateY(-100%); transition:transform .38s cubic-bezier(.4,0,.2,1);
    z-index:-1;
  }
  .nav-open .nav-links{ transform:translateY(0) }
  .nav-links a{ font-size:26px; font-weight:400; letter-spacing:-0.03em; text-transform:none; color:var(--text) }
  .nav-cta{ margin-left:0; margin-top:10px }
}

/* ---------- search ---------- */
.nav-actions{ display:flex; align-items:center; gap:4px; flex:none }
.nav-search{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0;
  /* a UA default button would draw its own border and grey face */
  -webkit-appearance:none; appearance:none; border:0; background:transparent;
  color:var(--text-2); cursor:pointer; border-radius:999px;
  transition:color .2s ease, background .2s ease;
}
.nav-search svg{ width:19px; height:19px; display:block; flex:none }
.nav-search:hover{ color:var(--text); background:var(--surface-hi,#101010) }

.sr-wrap{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(60px,12vh,140px) var(--pad-sm) var(--pad-sm);
  background:rgba(0,0,0,.42);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
}
.sr-wrap.on{ opacity:1; visibility:visible }
.sr-panel{
  width:100%; max-width:660px; max-height:min(72vh,640px);
  display:flex; flex-direction:column;
  background:var(--black); border:1px solid var(--line,#2a2a2a);
  border-radius:var(--radius); overflow:hidden;
  transform:translateY(-8px); transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.sr-wrap.on .sr-panel{ transform:none }

.sr-head{ display:flex; align-items:center; gap:14px; padding:18px 20px; border-bottom:1px solid var(--line,#1e1e1e) }
.sr-icon{ width:19px; height:19px; flex:none; color:var(--text-2) }
#searchInput{
  flex:1; min-width:0; background:none; border:none; outline:none;
  font-family:var(--font); font-size:18px; font-weight:200; color:var(--text);
  padding:4px 0;
}
#searchInput::placeholder{ color:var(--text-2) }
#searchInput::-webkit-search-cancel-button{ display:none }
.sr-close{
  flex:none; background:none; border:1px solid var(--line,#2a2a2a); border-radius:8px;
  color:var(--text-2); font-family:var(--font); font-size:12px; font-weight:600;
  letter-spacing:.04em; padding:5px 9px; cursor:pointer; transition:color .2s ease, border-color .2s ease;
}
.sr-close:hover{ color:var(--text); border-color:var(--line-hi,#4a4a4a) }

.sr-out{ overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; min-height:0 }
.sr-note{ padding:26px 20px; margin:0; font-size:15px; font-weight:200; color:var(--text-2) }
.sr-list{ list-style:none; margin:0; padding:6px }
.sr-item{
  display:grid; gap:4px; padding:13px 14px; border-radius:14px; cursor:pointer;
  transition:background .14s ease;
}
.sr-item.on,.sr-item:hover{ background:var(--surface-hi,#111) }
.sr-kind{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--amber) }
.sr-title{ font-size:17px; font-weight:400; letter-spacing:-0.015em; line-height:1.25; color:var(--text) }
.sr-snip{ font-size:14px; font-weight:200; line-height:1.5; color:var(--text-2) }
.sr-snip mark{ background:none; color:var(--text); font-weight:400 }

.sr-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 20px; border-top:1px solid var(--line,#1e1e1e);
  font-size:12px; font-weight:200; color:var(--text-2);
}
.sr-keys{ display:flex; align-items:center; gap:6px }
.sr-keys kbd{
  font-family:var(--font); font-size:11px; line-height:1;
  border:1px solid var(--line,#2a2a2a); border-radius:5px; padding:3px 5px; color:var(--text-3);
}
@media (max-width:620px){ .sr-keys{ display:none } }
@media (prefers-reduced-motion:reduce){
  .sr-wrap,.sr-panel{ transition:none }
}

/* ---------- hero ---------- */
.hero{
  min-height:min(94vh,900px);
  display:flex; align-items:center;
  padding-top:130px; padding-bottom:var(--gap-lg);
  position:relative;
}
@media (max-width:900px){ .hero{ min-height:auto; padding-top:118px; padding-bottom:var(--gap-sm) } }

.viz{
  position:relative; width:100%;
  aspect-ratio:1/1;
  max-height:min(72vh,720px);
}
.viz canvas{ width:100%; height:100%; }
@media (max-width:900px){ .viz{ aspect-ratio:4/3; max-height:none } }

.viz-band{ position:relative; width:100%; height:clamp(260px,36vw,440px) }
.viz-tall{ position:relative; width:100%; height:clamp(300px,38vw,520px) }
.viz-tall canvas{ width:100%; height:100% }
.viz-band canvas{ width:100%; height:100% }

.viz-cap{ position:relative; width:100%; aspect-ratio:1/1.05; max-height:560px }
.viz-cap canvas{ width:100%; height:100% }
@media (max-width:900px){ .viz-cap{ aspect-ratio:4/3; max-height:none } }

/* ambient field — lower density, never competes */
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
}
.page{ position:relative; z-index:1 }

/* ---------- editorial content modules (no boxes) ---------- */
.modules{ display:grid; gap:clamp(56px,7vw,96px) }
.disc-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2vw,26px);
}
@media (max-width:820px){ .disc-grid{ grid-template-columns:1fr } }
.disc{ display:grid; gap:12px; align-content:start }
.module{ max-width:640px }
.mod-grid > .module{ max-width:none }
.module .label{ margin-bottom:16px }
.module .h3{ margin-bottom:14px }
.module .body{ margin-bottom:18px }

.mod-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(20px,2vw,26px);
}

/* ---------- sub-area cards (client request: bordered, rounded) ---------- */
.panel,
.cap,
.disc,
.mod-grid > .module,
.seq-row,
.tset-row,
.group-row{
  border:1px solid #2a2a2a;
  border-radius:var(--radius);
  padding:clamp(22px,2.2vw,30px);
  transition:border-color .25s ease;
}
.panel:hover,
.cap:hover,
.disc:hover,
.mod-grid > .module:hover,
.seq-row:hover,
.tset-row:hover,
.group-row:hover{ border-color:#4a4a4a }

/* icon marks inside a card */
.ico{ display:block; width:26px; height:26px; color:var(--text-3); margin-bottom:16px; transition:color .25s ease }
.ico svg{ display:block; width:100%; height:100%; }
.mod-grid > .module:hover .ico{ color:var(--amber) }

/* ---------- announcement pages: no canvas, so the hero is type and image ---------- */
.hero-flat{
  min-height:0;
  padding-top:clamp(132px,13vw,168px);
  padding-bottom:clamp(18px,2.4vw,34px);
  display:block;
}
@media (max-width:900px){ .hero-flat{ padding-top:118px } }

/* a reading column for a press announcement reproduced in full */
.prose{ max-width:70ch }
/* the reset and the rhythm carry the same specificity, so the later rule
   wins; the per-element rules below must not set margin themselves */
.prose > *{ margin:0 }
.prose > * + *{ margin-top:24px }
.prose h2{
  font-size:clamp(1.45rem,2.5vw,2.05rem); font-weight:400;
  letter-spacing:-0.03em; line-height:1.14;
  margin-top:clamp(42px,4.8vw,66px); margin-bottom:0;
}
.prose h2 + p{ margin-top:18px }
.prose .lede + p{ margin-top:28px }
.prose p{ font-size:18px; font-weight:200; line-height:1.65; color:var(--text-2) }
.prose p strong{ font-weight:400; color:var(--text-3) }
.prose .lede{ font-size:clamp(1.1rem,1.5vw,1.3rem); color:var(--text-3); line-height:1.5 }
.prose blockquote{
  margin:clamp(30px,3.4vw,46px) 0; padding-left:clamp(20px,2.4vw,32px);
  border-left:2px solid var(--amber);
}
.prose blockquote p{
  font-size:clamp(1.25rem,2.1vw,1.7rem); font-weight:400; letter-spacing:-0.025em;
  line-height:1.3; color:var(--text);
}
.prose blockquote cite{
  display:block; margin-top:14px; font-style:normal;
  font-size:15px; font-weight:200; color:var(--text-2);
}
.prose a{ color:var(--amber); text-decoration:underline; text-underline-offset:3px }
.prose .elist{ gap:12px }
.prose .elist li{ font-size:18px; line-height:1.6 }
.prose .figure{ margin-top:clamp(30px,3.4vw,46px); margin-bottom:clamp(30px,3.4vw,46px) }
.prose .sign{ margin-top:clamp(34px,3.8vw,52px); color:var(--text-3) }
.prose .note{ font-size:15px; color:var(--text-2); font-style:italic }
.prose h3{
  font-size:clamp(1.12rem,1.65vw,1.4rem); font-weight:400;
  letter-spacing:-0.02em; line-height:1.25; color:var(--text);
  margin-top:clamp(30px,3.4vw,46px);
}
.prose h3 + p, .prose h3 + ul, .prose h3 + .tbl-wrap{ margin-top:14px }
/* .elist sets its own margin later in this sheet, so the rhythm rule needs
   the extra specificity to survive */
.prose > p + ul.elist, .prose > ul.elist + p{ margin-top:24px }
.prose h2 + h3{ margin-top:clamp(20px,2.2vw,30px) }

/* tables: a data table is content, not a card, so it carries rules only */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.tbl{ width:100%; border-collapse:collapse; font-size:16px; font-weight:200; text-align:left }
.tbl th,.tbl td{
  padding:14px 18px 14px 0; vertical-align:top; line-height:1.55;
  border-bottom:1px solid var(--line,#1e1e1e);
}
.tbl thead th{
  font-size:13px; font-weight:600; letter-spacing:.025em; text-transform:uppercase;
  color:var(--text-3); padding-bottom:10px;
}
.tbl tbody th{ font-weight:400; color:var(--text-3); white-space:nowrap; padding-right:28px }
.tbl td{ color:var(--text-2) }
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{ border-bottom:none }
@media (max-width:620px){
  .tbl{ font-size:15px }
  .tbl tbody th{ white-space:normal }
}

.prose .refs{ margin-top:clamp(42px,4.8vw,66px) }
.prose .refs h2{ margin-top:0; font-size:clamp(1.2rem,1.9vw,1.55rem) }
.prose .refs ol{ margin:18px 0 0; padding-left:1.4em; display:grid; gap:10px }
.prose .refs li{ font-size:15px; font-weight:200; line-height:1.55; color:var(--text-2); overflow-wrap:anywhere }
.prose a:hover{ color:var(--text) }

/* ---------- editorial imagery (articles and media) ---------- */
.post-thumb{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:16px; margin-bottom:20px; background:var(--surface-hi,#0e0e0e);
}
.figure{ margin:0 }
.figure img{
  display:block; width:100%; border-radius:var(--radius);
  background:var(--surface-hi,#0e0e0e);
}
.figure-wide img{ aspect-ratio:16/9; object-fit:cover }
.figure-photo img{
  width:auto; max-width:100%; max-height:min(68vh,660px);
  margin-left:auto; margin-right:auto;
}
.figure figcaption{
  margin-top:14px; font-size:14px; font-weight:200; line-height:1.55;
  color:var(--text-2); max-width:62ch;
}

/* insight cards: the action sits on the baseline of the card, not of the text */
.mod-grid > .module.post{ display:flex; flex-direction:column }
.module.post .ghost{ margin-top:auto; align-self:flex-start }
/* a list that follows a paragraph in an article body needs room to breathe */
.post-sec .elist{ margin-top:10px }

/* capabilities: compact modules */
.cap-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2vw,26px);
}
@media (max-width:1000px){ .cap-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px){ .cap-grid{ grid-template-columns:1fr; gap:38px } }
.cap{ display:grid; gap:10px; align-content:start }
.cap .label{ margin-bottom:2px }
.cap .ghost{ min-height:34px }

/* editorial numbered list */
.seq{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.6vw,22px);
}
@media (max-width:820px){ .seq{ grid-template-columns:1fr } }
.seq-row{ display:grid; gap:12px; align-content:start }
.seq-num{
  font-size:clamp(1.4rem,2.2vw,2rem); font-weight:400; letter-spacing:-0.04em;
  color:var(--text-2); line-height:1;
}
.seq-row h3{ margin-bottom:10px }

/* a single emphasised statement */
.pull{
  font-size:clamp(1.75rem,3.1vw,2.75rem);
  font-weight:500;
  letter-spacing:-0.03em;
  line-height:1.14;
  color:var(--text);
  margin:0;
}

/* oversized proof moment */
.proof{ display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:end }
/* inside the narrow label column there is no room for two tracks */
.split-narrow > .col-a .proof{ grid-template-columns:1fr; gap:4px; align-items:start }
.split-narrow > .col-a .proof-cap{ padding-bottom:0 }
.split-narrow > .col-a .numeral{ font-size:clamp(4.5rem,9vw,8.5rem) }
@media (max-width:760px){ .proof{ grid-template-columns:1fr; gap:20px; align-items:start } }
.proof-cap{
  font-size:clamp(1rem,1.7vw,1.5rem); font-weight:400; letter-spacing:0.02em;
  line-height:1.25; text-transform:uppercase; color:var(--text); padding-bottom:clamp(10px,1.6vw,26px);
}
.proof-note{ display:block; margin-top:18px; text-transform:none; letter-spacing:0; font-size:17px; font-weight:200; line-height:1.6; color:var(--text-2); max-width:52ch }

/* editorial inline list — whitespace separated, no bullets or boxes */
.elist{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.elist li{
  font-size:17px; font-weight:200; color:var(--text-2);
  padding-left:22px; position:relative; line-height:1.5;
}
.elist li::before{
  content:''; position:absolute; left:0; top:0.72em;
  width:5px; height:5px; background:var(--text-2); opacity:.75;
  transform:rotate(45deg);
}
.elist-amber li::before{ background:var(--amber); opacity:.9 }

/* technology sets — typographic, uncontained */
.tset{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.4vw,20px);
}
@media (max-width:820px){ .tset{ grid-template-columns:1fr } }
.tset-row{ display:grid; gap:12px; align-content:start }
.tset-items{ font-size:17px; font-weight:200; color:var(--text-2); line-height:1.7; overflow-wrap:break-word; min-width:0 }
.tset-items span::after{ content:' · '; color:#3d3d3d }
.tset-items span:last-child::after{ content:'' }

/* grouped detail: label + editorial list, no container */
.groups{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.6vw,22px);
}
@media (max-width:820px){ .groups{ grid-template-columns:1fr } }
.group-row{ display:grid; gap:12px; align-content:start }

/* alternating feature (case studies) */
.feature{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:center }
@media (max-width:900px){ .feature{ grid-template-columns:1fr; gap:36px } }
.feature-meta{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; margin-bottom:20px }

/* disclosure (FAQ) — no card, minimal rule for affordance */
.faq{ display:grid }
.faq-item{ border-top:1px solid #1e1e1e }
.faq-item:last-child{ border-bottom:1px solid #1e1e1e }
.faq-q{
  width:100%; background:none; border:none; cursor:pointer; font-family:var(--font);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:26px 0; text-align:left; color:var(--text);
  font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:400; letter-spacing:-0.02em; line-height:1.3;
}
.faq-q .sign{ flex:none; width:14px; height:14px; position:relative; color:var(--text-2); transition:color .2s ease }
.faq-q .sign::before,.faq-q .sign::after{
  content:''; position:absolute; background:currentColor; left:50%; top:50%;
}
.faq-q .sign::before{ width:14px; height:1px; transform:translate(-50%,-50%) }
.faq-q .sign::after{ width:1px; height:14px; transform:translate(-50%,-50%); transition:transform .25s ease }
.faq-item.open .faq-q .sign::after{ transform:translate(-50%,-50%) scaleY(0) }
.faq-q:hover{ color:var(--amber) }
.faq-q:hover .sign{ color:var(--amber) }
.faq-a{ overflow:hidden; height:0; transition:height .32s cubic-bezier(.4,0,.2,1) }
.faq-a-in{ padding:0 0 28px; max-width:760px }

/* form controls — outlines permitted for usability/accessibility */
.field{ display:grid; gap:8px }
.field label{ font-size:14px; font-weight:600; letter-spacing:0.025em; color:var(--text-3) }
.field input,.field select,.field textarea{
  width:100%; background:transparent; color:var(--text);
  border:1px solid #2a2a2a; border-radius:var(--radius);
  padding:15px 18px; font-family:var(--font); font-size:16px; font-weight:200;
  transition:border-color .2s ease;
}
.field textarea{ min-height:150px; resize:vertical }
.field input::placeholder,.field textarea::placeholder{ color:#5c5c5c }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--iris); outline-offset:2px }
.field select{ appearance:none; cursor:pointer }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr } }
.form-note{ font-size:14px; font-weight:200; color:var(--text-2) }

/* testimonial — typographic, floating on void */
.quote{
  font-size:clamp(1.4rem,2.8vw,2.35rem); font-weight:400; letter-spacing:-0.03em;
  line-height:1.28; color:var(--text); margin:0; max-width:20ch;
}
.quote-lg{ max-width:none }

/* footer */
.foot{ padding-top:var(--gap-lg); padding-bottom:56px }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr)); gap:clamp(28px,3vw,48px) }
@media (max-width:1080px){ .foot-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; gap:38px } }
.foot-col{ display:grid; gap:14px; align-content:start }
.foot-col .label{ margin-bottom:6px }
.foot-bottom{ margin-top:clamp(48px,6vw,84px); display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:center }
.foot-bottom p{ font-size:14px; font-weight:200; color:var(--text-2); margin:0 }
.foot-bottom a{ color:var(--text-3); transition:color .2s ease }
.foot-bottom a:hover{ color:var(--amber) }
.foot-brand .mark{ margin-bottom:22px }

/* breadcrumb */
.crumb{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:none; padding:0; margin-bottom:10px;
  font-family:var(--font); color:var(--text-2);
  font-size:14px; font-weight:600; letter-spacing:.025em;
  cursor:pointer; transition:color .2s ease;
}
.crumb:hover{ color:var(--amber) }

/* scroll reveal */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1) }
.rv.in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}


/* ============================================================
   LIGHT BUILD — token overrides only.
   The layout, type scale and spacing are unchanged; every colour
   is re-derived so contrast holds on white.
   ============================================================ */
:root{
  --black:#ffffff;          /* the canvas */
  --text:#14141a;           /* primary */
  --text-2:#5f5f68;         /* secondary body        6.1:1 on white */
  --text-3:#34343c;         /* leads and labels     12.4:1 on white */
  --iris:#6d3df0;           /* primary action        5.8:1 on white */
  --iris-hi:#5a2fd6;
  --amber:#9a6b00;          /* emphasis text         4.7:1 on white */
  --amber-rule:#e0a100;     /* the navigation rule, decorative */
  --verdant:#0f6b58;

  --line:#e4e4ea;           /* card and field borders */
  --line-hi:#bcbcc6;
  --surface-hi:#f4f4f7;     /* sub-menu hover only */
}

/* the mark carries the brand navy on white rather than flat black */
.mark{ color:#021F62 }

/* navigation */
.nav{ border-bottom:1px solid var(--amber-rule) }
.nav.scrolled{ background:#ffffff }
.nav.nav-open{ background:#ffffff }
@media (max-width:900px){ .nav-links{ background:#ffffff } }

.subnav{ background:#ffffff; border-color:var(--line) }
.subnav a:hover{ background:var(--surface-hi) }

/* cards and rules */
.panel,.cap,.disc,
.mod-grid > .module,
.seq-row,.tset-row,.group-row{ border-color:var(--line) }
.panel:hover,.cap:hover,.disc:hover,
.mod-grid > .module:hover,
.seq-row:hover,.tset-row:hover,.group-row:hover{ border-color:var(--line-hi) }

.faq-item{ border-top-color:var(--line) }
.faq-item:last-child{ border-bottom-color:var(--line) }

/* form controls */
.field input,.field select,.field textarea{ border-color:#d6d6de }
.field input::placeholder,.field textarea::placeholder{ color:#8e8e98 }

/* separators and small details */
.tset-items span::after{ color:#c4c4ce }
.elist li::before{ background:var(--text-2) }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{ background:var(--text) }

/* focus ring: amber is too weak on white, so the action colour carries it */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline-color:var(--iris);
}

/* the ambient particle field sits further back on a light ground */
.ambient{ opacity:.42 }

/* search: on white, the scrim has to be dark enough to separate the panel */
.sr-wrap{ background:rgba(20,20,26,.28) }
.sr-panel{ box-shadow:0 24px 60px -20px rgba(20,20,26,.22) }
.sr-item.on,.sr-item:hover{ background:var(--surface-hi) }
.nav-search:hover{ background:var(--surface-hi) }