/* =============================================
   RESET & CUSTOM PROPERTIES
============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- Brand constants ----
     Fixed by the Intellegens knjiga standarda (Barbara Slopko, 2021):
     #F77F00 orange, #111111 ink, #555555 grey, #DDDDDD line. Nothing below
     introduces a hue outside these four — light and dark differ only in which
     of them carries background, text and rule. */
  --brand-orange: #F77F00;
  --brand-ink:    #111111;
  --brand-grey:   #555555;
  --brand-line:   #DDDDDD;

  /* ---- Type ----
     Montserrat sets headings and the accent voice, Inter carries body copy,
     IBM Plex Mono is the companion face behind the {} code motif: eyebrows,
     numerals, chips. */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --heading-tracking: -0.035em;

  /* ---- Shape ---- */
  --r:        8px;
  --r-sm:     6px;
  --r-xs:     4px;
  --pad-card: 30px;
  --trans:    all 0.25s ease;

  /* One rhythm for every page opening: the home hero, the inner page headers
     and the project hero all start and close on the same spacing. The 74px is
     the fixed nav's height. */
  --header-pad-top:    calc(74px + clamp(3.5rem, 9vh, 5.5rem));
  --header-pad-bottom: clamp(3.25rem, 7vh, 5rem);

  /* ---- Dark mode (the default) ---- */
  --bg:             var(--brand-ink);
  --section-bg:     #1A1A1A;
  --section-alt-bg: #151515;
  --card-bg:        rgba(255,255,255,0.035);
  --card-bg-h:      rgba(255,255,255,0.06);
  --hover-surface:  rgba(255,255,255,0.05);

  --text:        #FFFFFF;
  --text-muted:  var(--brand-line);
  --text-dim:    #9A9A9A;

  /* Accent text, fills and display type all carry the one brand orange.
     There is deliberately no darkened variant anywhere in this sheet: in
     light mode small orange text trades AA contrast for brand fidelity. */
  --accent:         var(--brand-orange);
  --accent-ink:     var(--brand-orange);
  --accent-display: var(--brand-orange);
  --accent-hover:   #FFA23D;
  --accent-subtle: rgba(247,127,0,0.14);
  --accent-text:   var(--brand-ink);

  --border:        rgba(255,255,255,0.13);
  --border-strong: rgba(255,255,255,0.26);
  --border-o:      rgba(247,127,0,0.45);

  --nav-bg-solid: rgba(17,17,17,0.92);
  --hero-bg:      linear-gradient(168deg, #111111 0%, #1C1C1C 55%, #241A0C 100%);
  --hero-text:       #FFFFFF;
  --hero-text-muted: var(--brand-line);
  --hero-dots:       rgba(247,127,0,0.20);
  --hero-chip-border: rgba(255,255,255,0.18);

  /* The closing CTA inverts against the page in both modes — orange ground on
     dark, ink ground on light. */
  --cta-bg:         var(--brand-orange);
  --cta-text:       var(--brand-ink);
  --cta-text-muted: rgba(17,17,17,0.72);
  --cta-eyebrow:    var(--brand-ink);
  --cta-btn-bg:     var(--brand-ink);
  --cta-btn-text:   var(--brand-orange);

  --footer-bg: #0B0B0B;

  --shadow:   0 4px 32px rgba(0,0,0,0.45);
  --shadow-o: 0 0 60px rgba(247,127,0,0.10);

  --error:        #FF6B5E;
  --error-bg:     rgba(255,107,94,0.10);
  --error-border: rgba(255,107,94,0.35);

  /* The wordmark ships as ink-on-transparent artwork. Inverting flips the ink
     to white; the hue rotation puts the {} braces back to brand orange. */
  --logo-filter: invert(1) hue-rotate(180deg);
  --diagram-line: rgba(255,255,255,0.30);
}

:root[data-theme="light"] {
  --bg:             #FFFFFF;
  --section-bg:     #F4F4F4;
  --section-alt-bg: #FAFAFA;
  --card-bg:        #FFFFFF;
  --card-bg-h:      #FAFAFA;
  --hover-surface:  rgba(17,17,17,0.04);

  --text:        var(--brand-ink);
  --text-muted:  var(--brand-grey);
  --text-dim:    #7A7A7A;

  /* Light mode keeps the same pure brand orange for accent text as dark mode
     does. #F77F00 on white is 2.6:1, below AA for small text; the darkened
     tint that met AA read as brown, and keeping the brand hue won. */
  --accent:         var(--brand-orange);
  --accent-ink:     var(--brand-orange);
  --accent-display: var(--brand-orange);
  --accent-hover:   #FFA23D;
  --accent-subtle: rgba(247,127,0,0.10);
  --accent-text:   var(--brand-ink);

  --border:        var(--brand-line);
  --border-strong: #BEBEBE;
  --border-o:      rgba(247,127,0,0.55);

  --nav-bg-solid: rgba(255,255,255,0.92);
  --hero-bg:      linear-gradient(168deg, #FFFFFF 0%, #F5F5F5 58%, #FCF3E8 100%);
  --hero-text:       var(--brand-ink);
  --hero-text-muted: var(--brand-grey);
  --hero-dots:       rgba(247,127,0,0.17);
  --hero-chip-border: var(--brand-line);

  --cta-bg:         var(--brand-ink);
  --cta-text:       #FFFFFF;
  --cta-text-muted: var(--brand-line);
  --cta-eyebrow:    var(--brand-orange);
  --cta-btn-bg:     var(--brand-orange);
  --cta-btn-text:   var(--brand-ink);

  --footer-bg: #F4F4F4;

  --shadow:   0 4px 28px rgba(17,17,17,0.10);
  --shadow-o: 0 0 50px rgba(247,127,0,0.10);

  --error:        #B3261E;
  --error-bg:     rgba(179,38,30,0.07);
  --error-border: rgba(179,38,30,0.30);

  --logo-filter: none;
  --diagram-line: #B4B4B4;
}

/* ---- Legacy aliases ----
   The rest of this sheet was written against the POC's token names. Mapping
   them onto the brand tokens above means every existing rule follows the
   active mode without being rewritten. Prefer the brand names in new code. */
:root {
  --bg-0:      var(--bg);
  --bg-1:      var(--section-bg);
  --bg-2:      var(--section-alt-bg);
  --bg-card:   var(--card-bg);
  --orange:    var(--accent);
  --orange-l:  var(--accent-hover);
  --text-0:    var(--text);
  --text-1:    var(--text-muted);
  --text-2:    var(--text-muted);
  --text-3:    var(--text-dim);
  --green:     var(--accent-ink);
  --lime:      var(--accent-ink);
  /* The POC lit the hero with an orange bloom and an indigo counter-glow.
     Indigo is off-brand, so it is retired; the bloom stays, much quieter. */
  --orange-glow: rgba(247,127,0,0.10);
  --blue-glow:   transparent;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  text-wrap: balance;
}
h1, h2 { letter-spacing: var(--heading-tracking); }

/* Montserrat ships up to 800; the POC asked for 900 in a dozen places and the
   browser would synthesise it. Cap the whole sheet at the real top weight. */
h1, h2, .section-title, .page-header h1 { font-weight: 700; }
h3, h4, h5, h6 { font-weight: 600; }

p, li, td, th, label, input, select, textarea, button {
  font-family: var(--font-body);
}

img { display: block; max-width: 100%; }
a { color: inherit; }
mark { background: none; }
[hidden] { display: none !important; }

/* Skip link */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--accent); color: var(--accent-text);
  padding: 0.5rem 1rem; border-radius: var(--r-xs);
  font-weight: 700; text-decoration: none; z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* =============================================
   UTILITIES
