/* ==========================================================================
   KEMS Development Corp — static site
   Design system: deep navy base (#0F2340 brand mark), warm brass accent,
   editorial serif display. Dark-elegant, sibling to the Makyson system.
   ========================================================================== */

/* Self-hosted fonts (were loaded from Google Fonts, which sent every visitor's
   IP address to Google). Both are under the SIL Open Font License; the
   license texts sit beside them in assets/fonts/.
   - Latin subset only: English copy plus the curly quotes, dashes and the
     copyright sign the site uses, all inside these ranges.
   - Inter is ONE variable file covering every weight. Google's CSS lists it
     once per weight with the same URL; saving a copy per weight would make
     visitors download the same 48 KB four times.
   - Instrument Serif italic is not loaded: nothing on the site uses it. */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-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: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-var.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;
}

:root {
  /* Brand */
  --navy: #0f2340;
  --navy-lift: #17304f;
  /* Gold carries nearly every small uppercase label on the site. The original
     #c8a672 measured 8.6:1 but reads flat at 10-11px on a phone; these lift it
     without losing the brass character. --brass-deep was 5.0:1, now ~6.4. */
  --brass: #d4b482;
  --brass-bright: #f0d9ab;
  --brass-deep: #ac8b50;

  /* Surfaces (dark). ink-2/3/4 carry a slight navy lift — at the original
     values the section alternation was invisible on a phone screen, so every
     page read as one unbroken block of black. --paper is the light relief
     band used once per page. */
  --ink: #080b12;
  --ink-2: #101624;
  --ink-3: #182031;
  --ink-4: #222d42;
  --paper: #ece6d9;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);

  /* Text. --fg-3 carries hints and captions at 13-14px; at the original
     #7c8698 it measured 4.79:1 on --ink-3, which clears AA on paper but reads
     as murky on a phone in daylight. Lifted to ~6.5:1. */
  --fg: #f4f5f7;
  --fg-2: #b8c0cc;
  --fg-3: #97a1b1;

  /* Type */
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Metrics */
  --wrap: 1280px;
  --gut: clamp(20px, 5vw, 60px);
  --r: 3px;
  --nav-h: 78px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Text that always sits on a photo or a navy panel, in either theme. Hero
   copy, project card captions and the CTA band are white-on-image regardless
   of light/dark, so they must NOT follow --fg. */
:root {
  --on-dark: #f4f5f7;
  --on-dark-2: #cbd2dd;
}

/* Desktop: ease the gold back a step. The brighter accent pair was tuned for
   11-13px phone type; at desktop sizes the same values run hot across many
   accents at once (eyebrows, buttons, card numbers, link-arrows). Phones keep
   the brighter set from :root. */
@media (min-width: 761px) {
  :root {
    --brass: #c9a97a;
    --brass-bright: #e6d0a4;
  }
}

/* ------------------------------------------------------------ light mode -- */
/* Same design, inverted surfaces. Gold has to go DARKER here: #c9a97a on white
   is 1.9:1 and unreadable — these values land 4.6:1+. The stats band flips the
   other way (navy on light) so each theme keeps one contrasting relief band. */
:root[data-theme="light"] {
  --ink: #fbf9f5;
  --ink-2: #f3efe7;
  --ink-3: #ece7dc;
  --ink-4: #e1dacc;

  --fg: #131a2b;
  --fg-2: #3e4a63;
  --fg-3: #5f6b85;

  /* Measured, not guessed: #90702f put 11px eyebrows and link-arrows at
     4.39:1 — under AA. These land ~5.6:1, and white-on-brass buttons ~5.9:1. */
  --brass: #7d6026;
  --brass-bright: #5e4818;
  --brass-deep: #a8853f;

  --line: rgba(15, 35, 64, 0.13);
  --line-strong: rgba(15, 35, 64, 0.26);
}

/* Buttons: brass fill needs light text once the brass itself is dark. */
:root[data-theme="light"] .btn--primary { color: #fff; }
:root[data-theme="light"] .tab[aria-selected="true"],
:root[data-theme="light"] .toggle input:checked + span,
:root[data-theme="light"] .wiz__steps li.is-done b { color: #fff; }
:root[data-theme="light"] ::selection { background: var(--brass); color: #fff; }
:root[data-theme="light"] .skip { color: #fff; }

/* Scrolled nav + drawer pick up the light surface. */
:root[data-theme="light"] .nav.is-solid,
:root[data-theme="light"] body.no-hero .nav { background: rgba(251, 249, 245, 0.92); }
:root[data-theme="light"] .drawer {
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 60%);
  border-top-color: var(--brass-deep);
}

/* Stats band inverts: navy panel on a light page. */
:root[data-theme="light"] .stats--paper .stat:not(.stat--cta) {
  background: var(--navy);
  outline-color: rgba(255, 255, 255, 0.12);
}
:root[data-theme="light"] .stats--paper .stat__n { color: var(--brass-deep); }
:root[data-theme="light"] .stats--paper .stat:not(.stat--cta) .stat__l { color: var(--on-dark-2); }

/* Partner logos are dark-on-white originals — in light mode show them as-is. */
:root[data-theme="light"] .marquee__item img {
  filter: none;
  mix-blend-mode: multiply;
  opacity: 0.78;
}

/* Regions that stay light-on-dark in BOTH themes ------------------------- */
.hero__inner,
.hero__inner .lede,
.cta-band .wrap,
.cta-band .lede,
.pcard__body,
.section--navy,
.stat--cta,
.stat--cta .stat__l,
.lb { color: var(--on-dark); }

.hero__inner .lede,
.cta-band .lede,
.stat--cta .stat__l { color: var(--on-dark-2); }

.hero .eyebrow,
.cta-band .eyebrow,
.section--navy .eyebrow,
.pcard__loc,
.stat--cta .link-arrow { color: var(--brass-bright); }
:root[data-theme="light"] .hero .eyebrow,
:root[data-theme="light"] .cta-band .eyebrow,
:root[data-theme="light"] .section--navy .eyebrow,
:root[data-theme="light"] .pcard__loc,
:root[data-theme="light"] .stat--cta .link-arrow { color: #e6d0a4; }
.hero .eyebrow::before,
.cta-band .eyebrow::before,
.section--navy .eyebrow::before { background: currentColor; }

/* Nav sits over the hero photo until it solidifies — keep it light there. */
body:not(.no-hero) .nav:not(.is-solid) .nav__link { color: rgba(255, 255, 255, 0.82); }
body:not(.no-hero) .nav:not(.is-solid) .nav__link:hover,
body:not(.no-hero) .nav:not(.is-solid) .nav__link[aria-current="page"] { color: #fff; }
:root[data-theme="light"] body:not(.no-hero) .nav:not(.is-solid) .nav__burger { border-color: rgba(255, 255, 255, 0.4); }
:root[data-theme="light"] body:not(.no-hero) .nav:not(.is-solid) .nav__burger span { background: #fff; }
/* Ed's logo comes in white and navy. White by default (dark theme, and the
   nav over a hero photo); navy on a light solid nav and the light footer. */
.logo-n { display: none; }
:root[data-theme="light"] .nav.is-solid .nav__logo .logo-w,
:root[data-theme="light"] .foot__logo .logo-w { display: none; }
:root[data-theme="light"] .nav.is-solid .nav__logo .logo-n,
:root[data-theme="light"] .foot__logo .logo-n { display: inline; }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* `height: auto` is load-bearing, not cosmetic. Every <img> carries width and
   height attributes for layout stability, and those attributes apply as CSS
   presentational hints — so without this, any image whose CSS width is 100%
   gets locked to the literal attribute height and stretches. Rules that need a
   fixed height (.hero__media, .pcard, .gallery, logos) are more specific and
   still win. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h4, h5 {
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--brass); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brass);
  color: var(--ink);
  padding: 12px 20px;
  font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: 860px; }

.section { padding-block: clamp(76px, 10vw, 140px); }
.section--tight { padding-block: clamp(56px, 7vw, 92px); }
.section--alt { background: var(--ink-2); border-block: 1px solid var(--line); }
.section--navy { background: linear-gradient(180deg, var(--navy) 0%, #0b1a30 100%); }

.eyebrow {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 20px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--brass);
  flex: none;
}
.eyebrow--center { justify-content: center; }

.h-xl { font-size: clamp(44px, 8vw, 104px); }
.h-lg { font-size: clamp(36px, 5.4vw, 70px); }
.h-md { font-size: clamp(30px, 3.8vw, 46px); }

.lede {
  font-size: clamp(17px, 1.7vw, 21px);
  color: var(--fg-2);
  line-height: 1.7;
  max-width: 62ch;
}

.muted { color: var(--fg-2); }
.center { text-align: center; }
.mt-l { margin-top: clamp(36px, 5vw, 64px); }

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 28px;
  /* <button class="btn btn--ghost"> otherwise inherits the UA's buttonface
     grey — visible as a pale box behind the wizard's Back button. */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--brass); color: var(--ink); }
.btn--primary:hover { background: var(--brass-bright); }

.btn--ghost { border-color: var(--line-strong); color: var(--fg); }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass-bright); }

/* Secondary/destructive utility control. Sits in a dark navy box rather than
   floating as bare light text, matching the .to-top control. */
.btn--quiet {
  background: var(--navy);
  color: var(--fg-2);
  border-color: var(--line-strong);
  padding: 12px 20px;
}
.btn--quiet:hover {
  background: var(--navy-lift);
  border-color: var(--brass);
  color: var(--brass-bright);
  transform: none;
}

.btn .arw { transition: transform 0.3s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(200, 166, 114, 0.32);
  transition: color 0.25s, border-color 0.25s;
}
.link-arrow:hover { color: var(--brass-bright); border-color: var(--brass-bright); }
.link-arrow svg { transition: transform 0.3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------------- nav -- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
              backdrop-filter 0.35s;
  border-bottom: 1px solid transparent;
}
.nav.is-solid,
body.no-hero .nav {
  background: rgba(8, 11, 18, 0.9);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--line);
}
.nav__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__logo { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.nav__logo img { height: 30px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-2);
  position: relative;
  padding-block: 6px;
  transition: color 0.25s;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--brass);
  transition: width 0.3s var(--ease);
}
/* Five items since "Upcoming Projects" (2026-10-16): labels never wrap, and
   the spacing tightens before the phone menu takes over at 900px. */
