/* ==========================================================================
   0. Fonts — self-hosted. No third-party request, no extra DNS lookup, and
   the site keeps working if Google Fonts is ever blocked or slow.
   font-display:swap shows fallback text immediately rather than blank space.
   ========================================================================== */
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/barlow-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/barlow-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}

/* ==========================================================================
   Shield Fireproofing — stylesheet
   Plain CSS. No build step, no framework. Edit directly.
   Sections in order: tokens, reset, layout, header, hero, pillars,
   services, cta band, certifications, footer, responsive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens — change a value here and it updates everywhere
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --red:          #d81f26;
  --red-bright:   #ef2b32;
  /* Small red text on a dark ground needs to be lighter than the brand red to
     clear WCAG AA (4.5:1). #d81f26 only reaches 4.14 on black. */
  --red-on-dark:  #f5484e;
  --red-dark:     #a5161c;

  /* Neutrals */
  --black:        #000000;
  --ink:          #0d0f11;   /* dark section background */
  --ink-2:        #16191c;   /* card background */
  --ink-3:        #22262a;   /* card border / hairline */
  --paper:        #ffffff;
  --paper-2:      #f4f5f6;   /* light section background */
  --paper-3:      #e4e6e8;

  /* Text */
  --text-on-dark:      #ffffff;
  --text-on-dark-mute: #a9b0b6;
  --text-on-light:     #14171a;
  --text-on-light-mute:#555d64;

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --wrap:      1680px;
  --gutter:    clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --radius:    2px;

  /* Height of the sticky header — used by anchor offsets and sticky panels */
  --header-h: 89px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-on-light);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0; }

/* Visible keyboard focus everywhere — do not remove */
:focus-visible {
  outline: 3px solid var(--red-bright);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--red); color: #fff; padding: .75rem 1.25rem;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em;
}
.skip-link:focus { left: 0; }

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

/* Kept out of the HTML as inline styles so the Content-Security-Policy in
   _headers can stay strict (no 'unsafe-inline' needed for styles). */
.icon-sprite { position: absolute; }
address { font-style: normal; }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .85em 1.5em;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-bright); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: #fff; color: var(--red); border-color: #fff; }

.btn--sm { font-size: .8125rem; padding: .6em 1.1em; }

.btn .arrow { transition: transform .18s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--black);
  border-bottom: 1px solid #1c1f22;
}

.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 88px;
}

.brand { flex: 0 0 auto; }
/* Sized by height so the header bar height is predictable; the width/height
   attributes in the HTML carry the true aspect ratio so nothing shifts on load. */
.brand img { height: 75px; width: auto; }

/* auto on both sides: flex splits the leftover space evenly, so the links sit
   centred between the logo and the phone/bid button rather than crowding the
   right-hand side. */
