/*
 * Overstory layout primitives & global chrome
 * -----------------------------------------------------------------------------
 * Loaded AFTER tokens.css. Defines:
 *   - .container             responsive content container
 *   - .site-header           sticky header w/ logo + nav + pill CTA
 *   - .nav-toggle            mobile menu button (visible <= 980px)
 *   - .site-footer           emphasis-navy footer w/ mailto, nav, land ack
 *   - .hero / .hero--navy    two hero variants
 *   - .section--paper /      paper + navy section primitives
 *     .section--navy
 *   - .btn / .btn--pill /    pill CTA button system
 *     .btn--primary / .btn--sun / .btn--ghost
 *   - .card                  bordered card w/ shadow + hover state
 *
 * Every color / spacing / radius / shadow value resolves to a token from
 * tokens.css — no raw hex / px outside this file's structural rules.
 */

/* -----------------------------------------------------------------------------
 * Utilities
 * -----------------------------------------------------------------------------
 */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-main link — visually hidden until focused (VAL-A11Y-003). */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-navy-deep);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  text-decoration: none;
  border-radius: var(--radius-sm);
  outline: none;
  transition: top 120ms ease;
}
.skip-link:focus {
  top: var(--space-2);
  outline: 2px solid var(--color-sun);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}

main {
  display: block;
  min-height: 60vh;
  outline: none; /* remove browser focus outline when landed via skip link */
}

/* -----------------------------------------------------------------------------
 * Global chrome — header / nav
 * -----------------------------------------------------------------------------
 */
/* Site header — transparent overlay over the page hero. Full-width with a
   hairline bottom border. Logo on the left, nav items centered between
   logo and CTA via flex space-between, sun "Get in touch" pill on the
   right. Cream text on the dark hero surface. Per design system §07. */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: transparent;
  border-bottom: 1px solid rgba(247, 239, 220, 0.12);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 96px;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
/* Logo pushes everything else to the right so the nav + CTA cluster
   sits flush against the right edge of the wrap (no centered nav row). */
