@font-face{font-family:"Archivo";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/fonts/archivo-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/poppins-300.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-600.woff2") format("woff2")}

/* K. Karakosta Q.S. L.L.C.
   Brand colours are hers, measured off the capability statement and converted
   to OKLCH; the source hex sits in the comment so each value stays checkable. */

:root {
  --navy:       oklch(23.3% 0.094 264.9);  /* #071849 */
  --navy-rule:  oklch(34.2% 0.098 267.4);  /* #22346B */
  --orange:     oklch(66.3% 0.195 39.1);   /* #F15C22  5.09:1 on navy — measured off her logo PDF 2026-09-25 */
  --orange-ink: #B04218;                    /* 5.77:1 on white, 4.73 on panel (was #C24A1B, 4.01 on panel, failed AA) — same hue as --orange */
  --ink:        oklch(23.3% 0.094 264.9);  /* 16.99:1 on white */
  --ink-mute:   oklch(42.9% 0.035 261.3);  /* #455063  8.14 white / 6.66 panel */
  --on-navy:    oklch(100% 0 0);
  --on-navy-mute: oklch(81.3% 0.033 266.1);/* #B8C2D8  9.50:1 on navy */
  --paper:      oklch(100% 0 0);
  --panel:      oklch(93.2% 0.006 239.8);  /* #E5E9EC */
  --hair:       oklch(87% 0.008 250);

  --display: "Poppins", system-ui, sans-serif;
  --body: "Archivo", system-ui, sans-serif;

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --wide: 78rem;
  --read: 38rem;

  --z-header: 40;

  --out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

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

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

a { color: var(--orange-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

img { max-width: 100%; height: auto; display: block; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut); }

/* Her capability statement divides every navy block from every photograph with
   a single angled orange wedge. It is the one structural motif the brand owns,
   so it carries the section transitions here too. */
.wedge {
  height: clamp(28px, 4vw, 58px);
  background: var(--orange);
}
.wedge--down { clip-path: polygon(0 0, 100% 0, 100% 42%, 0 100%); }
.wedge--up   { clip-path: polygon(0 58%, 100% 0, 100% 100%, 0 100%); }

.navy { background: var(--navy); color: var(--on-navy); }
.navy h1, .navy h2, .navy h3 { color: var(--on-navy); }
.navy p { color: var(--on-navy-mute); }

/* ── header ─────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--navy);
  border-bottom: 1px solid var(--navy-rule);
}
.site-head .shell {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.25rem;
}
/* Her lockup is mark + name on one baseline. The mark is set in em so it
   tracks the type rather than needing its own breakpoint. */
.wordmark {
  display: flex; align-items: center; gap: 0.625em;
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -0.01em; color: var(--on-navy); text-decoration: none;
  margin-right: auto; white-space: nowrap;
}
.mark { width: auto; height: 1.35em; fill: var(--orange); flex: none; }
.wordmark-text span { color: var(--orange); }
/* the mark alone carries the brand once the row is tight */
@media (max-width: 22rem) { .wordmark-text { display: none; } }
.site-nav { display: flex; gap: clamp(0.875rem, 2.5vw, 2.25rem); } /* 8 items + wordmark fit one 768px row (measured 2026-09-25) */
.site-nav a {
  color: var(--on-navy-mute); text-decoration: none;
  font-size: 0.9375rem;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color 0.25s var(--out), border-color 0.25s var(--out);
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--on-navy); border-bottom-color: var(--orange); }

/* ── hero ───────────────────────────────────────────────────────────── */

/* full-bleed photo with the wording on top (her brief, 2026-10-05); the navy
   scrim keeps the type at contrast over any part of the shot */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(30rem, 72vh, 44rem);
  display: grid; align-items: end;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, oklch(21% 0.09 268 / 0.55), oklch(21% 0.09 268 / 0.88));
}
.hero-inner { width: 100%; }
.hero-kicker {
  font: 600 0.8125rem/1.4 var(--body); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 1.25rem;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  font-weight: 600; max-width: 14ch;
}
.hero-lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  margin-top: 1.5rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2rem; }

