@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ===========================================================================
   TOKENS  —  Style Guide v1.2, sections 2, 3 and 5.
   Do not invent values that are not in these scales.
   ======================================================================== */

:root {

  /* --- Primary brand --------------------------------------------------- */
  --bts-teal:     #002A32;   /* Foundry Teal   — structure */
  --bts-anvil:    #D85C00;   /* Anvil Orange   — attention */
  --bts-paper:    #F6F5ED;   /* Site Paper     — canvas, NOT white */
  --bts-concrete: #5A5F66;   /* Concrete Grey  — supporting text */

  /* --- Functional ------------------------------------------------------ */
  --bts-ink:       #1A1A1A;  /* Job-Site Ink   — body text on light */
  --bts-gravel:    #2B3036;  /* Gravel Slate   — strong contrast surfaces */
  --bts-rust-deep: #8C3D00;  /* Rust Deep      — hover on Anvil Orange */

  /* --- Legibility variants  (see /HANDOFF.md, open item 4) --------------
     Not new brand colours. Same hues, lifted to clear WCAG AA where the
     spec's own values fall short on dark surfaces:
       Anvil Orange on Foundry Teal is 3.96:1  — fails AA for text under 24px
       Concrete Grey on Foundry Teal is 2.37:1 — fails AA outright
     These two are used ONLY for small text sitting on a dark surface.
       --anvil-on-dark    on teal 5.4:1 · on gravel 4.7:1
       --concrete-on-dark on teal 6.9:1 · on gravel 6.0:1
  --------------------------------------------------------------------- */
  --anvil-on-dark:    #F2761A;
  --concrete-on-dark: #A8B0B2;

  /* --- Semantic aliases ------------------------------------------------ */
  --color-brand:        var(--bts-teal);
  --color-accent:       var(--bts-anvil);
  --color-bg:           var(--bts-paper);
  --color-text:         var(--bts-ink);
  --color-text-muted:   var(--bts-concrete);
  --color-accent-hover: var(--bts-rust-deep);

  /* --- Type ------------------------------------------------------------ */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;

  --text-display:   4rem;      /* 64 */
  --text-h1:        3rem;      /* 48 */
  --text-h2:        2rem;      /* 32 */
  --text-h3:        1.5rem;    /* 24 */
  --text-body-lg:   1.25rem;   /* 20 */
  --text-body:      1rem;      /* 16 */
  --text-body-sm:   0.875rem;  /* 14 */
  --text-eyebrow:   0.75rem;   /* 12 */

  /* Fluid heads. Floor and ceiling are both on the scale above. */
  --text-display-fluid: clamp(2.25rem, 1.30rem + 4.20vw, 4rem);
  --text-h1-fluid:      clamp(2rem,    1.55rem + 2.00vw, 3rem);
  --text-h2-fluid:      clamp(1.5rem,  1.28rem + 1.00vw, 2rem);

  /* --- Spacing  (Style Guide S5 — use these exclusively) --------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* --- Layout ---------------------------------------------------------- */
  --max-width:     1280px;
  --gutter:        80px;   /* desktop outer margin */
  --radius:        4px;    /* low radius — structural, not playful */
  --header-height: 68px;
}

/* ===========================================================================
   RESET + BASE
   ======================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-6));
  -webkit-text-size-adjust: 100%;
  /* Defensive only — nothing currently overflows at any breakpoint. Declared
     on html rather than body so the viewport gets it directly, instead of
     relying on body-to-viewport overflow propagation. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--color-bg);          /* Paper owns the canvas */
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Form controls do not inherit type by default — without this the browser
   falls back to Arial, putting a second typeface on the page. */
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--bts-anvil);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--anvil-on-dark); }

