/* ════════════════════════════════════════════════════════════════════
   Boostway — main stylesheet
   ────────────────────────────────────────────────────────────────────
   Structure
     1. PRIMITIVES              raw values (colors, sizes, durations)
     2. SEMANTICS               meaning-named tokens, reference primitives
     3. BASE                    reset, html / body, links, typography base
     4. LAYOUT                  container, sections
     5. COMPONENTS              nav, buttons, cards, chips, sq-layer…
     6. TYPE STYLES & PATTERNS  reusable .t-*, .bullet-list, .surface-*
     7. PAGES                   hero, services, stats, work, footer,
                                page-hero, problems, phases, pricing,
                                contact, about, service archive
     8. RESPONSIVE              breakpoint overrides

   Reuse rules
   ───────────
   · No rule below the SEMANTICS layer may use a raw value for color,
     font-size, spacing, radius, border-width, shadow, duration,
     easing, z-index, or layout width — everything routes through a
     token.
   · No font-size/weight/line-height/tracking is restated on a page
     selector if a type-style class already defines it. Page selectors
     are grouped INTO the type-style rule so both the .t-* class and
     the legacy semantic selector hit the same recipe.
   · Page rules only hold layout-only properties: margin, max-width,
     padding, color overrides, and one-off positioning.
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   1. PRIMITIVES
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Color · neutrals ───────────────────────────────────────────── */
  --c-white:        #ffffff;
  --c-neutral-50:   #fafafa;
  --c-neutral-100:  #f5f5f5;
  --c-neutral-200:  #ececec;
  --c-neutral-400:  #a3a3a3;
  --c-neutral-600:  #525252;
  --c-neutral-900:  #0a0a0a;

  /* ── Color · brand orange ramp ──────────────────────────────────── */
  --c-orange-50:    #fef3ec;
  --c-orange-100:   #ffedd5;
  --c-orange-200:   #fed7aa;
  --c-orange-300:   #fdba74;
  --c-orange-400:   #fb923c;
  --c-orange-500:   #f97316;
  --c-orange-600:   #d4480c;
  --c-orange-700:   #d97706;

  /* ── Color · amber ramp (for stat / thumb gradients) ────────────── */
  --c-amber-100:    #fef3c7;
  --c-amber-200:    #fde68a;
  --c-amber-300:    #fcd34d;
  --c-amber-400:    #fbbf24;

  /* ── Color · rose ramp (single work card variant) ───────────────── */
  --c-rose-100:     #ffe4e6;
  --c-rose-300:     #fda4af;
  --c-rose-700:     #be123c;

  /* ── Color · ink alphas (warm-shadow tints) ─────────────────────── */
  --c-ink-a15:      rgba(10, 10, 10, 0.15);
  --c-ink-a18:      rgba(10, 10, 10, 0.18);
  --c-ink-a22:      rgba(10, 10, 10, 0.22);
  --c-ink-a25:      rgba(10, 10, 10, 0.25);
  --c-ink-a92:      rgba(10, 10, 10, 0.92);

  /* ── Color · black alphas (hero card drop) ──────────────────────── */
  --c-black-a18:    rgba(0, 0, 0, 0.18);

  /* ── Color · white alphas (inverse surfaces) ────────────────────── */
  --c-white-a00:    rgba(255, 255, 255, 0);
  --c-white-a06:    rgba(255, 255, 255, 0.06);
  --c-white-a07:    rgba(255, 255, 255, 0.07);
  --c-white-a12:    rgba(255, 255, 255, 0.12);
  --c-white-a50:    rgba(255, 255, 255, 0.5);
  --c-white-a55:    rgba(255, 255, 255, 0.55);
  --c-white-a60:    rgba(255, 255, 255, 0.6);
  --c-white-a70:    rgba(255, 255, 255, 0.7);
  --c-white-a78:    rgba(255, 255, 255, 0.78);
  --c-white-a85:    rgba(255, 255, 255, 0.85);
  --c-white-a92:    rgba(255, 255, 255, 0.92);
  --c-white-a96:    rgba(255, 255, 255, 0.96);
  --c-white-a100:   rgba(255, 255, 255, 1);

  /* ── Typography · families ──────────────────────────────────────── */
  --ff-sans:        'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-serif:       'Instrument Serif', Georgia, serif;

  /* ── Typography · font sizes (static scale) ─────────────────────── */
  --fs-1:    11px;
  --fs-2:    12px;
  --fs-3:    13px;
  --fs-4:    14px;
  --fs-5:    15px;
  --fs-6:    16px;
  --fs-7:    17px;
  --fs-8:    18px;
  --fs-9:    19px;
  --fs-10:   20px;
  --fs-11:   22px;
  --fs-12:   24px;
  --fs-13:   26px;
  --fs-14:   28px;
  --fs-15:   32px;
  --fs-16:   40px;
  --fs-17:   48px;
  --fs-18:   56px;

  /* ── Typography · font sizes (fluid display) ────────────────────── */
  --fs-display-1:   clamp(56px, 8.6vw, 124px);  /* hero headline */
  --fs-display-2:   clamp(48px, 7.5vw, 108px);  /* page hero headline */
  --fs-display-3:   clamp(48px, 6.4vw, 92px);   /* final cta */
  --fs-display-4:   clamp(44px, 6vw, 88px);     /* pull quote */
  --fs-display-5:   clamp(40px, 5vw, 72px);     /* section title */
  --fs-display-6:   clamp(40px, 5vw, 68px);     /* service row title */
  --fs-display-7:   clamp(36px, 4.4vw, 56px);   /* tech row h2 */
  --fs-display-8:   clamp(36px, 4vw, 56px);     /* stats h2 / faq h2 */
  --fs-display-9:   clamp(48px, 5.6vw, 76px);   /* about stat number */
  --fs-display-10:  clamp(56px, 6.5vw, 92px);   /* dark stats number */
  --fs-display-11:  clamp(28px, 3vw, 40px);     /* about story heading */
  --fs-display-12:  clamp(20px, 2.2vw, 26px);   /* problem list item */
  --fs-display-13:  clamp(120px, 18vw, 240px);  /* service visual mark */

  /* ── Typography · weights ───────────────────────────────────────── */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* ── Typography · line heights ──────────────────────────────────── */
  --lh-1:        0.9;
  --lh-tight:    1;
  --lh-headline: 0.96;
  --lh-display:  1.02;
  --lh-quote:    1.04;
  --lh-snug:     1.05;
  --lh-card:     1.15;
  --lh-heading:  1.3;
  --lh-body:     1.45;
  --lh-prose:    1.5;
  --lh-loose:    1.55;

  /* ── Typography · letter spacing ────────────────────────────────── */
  --tr-tight-1:  -0.01em;
  --tr-tight-2:  -0.015em;
  --tr-tight-3:  -0.02em;
  --tr-tight-4:  -0.025em;
  --tr-tight-5:  -0.03em;
  --tr-tight-6:  -0.035em;
  --tr-tight-7:  -0.04em;
  --tr-tight-8:  -0.05em;
  --tr-wide-1:   0.08em;
  --tr-wide-2:   0.1em;
  --tr-wide-3:   0.12em;
  --tr-wide-4:   0.14em;

  /* ── Spacing scale (4px base) ───────────────────────────────────── */
  --space-0:    0;
  --space-1:    4px;
  --space-2:    6px;
  --space-3:    8px;
  --space-4:    10px;
  --space-5:    12px;
  --space-6:    14px;
  --space-7:    16px;
  --space-8:    18px;
  --space-9:    20px;
  --space-10:   22px;
  --space-11:   24px;
  --space-12:   26px;
  --space-13:   28px;
  --space-14:   30px;
  --space-15:   32px;
  --space-16:   36px;
  --space-17:   40px;
  --space-18:   44px;
  --space-19:   48px;
  --space-20:   56px;
  --space-21:   60px;
  --space-22:   72px;
  --space-23:   80px;
  --space-24:   90px;
  --space-25:   100px;
  --space-26:   110px;
  --space-27:   120px;
  --space-28:   130px;
  --space-29:   140px;
  --space-30:   160px;
  --space-31:   180px;
  --space-32:   200px;

  /* ── Radius ─────────────────────────────────────────────────────── */
  --radius-xs:      2px;
  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-lg:      8px;
  --radius-pill:    999px;
  --radius-circle:  50%;

  /* ── Border widths ──────────────────────────────────────────────── */
  --bw-hair:    1px;
  --bw-thin:    1.5px;
  --bw-thick:   2px;

  /* ── Shadow primitives ──────────────────────────────────────────── */
  --shadow-card-1:        0 14px 30px -16px var(--c-ink-a15);
  --shadow-card-2:        0 18px 40px -22px var(--c-ink-a18);
  --shadow-card-3:        0 18px 40px -18px var(--c-ink-a18);
  --shadow-card-4:        0 24px 50px -22px var(--c-ink-a22);
  --shadow-card-5:        0 24px 50px -22px var(--c-ink-a25);
  --shadow-float-md:      0 16px 30px -10px var(--c-black-a18);
  --shadow-float-lg:      0 16px 40px -10px var(--c-black-a18);
  --shadow-stamp-sm:      4px 6px 0 0 var(--c-neutral-900);
  --shadow-stamp-md:      6px 8px 0 0 var(--c-neutral-900);
  --shadow-stamp-md-lift: 6px 8px 0 0 var(--c-neutral-900), 0 16px 40px -10px var(--c-black-a18);
  --shadow-stamp-sm-lift: 4px 6px 0 0 var(--c-neutral-900), 0 16px 30px -10px var(--c-black-a18);

  /* ── Motion ─────────────────────────────────────────────────────── */
  --dur-1:    0.15s;
  --dur-2:    0.2s;
  --dur-3:    0.25s;
  --dur-4:    0.3s;
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z layers ───────────────────────────────────────────────────── */
  --z-grid:     1;
  --z-mask:     2;
  --z-content:  3;
  --z-card:     3;
  --z-stamp:    3;
  --z-nav:      50;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --layout-max:        1360px;
  --layout-gutter:     40px;
  --layout-gutter-sm:  24px;
}


