/* =========================================================
   Ziyi Jiang — portfolio
   Tokens mirror the Figma "My website" variables (ZJ · *).
   ========================================================= */

/* ---------- Primitives → semantic tokens (Light) ---------- */
:root {
  --neutral-0: #ffffff;  --neutral-50: #f7f7f5; --neutral-100: #f4f4f2;
  --neutral-200: #ebebe8; --neutral-300: #d9d9d6; --neutral-400: #a3a3a5;
  --neutral-500: #8a8b8f; --neutral-600: #6e6f73; --neutral-700: #3a3b3f;
  --neutral-800: #232428; --neutral-900: #16171a;

  --bg-page: var(--neutral-0);
  --bg-surface: var(--neutral-50);
  --bg-sunken: var(--neutral-100);
  --bg-raised: var(--neutral-0);
  --bg-muted: rgba(22, 23, 26, .04);
  --bg-glass: rgba(255, 255, 255, .6);

  --text-primary: var(--neutral-800);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-400);

  --border-subtle: rgba(22, 23, 26, .07);
  --border-default: rgba(22, 23, 26, .10);
  --border-strong: var(--neutral-900);

  --action-primary-bg: var(--neutral-900);
  --action-primary-bg-hover: var(--neutral-700);
  --action-primary-fg: var(--neutral-50);
  --action-secondary-bg: var(--neutral-0);
  --action-secondary-bg-hover: var(--neutral-100);
  --action-secondary-fg: var(--neutral-900);

  /* Accent — "Ink" mode by default (homepage) */
  --accent-fill: #16171a;
  --accent-hover: #3a3b3f;
  --accent-text: #16171a;     /* accent/text — case page title */
  --accent-ink: #16171a;      /* eyebrows, numbers, small links */
  --accent-subtle: #f4f4f2;
  --accent-on: #f7f7f5;
  --bg-inverse: #0e0f11;      /* Figma bg/page, Dark mode — About "Reconnection" band */

  /* Effects */
  --shadow-hairline: 0 1px 4px rgba(22, 23, 26, .05), 0 6px 20px rgba(22, 23, 26, .05);
  --shadow-card-hover: 0 24px 48px rgba(22, 23, 26, .08);
  --shadow-image: 0 8px 40px rgba(31, 31, 41, .10);
  --shadow-nav: 0 8px 32px rgba(22, 23, 26, .06);

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-full: 999px;

  /* Layout */
  --container: 1248px;
  --gutter: clamp(20px, 6.667vw, 96px);
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Type */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-display: clamp(40px, 3.4vw + 16px, 64px);
  --fs-h1: clamp(34px, 1.9vw + 21px, 48px);
  --fs-h2: clamp(27px, 1.25vw + 18px, 36px);
  --fs-h3: clamp(22px, .8vw + 17px, 28px);
}

/* Per-case accent modes (ZJ · Accent / ZJ · Blue Family) */
[data-accent="cobalt"] { --accent-fill:#2f6bff; --accent-hover:#1f55e0; --accent-text:#1f55e0; --accent-ink:#1f55e0; --accent-subtle:#e6edff; --accent-on:#fff; }
[data-accent="azure"]  { --accent-fill:#2b7fd6; --accent-hover:#1f69b8; --accent-text:#1f69b8; --accent-ink:#2b7fd6; --accent-subtle:#e2eefb; --accent-on:#fff; }
[data-accent="violet"] { --accent-fill:#6b4bff; --accent-hover:#5634e6; --accent-text:#5634e6; --accent-ink:#5634e6; --accent-subtle:#ece8ff; --accent-on:#fff; }
[data-accent="moss"]   { --accent-fill:#7c8c3a; --accent-hover:#67762f; --accent-text:#67762f; --accent-ink:#67762f; --accent-subtle:#edf0de; --accent-on:#fff; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg-page); color: var(--text-primary);
  font-family: var(--font-sans); font-size: 16px; line-height: 26px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.page-home { background: #f2f3f4; }
h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 16px; border-radius: var(--r-full); background: var(--action-primary-bg); color: var(--action-primary-fg); font-size: 14px; font-weight: 600; }
.skip-link:focus { top: 16px; }

/* ---------- Type styles (ZJ/…) ---------- */
.display-l { font-size: var(--fs-display); line-height: .97; font-weight: 700; letter-spacing: -.04em; }
.h1 { font-size: var(--fs-h1); line-height: 1.042; font-weight: 700; letter-spacing: -.03em; }
.h2 { font-size: var(--fs-h2); line-height: 1.111; font-weight: 700; letter-spacing: -.03em; }
.h3 { font-size: var(--fs-h3); line-height: 1.214; font-weight: 700; letter-spacing: -.025em; }
.h4 { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.015em; }
.h5 { font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -.01em; }
.body-l { font-size: 18px; line-height: 29px; }
.body-m { font-size: 16px; line-height: 26px; }
.body-s { font-size: 14px; line-height: 22px; }
.label-m { font-size: 14px; line-height: 20px; font-weight: 600; }
.label-s { font-size: 12.5px; line-height: 16px; }
.caption { font-size: 12px; line-height: 16px; font-weight: 500; }
.overline { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.mono { font-family: var(--font-mono); font-size: 12px; line-height: 16px; }

.c-primary { color: var(--text-primary); }
.c-secondary { color: var(--text-secondary); }
.c-tertiary { color: var(--text-tertiary); }
.c-accent { color: var(--accent-ink); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Nav (sticky · glass) ---------- */
.site-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: 24px; pointer-events: none; }
.nav-bar {
  pointer-events: auto; height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px 8px 20px; border-radius: var(--r-full);
  background: var(--bg-glass); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-nav);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.nav-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -.015em; color: #2f4560; }
.nav-logo__soft { color: #8a9bb0; font-weight: 500; }
.nav-mark { width: 22px; height: 22px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-item { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-full); font-size: 12.5px; line-height: 16px; color: var(--text-secondary); transition: background-color .18s, color .18s; }
.nav-item:hover { background: var(--bg-muted); color: var(--text-primary); }
.nav-item[aria-current="page"] { background: var(--bg-muted); color: var(--text-primary); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 12px 24px; border-radius: var(--r-full);
  font-size: 14px; line-height: 20px; font-weight: 600; box-shadow: var(--shadow-hairline);
  border: 1px solid transparent; transition: background-color .18s, border-color .18s; white-space: nowrap;
}
.btn--s { padding: 7px 16px; font-size: 12.5px; line-height: 16px; font-weight: 400; }
.btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.cta-card .btn--primary { border: 0; } /* Figma footer: primary has no border (44px), secondary 46px */
.btn--primary:hover { background: var(--action-primary-bg-hover); }
.btn--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-fg); border-color: var(--border-default); }
.btn--secondary:hover { background: var(--action-secondary-bg-hover); }
a.btn:not([href]) { cursor: default; }

.text-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; line-height: 16px; color: var(--accent-ink); transition: color .18s; }
.text-link:hover { color: var(--accent-hover); }
.text-link .arrow { display: inline-block; transition: transform .2s var(--ease); }
.text-link:hover .arrow { transform: translateX(2px); }
.text-link--back:hover .arrow { transform: translateX(-2px); }
.social-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-full); font-size: 12.5px; line-height: 16px; white-space: nowrap; }
.chip--tag { background: var(--bg-muted); color: var(--text-tertiary); }
.chip--label, .chip--status { background: var(--bg-raised); color: var(--text-primary); box-shadow: var(--shadow-hairline); }
.chip--accent { background: var(--accent-fill); color: var(--accent-on); }
.chip--status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fill); flex: none; }
.chip-group { display: flex; flex-direction: column; gap: 10px; }
.chip-group .chips { gap: 8px; }

