/* Neue Helvena — self-hosted. Only the five weights the site actually uses.
   The vendor stylesheet declared Bold and Extrabold both at font-weight:bold, so
   Extrabold silently won everywhere; Bold is mapped to 700 here and Extrabold is
   left out because nothing uses it. */
@font-face {
  font-family: "Neue Helvena";
  src: url("assets/fonts/NeueHelvena-Light.woff2") format("woff2"),
       url("assets/fonts/NeueHelvena-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Helvena";
  src: url("assets/fonts/NeueHelvena-Regular.woff2") format("woff2"),
       url("assets/fonts/NeueHelvena-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Helvena";
  src: url("assets/fonts/NeueHelvena-Medium.woff2") format("woff2"),
       url("assets/fonts/NeueHelvena-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Helvena";
  src: url("assets/fonts/NeueHelvena-Semibold.woff2") format("woff2"),
       url("assets/fonts/NeueHelvena-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Helvena";
  src: url("assets/fonts/NeueHelvena-Bold.woff2") format("woff2"),
       url("assets/fonts/NeueHelvena-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #041a51;
  --navy-2: #071f5b;
  --navy-3: #0d2a67;
  --gold: #c9ae70;
  --gold-deep: #aa8a48;
  --ink: #101726;
  --muted: #5c6575;
  --cloud: #f2f3f4;
  --cloud-2: #eaecee;
  --line: #dcdfe3;
  --white: #ffffff;
  --container: min(1280px, calc(100vw - 96px));
  --ease: cubic-bezier(.2,.75,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Neue Helvena", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
/* height:auto keeps the intrinsic ratio: the width/height attributes on every <img>
   reserve layout space, but must not dictate the rendered height. */
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
::selection { background: var(--gold); color: var(--navy); }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  transform: translateY(-160%);
  background: var(--navy);
  color: white;
  padding: 12px 16px;
}
.skip-link:focus { transform: translateY(0); }

.container { width: var(--container); margin-inline: auto; }
.brand-rail {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 120;
  width: 5px;
  height: 100vh;
  display: grid;
  grid-template-rows: 38% 62%;
}
.brand-rail span:first-child { background: var(--gold); }
.brand-rail span:last-child { background: var(--navy); }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto 0;
  height: 92px;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
.site-header.scrolled {
  height: 78px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(4,26,81,.08);
}
.header-inner {
  height: 100%;
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  align-items: center;
}
.brand { display: inline-flex; align-items: center; width: fit-content; }
.brand img { width: 120px; height: auto; }
.desktop-nav { display: flex; justify-content: center; gap: 32px; }
.desktop-nav a {
  position: relative;
  font-size: 13px;
  letter-spacing: .015em;
  color: #263145;
  padding: 10px 0;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 3px;
  height: 1px;
  background: var(--gold-deep);
  transition: right .25s var(--ease);
}
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { right: 0; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.header-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid rgba(4,26,81,.22);
  padding-bottom: 5px;
}
.header-cta span { color: var(--gold-deep); margin-left: 6px; }
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--navy);
  position: relative;
  cursor: pointer;
}
.menu-toggle span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 1px;
  background: white;
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 26px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }
.mobile-menu { display: none; }

.hero {
  position: relative;
  min-height: 900px;
  padding: 180px 0 90px;
  background: linear-gradient(135deg, #f4f5f6 0%, #eff1f2 100%);
  overflow: hidden;
}

.hero-watermark {
  position: absolute;
  right: -70px;
  top: 6px;
  font-size: clamp(180px, 25vw, 430px);
  font-weight: 700;
  letter-spacing: -.11em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(4,26,81,.055);
  white-space: nowrap;
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(520px, 1.07fr);
  gap: 62px;
  align-items: center;
  position: relative;
  z-index: 2;
}
/* Top-aligned like the inner pages: centred against the 650px visual frame, the
   headline sat 60px lower than every other page's first line of text. */
.hero-copy { align-self: start; }
.hero h1,
.section h2,
.footprint h2,
.cta-section h2 {
  margin: 0;
  color: var(--navy);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .96;
}
/* The display tracking above was set against Arial. Neue Helvena is narrower and its
   own word space is only .2em, so the negative tracking collapsed the gaps between
   words. Letterforms stay tight; the word gap is put back. */
.hero h1,
.page-hero h1,
.sector-detail-hero h1,
.section h2,
.footprint h2,
.cta-section h2 { word-spacing: .055em; }

.hero h1 { font-size: clamp(52px, 4.6vw, 72px); max-width: 770px; }
.hero h1 em,
.section h2 em,
.footprint h2 em { font-style: normal; color: var(--gold-deep); }
.hero-tagline {
  margin: 30px 0 15px;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.4;
  max-width: 600px;
}
.hero-summary {
  margin: 0;
  max-width: 610px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 36px; }
.button {
  min-height: 54px;
  padding: 0 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.button:hover { transform: translateY(-2px); }
.button-navy { background: var(--navy); color: white; }
.button-navy:hover { background: var(--navy-3); }
.button-gold { background: var(--gold); color: var(--navy); }
.button-gold:hover { background: #d6be87; }
.text-arrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid rgba(4,26,81,.22);
  padding-bottom: 5px;
}
.text-arrow span { color: var(--gold-deep); }
.hero-proof {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  margin-top: 52px;
  border-top: 1px solid rgba(4,26,81,.14);
  max-width: 650px;
}
.hero-proof > div { padding: 21px 18px 0 0; min-height: 80px; }
.hero-proof > div + div { border-left: 1px solid rgba(4,26,81,.14); padding-left: 22px; }
.hero-proof strong { display: block; color: var(--navy); font-size: 25px; font-weight: 500; letter-spacing: -.03em; }
.hero-proof span { display: block; color: var(--muted); font-size: 11px; margin-top: 7px; line-height: 1.35; }

.hero-visual { min-height: 650px; position: relative; }
.visual-frame {
  position: relative;
  height: 650px;
  overflow: hidden;
  background: #f0f2f3;
  border: 1px solid rgba(4,26,81,.07);
  isolation: isolate;
}
/* The inset rule and navy disc that used to sit behind the cutout car are gone: the
   hero photograph now fills the frame, so nothing behind it was ever visible. */

.visual-signature { position: absolute; top: 0; left: 0; width: 88px; height: 180px; display: grid; grid-template-rows: 44% 56%; z-index: 4; }
.visual-signature span:first-child { background: var(--gold); }
.visual-signature span:last-child { background: var(--navy); }
.vertical-label {
  position: absolute;
  right: -108px;
  top: 257px;
  width: 300px;
  transform: rotate(90deg);
  margin: 0;
  color: rgba(4,26,81,.48);
  font-size: 9px;
  letter-spacing: .28em;
  z-index: 4;
}
/* A photograph with its own background, not a cutout on white — so it fills the frame
   rather than floating in it, and the multiply blend that knocked out white is gone. */
.hero-car {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  z-index: 2;
}
.credibility-strip { background: var(--navy); color: white; }
.credibility-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.credibility-grid > div { min-height: 112px; display: flex; align-items: center; gap: 17px; padding: 0 30px; border-left: 1px solid rgba(255,255,255,.12); }
.credibility-grid > div:last-child { border-right: 1px solid rgba(255,255,255,.12); }

.credibility-grid p { margin: 0; font-size: 13px; letter-spacing: .01em; }

.section { padding: 140px 0; }

.section h2 { font-size: clamp(40px, 3.9vw, 57px); }

.facts-grid { margin-top: 100px; display: grid; grid-template-columns: 1fr 1fr 1.22fr; gap: 18px; }
.fact-card { min-height: 400px; padding: 36px; border: 1px solid var(--line); position: relative; overflow: hidden; background: white; }
.fact-primary { background: var(--cloud); }

.fact-label { margin: 0 0 13px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.fact-card h3 { margin: 0; color: var(--navy); font-size: 28px; font-weight: 400; line-height: 1.12; letter-spacing: -.035em; }
.fact-rule { width: 44px; height: 2px; background: var(--gold); margin: 25px 0; }
.fact-card > p:last-child { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0; }
.fact-image { padding: 0; border: 0; }
.fact-image img { width: 100%; height: 100%; object-fit: cover; }
.fact-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(4,26,81,.92) 100%); }
.fact-overlay { position: absolute; z-index: 2; left: 35px; right: 35px; bottom: 31px; color: white; }

.fact-overlay p { margin: 13px 0 0; max-width: 370px; font-size: 17px; line-height: 1.45; }

.role { background: var(--navy); color: white; overflow: hidden; position: relative; }

.role-header { display: grid; grid-template-columns: 1.25fr .65fr; gap: 100px; align-items: end; position: relative; z-index: 2; }
.role h2 { color: white; font-size: clamp(40px,3.75vw,56px); max-width: 860px; }
.role h2 em { color: var(--gold); }
.role-header > p { margin: 0 0 9px; color: rgba(255,255,255,.67); font-size: 15px; line-height: 1.7; max-width: 440px; }
.role-grid { margin-top: 90px; display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid rgba(255,255,255,.13); border-left: 1px solid rgba(255,255,255,.13); position: relative; z-index: 2; }
.role-card { min-height: 330px; padding: 44px; border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); position: relative; transition: background .3s var(--ease); }
.role-card:hover { background: rgba(255,255,255,.04); }
.role-card > span { position: absolute; right: 35px; top: 35px; color: var(--gold); font-size: 11px; }
.role-icon { width: 53px; height: 53px; margin-bottom: 48px; }
.role-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.role-card h3 { margin: 0 0 15px; font-size: 25px; font-weight: 400; letter-spacing: -.02em; }
.role-card p { margin: 0; color: rgba(255,255,255,.64); font-size: 14px; line-height: 1.65; max-width: 470px; }

.section-heading { display: grid; grid-template-columns: 1.2fr .55fr; gap: 90px; align-items: end; }
.section-heading > p { margin: 0 0 9px; color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 430px; }

/* Two columns, not three: the third was sized for the eyebrow that used to lead this
   block, which left the heading crushed into a narrow column and a third of the band
   empty. */
.portfolio-note { grid-column: 1 / -1; min-height: 220px; padding: 52px 48px; background: var(--gold); display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.portfolio-note h3 { margin: 0; color: var(--navy); font-size: 27px; font-weight: 400; line-height: 1.18; letter-spacing: -.03em; }
.portfolio-note > p:last-child { margin: 0; color: rgba(4,26,81,.7); font-size: 14px; line-height: 1.7; }

.footprint { position: relative; overflow: hidden; padding: 150px 0; background: #f8f8f8; }

.footprint-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr .8fr; gap: 120px; align-items: center; }
.footprint h2 { font-size: clamp(41px,3.8vw,57px); }
.footprint-copy > p:last-child { margin: 30px 0 0; max-width: 680px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.region-list { border-top: 1px solid rgba(4,26,81,.16); }
.region-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; min-height: 105px; border-bottom: 1px solid rgba(4,26,81,.16); }

.region-list strong { color: var(--navy); font-size: 19px; font-weight: 500; }
.region-list p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }

.leadership { background: white; }
.leadership-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 110px; align-items: center; }
.leadership-signature { min-height: 690px; position: relative; background: var(--cloud); overflow: hidden; }

.leadership-signature::after { content: "FOUNDER"; position: absolute; left: -66px; bottom: 160px; transform: rotate(-90deg); color: rgba(4,26,81,.14); font-size: 10px; letter-spacing: .45em; }
.initial-panel { position: absolute; inset: 58px 58px 140px; background: white; border: 1px solid rgba(4,26,81,.08); display: grid; place-items: center; }
.initial-panel span { color: var(--navy); font-family: Georgia, serif; font-size: 310px; line-height: 1; transform: translateY(-10px); }
.initial-panel div { position: absolute; left: 0; bottom: 0; width: 100%; height: 13px; background: linear-gradient(90deg, var(--gold) 0 42%, var(--navy) 42% 100%); }
.experience-badge { position: absolute; right: 0; bottom: 0; width: 245px; min-height: 160px; padding: 30px; background: var(--navy); color: white; display: flex; flex-direction: column; justify-content: center; }
.experience-badge strong { color: var(--gold); font-size: 50px; font-weight: 400; letter-spacing: -.04em; }
.experience-badge span { font-size: 11px; line-height: 1.45; color: rgba(255,255,255,.68); max-width: 140px; }
.leadership-copy h2 { font-size: clamp(41px,3.75vw,56px); }
.leadership-title { color: var(--gold-deep); font-size: 15px; margin: 18px 0 40px; }
.leadership-copy .lead { color: var(--navy); font-size: 24px; line-height: 1.48; max-width: 700px; }
.leadership-copy > p:not(.eyebrow):not(.leadership-title):not(.lead) { color: var(--muted); font-size: 15px; line-height: 1.78; max-width: 730px; }
.expertise-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.expertise-tags span { border: 1px solid rgba(4,26,81,.16); padding: 9px 13px; color: var(--navy); font-size: 10px; letter-spacing: .03em; }

.vision-values { padding-top: 0; background: white; }
/* Subgrid keeps the label, statement and photo rows on the same baselines across both
   cards — the mission statement runs a line longer, which otherwise pushed its image
   band lower than the vision card's. */
.vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
}
.vision-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}
/* Statement on top, photograph filling whatever height is left and bleeding to the
   card edges — the text alone left the lower half of these cards blank. */
