@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700;800&display=swap");

:root {
  /*
   * OWNER BRAND SETTINGS (OWNER-EDITABLE)
   * Change only the values after the colon; keep every variable name and semicolon.
   * The internal aliases at the end of this block are used by the website and
   * normally should not be edited.
   */

  /* Brand colours */
  --color-midnight: #071724;
  --color-midnight-raised: #0c2231;
  --color-ink: #141b22;
  --color-muted: #66717c;
  --color-paper: #f7f8f5;
  --color-surface: #ffffff;
  --color-surface-alt: #eef1ed;
  --color-accent: #44b39d;
  --color-accent-strong: #258a78;
  --color-focus: #72dbc6;
  --color-success: #23856f;
  --color-portrait-backdrop: #152c3b;
  --color-black: #000000;
  --color-hero-background: #071725;
  --color-hero-text: #f4f6f3;
  --color-hero-muted: #aab7c2;
  --color-hero-accent: #56bfae;
  --color-hero-atmosphere: #0d3237;
  --color-header-scrolled: rgba(248, 249, 247, 0.68);

  /* Supporting translucent colours (usually leave these unchanged) */
  --color-accent-soft: rgba(68, 179, 157, 0.14);
  --color-accent-glow: rgba(68, 179, 157, 0.18);
  --color-accent-ambient: rgba(68, 179, 157, 0.20);
  --color-accent-line: rgba(68, 179, 157, 0.25);
  --color-border-light: rgba(20, 27, 34, 0.15);
  --color-border-dark: rgba(255, 255, 255, 0.15);
  --color-paper-88: rgba(247, 248, 245, 0.88);
  --color-paper-78: rgba(247, 248, 245, 0.78);
  --color-paper-72: rgba(247, 248, 245, 0.72);
  --color-paper-70: rgba(247, 248, 245, 0.70);
  --color-paper-68: rgba(247, 248, 245, 0.68);
  --color-paper-64: rgba(247, 248, 245, 0.64);
  --color-paper-62: rgba(247, 248, 245, 0.62);
  --color-paper-58: rgba(247, 248, 245, 0.58);
  --color-paper-56: rgba(247, 248, 245, 0.56);
  --color-paper-55: rgba(247, 248, 245, 0.55);
  --color-paper-50: rgba(247, 248, 245, 0.50);
  --color-paper-48: rgba(247, 248, 245, 0.48);
  --color-paper-45: rgba(247, 248, 245, 0.45);
  --color-paper-42: rgba(247, 248, 245, 0.42);
  --color-white-30: rgba(255, 255, 255, 0.30);
  --color-white-25: rgba(255, 255, 255, 0.25);
  --color-white-22: rgba(255, 255, 255, 0.22);
  --color-white-20: rgba(255, 255, 255, 0.20);
  --color-white-12: rgba(255, 255, 255, 0.12);
  --color-white-watermark: rgba(255, 255, 255, 0.035);
  --color-black-shadow: rgba(0, 0, 0, 0.35);
  --color-midnight-shadow: rgba(7, 23, 36, 0.14);
  --color-header-border: rgba(20, 27, 34, 0.11);
  --color-header-shadow: rgba(7, 23, 37, 0.045);
  --color-hero-grid: rgba(255, 255, 255, 0.045);
  --color-hero-text-24: rgba(244, 246, 243, 0.24);
  --color-hero-text-18: rgba(244, 246, 243, 0.18);
  --color-hero-accent-58: rgba(86, 191, 174, 0.58);
  --color-hero-accent-28: rgba(86, 191, 174, 0.28);
  --color-hero-accent-12: rgba(86, 191, 174, 0.12);
  --color-hero-accent-07: rgba(86, 191, 174, 0.07);
  --color-hero-atmosphere-90: rgba(13, 50, 55, 0.90);
  --color-hero-atmosphere-76: rgba(13, 50, 55, 0.76);
  --color-hero-atmosphere-32: rgba(13, 50, 55, 0.32);
  --color-hero-atmosphere-22: rgba(13, 50, 55, 0.22);
  --color-hero-shadow: rgba(5, 18, 29, 0.16);
  --color-signal-grid: rgba(68, 179, 157, 0.032);
  --color-signal-line: rgba(68, 179, 157, 0.14);
  --color-signal-node: rgba(68, 179, 157, 0.24);
  --color-signal-field: rgba(68, 179, 157, 0.105);
  --color-signal-depth: rgba(7, 23, 36, 0.075);
  --color-surface-accent-wash: rgba(68, 179, 157, 0.052);
  --color-dark-accent-wash: rgba(86, 191, 174, 0.09);
  --color-midnight-translucent: rgba(7, 23, 36, 0.38);
  --color-surface-highlight: rgba(255, 255, 255, 0.68);
  --color-signal-scan: rgba(86, 191, 174, 0.22);
  --color-signal-fragment: rgba(86, 191, 174, 0.28);
  --color-glass-surface: rgba(255, 255, 255, 0.66);
  --color-glass-border: rgba(20, 27, 34, 0.13);
  --color-glass-dark: rgba(8, 24, 40, 0.64);
  --color-glass-dark-border: rgba(255, 255, 255, 0.14);

  /* Typography */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-size-body: clamp(1rem, 0.96rem + 0.16vw, 1.1rem);
  --font-size-heading-1: clamp(3.2rem, 7.2vw, 7.6rem);
  --font-size-heading-2: clamp(2.55rem, 5.1vw, 5.3rem);
  --font-size-heading-3: clamp(1.2rem, 1.5vw, 1.55rem);
  --font-size-heading-1-compact: clamp(3rem, 15vw, 4.8rem);
  --font-size-heading-2-compact: clamp(2.3rem, 11vw, 3.6rem);
  --line-height-body: 1.72;
  --line-height-body-compact: 1.66;
  --line-height-heading: 1.08;
  --letter-spacing-heading: -0.045em;

  /* Global layout and spacing */
  --layout-container: 1240px;
  --layout-hero-container: 1280px;
  --spacing-page-gutter: clamp(1.25rem, 4vw, 4rem);
  --spacing-page-gutter-compact: 1.15rem;
  --spacing-section: clamp(5.5rem, 10vw, 10rem);
  --spacing-section-compact: clamp(4.5rem, 12vw, 7rem);
  --spacing-layout-gap: clamp(3rem, 8vw, 10rem);
  --spacing-layout-gap-feature: clamp(3rem, 8vw, 9rem);
  --spacing-layout-gap-narrow: clamp(2rem, 6vw, 7rem);

  /* Borders and corner radius */
  --border-width-thin: 1px;
  --border-width-accent: 3px;
  --focus-outline-offset: 4px;
  --border-style: solid;
  --radius-square: 0;
  --radius-round: 50%;
  --rule-light: var(--border-width-thin) var(--border-style) var(--color-border-light);
  --rule-dark: var(--border-width-thin) var(--border-style) var(--color-border-dark);
  --rule-accent: var(--border-width-thin) var(--border-style) var(--color-accent);
  --rule-accent-strong: var(--border-width-thin) var(--border-style) var(--color-accent-strong);
  --rule-current: var(--border-width-thin) var(--border-style) currentColor;

  /* Shadows */
  --shadow-elevated: 0 30px 80px var(--color-midnight-shadow);
  --shadow-portrait: 0 35px 80px var(--color-black-shadow);
  --shadow-accent-dot: 0 0 0 0.35rem var(--color-accent-soft);
  --shadow-accent-focus: 0 0 0 0.4rem var(--color-accent-soft);
  --shadow-core-ring: 0 0 0 0.65rem var(--color-paper);
  --shadow-surface-inset: inset 0 1px 0 var(--color-surface-highlight);
  --shadow-interactive: 0 0.8rem 2.2rem rgba(7, 23, 36, 0.09);
  --shadow-signal: 0 1.1rem 3rem rgba(7, 23, 36, 0.11), 0 0 0 1px var(--color-accent-soft);

  /* Motion */
  --motion-duration-instant: 0.2s;
  --motion-duration-fast: 0.25s;
  --motion-duration-base: 0.3s;
  --motion-duration-standard: 0.35s;
  --motion-duration-hover: 0.4s;
  --motion-duration-fill: 0.42s;
  --motion-duration-emphasis: 0.45s;
  --motion-duration-sweep: 0.5s;
  --motion-duration-slow: 0.55s;
  --motion-duration-stagger: 0.65s;
  --motion-duration-hero: 0.7s;
  --motion-duration-reveal: 0.8s;
  --motion-duration-clip: 1s;
  --motion-duration-portrait: 1.05s;
  --motion-duration-ambient: 12s;
  --motion-duration-hero-atmosphere: 12s;
  --motion-duration-global-field: 14s;
  --motion-duration-signal-trace: 11s;
  --motion-duration-signal-scan: 9s;
  --motion-duration-scroll-cue: 2.2s;
  --motion-duration-reduced: 0.01ms;
  --motion-stagger-delay-1: 70ms;
  --motion-stagger-delay-2: 140ms;
  --motion-stagger-delay-3: 210ms;
  --motion-stagger-delay-4: 280ms;
  --motion-stagger-delay-5: 350ms;
  --motion-delay-hero-eyebrow: 40ms;
  --motion-delay-hero-title-1: 60ms;
  --motion-delay-hero-title-2: 100ms;
  --motion-delay-hero-title-3: 140ms;
  --motion-delay-hero-title-4: 180ms;
  --motion-delay-hero-copy: 260ms;
  --motion-delay-hero-actions: 360ms;
  --motion-delay-hero-context: 440ms;
  --motion-delay-hero-portrait: 400ms;
  --motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-easing-gentle: ease-in-out;
  --motion-easing-direct: ease-out;

  /* Internal compatibility aliases - do not edit */
  --midnight: var(--color-midnight);
  --midnight-2: var(--color-midnight-raised);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --paper: var(--color-paper);
  --surface: var(--color-surface);
  --surface-alt: var(--color-surface-alt);
  --accent: var(--color-accent);
  --accent-strong: var(--color-accent-strong);
  --accent-soft: var(--color-accent-soft);
  --border: var(--color-border-light);
  --border-dark: var(--color-border-dark);
  --focus: var(--color-focus);
  --success: var(--color-success);
  --display: var(--font-display);
  --body: var(--font-body);
  --mono: var(--font-mono);
  --container: var(--layout-container);
  --gutter: var(--spacing-page-gutter);
  --section: var(--spacing-section);
  --ease: var(--motion-easing);
  --shadow: var(--shadow-elevated);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: clip; background: var(--paper); }
