@charset "utf-8";

/* ==========================================================================
   A. Infantino & Co. — site stylesheet
   Recreated from the design handoff (site/*.dc.html).
   Sections: 1 fonts · 2 tokens · 3 reset/base · 4 layout · 5 typography
             6 buttons/links · 7 nav · 8 footer · 9 components · 10 pages
             11 responsive
   ========================================================================== */


/* 1. Fonts — self-hosted (variable, latin + latin-ext)
   ========================================================================== */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. Design tokens
   ========================================================================== */

:root {
  /* Brand */
  --navy:          #0D182A;   /* primary navy: nav bar, headings, dark sections */
  --navy-deep:     #07101D;   /* top ribbon */
  --navy-panel:    #142542;   /* inset card on dark bands */
  --navy-line:     #22314B;   /* border on navy */
  --navy-line-2:   #3B4A63;   /* button border on navy */
  --navy-line-3:   #4A5A74;   /* ghost button border on hero */

  --cream:         #F7F6F2;   /* page background, text on dark */
  --white:         #FFFFFF;

  --teal:          #4BA6A0;   /* rules, markers, 3px card borders */
  --teal-deep:     #2E7D78;   /* links, eyebrow labels */
  --teal-tint:     #EAF2F1;   /* hover fill on light cards */
  --teal-ink:      #10322F;   /* text on the teal CTA band */

  --coral:         #FF7A59;   /* CTAs, active nav underline, client portal */

  /* Text */
  --text:          #46515F;   /* body */
  --text-soft:     #6A7482;   /* secondary */
  --on-dark:       #A9B3C1;   /* body text on navy */
  --on-dark-soft:  #93A0B2;   /* ribbon, sub-wordmark */
  --on-dark-lede:  #C3CBD6;   /* hero lede */
  --on-dark-mute:  #6E7C8F;   /* footer small print, breadcrumb */

  /* Lines & fills */
  --border:        #E4E2DC;   /* light dividers */
  --border-input:  #D9DDE1;
  --placeholder:   #E7EAEC;   /* image placeholder background */
  --hairline-dark: rgba(247, 246, 242, 0.14);
  --hairline-dark-strong: rgba(247, 246, 242, 0.16);

  /* Type */
  --font-head: 'Jost', sans-serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --wrap: 1320px;
  --pad: 40px;

  /* Team portrait framing.
     The source files in assets/brand/team/ are all normalised to exactly
     0.6 (3/5) — face centred, eyes ~40% from the top, head half the frame
     height. Sizing the box by ASPECT RATIO rather than a fixed pixel height
     is what keeps head size and background spacing identical at every screen
     width; a fixed height makes the box landscape on a phone and object-fit
     then magnifies the face to fill it.

     3 / 5  the full normalised frame, no crop at all — head is 50% of the
            frame, with headroom above and shoulders visible  (default)
     2 / 3  slightly tighter, head about 56% of the frame
     3 / 4  a portrait card cropped closer, head about 63%
     Change it here and every portrait and monogram follows. */
  --portrait-ratio: 3 / 5;

  /* Content photography. All the stock photos are landscape 3:2, so this is
     the shape that shows them uncropped. Used below the 900px breakpoint,
     where the grids collapse to one column and the design's fixed pixel
     heights would otherwise turn every photo into a thin letterbox strip. */
  --photo-ratio: 3 / 2;

}

/* ---------------------------------------------------------------------------
   Colour contrast note (measured, not guessed)

   18 of the 22 text/background pairs on this site meet WCAG 2.1 AA. Four of
   the palette's own values land just under 4.5:1 at small sizes:

     --text-soft   #6A7482 on --cream  #F7F6F2   4.38:1   (quote sources)
     --on-dark-mute#6E7C8F on --navy   #0D182A   4.18:1   (footer small print,
                                                           breadcrumbs)
     --teal-deep   #2E7D78 on --cream  #F7F6F2   4.49:1   (eyebrow labels)

   The exact hex values from the design handoff are kept above, because the
   brief asks for them. If you would rather clear AA everywhere, these three
   swaps do it and are visually near-identical:

     --text-soft:     #68717E;   (4.57:1)
     --on-dark-mute:  #768396;   (4.62:1)
     --teal-deep:     #2D7B76;   (4.62:1 on cream, 4.86:1 on white)

   Nothing else needs to change — every use of these colours flows from the
   tokens above.
   ------------------------------------------------------------------------- */


/* 3. Reset & base
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

a { color: var(--teal-deep); }
a:hover { color: var(--navy); }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; }

button, input, textarea, select { font: inherit; color: inherit; }

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

/* Skip link — keyboard users bypass the nav */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--coral);
  color: var(--navy);
  font-family: var(--font-head);
  padding: 14px 22px;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: var(--navy);
}

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


/* 4. Layout
   ========================================================================== */

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

/* Section band backgrounds */
.band-cream { background: var(--cream); }
.band-white { background: var(--white); }
.band-navy  { background: var(--navy); }
.band-teal  { background: var(--teal); }

/* Vertical rhythm — the handoff uses a small set of section paddings */
.pad-88 { padding: 88px 0; }
.pad-84 { padding: 84px 0; }
.pad-80 { padding: 80px 0; }
.pad-76 { padding: 76px 0; }
.pad-72 { padding: 72px 0; }
.pad-56 { padding: 56px 0; }