/* ---------- Images ---------- */
.shot { width: 100%; min-width: 0; height: auto; box-shadow: var(--shadow-image); background: var(--bg-sunken); }
/* Safari sizes <img> flex/grid items from their intrinsic (2x export) size unless
   min-width and an explicit width are set; column flex items also must not shrink. */
.stack > img, .cell > img, .ba__item > img, .fig > img, .edge > img, .grid2 > img, .grid3 > img { width: 100%; min-width: 0; max-width: 100%; height: auto; flex-shrink: 0; }
.fig--split > .shot { width: var(--img-w, 600px); }
.shot--flat { box-shadow: none; }
img.is-missing { background: repeating-linear-gradient(-45deg, var(--bg-sunken) 0 12px, #efefec 12px 24px); color: var(--text-tertiary); font: 12px/16px var(--font-mono); }

/* =========================================================
   HOME
   ========================================================= */
.hero { min-height: max(720px, 100svh); display: flex; align-items: center; padding-top: 104px; padding-bottom: 80px; }
.hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.hero__text { flex: 1 1 660px; max-width: 660px; display: flex; flex-direction: column; gap: 32px; }
.hero__hi { color: var(--text-secondary); }
.hero__title { color: var(--text-primary); }
.hero__title .soft { color: var(--text-tertiary); }
.hero__lead { max-width: 520px; color: var(--text-secondary); }
.hero__pile { flex: 0 1 540px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pile-hint { color: var(--text-tertiary); }
.pile-hint .touch { display: none; }
@media (pointer: coarse) { .pile-hint .fine { display: none; } .pile-hint .touch { display: inline; } }

/* Tag pile */
.tag-stage { position: relative; width: 540px; max-width: 100%; height: 420px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tag-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border-default); }
.tag {
  position: absolute; left: 0; top: 0; height: 42px; padding: 10px 18px; border-radius: var(--r-full);
  background: var(--bg-page); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-align: left;
  transform-origin: 50% 50%; will-change: transform;
  transition: width .22s var(--ease), color .22s, box-shadow .22s;
}
.tag__label, .tag__sentence { display: block; transition: opacity .22s var(--ease); }
.tag__sentence { position: absolute; left: 18px; top: 10px; opacity: 0; }
.tag.is-open { color: var(--text-primary); box-shadow: 0 8px 24px rgba(22, 23, 26, .08); z-index: 10; }
.tag.is-open .tag__label { opacity: 0; }
.tag.is-open .tag__sentence { opacity: 1; }
.tag-stage.is-physics .tag { cursor: grab; transition: color .22s, box-shadow .22s; }
.tag-stage.is-dragging .tag { cursor: grabbing; }
.tag-stage:not(.is-ready) .tag { visibility: hidden; }
.tag-stage.is-static .tag { transition: width .15s ease, color .15s, box-shadow .15s; }
.tag-stage.is-static .tag__label, .tag-stage.is-static .tag__sentence { transition: opacity .15s ease; }
.tag-stage.is-wrap { display: flex; flex-wrap: wrap; align-content: flex-end; gap: 8px 6px; padding-bottom: 8px; height: auto; min-height: 200px; }
.tag-stage.is-wrap .tag { position: relative; transform: none !important; }

/* Section scaffolding */
.home-section { padding-block: 160px; }
.home-section--other { padding-top: 0; }
.section-title { margin-bottom: 48px; }
.section-title .soft { color: var(--text-tertiary); }

/* Masonry · 2 columns */
.masonry { display: flex; gap: 24px; align-items: flex-start; }
.masonry__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.project-card {
  position: relative; display: flex; flex-direction: column; gap: 40px; padding: 48px;
  background: var(--bg-page); border-radius: var(--r-2xl); overflow: hidden;
  transition: box-shadow .3s var(--ease);
}
.project-card__text { display: flex; flex-direction: column; gap: 16px; }
.project-card__title { color: var(--text-primary); padding-right: 48px; }
.project-card__q { color: var(--text-secondary); }
.project-card__media { border-radius: var(--r-lg); overflow: hidden; }
.project-card__media img { width: 100%; height: auto; }
.card-arrow {
  position: absolute; top: 40px; right: 48px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-sunken); color: var(--text-primary);
  font-size: 14px; font-weight: 600; opacity: 0; transform: translate(-4px, 4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.project-card:hover, .project-card:focus-visible { box-shadow: var(--shadow-card-hover); }
.project-card:hover .card-arrow, .project-card:focus-visible .card-arrow { opacity: 1; transform: none; }
.project-card:focus-visible { outline-offset: 4px; border-radius: var(--r-2xl); }

/* Other work */
.other-title { margin-bottom: 40px; }
.small-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.small-card { display: flex; flex-direction: column; gap: 20px; }
.small-card__media { border-radius: 20px; overflow: hidden; aspect-ratio: 400 / 267; transition: box-shadow .3s var(--ease); }
.small-card__media--stroke { border: 1px solid #e5e7eb; }
.small-card__media img { width: 100%; height: 100%; object-fit: cover; }
.small-card__text { display: flex; flex-direction: column; gap: 8px; }
.small-card__title { display: flex; gap: 8px; align-items: baseline; color: var(--text-primary); }
.small-card__title .arrow { opacity: 0; transition: opacity .2s, transform .2s var(--ease); transform: translate(-3px, 3px); }
.small-card__desc { color: var(--text-secondary); }
.small-card .chips { margin-top: 4px; }
a.small-card[href]:hover .small-card__media, a.small-card[href]:focus-visible .small-card__media { box-shadow: 0 16px 48px rgba(22, 23, 26, .12); }
a.small-card[href]:hover .small-card__title .arrow, a.small-card[href]:focus-visible .small-card__title .arrow { opacity: 1; transform: none; }

/* CTA / footer card */
.site-footer { padding-bottom: 96px; }
.cta-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 48px; border-radius: var(--r-2xl); background: var(--bg-surface); }
.cta-card__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* description + © share the title's width, pushed to either end */
.cta-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; }
.cta-card__buttons { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }


/* =========================================================
   CASE STUDY
   ========================================================= */
.case { padding-top: 160px; }
.case-hero { display: flex; flex-direction: column; gap: 24px; }
.case-hero > .chip, .case-hero > .text-link { align-self: flex-start; }
.case-hero__title { color: var(--accent-text); }
.case-hero__lead { color: var(--text-secondary); max-width: 720px; }
.case-meta { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 24px; padding-block: 24px; border-block: 1px solid var(--border-subtle); }
.meta-field { display: flex; flex-direction: column; gap: 8px; }
.meta-field dt { color: var(--text-tertiary); }
.meta-field dd { color: var(--text-primary); }

.case-body { display: grid; grid-template-columns: 200px minmax(0, 952px); justify-content: space-between; gap: 96px; margin-top: 80px; }
.toc { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; gap: 4px; }
.toc a { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--text-tertiary); transition: color .2s; }
.toc a::before { content: ""; width: 2px; height: 14px; border-radius: var(--r-full); background: var(--border-subtle); transition: background-color .2s; flex: none; }
.toc a:hover { color: var(--text-secondary); }
.toc a.is-active { color: var(--text-primary); }
.toc a.is-active::before { background: var(--accent-fill); }
.case-main { display: flex; flex-direction: column; gap: 160px; min-width: 0; }
.cs { display: flex; flex-direction: column; gap: 32px; scroll-margin-top: 120px; }
.cs--48 { gap: 48px; }
.page-case .site-footer { margin-top: 80px; }

/* Section header */
.sh { display: flex; flex-direction: column; gap: 12px; }
.sh .overline { color: var(--accent-ink); }
.p { color: var(--text-secondary); }

/* Pull quote */
.pull { display: flex; gap: 24px; }
.pull::before { content: ""; width: 4px; flex: none; border-radius: var(--r-full); background: var(--accent-fill); }
.pull p { color: var(--text-primary); }

/* --gap is per-element: never inherit it from an ancestor figure/stack (inline --gap still wins) */
.fig, .stack, .grid2, .grid3 { --gap: initial; }

/* Figures (surface blocks) */
.fig { display: flex; flex-direction: column; gap: var(--gap, 24px); padding: 40px; border-radius: var(--r-2xl); background: var(--bg-surface); }
.fig--center { align-items: center; justify-content: center; }
.fig--split { flex-direction: row; align-items: center; gap: 32px; }
.fig--split > .shot { flex: 0 1 var(--img-w, 600px); min-width: 0; }
.fig--split > .annot, .fig--split > .annot-note { flex: 0 0 var(--note-w, 240px); }
.stack { display: flex; flex-direction: column; gap: var(--gap, 12px); }
.fig > .overline, .stack > .overline.c-tertiary { color: var(--text-tertiary); }

/* Question / info cards */
.cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; }
.qcard { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-xl); background: var(--bg-surface); }
.qcard--12 { gap: 12px; }
.qcard > .mono { color: var(--accent-ink); }