.site-header__logo {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.brand-logo__image {
  display: block;
  width: clamp(160px, 15vw, 220px);
  height: auto;
  filter: brightness(0) invert(1);
  mix-blend-mode: screen;
  opacity: 0.95;
}
.site-header__logo:focus-visible {
  outline: 2px solid var(--color-sun);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav-link {
  color: var(--color-cream);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  /* Touch target ≥ 44px tall — bumped from space-2 so the clickable
     area clears WCAG minimum without changing the visual rhythm. */
  padding: var(--space-3) var(--space-2);
  opacity: 0.88;
  transition: color 160ms ease, opacity 160ms ease;
}
.site-header__nav-link:hover {
  color: var(--color-sun);
  opacity: 1;
}
.site-header__nav-link:focus-visible {
  outline: 2px solid var(--color-sun);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.site-header__nav-link[aria-current="page"] {
  color: var(--color-sun);
  opacity: 1;
}

/* Ink-mode header — auto-applied on pages whose first <main> child is NOT a
   dark hero (e.g. blog post pages render straight to a paper section). The
   absolute cream-on-dark header would be invisible against paper, so flip
   the logo, nav, and hairline to ink/line tokens instead. */
body:not(:has(main#main-content > .hero)) .site-header {
  border-bottom-color: var(--color-line);
}
body:not(:has(main#main-content > .hero)) .site-header__logo img {
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}
body:not(:has(main#main-content > .hero)) .site-header__nav-link {
  color: var(--color-ink);
}
body:not(:has(main#main-content > .hero)) .site-header__nav-link:hover,
body:not(:has(main#main-content > .hero)) .site-header__nav-link[aria-current="page"] {
  color: var(--color-navy);
}
/* Pad the first non-hero section so the absolute header doesn't overlap it. */
body:not(:has(main#main-content > .hero)) main#main-content > .section:first-child {
  padding-top: calc(180px + var(--space-7));
}

/* Mobile menu toggle — hidden on desktop. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background-color: transparent;
  cursor: pointer;
  padding: 0;
}
.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-navy-deep);
  border-radius: 2px;
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
 * Mobile header — collapse below 980px
 * -----------------------------------------------------------------------------
 */
@media (max-width: 980px) {
  .nav-toggle {
    display: inline-flex;
  }
  .site-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    background-color: var(--color-paper);
    border-bottom: 1px solid var(--color-line);
    padding: var(--space-5) var(--container-padding-x);
  }
  .site-header--open .site-header__nav {
    display: flex;
  }
  .site-header__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  /* Open drawer has a paper background — flip the nav links from
     cream (sized for the dark hero) to ink so they read. */
  .site-header--open .site-header__nav-link {
    color: var(--color-ink);
    opacity: 1;
  }
  .site-header--open .site-header__nav-link:hover {
    color: var(--color-navy);
  }
  .site-header--open .site-header__nav-link[aria-current="page"] {
    color: var(--color-sun);
  }
  .site-header .site-header__cta {
    display: none;
  }
}

/* Tighter container padding on small screens. */
@media (max-width: 640px) {
  :root {
    --container-padding-x: 20px;
  }
  .brand-logo__image {
    width: clamp(132px, 42vw, 176px);
  }
  .site-header .site-header__cta {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
 * Button system — including the pill CTA
 * -----------------------------------------------------------------------------
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
  min-height: 44px;
}

.btn--pill {
  border-radius: 999px;
  padding: var(--space-3) var(--space-5);
}

/* Trailing arrow glyph on every pill CTA (VAL-DESIGN-022).
 * The → (U+2192) is appended via ::after so that every
 * .btn--pill automatically carries the arrow without per-page
 * HTML edits. Header nav links, footer plain mailto links,
 * and inline body links do NOT carry .btn--pill and are
 * therefore excluded. */
.btn--pill::after {
  content: " →";
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
}

.btn--primary {
  background-color: var(--color-navy);
  color: var(--color-paper);
  border-color: var(--color-navy);
}
.btn--primary:hover {
  background-color: var(--color-navy-deep);
  border-color: var(--color-navy-deep);
  color: var(--color-paper);
}

.btn--sun {
  background-color: var(--color-sun);
  color: var(--color-navy-deep);
  border-color: var(--color-sun);
}
.btn--sun:hover {
  background-color: var(--color-cream);
  border-color: var(--color-cream);
  color: var(--color-navy-deep);
  opacity: 0.95;
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-navy-deep);
  border-color: var(--color-navy-deep);
}
.btn--ghost:hover {
  background-color: var(--color-navy-deep);
  color: var(--color-paper);
}

/* Ghost-dark pill CTA — for dark photo-overlay surfaces (VAL-DESIGN-024).
 * Transparent/near-transparent background, paper text and border.
 * WCAG AA contrast against the navy/sun photo overlay. */
.btn--pill--ghost-dark {
  background-color: rgba(247, 243, 236, 0.06);
  color: var(--color-paper);
  border: 1.5px solid var(--color-paper);
}
.btn--pill--ghost-dark:hover {
  background-color: rgba(247, 243, 236, 0.14);
  color: var(--color-paper);
}

/* Visible focus ring for keyboard users — VAL-M1-026. */
.btn:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(0, 64, 128, 0.18);
}

/* -----------------------------------------------------------------------------
 * Atmosphere overlays — sun-glow + topo-lines on dark navy surfaces
 *
 * Every .hero--navy, .section--navy, and the global <footer> embeds an
 * .atmosphere container as its first child. The container is positioned
 * absolutely, covers the full parent, and sits behind text content.
 * pointer-events:none ensures the overlay never intercepts clicks/taps.
 *
 * Variants:
 *   .atmosphere--sun-topo   sun-glow upper-right + topo-lines bottom-edge
 *   .atmosphere--green      adds green-glow lower-left (for editorial bands)
 *
 * VAL-DESIGN-009  sun-glow computed top ≤ 25% / right ≤ 25%
 * VAL-DESIGN-010  topo-lines computed bottom ≤ 15%, spans ≥ 60% width
 * VAL-DESIGN-011  green-glow on pull-quote / editorial bands lower-left
 * -----------------------------------------------------------------------------
 */
.atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Sun-glow radial — upper-right corner.
   Mirrors .hero__sun-overlay: full-bleed element, gradient origin near the
   upper-right corner, fading to transparent before the element's far edges,
   so no hard clip is visible inside the surface. */
.atmosphere__sun {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 92% 0%,
    rgba(240, 176, 64, 0.65) 0%,
    rgba(240, 176, 64, 0.22) 30%,
    transparent 55%
  );
}

/* Topographic contour lines — bottom edge, spanning most of the width. */
.atmosphere__topo {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  line-height: 0;
}
.atmosphere__topo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Green-glow radial — lower-left corner (editorial / pull-quote bands).
   Same approach as .atmosphere__sun: full-bleed element, gradient origin
   near the lower-left corner, fades to transparent before the far edges. */
.atmosphere__green {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 8% 100%,
    rgba(48, 176, 64, 0.30) 0%,
    rgba(48, 176, 64, 0.10) 30%,
    transparent 55%
  );
}

/* Ensure dark surfaces create a positioning context for .atmosphere. */
.section--navy,
.site-footer {
  position: relative;
}

/* Lift content above the atmosphere layer (z-index 0). */
.hero--navy > .container,
.section--navy > .container,
.site-footer > .container,
.site-footer > .site-footer__inner {
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------------------------------------
 * Hero variants
 *   .hero            paper hero with a navy band accent above the headline
 *   .hero--navy      full navy hero (cream text on deepest navy)
 * -----------------------------------------------------------------------------
 */
/* Hero — full-bleed dark emphasis surface. The site-header sits absolutely
   at the top of the hero (overlay with a bottom hairline separating nav
   from content), so the hero's padding-top makes room for it. */
.hero {
  background-color: var(--color-navy-deep);
  padding-top: calc(220px + var(--space-9)); /* large client-logo clearance + breathing room */
  padding-bottom: var(--space-9);
  position: relative;
  overflow: hidden;
  color: var(--color-paper);
}

/* Background photo for the hero — placed via inline style="background-image:url(...)"
   on a child .hero__photo-bg div. Sits behind the navy gradient overlay so it
   appears as a muted documentary backdrop. */
.hero__photo-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  z-index: 0;
}

/* Navy gradient overlay over any hero photo. Dark uniformly enough that
   cream text reads clearly, with a slightly darker bottom-left to anchor
   the title block (per design system §07 photo-overlay treatment). */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(0, 26, 58, 0.92) 0%,
      rgba(0, 26, 58, 0.78) 50%,
      rgba(0, 26, 58, 0.55) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Lift hero content above the photo + overlay layers. */
.hero > .container,
.hero > .atmosphere {
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
  background-color: var(--color-navy-deep);
  color: var(--color-cream);
  font-family: var(--font-mono);
  /* Bumped from --font-size-mono-meta (11px) → 13px so the eyebrow is
     legible on mobile and over the busy photo hero. Still small enough
     to read as metadata, not body copy. */
  font-size: 13px;
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.hero__display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-navy-deep);
  max-width: 16ch;
  margin: 0 0 var(--space-5);
}

.hero__lead {
  font-size: 20px; /* hero lead tier — distinct from body */
  line-height: var(--line-height-body);
  color: var(--color-ink);
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.hero__actions--no-margin {
  margin-bottom: 0;
}

.hero--navy {
  background-color: var(--color-navy-deep);
  color: var(--color-cream);
}
.hero--navy .hero__display { color: var(--color-paper); }
.hero--navy h1,
.hero--navy h2,
.hero--photo h1,
.hero--photo h2 { color: var(--color-paper); }
.hero--photo .hero__display { font-size: 80px; line-height: 0.98; }
.hero--navy .hero__lead { color: var(--color-cream); opacity: 0.92; }
.hero--navy .hero__eyebrow {
  background-color: var(--color-sun);
  color: var(--color-navy-deep);
}
.hero--navy .btn:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(247, 239, 220, 0.2);
}

/* --- Photo-overlay hero (.hero--photo) -----------------------------------
 * VAL-DESIGN-018
 *
 * Layers (bottom-to-top):
 *   1. <picture> photograph (hero__photo-layer) — fills the hero
 *   2. Navy linear-gradient overlay (hero__navy-overlay) — 135deg sweep
 *      from opaque lower-left to semi-transparent upper-right
 *   3. Sun radial overlay (hero__sun-overlay) — warm glow upper-right
 *   4. Topo-lines SVG along bottom edge (hero__topo)
 *   5. Content (container) — z-index 3, above all overlays
 *
 * Headline uses paper colour (overrides the default navy-deep).
 * The .btn--pill--ghost-dark variant is the preferred CTA on this surface.
 * -------------------------------------------------------------------------
 */
.hero--photo {
  position: relative;
  background-color: var(--color-navy-deep); /* fallback while photo loads */
  color: var(--color-cream);
  overflow: hidden;
}

/* Photo base layer — <picture> fills the hero */
.hero__photo-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__photo-layer figure {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.hero__photo-layer picture,
.hero__photo-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Hero photo figcaption — positioned at the bottom of the hero section,
   inside the same <figure> as the <picture>, above the overlay layers. */
.hero__photo-layer figcaption {
  position: absolute;
  bottom: var(--space-4);
  left: 0;
  z-index: 3;
  color: var(--color-cream);
  opacity: 0.80;
  border-top-color: rgba(247, 239, 220, 0.25);
}

/* Navy gradient overlay — 135deg from opaque lower-left to transparent upper-right */
.hero__navy-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    var(--color-navy-deep) 0%,
    rgba(0, 26, 58, 0.85) 50%,
    rgba(0, 26, 58, 0.25) 100%
  );
}

/* Sun radial overlay — warm glow in the upper-right corner */
.hero__sun-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    circle at 92% 0%,
    rgba(240, 176, 64, 0.65) 0%,
    transparent 55%
  );
  pointer-events: none;
}

/* Topo-lines along bottom edge of the photo hero (same SVG as atmosphere__topo) */
.hero__topo {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
}
.hero__topo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Lift content above overlay layers */
.hero--photo > .container {
  position: relative;
  z-index: 3;
}

/* Text colours on photo-overlay hero */
.hero--photo .hero__lead { color: var(--color-cream); opacity: 0.92; }
.hero--photo .hero__body { color: var(--color-cream); opacity: 0.92; }
.hero--photo .hero__eyebrow {
  background-color: var(--color-sun);
  color: var(--color-navy-deep);
}
.hero--photo .section-mark {
  color: var(--color-cream);
  opacity: 0.7;
}
.hero--photo .btn:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(247, 239, 220, 0.2);
}

/* Override link-colour rule so pill CTA text stays contrast-safe on photo overlay */
.hero--photo .btn--sun {
  color: var(--color-navy-deep);
}
.hero--photo .btn--ghost {
  color: var(--color-paper);
  border-color: var(--color-paper);
}

@media (max-width: 768px) {
  /* Keep header/logo clearance and add breathing room so the eyebrow doesn't
     sit under the larger client-provided logo. */
  .hero { padding-top: calc(210px + var(--space-5)); padding-bottom: var(--space-7); }
  .hero__display {
    /* scale display down on mobile per VAL-M1-031 (still >= 28px). */
    font-size: 36px;
  }
  /* Photo hero hardcodes 80px desktop — override here so the home title
     doesn't overflow the right edge at narrow viewports. */
  .hero--photo .hero__display { font-size: 40px; }
  .hero__lead { font-size: var(--font-size-body); }
  /* Photo hero: crop photo to keep key subject visible at mobile */
  .hero--photo .hero__photo-layer img {
    object-position: center 30%;
  }
}

/* Very small screens — phones in portrait, < 400px wide.
   Tighten the largest type tier a bit more so 12-character words like
   "Geospatial" don't break the line. Also shrink the header CTA so the
   logo + hamburger + pill row doesn't crowd. */
@media (max-width: 400px) {
  .hero--photo .hero__display { font-size: 34px; }
  .hero__display { font-size: 32px; }
  .site-header__cta {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    font-size: 13px;
  }
}

/* -----------------------------------------------------------------------------
 * Section primitives
 * -----------------------------------------------------------------------------
 */
.section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  position: relative;
}

/* -----------------------------------------------------------------------------
 * Motif layer — line-drawing background graphics from the design system,
 * positioned behind the content of a section. Always aria-hidden, never
 * blocks pointer events, never affects scroll.
 * -----------------------------------------------------------------------------
 */
.motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  color: var(--color-navy);
}
.section > .container {
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------------------------------------
 * Blog index — design system §08
 * Hero with sun-wave SVG motif; featured post (text-left, photo-right, sun
 * top border); post rows (140 / 1fr / 200 date / title / location grid).
 * -----------------------------------------------------------------------------
 */
.hero__wave {
  display: block;
  width: 100%;
  height: 30px;
  margin-top: var(--space-7);
}

.blog-featured-section { padding-top: var(--space-7); padding-bottom: var(--space-5); }
.blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 320px;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.blog-featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-sun);
  opacity: 0.9;
  z-index: 2;
}
.blog-featured__body {
  padding: var(--space-7) var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
}
.blog-featured__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin: 0;
}
.blog-featured__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--color-navy-deep);
  display: block;
  text-decoration: none;
  max-width: 18ch;
}
.blog-featured__title:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.blog-featured__dek {
  font-size: var(--font-size-body);
  line-height: 1.55;
  color: var(--color-ink);
  margin: var(--space-3) 0 0;
  max-width: 34ch;
}
.blog-featured__meta {
  display: flex;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: var(--space-5) 0 0;
}
.blog-featured__photo {
  position: relative;
  background-color: var(--color-paper-2);
  text-decoration: none;
  min-height: 280px;
  overflow: hidden;
}
.blog-featured__photo-img,
.blog-featured__photo > picture,
.blog-featured__photo > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-featured__photo > picture {
  position: absolute;
  inset: 0;
}

