/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;
  --navy: #04123f;
  --navy-2: #0a1a55;
  --ink: #111a36;
  --ink-soft: #2c3653;
  --paper: #f5f6fb;
  --paper-2: #ebeff7;
  --paper-3: #ffffff;
  --rule: #d6dceb;
  --rule-soft: #e6ebf4;
  --muted: #5a647f;
  --accent: #2c5dd6;
  --accent-2: #1f48b8;
  --accent-soft: #d6e1fb;
  /* --heading-ink: the color that h1–h4 and .nav-brand use. In light mode this
     is --navy (a deep dark); in dark mode it becomes a light tint so headings
     stay legible on the dark page background. */
  --heading-ink: var(--navy);
  --grid: 1100px;
  --grid-wide: 1340px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 2px 6px -2px rgba(4, 18, 63, 0.10);
  --shadow-md: 0 12px 32px -16px rgba(4, 18, 63, 0.22);
  --shadow-lg: 0 24px 48px -20px rgba(4, 18, 63, 0.32);
  --serif: "IBM Plex Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Dark mode ---------- */
/* Mirrors the OS/browser color-scheme. No toggle — the site reflects whatever
   the reader has set. Light is the default if the preference is unset.
   Strategy: invert paper/ink, brighten accent slightly, swap --heading-ink to
   a light tint, and keep --navy itself (still the darkest) so .section-dark,
   .hero, and primary buttons remain valid as the visually-dark surfaces. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0b1330;
    --paper-2: #131c3e;
    --paper-3: #1a2349;
    --ink: #e7ecff;
    --ink-soft: #c2cbf0;
    --muted: #8593b6;
    --rule: #2a3461;
    --rule-soft: #1f2952;
    --accent: #6589e8;
    --accent-2: #88a4f0;
    --accent-soft: rgba(101, 137, 232, 0.18);
    --heading-ink: #f0f4ff;
    --shadow-sm: 0 2px 6px -2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 12px 32px -16px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 24px 48px -20px rgba(0, 0, 0, 0.65);
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }
body { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 12px; top: 12px;
  background: var(--navy); color: #fff;
  padding: 10px 16px; border-radius: 3px;
  font-family: var(--sans); font-size: 0.9rem;
  transform: translateY(-150%);
  transition: transform .15s;
  z-index: 100;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Focus states ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero a:focus-visible, .footer a:focus-visible, .section-dark a:focus-visible { outline-color: #fff; }
.btn:focus-visible { outline-offset: 3px; }

html { scroll-behavior: smooth; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--heading-ink);
  font-weight: 600;
  margin: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "lnum" 1;
}
h1 {
  font-size: clamp(2rem, 6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
}
h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
}
h3 {
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
}
h4 {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--sans);
}
p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
p:last-child { margin-bottom: 0; }
em, i { font-style: italic; }
strong { font-weight: 600; color: var(--heading-ink); }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.4;
  color: var(--ink-soft);
  text-wrap: pretty;
  letter-spacing: -0.005em;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 500;
  display: inline-block;
}
.serif-italic { font-style: italic; color: var(--heading-ink); }

code { font-family: var(--mono); font-size: 0.92em; background: var(--paper-2); padding: 2px 5px; border-radius: 3px; }
.section-dark code { background: rgba(255,255,255,0.10); color: #e7ecff; }

a { text-decoration: none; }
.prose { line-height: 1.6; }
.prose p { color: var(--ink-soft); }
.prose strong { color: var(--heading-ink); }
.prose a {
  color: var(--accent);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  transition: background-size .25s var(--ease-out), color .15s;
}
.prose a:hover {
  color: var(--accent-2);
  background-image: linear-gradient(var(--accent), var(--accent));
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--grid); margin: 0 auto; padding: 0 32px; }
.wrap-wide { max-width: var(--grid-wide); margin: 0 auto; padding: 0 32px; }
.section { padding: 128px 0; }
.section-tight { padding: 80px 0; }
.section-dark {
  background:
    radial-gradient(80% 60% at 10% 0%, rgba(44, 93, 214, 0.20), transparent 60%),
    var(--navy);
  color: #f0f4ff;
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-soft { background: var(--paper-2); }
/* When a tinted section is used without an explicit .section / .section-tight
   sizing companion, it had zero vertical padding and the bg hugged the text.
   Give those standalone tinted bands proper breathing room. Inline padding
   on individual sections (some closing CTAs use 96px) still wins. */
.section-soft:not(.section):not(.section-tight),
.section-dark:not(.section):not(.section-tight) {
  padding: 96px 0;
}
@media (max-width: 600px) {
  .section-soft:not(.section):not(.section-tight),
  .section-dark:not(.section):not(.section-tight) {
    padding: 64px 0;
  }
}

