/* ===========================================================================
   Account Motion — site styles
   ========================================================================= */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-body-l);
  line-height: 1.55;
  font-variation-settings: "wght" var(--wght-body), "ital" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `clip`, not `hidden`: overflow-x: hidden turns the body into a scroll
     container and silently kills every position: sticky on the page. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

::selection { background: var(--color-butter); color: var(--color-ink); }

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

.container {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.container--wide {
  width: min(1440px, calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.section { padding-block: var(--space-12); }
.section--tight { padding-block: var(--space-11); }
.section--flush-top { padding-top: 0; }

.measure { max-width: 640px; }
.measure-wide { max-width: 760px; }

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "wght" var(--wght-display), "ital" 0;
  letter-spacing: -0.04em;
}

p { margin: 0; }
p + p { margin-top: var(--space-5); }

.display-xl { font-size: var(--text-display-xl); line-height: 1.05; }
.display-l  { font-size: var(--text-display-l);  line-height: 1.03; }
.page-title { font-size: var(--text-page-title); line-height: 1.1; }
.section-title { font-size: var(--text-section-l); line-height: 1.125; }
.section-title-m { font-size: var(--text-section-m); line-height: 1.175; letter-spacing: -0.035em; font-variation-settings: "wght" var(--wght-heading-tight), "ital" 0; }
.card-title-l { font-size: var(--text-card-l); line-height: 1.25; letter-spacing: -0.035em; font-variation-settings: "wght" var(--wght-heading-tight), "ital" 0; }
.card-title { font-size: var(--text-card); line-height: 1.3; letter-spacing: -0.03em; }
.subheading { font-size: var(--text-subheading); line-height: 1.3; letter-spacing: -0.03em; font-variation-settings: "wght" var(--wght-heading-tight), "ital" 0; }

.body-l { font-size: var(--text-body-l); line-height: 1.55; }
.body-s { font-size: var(--text-body-s); line-height: 1.5; }
.muted  { color: var(--color-muted-ink); }

.eyebrow {
  display: block;
  margin: 0 0 var(--space-5);
  font-size: var(--text-label);
  font-variation-settings: "wght" var(--wght-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted-ink);
}

.hand {
  font-family: var(--font-hand);
  font-variation-settings: normal;
  font-weight: 400;
  letter-spacing: 0;
}

/* --- Masked text swap link ------------------------------------------------ */

.text-swap {
  position: relative;
  display: inline-grid;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  font-variation-settings: "wght" var(--wght-label);
}

.text-swap > span {
  grid-area: 1 / 1;
  transition: transform var(--duration-fast) var(--ease-meeko);
}

.text-swap > span:nth-child(2) { transform: translateY(110%); }
.text-swap:hover > span:nth-child(1),
.text-swap:focus-visible > span:nth-child(1) { transform: translateY(-110%); }
.text-swap:hover > span:nth-child(2),
.text-swap:focus-visible > span:nth-child(2) { transform: translateY(0); }

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 16px 25px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--color-ink);
  color: var(--color-white);
  font-family: inherit;
  font-size: var(--text-label);
  font-variation-settings: "wght" var(--wght-label);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-meeko),
              color var(--duration-fast) var(--ease-meeko),
              border-color var(--duration-fast) var(--ease-meeko);
}

.button:hover { background: var(--color-black); }

.button--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-hairline);
}
.button--ghost:hover { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); }

.button--light { background: var(--color-white); color: var(--color-ink); }
.button--light:hover { background: var(--color-butter); }

.button--outline {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.35);
}
.button--outline:hover { background: var(--color-white); color: var(--color-ink); border-color: var(--color-white); }

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --- Arrow link ----------------------------------------------------------- */

.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  font-size: var(--text-label);
  font-variation-settings: "wght" var(--wght-label);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--color-hairline);
  padding-bottom: 4px;
  transition: border-color var(--duration-fast) var(--ease-meeko);
}
.arrow-link:hover { border-color: currentColor; }
.arrow-link .arrow { transition: transform var(--duration-fast) var(--ease-meeko); }
.arrow-link:hover .arrow { transform: translateX(4px); }

/* --- Focus ---------------------------------------------------------------- */

a:focus-visible, button:focus-visible, .stack-card:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--color-ink);
  color: var(--color-white);
  text-decoration: none;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* --- Header: a floating capsule that sits over the page ------------------ */

.site-header {
  position: fixed;
  top: var(--space-4);
  left: 0;
  right: 0;
  z-index: 100;
}

.header-bar {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-h);
  padding-inline: var(--space-6) var(--space-4);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-capsule);
  background: var(--color-white);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  font-size: var(--text-card);
  font-variation-settings: "wght" var(--wght-label);
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: var(--space-7); }
.site-nav a { font-size: var(--text-body); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--color-ink);
  margin-inline: auto;
  transition: transform var(--duration-fast) var(--ease-meeko),
              opacity var(--duration-fast) var(--ease-meeko);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { content: ""; position: absolute; top: -6px; }