/* ════════════════════════════════════════════════════════════════════
   2. SEMANTICS
   Meaning-named tokens. Components consume only these.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Surface ────────────────────────────────────────────────────── */
  --bg:               var(--c-white);
  --surface:          var(--c-white);
  --surface-soft:     var(--c-neutral-50);
  --surface-faint:    var(--c-neutral-100);
  --surface-inverse:  var(--c-neutral-900);

  /* ── Text ───────────────────────────────────────────────────────── */
  --text:               var(--c-neutral-900);
  --text-muted:         var(--c-neutral-600);
  --text-faint:         var(--c-neutral-400);
  --text-inverse:       var(--c-white);
  --text-inverse-mute:  var(--c-white-a70);
  --text-inverse-faint: var(--c-white-a55);
  --text-inverse-dim:   var(--c-white-a60);

  /* ── Border ─────────────────────────────────────────────────────── */
  --border:           var(--c-neutral-200);
  --border-soft:      var(--c-neutral-100);
  --border-strong:    var(--c-neutral-900);
  --border-inverse:   var(--c-white-a12);
  --grid-inverse:     var(--c-white-a06);

  /* ── Accent ─────────────────────────────────────────────────────── */
  --accent:           var(--c-orange-600);
  --accent-soft:      var(--c-orange-50);
  --accent-bright:    var(--c-orange-400);
  --accent-light:     var(--c-orange-200);

  /* ── Ink (alias kept for JS-touched markup) ─────────────────────── */
  --ink:              var(--c-neutral-900);

  /* ── Typography aliases ─────────────────────────────────────────── */
  --font-sans:        var(--ff-sans);
  --font-serif:       var(--ff-serif);

  /* ── Body / link defaults ───────────────────────────────────────── */
  --body-fs:          var(--fs-7);
  --body-lh:          var(--lh-body);

  /* ── Section padding ────────────────────────────────────────────── */
  --section-py:       var(--space-29);  /* 140px */
  --section-py-tight: var(--space-25);  /* 100px */
  --section-py-sm:    var(--space-23);  /* 80px */

  /* ── Card defaults ──────────────────────────────────────────────── */
  --card-bg:          var(--surface);
  --card-radius:      var(--radius-md);
  --card-border:      var(--bw-hair) solid var(--border);
  --card-padding:     var(--space-14);   /* 30px → cards */
  --card-padding-sm:  var(--space-13);   /* 28px */
  --card-shadow:      var(--shadow-card-3);
  --card-shadow-lg:   var(--shadow-card-5);

  /* ── Button defaults ────────────────────────────────────────────── */
  --btn-radius:       var(--radius-sm);
  --btn-py:           11px;
  --btn-px:           var(--space-9);
  --btn-fs:           var(--fs-5);
  --btn-fw:           var(--fw-semibold);

  /* ── Gradients · brand mark ─────────────────────────────────────── */
  --gr-mark-front:    linear-gradient(135deg, var(--c-orange-500), var(--c-orange-600));
  --gr-mark-back:     linear-gradient(135deg, var(--c-amber-200), var(--c-orange-400));

  /* ── Gradients · work thumbs / team photos ──────────────────────── */
  --gr-thumb-orange:  linear-gradient(135deg, var(--c-orange-200) 0%, var(--c-orange-400) 50%, var(--c-orange-600) 100%);
  --gr-thumb-amber:   linear-gradient(135deg, var(--c-amber-200) 0%, var(--c-amber-400) 55%, var(--c-orange-700) 100%);
  --gr-thumb-rose:    linear-gradient(135deg, var(--c-rose-100) 0%, var(--c-rose-300) 55%, var(--c-rose-700) 100%);

  /* ── Gradients · big stat number (clipped text) ─────────────────── */
  --gr-stat:          linear-gradient(135deg, var(--c-white) 0%, var(--c-orange-400) 60%, var(--c-orange-600) 100%);

  /* ── Gradients · masks (fade-out at section edges) ──────────────── */
  --mask-hero:        linear-gradient(180deg, var(--c-white-a00) 50%, var(--c-white-a100) 100%),
                      radial-gradient(120% 80% at 30% 40%,
                        var(--c-white-a00) 0%, var(--c-white-a00) 30%,
                        var(--c-white-a50) 70%, var(--c-white-a92) 100%);
  --mask-page-hero:   linear-gradient(180deg, var(--c-white-a00) 40%, var(--c-white-a100) 100%);
  --mask-final-cta:   radial-gradient(120% 70% at 50% 50%,
                        var(--c-white-a00) 0%, var(--c-white-a00) 35%,
                        var(--c-white-a60) 75%, var(--c-white-a96) 100%);

  /* ── Decorative thumb scanline overlay ──────────────────────────── */
  --pattern-scanline:      repeating-linear-gradient(135deg,
                             var(--c-white-a06) 0 2px, transparent 2px 14px);
  --pattern-scanline-soft: repeating-linear-gradient(135deg,
                             var(--c-white-a07) 0 2px, transparent 2px 14px);
}


/* ════════════════════════════════════════════════════════════════════
   3. BASE
   ════════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--body-fs);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

em, .italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight-1);
}


/* ════════════════════════════════════════════════════════════════════
   4. LAYOUT
   ════════════════════════════════════════════════════════════════════ */
.wrap {
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}

.section          { padding: var(--section-py) 0; }
.section--tight   { padding: var(--section-py-tight) 0; }


/* ════════════════════════════════════════════════════════════════════
   5. COMPONENTS
   ════════════════════════════════════════════════════════════════════ */

/* ── Nav ────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--c-white-a85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: var(--bw-hair) solid var(--border);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-8) 0;
}
.nav-links { display: flex; gap: var(--space-15); }
.nav-links a {
  font-size: var(--fs-5);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  transition: color var(--dur-2);
}
.nav-links a:hover { color: var(--text); }

/* Animated nav strip (squares motif, flattened to dashes) */
.nav-strip {
  position: absolute;
  left: var(--space-11); right: var(--space-11);
  bottom: -1px;
  height: 4px;
  display: grid;
  grid-template-columns: repeat(var(--nd-cols, 60), 1fr);
  gap: 3px;
  pointer-events: none;
  z-index: var(--z-mask);
}
.nav-strip .nd {
  height: 4px;
  position: relative;
  border-radius: 1px;
}
.nav-strip .nd::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--g, transparent);
  opacity: 0;
  border-radius: 1px;
  will-change: opacity, transform;
}
.nav-strip .nd.is-active::before {
  animation: ndPulse var(--dur, 6s) ease-in-out var(--del, 0s) infinite;
}
@keyframes ndPulse {
  0%   { opacity: 0;    transform: scaleX(0.4); }
  35%  { opacity: 0.78; transform: scaleX(1);   }
  65%  { opacity: 0.78; transform: scaleX(1);   }
  100% { opacity: 0;    transform: scaleX(0.4); }
}

