/* ==========================================================================
   MedAchievers — Corporate Design System v2
   Midnight navy · healthcare teal · restrained gold
   ========================================================================== */

:root {
  --navy-950: #050A1F;
  --navy-900: #0A1333;
  --navy-850: #0E1A40;
  --navy-800: #13224F;
  --navy-700: #1D3170;
  --navy-600: #2B4590;

  --teal-200: #BDEFFF;
  --teal-300: #7FE0FF;
  --teal-400: #3DCFF5;
  --teal-500: #1AB0E3;
  --teal-600: #0E8CC4;
  --teal-700: #0A6A9C;
  --teal-50:  #EAF6FD;

  --blue-400: #6B8CFF;
  --blue-500: #4A6BFF;
  --violet-400: #A48BFF;
  --violet-500: #7C5CFF;
  --grad-accent: linear-gradient(120deg, #3DCFF5 0%, #4A8BFF 55%, #7C5CFF 100%);
  --grad-text: linear-gradient(100deg, #7FE0FF 0%, #6B9BFF 50%, #B49CFF 100%);
  --grad-cta: linear-gradient(120deg, #1477AA 0%, #2A5BC0 55%, #3F4BB8 100%);

  --gold-400: #D9B65E;
  --gold-500: #C8A24A;

  --ink: #0A1333;
  --ink-2: #2B3B52;
  --muted: #5B6B80;
  --muted-2: #8593A6;
  --line: #E2E7EE;
  --line-2: #EDF1F5;
  --soft: #F3F5FC;
  --white: #FFFFFF;

  --on-dark: rgba(255, 255, 255, .92);
  --on-dark-2: rgba(255, 255, 255, .66);
  --on-dark-3: rgba(255, 255, 255, .42);
  --line-dark: rgba(255, 255, 255, .1);

  --f-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r-xs: 3px;
  --r-sm: 6px;
  --r: 10px;

  --container: 1600px;
  --gutter: 32px;
  /* Vertical rhythm between sections: follows width AND height, so short laptop
     screens (e.g. 1366x657) do not get huge gaps. ~64px mobile, ~85px laptop, 112px max. */
  --section-y: clamp(64px, min(8vw, 13vh), 112px);
  --header-h: 76px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --shadow: 0 1px 2px rgba(10, 19, 51, .04), 0 12px 32px -12px rgba(10, 19, 51, .16);
  --shadow-lg: 0 40px 80px -30px rgba(5, 10, 31, .45);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--white); color: var(--ink-2);
  font: 400 16.5px/1.68 var(--f-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "cv11", "ss01";
}
img, svg, video, iframe, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5 { font-family: var(--f-display); color: var(--ink); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { color: var(--ink); font-weight: 600; }
::selection { background: var(--teal-200); color: var(--navy-950); }
:focus-visible { outline: 2px solid var(--teal-400); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 999; background: var(--teal-400); color: var(--navy-950); padding: 10px 16px; font-weight: 600; border-radius: var(--r-xs); }
.skip:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.dark { background: var(--navy-950); color: var(--on-dark-2); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: #fff; }
.dark strong { color: #fff; }
.navy { background: var(--navy-900); color: var(--on-dark-2); }
.navy h1, .navy h2, .navy h3, .navy h4 { color: #fff; }
.soft { background: var(--soft); }

/* ---------- Type scale ---------- */
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-700); margin-bottom: 22px;
}
.label::before { content: ""; width: 7px; height: 7px; background: var(--teal-500); flex-shrink: 0; }
.dark .label, .navy .label, .label.on-dark { color: var(--teal-300); }
.dark .label::before, .navy .label::before, .label.on-dark::before { background: var(--teal-400); }
.label.plain::before { display: none; }

.display { font-size: clamp(2.7rem, 6.2vw, 5.6rem); line-height: 1.0; letter-spacing: -.04em; font-weight: 600; }
.h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.04; letter-spacing: -.035em; }
.h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.03em; }
.h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.2; }
.lead { font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--muted); }
.dark .lead, .navy .lead { color: var(--on-dark-2); }
.muted { color: var(--muted); }
.mono { font-family: var(--f-mono); }
.accent { color: var(--teal-600); }
.dark .accent, .navy .accent { color: var(--teal-300); }
.gold { color: var(--gold-500); }
.measure { max-width: 620px; }

/* ---------- Layout ---------- */
.section { padding: var(--section-y) 0; position: relative; }
.section.tight { padding: calc(var(--section-y) * .72) 0; }
.section-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-bottom: clamp(32px, min(5vw, 8vh), 64px); }
.section-head .h2 { margin: 0; max-width: 820px; }
.section-head p { margin: 18px 0 0; max-width: 620px; }
.section-head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.section-head.center .label { justify-content: center; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split.wide-left { grid-template-columns: 1.15fr .85fr; }
.split.wide-right { grid-template-columns: .85fr 1.15fr; }
.split.top { align-items: start; }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 22px; border-radius: var(--r-xs);
  font: 600 15px/1 var(--f-body); letter-spacing: -.005em; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
  border: 1px solid transparent;
}
.btn svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-teal { background: var(--grad-cta); background-size: 180% 100%; background-position: 0 0; color: #fff; border-color: rgba(255, 255, 255, .08); box-shadow: 0 10px 24px -16px rgba(42, 91, 192, .55), inset 0 1px 0 rgba(255, 255, 255, .12); transition: background-position .6s var(--ease), box-shadow .3s, transform .25s var(--ease); }
.btn-teal:hover { background-position: 100% 0; box-shadow: 0 14px 30px -16px rgba(63, 75, 184, .6), inset 0 1px 0 rgba(255, 255, 255, .16); }
.btn-navy { background: var(--navy-900); color: #fff; }
.btn-navy:hover { background: var(--navy-700); }
.btn-line { border-color: rgba(255,255,255,.28); color: #fff; }
.btn-line:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn-line-dark { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-line-dark:hover { border-color: var(--ink); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 14px; }

.more {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--ink);
  padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s var(--ease), color .2s;
}
.more svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.more:hover { background-size: 100% 1px; }
.more:hover svg { transform: translateX(4px); }
.dark .more, .navy .more, .more.on-dark { color: #fff; }

.arrow-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; flex-shrink: 0;
  transition: background .25s, border-color .25s, color .25s, transform .3s var(--ease);
}
.arrow-btn svg { width: 17px; height: 17px; }
.dark .arrow-btn, .on-img .arrow-btn { border-color: rgba(255,255,255,.3); color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  transition: background .35s, border-color .35s, transform .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.logo { display: block; flex-shrink: 0; height: 40px; }
.logo img { height: 40px; width: auto; }
.logo .on-light { display: none; }
.site-header.solid, .site-header.scrolled { background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--line); }
.site-header.solid .logo .on-dark, .site-header.scrolled .logo .on-dark { display: none; }
.site-header.solid .logo .on-light, .site-header.scrolled .logo .on-light { display: block; }
.site-header.hide { transform: translateY(-100%); }

.nav { display: flex; align-items: center; gap: 2px; }
.nav > a, .nav-drop > button {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
  font: 500 14.5px/1 var(--f-body); color: var(--on-dark); border-radius: var(--r-xs);
  transition: color .2s, background .2s;
}
.nav > a:hover, .nav-drop > button:hover, .nav-drop.open > button { color: #fff; background: rgba(255,255,255,.08); }
.nav > a.active, .nav-drop.active > button { color: var(--teal-300); }
.nav-drop > button svg { width: 14px; height: 14px; transition: transform .25s; }
.nav-drop.open > button svg { transform: rotate(180deg); }
.site-header.solid .nav > a, .site-header.scrolled .nav > a,
.site-header.solid .nav-drop > button, .site-header.scrolled .nav-drop > button { color: var(--ink-2); }
.site-header.solid .nav > a:hover, .site-header.scrolled .nav > a:hover,
.site-header.solid .nav-drop > button:hover, .site-header.scrolled .nav-drop > button:hover,
.site-header.solid .nav-drop.open > button, .site-header.scrolled .nav-drop.open > button { color: var(--ink); background: var(--soft); }
.site-header.solid .nav > a.active, .site-header.scrolled .nav > a.active,
.site-header.solid .nav-drop.active > button, .site-header.scrolled .nav-drop.active > button { color: var(--teal-700); }

.nav-drop { position: relative; }
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; width: 760px;
  transform: translate(-50%, 8px); opacity: 0; visibility: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr 1fr 250px; overflow: hidden;
  transition: opacity .25s, transform .3s var(--ease), visibility .25s;
}
.mega::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.nav-drop.open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-col { padding: 22px; display: grid; gap: 2px; align-content: start; }
.mega-col + .mega-col { padding-left: 0; }
.mega-link { display: block; padding: 14px 14px; border-radius: var(--r-sm); transition: background .2s; }
.mega-link:hover { background: var(--soft); }
.mega-link b { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.mega-link b i { font: 500 11px var(--f-mono); color: var(--teal-700); font-style: normal; }
.mega-link span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-top: 4px; padding-left: 27px; }
.mega-feature { background: var(--navy-900); color: var(--on-dark-2); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.mega-feature > * { position: relative; }
.mega-feature .label { margin-bottom: 14px; font-size: 11px; }
.mega-feature h4 { color: #fff; font-size: 1.2rem; margin-bottom: 8px; }
.mega-feature p { font-size: 13.5px; margin: 0 0 18px; }

.header-cta { display: flex; align-items: center; gap: 10px; }
.site-header:not(.solid):not(.scrolled) .header-cta .btn-navy { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.site-header:not(.solid):not(.scrolled) .header-cta .btn-navy:hover { background: rgba(255, 255, 255, .16); }
/* ---------- Menu button (burger) ----------
   Glass button with softly rounded corners; three lines of different length even out on hover. In the
   drawer the same lines turn into an X as it opens. */
.menu-btn, .close-btn {
  position: relative; width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease), box-shadow .3s;
}
.menu-btn { display: none; }
.menu-btn::after, .close-btn::after { /* soft glow ring on hover */
  content: ""; position: absolute; inset: -5px; border-radius: 16px; border: 1px solid rgba(127, 224, 255, .35);
  opacity: 0; transform: scale(.85); transition: opacity .35s, transform .45s var(--ease); pointer-events: none;
}
.menu-btn:hover, .close-btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(127, 224, 255, .45); }
.menu-btn:hover::after, .close-btn:hover::after { opacity: 1; transform: scale(1); }
.menu-btn:active, .close-btn:active { transform: scale(.92); }
.site-header.solid .menu-btn, .site-header.scrolled .menu-btn {
  background: var(--navy-900); border-color: var(--navy-900); color: #fff; box-shadow: 0 8px 20px -10px rgba(10, 19, 51, .55);
}
.site-header.solid .menu-btn:hover, .site-header.scrolled .menu-btn:hover { background: var(--navy-700); border-color: var(--navy-700); }

.burger { position: relative; display: block; width: 20px; height: 14px; }
.burger i {
  position: absolute; left: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: top .35s var(--ease), width .35s var(--ease), transform .45s var(--ease), opacity .25s;
}
.burger i:nth-child(1) { top: 0; width: 100%; }
.burger i:nth-child(2) { top: 6px; width: 62%; }
.burger i:nth-child(3) { top: 12px; width: 82%; }
.menu-btn:hover .burger i { width: 100%; }
.menu-btn:hover .burger i:nth-child(2) { transition-delay: .04s; }
.menu-btn:hover .burger i:nth-child(3) { transition-delay: .08s; }
/* drawer open: the lines fold into an X */
.drawer.open .close-btn .burger i { width: 100%; transition-delay: .18s; }
.drawer.open .close-btn .burger i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.drawer.open .close-btn .burger i:nth-child(2) { opacity: 0; transform: translateX(-8px); transition-delay: .1s; }
.drawer.open .close-btn .burger i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.close-btn:hover .burger { transform: rotate(90deg); transition: transform .45s var(--ease); }
.burger { transition: transform .45s var(--ease); }

.drawer {
  position: fixed; inset: 0; z-index: 200; background: var(--navy-950); color: #fff;
  display: flex; flex-direction: column; padding: 18px var(--gutter) 32px; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .3s, transform .4s var(--ease), visibility .3s;
}
.drawer.open { opacity: 1; visibility: visible; transform: none; }
.drawer > * { flex-shrink: 0; } /* keep items full size so the drawer scrolls instead of squashing them */
/* Logo + close button stay pinned while the menu scrolls. Negative margins pull the bar over
   the drawer's padding so it spans the full width and sits flush with the top. */
.drawer-top {
  position: sticky; top: -18px; z-index: 2; display: flex; justify-content: space-between; align-items: center;
  margin: -18px calc(var(--gutter) * -1) 18px; padding: 18px var(--gutter) 14px; background: var(--navy-950);
}
.drawer-top .logo img { height: 36px; }
.drawer .group { padding: 18px 0; border-top: 1px solid var(--line-dark); }
.drawer .group-title { font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-300); margin-bottom: 10px; }
.drawer a.d-link { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font: 600 1.35rem/1.25 var(--f-display); letter-spacing: -.02em; color: #fff; }
.drawer a.d-link.small { font-size: 1.1rem; font-weight: 500; color: var(--on-dark); }
.drawer a.d-link.active { color: var(--teal-300); }
.drawer .btn { margin-top: 24px; width: 100%; }
/* drawer content rises in, one group after another */
.drawer > :not(.drawer-top) { opacity: 0; transform: translateY(18px); transition: opacity .45s, transform .6s var(--ease); }
.drawer.open > :not(.drawer-top) { opacity: 1; transform: none; }
.drawer.open > :nth-child(2) { transition-delay: .1s; }
.drawer.open > :nth-child(3) { transition-delay: .17s; }
.drawer.open > :nth-child(4) { transition-delay: .24s; }
.drawer.open > :nth-child(5) { transition-delay: .31s; }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy-950); color: var(--on-dark-2);
  padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) 0 clamp(56px, 6vw, 88px);
}
.hero canvas.net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .7; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(26, 176, 227, .16), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(26, 54, 88, .7), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 80px 80px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.hero h1 { color: #fff; margin-bottom: 28px; }
.hero h1 em { font-style: normal; color: var(--teal-300); }
.hero .lead { max-width: 560px; margin-bottom: 40px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.eco-index { margin-top: clamp(48px, 6vw, 80px); padding-top: 22px; border-top: 1px solid var(--line-dark); }
.eco-index .t { font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 14px; }
.eco-index ul { display: flex; flex-wrap: wrap; gap: 8px 0; }
.eco-index li { display: flex; align-items: center; }
.eco-index li + li::before { content: ""; width: 4px; height: 4px; background: var(--teal-500); margin: 0 14px; }
.eco-index a { font: 500 14.5px var(--f-body); color: var(--on-dark); transition: color .2s; }
.eco-index a:hover { color: var(--teal-300); }

.hero-visual { position: relative; aspect-ratio: 1 / 1.02; max-width: 620px; margin-left: auto; width: 100%; }
.hv-tile { position: absolute; overflow: hidden; border-radius: var(--r-sm); background: var(--navy-800); }
.hv-tile img { width: 100%; height: 100%; object-fit: cover; }
.hv-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 10, 31,0) 40%, rgba(5, 10, 31,.6)); }
.hv-tile .cap { position: absolute; left: 14px; bottom: 12px; z-index: 2; font: 500 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #fff; display: flex; align-items: center; gap: 8px; }
.hv-tile .cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-400); box-shadow: 0 0 0 4px rgba(61, 207, 245,.2); }
.hv-1 { left: 0; top: 0; width: 61%; height: 56%; }
.hv-2 { right: 0; top: 8%; width: 35%; height: 42%; }
.hv-3 { right: 0; bottom: 0; width: 52%; height: 46%; }
.hv-data {
  position: absolute; left: 0; bottom: 4%; width: 44%; height: 36%; border-radius: var(--r-sm);
  background: rgba(14, 26, 64, .78); border: 1px solid var(--line-dark); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 16px 16px 14px; display: flex; flex-direction: column; color: #fff;
}
.hv-data .hd { display: flex; justify-content: space-between; font: 500 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); }
.hv-data .hd b { color: var(--teal-300); font-weight: 500; }
.hv-data svg { flex: 1; margin-top: 10px; width: 100%; }
.hv-data .ft { display: flex; gap: 14px; font: 500 10px var(--f-mono); color: var(--on-dark-3); letter-spacing: .06em; }
.hv-data .ft span::before { content: ""; display: inline-block; width: 8px; height: 2px; margin-right: 6px; vertical-align: middle; background: var(--teal-400); }
.hv-data .ft span + span::before { background: var(--gold-400); }
.hv-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.hv-chip {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r-sm); background: rgba(255,255,255,.96); color: var(--ink);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.5); font-size: 12.5px; line-height: 1.3;
  animation: floaty 7s ease-in-out infinite;
}
.hv-chip b { display: block; font: 600 13px var(--f-display); }
.hv-chip span { color: var(--muted); font-size: 11.5px; }
.hv-chip .dot { width: 30px; height: 30px; border-radius: var(--r-xs); background: var(--teal-50); color: var(--teal-700); display: grid; place-items: center; flex-shrink: 0; }
.hv-chip .dot svg { width: 16px; height: 16px; }
.hv-chip.c1 { left: 38%; top: 49%; }
.hv-chip.c2 { right: 4%; top: 1%; animation-delay: -3s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.pulse-node { fill: var(--teal-400); }
.pulse-ring { fill: none; stroke: var(--teal-400); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: ring 2.8s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.flow { stroke-dasharray: 4 6; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }

/* ---------- Presence strip ---------- */
.presence { padding: clamp(56px, 6vw, 84px) 0; background: var(--soft); border-bottom: 1px solid var(--line); }
.presence-grid { display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: center; }
.presence h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin-bottom: 12px; }
.presence p { color: var(--muted); font-size: 15px; margin: 0; }
.track { position: relative; padding-top: 34px; }
.track-line { position: absolute; left: 0; right: 0; top: 40px; height: 1px; background: var(--line); }
.track-line::after { content: ""; position: absolute; left: 0; top: -1px; width: 80px; height: 3px; background: linear-gradient(90deg, transparent, var(--teal-500)); animation: travel 5s linear infinite; }
@keyframes travel { from { left: -80px; } to { left: 100%; } }
.track ol { display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.track li { position: relative; padding-top: 26px; }
.track li::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--teal-600); }
.track li.hub::before { background: var(--teal-600); box-shadow: 0 0 0 6px rgba(14, 140, 196,.14); }
.track li b { display: block; font: 600 15px/1.2 var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.track li span { font: 500 11px var(--f-mono); color: var(--muted-2); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Intro ---------- */
.intro-points { margin-top: 40px; display: grid; gap: 0; }
.intro-points li { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 22px 0; border-top: 1px solid var(--line); }
.intro-points li:last-child { border-bottom: 1px solid var(--line); }
.intro-points .n { font: 500 12px var(--f-mono); color: var(--teal-700); padding-top: 4px; }
.intro-points h3 { font-size: 1.12rem; margin-bottom: 4px; }
.intro-points p { margin: 0; font-size: 15px; color: var(--muted); }
.figure { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--navy-900); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure.tall { aspect-ratio: 4 / 5; }
.figure.wide { aspect-ratio: 16 / 10; }
.figure.square { aspect-ratio: 1; }
.figcap {
  position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2;
  background: rgba(5, 10, 31, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--on-dark-2);
  border: 1px solid var(--line-dark); border-radius: var(--r-sm); padding: 20px 22px; font-size: 14.5px;
}
.figcap q { display: block; font: 500 1.2rem/1.4 var(--f-display); letter-spacing: -.01em; color: #fff; quotes: "\201C" "\201D"; margin-bottom: 8px; }
.figcap small { font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-300); }

/* ---------- Ecosystem (asymmetric) ---------- */
.eco { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(260px, auto); gap: 16px; }
.eco-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .3s, box-shadow .4s var(--ease), transform .4s var(--ease);
}
.eco-card:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-3px); }
.eco-card:hover .arrow-btn { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.eco-num { font: 300 clamp(3rem, 5vw, 4.6rem)/.9 var(--f-display); letter-spacing: -.05em; color: var(--teal-600); }
.eco-card h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin: 0 0 10px; }
.eco-card p { color: var(--muted); font-size: 15px; margin: 0; max-width: 460px; }
.eco-body { padding: 30px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.eco-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; gap: 16px; }
.eco-media { overflow: hidden; }
.eco-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.eco-card:hover .eco-media img { transform: scale(1.04); }

