/* ============================================================
   SIGMA DEVELOPMENT LTD, Messer-inspired rebuild
   Built by Baha Connect.
   ------------------------------------------------------------
   Reference DNA (messer.com): full-bleed hero under a deep green
   overlay, two-tone display headline, sentence case bold grotesque
   headings, giant green stat numerals with lowercase labels, green
   uppercase kickers, orange underlined text links, drawer nav with
   a solid green CTA block, JOIN THE CONVERSATION footer band.
   Sigma keeps its own sampled brand green #0E8012 as the anchor.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;   /* 17 */
  --text-lg: 1.1875rem;     /* 19 */
  --text-xl: 1.375rem;      /* 22 */
  --text-2xl: 1.625rem;     /* 26 */
  --text-3xl: 2.125rem;     /* 34 */
  --text-4xl: 2.875rem;     /* 46 */
  --text-5xl: 3.75rem;      /* 60 */
  --text-6xl: 5.25rem;      /* 84 */

  --leading-none: 1.02;
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.65;
  --leading-relaxed: 1.75;

  /* Sigma brand green, sampled from the logo */
  --green-600: hsl(122 80% 28%);      /* #0E8012 anchor */
  --green-700: hsl(122 78% 22%);
  --green-800: hsl(122 70% 17%);
  /* Messer-style structural greens, re-tuned to Sigma's hue family */
  --green-deep: hsl(112 42% 20%);     /* overlays, dark sections */
  --green-deeper: hsl(114 45% 13%);
  --green-bright: hsl(100 52% 41%);   /* CTA blocks, headline highlight */
  --green-brighter: hsl(98 55% 48%);
  --green-100: hsl(115 45% 94%);
  --green-50: hsl(115 45% 97%);

  /* Charcoal drawer + inks */
  --char-900: hsl(0 0% 13%);
  --char-800: hsl(0 0% 18%);          /* drawer, matches Messer rgb(45,45,45) */
  --ink-900: hsl(150 8% 13%);
  --ink-700: hsl(150 6% 24%);

  --gray-50: hsl(140 12% 97%);
  --gray-100: hsl(140 9% 94%);
  --gray-200: hsl(140 7% 88%);
  --gray-300: hsl(140 5% 77%);
  --gray-400: hsl(140 4% 58%);
  --gray-500: hsl(145 5% 42%);
  --gray-600: hsl(148 6% 33%);

  --text-primary: var(--ink-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-400);

  --on-dark-primary: hsl(0 0% 100%);
  --on-dark-secondary: hsl(110 18% 84%);
  --on-dark-tertiary: hsl(110 12% 68%);

  /* Messer's orange text-link accent, darkened to pass AA on white */
  --orange: hsl(18 82% 39%);
  --orange-hover: hsl(18 85% 32%);

  --danger-500: hsl(4 66% 46%);
  --success-500: var(--green-600);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --section-y: var(--space-24);
  --container-max: 1200px;
  /* Shared left gutter: the hero copy and the header logo both align to it. */
  --hero-pad-x: clamp(var(--space-4), 3.2vw, 3rem);
  --content-max: 68ch;
  --gap-cards: var(--space-6);
  --card-padding: var(--space-6);
  --btn-x: var(--space-8);
  --btn-y: var(--space-4);
  --nav-h: 124px;

  --radius-img: 12px;
  --radius-btn: 3px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 4px hsl(150 30% 8% / 0.10);
  --shadow-md: 0 6px 18px hsl(150 30% 8% / 0.12);
  --shadow-lg: 0 16px 40px hsl(150 30% 8% / 0.16);
  --shadow-xl: 0 28px 70px hsl(150 30% 8% / 0.22);
  --shadow-inset: inset 0 2px 4px hsl(150 30% 8% / 0.05);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.18s; --dur: 0.3s; --dur-slow: 0.55s;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-padding-top: calc(var(--nav-h) + 1rem); }
body {
  margin: 0; font-family: var(--font-sans);
  font-size: var(--text-base); line-height: var(--leading-normal);
  color: var(--text-primary); background: #fff;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-sans); font-weight: 800;
  letter-spacing: -0.02em; line-height: var(--leading-tight);
  margin: 0; text-wrap: balance; color: var(--ink-900);
}
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--green-600); color: #fff; }
:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 3px; }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  background: var(--green-600); color: #fff;
  padding: var(--space-3) var(--space-6); z-index: 999;
  font-weight: 700; transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- 3. LAYOUT ---------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-6); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--space-16); }
.section--tint { background: var(--gray-50); }
.section--light { background: #fff; }
/* Dark sections keep their class name; the skin is now Messer deep green */
.section--navy { background: linear-gradient(150deg, var(--green-deep), var(--green-deeper)); color: var(--on-dark-primary); }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--grid-bg { background: var(--gray-50); }
.grid { display: grid; gap: var(--gap-cards); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.prose { max-width: var(--content-max); }
.prose p + p { margin-top: var(--space-5); }

/* ---------- 4. KICKERS (Messer style, no numbering, no rules) ---------- */
.eyebrow {
  display: inline-block;
  font-size: var(--text-sm); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green-600); margin-bottom: var(--space-4);
}
.eyebrow span { display: none; }
.section--navy .eyebrow, .page-hero .eyebrow, .hero .eyebrow { color: var(--green-brighter); }
.tick-rule { display: none; }

.section-head { margin-bottom: var(--space-12); }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, var(--text-4xl)); }
.section-head .lede { margin-top: var(--space-5); max-width: 62ch; font-size: var(--text-lg); color: var(--text-secondary); }
.section--navy .section-head .lede { color: var(--on-dark-secondary); }
.section-head--split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); align-items: end; }

h2, h3 { text-transform: none; }

/* ---------- 5. BUTTONS + LINKS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  font-size: var(--text-sm); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--btn-y) var(--btn-x);
  border: 2px solid transparent; border-radius: var(--radius-btn); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary { background: var(--green-600); color: #fff; border-color: var(--green-600); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-700); border-color: var(--green-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary { background: transparent; color: var(--ink-900); border-color: var(--gray-300); }
.btn-secondary:hover { border-color: var(--ink-900); background: var(--ink-900); color: #fff; transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(1px); }

/* Tint and border strengthened so the secondary CTA stays visible where it
   overlaps bright footage. Same shape and hierarchy as before. */
.btn-ghost-light { background: hsl(140 45% 10% / 0.42); color: #fff; border-color: hsl(0 0% 100% / 0.72); backdrop-filter: blur(6px); }
.btn-ghost-light:hover { background: #fff; border-color: #fff; color: var(--green-deep); transform: translateY(-2px); }

/* Messer's orange underlined text link */
.btn-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-base); font-weight: 700;
  color: var(--orange); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 2px;
  transition: color var(--dur-fast) var(--ease);
}
.btn-link:hover { color: var(--orange-hover); }
.btn-link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.btn-link:hover svg { transform: translateX(5px); }
.section--navy .btn-link { color: var(--green-brighter); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---------- 6. HEADER + DRAWER NAV (Messer pattern) ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--nav-h);
  display: flex; align-items: center;
  /* Opaque light bar. The green logo (#0E8012) measures 5.10:1 on white and
     only 2.84:1 on the old deep-green gradient, which failed AA. The bar also
     lifts the logo off the footage entirely, so rotation brightness cannot
     affect it. */
  background: hsl(0 0% 100% / 0.96);
  border-bottom: 1px solid hsl(114 16% 88%);
  backdrop-filter: blur(10px);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* The logo is pulled left out of the centred container and parked on the same
   gutter as the hero copy, so its first stroke lines up with the B of
   BUILDING rather than sitting on the old 1200px grid. At 1440px that is
   x144 -> x46. The 2.6px is the transparent padding baked into the PNG
   (9px of 900, at a rendered width of 260), taken off so the alignment is
   optical rather than box to box. Only the brand moves; the buttons on the
   right keep the container grid. */
