/* ============================================================
   tokens.css — Blueprint Agency
   Design system — Surface & atmosphere pass
   Single source of truth for CSS variables, font loading,
   and the surface-context layer.
   See CLAUDE.md and docs/blueprint-surface-system-spec.md.
   ============================================================ */

/* ── FONT LOADING ── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400&family=Geist+Mono:wght@500&display=swap');

@font-face {
  font-family: 'Söhne';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/sohne-buch.woff2') format('woff2');
}

@font-face {
  font-family: 'Söhne';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/sohne-halbfett.woff2') format('woff2');
}

/* ── DESIGN TOKENS ── */

:root {

  /* PAGE BASE */
  --bg:           #02040A;
  --border:       #1e2028;

  /* TEXT */
  --text-high:    #F8FAFC;
  --text-mid:     #8B96BE;   /* deep blue-grey body */
  --text-muted:   #475569;

  /* BRAND */
  --blue:         #3C61EB;
  --blue-hover:   #3555d0;
  --sapphire:     #818CF8;
  --eyebrow-modules: #6E8BF5;   /* Modules page eyebrow accent — lighter blue (NOT sapphire) for the hero pill + four category eyebrows; CTA/briefing eyebrows stay --blue */

  /* ACCENT (default: blue context) */
  --accent:        var(--blue);
  --accent-border: rgba(60,97,235,0.2);

  /* GRADIENTS — applied to <em> in primary headlines only */
  --gradient-h:   linear-gradient(to bottom, #ffffff 0%, #3C61EB 100%);
  --gradient-btn: linear-gradient(to right,  #ffffff 0%, #3c61eb 100%);

  /* MASTER AXIS */
  --ml: 80px;

  /* FONTS */
  --sohne: 'Söhne', system-ui, sans-serif;
  --geist: 'Geist', system-ui, sans-serif;
  --mono:  'Geist Mono', monospace;

}

/* ── PAGE BASE ──
   Body is opaque base. Surfaces below carry their own bloom
   and own background. NodeCanvas has been removed.
   ─────────────────────────────────────────────────────────── */

body {
  background-color: var(--bg);
}

/* ── ENGAGE: SAPPHIRE ACCENT CONTEXT ──
   Engage uses sapphire as its accent across the whole page.
   The accent override must beat the per-surface accent default
   for dark sections, where the eyebrow still has to read
   sapphire on Engage. The blue signal band on Engage's #who
   block keeps its white accent because .surface-blue sets
   --accent itself.
   ─────────────────────────────────────────────────────────── */

body.page-engage {
  --accent: var(--sapphire);
  --accent-border: rgba(129,140,248,0.35);
}

body.page-engage .surface-dark {
  --accent: var(--sapphire);
  --accent-border: rgba(129,140,248,0.35);
}

/* ── SURFACE SYSTEM ──
   Five surfaces. Each sets role tokens (--surface, --ink, --body,
   --accent, --bloom, --headline-em). Each carries exactly one
   tuned directional bloom via ::before.
   ─────────────────────────────────────────────────────────── */

.surface-dark,
.surface-light,
.surface-blue,
.surface-sapphire,
.surface-grey {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface);
  color: var(--body);
}

.surface-dark::before,
.surface-light::before,
.surface-blue::before,
.surface-sapphire::before,
.surface-grey::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bloom);
  pointer-events: none;
  z-index: 0;
}

.surface-dark > *,
.surface-light > *,
.surface-blue > *,
.surface-sapphire > *,
.surface-grey > * {
  position: relative;
  z-index: 1;
}