hr.rule { border: 0; height: 1px; background: var(--rule); margin: 32px 0; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav.is-scrolled {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 0 rgba(4, 18, 63, 0.04), 0 8px 24px -16px rgba(4, 18, 63, 0.18);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; max-width: var(--grid-wide); margin: 0 auto; }
.nav-brand { font-family: var(--serif); font-weight: 600; color: var(--heading-ink); font-size: 1.02rem; display: flex; align-items: center; gap: 12px; letter-spacing: -0.005em; }
.nav-brand svg { width: 26px; height: 26px; transition: transform .4s var(--ease-out); }
.nav-brand:hover svg { transform: rotate(-12deg); }
.nav-links { display: flex; gap: 28px; font-family: var(--sans); font-size: 0.92rem; color: var(--heading-ink); font-weight: 500; }
.nav-links a {
  padding: 8px 0;
  position: relative;
  color: var(--ink-soft);
  transition: color .2s var(--ease);
}
.nav-links a:hover, .nav-links a:active, .nav-links a.is-active { color: var(--heading-ink); }
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0; right: 0;
  height: 1px;
  background: var(--navy);
  opacity: 0;
  transform: scaleY(0.6);
  transform-origin: bottom;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.nav-links a:hover::after,
.nav-links a:active::after {
  opacity: 0.55;
  transform: scaleY(1);
}
.nav-links a.is-active::after {
  opacity: 1;
  transform: scaleY(1);
  height: 2px;
  background: var(--accent);
}
.nav-toggle {
  display: none;
  background: none; border: 0; padding: 8px;
  color: var(--heading-ink);
  cursor: pointer;
  border-radius: var(--radius-sm);
  position: relative;
}
.nav-toggle:hover { background: var(--paper-2); }
/* Cross-fade + rotate between the burger and the close icon. Both icons sit
   stacked; the visible one fades in while the hidden one fades out, with a
   small rotation so the transition feels physical. */
.nav-toggle .icon-open,
.nav-toggle .icon-close {
  transition: opacity .18s var(--ease), transform .22s var(--ease-out);
}
.nav-toggle .icon-close {
  position: absolute; inset: 8px;
  opacity: 0; transform: rotate(-90deg) scale(0.8);
  pointer-events: none;
}
.nav-toggle[aria-expanded="true"] .icon-open {
  opacity: 0; transform: rotate(90deg) scale(0.8);
}
.nav-toggle[aria-expanded="true"] .icon-close {
  opacity: 1; transform: rotate(0) scale(1);
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  /* The menu is always rendered (display: flex) but visually hidden until
     .is-open. Animating opacity + translate avoids the `display` toggle that
     can't be transitioned. visibility + pointer-events keep it out of the
     accessibility tree and out of the way when closed. */
  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 8px 24px 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
      opacity .20s var(--ease),
      transform .22s var(--ease-out),
      visibility 0s linear .22s;
    box-shadow: var(--shadow-md);
  }
  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
      opacity .20s var(--ease),
      transform .22s var(--ease-out),
      visibility 0s linear 0s;
  }
  .nav-links a {
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
    /* Per-link fade-in offset; hidden when the menu is closed. */
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .22s var(--ease) .04s, transform .22s var(--ease-out) .04s;
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links.is-open a { opacity: 1; transform: translateY(0); }
  /* Stagger the link reveals so the menu feels considered, not popped. */
  .nav-links.is-open a:nth-child(1) { transition-delay: 60ms, 60ms; }
  .nav-links.is-open a:nth-child(2) { transition-delay: 90ms, 90ms; }
  .nav-links.is-open a:nth-child(3) { transition-delay: 120ms, 120ms; }
  .nav-links.is-open a:nth-child(4) { transition-delay: 150ms, 150ms; }
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(120% 80% at 100% 100%, rgba(44, 93, 214, 0.22), transparent 60%),
    radial-gradient(80% 60% at 0% 0%, rgba(199, 210, 245, 0.10), transparent 55%),
    var(--navy);
  color: #e7ecff;
  position: relative;
  overflow: hidden;
  padding: 88px 0 128px;
}
.hero h1 { color: #fff; max-width: 18ch; letter-spacing: -0.025em; }
.hero p.tagline {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  color: rgba(199, 210, 245, 0.9);
  margin-top: 16px;
  letter-spacing: -0.005em;
}
.hero .lede { color: rgba(212, 220, 246, 0.92); }
.hero .wrap { position: relative; z-index: 1; }
.hero .venn-deco {
  position: absolute; right: -32px; bottom: -32px; width: clamp(320px, 38vw, 520px); opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  animation: ventle 18s ease-in-out infinite alternate;
}
.hero .venn-deco .venn circle { stroke-width: 1.2; }
.hero .venn-deco .venn line { stroke-width: 1.2; opacity: 1; }
@keyframes ventle {
  0%   { transform: translate3d(0, 0, 0) rotate(0); }
  100% { transform: translate3d(-8px, -6px, 0) rotate(-3deg); }
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 36px;
  max-width: 60ch;
  font-family: var(--sans); font-size: 0.92rem; color: #c7d2f5;
}
.hero-meta .pill {
  border: 1px solid rgba(199, 210, 245, 0.28);
  background: rgba(199, 210, 245, 0.04);
  padding: 7px 14px; border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0;
}
.hero-cta { margin-top: 44px; display: flex; gap: 12px; flex-wrap: wrap; max-width: 60ch; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 500;
  padding: 13px 22px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent;
  letter-spacing: -0.005em;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: #fff; color: var(--heading-ink);
  box-shadow: 0 1px 0 rgba(4, 18, 63, 0.04), 0 4px 12px -6px rgba(4, 18, 63, 0.24);
}
.btn-primary:hover { background: var(--accent-soft); color: var(--accent-2); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.32); }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-2); }