/* ── Logo ───────────────────────────────────────────────────────── */
.logo {
  display: inline-flex; align-items: center; gap: var(--space-4);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight-3);
}
.logo-mark {
  width: 28px; height: 28px;
  border-radius: var(--radius-md);
  background: var(--c-neutral-900);
  position: relative; overflow: hidden;
  display: inline-block;
}
.logo-mark::before, .logo-mark::after { content: ''; position: absolute; inset: 0; }
.logo-mark::before {
  background: var(--gr-mark-front);
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
}
.logo-mark::after {
  background: var(--gr-mark-back);
  clip-path: polygon(0 0, 65% 0, 0 70%);
  opacity: 0.85;
}

/* ── Button ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--btn-radius);
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  border: var(--bw-hair) solid transparent;
  transition: transform var(--dur-1) var(--ease-std),
              background var(--dur-2),
              color var(--dur-2),
              box-shadow var(--dur-2),
              border-color var(--dur-2);
}
.btn-primary   { background: var(--text);  color: var(--text-inverse); }
.btn-primary:hover { background: var(--accent); transform: translateY(-1px); }

.btn-secondary { background: transparent; color: var(--text); border-color: var(--text); }
.btn-secondary:hover { background: var(--text); color: var(--text-inverse); }

.btn-ghost     { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--text); }

.btn .arrow            { transition: transform var(--dur-2); }
.btn:hover .arrow      { transform: translateX(3px); }

/* ── Section head row ───────────────────────────────────────────── */
.section-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-21);
  align-items: end;
  margin-bottom: var(--space-21);
}
.section-head .lede {
  font-size: var(--fs-8);
  color: var(--text-muted);
  max-width: 38ch;
}
.section-head--row {
  grid-template-columns: 1fr auto;
  align-items: baseline;
  margin-bottom: var(--space-19);
}
.section-head--row .all-link {
  font-size: var(--fs-5);
  font-weight: var(--fw-semibold);
  border-bottom: var(--bw-thin) solid var(--text);
  padding-bottom: 2px;
  transition: color var(--dur-2), border-color var(--dur-2);
}
.section-head--row .all-link:hover { color: var(--accent); border-color: var(--accent); }

/* ── Card primitive ─────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease-std),
              box-shadow var(--dur-3) var(--ease-std),
              border-color var(--dur-3);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--text);
  box-shadow: var(--card-shadow);
}

/* ── Chip ───────────────────────────────────────────────────────── */
.chip {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-3);
  font-weight: var(--fw-medium);
  color: var(--text);
  transition: border-color var(--dur-2), color var(--dur-2);
}
.chip:hover { border-color: var(--text); }
.chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: auto;
}

/* ── Decorative squares grid layer (hero / stats / cta) ─────────── */
.sq-layer {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 20), 1fr);
  grid-auto-rows: var(--cell, 72px);
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-grid);
}
.sq-layer .sq {
  position: relative;
  border-right: var(--bw-hair) solid var(--border);
  border-bottom: var(--bw-hair) solid var(--border);
}
.sq-layer .sq::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--g, transparent);
  opacity: 0;
  transform: scale(0.94);
  will-change: opacity, transform;
}
.sq-layer .sq.is-active::before {
  animation: sqPulse var(--dur, 6s) ease-in-out var(--del, 0s) infinite;
}
.sq-layer.dense .sq { border-color: var(--border-soft); }
@keyframes sqPulse {
  0%   { opacity: 0;    transform: scale(0.94); }
  35%  { opacity: 0.62; transform: scale(1);    }
  65%  { opacity: 0.62; transform: scale(1);    }
  100% { opacity: 0;    transform: scale(1.04); }
}
.sq-mask { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-mask); }

/* ── Tiny in-card squares motif ─────────────────────────────────── */
.card-squares {
  display: grid;
  grid-template-columns: repeat(var(--tcols, 4), 1fr);
  grid-auto-rows: var(--tcell, 26px);
  width: max-content;
  gap: 0;
}
.card-squares .tsq {
  border: var(--bw-hair) solid var(--border);
  width: var(--tcell, 26px); height: var(--tcell, 26px);
  position: relative; overflow: hidden;
}
.card-squares .tsq.fill::before {
  content: ''; position: absolute; inset: 0;
  background: var(--tg, linear-gradient(135deg, var(--c-orange-500), var(--c-orange-400)));
  animation: tsqBlink var(--tdur, 5s) ease-in-out var(--tdel, 0s) infinite;
}
@keyframes tsqBlink {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.7; }
}


/* ════════════════════════════════════════════════════════════════════
   6. TYPE STYLES & PATTERNS
   Each rule below is the single source of truth for a text recipe.
   The .t-* class is the canonical handle; legacy semantic selectors
   are grouped in so they share the same rule.

   Layout-only properties (margin, max-width, padding, color overrides)
   live with the page rules in section 7.
   ════════════════════════════════════════════════════════════════════ */

/* ── Display scale ──────────────────────────────────────────────── */
.t-display-1,
.hero-headline {
  font-size: var(--fs-display-1);
  line-height: var(--lh-headline);
  letter-spacing: var(--tr-tight-6);
  font-weight: var(--fw-bold);
}
/* Override only the size when the headline appears on an inner page hero */
.t-display-2,
.page-hero .hero-headline {
  font-size: var(--fs-display-2);
}
.t-display-3,
.final-cta h2 {
  font-size: var(--fs-display-3);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight-6);
  font-weight: var(--fw-bold);
}
.t-display-5,
.section-title {
  font-size: var(--fs-display-5);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight-5);
  font-weight: var(--fw-bold);
}
.t-display-6,
.service-row__title {
  font-size: var(--fs-display-6);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight-5);
  font-weight: var(--fw-bold);
}
.t-display-7,
.tech-row h2 {
  font-size: var(--fs-display-7);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight-5);
  font-weight: var(--fw-bold);
}
.t-display-8,
.stats-head h2,
.faq h2 {
  font-size: var(--fs-display-8);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight-5);
  font-weight: var(--fw-bold);
}
.t-display-9,
.about-story .story-side h2 {
  font-size: var(--fs-display-11);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight-4);
  font-weight: var(--fw-bold);
}
/* Serif italic display (pull quote) */
.t-quote,
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-display-4);
  line-height: var(--lh-quote);
  letter-spacing: var(--tr-tight-4);
  color: var(--text);
  font-weight: var(--fw-regular);
}

/* ── Card-title scale ───────────────────────────────────────────── */
.t-card-title-xl,
.card-feature .card-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight-4);
  line-height: var(--lh-snug);
}
.t-card-title-lg,
.card-title {
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight-4);
  line-height: var(--lh-snug);
}
.t-card-title-md,
.phase-title {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight-3);
}
.t-card-title,
.card-tech .card-title,
.workflow-card h3,
.principle h3,
.team-name,
.work-name {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight-3);
}
/* Smaller variant used in compact work cards */
.t-card-title-sm,
.work-item--small .work-name {
  font-size: var(--fs-8);
}
/* Side-card "big-line" headline */
.t-card-title-side,
.side-card .big-line {
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight-3);
  line-height: var(--lh-card);
}

/* ── Body scale ─────────────────────────────────────────────────── */
.t-body-lg,
.service-row__desc,
.about-story .story-body p {
  font-size: var(--fs-9);
  line-height: var(--lh-prose);
  color: var(--text-muted);
}
.t-body,
.card-desc {
  font-size: var(--fs-7);
  line-height: var(--lh-prose);
  color: var(--text-muted);
}
.t-body-sm,
.phase-desc,
.workflow-card p,
.principle p,
.price-desc {
  font-size: var(--fs-5);
  line-height: var(--lh-prose);
  color: var(--text-muted);
}
.t-body-xs,
.team-bio {
  font-size: var(--fs-4);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

/* ── Large numerals (stats / prices) ────────────────────────────── */
.t-num-display,
.stat-num-big {
  font-size: var(--fs-display-10);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tr-tight-7);
  line-height: var(--lh-tight);
}
.t-num-xl,
.about-stats .stat-cell .num {
  font-size: var(--fs-display-9);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tr-tight-7);
  line-height: var(--lh-tight);
}
.t-num-lg,
.price-amount,
.side-card .stat-big {
  font-size: var(--fs-18);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tr-tight-7);
  line-height: var(--lh-tight);
}
.t-num-md,
.hero-card--stat .stat-num {
  font-size: var(--fs-17);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tr-tight-7);
  line-height: var(--lh-tight);
}