.nav { margin-inline: auto; }
.nav__list {
  display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .9375rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: #e8eaec;
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.nav__link:hover { color: #fff; border-bottom-color: var(--red); }
.nav__link[aria-current="page"] { color: #fff; border-bottom-color: var(--red); }

/* ---- Services dropdown ---- */
.nav__list .has-menu { position: relative; display: flex; align-items: center; gap: .25rem; }

.submenu-toggle {
  background: transparent; border: 0; padding: .25rem;
  color: #e8eaec; cursor: pointer; line-height: 0;
  transition: transform .18s var(--ease), color .16s var(--ease);
}
/* Explicit size: the global `svg { max-width: 100% }` collapses to zero
   against a shrink-to-fit button. */
.submenu-toggle svg { width: 12px; height: 12px; max-width: none; flex: 0 0 auto; }
.submenu-toggle:hover { color: #fff; }
.submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--red-bright); }

.submenu {
  position: absolute; top: calc(100% + .55rem); left: -1rem;
  min-width: 260px;
  list-style: none; margin: 0; padding: .4rem 0;
  background: #08090a;
  border: 1px solid #24282c;
  border-top: 2px solid var(--red);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  /* Hidden by default; shown on hover or when the toggle is expanded. */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  z-index: 20;
}
.has-menu:hover > .submenu,
.has-menu:focus-within > .submenu,
.submenu-toggle[aria-expanded="true"] + .submenu { opacity: 1; visibility: visible; transform: translateY(0); }

.submenu a {
  display: block; padding: .55rem 1.1rem;
  font-size: .9375rem; color: #cfd4d8;
  border-left: 2px solid transparent;
  transition: background-color .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.submenu a:hover { background: #121517; color: #fff; border-left-color: var(--red); }

.header__actions { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }

.header__phone {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: .04em; color: #fff; white-space: nowrap;
}
.header__phone svg { color: var(--red); }
.header__phone:hover { color: var(--red-bright); }

/* Mobile menu button — hidden on desktop */
.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent; border: 1px solid #33383d; border-radius: var(--radius);
  color: #fff; padding: .5rem .6rem; cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--black); overflow: hidden; }

/* The <img> lives inside a <picture>; the wrapper must not become a layout box. */
.hero picture { display: contents; }

.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Crew along the bottom, skyline through the middle. A top bias cropped the
     crew out on wide screens; 55% keeps them in frame with the full skyline
     and bridge above. The mobile file is composed already and needs no bias. */
  object-position: center 55%;
}

/* A left wash, but a fraction of the original. Removing it entirely put the
   lede at 2.1:1 against a 4.5:1 minimum — the copy sits over lit buildings,
   not the dark steel it looked like. Measured: the text column needs its
   background under 0.183 luminance, which takes about 0.35 of wash. This runs
   0.50 at the edge and is gone by 68%, while the text ends at 32%. The
   skyline, bridge and crew stay clear. The original ran 0.92 and washed out
   the whole left half, which is what Brad wanted gone. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.12) 52%, rgba(0,0,0,0) 68%),
    linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.12) 38%, rgba(0,0,0,.28) 100%);
}

.hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(380px, 44vw, 600px);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  align-items: flex-start;
}
/* Cap the text column without narrowing .wrap itself — otherwise the
   centred wrapper pulls the whole hero into the middle of the viewport. */
.hero__inner > * { max-width: 680px; }

.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.75rem);
  color: #fff;
  letter-spacing: .01em;
  text-wrap: balance;
  /* Two-layer shadow: a tight one that hugs the letterforms for legibility
     over the bright sky, and a wide soft one for overall separation. Doing
     the work here rather than with a dark wash keeps the photo visible. */
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 2px 28px rgba(0,0,0,.7);
}
.hero h1 .line { display: block; }
.hero h1 .accent {
  /* White, not --red-bright. That red is a dark colour (0.203 relative
     luminance) so it only holds contrast against near-black. Measured over
     this photo it came out 1.6:1 on both phone and desktop, against a 3:1
     minimum for large text. No wash light enough to keep the photo visible
     fixes that; white does, at 5-6:1. Brand red still carries the buttons,
     rules and icons, where it sits on solid ground. */
  color: #fff;
}

.hero__lede {
  margin-top: 1.15rem;
  /* Was #d6dade — nudged to white now that the dark wash behind it is gone. */
  color: #f2f4f5;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  max-width: 42ch;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 1px 16px rgba(0,0,0,.65);
}

.hero__cta { margin-top: 1.9rem; }

/* --------------------------------------------------------------------------
   6. Pillars strip
   -------------------------------------------------------------------------- */
.pillars { background: var(--ink); border-top: 1px solid #1c1f22; }

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.pillar {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1.6rem clamp(.9rem, 2vw, 1.75rem);
  border-left: 1px solid #23272b;
}
.pillar:first-child { border-left: 0; }

.pillar__icon { flex: 0 0 auto; color: var(--red); margin-top: .1rem; }

/* Each tile is a link, so the inner elements are spans — they need blockifying
   for the title and text to stack. */
.pillar__title,
.pillar__text { display: block; }

.pillar__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; letter-spacing: .085em; text-transform: uppercase;
  color: #fff; line-height: 1.15;
}
.pillar__text {
  font-size: .875rem; line-height: 1.45;
  color: var(--text-on-dark-mute); margin-top: .3rem;
}

/* Link state. The first tile's text is already red, so hover underlines the
   title rather than recolouring it — otherwise that tile turns entirely red. */
a.pillar {
  text-decoration: none; color: inherit;
  transition: background-color .18s var(--ease);
}
a.pillar:hover { background: #1a1e22; }
a.pillar:hover .pillar__title {
  text-decoration: underline;
  text-decoration-color: var(--red-on-dark);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
a.pillar:hover .pillar__icon { color: var(--red-on-dark); }
a.pillar:focus-visible {
  outline: 2px solid var(--red-on-dark); outline-offset: -2px;
  background: #1a1e22;
}
.pillar__text--accent { color: var(--red-on-dark); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-family: var(--font-display); }

/* --------------------------------------------------------------------------
   7. Services
   -------------------------------------------------------------------------- */
.services { background: var(--paper); padding-block: var(--section-y); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.eyebrow {
  font-family: var(--font-display); font-weight: 600;
  font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red); margin-bottom: .5rem;
}

.section-head h2 { font-size: clamp(1.85rem, 3.4vw, 2.75rem); color: var(--text-on-light); }

.section-head__aside p { color: var(--text-on-light-mute); max-width: 52ch; }

.text-link {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .9rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: .875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red);
}
.text-link .arrow { transition: transform .18s var(--ease); }
.text-link:hover .arrow { transform: translateX(4px); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.card {
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--red);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

/* Placeholder photo area. Swap `.card__media` for an <img> when real photos
   are ready — the aspect ratio and cropping are already handled. */
.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 100% at 30% 0%, #33393f 0%, #1b1f23 55%, #101315 100%);
  border-bottom: 1px solid var(--ink-3);
  overflow: hidden;
}
.card__media::before {
  /* faint diagonal hatch so a placeholder reads as intentional */
  content: ""; position: absolute; inset: 0; opacity: .16;
  background-image: repeating-linear-gradient(135deg, #fff 0 1px, transparent 1px 11px);
}
.card__media svg { position: relative; color: #5d666e; width: 58px; height: 58px; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.card__tag {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .35em .8em;
}

.card__body { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }

.card__heading { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.card__heading svg { flex: 0 0 auto; color: var(--red); }
.card__heading h3 {
  font-size: 1.25rem; color: #fff; letter-spacing: .04em; line-height: 1.1;
}

.card__text { color: var(--text-on-dark-mute); font-size: .9375rem; line-height: 1.55; }

.card__more {
  margin-top: auto; padding-top: 1.1rem;
  display: flex; justify-content: flex-end; color: var(--red);
}
.card:hover .card__more .arrow { transform: translateX(4px); }
.card__more .arrow { transition: transform .18s var(--ease); }

/* The eighth card spans two columns with a side-by-side layout */
.card--wide { grid-column: span 2; flex-direction: row; }
.card--wide .card__media { aspect-ratio: auto; width: 45%; border-bottom: 0; border-right: 1px solid var(--ink-3); }
.card--wide .card__body { width: 55%; justify-content: center; padding: clamp(1.4rem, 2.4vw, 2.2rem); }
.card--wide .card__heading h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
.card__kicker {
  font-family: var(--font-display); font-weight: 600;
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-on-dark); margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   8. CTA band
   -------------------------------------------------------------------------- */
.cta-band { background: var(--red); color: #fff; }
.cta-band__inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: 1.75rem;
  flex-wrap: wrap;
}
.cta-band__icon { flex: 0 0 auto; opacity: .9; }
.cta-band__copy { flex: 1 1 320px; }
.cta-band h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); letter-spacing: .03em; }
.cta-band p { color: #fff; font-size: .9375rem; margin-top: .2rem; }

/* --------------------------------------------------------------------------
   9. Certifications
   -------------------------------------------------------------------------- */
.certs { background: var(--paper-2); padding-block: clamp(2.25rem, 4vw, 3.25rem); border-top: 1px solid var(--paper-3); }
.certs__title {
  text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: .875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-on-light-mute);
  margin-bottom: 1.75rem;
}
/* Flex, not a fixed grid: the badge count changes (six down to three when the
   membership marks came off), and a hardcoded column count leaves dead cells
   and shoves the row off-centre. This wraps and stays centred at any count. */
.certs__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
/* Shown in full colour: these marks are earned credentials and are the
   strongest trust signal on the page. Greyscaling them hid the ISN badge
   almost completely on a light ground. */
.certs__row img {
  height: 74px; width: auto;
  opacity: .92;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.certs__row img:hover { opacity: 1; transform: scale(1.04); }

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--black); color: var(--text-on-dark-mute); }

.footer__grid {
  display: grid;
  /* minmax(0, …) rather than a bare 1fr: without it a long service name or
     the email address sets a min-content floor and the grid overflows. */
  /* Four columns: the Follow Us column is out until there are real profile
     URLs. Restore the fifth minmax(0, .75fr) when it comes back. */
  grid-template-columns:
    minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(2.75rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
}

.footer__brand img { height: 62px; width: auto; margin-bottom: 1rem; }
.footer__brand p { font-size: .875rem; max-width: 30ch; }

.footer__heading {
  font-size: .9375rem; letter-spacing: .14em; color: var(--red-on-dark); margin-bottom: .9rem;
}

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer a { font-size: .9375rem; transition: color .16s var(--ease); overflow-wrap: anywhere; }
.footer a:hover { color: #fff; }

.footer__contact li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; }
.footer__contact svg { flex: 0 0 auto; color: var(--red); margin-top: .25rem; }

.social { display: flex; gap: .6rem; }
.social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid #2b3035; border-radius: var(--radius);
  color: #fff;
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.social a:hover { background: var(--red); border-color: var(--red); }

.footer__bar {
  border-top: 1px solid #1a1d20;
  padding-block: 1.25rem;
  text-align: center;
  font-size: .8125rem;
  color: #6f767c;
}
.footer__bar a { transition: color .16s var(--ease); }
.footer__bar a:hover { color: #fff; }

/* Safety ribbon above the footer */
.safety-ribbon {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding-block: .9rem;
  font-family: var(--font-display);
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.safety-ribbon .muted { color: #fff; font-weight: 500; }

/* ==========================================================================
   11. Interior page sections (Safety, Careers)
   ========================================================================== */

/* ---- Shared: a standalone section heading (no two-column head) ---- */
.section-title {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  color: var(--text-on-light);
  margin-bottom: clamp(1.4rem, 2.6vw, 2.1rem);
}
.section-title--dark { color: #fff; }
.section-title--dark::after {
  content: ""; display: block; height: 1px; background: #23272b;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* Careers reuses the dark pillars band as a full section rather than a strip */
.pillars--block { padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.25rem, 2.4vw, 1.9rem); }

/* ---- Shared: a row of icon + title + text columns with hairline dividers --- */
.feature-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}
.feature {
  padding: 0 clamp(.7rem, 1.6vw, 1.4rem);
  border-left: 1px solid var(--divider, var(--paper-3));
  text-align: center;
}
.feature:first-child { border-left: 0; }
/* The wrapper is a full-width block, so centring it does nothing — the SVG
   inside has to be centred instead. */
.feature__icon {
  display: flex; justify-content: center;
  color: var(--red); margin-bottom: .8rem;
}
.feature__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: .9375rem; letter-spacing: .085em; text-transform: uppercase;
  line-height: 1.2; margin-bottom: .45rem;
  hyphens: auto;
  overflow-wrap: break-word;
}
.feature__text { font-size: .85rem; line-height: 1.5; color: var(--feature-text, var(--text-on-light-mute)); }

/* Dark variant, used on the Careers page */
.feature-row--dark { --divider: #23272b; --feature-text: var(--text-on-dark-mute); }
.feature-row--dark .feature__title { color: #fff; }

/* ---- Safety: commitment block ---- */
.commitment { background: var(--paper); padding-block: var(--section-y); }
.commitment__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr) minmax(0, .8fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.commitment__grid h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.commitment__grid p { color: var(--text-on-light-mute); }

.handbook {
  display: flex; gap: .9rem; align-items: flex-start;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  background: #fff;
  padding: 1.1rem 1.2rem;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.handbook:hover { background: #fff5f5; transform: translateY(-2px); }
.handbook__icon { color: var(--red); flex: 0 0 auto; margin-top: .1rem; }
.handbook h3 {
  font-size: 1rem; letter-spacing: .08em; margin-bottom: .35rem; color: var(--text-on-light);
}
.handbook p { font-size: .85rem; color: var(--text-on-light-mute); line-height: 1.45; }
.handbook .arrow { color: var(--red); margin-top: .5rem; transition: transform .18s var(--ease); }
.handbook:hover .arrow { transform: translateX(4px); }

/* ---- Safety: "how we work safely" cards ---- */
.action { background: var(--paper-2); padding-block: var(--section-y); }
.action-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.1rem);
}
.action-card {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.action-card .card__media { aspect-ratio: 4 / 3; }
.action-card .card__media svg { width: 40px; height: 40px; }
.action-card__body { padding: .9rem 1rem 1.1rem; }
.action-card h3 {
  font-size: 1rem; color: #fff; letter-spacing: .05em; line-height: 1.15; margin-bottom: .4rem;
}
.action-card p { font-size: .8125rem; line-height: 1.5; color: var(--text-on-dark-mute); }

/* ---- Safety: numbers ---- */
.numbers { background: var(--paper); padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.numbers__grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
}
.number { text-align: center; padding: 0 clamp(.7rem, 1.6vw, 1.4rem); border-left: 1px solid var(--paper-3); }
.number:first-child { border-left: 0; }
.number__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.05;
  color: var(--red); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
/* Word values ("Continuous", "Proactive") need a smaller size than "0" or
   "100%" or they collide with the neighbouring column. */
.number__value--word { font-size: clamp(1.1rem, 1.9vw, 1.5rem); line-height: 1.15; }
.number__label {
  font-family: var(--font-display); font-weight: 600;
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-on-light); margin-top: .3rem;
}
.number__text { font-size: .8125rem; line-height: 1.45; color: var(--text-on-light-mute); margin-top: .35rem; }

/* ---- Careers: photo strip ---- */
/* White gutters between and around the photos, per the mockup. */
.photo-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px; padding: 6px;
  background: var(--paper);
}
.photo-strip .card__media { aspect-ratio: 4 / 3; border-bottom: 0; }
.photo-strip .card__media svg { width: 48px; height: 48px; }
/* The four photos are different shapes, so crop them to a common ratio rather
   than letting the tallest one set the row height. */
.photo-strip img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
}

/* ---- Careers: open positions ---- */
.careers-main { background: var(--paper); padding-block: var(--section-y); }
/* Two columns, two rows: the heading sits in row 1 above the job list, and the
   list and the panel share row 2. That makes the panel's top edge line up with
   the top of the list no matter how tall the heading is — which is what a
   heading-to-heading alignment can never do reliably, because the panel's own
   padding pushes its text down. */
.careers-main__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.careers-main__title {
  grid-column: 1; grid-row: 1;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 1.1rem;
}
.careers-main__list { grid-column: 1; grid-row: 2; }

.positions { list-style: none; margin: 0; padding: 0; border: 1px solid var(--paper-3); border-radius: var(--radius); }
.position {
  display: grid; grid-template-columns: 1fr max-content; gap: .3rem 1rem;
  align-items: center;
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--paper-3);
  background: var(--paper);
  transition: background-color .16s var(--ease);
}
.position:last-child { border-bottom: 0; }
.position:hover { background: var(--paper-2); }
.position__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: .05em; text-transform: uppercase;
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
}
.position__loc {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-body); font-size: .8125rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--text-on-light-mute);
}
.position__loc svg { color: var(--red); }
.position__text { grid-column: 1; font-size: .875rem; color: var(--text-on-light-mute); }
.position__link {
  grid-row: 1 / span 2; grid-column: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); white-space: nowrap;
}
.position__link .arrow { transition: transform .18s var(--ease); }
.position:hover .position__link .arrow { transform: translateX(4px); }

