/* Hallmark · shape: Narrative Workflow, from draw 7dcd82 · genre: modern-minimal · theme: Cobalt (deal 1/3, seed portfolio-personal-tech-lead-24e3·76ba3ba2·2026-11-12·r0), in Manu's Oliva colours and type (by request) · job: hire · draw: 7dcd82
 * hero: Poster · nav: banner over a retracting bar · footer: index columns · imagery: screenshots 2 (EchoLog, the user's own), portrait 1 (the user's) · signature: a streamline field where raw inputs wander until one architecture line, then sort into lanes that name the kinds of architecture he builds
 * axes: light/grotesk-sans/chromatic-olive · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: P, a portfolio can drift into a CV; every stage carries one concrete object (a load chart, a mapping, a product) instead of adjectives */
/* Hallmark · waive 77 · the career is a ruled four-row table with display-size years across ten columns · its mass is those rows, which the thin-section detector does not count inside a table */
@import url("./tokens.css");
@import url("./base.css");

/* ── Chrome ── */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.site-head { position: sticky; top: calc(-1 * var(--banner-h)); z-index: var(--z-sticky-nav); background: var(--color-paper); }
.banner { height: var(--banner-h); display: flex; align-items: center; }
.banner__in { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); font: 700 var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; color: var(--color-ink); white-space: nowrap; }
.wordmark__avatar { flex: none; width: 44px; height: 44px; border-radius: var(--radius-pill); object-fit: cover; box-shadow: 0 0 0 1px var(--color-rule); }
.banner__in { align-items: center; }
.banner__role { color: var(--color-muted); font-size: var(--text-sm); }
.bar { height: var(--bar-h); display: flex; align-items: center; border-block: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.bar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.bar__links { display: flex; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.bar__end { display: flex; align-items: center; gap: var(--space-xs); flex: none; }
.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: var(--space-xs); color: var(--color-ink-2); font: 400 var(--text-sm)/1 var(--font-outlier); text-decoration: none; border-radius: var(--radius-input); transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.lang-switch:hover { color: var(--color-ink); background: var(--color-paper-2); }
.lang-switch:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.bar__links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; text-decoration: none; border-radius: var(--radius-input); transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.bar__links a:hover { color: var(--color-ink); background: var(--color-paper-2); }
.bar__links a:active { background: var(--color-paper-3); }
.bar__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ── Keys (Cobalt's keycaps in Oliva) ── */
.key { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-key-face); color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-display); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-key); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.key:hover { transform: translateY(-1px); }
.key:active { transform: translateY(3px); box-shadow: var(--shadow-key-press); }
.key:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.key:disabled, .key[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.key--primary { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); box-shadow: var(--shadow-key-accent); }
.key--primary:hover { background: var(--color-accent-deep); }
.key--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }

.cut { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
@supports (corner-shape: bevel) { .cut { border-radius: var(--cut-l) 4px var(--cut-l) 4px; corner-shape: bevel round bevel round; } }
.graphite { background: var(--color-graphite); color: var(--color-graphite-ink); border-color: var(--color-graphite-2); }

/* ── Hero: Poster over the field ── */
.hero { position: relative; isolation: isolate; min-height: calc(100dvh - var(--banner-h) - var(--bar-h)); display: grid; align-items: end; overflow: clip;
  background-image: radial-gradient(circle at 1px 1px, var(--color-glyph-2) 1px, transparent 1.4px); background-size: var(--cell-w) var(--cell-h); }
.hero.field-on { background-image: none; }
.field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero__in { padding-block: var(--space-3xl) var(--space-2xl); }
.hero__text { max-width: 40rem; display: grid; gap: var(--space-lg); }
.hero h1 { font-size: clamp(3rem, 6.4vw, 6rem); line-height: 0.98; max-width: 12ch; }
.hero .lead { color: var(--color-ink-2); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-top: var(--space-xs); }

/* ── Stages ── */
.stage { padding-block: var(--section-gap) 0; }
.stage--case { padding-top: var(--section-gap-s); }
.stage--list { padding-top: var(--section-gap-l); }
.stage--contact { padding-bottom: var(--section-gap); }
.head-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head-split .lead { color: var(--color-ink-2); }

/* 2 · the load chart: capacity follows demand, no figures */
.load { margin: 0; padding: var(--space-xl); display: grid; gap: var(--space-md); }
.load__chart { width: 100%; height: clamp(140px, 18vw, 220px); overflow: visible; }
.load__chart path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.load__demand { stroke: var(--color-accent-2); stroke-width: 2.5; }
.load__cap { stroke: var(--color-signal); stroke-width: 2; }
.load__legend { display: flex; gap: var(--space-lg); font: 400 var(--text-sm)/1 var(--font-outlier); color: var(--color-graphite-muted); }
.load__key { display: inline-flex; align-items: center; gap: var(--space-xs); }
.load__key::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.load__key--demand::before { background: var(--color-accent-2); }
.load__key--cap::before { background: var(--color-signal); }
.load figcaption { font-size: var(--text-sm); color: var(--color-graphite-muted); }
.fig { display: grid; gap: var(--space-xs); max-width: none; }
.fig__n { font: 700 clamp(3.5rem, 7vw, 6.5rem)/0.9 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.fig span { max-width: 30ch; color: var(--color-graphite-muted); }
.milestones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-2xl) 0 0; }
.milestones > div { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); }
.milestones dt { font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.01em; }
.milestones dd { margin: var(--space-xs) 0 0; color: var(--color-ink-2); max-width: 34ch; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .load { view-timeline: --load block; }
    .load__chart { animation: load-draw linear both; animation-timeline: --load; animation-range: entry 30% cover 50%; }
    @keyframes load-draw { from { clip-path: inset(-10px 100% -10px 0); } to { clip-path: inset(-10px 0 -10px 0); } }
  }
}