.vision-card {
  position: relative;
  padding: 52px 52px 0;
  overflow: hidden;
}
.statement-label {
  margin: 0 0 22px;
  color: var(--gold-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vision-card-navy .statement-label { color: var(--gold); }
/* flex:1 so the shorter statement's image grows to match the taller card — the grid
   stretches both to one row height and neither is left with a gap. */
.vision-media {
  min-height: 265px;
  margin: 44px -52px 0;
  overflow: hidden;
}
.vision-media img { width: 100%; height: 100%; object-fit: cover; }
/* the SUV sits low in frame, so bias the crop downward to keep its wheels in shot */
.vision-card-light .vision-media img { object-position: center 72%; }
/* Full statements from the brand document, so these read as body copy rather than a
   display heading — the old 35px display size made a 330-character sentence shout. */
.vision-card h2 { position: relative; z-index: 2; font-size: clamp(18px,1.45vw,22px); line-height: 1.5; letter-spacing: -.01em; word-spacing: normal; }
.vision-card-navy { background: var(--navy); }
.vision-card-navy h2 { color: white; }
.vision-card-light { background: var(--cloud); }

/* Heading spans the top, then a photograph balances the list beside it — as a left
   column the heading occupied a fraction of its height and the rest sat empty. */
.values-block {
  margin-top: 130px;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  column-gap: 90px;
  row-gap: 56px;
}
.values-heading { grid-column: 1 / -1; }
.values-figure { margin: 0; align-self: start; }
.values-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 771 / 900;
  object-fit: cover;
}
.values-heading h2 { font-size: clamp(36px,3.5vw,52px); }
.values-list { border-top: 1px solid rgba(4,26,81,.16); }
.values-list > div { min-height: 76px; display: flex; align-items: center; border-bottom: 1px solid rgba(4,26,81,.16); }

.values-list p { margin: 0; color: var(--navy); font-size: 18px; }

.why-bm { background: var(--cloud); }
.why-grid { margin-top: 80px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(4,26,81,.15); border-left: 1px solid rgba(4,26,81,.15); }
/* Seven items over a three- then two-column grid leaves the last one alone on its row;
   spanning it keeps the hairline grid closed. Same treatment as .category-grid-seven. */
.why-grid .why-card:last-child { grid-column: 1 / -1; }
.why-card { min-height: 195px; padding: 34px; border-right: 1px solid rgba(4,26,81,.15); border-bottom: 1px solid rgba(4,26,81,.15); background: rgba(255,255,255,.25); transition: background .3s var(--ease), transform .3s var(--ease); }
.why-card:hover { background: white; transform: translateY(-4px); }
.why-card h3 { margin: 0 0 13px; color: var(--navy); font-size: 23px; font-weight: 400; letter-spacing: -.025em; }
.why-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.cta-section { position: relative; padding: 120px 0; background: var(--navy); color: white; overflow: hidden; }

.cta-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr .55fr; gap: 100px; align-items: end; }
.cta-section h2 { color: white; font-size: clamp(34px,3.2vw,48px); max-width: 900px; }
.cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.cta-phone { color: white; font-size: 18px; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 7px; }

