/*
 * styles.css
 * Owns: Layout, typography, colors (CSS variables), component styles (nav, hero, sections,
 *       case study cards, creative work grid, footer), focus states, reduced-motion and print.
 * Layout system: outer .container (site shell, --container) + inner content rail (--content-rail-max,
 *   60rem) on interior pages and homepage sections below hero; system map diagram uses full shell width.
 * Light field: premium menu paper (warm cream field), ink text (#111 / #4f5661 muted), steel accent.
 * Site background: site-linework.js — one document-height SVG (#bg-system), seeded drafting layers; scroll = opacity only.
 * No content; section IDs must match SECTION_IDS in script.js.
 */

:root {
  /*
   * Global base (light): warm cream menu paper, ink text, steel accent. Pillar pages = slight tint only.
   */
  --paper-cream: #f2ede3;
  --paper-cream-elevated: #f7f2e8;
  --paper-cream-highlight: #faf6ec;
  --paper-cream-deep: #e8e2d4;
  --paper-cream-sole: #e0d9ca;
  --color-bg: var(--paper-cream);
  --color-surface: var(--paper-cream-elevated);
  --color-text: #111111;
  --color-text-muted: #4f5661;
  --color-accent: #3d5a6c;
  --color-line: rgba(20, 26, 32, 0.12);
  --pillar-graphic: #5c5650;
  --pillar-music: #5a4850;
  --pillar-fabrication: #605548;
  --pillar-ai: #3d4f5e;
  /* Structural corners / rules — hairline on light ground */
  --structural-line: rgba(20, 26, 32, 0.4);
  --structural-hairline: 1px;
  --structural-arm-v-pillar: 2.85rem;
  --structural-arm-h-pillar: 1rem;
  --structural-arm-v-featured: 2rem;
  --structural-arm-h-featured: 0.88rem;
  --structural-arm-v-card: 1.4rem;
  --structural-arm-h-card: 0.75rem;
  --structural-arm-v-hero: 2.1rem;
  --structural-arm-h-hero: 1.2rem;
  --structural-arm-v-module: 1.25rem;
  --structural-arm-h-module: 0.68rem;
  --structural-op-pillar: 0.22;
  --structural-op-featured: 0.15;
  --structural-op-case: 0.12;
  --structural-op-case-dense: 0.1;
  --structural-op-hero: 0.26;
  --structural-op-module: 0.11;
  --structural-op-modal: 0.12;
  --structural-divider: rgba(20, 26, 32, 0.13);
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --radius: 6px;
  --radius-lg: 12px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --content-max: 72rem;
  /* Single content rail: all interior copy, cards, and media align to this width (960px @ 16px) */
  --content-rail-max: 60rem;
  /* Alias for prose/components; keep one source of truth with the rail */
  --reading-measure: var(--content-rail-max);
  /* Outer site shell: horizontal padding + max width */
  --container: min(100% - 2rem, var(--content-max));
  --section-padding: var(--space-2xl);
  --section-padding-lg: var(--space-3xl);
  --nav-height: 3.5rem;
  --nav-height-scrolled: 3rem;
  --body-min-font: 16px;
  --touch-min: 44px;
  /* Typography scale */
  --text-h1: clamp(1.5rem, 5vw, 2.75rem);
  --text-h2: clamp(1.5rem, 4vw, 2.5rem);
  --text-h3: clamp(1.125rem, 2vw, 1.375rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  /*
   * Structural rule — centered precision hairline (nav-line vocabulary).
   * Reuse for titles & manual landmarks; never full-bleed.
   */
  --structural-rule-w: clamp(7.5rem, 18vw, 15rem);
  --structural-rule-h: 1px;
  --structural-rule-gradient: linear-gradient(
    90deg,
    transparent 0%,
    rgba(20, 26, 32, 0.08) 40%,
    rgba(20, 26, 32, 0.14) 50%,
    rgba(20, 26, 32, 0.08) 60%,
    transparent 100%
  );
  --structural-rule-opacity: 0.88;
  /* Scroll reveal + motion (calm, premium) */
  --reveal-duration: 0.68s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance: 0.65rem;
  --featured-glow: rgba(61, 90, 108, 0.1);
  --featured-glow-soft: rgba(61, 90, 108, 0.05);
  --featured-border-brass: rgba(20, 26, 32, 0.14);
  /* Shared surface tiles: pillars, featured, case study grids, modules */
  --site-card-radius: var(--radius-lg);
  --site-card-min-h: 6rem;
}

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

html {
  scroll-behavior: smooth;
  /* Single vertical scrollport: avoid overflow-x:hidden on both html and body (that pairs y→auto on both and yields double scrollbars). */
  overflow-x: hidden;
  overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  position: relative;
  font-family: var(--font-sans);
  font-size: max(var(--body-min-font), 1rem);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: visible;
  overflow-y: visible;
}

/* ---------- Drafting background: #bg-system (site-linework.js), document height, absolute behind content ---------- */
#bg-system-host {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

#bg-system {
  display: block;
  width: 100%;
  pointer-events: none;
  shape-rendering: geometricPrecision;
  /* Default: reading-column mask. On data-home, site-linework.js adds a scroll-linked vertical band via inline mask-image. */
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    rgba(0, 0, 0, 0.42) 18%,
    rgba(0, 0, 0, 0.28) 50%,
    rgba(0, 0, 0, 0.42) 82%,
    #000 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    rgba(0, 0, 0, 0.42) 18%,
    rgba(0, 0, 0, 0.28) 50%,
    rgba(0, 0, 0, 0.42) 82%,
    #000 100%
  );
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

html.bg-system-ready body .hero,
html.bg-system-ready body main,
html.bg-system-ready body > .footer {
  position: relative;
  z-index: 1;
}

/* Lighter paper wash: first stops match hero tail so hero → Four Pillars reads as one field (no crease). */
html.bg-system-ready body[data-home] #main {
  background: linear-gradient(
    180deg,
    rgba(242, 237, 226, 0) 0%,
    rgba(235, 229, 217, 0.05) 6%,
    color-mix(in srgb, var(--bg-main) 58%, transparent) 14%,
    color-mix(in srgb, var(--bg-section) 62%, transparent) 42%,
    color-mix(in srgb, var(--bg-main) 60%, transparent) 72%,
    color-mix(in srgb, var(--bg-section) 55%, transparent) 100%
  );
}

html.bg-system-ready body:not([data-home]) #main {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg) 92%, transparent) 0%,
    var(--color-bg) 14%,
    var(--color-bg) 100%
  );
}

/* Pillar landings: same light system, ± tint on ground only */
body[data-pillar="design"] {
  --color-bg: #f1ece4;
  --color-surface: #f6f1e8;
  --color-text: #111111;
  --color-text-muted: #4d545e;
  --color-line: rgba(20, 26, 32, 0.125);
  --pillar-graphic: #58524c;
  --structural-divider: rgba(20, 26, 32, 0.12);
  --structural-line: rgba(20, 26, 32, 0.36);
}
body[data-pillar="fabrication"] {
  --color-bg: #f4efe6;
  --color-surface: #f9f4ec;
  --color-text: #111111;
  --color-text-muted: #52575f;
  --color-line: rgba(20, 26, 32, 0.13);
  --pillar-fabrication: #605448;
  --structural-divider: rgba(20, 26, 32, 0.12);
  --structural-line: rgba(20, 26, 32, 0.37);
}
body[data-pillar="automation"] {
  --color-bg: #eeebe5;
  --color-surface: #f4f0e8;
  --color-text: #111111;
  --color-text-muted: #4a525c;
  --color-line: rgba(20, 26, 32, 0.13);
  --pillar-ai: #384e5f;
  --structural-divider: rgba(20, 26, 32, 0.11);
  --structural-line: rgba(20, 26, 32, 0.35);
}
body[data-pillar="music"] {
  --color-bg: #f2ece6;
  --color-surface: #f7f1ec;
  --color-text: #111111;
  --color-text-muted: #50545c;
  --color-line: rgba(20, 26, 32, 0.12);
  --pillar-music: #53444a;
  --structural-divider: rgba(20, 26, 32, 0.11);
  --structural-line: rgba(20, 26, 32, 0.34);
}
body[data-pillar="leadership"] {
  --color-bg: #f0ece4;
  --color-surface: #f5f0e8;
  --color-text: #111111;
  --color-text-muted: #4f5660;
  --color-line: rgba(20, 26, 32, 0.12);
  --structural-divider: rgba(20, 26, 32, 0.11);
}

body[data-pillar] .site-nav.site-nav--scrolled,
body[data-pillar] .site-nav {
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-line);
}

/*
 * Homepage — light drafting field; linework carries depth; UI stays ink + steel accent.
 */
body[data-home] {
  --bg-top: var(--paper-cream-highlight);
  --bg-main: var(--paper-cream);
  --bg-section: var(--paper-cream-deep);
  --text-primary: #111111;
  --text-secondary: #4f5661;
  --text-muted-quiet: #6a7179;
  --accent-gold: #3d5a6c;
  --accent-gold-soft: rgba(61, 90, 108, 0.1);
  --accent-line: rgba(20, 26, 32, 0.14);
  --accent-blue: #2f4a5c;
  --home-card-surface: #f5efe3;
  --home-card-pad-y: var(--space-sm);
  --home-card-pad-x: var(--space-md);
  --home-module-min-h: 8.25rem;
  --home-section-divider: rgba(20, 26, 32, 0.1);

  --color-bg: var(--bg-main);
  --color-surface: var(--bg-section);
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-secondary);
  --color-line: rgba(20, 26, 32, 0.12);
  --color-accent: var(--accent-blue);
  --structural-divider: rgba(20, 26, 32, 0.13);
  --structural-line: rgba(20, 26, 32, 0.34);
  --home-brass-glow-outer: 0 4px 32px rgba(20, 26, 32, 0.08);
  --home-brass-glow-text: 0 0 1px rgba(255, 251, 242, 0.92), 0 0 12px rgba(61, 90, 108, 0.18);
  /* Hero .hero-cta--primary hover — same surface language on homepage module cards */
  --home-cta-hover-bg: rgba(61, 90, 108, 0.08);
  --home-cta-hover-border: rgba(61, 90, 108, 0.38);
  --home-cta-hover-inset: 0 1px 0 rgba(255, 252, 244, 0.75);
  --home-cta-hover-shadow: var(--home-cta-hover-inset), var(--home-brass-glow-outer);
  /* Hero .hero-cta--secondary hover (reference; cards use primary stack) */
  --home-cta-secondary-hover-bg: rgba(61, 90, 108, 0.06);
  --home-cta-secondary-hover-border: rgba(61, 90, 108, 0.3);
  --home-cta-secondary-hover-inset: 0 1px 0 rgba(255, 251, 240, 0.7);
  --home-cta-secondary-hover-shadow: var(--home-cta-secondary-hover-inset), var(--home-brass-glow-outer);

  color: var(--text-primary);
  background-color: var(--bg-main);
  background-image: linear-gradient(
    180deg,
    var(--bg-top) 0%,
    var(--bg-main) 22%,
    var(--bg-main) 78%,
    var(--paper-cream-sole) 100%
  );
}

@media (min-width: 48em) {
  body[data-home] {
    --home-card-pad-y: var(--space-md);
    --home-card-pad-x: calc(var(--space-md) + var(--space-xs));
    --home-module-min-h: 9rem;
  }
}

/* Text glow on plain links; homepage module cards use the same box shadow as hero CTAs (no label text-shadow) */
body[data-home] .nav-links a:hover,
body[data-home] .nav-links a:focus-visible,
body[data-home] .nav-menu a:hover,
body[data-home] .nav-menu a:focus-visible {
  text-shadow: var(--home-brass-glow-text);
}
body[data-home] .footer a {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
body[data-home] .footer a:hover,
body[data-home] .footer a:focus-visible {
  text-shadow: var(--home-brass-glow-text);
}
body[data-home] #main .philosophy-narrative a,
body[data-home] #main .philosophy-list a,
body[data-home] #main .philosophy-closing a {
  transition: color 0.2s ease, text-decoration-color 0.2s ease, text-shadow 0.2s ease;
}
body[data-home] #main .philosophy-narrative a:hover,
body[data-home] #main .philosophy-narrative a:focus-visible,
body[data-home] #main .philosophy-list a:hover,
body[data-home] #main .philosophy-list a:focus-visible,
body[data-home] #main .philosophy-closing a:hover,
body[data-home] #main .philosophy-closing a:focus-visible {
  text-shadow: var(--home-brass-glow-text);
}
/* Homepage: brass glow on remaining interactive surfaces (chips + accordion example links) */
body[data-home] a.hero-credibility-chip {
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    text-shadow 0.2s ease;
}
body[data-home] a.hero-credibility-chip:hover,
body[data-home] a.hero-credibility-chip:focus-visible {
  text-shadow: var(--home-brass-glow-text);
  box-shadow: var(--home-brass-glow-outer);
}
body[data-home] #main .method-stage__panel a {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
body[data-home] #main .method-stage__panel a:hover,
body[data-home] #main .method-stage__panel a:focus-visible {
  text-shadow: var(--home-brass-glow-text);
}

body[data-home] .skip-link {
  background: var(--accent-blue);
  color: var(--paper-cream-highlight);
  font-weight: 600;
}
body[data-home] .skip-link:focus {
  outline-color: var(--text-primary);
}

body[data-home] #main .case-studies {
  border-top: none;
}
/* Continuous field: no full-width rules between homepage bands (drafting + titles carry rhythm). */
body[data-home] #main > .section {
  background-color: transparent;
  border-top: none;
  padding-top: calc((var(--space-md) + var(--space-xs)) * 0.82);
  padding-bottom: calc((var(--space-md) + var(--space-xs)) * 0.82);
}
@media (min-width: 48em) {
  body[data-home] #main > .section {
    padding-top: calc((var(--space-lg) + var(--space-sm)) * 0.82);
    padding-bottom: calc((var(--space-lg) + var(--space-sm)) * 0.82);
  }
}
/* First section after hero (Four Pillars): stronger handoff */
body[data-home] #main > .section:first-of-type {
  padding-top: calc((var(--space-2xl) + var(--space-md)) * 0.82);
}
@media (min-width: 48em) {
  body[data-home] #main > .section:first-of-type {
    padding-top: calc((var(--space-3xl) + var(--space-sm)) * 0.82);
  }
}
/* Systems Across Domains (#featured-work): centerpiece band */
body[data-home] #main > .section.featured-work {
  position: relative;
  isolation: isolate;
  padding-top: calc((var(--space-xl) + var(--space-sm)) * 0.82);
  padding-bottom: calc((var(--space-xl) + var(--space-md)) * 0.82);
}
@media (min-width: 48em) {
  body[data-home] #main > .section.featured-work {
    padding-top: calc((var(--space-2xl) + var(--space-xs)) * 0.82);
    padding-bottom: calc((var(--space-2xl) + var(--space-sm)) * 0.82);
  }
}

body[data-home] #main > .section.featured-work > .container > .section-title {
  font-size: clamp(1.45rem, 4vw, 2.75rem);
  letter-spacing: 0.14em;
  color: var(--text-primary);
}

body[data-home] #main > .section.featured-work > .container > .section-intro {
  margin-bottom: calc((var(--space-xl) + var(--space-sm)) * 0.82);
  max-width: 42rem;
}

body[data-home] .section.featured-work .featured-card-link {
  padding: 0;
}
/* Systems grid: hover glows can extend past cell bounds */
body[data-home] .section.featured-work .featured-work-grid {
  overflow: visible;
}
/* Homepage bands: same vocabulary as hero (diffused linear haze only) — unique angles per section, no repeating grids */
body[data-home] #main > .section.pillars {
  position: relative;
  isolation: isolate;
}
body[data-home] #main > .section.pillars::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      188deg,
      rgba(255, 251, 242, 0.16) 0%,
      rgba(242, 237, 227, 0) 40%,
      rgba(232, 226, 214, 0.12) 100%
    ),
    linear-gradient(
      156deg,
      rgba(20, 26, 32, 0.022) 0%,
      transparent 48%,
      transparent 55%,
      rgba(20, 26, 32, 0.018) 100%
    );
  /* No hard edge at section top: haze ramps in after the hero handoff */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 14%, #000 32%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 14%, #000 32%, #000 100%);
}
body[data-home] #main > .section.pillars > .container {
  position: relative;
  z-index: 1;
}

body[data-home] #main > .section.featured-work::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      172deg,
      rgba(255, 251, 242, 0.2) 0%,
      rgba(242, 237, 227, 0) 38%,
      rgba(235, 229, 217, 0.2) 100%
    ),
    linear-gradient(
      12deg,
      rgba(20, 26, 32, 0.02) 0%,
      transparent 50%,
      rgba(20, 26, 32, 0.03) 100%
    );
}
body[data-home] #main > .section.featured-work > .container {
  position: relative;
  z-index: 1;
}

body[data-home] #main > .section.leadership {
  position: relative;
  isolation: isolate;
}
body[data-home] #main > .section.leadership::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      195deg,
      rgba(242, 237, 227, 0) 0%,
      rgba(255, 251, 242, 0.15) 42%,
      rgba(232, 226, 214, 0.12) 100%
    ),
    linear-gradient(
      201deg,
      transparent 0%,
      rgba(20, 26, 32, 0.025) 45%,
      transparent 70%
    );
}
body[data-home] #main > .section.leadership > .container {
  position: relative;
  z-index: 1;
}

body[data-home] #main > .section.philosophy {
  position: relative;
  isolation: isolate;
  padding-top: calc((var(--space-xl) + var(--space-sm)) * 0.82);
}
@media (min-width: 48em) {
  body[data-home] #main > .section.philosophy {
    padding-top: calc((var(--space-2xl) + var(--space-xs)) * 0.82);
  }
}
body[data-home] #main > .section.philosophy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(235, 229, 217, 0.16) 0%,
      rgba(242, 237, 227, 0) 35%,
      rgba(255, 251, 242, 0.14) 85%
    ),
    linear-gradient(
      134deg,
      rgba(20, 26, 32, 0.018) 0%,
      transparent 60%
    );
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 12%, #000 28%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 12%, #000 28%, #000 100%);
}
body[data-home] #main > .section.philosophy > .container {
  position: relative;
  z-index: 1;
}

body[data-home] #main > .section.closing {
  position: relative;
  isolation: isolate;
}
body[data-home] #main > .section.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      165deg,
      rgba(242, 237, 227, 0) 0%,
      rgba(255, 251, 242, 0.18) 55%,
      rgba(235, 229, 217, 0.22) 100%
    ),
    linear-gradient(
      178deg,
      rgba(20, 26, 32, 0.02) 0%,
      transparent 40%,
      rgba(20, 26, 32, 0.024) 100%
    );
}
body[data-home] #main > .section.closing > .container {
  position: relative;
  z-index: 1;
}