.nav__link { white-space: nowrap; }
@media (max-width: 1240px) { .nav__links { gap: 24px; } .nav__inner { gap: 24px; } }
@media (max-width: 1040px) { .nav__links { gap: 16px; } .nav__inner { gap: 16px; } .nav__link { letter-spacing: 0.1em; } }
.nav__link:hover { color: var(--fg); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--fg); }

.nav__cta { padding: 11px 22px; font-size: 11px; }

/* Slides away when scrolling down, returns the moment you scroll up — gives
   back a chunk of screen on phones without losing the menu. */
.nav { transform: translateY(0); transition: transform 0.38s var(--ease),
       background 0.35s var(--ease), border-color 0.35s var(--ease); }
.nav.is-hidden { transform: translateY(-100%); }

.nav__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  white-space: nowrap;
  transition: color 0.22s;
}
.nav__tel:hover { color: var(--brass-bright); }
.nav__tel svg { color: var(--brass); flex: none; }
body:not(.no-hero) .nav:not(.is-solid) .nav__tel { color: rgba(255, 255, 255, 0.82); }
body:not(.no-hero) .nav:not(.is-solid) .nav__tel:hover { color: #fff; }
@media (max-width: 1120px) { .nav__tel span { display: none; } }

.theme-toggle {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--fg-2);
  cursor: pointer;
  transition: color 0.22s, border-color 0.22s, background 0.22s;
}
.theme-toggle:hover { color: var(--brass-bright); border-color: var(--brass); }
body:not(.no-hero) .nav:not(.is-solid) .theme-toggle { color: rgba(255, 255, 255, 0.82); border-color: rgba(255, 255, 255, 0.32); }
body:not(.no-hero) .nav:not(.is-solid) .theme-toggle:hover { color: #fff; border-color: #fff; }
/* Each icon shows only in its own theme. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
@media (max-width: 1179px) { .nav__tel { display: none; } }

.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  cursor: pointer;
  position: relative;
}
.nav__burger span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.5px;
  background: var(--fg);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 22px; }
.nav__burger span:nth-child(3) { top: 27px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: var(--nav-h) 0 auto;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  transform: translateY(-120%);
  transition: transform 0.42s var(--ease);
  z-index: 99;
  padding: 12px var(--gut) 32px;
}
.drawer.is-open { transform: translateY(0); }
/* Scoped to the nav links only. The CTA below is also an <a>, and a bare
   `.drawer a` rule beat `.btn`, rendering the button label in 27px serif while
   it kept the button's uppercase and letter-spacing. */
.drawer > a:not(.btn) {
  display: block;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 27px;
}
.drawer .btn {
  margin-top: 26px;
  width: 100%;
  justify-content: center;
  /* Long label, narrow screen: let it wrap instead of overflowing. */
  text-align: center;
  text-wrap: balance;
  padding-inline: 18px;
}

@media (max-width: 1179px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
}

/* ------------------------------------------------------------------ hero -- */

.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: flex-end;
  /* Floor of 76px, not 56: the address caption lives in this padding, and on
     a 320px phone a long address wraps to two lines. */
  padding-bottom: clamp(76px, 8vw, 104px);
  padding-top: calc(var(--nav-h) + 40px);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Optional hero clip. site.js injects a <video> only when the visitor isn't
   on save-data / reduced-motion; the still image stays underneath as poster
   and fallback, and the ::after scrim (last child) still paints on top. */
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero__media video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__media video { display: none; } }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Strong scrim only where the text sits (bottom); the midfield stays open
     so the photography actually reads. Was 0.72 / 0.34 / 0.94 — heavy enough
     that on a phone the hero was effectively a black screen. */
  background:
    linear-gradient(180deg, rgba(8, 11, 18, 0.62) 0%, rgba(8, 11, 18, 0.2) 40%, rgba(8, 11, 18, 0.92) 100%),
    linear-gradient(90deg, rgba(8, 11, 18, 0.45) 0%, transparent 58%);
}
@media (max-width: 760px) {
  /* Phones: drop the side scrim (text spans the full width anyway) and open
     the midfield further. */
  .hero__media::after {
    background: linear-gradient(180deg, rgba(8, 11, 18, 0.55) 0%, rgba(8, 11, 18, 0.14) 42%, rgba(8, 11, 18, 0.93) 100%);
  }
}
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 26px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero--page { min-height: min(66svh, 620px); }
.hero--page h1 { max-width: 20ch; }

.scroll-cue {
  position: absolute;
  bottom: 28px;
  right: var(--gut);
  z-index: 1;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--brass), transparent);
}
@media (max-width: 700px) { .scroll-cue { display: none; } }

/* ----------------------------------------------------------------- stats -- */

/* Hairlines live on the TILES, not on the container.
   Painting them as a container background with 1px gaps means any row that
   isn't full exposes that background as a blank light-grey box. Outlines are
   drawn per tile and overlap in the gap, so the grid reads identically while
   empty cells simply show nothing. */
/* Explicit column counts rather than auto-fit.
   auto-fit picks the column count itself, so nothing in CSS knows how many
   cells are left over on the final row — which is why the CTA tile sat in a
   short row with dead space beside it. Fixed counts let the CTA span whatever
   remains, so every row is always full. Counts are chosen so 4 stats + the
   CTA divide evenly at each step. */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border-block: 1px solid var(--line);
}
/* 4 across only once each tile clears ~200px — below that the longer stat
   labels wrap into a thin column. */
/* --n is set inline by the build to the number of confirmed stats, so the
   row is always full whether Ed has signed off on 3 figures or 5. */
@media (min-width: 880px) { .stats { grid-template-columns: repeat(var(--n, 4), 1fr); } }
@media (max-width: 479px) { .stats { grid-template-columns: 1fr; } }
/* Two columns with an odd number of stats would leave a hole beside the last
   one (the CTA tile always starts a fresh row). Let that last stat span both. */
@media (min-width: 480px) and (max-width: 879px) {
  .stats > .stat:not(.stat--cta):nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }
}
.stat {
  background: var(--ink);
  padding: clamp(30px, 4vw, 46px) clamp(20px, 3vw, 36px);
  outline: 1px solid var(--line);
}

