/* ============================================================
   Mirza Reeder Group Ltd
   Implemented from the Claude Design handoff (Aug 2026).

   Navy + white corporate identity, blue accent.
   NO border-radius anywhere — every corner is square. This is
   deliberate and load-bearing for the tone. Do not round anything.

   All styling lives here: the site's CSP has no 'unsafe-inline',
   so inline style="" attributes are silently ignored.
   ============================================================ */

:root {
  /* ---- Colour ------------------------------------------------------------
     Converted from the authored oklch() values in the handoff.

     NOTE: the handoff README's "≈ hex" column is wrong for all 18 tokens —
     systematically ~2 stops too light (it gives navy as #1e2a44; the authored
     oklch(0.21 0.05 258) is actually #09182f). The oklch values are the source
     of truth, as the README itself states. Every value below was converted
     oklch -> OKLab -> linear sRGB -> sRGB and contrast-verified.
     If you edit a colour, edit the oklch comment and re-derive the hex.
     -------------------------------------------------------------------- */
  --navy:            #09182f;  /* oklch(0.21 0.05 258)   dark bands, footer, row hover */
  --navy-deep:       #05132a;  /* oklch(0.19 0.05 258)   hero image overlays */
  --navy-strong:     #0e1f39;  /* oklch(0.24 0.055 258)  buttons, wordmark, active */
  --navy-hi:         #152741;  /* oklch(0.27 0.055 258)  flat hero gradient top */
  --navy-lo:         #040f23;  /* oklch(0.17 0.045 258)  flat hero gradient bottom */

  --accent:          #1364b0;  /* oklch(0.50 0.14 252)   number blocks */
  --accent-label:    #39659b;  /* oklch(0.50 0.10 255)   eyebrows, rules, index */
  --accent-link:     #1f5596;  /* oklch(0.45 0.12 255)   inline links */
  --accent-on-dark:  #bfd3eb;  /* oklch(0.86 0.04 253)   eyebrows on navy */
  --accent-rule-dark:#98bbe4;  /* oklch(0.78 0.07 253)   rules on navy */
  --footer-est:      #86a8d0;  /* oklch(0.72 0.07 253)   footer ESTABLISHED 2012 */

  --ink:             #121b28;  /* oklch(0.22 0.03 258)   headings on light */
  --ink-strong:      #16202e;  /* oklch(0.24 0.03 258)   bold spans */
  --body:            #474e57;  /* oklch(0.42 0.018 258)  body on light */
  --body-soft:       #50565e;  /* oklch(0.45 0.015 258)  card body */
  --muted:           #666c75;  /* oklch(0.53 0.015 258)  captions, small print */
  --body-on-dark:    #d9dee6;  /* oklch(0.90 0.012 258) */
  --muted-on-dark:   #9da5b1;  /* oklch(0.72 0.02 258)   breadcrumbs on navy */
  --scroll-word:     #a6afbb;  /* oklch(0.75 0.02 258)   the word SCROLL */

  --line:            #dbdee3;  /* oklch(0.90 0.008 258) */
  --line-soft:       #e3e6ec;  /* oklch(0.925 0.008 258) */
  --line-dark:       #2b394d;  /* oklch(0.34 0.04 258) */
  --white:           #ffffff;
  --off-white:       #f5f7f9;  /* oklch(0.975 0.004 258) */
  --required:        #b54b41;  /* oklch(0.55 0.14 28) — required asterisk only */

  /* ---- Gradients ---- */
  --grad-hero-flat:     linear-gradient(155deg, #152741 0%, #071630 58%, #040f23 100%);
  --grad-card-backdrop: linear-gradient(180deg, #f1f3f6 0%, #dfe4ec 100%);
  --grad-card-face:     linear-gradient(168deg, #ffffff 0%, #fafbfc 55%, #f1f3f6 100%);
  --scrim-hero:         linear-gradient(180deg, rgba(5,19,42,0.82) 0%, rgba(5,19,42,0.35) 40%, rgba(5,19,42,0.94) 100%);
  --scrim-band:         linear-gradient(100deg, rgba(5,19,42,0.96) 0%, rgba(5,19,42,0.66) 60%, rgba(5,19,42,0.32) 100%);

  --steel-light:     #7ca8dc;  /* oklch(0.72 0.09 253)   secondary icon fills */

  /* ---- Placeholders ----
     The third handoff replaced the striped placeholder with a SOLID navy block
     and a small label. The client's rule is "a solid colour block where there is
     no real photograph — never stock", and stripes read as a pattern swatch at
     large sizes. The stripe tokens are kept only for the two legacy blocks that
     still use them; do not use them for anything new. */
  --stripe-light: repeating-linear-gradient(135deg, #e6e9ee 0 14px, #f0f2f5 14px 28px);
  --stripe-dark:  repeating-linear-gradient(135deg, #14263f 0 14px, #0f2036 14px 28px);

  /* ---- Type ----
     ONE typeface. The third handoff dropped Saira Semi Condensed entirely:
     Jost at 300 (body) and 500 (headings, labels, buttons). The typographic
     contrast now comes from tracking — large headings carry NEGATIVE tracking
     (-0.012em to -0.022em), small uppercase labels carry wide positive tracking
     (0.13em to 0.32em). Both --display and --ui resolve to Jost so the existing
     rules keep working; do not reintroduce a second family. */
  --display: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --ui: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* ---- Layout ---- */
  --wrap: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(72px, 9vw, 130px);
  --section-y-dense: clamp(76px, 9vw, 132px);
  --cta-y: clamp(76px, 10vw, 140px);
  --head-gap: clamp(40px, 5vw, 72px);
  --col-gap: clamp(36px, 5vw, 88px);
  --card-gap: clamp(18px, 2vw, 28px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Shadow ---- */
  --shadow-card:       0 16px 38px rgba(14, 31, 57, 0.10);
  --shadow-card-hover: 0 26px 58px rgba(14, 31, 57, 0.18);
  --shadow-drop:       0 20px 44px rgba(14, 31, 57, 0.14);
  --shadow-bar:        0 1px 24px rgba(14, 31, 57, 0.07);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--white);
  color: var(--body);
  font-family: var(--ui);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* Jost 500 with negative tracking. Saira carried its own condensed weight at 600;
   Jost does not, so 600 here reads as heavy and the tracking must go negative to
   hold the headings together. Per-role tracking is set on the size rules below. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
  letter-spacing: -0.014em;
}
h1 { letter-spacing: -0.018em; }
p { text-wrap: pretty; }

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

/* ============================================================
   Shared type roles
   ============================================================ */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ui);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-label);
}
.eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; flex-shrink: 0; }
.eyebrow.on-dark { color: var(--accent-on-dark); }
.eyebrow.on-dark::before { background: var(--accent-rule-dark); }
.eyebrow.no-rule::before { display: none; }
.eyebrow .num { color: var(--accent); font-weight: 500; }
.eyebrow.on-dark .num { color: var(--accent-on-dark); }

.section-title { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.12; letter-spacing: -0.014em; }
.lead {
  font-family: var(--ui);
  font-weight: 300;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.9;
  max-width: 62ch;
}
.prose { max-width: 66ch; }
.prose p + p { margin-top: 1.35em; }
.prose strong { font-weight: 500; color: var(--ink-strong); }
.on-dark, .on-dark p { color: var(--body-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }

.pull-quote {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.55;
  color: var(--ink);
  border-left: 2px solid var(--accent-label);
  padding-left: clamp(18px, 2vw, 30px);
  margin-top: clamp(32px, 4vw, 52px);
}

.inline-link {
  color: var(--accent-link);
  border-bottom: 1px solid #a4c0e4;
  transition: border-color 300ms ease;
}
.inline-link:hover { border-bottom-color: var(--accent-link); }

/* ============================================================
   Sections
   ============================================================ */

.section { padding: var(--section-y) 0; background: var(--white); }
.section.dense { padding: var(--section-y-dense) 0; }
.section.tint { background: var(--off-white); }
.section.navy { background: var(--navy); }
.section.cards { background: var(--grad-card-backdrop); }
.section[id] { scroll-margin-top: 86px; }

.section-head { margin-bottom: var(--head-gap); }
.section-head .section-title { margin-top: 18px; }

.head-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: var(--head-gap);
}
.head-split .section-title { max-width: 17ch; margin-top: 18px; }
.head-split .lead { max-width: 46ch; }

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--col-gap);
  align-items: start;
}
.two-col.even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.two-col .col-head .section-title { max-width: 15ch; margin-top: 18px; }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-block;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 18px 32px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 300ms ease, color 300ms ease, border-color 300ms ease;
}
.btn-white { background: var(--white); color: var(--navy-strong); border-color: var(--white); }
.btn-white:hover { background: transparent; color: var(--white); border-color: var(--white); }