body[data-home] #main .section-title {
  color: var(--text-primary);
  letter-spacing: 0.078em;
}
body[data-home] #main .section-intro {
  color: var(--text-secondary);
  margin-top: 0;
  margin-bottom: calc((var(--space-lg) + var(--space-xs)) * 0.82);
}
/* Section hierarchy: Systems stays hero-scale; leadership & philosophy step down */
body[data-home] #main > .section.leadership > .container > .section-title,
body[data-home] #main > .section.philosophy > .container > .section-title {
  font-size: clamp(1.15rem, 3.2vw, 2.05rem);
  letter-spacing: 0.072em;
}
body[data-home] #main > .section.leadership > .container > .section-title::after,
body[data-home] #main > .section.philosophy > .container > .section-title::after {
  margin-bottom: calc(var(--space-md) * 0.85);
}

/* Homepage card modules: shared flex shell; CTAs align to card foot */
body[data-home] #main .home-module {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: var(--home-card-pad-y) var(--home-card-pad-x);
  box-sizing: border-box;
}
body[data-home] #main .home-module__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1 1 auto;
  min-height: 0;
}
body[data-home] #main .home-module__footer {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: var(--space-xs);
}
body[data-home] #main .home-module__body .featured-card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.055em;
  line-height: 1.28;
  font-size: clamp(0.98rem, 1.85vw, 1.12rem);
}
/* Pillar names: same type as .featured-card-pillar (size/weight/tracking), homepage label color */
body[data-home] #main .section.pillars .pillar-card .home-module__body {
  min-width: 0;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
}
body[data-home] #main .home-module__body .pillar-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: color-mix(in srgb, var(--accent-blue) 65%, var(--accent-gold) 35%);
  transition: color var(--transition);
  text-align: center;
  text-wrap: balance;
  width: 100%;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
body[data-home] .section.pillars .pillar-card:hover .pillar-card-title,
body[data-home] .section.pillars .pillar-card:focus-visible .pillar-card-title {
  color: color-mix(in srgb, var(--accent-gold) 40%, var(--accent-blue) 60%);
}
body[data-home] #main .home-module__body .pillar-proof,
body[data-home] #main .home-module__body .featured-card-subtitle,
body[data-home] #main .home-module__body .featured-card-outcome {
  margin: 0;
}
body[data-home] #main .home-module__body .featured-card-pillar {
  margin: 0;
}

/* Cards: shared base surface; hover matches hero CTAs (no lift/transform — same as buttons) */
body[data-home] #main .pillar-card,
body[data-home] #main .featured-card {
  background: var(--home-card-surface);
  border: 1px solid rgba(20, 26, 32, 0.11);
  box-shadow:
    0 1px 0 rgba(255, 251, 242, 0.78),
    0 2px 8px rgba(20, 26, 32, 0.04),
    0 10px 28px rgba(20, 26, 32, 0.06);
  transition:
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}
body[data-home] #main .section.featured-work .featured-card,
body[data-home] #main .section.leadership .featured-card {
  cursor: pointer;
}
/* Four Pillars — compact band */
body[data-home] #main .section.pillars .pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--home-module-min-h);
  padding: 0;
}
body[data-home] #main .section.pillars .pillar-card .home-module {
  position: relative;
  z-index: 2;
  justify-content: center;
  gap: var(--space-sm);
}
body[data-home] #main .section.pillars .pillar-card .home-module__footer {
  margin-top: 0;
  padding-top: 0;
}
/* Pillar cards: no extra ::after sheen — hero CTA does not use one */
body[data-home] #main .section.pillars .pillar-card::after {
  display: none;
}
/*
 * Homepage module cards — hover/focus matches .hero-cta--primary (background, border, inset + outer glow).
 * :focus-within on articles so glow tracks keyboard focus on .featured-card-link.
 */
body[data-home] #main .section.pillars .pillar-card:hover,
body[data-home] #main .section.pillars .pillar-card:focus-visible,
body[data-home] #main .section.featured-work .featured-card:hover,
body[data-home] #main .section.featured-work .featured-card:focus-within,
body[data-home] #main .section.leadership .featured-card:hover,
body[data-home] #main .section.leadership .featured-card:focus-within {
  transform: none;
  background: var(--home-cta-hover-bg);
  border-color: var(--home-cta-hover-border);
  box-shadow: var(--home-cta-hover-shadow);
}
body[data-home] #main .section.pillars .pillar-card .pillar-card-cta {
  transition: color var(--transition);
}
body[data-home] .section.pillars .pillar-card:hover .pillar-card-cta,
body[data-home] .section.pillars .pillar-card:focus-visible .pillar-card-cta {
  color: color-mix(in srgb, var(--accent-gold) 55%, var(--color-accent) 45%);
}
body[data-home] .section.leadership .featured-card-pillar,
body[data-home] .section.leadership .featured-card-title,
body[data-home] .section.leadership .featured-card-cta {
  transition: color var(--transition);
}
body[data-home] .section.leadership .featured-card-link:hover .featured-card-cta,
body[data-home] .section.leadership .featured-card-link:focus-visible .featured-card-cta {
  color: var(--accent-blue);
}
body[data-home] .section.featured-work .featured-card-pillar {
  color: color-mix(in srgb, var(--accent-blue) 65%, var(--accent-gold) 35%);
  transition: color var(--transition);
}
body[data-home] .section.featured-work .featured-card:hover .featured-card-pillar,
body[data-home] .section.featured-work .featured-card:focus-within .featured-card-pillar {
  color: color-mix(in srgb, var(--accent-gold) 40%, var(--accent-blue) 60%);
}
body[data-home] .section.featured-work .featured-card-link:hover .featured-card-cta,
body[data-home] .section.featured-work .featured-card-link:focus-visible .featured-card-cta {
  color: var(--accent-gold);
}
body[data-home] .section.featured-work .featured-card-title {
  transition: color var(--transition);
}
body[data-home] .section.featured-work .featured-card-link:hover .featured-card-title,
body[data-home] .section.featured-work .featured-card-link:focus-visible .featured-card-title {
  color: color-mix(in srgb, var(--color-text) 94%, rgba(198, 169, 107, 0.12) 6%);
}
body[data-home] .section.featured-work .featured-card-cta {
  transition: color var(--transition);
}
body[data-home] #main .section.pillars .pillar-card:focus-visible,
body[data-home] #main .section.featured-work .featured-card-link:focus-visible,
body[data-home] #main .section.leadership .featured-card-link:focus-visible {
  outline: 1px solid var(--accent-gold);
  outline-offset: 3px;
  border-radius: 2px;
}
body[data-home] .section.leadership .featured-card-link {
  padding: 0;
}
body[data-home] #main .section.leadership .leadership-card .home-module__body {
  align-items: center;
  text-align: center;
}
body[data-home] #main .section.leadership .leadership-card .home-module__footer {
  align-self: center;
  text-align: center;
}
body[data-home] #main .section.pillars .pillars-grid,
body[data-home] #main .section.featured-work .featured-work-grid,
body[data-home] #main .section.leadership .leadership-grid {
  align-items: stretch;
}
body[data-home] #main .section.pillars .pillars-grid > .pillar-card,
body[data-home] #main .section.featured-work .featured-work-grid > .featured-card,
body[data-home] #main .section.leadership .leadership-grid > .leadership-card {
  height: 100%;
  min-height: var(--home-module-min-h);
}
body[data-home] #main .featured-card {
  display: flex;
  flex-direction: column;
}
body[data-home] #main .featured-card-link {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
/* Faint register frame around case-study grid (systems / drafting read) */
body[data-home] #main .section.featured-work .featured-work-grid {
  position: relative;
  z-index: 0;
}
body[data-home] #main .section.featured-work .featured-work-grid::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-sm) * -1);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(20, 26, 32, 0.06);
  pointer-events: none;
  z-index: -1;
  background: repeating-linear-gradient(
    90deg,
    rgba(20, 26, 32, 0.035) 0 1px,
    transparent 1px 64px
  );
  opacity: 0.45;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
body[data-home] #main .section.featured-work .featured-work-grid > .featured-card {
  position: relative;
  z-index: 1;
}

/* Philosophy: list + method stages match card language */
body[data-home] #main .philosophy-list li {
  background: var(--home-card-surface);
  border: 1px solid rgba(20, 26, 32, 0.1);
  box-shadow: 0 2px 10px rgba(20, 26, 32, 0.05);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
body[data-home] #main .philosophy-list li:hover,
body[data-home] #main .philosophy-list li:focus-within {
  border-color: rgba(61, 90, 108, 0.22);
  box-shadow:
    0 3px 14px rgba(20, 26, 32, 0.07),
    var(--home-brass-glow-outer);
}
body[data-home] #main .philosophy .method-stage {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(20, 26, 32, 0.08);
}
body[data-home] #main .philosophy .method-stages .method-stage:last-of-type {
  border-bottom: 0;
}
body[data-home] #main .philosophy .method-stage__button:hover,
body[data-home] #main .philosophy .method-stage__button:focus-visible {
  background: rgba(61, 90, 108, 0.05);
  box-shadow: var(--home-brass-glow-outer);
}
body[data-home] #main .philosophy .method-stages::before {
  left: 11px;
  top: 0.35rem;
  bottom: 0.35rem;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(61, 90, 108, 0.12) 12%,
    rgba(61, 90, 108, 0.12) 88%,
    transparent 100%
  );
  width: 1px;
  opacity: 0.9;
}
body[data-home] #main .philosophy .method-strip__heading {
  color: var(--text-primary);
}

/* Minimal warm strokes on inline CTAs */
body[data-home] .leadership-cta a {
  color: var(--accent-blue);
  text-underline-offset: 0.22em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease, text-shadow 0.2s ease;
}
body[data-home] .leadership-cta a:hover,
body[data-home] .leadership-cta a:focus-visible {
  color: var(--accent-gold);
  text-decoration-color: rgba(61, 90, 108, 0.45);
  text-shadow: var(--home-brass-glow-text);
}
body[data-home] #main .philosophy-narrative {
  color: var(--text-muted-quiet);
}
body[data-home] .leadership-tieback {
  color: var(--text-muted-quiet);
}
body[data-home] #main .philosophy-closing {
  color: var(--text-secondary);
}
/* Systems Philosophy: breathing room before process (no filled panel) */
body[data-home] #main .philosophy-narrative {
  margin-bottom: calc(var(--space-xl) + var(--space-sm));
  padding-bottom: var(--space-md);
}
/* How I improve production systems: line-based stack — no card container */
body[data-home] #main .philosophy .method-strip {
  margin-top: var(--space-lg);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-home] #main .philosophy .method-strip__intro {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(20, 26, 32, 0.08);
}
body[data-home] #main .philosophy .method-stages {
  gap: 0;
  padding-left: calc(var(--space-md) + 8px);
  margin-top: var(--space-sm);
}
body[data-home] #main .philosophy .method-stage__button {
  border-radius: 0;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  transition:
    background 0.3s var(--reveal-ease, ease),
    box-shadow 0.3s var(--reveal-ease, ease);
}
body[data-home] #main .philosophy .method-stage.is-open .method-stage__button {
  background: rgba(61, 90, 108, 0.04);
}
body[data-home] #main .philosophy .method-stage.is-open {
  border-bottom-color: rgba(20, 26, 32, 0.1);
  box-shadow: none;
}
body[data-home] #main .philosophy .method-stage::before {
  left: 11px;
  top: 1.15rem;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  background: transparent;
  border: 1px solid rgba(61, 90, 108, 0.35);
  box-shadow: none;
}
body[data-home] #main .philosophy .method-stage.is-open::before {
  border-color: rgba(61, 90, 108, 0.55);
  background: rgba(61, 90, 108, 0.06);
}

/* Homepage: light stagger on card grids after section reveals (motion OK only) */
@keyframes home-grid-rise {
  from {
    opacity: 0;
    transform: translateY(0.55rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  body[data-home] .section:not(.is-visible) .pillars-grid .pillar-card,
  body[data-home] .section:not(.is-visible) .featured-work-grid > .featured-card,
  body[data-home] .section:not(.is-visible) .leadership-grid > .leadership-card {
    opacity: 0;
    transform: translateY(0.55rem);
  }
  body[data-home] .section.is-visible .pillars-grid .pillar-card {
    animation: home-grid-rise 0.62s var(--reveal-ease) both;
  }
  body[data-home] .section.is-visible .pillars-grid .pillar-card:nth-child(1) { animation-delay: 0.04s; }
  body[data-home] .section.is-visible .pillars-grid .pillar-card:nth-child(2) { animation-delay: 0.09s; }
  body[data-home] .section.is-visible .pillars-grid .pillar-card:nth-child(3) { animation-delay: 0.14s; }
  body[data-home] .section.is-visible .pillars-grid .pillar-card:nth-child(4) { animation-delay: 0.19s; }
  body[data-home] .section.is-visible .pillars-grid .pillar-card:nth-child(5) { animation-delay: 0.24s; }
  body[data-home] .section.is-visible .pillars-grid .pillar-card:nth-child(6) { animation-delay: 0.29s; }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card {
    animation: home-grid-rise 0.58s var(--reveal-ease) both;
  }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card:nth-child(1) { animation-delay: 0.05s; }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card:nth-child(2) { animation-delay: 0.1s; }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card:nth-child(3) { animation-delay: 0.15s; }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card:nth-child(4) { animation-delay: 0.2s; }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card:nth-child(5) { animation-delay: 0.25s; }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card:nth-child(6) { animation-delay: 0.3s; }
  body[data-home] .section.is-visible .featured-work-grid > .featured-card {
    animation: home-grid-rise 0.6s var(--reveal-ease) both;
  }
  body[data-home] .section.is-visible .featured-work-grid > .featured-card:nth-child(1) { animation-delay: 0.06s; }
  body[data-home] .section.is-visible .featured-work-grid > .featured-card:nth-child(2) { animation-delay: 0.11s; }
  body[data-home] .section.is-visible .featured-work-grid > .featured-card:nth-child(3) { animation-delay: 0.16s; }
  body[data-home] .section.is-visible .featured-work-grid > .featured-card:nth-child(4) { animation-delay: 0.21s; }
  body[data-home] .section.is-visible .featured-work-grid > .featured-card:nth-child(5) { animation-delay: 0.26s; }
  body[data-home] .section.is-visible .featured-work-grid > .featured-card:nth-child(6) { animation-delay: 0.31s; }
}

/*
 * Structural Accent Line System
 * Hairline desaturated gold; corner L-brackets only; no full frames, gradients on
 * lines, or ornamental shapes. Opacity/hover tuned per surface.
 */
.pillar-card,
.featured-card,
.module-card,
.case-study-card {
  position: relative;
}
.pillar-card::before,
.featured-card::before,
.module-card::before,
.case-study-card::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: var(--_struct-op, 0.14);
  transition: opacity 0.35s ease;
  --_line: var(--structural-line);
  background:
    linear-gradient(to right, var(--_line), var(--_line)) left top / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to bottom, var(--_line), var(--_line)) left top / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to left, var(--_line), var(--_line)) right top / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to bottom, var(--_line), var(--_line)) right top / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to right, var(--_line), var(--_line)) left bottom / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to top, var(--_line), var(--_line)) left bottom / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to left, var(--_line), var(--_line)) right bottom / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to top, var(--_line), var(--_line)) right bottom / var(--structural-hairline) var(--_av) no-repeat;
}
.pillar-card::before {
  inset: 1px;
  border-radius: calc(var(--site-card-radius) - 1px);
  --_ah: var(--structural-arm-h-pillar);
  --_av: var(--structural-arm-v-pillar);
  --_struct-op: var(--structural-op-pillar);
}
.featured-card::before {
  inset: 1px;
  border-radius: calc(var(--site-card-radius) - 1px);
  --_ah: var(--structural-arm-h-featured);
  --_av: var(--structural-arm-v-featured);
  --_struct-op: var(--structural-op-featured);
}
.module-card::before {
  inset: 1px;
  border-radius: calc(var(--site-card-radius) - 1px);
  --_ah: var(--structural-arm-h-featured);
  --_av: var(--structural-arm-v-featured);
  --_struct-op: var(--structural-op-featured);
}
.case-study-card::before {
  inset: 1px;
  border-radius: calc(var(--site-card-radius) - 1px);
  --_ah: var(--structural-arm-h-card);
  --_av: var(--structural-arm-v-card);
  --_struct-op: var(--structural-op-case);
}
@media (hover: hover) {
  .pillar-card:hover::before,
  .pillar-card:focus-within::before {
    --_struct-op: calc(var(--structural-op-pillar) * 1.28);
  }
  .featured-card:hover::before,
  .featured-card:focus-within::before {
    --_struct-op: calc(var(--structural-op-featured) * 1.33);
  }
  .module-card:hover::before,
  .module-card:focus-within::before {
    --_struct-op: calc(var(--structural-op-module) * 1.35);
  }
  .case-study-card:hover::before,
  .case-study-card:focus-within::before {
    --_struct-op: calc(var(--structural-op-case) * 1.4);
  }
}

.hero-photo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}

/* Portrait: thin line frame only (no card fill) — muted brass, same language as Featured Work */
.hero-portrait-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0;
  line-height: 0;
  z-index: 0;
  box-sizing: border-box;
  background: transparent;
  border-radius: 2px;
  border: 1px solid rgba(198, 169, 107, 0.26);
  padding: clamp(6px, 1.25vw, 10px);
  box-shadow: none;
  transition:
    border-color 0.45s var(--reveal-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.45s var(--reveal-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
body[data-home] .hero-portrait-frame {
  position: relative;
  display: inline-grid;
  place-items: stretch;
  /* Supports headline hierarchy: present but not dominant */
  width: min(11.875rem, 39vw);
  aspect-ratio: 1;
  max-width: 100%;
  padding: clamp(7px, 1.15vw, 10px);
  border: 1.5px solid var(--featured-border-brass);
  border-radius: 2px;
  background: transparent;
  overflow: hidden;
  /* Brass register + vignette: blends square crop into dark hero, softens edges */
  box-shadow:
    0 0 0 1px rgba(198, 169, 107, 0.05),
    inset 0 0 48px 18px rgba(4, 8, 14, 0.58),
    inset 0 -24px 32px rgba(0, 0, 0, 0.42),
    inset 0 12px 36px rgba(4, 10, 16, 0.35);
}
@media (hover: hover) {
  body[data-home] .hero-photo-wrap:hover .hero-portrait-frame {
    border-color: rgba(198, 169, 107, 0.44);
    box-shadow:
      0 0 0 1px rgba(198, 169, 107, 0.1),
      0 0 32px -8px rgba(198, 169, 107, 0.2),
      inset 0 0 52px 20px rgba(4, 8, 14, 0.62),
      inset 0 -26px 34px rgba(0, 0, 0, 0.44),
      inset 0 14px 38px rgba(4, 10, 16, 0.38);
  }
}

/* Between-section hairlines removed — use .section-title::after + optional .structural-rule */
#main .case-studies {
  border-top: none;
}
#main .philosophy {
  border-top: none;
}

