@charset "UTF-8";

/* ============================================================
   AICC — 주식회사 에이아이씨씨 공식 홈페이지
   Design system

   Layer 1  primitives   — named by hue, never used in a component
   Layer 2  semantic     — named by role, the only tier markup uses
   Layer 3  scales       — type, space, radius, motion
   ============================================================ */

/* ---------- Layer 1 · primitives ------------------------------------ */

:root {
  /* Neutral ramp — warm graphite. Hue held at 68, vividness peaks mid-ramp,
     steps denser at the light end so 50/100 read as two distinct surfaces. */
  --stone-50:  oklch(0.986 0.003 68);
  --stone-100: oklch(0.968 0.005 68);
  --stone-200: oklch(0.926 0.007 68);
  --stone-300: oklch(0.866 0.009 68);
  --stone-400: oklch(0.723 0.010 68);
  --stone-500: oklch(0.602 0.011 68);
  --stone-600: oklch(0.492 0.012 68);
  --stone-700: oklch(0.392 0.012 68);
  --stone-800: oklch(0.293 0.010 68);
  --stone-900: oklch(0.213 0.008 68);
  --stone-950: oklch(0.152 0.006 68);

  /* Accent ramp — bronze. Carried over from the printed business plan. */
  --bronze-50:  oklch(0.972 0.017 82);
  --bronze-100: oklch(0.941 0.032 82);
  --bronze-200: oklch(0.886 0.055 82);
  --bronze-300: oklch(0.821 0.076 82);
  --bronze-400: oklch(0.756 0.090 82);
  --bronze-500: oklch(0.694 0.098 82);
  --bronze-600: oklch(0.624 0.095 82);
  --bronze-700: oklch(0.535 0.082 82);
  --bronze-800: oklch(0.434 0.066 82);
  --bronze-900: oklch(0.344 0.050 82);

  /* Product ramp — coral. Used ONLY inside product screen mockups, so the
     app's own identity never competes with the corporate accent. */
  --coral-50:  oklch(0.974 0.011 33);
  --coral-100: oklch(0.941 0.028 33);
  --coral-200: oklch(0.887 0.055 33);
  --coral-300: oklch(0.806 0.093 33);
  --coral-500: oklch(0.634 0.152 33);
  --coral-600: oklch(0.572 0.151 33);
  --coral-700: oklch(0.497 0.128 33);

  /* Status — only the ramps the product actually renders. */
  --sage-100: oklch(0.940 0.021 155);
  --sage-600: oklch(0.545 0.070 155);
}

/* ---------- Layer 2 · semantic tokens ------------------------------- */

:root {
  --color-bg-page:        oklch(1 0 0);
  --color-bg-surface:     oklch(1 0 0);
  --color-bg-subtle:      var(--stone-50);
  --color-bg-inverse:     var(--stone-950);
  --color-bg-accent-soft: var(--bronze-50);

  --color-text-primary:      var(--stone-900);
  --color-text-secondary:    var(--stone-600);
  --color-text-muted:        var(--stone-500);
  --color-text-accent:       var(--bronze-700);
  --color-text-on-inverse:   var(--stone-50);
  --color-text-on-inverse-2: var(--stone-400);

  --color-border:        var(--stone-200);
  --color-border-strong: var(--stone-300);
  --color-border-inverse: oklch(1 0 0 / 0.16);

  --color-accent-solid: var(--bronze-600);
  --color-accent-line:  var(--bronze-500);

  --color-image-outline: oklch(0 0 0 / 0.1);

  /* Type scale — named by use, not by size. */
  --text-display:  clamp(2.5rem, 5.4vw, 4.5rem);
  --text-h1:       clamp(2.15rem, 4.2vw, 3.4rem);
  --text-h2:       clamp(1.6rem, 2.8vw, 2.3rem);
  --text-h3:       1.375rem;
  --text-h4:       1.0625rem;
  --text-body-lg:  1.0625rem;
  --text-body:     1rem;
  --text-body-sm:  0.9375rem;
  --text-caption:  0.8125rem;
  --text-label:    0.75rem;

  /* Space scale */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;

  --layout-max: 1240px;
  --layout-gutter: clamp(20px, 5vw, 56px);
  --section-block: clamp(88px, 11vw, 168px);

  /* Motion — the built-in CSS easings are too weak for UI. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-reveal:  640ms;

  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, monospace;
}

/* ---------- Reset ---------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 96px;
}

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Korean allows a line break between any two syllables by default, which
     splits words mid-way and wrecks a display heading. keep-all restricts
     breaks to spaces, the way the language actually reads. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--bronze-200); color: var(--stone-950); }

:focus-visible {
  outline: 2px solid var(--color-accent-solid);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-4);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-inverse);
  color: var(--color-text-on-inverse);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
}
.skip-link:focus-visible { inset-block-start: var(--space-4); }

/* ---------- Layout primitives ---------------------------------------- */

.shell {
  inline-size: 100%;
  max-inline-size: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.section { padding-block: var(--section-block); }
.section--tight { padding-block: clamp(56px, 6vw, 88px); }
.section--subtle { background: var(--color-bg-subtle); }
.section--surface { background: var(--color-bg-surface); }
.section + .section--subtle,
.section--subtle + .section { border-block-start: 1px solid var(--color-border); }

/* ---------- Type utilities ------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-accent);
  white-space: nowrap;
}
.eyebrow--muted { color: var(--color-text-muted); }
.eyebrow--on-inverse { color: var(--bronze-300); }

.section-head { max-inline-size: 760px; }
.section-head .eyebrow { display: block; margin-block-end: var(--space-4); }

.h1 {
  font-size: var(--text-h1);
  line-height: 1.14;
  letter-spacing: -0.028em;
  font-weight: 700;
  text-wrap: balance;
}
.h2 {
  font-size: var(--text-h2);
  line-height: 1.22;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}
.h3 {
  font-size: var(--text-h3);
  line-height: 1.35;
  letter-spacing: -0.012em;
  font-weight: 600;
}
.h4 {
  font-size: var(--text-h4);
  line-height: 1.45;
  font-weight: 600;
}

.lede {
  font-size: var(--text-body-lg);
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-inline-size: 66ch;
  text-wrap: pretty;
}
.prose {
  color: var(--color-text-secondary);
  max-inline-size: 68ch;
  text-wrap: pretty;
}
.prose + .prose { margin-block-start: var(--space-4); }
.prose strong { color: var(--color-text-primary); font-weight: 600; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-variant-numeric: tabular-nums; }

.rule {
  block-size: 1px;
  background: var(--color-border);
  border: 0;
  margin-block: var(--space-7);
}

/* ---------- Buttons --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition-property: background-color, border-color, color, scale;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}
.btn:active { scale: 0.96; }

.btn--primary {
  background: var(--color-bg-inverse);
  color: var(--color-text-on-inverse);
}
.btn--primary:hover { background: var(--stone-800); }

.btn--ghost {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}
.btn--ghost:hover { background: var(--color-bg-surface); border-color: var(--stone-400); }

.btn--on-inverse {
  background: transparent;
  border-color: var(--color-border-inverse);
  color: var(--color-text-on-inverse);
}
.btn--on-inverse:hover { background: oklch(1 0 0 / 0.08); border-color: oklch(1 0 0 / 0.34); }

/* Text link that carries an arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}
.link-arrow svg {
  inline-size: 14px;
  flex: none;
  transition: translate var(--dur-base) var(--ease-out);
}
.link-arrow:hover { color: var(--color-text-accent); }
.link-arrow:hover svg { translate: 4px 0; }

/* ---------- Site header ----------------------------------------------- */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  transition-property: background-color, border-color, backdrop-filter;
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-out);
  border-block-end: 1px solid transparent;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  block-size: 76px;
}
.site-header[data-scrolled="true"] {
  background: oklch(1 0 0 / 0.9);
  backdrop-filter: saturate(180%) blur(14px);
  border-block-end-color: var(--color-border);
}