/* ---------- Venn Mark ---------- */
.venn { width: 100%; height: auto; }
.venn circle { fill: none; stroke: currentColor; stroke-width: 1.4; }
.venn .center { fill: var(--accent-soft); stroke: none; }
.venn-deco .venn circle { stroke: rgba(199, 210, 245, 0.7); }
.venn-deco .venn .center { fill: rgba(199, 210, 245, 0.35); }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 26px 26px 24px;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--rule));
}
/* When the card-media is a saturated logo (Static / Loom / Emojio), the soft drop
   shadow gets absorbed by the colored background. A thin navy ring lifts cleanly. */
.card.is-featured:has(.card-media--logo):hover {
  box-shadow: 0 0 0 1px var(--navy), 0 12px 32px -18px rgba(4, 18, 63, 0.28);
}

/* Card media: optional image at the top of a card */
.card-media {
  margin: -26px -26px 6px;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--paper-2);
  position: relative;
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
}
.card:hover .card-media img {
  transform: scale(1.04);
}
.card-media--logo {
  background: var(--paper-2);
}
.card-media--logo img {
  object-fit: contain;
  padding: 22px;
}
.card:hover .card-media--logo img {
  transform: scale(1.06);
}
.card-media--ink {
  background:
    radial-gradient(80% 60% at 20% 20%, rgba(44, 93, 214, 0.32), transparent 60%),
    var(--navy);
}
.card.is-featured .card-media {
  background: #fff;
}