::selection { background: var(--bts-anvil); color: #fff; }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  background: var(--bts-anvil);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus { top: var(--space-4); }

[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===========================================================================
   TYPE UTILITIES
   ======================================================================== */

.display {
  font-size: var(--text-display-fluid);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.h1 { font-size: var(--text-h1-fluid); line-height: 1.1; letter-spacing: -0.02em; }
.h2 { font-size: var(--text-h2-fluid); line-height: 1.2; letter-spacing: -0.01em; }
.h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }

.lead {
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.on-dark .lead { color: var(--concrete-on-dark); }

.small { font-size: var(--text-body-sm); line-height: 1.4; }

.eyebrow {
  display: block;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bts-anvil);
}
.on-dark .eyebrow { color: var(--anvil-on-dark); }
.eyebrow--muted { color: var(--color-text-muted); }
.on-dark .eyebrow--muted { color: var(--concrete-on-dark); }

.muted { color: var(--color-text-muted); }
.on-dark .muted { color: var(--concrete-on-dark); }

.accent { color: var(--bts-anvil); }
.on-dark .accent { color: var(--anvil-on-dark); }

/* ===========================================================================
   ICONS
   One inline sprite in index.html; geometry lives there, everything else
   here. Stroke-only with square caps and mitred joins — the icon equivalent
   of the 4px radius, structural rather than playful. Colour comes from
   currentColor, so an icon is always the same colour as the text beside it
   and inherits the .on-dark treatment for free.

   Every icon is decorative (adjacent text does the labelling), so they carry
   aria-hidden and never need a contrast ratio for text — but each pairing
   still clears the 3:1 that WCAG 1.4.11 asks of non-text graphics.
   ======================================================================== */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.icon--sm { width: 1rem; height: 1rem; stroke-width: 2; }

/* ===========================================================================
   LAYOUT
   ======================================================================== */

.wrap {
  width: 100%;
  max-width: calc(var(--max-width) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-24); }
.section--tight { padding-block: var(--space-16); }

/* Alternating surfaces: Paper (default) and Foundry Teal */
.section--dark {
  background: var(--bts-teal);
  color: var(--bts-paper);
}

.section-header { max-width: 68ch; margin-bottom: var(--space-12); }
.section-header .h2 { margin-top: var(--space-3); }
.section-header .lead { margin-top: var(--space-4); }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ===========================================================================
   BUTTONS
   Style Guide S5 specifies white-on-Anvil at 16px/600. That pairing is
   3.85:1, which fails WCAG AA for normal text (needs 4.5:1).

   Fix without touching the brand colours: WCAG treats >=18.66px bold as
   "large text", where the threshold drops to 3:1 — so 3.85:1 passes. The
   solid CTA is therefore set at 20px/700 (Body Large, already on the type
   scale). 18px is NOT enough: it sits just under the 18.66px cutoff.

   The small button variant stays outline-only for the same reason — a 16px
   solid orange button cannot clear AA at any weight.
   ======================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-body-lg);   /* 20px — see contrast note above */
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.btn-primary { background: var(--bts-anvil); border-color: var(--bts-anvil); color: #fff; }
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--bts-rust-deep); border-color: var(--bts-rust-deep); }

/* Outline variant. The header CTA uses this permanently, which serves two
   rules at once: Anvil Orange stays a highlighter used only by the hero and
   the form (never more than one per viewport), and the header avoids a 16px
   solid orange button that could not clear AA. Paper on Teal is 13.9:1. */
.btn-ghost { background: transparent; border-color: rgba(246,245,237,.45); color: var(--bts-paper); }
.btn-ghost:hover,
.btn-ghost:focus-visible { border-color: var(--bts-paper); background: rgba(246,245,237,.08); }

.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-body); }

/* Text link with an Anvil underline. Not a CTA — does not count toward the
   one-orange-CTA rule. */
.link {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--bts-anvil);
  padding-bottom: 2px;
  transition: color 150ms ease, border-color 150ms ease;
}
.link:hover { color: var(--bts-anvil); }
.on-dark .link { border-bottom-color: var(--anvil-on-dark); }
.on-dark .link:hover { color: var(--anvil-on-dark); }