.surface-dark {
  --surface:      #02040A;
  --ink:          #F8FAFC;
  --body:         #8B96BE;
  --accent:       var(--blue);
  --accent-border: rgba(60,97,235,0.2);
  --bloom: radial-gradient(ellipse 120% 55% at 50% -10%, rgba(60,97,235,0.30) 0%, transparent 56%);
  --headline-em: linear-gradient(to bottom, #ffffff 0%, #3C61EB 100%);
}

.surface-light {
  --surface:      #F8FAFC;
  --ink:          #0a0a0d;
  --body:         #5E626C;
  --accent:       var(--blue);
  --accent-border: rgba(60,97,235,0.25);
  --bloom: radial-gradient(ellipse 80% 60% at 82% -12%, rgba(60,97,235,0.12) 0%, transparent 55%);
  --headline-em: linear-gradient(to bottom, #0a0a0d 0%, #3C61EB 100%);
}

.surface-blue {
  --surface:      #3C61EB;
  --ink:          #FFFFFF;
  --body:         #E6EAFB;
  --accent:       #FFFFFF;
  --accent-border: rgba(255,255,255,0.4);
  --bloom: radial-gradient(ellipse 100% 65% at 50% -15%, rgba(255,255,255,0.20) 0%, transparent 55%);
  --headline-em: linear-gradient(to bottom, #ffffff 0%, #818CF8 100%);
}

.surface-sapphire {
  --surface:      #818CF8;
  --ink:          #02040A;
  --body:         #2E3349;
  --accent:       #02040A;
  --accent-border: rgba(2,4,10,0.3);
  --bloom: radial-gradient(ellipse 100% 65% at 50% -18%, rgba(255,255,255,0.26) 0%, transparent 55%);
  --headline-em: linear-gradient(to bottom, #02040A 0%, #02040A 100%);
}

.surface-grey {
  --surface:      #1e2028;
  --ink:          #F8FAFC;
  --body:         #8B96BE;
  --accent:       var(--sapphire);
  --accent-border: rgba(129,140,248,0.35);
  --bloom: radial-gradient(ellipse 110% 60% at 50% -12%, rgba(60,97,235,0.18) 0%, transparent 55%);
  --headline-em: linear-gradient(to bottom, #ffffff 0%, #3C61EB 100%);
}

/* ── HEADLINE GRADIENT — em only, surface-adapted ──
   Replaces the previous full-headline gradient.
   Whole headline reads as solid --ink; the emphasised word
   carries the surface-adapted gradient.
   ─────────────────────────────────────────────────────────── */

.surface-dark h1,    .surface-dark h2,
.surface-grey h1,    .surface-grey h2,
.surface-light h1,   .surface-light h2,
.surface-blue h1,    .surface-blue h2,
.surface-sapphire h1, .surface-sapphire h2,
.surface-dark .bp-headline, .surface-blue .bp-headline,
.surface-dark .problem-headline, .surface-light .problem-headline,
.surface-dark .dev-h2, .surface-light .dev-h2,
.surface-dark .form-q, .surface-blue .form-q,
.surface-dark .hw-title, .surface-light .hw-title {
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
          text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
}

.surface-dark h1 em, .surface-dark h2 em,
.surface-grey h1 em, .surface-grey h2 em,
.surface-light h1 em, .surface-light h2 em,
.surface-dark .bp-headline em,
.surface-dark .problem-headline em, .surface-light .problem-headline em,
.surface-dark .dev-h2 em, .surface-light .dev-h2 em,
.surface-dark .form-q em {
  background: var(--headline-em) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
          text-fill-color: transparent !important;
  font-style: normal;
  font-weight: 600;
}

/* Sapphire and blue surfaces keep em solid ink — emphasis from
   weight, not color. A white-to-sapphire gradient on a blue
   surface fades the lower line into the background. */
.surface-sapphire h1 em, .surface-sapphire h2 em,
.surface-blue h1, .surface-blue h2,
.surface-blue h1 em, .surface-blue h2 em,
.surface-blue .bp-headline, .surface-blue .bp-headline em,
.surface-blue .problem-headline, .surface-blue .problem-headline em,
.surface-blue .form-q, .surface-blue .form-q em {
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
          text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
}

/* ── SURFACE-LEVEL BODY COPY DEFAULTS ──
   Components that previously hardcoded --text-mid still read
   correctly on light/blue/sapphire because each surface
   redefines what --text-mid means inside its scope.
   ─────────────────────────────────────────────────────────── */

.surface-light {
  --text-mid: #5E626C;
  --text-high: #0a0a0d;
}

.surface-blue {
  --text-mid: #E6EAFB;
  --text-high: #FFFFFF;
}

.surface-sapphire {
  --text-mid: #2E3349;
  --text-high: #02040A;
}

.surface-grey {
  --text-mid: #8B96BE;
  --text-high: #F8FAFC;
}

/* ── EYEBROW ── route border to the accent-border token */

.eyebrow {
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

/* On the blue surface, CTAs invert to a white pill with blue text. */
.surface-blue .btn,
.surface-blue .bp-cta,
.surface-blue .dev-cta,
.surface-blue .submit-btn,
.surface-blue .nav-cta,
.surface-blue .member-email,
.surface-blue .cta-section .btn {
  background: #FFFFFF !important;
  color: var(--blue) !important;
}

/* ── PER-SURFACE COMPONENT OVERRIDES ──
   The inline page styles hardcode body colors as
   rgba(248,250,252, ...). On non-dark surfaces those would
   wash out. Map them to the role tokens here.
   ─────────────────────────────────────────────────────────── */

/* LIGHT surface */
.surface-light .section-body,
.surface-light .hw-body,
.surface-light .step-body,
.surface-light .faq-a p,
.surface-light .briefing-intro,
.surface-light .briefing-point-text,
.surface-light .hero-sub,
.surface-light .bp-body,
.surface-light .dev-body,
.surface-light .dev-proof-row,
.surface-light .member-bio,
.surface-light .collective-intro,
.surface-light .form-sub,
.surface-light .problem-sub { color: var(--body) !important; }

.surface-light .hw-title,
.surface-light .step-title,
.surface-light .member-name,
.surface-light .faq-q { color: var(--ink) !important; }

.surface-light .footer-link { color: var(--text-muted); }
.surface-light .footer-copy { color: var(--text-muted); }
.surface-light .bp-tag,
.surface-light .bp-item--attract .bp-tag { color: var(--blue) !important; }
.surface-light .nav-link { color: var(--ink); }

/* BLUE surface — Our Blueprints / #who block */
.surface-blue .section-body,
.surface-blue .bp-body,
.surface-blue .problem-sub,
.surface-blue .hero-sub,
.surface-blue .briefing-intro,
.surface-blue .briefing-point-text,
.surface-blue .faq-a p { color: var(--body) !important; }

.surface-blue .bp-headline,
.surface-blue .problem-headline,
.surface-blue .hw-title,
.surface-blue h3 { color: var(--ink) !important; }

.surface-blue .bp-item--attract .bp-tag,
.surface-blue .bp-item--engage  .bp-tag,
.surface-blue .bp-item--convert .bp-tag { color: var(--ink) !important; }

.surface-blue .bp-item--attract .bp-dot,
.surface-blue .bp-item--engage  .bp-dot,
.surface-blue .bp-item--convert .bp-dot { background: var(--ink); }

.surface-blue .bp-item { border-color: rgba(255,255,255,0.18) !important; }
.surface-blue .bp-desc-name { color: rgba(255,255,255,0.85); }
.surface-blue .bp-desc-body { color: rgba(255,255,255,0.7); }
.surface-blue .problem-note {
  color: rgba(255,255,255,0.75);
  border-top-color: rgba(255,255,255,0.2);
}

/* SAPPHIRE surface */
.surface-sapphire .section-body,
.surface-sapphire .hw-body,
.surface-sapphire .bp-body { color: var(--body) !important; }
.surface-sapphire .hw-title { color: var(--ink) !important; }

/* GREY surface */
.surface-grey .section-body,
.surface-grey .bp-body,
.surface-grey .hw-body { color: var(--body) !important; }

/* DARK surface — body text already correct, but normalise any rgba whites. */
.surface-dark .section-body,
.surface-dark .bp-body,
.surface-dark .problem-sub,
.surface-dark .hero-sub,
.surface-dark .dev-body { color: var(--text-mid); }

/* ── SYSTEM DIAGRAM — route hardcoded hex through tokens ──
   The diagram still ships hex attributes inline (#3C61EB).
   These attribute selectors map those attributes back to the
   --blue token so any future change to --blue propagates.
   ─────────────────────────────────────────────────────────── */

.system-diagram-v2 [stroke="#3C61EB"] { stroke: var(--blue); }
.system-diagram-v2 [fill="#3C61EB"]   { fill:   var(--blue); }
.system-diagram-v2 [stop-color="#3C61EB"] { stop-color: var(--blue); }
.system-diagram-v2 [stroke="#818CF8"] { stroke: var(--sapphire); }
.system-diagram-v2 [fill="#818CF8"]   { fill:   var(--sapphire); }
.system-diagram-v2 [stop-color="#818CF8"] { stop-color: var(--sapphire); }

/* ── ICON SET — strip to bare glyph ──
   Across all 19 icons (.hw-icon + .step-icon), on every surface,
   strip the L-bracket frame, the corner chip pads, the card
   background and its border, the decorative highlight lines,
   the glow, and the drop-shadow filters.
   Strip: .icon-brackets, .icon-pads, .icon-glow, the chip-card
   rect, the top/bottom highlight lines, all filters.
   Keep:  .icon-shape, .icon-shape-inner, .icon-ticks, .icon-dot.
   Glyph stays centered — every shape is positioned by absolute
   coordinates inside a 56×56 viewBox.
   ─────────────────────────────────────────────────────────── */

.hw-icon  .icon-brackets,
.step-icon .icon-brackets,
.hw-icon  .icon-pads,
.step-icon .icon-pads,
.hw-icon  .icon-glow,
.step-icon .icon-glow,
.hw-icon  > line,
.step-icon > line,
.hw-icon  > rect:first-of-type,
.step-icon > rect:first-of-type { display: none !important; }

.hw-icon *,
.step-icon * { filter: none !important; }

/* Step-icon alignment — match the homepage hw-item where the
   icon's visual center sits on the title's first-line center.
   align-self: start parks the icon at the top of the row;
   then on engage/convert (which wrap their content in
   .step-text) a negative margin-top nudges the 56px icon up
   so its center lines up with the 28px title's first-line
   center (~16-17px from the row top → ~-11/-12px shift).
   Attract uses .step-header (step-code above step-title) so
   it stays top-aligned; tuning there is a separate call. */
.step-icon { align-self: start !important; }

.step-item:has(.step-text) .step-icon { margin-top: -12px !important; }

/* Attract wraps content as <step-header(step-code + step-title)>
   + <step-body>. The icon needs to shift DOWN — past the small
   eyebrow line — so its center lands on the step-title first-line
   center. step-code (~14px) + margin-bottom (6px) + half of the
   step-title line (~17px) puts the title center ~37px from row
   top; the 56px icon center sits at 28, so push down by ~9px. */
.step-item:has(.step-header) .step-icon { margin-top: 9px !important; }

/* One stroke weight for the kept glyph parts across all icons —
   the inline SVG attributes ship with mixed widths (.icon-shape
   1.1, .icon-shape-inner 0.9, .icon-ticks 0.45–0.9). Normalize
   to 1.3 — one step heavier than the previous primary — so the
   line-art holds up on light surfaces. */
.hw-icon  .icon-shape,
.hw-icon  .icon-shape-inner,
.hw-icon  .icon-ticks,
.hw-icon  .icon-ticks *,
.step-icon .icon-shape,
.step-icon .icon-shape-inner,
.step-icon .icon-ticks,
.step-icon .icon-ticks * {
  stroke-width: 1.3 !important;
}

/* LIGHT SURFACE — glyph reads as ink (black) at rest. */
.surface-light .hw-icon  [fill^="rgba(248"]:not([fill="none"]),
.surface-light .step-icon [fill^="rgba(248"]:not([fill="none"]) { fill: var(--ink) !important; }
.surface-light .hw-icon  [stroke^="rgba(248"],
.surface-light .step-icon [stroke^="rgba(248"] { stroke: var(--ink) !important; }
.surface-light .hw-icon  .icon-shape,
.surface-light .hw-icon  .icon-shape-inner,
.surface-light .hw-icon  .icon-ticks,
.surface-light .step-icon .icon-shape,
.surface-light .step-icon .icon-shape-inner,
.surface-light .step-icon .icon-ticks { stroke: var(--ink) !important; }
.surface-light .hw-icon  .icon-pads circle,
.surface-light .hw-icon  .icon-dot,
.surface-light .hw-icon  .icon-dot-fill,
.surface-light .step-icon .icon-pads circle,
.surface-light .step-icon .icon-dot,
.surface-light .step-icon .icon-dot-fill { fill: var(--ink) !important; }

/* Smooth color transition on the kept glyph parts — all surfaces. */
.hw-icon  .icon-shape,
.hw-icon  .icon-shape-inner,
.hw-icon  .icon-ticks,
.hw-icon  .icon-pads circle,
.hw-icon  .icon-dot,
.hw-icon  .icon-dot-fill,
.step-icon .icon-shape,
.step-icon .icon-shape-inner,
.step-icon .icon-ticks,
.step-icon .icon-pads circle,
.step-icon .icon-dot,
.step-icon .icon-dot-fill { transition: stroke 0.2s ease, fill 0.2s ease; }

/* HOVER — whole glyph turns brand blue on every surface.
   !important is needed because the light-surface ink overrides
   use !important; same specificity + !important here wins for
   hover. Dark surfaces also pick this up — the page's existing
   inline hover rule already does most parts, this widens to
   .icon-ticks and the rgba(248,…) attribute selectors. */
.hw-item:hover  .hw-icon  .icon-shape,
.hw-item:hover  .hw-icon  .icon-shape-inner,
.hw-item:hover  .hw-icon  .icon-ticks,
.step-item:hover .step-icon .icon-shape,
.step-item:hover .step-icon .icon-shape-inner,
.step-item:hover .step-icon .icon-ticks,
.hw-item:hover  .hw-icon  [stroke^="rgba(248"],
.step-item:hover .step-icon [stroke^="rgba(248"] { stroke: var(--blue) !important; }

.hw-item:hover  .hw-icon  .icon-pads circle,
.hw-item:hover  .hw-icon  .icon-dot,
.hw-item:hover  .hw-icon  .icon-dot-fill,
.step-item:hover .step-icon .icon-pads circle,
.step-item:hover .step-icon .icon-dot,
.step-item:hover .step-icon .icon-dot-fill,
.hw-item:hover  .hw-icon  [fill^="rgba(248"]:not([fill="none"]),
.step-item:hover .step-icon [fill^="rgba(248"]:not([fill="none"]) { fill: var(--blue) !important; }

/* ── DIAGRAM LABELS ON BLUE — readable contrast ──
   .anchor-flash text labels in the system diagram are driven
   by a keyframes animation that cycles fill between #cdd6ff
   and rgba(248,250,252,0.55). Both wash out on blue. On the
   blue surface, suspend the animation and pin the labels to
   #E6EAFB at full opacity. Other surfaces unaffected.
   ─────────────────────────────────────────────────────────── */

.surface-blue .system-diagram-v2 .anchor-flash {
  animation: none !important;
  fill: #E6EAFB !important;
  fill-opacity: 0.95 !important;
}

/* ── NAV LOGO — exactly one mark per breakpoint ──
   .nav-logo img { display: block } already exists in every
   page's inline style. Bumping specificity here with
   .nav-logo img.nav-logo-symbol (0,2,1) beats the page rule
   (0,1,1) so the toggle works at every width.
   ─────────────────────────────────────────────────────────── */

.nav-logo img.nav-logo-symbol   { display: none !important; }
.nav-logo img.nav-logo-wordmark { display: block !important; }

@media (max-width: 640px) {
  .nav-logo img.nav-logo-wordmark { display: none !important; }
  .nav-logo img.nav-logo-symbol   { display: block !important; height: 44px; }
}

/* ── MOBILE MENU OVERLAY — keep it anchored to the viewport ──
   The open mobile menu (.nav-links) is position:fixed inset:0. But once the
   page is scrolled, nav.scrolled adds backdrop-filter, which makes <nav> the
   containing block for its fixed child — so the overlay anchors to the short
   nav bar and renders only partially. While the menu is open we drop that
   filter so the overlay always resolves against the viewport, identically at
   any scroll position. The overlay paints its own opaque blur, so the nav
   loses nothing visually. Applies to every page via tokens.css. */
@media (max-width: 768px) {
  body.menu-open nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── RESULTS (sapphire) — three stat blocks ──
   Used on the homepage and inserted at the end of each
   blueprint page. Figures are solid var(--ink) — no gradient.
   Colors come from the surrounding surface's role tokens,
   so the same markup reads correctly on any surface.
   ─────────────────────────────────────────────────────────── */

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  margin-top: 56px;
}
.results-grid--two-up { grid-template-columns: repeat(2, 1fr); max-width: 880px; }

.result-stat  { display: flex; flex-direction: column; gap: 12px; }
.result-figure {
  font-family: var(--sohne);
  font-weight: 600;
  font-size: clamp(56px, 7vw, 96px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.result-label {
  font-family: var(--geist);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  max-width: 24ch;
}
.result-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--body);
  opacity: 0.85;
  max-width: 34ch;
  margin-top: 2px;
}
.result-explainer {
  font-family: var(--geist);
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: var(--body);
  max-width: 34ch;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--accent-border);
}

/* ── SELECTED WORK (grey) — three case-study cards ──
   Card holds: client name, blueprint tag, category label,
   headline, body, three mini-stats, a bracketed quote
   placeholder, and an attribution line. Card surface and
   hairline come from the surrounding surface's tokens.
   ─────────────────────────────────────────────────────────── */

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
  align-items: stretch;
}
.work-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  background: rgba(248,250,252,0.03);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.work-card:hover {
  background: rgba(248,250,252,0.06);
  border-color: rgba(129,140,248,0.55);
}

.work-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--accent-border);
}
.work-card-client {
  font-family: var(--sohne);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.work-card-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--body);
}
.work-card-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.work-card-headline {
  font-family: var(--sohne);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.work-card-body {
  font-family: var(--geist);
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}

.work-card-stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 0 0;
  padding: 18px 0 4px 0;
  list-style: none;
  border-top: 1px solid var(--accent-border);
}
.work-card-stat { display: flex; flex-direction: column; gap: 2px; }
.work-card-stat .fig {
  font-family: var(--sohne);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.work-card-stat .lbl {
  font-family: var(--geist);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.work-card-stat .src {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--body);
  opacity: 0.85;
}

.work-card-quote {
  /* Hidden until real, attributed quotes are added. Hiding the blockquote
     removes both the placeholder testimonial and the attribution line, so
     each card shows only its header, body, and stats. */
  display: none;
  font-family: var(--sohne);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
  padding: 16px 0 0 0;
  margin: 4px 0 0 0;
  border-top: 1px solid var(--accent-border);
}
.work-card-attribution {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--body);
  opacity: 0.85;
  margin-top: 8px;
  display: block;
  font-style: normal;
}

@media (max-width: 1100px) {
  .work-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .results-grid,
  .work-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ── DEV / INVESTOR / LANDOWNER SECTION ──
   Moved from index.html when the section relocated to
   /custom-blueprint. Lives globally so the section renders
   the same wherever it is included.
   ─────────────────────────────────────────────────────────── */

.dev-section {
  position: relative;
  width: 100%;
  min-height: 540px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 180px var(--ml);
  overflow: hidden;
}
.dev-image-col { position: relative; width: 100%; min-width: 0; }
.dev-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.dev-content { position: relative; z-index: 2; min-width: 0; }
.dev-h2 {
  font-family: var(--sohne);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: var(--text-high);
  margin-bottom: 20px;
}
.dev-body {
  font-family: var(--geist);
  font-size: 17px;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 32px;
  max-width: 520px;
}
.dev-proof { display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; }
.dev-proof-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--geist);
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.6;
}
.dev-proof-mark {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 3px;
}
.dev-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #02040a;
  text-decoration: none;
  background: var(--gradient-btn);
  border: none;
  border-radius: 100px;
  padding: 14px 32px;
  width: fit-content;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.dev-cta:hover {
  box-shadow: 0 0 28px rgba(60,97,235,0.45);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .dev-section {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 80px var(--ml);
    min-height: auto;
    align-items: stretch;
  }
  .dev-h2 { font-size: clamp(22px, 6vw, 30px); }
  .dev-body { font-size: 16px; }
  .dev-proof-row { font-size: 15px; }
  .dev-cta { padding: 14px 26px; }
}