/* Branded filler tile — turns a would-be gap into a call to action.
   It always claims the rest of whatever row it lands in, so there is never
   dead space beside it. */
.stat--cta {
  grid-column: 1 / -1;
  background: linear-gradient(150deg, var(--navy) 0%, #0b1a30 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  transition: background 0.3s var(--ease);
}
/* Once there's room, lay it out along the row instead of stacking — a
   full-width tile with a stacked column in the middle reads as empty. */
@media (min-width: 700px) {
  .stat--cta {
    flex-direction: row;
    align-items: center;
    gap: clamp(22px, 3vw, 44px);
  }
  .stat--cta .stat__l { flex: 1; }
  .stat--cta .link-arrow { align-self: center; margin-left: auto; flex: none; }
}

.stat--cta:hover { background: linear-gradient(150deg, var(--navy-lift) 0%, var(--navy) 100%); }

/* Text wordmark — sharp at every pixel density, unlike the lossy logo bitmap. */
.cta-mark {
  flex: none;
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(23px, 2.3vw, 32px);
  letter-spacing: 0.13em;
  line-height: 1;
  color: #fff;
}
.cta-mark > span {
  display: block;
  margin-top: 8px;
  font-size: clamp(9.5px, 0.75vw, 11px);
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--brass);
}
.stat--cta .stat__l {
  margin: 0;
  color: var(--fg-2);
  font-size: clamp(15px, 1.4vw, 18.5px);
  line-height: 1.55;
  letter-spacing: 0;
  max-width: 52ch;
}
.stat--cta .link-arrow { align-self: flex-start; }

/* Light "paper" variant — one bright relief moment per page so the dark theme
   doesn't read as a single unbroken block. Matters most on phones, where every
   section stacks into one long dark column. Remove the modifier class in
   tools/pages/{home,about}.js to go back to all-dark. */
.stats--paper { border-block: 0; }
.stats--paper .stat:not(.stat--cta) {
  background: var(--paper);
  outline-color: rgba(15, 35, 64, 0.16);
}
.stats--paper .stat__n { color: var(--navy); }
.stats--paper .stat:not(.stat--cta) .stat__l { color: #55617a; }
.stats--paper .stat--cta { outline-color: rgba(15, 35, 64, 0.16); }
.stat__n {
  font-family: var(--display);
  font-size: clamp(42px, 5.4vw, 66px);
  line-height: 1;
  color: var(--brass);
  letter-spacing: -0.02em;
}
.stat__l {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
  letter-spacing: 0.05em;
}
.section--alt .stat { background: var(--ink-2); }

/* ----------------------------------------------------------------- cards -- */

.grid { display: grid; gap: clamp(20px, 2.4vw, 30px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }

.card {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(28px, 3.4vw, 40px);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.card:hover { border-color: var(--line-strong); }
.card__n {
  font-family: var(--display);
  font-size: 15px;
  color: var(--brass);
  letter-spacing: 0.1em;
}
.card h3, .card h4 { margin: 14px 0 12px; font-size: 20px; }
.card p { color: var(--fg-2); font-size: 15.5px; }

/* ------------------------------------------------------------- portfolio -- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.filter {
  padding: 10px 20px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-2);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.filter:hover { color: var(--fg); border-color: var(--fg-3); }
.filter[aria-pressed="true"] {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}
.pcard {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--ink-3);
  aspect-ratio: 4 / 3;
}
.pcard.is-hidden { display: none; }
.pcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.85s var(--ease), filter 0.5s;
  filter: saturate(0.9);
}
.pcard:hover img { transform: scale(1.055); filter: saturate(1.05); }
.pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(8, 11, 18, 0.92) 100%);
  pointer-events: none;
}
.pcard__body {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: clamp(20px, 2.6vw, 30px);
}
.pcard__loc {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brass);
}
.pcard__t {
  font-family: var(--display);
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.1;
  margin-top: 8px;
}
.pcard__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(8, 11, 18, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-strong);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pcard--featured { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (max-width: 760px) { .pcard--featured { grid-column: span 1; aspect-ratio: 4 / 3; } }

.empty-note {
  padding: 60px 0;
  text-align: center;
  color: var(--fg-3);
}

/* --------------------------------------------------------------- project -- */

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(24px, 3vw, 44px);
  padding-block: clamp(30px, 4vw, 48px);
  border-block: 1px solid var(--line);
}
.spec__k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 12px;
}
.spec__v { color: var(--fg-2); font-size: 16px; }

.pull {
  border-left: 2px solid var(--brass);
  padding: 8px 0 8px clamp(22px, 3vw, 38px);
  margin-block: clamp(36px, 5vw, 60px);
}
.pull q, .pull__q {
  display: block;
  font-family: var(--display);
  font-size: clamp(23px, 3vw, 35px);
  line-height: 1.28;
  quotes: "\201C" "\201D";
}
.pull cite {
  display: block;
  margin-top: 20px;
  font-family: var(--body);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.gallery button {
  padding: 0;
  border: 0;
  background: var(--ink-3);
  border-radius: var(--r);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 3 / 2;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.gallery button:hover img { transform: scale(1.05); }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: clamp(30px, 4vw, 48px);
  border-top: 1px solid var(--line);
}

/* -------------------------------------------------------------- lightbox -- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 7, 11, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.lb.is-open { display: flex; }
.lb img { max-width: 100%; max-height: 86svh; object-fit: contain; border-radius: var(--r); }
.lb__close, .lb__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.25s;
}
.lb__close:hover, .lb__nav:hover { background: rgba(255, 255, 255, 0.16); }
.lb__close { top: 22px; right: 22px; }
.lb__nav--prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb__nav--next { right: 22px; top: 50%; transform: translateY(-50%); }
.lb__cap {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 760px);
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-dark);
}

.lb__count {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}
@media (max-width: 640px) {
  .lb__nav { width: 42px; height: 42px; }
  .lb__nav--prev { left: 10px; }
  .lb__nav--next { right: 10px; }
}

/* ----------------------------------------------------------------- media -- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.split__media img { border-radius: var(--r); width: 100%; }
.split--reverse .split__media { order: -1; }
@media (max-width: 760px) { .split--reverse .split__media { order: 0; } }

.figure-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.figure-strip img { border-radius: var(--r); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

/* ------------------------------------------------------------ leadership -- */

.people { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.person { background: var(--ink-2); padding: clamp(26px, 3.4vw, 42px); }
.person__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.person h3, .person h4 { font-size: clamp(21px, 2.4vw, 27px); font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; }
.person__role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brass);
}
.person p { margin-top: 16px; color: var(--fg-2); font-size: 15.5px; max-width: 78ch; }
.person__meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  padding: 6px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--fg-2);
}
.person ul { margin: 14px 0 0; padding-left: 18px; color: var(--fg-2); font-size: 15.5px; }
.person li { margin-bottom: 5px; }

/* ---------------------------------------------------------------- process -- */