/* ===========================================================================
   HEADER
   ======================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bts-teal);
  color: var(--bts-paper);
  border-bottom: 1px solid rgba(246,245,237,.12);
}
.header__inner {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.wordmark {
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bts-paper);
  white-space: nowrap;
  flex-shrink: 0;
}
.wordmark__accent { color: var(--anvil-on-dark); }

.nav {
  display: flex;
  gap: var(--space-8);
  margin-left: auto;
  align-items: center;
}
.nav__link {
  font-size: var(--text-body-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--bts-paper);
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  transition: border-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}
.nav__link:hover { border-bottom-color: var(--anvil-on-dark); }

.header__cta { flex-shrink: 0; }

/* ===========================================================================
   HERO
   ======================================================================== */

.hero { padding-block: var(--space-24) var(--space-16); }
.hero__inner { max-width: 62ch; }
.hero .display { margin-top: var(--space-4); }
.hero__lead { margin-top: var(--space-6); max-width: 56ch; }
.hero__meta {
  margin-top: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--bts-teal);
}
.hero__rule { width: 32px; height: 3px; background: var(--bts-anvil); flex-shrink: 0; }
.hero__actions {
  margin-top: var(--space-12);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.hero__note { margin-top: var(--space-6); }

/* ===========================================================================
   NUMBERS STRIP
   ======================================================================== */

.stats { padding-block: var(--space-12); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(246,245,237,.15);
  border: 1px solid rgba(246,245,237,.15);
}
.stat {
  background: var(--bts-teal);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.stat__value {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bts-paper);
}
.stat__value--accent { color: var(--anvil-on-dark); }
.stat__label {
  margin-top: var(--space-2);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--concrete-on-dark);
}

/* ===========================================================================
   CARDS
   ======================================================================== */

.card {
  background: rgba(0,42,50,.04);
  border: 1px solid rgba(0,42,50,.12);
  border-radius: var(--radius);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.section--dark .card {
  background: rgba(246,245,237,.05);
  border-color: rgba(246,245,237,.18);
}

.card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  background: var(--bts-teal);
  color: var(--bts-paper);
  border-radius: var(--radius);
  font-size: var(--text-body-sm);
  font-weight: 700;
}
.section--dark .card__num { background: var(--bts-paper); color: var(--bts-teal); }