@media (max-width: 480px) {
  .dev-section { padding: 64px var(--ml); }
}

/* ── NAV DROPDOWN DIVIDER ──
   Used inside .nav-dropdown to separate the three core
   Blueprints from Custom Blueprint.
   ─────────────────────────────────────────────────────────── */

.nav-dropdown-divider {
  height: 1px;
  margin: 6px 8px;
  background: rgba(60,97,235,0.15);
  list-style: none;
  padding: 0;
}

/* ── GHOST PILL — secondary buttons on light surfaces ──
   Transparent fill, 1.5px Blueprint Blue border, blue label.
   On hover, fill solid blue with white text. Existing lift
   (translateY + glow) is preserved via the page rules.
   Primary CTAs (.submit-btn, .nav-cta) are intentionally
   excluded so hierarchy holds. Dark and blue surfaces are
   untouched.
   ─────────────────────────────────────────────────────────── */

.surface-light .member-email {
  background: transparent !important;
  border: 1.5px solid var(--blue) !important;
  color: var(--blue) !important;
  /* keep the original mono caps, pill radius, padding from page rule */
}

.surface-light .member-email:hover {
  background: var(--blue) !important;
  color: #FFFFFF !important;
}

/* ── SITE FOOTER — editorial statement, shared sitewide ──
   The whole <footer class="site-footer"> is generated by build.mjs from one
   template, so every page renders the same structure and the social row stays
   bound to the SOCIAL constant that also feeds the Organization sameAs. Layout
   is centralized here, scoped to `.site-footer` and fresh class names so it wins
   over the legacy inline per-page `footer{}` rules (class 0,1,0 beats element
   0,0,1) without touching any page's <style> block. Three zones, left-anchored:
     1) STATEMENT — sapphire accent bar + node mark + headline + sub-line
     2) COLUMNS   — // Navigate and // Contact (contact carries the social row)
     3) BASELINE  — copyright alone, divided by --border.
   Sapphire is the intentional footer accent (echoes the hero accent bar).
   `--footer-muted` (#5b6479) is a footer-local tone for the // labels, copyright,
   and resting social glyphs — scoped here so it never touches the global
   `--text-muted` token other components depend on.
   ─────────────────────────────────────────────────────────── */