.eco-card.feature { grid-column: span 7; grid-row: span 2; color: var(--on-dark-2); background: var(--navy-900); border: 0; }
.eco-card.feature .eco-media { position: absolute; inset: 0; z-index: -1; }
.eco-card.feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 10, 31,.15) 0%, rgba(5, 10, 31,.35) 40%, rgba(5, 10, 31,.94) 100%); }
.eco-card.feature .eco-body { justify-content: space-between; padding: 36px; }
.eco-card.feature h3 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.eco-card.feature p { color: var(--on-dark-2); font-size: 16px; }
.eco-card.feature .eco-num { color: var(--teal-300); }
.eco-card.feature .arrow-btn { border-color: rgba(255,255,255,.35); color: #fff; }
.eco-card.feature:hover .arrow-btn { background: var(--teal-400); border-color: var(--teal-400); color: var(--navy-950); }
.eco-card.feature .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }

.eco-card.row { grid-column: span 5; flex-direction: row; }
.eco-card.row .eco-media { width: 40%; flex-shrink: 0; }
.eco-card.row .eco-body { padding: 26px; }
.eco-card.row .eco-num { font-size: 2.8rem; }

.eco-card.data { grid-column: span 7; background: var(--navy-900); border: 0; color: var(--on-dark-2); flex-direction: row; }
.eco-card.data h3 { color: #fff; }
.eco-card.data p { color: var(--on-dark-2); }
.eco-card.data .eco-num { color: var(--teal-300); }
.eco-card.data .arrow-btn { border-color: rgba(255,255,255,.3); color: #fff; }
.eco-card.data:hover .arrow-btn { background: var(--teal-400); border-color: var(--teal-400); color: var(--navy-950); }
.eco-card.data .eco-body { width: 52%; }
.eco-card.data .viz { flex: 1; padding: 26px 26px 26px 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }

.eco-card.stack { grid-column: span 5; }
.eco-card.stack .eco-media { height: 200px; }

.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-xs); border: 1px solid rgba(255,255,255,.22); font: 500 11px var(--f-mono); letter-spacing: .06em; color: var(--on-dark); text-transform: uppercase; }
.tag.light { border-color: var(--line); color: var(--ink-2); background: #fff; }
.tag.teal { border-color: transparent; background: var(--teal-50); color: var(--teal-700); }

/* mini sequence viz (used in cards/panels) */
.seq { display: flex; gap: 3px; height: 26px; align-items: flex-end; }
.seq i { flex: 1; background: rgba(61, 207, 245, .5); border-radius: 1px; transform-origin: bottom; animation: bar 2.6s ease-in-out infinite; }
.seq i:nth-child(3n) { background: rgba(217, 182, 94, .65); }
.seq i:nth-child(4n) { animation-delay: -.6s; } .seq i:nth-child(5n) { animation-delay: -1.2s; } .seq i:nth-child(7n) { animation-delay: -1.8s; }
@keyframes bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.bases { font: 500 12px/1.9 var(--f-mono); letter-spacing: .32em; color: var(--on-dark-3); word-break: break-all; }
.bases b { color: var(--teal-300); font-weight: 500; }
.bases u { color: var(--gold-400); text-decoration: none; border-bottom: 1px solid var(--gold-400); }

/* ---------- MedParliament feature ---------- */
.mp-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.mp-mosaic { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 1.25; position: relative; }
.mp-mosaic .m { position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--navy-800); }
.mp-mosaic .m img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform 1s var(--ease); }
.mp-mosaic .m:hover img { transform: scale(1.04); }
.mp-mosaic .m.big { grid-row: span 2; }
.mp-mosaic .m .cap { position: absolute; left: 12px; bottom: 10px; right: 12px; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; z-index: 2; }
.mp-mosaic .m::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5, 10, 31,.75)); }
.mp-badge {
  position: absolute; left: -24px; top: 24px; z-index: 3; background: rgba(10, 19, 51, .82); color: #fff; border: 1px solid rgba(127, 224, 255, .22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 14px 18px; border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
}
.mp-badge b { display: block; font: 600 1.35rem/1 var(--f-display); letter-spacing: -.02em; }
.mp-badge span { font: 500 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 44px 0; border-top: 1px solid var(--line-dark); }
.pillars > div { padding: 24px 24px 0 0; }
.pillars > div + div { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.pillars .n { font: 500 11px var(--f-mono); color: var(--teal-300); letter-spacing: .1em; }
.pillars h3 { font-size: 1.08rem; margin: 10px 0 6px; }
.pillars p { font-size: 14px; margin: 0; }
.light-pillars { border-top-color: var(--line); }
.light-pillars > div + div { border-left-color: var(--line); }
.light-pillars .n { color: var(--teal-700); }
.light-pillars p { color: var(--muted); }

/* ---------- Journey ---------- */
.journey { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-bottom: clamp(56px, 7vw, 96px); }
.journey::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--line); }
.journey::after { content: ""; position: absolute; left: 0; top: 22px; height: 3px; width: 0; background: linear-gradient(90deg, var(--teal-500), var(--teal-300)); transition: width 2.4s var(--ease); }
.journey.in::after { width: 100%; }
.journey li { position: relative; padding-right: 20px; }
.journey .node {
  width: 47px; height: 47px; border-radius: 50%; background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; font: 500 12px var(--f-mono); color: var(--ink); position: relative; z-index: 1; margin-bottom: 22px;
  transition: background .4s, color .4s, border-color .4s;
}
.journey.in li .node { background: var(--navy-900); color: var(--teal-300); border-color: var(--navy-900); }
.journey.in li:nth-child(2) .node { transition-delay: .4s; } .journey.in li:nth-child(3) .node { transition-delay: .8s; }
.journey.in li:nth-child(4) .node { transition-delay: 1.2s; } .journey.in li:nth-child(5) .node { transition-delay: 1.6s; }
.journey.in li:nth-child(6) .node { transition-delay: 2s; background: var(--teal-400); color: var(--navy-950); border-color: var(--teal-400); }
.journey h3 { font-size: 1.15rem; margin-bottom: 6px; }
.journey p { font-size: 14px; color: var(--muted); margin: 0; }