/* On pages with a photographic hero the header starts transparent-on-dark. */
.site-header[data-over-hero="true"]:not([data-scrolled="true"]) {
  --header-fg: var(--stone-50);
  --header-fg-dim: oklch(1 0 0 / 0.72);
}
.site-header { --header-fg: var(--color-text-primary); --header-fg-dim: var(--color-text-secondary); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--header-fg);
  transition: color var(--dur-base) var(--ease-out);
}
.brand__mark { inline-size: 26px; block-size: 26px; flex: none; }
.brand__name {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.brand__sub {
  font-size: var(--text-label);
  letter-spacing: 0.02em;
  color: var(--header-fg-dim);
  padding-inline-start: 10px;
  margin-inline-start: 2px;
  border-inline-start: 1px solid currentColor;
  transition: color var(--dur-base) var(--ease-out);
}

.site-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.site-nav__link {
  position: relative;
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--header-fg-dim);
  padding-block: 6px;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover { color: var(--header-fg); }
.site-nav__link[aria-current="page"] { color: var(--header-fg); font-weight: 600; }
.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-block-end: -2px;
  inset-inline: 0;
  block-size: 1.5px;
  background: var(--color-accent-line);
}
.site-nav__cta { margin-inline-start: var(--space-2); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-end: -10px;
  background: transparent;
  border: 0;
  color: var(--header-fg);
  cursor: pointer;
}
.nav-toggle svg { inline-size: 22px; }

/* ---------- Hero ------------------------------------------------------ */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: min(92svh, 860px);
  padding-block: 140px var(--space-9);
  overflow: hidden;
  background: var(--stone-950);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, oklch(0.152 0.006 68 / 0.72) 0%, oklch(0.152 0.006 68 / 0.34) 34%, oklch(0.152 0.006 68 / 0.86) 100%);
}
.hero__inner { inline-size: 100%; }
.hero__eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-5); }
.hero__eyebrow::before {
  content: "";
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: var(--color-accent-line);
  flex: none;
}
.hero__title {
  font-size: var(--text-display);
  line-height: 1.1;
  letter-spacing: -0.036em;
  font-weight: 700;
  color: var(--color-text-on-inverse);
  max-inline-size: 20ch;
  text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--bronze-300); }
.hero__sub {
  margin-block-start: var(--space-5);
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: oklch(1 0 0 / 0.78);
  max-inline-size: 54ch;
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-7); }

.hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border-inverse);
  max-inline-size: 720px;
}
.hero__meta dt {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.5);
}
.hero__meta dd {
  margin-block-start: 6px;
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-on-inverse);
  font-variant-numeric: tabular-nums;
}