============================================= */
.container { max-width: 1264px; margin: 0 auto; padding: 0 2rem; }

.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-display);
  margin-bottom: 0.875rem;
}
.tag.center { justify-content: center; }

/* The {} pair from the wordmark, standing in for bullets and numbering.
   The glyphs are the logo's own bracket artwork, masked so they take any
   colour; --bracket-l / --bracket-r are set on <body> (they carry the base
   path). The artwork is 442x992, so width derives from height. */
.brace-mark {
  display: inline-flex; align-items: center; gap: 0.2em;
  font-size: 1rem;
}
/* In the hero proof list and the architecture diagram the pair sits right
   beside running text, so it shrinks to read as a bullet instead of
   competing with the copy. */
.proof-list .brace-mark,
.arch-layer .brace-mark {
  font-size: 0.6rem;
  height: 1rem;
  align-content: center;
}
.brace-mark i {
  display: block;
  height: 1em; aspect-ratio: 442 / 992;
  background: var(--accent-display);
  -webkit-mask: var(--bracket-l) center / contain no-repeat;
          mask: var(--bracket-l) center / contain no-repeat;
}
.brace-mark .brace-r {
  -webkit-mask-image: var(--bracket-r);
          mask-image: var(--bracket-r);
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600; font-size: 1rem;
  padding: 0.9375rem 1.875rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: var(--trans);
  border: 2px solid transparent;
  cursor: pointer;
}
/* Hover is a colour change only — the same idiom as every other control; no
   float or glow. */
.btn-primary:hover {
  background: var(--accent-hover);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: transparent;
  color: var(--text);
  font-weight: 600; font-size: 1rem;
  padding: 0.9375rem 1.875rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: var(--trans);
  border: 1.5px solid var(--border-strong);
  cursor: pointer;
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--hover-surface);
}
.btn-ghost:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.btn-sm {
  padding: 0.55rem 1.125rem;
  font-size: 0.85rem;
}

/* Scroll animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { opacity: 0; }
.fade-up.in {
  animation: fadeInUp 0.65s ease both;
}
.fade-up.in:nth-child(2) { animation-delay: 0.08s; }
.fade-up.in:nth-child(3) { animation-delay: 0.16s; }
.fade-up.in:nth-child(4) { animation-delay: 0.24s; }
.fade-up.in:nth-child(5) { animation-delay: 0.32s; }
.fade-up.in:nth-child(6) { animation-delay: 0.40s; }


/* =============================================
   NAVIGATION
============================================= */
/* The border is always there (transparent at the top) and only colours are
   transitioned — transitioning `all` made the bar twitch when the backdrop
   blur and the border popped in at the scroll threshold. */
#nav {
  position: fixed; top: 0; width: 100%; z-index: 9000;
  height: 74px; display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
#nav > .container { width: 100%; }
#nav.scrolled {
  background: var(--nav-bg-solid);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
/* The mark itself is sized in the BRAND MARK section below; this only places
   it. The POC set the wordmark in type — see .nav-logo-img for what replaced
   that. */
.nav-logo {
  display: flex; align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-links {
  display: flex; align-items: center; gap: 1.75rem;
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  color: var(--text-2);
  font-size: 0.9375rem; font-weight: 500;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--text-0); }
.nav-links a[aria-current="page"] {
  color: var(--orange);
}
.nav-cta {
  background: var(--orange) !important;
  color: var(--accent-text) !important;
  padding: 0.6875rem 1.375rem !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--accent-hover) !important; color: var(--accent-text) !important; }

.nav-burger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 0.4rem;
  background: none; border: none;
  flex-shrink: 0;
}
.nav-burger span {
  display: block; width: 22px; height: 2px;
  background: var(--text-0); border-radius: 2px;
  transition: var(--trans);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-links.open {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--nav-bg-solid);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  gap: 0.875rem;
}
.nav-links.open .nav-cta {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* =============================================
   SECTIONS (shared)
============================================= */
section { padding: clamp(4.5rem, 9vw, 6.875rem) 0; }
.alt-bg { background: var(--bg-1); }

.section-header { margin-bottom: 3.25rem; }
/* Heading on the left, a single "see everything" link opposite it. */
.section-header-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; flex-wrap: wrap;
}
.section-header-row .section-header { margin-bottom: 3.25rem; }
.section-header-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.97rem; font-weight: 600;
  color: var(--accent-ink); text-decoration: none;
  white-space: nowrap; margin-bottom: 3.5rem;
  transition: color 0.2s;
}
.section-header-link:hover { color: var(--accent); }
.section-header-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.section-header.center { text-align: center; }
.section-header.center .section-desc { margin: 0 auto; }

.section-title {
  font-size: clamp(1.875rem, 3.6vw, 2.875rem);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.025em; margin-bottom: 0;
}
/* The accent half of a heading is set in italic and recoloured; it keeps the
   weight of the title it sits in. */
.section-title em {
  font-style: italic; font-weight: inherit;
  color: var(--accent-display);
}
.section-desc {
  font-size: 1.0625rem; color: var(--text-muted);
  line-height: 1.65; max-width: 620px;
  margin-top: 1.125rem;
  text-wrap: pretty;
}
.section-desc strong { color: var(--text); font-weight: 600; }

/* =============================================
   PAGE HEADER (inner pages)
============================================= */
.page-header {
  padding: var(--header-pad-top) 0 var(--header-pad-bottom);
  position: relative; overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute; top: -30%; right: -10%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--orange-glow) 0%, transparent 65%);
  pointer-events: none;
}
.page-header .hero-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--hero-dots) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
.page-header > .container { position: relative; z-index: 1; }
.page-header {
  background: var(--hero-bg);
  color: var(--hero-text);
}
.page-header h1 {
  font-size: clamp(2.125rem, 4.5vw, 3.5rem);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -0.035em; margin-bottom: 1.25rem;
  color: var(--hero-text);
}
.page-header h1 em {
  font-style: italic; font-weight: inherit;
  color: var(--accent-display);
}
.page-header .lead {
  font-size: 1.0625rem; color: var(--hero-text-muted);
  line-height: 1.65; max-width: 620px;
  text-wrap: pretty;
}

/* =============================================
   HERO (homepage)
============================================= */
#hero {
  padding: var(--header-pad-top) 0 var(--header-pad-bottom);
  position: relative; overflow: hidden;
}
#hero::before {
  content: '';
  position: absolute; top: -20%; right: -15%;
  width: 900px; height: 900px;
  background: radial-gradient(circle, var(--orange-glow) 0%, transparent 65%);
  pointer-events: none;
}
.hero-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--hero-dots) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none; z-index: 0;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
#hero::after {
  content: '';
  position: absolute; bottom: -10%; left: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--blue-glow) 0%, transparent 65%);
  pointer-events: none;
}
#hero > .container { position: relative; z-index: 1; }
.hero-content { position: relative; z-index: 1; }
#hero {
  background: var(--hero-bg);
  color: var(--hero-text);
}
#hero h1 {
  font-size: clamp(2.375rem, 5.6vw, 4.625rem);
  font-weight: 700; line-height: 1.06;
  letter-spacing: -0.035em; margin-bottom: 0;
  color: var(--hero-text);
  max-width: 940px;
  text-wrap: balance;
}
/* Underlining the text itself (rather than an absolutely positioned bar)
   keeps the accent tracking the words when the headline wraps. */
#hero h1 .h-accent { color: inherit; }
.hero-sub {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.6;
  color: var(--hero-text-muted); max-width: 620px;
  margin: 1.625rem 0 2.375rem;
  text-wrap: pretty;
}
.hero-actions {
  display: flex; gap: 0.875rem; flex-wrap: wrap;
  margin-bottom: 0;
}