@media (max-width: 768px) {
  .blog-featured {
    grid-template-columns: 1fr;
  }
  .blog-featured__photo {
    order: -1;
    min-height: 240px;
  }
}

/* Blog post rows below the featured card — each row is its own row-card:
   text on the left, hero photo filling the right at full card height.
   Echoes the .blog-featured pattern, scaled down. */
.blog-list { padding-top: var(--space-5); }
.blog-rows {
  display: grid;
  gap: var(--space-5);
}
.blog-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.blog-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(20, 32, 44, 0.08);
}
.blog-row__date {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: 0 0 var(--space-3);
}
.blog-row__body {
  padding: var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.blog-row__category {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin: 0 0 var(--space-2);
}
.blog-row__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--color-navy-deep);
  margin: 0;
}
.blog-row__dek {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  margin: var(--space-3) 0 0;
  max-width: 56ch;
}
/* The thumb is wrapped in <picture> by the build script and rendered
 * at a fixed 16:9 landscape aspect — portrait phone-camera photos
 * are center-cropped to a horizontal band so every card reads as the
 * same landscape strip regardless of the source's native orientation. */
.blog-row > picture {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-paper);
}
.blog-row__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .blog-row {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .blog-row__thumb {
    order: -1;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .blog-row__body {
    padding: var(--space-5);
  }
}

/* Project narrative paragraphs (.section__body.prose) — readable column. */
.section__body.prose > p {
  max-width: var(--measure);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
}
.section__body.prose > .photo-inline {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Coord-grid tile — subtle navy crosshair grid behind data/stats areas.
   Uses a tiny inline-SVG data URI tiled via background-repeat for a true
   pattern (not a single stretched SVG). */
.motif--coord-grid {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><line x1='0' y1='0' x2='48' y2='0' stroke='%23004080' stroke-opacity='0.08' stroke-width='0.8'/><line x1='0' y1='0' x2='0' y2='48' stroke='%23004080' stroke-opacity='0.08' stroke-width='0.8'/><line x1='22' y1='0' x2='26' y2='0' stroke='%23004080' stroke-opacity='0.20' stroke-width='0.8'/><line x1='0' y1='22' x2='0' y2='26' stroke='%23004080' stroke-opacity='0.20' stroke-width='0.8'/></svg>");
  background-repeat: repeat;
  background-size: 48px 48px;
  opacity: 0.5;
}

/* Conifer line-art — placed on the bottom-right of paper closing sections,
   reaching out into the right whitespace. */
.motif--conifer {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-right: var(--space-9);
  padding-bottom: var(--space-5);
}
.motif--conifer svg {
  width: 180px;
  height: auto;
  color: var(--color-green);
  opacity: 0.45;
}
@media (max-width: 980px) {
  .motif--conifer { display: none; }
}

/* When two same-surface sections sit adjacent, eliminate the doubled padding
   so the read feels like one continuous flow rather than two distinct blocks.
   Only applies when colour AND surface match. */
.section--paper + .section--paper,
.section--paper-2 + .section--paper-2 {
  padding-top: 0;
}

.section--paper {
  background-color: var(--color-paper);
  color: var(--color-ink);
}

.section--navy {
  background-color: var(--color-navy-deep);
  color: var(--color-cream);
}
.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: var(--color-cream);
}
.section--navy a {
  color: var(--color-sun);
}
.section--navy a:focus-visible {
  outline: 2px solid var(--color-sun);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.section--navy .btn:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(247, 239, 220, 0.2);
}

/* Override link-color rule so pill CTA text stays contrast-safe on navy. */
.section--navy .btn--sun,
.hero--navy .btn--sun,
.site-footer .btn--sun {
  color: var(--color-navy-deep);
}
.hero--navy .btn--ghost {
  color: var(--color-paper);
}

@media (max-width: 768px) {
  .section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
}

/* -----------------------------------------------------------------------------
 * Card primitive
 * -----------------------------------------------------------------------------
 */
.card {
  display: block;
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  color: var(--color-ink);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.card__title {
  font-size: var(--font-size-h3);
  margin: 0 0 var(--space-3);
  color: var(--color-navy-deep);
}
.card__body { margin: 0; color: var(--color-ink); }
.card__meta {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

a.card,
.card[href] { cursor: pointer; }

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-navy);
}
.card:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
}

.card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
 * Footer
 * -----------------------------------------------------------------------------
 */
.site-footer {
  background-color: var(--color-navy-deep);
  color: var(--color-cream);
  padding-top: var(--space-8);
  padding-bottom: var(--space-5);
  overflow: hidden;
}

/* Topo-line band across the top edge of the footer. Green strokes
   wouldn't read on navy, so the in-scope green-token override flips
   them to cream — sun strokes already pop against navy. */
.site-footer__topo {
  --color-green: var(--color-cream);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.3;
  z-index: 0;
}
.site-footer__topo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.site-footer a { color: var(--color-cream); text-decoration: none; }
.site-footer a:hover { color: var(--color-sun); }
.site-footer a:focus-visible {
  outline: 2px solid var(--color-sun);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.site-footer .btn:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(247, 239, 220, 0.25);
}

/* Top row: logo (left) + nav-and-CTA cluster (right). Matches the
   header layout — nav links sit right next to the sun pill instead
   of in a centered column. */