.positions-more { text-align: center; margin-top: 1.5rem; }
.btn--outline { border-color: var(--paper-3); color: var(--text-on-light); }
.btn--outline:hover { border-color: var(--red); color: var(--red); }

/* ---- Careers: impact panel ---- */
.impact {
  grid-column: 2; grid-row: 2;
  /* Rides along as you scroll the job list, so "Apply Now" stays on screen
     instead of scrolling away after the third posting. */
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  align-self: start;
  background:
    radial-gradient(120% 130% at 100% 0%, #3a1114 0%, #17191c 55%, #101214 100%);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  color: #fff;
}
.impact h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-bottom: .8rem; }
.impact > p { color: var(--text-on-dark-mute); font-size: .9375rem; margin-bottom: 1.3rem; }
.impact ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .85rem; }
.impact li { display: flex; align-items: center; gap: .75rem; font-family: var(--font-display); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; font-size: .9375rem; }
.impact li svg { color: var(--red-bright); flex: 0 0 auto; }

/* ---- Disclosure button (collapsible section) ---- */
.disclosure {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: .9375rem; letter-spacing: .09em; text-transform: uppercase;
  padding: .8em 1.4em;
  background: var(--paper);
  color: var(--text-on-light);
  border: 2px solid var(--paper-3);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.disclosure:hover { border-color: var(--red); color: var(--red); }
.disclosure__chevron { transition: transform .2s var(--ease); }
.disclosure[aria-expanded="true"] { border-color: var(--red); color: var(--red); }
.disclosure[aria-expanded="true"] .disclosure__chevron { transform: rotate(180deg); }

.apply__panel { margin-top: clamp(1.25rem, 2.4vw, 1.9rem); }
.apply__panel[hidden] { display: none; }
/* Only animate the reveal for people who haven't asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .apply__panel:not([hidden]) { animation: reveal .28s var(--ease); }
  @keyframes reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---- Careers: how to apply ---- */
.apply { background: var(--paper-2); padding-block: var(--section-y); border-top: 1px solid var(--paper-3); }
.apply__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.apply-card {
  background: var(--paper); border: 1px solid var(--paper-3); border-radius: var(--radius);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  display: flex; flex-direction: column;
}
.apply-card__head { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.apply-card__head svg { color: var(--red); flex: 0 0 auto; }
.apply-card h3 { font-size: 1.2rem; color: var(--text-on-light); letter-spacing: .05em; }
.apply-card p { color: var(--text-on-light-mute); font-size: .9375rem; margin-bottom: 1rem; }
.apply-card .btn { align-self: flex-start; margin-top: auto; }
.apply-note {
  margin-top: 1.25rem; font-size: .8125rem; color: var(--text-on-light-mute);
  max-width: 70ch;
}
.apply-note strong { color: var(--text-on-light); }

/* ---- Careers: resume band ---- */
.resume-band { background: var(--paper-2); border-top: 1px solid var(--paper-3); }
.resume-band__inner {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding-block: 1.5rem;
}
.resume-band__icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--red); color: #fff;
}
.resume-band__copy { flex: 1 1 300px; }
.resume-band h2 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--text-on-light); }
.resume-band p { font-size: .9375rem; color: var(--text-on-light-mute); margin-top: .15rem; }