/* =============================================
   MARQUEE
============================================= */
.marquee-section {
  background: var(--section-bg);
  padding: 2.75rem 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.marquee-label {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-muted); margin-bottom: 1.625rem;
}
/* Fade the strip out at both edges so marks do not pop at the boundary. */
.marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex; gap: 3.5rem; align-items: center;
  animation: marquee 110s linear infinite;
  width: max-content;
}
/* The strip holds two copies of the client list, so half its width is exactly
   one full set. Running -50% -> 0 drifts the marks rightwards and lands on an
   identical frame, so the loop has no visible seam. */
@keyframes marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.marquee-item {
  font-size: 1.15rem; font-weight: 700;
  color: var(--text-3); white-space: nowrap;
  letter-spacing: -0.01em; transition: color 0.25s;
}
.marquee-item:hover { color: var(--text-1); }
.marquee-sep { color: var(--border); }

/* =============================================
   WHO WE HELP
============================================= */
.who-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.who-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: 2.5rem;
  position: relative; overflow: hidden;
  transition: var(--trans);
}
.who-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-l));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}
.who-card:hover { border-color: var(--border-o); transform: translateY(-5px); box-shadow: var(--shadow), var(--shadow-o); }
.who-card:hover::after { transform: scaleX(1); }
.who-icon {
  width: 52px; height: 52px;
  background: var(--accent-subtle);
  border: 1px solid var(--border-o);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1.5rem;
}
.who-card h3 {
  font-size: 1.35rem; font-weight: 600;
  line-height: 1.25; letter-spacing: -0.025em; margin-bottom: 0.875rem;
}
.who-card p { color: var(--text-2); line-height: 1.7; margin-bottom: 1.5rem; font-size: 0.95rem; }
.link-arrow {
  color: var(--accent-ink); text-decoration: none;
  font-weight: 700; font-size: 0.875rem;
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: color 0.2s;
}
.link-arrow:hover { color: var(--accent); }
.link-arrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 2px; }

/* =============================================
   SERVICES GRID
============================================= */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.service-card {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: 2rem;
  transition: var(--trans); position: relative;
}
.service-card:hover {
  border-color: var(--border-o);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.svc-num {
  font-size: 0.7rem; font-weight: 700;
  color: var(--orange); letter-spacing: 0.08em; margin-bottom: 1.25rem;
}
.svc-icon {
  width: 44px; height: 44px;
  color: var(--orange); margin-bottom: 1.25rem; stroke-width: 1.4;
}
.service-card h3 {
  font-size: 1.1rem; font-weight: 600;
  margin-bottom: 0.625rem; letter-spacing: -0.015em;
}
.service-card p { color: var(--text-2); font-size: 0.875rem; line-height: 1.7; }

/* =============================================
   TECH STACK
============================================= */
.tech-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.875rem;
}
.tech-grid > li { display: flex; }
.tech-item {
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.125rem;
  display: flex; align-items: center; gap: 0.8125rem;
  text-decoration: none;
  transition: var(--trans);
}
.tech-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tech-item:hover { border-color: var(--accent); background: var(--card-bg-h); }
.tech-item:hover span:last-child { color: var(--accent-ink); }
/* Drawn as a mask so the mark takes the page's ink instead of its own brand
   colours — the same treatment as the client wordmarks in the strip. */
.tech-icon {
  width: 26px; height: 26px; flex-shrink: 0;
  background: var(--text-muted);
  transition: background-color 0.25s;
  -webkit-mask-image: var(--icon);
          mask-image: var(--icon);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.tech-item:hover .tech-icon { background: var(--accent); }
.tech-item span {
  font-size: 0.97rem; font-weight: 500; color: var(--text);
  line-height: 1.3; text-align: left;
}

/* =============================================
   VALUES
============================================= */
.values-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: start;
}
.values-list { margin-top: 2.5rem; }
.value-row {
  padding: 1.625rem 0;
  border-top: 1px solid var(--border);
}
.value-row:last-child { border-bottom: 1px solid var(--border); }
.value-row-head {
  display: flex; justify-content: space-between; align-items: center;
}
.value-name {
  display: flex; align-items: center; gap: 1rem;
  font-size: 1.05rem; font-weight: 700;
}
.v-num { font-size: 0.7rem; font-weight: 700; color: var(--orange); letter-spacing: 0.08em; }
.value-text { color: var(--text-2); font-size: 0.875rem; line-height: 1.75; margin-top: 0.75rem; }
.values-right { position: sticky; top: 8rem; }
.big-quote {
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  font-weight: 700; line-height: 1.4;
  letter-spacing: -0.025em; margin-bottom: 2rem;
}
.big-quote em { font-style: normal; color: var(--orange); }
.founder-box {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.75rem;
}
.founder-box p { color: var(--text-2); font-size: 0.875rem; line-height: 1.75; }
.founder-box cite {
  display: block; margin-top: 1rem;
  font-style: normal; font-size: 0.875rem;
  font-weight: 700; color: var(--orange);
}

/* =============================================
   CASE STUDY CARDS
============================================= */
.cases-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.25rem;
}
.case-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--pad-card);
  display: flex; flex-direction: column;
  position: relative;
  transition: var(--trans);
}
.case-card:hover { border-color: var(--accent); background: var(--card-bg-h); }
/* The whole card is the target; the heading keeps the real link so the
   accessible name and the tab stop stay on the title — same pattern as the
   /projects/ index rows. */
.case-card h3 a::after { content: ''; position: absolute; inset: 0; }
.case-chips {
  display: flex; flex-wrap: wrap; gap: 0.4375rem; margin-bottom: 1rem;
}
/* Who and when, on one line. Only `.case-excerpt` absorbs the card's slack —
   this row must never stretch, or the client name drifts down the card. */
.case-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  flex: 0 0 auto;
  gap: 0.75rem; margin-bottom: 0.5rem;
}
.case-meta .case-client {
  font-size: 0.94rem; font-weight: 600; color: var(--text-muted);
}
.case-meta .case-year {
  font-family: var(--font-mono);
  font-size: 0.82rem; color: var(--text-muted); white-space: nowrap;
}
.case-more {
  display: inline-flex; align-items: center; gap: 0.375rem;
  margin-top: 1rem;
  font-size: 0.94rem; font-weight: 600;
  color: var(--accent-ink); text-decoration: none;
}
.chip {
  background: var(--accent-subtle);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 500;
  padding: 0.25rem 0.5625rem;
  border-radius: calc(var(--r) * 0.4);
}
.chip.neutral {
  background: var(--hover-surface);
  border-color: var(--border);
  color: var(--text-2);
}
.case-card h3 {
  font-size: 1.3125rem; font-weight: 600;
  line-height: 1.28; letter-spacing: -0.015em; margin-bottom: 0.875rem;
}
.case-card .case-excerpt {
  color: var(--text-muted); font-size: 1rem; line-height: 1.65; flex: 1;
}

/* Filter bar */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem;
}
.filter-btn {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 0.45rem 1rem; border-radius: 100px;
  font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: var(--trans);
}
.filter-btn:hover { border-color: var(--border-o); color: var(--text-1); }
.filter-btn.active {
  background: var(--accent-subtle);
  border-color: var(--border-o);
  color: var(--accent-ink);
}
.filter-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* =============================================
   TESTIMONIALS