.site-footer__top {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}
.site-footer__mark {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.site-footer__mark img {
  display: block;
  height: 64px;
  width: auto;
  filter: brightness(0) invert(1);
  mix-blend-mode: screen;
  opacity: 0.95;
}
.site-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-footer__nav-list a {
  font-size: var(--font-size-body);
  opacity: 0.88;
  transition: color 160ms ease, opacity 160ms ease;
}
.site-footer__nav-list a:hover { opacity: 1; }

/* Land acknowledgement strip — sits on its own row, mono label + small body. */
.site-footer__land-ack {
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(247, 239, 220, 0.15);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  align-items: start;
}
.site-footer__land-ack-label {
  color: var(--color-cream);
  opacity: 0.65;
  margin: 0;
}
.site-footer__land-ack-body {
  margin: 0;
  color: var(--color-cream);
  opacity: 0.78;
  max-width: var(--measure);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

/* Bottom row: copyright (left) + plain mailto (right) */
.site-footer__bottom {
  padding-top: var(--space-5);
  border-top: 1px solid rgba(247, 239, 220, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
}
.site-footer__copy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: 0.06em;
  color: var(--color-cream);
  opacity: 0.6;
}
.site-footer__email {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: 0.06em;
  color: var(--color-cream);
  opacity: 0.78;
}

@media (max-width: 980px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer__mark { margin-right: 0; }
  .site-footer__land-ack {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* -----------------------------------------------------------------------------
 * Page-level helpers
 * -----------------------------------------------------------------------------
 */
.section--paper-2 {
  background-color: var(--color-paper-2);
  color: var(--color-ink);
}

.section-header {
  margin-bottom: var(--space-7);
  max-width: var(--measure);
}
.section-header .mono-meta {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-2);
}
.section--navy .section-header .mono-meta {
  color: var(--color-sun);
  opacity: 0.95;
}
.section-header h2 {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 var(--space-3);
}
.section-header p {
  font-size: var(--font-size-body);
  color: var(--color-ink);
  max-width: var(--measure);
  margin: 0;
}
.section--navy .section-header p {
  color: var(--color-cream);
  opacity: 0.9;
}

/* Reset list styles on grids used for cards. */
.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* -----------------------------------------------------------------------------
 * Section-number gutter (.section-mark)
 *
 * The design system's section-number gutter pattern: a two-digit zero-padded
 * section number followed by an em-dash and the section title, rendered in
 * IBM Plex Mono at 12px, positioned in a 120px left gutter at the 1280px
 * viewport. Below 980px the section-mark collapses above the section title.
 *
 * Usage — container--gutter approach (most sections):
 *   <div class="container container--gutter">
 *     <span class="section-mark" aria-hidden="true">01 — Approach</span>
 *     <div class="section__body">...</div>
 *   </div>
 *
 * Usage — hero flow element (home hero with hero__layout grid):
 *   <div class="hero__content">
 *     <span class="section-mark section-mark--flow">01 — The mark</span>
 *     ...
 *   </div>
 *
 * Usage — service-area local gutter:
 *   <li class="service-area service-area--gutter">
 *     <span class="section-mark">01 — GIS Mapping</span>
 *     <div class="service-area__body">...</div>
 *   </li>
 * -----------------------------------------------------------------------------
 */

/* Gutter container.
   Default: behaves like the plain .container — full wrap width, no offset.
   Only sections that actually use a .section-mark element get the 80px+120px
   left gutter pattern (chapter-head numbered marker, design system §07/08/09).
   Without :has(), the empty gutter would push every body section right and
   make the page feel offset and narrow — see commit history. */
.container--gutter {
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}

.container--gutter:has(> .section-mark) {
  display: grid;
  grid-template-columns: 80px 120px 1fr;
  column-gap: 0;
  padding-left: 0;
}

.container--gutter:has(> .section-mark) > .section-mark {
  grid-column: 2;
}

.container--gutter:has(> .section-mark) > .section__body {
  grid-column: 3;
  padding-left: var(--space-4);
}

/* Section-mark base styles */
.section-mark {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-ink-2);
  text-align: right;
  padding-right: var(--space-3);
  line-height: var(--line-height-tight);
}

/* Navy-surface section-mark: use cream colour for contrast */
.section--navy .section-mark,
.hero--navy .section-mark {
  color: var(--color-cream);
  opacity: 0.7;
}

/* Flow variant: used inside hero__content (not in a gutter column) */
.section-mark--flow {
  text-align: left;
  padding-right: 0;
  margin-bottom: var(--space-3);
  color: var(--color-cream);
  opacity: 0.7;
}

/* Hero with gutter: hero__layout nested inside section__body */
.container--gutter > .section__body > .hero__layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

/* Service-area local gutter: 120px column for mark + 1fr for body */
.service-area--gutter {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: var(--space-4);
  position: relative;
}

.service-area--gutter > .section-mark {
  padding-top: var(--space-3);
  text-align: right;
  padding-right: var(--space-3);
}

.service-area--gutter > .service-area__body {
  grid-column: 2;
}

/* Remove old .service-area__num when .service-area--gutter is used */
.service-area--gutter > .service-area__num {
  display: none;
}

/* Mobile: collapse gutter, render section-mark above content */
@media (max-width: 980px) {
  .container--gutter:has(> .section-mark) {
    grid-template-columns: 1fr;
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
  }

  .container--gutter:has(> .section-mark) > .section-mark {
    grid-column: 1;
    text-align: left;
    padding-right: 0;
    margin-bottom: var(--space-2);
  }

  .container--gutter:has(> .section-mark) > .section__body {
    grid-column: 1;
    padding-left: 0;
  }

  .service-area--gutter {
    grid-template-columns: 1fr;
  }

  .service-area--gutter > .section-mark {
    grid-column: 1;
    padding-top: 0;
    text-align: left;
    padding-right: 0;
    margin-bottom: var(--space-2);
  }

  .service-area--gutter > .service-area__body {
    grid-column: 1;
  }

  /* Hero layout nested inside gutter: collapse to single column at mobile */
  .container--gutter > .section__body > .hero__layout {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
 * Hero: split content + data-sheet layout (used on Home and Past Work)
 * -----------------------------------------------------------------------------
 */
.hero__layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.hero__content { min-width: 0; }
.hero__body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-cream);
  opacity: 0.92;
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
}
.hero--navy .hero__body { color: var(--color-cream); opacity: 0.92; }

/* -----------------------------------------------------------------------------
 * Data-sheet sidebar (VAL-DESIGN-016)
 *
 * A mono fact-pair block positioned as the right column in the hero grid.
 * Each fact pair is a <dt> (uppercase IBM Plex Mono key) + <dd> (value in
 * mono or body). Uses the same visual language as the deliverables grid.
 *
 * At 375px the data-sheet collapses below the headline as a horizontal
 * mono strip or single column; it MUST NOT disappear entirely.
 * -----------------------------------------------------------------------------
 */
.data-sheet {
  padding: var(--space-5);
  border-left: 1px solid rgba(247, 239, 220, 0.25);
}

.data-sheet__facts {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}

.data-sheet__pair {
  display: grid;
  gap: var(--space-1);
}

.data-sheet__key {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-sun);
  opacity: 0.95;
  line-height: var(--line-height-tight);
}

.data-sheet__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-cream);
  opacity: 0.92;
  margin: 0;
  line-height: var(--line-height-tight);
}

/* Paper-surface hero variant — adjust data-sheet colours for contrast */
.hero:not(.hero--navy):not(.hero--photo) .data-sheet {
  border-left-color: var(--color-line);
}
.hero:not(.hero--navy):not(.hero--photo) .data-sheet__key {
  color: var(--color-ink-2);
}
.hero:not(.hero--navy):not(.hero--photo) .data-sheet__value {
  color: var(--color-ink);
}

@media (max-width: 980px) {
  .hero__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .data-sheet {
    border-left: none;
    border-top: 1px solid rgba(247, 239, 220, 0.25);
    padding: var(--space-4) 0 0;
  }
  .hero:not(.hero--navy):not(.hero--photo) .data-sheet {
    border-top-color: var(--color-line);
  }
  .data-sheet__facts {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-3);
  }
}

@media (max-width: 640px) {
  .data-sheet__facts {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .data-sheet__pair {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2);
    align-items: baseline;
  }
}

/* -----------------------------------------------------------------------------
 * Home: service-overview prose block
 * -----------------------------------------------------------------------------
 */
.home-overview {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.section-header .home-overview__heading,
.home-overview__heading {
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  max-width: 18ch;
  margin: 0 0 var(--space-5);
}
.home-overview__body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  max-width: var(--measure);
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
}
.home-overview__body:last-child {
  margin-bottom: 0;
}
.home-overview__body--secondary {
  font-size: var(--font-size-body);
  color: var(--color-ink);
}

/* Section eyebrow used above home-overview headline. */
.section__eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--color-ink-2);
}

/* CTA spacer below a list-rows block. */
.section__cta {
  margin: var(--space-6) 0 0;
}

/* Closing CTA sections — left-flush across the page, matching the rest
   of the body sections. */
.home-close .section__body,
.past-work-close .section__body,
.blog-close .section__body,
.services-cta .section__body,
.services-close .section__body,
.about-close .section__body,
.contact-close .section__body {
  text-align: left;
  max-width: var(--measure);
  margin-left: 0;
  margin-right: 0;
}
.home-close .section-header,
.past-work-close .section-header,
.blog-close .section-header,
.services-close .section-header,
.about-close .section-header,
.contact-close .section-header {
  text-align: left;
}
/* Close-section H2 is an outro, not a new primary section. Drop a
   tier (size + weight) so primary section H2s stay the dominant
   "this is a new section" beat as the eye scrolls through the page. */
.home-close .section-header h2,
.past-work-close .section-header h2,
.blog-close .section-header h2,
.services-close .section-header h2,
.about-close .section-header h2,
.contact-close .section-header h2 {
  font-size: 26px;
  font-weight: var(--font-weight-bold);
}
.home-close .section-header p,
.past-work-close .section-header p,
.blog-close .section-header p,
.services-close .section-header p,
.about-close .section-header p,
.contact-close .section-header p {
  margin-left: 0;
  margin-right: 0;
  max-width: var(--measure);
}

/* Map-pins motif (design system §05) sits in the right half of the
   home close panel, opposite the left-aligned heading + CTA. The SVG
   carries its own palette (navy halos + sun / navy / green dots), so
   no colour override here. 400×240 viewBox, slightly wider than tall.
   Lives as a flex sibling inside the container so its right edge lines
   up with the same content edge as the year column in the recent-projects
   list above. */
.home-close__layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
}
.home-close__pins {
  flex: 0 0 360px;
  width: 360px;
  height: 220px;
  pointer-events: none;
}
.home-close__pins svg {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 980px) {
  .home-close__layout { display: block; }
  .home-close__pins { display: none; }
}

/* -----------------------------------------------------------------------------
 * Past collaborations — colophon-style directory of partner names.
 * Indigenous block goes full-wrap width. The 4 smaller categories (Non-profits,
 * Education, Government, Private) form a 2×2 grid on the second row. The
 * International block goes full-wrap on the third row.
 *
 * Names render as a mono-uppercase label + count, then a wrapping flow of
 * partner names separated by middots. Editorial colophon look — calm, dense,
 * scannable.
 * -----------------------------------------------------------------------------
 */
.partners {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}
.partners__header {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto var(--space-8);
}
.partners__header h2 { margin: 0 0 var(--space-3); }
.partners__header p { margin: 0; color: var(--color-ink); }