/* stats band: her three stand-out figures under the hero */
.stats { background: var(--navy); color: var(--on-navy); padding-block: clamp(2.5rem, 5vw, 4rem); }
.stats-row {
  display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--navy-rule);
}
.stats-row div { padding: 1.5rem 1.5rem 0; text-align: center; border-right: 1px solid var(--navy-rule); }
.stats-row div:last-child { border-right: 0; }
.stats-row dt {
  font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1; color: var(--orange);
}
.stats-row dd { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--on-navy-mute); }

/* credential strip: two facts, ruled, not cards (Established dropped, Demetri 2026-10-12) */
.creds {
  display: grid; gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--navy-rule);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.creds div {
  padding: 1.25rem 1.5rem 0; text-align: center;
  border-right: 1px solid var(--navy-rule);
}
.creds div:last-child { border-right: 0; }
.creds dt {
  font-family: var(--display); font-weight: 600; font-size: 0.9375rem;
  color: var(--on-navy);
}
.creds dd { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--on-navy-mute); }

/* ── generic section ────────────────────────────────────────────────── */

.band { padding-block: clamp(3.5rem, 7vw, 6rem); }
.band--panel { background: var(--panel); }
.band-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.band-head h1, .band-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
.band-head p { margin-top: 1rem; color: var(--ink-mute); }
.navy .band-head p { color: var(--on-navy-mute); }
/* intros under headings run the full content width (Demetri 2026-10-12); the projects intro drops to 1rem to hold one line */
@media (min-width: 1180px) { .band-head .one-line { font-size: 1rem; } }

/* ── the schedule ───────────────────────────────────────────────────── */
/* Projects are priced work, so they are set as a ruled schedule with figures
   in a column that adds up, not as a grid of cards. */