============================================= */
.testi-quote {
  color: var(--text); font-size: 1rem;
  line-height: 1.62; flex: 1;
}
.testi-author {
  display: flex; align-items: center; gap: 0.875rem;
  padding-top: 1rem; border-top: 1px solid var(--border);
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-subtle);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem; color: var(--orange);
  flex-shrink: 0;
}
.author-name { display: block; font-size: 0.875rem; font-weight: 700; }
.author-company { display: block; font-size: 0.75rem; color: var(--text-3); margin-top: 0.1rem; }

/* =============================================
   PROCESS STEPS
============================================= */
.process-list {
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.process-list::before {
  content: '';
  position: absolute; left: 19px; top: 0; bottom: 0;
  width: 2px; background: var(--border);
}
.process-step {
  display: flex; gap: 2rem;
  padding: 2rem 0;
  position: relative;
}
.step-num {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: var(--orange);
  position: relative; z-index: 1;
  transition: var(--trans);
}
.process-step:hover .step-num {
  background: var(--accent-subtle);
  border-color: var(--border-o);
}
.step-content { flex: 1; padding-top: 0.4rem; }
.step-content h3 {
  font-size: 1.05rem; font-weight: 600;
  margin-bottom: 0.5rem; letter-spacing: -0.015em;
}
.step-content p { color: var(--text-2); font-size: 0.875rem; line-height: 1.75; }

/* =============================================
   CONTACT FORM
============================================= */
/* The page header above already closes with its own padding. */
.contact-section { padding-top: 2.5rem; }
.contact-layout {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 3.5rem; align-items: start;
}
/* The channels sit two across so the list stays shallow. */
.contact-info {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.5rem; align-content: start;
}
.contact-info .contact-item { margin-bottom: 0; }
.contact-company {
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 600; color: var(--text-0);
  margin-bottom: 0.25rem;
}
.contact-address {
  font-size: 0.85rem; color: var(--text-2);
  line-height: 1.7; margin-bottom: 1rem;
  font-style: normal;
}
.contact-address-block:last-child .contact-address { margin-bottom: 0; }
.contact-info h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 1rem; }
.contact-info h2 em { font-style: normal; color: var(--orange); }
.contact-info p { color: var(--text-2); line-height: 1.75; margin-bottom: 2rem; font-size: 0.95rem; }
.contact-item {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-bottom: 1.5rem;
}
.contact-item-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--accent-subtle); border: 1px solid var(--border-o);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.contact-item-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 700; }
.contact-item-value { font-size: 0.9rem; color: var(--text-1); margin-top: 0.2rem; }
.contact-item-value a { text-decoration: none; color: var(--accent-ink); }
.contact-item-value a:hover { text-decoration: underline; }

.contact-form-wrap {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: 2.5rem;
}
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block; font-size: 0.8rem; font-weight: 700;
  color: var(--text-2); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 0.75rem 1rem;
  color: var(--text-0); font-family: inherit; font-size: 0.9rem;
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-3); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select { appearance: none; cursor: pointer; }
.form-error {
  font-size: 0.78rem; color: var(--error); margin-top: 0.3rem;
  display: none;
}
.form-group.has-error input,
.form-group.has-error textarea {
  border-color: var(--error);
}
.form-group.has-error .form-error { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-success {
  text-align: center; padding: 2rem 0;
}
.form-success .success-icon { font-size: 3rem; margin-bottom: 1rem; }
.form-success h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.form-success p { color: var(--text-2); font-size: 0.9rem; }
.form-divider {
  text-align: center; color: var(--text-3);
  font-size: 0.8rem; font-weight: 600;
  margin: 1.5rem 0;
  position: relative;
}
.form-divider::before, .form-divider::after {
  content: '';
  position: absolute; top: 50%;
  width: calc(50% - 1.5rem); height: 1px;
  background: var(--border);
}
.form-divider::before { left: 0; }
.form-divider::after { right: 0; }
.calendly-link {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 1rem 1.5rem;
  text-decoration: none; color: var(--text-0);
  font-weight: 700; transition: var(--trans);
}
.calendly-link:hover { border-color: var(--border-o); color: var(--orange); }

/* Audience selector */
.audience-selector {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.aud-btn {
  padding: 0.45rem 0.875rem; border-radius: 100px;
  border: 1px solid var(--border); background: var(--bg-0);
  color: var(--text-2); font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: var(--trans);
}
.aud-btn:hover { border-color: var(--border-o); color: var(--text-1); }
.aud-btn.active { background: var(--accent-subtle); border-color: var(--border-o); color: var(--accent-ink); }
.aud-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* =============================================
   FAQ
============================================= */
.faq-list { max-width: 760px; }
.faq-item {
  border-top: 1px solid var(--border);
  padding: 1.25rem 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%; background: none; border: none;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text-0); font-size: 0.95rem; font-weight: 700;
  cursor: pointer; text-align: left; gap: 1rem;
  padding: 0;
}
.faq-question:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.faq-icon {
  width: 24px; height: 24px; flex-shrink: 0;
  background: var(--accent-subtle); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange); font-size: 1rem; font-weight: 700;
  transition: var(--trans);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  color: var(--text-2); font-size: 0.875rem; line-height: 1.8;
  max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease;
  padding-top: 0;
}
.faq-item.open .faq-answer { max-height: 300px; padding-top: 1rem; }

/* =============================================
   CTA BANNER
============================================= */
.cta-wrap {
  background: var(--cta-bg);
  position: relative; overflow: hidden;
}
.cta-wrap > .container { position: relative; z-index: 1; }
.cta-wrap .tag { color: var(--cta-eyebrow); }
.cta-wrap .section-title { color: var(--cta-text); }
.cta-wrap .section-title em { color: var(--cta-text); }
.cta-wrap .section-desc,
.cta-wrap .section-desc p { color: var(--cta-text-muted); }
/* The banner inverts its ground, so bold text takes the banner's own ink —
   the page-level `--text` would be white-on-orange here in dark mode. */
.cta-wrap .section-desc strong { color: var(--cta-text); }
.cta-wrap .btn-primary {
  background: var(--cta-btn-bg);
  color: var(--cta-btn-text);
}
.cta-wrap .btn-primary:hover {
  background: var(--cta-btn-bg);
  filter: brightness(1.15);
  box-shadow: none;
}
/* The bracket motif from the logo, oversized and barely there. */
.cta-wrap::after {
  content: '';
  position: absolute; top: -22%; right: 2%;
  height: 32rem; aspect-ratio: 442 / 992;
  background: var(--cta-eyebrow); opacity: 0.07;
  pointer-events: none;
  -webkit-mask: var(--bracket-r) center / contain no-repeat;
          mask: var(--bracket-r) center / contain no-repeat;
}
.cta-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.cta-inner .section-desc { max-width: 100%; margin: 1.125rem auto 2.5rem; }
.cta-checks {
  display: flex; justify-content: center;
  flex-wrap: wrap; gap: 1.5rem; margin-top: 1.75rem;
}
.cta-check {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; color: var(--text-2);
}
.cta-check .ok { color: var(--green); font-weight: 700; }

/* Stat callouts */
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin: 3rem 0;
}
.stat-box {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.75rem;
  text-align: center;
}
.stat-box .big-num {
  font-size: 2.5rem; font-weight: 700;
  letter-spacing: -0.04em; color: var(--orange); line-height: 1;
}
.stat-box .stat-label { font-size: 0.8rem; color: var(--text-2); margin-top: 0.375rem; }

/* =============================================
   FOOTER
============================================= */
footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--border);
  padding: 4rem 0 2rem;
}
.footer-top {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.2fr;
  gap: 3rem; padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}
