/* Accretion Compute — design system
   White pages, dark (Void) bands, brand-kit colours, Michroma + Jost. */

:root {
  --void: #050506;
  --void-2: #0d0e11;
  --ink: #0b0c0e;
  --graphite: #3a3d42;
  --graphite-2: #5a5e66;
  --mist: #eceef1;
  --mist-2: #f5f6f8;
  --white: #ffffff;
  --light: #e8eaed;
  --light-bright: #f3f4f6;
  --light-dim: #a3a7ae;
  --silver: #b9bdc4;

  --bg: var(--white);
  --fg: var(--graphite);
  --fg-strong: var(--ink);
  --fg-dim: var(--graphite-2);
  --line: rgba(11, 12, 14, 0.12);
  --line-soft: rgba(11, 12, 14, 0.07);
  --aura: 11, 12, 14; /* the ink card glows are made of */

  --platinum: linear-gradient(135deg, #ffffff 0%, #b9bdc4 20%, #f3f4f6 40%, #8e939b 60%, #e6e8eb 80%, #a9adb4 100%);
  --head: "Michroma", "Eurostile", Arial, sans-serif;
  /* Large headings: thin, wide and squared, to echo the wordmark */
  --display: "Saira", "Michroma", Arial, sans-serif;
  --body: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
  --max: 1200px;
  --bar-h: 84px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --bar-bg: rgba(255, 255, 255, 0.96);
  color-scheme: light;
}

/* Two themes, only black and white. Black (the default) is the original look: black hero, page heads,
   feature bands, top bar and footer, white sections between. White flips every one of them. */
[data-theme="dark"] :is(.dark, .foot, .bar), [data-theme="light"] body {
  --bg: var(--void);
  --fg: var(--light);
  --fg-strong: var(--light-bright);
  --fg-dim: var(--light-dim);
  --line: rgba(232, 234, 237, 0.14);
  --line-soft: rgba(232, 234, 237, 0.07);
  --aura: 243, 244, 246;
  --bar-bg: rgba(5, 5, 6, 0.94);
  background: var(--bg);
  color: var(--fg);
  color-scheme: dark;
}
[data-theme="light"] :is(.dark, .foot, .bar), [data-theme="dark"] body {
  --bg: var(--white);
  --fg: var(--graphite);
  --fg-strong: var(--ink);
  --fg-dim: var(--graphite-2);
  --line: rgba(11, 12, 14, 0.12);
  --line-soft: rgba(11, 12, 14, 0.07);
  --aura: 11, 12, 14;
  --bar-bg: rgba(255, 255, 255, 0.96);
  background: var(--bg);
  color: var(--fg);
  color-scheme: light;
}

/* Logos that come in a white and a black version */
.for-dark { display: none !important; }
[data-theme="dark"] .for-dark { display: block !important; }
[data-theme="dark"] .for-light { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 300 18px/1.65 var(--body);
  transition: background-color 0.3s;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 16px; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: var(--white); padding: 8px 14px; }
.skip:focus { left: 8px; }

/* ---------- Header ---------- */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: var(--bar-bg) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid transparent;
  color: var(--fg-strong);
  transition: border-color 0.3s, background-color 0.3s, margin-bottom 0.3s var(--ease);
}
/* When the bar shrinks, a matching margin keeps the space it takes in the page the same. Without it the page
   moved up, the browser pulled the scroll back under the threshold, the bar grew again, and the page shook. */
.bar.scrolled { border-bottom-color: var(--line); margin-bottom: calc(var(--bar-h) - 68px); }
.bar-in {
  max-width: var(--max); margin: 0 auto; height: var(--bar-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px);
  transition: height 0.3s var(--ease);
}
.bar.scrolled .bar-in { height: 68px; }
.bar-mark { flex: none; }
.bar-mark img { width: clamp(200px, 22vw, 300px); }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); margin-left: auto; }
.nav a {
  font: 400 14px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-dim); text-decoration: none; padding: 9px 0; position: relative; white-space: nowrap;
  transition: color 0.2s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg-strong); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .nav-cta { border: 1px solid var(--fg-strong); padding: 13px 20px; color: var(--fg-strong); transition: background 0.2s, color 0.2s; }