.card__head { display: flex; align-items: center; gap: var(--space-4); }
.card__quote {
  font-style: italic;
  font-weight: 600;
  color: var(--bts-anvil);
  font-size: 1.0625rem;
}
.section--dark .card__quote { color: var(--anvil-on-dark); }
.card__body { color: var(--color-text); }
.section--dark .card__body { color: var(--bts-paper); }
.card__foot {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(0,42,50,.15);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.section--dark .card__foot { border-top-color: rgba(246,245,237,.2); }

/* Callout — Style Guide S5 */
.callout {
  border-left: 4px solid var(--bts-anvil);
  padding: var(--space-4) var(--space-6);
  font-style: italic;
  font-size: var(--text-body-lg);
  color: var(--bts-teal);
}
.section--dark .callout { border-left-color: var(--anvil-on-dark); color: var(--bts-paper); }

/* ===========================================================================
   HOW THE DAY RUNS
   ======================================================================== */

.rhythm { counter-reset: step; }
.rhythm__item {
  padding-top: var(--space-6);
  border-top: 2px solid rgba(246,245,237,.2);
}
.rhythm__item .h3 { margin-top: var(--space-3); }
.rhythm__item p { margin-top: var(--space-3); }

/* Site Paper, not Anvil — the eyebrow directly below is already orange, and
   two orange elements per card turns the accent into decoration. Paper on
   Foundry Teal is 13.9:1. */
.rhythm__icon {
  width: 28px;
  height: 28px;
  color: var(--bts-paper);
  margin-bottom: var(--space-4);
}

/* ===========================================================================
   SAPE PODS
   ======================================================================== */

.pillar {
  background: #fff;
  border: 1px solid rgba(0,42,50,.12);
  border-top: 3px solid var(--bts-anvil);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: var(--space-6);
}
/* Icon left in Foundry Teal, SAPE letter right in Anvil Orange. The letter
   stays because it is what makes SAPE readable as a mnemonic; the icon adds
   weight without replacing that signal. Teal on the white card is 13.9:1. */
.pillar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.pillar__icon { width: 28px; height: 28px; color: var(--bts-teal); }
.pillar__letter {
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1;
  color: var(--bts-anvil);
  letter-spacing: -0.02em;
}
.pillar__name { margin-top: var(--space-3); color: var(--bts-teal); font-size: var(--text-body-lg); font-weight: 700; }
.pillar__desc { margin-top: var(--space-2); font-size: var(--text-body-sm); line-height: 1.4; color: var(--color-text-muted); }

.rotation {
  margin-block: var(--space-12);
  background: var(--bts-teal);
  color: var(--bts-paper);
  border-radius: var(--radius);
  padding: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.rotation__text { max-width: 78ch; }
.rotation__text strong { font-weight: 700; }
.rotation__badge {
  flex-shrink: 0;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--anvil-on-dark);
  white-space: nowrap;
}

.room {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-8);
  background: #fff;
  border: 1px solid rgba(0,42,50,.12);
  border-radius: var(--radius);
  padding: var(--space-8);
}
.room + .room { margin-top: var(--space-6); }
.room--invert {
  background: var(--bts-teal);
  color: var(--bts-paper);
  border-color: var(--bts-teal);
}
.room__head { display: flex; align-items: flex-start; gap: var(--space-4); }
.room__title { color: var(--bts-teal); }
.room--invert .room__title { color: var(--bts-paper); }
.room--invert .card__num { background: var(--bts-anvil); color: #fff; }
.room__led {
  margin-top: var(--space-1);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.room--invert .room__led { color: var(--concrete-on-dark); }
.room__desc { margin-top: var(--space-4); }
.room--invert .room__desc { color: var(--bts-paper); }

.room__rail {
  border-left: 2px solid rgba(0,42,50,.15);
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.room--invert .room__rail { border-left-color: rgba(246,245,237,.25); }
.room__rail dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bts-anvil);
}
.room--invert .room__rail dt { color: var(--anvil-on-dark); }
.room__rail dd { margin: var(--space-2) 0 0; font-size: var(--text-body-sm); line-height: 1.4; }

/* ===========================================================================
   WHO IT'S FOR
   ======================================================================== */

.fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.fit__list { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.fit__list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.fit__marker { color: var(--bts-anvil); font-weight: 700; flex-shrink: 0; line-height: 1.5; }

/* ===========================================================================
   PEOPLE
   ======================================================================== */

.person {
  border-top: 2px solid var(--bts-teal);
  padding-top: var(--space-4);
}
.person__role {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bts-anvil);
}
.person__name { margin-top: var(--space-2); color: var(--bts-teal); }
.person__org { margin-top: var(--space-1); font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-muted); }
.person__line { margin-top: var(--space-3); font-size: var(--text-body-sm); line-height: 1.4; }

/* The two rules the inline styles used to carry, now that there are five of
   these cards: hosts get an Anvil top rule, speakers a Paper one. */
.people .person { border-top-color: rgba(246,245,237,.4); }
.people .person--host { border-top-color: var(--bts-anvil); }
.people .person__name { color: var(--bts-paper); }

.person__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.person__id { min-width: 0; }        /* long org names wrap instead of pushing */
.person__id .person__name { margin-top: var(--space-1); }

/* --- Headshots -----------------------------------------------------------
   The five source photos are tonally unrelated: three neutral studio shots,
   one warm tight crop, one cool mountain profile. A Foundry Teal duotone
   makes them read as one panel and keeps a single accent hue on the page.

   Done in CSS rather than baked into the files so replacing a headshot is a
   file swap with no reprocessing. `mix-blend-mode: color` takes hue and
   saturation from the overlay and luminosity from the photo, which is a real
   duotone across the full tonal range rather than a flat wash.
------------------------------------------------------------------------- */
.person__photo {
  position: relative;
  isolation: isolate;               /* blend against the photo, not the page */
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bts-gravel);    /* shows while the image is still loading */
}
.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: filter 200ms ease;
}