.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(198, 206, 219, 0.45); }
.btn-ghost-light:hover { background: var(--white); color: var(--navy-strong); border-color: var(--white); }

.btn-ghost-dark { background: transparent; color: var(--navy-strong); border-color: var(--navy-strong); }
.btn-ghost-dark:hover { background: var(--navy-strong); color: var(--white); }

.btn-solid { background: var(--navy-strong); color: var(--white); border-color: var(--navy-strong); }
.btn-solid:hover { background: #16304f; border-color: #16304f; }

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 400ms ease, box-shadow 400ms ease, border-color 400ms ease;
}
.site-header.scrolled {
  background: var(--white);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-bar);
}
.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  transition: height 400ms ease;
}
.site-header.scrolled .header-inner { height: 74px; }

/* Wordmark = client's MR cube mark + the two-line text lockup.
   The mark is a raster with silver bevels, so it CANNOT be recoloured with
   `fill`/`currentColor` the way an SVG could — two files are shipped and
   swapped by header state. If a vector ever arrives, collapse these to one. */
.wordmark { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-shrink: 0; }
.wordmark-text { display: flex; flex-direction: column; gap: 4px; }
.wordmark-mark {
  height: 34px; width: auto; display: block; flex-shrink: 0;
}
/* Default (navy surfaces: header over the hero, footer, mobile menu) = white
   mark. The navy mark only appears once the bar turns white on scroll. */