.steps { counter-reset: s; display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.step {
  background: var(--ink);
  padding: clamp(26px, 3.2vw, 38px) 0;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  transition: background 0.3s;
}
.step:hover { background: var(--ink-2); }
.step::before {
  counter-increment: s;
  content: "0" counter(s);
  font-family: var(--display);
  font-size: 30px;
  color: var(--brass-deep);
  line-height: 1;
  padding-top: 4px;
}
.step h3, .step h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.step p { color: var(--fg-2); font-size: 16px; max-width: 70ch; }
.section--alt .step { background: var(--ink-2); }
.section--alt .step:hover { background: var(--ink-3); }
@media (max-width: 560px) {
  .step { grid-template-columns: 1fr; gap: 12px; }
  .step::before { font-size: 24px; }
}

/* ----------------------------------------------------------------- forms -- */

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.tab {
  padding: 13px 22px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-2);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.tab:hover { color: var(--fg); border-color: var(--fg-3); }
.tab[aria-selected="true"] { background: var(--brass); border-color: var(--brass); color: var(--ink); }

.panel[hidden] { display: none; }

.field { margin-bottom: 20px; }
.field > label,
.fieldset > legend {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 9px;
  padding: 0;
}
.field .req { color: var(--brass); margin-left: 3px; }
.field .hint { display: block; margin-top: 7px; font-size: 13px; color: var(--fg-3); letter-spacing: 0; text-transform: none; font-weight: 400; }

.input, .select, .textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--ink-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  transition: border-color 0.25s, background 0.25s;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brass);
  background: var(--ink-4);
}
.textarea { min-height: 132px; resize: vertical; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: #e2696a; }
.err { display: none; margin-top: 7px; font-size: 13px; color: #e2696a; letter-spacing: 0; text-transform: none; font-weight: 400; }
.field.is-invalid .err { display: block; }

.row { display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.fieldset { border: 0; margin: 0 0 20px; padding: 0; }
.toggle-group { display: flex; gap: 8px; flex-wrap: wrap; }
.toggle {
  position: relative;
  display: inline-flex;
}
.toggle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.toggle span {
  padding: 11px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  transition: all 0.22s var(--ease);
}
.toggle input:checked + span { background: var(--brass); border-color: var(--brass); color: var(--ink); font-weight: 600; }
.toggle input:focus-visible + span { outline: 2px solid var(--brass-bright); outline-offset: 2px; }

/* The securities attorneys' short disclaimer beside the investor form. */
.form-disclaimer {
  margin: 4px 0 22px;
  font-size: 13.5px;
  color: var(--fg-3);
  line-height: 1.6;
}

.form-note {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  font-size: 13.5px;
  color: var(--fg-3);
  line-height: 1.6;
}

.form-error {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #e2696a;
  border-radius: var(--r);
  font-size: 14.5px;
  color: var(--fg);
}
.form-error[hidden] { display: none; }
.form-error a { color: var(--brass-bright); text-decoration: underline; }

.form-done {
  display: none;
  padding: clamp(34px, 5vw, 56px);
  border: 1px solid var(--brass-deep);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(200, 166, 114, 0.09), transparent);
  text-align: center;
}
.form-done.is-shown { display: block; }
.form-done h2, .form-done h3 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 14px; }
.form-done p { color: var(--fg-2); max-width: 52ch; margin-inline: auto; }
.form-done__tick {
  width: 54px;
  height: 54px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 1px solid var(--brass);
  display: grid;
  place-items: center;
  color: var(--brass);
}

/* -------------------------------------------------------------- marquee -- */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 6px;
  /* Fade the cut edges so names don't pop in and out at the boundary. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-slide 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  padding-inline: clamp(9px, 1.5vw, 20px);
  font-family: var(--display);
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.1;
  color: var(--fg-2);
  white-space: nowrap;
  transition: color 0.25s;
}
/* Partner logos are dark-on-white originals from the old site's logo wall.
   invert() flips them white; screen-blending drops the leftover box so only
   the mark floats on the dark background. */
.marquee__item img {
  height: clamp(34px, 4vw, 52px);
  width: auto;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.82;
  transition: opacity 0.25s;
}
.marquee__item:hover img { opacity: 1; }
.marquee__item::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass);
}
.marquee__item:hover { color: var(--fg); }

/* One full copy of the list is exactly half the track, so -50% loops seamlessly. */
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* No motion: drop the duplicate and let the names wrap as a static list. */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee__list { flex-wrap: wrap; justify-content: center; gap: 4px 0; }
  .marquee__track > [aria-hidden="true"] { display: none; }
}

/* ---------------------------------------------------------- contact card -- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 940px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 34px);
  position: sticky;
  top: calc(var(--nav-h) + 28px);
}
@media (max-width: 940px) { .contact-card { position: static; } }

.contact-card > h3 {
  font-size: clamp(24px, 2.6vw, 30px);
  margin-bottom: 4px;
}

.cblock { padding-block: 20px; border-bottom: 1px solid var(--line); }
.cblock:last-child { border-bottom: 0; padding-bottom: 0; }

.cblock__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 9px;
}
.cblock__value {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
}
.cblock__value a { transition: color 0.22s; }
.cblock__value a:hover { color: var(--brass-bright); }
.cblock__plain {
  margin: 0;
  color: var(--fg-2);
  font-size: 15.5px;
  line-height: 1.7;
  font-style: normal;
}
.cblock__hint { margin: 8px 0 0; font-size: 13.5px; color: var(--fg-3); line-height: 1.6; }
.cblock .foot__social { margin-top: 4px; }

/* ---------------------------------------------------------------- wizard -- */

.wiz { display: grid; grid-template-columns: 248px 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
/* Grid items default to min-width:auto, which lets the horizontally scrolling
   step rail widen the page instead of scrolling inside itself. */
.wiz > * { min-width: 0; }
@media (max-width: 900px) { .wiz { grid-template-columns: 1fr; } }

.wiz__rail { position: sticky; top: calc(var(--nav-h) + 28px); }
@media (max-width: 900px) { .wiz__rail { position: static; } }

.wiz__bar {
  height: 3px;
  background: var(--ink-4);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 26px;
}
.wiz__bar i { display: block; height: 100%; background: var(--brass); width: 0; transition: width 0.45s var(--ease); }

.wiz__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.wiz__steps li { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: var(--r); font-size: 13.5px; color: var(--fg-3); transition: all 0.28s; }
.wiz__steps li b {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--body);
}
.wiz__steps li.is-active { color: var(--fg); background: var(--ink-3); }
.wiz__steps li.is-active b { border-color: var(--brass); color: var(--brass); }
.wiz__steps li.is-done { color: var(--fg-2); }
.wiz__steps li.is-done b { background: var(--brass); border-color: var(--brass); color: var(--ink); }
@media (max-width: 900px) {
  .wiz__steps { grid-auto-flow: column; overflow-x: auto; gap: 8px; padding-bottom: 6px; }
  .wiz__steps li { flex-direction: column; gap: 7px; min-width: 84px; text-align: center; font-size: 11px; }
}

.wiz__panel[hidden] { display: none; }
.wiz__panel h2, .wiz__panel h3 { font-size: clamp(25px, 3vw, 34px); margin-bottom: 8px; }
.wiz__panel > .muted:first-of-type { margin-bottom: 30px; }

.wiz__group {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 2.6vw, 28px);
  margin-bottom: 20px;
  background: var(--ink-2);
}
.wiz__group > h3, .wiz__group > h4 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 20px;
}

.wiz__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
/* "Submit Prequalification →" alone is wider than a 375px viewport's content
   box, so the row has to be allowed to wrap and the buttons to share it. */
.wiz__nav .btn { flex: 1 1 auto; justify-content: center; }
.wiz__saved { font-size: 12.5px; color: var(--fg-3); display: flex; align-items: center; gap: 8px; }
.wiz__saved.is-flash { color: var(--brass); }

.review { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.review__sec { background: var(--ink-2); padding: 22px clamp(18px, 2.4vw, 26px); }
.review__sec > h3, .review__sec > h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.review__sec button { background: none; border: 0; color: var(--fg-3); font-size: 11px; letter-spacing: 0.1em; cursor: pointer; text-transform: uppercase; }
.review__sec button:hover { color: var(--brass); }
.review dl { margin: 0; display: grid; grid-template-columns: minmax(140px, 250px) 1fr; gap: 9px 20px; font-size: 14.5px; }
.review dt { color: var(--fg-3); }
.review dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.review .is-blank { color: var(--fg-3); font-style: italic; }
@media (max-width: 560px) { .review dl { grid-template-columns: 1fr; gap: 2px 0; } .review dd { margin-bottom: 10px; } }

/* ---------------------------------------------------------------- footer -- */

.foot { background: var(--ink-2); border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 88px) 34px; }
.foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: clamp(28px, 4vw, 52px); }
@media (max-width: 860px) { .foot__top { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); } }
.foot__logo img { height: 30px; width: auto; margin-bottom: 20px; }
.foot .foot__h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 18px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot a { color: var(--fg-2); font-size: 15px; transition: color 0.22s; }
.foot a:hover { color: var(--brass-bright); }
.foot address { font-style: normal; color: var(--fg-2); font-size: 15px; line-height: 1.75; }
.foot__bottom {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  color: var(--fg-3);
}
.foot__totop {
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-2);
  cursor: pointer;
  transition: color 0.22s;
}
.foot__totop:hover { color: var(--brass-bright); }

.foot__social { display: flex; gap: 12px; }
.foot__social a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all 0.25s;
}
.foot__social a:hover { border-color: var(--brass); color: var(--brass); }

/* ------------------------------------------------------------------- cta -- */