.site-header .brand {
  margin-left: calc(
    var(--hero-pad-x)
    - 2.6px
    - var(--space-6)
    - (100vw - min(100vw, var(--container-max))) / 2
  );
}
/* A3. The scrolled state no longer changes size. The height jump
   (124px -> 88px) and the logo shrink (96px -> 64px) are both removed; the
   header stays at var(--nav-h) throughout. Kept: the background lift from
   0.96 to 0.98 and the shadow, which are the only cues that the page has
   scrolled and do not move anything. */
.site-header.scrolled {
  background: hsl(0 0% 100% / 0.98);
  border-bottom-color: hsl(114 16% 88%);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
/* On footage the green logo measures as low as 1.23:1, so the white lockup
   that the footer already uses is swapped in wherever the bar is transparent.
   Both lockups carry the same alt text; the hidden one is not announced. */
.brand__logo--light { display: none; }
body.hero-dark .site-header:not(.scrolled) .brand__logo--light { display: block; }
body.hero-dark .site-header:not(.scrolled) .brand__logo--dark { display: none; }
body.hero-dark .site-header:not(.scrolled) .brand img { filter: drop-shadow(0 1px 6px hsl(114 45% 8% / 0.45)); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.brand { display: flex; align-items: center; }
.brand img { height: 96px; width: auto; filter: drop-shadow(0 1px 6px hsl(114 45% 8% / 0.4)); }
/* The drop shadow exists to lift the white logo off dark photography. On the
   light header bar it reads as a grey smudge, so it is dropped there only.
   The footer logo keeps it. */
.site-header .brand img { filter: none; }

.nav { display: none; }
.nav-actions { display: flex; align-items: center; gap: var(--space-4); }
.nav-phone { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 700; color: #fff; text-shadow: 0 1px 4px hsl(114 45% 8% / 0.5); }
.nav-phone svg { width: 15px; height: 15px; color: var(--green-brighter); }
.nav-phone:hover { color: var(--green-brighter); }
.nav-actions .btn-primary { padding: var(--space-3) var(--space-6); }


/* Right-hand drawer, Messer's charcoal panel */
.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 190;
  width: min(430px, 100%);
  background: var(--char-800);
  padding: calc(var(--nav-h) + var(--space-6)) var(--space-8) var(--space-8);
  display: flex; flex-direction: column; gap: 0;
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
  overflow-y: auto;
  box-shadow: -20px 0 60px hsl(0 0% 0% / 0.35);
}
.mobile-menu.open { transform: translateX(0); visibility: visible; transition: transform var(--dur-slow) var(--ease); }
.mobile-menu a:not(.btn) {
  font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em;
  color: #fff; padding: var(--space-4) 0;
  border-bottom: 1px solid hsl(0 0% 100% / 0.09);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.mobile-menu a:not(.btn):hover { color: var(--green-brighter); padding-left: var(--space-2); }
.mobile-menu a[aria-current="page"] { color: var(--green-brighter); }
.mobile-menu .btn { margin-top: var(--space-6); }
body.menu-open { overflow: hidden; }

/* ---------- 7. HERO (deep green overlay, two-tone display) ---------- */
.hero { position: relative; min-height: min(94vh, 920px); display: flex; align-items: center; overflow: hidden; background: var(--green-deeper); }
.hero__media { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: -5% -2%;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s var(--ease);
  animation: kenburns 22s ease-out infinite alternate;
  will-change: transform, opacity;
}
.hero__slide.active { opacity: 1; }
/* Video slides carry their own motion, so no ken burns drift on them */
video.hero__slide {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  animation: none; will-change: opacity;
}
@keyframes kenburns {
  from { transform: scale(1.02); }
  to { transform: scale(1.11) translate3d(-1.2%, -0.8%, 0); }
}
/* ---- Hero overlay system ----------------------------------------------
   Three independent layers between the footage and the text. Nothing sets
   opacity on a parent that contains text, so the content stays at opacity 1.

     .hero__media          the rotating footage
     .hero::before         layer 1, subtle tint over the whole frame
     .hero__inner::before  layers 2 and 3, the Sigma green block and its
                           fade into the footage on the right
     .hero__inner          the text, z-index 2

   Layer 1 exists so the brightest frames in the rotation cannot blow out
   the parts of the hero that sit outside the green block. It is deliberately
   light, the footage stays clearly readable through it. */
/* Layer 1 is now the header gradient, defined in the navigation section. */

/* Layers 2 and 3. A single left-anchored architectural block in Sigma deep
   green, bleeding off the left edge of the viewport and fading out before
   the right so the property footage stays visible. No rounded corners, no
   card. It covers the headline, the lede, the CTA row and the meta row, so
   every piece of hero text sits on a predictable dark ground rather than on
   whatever frame happens to be playing. */
/* A1. The 82vw green block is REMOVED too. Readability is now handled by
   .hero__panel, a tight backdrop sized to the text block itself.
   Measured with nothing at all behind the text, worst frame per clip:
     slide 1  h1 6.13 PASS   accent 1.70 FAIL   lede 1.07 FAIL
     slide 2  h1 1.14 FAIL   accent 1.76 FAIL   lede 1.07 FAIL
   Five of six fail, so a backdrop of some kind is unavoidable. A text shadow
   alone cannot fix this: WCAG contrast is computed against the backdrop
   colour, and a shadow does not change it. */
.hero__inner::before { content: none; }

/* A2. The text sits closer to the left edge than before: the gutter was
   clamp(1.5rem, 5vw, 6rem), which put the copy at x144 originally and x72
   after the last pass. It is now x46 at 1440px, so more of the footage is
   visible to the right of the panel. */
.hero { --hero-pad: var(--hero-pad-x); }
.hero > .container { max-width: none; margin-inline: 0; padding-inline: var(--hero-pad); }

/* A1 fix (b). A tight backdrop behind the text block only, not spanning the
   frame. It bleeds off the left edge so it reads as an anchored panel rather
   than a floating card, and stops as soon as the copy stops. */
/* The green backdrop is REMOVED on request. Nothing sits behind the text now.
   Legibility falls to option (a) from the brief, a shadow on the text itself.
   Honest note, kept here so it is not lost: a text shadow does not change
   measured WCAG contrast, which is computed against the backdrop colour. On
   the brightest frames the lede still measures far below 4.5:1. This is a
   perceptual improvement, not a compliant one. */
.hero__panel {
  position: relative;
  width: min(56ch, 46vw);
  padding: 0;
  margin-left: 0;
  background: none;
}
/* A dark halo, built from a tight core shadow for edge definition plus two
   wider, softer passes that knock back bright footage immediately around the
   glyphs. Not a glow, and no box. */
.hero h1 {
  text-shadow:
    0 1px 2px hsl(140 60% 4% / 0.92),
    0 2px 10px hsl(140 60% 4% / 0.80),
    0 4px 30px hsl(140 60% 4% / 0.70);
}
.hero__lede, .hero__meta {
  text-shadow:
    0 1px 2px hsl(140 60% 4% / 0.95),
    0 1px 8px hsl(140 60% 4% / 0.85),
    0 2px 22px hsl(140 60% 4% / 0.75);
}
/* The ghost button loses the panel behind it too, so its own tint carries it. */
.hero .btn-ghost-light { background: hsl(140 45% 8% / 0.55); border-color: hsl(0 0% 100% / 0.8); }
.hero__panel > * { max-width: 100%; }
.hero h1 { max-width: 14ch; }
.hero__meta { max-width: 100%; }
@media (max-width: 1100px) { .hero__panel { width: min(56ch, 66vw); } }
@media (max-width: 900px)  { .hero__panel { width: min(56ch, 84vw); } }
@media (max-width: 620px)  {
  .hero__panel { width: calc(100% + var(--hero-pad) * 2); padding-right: var(--hero-pad); }
}
.hero__inner { position: relative; z-index: 2; padding-block: calc(var(--nav-h) + var(--space-16)) var(--space-20); }
.hero h1 {
  font-size: clamp(2.75rem, 7vw, var(--text-6xl));
  font-weight: 800; color: #fff; max-width: 14ch;
  text-transform: uppercase; letter-spacing: -0.015em;
  line-height: var(--leading-none);
}
/* Hero-only accent. The global brand green is untouched; --green-brighter
   still drives every other green accent on the site. Against the deep green
   block the standard value sat close to the background in hue and lightness,
   so the hero uses a slightly brighter, more saturated cut. */
.hero { --hero-accent: hsl(96 62% 58%); }
.hero h1 em { font-style: normal; color: var(--hero-accent); }
/* Solid near-white rather than white at reduced alpha, so the element itself
   stays at full opacity. */
.hero__lede { margin-top: var(--space-6); max-width: 52ch; font-size: var(--text-lg); color: #F5F7F5; line-height: var(--leading-relaxed); }
.hero__cta { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero__meta {
  /* Capped so the row wraps inside the green block instead of running past
     its fade onto raw footage. Its third item used to end around x1296 while
     the block ended at x1036, which measured 1.55:1 on a bright frame. */
  max-width: 46rem;
  margin-top: var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8);
  padding-top: var(--space-6); border-top: 1px solid hsl(0 0% 100% / 0.28);
  /* Was --on-dark-tertiary, a mid grey that disappeared on bright frames.
     This row was the worst readability problem in the hero. */
  font-size: var(--text-xs); color: hsl(0 0% 100% / 0.86);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.hero__meta strong { color: var(--hero-accent); font-weight: 800; }

/* The Sigma Way safety statement. Deliberately not a card: it is a full width
   deep green panel so it reads as a statement above the four pillars rather
   than a fifth one. Uses the same green as .section--navy. */
.safety-statement {
  background: linear-gradient(150deg, var(--green-deep), var(--green-deeper));
  color: var(--on-dark-primary);
  padding: var(--space-12) var(--space-12);
  margin-bottom: var(--space-12);
}
.safety-statement .eyebrow { color: var(--green-brighter); margin-bottom: var(--space-3); }
.safety-statement p {
  font-size: var(--text-xl); line-height: var(--leading-snug);
  color: hsl(0 0% 100% / 0.92); max-width: 68ch;
}
@media (max-width: 620px) {
  .safety-statement { padding: var(--space-8) var(--space-6); }
  .safety-statement p { font-size: var(--text-lg); }
}

.hero__controls { position: absolute; left: var(--space-6); bottom: var(--space-8); z-index: 3; display: flex; align-items: center; gap: var(--space-4); }
.hero__pause {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  border: 2px solid hsl(0 0% 100% / 0.55); background: hsl(114 45% 10% / 0.35);
  color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease);
}
.hero__pause:hover { background: #fff; color: var(--green-deep); border-color: #fff; }
.hero__pause svg { width: 16px; height: 16px; }
.hero__dots { display: flex; gap: var(--space-3); }
.hero__dots button { position: relative; width: 34px; height: 3px; padding: 0; border: none; cursor: pointer; background: hsl(0 0% 100% / 0.35); transition: background var(--dur) var(--ease); }
/* The visible dot stays a 34x3 bar. This only enlarges the hit area to the
   44px minimum, it paints nothing. */
.hero__dots button::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.hero__dots button.active { background: var(--green-brighter); }

/* Interior banner, same overlay language */
.page-hero { position: relative; padding: calc(var(--nav-h) + var(--space-20)) 0 var(--space-20); background: var(--green-deeper); overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to right, hsl(112 45% 12% / 0.9), hsl(108 40% 18% / 0.6)); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, var(--text-5xl)); color: #fff; max-width: 22ch; letter-spacing: -0.02em; }
.page-hero .lede { margin-top: var(--space-5); max-width: 58ch; color: hsl(0 0% 100% / 0.92); font-size: var(--text-lg); }
.crumbs { display: flex; gap: var(--space-2); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-tertiary); margin-bottom: var(--space-6); }
.crumbs a:hover { color: var(--green-brighter); }

/* ---------- 7b. HOME: intro, mission statement, heading scale ----------
   B5. The home page runs a larger heading ramp than the interior pages.
   Same single family (Inter) and the same weights already loaded, only the
   size step changes, so this adds no font:
       section h2   clamp(1.9rem, 3.6vw, 46px)  ->  clamp(2.4rem, 4.6vw, 60px)
       section h3   var(--text-xl) 22px         ->  var(--text-2xl) 26px
   Interior pages are untouched, they keep the existing scale. */
.home .section-head h2 { font-size: clamp(2.4rem, 4.6vw, var(--text-5xl)); letter-spacing: -0.02em; }
.home .section-head { margin-bottom: var(--space-16); }
.home .card__inner h3 { font-size: var(--text-2xl); }

/* Small print sitting under a section heading. */
.section-note { margin-top: var(--space-4); font-size: var(--text-sm); letter-spacing: 0.02em; color: var(--text-tertiary); max-width: 56ch; }

/* B1. Company description. Held to a reading measure so four paragraphs do
   not run the full container width. */
.company-intro { max-width: 74ch; }
.company-intro p { font-size: var(--text-lg); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.company-intro p + p { margin-top: var(--space-5); }
.company-intro__close { font-size: var(--text-xl); color: var(--text-primary); font-weight: 700; line-height: var(--leading-snug); }

/* PART D, emphasis reversed, applied to Our Mission ONLY for now.
   The label leads at section-heading size and the statement drops to
   supporting size beneath it. No new font family and no new scale step:
   the label takes the existing home h2 size, clamp(2.4rem, 4.6vw, 60px),
   and the statement takes --text-2xl, 26px, which is already on the scale.
   The label is also promoted from a div to an h2, since it is now the
   section heading in fact as well as in appearance. The page still has
   exactly one h1. */
.eyebrow--lead {
  display: block;
  font-size: clamp(2.4rem, 4.6vw, var(--text-5xl));
  line-height: var(--leading-none);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
  color: var(--green-600);
}

/* B3. The same reversal rolled out to the remaining sections. The label
   leads at display size and the heading that follows drops to 26px, which
   is an existing step on the scale, so no new font family is introduced.
   The label stays a div and the h2 stays the h2: the heading outline is
   unchanged and only the visual weighting is swapped. Several of these
   headings carried an inline font-size, which was removed so the class can
   take effect. Specificity is written up to clear `.home .section-head h2`. */
h2.heading--follow,
.section-head h2.heading--follow,
.home .section-head h2.heading--follow,
.section--navy h2.heading--follow {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: normal;
  line-height: var(--leading-snug);
}
.eyebrow--lead + .heading--follow { margin-top: 0; }
@media (max-width: 620px) {
  .eyebrow--lead { font-size: clamp(1.9rem, 7.4vw, var(--text-4xl)); }
}
.mission .mission__lead {
  margin-top: 0; max-width: 46ch;
  font-size: var(--text-2xl); font-weight: 600;
  line-height: var(--leading-snug); color: var(--text-primary);
}
.mission .mission__sub { margin-top: var(--space-5); font-size: var(--text-lg); }
@media (max-width: 620px) { .mission .mission__lead { font-size: var(--text-xl); } }

/* B2. Mission, treatment 1 of the two proposed: an editorial statement on a
   light ground against a green rule. */
.mission { padding-block: var(--space-20); }
.mission__inner { max-width: 60ch; border-left: 6px solid var(--green-600); padding-left: var(--space-8); }
.mission__lead {
  margin-top: var(--space-4); max-width: 24ch;
  font-size: clamp(1.9rem, 3.4vw, var(--text-4xl)); font-weight: 800;
  letter-spacing: -0.02em; line-height: var(--leading-snug); color: var(--text-primary);
}
.mission__sub { margin-top: var(--space-6); max-width: 48ch; font-size: var(--text-lg); color: var(--text-secondary); line-height: var(--leading-relaxed); }
@media (max-width: 620px) {
  .mission__inner { border-left-width: 4px; padding-left: var(--space-5); }
}

/* ---------- 8. POSITIONING BAND ---------- */
.positioning { background: linear-gradient(140deg, var(--green-deep), var(--green-deeper)); color: #fff; }
.positioning .container { padding-block: var(--space-16); display: grid; grid-template-columns: auto 1fr; gap: var(--space-12); align-items: center; }
.positioning p { font-size: clamp(1.4rem, 2.4vw, var(--text-3xl)); font-weight: 800; letter-spacing: -0.02em; line-height: var(--leading-snug); max-width: 28ch; }
.positioning .mark { width: 64px; height: 64px; border: 3px solid hsl(0 0% 100% / 0.45); border-radius: var(--radius-img); display: grid; place-items: center; }
.positioning .mark svg { width: 30px; height: 30px; }

/* ---------- 10. CARDS ---------- */
.card {
  position: relative; background: #fff;
  border: 1px solid var(--gray-200); border-radius: var(--radius-img);
  padding: var(--card-padding);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex; flex-direction: column; overflow: hidden;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card__icon {
  width: 54px; height: 54px; display: grid; place-items: center;
  background: var(--green-50); color: var(--green-700);
  border-radius: var(--radius-img); margin-bottom: var(--space-5);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card:hover .card__icon { background: var(--green-bright); color: #fff; }
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); letter-spacing: -0.015em; }
.card p { color: var(--text-secondary); }
.card .btn-link { margin-top: var(--space-5); font-size: var(--text-sm); }
.card__index { display: none; }

.card--photo { padding: 0; }
.card--photo .card__media { aspect-ratio: 16 / 10; background-size: cover; background-position: center; transition: transform var(--dur-slow) var(--ease); }
.card--photo:hover .card__media { transform: scale(1.05); }
.card--photo .card__inner { padding: var(--card-padding); display: flex; flex-direction: column; flex: 1; }

.feature-list li { display: flex; gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--gray-200); }
.section--navy .feature-list li { border-bottom-color: hsl(0 0% 100% / 0.14); }
.feature-list li:last-child { border-bottom: none; }
.feature-list svg { width: 20px; height: 20px; flex: none; color: var(--green-600); margin-top: 5px; }
.section--navy .feature-list svg { color: var(--green-brighter); }
.feature-list strong { display: block; font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.01em; }
.feature-list p { color: var(--text-secondary); font-size: var(--text-base); margin-top: var(--space-1); }
.section--navy .feature-list p { color: var(--on-dark-secondary); }

/* Strength cards: give the copy room so words do not stack one per line */
.strength-grid { gap: var(--space-5); }
.strength-grid .card { padding: var(--space-6); }
.strength-grid .card h3 { font-size: var(--text-lg); text-wrap: balance; hyphens: none; }
.strength-grid .card p { font-size: var(--text-base); line-height: 1.6; text-wrap: pretty; }
@media (max-width: 1100px) {
  .strength-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .strength-grid { grid-template-columns: 1fr; }
}

/* Inline site video: muted, looping, no controls. Behaves like moving photography. */
.video-frame { position: relative; overflow: hidden; border-radius: var(--radius-img); background: var(--green-deep); }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-frame--wide { aspect-ratio: 16 / 9; }
.video-caption { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); }

.segment-list { margin-top: var(--space-5); border-top: 1px solid var(--gray-200); padding-top: var(--space-2); }
.segment-list li { padding-block: var(--space-3); }
.segment-list strong { font-size: var(--text-base); font-weight: 700; }

/* ---------- 11. MEDIA ---------- */
.photo { position: relative; overflow: hidden; background: var(--green-deep); background-size: cover; background-position: center; border-radius: var(--radius-img); }
.photo--tall { aspect-ratio: 3 / 4; }
.photo--wide { aspect-ratio: 16 / 9; }
.photo--feature { aspect-ratio: 16 / 8; }
/* Square source assets (event graphics, flyers) fit a square box exactly,
   so they are neither cropped nor letterboxed. */
.photo--square { aspect-ratio: 1 / 1; }
/* Scanned documents (acceptance letters, certificates). These must never be
   cropped, so they sit contained on a paper-toned ground rather than filling
   the box the way photography does. */
/* Deliberately empty image slot, awaiting a client photo. A flat brand panel
   reads as intentional where an empty div would read as a broken image. */
.photo--placeholder {
  background: linear-gradient(150deg, var(--green-deep), var(--green-deeper));
  border: 1px solid hsl(0 0% 100% / 0.10);
}
.photo--doc {
  background-size: contain; background-repeat: no-repeat;
  background-color: var(--gray-100);
  border: 1px solid var(--gray-200);
}
/* Portrait phone video, shown at its own ratio instead of being letterboxed
   into a 16/9 slot. */
.video-portrait {
  width: 100%; aspect-ratio: 9 / 16; max-height: 620px;
  object-fit: cover; border-radius: var(--radius-img);
  background: var(--green-deeper); display: block;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.split--media-right .split__media { order: 2; }
.split__media { position: relative; }
.split__badge {
  position: absolute; right: calc(var(--space-6) * -1); bottom: var(--space-8);
  background: var(--green-600); color: #fff; padding: var(--space-6) var(--space-8);
  max-width: 250px; border-radius: var(--radius-img); box-shadow: var(--shadow-lg); z-index: 2;
}
.split__badge .n { font-size: var(--text-4xl); line-height: 1; font-weight: 800; }
.split__badge .t { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; margin-top: var(--space-2); font-weight: 700; }

/* ---------- 12. FEATURED PROJECT (Messer carousel look) ---------- */
.featured__photo { border-radius: var(--radius-img); overflow: hidden; }
.featured__photo .photo { border-radius: var(--radius-img); }
.featured__title {
  display: inline-block; margin-top: var(--space-8);
  font-size: clamp(1.8rem, 3.6vw, var(--text-4xl)); font-weight: 800;
  letter-spacing: -0.02em; color: var(--ink-900);
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px;
  transition: color var(--dur-fast) var(--ease);
}
.featured__title:hover { color: var(--green-700); }
.featured__meta { margin-top: var(--space-4); color: var(--text-secondary); display: flex; gap: var(--space-5); flex-wrap: wrap; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-12); }
.thumbs a { display: block; border-radius: var(--radius-img); overflow: hidden; position: relative; }
.thumbs .photo { aspect-ratio: 16 / 10; transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease); border-radius: var(--radius-img); }
.thumbs a:hover .photo { transform: scale(1.05); }
.thumbs .t-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4);
  background: linear-gradient(to top, hsl(114 45% 8% / 0.85), transparent);
  color: #fff; font-weight: 700; font-size: var(--text-sm); border-radius: 0 0 var(--radius-img) var(--radius-img);
}

/* ---------- 13. PROJECTS GRID ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-12); }
.filter {
  padding: var(--space-3) var(--space-6); background: transparent;
  border: 1px solid var(--gray-300); border-radius: var(--radius-btn);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary); cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.filter:hover { border-color: var(--green-600); color: var(--green-700); }
.filter.active { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }

.project-card { position: relative; display: block; overflow: hidden; border-radius: var(--radius-img); background: var(--green-deep); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.project-card__img, .project-card__scrim, .project-card__body { display: block; }
.project-card__img { aspect-ratio: 4 / 3; background-size: cover; background-position: center; transition: transform var(--dur-slow) var(--ease); }
.project-card:hover .project-card__img { transform: scale(1.06); }
.project-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, hsl(114 45% 8% / 0.92) 6%, hsl(112 42% 14% / 0.3) 52%, transparent 80%); }
.project-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6); }
.project-card__tag { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--green-600); padding: 5px var(--space-3); border-radius: 3px; margin-bottom: var(--space-3); }
.project-card h3 { color: #fff; font-size: var(--text-xl); letter-spacing: -0.01em; }
.project-card__meta { color: var(--on-dark-secondary); font-size: var(--text-sm); margin-top: var(--space-2); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.project-card.hide { display: none; }

/* ---------- 14. TIMELINE (light skin) ---------- */

/* ---------- 15b. ROLE LISTINGS ---------- */
.roles { border-top: 1px solid var(--gray-200); }
.role { border-bottom: 1px solid var(--gray-200); }
.role h3 { margin: 0; }
.role__toggle {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-6);
  padding: var(--space-6) 0; text-align: left; color: var(--ink-900);
  transition: color var(--dur-fast) var(--ease);
}
.role__toggle:hover { color: var(--green-700); }
.role__title { display: block; font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.01em; }
.role__meta { display: block; margin-top: 4px; font-size: var(--text-sm); font-weight: 400; color: var(--text-secondary); }
.role__toggle svg { width: 20px; height: 20px; flex: none; color: var(--green-600); transition: transform var(--dur) var(--ease); }
.role__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.role__panel { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); }
.role__inner { padding-bottom: var(--space-8); max-width: 68ch; }
.role__inner p { color: var(--text-secondary); }
.role__inner h4 { margin-top: var(--space-6); margin-bottom: var(--space-3); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--green-700); font-weight: 800; }
.role__list li { position: relative; padding-left: var(--space-6); margin-bottom: var(--space-2); color: var(--text-secondary); }
.role__list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); }
.role__inner .btn { margin-top: var(--space-8); }
.role__note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-tertiary); }