.wordmark-mark.on-light { display: none; }
.site-header.scrolled .wordmark-mark { display: none; }
.site-header.scrolled .wordmark-mark.on-light { display: block; }
.wordmark-main {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: 0.17em;
  line-height: 1;
  color: var(--white);
  transition: color 400ms ease;
}
.wordmark-sub {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 8px;
  letter-spacing: 0.5em;
  line-height: 1;
  color: #a3c1e4;
  transition: color 400ms ease;
}
.site-header.scrolled .wordmark-main { color: var(--navy-strong); }
.site-header.scrolled .wordmark-sub { color: #4574aa; }

.nav { display: flex; align-items: stretch; align-self: stretch; gap: clamp(18px, 2.2vw, 34px); }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--ui);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 7px 0;
  color: #f3f5f8;
  transition: color 300ms ease;
}
.site-header.scrolled .nav-link { color: #1e293a; }
.nav-link[aria-current="page"] { color: var(--white); }
.site-header.scrolled .nav-link[aria-current="page"] { color: var(--navy-strong); }
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
}
.caret {
  display: inline-block;
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 7px;
  opacity: 0.65;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 236px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--navy-strong);
  box-shadow: var(--shadow-drop);
  padding: 7px 0;
  display: none;
}
.nav-item.open .dropdown { display: block; animation: dropIn 220ms var(--ease) both; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.dropdown a {
  display: block;
  padding: 11px 22px;
  font-family: var(--ui);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #293342;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, padding-left 200ms ease;
}
.dropdown a:hover { background: var(--off-white); color: var(--navy-strong); padding-left: 26px; }

.nav-cta {
  flex-shrink: 0;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid rgba(198, 206, 219, 0.55);
  color: var(--white);
  background: transparent;
  transition: background 300ms ease, color 300ms ease, border-color 300ms ease;
}
.nav-cta:hover { background: var(--navy-strong); color: var(--white); border-color: var(--navy-strong); }
.site-header.scrolled .nav-cta { border-color: var(--navy-strong); color: var(--navy-strong); }
.site-header.scrolled .nav-cta:hover { background: var(--navy-strong); color: var(--white); }

.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  flex-direction: column;
  gap: 6px;
  width: 44px; height: 44px;
  justify-content: center;
  align-items: flex-end;
}
.burger span { display: block; height: 1.5px; background: var(--white); transition: background 400ms ease; }
.burger span:first-child { width: 24px; }
.burger span:last-child { width: 15px; }
.site-header.scrolled .burger span { background: var(--navy-strong); }

/* Mobile overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--navy);
  display: none;
  flex-direction: column;
  padding: 26px var(--gutter) 40px;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-top { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.mobile-brand { display: flex; align-items: center; gap: 10px; }
.mobile-top .wordmark-main { font-size: 20px; color: var(--white); }
.mobile-top .wordmark-mark { height: 30px; }
.mobile-close {
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px;
  color: var(--white);
  font-family: var(--ui); font-weight: 300; font-size: 32px; line-height: 1;
}
.mobile-nav { display: flex; flex-direction: column; margin-top: 34px; }
.mobile-group { border-bottom: 1px solid var(--line-dark); padding: 14px 0; }
.mobile-group > a {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 32px;
  color: var(--white);
}
.mobile-children {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 10px; padding-left: 16px;
  border-left: 1px solid #374863;
}
.mobile-children a {
  display: block; padding: 8px 0;
  font-family: var(--ui); font-weight: 300; font-size: 15px;
  color: #c3cbd8;
}
.mobile-enquire {
  margin-top: 32px; flex-shrink: 0; text-align: center;
  font-family: var(--ui); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--navy-strong); background: var(--white); padding: 20px;
}

/* ============================================================
   Heroes
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background: var(--navy-deep);
  overflow: hidden;
  padding: 124px 0 clamp(56px, 7vw, 96px);
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
.hero-scrim { position: absolute; inset: 0; background: var(--scrim-hero); }
.hero-inner { position: relative; width: 100%; }
.hero h1 {
  font-size: clamp(44px, 6.8vw, 108px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--white);
  margin: 26px 0 0;
}
.hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(32px, 4vw, 52px);
}
.hero-row .lead { color: var(--body-on-dark); max-width: 50ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(40px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--accent-on-dark);
}
.scroll-cue span {
  writing-mode: vertical-rl;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.scroll-cue::after {
  content: "";
  width: 1px; height: 56px;
  background: currentColor;
  animation: scrollCue 2600ms var(--ease) infinite;
}
@keyframes scrollCue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Inner-page hero */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  background: var(--navy-deep);
  overflow: hidden;
  padding: 124px 0 clamp(48px, 6vw, 84px);
}
.page-hero.flat { background: var(--grad-hero-flat); min-height: 58vh; }
.page-hero.legal { min-height: 46vh; }
.page-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
.page-hero .hero-scrim { background: var(--scrim-hero); }
.page-hero-inner { position: relative; width: 100%; }
.page-hero h1 {
  font-size: clamp(42px, 6.2vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--white);
  margin: 20px 0 0;
}
.page-hero.legal h1 { font-size: clamp(38px, 5.4vw, 78px); line-height: 1.06; }
.page-hero .lead { color: var(--body-on-dark); margin-top: 22px; }
.page-hero .updated { color: var(--muted-on-dark); font-size: 13px; margin-top: 18px; }