/* Sub-page hero band */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: 380px;
  padding-block: 150px var(--space-7);
  background: var(--stone-950);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 60%; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, oklch(0.152 0.006 68 / 0.78) 0%, oklch(0.152 0.006 68 / 0.58) 50%, oklch(0.152 0.006 68 / 0.82) 100%);
}
.page-hero__title {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--color-text-on-inverse);
  text-wrap: balance;
}
.page-hero__sub {
  margin-block-start: var(--space-4);
  color: oklch(1 0 0 / 0.74);
  max-inline-size: 58ch;
  text-wrap: pretty;
}
.page-hero .eyebrow { display: block; margin-block-end: var(--space-4); color: var(--bronze-300); }

/* ---------- Statement band (English triad, like a masthead) ----------- */

.statement { display: grid; gap: var(--space-7); }
@media (min-width: 900px) {
  .statement { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-9); align-items: start; }
}
.statement__line {
  font-size: clamp(1.6rem, 2.8vw, 2.35rem);
  line-height: 1.24;
  letter-spacing: -0.028em;
  font-weight: 700;
  text-wrap: balance;
}
.statement__line span { color: var(--color-text-muted); }
.statement__ko {
  margin-block-start: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  color: var(--color-text-accent);
}

/* ---------- Grids and cards ------------------------------------------- */

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.card__no {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  color: var(--color-text-accent);
}
.card__body { color: var(--color-text-secondary); font-size: var(--text-body-sm); text-wrap: pretty; }
.card--top-rule { border-block-start: 2px solid var(--color-accent-solid); }

/* Link cards used for the home-page section previews */
.preview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition-property: border-color, translate;
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-out);
}
.preview-card:hover { border-color: var(--color-border-strong); translate: 0 -3px; }
.preview-card:active { scale: 0.99; }
.preview-card__figure {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.preview-card__foot { margin-block-start: auto; }

/* ---------- Numbered step list (L1–L5) --------------------------------- */

.steps { border-block-start: 1px solid var(--color-border); }
.steps__item {
  display: grid;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--color-border);
}
@media (min-width: 760px) {
  .steps__item { grid-template-columns: 92px minmax(0, 22ch) minmax(0, 1fr); align-items: baseline; gap: var(--space-5); }
}
.steps__no {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-text-accent);
}
.steps__name { font-size: var(--text-h4); font-weight: 600; letter-spacing: -0.01em; }
.steps__desc { color: var(--color-text-secondary); font-size: var(--text-body-sm); text-wrap: pretty; }

/* ---------- Figures / stats -------------------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--space-5);
  border-block-start: 1px solid var(--color-border);
  padding-block-start: var(--space-5);
}
.stat__value {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stat__value small { font-size: 0.5em; font-weight: 600; letter-spacing: 0; color: var(--color-text-muted); }
.stat__label { margin-block-start: var(--space-2); font-size: var(--text-caption); color: var(--color-text-secondary); }

/* ---------- Data tables ------------------------------------------------ */

.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.data-table { min-inline-size: 620px; font-size: var(--text-body-sm); }
.data-table thead th {
  text-align: start;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border);
  white-space: nowrap;
}
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  vertical-align: top;
}
.data-table tbody tr:last-child td { border-block-end: 0; }
.data-table td:first-child { color: var(--color-text-primary); font-weight: 600; white-space: nowrap; }
.data-table .num { text-align: end; font-family: var(--font-mono); }
.data-table .is-accent { color: var(--color-text-accent); font-weight: 600; }
.data-table .is-quiet { color: var(--color-text-muted); }

/* ---------- Timeline ---------------------------------------------------- */

.timeline { border-block-start: 1px solid var(--color-border); }
.timeline__item {
  display: grid;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--color-border);
}
@media (min-width: 820px) {
  .timeline__item { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 260px); align-items: baseline; }
}
.timeline__when {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  color: var(--color-text-accent);
  font-variant-numeric: tabular-nums;
}
.timeline__what { font-weight: 600; }
.timeline__what span { display: block; margin-block-start: 4px; font-weight: 400; font-size: var(--text-body-sm); color: var(--color-text-secondary); text-wrap: pretty; }
.timeline__metric { font-size: var(--text-caption); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ---------- Accordion (FAQ) --------------------------------------------- */

.faq { border-block-start: 1px solid var(--color-border); }
.faq__item { border-block-end: 1px solid var(--color-border); }
.faq__trigger {
  inline-size: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-5);
  background: transparent;
  border: 0;
  text-align: start;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__trigger:hover { color: var(--color-text-accent); }
.faq__q { flex: 1; font-size: var(--text-h4); font-weight: 600; letter-spacing: -0.01em; }
.faq__no { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.12em; color: var(--color-text-accent); flex: none; inline-size: 32px; }
.faq__icon { flex: none; inline-size: 16px; color: var(--color-text-muted); transition: rotate var(--dur-base) var(--ease-out); }
.faq__trigger[aria-expanded="true"] .faq__icon { rotate: 45deg; }
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq__trigger[aria-expanded="true"] + .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p {
  padding-inline-start: 48px;
  padding-block-end: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  max-inline-size: 74ch;
  text-wrap: pretty;
}
@media (max-width: 600px) { .faq__panel p { padding-inline-start: 0; } }

/* ---------- Closing band ------------------------------------------------ */

.closing {
  background: var(--color-bg-inverse);
  color: var(--color-text-on-inverse);
  padding-block: clamp(64px, 8vw, 112px);
}
.closing__title {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
  max-inline-size: 24ch;
}
.closing__sub { margin-block-start: var(--space-4); color: var(--color-text-on-inverse-2); max-inline-size: 52ch; text-wrap: pretty; }
.closing__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }

/* ---------- Footer ------------------------------------------------------ */

.site-footer {
  background: var(--stone-950);
  color: var(--color-text-on-inverse-2);
  padding-block: var(--space-8) var(--space-6);
  border-block-start: 1px solid var(--color-border-inverse);
  font-size: var(--text-body-sm);
}
.site-footer__grid { display: grid; gap: var(--space-7); }
@media (min-width: 820px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-8); }
}
.site-footer h2 {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.45);
  margin-block-end: var(--space-4);
}
.site-footer a { transition: color var(--dur-fast) var(--ease-out); }
.site-footer a:hover { color: var(--color-text-on-inverse); }
.site-footer li + li { margin-block-start: 10px; }
.site-footer .brand { color: var(--color-text-on-inverse); }
.site-footer__tagline { margin-block-start: var(--space-4); color: var(--color-text-on-inverse-2); max-inline-size: 34ch; text-wrap: pretty; }
.site-footer__legal {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border-inverse);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-caption);
  color: oklch(1 0 0 / 0.42);
}

/* ---------- Contact ------------------------------------------------------ */

.contact-list { display: grid; gap: var(--space-5); }
.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.contact-card__value {
  font-family: var(--font-mono);
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  overflow-wrap: break-word;
}
.contact-card a.contact-card__value { transition: color var(--dur-fast) var(--ease-out); }
.contact-card a.contact-card__value:hover { color: var(--color-text-accent); }

.info-list { border-block-start: 1px solid var(--color-border); }
.info-list > div {
  display: grid;
  gap: 2px var(--space-5);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}
@media (min-width: 640px) { .info-list > div { grid-template-columns: 168px minmax(0, 1fr); } }
.info-list dt { font-size: var(--text-body-sm); color: var(--color-text-muted); }
.info-list dd { font-size: var(--text-body-sm); color: var(--color-text-primary); }

/* ---------- Images ------------------------------------------------------- */

.figure { margin: 0; }
.figure img {
  inline-size: 100%;
  border-radius: var(--radius-md);
  outline: 1px solid var(--color-image-outline);
  outline-offset: -1px;
}
.figure figcaption {
  margin-block-start: var(--space-3);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* ---------- Scroll reveal ------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  translate: 0 18px;
  transition-property: opacity, translate;
  transition-duration: var(--dur-reveal);
  transition-timing-function: var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; translate: 0 0; }
.no-js [data-reveal] { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; translate: 0 0; }
  .btn:active { scale: 1; }
}

/* ---------- Mobile navigation -------------------------------------------- */

@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--layout-gutter) var(--space-6);
    background: var(--color-bg-page);
    border-block-end: 1px solid var(--color-border);
    opacity: 0;
    translate: 0 -8px;
    pointer-events: none;
    transition-property: opacity, translate;
    transition-duration: var(--dur-base);
    transition-timing-function: var(--ease-out);
  }
  .site-nav[data-open="true"] { opacity: 1; translate: 0 0; pointer-events: auto; }
  .site-nav__link {
    --header-fg: var(--color-text-primary);
    --header-fg-dim: var(--color-text-secondary);
    padding-block: var(--space-4);
    font-size: var(--text-body-lg);
    border-block-end: 1px solid var(--color-border);
  }
  .site-nav__link[aria-current="page"]::after { display: none; }
  .site-nav__cta { margin: var(--space-5) 0 0; justify-content: center; }
}

/* ============================================================
   Video hero — the KCD-style full-bleed film with sequential copy.
   The <video> is progressive enhancement: the poster image carries
   the hero on its own if the file is missing or motion is reduced.
   ============================================================ */

.hero--film { align-items: center; padding-block: 150px var(--space-10); }
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.hero--film .hero__scrim {
  background:
    radial-gradient(120% 90% at 50% 45%, oklch(0.152 0.006 68 / 0.28) 0%, oklch(0.152 0.006 68 / 0.62) 62%, oklch(0.152 0.006 68 / 0.86) 100%),
    linear-gradient(180deg, oklch(0.152 0.006 68 / 0.55) 0%, oklch(0.152 0.006 68 / 0.1) 30%, oklch(0.152 0.006 68 / 0.78) 100%);
}
.hero--film .hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }

/* Sequential headline. Every line sits in the same grid cell so the block
   never reflows as the copy changes. */
.hero-seq {
  display: grid;
  justify-items: center;
  min-block-size: calc(var(--text-display) * 2.3);
}
.hero-seq__line {
  grid-area: 1 / 1;
  font-size: var(--text-display);
  line-height: 1.14;
  letter-spacing: -0.038em;
  font-weight: 700;
  color: var(--color-text-on-inverse);
  text-wrap: balance;
  max-inline-size: 22ch;
  text-shadow: 0 2px 40px oklch(0.152 0.006 68 / 0.45);
  opacity: 0;
  translate: 0 14px;
  transition-property: opacity, translate;
  transition-duration: 480ms;
  transition-timing-function: var(--ease-out);
  pointer-events: none;
}
.hero-seq__line[data-active="true"] { opacity: 1; translate: 0 0; }
.hero-seq__line em { font-style: normal; color: var(--bronze-300); display: block; }
.no-js .hero-seq__line,
.hero-seq__line:last-child { }
.no-js .hero-seq__line:last-child { opacity: 1; translate: 0 0; }