.site-footer {
  --footer-muted: #5b6479;
  display: block;
  padding: 112px var(--ml) 48px;
}

/* ── Top band — statement (left ~half) and the two columns (flush right),
   top-aligned so it reads as one row: statement | Navigate | Contact ── */
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 56px;
}

/* ── Statement zone ── */
.footer-statement {
  flex: 0 1 46%;
  display: flex;
  align-items: stretch;
  gap: 28px;
}
.footer-bar {
  flex-shrink: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--sapphire);
  align-self: stretch;
}
.footer-statement-body { min-width: 0; }
.footer-statement-head {
  display: flex;
  align-items: center;
  gap: 18px;
}
.footer-node {
  display: inline-flex;
  position: relative;
  line-height: 0;
  text-decoration: none;
  flex-shrink: 0;
}
.footer-node-svg { width: 44px; height: 44px; display: block; }
.footer-node-dot { fill: var(--sapphire); }
.footer-node-glow {
  fill: var(--sapphire);
  transform-box: fill-box;
  transform-origin: center;
  animation: footerNodePulse 2.8s ease-in-out infinite;
}
@keyframes footerNodePulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(3.6); opacity: 0; }
  100% { transform: scale(3.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-node-glow { animation: none; opacity: 0; }
}
.footer-headline {
  font-family: var(--sohne);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--text-high);
  /* override the global gradient-clip h-rules in case of cascade */
  background: none;
  -webkit-text-fill-color: var(--text-high);
  margin: 0;
  min-width: 0;
}
.footer-subline {
  font-family: var(--geist);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-mid);
  max-width: 480px;
  margin: 18px 0 0;
}