.crumb {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.crumb a { transition: color 300ms ease; }
.crumb a:hover { color: var(--white); }
.crumb .current { color: var(--accent-on-dark); }

/* ============================================================
   Credentials strip (Home)
   ============================================================ */

.credentials { padding: clamp(56px, 6vw, 88px) 0; background: var(--white); border-bottom: 1px solid var(--line); }
.credentials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(28px, 4vw, 56px); }
.credential { border-left: 1px solid var(--line); padding-left: 20px; }
.credential .label {
  font-family: var(--ui); font-weight: 500; font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-label);
}
.credential .value {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2;
  color: var(--ink); margin: 12px 0 10px;
}
.credential .note { font-size: 15px; line-height: 1.8; color: var(--body-soft); }

/* ============================================================
   Sector rows (Home)
   ============================================================ */

.sector-list { border-top: 2px solid var(--navy); }
.sector-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(22px, 2.4vw, 32px) 0 clamp(22px, 2.4vw, 32px) clamp(14px, 1.6vw, 26px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background 320ms ease, color 320ms ease, padding-left 320ms ease;
}
.sector-row:hover {
  background: var(--navy);
  color: var(--white);
  padding-left: clamp(22px, 2.4vw, 40px);
}
.sector-num {
  flex: 0 0 auto;
  width: 62px; height: 62px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--display); font-weight: 500; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.sector-name {
  flex: 1 1 200px;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(25px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.012em;
  color: inherit;
}
.sector-body { flex: 3 1 300px; color: inherit; opacity: 0.68; max-width: 62ch; font-size: 15.5px; line-height: 1.85; }
.sector-more {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--ui); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 12px 20px;
  color: inherit;
}

/* ============================================================
   Cards (Home "why us", About values)
   ============================================================ */

.card-grid { display: grid; gap: var(--card-gap); }
.card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  background: var(--grad-card-face);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  padding: clamp(22px, 2.2vw, 30px) clamp(22px, 2.2vw, 30px) clamp(28px, 2.8vw, 38px);
  transition: box-shadow 340ms ease, transform 340ms ease;
}
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.card-bar { display: flex; align-items: stretch; background: var(--navy); margin: calc(-1 * clamp(22px, 2.2vw, 30px)) calc(-1 * clamp(22px, 2.2vw, 30px)) 0; }
.card-num {
  flex: 0 0 46px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--display); font-weight: 500; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.card-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.3; letter-spacing: 0.05em;
  color: var(--white);
  padding: 14px 18px;
}
.card p { margin: 26px 2px 0; font-size: 15.5px; line-height: 1.9; color: var(--body-soft); }

/* ============================================================
   Photo bands (Home current project, Sectors civil)
   ============================================================ */

.photo-band {
  position: relative;
  min-height: 74vh;
  display: flex;
  align-items: center;
  background: var(--navy-deep);
  overflow: hidden;
  padding: var(--section-y) 0;
}
.photo-band.shorter { min-height: 68vh; }
.photo-band-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.30; }
.photo-band-scrim { position: absolute; inset: 0; background: var(--scrim-band); }
.photo-band-inner { position: relative; width: 100%; }
.photo-band-content { max-width: 640px; }
.photo-band-content.wide { max-width: 620px; }
.photo-band h2 { color: var(--white); margin: 22px 0 24px; }
.photo-band p { color: var(--body-on-dark); }
.photo-band .btn { margin-top: 32px; }

/* ============================================================
   Placeholders (no photography yet)
   ============================================================ */

.placeholder {
  position: relative;
  background: var(--stripe-light);
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.placeholder.dark { background: var(--stripe-dark); border-color: var(--line-dark); }
.placeholder.ratio-4-3 { aspect-ratio: 4 / 3; }
.placeholder span {
  font-family: var(--ui); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
}
.placeholder.dark span { color: var(--muted-on-dark); }

/* ============================================================
   Projects
   ============================================================ */

.spec-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: clamp(28px, 3vw, 40px) 0;
}
.spec-list > div { background: var(--white); padding: 18px 20px; }
.spec-list dt {
  font-family: var(--ui); font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
.spec-list dd {
  font-family: var(--display); font-weight: 500; font-size: 21px;
  color: var(--ink); margin-top: 6px;
}

.date-line {
  font-family: var(--ui); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent-label);
}
.project-h3 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.15; margin: 18px 0 0; }

/* Spec table on navy. The 1px "gap" is a background showing through, so the
   grid background and the cell background both have to flip, not just text. */
.spec-list.on-dark { background: var(--line-dark); border-color: var(--line-dark); }
.spec-list.on-dark > div { background: var(--navy); }
.spec-list.on-dark dt { color: var(--muted-on-dark); }
.spec-list.on-dark dd { color: var(--white); }
/* Same trick for the off-white band — cells must match their section, not white. */
.section.tint .spec-list > div { background: var(--off-white); }