.footer-brand p {
  font-size: 0.85rem; color: var(--text-3);
  line-height: 1.75; max-width: 280px; margin-top: 1rem;
}
.footer-col h5 {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-3); margin-bottom: 1.25rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a {
  text-decoration: none; color: var(--text-2);
  font-size: 0.85rem; transition: color 0.2s;
}
.footer-col a:hover { color: var(--text-0); }
.footer-address {
  font-size: 0.8rem; color: var(--text-3);
  line-height: 1.8; margin-top: 1.25rem;
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 2rem; flex-wrap: wrap; gap: 0.75rem;
}
.footer-bottom p, .footer-bottom span {
  font-size: 0.78rem; color: var(--text-3);
}

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width: 1100px) {
  .tech-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-sub, .hero-actions { text-align: center; }
  .hero-stats { justify-content: center; }
  .hero-actions { justify-content: center; }
  .hero-split { grid-template-columns: 1fr 1fr; }
  .section-desc { max-width: 100%; }
  .who-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-grid { grid-template-columns: repeat(3, 1fr); }
  .values-layout { grid-template-columns: 1fr; gap: 3rem; }
  .values-right { position: static; }
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
  .tech-header-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  section { padding: 4rem 0; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .services-grid { grid-template-columns: 1fr; }
  /* Two shrink-safe columns: `1fr` alone cannot go below the tiles'
     min-content, and three of those force the page wider than the phone. */
  .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-item { min-width: 0; }
  .cases-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .hero-split { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero-stats { flex-direction: column; gap: 1.25rem; align-items: center; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================
   A11Y UTILITY
============================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =============================================
   HERO PROOF STACK
   The "Proof stack" bullets from home.md, set as a numbered row under a rule
   at the foot of the hero.
============================================= */
.proof-stack {
  position: relative; z-index: 1;
  margin-top: clamp(3.5rem, 7vh, 5.25rem);
  padding-top: 2rem;
  border-top: 1px solid var(--hero-chip-border);
}
.proof-heading {
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-display);
  margin-bottom: 1.375rem;
}
.proof-list {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.75rem;
}
.proof-list li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: 1rem; line-height: 1.6;
  color: var(--hero-text-muted);
  text-wrap: pretty;
}
.proof-list .proof-index {
  display: inline-flex;
  padding-top: 0.32rem;
  flex-shrink: 0;
}
/* html.mjs wraps a leading figure ("98.5%") in .proof-num. The design sets
   those inline with the sentence, so it gets no treatment of its own here. */
.proof-list .proof-num { font: inherit; color: inherit; }
.proof-list strong { color: var(--hero-text); font-weight: 600; }

/* =============================================
   HELP GRID ("We can help you if" — home.md)
============================================= */
/* One block with ruled cells. Each cell draws its own right and bottom rule
   and the container clips the outermost ones, so the grid needs no special
   casing for the last column or row. */
.help-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card-bg);
}
.help-card {
  padding: var(--pad-card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.help-card p.help-num {
  display: inline-flex;
  margin-bottom: 0;
}
.help-card h3 {
  font-size: 1.22rem; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.01em;
  margin: 0.875rem 0 0.75rem;
}
.help-card p { color: var(--text-muted); line-height: 1.65; font-size: 1rem; }
.help-card p strong { color: var(--text); font-weight: 600; }

/* =============================================
   TESTIMONIAL CAROUSEL
   home.md: "three per screen and then they rotate".
   Slides are built from however many project testimonials exist.
============================================= */
.testi-carousel { position: relative; }
.testi-viewport { overflow: hidden; }
.testi-track {
  display: flex; gap: 1.25rem;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
/* Three across on desktop, two on tablet, one on phone. The JS reads the
   real measured widths, so pages-per-view follows whatever CSS says here. */
.testi-item {
  flex: 0 0 calc((100% - 2.5rem) / 3);
  display: flex;
}
.testi-item > a.testi-card { width: 100%; }
a.testi-card {
  text-decoration: none; color: inherit;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--pad-card);
  display: flex; flex-direction: column; gap: 1.25rem;
  transition: var(--trans);
}
a.testi-card:hover { border-color: var(--accent); background: var(--card-bg-h); }
a.testi-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
/* The card opens with the brace-mark pair, same as the help cards. */
.testi-mark { display: inline-flex; }
.testi-project {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.94rem; font-weight: 600; color: var(--accent-ink);
}
.carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; margin-top: 2.5rem;
}
.carousel-arrow {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); cursor: pointer;
  transition: var(--trans);
}
.carousel-arrow:hover:not(:disabled) {
  border-color: var(--border-o); color: var(--orange);
  background: var(--accent-subtle);
}
.carousel-arrow:disabled { opacity: 0.3; cursor: default; }
.carousel-arrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.carousel-dots { display: flex; gap: 0.5rem; }
.carousel-dot {
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%; border: none;
  background: var(--border); cursor: pointer;
  transition: var(--trans);
}
.carousel-dot:hover { background: var(--text-3); }
.carousel-dot[aria-current="true"] {
  background: var(--orange); width: 26px; border-radius: 100px;
}
.carousel-dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.carousel-single .carousel-controls { display: none; }

/* =============================================
   TECH ITEM — text fallback for tools with no icon
============================================= */
.tech-item .tech-glyph {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: calc(var(--r) * 0.45);
  background: var(--hover-surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.69rem; font-weight: 700; color: var(--text-muted);
  transition: color 0.25s, background-color 0.25s;
}
.tech-item:hover .tech-glyph { color: var(--accent); }

/* =============================================
   PROJECT CARD — additions
============================================= */
/* Scoped past `.case-card > p`, which would otherwise win on specificity and
   hand the eyebrow the excerpt's size, colour and `flex: 1`. */
.case-card h3 a {
  text-decoration: none; color: var(--text-0);
  transition: color 0.2s;
}
.case-card:hover h3 a { color: var(--orange); }
.case-card h3 a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
.tech-grid { list-style: none; }
.marquee-section .marquee-label { margin-bottom: 1.5rem; }

/* =============================================
   PROSE — rendered markdown bodies
   (promoted from the POC's per-page inline .cs-body styles)
============================================= */
.prose { max-width: 760px; }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.025em; margin: 2.75rem 0 1rem;
  line-height: 1.25;
}
.prose h3 {
  font-size: 1.1rem; font-weight: 600;
  letter-spacing: -0.015em; margin: 2rem 0 0.75rem;
}
.prose p {
  color: var(--text-2); line-height: 1.85;
  margin-bottom: 1.125rem; font-size: 0.95rem;
}
.prose strong { color: var(--text-0); font-weight: 700; }
.prose em { color: var(--text-1); }
.prose ul, .prose ol {
  color: var(--text-2); font-size: 0.95rem; line-height: 1.85;
  padding-left: 1.5rem; margin-bottom: 1.25rem;
}
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--orange); }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--accent); }
.prose hr {
  border: none; border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}
.prose blockquote {
  border-left: 2px solid var(--orange);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 1.75rem 0;
  color: var(--text-1); font-size: 1.02rem; line-height: 1.75;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em; color: var(--lime);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 0.1rem 0.35rem;
}

/* =============================================
   PROJECT DETAIL LAYOUT
   (promoted from the POC's inline case-study.html styles)
============================================= */
.cs-layout {
  display: grid; grid-template-columns: 1fr 320px;
  gap: 4rem; align-items: start;
}
.cs-sidebar { position: sticky; top: 7rem; }
.sidebar-box {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.75rem; margin-bottom: 1.5rem;
}
.sidebar-box h2, .sidebar-box h3 {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-3); margin-bottom: 1rem;
}
.sidebar-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding: 0.7rem 0;
  border-top: 1px solid var(--border); font-size: 0.82rem;
}
.sidebar-row:first-of-type { border-top: none; padding-top: 0; }
.sidebar-row .label { color: var(--text-3); flex-shrink: 0; }
.sidebar-row .value { color: var(--text-1); font-weight: 600; text-align: right; }
.sidebar-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cs-testimonial {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--r);
  padding: 2rem; margin-top: 3rem;
}
.cs-testimonial .testi-quote {
  color: var(--text-1); font-size: 1rem; line-height: 1.8;
  font-style: italic; margin-bottom: 1.25rem;
}
.cs-testimonial cite {
  font-style: normal; font-size: 0.85rem;
  font-weight: 700; color: var(--orange);
}
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

