/* ==========================================================================
   Snider Consulting Group: one stylesheet, organized top to bottom:
   1. Fonts  2. Tokens  3. Base  4. Layout  5. Components  6. Sections
   7. Header/footer  8. Page: home  9. Utilities  10. Motion
   Contrast notes (WCAG 2.2 AA) are next to each color pairing that carries text.
   ========================================================================== */

/* 1. Fonts (self-hosted, font-display: swap) ------------------------------ */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2"); }

/* 2. Tokens (SPEC 4) ------------------------------------------------------- */
:root {
  /* Brand: sampled from the logo. */
  --scg-red:        #AE1218;  /* on white 7.24:1, on paper-2 6.58:1; never on ink (2.5:1) */
  --scg-red-dark:   #8A0E13;  /* hover/pressed; on white 9.9:1 */
  --scg-gold:       #F8A81E;  /* on ink 9.3:1; NEVER as text on white (1.98:1) */
  --scg-gold-dark:  #D98F0C;  /* hover for gold buttons; ink on it 6.92:1 */
  --scg-gold-soft:  #FDEBC8;  /* tint; ink on it 16:1, red on it 6.3:1 */
  --ink:            #141414;  /* text; white on ink 18.6:1 */
  --ink-2:          #3B3B3B;  /* secondary text; on white 10.9:1, on paper-2 9.9:1 */
  --paper:          #FFFFFF;
  --paper-2:        #F7F4EF;
  --line:           #E3DDD3;
  /* Derived neutrals for dark sections and placeholders. */
  --on-ink:         #FFFFFF;
  --on-ink-2:       #CFCAC2;  /* secondary text on ink 11.6:1 */
  --line-ink:       #3A3A3A;
  --ph-bg:          #ECE9E4;
  --ph-border:      #8C877F;  /* dashed placeholder border, 3.3:1 on ph-bg */

  /* Type */
  --font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0:  clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);   /* body 17 → 18px */
  --step-1:  clamp(1.25rem, 1.17rem + 0.35vw, 1.4375rem);
  --step-2:  clamp(1.5rem, 1.33rem + 0.75vw, 2rem);
  --step-3:  clamp(1.875rem, 1.55rem + 1.5vw, 2.75rem);
  --step-4:  clamp(2.375rem, 1.8rem + 2.8vw, 4.25rem);

  /* Space & shape */
  --gutter: clamp(16px, 4vw, 24px);
  --section-space: clamp(64px, 9vw, 120px);
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgb(20 20 20 / 0.06), 0 8px 24px rgb(20 20 20 / 0.08);
  --shadow-lift: 0 2px 4px rgb(20 20 20 / 0.08), 0 16px 40px rgb(20 20 20 / 0.14);
  --focus: var(--scg-red);
  --header-h: 60px;   /* 72px from 1024px, see below */
  --hero-tint: rgba(38, 8, 10, 0.72);   /* maroon-black photo tint, see .hero::before */
}

/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (min-width: 1024px) { :root { --header-h: 72px; } }
/* Anchor targets and deep links land below the sticky header. */
[id] { scroll-margin-top: var(--header-h); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; text-wrap: balance; }
p { margin: 0 0 1em; }
p, li { max-width: 70ch; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--scg-red); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--scg-red-dark); text-decoration-thickness: 2px; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
main:focus { outline: none; }
[hidden] { display: none !important; }

/* Focus: red on light, gold on dark; 3px ring with offset (≥3:1 vs adjacent colors). */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.section--ink, .home-block--ink, .site-footer, .recruit-banner { --focus: var(--scg-gold); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: 12px 18px; border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: none; --focus: var(--scg-gold);
}
.skip-link:focus { top: 12px; }

/* 4. Layout ---------------------------------------------------------------- */
.container { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(760px + 2 * var(--gutter)); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }

.section { padding-block: var(--section-space); }
.section--tight { padding-block: clamp(32px, 5vw, 56px); }
.section--paper-2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink a:not(.btn), .home-block--ink .work__intro a { color: var(--scg-gold); }
.section__head { margin-bottom: clamp(28px, 4vw, 48px); }
.section__head--split { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.section__head--split .section__title { margin-bottom: 0; }
.section__title { font-size: var(--step-3); letter-spacing: -0.01em; }
.section__lede { font-size: var(--step-1); color: var(--ink-2); line-height: 1.5; }
.section--ink .section__lede { color: var(--on-ink-2); }
.page-title { font-size: var(--step-4); letter-spacing: -0.02em; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.subhead { font-size: var(--step-1); margin-top: clamp(40px, 5vw, 64px); }

/* 5. Components ------------------------------------------------------------ */

/* Eyebrow: wide-tracked uppercase, echoing the S N I D E R lettering. */
.eyebrow {
  font-family: var(--font-head); font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 0.9em;
}
.eyebrow--accent { color: var(--scg-red); }
.eyebrow--gold, .section--ink .eyebrow { color: var(--scg-gold); }
.eyebrow__note { letter-spacing: 0.08em; text-transform: none; font-weight: 600; }

/* Buttons: 44px minimum touch target. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.7em 1.4em; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--scg-red); color: var(--paper); }              /* 7.24:1 */
.btn--primary:hover { background: var(--scg-red-dark); color: var(--paper); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--paper); }
.btn--gold { background: var(--scg-gold); color: var(--ink); }                   /* 9.3:1 */
.btn--gold:hover { background: var(--scg-gold-soft); color: var(--ink); }
.btn--secondary-light { background: transparent; color: var(--on-ink); border-color: var(--on-ink); }
.btn--secondary-light:hover { background: var(--on-ink); color: var(--ink); }
.section--ink .btn--secondary-light { color: var(--on-ink); }
.btn--sm { min-height: 44px; padding: 0.5em 1.1em; font-size: 0.9375rem; }
.btn--placeholder { background: var(--ph-bg); color: var(--ink); border: 2px dashed var(--ph-border); border-radius: var(--radius-sm); cursor: default; font-weight: 600; flex-wrap: wrap; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin: 0; max-width: none; }
.btn-row--center { justify-content: center; }

.link-arrow { font-family: var(--font-head); font-weight: 700; text-decoration: none; display: inline-flex; gap: .4em; align-items: center; min-height: 44px; }
.link-arrow:hover { text-decoration: underline; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; padding: 0.3em 0.8em; border-radius: 999px;
  font-size: var(--step--1); font-weight: 700; line-height: 1.3;
  background: var(--paper-2); color: var(--ink); border: 1px solid var(--line);
}
.chip--solid { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chip--outline { background: transparent; border-color: var(--ink-2); color: var(--ink-2); }
.chip--gold { background: var(--scg-gold-soft); border-color: #F3D59B; }
.chip--client { background: var(--paper); font-weight: 400; }
.chips--lg .chip { font-size: var(--step-0); padding: .4em 1em; }
.section--paper-2 .chip:not(.chip--gold):not(.chip--solid) { background: var(--paper); }

/* Cards */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card__media .ph, .card__media .media { border-radius: 0; border-width: 0 0 2px; }
.card__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 3vw, 24px); flex: 1; }
.card__title { font-size: var(--step-1); margin: 0; }
.card__link { color: var(--ink); text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); z-index: 1; }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; }
.card__tagline { color: var(--ink-2); margin: 0; }
.card__cta { margin-top: auto; padding-top: 4px; font-family: var(--font-head); font-weight: 700; color: var(--scg-red); }
.card__cta .arrow { display: inline-block; transition: transform .2s; }
.card:hover { border-color: var(--ink-2); box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.card:hover .card__link { text-decoration: underline; }
.card:hover .card__cta .arrow { transform: translateX(4px); }
.card-grid { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Image slots: real images keep their ratio; placeholders are labeled gray blocks (SPEC 7). */
.media { aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; background: var(--ph-bg); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.ph {
  aspect-ratio: var(--ratio, 16 / 9); display: grid; place-items: center; padding: 16px; text-align: center;
  background: repeating-linear-gradient(135deg, var(--ph-bg) 0 14px, #E6E2DC 14px 28px);
  border: 2px dashed var(--ph-border); border-radius: var(--radius);
}
.ph__label {
  font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.06em;
  color: var(--ink-2); background: rgb(255 255 255 / 0.85); padding: 0.3em 0.7em; border-radius: 6px;
}

/* Missing text: "[TBD: ...]" in a gold-soft highlight (SPEC 7). */
.tbd {
  background: var(--scg-gold-soft); color: var(--ink); padding: 0.05em 0.35em; border-radius: 4px;
  outline: 1px dashed #B9852C; outline-offset: -1px; font-weight: 700; font-style: normal;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.ph-text {
  border: 2px dashed var(--ph-border); border-radius: var(--radius); padding: 20px 24px;
  background: var(--ph-bg); color: var(--ink);
}
.ph-text p { margin: 0; }
.ph-text__label { font-family: var(--font-head); font-weight: 700; }
.ph-text__need { margin-top: 8px !important; font-size: var(--step--1); }
.standin-tag {
  position: absolute; left: 12px; bottom: 12px; margin: 0;
  background: var(--scg-gold-soft); color: var(--ink); border: 1px dashed #B9852C;
  font-size: 0.8125rem; font-weight: 700; padding: 4px 10px; border-radius: 6px;
}

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.stat {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px;
  padding: 18px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-ink); background: rgb(255 255 255 / 0.03);
}
.stat__value { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: var(--step-2); color: var(--scg-gold); line-height: 1.1; }
.stat__label { font-size: var(--step--1); color: var(--on-ink-2); }
.stat--placeholder { border-style: dashed; border-color: #6B6760; }
.stat--placeholder .stat__value { font-size: var(--step-1); }

/* Accordion (native <details>): one white card per list (same look as other cards), the
   questions are rows separated by 1px hairlines. Rows have no border, shadow or background of
   their own. Hairlines only between VISIBLE rows (search hides rows with [hidden]). */
.accordion { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.accordion details:not([hidden]) ~ details:not([hidden]) { border-top: 1px solid var(--line); }
.accordion summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 18px 20px; cursor: pointer; list-style: none; line-height: 1.35;
  font-family: var(--font-head); font-weight: 600; font-size: var(--step-0);
}
.accordion summary:focus-visible { outline-offset: -3px; border-radius: var(--radius-sm); }   /* inside the card's rounded clip */
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; width: 14px; height: 14px; margin-right: 2px;
  border-right: 2.5px solid var(--scg-red); border-bottom: 2.5px solid var(--scg-red);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s;
}
.accordion details[open] > summary { color: var(--scg-red); }   /* open state: red question (7.2:1 on white) + rotated chevron */
.accordion details[open] summary::after { transform: rotate(225deg) translate(-3px, 0); }
.accordion .accordion__body { padding: 0 20px 22px; color: var(--ink-2); }
.accordion .accordion__body p { margin: 0; max-width: 68ch; }

.checklist { display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before {
  content: ""; position: absolute; left: 2px; top: 0.45em; width: 16px; height: 9px;
  border-left: 3px solid var(--scg-red); border-bottom: 3px solid var(--scg-red); transform: rotate(-45deg);
}

/* Partner + press */
.partner-grid { display: grid; gap: var(--gutter); }
@media (min-width: 768px) { .partner-grid { grid-template-columns: 1fr 1fr; } }
.partner-card { padding: clamp(20px, 3vw, 32px); border-top: 4px solid var(--scg-red); }
.partner-card__role { font-family: var(--font-head); font-size: 0.8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .4em; }
.partner-card__name { font-size: var(--step-2); }
.partner-card p:last-child { margin-bottom: 0; color: var(--ink-2); }
.press-list { display: grid; gap: 12px; }
@media (min-width: 640px) { .press-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .press-list { grid-template-columns: repeat(4, 1fr); } }
.press-link {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--ink);
  transition: border-color .15s, background-color .15s;
}
.press-link:hover { border-color: var(--scg-red); background: var(--paper-2); color: var(--ink); }
.press-link__label { font-family: var(--font-head); font-weight: 700; color: var(--scg-red); }
/* Cards with a decorative 16:10 photo on top (site.json → press[].image). */
.press-link--photo { padding: 0; overflow: hidden; border-radius: var(--radius); background: var(--paper); }
.press-link--photo .press-link__label { padding: 16px 20px 0; }
.press-link--photo .press-link__blurb { padding: 0 20px 18px; }
.press-link__photo { display: block; }
.press-link__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.press-link--photo:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.press-link__label::after { content: " ↗"; }
.press-link__blurb { color: var(--ink-2); font-size: var(--step--1); }
.chips--clients .chip { font-size: 0.9375rem; }

/* 6. Sections: CTA band ---------------------------------------------------- */
.cta-band { text-align: center; position: relative; overflow: hidden; }
.cta-band__inner { display: grid; justify-items: center; gap: 8px; }
.cta-band__title { font-size: var(--step-4); letter-spacing: -0.02em; max-width: 18ch; }
.cta-band__title .accent { color: var(--scg-gold); }
.cta-band__status { color: var(--on-ink-2); font-size: var(--step-1); margin-bottom: 20px; }

/* 7. Header, banner, footer ------------------------------------------------ */
.recruit-banner { background: var(--ink); color: var(--on-ink); font-size: var(--step--1); }
.recruit-banner p { margin: 0; padding: 10px 0; max-width: none; text-align: center; }
.recruit-banner__label { color: var(--scg-gold); margin-right: .5em; }
.recruit-banner a { color: var(--scg-gold); font-weight: 700; margin-left: .5em; }

/* Header: always visible, always solid white, same height at every scroll position
   (60px mobile, 72px desktop). No transparent state and no scroll-driven JS. */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--paper);
  border-bottom: 1px solid var(--line); box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
}
.site-header__inner { display: flex; align-items: center; gap: 8px; height: var(--header-h); }
/* Original logo, unaltered, no plate. Clear space ("S" height = 0.5 × logo height) comes from
   the header's vertical padding plus the PNG's built-in margin (0.215 × height above/below,
   0.06 × width at the sides): mobile 12 + 7.7 ≈ 20px ≥ 18px; desktop 14 + 9.5 ≈ 23px ≥ 22px. */
.site-logo { display: block; flex: none; margin-right: auto; line-height: 0; border-radius: 4px; }
.site-logo img { height: 36px; width: auto; }
@media (min-width: 1024px) { .site-logo img { height: 44px; } }


.site-nav { order: 3; }
.header-actions { order: 2; display: flex; align-items: center; gap: 8px; }
.header-social { display: none; }
/* Join SCG: gold with ink text (9.31:1), hover to darker gold (ink on it 6.92:1). */
.header-cta { background: var(--scg-gold); color: var(--ink); white-space: nowrap; }
.header-cta:hover { background: var(--scg-gold-dark); color: var(--ink); }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 12px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; cursor: pointer; font-weight: 700; color: var(--ink);
}
.nav-toggle:hover { border-color: var(--scg-red); color: var(--scg-red); }
.nav-toggle__icon, .nav-toggle__icon::before, .nav-toggle__icon::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s;
}
.nav-toggle__icon { position: relative; }
.nav-toggle__icon::before, .nav-toggle__icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(6px) rotate(45deg); background: currentColor; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translateY(-6px) rotate(-45deg); background: currentColor; }
@media (max-width: 420px) {
  .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-toggle { padding: 0; justify-content: center; }
}

