/* Syprion Labs — site styles
   No inline styles or scripts anywhere on the site, so the
   Content-Security-Policy in _headers can stay strict. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #F3F5F8;
  --paper-2: #E9EDF3;
  --surface: #FFFFFF;
  --ink: #0A0D14;
  --ink-2: #4A5263;
  --line: #D3DAE4;
  --blue: #007BFF;
  --blue-text: #0059BA;
  --btn: #0062CC;
  --btn-ink: #FFFFFF;
  --btn-hover: #004FA6;
  --tint: #E3EEFD;
  --hatch: #A9CBFA;
  --pad: #C5CEDA;
  --die: #FFFFFF;
  --focus: #0062CC;
  --logo-ink: #0A0D14;
  --logo-blue: #007BFF;
  --radius: 10px;
  --max: 1180px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A0E15;
    --paper-2: #101724;
    --surface: #121927;
    --ink: #E7ECF4;
    --ink-2: #A2ACBD;
    --line: #273042;
    --blue: #2E8BFF;
    --blue-text: #7DB8FF;
    --btn: #3D93FF;
    --btn-ink: #06101F;
    --btn-hover: #6AAEFF;
    --tint: #13294A;
    --hatch: #26507F;
    --pad: #2C374B;
    --die: #0F1624;
    --focus: #7DB8FF;
    --logo-ink: #E7ECF4;
    --logo-blue: #2E8BFF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0A0E15;
  --paper-2: #101724;
  --surface: #121927;
  --ink: #E7ECF4;
  --ink-2: #A2ACBD;
  --line: #273042;
  --blue: #2E8BFF;
  --blue-text: #7DB8FF;
  --btn: #3D93FF;
  --btn-ink: #06101F;
  --btn-hover: #6AAEFF;
  --tint: #13294A;
  --hatch: #26507F;
  --pad: #2C374B;
  --die: #0F1624;
  --focus: #7DB8FF;
  --logo-ink: #E7ECF4;
  --logo-blue: #2E8BFF;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  font-stretch: 100%;
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

a { color: var(--blue-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  margin: 0 0 0.5em;
  font-weight: 650;
  font-stretch: 125%;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.15rem + 4.3vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.65rem, 1.15rem + 1.7vw, 2.45rem); }
h3 { font-size: 1.2rem; font-stretch: 112%; font-weight: 620; line-height: 1.25; }
p { margin: 0 0 1em; max-width: 66ch; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 640; }

.lead { font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem); line-height: 1.5; color: var(--ink-2); }
.note { font-size: 0.95rem; color: var(--ink-2); }
.muted { color: var(--ink-2); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: 16px; }
@media (min-width: 640px) { .wrap { padding-inline: 32px; } }

.block { padding-block: clamp(56px, 8vw, 104px); }
.block + .block { border-top: 1px solid var(--line); }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--surface); color: var(--ink); padding: 10px 14px; border-radius: 6px;
}
.skip:focus { top: 16px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 24px; border-radius: 999px;
  background: var(--btn); color: var(--btn-ink); border: 2px solid var(--btn);
  font-weight: 620; font-stretch: 108%; text-decoration: none; line-height: 1.2;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 0.95rem; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); position: relative; }
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 16px; }
.brand { display: block; text-decoration: none; }
.logo { height: 40px; width: auto; }
@media (min-width: 900px) { .logo { height: 46px; } }
.logo-ink { fill: var(--logo-ink); }
.logo-mark .logo-ink { stroke: var(--logo-ink); stroke-width: 1; }
.logo-blue { fill: var(--logo-blue); }

.nav-desktop { display: none; align-items: center; gap: 28px; align-self: stretch; }
.nav-list { list-style: none; display: flex; align-items: stretch; gap: 26px; height: 100%; }
.nav-item { display: flex; }
.nav-top {
  display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; font-weight: 540;
}
.nav-top:hover { color: var(--blue-text); }
.nav-top.is-active { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.has-mega > .nav-top::after {
  content: ""; width: 6px; height: 6px; margin: -3px 0 0 9px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s;
}

/* Mega menus: only for a mouse or trackpad. Everyone else uses the hub pages. */
.mega { display: none; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .mega {
    display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
    background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 40px -30px rgba(4, 10, 20, 0.4);
    visibility: hidden; opacity: 0; transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  }
  .has-mega:hover > .mega {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity 0.16s ease 0.06s, transform 0.16s ease 0.06s, visibility 0s linear 0.06s;
  }
  .has-mega:hover > .nav-top { color: var(--blue-text); }
  .has-mega:hover > .nav-top::after { transform: rotate(225deg) translate(-2px, -2px); }
}
.mega-grid { display: grid; grid-template-columns: 1fr 1fr 0.85fr; gap: 40px; padding-block: 28px 34px; }
.mega-span { grid-column: span 2; }
.mega-title {
  margin: 0 0 12px; font-size: 0.78rem; font-weight: 640; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.mega-links { list-style: none; display: grid; gap: 2px; }
.mega-2 { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.mega-links a { display: block; padding: 10px 12px; margin-inline: -12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.mega-links a:hover { background: var(--tint); }
.mega-links strong { display: block; font-weight: 620; }
.mega-links a > span { display: block; color: var(--ink-2); font-size: 0.92rem; line-height: 1.45; }
.mega-status .glyph { width: 12px; height: 12px; margin: 0 7px 0 0; vertical-align: -1px; border-width: 1.2px; }
.mega-aside { border-left: 1px solid var(--line); padding-left: 32px; }
.mega-aside p:not(.mega-title) { color: var(--ink-2); font-size: 0.95rem; max-width: 34ch; }
.mega-more { font-weight: 620; }

.nav-mobile summary {
  list-style: none; cursor: pointer;
  min-height: 44px; padding: 8px 18px; border: 2px solid var(--ink); border-radius: 999px;
  font-weight: 600; display: inline-flex; align-items: center;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile[open] summary { background: var(--ink); color: var(--paper); }
.nav-mobile nav {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 8px 16px 20px; display: flex; flex-direction: column;
}
.nav-mobile nav { max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
.nav-mobile nav a { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 560; font-size: 1.05rem; }
.nav-mobile nav a[aria-current="page"] { color: var(--blue-text); }
.nav-mobile nav .m-more { color: var(--blue-text); font-weight: 620; font-size: 0.98rem; }
.nav-mobile .m-title {
  margin: 20px 0 2px; font-size: 0.78rem; font-weight: 640; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.nav-mobile nav .btn { margin-top: 20px; border-bottom: 0; color: var(--btn-ink); }

@media (min-width: 900px) {
  .nav-desktop { display: flex; }
  .nav-mobile { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 7vw, 88px) clamp(48px, 8vw, 104px); }
.hero h1 { max-width: 19ch; margin-bottom: clamp(28px, 4vw, 48px); }
.hero-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 5fr 7fr; gap: 56px; }
  .hero-copy { padding-top: 8px; }
}

/* ---------- Die map ---------- */
.die { margin: 0; }
.die svg { width: 100%; height: auto; }
.die-mobile { display: block; max-width: 420px; }
.die-desktop { display: none; }
@media (min-width: 700px) {
  .die-mobile { display: none; }
  .die-desktop { display: block; }
}
.die figcaption { margin-top: 12px; font-size: 0.92rem; color: var(--ink-2); max-width: 60ch; }

.die-body { fill: var(--die); stroke: var(--ink); stroke-width: 1.5; }
.die-seal { fill: none; stroke: var(--line); stroke-width: 1; }
.pad { fill: var(--pad); }
.pad-wired { fill: var(--logo-blue); }
.hatch-line { fill: var(--hatch); }
.dot { fill: var(--ink-2); opacity: 0.45; }

.tile { cursor: pointer; }
.tile-bg { fill: var(--die); }
.tile-fill { fill: url(#hatch); }
.tile.is-research .tile-fill { fill: url(#dots); }
.tile-edge { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.tile:hover .tile-edge,
.tile:focus-visible .tile-edge { stroke: var(--blue); stroke-width: 3; }
.tile:hover .tile-bg { fill: var(--tint); }
.tile:focus { outline: none; }

.t-name, .t-sub, .t-status {
  paint-order: stroke; stroke: var(--die); stroke-width: 5px; stroke-linejoin: round;
}
.t-name { font-size: 17px; font-weight: 660; font-stretch: 112%; fill: var(--ink); }
.t-sub { font-size: 13.5px; fill: var(--ink-2); }
.t-status { font-size: 13.5px; font-weight: 640; fill: var(--blue-text); }
.die-mobile .t-name { font-size: 15.5px; }
.die-mobile .t-sub, .die-mobile .t-status { font-size: 12.5px; }

.wire { fill: none; stroke: var(--logo-blue); stroke-width: 5; stroke-linecap: round; }
.wire-end { fill: var(--logo-blue); }
@media (prefers-reduced-motion: no-preference) {
  .wire { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.9s 0.25s cubic-bezier(.4,0,.2,1) forwards; }
  .wire-end { opacity: 0; animation: appear 0.3s 1.05s ease-out forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }

/* ---------- Lanes ---------- */
.lanes-grid { display: grid; gap: 48px; margin-top: 36px; }
@media (min-width: 900px) {
  .lanes-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  @supports (grid-template-rows: subgrid) {
    .lanes-grid { grid-template-rows: auto auto 1fr; }
    .lane { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  }
  .lane:first-child { padding-right: 48px; border-right: 1px solid var(--line); }
  .lane:last-child { padding-left: 48px; }
}
.lane h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem); max-width: 22ch; }
.svc { list-style: none; margin: 24px 0; border-top: 1px solid var(--line); }
.svc li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.svc strong { display: block; }
.svc span { color: var(--ink-2); }

/* ---------- Process ---------- */
.steps { list-style: none; counter-reset: step; display: grid; gap: 28px; margin-top: 36px; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(5, 1fr); gap: 24px; } }
.steps li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 14px; }
.steps li::before {
  content: counter(step);
  display: block; font-stretch: 125%; font-weight: 700; font-size: 2.2rem; line-height: 1;
  color: var(--blue-text); margin-bottom: 14px; font-variant-numeric: tabular-nums;
}
.steps h3 { margin-bottom: 0.35em; }
.steps p { color: var(--ink-2); font-size: 0.98rem; margin: 0; }

/* ---------- Status legend ---------- */
.legend { list-style: none; display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .legend { grid-template-columns: repeat(5, 1fr); border-top: 0; gap: 20px; } }
.legend li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .legend li { display: block; border-bottom: 0; border-top: 1px solid var(--line); padding-top: 16px; } }
.legend strong { display: block; }
.legend span.desc { color: var(--ink-2); font-size: 0.95rem; grid-column: 2; }
@media (min-width: 760px) { .legend .glyph { margin-bottom: 12px; } }

.glyph {
  display: inline-block; width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--ink); vertical-align: -3px; margin-top: 4px;
}
.g-research { background: radial-gradient(var(--ink-2) 1px, transparent 1.4px) 0 0 / 6px 6px; }
.g-design { background: repeating-linear-gradient(45deg, var(--hatch) 0 2px, transparent 2px 5px); }
.g-layout { background: repeating-linear-gradient(45deg, var(--ink) 0 1.5px, transparent 1.5px 3.5px); }
.g-taped { background: var(--ink); }
.g-silicon { background: var(--blue); border-color: var(--blue); }

/* ---------- Founder strip ---------- */
.founder-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 760px) { .founder-grid { grid-template-columns: auto 1fr; gap: 40px; } }
.monogram {
  width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-stretch: 125%; font-weight: 700; font-size: 2.1rem; letter-spacing: 0.02em;
}
.monogram-lg { width: 160px; height: 160px; font-size: 3rem; }

/* ---------- CTA band ---------- */
.cta { background: var(--paper-2); }
.cta h2 { max-width: 22ch; }

/* ---------- Page head ---------- */
.page-head { padding-block: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.page-head h1 { margin-bottom: 0.35em; }
.toc { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; }
.toc a { font-weight: 560; }

/* ---------- Projects ---------- */
.project { padding-block: clamp(48px, 7vw, 96px); border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.project-grid { display: grid; gap: 36px; align-items: start; }
@media (min-width: 980px) { .project-grid { grid-template-columns: 6fr 5fr; gap: 56px; } }
.project h2 { margin-bottom: 0.3em; }

.facts { margin: 28px 0 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: minmax(7.5rem, 32%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--ink-2); font-size: 0.95rem; }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.facts .glyph { margin-right: 8px; margin-top: 0; }

.diagram { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
@media (min-width: 980px) { .diagram { position: sticky; top: 24px; } }
.diagram svg { width: 100%; height: auto; }
.diagram figcaption { margin-top: 12px; font-size: 0.9rem; color: var(--ink-2); }

.dg-text { font-size: 13px; fill: var(--ink); }
.dg-strong { font-size: 13.5px; font-weight: 640; fill: var(--ink); }
.dg-small { font-size: 11.5px; fill: var(--ink-2); }
.dg-box { fill: var(--surface); stroke: var(--ink); stroke-width: 1.3; }
.dg-ours { fill: var(--tint); stroke: var(--blue); stroke-width: 2; }
.dg-bar { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.3; }
.dg-cell { fill: var(--tint); stroke: var(--blue); stroke-width: 1.4; }
.dg-line { fill: none; stroke: var(--ink-2); stroke-width: 1.4; }
.dg-frame { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 5 4; }
.dg-arrowhead { fill: var(--ink-2); }
.dg-key { fill: var(--tint); stroke: var(--blue); stroke-width: 2; }

/* ---------- Earlier work ---------- */
.earlier { list-style: none; margin-top: 28px; border-top: 1px solid var(--line); }
.earlier li { display: grid; gap: 6px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .earlier li { grid-template-columns: 2fr 3fr 1.2fr; align-items: baseline; } }
.earlier h3 { margin: 0; }
.earlier .proc { display: block; color: var(--ink-2); font-size: 0.95rem; margin-top: 4px; }
.earlier p { margin: 0; color: var(--ink-2); }
.earlier .state { font-weight: 600; white-space: nowrap; }

/* ---------- Services ---------- */
.svc-section { padding-block: clamp(48px, 7vw, 96px); border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.svc-intro { max-width: 62ch; }
.offer-list { list-style: none; margin-top: 32px; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.offer { display: grid; gap: 8px 40px; padding: 26px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .offer { grid-template-columns: 1fr 2fr; } }
.offer h3 { margin: 0; }
.offer p { margin: 0 0 0.6em; }
.offer .gets { color: var(--ink-2); font-size: 0.97rem; margin: 0; }
.offer .gets strong { color: var(--ink); }
.tools { margin-top: 24px; color: var(--ink-2); font-size: 0.97rem; }

.plain-list { list-style: none; margin-top: 16px; border-top: 1px solid var(--line); max-width: 70ch; }
.plain-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }

.two-col { display: grid; gap: 40px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ---------- About ---------- */
.bio-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 820px) { .bio-grid { grid-template-columns: auto 1fr; gap: 48px; } }
.role { color: var(--ink-2); margin-top: -0.3em; }
.principles { margin-top: 28px; border-top: 1px solid var(--line); }
.principles div { display: grid; gap: 6px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 820px) { .principles div { grid-template-columns: 1fr 2fr; } }
.principles dt { font-weight: 640; font-stretch: 112%; }
.principles dd { margin: 0; color: var(--ink-2); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 20px; margin-top: 8px; }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.contact-card h2 { font-size: 1.4rem; }
.contact-card .actions { margin-bottom: 0; }
.email-big { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); font-weight: 620; word-break: break-word; }

/* ---------- Prose pages ---------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.45rem; margin-top: 1.8em; }
.prose ul { padding-left: 1.2em; margin-bottom: 1em; }
.prose li { margin-bottom: 0.4em; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 48px 40px; font-size: 0.95rem; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 520px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr 1.25fr 1fr 0.8fr 0.8fr; gap: 28px; } .footer-about { grid-column: auto; } }
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 650; font-stretch: 118%; font-size: 1.1rem; }
.footer-brand svg { width: 34px; height: auto; }
.site-footer p { color: var(--ink-2); max-width: 46ch; margin-top: 14px; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: var(--ink); text-decoration: none; }
.footer-links a:hover { color: var(--blue-text); text-decoration: underline; }
.footer-title { font-weight: 640; margin: 0 0 12px; display: block; font-size: 0.95rem; font-stretch: 100%; letter-spacing: 0; line-height: 1.4; }
.footer-title a { color: var(--ink); text-decoration: none; }
.footer-title a:hover { color: var(--blue-text); text-decoration: underline; }
.legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.88rem; }
.legal p { max-width: none; margin: 0 0 6px; }

/* ---------- 404 ---------- */
.notfound { min-height: 50vh; display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .site-header nav, .nav-mobile, .cta, .site-footer .footer-links { display: none; }
  body { background: #fff; color: #000; }
}

/* Shared SVG definitions (patterns, arrowheads) */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Refinements */
.state .glyph { margin-right: 8px; margin-top: 0; }
.earlier + .note { margin-top: 18px; }
.notes h2 { font-size: 1.4rem; font-stretch: 115%; }
.notes h2 + .plain-list { margin-top: 12px; }
.notes p + h2 { margin-top: 1.6em; }
@media (min-width: 700px) { .die figcaption { padding-left: 9.4%; } }
@media (max-width: 759px) {
  .steps li { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 8px; }
  .steps li::before { grid-row: span 2; font-size: 1.9rem; margin-bottom: 0; }
}

/* =====================================================================
   Chip canvas, motion and finishing details
   Everything below is CSS only. Motion runs only when the viewer has not
   asked for reduced motion; scroll effects only where the browser
   supports scroll-driven animations. At rest, everything is visible.
   ===================================================================== */
:root {
  --grid: rgba(0, 89, 186, 0.06);
  --grid-major: rgba(0, 89, 186, 0.1);
  --halo: rgba(0, 123, 255, 0.10);
  --glow: rgba(0, 123, 255, 0.45);
  --pulse: #CFE6FF;
  --pad-lit: #6FA9F0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grid: rgba(125, 184, 255, 0.05);
    --grid-major: rgba(125, 184, 255, 0.09);
    --halo: rgba(46, 139, 255, 0.14);
    --glow: rgba(61, 147, 255, 0.55);
    --pulse: #D8ECFF;
    --pad-lit: #4F8FE0;
  }
}
:root[data-theme="dark"] {
  --grid: rgba(125, 184, 255, 0.05);
  --grid-major: rgba(125, 184, 255, 0.09);
  --halo: rgba(46, 139, 255, 0.14);
  --glow: rgba(61, 147, 255, 0.55);
  --pulse: #D8ECFF;
  --pad-lit: #4F8FE0;
}

/* The canvas: an EDA-viewer look for the home header and hero, in both themes */
.canvas {
  --paper: #070B13;
  --paper-2: #0C1220;
  --surface: #0E1626;
  --ink: #E7ECF4;
  --ink-2: #9DAAC0;
  --line: #1E293B;
  --blue: #3D93FF;
  --blue-text: #7DB8FF;
  --btn: #2F8CFF;
  --btn-ink: #04101F;
  --btn-hover: #66AAFF;
  --tint: #10284A;
  --hatch: #1F4A82;
  --pad: #233147;
  --pad-lit: #4F8FE0;
  --die: #0A1220;
  --focus: #7DB8FF;
  --logo-ink: #E7ECF4;
  --logo-blue: #2E8BFF;
  --grid: rgba(125, 184, 255, 0.06);
  --grid-major: rgba(125, 184, 255, 0.11);
  --halo: rgba(46, 139, 255, 0.20);
  --glow: rgba(61, 147, 255, 0.6);
  --pulse: #D8ECFF;
  color-scheme: dark;
  background: var(--paper);
  color: var(--ink);
}
.site-header.canvas { border-bottom-color: var(--line); }
.hero.canvas { position: relative; isolation: isolate; overflow: clip; border-bottom: 1px solid var(--line); }
.hero.canvas::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 55%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 90% at 70% 55%, #000 30%, transparent 85%);
}
.hero.canvas::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -10%; bottom: -10%; width: 75%; height: 90%;
  background: radial-gradient(closest-side, var(--halo), transparent);
}
@media (max-width: 959px) { .hero.canvas::after { right: -20%; width: 140%; height: 60%; } }
.canvas .btn:hover { box-shadow: 0 0 0 4px var(--tint), 0 0 24px var(--glow); }
.canvas .btn-ghost:hover { box-shadow: none; }

/* PDKs we design on */
.pdks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pdks li {
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
  font-size: 0.86rem; font-weight: 560; color: var(--ink);
  background: var(--paper-2); font-variant-numeric: tabular-nums;
}
.pdks span { color: var(--ink-2); font-weight: 400; margin-left: 4px; }

/* Die map details */
.handle { fill: none; stroke: var(--blue-text); stroke-width: 2; opacity: 0; transition: opacity 0.15s; }
.tile:hover .handle, .tile:focus-visible .handle { opacity: 1; }
.tile:hover .tile-edge, .tile:focus-visible .tile-edge { filter: drop-shadow(0 0 6px var(--glow)); }
.pulse { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Tiles route in, one after another */
  .tile .tile-edge {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: draw 0.7s cubic-bezier(.3,0,.2,1) forwards;
  }
  .tile.t1 .tile-edge { animation-delay: 0.10s; }
  .tile.t2 .tile-edge { animation-delay: 0.22s; }
  .tile.t3 .tile-edge { animation-delay: 0.34s; }
  .tile.t4 .tile-edge { animation-delay: 0.46s; }

  /* Pads shift a lit bit around the ring, like a boundary-scan chain */
  .pad[class*=" w"] { animation: scan 3.6s linear infinite; }
  .pad.w0 { animation-delay: 0s; }    .pad.w1 { animation-delay: -0.3s; }
  .pad.w2 { animation-delay: -0.6s; } .pad.w3 { animation-delay: -0.9s; }
  .pad.w4 { animation-delay: -1.2s; } .pad.w5 { animation-delay: -1.5s; }
  .pad.w6 { animation-delay: -1.8s; } .pad.w7 { animation-delay: -2.1s; }
  .pad.w8 { animation-delay: -2.4s; } .pad.w9 { animation-delay: -2.7s; }
  .pad.w10 { animation-delay: -3.0s; } .pad.w11 { animation-delay: -3.3s; }

  /* Signal pulses travel along the bond wires */
  .pulse {
    display: inline; fill: none; stroke: var(--pulse); stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 0.12 1.5; stroke-dashoffset: 0.12;
    animation: flow-out 2.6s 1.3s linear infinite;
    filter: drop-shadow(0 0 4px var(--glow));
  }
  .pulse-2 { animation-delay: 2.6s; }
}
@keyframes scan {
  0%, 12% { fill: var(--pad-lit); }
  22%, 100% { fill: var(--pad); }
}
@keyframes flow-out {
  from { stroke-dashoffset: 0.12; }
  to { stroke-dashoffset: -1; }
}

/* Faint layout grid behind page titles on inner pages */
.page-head { position: relative; isolation: isolate; overflow: clip; }
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 75%);
  mask-image: linear-gradient(100deg, transparent 20%, #000 75%);
}

/* Footer: the stacked logo */
.footer-brand .logo-stacked { width: auto; height: 112px; }

/* Section dividers become traces that a signal passes along */
.block { position: relative; }
.block + .block { border-top: 0; }
.block + .block::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line);
}

/* Scroll progress trace */
.progress { display: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress {
      display: block; position: fixed; z-index: 30; left: 0; right: 0;
      top: env(safe-area-inset-top, 0px); height: 2px; pointer-events: none;
      background: linear-gradient(90deg, var(--logo-blue), var(--blue-text));
      transform-origin: 0 50%; transform: scaleX(0);
      animation: grow linear both; animation-timeline: scroll(root block);
    }

    .block { overflow-x: clip; }
    .block + .block::after {
      content: ""; position: absolute; top: -1px; left: 0; height: 3px; width: 180px; pointer-events: none;
      background: linear-gradient(90deg, transparent, var(--blue), transparent);
      transform: translateX(-200px);
      animation: sweep linear both; animation-timeline: view(); animation-range: entry 0% cover 45%;
    }

    /* The process lights up like a pipeline */
    .steps li { position: relative; }
    .steps li::after {
      content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
      background: var(--blue); transform-origin: 0 50%; transform: scaleX(0);
      animation: grow linear both; animation-timeline: view();
    }
    .steps li::before { animation: light linear both; animation-timeline: view(); }
    .steps li:nth-child(1)::after, .steps li:nth-child(1)::before { animation-range: entry 40% cover 30%; }
    .steps li:nth-child(2)::after, .steps li:nth-child(2)::before { animation-range: cover 30% cover 36%; }
    .steps li:nth-child(3)::after, .steps li:nth-child(3)::before { animation-range: cover 36% cover 42%; }
    .steps li:nth-child(4)::after, .steps li:nth-child(4)::before { animation-range: cover 42% cover 48%; }
    .steps li:nth-child(5)::after, .steps li:nth-child(5)::before { animation-range: cover 48% cover 54%; }
  }
}
@keyframes grow { to { transform: scaleX(1); } }
@keyframes sweep { to { transform: translateX(calc(100vw + 40px)); } }
@keyframes light { from { color: var(--ink-2); } to { color: var(--blue-text); } }

/* Diagrams: signals flow when you point at them */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .diagram { transition: border-color 0.2s, box-shadow 0.2s; }
  .diagram:hover { border-color: var(--blue); box-shadow: 0 0 0 4px var(--tint); }
  .diagram:hover .dg-line { stroke-dasharray: 5 4; animation: march 0.9s linear infinite; }
  .diagram:hover .dg-ours, .diagram:hover .dg-cell { filter: drop-shadow(0 0 5px var(--glow)); }
}
@keyframes march { to { stroke-dashoffset: -9; } }