/* ── Eyebrow (accent + leading bar) ─────────────────────────────── */
.t-eyebrow,
.eyebrow,
.service-row__num {
  font-size: var(--fs-3);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.t-eyebrow::before,
.eyebrow::before,
.service-row__num::before {
  content: '';
  width: 24px; height: 1.5px;
  background: var(--accent);
  display: inline-block;
}
/* Stronger letter-spacing variant used on the services-archive page */
.service-row__num { letter-spacing: var(--tr-wide-4); }

/* ── Meta labels (uppercase, tracked) ───────────────────────────── */
/* Default muted meta — section subheaders, footer cols, contact-form label */
.t-meta,
.footer-col h4,
.contact-form h3,
.side-card h4,
.about-story .story-side .meta {
  font-size: var(--fs-3);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-3);
}
/* Faint meta — micro labels inside floating cards */
.t-meta-sm,
.hero-card .card-eyebrow {
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-1);
}
/* Strong meta — pricing column headers, badge */
.t-meta-strong,
.price-name {
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-4);
}
/* Accent meta — team role */
.t-meta-accent,
.team-role {
  font-size: var(--fs-2);
  color: var(--accent);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-3);
}
/* Variant for the "when" timeline label under phase cards */
.t-meta-when,
.phase-when {
  font-size: var(--fs-2);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-2);
}

/* ── Bullet list patterns ───────────────────────────────────────── */
/* Compact dot list (feature card bullets) */
.bullet-list,
.card-bullets {
  list-style: none;
}
.bullet-list li,
.card-bullets li {
  display: flex; align-items: baseline; gap: var(--space-4);
  font-size: var(--fs-6);
}
.bullet-list li::before,
.card-bullets li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: var(--radius-circle);
  flex: 0 0 auto;
  transform: translateY(-2px);
}
/* Heavier square-bullet list with bottom rules (service archive) */
.bullet-list--bar,
.service-row__bullets {
  list-style: none;
}
.bullet-list--bar li,
.service-row__bullets li {
  display: flex; align-items: baseline; gap: var(--space-6);
  font-size: var(--fs-6);
  padding: var(--space-5) 0;
  border-bottom: var(--bw-hair) solid var(--border);
}
.bullet-list--bar li::before,
.service-row__bullets li::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--accent);
  flex: 0 0 auto;
  transform: translateY(-2px);
}

/* ── Surface modifiers (inverse / soft) ─────────────────────────── */
/* Apply --surface-inverse + flip text + adjust border tokens.
   Used by .card-cta, .side-card--dark and any future dark card. */
.surface-inverse,
.card-cta,
.side-card--dark {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-color: var(--text);
}
.surface-inverse .t-meta,
.card-cta .card-desc,
.side-card--dark h4 { color: var(--text-inverse-mute); }
.surface-inverse .card-squares .tsq,
.card-cta .card-squares .tsq { border-color: var(--border-inverse); }

/* Soft warm surface (used by tech card and workflow archive cards) */
.surface-soft,
.card-tech,
.workflow-card { background: var(--surface-soft); }


/* ════════════════════════════════════════════════════════════════════
   7. PAGES
   Page rules hold only layout-specific properties (margin, max-width,
   positioning, color overrides). Font sizes / weights / line-heights
   / tracking live in the type-style rules above.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero (home) ────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: var(--space-24) 0 var(--space-32);
  overflow: hidden;
  isolation: isolate;
}
.hero .wrap     { position: relative; z-index: var(--z-content); }
.hero .sq-mask  { background: var(--mask-hero); }

.hero-headline       { max-width: 11ch; margin-top: var(--space-21); }
.hero-headline em {
  color: var(--accent);
  font-size: 1.04em;
  letter-spacing: var(--tr-tight-3);
  line-height: var(--lh-1);
}
.hero-sub {
  margin-top: var(--space-14);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 52ch;
}
.hero-ctas {
  margin-top: var(--space-16);
  display: flex; gap: var(--space-5); align-items: center;
}

/* Floating cards on hero */
.hero-card {
  position: absolute;
  background: var(--surface);
  border: var(--bw-hair) solid var(--text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-stamp-md-lift);
  padding: var(--space-8);
  z-index: var(--z-card);
}
.hero-card--workflow {
  top: 200px; right: 0;
  width: 380px;
  transform: rotate(1.6deg);
}
.hero-card--stat {
  bottom: 50px; right: var(--layout-gutter);
  padding: var(--space-7) var(--space-10);
  display: inline-flex; align-items: center; gap: var(--space-7);
  transform: rotate(-1.6deg);
  box-shadow: var(--shadow-stamp-sm-lift);
}
.hero-card--stat .stat-num   { color: var(--accent); }
.hero-card--stat .stat-label {
  font-size: var(--fs-4);
  color: var(--text-muted);
  max-width: 180px;
  line-height: var(--lh-heading);
}
.workflow-svg { width: 100%; display: block; margin-top: var(--space-4); }
.workflow-caption {
  font-size: var(--fs-2);
  color: var(--text-faint);
  margin-top: var(--space-3);
}

/* ── Services grid ──────────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-9);
}
.card-feature {
  grid-row: 1 / span 2;
  display: flex; flex-direction: column;
  min-height: 460px;
}
.card-feature .card-squares { margin-bottom: var(--space-11); }
.card-title         { margin-bottom: var(--space-5); }
.card-desc          { margin-bottom: var(--space-8); }
.card-bullets       { margin-top: auto; flex-direction: column; display: flex; gap: var(--space-3); }
.card-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-5);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-10);
  color: var(--text);
  border-bottom: var(--bw-thin) solid var(--text);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color var(--dur-2), border-color var(--dur-2);
}
.card-link:hover { color: var(--accent); border-color: var(--accent); }
.card-link .arrow { transition: transform var(--dur-2); }
.card-link:hover .arrow { transform: translateX(3px); }

.card-tech {
  display: flex; flex-direction: column;
}
.card-cta {
  display: flex; flex-direction: column; justify-content: space-between;
}
.card-cta .card-title { color: var(--text-inverse); }
.card-cta .card-link {
  color: var(--text-inverse);
  border-color: var(--text-inverse);
}
.card-cta .card-link:hover { color: var(--accent); border-color: var(--accent); }

/* ── Stats band (dark) ──────────────────────────────────────────── */
.stats {
  position: relative;
  padding: var(--space-26) 0;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  overflow: hidden;
  isolation: isolate;
}
.stats .sq-layer { z-index: var(--z-grid); }
.stats .sq-layer .sq { border-color: var(--grid-inverse); }
.stats .wrap { position: relative; z-index: var(--z-content); }
.stats-head { margin-bottom: var(--space-20); max-width: 600px; }
.stats-head .eyebrow { color: var(--accent-bright); }
.stats-head .eyebrow::before { background: var(--accent-bright); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--bw-hair) solid var(--border-inverse);
  border-bottom: var(--bw-hair) solid var(--border-inverse);
}
.stat {
  padding: var(--space-16) var(--space-13) var(--space-16) 0;
  border-right: var(--bw-hair) solid var(--border-inverse);
}
.stat:last-child { border-right: none; }
.stat-num-big {
  background: var(--gr-stat);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stat-label {
  margin-top: var(--space-6);
  font-size: var(--fs-5);
  color: var(--text-inverse-mute);
  max-width: 22ch;
}

/* ── Work grid ──────────────────────────────────────────────────── */
.work-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: var(--space-9);
}
.work-grid .work-right {
  display: flex; flex-direction: column; gap: var(--space-9);
}
.work-item {
  position: relative; display: block;
  border-radius: var(--radius-md); overflow: hidden;
  border: var(--bw-hair) solid var(--border);
  background: var(--surface-soft);
  transition: transform var(--dur-4) var(--ease-std),
              box-shadow var(--dur-4) var(--ease-std),
              border-color var(--dur-4);
}
.work-item:hover {
  transform: translateY(-3px);
  border-color: var(--text);
  box-shadow: var(--shadow-card-5);
}
.work-thumb {
  display: block; width: 100%;
  background: var(--gr-thumb-orange);
  position: relative;
  isolation: isolate;
}
.work-item--big .work-thumb   { aspect-ratio: 16/11; }
.work-item--small .work-thumb { aspect-ratio: 16/10; }
.work-thumb.alt-a { background: var(--gr-thumb-amber); }
.work-thumb.alt-b { background: var(--gr-thumb-rose); }
.work-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: var(--pattern-scanline);
  z-index: 1;
}

/* Centered serif monogram — echoes the case-study hero mark */
.work-mark {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  font: italic var(--fw-regular) clamp(140px, 16vw, 240px)/1 var(--font-serif);
  color: var(--c-white-a78);
  letter-spacing: var(--tr-tight-8);
  transition: transform var(--dur-4) var(--ease-std);
}
.work-mark .accent { color: var(--c-white); }
.work-item:hover .work-mark { transform: translateY(-4px); }
.work-item--small .work-mark { font-size: clamp(80px, 12vw, 140px); }