.stack   { display: flex; flex-direction: column; }
.stack-8  { gap: 8px; }  .stack-10 { gap: 10px; } .stack-12 { gap: 12px; }
.stack-14 { gap: 14px; } .stack-16 { gap: 16px; } .stack-18 { gap: 18px; }
.stack-20 { gap: 20px; } .stack-22 { gap: 22px; } .stack-24 { gap: 24px; }
.stack-26 { gap: 26px; } .stack-28 { gap: 28px; } .stack-30 { gap: 30px; }
.stack-36 { gap: 36px; } .stack-38 { gap: 38px; } .stack-40 { gap: 40px; }
.stack-44 { gap: 44px; } .stack-56 { gap: 56px; }

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

/* Hairline grids: 1px gap over a border-coloured backdrop makes the rules */
.grid-hairline { gap: 1px; background: var(--border); }
.grid-hairline-dark { gap: 1px; background: var(--navy-line); }

.gap-1  { gap: 1px; }  .gap-20 { gap: 20px; } .gap-22 { gap: 22px; }
.gap-24 { gap: 24px; } .gap-26 { gap: 26px; } .gap-28 { gap: 28px; }
.gap-30 { gap: 30px; } .gap-56 { gap: 56px; } .gap-60 { gap: 60px; }
.gap-64 { gap: 64px; } .gap-70 { gap: 70px; }
.gap-28-20 { gap: 28px 20px; }
.gap-24-20 { gap: 24px 20px; }

.split { display: grid; gap: 70px; align-items: center; }
.split--start { align-items: start; }
.split--end   { align-items: end; }

/* Column ratios live in classes, never inline styles — an inline
   grid-template-columns would override the mobile media query and stop the
   layout collapsing to one column. */
.split--even       { grid-template-columns: 1fr 1fr; }
.split--wide-left  { grid-template-columns: 1.15fr 1fr; }
.split--wide-right { grid-template-columns: 1fr 1.05fr; }

/* Section head: title block left, "see all" link right, baseline-aligned */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.section-head__text { display: flex; flex-direction: column; gap: 12px; max-width: 660px; }


/* 5. Typography
   ========================================================================== */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.eyebrow--on-dark { color: var(--teal); }
.eyebrow--coral   { color: var(--coral); }
.eyebrow--sm { font-size: 11px; }

/* Eyebrow with the leading 40px rule (hero) */
.eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.16em;
}
.eyebrow--ruled::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--teal);
  display: block;
  flex: none;
}

.h-hero {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cream);
  max-width: 950px;
  text-wrap: balance;
}
.h-page {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 62px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--cream);
  max-width: 880px;
  text-wrap: balance;
}
.h-service {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 58px;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--cream);
  text-wrap: balance;
}
.legal-title {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 58px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--cream);
  max-width: 820px;
  text-wrap: balance;
}
.h-46 { font-weight: 400; font-size: 46px; line-height: 1.08; color: var(--navy); }
.h-44 { font-weight: 400; font-size: 44px; line-height: 1.08; color: var(--navy); }
.h-40 { font-weight: 400; font-size: 40px; line-height: 1.08; color: var(--navy); }
.h-38 { font-weight: 400; font-size: 38px; line-height: 1.1;  color: var(--navy); }
.h-34 { font-weight: 400; font-size: 34px; line-height: 1.1;  color: var(--navy); }
.h-32 { font-weight: 400; font-size: 32px; line-height: 1.1;  color: var(--navy); }
.h-40--light { font-weight: 300; color: var(--cream); text-wrap: balance; }
.h-46--tight { line-height: 1.06; }

.lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--on-dark-lede);
  max-width: 680px;
  text-wrap: pretty;
}
.lede--page {
  font-size: 19px;
  line-height: 1.6;
  color: var(--on-dark);
  max-width: 680px;
  text-wrap: pretty;
}
.lede--light {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}
.lede--17 {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}

