/* ============================================================
   Sifr — shared site stylesheet
   One design system for all pages. Change a token here and
   every page that links this file updates.
   ============================================================ */

:root {
  --bg:    oklch(0.165 0.009 95);
  --bg-2:  oklch(0.225 0.011 95);
  --surface: oklch(0.275 0.013 95);
  --surface-line: oklch(0.40 0.011 95);
  --ink:   oklch(0.945 0.014 92);
  --muted: oklch(0.72 0.012 92);
  --faint: oklch(0.64 0.012 92);
  --line:  oklch(0.30 0.009 95);
  --acc:   oklch(0.87 0.205 123);
  --acc-d: oklch(0.78 0.19 123);
  /* Display font is centralised here. The locked home default is the
     clean grotesque; change this one line to restyle every page. */
  --display: "Instrument Sans", system-ui, sans-serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); line-height: 1.55; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 2; }
.narrow { max-width: 920px; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.acc { color: var(--acc); }
.it { font-style: italic; }

/* ---------- top bar ---------- */
header.bar { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(10px); background: color-mix(in oklch, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line); }
header.bar .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.wordmark { font-family: var(--mono); font-weight: 500; letter-spacing: .04em; font-size: 15px; }
.wordmark b { color: var(--acc); font-weight: 500; }
  .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--acc); color: var(--bg); font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 4px; transition: top .18s ease; }
  .skip-link:focus { top: 12px; }
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }
nav.top { margin-left: auto; display: flex; gap: 26px; align-items: center; }
nav.top a { font-size: 14px; color: var(--muted); transition: color .2s; }
nav.top a:hover { color: var(--ink); }
nav.top a.active { color: var(--acc); }
.cta { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--bg); background: var(--acc); padding: 10px 18px; border-radius: 2px; border: 1px solid var(--acc); transition: transform .15s ease, background .2s; display: inline-block; }
.cta:hover { background: var(--acc-d); transform: translateY(-1px); }
.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.ghost:hover { background: var(--bg-2); border-color: var(--ink); }

/* ---------- hero ---------- */
.hero { padding: 86px 0 70px; border-bottom: 1px solid var(--line); position: relative; }
.crumb { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 26px; }
.crumb a:hover { color: var(--ink); }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 6vw, 92px); line-height: 0.96; letter-spacing: -.025em; margin: 0; max-width: 17ch; }
.hero h1 .acc { font-weight: 400; }
.hero p.lede { max-width: 600px; margin: 30px 0 0; color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; }
.hero .actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero .actions .cta { padding: 13px 24px; font-size: 15px; }

/* ---------- sections ---------- */
section { position: relative; z-index: 2; }
.sec-pad { padding: 92px 0; border-bottom: 1px solid var(--line); }
.band { background: var(--bg-2); }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 38px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--acc); }
.display { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.02; margin: 0; }
.lead2 { color: var(--muted); font-size: 17px; line-height: 1.7; max-width: 600px; margin: 22px 0 0; }
.lead2 b { color: var(--ink); font-weight: 500; }

/* ---------- 2-up card grid (focus / value) ---------- */
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 48px; }
.grid2 .c { background: var(--bg); padding: 38px; transition: background .2s; }
.grid2 .c:hover { background: var(--bg-2); }
.grid2 .c .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.grid2 .c h3 { font-family: var(--display); font-weight: 400; font-size: clamp(23px,2.6vw,34px); line-height: 1.05; margin: 16px 0 12px; letter-spacing: -.01em; }
.grid2 .c p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.62; }
.grid2 .c p b { color: var(--ink); font-weight: 500; }

/* ---------- editorial row list ---------- */
.rows .row { display: grid; grid-template-columns: 160px 1fr; gap: 30px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--line); }
.rows .row:last-child { border-bottom: 1px solid var(--line); }
.rows .row .k { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.rows .row h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px,2.4vw,30px); line-height: 1.06; margin: 0 0 10px; letter-spacing: -.01em; }
.rows .row p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.62; max-width: 620px; }