/* ── Column zone — two columns side by side, flush to the right content edge ── */
.footer-cols {
  display: flex;
  gap: 80px;
  flex-shrink: 0;
}
.footer-col--nav,
.footer-col--contact { width: 200px; }
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.footer-colhead {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--footer-muted);
  margin: 0 0 4px;
}

/* Nav + email links — rest mid, lift to high, sapphire underline grows from left */
.footer-nav-link,
.footer-email {
  position: relative;
  align-self: flex-start;
  font-family: var(--geist);
  font-size: 15px;
  color: var(--text-mid);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-nav-link::after,
.footer-email::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--sapphire);
  transition: width 0.22s ease;
}
.footer-nav-link:hover,
.footer-email:hover { color: var(--text-high); }
.footer-nav-link:hover::after,
.footer-email:hover::after { width: 100%; }

.footer-loc {
  font-family: var(--geist);
  font-size: 15px;
  color: var(--text-mid);
  margin: 0;
}

/* Social row — rest footer-muted, hover sapphire + lift */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
}
.footer-social a {
  display: inline-flex;
  color: var(--footer-muted);
  line-height: 0;
  transition: color 0.18s ease, transform 0.18s ease;
}
.footer-social a:hover {
  color: var(--sapphire);
  transform: translateY(-2px);
}
.footer-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}