/* Case-study sections (five real projects) */
.project-head {
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.project-head .section-title { max-width: 20ch; margin-top: 18px; }

/* Solid rectangle badge: procurement route, client or status. */
.tag {
  display: inline-block; flex-shrink: 0;
  font-family: var(--ui); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 11px 20px;
  background: var(--navy-strong); color: var(--white);
}
.tag.on-dark { background: var(--accent-on-dark); color: var(--navy-strong); }
/* Only when the tag sits in a text column under a heading. Inside .project-head
   it is a flex item aligned to the bottom, where a top margin would shift it. */
.tag.stacked { margin-top: clamp(18px, 2vw, 26px); }

.project-photo { width: 100%; object-fit: cover; display: block; }
.project-photo.ratio-4-3 { aspect-ratio: 4 / 3; }
.project-photo.ratio-5-3 { aspect-ratio: 5 / 3; }
.project-wide {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.project-figure { margin: 0; }
.project-figure figcaption {
  font-family: var(--ui); font-weight: 300; font-size: 12.5px;
  letter-spacing: 0.04em; color: var(--muted); padding-top: 12px;
}
.project-figure.on-dark figcaption { color: var(--muted-on-dark); }

/* Copy beside its spec table, under a full-width photograph. */
.project-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.project-body .spec-list { margin-top: 0; }

/* The Costa section carries a statistic instead of a spec table. */
.stat-row {
  display: flex; align-items: baseline; gap: 16px;
  margin: 28px 0 30px; padding-bottom: 30px;
  border-bottom: 1px solid var(--line-dark);
}
.stat-figure {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(52px, 6vw, 82px); line-height: 0.9; letter-spacing: -0.02em;
  color: var(--accent-on-dark);
}
.stat-caption {
  font-family: var(--ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--body-on-dark); line-height: 1.7;
}

/* ============================================================
   Contact panel
   ============================================================ */

.contact-panel {
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.contact-side {
  background: var(--navy);
  padding: clamp(36px, 4vw, 64px);
  display: flex;
  flex-direction: column;
}
.contact-side h2 { color: var(--white); max-width: 14ch; margin: 20px 0 22px; }
.contact-side > p { color: var(--body-on-dark); }
.contact-details { margin-top: clamp(28px, 3vw, 40px); }
.contact-item { border-top: 1px solid var(--line-dark); padding: 22px 0; }
.contact-item .label {
  font-family: var(--ui); font-weight: 500; font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-on-dark);
}
.contact-item .value {
  font-family: var(--display); font-weight: 400; font-size: 20px;
  color: var(--white); margin-top: 8px; display: block;
  transition: color 300ms ease;
}
a.value:hover { color: var(--accent-on-dark); }
.contact-item address { font-style: normal; color: var(--body-on-dark); font-size: 15px; line-height: 1.8; margin-top: 8px; }
.contact-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.office-hours { margin-top: auto; padding-top: 32px; color: var(--muted-on-dark); font-size: 14px; }

.contact-form-side { background: var(--white); padding: clamp(36px, 4vw, 64px); }
.contact-form-side h2 { font-size: clamp(26px, 2.6vw, 36px); }
.form-note { font-size: 14px; color: var(--muted); margin-top: 12px; }
.form-fields { display: flex; flex-direction: column; gap: 24px; margin-top: clamp(28px, 3vw, 38px); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--ui); font-weight: 500; font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: #464e58;
}
.req { color: var(--required); }
.char-count { letter-spacing: 0.12em; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: var(--ui); font-weight: 300; font-size: 16px;
  color: var(--ink);
  /* background-COLOR, not the background shorthand. The shorthand resets
     background-image, which would wipe the select chevron below on focus. */
  background-color: var(--off-white);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 15px 16px;
  width: 100%;
  transition: border-color 220ms ease, background-color 220ms ease;
}
/* The design set appearance:none and never replaced the native arrow, so the
   select had no affordance at all. Data URI rather than a file: no extra
   request, and the CSP already allows data: in img-src. */
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23666c75' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.field textarea { resize: vertical; min-height: 132px; line-height: 1.8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: #20385c;
  background-color: var(--white);
}
.field input::placeholder, .field textarea::placeholder { color: #8b939f; }

.form-submit {
  width: 100%;
  padding: 21px 34px;
  background: var(--navy-strong);
  color: var(--white);
  border: 1px solid var(--navy-strong);
  font-family: var(--ui); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: background 300ms ease;
}
.form-submit:hover { background: #16304f; }
.form-submit:disabled { opacity: 0.6; cursor: default; }

.form-status { display: none; font-size: 14px; line-height: 1.8; padding-left: 14px; border-left: 2px solid var(--line); }
.form-status.show { display: block; }
.form-status.is-error { color: #a3382a; border-left-color: #a3382a; }
.form-status.is-success { color: #1f6b45; border-left-color: #1f6b45; }

/* Honeypot — off-screen, not display:none (bots skip hidden fields) */
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 1px; overflow: hidden; }

.cf-turnstile { min-height: 65px; }

/* ============================================================
   CTA band
   ============================================================ */

.cta { background: var(--navy); padding: var(--cta-y) 0; }
.cta-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 56px);
}
.cta-copy { flex: 1 1 460px; }
.cta h2 { color: var(--white); }
.cta p { color: var(--body-on-dark); margin-top: 16px; max-width: 52ch; }

/* ============================================================
   Legal pages
   ============================================================ */

.legal-body { padding: clamp(64px, 8vw, 112px) 0; }
.legal-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
.legal-index { position: sticky; top: 110px; }
.legal-index h2 {
  font-family: var(--ui); font-weight: 500; font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-label);
  margin-bottom: 8px;
}
.legal-index a {
  display: block;
  font-family: var(--ui); font-weight: 300; font-size: 14.5px;
  color: var(--body);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  transition: color 300ms ease;
}
.legal-index a:hover { color: var(--accent-link); }
.legal-sections { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 54px); max-width: 68ch; }
.legal-section { scroll-margin-top: 100px; }
.legal-section + .legal-section { border-top: 1px solid var(--line-soft); padding-top: clamp(36px, 4vw, 54px); }
.legal-section h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -0.012em; margin-bottom: 18px; }
.legal-section p + p { margin-top: 1.35em; }
.legal-section strong { font-weight: 500; color: var(--ink-strong); }
.processor-list { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.processor-list li { padding-left: 18px; border-left: 2px solid #cfd8e5; }
.small-print { font-size: 11.5px; line-height: 1.9; color: var(--muted); }

/* ============================================================
   Footer
   ============================================================ */

.site-footer { background: var(--navy); padding: clamp(60px, 7vw, 96px) 0 36px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(36px, 4vw, 64px); }
.footer-brand .wordmark-main { color: var(--white); }
.footer-brand .wordmark-sub { color: #a3c1e4; }
.footer-brand p { color: var(--body-on-dark); font-size: 15px; line-height: 1.85; margin-top: 20px; max-width: 34ch; }
.footer-est {
  font-family: var(--ui); font-weight: 500; font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent-rule-dark); margin-top: 22px;
}
.footer-col h3 {
  font-family: var(--ui); font-weight: 500; font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase; color: #8b939f;
  margin-bottom: 20px;
}
.footer-col li + li { margin-top: 11px; }
.footer-col a, .footer-col address {
  font-family: var(--ui); font-weight: 300; font-size: 15px; font-style: normal;
  color: #ccd1d9; line-height: 1.8;
  transition: color 300ms ease;
}
.footer-col a:hover { color: var(--white); }
.footer-col address { margin-top: 16px; display: block; }

/* Social row. Its own full-width row rather than a cell inside .footer-grid —
   the grid is auto-fit/minmax(min(100%, 200px)), and six 40px tiles plus
   gaps (290px) would have been squeezed or wrapped at some widths. As a sibling it
   lays out identically on desktop and mobile. */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(40px, 4vw, 60px);
}
.social-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  color: #ccd1d9;                       /* 11.6:1 on --navy */
  transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease;
}
/* Glyphs inherit colour, so one hover rule recolours all six. */
.social-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}
/* Written for the anchor, not the span: these are placeholders until the
   client supplies profile URLs, and the states switch on automatically the
   moment a <span> becomes an <a>. */
