/* ==========================================================================
   Van Driel Engineering Ltd, main.css  ·  v2 (second design pass)
   --------------------------------------------------------------------------
   DESIGN DIRECTION
   Group family: deep navy on white and near-white, Manrope, near-black footer.
   Van Driel's own register: monospaced technical data, hairline rules, a brass
   micro-accent, and ( new in this pass) an editorial display scale that lets a
   proposition sit at 7rem while a tolerance table sits at 13px mono. That
   contrast between the marketing voice and the technical voice is the single
   biggest typographic change here.

   COMPOSITION PRINCIPLE
   No two adjacent sections should share a layout. Eight composition types are
   defined below (hero, interstitial, split, figures, specpanel, bigquote,
   caselist, proof) and pages alternate between them.

   MOTION PRINCIPLE
   Everything moves once, briefly, on first sight, and then stops. Nothing loops,
   nothing parallaxes the whole page, nothing delays content. All of it is
   removed under prefers-reduced-motion.

   Structure: 1 Tokens · 2 Reset · 3 Type · 4 Layout · 5 Components
              6 Motion · 7 Utilities · 8 Responsive · 9 Print
   ========================================================================== */

/* 1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Group palette */
  --navy:      #123B63;
  --navy-dk:   #0D2C4B;
  --navy-2:    #0F3055;
  --navy-lt:   #1D5288;
  --navy-tint: #E8EEF4;
  --navy-deep: #081E34;

  /* Neutrals: biased toward the navy so greys read as chosen */
  --ink:       #1A2733;
  --near-black:#0F1216;
  --slate:     #3E4E5E;
  --steel:     #64748B;
  --mist:      #94A3B4;
  --haze:      #CBD5E0;
  --line:      #E1E6EB;
  --line-soft: #EDF1F4;
  --paper:     #F2F4F6;
  --white:     #FFFFFF;

  /* Brass micro-accent. ~2% coverage: rules, ticks, indices, units. */
  --brass:     #A9752F;
  --brass-lt:  #C79350;
  --brass-dim: rgba(169,117,47,.16);

  /* Semantic */
  --bg:         var(--white);
  --bg-alt:     var(--paper);
  --text:       var(--ink);
  --text-muted: var(--steel);
  --rule:       var(--line);
  --rule-dark:  rgba(255,255,255,.13);
  --focus:      #2E7ACB;

  /* Typography */
  --font-sans: "Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui,
               -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
               "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale. The top three steps are new and are the point of this pass. */
  --fs-xs:      0.75rem;
  --fs-sm:      0.8125rem;
  --fs-base:    clamp(1rem, 0.96rem + 0.2vw, 1.0938rem);
  --fs-lg:      clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem);
  --fs-xl:      clamp(1.3125rem, 1.16rem + 0.72vw, 1.75rem);
  --fs-2xl:     clamp(1.625rem, 1.35rem + 1.3vw, 2.5rem);
  --fs-3xl:     clamp(2rem, 1.55rem + 2.1vw, 3.25rem);
  --fs-4xl:     clamp(2.375rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-display: clamp(2.5rem, 1.5rem + 3.6vw, 5.25rem);
  --fs-mega:    clamp(3rem, 1.4rem + 6vw, 7rem);

  --measure:      64ch;
  --measure-tight:52ch;

  /* Spacing */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 8rem;
  --s-13: 10rem;

  /* Structure */
  --wrap:      1240px;
  --wrap-wide: 1480px;
  --wrap-slim: 780px;
  --gutter:    clamp(1.25rem, 4vw, 3.5rem);
  --header-h:  84px;
  --header-h-condensed: 64px;
  --radius:    4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(13,44,75,.05), 0 2px 10px rgba(13,44,75,.04);
  --shadow-md: 0 2px 8px rgba(13,44,75,.07), 0 14px 34px rgba(13,44,75,.07);
  --shadow-lg: 0 4px 14px rgba(13,44,75,.09), 0 26px 60px rgba(13,44,75,.13);
  --shadow-xl: 0 8px 24px rgba(13,44,75,.10), 0 40px 90px rgba(13,44,75,.18);

  /* Consultancy register: warmer, quieter, serif-led. Scoped to .consult.
     Sampled from alikatadvisory.com and adapted: the practice should read as a
     professional consultancy inside the Van Driel brand, not as another
     fabrication page with different words. */
  --c-ink:    #0B0E10;
  --c-paper:  #F2F0EB;
  --c-cream:  #E9E7E2;
  --c-tan:    #A98F6A;
  --c-tan-lt: #C4AE8C;
  --c-rule:   #DCD8D0;
  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino,
                Georgia, "Times New Roman", serif;

  --ease:     cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur:      .2s;
  --dur-slow: .5s;
}

@font-face{font-family:"Manrope";src:url("../assets/fonts/Manrope-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../assets/fonts/Manrope-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../assets/fonts/Manrope-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../assets/fonts/Manrope-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../assets/fonts/Manrope-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* Source Serif 4: the consultancy display face. Used ONLY inside .consult, so
   the fabrication pages are untouched and the font is only fetched by visitors
   who land on the consultancy page. */
@font-face{font-family:"Source Serif 4";src:url("../assets/fonts/SourceSerif4-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("../assets/fonts/SourceSerif4-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* 2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  /* The off-canvas mobile nav sits at translateX(100%) when closed. `clip`
     suppresses the phantom scrollbar WITHOUT creating a scroll container, so
     position:sticky keeps working, which overflow-x:hidden would break here. */
  overflow-x: clip;
}
@supports not (overflow: clip) { html { overflow-x: hidden; } }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }

/* The build wraps every images/*.jpg in a <picture> (see responsive_images() in
   _source/build.py), so the wrapper, not the media box, becomes the image's
   parent. Every rule below that says `... img { height: 100% }` was therefore
   resolving against a height:auto <picture> and falling back to the image's
   intrinsic height.

   It was invisible wherever the box ratio happened to match the image ratio,
   which is almost everywhere. It showed on the one panel where they differ: the
   homepage staircase block, a 3/4 frame holding a 4/3 image, which left a third
   of the frame as flat navy under the picture.

   Making the wrapper fill the box restores the behaviour those rules already
   intended, and stops this recurring the next time a ratio is overridden. */
.hero__media picture,
.phero__media picture,
.interstitial__media picture,
.split__media picture,
.case__thumb picture,
.card__media picture,
.gal__item picture,
.img-frame picture { display: block; width: 100%; height: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--navy); color: #fff; }

/* 3. TYPE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.024em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--fs-4xl); letter-spacing: -0.032em; line-height: 1.04; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-xl); letter-spacing: -0.018em; font-weight: 700; }
h4 { font-size: var(--fs-lg); font-weight: 700; }
h5 { font-size: var(--fs-base); font-weight: 700; }
p  { text-wrap: pretty; }
p + p { margin-top: var(--s-4); }
strong { font-weight: 700; }

/* Display: the marketing voice. Used sparingly and always large. */
.display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.mega { font-size: var(--fs-mega); font-weight: 800; line-height: .92; letter-spacing: -0.045em; }

.lede { font-size: var(--fs-lg); line-height: 1.55; color: var(--slate); font-weight: 400; max-width: var(--measure); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.measure { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }

/* Eyebrow: the group's uppercase letterspaced label. */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--navy-lt);
  display: block;
  margin-bottom: var(--s-4);
}
.eyebrow--brass { color: var(--brass); }
.sec--dark .eyebrow, .sec--ink .eyebrow, .on-dark .eyebrow { color: #8FB4D8; }

/* Technical register: the engineering voice. Mono, small, letterspaced. */
.tech {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .02em;
  color: var(--slate);
}
.tech-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--fs-2xl); margin-top: var(--s-9); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--s-7); }
.prose ul li { position: relative; padding-left: var(--s-5); margin-top: var(--s-2); }
.prose ul li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brass);
}
.prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--navy-lt); }

/* 4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--wrap-wide); }
.wrap--slim { max-width: var(--wrap-slim); }

.sec { padding-block: clamp(4rem, 8vw, 8.5rem); }
.sec--tight { padding-block: clamp(2.5rem, 4.5vw, 4.5rem); }
.sec--alt  { background: var(--bg-alt); }
.sec--dark { background: var(--navy-2); color: #D6E2EE; }
.sec--dark h1, .sec--dark h2, .sec--dark h3, .sec--dark h4 { color: var(--white); }
.sec--dark .lede { color: #C3D5E5; }
.sec--ink  { background: var(--near-black); color: #C7CDD4; }
.sec--ink h2, .sec--ink h3 { color: var(--white); }
.sec--ink .lede { color: #B9C2CB; }

.sec-head { max-width: 48rem; margin-inline: auto; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); text-align: center; }
.sec-head p { margin-top: var(--s-4); color: var(--text-muted); font-size: var(--fs-lg); line-height: 1.6; }
.sec--dark .sec-head p, .sec--ink .sec-head p { color: #AFC2D3; }
.sec-head--left { margin-inline: 0; text-align: left; }

.grid { display: grid; gap: clamp(1.75rem, 3vw, 3rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--sidebar { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: clamp(2.5rem,5vw,5.5rem); }
.grid--split { grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(2.5rem,5vw,5.5rem); align-items: center; }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.rule { height: 1px; background: var(--rule); border: 0; margin-block: var(--s-6); }
.sec--dark .rule, .sec--ink .rule { background: var(--rule-dark); }

/* 5. COMPONENTS
   ========================================================================== */

