/* Dobbie — build-v2 production
   Recruitment-first hierarchy. Direction E v4 DNA, tightened.
   Mono micro-labels, italic display moments, tighter type scale,
   real Active + ACE photography. Folds in specimen grid from Concept C
   and documentary photo-caption pattern.
   Built 2026-05-19. Spec: 2026-05-19-direction-e-review-and-optimise-design.md
   2026-05-23 brand realignment: palette + fallback type + logo + affiliations
   brought into compliance with J17370 r1.1. Audit in
   ../../../proposals/brand-realignment-audit.md.
   2026-08-14 Phase 1 visual system: type-scale tokens (--fs-*), spacing
   rhythm tokens (--space-*), one content-link idiom, italics H1-only,
   hero-editorial image crop to text block, measure cap (--measure).
*/

:root {
  --ink: #425563;         /* Brand Charcoal — J17370 r1.1 */
  --paper: #ffffff;
  --grey: #6A7785;        /* Light Grey web value darkened for WCAG AA text (4.57:1) — HB 2026-08-14; brand print value stays #8393A4 (J17370) */
  --rule: #425563;        /* Charcoal hairlines */
  --rule-soft: rgba(66, 85, 99, 0.12);
  --gold: #EAAA00;        /* Brand Yellow — J17370 r1.1 */
  --gold-dark: #d49b00;   /* Gold hover state */
  --success: #2e7c3a;
  --error: #b13a3a;
  --placeholder-bg: rgba(66, 85, 99, 0.07); /* Charcoal-derived — no out-of-palette neutrals (J17370) */
  --maxw: 1340px;
  --gutter: clamp(1.5rem, 4vw, 3.5rem);
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale — Phase 1 (HB approved 2026-08-14). Every font-size in this
     sheet maps to one of these tokens; no literal sizes below this block.
     Floor: --fs-mono 0.72rem ≈ 11.5px — nothing on the site renders smaller. */
  --fs-h1: clamp(3rem, 10vw, 9rem);            /* default h1 */
  --fs-h1-hero: clamp(2.6rem, 8vw, 6.6rem);    /* home cinematic hero h1 */
  --fs-h1-page: clamp(2.6rem, 7vw, 6rem);      /* inner-page h1 (hero-text / hero-editorial) */
  --fs-h2: clamp(1.7rem, 3.4vw, 2.8rem);       /* default section h2 */
  --fs-h2-lg: clamp(2rem, 4vw, 3.5rem);        /* feature-section h2 (inside, people) */
  --fs-h2-sm: clamp(1.6rem, 2.8vw, 2.4rem);    /* minor-section h2 (photogrid, specimen, footer CTA) */
  --fs-h2-xs: clamp(1.45rem, 2.4vw, 2rem);     /* utility h2 (toc header, legal sections) */
  --fs-h3: 1.1rem;                             /* card / item headline */
  --fs-stat: 2.5rem;                           /* stat-rail numeral — 40px, pinned below the h2 max (r1.3) */
  --fs-lede: clamp(1.05rem, 1.5vw, 1.3rem);    /* hero ledes, summary callouts */
  --fs-lede-lg: 1.35rem;                       /* .svc__lede — r1.2 sanctioned value */
  --fs-body: 17px;                             /* running copy */
  --fs-input: 1rem;                            /* form controls (MASTER input spec) */
  --fs-meta: 0.92rem;                          /* secondary copy, roles, index links */
  --fs-small: 0.88rem;                         /* small UI text, nav, help, consent */
  --fs-btn: 0.82rem;                           /* buttons (MASTER button spec) */
  --fs-mono-lg: 0.78rem;                       /* mono CTAs, status, filters */
  --fs-mono: 0.72rem;                          /* mono kickers, captions, labels — the floor */

  /* Spacing rhythm — Phase 1 (promoted from the MASTER workspace scale) */
  --space-xs: 0.4rem;                    /* tight gaps, item-internal padding */
  --space-sm: 0.7rem;                    /* form input padding, icon gaps */
  --space-md: 1.4rem;                    /* card padding, tile grids */
  --space-lg: 2.5rem;                    /* inner-grid gaps, utility-band padding */
  --space-xl: clamp(3rem, 5vw, 5.5rem);  /* uniform section vertical padding */

  /* Measure — running-text cap (TB review: About story column widened to this) */
  --measure: 75ch;
}
@media (max-width: 760px) {
  :root { --fs-h1-hero: clamp(2.4rem, 12vw, 3.8rem); }
}

/* Rawson webfonts */
@font-face { font-family: "Rawson"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Regular/Rawson-Regular.woff") format("woff"), url("../fonts/Regular/Rawson-Regular.ttf") format("truetype"); }
@font-face { font-family: "Rawson"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Medium/Rawson-Medium.woff") format("woff"), url("../fonts/Medium/Rawson-Medium.ttf") format("truetype"); }
@font-face { font-family: "Rawson"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Bold/Rawson-Bold.woff") format("woff"), url("../fonts/Bold/Rawson-Bold.ttf") format("truetype"); }
@font-face { font-family: "Rawson"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/RegularIT/Rawson-RegularIt.woff") format("woff"), url("../fonts/RegularIT/Rawson-RegularIt.ttf") format("truetype"); }
@font-face { font-family: "Rawson"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/MediumIT/Rawson-MediumIt.woff") format("woff"), url("../fonts/MediumIT/Rawson-MediumIt.ttf") format("truetype"); }
@font-face { font-family: "Rawson"; font-weight: 700; font-style: italic; font-display: swap; src: url("../fonts/BoldIT/Rawson-BoldIt.woff") format("woff"), url("../fonts/BoldIT/Rawson-BoldIt.ttf") format("truetype"); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: "Rawson", Verdana, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.55;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Typography */
h1, h2, h3 { letter-spacing: -0.035em; font-weight: 700; margin: 0; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.045em; line-height: 0.9; }
h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.015em; }
.em { font-weight: 700; }
/* Italic display RETIRED site-wide (HB 2026-08-22). Supersedes the r1.3
   "italics are H1-only" rule: the hero H1 em tail is gone too. Ruled after
   Scott Griffin's proofread posted six "itallics??" comments on six different
   pages in 52 minutes (S6/S10/S21/S22/S23/S25) — the H1 tail was the only
   italic common to all six. h1/h2/h3 ems and .em now render as their
   heading's plain weight and colour. .svc__lede is the sole survivor. */
h1 em, h2 em, h3 em, p em, .em { font-style: normal; }
.dot { display: inline-block; width: .12em; height: .12em; background: var(--gold); margin-bottom: .14em; vertical-align: bottom; border-radius: 50%; }

/* One content-link idiom (Phase 1): inline links in running copy keep the
   surface's text colour and carry a gold underline; hover thickens the
   underline — text never turns gold on white (accepted-gold-exception note).
   Standalone CTAs use .row__cta / the dark-surface CTA pattern.
   Nav, dropdown, and footer chrome keep their own component treatments. */
main p a:not([class]),
.legal__body a, .legal__list a,
.toc a, .legal__toc a,
.form__consent a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.15s ease;
}
main p a:not([class]):hover,
.legal__body a:hover, .legal__list a:hover,
.toc a:hover, .legal__toc a:hover,
.form__consent a:hover {
  text-decoration-thickness: 2px;
}

/* hover-zoom removed on non-linking figures per Lauren review 2026-08-13 (broken affordance); reinstate per-component only when the figure is a real link */

/* Mono micro-label — the engineering-document texture */
.mono {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 500;
}
.mono--ink { color: var(--ink); }
.mono--gold { color: var(--gold); }
.mono--paper { color: rgba(255, 255, 255, 0.75); }
/* Section kicker (eyebrow) emphasis: short gold lead-rule + heavier weight.
   Colour inherits from .mono / .mono--paper so it works on light and dark. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
}
.kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 1.6rem;
  height: 2px;
  background: var(--gold);
}

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav__in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 1.3rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
}
.nav__brand {
  text-decoration: none; color: var(--ink);
  display: flex; align-items: center;
  /* Brand mark: licensed Dobbie secondary logo (DE emblem + DOBBIE wordmark, no tagline).
     Clear space ≥ width of the E-emblem is preserved by the nav gutter. */
}
.nav__brand img {
  display: block;
  height: 36px;     /* ≈ 64mm wide at 96dpi — comfortably above the 15mm minimum for the no-tagline mark */
  width: auto;
}
.nav__links { display: flex; gap: 2rem; }
.nav__links a {
  font-size: var(--fs-small); color: var(--ink);
  text-decoration: none;
  position: relative; padding: 0.35rem 0; /* ≥24px target height — WCAG 2.5.8 */
  transition: color 0.2s ease;
}
.nav__links a:hover { color: var(--gold); }
.nav__links a[aria-current="page"] { color: var(--gold); }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; bottom: -3px;
  left: 0; right: 0; height: 1.5px; background: var(--gold);
}
.nav__menu-btn { display: none; cursor: pointer; padding: .4rem; background: none; border: 0; }
.nav__menu-btn svg { display: block; width: 24px; height: 24px; }
.nav__menu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 760px) {
  .nav__links {
    display: none; flex-direction: column;
    gap: 1rem; position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--paper);
    padding: 1.5rem var(--gutter);
    border-bottom: 1px solid var(--rule);
    z-index: 20;
  }
  .nav__menu-btn { display: block; }
  .nav__links--open { display: flex; }
}