/* 2 · rows */
.rows-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.rows-wrap h2 { position: sticky; top: calc(var(--bar-h) + var(--space-xl)); }
.rows { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-2); }
.rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows p { color: var(--color-ink-2); }
.rows b { color: var(--color-accent-deep); font-weight: 700; }

/* 3 · the mapping */
.map { margin: 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1.4fr) minmax(0, 6fr); align-items: center; }
.map__pane { padding: var(--space-lg) var(--space-xl); display: grid; gap: var(--space-2xs); }
.map__title { color: var(--color-graphite-muted); font-size: var(--text-sm); padding-bottom: var(--space-xs); }
.map__line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); min-height: 56px; align-items: center; border-top: var(--rule-hair) solid var(--color-graphite-2); }
.map__line b { font: 400 var(--text-lg)/1 var(--font-outlier); color: var(--color-accent-2); white-space: nowrap; }
.map__pane:first-child .map__line b { color: var(--color-graphite-muted); }
.map__wires { width: 100%; height: 100%; overflow: visible; }
.map__wires path { fill: none; stroke: var(--color-accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.map__result { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.map__result .fig__n { color: var(--color-accent-deep); }
.map__result span { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 32ch; }
.js .map__wires path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js .map.is-in .map__wires path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .js .map__wires path { stroke-dashoffset: 0; transition: none; } }

/* 4 · the product */
.product { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: center; }
.product__text { display: grid; gap: var(--space-lg); justify-items: start; }
.product__text .lead { color: var(--color-ink-2); }
.facts { display: grid; gap: 0; margin: 0; width: 100%; }
.facts > div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; font-weight: 600; }
.product__shots { display: grid; grid-template-columns: minmax(0, 1fr); }
.shot { margin: 0; aspect-ratio: 16 / 10; min-height: 440px; overflow: hidden; }
.shot[data-slot] > img { object-position: 0 0; }
[data-kind="product"] > img { filter: none; mix-blend-mode: normal; }
[data-kind="product"]:has(> img)::before { content: none; }

/* 4 · the plans: an index on the left, the drawing on the right */
.plans { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.plans__index { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-2); counter-reset: plan; }
.plans__index li { counter-increment: plan; border-bottom: var(--rule-hair) solid var(--color-rule); }
.plan-tab { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-sm); padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; min-height: 56px; color: var(--color-ink-2); text-decoration: none; border-radius: var(--radius-input); transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.plan-tab::before { content: counter(plan, decimal-leading-zero); grid-row: 1 / 3; align-self: start; padding-top: 0.15em; font: 400 var(--text-sm)/1.4 var(--font-outlier); color: var(--color-muted); }
.plan-tab__kind { font-size: var(--text-sm); color: var(--color-muted); }
.plan-tab__title { font-weight: 600; line-height: 1.35; }
.plan-tab:hover { color: var(--color-ink); background: var(--color-paper-2); }
.plan-tab:active { background: var(--color-paper-3); }
.plan-tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.plan-tab[aria-current="true"] { color: var(--color-ink); }
.plan-tab[aria-current="true"]::before { color: var(--color-accent-deep); font-weight: 700; }
.plan-tab[aria-current="true"]::after { content: ""; position: absolute; left: -1px; right: 0; bottom: -1px; height: 2px; background: var(--color-accent); }
.plans__view { position: sticky; top: calc(var(--bar-h) + var(--space-lg)); margin: 0; overflow: hidden; background: var(--color-surface); }
.plans__frame { display: block; aspect-ratio: 1200 / 1000; background: var(--color-surface); cursor: zoom-in; }
.plans__frame img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; transition: opacity var(--dur-short) var(--ease-out); }
.plans__frame:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.plans__frame.is-loading img { opacity: 0.35; }
.plans__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); padding: var(--space-md) var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.plans__title { font-weight: 600; color: var(--color-ink); max-width: 44ch; }
@media (prefers-reduced-motion: reduce) { .plans__frame img { transition: none; } }