/* ---------- 16. FAQ ---------- */
.faq { border-top: 1px solid var(--gray-200); }
.faq__item { border-bottom: 1px solid var(--gray-200); }
.faq__q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-6);
  padding: var(--space-6) 0; text-align: left;
  font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink-900); transition: color var(--dur-fast) var(--ease);
}
.faq__q:hover { color: var(--green-700); }
.faq__q svg { width: 20px; height: 20px; flex: none; color: var(--green-600); transition: transform var(--dur) var(--ease); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); }
.faq__a p { padding-bottom: var(--space-6); color: var(--text-secondary); max-width: 72ch; }

/* ---------- 17. FORMS ---------- */
.form-card { background: #fff; padding: var(--space-12); border-radius: var(--radius-img); border-top: 4px solid var(--green-bright); box-shadow: var(--shadow-lg); }
.field { margin-bottom: var(--space-6); }
.field label { display: block; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-600); }
.field .req { color: var(--danger-500); }
.field input, .field select, .field textarea {
  width: 100%; padding: var(--space-4);
  font-family: var(--font-sans); font-size: var(--text-base);
  color: var(--ink-900); background: var(--gray-50);
  border: 1px solid var(--gray-300); border-radius: 6px;
  box-shadow: var(--shadow-inset);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gray-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff; border-color: var(--green-bright);
  box-shadow: 0 0 0 3px hsl(100 52% 41% / 0.2);
}
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: var(--danger-500); background: hsl(4 66% 98%); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.form-note { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: var(--space-4); }
.form-status { margin-top: var(--space-5); font-size: var(--text-sm); font-weight: 700; }
.form-status:empty { margin: 0; }
.form-status.ok { color: var(--green-700); }
.form-status.err { color: var(--danger-500); }