.cap-list { border-top: 1px solid var(--line); }
.cap-list li { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); transition: padding .3s var(--ease); }
.cap-list li:hover { padding-left: 8px; }
.cap-list .n { font: 500 11.5px var(--f-mono); color: var(--muted-2); }
.cap-list b { font: 600 1.05rem var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.cap-list span { font-size: 13.5px; color: var(--muted); text-align: right; }
.dark .cap-list, .navy .cap-list { border-top-color: var(--line-dark); }
.dark .cap-list li, .navy .cap-list li { border-bottom-color: var(--line-dark); }
.dark .cap-list b, .navy .cap-list b { color: #fff; }
.dark .cap-list .n, .navy .cap-list .n { color: var(--teal-300); }
.dark .cap-list span, .navy .cap-list span { color: var(--on-dark-3); }

.proof {
  margin-top: 28px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  padding: 22px 24px; border-radius: var(--r-sm); background: var(--navy-900); color: var(--on-dark-2); font-size: 14.5px;
}
.proof .k { font: 500 11px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-300); padding-top: 2px; }
.proof-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.proof p { margin: 0; color: #fff; }

/* ---------- MedCatalyst ---------- */
.equation {
  position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center;
  background: rgba(255,255,255,.97); border-radius: var(--r-sm); padding: 18px 20px; box-shadow: var(--shadow-lg);
}
.equation .term { text-align: center; }
.equation .term b { display: block; font: 600 1.02rem var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.equation .term span { font: 500 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.equation .op { font: 300 1.6rem var(--f-display); color: var(--teal-600); padding: 0 8px; }
.areas { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: 36px 0 40px; }
.areas > div { padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s; }
.areas > div:hover { background: var(--soft); }
.areas .n { font: 500 11px var(--f-mono); color: var(--teal-700); letter-spacing: .08em; }
.areas h3 { font-size: 1.08rem; margin: 12px 0 6px; }
.areas p { font-size: 14px; color: var(--muted); margin: 0; }
.dark .areas, .navy .areas { border-color: var(--line-dark); }
.dark .areas > div, .navy .areas > div { border-color: var(--line-dark); }
.dark .areas > div:hover, .navy .areas > div:hover { background: rgba(255,255,255,.03); }
.dark .areas .n, .navy .areas .n { color: var(--teal-300); }
.dark .areas p, .navy .areas p { color: var(--on-dark-2); }

/* ---------- Genome / scientific ---------- */
.sci { background: var(--navy-950); color: var(--on-dark-2); position: relative; overflow: hidden; isolation: isolate; }
.sci::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 24px 24px; -webkit-mask-image: radial-gradient(70% 70% at 75% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 75% 50%, #000, transparent);
}
.sci h2, .sci h3 { color: #fff; }
.feat-list li { display: grid; grid-template-columns: 52px 1fr; padding: 18px 0; border-top: 1px solid var(--line-dark); }
.feat-list li:last-child { border-bottom: 1px solid var(--line-dark); }
.feat-list .n { font: 500 11.5px var(--f-mono); color: var(--teal-300); padding-top: 3px; }
.feat-list h3 { font-size: 1.05rem; margin: 0 0 4px; }
.feat-list p { margin: 0; font-size: 14px; }
.feat-list.light li { border-color: var(--line); }
.feat-list.light .n { color: var(--teal-700); }
.feat-list.light p { color: var(--muted); }

.panel { background: var(--navy-850); border: 1px solid var(--line-dark); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); font-size: 13px; }
.panel-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line-dark); font: 500 11px var(--f-mono); color: var(--on-dark-3); letter-spacing: .04em; }
.panel-top .dots { display: flex; gap: 6px; }
.panel-top .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.15); }
.panel-top .live { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-300); }
.panel-top .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-400); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.panel-body { padding: 18px; display: grid; gap: 16px; }
.pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pipe div { padding: 10px; border-radius: var(--r-xs); background: rgba(255,255,255,.03); border: 1px solid var(--line-dark); }
.pipe small { display: block; font: 500 9.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 6px; }
.pipe b { font: 600 12px var(--f-display); color: #fff; display: block; line-height: 1.25; }
.pipe .ok { color: var(--teal-300); font: 500 10px var(--f-mono); margin-top: 6px; display: block; }
.pipe .run { color: var(--gold-400); }
.pipe .done { border-color: rgba(61, 207, 245,.3); }
.cov { background: rgba(255,255,255,.02); border: 1px solid var(--line-dark); border-radius: var(--r-xs); padding: 12px 14px; }
.cov .hd { display: flex; justify-content: space-between; font: 500 10px var(--f-mono); color: var(--on-dark-3); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.cov .seq { height: 64px; gap: 2px; }
.vtable { width: 100%; border-collapse: collapse; font: 500 12px var(--f-mono); }
.vtable th { text-align: left; font-weight: 500; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); padding: 0 8px 8px 0; border-bottom: 1px solid var(--line-dark); }
.vtable td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line-dark); color: var(--on-dark); }
.vtable tr:last-child td { border-bottom: 0; }
.pill-s { display: inline-block; padding: 3px 8px; border-radius: 2px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.pill-s.p { background: rgba(217,182,94,.16); color: var(--gold-400); }
.pill-s.v { background: rgba(127, 224, 255,.12); color: var(--teal-300); }
.pill-s.b { background: rgba(255,255,255,.07); color: var(--on-dark-2); }

/* ---------- Academy ---------- */
.audience { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: clamp(48px, 6vw, 80px); }
.audience > div { padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 48px 1fr; transition: background .3s; }
.audience > div:hover { background: var(--soft); }
.audience .n { font: 500 11.5px var(--f-mono); color: var(--teal-700); padding-top: 4px; }
.audience h3 { font-size: 1.1rem; margin: 0 0 4px; }
.audience p { font-size: 14px; color: var(--muted); margin: 0; }
.topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 36px; }
.topics .tag { height: 32px; padding: 0 12px; font-size: 11.5px; }