.site-footer { background: #fff; }
.footer-top { padding: 74px 0 70px; display: grid; grid-template-columns: 1.05fr 1fr .85fr .55fr; gap: 65px; }
.footer-brand img { width: 150px; }
.footer-label { margin: 0 0 18px; color: var(--gold-deep); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; font-weight: 700; }
.footer-contact address, .footer-contact p, .footer-contact a { display: block; margin: 0 0 7px; color: var(--muted); font-size: 12px; line-height: 1.55; font-style: normal; }
.footer-contact a:hover { color: var(--navy); }
.footer-links { display: flex; flex-direction: column; gap: 14px; }
.footer-links a { color: var(--navy); font-size: 12px; }
.footer-bottom { min-height: 72px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .02em; }

/* Scoped to .js (set inline in <head>) so the page is never blank when script.js
   fails to load or JavaScript is off. */
.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-delay-1 { transition-delay: .12s; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

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

@media (max-width: 1180px) {
  :root { --container: min(1100px, calc(100vw - 56px)); }
  .header-inner { grid-template-columns: 220px 1fr 220px; }
  .desktop-nav { gap: 22px; }
  .hero-grid { grid-template-columns: .95fr 1.05fr; gap: 30px; }
  .hero h1 { font-size: 54px; }
  .leadership-grid { gap: 70px; }
  .role-header, .section-heading, .footprint-grid, .cta-grid { gap: 65px; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .fact-image { grid-column: 1 / -1; min-height: 430px; }


  .portfolio-note { grid-column: auto; }

}

@media (max-width: 900px) {
  :root { --container: calc(100vw - 40px); }
  .brand-rail { width: 3px; }
  .site-header { height: 78px; background: rgba(255,255,255,.94); backdrop-filter: blur(18px); box-shadow: 0 1px 0 rgba(4,26,81,.08); }
  .header-inner { grid-template-columns: 1fr auto; }
  .brand img { width: 106px; }
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .mobile-menu {
    display: flex;
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--navy);
    color: white;
    padding: 45px 28px;
    flex-direction: column;
    justify-content: space-between;
    transform: translateX(100%);
    /* visibility (not just transform) so the closed menu's links leave the tab order */
    visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s linear .35s;
  }
  .mobile-menu.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .35s var(--ease), visibility 0s;
  }
  .mobile-menu nav { display: flex; flex-direction: column; }
  .mobile-menu nav a { font-size: 31px; font-weight: 400; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
  .hero { padding-top: 135px; min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-top: 0; }
  .hero h1 { font-size: clamp(44px, 9vw, 59px); }
  .hero-visual { min-height: 610px; margin-top: 25px; }
  .visual-frame { height: 610px; }

  .credibility-grid { grid-template-columns: 1fr 1fr; }
  .credibility-grid > div:nth-child(3) { border-top: 1px solid rgba(255,255,255,.12); }
  .credibility-grid > div:nth-child(4) { border-top: 1px solid rgba(255,255,255,.12); }
  .section { padding: 105px 0; }
  .role-header,
  .section-heading,
  .footprint-grid,
  .leadership-grid,
  .values-block,
  .cta-grid { grid-template-columns: 1fr; gap: 50px; }

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



  .portfolio-note { grid-template-columns: 1fr; gap: 22px; }
  /* Stacked, so there is no second column to align against — drop the subgrid or both
     cards would claim the same three rows and overlap. */
  .vision-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .vision-card { grid-row: auto; grid-template-rows: auto auto 1fr; }
  /* full width in one column, so the portrait crop would run over 1000px tall */
  .values-figure img { aspect-ratio: 3 / 2; }
  .vision-media { min-height: 230px; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  :root { --container: calc(100vw - 30px); }
  .hero { padding: 118px 0 65px; background: linear-gradient(135deg, #f1f2f3 0%, #eceeef 100%); }
  .hero-watermark { top: 320px; right: -28px; font-size: 190px; }
  .hero h1 { font-size: 42px; line-height: 1; }
  .hero-tagline { margin-top: 25px; font-size: 19px; }
  .hero-summary { font-size: 14px; line-height: 1.65; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .hero-proof { grid-template-columns: 1fr; margin-top: 38px; }
  .hero-proof > div { padding: 16px 0; min-height: 0; }
  .hero-proof > div + div { border-left: 0; border-top: 1px solid rgba(4,26,81,.14); padding-left: 0; }
  .hero-visual { min-height: 500px; }
  .visual-frame { height: 500px; }
  .visual-signature { width: 60px; height: 125px; }
  .vertical-label { display: none; }
  .credibility-grid { grid-template-columns: 1fr; }
  .credibility-grid > div { min-height: 80px; border-right: 1px solid rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.12); }
  .credibility-grid > div:first-child { border-top: 0; }
  .section { padding: 85px 0; }
  .section h2, .role h2, .footprint h2, .leadership-copy h2 { font-size: 36px; }
  .leadership-copy .lead { font-size: 21px; }
  .facts-grid { grid-template-columns: 1fr; margin-top: 65px; }
  .fact-card { min-height: 350px; padding: 28px; }
  .fact-image { grid-column: auto; min-height: 390px; }
  .role-card { min-height: 300px; padding: 32px; }

  .section-heading { gap: 25px; }









  .portfolio-note { padding: 35px 30px; }
  .footprint { padding: 95px 0; }
  .region-list > div { grid-template-columns: 110px 1fr; gap: 16px; }
  .leadership-signature { min-height: 500px; }
  .initial-panel { inset: 35px 35px 120px; }
  .initial-panel span { font-size: 220px; }
  .experience-badge { width: 205px; min-height: 130px; padding: 23px; }
  .experience-badge strong { font-size: 42px; }
  .vision-card { padding: 38px 30px 0; }
  .vision-media { min-height: 200px; margin: 34px -30px 0; }
  .vision-card h2 { font-size: 18px; }
  .values-block { margin-top: 90px; }
  .values-list p { font-size: 15px; }
  .why-grid { grid-template-columns: 1fr; }
  .why-card { min-height: 0; }
  .cta-section { padding: 90px 0; }
  .cta-section h2 { font-size: 36px; }

  .footer-top { grid-template-columns: 1fr; gap: 38px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 18px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   Multi-page architecture — V2
   ========================================================= */

.desktop-nav a.is-active {
  color: var(--navy);
  font-weight: 700;
}
.desktop-nav a.is-active::after { right: 0; }
.mobile-menu nav a.is-active { color: var(--gold); }
.inner-page .site-header {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(4,26,81,.08);
}
.initial-panel span {
  font-family: "Neue Helvena", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

/* Home page — concise gateway layout */
.home-about { background: var(--white); }
.home-about-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 120px;
  align-items: start;
}
.home-about-copy { padding-top: 58px; max-width: 690px; }
.home-about-copy p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}
.home-about-copy .lead {
  color: var(--navy);
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: -.018em;
}
.home-about-copy .text-arrow { margin-top: 12px; }
.home-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-top: 90px;
  border-top: 1px solid rgba(4,26,81,.15);
  border-left: 1px solid rgba(4,26,81,.15);
}
.home-snapshot-grid article {
  min-height: 196px;
  padding: 34px;
  border-right: 1px solid rgba(4,26,81,.15);
  border-bottom: 1px solid rgba(4,26,81,.15);
}
.home-snapshot-grid span,
.home-sector-body > span {
  color: var(--gold-deep);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.home-snapshot-grid strong {
  display: block;
  margin: 0 0 14px;
  color: var(--navy);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -.025em;
}
.home-snapshot-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.home-sectors { background: var(--cloud); }
.heading-action > p {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 430px;
}
.home-sector-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
  margin-top: 75px;
}
.home-sector-card {
  min-width: 0;
  background: var(--white);
  border: 1px solid rgba(4,26,81,.08);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.home-sector-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 55px rgba(4,26,81,.10);
}
.home-sector-image {
  position: relative;
  height: 330px;
  overflow: hidden;
  background: #f1f3f4;
}

/* All three are photographs now, so every card fills its frame edge to edge and the
   three images read as one row. `contain` letterboxed the light card against the
   other two, and the multiply blend was only ever there to knock out white cutouts. */
.home-sector-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.home-sector-card:hover .home-sector-image img { transform: scale(1.025); }
.home-sector-image-heavy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(4,26,81,.22));
  z-index: 2;
}
.home-sector-body { padding: 31px 30px 34px; }
.home-sector-body h3 {
  margin: 20px 0 32px;
  min-height: 76px;
  color: var(--navy);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.03em;
}
.home-sector-body a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(4,26,81,.22);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}
.home-sector-body a b { color: var(--gold-deep); font-weight: 500; }
.home-gateways { background: var(--white); }
.gateway-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gateway-card {
  position: relative;
  min-height: 520px;
  padding: 54px;
  overflow: hidden;
  border: 1px solid rgba(4,26,81,.08);
  transition: transform .35s var(--ease);
}
.gateway-card:hover { transform: translateY(-5px); }
.gateway-card-navy { color: var(--white); background: var(--navy); }
.gateway-card-light { color: var(--ink); background: var(--cloud); }
.gateway-card .gateway-index { position: absolute; top: 35px; right: 38px; z-index: 2; }
.gateway-card-navy .gateway-index { color: var(--gold); }
.gateway-card h2 {
  position: relative;
  z-index: 2;
  margin: 0 0 24px;
  max-width: 600px;
  color: var(--navy);
  font-size: clamp(31px,2.6vw,41px);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -.045em;
}
.gateway-card-navy h2 { color: var(--white); }
.gateway-card > p:not(.eyebrow) {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.72;
}
.gateway-card-navy > p:not(.eyebrow) { color: rgba(255,255,255,.67); }
.gateway-card > b {
  position: absolute;
  left: 54px;
  bottom: 48px;
  z-index: 2;
  display: inline-flex;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
}
.gateway-card > b i { color: var(--gold); font-style: normal; font-weight: 400; }

/* Inner page hero */
.page-hero {
  position: relative;
  min-height: 660px;
  padding: 180px 0 105px;
  overflow: hidden;
  background: linear-gradient(135deg, #f0f1f2 0%, #e9ebed 100%);
}

.page-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(300px,.62fr);
  gap: 100px;
  align-items: end;
}
.page-hero-grid-media { grid-template-columns: minmax(0,1fr) minmax(450px,.84fr); align-items: center; }
/* Top-aligned so the breadcrumb and headline start at the same height on every page.
   Aligned to the neighbouring visual instead, the copy drifted between 190px and 293px
   depending on how tall that page's aside or image happened to be. */
.page-hero-copy,
.sector-detail-copy { align-self: start; }
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 34px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.page-breadcrumb a:hover { color: var(--navy); }
.page-breadcrumb span { color: var(--gold-deep); }
.page-hero h1,
.sector-detail-hero h1 {
  margin: 0;
  max-width: 940px;
  color: var(--navy);
  font-size: clamp(46px,4.5vw,69px);
  line-height: .98;
  font-weight: 400;
  letter-spacing: -.06em;
}
.page-hero h1 em,
.sector-detail-hero h1 em { color: var(--gold-deep); font-style: normal; }
.page-hero-copy > p:last-child {
  max-width: 720px;
  margin: 32px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}
.page-hero-aside {
  position: relative;
  min-height: 290px;
  padding: 38px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
  background: var(--navy);
}
.page-hero-aside::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 94px;
  height: 9px;
  background: var(--gold);
}
.page-hero-aside .aside-number { color: var(--gold); font-size: 12px; margin-bottom: auto; }
.page-hero-aside p { margin: 0; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.6; }
.page-hero-aside .aside-rule { width: 42px; height: 1px; background: rgba(255,255,255,.35); margin: 22px 0; }
.page-hero-media {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  background: var(--cloud);
  border: 1px solid rgba(4,26,81,.08);
}
.page-hero-media img { width: 100%; height: 430px; object-fit: cover; }
.page-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(4,26,81,.88) 100%);
}
.media-caption {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 28px;
  z-index: 2;
  color: var(--white);
}
.media-caption span { display: block; color: var(--gold); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 7px; }
.media-caption strong { font-size: 14px; font-weight: 500; }
.leadership-aside { justify-content: center; }
.leadership-aside strong { color: var(--gold); font-size: 84px; font-weight: 300; line-height: 1; letter-spacing: -.05em; }
.leadership-aside p { margin-top: 24px; max-width: 280px; }
.contact-aside { justify-content: center; gap: 12px; }
.contact-aside > span { color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; margin-bottom: 16px; }
.contact-aside a { color: var(--white); font-size: 18px; border-bottom: 1px solid rgba(255,255,255,.26); width: fit-content; padding-bottom: 5px; }