.body-16 { font-size: 16px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.body-15 { font-size: 15px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.body-17-navy { font-size: 17px; line-height: 1.55; color: var(--navy); }
.body-on-dark { font-size: 17px; line-height: 1.6; color: var(--on-dark); text-wrap: pretty; }
.body-on-dark-16 { font-size: 16px; line-height: 1.6; color: var(--on-dark); }
.small-soft { font-size: 15px; color: var(--text-soft); }
.note-14 { font-size: 14px; line-height: 1.5; color: var(--text-soft); }

.max-620 { max-width: 620px; } .max-640 { max-width: 640px; }
.max-660 { max-width: 660px; } .max-680 { max-width: 680px; }
.max-700 { max-width: 700px; } .max-720 { max-width: 720px; }
.max-760 { max-width: 760px; } .max-880 { max-width: 880px; }


/* 6. Buttons & links
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 17px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary {
  background: var(--coral);
  color: var(--navy);
  padding: 18px 32px;
}
.btn--primary:hover { background: var(--cream); color: var(--navy); }

/* On light backgrounds the coral button inverts to navy on hover */
.btn--primary-on-light:hover { background: var(--navy); color: var(--cream); }

.btn--dark {
  background: var(--navy);
  color: var(--cream);
  padding: 18px 32px;
}
.btn--dark:hover { background: var(--cream); color: var(--navy); }

.btn--ghost {
  color: var(--cream);
  border: 1px solid var(--navy-line-3);
  padding: 18px 30px;
}
.btn--ghost:hover { border-color: var(--coral); color: var(--coral); }

.btn--sm { font-size: 16px; padding: 15px 26px; }
.btn--md { padding: 17px 28px; }
.btn--md-wide { padding: 17px 32px; }

/* Underlined "more" link with the teal rule */
.link-rule {
  font-family: var(--font-head);
  font-size: 17px;
  color: var(--navy);
  border-bottom: 1px solid var(--teal);
  padding-bottom: 3px;
  white-space: nowrap;
  text-decoration: none;
  align-self: flex-start;
}
.link-rule:hover { color: var(--teal-deep); border-bottom-color: var(--teal-deep); }
.link-rule--16 { font-size: 16px; }

.link-more {
  font-family: var(--font-head);
  font-size: 15px;
  color: var(--teal-deep);
}


/* 7. Site navigation
   ========================================================================== */

.ribbon {
  background: var(--navy-deep);
  padding: 10px 0;
}
.ribbon__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
}
.ribbon__address { color: var(--on-dark-soft); }
.ribbon__links { display: flex; align-items: center; gap: 24px; }
.ribbon a { color: var(--on-dark-soft); text-decoration: none; }
.ribbon a:hover { color: var(--cream); }
.ribbon a.ribbon__portal { color: var(--coral); }
.ribbon a.ribbon__portal:hover { color: var(--cream); }

.navbar {
  background: var(--navy);
  border-bottom: 1px solid var(--navy-line);
  position: relative;
  z-index: 40;
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.nav-top { display: flex; align-items: center; gap: 16px; }

.wordmark {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: none;
  text-decoration: none;
}
.wordmark__name {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--cream);
}
.wordmark__rule { height: 1px; background: var(--teal); display: block; }
.wordmark__sub {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.wordmark__sub b { color: var(--teal); font-weight: 600; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--navy-line-2);
  color: var(--cream);
  font-family: var(--font-head);
  font-size: 15px;
  padding: 0 16px;
  min-height: 46px;
  cursor: pointer;
}
.nav-toggle__icon { font-size: 15px; color: var(--coral); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-head);
  font-size: 15px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 0;
}
.nav-item > a {
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
}
.nav-item > a:hover { color: var(--coral); }
.nav-item--services > a { display: flex; align-items: center; gap: 7px; }
.nav-item__caret { font-size: 10px; color: var(--teal); }

/* Coral underline marks the current page. The bar carries data-active and
   each item carries data-nav; only the matching pair shows its underline. */
.nav-item__underline { height: 2px; background: var(--coral); display: none; }
.nav-links[data-active="services"] [data-nav="services"] .nav-item__underline,
.nav-links[data-active="sectors"]  [data-nav="sectors"]  .nav-item__underline,
.nav-links[data-active="mtd"]      [data-nav="mtd"]      .nav-item__underline,
.nav-links[data-active="about"]    [data-nav="about"]    .nav-item__underline,
.nav-links[data-active="team"]     [data-nav="team"]     .nav-item__underline,
.nav-links[data-active="contact"]  [data-nav="contact"]  .nav-item__underline { display: block; }

/* Services mega-panel */
.nav-panel {
  position: absolute;
  top: 100%;
  left: -22px;
  width: 520px;
  background: var(--white);
  box-shadow: 0 24px 50px -20px rgba(13, 24, 42, 0.35);
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 22px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}
.nav-item--services:hover .nav-panel,
.nav-item--services:focus-within .nav-panel,
.nav-panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
}
.nav-panel a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px;
  border-left: 2px solid transparent;
  text-decoration: none;
}
.nav-panel a:hover,
.nav-panel a:focus-visible {
  background: var(--cream);
  border-left-color: var(--teal);
}
.nav-panel__title { font-family: var(--font-head); font-size: 16px; color: var(--navy); }
.nav-panel__desc  { font-family: var(--font-body); font-size: 13px; color: var(--text-soft); }

.nav-cta {
  background: var(--coral);
  color: var(--navy);
  font-family: var(--font-head);
  padding: 13px 22px;
  text-decoration: none;
  flex: none;
}
.nav-cta:hover { background: var(--cream); color: var(--navy); }


/* 8. Footer
   ========================================================================== */

.cta-band { background: var(--teal); padding: 76px 0; }
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.cta-band__text { display: flex; flex-direction: column; gap: 12px; max-width: 680px; }
.cta-band h2 {
  font-weight: 400;
  font-size: 44px;
  line-height: 1.08;
  color: var(--navy);
  text-wrap: balance;
}
.cta-band p { font-size: 18px; line-height: 1.55; color: var(--teal-ink); text-wrap: pretty; }
.cta-band__action { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cta-band__call { font-size: 15px; color: var(--teal-ink); }
.cta-band__call strong { font-weight: 600; }
.cta-band .btn--dark { white-space: nowrap; }

.footer { background: var(--navy); padding: 62px 0 32px; }
.footer__inner { display: flex; flex-direction: column; gap: 44px; }
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 44px;
}
.footer__brand { display: flex; flex-direction: column; gap: 18px; }
.footer__wordmark { display: flex; flex-direction: column; gap: 5px; }
.footer__wordmark .wordmark__name { font-size: 28px; }
.footer__wordmark .wordmark__rule { max-width: 240px; }
.footer__address,
.footer__contact { font-size: 15px; color: var(--on-dark); }
.footer__address { line-height: 1.6; }
.footer__contact { line-height: 1.8; }
.footer__contact a { color: var(--on-dark); text-decoration: none; }
.footer__contact a:hover { color: var(--cream); }