.case-study-modal-panel {
  position: relative;
}
.case-study-modal-panel::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 1px;
  border-radius: calc(var(--radius-lg) - 1px);
  z-index: 0;
  opacity: var(--structural-op-modal);
  --_line: var(--structural-line);
  --_ah: var(--structural-arm-h-card);
  --_av: var(--structural-arm-v-card);
  background:
    linear-gradient(to right, var(--_line), var(--_line)) left top / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to bottom, var(--_line), var(--_line)) left top / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to left, var(--_line), var(--_line)) right top / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to bottom, var(--_line), var(--_line)) right top / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to right, var(--_line), var(--_line)) left bottom / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to top, var(--_line), var(--_line)) left bottom / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to left, var(--_line), var(--_line)) right bottom / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to top, var(--_line), var(--_line)) right bottom / var(--structural-hairline) var(--_av) no-repeat;
}
.case-study-modal-panel .document-modal-body {
  position: relative;
  z-index: 1;
}

/* Manual structural rule (sparingly — same system as .section-title::after) */
hr.structural-rule,
.structural-rule {
  display: block;
  border: 0;
  width: var(--structural-rule-w);
  max-width: 240px;
  min-width: 120px;
  height: var(--structural-rule-h);
  margin: var(--space-xl) auto;
  background: var(--structural-rule-gradient);
  opacity: var(--structural-rule-opacity);
}

/* Page transitions: gradient veil (not a flat black slab) so handoff feels softer. */
#pageFade {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background:
    linear-gradient(
      165deg,
      rgba(245, 240, 230, 0.07) 0%,
      rgba(22, 24, 28, 0.86) 42%,
      rgba(10, 12, 15, 0.94) 100%
    );
}
#pageFade.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Arriving with transition: overlay stays opaque until positioned, then fades out */
html.nav-transition-in #pageFade {
  opacity: 1;
  pointer-events: auto;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 1001;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: var(--color-bg);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius);
  transition: top var(--transition);
}
.skip-link:focus {
  top: var(--space-md);
  outline: 3px solid var(--color-bg);
  outline-offset: 2px;
}

a {
  color: inherit;
  text-decoration: none;
  transition: text-shadow var(--transition);
}
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
@media (hover: hover) {
  a:hover {
    text-shadow: 0 1px 0 rgba(255, 251, 242, 0.72), 0 1px 2px rgba(20, 26, 32, 0.08);
  }
}

button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
  min-width: 0;
}

/* ---------- Sticky Nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(
    180deg,
    rgba(252, 248, 238, 0.97) 0%,
    rgba(248, 243, 232, 0.9) 72%,
    rgba(245, 239, 226, 0.84) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), padding var(--transition);
}
.site-nav--scrolled {
  background: linear-gradient(
    180deg,
    rgba(252, 248, 240, 0.99) 0%,
    rgba(247, 242, 230, 0.94) 55%,
    rgba(242, 237, 225, 0.9) 100%
  );
  border-bottom-color: color-mix(in srgb, var(--color-line) 85%, transparent);
}

/* Homepage nav: frosted gradient band + hairline (no solid fill block) */
body[data-home] .site-nav {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-top) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg-main) 74%, transparent) 55%,
    color-mix(in srgb, var(--bg-main) 66%, transparent) 100%
  );
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: none;
}
body[data-home] .site-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: var(--structural-rule-gradient);
  opacity: 0.78;
}
body[data-home] .site-nav--scrolled {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-top) 94%, transparent) 0%,
    color-mix(in srgb, var(--bg-main) 82%, transparent) 50%,
    color-mix(in srgb, var(--bg-main) 74%, transparent) 100%
  );
  border-bottom: none;
}
body[data-home] .site-nav--scrolled::after {
  opacity: 0.9;
}

/* Home mobile: keep hamburger + nav bar pinned while scrolling (fixed replaces sticky under small viewports). */
@media (max-width: 47.99em) {
  html {
    scroll-padding-top: calc(var(--nav-height) + var(--space-xs));
  }
  body[data-home] {
    padding-top: var(--nav-height);
  }
  body[data-home] .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
  }
}

.nav-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-height);
  padding-block: var(--space-sm);
  transition: min-height var(--transition);
}
@media (min-width: 48em) {
  .nav-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding-block: var(--space-md);
  }
}
.site-nav--scrolled .nav-inner {
  min-height: var(--nav-height-scrolled);
  padding-block: var(--space-xs);
}
@media (min-width: 48em) {
  .site-nav--scrolled .nav-inner {
    padding-block: var(--space-sm);
  }
}
.nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  width: 100%;
  column-gap: var(--space-xs);
}
/* No top-left “Home” row link (interior matches index); menu toggle right on small screens */
body[data-home] .nav-top,
body:not([data-home]) .nav-top {
  justify-content: flex-end;
}
@media (min-width: 48em) {
  body[data-home] .nav-top,
  body:not([data-home]) .nav-top {
    display: none;
  }
  /* Subtle horizontal rule: same grammar on homepage and subpages */
  body[data-home] .nav-links-wrap,
  body:not([data-home]) .nav-links-wrap {
    border-top: none;
    padding-top: 0.625rem;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 8%,
        rgba(20, 26, 32, 0.09) 50%,
        transparent 92%,
        transparent 100%
      )
      0 0 / 100% 1px no-repeat;
  }
  body[data-home] .nav-links,
  body:not([data-home]) .nav-links {
    padding-top: 0.35rem;
  }
}
.nav-links-wrap {
  display: none;
}
@media (min-width: 48em) {
  .nav-links-wrap {
    display: block;
    width: 100%;
    min-width: 0;
    border-top: 1px solid var(--color-line);
  }
  .site-nav:not(.site-nav--scrolled) .nav-links-wrap {
    border-top-color: rgba(20, 26, 32, 0.06);
  }
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
  padding: var(--space-sm) 0 0;
  list-style: none;
}
body[data-home] .nav-links {
  gap: 0.65rem clamp(1.5rem, 4vw, 2.5rem);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.045em;
}
.nav-links a {
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: var(--space-xs) 0;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
}
body[data-home] .nav-links a {
  color: var(--text-muted-quiet);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--color-text);
}
@media (hover: hover) {
  body[data-home] .nav-links a:hover,
  body[data-home] .nav-links a:focus-visible {
    color: var(--accent-gold);
  }
}
@media (hover: none) {
  body[data-home] .nav-links a:focus-visible {
    color: var(--accent-gold);
  }
}
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius);
}
@media (min-width: 48em) {
  .nav-toggle {
    display: none;
  }
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface) 98%, var(--color-bg)) 0%,
    color-mix(in srgb, var(--color-surface) 94%, var(--color-bg)) 100%
  );
  border-bottom: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.nav-menu[hidden] {
  display: none;
}
.nav-menu a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  min-height: var(--touch-min);
  box-sizing: border-box;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5;
  border-radius: var(--radius);
}
.nav-menu a:hover,
.nav-menu a:focus-visible {
  color: var(--color-accent);
}
body[data-home] .nav-menu {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface) 96%, var(--bg-top)) 0%,
    color-mix(in srgb, var(--color-surface) 90%, var(--bg-main)) 100%
  );
  border-bottom-color: rgba(20, 26, 32, 0.12);
}
body[data-home] .nav-menu a:hover,
body[data-home] .nav-menu a:focus-visible {
  color: var(--accent-gold);
}
body[data-home] .nav-toggle {
  color: var(--text-secondary);
  transition: box-shadow 0.2s ease, color 0.2s ease;
}
body[data-home] .nav-toggle:hover,
body[data-home] .nav-toggle:focus-visible {
  box-shadow: var(--home-brass-glow-outer);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  box-sizing: border-box;
  overflow: hidden;
}
@media (min-width: 30em) {
  .hero {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
}
@media (min-width: 48em) {
  .hero {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    padding-top: calc(var(--space-lg) + var(--space-2xs));
    padding-bottom: var(--space-xl);
  }
}

/* Homepage: formal panel — vertical rhythm and depth */
body[data-home] .hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(1.25rem, 3.5vw, 2.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
/* Hero-only: diffused haze — linear blends only; clipped by .hero overflow */
body[data-home] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 251, 242, 0.34) 0%,
      rgba(242, 237, 227, 0) 45%,
      rgba(242, 237, 227, 0) 68%,
      rgba(232, 226, 214, 0.12) 88%,
      rgba(232, 226, 214, 0) 100%
    ),
    linear-gradient(
      168deg,
      rgba(20, 26, 32, 0.03) 0%,
      transparent 42%,
      transparent 58%,
      rgba(20, 26, 32, 0.018) 100%
    );
}

/* Homepage: extra air below nav so the name reads anchored, not floating */
body:not([data-home]) .hero {
  padding-top: calc(var(--space-md) + var(--space-sm));
}
@media (min-width: 30em) {
  body:not([data-home]) .hero {
    padding-top: calc(var(--space-lg) + var(--space-xs));
  }
}
@media (min-width: 48em) {
  body:not([data-home]) .hero {
    padding-top: calc(var(--space-lg) + var(--space-md));
  }
}

.hero-card {
  --frameInset: -15%;
  position: relative;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  height: auto;
  overflow: visible;
}
body[data-home] .hero-card {
  z-index: 1;
  max-width: 44rem;
}
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 46rem;
  width: 100%;
  min-width: 0;
  padding: var(--space-sm) var(--space-md) var(--space-xs);
}
@media (min-width: 48em) {
  .hero-content {
    padding: var(--space-md) var(--space-xl) var(--space-2xs);
  }
}
body[data-home] .hero-content {
  padding: clamp(1rem, 3vw, 1.65rem) var(--space-lg) clamp(0.85rem, 2vw, 1.35rem);
  max-width: 42rem;
}
@media (min-width: 48em) {
  body[data-home] .hero-content {
    padding-inline: var(--space-xl);
  }
}
.hero-name {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 4.2rem);
  letter-spacing: 0.085em;
  word-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-home] .hero-name {
  margin: 0 0 clamp(0.75rem, 2vw, 1rem);
  font-size: clamp(2rem, 7.2vw, 3.9rem);
  letter-spacing: 0.038em;
  word-spacing: 0.02em;
  line-height: 1.08;
  color: var(--text-primary);
  text-shadow: 0 1px 0 rgba(255, 251, 242, 0.62);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
@media (min-width: 26rem) {
  body[data-home] .hero-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 5vw, 2.75rem);
  font-weight: 400;
  margin: 0 0 var(--space-sm);
  letter-spacing: 0.09em;
  word-spacing: 0.08em;
  line-height: 1.22;
  overflow-wrap: break-word;
}
/* Formal designation: sans, uppercase, subdued — homepage only */
body[data-home] .hero-title {
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 2vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  word-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 auto 1.4rem;
  max-width: 38rem;
}
/* If headline uses multi-line spans (headlineLines), keep same formal designation system */
body[data-home] .hero-title .hero-title-line--primary,
body[data-home] .hero-title .hero-title-line--secondary,
body[data-home] .hero-title .hero-title-line--amp {
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 2vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.55;
}
body[data-home] .hero-title .hero-title-line--secondary-first {
  margin-top: 0.4em;
}
.hero-subtitle {
  font-size: max(0.9375rem, 15px);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xs);
  letter-spacing: 0.01em;
}
body[data-home] .hero-subtitle {
  font-size: clamp(0.9375rem, 2.15vw, 1.0625rem);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.58;
  letter-spacing: 0.015em;
  margin: 0 auto 1.05rem;
  max-width: 38rem;
}
.hero-positioning,
.hero-positioning-block {
  font-size: max(0.875rem, 14px);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 var(--space-md);
  letter-spacing: 0.01em;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}
body[data-home] .hero-positioning-block {
  font-size: max(0.84375rem, 13.5px);
  color: var(--text-muted-quiet);
  font-weight: 400;
  line-height: 1.68;
  margin: 0 auto 1.2rem;
  max-width: 36rem;
}
.hero-title-line {
  display: block;
}
.hero-title-line--primary {
  font-size: clamp(1.9rem, 6.2vw, 3.35rem);
  letter-spacing: 0.09em;
  word-spacing: 0.08em;
}
.hero-title-line--secondary {
  font-size: clamp(1.3rem, 4.2vw, 2.05rem);
  letter-spacing: 0.08em;
  word-spacing: 0.08em;
}
.hero-title-line--secondary-first {
  margin-top: var(--space-xs);
}
.hero-title-line--amp {
  font-size: clamp(1.3rem, 4.2vw, 2.05rem);
  letter-spacing: 0.12em;
}
@media (min-width: 30em) {
  .hero-title {
    letter-spacing: 0.1em;
  }
  .hero-title-line--primary {
    letter-spacing: 0.1em;
  }
  .hero-title-line--secondary {
    letter-spacing: 0.09em;
  }
}
.hero-subheadline {
  font-size: max(0.875rem, 14px);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-lg);
  overflow-wrap: break-word;
}
.hero-location {
  font-size: max(0.875rem, 14px);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  letter-spacing: 0.01em;
}
body[data-home] .hero-location {
  font-size: 0.8125rem;
  color: var(--text-muted-quiet);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 auto 1.65rem;
}
@media (min-width: 30em) {
  .hero-subheadline {
    margin-bottom: var(--space-xl);
  }
}
.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  margin-bottom: calc(var(--space-lg) + var(--space-sm) - var(--space-2xs));
}
body[data-home] .hero-ctas {
  gap: 1.35rem;
  margin-top: 0.15rem;
  margin-bottom: 1.85rem;
}
.hero-photo {
  max-height: calc(2 * var(--touch-min) * 1.3);
  width: auto;
  height: auto;
  flex-shrink: 0;
  display: block;
}
/*
 * Homepage hero portrait (outdoor / natural light):
 * object-position = mid-chest → head, centered, headroom (tweak % if source reframes).
 * Filters = soften greens, slight contrast, cooler/neutral vs warm snap, blend into hero.
 */
body[data-home] .hero-portrait-frame .hero-photo {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  max-width: none;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 1px;
  filter:
    brightness(0.87)
    contrast(1.1)
    saturate(0.8)
    hue-rotate(-5deg);
  transition: filter 0.45s var(--reveal-ease, ease);
}
@media (hover: hover) {
  body[data-home] .hero-photo-wrap:hover .hero-portrait-frame .hero-photo {
    filter:
      brightness(0.9)
      contrast(1.09)
      saturate(0.84)
      hue-rotate(-4deg);
  }
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  min-width: 10rem;
  transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
body[data-home] .hero-cta {
  font-weight: 500;
  letter-spacing: 0.055em;
  border-radius: 2px;
  font-size: 0.8125rem;
  transition:
    border-color var(--transition),
    background var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    text-shadow 0.2s ease;
}
.hero-cta--primary {
  min-height: calc(var(--touch-min) - 6px);
  padding: calc(var(--space-sm) - 2px) calc(var(--space-lg) - 10px);
  font-size: 0.9375rem;
  min-width: 8.75rem;
  background: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid var(--color-accent);
}
body[data-home] .hero-cta--primary {
  min-height: var(--touch-min);
  padding: 0.65rem 1.85rem;
  min-width: 11rem;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid rgba(20, 26, 32, 0.2);
  box-shadow: 0 1px 0 rgba(255, 251, 242, 0.76);
}
body[data-home] .hero-cta--primary:hover,
body[data-home] .hero-cta--primary:focus-visible {
  background: var(--home-cta-hover-bg);
  color: var(--text-primary);
  border-color: var(--home-cta-hover-border);
  box-shadow: var(--home-cta-hover-shadow);
  text-shadow: var(--home-brass-glow-text);
}
.hero-cta--primary:hover,
.hero-cta--primary:focus-visible {
  background: transparent;
  color: var(--color-accent);
}
.hero-cta--secondary {
  border: 1px solid var(--color-line);
  color: var(--color-text);
  min-height: calc(0.7 * var(--touch-min));
  padding: calc(0.7 * var(--space-sm)) calc(0.7 * var(--space-lg));
  font-size: 0.7rem;
  min-width: 7rem;
}
body[data-home] .hero-cta--secondary {
  background: transparent;
  color: color-mix(in srgb, var(--text-secondary) 78%, var(--text-primary) 22%);
  border: 1px solid rgba(20, 26, 32, 0.14);
  min-height: calc(var(--touch-min) - 4px);
  padding: 0.52rem 1.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  min-width: 7.5rem;
  box-shadow: 0 1px 0 rgba(255, 251, 242, 0.7);
}
body[data-home] .hero-cta--secondary:hover,
body[data-home] .hero-cta--secondary:focus-visible {
  background: var(--home-cta-secondary-hover-bg);
  border-color: var(--home-cta-secondary-hover-border);
  color: color-mix(in srgb, var(--text-primary) 94%, var(--text-secondary) 6%);
  box-shadow: var(--home-cta-secondary-hover-shadow);
  text-shadow: var(--home-brass-glow-text);
}
.hero-cta--secondary:hover,
.hero-cta--secondary:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
body[data-home] .hero-cta:focus-visible {
  outline: 1px solid var(--accent-gold);
  outline-offset: 3px;
}
.hero-credibility {
  font-size: max(0.8125rem, 13px);
  color: var(--color-text-muted);
  margin: 0 auto;
  line-height: 1.45;
  padding-top: var(--space-sm);
  max-width: 40rem;
}
body[data-home] .hero-credibility {
  color: var(--text-muted-quiet);
  padding-top: 0.35rem;
  max-width: 38rem;
}
.hero-credibility-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}
.hero-credibility-label {
  display: block;
  width: 100%;
  flex-basis: 100%;
  margin-bottom: var(--space-2xs);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
body[data-home] .hero-credibility-label {
  color: var(--text-muted-quiet);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  font-weight: 500;
}
.hero-credibility-chip {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  background: rgba(255, 251, 242, 0.08);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}
body[data-home] .hero-credibility-chip {
  background: rgba(255, 251, 242, 0.52);
  border: 1px solid rgba(20, 26, 32, 0.12);
  color: var(--text-secondary);
  border-radius: 2px;
}
a.hero-credibility-chip:hover,
a.hero-credibility-chip:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
body[data-home] a.hero-credibility-chip:hover,
body[data-home] a.hero-credibility-chip:focus-visible {
  border-color: var(--accent-line);
  color: var(--accent-gold);
}

/* ---------- Impact (At a Glance) ---------- */
.method-strip {
  max-width: 80ch;
  margin-top: var(--space-md);
}
#main .philosophy .method-strip {
  max-width: min(40rem, 100%);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-lg);
}
.method-strip__intro {
  color: var(--color-text-muted);
  font-size: var(--text-body);
  line-height: 1.6;
  margin: 0 0 var(--space-md);
  max-width: 70ch;
}
#main .philosophy .method-strip__intro {
  max-width: min(52ch, 100%);
  margin-left: auto;
  margin-right: auto;
}
#main .philosophy .method-strip__heading {
  max-width: min(52ch, 100%);
  margin-left: auto;
  margin-right: auto;
}
#main .philosophy .method-stages {
  margin-left: auto;
  margin-right: auto;
  max-width: 38rem;
}
.method-strip__heading {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
}
.method-stages {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding-left: calc(var(--space-md) + 10px);
}
.method-stages::before {
  content: '';
  position: absolute;
  left: calc(var(--space-md) + 2px);
  top: 0.25rem;
  bottom: 0.25rem;
  width: 2px;
  background: rgba(255, 251, 242, 0.1);
  border-radius: 999px;
}
.method-stage {
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: rgba(255, 251, 242, 0.04);
  overflow: clip;
}
.method-stage::before {
  content: '';
  position: absolute;
  left: calc(-1 * (var(--space-md) + 10px) + var(--space-md));
  top: 1.1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 251, 242, 0.2);
  border: 1px solid rgba(255, 251, 242, 0.14);
}
.method-stage__button {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xs);
  cursor: pointer;
}
.method-stage__button:hover {
  background: rgba(255, 251, 242, 0.05);
}
.method-stage__button:focus-visible {
  outline: 2px solid rgba(255, 251, 242, 0.28);
  outline-offset: 2px;
}
.method-stage__title {
  font-weight: 600;
  line-height: 1.35;
}
.method-stage__toggle {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  align-self: start;
  padding-top: 0.05rem;
}
.method-stage__panel {
  padding: 0 var(--space-md);
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms ease, opacity 220ms ease;
}
.method-stage__panel-inner {
  padding: 0 0 var(--space-md);
  color: var(--color-text);
}
.method-stage__panel p {
  margin: var(--space-sm) 0 0;
  line-height: 1.6;
  color: var(--color-text);
}
.method-stage__example {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.method-stage__example a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.method-stage.is-open .method-stage__panel {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .method-stage__panel {
    transition: none;
  }
  .method-stage__button:hover {
    background: transparent;
  }
}

.impact-list,
.philosophy-list {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  max-width: 70ch;
}
.impact-list li,
.philosophy-list li {
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 251, 242, 0.06);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-text);
}