/* Typographic title-card variant for projects without a strong photo asset */
.card-media--type {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 28px;
  background:
    linear-gradient(135deg, var(--paper-2) 0%, color-mix(in srgb, var(--paper-2) 70%, #fff) 100%);
  position: relative;
}
.card-media--type::before,
.card-media--type::after {
  content: "";
  position: absolute;
  background: var(--accent-soft);
  opacity: 0.55;
}
.card-media--type::before {
  top: 14px; left: 14px;
  width: 26px; height: 1.5px;
}
.card-media--type::after {
  bottom: 14px; right: 14px;
  width: 26px; height: 1.5px;
}
.card-media-title {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--heading-ink);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
  max-width: 14ch;
}
.card-media--ink .card-media-title {
  color: #fff;
}
.card-media--type.card-media--ink {
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(44, 93, 214, 0.32), transparent 60%),
    var(--navy);
}
.card-media--type.card-media--ink::before,
.card-media--type.card-media--ink::after {
  background: rgba(199, 210, 245, 0.4);
}
.card .tag {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.card h3 {
  font-size: 1.22rem;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.card p {
  color: var(--muted);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.card .meta {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}
.card.is-featured {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 55%, #fff), #fff 75%);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--rule));
}
.card a.stretched::after { content: ""; position: absolute; inset: 0; }

/* ---------- Project detail ---------- */
.project-hero {
  background:
    linear-gradient(180deg, var(--paper-2) 0%, color-mix(in srgb, var(--paper-2) 50%, var(--paper)) 100%);
  padding: 120px 0 96px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.project-hero .eyebrow { margin-bottom: 18px; }
.project-hero h1 { max-width: 18ch; }
.project-hero .lede { max-width: 60ch; margin-top: 20px; color: var(--ink-soft); }
.project-meta {
  display: flex; flex-wrap: wrap; gap: 28px 40px;
  margin-top: 40px;
  font-family: var(--sans); font-size: 0.94rem;
  color: var(--ink-soft);
}
.project-meta div { max-width: 30ch; }
.project-meta div span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
}

/* Project hero stat — single hero number with a phrase of context */
.project-hero-stat {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  max-width: 64ch;
}
.project-hero-stat-num {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 600;
  color: var(--heading-ink);
  letter-spacing: -0.022em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "kern" 1, "lnum" 1, "tnum" 1;
  margin: 0 0 10px;
}
.project-hero-stat-lbl {
  font-family: var(--sans);
  font-size: 0.96rem;
  color: var(--ink-soft);
  line-height: 1.5;
  letter-spacing: 0.005em;
  max-width: 56ch;
}
@media (max-width: 600px) {
  .project-hero-stat { margin-top: 28px; padding-top: 20px; }
  .project-hero-stat-num { font-size: clamp(2.1rem, 9vw, 3.2rem); }
  .project-hero-stat-lbl { font-size: 0.9rem; }
}

.pis { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 860px) { .pis { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.pis-block {
  border-top: 2px solid var(--navy);
  padding-top: 22px;
  position: relative;
}
.pis-block::before {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 36px; height: 2px; background: var(--accent);
}
.pis-block h3 {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 14px;
}
.pis-block p { color: var(--ink); line-height: 1.55; }

/* ---------- Pull quote ---------- */
.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  line-height: 1.4;
  color: var(--heading-ink);
  border-left: 2px solid var(--accent);
  padding: 6px 0 6px 24px;
  margin: 36px 0;
  max-width: 56ch;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.pullquote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------- Image blocks ---------- */
.fig { margin: 0; }
.fig img {
  width: 100%; height: auto;
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.fig figcaption {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.4;
  max-width: 60ch;
}

/* Image placeholder — shown when the <img> inside fails to load.
   Drop a real file at the path shown to replace the placeholder. */
.fig[data-empty] {
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(45deg,
      var(--paper-3) 0 14px,
      var(--paper-2) 14px 28px);
  border: 1.5px dashed var(--rule);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  overflow: hidden;
  padding: 16px;
}
.fig[data-empty]::before {
  content: "Drop image at " attr(data-empty);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--paper);
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  max-width: 90%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fig[data-empty="square"],
.fig.fig-square[data-empty] { aspect-ratio: 1 / 1; min-height: 280px; }
.fig[data-empty="portrait"],
.fig.fig-portrait[data-empty] { aspect-ratio: 3 / 4; min-height: 320px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.gallery img { aspect-ratio: 4/3; object-fit: cover; }

/* Phone-screenshot wall — vertical phone shots side-by-side.
   Used on Static Radio and Loom case studies. */
.phone-shots,
.static-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px 18px;
  margin-top: 36px;
  align-items: end;
}
.phone-shot,
.static-shot { margin: 0; }
.phone-shot img,
.static-shot img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
  background: #fff;
}
.phone-shot figcaption,
.static-shot figcaption {
  margin-top: 12px;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.phone-shot figcaption strong,
.static-shot figcaption strong {
  display: block;
  color: var(--heading-ink);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .phone-shots,
  .static-shots { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
}

.split { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1.2fr; gap: 56px; } }
.split.is-reverse > :first-child { order: 2; }
@media (max-width: 859px) { .split.is-reverse > :first-child { order: initial; } }

.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin: 32px 0; }
.metric {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 22px;
  border-radius: var(--radius);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s;
}
.metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--accent) 20%, var(--rule));
}
.metric .num {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--heading-ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "kern" 1, "lnum" 1, "tnum" 1;
  display: block;
}
.metric .lbl { font-family: var(--sans); font-size: 0.86rem; color: var(--muted); margin-top: 8px; line-height: 1.4; display: block; }

/* ---------- Throughlines (About) ---------- */
.throughlines { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 860px) { .throughlines { grid-template-columns: repeat(3, 1fr); } }
.throughline {
  border-top: 2px solid var(--navy);
  padding-top: 24px;
  position: relative;
}
.throughline::before {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 36px; height: 2px; background: var(--accent);
}
.throughline h3 {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  font-size: 1.18rem;
  letter-spacing: -0.012em;
}
.throughline-icon { color: var(--accent); width: 22px; height: 22px; flex-shrink: 0; }
.throughline p { color: var(--ink-soft); line-height: 1.55; }

/* ---------- Beliefs (About) ---------- */
.beliefs {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.belief {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 36px 48px;
  align-items: start;
}
.belief h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--heading-ink);
  letter-spacing: -0.014em;
  line-height: 1.22;
  text-wrap: balance;
  margin: 0;
}
.belief p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .belief {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }
}

/* ---------- Cards sub-label (Work page IBM grouping) ---------- */
.cards-sub-label {
  display: block;
  margin-top: 40px;
  color: var(--accent-2);
}

/* ---------- Engagement list (homepage Now section) ---------- */
.engagement-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}
.engagement-list li {
  position: relative;
  padding: 10px 0 10px 22px;
  color: var(--ink-soft);
  line-height: 1.5;
  border-top: 1px solid var(--rule-soft);
}
.engagement-list li:first-child { border-top-color: var(--navy); border-top-width: 1.5px; }
.engagement-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 12px;
  height: 1.5px;
  background: var(--accent);
}
.engagement-list strong { color: var(--heading-ink); }

/* ---------- At-a-glance / Fact card (About) ---------- */
.fact-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 28px 22px;
  position: relative;
  isolation: isolate;
}
.fact-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 28px;
  width: 56px; height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.fact-card .fact-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 6px 0 18px;
  display: block;
}
.fact-updated {
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--muted, var(--ink-soft));
  opacity: 0.85;
}
.outcome-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.outcome-chips li {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-2);
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "kern" 1, "lnum" 1, "tnum" 1;
  line-height: 1.3;
}
.fact-list {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: 12px 24px;
  margin: 0;
}
.fact-list dt {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, var(--ink-soft));
  align-self: start;
  padding-top: 2px;
}
.fact-list dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.45;
}
.fact-list dd strong { color: var(--heading-ink); }
.fact-list dd a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color .15s, color .15s;
}
.fact-list dd a:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }
.fact-row {
  display: contents;
}
.fact-row + .fact-row dt,
.fact-row + .fact-row dd {
  border-top: 1px solid var(--rule-soft);
  padding-top: 12px;
}
@media (max-width: 720px) {
  .fact-list { grid-template-columns: 1fr; gap: 4px; }
  .fact-row + .fact-row dt { padding-top: 14px; }
  .fact-row + .fact-row dd { border-top: 0; padding-top: 2px; }
  .fact-list dt { padding-top: 0; }
}

