/* =========================================================================
   Kelson Energy — design system
   Built to site/bar.md. Every rule here is traceable to a mechanism:
   M1 hard hero seam · M2 size+tone hierarchy, never weight · M3 no shadows
   M4 binary radius · M5 field tags · M6 one dark band · M7 technical imagery
   K1 red rationed · K2 moving hero · K3 Pagella wordmark only · K4 dossier plates
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root {
  --parchment:  #f3f1ed;
  --white:      #ffffff;
  --ink:        #181011;
  --charcoal:   #222222;
  --aubergine:  #302023;
  --ash:        #aaaaaa;   /* decorative marks only — see --ash-text */
  --dim:        #666666;
  --bone:       #d8d4d4;

  /* Pravah sets muted text in Ash. On parchment that is 2.1:1 and fails WCAG
     even at display size, so text takes a darkened Ash. The diamond marks and
     dark-section copy keep the true --ash, where it passes comfortably.
     Same fix the experience map made for small red type. */
  --ash-text:   #7c7674;

  /* K1 — the only hue in the system */
  --red:        #ED1C24;
  --red-lift:   #ff6b60;   /* small red type on dark only */

  --font-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "TeX Gyre Pagella", Palatino, "Palatino Linotype", Georgia, serif;

  /* Hero display face. Anton is a better-drawn Impact — same heavy condensed
     idea, open licence, self-hosted so it renders identically everywhere
     instead of depending on Impact being installed. Impact and its Windows
     stablemate Haettenschweiler stay in the stack as fallbacks. */
  --font-heavy: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold",
                "Archivo Black", sans-serif;

  --max: 1200px;
  --gut: 32px;

  --r: 4px;              /* M4 — everything */
  --r-pill: 100px;       /* M4 — primary CTA only */
}

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

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

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; }

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

/* focus — visible, and inside the system */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--parchment);
  padding: 10px 16px; border-radius: var(--r); z-index: 100;
}
.skip:focus { left: 16px; top: 16px; }

/* ------------------------------------------------------------------- shell */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ================================================================= M2 type */
/* Two weights exist: 400 and 700. Hierarchy is size + tone, never weight.    */

.display, .h-lg, .h, .h-sm {
  /* Client: headings take the hero's face, one size smaller. Anton ships a
     single heavy weight and is tight by design, so it is never tracked in. */
  font-family: var(--font-heavy);
  font-weight: 400;
  letter-spacing: 0.002em;
  margin: 0;
}

.display  { font-size: 40px; line-height: 1.08; }
.h-lg     { font-size: 34px; line-height: 1.12; }
.h        { font-size: 27px; line-height: 1.18; }
.h-sm     { font-size: 23px; line-height: 1.2;  }
.subhead  { font-size: 20px; line-height: 1.4;  font-weight: 700; margin: 0; }

.body-lg  { font-size: 17px; line-height: 1.5; }
.body-sm  { font-size: 14px; line-height: 1.5; }
.caption  { font-size: 12px; line-height: 1.4; letter-spacing: 0.10em; }

.muted { color: var(--dim); }
.ash   { color: var(--ash-text); }

/* the one place a serif is allowed off-logo (K3) */
.figure-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* ============================================================= M5 field tag */
.tag {
  display: inline-block;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r);
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--bone);
}
.band--dark .tag {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.35);
}