/* ---------- Sections ---------- */
/* Section padding matches hero-to-content gap: space-md + space-md (base), space-lg + space-lg (48em) */
.section {
  padding: var(--space-md) 0;
  text-align: left;
}
@media (min-width: 48em) {
  .section {
    padding: var(--space-lg) 0;
  }
}
/* First section after hero: extra top padding for breathing room */
#main > .section:first-of-type {
  padding-top: var(--space-xl);
}
@media (min-width: 48em) {
  #main > .section:first-of-type {
    padding-top: var(--space-2xl);
  }
}
/* Case studies: visual separation from foundational work above */
#main .case-studies {
  border-top: 1px solid var(--color-line);
}
/* Philosophy: hairline on interior index only; homepage uses continuous background */
#main .philosophy {
  border-top: 1px solid var(--color-line);
}
body[data-home] #main .philosophy {
  border-top: none;
}
.section .container {
  text-align: left;
}
/* Homepage sections (below hero): same content rail as interior; hero unchanged */
body[data-home] #main > .section > .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body[data-home] #main > .section > .container > * {
  max-width: min(var(--content-rail-max), 100%);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.reveal-target {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}
.reveal-target.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-target {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}
.section-title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 400;
  margin: 0 0 var(--space-sm);
  letter-spacing: 0.07em;
  line-height: 1.3;
}
/* Structural rule under section headings — centered, nav-aligned gold fade */
.section-title::after {
  content: "";
  display: block;
  width: var(--structural-rule-w);
  max-width: 240px;
  min-width: 120px;
  height: var(--structural-rule-h);
  margin: var(--space-md) auto var(--space-lg);
  background: var(--structural-rule-gradient);
  opacity: var(--structural-rule-opacity);
}
@media (min-width: 30em) {
  .section-title {
    letter-spacing: 0.08em;
  }
}
/* No title underline where headings are not primary section anchors */
.section-title--plain::after {
  content: none;
  display: none;
}
.section-intro {
  color: var(--color-text-muted);
  font-size: var(--text-body);
  line-height: 1.6;
  margin: 0 auto var(--space-xl);
  max-width: 100%;
}

/* More breathing room between subtitle and grids/cards */
.case-studies .section-intro,
.impact .section-intro,
.pillars .section-intro,
.leadership .section-intro,
.featured-work .section-intro,
.philosophy .section-intro {
  margin-bottom: calc((var(--space-xl) + var(--space-2xs)) * 0.5);
}

/* Systems Philosophy: full rail width; copy stays centered per section rules */
.philosophy-narrative {
  max-width: 100%;
  margin: 0 auto var(--space-xl);
  color: var(--color-text-muted);
  font-size: var(--text-body);
  line-height: 1.65;
  text-align: center;
}
.philosophy-narrative p {
  margin: 0 0 var(--space-md);
  text-align: center;
}
.philosophy-narrative > p:last-child {
  margin-bottom: 0;
}
.philosophy-pull {
  font-weight: 600;
  font-size: clamp(1rem, 2.4vw, 1.0625rem);
  letter-spacing: 0.02em;
  color: var(--color-text);
  border-left: none;
  padding: var(--space-md) var(--space-md);
  margin: var(--space-lg) auto !important;
  max-width: min(44ch, 100%);
  border-top: var(--structural-hairline) solid var(--structural-divider);
  border-bottom: var(--structural-hairline) solid var(--structural-divider);
  background: color-mix(in srgb, var(--structural-divider) 28%, transparent);
  border-radius: var(--radius);
}
.philosophy-pillars-lead {
  margin-top: var(--space-xl) !important;
  margin-bottom: var(--space-sm) !important;
  color: var(--color-text);
  font-weight: 500;
  text-align: center;
}
.philosophy-pillar-ties {
  margin: var(--space-xs) auto var(--space-lg);
  padding-left: 1.35rem;
  list-style: disc;
  list-style-position: outside;
  color: var(--color-text-muted);
  max-width: min(48ch, 100%);
  text-align: left;
  display: table;
}
.philosophy-pillar-ties li {
  margin-bottom: var(--space-sm);
}
.philosophy-pillar-ties li:last-child {
  margin-bottom: 0;
}
.philosophy-closing {
  margin-top: var(--space-xl) !important;
  color: var(--color-text);
  text-align: center;
}

/* ---------- Capabilities ---------- */
.capability-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.capability-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs) 0;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-line);
  transition: background var(--transition);
}
@media (min-width: 36em) {
  .capability-item {
    grid-template-columns: 12rem 1fr;
    gap: 0 var(--space-lg);
  }
}
@media (min-width: 48em) {
  .capability-item {
    grid-template-columns: 14rem 1fr;
  }
}
.capability-item:hover {
  background: rgba(255, 251, 242, 0.05);
}
.capability-label {
  font-weight: 600;
  font-size: 1rem;
}
.capability-desc {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}
/* ---------- At a Glance (microproof strip) ---------- */
.microproof-strip {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}
.microproof-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 400;
  margin: 0 0 var(--space-sm);
  letter-spacing: 0.06em;
}
.microproof-intro {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
  line-height: 1.5;
}
.microproof-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 36em) {
  .microproof-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64em) {
  .microproof-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.microproof-item {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-line);
}
.microproof-item:last-child {
  border-bottom: none;
}

/* ---------- What I Do ---------- */
.what-i-do-list {
  max-width: 40rem;
}
.what-i-do-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: var(--space-sm);
}
.what-i-do-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- Foundation ---------- */
.foundation-list {
  max-width: 40rem;
}
.foundation-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: var(--space-sm);
}
.foundation-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- Case Studies (2-col desktop) ---------- */
.case-studies-trajectory {
  margin: -0.25rem 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: rgba(255, 251, 242, 0.06);
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
}
.case-studies-trajectory-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-xs);
}
.case-studies-trajectory-body {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Case study grids: compact nav tiles; up to 4 columns on desktop when viewport allows */
.case-study-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
@media (min-width: 36em) {
  .case-study-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
}
@media (min-width: 52em) {
  .case-study-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
  }
}
@media (min-width: 70em) {
  .case-study-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

/*
 * Pillar featured grids: keep the same tile width as the default 4-up row (each cell = (100% − 3×gap) / 4),
 * but when there are only three cards at the widest breakpoint, use three columns and center the row
 * so the trio is not left-weighted with an empty fourth track.
 */
@media (min-width: 70em) {
  body:not([data-home]) .detail-section.pillar-section .case-study-grid:has(> .case-study-card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc((100% - 3 * var(--space-md)) * 3 / 4 + 2 * var(--space-md));
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Main page: center-justified copy */
#main .section .container {
  text-align: center;
}

.section .section-title,
.section .subsection-title,
.section .section-intro {
  text-align: center;
}

/* Keep card content centered within grid cells */
#main .case-study-card,
#main .module-card {
  text-align: center;
}

/* Philosophy method strip and lists: center blocks and text */
#main .method-strip,
#main .philosophy-list {
  margin-left: auto;
  margin-right: auto;
}

#main .method-strip__intro,
#main .method-strip__heading,
#main .method-strip p,
#main .philosophy-list,
#main .philosophy-list li {
  text-align: center;
}

#main .pillars-grid,
#main .pillar-card,
#main .featured-work-grid,
#main .featured-card-link,
#main .work-category,
#main .work-category .work-category-name,
#main .work-category .work-category-desc {
  text-align: center;
}

#main .about-text,
#main .closing-inner,
#main .closing-body {
  text-align: center;
}

#main .case-studies-trajectory {
  text-align: center;
}

/* Center block elements with max-width */
#main .section-intro,
#main .method-strip__intro,
#main .about-text {
  margin-left: auto;
  margin-right: auto;
}

/* Philosophy method stages: override left-aligned button and panel content */
#main .method-stage__button {
  text-align: center;
}

#main .method-stage__panel-inner,
#main .method-stage__panel p,
#main .method-stage__example {
  text-align: center;
}

.expand-toggle {
  margin: var(--space-lg) auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--touch-min) + 14px);
  padding: 0.95rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 169, 98, 0.45);
  background: rgba(201, 169, 98, 0.10);
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.expand-toggle:hover,
.expand-toggle:focus-visible {
  background: rgba(201, 169, 98, 0.16);
  border-color: rgba(201, 169, 98, 0.7);
}

.expand-toggle--sub {
  margin-top: var(--space-md);
}

.expand-panel {
  overflow: hidden;
  opacity: 0;
  max-height: 0px;
  padding: 0;
  margin: 0;
  transition: max-height var(--transition), opacity var(--transition);
}

.expand-panel[hidden] {
  display: none;
}

/* Expand panel: align with primary grid gap */
#case-studies-more .case-study-grid {
  margin-top: var(--space-md);
}
@media (min-width: 36em) {
  #case-studies-more .case-study-grid {
    margin-top: var(--space-md);
  }
}

.modules-block .expand-panel .module-grid {
  margin-top: var(--space-sm);
}
@media (min-width: 36em) {
  .modules-block .expand-panel .module-grid {
    margin-top: var(--space-md);
  }
}
@media (min-width: 56em) {
  .modules-block .expand-panel .module-grid {
    margin-top: var(--space-md);
  }
}
@media (min-width: 72em) {
  .modules-block .expand-panel .module-grid {
    margin-top: var(--space-sm);
  }
}
.case-study-card {
  background: color-mix(in srgb, var(--color-surface) 94%, var(--paper-cream-highlight) 5.5%);
  border: 1px solid color-mix(in srgb, var(--color-line) 80%, rgba(235, 229, 217, 0.12) 20%);
  border-radius: var(--site-card-radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .case-study-card:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: rgba(198, 169, 107, 0.38);
    box-shadow:
      0 0 0 1px rgba(198, 169, 107, 0.12),
      0 10px 26px rgba(0, 0, 0, 0.32),
      0 0 28px -8px rgba(198, 169, 107, 0.14);
  }
  .case-study-card:focus-within {
    transform: translateY(-2px) scale(1.03);
    border-color: rgba(198, 169, 107, 0.38);
    box-shadow:
      0 0 0 1px rgba(198, 169, 107, 0.12),
      0 10px 26px rgba(0, 0, 0, 0.32),
      0 0 28px -8px rgba(198, 169, 107, 0.14);
  }
}
@media (hover: none) {
  .case-study-card:active {
    transform: scale(0.99);
  }
}
.case-study-link {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm) var(--space-md);
  min-height: var(--site-card-min-h);
  min-block-size: var(--site-card-min-h);
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 48em) {
  .case-study-link {
    padding: var(--space-sm) var(--space-md);
    min-height: 6.5rem;
    min-block-size: 6.5rem;
  }
}
.case-study-number {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}
.case-study-pillar {
  display: block;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2xs);
}
.case-study-title {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.65vw, 1.2rem);
  font-weight: 400;
  margin: 0 0 var(--space-2xs);
  letter-spacing: 0.055em;
  line-height: 1.28;
}
.case-study-excerpt {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.case-study-cta {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: gap var(--transition);
  margin-top: auto;
}
.case-study-arrow {
  transition: transform var(--transition);
}
@media (hover: hover) {
  .case-study-card:hover .case-study-arrow {
    transform: translateX(4px);
  }
}
.case-study-card:focus-within .case-study-arrow {
  transform: translateX(4px);
}

/*
 * Compact tiles: keep supporting sentences in DOM for AT / SEO; hide from layout.
 * (Homepage injects shorter cards; pillar/creative pages may still ship descriptions in HTML.)
 */
.case-study-card-desc,
.module-desc,
.case-study-excerpt,
.pillar-proof,
.featured-card-subtitle,
.featured-card-outcome {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Supporting Modules (homepage + case pages) ---------- */
.modules-block {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-line);
}
.subsection-title {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 400;
  margin: 0 0 var(--space-md);
  letter-spacing: 0.07em;
  line-height: 1.3;
}
/* Supporting modules layout (used on case study pages).
   Homepage uses strips and overrides this via #case-studies .module-grid. */
.module-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 36em) {
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}
@media (min-width: 56em) {
  .module-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}
@media (min-width: 72em) {
  .module-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
  }
}
.module-card {
  background: color-mix(in srgb, var(--color-surface) 94%, var(--paper-cream-highlight) 5.5%);
  border: 1px solid color-mix(in srgb, var(--color-line) 80%, rgba(235, 229, 217, 0.12) 20%);
  border-radius: var(--site-card-radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .module-card:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: rgba(198, 169, 107, 0.38);
    box-shadow:
      0 0 0 1px rgba(198, 169, 107, 0.12),
      0 10px 26px rgba(0, 0, 0, 0.32),
      0 0 28px -8px rgba(198, 169, 107, 0.14);
  }
  .module-card:focus-within {
    transform: translateY(-2px) scale(1.03);
    border-color: rgba(198, 169, 107, 0.38);
    box-shadow:
      0 0 0 1px rgba(198, 169, 107, 0.12),
      0 10px 26px rgba(0, 0, 0, 0.32),
      0 0 28px -8px rgba(198, 169, 107, 0.14);
  }
}
.module-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  min-height: var(--site-card-min-h);
  min-block-size: var(--site-card-min-h);
}
@media (min-width: 48em) {
  .module-link {
    padding: var(--space-sm) var(--space-md);
    min-height: 6.5rem;
    min-block-size: 6.5rem;
  }
}
.module-kicker {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2xs);
}
.module-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(0.9375rem, 1.5vw, 1.1rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.055em;
}
.module-desc {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Case Study Modal ---------- */
body[data-case-study-scroll-lock] {
  overflow: hidden;
}
.case-study-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  overflow: auto;
}
.case-study-modal[hidden] {
  display: none;
}
.case-study-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  cursor: pointer;
}
.case-study-modal-panel {
  position: relative;
  width: 100%;
  max-width: 36rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.case-study-modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 3;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
}
.case-study-modal-close:hover,
.case-study-modal-close:focus-visible {
  color: var(--color-text);
  background: rgba(255, 251, 242, 0.14);
}
.case-study-modal-content {
  position: relative;
  z-index: 1;
  padding-right: var(--space-2xl);
}
.case-study-modal-title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 400;
  margin: 0 0 var(--space-xs);
  letter-spacing: 0.06em;
}
.case-study-modal-subtitle {
  font-size: 1rem;
  color: var(--color-accent);
  margin: 0 0 var(--space-lg);
}
.case-study-modal-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.case-study-modal-row {
  margin: 0;
}
.case-study-modal-row dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: var(--space-2xs);
}
.case-study-modal-row dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.case-study-modal-decisions-heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin: var(--space-xl) 0 var(--space-sm);
}
.case-study-modal-decisions {
  margin: 0 0 var(--space-xl);
  padding-left: var(--space-lg);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.case-study-modal-decisions li {
  margin-bottom: var(--space-xs);
}
.case-study-modal-decisions li:last-child {
  margin-bottom: 0;
}
.case-study-modal-actions {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
}
.case-study-copy-link {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  cursor: pointer;
}
.case-study-copy-link:hover,
.case-study-copy-link:focus-visible {
  background: rgba(201, 169, 98, 0.1);
}

/* ---------- Document sample modal (e.g. illustrative agreement) ---------- */
.document-sample-wrap {
  margin-top: var(--space-lg);
}
.document-sample-open {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
  text-align: left;
}
.document-sample-open:hover,
.document-sample-open:focus-visible {
  color: var(--color-text);
}
.document-modal.case-study-modal {
  overflow: hidden;
}
.document-modal.case-study-modal .case-study-modal-panel {
  z-index: 1;
  max-width: min(52rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-lg);
  padding-top: var(--space-2xl);
}
.document-modal .document-modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  padding-right: var(--space-sm);
  margin-top: var(--space-2xs);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.document-modal .document-modal-body strong {
  color: var(--color-text);
  font-weight: 600;
}
.document-modal-doc-pretitle {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: calc(var(--space-xs) * -1) 0 var(--space-md);
}
.document-modal-doc-title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 400;
  margin: 0 0 var(--space-xs);
  color: var(--color-text);
  letter-spacing: 0.04em;
}
.document-modal-disclaimer {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-accent);
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: rgba(255, 251, 242, 0.05);
}
.document-modal-section {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  margin: var(--space-xl) 0 var(--space-sm);
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.document-modal-section:first-of-type {
  margin-top: var(--space-md);
}
.document-modal-body hr.document-modal-hr {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: var(--space-lg) 0;
}
.document-modal-body ul {
  margin: var(--space-sm) 0 var(--space-md);
  padding-left: var(--space-lg);
}
.document-modal-body li {
  margin-bottom: var(--space-2xs);
}
.document-modal-signatures {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
}

/* ---------- Creative Work (categories) ---------- */
.creative-work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 36em) {
  .creative-work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64em) {
  .creative-work-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.work-category {
  display: block;
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
@media (min-width: 48em) {
  .work-category {
    padding: var(--space-md);
  }
}
.work-category:hover,
.work-category:focus-visible {
  border-color: var(--color-accent);
  background: rgba(201, 169, 98, 0.04);
}
.work-category-name {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 var(--space-xs);
}
.work-category-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* ---------- Pillars (4 across) ---------- */
/* Deep links from subpages (breadcrumbs) — clear fixed nav */
body[data-home] #pillar-design,
body[data-home] #pillar-music,
body[data-home] #pillar-fabrication,
body[data-home] #pillar-automation,
body[data-home] #leadership {
  scroll-margin-top: calc(var(--nav-height-scrolled) + var(--space-md));
}
/* Pillar landing: deep link targets for case cards (system map → music, etc.) */
body[data-pillar] .case-study-card[id] {
  scroll-margin-top: calc(var(--nav-height-scrolled) + var(--space-md));
}
body[data-pillar] .detail-section[id] {
  scroll-margin-top: calc(var(--nav-height-scrolled) + var(--space-md));
}
.design-drill-downs__intro {
  margin: 0 0 var(--space-md);
  max-width: 52ch;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 36em) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}