/* Flow diagrams */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 8px; }
.flow--center { justify-content: center; }
.flow--g16 { gap: 16px; }
.arr { color: var(--text-tertiary); font-size: 16px; line-height: 26px; }
.node { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--bg-raised); border: 1px solid var(--border-subtle); }
.node--g4 { gap: 4px; }
.node .mono, .node .overline, .node .caption { color: var(--text-tertiary); }
.node .label-m { color: var(--text-primary); }
.node--muted .label-m { color: var(--text-secondary); }
.node--accent { background: var(--accent-subtle); border-color: var(--accent-fill); }
.node--accent .mono { color: var(--accent-ink); }
.node--dim { background: var(--bg-muted); }
.node--dim .label-m { color: var(--text-secondary); }
.node-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.vflow { display: flex; flex-direction: column; gap: 6px; }
.vflow .down { color: var(--accent-ink); font-size: 14px; line-height: 20px; font-weight: 600; }
.relations { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.relation-link { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.relation-link .caption { color: var(--accent-ink); }
.relation-link .arr { line-height: 20px; }
.lane { display: flex; align-items: center; gap: 24px; }
.lane > .overline { flex: 0 0 110px; color: var(--accent-ink); }
.lane-connector { padding-left: 134px; color: var(--text-tertiary); }
.divider { height: 1px; background: var(--border-subtle); }

/* Annotation lists */
.annot { display: flex; flex-direction: column; }
.annot > .overline { color: var(--text-tertiary); }
.annot-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); }
.annot-row:last-child { border-bottom: 0; }
.annot-row .mono { color: var(--accent-ink); flex: none; }
.annot--tight .annot-row { padding: 12px 0; }
.annot-note { display: flex; flex-direction: column; gap: 12px; }
.annot-note > .label-m { color: var(--accent-ink); margin-top: 4px; }