.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__heading {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.footer__heading--spaced { padding-top: 10px; }
.footer__col a { font-size: 15px; color: var(--on-dark); text-decoration: none; }
.footer__col a:hover { color: var(--cream); }
.footer__col span:not(.footer__heading) { font-size: 15px; line-height: 1.7; color: var(--on-dark); }

.footer__legal {
  border-top: 1px solid var(--navy-line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.footer__legal p { font-size: 13px; line-height: 1.6; color: var(--on-dark-mute); }
.footer__legal-links { display: flex; gap: 8px; font-size: 13px; color: var(--on-dark-mute); }
.footer__legal-links a { color: var(--on-dark-mute); text-decoration: none; }
.footer__legal-links a:hover { color: var(--cream); }


/* 9. Components
   ========================================================================== */

/* --- Hero (home) --- */
.hero {
  position: relative;
  background: var(--navy);
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(13, 24, 42, 0.95) 0%,
    rgba(13, 24, 42, 0.8) 45%,
    rgba(13, 24, 42, 0.35) 100%);
}
.hero__body {
  position: relative;
  padding-top: 96px;
  padding-bottom: 44px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-top: 4px;
  flex-wrap: wrap;
}
.hero__stats { position: relative; border-top: 1px solid var(--hairline-dark-strong); }
.hero__stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat {
  padding: 26px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid var(--hairline-dark);
}
.stat:first-child { padding-left: 0; }
.stat:last-child  { border-right: none; }
.stat__num {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 38px;
  line-height: 1;
  color: var(--cream);
}
.stat__label { font-size: 15px; color: var(--on-dark); }

/* --- Page header band (interior pages) --- */
.page-head { background: var(--navy); padding: 64px 0 72px; }
.page-head--tall { padding: 64px 0 76px; }
.page-head__inner { display: flex; flex-direction: column; gap: 22px; }

/* Service page header: title block + booking card */
.service-head { background: var(--navy); padding: 60px 0 72px; }
.service-head__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: end;
}
.service-head__text { display: flex; flex-direction: column; gap: 20px; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--on-dark-mute);
}
.breadcrumb a { color: var(--on-dark-mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal); }
.breadcrumb__current { color: var(--on-dark); }

.book-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--navy-panel);
  padding: 30px 32px;
}
.book-card__title { font-family: var(--font-head); font-size: 22px; color: var(--cream); }
.book-card__body  { font-size: 16px; line-height: 1.55; color: var(--on-dark); }
.book-card__call  { font-size: 15px; color: var(--on-dark); }
.book-card .btn { align-self: flex-start; }