/* =====================================================================
   Site structure: breadcrumbs, hubs, capability and project pages, notes
   ===================================================================== */
.more { font-weight: 620; text-decoration: none; }
.more:hover { text-decoration: underline; }
.more::after, .mega-more::after, .cap-card strong::after {
  content: "\00a0\2192"; content: "\00a0\2192" / "";
}

.crumbs { margin-bottom: 22px; font-size: 0.9rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; row-gap: 4px; }
.crumbs li { color: var(--ink-2); }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin: 0 10px; opacity: 0.6; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--blue-text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }

.eyebrow {
  margin: 0 0 14px; font-size: 0.8rem; font-weight: 660; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue-text);
}
.page-head .actions { margin-bottom: 0; }
.meta { font-size: 0.92rem; color: var(--ink-2); }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.section-head h2 { margin-bottom: 0.4em; }

/* Capability cards */
.cap-cards { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.cap-cards-3 { margin-top: 28px; }
@media (min-width: 820px) { .cap-cards-3 { grid-template-columns: repeat(3, 1fr); } }
.cap-card {
  display: block; height: 100%; padding: 20px 22px; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cap-card strong { display: block; font-size: 1.12rem; font-stretch: 112%; font-weight: 640; margin-bottom: 4px; }
.cap-card strong::after { color: var(--blue-text); }
.cap-card span { display: block; color: var(--ink-2); font-size: 0.97rem; line-height: 1.5; }
.cap-card .cap-offers { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--blue-text); }
.cap-card:hover { border-color: var(--blue); box-shadow: 0 0 0 3px var(--tint); }
.lane .muted { max-width: 52ch; }

/* Programmes */
.programmes { list-style: none; display: grid; margin-top: 28px; border-top: 1px solid var(--line); }
.programmes li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.programmes strong { display: block; font-stretch: 112%; font-size: 1.08rem; }
.programmes span { color: var(--ink-2); font-size: 0.95rem; }
@media (min-width: 760px) {
  .programmes { grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 0; }
  .programmes li { border-bottom: 0; border-top: 2px solid var(--ink); padding-top: 16px; }
}

/* Notes list */
.note-list { list-style: none; margin-top: 24px; border-top: 1px solid var(--line); }
.note-list li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.note-list a { text-decoration: none; }
.note-list a:hover { text-decoration: underline; }
.note-list strong { font-size: 1.2rem; font-stretch: 112%; }
.note-list p { margin: 6px 0; color: var(--ink-2); }

/* Capabilities hub */
.cap-rows { list-style: none; margin-top: 32px; border-top: 2px solid var(--ink); }
.cap-row { display: grid; gap: 12px 48px; padding: 28px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .cap-row { grid-template-columns: 1fr 1.25fr; } }
.cap-row h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem); }
.cap-row h3 a { color: var(--ink); text-decoration-color: var(--blue); }
.cap-row h3 a:hover { color: var(--blue-text); }
.offer-names { list-style: none; margin-bottom: 14px; }
.offer-names li { padding-bottom: 12px; }
.offer-names strong { display: block; }
.offer-names span { color: var(--ink-2); font-size: 0.97rem; }