body {
  --signal-field-opacity-start: 0.76;
  --signal-field-opacity-end: 0.9;
  --signal-trace-opacity-start: 0.72;
  --signal-trace-opacity-end: 0.92;
  position: relative;
  isolation: isolate;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 1;
  pointer-events: none;
}
body::before {
  inset: -8vmax;
  opacity: 0.78;
  background-image:
    radial-gradient(circle at 14% 16%, var(--color-signal-field) 0, transparent 28rem),
    radial-gradient(circle at 88% 72%, var(--color-signal-depth) 0, transparent 34rem),
    linear-gradient(var(--color-signal-grid) var(--border-width-thin), transparent var(--border-width-thin)),
    linear-gradient(90deg, var(--color-signal-grid) var(--border-width-thin), transparent var(--border-width-thin));
  background-size: auto, auto, clamp(4.5rem, 6vw, 6rem) clamp(4.5rem, 6vw, 6rem), clamp(4.5rem, 6vw, 6rem) clamp(4.5rem, 6vw, 6rem);
  transform: translate3d(-0.35%, -0.2%, 0) scale(1.01);
  transform-origin: center;
}
body::after {
  inset: 0;
  opacity: 0.62;
  background:
    linear-gradient(90deg, transparent, var(--color-signal-line) 14%, var(--color-signal-line) 86%, transparent) 7vw 24vh / min(30rem, 34vw) var(--border-width-thin) no-repeat,
    linear-gradient(var(--color-signal-line), var(--color-signal-line)) calc(7vw + min(30rem, 34vw)) 24vh / var(--border-width-thin) 14vh no-repeat,
    radial-gradient(circle, var(--color-signal-node) 0 2px, transparent 2.5px) calc(7vw + min(30rem, 34vw) - 3px) calc(38vh - 3px) / 7px 7px no-repeat,
    linear-gradient(90deg, transparent, var(--color-signal-line) 18%, var(--color-signal-line) 82%, transparent) 68vw 72vh / min(24rem, 24vw) var(--border-width-thin) no-repeat,
    linear-gradient(var(--color-signal-line), var(--color-signal-line)) 68vw 61vh / var(--border-width-thin) 11vh no-repeat,
    radial-gradient(circle, var(--color-signal-node) 0 2px, transparent 2.5px) calc(68vw - 3px) calc(61vh - 3px) / 7px 7px no-repeat,
    linear-gradient(90deg, transparent, var(--color-signal-fragment), transparent) 24vw 47vh / 9rem var(--border-width-thin) no-repeat,
    radial-gradient(circle, var(--color-signal-fragment) 0 1.5px, transparent 2px) calc(24vw + 8.7rem) calc(47vh - 2px) / 5px 5px no-repeat,
    linear-gradient(var(--color-signal-fragment), var(--color-signal-fragment)) 54vw 18vh / var(--border-width-thin) 7vh no-repeat,
    radial-gradient(circle, var(--color-signal-fragment) 0 1.5px, transparent 2px) calc(54vw - 2px) calc(25vh - 2px) / 5px 5px no-repeat,
    radial-gradient(circle, var(--color-signal-node) 0 1.5px, transparent 2px) 86vw 42vh / 5px 5px no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, var(--color-black) 10%, var(--color-black) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, var(--color-black) 10%, var(--color-black) 90%, transparent 100%);
  transform: translate3d(0, 0, 0);
  transform-origin: center;
}
body.menu-open { overflow: hidden; }
.signal-geometry { position: fixed; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; contain: strict; }
.signal-geometry span { position: absolute; display: block; color: var(--accent-strong); opacity: 0.22; pointer-events: none; will-change: transform; }
.signal-geometry__node { top: 18%; left: 1.4rem; width: 0.8rem; aspect-ratio: 1; border: var(--border-width-thin) var(--border-style) currentColor; }
.signal-geometry__node::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0.2rem; aspect-ratio: 1; background: currentColor; border-radius: var(--radius-round); transform: translate(-50%, -50%); }
.signal-geometry__node::after { content: ""; position: absolute; top: 50%; left: 100%; width: 2.75rem; height: var(--border-width-thin); background: linear-gradient(90deg, currentColor, transparent); }
.signal-geometry__diamond { right: 1.4rem; top: 71%; width: 0.62rem; aspect-ratio: 1; border: var(--border-width-thin) var(--border-style) currentColor; transform: rotate(45deg); }
.signal-geometry__diamond::after { content: ""; position: absolute; top: 50%; right: 100%; width: 2rem; height: var(--border-width-thin); background: linear-gradient(90deg, transparent, currentColor); transform: rotate(-45deg); transform-origin: right; }
.signal-geometry__cross { bottom: 1.3rem; left: 48%; width: 2.4rem; height: 2.4rem; }
.signal-geometry__cross::before, .signal-geometry__cross::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; transform: translate(-50%, -50%); }
.signal-geometry__cross::before { width: 100%; height: var(--border-width-thin); }
.signal-geometry__cross::after { width: var(--border-width-thin); height: 100%; }
.signal-geometry__segment { top: 10%; right: 17%; width: 4rem; height: var(--border-width-thin); background: linear-gradient(90deg, transparent, currentColor 36%, currentColor 66%, transparent); }
.signal-geometry__segment::after { content: ""; position: absolute; top: 50%; left: 58%; width: 0.28rem; aspect-ratio: 1; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform: translate(-50%, -50%); }
::selection { color: var(--paper); background: var(--accent-strong); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
h1, h2, h3, h4, p { margin-block-start: 0; }
h1, h2, h3, h4 {
  color: inherit;
  font-family: var(--display);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}
h1 { font-size: var(--font-size-heading-1); font-weight: var(--font-weight-semibold); }
h2 { font-size: var(--font-size-heading-2); font-weight: var(--font-weight-semibold); }
h3 { font-size: var(--font-size-heading-3); font-weight: var(--font-weight-semibold); }
p { max-width: 68ch; }

.container { position: relative; z-index: 2; width: min(calc(100% - (2 * var(--gutter))), var(--container)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section); }
.section--dark { color: var(--paper); background: radial-gradient(circle at 88% 12%, var(--color-dark-accent-wash), transparent 32rem), linear-gradient(145deg, var(--midnight-2) -30%, var(--midnight) 48%, color-mix(in srgb, var(--midnight) 96%, var(--accent-strong)) 120%); }
.section--alt { background: color-mix(in srgb, var(--surface-alt) 93%, transparent); }
.section-index, .eyebrow, .micro-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 0.7rem; color: var(--accent-strong); margin-bottom: 1.45rem; }
.eyebrow::before { content: ""; width: 2.1rem; height: var(--border-width-thin); background: currentColor; }
.section--dark .eyebrow, .hero .eyebrow { color: var(--accent); }
.section-head { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.45fr); gap: 4rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 6rem); }
.section-head h2 { margin-bottom: 0; max-width: 13ch; }
.section-head p { color: var(--muted); margin-bottom: 0; }
.section--dark .section-head p { color: var(--color-paper-64); }
.lead { color: var(--muted); font-size: clamp(1.12rem, 1.4vw, 1.35rem); line-height: 1.7; }
.section--dark .lead { color: var(--color-paper-68); }