/* Dropdown nav — disclosure pattern (Services / Industries submenus).
   Paper panel, 1px Charcoal hairline, square corners, no shadow. */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__sub-btn {
  cursor: pointer; background: none; border: 0; margin: 0;
  min-width: 24px; min-height: 24px; justify-content: center;
  padding: 0.45rem 0.25rem;
  color: var(--ink);
  display: flex; align-items: center;
  transition: color 0.2s ease;
}
.nav__sub-btn:hover { color: var(--gold); }
.nav__sub-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav__sub-btn svg { display: block; width: 12px; height: 12px; transition: transform 0.2s ease; }
.nav__sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__sub { display: none; }
.nav__sub a {
  display: block;
  font-size: var(--fs-small); color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0;
  transition: color 0.2s ease;
}
.nav__sub a:hover { color: var(--gold); }
@media (min-width: 761px) {
  /* Stretch chain makes the item bottom sit exactly 1.3rem (the .nav__in
     padding) above the nav hairline, so the panel lands on the hairline. */
  .nav__links { align-self: stretch; align-items: center; }
  .nav__item { align-self: stretch; }
  .nav__sub {
    position: absolute; top: calc(100% + 1.3rem); left: -1.1rem;
    display: block;
    min-width: 15rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 0.75rem 1.1rem;
    visibility: hidden; opacity: 0; transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .nav__sub::before { /* invisible bridge so hover survives the travel down into the panel */
    content: ""; position: absolute; left: 0; right: 0; top: -1.35rem; height: 1.35rem;
  }
  /* Grouped panel — D2-final (HB 2026-08-14): groups w/ gold-underlined headers,
     right-anchored so the panel can never overflow the viewport, CTA in the foot. */
  .nav__sub--grouped {
    display: flex; gap: 2.2rem;
    left: auto; right: -1.1rem;
    width: max-content; max-width: min(92vw, 58rem);
    padding: 1.1rem 1.4rem 1.2rem;
  }
  .nav__sub--grouped .nav__grp { display: flex; flex-direction: column; min-width: 15.5rem; }
  .nav__sub--grouped .nav__grp-h {
    margin: 0 0 0.5rem;
    font-family: var(--mono); font-size: var(--fs-mono); /* floor fix 2026-08-14 (legal-pass flag) */
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--ink); font-weight: 500;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 0.4rem;
  }
  .nav__sub--grouped a { white-space: nowrap; padding: 0.32rem 0; }
  .nav__sub-cta {
    flex-basis: 100%; margin-top: 0.9rem; padding-top: 0.8rem;
    border-top: 1px solid var(--rule-soft);
    display: flex; justify-content: flex-end;
  }
  .nav__sub--grouped .nav__sub-cta a {
    font-family: var(--mono); font-size: var(--fs-mono-lg);
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink); border-bottom: 1px solid var(--gold);
    padding: 0 0 3px; white-space: nowrap;
  }
  .nav__sub--grouped { flex-wrap: wrap; }
  .nav__item:not(.nav__item--closed):focus-within > .nav__sub,
  .nav__item--open > .nav__sub { visibility: visible; opacity: 1; transform: none; }
  @media (hover: hover) {
    .nav__item:not(.nav__item--closed):hover > .nav__sub { visibility: visible; opacity: 1; transform: none; }
  }
}
@media (max-width: 760px) {
  .nav__item { flex-wrap: wrap; column-gap: 0.3rem; }
  .nav__sub {
    flex-basis: 100%;
    margin: 0.7rem 0 0.3rem;
    padding: 0.1rem 0 0.1rem 1rem;
    border-left: 1px solid var(--rule-soft);
  }
  .nav__item--open > .nav__sub { display: block; }
  .nav__grp-h {
    margin: 0.55rem 0 0.15rem;
    font-family: var(--mono); font-size: var(--fs-mono); /* floor fix 2026-08-14 */
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--grey); font-weight: 500;
  }
  .nav__sub-cta { margin-top: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__sub { transition: none; transform: none; }
  .nav__sub-btn svg { transition: none; }
}

/* Hero — cinematic-people */
.hero {
  position: relative;
  /* Was a FIXED height (88svh, 620px floor). On a short, wide viewport the h1
     (9.5vw against a 16ch measure) wraps to more lines than that box can hold;
     the flex stack is bottom-anchored, so the excess overflows the TOP of this
     overflow:hidden container and the first line is cut off entirely.
     Reproduced 2026-08-22 at 1600x740, where the headline read "run, and keep
     running." with "Industrial plants that" invisible. Screenshots:
     review/2026-08-18-scott-proofread/REVERTED-hero-1600x740.png (broken) and
     FIXED-hero-1600x740.png (correct). Also bit at 1366x650.
     The height is now a MINIMUM, so the hero keeps its cinematic proportion
     wherever the content fits and grows only when it must. No design-system
     value changes: 88svh, the 620px floor, the type scale and h1 line-height
     0.9 are all as locked in MASTER.md r1.3. Grid so .hero__body still fills
     the height and stays anchored to the dark band at the bottom. */
  display: grid;
  min-height: max(620px, 88vh);
  min-height: max(620px, 88svh); /* svh avoids the mobile URL-bar jump; vh is the fallback */
  overflow: hidden;
  background: #425563; /* Brand Charcoal — visible only briefly during hero image load */
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.85) contrast(1.05);
}
/* Interim people-free pair (MASTER r1.8): B fades over A in step with the headline rotator */
.hero__img--a { object-position: 62% 42%; }
.hero__img--b { object-position: 50% 55%; opacity: 0; transition: opacity 0.6s ease; }
.hero__img--b.hero__img--shown { opacity: 1; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 30% 70%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
}
/* Subtle film-grain texture for atmosphere */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 2; pointer-events: none;
  mix-blend-mode: overlay; opacity: 0.6;
}
.hero__body {
  position: relative; z-index: 3;
  grid-area: 1 / 1;  /* fills the hero's min-height; height:100% no longer resolves
                        now the parent is auto-height, and is not needed */
  width: 100%;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter) var(--space-xl);
  display: flex; flex-direction: column;
  justify-content: flex-end; /* hero strips cut per design review 2026-08-14 (HB approved) — single child anchors to the dark band */
}
.hero__main h1 {
  color: var(--paper); max-width: 20ch;
  margin: 0 0 var(--space-md);
  font-size: var(--fs-h1-hero);
  text-shadow: 0 2px 30px rgba(0,0,0,0.3);
}