.partners-block {
  margin: 0 0 var(--space-7);
}
.partners-block:last-child {
  margin-bottom: 0;
}
.partners-block__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  /* Was --color-sun — sun on paper is too low-contrast to read.
     Navy reads clearly on paper and matches other mono labels. */
  color: var(--color-navy);
  margin: 0 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.partners-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Default: multi-column auto-balanced. Browser picks 1-5 columns
     based on container width. 240px minimum keeps long names readable. */
  column-width: 240px;
  column-gap: var(--space-6);
}
.partners-block__list li {
  /* Don't split a single name across columns. */
  break-inside: avoid;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--color-ink);
  padding: 6px 0;
  border-bottom: 1px solid var(--color-line);
}
/* Single-column variant for small categories (2-3 items) — keeps them
   tight and tall rather than splitting into half-empty columns. */
.partners-block__list--single {
  column-width: auto;
  column-count: 1;
}

/* Grid layouts within the partners section.
   - .partners-grid--medium: 2-up for categories with 7-8 items
   - .partners-grid--small:  3-up for categories with 2-3 items */
.partners-grid {
  display: grid;
  gap: var(--space-6) var(--space-7);
  margin: 0 0 var(--space-7);
}
.partners-grid--medium {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.partners-grid--small {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.partners-grid > .partners-block {
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .partners-grid--small {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .partners-grid--medium,
  .partners-grid--small {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
 * Service teasers (home page)
 *
 *   Service Name. (link)
 *   Description sentence below in body type.
 *
 * Hairline divider between rows.
 * -----------------------------------------------------------------------------
 */
.service-teasers {
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-teaser {
  display: block;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-line);
}
.service-teaser:last-child {
  border-bottom: 1px solid var(--color-line);
}
/* Service teaser title — smaller + lighter than the section "Services."
   heading so the hierarchy reads heading → list-item rather than two
   competing 28-px headlines. No arrow / no icon — the title text sits
   flush against the cell's left edge with no indent. */
.service-teaser__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-headline);
  color: var(--color-navy-deep);
  text-decoration: none;
  margin: 0;
  display: inline-block;
}
.service-teaser__title:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  color: var(--color-navy);
}
.service-teaser__tags {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-ink-2);
  text-align: right;
  white-space: nowrap;
  align-self: center;
}
.service-teaser__dek {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  margin: var(--space-2) 0 0;
  max-width: var(--measure);
}
@media (max-width: 768px) {
  .service-teaser {
    grid-template-columns: 1fr;
  }
  .service-teaser__tags {
    text-align: left;
    white-space: normal;
  }
}

/* -----------------------------------------------------------------------------
 * Home: credibility — three big-number stat callouts on paper.
 * Mirrors the design system project-detail pattern (1,320 / 64 / 2).
 * -----------------------------------------------------------------------------
 */
.home-credibility {
  padding-top: 80px;
  padding-bottom: 80px;
}
/* Stats band uses only the sun-glow + green-glow atmosphere — drop the
   topo strip so the three big numbers are the sole focus. */
.home-credibility .atmosphere__topo { display: none; }
.stat-callout {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
/* On a navy surface (home credibility band), flip borders + text to
   cream / sun so the stats read against the dark background. */
.section--navy .stat-callout {
  border-top-color: rgba(247, 239, 220, 0.18);
  border-bottom-color: rgba(247, 239, 220, 0.18);
}
.section--navy .stat-callout__pair {
  border-right-color: rgba(247, 239, 220, 0.18);
}
.section--navy .stat-callout__label {
  color: var(--color-cream);
  opacity: 0.78;
}
.section--navy .stat-callout__value {
  color: var(--color-cream);
}
/* Each cell stacks value-then-label from the top of the cell so the
   three big numbers share the same top baseline. DOM order is dt → dd
   for semantics; `order` puts the value above its dt label visually. */
.stat-callout__pair {
  padding: var(--space-7) var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-3);
  border-right: 1px solid var(--color-line);
}
.stat-callout__value { order: 1; }
.stat-callout__label { order: 2; }
.stat-callout__pair:last-child {
  border-right: none;
}
.stat-callout__label {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--line-height-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink-2);
  margin: 0;
  line-height: var(--line-height-tight);
}
.stat-callout__value {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: 64px;
  line-height: 1;
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-navy-deep);
  margin: 0;
}
@media (max-width: 980px) {
  .stat-callout {
    grid-template-columns: 1fr;
  }
  .stat-callout__pair {
    border-right: none;
    border-bottom: 1px solid var(--color-line);
    padding: var(--space-5) var(--space-3);
  }
  .stat-callout__pair:last-child {
    border-bottom: none;
  }
  .stat-callout__value {
    font-size: 48px;
  }
}

/* -----------------------------------------------------------------------------
 * Home: closing CTA block
 * -----------------------------------------------------------------------------
 */
.home-cta {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}
.home-cta__inner {
  text-align: center;
  max-width: var(--measure);
  margin: 0 auto;
}
.home-cta__inner h2 {
  font-size: var(--font-size-h2);
  margin: 0 0 var(--space-4);
}
.home-cta__inner p {
  font-size: var(--font-size-body);
  margin: 0 0 var(--space-6);
}

/* -----------------------------------------------------------------------------
 * Services page
 * -----------------------------------------------------------------------------
 */

/* Short navy hero variant — supports data-sheet sidebar via hero__layout.
   Padding-top still leaves room for the absolute site-header overlay. */
.hero--short {
  padding-top: calc(220px + var(--space-7));
  padding-bottom: var(--space-7);
}
.hero--short .hero__display {
  max-width: 22ch;
}
/* A pill button used directly inside the hero (e.g., "Back to Past Work" on
   project detail pages) needs vertical breathing room from the lead text. */
.hero .hero__lead + .btn {
  display: inline-flex;
  margin-top: var(--space-6);
}
.hero--short .hero__lead {
  max-width: var(--measure);
  margin-bottom: 0;
}
/* When the short hero uses a data-sheet grid, adjust the lead margin. */
.hero--short .hero__layout .hero__lead {
  margin-bottom: 0;
}

/* Ordered list of service-area cards. */
.services-areas__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-7);
}

/* Service rows — editorial layout, hairline dividers. Content aligns with
   the section headers above (no inner gutter / no row counter). */
.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 320px;
  column-gap: var(--space-7);
  align-items: start;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-line);
  scroll-margin-top: calc(72px + var(--space-5));
}
.service-row:first-child {
  border-top: none;
  padding-top: var(--space-6);
}
.service-row__body {
  min-width: 0;
}
.service-row__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--color-navy-deep);
  margin: 0 0 var(--space-3);
}
.service-row__intro {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
}
.service-row__body-copy {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  max-width: var(--measure);
  margin: 0;
}
/* Photo column — 320px portrait-ish 4:3 block on the right. */
.service-row__photo {
  margin: 0;
}
.service-row__photo picture,
.service-row__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: var(--color-paper-2);
}
/* Services-areas section header — adds breathing room before the first
   service row. */
.services-areas__header {
  margin-bottom: var(--space-7);
}

/* -----------------------------------------------------------------------------
 * Common outputs band — horizontal 5-column typology key.
 * Sits in the standard container--gutter column (same flush as the rest of
 * the page). Header is left-aligned; grid spans the full content column.
 *   01            02            03            04            05
 *   Maps          Datasets      Drone         Web           Training
 *   …desc…        …desc…        …desc…        …desc…        …desc…
 * Top + bottom hairlines, vertical hairlines between columns.
 * Collapses to 2-col below 980px, single column below 480px.
 * -----------------------------------------------------------------------------
 */
.services-outputs__header {
  text-align: left;
  max-width: var(--measure);
  margin: 0 0 var(--space-7);
}
.services-outputs__header h2 { margin: 0 0 var(--space-3); }
.services-outputs__header p { margin: 0; color: var(--color-ink); }

.outputs-band {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.outputs-band__item {
  padding: var(--space-6) var(--space-4);
  border-right: 1px solid var(--color-line);
}
.outputs-band__item:last-child {
  border-right: none;
}
.outputs-band__num {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-sun);
  margin: 0 0 var(--space-4);
}
.outputs-band__label {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--color-navy-deep);
  margin: 0 0 var(--space-3);
}
.outputs-band__desc {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  margin: 0;
}

@media (max-width: 980px) {
  .outputs-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: none;
  }
  .outputs-band__item {
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
  }
  .outputs-band__item:nth-child(2n) {
    border-right: none;
  }
  .outputs-band__item:last-child {
    border-right: none;
  }
}
@media (max-width: 480px) {
  .outputs-band {
    grid-template-columns: 1fr;
  }
  .outputs-band__item {
    border-right: none;
  }
  .outputs-band__item:nth-child(2n) {
    border-right: none;
  }
}