/* Nav links: ink text (18.4:1 on white); hover = red text + red underline;
   focus = the global 3px red ring (7.24:1 against white); current page = red + underline. */
.nav-link {
  display: flex; align-items: center; min-height: 48px; padding: 8px 12px;
  color: var(--ink); text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 2px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem; border-radius: var(--radius-sm);
}
.nav-link:hover { color: var(--scg-red); text-decoration: underline; text-decoration-color: var(--scg-red); }
.nav-link[aria-current] { color: var(--scg-red); text-decoration: underline; text-decoration-color: var(--scg-red); }   /* page or parent section */

/* "Join SCG" sub-menu (disclosure). The caret is a separate button; without JS it stays hidden
   and the sub-list is not shown (its pages are linked from /join/ and the footer). */
.nav-item__row { display: flex; align-items: center; }
.nav-sub-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0;
  background: none; border: 0; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer;
}
.nav-sub-toggle:hover { color: var(--scg-red); }
.nav-sub-toggle svg { transition: transform .2s; }
.nav-item--sub.is-open .nav-sub-toggle svg { transform: rotate(180deg); }
.nav-item--sub:not(.is-enhanced) .nav-sub { display: none; }
.nav-sub { display: none; }
.nav-item--sub.is-open .nav-sub { display: block; }
.nav-sub__link {
  display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-family: var(--font-head); font-weight: 600; font-size: .9375rem;
}
.nav-sub__link:hover { color: var(--scg-red); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.nav-sub__link[aria-current="page"] { color: var(--scg-red); background: var(--paper-2); box-shadow: inset 3px 0 0 var(--scg-red); }   /* 6.58:1 */
/* Mobile menu: accordion under "Join SCG", full-width rows. */
@media (max-width: 1023px) {
  .nav-item__row .nav-link { flex: 1; }
  .nav-sub { margin: 0 0 8px 12px !important; padding-left: 8px !important; border-left: 2px solid var(--line); }
}

/* Mobile menu: full-width white panel under the header. Without JS the links show inline. */
.no-js .nav-toggle { display: none; }
.nav-menu { padding: 8px 0 16px; }
.js .nav-menu {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
  padding: 8px var(--gutter) 20px; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.js .nav-menu.is-open { display: block; }
.nav-menu__social { padding: 12px 12px 0; }
/* No-JS on small screens: the expanded link list would make a sticky bar too tall. */
.no-js .site-header { position: relative; }
.no-js .site-header__inner { flex-wrap: wrap; height: auto; min-height: var(--header-h); }
.no-js .site-nav { order: 4; width: 100%; }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.icon-btn:hover { border-color: var(--ink); color: var(--scg-red); }
.site-header .icon-btn { border: 1.5px solid var(--ink); }        /* outlined in ink */
.site-header .icon-btn:hover { border-color: var(--scg-red); color: var(--scg-red); }
.social-icons { display: flex; gap: 8px; }

@media (min-width: 1024px) {
  .site-nav { order: 1; flex: 1; display: flex; justify-content: center; }
  .header-actions { order: 2; }
  .header-social { display: block; }
  .nav-toggle, .js .nav-toggle { display: none; }
  .nav-menu, .js .nav-menu {
    display: flex; position: static; align-items: center; gap: 10px; padding: 0; border: 0; box-shadow: none; background: none; max-height: none; overflow: visible;   /* 10px + 2×14px link padding ≈ 38px between labels */
  }
  .nav-menu__social { display: none; }
  .nav-link { padding: 8px 14px; }
  /* Desktop dropdown: the caret sits tight against "Join SCG"; the panel layers above the
     page banners (header z-index 50) and is never clipped (no overflow on the header). */
  .nav-item--sub { position: relative; }
  .nav-item--sub .nav-link { padding-right: 2px; }
  .nav-sub-toggle { width: 28px; margin-right: 4px; }
  .nav-item--sub.is-enhanced .nav-sub {
    display: block; position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 232px; padding: 8px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift);
    visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  }
  /* Invisible bridge so the pointer can travel from the link to the panel without closing it. */
  .nav-item--sub.is-enhanced .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .nav-item--sub.is-open .nav-sub { visibility: visible; opacity: 1; transform: none; transition: opacity .16s ease, transform .16s ease, visibility 0s; }
}
/* Six links and two carets: tighter between 1024 and 1279px so they keep ≥16px clear of the
   logo and the icons. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-menu, .js .nav-menu { gap: 2px; }
  .nav-link { padding: 8px 8px; }
  .nav-sub-toggle { width: 24px; margin-right: 2px; }
  .no-js .site-header { position: sticky; }
  .no-js .site-header__inner { flex-wrap: nowrap; height: var(--header-h); }
  .no-js .site-nav { width: auto; order: 1; }
}

.site-footer { background: var(--ink); color: var(--on-ink-2); padding-top: clamp(48px, 6vw, 72px); --focus: var(--scg-gold); }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px 40px; }
/* Footer logo: the officer-approved reversed variant directly on black (no plate).
   200px wide on mobile, 240px from 768px. White parts 18.4:1, gold 9.3:1 on --ink. */
/* The PNG has ~5.9% transparent margin at each side; the negative margin lines the
   artwork up with the footer text column. */
.site-footer__logo { --w: 200px; display: inline-block; line-height: 0; border-radius: 4px; margin-left: calc(var(--w) * -0.059); }
.site-footer__logo img { width: var(--w); height: auto; }
@media (min-width: 768px) { .site-footer__logo { --w: 240px; } }
.site-footer__tagline { color: var(--on-ink); margin: 16px 0 0; }
.site-footer__aside { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
@media (min-width: 768px) { .site-footer__aside { align-items: flex-end; text-align: right; } }
.site-footer__affiliation { color: var(--on-ink); font-weight: 700; margin: 0; max-width: 34ch; }
.site-footer .icon-btn { background: transparent; border-color: var(--line-ink); color: var(--on-ink); }
.site-footer .icon-btn:hover { border-color: var(--scg-gold); color: var(--scg-gold); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 28px !important; }
.site-footer__links a { color: var(--on-ink); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.site-footer__links a:hover { color: var(--scg-gold); text-decoration: underline; }
.gold-rule { display: block; width: 56px; height: 3px; background: var(--scg-gold); margin: 20px 0; border-radius: 2px; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-bottom: 16px; font-size: var(--step--1); }
.site-footer__legal p { margin: 0; }
.site-footer__legal a { color: var(--on-ink); }
.site-footer__note { margin: 0; padding-bottom: 28px; max-width: none; font-size: .8125rem; color: var(--on-ink-2); }

/* 8. Page: home (docs/HOME-LAYOUT.md) ---------------------------------------- */
.home-block { padding-block: clamp(56px, 7vw, 100px); }
.home-block--ink { background: var(--ink); color: var(--on-ink); --focus: var(--scg-gold); }
.home-title { font-weight: 800; font-size: clamp(2rem, 1.45rem + 2.4vw, 3rem); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: .5em; }
.accent-red { color: var(--scg-red); }    /* 7.24:1 on white */
.accent-gold { color: var(--scg-gold); }  /* 9.3:1 on ink */

/* 1. Hero + 2. stat strip share one background photo. */
.hero-wrap { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.hero-wrap__bg { position: absolute; inset: 0; z-index: -2; }
.hero-wrap__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Full-screen-style hero: content block centered, ≥ 96px between header and logo,
   extra bottom room so the photo fades into the stat strip below the text.
   Mobile: max(620px, 85svh) · tablet (768+): 80vh · desktop (1024+): 92vh, 760–960px. */
.hero {
  position: relative; display: grid; place-items: center; text-align: center; color: var(--on-ink);
  /* The sticky header sits above the hero (in flow), so heights subtract it. */
  min-height: max(560px, calc(85vh - var(--header-h))); min-height: max(560px, calc(85svh - var(--header-h)));
  /* Equal top/bottom padding keeps the block centred; ≥ 136px from the header to the logo
     (≥ 96px required) and the EY line stays well above the bottom fade. */
  padding: clamp(136px, 17vh, 180px) 0;
}
@media (min-width: 768px) { .hero { min-height: calc(80vh - var(--header-h)); } }
@media (min-width: 1024px) { .hero { min-height: clamp(688px, calc(92vh - var(--header-h)), 888px); } }
/* Flat maroon-black tint over the whole hero (no gradient, no blur). npm run contrast and
   npm run hero-contrast measure text and the reversed logo against it. */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-tint); }
/* Fade to white: one continuous gradient that reaches opaque --paper 8px before its end
   and extends 2px past the hero, so the boundary pixel with the (solid white) stat strip
   is always fully covered at any zoom/pixel density. This removes the old seam, which came
   from 86% white over the TINTED photo above vs 86% white over the UNTINTED photo below,
   plus a partially covered pixel row at fractional zoom levels. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: clamp(96px, 12vh, 140px); z-index: -1;
  background: linear-gradient(to bottom,
    rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .18) 30%, rgb(255 255 255 / .5) 55%,
    rgb(255 255 255 / .82) 78%, var(--paper) calc(100% - 8px), var(--paper) 100%);
}
.hero__inner { display: grid; justify-items: center; }
/* Reversed logo (officer-approved, dark/photo backgrounds only) directly on the photo; it
   leads, the H1 supports. Width: 280px @360, 400 @768, 480 @1280, 540 @1440 (max 82vw).
   The PNG has 21.5% transparent margin above/below the artwork (0.0592 × width), so the
   margin subtracts it to give VISIBLE gaps of 32px (<768), 44px (768+), 56px (1024+). */
.hero__logo {
  --logo-w: clamp(280px, calc(174px + 29.4vw), 400px); --logo-gap: 32px;
  width: var(--logo-w); max-width: 82vw; height: auto;
  margin-bottom: calc(var(--logo-gap) - min(var(--logo-w), 82vw) * 0.0592);
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .35));
}
@media (min-width: 768px) { .hero__logo { --logo-w: clamp(400px, calc(280px + 15.625vw), 480px); --logo-gap: 44px; } }
@media (min-width: 1024px) { .hero__logo { --logo-gap: 56px; } }
@media (min-width: 1280px) { .hero__logo { --logo-w: clamp(480px, 37.5vw, 540px); } }
/* H1 supports the logo: clamp(2.5rem, 4.2vw, 4rem) = 40px to 768, ~54px @1280, ~60px @1440,
   64px cap. One line at every width: "Welcome to SCG" is ~8.56 × font-size wide, so below
   ~385px it is capped at 10.4vw (37.4px at 360 = 320 of 328px available). */
.hero__title { font-weight: 800; font-size: min(clamp(2.5rem, 4.2vw, 4rem), 10.4vw); letter-spacing: -0.02em; line-height: 1.06; margin-bottom: 20px; white-space: nowrap; }
/* Subhead: one line from 1024px up; balanced wrapping below. */
.hero__lede { font-size: clamp(1rem, 1.6vw, 1.5rem); line-height: 1.5; max-width: min(1200px, 100%); margin: 0 auto 28px; text-wrap: balance; }
@media (min-width: 1024px) { .hero__lede { white-space: nowrap; } }
.hero__partner { font-family: var(--font-head); font-weight: 600; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; margin: 0; text-wrap: balance; }
@media (max-width: 420px) { .hero__partner { letter-spacing: .1em; font-size: .75rem; } }

/* Solid --paper: exactly the colour the hero's fade ends in, so there is no seam. */
.stat-strip { position: relative; background: var(--paper); padding-block: 20px 36px; }
/* Three compact columns at every width (they fit at 360px); hairline dividers. */
.stat-strip__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0 auto; max-width: 960px; text-align: center; }
.stat-strip__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 10px 6px; } /* column-reverse: flex-end = top, so numbers align */
.stat-strip__item + .stat-strip__item { border-left: 1px solid var(--line); }
.stat-strip__item dd { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(2.25rem, 1.75rem + 1.6vw, 3rem); line-height: 1.05; color: var(--scg-red); } /* ≥ 5.2:1 on the wash */
/* Count-up digits: tabular figures and a min-width for the final value's length, so the
   layout never shifts while the numbers change (site.js also locks the exact width). */