/* Headline rotator — crossfade between two variants */
/* Both variants share one grid cell, so the wrapper auto-sizes to the
   taller headline at any breakpoint — no height guessing, no overlap. */
.hero__headline {
  display: grid;
  margin: 0 0 var(--space-md);
  /* line-height 0.9 (locked) makes the line box shorter than the glyphs, so cap
     tops render above it. With .hero grown to fit, the headline otherwise lands
     flush on the overflow:hidden edge and the tops are shaved. 0.1em of leading
     compensation clears it and scales with the type instead of guessing px. */
  padding-top: 0.2em;
  font-size: var(--fs-h1-hero);
}
.hero__hl {
  grid-area: 1 / 1;       /* stack both in the same cell */
  margin: 0;
  color: var(--paper);
  max-width: 20ch;
  font-size: var(--fs-h1-hero);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.9;
  text-shadow: 0 2px 30px rgba(0,0,0,0.3);
  opacity: 1;
  transition: opacity 0.6s ease;
}
.hero__main h1.hero__hl { margin: 0; }
/* Rotator visibility is class-driven so the h1 is never aria-hidden to AT.
   B (.hero__hl--b) stays aria-hidden="true" permanently — decorative duplicate. */
.hero__hl--b { opacity: 0; pointer-events: none; }
.hero__hl--b.hero__hl--shown { opacity: 1; }
.hero__hl--a.hero__hl--faded { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__hl { transition: none; }
  .hero__hl--b, .hero__img--b { display: none; }
}

.hero__lede {
  font-size: var(--fs-lede);
  line-height: 1.4;
  max-width: 54ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
}
@media (max-width: 760px) {
  .hero { height: 78vh; height: 78svh; min-height: 540px; }
}

/* Open roles strip — primary above-fold content */
.openings {
  background: var(--ink);
  color: var(--paper);
  position: relative;
}
.openings::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold); /* full-width per TB review 2026-08-13 (was 30% gradient stop) */
}
.openings__in {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-xl);
  align-items: start;
}
.openings__lhs h2 {
  color: var(--paper); max-width: 14ch;
  margin: 1rem 0 var(--space-md);
}
.openings__lhs .openings__sub {
  font-size: var(--fs-body); line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 1.5rem;
  max-width: 30ch;
}
.openings__lhs a {
  color: var(--gold); text-decoration: none;
  font-family: var(--mono); font-size: var(--fs-mono-lg);
  text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(234, 170, 0, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.openings__lhs a:hover { border-bottom-color: var(--gold); }
.openings__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.openings__role {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border-top: 2px solid var(--gold);
  padding: var(--space-md);
  display: flex; flex-direction: column;
  gap: var(--space-xs);
  position: relative;
  transition: background 0.25s ease;
}
.openings__role:hover { background: rgba(255, 255, 255, 0.07); }
.openings__role .role__meta {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin: 0;
}
.openings__role h3 {
  color: var(--paper); margin: 0; font-size: var(--fs-h3);
  font-weight: 600; letter-spacing: -0.01em;
}
.openings__role .role__detail {
  font-size: var(--fs-meta); line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
  margin: 0.3rem 0 0.8rem;
}
.openings__role a {
  color: var(--gold); text-decoration: none;
  font-family: var(--mono); font-size: var(--fs-mono-lg);
  text-transform: uppercase; letter-spacing: 0.08em;
  align-self: flex-start; margin-top: auto;
  border-bottom: 1px solid rgba(234, 170, 0, 0.4);
  padding-bottom: 2px;
   padding-right: 1.2rem;
}
/* (removed the CSS ::after arrow — the arrow lives in the link text, and the
   stretched-link rule below repurposes ::after as the card-wide hit area) */
@media (max-width: 980px) {
  .openings__in { grid-template-columns: 1fr; }
  .openings__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) { .openings__grid { grid-template-columns: 1fr; } }

/* Inside Dobbie — leadership glimpse + culture row */
.inside {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  /* Hairline restored 2026-08-22 (Scott Griffin proofread S5, "missing divider
     line"). .inside was the only light-on-light section boundary on / without a
     border-top, sitting directly under an unbroken run of four .row sections
     that each carry one. Same token as .row so the run reads continuous. */
  border-top: 1px solid var(--rule);
}
.inside__top {
  display: grid;
  grid-template-columns: 1fr 2.4fr; /* the .row split, so the team heading shares the rows' left line (r1.12) */
  gap: var(--space-xl);
  align-items: start; /* kicker tops the block — the purpose line it used to align with moved under the hero (Phase 2) */
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--rule);
}
.inside__top h2 {
  margin: 0.8rem 0 1rem;
  font-size: var(--fs-h2-lg);
  max-width: 18ch;
}
.inside__top p {
  font-size: var(--fs-body); line-height: 1.5;
  max-width: 56ch; margin: 0;
  color: var(--ink);
}
.inside__top p strong { color: var(--ink); font-weight: 500; }
@media (max-width: 980px) {
  .inside__top { grid-template-columns: 1fr; align-items: start; gap: var(--space-md); }
}

.leadership {
  display: grid;
  /* All eight on one band, Option C (HB 2026-09-12, from Scott's comment p65nT6T8eEWN).
     Was repeat(4) = two rows. Tiles measure ~140px here, so the mono title line wraps
     to two lines on the longer roles; reserving both keeps every name on one baseline
     instead of stepping up and down across the row. */
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-md);
}
/* Photo, title and name each take a shared track, so every name sits on one
   baseline however many lines a title wraps to. A min-height guess cannot do
   this: at 134px the roles wrap to one, two and three lines. */
.leadership .lead {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
}
@media (max-width: 1100px) {
  .leadership { grid-template-columns: repeat(4, 1fr); }
}
/* Whole role card is one click: the role link's hit area covers the card
   (.openings__role is already position: relative) */