/* -----------------------------------------------------------------------------
 * Deliverables list (Pattern A) — mono ordinal + em-dash + body, with
 * hairline rule between rows. Echoes the route-line stage markers on
 * project hero pages. Used on Services per-area .service-row__body.
 * -----------------------------------------------------------------------------
 */
.deliverables-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  counter-reset: deliverable;
}
.deliverables-list li {
  counter-increment: deliverable;
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
}
.deliverables-list li:last-child {
  border-bottom: 1px solid var(--color-line);
}
.deliverables-list li::before {
  content: counter(deliverable, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: var(--letter-spacing-meta);
  color: var(--color-sun);
}

@media (max-width: 980px) {
  .service-row {
    grid-template-columns: 1fr;
    row-gap: var(--space-5);
    padding: var(--space-7) 0;
  }
  .service-row__photo {
    max-width: 480px;
    order: -1;
  }
}
/* -----------------------------------------------------------------------------
 * Deliverables grid pattern (VAL-DESIGN-015)
 *
 * A 2-column CSS grid for service deliverables where the left column is a
 * fixed 120px IBM Plex Mono UPPERCASE key and the right column is the
 * descriptive sentence in body type. Replaces the previous disc-bullet <ul>.
 *
 * At 375px the grid collapses to single column with the mono key rendered
 * as an uppercase eyebrow above the description.
 * -----------------------------------------------------------------------------
 */
.deliverables {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-3) var(--space-4);
}

.deliverables dt {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-ink-2);
  padding-top: 2px;
  line-height: var(--line-height-tight);
}

.deliverables dd {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  margin: 0;
}

/* Navy-surface deliverables: lighter key text for contrast */
.section--navy .deliverables dt {
  color: var(--color-cream);
  opacity: 0.7;
}
.section--navy .deliverables dd {
  color: var(--color-cream);
  opacity: 0.92;
}

/* 375px collapse: single column, key becomes eyebrow above description */
@media (max-width: 640px) {
  .deliverables {
    grid-template-columns: 1fr;
    gap: var(--space-1) var(--space-4);
  }

  .deliverables dt {
    padding-top: 0;
    margin-bottom: 0;
  }

  .deliverables dd {
    margin-bottom: var(--space-3);
  }

  .deliverables dd:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 640px) {
  .service-area {
    padding: var(--space-5);
  }
}

/* Closing CTA band on the Services page. */
.services-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: var(--space-7);
  align-items: center;
}
.services-cta__inner .mono-meta {
  margin: 0 0 var(--space-3);
  color: var(--color-sun);
  opacity: 0.95;
}
.services-cta__inner h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  max-width: 22ch;
  margin: 0;
  color: var(--color-cream);
}
@media (max-width: 768px) {
  .services-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* -----------------------------------------------------------------------------
 * Past Work page — reading-first list-rows pattern (VAL-DESIGN-013)
 *
 * Replaces the previous card-grid / 2-column media+body layout.
 * Each project is a 3-column grid row at 1280px:
 *   [mono date/year]  [title block + ● category eyebrow + dek]  [mono tag list]
 * No <img> thumbnails belong inside the row body — the index is a
 * reading-first list; photos return only on project detail pages.
 * Decorative arrow → at the right edge is permitted.
 *
 * At 375px the rows collapse to a single column:
 *   title block → mono date → mono tag list
 * Hit-targets must remain ≥ 44×44px.
 * -----------------------------------------------------------------------------
 */
.list-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.list-rows > li {
  display: grid;
  /* Title block fills the row; year sits in a fixed right column. The
     title and section heading both start at the row's left edge — no
     date-column indent. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-line);
  min-height: 44px;
  transition: background-color 160ms ease;
  position: relative;
}

.list-rows > li:last-child {
  border-bottom: 1px solid var(--color-line);
}

/* Hover state: subtle navy underline on the title + faint background shift */
.list-rows > li:hover {
  background-color: var(--color-paper-2);
}

/* Year column — sits flush right on each row. */
.list-row__date {
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-ink-2);
  padding-top: var(--space-2);
  line-height: var(--line-height-tight);
  text-align: right;
  white-space: nowrap;
}

/* Title block — title first, then category eyebrow below it, then dek. */
.list-row__title-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ● CATEGORY eyebrow — sits BELOW the title (was above). Bumped from
   mono-meta 11 px → small 13 px so it reads more comfortably without
   competing with the title. */
.list-row__category {
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: 0;
  line-height: var(--line-height-tight);
}

/* Row title — display font, editorial size */
.list-row__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: var(--letter-spacing-headline);
  color: var(--color-navy-deep);
  margin: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  text-decoration: none;
  display: block;
}

.list-row__title:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-navy-deep);
  text-underline-offset: 3px;
}

/* Description beneath the title */
.list-row__dek {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  margin: var(--space-1) 0 0;
  max-width: var(--measure);
}

/* Row right column — mono tag list */
.list-row__tags {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-ink-2);
  padding-top: var(--space-1);
  line-height: var(--line-height-tight);
  text-align: right;
}


/* Make the entire row a clickable target if wrapped in <a> */
.list-rows > li a {
  color: inherit;
}

/* Responsive: collapse to single column at 375px */
@media (max-width: 980px) {
  .list-rows > li {
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) var(--space-2);
  }

  .list-row__date {
    grid-column: 1;
    grid-row: 2;
  }

  .list-row__title-block {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .list-row__tags {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }

  .list-rows > li::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .list-rows > li {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--space-1);
    padding: var(--space-4) 0;
    min-height: 44px;
  }

  .list-row__title-block {
    grid-column: 1;
    grid-row: 1;
  }

  .list-row__date {
    grid-column: 1;
    grid-row: 2;
    padding-top: 0;
  }

  .list-row__tags {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
    padding-top: 0;
  }

  .list-row__title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-extrabold);
  }
}

/* -----------------------------------------------------------------------------
 * Blog index — reading-first list-rows pattern (VAL-DESIGN-014)
 *
 * Same 3-column grid as Past Work, but the first (featured) row has:
 *   - a 2px sun-coloured top border
 *   - a hero <figure><img> above the row content
 *   - a slightly larger title
 * Subsequent rows are text-only.
 * Right column shows read-time + derived tag list.
 * -----------------------------------------------------------------------------
 */

/* Featured row: sun top border */
.list-row--featured {
  border-top: 2px solid var(--color-sun) !important;
}

/* Hero image inside the featured row */
.list-row__hero {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-paper-2);
}
.list-row__hero img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

/* Featured title — slightly larger */
.list-row__title--featured {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-tight);
}

/* Blog list section — use gutter container */
.blog-list .section__body {
  padding-top: var(--space-4);
}

.past-work-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: var(--space-7);
  align-items: center;
}
.past-work-cta__inner .mono-meta {
  margin: 0 0 var(--space-3);
  color: var(--color-sun);
  opacity: 0.95;
}
/* .past-work-cta with gutter container (not __inner wrapper) — ensure mono-meta
   uses sun token on the navy surface for WCAG AA contrast (VAL-DESIGN-027). */
.past-work-cta .mono-meta {
  color: var(--color-sun);
  opacity: 0.95;
}
.past-work-cta__inner h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  max-width: 28ch;
  margin: 0;
  color: var(--color-cream);
}
@media (max-width: 768px) {
  .past-work-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* -----------------------------------------------------------------------------
 * About page
 * -----------------------------------------------------------------------------
 */
.about-company__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.about-company__prose {
  max-width: var(--measure);
  min-width: 0;
}
.about-company__paragraph {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
}
.about-company__paragraph:last-child {
  margin-bottom: 0;
}
.about-company__photo {
  margin: 0;
  position: sticky;
  top: calc(80px + var(--space-5));
}
.about-company__photo picture,
.about-company__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: var(--color-paper-2);
}
@media (max-width: 980px) {
  .about-company__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .about-company__photo {
    position: static;
    max-width: 360px;
  }
}

/* Team rows — editorial 2-column layout: bio left, portrait right.
   Photo sticks while the bio scrolls (for long bios). */
.team-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.team-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  column-gap: var(--space-7);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-line);
  scroll-margin-top: calc(72px + var(--space-5));
  align-items: center;
}
.team-row:first-child {
  border-top: none;
  padding-top: var(--space-6);
}
.team-row__body {
  min-width: 0;
}
.team-row__photo {
  margin: 0;
}
.team-row__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-sm);
  background-color: var(--color-paper-2);
}
/* Pano is positioned in the left third of his photo — anchor the crop to him */
#pano .team-row__photo img { object-position: 20% center; }
@media (max-width: 768px) {
  .team-row {
    grid-template-columns: 1fr;
    row-gap: var(--space-5);
  }
  .team-row__photo {
    position: static;
    max-width: 260px;
    order: -1;
  }
}
.team-row__role {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-2);
}
.team-row__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--color-navy-deep);
  margin: 0 0 var(--space-4);
}
.team-row__bio p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
}
.team-row__bio p:last-child {
  margin-bottom: 0;
}
@media (max-width: 980px) {
  .team-row {
    padding: var(--space-7) 0;
  }
}

