/* =========================================================================
   AUGMENTIV — site stylesheet
   Layout concept: one 1248px column with 96px desktop gutters (matches the
   1440px artboards); left-aligned editorial headings; full-bleed bands for
   hero art and the footer.
   ========================================================================= */

:root {
  /* Brand palette (from the website guide) */
  --ink: #4B4641;          /* primary dark base */
  --paper: #F2F0EB;        /* primary light base */
  --accent: #8C7355;       /* primary accent (fills, rules, icons) */

  /* Derived tones (taken from the supplied background art) */
  --night: #2E2A27;        /* What We Do background */
  --sand-1: #DDD7CD;
  --sand-2: #C9C1B5;
  --stone: #6B645D;
  --rule: #D6D0C6;

  /* Text colors, contrast-checked (WCAG AA) */
  --text: #2E2A27;                 /* headlines on paper  */
  --text-body: #514B45;            /* prose on paper      */
  --text-muted: #6B645D;
  --accent-ink: #735D43;           /* small accent text on paper (5.5:1) */
  --accent-ink-dark: #C2A684;      /* small accent text on night/ink     */
  --text-on-dark: #F2F0EB;
  --text-on-dark-body: #D9D3C9;

  /* Type */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-prose: "Source Serif 4", Georgia, "Times New Roman", serif;

  --fs-display: clamp(2.35rem, 1.25rem + 3vw, 3.5rem);
  --fs-h2: clamp(1.8rem, 1.2rem + 1.7vw, 2.6rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;

  /* Space */
  --gutter: clamp(20px, 6.67vw, 96px);
  --maxw: 1248px;
  --section-y: clamp(72px, 9vw, 136px);
  --header-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text-body);
  font-family: var(--font-prose);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  font: 600 var(--fs-small)/1 var(--font-display); text-decoration: none;
}
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--rule); }

/* ---------- Type roles ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 20px;
  line-height: 1.5;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.012em; }
.h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.008em; }
.lead { font-size: var(--fs-lead); line-height: 1.6; text-wrap: pretty; color: var(--text-body); max-width: 34em; margin: 24px 0 0; }
p { margin: 0; }
.prose p + p { margin-top: 1em; }
.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.45;
  margin: 0 0 14px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 28px;
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--night); border-color: var(--night); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header .wrap { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header.is-solid { background: rgba(242, 240, 235, 0.96); box-shadow: 0 1px 0 var(--rule); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 22px; width: auto; }
.brand .logo-lt { display: none; }
.nav-list { list-style: none; display: flex; align-items: center; gap: clamp(24px, 3vw, 44px); margin: 0; padding: 0; }
.nav-list a { display: inline-flex; align-items: center; line-height: 1.2; }
.nav-list a {
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.03em;
  color: var(--text); text-decoration: none; padding: 8px 0; position: relative;
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.nav-list a[aria-current="page"]::after { background: var(--accent); height: 2px; }
.menu-toggle {
  display: none; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; color: var(--text);
  font: 600 var(--fs-label)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  align-items: center; gap: 10px;
}
.menu-toggle .bars { width: 22px; height: 12px; position: relative; display: inline-block; }
.menu-toggle .bars::before, .menu-toggle .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .2s ease, top .2s ease;
}
.menu-toggle .bars::before { top: 0; }
.menu-toggle .bars::after { top: 10px; }
.menu-toggle[aria-expanded="true"] .bars::before { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after { top: 5px; transform: rotate(-45deg); }

/* Header over a dark hero */
.site-header.on-dark.is-scrolled:not(.is-solid) { background: rgba(46, 42, 39, 0.94); box-shadow: 0 1px 0 rgba(242, 240, 235, 0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.site-header.on-dark:not(.is-solid) .logo-dk { display: none; }
.site-header.on-dark:not(.is-solid) .logo-lt { display: block; }
.site-header.on-dark:not(.is-solid) .nav-list a,
.site-header.on-dark:not(.is-solid) .menu-toggle { color: var(--text-on-dark); }

@media (max-width: 760px) {
  :root { --header-h: 68px; }
  .brand img { height: 18px; }
  .menu-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 auto 0;
    background: var(--paper); box-shadow: 0 1px 0 var(--rule), 0 18px 30px -18px rgba(46,42,39,.35);
    padding: 8px max(var(--gutter), env(safe-area-inset-right, 0px)) 24px max(var(--gutter), env(safe-area-inset-left, 0px));
  }
  .site-nav[hidden] { display: none !important; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list a { display: block; padding: 16px 0; font-size: 1.0625rem; border-bottom: 1px solid var(--rule); color: var(--text) !important; }
  .nav-list a::after { display: none; }
  .nav-list a[aria-current="page"] { color: var(--accent-ink) !important; }
}
@media (min-width: 761px) { .site-nav[hidden] { display: block !important; } }

/* ---------- Hero (shared) ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: max(100svh, 640px);
  display: flex; align-items: flex-start;
}
.hero-content {
  position: relative; z-index: 2; width: 100%;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(28px, 4.5vw, 64px));
}
.hero-content .inner { max-width: 640px; }

/* ---------- Home hero: layered hills that flatten on scroll ---------- */
.home-hero-track { position: relative; }
.home-hero { position: relative; height: max(100svh, 640px); min-height: 0; background: var(--paper); }
.hills {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; z-index: 1;
}
.hills path { will-change: transform; }
/* Hidden until site.js has set the starting (flat) position, so the full range never flashes before rising. */
html.js .hills:not(.is-ready) { visibility: hidden; }
.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--paper); text-decoration: none;
  font: 600 0.6875rem/1 var(--font-display); letter-spacing: 0.24em; text-transform: uppercase;
}
.scroll-cue .line { width: 1px; height: 44px; background: rgba(242,240,235,.35); position: relative; overflow: hidden; }
.scroll-cue .line::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--paper);
  animation: cue 1.8s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes cue { to { top: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .home-hero-track { height: auto; }
  .home-hero { position: relative; }
  .scroll-cue .line::after { animation: none; top: 30%; }
}
@media (max-width: 760px) {
  .hills { height: 40%; }
}

/* ---------- Home: Problem ---------- */
.problem-head { max-width: 900px; }
.points { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 56px); }
.points li { border-top: 2px solid var(--accent); padding-top: 24px; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-body); }
@media (max-width: 860px) { .points { grid-template-columns: 1fr; } }