@media (min-width: 56em) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}
@media (min-width: 72em) {
  .pillars-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }
}
.pillar-card {
  display: block;
  padding: var(--space-lg);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--paper-cream-highlight) 5.5%);
  border: 1px solid color-mix(in srgb, var(--color-line) 80%, rgba(235, 229, 217, 0.12) 20%);
  border-radius: var(--site-card-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
}
/* Structural corners: shared .pillar-card::before in Structural Accent Line System */
.pillar-card:hover,
.pillar-card:focus-visible {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(198, 169, 107, 0.1),
    0 10px 28px rgba(0, 0, 0, 0.42),
    0 0 26px -8px rgba(198, 169, 107, 0.12);
  border-color: rgba(198, 169, 107, 0.32);
}
.pillar-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
}
.pillar-proof {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 var(--space-sm);
}
.pillar-card-cta {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.pillar-arrow {
  transition: transform var(--transition);
}
.pillar-card:hover .pillar-arrow {
  transform: translateX(2px);
}

/* ---------- Featured Work / Systems Across Domains grid ---------- */
/* Same column widths as .pillars-grid (homepage-only grids share this track) */
.featured-work-grid,
.leadership-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 36em) {
  .leadership-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  .featured-work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}
@media (min-width: 56em) {
  .leadership-grid {
    gap: var(--space-lg);
  }
  /* Systems Across Domains: five in one row from tablet landscape up */
  .featured-work-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-sm);
  }
}
@media (min-width: 72em) {
  .leadership-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }
}
/* Homepage: tighter cards + type scale for five-across layout */
@media (min-width: 56em) {
  body[data-home] #main .section.featured-work .featured-work-grid > .featured-card {
    min-height: 6.75rem;
  }
  body[data-home] #main .section.featured-work .featured-card .home-module {
    padding: var(--space-xs) var(--space-sm);
  }
  body[data-home] #main .section.featured-work .home-module__footer {
    padding-top: var(--space-2xs);
  }
  body[data-home] #main .section.featured-work .home-module__body {
    gap: 0.2rem;
  }
  body[data-home] #main .section.featured-work .featured-card-pillar {
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2xs);
  }
  body[data-home] #main .section.featured-work .featured-card-title {
    font-size: clamp(0.72rem, 0.85vw, 0.875rem);
    line-height: 1.28;
  }
  body[data-home] #main .section.featured-work .featured-card-cta {
    font-size: 0.65rem;
    letter-spacing: 0.02em;
  }
}

/* Leadership case cards: center as a group (same width as pillar columns) */
@media (min-width: 36em) and (max-width: 71.98em) {
  body[data-home] #main .section.leadership .leadership-grid > .leadership-card:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: calc((100% - var(--space-md)) / 2);
  }
}
@media (min-width: 56em) and (max-width: 71.98em) {
  body[data-home] #main .section.leadership .leadership-grid > .leadership-card:nth-child(3) {
    max-width: calc((100% - var(--space-lg)) / 2);
  }
}
@media (min-width: 72em) {
  body[data-home] #main .section.leadership .leadership-grid {
    grid-template-columns: repeat(3, calc((100% - 3 * var(--space-md)) / 4));
    justify-content: center;
  }
}

/* ---------- Leadership (Creative Direction) ---------- */
.leadership-tieback {
  margin-top: var(--space-xl);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 60ch;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#main .leadership .section-intro,
#main .leadership .section-title,
#main .leadership .leadership-grid,
#main .leadership .leadership-tieback,
#main .leadership .leadership-cta {
  text-align: center;
}
.leadership-cta {
  margin-top: var(--space-md);
  margin-bottom: 0;
}
.leadership-cta a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-accent);
}
.leadership-cta a:hover,
.leadership-cta a:focus-visible {
  text-decoration: underline;
}

.featured-card {
  background: color-mix(in srgb, var(--color-surface) 94%, var(--paper-cream-highlight) 5.5%);
  border: 1px solid color-mix(in srgb, var(--color-line) 80%, rgba(235, 229, 217, 0.12) 20%);
  border-radius: var(--site-card-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.featured-card:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(198, 169, 107, 0.1),
    0 10px 28px rgba(0, 0, 0, 0.42),
    0 0 26px -8px rgba(198, 169, 107, 0.12);
  border-color: rgba(198, 169, 107, 0.32);
}
.featured-card-link {
  display: block;
  padding: var(--space-lg);
  color: inherit;
  text-decoration: none;
}
.featured-card-pillar {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}
.featured-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--space-xs);
  text-wrap: balance;
}
@media (max-width: 48em) {
  .featured-card-title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
}
.featured-card-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
  line-height: 1.45;
}
.featured-card-outcome {
  font-size: 0.8125rem;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
  font-style: italic;
}
.featured-card-cta {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.featured-arrow {
  transition: transform var(--transition);
}
.featured-card-link:hover .featured-arrow {
  transform: translateX(2px);
}

/* ---------- Foundational Work (legacy, kept for subpages) ---------- */
.foundational-work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 36em) {
  .foundational-work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}
@media (min-width: 56em) {
  .foundational-work-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}
@media (min-width: 72em) {
  .foundational-work-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
  }
}
.foundational-work-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.foundational-work-highlight {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background: rgba(201, 169, 98, 0.04);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.foundational-work-highlight-title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 var(--space-xs);
}
.foundational-work-highlight-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
}
.foundational-work-highlight-scope {
  margin: 0 0 var(--space-sm);
  padding-left: 1.25rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.foundational-work-highlight-scope li {
  margin-bottom: var(--space-xs);
}
.foundational-work-highlight-note {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

/* ---------- What I'm Looking For (legacy) ---------- */
.looking-for {
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}
.looking-for-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: var(--space-sm);
}
.looking-for-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}
.looking-for-titles {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: var(--space-md) 0 var(--space-lg);
  font-style: italic;
}
.looking-for-cta {
  display: inline-block;
  font-weight: 600;
  color: var(--color-accent);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-accent);
  transition: opacity var(--transition);
}
.looking-for-cta:hover,
.looking-for-cta:focus-visible {
  opacity: 0.85;
}

/* ---------- Skills & Systems (stacked blocks) ---------- */
.skills-and-systems .section-intro {
  margin-bottom: calc(var(--space-xl) * 0.35);
}
.skills-and-systems #skills-matrix-grid {
  margin-top: 0;
}
.skills-matrix-grid {
  display: block;
}
.skills-block {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-line);
}
.skills-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.skills-block-title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin: 0 0 var(--space-md);
}
.skills-block-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}
.skills-block-item {
  margin-bottom: var(--space-xs);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.skills-block-item:last-child {
  margin-bottom: 0;
}

/* ---------- Closing CTA (homepage) ---------- */
.closing {
  scroll-margin-top: var(--space-lg);
}
body[data-home] #main > .section.closing {
  padding-top: calc(var(--space-3xl) + var(--space-md));
  padding-bottom: calc(var(--space-3xl) + var(--space-xl));
}
.closing-inner {
  max-width: 40rem;
  margin: 0 auto;
}
.closing-body {
  margin: 0;
}
.closing-lede {
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  line-height: 1.68;
  color: var(--color-text-muted);
  margin: 0 auto var(--space-md);
  max-width: 38rem;
  font-weight: 400;
}
.closing-lede:last-child {
  margin-bottom: 0;
}
body[data-home] .closing-lede {
  color: var(--text-secondary);
}
.closing-cta-wrap {
  margin: var(--space-xl) 0 0;
}
body[data-home] .closing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.35rem;
  padding: 0.9rem 2.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.045em;
  border-radius: 3px;
  border: 1px solid rgba(61, 90, 108, 0.35);
  background: rgba(61, 90, 108, 0.08);
  color: var(--text-primary);
  text-decoration: none;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease,
    text-shadow 0.22s ease;
  box-shadow: 0 2px 12px rgba(20, 26, 32, 0.06);
}
body[data-home] .closing-cta:hover,
body[data-home] .closing-cta:focus-visible {
  background: rgba(61, 90, 108, 0.14);
  border-color: rgba(47, 74, 92, 0.5);
  color: var(--text-primary);
  box-shadow:
    0 4px 18px rgba(20, 26, 32, 0.08),
    var(--home-brass-glow-outer);
  text-shadow: var(--home-brass-glow-text);
}
body[data-home] .closing-cta:focus-visible {
  outline: 2px solid rgba(61, 90, 108, 0.45);
  outline-offset: 3px;
}
.closing-profile-wrap {
  margin: var(--space-lg) 0 0;
  text-align: center;
}
#main .closing-profile-wrap {
  text-align: center;
}
body[data-home] .closing-profile-link {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 26, 32, 0.14);
  padding-bottom: 0.08em;
  transition: color 0.2s ease, border-color 0.2s ease, text-shadow 0.2s ease;
}
body[data-home] .closing-profile-link:hover,
body[data-home] .closing-profile-link:focus-visible {
  color: var(--accent-blue);
  border-bottom-color: rgba(61, 90, 108, 0.4);
  text-shadow: var(--home-brass-glow-text);
}
body[data-home] .closing-profile-link:focus-visible {
  outline: none;
}

/* ---------- Contact / About (subpages / legacy) ---------- */
.contact {
  border-top: 1px solid var(--color-line);
}
.about-text {
  max-width: min(52ch, 100%);
  margin: 0 auto var(--space-lg);
  line-height: 1.65;
}
.about-text p {
  margin: 0 0 var(--space-md);
}
.about-text p:last-child {
  margin-bottom: 0;
}
/* ---------- CTA normalization ---------- */
.cta-link,
.contact-cta a,
.case-study-cta {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: color var(--transition), opacity var(--transition);
}
.contact-cta {
  margin: var(--space-sm) 0 0;
}
.contact-cta a:hover,
.contact-cta a:focus-visible {
  opacity: 0.9;
}

/* ---------- Footer ---------- */
.footer {
  padding: var(--space-xl) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-line) 88%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg) 72%, transparent) 0%,
    var(--color-surface) 22%,
    var(--color-surface) 100%
  );
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
@media (min-width: 36em) {
  .footer-inner:not(.footer-inner--site) {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.footer-inner--site {
  flex-direction: column;
  gap: var(--space-lg);
  align-items: stretch;
}
.footer-primary {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
  text-align: center;
}
@media (min-width: 42em) {
  .footer-primary {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
  }
  .footer-inner--site .footer-links {
    justify-content: flex-end;
  }
  .footer-inner--site .footer-copy-simple {
    text-align: left;
  }
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.footer-brand-name {
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  color: var(--color-text);
}
.footer-brand-role {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  justify-content: center;
}
.footer-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-accent);
}
body[data-home] .footer-links a:hover,
body[data-home] .footer-links a:focus-visible {
  color: var(--accent-gold);
}
.footer-copy-simple {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0;
  opacity: 0.92;
  text-align: center;
}
.footer-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}
.footer-text a:hover,
.footer-text a:focus-visible {
  color: var(--color-accent);
}
.footer-sep {
  margin: 0 var(--space-xs);
}
.footer-copy {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}
body[data-home] .footer {
  position: relative;
  border-top: none;
  background: linear-gradient(
    180deg,
    rgba(250, 246, 236, 0) 0%,
    rgba(242, 237, 227, 0.55) 28%,
    rgba(232, 226, 214, 0.88) 100%
  );
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
body[data-home] .footer .footer-inner,
body[data-home] .footer .footer-inner--site {
  position: relative;
  z-index: 1;
}
body[data-home] .footer-inner--site {
  align-items: center;
  text-align: center;
}
body[data-home] .footer-inner--site .footer-copy-simple {
  text-align: center;
  width: 100%;
}
body[data-home] .footer::before {
  content: "";
  display: block;
  width: var(--structural-rule-w);
  max-width: 240px;
  min-width: 120px;
  height: 1px;
  margin: 0 auto var(--space-lg);
  background: var(--structural-rule-gradient);
  opacity: 0.58;
}

/* ---------- Case Study Page ---------- */
.case-breadcrumb {
  margin: 0 0 var(--space-md);
  padding: 0 0 var(--space-sm);
}
.case-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.case-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.case-breadcrumb__item:not(:first-child)::before {
  content: "/";
  margin-right: var(--space-sm);
  color: var(--color-text-muted);
  opacity: 0.45;
  font-weight: 400;
  pointer-events: none;
}
.case-breadcrumb__item a {
  color: var(--color-accent);
  text-decoration: none;
}
.case-breadcrumb__item a:hover {
  text-decoration: underline;
}
.case-breadcrumb__item[aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}
.page-header {
  padding: var(--space-2xl) 0 var(--space-xl);
  border-bottom: 1px solid var(--color-line);
}

/*
 * Portfolio interior layout (all pages except body[data-home]):
 * Outer .container = centered shell (site-wide). Inner measure = reading column for
 * headings, copy, panels, cards, and image groups—left-aligned, one rhythm.
 */
body:not([data-home]) main .page-header .container > * {
  box-sizing: border-box;
  max-width: min(var(--content-rail-max), 100%);
  width: 100%;
  margin-inline: auto;
  text-align: left;
}
body:not([data-home]) main > .container:not(.system-arch-body) > * {
  box-sizing: border-box;
  max-width: min(var(--content-rail-max), 100%);
  width: 100%;
  margin-inline: auto;
  text-align: left;
}
/* Main body column: vertical padding (replaces per-page inline styles) */
body:not([data-home]) main > .container:not(.system-arch-body) {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
}
body:not([data-home]) .page-header .page-subtitle {
  margin-bottom: var(--space-lg);
}
body:not([data-home]) .page-header .system-arch-lede {
  max-width: 100%;
}
body:not([data-home]) .overview-panel.overview-panel--discipline {
  margin: var(--space-lg) 0 var(--space-xl);
  width: 100%;
  box-sizing: border-box;
}
/* Prose fills the rail (no nested narrowing) */
body:not([data-home]) main .detail-section p,
body:not([data-home]) main .detail-section ul,
body:not([data-home]) main .detail-section ol,
body:not([data-home]) main .detail-section__kicker {
  max-width: 100%;
}
/* Section rhythm: direct children of main body container only */
body:not([data-home]) main > .container:not(.system-arch-body) > .detail-section {
  margin-bottom: 0;
  padding-bottom: var(--space-xl);
}
body:not([data-home]) main > .container:not(.system-arch-body) > .detail-section:not(:last-of-type) {
  border-bottom: 1px solid var(--color-line);
}
body:not([data-home]) main > .container:not(.system-arch-body) > .detail-section:last-of-type {
  border-bottom: none;
  padding-bottom: var(--space-lg);
}
body:not([data-home]) main > .container:not(.system-arch-body) > .detail-section h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}
body:not([data-home]) main > .container:not(.system-arch-body) > .detail-section > h2:first-child {
  margin-top: 0;
}
body:not([data-home]) main .detail-section p + h2,
body:not([data-home]) main .detail-section figure + h2,
body:not([data-home]) main .detail-section ul + h2 {
  margin-top: var(--space-lg);
}
body:not([data-home]) main .detail-section h2 + p {
  margin-top: 0;
}
body:not([data-home]) main .detail-section p + p {
  margin-top: var(--space-md);
}
body:not([data-home]) main > .container .case-nav {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
}
body:not([data-home]) .evidence-grid--environmental-trio {
  margin-top: var(--space-lg);
  gap: var(--space-lg);
  max-width: 100% !important;
  width: 100%;
}
@media (min-width: 48em) {
  body:not([data-home]) .evidence-grid--environmental-trio .evidence-item:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 100%;
    width: 100%;
    justify-self: stretch;
  }
}
/* Subpages: footer copy aligns to the same rail as main content */
body:not([data-home]) footer.footer .container.footer-inner {
  max-width: min(var(--content-rail-max), var(--container));
  margin-inline: auto;
}
body:not([data-home]) .page-title,
body:not([data-home]) .page-subtitle,
body:not([data-home]) .system-arch-title,
body:not([data-home]) .system-arch-tagline {
  text-align: left;
}
body:not([data-home]) .page-header .case-breadcrumb {
  text-align: left;
}
body:not([data-home]) .detail-section h2,
body:not([data-home]) .case-nav,
body:not([data-home]) .cross-pillar-links {
  text-align: left;
}
/* Overview & visual blocks: fill the reading column (no competing max-widths) */
body:not([data-home]) .overview-panel {
  max-width: 100% !important;
}
@media (min-width: 48em) {
  body:not([data-home]) .overview-panel {
    max-width: 100% !important;
  }
}
body:not([data-home]) .evidence-grid,
body:not([data-home]) .module-grid,
body:not([data-home]) .case-study-grid {
  max-width: 100% !important;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-items: stretch;
}