.about-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: var(--space-7);
  align-items: center;
}
.about-cta__inner .mono-meta {
  margin: 0 0 var(--space-3);
  color: var(--color-sun);
  opacity: 0.95;
}
/* .about-cta with gutter container (not __inner wrapper) — ensure mono-meta
   uses sun/paper token on the navy surface for WCAG AA contrast (VAL-DESIGN-027).
   The base .mono-meta inherits ink-2 which fails at 11px on navy. */
.about-cta .mono-meta {
  color: var(--color-sun);
  opacity: 0.95;
}
.about-cta__inner h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  max-width: 28ch;
  margin: 0;
  color: var(--color-cream);
}
@media (max-width: 768px) {
  .about-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* -----------------------------------------------------------------------------
 * Contact page
 * -----------------------------------------------------------------------------
 */
.contact-primary__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.contact-primary__copy h2 {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  max-width: 22ch;
  margin: 0 0 var(--space-5);
}

.contact-primary__copy .mono-meta {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-2);
}

.contact-primary__lead {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  max-width: var(--measure);
  margin: 0 0 var(--space-5);
}

.contact-primary__note {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  max-width: var(--measure);
  margin: 0;
}

.contact-card {
  padding: var(--space-6) 0 var(--space-6) var(--space-6);
  border-left: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.contact-card__label {
  margin: 0;
  color: var(--color-ink-2);
}

.contact-card__address {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-navy-deep);
  margin: 0;
  word-break: break-word;
}

.contact-card__cta {
  align-self: flex-start;
  min-height: 44px;
  border-radius: var(--radius-pill);
}

.contact-card__hint {
  margin: 0;
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: var(--color-ink-2);
}

@media (max-width: 980px) {
  .contact-primary__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .contact-card {
    border-left: none;
    border-top: 1px solid var(--color-line);
    padding: var(--space-5) 0 0;
  }
  .contact-primary__inner .contact-card {
    order: -1;
  }
  .contact-primary__inner .contact-primary__copy {
    order: 0;
  }
}

@media (max-width: 480px) {
  .hero--navy.hero--short {
    /* Keep large client-logo clearance. */
    padding-top: calc(210px + var(--space-5));
    padding-bottom: var(--space-5);
  }
  .contact-primary {
    padding-top: var(--space-5);
  }
}

/* -----------------------------------------------------------------------------
 * Blog index — post cards
 * -----------------------------------------------------------------------------
 */
.post-list {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .post-list { grid-template-columns: 1fr; }
}

.post-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  color: var(--color-ink);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-navy);
}
.post-card:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
}

.post-card__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-paper-2);
}
.post-card__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__hero-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--color-navy-deep);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  letter-spacing: var(--letter-spacing-tight);
  opacity: 0.92;
}
.post-card__hero-fallback::after {
  content: "◇";
  font-size: 2.5em;
  opacity: 0.35;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  padding: var(--space-5);
}

.post-card__date {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.post-card__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-navy-deep);
  margin: 0 0 var(--space-3);
}

.post-card__title a {
  color: inherit;
  text-decoration: none;
}
.post-card__title a:hover {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-card__title a:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.post-card__excerpt {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  flex: 1 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-small);
  color: var(--color-navy);
  text-decoration: none;
  margin-top: auto;
}
.post-card__cta:hover {
  color: var(--color-navy-deep);
  text-decoration: underline;
}
.post-card__cta:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Container narrow — used for blog post single-column layout. */
.container--narrow {
  max-width: 800px;
}

/* Blog post page styles (prose + metadata). */
.post-hero {
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-paper-2);
}
.post-hero img {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: cover;
}
.post-hero figcaption {
  padding: var(--space-3) var(--space-4);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  color: var(--color-ink-2);
  font-size: var(--font-size-small);
}
.post-meta time {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
}
.post-meta__author {
  margin: 0;
}

.post-body {
  max-width: var(--measure);
}
.post-body.prose h2 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.post-body.prose h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}
.post-body.prose p {
  margin-bottom: var(--space-4);
}
.post-body.prose ul,
.post-body.prose ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}
.post-body.prose li {
  margin-bottom: var(--space-2);
}
.post-body.prose blockquote {
  border-left: 3px solid var(--color-navy);
  padding-left: var(--space-4);
  margin: var(--space-5) 0;
  color: var(--color-ink-2);
  font-style: italic;
}
.post-body.prose img {
  max-width: 100%;
  border-radius: var(--radius-md);
}

.post-back {
  margin-bottom: var(--space-5);
}
.post-back a {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-ink-2);
  text-decoration: none;
}
.post-back a:hover {
  color: var(--color-navy);
  text-decoration: underline;
}
.post-back--bottom {
  margin-top: var(--space-8);
  margin-bottom: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.contact-form {
  display: grid;
  gap: var(--space-5);
  max-width: 720px;
}

.contact-form__field {
  display: grid;
  gap: var(--space-2);
}

.contact-form__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 160px;
}

.contact-form__input:focus-visible,
.contact-form__textarea:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 4px rgba(0, 64, 128, 0.12);
}

.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.contact-form__hint {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-ink-2);
  max-width: 48ch;
}

/* Netlify Forms honeypot — hidden from humans, visible to bots. */
.contact-form__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact thanks (post-submit) page — narrow centered editorial column. */
.contact-thanks {
  padding-top: calc(80px + var(--space-9));
  padding-bottom: var(--space-9);
}
.contact-thanks__inner {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
}
.contact-thanks__inner .hero__eyebrow {
  margin-bottom: var(--space-4);
}
.contact-thanks__inner .hero__display {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.contact-thanks__inner .hero__lead {
  margin-left: auto;
  margin-right: auto;
}

.contact-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: var(--space-7);
  align-items: center;
}
.contact-cta__inner .mono-meta {
  margin: 0 0 var(--space-3);
  color: var(--color-sun);
  opacity: 0.95;
}
.contact-cta__inner h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  max-width: 22ch;
  margin: 0;
  color: var(--color-cream);
}
@media (max-width: 768px) {
  .contact-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* -----------------------------------------------------------------------------
 * Mid-page emphasis bands — stat strip and pull-quote (VAL-DESIGN-017)
 *
 * Two visually distinct band types that break up the page rhythm between
 * major sections. Both sit between surrounding paper or navy sections and
 * collapse to single column below 980px.
 * -----------------------------------------------------------------------------
 */

/* --- Pull-quote band (.band--quote) --------------------------------------
 * Full-width navy-deep background with sun-glow upper-right + green-glow
 * lower-left atmosphere. A single editorial pull-quote in display type
 * (Manrope 800, sized between h1 and h2) in paper colour, and an
 * attribution line in IBM Plex Mono below.
 * Used on About between company narrative and team sections.
 * ---------------------------------------------------------------------- */
.band--quote {
  background-color: var(--color-navy-deep);
  position: relative;
  padding: var(--space-9) 0;
  overflow: hidden;
}

.band--quote > .container {
  position: relative;
  z-index: 1;
}

.band--quote__quote {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: 40px;
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-headline);
  color: var(--color-paper);
  max-width: 24ch;
  margin: 0 0 var(--space-5);
}

.band--quote__attribution {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-cream);
  opacity: 0.75;
  margin: 0;
}

@media (max-width: 980px) {
  .band--quote {
    padding: var(--space-7) 0;
  }
  .band--quote__quote {
    font-size: var(--font-size-h2);
  }
}

@media (max-width: 640px) {
  .band--quote__quote {
    font-size: 30px;
    max-width: 30ch;
  }
}

/* 404 Not Found page — two-column layout with botanical conifer motif */
.not-found {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.not-found__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  max-width: var(--max-content-width);
}
/* Motif container — opacity capped at 0.30 per VAL-DESIGN-025 */
.not-found__motif {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.30;
  pointer-events: none;
}
.not-found__conifer {
  width: 100%;
  max-width: 320px;
  height: auto;
}
/* Decorative 404 code (not the h1 — aria-hidden, but kept contrast-safe) */
.not-found__code {
  font-size: 96px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-ink-2);
  margin: 0 0 var(--space-3);
}
/* Headline — Option C: sentence case, terminal period, weight 800 */
.not-found__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-headline);
  margin: 0 0 var(--space-4);
  color: var(--color-navy-deep);
}
.not-found__body {
  margin: 0 0 var(--space-8);
  color: var(--color-ink);
  max-width: 48ch;
}
.not-found__message {
  text-align: left;
}
/* Mobile: stack motif above message, motif smaller */
@media (max-width: 640px) {
  .not-found__layout {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-5);
  }
  .not-found__motif {
    order: -1;
  }
  .not-found__conifer {
    max-width: 160px;
  }
  .not-found__message {
    text-align: center;
  }
  .not-found__code {
    font-size: 64px;
  }
}