.openings__role a[href*="careers/"]::after {
  content: ""; position: absolute; inset: 0;
}
.lead {
  margin: 0; position: relative;
}
.lead__img {
  overflow: hidden;
  margin: 0 0 1rem;
  background: var(--placeholder-bg);
  position: relative;
}
.lead__img img {
  width: 100%; aspect-ratio: 4/5;
  object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.lead__img::after {
  content: ""; position: absolute;
  inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.lead .mono { margin: 0 0 0.3rem; }
.lead h3 {
  font-size: var(--fs-h3); font-weight: 700;
  margin: 0 0 0.2rem;
  letter-spacing: -0.02em;
}
.lead .role {
  font-size: var(--fs-meta); color: var(--grey);
  margin: 0;
}
@media (max-width: 980px) {
  .leadership { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

/* Editorial row — secondary reader (client trust) */
.row {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: var(--space-xl);
  align-items: start;
}
.row__lhs { display: flex; flex-direction: column; gap: 0.6rem; }
/* Stat rail — C5 gold-rule spec, HB-picked + amended 2026-08-14 (two-seat review: Fable exploration, Codex adversarial pass).
   Hierarchy: gold rule + 40px numeral carry the display; kicker, date and note are ONE size, ONE colour, uniform weight. */
.row__topic {
  display: block;
  margin: 0;
  font-family: var(--mono);
  /* Promoted 2026-08-22 (HB, from the Articles page: the topic labels needed to be
     "a larger bolder heading type"). Was --fs-meta at weight 400, which read as a
     faint tag and was easy to skim past — on /articles it is the only thing
     distinguishing one article row from the next in the left column.
     Deliberately still mono and uppercase: this stays a KICKER carrying weight,
     not a heading. MASTER lists mono kickers as a design-system keyword, and the
     alternative treatment tested (Rawson display face, sentence case, 32px) turned
     it into a second heading competing with the h2 beside it.
     Reaches 40 instances across 14 pages — the four homepage topic bands, About's
     section labels, Careers, Awards, Projects and every legacy article. */
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.row__stat {
  display: inline-flex;
  align-items: baseline;
  font-family: "Rawson", sans-serif;
  font-size: var(--fs-stat); /* 40px — sits below the h2 max (44.8px), Codex finding 5 respected */
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
  margin: 0 0 0.5rem;
  position: relative;
  padding-top: 0.85rem;
}
@media (max-width: 340px) { .row__stat { font-size: 2rem; } }
.row__stat::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 2.6rem; height: 3px;
  background: var(--gold);
}
/* Option B, HB 2026-09-12 (design-system/careers-kicker-mockups/, from his and
   Scott's "needs a graphic redesign" on the Careers kickers). Every section
   kicker now opens with the same gold mark the stat rail uses, so a row without
   a number stops reading as a half-built column. Reaches the 22 rows that carry
   a kicker and no stat, across Careers, About, Articles, Projects and the
   legacy article pages.
   Where a stat DOES follow, it already draws this rule two lines below, so the
   kicker's copy is suppressed rather than stacked. :has() is the only way to
   look forward from the kicker to the stat; where it is unsupported the page
   shows both rules, which is untidy rather than broken. */
.row__topic { position: relative; padding-top: 0.85rem; }
.row__topic::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 2.6rem; height: 3px;
  background: var(--gold);
}
.row__lhs:has(.row__stat) .row__topic { padding-top: 0; }
.row__lhs:has(.row__stat) .row__topic::before { content: none; }
.row__stat small {
  margin-left: 0.18em;
  font-size: 0.5em;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.row__stat-lbl {
  display: block;
  max-width: 44ch;
  font-family: "Rawson", Verdana, sans-serif;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--ink);
}
.row__stat-lbl .row__stat-main { display: block; font-weight: 400; color: var(--ink); }
.row__stat-lbl .row__stat-note { display: block; margin-top: 0.05rem; font-weight: 400; color: var(--ink); }
.row h2 { margin: 0 0 1.3rem; max-width: 22ch; }
/* One-line variant (HB 2026-09-12, about.html story heading). The 22ch cap is
   what broke "From one man, to a thirty strong practice." over two lines; the
   column itself is wide enough to hold it above ~1200px. It still wraps below
   that, which no cap can prevent at this type size. */
.row h2.h2--oneline { max-width: 40ch; text-wrap: balance; }
.row p {
  font-size: var(--fs-body); line-height: 1.55;
  max-width: var(--measure); margin: 0 0 1em;
  color: var(--ink);
}
.row p:last-child { margin-bottom: 0; }
/* Values list, about.html. Bold-header list format is normally banned
   (brand-voice.md, MASTER anti-patterns); HB ruled an explicit exception
   2026-08-23 after seeing all three treatments. Scoped here only, and MUST
   NOT be reused elsewhere. See MASTER.md r1.7. */
.values-b {
  list-style: none; margin: 0 0 1em; padding: 0;
  max-width: var(--measure);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.values-b li { font-size: var(--fs-body); line-height: 1.45; color: var(--ink); }
.values-b strong { font-weight: 700; }
.row__cta {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  margin-top: 0.6rem;
  color: var(--ink); text-decoration: none;
  font-family: var(--mono); font-size: var(--fs-mono-lg);
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  transition: gap 0.2s;
}
.row__cta:hover { gap: 0.8rem; }
@media (max-width: 980px) { .row { grid-template-columns: 1fr; } }

/* Selected work — 3-tile preview */
.work-preview {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  border-top: 1px solid var(--rule);
}
.work-preview__hdr {
  display: flex; justify-content: space-between; align-items: end;
  gap: 2rem; margin: 0 0 var(--space-lg);
}
.work-preview__hdr h2 { max-width: 16ch; }
.work-preview__hdr a {
  color: var(--ink); text-decoration: none;
  font-family: var(--mono); font-size: var(--fs-mono-lg);
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px; white-space: nowrap;
}
@media (max-width: 760px) {
  .work-preview__hdr { flex-direction: column; align-items: flex-start; }
}

/* Homepage clients-first bands (Phase 2, HB decision 2, 2026-08-14) */
.purpose {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-lg) var(--gutter);
}
.purpose p {
  font-size: var(--fs-h2-xs); font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); max-width: 32ch; margin: 0;
}
.proof {
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.proof__in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0.85rem var(--gutter);
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grey);
}

/* Footer — V3-T3 (HB confirmed 2026-08-15): B chassis, Explore column, role-tile
   links (Contact + Search with magnifier, no sub-lines), gold column headers with
   a gold rule. Gold mono on Charcoal follows the openings role__meta precedent. */
.ft {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--ink);
}
.ft__in {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter) var(--space-lg);
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: var(--space-lg);
}
.ft__cta h3 {
  color: var(--paper); font-size: var(--fs-h2-sm);
  font-weight: 700; letter-spacing: -0.03em;
  margin: 0 0 1.1rem; max-width: 14ch;
}
.ft__cta p {
  color: rgba(255, 255, 255, 0.7);
  max-width: 30ch;
  margin: 0 0 var(--space-md);
}
.ft__cta p a { color: rgba(255, 255, 255, 0.92); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.ft__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); max-width: 30rem; }
.ft__tile {
  background: rgba(255, 255, 255, 0.04);
  border-top: 2px solid var(--gold); /* the openings role-tile idiom */
  padding: var(--space-md);
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none;
  color: var(--paper);
  font-family: var(--mono); font-size: var(--fs-mono-lg);
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.25s ease;
}
.ft__tile:hover { background: rgba(255, 255, 255, 0.07); }
.ft__tile svg { width: 18px; height: 18px; flex: none; }
.ft__col h4 {
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); /* HB 2026-08-15: headers gold */
  margin: 0 0 0.9rem;
  font-weight: 500;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gold); /* HB 2026-08-15: the rule gold */
}
.ft__col p, .ft__col a {
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 0.25rem;
  font-size: var(--fs-meta);
  text-decoration: none;
  display: block;
  padding: 0.15rem 0; /* >=24px target height — WCAG 2.5.8 */
}
.ft__col a:hover { color: var(--gold); }
.ft__bar {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-md) var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--fs-mono); /* size floor — anti-slop item 5 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.ft__bar a { color: rgba(255, 255, 255, 0.85); text-decoration: none; padding: 0.15rem 0; }
.ft__bar a:hover { color: var(--gold); }
@media (max-width: 980px) {
  .ft__in { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .ft__cta { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .ft__in { grid-template-columns: 1fr; }
  .ft__tiles { grid-template-columns: 1fr; }
}


/* Credentials band (About; shipped 2026-08-15 from dir-c-r3-simplified, H2 pick).
   Charcoal band: one CREDENTIALS header region, then the registrations roster and
   the memberships ledger under gold-ruled rail labels. Gold mono credentials on
   charcoal sit inside the recorded gold-on-charcoal exception family (HB 2026-08-15). */