.skip-link { position: fixed; z-index: 1000; top: 0.75rem; left: 0.75rem; transform: translateY(-160%); padding: 0.75rem 1rem; color: var(--midnight); background: var(--focus); text-decoration: none; transition: transform var(--motion-duration-instant); }
.skip-link:focus { transform: none; }
:focus-visible { outline: var(--border-width-accent) var(--border-style) var(--focus); outline-offset: var(--focus-outline-offset); }

.site-header { --header-light: var(--color-hero-text); --header-accent: var(--color-hero-accent); position: fixed; z-index: 100; inset: 0 0 auto; color: var(--header-light); border-bottom: var(--border-width-thin) var(--border-style) transparent; transition: color var(--motion-duration-standard), background var(--motion-duration-standard), border-color var(--motion-duration-standard), backdrop-filter var(--motion-duration-standard), box-shadow var(--motion-duration-standard); }
.site-header::after { content: ""; position: absolute; right: 0; bottom: calc(0px - var(--border-width-thin)); left: 0; height: var(--border-width-thin); background: var(--accent); opacity: 0.75; transform: scaleX(var(--reading-progress, 0)); transform-origin: left; }
.site-header.is-scrolled, .site-header.on-light { --header-accent: var(--accent-strong); color: var(--ink); background: var(--color-header-scrolled); border-color: var(--color-header-border); box-shadow: inset 0 1px 0 var(--color-surface-highlight), 0 0.65rem 2.1rem rgba(7, 23, 37, 0.08); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); }
.site-header .container { --container: var(--layout-hero-container); }
.nav-shell { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--display); font-weight: var(--font-weight-bold); line-height: 1; text-decoration: none; letter-spacing: -0.035em; }
.brand-mark { width: 2.2rem; aspect-ratio: 1; display: grid; place-items: center; border: var(--rule-current); font-family: var(--mono); font-size: 0.68rem; letter-spacing: -0.08em; transition: color var(--motion-duration-base), background var(--motion-duration-base), transform var(--motion-duration-base) var(--ease); }
.brand:hover .brand-mark, .brand:focus-visible .brand-mark { color: var(--midnight); background: var(--accent); transform: rotate(-2.5deg); }
.site-header .brand { gap: 0.85rem; font-size: 1.04rem; }
.site-header .brand-mark { width: 2.45rem; font-size: 0.72rem; }
.site-header .brand:hover .brand-mark, .site-header .brand:focus-visible .brand-mark { color: var(--color-hero-background); background: var(--header-accent); }
.brand-name { display: grid; gap: 0.16rem; }
.brand-name small { opacity: 0.64; font-family: var(--mono); font-size: 0.55rem; font-weight: var(--font-weight-medium); letter-spacing: 0.08em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav-link { position: relative; padding-block: 0.55rem; font-size: 0.79rem; font-weight: var(--font-weight-semibold); text-decoration: none; transition: color var(--motion-duration-instant); }
.nav-link::after { content: ""; position: absolute; right: 0; bottom: 0.25rem; left: 0; height: var(--border-width-thin); background: linear-gradient(90deg, var(--header-accent), color-mix(in srgb, var(--header-accent) 38%, transparent)); transform: scaleX(0); transform-origin: right; transition: transform var(--motion-duration-standard) var(--ease); }
.nav-link:hover, .nav-link:focus-visible { color: var(--header-accent); }
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; width: 3rem; height: 3rem; padding: 0; border: 0; background: none; cursor: pointer; }
.menu-toggle span { display: block; width: 1.5rem; height: var(--border-width-thin); margin: 0.38rem auto; background: currentColor; transition: transform var(--motion-duration-base) var(--ease); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(0.2rem) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-0.2rem) rotate(-45deg); }

.button { --button-bg: var(--accent); --button-color: var(--midnight); --button-lift: 0px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 3.15rem; padding: 0.82rem 1.25rem; overflow: hidden; color: var(--button-color); background: linear-gradient(115deg, color-mix(in srgb, var(--button-bg) 88%, var(--paper)), var(--button-bg) 62%); border: var(--border-width-thin) var(--border-style) var(--button-bg); border-radius: var(--radius-square); box-shadow: 0 0 0 transparent; font-family: var(--display); font-size: 0.82rem; font-weight: var(--font-weight-bold); text-decoration: none; cursor: pointer; transform: translateY(var(--button-lift)); transition: color var(--motion-duration-standard), border-color var(--motion-duration-standard), box-shadow var(--motion-duration-fast), transform var(--motion-duration-fast) var(--ease); }
.button::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--paper); transform: translateY(102%); transition: transform var(--motion-duration-fill) var(--ease); }
.button::after { content: ""; position: absolute; z-index: -1; inset: -1px; opacity: 0.46; background: linear-gradient(112deg, transparent 32%, var(--color-white-30) 49%, transparent 66%); pointer-events: none; transform: translateX(-115%); transition: transform var(--motion-duration-stagger) var(--ease); }
.button:hover, .button:focus-visible { --button-lift: -2px; color: var(--midnight); border-color: var(--paper); }
.button:hover::before, .button:focus-visible::before { transform: none; }
.button:hover::after, .button:focus-visible::after { transform: translateX(115%); }
.button:active { transform: scale(0.985); }
.magnetic { transform: translate3d(var(--mag-x, 0), calc(var(--mag-y, 0px) + var(--button-lift)), 0); }
.button__arrow { display: inline-block; font-size: 1.05rem; line-height: 1; transition: transform var(--motion-duration-base) var(--ease); }
.button:hover .button__arrow, .button:focus-visible .button__arrow { transform: translate(0.25rem, -0.12rem); }
.button--ghost { --button-bg: transparent; --button-color: currentColor; background: transparent; border-color: currentColor; }
.button--ghost::before { background: var(--midnight); }
.section--dark .button--ghost::before, .hero .button--ghost::before { background: var(--paper); }
.section--dark .button--ghost:hover, .section--dark .button--ghost:focus-visible, .hero .button--ghost:hover, .hero .button--ghost:focus-visible { color: var(--midnight); }
.button--small { min-height: 2.65rem; padding: 0.65rem 1rem; }
.text-link { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; padding-bottom: 0.25rem; font-family: var(--display); font-size: 0.86rem; font-weight: var(--font-weight-bold); text-decoration: none; }
.text-link::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: var(--border-width-thin); background: currentColor; transform-origin: right; transition: transform var(--motion-duration-standard) var(--ease); }
.text-link:hover::after, .text-link:focus-visible::after { transform: scaleX(0.35); }
.text-link span { transition: transform var(--motion-duration-base) var(--ease); }
.text-link:hover span, .text-link:focus-visible span { transform: translateX(0.35rem); }