/* ---------- Quote wall ---------- */
.quotes { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
.quote-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 24px 26px;
  border-radius: 18px;
  transition: border-color .2s, box-shadow .25s var(--ease-out);
}
/* Speech-bubble tail — rotated square peeks out the bottom, its
   visible right + bottom borders become the tail's outline. */
.quote-card::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 32px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transform: rotate(45deg);
  transition: border-color .2s;
}
.quote-card:hover {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--rule));
  box-shadow: var(--shadow-sm);
}
.quote-card:hover::after {
  border-right-color: color-mix(in srgb, var(--accent) 18%, var(--rule));
  border-bottom-color: color-mix(in srgb, var(--accent) 18%, var(--rule));
}
/* Stagger tails so adjacent bubbles don't all point from the same spot */
.quote-card:nth-child(even)::after { left: auto; right: 32px; }
.quote-card p {
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
  font-style: italic;
}
.quote-card .who {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  font-style: normal;
}

/* ---------- Awards list ---------- */
.awards { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 720px) { .awards { grid-template-columns: repeat(3, 1fr); } }
.awards h4 { margin-bottom: 18px; color: var(--heading-ink); }
.award-item { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.award-item:first-child { padding-top: 0; }
.award-item:last-child { border-bottom: 0; }
.award-item .title { font-weight: 600; color: var(--heading-ink); font-size: 1rem; line-height: 1.3; }
.award-item .sub { font-family: var(--sans); font-size: 0.84rem; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* ---------- Footer ---------- */
.footer {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(44, 93, 214, 0.18), transparent 60%),
    var(--navy);
  color: #c7d2f5;
  padding: 88px 0 52px;
  margin-top: 120px;
}
.footer h2 { color: #fff; margin-bottom: 18px; letter-spacing: -0.018em; }
.footer p { color: rgba(199, 210, 245, 0.85); }
.footer .footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer .footer-grid { grid-template-columns: 1.4fr 1fr; gap: 48px; } }
.footer a {
  color: #fff;
  background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-image .2s;
}
.footer a:hover { background-image: linear-gradient(#fff, #fff); }
.footer .colophon {
  margin-top: 72px;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: rgba(199, 210, 245, 0.78);
  letter-spacing: 0.005em;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 10px; line-height: 1.4; }

/* ---------- Availability banner ---------- */
.avail {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(108, 240, 154, 0.08);
  color: #d4e9da;
  padding: 7px 16px 7px 14px; border-radius: 999px;
  font-family: var(--sans); font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  border: 1px solid rgba(108, 240, 154, 0.22);
  text-wrap: balance;
}
.avail .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6cf09a;
  box-shadow: 0 0 0 4px rgba(108, 240, 154, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
/* avail-link: when the whole pill is clickable, give it a comfortable tap
   target and a clear hover on the action half. Body wraps, CTA doesn't. */
.avail.avail-link {
  text-decoration: none;
  padding: 9px 18px 9px 14px;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.avail.avail-link:hover,
.avail.avail-link:focus-visible {
  background: rgba(108, 240, 154, 0.14);
  border-color: rgba(108, 240, 154, 0.40);
}
.avail-body { color: #d4e9da; }
.avail-sep { opacity: 0.6; }
.avail-updated {
  opacity: 0.65;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.avail-cta {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  border-left: 1px solid rgba(108, 240, 154, 0.28);
  padding-left: 10px;
  margin-left: 4px;
}
@media (max-width: 600px) {
  /* On narrow viewports, stack the pill: body on top, CTA on the right,
     with the dot anchored on the left across both. Keeps the tap target
     comfortable and avoids the "say / hi" line break that broke before. */
  .avail.avail-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px 10px;
    border-radius: 14px;
    padding: 10px 14px;
  }
  .avail-body { font-size: 0.82rem; line-height: 1.35; }
  .avail-cta {
    border-left: 0;
    padding-left: 8px;
    margin-left: 0;
  }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(108, 240, 154, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(108, 240, 154, 0.10); }
}

/* ---------- Photo grid (About) ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 32px; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; border: 1px solid var(--rule); }
.photo-grid figcaption { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); margin-top: 8px; }

/* ---------- Page header (non-hero pages) ---------- */
.page-header { padding: 112px 0 48px; }
.page-header .eyebrow { margin-bottom: 14px; }
.page-header h1 { max-width: 22ch; letter-spacing: -0.025em; }
.page-header p {
  color: var(--ink-soft);
  max-width: 60ch;
  margin-top: 20px;
  font-size: 1.05rem;
  line-height: 1.5;
}

/* ---------- Misc ---------- */
.kicker {
  font-family: var(--serif);
  font-style: italic;
  color: var(--heading-ink);
  font-size: 1.08rem;
  letter-spacing: -0.005em;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list .tag { background: var(--paper-3); border: 1px solid var(--rule); padding: 4px 10px; border-radius: 999px; font-family: var(--sans); font-size: 0.78rem; color: var(--muted); }

.back-link {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  transition: color .15s, gap .2s var(--ease-out);
}
.back-link:hover { color: var(--accent-2); gap: 10px; }

/* Breadcrumb — Home icon link, separator(s), current page name on one line.
   Used on every page except the home page. min-height keeps the row the
   same fixed pixel size on every page so the layout below doesn't jump
   vertically when you navigate between pages. */
.breadcrumb {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1;
  min-height: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: 0;
}
.breadcrumb a,
.breadcrumb [aria-current="page"],
.breadcrumb .sep {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.breadcrumb .bc-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.breadcrumb .bc-home:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.breadcrumb .bc-home svg { display: block; }
.breadcrumb a {
  color: var(--accent);
  transition: color .15s;
}
.breadcrumb a:hover { color: var(--accent-2); }
.breadcrumb .sep {
  color: var(--muted);
  opacity: 0.55;
  user-select: none;
}
.breadcrumb [aria-current="page"] {
  color: var(--ink-soft);
}
.breadcrumb.on-dark a { color: rgba(199, 210, 245, 0.95); }
.breadcrumb.on-dark a:hover { color: #fff; }
.breadcrumb.on-dark .sep,
.breadcrumb.on-dark [aria-current="page"] { color: rgba(199, 210, 245, 0.82); }

/* ---------- Small-screen overrides ---------- */
@media (max-width: 600px) {
  h1 { font-size: clamp(1.7rem, 5.6vw, 4.6rem); }
  .hero { padding: 56px 0 80px; }
  .hero h1, .project-hero h1, .page-header h1 { max-width: 100%; }
  .hero .venn-deco { width: clamp(180px, 50vw, 280px); right: -30px; bottom: -30px; opacity: 0.45; }
  .hero-meta { gap: 10px; margin-top: 28px; }
  .hero-meta .pill { font-size: 0.82rem; padding: 5px 12px; }
  .hero-cta { margin-top: 32px; gap: 10px; }
  .hero-cta .btn { padding: 11px 18px; }
  .section { padding: 80px 0; }
  .section-tight { padding: 56px 0; }
  .project-hero { padding: 80px 0 64px; }
  .page-header { padding: 80px 0 36px; }
  .project-meta { gap: 18px; margin-top: 28px; }
  .footer { padding: 64px 0 40px; margin-top: 80px; }
  .nav-inner { padding: 12px 22px; }
  .wrap { padding: 0 22px; }
  .wrap-wide { padding: 0 22px; }
  .pis { gap: 28px; }
  .pis-block { padding-top: 18px; }
  .throughlines { gap: 28px; }
  .project-hero .lede { font-size: 1.02rem; }
  .pullquote { padding-left: 16px; }
  .quote-card, .card { padding: 24px; }
  .metric-row { gap: 14px; }
  .metric { padding: 20px; }
  .metric .num { font-size: 1.65rem; }
}

@media (max-width: 480px) {
  .nav-brand span { display: none; }
  .nav-brand svg { width: 30px; height: 30px; }
}

/* ---------- Card "Try it" link (sibling of .meta on cards) ---------- */
/* The row owns the bottom-push + top-padding so its two children (.meta and
   .card-try) sit on a single baseline. Without this, .meta's own
   margin-top:auto / padding-top:12px would float it independently of
   .card-try, which has none — they'd render misaligned. */
.card-meta-row {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  row-gap: 6px;
}
.card-meta-row .meta {
  margin-top: 0;
  padding-top: 0;
}
.card-try {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.card-try:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.card-try:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- AI-assisted badge ---------- */
.ai-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  cursor: help;
  vertical-align: middle;
  appearance: none;
  transition: color .2s, border-color .2s, background .2s;
}
.ai-badge svg { opacity: 0.85; }
.ai-badge:hover {
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 90%, transparent);
}
.ai-badge:hover svg { opacity: 1; }
.ai-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-badge svg { width: 12px; height: 12px; }
.ai-badge-tip {
  position: absolute; left: 50%; top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
  background: var(--navy); color: #fff;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 10;
  box-shadow: 0 8px 24px -8px rgba(0, 13, 61, 0.4);
}
.ai-badge-tip::before {
  content: ""; position: absolute;
  bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: var(--heading-ink);
}
.ai-badge:hover .ai-badge-tip,
.ai-badge:focus .ai-badge-tip,
.ai-badge:focus-visible .ai-badge-tip,
.ai-badge.is-active .ai-badge-tip,
.ai-badge:active .ai-badge-tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.ai-badge.is-corner {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  font-size: 0.66rem;
  padding: 3px 8px 3px 6px;
}
.ai-badge.is-corner .ai-badge-tip {
  left: auto; right: 0;
  transform: translateX(0) translateY(-4px);
}
.ai-badge.is-corner .ai-badge-tip::before {
  left: auto; right: 14px;
  transform: translateX(0);
}
.ai-badge.is-corner:hover .ai-badge-tip,
.ai-badge.is-corner:focus .ai-badge-tip,
.ai-badge.is-corner:focus-visible .ai-badge-tip,
.ai-badge.is-corner.is-active .ai-badge-tip,
.ai-badge.is-corner:active .ai-badge-tip {
  transform: translateX(0) translateY(0);
}
.ai-badge--dark {
  color: #d4e0fb;
  background: rgba(212, 224, 251, 0.14);
  border-color: rgba(212, 224, 251, 0.35);
}
.ai-badge--dark .ai-badge-tip {
  background: #fff; color: var(--heading-ink);
}
.ai-badge--dark .ai-badge-tip::before {
  border-bottom-color: #fff;
}

/* ---------- AI brief trigger (in nav) ---------- */
.ai-brief-trigger {
  appearance: none;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 20px;
  transition: background .2s, border-color .2s, color .2s, transform .12s var(--ease);
  white-space: nowrap;
  order: 1;
}
.nav-links { order: 2; }
.nav-toggle { order: 3; }
.ai-brief-trigger:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent-2);
}
.ai-brief-trigger:active { transform: translateY(1px); }
.ai-brief-trigger svg {
  width: 12px; height: 12px;
  opacity: 0.85;
}
.ai-brief-trigger:hover svg { opacity: 1; }
.ai-brief-trigger-label { line-height: 1; }

@media (max-width: 720px) {
  .ai-brief-trigger { padding: 6px 8px; margin-right: 10px; gap: 5px; font-size: 0.7rem; }
}
@media (max-width: 480px) {
  .ai-brief-trigger {
    padding: 6px;
    margin-right: 8px;
    width: 30px; height: 30px;
    justify-content: center;
    gap: 0;
  }
  .ai-brief-trigger-label { display: none; }
  .ai-brief-trigger svg { width: 13px; height: 13px; }
}

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(4, 18, 63, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  background: var(--paper);
  border-radius: var(--radius-lg);
  max-width: 760px;
  width: 100%;
  min-width: 0; /* don't let inner pre/long lines expand the modal beyond viewport */
  /* fixed height + cap so the modal doesn't jitter when intros/preview swap on tab change */
  height: 720px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(0.98);
  transition: transform .25s var(--ease-out);
}
.modal-backdrop.is-open .modal { transform: translateY(0) scale(1); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--rule);
  background: #fff;
  flex-shrink: 0;
}
.modal-header h2 {
  font-size: 1.2rem;
  margin: 0;
  letter-spacing: -0.014em;
}
.modal-header .eyebrow { display: block; margin-bottom: 2px; }
.modal-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  width: 32px; height: 32px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s;
  flex-shrink: 0;
}
.modal-close:hover { color: var(--heading-ink); }
.modal-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.modal-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 12px 14px 10px;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--sans);
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: color .15s;
  border-radius: 0;
  margin-bottom: -1px;
}
.modal-tab:hover { color: var(--ink); }
.modal-tab .modal-tab-key {
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: inherit;
}
.modal-tab .modal-tab-sub {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.modal-tab.is-active {
  color: var(--heading-ink);
}
.modal-tab.is-active .modal-tab-sub { color: var(--accent); }
.modal-tab.is-active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}
.modal-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 2px;
}

.modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0; /* allow long <pre> lines to wrap instead of widening the modal */
}
.modal-intro {
  font-family: var(--serif);
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 14px;
  max-width: 64ch;
}
.modal-intro strong { color: var(--heading-ink); }
.modal-preview {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-soft);
  /* fixed height so the preview never grows/shrinks on tab switch — content scrolls internally */
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 0;
}
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap; /* never wrap — wrapping would change actions row height */
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--rule);
  background: #fff;
  flex-shrink: 0;
}
.modal-actions .meta {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-actions .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.modal-actions .btn { padding: 10px 18px; font-size: 0.9rem; }
.btn-dark.is-copied {
  background: #2ea860;
}

.modal-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--navy);
  color: #fff;
  font-family: var(--sans); font-size: 0.88rem;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .25s var(--ease-out);
  z-index: 300;
}
.modal-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
  .modal-backdrop { padding: 12px; }
  .modal { max-height: calc(100vh - 24px); border-radius: var(--radius); }
  .modal-header, .modal-actions { padding: 14px 18px; }
  .modal-tabs { padding: 0 18px; }
  .modal-tab { padding: 10px 10px 8px; }
  .modal-tab .modal-tab-key { font-size: 0.78rem; }
  .modal-tab .modal-tab-sub { font-size: 0.66rem; }
  .modal-body { padding: 16px 18px; }
  .modal-preview { font-size: 0.75rem; }

  /* Action row: stack the meta line above, buttons share the width below */
  .modal-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .modal-actions .meta {
    order: 1;
    text-align: center;
    font-size: 0.78rem;
  }
  .modal-actions .actions {
    order: 2;
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .modal-actions .actions .btn {
    flex: 1 1 0;
    justify-content: center;
    padding: 11px 14px;
    font-size: 0.92rem;
    white-space: nowrap;
  }
}