/* Capability pages */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.chips li {
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px;
  font-size: 0.9rem; font-weight: 560; background: var(--surface);
}

.flow { list-style: none; counter-reset: flow; display: grid; margin-top: 32px; }
.flow li { counter-increment: flow; position: relative; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 18px; padding-bottom: 26px; }
.flow li::before {
  content: counter(flow, decimal-leading-zero);
  grid-row: span 2; position: relative; z-index: 1;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border: 1.5px solid var(--ink); border-radius: 6px; background: var(--surface);
  font-stretch: 125%; font-weight: 700; font-size: 0.95rem; color: var(--blue-text); font-variant-numeric: tabular-nums;
}
.flow li::after { content: ""; position: absolute; left: calc(1.3rem - 1px); top: 2.6rem; bottom: 0; width: 2px; background: var(--line); }
.flow li:last-child { padding-bottom: 0; }
.flow li:last-child::after { display: none; }
.flow h3 { margin: 0.5rem 0 0.3rem; }
.flow p { margin: 0; color: var(--ink-2); font-size: 0.98rem; }
@media (min-width: 1000px) {
  .flow { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 24px; }
  .flow li { display: block; padding-bottom: 0; }
  .flow li::before { margin-bottom: 16px; }
  .flow li::after { left: calc(2.6rem + 8px); right: -16px; top: calc(1.3rem - 1px); bottom: auto; width: auto; height: 2px; }
}