/* ---------- Integrated solutions ---------- */
.sol { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.sol-card { grid-column: span 3; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .3s; }
.sol-card.lg { grid-column: span 6; }
.sol-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: transparent; }
.sol-card .media { aspect-ratio: 4 / 3; overflow: hidden; position: relative; background: var(--navy-900); }
.sol-card.lg .media { aspect-ratio: 16 / 9; }
.sol-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.sol-card:hover .media img { transform: scale(1.05); }
.sol-card .media .idx { position: absolute; left: 14px; top: 14px; font: 500 10.5px var(--f-mono); letter-spacing: .1em; color: #fff; background: rgba(5, 10, 31,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 6px 9px; border-radius: var(--r-xs); }
.sol-card .body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sol-card h3 { font-size: 1.18rem; margin: 0; }
.sol-card.lg h3 { font-size: 1.5rem; }
.sol-card p { font-size: 14.5px; color: var(--muted); margin: 0; }
.sol-card .k { margin-top: auto; padding-top: 14px; font: 500 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.stats > div { padding: 32px 24px 8px 0; }
.stats > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.stat-n { font: 500 clamp(2.6rem, 4.6vw, 4.2rem)/1 var(--f-display); letter-spacing: -.045em; color: var(--ink); display: flex; align-items: baseline; gap: 2px; }
.stat-n sup { font-size: .45em; color: var(--teal-600); top: 0; position: relative; align-self: flex-start; margin-top: .25em; }
.stat-l { margin-top: 14px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.stat-k { font: 500 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); margin-bottom: 18px; display: block; }
.source { margin-top: 32px; font: 500 11px var(--f-mono); color: var(--muted-2); letter-spacing: .04em; }
.dark .stats, .navy .stats { border-top-color: var(--line-dark); }
.dark .stats > div + div, .navy .stats > div + div { border-left-color: var(--line-dark); }
.dark .stat-n, .navy .stat-n { color: #fff; }
.dark .stat-n sup, .navy .stat-n sup { color: var(--teal-300); }
.dark .stat-l, .navy .stat-l { color: var(--on-dark-2); }
.dark .stat-k, .navy .stat-k { color: var(--teal-300); }

/* ---------- World map ---------- */
.map-wrap { position: relative; margin: 0 auto; max-width: 1180px; }
.map-wrap svg { width: 100%; height: auto; overflow: visible; }
.map-dots { color: rgba(255, 255, 255, .16); }
.map-wrap.light .map-dots { color: #CBD4DF; }
.arc { fill: none; stroke: url(#arcGrad); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.map-wrap.in .arc { animation: draw 2.4s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.arc-pulse { fill: var(--teal-300); }
.city circle.core { fill: var(--teal-400); }
.city circle.hub { fill: var(--gold-400); }
.city text { font: 500 11px var(--f-mono); letter-spacing: .08em; fill: rgba(255,255,255,.85); text-transform: uppercase; }
.map-wrap.light .city text { fill: var(--ink-2); }
.stakeholders { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--line-dark); margin-top: clamp(40px, 5vw, 64px); }
.stakeholders > div { padding: 22px 16px 0 0; }
.stakeholders > div + div { padding-left: 16px; border-left: 1px solid var(--line-dark); }
.stakeholders b { display: block; color: #fff; font: 600 1rem var(--f-display); letter-spacing: -.01em; margin-bottom: 4px; }
.stakeholders span { font-size: 13px; color: var(--on-dark-3); line-height: 1.45; display: block; }

/* ---------- Media & insights ---------- */
.media-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; }
.feature-video { position: relative; display: block; width: 100%; text-align: left; border-radius: var(--r); overflow: hidden; background: var(--navy-900); aspect-ratio: 16 / 11; color: #fff; }
.feature-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.feature-video:hover img { transform: scale(1.03); }
.feature-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 10, 31,.1) 30%, rgba(5, 10, 31,.92)); }
.feature-video .meta { position: absolute; left: 32px; right: 32px; bottom: 30px; z-index: 2; }
.feature-video .meta .kick { font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-300); }
.feature-video .meta h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 10px 0 8px; max-width: 560px; }
.feature-video .meta p { color: var(--on-dark-2); margin: 0; font-size: 14.5px; max-width: 520px; }
.play {
  position: absolute; z-index: 2; left: 32px; top: 32px; display: inline-flex; align-items: center; gap: 12px;
  font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.play i { width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--navy-950); display: grid; place-items: center; transition: transform .4s var(--ease); }
.play i svg { width: 20px; height: 20px; margin-left: 3px; }
.feature-video:hover .play i { transform: scale(1.08); }
.ins-list { display: grid; gap: 0; align-content: start; border-top: 1px solid var(--line); }
.ins {
  display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line);
  text-align: left; width: 100%; align-items: start;
}
.ins .th { aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; position: relative; background: var(--navy-900); }
.ins .th img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ins:hover .th img { transform: scale(1.06); }
.ins .th .mini { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 10, 31,.3); color: #fff; }
.ins .th .mini svg { width: 26px; height: 26px; }
.ins .kick { font: 500 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); }
.ins h3 { font-size: 1.08rem; line-height: 1.35; margin: 8px 0 6px; transition: color .2s; }
.ins:hover h3 { color: var(--teal-700); }
.ins .dt { font-size: 13px; color: var(--muted-2); }