/* Top-left category pill */
.work-thumb .corner-tag {
  position: absolute; z-index: 3;
  top: var(--space-7); left: var(--space-8);
  font-size: var(--fs-2);
  font-weight: var(--fw-semibold);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-3);
  background: var(--surface);
  border: var(--bw-hair) solid var(--text);
  padding: 5px var(--space-5);
  border-radius: var(--radius-pill);
}

/* Bottom-left result chip — dark pill with big number + tiny label */
.work-result {
  position: absolute; z-index: 3;
  bottom: var(--space-7); left: var(--space-8);
  display: inline-flex; align-items: baseline; gap: var(--space-3);
  background: var(--c-ink-a92);
  color: var(--text-inverse);
  border: var(--bw-hair) solid var(--border-inverse);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
}
.work-result .num {
  font-size: var(--fs-9);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tr-tight-4);
  line-height: var(--lh-tight);
}
.work-result .num-label {
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--text-inverse-mute);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-1);
}

.work-meta {
  padding: var(--space-10) var(--space-12);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-9);
}
.work-name { margin-bottom: var(--space-1); }
.work-desc { font-size: var(--fs-4); color: var(--text-muted); }

/* CTA replaces the static tag in the meta row */
.work-cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-3);
  font-weight: var(--fw-semibold);
  color: var(--text);
  white-space: nowrap;
  transition: color var(--dur-2);
}
.work-cta .arrow { transition: transform var(--dur-2); }
.work-item:hover .work-cta { color: var(--accent); }
.work-item:hover .work-cta .arrow { transform: translateX(4px); }

/* ── Final CTA ──────────────────────────────────────────────────── */
.final-cta {
  position: relative;
  padding: var(--space-30) 0 var(--space-31);
  text-align: center;
  overflow: hidden;
  background: var(--surface);
  border-top: var(--bw-hair) solid var(--border);
  isolation: isolate;
}
.final-cta .sq-layer { z-index: var(--z-grid); }
.final-cta .wrap     { position: relative; z-index: var(--z-content); }
.final-cta h2        { max-width: 18ch; margin: 0 auto; }
.final-cta h2 em     { color: var(--accent); }
.final-cta .ctas {
  margin-top: var(--space-18);
  display: flex; gap: var(--space-6); justify-content: center;
}
.final-cta .sq-mask { background: var(--mask-final-cta); }

/* ── Footer ─────────────────────────────────────────────────────── */
.footer {
  background: var(--surface-soft);
  border-top: var(--bw-hair) solid var(--border);
  padding: var(--space-22) 0 var(--space-16);
  font-size: var(--fs-5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-19);
  margin-bottom: var(--space-20);
}
.footer-brand .logo { margin-bottom: var(--space-6); }
.footer-tagline     { color: var(--text-muted); max-width: 28ch; }
.footer-col h4      { margin-bottom: var(--space-6); }
.footer-col ul      { list-style: none; }
.footer-col li      { margin-bottom: var(--space-3); }
.footer-col a       { color: var(--text); transition: color var(--dur-2); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  padding-top: var(--space-13);
  border-top: var(--bw-hair) solid var(--border);
  display: flex; justify-content: space-between;
  font-size: var(--fs-3);
  color: var(--text-faint);
}
.footer-bottom a {
  color: inherit;
  transition: color var(--dur-2);
}
.footer-bottom a:hover { color: var(--accent); }
.footer-policy-links {
  display: flex;
  gap: var(--space-7);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Page hero (inner pages) ────────────────────────────────────── */
.page-hero {
  position: relative;
  padding: var(--space-24) 0 var(--space-28);
  overflow: hidden;
  isolation: isolate;
}
.page-hero .wrap    { position: relative; z-index: var(--z-content); }
.page-hero .sq-layer{ z-index: var(--z-grid); }
.page-hero .sq-mask {
  position: absolute; inset: 0; pointer-events: none;
  z-index: var(--z-mask);
  background: var(--mask-page-hero);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 7px var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: var(--bw-hair) solid var(--accent);
  color: var(--accent);
  font-size: var(--fs-2);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-3);
  margin-bottom: var(--space-14);
}
.hero-badge::before {
  content: ''; width: 6px; height: 6px;
  border-radius: var(--radius-circle);
  background: var(--accent);
}
.page-hero .hero-headline { margin-top: 0; max-width: 16ch; }
.page-hero .hero-sub      { max-width: 56ch; }

/* ── Policy page ────────────────────────────────────────────────── */
.policy-section {
  padding: var(--space-22) 0 var(--space-24);
}
.policy-layout {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 2fr);
  gap: var(--space-20);
  align-items: start;
}
.policy-meta {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-8));
  color: var(--text-muted);
  font-size: var(--fs-4);
}
.policy-meta strong {
  display: block;
  color: var(--text);
  margin-bottom: var(--space-2);
}
.policy-content {
  max-width: 820px;
}
.policy-block {
  padding: var(--space-11) 0;
  border-top: var(--bw-hair) solid var(--border);
}
.policy-block:first-child {
  padding-top: 0;
  border-top: 0;
}
.policy-block h2 {
  font-size: var(--fs-display-8);
  letter-spacing: var(--tr-tight-1);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-5);
}
.policy-block p,
.policy-block li {
  color: var(--text-muted);
  font-size: var(--fs-6);
  line-height: var(--lh-body);
}
.policy-block p + p,
.policy-block ul + p,
.policy-block p + ul {
  margin-top: var(--space-5);
}
.policy-block ul {
  padding-left: var(--space-9);
}
.policy-block li + li {
  margin-top: var(--space-3);
}

/* ── Service page · Problems ────────────────────────────────────── */
.problem-list { list-style: none; margin-top: var(--space-5); }
.problem-list li {
  display: flex; align-items: baseline; gap: var(--space-10);
  padding: var(--space-13) 0;
  border-top: var(--bw-hair) solid var(--border);
  font-size: var(--fs-display-12);
  letter-spacing: var(--tr-tight-1);
  line-height: var(--lh-heading);
  font-weight: var(--fw-medium);
  transition: padding-left var(--dur-3) var(--ease-std), color var(--dur-3);
  cursor: default;
}
.problem-list li:hover { padding-left: var(--space-6); color: var(--accent); }
.problem-list li:last-child { border-bottom: var(--bw-hair) solid var(--border); }
.problem-list li::before {
  content: '';
  width: 32px; height: 2px;
  background: var(--accent);
  flex: 0 0 auto;
  transform: translateY(-8px);
  transition: width var(--dur-3);
}
.problem-list li:hover::before { width: 48px; }

/* ── Service page · Phases ──────────────────────────────────────── */
.phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-7);
}
.phase {
  position: relative;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding-sm);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease-std),
              border-color var(--dur-3),
              box-shadow var(--dur-3);
  display: flex; flex-direction: column;
}
.phase:hover {
  transform: translateY(-3px);
  border-color: var(--text);
  box-shadow: var(--shadow-card-2);
}
.phase .card-squares { margin-bottom: var(--space-10); }
.phase-title         { margin-bottom: var(--space-4); }
.phase-desc          { flex: 1; }
.phase-when {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: var(--bw-hair) solid var(--border);
}

/* ── Service page · Workflows ───────────────────────────────────── */
.workflows-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-9);
}
.workflow-card {
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--card-padding-sm);
  transition: transform var(--dur-3), border-color var(--dur-3), background var(--dur-3);
}
.workflow-card:hover {
  transform: translateY(-3px);
  border-color: var(--text);
  background: var(--surface);
}
.workflow-diagram {
  background: var(--surface);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-10) var(--space-7);
  margin-bottom: var(--space-10);
  display: flex; align-items: center; justify-content: center;
  height: 140px;
}
.workflow-card h3 { margin-bottom: var(--space-3); }

/* ── Service page · Tech row ────────────────────────────────────── */
.tech-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-21);
  align-items: start;
}
.tech-row h2 em { color: var(--accent); }
.tech-row .chips .chip { font-size: var(--fs-4); padding: var(--space-3) var(--space-6); }