.callout {
  margin-top: 28px; padding: 16px 20px; max-width: 74ch;
  background: var(--tint); border-left: 3px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0;
}

.faq-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 1fr 2fr; gap: 64px; } }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 18px 44px 18px 0; font-weight: 620; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; content: "+" / "";
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--blue-text);
}
.faq details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.faq summary:hover { color: var(--blue-text); }
.faq details p { margin: 0 0 18px; color: var(--ink-2); }

/* Project cards */
.proj-cards { list-style: none; display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 760px) { .proj-cards { grid-template-columns: repeat(2, 1fr); } }
.proj-cards > li { display: flex; }
.proj-card {
  position: relative; flex: 1; display: flex; flex-direction: column; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.proj-card::before {
  content: ""; position: absolute; top: 0; right: 0; width: 88px; height: 88px; pointer-events: none;
  border-top-right-radius: var(--radius);
  background: repeating-linear-gradient(45deg, var(--hatch) 0 2px, transparent 2px 7px);
  -webkit-mask-image: linear-gradient(225deg, #000 20%, transparent 62%);
  mask-image: linear-gradient(225deg, #000 20%, transparent 62%);
}
.proj-card.is-research::before { background: radial-gradient(var(--ink-2) 1.2px, transparent 1.6px) 0 0 / 10px 10px; opacity: 0.6; }
.proj-fn { margin: 0 0 8px; font-size: 0.8rem; font-weight: 660; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue-text); }
.proj-name { font-size: 1.4rem; margin: 0 0 8px; }
.proj-name a { color: var(--ink); text-decoration: none; }
.proj-name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.proj-name a:focus-visible { outline: none; }
.proj-card:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.proj-card:hover { border-color: var(--blue); box-shadow: 0 0 0 3px var(--tint); }
.proj-card:hover .proj-name a { color: var(--blue-text); }
.proj-lead { flex: 1; margin: 0 0 18px; color: var(--ink-2); }
.proj-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.92rem;
}
.proj-status { font-weight: 620; }
.proj-status .glyph { margin: 0 8px 0 0; }
.proj-proc { color: var(--ink-2); }

/* Projects table */
.ptable { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 0.97rem; }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); }
.ptable thead th {
  font-size: 0.78rem; font-weight: 640; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 2px solid var(--ink);
}
.ptable tbody th { font-weight: 640; }
.ptable-desc { display: block; margin-top: 4px; max-width: 46ch; font-weight: 400; font-size: 0.92rem; color: var(--ink-2); }
.ptable .state { font-weight: 600; white-space: nowrap; }
.ptable + .note { margin-top: 18px; }
@media (max-width: 859px) {
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ptable, .ptable tbody, .ptable tr, .ptable th, .ptable td { display: block; }
  .ptable tbody { border-top: 2px solid var(--ink); }
  .ptable tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .ptable th, .ptable td { border: 0; padding: 3px 0; }
  .ptable tbody th { font-size: 1.08rem; margin-bottom: 8px; }
  .ptable td { display: grid; grid-template-columns: 7rem 1fr; gap: 12px; }
  .ptable td::before { content: attr(data-label); color: var(--ink-2); font-size: 0.9rem; }
}

/* Project pages */
.project { padding-top: clamp(28px, 4vw, 48px); }
.project .crumbs { margin-bottom: clamp(24px, 3.5vw, 40px); }
.project h1 { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.8rem); margin-bottom: 0.3em; }
.facts a { font-weight: 560; }

.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-block: 28px; }
.pager a { color: var(--ink); text-decoration: none; font-weight: 640; }
.pager a:hover { color: var(--blue-text); }
.pager span { display: block; font-size: 0.85rem; font-weight: 400; color: var(--ink-2); }
.pager-next { text-align: right; }
.pager .pager-all { color: var(--blue-text); font-size: 0.95rem; }
@media (max-width: 599px) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager-all { grid-column: 1 / -1; grid-row: 2; text-align: center; }
}

/* Notes */
.note h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); max-width: 24ch; }
.note .page-head .meta { margin: 18px 0 0; }
.prose > :first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5em; }
.prose ol { padding-left: 1.4em; margin-bottom: 1em; }
.prose sub { font-size: 0.72em; line-height: 0; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em;
  background: var(--paper-2); padding: 0.1em 0.35em; border-radius: 4px;
}
.prose pre { overflow-x: auto; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.9rem; line-height: 1.5; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { margin: 1.4em 0; padding-left: 18px; border-left: 3px solid var(--blue); color: var(--ink-2); }
.prose img { border: 1px solid var(--line); border-radius: var(--radius); }
.prose .callout { margin-top: 2em; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Capability flows light up step by step as they scroll into view */
    .flow li::before { animation: light linear both; animation-timeline: view(); animation-range: entry 70% cover 40%; }
  }
}

