/* ==========================================================================
   TERRANA GROUP, site stylesheet (redesign branch, 2026-10-22)

   Built from the approved homepage mockup (mockup-ledger.html, the "navy
   ledger" direction): transparent nav that turns to tinted glass on scroll,
   pill nav links, full-bleed graded photo heroes, Source Serif 4 display at a
   light weight, hairline rules instead of boxes, one accent colour used
   once per section, no shadows.

   Dark is the base theme and the brand default. Light overrides are token
   swaps under [data-theme="light"], plus a handful of rules marked LIGHT.

   Vocabulary (what the pages use):
     chrome      .site-header .brand .nav-links .theme-toggle .nav-toggle
                 .site-footer
     heroes      .hero.hero-photo.hero-{willis|pierskyline|junction|tower|eltrain|
                 navypier|fog|fiber|citydusk}
                 (.hero-home for the taller homepage version)
                 .page-head (plain band for text pages)
     type        .kicker .lede .muted  (.eyebrow is an alias of .kicker)
     buttons     .btn .btn-accent .btn-ghost .btn-outline
     sections    section.block  .bg-soft  .section-head(.row|.center)
     patterns    .stats/.stat  .cards/.card(.two)  .split/.split-media
                 .checklist  .steps/.step  .quote  .quotes  .accordion
                 .tabs  .insights/.insight  .cta
     blog        .post-grid/.post-card  .pager  .post-section .post-body
     team        .team-grid/.team-card  .bio-more
     contact     .contact-grid .form-grid .choice-chips .info-card
   ========================================================================== */

/* Fonts ----------------------------------------------------------------- */
/* Self-hosted (assets/fonts, SIL Open Font License; the licences sit beside
   the files). Latin and latin-ext subsets of the Google Fonts builds, one
   variable file per face, so there is no third-party request before first
   paint. Pages preload the two latin files. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/source-serif-4-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/source-serif-4-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../assets/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../assets/fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Tokens ---------------------------------------------------------------- */
:root {
  --navy-950: #04101f;
  --navy-900: #0b1f3a;
  --navy-800: #143156;
  --navy-700: #1d4270;
  --accent-500: #1220db;
  --accent-400: #26afff;
  --accent-300: #6fc8ff;
  --accent-100: #d9eeff;
  --silver: #bbc2c8;
  --steel: #aabbd2;
  --silver-light: #d6dadf;
  --ticker-green: #17936b;

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ui: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hero-fade: transparent;
  --container: 1200px;
  --lane: 1440px;              /* header and footer run wider than content */
  --radius: 8px;

  /* dark theme (default) */
  --canvas: #0a1628;
  --canvas-2: var(--navy-950);
  --card: #112441;
  --card-2: #0d1d36;
  --hair: rgba(170, 187, 210, 0.16);
  --hair-strong: rgba(38, 175, 255, 0.45);
  --ink: #ffffff;
  --ink-2: #c9d4e2;
  --ink-3: #8fa3bd;
  --accent: var(--accent-400);
  --accent-ink: var(--navy-950);
  --nav-tint: rgba(4, 16, 31, 0.78);
  --nav-solid: #04101f;
  --stat-num: var(--accent-400);
  --ghost-border: rgba(255, 255, 255, 0.35);
  --quote-bg: var(--navy-900);
  --field-bg: var(--card);
  --field-ink: #ffffff;
  --ok: #2fbf84;
  --err: #ff8a70;
  color-scheme: dark;

  /* Aliases kept for assessment.html's inline styles and older markup */
  --bg: var(--canvas);
  --bg-soft: var(--canvas-2);
  --surface: var(--card);
  --card-bg: var(--card);
  --muted: var(--ink-3);
  --body-soft: var(--ink-2);
  --line: var(--hair);
  --line-soft: var(--hair);
  --hairline-dark: var(--hair);
  --hairline-faint: var(--hair);
  --heading-on-dark: #ffffff;
  --on-dark: var(--ink-2);
  --on-dark-strong: var(--ink-2);
  --on-dark-soft: var(--ink-2);
  --on-band: var(--ink-2);
  --on-accent: var(--accent-ink);
  --blue-500: var(--accent-300);
  --focus-ring: 0 0 0 3px rgba(38, 175, 255, 0.28);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-card: none;
  --radius-sm: 6px;
  --radius-lg: 12px;
}
[data-theme="light"] {
  --canvas: #d3d9e1;
  --canvas-2: #c5ccd6;
  --card: #e0e5eb;
  --card-2: #d7dde5;
  --hair: #b8c1cd;
  --hair-strong: rgba(18, 32, 219, 0.35);
  --ink: var(--navy-900);
  --ink-2: #3b3e47;
  --ink-3: #5c6470;
  --accent: var(--accent-500);
  --accent-ink: #ffffff;
  --nav-tint: rgba(211, 217, 225, 0.86);
  --nav-solid: #d3d9e1;
  --stat-num: var(--accent-500);
  --ghost-border: rgba(255, 255, 255, 0.55);
  --quote-bg: #e0e5eb;
  --field-bg: #e0e5eb;
  --field-ink: #1c2530;
  --ok: #1a7f4e;
  --err: #a33c22;
  color-scheme: light;

  --heading-on-dark: var(--navy-900);
  --blue-500: var(--accent-500);
  --focus-ring: 0 0 0 3px rgba(18, 32, 219, 0.22);
}

