/* ════════════════════════════════════════════════════════════
   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.
   ════════════════════════════════════════════════════════════ */
section.psy-vbg{background:rgba(255,255,255,.72)!important;background-image:none!important}
section.psy-vbg .sec-wm{opacity:.32;filter:grayscale(.05)}
/* 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.
   Same treatment as psychometrics: translucent white veil so the
   looping section video shows through, with text kept legible.
   ════════════════════════════════════════════════════════════ */
section.vbg{background:rgba(255,255,255,.72)!important;background-image:none!important}
section.vbg .sec-wm{opacity:.32;filter:grayscale(.05)}
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}