/* ── Baseline row — copyright alone, divided by the structural border token ── */
.footer-baseline {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.site-footer .footer-copy {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--footer-muted);
  letter-spacing: 0.08em;
  margin: 0;
}

/* ── Mobile — single column, left-aligned, in DOM order:
   statement (bar + node + headline, sub-line), // Navigate, // Contact, copyright ── */
@media (max-width: 768px) {
  .site-footer { padding: 72px var(--ml) 40px; }
  .footer-top { flex-direction: column; gap: 44px; }
  .footer-statement { flex: 1 1 auto; gap: 20px; }
  .footer-headline { font-size: 22px; }
  .footer-cols { flex-direction: column; gap: 40px; }
  .footer-col--nav,
  .footer-col--contact { width: auto; }
  .footer-baseline { margin-top: 48px; padding-top: 28px; }

  /* Touch tap targets >=44px (mobile only; desktop spacing untouched). The nav
     links and email get vertical padding; the column gap is removed so the rows
     stay tight. Social glyphs sit in 44x44 centred boxes, the row shifted left so
     the first glyph keeps the column's left edge. */
  .footer-col--nav { gap: 0; }
  .footer-nav-link,
  .footer-email { padding: 12px 0; }
  .footer-email::after { bottom: 8px; }
  .footer-nav-link::after { bottom: 8px; }
  .footer-social { gap: 4px; margin-top: 4px; margin-left: -13px; }
  .footer-social a {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }
}

/* ── Reduced motion — open/close the mobile menu instantly, no slide/fade ──
   The per-page inline rule sets `.nav-links { transition: transform/opacity/
   visibility }`; that <style> loads after tokens.css, so !important is needed to
   win. Sitewide, so all pages honor the preference from one place. */
@media (prefers-reduced-motion: reduce) {
  .nav-links { transition: none !important; }
}