/* =============================================
   ABOUT STORY SECTIONS
============================================= */
.story-list { display: flex; flex-direction: column; }
.story-section {
  display: grid; grid-template-columns: 4.5rem 1fr;
  gap: 2rem; padding: 3rem 0;
  border-top: 1px solid var(--border);
}
.story-section:first-child { border-top: none; padding-top: 0; }
/* The bracket pair where the numbering used to sit: oversized and faded,
   the same treatment as the numerals on the project pages. */
.story-num { padding-top: 0.3rem; }
.story-num .brace-mark { font-size: 1.75rem; opacity: 0.25; }
.story-body h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700; line-height: 1.25;
  letter-spacing: -0.03em; margin-bottom: 1.125rem;
}
.story-body .prose { max-width: 640px; }
.story-body .prose > h2 { display: none; }

/* =============================================
   ESTIMATE PAGE
============================================= */
.estimate-layout {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: 4rem; align-items: start;
}
.form-heading {
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.025em; margin-bottom: 0.875rem;
}
.form-intro-p {
  color: var(--text-muted); font-size: 0.95rem; line-height: 1.7;
  margin-bottom: 1.75rem; max-width: 56ch;
}
.page-header .lead p + p { margin-top: 0.875rem; }

/* "How it works" strip */
.estimate-steps { padding: clamp(3.25rem, 6vw, 4.75rem) 0; }
.steps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.step-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.75rem;
  transition: var(--trans);
}
.step-card:hover { border-color: var(--accent); background: var(--card-bg-h); }
/* The steps run in order, so they stay numbered rather than bracket-marked. */
.step-card .step-index {
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--accent-display);
}
.step-card h3 {
  font-size: 1.08rem; font-weight: 600;
  letter-spacing: -0.01em; margin: 0.875rem 0 0.5rem;
}
.step-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }

/* One-tap suggestions under the timeline and budget inputs. The buttons only
   fill the field, so typing a value of your own always works. */
.chip-picks { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

/* "Useful to think about" list in the sidebar */
.aside-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.aside-list li {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: 0.875rem; color: var(--text-muted); line-height: 1.6;
}
.aside-list .brace-mark { padding-top: 0.1rem; flex-shrink: 0; }

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr; }
}
.estimate-aside { position: sticky; top: 7rem; }
.book-box {
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-o);
  border-radius: var(--r); padding: 1.75rem; margin-bottom: 1.5rem;
}
.book-box h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; }
.book-box p { color: var(--text-2); font-size: 0.85rem; line-height: 1.7; margin-bottom: 1.25rem; }
.form-consent {
  display: flex; align-items: flex-start; gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.form-consent input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; flex-shrink: 0;
  margin-top: 0.15rem; accent-color: var(--orange);
}
.form-consent label {
  font-size: 0.82rem; color: var(--text-2);
  line-height: 1.65; text-transform: none;
  letter-spacing: 0; font-weight: 400; margin: 0;
}
.form-consent { flex-wrap: wrap; }
.form-consent .form-error { flex-basis: 100%; }
.form-consent.has-error .form-error { display: block; }
.form-consent.has-error input[type="checkbox"] { outline: 2px solid var(--error); outline-offset: 2px; }
.form-note {
  font-size: 0.8rem; color: var(--text-3);
  line-height: 1.7; margin-top: 1rem;
}
.form-fallback {
  background: var(--bg-0);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  padding: 1.25rem; margin-bottom: 1.5rem;
  font-size: 0.85rem; color: var(--text-2); line-height: 1.7;
}
.form-fallback a { color: var(--accent-ink); }
.form-status {
  font-size: 0.85rem; padding: 0.875rem 1rem;
  border-radius: var(--r-sm); margin-bottom: 1rem;
  display: none;
}
.form-status.is-error {
  display: block;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error);
}

/* =============================================
   FOOTER — company details + map (layout.md)
============================================= */
.footer-company {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem 3rem;
  padding-top: 2.5rem;
}
.footer-company .legal-block h6 {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-3); margin-bottom: 0.5rem;
}
.footer-company .legal-block p,
.footer-company .legal-block address {
  font-size: 0.8rem; color: var(--text-2);
  line-height: 1.75; font-style: normal;
}
.legal-row {
  display: flex; gap: 0.5rem;
  font-size: 0.8rem; line-height: 1.9;
}
.legal-row .legal-key { color: var(--text-3); min-width: 4.5rem; }
.legal-row .legal-val { color: var(--text-2); font-variant-numeric: tabular-nums; }
.footer-map {
  border-top: 1px solid var(--border);
  padding-top: 2.5rem; margin-top: 2.5rem;
}
.map-frame {
  border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  background: var(--bg-2);
  aspect-ratio: 21 / 6;
  min-height: 200px;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.35); }
.map-link { margin-top: 0.875rem; font-size: 0.8rem; }
.map-link a { color: var(--text-3); text-decoration: none; }
.map-link a:hover { color: var(--accent-ink); text-decoration: underline; }

/* =============================================
   NOT FOUND
============================================= */
.notfound {
  min-height: 70vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 9rem 0 5rem;
  position: relative; overflow: hidden;
}
/* Scoped with .notfound so it outranks the `.notfound p` colour below. */
.notfound .notfound-code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 12vw, 8rem); font-weight: 700;
  color: var(--orange); line-height: 1;
  letter-spacing: -0.04em; margin-bottom: 1rem;
  max-width: none;
}
.notfound h1 {
  font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700;
  letter-spacing: -0.03em; margin-bottom: 1rem;
}
.notfound p { color: var(--text-2); max-width: 460px; margin: 0 auto 2.25rem; line-height: 1.75; }
.notfound-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* =============================================
   RESPONSIVE — additions