.stat-strip__num { display: inline-block; min-width: calc(var(--chars, 2) * 1ch); font-variant-numeric: tabular-nums; text-align: right; }
.stat-strip__item dt { margin-top: 8px; font-family: var(--font-head); font-weight: 700; font-size: .6875rem; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
@media (min-width: 560px) {
  .stat-strip__item { padding: 12px 16px; }
  .stat-strip__item dt { font-size: .75rem; letter-spacing: .16em; }
}

/* 3. Community + 5. Where SCG takes you: two columns. */
.split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split__text p { color: var(--ink-2); }
.split__text .btn { margin-top: 8px; }
.split--reverse .split__media { order: -1; }
@media (min-width: 768px) {
  .split:not(.split--reverse) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .split--reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.photo-frame { position: relative; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lift); }
.photo-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-frame .ph { border-radius: 16px; }

/* 4. Our Work */
.work__head { text-align: center; max-width: 900px; margin: 0 auto clamp(32px, 4vw, 56px); }
.work__intro { color: var(--on-ink-2); margin-inline: auto; }
/* Cards get a little more room than the global container so the text column breathes. */
.work > .container { max-width: calc(1280px + 2 * var(--gutter)); }
.work__grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 560px); justify-content: center; align-items: stretch; }
@media (min-width: 1024px) { .work__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.work-card {
  position: relative; display: flex; flex-direction: column; height: 100%; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
/* Small hover lift (4px) on pointer devices only, and none at all under reduced motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .work-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(0 0 0 / 0.35); }
}
.work-card__media { position: relative; }
/* Banner tile: 8/3 on desktop (~150px on ~400px cards); 180-190px below 1024px so the logo
   is not cramped on narrower single-column cards. Same height on all cards. */
/* width: 100% + min-width: 0 stop the min-height from being turned into a minimum width
   through the aspect ratio (180 × 8/3 = 480px), which overflowed narrow cards. */
.work-card__media .ph, .work-card__media .media, .work-card__logo-tile { width: 100%; min-width: 0; aspect-ratio: 8 / 3; min-height: 180px; max-height: 190px; }
@media (min-width: 1024px) { .work-card__media .ph, .work-card__media .media, .work-card__logo-tile { min-height: 0; max-height: none; } }
.work-card__media .ph, .work-card__media .media { border-radius: 0; border-width: 0 0 2px; }
/* Flex-centred (not grid): with <picture> as display: contents, its <source> child (which
   Chrome renders as display: block) became a second grid row and pushed the logo 16-32px
   below centre. The divider is a border, so it is outside the centring box. */
/* Divider: a 1px hairline in the card-border colour. Dark/coloured tiles (--dark: logo_bg
   luminance < 0.6) keep the same 1px in their own colour, so they show no extra line and
   every tile keeps the same height. */
.work-card__logo-tile {
  container-type: size; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--tile-bg); border-bottom: 1px solid var(--line); padding-bottom: 1px;   /* + 1px = the old 2px border, so the logo box (container units) is unchanged */
}
.work-card__logo-tile--dark { border-bottom-color: var(--tile-bg); }
.work-card__logo-tile picture { display: contents; }
.work-card__logo-tile source { display: none; }
/* Never cropped or distorted (contain); sized with the tile's container units. Wide logos by
   width (55%), square/tall ones by height (50%); everything ≤ 60% wide and ≤ 55% tall,
   square logos ≤ 100px, and never enlarged past the file's own pixel size (1x). */
/* --off-x/--off-y (projects.json → logo_offset) correct uneven built-in margins in opaque logo
   files, as a fraction of the logo's own rendered size, so the artwork is optically centred. */
.work-card__logo-tile img {
  display: block; flex: none; object-fit: contain; max-width: 60cqw; max-height: min(55cqh, var(--logo-max-h));
  transform: translate(calc(var(--off-x, 0) * 100%), calc(var(--off-y, 0) * 100%));
}
.work-card__logo-tile--wide img { width: 55cqw; max-width: min(60cqw, var(--logo-max-w, 100%)); height: auto; }   /* never past 1x */
.work-card__logo-tile--square img { height: min(50cqh, 100px, var(--logo-max-h)); width: auto; }

/* Compact body: 20px (mobile) / 24px (768+) padding. */
.work-card__body { display: flex; flex-direction: column; padding: 20px; flex: 1; }
@media (min-width: 768px) { .work-card__body { padding: 24px; } }
.work-card__title { font-size: 1.375rem; line-height: 1.25; margin: 0 0 22px; }   /* 22px; 22px below on mobile */
@media (min-width: 1024px) { .work-card__title { margin-bottom: 28px; } }           /* 28px below on desktop */
.work-card__title .card__link { color: var(--scg-red); text-decoration: none; }
/* Underline only on hover (pointer devices) or keyboard focus; the whole card stays clickable. */
@media (hover: hover) { .work-card:hover .card__link { text-decoration: underline; text-underline-offset: 4px; } }
.work-card .card__link:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
/* Keyboard focus ring on the whole card. It is drawn on the card itself because the card's
   overflow: hidden (for the rounded tile corners) would clip a ring on the link's ::after. */
.work-card .card__link:focus-visible::after { outline: none; }
.work-card:has(.card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
.work-card__term { color: var(--ink-2); font-weight: 600; font-size: .9375rem; }   /* 15px */
.work-card__rows { display: grid; gap: 14px; margin: 0; }
/* Icon column (28px) + 14px gap. The icon is vertically centred against the WHOLE row
   (label + body, however many lines). It stays inside <dt> so the <dl> markup is valid, and
   is positioned against the row rather than moved into a separate grid column. */
.work-card__row { --icon: 28px; position: relative; padding-left: calc(var(--icon) + 14px); }
.work-card__row dt { font-family: var(--font-head); font-weight: 600; font-size: .9375rem; line-height: 1.4; }   /* 15px semibold */
.work-card__row dd { margin: 2px 0 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }               /* 15px / 1.5 */
/* Card Skills row (every card): up to 4 pills in the Join "Skills you'd build" style
   (.seat-skill), at most two rows: each pill is 24px tall (20px line + 2px padding + 1px
   borders) and rows are 6px apart, so two rows are 54px. 3px of bottom padding (inside the
   clip) keeps the second row's bottom border clear of the edge at fractional positions; a
   third row would start at 60px, past the 57px limit, so a pill that does not fit is left out
   rather than cut. */
.work-card__skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; max-height: 57px; overflow: hidden; }
ul.work-card__skills { padding-bottom: 3px; }   /* ul.: outranks the ul[class] list reset */
.work-card__skills .seat-skill { font-size: .8125rem; line-height: 20px; padding: 1px 10px; }
.work-card__icon {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: var(--icon); height: var(--icon);
  border-radius: 50%; display: grid; place-items: center; background: var(--scg-red); color: var(--paper);
}
.work-card__pending { font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* muted one line; ink-2 on white 11.2:1 */
/* Pinned to the bottom of every card (equal-height grid), at least 16px below the rows. */
.work-card__more { margin-top: auto; padding-top: 16px; font-family: var(--font-head); font-weight: 600; font-size: .9375rem; color: var(--scg-red); }
.work-card__more .arrow { display: inline-block; transition: transform .2s; }
@media (hover: hover) { .work-card:hover .work-card__more .arrow { transform: translateX(3px); } }
.clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp--2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp--3 { -webkit-line-clamp: 3; line-clamp: 3; }
.work__more { margin-top: clamp(32px, 4vw, 48px); }
.work { padding-bottom: clamp(72px, 7vw, 96px); }   /* room below "View all projects" before the band ends */

/* EY partnership band: hero photo (bottom crop) under the same flat --hero-tint, no borders.
   Content centred with ≥ 56px above and below. Stacked (logo below the phrase) under 1024px,
   one row from 1024px. Heights ~220px (360, stacked), ~200px (768), 220px (1440). */
.ey-band {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: 220px; padding-block: 56px; color: var(--on-ink); background: var(--ink);
}
@media (min-width: 768px) { .ey-band { min-height: 200px; } }
@media (min-width: 1024px) { .ey-band { min-height: 220px; } }
.ey-band__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 92%; }
.ey-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-tint); }
.ey-band__inner { display: flex; justify-content: center; }
.ey-band__link {
  --ey-phrase-fs: clamp(1.375rem, calc(1.078rem + 1.4vw), 2.5rem);
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  color: var(--on-ink); text-decoration: none; border-radius: 12px; padding: 4px 8px; --focus: var(--scg-gold);
}
@media (min-width: 1024px) { .ey-band__link { flex-direction: row; gap: 28px; text-align: left; } }
a.ey-band__link:hover .ey-band__text { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
/* 22px @360 → 28px @768 → ~37px @1440, 40px cap (white on the tinted photo, ≥ 7.8:1 measured). */
.ey-band__text {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  font-size: var(--ey-phrase-fs); line-height: 1.25; color: var(--on-ink); text-wrap: balance;
}
/* Reversed EY logo directly on the band (no plate): 52px @360, 56px @768, 64px @1280, 72px @1440. */
.ey-band__logo { --ey-logo-h: 52px; --ey-logo-offset: 0px; display: inline-flex; flex: none; line-height: 0; }
@media (min-width: 768px) { .ey-band__logo { --ey-logo-h: clamp(56px, calc(56px + (100vw - 768px) * 0.015625), 64px); } }
@media (min-width: 1280px) { .ey-band__logo { --ey-logo-h: clamp(64px, calc(64px + (100vw - 1280px) * 0.05), 72px); } }
/* Row layout: align the "EY" letters (not the image box, which includes the beam above them)
   with the phrase's capitals. Measured: the EY letters' centre is at 73.82% of the image height
   (0.2382 × height below the box centre), and the capitals' centre is ~0.01 × font-size above
   the text box centre. Both boxes are centred on the same line, so the logo moves up by the
   difference. Visual only (transform), so the row's height and centring are unchanged. */
@media (min-width: 1024px) {
  .ey-band__logo { --ey-logo-offset: calc(-0.2382 * var(--ey-logo-h) - 0.01 * var(--ey-phrase-fs)); }
}
.ey-band__logo picture { display: contents; }
.ey-band__logo source { display: none; }
.ey-band__logo img { display: block; width: auto; height: var(--ey-logo-h); transform: translateY(var(--ey-logo-offset)); }

.testimonials { max-width: 820px; margin: clamp(48px, 6vw, 80px) auto 0; text-align: center; }
.testimonial { margin: 0; display: flex; flex-direction: column; }
.testimonial + .testimonial { margin-top: 36px; }
.is-carousel .testimonial + .testimonial { margin-top: 0; }
.testimonial__client { order: -1; font-family: var(--font-head); font-weight: 700; color: var(--on-ink); margin-bottom: 12px; }
.testimonial__title { font-weight: 600; color: var(--on-ink-2); }
.testimonial__quote { margin: 0; font-size: var(--step-1); line-height: 1.55; color: var(--on-ink-2); font-style: italic; }
.testimonial__quote p { margin-inline: auto; }
.testimonials__dots { display: flex; justify-content: center; gap: 2px; margin-top: 16px; }
.testimonials__dot { position: relative; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
.testimonials__dot::before { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--ph-border); transition: transform .2s, background-color .2s; }
.testimonials__dot[aria-current="true"]::before { background: var(--scg-gold); transform: scale(1.3); }

/* 5. Where SCG takes you */
/* One white card (outline, radius, shadow); tiles keep their size and spacing but
   have no background, border or shadow of their own, so only the logos show. */
.employer-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: clamp(22px, 4vw, 40px); }
.employer-card__title { text-align: center; font-size: .8125rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--scg-red); margin-bottom: 24px; }
.employer-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 520px) { .employer-card__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.employer-card__item { display: grid; place-items: center; height: 76px; padding: 10px 8px; min-width: 0; }
/* Same fixed box for every logo: contained, never stretched or recolored, max 40px tall
   and 80% of the tile wide; logoBox gives each about the same area. Not interactive,
   so no hover effect. */
.employer-card__item picture { display: contents; }
.employer-card__item img { width: var(--logo-w); max-width: 80%; height: auto; max-height: 40px; object-fit: contain; }
.employer-card__item--text { text-align: center; font-family: var(--font-head); font-weight: 700; font-size: .875rem; line-height: 1.25; color: var(--ink); }

/* Project detail (dialog + standalone page) */
html.dialog-open { overflow: hidden; }
.project-dialog { padding: 0; border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--ink); }
.project-dialog::backdrop { background: rgb(20 20 20 / 0.62); }
.project-dialog__panel { display: flex; flex-direction: column; height: 100%; background: var(--paper); }
@media (min-width: 768px) { .project-dialog__panel { width: min(720px, 100%); margin-left: auto; box-shadow: -20px 0 60px rgb(0 0 0 / 0.3); } }
.project-dialog__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--paper); }
.project-dialog__nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.project-dialog__pos { min-width: 4.5em; text-align: center; font-size: .875rem; color: var(--ink-2); }
.project-dialog__full { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-weight: 700; font-size: .9375rem; }
.project-dialog__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: no-preference) {
  .project-dialog[open] .project-dialog__panel { animation: sheet-in .28s cubic-bezier(.2, .8, .2, 1); }
  .project-dialog[open]::backdrop { animation: fade-in .28s ease-out; }
  @media (min-width: 768px) { .project-dialog[open] .project-dialog__panel { animation-name: drawer-in; } }
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* ---- Project detail (dialog + /projects/<id>/): same visual language as the cards ---- */
/* Logo banner: shared rules with the card tile, wider ratio. */
.project-banner {
  container-type: size; display: flex; align-items: center; justify-content: center; overflow: hidden;
  width: 100%; aspect-ratio: 3 / 1; min-height: 150px; max-height: 210px; background: var(--tile-bg);
}
.project-banner picture { display: contents; }
.project-banner source { display: none; }
.project-banner img {
  display: block; flex: none; object-fit: contain; max-width: 60cqw; max-height: min(55cqh, var(--logo-max-h));
  transform: translate(calc(var(--off-x, 0) * 100%), calc(var(--off-y, 0) * 100%));
}
.project-banner--wide img { width: 50cqw; max-width: min(60cqw, var(--logo-max-w, 100%)); height: auto; }
.project-banner--square img { height: min(50cqh, 110px, var(--logo-max-h)); width: auto; }
.project-banner--missing { border-bottom: 2px dashed var(--ph-border); }
/* Client name on a neutral tile when there is no logo file (cards and banner). */
.logo-tile__name { padding: 0 8%; text-align: center; font-family: var(--font-head); font-weight: 700; color: var(--ink); line-height: 1.2; font-size: clamp(1.125rem, 6cqw, 1.75rem); text-wrap: balance; }
.work-card__logo-tile--name .logo-tile__name { font-size: clamp(1rem, 7cqw, 1.5rem); }

.project-detail { --pad: clamp(20px, 4vw, 32px); }
.project-detail__head { padding: 22px var(--pad) 0; }
.project-detail__title { font-weight: 700; font-size: 1.625rem; line-height: 1.2; color: var(--scg-red); margin: 0 0 8px; letter-spacing: -0.01em; }   /* card-title style, 26px */
.project-detail__term { color: var(--ink-2); font-weight: 600; font-size: 1rem; letter-spacing: 0; }
/* The title receives programmatic focus (so screen readers announce it) but is not an
   interactive control, so it shows no focus ring; the dialog's buttons and links keep theirs. */
.project-detail__title:focus, .project-detail__title:focus-visible { outline: none; }
/* Labelled fields under the title (label above value): one row of columns, stacked at 640px
   and below. The Disciplines column takes the remaining width so its pills wrap inside it. */
.project-detail__meta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; }
.project-detail__meta > div { min-width: 0; }
.project-detail__meta dt { font-family: var(--font-head); font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.project-detail__meta dd { margin: 2px 0 0; font-weight: 700; font-size: .9375rem; }
.project-detail__disciplines { flex: 1 1 160px; }   /* narrow enough to share the row with a long client name */
.project-detail__disciplines dd { margin-top: 6px; font-weight: inherit; }
.project-detail__meta .chips { gap: 6px; }
.project-detail__meta .chip { font-size: .8125rem; }
@media (max-width: 640px) { .project-detail__meta { flex-direction: column; gap: 12px; } .project-detail__disciplines { flex: none; } }
.project-detail__body { padding: 4px var(--pad) 32px; }
.project-detail__section { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.project-detail__label { font-family: var(--font-head); font-size: .9375rem; font-weight: 700; margin: 0 0 8px; color: var(--ink); }   /* 15px, like the card labels */
.project-detail__section p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); max-width: 68ch; }
.project-detail__section .checklist { gap: 6px; font-size: .9375rem; color: var(--ink-2); }
.project-detail__section .chips { gap: 6px; }
.project-detail__section .chip { font-size: .8125rem; }
/* Engagements (one per semester, newest first) */
.engagement { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.engagement__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 4px; font-family: var(--font-head); }
.engagement__semester { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--scg-red); }
.engagement__title { font-size: 1.0625rem; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.engagement__tagline { margin: 0 0 4px; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); font-style: italic; }
.engagement .project-detail__section { border-top: 0; margin-top: 14px; padding-top: 0; }
.project-detail__shared { margin-top: 22px; }
/* Client quote (only with permission) and public link, inside an engagement */
.project-detail__quote { margin: 16px 0 0; padding-left: 14px; border-left: 3px solid var(--scg-gold); }
.project-detail__quote blockquote { margin: 0; }
.project-detail__quote p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink); }
.project-detail__quote figcaption { margin-top: 6px; font-size: .875rem; color: var(--ink-2); }
.project-detail__link { margin: 14px 0 0; font-size: .9375rem; }
.project-detail__link a { font-weight: 700; }
.project-detail__related { margin: 12px 0 0; font-size: .9375rem; color: var(--ink-2); }
.project-detail__related a { font-weight: 700; }