/* -----------------------------------------------------------------------------
 * Figure + figcaption — coordinate-style mono captions (VAL-DESIGN-019)
 *
 * Every photographic <img> (outside the chrome — header logo is exempt)
 * is wrapped in <figure> with a <figcaption> in IBM Plex Mono uppercase.
 * Caption format: FIG. NN · TOPIC · DETAIL
 *   e.g. FIG. 01 · COMMUNITY ATLAS · WORKSHOP
 *        FIG. 02 · LAND COVER · 1:25,000
 *
 * Figcaption styling:
 *   IBM Plex Mono uppercase, ~12–13px, border-top 1px line-token,
 *   padding-top 8–12px, color ink-2.
 * -----------------------------------------------------------------------------
 */
figure {
  margin: 0;
  padding: 0;
}

figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-ink-2);
  border-top: 1px solid var(--color-line);
  padding-top: 10px;
  margin-top: var(--space-2);
  line-height: var(--line-height-tight);
}

/* Navy-surface figcaption: adjust border + text colour for contrast */
.section--navy figcaption,
.hero--navy figcaption,
.hero--photo figcaption,
.site-footer figcaption,
.band--quote figcaption {
  border-top-color: rgba(247, 239, 220, 0.25);
  color: var(--color-cream);
  opacity: 0.85;
}

/* Photo-overlay hero: position figcaption lower-left, above gradient */
.hero--photo figcaption {
  position: relative;
  z-index: 3;
  color: var(--color-cream);
  opacity: 0.85;
}

/* Blog featured-row hero figcaption */
.list-row__hero figcaption {
  font-size: 11px;
  padding-top: 8px;
}

/* Blog post hero figcaption */
.post-hero figcaption {
  margin-top: var(--space-3);
}

/* Blog post body figure */
.post-body figure {
  margin: var(--space-5) 0;
}
.post-body figcaption {
  margin-top: var(--space-2);
}

/* -----------------------------------------------------------------------------
 * Inline photo figures — body photography within page sections (VAL-DESIGN-020)
 *
 * Used for placing photographic content inline within service areas,
 * about sections, and other page-body content. Each uses the coordinate-
 * mono caption pattern (VAL-DESIGN-019).
 * -----------------------------------------------------------------------------
 */
.photo-inline {
  margin: var(--space-5) 0 var(--space-4);
  max-width: 640px;
}

.photo-inline img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

.photo-inline--wide {
  max-width: 800px;
}

/* Service-area inline photos — constrain to deliverables column width */
.service-area__body .photo-inline {
  max-width: 560px;
}

/* About inline photos — allow wider layout on desktop */
@media (min-width: 980px) {
  .about-company__prose .photo-inline {
    max-width: 720px;
  }
}

/* -----------------------------------------------------------------------------
 * Closing photo strip — Past Work project detail pages (VAL-DESIGN-021)
 *
 * A full-bleed navy-overlaid photo strip at the end of each project
 * detail page. Similar to the home hero photo overlay but shorter
 * (~360px tall). Layers (bottom-to-top):
 *   1. <picture> photograph (.closing-strip__photo) — fills the strip
 *   2. Navy linear-gradient overlay (.closing-strip__navy) — 135deg sweep
 *   3. Sun radial overlay (.closing-strip__sun) — warm glow upper-right
 *   4. Caption line (<figcaption> inside .closing-strip__photo) — IBM Plex Mono lower-left
 *      formatted per VAL-DESIGN-019: FIG. END · TOPIC · NEXT PROJECT
 * -----------------------------------------------------------------------------
 */
.closing-strip {
  position: relative;
  min-height: 360px;
  background-color: var(--color-navy-deep); /* fallback while photo loads */
  overflow: hidden;
}

.closing-strip__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.closing-strip__photo picture,
.closing-strip__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.closing-strip__photo figcaption {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-4);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  font-weight: var(--font-weight-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cream);
  border-top: 1px solid rgba(247, 239, 220, 0.25);
  padding-top: var(--space-2);
  margin: 0;
}

.closing-strip__navy {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    var(--color-navy-deep) 0%,
    rgba(0, 26, 58, 0.85) 50%,
    rgba(0, 26, 58, 0.25) 100%
  );
  pointer-events: none;
}

.closing-strip__sun {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    circle at 92% 0%,
    rgba(240, 176, 64, 0.65) 0%,
    transparent 55%
  );
  pointer-events: none;
}

.closing-strip__nav-link {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  font-weight: var(--font-weight-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cream);
  opacity: 0.85;
  text-decoration: none;
  margin-top: var(--space-4);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  padding-bottom: var(--space-6);
  transition: opacity 0.2s ease;
}
.closing-strip__nav-link:hover,
.closing-strip__nav-link:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.closing-strip__nav-link:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .closing-strip {
    min-height: 280px;
  }
  .closing-strip__photo figcaption {
    bottom: var(--space-4);
    left: var(--space-3);
  }
}

/* -----------------------------------------------------------------------------
 * Project detail page (design system §09)
 *
 * Pattern:
 *   • Hero: breadcrumb path + route-line motif + 2-col title/facts grid
 *   • Body: 2-col grid (prose 1.4fr / deliverables 1fr) with an eyebrow + lede
 *   • Mid-page navy stat band: 3 numbers + sun suffixes + cream labels
 *   • Botanical close: "Next project →" link + conifer SVG
 * -----------------------------------------------------------------------------
 */

/* Hero breadcrumb path eyebrow. Mono, cream/.55, mid-dot separators. */
.project-hero__breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-cream);
  opacity: 0.55;
  margin: 0 0 var(--space-4);
}
.project-hero__breadcrumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}
.project-hero__breadcrumb a:hover,
.project-hero__breadcrumb a:focus-visible {
  color: var(--color-cream);
  opacity: 1;
  border-bottom-color: var(--color-sun);
}

/* Route-line motif row above the title block. Inline SVG with stage labels. */
.project-hero__route {
  margin: var(--space-3) 0 var(--space-6);
}
.project-hero__route svg {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
}

/* Project body — 2-col grid: prose left, deliverables right. */
.project-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: start;
}
.project-body__prose > p {
  max-width: var(--measure);
}
.project-body__lede {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-navy-deep);
  margin: 0 0 var(--space-5);
  max-width: 34ch;
}
.project-body__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-navy);
  margin: 0 0 var(--space-4);
}
@media (max-width: 980px) {
  .project-body {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

/* Mid-page navy stat band: 3 numbers + sun suffix + cream label. */
.project-stats {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.project-stats__grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: baseline;
}
.project-stats__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-cream);
  opacity: 0.55;
  align-self: center;
  margin: 0;
}
.project-stats__pair {
  border-top: 1px solid rgba(247, 239, 220, 0.18);
  padding-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.project-stats__num {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.project-stats__value {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: 48px;
  line-height: 0.9;
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-cream);
  margin: 0;
}
.project-stats__suffix {
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing-meta);
  color: var(--color-sun);
  margin: 0;
}
.project-stats__label {
  color: var(--color-cream);
  opacity: 0.7;
  font-size: var(--font-size-small);
  max-width: 24ch;
  margin: 0;
}
@media (max-width: 980px) {
  .project-stats__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
  .project-stats__eyebrow {
    grid-column: 1 / -1;
  }
  .project-stats__value {
    font-size: 40px;
  }
}
@media (max-width: 640px) {
  .project-stats__grid {
    grid-template-columns: 1fr;
  }
}

/* Botanical close: "Next project →" link + small conifer SVG on right. */
.project-close-next {
  padding-top: var(--space-8);
  padding-bottom: var(--space-9);
}
.project-close-next__inner {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: var(--space-8);
  align-items: center;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-7);
}
.project-close-next__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
  color: var(--color-navy);
  margin: 0 0 var(--space-3);
}
.project-close-next__title {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--color-navy-deep);
  text-decoration: none;
  margin: 0;
  max-width: 22ch;
  transition: color 160ms ease;
}
.project-close-next__title:hover,
.project-close-next__title:focus-visible {
  color: var(--color-navy);
}
.project-close-next__motif {
  color: var(--color-green);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-close-next__motif svg {
  width: 100%;
  height: 100%;
  max-height: 180px;
}
@media (max-width: 640px) {
  .project-close-next__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .project-close-next__motif {
    height: 140px;
    justify-content: flex-start;
  }
  .project-close-next__motif svg {
    max-height: 140px;
  }
}