/* ════════════════════════════════════════════════════════════
   GP CONSULT SA — MEEKAS COLOUR + FONT SKIN (override layer)
   Content, structure and videos unchanged. Applies the Meekas
   website's EXACT palette and fonts over GP's existing classes.
   ════════════════════════════════════════════════════════════ */
:root{
  /* ── Meekas EXACT tokens ── */
  --mk-head:"Georgia","Times New Roman",serif;
  --mk-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mk-blue:#16365c; --mk-blue-2:#1e4575; --mk-blue-3:#0f263f;
  --mk-accent:#0a7bc4; --mk-accent-2:#0e8fd6;
  --mk-ink:#1a2733; --mk-text:#33414e; --mk-text-dim:#5d6b78;
  --mk-line:#e2e7ec; --mk-grey:#f4f6f8; --mk-grey-2:#eef1f4; --mk-white:#ffffff;
  --mk-maxw:1280px;
  /* Remap GP's own variables to Meekas values */
  --navy:#16365c; --navy2:#1e4575; --navy3:#0a7bc4;
  --gold:#0a7bc4; --gold2:#0e8fd6; --gold3:#7fc4ea;
  --cream:#f4f6f8; --cream2:#eef1f4;
  --slate:#3A5070; --silver:#aab8c6; --white:#ffffff;
  --text:#33414e; --subtle:#5d6b78;
}
body{background:var(--mk-white);color:var(--mk-text);font-family:var(--mk-body)}
h1,h2,h3,h4,h5{font-family:var(--mk-head)}
.wrap{max-width:var(--mk-maxw)}