/* ==========================================================================
   About page
   ========================================================================== */
/* No top padding: the portrait panel butts straight up against the black
   pillar strip so the photo reads as continuing out of it. */
.about { background: var(--paper); padding-block: 0 var(--section-y); }
.about__lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.about__lead h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.about__lead p { color: var(--text-on-light-mute); margin-bottom: 1rem; }
.about__lead p:last-child { margin-bottom: 0; }

.markets { background: var(--paper-2); padding-block: var(--section-y); }
.markets__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.8rem, 1.5vw, 1.25rem); }
.market {
  background: var(--paper); border: 1px solid var(--paper-3); border-radius: var(--radius);
  padding: 1.2rem 1.1rem; text-align: center;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.market:hover { border-color: var(--red); transform: translateY(-3px); }
.market svg { color: var(--red); margin: 0 auto .7rem; }
.market h3 {
  font-size: clamp(.875rem, 2.1vw, 1rem);
  letter-spacing: .07em; margin-bottom: .35rem; color: var(--text-on-light);
  hyphens: auto; overflow-wrap: break-word;
}
.market p { font-size: .8125rem; color: var(--text-on-light-mute); line-height: 1.45; }


/* ---- About: portrait panel + credentials ---- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: stretch;
}

.portrait {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 var(--radius) var(--radius);
  min-height: clamp(440px, 36vw, 540px);
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  background:
    linear-gradient(120deg, #f6f7f8 0%, #eceef0 46%, #e2e5e8 100%);
  border: 1px solid var(--paper-3);
}
/* The red wedge from the mockup, drawn rather than baked into the image so it
   scales with the panel and never fights the photo's edges. */
.portrait::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(130deg, var(--red) 0%, var(--red-dark) 55%, #6d0e12 100%);
  clip-path: polygon(46% 100%, 100% 14%, 100% 100%);
}
.portrait > * { position: relative; z-index: 2; }

.portrait .eyebrow { margin-bottom: .35rem; }
.portrait h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  color: var(--text-on-light);
  line-height: .98;
}
.portrait__lines {
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: clamp(.95rem, 1.35vw, 1.1rem);
  color: var(--text-on-light);
  max-width: 14ch;
}
.portrait__lines span { display: block; }

/* Sized by height so he always stands on the panel floor without his head
   being clipped, whatever the panel's width works out to. */
.portrait__man {
  position: absolute; right: -7%; bottom: 0; z-index: 1;
  height: 100%; width: auto; max-width: none;
  filter: drop-shadow(-8px 2px 20px rgba(0,0,0,.3));
}
.portrait h2 { max-width: 9ch; }

/* Dropped a little below the panel top rather than sitting flush with it. */
.about__copy { padding-top: clamp(1.75rem, 4vw, 3.25rem); }
.about__copy p { color: var(--text-on-light-mute); margin-bottom: 1rem; }
.about__copy p:last-of-type { margin-bottom: 0; }

/* ---- About: credential figures ---- */
.creds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--paper-3);
}
.cred {
  --cred-icon: 26px;          /* icon height */
  --cred-icon-gap: .55rem;    /* space between icon and value */
  padding: 1.1rem clamp(.6rem, 1.4vw, 1.1rem);
  border-left: 1px solid var(--paper-3);
  border-bottom: 1px solid var(--paper-3);
}
/* Only one figure carries an icon, so every other cell reserves the same space
   above its value. Without that the icon would push its own value down and
   break the line the figures share across the row. */
.cred:not(.cred--icon) { padding-top: calc(1.1rem + var(--cred-icon) + var(--cred-icon-gap)); }
.cred__icon { color: var(--red); line-height: 0; margin-bottom: var(--cred-icon-gap); }
.cred:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.cred:nth-last-child(-n+3) { border-bottom: 0; }
.cred__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1;
  color: var(--red); letter-spacing: .01em;
  font-variant-numeric: tabular-nums; text-transform: uppercase;
}
.cred__n--word { font-size: clamp(1.05rem, 1.9vw, 1.4rem); line-height: 1.12; }
/* Values differ in size (8 vs 100% vs "Built On"), so give the figure row a
   common height — otherwise the labels beneath sit at different heights. */
.cred__n { min-height: clamp(1.5rem, 3vw, 2.15rem); display: flex; align-items: flex-end; gap: .5rem; }
.cred__l {
  font-family: var(--font-display); font-weight: 600;
  font-size: .8125rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-on-light); margin-top: .35rem; line-height: 1.25;
}

/* ---- About: values row (six values plus the handbook card) ---- */
.values { background: var(--paper); padding-block: var(--section-y); border-top: 1px solid var(--paper-3); }
.values__row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.6fr);
  gap: 0;
  align-items: stretch;
}
/* Seven columns are narrow — tighten the label so "Accountability" and
   "Continuous Improvement" fit without hyphenating. */
.values__row .feature { border-left: 1px solid var(--paper-3); padding-inline: clamp(.5rem, 1vw, .9rem); }
.values__row .feature__title { font-size: .875rem; letter-spacing: .05em; }
.values__row .feature__text { font-size: .8rem; }
.values__row .feature:first-child { border-left: 0; }
.values__row .handbook { margin-left: clamp(.8rem, 1.6vw, 1.4rem); align-self: center; }

/* ==========================================================================
   News page
   ========================================================================== */