/* Proof, prices and contact */
.checks { list-style: none; display: grid; margin-top: 28px; border-top: 1px solid var(--line); }
.checks li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.checks strong { display: block; font-stretch: 112%; font-size: 1.08rem; margin-bottom: 4px; }
.checks span { color: var(--ink-2); font-size: 0.97rem; }
@media (min-width: 760px) {
  .checks { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
}
@media (min-width: 1080px) {
  .checks { grid-template-columns: repeat(4, 1fr); column-gap: 24px; border-top: 0; }
  .checks li { border-bottom: 0; border-top: 2px solid var(--ink); padding-top: 16px; }
}

.cap-card .cap-from { margin-top: 8px; font-size: 0.92rem; font-weight: 640; color: var(--ink); }
.offer .from { margin: 6px 0 0; color: var(--ink-2); font-size: 0.97rem; }
.offer .from strong { color: var(--ink); font-size: 1.05rem; }
.offer-names .from { display: block; font-weight: 620; font-size: 0.95rem; color: var(--ink); margin: 2px 0 2px; }

.btn-mail { font-stretch: 100%; letter-spacing: 0; }
.footer-contact { margin: 18px 0 14px; }
.footer-contact a { display: inline-block; font-weight: 640; font-size: 1.05rem; color: var(--ink); }
.footer-contact a:hover { color: var(--blue-text); }
.footer-contact span { display: block; margin-top: 4px; font-size: 0.9rem; }
.proj-note { margin-top: 20px; }

/* =====================================================================
   v3: the whole site on the chip canvas
   Dark canvas for every page opening, the process band, the closing band
   and the footer; graph paper for reading sections. Motion is tied to
   scrolling where the browser supports it, and is off for reduced motion.
   ===================================================================== */
.canvas { --halo2: rgba(46, 139, 255, 0.16); }

/* Labels: condensed, sentence case */
.mega-title, .nav-mobile .m-title, .eyebrow, .proj-fn, .ptable thead th {
  text-transform: none; letter-spacing: 0; font-stretch: 75%; font-weight: 640; font-size: 0.92rem;
}
.eyebrow { color: var(--blue-text); }
.more::after, .mega-more::after, .cap-card strong::after { content: none; }
.more { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }

/* Hero: light follows the pointer, the die tilts toward it */
.hero.canvas {
  background:
    radial-gradient(560px circle at var(--mx, 74%) var(--my, 56%), var(--halo2), transparent 70%),
    var(--paper);
}
.die-stage { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.35s ease-out; }
.tile.f-hatch .tile-fill { fill: url(#hatch); }
.tile.f-hatch2 .tile-fill { fill: url(#hatch2); }
.tile.f-xgrid .tile-fill { fill: url(#xgrid); }
.tile.f-dots .tile-fill { fill: url(#dots); }
.xgrid-line { fill: none; stroke: var(--hatch); stroke-width: 1.1; }
.dot { fill: var(--hatch); opacity: 1; }

/* Page openings */
.page-head.canvas { padding-block: clamp(36px, 6vw, 84px) clamp(40px, 6vw, 84px); }
.page-head.canvas::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -10%; top: -20%; width: 70%; height: 140%;
  background: radial-gradient(closest-side, var(--halo), transparent);
}
.head-grid { display: grid; gap: 28px; align-items: center; }
.head-art { width: 100%; max-width: 360px; }
@media (min-width: 960px) {
  .has-art .head-grid { grid-template-columns: 7fr 5fr; gap: 56px; }
  .head-art { max-width: 470px; justify-self: end; }
}
.page-head .lead { max-width: 58ch; }

/* Graph paper */
.paper-grid {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

/* Capability schematics */
.ill { display: block; width: 100%; height: auto; overflow: visible; }
.ill-base { fill: none; stroke: var(--ink-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ill-sig { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ill-box { fill: var(--surface); stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; }
.ill-grid { fill: none; stroke: var(--line); stroke-width: 1.5; }
.ill-cursor { fill: none; stroke: var(--blue-text); stroke-width: 1.2; stroke-dasharray: 3 4; }
.canvas .ill-sig { filter: drop-shadow(0 0 5px var(--glow)); }

/* Capabilities as a floorplan: blocks that share their walls */
.floorplan {
  list-style: none; display: grid; gap: 1px; margin-top: 28px;
  background: var(--ink); border: 1px solid var(--ink);
}
@media (min-width: 760px) { .floorplan { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .floorplan-3 { grid-template-columns: repeat(3, 1fr); } }
.cell { background: var(--surface); view-timeline: --cell block; }
.cell a {
  position: relative; display: grid; height: 100%; color: var(--ink); text-decoration: none;
  transition: background-color 0.15s;
}
.cell-art {
  display: block; padding: 26px 28px 18px;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 12px 12px;
  border-bottom: 1px solid var(--line);
}
.cell-art .ill { max-width: 320px; margin-inline: auto; }
.cell-body { display: block; padding: 20px 28px 26px; }
.cell-body strong { display: block; font-size: 1.22rem; font-stretch: 115%; font-weight: 650; line-height: 1.25; margin-bottom: 6px; }
.cell-text { display: block; color: var(--ink-2); font-size: 0.98rem; }
.cell-from { display: block; margin-top: 12px; font-weight: 640; font-size: 0.95rem; }
/* Selection handles, as on a layout canvas */
.cell a::after {
  content: ""; position: absolute; inset: 6px; pointer-events: none; opacity: 0; transition: opacity 0.15s;
  background:
    linear-gradient(var(--blue), var(--blue)) left top / 8px 8px no-repeat,
    linear-gradient(var(--blue), var(--blue)) right top / 8px 8px no-repeat,
    linear-gradient(var(--blue), var(--blue)) left bottom / 8px 8px no-repeat,
    linear-gradient(var(--blue), var(--blue)) right bottom / 8px 8px no-repeat;
}
.cell a:hover { background-color: var(--tint); }
.cell a:hover::after, .cell a:focus-visible::after { opacity: 1; }
.cell a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 0; }
.naira-note { margin-top: 16px; }

/* Capabilities hub rows with their schematic */
.cap-row-art { display: none; }
@media (min-width: 900px) {
  .cap-row { grid-template-columns: 180px 1fr 1.25fr; }
  .cap-row-art { display: block; padding-top: 6px; }
}

/* The process as one routed net */
.route-band { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(64px, 9vw, 116px); }
.route-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 60%, #000 35%, transparent 90%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 60%, #000 35%, transparent 90%);
}
.route-band .lead { max-width: 54ch; }
.route { list-style: none; counter-reset: step; display: grid; gap: 30px; margin-top: 44px; view-timeline: --route block; }
.route li { counter-increment: step; position: relative; display: grid; grid-template-columns: 46px 1fr; column-gap: 18px; }
.route li::before {
  content: counter(step);
  grid-row: span 2; z-index: 1;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--blue); border-radius: 4px; color: var(--ink);
  box-shadow: 0 0 0 4px var(--tint), 0 0 18px var(--glow);
  font-stretch: 125%; font-weight: 700; font-variant-numeric: tabular-nums;
}
.route li:not(:last-child)::after {
  content: ""; position: absolute; left: 22px; top: 46px; width: 2px; height: calc(100% - 46px + 30px);
  background: linear-gradient(180deg, var(--blue), var(--pulse)) no-repeat 0 0 / 100% 100%, var(--line);
}
.route h3 { margin: 10px 0 4px; }
.route p { margin: 0; color: var(--ink-2); font-size: 0.98rem; }
@media (min-width: 1000px) {
  .route { grid-template-columns: repeat(5, 1fr); gap: 28px; }
  .route li { display: block; }
  .route li::before { margin-bottom: 18px; }
  .route li:not(:last-child)::after {
    left: 46px; top: 22px; width: calc(100% - 46px + 28px); height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--pulse)) no-repeat 0 0 / 100% 100%, var(--line);
  }
}

/* Studio characteristics, set like a datasheet table */
.spec-grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .spec-grid { grid-template-columns: 1fr 1.7fr; gap: 64px; align-items: start; } }
.datasheet { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font-variant-numeric: tabular-nums; }
.datasheet th, .datasheet td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
.datasheet thead th { font-stretch: 75%; font-weight: 640; color: var(--ink-2); font-size: 0.92rem; border-bottom: 1px solid var(--ink); }
.datasheet tbody th { font-weight: 560; }
.datasheet .ds-val { font-weight: 660; font-stretch: 112%; white-space: nowrap; }
.datasheet td:last-child { color: var(--ink-2); font-size: 0.95rem; }
.datasheet tr:last-child th, .datasheet tr:last-child td { border-bottom: 0; }
@media (max-width: 699px) {
  .datasheet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .datasheet, .datasheet tbody, .datasheet tr, .datasheet th, .datasheet td { display: block; }
  .datasheet tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .datasheet tr:last-child { border-bottom: 0; }
  .datasheet th, .datasheet td { padding: 0; border: 0; }
  .datasheet .ds-val { margin: 2px 0; color: var(--blue-text); }
}

/* Closing band with the wafer */
.cta.canvas { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(64px, 9vw, 120px); view-timeline: --cta block; }
.cta.canvas::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; right: -5%; top: 0; width: 60%; height: 100%;
  background: radial-gradient(closest-side, var(--halo), transparent);
}
.cta-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .cta-grid { grid-template-columns: 1.15fr 0.85fr; gap: 56px; } }
.cta-art { max-width: 420px; width: 100%; justify-self: center; }
.cta h2 { max-width: 20ch; }
.wafer { display: block; width: 100%; height: auto; }
.wf-disc { fill: var(--die); stroke: var(--line); stroke-width: 2; }
.wf-die { fill: var(--pad); opacity: 0.6; }
.wf-pass { fill: var(--blue); }
.wf-fail { fill: var(--ink-2); opacity: 0.55; }
.wf-sheen { fill: url(#wf-g); pointer-events: none; }
.wf-s0 { stop-color: #7DB8FF; stop-opacity: 0; }
.wf-s1 { stop-color: #8FB8FF; stop-opacity: 0.16; }
.wf-s2 { stop-color: #C3A6FF; stop-opacity: 0.12; }
.wf-s3 { stop-color: #7FE0D0; stop-opacity: 0.10; }
.wf-notch { fill: var(--paper); stroke: var(--line); stroke-width: 2; }
.wf-probe { fill: none; stroke: var(--pulse); stroke-width: 2.5; }
.wf-probe-y { display: none; }

/* Contact pinout */
.pinout { display: block; width: 100%; height: auto; }
.po-body { fill: var(--die); stroke: var(--ink); stroke-width: 2; }
.po-notch { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.po-dot { fill: var(--ink-2); }
.po-name { font-size: 15px; font-weight: 700; font-stretch: 112%; letter-spacing: 0.06em; fill: var(--ink); }
.po-sub { font-size: 13px; fill: var(--ink-2); }
.po-pin { fill: var(--pad); stroke: var(--ink-2); stroke-width: 1.2; }
.po-num { font-size: 12px; fill: var(--ink-2); }
.po-label { font-size: 15px; font-weight: 600; fill: var(--ink); }
.po-link .po-label { fill: var(--blue-text); text-decoration: underline; }
.po-link .po-pin { fill: var(--hatch); stroke: var(--blue); }
.po-link:hover .po-pin, .po-link:focus-visible .po-pin { fill: var(--blue); }
.po-link:focus { outline: none; }
.po-link:focus-visible .po-label { fill: var(--ink); }
.po-link:focus-visible .po-pin { stroke: var(--focus); stroke-width: 3; }
.po-static .po-label { font-weight: 500; fill: var(--ink-2); }

/* Footer on the canvas */
.site-footer.canvas { border-top: 1px solid var(--line); }

/* ---------- Scroll-linked motion ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The die drifts back as the hero scrolls away */
    .die { animation: die-away linear both; animation-timeline: view(); animation-range: exit 5% exit 95%; }

    /* Schematics draw themselves as each block scrolls in */
    .cell .ill-sig, .cell .ill-base, .cell .ill-box {
      stroke-dasharray: 1; stroke-dashoffset: 1;
      animation: draw linear both; animation-timeline: --cell; animation-range: entry 0% cover 28%;
    }
    .cell .ill-box { fill-opacity: 0; animation-name: draw-box; }

    /* The process net: each pad lights, then the trace to the next one */
    .route li::before { animation: pad-on linear both; animation-timeline: --route; }
    .route li:not(:last-child)::after { animation: trace-y linear both; animation-timeline: --route; }
    .route li:nth-child(1)::before { animation-range: entry 60% cover 30%; }
    .route li:nth-child(1)::after { animation-range: cover 30% cover 37%; }
    .route li:nth-child(2)::before { animation-range: cover 36% cover 38%; }
    .route li:nth-child(2)::after { animation-range: cover 38% cover 45%; }
    .route li:nth-child(3)::before { animation-range: cover 44% cover 46%; }
    .route li:nth-child(3)::after { animation-range: cover 46% cover 53%; }
    .route li:nth-child(4)::before { animation-range: cover 52% cover 54%; }
    .route li:nth-child(4)::after { animation-range: cover 54% cover 61%; }
    .route li:nth-child(5)::before { animation-range: cover 60% cover 62%; }

    /* The wafer probe steps die to die; tested rows light up behind it */
    .wf-probe-y { display: inline; animation: probe-y steps(14, jump-none) both; animation-timeline: --cta; animation-range: cover 10% cover 60%; }
    .wf-probe-x { animation: probe-x steps(14, jump-none) both 14; animation-timeline: --cta; animation-range: cover 10% cover 60%; }
    .wf-row { animation: tested steps(1, jump-end) both; animation-timeline: --cta; }
    .wf-r0 { animation-range: cover 10% cover 13.57%; }
    .wf-r1 { animation-range: cover 10% cover 17.14%; }
    .wf-r2 { animation-range: cover 10% cover 20.71%; }
    .wf-r3 { animation-range: cover 10% cover 24.29%; }
    .wf-r4 { animation-range: cover 10% cover 27.86%; }
    .wf-r5 { animation-range: cover 10% cover 31.43%; }
    .wf-r6 { animation-range: cover 10% cover 35.00%; }
    .wf-r7 { animation-range: cover 10% cover 38.57%; }
    .wf-r8 { animation-range: cover 10% cover 42.14%; }
    .wf-r9 { animation-range: cover 10% cover 45.71%; }
    .wf-r10 { animation-range: cover 10% cover 49.29%; }
    .wf-r11 { animation-range: cover 10% cover 52.86%; }
    .wf-r12 { animation-range: cover 10% cover 56.43%; }
    .wf-r13 { animation-range: cover 10% cover 60.00%; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
    .route li:not(:last-child)::after { animation-name: trace-x; }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ill-hero .ill-sig, .ill-hero .ill-base, .ill-hero .ill-box {
    stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s 0.15s cubic-bezier(.3, 0, .2, 1) forwards;
  }
  .ill-hero .ill-sig { animation-delay: 0.6s; }
  @media (hover: hover) {
    .cell a:hover .ill-sig { stroke-dasharray: 0.035 0.02; animation: signal 1.2s linear infinite; }
  }
}
@keyframes die-away { to { transform: translateY(-5%) scale(0.95); opacity: 0.45; } }
@keyframes draw-box { from { stroke-dashoffset: 1; fill-opacity: 0; } 70% { fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes pad-on {
  from { border-color: var(--line); color: var(--ink-2); box-shadow: none; }
  to { border-color: var(--blue); color: var(--ink); box-shadow: 0 0 0 4px var(--tint), 0 0 18px var(--glow); }
}
@keyframes trace-y { from { background-size: 100% 0%, auto; } to { background-size: 100% 100%, auto; } }
@keyframes trace-x { from { background-size: 0% 100%, auto; } to { background-size: 100% 100%, auto; } }
@keyframes probe-y { from { transform: translateY(0); } to { transform: translateY(325px); } }
@keyframes probe-x { from { transform: translateX(0); } to { transform: translateX(325px); } }
@keyframes tested { from { opacity: 0; } to { opacity: 1; } }
@keyframes signal { to { stroke-dashoffset: -0.055; } }

/* ---------- v4: paid scoping call, portfolio link ---------- */
.hero-kicker { margin-bottom: 16px; max-width: 60ch; }
.hero .note, .cta .note { max-width: 46ch; }
.founder-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; }
.footer-call { margin-top: 10px; font-size: 0.85rem; }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr 1.25fr 0.8fr 0.8fr; } }
.soon { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 0.7rem; font-weight: 640; vertical-align: middle; color: var(--blue-text); border: 1px solid currentColor; }
.soon-grid { list-style: none; display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 760px) { .soon-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.soon-card { padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.soon-card h3 { margin: 0 0 8px; }
.soon-card p:last-child { margin: 0; color: var(--ink-2); }

/* =====================================================================
   v5: renders, prices, founder photo, intake form, mobile menu
   ===================================================================== */
:root { --field: #8C98AB; --danger: #C42B3B; --ease: cubic-bezier(.2, .7, .2, 1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --field: #46546C; --danger: #FF7A85; } }
:root[data-theme="dark"] { --field: #46546C; --danger: #FF7A85; }
.canvas { --field: #46546C; --danger: #FF7A85; }

/* Buttons: one shape, two weights, the same states everywhere */
.btn {
  gap: 8px; cursor: pointer; font: inherit; font-weight: 620; font-stretch: 108%;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.2s, transform 0.15s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 999px; }
.btn-ghost:hover { box-shadow: none; }
.canvas .btn-ghost { border-color: rgba(231, 236, 244, 0.55); }
.canvas .btn-ghost:hover { border-color: var(--ink); }
button.btn { -webkit-appearance: none; appearance: none; }

/* Hero */
.hero { padding-block: clamp(36px, 6vw, 80px) clamp(48px, 7vw, 88px); }
.hero h1 { font-size: clamp(2.3rem, 1.25rem + 3vw, 3.85rem); max-width: 17ch; margin-bottom: 0.45em; }
.hero-kicker { margin: 0 0 18px; font-size: 0.95rem; font-weight: 560; color: var(--blue-text); }
.hero-grid { align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1fr 1.08fr; gap: 56px; } .hero-copy { padding-top: 0; } }
.hero .lead { max-width: 50ch; }

/* The layout viewer around the hero render */
.viewer { margin: 0; }
.viewer-frame {
  border: 1px solid #22314A; border-radius: 14px; overflow: hidden; background: #04070E;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(61, 147, 255, 0.06), 0 0 60px -10px var(--halo);
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.35s ease-out;
}
.viewer-bar {
  display: flex; align-items: center; gap: 14px; padding: 9px 14px;
  background: #0A1120; border-bottom: 1px solid #1B273B; font-size: 0.78rem; color: #9DAAC0;
}
.viewer-dots { display: flex; gap: 6px; flex: none; }
.viewer-dots i { width: 9px; height: 9px; border-radius: 50%; background: #26334A; }
.layers { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.layers li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sw { width: 10px; height: 10px; border-radius: 2px; border: 1px solid; }
.sw-diff { background: rgba(47, 191, 113, 0.35); border-color: #2FBF71; }
.sw-poly { background: rgba(240, 82, 90, 0.35); border-color: #F0525A; }
.sw-m1 { background: rgba(61, 147, 255, 0.35); border-color: #3D93FF; }
.sw-m2 { background: rgba(165, 133, 255, 0.35); border-color: #A585FF; }
.sw-m3 { background: rgba(37, 199, 207, 0.35); border-color: #25C7CF; }
.sw-pad { background: rgba(227, 179, 76, 0.35); border-color: #E3B34C; }
@media (max-width: 520px) { .layers li:nth-child(n+5) { display: none; } }
.viewer-stage { position: relative; overflow: hidden; aspect-ratio: 5 / 4; }
.viewer-stage img { width: 100%; height: 100%; object-fit: cover; transform-origin: 40% 45%; }
.scan { display: none; }
.viewer figcaption, .board-shot figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .viewer-stage img { animation: drift 26s ease-in-out infinite alternate; }
  .scan {
    display: block; position: absolute; left: 0; right: 0; top: 0; height: 22%; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(125, 184, 255, 0.10) 85%, rgba(170, 210, 255, 0.55) 100%);
    border-bottom: 1px solid rgba(170, 210, 255, 0.5);
    animation: scan-down 7s linear infinite; mix-blend-mode: screen;
  }
}
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
@keyframes scan-down { from { transform: translateY(-100%); } to { transform: translateY(480%); } }

/* Who we work with */
.audience-h { margin: clamp(48px, 6vw, 72px) 0 0; font-size: 1rem; font-stretch: 100%; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.audience { list-style: none; display: grid; gap: 0; margin-top: 14px; border-top: 1px solid var(--line); }
.audience li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.audience strong { display: block; font-size: 1.12rem; font-stretch: 112%; margin-bottom: 4px; }
.audience span { color: var(--ink-2); font-size: 0.97rem; }
@media (min-width: 860px) {
  .audience { grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 0; }
  .audience li { border-bottom: 0; border-top: 2px solid var(--blue); padding-top: 18px; }
}

/* Capability blocks with renders */
.cell-art { padding: 0; overflow: hidden; background: #070C17; border-bottom: 1px solid var(--line); }
.cell-art img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; transition: transform 0.6s var(--ease), filter 0.3s; }
.cell a:hover .cell-art img, .cell a:focus-visible .cell-art img { transform: scale(1.06); filter: saturate(1.15) brightness(1.08); }
.cell-from { display: block; margin-top: 14px; font-weight: 640; font-size: 0.95rem; color: var(--ink); }
.cell-from span { font-weight: 450; color: var(--ink-2); }
.cell-body strong { transition: color 0.15s; }
.cell a:hover .cell-body strong { color: var(--blue-text); }

/* What you get, with the board render */
.handoff-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .handoff-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.board-shot { margin: 0; }
.board-shot img { width: 100%; border-radius: 14px; border: 1px solid var(--line); background: #050A14; box-shadow: 0 30px 50px -36px rgba(4, 10, 20, 0.7); }
.handoff { margin: 24px 0 0; }
.handoff div { position: relative; padding: 14px 0 14px 22px; border-top: 1px solid var(--line); }
.handoff div::before { content: ""; position: absolute; left: 0; top: 22px; width: 9px; height: 9px; background: var(--blue); border-radius: 2px; }
.handoff dt { font-weight: 640; font-stretch: 110%; }
.handoff dd { margin: 2px 0 0; color: var(--ink-2); }

/* Prices */
.price-intro .note { max-width: 40ch; }
.table-scroll { overflow-x: auto; }
.prices th a { color: var(--ink); text-decoration-color: var(--line); }
.prices th a:hover { color: var(--blue-text); text-decoration-color: currentColor; }
.cap-of { display: block; margin-top: 2px; font-size: 0.86rem; font-weight: 400; color: var(--ink-2); }
.prices td { white-space: nowrap; }
@media (max-width: 699px) {
  .prices td { display: grid; grid-template-columns: 7.5rem 1fr; gap: 8px; margin-top: 4px; white-space: normal; }
  .prices td::before { content: attr(data-label); color: var(--ink-2); font-size: 0.88rem; font-weight: 400; }
  .prices .ds-val { color: var(--ink); }
}

/* Founder */
.founder-band { background: var(--paper-2); }
.founder-grid { align-items: start; }
@media (min-width: 760px) { .founder-grid { grid-template-columns: minmax(200px, 260px) 1fr; gap: clamp(32px, 5vw, 64px); } }
.portrait {
  width: 100%; max-width: 260px; height: auto; aspect-ratio: 51 / 64; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 24px 40px -28px rgba(4, 10, 20, 0.6);
}
.founder-grid .portrait { justify-self: center; align-self: center; }
.founder-grid .lead { max-width: 56ch; }
.creds { list-style: none; margin: 20px 0 22px; display: grid; gap: 10px; }
.creds li { position: relative; padding-left: 22px; max-width: 62ch; }
.creds li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 2px; background: var(--blue); }

/* About: the studio at a glance */
.facts-list { margin: 0; border-top: 2px solid var(--ink); }
.facts-list div { display: grid; gap: 4px 24px; padding: 13px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .facts-list div { grid-template-columns: 9rem 1fr; } }
.facts-list dt { color: var(--ink-2); }
.facts-list dd { margin: 0; font-weight: 520; }

/* Inner page openings with a render */
.head-img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.8), 0 0 50px -12px var(--halo); }
.cap-row-art img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.offer .scale { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 12px 0 0; font-size: 0.95rem; }
.offer .scale strong { display: block; font-size: 0.85rem; font-weight: 560; color: var(--ink-2); }

/* Footer: training and careers stay quiet */
.footer-quiet { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.88rem; }
.footer-quiet a { color: var(--ink-2); }

/* Mobile menu */
.nav-mobile summary { gap: 10px; padding: 8px 16px 8px 14px; transition: background-color 0.15s, color 0.15s; }
.burger { display: grid; gap: 4px; width: 18px; }
.burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s var(--ease), opacity 0.2s; }
.nav-mobile[open] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-mobile[open] .burger i:nth-child(2) { opacity: 0; }
.nav-mobile[open] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.m-close, .nav-mobile[open] .m-open { display: none; }
.nav-mobile[open] .m-close { display: inline; }
.nav-mobile nav { padding: 16px 16px 28px; box-shadow: 0 30px 40px -24px rgba(0, 0, 0, 0.7); }
@media (min-width: 640px) { .nav-mobile nav { padding-inline: 32px; } }
.nav-mobile nav a:not(.btn) { min-height: 48px; display: flex; align-items: center; }
.nav-mobile nav > .btn:first-child { margin: 4px 0 8px; }
.nav-mobile nav .btn { border-bottom-width: 2px; }
.nav-mobile nav .btn-ghost { color: var(--ink); }
.m-quiet { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 14px; }
.nav-mobile .m-quiet a { min-height: 44px; border-bottom: 0; font-size: 0.95rem; font-weight: 450; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .nav-mobile[open] nav { animation: menu-in 0.2s var(--ease); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }

/* Intake form */
.intake-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 980px) { .intake-grid { grid-template-columns: 1.5fr 1fr; gap: 48px; } }
.intake {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(20px, 4vw, 36px); scroll-margin-top: 16px;
}
.intake h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); }
.field-row { display: grid; gap: 0 20px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { margin-top: 18px; }
.field label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.98rem; }
.opt { font-weight: 400; font-size: 0.88rem; color: var(--ink-2); margin-left: 4px; }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 48px; padding: 11px 14px;
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--field); border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-2); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--tint); outline: none; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--danger); }
.field ::placeholder { color: var(--ink-2); opacity: 0.8; }
.hint { margin: 6px 0 0; font-size: 0.88rem; color: var(--ink-2); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.form-foot .hint { margin: 0; max-width: 36ch; }
.btn[aria-busy="true"] { opacity: 0.75; cursor: progress; }
.contact-side { display: grid; gap: 16px; }
.contact-card { border-radius: 14px; padding: 24px; }
.contact-card h2 { font-size: 1.25rem; }
.contact-card .btn { margin-top: 4px; }
.contact-quiet { background: transparent; }
.contact-quiet .plain-list { font-size: 0.95rem; color: var(--ink-2); }
.hero h1 { max-width: 22ch; font-size: clamp(2.3rem, 1.1rem + 3.6vw, 4.4rem); margin-bottom: clamp(24px, 3.5vw, 44px); }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; } .hero-copy { padding-top: 12px; } }
.price-grid { display: grid; gap: 20px 64px; }
@media (min-width: 960px) { .price-grid { grid-template-columns: 1fr 1fr; } .price-grid .table-scroll { grid-column: 1 / -1; } .price-intro .lead { margin: 0; } }
.price-intro { display: contents; }
.price-intro h2 { grid-column: 1 / -1; margin-bottom: 0; }
.price-intro .note { max-width: 52ch; margin: 0; align-self: end; }
.prices { margin-top: 12px; }

/* =====================================================================
   v6: light, depth and texture instead of flat grids
   ===================================================================== */
:root { --paper: #F1F5FA; --surface: #FBFCFE; --soft-top: #E6EEF9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --soft-top: #0D1525; } }
:root[data-theme="dark"] { --soft-top: #0D1525; }
.canvas { --soft-top: #0D1525; }

/* Film grain over everything, very faint */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url("/assets/img/grain.png"); opacity: 0.05; mix-blend-mode: overlay;
}

/* Hero: deep gradient, soft glows and light rays */
.hero.canvas {
  background:
    radial-gradient(560px circle at var(--mx, 72%) var(--my, 46%), rgba(61, 147, 255, 0.14), transparent 70%),
    radial-gradient(1100px 720px at 78% 40%, rgba(46, 139, 255, 0.22), transparent 62%),
    radial-gradient(800px 600px at -5% 110%, rgba(37, 199, 207, 0.08), transparent 60%),
    linear-gradient(180deg, #060B16 0%, #08101F 55%, #050912 100%);
}
.hero.canvas::before, .page-head.canvas::before {
  background: conic-gradient(from 198deg at 84% -14%,
    transparent 0deg, rgba(125, 184, 255, 0.10) 5deg, transparent 12deg,
    transparent 18deg, rgba(125, 184, 255, 0.07) 23deg, transparent 30deg,
    transparent 37deg, rgba(125, 184, 255, 0.05) 41deg, transparent 49deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
  transform-origin: 84% -14%;
}
.page-head.canvas {
  background:
    radial-gradient(900px 520px at 85% 0%, rgba(46, 139, 255, 0.18), transparent 62%),
    linear-gradient(180deg, #060B16, #08101F);
}
.cta.canvas { background: radial-gradient(900px 600px at 90% 50%, rgba(46, 139, 255, 0.16), transparent 60%), linear-gradient(180deg, #070D1A, #050912); }
.site-footer.canvas { background: linear-gradient(180deg, #050912, #04070E); }
.route-band.canvas { background: radial-gradient(1000px 500px at 50% 0%, rgba(46, 139, 255, 0.12), transparent 65%), #060B16; }
@media (prefers-reduced-motion: no-preference) {
  .hero.canvas::before, .page-head.canvas::before { animation: rays 16s ease-in-out infinite alternate; }
}
@keyframes rays { from { transform: rotate(-2.5deg); opacity: 0.75; } to { transform: rotate(2.5deg); opacity: 1; } }

/* Light sections: a cool off-white that fades in from a faint blue */
.block-soft { background: linear-gradient(180deg, var(--soft-top), var(--paper) 70%); }

/* Hero render: tilted, lit, with a glow underneath */
.viewer { position: relative; }
.viewer::before {
  content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: 2%; height: 34%;
  background: radial-gradient(closest-side, rgba(46, 139, 255, 0.5), transparent); filter: blur(34px); pointer-events: none;
}
.viewer-frame {
  position: relative;
  box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(125, 184, 255, 0.10), 0 0 90px -16px rgba(46, 139, 255, 0.4);
}
.viewer-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.07), transparent 32%);
}
@media (min-width: 960px) {
  .viewer-frame {
    transform: perspective(1600px) rotateX(calc(4deg + var(--rx, 0deg))) rotateY(calc(-9deg + var(--ry, 0deg)));
    transform-origin: 30% 50%;
  }
}
.scan { display: none !important; }
.stage-inner { position: absolute; inset: 0; transform-origin: 45% 45%; }
.viewer-stage img { animation: none; }
.sweep { position: absolute; inset: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .stage-inner { animation: drift-soft 24s ease-in-out infinite alternate; }
  .sweep {
    background: linear-gradient(105deg, transparent 42%, rgba(170, 210, 255, 0.13) 50%, transparent 58%);
    background-size: 260% 100%; animation: sweep-x 9s ease-in-out infinite;
  }
}
@keyframes drift-soft { from { transform: scale(1); } to { transform: scale(1.05) translate(-1%, -0.6%); } }
@keyframes sweep-x { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }

/* Engineer's markup on the hero render */
.callout { display: none; }
@media (min-width: 960px) {
  .callout {
    display: block; position: absolute; padding: 3px 9px 3px 10px; border-radius: 6px;
    font-size: 0.72rem; font-weight: 600; line-height: 1.4; white-space: nowrap; color: #E7ECF4;
    background: rgba(5, 10, 20, 0.84); border: 1px solid rgba(125, 184, 255, 0.35);
  }
  .callout::before {
    content: ""; position: absolute; left: -15px; top: 50%; width: 8px; height: 8px; border-radius: 50%;
    background: #7DB8FF; box-shadow: 0 0 0 3px rgba(125, 184, 255, 0.22); transform: translateY(-50%);
  }
  .c-analog { left: 24%; top: 43%; }
  .c-digital { left: 60%; top: 41%; }
  .c-sram { left: 24%; top: 69%; }
}
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .callout { opacity: 0; animation: appear 0.5s ease-out forwards; }
  .c-analog { animation-delay: 0.9s; } .c-digital { animation-delay: 1.15s; } .c-sram { animation-delay: 1.4s; }
}

.hero .lead-2 { color: var(--ink); font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); }

/* Board and page-head renders: tilted towards the light */
.board-shot img {
  transform: perspective(1500px) rotateX(8deg) rotateY(-7deg) rotateZ(0.6deg);
  box-shadow: 0 44px 60px -34px rgba(4, 10, 20, 0.65), 0 0 70px -24px rgba(46, 139, 255, 0.45);
  transition: transform 0.7s var(--ease);
}
.board-shot:hover img { transform: perspective(1500px) rotateX(3deg) rotateY(-2deg); }
@media (min-width: 960px) {
  .head-img { transform: perspective(1400px) rotateY(-8deg) rotateX(3deg); }
}

/* Capability cards: separate cards that lift on hover */
.floorplan { gap: 20px; background: none; border: 0; }
.cell {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.2s;
}
.cell a::after { content: none; }
.cell a:hover { background-color: transparent; }
.cell:hover, .cell:focus-within {
  transform: translateY(-4px); border-color: var(--blue);
  box-shadow: 0 26px 40px -26px rgba(4, 10, 20, 0.5), 0 0 44px -14px rgba(46, 139, 255, 0.5);
}
.cell a:focus-visible { outline: none; }
.cell:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.cell:has(a:focus:not(:focus-visible)) { outline: none; }

/* Buttons: a touch of glow on the primary one */
.btn:not(.btn-ghost):hover { box-shadow: 0 10px 26px -10px rgba(46, 139, 255, 0.75); }
.btn:hover { transform: translateY(-1px) scale(1.015); }

/* Reveal on scroll (site.js adds .js-reveal; nothing is hidden without it) */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal]:not(.in) { opacity: 0; translate: 0 18px; }
  .js-reveal [data-reveal] { transition: opacity 0.7s var(--ease), translate 0.7s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.2s; }
  .js-reveal .cell:nth-child(2), .js-reveal .audience li:nth-child(2), .js-reveal .handoff div:nth-child(2), .js-reveal .log-item:nth-child(2) { transition-delay: 0.08s, 0.08s, 0s, 0s, 0s; }
  .js-reveal .cell:nth-child(3), .js-reveal .audience li:nth-child(3), .js-reveal .handoff div:nth-child(3), .js-reveal .log-item:nth-child(3) { transition-delay: 0.16s, 0.16s, 0s, 0s, 0s; }
  .js-reveal .cell:nth-child(4), .js-reveal .handoff div:nth-child(4), .js-reveal .log-item:nth-child(4) { transition-delay: 0.24s, 0.24s, 0s, 0s, 0s; }
}

/* Gentle parallax: the hero render rises a little as you scroll away */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
    .viewer { animation: rise linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
  }
}
@keyframes rise { to { translate: 0 -70px; } }

/* Studio log */
.log { list-style: none; margin-top: 24px; border-top: 1px solid var(--line); }
.log-wrap .log { margin-top: 0; }
.log-item { display: grid; gap: 8px 40px; padding: 24px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .log-item { grid-template-columns: 10rem 1fr; } }
.log-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; color: var(--ink-2); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .log-meta { flex-direction: column; align-items: flex-start; } }
.log-tag { font-size: 0.8rem; font-weight: 560; padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--blue-text); }
.log-body h3 { margin: 0 0 8px; }
.log-body p { margin: 0 0 0.7em; color: var(--ink-2); max-width: 68ch; }

/* A note from Kelvin */
.founder-note {
  margin: 4px 0 24px; padding: 18px 22px; max-width: 62ch;
  border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; background: var(--surface);
}
.founder-note p { margin: 0 0 8px; font-size: 1.08rem; line-height: 1.55; }
.founder-note footer { font-weight: 640; color: var(--ink-2); }

/* Back to top: appears after a screen of scrolling */
.to-top {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 50;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--btn); color: var(--btn-ink); box-shadow: 0 10px 24px -10px rgba(0, 40, 100, 0.7);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s var(--ease), visibility 0.2s, background-color 0.15s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--btn-hover); }
.to-top:focus-visible { outline-offset: 4px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; transform: none; } }