@media (max-width: 900px) {
  :root { --section-y: var(--space-20); --nav-h: 92px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split, .section-head--split, .contact-grid, .cta-band .container, .positioning .container { grid-template-columns: 1fr; gap: var(--space-12); }
  .positioning .container { gap: var(--space-6); }
  .split--media-right .split__media { order: 0; }
  .thumbs { grid-template-columns: 1fr; }
  .hero__meta { gap: var(--space-5); }
  .nav-phone { display: none; }
}
@media (max-width: 620px) {
  :root { --btn-x: var(--space-6); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .form-card { padding: var(--space-6); }
  .floaties { right: var(--space-4); bottom: var(--space-4); }
  .floatie { width: 52px; height: 52px; }
  .split__badge { position: static; max-width: none; margin-top: var(--space-4); }
  .brand img { height: 64px; }
  /* Logo drops to 64px here, so its baked in padding is 1.7px not 2.6px. */
  .site-header .brand { margin-left: calc(var(--hero-pad-x) - 1.7px - var(--space-6) - (100vw - min(100vw, var(--container-max))) / 2); }
  .nav-actions .btn-primary { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); }
  .hero__controls { left: var(--space-4); }
  .hero__meta { gap: var(--space-3); }
}

/* ---------- 18. CONTACT ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-16); align-items: start; }
.info-list li { display: flex; gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--gray-200); }
.info-list svg { width: 20px; height: 20px; color: var(--green-600); flex: none; margin-top: 4px; }
.info-list .k { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.info-list .v { font-size: var(--text-lg); font-weight: 700; color: var(--ink-900); }
.info-list a.v:hover { color: var(--green-700); }
.map-wrap { aspect-ratio: 16 / 9; background: var(--gray-200); border-radius: var(--radius-img); overflow: hidden; border: 1px solid var(--gray-200); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- 19. CTA BAND ---------- */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(140deg, var(--green-deep), var(--green-deeper)); }
.cta-band__bg, .cta-band__scrim { display: none; }
.cta-band .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: var(--space-12); align-items: center; }
.cta-band h2 { font-size: clamp(1.8rem, 3.2vw, var(--text-4xl)); color: #fff; max-width: 22ch; letter-spacing: -0.02em; }
.cta-band p { color: var(--on-dark-secondary); margin-top: var(--space-4); max-width: 52ch; }
.cta-band__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ---------- 20. FOOTER ---------- */
.site-footer { background: linear-gradient(160deg, var(--green-deep), var(--green-deeper) 70%); color: var(--on-dark-secondary); padding-block: var(--space-20) var(--space-8); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-12); }
.footer-grid img { height: 52px; width: auto; }
.site-footer h4 { font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-brighter); margin-bottom: var(--space-5); font-weight: 800; }
.site-footer li { margin-bottom: var(--space-3); font-size: var(--text-base); line-height: 1.55; }
.site-footer a:hover { color: #fff; }
.footer-about p { font-size: var(--text-base); line-height: 1.7; max-width: 44ch; margin-top: var(--space-5); color: hsl(0 0% 100% / 0.86); }
.footer-bottom { margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid hsl(0 0% 100% / 0.14); display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; font-size: var(--text-sm); color: var(--on-dark-tertiary); }
.footer-bottom a { color: var(--on-dark-secondary); }
.footer-bottom a:hover { color: #fff; }

/* ---------- 21. FLOATING ACTIONS ---------- */
.floaties { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 150; display: flex; flex-direction: column; gap: var(--space-3); }
.floatie { width: 56px; height: 56px; flex: none; border-radius: var(--radius-full); display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-lg); border: none; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.floatie:hover { transform: translateY(-4px) scale(1.05); box-shadow: var(--shadow-xl); }
.floatie:active { transform: translateY(0) scale(0.98); }
.floatie svg { width: 26px; height: 26px; flex: none; }
.floatie--wa { background: hsl(142 70% 40%); }
.floatie--call { background: var(--green-600); }
.floatie--top { background: var(--char-800); opacity: 0; pointer-events: none; }
.floatie--top.show { opacity: 1; pointer-events: auto; }

/* ---------- 22. MOTION ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal-right { opacity: 0; transform: translateX(36px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }
.reveal-group > *:nth-child(1) { transition-delay: 0s; }
.reveal-group > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-group > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-group > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-group > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-group > *:nth-child(6) { transition-delay: 0.40s; }
.parallax { will-change: transform; }

/* ---------- 23. RESPONSIVE ---------- */
@media (max-width: 1280px) {
  .reveal-left, .reveal-right { transform: translateY(28px); }
  .reveal-left.visible, .reveal-right.visible { transform: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split__badge { right: var(--space-4); }
}

/* ---------- 24. REDUCED MOTION + PRINT ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
}
/* ==========================================================================
   NAVIGATION, transparent header over the hero plus the slide out drawer
   ==========================================================================
   The header stays `position: fixed` rather than the `absolute` in the brief.
   Fixed is what the rest of the site is built around: --nav-h offsets, the
   .scrolled state, the skip link and the drawer all assume it. Visually at the
   top of the page the two are identical; fixed additionally keeps the bar
   available once you scroll, which is where the white state earns its keep.

   Transparent is scoped to `body.hero-dark`, which is every page except 404.
   404 sits on --gray-50, a light ground, where white nav would vanish. */

/* ---------- header shell ---------- */
.site-header .container { gap: var(--space-6); }

body.hero-dark .site-header:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

/* ---------- desktop links ---------- */
.nav-desk {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
}
@media (min-width: 981px) { .nav-desk { display: flex; } }

.nav-desk a {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 15px block padding + 20px line box = 50px, matching the buttons and
     clearing the 44px minimum without a visible box. */
  padding: 15px 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  transition: color 220ms var(--ease);
}
.nav-desk a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 10px;
  height: 2px; background: var(--green-brighter);
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease);
}
.nav-desk a:hover, .nav-desk a:focus-visible { color: var(--green-brighter); }
.nav-desk a:hover::after, .nav-desk a:focus-visible::after { transform: scaleX(1); }
.nav-desk a[aria-current="page"] { color: var(--green-brighter); }
.nav-desk a[aria-current="page"]::after { transform: scaleX(1); }

/* Scrolled, the white bar is back, so the links have to go dark. */
.site-header.scrolled .nav-desk a { color: var(--ink-900); }
.site-header.scrolled .nav-desk a:hover,
.site-header.scrolled .nav-desk a:focus-visible { color: var(--green-600); }
.site-header.scrolled .nav-desk a[aria-current="page"] { color: var(--green-600); }
.site-header.scrolled .nav-desk a::after { background: var(--green-600); }

/* ---------- outlined Contact Us ---------- */
.nav-actions { gap: 16px; }

.btn-outline-light {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 20px;
  border: 1px solid hsl(0 0% 100% / 0.72);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 220ms var(--ease), background-color 220ms var(--ease), color 220ms var(--ease);
}
.btn-outline-light:hover, .btn-outline-light:focus-visible {
  border-color: var(--green-brighter);
  background: hsl(98 55% 48% / 0.18);
  color: #fff;
}
.site-header.scrolled .btn-outline-light { border-color: hsl(114 16% 76%); color: var(--ink-900); }
.site-header.scrolled .btn-outline-light:hover,
.site-header.scrolled .btn-outline-light:focus-visible {
  border-color: var(--green-600);
  background: hsl(122 80% 28% / 0.10);
  color: var(--green-600);
}

/* ---------- circular menu button ---------- */
.menu-btn {
  display: grid; place-items: center;
  width: 50px; height: 50px; padding: 0;
  border: 1px solid hsl(0 0% 100% / 0.72);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color 220ms var(--ease), background-color 220ms var(--ease);
}
.menu-btn__bars { display: block; width: 20px; height: 14px; position: relative; }
.menu-btn__bars i {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: #fff; border-radius: 1px;
  transition: background-color 220ms var(--ease), transform 260ms var(--ease), opacity 180ms var(--ease);
}
.menu-btn__bars i:nth-child(1) { top: 0; }
.menu-btn__bars i:nth-child(2) { top: 6.25px; }
.menu-btn__bars i:nth-child(3) { top: 12.5px; }
.menu-btn:hover, .menu-btn:focus-visible { border-color: var(--green-brighter); background: hsl(98 55% 48% / 0.18); }
.menu-btn:hover .menu-btn__bars i, .menu-btn:focus-visible .menu-btn__bars i { background: var(--green-brighter); }
.site-header.scrolled .menu-btn { border-color: hsl(114 16% 76%); }
.site-header.scrolled .menu-btn__bars i { background: var(--ink-900); }
.site-header.scrolled .menu-btn:hover { border-color: var(--green-600); background: hsl(122 80% 28% / 0.10); }
.site-header.scrolled .menu-btn:hover .menu-btn__bars i { background: var(--green-600); }

/* ---------- hero gradients ----------
   Two passes, both black rather than green: one under the header so the logo
   and links stay readable, and a left to right one behind the copy. Neither
   is a bar; both fade out well before the right edge, so the last third of
   the frame is untouched footage.

   The brief's starting values (0.30 top, 0.52 at 30 percent) were measured
   and did not carry: nav links landed at 2.30:1 and the lede at 2.94:1
   against a 4.5 requirement, because the links sit on the right where the
   left gradient has already gone. These are the measured values that clear
   every threshold on the brightest frame of both clips. */
.hero::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; z-index: 1;
  /* Fades over 234px, so it reads as light falling off rather than a bar. */
  height: calc(var(--nav-h) + 110px);
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.36) 45%,
    rgba(0, 0, 0, 0.13) 75%,
    transparent 100%);
}
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.80) 0%,
    rgba(0, 0, 0, 0.70) 30%,
    rgba(0, 0, 0, 0.54) 48%,
    rgba(0, 0, 0, 0.10) 66%,
    transparent 82%);
}

