/* ==========================================================================
   STATEM — Founding-Client Invitation (light/dark alternating variant)
   Two backgrounds only: the deck's near-black and one off-white lifted
   straight from the design-system token file (--statem-lavender, the
   deck's own "very light lavender surface tint" — not pure #FFFFFF).
   Dark sections keep the deck-accent / light-text treatment; light
   sections flip to near-black text, with the accent colour reserved for
   eyebrows, small rules and link hover (see .on-light below — only
   --purple-deep clears contrast on the light background; --purple,
   --orange and --green all fail there and are overridden per element).
   ========================================================================== */

:root {
  /* Surfaces (dark-first — used by sections with no .on-light) */
  --bg:           #1A1A3F; /* page background — deck's near-black navy */
  --bg-deep:      #14142F; /* deeper alt-section background */
  --surface:      #23234F; /* card surface on the page background */
  --surface-2:    #1B1B41; /* recessed / open-state surface */
  --card-dark:    #2C2C66; /* accent card surface (applied examples etc.) */
  --light-bg:     #FFFFFF; /* pure white — the "reading" light tone, .on-light */

  /* Text */
  --ink:          #1A1A3F; /* dark text — used only on light accent blocks */
  --text:         #FFFFFF;
  --text-muted:   rgba(255,255,255,.70);
  --text-faint:   rgba(255,255,255,.52);

  /* Accents (deck palette — nothing added) */
  --purple:       #B78EE5;
  --purple-mid:   #A579D6;
  --purple-deep:  #663B9C;
  --orange:       #DC7A31;
  --green:        #63B95A;

  --hairline:     rgba(255,255,255,.14);
  --hairline-soft:rgba(255,255,255,.08);

  /* Type */
  --font-display: 'Anton', Impact, sans-serif;
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-script:  'Caveat', cursive;

  /* Layout */
  --content-width: 1160px;
  --prose-width: 680px;
  --gutter: 24px;
}

@media (min-width: 640px) { :root { --gutter: 40px; } }
@media (min-width: 1024px) { :root { --gutter: 64px; } }

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, dl, dd, button { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.wrap {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose { max-width: var(--prose-width); }

/* ---- Eyebrows ---- */
.eyebrow {
  display: block;
  font: 600 13px/1 var(--font-heading);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--purple);
}
.eyebrow--script {
  font-family: var(--font-script);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--purple);
}

/* ---- One destination: sticky bar ---- */
.brandbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--gutter);
  background: rgba(20,20,47,.86);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hairline-soft);
}
.brandbar img { height: 18px; width: auto; }
.brandbar__nav { display: flex; align-items: center; gap: 32px; margin-left: auto; margin-right: 32px; }
.brandbar__nav a {
  font: 600 11px/1 var(--font-heading);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.brandbar__nav a:hover { color: var(--text); border-bottom-color: var(--purple); }
@media (max-width: 767px) { .brandbar__nav { display: none; } }

/* anchor targets for the sticky-bar nav — offset so the bar doesn't cover the heading */
#offer, #products, #why-statem-divider, #selected-work { scroll-margin-top: 96px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--green);
  color: var(--ink);
  font: 600 15px/1 var(--font-heading);
  letter-spacing: .02em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.28); text-decoration: none; }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn--sm { padding: 10px 20px; font-size: 13px; }

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 66svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--bg) center/cover no-repeat;
  background-image:
    linear-gradient(180deg, rgba(20,20,47,.66) 0%, rgba(20,20,47,.46) 34%, rgba(20,20,47,.9) 76%, var(--bg) 100%),
    url('assets/hero.jpg');
  color: #fff;
  padding: 96px var(--gutter) 64px;
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 13px/1 var(--font-heading);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero__eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--purple);
  flex: none;
}
.hero h1 {
  font: 700 42px/1.1 var(--font-heading);
  letter-spacing: -.02em;
  margin-top: 22px;
  max-width: 17ch;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--green); }
.hero__cta { margin-top: 36px; }
.hero__foot {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font: 600 12px/1 var(--font-heading);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 639px) { .hero h1 { font-size: 32px; } }
@media (min-width: 760px) {
  .hero { min-height: 78svh; padding-top: 120px; }
  .hero h1 { font-size: 62px; max-width: 19ch; }
}
@media (min-width: 1100px) { .hero h1 { font-size: 78px; } }