/* Very narrow — stack the two buttons too so each gets a comfortable tap target */
@media (max-width: 380px) {
  .modal-actions .actions { flex-direction: column; }
  .modal-actions .actions .btn { width: 100%; }
}

.affiliations { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .affiliations { grid-template-columns: repeat(2, 1fr); } }
.affil {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 26px;
  border-radius: var(--radius);
  transition: transform .25s var(--ease-out), border-color .2s, box-shadow .25s var(--ease-out);
}
.affil:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--rule));
  box-shadow: var(--shadow-sm);
}
.affil h3 { font-size: 1.18rem; margin-bottom: 4px; letter-spacing: -0.012em; }
.affil p { color: var(--muted); margin: 0 0 12px; font-size: 0.95rem; line-height: 1.5; }
.affil a { font-family: var(--sans); font-size: 0.86rem; color: var(--accent); font-weight: 500; }
.affil a:hover { color: var(--accent-2); }

/* ----------------------------------------------------------------------------
   Cycle gallery — about-page photo crossfade. Stacked <img>s, one visible at
   a time, JS swaps the .is-active class on an interval and CSS handles the
   crossfade. Scales to any number of photos: just add more <img> children.
   ---------------------------------------------------------------------------- */
.cycle-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 500 / 625;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-2);
}
.cycle-gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.cycle-gallery img.is-active { opacity: 1; }
/* While JS hasn't booted, show only the first image so there's no flash. */
.cycle-gallery img:first-child { opacity: 1; }
.cycle-gallery img:first-child:not(.is-active) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cycle-gallery img { transition: none; }
}