/* ---------- Final CTA ---------- */
.final { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-950); color: var(--on-dark-2); padding: calc(var(--section-y) * 1.15) 0; }
.final .bg { position: absolute; inset: 0; z-index: -2; }
.final .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 10, 31,.97) 0%, rgba(5, 10, 31,.86) 45%, rgba(5, 10, 31,.55) 100%); }
.final::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 80px 80px; }
.final h2 { color: #fff; max-width: 860px; }
.final p { max-width: 640px; font-size: 1.15rem; margin-bottom: 40px; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-950); color: var(--on-dark-2); padding: 88px 0 36px; font-size: 14.5px; border-top: 1px solid var(--line-dark); }
.footer-top { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; padding-bottom: 56px; border-bottom: 1px solid var(--line-dark); }
.footer-top img { height: 44px; width: auto; margin-bottom: 22px; }
.footer-top p { max-width: 460px; margin: 0; font-size: 15px; }
.footer-cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.3fr; gap: 32px; padding: 56px 0; }
.footer h5 { font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-300); margin: 0 0 20px; }
.footer-cols ul { display: grid; gap: 11px; }
.footer-cols a { transition: color .2s; }
.footer-cols a:hover { color: #fff; }
.footer .addr { line-height: 1.6; }
.socials { display: flex; gap: 8px; margin-top: 18px; }
.socials a { width: 40px; height: 40px; border-radius: var(--r-xs); border: 1px solid var(--line-dark); display: grid; place-items: center; color: #fff; transition: background .2s, border-color .2s, color .2s; }
.socials a:hover { background: var(--teal-400); border-color: var(--teal-400); color: var(--navy-950); }
.socials svg { width: 16px; height: 16px; }
.socials.light a { border-color: var(--line); color: var(--ink); }
.socials.light a:hover { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.presence-line { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 22px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); }
.presence-line b { color: var(--teal-300); font-weight: 500; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-size: 13px; color: var(--on-dark-3); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-bottom a:hover { color: #fff; }
.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 46px; height: 46px; border-radius: var(--r-xs); background: var(--navy-900); color: #fff; display: grid; place-items: center; border: 1px solid var(--line-dark); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease), background .2s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--teal-400); color: var(--navy-950); }
.to-top svg { width: 18px; height: 18px; }

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-950); color: var(--on-dark-2); padding: calc(var(--header-h) + clamp(48px, min(9vw, 12vh), 112px)) 0 0; }
.page-hero .bg { position: absolute; inset: 0; z-index: -2; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 10, 31,.98) 0%, rgba(5, 10, 31,.9) 42%, rgba(5, 10, 31,.45) 100%), linear-gradient(0deg, rgba(5, 10, 31,.9), transparent 40%); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.page-hero h1 { color: #fff; max-width: 900px; margin-bottom: 24px; }
.page-hero h1 em { font-style: normal; color: var(--teal-300); }
.page-hero .lead { max-width: 640px; }
.page-hero .hero-actions { margin-top: 36px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 28px; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: var(--teal-300); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line-dark); }
.facts > div { padding: 24px 24px 32px 0; }
.facts > div + div { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.facts b { display: block; font: 500 1.7rem/1.1 var(--f-display); color: #fff; letter-spacing: -.03em; margin-bottom: 6px; }
.facts > div > span { font-size: 13.5px; color: var(--on-dark-3); }
.page-hero.short { padding-bottom: var(--section-y); }

/* ---------- Generic blocks ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tiles.two { grid-template-columns: repeat(2, 1fr); }
.tiles.four { grid-template-columns: repeat(4, 1fr); }
.tile { padding: 32px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .3s, box-shadow .4s var(--ease); display: flex; flex-direction: column; }
.tile:hover { border-color: transparent; box-shadow: var(--shadow); }
.tile .n { font: 500 11.5px var(--f-mono); color: var(--teal-700); letter-spacing: .08em; margin-bottom: 36px; }
.tile h3 { font-size: 1.25rem; margin-bottom: 10px; }
.tile p { color: var(--muted); font-size: 15px; margin: 0; }
.tile ul { margin-top: 18px; display: grid; gap: 8px; }
.tile ul li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--ink-2); }
.tile ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 1px; background: var(--teal-600); }
.tile .more { margin-top: auto; padding-top: 24px; align-self: flex-start; }
.dark .tile, .navy .tile { background: rgba(255,255,255,.025); border-color: var(--line-dark); }
.dark .tile p, .navy .tile p { color: var(--on-dark-2); }
.dark .tile .n, .navy .tile .n { color: var(--teal-300); }
.dark .tile ul li, .navy .tile ul li { color: var(--on-dark); }

.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px 1fr 28px; align-items: center; padding: 24px 0; font: 600 1.2rem var(--f-display); color: var(--ink); letter-spacing: -.015em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .n { font: 500 11.5px var(--f-mono); color: var(--teal-700); }
.acc summary .pm { width: 28px; height: 28px; position: relative; }
.acc summary .pm::before, .acc summary .pm::after { content: ""; position: absolute; left: 7px; right: 7px; top: 13px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.acc summary .pm::after { transform: rotate(90deg); }
.acc details[open] summary .pm::after { transform: rotate(0); }
.acc .content { padding: 0 28px 28px 56px; color: var(--muted); max-width: 820px; }
.acc .content p:last-child { margin: 0; }
.dark .acc, .navy .acc { border-top-color: var(--line-dark); }
.dark .acc details, .navy .acc details { border-bottom-color: var(--line-dark); }
.dark .acc summary, .navy .acc summary { color: #fff; }
.dark .acc summary .n, .navy .acc summary .n { color: var(--teal-300); }
.dark .acc summary .pm::before, .dark .acc summary .pm::after, .navy .acc summary .pm::before, .navy .acc summary .pm::after { background: #fff; }
.dark .acc .content, .navy .acc .content { color: var(--on-dark-2); }

.timeline { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.timeline > div { padding: 28px 24px 0 0; position: relative; }
.timeline > div::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--teal-600); }
.timeline > div:last-child::before { background: var(--gold-500); }
.timeline .y { font: 500 2rem/1 var(--f-display); letter-spacing: -.04em; color: var(--ink); margin-bottom: 12px; }
.timeline h3 { font-size: 1rem; margin-bottom: 6px; }
.timeline p { font-size: 14px; color: var(--muted); margin: 0; }
.dark .timeline, .navy .timeline { border-top-color: var(--line-dark); }
.dark .timeline .y, .navy .timeline .y { color: #fff; }
.dark .timeline p, .navy .timeline p { color: var(--on-dark-2); }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.step { padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.step .n { font: 500 11.5px var(--f-mono); color: var(--teal-700); }
.step h3 { font-size: 1.05rem; margin: 26px 0 6px; }
.step p { font-size: 14px; color: var(--muted); margin: 0; }
.dark .step, .navy .step { background: rgba(255,255,255,.025); border-color: var(--line-dark); }
.dark .step .n, .navy .step .n { color: var(--teal-300); }
.dark .step p, .navy .step p { color: var(--on-dark-2); }

.quote-xl { max-width: 980px; }
.quote-xl blockquote { margin: 0; font: 500 clamp(1.7rem, 3.4vw, 2.8rem)/1.25 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.dark .quote-xl blockquote, .navy .quote-xl blockquote { color: #fff; }
.quote-xl cite { display: block; margin-top: 24px; font: 500 11.5px var(--f-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); }
.dark .quote-xl cite, .navy .quote-xl cite { color: var(--teal-300); }

.certs { display: flex; flex-wrap: wrap; gap: 12px; }
.certs .cert { height: 92px; padding: 14px 24px; border-radius: var(--r-sm); background: #fff; display: grid; place-items: center; }
.certs img { max-height: 62px; width: auto; }
.logos-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.logos-row a { height: 120px; display: grid; place-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px; transition: background .3s; }
.logos-row a:hover { background: var(--soft); }
.logos-row img { max-height: 44px; width: auto; filter: grayscale(1) contrast(1.1); opacity: .7; transition: filter .3s, opacity .3s; }
.logos-row a:hover img { filter: none; opacity: 1; }
.logos-row .yt { display: flex; align-items: center; gap: 8px; font: 700 1.3rem var(--f-display); color: #666; letter-spacing: -.03em; }
.logos-row .yt svg { width: 32px; height: 32px; }

.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v-card { display: block; text-align: left; width: 100%; }
.v-card .th { position: relative; aspect-ratio: 16/9; border-radius: var(--r-sm); overflow: hidden; background: var(--navy-800); margin-bottom: 14px; }
.v-card .th img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.v-card:hover .th img { transform: scale(1.05); }
.v-card .th .mini { position: absolute; left: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--navy-950); display: grid; place-items: center; }
.v-card .th .mini svg { width: 16px; height: 16px; margin-left: 2px; }
.v-card .th .dur { position: absolute; right: 12px; bottom: 12px; font: 500 11px var(--f-mono); color: #fff; background: rgba(5, 10, 31,.7); padding: 4px 7px; border-radius: 2px; }
.v-card h3 { font-size: 1.02rem; line-height: 1.35; margin: 0 0 4px; }
.v-card span { font-size: 13px; color: var(--on-dark-3); }

/* ---------- Forms ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .full { grid-column: 1 / -1; }
.field label, .field .lbl { display: block; font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; height: 52px; padding: 0 16px; border-radius: var(--r-xs); border: 1px solid var(--line); background: #fff;
  font: 400 15.5px var(--f-body); color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.field textarea { height: auto; min-height: 150px; padding: 14px 16px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(14, 140, 196, .14); }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice label { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-xs); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); transition: all .2s; }
.choice input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--teal-400); outline-offset: 2px; }
/* validation + sending states (assets/js/forms.js) */
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #D14343; }
.field.has-error input:focus, .field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(209, 67, 67, .14); }
.field-error { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: #C2362F; }
.field-error[hidden], .form-status[hidden] { display: none; }
.newsletter + .field-error { color: #FF8A80; margin-top: 10px; }
.newsletter input[aria-invalid] { border-color: #FF8A80; }
.form-status { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: var(--r-xs); background: #FDECEA; color: #A12A24; font-size: 14px; line-height: 1.5; }
.btn:disabled { opacity: .7; cursor: progress; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-ok { display: none; padding: 14px 16px; border-radius: var(--r-xs); background: var(--teal-50); color: var(--teal-700); font-weight: 500; font-size: 14.5px; }
.form-ok.show { display: block; }
.form-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow); }
.newsletter { display: flex; gap: 8px; max-width: 480px; }
.newsletter input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border-radius: var(--r-xs); border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); color: #fff; font: inherit; }
.newsletter input::placeholder { color: var(--on-dark-3); }
.newsletter input:focus { outline: none; border-color: var(--teal-400); }

.info-rows { border-top: 1px solid var(--line); }
.info-rows > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.info-rows .k { font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); padding-top: 4px; }
.info-rows .v { margin: 0; color: var(--ink); font-size: 16px; }
.info-rows a:hover { color: var(--teal-700); }
.map-embed { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); height: 420px; background: var(--soft); }
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.4); }

