/* =========================================================
   Contineu — technical-dark build
   Bomstad Display (headings) · Questrial (subheads)
   Givonic (body).  Sharp corners everywhere.
   ========================================================= */

/* ---------- brand fonts (local first, bundled fallback) ---------- */

@font-face {
  font-family: "Bomstad Display";
  src: local("Bomstad Display Light"), url("assets/fonts/BomstadDisplay-Light.ttf") format("truetype");
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: "Bomstad Display";
  src: local("Bomstad Display Regular"), url("assets/fonts/BomstadDisplay-Regular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Bomstad Display";
  src: local("Bomstad Display Medium"), url("assets/fonts/BomstadDisplay-Medium.ttf") format("truetype");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Bomstad Display";
  src: local("Bomstad Display SemiBold"), url("assets/fonts/BomstadDisplay-SemiBold.ttf") format("truetype");
  font-weight: 600; font-display: swap;
}

@font-face {
  font-family: "Givonic";
  src: local("Givonic Light"), url("assets/fonts/Givonic-Light.ttf") format("truetype");
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: "Givonic";
  src: local("Givonic Regular"), url("assets/fonts/Givonic-Regular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Givonic";
  src: local("Givonic SemiBold"), url("assets/fonts/Givonic-SemiBold.otf") format("opentype");
  font-weight: 600; font-display: swap;
}

@font-face {
  font-family: "Questrial";
  src: local("Questrial"), url("assets/fonts/Questrial-Regular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}

@font-face {
  font-family: "CS Robert Mono";
  src: local("CS Robert Mono"), url("assets/fonts/CSRobertMono-Regular.otf") format("opentype");
  font-weight: 400; font-display: swap;
}

:root {
  --bg:      #0A0A0A;
  --fg:      #FAFAFA;
  --muted:   #969696;
  --dim:     #858585;
  --line:    #2B2B2B;
  --accent:  #F05D22;

  --f-head:  "Bomstad Display", "Helvetica Neue", Arial, sans-serif;
  --f-sub:   "Questrial", "Helvetica Neue", Arial, sans-serif;
  --f-body:  "Givonic", "Questrial", "Helvetica Neue", Arial, sans-serif;
  --f-mono:  "CS Robert Mono", "SFMono-Regular", Consolas, monospace;

  --ease:    cubic-bezier(0.22, 1, 0.36, 1);

  /* orange that survives black & white mode */
  --pop:     #F05D22;

  /* The whole site is a 1200px box (2026-10-03): <main> and the footer are
     capped at --maxw and centred, and nothing renders outside it. --pad is
     now the INNER gutter between the box edge and the content — a plain px
     value, not the old max(32px, (100vw - 1200px) / 2) formula, which used
     100vw (scrollbar included) and so left content ~15px narrower than 1200
     and off-centre. Literal px, not rem, so it holds independent of the
     8/8.5/8.6px root font-size swap below. */
  --maxw:    1200px;                                     /* the site box */
  --pad:     40px;                                       /* inner gutter */
  --sec:     13rem;
  --nav-h:   8.6rem;
}

/* fixed type scale — the design is locked to a 1200px column */
html { font-size: 8.5px; }
@media (max-width: 640px) { html { font-size: 8px; } }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
/* Lenis smooth scroll (2026-10-22, script.js smoothScroll). It drives the
   scroll itself, so native smooth scrolling must be off while it runs. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Page-to-page cross-fade (2026-10-22): same-origin navigations use the
   View Transitions API where the browser supports it; elsewhere pages just
   load as before. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 0.32s var(--ease) both; }
::view-transition-new(root) { animation: vtIn 0.48s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-1.2rem); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(1.6rem); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
html.a11y-stopmotion::view-transition-old(root), html.a11y-stopmotion::view-transition-new(root) { animation: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 400;
  letter-spacing: 0.01em;   /* was -0.022em; owner found Bomstad too tight (2026-10-21) */
  line-height: 1.08;
}
h1 { text-transform: uppercase; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* ---------- the 1200px site box ---------- */
/* Every page's <main> and footer are the box; overflow-x: clip guarantees
   nothing paints outside it (clip, not hidden — hidden would make these
   scroll containers and break position: sticky inside, see motion-system.md).
   The nav is fixed, so its inner row is capped separately (.nav__inner). */
main, .footer { max-width: var(--maxw); margin-inline: auto; }
.footer, main > section { overflow-x: clip; }
/* Stacking (2026-10-21, owner). Every section is z 5 on the page ground and
   #stands is z 4, so its neighbours slide over it and unmask it. The fixed
   .colframe lines (z 3) sit just outside the 1200 box, so boxed sections
   never cover them, while the full-width ones (#stands, #stack and
   #difference's fill) always do: no fading in and out. */
main > section { background-color: var(--bg); }
/* The grey dividers (each section's border-top/bottom) run the full window
   width (2026-10-22, owner): border-image repaints the same 1px border with
   a 100vmax outset left and right. Sides with no border stay unpainted. */
main > section, .footer { border-image: linear-gradient(var(--line), var(--line)) 1 / 1 / 0 100vmax; }
/* [class] lifts the specificity above single-class rules such as .diff / .how,
   which set their own z-index 2 for the old sandwich */
main > section[class] { position: relative; z-index: 5; }
main > section.stands[class] { z-index: 4; }
/* #difference slides over the full-width #stands, so its ground runs the
   full window width too (owner: 'no fill beyond the orange lines') */
/* #difference and #how slide over the full-width #stands, so their ground runs
   the full window width too, and the orange frame lines are redrawn on top of
   it at the .colframe positions so they continue through these sections.
   Real 1px borders, not gradient stops: a 1px gradient stop at a fractional
   position can vanish on scaled (125%/150%) displays. */
main > .diff, main > .how { overflow-x: visible; clip-path: inset(0 -100vmax); }
main > .diff::before, main > .how::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 200vmax;
  transform: translateX(-50%); background: var(--bg); pointer-events: none;
}
main > .diff::after, main > .how::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -2px; right: -2px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  pointer-events: none;
}
@media (max-width: 1200px) { main > .diff::after, main > .how::after { display: none; } }
/* #stands and #stack are full window width (2026-10-19, owner): they break
   out of the box and sit above the fixed .colframe lines (z 4) and grain. */
main > .stands, main > .sol { overflow-x: visible; width: 100vw; margin-left: calc(50% - 50vw); }

/* The box's two side borders, with tick dots. Fixed + inset:0 resolves to
   the viewport WITHOUT the scrollbar, the same width <main>'s margin:auto
   centres in, so calc(50% - 600px) lands exactly on the box edge (a 100vw
   calc would sit ~7px off whenever a scrollbar is showing).
   Line and dots are ONE element's background, both centred on the same
   5px-wide strip (line at 2-3px, dot centres at 2.5px), so they cannot drift
   apart — they used to be a 1px span plus a separately-translated 3px
   pseudo-element, and the dots sat visibly off the line. Background-size's
   Y value (28px) is the dot spacing. */
.colframe { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.colframe span {
  position: absolute; top: 0; bottom: 0; width: 5px;
  background:
    linear-gradient(to right, transparent 2px, color-mix(in srgb, var(--accent) 45%, transparent) 2px 3px, transparent 3px);
}
.colframe span:first-child { left:  calc(50% - var(--maxw) / 2 - 4px); }
.colframe span:last-child  { right: calc(50% - var(--maxw) / 2 - 4px); }
/* at or under the box width there are no side margins to frame */
@media (max-width: 1200px) { .colframe { display: none; } }

/* ---------- film grain overlay ---------- */
/* Subtle noise over the near-black --bg, requested to break up the flat dark
   gradients. Self-contained data-URI SVG (feTurbulence + saturate:0 to keep
   it neutral gray, not colour static) — no external image request. Fixed,
   full-viewport, same tier as .colframe (just above it) so it layers over
   every section without ever sitting above the nav (z-index: 100) or
   blocking clicks. Already neutral/desaturated, so it needs no per-theme
   override. */
.grain {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
}

/* ---------- atoms ---------- */

.accent { color: var(--accent); }

.label {
  font-family: var(--f-sub);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.label--accent { color: var(--accent); }

.halftone {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: radial-gradient(circle, var(--bg) 1.05px, transparent 1.15px);
  background-size: 5px 5px;
}
.halftone--dense { background-size: 4px 4px; z-index: 3; }

.brk {
  position: absolute; z-index: 6;
  width: 1.4rem; height: 1.4rem;
  border: 1px solid var(--pop);
  pointer-events: none;
}
.brk.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.brk.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.brk.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.brk.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ---------- button ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.9rem 3.4rem;
  border: 1px solid var(--line);
  font-family: var(--f-sub);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.4s var(--ease);
}
.btn::before, .btn::after {
  content: ""; position: absolute; z-index: 3;
  width: 0.8rem; height: 0.8rem;
  border: 1px solid var(--pop);
  transition: width 0.45s var(--ease), height 0.45s var(--ease);
}
.btn::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.btn::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.btn:hover::before, .btn:hover::after { width: 1.7rem; height: 1.7rem; }
.btn:hover { border-color: var(--pop); }
/* One button design site-wide (2026-10-14, owner): filled orange, dark label,
   corner brackets in --fg that grow on hover. Was outline by default, with a
   filled variant in .cta and a pill variant in #integrations. */
.btn { background: var(--accent); border-color: var(--accent); color: #0A0A0A; }
.btn::before, .btn::after { border-color: var(--fg); }
.btn:hover { background: var(--pop); border-color: var(--accent); }

/* ---------- nav ---------- */
/* floating pill cluster: logo pill left, [mono toggle, Contact us] pills right.
   Each pill carries its own background/border/blur, so unlike the old full-width
   bar there is nothing for .stuck to turn on — it only deepens the pills once
   scrolled, for contrast over busier content underneath. */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
}
/* The pills carry no stroke (2026-10-03) — fill only — so with no border to
   separate them, a small gap is what keeps each one reading as its own
   button. Hover feedback is colour, not a border. */
.nav__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); display: flex; align-items: center; justify-content: center; gap: 0.6rem; }

.nav__pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 0;
  background: rgba(10,10,10,0.62);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.nav.stuck .nav__pill { background: rgba(10,10,10,0.88); }

/* the full lockup is ~7:1, so this pill is a wide rounded-rect rather than the
   4.8rem square the mark-only version used. The nav cluster is centred with
   justify-content:center, not the old equal-width space-between trick, so the
   wider pill does not knock the CTA off centre. */
.nav__pill--logo { width: auto; height: 4.8rem; padding: 0 2rem; color: var(--fg); }
.nav__pill--logo svg { height: 1.7rem; width: auto; display: block; }
.logo__mark { fill: var(--accent); }
.logo__word { fill: currentColor; }
.nav__pill--logo:hover { color: var(--pop); }

/* Blog / About: one pill each (they shared a single pill until 2026-10-03) */
.nav__links { display: flex; gap: 0.6rem; }
.nav__pill--link {
  padding: 0 2.2rem; height: 4.8rem;
  font-family: var(--f-sub); font-size: 1.6rem; font-weight: 500;
  color: var(--muted); white-space: nowrap;
}
.nav__pill--link:hover { color: var(--fg); }
.nav__pill--link[aria-current="page"] { color: var(--accent); }

/* light/dark switch — the dot is a half-filled disc showing the other mode */
.nav__pill--mono {
  width: 4.8rem; height: 4.8rem;
  font-family: var(--f-sub); color: var(--muted); cursor: pointer;
}
.nav__pill--mono:hover { color: var(--pop); }
/* sun on the dark theme, moon on the light theme (2026-10-22) */
.nav__pill--mono svg { width: 1.9rem; height: 1.9rem; display: block; }
.nav__pill--mono .mono-toggle__moon { display: none; }
html.theme-light .nav__pill--mono .mono-toggle__sun { display: none; }
html.theme-light .nav__pill--mono .mono-toggle__moon { display: block; }

/* menu pill: only below 600px, where the Blog / About pills are hidden */
/* square and orange, not a round pill (2026-10-22) */
.nav__pill--menu { display: none; width: 4.8rem; height: 4.8rem; border-radius: 0; background: var(--accent); color: #0A0A0A; cursor: pointer; }
.nav.stuck .nav__pill--menu, .nav__pill--menu:hover { background: var(--pop); }
.nav__burger { position: relative; width: 1.8rem; height: 1rem; }
.nav__burger i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease), top 0.3s var(--ease); }
.nav__burger i:first-child { top: 0; }
.nav__burger i:last-child { top: calc(100% - 1.5px); }
.nav__pill--menu.is-open .nav__burger i:first-child { top: calc(50% - 0.75px); transform: rotate(45deg); }
.nav__pill--menu.is-open .nav__burger i:last-child { top: calc(50% - 0.75px); transform: rotate(-45deg); }
.nav__menu { position: absolute; top: calc(var(--nav-h) - 0.4rem); left: var(--pad); right: var(--pad); z-index: 101; }
/* the open menu: one solid orange block, big editorial type, square corners */
.nav__menu ul { display: grid; padding: 1.6rem 2.4rem 2.4rem; border-radius: 0; background: var(--accent); }
.nav__menu li + li { border-top: 1px solid rgba(10,10,10,0.22); }
.nav__menu a { display: flex; justify-content: space-between; align-items: baseline; padding: 1.6rem 0 1.2rem; font-family: var(--f-head); font-size: 4.8rem; line-height: 1; letter-spacing: 0.01em; color: #0A0A0A; }
.nav__menu a::after { content: "→"; font-family: var(--f-sub); font-size: 2.4rem; opacity: 0.6; }
.nav__menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.6rem; }
@media (min-width: 601px) { .nav__menu { display: none; } }