.nav .nav-cta::after { display: none; }
.nav .nav-cta:hover, .nav .nav-cta[aria-current="page"] { background: var(--fg-strong); color: var(--bg); }
.bar-toggle { display: none; }

/* Colour switch: a white and a black swatch */
.nav { order: 1; } .mode { order: 2; } .bar-toggle { order: 3; }
.mode { display: none; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.js .mode { display: inline-flex; cursor: pointer; }
.mode button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: background 0.2s; }
.mode button i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--fg-dim); transition: transform 0.2s var(--ease); }
.mode [data-theme-set="light"] i { background: var(--white); }
.mode [data-theme-set="dark"] i { background: var(--void); }
.mode button[aria-pressed="true"] { background: var(--line); }
.mode button[aria-pressed="true"] i { border-color: var(--fg-strong); transform: scale(1.15); }
.mode button:hover i { border-color: var(--fg-strong); }

@media (max-width: 1100px) {
  .bar-toggle {
    display: grid; place-content: center; gap: 6px;
    width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; color: inherit; cursor: pointer;
  }
  .bar-toggle i { display: block; width: 22px; height: 1px; background: currentColor; transition: transform 0.3s var(--ease); }
  .bar-toggle[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
  .bar-toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
  .nav {
    position: fixed; inset: var(--bar-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 28px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 0.25s, transform 0.25s var(--ease), visibility 0.25s;
  }
  .bar.scrolled .nav { top: 68px; }
  .nav.open { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: 18px 0; font-size: 15px; border-bottom: 1px solid var(--line-soft); }
  .nav a::after { display: none; }
  .nav .nav-cta { margin-top: 20px; text-align: center; border-bottom: 1px solid var(--fg-strong); }
  .mode { margin-left: auto; }
}

/* ---------- Layout ---------- */
.band { padding: clamp(80px, 11vw, 144px) 0; position: relative; }
.band.tight { padding: clamp(56px, 7vw, 88px) 0; }
.band.flush { padding-top: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

.grid { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 720px) { .grid.g2 { grid-template-columns: repeat(2, 1fr); } .grid.g3, .grid.g4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid.g3 { grid-template-columns: repeat(3, 1fr); } .grid.g4 { grid-template-columns: repeat(4, 1fr); } }
.split { display: grid; gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; } .split.even { grid-template-columns: 1fr 1fr; } .split.center { align-items: center; } }

/* ---------- Type ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 24px;
  font: 400 12px/1 var(--body); letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-dim);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
h1, h2, h3, h4 { color: var(--fg-strong); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font: 200 clamp(32px, 5.8vw, 66px)/1.1 var(--display); font-stretch: 125%; letter-spacing: 0.02em; margin-bottom: 28px; }
h2 { font: 300 clamp(26px, 3.9vw, 44px)/1.18 var(--display); font-stretch: 125%; letter-spacing: 0.02em; margin-bottom: 24px; }
h3 { font: 400 14px/1.35 var(--head); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; }
.lede { font-size: clamp(19px, 1.9vw, 22px); line-height: 1.6; color: var(--fg); max-width: 54ch; }
.dim { color: var(--fg-dim); }
.head-block { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.head-block.center { margin-left: auto; margin-right: auto; text-align: center; }
.head-block.center .eyebrow { justify-content: center; }
.head-block.center .lede { margin-left: auto; margin-right: auto; }
.metal { background: var(--platinum); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 24px; min-height: 52px;
  font: 400 12px/1 var(--body); letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--fg-strong); background: var(--fg-strong); color: var(--bg);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: transparent; color: var(--fg-strong); }
.btn.ghost { background: transparent; color: var(--fg-strong); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--fg-strong); }
.arrow { display: inline-block; width: 16px; height: 1px; background: currentColor; position: relative; transition: width 0.2s var(--ease); flex: none; }
.arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.btn:hover .arrow, .link:hover .arrow, a.card:hover .arrow { width: 24px; }
.link {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 8px;
  font: 400 12px/1 var(--body); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-strong); text-decoration: none;
}

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--bar-h));
  display: grid; place-items: center; text-align: center;
  padding: 72px var(--gutter) 120px; overflow: hidden; isolation: isolate;
}
.hero-disk, .pagehead-disk, .cta-disk { color: var(--fg-strong); }
.hero-disk { position: absolute; left: 50%; top: 50%; width: min(1500px, 170vw); transform: translate(-50%, -54%); z-index: -1; pointer-events: none; }
.hero-in { max-width: 1240px; }
.hero-logo { width: min(500px, 80vw); margin: 0 auto; }
.hero h1 { margin: clamp(48px, 7vw, 96px) 0 0; font-size: clamp(32px, min(5.8vw, 8.4vh), 88px); line-height: 1.06; }
.hero .lede { max-width: 34em; }
.hero .lede { margin: 20px auto 0; color: var(--fg-dim); }
.hero .actions { justify-content: center; }
.hero-cue { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); width: 22px; height: 36px; border: 1px solid var(--line); border-radius: 11px; }
.hero-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 2px; height: 6px; margin-left: -1px; background: var(--fg-dim); border-radius: 1px; animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(10px); opacity: 0; } }

/* Home hero: the living logo bends a glowing horizon around itself (drawn by site.js on the canvas) */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.alogo { position: relative; width: min(440px, 70vw, 46vh); margin: 0 auto; }
.alogo .hero-logo { width: 100%; }
.alogo .sym { position: relative; z-index: 1; display: block; width: 37.95%; margin: 0 auto; overflow: visible; }
/* the wordmark is wider than the symbol's box and sits just under the ring, centred */
.alogo .wm { width: min(480px, 88vw); aspect-ratio: 1320 / 122; margin: 2px 0 0 50%; translate: -50% 0;
  -webkit-mask: url(assets/logos/accretion-compute-wordmark-white.svg) center / contain no-repeat;
          mask: url(assets/logos/accretion-compute-wordmark-white.svg) center / contain no-repeat;
  background: linear-gradient(100deg, #cfd2d7 0%, #cfd2d7 38%, #ffffff 50%, #cfd2d7 62%, #cfd2d7 100%);
  background-size: 320% 100%; background-position: 100% 0;
  animation: wm-in 1.6s 0.5s var(--ease) both, sheen 8s 2.2s ease-in-out infinite; }
@keyframes sheen { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } }
@keyframes wm-in { from { clip-path: inset(0 100% 0 0); opacity: 0.2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.sym .ring { stroke-dasharray: 640; animation: ring-in 2.2s var(--ease) both; }
.sym .r2 .ring { animation-delay: 0.15s; } .sym .r3 .ring { animation-delay: 0.3s; }
@keyframes ring-in { from { stroke-dashoffset: 640; } to { stroke-dashoffset: 0; } }
.sym .fh, .sym .fv, .sym .halo, .sym .core { transform-box: fill-box; transform-origin: center; }
.sym .fh { animation: flare-h 5.5s ease-in-out infinite; }
.sym .fv { animation: flare-v 5.5s ease-in-out infinite; }
@keyframes flare-h { 0%, 100% { transform: scaleX(0.78); opacity: 0.75; } 50% { transform: scaleX(1.18); opacity: 1; } }
@keyframes flare-v { 0%, 100% { transform: scaleY(1.12); opacity: 1; } 50% { transform: scaleY(0.8); opacity: 0.7; } }

[data-theme="light"] .alogo .wm { background-image: linear-gradient(100deg, #0b0c0e 0%, #0b0c0e 40%, #6b7078 50%, #0b0c0e 60%, #0b0c0e 100%); }

/* Accretion disk animation (SVG in hero, page heads and CTA bands) */
.spin { transform-box: fill-box; transform-origin: center; animation: spin 80s linear infinite; }
.spin.rev { animation-direction: reverse; animation-duration: 120s; }
.spin.fast { animation-duration: 46s; }
@keyframes spin { to { transform: rotate(360deg); } }
.pulse { animation: pulse 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

/* ---------- Inner page head ---------- */
.pagehead { position: relative; padding: clamp(88px, 12vw, 160px) 0 clamp(72px, 9vw, 120px); overflow: hidden; isolation: isolate; }
.pagehead .wrap { position: relative; }
.pagehead h1 { max-width: 16ch; }
.pagehead .lede { color: var(--fg-dim); }
.pagehead-disk { position: absolute; right: -12vw; top: 50%; width: min(900px, 100vw); transform: translateY(-50%); z-index: -1; pointer-events: none; }
@media (max-width: 720px) { .pagehead-disk { right: -55vw; width: 130vw; opacity: 0.5; } }
.crumbs { margin-bottom: 28px; font-size: 13px; letter-spacing: 0.08em; color: var(--fg-dim); }
.crumbs a { color: var(--fg-dim); text-decoration: none; }
.crumbs a:hover { color: var(--fg-strong); }

/* ---------- Cards and lists ---------- */
.card {
  position: relative; padding: clamp(28px, 3vw, 40px);
  border: 1px solid rgba(var(--aura), 0.16); background: var(--bg);
  transition: border-color 0.3s, transform 0.4s var(--ease);
  isolation: isolate; /* keeps the glow below on top of whatever section the card sits in */
}
/* every card carries a faint glow hugging its edge with a wide haze beyond it, flickering slowly; it wakes up on hover */
.card::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(var(--aura), 0.05), 0 0 10px 1px rgba(var(--aura), 0.12), 0 0 46px 8px rgba(var(--aura), 0.07), 0 0 130px 30px rgba(var(--aura), 0.045);
  transition: box-shadow 0.4s var(--ease);
  animation: card-flicker 7s ease-in-out infinite;
}
.card:nth-child(3n+2)::after { animation-delay: -2.3s; }
.card:nth-child(3n)::after { animation-delay: -4.7s; }
a.card:hover::after { box-shadow: 0 0 0 1px rgba(var(--aura), 0.08), 0 0 14px 2px rgba(var(--aura), 0.16), 0 0 60px 12px rgba(var(--aura), 0.09), 0 0 160px 40px rgba(var(--aura), 0.06); }
@keyframes card-flicker { 0%, 100% { opacity: 0.8; } 18% { opacity: 1; } 22% { opacity: 0.7; } 40% { opacity: 0.95; } 70% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .card::after { animation: none; } }
a.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--fg-strong); transform: translateY(-3px); }
.card p { color: var(--fg-dim); font-size: 17px; margin: 0; }
.card .link { margin-top: auto; padding-top: 28px; }
.card .num { font: 400 12px/1 var(--head); letter-spacing: 0.2em; color: var(--fg-dim); margin-bottom: 28px; display: block; }

/* Home "Three ways in": the cards feed gas into a small black hole (drawn by site.js). Wide screens: under the
   middle card. Narrower, where the cards stack: above the first card, the gas rising up the side lanes into it. */
.fl { position: relative; overflow: hidden; isolation: isolate; }
.fl-cv, .fl-front { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fl-cv { z-index: -1; }
.fl-front { z-index: 1; }
.fl-sym { display: block; position: absolute; width: 64px; z-index: 0; pointer-events: none; transform: translate(-50%, -50%); }
.fl-sym .sym { display: block; width: 100%; overflow: visible; }
.fl .wrap { position: relative; z-index: 2; padding-bottom: 60px; }
@media (max-width: 999.98px) {
  .fl .head-block { margin-bottom: 190px; }
  .fl .grid.g3 { grid-template-columns: 1fr; width: calc(100% - 28px); max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1000px) {
  .fl-sym { width: 92px; }
  /* the first card (AI companies, 01) sits in the middle and higher, the other two lower and level either side;
     phones keep the source order. The row reaches into the margins so the cards stay wide. */
  .fl .grid.g3 { align-items: stretch; column-gap: clamp(48px, 5vw, 96px); margin-left: calc(-1 * clamp(0px, 14vw - 150px, 140px)); margin-right: calc(-1 * clamp(0px, 14vw - 150px, 140px)); }
  .fl .grid.g3 > .card:nth-child(1) { order: 2; align-self: start; margin-top: -40px; }
  .fl .grid.g3 > .card:nth-child(2) { order: 1; margin-top: 48px; }
  .fl .grid.g3 > .card:nth-child(3) { order: 3; margin-top: 48px; }
  .fl .card { padding: clamp(24px, 2.2vw, 32px) clamp(28px, 2.8vw, 42px); }
  .fl .card .num { margin-bottom: 16px; }
  .fl .card .link { padding-top: 20px; }
}
@media (min-width: 1200px) { .fl .card h3 { white-space: nowrap; } }
.icon { width: 44px; height: 44px; margin-bottom: 28px; color: var(--fg-strong); fill: none; stroke: currentColor; stroke-width: 1.2; }

.pillars { display: grid; border-top: 1px solid var(--line); }
.pillars > div { padding: 36px 0 40px; border-bottom: 1px solid var(--line); }
.pillars p { color: var(--fg-dim); font-size: 17px; margin: 0; }
@media (min-width: 720px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .pillars > div { padding: 36px 32px 40px; }
  .pillars > div:nth-child(odd) { padding-left: 0; }
  .pillars > div:nth-child(even) { border-left: 1px solid var(--line); }
}
@media (min-width: 1000px) {
  .pillars { grid-template-columns: repeat(4, 1fr); }
  .pillars > div, .pillars > div:nth-child(odd) { border-bottom: 0; border-left: 1px solid var(--line); padding-left: 32px; }
  .pillars > div:first-child { border-left: 0; padding-left: 0; }
}

.ticks { list-style: none; padding: 0; margin: 0 0 24px; }
.ticks li { position: relative; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--line); color: var(--fg); }
.ticks li:first-child { border-top: 1px solid var(--line); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 23px; width: 12px; height: 12px;
  border: 1px solid var(--fg-dim); border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 6px var(--fg-strong);
}
.ticks strong { font-weight: 500; color: var(--fg-strong); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } .steps.s3 { grid-template-columns: repeat(3, 1fr); } }
.steps li { position: relative; padding: 32px 28px 32px 0; border-top: 1px solid var(--line); counter-increment: step; }
.steps li::before {
  content: "0" counter(step); display: block; margin-bottom: 20px;
  font: 400 13px/1 var(--head); letter-spacing: 0.18em; color: var(--fg-dim);
}
.steps li::after { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--fg-strong); }
.steps p { color: var(--fg-dim); font-size: 17px; margin: 0; }

/* Statement band */
.statement { font: 300 clamp(24px, 3.5vw, 40px)/1.3 var(--display); font-stretch: 125%; letter-spacing: 0.02em; color: var(--fg-strong); max-width: 24ch; margin: 0; text-wrap: balance; }
.statement-wrap { display: grid; gap: 32px; }
@media (min-width: 900px) { .statement-wrap { grid-template-columns: 7fr 5fr; align-items: end; } }

/* ---------- Diagrams ---------- */
.diagram { margin: 0; }
.diagram svg { width: 100%; height: auto; overflow: visible; }
.diagram figcaption { margin-top: 20px; font-size: 14px; letter-spacing: 0.04em; color: var(--fg-dim); max-width: 70ch; }
.diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.diagram-scroll svg { min-width: 720px; }
.d-line { fill: none; stroke: var(--fg-dim); stroke-width: 1; }
.d-strong { fill: none; stroke: var(--fg-strong); stroke-width: 1.4; }
.d-soft { fill: none; stroke: var(--line); stroke-width: 1; }
.d-fill { fill: var(--bg); stroke: var(--fg-strong); stroke-width: 1.2; }
.d-fill-soft { fill: var(--line-soft); stroke: var(--line); stroke-width: 1; }
.d-dot { fill: var(--fg-strong); }
.d-flow { fill: none; stroke: var(--fg-strong); stroke-width: 1.6; stroke-dasharray: 4 10; animation: flow 1.6s linear infinite; }
.d-flow.slow { animation-duration: 3.2s; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.d-text { font: 400 12px var(--body); letter-spacing: 0.18em; text-transform: uppercase; fill: var(--fg-strong); }
.d-small { font: 300 13px var(--body); fill: var(--fg-dim); }
.d-head { font: 400 15px var(--head); letter-spacing: 0.06em; fill: var(--fg-strong); }
.d-dim { fill: var(--fg-dim); }
.d-mid { text-anchor: middle; }

.only-narrow { display: none !important; }
@media (max-width: 719px) { .only-wide { display: none !important; } .only-narrow { display: block !important; max-width: 380px; margin: 0 auto; } }

/* Two-path comparison (grid queue vs at source) */
.compare { display: grid; gap: 20px; }
@media (min-width: 900px) { .compare { grid-template-columns: 1fr 1fr; } }
.track { position: relative; height: 10px; margin: 32px 0 14px; border: 1px solid var(--line); }
.track span { position: absolute; top: -1px; bottom: -1px; left: -1px; background: var(--fg-strong); transform-origin: left; transition: transform 1.6s var(--ease) 0.2s; }
.track.queue span { width: 14%; }
.track.queue::after { content: ""; position: absolute; top: 0; bottom: 0; left: 14%; right: 0; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
.track.source span { width: 100%; }
.js .reveal .track span { transform: scaleX(0); }
.js .reveal.in .track span { transform: scaleX(1); }
.track-labels { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; letter-spacing: 0.06em; color: var(--fg-dim); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 26px 48px 26px 0; font-size: 19px; color: var(--fg-strong); font-weight: 400;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after, .faq summary::before {
  content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1px; background: currentColor; transition: transform 0.3s var(--ease);
}
.faq summary::before { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(0); }
.faq details p { color: var(--fg-dim); padding: 0 48px 24px 0; margin: 0; max-width: 70ch; }

/* ---------- Group structure ---------- */
.org { display: grid; justify-items: center; text-align: center; }
.org-top { padding: 22px 36px; border: 1px solid var(--fg-strong); font: 400 14px var(--head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-strong); background: var(--bg); }
.org-stem { width: 1px; height: 40px; background: var(--fg-dim); }
.org-row { display: grid; gap: 20px; width: 100%; position: relative; }
@media (min-width: 720px) {
  .org-stem { height: 28px; }
  .org-row { grid-template-columns: 1fr 1fr; padding-top: 28px; }
  .org-row::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 28px; border: 1px solid var(--fg-dim); border-bottom: 0; }
}
.org .card { text-align: left; }
.org .card.here { border-color: var(--fg-strong); }
.org .tag { display: inline-block; margin-bottom: 18px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-dim); }
.org .card img { height: 30px; width: auto; margin-bottom: 20px; }

/* ---------- CTA band ---------- */
.cta { position: relative; text-align: center; overflow: hidden; isolation: isolate; }
.cta .wrap { position: relative; }
.cta h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.cta .lede { margin: 0 auto; color: var(--fg-dim); }
.cta .actions { justify-content: center; }
.cta-disk { position: absolute; left: 50%; top: 50%; width: min(1100px, 160vw); transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }

/* ---------- Ion Group strip ---------- */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; text-align: center; color: var(--fg-dim); margin: 0; }
.strip strong { font-weight: 400; color: var(--fg-strong); }
.strip a { color: var(--fg-strong); text-decoration-color: var(--silver); text-underline-offset: 4px; }

/* ---------- Contact form ---------- */
.form { display: grid; gap: 26px; }
.form .two { display: grid; gap: 26px; }
@media (min-width: 720px) { .form .two { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field > label, .field legend { font: 400 12px/1 var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-dim); padding: 0; }
.field input, .field textarea {
  width: 100%; padding: 12px 0; font: 300 18px/1.4 var(--body); color: var(--fg-strong);
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  transition: border-color 0.2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--fg-strong); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.chips label { cursor: pointer; position: relative; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-block; padding: 10px 16px; border: 1px solid var(--line); color: var(--fg); font-size: 16px; transition: all 0.2s; }
.chips label:hover span { border-color: var(--fg-strong); }
.chips input:checked + span { background: var(--fg-strong); border-color: var(--fg-strong); color: var(--bg); }
.chips input:focus-visible + span { outline: 1px solid var(--fg-strong); outline-offset: 3px; }
.form-note { font-size: 14px; color: var(--fg-dim); margin: 0; }
.form-note a { color: var(--fg-strong); }
.contact-aside { display: grid; gap: 20px; align-content: start; }
.contact-aside .card { padding: 28px; }
.contact-aside a.mail { font-size: 19px; color: var(--fg-strong); overflow-wrap: anywhere; }

/* ---------- Prose (privacy) ---------- */
.prose { max-width: 720px; }
.prose h2 { font-size: clamp(20px, 2.4vw, 26px); margin: 48px 0 16px; }
.prose p, .prose li { color: var(--fg); }
.prose ul { padding-left: 20px; margin: 0 0 16px; }
.prose a { color: var(--fg-strong); }

/* ---------- 404 ---------- */
.lost { min-height: calc(100svh - var(--bar-h)); display: grid; place-items: center; text-align: center; padding: 80px var(--gutter); overflow: hidden; position: relative; isolation: isolate; }
.lost h1 { font-size: clamp(24px, 4vw, 40px); }

/* ---------- Footer ---------- */
.foot { color: var(--fg-dim); padding: 80px 0 32px; }
.foot-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 48px; }
@media (min-width: 900px) { .foot-in { grid-template-columns: 5fr 7fr; } }
.foot-brand img { width: min(320px, 80%); margin-bottom: 20px; }
.foot-brand p { font-size: 15px; letter-spacing: 0.04em; margin: 0; }
.foot-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 32px; }
.foot-nav h2 { font: 400 11px/1 var(--body); letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-strong); margin: 0 0 18px; }
.foot-nav a { display: block; padding: 6px 0; font-size: 15px; color: var(--fg-dim); text-decoration: none; }
.foot-nav a:hover { color: var(--fg-strong); }
.foot-legal { max-width: var(--max); margin: 64px auto 0; padding: 24px var(--gutter) 0; border-top: 1px solid var(--line-soft); font-size: 13px; letter-spacing: 0.04em; }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.1s; } .js .reveal.d2 { transition-delay: 0.2s; } .js .reveal.d3 { transition-delay: 0.3s; }
.js .draw .d-strong { stroke-dasharray: 1600; stroke-dashoffset: 1600; transition: stroke-dashoffset 2.4s var(--ease); }
.js .draw.in .d-strong { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spin, .pulse, .d-flow, .hero-cue::after, .alogo *, .alogo .wm { animation: none !important; }
  .js .reveal, .js .reveal .track span { opacity: 1; transform: none; transition: none; }
  .js .draw .d-strong { stroke-dashoffset: 0; transition: none; }
}