.news { background: var(--paper); padding-block: var(--section-y); }
/* Capped to the date column plus the body's 68ch measure — without this the
   card stretches to the full wrap on a wide screen while the text stops
   two-thirds of the way across, which reads as a layout bug. */
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; max-width: 56rem; }
.news-item {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 1.5rem;
  border: 1px solid var(--paper-3); border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  transition: border-color .18s var(--ease);
}
.news-item:hover { border-color: var(--red); }
.news-item time {
  font-family: "Barlow Condensed", var(--font-display);
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); padding-top: .35em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.news-item__body { min-width: 0; }
.news-item h3 { font-size: 1.25rem; color: var(--text-on-light); letter-spacing: .04em; }
/* Posts run from a one-line update to a full message, so the body is capped at
   a readable measure rather than stretching the width of the card. */
.news-item p {
  font-size: .9375rem; color: var(--text-on-light-mute);
  margin-top: .7rem; max-width: 68ch; line-height: 1.7;
}
.news-item p:first-of-type { margin-top: .5rem; }

/* Closing tagline, then the attribution under it. */
.news-item__signoff {
  font-family: "Barlow Condensed", var(--font-display);
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  font-size: 1.0625rem; color: var(--text-on-light);
  margin-top: 1.4rem !important;
}
.news-item__byline {
  font-size: .875rem; font-style: italic;
  color: var(--text-on-light-mute); margin-top: .35rem !important;
}

.empty-state {
  border: 1px dashed var(--paper-3); border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem); text-align: center;
}
.empty-state svg { color: #b9bec3; margin: 0 auto 1rem; }
.empty-state h2 { font-size: 1.35rem; color: var(--text-on-light); margin-bottom: .5rem; }
.empty-state p { color: var(--text-on-light-mute); max-width: 46ch; margin-inline: auto; }

/* ==========================================================================
   Long-form text (privacy policy and any page like it)
   ========================================================================== */
.prose { background: var(--paper); padding-block: var(--section-y); }
.prose__inner { max-width: 68ch; }
.prose h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); color: var(--text-on-light); }
.prose .updated {
  font-family: "Barlow Condensed", var(--font-display);
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-on-light-mute); margin-top: .7rem;
}
.prose h2 {
  font-size: 1.3rem; color: var(--text-on-light);
  margin-top: 2.25rem; margin-bottom: .6rem;
  padding-top: 1.25rem; border-top: 1px solid var(--paper-3);
  letter-spacing: .06em;
}
.prose p, .prose ul { color: var(--text-on-light-mute); margin-bottom: 1rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }
.prose li::marker { color: var(--red); }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text-on-light); font-weight: 600; }

/* ==========================================================================
   Services page
   ========================================================================== */
/* Rule between blocks only. :first-of-type would count .section-head as the
   first div child and so never match a .service-block. */
.service-block + .service-block { border-top: 1px solid var(--paper-3); }

.service-block__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
/* Alternate the image side so the page doesn't read as a list of identical rows */
.service-block:nth-of-type(odd) .service-block__media { order: 2; }

.service-block__media {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--ink-3);
}
/* 3:2 matches the photos, so nothing gets cropped out of frame. */
.service-block__media .card__media { aspect-ratio: 3 / 2; border-bottom: 0; }
.service-block__media .card__media svg { width: 64px; height: 64px; }

.service-block__head { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.service-block__head svg { color: var(--red); flex: 0 0 auto; }
.service-block h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); color: var(--text-on-light); }

.service-block > .service-block__inner > div > p { color: var(--text-on-light-mute); }

.service-points { list-style: none; margin: 1.1rem 0 1.3rem; padding: 0; display: grid; gap: .5rem; }
.service-points li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; }
.service-points svg { color: var(--red); flex: 0 0 auto; margin-top: .3rem; }

/* Scroll-margin so an anchored jump doesn't hide the heading behind the
   sticky header. */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* ==========================================================================
   Projects page
   ========================================================================== */
.filters {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.filter {
  font-family: var(--font-display); font-weight: 600;
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .55em 1.1em;
  background: var(--paper);
  color: var(--text-on-light);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.filter:hover { border-color: var(--red); color: var(--red); }
.filter[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }

.project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.5vw, 1.25rem); }
.project { position: relative; display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ink-3); }
.project .card__media { aspect-ratio: 4 / 3; border-bottom: 0; }
.project__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  padding: .8rem .9rem;
  background: linear-gradient(180deg, rgba(10,12,13,0) 0%, rgba(10,12,13,.9) 45%);
  color: #fff;
}
.project__name {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: .9375rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.15;
}
.project__loc {
  display: block; margin-top: .2rem;
  font-family: var(--font-body); font-size: .78rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: #c9ced3;
}
.project__label .arrow { color: var(--red-bright); flex: 0 0 auto; transition: transform .18s var(--ease); }
.project:hover .project__label .arrow { transform: translateX(4px); }
.project[hidden] { display: none; }

/* .btn sets display:inline-flex, which outranks the browser's own [hidden]
   rule — so a hidden button would otherwise stay on screen. */
.btn[hidden] { display: none; }

.projects-empty { color: var(--text-on-light-mute); padding: 2rem 0; }

/* ---- Work in progress ---- */
.upcoming { background: var(--paper-2); padding-block: var(--section-y); border-top: 1px solid var(--paper-3); }
.upcoming__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 1.5vw, 1.25rem); max-width: 760px; }
/* Not a link and not filterable — these are not finished work. */
.project--upcoming { cursor: default; }
.project--upcoming .card__media { aspect-ratio: 16 / 9; }
/* Sits over a photograph now, not a dark placeholder tile, so it needs its own
   ground — transparent red over a bright sky was unreadable. */
.card__tag--outline {
  background: var(--ink);
  border: 1px solid var(--red-on-dark);
  color: var(--red-on-dark);
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact { background: var(--paper); padding-block: var(--section-y); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
.contact__intro { color: var(--text-on-light-mute); margin-bottom: 1.6rem; max-width: 60ch; }
.contact h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.contact__head { border-bottom: 1px solid var(--paper-3); padding-bottom: .9rem; margin-bottom: 1.3rem; }

/* ---- Form ---- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.15rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: .8125rem; font-weight: 600; color: var(--text-on-light);
  letter-spacing: .01em;
}
.field .req { color: var(--red); margin-left: .15em; }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body); font-size: .9375rem; color: var(--text-on-light);
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius);
  padding: .65rem .8rem;
  width: 100%;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #9aa1a7; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(216, 31, 38, .14);
}
/* Only flag a field once the person has actually typed something wrong, or
   once a submit attempt has marked it. */
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid,
.field [aria-invalid="true"] { border-color: var(--red); }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(216, 31, 38, .18); }

.field__error {
  display: none;
  font-size: .8125rem; color: var(--red); font-weight: 500;
}
.field__error:not(:empty) { display: block; }

/* Summary shown above the button when a submit is blocked */
.form-error {
  display: none;
  margin-top: 1rem; padding: .8rem 1rem;
  border: 1px solid var(--red); border-left-width: 4px;
  border-radius: var(--radius);
  background: #fdeceb; color: #8d1219;
  font-size: .9375rem;
}
.form-error:not(:empty) { display: block; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6167' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 15px;
  padding-right: 2.2rem;
}

.char-count { font-size: .75rem; color: var(--text-on-light-mute); text-align: right; }

.field .consent { display: flex; align-items: flex-start; gap: .6rem;
  font-size: .8125rem; font-weight: 400; color: var(--text-on-light-mute); }
.consent input { width: 24px; height: 24px; flex: 0 0 auto; margin-top: .1rem; accent-color: var(--red); }
.consent a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

/* Spam honeypot — must stay hidden from people but reachable by bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-submit { margin-top: 1.3rem; }
.btn--lg { font-size: 1rem; padding: 1em 2em; }

/* ---- "Prefer to talk?" ---- */
.talk { margin-top: 2.25rem; border-top: 1px solid var(--paper-3); padding-top: 1.5rem; }
.talk__label {
  font-family: var(--font-display); font-weight: 600;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-on-light-mute); text-align: center; margin-bottom: 1.1rem;
}
.talk__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.5rem 1.25rem;
}
/* Icon above the text, centred — the same treatment as the safety principles.
   Side-by-side left the email address too wide for its column, which forced
   an uneven 2 + 1 wrap where "Business hours" sat alone on its own row. */