/* Guard, not decoration. Without blend support the overlay would paint as a
   solid teal disc over the face, so it only exists where it can blend; the
   fallback is a plain greyscale photo. Same fail-open principle as the
   scroll reveal. */
@supports (mix-blend-mode: color) {
  .person__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bts-teal);
    mix-blend-mode: color;
    opacity: .55;
    transition: opacity 200ms ease;
  }
}

/* Colour returns on hover. Gated on a real hover device so a touch tap
   cannot leave one card stuck out of the set. */
@media (hover: hover) {
  .person:hover .person__photo img    { filter: none; }
  .person:hover .person__photo::after { opacity: 0; }
}

/* --- Company logos -------------------------------------------------------
   The four source marks have incompatible backgrounds — a red circle on
   white, dark navy on white, and two dark-on-transparent. A white chip
   normalises all four at once, and white is what the Style Guide reserves
   for inset elements. Greyscale keeps Aurisen Red and Livmora Navy off the
   page, so Anvil Orange stays the only accent hue.
------------------------------------------------------------------------- */
/* nowrap plus a shrinkable link: the longest name, "Canpro Deck and Rail",
   does not fit beside the chip in a two-column layout. Wrapping the flex line
   would strand the chip on a row of its own, so the text wraps inside itself
   and stays next to its mark. */
.person__org {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
}
.person__link { min-width: 0; }
.on-dark .person__org { color: var(--concrete-on-dark); }
.person__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 28px;
  padding-inline: var(--space-2);
  background: #fff;
  border-radius: var(--radius);
}
/* 20px in a 28px chip. Smaller than this and the marks turn to noise; the
   chip cannot grow much further without out-weighing the 14px line it sits
   on. The wordmarks inside the marks are not legible at any size that fits
   here, which is fine — the org name is spelled out in text beside them. */
.person__logo img {
  height: 20px;
  width: auto;
  filter: grayscale(1);
}
.person__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
  line-height: 1.3;
}
.person__link:hover {
  color: var(--bts-paper);
  border-bottom-color: var(--anvil-on-dark);
}

/* ===========================================================================
   SPONSOR
   ======================================================================== */

.sponsor {
  background: #fff;
  border: 1px solid rgba(0,42,50,.12);
  border-radius: var(--radius);
  padding: var(--space-12);
  text-align: center;
}
.sponsor__name { margin-top: var(--space-4); color: var(--bts-teal); }
.sponsor__line { margin-top: var(--space-3); }

/* ===========================================================================
   FORM
   White is reserved for inset cards and form fields (Style Guide S2).
   ======================================================================== */

.request { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }

.form-card {
  background: #fff;
  border: 1px solid rgba(0,42,50,.15);
  border-radius: var(--radius);
  padding: var(--space-12);
}

.field { display: block; margin-bottom: var(--space-6); }
.field__label {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--bts-teal);
  margin-bottom: var(--space-2);
}
.field__optional { font-weight: 400; color: var(--color-text-muted); }

.field input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--bts-concrete);
  border-radius: var(--radius);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field input:hover { border-color: var(--bts-teal); }
.field input:focus {
  outline: none;
  border-color: var(--bts-anvil);
  box-shadow: 0 0 0 3px rgba(216,92,0,.25);
}
.field input[aria-invalid="true"] { border-color: #b00020; }

.field__error {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-body-sm);
  color: #b00020;
  font-weight: 600;
}

.form-note { margin-top: var(--space-6); }