.cta-band { position: relative; overflow: hidden; }
.cta-band__bg { position: absolute; inset: 0; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__bg::after { content: ""; position: absolute; inset: 0; background: rgba(8, 11, 18, 0.84); }
.cta-band .wrap { position: relative; z-index: 1; }

/* -------------------------------------------------------------- to top -- */

.to-top {
  position: fixed;
  right: clamp(16px, 2.5vw, 34px);
  bottom: clamp(16px, 2.5vw, 34px);
  z-index: 90;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--navy);
  color: var(--brass);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  will-change: transform;
  /* transform is NOT transitioned: site.js drives it every scroll frame to
     dock the button above the footer, and an eased transform would rubber-band. */
  transition: opacity 0.32s var(--ease), visibility 0.32s,
              background 0.25s, border-color 0.25s, color 0.25s;
}
.to-top.is-shown { opacity: 1; visibility: visible; }
.to-top:hover {
  background: var(--navy-lift);
  border-color: var(--brass);
  color: var(--brass-bright);
}
.to-top svg { transition: transform 0.3s var(--ease); }
.to-top:hover svg { transform: translateY(-3px); }

@media (max-width: 560px) { .to-top { width: 46px; height: 46px; } }

/* Sits below the lightbox (200) and the nav (100) so it never covers either. */

/* ------------------------------------------------------ mobile legibility -- */

/* The desktop scale leans on a lot of 10-11px tracked-out uppercase, which
   holds up on a large screen and turns to mush on a phone. Sizes below are
   floors, applied only where the screen is actually small. */
@media (max-width: 760px) {
  body { font-size: 17px; line-height: 1.7; }

  .eyebrow { font-size: 12.5px; letter-spacing: 0.19em; gap: 10px; }
  .lede { font-size: 17.5px; line-height: 1.72; }

  .card p,
  .step p,
  .person p,
  .spec__v { font-size: 16.5px; }

  /* Small uppercase labels */
  .spec__k,
  .pcard__loc,
  .cblock__label,
  .person__role,
  .wiz__group > h4,
  .review__sec > h4,
  .stat__l { font-size: 12.5px; letter-spacing: 0.15em; }

  /* Hints and fine print */
  .hint,
  .err,
  .cblock__hint,
  .form-note,
  .wiz__saved,
  .foot__bottom { font-size: 14.5px; }

  .chip { font-size: 12.5px; padding: 7px 14px; }
  .link-arrow { font-size: 13px; }
  .review dl { font-size: 15.5px; }
  .foot a { font-size: 16px; }
  .foot .foot__h { font-size: 12.5px; letter-spacing: 0.16em; }

  /* Comfortable tap targets */
  .btn { padding: 16px 26px; font-size: 13.5px; }
  .filter,
  .tab { font-size: 12.5px; padding: 12px 20px; }
  .toggle span { padding: 13px 24px; font-size: 14px; }
}

/* ------------------------------------------------------- mobile drawer -- */

@media (max-width: 1179px) {
  .nav__burger { border-color: var(--brass-deep); }
  .nav__burger[aria-expanded="true"] {
    background: var(--navy);
    border-color: var(--brass);
  }
  .nav__burger[aria-expanded="true"] span { background: var(--brass-bright); }

  .drawer {
    background: linear-gradient(180deg, var(--navy) 0%, var(--ink-2) 42%);
    border-top: 1px solid var(--brass-deep);
    padding-bottom: 36px;
  }
  .drawer > a:not(.btn) {
    font-size: 30px;
    padding: 19px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 0.22s, padding-left 0.25s var(--ease);
  }
  /* Brass chevron so each row reads as tappable, not as a heading. */
  .drawer > a:not(.btn)::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--brass);
    border-bottom: 1.5px solid var(--brass);
    transform: rotate(-45deg);
    opacity: 0.75;
  }
  .drawer > a:not(.btn):hover,
  .drawer > a:not(.btn):focus-visible { color: var(--brass-bright); padding-left: 6px; }
}

/* ---------------------------------------------------------------- reveal -- */

.rv { opacity: 0; transform: translateY(22px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .rv { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------- 404 -- */

.err-page { min-height: 76svh; display: grid; place-items: center; text-align: center; padding-top: var(--nav-h); }
.err-page .code { font-family: var(--display); font-size: clamp(90px, 18vw, 200px); line-height: 1; color: var(--brass-deep); }

/* ==========================================================================
   ALWAYS LIGHT-ON-DARK — KEEP THIS BLOCK LAST IN THE FILE
   --------------------------------------------------------------------------
   These regions render on a photo or a navy panel in BOTH themes, so their
   text must never follow --fg/--fg-2. They were declared near the top of the
   file originally and lost to later rules of equal specificity (that is what
   made the navy "Have a site, a project..." tile unreadable in light mode).
   Anything that sits on a permanently dark surface belongs here, at the end.
   ========================================================================== */

.hero__inner,
.hero h1,
.pcard__body,
.pcard__t,
.cta-band .wrap,
.section--navy,
.stat--cta { color: var(--on-dark); }

.hero__inner .lede,
.cta-band .lede,
.stat--cta .stat__l,
.section--navy .pull cite,
.lb__count { color: var(--on-dark-2); }

.hero .eyebrow,
.cta-band .eyebrow,
.section--navy .eyebrow,
.pcard__loc,
.stat--cta .link-arrow,
.cta-mark > span { color: #e6d0a4; }

.scroll-cue { color: rgba(255, 255, 255, 0.72); }

.pcard__tag {
  color: var(--on-dark-2);
  background: rgba(8, 11, 18, 0.72);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Ghost buttons sitting on hero photography / the CTA band. */
.hero .btn--ghost,
.cta-band .btn--ghost {
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.42);
}
.hero .btn--ghost:hover,
.cta-band .btn--ghost:hover { color: #fff; border-color: #fff; }

/* Lightbox chrome is always on near-black. */
.lb__close,
.lb__nav { color: var(--on-dark); border-color: rgba(255, 255, 255, 0.28); }

/* .btn--quiet's box is navy in both themes, so its label can't follow --fg-2. */
.btn--quiet { color: var(--on-dark-2); border-color: rgba(255, 255, 255, 0.22); }
.btn--quiet:hover { color: #e6d0a4; border-color: #e6d0a4; }

/* ------------------------------------------------- photo address captions -- */
/* Ed (2026-10-12): "Every image should be one of our projects, captioned with
   the address." Each caption links to that project's page, so an investor can
   check the claim in one click. */
.media-cap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  transition: color 0.22s;
}
.media-cap svg { flex: none; opacity: 0.85; }
a.media-cap:hover { color: var(--brass-bright); }

figure.split__media { margin: 0; }
figure.split__media figcaption { margin-top: 10px; }

/* Heroes and the CTA band: the caption sits in the bottom padding, under the
   headline block and clear of the scroll cue on the right. */
.hero__cap,
.cta-band__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 1;
}
.cta-band { position: relative; }

/* Both sit on photography in either theme, so they stay light. */
.hero__cap .media-cap,
.cta-band__cap .media-cap { color: rgba(255, 255, 255, 0.78); }
.hero__cap a.media-cap:hover,
.cta-band__cap a.media-cap:hover { color: #fff; }

/* ------------------------------------------------------ accessibility -- */
.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;
}

/* ------------------------------------------------- invest page (draft) -- */
/* Draft-only markers. build.js refuses to publish the page while any of
   these remain, so none of this can reach a live visitor. */
.draft-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  padding: 11px var(--gut);
  background: #f2c14e;
  color: #1a1300;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
}
body.is-draft { padding-bottom: 64px; }
body.is-draft .to-top { bottom: 84px; }

.draft-q {
  margin: 20px 0;
  padding: 18px 20px;
  border: 2px dashed #f2c14e;
  border-radius: var(--r);
  background: rgba(242, 193, 78, 0.08);
}
.draft-q__tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 9px;
  border-radius: 2px;
  background: #f2c14e;
  color: #1a1300;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.draft-q__topic { margin: 0 0 6px; font-weight: 600; color: var(--fg); }
.draft-q p { margin: 0 0 6px; color: var(--fg); font-size: 15.5px; }
.draft-q p:last-child { margin-bottom: 0; }

.pending {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 2px;
  background: #f2c14e;
  color: #1a1300;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Track record table. Wide on purpose: on a phone it scrolls inside its own
   box instead of pushing the page sideways. */
.track-wrap { overflow-x: auto; margin-top: 8px; }
.track { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.track th[scope="col"] {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-bright);
}
.track th[scope="row"],
.track td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  color: var(--fg-2);
}
.track th[scope="row"] a { color: var(--fg); font-weight: 500; }
.track th[scope="row"] a:hover { color: var(--brass-bright); }
.track tbody tr:hover > * { background: var(--ink-3); }


/* ------------------------------------------------ heading-level fixes -- */
/* Card, step and wizard-group headings were h4 directly under an h2 (and
   wizard steps were h3 under the h1), which breaks heading navigation for
   screen-reader users. They are now one level lower in the outline but must
   keep the h4 look, not the global serif h3 style. */
.card h3,
.step h3,
.wiz__group > h3,
.review__sec > h3 {
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* 24px minimum target height (WCAG 2.2 target size; good practice for 2.1). */
.nav__tel,
.media-cap { min-height: 24px; }

/* ------------------------------------------------------ motion controls -- */
/* WCAG 2.2.2 (Level A): content that moves on its own for more than five
   seconds needs a way to pause it. Reduced-motion visitors never see the
   motion at all; everyone else gets these buttons. */
.motion-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-2);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.22s, border-color 0.22s;
}
.motion-btn:hover { color: var(--brass-bright); border-color: var(--brass); }
.motion-btn svg { flex: none; }

.hero__cap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero.has-video .scroll-cue { display: none; }

.marquee-ctl { display: flex; justify-content: center; margin-top: 20px; }
.marquee.is-paused .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-ctl { display: none; } }

/* ---------------------------------------------------------- legal pages -- */
.legal {
  padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 72px));
  padding-bottom: clamp(64px, 8vw, 110px);
}
/* ~65 characters per line: comfortable reading for long policy text. */
.legal__body { max-width: 640px; }
.legal h1 { font-size: clamp(38px, 5vw, 58px); }
.legal__updated { margin: 14px 0 0; color: var(--fg-3); font-size: 14px; }
.legal__intro { margin-top: 26px; }
.legal h2 { font-size: clamp(24px, 2.6vw, 30px); margin: clamp(36px, 4vw, 48px) 0 12px; }
.legal p,
.legal li { color: var(--fg-2); }
.legal ul { margin: 0 0 1em; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--brass-bright); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--fg); font-weight: 600; }