.hero { --hero-bg: var(--color-hero-background); --hero-light: var(--color-hero-text); --hero-muted: var(--color-hero-muted); --hero-accent: var(--color-hero-accent); --hero-atmosphere: var(--color-hero-atmosphere); position: relative; z-index: 2; min-height: calc(100svh - 5rem); display: grid; align-items: center; overflow: hidden; color: var(--hero-light); background: var(--hero-bg); padding: clamp(7.25rem, 10vh, 8.5rem) 0 clamp(3.5rem, 6vh, 5rem); }
.hero .container { --container: var(--layout-hero-container); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--color-hero-grid) var(--border-width-thin), transparent var(--border-width-thin)), linear-gradient(90deg, var(--color-hero-grid) var(--border-width-thin), transparent var(--border-width-thin)); background-size: clamp(3.5rem, 6.5vw, 6.5rem) clamp(3.5rem, 6.5vw, 6.5rem); mask-image: linear-gradient(to right, transparent 2%, var(--color-black) 42%, var(--color-black)); }
.hero::after { content: ""; position: absolute; inset: -2%; pointer-events: none; background: radial-gradient(ellipse 68% 76% at 92% 48%, var(--color-hero-atmosphere-90), var(--color-hero-atmosphere-32) 45%, transparent 72%); transform: translate3d(0, 0, 0); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(25rem, 1fr); gap: clamp(2.25rem, 4.2vw, 4.25rem); align-items: center; }
.hero-copy { min-width: 0; padding-top: 1rem; }
.hero h1 { max-width: min(100%, 47.5rem); margin-bottom: 1.55rem; font-size: clamp(4.25rem, 5.85vw, 5.25rem); line-height: 1.025; letter-spacing: -0.04em; }
.hero-title-line { display: block; overflow: visible; }
.hero-title-line span { display: block; }
.hero .eyebrow { color: var(--hero-accent); margin-bottom: 1.25rem; font-size: clamp(0.64rem, 0.72vw, 0.72rem); }
.hero-statement { max-width: 36rem; margin-bottom: 1.15rem; color: var(--hero-muted); font-size: clamp(1.0625rem, 1.2vw, 1.125rem); line-height: 1.65; }
.hero-role { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 0.65rem; margin-bottom: 0; color: var(--hero-accent); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.065em; line-height: 1.55; text-transform: uppercase; }
.hero-role::before { content: ""; flex: 0 0 auto; width: 0.42rem; aspect-ratio: 1; background: var(--hero-accent); box-shadow: 0 0 0 0.32rem var(--color-hero-accent-12); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.hero .hero-actions { gap: 1rem; margin-top: 1.65rem; }
.hero .button { min-height: 3.25rem; }
.hero .button__arrow { transition: transform var(--motion-duration-base) var(--ease); }
.hero .button:hover .button__arrow, .hero .button:focus-visible .button__arrow { transform: translateX(0.25rem); }
.hero-context { display: flex; flex-wrap: wrap; gap: 0.65rem 0; align-items: center; margin-top: 1.55rem; color: var(--hero-muted); font-family: var(--mono); font-size: clamp(0.58rem, 0.64vw, 0.65rem); letter-spacing: 0.055em; line-height: 1.55; text-transform: uppercase; }
.hero-context span { display: inline-flex; align-items: center; gap: 0.55rem; }
.hero-context span + span::before { content: "•"; margin-inline: 0.7rem; color: var(--hero-accent); }
.portrait-stage { position: relative; isolation: isolate; justify-self: end; width: min(100%, 33.5rem); filter: drop-shadow(0 1.4rem 2.8rem var(--color-hero-shadow)); }
.portrait-stage::before { content: ""; position: absolute; z-index: 0; inset: 0.65rem -0.65rem -0.65rem 0.65rem; border: var(--border-width-thin) var(--border-style) var(--color-hero-accent-28); background: linear-gradient(135deg, var(--color-hero-accent-07), transparent 38%); pointer-events: none; transition: border-color var(--motion-duration-standard), transform var(--motion-duration-standard) var(--ease); }
.portrait-stage::after { content: ""; position: absolute; z-index: 2; top: -0.5rem; right: -0.5rem; width: 4.75rem; height: 4.75rem; opacity: 0.68; background: radial-gradient(circle, var(--hero-accent) 0 2px, transparent 2.5px) 100% 0 / 6px 6px no-repeat; border-top: var(--border-width-thin) var(--border-style) var(--color-hero-accent-58); border-right: var(--border-width-thin) var(--border-style) var(--color-hero-accent-58); pointer-events: none; transform: translate3d(0, 0, 0); transition: opacity var(--motion-duration-standard), transform var(--motion-duration-standard) var(--ease); }
.portrait-window { --portrait-signal-opacity: 0.3; position: relative; z-index: 1; overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-portrait-backdrop); border: var(--border-width-thin) var(--border-style) color-mix(in srgb, var(--color-hero-text-24) 82%, var(--hero-accent)); clip-path: inset(0); box-shadow: none; }
.portrait-window::after { content: ""; position: absolute; z-index: 2; top: 0; left: -24%; width: 24%; height: var(--border-width-accent); opacity: 0; background: linear-gradient(90deg, transparent, var(--hero-accent), transparent); pointer-events: none; transform: translate3d(0, 0, 0); }
.portrait-window picture { display: block; width: 100%; height: 100%; }
.portrait-window img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: scale(1.012) translate3d(var(--portrait-x, 0), var(--portrait-y, 0), 0); transition: transform var(--motion-duration-instant) var(--motion-easing-direct); }
.scroll-cue { position: absolute; z-index: 2; right: var(--gutter); bottom: 2rem; display: grid; justify-items: center; gap: 0.6rem; color: var(--color-paper-50); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; writing-mode: vertical-rl; }
.scroll-cue::after { content: ""; width: var(--border-width-thin); height: 3.2rem; background: linear-gradient(var(--accent) 50%, var(--color-white-20) 50%); background-size: 100% 200%; animation: scroll-line var(--motion-duration-scroll-cue) var(--motion-easing-gentle) infinite; }
.hero .scroll-cue::after { background: linear-gradient(var(--hero-accent), var(--color-hero-text-18)); background-size: 100% 100%; animation: none; }

.system-section { --system-accent: var(--color-hero-accent); position: relative; z-index: 2; padding-block: clamp(5rem, 5.6vw, 5.625rem) clamp(6.875rem, 7.8vw, 7.75rem); overflow: hidden; background: var(--paper); border-top: var(--rule-light); border-bottom: var(--rule-light); }
.system-section::before { content: ""; position: absolute; z-index: 0; inset: -12% -7%; opacity: 0.34; background-image: radial-gradient(circle at 78% 42%, var(--color-hero-accent-12) 0, var(--color-hero-accent-07) 22%, transparent 58%), linear-gradient(var(--color-header-border) var(--border-width-thin), transparent var(--border-width-thin)), linear-gradient(90deg, var(--color-header-border) var(--border-width-thin), transparent var(--border-width-thin)); background-size: auto, 5.5rem 5.5rem, 5.5rem 5.5rem; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 36%, rgba(0, 0, 0, 0.35) 56%, var(--color-black) 76%, var(--color-black) 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 36%, rgba(0, 0, 0, 0.35) 56%, var(--color-black) 76%, var(--color-black) 100%); pointer-events: none; transform: translate3d(0, 0, 0) scale(1.01); transform-origin: 72% 45%; }
.system-section > .container { position: relative; z-index: 1; }
.system-layout { display: grid; grid-template-columns: minmax(0, 47.5rem) minmax(22rem, 1fr); gap: clamp(4rem, 6vw, 6rem); align-items: start; }
.system-copy { min-width: 0; }
.system-copy .eyebrow { margin-bottom: 1.25rem; }
.system-copy h2 { max-width: 47.5rem; margin-bottom: 1.65rem; font-family: var(--display); font-size: clamp(3.25rem, 3.9vw, 3.625rem); font-weight: var(--font-weight-medium); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.system-intro { max-width: 38.75rem; margin-bottom: 0; color: color-mix(in srgb, var(--muted) 81%, var(--ink)); font-family: var(--body); font-size: clamp(1.0625rem, 1.1vw, 1.125rem); font-weight: var(--font-weight-regular); line-height: 1.65; text-wrap: pretty; }
.system-visual { position: relative; min-width: 0; padding: 1.35rem 1.45rem 1.5rem; border: var(--border-width-thin) var(--border-style) color-mix(in srgb, var(--color-header-border) 70%, transparent); background-color: var(--surface); background-image: radial-gradient(circle at 100% 0, var(--color-surface-accent-wash), transparent 18rem), linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 98%, var(--accent))); box-shadow: var(--shadow-surface-inset); }
.system-visual::before { content: ""; position: absolute; top: 1.5rem; bottom: 5.6rem; left: 2.5rem; width: var(--border-width-thin); background: var(--color-header-border); }
.system-stages { position: relative; z-index: 1; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.system-stage { position: relative; min-height: 3.95rem; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0.7rem 0.4rem; border-bottom: var(--border-width-thin) var(--border-style) var(--color-header-border); transition: color var(--motion-duration-instant), transform var(--motion-duration-instant) var(--ease); }
.system-stage:last-child { border-bottom: 0; }
.system-stage::after { content: ""; position: absolute; top: 50%; left: 1rem; width: 1rem; height: var(--border-width-thin); background: var(--color-header-border); transform-origin: left; transition: background var(--motion-duration-instant), transform var(--motion-duration-instant) var(--ease); }
.system-stage span { position: relative; z-index: 1; width: 1.35rem; aspect-ratio: 1; display: grid; place-items: center; color: var(--accent-strong); background: var(--surface); border: var(--border-width-thin) var(--border-style) var(--color-header-border); border-radius: var(--radius-round); font-family: var(--body); font-size: 0.56rem; font-weight: var(--font-weight-semibold); line-height: 1; transition: color var(--motion-duration-instant), background var(--motion-duration-instant), border-color var(--motion-duration-instant); }
.system-stage strong { color: var(--ink); font-family: var(--body); font-size: 0.72rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.07em; text-transform: uppercase; transition: color var(--motion-duration-instant); }
.system-outcome { position: relative; display: grid; gap: 0.2rem; margin: 1.2rem 0 0 3rem; padding: 1rem 1.1rem; color: var(--paper); background: var(--midnight); border-left: var(--border-width-accent) var(--border-style) var(--system-accent); transition: background var(--motion-duration-instant), transform var(--motion-duration-instant) var(--ease); }
.system-outcome::before { content: ""; position: absolute; top: 50%; right: 100%; width: 1.9rem; height: var(--border-width-thin); background: var(--system-accent); }
.system-outcome::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--border-width-accent); background: var(--system-accent); transform-origin: left; transition: transform var(--motion-duration-instant) var(--ease); }
.system-outcome span, .system-outcome strong { position: relative; z-index: 1; transition: transform var(--motion-duration-instant) var(--ease); }
.system-outcome span { color: var(--color-paper-64); font-family: var(--body); font-size: 0.57rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
.system-outcome strong { font-family: var(--display); font-size: 1rem; font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; }
.system-stage:focus-visible { color: var(--midnight); transform: translateX(0.3rem); }
.system-stage:focus-visible::after { background: var(--system-accent); transform: scaleX(1.25); }
.system-stage:focus-visible span { color: var(--midnight); background: var(--system-accent); border-color: var(--system-accent); }
.system-stage:focus-visible strong { color: var(--midnight); }
.system-outcome:focus-visible { background: var(--midnight-2); }
.system-outcome:focus-visible::after { transform: scaleX(1.65); }
.system-outcome:focus-visible span, .system-outcome:focus-visible strong { transform: translateX(0.15rem); }
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  .system-stage:hover { color: var(--midnight); transform: translateX(0.3rem); }
  .system-stage:hover::after { background: var(--system-accent); transform: scaleX(1.25); }
  .system-stage:hover span { color: var(--midnight); background: var(--system-accent); border-color: var(--system-accent); }
  .system-stage:hover strong { color: var(--midnight); }
  .system-outcome:hover { background: var(--midnight-2); }
  .system-outcome:hover::after { transform: scaleX(1.65); }
  .system-outcome:hover span, .system-outcome:hover strong { transform: translateX(0.15rem); }
}
@keyframes system-background-drift { from { transform: translate3d(-0.55%, -0.25%, 0) scale(1.01); opacity: 0.26; } to { transform: translate3d(0.75%, 0.45%, 0) scale(1.026); opacity: 0.34; } }
@media (max-width: 600px) {
  .system-section::before { inset: -8% -18%; opacity: 0.22; background-image: radial-gradient(circle at 78% 32%, var(--color-hero-accent-12) 0, var(--color-hero-accent-07) 25%, transparent 62%); background-size: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0%, var(--color-black) 28%, var(--color-black) 100%); mask-image: linear-gradient(180deg, transparent 0%, var(--color-black) 28%, var(--color-black) 100%); animation: none; transform: none; }
}