/* Case-study module bands: centered headings + intro; uniform card columns (no orphan asymmetry) */
body:not([data-home]) .case-study-content .detail-section:has(.module-grid) > h2 {
  text-align: center;
}
body:not([data-home]) .case-study-content .detail-section:has(.module-grid) > p,
body:not([data-home]) .case-study-content .detail-section:has(.module-grid) > .detail-section__kicker {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
body:not([data-home]) .case-study-content .module-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  justify-content: center;
  justify-items: stretch;
  width: 100%;
  max-width: 100% !important;
  margin-inline: auto !important;
  /* Match Image Correction Core Modules: breathing room after heading / intro */
  margin-top: clamp(2rem, 5vw, 3.25rem);
}
@media (min-width: 30em) {
  body:not([data-home]) .case-study-content .module-grid {
    grid-template-columns: repeat(auto-fit, minmax(16.5rem, 19.25rem));
    gap: var(--space-md);
  }
}
/* Three modules in a 2-column auto-fit grid: lone third row card stays same width as peers, centered */
@media (min-width: 37.5rem) {
  body:not([data-home])
    .case-study-content
    .module-grid:has(> .module-card:nth-child(3):last-child)
    > .module-card:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(19.25rem, 100%);
    max-width: 19.25rem;
  }
}
body:not([data-home]) .case-study-content .module-grid .module-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}
body:not([data-home]) .case-study-content .module-grid .module-link {
  flex: 1 1 auto;
  height: auto;
}
body:not([data-home]) .page-lede,
body:not([data-home]) .page-value-statement,
body:not([data-home]) .pillar-why-matters,
body:not([data-home]) .system-arch-lede {
  max-width: 100%;
}
/* System map: diagram body stays full .container width (intro uses reading measure in header) */
body:not([data-home]) main > .container.system-arch-body > * {
  max-width: none !important;
  width: 100%;
  margin-inline: 0 !important;
  text-align: left;
}
.page-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 400;
  margin: 0 0 var(--space-xs);
  letter-spacing: 0.07em;
}
@media (min-width: 30em) {
  .page-title {
    letter-spacing: 0.08em;
  }
}
.page-subtitle {
  font-size: 1rem;
  color: var(--color-accent);
  margin: 0;
}
.page-lede {
  margin: var(--space-sm) 0 0;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: min(var(--reading-measure), 100%);
  text-align: left;
}
/* Case study overview: line grid + hairline dividers (systems-doc tone, no dashboard card) */
.overview-panel {
  --overview-cell-bg: color-mix(in srgb, var(--color-surface) 22%, var(--color-bg));
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  gap: 1px;
  padding: 0;
  margin: var(--space-lg) 0 var(--space-xl);
  max-width: 72ch;
  border: 1px solid var(--color-line);
  border-radius: 0;
  background: var(--color-line);
  box-shadow: none;
  overflow: hidden;
}
.overview-panel .overview-item {
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--overview-cell-bg);
}
.overview-panel .overview-item:nth-child(1)::before,
.overview-panel .overview-item:nth-child(3)::before {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}
.overview-panel .overview-item:nth-child(1)::before {
  content: "The challenge";
}
.overview-panel .overview-item:nth-child(3)::before {
  content: "The response";
}
.overview-item dt {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}
.overview-item dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.52;
  color: color-mix(in srgb, var(--color-text-muted) 86%, var(--color-text) 14%);
}
.overview-panel .overview-item__list {
  margin: var(--space-xs) 0 0;
  padding-left: 1.25rem;
  list-style: disc;
}
.overview-panel .overview-item__list li {
  margin-bottom: var(--space-2xs);
}
.overview-panel .overview-item__list li:last-child {
  margin-bottom: 0;
}
.overview-item--tools {
  text-align: left;
}
.overview-item--tools dt {
  margin-left: 0;
  margin-right: 0;
  color: var(--color-text-muted);
}
.overview-item--tools dd {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  font-size: 0.8125rem;
  line-height: 1.48;
}

/* Discipline: no challenge/response ribbons; single column when not a five-block panel */
.overview-panel--discipline .overview-item:nth-child(1)::before,
.overview-panel--discipline .overview-item:nth-child(3)::before {
  content: none;
  display: none;
}
.overview-panel.overview-panel--discipline:not(:has(.overview-item:nth-child(5):last-child)) {
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .overview-panel.overview-panel--discipline:not(:has(.overview-item:nth-child(5):last-child)) .overview-item {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  /* Five cells + full-width tools */
  .overview-panel:has(.overview-item:nth-child(5):last-child) {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }
  .overview-panel:has(.overview-item:nth-child(5):last-child) .overview-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .overview-panel:has(.overview-item:nth-child(5):last-child) .overview-item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .overview-panel:has(.overview-item:nth-child(5):last-child) .overview-item:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }
  .overview-panel:has(.overview-item:nth-child(5):last-child) .overview-item:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }
  .overview-panel:has(.overview-item:nth-child(5):last-child) .overview-item:nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  /* Six cells + full-width tools (e.g. Outcome in addition to Why it mattered) */
  .overview-panel:has(.overview-item:nth-child(6):last-child) .overview-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .overview-panel:has(.overview-item:nth-child(6):last-child) .overview-item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .overview-panel:has(.overview-item:nth-child(6):last-child) .overview-item:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }
  .overview-panel:has(.overview-item:nth-child(6):last-child) .overview-item:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }
  .overview-panel:has(.overview-item:nth-child(6):last-child) .overview-item:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
  }
  .overview-panel:has(.overview-item:nth-child(6):last-child) .overview-item:nth-child(6) {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

/* ---------- Audio Timeline (Case Study component) ---------- */
.audio-timeline {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-md);
}
.audio-timeline-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.audio-timeline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  background: rgba(255, 251, 242, 0.06);
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
}
.audio-timeline-btn:hover,
.audio-timeline-btn:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(201, 169, 98, 0.06);
}
.audio-timeline-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.audio-timeline-time {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.audio-timeline-audio {
  display: none;
}
.audio-timeline-wave {
  position: relative;
  height: 120px;
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  overflow: hidden;
}
.audio-timeline-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.audio-timeline-scrub {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.audio-timeline-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.audio-timeline-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.audio-timeline-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(252, 247, 236, 0.22);
}
.audio-timeline-marker::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(252, 247, 236, 0.28);
  border: 1px solid rgba(252, 247, 236, 0.22);
}
.audio-timeline-marker.is-active {
  background: rgba(201, 169, 98, 0.6);
}
.audio-timeline-marker.is-active::after {
  background: rgba(201, 169, 98, 0.85);
  border-color: rgba(201, 169, 98, 0.6);
}
.audio-timeline-cards {
  display: grid;
  min-height: 220px;
}
.audio-timeline-card {
  grid-area: 1 / 1;
  padding: var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  background: rgba(255, 251, 242, 0.05);
  opacity: 0;
  transform: translateY(0);
  transition: none;
  pointer-events: none;
}
.audio-timeline-card.is-active {
  opacity: 1;
  pointer-events: auto;
}
.audio-timeline-card-date {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}
.audio-timeline-card-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}
.audio-timeline-card-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin-bottom: var(--space-2xs);
}
.audio-timeline-card-subtitle {
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}
.audio-timeline-card-desc {
  color: var(--color-text-muted);
  line-height: 1.6;
}
.audio-timeline-card-block {
  margin-top: var(--space-sm);
}
.audio-timeline-card-list {
  margin: var(--space-2xs) 0 0;
  padding-left: 1.15rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.audio-timeline-card-list li {
  margin-bottom: 0.25rem;
}
.audio-timeline-card-list li:last-child {
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .audio-timeline-card {
    transition: opacity 1ms linear;
  }
}
.detail-section {
  margin-bottom: var(--space-xl);
}
.detail-section h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
}
.detail-section__kicker {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  max-width: min(var(--reading-measure), 100%);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.detail-section p {
  margin: 0;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: min(var(--reading-measure), 100%);
  text-align: left;
}
.detail-section p strong {
  color: var(--color-text);
}
.detail-section p + p {
  margin-top: var(--space-sm);
}
.detail-section ul + p,
.detail-section ol + p {
  margin-top: var(--space-sm);
}
.detail-section p + ul,
.detail-section p + ol {
  margin-top: var(--space-sm);
}
.detail-section ul {
  margin: var(--space-sm) 0 0;
  padding-left: 1.5rem;
  max-width: min(var(--reading-measure), 100%);
  text-align: left;
}
.detail-section ul li {
  position: relative;
  margin-bottom: var(--space-xs);
  list-style: disc;
}
.detail-section ul li::before {
  display: none;
}
/* Case study: embedded PDF feature (print / event materials) */
.case-study-pdf-feature {
  margin: var(--space-md) 0 0;
  max-width: min(56rem, 100%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.case-study-pdf-feature__frame {
  width: 100%;
  min-height: 24rem;
  height: min(70vh, 48rem);
  border: 0;
  display: block;
  background: var(--color-bg);
}
.case-study-pdf-feature__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg));
}
.case-study-pdf-feature__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
}
.case-study-pdf-feature__link:hover,
.case-study-pdf-feature__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* Honest attribution: automation code authored with AI coding assistants, validated in production */
.implementation-disclosure {
  max-width: min(var(--reading-measure), 100%);
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg));
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.implementation-disclosure p {
  margin: 0;
}
.implementation-disclosure strong {
  color: var(--color-text);
  font-weight: 600;
}
/* Pillar page sections */
.pillar-header--ai .page-value-statement { border-left-color: var(--pillar-ai); }
.pillar-header--graphic .page-value-statement { border-left-color: var(--pillar-graphic); }
.pillar-header--music .page-value-statement { border-left-color: var(--pillar-music); }
.pillar-header--fabrication .page-value-statement { border-left-color: var(--pillar-fabrication); }
.pillar-header--leadership .page-value-statement { border-left-color: var(--color-accent); }
body[data-pillar="music"] .page-catalog-anchor {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: min(var(--reading-measure), 100%);
  margin: var(--space-md) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-line);
}
body[data-pillar="music"] .page-catalog-anchor strong {
  font-weight: 600;
  color: var(--color-text);
}
body[data-pillar="music"] .pillar-identity-context {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: min(40rem, 100%);
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 85%, var(--color-bg));
}
body[data-pillar="music"] .pillar-identity-context__mark {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--color-line);
  opacity: 0.92;
}
body[data-pillar="music"] .pillar-identity-context__body {
  min-width: 0;
}
body[data-pillar="music"] .pillar-identity-context__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2xs);
  line-height: 1.35;
}
body[data-pillar="music"] .pillar-identity-context__note {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}
body[data-pillar="music"] .release-covers-continuity {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: var(--space-sm) 0 var(--space-md);
  max-width: min(var(--reading-measure), 100%);
  line-height: 1.5;
}
.page-value-statement {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-md);
  margin: var(--space-sm) 0 0;
  line-height: 1.5;
  max-width: min(var(--reading-measure), 100%);
  text-align: left;
}
.deliver-list {
  margin: var(--space-sm) 0 0;
  padding-left: 1.5rem;
  list-style: disc;
  max-width: min(var(--reading-measure), 100%);
  text-align: left;
}
.deliver-list li {
  margin-bottom: var(--space-xs);
}
/* Pillar / landing: same surface + bracket language as other site cards (description clipped, not hover-swapped) */
.detail-section .case-study-card {
  border-radius: var(--site-card-radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
@media (hover: hover) {
  .detail-section .case-study-card:hover,
  .detail-section .case-study-card:focus-within {
    transform: translateY(-2px) scale(1.03);
    border-color: rgba(198, 169, 107, 0.38);
    box-shadow:
      0 0 0 1px rgba(198, 169, 107, 0.12),
      0 10px 26px rgba(0, 0, 0, 0.32),
      0 0 28px -8px rgba(198, 169, 107, 0.14);
  }
}
.detail-section .case-study-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  min-height: var(--site-card-min-h);
  min-block-size: var(--site-card-min-h);
  height: 100%;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  gap: 0;
}
@media (min-width: 48em) {
  .detail-section .case-study-card-link {
    min-height: 6.5rem;
    min-block-size: 6.5rem;
  }
}
.detail-section .case-study-card-title {
  font-family: var(--font-serif);
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.055em;
  text-align: center;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

/* Hide parenthetical subtitles in card titles on small screens (full text in HTML for SEO/a11y). */
@media (max-width: 48em) {
  .card-title-paren {
    display: none !important;
  }
}
.case-study-block {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg) var(--space-md);
  padding-bottom: var(--space-xl);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  border: 1px solid var(--color-line);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.case-study-block:last-of-type {
  margin-bottom: 0;
}
.case-study-block h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--space-sm);
}
.case-study-block h3 + p {
  margin-top: 0;
}
.case-study-block p {
  max-width: 100%;
  text-align: left;
}
.case-study-block h3 a {
  color: inherit;
  text-decoration: none;
}
.case-study-block h3 a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
/* Text CTA inside case-study-block only — avoid clashing with card anchor .case-study-link */
.case-study-block .case-study-link {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-top: var(--space-sm);
}
.case-study-block .case-study-link:hover,
.case-study-block .case-study-link:focus-visible {
  text-decoration: underline;
}
.cross-pillar-section {
  position: relative;
  background: color-mix(in srgb, var(--color-surface) 97%, var(--color-bg));
  padding: var(--space-lg);
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.cross-pillar-section::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 1px;
  border-radius: calc(var(--radius) - 1px);
  z-index: 0;
  opacity: calc(var(--structural-op-module) * 0.85);
  --_line: var(--structural-line);
  --_ah: calc(var(--structural-arm-h-module) * 0.95);
  --_av: calc(var(--structural-arm-v-module) * 0.95);
  background:
    linear-gradient(to right, var(--_line), var(--_line)) left top / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to bottom, var(--_line), var(--_line)) left top / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to left, var(--_line), var(--_line)) right top / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to bottom, var(--_line), var(--_line)) right top / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to right, var(--_line), var(--_line)) left bottom / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to top, var(--_line), var(--_line)) left bottom / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to left, var(--_line), var(--_line)) right bottom / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to top, var(--_line), var(--_line)) right bottom / var(--structural-hairline) var(--_av) no-repeat;
}
.cross-pillar-section > * {
  position: relative;
  z-index: 1;
}
.cross-pillar-links {
  margin: var(--space-sm) 0 0;
  padding-left: 0;
  list-style: none;
  max-width: min(var(--content-rail-max), 100%);
  text-align: left;
}
.cross-pillar-links li {
  margin-bottom: var(--space-xs);
}
.cross-pillar-links a {
  color: var(--color-accent);
}
.cross-pillar-links a:hover { text-decoration: underline; }
.work-list {
  max-width: min(var(--reading-measure), 100%);
  text-align: left;
}
.work-list li {
  margin-bottom: var(--space-md);
}
.work-list li:last-child {
  margin-bottom: 0;
}
.evidence-heading {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin: var(--space-md) 0 var(--space-xs);
}
.evidence-heading + p,
.evidence-intro {
  margin: 0 0 var(--space-md);
  max-width: 68ch;
  text-align: left;
}
.evidence-subheading {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin: var(--space-md) 0 var(--space-xs);
}
.evidence-subheading + .evidence-intro {
  margin-top: 0;
}
.evidence-grid + p {
  margin-top: var(--space-lg);
  margin-bottom: 0;
}
.evidence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  align-items: start;
  justify-items: start;
}
@media (min-width: 36em) {
  .evidence-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64em) {
  .evidence-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.evidence-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.evidence-item img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.evidence-item figcaption {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
  text-align: left;
}
.evidence-grid--thumbs .evidence-item img {
  max-width: 200px;
  width: auto;
  height: auto;
}
.evidence-item--featured {
  margin-top: var(--space-lg);
}
.evidence-item--featured img {
  max-width: 100%;
  width: auto;
  height: auto;
}

/* Pillar pages: images at native dimensions, scaled down */
.evidence-grid--timeline {
  grid-template-columns: 1fr;
  max-width: 42rem;
  margin-top: var(--space-lg);
  align-items: start;
}
.evidence-grid--timeline .evidence-item img {
  max-width: 100%;
  width: auto;
  height: auto;
}
@media (min-width: 36em) {
  .evidence-grid--timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}
.evidence-grid--album {
  align-items: start;
  justify-items: start;
  max-width: 48rem;
}
.evidence-grid--album .evidence-item img {
  max-width: 280px;
  width: auto;
  height: auto;
}

/* Case study: correction before/after pairs */
.cc-example-block {
  margin-top: var(--space-lg);
}
.cc-example-block:first-of-type {
  margin-top: var(--space-md);
}
/* Image Correction case: overview hierarchy + callout + samples (body.page-case-cc) */
.page-case-cc .overview-panel--cc > .overview-item::before {
  content: none !important;
  display: none !important;
}
@media (min-width: 48em) {
  .page-case-cc .overview-panel--cc .overview-item--outcome {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .page-case-cc .overview-panel--cc .overview-item--system {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .page-case-cc .overview-panel--cc .overview-item--environment {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .page-case-cc .overview-panel--cc .overview-item--failure {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  .page-case-cc .overview-panel--cc .overview-item--tools {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}
.page-case-cc .overview-panel--cc .overview-item--lead dt {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.055em;
}
.page-case-cc .overview-panel--cc .overview-item--lead dd {
  font-size: 1.03125rem;
  line-height: 1.5;
  color: var(--color-text);
}
.page-case-cc .overview-panel--cc .overview-item--muted dt {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  opacity: 0.9;
}
.page-case-cc .overview-panel--cc .overview-item--muted dd {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  opacity: 0.88;
}
.case-signature-callout {
  margin: var(--space-xl) 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: none;
  border-left: 3px solid rgba(198, 169, 107, 0.75);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 2.1vw, 1.28rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.035em;
  line-height: 1.45;
  color: var(--color-text);
  max-width: min(52ch, 100%);
}
.page-case-cc .case-prose-breath .case-signature-callout {
  margin: clamp(2rem, 5vw, 3rem) 0 clamp(2rem, 4.5vw, 2.75rem);
  padding: clamp(1.25rem, 3vw, 1.65rem) clamp(1.35rem, 3.5vw, 2.25rem);
  font-size: clamp(1.125rem, 2.65vw, 1.48rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.045em;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 92%, var(--color-accent) 8%);
  border-left-width: 3px;
  border-left-color: rgba(198, 169, 107, 0.88);
  background: color-mix(in srgb, var(--color-surface) 82%, rgba(198, 169, 107, 0.06) 18%);
  max-width: min(48ch, 100%);
}
.case-prose-breath p {
  margin: 0 0 var(--space-md);
  max-width: min(62ch, 100%);
}
.case-prose-breath p:last-child {
  margin-bottom: 0;
}
.case-closing-line {
  margin: var(--space-2xl) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  max-width: min(52ch, 100%);
}

/* Image Correction: extra rhythm before Core Modules (grid/cards use global case-study module rules) */
.page-case-cc .detail-section--modules-centered {
  padding-top: clamp(1.75rem, 4.5vw, 3.25rem);
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
}
.page-case-cc .detail-section--modules-centered .detail-section__kicker {
  max-width: min(46rem, 100%);
  margin-bottom: 0;
}
.cc-system-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--color-accent);
  margin: 0 0 var(--space-2xs);
}
.cc-example-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
  max-width: 48ch;
  line-height: 1.45;
}

/* Image Correction: representative output grid — hero pair + supporting 2-up */
.cc-visual-section {
  margin-top: var(--space-xl);
  max-width: 100%;
}
.cc-visual-section .cc-visual-section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.28rem, 2.9vw, 1.72rem);
  font-weight: 400;
  letter-spacing: 0.052em;
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
  line-height: 1.25;
}
.cc-sample-disclosure {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
  max-width: min(56ch, 100%);
}
.cc-visual-system-statement {
  margin: 0 0 clamp(2rem, 4.5vw, 3rem);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--color-line);
  max-width: min(58ch, 100%);
}
.cc-visual-system-statement p {
  margin: 0 0 var(--space-sm);
  font-size: 0.9375rem;
  line-height: 1.58;
  color: var(--color-text);
}
.cc-visual-system-statement p:last-child {
  margin-bottom: 0;
}
.cc-hero-pair {
  margin: 0 auto clamp(2.25rem, 5vw, 3rem);
  max-width: min(56rem, 100%);
}
.cc-hero-pair .cc-condition-title,
.cc-hero-pair .cc-action-line {
  text-align: center;
}
.cc-condition-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  line-height: 1.35;
}
.cc-pair-frame {
  margin: 0 0 var(--space-md);
}
.cc-pair-frame--hero {
  margin: 0 auto var(--space-md);
  padding: 0 clamp(0, 2vw, var(--space-sm));
}
.cc-ba-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-md), 3vw, var(--space-xl));
  align-items: start;
}
@media (max-width: 36em) {
  .cc-ba-row {
    grid-template-columns: 1fr;
  }
}
.cc-ba-cell {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.cc-ba-cell img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(230, 234, 240, 0.11);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.cc-pair-frame--hero .cc-ba-cell img {
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
}
.cc-ba-label {
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  opacity: 0.72;
}
.cc-action-line {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--color-text) 82%, var(--color-accent) 18%);
  margin: 0;
  line-height: 1.45;
}
.cc-support-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 48em) {
  .cc-support-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
  }
}
.cc-pair-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cc-pair-block .cc-pair-frame {
  flex: 0 0 auto;
}
.cc-visual-insight {
  margin: clamp(2rem, 4.5vw, 3rem) 0 0;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--color-line);
  font-size: 1.03125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  max-width: min(54ch, 100%);
}
.cc-visual-footer-note {
  margin: var(--space-md) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  font-style: italic;
  max-width: min(52ch, 100%);
  opacity: 0.92;
}