.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot__legal a { display: inline-flex; align-items: center; min-height: 24px; font-size: 13px; color: var(--fg-3); }
.foot__legal a:hover { color: var(--brass-bright); }

/* Hero video pause button sits on photography in both themes. */
.hero__cap .motion-btn {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(8, 11, 18, 0.35);
}
.hero__cap .motion-btn:hover { color: #fff; border-color: #fff; }

/* Visible "Rendering" tag on gallery thumbnails (the alt text says so too). */
.gallery button { position: relative; }
.gallery__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 2px;
  background: rgba(8, 11, 18, 0.78);
  color: #f4f5f7;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------- invest page -- */
.term-notes { margin: 28px 0 0; padding-left: 20px; color: var(--fg-2); font-size: 15.5px; line-height: 1.7; max-width: 80ch; }
.term-notes li { margin-bottom: 6px; }

.offering {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  padding-block: clamp(30px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.offering__media { margin: 0; }
.offering__img { position: relative; border-radius: var(--r); overflow: hidden; background: #fff; }
.offering__img img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.offering__img--tbd {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--navy) 0%, #0b1a30 100%);
}
.offering__img--tbd span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e6d0a4;
}
.offering__media figcaption { margin-top: 10px; font-size: 13.5px; color: var(--fg-3); line-height: 1.5; }
.offering__status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brass);
}
.offering__body h3 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; margin-top: 10px; }
.offering__body > p:not(.offering__status) { margin-top: 14px; color: var(--fg-2); font-size: 16px; line-height: 1.7; }

/* Label/value rows separated by hairlines only. They used to sit on a shaded
   fill with no side padding, which pushed the labels against the fill's edge
   (worst on the plain dark background). Now the text lines up with the
   paragraph above it. */
.facts { margin: 22px 0 0; border-top: 1px solid var(--line-strong); }
.facts > div {
  display: grid;
  grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.facts dt { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); padding-top: 3px; }
.facts dd { margin: 0; color: var(--fg); font-size: 16px; line-height: 1.55; }
@media (max-width: 420px) { .facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

.wire-warning {
  margin-top: clamp(28px, 4vw, 44px);
  padding: 18px 22px;
  border: 1px solid var(--brass-deep);
  border-left-width: 4px;
  border-radius: var(--r);
  color: var(--fg);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 80ch;
}
.wire-warning a { color: var(--brass-bright); text-decoration: underline; }

/* Upcoming Projects: the invitation to ask about investing. */
.ask-invest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--brass-deep);
  border-radius: var(--r);
}
.ask-invest > div:first-child { flex: 1 1 360px; min-width: 0; }
.ask-invest h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; }
.ask-invest p { margin-top: 10px; color: var(--fg-2); max-width: 60ch; }
.ask-invest__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.work__note { margin-top: 12px; color: var(--fg-2); font-size: 14.5px; line-height: 1.6; }
/* Eight projects: four across on desktop (two even rows), not 3 + 3 + 2. */
.projects--work { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
/* A project with no photos yet: same footprint as a photo card, navy instead. */
.pcard--text { background: linear-gradient(150deg, var(--navy) 0%, #0b1a30 100%); color: var(--on-dark); }
.pcard--text::after { display: none; }
.pcard--text .pcard__loc { color: #e6d0a4; }
.legal-notice > p:not(.eyebrow) { margin-top: 14px; color: var(--fg-2); font-size: 14.5px; line-height: 1.75; }

/* Under the Gallery label: what the images are and who made them. */
.gallery__note { margin: -6px 0 22px; color: var(--fg-2); font-size: 14.5px; }

/* "On the public record": links to city records and news about a project. */
.records {
  margin-top: clamp(26px, 3vw, 40px);
  padding: 20px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  max-width: 82ch;
}
.records__k {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brass);
}
.records__intro { margin: 0 0 10px; color: var(--fg-2); font-size: 15px; }
.records ul { margin: 0; padding-left: 18px; color: var(--fg-2); font-size: 15px; line-height: 1.7; }
.records li + li { margin-top: 8px; }
.records ul ul { margin-top: 2px; }
.records li strong { color: var(--fg); font-weight: 600; }
.records a { color: var(--brass-bright); text-decoration: underline; text-underline-offset: 2px; }

/* A project card whose image is a rendering. With "Historic Restoration" also
   present it stacks below it: side by side, the two collided on the narrower
   cards of the Invest page's four-across grid. */
.pcard__tag + .pcard__tag--render { top: 54px; }

/* ---------------------------------------------------- office shoot photos -- */
/* Slots from tools/office-photos.js. A slot renders a real photo, a staging
   placeholder, or nothing at all (production, before the photo exists). */
.office-photo { margin: 0; }
.office-photo > img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--r); }
.office-photo figcaption { margin-top: 10px; }

/* Bio cards: headshot beside the text on wide screens, above it on phones. */
.person--photo {
  display: grid;
  grid-template-columns: clamp(150px, 17vw, 200px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}
@media (max-width: 640px) {
  .person--photo { grid-template-columns: minmax(0, 1fr); }
  .person--photo .person__photo { max-width: 200px; }
}

.cblock__photo { margin-bottom: 16px; }
.card__photo { width: 120px; margin-bottom: 20px; }
.card__photo--wide { width: 100%; }

/* Staging-only stand-in. Dashed in the draft-note yellow so it reads as
   "to do", never as part of the design. */
.photo-todo .photo-todo__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  background: linear-gradient(150deg, var(--navy) 0%, #0b1a30 100%);
  border: 2px dashed #f2c14e;
  border-radius: var(--r);
  text-align: center;
}
.photo-todo .photo-todo__frame img { width: min(56%, 150px); height: auto; border-radius: 0; }
.photo-todo .photo-todo__frame span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f2c14e;
}
.photo-todo figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--fg-3); }

/* ===================================================== polish pass, 2026-10-16
   Found by tools/audit-polish.js (every page, 1280/820/390, light and dark).
   Kept together and last so each fix states why it exists. */