a.social-icon:hover,
a.social-icon:focus-visible {
  color: var(--navy);
  background: var(--white);
  border-color: var(--white);
}

.footer-bottom {
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
}
.footer-bottom p, .footer-bottom a {
  font-family: var(--ui); font-weight: 300; font-size: 11.5px; line-height: 1.9;
  color: #81878f;
}
.footer-legal-links { display: flex; gap: 26px; }
.footer-legal-links a { transition: color 300ms ease; }
.footer-legal-links a:hover { color: var(--white); }

/* ============================================================
   Scroll reveal
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* Fail-open. The hidden state above is applied by CSS, so if JavaScript never
   runs the page would render blank. Two guards:
     1. scripting: none  — scripting disabled entirely
     2. .no-js on <html> — main.js threw before the reveal code could arm itself
   Content must always end up visible; the animation is the optional part. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
html.no-js .reveal { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue::after { animation: none; }
  .card:hover { transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1120px) {
  .nav, .nav-cta { display: none; }
  .burger { display: flex; }
  .two-col, .two-col.even { grid-template-columns: minmax(0, 1fr); }
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-index { position: static; max-width: none; }
  .card-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .contact-panel { grid-template-columns: minmax(0, 1fr); }
  .sector-more { margin-left: 0; }
}

@media (max-width: 720px) {
  .card-grid.two, .card-grid.three { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .contact-pair { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: 88svh; }
  .page-hero { min-height: 52vh; }
  .photo-band { min-height: 60vh; }
  .scroll-cue { display: none; }
}

@media (max-width: 560px) {
  .spec-list { grid-template-columns: minmax(0, 1fr); }
  .credential { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 18px; }
  .sector-num { width: 52px; height: 52px; font-size: 17px; }
  .btn { width: 100%; text-align: center; }
  .hero-actions { width: 100%; }
}

/* Emphasis span inside the hero lead ("Established 2012.") */
.emph { color: var(--white); font-weight: 400; }

/* Footer links must not inherit the site-wide a:hover blue */
.site-footer a:hover { color: var(--white); }

/* Sector page content image and prose spacing */
.sector-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stack-md { margin-top: clamp(20px, 2.4vw, 30px); }

/* ============================================================
   Keyboard focus
   The handoff specified `outline: none` on form fields with only a
   border-colour change to replace it. That is not a sufficient focus
   indicator (WCAG 2.4.7), and nothing else on the site defined one at
   all — links, buttons and nav items had no visible focus state.
   :focus-visible matches keyboard focus only, so pointer users see no
   change and the design is unaffected.
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* On navy surfaces the blue ring has too little contrast — use the light tone
   (11.6:1 on navy) instead. */