/* ---------- overlay ---------- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 380;
  background: hsl(160 30% 3% / 0.55);
  opacity: 0; visibility: hidden;
  transition: opacity 300ms var(--ease), visibility 0s linear 300ms;
}
.drawer-overlay.open { opacity: 1; visibility: visible; transition: opacity 300ms var(--ease); }

/* ---------- drawer ---------- */
.mobile-menu {
  z-index: 400;
  width: clamp(360px, 30vw, 460px);
  background: rgba(10, 18, 22, 0.97);
  backdrop-filter: blur(12px);
  padding: var(--space-6) var(--space-8) var(--space-8);
  gap: 0;
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 350ms;
  box-shadow: -24px 0 70px hsl(0 0% 0% / 0.45);
}
.mobile-menu.open { transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1); }

.drawer__head { display: flex; justify-content: flex-end; margin-bottom: var(--space-5); }
.drawer__close {
  display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: #fff;
  transition: color 220ms var(--ease), transform 220ms var(--ease);
}
.drawer__close svg { width: 26px; height: 26px; }
.drawer__close:hover, .drawer__close:focus-visible { color: var(--green-brighter); }

/* Main links. Dividers, not boxes. */
.mobile-menu a.drawer__link {
  display: block;
  font-size: var(--text-xl); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: hsl(0 0% 100% / 0.88);
  padding: var(--space-4) 0;
  border-bottom: 1px solid hsl(0 0% 100% / 0.12);
  transition: color 220ms var(--ease), padding-left 220ms var(--ease);
}
.mobile-menu a.drawer__link:hover,
.mobile-menu a.drawer__link:focus-visible { color: var(--green-brighter); padding-left: var(--space-2); }
.mobile-menu a.drawer__link[aria-current="page"] { color: var(--green-brighter); }