/* ---------- pipeline ---------- */
.pipe { display: grid; gap: 14px; margin-top: 48px; }
.pipe.p3 { grid-template-columns: repeat(3, 1fr); }
.pipe.p4 { grid-template-columns: repeat(4, 1fr); }
.pipe .cell { border: 1px solid var(--line); border-radius: 3px; padding: 24px; position: relative; background: color-mix(in oklch, var(--bg-2) 55%, transparent); }
.pipe .cell.end { border-color: color-mix(in oklch, var(--acc) 45%, var(--line)); }
.pipe .cell .n { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .14em; }
.pipe .cell .lbl { font-family: var(--display); font-size: 25px; margin-top: 10px; font-weight: 400; letter-spacing: -.01em; }
.pipe .cell.end .lbl { color: var(--acc); }
.pipe .cell p { margin: 10px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.pipe .arrow { position: absolute; right: -11px; top: 38px; color: var(--faint); font-family: var(--mono); z-index: 3; }

/* ---------- layer map (entity -> layer) ---------- */
.lmap { margin-top: 44px; border-top: 1px solid var(--line); }
.lmap .lrow { display: grid; grid-template-columns: 220px 1fr 150px; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.lmap .lrow .ent { font-family: var(--display); font-weight: 600; font-size: clamp(19px,2vw,24px); letter-spacing: -.01em; }
.lmap .lrow .desc { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.lmap .lrow .layer { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); text-align: right; }

/* ---------- sector cards (industries index) ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.scard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; transition: border-color .2s, transform .2s; background: var(--bg); }
.scard:hover { border-color: var(--faint); transform: translateY(-3px); }
.scard .top { padding: 30px 28px 0; }
.scard .idx { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.scard h3 { font-family: var(--display); font-weight: 400; font-size: clamp(24px,2.7vw,32px); line-height: 1.04; margin: 14px 0 12px; letter-spacing: -.01em; }
.scard p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0; }
.scard .go { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--acc); padding: 22px 28px 28px; margin-top: auto; }
.scard:hover .go { color: var(--ink); }

/* ---------- cross-links ---------- */
.xlinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.xlink { border: 1px solid var(--line); border-radius: 4px; padding: 26px; transition: border-color .2s, background .2s; }
.xlink:hover { border-color: var(--faint); background: var(--bg-2); }
.xlink .k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.xlink .t { font-family: var(--display); font-weight: 400; font-size: 22px; margin-top: 10px; letter-spacing: -.01em; }
.xlink .t .arr { color: var(--acc); }

/* ---------- quote / proof ---------- */
.quote { font-family: var(--display); font-weight: 400; font-size: clamp(26px,3.4vw,44px); line-height: 1.12; letter-spacing: -.01em; max-width: 920px; margin: 0; }
.quote .acc { font-weight: 400; }
.metric { font-family: var(--display); font-size: clamp(38px,4.4vw,56px); font-weight: 400; line-height: 1; color: var(--acc); letter-spacing: -.02em; }
.metric small { display: block; font-family: var(--sans); font-size: 13px; color: var(--faint); font-weight: 400; margin-top: 10px; letter-spacing: .02em; }

/* ---------- partners / image slots ---------- */
.partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.partners image-slot { display: block; width: 100%; height: auto; aspect-ratio: 3/2; border: 1px dashed var(--line); border-radius: 4px; }
.note { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 26px; letter-spacing: .03em; }

/* ---------- empty state (media) ---------- */
.empty { border: 1px dashed var(--line); border-radius: 4px; padding: 40px; text-align: center; color: var(--muted); margin-top: 28px; }
.empty .mono { display: block; margin-bottom: 10px; }

/* ---------- team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px; margin-top: 48px; }
.person { display: grid; grid-template-columns: 132px 1fr; gap: 28px; }
.person image-slot { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 3px; }
.person h3 { font-family: var(--display); font-size: 29px; font-weight: 400; margin: 0; letter-spacing: -.01em; }
.person .role { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); margin: 8px 0 16px; }
.person p { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.person a.li { font-family: var(--mono); font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.person a.li:hover { color: var(--acc); border-color: var(--acc); }

/* ---------- end CTA band ---------- */
.endcta { background: var(--bg-2); }
.endcta .inner { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.endcta h2 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 4.6vw, 60px); line-height: 1; margin: 0; flex: 1 1 420px; letter-spacing: -.02em; }
.endcta h2 .acc { font-weight: 400; }
.endcta .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.endcta .actions .cta { padding: 14px 24px; font-size: 15px; }

/* ---------- mobile nav ---------- */
.nav-toggle { display: none; margin-left: auto; width: 42px; height: 38px; background: none; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .22s ease, opacity .22s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); }
.foot { display: flex; align-items: center; gap: 24px; padding: 34px 0; flex-wrap: wrap; }
.foot .wordmark { font-size: 14px; }
.foot nav { margin-left: auto; display: flex; gap: 22px; }
.foot nav a { font-size: 13px; color: var(--faint); }
.foot nav a:hover { color: var(--ink); }
.foot .rt { width: 100%; font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 18px; }
.foot .rt a { color: inherit; }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .grid2, .cards3, .xlinks, .partners, .pipe.p3, .pipe.p4, .team-grid { grid-template-columns: 1fr; }
  .person { grid-template-columns: 100px 1fr; gap: 20px; }
  .rows .row { grid-template-columns: 1fr; gap: 8px; }
  .lmap .lrow { grid-template-columns: 1fr; gap: 6px; }
  .lmap .lrow .layer { text-align: left; }
  .pipe .arrow { display: none; }
}
@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  nav.top {
    position: fixed; top: 68px; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: color-mix(in oklch, var(--bg) 96%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.6);
    max-height: 0; overflow: hidden; pointer-events: none;
    transition: max-height .28s ease; z-index: 29;
  }
  nav.top.open { max-height: 86vh; overflow-y: auto; pointer-events: auto; }
  nav.top a { font-size: 16px; padding: 15px 40px; color: var(--ink); border-top: 1px solid var(--line); }
  nav.top a.active { color: var(--acc); }
  nav.top a.cta { margin: 14px 40px 18px; text-align: center; border-radius: 2px; padding: 14px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 22px; }
  .sec-pad { padding: 64px 0; }
  nav.top a { padding-left: 22px; padding-right: 22px; }
  nav.top a.cta { margin-left: 22px; margin-right: 22px; }
}