.hero-seq__dots { display: flex; gap: 6px; justify-content: center; margin-block-start: var(--space-6); }
.hero-seq__dots i {
  inline-size: 22px;
  block-size: 2px;
  background: oklch(1 0 0 / 0.24);
  display: block;
  transition: background-color var(--dur-base) var(--ease-out);
}
.hero-seq__dots i[data-active="true"] { background: var(--bronze-300); }

.hero__cue {
  position: absolute;
  inset-block-end: var(--space-6);
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: oklch(1 0 0 / 0.66);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero__cue svg { inline-size: 20px; animation: cue-bob 2.4s var(--ease-in-out) infinite; }
@keyframes cue-bob {
  0%, 100% { translate: 0 0; opacity: 0.7; }
  50%      { translate: 0 6px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cue svg { animation: none; }
  .hero-seq__line { opacity: 0; }
  .hero-seq__line[data-active="true"] { opacity: 1; translate: 0 0; }
}

/* ============================================================
   Dark timeline — scroll-drawn spine, alternating sides.
   ============================================================ */

.story {
  background: var(--color-bg-inverse);
  color: var(--color-text-on-inverse);
  padding-block: clamp(72px, 9vw, 132px);
}
.story .eyebrow { color: var(--bronze-300); }
.story__title { color: var(--color-text-on-inverse); }
.story__lede { color: var(--color-text-on-inverse-2); max-inline-size: 62ch; text-wrap: pretty; }

.spine { position: relative; margin-block-start: var(--space-8); }
.spine::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 7px;
  inline-size: 1px;
  background: oklch(1 0 0 / 0.14);
}
@media (min-width: 860px) { .spine::before { inset-inline-start: 50%; } }

.spine__item { position: relative; padding-block: var(--space-5); padding-inline-start: 34px; }
.spine__item::before {
  content: "";
  position: absolute;
  inset-block-start: 30px;
  inset-inline-start: 3px;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--color-accent-solid);
  outline: 4px solid var(--color-bg-inverse);
}
@media (min-width: 860px) {
  .spine__item {
    inline-size: 50%;
    padding-inline: 0 var(--space-7);
    text-align: end;
  }
  .spine__item::before { inset-inline-start: auto; inset-inline-end: -4.5px; }
  .spine__item:nth-child(even) {
    margin-inline-start: 50%;
    padding-inline: var(--space-7) 0;
    text-align: start;
  }
  .spine__item:nth-child(even)::before { inset-inline: -4.5px auto; }
}
.spine__when {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  color: var(--bronze-300);
  font-variant-numeric: tabular-nums;
}
.spine__what { margin-block-start: 6px; font-size: var(--text-h4); font-weight: 600; letter-spacing: -0.012em; }
.spine__note { margin-block-start: 4px; font-size: var(--text-body-sm); color: var(--color-text-on-inverse-2); text-wrap: pretty; }

/* ============================================================
   Motion figure — a CSS-drawn "paper to task" loop used where a
   Higgsfield clip is overkill. Explanatory, so it may run longer.
   ============================================================ */

.flow {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  align-items: stretch;
}
.flow__step {
  position: relative;
  padding: var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.flow__step::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--color-accent-solid);
  scale: 0 1;
  transform-origin: left center;
  transition: scale 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.flow__step.is-revealed::after { scale: 1 1; }
.flow__no {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  color: var(--color-text-accent);
}
.flow__name { margin-block-start: var(--space-3); font-size: var(--text-h4); font-weight: 600; }
.flow__desc { margin-block-start: var(--space-2); font-size: var(--text-body-sm); color: var(--color-text-secondary); text-wrap: pretty; }

/* Header sitting on a dark hero: the ghost CTA must invert with it, or it
   renders as dark text on a transparent box over a photograph. */
.site-header[data-over-hero="true"]:not([data-scrolled="true"]) .btn--ghost {
  border-color: var(--color-border-inverse);
  color: var(--color-text-on-inverse);
}
.site-header[data-over-hero="true"]:not([data-scrolled="true"]) .btn--ghost:hover {
  background: oklch(1 0 0 / 0.08);
  border-color: oklch(1 0 0 / 0.34);
}
@media (max-width: 940px) {
  /* The mobile sheet is light, so the CTA inside it never inverts. */
  .site-header[data-over-hero="true"]:not([data-scrolled="true"]) .site-nav .btn--ghost {
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
  }
}

/* ============================================================
   Typographic motion
   Headings rise word by word out of a mask, the way an editorial
   title sequence does. Only transform and opacity move; the words
   keep their normal flow so wrapping, balance and selection are
   untouched. Reduced motion gets the finished state immediately.
   ============================================================ */

.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Masks clip descenders unless the box is grown and pulled back. */
  padding-block: 0.14em;
  margin-block: -0.14em;
}
.word__i {
  display: inline-block;
  translate: 0 108%;
  transition: translate 780ms var(--ease-out);
  transition-delay: var(--word-delay, 0ms);
  will-change: translate;
}
.is-typeset .word__i { translate: 0 0; }

/* A hairline that draws itself under a section title. */
.rule-draw {
  display: block;
  block-size: 1px;
  background: var(--color-accent-solid);
  scale: 0 1;
  transform-origin: left center;
  transition: scale 900ms var(--ease-out) 200ms;
}
.is-revealed > .rule-draw,
.is-typeset .rule-draw { scale: 1 1; }