/* ── Service page · Pricing ─────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  align-items: stretch;
}
.price {
  position: relative;
  background: var(--surface);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-16) var(--space-14);
  overflow: hidden;
  transition: transform var(--dur-3), border-color var(--dur-3);
  display: flex; flex-direction: column;
}
.price:hover { transform: translateY(-3px); border-color: var(--text); }
.price--feature {
  border: var(--bw-thick) solid var(--text);
  isolation: isolate;
}
.price--feature .sq-layer { z-index: 0; }
.price--feature > *:not(.sq-layer) { position: relative; z-index: var(--z-content); }
.price-name   { margin-bottom: var(--space-8); }
.price-amount { display: flex; align-items: baseline; gap: var(--space-2); }
.price-amount .unit {
  font-size: var(--fs-6);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  letter-spacing: 0;
}
.price-desc { margin: var(--space-7) 0 var(--space-11); }
.price-features { list-style: none; margin-bottom: var(--space-13); flex: 1; }
.price-features li {
  display: flex; align-items: baseline; gap: var(--space-5);
  font-size: var(--fs-5);
  padding: var(--space-4) 0;
  border-bottom: var(--bw-hair) solid var(--border);
}
.price-features li:last-child { border-bottom: none; }
.price-features li::before {
  content: '✓';
  color: var(--accent);
  font-weight: var(--fw-bold);
  font-size: var(--fs-4);
}
.price .btn { width: 100%; justify-content: center; }
.price--feature .badge {
  position: absolute; top: 0; right: var(--space-11);
  background: var(--text);
  color: var(--text-inverse);
  padding: var(--space-2) var(--space-6);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-3);
  z-index: var(--z-content);
}

/* ── Contact page ───────────────────────────────────────────────── */
.contact-hero { padding: var(--space-24) 0 var(--space-21); }
.contact-hero .hero-headline { max-width: 12ch; }

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-17);
  padding-bottom: var(--section-py);
}

.contact-form {
  background: var(--surface);
  border: var(--bw-hair) solid var(--text);
  border-radius: var(--radius-md);
  padding: var(--space-17);
  box-shadow: var(--shadow-stamp-md);
  position: relative;
}
.contact-form h3 { margin-bottom: var(--space-13); }
.form-row { margin-bottom: var(--space-12); }
.form-row label {
  display: block;
  font-size: var(--fs-3);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  font-weight: var(--fw-medium);
}
.form-row input,
.form-row textarea {
  width: 100%;
  border: none;
  border-bottom: var(--bw-thin) solid var(--text);
  background: transparent;
  padding: var(--space-3) 0;
  font: var(--fw-medium) var(--fs-9)/var(--lh-body) var(--font-sans);
  color: var(--text);
  transition: border-color var(--dur-2), padding-left var(--dur-2);
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--text-faint); }
.form-row input:focus,
.form-row textarea:focus { outline: none; border-color: var(--accent); }
.form-row textarea {
  resize: vertical;
  min-height: 110px;
  padding: var(--space-5) var(--space-6);
  border: var(--bw-thin) solid var(--text);
  border-radius: var(--radius-sm);
}
.pill-group {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-1);
}
.pill {
  display: inline-block;
  padding: var(--space-3) var(--space-7);
  border: var(--bw-thin) solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-4);
  font-weight: var(--fw-medium);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.pill:hover { border-color: var(--text); }
.pill.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--text-inverse);
}
.form-submit-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-9);
  margin-top: var(--space-3);
}
.form-note { font-size: var(--fs-3); color: var(--text-faint); }
.form-error {
  font-size: var(--fs-4);
  color: #c0392b;
  margin-bottom: var(--space-9);
}
.form-success {
  font-size: var(--fs-8);
  font-weight: var(--fw-medium);
  padding: var(--space-15) 0;
  text-align: center;
}

.contact-side { display: flex; flex-direction: column; gap: var(--space-7); }
.side-card {
  background: var(--surface);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-12);
  transition: border-color var(--dur-3), transform var(--dur-3), box-shadow var(--dur-3);
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.side-card:hover {
  border-color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-1);
}
.side-card h4         { margin-bottom: var(--space-5); }
.side-card .big-line  { display: flex; align-items: center; gap: var(--space-3); }
.side-card .arrow     { transition: transform var(--dur-2); }
.side-card:hover .arrow { transform: translateX(4px); }
.side-card .small {
  font-size: var(--fs-4);
  color: var(--text-muted);
  margin-top: var(--space-3);
}
.side-card--dark .big-line { color: var(--text-inverse); }
.side-card--dark .small    { color: var(--text-inverse-dim); }
.side-card .stat-big       { color: var(--accent); }

.faq { padding-bottom: var(--section-py-tight); }
.faq h2 { margin-bottom: var(--space-17); }
.faq-list { list-style: none; border-top: var(--bw-hair) solid var(--border); }
.faq-item { border-bottom: var(--bw-hair) solid var(--border); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-11) 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-9);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight-1);
  transition: color var(--dur-2);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::after {
  content: '+';
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  color: var(--text-faint);
  flex: 0 0 auto;
  transition: transform var(--dur-3), color var(--dur-2);
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq-item .faq-answer {
  padding-bottom: var(--space-11);
  font-size: var(--fs-7);
  color: var(--text-muted);
  line-height: var(--lh-loose);
  max-width: 70ch;
}

/* ── About page ─────────────────────────────────────────────────── */
.about-story {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-23);
  align-items: start;
  margin-bottom: var(--space-17);
}
.about-story .story-side h2 em   { color: var(--accent); }
.about-story .story-side .meta   { margin-top: var(--space-8); }
.about-story .story-body p       { margin-bottom: var(--space-10); max-width: 60ch; }
/* The opening paragraph is larger, inked, and dropped to text color */
.about-story .story-body p:first-child {
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  color: var(--text);
  margin-bottom: var(--space-13);
}

.pull-quote {
  text-align: left;
  padding: var(--space-23) 0;
  max-width: 22ch;
}
.pull-quote .accent-mark { color: var(--accent); font-style: italic; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--bw-hair) solid var(--border);
  border-bottom: var(--bw-hair) solid var(--border);
  padding: var(--space-20) 0;
}
.about-stats .stat-cell {
  padding: 0 var(--space-15);
  border-right: var(--bw-hair) solid var(--border);
}
.about-stats .stat-cell:first-child { padding-left: 0; }
.about-stats .stat-cell:last-child  { border-right: none; }
.about-stats .stat-cell .num        { color: var(--text); }
.about-stats .stat-cell .label {
  margin-top: var(--space-6);
  font-size: var(--fs-4);
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 22ch;
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}
.principle {
  position: relative;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding-sm);
  transition: transform var(--dur-3) var(--ease-std),
              border-color var(--dur-3),
              box-shadow var(--dur-3);
  overflow: hidden;
}
.principle:hover {
  transform: translateY(-3px);
  border-color: var(--text);
  box-shadow: var(--shadow-card-2);
}
.principle .card-squares { margin-bottom: var(--space-10); }
.principle h3            { margin-bottom: var(--space-4); }
.principle h3 em         { color: var(--accent); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-9);
}
.team-card {
  background: var(--surface);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease-std),
              border-color var(--dur-3),
              box-shadow var(--dur-3);
}
.team-card:hover {
  transform: translateY(-3px);
  border-color: var(--text);
  box-shadow: var(--shadow-card-4);
}
.team-photo {
  aspect-ratio: 4 / 5;
  position: relative;
  background: var(--gr-thumb-orange);
}
.team-photo.alt-a { background: var(--gr-thumb-amber); }
.team-photo.alt-b { background: var(--gr-thumb-rose); }
.team-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--pattern-scanline-soft);
}
.team-photo .initial {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: italic var(--fw-regular) 220px/1 var(--font-serif);
  color: var(--c-white-a78);
  letter-spacing: var(--tr-tight-8);
  z-index: var(--z-mask);
}
.team-info { padding: var(--space-11) var(--space-12) var(--space-13); }
.team-role { margin: var(--space-3) 0 var(--space-6); }

/* ── Services archive · alternating rows ────────────────────────── */
.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-23);
  align-items: center;
  padding: var(--space-27) 0;
  border-bottom: var(--bw-hair) solid var(--border);
}
.service-row:last-of-type { border-bottom: none; }
.service-row--alt .service-row__content { order: 2; }
.service-row--alt .service-row__visual  { order: 1; }
.service-row__num    { margin-bottom: var(--space-8); }
.service-row__title  { margin-bottom: var(--space-10); }
.service-row__title em { color: var(--accent); }
.service-row__desc   { margin-bottom: var(--space-13); max-width: 50ch; }
.service-row__bullets{ margin-bottom: var(--space-16); }
.service-row__cta    { display: flex; gap: var(--space-5); align-items: center; }