.capabilities-home { position: relative; z-index: 2; isolation: isolate; padding-block: clamp(6.75rem, 7.5vw, 7.5rem) clamp(7rem, 7.75vw, 7.75rem); overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 96%, transparent), color-mix(in srgb, var(--surface-alt) 86%, transparent)); }
.capabilities-home::before { content: ""; position: absolute; z-index: 0; inset: -12% -8%; opacity: 0.72; background: radial-gradient(circle at 88% 14%, var(--color-surface-accent-wash), transparent 30rem), linear-gradient(90deg, transparent, var(--color-signal-line), transparent) 73% 18% / 18rem var(--border-width-thin) no-repeat, radial-gradient(circle, var(--color-signal-node) 0 2px, transparent 2.5px) calc(73% + 17.7rem) calc(18% - 3px) / 7px 7px no-repeat; pointer-events: none; }
.capabilities-home__content { position: relative; z-index: 1; }
.capabilities-header { max-width: 56rem; margin-bottom: clamp(3.5rem, 4.25vw, 4.25rem); }
.capabilities-header .eyebrow { margin-bottom: 1.25rem; }
.capabilities-header h2 { max-width: 56rem; margin-bottom: clamp(1.75rem, 2.2vw, 2.25rem); overflow: visible; font-family: var(--display); font-size: clamp(3.375rem, 5vw, 4.5rem); font-weight: var(--font-weight-semibold); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.capabilities-intro { max-width: 40rem; margin: 0; color: color-mix(in srgb, var(--muted) 81%, var(--ink)); font-family: var(--body); font-size: clamp(1.0625rem, 1.1vw, 1.125rem); font-weight: var(--font-weight-regular); line-height: 1.65; text-wrap: pretty; }
.capabilities-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule-light); border-left: var(--rule-light); }
.capability-panel { position: relative; min-width: 0; min-height: clamp(22rem, 26vw, 24rem); display: flex; flex-direction: column; padding: clamp(1.75rem, 2.5vw, 2.5rem); overflow: hidden; background-color: var(--surface); background-image: radial-gradient(circle at 100% 0, var(--color-surface-accent-wash), transparent 17rem), linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 98%, var(--accent))); background-position: 100% 0, 0 0; background-size: auto, 120% 120%; border-right: var(--rule-light); border-bottom: var(--rule-light); box-shadow: var(--shadow-surface-inset); transition: background-color var(--motion-duration-instant), background-position var(--motion-duration-standard) var(--ease), border-color var(--motion-duration-instant), box-shadow var(--motion-duration-instant); }
.capability-panel::before { content: ""; position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: var(--border-width-accent); background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-duration-instant) var(--ease); pointer-events: none; }
.capability-panel::after { content: ""; position: absolute; z-index: 2; top: 0; left: 0; width: 28%; height: var(--border-width-accent); opacity: 0; background: linear-gradient(90deg, transparent, rgba(68, 179, 157, 0.3), var(--accent), transparent); pointer-events: none; transform: translate3d(-120%, 0, 0); }
.capability-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.capability-number { color: var(--muted); font-family: var(--body); font-size: 0.72rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.09em; text-transform: uppercase; transition: color var(--motion-duration-instant); }
.capability-indicator { color: var(--accent-strong); font-size: 1rem; line-height: 1; transition: color var(--motion-duration-instant), transform var(--motion-duration-instant) var(--ease); }
.capabilities-home .capability-title { max-width: 15ch; margin: clamp(3rem, 4vw, 3.5rem) 0 0.875rem; overflow: visible; font-family: var(--display); font-size: clamp(1.75rem, 2.3vw, 2.125rem); font-weight: var(--font-weight-semibold); line-height: 1.08; letter-spacing: -0.035em; transition: color var(--motion-duration-instant), transform var(--motion-duration-instant) var(--ease); }
.capability-description { max-width: 34rem; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.08vw, 1.0625rem); line-height: 1.6; }
.capability-outcome { display: grid; gap: 0.35rem; margin-top: auto; padding-top: 0.875rem; border-top: var(--rule-light); opacity: 0.78; transition: border-color var(--motion-duration-instant), opacity var(--motion-duration-instant); }
.capability-outcome__label { color: var(--muted); font-family: var(--body); font-size: 0.68rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.11em; text-transform: uppercase; }
.capability-outcome__value { color: var(--ink); font-family: var(--body); font-size: 0.95rem; font-weight: var(--font-weight-semibold); line-height: 1.45; }
.capability-panel:focus-visible { outline-color: var(--accent-strong); outline-offset: calc(0px - var(--focus-outline-offset)); background-color: var(--color-glass-surface); background-image: radial-gradient(circle at 100% 0, rgba(68, 179, 157, 0.1), transparent 17rem), linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(248, 249, 247, 0.58)); background-position: 92% 8%, 100% 100%; box-shadow: var(--shadow-surface-inset), var(--shadow-interactive), inset 0 0 0 var(--border-width-thin) var(--color-accent-soft); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); }
.capability-panel:focus-visible::before { transform: scaleX(0.36); }
.capability-panel:focus-visible .capability-number { color: color-mix(in srgb, var(--accent-strong) 90%, var(--ink)); }
.capability-panel:focus-visible .capability-title { color: var(--midnight); transform: translateX(0.125rem); }
.capability-panel:focus-visible .capability-indicator { color: var(--midnight); transform: translateX(0.25rem); }
.capability-panel:focus-visible .capability-outcome { border-color: var(--accent); opacity: 1; }
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  .capability-panel:hover { background-color: var(--color-glass-surface); background-image: radial-gradient(circle at 100% 0, rgba(68, 179, 157, 0.1), transparent 17rem), linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(248, 249, 247, 0.58)); background-position: 92% 8%, 100% 100%; box-shadow: var(--shadow-surface-inset), var(--shadow-interactive), inset 0 0 0 var(--border-width-thin) var(--color-accent-soft); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); }
  .capability-panel:hover::before { transform: scaleX(0.36); }
  .capability-panel:hover .capability-number { color: color-mix(in srgb, var(--accent-strong) 90%, var(--ink)); }
  .capability-panel:hover .capability-title { color: var(--midnight); transform: translateX(0.125rem); }
  .capability-panel:hover .capability-indicator { color: var(--midnight); transform: translateX(0.25rem); }
  .capability-panel:hover .capability-outcome { border-color: var(--accent); opacity: 1; }
}
.capabilities-followup { margin: 2.25rem 0 0; }

.recognition { overflow: hidden; }
.recognition::before { content: "ACTIVITY / SYSTEM"; position: absolute; right: -1rem; top: 3rem; color: var(--color-white-watermark); font-family: var(--display); font-size: clamp(5rem, 14vw, 14rem); font-weight: var(--font-weight-extrabold); letter-spacing: -.07em; white-space: nowrap; }
.recognition::after { content: ""; position: absolute; right: 4vw; bottom: 10%; width: min(32rem, 38vw); height: 8rem; opacity: 0.32; background: linear-gradient(90deg, transparent, var(--color-signal-scan), transparent) 0 25% / 80% var(--border-width-thin) no-repeat, linear-gradient(var(--color-signal-scan), var(--color-signal-scan)) 80% 25% / var(--border-width-thin) 55% no-repeat, radial-gradient(circle, var(--color-signal-fragment) 0 2px, transparent 2.5px) calc(80% - 3px) calc(80% - 3px) / 7px 7px no-repeat; pointer-events: none; }
.recognition-layout { display: grid; grid-template-columns: minmax(16rem, .72fr) 1.28fr; gap: var(--spacing-layout-gap); }
.recognition-intro { position: sticky; top: 8rem; height: max-content; }
.recognition-intro h2 { max-width: 10ch; }
.issue-rows { border-top: var(--rule-dark); }
.issue-row { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: var(--rule-dark); }
.issue-row span { color: var(--accent); font-family: var(--mono); font-size: 0.65rem; }
.issue-row p { margin: 0; color: var(--color-paper-70); }
.recognition-close { margin-top: 2.5rem; color: var(--paper); font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 2rem); }