/* ---------- Blog ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
.post { display: flex; flex-direction: column; }
.post .th { aspect-ratio: 16 / 10; border-radius: var(--r-sm); overflow: hidden; background: var(--navy-900); margin-bottom: 20px; position: relative; }
.post .th img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.post:hover .th img { transform: scale(1.04); }
.post .th.ph { display: flex; align-items: flex-end; padding: 22px; background: var(--navy-900); }
.post .th.ph::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 22px 22px; }
.post .th.ph::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(61, 207, 245,.35); box-shadow: 0 0 0 30px rgba(61, 207, 245,.04), 0 0 0 60px rgba(61, 207, 245,.03); }
.post .th.ph span { position: relative; font: 500 1.35rem/1.2 var(--f-display); letter-spacing: -.02em; color: #fff; max-width: 85%; }
.post .th.ph.t2 { background: var(--navy-800); }
.post .th.ph.t2::after { border-color: rgba(217,182,94,.4); box-shadow: 0 0 0 30px rgba(217,182,94,.04), 0 0 0 60px rgba(217,182,94,.03); }
.post .kick { font: 500 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); margin-bottom: 10px; }
.post h3 { font-size: 1.2rem; line-height: 1.32; margin: 0 0 10px; transition: color .2s; }
.post:hover h3 { color: var(--teal-700); }
.post p { font-size: 14.5px; color: var(--muted); margin: 0 0 14px; }
.post .dt { margin-top: auto; font-size: 13px; color: var(--muted-2); }
.post-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding-bottom: clamp(56px, 6vw, 80px); margin-bottom: clamp(56px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.post-hero .th { aspect-ratio: 16/10; border-radius: var(--r-sm); overflow: hidden; }
.post-hero .th img { width: 100%; height: 100%; object-fit: cover; }
.post-hero h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 0 0 16px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 48px; }
.filter { height: 38px; padding: 0 14px; border-radius: var(--r-xs); border: 1px solid var(--line); font: 500 13.5px var(--f-body); color: var(--ink-2); transition: all .2s; }
.filter:hover { border-color: var(--ink); }
.filter.active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

.article { max-width: 740px; margin: 0 auto; }
.article-cover { max-width: 1080px; margin: 0 auto; aspect-ratio: 16 / 8; border-radius: var(--r-sm); overflow: hidden; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; font: 500 11.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-3); }
.byline b { color: #fff; font-weight: 500; }
.prose { font-size: 1.12rem; line-height: 1.82; color: var(--ink-2); }
.prose > p:first-child { font-size: 1.3rem; line-height: 1.6; color: var(--ink); }
.prose h2 { font-size: 1.65rem; margin: 2em 0 .6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.3rem; margin: 1.8em 0 .5em; }
.prose h4 { font-size: 1.1rem; margin: 1.6em 0 .4em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 0 0 .5em; padding-left: .2em; }
.prose li::marker { color: var(--teal-600); }
.prose a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.prose figure { margin: 2em 0; border-radius: var(--r-sm); overflow: hidden; background: var(--soft); }
.prose figure img { width: 100%; height: auto; }
.prose .cap { font-size: 14px; color: var(--muted); margin-top: -1.2em; }
.prose blockquote { margin: 2.2em 0; padding: 4px 0 4px 28px; border-left: 2px solid var(--teal-500); font: 500 1.5rem/1.4 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.share { display: flex; align-items: center; gap: 8px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.share .k { font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 10px; }
.share a { width: 40px; height: 40px; border-radius: var(--r-xs); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); transition: all .2s; }
.share a:hover { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.share svg { width: 16px; height: 16px; }

/* ---------- Video modal ---------- */
.modal { position: fixed; inset: 0; z-index: 300; background: rgba(5, 10, 31,.92); display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.open { display: flex; animation: fade .3s; }
.modal-box { width: min(1120px, 100%); aspect-ratio: 16/9; background: #000; border-radius: var(--r-sm); overflow: hidden; }
.modal-box iframe { width: 100%; height: 100%; border: 0; }
.modal-box video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.modal-x { position: absolute; top: 20px; right: 20px; width: 46px; height: 46px; border-radius: var(--r-xs); background: #fff; color: var(--ink); display: grid; place-items: center; }
.modal-x svg { width: 20px; height: 20px; }
@keyframes fade { from { opacity: 0; } }

/* ---------- Motion ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; } .rv.d4 { transition-delay: .32s; } .rv.d5 { transition-delay: .4s; }
/* .rv-img reveal is driven by motion.js (ScrollTrigger); images stay visible without it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  .rv-img { clip-path: none; }
  .arc { stroke-dashoffset: 0; }
  .journey::after { width: 100%; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav, .header-cta .btn { display: none; }
  .menu-btn { display: grid; }
  .eco-card.row { flex-direction: column; }
  .eco-card.row .eco-media { width: 100%; height: 170px; }
  .footer-cols { grid-template-columns: 1fr 1fr 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .stats > div:nth-child(n+4) { border-top: 1px solid var(--line); margin-top: 8px; }
  .dark .stats > div:nth-child(n+4), .navy .stats > div:nth-child(n+4) { border-top-color: var(--line-dark); }
  .stakeholders { grid-template-columns: repeat(4, 1fr); row-gap: 24px; }
  .stakeholders > div:nth-child(5) { padding-left: 0; border-left: 0; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .timeline { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
}
@media (max-width: 980px) {
  :root { --gutter: 24px; }
  .hero-grid, .split, .split.wide-left, .split.wide-right, .mp-grid, .media-grid, .post-hero { grid-template-columns: 1fr; }
  .hero-visual { max-width: 560px; margin: 0 auto; }
  .presence-grid { grid-template-columns: 1fr; gap: 36px; }
  .track ol { grid-template-columns: repeat(4, 1fr); row-gap: 28px; }
  .track-line { display: none; }
  .section-head { grid-template-columns: 1fr; }
  .eco { grid-template-columns: 1fr 1fr; }
  .eco-card.feature { grid-column: span 2; grid-row: auto; min-height: 520px; }
  .eco-card.row, .eco-card.stack { grid-column: span 1; }
  .eco-card.data { grid-column: span 2; }
  .journey { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .journey::before, .journey::after { display: none; }
  .sol-card, .sol-card.lg { grid-column: span 6; }
  .audience { grid-template-columns: 1fr 1fr; }
  .tiles, .tiles.four { grid-template-columns: 1fr 1fr; }
  .video-grid, .posts { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-dark); }
  .facts > div:nth-child(4) { border-top: 1px solid var(--line-dark); }
  .mp-badge { left: 12px; }
  .footer-top { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 680px) {
  :root { --gutter: 18px; --header-h: 66px; }
  body { font-size: 16px; }
  .logo, .logo img { height: 34px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .hv-chip.c2 { display: none; }
  .hv-chip.c1 { left: 26%; top: 50%; }
  .hv-data .ft { display: none; }
  .track ol { grid-template-columns: repeat(2, 1fr); }
  .eco { grid-template-columns: 1fr; }
  .eco-card.feature, .eco-card.row, .eco-card.stack, .eco-card.data { grid-column: auto; }
  .eco-card.feature { min-height: 480px; }
  .eco-card.data { flex-direction: column; }
  .eco-card.data .eco-body { width: auto; }
  .eco-card.data .viz { padding: 0 26px 26px; }
  .pillars { grid-template-columns: 1fr; }
  .pillars > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-dark); margin-top: 20px; }
  .light-pillars > div + div { border-top-color: var(--line); }
  .journey { grid-template-columns: 1fr 1fr; }
  .cap-list li { grid-template-columns: 40px 1fr; }
  .cap-list li > span:last-child { display: none; }
  .cap-list li:hover { padding-left: 0; }
  .areas { grid-template-columns: 1fr; }
  .equation { grid-template-columns: 1fr; gap: 4px; padding: 14px; }
  .equation .op { padding: 0; text-align: center; font-size: 1.2rem; }
  .pipe { grid-template-columns: repeat(2, 1fr); }
  .pipe div:last-child { grid-column: span 2; }
  .audience { grid-template-columns: 1fr; }
  .sol-card, .sol-card.lg { grid-column: span 12; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div { padding-left: 0 !important; border-left: 0 !important; padding-right: 12px; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 8px; }
  .dark .stats > div:nth-child(n+3), .navy .stats > div:nth-child(n+3) { border-top-color: var(--line-dark); }
  .stakeholders { grid-template-columns: 1fr 1fr; }
  .stakeholders > div { padding-left: 0 !important; border-left: 0 !important; }
  .city text { font-size: 18px; }
  .ins { grid-template-columns: 110px 1fr; gap: 16px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-cols > div:first-child { grid-column: 1 / -1; }
  .tiles, .tiles.two, .tiles.four, .video-grid, .posts, .steps, .timeline { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .form { grid-template-columns: 1fr; }
  .logos-row { grid-template-columns: 1fr 1fr; }
  .info-rows > div { grid-template-columns: 1fr; gap: 4px; }
  .acc summary { grid-template-columns: 40px 1fr 28px; font-size: 1.05rem; }
  .acc .content { padding: 0 0 24px 40px; }
  .newsletter { flex-direction: column; }
  .feature-video { aspect-ratio: 4 / 5; }
  .feature-video .meta { left: 22px; right: 22px; bottom: 22px; }
  .play { left: 22px; top: 22px; }
}
.sci .lead { color: var(--on-dark-2); }
@media (max-width: 680px) {
  .hv-chip { display: none; }
  .hero .label { letter-spacing: .08em; font-size: 11px; }
  .track ol { row-gap: 18px; }
  .track li { padding-top: 22px; }
}
.v-row { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; }
.v-row .th { margin: 0; }
@media (max-width: 680px) { .v-row { grid-template-columns: 120px 1fr; gap: 14px; } .v-row .th .mini { width: 32px; height: 32px; left: 8px; bottom: 8px; } }

/* dark-surface contrast for shared components */
.hero .lead, .page-hero .lead, .final p, .sci .lead { color: var(--on-dark-2); }
.hero .label, .page-hero .label, .final .label, .sci .label { color: var(--teal-300); }
.hero .label::before, .page-hero .label::before, .final .label::before, .sci .label::before { background: var(--teal-400); }
.choice label { font: inherit; text-transform: none; letter-spacing: 0; margin: 0; color: inherit; }
.choice span { font: 500 14px var(--f-body); }

/* ==========================================================================
   Homepage sections carried over from the live site:
   statement mission · Med X feed · MedParliament film + TV · press + contact
   ========================================================================== */

/* ---------- Statement mission line ---------- */
.statement .mission { max-width: 760px; margin: 36px 0 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; color: var(--muted); }
.statement .mission strong { color: var(--ink); background: linear-gradient(transparent 62%, rgba(61, 207, 245, .25) 62%); }

/* ---------- Med X ---------- */
.medx .section-head { align-items: end; }
.x-profile {
  display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px -20px rgba(10, 19, 51, .4);
  transition: box-shadow .3s, transform .3s var(--ease);
}
.x-profile:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(10, 19, 51, .45); }
.x-profile img { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; object-fit: cover; }
.x-profile b { display: flex; align-items: center; gap: 4px; font: 600 15px var(--f-display); color: var(--ink); }
.x-profile small { display: block; font-size: 13px; color: var(--muted); }
.x-follow { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--navy-950); color: #fff; font: 600 14px var(--f-body); margin-left: 6px; }
.x-follow .xl { width: 14px; height: 14px; }
.xv { width: 17px; height: 17px; flex-shrink: 0; }
.xl { width: 18px; height: 18px; }

.xgrid { columns: 3 320px; column-gap: 20px; }
/* One column on phones: plain block flow (Safari mis-fragments a single CSS column) */
@media (max-width: 719px) { .xgrid { columns: auto; } }
.xpost {
  break-inside: avoid; margin: 0 0 20px; display: flex; flex-direction: column; gap: 14px;
  padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.xpost:hover { transform: translateY(-4px); border-color: rgba(74, 107, 255, .25); box-shadow: 0 30px 60px -36px rgba(10, 19, 51, .4); }
.xhead { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; }
.xav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; background: #fff; }
.xhead b { display: flex; align-items: center; gap: 4px; font: 600 14.5px var(--f-display); color: var(--ink); }
.xhead span { font-size: 12.5px; color: var(--muted); }
.xbrand { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background .2s, color .2s; }
.xbrand:hover { background: var(--navy-950); color: #fff; }
.xbrand .xl { width: 16px; height: 16px; }
.xtext {
  margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
}
.xm { color: #1D74C8; font-weight: 500; }
.xmore { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px var(--f-body); color: var(--teal-700); align-self: flex-start; }
.xmore svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.xmore:hover svg { transform: translate(2px, -2px); }
.xmedia { position: relative; display: block; margin: -8px -8px 0; border-radius: 12px; overflow: hidden; background: var(--navy-900); }
.xmedia img { width: 100%; height: auto; display: block; transition: transform .8s var(--ease); }
.xpost:hover .xmedia img { transform: scale(1.03); }
.xpost.is-video .xmedia { aspect-ratio: 4 / 5; }
.xpost.is-video .xmedia img { height: 100%; object-fit: cover; }
.xplay { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.95); color: var(--navy-950); box-shadow: 0 0 0 10px rgba(255,255,255,.18); transition: transform .4s var(--ease); }
.xplay svg { width: 22px; height: 22px; margin-left: 3px; }
.xpost:hover .xplay { transform: scale(1.08); }
.xpost.has-media .xtext { -webkit-line-clamp: 4; }

.xlive { display: none; min-height: 400px; }
.medx.is-live .xlive { display: block; animation: fade .6s; }
.medx.is-live .xgrid { display: none; }

/* ---------- Film: Welcome to MedParliament ---------- */
.film { position: relative; background: var(--navy-950); color: var(--on-dark-2); padding: var(--section-y) 0 calc(var(--section-y) * .9); overflow: hidden; isolation: isolate; }
.film::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 30%, rgba(74, 107, 255, .2), transparent 70%), radial-gradient(40% 40% at 90% 90%, rgba(124, 92, 255, .14), transparent 70%); }
.film h2 { color: #fff; margin: 0; }
.film .label { color: var(--teal-300); }
.film .label::before { background: var(--teal-400); }
.film-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.film-head .lead { max-width: 440px; margin: 0; color: var(--on-dark-2); }
.film-stage {
  position: relative; aspect-ratio: 16 / 9; max-height: 78vh; width: 100%; border-radius: 22px; overflow: hidden;
  background: #000; box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08);
}
.film-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,10,31,.35) 0%, transparent 25%, transparent 55%, rgba(5,10,31,.9) 100%); }
.film-cap { position: absolute; left: clamp(20px, 3vw, 40px); top: clamp(20px, 3vw, 36px); z-index: 2; color: #fff; max-width: 70%; }
.film-cap b { display: block; font: 600 clamp(1.1rem, 2vw, 1.6rem)/1.2 var(--f-display); letter-spacing: -.02em; margin: 10px 0 4px; }
.film-cap small { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.film-live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(5,10,31,.55); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.film-live i { width: 7px; height: 7px; border-radius: 50%; background: #FF4D5E; animation: blink 1.6s infinite; }
.film-ui { position: absolute; left: clamp(16px, 2.4vw, 32px); right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 28px); z-index: 2; display: flex; align-items: center; gap: 12px; color: #fff; }
.film-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; transition: background .25s, transform .25s var(--ease); flex-shrink: 0; }
.film-btn:hover { background: rgba(255,255,255,.24); transform: scale(1.05); }
.film-btn svg { width: 18px; height: 18px; }

/* ---------- MEDACH framework ---------- */
.medach { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-950); }
.medach::before {
  content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(60% 55% at 12% 6%, rgba(74, 107, 255, .22), transparent 60%),
    radial-gradient(55% 60% at 92% 96%, rgba(124, 92, 255, .20), transparent 65%),
    linear-gradient(180deg, #060B24 0%, #050A1F 100%);
}
.medach::after {
  content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(78% 60% at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(78% 60% at 50% 0%, #000, transparent 72%);
}
.medach .ma-aurora { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.medach .ma-aurora span { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; will-change: transform; }
.medach .ma-aurora span:nth-child(1) { width: 32vw; height: 32vw; left: -8vw; top: -10vw; background: radial-gradient(circle, rgba(61, 207, 245, .30), transparent 65%); animation: drift1 18s ease-in-out infinite alternate; }
.medach .ma-aurora span:nth-child(2) { width: 28vw; height: 28vw; right: -6vw; bottom: -12vw; background: radial-gradient(circle, rgba(124, 92, 255, .28), transparent 65%); animation: drift2 22s ease-in-out infinite alternate; }
.medach h2 { color: #fff; }
.medach .lead { color: var(--on-dark-2); }
.medach .lead strong { color: #fff; }
.medach .section-head { align-items: center; }

/* Spelled-out wordmark in the header (right side) */
.ma-spell { display: flex; gap: clamp(6px, .8vw, 14px); }
.ma-spell span {
  font: 200 clamp(2.2rem, 3.4vw, 3.6rem)/1 var(--f-display); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(127, 224, 255, .34); background-clip: text;
}
.ma-spell span:nth-child(odd) { -webkit-text-stroke-color: rgba(164, 139, 255, .34); }

.medach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ma-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: clamp(26px, 2.4vw, 40px); border-radius: 16px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line-dark);
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.ma-card::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--grad-accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--ease); z-index: 2;
}
.ma-card:hover { background: rgba(255, 255, 255, .055); border-color: rgba(127, 224, 255, .26); }
.ma-card:hover::after { transform: scaleX(1); }
.ma-letter {
  font: 200 clamp(3.4rem, 4.6vw, 5rem)/.82 var(--f-display); letter-spacing: -.05em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: clamp(18px, 2vw, 30px); align-self: flex-start;
  transition: transform .5s var(--ease), filter .4s;
}
.ma-card:hover .ma-letter { transform: translateY(-3px) scale(1.04); filter: drop-shadow(0 10px 26px rgba(61, 207, 245, .45)); }
.ma-body h3 { color: #fff; font: 600 1.3rem/1.2 var(--f-display); letter-spacing: -.02em; margin: 0 0 10px; }
.ma-body p { margin: 0; color: var(--on-dark-2); font-size: 15px; line-height: 1.6; }
.ma-body .more { margin-top: 18px; color: var(--teal-300); }
.ma-body .more:hover { color: #fff; }

@media (max-width: 980px) {
  .ma-spell { display: none; }
  .medach-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .medach-grid { grid-template-columns: 1fr; }
}

/* ---------- Leadership ---------- */
.lead-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.lead-figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: var(--navy-900); box-shadow: var(--shadow); }
.lead-figure img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.lead-figure::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgba(5, 10, 31, .78)); }
.lead-figure figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; color: #fff; font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.lead-people { display: grid; gap: 16px; }
.lead-card { padding: clamp(24px, 2.4vw, 34px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .3s, box-shadow .4s var(--ease); }
.lead-card:hover { border-color: transparent; box-shadow: var(--shadow); }
.lead-card .role { font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); }
.lead-card h3 { font-size: 1.4rem; letter-spacing: -.02em; margin: 12px 0 8px; }
.lead-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 860px) { .lead-grid { grid-template-columns: 1fr; } }

/* ---------- Impact heritage photos ---------- */
.impact-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: clamp(28px, 3vw, 44px) 0; }
.impact-shots figure { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--navy-900); }
.impact-shots img { width: 100%; height: 100%; object-fit: cover; }
.impact-shots figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5, 10, 31, .72)); }
.impact-shots figcaption { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; color: #fff; font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 640px) { .impact-shots { grid-template-columns: 1fr; } }
.film-btn .i-play, .film-btn .i-on { display: none; }
.film-stage.paused .film-btn .i-pause { display: none; }
.film-stage.paused .film-btn .i-play { display: block; }
.film-stage.sound .film-btn .i-off { display: none; }
.film-stage.sound .film-btn .i-on { display: block; }
.film-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.film-bar i { display: block; height: 100%; width: 0; background: var(--grad-accent); }
.film-time { font: 500 11.5px var(--f-mono); color: rgba(255,255,255,.75); min-width: 44px; }
.film-full { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; background: #fff; color: var(--navy-950); font: 600 14px var(--f-body); white-space: nowrap; transition: transform .25s var(--ease); }
.film-full:hover { transform: translateY(-2px); }
.film-full svg { width: 15px; height: 15px; }

.tv { margin-top: clamp(48px, 6vw, 80px); }
.tv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.tv-head .label { margin: 0; }
.tv-nav { display: flex; gap: 8px; }
.tv-nav .arrow-btn { border-color: rgba(255,255,255,.25); color: #fff; }
.tv-nav .arrow-btn:hover { background: #fff; color: var(--navy-950); }
.tv-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.tv-track::-webkit-scrollbar { display: none; }
.tv-card { flex: 0 0 clamp(250px, 24vw, 320px); scroll-snap-align: start; color: #fff; }
.tv-card .th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--navy-800); margin-bottom: 14px; }
.tv-card .th img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tv-card:hover .th img { transform: scale(1.06); }
.tv-card .mini { position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--navy-950); display: grid; place-items: center; }
.tv-card .mini svg { width: 15px; height: 15px; margin-left: 2px; }
.tv-card .dur { position: absolute; right: 10px; bottom: 10px; font: 500 11px var(--f-mono); background: rgba(5,10,31,.75); padding: 4px 7px; border-radius: 4px; }
.tv-card b { display: block; font: 600 1rem/1.35 var(--f-display); letter-spacing: -.01em; margin-bottom: 4px; }
.tv-card small { font-size: 13px; color: var(--on-dark-3); }

/* ---------- In the news (press cards, logos in original brand colours) ---------- */
#get-in-touch { padding-top: var(--section-y); }
.press { margin-bottom: var(--section-y); }
.press-head { display: grid; grid-template-columns: 1fr minmax(260px, 420px); gap: 32px; align-items: end; margin-bottom: clamp(32px, 4vw, 48px); }
.press-head .h2 { margin: 0; }
.press-head .lead { margin: 0; }
.press-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pcard {
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); color: var(--ink);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.pcard:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 34px 60px -34px rgba(10, 19, 51, .45); }
.plogo { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--brand); overflow: hidden; }
.plogo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .7s var(--ease); }
.pcard:hover .plogo img { transform: scale(1.05); }
.pbody { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; border-top: 3px solid var(--brand); }
.pmeta { font: 500 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pbody b { font: 600 1.05rem/1.35 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.plink { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px var(--f-body); color: var(--teal-700); }
.plink svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.pcard:hover .plink svg { transform: translate(2px, -2px); }

@media (max-width: 980px) {
  .film-head { grid-template-columns: 1fr; }
  .press-head { grid-template-columns: 1fr; }
  .press-grid { grid-template-columns: repeat(2, 1fr); }
  .medx .section-head { grid-template-columns: 1fr; }
  .x-profile { justify-self: start; }
}
@media (max-width: 680px) {
  .press-grid { grid-template-columns: 1fr; }
  .film-stage { aspect-ratio: 4 / 5; border-radius: 16px; }
  .film-cap { max-width: none; right: 20px; }
  .film-cap small { display: none; }
  .film-time, .film-full span { display: none; }
  .film-full { padding: 0 14px; font-size: 13px; }
  .film-bar { min-width: 40px; }
  .x-follow { display: none; }
}

/* ---------- Thank-you page ---------- */
.thanks-tick { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 26px; border-radius: 50%; background: rgba(61, 207, 245, .14); border: 1px solid rgba(127, 224, 255, .35); color: var(--teal-300); }
.thanks-tick svg { width: 26px; height: 26px; }