/* Secondary pages. Kept so Industries, Safety & Quality and Careers are not
   orphaned by a four item main nav. Deliberately quieter. */
.drawer__more { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: var(--space-4) 0 0; }
.mobile-menu a.drawer__more-link {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: hsl(0 0% 100% / 0.55);
  /* min-width keeps short labels like HOME on a 44px target. */
  min-width: 44px;
  padding: var(--space-3) 0;
  transition: color 220ms var(--ease);
}
.mobile-menu a.drawer__more-link:hover,
.mobile-menu a.drawer__more-link:focus-visible { color: var(--green-brighter); }
.mobile-menu a.drawer__more-link[aria-current="page"] { color: var(--green-brighter); }

/* Get in touch */
.drawer__rule { height: 1px; background: var(--green-600); margin: var(--space-6) 0 var(--space-5); }
.drawer__h { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-brighter); margin-bottom: var(--space-4); }
.drawer__contact { display: grid; gap: var(--space-2); }
.mobile-menu a.drawer__row, .drawer__row {
  display: flex; align-items: flex-start; gap: var(--space-4);
  min-height: 44px; padding: var(--space-3) 0;
  font-size: var(--text-sm); font-weight: 500;
  color: hsl(0 0% 100% / 0.82);
  transition: color 220ms var(--ease);
}
.mobile-menu a.drawer__row:hover, .mobile-menu a.drawer__row:focus-visible { color: var(--green-brighter); }
.drawer__row svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #fff; transition: color 220ms var(--ease); }
.mobile-menu a.drawer__row:hover svg { color: var(--green-brighter); }