.site-header:not(.scrolled) :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.photo-band :focus-visible,
.cta :focus-visible,
.site-footer :focus-visible,
.contact-side :focus-visible,
.mobile-menu :focus-visible {
  outline-color: var(--accent-on-dark);
}

/* Form fields keep the design's border darkening AND gain a ring. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.form-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Sector rows are large hit targets — inset the ring so it stays on-row. */
.sector-row:focus-visible { outline-offset: -3px; }

/* ============================================================
   Third handoff (Aug 2026) — new components
   ============================================================ */

/* Skip to content (WCAG 2.4.1). Off-canvas until focused. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 400;
  background: var(--navy); color: var(--white);
  font-family: var(--ui); font-weight: 500; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 16px 26px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------
   THE GRID DIVIDER PATTERN — read before touching any grid.

   Dividers come from borders ON THE CELLS, never from a coloured
   container showing through `gap: 1px`. The gap trick only works
   when the item count divides evenly into the resolved column
   count, and with auto-fit that count changes with viewport — so
   any odd remainder exposes a bar of raw divider colour on the
   last row. The client rejected exactly that twice ("Do not like
   this looks very poor!!", "This looks awful its blank").

   An uneven final row must fall back to page background, not a
   coloured void. Item counts are client-supplied and will change.
   ------------------------------------------------------------ */
.cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.cell-grid > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cell-grid.on-dark { border-top-color: var(--line-dark); border-left-color: var(--line-dark); }
.cell-grid.on-dark > * { border-right-color: var(--line-dark); border-bottom-color: var(--line-dark); }
/* Never write a bare minmax(320px, 1fr) — it exceeds a 375px viewport and
   causes horizontal page scroll. The min(100%, …) wrapper is what prevents it. */
.cell-grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cell-grid.narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); }

/* ---- Accreditation strip (footer) ---- */
.accreditations { padding: clamp(30px, 4vw, 44px) 0; border-bottom: 1px solid var(--line-dark); }
.accreditations h2 {
  font-family: var(--ui); font-weight: 500; font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: #a4abb6; margin-bottom: 20px;
}
.accred-grid {
  display: grid;
  /* 148px, not 172px: there are SEVEN tiles and at 172px a 1184px wrap
     resolves to 6 columns, orphaning the seventh on a row of its own.
     A lone white tile on navy is close to the layout the client rejected
     twice. At 134px all seven sit on one row at 1024px and above,
     which covers the common laptop and desktop widths. Below that it
     wraps as a normal grid and the remainder falls back to page
     background — never a bar of divider colour. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 134px), 1fr));
  gap: 0;
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}
/* White tiles are deliberate: every badge is dark-on-light artwork and would be
   unreadable placed directly on the navy band. */
.accred-tile {
  background: var(--white);
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  min-height: 132px;
  padding: 22px 18px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 8px;
}
.accred-icon { color: var(--accent); display: block; }
.accred-rule { width: 42px; height: 1px; background: var(--accent-label); display: block; }
.accred-name {
  font-family: var(--ui); font-weight: 500; font-size: 14px;
  letter-spacing: 0.04em; color: var(--navy-strong); line-height: 1.3;
}
.accred-sub {
  font-family: var(--ui); font-weight: 300; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); line-height: 1.5;
}

/* ---- Three Divisions (Home) ---- */
.divisions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0;
}
/* Vertical rules only BETWEEN columns — no outer border, so a wrapped row does
   not leave a stray edge. */
.division + .division { border-left: 1px solid var(--line); }
.division {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 24px; padding: clamp(28px, 3.4vw, 48px) clamp(20px, 2.6vw, 40px);
}
/* Client artwork, three different aspect ratios — cap the HEIGHT and let
   width follow, so all three sit on one optical baseline rather than being
   forced into a square box. */
.division-icon { width: auto; height: clamp(76px, 7.6vw, 96px); max-width: 100%; object-fit: contain; }
.division h3 { font-size: clamp(22px, 2.1vw, 29px); line-height: 1.2; letter-spacing: -0.012em; }
.division p { font-size: 15px; line-height: 1.9; color: var(--body-soft); max-width: 34ch; }
.division .btn { margin-top: auto; }

/* ---- Our Clients (names, not logos — the client pulled the logos for want of
       written permission to display third-party marks) ---- */
.client-cell {
  background: var(--white); min-height: 116px; padding: 22px 24px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: background 300ms ease;
  font-family: var(--ui); font-weight: 500; font-size: 14px;
  letter-spacing: 0.04em; line-height: 1.6; color: var(--ink-strong);
}
.client-cell:hover { background: var(--off-white); }