.nav__pill--cta {
  padding: 0 2.6rem; height: 4.8rem;
  font-family: var(--f-sub); font-size: 1.6rem; font-weight: 500;
  color: #0A0A0A; white-space: nowrap;
  background: var(--accent);
}
.nav__pill--cta:hover { background: var(--pop); }
.nav.stuck .nav__pill--cta { background: var(--accent); }

/* ---------- split masks ---------- */
.sl { overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }

/* ---------- ACTIVE DEPLOYMENTS ---------- */
/* Centred, no boxes (2026-10-21, owner reference: a "Friends & Partners" strip). */
.deploy { padding: 9rem var(--pad); border-bottom: 1px solid var(--line); text-align: center; }
.deploy__logos { margin: 4.4rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4rem 5rem; max-width: 118rem; }
.deploy__logo { height: 10rem; display: flex; align-items: center; justify-content: center; }
/* logos have transparent backgrounds (2026-10-22) and are drawn as one flat
   colour: white on dark, ink on light */
.deploy__logo img { max-width: 24rem; max-height: 8rem; width: auto; height: auto; filter: brightness(0) invert(1); opacity: 0.8; transition: opacity 0.35s var(--ease); }
.deploy__logo:hover img { opacity: 1; }
.deploy__logo--sm img { max-width: 15rem; max-height: 5rem; }
.deploy__word { font-family: var(--f-head); font-size: 3.4rem; letter-spacing: 0.01em; color: var(--fg); opacity: 0.75; white-space: nowrap; }
html.theme-light .deploy__logo img { filter: brightness(0); }
.deploy__partners { margin-top: 6rem; }
.deploy__plist { margin-top: 2.2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 4.4rem; }
.deploy__plist li { font-family: var(--f-sub); font-size: 1.7rem; color: var(--fg); }
.deploy__plist small { margin-left: 0.6rem; font-size: 1.3rem; color: var(--muted); }
@media (max-width: 900px) { .deploy__logos { gap: 2.4rem 4rem; } .deploy__logo img { max-width: 13rem; } }

/* ---------- HERO ---------- */
/* Two layouts on one markup (2026-10-21), chosen by .hero[data-layout]:
   A = the 2026-10-19 editorial hero, B = the blueprint hero from the owner's
   Palantir reference (shipped). Both are one screen tall and use the same
   art cell: --art-l / --art-t / --art-b position it (% of the hero), with
   per-layout defaults below. script.js's local tuning panel can switch the
   layout and override these inline (never in production). */

.hero {
  --hero-h: 100vh;
  position: relative;
  height: var(--hero-h);
  min-height: 60rem;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-color: var(--bg);
}
.hero[data-layout="a"] { --art-l: 54%; --art-t: 15%; --art-b: 0%; }
.hero[data-layout="b"] {
  --art-l: 52%; --art-t: 15%; --art-b: 12%;
  --hero-cell: 5.4rem;
  --hero-ln: color-mix(in srgb, var(--fg) 11%, transparent);
  background-image:
    linear-gradient(var(--hero-ln) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-ln) 1px, transparent 1px);
  background-size: var(--hero-cell) var(--hero-cell);
  background-position: -1px -1px;
}

/* --- shared: the art cell --- */
/* right: 0 (2026-10-22): the art and its drafting grid run to the box's edge */
.hero__art { position: absolute; z-index: 1; left: var(--art-l); right: 0; top: var(--art-t); bottom: var(--art-b); overflow: hidden; background: var(--hero-art-bg, #0A0A0A); }
.hero__frame {
  position: absolute; border: 0; display: block; pointer-events: none;
  /* framing defaults = the owner's tuning panel settings of 2026-10-22 */
  width: calc(var(--hero-scale, 2) * 100%); height: calc(var(--hero-scale, 2) * 100%);
  left: calc((1 - var(--hero-scale, 2)) * 50% + var(--hero-x, 7) * 1%);
  top: calc((1 - var(--hero-scale, 2)) * 50% + var(--hero-y, 23) * 1%);
  opacity: var(--hero-art-a, 1);
}
/* light theme: the animation's own grid is too faint on a pale ground, so
   this overlay draws one (2026-10-22) */
html.theme-light .hero__grid { --hero-grid-a: 1; --hero-grid-c: rgba(20, 17, 13, 0.09); }
.hero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--hero-grid-a, 0);
  background-image: linear-gradient(var(--hero-grid-c, #F05D22) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid-c, #F05D22) 1px, transparent 1px);
  background-size: 3.6rem 3.6rem; background-position: -1px -1px;
}
.hero__desc { color: var(--muted); }
.hero__arrow { color: var(--accent); }

/* --- layout A: accent rules, copy stacked bottom-left --- */
.hero__v, .hero__h, .hero__sq { display: none; }
.hero[data-layout="a"] .hero__v, .hero[data-layout="a"] .hero__h { display: block; position: absolute; z-index: 3; background: color-mix(in srgb, var(--accent) 60%, transparent); pointer-events: none; }
.hero[data-layout="a"] .hero__v { top: 0; bottom: 0; width: 1px; left: var(--art-l); }
.hero[data-layout="a"] .hero__h { left: 0; right: 0; height: 1px; top: var(--art-t); }
.hero[data-layout="a"] .hero__sq { display: block; position: absolute; z-index: 4; width: 1rem; height: 1rem; margin: -0.5rem 0 0 -0.5rem; background: var(--accent); top: var(--art-t); }
.hero[data-layout="a"] .hero__sq--tl { left: var(--art-l); }
.hero[data-layout="a"] .hero__sq--tr { left: 100%; }
.hero[data-layout="a"] .hero__corner, .hero[data-layout="a"] .hero__wire, .hero[data-layout="a"] .hero__tag, .hero[data-layout="a"] .hero__arrow { display: none; }
.hero[data-layout="a"] .hero__copy { position: absolute; z-index: 2; left: var(--pad); bottom: 8rem; width: calc(var(--art-l) - var(--pad) - 5rem); }
.hero[data-layout="a"] .hero__title { font-family: var(--f-head); font-weight: 400; font-size: 4.4rem; line-height: 1.06; letter-spacing: 0; }
.hero[data-layout="a"] .hero__desc { margin-top: 2rem; max-width: 46rem; font-size: 1.6rem; }
.hero[data-layout="a"] .hero__more { margin-top: 3.4rem; }

/* --- layout B: blueprint grid --- */
.hero[data-layout="b"] .hero__art { border: 1px solid color-mix(in srgb, var(--fg) 40%, transparent); }
.hero[data-layout="b"] .hero__copy { display: contents; }
.hero__corner { position: absolute; z-index: 3; font-family: var(--f-sub); font-size: 1.2rem; letter-spacing: 0.1em; color: var(--muted); }
.hero__corner--tl { left: var(--pad); top: calc(var(--nav-h) + 1rem); }
.hero__corner--br { right: var(--pad); bottom: 2.4rem; }
.hero__wire { position: absolute; z-index: 1; pointer-events: none; border: 0 dashed color-mix(in srgb, var(--fg) 55%, transparent); }
.hero__wire::before, .hero__wire::after { content: ""; position: absolute; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--fg); }
.hero__wire--1, .hero__wire--2, .hero__wire--3 { width: 0; border-left-width: 1px; }
.hero__wire--4, .hero__wire--5, .hero__wire--6 { height: 0; border-top-width: 1px; }
.hero__wire--1::before, .hero__wire--2::before, .hero__wire--3::before { top: -0.45rem; left: -0.5rem; }
.hero__wire--1::after, .hero__wire--2::after, .hero__wire--3::after { bottom: -0.45rem; left: -0.5rem; }
.hero__wire--4::before, .hero__wire--5::before, .hero__wire--6::before { left: -0.45rem; top: -0.5rem; }
.hero__wire--4::after, .hero__wire--5::after, .hero__wire--6::after { right: -0.45rem; top: -0.5rem; }
.hero__wire--1 { left: 39%; top: 54%; height: 38%; }
.hero__wire--2 { left: 47%; top: 30%; height: 50%; }
.hero__wire--3 { left: 32%; top: 64%; height: 9%; }
.hero__wire--4 { left: 15%; top: 73%; width: 29%; }
.hero__wire--5 { left: 39%; top: 62%; width: 8%; }
.hero__wire--6 { left: 47%; top: 80%; width: 5%; }
.hero__wire--1::after, .hero__wire--2::after { background: var(--accent); }
.hero__tag { position: absolute; z-index: 3; left: var(--pad); top: 60%; font-family: var(--f-sub); font-size: 1.2rem; letter-spacing: 0.1em; line-height: 1.5; color: var(--muted); }
.hero[data-layout="b"] .hero__titlebox {
  position: absolute; z-index: 3; left: var(--pad); top: calc(var(--nav-h) + 5rem);
  width: min(60rem, 46%); padding: 1.6rem 2.4rem 2.4rem 0; background: var(--bg);
}
.hero[data-layout="b"] .hero__title {
  font-family: var(--f-head); font-weight: 400; text-transform: none;
  font-size: 7.4rem; line-height: 1.04; letter-spacing: -0.025em;
}
.hero[data-layout="b"] .hero__arrow { font-weight: 300; }
.hero[data-layout="b"] .hero__subbox {
  position: absolute; z-index: 3; left: var(--pad); bottom: 6rem;
  max-width: 46rem; padding: 2rem 2.4rem 2.4rem;
  background: var(--bg); border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
}
.hero[data-layout="b"] .hero__desc { font-family: var(--f-body); font-size: 2.8rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); }
.hero[data-layout="b"] .hero__more { margin-top: 2.4rem; }