/* 5.1 Skip link ---------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: var(--s-3) var(--s-5); font-weight: 700;
}
.skip:focus { left: 0; }

/* 5.2 Utility bar -------------------------------------------------------- */
.utilbar { background: var(--navy-deep); color: #A9C2D8; font-size: var(--fs-xs); }
.utilbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 40px; }
.utilbar__list { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.utilbar__item { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.utilbar__item svg { width: 13px; height: 13px; flex: none; opacity: .7; }
.utilbar__item a { display: inline-flex; align-items: center; gap: var(--s-2); transition: color var(--dur) var(--ease); }
.utilbar a:hover { color: var(--white); }
.utilbar strong { color: #fff; font-weight: 700; }
.utilbar__accred { letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #C6DAEB; }

/* 5.3 Header: condenses and gains elevation on scroll -------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease);
}
.site-header__in {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: var(--header-h);
  transition: min-height var(--dur-slow) var(--ease);
}
body[data-scrolled="true"] .site-header { box-shadow: var(--shadow-md); background: rgba(255,255,255,.97); }
body[data-scrolled="true"] .site-header__in { min-height: var(--header-h-condensed); }

.brand { display: flex; align-items: center; gap: var(--s-3); flex: none; color: var(--navy); }
/* The supplied logo is a lockup on its own dark ground, so in the white header
   it is carried as a tile rather than keyed out: its wordmark is white and
   would disappear. The tile is square, so it is sized by height and the radius
   matches the site's small radius. */
.brand__mark {
  height: 42px; width: 42px; border-radius: var(--radius);
  display: block; flex: none;
  transition: height var(--dur-slow) var(--ease), width var(--dur-slow) var(--ease);
}
body[data-scrolled="true"] .brand__mark { height: 36px; width: 36px; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.02; }
.brand__name { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.028em; color: var(--ink); }
.brand__sub {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--steel); margin-top: 4px;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--s-3) clamp(.5rem, 1vw, .875rem);
  font-size: .9rem; font-weight: 600; color: var(--slate);
  border-radius: var(--radius);
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: clamp(.5rem,1vw,.875rem); right: clamp(.5rem,1vw,.875rem); bottom: 6px;
  height: 2px; background: var(--navy); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--navy); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__item { position: relative; }
.nav__item--current > .nav__link { color: var(--navy); }
.nav__item--current > .nav__link::after { transform: scaleX(1); background: var(--brass); }
.nav__caret { width: 9px; height: 9px; opacity: .5; transition: transform var(--dur) var(--ease); }
.nav__item--has-menu[data-open="true"] .nav__caret { transform: rotate(180deg); }

/* 5.3b Mega-menu ---------------------------------------------------------- */
.subnav {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(860px, 92vw);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 0;
  display: grid; grid-template-columns: 1.55fr 1fr;
  overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.nav__item--has-menu[data-open="true"] .subnav {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.subnav__links { padding: var(--s-5); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-content: start; }
.subnav__link { display: block; padding: var(--s-3) var(--s-4); border-radius: var(--radius); transition: background var(--dur) var(--ease); }
.subnav__link:hover { background: var(--navy-tint); }
.subnav__title { font-weight: 700; font-size: .9375rem; color: var(--ink); display: flex; align-items: center; gap: var(--s-2); }
.subnav__title::before {
  content: ""; width: 6px; height: 6px; background: var(--brass); flex: none;
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.subnav__link:hover .subnav__title::before { transform: rotate(135deg); }
.subnav__desc { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
/* Promoted quotation panel inside the mega-menu */
.subnav__promo {
  background: var(--navy-dk); color: #C7DCEE; padding: var(--s-6);
  display: flex; flex-direction: column; justify-content: center;
}
.subnav__promo-t { color: #fff; font-size: var(--fs-lg); }
.subnav__promo-t { display: block; }
.subnav__promo p { margin-top: var(--s-3); font-size: var(--fs-sm); line-height: 1.6; color: #A9C4DC; }
.subnav__promo .btn { margin-top: var(--s-5); }
.subnav__promo .tech-label { color: #7FA6C8; margin-top: var(--s-5); display: block; }
.subnav__foot {
  grid-column: 1 / -1; padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line); background: var(--paper);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.subnav__foot a { color: var(--navy); font-weight: 700; display: inline-flex; align-items: center; gap: var(--s-2); }
.subnav__foot a svg { width: 14px; height: 14px; flex: none; }

.header-cta { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.nav__mobile-cta, .nav__mobile-meta { display: none; }

/* z-index above the fixed .nav panel: the panel is later in the DOM, so when
   open it painted over the toggle and the menu could not be closed. */
.navtoggle { position: relative; z-index: 2; display: none; width: 46px; height: 46px;
  margin-left: auto; align-items: center; justify-content: center; color: var(--ink); }
.navtoggle span { display: block; width: 24px; height: 2px; background: currentColor; position: relative; transition: background var(--dur); }
.navtoggle span::before, .navtoggle span::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease), width var(--dur) var(--ease);
}
.navtoggle span::before { top: -8px; }
.navtoggle span::after  { top: 8px; width: 16px; }
body.nav-open .navtoggle { color: #fff; }
body.nav-open .navtoggle span { background: transparent; }
body.nav-open .navtoggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .navtoggle span::after  { top: 0; width: 24px; transform: rotate(-45deg); }

/* 5.4 Buttons ------------------------------------------------------------ */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: 0.875rem 1.625rem;
  font-size: .9375rem; font-weight: 700; letter-spacing: -.005em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  text-align: center; line-height: 1.25;
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-dk); box-shadow: 0 6px 20px rgba(13,44,75,.28); }
.btn--brass { background: var(--brass); color: #fff; }
.btn--brass:hover { background: #96651f; box-shadow: 0 6px 20px rgba(169,117,47,.3); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--navy); }
.btn--ghost { border-color: var(--haze); color: var(--navy); background: var(--white); }
.btn--ghost:hover { border-color: var(--navy); background: var(--navy-tint); }
.btn--outline-light { border-color: rgba(255,255,255,.42); color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.14); }
.btn--sm { padding: .5625rem 1.0625rem; font-size: var(--fs-sm); }
.btn--lg { padding: 1.0625rem 2.125rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.tlink {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 700; font-size: .9375rem; color: var(--navy);
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: rgba(18,59,99,.3);
  transition: text-decoration-color var(--dur) var(--ease);
}
.tlink svg { width: 14px; height: 14px; flex: none; transition: transform var(--dur) var(--ease); }
.tlink:hover { text-decoration-color: currentColor; }
.tlink:hover svg { transform: translateX(4px); }
.on-dark .tlink, .sec--dark .tlink, .sec--ink .tlink { color: #9FC4E4; text-decoration-color: rgba(159,196,228,.4); }

/* 5.5 HERO: cinematic, video-ready --------------------------------------- */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
  min-height: min(92svh, 900px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 26s var(--ease) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0,0,0); }
  to   { transform: scale(1.10) translate3d(-1.2%, -1.2%, 0); }
}
/* Layered gradient: dark enough for AA contrast, light enough that the
   photograph is still legible as a photograph. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,30,52,.72) 0%, rgba(8,30,52,.30) 34%, rgba(8,30,52,.80) 78%, rgba(8,30,52,.95) 100%),
    linear-gradient(100deg, rgba(8,30,52,.78) 0%, rgba(8,30,52,.24) 58%, rgba(8,30,52,0) 100%);
}
.hero__in { position: relative; z-index: 1; padding-block: clamp(6rem, 14vh, 10rem) clamp(2rem, 4vh, 3rem); width: 100%; }
/* rem, not ch: the `ch` unit resolves against THIS element's font-size (the
   inherited body size), not the h1's display size, which silently produced a
   ~190px column and one word per line. */
.hero__content { max-width: 56rem; }
.hero h1 { color: #fff; font-size: var(--fs-display); line-height: .98; letter-spacing: -.042em; }
.hero .eyebrow { color: #9CC0E0; }
.hero__lede { margin-top: var(--s-6); font-size: var(--fs-lg); color: #D3E1EE; max-width: 46ch; }
.hero .btn-row { margin-top: var(--s-8); }

/* Capability strip along the bottom edge of the hero */
.hero__strip {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,.18);
  background: rgba(8,30,52,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero__strip-in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4); padding-block: var(--s-5);
}
.hero__stat { display: flex; flex-direction: column; gap: 4px; }
.hero__stat b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; }
.hero__stat b span { font-size: .5em; color: var(--brass-lt); margin-left: 3px; }
.hero__stat span.l {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: #93AFC9; line-height: 1.45;
}

.hero__cue {
  position: absolute; right: var(--gutter); bottom: calc(100% + 20px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.hero__cue i { display: block; width: 1px; height: 34px; background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.65)); }

/* Interior page hero */
.phero { position: relative; background: var(--navy-dk); color: #fff; overflow: hidden; }
.phero__media { position: absolute; inset: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.phero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(13,44,75,.93) 0%, rgba(13,44,75,.74) 52%, rgba(13,44,75,.5) 100%);
}
.phero__in { position: relative; padding-block: clamp(3.25rem, 8vw, 7rem); }
.phero h1 { color: #fff; max-width: 18ch; font-size: var(--fs-4xl); letter-spacing: -.034em; }
.phero__lede { margin-top: var(--s-5); color: #CFDEEB; font-size: var(--fs-lg); max-width: 54ch; }

.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: #8FADC9; margin-bottom: var(--s-6);
}
.crumb a { transition: color var(--dur) var(--ease); }
.crumb a:hover { color: #fff; }
.crumb__sep { opacity: .4; }
.crumb [aria-current] { color: var(--brass-lt); }

/* 5.6 INTERSTITIAL: the cinematic pause between sections ----------------- */
.interstitial {
  position: relative; overflow: hidden;
  min-height: clamp(340px, 52vh, 620px);
  display: flex; align-items: center;
  background: var(--navy-deep); color: #fff;
}
.interstitial__media { position: absolute; inset: 0; }
.interstitial__media img { width: 100%; height: 100%; object-fit: cover; }
.interstitial__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(8,30,52,.90) 0%, rgba(8,30,52,.62) 55%, rgba(8,30,52,.42) 100%);
}
.interstitial__in { position: relative; z-index: 1; padding-block: clamp(3.5rem, 7vw, 6rem); }
.interstitial__stmt {
  font-size: var(--fs-2xl); font-weight: 800; line-height: 1.16; letter-spacing: -.028em;
  color: #fff; max-width: 22ch;
}
.interstitial__sub { margin-top: var(--s-5); color: #B7CDE0; max-width: 50ch; font-size: var(--fs-lg); }
.interstitial .eyebrow { color: var(--brass-lt); }
.interstitial--right .interstitial__in { display: flex; justify-content: flex-end; }
.interstitial--right .interstitial__media::after {
  background: linear-gradient(255deg, rgba(8,30,52,.90) 0%, rgba(8,30,52,.62) 55%, rgba(8,30,52,.42) 100%);
}
.interstitial--center { text-align: center; }
.interstitial--center .interstitial__stmt, .interstitial--center .interstitial__sub { margin-inline: auto; }
.interstitial--center .interstitial__media::after {
  background: linear-gradient(180deg, rgba(8,30,52,.86) 0%, rgba(8,30,52,.62) 50%, rgba(8,30,52,.86) 100%);
}

/* 5.7 SPLIT: asymmetric editorial. Image bleeds to the viewport edge. ----- */
.split { display: grid; align-items: center; gap: clamp(2.5rem, 5vw, 6rem); }
.split__body { max-width: 34rem; }
.split__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy-2); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__cap {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: var(--s-8) var(--s-5) var(--s-4);
  background: linear-gradient(to top, rgba(8,30,52,.92), rgba(8,30,52,0));
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #C6D9EA;
}
/* Bleed variants: media runs off the right or left edge of the viewport */
.split--bleed-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.split--bleed-r .split__media { margin-right: calc(var(--gutter) * -1); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.split--bleed-l { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split--bleed-l .split__media { margin-left: calc(var(--gutter) * -1); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; order: -1; }
.split--offset .split__body { padding-block: var(--s-8); }

/* 5.8 FIGURES: animated counters, no card chrome ------------------------- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(1.5rem,3vw,3rem); }
.figure { border-top: 2px solid var(--brass); padding-top: var(--s-5); }
.figure__n {
  font-size: clamp(2.25rem, 4.4vw, 3.5rem); font-weight: 800; letter-spacing: -.04em;
  line-height: .95; color: var(--ink); font-variant-numeric: tabular-nums;
}
.figure__n em { font-style: normal; font-size: .42em; color: var(--brass); margin-left: 4px; letter-spacing: 0; }
.figure__l { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; max-width: 24ch; }
.sec--dark .figure, .sec--ink .figure { border-top-color: var(--brass-lt); }
.sec--dark .figure__n, .sec--ink .figure__n { color: #fff; }
.sec--dark .figure__l, .sec--ink .figure__l { color: #A9C0D5; }
.sec--dark .figure__n em, .sec--ink .figure__n em { color: var(--brass-lt); }

/* 5.9 SPEC PANEL: dark technical data block ----------------------------- */
.specpanel {
  background: var(--navy-deep); color: #C7DCEE;
  border-radius: var(--radius-lg); overflow: hidden;
  border-top: 3px solid var(--brass);
}
.specpanel__head { padding: var(--s-6) var(--s-6) var(--s-4); border-bottom: 1px solid rgba(255,255,255,.1); }
.specpanel__head h3 { color: #fff; font-size: var(--fs-lg); }
.specpanel__head .tech-label { color: var(--brass-lt); margin-bottom: var(--s-2); }
.specpanel__rows { padding: var(--s-3) var(--s-6) var(--s-6); }
.specrow {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  gap: var(--s-4); padding: var(--s-4) 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.specrow:last-child { border-bottom: 0; }
.specrow dt { font-size: .9375rem; font-weight: 600; color: #fff; }
.specrow dd { font-family: var(--font-mono); font-size: var(--fs-sm); color: #A9C4DC; line-height: 1.6; }

/* 5.10 BIG QUOTE ---------------------------------------------------------- */
.bigquote { max-width: 24ch; }
.bigquote blockquote {
  font-size: var(--fs-2xl); font-weight: 700; line-height: 1.22; letter-spacing: -.028em;
  color: var(--ink);
}
.bigquote::before {
  content: ""; display: block; width: 48px; height: 3px;
  background: var(--brass); margin-bottom: var(--s-6);
}
.bigquote figcaption { margin-top: var(--s-6); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.sec--dark .bigquote blockquote, .sec--ink .bigquote blockquote { color: #fff; }
.sec--dark .bigquote figcaption, .sec--ink .bigquote figcaption { color: #8FB4D8; }

/* 5.11 CASE STUDIES ------------------------------------------------------ */
.caselist { display: grid; gap: var(--s-5); }
.case {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.case:hover { border-color: var(--haze); box-shadow: var(--shadow-md); }
.case[data-open="true"] { border-color: var(--navy); box-shadow: var(--shadow-lg); }
.case__head {
  width: 100%; display: grid; grid-template-columns: 200px minmax(0,1fr) auto;
  gap: var(--s-5); align-items: center; text-align: left; padding: 0;
}
.case__thumb { display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--navy-2); }
.case__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.case:hover .case__thumb img { transform: scale(1.04); }
/* No photograph of the job exists yet, so the thumbnail becomes a narrow index
   rail rather than an empty 200px hole. Put the <img> back in content.py when
   real photographs arrive and this modifier disappears with it. */
.case__head:has(.case__thumb--empty) { grid-template-columns: 60px minmax(0,1fr) auto; }
.case__thumb--empty {
  aspect-ratio: auto; align-self: stretch; min-height: 92px;
  display: flex; align-items: center; justify-content: center;
}
.case__thumb--empty .case__idx {
  position: static; background: none; padding: 0; font-size: 12px;
}
.case__idx {
  position: absolute; top: 0; left: 0; background: rgba(8,30,52,.86); color: var(--brass-lt);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; padding: 5px 8px;
}
.case__meta { display: block; padding-block: var(--s-5); }
.case__disc { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--brass); }
.case__t { display: block; margin-top: var(--s-2); font-size: var(--fs-lg); font-weight: 700; color: var(--ink); letter-spacing: -.018em; }
.case__sum { display: block; margin-top: var(--s-2); font-size: .9375rem; color: var(--text-muted); max-width: 52ch; }
.case__toggle {
  padding-inline: var(--s-6); align-self: stretch; display: flex; align-items: center;
  color: var(--navy); border-left: 1px solid var(--line-soft);
}
.case__toggle svg { width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
.case[data-open="true"] .case__toggle svg { transform: rotate(45deg); }
.case__body { display: none; padding: 0 var(--s-6) var(--s-6); border-top: 1px solid var(--line-soft); }
.case[data-open="true"] .case__body { display: block; }
.case__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-6); padding-top: var(--s-6); }
.case__block h4 { font-size: var(--fs-sm); font-family: var(--font-mono); font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--brass); margin-bottom: var(--s-3); }
.case__block p { font-size: .9375rem; color: var(--slate); line-height: 1.65; }
.case__block ul li { font-size: .9375rem; color: var(--slate); position: relative; padding-left: var(--s-4); margin-top: var(--s-2); }
.case__block ul li::before { content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 1px; background: var(--brass); }

/* 5.12 PROOF LAYER ------------------------------------------------------- */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.proof__cell { background: var(--white); padding: var(--s-6); }
.proof__cell .tech-label { color: var(--brass); }
.proof__cell h4 { margin-top: var(--s-3); font-size: var(--fs-base); font-weight: 700; }
.proof__cell p { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.sec--alt .proof__cell { background: var(--white); }

.logowall { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.logowall__slot {
  background: var(--white); aspect-ratio: 5/2; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mist); text-align: center; padding: var(--s-4);
}

/* 5.13 Cards: varied, less uniform -------------------------------------- */
.card { position: relative; display: flex; flex-direction: column; background: transparent; }
.card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--navy-2); border-radius: var(--radius-lg); }
.card--tall .card__media { aspect-ratio: 3/4; }
.card--wide .card__media { aspect-ratio: 3/2; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }
.card__idx {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2;
  background: rgba(8,30,52,.86); color: var(--brass-lt);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; padding: 5px 8px; border-radius: 3px;
}
.card__body { padding: var(--s-5) 0 0; display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.018em; }
.card__title a { transition: color var(--dur) var(--ease); }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__title a:hover { color: var(--navy); }
.card__desc { margin-top: var(--s-3); color: var(--text-muted); font-size: .9375rem; flex: 1; line-height: 1.6; }
.card__meta {
  margin-top: var(--s-4); font-size: .9375rem; font-weight: 700; color: var(--navy);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.card__meta svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.card:hover .card__meta svg { transform: translateX(4px); }
.card--dark .card__title { color: #fff; }
.card--dark .card__desc { color: #AFC2D3; }
.card--dark .card__meta { color: #9FC4E4; }

.tile { padding-top: var(--s-5); border-top: 3px solid var(--navy); height: 100%; }
.tile--alt { border-top-color: var(--brass); }
.tile__ico { width: 30px; height: 30px; color: var(--navy); margin-bottom: var(--s-4); }
.tile h3 { font-size: var(--fs-lg); }
.tile p { margin-top: var(--s-3); color: var(--text-muted); font-size: .9375rem; line-height: 1.6; }
.sec--dark .tile, .sec--ink .tile { border-top-color: #4E85B8; }
.sec--dark .tile h3, .sec--ink .tile h3 { color: #fff; }
.sec--dark .tile p, .sec--ink .tile p { color: #AFC2D3; }

/* 5.14 Specification table ----------------------------------------------- */
.spec { border-top: 2px solid var(--navy); }
.spec caption {
  caption-side: top; text-align: left; padding-bottom: var(--s-3);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--brass);
}
.spec th, .spec td { padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: .9375rem; }
.spec th { width: 42%; font-weight: 600; color: var(--ink); }
.spec td { color: var(--slate); font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6; }
.spec tr { transition: background var(--dur) var(--ease); }
.spec tr:hover td, .spec tr:hover th { background: var(--paper); }
.spec--dark { border-top-color: var(--brass-lt); }
.spec--dark caption { color: var(--brass-lt); }
.spec--dark th { color: #fff; }
.spec--dark td { color: #B6CEE3; }
.spec--dark th, .spec--dark td { border-bottom-color: var(--rule-dark); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 5.15 Checklist --------------------------------------------------------- */
.checks li { position: relative; padding-left: var(--s-7); margin-top: var(--s-3); font-size: .9375rem; line-height: 1.6; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .38em;
  width: 17px; height: 17px; background: var(--navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 14.2 3.4 10l1.4-1.4 2.8 2.8 7.6-7.6L16.6 5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 14.2 3.4 10l1.4-1.4 2.8 2.8 7.6-7.6L16.6 5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sec--dark .checks li, .sec--ink .checks li { color: #C7D8E7; }
.sec--dark .checks li::before, .sec--ink .checks li::before { background: #6FA3D2; }

/* 5.16 Process steps ----------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step { counter-increment: step; display: grid; grid-template-columns: 84px 1fr; gap: var(--s-6); padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; letter-spacing: .1em; color: var(--brass); }
.step__n::before { content: "0" counter(step); }
.step h3 { font-size: var(--fs-lg); }
.step p { margin-top: var(--s-3); color: var(--text-muted); max-width: 62ch; line-height: 1.65; }
.sec--dark .step, .sec--ink .step { border-color: var(--rule-dark); }
.sec--dark .step p, .sec--ink .step p { color: #AFC2D3; }
.sec--dark .step__n, .sec--ink .step__n { color: var(--brass-lt); }

/* 5.17 CTA band ---------------------------------------------------------- */
.cta { background: var(--paper); }
.cta__in { display: block; text-align: center; max-width: 46rem; margin-inline: auto; padding-block: clamp(3.5rem, 7vw, 6rem); }
.cta h2 { font-size: var(--fs-2xl); color: var(--ink); }
.cta p { margin-top: var(--s-4); color: var(--text-muted); font-size: var(--fs-lg); line-height: 1.6; }
.cta .btn-row { margin-top: var(--s-7); justify-content: center; }

/* 5.18 Gallery ----------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-bottom: var(--s-4); }
.filter {
  padding: .5rem 1.0625rem; font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-muted); background: var(--white);
  transition: all var(--dur) var(--ease);
}
.filter:hover { border-color: var(--navy); color: var(--navy); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.4vw, 2rem); }
.gal__item { position: relative; overflow: hidden; background: var(--navy-2); border-radius: var(--radius-lg); aspect-ratio: 4/3; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.gal__item:hover img { transform: scale(1.045); }
.gal__cap {
  position: absolute; inset: auto 0 0 0; padding: var(--s-8) var(--s-4) var(--s-4);
  background: linear-gradient(to top, rgba(8,30,52,.94), rgba(8,30,52,0));
  color: #fff;
}
.gal__cap h3 { font-size: var(--fs-base); color: #fff; }
.gal__cap span { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--brass-lt); }
.gal__item[hidden] { display: none; }

.case__block ul a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(18,59,99,.3); text-underline-offset: 2px; }
.case__block ul a:hover { text-decoration-color: var(--navy); }

h2.h3, .h3 { font-size: var(--fs-lg); letter-spacing: -.016em; }

.tile__links {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: .8125rem; color: var(--text-muted);
}
.tile__links a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(18,59,99,.3); text-underline-offset: 2px; }
.tile__links a:hover { text-decoration-color: var(--navy); }
.tile--dark .tile__links, .sec--dark .case__block ul a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(18,59,99,.3); text-underline-offset: 2px; }
.case__block ul a:hover { text-decoration-color: var(--navy); }

h2.h3, .h3 { font-size: var(--fs-lg); letter-spacing: -.016em; }

.tile__links { border-top-color: rgba(255,255,255,.14); color: #9DB4C9; }
.tile--dark .tile__links a, .sec--dark .tile__links a { color: #9FC4E4; }

/* 5.30 ENGINEERING LEADERSHIP -------------------------------------------
   A portrait-led profile block, scoped to the .consult register so the page
   reads as part of the consultancy proposition rather than as a staff page.
   Deliberately asymmetric and hairline-ruled: two people presented at scale,
   not a grid of headshots.
   ------------------------------------------------------------------------ */
.lead { display: grid; gap: var(--s-7); padding-block: var(--s-9); }
.lead + .lead { border-top: 1px solid var(--c-rule, var(--line)); }

.lead__media { position: relative; }
.lead__media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); background: var(--navy-deep);
}
.lead__pending {
  position: absolute; left: var(--s-4); bottom: var(--s-4); right: var(--s-4);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.5); line-height: 1.5;
}

.lead__name {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.1; letter-spacing: -.015em; color: var(--c-ink, var(--ink));
}
.lead__cred {
  display: inline-block; margin-left: .4em; vertical-align: .18em;
  font-family: var(--font-mono); font-size: .5em; letter-spacing: .1em;
  color: var(--brass); font-weight: 500;
}
.lead__role {
  margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-muted);
}
.lead__body { max-width: 62ch; }
.lead__body p { margin-top: var(--s-5); line-height: 1.75; color: var(--slate); }
.lead__body p:first-of-type { font-size: 1.0625rem; color: var(--ink); }

.lead__facts {
  list-style: none; margin: var(--s-7) 0 0; padding: var(--s-5) 0 0;
  border-top: 1px solid var(--line); display: grid; gap: var(--s-3);
}
.lead__facts li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s-4);
  font-size: .9rem; line-height: 1.6; align-items: start;
}
.lead__facts b {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 500;
  padding-top: .25em;
}

@media (min-width: 900px) {
  .lead { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: var(--s-10); align-items: start; }
  /* Alternating the portrait side has to move the COLUMN WIDTHS too, not just
     the order, otherwise the portrait lands in the wide column and the copy is
     squeezed into the narrow one. */
  .lead--flip { grid-template-columns: minmax(0, 1.38fr) minmax(0, .62fr); }
  /* The consultancy-page band is a single introduction, not a full profile, so
     the portrait is smaller and the copy column wider. */
  .lead--compact { grid-template-columns: minmax(0, .42fr) minmax(0, 1.58fr); gap: var(--s-9); }
  .lead--flip .lead__media { order: 2; }
  .lead__facts li { grid-template-columns: 9.5rem 1fr; }
}

/* 5.19 Accordion --------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-6) 0; text-align: left; font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: -.016em; color: var(--ink); transition: color var(--dur) var(--ease);
}
.acc__btn:hover { color: var(--navy); }
.acc__ico { width: 18px; height: 18px; flex: none; color: var(--brass); transition: transform var(--dur) var(--ease); }
.acc__btn[aria-expanded="true"] .acc__ico { transform: rotate(45deg); }
.acc__panel { display: none; padding-bottom: var(--s-6); max-width: var(--measure); color: var(--text-muted); }
.acc__panel[data-open="true"] { display: block; }
.acc__panel p { line-height: 1.75; }
.acc__panel a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(18,59,99,.35); text-underline-offset: 3px; }
.acc__panel a:hover { text-decoration-color: var(--navy); }

/* The FAQ question is an <h3> wrapping the toggle button, so the heading
   outline stays correct for a screen reader and for a crawler. The heading
   itself must carry no visual weight of its own. The button does that. */
.acc__h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }

/* 5.20 Two-step enquiry router + progress -------------------------------- */
.eform__steplbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--steel); margin-bottom: var(--s-2); }
.eform__q { font-size: var(--fs-xl); font-weight: 800; color: var(--ink); letter-spacing: -.022em; }
.eform__step[hidden] { display: none; }

/* Progress indicator */
.qprogress { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); }
.qprogress__step { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.qprogress__dot {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--haze);
  display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--mist);
  transition: all var(--dur) var(--ease); flex: none;
}
.qprogress__step[data-state="active"] { color: var(--navy); }
.qprogress__step[data-state="active"] .qprogress__dot { border-color: var(--navy); background: var(--navy); color: #fff; }
.qprogress__step[data-state="done"] { color: var(--brass); }
.qprogress__step[data-state="done"] .qprogress__dot { border-color: var(--brass); background: var(--brass); color: #fff; }
.qprogress__bar { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.qprogress__bar i { position: absolute; inset: 0; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease); }
.qprogress[data-step="2"] .qprogress__bar i { transform: scaleX(1); }

.route-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.route-card {
  display: block; width: 100%; text-align: left;
  padding: var(--s-5); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.route-card:hover { border-color: var(--navy); background: var(--navy-tint); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.route-card__t { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--navy); }
.route-card__d { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }

.eform__back { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; margin-bottom: var(--s-3); }
.eform__back:hover { color: var(--navy-lt); }
.eform__back[hidden], .eform__steplbl[hidden] { display: none; }

.eform__note {
  padding: var(--s-5); background: var(--navy-tint);
  border-left: 3px solid var(--navy); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9375rem; color: var(--slate); line-height: 1.65;
}
.eform__cond[hidden] { display: none; }
.eform__direct { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--text-muted); font-size: .9375rem; }
.eform__direct a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

/* "What helps us quote accurately" */
.helps { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.helps__head { padding: var(--s-5) var(--s-6); background: var(--paper); border-bottom: 1px solid var(--line); }
.helps__head h3 { font-size: var(--fs-base); }
.helps__head .tech-label { color: var(--brass); display: block; margin-bottom: var(--s-2); }
.helps ol { padding: var(--s-5) var(--s-6); counter-reset: h; display: grid; gap: var(--s-4); }
.helps li { counter-increment: h; display: grid; grid-template-columns: 26px 1fr; gap: var(--s-3); font-size: .9375rem; color: var(--slate); line-height: 1.55; }
.helps li::before { content: counter(h, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--brass); padding-top: 3px; }
.helps li b { display: block; color: var(--ink); font-weight: 700; }

/* 5.21 Forms ------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field > label, .fieldset__legend { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: var(--s-2); }
.req { color: var(--brass); font-weight: 800; }
.opt { font-weight: 400; color: var(--steel); font-size: var(--fs-xs); }
.field__hint { font-size: var(--fs-xs); color: var(--steel); line-height: 1.6; }

.input, .select, .textarea {
  width: 100%; padding: .875rem var(--s-4);
  background: var(--white); color: var(--ink);
  border: 1px solid var(--haze); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  font-size: .9375rem;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--steel); }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(18,59,99,.13); }
.textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748B'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px;
}
.field--error .input, .field--error .select, .field--error .textarea { border-color: #B3261E; }
.field__err { font-size: var(--fs-xs); color: #B3261E; font-weight: 600; display: none; }
.field--error .field__err { display: block; }

.fieldset { border: 0; padding: 0; display: grid; gap: var(--s-3); }
.fieldset__legend { padding: 0; margin-bottom: var(--s-1); }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-2); }
.choice {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border: 1px solid var(--haze); border-radius: var(--radius);
  cursor: pointer; font-size: .9375rem; background: var(--white);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice:hover { border-color: var(--steel); }
.choice input { margin-top: 3px; accent-color: var(--navy); flex: none; }
.choice:has(input:checked) { border-color: var(--navy); background: var(--navy-tint); }

.drop {
  border: 1.5px dashed var(--haze); border-radius: var(--radius-lg);
  background: var(--paper); padding: var(--s-8) var(--s-5); text-align: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  cursor: pointer;
}
.drop:hover, .drop[data-drag="true"] { border-color: var(--navy); background: var(--navy-tint); }
.drop__ico { width: 36px; height: 36px; margin: 0 auto var(--s-3); color: var(--navy); }
.drop__title { font-weight: 700; font-size: .9375rem; }
.drop__title u { color: var(--navy); text-underline-offset: 3px; }
.drop__hint { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--steel); line-height: 1.65; }
.drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.filelist { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.filelist:empty { display: none; }
.fileitem {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-sm);
}
.fileitem__ext { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; background: var(--navy); color: #fff; padding: 4px 7px; border-radius: 3px; flex: none; }
.fileitem__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fileitem__size { color: var(--steel); font-family: var(--font-mono); font-size: var(--fs-xs); flex: none; }
.fileitem--bad { border-color: #E5B4B0; background: #FCF4F3; }
.fileitem--bad .fileitem__ext { background: #B3261E; }
.fileitem__msg { color: #B3261E; font-size: var(--fs-xs); }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); justify-content: space-between; }
.form__legal { font-size: var(--fs-xs); color: var(--steel); max-width: 46ch; line-height: 1.6; }
.form__legal a { color: var(--navy); text-decoration: underline; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: var(--s-4) var(--s-5); border-radius: var(--radius); border-left: 3px solid; font-size: .9375rem; }
.alert--err { background: #FCF4F3; border-color: #B3261E; color: #8C1D18; }
.alert--ok  { background: #F1F7F2; border-color: #2E7D45; color: #1F5A31; }
.alert[hidden] { display: none; }

/* 5.22 Info panels ------------------------------------------------------- */
.infocard { background: var(--navy-deep); color: #C7D8E7; padding: var(--s-6); border-radius: var(--radius-lg); border-top: 3px solid var(--brass); }
.infocard h3 { color: #fff; font-size: var(--fs-lg); }
.infocard p { color: #B6CEE3; }
.infocard dl { margin-top: var(--s-5); display: grid; gap: var(--s-4); }
.infocard dt { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-lt); margin-bottom: 4px; }
.infocard dd { font-size: .9375rem; line-height: 1.6; color: #DCE6EF; }
.infocard a { transition: color var(--dur) var(--ease); }
.infocard a:hover { color: #fff; text-decoration: underline; }

.locations { display: grid; gap: var(--s-5); }
.location { padding: var(--s-7); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); border-top: 3px solid var(--navy); transition: box-shadow var(--dur) var(--ease); }
.location:hover { box-shadow: var(--shadow-md); }
.location__tag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--brass); }
.location h3 { margin-top: var(--s-3); font-size: var(--fs-xl); }
.location address { font-style: normal; margin-top: var(--s-4); color: var(--slate); font-size: .9375rem; line-height: 1.7; }
.location__links { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-5); font-size: .9375rem; }
.location__links a { font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }

/* 5.23 Badges ------------------------------------------------------------ */
.badges { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border: 1px solid var(--line);
  border-radius: 999px; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .05em; color: var(--slate); background: var(--white);
}
.badge svg { width: 14px; height: 14px; color: var(--brass); }
.sec--dark .badge, .sec--ink .badge { background: transparent; border-color: var(--rule-dark); color: #AFC2D3; }
.sec--dark .badge svg, .sec--ink .badge svg { color: var(--brass-lt); }

/* legacy pull quote (kept for pages using .quote) */
.quote { border-left: 3px solid var(--brass); padding-left: var(--s-6); }
.quote blockquote { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.38; }
.quote figcaption { margin-top: var(--s-4); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.sec--dark .quote figcaption, .sec--ink .quote figcaption { color: #8FB4D8; }

/* 5.24 Vacancies --------------------------------------------------------- */
.vac { border-top: 1px solid var(--line); }
.vac__item { border-bottom: 1px solid var(--line); padding: var(--s-7) 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s-5); align-items: center; }
.vac__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.vac__meta span { display: inline-flex; align-items: center; gap: 6px; }
.vac__meta svg { width: 13px; height: 13px; color: var(--brass); }

/* 5.25 FOOTER ------------------------------------------------------------ */
.site-footer { background: var(--near-black); color: #96A0AA; font-size: .9375rem; }
.footer__cta {
  border-bottom: 1px solid rgba(255,255,255,.09);
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}
.footer__cta-in { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s-7); align-items: center; }
.footer__cta h2 { color: #fff; font-size: var(--fs-2xl); max-width: 20ch; }
.footer__cta p { margin-top: var(--s-3); color: #8E99A4; max-width: 52ch; }
.footer__main { padding-block: clamp(3.25rem, 5.5vw, 5rem); display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(2rem, 4vw, 3.5rem); }
/* The footer ground is dark, so the footer takes the keyed artwork with no tile
   behind it: white wordmark on dark is how this logo was drawn to be read. */
.footer__mark { height: 76px; width: auto; margin-bottom: var(--s-5); display: block; }
.footer__desc { max-width: 34ch; line-height: 1.7; }
.footer h3 { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-lt); margin-bottom: var(--s-5); }
.footer__list li { position: relative; }
.footer__list li + li { margin-top: var(--s-3); }
.footer__list a { transition: color var(--dur) var(--ease); }
.footer__list a:hover { color: var(--white); }
.footer address { font-style: normal; line-height: 1.75; }
.footer__contact { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.footer__contact a { color: #C3CBD3; transition: color var(--dur) var(--ease); }
.footer__contact a:hover { color: var(--white); }
.footer__group { border-top: 1px solid rgba(255,255,255,.09); padding-block: var(--s-5); }
.footer__group-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.footer__group-lbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: #6B7681; }
.footer__group a { color: #C3CBD3; font-weight: 600; transition: color var(--dur) var(--ease); }
.footer__group a:hover { color: var(--white); }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.09); padding-block: var(--s-6);
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  font-size: var(--fs-xs); color: #6B7681; line-height: 1.7;
}
.footer__legal p { max-width: 62ch; }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer__legal a { transition: color var(--dur) var(--ease); }
.footer__legal a:hover { color: #C3CBD3; }

/* 5.26 Sticky quote bar (mobile) ----------------------------------------- */
.quotebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
  background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,.16);
  padding: var(--s-3) var(--gutter); gap: var(--s-3);
  box-shadow: 0 -6px 24px rgba(0,0,0,.22);
  padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
}
.quotebar .btn { flex: 1; }

/* 5.28 COMMERCIAL PILLARS -------------------------------------------------
   The three ways a customer can engage, stated before the seven-discipline
   card grid further down the page. Built as an asymmetric rail ( a sticky
   lead column and three hairline-separated rows) specifically so that it
   cannot be read as another row of identical cards. Deliberately light:
   it sits directly beneath the dark hero and has to break, not extend, it.
   ------------------------------------------------------------------------ */
/* 5.29 THE DELIVERY CHAIN ------------------------------------------------
   Problem → Engineering → Design → Manufacture → Installation, as one band
   directly beneath the hero. It is the first thing after the headline because
   the single most important thing a visitor has to learn about this business
   is that it covers all five, and four seconds is all the time available to
   say so. Deliberately typographic: no boxes, no icons, no cards.
   ------------------------------------------------------------------------ */
.chain-sec {
  background: var(--navy-deep); color: #B9CFE3;
  padding-block: var(--s-7);
  border-top: 1px solid rgba(255,255,255,.08);
}
.chain {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-5);
  counter-reset: none;
}
.chain__step {
  display: flex; flex-direction: column; gap: 2px;
  position: relative; padding-left: var(--s-6);
}
.chain__step::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 1px; background: var(--brass);
}
.chain__n {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
  color: #6F91B0;
}
.chain__t {
  font-weight: 700; color: #fff; letter-spacing: -.01em;
  font-size: 1.0625rem; line-height: 1.25;
}
.chain__s { font-size: .8125rem; color: #8FAAC4; line-height: 1.45; }
.chain__who {
  margin-top: var(--s-3); padding-top: var(--s-2);
  border-top: 1px solid rgba(255,255,255,.12);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brass-lt); line-height: 1.5;
}

.chain__note {
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .875rem; color: #8FAAC4; max-width: 78ch; line-height: 1.65;
}

@media (min-width: 820px) {
  .chain { grid-template-columns: repeat(5, 1fr); gap: var(--s-5); align-items: start; }
}

.pillars-sec { background: var(--bg-alt); }

.related__consult {
  max-width: 62ch; padding-top: var(--s-5); border-top: 1px solid var(--line);
  color: var(--text-muted); font-size: .95rem;
}

.pillars { display: grid; gap: var(--s-9); }
.pillars__lead { max-width: 34ch; }
.pillars__foot {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--text-muted); max-width: 40ch;
}
.pillars__rail { border-top: 1px solid var(--ink); }

.pillar {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-7);
  border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.pillar:hover, .pillar:focus-visible { background: rgba(18,59,99,.045); }
.pillar__n {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em;
  color: var(--brass); padding-top: .45rem;
}
.pillar__body { display: block; }
.pillar__t {
  display: block; font-weight: 700; letter-spacing: -.02em; color: var(--navy-dk);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem); line-height: 1.18;
}
.pillar:hover .pillar__t { color: var(--navy); }
.pillar__s {
  display: block; margin-top: var(--s-3); color: var(--slate);
  max-width: 54ch; line-height: 1.65;
}
.pillar__cov {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted);
}
.pillar__cov li { position: relative; padding-left: var(--s-4); }
.pillar__cov li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 6px; height: 1px; background: var(--brass);
}
.pillar__go {
  grid-column: 2; display: inline-flex; align-items: center; gap: .5rem;
  margin-top: var(--s-5); font-size: .9rem; font-weight: 600; color: var(--navy);
}
/* The shared ARROW glyph is an unsized <svg>; without an explicit box it
   inherits the intrinsic viewBox and renders enormous. */
.pillar__go svg {
  width: 1.05em; height: 1.05em; flex: 0 0 auto;
  transition: transform var(--dur) var(--ease);
}
.pillar:hover .pillar__go svg { transform: translateX(4px); }

@media (min-width: 900px) {
  .pillars { grid-template-columns: minmax(0, .72fr) minmax(0, 1.6fr); gap: var(--s-10); }
  .pillars__lead { position: sticky; top: calc(var(--header-h) + var(--s-8)); align-self: start; }
  .pillar { grid-template-columns: 4rem 1fr auto; align-items: start; }
  .pillar__go { grid-column: 3; margin-top: .5rem; justify-self: end; white-space: nowrap; }
}

/* 5.27 CONSULTANCY REGISTER ----------------------------------------------
   A scoped visual language for engineering-consultancy.html. Everything here
   lives under .consult, so the fabrication pages keep the navy/Manrope system
   untouched. The differences are deliberate and few: a serif display face,
   a warm paper ground, hairline numbered indices, and considerably more air.
   ------------------------------------------------------------------------ */
.consult { --bg-alt: var(--c-paper); }
.consult h1, .consult h2, .consult h3,
.consult .c-display, .consult .bigquote blockquote {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.12;
}
.consult .c-display { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5rem); line-height: 1.02; letter-spacing: -.018em; }
.consult .sec--alt { background: var(--c-paper); }
.consult .eyebrow { color: var(--c-tan); letter-spacing: .22em; font-family: var(--font-mono); font-weight: 500; }
.consult .sec--ink { background: var(--c-ink); color: var(--c-cream); }
.consult .sec--ink .eyebrow { color: var(--c-tan-lt); }
.consult .sec--ink p, .consult .sec--ink .lede { color: #BDB9B1; }

/* Consultancy hero: near-black, serif, no photographic hero. The subject is
   judgement, and a photograph of a workshop would say the wrong thing here. */
.c-hero { background: var(--c-ink); color: var(--c-cream); position: relative; overflow: hidden; }
.c-hero::before {
  content: ""; position: absolute; inset: 0;
  /* Drawing-sheet grid. A technical surface rather than a photograph. */
  background-image:
    linear-gradient(rgba(233,231,226,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,231,226,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(160deg, rgba(0,0,0,.9), transparent 72%);
  -webkit-mask-image: linear-gradient(160deg, rgba(0,0,0,.9), transparent 72%);
}
.c-hero__in { position: relative; padding-block: clamp(4.5rem, 11vw, 9rem) clamp(3rem, 6vw, 5rem); }
.c-hero h1 { color: #fff; max-width: 15ch; }
.c-hero__grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(2.5rem,5vw,5rem); margin-top: clamp(2.5rem,4vw,3.5rem); align-items: start; }
.c-hero__lede { font-size: var(--fs-lg); color: #C6C2BA; line-height: 1.62; max-width: 48ch; }
.c-hero__lede strong { color: #fff; font-weight: 600; }

/* Numbered hairline index: the device that carries the consultancy pages */
.cindex { border-top: 1px solid rgba(233,231,226,.16); }
.cindex li {
  display: grid; grid-template-columns: 40px minmax(0,1fr); gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px solid rgba(233,231,226,.16);
  align-items: baseline;
}
.cindex li span { font-family: var(--font-mono); font-size: 11px; color: var(--c-tan); letter-spacing: .1em; }
.cindex li b { font-weight: 500; font-size: .9375rem; color: #E9E7E2; }
.cindex--light { border-top-color: var(--c-rule); }
.cindex--light li { border-bottom-color: var(--c-rule); }
.cindex--light li b { color: var(--ink); }
.cindex--light li span { color: var(--c-tan); }

/* Keyword strip: the thin mono band between major sections */
.cstrip {
  background: #101417; color: #8E8A82; border-block: 1px solid rgba(233,231,226,.1);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
}
.cstrip__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: var(--s-4); flex-wrap: wrap; }
.cstrip b { font-weight: 500; color: #B4AFA6; }

/* Asymmetric editorial pair: serif heading left, sans body right */
.cpair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(2.5rem,6vw,6rem); align-items: start; }
.cpair h2 { max-width: 15ch; }
.cpair__body { padding-top: .35rem; }
.cpair__body p + p { margin-top: var(--s-5); }

/* Three-column editorial with vertical dividers, as on the advisory site */
.ccols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.ccol { padding: var(--s-7) clamp(1.25rem, 2.5vw, 2.5rem); border-left: 1px solid var(--c-rule); }
.ccol:first-child { border-left: 0; padding-left: 0; }
.ccol h3 { font-size: var(--fs-xl); }
.ccol p { margin-top: var(--s-4); color: var(--slate); font-size: .9375rem; line-height: 1.7; }
.sec--ink .ccol { border-left-color: rgba(233,231,226,.16); }
.sec--ink .ccol h3 { color: #fff; }
.sec--ink .ccol p { color: #ADA9A1; }

/* Stage rail: the five-step how-we-work sequence */
.crail { display: grid; gap: 0; border-top: 1px solid var(--c-rule); }
.cstage {
  display: grid; grid-template-columns: 72px minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.25rem,3vw,3rem); padding: var(--s-7) 0;
  border-bottom: 1px solid var(--c-rule); align-items: start;
}
.cstage__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--c-tan); padding-top: .45rem; }
.cstage h3 { font-size: var(--fs-lg); }
.cstage p { color: var(--slate); font-size: .9375rem; line-height: 1.7; }
.cstage__out { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--steel); line-height: 1.7; }
.cstage__out b { display: block; color: var(--c-tan); letter-spacing: .12em; text-transform: uppercase; font-size: 10px; font-weight: 500; margin-bottom: 6px; }

/* Advice-to-manufacture: the differentiator block */
/* Five steps, not three: the chain is the proposition, so it is drawn as a
   chain. auto-fit keeps it honest at every width without a second breakpoint. */
.cbridge { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); align-items: stretch; }
@media (max-width: 1100px) { .cbridge { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (max-width: 700px)  { .cbridge { grid-template-columns: 1fr; } }
.cbridge__step { background: rgba(233,231,226,.04); border: 1px solid rgba(233,231,226,.14); border-radius: var(--radius-lg); padding: var(--s-6); position: relative; }
.cbridge__step h3 { font-size: var(--fs-lg); color: #fff; }
.cbridge__step p { margin-top: var(--s-3); font-size: .9375rem; color: #ADA9A1; line-height: 1.65; }
.cbridge__step .tech-label { color: var(--c-tan-lt); }
.cbridge__step--own { background: rgba(169,143,106,.1); border-color: rgba(169,143,106,.45); }

/* Closing note on the work page. This replaced a dashed "client to supply"
   placeholder: the absence of customer names and figures is a deliberate
   commercial position, not an unfinished section, and it should look like one. */
.casenote {
  display: grid; gap: var(--s-6);
  padding-top: var(--s-8); border-top: 2px solid var(--ink);
}
.casenote h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.02em; }
.casenote p { color: var(--slate); max-width: 62ch; line-height: 1.7; }
.casenote .tech-label { color: var(--brass); }
@media (min-width: 900px) {
  .casenote { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--s-10); }
}

/* Charging note. Deliberately set apart from the body copy rather than buried
   in it: "what will this cost me" is the question that stops a consultancy
   enquiry being sent, and answering it plainly is worth a box of its own. */
.cnote {
  border-left: 2px solid var(--c-tan);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
}
.cnote .tech-label { color: var(--c-tan-lt); }
.cnote p {
  margin-top: var(--s-3); color: #BDB9B1;
  font-size: .9375rem; line-height: 1.7; max-width: 56ch;
}
.consult .sec--alt .cnote p, .consult .sec:not(.sec--ink):not(.sec--dark) .cnote p {
  color: var(--slate);
}
.consult .sec--alt .cnote .tech-label,
.consult .sec:not(.sec--ink):not(.sec--dark) .cnote .tech-label { color: #8A6E45; }

/* LinkedIn mark */
.li-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  color: var(--steel); transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  flex: none;
}
.li-link svg { width: 18px; height: 18px; }
.li-link:hover { color: #0A66C2; background: var(--navy-tint); }
.utilbar .li-link { width: 26px; height: 26px; color: #A9C2D8; }
.utilbar .li-link svg { width: 15px; height: 15px; }
.utilbar .li-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.footer .li-link { color: #96A0AA; margin-top: var(--s-4); }
.footer .li-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav__mobile-social { display: none; }

@media (max-width: 900px) {
  .cpair, .c-hero__grid { grid-template-columns: 1fr; }
  .ccols { grid-template-columns: 1fr; }
  .ccol { border-left: 0; border-top: 1px solid var(--c-rule); padding-left: 0; padding-right: 0; }
  .ccol:first-child { border-top: 0; }
  .sec--ink .ccol { border-top-color: rgba(233,231,226,.16); border-left: 0; }
  .cstage { grid-template-columns: 48px minmax(0,1fr); }
  .cstage__out { grid-column: 2; }
  .cbridge { grid-template-columns: 1fr; }
}

/* 6. MOTION
   ==========================================================================
   Reveal: elements start slightly low and transparent, and settle once when
   first scrolled into view. `.is-in` is added by the IntersectionObserver in
   main.js. If JavaScript never runs, `.reveal` has no effect at all, because
   the hidden state is applied only under [data-motion="on"], which the script
   sets. Content is therefore never dependent on JS.
   ------------------------------------------------------------------------ */
[data-motion="on"] .reveal { opacity: 0; transform: translate3d(0, 18px, 0); }
[data-motion="on"] .reveal {
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-motion="on"] .reveal.is-in { opacity: 1; transform: none; }
[data-motion="on"] .reveal--left  { transform: translate3d(-22px, 0, 0); }
[data-motion="on"] .reveal--right { transform: translate3d(22px, 0, 0); }
[data-motion="on"] .reveal--scale { transform: scale(.965); }

/* Stagger helper: children reveal in sequence */
[data-motion="on"] .reveal-group > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-motion="on"] .reveal-group.is-in > * { opacity: 1; transform: none; }
[data-motion="on"] .reveal-group.is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-motion="on"] .reveal-group.is-in > *:nth-child(2) { transition-delay: 70ms; }
[data-motion="on"] .reveal-group.is-in > *:nth-child(3) { transition-delay: 140ms; }
[data-motion="on"] .reveal-group.is-in > *:nth-child(4) { transition-delay: 210ms; }
[data-motion="on"] .reveal-group.is-in > *:nth-child(5) { transition-delay: 280ms; }
[data-motion="on"] .reveal-group.is-in > *:nth-child(6) { transition-delay: 350ms; }
[data-motion="on"] .reveal-group.is-in > *:nth-child(n+7) { transition-delay: 420ms; }

/* 7. UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt-0{margin-top:0}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)}
.mt-8{margin-top:var(--s-8)}.mt-9{margin-top:var(--s-9)}
.text-center{text-align:center}
.maxw-prose{max-width:var(--measure)}
.img-frame { border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-2); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.ratio-43 { aspect-ratio: 4/3; }
.ratio-32 { aspect-ratio: 3/2; }
.ratio-11 { aspect-ratio: 1/1; }
.ratio-169 { aspect-ratio: 16/9; }
.ratio-219 { aspect-ratio: 21/9; }
.ratio-34 { aspect-ratio: 3/4; }

/* Verification marker: VISIBLE ON PURPOSE. See VERIFY-BEFORE-LAUNCH.md */
.verify {
  background: #FFF3D4; border-bottom: 2px dotted #A67C1A; padding: 0 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; color: #4A3A10;
}
.verify::after { content: " ⚑"; font-size: .75em; color: #A67C1A; }
/* Whole-block placeholder marker for proof/case-study slots */
.placeholder {
  border: 1.5px dashed #C9A227; background: #FFFBF0; border-radius: var(--radius);
  padding: var(--s-4) var(--s-5); color: #6B5514; font-size: var(--fs-sm); line-height: 1.6;
}
.placeholder b { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: #A67C1A; margin-bottom: var(--s-2); }

/* 8. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .footer__main { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hero__strip-in { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-5); }
  .subnav { width: min(720px, 92vw); grid-template-columns: 1fr; }
  .subnav__promo { display: none; }
}

/* Mobile navigation takes over at 1280px, not 960.
   Measured, not guessed: brand + eight nav items + the quotation CTA needs
   1,280px to sit on one line. At 1,200 the CTA was clipped by the page's
   overflow-x: clip and the utility bar wrapped to two rows with the LinkedIn
   mark orphaned on the second. Raised from 1,200 to 1,280 in pass three, when
   Consultancy was promoted to the top level and the row gained an item.
   Between 960 and 1,280 the composed mobile menu is simply a better experience
   on a tablet than a squeezed desktop one.
   JS KEEPS THIS IN SYNC. See NAV_BREAKPOINT in js/main.js. Change both. */
@media (max-width: 1279px) {
  :root { --header-h: 66px; --header-h-condensed: 60px; }
  .utilbar__item--hide-md { display: none; }

  .navtoggle { display: flex; }
  .header-cta { display: none; }

  /* backdrop-filter on an ancestor establishes a containing block for fixed
     descendants, which would clip the off-canvas nav to the header. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--white); }

  /* The panel covers the whole viewport, INCLUDING the utility bar and the
     header, and then pads its content clear of them. Anchoring the panel's top
     to var(--header-h) instead assumed the header began at viewport 0, true
     once scrolled, but at scroll top the utility bar sits above it, so the panel
     began mid-header and sliced the brand mark in half.
     --nav-top is written by js/main.js from the header's measured bottom edge
     at the moment the menu opens, so it is correct at any scroll position; the
     fallback covers the no-JS case, which never opens the panel anyway. */
  .nav {
    position: fixed; inset: 0; margin: 0;
    background: var(--navy-deep); overflow-y: auto;
    padding: calc(var(--nav-top, var(--header-h)) + var(--s-6)) var(--gutter) var(--s-10);
    transform: translateX(100%); transition: transform .34s var(--ease-out);
    visibility: hidden;
  }
  /* Brand and toggle stay above the panel so the header reads as continuous. */
  body.nav-open .brand { position: relative; z-index: 2; }
  body.nav-open .nav { transform: translateX(0); visibility: visible; }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { background: var(--navy-deep); border-bottom-color: rgba(255,255,255,.12); }
  body.nav-open .brand__name { color: #fff; }
  body.nav-open .brand__sub { color: #8FB4D8; }
  body.nav-open .brand { color: #fff; }

  /* Mobile nav is composed, not a collapsed desktop menu: larger touch rows,
     a mono index against each item, and the CTAs promoted to the bottom. */
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; counter-reset: nv; }
  .nav__item { counter-increment: nv; border-bottom: 1px solid rgba(255,255,255,.1); }
  /* flex-start, not space-between: with space-between a plain item pushed its
     label hard right against the panel edge while Services ( which also carries
     a caret) sat left, so the menu read as two different lists. The caret is
     pushed right by its own margin-left: auto instead. */
  .nav__link { padding: var(--s-5) 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; justify-content: flex-start; width: 100%; color: #E4EDF5; }
  .nav__link::before {
    content: "0" counter(nv); font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .12em; color: #5C7E9E; margin-right: var(--s-4); font-weight: 500;
  }
  .nav__link::after { display: none; }
  .nav__link:hover { color: #fff; }
  .nav__item--current > .nav__link { color: var(--brass-lt); }
  .nav__caret { color: #7FA6C8; margin-left: auto; }

  .subnav {
    position: static; transform: none; width: auto; display: none;
    grid-template-columns: 1fr; background: transparent; border: 0;
    box-shadow: none; padding: 0 0 var(--s-4) 0;
    opacity: 1; visibility: visible; pointer-events: auto; border-radius: 0;
  }
  .nav__item--has-menu[data-open="true"] .subnav { display: block; transform: none; }
  .subnav__links { padding: 0 0 0 var(--s-6); grid-template-columns: 1fr; border-left: 1px solid rgba(255,255,255,.15); }
  .subnav__link { padding: var(--s-3) 0; }
  .subnav__link:hover { background: transparent; }
  .subnav__title { color: #C7DCEE; font-size: 1rem; }
  .subnav__link:hover .subnav__title { color: #fff; }
  .subnav__desc { display: none; }
  .subnav__foot { display: none; }

  .nav__mobile-cta { margin-top: var(--s-8); display: grid; gap: var(--s-3); }
  .nav__mobile-social { display: flex; gap: var(--s-2); margin-top: var(--s-6); }
  .nav__mobile-social .li-link { color: #8FB4D8; border: 1px solid rgba(255,255,255,.18); width: 42px; height: 42px; }
  .nav__mobile-social .li-link:hover { color: #fff; background: rgba(255,255,255,.1); }
  .nav__mobile-meta { display: block; margin-top: var(--s-7); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #6B8CAA; line-height: 1.9; }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--sidebar, .grid--split { grid-template-columns: 1fr; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .quotebar { display: flex; }
  body { padding-bottom: 70px; }

  /* Splits stack, and the bleed is released */
  .split--bleed-r, .split--bleed-l { grid-template-columns: 1fr; }
  .split--bleed-r .split__media { margin-right: calc(var(--gutter) * -1); margin-left: calc(var(--gutter) * -1); border-radius: 0; }
  .split--bleed-l .split__media { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; order: 0; }
  .split__body { max-width: none; }

  .case__head { grid-template-columns: 120px minmax(0,1fr) auto; }
  .footer__cta-in { grid-template-columns: 1fr; }
}

/* --- Utility bar, narrow ---------------------------------------------------
   Four items, every one of them nowrap, totalling ~700px. They are shed in the
   order they stop earning their place rather than allowed to wrap or be clipped:

     ≥1280      accreditation · address · hours · telephone · LinkedIn
     1024–1279  accreditation · hours · telephone · LinkedIn  (address dropped)
     640–1023   accreditation · telephone · LinkedIn          (hours dropped)
     <640       telephone · LinkedIn, centred                 (rest dropped)

   Before this was measured the bar wrapped to two rows at 768 and, below 640,
   was silently clipped at BOTH ends by the page's overflow-x: clip. The left
   string lost "EST. 19" and the telephone number lost its last digits, which is
   the one item on the bar that has to be complete. Everything shed here appears
   again in the footer and in the mobile menu. */
@media (max-width: 1023px) {
  .utilbar__item--hide-sm { display: none; }
}
@media (max-width: 639px) {
  .utilbar__in { justify-content: center; gap: var(--s-4); min-height: 36px; }
  .utilbar__list--sec { display: none; }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__main { grid-template-columns: 1fr; gap: var(--s-8); }
  .gal { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: var(--s-2); }
  .vac__item { grid-template-columns: 1fr; align-items: start; }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 auto; min-width: 190px; }
  .form__foot .btn { width: 100%; }
  .choices { grid-template-columns: 1fr; }
  .route-grid { grid-template-columns: 1fr; }

  /* Hero recomposed for the phone rather than merely reflowed */
  .hero { min-height: min(88svh, 720px); }
  .hero__content { max-width: 100%; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.5rem); }
  .hero__lede { font-size: 1.0625rem; }
  .hero__strip-in { grid-template-columns: 1fr 1fr; gap: var(--s-4); padding-block: var(--s-4); }
  .hero__stat b { font-size: 1.25rem; }
  .hero__cue { display: none; }

  .interstitial { min-height: 320px; }
  .interstitial__stmt { font-size: var(--fs-xl); max-width: none; }

  /* Case studies collapse to a stacked card on mobile */
  .case__head { grid-template-columns: 1fr; }
  .case__thumb { aspect-ratio: 16/9; }
  .case__meta { padding: var(--s-5) var(--s-5) 0; }
  .case__toggle { border-left: 0; border-top: 1px solid var(--line-soft); padding: var(--s-4) var(--s-5); justify-content: space-between; }
  .case__toggle::before { content: "Case detail"; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
  .case__body { padding-inline: var(--s-5); }

  /* Spec tables become stacked definition rows rather than a squeezed grid */
  .spec th, .spec td { display: block; width: auto; }
  .spec th { padding-bottom: 2px; border-bottom: 0; }
  .spec td { padding-top: 0; }

  .specrow { grid-template-columns: 1fr; gap: var(--s-1); }
  .qprogress__step span:not(.qprogress__dot) { display: none; }
}

/* 5.31 CLICK-TO-LOAD MAP ---------------------------------------------------
   Sits inside .locations alongside .location, so it must match that card's
   height behaviour. The gate is self-hosted and static; the Google iframe is
   only injected by js/main.js after the visitor presses the button, which is
   what keeps the site's "no third-party requests" position true for anyone who
   does not press it. See map_panel() in _source/content.py.
   -------------------------------------------------------------------------- */
.mapcard {
  position: relative; overflow: hidden; min-height: 340px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  border-top: 3px solid var(--brass); background: var(--navy-deep);
  display: grid;
}
/* The gate stays in normal flow so the card grows to fit its content. An
   absolutely positioned gate against a fixed height clipped the buttons on
   narrow screens, where the note wraps to four lines and the buttons stack. */
.mapcard__gate { position: relative; display: grid; place-items: center; }

/* Suggests a map without pretending to be one. No invented geography. */
.mapcard__grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, transparent 45.6%, rgba(169,117,47,.42) 45.6% 47.2%, transparent 47.2%),
    linear-gradient(72deg,  transparent 62.4%, rgba(169,117,47,.26) 62.4% 63.5%, transparent 63.5%),
    linear-gradient(8deg,   transparent 28.0%, rgba(255,255,255,.10) 28.0% 28.7%, transparent 28.7%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.075) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.075) 0 1px, transparent 1px 40px),
    radial-gradient(120% 90% at 30% 20%, #16466A 0%, var(--navy-deep) 72%);
}
.mapcard__body {
  position: relative; z-index: 1; padding: var(--s-7);
  text-align: center; max-width: 27rem; color: #fff;
}
.mapcard__pin { width: 26px; height: 34px; fill: var(--brass); }
.mapcard__pin circle { fill: var(--navy-deep); }
.mapcard__tag {
  margin-top: var(--s-4); font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--brass);
}
.mapcard__body h3 { margin-top: var(--s-2); color: #fff; font-size: var(--fs-lg); }
.mapcard__note {
  margin-top: var(--s-4); font-size: var(--fs-sm); line-height: 1.65; color: #A9C2D8;
}
.mapcard__acts {
  margin-top: var(--s-5); display: flex; flex-wrap: wrap;
  gap: var(--s-3); justify-content: center;
}
/* .btn--ghost is a light-background button by default; on the dark panel it
   needs the background clearing or the label disappears into white-on-white. */
.mapcard__acts .btn--ghost {
  background: transparent; border-color: rgba(255,255,255,.38); color: #fff;
}
.mapcard__acts .btn--ghost:hover {
  background: rgba(255,255,255,.10); border-color: #fff; color: #fff;
}

/* Loaded state: the iframe replaces the gate in the same box, so nothing on the
   page moves when the visitor presses the button. */
.mapcard--live { background: var(--navy-deep); }
.mapcard--live .mapcard__gate { display: none; }
.mapcard__frame { position: absolute; inset: 0; }
.mapcard__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.mapcard__credit {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: .4rem .75rem; font-size: 11px; line-height: 1.4;
  color: #DCE6EF; background: rgba(8,30,52,.86);
}

@media (max-width: 900px) { .mapcard { min-height: 320px; } }
@media (max-width: 560px) {
  .mapcard { min-height: 300px; }
  .mapcard__body { padding: var(--s-6) var(--s-5); }
  .mapcard__acts { flex-direction: column; }
  .mapcard__acts .btn { width: 100%; }
}

/* A leadership block with no portrait. Julian's holding frame was removed on
   28 Aug 2026: once Mark carried a real photograph, a grey placeholder beside
   him read as unfinished rather than as deliberate. One column, full measure,
   so the block does not sit in half a grid with an empty gap beside it. */
.lead--solo { grid-template-columns: 1fr; }
.lead--solo .lead__body { max-width: var(--measure); }

/* 9. MOTION PREFERENCES / PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .hero__media img, .hero__media video { animation: none !important; }
  [data-motion="on"] .reveal, [data-motion="on"] .reveal-group > * { opacity: 1 !important; transform: none !important; }
}

@media print {
  .utilbar, .site-header, .quotebar, .cta, .footer__cta, .site-footer .footer__main, .drop, .hero__cue { display: none !important; }
  body { color: #000; background: #fff; padding-bottom: 0; }
  .hero__media, .phero__media, .interstitial__media { display: none; }
  .hero, .phero, .interstitial { background: #fff; color: #000; min-height: 0; }
  .hero h1, .phero h1, .hero__lede, .phero__lede, .interstitial__stmt { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
  .sec { padding-block: 1.5rem; }
  .case__body { display: block !important; }
}