/* Challenge card */
.challenge { display: flex; gap: 32px; padding: 48px; border-radius: var(--r-2xl); background: var(--accent-subtle); }
.challenge--neutral { background: var(--bg-surface); }
.challenge__glyph { color: var(--accent-ink); flex: none; min-width: 34px; }
.challenge__text { display: flex; flex-direction: column; gap: 12px; }
.challenge__text .overline { color: var(--accent-ink); }

/* Callout */
.callout { display: flex; gap: 16px; padding: 24px; border-radius: var(--r-xl); background: var(--accent-subtle); }
.callout::before { content: ""; width: 3px; flex: none; border-radius: var(--r-full); background: var(--accent-fill); }
.callout__text { display: flex; flex-direction: column; gap: 6px; }
.callout__text .overline { color: var(--accent-ink); }

/* Process steps */
.steps { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 12px; }
.step { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-xl); background: var(--bg-surface); }
.fig .step { background: var(--bg-raised); }
.step::before { content: ""; height: 3px; border-radius: var(--r-full); background: var(--accent-fill); }
.step__top { display: flex; align-items: center; gap: 8px; }
.step__top .mono { color: var(--text-tertiary); }
.step__top .overline { color: var(--accent-ink); }

/* Impact / outcome cards */
.impact { display: flex; flex-direction: column; gap: 4px; padding: 32px; border-radius: var(--r-2xl); background: var(--bg-surface); }
.impact .display-l { color: var(--accent-ink); }
.outcome { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: var(--r-xl); background: var(--bg-surface); }
.outcome--16 { gap: 16px; }
/* Two labelled columns whose cards share row heights (filled column by column) */
.outcome-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(3, auto); grid-auto-flow: column; gap: 16px; }
.outcome::before { content: ""; width: 40px; height: 3px; border-radius: var(--r-full); background: var(--accent-fill); }
.award { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-xl); background: var(--bg-surface); }
.award__logo { align-self: flex-start; height: 72px; padding: 10px 14px; border-radius: var(--r-sm); background: #fff; }
.award__logo img { height: 52px; width: auto; }
.insight { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: var(--r-2xl); background: var(--bg-surface); }
.insight .chip { align-self: flex-start; color: var(--accent-ink); }

/* Closing statement */
.closing { display: flex; flex-direction: column; gap: 16px; padding: 72px 64px; border-radius: var(--r-2xl); background: var(--accent-subtle); }
.closing .overline { color: var(--accent-ink); }

/* Before/After, iterations, grids */
.ba { display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: var(--r-2xl); background: var(--bg-surface); }
.ba__item { display: flex; flex-direction: column; gap: 12px; }
.ba__item > .overline { color: var(--text-tertiary); }
.ba__item > .overline.is-after { color: var(--accent-ink); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap, 32px); align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap, 24px); align-items: start; }
.cell { display: flex; flex-direction: column; gap: 12px; }
.cell .shot { margin-top: 20px; } /* Figma: 8px spacer + 12px gap */
.cell > .mono { color: var(--accent-ink); }
.edge { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-xl); background: var(--bg-surface); }
.edge__text { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px 4px; }
.edge__text .mono { color: var(--accent-ink); }
/* Edge cases: 2 columns, cards hug their own height */
.edge-grid { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 64px; align-items: flex-start; }
.edge-grid > .edge { width: calc((100% - 16px) / 2); }
/* Image + note figure: image takes the rest, note column has a fixed width */
.split { flex-direction: row; align-items: center; }
.split > img { flex: 1 1 0; min-width: 0; }
.split > :not(img) { flex: 0 0 var(--note-w, 240px); width: var(--note-w, 240px); }
/* Several screenshots side by side: top-aligned, natural heights */
.img-row { display: flex; gap: 24px; align-items: flex-start; }
.img-row > img { flex: 1 1 0; width: 100%; min-width: 0; height: auto; }
.row-text-fig { display: flex; gap: 48px; align-items: center; padding: 40px; border-radius: var(--r-2xl); background: var(--bg-surface); }
.row-text-fig > .stack { flex: 1 1 0; min-width: 0; }
.row-text-fig > .shot { flex: 0 0 360px; width: 360px; min-width: 0; }
.config { display: flex; flex-direction: column; }
.config__row { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); align-items: baseline; }
.config__row:last-child { border-bottom: 0; }
.config__row--head { padding: 16px 0 12px; border-bottom-color: var(--border-default); }
.lifecycle-row { display: flex; gap: 16px; align-items: flex-start; }
.lifecycle-row > .stack { flex: 1 1 0; min-width: 0; }
.lifecycle-row > .arrow-mid { flex: 0 0 22px; min-width: 0; text-align: center; color: var(--text-tertiary); }
.center-note { padding: 16px 0 8px; text-align: center; color: var(--text-tertiary); }
.ia { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ia > .ia-band, .ia > .ia-cols { align-self: stretch; }
.ia-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ia-col { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-xl); background: var(--bg-page); }
.ia-col--accent { border: 1px solid var(--accent-fill); }
.ia-col .spacer { height: 4px; }
.ia-band { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; align-items: center; padding: 10px 16px; border-radius: var(--r-lg); border: 1px solid var(--border-default); }
.portal { display: flex; flex-direction: column; gap: 32px; padding: 32px; border-radius: var(--r-xl); background: var(--bg-sunken); }
.portal__head { display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.portal__title { display: flex; align-items: center; gap: 16px; }
.portal__title .overline { color: var(--accent-text); }
.portal__icon { width: 56px; height: 56px; border-radius: 14px; background: var(--bg-surface); display: grid; place-items: center; font-size: 26px; line-height: 1; flex: none; }
.portal__head > p { max-width: 360px; }
.portal-connector { display: flex; justify-content: center; }
.portal-connector span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-subtle); color: var(--accent-text); }
.phase-notes { display: flex; gap: 32px; align-items: flex-start; }
.phase-notes > .stack { flex: 0 1 420px; }
.phase-notes > .label-m { color: var(--accent-ink); flex: 1; }