.cred-band { background: var(--ink); color: var(--paper); }
.cred-band--reg { padding: 0 0 var(--space-lg); }
.cred-band--assoc { padding: 0 0 var(--space-xl); }
.cred-head-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter) var(--space-lg);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.cred-h2 { color: var(--paper); margin: 0; max-width: 18ch; }
.cred-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 2.4fr;
  gap: var(--space-lg) var(--space-xl); align-items: start;
}
.cred-band--assoc .cred-in { border-top: 1px solid rgba(255,255,255,0.14); padding-top: var(--space-lg); }
.cred-hdr { display: flex; flex-direction: column; gap: 0.9rem; }
.cred-hdr .cred-grp-h { line-height: 1.6; }
.cred-note { margin: 0; font-size: var(--fs-meta); line-height: 1.5; color: rgba(255,255,255,0.75); max-width: 36ch; }
.cred-note a {
  color: rgba(255,255,255,0.92);
  text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-thickness 0.15s ease;
}
.cred-note a:hover { text-decoration-thickness: 2px; }
/* Roster panel: the openings role-tile idiom carrying the certified people */
.cred-roster {
  list-style: none; margin: 0;
  padding: 0.45rem var(--space-md);
  background: rgba(255,255,255,0.04);
  border-top: 2px solid var(--gold);
}
.cred-roster li {
  display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
  column-gap: var(--space-lg); row-gap: 0.3rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.cred-roster li:last-child { border-bottom: 0; }
.cred-name { color: var(--paper); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.25; }
.cred-creds {
  font-family: var(--mono); font-size: var(--fs-mono-lg);
  letter-spacing: 0.04em; font-weight: 500;
  line-height: 1.5;
  color: var(--gold);
}
/* Group headers: footer-column DNA, gold mono on a gold rule */
.cred-grp { margin: 0 0 var(--space-lg); }
.cred-grp:last-child { margin: 0; }
.cred-grp-h {
  margin: 0; padding-bottom: 0.5rem;
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
  border-bottom: 1px solid var(--gold);
}
/* Membership marks: wrapped strip of equal paper wells; marks never sit raw on
   charcoal and are never recoloured. Hover lifts a gold edge without layout shift. */
.cred-marks { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.cred-marks > li { flex: 1 1 118px; max-width: 190px; display: flex; }
.cred-chip {
  flex: 1 1 auto; min-height: 80px;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  padding: 10px 12px;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  transition: border-bottom-color 0.2s ease;
}
a.cred-chip:hover { border-bottom-color: var(--gold); }
a.cred-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cred-chip img { max-width: 104px; max-height: 34px; width: auto; height: auto; display: block; }
/* Dark chip for a mark that is only published white-on-dark (Site Safe, 2026-08-22).
   The chips are white tiles sitting on an already-dark .cred-band, so a dark tile
   reads as a deliberate variant rather than a broken one, and the logo is used
   exactly as its owner drew it. The alternative was recolouring 28 white paths to
   charcoal, which means altering a third party's two-colour mark — most brand
   guidelines forbid that. asme-white.svg is unused for the same reason and could
   take this treatment too if ASME should show a logo rather than a word. */
.cred-chip--dark {
  background: var(--ink);
  /* The band behind is also --ink, so without an edge the tile vanishes and the
     row reads as three tiles plus one floating logo. Hairline borrowed from the
     .cred-band--assoc divider idiom (rgba(255,255,255,0.14)) so the tile reads at
     the same weight as its white neighbours without introducing a new colour. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
/* Per-mark tuning so the strip reads even (affiliations-strip precedent) */
.cred-chip--sq img { max-width: 84px; max-height: 54px; }
.cred-chip--round img { max-width: 56px; max-height: 56px; }
.cred-chip--tight img { max-width: 96px; }
/* Text-only bodies: same well, name set as a mono nameplate */
.cred-chip--word {
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--ink); text-align: center; line-height: 1.35;
}
@media (max-width: 980px) {
  .cred-in { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cred-roster li { grid-template-columns: 1fr; row-gap: 0.25rem; }
  .cred-marks > li { max-width: none; }
}

/* Scroll reveals */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
/* No-JS + print guard — content is never blank without JavaScript (anti-slop item 7,
   HB 2026-08-14). site.js stamps .js on <html> as its first statement; until/unless
   that runs, reveals stay visible. Print always shows everything. */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__img { transform: none !important; }
  .lead__img img {
    transition: none;
  }
  .lead:hover .lead__img img,
  .sector__photo:hover img,
  .tile:hover .tile__img img,
  .specimen__cell:hover img {
    transform: none;
  }
}

/* =============================================================
   Inner-page components — added for build-v2
   ============================================================= */

/* Text-only hero (services, industries, work, contact) */
.hero-text {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xl);
  align-items: end;
  border-bottom: 1px solid var(--rule);
}
.hero-text__kicker { display: flex; flex-direction: column; gap: 0.6rem; }
.hero-text h1 {
  font-size: var(--fs-h1-page);
  max-width: 14ch; margin: 0;
}
.hero-text h1 em { font-style: normal; font-weight: 700; }
.hero-text p {
  font-size: var(--fs-lede);
  line-height: 1.45;
  max-width: 54ch;
  margin: 0;
  color: var(--ink);
}
/* Full-width heading variant — TB review: the industries heading section runs
   the full page width, and the contact hero spreads across the grid instead
   of sitting in the 5/7 split's right corner. */
.hero-text--full {
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-md);
}
.hero-text--full h1 { max-width: none; }
.hero-text--full p { max-width: var(--measure); }
@media (max-width: 980px) {
  .hero-text { grid-template-columns: 1fr; gap: var(--space-md); align-items: start; }
}

/* Hero-editorial (text + photo, for about / careers / services).
   The photo is constrained to the height of the text block — it crops via
   object-fit instead of dictating the row height (TB review p1/p6/p9). */
.hero-editorial {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  display: grid; grid-template-columns: 5fr 7fr;
  gap: var(--space-xl); align-items: stretch;
  border-bottom: 1px solid var(--rule);
}
.hero-editorial__title {
  display: flex; flex-direction: column; gap: 1rem;
  justify-content: center;
}

/* Careers hero: route readers to the live roles (Scott Griffin proofread S24 —
   "I suggest a SCROLL DOWN sign about here so people scroll to actual jobs").
   Two affordances, both anchored to #roles: a counted link that says what is
   below, and the scroll cue Scott asked for. The count is synced from the
   build_data-managed .role-count by site.js, so it never drifts. */
.hero-jump { margin: 0.4rem 0 0; }
.hero-jump a {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  font-family: var(--mono); font-size: var(--fs-mono-lg);
  letter-spacing: 0.04em; text-decoration: none;
  color: var(--ink); border-bottom: 2px solid var(--gold);
  padding-bottom: 0.18rem;
}
.hero-jump a:hover { border-bottom-width: 3px; }
.hero-jump__count { font-weight: 700; }
.hero-jump__arr { transition: transform 0.25s ease; }
.hero-jump a:hover .hero-jump__arr { transform: translateX(3px); }

.scroll-cue {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  margin-top: var(--space-md);
  text-decoration: none; color: var(--grey);
}
.scroll-cue__lbl {
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.scroll-cue__arr { width: 22px; height: 22px; animation: cue-bob 1.9s ease-in-out infinite; }
.scroll-cue:hover { color: var(--ink); }
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue__arr { animation: none; }
  .hero-jump__arr { transition: none; }
}
@media (max-width: 980px) {
  /* The fold is different on narrow screens and the roles band sits right
     under the hero, so the cue earns nothing here. The counted link stays. */
  .scroll-cue { display: none; }
}
.hero-editorial h1 {
  font-size: var(--fs-h1-page);
  margin: 0; max-width: 14ch;
}
/* Wide-text variant, about.html only (HB 2026-09-12, Option B of the heading
   mockup). The 5fr column could not hold "Run by engineers who still do the
   engineering." at 6rem: it broke over five lines with "the" alone on one.
   Flipping the split to 7/5 gives the heading its room at full size and costs
   the photograph width, which was the trade HB took. Careers and Services keep
   the 5/7 split; do not promote this to the base rule. */