/* ---------- Energy-to-compute story (home): map, site plan, then the stack turning into compute ---------- */
.ps-alt { position: relative; background: var(--bg); color: var(--fg); }
.ps-alt .mz-stage {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(80px, 11vw, 140px) var(--gutter);
  display: grid; gap: 40px;
}
.ps-alt .mz-slide { margin: 0 0 48px; max-width: 34rem; }
.ps-alt .mz-num {
  margin: 0 0 22px; font: 400 12px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: var(--fg-dim);
}
.ps-alt .mz-title {
  font: 200 clamp(32px, min(4.4vw, 7.4vh), 76px)/1.06 var(--display); font-stretch: 125%;
  letter-spacing: .02em; color: var(--fg-strong); text-transform: none; margin: 0 0 22px;
}
.ps-alt .mz-body { margin: 0; color: var(--fg); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; max-width: 34ch; }
.ps-alt .mz-rail { display: none; }
.ps-alt .mz-art { position: relative; height: min(70vh, 560px); }
.ps-alt .mz-art canvas { display: block; width: 100%; height: 100%; }
@media (min-width: 900px) {
  .ps-alt .mz-stage { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .ps-alt .mz-art { position: sticky; top: calc(var(--bar-h) + 24px); }
}

/* Scroll-driven mode: only with JS and when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .js .ps-alt .mz-track { height: 300vh; position: relative; }
  .js .ps-alt .mz-stage {
    position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
    max-width: none; padding: 0; display: block;
  }
  .js .ps-alt .mz-text { position: absolute; z-index: 2; }
  .js .ps-alt .mz-slide {
    position: absolute; left: 0; right: 0; margin: 0; max-width: none;
    opacity: 0; visibility: hidden;
    transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s linear .7s;
  }
  .js .ps-alt .mz-slide.on { opacity: 1; visibility: visible; transition: opacity .8s var(--ease) .1s, transform .9s var(--ease), visibility 0s; }
  .js .ps-alt .mz-art { position: absolute; height: auto; }
  .js .ps-alt .mz-rail {
    display: flex; gap: 22px; position: absolute; left: 0; bottom: clamp(28px, 6vh, 56px);
    margin: 0; padding: 0; list-style: none;
    font: 400 11px/1 var(--body); letter-spacing: .3em; color: var(--fg-dim);
  }
  .js .ps-alt .mz-rail li { display: flex; align-items: center; gap: 10px; opacity: .4; transition: opacity .5s var(--ease); }
  .js .ps-alt .mz-rail li::before { content: ""; width: 22px; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(.4); transition: transform .6s var(--ease); }
  .js .ps-alt .mz-rail li.on { opacity: 1; color: var(--fg-strong); }
  .js .ps-alt .mz-rail li.on::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .js .ps-alt .mz-text {
    top: var(--bar-h); bottom: 0;
    left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
    width: min(36vw, 500px);
  }
  .js .ps-alt .mz-slide { top: 50%; transform: translateY(calc(-50% + 18px)); }
  .js .ps-alt .mz-slide.on { transform: translateY(-50%); }
  .js .ps-alt .mz-art {
    top: var(--bar-h); bottom: 0; right: 0;
    left: max(36vw, calc((100% - var(--max)) / 2 + var(--gutter) + 440px));
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%), linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 9%), linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-composite: intersect;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899.98px) {
  .js .ps-alt .mz-text { top: calc(var(--bar-h) + 20px); left: var(--gutter); right: var(--gutter); height: 36vh; height: 36svh; }
  .js .ps-alt .mz-slide { top: 0; transform: translateY(14px); }
  .js .ps-alt .mz-slide.on { transform: none; }
  .js .ps-alt .mz-rail { display: none; }
  .js .ps-alt .mz-art {
    top: calc(var(--bar-h) + 20px + 36svh); bottom: 0; left: 0; right: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 92%, transparent 100%);
  }
}
.ps-alt .mz-stage { position: relative; }
.ps-alt .cb-dust { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.ps-alt .mz-art .cb-fx { position: absolute; left: 0; top: 0; pointer-events: none; }
.ps-alt .mz-art .cb-hole { position: absolute; left: 0; top: 0; pointer-events: none; visibility: hidden; will-change: transform; }
.ps-alt .cb-hole .sym { display: block; width: 100%; overflow: visible; }
@media (prefers-reduced-motion: reduce) { .ps-alt .cb-hole * { animation: none !important; } }

/* ---------- Site check (partners): five questions, one at a time, then a verdict with reasons ---------- */
.fit { max-width: 760px; }
.fit-top { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; }
.fit-count { margin: 0; font: 400 12px/1 var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-dim); white-space: nowrap; }
.fit-bar { flex: 1; height: 1px; background: var(--line); position: relative; }
.fit-bar i { position: absolute; left: 0; top: -1px; height: 3px; width: 20%; background: var(--fg-strong); transition: width 0.5s var(--ease); }
.fit-qs { display: grid; }
.fit-q { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s 0.45s; }
.fit-q.now { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.fit-h { font: 200 clamp(26px, 3.4vw, 40px)/1.15 var(--display); font-stretch: 125%; letter-spacing: 0.02em; color: var(--fg-strong); margin: 14px 0 6px; }
.fit-q .chips { flex-direction: column; align-items: stretch; gap: 8px; }
.fit-q .chips span { display: block; padding: 14px 18px; }
@media (min-width: 720px) { .fit-q .chips { flex-direction: row; flex-wrap: wrap; } .fit-q .chips label { flex: 1 1 calc(50% - 8px); } }
.fit-nav { margin-top: 32px; }
.fit-back[disabled] { visibility: hidden; }
.fit-verdict { font: 200 clamp(30px, 4.4vw, 52px)/1.1 var(--display); font-stretch: 125%; letter-spacing: 0.02em; color: var(--fg-strong); margin: 10px 0 28px; }
.fit-why { margin-bottom: 36px; }
.fit-act { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.fit-out .form-note a { color: var(--fg-strong); }
html:not(.js) .fit-q { opacity: 1; visibility: visible; transform: none; grid-area: auto; margin-bottom: 40px; }
.fit-cta { margin: 36px 0 0; }