/* =========================================================
   ABOUT  (Figma "About for final tweak" 316:27222)
   ========================================================= */
.about-band--white { background: var(--bg-page); }
.about-band--sunken { background: var(--bg-sunken); }
.about-photo { display: block; min-width: 0; border-radius: var(--r-lg); object-fit: cover; background: var(--bg-sunken); }

/* 01 Hero — 104px nav band + 80px */
.about-hero { padding: 184px 0 120px; }
.about-hero__inner { display: flex; align-items: center; gap: 80px; }
.about-hero__intro { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.about-hero__lead, .about-hero__body { max-width: 480px; }
.about-hero__photo { flex: 0 0 560px; width: 560px; height: 620px; }

/* Fixed 1248px compositions, scaled down by about.js when the column is narrower */
.comp { position: relative; width: 1248px; transform-origin: top left; }
.comp-arrow { position: absolute; max-width: none; --ax: 1; --ay: 0; --shift: 0px;
  translate: calc(var(--ax) * var(--shift)) calc(var(--ay) * var(--shift)); transition: translate .5s var(--ease); }
.comp-arrow--up { --ax: 0; --ay: -1; }
.comp-arrow--out { --ax: .7071; --ay: -.7071; }

/* 02 Directions overview */
.directions { padding-block: 140px; }
.directions__comp { height: 700px; }
.directions__title { position: absolute; left: 344px; top: 300px; width: 560px; text-align: center; }
.dir-card {
  position: absolute; left: var(--cx); top: var(--cy); width: 320px; display: flex; flex-direction: column; gap: 16px;
  padding: 24px; border-radius: var(--r-xl); background: var(--bg-page); border: 1px solid var(--border-subtle);
  box-shadow: 0 14px 36px rgba(22, 23, 26, .08); transform: translate(-50%, -50%) rotate(var(--r));
}

/* 03–05 Forward / Upward / Outward */
.direction { padding-block: 120px; }
.direction__inner { display: flex; flex-direction: column; gap: 48px; }
.direction__head { display: flex; gap: 96px; align-items: flex-end; min-height: 200px; }
.direction__title, .direction__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .hint-fine { display: none; } .hint-touch { display: inline; } }
.direction__closing { padding-top: 20px; border-top: 1px solid var(--border-default); }
.stack-wrap { position: relative; }
.photo-stack { position: relative; width: 1248px; height: 700px; transform-origin: top left; outline: none; cursor: pointer; }
.photo-stack.is-open { cursor: default; }
.photo-stack:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 8px; border-radius: var(--r-xl); }
.photo-card {
  position: absolute; left: 0; top: 0; width: 280px; margin: 0; display: flex; flex-direction: column;
  padding: 8px 8px 14px; border-radius: 20px; background: var(--bg-page); border: 1px solid var(--border-subtle);
  box-shadow: 0 12px 32px rgba(22, 23, 26, .10);
  transform: translate(var(--rx), var(--ry)) rotate(var(--rr));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  transition-delay: calc(240ms - var(--d, 0ms) * .6);
  will-change: transform;
}
.photo-stack.is-open .photo-card { transform: translate(var(--ox), var(--oy)) rotate(var(--or)); box-shadow: 0 18px 44px rgba(22, 23, 26, .12); transition-delay: var(--d, 0ms); }
.photo-card__img { display: block; width: 100%; height: 330px; border-radius: 14px; object-fit: cover; background: var(--bg-sunken); }
.photo-card__desc { display: flex; flex-direction: column; gap: 4px; padding: 12px 6px 0; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.photo-card__desc .overline { display: block; height: 16px; color: var(--text-tertiary); }
.photo-card__desc .body-l { color: var(--text-primary); }
.photo-card.is-top .photo-card__desc, .photo-stack.is-open .photo-card__desc { opacity: 1; transform: none; }
.photo-stack.is-open .photo-card__desc { transition-delay: calc(var(--d, 0ms) + 380ms); }

/* 06 Reconnection (dark) */
.reconnect { padding-block: 240px; background: var(--bg-inverse); } /* Figma: 940px frame, 460px composition centred */
.reconnect__comp { width: 100%; height: 460px; }
.reconnect__title { position: absolute; left: 50%; top: 168px; width: min(900px, 100%); transform: translateX(-50%); text-align: center; color: var(--neutral-50); }
.reconnect__dim { color: var(--neutral-600); transition: color .4s ease; }

/* Directions + Reconnection: arrows glide in and nudge once on scroll-in; small hover responses */
@keyframes arrow-in {
  0%   { opacity: 0; translate: calc(var(--ax) * -28px) calc(var(--ay) * -28px); }
  55%  { opacity: 1; translate: calc(var(--ax) * 8px) calc(var(--ay) * 8px); }
  78%  { translate: calc(var(--ax) * -2px) calc(var(--ay) * -2px); }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes rise-in { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes card-in { from { opacity: 0; translate: 0 24px; rotate: 4deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
[data-reveal].is-armed:not(.is-in) .comp-arrow,
[data-reveal].is-armed:not(.is-in) .dir-card,
[data-reveal].is-armed:not(.is-in) .directions__title,
[data-reveal].is-armed:not(.is-in) .reconnect__line { opacity: 0; }
[data-reveal].is-in .directions__title { animation: rise-in .7s var(--ease) both; }
[data-reveal].is-in .dir-card { animation: card-in .8s var(--ease) both; }
[data-reveal].is-in .dir-card--forward { animation-delay: .15s; }
[data-reveal].is-in .dir-card--upward { animation-delay: .3s; }
[data-reveal].is-in .dir-card--outward { animation-delay: .45s; }
[data-reveal].is-in .comp-arrow { animation: arrow-in 1.3s var(--ease) both; }
[data-reveal].is-in .comp-arrow--fwd { animation-delay: .35s; }
[data-reveal].is-in .comp-arrow--up { animation-delay: .5s; }
[data-reveal].is-in .comp-arrow--out { animation-delay: .65s; }
[data-reveal].is-in .reconnect__line { display: inline-block; animation: rise-in .8s var(--ease) both; }
[data-reveal].is-in .reconnect__line + br + .reconnect__line { animation-delay: .25s; }
.reconnect__line { display: inline-block; }
/* once the entrance has played, hover takes over the arrows' translate */
[data-reveal].is-settled .comp-arrow, [data-reveal].is-settled .dir-card,
[data-reveal].is-settled .directions__title, [data-reveal].is-settled .reconnect__line { animation: none; opacity: 1; }

.dir-card { transition: translate .35s var(--ease), box-shadow .35s var(--ease), rotate .35s var(--ease); }
.dir-card:hover { translate: 0 -6px; rotate: calc(var(--r) * -.25); box-shadow: 0 22px 48px rgba(22, 23, 26, .12); }
.directions__comp:has(.dir-card--forward:hover) .comp-arrow--fwd,
.directions__comp:has(.dir-card--upward:hover) .comp-arrow--up,
.directions__comp:has(.dir-card--outward:hover) .comp-arrow--out { --shift: 12px; }
.reconnect__comp:hover .comp-arrow { --shift: 12px; }
.reconnect__comp:hover .reconnect__dim { color: var(--neutral-500); }

/* 07 Path — 500vh scroll track with a sticky viewport */
.path { padding: 120px 0 140px; }
.path__heading { display: flex; flex-direction: column; gap: 14px; }
.path__track { position: relative; height: 500vh; margin-top: 40px; }
.path__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.path__viewport { display: flex; align-items: center; gap: 48px; }
.path__narration { position: relative; flex: 1 1 0; min-width: 0; min-height: 182px; }
.path__step { position: absolute; left: 0; right: 0; top: 32px; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.path__step.is-on { opacity: 1; transform: none; }
.path__step .overline { margin-bottom: 12px; }
.path__step .h2 { max-width: 16ch; }
.path__canvas-wrap { flex: none; position: relative; width: 740px; height: 580px; }
.path__canvas { position: absolute; left: 0; top: 0; width: 740px; height: 580px; transform-origin: top left; }
.pobj { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; will-change: transform, opacity; }
.pobj .overline { color: var(--text-secondary); white-space: nowrap; }
.pobj--field { background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: 36px; }
.pobj--ring svg { position: absolute; inset: 0; overflow: visible; }
.pobj--ring rect { fill: none; stroke: var(--text-secondary); stroke-width: 1.75; stroke-dasharray: 7 7; stroke-linecap: round; }
.pobj__edge { position: absolute; top: -9px; right: 46px; padding: 0 12px; background: var(--bg-sunken); font: 12px/16px var(--font-mono); letter-spacing: .16em; color: var(--text-primary); white-space: nowrap; }
.pobj--id { justify-content: flex-end; gap: 6px; padding: 18px 20px; border-radius: 20px; background: var(--bg-page); border: 1px solid var(--border-subtle); box-shadow: 0 14px 36px rgba(22, 23, 26, .08); }
.pobj--id .mono { color: var(--text-tertiary); white-space: nowrap; }
.pobj--core { justify-content: center; align-items: center; border-radius: 24px; background: var(--action-primary-bg); box-shadow: 0 18px 44px rgba(22, 23, 26, .12); }
.pobj--core .h3 { position: absolute; color: var(--action-primary-fg); white-space: nowrap; }
.pobj--ann { justify-content: center; padding: 0 12px; border-radius: 12px; background: var(--bg-page); border: 1px solid var(--border-subtle); box-shadow: 0 14px 36px rgba(22, 23, 26, .06); }
.pobj--build { flex-direction: row; justify-content: space-between; align-items: center; padding: 0 14px; border-radius: 16px; background: var(--bg-page); border: 1px solid var(--text-primary); box-shadow: 0 14px 36px rgba(22, 23, 26, .12); }
.pobj--build .overline, .pobj--build .h4 { color: var(--text-primary); }

/* 08 Ending + contact form */
.about-ending { padding-block: 120px; }
.about-ending__inner { display: flex; align-items: flex-end; gap: 64px; }
.about-ending__photo { flex: 1 1 0; width: 100%; height: 560px; }
.about-ending__signoff { flex: 0 0 540px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.contact-form { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.field__input {
  width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--border-default);
  background: var(--bg-page); color: var(--text-primary); font: 16px/26px var(--font-sans); transition: border-color .18s;
}
.field__input::placeholder { color: var(--text-tertiary); opacity: 1; }
.field__input:focus { outline: none; border-color: var(--text-tertiary); }
.field__input:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.field__input--multi { display: block; height: 132px; padding-top: 13px; resize: vertical; }
.contact-form .btn--primary { border: 0; }
.contact-form__status:empty { display: none; }

@media (max-width: 1024px) {
  .about-hero { padding-top: 152px; }
  .about-hero__inner, .about-ending__inner { flex-direction: column; align-items: stretch; gap: 48px; }
  .about-hero__photo { flex: none; width: 100%; max-width: 560px; height: auto; aspect-ratio: 560 / 620; }
  .about-ending__photo { flex: none; height: auto; aspect-ratio: 644 / 560; }
  .about-ending__signoff { flex: none; width: 100%; max-width: 540px; }
  .path__viewport { flex-direction: column; align-items: stretch; gap: 16px; }
  .path__narration { flex: none; min-height: 150px; }
  .path__canvas-wrap { align-self: center; }
}
@media (max-width: 899px) {
  .direction__head { flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; }
  .directions { padding-block: 96px; }
  .directions .comp { width: auto; height: auto; transform: none !important; display: flex; flex-direction: column; gap: 24px; }
  .directions__title { position: static; width: auto; margin-bottom: 8px; text-align: left; }
  .dir-card { position: relative; left: auto; top: auto; width: min(320px, 100%); transform: rotate(calc(var(--r) / 3)); }
  .dir-card:nth-of-type(2) { align-self: flex-end; }
  .directions .comp-arrow { display: none; }
}
@media (max-width: 767px) {
  .comp-arrow { display: none; }
  .direction { padding-block: 88px; }
  .reconnect { padding-block: 120px; }
  .reconnect__comp { height: auto; }
  .reconnect__title { position: static; width: auto; transform: none; }
  .path { padding: 96px 0 112px; }
  .path__step .h2 { font-size: 26px; line-height: 32px; }
  .path__step .h1 { font-size: 32px; line-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-card, .photo-card__desc, .path__step, .comp-arrow, .dir-card { transition: none !important; }
  [data-reveal] .comp-arrow, [data-reveal] .dir-card, [data-reveal] .directions__title, [data-reveal] .reconnect__line { animation: none !important; opacity: 1 !important; }
}

/* ---------- Blackout (V4 short case) ---------- */
.stats { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; }
.stat { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-xl); background: var(--bg-surface); }
.grid2--stretch { align-items: stretch; }
.qcard--pad { gap: 12px; }
.subsection { padding-top: 48px; }
.chip--inline { align-self: flex-start; }
.pill-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill-step { padding: 6px 12px; border-radius: var(--r-full); background: var(--accent-subtle); color: var(--accent-ink); font-size: 14px; line-height: 20px; font-weight: 600; }
.arr--down { align-self: center; }
.carousel__label { margin-top: 8px; }

/* ---------- Carousel ---------- */
.carousel { display: flex; flex-direction: column; gap: 16px; }
.carousel__viewport { overflow: hidden; background: var(--bg-raised); box-shadow: var(--shadow-image); aspect-ratio: var(--ratio, 16 / 10); touch-action: pan-y; }
.carousel__track { display: flex; gap: 16px; height: 100%; transition: transform .45s var(--ease); }
.carousel__slide { flex: 0 0 100%; height: 100%; }
.carousel__slide img { width: 100%; height: 100%; object-fit: contain; }
.carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.carousel__dots { display: flex; align-items: center; gap: 8px; }
.carousel__dot { padding: 8px 2px; display: flex; }
.carousel__dot span { display: block; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--border-strong); transition: width .3s var(--ease), background-color .3s; }
.carousel__dot[aria-current="true"] span { width: 24px; background: var(--accent-fill); }
.carousel__nav { display: flex; align-items: center; gap: 12px; }
.carousel__count { color: var(--text-tertiary); min-width: 55px; text-align: right; }
.carousel__btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-raised); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: 14px; font-weight: 600; transition: background-color .18s, opacity .18s; }
.carousel__btn:hover:not(:disabled) { background: var(--bg-sunken); }
.carousel__btn:disabled { opacity: .4; color: var(--text-tertiary); cursor: default; }
@media (prefers-reduced-motion: reduce) { .carousel__track { transition: none; } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .case-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
}
@media (max-width: 1024px) {
  .hero { min-height: 0; padding-top: 152px; }
  .hero__inner { flex-direction: column; align-items: stretch; gap: 56px; }
  .hero__text { max-width: 720px; flex-basis: auto; }
  .hero__pile { flex-basis: auto; align-items: stretch; }
  .tag-stage { width: 100%; height: 360px; }
  .pile-hint { text-align: center; }
  .small-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { --cols: 3 !important; }
  .fig--split { flex-direction: column; align-items: stretch; }
  .fig--split > .shot, .fig--split > .annot, .fig--split > .annot-note { flex-basis: auto; }
  .fig--split > .shot { width: 100%; }
}
@media (max-width: 860px) {
  .masonry { flex-direction: column; align-items: stretch; }
  .masonry__col { display: contents; }
  .masonry .project-card { order: var(--order); }
  .home-section { padding-block: 112px; }
  .home-section--other { padding-top: 0; }
  .cta-card { flex-direction: column; align-items: flex-start; }
  .case-meta { --cols: 2 !important; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .stats { --cols: 2 !important; }
  .grid2, .grid3, .ia-cols { grid-template-columns: minmax(0, 1fr); }
  .outcome-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .outcome-grid > .overline:not(:first-child) { margin-top: 16px; }
  .row-text-fig { flex-direction: column; align-items: stretch; gap: 32px; }
  .row-text-fig > .stack { flex: none; width: 100%; }
  .row-text-fig > .shot { flex-basis: auto; width: min(100%, 360px); align-self: center; }
  .portal__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lane { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lane > .overline { flex-basis: auto; }
  .lane-connector { padding-left: 0; }
  .phase-notes { flex-direction: column; gap: 12px; }
  .case-main { gap: 112px; }
}
@media (max-width: 767px) {
  .split { flex-direction: column; align-items: stretch; }
  .split > :not(img) { flex-basis: auto; width: auto; }
  .img-row { flex-direction: column; align-items: stretch; }
  .edge-grid { row-gap: 32px; }
  .edge-grid > .edge { width: 100%; }
  .lifecycle-row { flex-direction: column; align-items: stretch; }
  .lifecycle-row > .arrow-mid { align-self: center; transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .nav-bar { padding-left: 16px; }
  .nav-logo__text { display: none; }
  .nav-mark { width: 26px; height: 26px; }
  .nav-item { padding: 0 10px; }
  .hero { padding-top: 128px; padding-bottom: 56px; }
  .hero__text { gap: 24px; }
  .tag-stage { height: 300px; }
  .project-card { padding: 24px; gap: 28px; border-radius: var(--r-xl); }
  .card-arrow { top: 20px; right: 20px; }
  .project-card__title { padding-right: 40px; }
  .small-grid { grid-template-columns: minmax(0, 1fr); }
  .cta-card { padding: 32px 24px; border-radius: var(--r-xl); }
  .site-footer { padding-bottom: 40px; }
  .case { padding-top: 128px; }
  .case-meta { --cols: 1 !important; }
  .fig, .ba, .row-text-fig { padding: 20px; border-radius: var(--r-xl); }
  .challenge { flex-direction: column; gap: 12px; padding: 28px 24px; border-radius: var(--r-xl); }
  .closing { padding: 40px 24px; border-radius: var(--r-xl); }
  .steps { --cols: 1 !important; }
  .impact, .outcome, .insight { padding: 24px; }
  .body-l { font-size: 17px; line-height: 28px; }
  .config__row { grid-template-columns: 1fr; gap: 2px; }
  .config__row--head { display: none; }
  .relations { justify-content: flex-start; }
}

/* =========================================================
   Garage (Figma "Garage V3 / Quick · cards" + overlay)
   ========================================================= */
.garage-hero { padding-top: 200px; }
.garage-hero .display-l { margin-bottom: 24px; }
.garage-hero__lead { max-width: 640px; }
.home-section.garage-section { padding-top: 96px; }

.garage-card__media { position: relative; background-size: cover; background-position: center; }
.garage-card__preview { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); }
.garage-card__preview.is-loaded { opacity: 1; }
.garage-card__note { position: absolute; z-index: 1; top: 16px; left: 16px; max-width: calc(100% - 32px); }

.garage-overlay {
  width: min(1040px, calc(100vw - 48px)); height: min(720px, calc(100dvh - 96px));
  max-width: none; max-height: none; margin: auto; padding: 0; border: 0; overflow: hidden;
  border-radius: var(--r-2xl); background: var(--bg-sunken);
  box-shadow: 0 8px 32px rgba(22, 23, 26, .10), 0 32px 96px 8px rgba(22, 23, 26, .10);
}
.garage-overlay::backdrop { background: rgba(35, 36, 40, .4); }
.garage-overlay[open] { animation: garage-in .35s var(--ease); }
.garage-overlay[open]::backdrop { animation: garage-fade .35s ease; }
@keyframes garage-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes garage-fade { from { opacity: 0; } to { opacity: 1; } }
.garage-overlay__frame { display: block; width: 100%; height: 100%; border: 0; }
.garage-overlay__close {
  position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-sunken); color: var(--text-primary);
  font-size: 14px; font-weight: 600; transition: background-color .18s;
}
.garage-overlay__close:hover { background: var(--bg-page); }
html.is-overlay-open { overflow: hidden; }

@media (max-width: 1024px) { .garage-hero { padding-top: 152px; } }
@media (max-width: 860px) { .home-section.garage-section { padding-top: 64px; } }
@media (max-width: 640px) {
  .garage-hero { padding-top: 128px; }
  .garage-overlay { width: 100vw; height: 100dvh; border-radius: 0; }
  .garage-overlay__close { top: calc(16px + env(safe-area-inset-top)); right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .garage-overlay[open], .garage-overlay[open]::backdrop { animation: none; }
  .garage-card__preview { transition: none; }
}

/* Garage · project sheet (Figma "Garage V3 / Overlay · Bouldero") */
.garage-overlay.is-sheet { height: auto; max-height: min(1200px, calc(100dvh - 96px)); background: var(--bg-page); }
.garage-overlay__scroll { max-height: inherit; overflow-y: auto; overscroll-behavior: contain; }
.garage-overlay.is-sheet .garage-overlay__close { top: 48px; right: 48px; z-index: 2; }
.gsheet { display: flex; flex-direction: column; gap: 40px; padding: 48px; }
.gsheet__head { display: flex; flex-direction: column; gap: 16px; max-width: 640px; padding-right: 56px; }
.gsheet__head .h2 { margin-top: -2px; }
.gsheet__links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.gsheet__gallery {
  display: flex; gap: 16px; padding: 48px 0 48px 48px; margin: 0; list-style: none;
  border-radius: var(--r-lg); background: #e7e9df;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 48px; scrollbar-width: thin;
}
.gsheet__gallery::after { content: ""; flex: 0 0 32px; }
.gsheet__gallery li { flex: 0 0 auto; scroll-snap-align: start; }
.gsheet__gallery img {
  display: block; width: auto; height: 464px; aspect-ratio: 1170 / 2532; border-radius: 19px; background: var(--bg-page);
  box-shadow: 0 0 0 1px var(--border-subtle), 0 2px 6px rgba(22, 23, 26, .06), 0 14px 32px rgba(22, 23, 26, .10);
}
.gsheet__gallery:focus-visible { outline-offset: 4px; border-radius: var(--r-lg); }
.gsheet__info { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 48px; align-items: start; }
.gsheet__body { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.gsheet__meta { margin: 0; }
.gsheet__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.gsheet__row dd { margin: 0; text-align: right; }

@media (max-width: 860px) { .gsheet__info { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 640px) {
  .garage-overlay.is-sheet { max-height: none; height: 100dvh; }
  .garage-overlay.is-sheet .garage-overlay__scroll { height: 100%; max-height: none; }
  .garage-overlay.is-sheet .garage-overlay__close { top: calc(16px + env(safe-area-inset-top)); right: 16px; }
  .gsheet { padding: 24px 20px 40px; padding-top: calc(24px + env(safe-area-inset-top)); gap: 32px; }
  .gsheet__head { padding-right: 48px; }
  .gsheet__gallery { padding: 24px 0 24px 24px; scroll-padding-inline: 24px; gap: 12px; }
  .gsheet__gallery::after { flex-basis: 12px; }
  .gsheet__gallery img { height: min(464px, 58dvh); border-radius: 16px; }
}