.nav-toggle span::after  { content: ""; position: absolute; top: 6px; }

body[data-nav-open="true"] .nav-toggle span { background: transparent; }
body[data-nav-open="true"] .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
body[data-nav-open="true"] .nav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Hero: full-bleed colour field, centred statement --------------------- */

.hero-field {
  position: relative;
  overflow: hidden;
  background: var(--color-lavender);
  padding-top: calc(var(--header-h) + var(--space-12));
  padding-bottom: var(--space-12);
  text-align: center;
}

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

.hero-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-field > .container { position: relative; z-index: 1; }

.deco { position: absolute; }

.deco--pill {
  display: inline-block;
  padding: 11px 22px 12px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-capsule);
  background: var(--deco-surface, var(--color-white));
  font-size: var(--text-body-s);
  font-variation-settings: "wght" var(--wght-label);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.deco--pill-tl { left: 1%;  top: 34%; transform: rotate(-8deg); }
.deco--pill-bl { left: 2.5%; top: 62%; transform: rotate(5deg); }
.deco--pill-tr { right: 1%;  top: 33%; transform: rotate(7deg); }
.deco--pill-br { right: 2.5%; top: 61%; transform: rotate(-6deg); }

.deco--sparkle { left: 7%;  top: 26%; width: 38px; }
.deco--motion  { right: 7%; top: 26%; width: 44px; transform: scaleX(-1) rotate(4deg); }
.deco--target  { left: 6%;  top: 75%; width: 66px; transform: rotate(-6deg); }
.deco--chart   { right: 6%; top: 74%; width: 72px; transform: rotate(6deg); }

/* The collage only has room to sit beside the copy at full desktop width.
   Below that the reference pulls decoration away from text rather than
   letting it overlap, so it comes out entirely. */
@media (max-width: 1279px) {
  .hero-deco { display: none; }
}

.hero-field .eyebrow { color: rgba(16, 16, 16, 0.5); margin-bottom: var(--space-6); }

.hero-title {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  text-wrap: balance;
}

/* Portrait set inline in the headline, sized off the type so it scales with
   the display size at every breakpoint. */
.hero-avatar {
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  margin-inline: 0.16em 0.1em;
  vertical-align: -0.16em;
  border-radius: var(--radius-round);
  overflow: hidden;
  background: var(--color-blush);
}

.hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Landscape source: bias the crop upward to keep the face centred. */
  object-position: center 24%;
}

.hero-avatar[hidden] { display: none; }

.hero-body {
  /* The reference sets the hero intro well above normal body size - it reads
     as part of the statement, not as supporting copy. */
  font-size: var(--text-hero-body);
  line-height: 1.45;
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: var(--space-9);
}

.hero-field .button-row { justify-content: center; }

.hero-rule {
  margin-top: var(--space-11);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.stage-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 11px 22px 12px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-capsule);
  background: var(--color-white);
  font-size: var(--text-label);
  font-variation-settings: "wght" var(--wght-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-meeko),
              background var(--duration-fast) var(--ease-meeko);
}
a.stage-chip:hover { transform: translateY(-2px); }

.stage-chip--evaluate:hover { background: var(--stage-evaluate); }
.stage-chip--engage:hover   { background: var(--stage-engage); }
.stage-chip--expand:hover   { background: var(--stage-expand); }

/* --- Section intro -------------------------------------------------------- */

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: end;
  margin-bottom: var(--space-11);
}

/* No `ch` cap here: this is a wrapper div, so `ch` would resolve against the
   inherited body size (18px) rather than the heading inside it, squeezing the
   column to ~160px. The grid column governs the measure instead. */

/* ===========================================================================
   Scroll-driven card stack
   Panels are sticky siblings inside a positioned stack. Each one parks at a
   slightly lower offset than the last, so later panels come to rest on top of
   earlier ones. --stack-scale is written by assets/js/site.js from scroll
   position: every covered panel shrinks ~0.05 relative to the panel above it,
   which is what produces the layered deck.
   ========================================================================= */

.stack {
  position: relative;
  /* Block flow, deliberately not grid: a sticky grid item is constrained to
     its own grid area, so it would unstick the moment its own row scrolled
     past instead of holding on the pile. */
  display: block;
}

.stack-panel + .stack-panel { margin-top: var(--space-6); }

@media (min-width: 1200px) {
  /* Trailing room for the deck. A sticky element is bounded by its containing
     block's CONTENT box, so padding buys no travel — the last panel, whose own
     bottom is the content bottom, would never come to rest at all. Generated
     content extends the content box, which is what the pile actually needs:
     this height is exactly how long the finished deck holds before it leaves. */
  .stack::after {
    content: "";
    display: block;
    height: 42vh;
  }
}