/* =============================================================== M4 buttons */
.pill {
  display: inline-block;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  padding: 8px 20px;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.pill:hover { background: var(--ink); color: var(--parchment); }

.band--dark .pill { border-color: rgba(255,255,255,.5); color: var(--white); }
.band--dark .pill:hover { background: var(--white); color: var(--ink); }

.sq {
  display: inline-block;
  font-size: 14px;
  padding: 4px 16px;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.sq:hover { background: var(--ink); color: var(--parchment); }

/* ================================================================= M5 nav */
.nav {
  border-bottom: 1px solid var(--bone);
  background: var(--parchment);
}
.nav__in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
  height: 80px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__logo { display: flex; align-items: center; text-decoration: none; }
.nav__logo img { height: 66px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  list-style: none;
  padding: 0; margin-block: 0;
}
/* :not(.pill) matters. Without it this rule also matched the CTA and, being more
   specific than .pill, repainted the button's bottom border transparent — which
   read as the button being clipped along its lower edge. */
.nav__links a:not(.pill) {
  font-size: 16px;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav__links a:not(.pill):hover { border-bottom-color: var(--ink); }
.nav__links a:not(.pill)[aria-current="page"] { border-bottom-color: var(--red); } /* K1 */

.nav__cta { margin-left: 8px; }
.nav__cta .pill { font-size: 16px; padding: 9px 22px; }

/* dropdown — services */
.nav__has { position: relative; }

/* The panel hangs 14px below the link, and that strip belongs to neither. The
   pointer crossed it on the way down, left the hover area, and the menu shut
   before anything could be clicked. This invisible bridge covers the gap across
   the full width of the panel so the travel path stays inside the hover area. */
.nav__has::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -16px;
  width: 268px;
  height: 16px;
  display: none;
}
.nav__has:hover::after { display: block; }

.nav__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 268px;
  background: var(--white);
  border: 1px solid var(--bone);
  border-radius: var(--r);
  padding: 8px;
  z-index: 40;
  /* visibility rather than display, so the close can be delayed — display
     cannot be transitioned. */
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease, visibility 0s linear .25s;
}
.nav__has:hover .nav__panel,
.nav__has:focus-within .nav__panel {
  visibility: visible;
  opacity: 1;
  /* Opens immediately; the 250ms above only applies on the way out, giving a
     wobbling or diagonal pointer time to reach the menu. */
  transition: opacity .12s ease, visibility 0s linear 0s;
}
.nav__panel a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r);
  border-bottom: 0;
  font-size: 15px;
}
.nav__panel a:hover { background: var(--parchment); border-bottom: 0; }

/* mobile nav */
.nav__toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  padding: 7px 14px;
  font: inherit; font-size: 16px;
  cursor: pointer;
}

/* =================================================================== hero */
/* Full-bleed: the video starts directly under the header bar and the type sits
   over it. This replaces bar.md's M1 45/55 split at the client's direction —
   see the note under M1. Legibility comes from a gradient scrim, not a text
   shadow, so M3 still holds. */
.hero {
  position: relative;
  min-height: min(78vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--aubergine);
  border-bottom: 1px solid var(--bone);
}

.hero__media { position: absolute; inset: 0; }
.hero__media video,
.hero__media img.hero__still {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__still { display: none; }

/* Left-weighted scrim: dense enough for AA text on the left, clearing to
   almost nothing over the tower on the right. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,13,14,.86) 0%, rgba(20,13,14,.72) 34%, rgba(20,13,14,.28) 62%, rgba(20,13,14,.12) 100%),
    linear-gradient(0deg, rgba(20,13,14,.42) 0%, rgba(20,13,14,0) 42%);
}

.hero__text {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 96px var(--gut);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.hero__lead {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 400;
  color: rgba(255,255,255,.72);   /* M2 — tonal step, not weight */
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 22ch;
}
/* The hero headline is the one deliberate exception to M2's weight rule, at the
   client's direction: over full-bleed video it has to hold its own against a
   moving image, which a 400 weight does not. Everything else on the site still
   takes its hierarchy from size and tone. */
.hero__headline {
  font-family: var(--font-heavy);
  font-size: 66px;
  line-height: 1.04;
  letter-spacing: 0.002em;  /* Anton is tight by design; do not track it in */
  font-weight: 400;         /* Anton ships one weight, and it is already heavy */
  color: var(--white);
  margin: 0;
  /* A condensed face fits far more per line, so the measure has to open up or
     the headline stacks into a six-line slab. */
  max-width: 23ch;
  text-wrap: balance;
}
.hero .pill { border-color: rgba(255,255,255,.6); color: var(--white); }
.hero .pill:hover { background: var(--white); color: var(--ink); }

/* =============================================================== M6 bands */
.band { padding: 80px 0; }
.band + .band { padding-top: 0; }
.band--dark + .band { padding-top: 80px; }

.band--dark {
  background: var(--aubergine);   /* M6 — full-bleed, once per page */
  color: var(--white);
  padding: 96px 0;
}
.band--dark .muted,
.band--dark .ash { color: var(--ash); }