.service-row__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-soft);
  border: var(--bw-hair) solid var(--text);
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-stamp-md);
}
.service-row__visual .sq-layer { z-index: var(--z-grid); }
.service-row__visual .mark {
  position: absolute; inset: 0; z-index: var(--z-mask);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  font: italic var(--fw-regular) var(--fs-display-13)/1 var(--font-serif);
  color: var(--c-ink-a92);
  letter-spacing: var(--tr-tight-8);
}
.service-row__visual .mark .accent { color: var(--accent); }
.service-row__visual .corner-tag {
  position: absolute;
  top: var(--space-8); left: var(--space-9);
  z-index: var(--z-content);
  font-size: var(--fs-2);
  font-weight: var(--fw-semibold);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-3);
  background: var(--surface);
  border: var(--bw-hair) solid var(--text);
  padding: 5px var(--space-5);
  border-radius: var(--radius-pill);
}
.service-row__visual .meta-tag {
  position: absolute;
  bottom: var(--space-8); right: var(--space-9);
  z-index: var(--z-content);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  background: var(--surface);
  border: var(--bw-hair) solid var(--border);
  padding: 5px var(--space-5);
  border-radius: var(--radius-pill);
}


/* ── Case study archive ─────────────────────────────────────────── */
.archive-hero {
  padding-bottom: var(--space-23);
}
.archive-hero + .section--tight {
  padding-top: var(--space-17);
}
.archive-hero .hero-headline em {
  color: var(--accent);
}
.archive-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: var(--bw-hair) solid var(--border);
  border-bottom: var(--bw-hair) solid var(--border);
  margin-top: var(--space-17);
  padding: var(--space-15) 0;
}
.archive-hero__stats .item {
  padding: 0 var(--space-13);
  border-right: var(--bw-hair) solid var(--border);
}
.archive-hero__stats .item:first-child {
  padding-left: 0;
}
.archive-hero__stats .item:last-child {
  border-right: none;
}
.archive-hero__stats .label {
  display: block;
  margin-bottom: var(--space-3);
}
.archive-hero__stats .value {
  font-size: var(--fs-15);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tr-tight-4);
  line-height: var(--lh-tight);
}

.archive-feature {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-23);
  align-items: center;
}
.archive-feature__visual {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  background: var(--gr-thumb-orange);
  border: var(--bw-hair) solid var(--text);
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-stamp-md);
  transition: transform var(--dur-4) var(--ease-std), box-shadow var(--dur-4) var(--ease-std);
}
.archive-feature__visual:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-stamp-md-lift);
}
.archive-feature__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pattern-scanline);
  z-index: var(--z-grid);
}
.archive-feature__visual .corner-tag,
.archive-feature__visual .meta-tag {
  position: absolute;
  z-index: var(--z-content);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-3);
  background: var(--surface);
  padding: 5px var(--space-5);
  border-radius: var(--radius-pill);
}
.archive-feature__visual .corner-tag {
  top: var(--space-9);
  left: var(--space-11);
  color: var(--text);
  border: var(--bw-hair) solid var(--text);
  font-weight: var(--fw-semibold);
}
.archive-feature__visual .meta-tag {
  right: var(--space-11);
  bottom: var(--space-9);
  color: var(--text-muted);
  border: var(--bw-hair) solid var(--border);
}
.archive-feature__content .lede {
  margin: var(--space-8) 0 var(--space-13);
  font-size: var(--fs-8);
  color: var(--text-muted);
  max-width: 42ch;
}
.archive-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-15);
}
.archive-feature__meta span {
  display: inline-flex;
  padding: var(--space-2) var(--space-5);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--fs-3);
  font-weight: var(--fw-medium);
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-9);
}
.archive-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--surface-soft);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-4) var(--ease-std),
              border-color var(--dur-4),
              box-shadow var(--dur-4);
}
.archive-card:hover {
  transform: translateY(-3px);
  border-color: var(--text);
  box-shadow: var(--shadow-card-5);
}
.archive-card--large {
  grid-column: span 2;
}
.archive-card__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--gr-thumb-orange);
  overflow: hidden;
  isolation: isolate;
}
.archive-card__thumb.alt-a { background: var(--gr-thumb-amber); }
.archive-card__thumb.alt-b { background: var(--gr-thumb-rose); }
.archive-card__thumb.alt-c { background: var(--gr-mark-front); }
.archive-card__thumb.alt-d { background: var(--gr-stat); }
.archive-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pattern-scanline);
  z-index: var(--z-grid);
}
.archive-card__thumb .corner-tag {
  position: absolute;
  top: var(--space-7);
  left: var(--space-8);
  z-index: var(--z-content);
  font-size: var(--fs-2);
  font-weight: var(--fw-semibold);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-3);
  background: var(--surface);
  border: var(--bw-hair) solid var(--text);
  padding: 5px var(--space-5);
  border-radius: var(--radius-pill);
}
.archive-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-9);
  padding: var(--space-12);
}
.archive-card__kicker {
  margin-bottom: var(--space-3);
  font-size: var(--fs-3);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-2);
}
.archive-card__body h3 {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight-3);
  line-height: var(--lh-card);
}
.archive-card__body p {
  color: var(--text-muted);
  font-size: var(--fs-4);
  line-height: var(--lh-prose);
  max-width: 44ch;
}
.archive-card__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-8);
  border-top: var(--bw-hair) solid var(--border);
  font-size: var(--fs-3);
  font-weight: var(--fw-semibold);
}
.archive-card__footer .arrow {
  display: inline-block;
  transition: transform var(--dur-2);
}
.archive-card:hover .archive-card__footer .arrow {
  transform: translateX(4px);
}

.archive-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-21);
  align-items: start;
  border-top: var(--bw-hair) solid var(--border);
  border-bottom: var(--bw-hair) solid var(--border);
  padding: var(--space-23) 0;
}
.archive-note h2 {
  font-size: var(--fs-display-8);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight-6);
  line-height: var(--lh-display);
  max-width: 13ch;
}
.archive-note__list {
  display: grid;
  gap: 0;
  border-top: var(--bw-hair) solid var(--border);
}
.archive-note__list span {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-10) 0;
  border-bottom: var(--bw-hair) solid var(--border);
  font-size: var(--fs-8);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}
.archive-note__list span::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--accent);
  flex: 0 0 auto;
}


/* ── Case study page ────────────────────────────────────────────── */
/* Hero meta strip — 4 compact label/value items below the hero sub */
.case-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--bw-hair) solid var(--border);
  border-bottom: var(--bw-hair) solid var(--border);
  margin-top: var(--space-17);
  padding: var(--space-15) 0;
}
.case-meta .item {
  padding: 0 var(--space-13);
  border-right: var(--bw-hair) solid var(--border);
}
.case-meta .item:first-child { padding-left: 0; }
.case-meta .item:last-child  { border-right: none; }
.case-meta .label { display: block; margin-bottom: var(--space-3); }
.case-meta .value {
  font-size: var(--fs-9);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight-3);
  line-height: var(--lh-snug);
}

/* Hero visual — full-width gradient frame, wider than service-row__visual */
.case-visual {
  position: relative;
  aspect-ratio: 21 / 9;
  background: var(--gr-thumb-orange);
  border: var(--bw-hair) solid var(--text);
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-stamp-md);
  margin-top: var(--space-23);
}
.case-visual::after {
  content: ''; position: absolute; inset: 0;
  background: var(--pattern-scanline);
}
.case-visual .mark {
  position: absolute; inset: 0; z-index: var(--z-mask);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  font: italic var(--fw-regular) var(--fs-display-13)/1 var(--font-serif);
  color: var(--c-white-a78);
  letter-spacing: var(--tr-tight-8);
}
.case-visual .mark .accent { color: var(--c-white); }
.case-visual .corner-tag,
.case-visual .meta-tag {
  position: absolute; z-index: var(--z-content);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide-3);
  background: var(--surface);
  padding: 5px var(--space-5);
  border-radius: var(--radius-pill);
}
.case-visual .corner-tag {
  top: var(--space-9); left: var(--space-11);
  color: var(--text);
  border: var(--bw-hair) solid var(--text);
  font-weight: var(--fw-semibold);
}
.case-visual .meta-tag {
  bottom: var(--space-9); right: var(--space-11);
  color: var(--text-muted);
  border: var(--bw-hair) solid var(--border);
}

/* Context block — body column + sticky result card */
.case-context {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-23);
  align-items: start;
}
.case-context .content { max-width: 60ch; }
.case-context .body { margin-top: var(--space-15); }
.case-context .body p {
  font-size: var(--fs-9);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  margin-bottom: var(--space-10);
  max-width: 56ch;
}
.case-context .body p:first-of-type {
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  color: var(--text);
  margin-bottom: var(--space-13);
}