.hero-editorial--wide { grid-template-columns: 7fr 5fr; }
.hero-editorial h1 em { font-style: normal; font-weight: 700; }
.hero-editorial__title p {
  font-size: var(--fs-lede); line-height: 1.5;
  max-width: 42ch; margin: 0;
}
.hero-editorial__photo {
  margin: 0;
  display: flex; flex-direction: column;
}
.hero-editorial__photo picture {
  flex: 1 1 0; min-height: 0;
  display: flex;
}
.hero-editorial__photo img {
  width: 100%; height: 100%; min-height: 0;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.96);
}
.hero-editorial__photo figcaption {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em; /* sentence case — anti-slop item 9 */
  color: var(--grey);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule-soft);
}
.hero-editorial__photo figcaption strong {
  color: var(--ink); font-weight: 600;
  font-family: "Rawson", sans-serif;
  font-size: var(--fs-meta);
  letter-spacing: -0.005em;
  text-transform: none;
}
@media (max-width: 980px) {
  .hero-editorial { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .hero-editorial__photo picture { flex: none; display: block; }
  .hero-editorial__photo img { height: auto; aspect-ratio: 4/3; }
}

/* TOC — services index */
.toc {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-lg) var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.toc__hdr {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem; align-items: baseline;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--rule-soft);
}
.toc__hdr h2 { font-size: var(--fs-h2-xs); margin: 0; }
.toc__hdr .mono { justify-self: end; }
.toc ol {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-lg);
  counter-reset: t;
}
.toc li {
  counter-increment: t;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--rule-soft);
  display: flex; align-items: baseline;
  gap: 0.8rem;
}
.toc li::before {
  content: counter(t, decimal-leading-zero);
  color: var(--grey); font-family: var(--mono);
  font-size: var(--fs-mono); /* size floor — was 0.68rem */
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  min-width: 2.2em;
}
.toc a {
  color: var(--ink);
  font-size: var(--fs-meta);
  flex: 1;
}
@media (max-width: 980px) { .toc ol { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .toc ol { grid-template-columns: 1fr; } }

/* Sector row (industries) */
.sector {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--space-xl);
  align-items: center;
}
.sector:nth-child(even) { grid-template-columns: 6fr 6fr; direction: rtl; }
.sector:nth-child(even) > * { direction: ltr; }
.sector__copy { display: flex; flex-direction: column; gap: 0.6rem; }
.sector__copy h2 { margin: 0.4rem 0 1rem; }
.sector__copy p {
  font-size: var(--fs-body); line-height: 1.55;
  max-width: 56ch; margin: 0 0 1em;
}
/* Services lede — the demoted tagline sitting under each service-name H2.
   Full Charcoal, no opacity (confirmed HB 2026-08-14). Scoped to out-rank
   .sector__copy p in the cascade. Sanctioned exception to italics-H1-only. */
.sector__copy .svc__lede {
  font-style: italic; font-weight: 700;
  font-size: var(--fs-lede-lg); line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0;
  color: var(--ink);
}
.sector[id] { scroll-margin-top: 96px; } /* anchor jumps land clear of the sticky nav */
.sector__photo { margin: 0; position: relative; overflow: hidden; }
.sector__photo img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.96);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sector__photo figcaption {
  margin-top: var(--space-sm);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: var(--fs-mono); /* size floor — anti-slop item 5 */
  letter-spacing: 0.04em; /* sentence case, tighter tracking — anti-slop item 9 */
  color: var(--grey);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--rule-soft);
}
.sector__photo figcaption strong { color: var(--ink); font-weight: 600; }
@media (max-width: 980px) {
  .sector, .sector:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
}

/* People — leadership + grid (about page).
   Header runs full width, heading on the left, no eyebrow (TB review p8). */
.people {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.people__hdr {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--rule);
}
.people__hdr h2 { max-width: 22ch; margin: 0 0 1rem; font-size: var(--fs-h2-lg); }
.people__hdr p { font-size: var(--fs-body); line-height: 1.5; max-width: 56ch; margin: 0; color: var(--ink); }

.people__lead {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
}
.people__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.tile { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.tile__img { overflow: hidden; margin: 0 0 0.8rem; }
.tile__img img {
  width: 100%; aspect-ratio: 4/5;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.96);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tile .mono { margin: 0 0 0.2rem; }
.tile h3 {
  font-size: var(--fs-h3); font-weight: 700;
  margin: 0;
  letter-spacing: -0.018em;
}
.tile .role {
  font-size: var(--fs-small); color: var(--grey);
  margin: 0;
}
.people__grid .tile__img img { aspect-ratio: 1/1; }
/* Portrait placeholder — no photo yet. Charcoal 7% ground, Rawson 700 initials
   in --grey. Square corners, no shadow (MASTER). Mirrors the img aspect rules:
   4/5 base, 1/1 inside .people__grid so tiles align with sibling photos. */
.lead__img--placeholder {
  aspect-ratio: 4/5;
  display: flex; align-items: center; justify-content: center;
}
.lead__img--placeholder span {
  font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.04em; color: var(--grey);
}
.tile__img--placeholder {
  aspect-ratio: 4/5;
  background: var(--placeholder-bg);
  display: flex; align-items: center; justify-content: center;
}
.people__grid .tile__img--placeholder { aspect-ratio: 1/1; }
.tile__img--placeholder span {
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.04em;
  color: var(--grey);
}
@media (max-width: 980px) {
  .people__lead, .people__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Offices split (contact) */
.offices {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
.office { display: flex; flex-direction: column; gap: 0.8rem; }
.office h2 { margin: 0.4rem 0 0.8rem; }
.office__addr p { margin: 0 0 0.3rem; }
.office__addr p strong { color: var(--ink); font-weight: 500; }
.office__map {
  margin-top: var(--space-md);
  width: 100%; aspect-ratio: 4/3;
  border: 0; display: block;
  filter: grayscale(0.1);
}
@media (max-width: 760px) { .offices { grid-template-columns: 1fr; } }

/* Bleed (services rhythm-break) */
.bleed {
  width: 100%; border-bottom: 1px solid var(--rule);
  margin: 0; padding: 0;
}
.bleed img {
  width: 100%;
  height: clamp(280px, 38vw, 520px);
  object-fit: cover;
  /* Crop biased to the top (Scott Griffin proofread S18, "picture layout needs
     correcting to show faces"). The box is far wider than the 3:2 source, so a
     default centre crop discards 46% of the image height at 1440px wide and
     ~59% at 1920px — cutting through the tops of both subjects' heads in the
     ACE Summit photo. Head tops sit at y≈84/1280 in that source, so the crop
     must start above that at every width: 12% gives top=70px at 1440 and
     top=91px at 1920. 20% clears 1440 but still cuts at 1920. Verified by
     render, not by eye. .bleed is used on about.html only. */
  object-position: center 12%;
  display: block;
}
.bleed figcaption {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-sm) var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em; /* sentence case — anti-slop item 9 */
  color: var(--grey);
  border-bottom: 1px solid var(--rule-soft);
}
.bleed figcaption strong {
  color: var(--ink); font-weight: 600;
  font-family: "Rawson", sans-serif;
  font-size: var(--fs-meta);
  letter-spacing: -0.005em;
  text-transform: none;
}

/* Photogrid (careers foot) */
.photogrid {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.photogrid__hdr { margin-bottom: var(--space-md); }
.photogrid__hdr .mono { margin-bottom: 0.4rem; }
.photogrid__hdr h2 { font-size: var(--fs-h2-sm); margin: 0; }
.photogrid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.photogrid__item { margin: 0; position: relative; overflow: hidden; }
.photogrid__item img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.96);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.photogrid__item figcaption {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: var(--fs-mono); /* size floor — anti-slop item 5 */
  letter-spacing: 0.04em; /* sentence case — anti-slop item 9 */
  color: var(--grey);
}
@media (max-width: 760px) { .photogrid__grid { grid-template-columns: 1fr; } }

/* Specimen grid (work page — from Concept C) */
.specimen {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.specimen__hdr { margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--rule-soft); }
.specimen__hdr .mono { margin-bottom: 0.5rem; }
.specimen__hdr h2 { font-size: var(--fs-h2-sm); margin: 0; }
.specimen__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
}
.specimen__cell { margin: 0; position: relative; overflow: hidden; background: #425563; } /* Brand Charcoal */
.specimen__cell img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.15) contrast(1.05);
  transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.specimen__cell:hover img { filter: grayscale(0) contrast(1.08); }
.specimen__cell figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.5rem 0.8rem;
  font-family: var(--mono);
  font-size: var(--fs-mono); /* size floor — anti-slop item 5 */
  letter-spacing: 0.04em; /* sentence case — anti-slop item 9 */
  color: var(--paper);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78));
  display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
}
.specimen__cell figcaption strong { color: var(--gold); font-weight: 600; }
.specimen__cell--xl { grid-column: span 8; grid-row: span 2; }
.specimen__cell--lg { grid-column: span 4; grid-row: span 2; }
.specimen__cell--md { grid-column: span 4; grid-row: span 1; }
.specimen__cell--sm { grid-column: span 3; grid-row: span 1; }
.specimen__cell--wide { grid-column: span 6; grid-row: span 1; }
/* On mobile the figcaption persists for touch */
@media (max-width: 760px) {
  .specimen__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .specimen__cell { grid-column: span 1 !important; grid-row: span 1 !important; }
  .specimen__cell--xl { grid-column: span 2 !important; grid-row: span 2 !important; }
  .specimen__cell figcaption { opacity: 1; }
}