/* The header logo was squeezed to 73% of its width: the logo link was
   allowed to shrink when the 5-item menu got tight, and images obey
   max-width:100%. The logo now keeps its size; the menu spacing gives. */
.nav__logo { flex-shrink: 0; }

/* Labels were 9.6-10.5px, too small to read comfortably. Nothing that
   carries meaning is under 11.5px now. */
.eyebrow { font-size: 12px; }
.pcard__loc { font-size: 11.5px; }
.pcard__tag { font-size: 11px; }
.spec__k, .cblock__label { font-size: 12px; }
.person__role, .offering__status, .records__k { font-size: 12px; }
.chip { font-size: 12px; }
.cta-mark > span { font-size: clamp(11px, 0.85vw, 12px); }
.scroll-cue { font-size: 11px; }

/* Comfortable line length (about 60-70 characters) for running text. */
.wrap--narrow > p { max-width: 68ch; }
.person p { max-width: 66ch; }
.records { max-width: 74ch; }
.legal-notice > p:not(.eyebrow), .draft-q p { max-width: 72ch; }

/* Galleries: always full rows. Six tracks, three photos per row; a last row
   of two splits the width in half, and a last row of one turns the last four
   photos into two rows of two. Two columns on tablets (an odd last photo
   spans both), one on phones. */
.gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gallery > * { grid-column: span 2; }
.gallery > :nth-child(3n+1):nth-last-child(2),
.gallery > :nth-child(3n+1):nth-last-child(2) + *,
.gallery > :nth-child(3n+1):nth-last-child(4),
.gallery > :nth-child(3n+1):nth-last-child(4) ~ * { grid-column: span 3; }
.gallery > :only-child { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery > *,
  .gallery > :nth-child(3n+1):nth-last-child(2),
  .gallery > :nth-child(3n+1):nth-last-child(2) + *,
  .gallery > :nth-child(3n+1):nth-last-child(4),
  .gallery > :nth-child(3n+1):nth-last-child(4) ~ * { grid-column: auto; }
  .gallery > :nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery > :nth-child(odd):last-child { grid-column: auto; }
}

/* Project specs: Program and Scope share the first row; the facts (type,
   units, status, year) share the second, evenly, however many there are. */
@media (min-width: 760px) {
  .specs { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .specs > .spec { grid-column: span 6; }
  .specs[data-facts="1"] > .spec--fact { grid-column: span 12; }
  .specs[data-facts="3"] > .spec--fact { grid-column: span 4; }
  .specs[data-facts="4"] > .spec--fact { grid-column: span 3; }
}
@media (max-width: 759px) { .specs { grid-template-columns: minmax(0, 1fr); } }

/* Project card grids whose last row comes up short: site.js widens the last
   card (pcard--fill spans two of three columns, pcard--fill-row the whole
   row), mirroring the featured card at the top. */
.pcard--fill { grid-column: span 2; aspect-ratio: 16 / 9; }
.pcard--fill-row { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .pcard--fill, .pcard--fill-row { grid-column: auto; aspect-ratio: 4 / 3; } }

/* Three-card rows: three across, or one per row; never two plus one. */
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 719px) { .grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* Footer: four columns, then two by two, then one. Never three plus one. */
@media (max-width: 860px) { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .foot__top { grid-template-columns: minmax(0, 1fr); } }

/* The two-column stats rule stretched the last odd stat assuming a "Contact
   us" tile follows it. On the Invest terms band (no tile) it broke 2+2 into
   2+1+1. Only stretch it when the tile really follows. */
@media (min-width: 480px) and (max-width: 879px) {
  .stats > .stat:not(.stat--cta):nth-last-child(2):nth-child(odd) { grid-column: auto; }
  .stats > .stat:not(.stat--cta):nth-child(odd):has(+ .stat--cta) { grid-column: 1 / -1; }
}

/* Narrow work cards (Invest page, four across): show only the "Rendering"
   tag; two stacked tags ran into the project name. */
.projects--work .pcard__tag:not(.pcard__tag--render) { display: none; }
.projects--work .pcard__tag--render { top: 16px; }

/* Header at 1121-1360px: with the logo kept at full size, the phone number
   pushed the Contact button about 37px past the content edge. Show only the
   phone icon below 1360px (the link carries an aria-label). */
@media (max-width: 1360px) { .nav__tel span { display: none; } }

/* Three-card rows: three across only when each card has room (900px+);
   at tablet width the narrow cards wrapped their links onto two lines. */
@media (max-width: 899px) { .grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* Project grids: a regular card beside a featured or widened one stretches
   to the row's height instead of leaving a blank strip under it. */
.projects > .pcard { align-self: stretch; }

/* Five menu items + full-size logo + phone + theme + Contact need about
   1180px, so the menu button takes over below that (the three
   "max-width: 1179px" rules above, moved up from 900px), and the phone
   number shows as text only where there is room for it. */
@media (max-width: 1499px) { .nav__tel span { display: none; } }
/* With the phone number as text (1500px+), the original 34px/32px menu
   spacing overran the content edge by the 37px the logo regained. */
.nav__links { gap: 26px; }
.nav__inner { gap: 26px; }
@media (max-width: 1240px) { .nav__links { gap: 22px; } .nav__inner { gap: 22px; } }
/* A card stretched to a taller row height (beside a featured or fill card)
   keeps its aspect-ratio by growing WIDER, past its column: on the portfolio
   at 1180-1920px that pushed the page 145px sideways. Pin it to its cell. */
.projects > .pcard { width: 100%; min-width: 0; }

/* Two labels can't fit one line on a phone ("Subcontractor Prequalification",
   "Become a Subcontractor-Partner"). When a button wraps, center and balance
   the lines so it reads as designed, the way the menu drawer already does. */
.btn { text-align: center; text-wrap: balance; }

/* ------------------------------------------------------------ 3D tour -- */
/* Project-page interactive model (build.js tourBlock, site.js "3D tour").
   A rendering with one button until the visitor opens it; then the frame
   fills the same box and Full Screen / Close sit underneath. */
.tour__head { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 36px); }
.tour__text { margin-top: 16px; color: var(--fg-2); font-size: 17px; line-height: 1.65; }
.tour__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: #0b1018;
}
.tour__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tour__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 18, 0.28);
  pointer-events: none;
}
.tour__go { position: relative; z-index: 2; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38); }
.tour__stage .gallery__tag { z-index: 2; top: 14px; left: 14px; }
.tour__stage.is-live::after,
.tour__stage.is-live > .tour__poster,
.tour__stage.is-live > .tour__go,
.tour__stage.is-live > .gallery__tag { display: none; }
.tour__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour__bar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.tour__note { margin-top: 16px; color: var(--fg-2); font-size: 14.5px; line-height: 1.6; max-width: 72ch; }
.tour__bar + .tour__note { margin-top: 14px; }
@media (max-width: 759px) { .tour__stage { aspect-ratio: 4 / 3; } }
.work__tour { margin-top: 12px; }

/* ------------------------------------------- Ed's 2026-10-19 changes -- */
/* An offering with no image yet (100 Banks): text left, facts right, which
   stack on phones. Replaces the "Rendering to come" box Ed asked to remove. */
.offering--text > .facts { margin-top: 0; }

/* The wire-fraud warning inside the Contact page's "reach us directly" card:
   same box, sized to the narrow column. */
.wire-warning--card { margin-top: 0; padding: 14px 16px; font-size: 14.5px; line-height: 1.6; }

/* Home "Now Building": the four Cambridge, Boston and Somerville projects
   Ed wants first. Four portrait cards across (the 34 Wendell view is
   portrait), two by two on tablets, one column of landscape cards on phones. */