.evidence-grid--cc-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  max-width: min(56rem, 100%);
}
@media (min-width: 40em) {
  .evidence-grid--cc-pair {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}
.evidence-grid--cc-pair .evidence-item {
  margin: 0;
}
.evidence-grid--cc-pair .evidence-item img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.evidence-grid--cc-pair .evidence-item figcaption {
  margin-top: var(--space-xs);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Pillar / case study: release cover artwork row */
.evidence-grid--release-covers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  max-width: min(72rem, 100%);
}
@media (min-width: 48em) {
  .evidence-grid--release-covers {
    grid-template-columns: repeat(3, 1fr);
  }
}
.evidence-grid--release-covers .evidence-item {
  margin: 0;
}
.evidence-grid--release-covers .evidence-item img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.evidence-grid--release-covers .evidence-item figcaption {
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* Case study: environmental photography — large proof images, CAD-level polish */
.evidence-grid--environmental {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  max-width: min(64rem, 100%);
  margin-left: auto;
  margin-right: auto;
}
.evidence-grid--environmental .evidence-item {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.evidence-grid--environmental .evidence-item img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.evidence-grid--environmental .evidence-item figcaption {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* Two on top, one centered below; consistent cell sizing */
.evidence-grid--environmental-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  max-width: min(72rem, 100%);
  margin-left: auto;
  margin-right: auto;
}
.evidence-grid--environmental-trio .evidence-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.evidence-grid--environmental-trio .evidence-item img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.evidence-grid--environmental-trio .evidence-item figcaption {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  text-align: left;
}
@media (min-width: 48em) {
  .evidence-grid--environmental-trio {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .evidence-grid--environmental-trio .evidence-item:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--space-xl) / 2);
    justify-self: center;
    width: 100%;
  }
}

/* Music page: smaller timeline images with text wrap */
.detail-section--timelines .evidence-item--featured {
  float: left;
  max-width: 280px;
  margin: 0 var(--space-lg) var(--space-md) 0;
}
.detail-section--timelines .evidence-item--featured img {
  width: auto;
  max-width: 280px;
  height: auto;
}
.detail-section--timelines .evidence-item--featured figcaption {
  font-size: 0.8125rem;
}
.detail-section--timelines h3 {
  clear: left;
}
@media (max-width: 44em) {
  .detail-section--timelines .evidence-item--featured {
    float: none;
    max-width: 100%;
    margin: var(--space-md) 0;
  }
  .detail-section--timelines .evidence-item--featured img {
    max-width: 100%;
  }
}
.evidence-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--space-lg);
  margin-bottom: 0;
}
.case-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-line);
}
.case-nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-accent);
}
.case-nav a:hover,
.case-nav a:focus-visible {
  text-decoration: underline;
}

/*
 * Workflow guidance module (image correction): parent case anchor + grouped footer nav.
 * Scoped to body.page-module-ic-wg — matches accent / surface vocabulary, not a loud CTA.
 */
body.page-module-ic-wg .parent-case-anchor {
  margin: var(--space-md) 0 var(--space-sm);
  max-width: min(var(--reading-measure), 100%);
}
body.page-module-ic-wg .parent-case-anchor__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}
body.page-module-ic-wg .parent-case-anchor__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: color-mix(in srgb, var(--color-text) 90%, var(--color-accent) 10%);
  text-decoration: none;
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-accent) 12%);
  border: 1px solid color-mix(in srgb, var(--color-line) 55%, var(--color-accent) 45%);
  border-radius: var(--radius-lg);
  border-left: 3px solid color-mix(in srgb, var(--color-accent) 72%, transparent);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
  transition: color var(--transition), background var(--transition), border-color var(--transition),
    box-shadow var(--transition);
}
body.page-module-ic-wg .parent-case-anchor__link:hover,
body.page-module-ic-wg .parent-case-anchor__link:focus-visible {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-accent) 18%);
  border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-line));
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.28);
  text-decoration: none;
}
body.page-module-ic-wg .parent-case-anchor__chev {
  font-size: 0.92em;
  opacity: 0.55;
  font-weight: 500;
}
body.page-module-ic-wg .page-header .page-lede {
  margin-top: var(--space-xs);
}
body.page-module-ic-wg .page-header .page-subtitle {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  max-width: min(62ch, 100%);
}
body.page-module-ic-wg .page-header .page-subtitle a {
  color: var(--color-accent);
  font-weight: 500;
}
body.page-module-ic-wg .page-header .page-subtitle a:hover,
body.page-module-ic-wg .page-header .page-subtitle a:focus-visible {
  color: color-mix(in srgb, var(--color-accent) 55%, var(--color-text) 45%);
  text-decoration: underline;
}
body.page-module-ic-wg .case-nav.case-nav--grouped {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
}
body.page-module-ic-wg .case-nav__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md) 0;
}
body.page-module-ic-wg .case-nav__group--context {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
body.page-module-ic-wg .case-nav__group:first-child {
  padding-top: 0;
}
body.page-module-ic-wg .case-nav__group + .case-nav__group {
  border-top: 1px solid var(--color-line);
}
body.page-module-ic-wg .case-nav__group--sequence {
  justify-content: flex-start;
  gap: var(--space-lg);
}
body.page-module-ic-wg .case-nav__links-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}
body.page-module-ic-wg .case-nav a.case-nav__case-primary {
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 86%, var(--color-accent) 14%);
  border: 1px solid color-mix(in srgb, var(--color-line) 50%, var(--color-accent) 50%);
  text-decoration: none;
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-accent) 12%);
}
body.page-module-ic-wg .case-nav a.case-nav__case-primary:hover,
body.page-module-ic-wg .case-nav a.case-nav__case-primary:focus-visible {
  background: color-mix(in srgb, var(--color-surface) 78%, var(--color-accent) 22%);
  color: var(--color-text);
  text-decoration: none;
}
body.page-module-ic-wg .case-nav__hint {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}

/* ---------- Hero: optional System Map pathway (homepage) ---------- */
.hero-arch-link-wrap {
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-md);
  text-align: center;
  max-width: 36rem;
}
.hero-arch-link {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  opacity: 0.55;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.hero-arch-link:hover,
.hero-arch-link:focus-visible {
  color: var(--structural-line);
  opacity: 0.95;
  text-decoration: none;
}

/* ---------- Footer: System Map link ---------- */
.footer-site-links {
  margin: 0 0 var(--space-sm);
  text-align: center;
  font-size: 0.875rem;
}
.footer-site-links a {
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
}
.footer-site-links a:hover,
.footer-site-links a:focus-visible {
  text-decoration: underline;
}
.footer-text .footer-system-map {
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
}
a.footer-system-map:hover,
a.footer-system-map:focus-visible {
  text-decoration: underline;
}
.footer-system-map--current {
  color: var(--color-text);
  font-weight: 600;
}

/* ---------- System Architecture page (system-map.html) ---------- */
.system-map-page {
  --sys-arch-accent: rgba(61, 90, 108, 0.4);
  --sys-arch-accent-strong: rgba(47, 74, 92, 0.55);
}
.system-arch-header {
  padding-bottom: var(--space-xl);
}
.system-arch-header .page-title {
  font-family: var(--font-serif);
  letter-spacing: 0.06em;
  max-width: 20ch;
}
.system-arch-title {
  margin-bottom: var(--space-sm);
}
.system-arch-tagline {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sys-arch-accent-strong);
  margin: 0 0 var(--space-md);
}
.system-arch-lede {
  margin: 0;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.system-arch-body {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
}
.system-arch-diagram {
  position: relative;
  margin-top: var(--space-xl);
}
.system-arch-wires {
  display: none;
  width: 100%;
  height: 120px;
  margin-bottom: var(--space-md);
  pointer-events: none;
}
@media (min-width: 60em) {
  .system-arch-wires {
    display: block;
  }
}
.system-arch-wire {
  transition: stroke-opacity 0.35s ease, stroke 0.35s ease;
}
.system-arch-wire--cross {
  stroke-opacity: 0.35;
}
.system-arch--bridging .system-arch-wire--cross,
.system-arch--bridging .system-arch-wire {
  stroke: rgba(198, 169, 107, 0.55);
  stroke-opacity: 0.85;
}
.system-arch-columns {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .system-arch-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 72em) {
  .system-arch-columns {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }
}
.system-arch-column {
  position: relative;
  padding: var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg));
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.system-arch-pillar {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 400;
  margin: 0 0 var(--space-2xs);
  letter-spacing: 0.05em;
}
.system-arch-pillar a {
  color: var(--color-text);
  text-decoration: none;
}
.system-arch-pillar a:hover,
.system-arch-pillar a:focus-visible {
  color: var(--structural-line);
}
.system-arch-pillar-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  line-height: 1.4;
}
.system-arch-node {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-line);
  transition: border-color 0.25s ease, background 0.25s ease;
  border-radius: var(--radius-sm);
}
.system-arch-node:last-child {
  margin-bottom: 0;
}
.system-arch-node.is-sys-share-active {
  background: color-mix(in srgb, var(--color-surface) 88%, rgba(198, 169, 107, 0.08));
  border-color: rgba(198, 169, 107, 0.22);
  box-shadow: inset 0 0 0 1px rgba(198, 169, 107, 0.08);
}
.system-arch-case {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  line-height: 1.35;
}
.system-arch-case:hover,
.system-arch-case:focus-visible {
  text-decoration: underline;
  color: var(--structural-line);
}
.system-arch-node-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 0;
  font-style: italic;
}
.system-arch-modules {
  margin: var(--space-xs) 0 0;
  padding-left: 1.1rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.system-arch-modules a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.system-arch-modules a:hover,
.system-arch-modules a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}
.system-arch-sublinks {
  font-size: 0.75rem;
  margin: var(--space-md) 0 0;
  line-height: 1.5;
  padding: var(--space-xs) var(--space-sm);
  margin-left: calc(-1 * var(--space-sm));
  margin-right: calc(-1 * var(--space-sm));
  border-radius: var(--radius-sm);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.system-arch-sublinks.is-sys-share-active {
  background: color-mix(in srgb, var(--color-surface) 88%, rgba(198, 169, 107, 0.08));
  box-shadow: inset 0 0 0 1px rgba(198, 169, 107, 0.08);
}
.system-arch-sublinks a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.system-arch-sublinks a:hover,
.system-arch-sublinks a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}
.system-arch-crosscut {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-line);
}
.system-arch-subhead {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 var(--space-xs);
  letter-spacing: 0.05em;
}
.system-arch-crosscut-lede {
  margin: 0 0 var(--space-lg);
  color: var(--color-text-muted);
  max-width: 52ch;
  font-size: 0.9rem;
}
.system-arch-crosscut-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .system-arch-crosscut-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.system-arch-node--flat {
  padding: var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  margin-bottom: 0;
}
.system-arch-pillar-cta {
  margin: var(--space-lg) 0 0;
  font-size: 0.9rem;
}
.system-arch-pillar-cta a {
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
}
.system-arch-pillar-cta a:hover,
.system-arch-pillar-cta a:focus-visible {
  text-decoration: underline;
}
.system-arch-pillar-cta--minor {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.system-arch-pillar-cta--minor a {
  color: var(--color-text-muted);
  font-weight: 500;
}
.system-arch-pillar-cta--minor .system-arch-pillar-note {
  font-weight: 400;
  opacity: 0.9;
}
.system-arch-legend {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg) 96%, var(--color-surface));
  max-width: 52rem;
}
.system-arch-legend-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sys-arch-accent);
  margin: 0 0 var(--space-sm);
}
.system-arch-legend-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  line-height: 1.55;
}
.system-arch-legend-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.system-arch-legend-list li {
  margin-bottom: var(--space-sm);
}
.system-arch-legend-list strong {
  color: var(--color-text);
  font-weight: 600;
  cursor: default;
}
.system-arch-legend-list li[data-sys-share] {
  cursor: default;
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  margin-left: calc(-1 * var(--space-xs));
  outline: none;
}
.system-arch-legend-list li[data-sys-share]:focus-visible {
  box-shadow: 0 0 0 2px var(--color-accent);
}
.system-arch-legend-list li.is-sys-share-active {
  background: color-mix(in srgb, var(--color-surface) 90%, rgba(198, 169, 107, 0.06));
}
.system-arch-legend-list li.is-sys-share-active strong {
  color: var(--accent-gold, #c6a96b);
}

/* System map: tighter vertical rhythm so four columns + legend fit without zoom */
.system-map-page .page-header {
  padding: var(--space-md) 0 var(--space-sm);
}
.system-map-page .system-arch-header {
  padding-bottom: 0;
}
.system-map-page .system-arch-title {
  margin-bottom: var(--space-2xs);
}
.system-map-page .system-arch-tagline {
  margin: 0 0 var(--space-sm);
}
.system-map-page .system-arch-lede {
  line-height: 1.55;
  font-size: 0.875rem;
}
.system-map-page .system-arch-body {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-lg);
}
.system-map-page .system-arch-diagram {
  margin-top: var(--space-sm);
}
.system-map-page .system-arch-wires {
  height: 64px;
  margin-bottom: var(--space-xs);
}
@media (min-width: 60em) {
  .system-map-page .system-arch-wires {
    height: 72px;
  }
}
.system-map-page .system-arch-columns {
  gap: var(--space-md);
}
.system-map-page .system-arch-column {
  padding: var(--space-sm);
}
.system-map-page .system-arch-pillar {
  font-size: 1.0625rem;
  margin: 0 0 0.1rem;
}
.system-map-page .system-arch-pillar-note {
  margin: 0 0 var(--space-sm);
  line-height: 1.35;
  font-size: 0.6875rem;
}
.system-map-page .system-arch-node {
  margin-bottom: var(--space-sm);
  padding: var(--space-xs) 0;
}
.system-map-page .system-arch-node-hint {
  margin: 0.3rem 0 0;
  line-height: 1.4;
  font-size: 0.7rem;
}
.system-map-page .system-arch-modules {
  margin: var(--space-2xs) 0 0;
  line-height: 1.4;
  font-size: 0.78rem;
}
.system-map-page .system-arch-sublinks {
  margin: var(--space-sm) 0 0;
  padding: var(--space-2xs) var(--space-xs);
  line-height: 1.45;
}
.system-map-page .system-arch-crosscut {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
}
.system-map-page .system-arch-subhead {
  font-size: 1.125rem;
  margin: 0 0 var(--space-2xs);
}
.system-map-page .system-arch-crosscut-lede {
  margin: 0 0 var(--space-sm);
  font-size: 0.85rem;
  line-height: 1.5;
}
.system-map-page .system-arch-crosscut-grid {
  gap: var(--space-sm);
}
.system-map-page .system-arch-node--flat {
  padding: var(--space-sm);
}
.system-map-page .system-arch-pillar-cta {
  margin: var(--space-sm) 0 0;
  font-size: 0.875rem;
}
.system-map-page .system-arch-legend {
  margin-top: var(--space-lg);
  padding: var(--space-md);
}
.system-map-page .system-arch-legend-title {
  margin: 0 0 var(--space-xs);
}
.system-map-page .system-arch-legend-text {
  margin: 0 0 var(--space-sm);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.system-map-page .system-arch-legend-list {
  font-size: 0.78rem;
  line-height: 1.5;
}
.system-map-page .system-arch-legend-list li {
  margin-bottom: var(--space-xs);
}

/* ---------- Brand System: multi-brand brochure gallery ---------- */
html[data-broch-gallery-lock],
html[data-broch-gallery-lock] body {
  overflow: hidden;
}

/* Brochure gallery sits inside .detail-section like a supporting module */
.broch-gallery-module {
  margin-top: 0;
  max-width: min(var(--reading-measure), 100%);
}

.broch-gallery-intro {
  max-width: 52rem;
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.broch-gallery-intro--support {
  margin-bottom: var(--space-lg);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.broch-gallery-teasers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (max-width: 900px) {
  .broch-gallery-teasers {
    grid-template-columns: 1fr;
  }
}

.broch-gallery-teaser {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: var(--radius-lg);
}

.broch-gallery-teaser:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.broch-gallery-teaser-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.broch-gallery-teaser:hover .broch-gallery-teaser-inner,
.broch-gallery-teaser:focus-visible .broch-gallery-teaser-inner {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-line));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px color-mix(in srgb, var(--featured-border-brass) 25%, transparent);
  transform: translateY(-2px);
}

.broch-gallery-teaser-thumb {
  position: relative;
  aspect-ratio: 8.5 / 11;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--color-line);
  margin-bottom: var(--space-sm);
}

.broch-gallery-teaser-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.broch-gallery-teaser-name {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-2xs);
  color: var(--color-text);
}

.broch-gallery-teaser-caption {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
  flex-grow: 1;
}

.broch-gallery-teaser-cta {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.broch-gallery-open-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-xl);
}

.broch-gallery-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 0.65rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.broch-gallery-open:hover,
.broch-gallery-open:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-line));
  background: color-mix(in srgb, var(--color-surface) 100%, transparent);
  color: var(--color-text);
}

.broch-gallery-open:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.broch-gallery-disclaimer {
  max-width: min(var(--reading-measure), 100%);
  margin: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Modal */
.broch-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-md);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.broch-gallery-modal[hidden] {
  display: none;
}

.broch-gallery-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  cursor: pointer;
}

.broch-gallery-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 77.5rem;
  /* Fit inside dynamic viewport; allow inner scroll so grid never clips without a scrollbar */
  max-height: min(88vh, calc(100dvh - 2 * var(--space-md)));
  margin-block: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