/* Work-grid (alternative compact work view — kept for fallback / preview tiles) */
.work-grid {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.work-tile { margin: 0; display: flex; flex-direction: column; }
.work-tile a { text-decoration: none; color: inherit; display: contents; }
.work-tile__img { overflow: hidden; margin: 0 0 1rem; }
.work-tile__img img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.96);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-tile .mono { margin: 0 0 0.4rem; }
.work-tile h3 {
  font-size: var(--fs-h3); font-weight: 700;
  margin: 0 0 0.4rem;
  letter-spacing: -0.018em;
}
.work-tile p {
  font-size: var(--fs-meta); line-height: 1.5;
  color: var(--grey);
  margin: 0;
}
@media (max-width: 980px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .work-grid { grid-template-columns: 1fr; } }

/* =============================================================
   Enquiry form (contact page) — discipline-routed
   ============================================================= */
.enquiry {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-xl);
  align-items: start;
}
.enquiry__lhs h2 { margin: 0.4rem 0 1rem; max-width: 16ch; }
.enquiry__lhs p {
  font-size: var(--fs-body); line-height: 1.55;
  color: var(--ink);
  margin: 0 0 1rem;
  max-width: 36ch;
}
.enquiry__lhs .mono { display: block; margin-bottom: 0.6rem; }
.enquiry__lhs .alt {
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--fs-small); color: var(--grey);
}
/* The 36ch reading cap suits the prose above; on these two short contact lines
   at --fs-small it measured 290px and broke "Careers enquiries: careers@... (or
   use the careers page)" over three lines with ~190px of the column unused
   (HB 2026-09-12). The column itself is the limit here. */
.enquiry__lhs .alt p { max-width: none; }

.form { display: flex; flex-direction: column; gap: var(--space-md); }
.form__row { display: flex; flex-direction: column; gap: var(--space-xs); }
.form__row--double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.form__label {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.form__label span.req { color: var(--gold); font-weight: 700; margin-left: 0.2rem; }
.form__label span.opt { color: var(--grey); font-weight: 400; margin-left: 0.4rem; text-transform: none; letter-spacing: 0; font-size: 1em; } /* size floor ≥11.5px — anti-slop item 5, HB 2026-08-14 */
.form__input,
.form__select,
.form__textarea {
  font-family: "Rawson", sans-serif;
  font-size: var(--fs-input);
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--space-sm) 0.9rem;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.form__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23425563' stroke-width='1.5' stroke-linecap='square'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(234, 170, 0, 0.18);
}
.form__textarea { min-height: 140px; resize: vertical; font-family: "Rawson", sans-serif; }
.form__help {
  font-size: var(--fs-small);
  color: var(--grey);
  margin: 0;
  line-height: 1.4;
}
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.form__consent {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink);
  padding-top: var(--space-xs);
}
.form__consent input {
  margin-top: 0.25rem;
  accent-color: var(--gold);
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.form__consent label { cursor: pointer; }
.form__actions {
  display: flex; align-items: center;
  gap: var(--space-md); flex-wrap: wrap;
  padding-top: var(--space-xs);
}
.form__submit {
  font-family: var(--mono);
  font-size: var(--fs-btn);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  background: var(--gold);
  border: 0;
  padding: 0.95rem 1.6rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  border-radius: 0;
}
.form__submit:hover { background: var(--gold-dark); }
.form__submit:active { transform: translateY(1px); }
.form__submit:disabled { background: var(--grey); cursor: not-allowed; opacity: 0.7; }
.form__status {
  font-family: var(--mono);
  font-size: var(--fs-mono-lg);
  letter-spacing: 0.04em;
  color: var(--grey);
}
.form__status[data-state="success"] { color: var(--success); }
.form__status[data-state="error"] { color: var(--error); }
.form__status[data-state="sending"] { color: var(--ink); }

@media (max-width: 980px) {
  .enquiry { grid-template-columns: 1fr; gap: 2rem; }
  .form__row--double { grid-template-columns: 1fr; }
}

/* =============================================================
   Affiliations strip — sits just above the footer on every page.
   Carries the certification / membership marks the firm holds.
   Added 2026-05-23 with the brand realignment.
   2026-08-14: padding tightened to --space-lg and the footer's top margin
   removed (TB review p12 — reduce the strip-to-footer gap); per-mark heights
   tuned so the row reads visually even (TB xv).
   ============================================================= */
.affiliates {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-lg) var(--gutter);
  border-top: 1px solid var(--rule-soft);
  /* 2026-08-15 (HB): logos-only — label gone, the row carries every mark, centred. */
}
.affiliates__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3.5vw, 3rem);
  align-items: center;
  justify-content: center;
}
.affiliates__row img {
  height: 56px;
  width: auto;
  display: block;
  /* Affiliate marks are owned by each issuing body and ship in their own colour;
     no recolouring or filter applied — that would breach their respective brand rules. */
}
/* Per-mark height tuning: the marks have wildly different aspect ratios
   (Telarc diamond 1:2). One blanket height rendered a
   28px-wide sliver beside a 261px-wide banner. These values even the row. */
.affiliates__row img[src*="iso-9001"] { height: 68px; }
.affiliates__row img[src*="toitu"] { height: 62px; }
.affiliates__row img[src*="ace-nz-member"] { height: 58px; }
.affiliates__row img[src*="cep-nz"] { height: 48px; }
.affiliates__row img[src*="bioenergy"] { height: 44px; }
.affiliates__row img[src*="nzga"] { height: 46px; }
@media (max-width: 760px) {
  .affiliates__row { gap: var(--space-md); }
  .affiliates__row img { height: 44px; }
  .affiliates__row img[src*="iso-9001"] { height: 54px; }
  .affiliates__row img[src*="toitu"] { height: 48px; }
  .affiliates__row img[src*="ace-nz-member"] { height: 46px; }
  .affiliates__row img[src*="cep-nz"] { height: 38px; }
  .affiliates__row img[src*="bioenergy"] { height: 34px; }
  .affiliates__row img[src*="nzga"] { height: 36px; }
}