.schedule { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.schedule caption { text-align: left; color: var(--ink-mute); font-size: 0.875rem; padding-bottom: 0.75rem; }
.schedule th {
  text-align: left; font-family: var(--display); font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0 0.75rem 0.6rem 0;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.schedule td {
  padding: 0.95rem 0.75rem 0.95rem 0;
  border-bottom: 1px solid var(--hair);
  vertical-align: baseline;
}
.schedule tbody tr { transition: background-color 0.2s var(--out); }
.schedule tbody tr:hover { background: var(--panel); }
.schedule .num {
  text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; padding-right: 0;
}
.schedule th.num { text-align: right; padding-right: 0; }
.sched-name { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.sched-name a { color: var(--ink); text-decoration: none; }
.sched-name a:hover { color: var(--orange-ink); text-decoration: underline; }
.sched-place { display: block; font-weight: 400; color: var(--ink-mute); font-size: 0.875rem; margin-top: 0.15rem; }
.sector { color: var(--ink-mute); white-space: nowrap; }

/* the whole row is the link target; the name link inside still carries focus */
.schedule tbody tr { cursor: pointer; }

/* filters: four native selects, each option carries its count */
.filters { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end; margin-bottom: 1.75rem; }
.filters label {
  display: grid; gap: 0.35rem;
  font: 600 0.75rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute);
}
.filters select {
  font: 500 0.9375rem/1.2 var(--body); color: var(--ink);
  padding: 0.55rem 2rem 0.55rem 0.75rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23455063' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  border: 1px solid var(--hair); border-radius: 4px;
  appearance: none; -webkit-appearance: none;
  min-width: 11rem; max-width: 100%;
}
.filters select:hover { border-color: var(--ink-mute); }
.filter-count { flex-basis: 100%; margin: 0; font-size: 0.875rem; color: var(--ink-mute); }

/* ── city index ─────────────────────────────────────────────────────── */

.city-index {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start;
}
/* columns, not grid: NL has 6 cities to CY 3 + UK 2, so balancing stacks CY+UK beside NL */
.ci-countries { columns: 2 16rem; column-gap: clamp(1.5rem, 3vw, 2.5rem); }
.ci-country { break-inside: avoid; padding-bottom: 2rem; }
.ci-country h3 {
  font: 500 0.875rem/1.3 var(--body); color: var(--on-navy-mute);
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--on-navy-mute);
}
.ci-list { list-style: none; margin: 0; padding: 0; }
.ci-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--navy-rule);
  font: 600 clamp(1.25rem, 1.9vw, 1.625rem)/1.2 var(--display); letter-spacing: -0.01em;
  color: var(--on-navy); text-decoration: none;
  touch-action: manipulation; transition: color 0.2s var(--out);
}
.ci-n { font: 500 0.9375rem/1 var(--body); color: var(--on-navy-mute); font-variant-numeric: tabular-nums; }
.ci-list a.is-on { color: var(--orange); }
/* a city with nothing left in the filtered schedule drops back */
.ci-list a.is-off { color: var(--on-navy-mute); }
@media (hover: hover) and (pointer: fine) { .ci-list a:hover { color: var(--orange); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* every card in one cell: the plate is as tall as its tallest card, so no jump */
.ci-plate { display: grid; }
.ci-card {
  grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--out), visibility 0s linear 0.35s;
}
.ci-card.is-shown { opacity: 1; visibility: visible; transition: opacity 0.35s var(--out); }
.ci-card img, .ci-type { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ci-card img { transform: scale(1.03); transition: transform 0.6s var(--out); }
.ci-card.is-shown img { transform: none; }
/* a city with no project photo is set in type, never shown another city's photo */
.ci-type {
  display: flex; align-items: flex-end; padding: 1.25rem;
  background: var(--navy-rule); color: var(--on-navy);
  font: 600 clamp(1.75rem, 3vw, 2.5rem)/1.05 var(--display); letter-spacing: -0.02em;
}
.ci-card figcaption { padding-top: 0.75rem; font-size: 0.875rem; color: var(--on-navy-mute); }
.ci-card figcaption strong { color: var(--on-navy); font-weight: 600; }
.ci-card figcaption span { display: block; margin-top: 0.25rem; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .ci-card, .ci-card img { transition: none; } .ci-card img { transform: none; } }
.panel-close {
  position: absolute; top: 0.4rem; right: 0.4rem;
  width: 1.75rem; height: 1.75rem; line-height: 1;
  background: transparent; border: 0; cursor: pointer;
  font-size: 1.5rem; color: var(--ink-mute);
}
.panel-close:hover { color: var(--ink); }
/* the city links jump here (no-JS route); clear the sticky header */
#grid { scroll-margin-top: 4.5rem; }

/* ── services ───────────────────────────────────────────────────────── */
/* Small boxes, title + subtitle (her brief, 2026-10-05). */

/* service boxes: her brochure's angled band as the card device. Top-right corner
   cut on the same angle, an orange rule drawn across the top (motion.js tweens
   --draw 0 to 1 on reveal; rest state 1 = no-JS), icon in a navy tile.
   Demetri 2026-10-12: three columns on /services/, new box style, animated. */
.services { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service {
  --cut: 1.5rem;
  position: relative; display: block; padding: 1.75rem 1.75rem 2rem;
  background: var(--panel); color: var(--ink); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: transform 0.3s var(--out);
}
.service::before {
  content: ""; position: absolute; left: 0; top: 0; right: var(--cut); height: 3px;
  background: var(--orange); transform: scaleX(var(--draw, 1)); transform-origin: left;
}
.band--panel .service { background: var(--paper); }
.service-icon {
  display: block; box-sizing: content-box; width: 1.5rem; height: 1.5rem; padding: 0.625rem; margin-bottom: 1.25rem;
  background: var(--navy); color: var(--orange); stroke-width: 1.75; border-radius: 2px;
  transition: background 0.25s var(--out), color 0.25s var(--out);
}
.service h2, .service h3 { font-size: 1.125rem; text-wrap: balance; transition: color 0.2s var(--out); }
.service p { margin-top: 0.5rem; color: var(--ink-mute); font-size: 0.9375rem; max-width: 30rem; text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) {
  .service:hover .service-icon { background: var(--orange); color: var(--paper); }
  a.service:hover { transform: translateY(-3px); }
  a.service:hover h3 { color: var(--orange-ink); }
}
@media (min-width: 64rem) {
  .services--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* ten services: 3+3+3, then the tenth runs the full width as a closing row */
  .services--3 > .service:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1; display: grid; gap: 0.5rem clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: auto minmax(0, 18rem) minmax(0, 1fr); align-items: start;
  }
  .services--3 > .service:last-child:nth-child(3n + 1) .service-icon { margin-bottom: 0; }
  .services--3 > .service:last-child:nth-child(3n + 1) p { margin-top: 0; max-width: none; }
}

/* projects: four sector tiles, photo with the sector name on top */
.sector-tiles { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { position: relative; display: block; overflow: hidden; border-radius: 2px; isolation: isolate; }
.tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.6s var(--out); }
.tile:hover img { transform: scale(1.04); }
.tile--plate { aspect-ratio: 4 / 5; background: var(--navy-rule); }
.tile span {
  position: absolute; inset: auto 0 0; padding: 3rem 1.25rem 1.25rem;
  font: 600 1.25rem/1.2 var(--display); color: var(--on-navy);
  background: linear-gradient(180deg, transparent, oklch(21% 0.09 268 / 0.85));
}

/* projects: photo grid with a side panel on click; cards without a photo get a sector plate */
.pgrid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcard { display: block; text-decoration: none; color: var(--ink); }
.pcard img, .pcard-blank { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--panel); border-radius: 2px; }
.pcard-blank { display: grid; place-items: center; font: 600 0.8125rem/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.pcard-body { display: block; margin-top: 0.85rem; }
.pcard-body strong { display: block; font: 600 1.0625rem/1.3 var(--display); transition: color 0.2s var(--out); }
.pcard-body span { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--ink-mute); }
.pcard:hover .pcard-body strong { color: var(--orange-ink); }

dialog.panel {
  width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  margin: auto; padding: 0; border: 0; border-radius: 3px;
  background: var(--paper, #fff); color: var(--ink);
  box-shadow: 0 24px 64px oklch(0% 0 0 / 0.4);
}
dialog.panel::backdrop { background: oklch(21% 0.09 268 / 0.6); }
.panel-body { padding: 1.5rem; }
.panel-body > img { display: block; width: calc(100% + 3rem); margin: -1.5rem -1.5rem 1.25rem; aspect-ratio: 3 / 2; object-fit: cover; }
.panel-body h2 { font-size: 1.5rem; padding-right: 2rem; }
.panel-body .place { margin-top: 0.25rem; color: var(--ink-mute); }
.panel-body .facts { margin-top: 1.25rem; border-top-color: var(--hair); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-body .facts div { border-right-color: var(--hair); border-bottom: 1px solid var(--hair); padding: 0.9rem 1rem 0.9rem 0; }
.panel-body .facts dt { color: var(--ink-mute); }
.panel-body .facts dd { font-size: 1.0625rem; }
.panel-body > p:not(.place) { margin-top: 1.25rem; color: var(--ink-mute); font-size: 0.9375rem; }
.panel-body h3 { margin-top: 1.25rem; font-size: 1rem; }
.panel-body h3 + p { margin-top: 0.5rem; }
.panel-body .btn { margin-top: 1.25rem; }

/* homepage: four service names, same ruled list, no bodies */
.service-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-list li { border-top: 1px solid var(--hair); }
.service-list a { display: block; padding: 1.1rem 0; font: 600 1.125rem/1.3 var(--display); color: var(--ink); text-decoration: none; }
.service-list a:hover { color: var(--orange-ink); }

/* homepage: four project cards */
.cards { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: block; text-decoration: none; color: var(--ink); }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--panel); }
.card h3 { font-size: 1.0625rem; margin-top: 0.85rem; transition: color 0.2s var(--out); }
.card p { margin-top: 0.25rem; font-size: 0.875rem; color: var(--ink-mute); }
.card:hover h3 { color: var(--orange-ink); }
.zoom { display: block; overflow: hidden; border-radius: 2px; }
.zoom img { transition: transform 0.6s var(--out); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .zoom img, .pcard:hover .zoom img { transform: scale(1.04); }
}

/* ── founder ────────────────────────────────────────────────────────── */

.founder { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 14rem minmax(0, 1fr); align-items: start; }
.founder img { border-radius: 2px; }
.founder-body { max-width: var(--read); }
.founder-body p { color: var(--ink-mute); }
.founder-body p + p { margin-top: 1rem; }
.closing { margin-top: clamp(2rem, 4vw, 3rem); max-width: var(--read); font: 300 clamp(1.125rem, 2vw, 1.5rem)/1.4 var(--display); }
/* NGO row: logo plate beside the paragraph */
.ngo { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 8rem minmax(0, 1fr); align-items: start; }
.ngo img { display: block; width: 100%; height: auto; border-radius: 2px; }
.ngo .ngo-photo { grid-column: 1 / -1; aspect-ratio: 3 / 2; object-fit: cover; }
.ngo-links { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 1.25rem 0 0; }
.ngo-links a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--hair); border-radius: 50%; color: var(--ink); transition: color 0.2s var(--out), border-color 0.2s var(--out); }
@media (hover: hover) and (pointer: fine) { .ngo-links a:hover { color: var(--orange-ink); border-color: var(--orange-ink); } }
.ngo-icon { width: 1.25rem; height: 1.25rem; }