.band__head { max-width: 720px; margin-bottom: 48px; }
.band__head .tag { margin-bottom: 24px; }
.band__head h2 { margin: 0; }
.band__head p { margin: 20px 0 0; color: var(--dim); max-width: 62ch; }
.band--dark .band__head p { color: var(--ash); }

.rule { border: 0; border-top: 1px solid var(--bone); margin: 0; }
.band--dark .rule { border-top-color: rgba(255,255,255,.18); }

/* Two-column section head — heading left, body right. Keeps a text-only
   section from sitting in a half-empty band, the way the reference pairs a
   left panel with right copy. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  align-items: start;
  margin-bottom: 48px;
}
.split .tag { margin-bottom: 24px; }
.split h2 { margin: 0; }
/* Zero padding when the right column opens with its own badge — the two
   badges then sit on a shared baseline instead of drifting apart. */
.split__body { padding-top: 10px; }
.split__body:has(> .tag) { padding-top: 0; }
.split__body p { margin: 0; color: var(--charcoal); max-width: 54ch; }
.band--dark .split__body p { color: var(--ash); }

/* ============================================================== map teaser */
.map-panel {
  display: block;
  border: 1px solid var(--bone);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--aubergine);
  margin-bottom: 48px;
  position: relative;
}
.map-panel img { width: 100%; height: auto; }
.map-panel__cap {
  position: absolute;
  left: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.map-panel__cap .tag {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  color: var(--white);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ========================================================== service index */
.svc { border-top: 1px solid var(--bone); }
.svc__row {
  display: grid;
  grid-template-columns: 88px 1fr 300px;
  gap: 32px;
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--bone);
  text-decoration: none;
  color: inherit;
  transition: background .2s ease;
}
.svc__row:hover { background: rgba(24,16,17,.03); }
.svc__n {
  font-size: 12px;
  letter-spacing: 0.10em;
  color: var(--ash-text);
  padding-top: 6px;
}
.svc__title { font-size: 28px; line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 12px; }
.svc__row:hover .svc__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--red); } /* K1 */
.svc__body { font-size: 15px; line-height: 1.5; color: var(--dim); margin: 0; max-width: 58ch; }
.svc__thumb { border-radius: var(--r); overflow: hidden; background: var(--aubergine); }
.svc__thumb img { width: 100%; height: 168px; object-fit: cover; }

/* ============================================================ diamond grid */
.dgrid {
  display: grid;
  grid-template-columns: repeat(3, 8px);
  gap: 4px;
  flex: 0 0 auto;
}
.dgrid i {
  width: 8px; height: 8px;
  background: var(--ash);
  transform: rotate(45deg);
  display: block;
}
.band--dark .dgrid i { background: rgba(255,255,255,.55); }

.items { list-style: none; margin: 0; padding: 0; }
.items li {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(24,16,17,.3);
}
.band--dark .items li { border-bottom-color: rgba(255,255,255,.3); }
.items li:last-child { border-bottom: 0; }
.items h3 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.items p { margin: 0; font-size: 15px; color: var(--dim); }
.band--dark .items p { color: var(--ash); }

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }

/* ================================================================== stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.stat { border-top: 1px solid var(--bone); padding-top: 20px; }
.band--dark .stat { border-top-color: rgba(255,255,255,.25); }
.stat__v { font-family: var(--font-display); font-size: 48px; line-height: 1; margin: 0 0 10px; }
.stat__l { font-size: 14px; color: var(--dim); margin: 0; }
.band--dark .stat__l { color: var(--ash); }
.stat--accent .stat__v { color: var(--red); }              /* K1 */
.band--dark .stat--accent .stat__v { color: var(--red-lift); }

/* ================================================== service page interior */
.page-hero {
  display: grid;
  grid-template-columns: 45fr 55fr;
  border-bottom: 1px solid var(--bone);
}
.page-hero__text {
  padding: 80px calc(var(--gut) + 8px) 80px max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 20px;
}
.page-hero__media { background: var(--aubergine); min-height: 420px; position: relative; overflow: hidden; }
.page-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* `.prose p { margin: 0 }` used to sit here and, being more specific than the
   sibling selector, killed the paragraph spacing entirely. Reset on the child
   selector instead so both rules carry equal weight and source order decides. */
.prose { max-width: 68ch; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 20px; }
.prose p { color: var(--charcoal); }

