/* ============================================================
   MGH WEBSITE 2.0 · SHARED DESIGN SYSTEM
   One stylesheet across all pages (homepage + inner pages).
   Ported from the approved v2 homepage tokens/components and
   extended for the multi-page site. Self-contained, no CDN.
   ============================================================ */

/* ---- Self-hosted fonts (paths relative to this CSS file) ---- */
@font-face { font-family:"Thunder SemiBold"; src:local("Oswald"); font-weight:400 700; font-display:swap; }
@font-face { font-family:"D-DIN Condensed"; src:local("Barlow Semi Condensed"); font-weight:400 600; font-display:swap; }
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-semi-condensed-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-semi-condensed-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-semi-condensed-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-semi-condensed-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-semi-condensed-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-semi-condensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/oswald-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/oswald-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/oswald-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/oswald-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/oswald-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/oswald-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/oswald-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/oswald-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ============================ TOKENS ============================ */
:root{
  --mgh-blue:#34328F; --deep-navy:#082567; --ink:#2A2A38;
  --cool-grey:#B2B8BF; --mist:#F4F4F4; --white:#FFFFFF;
  --cyan:#00D4FF; --green:#27B373;
  --blue-tint-08:rgba(52,50,143,0.08); --blue-tint-12:rgba(52,50,143,0.12);
  --navy-grad:linear-gradient(160deg,#0a2a72 0%,#082567 45%,#06133a 100%);
  --navy-grad-soft:linear-gradient(180deg,#0b1b46 0%,#082567 100%);
  --line-grey:#cfd3da;
  --accent:var(--cyan); --accent-strength:1;
  --font-display:"Thunder SemiBold","Oswald","Arial Narrow",sans-serif;
  --font-body:"D-DIN Condensed","Barlow Semi Condensed",system-ui,sans-serif;
  --fs-display:clamp(2.75rem,1.2rem + 6.4vw,6rem);
  --fs-h2:clamp(2rem,1.1rem + 3.6vw,3.5rem);
  --fs-h3:clamp(1.375rem,1rem + 1.4vw,2rem);
  --fs-body:clamp(1.0625rem,1rem + 0.35vw,1.25rem);
  --fs-lead:clamp(1.25rem,1.05rem + 0.8vw,1.6rem);
  --fs-label:clamp(0.8125rem,0.78rem + 0.18vw,0.9375rem);
  --fs-stat:clamp(3.25rem,1rem + 9vw,7.5rem);
  --lh-display:0.98; --lh-body:1.55; --tracking-label:0.18em;
  --measure:66ch; --gutter:clamp(1.25rem,4vw,4rem);
  --section-y:clamp(5.5rem,9vw,11rem);
  --maxw:1320px; --maxw-wide:1560px;
  --elev-1:0 1px 2px rgba(8,37,103,0.04),0 8px 24px rgba(8,37,103,0.06);
  --elev-2:0 2px 4px rgba(8,37,103,0.05),0 20px 50px rgba(8,37,103,0.10);
  --radius:14px; --radius-lg:22px;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-inout:cubic-bezier(0.65,0,0.35,1);
  --dur-ui:220ms; --dur-reveal:720ms; --motion:1;
}
[data-motion="off"]{ --motion:0; }

/* ============================ BASE ============================ */
*,*::before,*::after{ box-sizing:border-box; } *{ margin:0; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; scroll-padding-top:92px; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); background:var(--white); overflow-x:clip; }
img,svg,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }

.display,h1,h2{ font-family:var(--font-display); font-weight:600; line-height:var(--lh-display); letter-spacing:0; }
.display{ font-size:var(--fs-display); }
h2.beat-title{ font-size:var(--fs-h2); }
h3,.subhead{ font-family:var(--font-body); font-weight:600; font-size:var(--fs-h3); line-height:1.12; letter-spacing:0.005em; }
.lead{ font-size:var(--fs-lead); line-height:1.4; font-weight:400; }
p{ max-width:var(--measure); text-wrap:pretty; }

/* ---- Every heading and title on the site is set in capitals ----
   Applies to real headings plus the div/span-based card titles. Body copy,
   pull-quotes and descriptions stay in sentence case. */
h1,h2,h3,h4,h5,h6,
.beat-title,.display,
.nl-title,.ni-title,.nc-title,
.p-name,.o-country,.b-card h3,.eco-card h3,
.case .ct,.hq-band h3,.faq-cat,.faq-q,.mega-intro h4,
.lead-by .nm,.founder .by .nm{ text-transform:uppercase; }

.eyebrow{ font-family:var(--font-body); font-weight:600; font-size:var(--fs-label); letter-spacing:var(--tracking-label); text-transform:uppercase; display:inline-flex; align-items:center; gap:0.75rem; color:var(--mgh-blue); }
.eyebrow::before{ content:""; width:34px; height:9px; flex:none;
  background:linear-gradient(var(--mgh-blue),var(--mgh-blue)) 0 0/100% 1.5px no-repeat,linear-gradient(var(--mgh-blue),var(--mgh-blue)) 0 50%/100% 1.5px no-repeat,linear-gradient(var(--mgh-blue),var(--mgh-blue)) 0 100%/100% 1.5px no-repeat; }