.stack-panel {
  position: sticky;
  top: var(--stack-top, 130px);
  transform: scale(var(--stack-scale, 1));
  transform-origin: center top;
  will-change: transform;
}

/* --- Work stack (full-width case study panels) ---------------------------- */

.work-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-10);
  padding: var(--space-10);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-card-large);
  /* Pastel fill with an outline: the colour carries the stage, the outline
     keeps one sheet readable against the next once the panels overlap. */
  background: var(--card-surface, var(--color-mist));
  text-decoration: none;
  color: inherit;
}

.work-card__body { display: flex; flex-direction: column; }
.work-card__title { margin-block: var(--space-4) var(--space-5); }
.work-card__desc { max-width: 46ch; }
.work-card__cta { margin-top: auto; padding-top: var(--space-8); }

.work-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  align-content: center;
  padding-left: var(--space-8);
  border-left: 1px solid rgba(16, 16, 16, 0.18);
}

.metrics-label {
  grid-column: 1 / -1;
  margin: 0 0 calc(var(--space-2) * -1);
  font-size: var(--text-micro);
  font-variation-settings: "wght" var(--wght-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted-ink);
}

.metric__value {
  display: block;
  font-size: var(--text-section-m);
  line-height: 1.05;
  font-variation-settings: "wght" var(--wght-display);
  letter-spacing: -0.04em;
}

.metric__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-body-s);
  color: var(--color-muted-ink);
  line-height: 1.35;
}

.tag {
  display: inline-block;
  align-self: flex-start; /* stop the pill stretching inside flex columns */
  padding: 7px 14px 8px;
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, 0.72);
  font-size: var(--text-micro);
  font-variation-settings: "wght" var(--wght-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- Approach: sticky column + stacking cards ----------------------------- */

.approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

.approach-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-11));
}

.approach-aside .section-title { margin-bottom: var(--space-6); }

.approach-card {
  padding: var(--space-9);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-card-large);
  background: var(--card-surface, var(--color-mist));
}

.approach-card__index {
  display: block;
  margin-bottom: var(--space-6);
  font-size: var(--text-label);
  font-variation-settings: "wght" var(--wght-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.approach-card__title { margin-bottom: var(--space-5); }
.approach-card__link { margin-top: var(--space-7); display: inline-block; }

/* --- About portrait ------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

.portrait {
  margin: 0;
  overflow: hidden;
  /* The audited portrait treatment: a large soft radius rather than a circle
     or a hard rectangle. */
  border-radius: var(--radius-card-large) var(--radius-card-large)
                 var(--radius-card-large) 100px;
  background: var(--color-blush);
  aspect-ratio: 4 / 5;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source is landscape; bias the crop upward so the face stays in frame. */
  object-position: center 22%;
  transition: transform 700ms var(--ease-meeko);
}

.portrait:hover img { transform: scale(1.03); }

/* Until the photo is added, hide the frame rather than showing a broken image
   or an empty coloured block. */
.portrait[hidden] { display: none; }
.about-grid:has(.portrait[hidden]) { grid-template-columns: minmax(0, 1fr); }

.about-body { margin-top: var(--space-6); }

/* --- Feature panel (AI) --------------------------------------------------- */

.panel {
  padding: var(--space-12) var(--space-11);
  border-radius: var(--radius-card-large);
  background: var(--panel-surface, var(--color-lavender));
}

.panel--dark { background: var(--color-ink); color: var(--color-white); }
.panel--dark .muted { color: rgba(255, 255, 255, 0.62); }
.panel--dark .eyebrow { color: rgba(255, 255, 255, 0.62); }

.panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

/* --- Measurement loop ----------------------------------------------------- */

.loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-8);
}

.loop__step {
  padding: 12px 22px 13px;
  border-radius: var(--radius-capsule);
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  font-size: var(--text-label);
  font-variation-settings: "wght" var(--wght-label);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.loop__arrow { color: var(--color-muted-ink); flex: none; }

/* --- Capabilities list ---------------------------------------------------- */

.cap-list { border-top: 1px solid var(--color-hairline); }

.cap-item {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-10);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-hairline);
}

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

.closing {
  margin-top: var(--space-12);
  padding: var(--space-12) var(--gutter);
  background: var(--color-ink);
  color: var(--color-white);
}

.closing .container { display: block; }

.closing .eyebrow { color: rgba(255, 255, 255, 0.62); }
.closing__title { max-width: 18ch; margin-bottom: var(--space-7); }
.closing__body { max-width: 640px; color: rgba(255, 255, 255, 0.72); }
.closing__body + .closing__body { margin-top: var(--space-5); }
.closing .button-row { margin-top: var(--space-9); }

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--text-body-s);
  color: rgba(255, 255, 255, 0.62);
}