/* Editorial/content systems */
.page-intro { background: var(--white); }
.editorial-grid,
.sector-overview-grid,
.future-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 120px;
  align-items: start;
}
/* Heading across the top, then the photograph and the copy sit side by side as equal
   partners. As a stacked left column the heading left most of its height blank. */
.editorial-grid-figure {
  row-gap: 54px;
  align-items: start;
}
.editorial-grid-figure .section-intro { grid-column: 1 / -1; }
.editorial-grid-figure .editorial-copy { padding-top: 0; }
/* The image is taken out of flow so it contributes no intrinsic height — the figure
   then stretches to whatever height the copy column sets, and the two line up. */
.intro-figure {
  position: relative;
  margin: 0;
  align-self: stretch;
  overflow: hidden;
  /* A floor, not a target — the copy column normally sets the height and the image
     matches it. This only stops the frame collapsing behind very short copy. */
  min-height: 370px;
}
.editorial-grid-figure .editorial-copy { align-self: stretch; }
.intro-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Photograph left, heading and copy right. The image is out of flow so it adds no
   intrinsic height — its frame stretches to the height the copy column sets. */
.media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: stretch;
}
.media-split-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-height: 460px;
  background: var(--cloud);
}
.media-split-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-split-copy h2 {
  margin: 0 0 40px;
  color: var(--navy);
  font-size: clamp(29px, 2.5vw, 38px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -.035em;
  word-spacing: .055em;
}
.media-split-copy p { margin: 0 0 22px; color: var(--muted); font-size: 16px; line-height: 1.82; }
.media-split-copy .lead { color: var(--navy); font-size: 24px; line-height: 1.55; letter-spacing: -.015em; }
.media-split-copy > p:last-child { margin-bottom: 0; }

.editorial-copy { padding-top: 56px; max-width: 780px; }
.editorial-copy p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.82;
}
.editorial-copy .lead {
  color: var(--navy);
  font-size: 24px;
  line-height: 1.55;
  letter-spacing: -.015em;
}
.future-statement { background: var(--white); }
.future-grid { align-items: end; }
.future-statement h2 { font-size: clamp(37px,3.4vw,51px); }
.future-copy { padding-bottom: 8px; }
.future-copy p { color: var(--muted); font-size: 16px; line-height: 1.8; margin: 0 0 30px; }