/* HEADER */
.nav{position:sticky;top:0;z-index:200;background:#fff;backdrop-filter:none;border-bottom:1px solid var(--mk-line);box-shadow:0 2px 14px rgba(22,54,92,.05)}
.nav-inner{padding:0 32px;height:78px;max-width:var(--mk-maxw);margin:0 auto}
.nav-logo .main{font-family:var(--mk-head);color:var(--mk-blue);font-weight:800;font-size:24px;letter-spacing:.02em}
.nav-logo .sub{color:var(--mk-text-dim);font-size:9px;letter-spacing:.22em}
.nav-links a{font-family:var(--mk-body);color:var(--mk-ink);font-size:13px;letter-spacing:.04em;text-transform:none;font-weight:600;padding:6px 0}
.nav-links a:hover,.nav-links a.active{color:var(--mk-accent)}
.nav-links a.active::after{background:var(--mk-accent);height:3px;bottom:-3px}
.nav-cta{border:2px solid var(--mk-accent);color:#fff!important;background:var(--mk-accent);font-family:var(--mk-body);font-weight:600;text-transform:none;letter-spacing:.02em;font-size:13px;padding:9px 20px;clip-path:none;border-radius:3px}
.nav-cta:hover{background:var(--mk-accent-2);border-color:var(--mk-accent-2);color:#fff!important}
.menu-toggle{color:var(--mk-blue)}
@media(max-width:900px){.nav-inner{padding:0 22px;height:64px}.nav-links{background:#fff;border-bottom:1px solid var(--mk-line);box-shadow:0 12px 30px rgba(0,0,0,.08);padding:14px 22px;gap:14px}.nav-links a{color:var(--mk-ink)}}

/* SECTIONS */
section{padding:84px 32px}
section.cream,section.cream2,section.cream-grad,section.cream-warm,section.dot-cream{background:var(--mk-grey)!important;background-image:none!important;color:var(--mk-text)}
section.dark,section.navy2,section.navy-grad,section.navy-radial,section.dot-navy,section.line-navy{background:var(--mk-blue)!important;background-image:none!important;color:#fff}
.section-label{font-family:var(--mk-body);font-weight:700;color:var(--mk-accent);font-size:.8rem;letter-spacing:.14em}
.section-label::before{background:var(--mk-accent);width:22px}
.section-title{font-family:var(--mk-head);font-weight:700;color:var(--mk-blue);letter-spacing:-.01em}
section.dark .section-title,section.navy2 .section-title{color:#fff}
.section-title em{color:var(--mk-accent);font-style:italic}
.section-body{color:var(--mk-text-dim)}
section.dark .section-body,section.navy2 .section-body{color:#cfe0ee}
.gold-rule{background:linear-gradient(90deg,var(--mk-accent),rgba(10,123,196,0))}

/* BUTTONS */
.btn{font-family:var(--mk-body);font-weight:600;letter-spacing:.02em;text-transform:none;font-size:.95rem;padding:.9rem 1.7rem;border-radius:3px;clip-path:none;border:2px solid transparent}
.btn-gold{background:var(--mk-accent);color:#fff;border-color:var(--mk-accent)}
.btn-gold:hover{background:var(--mk-accent-2);border-color:var(--mk-accent-2);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:#fff;color:var(--mk-blue);border-color:#fff}

/* HERO */
.hero{background:var(--mk-blue)}
.hero-grid,.hero-glow,.hero-glow2{filter:saturate(.7) hue-rotate(-12deg)}
.hero-eyebrow{font-family:var(--mk-body);font-weight:700;color:#7fc4ea;letter-spacing:.16em}
.hero-title{font-family:var(--mk-head);color:#fff}
.hero-title strong{color:var(--mk-accent-2)}
.hero-subtitle{font-family:var(--mk-head);color:#cfe0ee}
.hero-figure img{border-color:rgba(10,123,196,.35)}
.pill{font-family:var(--mk-body);color:#7fc4ea;border-color:rgba(10,123,196,.5);text-transform:none;letter-spacing:.04em;font-size:11px;border-radius:3px;clip-path:none;font-weight:600}

/* ROUTE CARDS */
.routes{background:transparent;border:0;gap:24px;grid-template-columns:repeat(3,1fr)}
.route{background:#fff;border:1px solid var(--mk-line);padding:0;overflow:hidden;transition:.25s;border-top:6px solid var(--mk-accent)}
.route::after{display:none}
.route:hover{background:#fff;transform:translateY(-4px);box-shadow:0 16px 40px rgba(22,54,92,.12)}
.route>*{padding-left:28px;padding-right:28px}
.route-num{font-family:var(--mk-head);color:var(--mk-accent);font-size:1.5rem;font-weight:700;letter-spacing:0;margin:26px 0 4px}
.route-icon{margin-bottom:8px}
.route-kicker{font-family:var(--mk-body);color:var(--mk-accent);font-weight:700;letter-spacing:.1em;font-size:.72rem}
.route-title{font-family:var(--mk-head);color:var(--mk-blue);font-weight:700}
.route-title em{color:var(--mk-accent)}
.route-desc{color:var(--mk-text-dim)}
.route-feats span{color:var(--mk-text)}
.route-feats span::before{color:var(--mk-accent)}
.route-go{font-family:var(--mk-body);color:var(--mk-accent);font-weight:700;letter-spacing:.04em;text-transform:none;padding-bottom:28px}
@media(max-width:1100px){.routes{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.routes{grid-template-columns:1fr}}

/* MANIFESTO over Meekas photo */
.manifesto{background-image:linear-gradient(90deg,rgba(15,38,63,.94),rgba(15,38,63,.7)),url('images/projects/civil-foundation-rebar.jpg')!important;background-size:cover;background-position:center;padding:84px 32px}
.manifesto-tagline{font-family:var(--mk-body);color:#7fc4ea;font-weight:700;letter-spacing:.2em}
.manifesto-heading{font-family:var(--mk-head)}
.manifesto-heading span{color:var(--mk-accent-2)}
.manifesto-sub{color:#7fc4ea;font-family:var(--mk-body);font-weight:700}
.manifesto-text{color:#cfe0ee}
.manifesto-block{border-color:rgba(255,255,255,.1)}

/* VIDEO + FEATURE (videos kept) */
.video-player,.feature-img img{border-color:rgba(10,123,196,.35)}

/* ABOUT */
.about-quote{font-family:var(--mk-head);color:var(--mk-blue);border-left-color:var(--mk-accent);background:#fff}
.about-para{color:var(--mk-text-dim)}
.value-card{background:#fff;border:1px solid var(--mk-line);border-bottom:3px solid var(--mk-accent);transition:.25s}
.value-card:hover{transform:translateY(-4px);box-shadow:0 12px 34px rgba(22,54,92,.1)}
.value-name{font-family:var(--mk-body);color:var(--mk-blue)}
.value-desc{color:var(--mk-text-dim)}

/* INNER-PAGE CARDS */
.service-card,.doc-card,.bigval,.gate,.route,.pillar{transition:.25s}
.service-card:hover,.doc-card:hover,.bigval:hover{transform:translateY(-3px)}
.service-name,.gate-name,.bigval h4,.doc-card h4{font-family:var(--mk-head)}
.team-card{border-top:4px solid var(--mk-accent)}
.team-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(22,54,92,.1)}
.team-role{font-family:var(--mk-head);color:var(--mk-blue)}
.dep-card{border-top:4px solid var(--mk-accent)}
.dep-card h4{font-family:var(--mk-head);color:var(--mk-blue)}
.step-num{border-color:var(--mk-accent);color:var(--mk-accent);font-family:var(--mk-head);background:var(--mk-grey)}
section.dark .step-num,section.navy2 .step-num{background:var(--mk-blue)}
.process-steps::before{background:linear-gradient(90deg,var(--mk-accent),rgba(10,123,196,.2))}
.commit-title strong,.commitment .commit-title strong{color:var(--mk-accent)}
.commit-quote{color:#7fc4ea}
.gate-key{background:var(--mk-accent);color:#fff}
.gate-n{color:var(--mk-accent)}
.std-code{color:var(--mk-accent)}
.tag{color:#7fc4ea;border-color:rgba(10,123,196,.3)}

/* COMMITMENT band */
.commitment{background:linear-gradient(90deg,var(--mk-blue-3),var(--mk-blue))!important}
.commitment::before{background-image:radial-gradient(ellipse at center,rgba(10,123,196,.1) 0%,transparent 65%)}

/* CONTACT */
.contact-section{background:var(--mk-blue)}
.contact-cta-title{font-family:var(--mk-head)}
.contact-cta-title em{color:var(--mk-accent)}
.contact-item-label{color:#7fc4ea}
.form label{color:#7fc4ea}
.form input,.form textarea,.form select{border-color:rgba(10,123,196,.3)}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--mk-accent)}
.form select option{background:var(--mk-blue-2)}

/* FOOTER */
.footer{background:var(--mk-blue-3);border-top:1px solid rgba(10,123,196,.25);padding:30px 32px}
.footer-logo{font-family:var(--mk-head);color:var(--mk-accent-2)}
.footer-links a{font-family:var(--mk-body);text-transform:none;letter-spacing:.03em;font-size:12px;color:#9fb1c2}
.footer-links a:hover{color:var(--mk-accent-2)}
.footer-meta{font-family:var(--mk-body);color:#7c8fa1;letter-spacing:.04em}

@media(max-width:1000px){section{padding:64px 24px}}
@media(max-width:620px){section{padding:52px 18px}}

/* ════════════════════════════════════════════════════════════
   VIDEO WATERMARKS + SVG ICONS
   ════════════════════════════════════════════════════════════ */

/* ---- Hero: full-bleed muted looping video, photo poster fallback ---- */
.hero{position:relative;overflow:hidden;height:clamp(560px,82vh,760px)}
.hero>.hero-bgvid{height:100%}
.hero>.hero-inner{position:absolute!important;top:50%!important;left:0;right:0;transform:translateY(-50%);padding-top:0!important;padding-bottom:0!important}
.hero-bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(15,38,63,.92) 0%,rgba(15,38,63,.80) 42%,rgba(15,38,63,.55) 100%)}
.hero .hero-grid,.hero .hero-glow,.hero .hero-glow2{z-index:1}
.hero .hero-inner{position:relative;z-index:2;width:100%}
@media (prefers-reduced-motion: reduce){.hero-bgvid{display:none}}

/* ---- Section watermark: faint muted video behind every section ---- */
section,.manifesto,.platform-shell{position:relative;overflow:hidden}
.sec-wm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none;opacity:.06;filter:grayscale(.2)}
/* On dark sections the watermark reads a touch brighter */
section.dark .sec-wm,section.navy2 .sec-wm,.manifesto .sec-wm,.contact-section .sec-wm{opacity:.10}
/* Keep all real content above the watermark */
section>*:not(.sec-wm),.manifesto>*:not(.sec-wm){position:relative;z-index:1}
.manifesto .sec-wm{opacity:.05}
@media (prefers-reduced-motion: reduce){.sec-wm{display:none}}

/* ---- SVG icons: size + colour to match each block ---- */
.route-icon svg{width:30px;height:30px;color:var(--mk-accent);stroke-width:1.7}
.value-icon svg{width:26px;height:26px;color:var(--mk-accent)}
.pillar-icon svg{width:34px;height:34px;color:#7fc4ea}
.service-icon svg{width:30px;height:30px;color:#7fc4ea}
.contact-item-icon svg{width:22px;height:22px;color:var(--mk-accent-2)}
.dep-icon svg,.std-icon svg{width:26px;height:26px;color:var(--mk-accent)}
/* generic fallback */
[class*="icon"] svg{display:block}

/* ---- Hero with full-bleed video: drop the inner figure, single-column copy ---- */
.hero .hero-inner,
.hero .hero-inner.split{display:block!important;grid-template-columns:none!important;
  max-width:var(--mk-maxw);margin:0 auto;padding:96px 32px;width:100%}
.hero .hero-figure{display:none!important}
.hero .hero-copy{max-width:42rem;margin:0}
.hero .hero-title{font-size:clamp(2.6rem,6vw,4.4rem)!important}

/* ════════════════════════════════════════════════════════════
   GP CONSULT LOGO IMAGE (nav + footer)
   ════════════════════════════════════════════════════════════ */
.nav-logo{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.nav-logo .brand-img{height:56px;width:auto;max-width:340px;display:block}
.nav-logo .sub{font-family:var(--mk-body);font-size:9px;letter-spacing:.22em;color:var(--mk-text-dim);text-transform:uppercase;padding-left:2px}
@media(max-width:900px){.nav-logo .brand-img{height:44px;max-width:280px}}
@media(max-width:620px){.nav-logo .brand-img{height:38px;max-width:230px}}

/* Footer logo: white variant already coloured for the dark footer */
.footer-logo .footer-img{height:34px;width:auto;max-width:220px;display:block}
@media(max-width:620px){.footer-logo .footer-img{margin:0 auto}}

/* ════════════════════════════════════════════════════════════
   PARTNER FOOTAGE — inline feature clips (muted, looping)
   Match the styling of the .feature-img / .video-player slots.
   ════════════════════════════════════════════════════════════ */
.feat-clip{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;
  border:1px solid rgba(10,123,196,.35);box-shadow:0 30px 70px -28px rgba(0,0,0,.6);
  background:#000;object-fit:cover}
.feature-img .feat-clip{max-width:420px}
@media (prefers-reduced-motion: reduce){.feat-clip{display:none}}
@media (prefers-reduced-motion: reduce){.feature-img::after{content:"";display:block}}

/* ════════════════════════════════════════════════════════════
   WCAG AA CONTRAST FIXES (appended override — wins the cascade)
   Brightens dim text/labels on dark navy + photo-video sections
   so body copy and kickers meet 4.5:1 (small) / 3:1 (large).
   ════════════════════════════════════════════════════════════ */

/* All dark section variants — brighten body copy to >=4.5:1 on navy */
section.dark .section-body,
section.navy2 .section-body,
section.navy-grad .section-body,
section.navy-radial .section-body,
section.dot-navy .section-body,
section.line-navy .section-body{color:#d4e2f0}

/* Accent kickers / labels on dark backgrounds: #0a7bc4 (2.7:1) -> #7fc4ea (6.4:1) */
section.dark .section-label,
section.navy2 .section-label,
section.navy-grad .section-label,
section.navy-radial .section-label,
section.dot-navy .section-label,
section.line-navy .section-label,
.manifesto .section-label{color:#7fc4ea}
section.dark .section-label::before,
section.navy2 .section-label::before,
section.navy-grad .section-label::before,
section.navy-radial .section-label::before,
section.dot-navy .section-label::before,
section.line-navy .section-label::before{background:#7fc4ea}

/* Accent label on light/cream sections: #0a7bc4 (4.17:1) -> #0a6ca8 (5.2:1) */
section.cream .section-label,
section.cream2 .section-label,
section.cream-grad .section-label,
section.cream-warm .section-label,
section.dot-cream .section-label{color:#0a6ca8}
section.cream .section-label::before,
section.cream2 .section-label::before,
section.cream-grad .section-label::before,
section.cream-warm .section-label::before,
section.dot-cream .section-label::before{background:#0a6ca8}

/* Small uppercase accent kickers across cards on navy -> brighter blue */
.bigval-kick,.dep-kick,.dep-card .dep-kick,.pillar-title,
.team-reports,.pm-card .pm-kicker,.pm-kicker{color:#7fc4ea!important}
.pm-card .pm-kicker::before{background:#7fc4ea}

/* Standard/spec codes on dark cards (3.66:1) -> brighter */
.std-code{color:#7fc4ea!important}

/* Manifesto band: strengthen overlay so text is unambiguous, brighten copy */
.manifesto{background-image:linear-gradient(90deg,rgba(11,24,42,.96),rgba(11,24,42,.82)),url('images/projects/civil-foundation-rebar.jpg')!important}
.manifesto-text{color:#e6eef7!important}
.manifesto-sub,.manifesto-tagline{color:#9bd2f0!important}
.commit-quote{color:#bfe0f5!important}

/* Sound-On / video label pill: ensure label text on accent button is readable */
.lbl{color:#ffffff!important}

/* Make the per-section watermark video a touch fainter on dark + add a
   subtle dark scrim so any text over video keeps contrast on all sections */
section.dark .sec-wm,section.navy2 .sec-wm,section.navy-grad .sec-wm,
section.navy-radial .sec-wm,section.dot-navy .sec-wm,section.line-navy .sec-wm,
.manifesto .sec-wm,.contact-section .sec-wm{opacity:.08}

/* Contact section + any remaining dark containers: accent label brightening */
.contact-section .section-label,
section[id="contact"] .section-label{color:#7fc4ea}
.contact-section .section-label::before,
section[id="contact"] .section-label::before{background:#7fc4ea}
.contact-section .section-body,
section[id="contact"] .section-body{color:#d4e2f0}

/* Beat inline color:var(--gold) on the Contact Us label (dark contact section) */
.contact-section .section-label[style],
section[id="contact"] .section-label[style]{color:#7fc4ea!important}

/* Commitment eyebrow on dark commitment band */
.commit-eyebrow{color:#7fc4ea!important}

/* dep-kick safety: if any dep card sits on a light surface, keep accent dark enough.
   The dark cards get bright blue; ensure default (non-dark) uses readable dark accent. */
.dep-card .dep-kick{color:#7fc4ea!important}

/* dep-kick context fix: white cards need DARK accent, navy cards need LIGHT accent.
   Default (white dep-card) -> readable dark blue; inline navy cards handled next. */
.dep-card .dep-kick{color:#0a6ca8!important}
/* dep-cards explicitly given a navy/dark inline background -> light accent */
.dep-card[style*="navy"] .dep-kick{color:#7fc4ea!important}

/* ════════════════════════════════════════════════════════════
   PHASE 6 — LOGO ENHANCEMENT
   Sizing handled by the .nav-logo .brand-img rules above (enlarged).
   ════════════════════════════════════════════════════════════ */
.nav-logo{align-items:center}

/* ════════════════════════════════════════════════════════════
   FIX: index hero pills wrapping/cut-off
   The narrow copy column orphaned the 4th pill on its own row and
   clipped it near the hero edge. Allow the pill row to use full
   width, wrap evenly, and add breathing room below.
   ════════════════════════════════════════════════════════════ */
.hero-pills{gap:10px 12px;margin-top:36px;margin-bottom:8px}
.hero-pills .pill{font-size:10.5px;padding:8px 16px;white-space:nowrap}
@media(min-width:1001px){
  /* let pills span beyond the copy column so all four fit on one row */
  .hero-inner.split .hero-copy{position:relative}
  .hero-inner.split .hero-pills{width:max-content;max-width:760px}
}
@media(max-width:1000px){
  .hero-pills{margin-bottom:4px}
}

/* ════════════════════════════════════════════════════════════
   FIX: comparison table (.cmp) unreadable on light sections
   The table's cream rules only targeted section.cream, but the
   table lives in section.cream-grad — so dark-context colours
   (white / silver / light-blue) were rendering on a LIGHT grey
   background (≈1.1–1.9:1). Force dark, readable cell colours on
   every light section variant.
   ════════════════════════════════════════════════════════════ */
section.cream .cmp thead th,
section.cream-grad .cmp thead th,
section.cream-warm .cmp thead th,
section.dot-cream .cmp thead th{color:#fff;background:#16365c}
section.cream .cmp tbody td,
section.cream-grad .cmp tbody td,
section.cream-warm .cmp tbody td,
section.dot-cream .cmp tbody td{color:#33414e}
section.cream .cmp tbody td:first-child,
section.cream-grad .cmp tbody td:first-child,
section.cream-warm .cmp tbody td:first-child,
section.dot-cream .cmp tbody td:first-child{color:#16365c;font-weight:700}
section.cream .cmp tbody td.gpc,
section.cream-grad .cmp tbody td.gpc,
section.cream-warm .cmp tbody td.gpc,
section.dot-cream .cmp tbody td.gpc{color:#0a6ca8;font-weight:700}
section.cream .cmp,
section.cream-grad .cmp,
section.cream-warm .cmp,
section.dot-cream .cmp{border-color:rgba(22,54,92,.18)}
section.cream .cmp th,section.cream .cmp td,
section.cream-grad .cmp th,section.cream-grad .cmp td,
section.cream-warm .cmp th,section.cream-warm .cmp td,
section.dot-cream .cmp th,section.dot-cream .cmp td{border-bottom:1px solid rgba(22,54,92,.10)}

/* ════════════════════════════════════════════════════════════
   FIX: section titles invisible on dark variant backgrounds
   The white-title rule only covered .dark/.navy2, so titles on
   .dot-navy / .navy-grad / .navy-radial / .line-navy rendered
   dark-navy-on-dark-navy (0 contrast). Force white on ALL dark
   variants; brighten the italic <em> accent for readability.
   ════════════════════════════════════════════════════════════ */
section.dark .section-title,
section.navy2 .section-title,
section.navy-grad .section-title,
section.navy-radial .section-title,
section.dot-navy .section-title,
section.line-navy .section-title,
.contact-section .section-title{color:#fff}
section.dark .section-title em,
section.navy2 .section-title em,
section.navy-grad .section-title em,
section.navy-radial .section-title em,
section.dot-navy .section-title em,
section.line-navy .section-title em,
.contact-section .section-title em{color:#7fc4ea}

/* ════════════════════════════════════════════════════════════
   FIX: MindMaster CTA on index — render as a WHITE block to
   match the white process cards above it (instead of solid blue).
   ════════════════════════════════════════════════════════════ */
.btn-mm-white{
  background:#fff;
  color:#16365c;
  border:1px solid rgba(22,54,92,.15);
  border-top:3px solid var(--mk-accent);
  border-radius:3px;
  font-weight:700;
  box-shadow:0 1px 5px rgba(13,27,53,.07);
  padding:1rem 1.8rem;
  transition:all .2s;
}
.btn-mm-white:hover{
  background:#fff;
  color:var(--mk-accent);
  box-shadow:0 6px 20px rgba(13,27,53,.12);
  transform:translateY(-2px);
  border-color:rgba(22,54,92,.15);
  border-top-color:var(--mk-accent);
}

/* ════════════════════════════════════════════════════════════
   Contingency Recruitment — A/B/C + MindMaster as 4 equal cards
   ════════════════════════════════════════════════════════════ */
.routes-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.routes-4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.routes-4{grid-template-columns:1fr}}
.route-mm .route-num{color:var(--mk-accent)}
@media(max-width:900px){
  .recruit-top{grid-template-columns:1fr;gap:24px}
}

/* ════════════════════════════════════════════════════════════
   PSYCHOMETRICS — let the looping background video show through
   on the light sections (about / why) while keeping text legible.
   Translucent white veil instead of an opaque grey fill, with a
   brighter video underneath. Text sits above and stays dark.
   ════════════════════════════════════════════════════════════ */
/* Matched to the .vbg treatment below — same white background, same faint
   texture, so the two video-veil patterns stay consistent site-wide. */
section.psy-vbg{background:#ffffff!important;background-image:none!important}
section.psy-vbg .sec-wm{opacity:.10;filter:grayscale(.35)}
/* Readability guard: text colours stay dark and strong on the veil */
section.psy-vbg .section-title{color:#0f2236}
section.psy-vbg .section-body,
section.psy-vbg .feature-text,
section.psy-vbg p{color:#28333f}
section.psy-vbg .section-label{color:#0a5c93}
section.psy-vbg .feature-title{color:#0f2236}
/* Feature cells on the veil: subtle translucent card so video peeks through but text holds */
section.psy-vbg .feature-cell{background:rgba(255,255,255,.62)}
section.psy-vbg .feature-cell:hover{background:rgba(255,255,255,.74)}


/* ════════════════════════════════════════════════════════════
   GENERIC video-background veil (.vbg) — reusable on any page.
   A white background with the looping section video kept as a faint
   texture behind it, so body copy stays readable.

   The video is a child of the section (.sec-wm, inset:0), so it paints
   OVER the section's background and UNDER the content. That means the
   video's own opacity — not the veil's alpha — is what actually decides
   legibility. At the previous .32 the footage read straight through the
   paragraphs; the veil was doing almost nothing because the page behind
   is white anyway. Background is now solid white and the texture is dialled
   back to a hint.
   ════════════════════════════════════════════════════════════ */
section.vbg{background:#ffffff!important;background-image:none!important}
section.vbg .sec-wm{opacity:.10;filter:grayscale(.35)}
section.vbg .section-title{color:#0f2236}
section.vbg .section-body,
section.vbg .feature-text,
section.vbg p{color:#28333f}
section.vbg .section-label{color:#0a5c93}
section.vbg .feature-title{color:#0f2236}
/* white-ish cards on the veil keep their own readable fill but let video peek at edges */
section.vbg .value-card,
section.vbg .dep-card,
section.vbg .feature-cell{background:rgba(255,255,255,.82)}
/* comparison table on veil: keep solid enough to read */
section.vbg .cmp tbody td{background:transparent}
section.vbg .cmp tbody tr{background:rgba(255,255,255,.5)}

/* vbg readability: timeline steps + numbered circles must hold over the video */
section.vbg .step-name{color:#1a2a3d;font-weight:600}
section.vbg .step-num{background:#ffffff;color:var(--mk-accent);border-color:var(--mk-accent)}
/* numbered "process-steps" connecting line stays visible */
section.vbg .process-steps::before{opacity:.9}
/* gold-rule / dividers on veil */
section.vbg .gold-rule{opacity:.9}

/* ═══════════════════════════════════════════════════════════════
   POST-RECRUITMENT FIXES (2026-06-30)
   1) Nav: links never wrap, real logo↔links gap, tighter sizing;
      hamburger ≤1180px (one-line bar only shows when it truly fits).
   2) Hero: grows to fit content so pills/CTAs never clip, while the
      bg video stays absolutely positioned and full-cover.
   ═══════════════════════════════════════════════════════════════ */
/* (1) NAV ----------------------------------------------------- */
.nav-inner{gap:24px}
.nav-links{gap:20px;flex-wrap:nowrap}
.nav-links a{white-space:nowrap;font-size:12.5px}
.nav-logo .brand-img{height:44px;max-width:240px}
/* Below 1180px the wordmark + 6 links + CTA can't fit one row → hamburger */
@media(max-width:1180px){
  .menu-toggle{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:14px;background:#fff;border-bottom:1px solid var(--mk-line);
    box-shadow:0 12px 30px rgba(0,0,0,.08);padding:16px 22px}
  .nav-links.open{display:flex}
  .nav-links a{color:var(--mk-ink);white-space:normal;font-size:13px}
}

/* (2) HERO grows to fit content (no clipping). No flex on .hero so the
   absolutely-positioned bg video/overlays are NOT turned into flex items. */
.hero{height:auto!important;min-height:clamp(560px,82vh,760px);overflow:hidden}
.hero .hero-bgvid{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover;z-index:0}
/* decorative layers must stay out of flow, else they stack and inflate the hero */
.hero .hero-grid,.hero .hero-glow,.hero .hero-glow2{position:absolute!important}
.hero>.hero-inner{position:relative!important;top:auto!important;transform:none!important;
  padding-top:clamp(104px,13vh,150px)!important;padding-bottom:clamp(72px,9vh,110px)!important;width:100%}

/* ════════════════════════════════════════════════════════════
   PUNCH-LIST FIXES (2026-07-16)
   Appended last so these win over every page's inline <style>
   and the skin rules above.
     (2) dropdown legibility   (3)+(7) text-over-video readability
     (4) inert (non-link) card hovers   (5) industries light panel
   ════════════════════════════════════════════════════════════ */

/* (2) DROPDOWNS — one consistent, readable scheme on EVERY <select>.
   The list background was set to blue-2 but the option text kept the
   dark body colour, so every unselected option rendered dark-on-dark
   (a grey smear you could not read). Force light text; give the
   selected/hovered option the accent so the whole menu is one colour
   family and clearly legible. */
.form select option{background:#fff;color:var(--mk-ink)}
.form select option:checked,
.form select option:hover{background:var(--mk-accent);color:#fff}

/* (4) INERT CARDS — content blocks that do NOT navigate must not
   change colour or reveal an underline on hover, or the user reads
   them as links. Only genuinely clickable cards keep an affordance:
   .route is an <a>, .ind-cell opens a sector modal. Hover background
   is pinned back to each card's own resting colour. */
.pillar:hover{background:var(--mk-blue)}
.gate:hover,.bigval:hover,.service-card:hover,.doc-card:hover{background:var(--mk-blue-2)}
.pillar:hover::after,
.service-card:hover::before,
.doc-card:hover::before{transform:scaleX(0)}

/* (3)+(7) READABILITY OVER VIDEO — the closing italic pull-quote is
   brightened to near-white, and titles/body copy that sit over the
   faint section watermark get a subtle dark scrim via text-shadow so
   they stay legible on any frame of the looping video behind them. */
.commit-quote{color:#eaf3fb!important;text-shadow:0 1px 6px rgba(6,15,30,.55)}
section.dark .section-title,section.navy2 .section-title,
section.navy-grad .section-title,section.navy-radial .section-title,
section.dot-navy .section-title,section.line-navy .section-title,
section.dark .section-body,section.navy2 .section-body,
section.navy-grad .section-body,section.navy-radial .section-body,
section.dot-navy .section-body,section.line-navy .section-body{
  text-shadow:0 1px 4px rgba(6,15,30,.5)}

/* (5) INDUSTRIES — light panel with black icons, matching the other
   light blocks. Scoped to the .ind-light section only, with
   !important because the markup carries inline color:#fff on its
   title/heading that would otherwise render white-on-white. */
section.ind-light{background:#fff!important;background-image:none!important;color:var(--mk-text)}
section.ind-light .sec-wm{display:none!important}
section.ind-light .section-title{color:var(--mk-blue)!important;text-shadow:none!important}
section.ind-light .section-title em,
section.ind-light h3 em{color:var(--mk-accent)!important}
section.ind-light .section-body{color:var(--mk-text-dim)!important;text-shadow:none!important}
section.ind-light .section-label{color:#0a6ca8!important}
section.ind-light .section-label::before{background:#0a6ca8!important}
section.ind-light h3{color:var(--mk-blue)!important}
section.ind-light .ind-grid{background:var(--mk-line)!important;border-color:var(--mk-line)!important}
section.ind-light .ind-cell{background:#fff!important}
section.ind-light .ind-cell:hover{background:var(--mk-grey)!important}
section.ind-light .ind-ico,
section.ind-light .ind-cell:hover .ind-ico{color:#1a2733!important}
section.ind-light .ind-name{color:var(--mk-ink)!important}
section.ind-light .client-chip{background:#fff!important;color:var(--mk-text)!important;border-color:var(--mk-line)!important}
section.ind-light .client-chip:hover{border-color:var(--mk-accent)!important;color:var(--mk-accent)!important}

/* ════════════════════════════════════════════════════════════
   PUNCH-LIST v2 (2026-07-17) — legibility pass + logo motion.
   Appended last so it wins over page inline styles and the rules
   above. Covers the batch of screenshots flagged for readability.
   ════════════════════════════════════════════════════════════ */

/* Hero jump-nav pills → WHITE text on every page. They were light-blue
   (#7fc4ea) over the dark hero video and read as barely-there. Filled
   "key" pills (For Candidates / Vacancies) also go white-on-accent. */
.pill{color:#fff!important;border-color:rgba(255,255,255,.55)!important}
a.pill:hover,a.pill:focus-visible{color:#fff!important;background:var(--mk-accent)!important;border-color:var(--mk-accent)!important}
a.pill.pill-key,a.pill.pill-key:hover,a.pill.pill-key:focus-visible{color:#fff!important;background:var(--mk-accent)!important;border-color:var(--mk-accent)!important}

/* Body copy on LIGHT sections → darker, so it stops washing out over the
   faint background video (bad-hire intro, "if you are good at what you do",
   bridge note). On DARK sections a more specific skin rule keeps it light. */
.section-body,.about-para{color:#28333f}
section.vbg .section-body,section.psy-vbg .section-body,
section.vbg .about-para,section.psy-vbg .about-para,
section.vbg p,section.psy-vbg p{color:#28333f}
.bridge-note{color:#22303e!important}

/* Dim copy on DARK cards → brighter (Appraisal Criteria / Underperformance,
   What We Monitor / How We Respond, Mission & Vision). Much of it carries an
   inline color:var(--silver); beat it wherever it sits on a dark section. */
section.dark [style*="var(--silver)"],section.navy2 [style*="var(--silver)"],
section.navy-grad [style*="var(--silver)"],section.navy-radial [style*="var(--silver)"],
section.dot-navy [style*="var(--silver)"],section.line-navy [style*="var(--silver)"]{color:#e3edf7!important}
/* Card list text: WHITE dep-cards (the default) get dark, readable text; only
   dep-cards with an explicit navy fill get light text. Splitting these was the
   fix for near-invisible light-on-white list items on the engagement steps. */
.dep-card li{color:#2a3744}
.dep-card[style*="navy"] li{color:#e3edf7}

/* Gate list (Recruitment & Selection) → white cards, black text, per request. */
.gate-list{background:var(--mk-line)!important;border-color:var(--mk-line)!important}
.gate,.gate:hover{background:#fff!important}
.gate-n{color:var(--mk-blue)!important;border-right-color:var(--mk-line)!important}
.gate-name{color:var(--mk-ink)!important}
.gate-desc{color:var(--mk-text)!important}

/* Standards grid (EC&I) → stand out: lighter cell, accent top rule, brighter text. */
.std-cell{background:#12315a!important;border-top:3px solid var(--mk-accent)}
.std-code{color:#9bd2f0!important}
.std-desc{color:#cddbea!important}

/* Projects "Our Services" cards → brighter surface + copy, and a touch more compact. */
.service-card,.service-card:hover{background:#254f83!important;padding:28px 24px!important}
.service-name{color:#fff!important}
.service-desc{color:#dbe7f3!important}
.service-num{color:#8fc7ec!important}
.services-grid .tag{color:#cfe3f4!important;border-color:rgba(255,255,255,.28)!important}

/* Text over background video: dial the watermark fainter on dark sections and
   keep the scrim, so white copy (e.g. the Projects "what sets us apart" row)
   reads cleanly. */
section.dark .sec-wm,section.navy2 .sec-wm,section.navy-grad .sec-wm,
section.navy-radial .sec-wm,section.dot-navy .sec-wm,section.line-navy .sec-wm,
.manifesto .sec-wm,.contact-section .sec-wm{opacity:.05!important}

/* Nav logo: a subtle, slow "breath" so the eye keeps returning to the brand
   without it being distracting. Disabled for reduced-motion users. */
/* Logo motion: mostly still, then every ~9s it slides once to the side and
   glides back to its place — a periodic nudge rather than a constant pulse. */
@keyframes gpLogoSlide{0%,64%,100%{transform:translateX(0)}78%{transform:translateX(18px)}86%{transform:translateX(18px)}}
.nav-logo .brand-img{animation:gpLogoSlide 9s ease-in-out infinite;transform-origin:left center;will-change:transform}
@media(prefers-reduced-motion:reduce){.nav-logo .brand-img{animation:none}}

/* Industry icons: a uniform round badge behind each hand-drawn glyph so the set
   reads as one polished system instead of loose sketches. */
section.ind-light .ind-ico{width:60px;height:60px;border-radius:50%;background:var(--mk-grey);
  display:flex!important;align-items:center;justify-content:center;margin:0 auto 12px;transition:background .25s}
section.ind-light .ind-ico svg{width:30px;height:30px}
section.ind-light .ind-cell:hover .ind-ico{background:#e4ebf2}

/* Industries as a continuous auto-scrolling strip (labour-broking). The cells are
   cloned once by a small script for a seamless loop; hover pauses it. */
section.ind-strip .wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
section.ind-strip .ind-grid{display:flex!important;flex-wrap:nowrap!important;width:max-content;gap:0!important;border:0!important;background:transparent!important;
  animation:indScroll 48s linear infinite}
section.ind-strip .ind-grid:hover{animation-play-state:paused}
section.ind-strip .ind-cell{flex:0 0 auto;width:158px;background:#fff!important;border-right:1px solid var(--mk-line)}
section.ind-strip .ind-cell::after{display:none}
@keyframes indScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  section.ind-strip .wrap{-webkit-mask-image:none;mask-image:none}
  section.ind-strip .ind-grid{animation:none;flex-wrap:wrap!important;width:auto}
}

/* Colour, on BOTH running strips. Industry icon badges rotate through the brand
   palette (blue / teal / amber / indigo) instead of flat grey; client chips pick
   up alternating blue and amber tints. */
section.ind-light .ind-cell:nth-child(4n+1) .ind-ico{color:#0a7bc4!important;background:#e4f0fc!important}
section.ind-light .ind-cell:nth-child(4n+2) .ind-ico{color:#12a08f!important;background:#e0f5f1!important}
section.ind-light .ind-cell:nth-child(4n+3) .ind-ico{color:#d9932a!important;background:#fbf1dc!important}
section.ind-light .ind-cell:nth-child(4n+4) .ind-ico{color:#5566d8!important;background:#ebedfb!important}
section.ind-light .ind-cell:hover .ind-ico{filter:brightness(.94)}
section.ind-light .ind-name{color:#16365c!important}
section.ind-light .client-chip{background:#eaf3fc!important;color:#0f3157!important;border-color:rgba(10,123,196,.4)!important}
section.ind-light .client-chip:nth-child(even){background:#fbf3e2!important;border-color:rgba(217,147,42,.45)!important}
section.ind-light .client-chip:hover{background:#0a7bc4!important;color:#fff!important;border-color:#0a7bc4!important}

/* Nav now carries an extra item (Videos) and the in-nav "Ask Gerhard" launcher,
   so the row needs more room. Widen the bar, tighten spacing, and drop to the
   hamburger a little earlier so the language switch never clips on desktop. */
/* Slim the row so the full nav (7 links + Get In Touch + Ask Gerhard + language)
   fits on normal laptop widths, and only drops to the hamburger on genuinely
   small screens (<1120px) instead of hiding the buttons at 1400px. */
.nav-inner{max-width:1500px;gap:16px;padding:0 24px}
.nav-links{gap:11px}
.nav-links a{font-size:11px;letter-spacing:.05em}
.nav-logo .brand-img{height:40px;max-width:210px}
.nav-cta{padding:7px 13px}
/* Between the single-row fit (~1180px) and mobile (760px), the nav WRAPS to a
   second line so every button stays visible — no hamburger hiding them. Only
   true phone/tablet widths (<=760px) collapse to the hamburger menu. */
@media(min-width:761px) and (max-width:1180px){
  .menu-toggle{display:none}
  .nav-inner{height:auto;flex-wrap:wrap;row-gap:8px;padding-top:12px;padding-bottom:12px}
  .nav-links{display:flex!important;position:static!important;flex-direction:row!important;
    flex-wrap:wrap;justify-content:flex-start;width:100%;gap:10px 16px;
    background:none!important;border:none!important;box-shadow:none!important;padding:0!important}
  .nav-links a{white-space:nowrap;font-size:12px}
}
@media(max-width:760px){
  .menu-toggle{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:14px;background:#fff;border-bottom:1px solid var(--mk-line);
    box-shadow:0 12px 30px rgba(0,0,0,.08);padding:16px 22px}
  .nav-links.open{display:flex}
  .nav-links a{white-space:normal;font-size:13px}
}
@media(min-width:761px){.menu-toggle{display:none}}

/* ════════════════════════════════════════════════════════════
   PUNCH-LIST v5 (2026-07-17)
   ════════════════════════════════════════════════════════════ */

/* (47-51) Statement / note blocks adopt the same elegant Cormorant italic
   serif as the commitment pull-quote (52), for one consistent voice. */
.doc-note,.bridge-note,.qstmt{font-family:'Cormorant Garamond',serif!important;font-style:italic;
  font-size:clamp(17px,1.7vw,22px)!important;line-height:1.55}
.doc-note strong,.bridge-note strong,.qstmt strong{font-style:italic;font-weight:600}
.qstmt .dep-kick{font-style:normal}

/* (45) Projects "Our Services" cards — smaller / denser blocks. */
.service-card,.service-card:hover{padding:22px 20px!important}
.service-name{font-size:19px!important;margin-bottom:8px!important;line-height:1.15!important}
.service-desc{font-size:12.5px!important;line-height:1.6!important}
.service-num{margin-bottom:14px!important}
.service-icon{margin-bottom:12px!important}
.services-grid .tag{font-size:8.5px!important;padding:2px 7px!important}
.services-grid .service-tags{margin-top:12px!important}

/* (46) Positioning pillars (SOURCE & VERIFY …) — more air, brighter copy. */
.pillar{padding:32px 26px!important}
.pillar-text{color:#d7e4f1!important;font-size:13.5px!important;line-height:1.75!important}

/* (44) EC&I standards grid → auto-scrolling strip (cells cloned once by a
   small script for the seamless loop; hover pauses). */
section.std-strip .wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
section.std-strip .standards-grid{display:flex!important;flex-wrap:nowrap!important;width:max-content;grid-template-columns:none!important;
  background:transparent!important;animation:stdScroll 42s linear infinite}
section.std-strip .standards-grid:hover{animation-play-state:paused}
section.std-strip .std-cell{flex:0 0 auto;width:228px;border-right:1px solid rgba(255,255,255,.08);border-top:3px solid var(--mk-accent)}
@keyframes stdScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  section.std-strip .wrap{-webkit-mask-image:none;mask-image:none}
  section.std-strip .standards-grid{animation:none;flex-wrap:wrap!important;width:auto}
}