#selected-engagements { z-index: 2; isolation: isolate; overflow: clip; }
#selected-engagements::before { content: ""; position: absolute; z-index: 0; inset: 0; opacity: 0.62; background: radial-gradient(circle at 8% 82%, var(--color-surface-accent-wash), transparent 28rem), linear-gradient(135deg, transparent 56%, var(--color-signal-grid) 56%, transparent 56.2%); pointer-events: none; }
#selected-engagements > .container { position: relative; z-index: 1; }
.engagement-list { border-top: var(--rule-light); }
.engagement-row { --card-x: 0px; --card-y: 0px; position: relative; z-index: 0; isolation: isolate; display: grid; grid-template-columns: 5rem 1.2fr .75fr auto; gap: clamp(1rem, 3vw, 3rem); align-items: center; min-height: 11.5rem; padding: 2rem 0; border-bottom: var(--rule-light); text-decoration: none; }
.engagement-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 88% 12%, var(--color-dark-accent-wash), transparent 22rem), linear-gradient(135deg, var(--midnight), var(--midnight-2)); transform: scaleY(0); transform-origin: bottom; transition: transform var(--motion-duration-sweep) var(--ease); }
.engagement-row::after { content: ""; position: absolute; z-index: 1; right: 4rem; bottom: 1.35rem; left: 5rem; height: var(--border-width-thin); opacity: 0; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 18%, transparent) 38%, transparent 72%); pointer-events: none; transform: scaleX(0.08); transform-origin: left; transition: opacity var(--motion-duration-standard), transform var(--motion-duration-standard) var(--ease); }
.engagement-row:hover, .engagement-row:focus-visible { color: var(--paper); }
.engagement-row:hover::before, .engagement-row:focus-visible::before { transform: scaleY(1); }
.engagement-row:hover::after, .engagement-row:focus-visible::after { opacity: 0.78; transform: scaleX(1); }
.engagement-number { color: var(--accent-strong); font-family: var(--mono); font-size: 0.7rem; }
.engagement-title { margin: 0; font-size: clamp(1.7rem, 3.2vw, 3.4rem); transition: transform var(--motion-duration-emphasis) var(--ease); }
.engagement-row:hover .engagement-title, .engagement-row:focus-visible .engagement-title { transform: translateX(.6rem); }
.engagement-meta { display: grid; gap: .35rem; color: var(--muted); font-family: var(--mono); font-size: .66rem; line-height: 1.55; text-transform: uppercase; }
.engagement-row:hover .engagement-meta, .engagement-row:focus-visible .engagement-meta { color: var(--color-paper-72); }
.engagement-arrow { width: 3.2rem; aspect-ratio: 1; display: grid; place-items: center; border: var(--rule-current); transition: color var(--motion-duration-standard), background var(--motion-duration-standard), transform var(--motion-duration-standard) var(--ease); }
.engagement-row:hover .engagement-arrow, .engagement-row:focus-visible .engagement-arrow { color: var(--midnight); background: var(--accent); border-color: var(--accent); transform: translate(0.1rem, -0.1rem) rotate(-4deg); }
.engagement-preview { position: fixed; z-index: 90; width: 15rem; aspect-ratio: 4 / 3; display: grid; place-items: end start; padding: 1rem; opacity: 0; color: var(--paper); background: linear-gradient(145deg, rgba(8, 24, 40, 0.58), rgba(8, 24, 40, 0.7)), color-mix(in srgb, var(--preview, var(--midnight-2)) 62%, transparent); border: var(--border-width-thin) var(--border-style) var(--color-glass-dark-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1rem 2.8rem rgba(4, 14, 24, 0.2); -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); pointer-events: none; transform: translate(-50%, -50%) scale(.92); transition: opacity var(--motion-duration-instant), transform var(--motion-duration-standard) var(--ease); }
.engagement-preview.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.engagement-preview span { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; }

.approach-section { z-index: 2; isolation: isolate; overflow: clip; }
.approach-section::before { content: ""; position: absolute; z-index: 0; inset: 0; opacity: 0.56; background: radial-gradient(circle at 84% 28%, var(--color-surface-accent-wash), transparent 30rem), linear-gradient(90deg, transparent, var(--color-signal-line), transparent) 72% 16% / 21rem var(--border-width-thin) no-repeat, radial-gradient(circle, var(--color-signal-node) 0 2px, transparent 2.5px) calc(72% + 20.7rem) calc(16% - 3px) / 7px 7px no-repeat; pointer-events: none; }
.approach-section > .container { position: relative; z-index: 1; }
.approach-layout { display: grid; grid-template-columns: .68fr 1.32fr; gap: var(--spacing-layout-gap); }
.approach-heading { position: sticky; top: 8rem; align-self: start; }
.approach-heading h2 { max-width: 8ch; }
.approach-progress { width: 100%; height: var(--border-width-thin); margin-top: 2rem; background: var(--border); }
.approach-progress span { display: block; width: var(--approach-progress, 16.66%); height: 100%; background: var(--accent-strong); transition: width var(--motion-duration-sweep) var(--ease); }
.approach-steps { position: relative; list-style: none; padding: 0; margin: 0; }
.approach-steps::before { content: ""; position: absolute; top: 2rem; bottom: 2rem; left: 1.95rem; width: var(--border-width-thin); background: linear-gradient(var(--accent-strong), var(--color-signal-line) 58%, transparent); pointer-events: none; }
.approach-step { position: relative; min-height: 16rem; display: grid; grid-template-columns: 4rem 1fr; gap: 2rem; align-content: center; padding: 2rem 1rem; border-top: var(--rule-light); opacity: 1; transition: background-color var(--motion-duration-standard), border-color var(--motion-duration-standard), transform var(--motion-duration-standard) var(--ease); }
.approach-step::before { content: ""; position: absolute; z-index: 1; top: 50%; left: 1.66rem; width: 0.58rem; aspect-ratio: 1; background: var(--surface-alt); border: var(--rule-accent-strong); border-radius: var(--radius-round); pointer-events: none; transform: translateY(-50%); transition: background var(--motion-duration-standard), box-shadow var(--motion-duration-standard); }
.approach-step::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--border-width-accent); background: linear-gradient(var(--accent), var(--accent-strong)); pointer-events: none; transform: scaleY(0); transform-origin: center; transition: transform var(--motion-duration-standard) var(--ease); }
.approach-step:last-child { border-bottom: var(--rule-light); }
.approach-step.is-active { opacity: 1; background-color: color-mix(in srgb, var(--accent) 6%, transparent); border-color: color-mix(in srgb, var(--accent-strong) 30%, var(--border)); transform: translateX(.3rem); }
.approach-step.is-active::before { background: var(--accent); box-shadow: var(--shadow-accent-dot); }
.approach-step.is-active::after { transform: scaleY(0.34); }
.approach-step > span { position: relative; z-index: 2; color: var(--accent-strong); font-family: var(--mono); font-size: .7rem; }
.approach-step h3 { margin-bottom: .75rem; font-size: clamp(1.8rem, 3vw, 3rem); }
.approach-step p { margin: 0; color: var(--muted); }

.matrix { display: grid; grid-template-columns: .6fr 1.4fr; gap: var(--spacing-layout-gap-narrow); }
.matrix-nav { border-top: var(--rule-light); }
.matrix-tab { width: 100%; display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .75rem; padding: 1rem 0; color: var(--muted); background: none; border: 0; border-bottom: var(--rule-light); text-align: left; cursor: pointer; transition: color var(--motion-duration-base), padding var(--motion-duration-base) var(--ease); }
.matrix-tab span:first-child { font-family: var(--mono); font-size: .62rem; }
.matrix-tab span:last-child { opacity: 0; transition: opacity var(--motion-duration-base), transform var(--motion-duration-base); }
.matrix-tab:hover, .matrix-tab:focus-visible, .matrix-tab[aria-selected="true"] { color: var(--ink); padding-left: .55rem; }
.matrix-tab[aria-selected="true"] span:last-child { opacity: 1; transform: translateX(.25rem); }
.matrix-panels { position: relative; isolation: isolate; min-height: 29rem; padding: clamp(1.7rem, 4vw, 4rem); overflow: hidden; color: var(--paper); background: radial-gradient(circle at 88% 12%, var(--color-dark-accent-wash), transparent 22rem), linear-gradient(145deg, var(--midnight-2), var(--midnight) 72%); box-shadow: inset 0 0 0 var(--border-width-thin) var(--color-white-12); }
.matrix-panels::before { content: ""; position: absolute; z-index: 0; inset: -18% -28%; opacity: 0.18; background: linear-gradient(100deg, transparent 42%, var(--color-signal-scan) 50%, transparent 58%); pointer-events: none; transform: translate3d(-42%, 0, 0) skewX(-8deg); }
.matrix-panels::after { content: ""; position: absolute; z-index: 0; right: -15%; bottom: -45%; width: 75%; aspect-ratio: 1; border: var(--border-width-thin) var(--border-style) var(--color-accent-line); border-radius: var(--radius-round); }
.matrix-panel[hidden] { display: none; }
.matrix-panel { position: relative; z-index: 1; animation: panel-in var(--motion-duration-emphasis) var(--ease); }
.matrix-panel h3 { margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 4rem); }
.matrix-panel p { color: var(--color-paper-62); }
.tag-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 3rem; }
.tag { padding: .55rem .75rem; border: var(--rule-dark); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; }