/* ---------- Home: Solution ---------- */
.solution-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.audience { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.audience-card { border: 1px solid var(--sand-2); padding: clamp(28px, 3vw, 40px); background: transparent; }
.audience-card .card-title { color: var(--accent-ink); }
.audience-card p { color: var(--text-body); }
@media (max-width: 960px) { .solution-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .audience { grid-template-columns: 1fr; } }

/* ---------- Closing CTA (shared) ---------- */
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }

/* ---------- What We Do: How It Works (dark) ---------- */
.process {
  position: relative; background-color: var(--night); color: var(--text-on-dark-body);
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(40px, 6vw, 96px));
  padding-bottom: var(--section-y);
}
.process > .wrap { position: relative; z-index: 1; }
.process .eyebrow { color: var(--accent-ink-dark); }
/* U.S. contour map: pinned behind the section, shrinks into Denver on scroll (site.js) */
.topo-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Hidden until site.js has set the starting (folded) position, so the full map never flashes before unfolding. */
html.js .topo-wrap:not(.is-ready) .terrain, html.js .topo-wrap:not(.is-ready) .pin { visibility: hidden; }
.topo-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.topo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media (max-aspect-ratio: 4/3) {
  /* Narrow screens: keep Denver (x = 535 of 1440) at the center of the width */
  .topo { width: calc(100svh * 1440 / 810); left: 50%; transform: translateX(-37.17%); }
}
.process h1 { color: var(--text-on-dark); }
.process-grid { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.process-card {
  background: rgba(46, 42, 39, 0.58); border: 1px solid rgba(242, 240, 235, 0.14);
  padding: clamp(28px, 2.6vw, 40px); display: flex; flex-direction: column;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.process-card img { width: 52px; height: 52px; margin-bottom: 28px; }
.process-card .card-title { color: var(--text-on-dark); }
.process-card p { font-size: var(--fs-small); line-height: 1.65; color: var(--text-on-dark-body); }
@media (max-width: 1040px) { .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .process-grid { grid-template-columns: 1fr; } }

/* ---------- What We Do: Clients ---------- */
.clients-grid { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(32px, 5vw, 80px); }
.client { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; align-items: start; }
.client img { width: 64px; height: 64px; }
.client h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; margin: 4px 0 12px; }
@media (max-width: 860px) { .clients-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .client { grid-template-columns: 1fr; gap: 16px; } .client img { width: 52px; height: 52px; } }

/* ---------- What We Do: Criteria table ---------- */
.criteria-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.criteria-head { position: sticky; top: calc(var(--header-h) + 32px); }
.table-scroll { overflow-x: auto; }
.criteria { width: 100%; border-collapse: collapse; font-family: var(--font-display); border-top: 2px solid var(--ink); }
.criteria th, .criteria td { text-align: left; vertical-align: top; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.criteria th {
  width: 38%; padding-right: 24px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); line-height: 1.6;
}
.criteria td { font-size: 1rem; color: var(--text); line-height: 1.45; }
.criteria .v { display: block; font-weight: 600; }
.criteria .sub { display: block; font-size: 0.875rem; font-weight: 400; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 960px) { .criteria-grid { grid-template-columns: 1fr; } .criteria-head { position: static; } }
@media (max-width: 520px) { .criteria th { width: 42%; padding-right: 14px; } }

/* ---------- Team page background: Manhattan figure-ground plan ----------
   A fixed layer behind the whole page (z-index -1 paints above the page color, below the content).
   site.js sizes the image (full width, or taller and centered on narrow screens) and slides it up as the
   page scrolls, so the full drawing passes by between the top of the page and the footer. */
.page-bg { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.page-bg img { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; display: block; will-change: transform; }
/* Desktop: the map sits against the right edge; its left edge fades into the page color. */
.page-bg.is-right img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
/* Team page spacing: the gap between sections matches the visible gap from the logo in the header down to
   the page's first line ("About Us"), i.e. half the header height less half the logo height, plus the hero's top padding. */
.team-stage { position: relative; padding-bottom: 0; }
.team-section { --team-gap: calc(var(--header-h) / 2 - 12px + clamp(28px, 4.5vw, 64px)); padding-block: var(--team-gap) 0; }
.team-section:last-of-type { padding-bottom: var(--team-gap); }
.section.team-section + .section.team-section { border-top: 0; }
.team-stage .hero-content { position: relative; z-index: 2; }
.core-wrap { position: relative; z-index: 2; }
.core-grid { margin-top: clamp(40px, 5vw, 72px); }
/* Desktop: core team and Advisory Board cards share this width, so both rows line up. */
@media (min-width: 1100px) {
  .core-grid { max-width: calc(71vw - max(var(--gutter), (100vw - 1248px) / 2)); gap: 32px; }
}
@media (min-width: 761px) and (max-width: 1099px) { .people-grid.core-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.core-grid .person .role { color: var(--text-body); margin-bottom: 18px; }
.core-grid .person-actions { border-top-color: #CEC7BB; margin-top: auto; }   /* actions line up across a row even when titles differ in length */
.core-grid .portrait { box-shadow: 0 18px 30px -22px rgba(46, 42, 39, 0.55); }

/* ---------- Team cards ---------- */
.people-grid { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
@media (max-width: 960px) { .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .people-grid { grid-template-columns: 1fr; max-width: 420px; } }
.person { display: flex; flex-direction: column; }
.portrait {
  position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--sand-1); border: 0; padding: 0; margin: 0 0 22px;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
button.portrait { cursor: pointer; }
button.portrait:hover img { transform: scale(1.03); }
.portrait .monogram {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 clamp(2.5rem, 6vw, 4rem)/1 var(--font-display); letter-spacing: 0.06em; color: var(--paper); background: var(--stone);
}
.person h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.person .role { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }
.person-actions { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.link-action {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  font: 600 var(--fs-label)/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.link-action svg { width: 16px; height: 16px; flex: none; fill: var(--accent); }
.link-action:hover { color: var(--accent-ink); }
.link-action span { border-bottom: 1px solid transparent; padding-bottom: 2px; }
.link-action:hover span { border-bottom-color: currentColor; }

/* Team page: Contact Us */
.contact { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 16px); }
.contact-body { max-width: 44em; }
.contact-email { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.copy-email {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0 0 0 4px; padding: 0; vertical-align: -6px;
  border: 0; border-radius: 4px; background: none; color: var(--accent); cursor: pointer;
}
.copy-email:hover, .copy-email:focus-visible { background: rgba(140, 115, 85, .12); }
.copy-email svg { width: 16px; height: 16px; fill: currentColor; grid-area: 1 / 1; }
.copy-email .ic-done, .copy-email.is-done .ic-copy { visibility: hidden; }
.copy-email.is-done .ic-done { visibility: visible; }
/* "Copied" appears as a small label just above the button, so the sentence itself never shifts. */
.copy-wrap { position: relative; display: inline-block; }
.copy-status {
  position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 600 0.75rem/1 var(--font-display); letter-spacing: .06em; color: var(--paper); background: var(--ink); padding: 5px 8px; border-radius: 4px;
}
.copy-status:empty { display: none; }

/* Advisory Board: photos 80% of the core-team photo width (--core-w set by site.js), slightly smaller type */
.people-grid.board-grid { grid-template-columns: repeat(auto-fill, min(100%, calc(var(--core-w, 296px) * 0.8))); }
.board-grid .person h3 { font-size: 1.125rem; }
.board-grid .person .role { font-size: 0.875rem; }
.board-grid .person-actions { column-gap: 16px; }
/* (unused) earlier compact grid: photos 75% of the core-team photo width */
.people-grid.compact { grid-template-columns: repeat(auto-fill, min(100%, calc(var(--core-w, 296px) * 0.75))); gap: clamp(24px, 3vw, 40px); max-width: none; }
.people-grid.compact .person h3 { font-size: 1.125rem; }
.people-grid.compact .person .role { font-size: 0.875rem; }
.person .role .role-line { white-space: nowrap; }   /* titles with a set line break keep each line whole */
.person .role .role-indent { display: inline-block; padding-left: 1em; }   /* continuation line of a two-line title */
.people-grid.compact .portrait { margin-bottom: 18px; }

/* ---------- Bio dialog ---------- */
.bio-dialog {
  width: min(720px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; border: 0;
  background: var(--paper); color: var(--text-body); box-shadow: 0 30px 80px -20px rgba(46,42,39,.5);
}
.bio-dialog::backdrop { background: rgba(46, 42, 39, 0.72); }
.bio-dialog[open] { animation: dlg-in .22s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .bio-dialog[open] { animation: none; } }
.bio-inner { max-height: inherit; }
.bio-body { padding: clamp(40px, 5vw, 56px); overflow-y: auto; max-height: min(86vh, 900px); }
.bio-body h2 { font-size: 1.75rem; font-weight: 700; }
.bio-body .role { font-family: var(--font-display); font-weight: 500; color: var(--accent-ink); margin: 6px 0 24px; font-size: var(--fs-small); }
.bio-close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; cursor: pointer;
  background: var(--paper); color: var(--text); display: grid; place-items: center;
}
.bio-close svg { width: 18px; height: 18px; stroke: currentColor; }
@media (max-width: 680px) { .bio-body { padding-top: 56px; } }


/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--text-on-dark-body); padding-block: clamp(56px, 7vw, 96px); padding-bottom: calc(clamp(48px, 6vw, 80px) + env(safe-area-inset-bottom, 0px)); }
.footer-top {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); column-gap: 48px;
  grid-template-areas: "brand nav contact" "copy nav contact";   /* copyright sits under the logo and tagline */
}
.footer-brand { grid-area: brand; }
.footer-col:nth-of-type(2) { grid-area: nav; }
.footer-col:nth-of-type(3) { grid-area: contact; }
.footer-brand img { height: 84px; width: auto; }
.footer-brand .tagline { margin: 22px 0 0; font: 600 var(--fs-label)/1.6 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: #CDB89A; max-width: 26em; }
.footer-col h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-on-dark); margin: 0 0 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { font-family: var(--font-display); font-size: var(--fs-small); color: var(--text-on-dark-body); text-decoration: none; }
.footer-col a:hover { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 4px; }
.footer-top .copyright { grid-area: copy; margin: 28px 0 0; font: 500 0.8125rem/1.5 var(--font-display); color: var(--sand-2); }
@media (max-width: 760px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 48px; grid-template-areas: "brand brand" "nav contact" "copy copy"; }   /* phones: copyright last */
  .footer-top .copyright { margin-top: 0; }
  .footer-brand img { height: 68px; }
}
/* Very narrow phones (under ~400px): stack the two footer columns so the email address never forces sideways scrolling. */
@media (max-width: 400px) { .footer-top { grid-template-columns: minmax(0, 1fr); row-gap: 36px; grid-template-areas: "brand" "nav" "contact" "copy"; } }

/* ---------- 404 ---------- */
.notfound { min-height: 70svh; display: flex; align-items: center; padding-top: var(--header-h); }
.notfound .inner { max-width: 560px; }
.notfound .btn { margin-top: 32px; }
@media (max-width: 760px) { .people-grid.core-grid { grid-template-columns: 1fr; max-width: 420px; } }
@media (max-width: 760px) { .people-grid.board-grid { grid-template-columns: min(100%, calc(var(--core-w, 296px) * 0.8)); } }   /* Advisory Board stays at 80% on phones */

/* ---------- Home link with the "A" mark ---------- */
.nav-list a.nav-home { display: inline-flex; align-items: center; gap: 9px; }
.nav-home img { height: 16px; width: auto; flex: none; transition: transform .2s ease; }
.nav-home:hover img { transform: translateY(-1px); }
.nav-home .ic-lt { display: none; }
.site-header.on-dark:not(.is-solid) .nav-home .ic-dk { display: none; }
.site-header.on-dark:not(.is-solid) .nav-home .ic-lt { display: block; }
@media (max-width: 760px) { .nav-list a.nav-home { display: flex; } .nav-home img { height: 18px; } }