/* the full-size viewer */
.plan-dialog { width: calc(100% - 2 * var(--space-md)); max-width: 96rem; height: calc(100dvh - 2 * var(--space-md)); max-height: none; margin: auto; padding: 0; background: var(--color-surface); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.plan-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.plan-dialog::backdrop { background: var(--color-scrim); }
.plan-dialog__bar { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.plan-dialog__title { flex: 1; min-width: 0; max-width: none; font-size: var(--text-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-dialog[open] { grid-template-rows: auto minmax(0, 1fr) auto; }
.plan-dialog__zoom { display: flex; align-items: center; }
.plan-dialog__level { min-width: 4.5rem; min-height: 44px; padding: 0 var(--space-xs); border: 0; border-radius: var(--radius-input); background: transparent; color: var(--color-ink-2); font: 400 var(--text-sm)/1 var(--font-outlier); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.plan-dialog__level:hover { background: var(--color-paper-2); }
.plan-dialog__canvas { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--color-surface); touch-action: none; user-select: none; overscroll-behavior: contain; }
.plan-dialog__canvas.is-pannable { cursor: grab; }
.plan-dialog__canvas.is-dragging { cursor: grabbing; }
.plan-dialog__canvas:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.plan-dialog__canvas img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.plan-dialog__hint { padding: var(--space-xs) var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.plan-dialog[open] { animation: dialog-in var(--dur-long) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .plan-dialog[open] { animation: none; } }
body:has(.plan-dialog[open]) { overflow: hidden; }

/* 6 · the path */
.stage--path h2 { margin-bottom: var(--space-2xl); }
.path { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: start; }
.path__table { overflow-x: auto; }
.path table { width: 100%; border-collapse: collapse; }
.path th, .path td { text-align: left; padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.path thead th { padding-block: var(--space-sm); font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); white-space: nowrap; }
.path tbody th { font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.01em; }
.path td.num { font: 700 var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-muted); width: 9rem; font-variant-numeric: tabular-nums; }
.path tr.is-now td.num { color: var(--color-accent-deep); }
.path td:last-child { color: var(--color-ink-2); }
.certs { padding: var(--space-lg); background: var(--color-surface); }
.certs h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.certs ul { margin: 0; padding: 0; list-style: none; }
.certs li { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.certs li span { font-weight: 600; }
.certs time { font-size: var(--text-sm); color: var(--color-muted); }

/* 6 · contact */
.contact { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.portrait { margin: 0; aspect-ratio: 4 / 5; min-height: 440px; border-radius: var(--radius-field); }
.portrait > img { object-position: 52% 22%; filter: none; mix-blend-mode: normal; }
.portrait::before { display: none; }
.contact__text { display: grid; gap: var(--space-lg); justify-items: start; }
.contact__text .lead { color: var(--color-ink-2); }
.contact__list { margin: 0; width: 100%; max-width: 36rem; }
.contact__list > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: var(--space-md); min-height: 56px; border-top: var(--rule-hair) solid var(--color-rule); }
.contact__list dt { color: var(--color-muted); }
.contact__list dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); font-weight: 600; }
.contact__list a { overflow-wrap: anywhere; text-decoration-color: var(--color-rule-2); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.contact__list a:hover { text-decoration-color: var(--color-accent); }
.copy-status { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }

/* ── Contact dialog ── */
.contact-dialog { width: min(36rem, calc(100% - 2 * var(--space-md))); max-height: calc(100dvh - 2 * var(--space-md)); padding: 0; background: var(--color-surface); color: var(--color-ink); border-color: var(--color-rule-2); box-shadow: var(--shadow-card); }
.contact-dialog::backdrop { background: var(--color-scrim); }
.contact-dialog[open] { animation: dialog-in var(--dur-long) var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .contact-dialog[open] { animation: none; } }
.contact-form { display: grid; gap: var(--space-md); padding: var(--space-xl); }
.contact-form__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.contact-form__head h2 { font-size: var(--text-2xl); }
.contact-form__lead { color: var(--color-ink-2); }
.contact-form__close { display: inline-grid; place-items: center; width: 44px; height: 44px; border: var(--rule-hair) solid transparent; border-radius: var(--radius-input); background: transparent; color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.contact-form__close:hover { background: var(--color-paper-2); }
.contact-form__close:active { background: var(--color-paper-3); }
.contact-form__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cf-field { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.cf-field input, .cf-field textarea { min-height: 48px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-field); background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1.5 var(--font-body); outline: 2px solid transparent; outline-offset: -3px; transition: border-color var(--dur-micro) var(--ease-out); }
.cf-field textarea { resize: vertical; min-height: 8rem; }
.cf-field input:focus-visible, .cf-field textarea:focus-visible { outline-color: var(--color-focus); }
.cf-field input[aria-invalid="true"], .cf-field textarea[aria-invalid="true"] { border-color: var(--color-error); }
.cf-field input:disabled, .cf-field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-form__status { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
.contact-form__status[data-tone="error"] { color: var(--color-error); }
.contact-form__status[data-tone="ok"] { color: var(--color-success); font-weight: 600; }
.contact-form__send { justify-self: start; }
.contact-form__send[aria-busy="true"] { cursor: progress; opacity: 0.8; }
body:has(.contact-dialog[open]) { overflow: hidden; }
@media (max-width: 40rem) { .contact-form { padding: var(--space-lg); } .contact-form__send { justify-self: stretch; } }

/* ── Footer: index columns ── */
.site-foot { border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); padding-block: var(--space-2xl); }
.foot { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--gap-columns); align-items: start; }
.foot__mark { font: 700 var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.foot__col { display: grid; gap: var(--space-2xs); }
.foot__head { color: var(--color-muted); font-size: var(--text-sm); padding-bottom: var(--space-xs); }
.foot__col a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.foot__col a:hover { color: var(--color-accent-deep); text-decoration: underline; }
.foot__legal { grid-column: 1 / -1; padding-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }

/* ── One reveal: figures decode in, visible without script ── */
.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ── Smaller screens ── */
@media (max-width: 60rem) {
  :root { --banner-h: 60px; --bar-h: 60px; }
  .banner__role { display: none; }
  .head-split, .rows-wrap, .product, .path, .contact { grid-template-columns: minmax(0, 1fr); }
  .rows-wrap h2 { position: static; }
  .head-split { gap: var(--space-md); margin-bottom: var(--space-xl); }
  .product, .contact { gap: var(--space-xl); }
  .milestones { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .map { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .map__wires { display: none; }
  .foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__mark { grid-column: 1 / -1; }
  .shot { min-height: 0; }
  .portrait { min-height: 0; max-width: 24rem; }
  .plans { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .plans__index { display: flex; gap: var(--space-xs); overflow-x: auto; scroll-snap-type: x proximity; border-top: 0; padding-bottom: var(--space-2xs); }
  .plans__index li { flex: 0 0 15rem; scroll-snap-align: start; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); }
  .plan-tab { height: 100%; padding-left: var(--space-sm); }
  .plan-tab[aria-current="true"] { background: var(--color-paper-2); }
  .plan-tab[aria-current="true"]::after { left: 0; bottom: 0; }
  .plans__view { position: static; }
  /* The field draws its whole scene above the headline: keep room for it on short phones. */
  .hero__in { padding-top: max(var(--space-3xl), 52vw); }
}
@media (max-width: 40rem) {
  .bar__links a { padding-inline: var(--space-xs); }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .map__result { flex-direction: column; gap: var(--space-xs); }
  .path tbody th { font-size: var(--text-md); }
  .path td.num { font-size: var(--text-xl); width: 4.5rem; }
  .contact__list > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-sm); }
  .contact__list a { white-space: nowrap; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) { .bar__links li:nth-child(3) { display: none; } }
@media (max-width: 26rem) { .bar__links li:nth-child(2) { display: none; } }
@media (max-width: 22rem) { .bar__links li:nth-child(4) { display: none; } }