/* ---- Standalone project page ---- */
.project-page { background: var(--paper-2); padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 88px); }
.project-page__inner { max-width: calc(820px + 2 * var(--gutter)); }
.project-page__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px !important; font-size: .875rem; }
.breadcrumbs li { display: flex; align-items: center; gap: 4px; color: var(--ink-2); }
.breadcrumbs li + li::before { content: "/"; color: var(--ink-2); margin-right: 4px; }
.breadcrumbs a { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.project-pager { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
.project-pager > span:empty { display: none; }
@media (min-width: 640px) { .project-pager { grid-template-columns: 1fr 1fr; } .project-pager > span:empty { display: block; } }
.project-pager__link {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; min-height: 44px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--ink);
}
.project-pager__link:hover { border-color: var(--scg-red); color: var(--ink); }
@media (min-width: 640px) { .project-pager__link--next { text-align: right; grid-column: 2; } }
.project-pager__dir { font-family: var(--font-head); font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.project-pager__name { font-family: var(--font-head); font-weight: 700; color: var(--scg-red); }
.project-pager__link--prev .project-pager__dir::before { content: "← "; }
.project-pager__link--next .project-pager__dir::after { content: " →"; }
.project-page__back { margin: 16px 0 0; }

/* ---- Projects explorer (/projects/) ---- */
.projects-explorer { background: var(--paper-2); padding-block: clamp(24px, 4vw, 40px) clamp(56px, 7vw, 96px); }
.projects-explorer__inner { max-width: calc(1280px + 2 * var(--gutter)); }
.project-filters { margin: 0 0 24px; display: grid; gap: 14px; }
.project-filters__row { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 768px) {
  .project-filters__row { grid-template-columns: minmax(240px, 2fr) repeat(auto-fit, minmax(210px, 1fr)); }
  .project-filters__tracks { grid-column: 1 / -1; }
}
.project-filters__field { display: grid; gap: 6px; }
.project-filters label, .project-filters legend, .project-filters__label { font-family: var(--font-head); font-size: .8125rem; font-weight: 700; color: var(--ink); }
.project-filters input[type="search"], .project-filters select {
  min-height: 44px; width: 100%; padding: 0 12px; font: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink-2); border-radius: var(--radius-sm);
}
.project-filters__fits { position: relative; }
/* Mobile: Search always visible; the other filters open from a "Filters" toggle. */
.project-filters__toggle {
  min-height: 44px; padding: 0 16px; font: inherit; font-weight: 700; font-size: .9375rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink-2); border-radius: var(--radius-sm); cursor: pointer; justify-self: start;
}
.project-filters__toggle[aria-expanded="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.project-filters__more { display: none; gap: 12px; }
.project-filters__more.is-open { display: grid; }
@media (min-width: 768px) {
  .project-filters__toggle { display: none; }
  .project-filters__more, .project-filters__more.is-open { display: contents; }
}
.project-filters__fits > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px; cursor: pointer; list-style: none; white-space: nowrap;
  background: var(--paper); border: 1px solid var(--ink-2); border-radius: var(--radius-sm); font-size: .9375rem; color: var(--ink);
}
.project-filters__fits > summary::-webkit-details-marker { display: none; }
.project-filters__fits > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.project-filters__fits[open] > summary::after { transform: rotate(225deg) translate(-2px, 0); }
.project-filters__badge { font-weight: 700; color: var(--scg-red); }
.project-filters__fits > summary > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.project-filters__popover {
  /* Anchored to the field's right edge (it sits in the last column) and never wider than the viewport. */
  position: absolute; z-index: 20; top: calc(100% + 6px); left: auto; right: 0; width: max(100%, 340px); max-width: calc(100vw - 2 * var(--gutter)); max-height: 340px; overflow: auto;
  display: grid; gap: 8px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift);
}
@media (max-width: 767px) { .project-filters__popover { position: static; width: auto; max-width: none; margin-top: 6px; } }
.project-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.project-filters__tracks legend { margin-bottom: 8px; padding: 0; }
.filter-chip { position: relative; display: inline-flex; }
.filter-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.filter-chip span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--ink-2); background: var(--paper); color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: .875rem;
}
.filter-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.filter-chip input:checked + span::before { content: "✓"; margin-right: 6px; color: var(--scg-gold); }
.filter-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.filter-chip:hover span { border-color: var(--scg-red); }
.project-filters__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.project-filters__count { margin: 0; font-weight: 700; color: var(--ink-2); font-size: .9375rem; }
.project-filters__clear { background: none; border: 0; padding: 0 4px; min-height: 44px; font: inherit; font-weight: 700; color: var(--scg-red); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.project-filters__fit-empty { margin: 0; color: var(--ink-2); font-size: .875rem; }
/* Grid: 1 col mobile, 2 tablet, 3 desktop; equal-height cards (the shared Home card). */
.projects-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 640px) { .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.projects-grid__item { display: flex; }
.projects-grid__item[hidden] { display: none; }
.projects-grid__item > .work-card { width: 100%; }
.projects-empty { text-align: center; padding: 48px 16px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--paper); }
.projects-empty__title { font-size: var(--step-1); margin-bottom: 6px; }
.projects-empty p { margin: 0 auto 16px; color: var(--ink-2); }


/* ==========================================================================
   Stage 3A: About, Join, Prepare. Same tokens, radius, section rhythm and focus rules
   as Home/Projects. Contrast notes next to each text colour pairing.
   ========================================================================== */
/* List items used as cards/panels are not prose: no 70ch cap. */
.stepper__panel, .stepper__body, .story__item, .pillar, .qcard, .star__item, .gallery__item, .resource-grid > li, .doc-card, .press-list > li { max-width: none; }
/* ---- Inner-page photo banner (components/page-banner.njk; site.json → page_banners) ----
   Same flat maroon-black tint as the Home hero (--hero-tint colour; opacity per page via
   --banner-tint, 0.72-0.8). Text bottom-left in the normal container. Min heights
   260 / 300 / 360px (360 / 768 / 1024+); taller only when the content needs it (e.g. the
   /join/ status card on phones). No border, shadow or fade at the bottom: the next section
   starts on a straight edge. npm run banner-contrast measures the text over each photo. */
.page-banner {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: 260px; padding-block: 40px 32px; background: var(--ink); color: var(--on-ink); --focus: var(--scg-gold);
}
@media (min-width: 768px) { .page-banner { min-height: 300px; padding-block: 48px 40px; } }
@media (min-width: 1024px) { .page-banner { min-height: 360px; padding-block: 56px 48px; } }
.page-banner__bg { position: absolute; inset: 0; z-index: -2; }
.page-banner__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--banner-focal, 50% 50%); }
.page-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(38 8 10 / var(--banner-tint, 0.78)); }
/* No photo yet: a subtle maroon-black gradient (the --hero-tint colour, opaque, to a slightly
   lighter maroon) with a very faint diagonal line pattern. Gold on the lightest stop 8.1:1. */
.page-banner--plain {
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / .018) 0 2px, transparent 2px 14px),
    linear-gradient(115deg, #26080A 0%, #2E0B0E 45%, #3D1418 100%);
}
.page-banner--plain::before { display: none; }
.page-banner__inner { width: 100%; }
.page-banner__text { max-width: 900px; }
.page-banner__eyebrow { color: var(--scg-gold); }                         /* measured, see DECISIONS */
.page-banner__title { color: var(--on-ink); margin-bottom: .2em; }
.page-banner__lede { color: var(--on-ink); margin: 0; }
.page-banner .breadcrumbs ol { margin-bottom: 8px !important; }
.page-banner .breadcrumbs li { color: var(--on-ink); }
.page-banner .breadcrumbs li + li::before { color: var(--on-ink-2); }
.page-banner .breadcrumbs a { color: var(--scg-gold); }
.page-banner--aside .page-banner__inner { display: grid; gap: 24px; align-items: end; }
@media (min-width: 900px) { .page-banner--aside .page-banner__inner { grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); gap: 56px; } }
/* Side card on the photo (Join status card): 1px light border and a slightly lifted surface. */
.page-banner .status-card { background: rgb(26 26 26 / .94); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 40px rgb(0 0 0 / .35); }
.section__hint { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.section--ink .section__title { color: var(--on-ink); }
.link-button { background: none; border: 0; padding: 0 4px; min-height: 44px; font: inherit; font-weight: 700; color: var(--scg-red); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pill { display: inline-flex; align-items: center; vertical-align: middle; padding: .15em .7em; border-radius: 999px; font-family: var(--font-body); font-size: .75rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
.pill--optional { background: var(--paper-2); color: var(--ink); border: 1px dashed var(--ink-2); }
.pill--now { background: var(--scg-gold); color: var(--ink); }                     /* 9.3:1 */
.cta-strip { border-top: 1px solid var(--line); }
.cta-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.cta-strip__title { font-size: var(--step-2); margin: 0; }

/* ---- About: story timeline ----
   Phones (<768px): label above each card, line on the left, photo on top (16:9, max 180px).
   768px+: label column | card. Every card is the same grid (text | 32% photo at 4:3), the same
   padding and height (grid-auto-rows: 1fr), text top-aligned at 56ch; the label baseline and
   the dot line up with the card title. Progress (story.js): the line fills red top to bottom
   and dots fill as cards come into view; without JS or with reduced motion: final state. */
.story { --card-pad: 28px; --dot: 16px; --label: 150px; }
@media (min-width: 1024px) { .story { --label: 180px; } }
.story__list { position: relative; display: grid; gap: 28px; }
.story__list::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--scg-red), var(--scg-gold)); border-radius: 2px; }
.story__fill { display: none; }
.story__item { position: relative; padding-left: 44px; display: grid; gap: 8px; max-width: none; }
.story__item::before { content: ""; position: absolute; left: 4px; top: 6px; width: var(--dot); height: var(--dot); border-radius: 50%; box-sizing: border-box; background: var(--scg-red); border: 4px solid var(--scg-red); z-index: 1; }
.story__item--now::before { border-color: var(--scg-gold); background: var(--scg-gold); }
.story__when { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: var(--step-2); line-height: 1.1; color: var(--scg-red); }   /* 6.58:1 on paper-2 */
.story__card { display: grid; gap: 16px; align-content: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.story__card p { color: var(--ink-2); margin-bottom: 0; }
.story__text, .story__text p { max-width: 56ch; }
.story__photo { display: block; order: -1; max-width: none; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; max-height: 180px; }
.story__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story__title { font-size: var(--step-1); line-height: 1.15; margin: 0 0 .4em; }
/* Today stats: one even row of three; numbers shrink on narrow screens, labels may wrap. */
.story__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 14px !important; }
.story__facts li { display: flex; flex-direction: column; gap: 2px; color: var(--ink-2); font-size: .875rem; line-height: 1.3; max-width: none; }
.story__facts strong { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); line-height: 1.1; color: var(--ink); }
@media (min-width: 768px) {
  .story__list { gap: 32px; grid-auto-rows: 1fr; }
  .story__list::before { left: calc(var(--label) + 21px); }
  .story__item { grid-template-columns: var(--label) minmax(0, 1fr); gap: 0 48px; padding-left: 0; align-items: stretch; }
  /* Title baseline = card border + padding + title baseline offset; the label is padded so its
     baseline matches (Montserrat baseline ≈ (line-height / 2 + 0.36) × font size). */
  .story__when { text-align: right; padding-top: calc(1px + var(--card-pad) + 0.9335 * var(--step-1) - 0.9085 * var(--step-2)); }
  .story__item::before { left: calc(var(--label) + 14px); top: calc(1px + var(--card-pad) + 0.575 * var(--step-1) - var(--dot) / 2); }
  .story__card { grid-template-columns: minmax(0, 1fr) 32%; align-items: start; gap: clamp(24px, 3vw, 40px); padding: var(--card-pad); }
  .story__photo { grid-column: 2; grid-row: 1; order: 0; aspect-ratio: 4 / 3; max-height: none; }
  .story__card .story__text { grid-column: 1; grid-row: 1; }
  /* Title stays at the top; the body (paragraph, or stats + paragraph + link) is centred in
     the remaining height so the spare space splits evenly above and below it. */
  .story__card { align-items: stretch; align-content: stretch; grid-template-rows: 1fr; }
  .story__photo { align-self: start; }
  .story__text { display: flex; flex-direction: column; }
  .story__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .story__body > .story__facts { margin-top: 0 !important; }
}
/* Progress state (JS, motion allowed): grey track, red-to-gold fill, hollow dots until reached. */
.story__list.is-progress::before { background: var(--line); }
.story__list.is-progress .story__fill { display: block; position: absolute; left: 11px; top: 8px; width: 2px; height: var(--story-progress, 0px); background: linear-gradient(var(--scg-red), var(--scg-gold)); border-radius: 2px; transition: height .6s ease; }
@media (min-width: 768px) { .story__list.is-progress .story__fill { left: calc(var(--label) + 21px); } }
.story__list.is-progress .story__item:not(.is-reached)::before { background: var(--paper); }
.story__list.is-progress .story__item::before { transition: background-color .3s ease; }

/* ---- About: pillars (three identical cards, everything visible) ----
   Each card is a subgrid spanning 5 rows (photo, number, title, tagline, description), so
   these line up across the cards in a row. 3 per row from 1024px; 2 from 640px with a lone
   third card centred at the same width (4 half-tracks); 1 below. Not interactive. */
.pillars { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gutter); row-gap: var(--gutter); }
@media (min-width: 640px) and (max-width: 1023px) {
  .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pillar { grid-column: span 2; }
  .pillar:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar {
  display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; max-width: none;
  background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--scg-red); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } }
.pillar__photo { display: block; }
.pillar__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.pillar > :not(.pillar__photo) { padding-inline: clamp(20px, 3vw, 28px); }
.pillar__num { display: block; padding-top: 22px; font-family: var(--font-head); font-weight: 800; font-size: var(--step-3); line-height: 1; color: var(--scg-red); }   /* 7.24:1 */
.pillar__name { font-size: var(--step-1); margin: 14px 0 0; }
/* Subheading: from 1024px sized from the card width (3 columns in the 1200px container:
   (min(100vw, 1248px) - 96px) / 3, minus 2 x 28px padding) so the longest one fits on one line
   (about 12.9px at 1280+), never below 12px; until it fits (1024 to ~1130px) it wraps in
   balance. Below 1024px: 14px, balanced, with a two-line minimum so descriptions line up.
   (No container query here: container-type would switch off the cards' subgrid.) */
.pillar__summary { margin: 8px 0 0; color: var(--ink); line-height: 1.4; font-weight: 700; font-family: var(--font-head); letter-spacing: -0.01em; text-wrap: balance; font-size: .875rem; min-height: 2.8em; }
@media (min-width: 1024px) {
  .pillar__summary { min-height: 0; font-size: max(0.75rem, min(1rem, calc(((min(100vw, 1248px) - 96px) / 3 - 56px) / 25.5))); }
}
.pillar__name { text-wrap: balance; }
.pillar__text { margin: 10px 0 0; padding-bottom: clamp(20px, 3vw, 28px); color: var(--ink-2); }   /* 10.9:1 */