.site-footer a { color: rgba(255, 255, 255, 0.86); text-decoration: none; }
.site-footer a:hover { color: var(--color-white); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: flex-end; }
.footer-name {
  font-size: var(--text-subheading);
  font-variation-settings: "wght" var(--wght-display);
  letter-spacing: -0.03em;
  color: var(--color-white);
}
.site-footer__id p + p { margin-top: var(--space-2); }
.footer-sub .hand { font-size: 1.35em; color: var(--color-butter); }
.footer-copy { margin-top: var(--space-6); text-align: right; }

/* --- Case study page ------------------------------------------------------ */

.case-hero { padding-block: var(--space-11) var(--space-10); }
.case-hero--top { padding-top: calc(var(--header-h) + var(--space-11)); }

.case-kicker {
  margin-bottom: var(--space-5);
  font-size: var(--text-label);
  font-variation-settings: "wght" var(--wght-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted-ink);
}
.case-hero__title { max-width: 18ch; margin-block: var(--space-5) var(--space-7); }
.case-hero__intro { max-width: 700px; }

.results-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-8) var(--space-6);
  padding: var(--space-9) var(--space-10);
  border-radius: var(--radius-card-large);
  background: var(--card-surface, var(--color-mist));
}

.case-block { padding-block: var(--space-10); border-top: 1px solid var(--color-hairline); }

.case-block__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: var(--space-10);
  align-items: start;
}

.case-block__label {
  font-size: var(--text-label);
  font-variation-settings: "wght" var(--wght-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted-ink);
}

.case-block__body { max-width: 66ch; }
.case-block__body strong { font-variation-settings: "wght" var(--wght-label); }

.pull {
  margin-top: var(--space-8);
  padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-card);
  background: var(--card-surface, var(--color-mist));
  font-size: var(--text-subheading);
  font-variation-settings: "wght" var(--wght-label);
  letter-spacing: -0.02em;
}

.case-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-hairline);
}

/* --- Reveal on scroll ----------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-meeko),
              transform var(--duration-slow) var(--ease-meeko);
}
.reveal.is-visible { opacity: 1; transform: none; }

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

@media (max-width: 1199px) {
  .section { padding-block: var(--space-10); }
  .section--tight { padding-block: var(--space-9); }

  .work-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding: var(--space-8); }
  .work-card__metrics { padding-left: 0; border-left: 0; padding-top: var(--space-6); border-top: 1px solid rgba(16, 16, 16, 0.18); }
  .work-card__cta { padding-top: var(--space-6); }

  .approach-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
  .approach-aside { position: static; }
  .approach-card { padding: var(--space-8); }

  .panel { padding: var(--space-10) var(--space-8); }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .portrait { aspect-ratio: 3 / 2; max-width: 460px; }
  .panel-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }

  .section-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-bottom: var(--space-9); }

  .cap-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .case-block__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .results-band { padding: var(--space-8); }
  .closing { padding: var(--space-10) var(--gutter); }

  /* The stack returns to normal document flow below desktop, exactly as the
     source template does. Overlapping panels stop being legible here. */
  .stack-panel {
    position: relative;
    top: auto;
    transform: none;
  }
  .stack-panel + .stack-panel { margin-top: var(--space-4); }
}

@media (max-width: 959px) {
  .header-bar { padding-inline: var(--space-5) var(--space-3); }
  .site-nav {
    position: fixed;
    inset: calc(var(--header-h) + var(--space-7)) var(--gutter) auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-7);
    background: var(--color-white);
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-card);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-meeko),
                transform var(--duration-fast) var(--ease-meeko);
  }
  body[data-nav-open="true"] .site-nav { opacity: 1; transform: none; pointer-events: auto; }
  .site-nav a { font-size: var(--text-card); font-variation-settings: "wght" var(--wght-label); letter-spacing: -0.03em; }

  .nav-toggle { display: block; }
  .header-actions .button { display: none; }
  .site-nav .button { display: inline-flex; margin-top: var(--space-3); }
}

@media (min-width: 960px) {
  .site-nav .button { display: none; }
}

@media (max-width: 809px) {
  .work-card__metrics { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .site-footer { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .footer-nav { justify-content: flex-start; }
  .footer-copy { text-align: left; }
  .loop { gap: var(--space-2); }
  .loop__step { padding: 10px 16px 11px; font-size: var(--text-micro); }
  .closing__sign { font-size: var(--text-card-l); }
}

/* --- Reduced motion ------------------------------------------------------- */

@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;
  }
  .stack-panel { position: relative; top: auto; transform: none; }
  .stack-panel + .stack-panel { margin-top: var(--space-4); }
  .reveal { opacity: 1; transform: none; }
}