.on-dark .eyebrow,.eyebrow.on-dark{ color:var(--cyan); }
.on-dark .eyebrow::before,.eyebrow.on-dark::before{
  background:linear-gradient(var(--cyan),var(--cyan)) 0 0/100% 1.5px no-repeat,linear-gradient(var(--cyan),var(--cyan)) 0 50%/100% 1.5px no-repeat,linear-gradient(var(--cyan),var(--cyan)) 0 100%/100% 1.5px no-repeat; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-wide{ width:100%; max-width:var(--maxw-wide); margin-inline:auto; padding-inline:var(--gutter); }
.beat{ padding-block:var(--section-y); position:relative; }
.beat-dark{ background:var(--navy-grad); color:var(--white); }
.beat-dark .lead,.beat-dark p{ color:rgba(255,255,255,0.82); }
.beat-mist{ background:var(--mist); }
.seam{ height:1px; background:linear-gradient(90deg,transparent,var(--line-grey) 12%,var(--line-grey) 88%,transparent); border:0; }
.center{ text-align:center; }
.muted{ color:var(--cool-grey); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.crawl-mirror{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---- Buttons + links ---- */
.btn{ display:inline-flex; align-items:center; gap:0.6rem; font-family:var(--font-body); font-weight:600; font-size:var(--fs-label); letter-spacing:0.08em; text-transform:uppercase; padding:0.95rem 1.6rem; border-radius:100px; transition:transform var(--dur-ui) var(--ease-out),background var(--dur-ui),color var(--dur-ui),border-color var(--dur-ui); min-height:48px; }
.btn .arr{ transition:transform var(--dur-ui) var(--ease-out); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{ background:var(--mgh-blue); color:#fff; }
.btn-primary:hover{ background:var(--deep-navy); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--mgh-blue); border:1.5px solid var(--line-grey); }
.btn-ghost:hover{ border-color:var(--mgh-blue); }
.on-dark .btn-primary,.beat-dark .btn-primary{ background:#fff; color:var(--deep-navy); }
.on-dark .btn-primary:hover,.beat-dark .btn-primary:hover{ background:var(--cyan); color:var(--deep-navy); }
.on-dark .btn-ghost,.beat-dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,0.3); }
.on-dark .btn-ghost:hover,.beat-dark .btn-ghost:hover{ border-color:#fff; }
.link-cta{ display:inline-flex; align-items:center; gap:0.5rem; font-weight:600; font-size:var(--fs-label); letter-spacing:0.06em; text-transform:uppercase; color:var(--mgh-blue); border-bottom:1.5px solid currentColor; padding-bottom:3px; }
.beat-dark .link-cta,.on-dark .link-cta{ color:#fff; }
.link-cta .arr{ transition:transform var(--dur-ui) var(--ease-out); }
.link-cta:hover .arr{ transform:translateX(4px); }

.tl-icon{ width:26px; height:16px; display:inline-block; position:relative; flex:none; }
.tl-icon span{ position:absolute; left:0; height:2px; background:currentColor; border-radius:2px; transition:width var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out); }
/* All three bars are the SAME length, matching the MGH logo mark. Client
   instruction (round 4): the three-line motif must read as three equal lines
   everywhere it appears. Don't reintroduce staggered widths. */
.tl-icon span:nth-child(1){ top:1px; width:100%; }
.tl-icon span:nth-child(2){ top:7px; width:100%; }
.tl-icon span:nth-child(3){ top:13px; width:100%; }

/* ---- Chapter index + reveals ---- */
.chapter{ display:inline-flex; align-items:center; gap:0.7rem; font-family:var(--font-body); font-weight:600; font-size:var(--fs-label); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--cool-grey); margin-bottom:1.1rem; }
.chapter .cx{ color:var(--mgh-blue); }
.on-dark .chapter .cx,.beat-dark .chapter .cx{ color:var(--cyan); }
.chapter .crule{ width:34px; height:9px; flex:none; opacity:0.55;
  background:linear-gradient(currentColor,currentColor) 0 0/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat; }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 0.8s var(--ease-out),transform 0.8s var(--ease-out); transition-delay:var(--rd,0ms); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } }
[data-motion="off"] .reveal{ opacity:1 !important; transform:none !important; transition:none; }

/* ---- Designed media placeholder ---- */
.slot{ --slot-mark:rgba(52,50,143,0.20); --slot-accent:rgba(52,50,143,0.20);
  position:relative; overflow:hidden; border-radius:var(--radius); display:flex; align-items:flex-end; min-height:200px;
  color:var(--mgh-blue); border:1px solid rgba(52,50,143,0.12);
  background:linear-gradient(140deg,#edeff7 0%,#e2e6f3 52%,#d6dcef 100%); }
.slot.dark{ --slot-mark:rgba(255,255,255,0.30); --slot-accent:var(--cyan);
  color:rgba(255,255,255,0.78); border-color:rgba(255,255,255,0.12);
  background:linear-gradient(140deg,#0c2160 0%,#08184a 58%,#050f31 100%); }
.slot.slot-green{ --slot-mark:rgba(39,179,115,0.22); --slot-accent:rgba(39,179,115,0.32);
  color:var(--green); border-color:rgba(39,179,115,0.16);
  background:linear-gradient(140deg,#e7f3ec 0%,#dcefe3 55%,#cfe9d8 100%); }
.slot::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--slot-mark),var(--slot-mark)),linear-gradient(var(--slot-mark),var(--slot-mark)),linear-gradient(var(--slot-accent),var(--slot-accent));
  background-repeat:no-repeat; background-size:72px 6px,72px 6px,72px 6px;
  background-position:center calc(50% - 15px),center 50%,center calc(50% + 15px); }
.slot::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 82% 0%,rgba(255,255,255,0.32),transparent 58%); }
.slot.dark::after{ background:radial-gradient(120% 90% at 82% 0%,rgba(0,212,255,0.12),transparent 55%); }
.slot.slot-green::after{ background:radial-gradient(120% 90% at 82% 0%,rgba(255,255,255,0.40),transparent 58%); }
.slot .slot-cap{ position:relative; z-index:1; margin:1.05rem 1.15rem; font-family:var(--font-body); font-weight:600; font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; opacity:0.62; display:inline-flex; align-items:center; gap:0.55rem; }
.slot .slot-cap::before{ content:""; width:16px; height:13px; border:1.5px solid currentColor; border-radius:3px; opacity:0.85; flex:none; }

/* ---- Accessibility ---- */
.skip-link{ position:fixed; top:10px; left:10px; z-index:2000; background:var(--mgh-blue); color:#fff; padding:0.75rem 1.15rem; border-radius:8px; font-family:var(--font-body); font-weight:600; font-size:0.9rem; letter-spacing:0.02em; transform:translateY(-160%); transition:transform var(--dur-ui) var(--ease-out); }
.skip-link:focus{ transform:none; outline:2px solid var(--cyan); outline-offset:2px; }
:focus-visible{ outline:2px solid var(--mgh-blue); outline-offset:3px; border-radius:3px; }
[data-nav-dark] :focus-visible,.beat-dark :focus-visible,.on-dark:focus-visible{ outline-color:var(--cyan); }

/* ======================= LOGO LOCKUP (image) ======================= */
.mgh-logo{ display:inline-flex; align-items:center; }
.mgh-logo img{ display:block; height:26px; width:auto; }
.loader-mark .mgh-logo img{ height:52px; }
.footer-brand .mgh-logo img{ height:34px; }
/* white logo over dark, blue logo when nav is solid/light (specificity must beat `.mgh-logo img`) */
.mgh-logo img.logo-white{ display:block; } .mgh-logo img.logo-blue{ display:none; }
.nav.solid .mgh-logo img.logo-white{ display:none; } .nav.solid .mgh-logo img.logo-blue{ display:block; }

/* ============================ LOADER ============================ */
#loader{ position:fixed; inset:0; z-index:9999; background:var(--deep-navy); display:grid; place-items:center; transition:opacity 0.6s var(--ease-out),visibility 0.6s; }
#loader.done{ opacity:0; visibility:hidden; }
.loader-inner{ display:flex; flex-direction:column; align-items:center; }
.loader-mark{ position:relative; display:flex; align-items:center; justify-content:center; min-height:60px; }
.loader-mark .mgh-logo{ opacity:0; transform:translateY(6px); }
/* three animated lines that resolve, mirroring the logo's left mark.
   All three are the same length and white, matching the real MGH mark. */
.loader-lines{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:150px; height:56px; pointer-events:none; }
.loader-lines span{ position:absolute; left:0; height:5px; background:#fff; border-radius:3px; width:0; }
.loader-lines span:nth-child(1){ top:6px; } .loader-lines span:nth-child(2){ top:25px; } .loader-lines span:nth-child(3){ top:44px; }
.loader-tag{ margin-top:16px; font-size:var(--fs-label); letter-spacing:0.42em; text-transform:uppercase; color:var(--cyan); opacity:0; text-align:center; padding-left:0.42em; }

/* ============================ NAV ============================ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:1000; transition:background var(--dur-ui),backdrop-filter var(--dur-ui),border-color var(--dur-ui),transform 0.4s var(--ease-out); border-bottom:1px solid transparent; }
.nav-inner{ max-width:var(--maxw-wide); margin-inline:auto; padding:0 var(--gutter); height:78px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.nav-brand{ display:flex; align-items:center; }
.nav-links{ display:flex; align-items:center; gap:clamp(0.5rem,1.6vw,2rem); }
.nav-link{ position:relative; font-weight:600; font-size:0.95rem; letter-spacing:0.02em; color:#fff; padding:0.5rem 0.2rem; display:inline-flex; align-items:center; gap:0.4rem; transition:color var(--dur-ui); background:none; }
.nav-link .chev{ width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform var(--dur-ui); opacity:0.7; }
.nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-ui) var(--ease-out); }
.nav-link:hover::after,.nav-link[aria-expanded="true"]::after,.nav-link.active::after{ transform:scaleX(1); }
.nav-link[aria-expanded="true"] .chev{ transform:rotate(225deg) translateY(2px); }
.nav-right{ display:flex; align-items:center; gap:1.1rem; }
.nav-icon-btn{ color:#fff; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; transition:background var(--dur-ui); }
.nav-icon-btn:hover{ background:rgba(255,255,255,0.12); }
.nav-lang{ font-weight:600; font-size:0.85rem; letter-spacing:0.04em; color:#fff; display:flex; align-items:center; gap:5px; padding:0.4rem 0.2rem; }
/* Once the page has scrolled the bar always gets a blurred backdrop so page
   content never reads through it. Dark sections get the navy tint, light
   sections fall through to `.solid` below. */
.nav.stuck{ background:rgba(5,16,49,0.80); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); border-color:rgba(255,255,255,0.10); }
.nav.solid{ background:rgba(255,255,255,0.82); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-color:rgba(8,37,103,0.08); }
.nav.solid .nav-link,.nav.solid .nav-lang{ color:var(--ink); }
.nav.solid .nav-icon-btn{ color:var(--mgh-blue); }
.nav.solid .nav-icon-btn:hover{ background:var(--blue-tint-08); }
.nav.hide{ transform:translateY(-100%); }
.menu-trigger{ display:flex; align-items:center; gap:0.6rem; color:inherit; }
.menu-trigger .label{ font-weight:600; font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; }
.nav.solid .menu-trigger{ color:var(--ink); }

.mega{ position:fixed; left:0; right:0; top:78px; z-index:999; background:rgba(255,255,255,0.96); backdrop-filter:blur(20px); border-bottom:1px solid rgba(8,37,103,0.1); box-shadow:var(--elev-2); opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out),visibility var(--dur-ui); }
.mega.open{ opacity:1; visibility:visible; transform:none; }
.mega-inner{ max-width:var(--maxw-wide); margin-inline:auto; padding:2.6rem var(--gutter) 2.8rem; display:grid; grid-template-columns:0.95fr 2.9fr; gap:clamp(2rem,4vw,4rem); }
.mega-intro h4{ font-family:var(--font-display); font-weight:600; font-size:1.9rem; color:var(--deep-navy); line-height:1; }
.mega-intro p{ font-size:1rem; color:var(--ink); opacity:0.75; margin-top:0.8rem; }
/* Multi-column (not grid) so the five industry groups balance by height instead
   of leaving an orphan under a short column. */
.mega-flow{ columns:3; column-gap:2.4rem; }
@media (max-width:1140px){ .mega-flow{ columns:2; } }
.mega-role{ padding:0.6rem 0; break-inside:avoid; }
.mega-role .role-h{ display:flex; align-items:baseline; gap:0.6rem; font-family:var(--font-body); font-weight:600; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--mgh-blue); margin-bottom:0.3rem; }
.mega-role .role-h .verb{ color:var(--cool-grey); }
.mega-item{ padding:0.5rem 0; border-bottom:1px solid rgba(8,37,103,0.07); display:flex; flex-direction:column; gap:1px; transition:padding-left var(--dur-ui) var(--ease-out); }
.mega-item:hover{ padding-left:8px; }
.mega-item .mt{ font-weight:600; font-size:1rem; color:var(--ink); display:flex; align-items:center; gap:0.5rem; }
.mega-item:hover .mt{ color:var(--mgh-blue); }
.mega-item .md{ font-size:0.82rem; color:var(--cool-grey); }
.mega-item .mt .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); opacity:0; transition:opacity var(--dur-ui); }
.mega-item:hover .mt .dot{ opacity:calc(var(--accent-strength)); }