.lead-para {
  font-size: 20px;
  line-height: 1.5;
  color: var(--charcoal);
  margin: 24px 0 0;
  max-width: 46ch;
}

/* On-page index — these service pages run long, so the half of the lead band
   that would otherwise sit empty carries a way into the sections. */
.index {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  columns: 2;
  column-gap: 32px;
}
.index li { margin: 0 0 10px; break-inside: avoid; }
.index a {
  font-size: 14px;
  line-height: 1.4;
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.index a:hover { color: var(--ink); border-bottom-color: var(--red); }

.blocks { border-top: 1px solid var(--bone); }
.blk { padding: 40px 0; border-bottom: 1px solid var(--bone); scroll-margin-top: 24px; }
.blk__grid { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.blk h3 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.005em; }
.blk p { margin: 0 0 16px; color: var(--charcoal); font-size: 15px; max-width: 66ch; }
.blk p:last-child { margin-bottom: 0; }
.blk ul { margin: 0; padding: 0; list-style: none; }
.blk ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--charcoal);
  max-width: 66ch;
}
.blk ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  background: var(--ash);
  transform: rotate(45deg);
}
.blk ul li:last-child { margin-bottom: 0; }

/* ==================================================================== team */
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);   /* client: headshots were too large */
  gap: 28px 24px;
}
.member {
  text-decoration: none;
  color: inherit;
  display: block;
}
.member__plate {
  display: block;          /* it is a <span>; aspect-ratio needs a block box */
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bone);
  aspect-ratio: 4 / 5;
  margin-bottom: 16px;
  position: relative;
}
.member__plate img { width: 100%; height: 100%; object-fit: cover; }
/* K4 — Eric Emerson has no photograph in the supplied assets, so he gets a
   typographic plate rather than a stock silhouette or a stretched group crop. */
.member__initials {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 44px;
  letter-spacing: 0.04em;
  color: var(--dim);
  background: var(--bone);
}
.bio__plate .member__initials { font-size: 72px; }
.member__name { font-size: 17px; font-weight: 400; margin: 0 0 4px; letter-spacing: -0.01em; }
.member__role { font-size: 14px; color: var(--dim); margin: 0; }
.member:hover .member__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--red); }

.plate-wide { margin: 0 auto; max-width: 820px; border-radius: var(--r); overflow: hidden; }
.plate-wide img { width: 100%; height: auto; }

.bio { display: grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: start; }
.bio__plate { display: block; border-radius: var(--r); overflow: hidden; background: var(--bone); aspect-ratio: 4/5; position: relative; }
.bio__plate img { width: 100%; height: 100%; object-fit: cover; }

/* ==================================================================== map */
.map-frame {
  border: 1px solid var(--bone);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--aubergine);
}
.map-frame iframe { display: block; width: 100%; height: min(62vh, 620px); border: 0; }