/* ---- Stepper (How a project works, recruiting calendar) ---- */
/* No JS: a numbered list with all details. With JS (.is-tabs): rail of step buttons + one panel. */
.stepper__rail { display: none; }
.stepper__panels { display: grid; gap: 14px; counter-reset: none; }
.stepper__panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3.5vw, 32px);
}
.stepper__count { margin: 0 0 6px; font-family: var(--font-head); font-weight: 700; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--scg-red); }
.stepper__title { font-size: var(--step-2); margin-bottom: .4em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.stepper__text { color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; margin-bottom: 0; }
.stepper__date { font-weight: 700; margin: 0 0 8px; }
.stepper__example { margin: 14px 0 0; }
.stepper.is-tabs .stepper__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; position: relative; margin-bottom: 18px;
  overflow-x: auto; scrollbar-width: none; padding: 4px 2px;
}
.stepper.is-tabs .stepper__rail::-webkit-scrollbar { display: none; }
.stepper.is-tabs .stepper__rail::before { content: ""; position: absolute; left: 8%; right: 8%; top: 27px; height: 2px; background: var(--line); }
.stepper__tab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; min-height: 44px; padding: 6px 4px 10px;
  background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-2); text-align: center;
}
.stepper__num {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-2);
  font-family: var(--font-head); font-weight: 700; color: var(--ink); transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.stepper__name { font-family: var(--font-head); font-weight: 600; font-size: .8125rem; line-height: 1.25; }
@media (min-width: 640px) { .stepper__name { font-size: .9375rem; } }
/* Narrow screens: numbered buttons only (names stay in the accessible name; the open
   step's title is in its panel), so five steps fit without overlapping. */
@media (max-width: 559px) {
  .stepper__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stepper.is-tabs .stepper__rail::before { top: 26px; }
}
.stepper__tab:hover .stepper__num { border-color: var(--scg-red); }
.stepper__tab[aria-selected="true"] { color: var(--ink); }
.stepper__tab[aria-selected="true"] .stepper__num { background: var(--scg-red); border-color: var(--scg-red); color: var(--paper); }   /* 7.24:1 */
.stepper__tab[aria-selected="true"] .stepper__name { font-weight: 700; }
.stepper__tab.is-done .stepper__num { background: var(--paper-2); }
.stepper__flag { position: absolute; top: -2px; right: calc(50% - 38px); padding: 0 .5em; border-radius: 999px; background: var(--scg-gold); color: var(--ink); font-size: .6875rem; font-weight: 700; line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) { .stepper__tab[aria-selected="true"] .stepper__num { transform: scale(1.06); } }
.stepper.is-tabs .stepper__panels { display: block; }
/* Stacked panels (opts.stack, /join/ recruiting): every panel sits in the same grid cell, so the
   cell (and the visible panel, stretched to it) has the tallest step's height at every width and
   nothing below moves when the step changes. Hidden panels keep their [hidden] attribute (out of
   the accessibility tree and tab order via visibility) but still take part in layout. */
.stepper--stack.is-tabs .stepper__panels { display: grid; }
.stepper--stack.is-tabs .stepper__panel { grid-area: 1 / 1; }
.stepper--stack.is-tabs .stepper__panel[hidden] { display: block !important; visibility: hidden; }
.stepper.is-tabs .stepper__panel { box-shadow: var(--shadow); }
@media (prefers-reduced-motion: no-preference) { .stepper.is-tabs .stepper__panel:not([hidden]) { animation: fade-in .3s ease-out; } }
.stepper__controls { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.stepper__controls .icon-btn:disabled { opacity: .45; cursor: default; }
/* Visual variant (About "How a project works"): one shared card holding the panels (they
   crossfade in a single grid cell), a photo or graphic per step, Prev/Next in the card footer,
   and a progress rail (red fill to the current step, ✓ on done steps). */
.stepper--visual { --steps: 5; }
.stepper--visual .stepper__panel { display: grid; gap: 16px; }
.stepper__body { min-width: 0; max-width: 60ch; }
/* Visual: phones on top at 16:9 (max 170px); from 768px a 30% column at 3:2 (max 220px),
   vertically centred with the text, so the text sets the card height. */
.stepper__visual { display: block; order: -1; min-width: 0; max-width: 100%; line-height: 0; aspect-ratio: 16 / 9; max-height: 170px; width: 100%; border-radius: 10px; overflow: hidden; }
.stepper__visual source { display: none; }
.stepper__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stepper__visual--graphic { display: grid; place-items: center; color: var(--scg-gold); background: linear-gradient(135deg, #26080A 0%, #3D1418 100%); }
.stepper__visual--graphic svg { width: 56px; height: 56px; }
@media (min-width: 768px) {
  .stepper--visual .stepper__panel { grid-template-columns: minmax(0, 1fr) 30%; align-items: center; gap: clamp(24px, 3vw, 40px); }
  .stepper--visual .stepper__body { grid-column: 1; grid-row: 1; }
  .stepper__visual { grid-column: 2; grid-row: 1; aspect-ratio: 3 / 2; max-height: 220px; align-self: center; }
}
.stepper.stepper--visual.is-tabs .stepper__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
@media (min-width: 768px) { .stepper.stepper--visual.is-tabs .stepper__card { padding: 28px 32px; } }
.stepper.stepper--visual.is-tabs .stepper__panels { display: grid; }
.stepper.stepper--visual.is-tabs .stepper__panel { grid-area: 1 / 1; background: none; border: 0; padding: 0; box-shadow: none; visibility: hidden; opacity: 0; animation: none; }
.stepper.stepper--visual.is-tabs .stepper__panel.is-active { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .stepper.stepper--visual.is-tabs .stepper__panel { transition: opacity .3s ease, visibility 0s linear .3s; }
  .stepper.stepper--visual.is-tabs .stepper__panel.is-active { transition: opacity .3s ease, visibility 0s; }
}
/* Arrows: two floating circles centred under the card (outside it), no bar or divider. */
.stepper--visual .stepper__controls { justify-content: center; gap: 12px; margin-top: 20px; padding: 0; border: 0; }
.stepper--visual .stepper__controls .icon-btn { width: 44px; height: 44px; background: var(--paper); border: 1px solid var(--ink-2); box-shadow: 0 2px 8px rgb(20 20 20 / .12); color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.stepper--visual .stepper__controls .icon-btn:focus-visible { outline: 2px solid var(--scg-red); outline-offset: 3px; }
.stepper--visual .stepper__controls .icon-btn[aria-disabled="true"] { opacity: .4; cursor: default; box-shadow: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stepper--visual .stepper__controls .icon-btn:not([aria-disabled="true"]):hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 14px rgb(20 20 20 / .16); color: var(--scg-red); border-color: var(--scg-red); }
}
/* Progress rail: grey line between the first and last step centres, red fill to the current one. */
.stepper.stepper--visual.is-tabs .stepper__rail::before { left: calc(50% / var(--steps)); right: calc(50% / var(--steps)); }
.stepper__fill { display: none; }
.stepper.stepper--visual.is-tabs .stepper__fill {
  display: block; position: absolute; z-index: 0; top: 27px; height: 2px; left: calc(50% / var(--steps));
  width: calc((100% - 100% / var(--steps)) * var(--step-progress, 0)); background: var(--scg-red);
}
@media (prefers-reduced-motion: no-preference) { .stepper.stepper--visual.is-tabs .stepper__fill { transition: width .3s ease; } }
@media (max-width: 559px) { .stepper.stepper--visual.is-tabs .stepper__fill { top: 26px; } }
.stepper--visual .stepper__tab { z-index: 1; }
.stepper--visual .stepper__tab.is-done .stepper__num { background: var(--scg-red); border-color: var(--scg-red); color: var(--paper); }   /* 7.24:1 */
.stepper--visual .stepper__tab.is-done { color: var(--ink); }
/* Phones: the rail shows numbers only; the current step's name is shown under it. */
.stepper__current { display: none; }
@media (max-width: 559px) {
  .stepper.stepper--visual.is-tabs .stepper__current { display: block; margin: -6px 0 14px; text-align: center; font-family: var(--font-head); font-weight: 700; color: var(--ink); }
}

/* Dark variant (recruiting calendar on --ink). */
.stepper--dark .stepper__panel { background: #1E1E1E; border-color: var(--line-ink); color: var(--on-ink); }
.stepper--dark .stepper__text { color: var(--on-ink-2); }                       /* 11.6:1 on #1E1E1E ≥ 10.9:1 */
.stepper--dark .stepper__count { color: var(--scg-gold); }
/* Links in step text on the dark panel: gold (8.6:1 on #1E1E1E), underlined; the section's
   --focus is already gold, so the focus ring shows on the dark panel. */
.stepper--dark .stepper__text a { color: var(--scg-gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.stepper--dark .stepper__text a:hover { color: var(--on-ink); }
.stepper--dark.is-tabs .stepper__rail::before { background: var(--line-ink); }
.stepper--dark .stepper__tab { color: var(--on-ink-2); }
.stepper--dark .stepper__tab[aria-selected="true"] { color: var(--on-ink); }
.stepper--dark .stepper__num { background: var(--ink); border-color: #8C877F; color: var(--on-ink); }
.stepper--dark .stepper__tab:hover .stepper__num { border-color: var(--scg-gold); }
.stepper--dark .stepper__tab[aria-selected="true"] .stepper__num { background: var(--scg-gold); border-color: var(--scg-gold); color: var(--ink); }   /* 9.3:1 */
.stepper--dark .stepper__tab.is-done .stepper__num { background: #2A2A2A; }
.stepper--dark .pill--optional { background: transparent; color: var(--on-ink); border-color: var(--on-ink-2); }
.stepper--dark .icon-btn { background: transparent; border-color: var(--line-ink); color: var(--on-ink); }
.stepper--dark .icon-btn:hover { border-color: var(--scg-gold); color: var(--scg-gold); }

/* ---- About: partnership band (dark) ---- */
.partners-band__grid { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .partners-band__grid { grid-template-columns: 1fr 1fr; } }
.partners-band__item { padding-top: 24px; border-top: 1px solid var(--line-ink); }
.partners-band__item p { color: var(--on-ink-2); }
.partners-band__logo { display: flex; align-items: center; height: 72px; margin-bottom: 18px; }
.partners-band__logo picture { display: contents; }
.partners-band__logo img { height: 56px; width: auto; }
/* Full-colour logos on dark backgrounds sit on a white plate (never recoloured). */
.partners-band__logo--plate { width: max-content; max-width: 100%; height: auto; padding: 10px 14px; background: #FFFFFF; border-radius: 10px; }
.partners-band__logo--plate img { height: 52px; }
.partners-band__role { font-family: var(--font-head); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--scg-gold) !important; margin-bottom: .6em; }
.partners-band__more { margin: clamp(28px, 4vw, 40px) 0 0; }

/* ---- About: photo mosaic + lightbox ---- */
/* Gallery: justified rows. Without JS a flex-wrap fallback (flex-grow = aspect ratio, 200px
   rows, a filler keeps the last row from stretching). With JS (lightbox.js) each item gets an
   exact width and its row's height, so every row fills the width exactly. */
.gallery { display: flex; flex-wrap: wrap; gap: var(--gap, 8px); }
.gallery::after { content: ""; flex: 999 1 0; }
.gallery__item { flex: var(--ar) 1 calc(var(--ar) * 200px); height: 200px; min-width: 0; max-width: none; }
.gallery.is-justified::after { display: none; }
.gallery__link { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--ph-bg); cursor: zoom-in; }
.gallery__link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .gallery__link:hover img { transform: scale(1.03); } }
.gallery__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lightbox { padding: 0; border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: rgb(12 12 12 / .96); color: var(--on-ink); --focus: var(--scg-gold); }
.lightbox::backdrop { background: rgb(12 12 12 / .7); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; }
.lightbox__count { font-size: .875rem; color: var(--on-ink-2); padding-left: 6px; }
.lightbox__btn { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .35); color: #FFFFFF; }
.lightbox__btn:hover { border-color: var(--scg-gold); color: var(--scg-gold); }
.lightbox__figure { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 12px; padding: 0 12px 20px; min-height: 0; }
.lightbox__img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; align-self: center; }
.lightbox__caption { text-align: center; color: var(--on-ink); font-size: var(--step-0); max-width: 60ch; }   /* 18.4:1 */
.lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
@media (max-width: 639px) { .lightbox__nav { top: auto; bottom: 14px; transform: none; } .lightbox__figure { padding-bottom: 76px; } }
@media (prefers-reduced-motion: no-preference) { .lightbox[open] { animation: fade-in .2s ease-out; } }

/* ---- Member statistics: the Home stat strip as a wrapping grid ---- */
.stat-strip--grid { background: transparent; padding: 0; }
.stat-strip--grid .stat-strip__list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 640px) { .stat-strip--grid .stat-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stat-strip--grid .stat-strip__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.stat-strip--grid .stat-strip__item { padding: 22px 12px; border-left: 0; border-top: 1px solid var(--line); }
.stat-strip--grid .stat-strip__item + .stat-strip__item { border-left: 0; }
.stat-strip--grid .stat-strip__item:nth-child(-n+2) { border-top: 0; }
.stat-strip--grid .stat-strip__item:nth-child(2n) { border-left: 1px solid var(--line); }
@media (min-width: 640px) {
  .stat-strip--grid .stat-strip__item:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .stat-strip--grid .stat-strip__item:nth-child(-n+3) { border-top: 0; }
  .stat-strip--grid .stat-strip__item:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
}
@media (min-width: 1100px) {
  .stat-strip--grid .stat-strip__item:nth-child(n) { border-top: 0; border-left: 1px solid var(--line); }
  .stat-strip--grid .stat-strip__item:first-child { border-left: 0; }
}
.stat-strip--grid abbr { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

/* ---- Join: recruiting status card ---- */
.status-card { background: var(--ink); color: var(--on-ink); border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); box-shadow: var(--shadow-lift); --focus: var(--scg-gold); }
.status-card__label { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: var(--font-head); font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--scg-gold); }   /* 9.3:1 */
.status-card__text { font-family: var(--font-head); font-weight: 700; font-size: var(--step-2); line-height: 1.2; margin: 0 0 8px; }
.status-card__note { color: var(--on-ink-2); font-size: var(--step--1); margin: 0 0 6px; }
.status-card__btn { margin: 14px 0 12px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--on-ink-2); flex: none; }
.status-dot--live { background: #4ADE80; box-shadow: 0 0 0 0 rgb(74 222 128 / .6); }
@media (prefers-reduced-motion: no-preference) { .status-dot--live { animation: pulse 2s infinite; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgb(74 222 128 / 0); } 100% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0); } }

/* ---- Join: Find your seat (four tiles + one panel) ----
   One accent (SCG red) for icons and the selected tile. Without JS (.seat not .is-enhanced)
   the four panels are stacked sections. With JS the panels share one grid cell, so the
   section keeps the height of the tallest panel and never jumps when switching tracks. */
.seat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
@media (min-width: 768px) { .seat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.seat-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 96px; padding: 16px;
  text-align: left; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .2s, transform .2s;
}
@media (min-width: 768px) { .seat-tile { padding: 20px 20px 24px; min-height: 0; } }
.seat-tile:hover { border-color: var(--ink-2); }
.seat-tile[aria-selected="true"] { border-color: var(--scg-red); box-shadow: inset 0 3px 0 var(--scg-red), var(--shadow); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) { .seat-tile[aria-selected="true"] { transform: translateY(-2px); } }
/* Notch pointing down to the panel (768px+, where the tiles sit in one row above it). */
@media (min-width: 768px) {
  .seat-tile[aria-selected="true"]::after {
    content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; margin-left: -8px;
    background: var(--paper); border-right: 1px solid var(--scg-red); border-bottom: 1px solid var(--scg-red); transform: rotate(45deg);
  }
}
.seat-tile__icon { color: var(--scg-red); line-height: 0; }
.seat-tile__name { font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.25; }
@media (min-width: 1024px) { .seat-tile__name { font-size: 1.125rem; } }
.seat-tile__short { display: none; }
@media (min-width: 768px) { .seat-tile__short { display: block; color: var(--ink-2); font-size: .875rem; line-height: 1.45; } }

.seat-panels.is-ready { display: grid; }
.seat-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3.5vw, 32px); }
.seat:not(.is-enhanced) .seat-panel + .seat-panel { margin-top: 20px; }
.seat.is-enhanced .seat-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; box-shadow: var(--shadow); }
.seat.is-enhanced .seat-panel.is-active { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .seat.is-enhanced .seat-panel { transition: opacity .2s ease, visibility 0s linear .2s; }
  .seat.is-enhanced .seat-panel.is-active { transition: opacity .2s ease, visibility 0s; }
}
.seat-panel__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.seat-panel__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--paper-2); color: var(--scg-red); }
.seat.is-enhanced .seat-panel__icon { display: none; }
/* With the tabs active the selected tile already shows the track's name and description: the
   name stays in the outline as a visually hidden h3 (parent of the h4 labels), the description
   is not repeated. The no-JS stacked view keeps both visible. */