.discipline-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--rule-light); border-left: var(--rule-light); }
.discipline { min-height: 20rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; background-color: color-mix(in srgb, var(--surface) 78%, transparent); background-image: radial-gradient(circle at 100% 0, var(--color-surface-accent-wash), transparent 13rem); border-right: var(--rule-light); border-bottom: var(--rule-light); transition: color var(--motion-duration-standard), background-color var(--motion-duration-standard), border-color var(--motion-duration-standard); }
.discipline > span { color: var(--accent-strong); font-family: var(--mono); font-size: .65rem; }
.discipline p { color: var(--muted); margin: 0; font-size: .9rem; }
.discipline-note { max-width: 58rem; margin: 3rem 0 0 auto; padding-left: 2rem; border-left: var(--rule-accent-strong); color: var(--muted); }

.chapters { display: grid; grid-template-columns: .7fr 1.3fr; gap: var(--spacing-layout-gap); }
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; top: .8rem; bottom: .8rem; left: .3rem; width: var(--border-width-thin); background: var(--border-dark); }
.timeline-item { position: relative; display: grid; grid-template-columns: 8rem 1fr; gap: 2rem; padding: 0 0 3rem 2.2rem; }
.timeline-item::before { content: ""; position: absolute; top: .35rem; left: 0; width: .65rem; aspect-ratio: 1; background: var(--midnight); border: var(--rule-accent); transition: background var(--motion-duration-base), box-shadow var(--motion-duration-base); }
.timeline-date { color: var(--color-paper-48); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; }
.timeline-item h3 { margin-bottom: .45rem; }
.timeline-item p { color: var(--color-paper-58); margin-bottom: 0; font-size: .9rem; }

.credentials-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--spacing-layout-gap); }
.degree { padding: 2rem 0; border-top: var(--rule-light); border-bottom: var(--rule-light); }
.degree h3 { font-size: clamp(1.6rem, 2.6vw, 2.6rem); }
.degree p { color: var(--muted); margin-bottom: 0; }
.credential-list { list-style: none; padding: 0; margin: 0; border-top: var(--rule-light); }
.credential-list li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: var(--rule-light); }
.credential-list span { color: var(--accent-strong); font-family: var(--mono); font-size: .63rem; }

.conversation { z-index: 2; isolation: isolate; overflow: hidden; color: var(--paper); background: radial-gradient(circle at 86% 0, var(--color-white-12), transparent 28rem), linear-gradient(135deg, color-mix(in srgb, var(--accent-strong) 78%, var(--midnight)) 0%, var(--midnight-2) 100%); }
.conversation::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(var(--color-white-30) var(--border-width-thin), transparent var(--border-width-thin)), linear-gradient(90deg, var(--color-white-30) var(--border-width-thin), transparent var(--border-width-thin)); background-size: 5rem 5rem; }
.conversation::after { content: ""; position: absolute; z-index: 0; right: -8%; bottom: 8%; width: min(40rem, 52vw); height: 10rem; opacity: 0.32; background: linear-gradient(90deg, transparent, var(--color-white-30), transparent) 0 30% / 78% var(--border-width-thin) no-repeat, linear-gradient(var(--color-white-30), var(--color-white-30)) 78% 30% / var(--border-width-thin) 54% no-repeat, radial-gradient(circle, var(--paper) 0 2px, transparent 2.5px) calc(78% - 3px) calc(84% - 3px) / 7px 7px no-repeat; pointer-events: none; transform: translate3d(0, 0, 0); }
.conversation .container { position: relative; z-index: 1; }
.conversation h2 { max-width: 11ch; margin-bottom: 1.5rem; }
.conversation p { color: var(--color-paper-78); font-size: 1.1rem; }
.conversation .button { --button-bg: var(--midnight); --button-color: var(--paper); border-color: var(--midnight); }
.conversation .button::before { background: var(--paper); }
.conversation-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--border-width-thin); margin-top: 4rem; background: var(--color-glass-dark-border); border: var(--border-width-thin) var(--border-style) var(--color-glass-dark-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); }
.conversation-meta div { padding: 1.25rem; background: var(--color-glass-dark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.conversation-meta span { display: block; opacity: .65; margin-bottom: .4rem; font-family: var(--mono); font-size: .6rem; text-transform: uppercase; }

.site-footer { position: relative; z-index: 2; color: var(--paper); background: radial-gradient(circle at 12% 0, var(--color-dark-accent-wash), transparent 34rem), linear-gradient(150deg, var(--midnight-2) -35%, var(--midnight) 52%); }
.footer-main { padding: clamp(4rem, 8vw, 8rem) 0 3rem; }
.footer-statement { max-width: 12ch; margin: 0 0 5rem; font-size: clamp(3.2rem, 8vw, 8.8rem); line-height: .9; }
.footer-grid { display: grid; grid-template-columns: 1.35fr .65fr .65fr; gap: 3rem; padding-top: 2rem; border-top: var(--rule-dark); }
.footer-identity p { color: var(--color-paper-55); font-size: .85rem; }
.footer-links { display: grid; align-content: start; gap: .55rem; }
.footer-links strong { margin-bottom: .45rem; color: var(--color-paper-45); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; }
.footer-links a { width: max-content; color: var(--color-paper-72); font-size: .85rem; text-decoration: none; transition: color var(--motion-duration-fast), transform var(--motion-duration-fast); }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--accent); transform: translateX(.25rem); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding: 1.2rem 0; color: var(--color-paper-42); border-top: var(--border-width-thin) var(--border-style) var(--border-dark); font-family: var(--mono); font-size: .6rem; text-transform: uppercase; }

.page-hero { position: relative; z-index: 2; isolation: isolate; min-height: 72svh; display: grid; align-items: end; overflow: hidden; padding: 11rem 0 5rem; color: var(--paper); background: radial-gradient(circle at 82% 32%, var(--color-dark-accent-wash), transparent 32rem), linear-gradient(145deg, var(--midnight-2) -35%, var(--midnight) 54%); }
.page-hero::before { content: ""; position: absolute; right: 0; bottom: 0; width: 45%; height: 75%; opacity: .22; background-image: linear-gradient(var(--color-white-20) var(--border-width-thin), transparent var(--border-width-thin)), linear-gradient(90deg, var(--color-white-20) var(--border-width-thin), transparent var(--border-width-thin)); background-size: 4rem 4rem; mask-image: linear-gradient(to left, var(--color-black), transparent); }
.page-hero::after { content: ""; position: absolute; z-index: 0; right: 6vw; bottom: 18%; width: min(34rem, 42vw); height: 9rem; opacity: 0.34; background: linear-gradient(90deg, transparent, var(--color-signal-scan), transparent) 0 24% / 84% var(--border-width-thin) no-repeat, linear-gradient(var(--color-signal-scan), var(--color-signal-scan)) 84% 24% / var(--border-width-thin) 58% no-repeat, radial-gradient(circle, var(--color-signal-fragment) 0 2px, transparent 2.5px) calc(84% - 3px) calc(82% - 3px) / 7px 7px no-repeat; pointer-events: none; transform: translate3d(0, 0, 0); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { max-width: 11ch; margin-bottom: 1.5rem; }
.page-hero .lead { max-width: 56rem; }
.page-intro-grid, .editorial-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: var(--spacing-layout-gap); }
.editorial-copy h2 { max-width: 11ch; }
.editorial-copy p { color: var(--muted); }
.portrait-editorial { position: relative; isolation: isolate; max-width: 34rem; margin-left: auto; }
.portrait-editorial::before { content: ""; position: absolute; z-index: 0; inset: 0.7rem -0.7rem -0.7rem 0.7rem; background: linear-gradient(135deg, var(--color-surface-accent-wash), transparent 40%); border: var(--rule-accent-strong); opacity: 0.42; pointer-events: none; }
.portrait-editorial img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 18%; }
.portrait-editorial figcaption { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; border-top: var(--rule-light); color: var(--muted); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; }
.principle-list { border-top: var(--rule-light); }
.principle { display: grid; grid-template-columns: 3rem .8fr 1.2fr; gap: 2rem; padding: 2rem 0; border-bottom: var(--rule-light); }
.principle > span { color: var(--accent-strong); font-family: var(--mono); font-size: .65rem; }
.principle h3 { margin: 0; }
.principle p { color: var(--muted); margin: 0; }