/* --- Trust bar --- */
.trustbar { background: var(--white); border-bottom: 1px solid var(--border); }
.trustbar__inner {
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.trustbar__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.trustbar__marks { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.trustmark {
  height: 42px;
  padding: 0 16px;
  background: var(--cream);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* --- Service cards (home grid) --- */
.service-card {
  background: var(--white);
  padding: 36px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 244px;
  border-top: 3px solid transparent;
  text-decoration: none;
  transition: border-top-color 0.15s ease;
}
.service-card:hover { border-top-color: var(--teal); }
.service-card__num { font-family: var(--font-mono); font-size: 12px; color: var(--teal-deep); }
.service-card__title {
  font-family: var(--font-head);
  font-size: 28px;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.service-card__body { font-size: 16px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.service-card .link-more { margin-top: auto; }

/* --- Feature card (what's included) --- */
.feature-card {
  background: var(--white);
  padding: 30px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 3px solid var(--teal);
}
.feature-card__title { font-family: var(--font-head); font-size: 22px; color: var(--navy); }
.feature-card__body { font-size: 16px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.feature-card--on-cream { background: var(--cream); }

/* --- Values list (marker · label · description) --- */
.values { display: flex; flex-direction: column; padding-top: 4px; }
.value-row {
  display: grid;
  grid-template-columns: 14px 190px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.value-row__marker { width: 8px; height: 8px; background: var(--teal); display: block; }
.value-row__label { font-family: var(--font-head); font-size: 19px; color: var(--navy); }
.value-row__body  { font-size: 15px; line-height: 1.55; color: var(--text); text-wrap: pretty; }

/* --- Numbered steps --- */
.steps { display: flex; flex-direction: column; }
.step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.step__num  { font-family: var(--font-head); font-size: 20px; color: var(--teal); }
.step__body { font-size: 17px; line-height: 1.55; color: var(--navy); }

/* --- Small service tag links (sector rows) --- */
.tag-links { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.tag-link {
  background: var(--cream);
  padding: 9px 15px;
  font-size: 15px;
  color: var(--navy);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.tag-link:hover { background: var(--teal-tint); color: var(--navy); }
.tag-link--on-cream { background: var(--white); }

/* --- Principle cards (about) --- */
.principle-card {
  background: var(--white);
  border-top: 3px solid var(--teal);
  padding: 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.principle-card__title { font-family: var(--font-head); font-size: 26px; color: var(--navy); }
.principle-card__body { font-size: 17px; line-height: 1.6; color: var(--text); text-wrap: pretty; }

/* --- Spec rows on a dark band (label / value) --- */
.data-rows { display: flex; flex-direction: column; gap: 1px; background: var(--navy-line); }
.data-row {
  background: var(--navy);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 16px;
}
.data-row dt { color: var(--on-dark); margin: 0; }
.data-row dd { color: var(--cream); margin: 0; text-align: right; }

/* --- MTD phase cards --- */
.phase-card {
  background: var(--cream);
  border-top: 4px solid var(--teal);
  padding: 30px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phase-card--now { border-top-color: var(--coral); }
.phase-card__when { font-family: var(--font-head); font-size: 30px; color: var(--navy); }
.phase-card__who  { font-family: var(--font-head); font-size: 19px; color: var(--teal-deep); }
.phase-card__body { font-size: 16px; line-height: 1.55; color: var(--text); text-wrap: pretty; }

/* --- Tinted callout bar --- */
.callout {
  background: var(--teal-tint);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.callout__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  white-space: nowrap;
}
.callout__body { font-size: 16px; line-height: 1.5; color: var(--navy); }

/* --- Plain card with a marker list and a CTA --- */
.ready-card {
  background: var(--white);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ready-card__title { font-family: var(--font-head); font-size: 22px; color: var(--navy); }
.ready-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ready-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy);
}
.ready-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--teal);
  display: block;
  flex: none;
}
.ready-card .btn { align-self: flex-start; }

/* --- Marker rows (contractor / subcontractor lists) --- */
.marked-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.marked-list li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
  font-size: 17px;
  line-height: 1.55;
  color: var(--navy);
}
.marked-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--teal);
  display: block;
}
.marked-list--coral li::before { background: var(--coral); }

/* --- Question / answer rows --- */
.qa-list { display: flex; flex-direction: column; margin: 0; }
.qa {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qa__q { font-family: var(--font-head); font-size: 21px; color: var(--navy); margin: 0; }
.qa__a { font-size: 16px; line-height: 1.6; color: var(--text); margin: 0; text-wrap: pretty; }

/* --- Note card with teal/coral left rule --- */
.note-card {
  background: var(--white);
  border-left: 3px solid var(--teal);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.note-card--coral { border-left-color: var(--coral); }
.note-card--on-cream { background: var(--cream); }
.note-card__title { font-family: var(--font-head); font-size: 21px; color: var(--navy); }
.note-card__body  { font-size: 16px; line-height: 1.6; color: var(--text); }

/* Recruiting strip — note card laid out as a row */
.strip {
  background: var(--white);
  border-left: 3px solid var(--coral);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.strip__text { font-size: 17px; line-height: 1.55; color: var(--navy); }

/* --- Service list rows (services index) --- */
.service-rows { display: flex; flex-direction: column; }
.service-row {
  display: grid;
  grid-template-columns: 74px 260px 1fr 150px;
  gap: 32px;
  align-items: center;
  padding: 34px 20px;
  border-top: 1px solid var(--border);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.service-row:last-child { border-bottom: 1px solid var(--border); }
.service-row:hover { background: var(--cream); }
.service-row__num { font-family: var(--font-mono); font-size: 13px; color: var(--teal); }
.service-row__title {
  font-family: var(--font-head);
  font-size: 34px;
  letter-spacing: -0.015em;
  color: var(--navy);
}
.service-row__body { font-size: 17px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.service-row__more {
  font-family: var(--font-head);
  font-size: 16px;
  color: var(--teal-deep);
  text-align: right;
}

/* --- Big numbered cards (how we work) --- */
.step-card {
  background: var(--white);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step-card__num {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  color: var(--teal);
}
.step-card__title { font-family: var(--font-head); font-size: 24px; color: var(--navy); }
.step-card__body { font-size: 16px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.step-card--on-cream { background: var(--cream); }

/* Navy button that warms to teal (fees CTA) */
.btn--navy { background: var(--navy); color: var(--cream); padding: 17px 30px; }
.btn--navy:hover { background: var(--teal-deep); color: var(--cream); }

/* --- Cross-link cards (often taken with) --- */
.crosslink {
  background: var(--cream);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.crosslink:hover { background: var(--teal-tint); }
.crosslink--on-white { background: var(--white); }
.crosslink--on-white:hover { background: var(--teal-tint); }
.crosslink__title { font-family: var(--font-head); font-size: 24px; color: var(--navy); }
.crosslink__body  { font-size: 16px; line-height: 1.5; color: var(--text); }
.crosslink .link-more { padding-top: 4px; }

/* --- Sector cards (image + label) --- */
.sector-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.sector-card:hover { opacity: 0.85; }
.sector-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  background: var(--placeholder);
}
.sector-card__title {
  font-family: var(--font-head);
  font-size: 21px;
  color: var(--navy);
  line-height: 1.2;
}
.sector-card__body { font-size: 15px; line-height: 1.5; color: var(--text); text-wrap: pretty; }

/* --- Team --- */
.person { display: flex; flex-direction: column; gap: 14px; }

/* Portraits and the placeholders that stand in for missing ones share one
   box, so a person without a photograph occupies exactly the same space.
   object-position 50% 40% holds the eyeline at 40% of the box whatever the
   ratio, which is what keeps the row of faces aligned. */
/* Portraits and monograms share one box so the rows stay aligned whether or
   not someone has a photograph. Only the img carries the grey loading fill —
   the monogram sets its own background below. */
.person img,
.person .person__monogram {
  width: 100%;
  height: auto;
  aspect-ratio: var(--portrait-ratio);
  display: flex;
}
.person img {
  display: block;
  object-fit: cover;
  object-position: 50% 40%;
  background: var(--placeholder);
}

/* Stands in for a portrait where someone would rather not have their
   photograph on the site. Navy rather than a grey blank, so it reads as a
   deliberate part of the set alongside the dark-background portraits rather
   than as a missing image. The letter is decorative — the name follows
   underneath, so it is aria-hidden in the markup. */
.person .person__monogram {
  background: var(--navy);
  color: var(--cream);
  align-items: center;
  justify-content: center;
  user-select: none;
  container-type: inline-size;
}
/* The letter sits in a child because container units cannot resolve against
   the element that declares the container. */
.person__monogram span {
  font-family: var(--font-head);
  font-weight: 300;
  line-height: 1;
  font-size: 44px;                       /* fallback where cqw is unsupported */
  font-size: clamp(24px, 21cqw, 64px);   /* scales with the tile, not the page */
}
.person__text { display: flex; flex-direction: column; gap: 4px; }
.person__name { font-family: var(--font-head); font-size: 26px; line-height: 1.1; color: var(--navy); }
.person__role { font-size: 16px; line-height: 1.5; color: var(--text); text-wrap: pretty; }

.team-group { display: flex; flex-direction: column; gap: 26px; }
.team-group__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
  border-top: 1px solid var(--border);
  padding-top: 26px;
}

/* --- Testimonials --- */
.quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.quote {
  padding: 56px 48px 56px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--border);
}
.quote + .quote { padding: 56px 0 56px 48px; border-right: none; }

/* Quotes sitting inside another section rather than in their own full-bleed
   band — the section already supplies the vertical padding. */
.quotes--inline .quote { padding: 0 48px 0 0; }
.quotes--inline .quote + .quote { padding: 0 0 0 48px; }
.quote__text {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 27px;
  line-height: 1.32;
  color: var(--navy);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.quote__source { font-size: 15px; color: var(--text-soft); }

/* --- MTD strip --- */
.mtd-tag {
  background: var(--coral);
  color: var(--navy);
  padding: 5px 9px;
  letter-spacing: 0.1em;
}
.mtd-dates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--navy-line); }
.mtd-date {
  background: var(--navy);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mtd-date__when { font-family: var(--font-head); font-size: 22px; color: var(--coral); }
.mtd-date__who  { font-size: 15px; color: var(--on-dark); }

/* --- Contact --- */
.contact-form { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: 15px; color: var(--text); }
.field input,
.field textarea,
.field select {
  padding: 14px 15px;
  border: 1px solid var(--border-input);
  background: var(--cream);
  color: var(--navy);
  font-size: 16px;
  border-radius: 0;
  width: 100%;
  /* Inputs carry an intrinsic min-width from their `size`; without this they
     refuse to shrink and push the page wider on very narrow screens. */
  min-width: 0;
}
.field { min-width: 0; }
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--teal);
  outline: 2px solid rgba(75, 166, 160, 0.35);
  outline-offset: 0;
}
.field input::placeholder,
.field textarea::placeholder { color: #97A0AC; }

/* Validation */
.field--error input,
.field--error textarea { border-color: #C0392B; }
.field__error {
  font-size: 14px;
  line-height: 1.4;
  color: #C0392B;
  display: none;
}
.field--error .field__error { display: block; }

.chip-set { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { position: relative; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: block;
  border: 1px solid var(--border-input);
  background: var(--cream);
  padding: 10px 16px;
  font-size: 15px;
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.chip:hover span { border-color: var(--teal); background: var(--teal-tint); }
.chip input:checked + span {
  border-color: var(--teal);
  background: var(--teal-tint);
  color: var(--navy);
}
.chip input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }

.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-status { font-size: 16px; color: var(--teal-deep); }
.form-status--error { color: #C0392B; }
.form-status[hidden] { display: none; }

.contact-panel {
  background: var(--cream);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-panel__title { font-family: var(--font-head); font-size: 26px; color: var(--navy); }
.contact-block { display: flex; flex-direction: column; gap: 4px; }
.contact-block__value { font-size: 17px; line-height: 1.6; color: var(--navy); }
.contact-block a.contact-block__value { text-decoration: none; }
.contact-block a.contact-block__value:hover { color: var(--teal-deep); }

.map {
  height: 300px;
  border: 0;
  width: 100%;
  display: block;
  background: var(--placeholder);
}
.map-caption { font-size: 14px; line-height: 1.5; color: var(--text-soft); }

.getting-here {
  background: var(--navy);
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.getting-here__title { font-family: var(--font-head); font-size: 22px; color: var(--cream); }
.getting-here__body  { font-size: 16px; line-height: 1.6; color: var(--on-dark); }

/* --- Legal pages --- */
.wrap--narrow { max-width: 820px; }

.legal { display: flex; flex-direction: column; gap: 44px; }
.legal section { display: flex; flex-direction: column; gap: 12px; }
.legal h2 {
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--navy);
}
.legal h3 {
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  color: var(--navy);
  padding-top: 10px;
}
.legal p, .legal li { font-size: 17px; line-height: 1.65; color: var(--text); text-wrap: pretty; margin: 0; }
.legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.legal li::marker { color: var(--teal); }
/* Long URLs in legal text must not push the page sideways on a phone. */
.legal a { color: var(--teal-deep); overflow-wrap: anywhere; }

/* Section numbers are written into the markup rather than generated, because
   the notice cross-references them ("noted at paragraph 11, below") and that
   reference has to survive with styles off, in print and when copied out. */
.legal__num { color: var(--teal-deep); }

.legal__updated {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Key-fact callout inside legal copy (ICO contact details) */
.legal-panel {
  background: var(--cream);
  border-left: 3px solid var(--teal);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Placeholder wording flagged for legal sign-off */
.draft-note {
  background: var(--cream);
  border-left: 3px solid var(--coral);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.draft-note__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A0543E;
}
.draft-note__body { font-size: 16px; line-height: 1.55; color: var(--text); text-wrap: pretty; }

/* --- Generic image --- */
.img-block { width: 100%; object-fit: cover; display: block; background: var(--placeholder); }
.h-520 { height: 520px; } .h-460 { height: 460px; } .h-420 { height: 420px; }
.h-380 { height: 380px; } .h-340 { height: 340px; } .h-320 { height: 320px; }
.h-300 { height: 300px; } .h-280 { height: 280px; } .h-260 { height: 260px; }

/* --- 404 --- */
.notfound { padding: 120px 0 130px; }
.notfound__code {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 96px;
  line-height: 1;
  color: var(--teal);
}


/* 10. Page-specific
   ========================================================================== */

/* Two-column dark band (MTD strip on home) */
.dark-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}

/* Who-we-help alternating sector rows.
   Which side the photograph sits on is set by DOM order; the ratio classes
   below carry the widths (see the note on .split--even above). */
.sector-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.sector-row--media-first { grid-template-columns: 1fr 1.1fr; }
.sector-row--text-first  { grid-template-columns: 1.1fr 1fr; }
.sector-row__text { display: flex; flex-direction: column; gap: 18px; }

.tick-list { display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; list-style: none; }
.tick-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  align-items: baseline;
}
.tick-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--teal);
  display: block;
}


/* 11. Responsive
   --------------------------------------------------------------------------
   Ports the intent of the handoff's data-responsive block: single column,
   reduced padding and type, hamburger nav, 44px+ touch targets.
   ========================================================================== */

@media (max-width: 900px) {
  :root { --pad: 20px; }

  /* --- Nav --- */
  .navbar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .nav-top { width: 100%; justify-content: space-between; }
  .nav-toggle { display: inline-flex; }
  .wordmark__name { font-size: 22px; }
  .footer__wordmark .wordmark__name { font-size: 22px; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    justify-content: flex-start;
    border-top: 1px solid var(--navy-line);
    margin-top: 4px;
  }
  /* Collapse the menu only when scripting is available (the .js class is set
     in <head>). With JavaScript off there is no toggle to press, so the nav
     stays open as a stacked list rather than becoming unreachable. */
  .js .nav-links { display: none; }
  .js .nav-links[data-open="true"] { display: flex; }
  .nav-item {
    padding: 0;
    border-bottom: 1px solid var(--navy-line);
    width: 100%;
  }
  .nav-item > a {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: 17px;
  }
  .nav-links[data-active] .nav-item__underline { display: none; }
  .nav-links[data-active="services"] [data-nav="services"] > a,
  .nav-links[data-active="sectors"]  [data-nav="sectors"]  > a,
  .nav-links[data-active="mtd"]      [data-nav="mtd"]      > a,
  .nav-links[data-active="about"]    [data-nav="about"]    > a,
  .nav-links[data-active="team"]     [data-nav="team"]     > a,
  .nav-links[data-active="contact"]  [data-nav="contact"]  > a { color: var(--coral); }
  .nav-panel { display: none; }
  .nav-cta {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 14px 0 4px;
    padding: 15px 12px;
    font-size: 17px;
    text-align: center;
    flex: none;
  }
  .ribbon__address { display: none; }
  .ribbon__inner { justify-content: flex-start; }

  /* --- Section padding --- */
  .pad-88 { padding: 46px 0; }
  .pad-84 { padding: 44px 0; }
  .pad-80 { padding: 42px 0; }
  .pad-76 { padding: 42px 0; }
  .pad-72 { padding: 40px 0; }
  .pad-56 { padding: 36px 0; }
  .cta-band { padding: 42px 0; }
  .footer { padding: 40px 0 24px; }
  .page-head { padding: 40px 0 40px; }
  .page-head--tall { padding: 40px 0 42px; }
  .service-head { padding: 38px 0 40px; }
  .hero__body { padding-top: 56px; padding-bottom: 30px; }
  .trustbar__inner { padding-top: 18px; padding-bottom: 18px; }
  .notfound { padding: 60px 0 70px; }

  /* --- Grids collapse --- */
  .cols-2, .cols-3,
  .split, .split--even, .split--wide-left, .split--wide-right,
  .dark-split,
  .sector-row, .sector-row--media-first, .sector-row--text-first,
  .service-head__inner, .quotes,
  .footer__cols { grid-template-columns: 1fr; }
  .cols-4, .cols-5, .hero__stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Portraits are tall, so keep three across on tablets rather than two —
     two-up would make each card around 580px high. */
  .team-group .grid { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }

  /* Sector cards are small photo tiles; full width on a tablet is far wider
     than they are meant to be read at. */
  .sector-grid { grid-template-columns: repeat(2, 1fr); }

  /* On one column the photograph always leads the copy it belongs to. */
  .sector-row--text-first .sector-row__media { order: -1; }
  .sector-row { gap: 28px; }

  .gap-56, .gap-60, .gap-64, .gap-70 { gap: 28px; }
  .split { gap: 28px; }
  .stack-56 { gap: 28px; }
  .footer__cols { gap: 28px; }

  .value-row { display: flex; flex-direction: column; gap: 5px; }
  .value-row__marker { display: none; }

  .service-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0;
  }
  .service-row__more { text-align: left; }
  .service-row__title { font-size: 23px; }
  .service-row__body { font-size: 16px; }
  .step-card { padding: 24px 22px; }
  .step-card__num { font-size: 30px; }
  .step-card__title { font-size: 20px; }

  /* --- Type scale --- */
  .h-hero { font-size: 36px; }
  .h-page { font-size: 32px; }
  .h-service { font-size: 30px; }
  .legal-title { font-size: 30px; }
  .h-46 { font-size: 28px; }
  .h-44, .cta-band h2 { font-size: 27px; }
  .h-40 { font-size: 25px; }
  .h-38 { font-size: 24px; }
  .h-34 { font-size: 23px; }
  .h-32 { font-size: 23px; }
  .legal h2 { font-size: 22px; }

  .stat__num { font-size: 24px; }
  .service-card__title { font-size: 22px; }
  .person__name { font-size: 20px; }
  .crosslink__title { font-size: 20px; }
  .contact-panel__title { font-size: 20px; }
  .quote__text { font-size: 20px; }
  .notfound__code { font-size: 56px; }

  .lede { font-size: 17px; }
  .lede--page, .lede--light, .lede--17,
  .body-on-dark, .legal p, .legal li { font-size: 16px; }

  /* --- Boxes --- */
  .hero { min-height: 0; }
  .h-520 { height: 240px; }
  .h-460 { height: 260px; }
  .h-420 { height: 220px; }
  .h-380 { height: 200px; }
  .h-340, .h-320, .h-300 { height: 220px; }
  /* .person img and .person__monogram are sized by --portrait-ratio, not height */
  .h-280, .h-260 { height: 180px; }

  /* Below this breakpoint the grids are one column, so every content photo is
     full width. Holding the fixed heights above would letterbox them badly
     (a 713x130 sector card is a 5.5:1 slit). Sizing by ratio instead shows
     the photograph as photographed, at every width. This rule follows the
     .h-* rules deliberately so it overrides them. */
  .img-block,
  .sector-card img {
    height: auto;
    aspect-ratio: var(--photo-ratio);
  }

  .service-card { min-height: 0; }

  .stat { padding: 18px 20px 20px 0; }
  .stat:nth-child(2n) { border-right: none; padding-right: 0; }
  .stat:nth-child(2n+1) { padding-left: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--hairline-dark); }

  .quote { padding: 32px 0; border-right: none; border-bottom: 1px solid var(--border); }
  .quote + .quote { padding: 32px 0; border-bottom: none; }
  /* Same specificity as the inline rule above, so it has to be restated here
     or the 48px side padding survives into the stacked layout. */
  .quotes--inline .quote { padding: 0 0 28px; border-right: none; border-bottom: 1px solid var(--border); }
  .quotes--inline .quote + .quote { padding: 28px 0 0; border-bottom: none; }

  .book-card { padding: 24px 22px; }
  .contact-panel { padding: 24px 22px; }
  .trustmark { height: 36px; }

  /* --- Touch targets ---------------------------------------------------
     Every standalone tappable thing gets at least 44px of height (WCAG 2.5.5).
     Targets are spaced rather than overlapped, so neighbours never steal a
     tap. Links inside running prose are exempt — they are read, not aimed at. */
  .btn { padding: 14px 22px; }
  .btn--sm { padding: 13px 20px; }
  .chip span { padding: 12px 16px; }

  .ribbon { padding: 0; }
  .ribbon__inner { gap: 0 18px; }
  .ribbon a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer__col { gap: 0; }
  .footer__col a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__col .footer__heading { padding-bottom: 8px; }
  .footer__col .footer__heading--spaced { padding-top: 18px; }

  .link-rule {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    /* Long "more" links must be allowed to wrap once the column is narrow. */
    white-space: normal;
  }

  .wordmark { min-height: 44px; justify-content: center; }

  .tag-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 16px;
  }

  .contact-block a.contact-block__value,
  .footer__contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  /* Grid and flex children default to min-width:auto, which stops long words,
     inputs and images shrinking. Let them. */
  .grid > *, .split > *, .sector-row > * { min-width: 0; }
  .cols-4, .cols-5, .hero__stats-grid { grid-template-columns: 1fr; }

  /* Faces stay two-up on phones. One portrait per row would be around 500px
     tall and turn the team page into a very long scroll. */
  .team-group .grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }

  .stat { border-right: none; border-bottom: 1px solid var(--hairline-dark); padding: 16px 0; }
  .stat:last-child { border-bottom: none; }
  .mtd-dates { grid-template-columns: 1fr; }
  .contact-form .cols-2 { grid-template-columns: 1fr; }

  .h-hero { font-size: 30px; }
  .h-page { font-size: 27px; }
  .h-service { font-size: 26px; }
  .nav-item > a { font-size: 16px; }
  .section-head { gap: 20px; }

  /* Below this width the hero box turns portrait and a landscape photograph
     has to crop hard — centred, that lands on empty office. Biasing right
     keeps a person in frame, as on desktop. A full-bleed hero always crops;
     this just chooses where. */
  .hero__img { object-position: 72% 50%; }
}

/* Very narrow devices — the Galaxy Z Fold cover screen (280px) and older
   small handsets. The wordmark and Menu button stop fitting side by side. */
@media (max-width: 340px) {
  :root { --pad: 14px; }

  .nav-top { flex-wrap: wrap; gap: 10px; }
  .wordmark__name { font-size: 19px; }
  /* Keep these at 10px — the design's own size. Tightening the tracking
     buys back more width than shrinking the type, and 9px uppercase with
     wide letter-spacing is genuinely hard to read. */
  .wordmark__sub { font-size: 10px; letter-spacing: 0.1em; }
  .nav-toggle { padding: 0 12px; font-size: 14px; }

  .ribbon__inner { gap: 0 12px; }
  .ribbon a { font-size: 12px; }

  .h-hero { font-size: 27px; }
  .h-page, .legal-title { font-size: 25px; }
  .h-service { font-size: 24px; }

  .trustmark { font-size: 10px; padding: 0 8px; letter-spacing: 0.03em; }
  .book-card, .contact-panel, .ready-card { padding: 20px 16px; }
  .btn { padding: 13px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .ribbon, .navbar, .cta-band, .skip-link { display: none; }
  body { background: #fff; }
  .footer { background: #fff; padding: 20px 0; }
  .footer *, .footer a { color: #000 !important; }
}