/* Strategic role */
.role-page { padding-top: 135px; }
.operating-model { background: var(--white); }
.process-grid,
.priority-grid,
.capability-grid,
.use-case-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  margin-top: 76px;
  border-top: 1px solid rgba(4,26,81,.15);
  border-left: 1px solid rgba(4,26,81,.15);
}
.process-card,
.priority-card,
.capability-card,
.use-case-card {
  min-height: 232px;
  padding: 34px;
  border-right: 1px solid rgba(4,26,81,.15);
  border-bottom: 1px solid rgba(4,26,81,.15);
  background: rgba(255,255,255,.35);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.process-card:hover,
.priority-card:hover,
.capability-card:hover,
.use-case-card:hover { background: var(--white); transform: translateY(-4px); }
.process-card > span,
.priority-card > span,
.capability-card > span,
.use-case-card > span,
.category-card > span { color: var(--gold-deep); font-size: 10px; letter-spacing: .08em; }
.priority-card h3,
.capability-card h3,
.use-case-card h3,
.process-card h3 {
  margin: 0 0 16px;
  color: var(--navy);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -.025em;
}
/* .process-card keeps its step number, so its title clears it */
.process-card h3 { margin-top: 30px; }
.process-card p,
.priority-card p,
.capability-card p,
.use-case-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.68;
}
/* The only two numbered things on the site are genuine sequences — the operating
   model and the supply flow. A connector through the step markers is what separates
   "these happen in this order" from "here are four items". */