.talk__item {
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem; text-align: center;
}
.talk__item > div { min-width: 0; }
.talk__icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--paper-3); color: var(--red);
}
.talk__item .k { font-size: .75rem; color: var(--text-on-light-mute); }
.talk__item .v { font-size: .875rem; font-weight: 600; color: var(--text-on-light); }

/* ---- Locations panel ---- */
.locations {
  background: radial-gradient(120% 120% at 100% 0%, #2c1013 0%, #16191c 55%, #0f1113 100%);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  color: #fff;
}
.locations h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.locations__head { border-bottom: 1px solid #2c3136; padding-bottom: .8rem; margin-bottom: 1.2rem; }

.locations__list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1rem; }
.locations__list li { display: flex; gap: .7rem; align-items: flex-start; }
.locations__list svg { color: var(--red); flex: 0 0 auto; margin-top: .2rem; }
.loc-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
}
.loc-detail { font-size: .875rem; color: var(--text-on-dark-mute); margin-top: .15rem; }
.loc-detail a:hover { color: #fff; }

.locations__sub {
  font-family: var(--font-display); font-weight: 600;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: #b6bcc2; margin-bottom: .75rem;
}

.locations h3 {
  font-size: .9375rem; letter-spacing: .14em; color: var(--red-on-dark);
  margin: 1.75rem 0 .85rem;
}

.emergency {
  border-top: 1px solid #2c3136; margin-top: 1.75rem; padding-top: 1.5rem;
}
.emergency__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.emergency__head svg { color: var(--red); }
.emergency__head h3 { margin: 0; color: #fff; }
.emergency p { font-size: .875rem; color: var(--text-on-dark-mute); }
.emergency__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--red-bright);
  display: inline-block; margin: .5rem 0 .35rem; letter-spacing: .02em;
}

/* ---- Thank-you page ---- */
.thanks { background: var(--paper); padding-block: clamp(4rem, 9vw, 7rem); text-align: center; }
.thanks__icon {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 1.5rem;
  background: var(--red); color: #fff;
}
.thanks h1 { font-size: clamp(2rem, 4.5vw, 3rem); color: var(--text-on-light); }
.thanks p { margin: 1rem auto 0; max-width: 52ch; color: var(--text-on-light-mute); }
.thanks .btn { margin-top: 2rem; }

.notfound-links {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.75rem;
}
.notfound-links a {
  font-family: var(--font-display); font-weight: 600;
  font-size: .9375rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red);
  border-bottom: 2px solid transparent;
  transition: border-color .16s var(--ease);
}
.notfound-links a:hover { border-bottom-color: var(--red); }

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
/* Two columns, not three: with the brand spanning the top row, four link
   groups divide evenly in two. Three columns stranded "Follow us" on a row of
   its own and squeezed the email address into a mid-word break. */
@media (max-width: 1080px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }
  .footer__brand { grid-column: 1 / -1; }
}

/* The phone number is the first thing to go when the bar gets tight. */
@media (max-width: 1339px) {
  .header__phone { display: none; }
}

/* Below this the six nav items no longer fit beside the logo and CTA,
   so the whole nav collapses into the menu button. */