/* Eyebrow letters settle in from slightly wide tracking. */
.eyebrow[data-anim] {
  opacity: 0;
  letter-spacing: 0.42em;
  transition-property: opacity, letter-spacing;
  transition-duration: 900ms;
  transition-timing-function: var(--ease-out);
}
.is-typeset .eyebrow[data-anim],
.eyebrow[data-anim].is-typeset { opacity: 1; letter-spacing: 0.16em; }

/* Counters hold their width so the layout never jitters while running. */
.stat__value, [data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .word__i { translate: 0 0; transition: none; }
  .rule-draw { scale: 1 1; transition: none; }
  .eyebrow[data-anim] { opacity: 1; letter-spacing: 0.16em; transition: none; }
}
.no-js .word__i { translate: 0 0; }
.no-js .rule-draw { scale: 1 1; }
.no-js .eyebrow[data-anim] { opacity: 1; letter-spacing: 0.16em; }

/* ============================================================
   Feature chapters — one idea per screen, the product shown at
   full size underneath it. Copy stays short on purpose; the
   screen is the argument.
   ============================================================ */

.chapter { padding-block: clamp(80px, 10vw, 160px); }
.chapter--dark { background: var(--color-bg-inverse); color: var(--color-text-on-inverse); }
.chapter--dark .chapter__lead { color: var(--color-text-on-inverse-2); }
.chapter--dark .eyebrow { color: var(--bronze-300); }
.chapter--subtle { background: var(--color-bg-subtle); }

.chapter__head {
  max-inline-size: 880px;
  margin-inline: auto;
  text-align: center;
}
.chapter__step {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin-block-end: var(--space-5);
}
.chapter--dark .chapter__step { color: var(--bronze-300); }
.chapter__title {
  max-inline-size: 16ch;
  margin-inline: auto;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.036em;
  font-weight: 700;
  text-wrap: balance;
}
.chapter__lead {
  margin-block-start: var(--space-5);
  margin-inline: auto;
  max-inline-size: 46ch;
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
.chapter__stage { margin-block-start: clamp(40px, 5vw, 72px); }

/* The screen sits on a soft riser so it reads as an object on a surface. */
.stage {
  position: relative;
  padding: clamp(20px, 3vw, 44px);
  border-radius: clamp(16px, 2vw, 26px);
  background: linear-gradient(180deg, var(--color-bg-surface), var(--color-bg-subtle));
  border: 1px solid var(--color-border);
}
.chapter--dark .stage {
  background: linear-gradient(180deg, oklch(1 0 0 / 0.06), oklch(1 0 0 / 0.02));
  border-color: var(--color-border-inverse);
}
.chapter--subtle .stage { background: linear-gradient(180deg, var(--color-bg-surface), oklch(1 0 0 / 0)); }

/* Three short proof points under a chapter. */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--space-5) var(--space-7);
  margin-block-start: clamp(36px, 4vw, 60px);
  max-inline-size: 980px;
  margin-inline: auto;
}
.proof__item { padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
.chapter--dark .proof__item { border-block-start-color: var(--color-border-inverse); }
.proof__label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-accent);
}
.chapter--dark .proof__label { color: var(--bronze-300); }
.proof__text {
  margin-block-start: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
.chapter--dark .proof__text { color: var(--color-text-on-inverse-2); }

/* Full-bleed film band used between chapters. */
.band {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: min(72svh, 620px);
  padding-block: var(--space-9);
  background: var(--stone-950);
  overflow: hidden;
  isolation: isolate;
}
.band__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, oklch(0.152 0.006 68 / 0.9) 0%, oklch(0.152 0.006 68 / 0.66) 42%, oklch(0.152 0.006 68 / 0.32) 100%);
}
.band--hero .band__title { font-size: clamp(2.3rem, 5vw, 4.1rem); max-inline-size: 15ch; }
.band__title {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.16;
  letter-spacing: -0.034em;
  font-weight: 700;
  color: var(--color-text-on-inverse);
  max-inline-size: 18ch;
  text-wrap: balance;
}
.band__lead {
  margin-block-start: var(--space-5);
  max-inline-size: 44ch;
  color: oklch(1 0 0 / 0.74);
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .band__scrim { background: linear-gradient(180deg, oklch(0.152 0.006 68 / 0.55) 0%, oklch(0.152 0.006 68 / 0.86) 100%); }
}

/* Big numbered rail used for the five stages. */
.rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-5);
  margin-block-start: clamp(40px, 5vw, 72px);
}
.rail__item { padding-block-start: var(--space-4); border-block-start: 2px solid var(--color-border); }
.rail__item[data-lead="true"] { border-block-start-color: var(--color-accent-solid); }
.rail__no {
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text-accent);
  font-variant-numeric: tabular-nums;
}
.rail__name { margin-block-start: var(--space-2); font-size: var(--text-h4); font-weight: 600; letter-spacing: -0.012em; }
.rail__desc { margin-block-start: var(--space-2); font-size: var(--text-body-sm); color: var(--color-text-secondary); text-wrap: pretty; }