============================================= */
@media (max-width: 1100px) {
  .help-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-grid { gap: 3rem; }
  .hero-visual { display: block; }
  .proof-card { max-width: 520px; margin: 0 auto; }
  .help-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-company { grid-template-columns: repeat(2, 1fr); }
  .testi-item { flex-basis: calc((100% - 1.25rem) / 2); }
  .cs-layout { grid-template-columns: 1fr; gap: 3rem; }
  .cs-sidebar { position: static; }
  .estimate-layout { grid-template-columns: 1fr; gap: 3rem; }
  .estimate-aside { position: static; }
  .story-section { grid-template-columns: 1fr; gap: 0.75rem; padding: 2.5rem 0; }
  .story-num { padding-top: 0; }
  .map-frame { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .help-grid { grid-template-columns: 1fr; }
  .contact-info { grid-template-columns: 1fr; }
  .testi-item { flex-basis: 100%; }
  /* One card per view, so let each hug its own quote instead of stretching to
     the tallest one and leaving a hole between the quote and the author. */
  .testi-track { align-items: flex-start; }
  .related-grid { grid-template-columns: 1fr; }
  .footer-company { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero-sub, .hero-actions { text-align: left; }
  .hero-actions { justify-content: flex-start; }
  .carousel-controls { gap: 1rem; }
}
@media (max-width: 480px) {
  /* Stacked hero buttons look ragged at their natural widths. */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { justify-content: center; }
}

/* =============================================
   BRAND MARK
   The wordmark ships as artwork (src/static/img/logo.png) rather than being
   set in type, so the {} lockup and its spacing stay exactly as drawn.
============================================= */
.nav-logo { gap: 0; }
.nav-logo-img {
  height: 30px; width: auto;
  display: block; flex-shrink: 0;
  filter: var(--logo-filter);
}
.footer-brand .nav-logo-img { height: 28px; }

/* =============================================
   THEME TOGGLE
   Sits between the nav links and the CTA. Both glyphs are shipped; CSS picks
   the one that names the mode you would be switching *to*.
============================================= */
.theme-toggle {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  padding: 0; cursor: pointer;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  transition: color 0.2s, border-color 0.2s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* =============================================
   CLIENT MARQUEE — logos
   Each wordmark is a single ink-on-transparent PNG used as a mask, so one
   file serves both themes and every mark reads at the same weight. Clients
   without artwork keep the text treatment.
============================================= */
.marquee-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-display);
}
.marquee-track { gap: 2.5rem; }
.marquee-track + .marquee-track { margin-top: 1.75rem; }
/* The second row drifts the opposite way, half a loop out of phase so the
   same mark is never stacked above itself. The delay is -(110s / 2). */
.marquee-track.reverse { animation-direction: reverse; animation-delay: -55s; }
/* The marks run a third larger than their original 20px strip. --logo-w was
   measured at 20px of height, so the box scales with the same factor and
   mask-size: contain keeps the artwork's own aspect. */
.marquee-logo {
  display: block;
  height: 26px;
  width: calc(var(--logo-w, 80px) * 1.3);
  flex-shrink: 0;
  background: var(--text-muted);
  opacity: 0.78;
  transition: opacity 0.25s, background-color 0.25s;
  -webkit-mask-image: var(--logo-src);
          mask-image: var(--logo-src);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.marquee-link { display: flex; align-items: center; text-decoration: none; }
.marquee-link:hover .marquee-logo { background: var(--accent); opacity: 1; }
.marquee-link:hover .marquee-item { color: var(--accent-ink); }
/* The strip drifts continuously, so hold it still while a mark is being aimed
   at — otherwise the link walks out from under the cursor. */
.marquee-track:hover { animation-play-state: paused; }
/* Vertical lockups need the extra height to stay legible next to wordmarks. */
.marquee-logo.tall { height: 62px; }
.marquee-logo.mid  { height: 39px; }
.marquee-sep { color: var(--accent); }

/* =============================================
   {} MOTIF
   The bracket artwork from the logo, blown up and set at the edges of the
   hero and page headers. Purely decorative — it hangs off .hero-dots, which
   is already aria-hidden.
============================================= */
.hero-dots::before,
.hero-dots::after {
  content: '';
  position: absolute;
  aspect-ratio: 442 / 992;
  background: var(--accent);
  pointer-events: none;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.hero-dots::before {
  -webkit-mask-image: var(--bracket-r); mask-image: var(--bracket-r);
  top: -14%; right: 1.5%;
  height: 32rem;
  opacity: 0.06;
}
.hero-dots::after {
  -webkit-mask-image: var(--bracket-l); mask-image: var(--bracket-l);
  bottom: -12%; left: 1.5%;
  height: 21rem;
  opacity: 0.05;
}
@media (max-width: 900px) {
  .hero-dots::before { height: 22rem; }
  .hero-dots::after  { height: 14rem; }
}

/* =============================================
   MONO DETAILS
   Numerals, eyebrows and labels take the companion face across the site.
============================================= */
.svc-num,
.v-num,
.card-eyebrow,
.legal-row,
.footer-company .legal-block h6,
.sidebar-box h2,
.sidebar-box h3,
.footer-col h5,
.contact-item-label,
.form-group label {
  font-family: var(--font-mono);
}
.footer-col h5,
.footer-company .legal-block h6,
.contact-item-label { letter-spacing: 0.12em; }

.avatar {
  font-family: var(--font-mono);
  color: var(--accent-ink);
  background: var(--accent-subtle);
}
.testi-quote { font-style: normal; }

/* The proof card is the hero's one solid surface; give it the card treatment
   rather than the POC's glow stack. */
.proof-card { box-shadow: var(--shadow); }
.proof-card::before { background: var(--accent); }

/* The wordmark is a wide lockup; give it less height once the nav collapses
   so it never crowds the burger. */
@media (max-width: 640px) {
  .nav-logo-img { height: 24px; }
}

/* =============================================
   PROJECT PAGE
   A write-up laid out as a sequence of bands rather than one column of prose.
   Every band past the narrative is optional and renders only when the project
   metadata carries its data — see build/pages/project.mjs.
============================================= */
.project-hero {
  background: var(--hero-bg);
  color: var(--hero-text);
  padding: var(--header-pad-top) 0 var(--header-pad-bottom);
  position: relative; overflow: hidden;
}
.project-hero > .container { position: relative; z-index: 1; }
.project-back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hero-text-muted); text-decoration: none;
  transition: color 0.2s;
}
.project-back:hover { color: var(--accent-ink); }
.project-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.project-hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
  margin-top: 2.25rem;
}
.project-eyebrow {
  display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-display);
  margin-bottom: 1.375rem;
}
.project-eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--hero-text-muted); opacity: 0.5;
}
.project-eyebrow .project-period {
  color: var(--hero-text-muted); font-weight: 400; letter-spacing: 0.1em;
}
.project-hero h1 {
  font-size: clamp(2.125rem, 4.6vw, 3.75rem);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -0.035em; margin: 0;
  color: var(--hero-text);
}
.project-hero .lead {
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  color: var(--hero-text-muted); line-height: 1.65;
  margin: 1.625rem 0 0; max-width: 560px;
  text-wrap: pretty;
}
.project-graphic-wrap { display: flex; justify-content: center; }
.project-graphic { width: 100%; max-width: 440px; display: block; overflow: visible; }

/* Facts read as one ruled block: the 1px gap is the border colour showing
   through from behind the cells. */
.fact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  margin-top: clamp(3rem, 7vh, 5rem);
  background: var(--hero-chip-border);
  border: 1px solid var(--hero-chip-border);
  border-radius: var(--r);
  overflow: hidden;
}
.fact-grid .fact { padding: 1.375rem 1.5rem; background: var(--bg); }
.fact-grid dt {
  font-family: var(--font-mono);
  font-size: 0.69rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--hero-text-muted);
}
.fact-grid dd {
  font-family: var(--font-heading);
  font-size: 1.03rem; font-weight: 600;
  color: var(--hero-text); margin: 0.5rem 0 0; line-height: 1.35;
}
/* Client name linking out to the client's own site. */
.fact-grid dd a {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--border-o);
  transition: color 0.2s, border-color 0.2s;
}
.fact-grid dd a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.fact-grid dd a svg { opacity: 0.65; flex-shrink: 0; }
.fact-grid dd a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Narrative ---- */
.project-narrative { padding: clamp(4.5rem, 11vw, 8rem) 0 0; }
.narrative-chapter {
  display: grid; grid-template-columns: 220px 1fr;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  margin-bottom: clamp(4rem, 9vw, 6.5rem);
}
.narrative-chapter:last-child { margin-bottom: 0; }
/* The label holds its place for as long as its chapter is on screen, so a
   chapter running over several sections still says what you are reading. */