.projects--now { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.projects--now .pcard { aspect-ratio: 4 / 5; }
@media (max-width: 1023px) { .projects--now { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .projects--now { grid-template-columns: minmax(0, 1fr); }
  .projects--now .pcard { aspect-ratio: 4 / 3; }
}
.pcard__meta { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: rgba(244, 245, 247, 0.86); }

/* Five stats across (Ed confirmed 85+ and 500+ on 2026-10-19): at the full
   numeral size "In-house" and "OSHA 30" broke onto two lines in a fifth of
   the row. Smaller numerals keep every figure on one line. */
@media (min-width: 880px) {
  .stats--many .stat__n { font-size: clamp(30px, 3.4vw, 44px); white-space: nowrap; }
}

/* 100 Banks on the home page has no rendering yet: the navy card carries
   its headline figure, styled like the stats band, instead of empty space. */
.pcard__big {
  position: absolute;
  top: 64px;
  left: clamp(20px, 2.6vw, 30px);
  right: clamp(20px, 2.6vw, 30px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pcard__num { font-family: var(--display); font-size: clamp(48px, 5vw, 72px); line-height: 1; color: #e6d0a4; letter-spacing: -0.02em; }
.pcard__unit { font-size: 13px; letter-spacing: 0.05em; color: rgba(244, 245, 247, 0.86); }
.pcard--text .pcard__tag { color: #f4f5f7; }

/* Four legal links (Cookie Policy added 2026-10-19) wrapped 3 + 1 on phones,
   leaving "Accessibility" alone. Two even columns instead. */
@media (max-width: 480px) {
  .foot__legal { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 28px; flex-basis: 100%; }
}

/* --------------------------------------------- final polish, 2026-10-19 -- */

/* Wire-fraud warning (Greg: "center the wire fraud warning... sleek"). It
   was narrower than the investing box above it and hugged the left edge.
   Now it spans the same width, centered, with a shield label; the text keeps
   a readable measure. The Contact card keeps a compact left-aligned copy. */
.wire-warning {
  max-width: none;
  margin-top: clamp(14px, 1.8vw, 20px);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 40px);
  border: 1px solid var(--brass-deep);
  background: color-mix(in srgb, var(--brass) 6%, transparent);
  text-align: center;
}
.wire-warning__k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.wire-warning__t { max-width: 62ch; margin: 8px auto 0; color: var(--fg); font-size: 15.5px; line-height: 1.7; }
.wire-warning--card { padding: 14px 16px; text-align: left; }
.wire-warning--card .wire-warning__t { margin-left: 0; font-size: 14.5px; line-height: 1.6; }

/* Home "Now Building" card details break at the dot, never mid-phrase
   ("Under / construction"). */
.pcard__meta span { white-space: nowrap; }

/* The numbers band sat 220-270px above the next heading on Home and About:
   the band's own bottom padding plus a full section's top padding on the
   same background. Halve the second one. */
.section--tight:has(.stats) + .section:not(.section--alt) { padding-top: clamp(44px, 5vw, 72px); }

/* Partner logos with motion off (Greg's own setting): a still, centered grid.
   The brass dots only make sense between items in a moving strip; in wrapped
   rows they dangled after the last logo of each line. */
@media (prefers-reduced-motion: reduce) {
  .marquee__item::after { display: none; }
  .marquee__list { gap: 18px clamp(28px, 4vw, 56px); }
  .marquee__item { padding-inline: 0; }
}

/* Phones: the warning's phone number broke mid-number ("360-" / "9558"),
   and the two investing buttons stacked at different widths. */
.wire-warning a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 560px) {
  .ask-invest__actions { width: 100%; }
  .ask-invest__actions .btn { flex: 1 1 100%; justify-content: center; }
}
/* Same for the "Let's build something better together" band's two buttons. */
@media (max-width: 560px) {
  .cta-band .btn { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------- accessibility audit, 2026-10-19 -- */

/* The closed menu drawer was only slid off-screen. Its links stayed in the
   tab order and the accessibility tree on every page at every width, so
   keyboard users tabbed through eight invisible links and screen readers read
   the menu twice. visibility:hidden takes it out of both; the delay lets the
   slide-up finish before it goes. Desktop never shows it at all. */
.drawer { visibility: hidden; transition: transform 0.42s var(--ease), visibility 0s linear 0.42s; }
.drawer.is-open { visibility: visible; transition: transform 0.42s var(--ease); }
@media (min-width: 1180px) { .drawer { display: none; } }

/* Footer column titles are h2 now (they were h5 straight after the page's
   last h2, a skipped level for heading navigation). Same look as before. */
.foot .foot__h { font-family: var(--body); line-height: 1.4; }

/* Captions on the beige cards: --fg-3 measured 4.33:1 there; --fg-2 passes. */
.card figcaption,
.contact-card figcaption { color: var(--fg-2); }

/* The prequalification step list scrolled sideways on tablets and phones,
   a scroll area keyboard users couldn't reach (WCAG 2.1.1). It now fits:
   six across on tablets, three by two on phones. */
@media (max-width: 900px) {
  .wiz__steps { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
  .wiz__steps li { min-width: 0; }
}
@media (max-width: 560px) {
  .wiz__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Step headings take focus on Continue/Back; no outline box on a heading. */
.wiz__panel h2:focus { outline: none; }

/* Form fields showed focus only as a 1px border colour change, too faint to
   find at a glance. Keyboard users now get the site's usual focus ring. */
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 2px; }

/* The hidden attribute must always win. .btn's display:inline-flex beat the
   browser's [hidden] rule, so the prequalification's "Submit" button showed
   on every step (and "Continue" on the last), visible and reachable by
   keyboard and screen readers. Everything that sets hidden means it. */
[hidden] { display: none !important; }

/* Text over photos (measured 2026-10-19 by tools/a11y-photo-contrast.js):
   headlines, ledes and gold labels fell to 1.5-4.4:1 where they crossed the
   brightest parts of a photo (The Brook's white facade, Bolton Grove's yellow
   wrap). A soft shade sits behind the text block only, so the rest of each
   photo stays bright; cards get a deeper fade where the town label sits. */
.pcard::after {
  background: linear-gradient(180deg, transparent 26%, rgba(8, 11, 18, 0.62) 56%, rgba(8, 11, 18, 0.95) 100%);
}
/* Second pass: the gold eyebrow at the top of each hero text block, and the
   taller home "Now Building" cards whose text starts higher. */
.projects--now .pcard::after {
  background: linear-gradient(180deg, transparent 16%, rgba(8, 11, 18, 0.66) 46%, rgba(8, 11, 18, 0.95) 100%);
}
/* Hero text contrast, done in the photo's own seamless scrim (a boxed shade
   behind the text showed hard edges). Desktop: darker on the left where the
   text sits, open on the right where the building reads. Phones: text spans
   the width, so the midfield is shaded evenly. */
.hero__media::after {
  background:
    linear-gradient(180deg, rgba(8, 11, 18, 0.6) 0%, rgba(8, 11, 18, 0.3) 40%, rgba(8, 11, 18, 0.92) 100%),
    linear-gradient(90deg, rgba(8, 11, 18, 0.66) 0%, rgba(8, 11, 18, 0.5) 38%, rgba(8, 11, 18, 0) 72%);
}
@media (max-width: 760px) {
  .hero__media::after {
    background: linear-gradient(180deg, rgba(8, 11, 18, 0.58) 0%, rgba(8, 11, 18, 0.6) 30%, rgba(8, 11, 18, 0.66) 55%, rgba(8, 11, 18, 0.94) 100%);
  }
}
/* A hero photo that is bright right behind the text (Bolton Grove's yellow
   house wrap on Prequalification) gets a slightly deeper shade. */
.hero--bright .hero__media::after {
  background:
    linear-gradient(180deg, rgba(8, 11, 18, 0.64) 0%, rgba(8, 11, 18, 0.4) 40%, rgba(8, 11, 18, 0.92) 100%),
    linear-gradient(90deg, rgba(8, 11, 18, 0.7) 0%, rgba(8, 11, 18, 0.56) 40%, rgba(8, 11, 18, 0) 74%);
}
@media (max-width: 760px) {
  .hero--bright .hero__media::after {
    background: linear-gradient(180deg, rgba(8, 11, 18, 0.66) 0%, rgba(8, 11, 18, 0.66) 55%, rgba(8, 11, 18, 0.94) 100%);
  }
}

/* Links inside running text (bios, notes, cards) were the same colour as the
   words around them with no underline, invisible as links (WCAG 1.4.1).
   Every plain link in a paragraph or list item now carries a thin brass
   underline. Standalone values (the contact card's phone and email) and
   styled links (.btn, .link-arrow and the like, which have classes) are
   left alone. */
main :is(p, li, dd):not(.cblock__value) > a:not([class]) {
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
main :is(p, li, dd):not(.cblock__value) > a:not([class]):hover { color: var(--brass-bright); }