/* Role cards for the four AI roles. */
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); gap: var(--space-5); }
.role {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
}
.chapter--dark .role { background: oklch(1 0 0 / 0.05); border-color: var(--color-border-inverse); }
.role__icon {
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--color-bg-accent-soft);
  color: var(--color-text-accent);
  margin-block-end: var(--space-4);
}
.chapter--dark .role__icon { background: oklch(1 0 0 / 0.08); color: var(--bronze-300); }
.role__icon svg { inline-size: 18px; block-size: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.role__name { font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.016em; }
.role__tag { display: block; margin-block-start: 2px; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.chapter--dark .role__tag { color: var(--stone-500); }
.role__desc { margin-block-start: var(--space-3); font-size: var(--text-body-sm); color: var(--color-text-secondary); text-wrap: pretty; }
.chapter--dark .role__desc { color: var(--color-text-on-inverse-2); }

/* Measure caps belong on the text element, where `ch` resolves against that
   element's own font size. A cap set on a wrapper is measured in the
   wrapper's font and silently strangles a large heading. */
.section-head .h1,
.section-head .h2 { max-inline-size: 20ch; }
.section-head .lede,
.section-head .prose { max-inline-size: 66ch; }

/* Mono runs (URLs, codes) still need to break anywhere they must. */
.mono, .app__url, code { word-break: normal; overflow-wrap: anywhere; }

/* ============================================================
   Blocks, not cards.
   A grid of bordered boxes with a coloured rule on top is the
   default shape every template lands on. Space does the grouping
   here instead: a pill label, a large title, grey copy, air.
   ============================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--color-accent-solid);
  color: var(--color-text-accent);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.pill--quiet { border-color: var(--color-border-strong); color: var(--color-text-secondary); }
.pill--on-inverse { border-color: oklch(1 0 0 / 0.32); color: var(--bronze-300); }

.blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 64px);
}
.blocks--tight { gap: clamp(32px, 4vw, 56px) clamp(28px, 3.4vw, 52px); }

.fblock { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.fblock__no {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-accent);
  font-variant-numeric: tabular-nums;
}
.fblock__title {
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  line-height: 1.32;
  letter-spacing: -0.022em;
  font-weight: 700;
  max-inline-size: 18ch;
  text-wrap: balance;
}
.fblock__text {
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-inline-size: 40ch;
  text-wrap: pretty;
}
.fblock__text strong { color: var(--color-text-primary); font-weight: 600; }
.fblock--inverse .fblock__title { color: var(--color-text-on-inverse); }
.fblock--inverse .fblock__text { color: var(--color-text-on-inverse-2); }
.fblock--inverse .fblock__no { color: var(--bronze-300); }

/* Bordered cards stay only where a box is genuinely the right shape:
   a live product screen, a contact route. Everywhere else uses .fblock. */
.card { border-radius: var(--radius-lg); padding: var(--space-6); }
.card--top-rule { border-block-start-width: 1px; border-block-start-color: var(--color-border); }

/* Stats read as a headline row, not a stat widget. */
.stat-row {
  border-block-start: 1px solid var(--color-border);
  padding-block-start: clamp(28px, 3vw, 44px);
  gap: clamp(28px, 3vw, 48px);
}
.stat__value {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  letter-spacing: -0.04em;
}
.stat__value small { font-size: 0.42em; }
.stat__label { margin-block-start: var(--space-3); font-size: var(--text-body-sm); }

/* A section title with the pill above it, left aligned. */
.section-head .pill { margin-block-end: var(--space-5); }

/* ============================================================
   Diagrams
   Each block carries a drawing of the thing it claims, not a
   decorative icon. They animate once on reveal: lines draw,
   bars grow, the marked field lands.
   ============================================================ */

.dia {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  padding: clamp(14px, 1.8vw, 26px);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.dia--inverse { background: oklch(1 0 0 / 0.06); }
.dia svg { inline-size: 100%; block-size: auto; display: block; }

.dia [data-draw] {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1100ms var(--ease-out) var(--delay, 0ms);
}
.is-revealed .dia [data-draw],
.dia.is-revealed [data-draw] { stroke-dashoffset: 0; }

.dia [data-grow] {
  transform-box: fill-box;
  transform-origin: bottom center;
  scale: 1 0;
  transition: scale 760ms var(--ease-out) var(--delay, 0ms);
}
.is-revealed .dia [data-grow],
.dia.is-revealed [data-grow] { scale: 1 1; }

.dia [data-pop] {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  scale: 0.92;
  transition-property: opacity, scale;
  transition-duration: 520ms;
  transition-timing-function: var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.is-revealed .dia [data-pop],
.dia.is-revealed [data-pop] { opacity: 1; scale: 1; }

.dia [data-slide] {
  transform-box: fill-box;
  opacity: 0;
  translate: -8px 0;
  transition-property: opacity, translate;
  transition-duration: 560ms;
  transition-timing-function: var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.is-revealed .dia [data-slide],
.dia.is-revealed [data-slide] { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .dia [data-draw] { stroke-dashoffset: 0; }
  .dia [data-grow] { scale: 1 1; }
  .dia [data-pop], .dia [data-slide] { opacity: 1; scale: 1; translate: 0 0; }
}
.no-js .dia [data-draw] { stroke-dashoffset: 0; }
.no-js .dia [data-grow] { scale: 1 1; }
.no-js .dia [data-pop], .no-js .dia [data-slide] { opacity: 1; scale: 1; translate: 0 0; }

/* Diagram ink — one hue system, so a drawing reads as part of the page. */
.dia { --ink: var(--stone-800); --ink-2: var(--stone-400); --line: var(--stone-300); --paper: oklch(1 0 0); --mark: var(--bronze-600); }
.dia--inverse { --ink: var(--stone-100); --ink-2: var(--stone-500); --line: oklch(1 0 0 / 0.22); --paper: oklch(1 0 0 / 0.08); --mark: var(--bronze-400); }

/* ============================================================
   Hero film stack — one clip per line of copy. Only the active
   clip plays; the rest are paused, so five videos cost about
   what one does.
   ============================================================ */

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 55%;
  opacity: 0;
  transition: opacity 380ms var(--ease-out);
}
.hero__video[data-active="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__video { transition: none; }
}

/* ============================================================
   People — the portrait is the tile, and the bio surfaces over it
   on its own as the card comes into view. Hovering pulls the bio
   back so the face is clear again, which is the only interaction.
   ============================================================ */

.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-5); }

.person {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--stone-900);
  outline: 1px solid var(--color-image-outline);
  outline-offset: -1px;
  isolation: isolate;
}

.person__media { position: absolute; inset: 0; z-index: -2; }
.person__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: blur(0px) saturate(1);
  scale: 1;
  transition-property: filter, scale;
  transition-duration: 700ms;
  transition-timing-function: var(--ease-out);
}
.person.is-revealed .person__media img { filter: blur(13px) saturate(0.82); scale: 1.08; }
.person:hover .person__media img,
.person:focus-within .person__media img { filter: blur(0px) saturate(1); scale: 1; }