/* Below 900px both layouts stack: copy on top, art underneath. */
@media (max-width: 900px) {
  /* one full screen on phones (2026-10-22): svh so mobile browser bars don't
     push the bottom off-screen; the art cell takes whatever the copy leaves */
  .hero { height: 100vh; height: 100svh; min-height: 56rem; display: flex; flex-direction: column; gap: 2.4rem; padding: calc(var(--nav-h) + 3rem) var(--pad) 14rem; }
  /* narrow cell: frame the whole building, not the desktop close-up;
     the 14rem bottom padding keeps the CTA clear of the a11y button */
  .hero { --hero-scale: 1.15; --hero-x: 0; --hero-y: 4; }
  .hero[data-layout] .hero__copy, .hero[data-layout] .hero__titlebox, .hero[data-layout] .hero__subbox, .hero[data-layout] .hero__art { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
  .hero[data-layout="b"] .hero__copy { display: flex; flex-direction: column; gap: 3rem; }
  .hero[data-layout] .hero__titlebox { padding-right: 0; }
  .hero[data-layout="b"] .hero__title { font-size: 4.8rem; }
  .hero[data-layout="a"] .hero__title { font-size: 3.4rem; }
  .hero[data-layout] .hero__art { flex: 1 1 auto; min-height: 24rem; }
  .hero[data-layout] .hero__v, .hero[data-layout] .hero__h, .hero[data-layout] .hero__sq, .hero__wire, .hero__tag { display: none; }
  .hero[data-layout="b"] .hero__desc { font-size: 2.2rem; }
}


/* ---------- ABOUT ---------- */

.about { padding: 6rem var(--pad) var(--sec); display: grid; grid-template-columns: 48% 1fr; gap: 9rem; align-items: start; }
.about__thumb { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; }
.about__thumb-in {
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 50% at 40% 45%, rgba(200,200,205,0.22) 0%, transparent 70%),
    linear-gradient(140deg, #1A1A1C 0%, #0C0C0D 100%);
}
.about__col { display: flex; flex-direction: column; min-height: 100%; padding-top: 1rem; }
.about__title { font-size: 6.2rem; margin-top: 3rem; }
.about__foot { margin-top: auto; padding-top: 20rem; display: grid; grid-template-columns: 1fr auto; gap: 6rem; align-items: end; }
.about__copy { max-width: 46rem; display: grid; gap: 1.8rem; color: #D6D6D6; }

/* ---------- STANDS FOR ---------- */
/* Sandwiched-pin overlap, take two (2026-08-28): #difference and #how are
   pulled in by a negative margin (see their own rules) so their normal-flow
   position starts before GSAP's #stands pin (script.js) has finished its
   scroll budget, and they sit at a higher z-index and carry an opaque
   background — so each visually slides over the still-pinned/sticky #stands
   as you scroll, uncovering then re-covering it, rather than a hard cut once
   the pin releases. The first attempt at this (2026-08-24) was reverted
   2026-08-26 for not reading as a scroll-driven reveal; the difference this
   time is the overlap is pure document flow (negative margin shifts where
   #stands's own "top top" trigger resolves, no JS position math), so the
   motion during the overlap window is ordinary 1:1 scrolling, not a static
   layout jump. See motion-system.md for the dwell-buffer math (CYCLE_VH +
   DWELL_VH) that gives the word-cycle time to finish before #how can cover it. */
/* .stands is a TALL scroll-budget box holding a 100vh sticky child — it is
   deliberately NOT GSAP-pinned any more (2026-08-28). GSAP's pinSpacing
   wrapper and .diff's negative margin-bottom fought each other: ScrollTrigger
   resolved this section's `start: 'top top'` to document-Y 1 instead of its
   real ~2721, pinning #stands from the very top of the page. Plain CSS
   `position: sticky` on .stands__stick has no spacer to interact with the
   margin, so the geometry stays honest. Height is (UNCOVER + CYCLE + DWELL +
   1) * 100vh — the sticky child eats one viewport, the remaining 300vh is the
   scroll budget, and it must stay in sync with TOTAL_VH in script.js. */
/* 500vh = the 400vh word-cycle sequence + 100vh more for #how to slide up
   over the still-stuck panel (2026-10-22, owner: How it works comes above
   Stands). #how's margin-top: -100vh is the other half. */
.stands { position: relative; z-index: 1; height: 500vh; }
.stands__stick { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.stands__media { position: absolute; inset: 0; z-index: 0; }
/* NOT greyscaled. The old concrete-plate photo was, but the image here since
   2026-09-09 is a dark city-density map whose whole point is its orange/magenta
   data dots — desaturating it would throw away the image. Brightness is still
   pulled down hard so .stands__text stays legible over it; the mono-mode rule
   further down still greyscales it in B&W mode like every other raster. */
.stands__photo {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.62) contrast(1.04);
}
/* when the photo is present it sits above the CSS stand-in */
.stands__photo ~ .stands__img { opacity: 0; }
.stands__veil {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.30) 45%, rgba(10,10,10,0.72) 100%);
}
.stands__img {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(118deg, rgba(150,150,155,0.10) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(62deg, rgba(120,120,128,0.09) 0 4px, transparent 4px 11px),
    radial-gradient(70% 70% at 45% 50%, rgba(190,190,196,0.16) 0%, transparent 72%),
    #0C0C0D;
}
.stands__line {
  position: relative; z-index: 4; width: 100%;
  padding-inline: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  display: flex; align-items: center; justify-content: space-between; gap: 4rem;
}
.stands__text { font-size: 5.2rem; color: #EDEDED; }
.stands__tail { display: inline-block; will-change: transform; }
.stands__dot { width: 0.9rem; height: 0.9rem; background: #C9C9C9; flex: none; }

.stands__skip {
  /* under the 'Contineu stands for…' line, aligned to its left edge (2026-10-22) */
  position: absolute; z-index: 5; top: calc(50% + 5.6rem); left: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 1rem 1.6rem;
  border: 1px solid rgba(250,250,250,0.28);
  background: rgba(10,10,10,0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--f-sub); font-size: 1.3rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #EDEDED;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.stands__skip svg { width: 1.4rem; height: 1.4rem; }
.stands__skip:hover { border-color: var(--pop); color: var(--pop); background: rgba(10,10,10,0.55); }


/* ---------- STEPS ---------- */

.steps { padding: var(--sec) var(--pad); border-top: 1px solid var(--line); }
.steps__head { margin-bottom: 7rem; }
.steps__title { font-size: 5.6rem; margin-top: 3rem; }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.step { position: relative; border: 1px solid var(--line); padding: 3.4rem; min-height: 30rem; display: flex; flex-direction: column; transition: background-color 0.4s var(--ease); }
.step:hover { background: #101010; }
.step__num { font-family: var(--f-sub); font-size: 1.4rem; letter-spacing: 0.1em; color: var(--accent); }
.step__title { font-size: 3.4rem; margin-top: auto; }
.step__desc { margin-top: 1.4rem; color: #C2C2C2; }
.step__meta { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--line); font-family: var(--f-sub); font-size: 1.4rem; color: var(--muted); }

/* ---------- CHALLENGE ---------- */

.challenge { padding: var(--sec) var(--pad); display: grid; grid-template-columns: 40% 1fr; gap: 8rem; border-top: 1px solid var(--line); }
.challenge__left { position: sticky; top: 16rem; align-self: start; }
.challenge__title { font-size: 6.2rem; margin-top: 3rem; }
.challenge__title s { color: var(--fg); text-decoration-thickness: 1px; }

.acc { border-bottom: 1px solid var(--line); }
.acc:first-child { border-top: 1px solid var(--line); }
.acc__head { width: 100%; display: grid; grid-template-columns: 22rem 1fr 3rem; gap: 3rem; align-items: start; padding-block: 3.4rem; text-align: left; }
.acc__label { font-family: var(--f-sub); font-size: 1.4rem; color: var(--muted); padding-top: 0.5rem; }
.acc__title { font-family: var(--f-head); font-size: 2.7rem; line-height: 1.25; transition: color 0.4s var(--ease); }
.acc:not(.is-open) .acc__head:hover .acc__title { color: var(--accent); }
.acc__ic { position: relative; width: 1.8rem; height: 1.8rem; margin-top: 0.9rem; justify-self: end; }
.acc__ic i { position: absolute; background: var(--fg); transition: transform 0.45s var(--ease), opacity 0.3s var(--ease); }
.acc__ic i:nth-child(1) { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.acc__ic i:nth-child(2) { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.acc.is-open .acc__ic i:nth-child(2) { transform: translateX(-50%) scaleY(0); opacity: 0; }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease); }
.acc.is-open .acc__body { grid-template-rows: 1fr; }
.acc__body-in { overflow: hidden; }
.acc.is-open .acc__body-in { padding-bottom: 3.4rem; }
.acc__body-in > * { margin-left: 25rem; max-width: 62rem; }
.acc__body-in p { color: #C2C2C2; }
.acc__body-in ul { margin-top: 1.8rem; display: grid; gap: 1rem; }
.acc__body-in li { position: relative; padding-left: 1.8rem; color: #C2C2C2; }
.acc__body-in li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; background: var(--muted); }
.acc__src { margin-top: 1.8rem; color: var(--muted) !important; font-family: var(--f-sub); font-size: 1.4rem; }

/* ---------- SOLUTION: pin, single visual rides left ---------- */

.sol { position: relative; border-top: 1px solid var(--line); background: var(--bg); }
/* The track sizes in cqw (container query units against .sol__stick), not
   vw: since 2026-10-03 the site is a 1200px box, and vw-sized panels would be
   sized off the window instead of the box. .sol__stick is the container, so
   100cqw is exactly the box width at every viewport. Its overflow:hidden is
   all the clipping needed — the old clip-path inset to the 1800px grid line
   went with that grid. script.js derives the travel distance from
   track.scrollWidth - stick.clientWidth to match. */
.sol__stick { position: relative; height: 100vh; overflow: hidden; container-type: inline-size; }
.sol__track { display: flex; align-items: center; height: 100%; width: max-content; will-change: transform; }

.sol__text { width: 42cqw; flex: none; padding: 0 6rem 0 max(var(--pad), calc((100cqw - var(--maxw)) / 2 + var(--pad))); }
.sol__title { font-size: 6rem; margin-top: 3rem; }
.sol__desc { margin-top: 4rem; max-width: 42rem; color: #C2C2C2; }

.sol__panel {
  position: relative;
  width: 58cqw; flex: none;
  height: 78vh;
  border: 1px solid var(--line);
  background: #0A0A0A;   /* a dark viewport in both themes — the wireframe is white */
  overflow: hidden;
}
.sol__panel-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(250,250,250,0.13) 0.9px, transparent 1px);
  background-size: 11px 11px;
}
.sol__panel .brk { width: 2rem; height: 2rem; margin: 3rem; }
/* The scan (reworked 2026-10-03): --scan is the orange LINE's position, swept
   0% -> 100% top to bottom by script.js. Everything above the line has been
   scanned and shows at full strength (mask 1 — the wireframe itself is 100%
   white, see bim-viewer.js); everything below it is unscanned and greyed out
   to --scan-floor. Both the bar and the canvas mask read the same two custom
   properties on .sol__viz, so one tween moves both and they cannot desync. */
.sol__viz {
  position: absolute; inset: 0; display: grid; place-items: center;
  --scan: 0%;
  --scan-floor: 0.2;
}
.sol__viz-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) var(--scan),
    rgba(0,0,0,var(--scan-floor)) calc(var(--scan) + 1px),
    rgba(0,0,0,var(--scan-floor)) 100%);
          mask-image: linear-gradient(180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) var(--scan),
    rgba(0,0,0,var(--scan-floor)) calc(var(--scan) + 1px),
    rgba(0,0,0,var(--scan-floor)) 100%);
}
/* No .is-ready fallback rule: the no-GSAP / reduced-motion path is handled by
   script.js's capability gate lifting --scan-floor to 1, which makes the mask
   uniformly opaque (the whole model shown as scanned). */
/* the glow trails ABOVE the line — the band's bottom border is the line */
.sol__viz-scan {
  position: absolute; left: 0; right: 0; height: 8rem;
  top: calc(var(--scan) - 8rem);
  background: linear-gradient(180deg, rgba(240,93,34,0) 0%, rgba(240,93,34,0.34) 100%);
  border-bottom: 1px solid var(--accent);
  opacity: 0;
}

/* Wider than the old 48vw: inside a 1200px box 48cqw would cram the four
   stat columns into ~480px (the same squeeze the old --pad padding caused). */
.sol__payoff { width: 64cqw; flex: none; height: 78vh; display: flex; flex-direction: column; padding-left: 6rem; padding-right: var(--pad); }
.sol__payoff-title { font-size: 5rem; margin-top: auto; margin-bottom: 5rem; }
.sol__stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); height: 44%; }
.sol__stat { position: relative; min-width: 0; padding: 2.6rem; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; }
.sol__stat:last-child { border-right: 0; }
.sol__stat-ic, .sol__stat-arrow { position: absolute; top: 2.6rem; left: 2.6rem; width: 3rem; height: 3rem; color: var(--accent); }
.sol__stat-arrow { left: auto; right: 2.6rem; }
.sol__stat-ic svg, .sol__stat-arrow svg { width: 100%; height: 100%; }
.sol__stat-v { font-family: var(--f-head); font-size: 3.8rem; line-height: 1; }
.sol__stat-l {
  margin-top: 1rem; font-family: var(--f-sub); font-size: 1.3rem; line-height: 1.3; color: var(--muted);
  min-height: calc(1.3em * 2); /* reserve 2 lines so "220+" and "IFC" sit at the same height as the longer labels, not just the same column width */
}
.sol__stat-l--big { font-family: var(--f-head); font-size: 2.4rem; line-height: 1.22; }
.sol__stat--cta { transition: background-color 0.4s var(--ease); }
.sol__stat--cta:hover { background: #101010; }


/* ---------- THE DIFFERENCE ---------- */

.diff { padding: var(--sec) var(--pad) 9rem; border-top: 1px solid var(--line); }
.diff__head { margin-bottom: 7rem; }
.diff__title { font-size: 5.6rem; margin-top: 3rem; }
.diff__table { border-top: 1px solid var(--line); }
.diff__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; padding-block: 2.6rem; border-bottom: 1px solid var(--line); align-items: baseline; }
.diff__row--head { padding-block: 1.8rem; }
.diff__k { color: var(--muted); }
.diff__a { color: var(--muted); font-family: var(--f-head); font-size: 2.6rem; }
.diff__b { color: var(--accent); font-family: var(--f-head); font-size: 2.6rem; }
.diff__row--head .diff__a, .diff__row--head .diff__b { font-family: var(--f-sub); font-size: 1.4rem; }

/* ---------- PLATFORM ---------- */