.capability-stack { border-top: var(--rule-light); }
.capability-section { position: relative; display: grid; grid-template-columns: .35fr .65fr; gap: var(--spacing-layout-gap-narrow); padding: clamp(3rem, 6vw, 6rem) 0; border-bottom: var(--rule-light); }
.capability-section::before { content: ""; position: absolute; top: 0; left: 0; width: min(8rem, 18%); height: var(--border-width-thin); background: linear-gradient(90deg, var(--accent-strong), transparent); pointer-events: none; }
.capability-title span { color: var(--accent-strong); font-family: var(--mono); font-size: .65rem; }
.capability-title h2 { margin-top: 1rem; font-size: clamp(2.1rem, 4vw, 4.2rem); }
.capability-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; }
.capability-detail div { border-top: var(--rule-light); padding-top: 1rem; }
.capability-detail h3 { font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; }
.capability-detail p, .capability-detail li { color: var(--muted); font-size: .9rem; }
.capability-detail ul { padding-left: 1.1rem; margin-bottom: 0; }

.engagement-index { border-top: var(--rule-light); }
.engagement-card { --mx: 50%; --my: 50%; position: relative; display: grid; grid-template-columns: 4rem .95fr 1.05fr; gap: clamp(1rem, 4vw, 4rem); align-items: center; min-height: 25rem; padding: clamp(2rem, 4vw, 4rem) 0; color: inherit; border-bottom: var(--rule-light); text-decoration: none; }
.engagement-card__visual { position: relative; aspect-ratio: 4/3; display: grid; align-items: end; padding: 1.5rem; overflow: hidden; color: var(--paper); background: radial-gradient(circle at 88% 12%, var(--color-white-12), transparent 42%), linear-gradient(145deg, color-mix(in srgb, var(--card-bg, var(--midnight-2)) 84%, var(--accent-strong)), var(--card-bg, var(--midnight-2)) 60%, var(--midnight) 135%); }
.engagement-card__visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(24rem circle at var(--mx) var(--my), var(--color-white-20), transparent 48%); opacity: 0; transition: opacity var(--motion-duration-hover); }
.engagement-card:hover .engagement-card__visual::before, .engagement-card:focus-visible .engagement-card__visual::before { opacity: 1; }
.engagement-card__visual::after { content: ""; position: absolute; inset: 10%; border: var(--border-width-thin) var(--border-style) var(--color-white-20); transform: scale(.92); transition: transform var(--motion-duration-slow) var(--ease); }
.engagement-card:hover .engagement-card__visual::after, .engagement-card:focus-visible .engagement-card__visual::after { transform: scale(1); }
.engagement-card__visual strong { position: relative; z-index: 1; font-family: var(--display); font-size: clamp(1.7rem, 3vw, 3.2rem); line-height: .95; letter-spacing: -.05em; }
.engagement-card__copy h2 { font-size: clamp(2rem, 4vw, 4.4rem); }
.engagement-card__copy p { color: var(--muted); }
.engagement-card__copy .text-link { margin-top: 1rem; }

.case-hero { padding-top: 9rem; }
.case-kicker { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 2rem; color: var(--color-paper-58); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; }
.case-kicker span { padding-right: 1.5rem; border-right: var(--rule-dark); }
.case-kicker span:last-child { border: 0; }
.case-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--spacing-layout-gap-feature); }
.case-nav { position: sticky; top: 7rem; align-self: start; border-top: var(--rule-light); }
.case-nav a { display: block; padding: .75rem 0; color: var(--muted); border-bottom: var(--rule-light); font-family: var(--mono); font-size: .62rem; text-decoration: none; text-transform: uppercase; transition: color var(--motion-duration-fast), padding var(--motion-duration-fast); }
.case-nav a:hover, .case-nav a:focus-visible { color: var(--accent-strong); padding-left: .35rem; }
.case-content { max-width: 49rem; }
.case-block { padding-bottom: 4rem; }
.case-block h2 { margin-bottom: 1.2rem; font-size: clamp(2rem, 4vw, 4rem); }
.case-block p, .case-block li { color: var(--muted); }
.case-block ul { padding-left: 1.2rem; }
.outcome-callout { padding: clamp(1.5rem, 3vw, 2.5rem); color: var(--paper); background: radial-gradient(circle at 100% 0, var(--color-dark-accent-wash), transparent 20rem), linear-gradient(145deg, var(--midnight-2), var(--midnight) 74%); border-left: var(--border-width-accent) var(--border-style) var(--accent); }
.outcome-callout p { color: var(--color-paper-72); margin: 0; }

.connect-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--spacing-layout-gap); }
.connect-direct { position: sticky; top: 8rem; align-self: start; }
.contact-channel { display: block; padding: 1rem 0; border-top: var(--rule-light); font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.55rem); font-weight: var(--font-weight-semibold); text-decoration: none; transition: color var(--motion-duration-fast), padding var(--motion-duration-fast); }
.contact-channel:last-of-type { border-bottom: var(--rule-light); }
.contact-channel:hover, .contact-channel:focus-visible { color: var(--accent-strong); padding-left: .5rem; }
.contact-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--color-glass-surface); border: var(--border-width-thin) var(--border-style) var(--color-glass-border); box-shadow: var(--shadow-surface-inset), 0 1.5rem 4rem var(--color-midnight-shadow); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); transition: border-color var(--motion-duration-standard), box-shadow var(--motion-duration-standard); }
.contact-form:focus-within { border-color: color-mix(in srgb, var(--accent-strong) 46%, var(--color-glass-border)); box-shadow: var(--shadow-surface-inset), var(--shadow-signal); }
.field { display: grid; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: .63rem; font-weight: var(--font-weight-semibold); letter-spacing: .08em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; min-height: 3.4rem; padding: .85rem 0; color: var(--ink); background: transparent; border: 0; border-bottom: var(--rule-light); border-radius: var(--radius-square); transition: border-color var(--motion-duration-fast); }
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-strong); }
.form-note { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; }
.contact-form .button { width: max-content; }

.privacy-copy { max-width: 48rem; }
.privacy-copy h2 { margin-top: 3rem; font-size: clamp(1.5rem, 2.5vw, 2.3rem); }
.privacy-copy p { color: var(--muted); }
.section-followup, .connect-meta { margin-top: 2rem; }

@keyframes ambient { to { transform: translate(-6%, -4%) scale(1.06); } }
@keyframes hero-atmosphere { from { transform: translate3d(-0.5%, -0.25%, 0) scale(1.008); } to { transform: translate3d(1.2%, 0.7%, 0) scale(1.025); } }
@keyframes scroll-line { 0% { background-position: 0 100%; } 100% { background-position: 0 -100%; } }
@keyframes panel-in { from { opacity: .92; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

@media (hover: hover) and (pointer: fine) {
  .button:hover { box-shadow: var(--shadow-signal); }
  .portrait-stage:hover::before { border-color: var(--color-hero-accent-58); transform: translate3d(0.12rem, -0.12rem, 0); }
  .portrait-stage:hover::after { opacity: 1; transform: translate3d(0.1rem, -0.1rem, 0); }
  .discipline:hover { color: var(--paper); background-color: var(--midnight-2); border-color: color-mix(in srgb, var(--accent) 32%, var(--border-dark)); }
  .discipline:hover p { color: var(--color-paper-62); }
  .timeline-item:hover::before { background: var(--accent); box-shadow: var(--shadow-accent-focus); }
}
.button:focus-visible { box-shadow: var(--shadow-signal); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: var(--motion-duration-reduced) !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: var(--motion-duration-reduced) !important; }
  body::before, body::after { animation: none !important; transform: none !important; will-change: auto !important; }
  .signal-geometry, .portrait-window::after, .capability-panel::after { display: none; }
  .scroll-cue { display: none; }
  .approach-step, .approach-step.is-active { opacity: 1; transform: none; }
  .matrix-panels::before { display: none; }
}

@media (forced-colors: active) {
  body::before, body::after, .signal-geometry { display: none; }
  .portrait-stage::after, .portrait-window::after, .capabilities-home::before, .capability-panel::after,
  .recognition::after, #selected-engagements::before, .engagement-row::after,
  .approach-section::before, .matrix-panels::before, .conversation::after,
  .page-hero::after, .portrait-editorial::before, .capability-section::before { display: none; }
  .section--dark, .hero, .page-hero, .conversation, .site-footer,
  .system-visual, .capability-panel, .matrix-panels, .discipline,
  .engagement-card__visual, .outcome-callout { background-image: none; }
}