@media (max-width: 1100px) {
  :root { --header-h: 79px; }
  .brand img { height: 56px; }
  .site-header__inner { min-height: 78px; }

  .nav-toggle { display: block; }

  /* Slide-down panel; toggled by main.js via the [data-open] attribute */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--black);
    border-bottom: 1px solid #1c1f22;
    margin-inline: 0;
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.25rem; }
  .nav__link { padding: .8rem 0; border-bottom: 1px solid #1a1d20; font-size: 1.0625rem; }
  .nav__link:hover { border-bottom-color: #1a1d20; color: var(--red-bright); }

  /* Dropdown becomes an inline accordion inside the mobile panel */
  .nav__list .has-menu { display: grid; grid-template-columns: 1fr max-content; align-items: center; }
  .nav__list .has-menu > .nav__link { border-bottom: 0; }
  .submenu-toggle { padding: .8rem .25rem; border-bottom: 1px solid #1a1d20; }
  .submenu {
    grid-column: 1 / -1;
    position: static; min-width: 0; left: auto;
    border: 0; border-left: 2px solid var(--red); border-radius: 0;
    box-shadow: none; background: #0b0d0e;
    margin: 0 0 .5rem; padding: .25rem 0;
    display: none; opacity: 1; visibility: visible; transform: none;
  }
  .has-menu:hover > .submenu, .has-menu:focus-within > .submenu { display: none; }
  .submenu-toggle[aria-expanded="true"] + .submenu { display: block; }
  .submenu a { padding: .6rem 1rem; border-left: 0; }

  /* One row on mobile: logo — bid button — menu button.
     The nav panel is absolutely positioned so it never affects this row. */
  .site-header__inner { position: relative; flex-wrap: nowrap; gap: .6rem; }
  /* DOM order is brand → nav → actions → menu button, which is also the
     visual order — but .brand carries order:1, so anything left at the default
     order:0 would jump in front of it. Keep every item explicitly ordered. */
  .brand { order: 1; }
  .header__actions { order: 2; margin-left: auto; }
  .nav-toggle { order: 3; }
}

/* Dense multi-column grids thin out before the page layout stacks. A six-across
   row of cards is unreadable below roughly 1100px even though the two-column
   page layouts are still comfortable there. */
@media (max-width: 1100px) {
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
  .pillar:nth-child(3) { border-left: 0; }
  .pillar:nth-child(n+3) { border-top: 1px solid #23272b; }

  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card--wide { grid-column: span 2; }

  .section-head { grid-template-columns: 1fr; align-items: start; }

  .feature-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }

  .action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .certs__row { row-gap: 1.75rem; }
  .numbers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.75rem; }
  .number:nth-child(3n+1) { border-left: 0; }
  .markets__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The panel narrows faster than the photo does, so below this width the
     tagline would run into the tablet in his hands. Move it up under the
     heading, where the top-left of the panel is clear. */
  .portrait__lines { margin-top: 1.25rem; padding-top: 0; }

  /* Seven columns get too narrow to read below ~1100px: three values per row,
     handbook on its own line underneath. */
  .values__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
  .values__row .feature:nth-child(3n+1) { border-left: 0; }
  .values__row .handbook {
    grid-column: 1 / -1;
    margin-left: 0;
    margin-top: .5rem;
    max-width: 460px;
  }
}

/* Content layout stacks lower down, so 1024px tablets in landscape still get
   two-column layouts with a collapsed nav. */
@media (max-width: 960px) {
  /* Between 620 and 960 the copy column is a bigger share of the viewport, so
     a wash tuned at 1440 fades out before the lede's last line does — measured
     4.3:1 at 768px against a 4.5:1 minimum. Same wash, stops pushed outward. */
  .hero::after {
    background:
      linear-gradient(90deg, rgba(0,0,0,.54) 0%, rgba(0,0,0,.50) 40%, rgba(0,0,0,.20) 66%, rgba(0,0,0,0) 84%),
      linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.12) 38%, rgba(0,0,0,.28) 100%);
  }

  .commitment__grid { grid-template-columns: 1fr; }
  .handbook { max-width: 420px; }


  .apply__grid { grid-template-columns: minmax(0, 1fr); }
  .about__grid { grid-template-columns: minmax(0, 1fr); }
  .portrait { min-height: 360px; }
  .careers-main__grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .careers-main__title,
  .careers-main__list,
  .impact { grid-column: 1; grid-row: auto; }
  .impact { position: static; }
  .contact__grid { grid-template-columns: 1fr; }

  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-block__inner { grid-template-columns: 1fr; }
  .service-block:nth-child(even) .service-block__media { order: 0; }

  .about__lead { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* Keep logo + bid button + menu on one line on a 360-wide phone */
  :root { --header-h: 69px; }
  .brand img { height: 46px; }
  .header__actions .btn--sm { font-size: .75rem; padding: .55em .8em; letter-spacing: .06em; }
  .site-header__inner { min-height: 68px; }

  /* Taller on a phone, with the copy pushed to the lower half, so the shield
     mark at the top of the mobile crop is visible rather than sitting behind
     the headline. */
  .hero__inner {
    min-height: 520px;
    padding-block: 10.5rem 3rem;
    justify-content: flex-end;
  }
  /* Scrim sized by measurement, not by eye. White text needs its background
     below 0.183 relative luminance for 4.5:1. Sampling the 95th-percentile
     pixel behind the headline and lede in the actual mobile crop, a 0.20-0.30
     wash clears that comfortably; the old 0.80-0.88 was producing 17:1 and
     simply burying the photo. The sky, skyline and the crew stay bright. */
  .hero::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.12) 34%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.34) 100%);
  }

  /* The accent is white at every width now — see .hero h1 .accent above. */

  .pillars__grid { grid-template-columns: 1fr; }
  .pillar { border-left: 0; border-top: 1px solid #23272b; }
  .pillar:first-child { border-top: 0; }

  .card-grid { grid-template-columns: 1fr; }
  .card--wide { grid-column: span 1; flex-direction: column; }
  .card--wide .card__media { width: 100%; aspect-ratio: 16/10; border-right: 0; border-bottom: 1px solid var(--ink-3); }
  .card--wide .card__body { width: 100%; }

  /* Bigger tap targets on a phone — WCAG 2.2 wants 24px minimum, and these
     get used with work gloves on. */
  .footer ul { gap: .15rem; }
  .footer li > a,
  .footer__contact li > a,
  .notfound-links a,
  .talk__item .v a,
  .loc-detail a,
  .footer__bar a { display: inline-block; padding-block: .4rem; }

  /* Stack and centre the red call-to-action bands on a phone. Left-aligned
     with the icon floating above the text reads as a layout accident at
     this width. */
  .cta-band__inner,
  .resume-band__inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 1rem;
  }
  .cta-band__copy,
  .resume-band__copy { flex: 0 1 auto; }
  .cta-band__inner .btn,
  .resume-band__inner .btn { align-self: center; }


  .certs__row img { height: 48px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

  /* Interior pages */
  .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { border-left: 0; text-align: left; }
  .feature__icon { justify-content: flex-start; }
  /* Only on narrow screens: let a long word like "Responsibility" break
     rather than push the page sideways. On desktop it fits and breaking
     it mid-word looks wrong. */

  .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .number { border-left: 0; }

  .position { grid-template-columns: 1fr; }
  .position__link { grid-row: auto; grid-column: 1; margin-top: .3rem; }

  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .project-grid,
  .upcoming__grid { grid-template-columns: minmax(0, 1fr); }
  .markets__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values__row .feature { border-left: 0; }
  /* One column is too narrow for the handbook card — let it take the full
     row and sit centred under the values. */
  .values__row .handbook {
    grid-column: 1 / -1;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.25rem;
    width: 100%;
    max-width: 360px;
  }
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cred:nth-child(3n+1) { border-left: 1px solid var(--paper-3); padding-left: clamp(.6rem,1.4vw,1.1rem); }
  .cred:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .cred:nth-last-child(-n+3) { border-bottom: 1px solid var(--paper-3); }
  .cred:nth-last-child(-n+2) { border-bottom: 0; }
  .portrait__man { height: 80%; right: -4%; }
  .news-item { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .news-item p { grid-column: 1; }
}

/* Very small phones (320px): drop the header CTA — the hero's own
   "Request a Bid" button is immediately below it. */
@media (max-width: 380px) {
  :root { --gutter: .875rem; }
  /* Hiding the actions removes the margin-left:auto that was pushing the
     menu button across, so the button has to claim that space itself —
     otherwise it collapses against the logo. */
  .header__actions { display: none; }
  .nav-toggle { margin-left: auto; }
  :root { --header-h: 63px; }
  .brand img { height: 42px; }
  .site-header__inner { min-height: 62px; }
  .feature-row { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .numbers__grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
  .action-grid { grid-template-columns: minmax(0, 1fr); }
  .photo-strip { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .cta-band, .safety-ribbon, .nav-toggle { display: none; }
  body { color: #000; background: #fff; }
  .card, .pillars { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   Employment application page
   ========================================================================== */
.application {
  background: var(--ink);
  padding-block: var(--section-y);
  color: var(--text-on-dark);
}
.application__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}

.application__head { text-align: center; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.application__head h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  color: var(--text-on-dark);
  margin-bottom: .7rem;
}
.application__head p { color: var(--text-on-dark-mute); max-width: 62ch; margin-inline: auto; }

/* Section headings inside the form, with the rule from the mockup. */
.fieldset-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.0625rem; letter-spacing: .06em;
  color: var(--red-on-dark);
  margin: clamp(1.6rem, 3vw, 2.25rem) 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ink-3);
}
.fieldset-title:first-of-type { margin-top: 0; }
.fieldset-title__opt {
  font-size: .8125rem; letter-spacing: .04em;
  color: var(--text-on-dark-mute); text-transform: none;
}
.fieldset-note { font-size: .8125rem; color: var(--text-on-dark-mute); margin-bottom: .9rem; }

/* ---- Dark treatment for the shared form controls ---- */
.application .field label,
.application .choice legend { color: var(--text-on-dark); }
.application .field input,
.application .field select,
.application .field textarea {
  /* background-color, not the `background` shorthand: the shorthand would
     reset the select's no-repeat arrow into a tiled row of chevrons. */
  background-color: var(--ink-2);
  border-color: var(--ink-3);
  color: var(--text-on-dark);
}
.application .field input::placeholder,
.application .field textarea::placeholder { color: #8b939a; }
.application .field .req { color: var(--red-on-dark); }
.application .field__error { color: var(--red-on-dark); }
.application .field__hint { font-size: .75rem; color: var(--text-on-dark-mute); }
.application .char-count { color: var(--text-on-dark-mute); }
.application .field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b0b6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.application .form-error { background: #2a1113; color: #ffb3b6; border-color: var(--red-on-dark); }
.application .field .consent { color: var(--text-on-dark-mute); }
.application .consent a { color: var(--red-on-dark); }

/* ---- Radio and checkbox groups ---- */
.choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice legend {
  font-size: .8125rem; font-weight: 600; padding: 0; margin-bottom: .45rem;
}
.choice__row { display: flex; gap: 1.25rem; align-items: center; min-height: 44px; }
.choice__row--wrap { flex-wrap: wrap; gap: .6rem 1.1rem; }
/* 24px hit target, per WCAG 2.2 target size. */
/* These are <label>s inside .field, so they must out-specify `.field label`
   or the option text renders like a field label instead of muted option text. */
.field .radio, .field .check,
.application .field .radio, .application .field .check {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .875rem; font-weight: 400; color: var(--text-on-dark-mute);
  cursor: pointer; min-height: 24px;
}
.radio input, .check input {
  width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--red); cursor: pointer;
}
.radio input:focus-visible, .check input:focus-visible {
  outline: 2px solid var(--red-on-dark); outline-offset: 2px;
}

/* ---- Work experience blocks ---- */
.job {
  border: 1px solid var(--ink-3); border-radius: var(--radius);
  padding: 1rem clamp(.9rem, 2vw, 1.25rem) 1.25rem;
  margin-bottom: 1rem; min-width: 0;
}
.job__legend {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: .8125rem; letter-spacing: .08em; color: var(--text-on-dark);
  padding: 0 .5rem; margin-left: -.5rem;
}
.job__remove {
  margin-top: .9rem; font-size: .8125rem; color: var(--text-on-dark-mute);
  background: none; border: 0; padding: .35rem 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; min-height: 24px;
}
.job__remove:hover { color: var(--red-on-dark); }
/* .btn--outline is written for light sections — on this page it needs the
   dark-ground colours, or its label sits nearly invisible on the panel. */
.application .btn--outline {
  background: transparent;
  border-color: var(--ink-3);
  color: var(--text-on-dark);
}
.application .btn--outline:hover { border-color: var(--red-on-dark); color: var(--red-on-dark); }
.application [data-add-job] svg { margin-right: .4rem; }

/* ---- Resume upload ---- */
.file { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; cursor: pointer; }
.file input {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.file__btn {
  display: inline-block; padding: .6em 1.2em;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: .8125rem; letter-spacing: .06em;
  color: var(--text-on-dark); background: var(--ink-2);
  border: 1px solid var(--ink-3); border-radius: var(--radius);
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.file:hover .file__btn { border-color: var(--red-on-dark); color: var(--red-on-dark); }
/* :focus-within, not `input:focus-visible + .file__btn` — the button markup
   comes BEFORE the input, so an adjacent-sibling selector never matches and
   the control had no visible focus indicator at all. */
.file:focus-within .file__btn { outline: 2px solid var(--red-on-dark); outline-offset: 2px; }
.file__name { font-size: .8125rem; color: var(--text-on-dark-mute); }

.application__notice {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: .95rem 1.1rem;
  border: 1px solid var(--ink-3); border-left: 3px solid var(--red-on-dark);
  border-radius: var(--radius);
  background: var(--ink-2);
  font-size: .875rem; color: var(--text-on-dark-mute); line-height: 1.6;
  max-width: 88ch;
}
.application__notice strong { color: var(--text-on-dark); }

/* ---- Right rail ---- */
.application__side { display: grid; gap: 1rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.side-card {
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--radius); padding: 1.25rem clamp(1rem, 2vw, 1.4rem);
}
.side-card--alt { border-color: var(--red-dark); }
.side-card__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.side-card__head svg { color: var(--red-on-dark); flex: 0 0 auto; }
.side-card__head h2 { margin: 0; }
.side-card h2 {
  font-size: 1.125rem; color: var(--text-on-dark);
  margin-bottom: .7rem; letter-spacing: .03em;
}
.side-card p { font-size: .875rem; color: var(--text-on-dark-mute); line-height: 1.6; margin-bottom: .7rem; }
.side-card p:last-child { margin-bottom: 0; }
.side-card a:not(.btn) { color: var(--red-on-dark); text-decoration: underline; text-underline-offset: 2px; }
.side-card .btn { margin-top: .3rem; }

.offers { list-style: none; display: grid; gap: .75rem; }
.offers li {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: .875rem; letter-spacing: .05em; color: var(--text-on-dark);
}
.offers svg { color: var(--red-on-dark); flex: 0 0 auto; }

/* Announced by screen readers, invisible on screen. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The application page's own responsive rules live here rather than in the
   shared breakpoint blocks above, because its base rules are defined below
   them — a later rule of equal specificity would otherwise win and the
   layout would never stack. */
@media (max-width: 960px) {
  .application__grid { grid-template-columns: minmax(0, 1fr); }
  .application__side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .application__side { grid-template-columns: minmax(0, 1fr); }
  .fieldset-title { font-size: 1rem; }
  .choice__row { gap: 1rem; }
  .job { padding-inline: .8rem; }
}

/* On very large monitors a fixed 1680px wrap would leave four inches of empty
   space each side again, so let it grow a little further — capped, because
   body text past roughly 90 characters a line gets hard to track. */
@media (min-width: 2000px) {
  :root { --wrap: min(2100px, 86vw); }
}

/* ==========================================================================
   Featured projects strip (homepage)
   ========================================================================== */
.featured { background: var(--paper-2); padding-block: var(--section-y); }
.ptile-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.5rem, 1vw, .9rem);
}
.ptile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ptile img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .35s var(--ease);
}
.ptile__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: .15rem;
  padding: .6rem .75rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.7rem, 1vw, .8125rem); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-on-dark);
  /* A gradient rather than a flat bar, so the label stays readable whatever
     the photo does underneath it. */
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,0) 100%);
  padding-top: 1.6rem;
}
.ptile__label strong { font-size: clamp(.8rem, 1.1vw, .9375rem); font-weight: 600; }
.ptile__label { font-weight: 400; letter-spacing: .04em; }
.ptile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.ptile:hover img { transform: scale(1.05); }
.ptile:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

@media (max-width: 1100px) {
  .ptile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .ptile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .ptile-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Caption under the certification marks. Load-bearing: it is what distinguishes
   the accreditation and memberships Shield holds from the UL/FM listings that
   belong to the systems it installs. */
.certs__note {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  max-width: 78ch; text-align: center;
  font-size: .8125rem; line-height: 1.6;
  /* --paper-2 ground: needs the light-ground token, not the dark one. */
  color: var(--text-on-light-mute);
}