/* Grid + viewer stacks fill panel height so inner scroll regions get a bounded flex parent */
#broch-gallery-view-grid:not([hidden]),
#broch-gallery-view-viewer:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.broch-gallery-modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 5;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  color: var(--color-text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
}

.broch-gallery-modal__close:hover,
.broch-gallery-modal__close:focus-visible {
  color: var(--color-text);
  background: rgba(255, 251, 242, 0.12);
}

.broch-gallery-modal__close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.broch-gallery-modal__head {
  flex-shrink: 0;
  padding: var(--space-lg) var(--space-xl) var(--space-md);
  padding-right: 3.5rem;
  border-bottom: 1px solid var(--color-line);
}

.broch-gallery-modal__head--viewer {
  padding-bottom: var(--space-sm);
}

.broch-gallery-modal__title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 400;
  margin: 0 0 var(--space-2xs);
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.broch-gallery-modal__subtitle {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 42rem;
}

.broch-gallery-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.broch-gallery-modal__body--viewer {
  padding-top: 2.5rem;
}

.broch-gallery-modal__grid-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-xl);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.broch-gallery-modal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 960px) {
  .broch-gallery-modal__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .broch-gallery-modal__grid {
    grid-template-columns: 1fr;
  }
}

.broch-gallery-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: var(--radius-lg);
}

.broch-gallery-tile:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.broch-gallery-tile-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-md);
  background: color-mix(in srgb, var(--color-bg) 55%, var(--color-surface));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.broch-gallery-tile:hover .broch-gallery-tile-inner,
.broch-gallery-tile:focus-visible .broch-gallery-tile-inner {
  border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-line));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  transform: translateY(-3px);
}

.broch-gallery-tile-thumb {
  aspect-ratio: 8.5 / 11;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--color-line);
  margin-bottom: var(--space-sm);
}

.broch-gallery-tile-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.broch-gallery-tile-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  margin: 0 0 var(--space-2xs);
  letter-spacing: 0.03em;
  color: var(--color-text);
}

.broch-gallery-tile-caption {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin: 0;
}

/* Viewer */
.broch-gallery-viewer {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: row;
}

@media (max-width: 900px) {
  .broch-gallery-viewer {
    flex-direction: column;
    overflow-y: auto;
  }
}

.broch-gallery-viewer__stage {
  position: relative;
  flex: 1 1 72%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  border-right: 1px solid var(--color-line);
}

@media (max-width: 900px) {
  .broch-gallery-viewer__stage {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--color-line);
  }
}

.broch-gallery-viewer__frame {
  position: relative;
  flex: 1 1 auto;
  min-height: min(52vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  background: rgba(0, 0, 0, 0.32);
}

.broch-gallery-viewer__frame img {
  max-width: 100%;
  max-height: min(52vh, 640px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.broch-gallery-viewer__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  z-index: 2;
}

.broch-gallery-viewer__arrow:hover,
.broch-gallery-viewer__arrow:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-line));
  background: var(--color-surface);
}

.broch-gallery-viewer__arrow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.broch-gallery-viewer__arrow--prev {
  left: var(--space-sm);
}

.broch-gallery-viewer__arrow--next {
  right: var(--space-sm);
}

.broch-gallery-viewer__strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
}

.broch-gallery-viewer__strip-label {
  width: 100%;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2xs);
}

.broch-gallery-strip-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 4.75rem;
  padding: 2px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.broch-gallery-strip-btn:hover,
.broch-gallery-strip-btn:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-line));
}

.broch-gallery-strip-btn[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--featured-border-brass) 55%, var(--color-line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--featured-border-brass) 35%, transparent);
}

.broch-gallery-strip-btn img {
  display: block;
  width: 100%;
  aspect-ratio: 8.5 / 11;
  object-fit: contain;
  object-position: center top;
  border-radius: 2px;
}

.broch-gallery-strip-btn span {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-top: 4px;
  text-align: center;
}

.broch-gallery-viewer__meta {
  flex: 0 0 28%;
  max-width: 22rem;
  min-width: min(100%, 17rem);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow-y: auto;
}

@media (max-width: 900px) {
  .broch-gallery-viewer__meta {
    flex: 1 1 auto;
    max-width: none;
  }
}

.broch-gallery-meta__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin: 0;
  letter-spacing: 0.04em;
}

.broch-gallery-meta__caption {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.broch-gallery-meta__note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text);
}

.broch-gallery-meta__note2 {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.broch-gallery-meta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-md);
}

.broch-gallery-meta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.broch-gallery-meta__btn--primary {
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-line);
}

.broch-gallery-meta__btn--primary:hover,
.broch-gallery-meta__btn--primary:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-line));
  background: rgba(255, 251, 242, 0.08);
}

.broch-gallery-meta__btn--ghost {
  color: var(--color-accent);
  background: transparent;
  border: 1px solid transparent;
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.broch-gallery-meta__btn--ghost:hover,
.broch-gallery-meta__btn--ghost:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.broch-gallery-meta__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

a.broch-gallery-meta__btn {
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}

a.broch-gallery-meta__btn--primary {
  color: var(--color-text);
}

.broch-gallery-meta__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.broch-gallery-meta__row .broch-gallery-meta__btn {
  flex: 1 1 auto;
}

/* ---------- Structured Review Log module: sanitized worksheet mockup (1.html) ---------- */
.worksheet-artifact-section {
  max-width: var(--content-rail-max);
  margin-inline: auto;
  padding: 0 var(--space-md) var(--space-xl);
}

.worksheet-artifact {
  margin: 0;
}

.worksheet-mockup {
  position: relative;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-bg));
  border: 1px solid var(--color-line);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--color-text) 4%, transparent),
    0 12px 40px color-mix(in srgb, #000 35%, transparent);
}

/* Ingestion → extraction → paste → log (operator mental model) */
.worksheet-mockup__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.45rem;
  margin-bottom: var(--space-md);
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--color-line) 150%, transparent);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  font-family: var(--font-sans);
  font-size: clamp(0.58rem, 1.9vw, 0.68rem);
  line-height: 1.35;
  color: var(--color-text-muted);
}

.worksheet-mockup__flow-node {
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted));
  font-weight: 500;
  text-align: center;
}

.worksheet-mockup__flow-bracket {
  color: var(--color-text-muted);
  font-weight: 400;
  opacity: 0.72;
}

.worksheet-mockup__flow-arrow {
  color: color-mix(in srgb, var(--pillar-ai) 65%, var(--color-text-muted));
  font-weight: 400;
  opacity: 0.88;
  user-select: none;
}

.worksheet-mockup__panel {
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-line) 180%, transparent);
  background: color-mix(in srgb, var(--color-bg) 92%, #1a1f28);
}

.worksheet-mockup__grid {
  display: grid;
  grid-template-columns: minmax(7.25rem, 9rem) repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(2.35rem, auto);
  font-family: var(--font-sans);
  font-size: 0.7rem;
}

@media (min-width: 640px) {
  .worksheet-mockup__grid {
    font-size: 0.75rem;
  }
}

.worksheet-mockup__cell {
  padding: 0.45rem 0.4rem;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

.worksheet-mockup__cell--corner {
  justify-content: flex-start;
  padding-left: 0.5rem;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  color: var(--color-text-muted);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.worksheet-mockup__cell--h {
  font-weight: 600;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  letter-spacing: 0.02em;
}

.worksheet-mockup__cell--h.worksheet-mockup__cell--formula-col {
  background: color-mix(in srgb, var(--pillar-ai) 20%, var(--color-surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pillar-ai) 55%, transparent);
}

.worksheet-mockup__formula-hint {
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.72em;
  font-weight: 700;
  vertical-align: super;
  color: color-mix(in srgb, var(--pillar-ai) 75%, var(--color-text-muted));
  opacity: 0.95;
}

.worksheet-mockup__inline-hint {
  display: inline;
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text-muted);
}

.worksheet-mockup__section {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.42rem 0.55rem 0.32rem;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-muted) 95%, transparent);
  background: color-mix(in srgb, var(--color-bg) 52%, var(--color-surface));
  border-top: 1px solid color-mix(in srgb, var(--color-line) 200%, transparent);
  border-bottom: 1px solid var(--color-line);
}

#ws-section-input {
  border-top-color: color-mix(in srgb, var(--color-line) 140%, transparent);
}

.worksheet-mockup__cell--formula-col {
  background: color-mix(in srgb, var(--pillar-ai) 11%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pillar-ai) 48%, transparent);
}

.worksheet-mockup__cell--rollup.worksheet-mockup__cell--formula-col,
.worksheet-mockup__cell--summary.worksheet-mockup__cell--formula-col {
  background: color-mix(in srgb, var(--pillar-ai) 18%, var(--color-surface));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--pillar-ai) 55%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--pillar-ai) 22%, transparent);
}

.worksheet-mockup__cell--label {
  justify-content: flex-start;
  padding-left: 0.55rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted));
  background: color-mix(in srgb, var(--color-surface) 40%, transparent);
  font-size: 0.68rem;
}

.worksheet-mockup__cell--muted {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.worksheet-mockup__cell--rollup {
  background: color-mix(in srgb, var(--pillar-ai) 12%, var(--color-surface));
  color: var(--color-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pillar-ai) 22%, transparent);
}

.worksheet-mockup__footer-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.55rem 0.65rem;
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  font-size: 0.6rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--color-line) 180%, transparent);
  letter-spacing: 0.01em;
}

.worksheet-mockup__cell--summary {
  background: color-mix(in srgb, var(--structural-line) 8%, var(--color-surface));
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  position: relative;
}

.worksheet-mockup__cell--summary::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--structural-line) 35%, transparent);
  pointer-events: none;
}

.worksheet-mockup__cell--out-strong {
  background: color-mix(in srgb, var(--structural-line) 10%, var(--color-surface));
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  position: relative;
}

.worksheet-mockup__cell--out-strong::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--structural-line) 42%, transparent);
  pointer-events: none;
}

.worksheet-mockup__cell--out-strong.worksheet-mockup__cell--formula-col {
  background: color-mix(in srgb, var(--pillar-ai) 16%, var(--color-surface));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--pillar-ai) 58%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--pillar-ai) 26%, transparent);
}

.worksheet-mockup__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.worksheet-mockup__chip--active {
  color: color-mix(in srgb, #a8d4b8 75%, var(--color-text));
  background: color-mix(in srgb, #2d4a38 45%, var(--color-bg));
  border: 1px solid color-mix(in srgb, #5a8f6a 35%, transparent);
}

.worksheet-mockup__chip--review {
  color: color-mix(in srgb, #e8d4a8 85%, var(--color-text));
  background: color-mix(in srgb, #4a3d22 50%, var(--color-bg));
  border: 1px solid color-mix(in srgb, #8f7a4a 32%, transparent);
}

.worksheet-mockup__chip--complete {
  color: color-mix(in srgb, #b8c8dc 90%, var(--color-text));
  background: color-mix(in srgb, #2a3548 55%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
}

.worksheet-mockup__chip--hold {
  color: color-mix(in srgb, var(--color-text-muted) 92%, var(--color-text));
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-bg));
  border: 1px solid var(--color-line);
}

.worksheet-mockup__check {
  display: inline-flex;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: 2px;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  color: color-mix(in srgb, var(--color-accent) 80%, var(--color-text));
}

.worksheet-mockup__check--on::after {
  content: "✓";
  line-height: 1;
}

.worksheet-artifact__caption {
  margin-top: var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 48rem;
}

@media (max-width: 639px) {
  .worksheet-mockup {
    padding: var(--space-sm) 0.65rem;
  }

  .worksheet-mockup__flow {
    justify-content: flex-start;
    padding: 0.5rem 0.55rem;
  }

  .worksheet-mockup__flow-arrow {
    flex: 0 0 auto;
  }
}

/* ---------- Page image gallery (opt-in: main[data-page-gallery]) ---------- */
body.page-image-gallery-open {
  overflow: hidden;
}

/* [hidden] must win: a plain display:grid here overrides the UA hidden rule */
.page-image-gallery[hidden] {
  display: none !important;
}

.page-image-gallery {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-items: center;
  padding: var(--space-md);
  box-sizing: border-box;
}

.page-image-gallery__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.94);
  cursor: zoom-out;
}

.page-image-gallery__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(230, 234, 240, 0.18);
  border-radius: 8px;
  background: rgba(18, 20, 26, 0.85);
  color: rgba(236, 238, 242, 0.92);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.page-image-gallery__close:hover,
.page-image-gallery__close:focus-visible {
  background: rgba(32, 36, 44, 0.95);
  border-color: rgba(198, 169, 107, 0.35);
  outline: none;
}

.page-image-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: min(4.5rem, 18vh);
  border: 1px solid rgba(230, 234, 240, 0.15);
  border-radius: 8px;
  background: rgba(18, 20, 26, 0.72);
  color: rgba(236, 238, 242, 0.9);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.page-image-gallery__arrow:hover,
.page-image-gallery__arrow:focus-visible {
  background: rgba(32, 36, 44, 0.92);
  border-color: rgba(198, 169, 107, 0.32);
  outline: none;
}

.page-image-gallery__arrow--prev {
  left: max(var(--space-sm), env(safe-area-inset-left));
}

.page-image-gallery__arrow--next {
  right: max(var(--space-sm), env(safe-area-inset-right));
}

.page-image-gallery__subtitle {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 0 var(--space-sm);
  padding: 0 var(--space-lg);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(198, 169, 107, 0.88);
  text-align: center;
  max-width: min(40rem, 100%);
  line-height: 1.4;
}

.page-image-gallery__subtitle[hidden] {
  display: none !important;
}

.page-image-gallery__stage {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  max-width: 100%;
  max-height: min(86vh, calc(100vh - 7rem));
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.page-image-gallery__single:not([hidden]) {
  display: contents;
}

.page-image-gallery__single[hidden] {
  display: none !important;
}

.page-image-gallery__compare {
  position: relative;
  max-width: 100%;
  max-height: inherit;
}

.page-image-gallery__compare[hidden] {
  display: none !important;
}

.page-image-gallery__compare-inner {
  position: relative;
  display: inline-block;
  max-width: min(96vw, 100%);
  width: min(60vw, 72rem);
  max-height: min(84vh, calc(100vh - 8rem));
  vertical-align: middle;
  --compare-pct: 50%;
  --compare-pct-inv: 50%;
  touch-action: none;
  cursor: grab;
}

.page-image-gallery__compare-inner:active {
  cursor: grabbing;
}

.page-image-gallery__img-before {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(84vh, calc(100vh - 8rem));
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(230, 234, 240, 0.12);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  user-select: none;
}

.page-image-gallery__img-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  border: 1px solid rgba(230, 234, 240, 0.12);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  clip-path: inset(0 var(--compare-pct-inv) 0 0);
  pointer-events: none;
  user-select: none;
}

.page-image-gallery__compare-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-pct);
  width: 2px;
  transform: translateX(-50%);
  background: rgba(250, 251, 252, 0.92);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 2;
}

.page-image-gallery__compare-handle {
  position: absolute;
  top: 50%;
  left: var(--compare-pct);
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(230, 234, 240, 0.25);
  border-radius: 999px;
  background: rgba(18, 20, 26, 0.88);
  color: rgba(236, 238, 242, 0.95);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.page-image-gallery__compare-handle::before {
  content: '';
  display: block;
  width: 0.35rem;
  height: 1.1rem;
  border-inline: 2px solid currentColor;
  border-block: 0;
  box-sizing: border-box;
  opacity: 0.85;
}

.page-image-gallery__compare-handle:hover,
.page-image-gallery__compare-handle:focus-visible {
  background: rgba(32, 36, 44, 0.95);
  border-color: rgba(198, 169, 107, 0.4);
  outline: none;
}

.page-image-gallery__compare-handle:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(0.98);
}

.page-image-gallery__img {
  max-width: 100%;
  max-height: min(88vh, calc(100vh - 6rem));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(230, 234, 240, 0.12);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.page-image-gallery__img--leaving {
  transition: opacity 0.15s ease, transform 0.15s ease;
  opacity: 0;
  transform: translateX(var(--gallery-leave-x, -24px));
}

.page-image-gallery__img--entering {
  animation: pageImageGalleryEnter 0.28s ease forwards;
}

@keyframes pageImageGalleryEnter {
  from {
    opacity: 0;
    transform: translateX(var(--gallery-enter-x, 24px));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-image-gallery__img--leaving,
  .page-image-gallery__img--entering,
  .page-image-gallery__img-before.page-image-gallery__img--leaving,
  .page-image-gallery__img-after.page-image-gallery__img--leaving,
  .page-image-gallery__img-before.page-image-gallery__img--entering,
  .page-image-gallery__img-after.page-image-gallery__img--entering {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.page-image-gallery__img-before.page-image-gallery__img--leaving,
.page-image-gallery__img-after.page-image-gallery__img--leaving {
  transition: opacity 0.15s ease, transform 0.15s ease;
  opacity: 0;
  transform: translateX(var(--gallery-leave-x, -24px));
}

.page-image-gallery__img-before.page-image-gallery__img--entering,
.page-image-gallery__img-after.page-image-gallery__img--entering {
  animation: pageImageGalleryEnter 0.28s ease forwards;
}

.page-image-gallery__caption {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 3;
  margin: var(--space-md) 0 0;
  padding: 0 var(--space-xl);
  max-width: min(52rem, 100%);
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(210, 214, 222, 0.88);
  text-align: center;
}

.page-image-gallery__caption:empty {
  display: none;
}

.page-image-gallery__counter {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 4;
  margin: var(--space-xs) 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(180, 186, 198, 0.72);
  text-align: center;
}

.page-image-gallery__counter:empty {
  display: none;
}

.page-image-gallery-source {
  cursor: zoom-in;
}

.page-image-gallery-source:focus-visible {
  outline: 2px solid rgba(198, 169, 107, 0.55);
  outline-offset: 3px;
}

@media (max-width: 36em) {
  .page-image-gallery__arrow {
    width: 2.25rem;
    height: min(4rem, 22vh);
    font-size: 1.4rem;
  }

  .page-image-gallery__compare-inner {
    width: min(96vw, 100%);
  }
}

/* ---------- Print ---------- */
@media print {
  .page-image-gallery {
    display: none !important;
  }
  .skip-link,
  .site-nav,
  .nav-toggle,
  #pageFade,
  .hero-ctas,
  .hero-credibility,
  .hero-arch-link-wrap {
    display: none !important;
  }
  body {
    background: #faf6ec;
    color: #111;
  }
  a {
    color: #111;
  }
  .hero {
    min-height: auto;
    padding: 2rem 0;
  }
  .section {
    padding: 1.5rem 0;
  }
  .footer {
    border-top: 1px solid #ccc;
    background: #f2ede3;
  }
  .footer-text,
  .footer-copy {
    color: #333;
  }
}