.process-card { position: relative; }
.process-card::after {
  content: "";
  position: absolute;
  top: 41px;
  left: 60px;
  right: 0;
  height: 1px;
  background: rgba(170,138,72,.4);
}
.process-card:last-child::after { display: none; }
.process-card > span { position: relative; z-index: 1; }

.service-flow-list > div { position: relative; }
.service-flow-list > div::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(170,138,72,.4);
}
.service-flow-list > div:first-child::after { top: 50%; }
.service-flow-list > div:last-child::after { bottom: 50%; }
.service-flow-list span { position: relative; z-index: 1; background: var(--white); padding: 4px 0; }

/* A heading in the narrow left column of a two-column editorial grid has roughly a
   third of the page to work with, so it cannot take the full-width display size —
   at 56px these were wrapping to five and seven lines. */
.section-intro h2,
.values-heading h2,
.future-statement h2 { font-size: clamp(29px, 2.5vw, 38px); }

.strategic-priorities,
.leadership-principles { background: var(--cloud); }

/* Sectors overview */
.sector-hero-composition {
  position: relative;
  min-height: 470px;
}
.sector-hero-panel { position: absolute; overflow: hidden; border: 1px solid rgba(4,26,81,.08); background: var(--cloud); }
.sector-hero-panel img { width: 100%; height: 100%; object-fit: cover; }
.sector-hero-panel-main { inset: 35px 80px 0 0; }
/* Framed low so the truck card overlaps sky, not the car. */
.sector-hero-panel-main img { object-position: center 70%; }
.sector-hero-panel-secondary { width: 245px; height: 165px; right: 0; top: 0; box-shadow: 0 18px 45px rgba(4,26,81,.14); }
.sector-hero-panel-secondary img { object-fit: cover; }
.sector-hero-label {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 13px 18px;
  color: var(--white);
  background: var(--navy);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.sectors-intro { padding-bottom: 80px; }
/* The gold band that follows belongs to the same stack, so it sits the same 20px below
   the last card as the cards sit from each other. That 20px is section padding, not the
   card's margin: with padding-bottom:0 the last card's margin collapsed out of the
   section and the page background showed through as a white strip. */
.sector-directory { padding-top: 0; padding-bottom: 20px; background: var(--cloud); }
.sector-directory .directory-card:last-child { margin-bottom: 0; }
.directory-card {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  min-height: 560px;
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(4,26,81,.08);
}
.directory-card:nth-child(even) { grid-template-columns: 1.1fr .9fr; }
.directory-card:nth-child(even) .directory-copy { order: 2; }
.directory-card:nth-child(even) .directory-visual { order: 1; }
.directory-copy { padding: 62px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.directory-copy > span { color: var(--gold-deep); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.directory-card h2 {
  margin: 42px 0 23px;
  color: var(--navy);
  font-size: clamp(33px,3vw,45px);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -.05em;
}
.directory-copy p { margin: 0 0 35px; color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 650px; }
.directory-visual { position: relative; min-height: 560px; overflow: hidden; background: #eff1f2; }

.directory-visual img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.directory-heavy { color: var(--white); background: var(--navy); }
.directory-heavy .directory-copy > span { color: var(--gold); }
.directory-heavy h2 { color: var(--white); }
.directory-heavy .directory-copy p { color: rgba(255,255,255,.68); }
.directory-heavy .directory-visual { background: #0a245f; }
.directory-heavy .directory-visual::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, rgba(4,26,81,.25), transparent); }
.wider-portfolio-section { padding-top: 0; padding-bottom: 0; background: var(--cloud); }
.commercial-capabilities { background: var(--white); }

/* Leadership */
.leadership-page { padding-top: 135px; }
.leadership-priority-grid { background: transparent; }
.leadership-quote { position: relative; overflow: hidden; padding: 120px 0; color: var(--white); background: var(--navy); }
.leadership-quote-grid { display: grid; grid-template-columns: 100px 1fr auto; gap: 55px; align-items: center; }
.leadership-quote-grid > span { color: var(--gold); font-size: 150px; line-height: .5; font-weight: 300; }
.leadership-quote-grid > p { margin: 0; max-width: 850px; font-size: clamp(26px,2.4vw,38px); line-height: 1.17; letter-spacing: -.035em; }
.text-arrow-light { color: var(--white); border-color: rgba(255,255,255,.35); white-space: nowrap; }

/* Sector detail pages */
.sector-detail-hero {
  position: relative;
  min-height: 850px;
  padding: 180px 0 90px;
  overflow: hidden;
  background: linear-gradient(135deg, #f1f2f3 0%, #eaeced 100%);
}

.sector-detail-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr);
  gap: 70px;
  align-items: center;
}
/* The sector hero splits .9fr copy / 1.1fr image, so its h1 gets a narrower column
   than the other page heroes and needs a step down from the shared size. */
.sector-detail-hero h1 { font-size: clamp(38px,3.4vw,52px); }
.sector-detail-copy > p:not(.page-breadcrumb):not(.eyebrow) {
  margin: 32px 0 38px;
  max-width: 680px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}
.sector-detail-visual {
  position: relative;
  height: 610px;
  overflow: hidden;
  background: #eff1f2;
  border: 1px solid rgba(4,26,81,.08);
}

.sector-detail-visual img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  /* The frame is 1.09 and these photographs are 1.2-1.5, so `contain` left 70-80px of
     near-white letterbox above and below. */
  object-fit: cover;
}
.sector-visual-rule { position: absolute; left: 0; top: 0; z-index: 4; width: 84px; height: 180px; display: grid; grid-template-rows: 44% 56%; }
.sector-visual-rule span:first-child { background: var(--gold); }
.sector-visual-rule span:last-child { background: var(--navy); }
.sector-overview { background: var(--white); }
.sector-overview-grid { align-items: start; }
.sector-capability-section,
.category-section,
.industry-support { background: var(--cloud); }
.service-flow-section,
.quality-section { background: var(--white); }
.category-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-top: 76px;
  border-top: 1px solid rgba(4,26,81,.15);
  border-left: 1px solid rgba(4,26,81,.15);
}
.category-card {
  min-height: 210px;
  padding: 32px;
  border-right: 1px solid rgba(4,26,81,.15);
  border-bottom: 1px solid rgba(4,26,81,.15);
  background: rgba(255,255,255,.45);
}
/* Same line-icon language as .role-icon, in gold-deep because these cards sit on the
   light background rather than navy. */