/* Social */
.drawer__social { display: flex; gap: var(--space-4); margin-top: var(--space-5); }
.mobile-menu a.drawer__social-link {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid hsl(0 0% 100% / 0.22); border-radius: 50%;
  color: #fff;
  transition: color 220ms var(--ease), border-color 220ms var(--ease), background-color 220ms var(--ease);
}
.drawer__social-link svg { width: 19px; height: 19px; }
.mobile-menu a.drawer__social-link:hover,
.mobile-menu a.drawer__social-link:focus-visible {
  color: var(--green-brighter); border-color: var(--green-brighter);
  background: hsl(98 55% 48% / 0.14);
}

/* Quote button */
.mobile-menu a.drawer__quote {
  display: flex; align-items: center; justify-content: center;
  margin-top: var(--space-6);
  min-height: 54px; padding: 0 var(--space-6);
  border: 1px solid var(--green-600); border-radius: 8px;
  background: transparent; color: #fff;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease);
}
.mobile-menu a.drawer__quote:hover,
.mobile-menu a.drawer__quote:focus-visible { background: var(--green-600); border-color: var(--green-600); color: #fff; }

/* Stagger, subtle. Rows lift a little as the panel lands. */
.mobile-menu .drawer__stagger > * { opacity: 0; transform: translateY(10px); }
.mobile-menu.open .drawer__stagger > * {
  opacity: 1; transform: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
  transition-delay: calc(120ms + var(--i, 0) * 45ms);
}

/* Focus states, visible on both grounds. */
.nav-desk a:focus-visible, .btn-outline-light:focus-visible, .menu-btn:focus-visible,
.drawer__close:focus-visible, .mobile-menu a:focus-visible {
  outline: 2px solid var(--green-brighter);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  /* Text links fold into the drawer, logo, Contact Us and the menu button
     stay on the bar. */
  .nav-desk { display: none; }
}
@media (max-width: 620px) {
  .mobile-menu { width: 88vw; max-width: none; padding: var(--space-6) var(--space-6) var(--space-10); }
  .btn-outline-light { height: 48px; padding: 0 14px; font-size: 11px; letter-spacing: 0.08em; }
  .menu-btn { width: 48px; height: 48px; }
  .nav-actions { gap: 10px; }
}
@media (max-width: 380px) {
  /* Below this the outlined button and the circle start to crowd the logo,
     so Contact Us moves into the drawer, where it is already the fourth
     main link. */
  .site-header .btn-outline-light { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .drawer-overlay, .mobile-menu .drawer__stagger > * { transition-duration: 1ms !important; }
  .mobile-menu .drawer__stagger > * { opacity: 1; transform: none; }
}

@media print {
  .site-header, .floaties, .mobile-menu, .cta-band { display: none; }
  body { background: #fff; }
}

/* ---------- 22. HOME PAGE, CONTENT RUNS TO THE EDGES ----------
   Supersedes the centred treatment that stood here. That version pulled every
   text block onto a single centred axis with auto side margins, so the home
   page read differently from the interior pages. This block returns it to the
   edge aligned rhythm the rest of the site already uses: headings sit on the
   left edge of the container, the supporting lede is pushed to the right edge,
   and two column sections stay two column instead of collapsing to one.

   The home page keeps its own larger heading ramp (section 7b) and its own
   mission treatment. Only the axis changes here, not the type scale.

   The hero is still left anchored and was never centred, so it is untouched.

   The narrow screen collapse is RE-STATED at the foot of this block. The
   collapse at max-width:900px earlier in the sheet is written as `.split`,
   0,1,0, while these rules are `.home .split`, 0,2,0. A media query adds no
   specificity of its own, so the home rules would win at every width and the
   page would stay two column down to 320px. That is the same trap already
   written up in section 23 for `.contact-grid`. */

.home .section-head,
.home .company-intro,
.home .safety-statement,
.home .mission__inner {
  text-align: left;
  margin-inline: 0;
}

/* The caps that held these to a centred reading measure are released so the
   copy runs the width of the container. `.company-intro` keeps a measure,
   because four consecutive paragraphs at full 1200px width are genuinely hard
   to read, but it is anchored left rather than centred. */
.home .section-head { max-width: none; }
.home .company-intro { max-width: 74ch; margin-inline: 0; }
.home .safety-statement { max-width: none; }
.home .safety-statement p { max-width: none; margin-inline: 0; }

/* Two column head: heading on the left edge, lede on the right. The lede
   keeps its reading measure but is pushed to the right edge of its column by
   the auto left margin, so the row is anchored at both edges rather than
   floating in the middle. */
.home .section-head--split {
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: end;
  justify-items: stretch;
  text-align: left;
}
.home .section-head--split .lede { margin-left: auto; }
.home .section-head .lede,
.home .section-note { margin-inline: 0; }

/* Mission returns to the green rule on the left edge. The short centred rule
   that replaced it is removed with the centred axis that called for it. */
.home .mission__inner {
  border-left: 6px solid var(--green-600);
  padding-left: var(--space-8);
  max-width: none;
}
.home .mission__inner::before { content: none; }
.home .mission__lead { max-width: 24ch; margin-inline: 0; }
.home .mission__sub { max-width: 48ch; margin-inline: 0; }
@media (max-width: 620px) {
  .home .mission__inner { border-left-width: 4px; padding-left: var(--space-5); }
}

/* Positioning band: mark and line side by side again. The band is not
   currently in any page, the rule is kept in step so it is correct if the
   band is ever restored. */
.home .positioning .container {
  grid-template-columns: auto 1fr;
  justify-items: stretch;
  text-align: left;
  gap: var(--space-12);
  align-items: center;
}
.home .positioning p { max-width: 28ch; }

/* Cards align their own text left. */
.home .card__inner { text-align: left; }
.home .card__inner .btn-link { justify-content: flex-start; }

/* Splits: photo at one edge, copy at the other, which is what the markup was
   written for. `--media-right` puts the photo on the right again; the centred
   version had forced it above the copy with order:-1. */
.home .split {
  grid-template-columns: 1fr 1fr;
  justify-items: stretch;
  text-align: left;
  gap: var(--space-16);
  align-items: center;
}
.home .split--media-right .split__media { order: 2; }
.home .split__media { width: auto; max-width: none; }
.home .split p,
.home .split h2,
.home .split .eyebrow { max-width: 60ch; margin-inline: 0; }

/* CTA band: copy on the left edge, buttons on the right. */
.home .cta-band .container {
  grid-template-columns: 1fr auto;
  justify-items: stretch;
  text-align: left;
  gap: var(--space-12);
  align-items: center;
}
.home .cta-band h2 { max-width: 22ch; margin-inline: 0; }
.home .cta-band p { max-width: 52ch; margin-inline: 0; }
.home .cta-band__actions { justify-content: flex-start; }

/* FAQ was already left aligned throughout; its trailing note now matches. */
.home .faq,
.home .faq__q,
.home .faq__a { text-align: left; }
.home .faq ~ p { text-align: left; }

/* Narrow screens: every grid this block widened folds back to one column.
   Written at .home specificity so it actually beats the rules above. */
@media (max-width: 900px) {
  .home .split,
  .home .section-head--split,
  .home .cta-band .container,
  .home .positioning .container {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .home .positioning .container { gap: var(--space-6); }
  .home .section-head--split .lede { margin-left: 0; }
  /* With one column the photo leads, as it did before. */
  .home .split--media-right .split__media { order: -1; }
}

/* ---------- 23. BUG FIX, CONTACT GRID NEVER COLLAPSED ---------- */
/* `.contact-grid` is declared at line 800, after the max-width:900px block at
   line 776 that is supposed to collapse it. Media queries add no specificity,
   so the later flat rule won at every width and the contact page stayed two
   column all the way down to 320px. The form card was rendering 209px wide
   and running off the right edge, clipped by `body { overflow-x: hidden }`.
   Re-stated here, at the end of the sheet, so the collapse actually applies. */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-12); }
}

/* ---------- 24. SITE MENU, PART B NAV REBUILD ---------- */
/* Replaces the full height drawer. Only the burger shows when closed; the
   menu is a short 5 row panel sized to its content, anchored near the right
   edge on a viewport proportional offset. Promoted from _prototype-nav.html
   after approval. The old .mobile-menu, .nav-desk and .nav-actions rules are
   left in the sheet but their markup no longer exists on any page. */
:root { --menu-edge: clamp(14px, 3.5vw, 44px); }

.site-header .container { display: flex; align-items: center; justify-content: space-between; }

.menu-toggle {
  position: relative; z-index: 420;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: transparent; cursor: pointer;
  border: 1px solid hsl(0 0% 100% / 0.55);
  border-radius: var(--radius-full);
  /* Pulled out of the centred 1200px container so the burger sits on the
     same --menu-edge as the fixed position menu. Without this it sat 404px
     from the right at 1920px while the menu sat at 44px. */
  margin-right: calc(var(--menu-edge) - var(--space-6)
                     - (100vw - min(100vw, var(--container-max))) / 2);
  transition: border-color var(--dur-fast) var(--ease);
}
.menu-toggle__bars { display: block; width: 22px; height: 14px; position: relative; }
.menu-toggle__bars i {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: #fff;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.menu-toggle__bars i:nth-child(1) { top: 0; }
.menu-toggle__bars i:nth-child(2) { top: 6px; }
.menu-toggle__bars i:nth-child(3) { top: 12px; }
.menu-toggle:hover { border-color: var(--green-brighter); }
.menu-toggle:hover i { background: var(--green-brighter); }
.menu-toggle:focus-visible { outline: 3px solid var(--green-brighter); outline-offset: 3px; }
.menu-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-header.scrolled .menu-toggle { border-color: hsl(0 0% 20% / 0.4); }
.site-header.scrolled .menu-toggle i { background: var(--char-800); }
/* 404 sits on a light ground and never gets the transparent header. */
body:not(.hero-dark) .menu-toggle { border-color: hsl(0 0% 20% / 0.4); }
body:not(.hero-dark) .menu-toggle i { background: var(--char-800); }

.site-menu {
  position: fixed; z-index: 410;
  top: calc(var(--nav-h) - 8px);
  right: var(--menu-edge);
  width: min(268px, calc(100vw - (var(--menu-edge) * 2)));
  background: rgba(16, 24, 20, 0.97);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  box-shadow: var(--shadow-xl);
  padding: var(--space-3);
  transform: translateX(calc(100% + var(--menu-edge) + 12px));
  opacity: 0; visibility: hidden;
  transition: transform 320ms var(--ease), opacity 220ms var(--ease), visibility 0s linear 320ms;
}
.site-menu.open {
  transform: none; opacity: 1; visibility: visible;
  transition: transform 320ms var(--ease), opacity 220ms var(--ease), visibility 0s;
}
.site-menu a {
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  color: #fff; text-decoration: none; text-align: right;
  font-size: var(--text-sm); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 9px;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.site-menu a:hover, .site-menu a:focus-visible { background: hsl(0 0% 100% / 0.08); color: var(--green-brighter); }
.site-menu a:focus-visible { outline: 3px solid var(--green-brighter); outline-offset: -3px; }
.site-menu a[aria-current="page"] { color: var(--green-brighter); }
.site-menu__rule { height: 1px; background: hsl(0 0% 100% / 0.14); margin: var(--space-2) var(--space-3); }
.site-menu__cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; margin-top: var(--space-1);
  background: var(--green-600); color: #fff; border-radius: 9px;
  text-decoration: none; font-size: var(--text-sm); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.site-menu__cta:hover { background: var(--green-700); }

@media (prefers-reduced-motion: reduce) {
  .site-menu, .site-menu.open { transition: none; transform: none; }
  .site-menu { opacity: 0; visibility: hidden; }
  .site-menu.open { opacity: 1; visibility: visible; }
  .menu-toggle__bars i { transition: none; }
}
@media (max-width: 620px) { .site-menu { top: calc(var(--nav-h) - 4px); } }

/* Merged-in page titles. Were h1 on their own pages, now h2 in a merged
   page-hero band that has lost its breadcrumbs. */
.page-hero h2.merged-title {
  font-size: clamp(2.1rem, 4.6vw, var(--text-5xl));
  color: #fff; max-width: 22ch; letter-spacing: -0.02em;
}

/* ---------- 25. BUG FIX, INVISIBLE CARD HEADINGS ---------- */
/* `.section--navy h2, h3, h4 { color: #fff }` was written for headings sitting
   directly on the dark green ground. `.card` is always `background: #fff`, so
   any card inside a navy section rendered its heading white on white:
   measured **1.00:1**, literally invisible. 12 headings were affected, 8 on
   the Careers block of contact.html and 4 in the process steps on
   services.html. The card body copy was unaffected, because `.card p` sets
   its own colour, which is why only the headings vanished.
   Pre existing, confirmed against the pre change backup. */
.section--navy .card h2,
.section--navy .card h3,
.section--navy .card h4 { color: var(--ink-900); }

/* ---------- 26. SLOT FIT, REVERTED TO THE ORIGINAL CROP ----------
   This section is deliberately empty of rules.

   Three treatments were tried here and all three were withdrawn: per
   photograph slot ratios, then uniform boxes with a blurred fill, then
   uniform boxes with a white fill. Each one guaranteed that no photograph
   was cropped, and each one was rejected on looks.

   The slots are back to the original behaviour, which is already set where
   it belongs: `background-size: cover` on `.photo` and `.card__media` at
   sections 10 and 11, `object-fit: cover` on the videos, the card hover
   zoom, and the hero parallax in main.js. Photographs fill their box edge to
   edge and are cropped to fit, which is what was wanted.

   The cost, accepted: a photograph whose shape is far from its slot loses
   real content. Measured against the current files, slot 20 loses 64 percent
   of the image, 17 loses 58 and 19 loses 53, with nine more between 20 and
   33 percent. `background-position` is `center` everywhere, so the crop
   takes equally from both edges. If a particular photograph crops badly on
   its subject, the fix is a per slot `background-position` here, or a
   recrop of the file itself, not a change of fit.

   Do not re add a `contain` rule without asking. It has been tried.
   ================================================================= */