/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-2);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.visually-hidden, .theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
.container.wide { width: min(var(--container), calc(100% - 48px)); }
.container.narrow { width: min(var(--container), calc(100% - 48px)); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 0; line-height: 1.08; text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
h1 { font-size: clamp(2.6rem, 5.2vw, 4.25rem); letter-spacing: -0.025em; font-weight: 400; }
h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); letter-spacing: -0.02em; }
h3 { font-size: 1.45rem; letter-spacing: -0.01em; }
h4 { font-size: 1.15rem; }
h1 em, h2 em, h3 em { font-style: normal; color: inherit; }   /* no accent word in headlines */
.kicker, .eyebrow { display: flex; align-items: center; gap: 0.75rem; font: 500 0.95rem/1.4 var(--font-body); color: var(--accent); letter-spacing: 0; text-transform: none; }
.kicker::before, .eyebrow::before { content: ""; flex: none; width: 26px; height: 1px; background: currentColor; opacity: 0.85; }
.section-head.center .kicker, .cta .kicker, .cta .eyebrow { justify-content: center; }
.lede { font-size: 1.15rem; line-height: 1.65; color: var(--ink-2); max-width: 52ch; }
.muted { color: var(--ink-3); }
.section-head { max-width: 62ch; margin-bottom: 44px; display: grid; gap: 14px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.section-head.row { display: flex; justify-content: space-between; align-items: end; max-width: none; gap: 2rem; flex-wrap: wrap; }
.section-head.row > div { display: grid; gap: 14px; max-width: 62ch; }
.section-head p:not(.kicker):not(.lede) { color: var(--ink-2); font-size: 1.05rem; max-width: 60ch; }

section.block, main > section { padding: 112px 0; }
section.block.tight, main > section.tight { padding-top: 0; }
.bg-soft { background: var(--canvas-2); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
@media (max-width: 900px) { section.block, main > section { padding: 80px 0; } .section-head { margin-bottom: 32px; } }

/* Buttons: pill, one accent per section, no shadows ---------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem; border-radius: 999px;
  font: 600 0.9rem/1 var(--font-ui); border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; text-decoration: none;
  transition: background .25s, border-color .25s, color .25s, transform .3s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: .08s; }
.btn-accent, .btn-gold, .btn-white { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover, .btn-gold:hover, .btn-white:hover { background: var(--accent-300); color: var(--accent-ink); }
[data-theme="light"] .btn-accent:hover, [data-theme="light"] .btn-gold:hover, [data-theme="light"] .btn-white:hover { background: var(--navy-800); color: #fff; }
/* LIGHT: heroes and the closing band sit on dark photos in both themes, so their
   primary button keeps the sky blue the header shows over the same photos. */
[data-theme="light"] .hero .btn-accent, [data-theme="light"] .cta .btn-accent { background: var(--accent-400); color: var(--navy-950); }
[data-theme="light"] .hero .btn-accent:hover, [data-theme="light"] .cta .btn-accent:hover { background: var(--accent-300); color: var(--navy-950); }
.btn-ghost, .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.28); background: rgba(4, 16, 31, 0.34); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-ghost:hover, .btn-outline-light:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(4, 16, 31, 0.55); color: #fff; }
.btn-outline, .btn-navy, .btn-outline-navy { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover, .btn-navy:hover, .btn-outline-navy:hover { background: var(--ink); color: var(--canvas); }
.btn-lg { padding: 1rem 1.9rem; font-size: 0.95rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.hero-ctas, .ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 2rem; }
@media (max-width: 480px) { .hero-ctas .btn, .ctas .btn { width: 100%; } }

/* Header: fixed, glass once scrolled; transparent over a photo hero ------ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  padding: 8px 0;
  background: var(--nav-tint);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hair);
  transition: background .25s, border-color .25s, padding .25s;
}
.navbar-inner { display: flex; align-items: center; gap: 1.25rem; width: min(var(--lane), calc(100% - 48px)); }
.brand { display: flex; align-items: center; gap: 0.7rem; color: var(--ink); flex-shrink: 0; }
.brand img, .brand-mono { height: 56px; width: auto; transition: height .25s; }
.brand-mono-light { display: none; }
[data-theme="light"] .brand-mono-dark { display: none; }
[data-theme="light"] .brand-mono-light { display: block; }
.brand-text { font: 700 1.9rem/1 var(--font-ui); letter-spacing: 0.12em; color: var(--accent-400); white-space: nowrap; }
.brand-text span { color: var(--ink); }
[data-theme="light"] .site-footer .brand-text { color: var(--accent-500); }

/* LIGHT: the header wordmark keeps the dark-mode colours on the light bar
   (sky blue TERRANA, white GROUP); the footer keeps the light-mode pair. */
[data-theme="light"] .site-header .brand-text span { color: #ffffff; }

.nav-links { display: flex; align-items: center; gap: 5px; margin-left: auto; list-style: none; flex-wrap: nowrap; }
.nav-links a:not(.btn) {
  display: inline-block; padding: 0.5rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--hair); background: transparent; color: var(--ink-2);
  font: 500 0.82rem/1 var(--font-body); white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.nav-links a:not(.btn):hover { background: var(--card-2); color: var(--ink); }
.nav-links a.active { background: var(--card-2); color: var(--ink); border-color: var(--hair-strong); }
.nav-links .nav-cta { margin-left: 6px; }
.nav-links .btn { padding: 0.65rem 1.2rem; }

.theme-toggle, .nav-toggle {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--hair); background: transparent; color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.theme-toggle:hover, .nav-toggle:hover { color: var(--ink); background: var(--card-2); }
.theme-icon { width: 18px; height: 18px; }
.theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-sun { display: none; }
[data-theme="light"] .theme-icon-moon { display: block; }
.nav-toggle { display: none; position: relative; }
.nav-toggle span { position: absolute; left: 11px; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s, top .2s; }
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 18px; }
.nav-toggle span:nth-child(3) { top: 23px; }
.site-header.nav-open .nav-toggle span:nth-child(1) { top: 18px; transform: rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { top: 18px; transform: rotate(-45deg); }

/* Over a photo hero the bar starts transparent with white pills, then
   turns to glass after 40px of scroll (js/main.js adds .scrolled). */
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) {
  background: transparent; border-bottom-color: transparent; padding: 12px 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .brand img { height: 86px; }
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .brand-text span,
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .brand { color: #fff; }
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .brand-text { color: var(--accent-400); }
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .brand-mono-dark { display: block; }
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .brand-mono-light { display: none; }
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .brand { filter: drop-shadow(0 1px 2px rgba(4, 16, 31, 0.55)) drop-shadow(0 2px 14px rgba(4, 16, 31, 0.45)); }
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .nav-links a:not(.btn),
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .theme-toggle,
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .nav-toggle {
  border-color: rgba(255, 255, 255, 0.28); background: rgba(4, 16, 31, 0.34); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .nav-links a:not(.btn):hover,
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .theme-toggle:hover,
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .nav-toggle:hover { background: rgba(4, 16, 31, 0.55); color: #fff; }
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .nav-links a.active { background: rgba(255, 255, 255, 0.92); border-color: rgba(255, 255, 255, 0.92); color: var(--navy-950); }
.site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .btn-accent { background: var(--accent-400); color: var(--navy-950); }

@media (max-width: 1440px) {
  .nav-links { gap: 4px; }
  .nav-links a:not(.btn) { padding: 0.45rem 0.65rem; font-size: 0.78rem; }
  .nav-links .btn { padding: 0.55rem 0.95rem; font-size: 0.82rem; }
  .site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .brand img { height: 74px; }
  .brand-text { font-size: 1.65rem; letter-spacing: 0.1em; }
}
@media (max-width: 1320px) {
  .site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .brand img { height: 64px; }
  .brand-text { font-size: 1.45rem; letter-spacing: 0.08em; }
}
/* 1181-1260: nine pills fill the bar, so the wordmark keeps its old size here. */
@media (max-width: 1260px) {
  .brand-text { font-size: 1.2rem; }
}
@media (max-width: 1180px) {
  .nav-toggle { display: grid; margin-left: auto; }
  .brand-text { font-size: 1.7rem; letter-spacing: 0.1em; }
  .theme-toggle { order: 1; }
  .nav-toggle { order: 2; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: 10px max(24px, calc((100% - var(--lane)) / 2 + 24px)) 18px;
    background: var(--nav-solid);
    border-bottom: 1px solid var(--hair);
    flex-direction: column; align-items: stretch; gap: 0;
  }
  .nav-links.open { display: flex; }
  .site-header.nav-open { background: var(--nav-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-links li { border-top: 1px solid var(--hair); }
  .nav-links li:first-child { border-top: 0; }
  .nav-links a:not(.btn) { display: block; padding: 0.85rem 0.4rem; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 1rem; }
  .nav-links a:not(.btn):hover, .nav-links a.active { background: transparent; color: var(--accent); }
  .nav-links .nav-cta { margin: 10px 0 0; border-top: 0; }
  .nav-links .btn { width: 100%; }
}
@media (max-width: 600px) {
  .site-header:has(+ main > .hero-photo:first-child):not(.scrolled):not(.nav-open) .brand img { height: 60px; }
  /* Phones: the wordmark scales with the screen so the two buttons always fit.
     207px = bar margins, both buttons, gaps and the monogram; 9.3 = wordmark
     width per px of font size (Inter 700 at 0.05em). */
  .brand-text { font-size: min(1.35rem, calc((100vw - 207px) / 9.3)); letter-spacing: 0.05em; }
  .navbar-inner { gap: 0.6rem; }
  .brand { gap: 0.5rem; }
  .theme-toggle { margin-left: auto; }
  .nav-toggle { margin-left: 0; }
}
@media (max-width: 374px) {
  /* Too narrow for the wordmark beside a full-size monogram: the monogram stays
     and the name is kept for screen readers only. */
  .site-header .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* Heroes ---------------------------------------------------------------- */
.hero {
  position: relative; display: grid; align-items: center; overflow: hidden;
  padding: 150px 0 80px; color: #fff; background: var(--navy-950);
}
.hero-photo { min-height: min(72vh, 620px); }
.hero-home { min-height: min(92vh, 820px); padding: 156px 0 96px; }
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-color: var(--navy-950);
  /* Light touch so the photo keeps its colour: a faint band behind the header and a
     soft shade behind the words on the left, clear from about 60% across. */
  background-image: linear-gradient(to bottom, rgba(4, 16, 31, 0.45), rgba(4, 16, 31, 0) 170px), linear-gradient(100deg, rgba(4, 16, 31, 0.55) 0%, rgba(4, 16, 31, 0.22) 38%, rgba(4, 16, 31, 0) 62%), var(--hero-img);
  background-position: center var(--hero-y, 35%);
  background-size: cover; background-repeat: no-repeat;
  filter: saturate(1.35) contrast(1.12) brightness(1.06);
  transform-origin: 50% 40%;
  animation: hero-settle 7s var(--ease-out) both;
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(to bottom, transparent calc(100% - 120px), var(--hero-fade)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto, 160px 160px;
}
@keyframes hero-settle { from { transform: scale(1.07); } to { transform: scale(1); } }
html.js .hero-inner > div > * { animation: hero-rise .9s var(--ease-out) both; }
.hero-inner > div > :nth-child(2) { animation-delay: .12s; }
.hero-inner > div > :nth-child(3) { animation-delay: .24s; }
.hero-inner > div > :nth-child(4) { animation-delay: .36s; }
.hero-inner > div > :nth-child(5) { animation-delay: .48s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
[data-theme="light"] .hero-photo::before { filter: saturate(1.15) contrast(1.08) brightness(1.04); }   /* LIGHT */
.hero-home { --hero-fade: var(--canvas); }
[data-theme="light"] .hero-home { --hero-fade: transparent; }   /* LIGHT: end the photo crisply at the stats band */
.hero-willis      { --hero-img: url("../assets/photos-mock/willis-tower-2400.jpg"); --hero-y: 50%; }
.hero-pierskyline { --hero-img: url("../assets/photos-mock/pier-skyline-2400.jpg"); --hero-y: 55%; }
.hero-tower     { --hero-img: url("../assets/photos-mock/tower-2400.jpg"); --hero-y: 50%; }
.hero-eltrain     { --hero-img: url("../assets/photos-mock/eltrain-2400.jpg"); --hero-y: 50%; }
.hero-fog         { --hero-img: url("../assets/photos-mock/fog-skyline-2400.jpg"); --hero-y: 50%; }
.hero-navypier    { --hero-img: url("../assets/photos-mock/navy-pier-2400.jpg"); --hero-y: 55%; }
.hero-fiber     { --hero-img: url("../assets/photos-mock/fiber-2400.jpg"); --hero-y: 50%; }
.hero-citydusk    { --hero-img: url("../assets/photos-mock/city-dusk-2400.jpg"); --hero-y: 12%; }
.hero-junction  { --hero-img: url("../assets/photos-mock/loop-junction-2400.jpg"); --hero-y: 55%; }
.hero-inner { position: relative; z-index: 1; }
.hero-inner > div, .hero-copy { max-width: 760px; }
/* Soft dark glow behind the words on photo heroes, so they read on bright photos
   while the rest of the picture keeps its colour. .hero clips the overhang. */
.hero-photo .hero-inner > div { position: relative; }
.hero-photo .hero-inner > div::before {
  content: ""; position: absolute; inset: -70px -110px -70px -140px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(4, 16, 31, 0.6), rgba(4, 16, 31, 0.32) 60%, rgba(4, 16, 31, 0));
}
.hero h1 { color: #fff; margin: 1.1rem 0 1.5rem; max-width: 14ch; font-size: clamp(2.8rem, 5.6vw, 4.6rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.03em; }
.hero-navypier h1 { max-width: 19ch; }   /* two lines on desktop: “Know exactly who’s / in your corner” */
.hero-home h1 { max-width: 12ch; font-size: clamp(3rem, 6.6vw, 5.6rem); line-height: 1.02; }
.hero .lede { color: #fff; }
.hero .kicker, .hero .eyebrow { color: #fff; }
.hero-note { margin-top: 1.4rem; font-size: 0.86rem; color: #eef3f9; }
.hero h1, .hero .lede, .hero .kicker, .hero .eyebrow, .hero-note { text-shadow: 0 1px 3px rgba(4, 16, 31, 0.45), 0 4px 28px rgba(4, 16, 31, 0.55); }
.hero .btn-outline {
  border-color: rgba(255, 255, 255, 0.28); background: rgba(4, 16, 31, 0.34); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero .btn-outline:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(4, 16, 31, 0.55); color: #fff; }
.scroll-cue { position: absolute; left: 50%; bottom: 30px; z-index: 1; width: 1px; height: 64px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.scroll-cue::after { content: ""; position: absolute; inset: 0; background: #fff; transform: translateY(-100%); animation: scroll-cue 2.4s cubic-bezier(0.65, 0, 0.35, 1) 1.2s 2; }
@keyframes scroll-cue { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }
@media (max-width: 900px) { .hero { padding: 120px 0 64px; min-height: 0; } .hero-home { padding-top: 130px; } .scroll-cue { display: none; } }
@media (max-width: 800px) {
  .hero-willis { --hero-img: url("../assets/photos-mock/willis-tower-1200.jpg"); }
  .hero-pierskyline { --hero-img: url("../assets/photos-mock/pier-skyline-1200.jpg"); }
  .hero-tower { --hero-img: url("../assets/photos-mock/tower-1200.jpg"); }
  .hero-eltrain { --hero-img: url("../assets/photos-mock/eltrain-1200.jpg"); }
  .hero-fog { --hero-img: url("../assets/photos-mock/fog-skyline-1200.jpg"); }
  .hero-navypier { --hero-img: url("../assets/photos-mock/navy-pier-1200.jpg"); }
  .hero-fiber { --hero-img: url("../assets/photos-mock/fiber-1200.jpg"); }
  .hero-citydusk { --hero-img: url("../assets/photos-mock/city-dusk-1200.jpg"); }
  .hero-junction { --hero-img: url("../assets/photos-mock/loop-junction-1200.jpg"); }
}

/* Plain page head: a quiet band for text pages (team, contact, blog…) */
.page-head { padding: 150px 0 56px; background: var(--canvas-2); border-bottom: 1px solid var(--hair); }
.page-head h1 { margin: 0.9rem 0 1.2rem; max-width: 16ch; font-size: clamp(2.4rem, 4.6vw, 3.6rem); }
.page-head .lede { max-width: 60ch; }
.page-head-post h1 { max-width: 24ch; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.12; }
.post-meta { margin-top: 0.4rem; font-size: 0.95rem; color: var(--ink-3); }
@media (max-width: 900px) { .page-head { padding: 120px 0 44px; } }

/* Stats band ------------------------------------------------------------ */
.stats { background: var(--canvas-2); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 44px 28px; border-left: 1px solid var(--hair); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .n { font: 600 3.1rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--stat-num); font-variant-numeric: lining-nums tabular-nums; }
.stat .l { margin-top: 10px; font-size: 0.95rem; line-height: 1.4; color: var(--ink-3); }
.stats-inner.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) {
  .stats-inner, .stats-inner.three { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat { padding: 24px 18px; }
}

/* Ruled columns (no boxes, no icons) ------------------------------------ */
.cards, .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; border-top: 1px solid var(--hair); }
.cards.two, .card-grid.two { grid-template-columns: repeat(2, 1fr); }
.cards.four, .card-grid.four { grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
.card { padding: 28px 0 6px; display: grid; gap: 12px; align-content: start; }
.card h3 { font-size: 1.45rem; }
.card p { color: var(--ink-2); font-size: 0.98rem; max-width: 40ch; }
.card .kicker, .card .eyebrow { font-size: 0.88rem; }
.card > a:not(.btn) { color: var(--accent); font-weight: 500; font-size: 0.95rem; margin-top: 4px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: transparent; transition: text-decoration-color .15s; justify-self: start; }
.card > a:not(.btn):hover { text-decoration-color: currentColor; }
.card .btn { justify-self: start; margin-top: 8px; }
.card .icon { display: none; }
@media (max-width: 1000px) { .cards.four, .card-grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .cards, .card-grid, .cards.two, .card-grid.two { grid-template-columns: 1fr; border-top: 0; }
  .card { border-top: 1px solid var(--hair); }
}
@media (max-width: 600px) { .cards.four, .card-grid.four { grid-template-columns: 1fr; } }

/* Split: photo panel + copy --------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split.reverse > .split-media { order: 2; }
.split h2 { margin-bottom: 1rem; }
.split .lede { margin-top: 0; }
.split p + p { margin-top: 1rem; }
.split .ctas, .split .hero-ctas { margin-top: 1.8rem; }
.split-media {
  aspect-ratio: 3 / 2; border-radius: var(--radius); border: 1px solid var(--hair); color: transparent; overflow: hidden;
  background-color: var(--navy-950); background-size: cover; background-position: center; background-repeat: no-repeat;
  background-image: linear-gradient(rgba(9, 17, 33, 0.18), rgba(9, 17, 33, 0.38)), var(--media-img);
}
.split-media.media-lasalle, .split-media.mock-cbot { --media-img: url("../assets/photos-mock/lasalle-street.jpg"); }
.split-media.media-fed { --media-img: url("../assets/photos-mock/fed-reserve-1200.webp"); background-position: center 55%; background-image: linear-gradient(rgba(9, 17, 33, 0.1), rgba(9, 17, 33, 0.26)), var(--media-img); }
.split-media.media-harbor-light { --media-img: url("../assets/photos-mock/harbor-light-1200.webp"); background-position: center 50%; background-image: linear-gradient(rgba(9, 17, 33, 0.1), rgba(9, 17, 33, 0.26)), var(--media-img); }
.split-media.media-wacker, .split-media.mock-wacker { --media-img: url("../assets/photos-mock/wacker-river.jpg"); }
.split-media.media-chicagohenge, .split-media.mock-cbot-day { --media-img: url("../assets/photos-mock/chicagohenge-sidewalk.jpg"); aspect-ratio: 4 / 5; }
.split-media.media-night { --media-img: url("../assets/photos-mock/skyline-night.webp"); background-position: center 60%; }
.split-media.media-number {
  display: grid; place-items: center; color: var(--stat-num); background: var(--canvas-2);
  font: 500 clamp(6rem, 14vw, 11rem)/1 var(--font-display); letter-spacing: -0.04em;
}
.split-media.media-number small { display: block; font: 500 1rem/1.4 var(--font-body); color: var(--ink-3); margin-top: 0.5rem; letter-spacing: 0; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse > .split-media { order: 0; }
  .split-media.media-chicagohenge, .split-media.mock-cbot-day { aspect-ratio: 3 / 2; }
}

/* Checklist ------------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.7rem; }
.checklist + p, .checklist + .lede { margin-top: 1.4rem; }
.split .kicker, .split .eyebrow { margin-bottom: 0.6rem; }
.checklist li { position: relative; padding-left: 1.9rem; color: var(--ink-2); }
.checklist li::before {
  content: "\2713"; position: absolute; left: 0; top: 0.15rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.7rem; line-height: 1;
  background: var(--card-2); border: 1px solid var(--hair); color: var(--accent);
}
.chip-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--hair); }
.chip-list li { padding: 16px 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); display: flex; gap: 14px; align-items: flex-start; }
.chip-list svg { flex: none; width: 18px; height: 18px; color: var(--accent); margin-top: 4px; }

/* Numbered steps -------------------------------------------------------- */
.steps { display: grid; border-top: 1px solid var(--hair); }
.step { display: grid; grid-template-columns: 72px 1fr 1.4fr; gap: 1.5rem; padding: 30px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.step .num { font: 400 1.5rem/1 var(--font-display); color: var(--ink-3); }
.step h3 { font-size: 1.35rem; }
.step p { color: var(--ink-2); font-size: 0.98rem; }
@media (max-width: 800px) { .step { grid-template-columns: 48px 1fr; } .step p { grid-column: 2; } }

/* Quotes ---------------------------------------------------------------- */
.quote { background: var(--quote-bg); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 88px 0; }
.quote blockquote { margin: 0 auto; max-width: 34ch; font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink); text-align: center; }
.quote cite { display: block; margin-top: 1.5rem; text-align: center; font: 400 0.95rem/1.4 var(--font-body); color: var(--ink-3); font-style: normal; }
.quotes, .testimonial-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; border-top: 1px solid var(--hair); }
.quotes.three { grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.quotes:not(.three) figure:nth-child(odd):last-child { grid-column: 1 / -1; max-width: 70ch; }
.quotes figure, .testimonial { margin: 0; padding: 30px 0; border-bottom: 1px solid var(--hair); display: grid; gap: 14px; align-content: start; }
.quotes blockquote, .testimonial blockquote { margin: 0; font: 400 1.3rem/1.4 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.quotes cite, .testimonial cite { font: 400 0.92rem/1.4 var(--font-body); color: var(--ink-3); font-style: normal; }
.testimonial .quote-mark { display: none; }
@media (max-width: 800px) { .quotes, .testimonial-track, .quotes.three { grid-template-columns: 1fr; } .quotes figure:nth-child(odd):last-child { grid-column: auto; } }

/* Accordion (FAQ) ------------------------------------------------------- */
.accordion { border-top: 1px solid var(--hair); interpolate-size: allow-keywords; }
.accordion details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease-out), content-visibility .4s allow-discrete; }
.accordion details[open]::details-content { block-size: auto; }
.accordion details { border-bottom: 1px solid var(--hair); }
.accordion summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 22px 0; font: 500 1.2rem/1.3 var(--font-display); color: var(--ink);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary { transition: color .2s; }
.accordion summary:hover::after { border-color: var(--hair-strong); }
.accordion summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hair); display: grid; place-items: center; font: 400 1.1rem/1 var(--font-body); color: var(--accent); transition: border-color .2s, transform .3s var(--ease-out); }
.accordion details[open] summary::after { transform: rotate(180deg); }
.accordion details[open] summary::after { content: "\2212"; }
.accordion .accordion-body, .accordion details > :not(summary) { padding: 0 0 24px; color: var(--ink-2); max-width: 70ch; }
.accordion details p + p { margin-top: 0.8rem; }

/* Tabs ------------------------------------------------------------------ */
.tabs { max-width: 860px; margin: 0 auto; }
.tab-list { display: flex; gap: 0; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.tab-list button {
  flex: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 14px 18px; font: 500 0.95rem/1 var(--font-body); color: var(--ink-3); cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.tab-list button:hover { color: var(--ink); }
.tab-list button.active { color: var(--ink); border-bottom-color: var(--accent); }
.tab-panel { display: none; padding: 36px 0 0; }
.tab-panel.active { display: block; }
.tab-panel h3 { margin-bottom: 0.8rem; font-size: 1.6rem; }
.tab-panel p { color: var(--ink-2); max-width: 64ch; }
.tab-panel p + p { margin-top: 0.9rem; }

/* Insight rows (homepage) ---------------------------------------------- */
.insights { display: grid; border-top: 1px solid var(--hair); }
.insight { display: grid; grid-template-columns: 160px 1fr; gap: 1.5rem; padding: 26px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.insight .date { font-size: 0.9rem; color: var(--ink-3); }
.insight h3 { font-size: 1.45rem; line-height: 1.25; max-width: 28ch; }
.insight h3 a { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: transparent; transition: text-decoration-color .15s; }
.insight h3 a:hover { text-decoration-color: var(--accent); }
.insight p { color: var(--ink-2); font-size: 0.95rem; max-width: 62ch; margin-top: 10px; }
@media (max-width: 800px) { .insight { grid-template-columns: 1fr; gap: 0.4rem; } }

/* CTA band -------------------------------------------------------------- */
.cta, .cta-band {
  position: relative; padding: 110px 0; color: #fff; text-align: center; overflow: hidden;
  background: linear-gradient(rgba(11, 31, 58, 0.86), rgba(4, 16, 31, 0.94)), url("../assets/photos-mock/skyline-night.webp") center 60% / cover no-repeat var(--navy-900);
}
.cta-band { border-radius: 0; margin: 0; }
.cta h2, .cta-band h2 { color: #fff; max-width: 20ch; margin: 0.8rem auto 1rem; }
.cta .lede, .cta p, .cta-band p { color: #c6d2e2; margin: 0 auto; max-width: 52ch; }
.cta .hero-ctas, .cta .ctas, .cta-band .hero-ctas { justify-content: center; }
.cta .kicker, .cta .eyebrow { color: var(--accent-400); }
.cta .btn-outline, .cta-band .btn-outline { border-color: var(--ghost-border); color: #fff; }
.cta .btn-outline:hover, .cta-band .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }
@media (max-width: 900px) { .cta, .cta-band { padding: 80px 0; } }
.cta .lede a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 3px; }
.cta .lede a:hover { text-decoration-color: #fff; }
/* How to apply: a name box beside the email button, so the email opens with
   "<Name> – Application" as its subject. Stacks on phones. */
.apply-mail { display: flex; gap: 0.8rem; justify-content: center; max-width: 34rem; margin: 2rem auto 0; }
.apply-mail input { flex: 1 1 auto; min-width: 0; border-radius: 999px; padding: 0.85rem 1.3rem; color: #fff; background: rgba(255, 255, 255, 0.07); border-color: var(--ghost-border); }
.apply-mail input::placeholder { color: #a9b8cb; }
.apply-mail .btn { flex: none; }
.apply-mail input, .apply-mail .btn { height: 3.5rem; }
.cta .apply-mail-note { min-height: 1.5em; margin-top: 0.8rem; font-size: 0.9rem; color: #fff; }
@media (max-width: 480px) { .apply-mail { flex-direction: column; } .apply-mail .btn { width: 100%; } }

/* Blog list ------------------------------------------------------------- */
/* Same date-and-title ledger as the home page's Recent insights: hairline rows,
   no thumbnails. The markup keeps its images for posts; the index hides them. */
.post-grid { border-top: 1px solid var(--hair); }
.post-card { border-bottom: 1px solid var(--hair); }
.post-card-media { display: none; }
.post-card-body {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 1.5rem; row-gap: 10px;
  grid-template-areas: "date tags" "date title" "date excerpt"; align-items: baseline; padding: 30px 0;
}
.post-card-body .post-date { grid-area: date; align-self: start; padding-top: 2px; }
.post-card-body .post-tags { grid-area: tags; }
.post-card-body .post-card-title { grid-area: title; }
.post-card-body .post-card-excerpt { grid-area: excerpt; }
.post-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.post-tag { font-size: 0.78rem; color: var(--accent); }
.post-tag + .post-tag::before { content: "/"; color: var(--ink-3); margin-right: 6px; }
.post-card-title { font-size: 1.45rem; line-height: 1.25; max-width: 34ch; }
.post-card-title a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: transparent; transition: text-decoration-color .15s; }
.post-card:hover .post-card-title a { text-decoration-color: var(--accent); }
.post-date { font-size: 0.88rem; color: var(--ink-3); }
.post-card-excerpt { font-size: 0.95rem; color: var(--ink-2); max-width: 62ch; }
@media (max-width: 800px) {
  .post-card-body { grid-template-columns: 1fr; grid-template-areas: "tags" "title" "date" "excerpt"; row-gap: 8px; padding: 26px 0; }
  .post-card-body .post-date { padding-top: 0; }
  .post-card-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
}

.pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 48px; }
.pager-link { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hair); color: var(--ink-2); font-size: 0.9rem; transition: background .15s, color .15s, border-color .15s; }
a.pager-link:hover { background: var(--card-2); color: var(--ink); }
.pager-link[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pager-link[aria-disabled="true"] { opacity: 0.4; }

/* Blog article ---------------------------------------------------------- */
.post-section .post { max-width: 720px; margin: 0 auto; }
.post-figure { margin: 0 0 2.4rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hair); }
.post-figure img { width: 100%; height: auto; }
.post-body { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.68; color: var(--ink-2); font-optical-sizing: auto; }
.post-body > p:first-child::first-letter { float: left; font: 400 4.4rem/0.78 var(--font-display); color: var(--ink); margin: 0.1em 0.16em 0 0; }
.post-body > * + * { margin-top: 1.25em; }
.post-body h2, .post-body h3, .post-body h4 { color: var(--ink); margin-top: 2em; line-height: 1.2; }
.post-body h2 { font-size: 1.8rem; }
.post-body h3 { font-size: 1.4rem; }
.post-body h4 { font-size: 1.15rem; font-family: var(--font-body); font-weight: 600; }
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(38, 175, 255, 0.4); }
.post-body a:hover { text-decoration-color: currentColor; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body ul, .post-body ol { padding-left: 1.4em; display: grid; gap: 0.5em; }
.post-body li::marker { color: var(--accent); }
.post-body blockquote { margin: 1.8em 0; padding: 0.2em 0 0.2em 1.4em; border-left: 1px solid var(--accent); font-family: var(--font-display); font-size: 1.5rem; line-height: 1.38; letter-spacing: -0.01em; color: var(--ink); }
.post-body img { border-radius: var(--radius); height: auto; }
.post-body figure { margin: 1.6em 0; }
.post-body figcaption { font-size: 0.88rem; color: var(--ink-3); margin-top: 0.6em; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.post-body th, .post-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.post-body th { color: var(--ink); font-weight: 600; }
.post-body hr { border: 0; border-top: 1px solid var(--hair); margin: 2.4em 0; }
.post-body iframe { max-width: 100%; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--hair); }
.post-nav-link { display: grid; gap: 6px; }
.post-nav-link.next, .post-nav-link.is-next { text-align: right; }
.post-nav-label { font-size: 0.82rem; color: var(--ink-3); }
.post-nav-title { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: transparent; transition: text-decoration-color .15s; }
.post-nav-link:hover .post-nav-title { text-decoration-color: var(--accent); }
.post-back { margin-top: 40px; }
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } .post-nav-link.next, .post-nav-link.is-next { text-align: left; } }

/* Team ------------------------------------------------------------------ */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; border-top: 1px solid var(--hair); }
.team-card { padding: 32px 0 28px; border-bottom: 1px solid var(--hair); display: grid; gap: 8px; align-content: start; }
.team-photo { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 1px solid var(--hair); background: var(--card-2); margin-bottom: 10px; }
.avatar.team-photo { display: grid; place-items: center; font: 600 1.5rem/1 var(--font-ui); letter-spacing: 0.04em; color: var(--ink-2); }
.team-card h3 { font-size: 1.35rem; }
.team-card .role { font-size: 0.92rem; color: var(--accent); }
.team-social { display: flex; gap: 8px; margin: 4px 0 6px; }
.team-social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hair); color: var(--ink-2); font: 700 0.78rem/1 var(--font-ui); transition: background .15s, color .15s; }
.team-social a:hover { background: var(--card-2); color: var(--ink); }
.team-social svg { width: 18px; height: 18px; }
.team-bio { font-size: 0.95rem; color: var(--ink-2); display: grid; gap: 0.8rem; }
.team-bio p + p { margin-top: 0; }
.team-bio:has(> details:not([open])) > p:first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.bio-more summary { list-style: none; cursor: pointer; color: var(--accent); font-size: 0.9rem; font-weight: 500; }
.bio-more summary::-webkit-details-marker { display: none; }
.bio-more .bio-more-close { display: none; }
.bio-more[open] .bio-more-open { display: none; }
.bio-more[open] .bio-more-close { display: inline; }
.bio-more-body { margin-top: 0.8rem; display: grid; gap: 0.8rem; }
.team-emeriti { margin-top: 80px; display: grid; gap: 14px; }
.team-emeriti .team-grid { margin-top: 30px; }
/* The grid draws the closing line, so the cards in its last row, however full,
   drop theirs: the row's first card (nth-child of the column count) and the
   cards after it. Each column count only in its own width range. */
.team-grid .team-card:last-child { border-bottom: 0; }
@media not all and (max-width: 1000px) { .team-grid .team-card:nth-child(3n+1):nth-last-child(-n+3), .team-grid .team-card:nth-child(3n+1):nth-last-child(-n+3) ~ .team-card { border-bottom: 0; } }
@media not all and (max-width: 640px) { @media (max-width: 1000px) { .team-grid .team-card:nth-child(2n+1):nth-last-child(-n+2), .team-grid .team-card:nth-child(2n+1):nth-last-child(-n+2) ~ .team-card { border-bottom: 0; } } }
.team-emeriti .team-grid { border-bottom: 1px solid var(--hair); }
.team-grid:not(.team-emeriti .team-grid) { border-bottom: 1px solid var(--hair); }
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }

/* Contact --------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-grid h2 { margin: 0.6rem 0 1.6rem; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.form-grid { display: grid; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
label { display: block; font-weight: 500; font-size: 0.92rem; color: var(--ink); margin-bottom: 0.4rem; }
input, textarea, select {
  width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--hair); border-radius: var(--radius);
  font: inherit; color: var(--field-ink); background: var(--field-bg);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { resize: vertical; min-height: 140px; }
.who-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.who-fieldset legend { font-weight: 500; font-size: 0.92rem; color: var(--ink); margin-bottom: 0.6rem; padding: 0; }
.choice-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.choice-chips label { margin: 0; position: relative; }
.choice-chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-chips span { display: block; padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid var(--hair); background: transparent; font-weight: 500; font-size: 0.9rem; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.choice-chips label:hover span { border-color: var(--hair-strong); color: var(--ink); }
.choice-chips input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.choice-chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.advisor-note { font-size: 0.9rem; color: var(--ink-2); border-left: 2px solid var(--accent); padding: 0.2rem 0 0.2rem 1rem; margin: 0; }
.form-note { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--ink-3); }
.form-note.is-ok { color: var(--ok); }
.form-note.is-err { color: var(--err); }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }
.info-card { border-top: 1px solid var(--hair); padding-top: 28px; color: var(--ink-2); }
.info-card h3 { margin-bottom: 1.2rem; }
.info-card a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; }
.info-card a:not(.btn):hover { text-decoration-color: var(--accent); }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--hair); }
.info-list li { display: flex; gap: 0.9rem; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.info-list .icon { flex: none; width: 20px; height: 20px; color: var(--accent); margin-top: 3px; display: grid; place-items: center; }
.info-list .icon svg { width: 18px; height: 18px; }

/* Footer ---------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--hair); padding: 80px 0 0; font-size: 0.9rem; color: var(--ink-3); background: var(--canvas); }
.site-footer .container { width: min(var(--lane), calc(100% - 48px)); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 40px; }
.site-footer h2 { font: 500 0.95rem/1.3 var(--font-body); color: var(--ink); letter-spacing: -0.015em; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--accent); }
.footer-brand .brand { gap: 0.6rem; }
.footer-brand .brand img { height: 48px; }
.footer-brand .brand-text { font-size: 1.15rem; letter-spacing: 0.1em; }
.footer-brand .brand-tagline { margin-top: 1rem; color: var(--ink); font-weight: 500; }
.footer-brand p { line-height: 1.7; max-width: 38ch; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.footer-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hair); color: var(--ink-2); transition: background .15s, color .15s; }
.footer-social a:hover { background: var(--card-2); color: var(--ink); }
.footer-social svg { width: 20px; height: 20px; }
.footer-bottom { border-top: 1px solid var(--hair); padding: 22px 0 28px; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.84rem; }
.footer-bottom p { margin: 0; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Text pages (privacy, credits, 404) ------------------------------------ */
.prose { max-width: 72ch; color: var(--ink-2); font-size: 1.05rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-size: 1.7rem; margin-top: 2em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.6em; }
.prose a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose .ctas { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: 0.5em; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }

/* Back to top: a round button, bottom right, once the reader is well down the page. */
.to-top {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 9;
  width: 44px; height: 44px; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer;
  color: var(--ink); background: var(--nav-tint); border: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility 0s linear .2s, background .15s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s, visibility 0s, background .15s; }
.to-top:hover { background: var(--card-2); }
.to-top svg { width: 18px; height: 18px; }
.site-header.nav-open ~ .to-top { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}