/* Static Radio architecture diagram — wide editorial SVG. On narrow viewports
   the SVG would squish text to unreadable; let it scroll horizontally instead. */
.static-arch { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.static-arch > svg { min-width: 720px; }
@media (max-width: 720px) {
  .static-arch::after {
    content: "Scroll to see the full diagram →";
    display: block;
    text-align: center;
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 8px;
  }
}

/* Featured Results — homepage metric grid where each metric links to its case study */
.featured-results .metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  cursor: pointer;
  text-decoration: none;
}
.featured-results .metric .lbl { margin-top: 0; }
.featured-results .metric .metric-link {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.featured-results .metric:hover .metric-link { color: var(--accent-2); }

/* Hero-claims trio — used on Platform.next to show three framings in a single
   editorial block, right under the lede. Companion to .project-hero-stat. */
.hero-claims {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 72ch;
}
@media (min-width: 720px) {
  .hero-claims { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
.hero-claim {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding-left: 14px;
}
.hero-claim::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--accent);
}
.hero-claim-eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.hero-claim-text {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--heading-ink);
  letter-spacing: -0.012em;
}
.hero-claim-sub {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- Narrow-viewport hygiene ----------
   The site held up well to ~600px; the audit below tightens spacing and
   tap targets for the band between 600px and 360px where things were
   getting cramped. Tap targets target >=44px height, the iOS HIG minimum. */
@media (max-width: 600px) {
  /* Hero — reduce the outer padding and let pills shrink rather than overflow. */
  .hero { padding: 56px 0 88px; }
  .hero .venn-deco { width: clamp(220px, 60vw, 320px); opacity: 0.32; }

  .hero-meta { gap: 8px; margin-top: 28px; }
  .hero-meta .pill {
    font-size: 0.86rem;
    padding: 6px 12px;
    /* Allow the pill text to wrap so very long pills don't overflow. */
    white-space: normal;
    text-align: left;
  }

  .hero-cta { margin-top: 32px; gap: 10px; }
  .hero-cta .btn {
    /* Single-column stack on phone for unambiguous tap targets. */
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  /* Buttons everywhere — ensure they hit the 44px minimum tap height. */
  .btn { min-height: 44px; }

  /* Project-meta items — tighten the column gap, drop max-width clamp so
     wide collaborator strings can use the full container width. */
  .project-meta { gap: 18px 24px; }
  .project-meta div { max-width: 100%; }

  /* Card grid — comfortable padding inside each card. */
  .card { padding: 22px; }

  /* Quote cards — tighten internal padding. */
  .quote-card { padding: 20px 18px; }

  /* Featured Results metrics — make each result feel tappable. */
  .featured-results .metric { padding: 20px 18px; }

  /* Hero-claims trio — already grids; the trio-on-mobile is single column,
     reduce gap. */
  .hero-claims { gap: 18px; padding-top: 22px; margin-top: 28px; }

  /* Footer-grid — keep the two columns sensible on narrow. */
  .footer-grid { gap: 32px; }
}
@media (max-width: 420px) {
  /* Very narrow phones — drop the tagline italics size a hair, give the h1
     a touch more breathing room. */
  .hero p.tagline { font-size: 1.05rem; line-height: 1.4; }
  .hero { padding: 48px 0 72px; }
}