/* Language switch: compact dropdown in the nav bar (desktop). The button is a
   .nav-link so its colour follows the transparent/solid nav states; the panel
   itself is always a light card. Selection logic lives in i18n.js. */
.lang-switch{ position:relative; display:flex; align-items:center; }
.lang-btn{ gap:0.35rem; }
.lang-btn .lang-globe{ opacity:0.85; flex:none; }
.lang-menu{ position:absolute; top:calc(100% + 12px); right:0; min-width:176px; background:#fff; border:1px solid rgba(8,37,103,0.1); border-radius:14px; box-shadow:var(--elev-2); padding:0.45rem; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out),visibility var(--dur-ui); }
.lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:none; }
.lang-menu button{ display:flex; align-items:center; justify-content:space-between; gap:0.8rem; width:100%; text-align:left; padding:0.55rem 0.85rem; border-radius:9px; font-weight:600; font-size:0.92rem; color:var(--ink); transition:background var(--dur-ui),color var(--dur-ui); }
.lang-menu button:hover{ background:var(--blue-tint-08); color:var(--mgh-blue); }
.lang-menu button[aria-checked="true"]{ color:var(--mgh-blue); }
.lang-menu button[aria-checked="true"]::after{ content:"\2713"; font-size:0.85em; }
/* mobile menu: language pills above the footer buttons */
.m-lang{ display:flex; flex-wrap:wrap; gap:0.6rem; padding:1.6rem var(--gutter) 0; }
.m-lang button{ padding:0.55rem 1.1rem; border:1px solid rgba(255,255,255,0.28); border-radius:100px; color:#fff; font-weight:600; font-size:0.9rem; transition:background var(--dur-ui),color var(--dur-ui),border-color var(--dur-ui); }
.m-lang button:hover{ border-color:#fff; }
.m-lang button[aria-pressed="true"]{ background:#fff; color:var(--deep-navy); border-color:#fff; }

.m-menu{ position:fixed; inset:0; z-index:1100; background:var(--deep-navy); color:#fff; transform:translateY(-100%); transition:transform 0.5s var(--ease-inout); display:flex; flex-direction:column; overflow-y:auto; }
.m-menu.open{ transform:none; }
.m-menu-top{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem var(--gutter); height:78px; flex:none; color:#fff; }
.m-menu nav{ padding:1rem var(--gutter) 2rem; }
.m-link{ display:flex; align-items:center; justify-content:space-between; padding:1.05rem 0; border-bottom:1px solid rgba(255,255,255,0.12); font-family:var(--font-display); font-weight:600; font-size:1.9rem; color:#fff; }
.m-link .num{ font-family:var(--font-body); font-size:0.8rem; color:var(--cyan); letter-spacing:0.1em; }
.m-menu-foot{ margin-top:auto; padding:1.5rem var(--gutter) 2.5rem; display:flex; gap:1rem; flex-wrap:wrap; }
.m-menu-foot .btn{ flex:1; justify-content:center; }

.thread{ position:fixed; top:0; left:0; right:0; height:3px; z-index:1001; pointer-events:none; }
.thread span{ position:absolute; left:0; top:0; height:100%; width:0%; background:var(--mgh-blue); transition:width 80ms linear; }
.thread span.l2{ background:var(--cyan); opacity:calc(0.5 * var(--accent-strength)); height:1px; top:1px; }

@media (max-width:1240px){ .nav-link{ font-size:0.88rem; } .nav-links{ gap:clamp(0.4rem,1.1vw,1.1rem); } }
@media (max-width:980px){ .nav-links,.nav-lang,.lang-switch,.menu-trigger .label{ display:none; } .nav-inner{ height:70px; } .mega{ display:none; } .mgh-logo img{ height:24px; } }
@media (min-width:981px){ .m-burger{ display:none; } }

/* ======================= UNIFIED FOOTER (contact merged) ======================= */
.footer{ background:#050f33; color:rgba(255,255,255,0.7); padding-top:clamp(3.5rem,6vw,5.5rem); position:relative; }
.footer-cta{ border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:clamp(2.5rem,5vw,4rem); margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.footer-cta h2{ font-size:var(--fs-h2); color:#fff; max-width:16ch; }
.footer-cta p{ color:rgba(255,255,255,0.72); margin-top:1rem; max-width:52ch; }
.footer-cta .fc-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; align-items:center; }
.footer-contact{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,0.1); }
@media (max-width:760px){ .footer-contact{ grid-template-columns:1fr; gap:1.6rem; } }
.footer-contact .fk{ font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--cyan); font-weight:600; margin-bottom:0.6rem; }
.footer-contact .fv{ font-style:normal; font-size:1rem; line-height:1.6; color:rgba(255,255,255,0.82); max-width:none; }
.footer-contact .fv a{ color:rgba(255,255,255,0.82); transition:color var(--dur-ui); }
.footer-contact .fv a:hover{ color:var(--cyan); }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem; padding:3rem 0; }
@media (max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; gap:2.5rem 1.5rem; } }
@media (max-width:480px){ .footer-top{ grid-template-columns:1fr; } }
.footer h5{ font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.5); font-weight:600; margin-bottom:1rem; }
.footer-col a{ display:block; padding:0.4rem 0; color:rgba(255,255,255,0.78); font-size:0.95rem; transition:color var(--dur-ui); }
.footer-col a:hover{ color:var(--cyan); }
.footer-brand .mgh-logo{ margin-bottom:1.2rem; }
.footer-brand p{ font-size:0.95rem; max-width:34ch; }
.footer-social{ display:flex; gap:0.7rem; margin-top:1.4rem; }
.footer-social a{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:rgba(255,255,255,0.72); border:1px solid rgba(255,255,255,0.16); transition:color var(--dur-ui),border-color var(--dur-ui),transform var(--dur-ui) var(--ease-out); }
.footer-social a:hover{ color:var(--cyan); border-color:var(--cyan); transform:translateY(-2px); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.6rem 0 2.5rem; border-top:1px solid rgba(255,255,255,0.12); font-size:0.82rem; color:rgba(255,255,255,0.5); }
.footer-bottom a:hover{ color:var(--cyan); }

/* ======================= INNER-PAGE HERO ======================= */
.page-hero{ position:relative; background:var(--navy-grad); color:#fff; padding-top:clamp(9rem,16vh,12rem); padding-bottom:clamp(3.5rem,7vw,6rem); overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 85% 0%,rgba(0,212,255,0.14),transparent 60%),radial-gradient(50% 50% at 5% 100%,rgba(52,50,143,0.4),transparent 70%); pointer-events:none; }
.page-hero .wrap-wide{ position:relative; z-index:1; }
.page-hero h1{ font-size:clamp(2.6rem,1rem + 6vw,5rem); max-width:18ch; margin-top:0.8rem; }
.page-hero .lead{ max-width:56ch; margin-top:1.4rem; color:rgba(255,255,255,0.85); }
.crumbs{ display:flex; gap:0.55rem; align-items:center; font-size:0.8rem; letter-spacing:0.02em; color:rgba(255,255,255,0.6); }
.crumbs a:hover{ color:var(--cyan); } .crumbs .sep{ opacity:0.5; }
.page-metrics{ display:flex; gap:clamp(1.5rem,4vw,3.5rem); margin-top:2.4rem; flex-wrap:wrap; }
/* stack value over label; without this the inline spans sit side by side */
.page-metrics .pm{ display:flex; flex-direction:column; }
.page-metrics .pm .v{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1; }
.page-metrics .pm .v .suf{ color:var(--cyan); }
.page-metrics .pm .k{ font-size:0.8rem; letter-spacing:0.05em; color:rgba(255,255,255,0.62); text-transform:uppercase; margin-top:4px; }

/* section intro block */
.sec-head{ max-width:60ch; margin-bottom:clamp(2rem,4vw,3rem); }
.sec-head h2{ font-size:var(--fs-h2); }
.sec-head p{ margin-top:1rem; }

/* ======================= CARD GRID (businesses / generic) ======================= */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:clamp(1rem,2vw,1.6rem); }
.b-card{ position:relative; display:flex; flex-direction:column; gap:0.55rem; padding:clamp(1.5rem,2.4vw,2rem); border:1px solid rgba(8,37,103,0.1); border-radius:var(--radius); background:#fff; transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui),border-color var(--dur-ui); overflow:hidden; min-height:190px; }
.b-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cyan); transform:scaleY(0); transform-origin:top; transition:transform var(--dur-ui) var(--ease-out); }
.b-card:hover{ transform:translateY(-4px); box-shadow:var(--elev-2); border-color:transparent; }
.b-card:hover::before{ transform:scaleY(1); }
.b-card .bc-cat{ font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--mgh-blue); font-weight:600; }
.b-card h3{ color:var(--deep-navy); font-size:1.35rem; }
.b-card p{ font-size:0.96rem; color:var(--ink); opacity:0.76; flex:1; }
.b-card .bc-foot{ display:flex; align-items:center; gap:0.5rem; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; color:var(--mgh-blue); margin-top:0.4rem; }
.b-card .bc-foot .ext{ font-size:0.72rem; }
.b-card .arr{ transition:transform var(--dur-ui) var(--ease-out); }
.b-card:hover .arr{ transform:translateX(4px); }
/* Businesses page: image-led cards (same pattern as the newsroom/leadership
   cards: media on top, body below). The client-supplied photos are square;
   a 4:3 cover crop keeps every centred subject intact. */
.b-card.with-media{ padding:0; }
.b-card.with-media .bc-media{ aspect-ratio:4/3; overflow:hidden; background:linear-gradient(140deg,#0c2160,#050f31); }
.b-card.with-media .bc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.b-card.with-media:hover .bc-media img{ transform:scale(1.05); }
.b-card.with-media .bc-body{ display:flex; flex-direction:column; gap:0.55rem; padding:clamp(1.3rem,2vw,1.7rem); flex:1; }
.b-card.with-media .bc-body p{ flex:1; }
.cat-band{ display:flex; align-items:baseline; gap:1rem; margin:clamp(2.5rem,5vw,3.5rem) 0 1.4rem; }
.cat-band:first-of-type{ margin-top:0; }
.cat-band h2{ font-size:clamp(1.5rem,1rem + 1.6vw,2.1rem); color:var(--deep-navy); }
.cat-band .cb-rule{ flex:1; height:1px; background:var(--line-grey); }
.cat-band .cb-n{ font-family:var(--font-body); font-weight:600; color:var(--cool-grey); font-size:0.9rem; }

/* ======================= LEADERSHIP GRID ======================= */
.lead-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:clamp(1rem,2vw,1.6rem); }
.person{ border:1px solid rgba(8,37,103,0.1); border-radius:var(--radius); overflow:hidden; background:#fff; transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui); }
.person:hover{ transform:translateY(-4px); box-shadow:var(--elev-2); }
.person .portrait{ aspect-ratio:4/5; position:relative; background:linear-gradient(150deg,#0c2160,#050f31); display:grid; place-items:center; overflow:hidden; }
.person .portrait img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s var(--ease-out); }
.person:hover .portrait img{ transform:scale(1.035); }
.person .portrait::after{ content:""; position:absolute; inset:auto 0 0 0; height:38%; background:linear-gradient(0deg,rgba(5,15,49,0.55),transparent); pointer-events:none; }
.person .initials{ font-family:var(--font-display); font-weight:600; font-size:2.6rem; color:rgba(255,255,255,0.9); letter-spacing:0.02em; }
.person .portrait .ph-lines{ position:absolute; left:16px; bottom:16px; display:flex; flex-direction:column; gap:5px; opacity:0.6; }
/* Equal widths, see the .tl-icon note above. */
.person .portrait .ph-lines i{ height:3px; width:34px; border-radius:2px; background:var(--cyan); }
/* .p-role is intentionally unused: the client pulled every management-team
   designation in review round 4 pending updated titles. Keep this rule so the
   roles can be restored by re-adding the div, nothing else. */
.person .p-body{ padding:1.1rem 1.2rem 1.3rem; }
.person .p-name{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:var(--deep-navy); line-height:1.05; }
.person .p-role{ font-size:0.86rem; color:var(--mgh-blue); font-weight:600; margin-top:5px; }
.person .p-bio{ font-size:0.9rem; color:var(--ink); opacity:0.72; margin-top:0.7rem; }
.lead-hero-quote{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,1rem + 2vw,2.4rem); line-height:1.18; color:#fff; max-width:22ch; letter-spacing:-0.005em; }

/* ======================= PRESENCE (regions + offices) ======================= */
.region-block{ margin-top:clamp(2.5rem,5vw,3.5rem); }
.region-block:first-of-type{ margin-top:0; }
.region-head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.5rem; }
.region-head h2{ font-size:clamp(1.5rem,1rem + 1.6vw,2.1rem); color:var(--deep-navy); }
.region-head .rh-count{ font-family:var(--font-body); font-weight:600; color:var(--mgh-blue); font-size:0.9rem; }
.region-head .rh-rule{ flex:1; height:1px; background:var(--line-grey); }
.office-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.office{ border:1px solid rgba(8,37,103,0.1); border-radius:var(--radius); padding:1.3rem 1.4rem; background:#fff; transition:border-color var(--dur-ui),box-shadow var(--dur-ui); }
.office:hover{ border-color:var(--mgh-blue); box-shadow:var(--elev-1); }
.office .o-country{ display:flex; align-items:center; gap:0.5rem; font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--deep-navy); }
.office .o-flag{ font-size:1.1rem; line-height:1; }
.office .o-city{ font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--mgh-blue); font-weight:600; margin:3px 0 0.7rem; }
.office address{ font-style:normal; font-size:0.9rem; color:var(--ink); opacity:0.75; line-height:1.5; }
.office .o-tel{ display:block; margin-top:0.5rem; font-size:0.85rem; color:var(--mgh-blue); }

/* ======================= NEWSROOM ======================= */
.news-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:clamp(1.2rem,2.4vw,1.8rem); }
.news-card{ display:flex; flex-direction:column; border-radius:var(--radius-lg); overflow:hidden; background:#fff; border:1px solid rgba(8,37,103,0.1); transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui); }
.news-card:hover{ transform:translateY(-4px); box-shadow:var(--elev-2); }
.news-card .nc-media{ min-height:180px; position:relative; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(140deg,#0c2160,#050f31); }
.news-card .nc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.news-card:hover .nc-media img{ transform:scale(1.05); }
.news-card .nc-tag{ position:absolute; left:0.9rem; bottom:0.9rem; z-index:1; background:rgba(5,15,51,0.72); color:#fff; padding:0.35rem 0.75rem; border-radius:100px; font-size:0.68rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; backdrop-filter:blur(6px); }
.news-card .nc-foot .src{ display:inline-flex; align-items:center; gap:0.35rem; color:var(--mgh-blue); font-weight:600; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; }
.news-card .nc-body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.news-card .nc-cat{ font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:var(--mgh-blue); }
.news-card .nc-title{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; line-height:1.08; color:var(--deep-navy); margin:0.5rem 0 0.6rem; }
.news-card .nc-sum{ font-size:0.92rem; color:var(--ink); opacity:0.74; flex:1; }
.news-card .nc-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:1rem; font-size:0.82rem; color:var(--cool-grey); }
.news-card .nc-foot .rd{ color:var(--mgh-blue); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; font-size:0.72rem; }

/* ======================= FAQ ACCORDION ======================= */
.faq-list{ max-width:860px; }
.faq{ border-bottom:1px solid rgba(8,37,103,0.12); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; text-align:left; padding:1.4rem 0; font-family:var(--font-body); font-weight:600; font-size:1.15rem; color:var(--deep-navy); cursor:pointer; list-style:none; }
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::marker{ content:""; }
.faq-q .fq-ic{ position:relative; width:18px; height:18px; flex:none; }
.faq-q .fq-ic::before,.faq-q .fq-ic::after{ content:""; position:absolute; background:var(--mgh-blue); border-radius:2px; transition:transform var(--dur-ui) var(--ease-out); }
.faq-q .fq-ic::before{ left:0; top:8px; width:18px; height:2px; }
.faq-q .fq-ic::after{ left:8px; top:0; width:2px; height:18px; }
.faq[open] .fq-ic::after{ transform:rotate(90deg) scaleX(0); }
.faq-a{ overflow:hidden; }
.faq-a p{ padding-bottom:1.4rem; color:var(--ink); opacity:0.8; font-size:1rem; max-width:74ch; }
.faq-cat{ font-family:var(--font-display); font-weight:600; font-size:1.4rem; color:var(--mgh-blue); margin:clamp(2rem,4vw,3rem) 0 0.5rem; }
.faq-cat:first-child{ margin-top:0; }

/* ======================= PARTNER MARQUEE =======================
   The track holds the logo set TWICE. The keyframe travels exactly -50%,
   i.e. the width of one full set, so the second copy lands precisely where
   the first started and the loop is seamless (no gap, no jump). Any change
   to the number of items must be mirrored in both copies. */
.marquee{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
/* Spacing is a trailing margin on each item, NOT flex `gap`. With `gap`, N items
   have N-1 gaps, so half the track width lands half a gap short of the second
   copy and the belt visibly hitches once per cycle. A uniform per-item margin
   makes every item the same outer width, so -50% is exactly one full set. */
.marquee-track{ display:flex; align-items:center; width:max-content; animation:marquee 42s linear infinite; }
.marquee-track > *{ margin-right:clamp(2.5rem,5vw,5rem); }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ display:flex; align-items:center; justify-content:center; height:56px; font-family:var(--font-display); font-weight:600; font-size:1.7rem; letter-spacing:0.02em; color:rgba(255,255,255,0.55); white-space:nowrap; transition:color var(--dur-ui); }
.marquee-item:hover{ color:#fff; }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
[data-motion="off"] .marquee-track,.reduced .marquee-track{ animation:none; }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; flex-wrap:wrap; justify-content:center; } }

/* Real partner logos (self-hosted, transparent PNG) in a fixed contain box so
   wordmarks and symbols sit on one optical baseline. */
.p-logo{ flex:none; display:flex; align-items:center; justify-content:center; width:clamp(112px,13vw,172px); height:clamp(38px,4.6vw,54px); }
.p-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; opacity:0.9; transition:opacity var(--dur-ui),transform var(--dur-ui) var(--ease-out); }
.p-logo:hover img{ opacity:1; transform:scale(1.04); }
/* the two thin wordmarks read small in a height-capped box; give them the width */
.p-logo.wide{ width:clamp(130px,15vw,200px); }

/* ======================= UTILITY ======================= */
.pad-y{ padding-block:var(--section-y); }
.mt-cta{ margin-top:clamp(2rem,4vw,3rem); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
@media (max-width:880px){ .grid-2{ grid-template-columns:1fr; } }

/* ============== CASE-STUDY ARTICLES (/innovation/fast-lcl/, /innovation/land-air-hybrid/) ============== */
.cs-banner{ margin:0; }
.cs-banner img{ display:block; width:100%; height:auto; border-radius:var(--radius-lg); }
.cs-prose{ max-width:74ch; }
.cs-prose p+p{ margin-top:1rem; }
.cs-kps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(0.8rem,1.6vw,1.2rem); margin-top:1.8rem; }
.cs-kp{ background:var(--white); border:1px solid var(--blue-tint-12); border-radius:var(--radius); padding:1.3rem 1.4rem; }
.cs-kp h3{ font-size:1.05rem; color:var(--deep-navy); }
.cs-kp p{ font-size:0.95rem; }
.cs-kp h3+p{ margin-top:0.45rem; }
.cs-stats{ display:flex; gap:clamp(1.6rem,4vw,3.2rem); flex-wrap:wrap; margin-top:2rem; }
.cs-stats .v{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,4vw,3.2rem); line-height:1; color:var(--mgh-blue); }
.cs-stats .v .suf{ color:var(--cyan); }
.cs-stats .k{ margin-top:0.3rem; font-size:0.9rem; color:var(--ink); opacity:0.75; max-width:20ch; }
.cs-route{ display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem 0.65rem; margin-top:1.8rem; }
.cs-route .stop{ font-weight:600; font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--deep-navy); background:var(--white); border:1px solid var(--blue-tint-12); border-radius:999px; padding:0.45rem 0.95rem; }
.cs-route .leg{ color:var(--cyan); font-weight:600; }