.seat.is-enhanced .seat-panel__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.seat.is-enhanced .seat-panel__short { display: none; }
.seat.is-enhanced .seat-panel { position: relative; }
.seat-panel__name { font-size: var(--step-2); margin-bottom: .15em; }
.seat-panel__short { margin: 0; color: var(--ink-2); font-size: var(--step-1); line-height: 1.45; }
.seat-panel__cols { display: grid; gap: 20px 40px; }
@media (min-width: 900px) { .seat-panel__cols { grid-template-columns: 1fr 1fr; } }
.seat-panel__label { margin: 0 0 10px; font-family: var(--font-head); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.seat-panel__do { gap: 8px; color: var(--ink-2); }
.seat-panel__fits { gap: 6px; }                                         /* gold pills, as on the project drawers */
.seat-panel__fits .chip { font-size: .8125rem; }
.seat-skill { padding: .3em .85em; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); font-size: .875rem; font-weight: 700; color: var(--ink); max-width: none; }
.seat-panel__cols + .seat-panel__label { margin-top: 26px; }
/* Below 1024px: the cards sit in a swipeable row (scroll-snap, inside the panel only, so the page
   never scrolls sideways). Every panel is then about the same height whether its track has
   two or three projects, so the shared-cell layout leaves no empty space. */
.seat-panel__cards { display: grid; gap: 14px; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; overscroll-behavior-x: contain; }
.seat-panel__cards > * { scroll-snap-align: start; }
.seat:not(.is-enhanced) .seat-panel__cards { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
@media (min-width: 640px) { .seat:not(.is-enhanced) .seat-panel__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
/* 1024px+: the three cards fit in one row (same as /projects/). */
@media (min-width: 1024px) { .seat-panel__cards, .seat:not(.is-enhanced) .seat-panel__cards { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 20px; padding-bottom: 0; } }
.seat-panel__more { margin: 14px 0 0; }

/* ---- Join: What you get (five identical photo cards) ----
   Flex-wrap with a fixed card basis, so a short last row is centred at the same card width
   (3 + 2 from 1024px, 2 + 2 + 1 from 640px, 1 column below). Cards in a row stretch to equal
   height; every card has the same structure, so titles and descriptions start at the same y. */
.benefits { --gap: clamp(20px, 2.4vw, 30px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.benefit {
  flex: 0 0 100%; max-width: none; display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (min-width: 640px) { .benefit { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (min-width: 1024px) { .benefit { flex-basis: calc((100% - 2 * var(--gap)) / 3); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } }
.benefit__media { display: block; aspect-ratio: 16 / 10; background: var(--ph-bg); }
.benefit__media img { width: 100%; height: 100%; object-fit: cover; }
.benefit__body { position: relative; flex: 1; padding: 36px 28px 28px; }
/* Red rounded-square icon overlapping the photo's bottom-left edge. */
.benefit__icon {
  position: absolute; left: 28px; top: -20px; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--scg-red); box-shadow: 0 0 0 4px var(--paper);
}
.benefit__icon svg { width: 22px; height: 22px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.benefit__title { font-size: var(--step-1); margin-bottom: .4em; }
/* 1024-1279px: three narrow columns, where some titles wrap; reserve two lines so every
   description in a row starts at the same height. */
@media (min-width: 1024px) and (max-width: 1279px) { .benefit__title { min-height: 2.3em; } }
.benefit__text { margin: 0; color: var(--ink-2); }   /* 10.9:1 on white */

/* ---- Join: interview process + FAQ ---- */
.join-process { display: grid; gap: clamp(32px, 5vw, 64px); }
/* Two columns from 1024px: the intro stays in view below the header while the FAQ scrolls; it
   stops at the end of the grid. faq-search.js adds .is-static when the intro is taller than the
   space below the header, so it is never stuck with its end out of reach. */
@media (min-width: 1024px) { .join-process { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .join-process__intro { position: sticky; top: calc(var(--header-h) + 24px); } .join-process__intro.is-static { position: static; } }
.join-process__intro p { color: var(--ink-2); }
.join-process__h { font-size: var(--step-1); margin-top: 28px; }
.join-process__eligibility { padding: 14px 18px; border-left: 4px solid var(--scg-gold); background: var(--paper-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink) !important; }
/* FAQ heading: same eyebrow + size as the left column's heading, so both sit on one baseline. */
.faq__title { font-size: var(--step-3); letter-spacing: -0.01em; }
.faq__search { display: grid; gap: 6px; margin-bottom: 20px; }
.faq__search label { font-family: var(--font-head); font-size: .8125rem; font-weight: 700; }
/* Search field: pill with a magnifier inside, lighter than the question rows. --ph-border is
   3.6:1 on white (non-text contrast); the focus ring is the site's red outline. */
.faq__field { position: relative; }
.faq__field-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.faq__search input { min-height: 48px; width: 100%; padding: 0 18px 0 44px; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--ph-border); border-radius: 999px; }
.faq__search input::placeholder { color: var(--ink-2); opacity: .8; }
.faq__search input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--scg-red); border-radius: 999px; }
.faq__count { margin: 0; min-height: 1.4em; font-size: .875rem; font-weight: 700; color: var(--ink-2); }
/* Categories: label above its card (small gap), groups ~2x further apart than before (48px). */
.faq__group:not([hidden]) ~ .faq__group:not([hidden]) { margin-top: 48px; }
.faq__group-title { font-family: var(--font-head); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--scg-red); margin-bottom: 10px; }
.faq__empty { padding: 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-2); }

/* ---- Resources and downloads ---- */
.resource-grid { display: grid; gap: var(--gutter); }
@media (min-width: 640px) { .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.resource-card {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: clamp(18px, 3vw, 24px); background: var(--paper); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.resource-card:hover { border-color: var(--scg-red); color: var(--ink); box-shadow: var(--shadow); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .resource-card:hover { transform: translateY(-3px); } }
.resource-card__kind { font-family: var(--font-head); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--scg-red); }
.resource-card__title { font-family: var(--font-head); font-weight: 700; font-size: var(--step-1); line-height: 1.25; }
.resource-card__text { color: var(--ink-2); font-size: .9375rem; }
.resource-card__meta { margin-top: auto; padding-top: 10px; font-size: .875rem; font-weight: 700; color: var(--ink-2); }
.resource-card--download .resource-card__meta::before { content: "↓ "; color: var(--scg-red); }
a.resource-card[target="_blank"] .resource-card__title::after { content: " ↗"; color: var(--scg-red); }

/* ---- Sticky mobile CTA (Join) ---- */
.sticky-cta {
  position: sticky; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--on-ink); box-shadow: 0 -6px 18px rgb(0 0 0 / .18); --focus: var(--scg-gold);
}
.sticky-cta__text { font-family: var(--font-head); font-weight: 700; font-size: .875rem; }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* ---- Prepare: practice room ----
   From 900px: a grid where "Question n of 3" + Shuffle sit above the card (row 1) and the
   card and the timer share row 2 and stretch to the same height. .deck becomes
   display: contents so its bar and card list are grid items. Below 900px they stack. */
.practice__layout { display: grid; gap: var(--gutter); }
@media (min-width: 900px) {
  .practice__layout { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); grid-template-rows: auto 1fr; column-gap: var(--gutter); row-gap: 12px; align-items: stretch; }
  .deck.is-deck { display: contents; }
  .deck.is-deck .deck__bar { grid-column: 1; grid-row: 1; margin: 0; }
  .deck.is-deck .deck__cards { grid-column: 1; grid-row: 2; }
  .practice__layout .timer { grid-column: 2; grid-row: 2; }
}
.deck__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.deck__pos { margin: 0; font-weight: 700; color: var(--ink-2); }
.deck__cards { display: grid; gap: 16px; }
.qcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow); }
.deck.is-deck .qcard { display: flex; flex-direction: column; height: 100%; border-top: 4px solid var(--scg-red); }
@media (prefers-reduced-motion: no-preference) { .deck.is-deck .qcard:not([hidden]) { animation: card-in .35s ease-out; } }
@keyframes card-in { from { opacity: 0; transform: translateX(16px); } }
.qcard__num { margin: 0 0 8px; font-family: var(--font-head); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--scg-red); }
.qcard__q { font-size: var(--step-2); line-height: 1.3; }
.qcard__q:focus { outline: none; }
.qcard__hints { margin-top: 12px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--paper-2); border-left: 4px solid var(--scg-gold); }
.qcard__hints-title { font-size: .9375rem; margin-bottom: 10px; }
.qcard__hints .checklist { gap: 6px; font-size: .9375rem; color: var(--ink-2); }
/* Footer row: "Show answer structure" (and the Projects link on question 3) left, arrows right. */
.qcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: auto; padding-top: 20px; }
.qcard__actions .deck__nav { margin: 0 0 0 auto; }
.deck__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* Timer: dark panel, compact 136px dial with a thin (4px) gold ring that fills as time elapses. */
.timer { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ink); color: var(--on-ink); border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); text-align: center; --focus: var(--scg-gold); }
.timer__title { font-size: var(--step-1); margin-bottom: .2em; }
.timer__hint { color: var(--on-ink-2); font-size: var(--step--1); margin-bottom: 14px; }
.timer__dial {
  --progress: 0; position: relative; width: 136px; aspect-ratio: 1; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--scg-gold) calc(var(--progress) * 360deg), #3A3A3A 0);
}
.timer__dial::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink); }
.timer__time { position: relative; margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 2.125rem; font-variant-numeric: tabular-nums; }
.timer.is-done .timer__time { color: var(--scg-gold); }
.timer .btn--secondary { color: var(--on-ink); border-color: var(--on-ink); }
.timer .btn--secondary:hover { background: var(--on-ink); color: var(--ink); }
.star { display: grid; gap: var(--gutter); counter-reset: none; }
@media (min-width: 640px) { .star { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .star { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.star__item { padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--radius); }
.star__item p { margin: 0; color: var(--ink-2); }
.star__letter { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--scg-red); color: var(--paper); font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; margin-bottom: 14px; }
.star__item:nth-child(3) .star__letter { background: var(--ink); color: var(--scg-gold); }
.star__name { font-size: var(--step-1); }


/* ---- Prepare: case guide cards with cover + PDF viewer ---- */
/* Equal cards (grid rows equalize heights): 3 per row from 1024px, 2 from 640px, 1 below.
   A short last row is centred at the same card width: tablet uses 4 half-tracks (each card
   spans 2; a lone last card starts at track 2); desktop uses 6 (each card spans 2; a lone
   last card starts at track 3, a last pair at tracks 2 and 4). */
.doc-grid { display: grid; gap: var(--gutter); grid-template-columns: minmax(0, 1fr); }
.doc-grid > li { display: flex; }
.doc-grid > li > .doc-card { flex: 1; }
@media (min-width: 640px) and (max-width: 1023px) {
  .doc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .doc-grid > li { grid-column: span 2; }
  .doc-grid > li:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (min-width: 1024px) {
  .doc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .doc-grid > li { grid-column: span 2; }
  .doc-grid > li:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
  .doc-grid > li:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}
.doc-card { display: flex; flex-direction: column; height: 100%; max-width: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
/* Cover: the top of page 1 at 16:10, framed as a sheet of paper on the warm surface. */
.doc-card__cover { padding: 20px 20px 0; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.doc-card__cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #FFFFFF; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; box-shadow: 0 -1px 0 rgb(20 20 20 / .02), 0 6px 18px rgb(20 20 20 / .10); }
.doc-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: clamp(18px, 3vw, 24px); }
.doc-card__body .resource-card__kind, .doc-card__body .resource-card__title, .doc-card__body .resource-card__text { margin: 0; }
.doc-card__body .resource-card__meta { margin: 0; padding-top: 4px; }
.doc-card__body .resource-card__meta::before { content: none; }
.doc-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 14px; }

/* Resume guide: 16:9 Google Slides embed in a rounded, bordered frame. */
.embed-frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow); }
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-frame__link { margin: 14px 0 0; }
.embed-frame:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }   /* keyboard focus inside an embedded document (Google Slides) is otherwise invisible from the page */