.category-icon { width: 44px; height: 44px; margin-bottom: 26px; }
.category-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.category-card h3 {
  margin: 0;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -.02em;
}
.category-grid-seven .category-card:last-child { grid-column: 1 / -1; }
.service-flow-grid {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 120px;
  align-items: start;
}
.service-flow-intro h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(30px,2.6vw,40px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -.052em;
}
.service-flow-intro > p:last-child { margin: 28px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.service-flow-list { border-top: 1px solid rgba(4,26,81,.16); }
.service-flow-list > div {
  min-height: 118px;
  display: grid;
  grid-template-columns: 52px 165px 1fr;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid rgba(4,26,81,.16);
}
.service-flow-list span { color: var(--gold-deep); font-size: 10px; }
.service-flow-list strong { color: var(--navy); font-size: 17px; font-weight: 500; }
.service-flow-list p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.sector-page-nav { background: var(--cloud); border-top: 1px solid rgba(4,26,81,.12); }
.sector-page-nav-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.sector-page-nav a { min-height: 145px; padding: 34px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(4,26,81,.12); }
.sector-page-nav a:last-child { border-right: 1px solid rgba(4,26,81,.12); }
.sector-page-nav a:hover { background: var(--white); }
.sector-page-nav span { color: var(--gold-deep); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 15px; }
.sector-page-nav strong { color: var(--navy); font-size: 17px; font-weight: 500; }
.sector-index-link { text-align: center; align-items: center; }
.sector-next { text-align: right; align-items: flex-end; }

/* Contact */
.contact-section { background: var(--white); }
.contact-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 110px; align-items: start; }
.contact-information h2,
.contact-form-panel h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(36px,3.5vw,51px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -.052em;
}
.contact-lead { margin: 28px 0 45px; color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 570px; }
.contact-detail-list { border-top: 1px solid rgba(4,26,81,.16); }
.contact-detail-list > div { display: grid; grid-template-columns: 130px 1fr; gap: 20px; min-height: 96px; padding: 24px 0; border-bottom: 1px solid rgba(4,26,81,.16); }
.contact-detail-list span { color: var(--gold-deep); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.contact-detail-list address,
.contact-detail-list p,
.contact-detail-list a { margin: 0; color: var(--navy); font-size: 14px; line-height: 1.62; font-style: normal; }
.map-link { display: inline-block; margin-top: 28px; padding-bottom: 5px; border-bottom: 1px solid rgba(4,26,81,.22); color: var(--navy); font-size: 13px; font-weight: 700; }
.map-link:hover { border-bottom-color: var(--gold-deep); }

.contact-form-panel { padding: 58px; background: var(--cloud); border: 1px solid rgba(4,26,81,.08); }
.contact-form-panel h2 { margin-bottom: 45px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 22px; }
.inquiry-form label { display: flex; flex-direction: column; gap: 10px; }
.inquiry-form label > span { color: var(--navy); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(4,26,81,.22);
  border-radius: 0;
  padding: 12px 0;
  color: var(--ink);
  background: transparent;
  outline: none;
}
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus { border-bottom-color: var(--gold-deep); }
.inquiry-form textarea { resize: vertical; min-height: 125px; }
.form-wide { grid-column: 1 / -1; }
.inquiry-form .button { margin-top: 34px; border: 0; cursor: pointer; }
.form-note { margin: 17px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.form-status { min-height: 18px; margin: 10px 0 0; color: var(--navy); font-size: 11px; }
.contact-links-band { background: var(--navy); color: var(--white); }
.contact-links-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.contact-links-grid a { min-height: 155px; padding: 30px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border-left: 1px solid rgba(255,255,255,.12); }
.contact-links-grid a:last-child { border-right: 1px solid rgba(255,255,255,.12); }
.contact-links-grid a:hover { background: rgba(255,255,255,.045); }

.contact-links-grid strong { font-size: 14px; font-weight: 500; }
.contact-links-grid b { color: var(--gold); font-weight: 400; }

@media (max-width: 1180px) {
  .home-about-grid,
  .editorial-grid,
  .sector-overview-grid,
  .future-grid,
  .contact-layout,
  .service-flow-grid { gap: 70px; }
  .media-split { gap: 60px; }
  .page-hero-grid { gap: 55px; }
  .page-hero-grid-media { grid-template-columns: minmax(0,1fr) minmax(390px,.8fr); }
  .home-sector-image { height: 280px; }
  .gateway-card { min-height: 500px; padding: 44px; }
  .gateway-card > b { left: 44px; }
  .directory-copy { padding: 50px; }
  .sector-detail-hero-grid { grid-template-columns: minmax(0,.92fr) minmax(450px,1.08fr); gap: 45px; }
  .sector-detail-visual { height: 560px; }
  .process-grid,
  .priority-grid,
  .capability-grid,
  .use-case-grid { grid-template-columns: repeat(2,1fr); }
  /* two per row now, so the step connector must stop at each row end */
  .process-card:nth-child(2n)::after { display: none; }
  /* wider cards hold the same short text, so let content set the height */
  .process-card,
  .priority-card,
  .capability-card,
  .use-case-card { min-height: 0; }
  .leadership-quote-grid { grid-template-columns: 75px 1fr; }
  .leadership-quote-grid .text-arrow { grid-column: 2; width: fit-content; }
}

@media (max-width: 900px) {
  .inner-page .site-header { height: 78px; }
  /* backdrop-filter makes the header a containing block for its position:fixed
     descendants, which collapsed the mobile menu panel to the header's height. */
  .site-header,
  .site-header.scrolled,
  .inner-page .site-header { backdrop-filter: none; }
  .page-hero { min-height: auto; padding: 135px 0 85px; }
  .page-hero-grid,
  .page-hero-grid-media,
  .home-about-grid,
  .editorial-grid,
  .sector-overview-grid,
  .future-grid,
  .contact-layout,
  .media-split,
  .service-flow-grid { grid-template-columns: 1fr; gap: 55px; }
  .media-split-figure { min-height: 340px; }
  .page-hero-aside { min-height: 230px; max-width: 520px; }
  .page-hero-media { min-height: 390px; }
  .page-hero-media img { height: 390px; }
  .home-snapshot-grid,
  .home-sector-grid { grid-template-columns: 1fr; }
  .home-sector-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .home-sector-image { height: 330px; }
  .home-sector-body { display: flex; flex-direction: column; justify-content: center; }
  .home-sector-body h3 { min-height: 0; }
  .gateway-grid { grid-template-columns: 1fr; }
  .gateway-card { min-height: 480px; }
  .sector-hero-composition { min-height: 430px; }
  /* Single column here, so the car fills the panel height: drop it below the truck card. */
  .sector-hero-panel-main { inset: 185px 0 0 0; }
  .directory-card,
  .directory-card:nth-child(even) { grid-template-columns: 1fr; }
  .directory-card:nth-child(even) .directory-copy,
  .directory-card:nth-child(even) .directory-visual { order: initial; }
  .directory-visual { min-height: 420px; }
  .directory-card { min-height: 0; }
  .sector-detail-hero { min-height: auto; padding: 135px 0 85px; }
  .sector-detail-hero-grid { grid-template-columns: 1fr; }
  .sector-detail-visual { height: 540px; }
  .category-grid { grid-template-columns: repeat(2,1fr); }
  .category-grid-seven .category-card:last-child { grid-column: auto; }
  .sector-page-nav-grid { grid-template-columns: 1fr; }
  .sector-page-nav a { min-height: 110px; border-right: 1px solid rgba(4,26,81,.12); border-bottom: 1px solid rgba(4,26,81,.12); }
  .sector-index-link,
  .sector-next { text-align: left; align-items: flex-start; }
  .contact-links-grid { grid-template-columns: 1fr 1fr; }
  .contact-links-grid a:nth-child(2) { border-right: 1px solid rgba(255,255,255,.12); }
  .leadership-quote-grid { grid-template-columns: 55px 1fr; gap: 30px; }
  .leadership-quote-grid > span { font-size: 110px; }

  /* Fewer columns means wider cards and shorter text, so the min-heights tuned for
     the widest layout would leave the boxes half empty. Let content set the height. */
  .category-card,
  .why-card,
  .home-snapshot-grid article { min-height: 0; }
}

@media (max-width: 600px) {
  .page-hero { padding: 118px 0 70px; background: linear-gradient(135deg, #f0f1f2 0%, #e9ebed 100%); }
  .page-hero h1,
  .sector-detail-hero h1 { font-size: 40px; line-height: 1.02; }
  .page-hero-copy > p:last-child,
  .sector-detail-copy > p:not(.page-breadcrumb):not(.eyebrow) { font-size: 14px; line-height: 1.68; }

  .page-hero-aside { padding: 28px; }
  .home-about-copy .lead,
  .editorial-copy .lead { font-size: 21px; }
  .home-snapshot-grid { margin-top: 60px; }
  .home-snapshot-grid article { min-height: 0; padding: 28px; }
  .home-sector-card { grid-template-columns: 1fr; }
  .home-sector-image { height: 260px; }
  .home-sector-body { padding: 28px; }
  .gateway-card { min-height: 420px; padding: 34px 28px; }
  .gateway-card h2 { font-size: 31px; }
  .gateway-card > b { left: 28px; bottom: 35px; }

  .page-hero-media { min-height: 300px; }
  .page-hero-media img { height: 300px; }
  .sector-hero-composition { min-height: 330px; }
  .sector-hero-panel-main { inset: 125px 0 0 0; }
  .sector-hero-panel-secondary { width: 155px; height: 110px; }
  .directory-copy { padding: 38px 28px; }
  .directory-card h2 { font-size: 33px; }
  .directory-visual { min-height: 310px; }
  .process-grid,
  .priority-grid,
  .capability-grid,
  .use-case-grid,
  .category-grid { grid-template-columns: 1fr; }
  .process-card::after { display: none; }   /* single column: nothing to connect across */
  .process-card,
  .priority-card,
  .capability-card,
  .use-case-card { min-height: 0; padding: 28px; }
  .category-card { min-height: 0; padding: 27px; }
  .sector-detail-hero { padding: 118px 0 70px; }

  .sector-detail-visual { height: 410px; }
  .sector-visual-rule { width: 58px; height: 125px; }
  .service-flow-list > div { grid-template-columns: 35px 1fr; gap: 12px; padding: 22px 0; }
  .service-flow-list p { grid-column: 2; padding-bottom: 3px; }
  .service-flow-intro h2 { font-size: 36px; }
  .contact-form-panel { padding: 38px 26px; }
  .contact-information h2,
  .contact-form-panel h2 { font-size: 36px; }
  .contact-detail-list > div { grid-template-columns: 1fr; gap: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-wide { grid-column: auto; }
  .contact-links-grid { grid-template-columns: 1fr; }
  .contact-links-grid a { min-height: 105px; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
  .leadership-quote { padding: 90px 0; }
  .leadership-quote-grid { grid-template-columns: 1fr; }
  .leadership-quote-grid > span { font-size: 100px; }
  .leadership-quote-grid .text-arrow { grid-column: 1; }
}