.map-teaser {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--aubergine);
  min-height: 360px;
}
.map-teaser img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* ================================================================= footer */
.foot {
  border-top: 1px solid var(--bone);
  padding: 48px 0;
  font-size: 14px;
  color: var(--dim);
}
.foot__in { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.foot__in a { text-decoration: none; }
.foot__in a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__right { margin-left: auto; }

/* ============================================================== responsive */
@media (max-width: 1000px) {
  .page-hero { grid-template-columns: 1fr; }
  .hero__text, .page-hero__text { padding: 64px var(--gut); }
  .hero { min-height: min(70vh, 620px); }
  .cols-2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 24px; }
  .split__body { padding-top: 0; }
  .blk__grid { grid-template-columns: 1fr; gap: 20px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .bio { grid-template-columns: 1fr; gap: 32px; }
  .bio__plate { max-width: 220px; }
  .svc__row { grid-template-columns: 56px 1fr; }
  .svc__thumb { display: none; }
}

@media (max-width: 720px) {
  :root { --gut: 20px; }
  body { font-size: 16px; }
  .hero { min-height: 74vh; }
  .hero__text { padding: 56px var(--gut); gap: 18px; }
  .hero__headline { font-size: 44px; max-width: 14ch; }
  .hero__lead { font-size: 20px; }
  /* On a narrow screen the scrim has to work vertically, not horizontally. */
  .hero__scrim {
    background: linear-gradient(180deg, rgba(20,13,14,.80) 0%, rgba(20,13,14,.62) 55%, rgba(20,13,14,.34) 100%);
  }
  .display { font-size: 34px; }
  .h-lg { font-size: 30px; }
  .h { font-size: 26px; }
  .h-sm, .svc__title { font-size: 22px; }
  .stat__v, .figure-num { font-size: 36px; }
  .band, .band--dark { padding: 56px 0; }
  .band + .band { padding-top: 0; }
  .stats { grid-template-columns: 1fr; gap: 24px; }
  .index { columns: 1 !important; }
  .lead-para { font-size: 18px; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  /* Full-height so the page beneath never peeks through — otherwise the hero's
     own "Get in touch" shows below the panel and reads as a duplicate. */
  .nav[data-open="true"] .nav__links {
    display: flex;
    position: fixed;
    left: 0; right: 0;
    top: 80px; bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--white);
    border-top: 1px solid var(--bone);
    padding: 16px var(--gut) 32px;
    overflow-y: auto;
    z-index: 50;
  }
  .nav { position: relative; }
  .nav[data-open="true"] .nav__links > li { width: 100%; padding: 10px 0; }
  /* In the mobile menu the sub-items are simply always shown, so the hover
     machinery above has to be switched off — including the bridge, which would
     otherwise sit over the links and swallow taps. */
  .nav__has::after { display: none; }
  .nav__panel {
    position: static; border: 0; padding: 8px 0 0; min-width: 0;
    background: transparent;
    visibility: visible; opacity: 1; transition: none;
  }
  .nav__panel a { padding: 8px 0 8px 16px; color: var(--dim); }
  .foot__right { margin-left: 0; }
}

/* ------------------------------------------------------------ K2 fallback */
@media (prefers-reduced-motion: reduce) {
  .hero__media video { display: none; }
  .hero__still { display: block; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ======================================================== engagements box */
/* Additional engagements sit in their own box under the map rather than inside
   the map frame (client request). */
.eng-box { border: 1px solid var(--bone); border-radius: var(--r); background: var(--white); padding: 48px; }
.eng-box .band__head { margin-bottom: 32px; }
.eng-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.eng { border: 1px solid var(--bone); border-radius: var(--r); padding: 20px 22px; }
.eng__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.eng__name { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0; }
.eng__status { flex: none; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ash-text); }
.eng__meta { font-size: 13px; color: var(--dim); margin: 0 0 12px; }
.eng__role { font-size: 15px; line-height: 1.5; margin: 0; }
@media (max-width: 720px) { .eng-box { padding: 24px 20px; } }

/* ===================================================== changes-v2 (client) */

/* Menu: bold sans-serif, with red carrying the active and hover states. */
.nav__links > li > a,
.nav__panel a { font-weight: 700; }
.nav__links > li > a:hover,
.nav__panel a:hover { color: var(--red); }
.nav__links > li > a[aria-current="page"] { color: var(--red); }

/* The home intro is one centred serif subhead (client: serif, ~24pt, centred).
   Pagella ships regular only — asking for bold gives a broken faux-bold — so
   the weight comes from size and measure instead. */
.intro-sub {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.35;
  text-align: center;
  max-width: 54ch;
  margin: 0 auto;
  color: var(--ink);
}

/* Team landing: names as links, like the 2024 page. */
.roster-list { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.roster-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--bone);
}
.roster-list li:last-child { border-bottom: 0; }
.roster-list a {
  font-size: 20px;
  color: var(--red);
  text-decoration: none;
}
.roster-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.roster-list span { font-size: 15px; color: var(--dim); }

/* A little more red elsewhere, as asked — links and section labels. */
.prose a, .blk a { color: var(--red); }
.tag { border: 1px solid var(--bone); }
.eng__status { color: var(--red); }

@media (max-width: 1000px) {
  .intro-sub { font-size: 26px; }
}

/* Section heads carry no field tag now, so they start flush. */
.band__head h2 + p { margin-top: 18px; }

/* '.band + .band' zeroes the top padding so light bands stack without a seam,
   but a dark band is its own block and needs its padding back — otherwise the
   closing band's type sits hard against the top edge. */
.band + .band--dark { padding-top: 96px; }

/* A closing band holds only its heading, so the gap meant for content below it
   left the type riding high. */
.band--dark .band__head:last-child { margin-bottom: 0; }