/* Viewer dialog: right-hand sheet on desktop like the project dialog, full screen on phones. */
.pdf-viewer { padding: 0; border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--ink); }
.pdf-viewer::backdrop { background: rgb(20 20 20 / 0.62); }
.pdf-viewer__panel { display: flex; flex-direction: column; height: 100%; background: var(--paper); }
@media (min-width: 768px) { .pdf-viewer__panel { width: min(960px, 100%); margin-left: auto; box-shadow: -20px 0 60px rgb(0 0 0 / 0.3); } }
@media (prefers-reduced-motion: no-preference) {
  .pdf-viewer[open] .pdf-viewer__panel { animation: sheet-in .28s cubic-bezier(.2, .8, .2, 1); }
  .pdf-viewer[open]::backdrop { animation: fade-in .28s ease-out; }
  @media (min-width: 768px) { .pdf-viewer[open] .pdf-viewer__panel { animation-name: drawer-in; } }
}
.pdf-viewer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--paper); }
.pdf-viewer__title { flex: 1 1 220px; margin: 0; padding-left: 4px; font-size: 1rem; line-height: 1.3; }
.pdf-viewer__title:focus { outline: none; }
.pdf-viewer__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pdf-viewer__group { display: flex; align-items: center; gap: 4px; }
.pdf-viewer__page, .pdf-viewer__zoom { min-width: 5.5em; text-align: center; font-size: .875rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pdf-viewer__zoom { min-width: 3.5em; }
.pdf-viewer .icon-btn:disabled { opacity: .4; cursor: default; }
.pdf-viewer__stage { position: relative; flex: 1; overflow: auto; overscroll-behavior: contain; padding: 16px; background: #E9E6E1; display: flex; justify-content: center; align-items: flex-start; }
@media (max-width: 767px) { .pdf-viewer__download { order: 9; } .pdf-viewer__group[aria-label="Zoom"] .pdf-viewer__zoom { display: none; } }
.pdf-viewer__loading, .pdf-viewer__error { margin: auto; text-align: center; color: var(--ink); font-weight: 700; }
.pdf-viewer__error p { margin: 0 0 12px; }
.pdf-viewer__page-wrap { position: relative; flex: none; background: #FFFFFF; box-shadow: 0 2px 10px rgb(0 0 0 / .18); }
.pdf-viewer__canvas { display: block; }

/* PDF.js text layer (from pdfjs-dist web/pdf_viewer.css, flattened): invisible text over the
   canvas so it can be selected and read by screen readers. */
.textLayer { position: absolute; inset: 0; overflow: clip; opacity: 1; line-height: 1; text-align: initial; letter-spacing: normal; word-spacing: normal; text-size-adjust: none; -webkit-text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 0;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; user-select: text; -webkit-user-select: text; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display: contents; }
.textLayer span[role="img"] { user-select: none; cursor: default; }
.textLayer ::selection { background: rgb(174 18 24 / .25); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }

/* People (/team/, /alumni/) ------------------------------------------------ */
.avatar { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--ph-bg); }
.avatar--initials {
  display: grid; place-items: center; background: #26080A; color: var(--scg-gold);   /* gold on maroon-black 9.5:1 */
  font-family: var(--font-head); font-weight: 800; letter-spacing: .04em; font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.people-filters { display: grid; gap: 12px; margin: 0 0 32px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 768px) { .people-filters { grid-template-columns: minmax(240px, 2fr) repeat(auto-fit, minmax(200px, 1fr)); } }
.people-filters[hidden] { display: none; }
.people-filters__field { display: grid; gap: 6px; }
.people-filters label { font-family: var(--font-head); font-size: .8125rem; font-weight: 700; color: var(--ink); }
.people-filters input, .people-filters select {
  min-height: 44px; width: 100%; padding: 0 12px; font: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink-2); border-radius: var(--radius-sm);
}
.people-filters__count { grid-column: 1 / -1; margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.people-empty { margin: 8px 0 0; }
.people-group + .people-group { margin-top: clamp(40px, 6vw, 64px); }
.people-group__title { font-size: var(--step-2); margin: 0 0 20px; padding-bottom: 10px; border-bottom: 2px solid var(--scg-red); }
.team-grid, .alumni-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 2vw, 24px); }
.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.team-card, .alumni-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.team-card { display: flex; flex-direction: column; }
.team-card__photo .avatar { border-radius: 0; }
.team-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: clamp(12px, 2vw, 18px); }
.team-card__name { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); margin: 0; overflow-wrap: anywhere; }
.team-card__title { margin: 0; font-size: var(--step--1); font-weight: 700; color: var(--scg-red); }
.team-card__cohort { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.team-card__majors, .team-card__exp { margin: 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.4; }
.team-card__exp { margin-top: 4px; }
.team-card__projects { margin-top: 8px; }
.team-card .person__linkedin { margin-top: auto; padding-top: 8px; }
/* Alumni cards: the Team card format; 1 / 2 / 3 / 4 columns (under 400 / 400 / 768 / 1024px). */
.alumni-grid { grid-template-columns: 1fr; }
@media (min-width: 400px) { .alumni-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .alumni-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .alumni-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.alumni-card { position: relative; display: flex; flex-direction: column; }
.alumni-card__photo .avatar { border-radius: 0; }
.alumni-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: clamp(12px, 2vw, 18px); }
.alumni-card__name { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); margin: 0; overflow-wrap: anywhere; }
.alumni-card__year { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.alumni-card__majors { margin: 4px 0 0; font-family: var(--font-head); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.45; color: var(--scg-red); }   /* 7.2:1 */
.alumni-card__role { margin: 2px 0 0; font-size: var(--step--1); font-weight: 700; line-height: 1.4; }
.alumni-card__excerpt { margin: 6px 0 0; font-size: var(--step--1); line-height: 1.5; color: var(--ink-2); }
.alumni-card__excerpt--clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.alumni-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.alumni-card__more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 700; color: var(--scg-red); text-decoration: none; }
.alumni-card__more:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Stretched link: "Read bio" covers the card; the LinkedIn icon sits above it as its own stop. */
.alumni-card__more::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.alumni-card--link { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.alumni-card--link:hover { box-shadow: var(--shadow-lift); border-color: #CFC6B8; }
@media (prefers-reduced-motion: no-preference) { .alumni-card--link:hover { transform: translateY(-3px); } }
.alumni-card--link:has(.alumni-card__more:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.alumni-card__more:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 3px; }
.alumni-card__linkedin { position: relative; z-index: 2; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; color: #0A66C2; border-radius: var(--radius-sm); }   /* 5.7:1 */
.alumni-card__linkedin:hover { background: var(--paper-2); }

/* Alumni bio: drawer (560px, full-screen sheet on phones) and /alumni/<id>/. */
@media (min-width: 768px) { .alum-dialog .project-dialog__panel { width: min(560px, 100%); } }
.alum-detail { display: grid; gap: 20px; padding: clamp(20px, 3vw, 32px); }
.alum-detail__photo { width: min(100%, 300px); }
.alum-detail__photo img, .alum-detail__photo .avatar { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--ph-bg); }
.alum-detail__photo .avatar--initials { font-size: 4rem; }
.alum-detail__name { font-size: var(--step-2); line-height: 1.15; margin: 0; }
.alum-page .alum-detail__name { font-size: var(--step-3); line-height: 1.1; }
.alum-detail__name:focus, .alum-detail__name:focus-visible { outline: none; }
.alum-detail__class { margin: 8px 0 0; color: var(--ink-2); }
.alum-detail__majors { margin: 10px 0 0; font-family: var(--font-head); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; color: var(--scg-red); }
.alum-detail__role { margin: 6px 0 0; font-weight: 700; }
.alum-detail__links { margin: 16px 0 0; }
.alum-detail__linkedin { gap: 8px; }
.alum-detail__linkedin svg { color: #0A66C2; }
.alum-detail__linkedin:hover svg { color: currentColor; }
.alum-detail__bio { display: grid; gap: 1em; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.alum-detail__bio p { margin: 0; max-width: 65ch; line-height: 1.65; }
@media (min-width: 768px) {
  .alum-page .alum-detail { grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
  .alum-page .alum-detail__photo { width: 100%; }
}
.person__linkedin { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--step--1); font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.person__linkedin svg { color: #0A66C2; flex: none; }

/* Work With Us: Services --------------------------------------------------- */
.icon-chip { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #FBE9EA; color: var(--scg-red); }   /* red on the red tint 6.2:1 */
.icon-chip--lg { width: 48px; height: 48px; border-radius: 14px; }
.fee-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 2vw, 24px); grid-template-columns: 1fr; grid-auto-rows: 1fr; }   /* equal heights, also when stacked */
@media (min-width: 768px) { .fee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Cost cards: photo cards in the pillar style (white, 1px border, red top accent, soft shadow).
   Photo 16:9 below 1024px; from 1024px a 220px band cut around the focal point (the cards are
   ~590px wide there, so a full 16:9 photo would be ~330px tall). Not links: no focus stops. */
.fee-card { display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--scg-red); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .fee-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } }
.fee-card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 1024px) { .fee-card__photo img { aspect-ratio: auto; height: 220px; } }
.fee-card__body { flex: 1; padding: clamp(22px, 2.6vw, 28px); }
.fee-card__title { font-family: var(--font-head); font-weight: 700; font-size: var(--step-1); margin: 0 0 8px; }
.fee-card__text { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }   /* 17px, 10.9:1 */
/* "What we can help with": pillar-style cards (white, 1px border, 4px red top, radius, soft
   shadow) on a subgrid so the title, description and footer rows align across each row. */
.help-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 30px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .help-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.help-card {
  --pad: clamp(24px, 2.6vw, 30px);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
  background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--scg-red); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.help-card:hover { border-color: var(--scg-red); box-shadow: var(--shadow-lift); }
@media (prefers-reduced-motion: no-preference) { .help-card:hover { transform: translateY(-4px); } }
.help-card:has(.help-card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
/* Phones: icon beside the title; from 768px the icon sits above it. */
.help-card__head { display: flex; align-items: center; gap: 14px; padding: var(--pad) var(--pad) 0; }
@media (min-width: 768px) { .help-card__head { flex-direction: column; align-items: flex-start; gap: 16px; } }
.help-card__title { min-width: 0; margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.1875rem; line-height: 1.25; text-wrap: balance; }   /* 19px on phones */
@media (min-width: 768px) { .help-card__title { font-size: 1.3125rem; } .help-card__word { white-space: nowrap; } }   /* 21px; hyphenated words never split */
.help-card__text { margin: 0; padding: 10px var(--pad) 22px; font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--ink-2); }   /* 16px, 10.9:1 */
.help-card__foot { align-self: end; padding: 14px var(--pad) 16px; border-top: 1px solid var(--line); }
.help-card__link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-family: var(--font-head); font-weight: 700; font-size: .9375rem; color: var(--scg-red); text-decoration: none; }   /* 7.2:1 */
.help-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.help-card__link:focus-visible { outline: none; }
.help-card__arrow { display: inline-block; transition: transform .2s ease; }
@media (prefers-reduced-motion: no-preference) { .help-card:hover .help-card__arrow, .help-card:has(.help-card__link:focus-visible) .help-card__arrow { transform: translateX(3px); } }
/* Closing row: divider, the sentence on the left, "Request a project" on the right. */
.help-close { display: flex; flex-direction: column; align-items: stretch; gap: 18px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.help-close__text { margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--ink); }   /* 18px */
.help-close__btn { justify-content: center; }
@media (min-width: 768px) { .help-close { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } .help-close__btn { flex: none; } }

/* "How an engagement works": photo left (42%, sticky, top aligned with the eyebrow), numbered
   vertical timeline right. Circles 40px; the 2px line runs between circle centres: red for
   steps 1-4, red fading to gold into the outcome circle. Phones: photo on top (16:10). */
.engage { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 768px) { .engage { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: stretch; } .engage--no-photo { grid-template-columns: 1fr; } }
/* Desktop: two equal frames filling the text column's height, 16px apart; each photo covers its
   frame around its focal point (img style --focal). */
.engage__photos { display: flex; flex-direction: column; gap: 16px; }
.engage__frame { position: relative; flex: 1 1 0; min-height: 220px; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (min-width: 768px) { .engage__frame { container-type: size; } }   /* face-safe crops by frame shape (inline <style>) */
.engage__frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); }
/* Phones: one column; photo 1 on top, photo 2 between "Beyond the semester" and the link. */
@media (max-width: 767px) {
  .engage { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .engage__photos, .engage__text { display: contents; }
  .engage__frame { flex: none; min-height: 0; aspect-ratio: 16 / 10; }   /* space reserved before the lazy image loads */
  .engage__frame img { object-position: 50% 50%; }
  .engage__frame--1 { order: 0; margin-bottom: 28px; }
  .engage__text > .section__head { order: 1; }
  .engage-steps { order: 2; }
  .engage-step--outcome { order: 3; }
  .engage__frame--2 { order: 4; margin: 4px 0 24px; }
  .engage__cta { order: 5; }
}
.engage__badge { position: absolute; left: 14px; bottom: 14px; padding: 6px 14px; border-radius: 999px; background: rgb(38 8 10 / .85); color: #FFFFFF; font-family: var(--font-head); font-weight: 700; font-size: .875rem; line-height: 1.3; }   /* white on maroon-black ≥ 13:1 */
.engage__text .section__head { margin-bottom: 8px; }
.engage-steps { list-style: none; margin: 0; padding: 0; }
.engage-step { --dot: 40px; --dot-top: 18px; position: relative; display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: 20px; }
/* Connector from this circle's centre to the next one's (the next item has the same top offset). */
.engage-steps .engage-step::before {
  content: ""; position: absolute; z-index: 0; left: calc(var(--dot) / 2 - 1px); width: 2px;
  top: calc(var(--dot-top) + var(--dot) / 2); bottom: calc(-1 * (var(--dot-top) + var(--dot) / 2)); background: var(--scg-red);
}
.engage-steps .engage-step:last-child::before { background: linear-gradient(var(--scg-red), var(--scg-gold)); }
.engage-step__marker {
  position: relative; z-index: 1; display: grid; place-items: center; width: var(--dot); height: var(--dot); margin-top: var(--dot-top);
  border-radius: 50%; background: var(--scg-red); color: #FFFFFF; font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem;   /* white on red 7.2:1 */
}
.engage-step__marker--outcome { background: var(--paper); border: 2px solid var(--scg-gold); color: var(--scg-red); }
.engage-step__body { padding-block: 24px; border-bottom: 1px solid var(--line); }
.engage-step--outcome .engage-step__body { border-bottom: 0; }
.engage-step__title { margin: 0 0 6px; font-family: var(--font-head); font-weight: 700; font-size: 1.375rem; line-height: 1.25; }   /* 22px */
.engage-step__text { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--ink-2); }   /* 16px, 10.9:1 */
.engage__cta { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.engage__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--font-head); font-weight: 700; color: var(--scg-red); text-decoration: none; }
.engage__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.engage__arrow { display: inline-block; transition: transform .2s ease; }
@media (prefers-reduced-motion: no-preference) {
  .engage__link:hover .engage__arrow, .engage__link:focus-visible .engage__arrow { transform: translateX(3px); }
  /* Scroll reveal (site.js adds .reveal-ready only when motion is allowed): fade and rise 12px in sequence. */
  .reveal-ready .engage-step[data-reveal] { transform: translateY(12px); transition-delay: calc(var(--i, 0) * 90ms); }
  .reveal-ready .engage-step[data-reveal].is-visible { transform: none; }
}

/* Client logos: equal tiles in a centred flex-wrap (the last row centres when it is not full),
   2/3/4/5 per row; caption under each tile; links lift 4px with a shadow and show "→". */
.client-grid { --cols: 2; --gap: 12px; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px var(--gap); }
@media (min-width: 480px) { .client-grid { --cols: 3; } }
@media (min-width: 768px) { .client-grid { --cols: 4; } }
@media (min-width: 1024px) { .client-grid { --cols: 5; } }
.client-item { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
.client-link, .client-static { display: grid; gap: 8px; color: var(--ink-2); text-decoration: none; border-radius: var(--radius-sm); }
.client-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 3; padding: clamp(8px, 1.4vw, 16px); overflow: hidden; background: var(--tile-bg, #FFFFFF); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); transition: box-shadow .2s ease, transform .2s ease; }
.client-tile--roomy { padding: clamp(14px, 2vw, 24px); }
.client-tile picture { display: contents; }
.client-tile img { display: block; width: 100%; height: 100%; max-height: 72px; object-fit: contain; }
.client-tile__name { font-family: var(--font-head); font-weight: 700; text-align: center; line-height: 1.25; font-size: .875rem; }
/* Caption: 13px, ink-2 (10.9:1 on paper-2), centred, always two lines tall so rows align. */
.client-caption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: calc(2 * 1.35em); font-size: .8125rem; line-height: 1.35; text-align: center; color: var(--ink-2); }
.client-caption__arrow { display: inline-block; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.client-link:hover .client-tile { box-shadow: var(--shadow); }
.client-link:hover .client-caption, .client-link:focus-visible .client-caption { color: var(--ink); }
.client-link:hover .client-caption__arrow, .client-link:focus-visible .client-caption__arrow { opacity: 1; }
.client-link:focus-visible { outline: 2px solid var(--scg-red); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .client-link:hover .client-tile { transform: translateY(-4px); }
  .client-link:hover .client-caption__arrow { transform: translateX(2px); }
}
/* "More past clients": a quieter secondary list. */
.client-more { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.client-more__title { font-size: var(--step-0); margin: 0 0 14px; }
.client-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.client-chips li[hidden] { display: none; }
.client-chip { display: inline-block; padding: .3em .85em; border-radius: 999px; background: #ECE6DC; color: var(--ink); font-size: .9375rem; line-height: 1.35; text-decoration: none; }   /* 15px; ink on #ECE6DC 15.4:1 */
a.client-chip:hover { text-decoration: underline; }
.client-more__toggle { margin-top: 14px; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-family: var(--font-head); font-weight: 700; color: var(--scg-red); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.client-more__toggle[hidden] { display: none; }

.btn--white { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }   /* ink on white 18.6:1 */
.btn--white:hover { background: var(--scg-gold-soft); color: var(--ink); border-color: var(--scg-gold-soft); }
.cta-band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 7vw, 88px); background: var(--ink); color: var(--on-ink); --focus: var(--scg-gold); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(38 8 10 / .84); }
.cta-band .ey-band__bg { object-position: 50% 92%; }
.cta-band__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
@media (min-width: 768px) { .cta-band__inner { flex-direction: row; justify-content: space-between; text-align: left; } }
.cta-band__text { margin: 0; max-width: 34ch; font-family: var(--font-head); font-weight: 700; font-size: var(--step-2); line-height: 1.25; color: var(--on-ink); text-wrap: balance; }

/* Work With Us: Contact ---------------------------------------------------- */
.contact-layout { display: grid; gap: clamp(32px, 5vw, 56px); align-items: start; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: minmax(0, 1fr) 400px; } }
.contact-layout__title { margin-bottom: 8px; }
.request__title { font-size: var(--step-1); margin: 0 0 6px; }
.request__intro { margin: 0 0 20px; color: var(--ink-2); }
.no-js .request__intro--js, .no-js .request-form--composer { display: none; }
.request-nojs { display: none; }
.no-js .request-nojs { display: block; padding: 20px; background: var(--paper-2); border-radius: var(--radius-sm); font-size: var(--step-1); }
.request-nojs p { margin: 0; }
.request-form { display: grid; gap: 20px; }
.request-form__note { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.field { display: grid; gap: 6px; }
.field label { font-family: var(--font-head); font-weight: 700; font-size: .9375rem; }
.field__optional { font-family: var(--font-body); font-weight: 400; color: var(--ink-2); }
.field__hint { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--ink-2); border-radius: var(--radius-sm); }
.field textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.field--invalid input, .field--invalid textarea { border: 2px solid var(--scg-red); }
.field__error { margin: 0; font-weight: 700; font-size: var(--step--1); color: var(--scg-red); }   /* 7.2:1 on white */
.field__error::before { content: "! "; }
.request-form__summary { padding: 18px 20px; background: var(--paper); border: 2px solid var(--scg-red); border-left-width: 6px; border-radius: var(--radius-sm); }
.request-form__summary[hidden] { display: none; }
.request-form__summary-title { font-size: var(--step-0); margin: 0 0 8px; }
.request-form__summary ul { margin: 0; padding-left: 1.2em; }
.request-form__summary a { color: var(--scg-red); font-weight: 700; }
.request-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.request-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.request-form__actions .btn[disabled] { opacity: .7; cursor: progress; }
.request-form__opens { font-size: var(--step--1); color: var(--ink-2); }
.request-form__status { margin: 0; min-height: 1.5em; }
.request-form__status.is-error { font-weight: 700; color: var(--scg-red); }
.request-done { padding: 24px; background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--scg-gold); border-radius: var(--radius-sm); }
.request-done[hidden] { display: none; }
.request-done__title { font-size: var(--step-1); margin: 0 0 6px; }
.request-done p { margin: 0; }
.contact-card { display: grid; gap: 14px; padding: clamp(22px, 3vw, 28px); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 1024px) { .contact-card { position: sticky; top: calc(var(--header-h) + 24px); } }
.contact-card__title { font-size: var(--step-1); margin: 0; }
.contact-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contact-card__list li { display: flex; align-items: center; gap: 12px; }
.contact-card__list li > span:last-child { display: grid; min-width: 0; }
.contact-card__list a { font-weight: 700; overflow-wrap: anywhere; }
.contact-card__label { font-size: var(--step--1); color: var(--ink-2); }
.contact-card__sub { font-size: var(--step-0); margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.contact-card__check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.contact-card__check li { display: flex; gap: 10px; align-items: flex-start; }
.contact-card__check svg { flex: none; margin-top: 3px; color: var(--scg-red); }
.contact-card__next { margin: 0; line-height: 1.55; }
.contact-card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); margin-top: 6px; }

/* Partners ---------------------------------------------------------------- */
/* EY panel: solid dark (--ink) with a gold focus ring; slightly less vertical padding than a full
   section. Logo, eyebrow, heading, text and link are stacked on one left edge. */
.partner-ey { padding-block: calc(var(--section-space) * .75); background: var(--ink); color: var(--on-ink); --focus: var(--scg-gold); }
.partner-ey__inner { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 768px) { .partner-ey__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); } }
@media (min-width: 1024px) { .partner-ey__inner { grid-template-columns: minmax(0, 1fr) 420px; } }
.partner-ey__logo { display: block; line-height: 0; margin-bottom: 24px; }
.partner-ey__logo picture { display: contents; }
.partner-ey__logo img { display: block; height: clamp(52px, 4.5vw, 64px); width: auto; }
.partner-ey__text .eyebrow { margin-bottom: .6em; }
.partner-ey__title { font-size: var(--step-3); line-height: 1.1; margin: 0 0 20px; color: var(--on-ink); }
.partner-ey__text p:not(.eyebrow) { max-width: 60ch; font-size: var(--step-1); line-height: 1.55; color: var(--on-ink); }   /* the eyebrow keeps its own (gold, small caps) style */
.partner-ey__text a { color: var(--scg-gold); }
.partner-ey__photo { margin: 0; }
.partner-ey__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; border-radius: var(--radius); box-shadow: 0 16px 40px rgb(0 0 0 / .35); }
.partner-ey__photo figcaption { margin-top: 12px; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--on-ink-2); }   /* 16px; 11.6:1 on --ink */
.partner-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 2vw, 24px); grid-template-columns: 1fr; }
@media (min-width: 768px) { .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.partner-card { display: flex; flex-direction: column; gap: 8px; padding: clamp(22px, 3vw, 32px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.partner-card__role { margin: 0; font-family: var(--font-head); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--scg-red); }
.partner-card__name { font-size: var(--step-2); line-height: 1.2; margin: 0; }
.partner-card__text { margin: 0; color: var(--ink-2); line-height: 1.55; }
.partner-card__links { display: grid; justify-items: start; gap: 0; margin-top: auto; padding-top: 6px; }
.partner-card__meta { font-family: var(--font-body); font-weight: 400; color: var(--ink-2); }

/* 404 ------------------------------------------------------------------------ */
.nf-links__title { font-size: var(--step-1); margin: 32px 0 8px; }
.nf-links { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* Faded page backdrop (site.json → page_backdrops: on for every page by default, each page can
   opt out). ONE strength control: the fixed layer is the page colour with the McKeldin photo on
   top at opacity --backdrop-visibility (21%). It has its own compositing layer, so scrolling
   never repaints it (no background-attachment: fixed). Once the image has loaded
   (html.backdrop-ready, set by backdrop.js), on backdrop pages:
   - every light top-level block is transparent and content sits directly on the photo: no
     beige (--paper-2) or white section backgrounds, no wrapper panels around groups of cards
     (the Find your seat track panel), and the home stat strip shows the photo too (the hero's
     own photo and tint then cover only the hero and fade out to transparent instead of white);
   - no divider lines between sections: where two light blocks meet, one gap
     (--section-gap) separates them, together with their eyebrows and headings;
   - secondary text directly on the photo uses --ink instead of --ink-2 (only darker, never
     larger or bolder); every solid component keeps --ink-2 inside it, so text in cards,
     tiles, inputs and dialogs is unchanged; faint outlines on the photo use --ph-border.
   Cards, tiles, inputs, FAQ items, dialogs/drawers and the lightbox keep their own solid
   backgrounds; banners, dark bands, header, footer and the nav dropdown are unchanged. Off in
   print, forced colours, with reduced data, without JS or if the image fails. */
body { --backdrop-visibility: 21%; --section-gap: clamp(56px, 7vw, 96px); --ink-2-solid: var(--ink-2); }   /* --ink-2-solid keeps the original --ink-2 for solid components */
.page-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--paper); opacity: 0; will-change: transform; transition: opacity .4s ease; }
.page-backdrop::after { content: ""; position: absolute; inset: 0; background: var(--backdrop-image, none) center / cover no-repeat; opacity: var(--backdrop-visibility); }
@media screen and (forced-colors: none) {
  .backdrop-ready .page-backdrop { opacity: 1; }
  .backdrop-ready body[data-backdrop="on"] main > :is(.section, .projects-explorer, .home-block):not(.section--ink, .home-block--ink) { background-color: transparent; }
  /* One gap where two light blocks meet (no divider lines). */
  .backdrop-ready body[data-backdrop="on"] main > :is(.section, .projects-explorer, .home-block):not(.section--ink, .home-block--ink):has(+ :is(.section, .projects-explorer, .home-block):not(.section--ink, .home-block--ink)) { padding-bottom: var(--section-gap); }
  .backdrop-ready body[data-backdrop="on"] main > :is(.section, .projects-explorer, .home-block):not(.section--ink, .home-block--ink) + :is(.section, .projects-explorer, .home-block):not(.section--ink, .home-block--ink) { padding-top: 0; }
  /* Home: the stat strip is transparent; the hero photo and tint cover only the hero and fade
     out to transparent (instead of to white) so there is no seam above the strip. The strip's
     bottom padding (36px) plus the next block's top padding make one --section-gap. */
  .backdrop-ready body[data-backdrop="on"] .hero-wrap { display: grid; background: transparent; }
  .backdrop-ready body[data-backdrop="on"] :is(.hero-wrap__bg, .hero) { grid-area: 1 / 1 / 2 / 2; }   /* explicit end lines: the absolutely positioned photo covers only row 1 */
  .backdrop-ready body[data-backdrop="on"] .hero-wrap > .stat-strip { grid-area: 2 / 1 / 3 / 2; background: transparent; }
  .backdrop-ready body[data-backdrop="on"] .hero-wrap__bg,
  .backdrop-ready body[data-backdrop="on"] .hero::before {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - clamp(96px, 12vh, 140px)), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - clamp(96px, 12vh, 140px)), transparent);
  }
  .backdrop-ready body[data-backdrop="on"] .hero::after { display: none; }
  .backdrop-ready body[data-backdrop="on"] .hero-wrap + .home-block:not(.home-block--ink) { padding-top: calc(var(--section-gap) - 36px); }
  /* Wrapper panels around groups of cards become transparent (padding and layout unchanged). */
  .backdrop-ready body[data-backdrop="on"] .seat-panel { background-color: transparent; border-color: transparent; box-shadow: none; padding-bottom: 0; }   /* no invisible padding under the last row: the section gap separates it from "What you get" */
  /* Section-level dividers inside sections (no lines on the photo). */
  .backdrop-ready body[data-backdrop="on"] :is(.help-close, .client-more, .cta-strip) { border-top-color: transparent; }
  /* Darker secondary text on the photo; solid components keep their own --ink-2. */
  .backdrop-ready body[data-backdrop="on"] :is(main > :is(.section, .projects-explorer, .home-block):not(.section--ink, .home-block--ink), .hero-wrap > .stat-strip) { --ink-2: var(--ink); }
  .backdrop-ready body[data-backdrop="on"] main :is(input, select, textarea, summary, button:not(.link-button, .client-more__toggle, .alumni-card__more, .stepper__tab), .btn, .card, .work-card, .project-filters__popover, .project-page__card, .project-pager__link, .employer-card, .seat-tile, .seat-skill, .benefit, .join-process__eligibility, .accordion, .resource-card, .qcard, .timer, .doc-card, .embed-frame, .story__card, .pillar, .stepper__card, .stepper__num, .stat-strip--grid .stat-strip__list, .press-link, .team-card, .alumni-card, .fee-card, .help-card, .client-tile, .client-chip, .contact-card, .partner-card, .engage__badge, .engage-step__marker, .request-done, .request-form__summary, .ph-text, .faq__empty, .projects-empty, .people-empty, .star__letter, .gallery__item, .media) { --ink-2: var(--ink-2-solid); }
  /* Faint outlines that sit directly on the photo: --ph-border (an existing token). */
  .backdrop-ready body[data-backdrop="on"] .star__item { border-color: var(--ph-border); }
  /* Components without a background of their own stay opaque (FAQ rows). */
  .backdrop-ready body[data-backdrop="on"] main .accordion { background-color: var(--paper); }
}
@media (prefers-reduced-motion: reduce) { .page-backdrop { transition: none; } }
@media print { .page-backdrop, .backdrop-dev { display: none !important; } }
/* Dev preview control: the backdrop-off class restores the solid colours. */
.backdrop-off .page-backdrop { display: none; }
html.backdrop-off.backdrop-ready body[data-backdrop="on"] main > .section--paper-2,
html.backdrop-off.backdrop-ready body[data-backdrop="on"] main > .projects-explorer,
html.backdrop-off.backdrop-ready body[data-backdrop="on"] main > .project-page { background-color: var(--paper-2); }
html.backdrop-off.backdrop-ready body[data-backdrop="on"] .hero-wrap > .stat-strip { background-color: var(--paper); }
html.backdrop-off.backdrop-ready body[data-backdrop="on"] .seat-panel { background-color: var(--paper); border-color: var(--line); box-shadow: var(--shadow); }
.backdrop-dev { position: fixed; z-index: 90; left: 12px; bottom: 12px; display: grid; gap: 6px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--ink-2); border-radius: 10px; box-shadow: var(--shadow-lift); font-size: .8125rem; color: var(--ink); }
.backdrop-dev__row { display: flex; align-items: center; gap: 8px; }
.backdrop-dev output { min-width: 3.5em; font-variant-numeric: tabular-nums; font-weight: 700; }

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

/* 10. Motion: reveal-on-scroll + hover only, and none under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .card:hover { transform: none; }
}