/* ---- Numbered service cells (division pages) ---- */
.service-cell { background: var(--white); padding: clamp(26px, 3vw, 40px); }
.service-cell .num {
  font-family: var(--ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.24em; color: var(--accent); display: block; margin-bottom: 14px;
}
.service-cell h3 { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3; letter-spacing: -0.008em; }

/* ---- Ruled list that indents on hover (division pages) ---- */
.ruled-list > * {
  display: block; border-top: 1px solid var(--line);
  padding: 20px 0 20px 0; transition: padding-left 300ms var(--ease), color 300ms ease;
  font-size: clamp(17px, 1.5vw, 21px); color: var(--ink);
}
.ruled-list > *:last-child { border-bottom: 1px solid var(--line); }
.ruled-list a:hover { padding-left: 14px; color: var(--accent-link); }
.ruled-list.on-dark > * { border-top-color: var(--line-dark); color: var(--white); }
.ruled-list.on-dark > *:last-child { border-bottom-color: var(--line-dark); }

/* ---- Solid placeholder block. The client's rule is a solid colour block where
       there is no real photograph, never stock and never a stripe swatch. ---- */
.block-placeholder {
  background: var(--navy); display: flex; align-items: flex-end; padding: 22px;
  aspect-ratio: 4 / 3;
}
.block-placeholder span {
  font-family: var(--ui); font-weight: 400; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-on-dark);
}

/* Centred section heads (Three Divisions, Our Clients) */
.section-head.centred { text-align: center; }
.section-head.centred .eyebrow { justify-content: center; }
.section-head.centred .lead { margin: 0 auto; max-width: 52ch; }
.lead.centred { text-align: center; }
/* Eyebrow flanked by a rule on BOTH sides, used only on centred heads. */
.eyebrow.flanked::after {
  content: ""; width: 40px; height: 1px; background: currentColor; flex-shrink: 0;
}

/* Join the team block on Contact */
.join-team { margin-top: auto; padding-top: 32px; }
.join-team .label {
  font-family: var(--ui); font-weight: 500; font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-on-dark);
  margin-bottom: 10px;
}
.join-team p { color: var(--body-on-dark); font-size: 15px; line-height: 1.85; }
.join-team strong { font-weight: 500; color: var(--white); }
.office-hours { margin-top: 26px; }

/* ---- Leadership (About) ---- */
.director-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(28px, 3.5vw, 56px);
}
.director { display: flex; gap: clamp(20px, 2.4vw, 30px); align-items: flex-start; }
/* Plain avatar block — the "Headshot to follow" label was removed 17 Aug 2026.
   Fixed height, so losing the text does not collapse it. */
.director-photo {
  flex: 0 0 104px; width: 104px; height: 104px;
  background: var(--navy-strong); border: 1px solid var(--line-dark);
}
.director-photo span {
  font-family: var(--ui); font-weight: 400; font-size: 8.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-on-dark);
  line-height: 1.4;
}
.director h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.25; color: var(--white); }
.director-role {
  font-family: var(--ui); font-weight: 500; font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent-on-dark); margin: 8px 0 14px;
}
.director-body p { color: var(--body-on-dark); font-size: 15px; line-height: 1.85; }

/* ---- Ruled list with steel square markers (Why) ---- */
.marker-list > li {
  position: relative; padding: 16px 0 16px 26px;
  border-top: 1px solid var(--line); font-size: 16.5px; color: var(--ink);
}
.marker-list > li:last-child { border-bottom: 1px solid var(--line); }
.marker-list > li::before {
  content: ""; position: absolute; left: 0; top: 25px;
  width: 8px; height: 8px; background: var(--accent-label);
}

/* ---- Sector tiles (Our Sectors) ---- */
.sector-tile {
  background: var(--white); padding: clamp(26px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 12px;
  transition: background 300ms ease;
}
.sector-tile:hover { background: var(--off-white); }
.sector-tile .num {
  font-family: var(--ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.24em; color: var(--accent);
}
.sector-tile h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.25; }
.sector-tile p { font-size: 15px; line-height: 1.85; color: var(--body-soft); }
.sector-division {
  margin-top: auto; padding-top: 10px;
  font-family: var(--ui); font-weight: 500; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-label);
}

/* ---- Scope of works (Featured Projects) ----
   The bullets restate the section's own prose as a scannable list — extracted
   from the client's copy, never written. Do not add a bullet that is not
   already stated in the paragraph above it. */
.scope { margin-top: clamp(24px, 2.6vw, 34px); }
.scope-label {
  font-family: var(--ui); font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.scope ul { display: flex; flex-direction: column; }
.scope li {
  position: relative; padding: 11px 0 11px 22px;
  border-top: 1px solid var(--line);
  font-size: 15.5px; line-height: 1.7; color: var(--body);
}
.scope li:last-child { border-bottom: 1px solid var(--line); }
.scope li::before {
  content: ""; position: absolute; left: 0; top: 20px;
  width: 6px; height: 6px; background: var(--accent-label);
}
.scope.on-dark .scope-label { color: var(--muted-on-dark); }
.scope.on-dark li { border-top-color: var(--line-dark); color: var(--body-on-dark); }
.scope.on-dark li:last-child { border-bottom-color: var(--line-dark); }
.scope.on-dark li::before { background: var(--accent-rule-dark); }

/* Real badge artwork replaces the text tiles. Every badge is dark-on-light,
   which is why the tiles are white — see .accred-tile. Sized to a common box so
   four different aspect ratios sit on one optical baseline. */
.accred-logo { width: auto; max-width: 100%; max-height: 58px; object-fit: contain; }
/* SWQR's supplied lockup is 12.7:1 — unusable at tile width — so that tile uses
   the circular glyph with the name as text. The other three carry their own
   wordmark inside the artwork and need no label. */
.accred-logo.mark { max-height: 40px; }