/* Result card — dark surface with stacked stats, sticky on desktop */
.case-result {
  position: sticky;
  top: 90px;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border: var(--bw-hair) solid var(--text);
  border-radius: var(--radius-md);
  padding: var(--space-15);
  overflow: hidden;
  isolation: isolate;
}
.case-result .sq-layer { z-index: var(--z-grid); }
.case-result .sq-layer .sq { border-color: var(--grid-inverse); }
.case-result .inner { position: relative; z-index: var(--z-content); }
.case-result .label { color: var(--accent-bright); margin-bottom: var(--space-9); }
.case-result .label::before { background: var(--accent-bright); }
.case-result .item {
  padding: var(--space-11) 0;
  border-top: var(--bw-hair) solid var(--border-inverse);
}
.case-result .item:first-of-type {
  border-top: none;
  padding-top: 0;
}
.case-result .item .num {
  display: block;
  background: var(--gr-stat);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.case-result .item .desc {
  margin-top: var(--space-4);
  font-size: var(--fs-4);
  color: var(--text-inverse-mute);
  max-width: 28ch;
  line-height: var(--lh-prose);
}

/* Testimonial block — large pull quote + small attribution row */
.case-testimonial {
  border-top: var(--bw-hair) solid var(--border);
  border-bottom: var(--bw-hair) solid var(--border);
  padding: var(--space-23) 0;
}
.case-testimonial .pull-quote {
  padding: 0;
  max-width: 24ch;
  margin-top: var(--space-9);
}
.case-testimonial .attribution {
  margin-top: var(--space-13);
  display: flex; align-items: center; gap: var(--space-9);
}
.case-testimonial .avatar {
  width: 56px; height: 56px;
  border-radius: var(--radius-circle);
  background: var(--gr-thumb-amber);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.case-testimonial .avatar::after {
  content: ''; position: absolute; inset: 0;
  background: var(--pattern-scanline-soft);
}
.case-testimonial .who .name {
  font-size: var(--fs-6);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight-2);
}
.case-testimonial .who .role {
  font-size: var(--fs-3);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Next case study — single oversized link row */
.case-next {
  border-top: var(--bw-hair) solid var(--border);
  padding: var(--space-23) 0;
}
.case-next .label { margin-bottom: var(--space-9); }
.case-next a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-15);
  padding: var(--space-13) 0;
  border-top: var(--bw-hair) solid var(--text);
  border-bottom: var(--bw-hair) solid var(--text);
  transition: background var(--dur-3), padding-left var(--dur-3);
}
.case-next a:hover {
  background: var(--surface-soft);
  padding-left: var(--space-9);
}
.case-next .next-name {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight-5);
  line-height: var(--lh-display);
}
.case-next .next-desc {
  font-size: var(--fs-5);
  color: var(--text-muted);
  margin-top: var(--space-3);
}
.case-next .next-arrow {
  font-size: var(--fs-15);
  color: var(--text);
  transition: transform var(--dur-3), color var(--dur-3);
}
.case-next a:hover .next-arrow {
  color: var(--accent);
  transform: translateX(8px);
}


/* ════════════════════════════════════════════════════════════════════
   8. RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .card-feature  { grid-row: auto; grid-column: 1 / -1; }
  .hero-card--workflow { width: 320px; top: 60px; }
  .hero-card--stat     { left: auto; right: var(--layout-gutter); bottom: var(--layout-gutter); }
  .stats-grid    { grid-template-columns: 1fr 1fr; }
  .stat          { border-right: none; border-bottom: var(--bw-hair) solid var(--border-inverse); }
  .stat:nth-child(odd)         { border-right: var(--bw-hair) solid var(--border-inverse); }
  .stat:nth-last-child(-n+2)   { border-bottom: none; }
  .work-grid     { grid-template-columns: 1fr; }
  .work-grid .work-right { flex-direction: row; }
  .phases        { grid-template-columns: 1fr 1fr; }
  .workflows-grid{ grid-template-columns: 1fr; }
  .tech-row      { grid-template-columns: 1fr; gap: var(--space-11); }
  .about-story   { grid-template-columns: 1fr; gap: var(--space-17); }
  .principles-grid { grid-template-columns: 1fr 1fr; }
  .team-grid     { grid-template-columns: 1fr 1fr; }
  .about-stats   { grid-template-columns: 1fr 1fr; gap: var(--space-15) 0; }
  .about-stats .stat-cell:nth-child(2) { border-right: none; }
  .service-row   { grid-template-columns: 1fr; gap: var(--space-17); padding: var(--space-23) 0; }
  .service-row--alt .service-row__content { order: 1; }
  .service-row--alt .service-row__visual  { order: 2; }
  .archive-feature { grid-template-columns: 1fr; gap: var(--space-17); }
  .archive-grid { grid-template-columns: 1fr 1fr; }
  .archive-card--large { grid-column: span 2; }
  .archive-note { grid-template-columns: 1fr; gap: var(--space-13); }
  .case-context  { grid-template-columns: 1fr; gap: var(--space-17); }
  .case-result   { position: relative; top: 0; }
  .case-meta     { grid-template-columns: 1fr 1fr; }
  .case-meta .item:nth-child(2) { border-right: none; }
  .case-meta .item { padding: var(--space-7) var(--space-13); }
  .case-meta .item:first-child,
  .case-meta .item:nth-child(2) { padding-top: 0; }
  .case-meta .item:nth-child(3),
  .case-meta .item:nth-child(4) {
    border-top: var(--bw-hair) solid var(--border);
    padding-bottom: 0;
  }
  .case-visual           { aspect-ratio: 16 / 10; }
  .service-row__visual   { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .wrap          { padding: 0 var(--layout-gutter-sm); }
  .hero          { padding: var(--space-21) 0 var(--space-25); }
  .hero-card--workflow,
  .hero-card--stat { position: relative; transform: none; margin-top: var(--space-14); }
  .hero-card--workflow { width: 100%; right: auto; top: auto; }
  .section       { padding: var(--section-py-sm) 0; }
  .section-head  { grid-template-columns: 1fr; gap: var(--space-9); }
  .services-grid { grid-template-columns: 1fr; }
  .stats-grid    { grid-template-columns: 1fr; }
  .stat          { border-right: none !important; border-bottom: var(--bw-hair) solid var(--border-inverse) !important; }
  .stat:last-child { border-bottom: none !important; }
  .nav-links     { display: none; }
  .footer-grid   { grid-template-columns: 1fr 1fr; }
  .footer-brand  { grid-column: 1 / -1; }
  .footer-bottom { gap: var(--space-6); }
  .policy-layout { grid-template-columns: 1fr; gap: var(--space-12); }
  .policy-meta   { position: relative; top: 0; }
  .phases        { grid-template-columns: 1fr; }
  .work-grid .work-right { flex-direction: column; }
  .pricing-grid  { grid-template-columns: 1fr; }
  .contact-grid  { grid-template-columns: 1fr; }
  .contact-form  { padding: var(--space-13); }
  .problem-list li { font-size: var(--fs-8); padding: var(--space-10) 0; }
  .principles-grid { grid-template-columns: 1fr; }
  .team-grid     { grid-template-columns: 1fr; }
  .about-stats   { grid-template-columns: 1fr; }
  .about-stats .stat-cell {
    border-right: none !important;
    border-bottom: var(--bw-hair) solid var(--border);
    padding: var(--space-11) 0 !important;
  }
  .about-stats .stat-cell:last-child { border-bottom: none; }
  .pull-quote { padding: var(--space-20) 0; }
  .archive-hero { padding-bottom: var(--space-20); }
  .archive-hero + .section--tight { padding-top: var(--space-13); }
  .archive-hero__stats { grid-template-columns: 1fr; }
  .archive-hero__stats .item {
    border-right: none;
    border-bottom: var(--bw-hair) solid var(--border);
    padding: var(--space-8) 0;
  }
  .archive-hero__stats .item:first-child { padding-top: 0; }
  .archive-hero__stats .item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .archive-grid { grid-template-columns: 1fr; }
  .archive-card--large { grid-column: auto; }
  .archive-card__body { padding: var(--space-10); }
  .archive-card__footer { flex-wrap: wrap; }
  .case-meta   { grid-template-columns: 1fr; }
  .case-meta .item {
    border-right: none !important;
    border-bottom: var(--bw-hair) solid var(--border);
    padding: var(--space-8) 0 !important;
  }
  .case-meta .item:last-child { border-bottom: none; }
  .case-next .next-name { font-size: var(--fs-15); }
  .case-testimonial .attribution { flex-wrap: wrap; }
  .service-row__visual { aspect-ratio: 16 / 9; }
}