.form-status {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--text-body-sm);
}
.form-status--error { background: #fdecef; color: #b00020; border: 1px solid #b00020; }

.form-success { text-align: left; }
.form-success .h3 { color: var(--bts-teal); margin-top: var(--space-4); }
.form-success p { margin-top: var(--space-4); }

/* ===========================================================================
   FOOTER
   ======================================================================== */

.footer { background: var(--bts-teal); color: var(--bts-paper); padding-block: var(--space-16); }
.footer__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(246,245,237,.18);
}
.footer .wordmark { font-size: 1.25rem; }
/* Four organisation names run long. max-width keeps the line wrapping under
   the wordmark rather than stretching across to the contact column. */
.footer__orgs {
  margin-top: var(--space-2);
  max-width: 46ch;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--concrete-on-dark);
}
/* Break between organisations, never inside one — otherwise the longest name
   splits as "Canpro Deck and / Rail". */
.footer__orgs span { white-space: nowrap; }
.footer__contact { display: grid; gap: var(--space-2); font-size: var(--text-body-sm); }
/* Both hosts. justify-items keeps each Anvil underline the width of its own
   address rather than the width of the column. */
.footer__emails { display: grid; gap: var(--space-2); justify-items: start; }
.footer__bottom {
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  font-size: var(--text-body-sm);
  color: var(--concrete-on-dark);
}

/* ===========================================================================
   MOTION
   ======================================================================== */

/* Reveal-on-scroll is strictly additive. Content is VISIBLE by default and is
   only hidden once main.js has added .reveal-on to <html>, which it does only
   when it has confirmed it can actually drive the animation. If JS fails, is
   blocked, errors, or the tab never gets animation frames, every section still
   renders. A blank page is a far worse outcome than a missing fade. */
.reveal-on .reveal { opacity: 0; transform: translateY(16px); }
.reveal-on .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease, transform 500ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-on .reveal,
  .reveal-on .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===========================================================================
   RESPONSIVE
   Tablet: 8-col, 40px outer margins.  Mobile: 4-col, 16px outer margins.
   ======================================================================== */

@media (max-width: 1024px) {
  :root { --gutter: 40px; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .room { grid-template-columns: 1fr; gap: var(--space-6); }
  .room__rail {
    border-left: 0;
    border-top: 2px solid rgba(0,42,50,.15);
    padding-left: 0;
    padding-top: var(--space-6);
    flex-direction: row;
    gap: var(--space-12);
  }
  .room--invert .room__rail { border-top-color: rgba(246,245,237,.25); }

  .request { grid-template-columns: 1fr; gap: var(--space-12); }
  .fit { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Five stats in five columns goes cramped below ~1024 and the two longest
     labels wrap while the others do not. Two columns with the last spanning
     full width keeps the row rhythm even. */
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:last-child { grid-column: 1 / -1; }

  .nav { display: none; }          /* anchors remain reachable by scrolling */
}

@media (max-width: 720px) {
  :root { --gutter: 16px; }

  .section { padding-block: var(--space-16); }
  .section--tight { padding-block: var(--space-12); }
  .hero { padding-block: var(--space-16) var(--space-12); }

  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }

  .stat { padding: var(--space-6) var(--space-3); }

  .rotation { flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); }
  .room, .form-card, .sponsor { padding: var(--space-6); }
  .room__rail { flex-direction: column; gap: var(--space-6); }

  .hero__actions { gap: var(--space-6); }
  .hero__actions .btn { width: 100%; justify-content: center; }

  .header__cta { display: none; }  /* hero + form CTAs carry it on mobile */

  .footer__top { flex-direction: column; gap: var(--space-8); }
}

/* ===========================================================================
   PRINT
   ======================================================================== */

@media print {
  .header, .skip-link, .hero__actions, .form-card { display: none; }
  body { background: #fff; color: #000; }
  .section--dark, .room--invert, .rotation { background: #fff !important; color: #000 !important; }

  /* Print engines do not reliably blend, and an unblended overlay prints as a
     solid teal disc where the face should be. Drop it and print greyscale. */
  .person__photo::after { display: none; }
  .person__name, .person__link { color: #000 !important; }
}