.plat { border-top: 1px solid var(--line); }
.plat__hero { position: relative; height: 58vh; overflow: hidden; }
.plat__hero-in {
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 70% at 30% 40%, rgba(210,210,215,0.20) 0%, transparent 68%),
    linear-gradient(130deg, #16161A 0%, #0B0B0C 100%);
}
.plat__main { display: grid; grid-template-columns: 42% 1fr; border-top: 1px solid var(--line); }
.plat__left { padding: 6rem var(--pad) 8rem; border-right: 1px solid var(--line); }
.plat__title { font-size: 5.6rem; margin-top: 3rem; }
.plat__desc { margin-top: 3rem; max-width: 40rem; color: #C2C2C2; }
.plat__list { display: flex; flex-direction: column; }
.row { position: relative; padding: 3rem var(--pad) 3rem 6rem; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 3rem; gap: 3rem; align-items: center; flex: 1; transition: background-color 0.4s var(--ease); }
.row:last-child { border-bottom: 0; }
.row:hover { background: #101010; }
.row__label { grid-column: 1; font-family: var(--f-sub); font-size: 1.4rem; color: var(--muted); display: block; margin-bottom: 0.9rem; }
.row__title { grid-column: 1; font-family: var(--f-head); font-size: 2.7rem; line-height: 1.25; }
.row__ic { grid-column: 2; grid-row: 1 / -1; width: 2.2rem; height: 2.2rem; color: var(--muted); align-self: center; transition: transform 0.45s var(--ease), color 0.4s var(--ease); }
.row__ic svg { width: 100%; height: 100%; }
.row:hover .row__ic { transform: translate(4px, -4px); color: var(--accent); }

/* ---------- CAPABILITIES ---------- */

.caps { border-top: 1px solid var(--line); }
.caps__grid { display: grid; grid-template-columns: 1fr 1fr; }
.cap { padding: 5rem var(--pad); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cap:nth-child(2n) { border-right: 0; }
.cap--wide { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.cap__label { font-family: var(--f-sub); font-size: 1.4rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.cap__title { font-size: 3.4rem; margin-top: 2rem; }
.cap__list { margin-top: 3rem; display: grid; gap: 1.4rem; }
.cap__list--cols { grid-template-columns: 1fr 1fr; gap: 1.4rem 5rem; }
.cap__list li { position: relative; padding-left: 1.8rem; color: #C2C2C2; }
.cap__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; background: var(--accent); }
.cap__list b { font-weight: 600; color: var(--fg); }

/* ---------- WORKFLOWS ---------- */

.flows { padding: var(--sec) var(--pad); border-top: 1px solid var(--line); }
.flows__head { margin-bottom: 7rem; }
.flows__title { font-size: 5.6rem; margin-top: 3rem; }
.flows__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.flow { position: relative; border: 1px solid var(--line); padding: 3.4rem; }
.flow--hero { border-color: var(--line); background: #0E0E0E; }
.flow__title { font-size: 3.4rem; padding-bottom: 2.6rem; border-bottom: 1px solid var(--line); }
.flow--hero .flow__title { color: var(--accent); }
.flow__list { display: grid; }
.flow__list li { padding-block: 1.8rem; border-bottom: 1px solid var(--line); color: #C2C2C2; }
.flow__list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- COVERAGE ---------- */

.cover { padding: var(--sec) var(--pad); border-top: 1px solid var(--line); }
.cover__head { margin-bottom: 7rem; }
.cover__title { font-size: 5.6rem; margin-top: 3rem; }
.cover__desc { margin-top: 3rem; max-width: 56rem; color: #C2C2C2; }
.cover__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cover__grid span { padding: 2.2rem 2.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 1.6rem; color: #B8B8B8; transition: background-color 0.35s var(--ease), color 0.35s var(--ease); }
.cover__grid span:hover { background: var(--accent); color: #fff; }

/* nothing overflows a grid/box */
.impact__grid, .cover__grid, .steps__grid,
.diff__gains, .diff__cols, .flows__grid, .says__grid, .quotes,
.dcol, .step, .flow, .say, .impact__cell, .cbox,
.pcard__thumb, .live__frame, .ticker, .defects__grid { overflow: clip; }

/* ---------- IMPACT ---------- */

.impact { padding: var(--sec) var(--pad); border-top: 1px solid var(--line); }
.impact__head { margin-bottom: 7rem; }
.impact__title { font-size: 5.6rem; margin-top: 3rem; }
.impact__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.impact__cell { padding: 3.4rem; min-height: 19rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; transition: background-color 0.4s var(--ease); }
.impact__cell:hover { background: #101010; }
.impact__v { font-family: var(--f-head); font-size: 5.2rem; line-height: 1; }
.impact__l { margin-top: 1.4rem; font-family: var(--f-sub); font-size: 1.4rem; color: var(--muted); }

.quotes { margin-top: 9rem; display: grid; grid-template-columns: repeat(3, 1fr); }
.quotes blockquote { margin: 0; padding: 0 4rem; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.quotes blockquote:first-child { padding-left: 0; border-left: 0; }
.quotes p { font-family: var(--f-head); font-size: 2.2rem; line-height: 1.35; flex: 1; }
.quotes footer { margin-top: 3rem; font-family: var(--f-sub); font-size: 1.4rem; color: var(--muted); }
.quotes footer b { display: block; color: var(--fg); font-weight: 400; margin-bottom: 0.3rem; }

/* ---------- STANDARDS ---------- */

.std { padding: 7rem var(--pad); border-top: 1px solid var(--line); display: grid; grid-template-columns: 2fr 1fr; gap: 6rem; }
.std__row { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.std__item { padding: 1.3rem 2.2rem; border: 1px solid var(--line); font-family: var(--f-sub); font-size: 1.5rem; letter-spacing: 0.06em; color: #C2C2C2; transition: border-color 0.35s var(--ease), color 0.35s var(--ease); }
.std__item:hover { border-color: var(--accent); color: var(--fg); }
.std__item--soon { color: var(--muted); }

/* ---------- CTA ---------- */

.cta { position: relative; margin: 0 var(--pad) 10rem; padding: 2.6rem; }
.cta > .brk { width: 1.8rem; height: 1.8rem; }
.cta__box {
  --cut: 5rem;
  background: var(--pop);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.cta__inner {
  position: relative; margin: 1px; background: var(--bg);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  padding: 11rem 4rem; overflow: hidden;
}
/* 0.16, down from 0.42 (2026-10-03) — the stipple read too bright behind the
   headline. Light theme has its own value further down. */
.cta__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(240,93,34,0.16) 0.9px, transparent 1px);
  background-size: 10px 10px;
}
.cta__content { position: relative; z-index: 2; display: grid; justify-items: center; gap: 3rem; text-align: center; }
.cta__title { font-size: 6rem; }
.cta__desc { color: #C2C2C2; max-width: 54rem; white-space: nowrap; }
/* .btn colours are global now (see the button block); corners use --fg so
   they show against either theme's panel. */

/* ---------- FOOTER ---------- */

.footer { border-top: 1px solid var(--line); }
.footer__news { width: min(var(--maxw), calc(100% - 2 * var(--pad))); margin-inline: auto; padding: 7rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: start; }
.footer__news-title { font-size: 5rem; }
.footer__news-desc { margin-top: 2.4rem; max-width: 44rem; color: #C2C2C2; }
.footer__form { position: relative; padding-top: 1rem; }
.footer__input { width: 100%; padding: 1.6rem 5rem 1.6rem 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg); font-family: var(--f-body); font-size: 2rem; transition: border-color 0.4s var(--ease); }
.footer__input::placeholder { color: var(--muted); }
.footer__input:focus { outline: none; border-bottom-color: var(--accent); }
.footer__send { position: absolute; right: 0; bottom: 1.4rem; width: 2.6rem; height: 2.6rem; color: var(--muted); transition: transform 0.45s var(--ease), color 0.4s var(--ease); }
.footer__send svg { width: 100%; height: 100%; }
.footer__send:hover { color: var(--accent); transform: translate(4px, -4px); }
.footer__note { margin-top: 1.2rem; font-family: var(--f-sub); font-size: 1.3rem; color: var(--accent); min-height: 1.4em; }

.footer__grid { width: min(var(--maxw), calc(100% - 2 * var(--pad))); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr 1fr 30%; border-top: 1px solid var(--line); }
.footer__menu, .footer__col { padding: 6rem 4rem 8rem; display: flex; flex-direction: column; gap: 1.3rem; }
.footer__menu { padding-left: 0; }
.footer__menu a { font-family: var(--f-head); font-size: 2rem; color: var(--muted); transition: color 0.35s var(--ease); }
.footer__menu a:hover { color: var(--fg); }
.footer__col p { color: #C2C2C2; font-size: 1.6rem; }
.footer__col .label { margin-bottom: 1rem; }
.footer__logo { position: relative; border-left: 1px solid var(--line); display: grid; place-items: center; }
.footer__logo svg { width: 9rem; height: auto; color: #242424; }
.footer__logo .brk { width: 1.4rem; height: 1.4rem; margin: 3rem; }

.footer__ghost { width: min(var(--maxw), calc(100% - 2 * var(--pad))); margin-inline: auto; overflow: hidden; border-top: 1px solid var(--line); }
.footer__ghost-track { display: flex; width: max-content; animation: mq 46s linear infinite; }
.footer__ghost-track span { font-family: var(--f-head); font-size: 11rem; line-height: 1.15; color: #171717; white-space: nowrap; padding-right: 4rem; }
@keyframes mq { to { transform: translateX(-50%); } }

.footer__ruler {
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin-inline: auto;
  height: 1.4rem;
  background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 16px);
  background-size: 100% 60%; background-repeat: no-repeat;
  transform-origin: left center;
}

.footer__bar { width: min(var(--maxw), calc(100% - 2 * var(--pad))); margin-inline: auto; padding: 2.4rem 0; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 2rem; font-family: var(--f-sub); font-size: 1.4rem; color: var(--muted); }
.footer__bar-left { display: flex; align-items: center; gap: 3rem; }
.footer__bar-right { display: flex; align-items: center; gap: 4rem; }
.footer__made { display: inline-flex; align-items: center; gap: 1rem; color: var(--dim); }
/* 1px hairline rather than a hard edge — at 1.2rem the flag is small enough
   that a full-strength border would read heavier than the text beside it */
.footer__made svg { width: 1.8rem; height: 1.2rem; display: block; outline: 1px solid rgba(250,250,250,0.12); outline-offset: 0; }
.footer__bar-link { text-decoration: underline; text-underline-offset: 3px; }
.footer__bar-link:hover { color: var(--fg); }

/* ---------- PRESS & RECOGNITION (ticker) ---------- */

.press { position: relative; padding: var(--sec) 0; border-top: 1px solid var(--line); }
.press__head { padding: 0 var(--pad) 5rem; }
.press__title { font-size: 5.6rem; margin-top: 3rem; }

.ticker {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  overflow: hidden;
}
.ticker__track {
  display: flex;
  gap: 2.4rem;
  width: max-content;
  padding-left: 2.4rem;
  animation: tick 56s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(calc(-50% - 1.2rem)); } }

.pcard { flex: none; width: 40rem; display: flex; flex-direction: column; }
.pcard__thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  overflow: hidden;
  background-color: #101010;
  background-image: radial-gradient(circle, rgba(250,250,250,0.10) 0.9px, transparent 1px);
  background-size: 10px 10px;
  transition: border-color 0.4s var(--ease);
}
.pcard__thumb .brk { width: 1.6rem; height: 1.6rem; margin: 1.2rem; opacity: 0; transition: opacity 0.4s var(--ease); }
.pcard:hover .pcard__thumb { border-color: var(--accent); }
.pcard:hover .pcard__thumb .brk { opacity: 1; }
.pcard__thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.5s var(--ease), transform 0.7s var(--ease);
}
.pcard:hover .pcard__thumb img { filter: grayscale(0); transform: scale(1.04); }

.pcard__tag { margin-top: 2.4rem; font-family: var(--f-sub); font-size: 1.4rem; letter-spacing: 0.06em; color: var(--accent); }
.pcard__title {
  margin-top: 1.2rem; font-family: var(--f-head); font-size: 2.6rem; line-height: 1.22;
  min-height: calc(1.22em * 2); /* reserve 2 lines so the src divider lands at the same height on every card, regardless of headline length */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color 0.35s var(--ease);
}
.pcard:hover .pcard__title { color: var(--accent); }
.pcard__src { margin-top: 1.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); font-family: var(--f-sub); font-size: 1.4rem; color: var(--muted); }

/* ---------- SEE IT LIVE ---------- */

.live { padding: var(--sec) var(--pad); }
.live__head { margin-bottom: 5rem; }
.live__title { font-size: 5.6rem; margin-top: 3rem; }
.live__frame { position: relative; border: 1px solid var(--line); padding: 1.4rem; overflow: hidden; }
.live__frame .brk { width: 2rem; height: 2rem; margin: 1.4rem; }
.live__embed { position: relative; aspect-ratio: 16 / 9; background: #101010; overflow: hidden; }
.live__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- THE DIFFERENCE ---------- */

/* 100vh + the negative bottom margin below are what let #stands's own "top
   top" ScrollTrigger point resolve before #difference has fully scrolled
   past — see the sandwiched-pin overlap comment above .stands. z-index +
   the opaque background are what let #difference actually paint over the
   still-pinned/sticky #stands during that overlap window.

   -100vh, i.e. a FULL viewport: because .diff is itself exactly 100vh, this
   aligns #stands's pin-spacer top with .diff's own top, so #stands pins at
   the same instant .diff fills the viewport and the entire section then
   slides up and off as one piece, unmasking #stands underneath. Partial
   overlaps were tried twice and both read wrong: -35vh showed only .diff's
   bottom third (the .diff__gains row) sliding while the rest was already
   gone, which looked broken rather than deliberate; -10vh was so short the
   unmask was imperceptible and the effect read as simply absent. Must stay
   in sync with UNCOVER_VH in script.js's stands() — see the note there. */
.diff {
  position: relative; z-index: 2; background: var(--bg);
  height: 100vh; margin-bottom: -100vh;
  padding: 5rem var(--pad); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center;
}
.diff__intro { margin-bottom: 3rem; max-width: 78rem; }
.diff__title { font-size: 4.6rem; margin-top: 1.6rem; }
.diff__lede { margin-top: 1.8rem; font-size: 1.7rem; color: #C2C2C2; max-width: 60rem; }

.diff__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.dcol { position: relative; border: 1px solid var(--line); padding: 2.2rem 2.6rem; }
/* #F05D22 at 30% for the FILL, the same hex at full opacity for the STROKE.
   The translucent fill composites down over --bg to a dark rust (~#4F2311),
   NOT a bright orange — so text inside stays light (near-white), the way the
   rest of the dark card system works. An earlier 2026-08-28 pass had these
   two inverted (solid fill, 30% stroke) and consequently flipped all the
   text to dark ink; if you ever swap the fill back to solid orange, the text
   colours below have to flip with it. */
.dcol--hero { border-color: #F05D22; background: rgba(240,93,34,0.3); }
.dcol__label { font-family: var(--f-sub); font-size: 1.4rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dcol--hero .dcol__label { color: #FFD2BF; }
.dcol__title { font-size: 2.3rem; margin-top: 1.2rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--line); }
.dcol--hero .dcol__title { border-bottom-color: rgba(255,255,255,0.20); }
.dcol__rows { display: grid; }
.dcol__row { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding-block: 1.3rem; border-bottom: 1px solid var(--line); }
.dcol__row:last-child { border-bottom: 0; padding-bottom: 0; }
.dcol__row span { color: var(--muted); }
.dcol__row b { font-family: var(--f-head); font-size: 2rem; font-weight: 400; }
.dcol--hero .dcol__row { border-bottom-color: rgba(255,255,255,0.16); }
.dcol--hero .dcol__row span { color: rgba(255,255,255,0.72); }
.dcol--hero .dcol__row b { color: #FFFFFF; }

.diff__gains { margin-top: 1.8rem; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.gain { padding: 1.8rem 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.gain__v { font-family: var(--f-head); font-size: 3.6rem; line-height: 1; color: var(--accent); }
.gain__l { margin-top: 0.8rem; font-family: var(--f-sub); font-size: 1.3rem; color: var(--muted); }

/* ---------- HOW IT WORKS ---------- */

/* margin-top + z-index mirror .diff's overlap above .stands — see the
   sandwiched-pin overlap comment there. The first 35vh of padding is the part
   that slides over #stands; below it the section is a full viewport tall with
   its content centred in it (2026-10-03 — it used to sit at the bottom of the
   section with a ~490px empty band above it, reading as off-centre). */
.how {
  position: relative; z-index: 2; background: var(--bg);
  margin-top: -100vh;
  min-height: 100vh;
  padding: 6rem var(--pad); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center;
}
.how__head { margin-bottom: 6rem; max-width: 74rem; margin-inline: auto; text-align: center; }
.how__title { font-size: 5.6rem; margin-top: 3rem; }
.how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.hstep { position: relative; border: 1px solid var(--line); padding: 3.4rem; min-height: 34rem; display: flex; flex-direction: column; align-items: center; text-align: center; transition: background-color 0.4s var(--ease); }
.hstep:hover { background: #101010; }
.hstep__ic { height: 20rem; width: 100%; margin-bottom: 3.4rem; display: flex; align-items: center; justify-content: center; overflow: visible; }

.hstep__num { font-family: var(--f-sub); font-size: 1.4rem; letter-spacing: 0.1em; color: var(--accent); margin-top: auto; }
.hstep__title { font-size: 3.4rem; margin-top: 1.2rem; }
.hstep__desc { margin-top: 1.4rem; color: #C2C2C2; }
.hstep__meta { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--line); font-family: var(--f-sub); font-size: 1.4rem; color: var(--muted); }


/* ---------- dotted step icons ----------
   Traced from the owner's reference. The static <path> draws every dot as a
   zero-length round-capped segment (the no-JS look); howIcons() in script.js
   swaps it for one <circle> per dot so each can change colour on its own.
   Dot size is in viewBox units: r 1.15 (stroke-width 2.3) keeps a visible gap
   between dots, which sit ~3.7 units apart, at the ~0.65x the icons render. */
.hicon { height: 100%; width: auto; max-width: 100%; overflow: visible; }
.hicon__dots { fill: none; stroke: var(--muted); stroke-width: 2.3; stroke-linecap: round; }
.hicon circle { fill: var(--muted); transition: fill 0.15s linear; }
.hstep.is-lit .hicon circle { fill: var(--accent); }

/* ---------- WHAT CHANGES ON SITE ---------- */

.changes { padding: var(--sec) var(--pad); display: grid; grid-template-columns: 40% 1fr; gap: 8rem; border-top: 1px solid var(--line); }
.changes__left { position: sticky; top: 16rem; align-self: start; }
.changes__title { font-size: 5.2rem; margin-top: 3rem; }

/* ---------- TESTIMONIALS ---------- */

.says { padding: var(--sec) var(--pad); border-top: 1px solid var(--line); }
.says__head { margin-bottom: 6rem; }
.says__title { font-size: 5.6rem; margin-top: 3rem; }
.says__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.say { position: relative; margin: 0; border: 1px solid var(--line); padding: 3.4rem; display: flex; flex-direction: column; transition: border-color 0.4s var(--ease); }
.say:hover { border-color: var(--accent); }
.say p { font-family: var(--f-head); font-size: 2.2rem; line-height: 1.35; flex: 1; padding-bottom: 3rem; }
.say footer { padding-top: 2.4rem; border-top: 1px solid var(--line); font-family: var(--f-sub); font-size: 1.4rem; color: var(--muted); }
.say footer b { display: block; color: var(--fg); font-weight: 400; margin-bottom: 0.3rem; }

/* ---------- COMPLIANT WITH ---------- */

.comply { padding: var(--sec) var(--pad); border-top: 1px solid var(--line); display: grid; grid-template-columns: 38% 1fr; gap: 8rem; align-items: start; }
.comply__title { font-size: 4.4rem; margin-top: 3rem; }
.comply__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.cbox { position: relative; border: 1px solid var(--line); padding: 3rem; min-height: 16rem; display: flex; flex-direction: column; justify-content: flex-end; transition: border-color 0.4s var(--ease); }
.cbox:hover { border-color: var(--accent); }
.cbox__t { font-family: var(--f-head); font-size: 3.2rem; }
.cbox__s { margin-top: 1.2rem; font-family: var(--f-sub); font-size: 1.4rem; color: var(--muted); }

/* ---------- bordered content blocks ---------- */
.diff__intro { max-width: none; }
/* defect detection head: centered */
.defects__head { text-align: center; margin-inline: auto; }
.defects__stats { justify-items: center; text-align: center; }

/* ---------- DEFECTS ---------- */

.defects { padding: var(--sec) var(--pad); border-top: 1px solid var(--line); }
.defects__head { margin-bottom: 6rem; max-width: 74rem; }
.defects__title { font-size: 5.6rem; margin-top: 3rem; }
.defects__desc { margin-top: 3rem; color: #C2C2C2; }

.defects__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4rem;
  margin-bottom: 7rem;
}
.dstat { padding: 0; }
.dstat__v { display: block; font-family: var(--f-head); font-size: 5rem; line-height: 1; color: var(--accent); }
.dstat__l { display: block; margin-top: 1.2rem; font-family: var(--f-sub); font-size: 1.4rem; color: var(--muted); }

.defects__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* 18 cells = 6 x 3, always even */
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  overflow: clip;
}
.tcell {
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  padding: 2.8rem 1.8rem;
  min-height: 14rem;
  text-align: center;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: clip;
  transition: background-color 0.35s var(--ease);
}
.tcell:hover { background: #101010; }
.tcell img {
  width: 4rem; height: 4rem; flex: none;     /* identical box for every icon */
  object-fit: contain; object-position: center;
  opacity: 0.62;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.tcell:hover img { opacity: 1; transform: scale(1.08); }
.tcell span { font-size: 1.5rem; color: #B8B8B8; line-height: 1.3; }
.tcell:hover span { color: var(--fg); }

/* ---------- IMPACT globe ---------- */

.impact__top { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; margin-bottom: 7rem; }
.impact__desc { margin-top: 3rem; max-width: 42rem; color: #C2C2C2; }
/* dotted India map (2026-10-22): grey dots, orange deployment cities */
.impact__map { position: relative; }
.impact__map svg { display: block; width: 100%; height: auto; max-height: 64rem; overflow: visible; }
.india-map .m-dot { fill: color-mix(in srgb, var(--fg) 26%, transparent); }
.india-map .m-pin { fill: var(--accent); }
.india-map .m-ring { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0.5; transform-box: fill-box; transform-origin: center; animation: mapPulse 2.6s var(--ease) infinite; }
.india-map .m-city:nth-child(2n) .m-ring { animation-delay: 1.3s; }
.india-map text { font-family: var(--f-sub); font-size: 11px; letter-spacing: 0.06em; fill: var(--fg); }
@keyframes mapPulse { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .india-map .m-ring { animation: none; } }
html.a11y-stopmotion .india-map .m-ring { animation: none; }

/* ---------- INTEGRATIONS ---------- */

/* radial hub: a centred card with 7 integration nodes orbiting it, joined by
   thin lines. Node positions and the SVG line endpoints share one 0-100
   coordinate space (--nx/--ny percentages == the SVG viewBox units) so they
   never drift out of sync. Collapses to a simple stack + wrapped icon row
   below --intg-hub-bp; see that breakpoint. */
.intg { padding: var(--sec) var(--pad); border-top: 1px solid var(--line); }
.intg__hub { position: relative; max-width: 110rem; min-height: 56rem; margin-inline: auto; display: grid; place-items: center; }

.intg__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.intg__lines line, .intg__lines polyline {
  fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke;
}

.intg__nodes { position: absolute; inset: 0; z-index: 2; }
/* full logos on wide tiles, no drop shadow (2026-10-22) */
/* just the logo, no tile (2026-10-22). The --bg fill (no border) only masks
   the dashed connector where it meets the logo. */
.intg__node {
  position: absolute; left: var(--nx); top: var(--ny); transform: translate(-50%, -50%);
  padding: 1rem 1.4rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  border: 0; background: var(--bg); color: var(--fg);
  box-shadow: none;
  transition: transform 0.35s var(--ease);
}
/* the PNGs are already white artwork: shown as-is (flattening them broke
   aasaan's mark); the colour SVGs are flattened to white */
.intg__node img { display: block; max-width: 22rem; max-height: 4.2rem; width: auto; height: auto; }
.intg__node img[src$=".svg"] { filter: brightness(0) invert(1); }
.intg__node > img[src$="bentley.svg"] { max-height: 3rem; }
.intg__lockup { display: flex; align-items: center; gap: 1rem; }
.intg__lockup img { height: 3rem; max-height: none; }
.intg__lockup span { font-family: var(--f-sub); font-size: 1.9rem; white-space: nowrap; }
.intg__node--soon .intg__lockup, .intg__node--soon > img { opacity: 0.75; }
.intg__word { font-family: var(--f-head); font-size: 2rem; letter-spacing: 0.01em; white-space: nowrap; }
.intg__soon { font-family: var(--f-sub); font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.intg__node--soon .intg__word { opacity: 0.7; }
html.theme-light .intg__node img { filter: invert(1); }
html.theme-light .intg__node img[src$=".svg"] { filter: brightness(0); }
.intg__node:hover { border-color: var(--pop); color: var(--pop); transform: translate(-50%, -50%) scale(1.08); }

.intg__center {
  position: relative; z-index: 3;
  max-width: 40rem; padding: 4rem 3.6rem; text-align: center;
  border: 1px solid var(--line); background: #0E0E0E;
}
.intg__title { font-size: 3.2rem; margin-top: 1.6rem; }
.intg__desc { margin-top: 1.6rem; font-family: var(--f-sub); font-size: 1.5rem; letter-spacing: 0.06em; color: var(--accent); }
.intg__cta { margin-top: 2.8rem; }

/* ---------- solution viz placeholder ---------- */
.sol__viz-ph {
  position: absolute; bottom: 3rem; left: 0; right: 0; text-align: center;
  font-family: var(--f-sub); font-size: 1.3rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  transition: opacity 0.6s var(--ease);
}
#solViz.is-ready .sol__viz-ph { opacity: 0; }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1200px) {
  .impact__grid { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; gap: 4rem; }
  .quotes blockquote, .quotes blockquote:first-child { padding: 0 0 0 3rem; border-left: 1px solid var(--line); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__logo { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); min-height: 22rem; }
  .caps__grid { grid-template-columns: 1fr; }
  .cap { border-right: 0; }
  .cap__list--cols { grid-template-columns: 1fr; }
}

@media (max-width: 1200px) {
  .impact__top { grid-template-columns: 1fr; gap: 4rem; }
  .says__grid { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  :root { --pad: 32px; --sec: 9rem; --nav-h: 7.2rem; }

  .press__title { font-size: 3.8rem; }
  .pcard { width: 30rem; }
  .pcard__title { font-size: 2.1rem; }
  .defects__title { font-size: 3.8rem; }
  .defects__stats { grid-template-columns: 1fr 1fr; }
  .defects__grid { grid-template-columns: repeat(3, 1fr); }   /* 18 = 3 x 6, still even */
  .dstat { padding: 2.4rem; }
  .dstat__v { font-size: 3.6rem; }
  .stands__text { font-size: 3.2rem; }


  .live__title, .how__title, .says__title { font-size: 3.8rem; }
  .diff__title { font-size: 4rem; }
  .diff__cols, .diff__gains, .how__grid { grid-template-columns: 1fr; }
  /* the sandwiched overlap (see .stands's comment) is desktop-only — stacking
     .diff__cols to one column makes .diff far taller than 100vh can hold. With
     no .diff overlap there's no uncover phase to fund, so .stands drops one
     viewport of budget to match UNCOVER_VH going to 0 in script.js. */
  .diff { height: auto; margin-bottom: 0; padding: var(--sec) var(--pad); overflow: visible; }
  .how { margin-top: 0; min-height: 0; padding: var(--sec) var(--pad); }
  .stands { height: 300vh; }
  .hstep { min-height: auto; }
  .changes { grid-template-columns: 1fr; gap: 4rem; }
  .changes__left { position: static; }
  .changes__title { font-size: 4rem; }
  .comply { grid-template-columns: 1fr; gap: 4rem; }
  .comply__title, .intg__title { font-size: 3.4rem; }
  .comply__grid { grid-template-columns: 1fr; }

  /* the radial hub only works with room to orbit in; below this it becomes
     a simple stack: centre card, then the 7 nodes as a wrapped icon row */
  .intg__hub { display: flex; flex-direction: column; align-items: center; gap: 3.6rem; min-height: auto; max-width: none; }
  .intg__lines { display: none; }
  .intg__nodes { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; max-width: 60rem; }
  .intg__node { position: static; transform: none; }
  .intg__node:hover { transform: none; }

  html { font-size: 8.6px; }

  .nav__pill--mono { width: 4.2rem; height: 4.2rem; }
  /* logo keeps its auto width — it holds the full lockup, not a square mark */
  .nav__pill--logo { height: 4.2rem; padding: 0 1.4rem; }
  .nav__pill--logo svg { height: 1.4rem; }
  .nav__pill--cta { height: 4.2rem; padding: 0 2rem; font-size: 1.5rem; }


  .about { grid-template-columns: 1fr; gap: 4rem; }
  .about__title { font-size: 4.2rem; }
  .about__foot { padding-top: 4rem; grid-template-columns: 1fr; gap: 3rem; align-items: start; }

  .stands__text { font-size: 3.2rem; }


  .steps__grid { grid-template-columns: 1fr; }
  .step { min-height: auto; }
  .steps__title, .diff__title, .flows__title, .cover__title,
  .plat__title, .impact__title, .cta__title { font-size: 3.8rem; }

  .challenge { grid-template-columns: 1fr; gap: 4rem; }
  .challenge__left { position: static; }
  .challenge__title { font-size: 4.2rem; }
  .acc__head { grid-template-columns: 1fr 2.4rem; gap: 1.4rem; }
  .acc__label { grid-column: 1 / -1; }
  .acc__title { font-size: 2.2rem; }
  .acc__body-in > * { margin-left: 0; }

  .sol__stick { overflow: hidden; }
  .sol__text { width: 88cqw; padding: 0 var(--pad); }
  .sol__title { font-size: 3.8rem; }
  .sol__panel { width: 88cqw; height: 52vh; }
  .sol__payoff { width: 92cqw; height: auto; padding: 0 var(--pad); }
  .sol__payoff-title { font-size: 3rem; margin-bottom: 3rem; }
  .sol__stats { grid-template-columns: 1fr 1fr; height: auto; }
  .sol__stat { padding: 2.2rem; min-height: 14rem; border-bottom: 1px solid var(--line); }
  .sol__stat:nth-child(2n) { border-right: 0; }
  .sol__stat-v { font-size: 2.8rem; }
  .sol__stat-l--big { font-size: 1.9rem; }


  .diff__row { grid-template-columns: 1fr; gap: 0.6rem; }
  .diff__row--head { display: none; }
  .diff__a::before { content: "Engineer alone — "; font-family: var(--f-sub); font-size: 1.3rem; color: var(--muted); }
  .diff__b::before { content: "With Contineu — "; font-family: var(--f-sub); font-size: 1.3rem; color: var(--muted); }
  .diff__a, .diff__b { font-size: 2rem; }

  .plat__main { grid-template-columns: 1fr; }
  .plat__left { border-right: 0; border-bottom: 1px solid var(--line); padding: 4rem var(--pad); }
  .row { padding: 2.6rem var(--pad); }
  .row__title { font-size: 2rem; }

  .cap { padding: 4rem var(--pad); }
  .cap__title { font-size: 2.6rem; }

  .flows__grid { grid-template-columns: 1fr; }
  .flow__title { font-size: 2.6rem; }

  .std { grid-template-columns: 1fr; gap: 4rem; }

  .cta__inner { padding: 7rem 2.4rem; }
  .cta__box, .cta__inner { --cut: 2.6rem; }
  .cta__desc { white-space: normal; }

  .footer__news { grid-template-columns: 1fr; gap: 4rem; }
  .footer__news-title { font-size: 3.6rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__menu, .footer__col { padding: 4rem var(--pad); border-bottom: 1px solid var(--line); }
  .footer__ghost-track span { font-size: 6rem; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .footer__bar-left { gap: 2rem; }
  .footer__bar-right { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}

@media (max-width: 600px) {
  .intg__center { padding: 3.4rem 2.6rem; }
  .impact__grid { grid-template-columns: 1fr 1fr; }
  .impact__cell { min-height: 14rem; padding: 2.2rem; }
  .impact__v { font-size: 3.6rem; }
  .cover__grid { grid-template-columns: 1fr 1fr; }
  .defects__grid { grid-template-columns: repeat(2, 1fr); }   /* 18 = 2 x 9 */
  .sol__stats { grid-template-columns: 1fr; }
  .sol__stat { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Only two themes since 2026-10-03: dark (the :root tokens) and LIGHT
   (html.theme-light, further down). The JDID and DSGN palettes and the
   black & white mode, with all of their overrides, were removed on request. */

/* =========================================================
   MULTI-PAGE ADDITIONS (2026-09-22)
   Shared nav links, the blog / contact / about pages, the
   accessibility widget, and the LIGHT ("white") theme. All
   additive: scoped to new classes or to html.theme-light, so
   nothing here touches the single-page homepage in its dark
   default. See wiki/pages/site-pages.md.
   ========================================================= */

/* (nav page links — .nav__links / .nav__pill--link — live with the rest of
   the nav, near the top of this file) */

/* ---------- shared page masthead ---------- */
.masthead { padding: calc(var(--nav-h) + 7rem) var(--pad) 5rem; border-bottom: 1px solid var(--line); }
.masthead__label { margin-bottom: 2.4rem; }
.masthead__title { font-size: 7.4rem; max-width: 20ch; }
.masthead__desc { margin-top: 2.8rem; max-width: 62rem; color: var(--muted); font-size: 2rem; line-height: 1.5; }

/* ---------- branded cover art (no external images) ----------
   Layered gradient + halftone dots + corner brackets, tinted by a
   per-card --tint hue. Reads as an intentional abstract cover in the
   site's own language rather than a missing <img>. */
.cover-art {
  position: relative; overflow: hidden; background: #0D0D0D;
  background-image:
    radial-gradient(120% 90% at 18% 12%, rgba(240,93,34,0.30) 0%, transparent 55%),
    radial-gradient(90% 80% at 92% 96%, rgba(160,160,170,0.14) 0%, transparent 60%),
    linear-gradient(140deg, #17140F 0%, #0B0B0C 100%);
}
.cover-art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(250,250,250,0.10) 0.9px, transparent 1px);
  background-size: 6px 6px; mix-blend-mode: screen; opacity: 0.5;
}
/* (the orange diagonal-stripe ::after overlay was removed 2026-10-22) */
.cover-art[data-tint="product"]  { background-image: radial-gradient(120% 90% at 18% 12%, rgba(240,93,34,0.34) 0%, transparent 55%), linear-gradient(140deg, #1A140D 0%, #0B0B0C 100%); }
.cover-art[data-tint="research"] { background-image: radial-gradient(120% 90% at 82% 14%, rgba(120,150,220,0.24) 0%, transparent 55%), linear-gradient(140deg, #10131A 0%, #0B0B0C 100%); }
.cover-art[data-tint="field"]    { background-image: radial-gradient(120% 90% at 20% 90%, rgba(90,190,140,0.20) 0%, transparent 55%), linear-gradient(140deg, #0F1712 0%, #0B0B0C 100%); }
.cover-art[data-tint="company"]  { background-image: radial-gradient(120% 90% at 50% 12%, rgba(230,180,90,0.22) 0%, transparent 55%), linear-gradient(140deg, #191510 0%, #0B0B0C 100%); }
.cover-art__mark {
  position: absolute; left: 2.4rem; bottom: 2.2rem; z-index: 2;
  font-family: var(--f-mono); font-size: 1.3rem; letter-spacing: 0.06em;
  color: rgba(250,250,250,0.72); text-transform: lowercase;
}
.cover-art__glyph { position: absolute; right: 2rem; top: 1.8rem; z-index: 2; width: 5.2rem; height: 5.2rem; color: rgba(250,250,250,0.5); }
.cover-art__glyph svg { width: 100%; height: 100%; }
/* Unsplash photo per article (2026-10-21). Under the tint gradients, so
   covers stay on-palette; the glyph and wordmark stay on top. */
.cover-art__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) brightness(0.62) contrast(1.05); }

/* ---------- BLOG: listing ---------- */
.blog { padding: 6rem var(--pad) var(--sec); }

.blog__featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5rem; align-items: stretch; padding-bottom: 6rem; }
.blog__feat-media { position: relative; aspect-ratio: 16 / 10; }
.blog__feat-media .cover-art { position: absolute; inset: 0; }
.blog__feat-body { display: flex; flex-direction: column; justify-content: center; }
.blog__feat-meta { font-family: var(--f-sub); font-size: 1.4rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-bottom: 2rem; }
.blog__feat-title { font-size: 4.6rem; line-height: 1.06; }
.blog__feat-ex { margin-top: 2.4rem; max-width: 46rem; color: var(--muted); font-size: 1.9rem; }
.blog__feat-body .btn { margin-top: 3.6rem; align-self: flex-start; }

.blog__tabs { display: flex; gap: 3.2rem; padding: 2.6rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.blog__tab { font-family: var(--f-sub); font-size: 1.4rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); padding-bottom: 0.4rem; position: relative; transition: color 0.3s var(--ease); }
.blog__tab:hover { color: var(--muted); }
.blog__tab.is-active { color: var(--fg); }
.blog__tab.is-active::after { content: ""; position: absolute; left: 0; bottom: -2.7rem; width: 100%; height: 2px; background: var(--accent); }

.blog__list { display: grid; }
.post {
  display: grid; grid-template-columns: 1fr 34rem; gap: 5rem; align-items: center;
  padding: 5rem 0; border-bottom: 1px solid var(--line);
}
.post__cat { display: inline-block; align-self: start; font-family: var(--f-sub); font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bg); background: var(--fg); padding: 0.7rem 1.2rem; }
.post__cat[data-cat="product"]  { background: var(--accent); color: #0A0A0A; }
.post__body { display: flex; flex-direction: column; align-items: flex-start; }
.post__date { margin-top: 2.4rem; font-family: var(--f-sub); font-size: 1.4rem; color: var(--dim); }
.post__title { margin-top: 1.2rem; font-size: 3.2rem; line-height: 1.1; }
.post a.post__title:hover, .post__title a:hover { color: var(--accent); }
.post__ex { margin-top: 1.8rem; max-width: 56rem; color: var(--muted); font-size: 1.8rem; }
.post__read { margin-top: 2.4rem; font-family: var(--f-sub); font-size: 1.4rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.8rem; }
.post__read svg { width: 1.4rem; height: 1.4rem; transition: transform 0.35s var(--ease); }
.post:hover .post__read svg { transform: translateX(4px); }
.post__media { position: relative; aspect-ratio: 16 / 10; }
.post__media .cover-art { position: absolute; inset: 0; }
.post.is-hidden { display: none; }

/* ---------- BLOG: article ---------- */
.article { padding: calc(var(--nav-h) + 6rem) var(--pad) 0; }
.article__head { max-width: 78rem; margin: 0 auto; text-align: center; }
.article__cat { display: inline-block; font-family: var(--f-sub); font-size: 1.2rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 2.4rem; }
.article__title { font-size: 5.4rem; line-height: 1.05; }
.article__meta { margin-top: 2.8rem; font-family: var(--f-sub); font-size: 1.4rem; color: var(--dim); display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; }
.article__meta span::after { content: "·"; margin-left: 1.4rem; color: var(--line); }
.article__meta span:last-child::after { content: ""; margin: 0; }
.article__cover { position: relative; aspect-ratio: 21 / 9; margin: 5rem 0 0; }
.article__cover .cover-art { position: absolute; inset: 0; }
.article__body { max-width: 68rem; margin: 5rem auto 0; }
.article__lead { font-family: var(--f-head); font-weight: 300; font-size: 2.6rem; line-height: 1.35; color: var(--fg); }
.article__body > p { margin-top: 2.6rem; font-size: 1.9rem; line-height: 1.65; color: #D2D2D2; }
.article__body h2 { margin-top: 5rem; font-size: 3rem; }
.article__body h3 { margin-top: 3.6rem; font-size: 2.2rem; color: var(--fg); }
.article__body ul { margin-top: 2.2rem; display: grid; gap: 1.2rem; }
.article__body li { position: relative; padding-left: 2.2rem; font-size: 1.85rem; color: #D2D2D2; }
.article__body li::before { content: ""; position: absolute; left: 0; top: 1.1rem; width: 0.8rem; height: 0.8rem; background: var(--accent); }
.article__body blockquote { margin: 4rem 0 0; padding-left: 3rem; border-left: 2px solid var(--accent); font-family: var(--f-head); font-weight: 300; font-size: 2.4rem; line-height: 1.4; }
.article__foot { max-width: 68rem; margin: 6rem auto 0; padding: 4rem 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.article__back { font-family: var(--f-sub); font-size: 1.5rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.9rem; transition: color 0.3s var(--ease); }
.article__back:hover { color: var(--accent); }
.article__back svg { width: 1.5rem; height: 1.5rem; }
/* article tag list (2026-10-22, scripts/seo.py writes the markup) */
.article__tags { max-width: 68rem; margin: 6rem auto 0; padding-top: 3rem; border-top: 1px solid var(--line); }
.article__tags ul { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.article__tags li { padding: 0.7rem 1.2rem; border: 1px solid var(--line); font-family: var(--f-sub); font-size: 1.3rem; color: var(--muted); }
.article__share { display: flex; gap: 1rem; }
/* LinkedIn + email as one matched pair: same box, same filled-glyph size */
.article__share a { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border: 1px solid var(--line); color: var(--muted); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
.article__share a:hover { color: var(--accent); border-color: var(--accent); }
.article__share svg { width: 1.9rem; height: 1.9rem; display: block; }
.article__related { margin-top: 7rem; padding: 6rem var(--pad); border-top: 1px solid var(--line); }

/* ---------- CONTACT ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: calc(100vh - var(--nav-h)); }
.contact__left { padding: calc(var(--nav-h) + 7rem) 6rem 7rem var(--pad); display: flex; flex-direction: column; justify-content: center; }
.contact__title { font-size: 7rem; line-height: 1.02; }
.contact__desc { margin-top: 3rem; max-width: 42rem; color: var(--muted); font-size: 1.9rem; }
.contact__direct { margin-top: 5rem; display: grid; gap: 0.8rem; }
.contact__direct-label { font-family: var(--f-sub); font-size: 1.4rem; color: var(--dim); }
.contact__direct a { font-family: var(--f-head); font-size: 2.6rem; color: var(--accent); width: fit-content; }
.contact__direct a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact__social { margin-top: 3.4rem; display: flex; gap: 2.4rem; font-family: var(--f-sub); font-size: 1.5rem; }
.contact__social a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.contact__social a:hover { color: var(--fg); }

.contact__right { position: relative; padding: calc(var(--nav-h) + 7rem) var(--pad) 7rem 6rem; border-left: 1px solid var(--line); overflow: hidden; }
.contact__right::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(240,93,34,0.16) 0.9px, transparent 1px);
  background-size: 22px 22px; opacity: 0.5;
}
.cform { position: relative; z-index: 1; max-width: 46rem; display: grid; gap: 3.2rem; }
.cfield { position: relative; display: grid; gap: 0; }
.cfield label { font-family: var(--f-sub); font-size: 1.4rem; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 1rem; }
.cfield input, .cfield select, .cfield textarea {
  width: 100%; padding: 1.2rem 0; background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--fg); font-family: var(--f-body); font-size: 1.9rem; transition: border-color 0.4s var(--ease);
}
.cfield textarea { resize: vertical; min-height: 8rem; }
.cfield select { cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 3rem; }
.cfield--select { position: relative; }
.cfield--select::after { content: ""; position: absolute; right: 0.4rem; bottom: 2rem; width: 0.9rem; height: 0.9rem; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.cfield input::placeholder, .cfield textarea::placeholder { color: var(--dim); }
.cfield input:focus, .cfield select:focus, .cfield textarea:focus { outline: none; border-bottom-color: var(--accent); }
.cform option { background: #101010; color: var(--fg); }
.cform .btn { justify-content: center; width: 100%; margin-top: 1rem; }
.cform__note { font-family: var(--f-sub); font-size: 1.4rem; color: var(--accent); min-height: 1.4em; }

/* ---------- ABOUT ---------- */
.about-sec { padding: var(--sec) var(--pad); border-top: 1px solid var(--line); }
.about-lede { max-width: 92rem; }
.about-lede__title { font-size: 4.6rem; line-height: 1.12; }
.about-lede__title .accent { color: var(--accent); }
.about-lede p { margin-top: 3rem; font-size: 2rem; line-height: 1.6; color: #D2D2D2; max-width: 72rem; }

/* no grid lines (2026-10-21, owner) */
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; }
.about-stat { padding: 2rem 0; }
.about-stat__v { font-family: var(--f-head); font-size: 5rem; color: var(--accent); line-height: 1; }
.about-stat__l { margin-top: 1.6rem; font-family: var(--f-sub); font-size: 1.5rem; color: var(--muted); }

.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); }
.about-card { position: relative; padding: 2.8rem 2.8rem 3rem; border-right: 1px solid var(--line); }
.about-card:nth-child(3n) { border-right: 0; }
.about-card:nth-child(n+4) { border-top: 1px solid var(--line); }
/* dotted icons in the #how style (2026-10-21): one round-capped zero-length
   segment per dot, sampled from the old line icons at 2 units */
.about-card__ic { display: block; width: 4.6rem; height: 4.6rem; margin-bottom: 1.8rem; }
.about-card__ic svg { width: 100%; height: 100%; overflow: visible; }
.about-card__dots { fill: none; stroke: var(--accent); stroke-width: 4.4; stroke-linecap: round; }
.about-card__t { font-size: 2rem; }
.about-card__d { margin-top: 1rem; color: var(--muted); font-size: 1.5rem; }

/* ---------- about: team ---------- */
/* 45 people; portraits arrive later, so each card is a placeholder frame.
   Drop an <img> into .team__ph and it fills the frame in greyscale. */
.team { margin-top: 4rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.4rem 1.6rem; }
.team__card { min-width: 0; }
.team__ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: color-mix(in srgb, var(--fg) 6%, var(--bg)); border: 1px solid var(--line); }
.team__ph::before { content: ""; position: absolute; left: 50%; top: 30%; width: 32%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: color-mix(in srgb, var(--fg) 10%, transparent); }
.team__ph::after { content: ""; position: absolute; left: 50%; bottom: -14%; width: 64%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: color-mix(in srgb, var(--fg) 10%, transparent); }
.team__ph img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.4s var(--ease); }
.team__card:hover .team__ph img { filter: none; }
.team__name { margin-top: 1.2rem; font-family: var(--f-head); font-size: 1.8rem; }
.team__role { margin-top: 0.4rem; font-family: var(--f-sub); font-size: 1.3rem; color: var(--muted); }
@media (max-width: 991px) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .team { grid-template-columns: repeat(2, 1fr); } }

.about-story { display: grid; grid-template-columns: 24rem 1fr; gap: 5rem; }
.about-story__year { font-family: var(--f-head); font-size: 2rem; color: var(--dim); }
.about-story__row { display: grid; grid-template-columns: 24rem 1fr; gap: 5rem; padding: 3.4rem 0; border-top: 1px solid var(--line); }
.about-story__row:first-of-type { border-top: 0; }
.about-story__h { font-size: 2.6rem; }
.about-story__p { margin-top: 1.2rem; color: var(--muted); font-size: 1.8rem; max-width: 58rem; }

/* ---------- ACCESSIBILITY WIDGET ---------- */
.a11y__btn {
  position: fixed; left: 3.6rem; bottom: 4.4rem; z-index: 200;   /* left since 2026-10-22; inset so its label clears the edge */
  width: 5.4rem; height: 5.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #0A0A0A;
  box-shadow: 0 0.6rem 1.8rem rgba(0,0,0,0.4);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.a11y__btn:hover { transform: scale(1.06); }
.a11y__btn svg { width: 2.8rem; height: 2.8rem; }
.a11y__btn-label { position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--f-sub); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); pointer-events: none; }
.a11y__panel {
  position: fixed; left: 2.4rem; bottom: 11.4rem; z-index: 201;
  width: 33rem; max-width: calc(100vw - 4.8rem);
  background: rgba(14,14,14,0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); padding: 2.4rem;
  transform: translateY(1rem); opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.a11y__panel.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.a11y__panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.a11y__panel-title { font-family: var(--f-sub); font-size: 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); }
.a11y__close { color: var(--muted); width: 2rem; height: 2rem; display: grid; place-items: center; }
.a11y__close:hover { color: var(--accent); }
.a11y__close svg { width: 1.6rem; height: 1.6rem; }
.a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.a11y__opt {
  display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center;
  padding: 1.8rem 1rem; border: 1px solid var(--line); color: var(--muted);
  font-family: var(--f-sub); font-size: 1.3rem;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.a11y__opt svg { width: 2.2rem; height: 2.2rem; }
.a11y__opt:hover { border-color: rgba(240,93,34,0.5); color: var(--fg); }
.a11y__opt.is-on { border-color: var(--accent); color: var(--fg); background: rgba(240,93,34,0.12); }
.a11y__reset { grid-column: 1 / -1; margin-top: 0.6rem; padding: 1.4rem; border: 1px solid var(--line); color: var(--muted); font-family: var(--f-sub); font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; }
.a11y__reset:hover { border-color: var(--accent); color: var(--fg); }
/* light theme panel (2026-10-22): it was always dark, so in light + high
   contrast the (now near-black) option text sat on a near-black panel */
html.theme-light .a11y__panel { background: rgba(246,245,240,0.97); box-shadow: 0 1rem 3rem rgba(20,17,13,0.12); }
html.theme-light .a11y__opt.is-on { background: rgba(229,85,28,0.10); }
html.theme-light .a11y__btn-label { color: var(--fg); }

/* the toggle classes the widget sets on <html> */
html.a11y-bigtext { font-size: 9.9px; }
@media (max-width: 991px) { html.a11y-bigtext { font-size: 10px; } }
@media (max-width: 640px) { html.a11y-bigtext { font-size: 9.3px; } }
html.a11y-spacing body { letter-spacing: 0.06em; word-spacing: 0.14em; line-height: 1.9; }
html.a11y-spacing p, html.a11y-spacing li { line-height: 1.9; }
html.a11y-links a:not(.btn):not(.nav__pill):not(.a11y__opt) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
/* Dyslexia friendly (2026-10-22): OpenDyslexic from jsdelivr (@fontsource),
   which the browser only downloads once the option switches it on, plus
   wider letter/word spacing and taller lines. */
@font-face { font-family: "OpenDyslexic"; src: url("https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.3.0/files/opendyslexic-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.3.0/files/opendyslexic-latin-700-normal.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
html.a11y-dyslexia body,
html.a11y-dyslexia h1, html.a11y-dyslexia h2, html.a11y-dyslexia h3,
html.a11y-dyslexia .label, html.a11y-dyslexia .btn, html.a11y-dyslexia input,
html.a11y-dyslexia select, html.a11y-dyslexia textarea, html.a11y-dyslexia button {
  font-family: "OpenDyslexic", "Comic Sans MS", Verdana, sans-serif !important;
  letter-spacing: 0.04em !important; word-spacing: 0.16em !important; font-style: normal !important;
}
html.a11y-dyslexia p, html.a11y-dyslexia li { line-height: 1.8; }
html.a11y-legible body,
html.a11y-legible h1, html.a11y-legible h2, html.a11y-legible h3,
html.a11y-legible .label, html.a11y-legible .btn, html.a11y-legible input,
html.a11y-legible select, html.a11y-legible textarea, html.a11y-legible button {
  font-family: "Helvetica Neue", Arial, sans-serif !important; letter-spacing: 0 !important;
}
html.a11y-stopmotion *, html.a11y-stopmotion *::before, html.a11y-stopmotion *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}
/* high contrast lifts text AND strokes, and the panel's own controls go full-strength */
html.a11y-contrast { --muted: #E4E4E4; --dim: #C7C7C7; --line: #6A6A6A; }
html.a11y-contrast .a11y__opt, html.a11y-contrast .a11y__reset, html.a11y-contrast .a11y__close { color: var(--fg); border-color: var(--muted); }
html.a11y-contrast .nav__pill--link { color: var(--fg); }
html.a11y-contrast .article__body > p, html.a11y-contrast .post__ex,
html.a11y-contrast .about-lede p, html.a11y-contrast .article__body li { color: #F2F2F2; }
/* contrast on the light theme darkens secondary text instead */
html.theme-light.a11y-contrast { --muted: #1F1F1F; --dim: #3A3A3A; --line: #8A867E; }

/* =========================================================
   LIGHT ("white") THEME — the 5th stop in the theme cycle.
   Mostly a token swap, plus the same kind of component overrides
   mono carries, because several surfaces hardcode dark values or
   are dark media that must keep light text over them.
   ========================================================= */
html.theme-light {
  --bg:     #F6F5F0;
  --fg:     #14110D;
  --muted:  #6A665E;
  --dim:    #716D64;
  --line:   #E2E0D8;
  --accent: #E5551C;
  --pop:    #E5551C;
}
html.theme-light body { background: var(--bg); }

/* nav pills flip to translucent-white */
/* no stroke to lean on, so the light pills use a warm-grey fill that still
   separates from the off-white ground (pure white would vanish into it) */
html.theme-light .nav__pill { background: rgba(232,229,220,0.78); }
html.theme-light .nav.stuck .nav__pill { background: rgba(232,229,220,0.94); }
html.theme-light .nav__pill--cta, html.theme-light .nav.stuck .nav__pill--cta { background: var(--accent); color: #FFF; }

/* the many hardcoded secondary-text greys (#C2C2C2 family) go dark */
html.theme-light .step__desc, html.theme-light .acc__body-in p, html.theme-light .acc__body-in li,
html.theme-light .sol__desc, html.theme-light .plat__desc, html.theme-light .cap__list li,
html.theme-light .cover__desc, html.theme-light .footer__news-desc, html.theme-light .footer__col p,
html.theme-light .diff__lede, html.theme-light .hstep__desc, html.theme-light .defects__desc,
html.theme-light .impact__desc, html.theme-light .cta__desc, html.theme-light .article__body > p,
html.theme-light .article__body li, html.theme-light .about-lede p { color: #47443D; }
html.theme-light .tcell span { color: #55524B; }
html.theme-light .about__copy { color: #3C3A34; }

/* dark hover fills go pale */
html.theme-light .step:hover, html.theme-light .row:hover, html.theme-light .impact__cell:hover,
html.theme-light .hstep:hover, html.theme-light .tcell:hover, html.theme-light .sol__stat--cta:hover { background: #EDEBE3; }
/* #integrations on light: white tiles, light stroke, no drop shadow (2026-10-21) */
html.theme-light .intg__node { background: var(--bg); }
html.theme-light .intg__center { background: #FFFFFF; border-color: var(--line); }
html.theme-light .intg__title { color: var(--fg); }
/* #stack's model viewport goes light too; bim-viewer.js darkens the wireframe */
html.theme-light .sol__panel { background: #F6F5F0; }
html.theme-light .sol__panel-dots { background-image: radial-gradient(circle, rgba(20,17,13,0.16) 0.9px, transparent 1px); }

/* footer decorative darks invert to pale */
html.theme-light .footer__ghost-track span { color: #E9E7DF; }
html.theme-light .footer__logo svg { color: #DCDAD0; }

/* branded cover art gets a light ground so it doesn't read as a black hole */
html.theme-light .cover-art { background: #ECEAE1; background-image: radial-gradient(120% 90% at 18% 12%, rgba(229,85,28,0.22) 0%, transparent 55%), linear-gradient(140deg, #F0EDE4 0%, #E4E1D6 100%); }
html.theme-light .cover-art::before { mix-blend-mode: multiply; }
html.theme-light .cover-art::after { opacity: 0.35; }
html.theme-light .cover-art__mark { color: rgba(20,17,13,0.6); }
html.theme-light .cover-art__glyph { color: rgba(20,17,13,0.4); }

/* contact form panel dots + article prose */
html.theme-light .contact__right::before { background-image: radial-gradient(circle, rgba(229,85,28,0.2) 0.9px, transparent 1px); }
html.theme-light .cform option { background: #FFF; color: var(--fg); }
html.theme-light .about-lede p, html.theme-light .about-story__p { color: #47443D; }

/* the .cta box interior is var(--bg), so it flips light with the theme; the
   .cta__desc grey is already remapped dark in the secondary-text group above.
   The stipple needs a touch more strength on white than on near-black. */
html.theme-light .cta__dots { background-image: radial-gradient(circle, rgba(229,85,28,0.22) 0.9px, transparent 1px); }

/* .dcol--hero hardcodes white text over a 30%-orange fill; on a light ground
   that fill composites to a pale peach and the white text vanishes. Deepen the
   fill to solid orange in light mode so its (unchanged) white text still reads,
   keeping the card's deliberately-bold treatment. */
html.theme-light .dcol--hero { background: var(--accent); border-color: var(--accent); }

/* dark media sections keep light text over their (unchanged) dark imagery */
html.theme-light .stands__text { color: #FAFAFA; }


/* selection */
html.theme-light ::selection { background: var(--accent); color: #FFF; }

/* the toggle dot uses --pop, already handled; give the pill a readable idle colour */
html.theme-light .nav__pill--mono { color: var(--muted); }

/* ---------- responsive: new pages ---------- */
@media (max-width: 991px) {
  .masthead { padding: calc(var(--nav-h) + 5rem) var(--pad) 4rem; }
  .masthead__title { font-size: 4.6rem; }
  .blog__featured { grid-template-columns: 1fr; gap: 3rem; }
  .blog__feat-title { font-size: 3.6rem; }
  .blog__tabs { gap: 2rem; overflow-x: auto; }
  .post { grid-template-columns: 1fr; gap: 2.6rem; }
  .post__media { order: -1; }
  .post__title { font-size: 2.6rem; }
  .article { padding-top: calc(var(--nav-h) + 4rem); }
  .article__title { font-size: 3.6rem; }
  .article__cover { aspect-ratio: 16 / 10; }
  .contact { grid-template-columns: 1fr; }
  .contact__left { padding: calc(var(--nav-h) + 5rem) var(--pad) 4rem; }
  .contact__title { font-size: 4.6rem; }
  .contact__right { padding: 4rem var(--pad) 6rem; border-left: 0; border-top: 1px solid var(--line); }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-card { border-right: 0; border-top: 1px solid var(--line); }
  .about-card:first-child { border-top: 0; }
  .about-lede__title { font-size: 3.4rem; }
  .about-story, .about-story__row { grid-template-columns: 1fr; gap: 1rem; }
  .nav__pill--link { padding: 0 1.6rem; font-size: 1.5rem; height: 4.2rem; }
}
@media (max-width: 600px) {
  .nav__links { display: none; }  /* Blog / About move into the menu pill */
  .nav__pill--menu { display: inline-flex; }
  .a11y__btn { left: 3rem; bottom: 3.6rem; }
  .about-stats { grid-template-columns: 1fr; }
}

/* October 2026 editorial and team content. */
.editorial-cover { display:block; width:100%; height:100%; object-fit:cover; }
.article__cover { aspect-ratio:16/9; height:auto; }
.post__media .editorial-cover { object-fit:contain; background:#181f19; }
.team__bio { font-size:1.65rem; line-height:1.55; color:var(--muted, var(--fg)); margin-top:1rem; }
.team__profile { display:inline-block; font-size:1.5rem; margin-top:1rem; text-decoration:underline; text-underline-offset:.3em; }
.team__initials { position:absolute; inset:0; display:grid; place-items:center; font-size:4rem; color:var(--dim); z-index:1; }
.team__ph:has(.team__initials)::before,.team__ph:has(.team__initials)::after { display:none; }
.team { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4rem 2.4rem; }
.team__ph { aspect-ratio:1; }
.team__ph img { object-position:center 30%; }
.form-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
button:disabled { opacity:.55; cursor:wait; }
.say h3 { font-size:2.3rem; margin-bottom:2rem; }
.say a { display:inline-block; margin-top:2rem; text-decoration:underline; }
@media(max-width:991px) { .team { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) { .team { grid-template-columns:repeat(2,minmax(0,1fr)); } .team__bio { font-size:1.5rem; } .gain__v { font-size:3rem; } }

/* Varied photo covers and a compact top-of-page metric row. */
.post__media .editorial-photo { object-fit:cover; }
.article__cover .editorial-photo { object-fit:cover; }
.article__image-credit { max-width:120rem; margin:1.4rem auto 4rem; padding:0 var(--pad); font-size:1.35rem; line-height:1.6; color:var(--muted); }
.article__image-credit a { text-decoration:underline; text-underline-offset:.2em; }
.post__media { position:relative; }
.photo-label { position:absolute; right:1rem; bottom:1rem; padding:.4rem .8rem; font-size:1.1rem; color:#fff; background:#000b; }
.impact__grid--key { grid-template-columns:repeat(2,minmax(0,1fr)); border-bottom:1px solid var(--line); }
.impact__grid--key .impact__cell { padding:4rem var(--pad); }
.impact__grid--key .impact__l small { display:block; font-size:1.25rem; margin-top:.7rem; color:var(--muted); }
@media(max-width:600px){.impact__grid--key .impact__cell{padding:3rem 2rem}.impact__grid--key .impact__v{font-size:4.5rem}.impact__grid--key .impact__l{font-size:1.5rem}}

/* Simple project-documentation information flow. */
.comply { grid-template-columns:1fr; gap:4rem; }
.comply__left { max-width:85rem; }.comply__title { margin-top:2rem; }
.doc-flow__intro { color:var(--muted); font-size:1.8rem; margin-bottom:2.4rem; }
.doc-flow__steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3.6rem; padding:0; margin:0; list-style:none; }
.doc-flow__steps li { position:relative; border:1px solid var(--line); padding:2.8rem 2.4rem; }
.doc-flow__steps li:not(:last-child)::after { content:'→'; position:absolute; right:-3rem; top:50%; transform:translateY(-50%); color:var(--accent); font-size:2.8rem; }
.doc-flow__number { color:var(--accent); font-family:var(--f-mono); font-size:1.4rem; }
.doc-flow h3 { font-size:2.8rem; margin:2rem 0 1.3rem; }
.doc-flow li p { font-size:1.6rem; line-height:1.5; }
.doc-flow__example { display:block; border-top:1px solid var(--line); padding-top:1.6rem; margin-top:2rem; font-size:1.45rem; line-height:1.65; color:var(--muted); }
@media(max-width:750px){.doc-flow__steps{grid-template-columns:1fr;gap:3.2rem}.doc-flow__steps li:not(:last-child)::after{content:'↓';top:auto;bottom:-3rem;right:50%;transform:translateX(50%)}.doc-flow h3{margin:1rem 0}.doc-flow__steps li{padding:2.4rem}.doc-flow__example{margin-top:1.4rem;padding-top:1.4rem}}

/* Integrated maker/checker QC, reporting and access controls. */
.sol__stat-desc { margin-top:1.4rem; font-size:1.45rem; line-height:1.5; color:var(--muted); }
.sol__stats { height:52%; }
.sol__stat { padding:6.5rem 2.1rem 2.4rem; }
.sol__stat-v { font-size:3.5rem; }
.sol__payoff-title { font-size:4.7rem; margin-bottom:3.5rem; }
@media(max-width:900px){.sol__stats{height:auto}.sol__stat{min-height:25rem}.sol__payoff-title{font-size:3rem}.sol__stat-v{font-size:2.8rem}}

/* LinkedIn source attribution, October 2026 release. */
.article__source { font-size: 1.65rem; line-height: 1.7; color: var(--muted); margin: 3rem 0; }
.article__source a { color: var(--text); text-decoration: underline; text-underline-offset: .3rem; }

/* Project onboarding FAQs, 29 October 2026. */
.faq-section { padding:10rem var(--pad); border-top:1px solid var(--line); }
.faq-section h2 { font-family:var(--f-head); font-size:clamp(3.6rem,5vw,6rem); line-height:1.1; margin:2rem 0 5rem; }
.faq-item { border-top:1px solid var(--line); }
.faq-item:last-child { border-bottom:1px solid var(--line); }
.faq-item summary { cursor:pointer; padding:2.6rem 3rem 2.6rem 0; font-size:2.3rem; line-height:1.4; }
.faq-item summary::marker { color:var(--accent); }
.faq-item summary:focus-visible { outline:2px solid var(--accent); outline-offset:.5rem; }
.faq-item p { color:var(--muted); font-size:1.9rem; line-height:1.65; max-width:90rem; padding:0 0 3rem; }
@media(max-width:600px) { .faq-section { padding-top:7rem; padding-bottom:7rem; } .faq-item summary { font-size:2.1rem; } }