/* Monogram tile for anyone without a portrait. */
.person__monogram {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--stone-800), var(--stone-950));
  font-family: var(--font-mono);
  font-size: clamp(7rem, 14vw, 12rem);
  font-weight: 700;
  line-height: 1;
  color: oklch(1 0 0 / 0.1);
  transition: color 700ms var(--ease-out);
}
.person.is-revealed .person__monogram { color: oklch(1 0 0 / 0.05); }
.person:hover .person__monogram { color: oklch(1 0 0 / 0.12); }

.person__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, oklch(0.152 0.006 68 / 0.86) 0%, oklch(0.152 0.006 68 / 0.72) 46%, oklch(0.152 0.006 68 / 0.9) 100%);
  opacity: 0.42;
  transition: opacity 700ms var(--ease-out);
}
.person.is-revealed .person__veil { opacity: 1; }
.person:hover .person__veil,
.person:focus-within .person__veil { opacity: 0.42; }

.person__inner {
  position: relative;
  block-size: 100%;
  padding: clamp(20px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  color: var(--color-text-on-inverse);
}
.person__name { font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.018em; }
.person__role {
  margin-block-start: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze-300);
}

.person__bio {
  margin-block-start: auto;
  font-size: var(--text-body-sm);
  line-height: 1.75;
  color: oklch(1 0 0 / 0.82);
  max-inline-size: 34ch;
  text-wrap: pretty;
  opacity: 0;
  translate: 0 12px;
  transition-property: opacity, translate;
  transition-duration: 640ms;
  transition-timing-function: var(--ease-out);
  transition-delay: 180ms;
}
.person.is-revealed .person__bio { opacity: 1; translate: 0 0; }
.person:hover .person__bio,
.person:focus-within .person__bio { opacity: 0; translate: 0 12px; transition-delay: 0ms; }
.person__bio b { color: oklch(1 0 0 / 0.97); font-weight: 600; }

.person__peek {
  position: absolute;
  inset-block-end: clamp(20px, 2.6vw, 34px);
  inset-inline-end: clamp(20px, 2.6vw, 34px);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.45);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.person:hover .person__peek { opacity: 1; }

@media (hover: none) {
  /* No hover to pull the bio back, so it simply stays. */
  .person:hover .person__media img { filter: blur(13px) saturate(0.82); scale: 1.08; }
  .person:hover .person__veil { opacity: 1; }
  .person:hover .person__bio { opacity: 1; translate: 0 0; }
  .person__peek { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .person__media img, .person__veil, .person__bio, .person__monogram { transition: none; }
}
.no-js .person__bio { opacity: 1; translate: 0 0; }
.no-js .person__veil { opacity: 1; }

/* Comparison — three columns of the same rows, read down not across. */
.compare { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.compare__col { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-bg-subtle); }
.compare__col[data-ours="true"] { background: var(--color-bg-inverse); color: var(--color-text-on-inverse); }
.compare__who { font-size: var(--text-h4); font-weight: 700; letter-spacing: -0.014em; }
.compare__sub { margin-block-start: 4px; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.compare__col[data-ours="true"] .compare__sub { color: var(--bronze-300); }
.compare__list { margin-block-start: var(--space-5); display: flex; flex-direction: column; }
.compare__row { padding-block: var(--space-3); border-block-start: 1px solid var(--color-border); }
.compare__col[data-ours="true"] .compare__row { border-block-start-color: var(--color-border-inverse); }
.compare__k { font-size: var(--text-caption); color: var(--color-text-muted); }
.compare__col[data-ours="true"] .compare__k { color: var(--stone-500); }
.compare__v { margin-block-start: 3px; font-size: var(--text-body-sm); font-weight: 600; }
.compare__col[data-ours="true"] .compare__v { color: var(--bronze-300); }

/* A wide diagram that stands on its own, not inside a block. */
.figure-wide { max-inline-size: 940px; margin-inline: auto; }
.figure-wide .dia { aspect-ratio: auto; padding: clamp(24px, 3vw, 44px); }
.figure-wide .dia svg { max-block-size: 420px; }
.figure-wide figcaption { margin-block-start: var(--space-4); text-align: center; font-size: var(--text-caption); color: var(--color-text-muted); }