.narrative-marker > .narrative-label { position: sticky; top: 7rem; display: block; }
.narrative-label {
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-display);
  text-wrap: balance;
}
.narrative-label::after {
  content: ''; display: block;
  width: 40px; height: 2px; margin-top: 0.875rem;
  background: var(--accent); opacity: 0.35;
}
.narrative-body { max-width: 680px; }
.narrative-body h2 {
  font-size: clamp(1.625rem, 2.9vw, 2.375rem);
  font-weight: 700; line-height: 1.18;
  letter-spacing: -0.025em; margin: 0 0 1.625rem;
}
/* Second and later sections of the same chapter open mid-column, so they need
   the separation the chapter gap would otherwise have given them. */
.narrative-body .prose + h2 { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.narrative-body .prose { max-width: none; }
.narrative-body .prose p {
  font-size: clamp(1.03rem, 1.15vw, 1.156rem);
  line-height: 1.78;
}
.narrative-body .prose > :first-child { margin-top: 0; }
.narrative-body .prose h3 { margin-top: 2.25rem; }

/* Seeded heat grid, used to close the narrative. */
.data-ribbon {
  display: grid;
  grid-template-columns: repeat(var(--ribbon-cols, 60), 1fr);
  grid-auto-rows: 10px; gap: 3px;
  margin-top: clamp(4rem, 9vw, 7rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.data-ribbon span { border-radius: 2px; background: var(--accent); }

/* ---- What we built ---- */
.project-delivered { padding: clamp(4.5rem, 11vw, 8rem) 0; }
.project-delivered .section-title { max-width: 640px; margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.delivered-row {
  display: grid; grid-template-columns: 92px 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
  padding: clamp(1.875rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--border);
}
.delivered-row:last-child { border-bottom: 1px solid var(--border); }
.delivered-num {
  font-family: var(--font-mono);
  font-size: clamp(1.875rem, 3.4vw, 2.875rem);
  font-weight: 700; line-height: 1;
  color: var(--accent); opacity: 0.22;
}
.delivered-row h3 {
  font-size: clamp(1.1875rem, 1.7vw, 1.4375rem);
  font-weight: 600; line-height: 1.3;
  letter-spacing: -0.015em; margin: 0;
}
.delivered-row p {
  font-size: 1.03rem; color: var(--text-muted);
  line-height: 1.72; margin: 0; text-wrap: pretty;
}

/* ---- Architecture ---- */
.arch-row {
  display: grid; grid-template-columns: 170px 1fr;
  gap: 1.75rem; align-items: center;
  padding: 1.625rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card-bg);
}
/* The connector between layers. */
.arch-row + .arch-row { margin-top: 1.625rem; position: relative; }
.arch-row + .arch-row::before {
  content: ''; position: absolute;
  top: -1.625rem; left: 50%; width: 1px; height: 1.625rem;
  background: var(--border-strong);
}
.arch-layer { display: flex; align-items: center; gap: 0.75rem; }
.arch-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.06rem; font-weight: 600;
  color: var(--text);
}
.arch-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- The client's own words, set between the logo's brackets ---- */
.project-testimonial { padding: clamp(4.5rem, 11vw, 8rem) 0; }
/* The brackets centre on the quote itself; the author line sits below, in
   the middle column, outside the enclosure. */
.project-quote {
  max-width: 960px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto;
  column-gap: clamp(1.25rem, 4vw, 2.75rem); row-gap: 0;
  align-items: center; text-align: center;
}
.project-quote figcaption { grid-column: 2; }
.quote-bracket {
  width: clamp(22px, 4vw, 40px); aspect-ratio: 442 / 992;
  background: var(--accent);
  -webkit-mask: var(--bracket-l) center / contain no-repeat;
          mask: var(--bracket-l) center / contain no-repeat;
}
.quote-bracket-r {
  -webkit-mask-image: var(--bracket-r);
          mask-image: var(--bracket-r);
}
.project-quote blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.3125rem, 2.3vw, 1.875rem);
  font-weight: 500; line-height: 1.45;
  letter-spacing: -0.02em; margin: 0;
  color: var(--text); text-wrap: balance;
}
.project-quote figcaption {
  font-size: 0.94rem; color: var(--text-muted); margin-top: 1.75rem;
}
.project-quote cite { font-style: normal; font-weight: 600; color: var(--text); }

@media (max-width: 900px) {
  .project-hero-grid { grid-template-columns: 1fr; }
  .project-graphic-wrap { order: -1; }
  .project-graphic { max-width: 320px; }
  .narrative-chapter { grid-template-columns: 1fr; gap: 1rem; }
  .narrative-marker > .narrative-label { position: static; }
  .narrative-label::after { display: none; }
  .delivered-row { grid-template-columns: 56px 1fr; }
  .delivered-row p { grid-column: 2; }
  .arch-row { grid-template-columns: 1fr; gap: 1rem; }
  .arch-row + .arch-row::before { left: 2rem; }
}
@media (max-width: 640px) {
  .data-ribbon { grid-auto-rows: 7px; gap: 2px; }
}

/* =============================================
   PROJECT INDEX (/projects/)
   Twelve write-ups to scan, not three to browse — so the listing is a ruled
   column rather than a card wall, and each row carries the project's own
   schematic. The variety between the drawings is what makes the column read
   as twelve distinct things.
============================================= */
.project-index { border-top: 1px solid var(--border); }
.index-row {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: clamp(1rem, 2.5vw, 1.875rem);
  align-items: center;
  padding: 1.625rem 2rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: var(--trans);
}
/* The link-out sits in its own column, vertically centred on the row. */
.index-row > .case-more { margin-top: 0; }
/* The whole row is the target; the heading keeps the real link so the
   accessible name and the tab stop stay on the title. */
.index-row h3 a::after {
  content: ''; position: absolute; inset: 0;
}
.index-row:hover { background: var(--hover-surface); }

.index-graphic {
  display: grid; place-items: center;
  padding: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card-bg);
  transition: var(--trans);
}
.index-graphic-svg { width: 100%; max-width: 108px; display: block; }
.index-row:hover .index-graphic { border-color: var(--accent); }

.index-meta {
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.index-meta .index-client { color: var(--accent-ink); }
.index-meta .index-year { color: var(--text-dim); font-weight: 400; }

.index-row h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  font-weight: 600; line-height: 1.28;
  letter-spacing: -0.015em; margin-bottom: 0.5rem;
  max-width: 38ch;
}
.index-row h3 a { text-decoration: none; color: var(--text); transition: color 0.2s; }
.index-row:hover h3 a { color: var(--accent-ink); }
.index-row h3 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

.index-excerpt {
  font-size: 1rem; color: var(--text-muted);
  line-height: 1.6; max-width: 66ch;
  margin-bottom: 0.875rem; text-wrap: pretty;
}
.index-chips { display: flex; flex-wrap: wrap; gap: 0.4375rem; }

/* The page header above already closes with its own padding, so the listing
   starts closer to the filter bar than the generic section rhythm would. */
.projects-listing { padding-top: 2.5rem; }

.index-empty { text-align: center; padding: 4rem 0; }
.index-empty h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.index-empty p { color: var(--text-muted); }
.index-empty a { color: var(--accent-ink); }

@media (max-width: 1000px) {
  .index-row { grid-template-columns: 112px 1fr auto; }
  .index-graphic-svg { max-width: 92px; }
}
@media (max-width: 700px) {
  /* The drawing goes full width above the text, so the title keeps a readable
     measure. */
  .index-row {
    grid-template-columns: 1fr;
    gap: 1.125rem;
    padding: 2rem 0;
  }
  .index-graphic { justify-self: start; width: 100%; max-width: 260px; }
  .index-graphic-svg { max-width: 160px; }
  .index-row h3 { max-width: none; }
}