/* ---- Section rhythm (air) ---- */
section { padding: 56px 0; }
@media (min-width: 760px) { section { padding: 96px 0; } }
section.section--tight { padding: 64px 0; }
.section-head { margin-bottom: 32px; }
@media (min-width: 760px) { .section-head { margin-bottom: 48px; } }
.section-head h2 {
  font: 700 32px/1.14 var(--font-heading);
  letter-spacing: -.02em;
  margin-top: 12px;
  text-wrap: balance;
}
.section-head h2 em,
.chapter h2 em { font-style: normal; color: var(--purple); }
@media (max-width: 639px) { .section-head h2 { font-size: 26px; } }
@media (min-width: 760px) { .section-head h2 { font-size: 44px; } }

.lede {
  font: 400 18px/1.6 var(--font-body);
  color: var(--text-muted);
  max-width: 62ch;
}

/* ---- Welcome: narrow reading column ---- */
#welcome { padding: 48px 0; }
@media (min-width: 760px) { #welcome { padding: 72px 0; } }
.welcome__col { max-width: var(--prose-width); display: flex; flex-direction: column; gap: 16px; }
.welcome__col .lede-heading {
  font: 500 21px/1.4 var(--font-body);
  color: var(--text);
  text-wrap: balance;
}
@media (max-width: 639px) { .welcome__col .lede-heading { font-size: 18px; } }
.welcome__col p { font: 400 16px/1.52 var(--font-body); color: var(--text-muted); }
.welcome__sig {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.welcome__sig .name {
  font-family: var(--font-script);
  font-weight: 500;
  font-size: 30px;
  color: var(--text);
}
.welcome__sig .role {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-top: 6px;
  font: 600 12px/1 var(--font-heading);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- The offer (two layers) ---- */
.layers { display: grid; gap: 20px; }
.layer {
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.layer--one { background: var(--purple); color: var(--ink); }
.layer--two { background: var(--card-dark); color: #fff; }
.layer__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 13px/1 var(--font-heading);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.layer__kicker .num { font-family: var(--font-display); font-size: 22px; }
.layer__kicker .rule { width: 28px; height: 2px; background: currentColor; opacity: .5; }
.layer h3 { font: 400 28px/1.18 var(--font-serif); letter-spacing: -.005em; }
.layer p { font: 400 17px/1.55 var(--font-body); }
.layer p.layer__foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(26,26,63,.2);
  font-size: 15px;
  opacity: .9;
}
.layer--two p.layer__foot { border-top-color: rgba(255,255,255,.18); }
@media (min-width: 860px) { .layers { grid-template-columns: 1fr 1fr; } }

/* two pieces that fit — a puzzle notch/tab pair, echoing the deck's
   interlocking card shapes. Desktop only: side by side is what makes the
   join legible; stacked on mobile it would just read as a random bite. */
@media (min-width: 860px) {
  .layers { gap: 6px; }
  .layer--one { position: relative; z-index: 2; }
  .layer--one::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--purple);
    transform: translateY(-50%);
  }
  .layer--two {
    -webkit-mask-image: radial-gradient(circle 18px at 0 50%, transparent 99%, #000 100%);
            mask-image: radial-gradient(circle 18px at 0 50%, transparent 99%, #000 100%);
  }
}

/* ==========================================================================
   PRODUCT CARDS — interactive
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
  gap: 16px;
  margin-top: 16px;
}
@media (min-width: 860px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (min-width: 860px) {
  .pcard__price { min-height: calc(16px + 5 * 1.4 * 13px); }
}

.pcard {
  appearance: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.pcard:hover { border-color: rgba(183,142,229,.5); transform: translateY(-2px); }
.pcard:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.pcard[aria-expanded="true"] { background: var(--surface-2); border-color: var(--purple); }

.pcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pcard__num { font: 900 22px/1 var(--font-heading); letter-spacing: .04em; color: var(--green); }
.pcard[data-accent="orange"] .pcard__num { color: var(--orange); }

.pcard__plus {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--text-faint);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  color: var(--text-muted);
  transition: transform 200ms ease, border-color 200ms ease, color 200ms ease;
}
.pcard[aria-expanded="true"] .pcard__plus {
  transform: rotate(45deg);
  border-color: var(--purple);
  color: var(--purple);
}
.pcard__name { margin-top: 16px; min-height: calc(2 * 1.22 * 23px); font: 400 23px/1.22 var(--font-serif); color: var(--text); }
.pcard__desc { margin-top: 10px; margin-bottom: 24px; min-height: calc(5 * 1.48 * 15px); font: 400 15px/1.48 var(--font-body); color: var(--text-muted); }
.pcard__price {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font: 400 13px/1.4 var(--font-body);
  color: var(--text-faint);
}

/* the expanding panel — full width of the grid, opens below the card's row */
.pcard__panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 200ms ease, opacity 200ms ease;
}
.pcard__panel[hidden] { display: none; }
.pcard__panel--collapsed { grid-template-rows: 0fr; opacity: 0; }
.pcard__panel-inner { overflow: hidden; min-height: 0; }
.pcard__panel-body {
  background: var(--bg-deep);
  padding: 40px 28px;
  margin-top: 4px;
}
@media (min-width: 640px) { .pcard__panel-body { padding: 48px 44px; } }

.pcard__panel-body .kicker {
  font: 600 13px/1 var(--font-heading);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
}
.pcard__panel[data-accent="orange"] .kicker { color: var(--orange); }

.pcard__blocks { margin-top: 26px; display: grid; gap: 24px; }
.pcard__block .tag {
  display: inline-block;
  padding: 8px 14px;
  font: 600 12px/1 var(--font-heading);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1A1A3F;
  background: var(--orange);
}
.pcard__panel[data-accent="green"] .pcard__block--challenge .tag { background: var(--purple); }
.pcard__block .tag--purple { color: #fff; background: var(--purple-deep); }
.pcard__block p { margin-top: 14px; font: 400 16px/1.55 var(--font-body); color: var(--text-muted); }

.pcard__get {
  padding: 24px 24px;
  border: 1px solid rgba(183,142,229,.4);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pcard__get p { font: 400 16px/1.55 var(--font-body); color: var(--text-muted); }
.pcard__get .note { padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 15px; }
.pcard__get .note b { font: 600 15px/1.4 var(--font-heading); color: var(--purple); }

.pcard__applied { margin-top: 36px; }
.pcard__applied .dek { margin-top: 10px; font: 400 18px/1.4 var(--font-serif); color: var(--purple); }
.applied-grid { margin-top: 20px; display: grid; gap: 14px; }
.applied-item { background: var(--card-dark); padding: 20px 22px; }
.applied-item .h {
  font: 600 14px/1.28 var(--font-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
}
.pcard__panel[data-accent="orange"] .applied-item .h { color: var(--orange); }
.applied-item ul { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.applied-item li { padding-left: 16px; text-indent: -16px; font: 400 15px/1.42 var(--font-body); color: var(--text-muted); }
.applied-item li i { font-style: italic; color: var(--text-faint); }

@media (min-width: 760px) { .pcard__blocks { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (min-width: 640px) { .applied-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .applied-grid { grid-template-columns: repeat(3, 1fr); } }

.products-note { margin-top: 28px; font: 400 14px/1.5 var(--font-body); color: var(--text-faint); }
/* Offer and Products carry the two dark tones as a deliberate colour
   block — the tonal shift marks "the full offer" as a new beat after
   "two parts that fit". Equal padding on both sides of the boundary. */
#offer { padding-top: 48px; padding-bottom: 48px; }
@media (min-width: 760px) {
  #offer { padding-top: 72px; padding-bottom: 72px; }
}
#products { padding-top: 48px; padding-bottom: 48px; background: var(--bg-deep); }
@media (min-width: 760px) { #products { padding-top: 72px; } }
#selected-work { background: var(--bg-deep); }

@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard__plus, .pcard__panel { transition: none; }
}

/* ---- Founding clients ---- */
.founding__intro { display: grid; gap: 20px; align-items: start; }
.founding__intro p { font: 400 17px/1.6 var(--font-body); color: var(--text-muted); max-width: 62ch; }
.founding__badge {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  padding: 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.founding__badge .headline { font: 600 22px/1.2 var(--font-heading); letter-spacing: .04em; text-transform: uppercase; color: var(--purple); }
.founding__badge .sub { font: 400 14px/1.3 var(--font-body); color: var(--text-faint); }
@media (min-width: 760px) {
  .founding__intro { grid-template-columns: repeat(3, 1fr); }
  .founding__intro p { grid-column: span 2; }
}

.founding-grid { margin-top: 40px; display: grid; gap: 20px; }
.founding-card {
  background: var(--surface);
  border-top: 3px solid var(--green);
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.founding-card:nth-child(2) { border-top-color: var(--purple); }
.founding-card:nth-child(3) { border-top-color: var(--orange); }
.founding-card .tag {
  align-self: flex-start;
  padding: 7px 13px;
  font: 600 12px/1 var(--font-heading);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.founding-card h3 { font: 400 24px/1.18 var(--font-serif); color: var(--text); }
.founding-card p { font: 400 15px/1.5 var(--font-body); color: var(--text-muted); }
@media (min-width: 760px) { .founding-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- How it works ---- */
.steps { margin-top: 44px; display: grid; gap: 40px; }
.step .num { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--purple); }
.step:nth-child(2) .num { color: var(--orange); }
.step:nth-child(3) .num { color: var(--green); }
.step h3 {
  font: 400 24px/1.2 var(--font-serif);
  color: var(--text);
  margin-top: 14px;
  padding-top: 16px;
  border-top: 2px solid var(--purple);
}
.step:nth-child(2) h3 { border-top-color: var(--orange); }
.step:nth-child(3) h3 { border-top-color: var(--green); }
.step p { margin-top: 14px; font: 400 15px/1.55 var(--font-body); color: var(--text-muted); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* ---- Chapter dividers ----
   Full-bleed photo + gradient, reserved for genuine chapter openings:
   the hero, Why Statem, and Next step. Founding Clients and Credentials
   use the separate photo-band pattern instead — see .photo-band below. */
.chapter {
  background-size: cover;
  background-position: center;
  padding: 72px 0;
}
.chapter .eyebrow { margin-bottom: 14px; }
.chapter h2 {
  max-width: 20ch;
  text-wrap: balance;
  font: 700 36px/1.1 var(--font-heading);
  letter-spacing: -.02em;
}
.chapter .lede { margin-top: 18px; max-width: 56ch; }
@media (max-width: 639px) { .chapter h2 { font-size: 28px; } }
@media (min-width: 640px) { .chapter { padding: 120px 0; } }
@media (min-width: 760px) { .chapter { padding: 160px 0; } .chapter h2 { font-size: 52px; } }

#why-statem-divider h2 { max-width: 16ch; }
#why-statem-divider .lede { margin-top: 18px; }

/* ---- Photo band ----
   A fixed-height image strip above the heading, used by Founding Clients
   and Credentials. width:100% + height (not aspect-ratio + max-height,
   which shrinks the box's width to hold the ratio instead of clamping
   height) keeps it full-bleed at every viewport. The band sits flush
   against the top of the section — no navy strip above it — with the
   spacing before the heading added below the band instead. */
.photo-band {
  width: 100%;
  height: clamp(220px, 32vw, 420px);
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 639px) {
  .photo-band { height: clamp(200px, 55vw, 280px); }
}
#founding-clients, #credentials { padding-top: 0; }
#founding-clients .section-head, #credentials .section-head { padding-top: 40px; }
@media (min-width: 760px) {
  #founding-clients .section-head, #credentials .section-head { padding-top: 64px; }
}

.why-grid { display: grid; gap: 36px; margin-top: 8px; }
.why__body p { font: 400 16px/1.52 var(--font-body); color: var(--text-muted); }
.why__body p + p { margin-top: 14px; }
.why__body .accent { font-family: var(--font-heading); font-weight: 700; color: var(--text); }
.why__body .quote { font-style: italic; color: var(--text-muted); }
.why__sig { margin-top: 18px; display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; }
.why__sig .name { font-family: var(--font-script); font-weight: 500; font-size: 28px; color: var(--text); }
.why__sig .role { font: 600 12px/1 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }

.four-things {
  padding: 28px 26px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.four-things .cap { align-self: flex-start; font: 600 13px/1 var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--purple); }
.four-things__grid {
  position: relative;
  width: 100%; max-width: 240px; aspect-ratio: 1;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
}
/* the four quadrants as puzzle pieces — a pivot where all four meet,
   echoing the "two parts that fit" join rather than four flat blocks */
.four-things__grid::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--purple-deep);
  border: 4px solid var(--light-bg);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.four-things__grid span {
  display: flex; align-items: flex-start; padding: 14px;
  font: 600 13px/1.25 var(--font-heading); letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.four-things__grid span:nth-child(1) { background: var(--bg); }
.four-things__grid span:nth-child(2) { background: var(--purple-deep); justify-content: flex-end; text-align: right; }
.four-things__grid span:nth-child(3) { background: var(--purple); color: var(--ink); align-items: flex-end; }
.four-things__grid span:nth-child(4) { background: var(--card-dark); align-items: flex-end; justify-content: flex-end; text-align: right; }
@media (min-width: 860px) { .why-grid { grid-template-columns: 1fr 320px; } }

.credentials { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.credentials li {
  background: var(--surface);
  border-left: 3px solid var(--purple);
  padding: 22px 28px;
  font: 400 17px/1.5 var(--font-body);
  color: var(--text-muted);
}
.credentials li:last-child { border-left-color: var(--green); }
.rule-sm { width: 60px; height: 2px; background: var(--purple); margin-top: 16px; }

/* ---- Selected work ---- */
.work-sub { margin-top: 64px; }
.work-sub:first-child { margin-top: 0; }
.work-sub > h3 {
  font: 400 24px/1.2 var(--font-serif);
  color: var(--text);
}

.pub-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pub-item { display: flex; flex-direction: column; gap: 12px; }
.pub-item .thumb {
  aspect-ratio: 4/3;
  background: var(--surface);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pub-item img { width: 100%; height: 100%; object-fit: cover; }
.pub-item p { font: 400 13px/1.32 var(--font-body); color: var(--text-faint); }
.pub-item p b { font: 600 14px/1.24 var(--font-heading); color: var(--text); }
@media (min-width: 640px) { .pub-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .pub-grid { grid-template-columns: repeat(4, 1fr); } }

/* report-cover graphics carry their own title text near the top or edge —
   cropping with object-fit:cover cut those off, so they show in full,
   letterboxed on the surface colour instead. The one real photograph in
   this grid (the OIES panel shot) keeps cover, same as the photo section
   below, since there's no title to protect and a full-bleed crop reads
   better for an actual photo. */
.pub-grid--publications .pub-item img { object-fit: contain; }
.pub-grid--publications .pub-item.is-photo img { object-fit: cover; object-position: 50% 78%; }

/* screenshots and article captures in the events grid carry mastheads
   and handles at their edges — show them whole, letterboxed, the same
   way report covers are handled above */
.pub-item.is-doc .thumb { background: #1E1E47; padding: 0; }
.pub-item.is-doc img { object-fit: contain; }

.view-more { margin-top: 20px; }
.view-more summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  font: 600 13px/1 var(--font-heading);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.view-more summary::-webkit-details-marker { display: none; }
.view-more .expand-icon {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--text-faint);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  transition: transform 200ms ease, border-color 200ms ease, color 200ms ease;
}
.view-more[open] .expand-icon { transform: rotate(45deg); }
.view-more summary:hover, .view-more summary:hover .expand-icon { color: var(--purple); border-color: var(--purple); }
.on-light .view-more summary:hover, .on-light .view-more summary:hover .expand-icon { color: var(--purple-deep); border-color: var(--purple-deep); }
.view-more summary:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.view-more .pub-grid--more { margin-top: 20px; }

/* ---- Next step ----
   Closes the page on a photo, bookending the hero — the one other place
   on the page that carries imagery of its own rather than a flat colour. */
.next-step {
  background-size: cover;
  background-position: center;
  padding: 64px 0;
}
.next-step h2 { font: 700 36px/1.1 var(--font-heading); letter-spacing: -.02em; max-width: 18ch; }
@media (max-width: 639px) { .next-step h2 { font-size: 28px; } }
@media (min-width: 760px) { .next-step { padding: 130px 0; } .next-step h2 { font-size: 52px; } }
.next-step .lede { margin-top: 24px; }
.next-step__contact { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.next-step__contact .name { font: 600 22px/1.2 var(--font-heading); }
.next-step__contact .role { margin-top: 8px; font: 400 15px/1.4 var(--font-body); color: var(--text-muted); }
.next-step .btn { margin-top: 40px; }
.next-step__fallback { margin-top: 16px; font: 400 15px/1.4 var(--font-body); color: var(--text-muted); }
.next-step__fallback a { text-decoration: underline; }

/* ---- Footer ---- */
footer {
  padding: 32px var(--gutter) 40px;
  background: var(--bg);
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: center;
  font: 400 13px/1.4 var(--font-body);
  text-align: center;
}
footer img { height: 16px; width: auto; }

/* ---- Utility ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   LIGHT SECTIONS
   Re-themes page-level text to near-black by overriding the shared text
   tokens (--text/--text-muted/--text-faint all collapse to --ink here, so
   every component that already reads those variables — paragraphs, ledes,
   signatures, credentials list text — falls in line for free). --purple,
   --orange and --green are deliberately left untouched: self-contained
   surfaces that fill with them directly (layer--one, layer--two, the
   four-things quadrants, credentials card borders) keep their own already-
   legible internal contrast and are not part of this override.
   Only --purple-deep clears WCAG AA against the light background, so it is
   the one accent used directly on it — eyebrows, small rules, link hover.
   Everything else that would otherwise paint --purple/--orange/--green
   straight onto the light background (heading <em>, decorative numerals)
   is individually swapped to near-black below. ========================== */
.on-light {
  /* --bg is deliberately left alone: components read it as "the deck's
     navy", not "this section's background" (e.g. the four-things quadrant
     fill) — overriding it here would silently break those. The section's
     own paint uses --light-bg directly instead. */
  --text: var(--ink);
  --text-muted: var(--ink);
  --text-faint: var(--ink);
  --hairline: rgba(26,26,63,.14);
  --hairline-soft: rgba(26,26,63,.10);
  background: var(--light-bg);
  color: var(--text);
}

/* the puzzle bump sits in the gap, on the light section background itself */
.on-light .layer--one::after { background: var(--purple-deep); }

/* allowed accent uses: eyebrow labels, small rules, link hover */
.on-light .eyebrow,
.on-light .eyebrow--script,
.on-light .four-things .cap { color: var(--purple-deep); }
.on-light .rule-sm { background: var(--purple-deep); }
.on-light a:hover { color: var(--purple-deep); }

/* everything else that painted --purple/--orange/--green onto the page
   background directly (not a self-contained coloured surface) swaps to
   near-black — it fails contrast on the light background and isn't in
   the eyebrow/rule/link-hover allow-list. Exception: the "How it works"
   numerals want to read as three distinct stages, so instead of flattening
   them all to one colour they step through one hue at increasing depth —
   --purple-mid, full purple-deep, then near-black — which clears 3:1 (the
   large-text threshold these 56px numerals fall under; plain --purple/
   --orange/--green don't even clear that, which is why they're not used
   here; --purple-mid is the deck lilac deepened to 3.33:1, clear of the
   3:1 floor, where --purple itself only reaches 2.62:1). */
.on-light .section-head h2 em { color: var(--ink); }
.on-light .step .num { color: var(--purple-mid); }
.on-light .step:nth-child(2) .num { color: var(--purple-deep); }
.on-light .step:nth-child(3) .num { color: var(--ink); }
.on-light .step h3 { border-top-color: var(--purple-mid); }
.on-light .step:nth-child(2) h3 { border-top-color: var(--purple-deep); }
.on-light .step:nth-child(3) h3 { border-top-color: var(--ink); }