.quote { border-top: 2px solid var(--orange); padding-top: 1.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 46rem; }
.quote blockquote { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.4; }
.quote figcaption { margin-top: 1rem; font-size: 0.875rem; color: var(--ink-mute); }
.navy .quote figcaption { color: var(--on-navy-mute); }

/* ── project detail ─────────────────────────────────────────────────── */

.proj-head { padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.proj-head h1 { font-size: clamp(2rem, 4.4vw, 3.5rem); }
.proj-head .place { font-family: var(--display); font-weight: 300; font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--orange); margin-top: 0.5rem; }

/* this block sits on navy, so its rules and labels come off the navy ramp.
   --hair/--ink-mute are the white-ground pair; --ink-mute measures 2.09:1
   here, under the 4.5:1 floor. --on-navy-mute measures 9.50:1. */
/* four fixed tracks, not auto-fit: a project missing its area or appointment
   then leaves a gap on the right instead of stretching two facts across the
   page, so the rules land in the same place on every project. */
.facts { display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--navy-rule); margin-top: clamp(2rem, 4vw, 3rem); }
.facts div { padding: 1.25rem 1.5rem 1.25rem 0; border-right: 1px solid var(--navy-rule); }
.facts div:last-child { border-right: 0; }
.facts dt { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-navy-mute); }
.facts dd { margin: 0.4rem 0 0; font-family: var(--display); font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* The photographs are lifted out of her capability statement, so most are
   only ~380px wide and cannot be scaled up. Sitting the scope text beside
   them fills the measure instead of leaving one small photo in a wide field. */
/* `auto` on the figure track, not 1fr: the small photos then sit at their own
   width with the text right beside them, and the wide ones are capped by
   what's left over rather than pushing the prose off the measure. */
.proj-body { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: auto minmax(0, var(--read)); align-items: start; }
.proj-body--bare { grid-template-columns: minmax(0, 1fr); }
.proj-shot { margin: 0; position: sticky; top: 5rem; }
/* one portrait-ish photo would otherwise set the band height and strand the
   scope text at the top of an empty half-page */
.proj-shot img { max-height: 32rem; width: auto; }

.prose { max-width: var(--read); }
.prose h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.prose p { color: var(--ink-mute); }
.prose h2 + h2, .prose p + h2, .prose ul + h2 { margin-top: 2rem; }
.involved { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; color: var(--ink-mute); }
.involved strong { color: var(--ink); }
.gallery { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(2rem, 4vw, 3.5rem); }
.gallery figure { margin: 0; }
.trio { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2rem, 4vw, 3rem); }
.trio figure { margin: 0; }
.trio img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.trio figcaption { margin-top: 0.6rem; font: 600 0.8125rem/1.3 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.gallery img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.pgrid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.back { display: inline-block; margin-top: 2rem; font-size: 0.9375rem; }

/* ── footer ─────────────────────────────────────────────────────────── */

.site-foot { padding-block: clamp(3rem, 6vw, 4.5rem); font-size: 0.9375rem; }
/* three equal tracks */
.site-foot .shell { display: grid; gap: 2rem 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-foot .shell > div { padding-right: 1.5rem; }
.site-foot h2 { font-size: 1rem; margin-bottom: 0.75rem; }
.site-foot a { color: var(--on-navy); }
/* the country tag is the label, not the number: quieter, and never mistaken for
   part of the digits */
.site-foot .foot-loc { color: var(--on-navy-mute); font-size: 0.8125rem; }
/* the legal line belongs under the columns, not beside them as a fourth one */
.site-foot .fine {
  grid-column: 1 / -1; margin-top: 1rem; padding-top: 1.5rem;
  border-top: 1px solid var(--navy-rule);
  color: var(--on-navy-mute); font-size: 0.8125rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem;
}
.site-foot .fine p { margin: 0; }
.site-foot .fine .built { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.site-foot .fine .built a { color: inherit; display: block; }
/* the agency mark is specified for white backgrounds only, so it sits on a small plate */
.site-foot .fine .built img { display: block; width: 120px; flex-shrink: 0; height: auto; background: #fff; padding: 4px 6px; border-radius: 2px; }
.site-foot .fine .mark { height: 1.5rem; }
/* two navy blocks meeting reads as one band with a hole in it: drop the seam.
   flow-root keeps the last child's bottom margin inside the navy instead of
   letting it collapse out as a white stripe above the footer. */
main > section.navy:last-child { padding-bottom: 0; display: flow-root; }

/* A value we have not been given yet must be impossible to miss in review and
   impossible to ship. build.js refuses to emit a production build while any
   remain. */
.tbc {
  background: var(--orange); color: var(--navy);
  font: 600 0.75rem/1 var(--body); letter-spacing: 0.04em;
  padding: 0.3rem 0.5rem; border-radius: 2px; display: inline-block;
}

/* ── nav dropdown ───────────────────────────────────────────────────── */
/* <details> is the native disclosure widget: it opens on tap and on Enter
   with no JS and no hover dependency, which is the brief's mobile rule. */

.nav-drop { position: relative; }
.nav-drop summary {
  list-style: none; cursor: pointer;
  color: var(--on-navy-mute); font-size: 0.9375rem;
  padding-block: 0.4rem; border-bottom: 2px solid transparent;
  transition: color 0.25s var(--out), border-color 0.25s var(--out);
}
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary::after {
  content: ""; display: inline-block; margin-left: 0.45rem;
  border: 0.3rem solid transparent; border-top-color: currentColor;
  transform: translateY(0.15rem);
  transition: transform 0.25s var(--out);
}
.nav-drop summary:hover, .nav-drop[data-here] summary { color: var(--on-navy); }
.nav-drop[data-here] summary { border-bottom-color: var(--orange); }
.nav-drop[open] summary::after { transform: translateY(-0.05rem) rotate(180deg); }
.nav-drop summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.nav-panel {
  position: absolute; top: calc(100% + 0.65rem); left: -1rem;
  z-index: var(--z-header);
  /* display:grid would beat the UA rule that hides a closed details' content,
     so the panel only gets a box once the disclosure is actually open. */
  display: none; min-width: 12rem;
  background: var(--navy); border: 1px solid var(--navy-rule);
  padding: 0.35rem 0;
}
.nav-drop[open] .nav-panel { display: grid; }
.nav-panel a {
  padding: 0.55rem 1rem; border-bottom: 0; white-space: nowrap;
}
.nav-panel a:hover, .nav-panel a[aria-current] {
  border-bottom: 0; background: var(--navy-rule); color: var(--on-navy);
}

/* ── why / places / faq / contact / verify ──────────────────────────── */

.service h2 { font-size: 1.125rem; }

.why { display: grid; gap: 0 clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.why div { padding: 1.5rem 0; border-top: 1px solid var(--hair); }
.why dt { font: 600 1.0625rem/1.3 var(--display); }
.why dd { margin-top: 0.4rem; color: var(--ink-mute); font-size: 0.9375rem; max-width: 30rem; }

.places { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.place h2 { font-size: 1.25rem; }
.place p { margin-top: 0.65rem; color: var(--ink-mute); font-size: 0.9375rem; }
.place-cities { color: var(--ink) !important; font-size: 0.875rem !important; }
.place-count {
  font: 600 0.8125rem/1 var(--body); letter-spacing: 0.04em;
  color: var(--orange-ink) !important;
}

/* One question per row: this page is read, and it is the page an answer engine
   lifts a paragraph out of. The answer keeps reading measure; the question sits
   beside it rather than above, so the list fills the shell instead of leaving
   the right half of a desktop viewport empty. */
/* One question per row, collapsed until clicked (her brief, 2026-10-05).
   Native <details>: the answer is still in the HTML for an answer engine. */
.faq { display: grid; max-width: 52rem; }
.band--panel .qa { border-top-color: oklch(80% 0.01 250); }
.qa { border-top: 1px solid var(--hair); }
.qa summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font: 300 1.5rem/1 var(--display); color: var(--orange-ink); }
.qa[open] summary::after { content: "\2013"; }
.qa h2, .qa h3 { font-size: 1.125rem; display: inline; }
.qa summary:hover h2, .qa summary:hover h3 { color: var(--orange-ink); }
.qa p { margin: 0 0 1.25rem; color: var(--ink-mute); max-width: var(--read); }
.qa a { color: var(--orange-ink); }

.contact-list { display: grid; gap: 0; max-width: var(--read); margin-top: 2.5rem; }
.contact-list div {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--hair);
}
.contact-list dt { color: var(--ink-mute); font-size: 0.875rem; }
.contact-list dd { font-size: 1.0625rem; }

.prose p + p { margin-top: 1rem; }

.related { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--hair); }
.related h2 { font-size: 1.0625rem; margin-bottom: 0.9rem; }
.related ul { list-style: none; display: grid; gap: 0; }
.related li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem;
  padding: 0.6rem 0; border-top: 1px solid var(--hair);
}
.related li:first-child { border-top: 0; }
.related li span { color: var(--ink-mute); font-size: 0.875rem; }
.related .back { margin-top: 1.25rem; }

.verify { list-style: none; display: grid; gap: 0; max-width: var(--read); }
.verify li { padding: 1rem 0; border-top: 1px solid var(--hair); }
.verify li a { font-size: 1.0625rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2rem; }
.btn {
  display: inline-block; text-decoration: none;
  background: var(--orange); color: var(--navy);
  font: 600 0.9375rem/1 var(--body);
  padding: 0.95rem 1.5rem;
  transition: background 0.25s var(--out), color 0.25s var(--out);
}
.btn:hover { background: var(--on-navy); }
.btn--ghost {
  background: transparent; color: var(--on-navy);
  box-shadow: inset 0 0 0 1px var(--navy-rule);
}
.btn--ghost:hover { background: var(--navy-rule); color: var(--on-navy); }

/* ── responsive ─────────────────────────────────────────────────────── */

@media (max-width: 62rem) {
  .places { grid-template-columns: minmax(0, 1fr); }
  .why { grid-template-columns: minmax(0, 1fr); }

  .city-index, .founder, .proj-body, .ngo { grid-template-columns: minmax(0, 1fr); }
  /* one column: the plate would sit under the list, away from the pointer; the tap is the link */
  .ci-plate { display: none; }
  .founder img { width: 11rem; }
  .ngo .ngo-logo { width: 8rem; }
  .service-list { grid-template-columns: minmax(0, 1fr); }
  .cards, .sector-tiles, .pgrid, .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creds { grid-template-columns: minmax(0, 1fr); }
  .creds div { border-right: 0; border-bottom: 1px solid var(--navy-rule); padding-bottom: 1.25rem; }
  .creds div:last-child { border-bottom: 0; }
  .site-foot .shell { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 46rem) {
  .trio { grid-template-columns: minmax(0, 1fr); }
  /* four links plus the wordmark do not fit one 390px row; wrap rather than
     hide them behind a hamburger */
  .site-head .shell { flex-wrap: wrap; min-height: 0; gap: 0.25rem 1rem; padding-block: 0.75rem; }
  .site-nav { gap: 0.25rem 1.25rem; flex-wrap: wrap; }
  /* a panel anchored to its own summary can hang off the right edge once the
     nav wraps, so on a phone it anchors to the sticky header instead and
     spans the gutters: it cannot overflow the viewport from there */
  .nav-drop { position: static; }
  .nav-panel { left: var(--gut); right: var(--gut); top: 100%; min-width: 0; }
  .contact-list div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .schedule { font-size: 0.875rem; }
  /* the two figure columns are the first thing to go on a phone */
  .schedule .drop { display: none; }
  .table-scroll { overflow-x: auto; }
  /* four tracks on a 390px screen leaves ~85px each, and "Commercial" at
     1.25rem is ~120px wide, so it ran straight over the next column.
     Two tracks, and the vertical rules become row rules. */
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div { border-right: 0; border-bottom: 1px solid var(--navy-rule); padding: 1rem 1.25rem 1rem 0; }
  .services, .pgrid { grid-template-columns: minmax(0, 1fr); }
  .stats-row { grid-template-columns: minmax(0, 1fr); }
  .stats-row div { border-right: 0; border-bottom: 1px solid var(--navy-rule); padding: 1.25rem 0; }
  .stats-row div:last-child { border-bottom: 0; }
  .hero { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}