/* Careers benefits grid (D5, 2026-07-05) — same facts as the old prose, scannable.
   In-brand: hairline top rules, mono kickers, square corners, no shadows. */
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 2rem;
  margin-top: var(--space-md);
  border-top: 1px solid var(--rule);
}
.benefits__item {
  padding: 1.1rem 0 1.2rem;
  border-bottom: 1px solid var(--rule-soft);
}
.benefits__item .mono { display: block; margin-bottom: 0.4rem; }
.benefits__item h3 { margin: 0 0 0.35rem; font-size: var(--fs-h3); }
.benefits__item p { font-size: var(--fs-meta); line-height: 1.5; margin: 0; max-width: none; }
@media (max-width: 760px) { .benefits__grid { grid-template-columns: 1fr; } }

/* Gold dot at end of headings — auto-applied by site.js to h1/h2/h3 ending in "." */
.dot-end { color: var(--gold); }

/* =============================================================
   Skip-to-main accessibility link — hidden until keyboard focused
   ============================================================= */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-btn);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.1s;
}
.skip-link:focus { top: 0; }

/* Keyboard navigation focus ring — gold outline on all interactive elements */
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* =============================================================
   Legal / policy document — AI & Privacy page (added 2026-05-30)
   Long-form policy: dark-surface summary callout, sticky contents
   rail on desktop, constrained reading measure, print-clean.
   Strictly J17370 r1.1 — charcoal/grey/gold, flat, square, hairline.
   ============================================================= */

/* In-short summary — dark charcoal surface. Gold top stripe removed (anti-slop item 8,
   HB signed 2026-08-14): the stripe is reserved to the openings strip. */
.legal-summary { position: relative; background: var(--ink); color: var(--paper); }
.legal-summary__in {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-lg) var(--gutter);
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--space-lg); align-items: start;
}
.legal-summary__in .mono { margin-top: var(--space-xs); /* optical: aligns the mono cap-height with the lede first line */ }
.legal-summary__in p {
  margin: 0; max-width: var(--measure);
  font-size: var(--fs-lede);
  line-height: 1.5; color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 760px) {
  .legal-summary__in { grid-template-columns: 1fr; gap: var(--space-sm); }
}

/* Document grid — sticky contents rail + body */
.legal {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  display: grid; grid-template-columns: 220px 1fr;
  gap: var(--space-xl); align-items: start;
  border-bottom: 1px solid var(--rule);
}

/* Contents rail — plain links over hairline separators; the numbered
   counters (and the .legal__num section numbers) were removed per HB
   2026-08-14: headings and TOC labels stay, numbers go. */
.legal__toc {
  position: sticky; top: 96px; align-self: start;
  max-height: calc(100vh - 120px); overflow-y: auto; /* scroll guard — rail never overruns the viewport (Class-B 3, HB 2026-08-14) */
}
.legal__toc-hdr { display: block; padding-bottom: var(--space-sm); margin-bottom: var(--space-xs); border-bottom: 1px solid var(--rule); }
.legal__toc ol { list-style: none; margin: 0; padding: 0; }
.legal__toc li { padding: var(--space-xs) 0; border-bottom: 1px solid var(--rule-soft); }
.legal__toc a { color: var(--grey); font-size: var(--fs-meta); line-height: 1.3; } /* quiet rail (Class-B 1) */
.legal__toc a:hover { color: var(--ink); }
.legal__toc a[aria-current="location"] { color: var(--ink); font-weight: 700; } /* scroll-spy active section */
.legal__toc-toggle { display: none; }

/* Body */
.legal__body { max-width: var(--measure); }
.legal__sec { scroll-margin-top: 96px; padding: var(--space-lg) 0; border-top: 1px solid var(--rule-soft); }
.legal__sec:first-child { padding-top: 0; border-top: 0; }
.legal__sec h2 {
  font-size: var(--fs-h2-xs); line-height: 1.1;
  margin: 0 0 1rem;
}
.legal__body p { margin: 0 0 1rem; }
.legal__body p:last-child { margin-bottom: 0; }

/* Lists — gold dot markers, no bold-header pattern */
.legal__list { list-style: none; margin: 0 0 1rem; padding: 0; }
.legal__list li { position: relative; padding: 0 0 var(--space-sm) var(--space-md); }
.legal__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.34rem; height: 0.34rem; background: var(--gold); border-radius: 50%;
}

/* Highlighted cards — Privacy Officer + contact */
.legal__card {
  border: 1px solid var(--rule); padding: var(--space-md); margin: 0 0 1rem;
}
.legal__card .mono { display: block; margin-bottom: var(--space-sm); }
.legal__card p { margin: 0 0 0.25rem; }
.legal__card p:last-child { margin-bottom: 0; }
.legal__card-name { font-weight: 700; }

@media (max-width: 980px) {
  .legal { grid-template-columns: 1fr; gap: var(--space-lg); }
  .legal__toc { position: static; max-height: none; overflow: visible; border: 1px solid var(--rule); padding: var(--space-sm) var(--space-md); }
  /* Collapsible contents box (Class-B 2, HB 2026-08-14) — JS injects the toggle;
     no-JS keeps the list visible (html:not(.js) guard) */
  .legal__toc-toggle {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; background: none; border: 0; cursor: pointer;
    padding: var(--space-xs) 0; text-align: left;
  }
  .js .legal__toc--collapsible .legal__toc-hdr { display: none; }
  .js .legal__toc--collapsible ol { display: none; margin-top: var(--space-sm); }
  .js .legal__toc--collapsible.legal__toc--open ol { display: block; }
  .legal__toc ol { columns: 2; column-gap: 2rem; }
  .legal__toc li { break-inside: avoid; }
}
@media (max-width: 540px) { .legal__toc ol { columns: 1; } }

/* Print — clean black-on-white, drop chrome and rail, show the URL */
@media print {
  .nav, .ft, .affiliates, .legal__toc, .nav__menu-btn { display: none !important; }
  .legal-summary { background: none; color: #000; border: 1px solid #000; }
  .legal-summary__in p { color: #000; }
  .legal { display: block; border: 0; padding-top: 1rem; }
  .legal__body { max-width: none; }
  .legal__body a { color: #000; text-decoration: none; }
  .hero-text { border-bottom: 1px solid #000; }
  /* (removed hardcoded "dobbie.co.nz/ai-policy" print URL — it printed the wrong
     address on privacy.html and any other page using .hero-text) */
  body { color: #000; }
}

/* =============================================================
   Cookie / privacy notice bar — fixed bottom strip (Stream 8B)
   ============================================================= */
#cookie-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 150;
  background: var(--ink);
  color: var(--paper);
  border-top: 3px solid var(--gold);
  padding: 1rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-size: var(--fs-small);
  line-height: 1.4;
}
#cookie-bar p { margin: 0; flex: 1; min-width: 180px; color: rgba(255,255,255,0.9); }
#cookie-bar a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
#cookie-bar button {
  font-family: var(--mono);
  font-size: var(--fs-mono-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.65rem 1.3rem;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#cookie-accept { background: var(--gold); color: var(--ink); }
#cookie-accept:hover { background: var(--gold-dark); }
#cookie-dismiss { background: transparent; color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.3); }
#cookie-dismiss:hover { color: var(--paper); border-color: rgba(255,255,255,0.75); }
#cookie-bar.hidden { display: none; }
@media (max-width: 600px) {
  #cookie-bar { flex-direction: column; align-items: stretch; }
  #cookie-bar button { text-align: center; }
}

/* =============================================================
   Work page sector filter — dropdown above .specimen / .work-grid
   (Stream 8D)
   ============================================================= */
.sector-filter {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.6rem var(--gutter) 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.sector-filter label {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
.sector-filter select {
  font-family: var(--mono);
  font-size: var(--fs-mono-lg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.5rem 2.2rem 0.5rem 0.8rem;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23425563' stroke-width='1.5' stroke-linecap='square'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sector-filter select:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.work-tile[hidden] { display: none; }