/* ==========================================================
   DYCINE PHARMA — homepage styles  (v2)
   All sans-serif · gradients · realistic globe · webm video
   ========================================================== */

:root {
  --navy-900: #03045E;
  --navy-800: #023E8A;
  --navy-700: #0077B6;
  --cyan-500: #00B4D8;
  --cyan-300: #90E0EF;
  --ink:      #121212;
  --paper:    #FAFAFA;
  --paper-2:  #f0f3f8;
  --border:   rgba(18,18,18,0.08);
  --border-dark: rgba(250,250,250,0.16);
  --shadow-card: 0 1px 2px rgba(3,4,94,0.06), 0 12px 32px -8px rgba(3,4,94,0.18);
  --shadow-float: 0 2px 4px rgba(3,4,94,0.08), 0 20px 48px -12px rgba(3,4,94,0.32);
  --nav-clear: 72px;
}
@media (max-width: 820px) { :root { --nav-clear: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }

.display {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-wrap: balance;
  hyphens: none;
}

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* =========================
   Floating logo card  — original SVG, untouched
   ========================= */
.logo-card {
  position: fixed;
  top: 16px;
  left: 24px;
  z-index: 60;
  /* Rounded background that mirrors .top-nav (solid frosted-white pill) */
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px) saturate(1.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 16px;
  padding: 8px 18px;
  box-shadow: var(--shadow-float);
  text-decoration: none;
  display: grid;
  align-items: center;
  justify-items: start;
  width: auto;
  height: 64px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .4s, border-color .4s, box-shadow .4s, backdrop-filter .4s;
}
/* Transparent frosted variant when over the hero — identical to .top-nav.is-hero */
.logo-card.is-hero {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-color: rgba(250,250,250,0.20);
  box-shadow: 0 2px 16px rgba(0,0,0,0.22);
}
.logo-card:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 4px 8px rgba(3,4,94,0.1), 0 28px 56px -12px rgba(3,4,94,0.4); }
/* Two logos share one grid cell and crossfade. The dark (current) logo is the
   wider one, so it sizes the pill; the white variant fades in over the hero. */
.logo-card .logo-img {
  grid-area: 1 / 1;
  width: auto;
  height: 48px;
  display: block;
  filter: none !important;
  mix-blend-mode: normal !important;
  transition: opacity .4s ease;
}
.logo-card .logo-img-dark  { opacity: 1; }
.logo-card .logo-img-light { opacity: 0; }
/* Over the hero (transparent pill) → show the white logo, hide the dark one. */
.logo-card.is-hero .logo-img-dark  { opacity: 0; }
.logo-card.is-hero .logo-img-light { opacity: 1; }

/* gentle drift / pulse on the floating card */
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
/* Idle float removed so the logo pill reads as a matched pair with the static nav bar. */

img, svg, video { display: block; max-width: 100%; }

/* =========================
   Top navigation card
   ========================= */
.top-nav {
  position: fixed;
  top: 24px;
  right: 72px;
  z-index: 60;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px) saturate(1.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 16px;
  padding: 6px 8px;
  box-shadow: var(--shadow-float);
  display: flex;
  align-items: center;
  height: 48px;
  transition: background .4s, border-color .4s, box-shadow .4s;
}
/* Transparent style when over hero */
.top-nav.is-hero {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-color: rgba(250,250,250,0.20);
  box-shadow: 0 2px 16px rgba(0,0,0,0.22);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: rgba(18,18,18,0.6);
  transition: background 0.3s cubic-bezier(.22,1,.36,1), color 0.25s;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: transparent;
}
.nav-link:hover,
.nav-link.is-active {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 60%, #023E8A 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0,180,216,0.30);
}
.nav-link:hover i,
.nav-link.is-active i { color: #ffffff; opacity: 1; }
/* Light-on-dark when over hero */
.top-nav.is-hero .nav-link {
  color: rgba(255,255,255,0.95);
}
.top-nav.is-hero .nav-link:hover,
.top-nav.is-hero .nav-link.is-active {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 60%, #023E8A 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0,180,216,0.30);
}
.top-nav.is-hero .nav-link:hover i,
.top-nav.is-hero .nav-link.is-active i { color: #ffffff; opacity: 1; }
.nav-link i { font-size: 14px; opacity: 0.7; }

/* Products dropdown submenu — hover-revealed on desktop (like the News dropdown).
   Hidden on mobile via the ≤820px media query, where Products is a direct link. */
.nav-products-submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  padding: 6px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px) saturate(1.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 14px;
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s, visibility .25s, transform .25s cubic-bezier(.22,1,.36,1);
  z-index: 60;
}
.products-dropdown:hover .nav-products-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.products-dropdown:hover .nav-chevron { transform: rotate(180deg); }
/* Submenu items styled like dropdown items (dark text on the white menu),
   overriding the horizontal nav-link + is-hero white styles. */
.top-nav .nav-products-submenu .nav-sublink {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  color: rgba(18,18,18,0.7);
  background: transparent;
  box-shadow: none;
}
.top-nav .nav-products-submenu .nav-sublink i {
  color: var(--cyan-500);
  opacity: 0.9;
  width: 18px;
  text-align: center;
}
.top-nav .nav-products-submenu .nav-sublink:hover {
  background: var(--cyan-500);
  color: var(--navy-900);
  box-shadow: none;
  transform: none;
}
.top-nav .nav-products-submenu .nav-sublink:hover i { color: var(--navy-900); opacity: 1; }

/* Mobile menu logo — only visible inside the open burger menu */
.mobile-menu-logo { display: none; }
.nav-chevron { font-size: 10px !important; margin-left: 2px; opacity: 0.5 !important; transition: transform .3s; }

/* Sign In dropdown */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  font-family: 'Inter', sans-serif;
}
/* Sign In dropdown items: same cyan hover as nav-links */
.nav-dropdown-item:hover {
  background: var(--cyan-500);
  color: var(--navy-900);
}
.nav-dropdown-item:hover i { color: var(--navy-900); opacity: 1; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px) saturate(1.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 14px;
  padding: 6px;
  box-shadow: var(--shadow-float);
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s, visibility .25s, transform .25s cubic-bezier(.22,1,.36,1);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown:hover .nav-chevron,
.nav-dropdown.is-open .nav-chevron {
  transform: rotate(180deg);
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: rgba(18,18,18,0.7);
  transition: background .25s, color .25s;
}
.nav-dropdown-item:hover {
  background: var(--cyan-500);
  color: var(--navy-900);
}
.nav-dropdown-item:hover i { color: var(--navy-900); opacity: 1; }
.nav-dropdown-item i {
  font-size: 14px;
  opacity: 0.6;
  width: 18px;
  text-align: center;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
  transition: background 0.25s;
}
.nav-burger:hover { background: rgba(18,18,18,0.06); }
.top-nav.is-hero .nav-burger:hover { background: rgba(250,250,250,0.12); }
.nav-burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), opacity 0.25s, background 0.3s;
  transform-origin: center;
}
.top-nav.is-hero .nav-burger span { background: var(--paper); }
.top-nav.is-open .nav-burger span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.top-nav.is-open .nav-burger span:nth-child(2) {
  opacity: 0;
}
.top-nav.is-open .nav-burger span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* =========================
   Side navigation — minimal tick marks flush-right
   ========================= */
.sidenav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sidenav a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  text-decoration: none;
  color: currentColor;
  cursor: pointer;
  position: relative;
}
.sn-tick {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  opacity: 0.25;
  transition: width .45s cubic-bezier(.22,1,.36,1), opacity .35s, background .35s, box-shadow .35s;
  flex-shrink: 0;
}
.sidenav a:hover .sn-tick {
  width: 30px;
  opacity: 0.65;
}
.sidenav a.is-active .sn-tick {
  width: 40px;
  opacity: 1;
  background: var(--cyan-500);
  box-shadow: 0 0 12px rgba(0,180,216,0.55), 0 0 4px rgba(0,180,216,0.3);
}
.sn-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
  white-space: nowrap;
  pointer-events: none;
}
.sidenav a:hover .sn-label {
  opacity: 0.8;
  transform: translateX(0);
}
.sidenav a.is-active .sn-label {
  opacity: 1;
  transform: translateX(0);
}

/* =========================
   Section base
   ========================= */
section {
  position: relative;
  min-height: 100vh;
  padding: 120px 7vw 100px;
  padding-right: max(7vw, var(--nav-clear));
  overflow: hidden;
}

/* =========================
   HERO  (designed-cells inspired)
   ========================= */
.hero {
  color: var(--paper);
  background:
    radial-gradient(60% 70% at 18% 28%, rgba(0,180,216,0.20), transparent 60%),
    radial-gradient(50% 50% at 95% 75%, rgba(144,224,239,0.10), transparent 60%),
    radial-gradient(80% 80% at 80% 0%, rgba(0,119,182,0.30), transparent 50%),
    linear-gradient(135deg, #03045E 0%, #023E8A 60%, #0077B6 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0; padding-bottom: 0;
}

/* Soft animated noise / grain overlay */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.04) 0, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(255,255,255,0.03) 0, transparent 40%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 140px 0 120px;
  display: grid;
  grid-template-areas: "set";
}

.hero-eyebrow-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.hero-eyebrow-row .eyebrow { opacity: 0.85; }
/* CT1 legend — sits on its own line under the status pill */
.hero-ct1-note {
  flex-basis: 100%;
  margin-top: -14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.6;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(250,250,250,0.25);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pill .blink {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan-500); animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 0%,100% {opacity:1} 50% {opacity:.2} }

/* Designed-cells style giant headline + rotating phrase */
.hero h1.display {
  font-size: clamp(38px, 6.5vw, 110px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  font-weight: 700;
  margin: 0;
  max-width: 1100px;
  overflow-wrap: normal;
}
.hero h1.display em {
  font-style: normal;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(120deg, var(--cyan-300) 0%, var(--cyan-500) 60%, var(--paper) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.035em;
}
.hero h1.display .pad-l { padding-left: 0.4em; }

/* Full-tagline rotator — each .hero-line shares one grid cell and
   cross-fades; the cell auto-sizes to the tallest line so swapping
   never shifts the layout. */
.hero h1.display.hero-rotate {
  display: grid;
  align-items: start;
}
.hero h1.display.hero-rotate .hero-line {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform, opacity;
}
.hero h1.display.hero-rotate .hero-line.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* lower row of meta */
.hero-bottom {
  margin-top: 16px;
  max-width: 640px;
}
.hero-set-a .hero-bottom { transition: transform 0.55s cubic-bezier(.22,1,.36,1); }
.hero-bottom .lede {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  opacity: 0.85;
  max-width: 480px;
  margin: 0 0 24px;
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1.5px solid rgba(0,180,216,0.45);
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, background .3s, color .3s, border-color .3s;
  background: rgba(255,255,255,0.06);
  color: var(--paper);
  box-shadow: none;
  color: inherit;
}
.btn-primary {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,180,216,0.32);
}
.btn:hover {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,180,216,0.45);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,180,216,0.45);
}
.btn .arr { color: var(--cyan-500); transition: color .3s, transform .25s; }
.btn:hover .arr { color: #fff; transform: translateX(4px); }
.btn-primary .arr { color: #fff; }
.btn-primary:hover .arr { transform: translateX(4px); }

/* Hero set swap — Set A (default) and Set B (snakebite focus) auto-loop.
   Both sets share the same grid cell so swapping doesn't shift layout. */
.hero-set {
  grid-area: set;
  min-width: 0;
  transition: opacity 0.6s ease;
}
.hero-set:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hero-set.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Label inside the burden grid, sits below the divider line and spans
   the whole row above the four stats */
.hero-stats-label {
  grid-column: 1 / -1;
  margin-bottom: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-stats-label i { font-size: 12px; opacity: 0.8; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(250,250,250,0.18);
  padding-top: 28px;
  margin-top: 48px;
}
.hero-stats.hero-stats-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px) {
  .hero-stats.hero-stats-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
}
.hero-stats .s .num {
  font-weight: 600;
  font-size: clamp(32px, 3.5vw, 52px);
  letter-spacing: -0.025em;
  line-height: 1;
}
.hero-stats .s .lbl {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* DNA video — right of hero, full-height prominent */
.hero-video-wrap {
  position: absolute;
  top: 0; right: -6vw;
  width: 78vw;
  max-width: 1200px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  transition: opacity 0.6s ease;
}
/* Hidden while Set B (the full-screen snake-bite background) is showing, so the
   molecule video and the background video are never visible at the same time. */
.hero-video-wrap.is-hidden { opacity: 0 !important; visibility: hidden; }

/* Concentric rings — centered on the video */
.hero-video-wrap .ring {
  position: absolute;
  top: 50%; left: 55%;
  transform: translate(-50%, -42%);
  border-radius: 50%;
  aspect-ratio: 1;
}
.hero-video-wrap .ring.r1 {
  width: 88%;
  border: 1px solid rgba(250,250,250,0.10);
}
.hero-video-wrap .ring.r2 {
  width: 70%;
  border: 1px dashed rgba(0,180,216,0.28);
  animation: spinRing 80s linear infinite;
}
.hero-video-wrap .ring.r3 {
  width: 105%;
  border: 1px solid rgba(250,250,250,0.05);
}
.hero-video-wrap .ring.r4 {
  width: 52%;
  border: 1px solid rgba(0,180,216,0.18);
  box-shadow: 0 0 40px 0 rgba(0,180,216,0.06);
}
.hero-video-wrap .ring.r5 {
  width: 124%;
  border: 1px solid rgba(250,250,250,0.03);
  animation: spinRingReverse 120s linear infinite;
}
@keyframes spinRing {
  from { transform: translate(-50%, -42%) rotate(0deg); }
  to { transform: translate(-50%, -42%) rotate(360deg); }
}
@keyframes spinRingReverse {
  from { transform: translate(-50%, -42%) rotate(0deg); }
  to { transform: translate(-50%, -42%) rotate(-360deg); }
}
.hero-video {
  position: absolute;
  top: 50%; left: 55%;
  transform: translate(-50%, -42%) rotate(30deg) scale(1.3);
  width: 110%;
  max-width: 1100px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 24px 80px rgba(0,180,216,0.45)) contrast(1.14) saturate(1.12) brightness(1.05);
  transition: opacity 0.6s ease;
}
/* Set B full-screen background (snake-bite muscle): a dedicated layer over the
   whole hero that simply crossfades in for Set B. It never resizes, so there's
   no box/edge at the start or end, and object-fit:cover means no black borders. */
.hero-bg-b {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg-b-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.08) brightness(1.02);
}
/* Dark wash so the white text stays readable over the video */
.hero-bg-b::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,4,94,0.92) 0%, rgba(3,4,94,0.62) 45%, rgba(3,4,94,0.32) 100%);
  pointer-events: none;
}
.hero-bg-b.is-on { opacity: 1; visibility: visible; }

/* All Set B text in white (shown over the full-screen video) */
.hero-set-b,
.hero-set-b .lede,
.hero-set-b .eyebrow,
.hero-set-b .num,
.hero-set-b .lbl { color: #fff !important; }
.hero-set-b .lede { opacity: 0.95; }
.hero-set-b .display em {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

/* meta strip at bottom of hero */
.hero-meta-strip {
  position: relative;
  z-index: 2;
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  color: var(--paper);
  border-top: 1px solid rgba(250,250,250,0.12);
}

/* =========================
   ABOUT
   ========================= */
.about {
  min-height: auto;
  padding-top: 80px;
  padding-bottom: 70px;
  color: var(--ink);
  background:
    radial-gradient(42% 42% at 28% 50%, rgba(0,180,216,0.09), transparent 70%),
    radial-gradient(60% 50% at 100% 0%, rgba(0,180,216,0.10), transparent 60%),
    radial-gradient(40% 40% at 0% 100%, rgba(2,62,138,0.06), transparent 60%),
    linear-gradient(180deg, #FAFAFA 0%, #f0f3f8 100%);
}
@media (max-width: 820px) {
  .about { padding-top: 60px; padding-bottom: 50px; }
}
.about-grid {
  position: relative; z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.globe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 640px;
  margin: 0 auto;
}
.globe-wrap canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; position: relative; z-index: 1; }
.globe-wrap::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 115%; height: 115%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,180,216,0.13) 0%, rgba(2,62,138,0.06) 35%, transparent 62%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.globe-wrap.is-dragging canvas { cursor: grabbing; }
.globe-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(18,18,18,0.4);
}
.about h2, .products h2, .contact h2, .partners h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 20px 0 64px;
  text-wrap: balance;
  hyphens: none;
}
.about h2 em, .products h2 em, .contact h2 em {
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.035em;
}
.about p.lede {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(18,18,18,0.7);
  max-width: 540px;
  margin: 0 0 44px;
}

/* Flag grid (About section) */
.flag-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 40px;
  margin-top: 28px;
}
.flag-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.flag-img-lg {
  width: 56px;
  height: 38px;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.08);
}
.flag-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(18,18,18,0.7);
  letter-spacing: 0.02em;
  text-align: center;
}
.about-stats {
  margin-top: 32px;
}

/* Hero pill repositioned */
.hero-pill {
  margin-top: 32px;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.stat-row .num {
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--navy-900);
}
.stat-row .lbl {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.55);
  margin-top: 6px;
}

/* =========================
   About — Tabbed panels
   ========================= */
.about-section-header {
  max-width: 1500px;
  margin: 0 auto 28px;
}

.about-tab-container {
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
  transition: height 0.55s cubic-bezier(.22,1,.36,1);
}

.about-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(60px);
  transition: opacity 0.5s cubic-bezier(.22,1,.36,1), transform 0.55s cubic-bezier(.22,1,.36,1), visibility 0.55s;
  pointer-events: none;
}
.about-panel.is-leaving {
  opacity: 0;
  visibility: visible;
  transform: translateX(-60px);
  pointer-events: none;
}
.about-panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 1;
}

/* Tab bar */
.about-tabs-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 48px;
  position: relative;
  z-index: 2;
}
.about-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  min-width: 200px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--navy-900);
  background: rgba(255,255,255,0.5);
  border: 1.5px solid rgba(0,180,216,0.40);
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s, background 0.3s, color 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.about-tab:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,180,216,0.45);
}
.about-tab:hover i { color: #fff; opacity: 1; }
.about-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(0,180,216,0.45), inset 0 0 0 2px rgba(255,255,255,0.18);
}
.about-tab i { font-size: 14px; opacity: 1; color: var(--cyan-500); }
.about-tab:hover i,
.about-tab.is-active i { opacity: 1; color: #fff; }

/* =========================
   Mission & Vision panel
   ========================= */
.mv-heading {
  text-align: center;
  margin-bottom: 56px !important;
}

.mission-vision-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 821px) {
  .mission-vision-layout .mv-card:first-of-type {
    align-self: start;
    margin-top: 40px;
  }
  .mission-vision-layout .mv-card:last-of-type {
    align-self: end;
    margin-bottom: 40px;
  }
}

.mv-card {
  text-align: left;
  padding: 0 8px;
}

.mv-label {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 4vw, 64px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  text-transform: none;
  color: var(--navy-900);
  margin: 0 0 18px;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .mv-label { white-space: normal; }
}

.mv-statement {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0;
  color: rgba(18,18,18,0.78);
  margin: 0;
  text-wrap: balance;
}

.mv-video-wrap {
  width: clamp(280px, 36vw, 520px);
  flex-shrink: 0;
  transform: rotate(-38deg);
  transition: transform 0.6s cubic-bezier(.22,1,.36,1);
}
.mv-video-wrap:hover { transform: rotate(-32deg) scale(1.05); }
.mv-video-wrap video {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 48px rgba(0,180,216,0.28)) drop-shadow(0 4px 16px rgba(2,62,138,0.18)) contrast(1.18) saturate(1.15) brightness(1.06);
}
@media (max-width: 820px) {
  .mv-video-wrap { transform: rotate(-25deg); }
  .mv-video-wrap:hover { transform: rotate(-20deg) scale(1.03); }
}

/* =========================
   Our Team panel
   ========================= */
.team-heading {
  text-align: center;
  margin-bottom: 56px !important;
}

.team-section {
  position: relative;
  padding: 20px 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.team-member {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.team-member > .team-linkedin { margin-top: 14px; }

.team-img-wrap {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 18px;
  border: 3px solid rgba(0,180,216,0.25);
  box-shadow: 0 8px 28px rgba(0,180,216,0.12), 0 2px 8px rgba(3,4,94,0.06);
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s;
}
.team-member:hover .team-img-wrap {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 40px rgba(0,180,216,0.2), 0 4px 12px rgba(3,4,94,0.08);
}
.team-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.team-member h4 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--navy-900);
}
.team-member p {
  font-size: 12px;
  font-weight: 500;
  color: rgba(18,18,18,0.5);
  margin: 0;
  letter-spacing: 0.03em;
}
.team-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: auto;
  border-radius: 6px;
  background: rgba(0,180,216,0.08);
  color: var(--navy-700);
  border: 1px solid rgba(0,180,216,0.2);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.3s cubic-bezier(.22,1,.36,1);
}
.team-linkedin:hover {
  background: #0A66C2;
  color: #fff;
  border-color: #0A66C2;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10,102,194,0.3);
}

/* =========================
   Floating molecules (team bg)
   ========================= */
.team-molecules {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Animated molecule videos in team-section corners */
.team-bg-vid {
  position: absolute;
  width: 240px;
  height: auto;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 12px 36px rgba(0,180,216,0.22)) contrast(1.18) saturate(1.15) brightness(1.06);
}
.team-bg-vid-tr {
  top: -60px;
  right: -40px;
  transform: rotate(-22deg);
}
.team-bg-vid-bl {
  bottom: -60px;
  left: -40px;
  transform: rotate(160deg);
}
@media (max-width: 820px) {
  .team-bg-vid { width: 140px; opacity: 0.4; }
  .team-bg-vid-tr { top: -30px; right: -20px; }
  .team-bg-vid-bl { bottom: -30px; left: -20px; }
}
.team-molecules .mol {
  position: absolute;
  opacity: 0.9;
}

.mol-1 { top: 2%;  left: 2%;  animation: molFloat1 15s ease-in-out infinite; }
.mol-2 { top: 12%; right: 4%; animation: molFloat2 18s ease-in-out infinite; }
.mol-3 { bottom: 8%;  left: 6%;  animation: molFloat3 13s ease-in-out infinite; }
.mol-4 { bottom: 15%; right: 8%; animation: molFloat4 20s ease-in-out infinite; }
.mol-5 { top: 45%; left: 12%;  animation: molFloat2 14s ease-in-out infinite 2s; }
.mol-6 { top: 28%; right: 14%; animation: molFloat1 16s ease-in-out infinite 3s; }
.mol-7 { bottom: 30%; left: 22%;  animation: molFloat3 22s ease-in-out infinite 1s; }
.mol-8 { top: 6%;  left: 42%; animation: molFloat4 17s ease-in-out infinite 4s; }

@keyframes molFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(25px, -20px) rotate(12deg); }
  66%      { transform: translate(-15px, 15px) rotate(-8deg); }
}
@keyframes molFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-20px, -25px) rotate(-15deg); }
  75%      { transform: translate(18px, 12px) rotate(10deg); }
}
@keyframes molFloat3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(30px, -10px) rotate(20deg); }
}
@keyframes molFloat4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  40%      { transform: translate(-22px, 18px) rotate(-12deg); }
  80%      { transform: translate(12px, -22px) rotate(8deg); }
}

/* =========================
   Capabilities — R&D hero (text + 3D video), feature grid, chips
   ========================= */
.cap-sublabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-500);
  margin: 0 0 18px;
  padding: 7px 14px;
  background: rgba(0,180,216,0.10);
  border: 1px solid rgba(0,180,216,0.28);
  border-radius: 999px;
}
.cap-sublabel i { font-size: 12px; }
@media (max-width: 560px) {
  .cap-sublabel { font-size: 10px; padding: 6px 12px; letter-spacing: 0.14em; }
}

.cap-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 56px;
}
/* Manufacturing panel: staggered collage of 3 facility photos on the right */
.cap-manuf-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin: 0 auto;
}
.cmc-img {
  position: absolute;
  border-radius: 12px;
  object-fit: cover;
  border: none;
  box-shadow: none;
  filter:
    drop-shadow(0 0 6px rgba(0, 180, 216, 0.85))
    drop-shadow(0 0 14px rgba(0, 180, 216, 0.55))
    drop-shadow(0 0 28px rgba(0, 119, 182, 0.40));
  transition: transform 0.5s cubic-bezier(.22,1,.36,1), filter 0.4s;
}
/* Reference layout:
   1 → top-right square
   2 → centered larger rounded rectangle (back layer)
   3 → bottom-left square */
.cmc-img-1 {
  top: 0;
  right: 0;
  width: 38%;
  aspect-ratio: 1 / 1;
  height: auto;
  z-index: 3;
}
.cmc-img-2 {
  top: 18%;
  left: 14%;
  right: 14%;
  width: 72%;
  height: 60%;
  z-index: 1;
}
.cmc-img-3 {
  bottom: 0;
  left: 0;
  width: 38%;
  aspect-ratio: 1 / 1;
  height: auto;
  z-index: 2;
}
.cmc-img:hover {
  transform: translateY(-4px) scale(1.02);
  z-index: 10;
}
@media (max-width: 980px) {
  .cap-manuf-collage { aspect-ratio: 4 / 3; max-width: 520px; }
}
@media (max-width: 560px) {
  .cap-manuf-collage { aspect-ratio: 4 / 3; max-width: 100%; }
  .cmc-img { border-width: 2px; }
}
.cap-hero-copy { min-width: 0; }
.cap-hero h2 {
  margin-top: 14px;
  margin-bottom: 22px;
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.cap-hero h2 em { letter-spacing: -0.03em; }
.cap-hero .lede { margin-bottom: 28px; max-width: 560px; }

.cap-hero-vid {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cap-hero-vid video {
  position: relative;
  z-index: 2;
  width: 112%;
  height: 112%;
  object-fit: contain;
  filter: drop-shadow(0 28px 70px rgba(0,180,216,0.32)) drop-shadow(0 6px 20px rgba(2,62,138,0.22)) contrast(1.18) saturate(1.15) brightness(1.06);
}
.cap-hero-vid-ring {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px dashed rgba(0,180,216,0.28);
  animation: capRingSpin 60s linear infinite;
  z-index: 1;
}
.cap-hero-vid-ring-2 {
  inset: -4%;
  border-style: solid;
  border-color: rgba(0,180,216,0.14);
  animation: capRingSpin 80s linear infinite reverse;
}
@keyframes capRingSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
  .cap-hero { grid-template-columns: 1fr; gap: 28px; }
  .cap-hero-vid { max-width: 520px; }
  .cap-hero-vid video { width: 110%; height: 110%; }
  .cap-hero-vid-ring { inset: 4%; }
  .cap-hero-vid-ring-2 { inset: -3%; }
}
@media (max-width: 560px) {
  .cap-hero-vid { max-width: 380px; }
  .cap-hero-vid video { width: 108%; height: 108%; }
}

.cap-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 56px;
  margin: 36px 0 32px;
  max-width: 1200px;
}
.cap-features-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 36px 0 32px;
  padding: 8px 0 16px;
}
.cap-features-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.cap-features-fade-l {
  left: 0;
  background: linear-gradient(90deg, var(--paper) 0%, rgba(250,250,250,0) 100%);
}
.cap-features-fade-r {
  right: 0;
  background: linear-gradient(-90deg, var(--paper) 0%, rgba(250,250,250,0) 100%);
}
.cap-features-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 60s linear infinite;
  will-change: transform;
}
.cap-features-track:hover { animation-play-state: paused; }
.cap-features-set {
  display: flex;
  gap: 56px;
  padding: 0 28px;
  flex-shrink: 0;
}
.cap-features-set .cap-feat {
  flex-shrink: 0;
  width: 280px;
}
.cap-feat {
  position: relative;
  padding: 0 0 0 22px;
  border-left: 2px solid rgba(0,180,216,0.22);
  transition: border-color 0.35s, transform 0.35s cubic-bezier(.22,1,.36,1);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
}
.cap-feat:hover {
  border-left-color: var(--cyan-500);
  transform: translateX(4px);
}
.cap-feat i {
  display: inline-block;
  color: var(--cyan-500);
  font-size: 28px;
  margin-bottom: 0;
  filter: drop-shadow(0 4px 12px rgba(0,180,216,0.3));
}
.cap-feat h4 {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--navy-900);
}
.cap-feat p {
  display: none;
}

.therapeutic-focus { margin-top: 8px; }
.therapeutic-focus h4 {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.5);
  margin: 0 0 14px;
}
.focus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  border: 1.5px solid rgba(0,180,216,0.40);
  color: var(--navy-900);
  box-shadow: none;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s, color 0.3s, border-color 0.3s;
}
.chip:hover {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,180,216,0.45);
}

@media (max-width: 980px) {
  .cap-features { grid-template-columns: 1fr 1fr; gap: 18px; }
  .cap-features-set { gap: 36px; padding: 0 16px; }
  .cap-features-set .cap-feat { width: 240px; }
  .cap-features-fade { width: 60px; }
}
@media (max-width: 560px) {
  .cap-features { grid-template-columns: 1fr; gap: 14px; }
  .cap-features-set .cap-feat { width: 220px; }
}

/* Certifications grid */
/* Certifications horizontal slider */
.cert-slider {
  position: relative;
  margin-top: 32px;
}
.cert-grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 4px 16px;
  scroll-padding-left: 4px;
}
.cert-grid::-webkit-scrollbar { display: none; }
.cert-grid .cert-card {
  flex: 0 0 calc((100% - 72px) / 4);
  scroll-snap-align: start;
  min-width: 0;
}

.cert-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 180, 216, 0.40);
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy-900);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(3, 4, 94, 0.15);
  z-index: 3;
  transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.cert-slider-btn:hover {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  color: #fff;
  border-color: transparent;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 26px rgba(0, 180, 216, 0.45);
}
.cert-slider-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: translateY(-50%);
  box-shadow: none;
}
.cert-slider-prev { left: -22px; }
.cert-slider-next { right: -22px; }

.cert-card-placeholder { opacity: 0.55; }
.cert-card-placeholder:hover { opacity: 0.85; }
.cert-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1);
}
.cert-card:hover { transform: translateY(-6px); }
.cert-thumb {
  aspect-ratio: 721 / 1024;
  background: rgba(255,255,255,0.7);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,180,216,0.18);
  box-shadow: 0 6px 20px rgba(3,4,94,0.08);
  transition: box-shadow 0.35s, border-color 0.35s;
}
.cert-card:hover .cert-thumb {
  box-shadow: 0 16px 40px rgba(0,180,216,0.22), 0 4px 12px rgba(3,4,94,0.10);
  border-color: rgba(0,180,216,0.4);
}
.cert-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.cert-meta {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cert-name {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}
.cert-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0,180,216,0.1);
  border: 1px solid rgba(0,180,216,0.22);
  color: var(--navy-700);
  font-size: 12px;
  transition: all 0.3s cubic-bezier(.22,1,.36,1);
  flex-shrink: 0;
}
.cert-card:hover .cert-dl {
  background: var(--cyan-500);
  border-color: var(--cyan-500);
  color: var(--navy-900);
}

@media (max-width: 980px) {
  .cert-grid .cert-card { flex: 0 0 calc((100% - 44px) / 3); }
  .cert-grid { gap: 22px; }
  .cert-slider-prev { left: -8px; }
  .cert-slider-next { right: -8px; }
  .cert-slider-btn { width: 38px; height: 38px; font-size: 14px; }
}
@media (max-width: 560px) {
  .cert-grid .cert-card { flex: 0 0 calc((100% - 14px) / 2); }
  .cert-grid { gap: 14px; }
  .cert-name { font-size: 11.5px; }
  .cert-dl { width: 24px; height: 24px; font-size: 10px; }
  .cert-slider-btn { width: 34px; height: 34px; font-size: 12px; }
  .cert-slider-prev { left: -4px; }
  .cert-slider-next { right: -4px; }
}

/* =========================
   Team connection line + traveling pulses
   ========================= */
.team-connections {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1000px;
  height: 170px;
  margin: 0 auto;
  pointer-events: none;
  z-index: 0;
}
.tline {
  animation: tlineFlow 8s linear infinite;
}
@keyframes tlineFlow {
  to { stroke-dashoffset: -36; }
}
.tpulse {
  filter: drop-shadow(0 0 6px rgba(0,180,216,0.75)) drop-shadow(0 0 14px rgba(0,180,216,0.35));
}

/* About tabs responsive */
@media (max-width: 820px) {
  .mission-vision-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 480px;
  }
  .mv-video-wrap {
    width: 260px;
    margin: 0 auto;
    order: 0;
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 500px;
  }
  .team-img-wrap { width: 130px; height: 130px; }
  .team-connections { display: none; }

  /* Flag grid: V-shape 2x2 + centered 5th on mobile */
  .flag-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
  }
  .flag-item:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .about-tabs-row { flex-wrap: wrap; gap: 8px; padding-top: 32px; }
  .about-tab { padding: 12px 20px; min-width: 0; font-size: 13px; }

  /* Product tabs: horizontally scrollable with hidden scrollbar */
  .product-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px 4px;
    margin-left: -16px;
    margin-right: -16px;
  }
  .product-tabs::-webkit-scrollbar { display: none; }
  .product-tab {
    flex-shrink: 0;
    scroll-snap-align: center;
    padding: 9px 16px;
    font-size: 12px;
  }
}
@media (max-width: 820px) {
  .about-tab { gap: 8px; }
  .about-tab i { display: inline-block; font-size: 13px; opacity: 0.85; }
  .about-tab.is-active i { opacity: 1; }
}

/* =========================
   PRODUCTS
   ========================= */
.products {
  color: var(--paper);
  background:
    radial-gradient(60% 50% at 100% 100%, rgba(0,180,216,0.18), transparent 60%),
    radial-gradient(40% 40% at 0% 0%, rgba(0,119,182,0.22), transparent 60%),
    linear-gradient(180deg, #03045E 0%, #022b5e 50%, #03045E 100%);
}
.products-head {
  max-width: 1500px;
  margin: 0 auto 72px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.products-head h2 { max-width: 760px; margin: 16px 0 0; }
.products-head .nav { display: flex; gap: 12px; }
.car-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(250,250,250,0.25);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, color .25s, border-color .25s;
  font-size: 16px;
}
.car-btn:hover { background: var(--cyan-500); color: var(--navy-900); border-color: var(--cyan-500); }

/* Product name tabs */
.product-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  max-width: 1500px;
  margin: 24px auto 0;
}
.product-tab {
  padding: 12px 24px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--paper);
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(0,180,216,0.45);
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s, background 0.3s, color 0.3s, border-color 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.product-tab:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,180,216,0.45);
}
.product-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  box-shadow: 0 12px 30px rgba(0,180,216,0.45), inset 0 0 0 2px rgba(255,255,255,0.22);
}
.product-tab i { font-size: 14px; color: var(--cyan-500); }
.product-tab:hover i,
.product-tab.is-active i { color: #fff; }

/* Featured product buttons (products page) — anchor pills, wrap on narrow */
.product-tabs-featured { flex-wrap: wrap; gap: 12px; }
.product-tabs-featured .product-tab { text-decoration: none; }
/* Featured product buttons: vertically centered within the blue band */
.products-featured {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.products-featured .product-tabs-featured { margin-top: 0; }
/* Mobile: buttons stack, so give the band more height to keep them centered */
@media (max-width: 768px) {
  .products-featured { min-height: 320px; }
}

/* The rounded CARD: shape, navy backdrop, hairline ring + float shadow live
   here. This element is NOT the clipper (overflow:hidden + border-radius on a
   composited element is what produced the seam). The navy backdrop is the same
   navy the .stage-corner masks paint the rounded top corners with. */
.carousel {
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
  border-radius: 24px;
  background: #03045E;
  box-shadow: 0 0 0 1px rgba(250,250,250,0.1), var(--shadow-float);
}
/* ============================  SEAM FIX (definitive)  ============================
   ROOT CAUSE: the carousel content moves (slide-change translateX + a parallax
   scroll-scrub + a GSAP entrance), and it was being clipped by a ROUNDED mask
   (border-radius / clip-path with overflow:hidden). Chrome renders a rounded clip
   of a composited / moving layer into an anti-aliased OFFSCREEN MASK BUFFER, and
   that buffer’s edge resamples a sub-pixel off the moving video every frame — the
   1px seam on the straight bottom/left edges, visible on load, scroll & switch.
   (Earlier screenshot checks missed it because DOM-rerender capture cannot
   reproduce GPU compositing.)

   FIX: clip the moving slides with a PLAIN RECTANGLE. A rectangular clip is
   applied to the layer’s clip-rect directly on the device-pixel grid — Chrome
   does NOT allocate a mask buffer for it — so straight edges can never seam.
   The rounded TOP corners are then recreated with two opaque, STATIC navy masks
   (.stage-corner) that paint each corner the same navy as the card behind it.
   Being static opaque paint they rasterise once on the pixel grid and cannot
   seam, and they touch only the two top corners — not the straight edges. */
.stage-clip {
  position: relative;
  overflow: hidden;          /* RECTANGULAR clip only — no radius, no clip-path */
}
.stage-corner {
  position: absolute;
  top: 0;
  width: 24px;
  height: 24px;
  z-index: 6;                /* above the moving video, below the bottom-left copy */
  pointer-events: none;
}
.stage-corner.tl {
  left: 0;
  background: radial-gradient(circle 24px at 100% 100%, transparent 0 24px, #03045E 24px);
}
.stage-corner.tr {
  right: 0;
  background: radial-gradient(circle 24px at 0 100%, transparent 0 24px, #03045E 24px);
}
.product-stage {
  display: flex;
  min-height: 580px;
  transition: transform 0.7s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.slide {
  position: relative;
  min-width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  background: #03045E;
}
/* Media wrapper = the video only. The Ken-Burns zoom + colour-grade filter
   live here, so this subtree is rasterised offscreen and composited each
   frame. The darkening scrim is deliberately NOT here (see .slide-scrim) so
   it cannot inherit that sub-pixel drift and seam against the carousel clip. */
.slide-media {
  position: absolute; inset: 0;
  overflow: hidden;
  filter: contrast(1.12) saturate(1.15) brightness(1.05);
  transform: scale(1.08);
  transform-origin: center;
}
/* Darkening scrim — a STATIC, unfilmed, untransformed layer pinned to the slide
   box (a real <div> sitting between .slide-media and .copy in the DOM, so it
   paints above the video and below the text). It is intentionally NOT inside
   the scaled+filtered .slide-media: that subtree is rasterised offscreen and
   composited with a sub-pixel offset every frame, which used to land the scrim’s
   bottom/left edge mid-pixel against the carousel’s rounded clip — the seam.
   Kept static, it rasterises on the device-pixel grid and the slide’s overflow
   clips it cleanly, so it can never seam. The video only ever scales UP (>=1),
   so it always fully covers the slide box beneath the scrim. */
.slide-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,4,94,0.10) 0%, rgba(3,4,94,0.55) 55%, rgba(3,4,94,0.92) 92%, rgba(3,4,94,1) 100%),
    linear-gradient(90deg, rgba(3,4,94,0.60) 0%, transparent 50%);
}
.slide .img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
video.img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Ken-Burns zoom on the video only; the scrim stays static (no seam). */
.slide.is-active .slide-media { animation: slowZoom 12s linear forwards; }
@keyframes slowZoom { from { transform: scale(1.08); } to { transform: scale(1.18); } }
.slide .copy {
  position: absolute; bottom: 36px; left: 36px; right: 36px;
}
/* The CTA button has its own solid fill — no text shadow needed on its label. */
.slide .copy .slide-cta { text-shadow: none; }
.slide .num {
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--paper);
  opacity: 0.35;
  margin-bottom: 12px;
  display: block;
}
.slide .tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
}
.slide .trial-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-500);
  margin: 0 0 14px;
}
.slide .trial-status .blink {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan-500);
  display: inline-block;
}
.slide h3 {
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  max-width: 600px;
}
.slide .desc {
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.86;
  max-width: 520px;
  margin: 0 0 22px;
}
.slide .specs {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
.slide .specs span strong {
  display: block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
  margin-top: 4px;
}
/* "Know More" CTA on each product slide — right side, vertically centered */
.slide .slide-cta {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
}
@media (max-width: 768px) {
  .slide .slide-cta {
    position: static;
    transform: none;
    display: flex;
    width: fit-content;
    margin: 18px auto 0;
    padding: 10px 20px;
    font-size: 13px;
  }
}

/* =====================================================================
   PRODUCT CAROUSELS (.products) — DESKTOP SPLIT LAYOUT
   Text lives on a SOLID navy panel beside the video (no overlay over the
   video at all), which fixes both readability over the light videos and the
   moving-overlay seam. Scoped to .products + desktop; the mobile stacked layout is untouched. */
@media (min-width: 769px) {
  /* Round the TOP corners of the clip to match the card's rounded bottom.
     Safe here (no seam) because in this desktop layout .slide-media is STATIC
     (animation:none) and the zooming .img is rect-clipped by .slide-media's own
     overflow — so the moving layer never reaches this rounded clip. */
  .products .stage-clip {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .products .slide {
    display: flex;
    flex-direction: row-reverse;   /* text panel LEFT, video RIGHT */
    align-items: stretch;
  }
  .products .slide-media {
    position: relative;
    inset: auto;
    flex: 1 1 0;
    min-width: 0;
    transform: none;               /* don't scale the column box; zoom the video instead */
  }
  .products .slide-scrim { display: none; }   /* NO overlay over the video */
  .products .slide.is-active .slide-media { animation: none; }
  .products .slide.is-active .slide-media .img { animation: slowZoom 12s linear forwards; }
  .products .slide .copy {
    position: relative;
    inset: auto;
    bottom: auto; left: auto; right: auto;
    flex: 0 0 42%;
    max-width: 560px;
    align-self: stretch;
    background: #03045E;           /* solid text panel */
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-shadow: none;
  }
  .products .slide .slide-cta {
    position: relative;
    align-self: flex-start;
    margin-top: 28px;
    bottom: auto; right: auto;
  }
}

/* Featured Product Innovation card — standalone (Products page + Product Innovations page).
   Uses .feature-stage (NOT .product-stage) so the home carousel JS ignores it,
   while reusing all the .slide / .copy visual styling. */
.products-feature {
  color: var(--paper);
  background:
    radial-gradient(60% 50% at 100% 100%, rgba(0,180,216,0.18), transparent 60%),
    radial-gradient(40% 40% at 0% 0%, rgba(0,119,182,0.22), transparent 60%),
    linear-gradient(180deg, #03045E 0%, #022b5e 50%, #03045E 100%);
}
.products-page .products-feature { padding: 64px 6vw; }
.press-page .products-feature { padding: 56px 6vw; }
.products-feature .products-head { display: block; max-width: 1500px; margin: 0 auto 28px; }
.feature-stage { display: flex; min-height: 580px; }
@media (max-width: 600px) { .feature-stage { min-height: 520px; } }

/* Thumb column */
.thumbs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.thumb {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  flex: 1;
  cursor: pointer;
  border: 1px solid rgba(250,250,250,0.1);
  background: rgba(250,250,250,0.04);
  transition: border-color .25s, transform .25s;
  min-height: 180px;
}
.thumb:hover { transform: translateX(-4px); border-color: rgba(0,180,216,0.45); }
.thumb .timg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.55) saturate(1.1);
  transition: filter .35s;
}
.thumb.is-active .timg { filter: brightness(0.75) saturate(1.15); }
.thumb .tcopy {
  position: relative;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  z-index: 1;
}
.thumb .tnum {
  font-weight: 600;
  font-size: 22px;
  opacity: 0.85;
  letter-spacing: -0.02em;
}
.thumb .tname {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.thumb.is-active { border-color: var(--cyan-500); }
.thumb.is-active .tname { color: var(--paper); }
.thumb .progress {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--cyan-500); width: 0;
}
.thumb.is-active .progress { animation: prog 7s linear forwards; }
@keyframes prog { from { width: 0; } to { width: 100%; } }

/* Mobile carousel dot indicators */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
  padding-bottom: 48px;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
.carousel-dots .cdot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(250,250,250,0.2);
  border: 1px solid rgba(250,250,250,0.25);
  cursor: pointer;
  transition: background .3s, transform .3s, border-color .3s;
}
.carousel-dots .cdot.is-active {
  background: var(--cyan-500);
  border-color: var(--cyan-500);
  transform: scale(1.3);
}

/* Massive "DYCINE PRODUCTS" text + downward chevron */
.products-massive {
  text-align: center;
  margin-top: 60px;
  padding: 0 2vw;
  position: relative;
}
.products-massive-text {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 5.6vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, rgba(0,180,216,0.32) 0%, rgba(2,62,138,0.0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 auto;
}
.products-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 8px 14px;
  border-radius: 12px;
  color: rgba(250,250,250,0.92);
  text-decoration: none;
  cursor: pointer;
  animation: chevBounce 2.4s ease-in-out infinite;
  transition: color 0.3s, transform 0.3s;
}
.products-chevron-svg {
  width: 96px;
  height: auto;
  display: block;
}
.products-chevron:hover {
  color: var(--cyan-500);
  animation-play-state: paused;
  transform: translateY(4px);
}
@keyframes chevBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (max-width: 820px) {
  .products-massive { margin-top: 40px; padding: 0 4vw; }
  .products-massive-text {
    font-size: clamp(40px, 14vw, 72px);
    line-height: 1.0;
    letter-spacing: -0.04em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: keep-all;
  }
  .products-chevron-svg { width: 72px; }
}
@media (max-width: 420px) {
  .products-massive-text {
    font-size: clamp(36px, 13.5vw, 56px);
    letter-spacing: -0.03em;
  }
}

/* Legacy class kept for older references */
.catalogue-btn-wrap {
  display: flex;
  justify-content: center;
  padding: 48px 0 16px;
}
.catalogue-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid rgba(250,250,250,0.3);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .3s, border-color .3s, color .3s;
}
.catalogue-btn:hover {
  background: var(--cyan-500);
  border-color: var(--cyan-500);
  color: var(--navy-900);
}
.catalogue-btn i {
  font-size: 13px;
  transition: transform .3s;
}
.catalogue-btn:hover i {
  transform: translateX(4px);
}

/* Scroll-driven animation utility */
.anim-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.anim-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.anim-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.anim-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* =========================
   CONTACT
   ========================= */
.contact {
  color: var(--ink);
  background:
    radial-gradient(40% 40% at 100% 100%, rgba(0,180,216,0.10), transparent 60%),
    radial-gradient(50% 40% at 0% 0%, rgba(2,62,138,0.06), transparent 60%),
    linear-gradient(180deg, #f0f3f8 0%, #e6ecf5 100%);
}
.contact-grid {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: stretch;
}
.contact-info h2 { margin-top: 18px; }
.contact-info p.lede {
  font-size: 17px; line-height: 1.6; color: rgba(18,18,18,0.7);
  max-width: 480px;
  margin: 0 0 44px;
}
.contact-block {
  border-top: 1px solid var(--border);
  padding: 22px 0 18px;
}
.contact-block .ckey {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.5);
  margin-bottom: 8px;
}
.contact-block .cval {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.contact-block a {
  color: var(--navy-700); text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.contact-block a:hover { color: var(--cyan-500); }

.map-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  background: var(--paper);
  min-height: 580px;
}
.map-card iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  filter: grayscale(0.4) contrast(0.95);
}
.map-card .map-pin {
  position: absolute;
  top: 24px; left: 24px;
  background: var(--paper);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: 300px;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.3s, transform 0.3s;
  cursor: pointer;
}
.map-card .map-pin:hover {
  box-shadow: var(--shadow-float);
  transform: translateY(-2px);
}
.map-card .map-pin .pico {
  margin-left: auto;
  font-size: 11px;
  color: var(--cyan-500);
  opacity: 0.8;
}
.map-card .map-pin .pdot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan-500);
  box-shadow: 0 0 0 4px rgba(0,180,216,0.25);
  flex-shrink: 0;
}
.map-card .map-pin .pcopy { font-size: 12px; line-height: 1.4; color: var(--ink); }
.map-card .map-pin .pcopy strong {
  display: block; font-weight: 600; margin-bottom: 2px;
}

/* Our Offices grid */
.offices-section {
  max-width: 1500px;
  margin: 64px auto 0;
  padding-top: 40px;
  border-top: 1px solid rgba(18,18,18,0.10);
}
.offices-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.55);
  margin: 0 0 28px;
}
.offices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.office-card {
  padding: 0 0 0 22px;
  border-left: 2px solid rgba(0,180,216,0.22);
  transition: border-color 0.35s, transform 0.35s cubic-bezier(.22,1,.36,1);
}
.office-card:hover {
  border-left-color: var(--cyan-500);
  transform: translateX(4px);
}
.office-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-700), var(--cyan-500));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-size: 19px;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(0,180,216,0.22);
}
.office-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--navy-900);
  line-height: 1.25;
}
.office-addr {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(18,18,18,0.65);
  margin: 0 0 12px;
}
.office-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan-500);
  text-decoration: none;
  transition: color 0.3s;
}
.office-phone:hover { color: var(--navy-700); }
.office-phone i { font-size: 11px; }

@media (max-width: 980px) {
  .offices-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 560px) {
  .offices-section { margin-top: 48px; padding-top: 32px; }
  .offices-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* Contact tabs row — sits below the panels, two tabs: Contact / Work with us */
.contact-tabs-row {
  display: flex;
  gap: 14px;
  margin: 48px auto 0;
  justify-content: center;
  flex-wrap: wrap;
}
.contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  min-width: 200px;
  border: 1.5px solid rgba(0,180,216,0.40);
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  color: var(--navy-900);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s, background 0.3s, color 0.3s, border-color 0.3s;
}
.contact-cta i { font-size: 14px; color: var(--cyan-500); transition: color 0.3s; }
.contact-cta:hover {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,180,216,0.45);
}
.contact-cta:hover i { color: #fff; }
.contact-cta.is-active {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(0,180,216,0.32);
  cursor: default;
}
.contact-cta.is-active i { color: #fff; }
@media (max-width: 560px) {
  .contact-tabs-row {
    gap: 10px;
    margin-top: 32px;
  }
  .contact-cta {
    justify-content: center;
    padding: 12px 22px;
    font-size: 14px;
    flex: 0 0 auto;
    min-width: 0;
  }
  .contact-cta i { font-size: 13px; }
}

/* =========================
   COLLABORATORS & PARTNERS
   ========================= */
.partners {
  color: var(--paper);
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(0,180,216,0.08), transparent 70%),
    linear-gradient(180deg, #03045E 0%, #021b4a 100%);
  min-height: auto;
  padding-top: 100px;
  padding-bottom: 100px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.partners-head {
  max-width: 1500px;
  margin: 0 auto 56px;
  text-align: center;
}
.partners-head .eyebrow { justify-content: center; }
.partners-head h2 {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(22px, 3.2vw, 42px);
}

.marquee-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.marquee-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee-fade-l {
  left: 0;
  background: linear-gradient(90deg, #03045E 0%, transparent 100%);
}
.marquee-fade-r {
  right: 0;
  background: linear-gradient(-90deg, #021b4a 0%, transparent 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
  will-change: transform;
}
.marquee-set {
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 0 40px;
  flex-shrink: 0;
}
.marquee-set img {
  height: 48px;
  min-width: 100px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.35s;
  content-visibility: auto;
}
.marquee-set img:hover {
  opacity: 0.9;
}
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 820px) {
  .marquee-set { gap: 48px; }
  .marquee-set img { height: 36px; }
  .marquee-fade { width: 60px; }
}

/* =========================
   FOOTER
   ========================= */
.footer {
  color: var(--paper);
  background:
    radial-gradient(60% 50% at 100% 100%, rgba(0,180,216,0.10), transparent 60%),
    radial-gradient(40% 60% at 0% 0%, rgba(0,119,182,0.18), transparent 60%),
    linear-gradient(180deg, #021b4a 0%, #010234 100%);
  padding: 100px 7vw 40px;
  position: relative;
  z-index: 1;
  overflow: visible;
  margin-top: -2px;
}
.footer-grid {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--border-dark);
}

/* 3-column variant (no logo column — logo moved to the bottom row on the right) */
.footer-grid.footer-grid-3col {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 56px;
  justify-content: center;
}

/* Certifications sit under Categories; logo sits under Connect */
.footer-grid-3col .footer-col-certs {
  max-width: none;
  margin: 36px 0 0;
  padding-top: 0;
  border-top: none;
}
.footer-grid-3col .footer-col-logo {
  display: block;
  width: 220px;
  margin: 100px 0 0; /* drop the logo down to line up with the certification badges */
}
.footer-copyright-row {
  max-width: 1500px;
  margin: 28px auto 0;
}

/* Bottom row: certifications + copyright on left, logo on right */
.footer-bottom-row {
  max-width: 1500px;
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  padding-top: 36px;
}
.footer-bottom-row .footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-bottom-row .footer-bottom-left { text-align: left; align-items: flex-start; }
.footer-bottom-row .footer-bottom-left .footer-certs {
  margin: 0;
  padding-top: 0;
  border-top: none;
  max-width: none;
  text-align: left;
}
.footer-bottom-row .footer-bottom-left .footer-certs .cert-row {
  justify-content: flex-start;
}
.footer-bottom-row .footer-bottom-left .footer-bottom {
  margin: 0;
  padding-top: 0;
  border-top: none;
  max-width: none;
  justify-content: flex-start;
  text-align: left;
}
.footer-bottom-row .footer-bottom-right {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.footer-bottom-row .footer-bottom-right .flogo-wrap {
  display: inline-block;
}
.footer-bottom-row .footer-bottom-right .flogo-wrap img {
  max-width: 340px;
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .footer-grid.footer-grid-3col {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  /* Columns stack/realign on mobile — no need for the desktop alignment offset */
  .footer-grid.footer-grid-3col > div:nth-child(3) { grid-column: 1 / -1; }   /* Connect column spans full width so its logo can center on the whole footer */
  .footer-grid-3col .footer-col-logo.flogo-wrap { display: block; margin: 28px auto 0; }
  .footer-bottom-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-bottom-row .footer-bottom-right {
    justify-content: center;
  }
  .footer-bottom-row .footer-bottom-right .flogo-wrap img {
    max-width: 240px;
  }
  .footer-massive { margin-top: 4px; }
}
@media (max-width: 480px) {
  .footer-grid.footer-grid-3col {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Simplified footer: certifications+copyright on left, logo on right */
.footer-grid.footer-grid-simple {
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border-dark);
}
.footer-grid-simple .footer-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.footer-grid-simple .footer-left .footer-certs {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.footer-grid-simple .footer-left .footer-bottom {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  font-size: 13px;
  opacity: 0.75;
}
.footer-grid-simple .footer-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.footer-grid-simple .footer-right .flogo-wrap {
  display: inline-block;
}
.footer-grid-simple .footer-right .flogo-wrap img {
  max-width: 280px;
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .footer-grid.footer-grid-simple {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-grid-simple .footer-right {
    justify-content: center;
  }
  .footer-grid-simple .footer-right .flogo-wrap img {
    max-width: 220px;
  }
}
.footer .flogo-wrap {
  display: inline-block;
  width: 220px;
  margin-bottom: 24px;
}
.footer .flogo-wrap img { width: 100%; height: auto; display: block; }
.footer .ftag {
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.7;
  max-width: 340px;
}
.footer h4 {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.55;
  margin: 0 0 18px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a {
  color: var(--paper);
  text-decoration: none;
  font-size: 15px;
  opacity: 0.85;
  transition: opacity .2s, color .2s;
}
.footer ul a:hover { color: var(--cyan-500); opacity: 1; }

/* Sitemap sub-items (Press Release / News Room under News, Employees / HR
   under Sign In). Smaller, dimmer, indented. */
.footer ul .footer-sublist {
  list-style: none;
  margin: 8px 0 4px;
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid rgba(250,250,250,0.12);
}
.footer ul .footer-sublist li { margin: 0; }
.footer ul .footer-sublist a {
  font-size: 14px;
  opacity: 0.65;
}
.footer ul .footer-sublist a:hover { opacity: 1; }

.footer-certs {
  max-width: 1500px;
  margin: 22px auto 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(250,250,250,0.10);
}
.footer-certs h4 {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,250,250,0.6);
  margin: 0 0 20px;
}
.cert-row {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.cert-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), filter 0.3s;
}
.cert-row a:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 20px rgba(0,180,216,0.35));
}
.cert-row img {
  width: 90px;
  height: 90px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: #fff;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.footer-bottom {
  max-width: 1500px;
  margin: 18px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.55;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-massive {
  margin: 4px 0 0;
  padding: 0 2vw;
  font-weight: 700;
  font-size: clamp(36px, 10.5vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, rgba(0,180,216,0.32) 0%, rgba(2,62,138,0.0) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  text-align: center;
}

/* Ensure seamless dark-on-dark join between partners → footer */
.partners + .footer {
  border-top: none;
}

/* Icon spacing in labels */
.hero-stats .s .lbl i {
  margin-right: 5px;
  font-size: 16px;
  opacity: 0.75;
}
.contact-block .ckey i {
  margin-right: 6px;
  font-size: 16px;
  opacity: 0.75;
}
.hero-meta-strip i {
  margin-right: 5px;
  font-size: 16px;
  opacity: 0.75;
}
.eyebrow i {
  margin-right: 5px;
  font-size: 16px;
  opacity: 0.75;
}
.footer ul a i { margin-right: 8px; font-size: 16px; opacity: 0.75; }

/* =========================
   Scroll-driven vector graphics
   ========================= */
.scroll-vectors {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 820px) {
  section { padding: 100px 6vw 80px; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-bottom { max-width: none; }
  /* Top nav mobile */
  .top-nav {
    right: 16px;
    top: 16px;
    padding: 4px;
  }
  .top-nav.is-open {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
    contain: none !important;
    z-index: 9001;
  }
  .nav-links { display: none; }
  .nav-burger { display: flex; position: relative; z-index: 9002; }
  .top-nav.is-open .nav-links,
  .nav-links.is-teleported {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 0;
    margin: 0 !important;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 16px 24px 40px;
    box-shadow: none;
    gap: 14px;
    justify-content: flex-start;
    align-items: stretch;
    overflow-y: auto;
    z-index: 9000;
    animation: mobileMenuFade 0.28s ease;
  }
  @keyframes mobileMenuFade {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Mobile menu logo — sits at top-left, aligned with the X close button */
  .top-nav.is-open .mobile-menu-logo,
  .nav-links.is-teleported .mobile-menu-logo {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0 0 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(18,18,18,0.08);
    min-height: 48px;
  }
  .top-nav.is-open .mobile-menu-logo img,
  .nav-links.is-teleported .mobile-menu-logo img {
    max-width: 180px;
    height: 48px;
    width: auto;
    display: block;
    margin: 0;
    object-fit: contain;
    object-position: left center;
  }
  .top-nav.is-open .nav-link,
  .nav-links.is-teleported .nav-link {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: rgba(18,18,18,0.55);
    background: transparent;
    border: none;
    border-radius: 12px;
    text-align: center;
    justify-content: center;
    gap: 12px;
    transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s;
  }
  .top-nav.is-open .nav-dropdown,
  .nav-links.is-teleported .nav-dropdown {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  /* Mobile: Products is a direct link — hide the submenu + its chevron. */
  .nav-products-submenu {
    display: none;
  }
  .products-dropdown .nav-chevron {
    display: none !important;
  }
  .top-nav.is-open .nav-products-submenu .nav-sublink,
  .nav-links.is-teleported .nav-products-submenu .nav-sublink {
    font-size: 15px !important;
    padding: 12px 20px !important;
    color: rgba(18,18,18,0.7) !important;
    background: transparent !important;
    border: none !important;
  }
  .top-nav.is-open .nav-products-submenu .nav-sublink i,
  .nav-links.is-teleported .nav-products-submenu .nav-sublink i {
    color: var(--cyan-500) !important;
    font-size: 14px !important;
  }
  .top-nav.is-open .nav-products-submenu .nav-sublink:hover,
  .nav-links.is-teleported .nav-products-submenu .nav-sublink:hover {
    background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 60%, #023E8A 100%) !important;
    color: #fff !important;
  }
  .top-nav.is-open .nav-products-submenu .nav-sublink:hover i,
  .nav-links.is-teleported .nav-products-submenu .nav-sublink:hover i { color: #fff !important; }
  .top-nav.is-open .nav-link i,
  .nav-links.is-teleported .nav-link i {
    font-size: 18px;
    color: rgba(0,180,216,0.65);
    opacity: 1;
  }
  .top-nav.is-open .nav-link:hover,
  .top-nav.is-open .nav-link:focus,
  .top-nav.is-open .nav-link:active,
  .top-nav.is-open .nav-link.is-active,
  .nav-links.is-teleported .nav-link:hover,
  .nav-links.is-teleported .nav-link:focus,
  .nav-links.is-teleported .nav-link:active,
  .nav-links.is-teleported .nav-link.is-active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 60%, #023E8A 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 28px rgba(0,180,216,0.35) !important;
    transform: translateY(-1px) !important;
  }
  .top-nav.is-open .nav-link:hover i,
  .top-nav.is-open .nav-link:focus i,
  .top-nav.is-open .nav-link:active i,
  .top-nav.is-open .nav-link.is-active i,
  .nav-links.is-teleported .nav-link:hover i,
  .nav-links.is-teleported .nav-link:focus i,
  .nav-links.is-teleported .nav-link:active i,
  .nav-links.is-teleported .nav-link.is-active i { color: #ffffff !important; opacity: 1 !important; }
  /* Products trigger could render white in the mobile menu — force it to match
     the other items: dark text by default, blue gradient on tap / active. */
  .nav-links.is-teleported .products-dropdown > .nav-link,
  .top-nav.is-open .products-dropdown > .nav-link {
    color: rgba(18,18,18,0.55) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .nav-links.is-teleported .products-dropdown > .nav-link:hover,
  .nav-links.is-teleported .products-dropdown > .nav-link:focus,
  .nav-links.is-teleported .products-dropdown > .nav-link:active,
  .nav-links.is-teleported .products-dropdown > .nav-link.is-active,
  .top-nav.is-open .products-dropdown > .nav-link:hover,
  .top-nav.is-open .products-dropdown > .nav-link:focus,
  .top-nav.is-open .products-dropdown > .nav-link:active,
  .top-nav.is-open .products-dropdown > .nav-link.is-active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 60%, #023E8A 100%) !important;
    box-shadow: 0 10px 28px rgba(0,180,216,0.35) !important;
  }
  .nav-links.is-teleported .products-dropdown > .nav-link i,
  .top-nav.is-open .products-dropdown > .nav-link i { color: rgba(0,180,216,0.65) !important; }
  .nav-links.is-teleported .products-dropdown > .nav-link:hover i,
  .nav-links.is-teleported .products-dropdown > .nav-link.is-active i,
  .top-nav.is-open .products-dropdown > .nav-link:hover i,
  .top-nav.is-open .products-dropdown > .nav-link.is-active i { color: #ffffff !important; }
  .top-nav.is-open .nav-dropdown-menu,
  .nav-links.is-teleported .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding: 8px 0 0;
    backdrop-filter: none;
    background: transparent;
    display: none;            /* collapsed: take no space — no gap */
    flex-direction: column;
    gap: 8px;
  }
  /* Accordion: a dropdown's submenu only appears (and takes space) when tapped open */
  .top-nav.is-open .nav-dropdown.is-open .nav-dropdown-menu,
  .nav-links.is-teleported .nav-dropdown.is-open .nav-dropdown-menu {
    display: flex;
  }
  .top-nav.is-open .nav-dropdown-item,
  .nav-links.is-teleported .nav-dropdown-item {
    padding: 14px 22px;
    font-size: 15px;
    color: var(--navy-900);
    border-radius: 10px;
    background: rgba(0,180,216,0.06);
    transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s;
  }
  .top-nav.is-open .nav-dropdown-item i,
  .nav-links.is-teleported .nav-dropdown-item i { color: var(--cyan-500); }
  /* Same blue-gradient highlight as every other mobile-menu item */
  .top-nav.is-open .nav-dropdown-item:hover,
  .top-nav.is-open .nav-dropdown-item:focus,
  .top-nav.is-open .nav-dropdown-item:active,
  .nav-links.is-teleported .nav-dropdown-item:hover,
  .nav-links.is-teleported .nav-dropdown-item:focus,
  .nav-links.is-teleported .nav-dropdown-item:active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 60%, #023E8A 100%) !important;
    box-shadow: 0 10px 28px rgba(0,180,216,0.35) !important;
    transform: translateY(-1px);
  }
  .top-nav.is-open .nav-dropdown-item:hover i,
  .top-nav.is-open .nav-dropdown-item:focus i,
  .top-nav.is-open .nav-dropdown-item:active i,
  .nav-links.is-teleported .nav-dropdown-item:hover i,
  .nav-links.is-teleported .nav-dropdown-item:focus i,
  .nav-links.is-teleported .nav-dropdown-item:active i { color: #ffffff !important; }
  /* News dropdown in mobile: show its submenu inline, same as Sign In. */
  /* Mobile: dark translucent gradient for readability — ABOVE the video */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
      rgba(1,2,52,0.92) 0%,
      rgba(2,40,90,0.80) 35%,
      rgba(3,4,94,0.68) 60%,
      rgba(1,2,52,0.90) 100%);
    z-index: 2;
    pointer-events: none;
  }
  /* Mobile: DNA video sits between heading and description — fixed size so it doesn't grow with content */
  /* Pin heading to a predictable height so video position math is reliable */
  .hero h1.display {
    font-size: clamp(30px, 8vw, 44px);
    line-height: 1.02;
    min-height: 0;             /* hug the title text; the grid cell still sizes to the tallest line so it stays stable */
    margin-bottom: 0;
  }
  /* Mobile: video tucked closer to heading — slight top overlap is acceptable,
     but lede stays clear at the bottom. */
  .hero-video-wrap {
    /* On mobile the molecule sits in normal flow BETWEEN the title and the
       subtext (main.js moves the element into Set A for ≤768px). */
    position: static;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 14px 0;           /* small tidy gap; the molecule fills its box vertically (rotation overhang sits in this padding) */
    opacity: 1;
    z-index: 2;
    pointer-events: none;
    overflow: visible;         /* never clip the rotated molecule frame */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-inner { z-index: 3; padding: 96px 0 48px; }
  .hero-meta-strip { z-index: 3; padding: 12px 0 16px; }
  .hero { min-height: auto; overflow-x: clip; }   /* clip the rotated molecule's empty side corners; no horizontal scroll */
  /* Subtext sits just below the in-flow molecule. */
  .hero-bottom { margin-top: 4px; }
  .hero-video {
    position: static;
    top: auto; left: auto;
    transform: rotate(22deg);
    width: 100%;
    max-width: 400px;
    height: auto;
    aspect-ratio: 3 / 4;       /* match the portrait molecule video (834x1112) so it isn't letterboxed into a narrow shape */
    filter: drop-shadow(0 16px 48px rgba(0,180,216,0.6)) contrast(1.18) brightness(1.12) saturate(1.1);
  }
  .hero-video-wrap .ring { display: none; }
  /* Set B ("World's First ... Antidote"): the snake-bite video sits INLINE between
     the title and the subtext (main.js relocates it into Set B), at two-thirds of
     the hero width, instead of being a full-screen background. */
  .hero-bg-b {
    position: relative;
    inset: auto;
    left: 50%;
    transform: translateX(-50%);   /* center on the viewport even though it's wider than its column */
    width: 90vw;                /* almost the full screen width, equal margins */
    max-width: 680px;
    margin: 16px 0 12px;        /* small gap to the title above (<=20px) */
    aspect-ratio: 16 / 9;       /* matches the 854x480 video — no clipping */
    height: auto;
    border-radius: 14px;
    overflow: hidden;
    z-index: 3;
  }
  .hero-bg-b-video {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-bg-b::after { display: none; }   /* no full-screen dark wash when inline */
  .products-head { flex-direction: column; align-items: flex-start; }
  .product-stage { min-height: 560px; }
  .slide .copy { bottom: 24px; left: 24px; right: 24px; }
  .slide .num { font-size: 34px; margin-bottom: 8px; }
  .slide h3 { font-size: clamp(22px, 5.5vw, 32px); margin-bottom: 12px; }
  .slide .desc { font-size: 14px; margin-bottom: 18px; }
  .slide .specs { gap: 18px; }
  .carousel-controls { gap: 16px; margin-top: 28px; }
  .catalogue-btn-wrap { padding: 22px 0 4px; }
  .products { padding-bottom: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-certs { margin-top: 36px; padding-top: 24px; }
  .cert-row { gap: 16px; }
  .cert-row img { width: 72px; height: 72px; }
  /* Mobile: minimal ticks-only sidenav — no box, label only on hover/tap or active */
  .sidenav {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    gap: 14px;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .sidenav a {
    gap: 10px;
    padding: 6px 0 6px 12px;
    background: transparent;
  }
  /* Only the active section's label is visible. Other labels appear on hover/tap.
     Color is always cyan so it's readable on any background (dark or light sections) */
  .sn-label {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    font-weight: 800;
    opacity: 0;
    transform: translateX(6px);
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    padding: 0;
    background: transparent;
    color: var(--cyan-500);
    box-shadow: none;
    white-space: nowrap;
    text-shadow: none;
  }
  .sidenav a:hover .sn-label,
  .sidenav a:active .sn-label,
  .sidenav a:focus .sn-label,
  .sidenav a.is-active .sn-label {
    opacity: 1;
    transform: translateX(0);
  }
  /* Bigger tap area for touch devices */
  .sidenav a { padding: 8px 0 8px 14px; }
  .sn-tick { width: 14px; opacity: 0.45; }
  .sidenav a:hover .sn-tick { width: 18px; opacity: 0.85; }
  .sidenav a.is-active .sn-tick {
    width: 24px;
    opacity: 1;
    background: var(--cyan-500);
  }
  .logo-card { width: auto; height: 52px; padding: 6px 14px; top: 14px; left: 16px; }
  .logo-card .logo-img { height: 40px; }
  .hero-eyebrow-row { margin-bottom: 36px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 22px;
    margin-top: 36px;
  }
  .hero-stats .s { text-align: left; }
  .hero-stats .s .num { font-size: 26px; }
  .hero-stats .s .lbl { font-size: 9.5px; letter-spacing: 0.1em; line-height: 1.35; margin-top: 6px; }
  .hero-stats .s .lbl i { font-size: 12px; margin-right: 3px; }

  /* Product tabs: uniform-width centered pills */
  .product-tabs {
    flex-direction: column;
    align-items: center;
    overflow-x: visible;
    scroll-snap-type: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    gap: 6px;
  }
  .product-tab {
    width: 220px;
    max-width: 220px;
    justify-content: center;
    padding: 9px 16px;
    font-size: 12px;
  }
  .product-tab i { font-size: 13px; }
}

/* =========================
   CAREERS SECTION
   ========================= */
.careers-grid {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.careers-info { padding-right: 8px; }
.careers-eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-500, #00B4D8);
  margin-bottom: 24px;
}
.careers-info h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(34px, 4vw, 64px);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink, #121212);
  margin: 14px 0 22px;
  line-height: 1.02;
  text-wrap: balance;
}
.careers-info h2 em {
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.04em;
}
.careers-info .lede,
.careers-info p {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(18, 18, 18, 0.7);
  margin: 0 0 18px;
  max-width: 560px;
}
.careers-facility {
  margin: 28px 0 0;
}
/* Same facility image reused in the Certifications panel — medium, centered */
.cert-facility {
  max-width: 720px;
  margin: 40px auto 0;
}
.careers-facility img {
  display: block;
  width: 100%;
  height: auto;
  /* drop-shadow follows the building silhouette, not a rectangle —
     requires the image to have a transparent (cut-out) background */
  filter:
    drop-shadow(0 0 6px rgba(0, 180, 216, 0.85))
    drop-shadow(0 0 14px rgba(0, 180, 216, 0.55))
    drop-shadow(0 0 28px rgba(0, 119, 182, 0.40));
}

.careers-emails-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 24px 0 12px;
}
.careers-emails {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}
.careers-email {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: var(--navy-900);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  transition: color 0.25s, transform 0.25s;
}
.careers-email-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cyan-500), #0077B6);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.careers-email-addr {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.careers-email:hover {
  color: var(--cyan-500);
  transform: translateY(-1px);
}
.careers-email:hover .careers-email-icon {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0, 180, 216, 0.45);
}

.careers-form { display: flex; flex-direction: column; gap: 16px; }
.careers-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.careers-form input[type="text"],
.careers-form input[type="email"],
.careers-form input[type="tel"],
.careers-form textarea,
.careers-form input[type="file"] {
  padding: 16px 18px !important;
  font-size: 15px !important;
}
.careers-form textarea { min-height: 160px !important; }
.careers-submit { padding: 18px 32px; font-size: 17px; }
.careers-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'Inter', sans-serif;
}
.careers-form label > span {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #121212);
  letter-spacing: -0.005em;
}
.careers-form input[type="text"],
.careers-form input[type="email"],
.careers-form input[type="tel"],
.careers-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(18, 18, 18, 0.1);
  background: #f3f5f8;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ink, #121212);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.careers-form input::placeholder,
.careers-form textarea::placeholder {
  color: rgba(18, 18, 18, 0.4);
}
.careers-form input:focus,
.careers-form textarea:focus {
  outline: none;
  border-color: var(--cyan-500, #00B4D8);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.15);
}
.careers-form textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}
.careers-form input[type="file"] {
  padding: 10px 14px;
  background: #f3f5f8;
  border: 1px solid rgba(18, 18, 18, 0.1);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.careers-submit {
  margin-top: 8px;
  padding: 16px 28px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #6FCBFB 0%, var(--cyan-500, #00B4D8) 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
  box-shadow: 0 10px 28px rgba(0, 180, 216, 0.35);
}
.careers-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 180, 216, 0.45);
  filter: brightness(1.04);
}
.careers-form-note {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(18, 18, 18, 0.5);
  margin: 4px 0 0;
}

@media (max-width: 920px) {
  .careers-grid { grid-template-columns: 1fr; gap: 32px; max-width: 100%; min-width: 0; }
  .careers-info { padding-right: 0; min-width: 0; max-width: 100%; }
  .careers-form { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .careers-form-row { grid-template-columns: 1fr; gap: 14px; max-width: 100%; }
  .careers-form label { min-width: 0; max-width: 100%; }
  .careers-form input,
  .careers-form textarea,
  .careers-form input[type="file"] {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .careers-submit {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 16px 24px;
    font-size: 15px;
  }
  .careers-form-note { max-width: 100%; word-wrap: break-word; }
}
@media (max-width: 560px) {
  .careers-emails a { font-size: 14px; }
  .careers-submit { padding: 14px 20px; font-size: 14px; }
}

/* =========================
   PRODUCTS PAGE
   ========================= */
.products-page { background: var(--paper); }

/* The global `section { min-height: 100vh }` forces every section to fill the viewport,
   creating huge empty space on the products page. Override it so each section
   sizes to its actual content. Per-section padding is kept (defined below). */
.products-page section {
  min-height: 0;
  padding: 0;
  padding-right: 0;
}
/* Restore the carefully tuned padding on each products-page section
   (using higher specificity to win over the reset above) */
.products-page .products-hero { padding: 100px 6vw 40px; padding-right: 6vw; }
.products-page .products-main { padding: 20px 6vw 8px !important; padding-right: 6vw !important; }
.products-page .products-controls { padding: 28px 6vw 48px !important; padding-right: 6vw !important; }
.products-page .products-massive-page { padding: 24px 4vw 28px !important; padding-right: 4vw !important; }
.products-page .footer { padding: 80px 6vw 32px; padding-right: 6vw; }

/* Page-active nav state */
.nav-link.is-active-page,
.top-nav.is-hero .nav-link.is-active-page {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 60%, #023E8A 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0,180,216,0.30);
}
.nav-link.is-active-page i,
.top-nav.is-hero .nav-link.is-active-page i { color: #ffffff; opacity: 1; }

/* Hero */
.products-hero {
  color: var(--paper);
  background:
    radial-gradient(60% 70% at 18% 28%, rgba(0,180,216,0.20), transparent 60%),
    radial-gradient(50% 50% at 95% 75%, rgba(144,224,239,0.10), transparent 60%),
    radial-gradient(80% 80% at 80% 0%, rgba(0,119,182,0.30), transparent 50%),
    linear-gradient(135deg, #03045E 0%, #023E8A 60%, #0077B6 100%);
  padding: 100px 6vw 40px;
  position: relative;
  overflow: hidden;
}
.products-hero-inner {
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.products-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,250,250,0.7);
  margin-bottom: 36px;
}
/* Each crumb stays on one line; the row wraps as whole crumbs on small screens */
.products-breadcrumb a,
.products-breadcrumb .bc-current { white-space: nowrap; }
.products-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cyan-300);
  text-decoration: none;
  transition: color 0.25s;
}
.products-breadcrumb a:hover { color: #fff; }
.products-breadcrumb .bc-arrow { color: rgba(250,250,250,0.5); font-size: 11px; }
.products-breadcrumb .bc-current { color: var(--paper); }

.products-hero-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(40px, 6.5vw, 96px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 0 0 28px;
  text-wrap: balance;
}
.products-rotator {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  min-width: 1ch;
}
.products-rotator .pr-current {
  display: inline-block;
  background: linear-gradient(120deg, var(--cyan-300) 0%, var(--cyan-500) 60%, var(--paper) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.products-rotator .pr-enter { opacity: 0; transform: translateY(0.4em); }
.products-rotator .pr-leave { opacity: 0; transform: translateY(-0.4em); position: absolute; left: 0; top: 0; }

.products-hero-lede {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(250,250,250,0.78);
  max-width: 620px;
  margin: 0;
}

/* Top category row */
.products-cat-row-section {
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(0,180,216,0.10), transparent 60%),
    linear-gradient(180deg, #FAFAFA 0%, #f0f3f8 100%);
  padding: 24px 6vw 8px;
  border-top: 1px solid rgba(0,180,216,0.10);
}
.products-cat-row {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.products-cat-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid rgba(0,180,216,0.25);
  color: var(--navy-900);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.products-cat-row-btn i { color: var(--cyan-500); font-size: 14px; transition: color 0.25s; }
.products-cat-row-btn:hover,
.products-cat-row-btn.is-active {
  background: var(--cyan-500);
  color: var(--navy-900);
  border-color: var(--cyan-500);
  box-shadow: 0 6px 20px rgba(0,180,216,0.28);
}
.products-cat-row-btn:hover i,
.products-cat-row-btn.is-active i { color: var(--navy-900); }

/* Main: sidebar + grid — full-width section, content centered to 1500px via inner wrapper */
.products-main {
  background: linear-gradient(180deg, #f0f3f8 0%, #FAFAFA 100%);
  padding: 20px 6vw 28px;
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1500px);
  justify-content: center;
  gap: 40px;
}
.products-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 100px;
  align-self: start;
}
.products-sidebar-title {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.55);
  margin: 0 0 8px;
}
.products-sidebar-title-div { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(18,18,18,0.08); }
.products-sidebar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,180,216,0.40);
  background: rgba(255,255,255,0.5);
  color: var(--navy-900);
  box-shadow: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
  text-align: left;
}
.psb-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  color: var(--cyan-500);
  flex-shrink: 0;
  transition: color 0.25s;
}
.products-sidebar-btn:hover .psb-icon,
.products-sidebar-btn.is-active .psb-icon { color: #fff; }
.psb-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan-500);
  flex-shrink: 0;
  transition: background 0.25s, box-shadow 0.25s;
}
.products-sidebar-btn:hover {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,180,216,0.45);
}
.products-sidebar-btn:hover .psb-dot { background: #fff; }
.products-sidebar-btn.is-active {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,180,216,0.45), inset 0 0 0 2px rgba(255,255,255,0.22);
}
.products-sidebar-btn.is-active .psb-dot {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
}

/* Grid */
.products-grid-wrap { min-height: 400px; }
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.pcard {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(18,18,18,0.06);
  box-shadow: 0 1px 2px rgba(3,4,94,0.05), 0 8px 24px -8px rgba(3,4,94,0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s, border-color 0.3s;
}
.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(3,4,94,0.08), 0 24px 48px -12px rgba(3,4,94,0.22);
  border-color: rgba(0,180,216,0.32);
}
.pcard-img {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-bottom: none;
  padding: 12px;
}
.pcard-img svg { width: 100%; max-width: 160px; height: auto; }
.pcard-img img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}
.pcard:hover .pcard-img img { transform: scale(1.05); }
.pcard { cursor: pointer; }

/* =========================
   PRODUCT DETAIL MODAL
   ========================= */
.pmodal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pmodal.is-open {
  display: flex;
  animation: pmodalFade 0.25s ease;
}
@keyframes pmodalFade { from { opacity: 0; } to { opacity: 1; } }
.pmodal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 94, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pmodal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(3, 4, 94, 0.4);
  animation: pmodalSlideUp 0.35s cubic-bezier(.22,1,.36,1);
}
@keyframes pmodalSlideUp {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.pmodal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(18, 18, 18, 0.08);
  color: rgba(18, 18, 18, 0.7);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, color 0.25s, transform 0.25s;
  z-index: 2;
}
.pmodal-close:hover {
  background: var(--navy-900);
  color: #fff;
  transform: rotate(90deg);
}
.pmodal-img {
  width: 100%;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: transparent;
  border-radius: 20px 20px 0 0;
}
.pmodal-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.pmodal-img svg { width: 100%; max-width: 220px; height: auto; }
.pmodal-body {
  padding: 24px 28px 28px;
}
.pmodal-name {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navy-900);
  margin: 0 0 18px;
  line-height: 1.2;
}
.pmodal-meta {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px 14px;
  margin: 0;
  font-family: 'Inter', sans-serif;
}
.pmodal-meta dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(18, 18, 18, 0.55);
  text-transform: uppercase;
}
.pmodal-meta dd {
  margin: 0;
  font-size: 14px;
  color: rgba(18, 18, 18, 0.85);
  line-height: 1.45;
}
.pmodal-meta .pcard-div { font-size: 10px; padding: 3px 10px; }

body.pmodal-open { overflow: hidden; }

@media (max-width: 560px) {
  .pmodal { padding: 12px; }
  .pmodal-card { max-width: 100%; border-radius: 16px; }
  .pmodal-img { height: 260px; padding: 24px; }
  .pmodal-body { padding: 20px 22px 24px; }
  .pmodal-name { font-size: 20px; }
  .pmodal-meta { grid-template-columns: 80px 1fr; gap: 8px 12px; }
}
.pcard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.pcard-name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy-900);
  margin: 0;
  line-height: 1.2;
  min-height: 36px;
}
.pcard-meta {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 4px 10px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.4;
}
.pcard-meta dt {
  font-weight: 700;
  color: rgba(18,18,18,0.55);
  letter-spacing: 0.04em;
}
.pcard-meta dd {
  margin: 0;
  color: rgba(18,18,18,0.78);
}
.pcard-div {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pcard-div-AXA {
  background: rgba(0,180,216,0.15);
  color: #0077B6;
  border: 1px solid rgba(0,180,216,0.30);
}
.pcard-div-NURA {
  background: rgba(2,62,138,0.15);
  color: #023E8A;
  border: 1px solid rgba(2,62,138,0.30);
}

.products-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 24px;
  color: rgba(18,18,18,0.45);
}
.products-empty i { font-size: 36px; margin-bottom: 16px; }

/* Controls: pagination only (division moved to sidebar) */
.products-controls {
  background: linear-gradient(180deg, #FAFAFA 0%, #eef3f9 100%);
  padding: 12px 6vw 16px;
  display: flex;
  justify-content: center;
}
.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 12px;
}
.pag-num, .pag-arrow {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0,180,216,0.40);
  background: rgba(255,255,255,0.5);
  color: var(--navy-900);
  box-shadow: none;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, color 0.25s, transform 0.2s, box-shadow 0.25s;
}
.pag-num:hover,
.pag-arrow:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,180,216,0.45);
}
.pag-num.is-active {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,180,216,0.45), inset 0 0 0 2px rgba(255,255,255,0.30);
}
.pag-arrow:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }

.division-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.division-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.6);
}
.division-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.division-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  border: 1.5px solid rgba(0,180,216,0.40);
  color: var(--navy-900);
  box-shadow: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.dp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan-500);
  transition: background 0.25s, box-shadow 0.25s;
}
.division-pill:hover {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,180,216,0.45);
}
.division-pill:hover .dp-dot { background: #fff; }
.division-pill.is-active {
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,180,216,0.45), inset 0 0 0 2px rgba(255,255,255,0.22);
}
.division-pill.is-active .dp-dot {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
}

/* Big decorative DYCINE PHARMA for products page */
.products-massive-page {
  background: linear-gradient(180deg, #03045E 0%, #023E8A 100%);
  color: var(--paper);
  text-align: center;
  padding: 80px 4vw 56px;
  position: relative;
}
.products-massive-page .products-massive-text {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 6vw, 90px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  background: linear-gradient(180deg, rgba(0,180,216,0.45) 0%, rgba(0,180,216,0.0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.products-massive-page .products-chevron {
  display: inline-flex;
  margin-top: 18px;
  color: var(--paper);
  transition: color .3s, transform .3s;
}
.products-massive-page .products-chevron:hover,
.products-massive-page .products-chevron:focus-visible {
  color: var(--cyan-500);
  animation-play-state: paused;
  outline: none;
}
.products-new-label {
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.92;
}

/* =========================
   PRODUCTS — Responsive
   ========================= */
@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   PRODUCTS PAGE — PREMIUM MOBILE LAYOUT (≤880px)
   ========================================================= */
@media (max-width: 880px) {
  /* Hero: compact, focused */
  .products-page .products-hero { padding: 90px 5vw 28px; }
  .products-hero-title { font-size: clamp(32px, 9.5vw, 56px); margin-bottom: 0; }
  .products-breadcrumb { margin-bottom: 24px; gap: 12px; font-size: 11px; }

  /* Main: single column flow */
  .products-page .products-main {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 12px 5vw 24px;
  }

  /* Sidebar becomes a sticky filter bar at top of content */
  .products-sidebar {
    position: sticky;
    top: 12px;
    z-index: 20;
    flex-direction: column;
    gap: 12px;
    padding: 14px 14px 12px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px) saturate(1.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    border: 1px solid rgba(0, 180, 216, 0.18);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(3, 4, 94, 0.08);
  }
  .products-sidebar-title {
    margin: 0;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: rgba(18, 18, 18, 0.45);
  }
  .products-sidebar-title-div {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(18, 18, 18, 0.06);
  }
  /* Each filter group becomes a horizontal scrollable pill row */
  .products-sidebar {
    display: grid;
    grid-template-areas:
      "cat-title"
      "cat-pills"
      "div-title"
      "div-pills";
    gap: 8px;
  }
  .products-sidebar > .products-sidebar-title:nth-of-type(1) { grid-area: cat-title; }
  .products-sidebar > .products-sidebar-title-div { grid-area: div-title; margin-top: 0; padding-top: 10px; }
  /* Group category buttons */
  .products-sidebar-btn[data-cat] {
    grid-area: cat-pills;
  }
  .products-sidebar-btn[data-div] {
    grid-area: div-pills;
  }
  /* Reset grid layout — use flex wrappers below */
  .products-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  /* Group pills via simple inline-flex rows */
  .products-sidebar-title { padding: 4px 2px 2px; }
  /* Pills — compact tap targets */
  .products-sidebar-btn {
    padding: 9px 14px;
    font-size: 12.5px;
    border-radius: 999px;
    background: rgba(0, 180, 216, 0.04);
    border: 1px solid rgba(0, 180, 216, 0.18);
    color: rgba(18, 18, 18, 0.72);
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .products-sidebar-btn .psb-dot { width: 7px; height: 7px; }
  .products-sidebar-btn.is-active {
    background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 180, 216, 0.32);
  }
  .products-sidebar-btn.is-active .psb-dot { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.4); }

  /* Grid stays at 2 columns for density */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Premium cards */
  .pcard {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(3,4,94,0.04), 0 10px 24px -10px rgba(3,4,94,0.14);
    border: 1px solid rgba(0,180,216,0.10);
    background: #fff;
  }
  .pcard:hover { transform: translateY(-2px); }
  .pcard-img {
    height: 120px;
    padding: 10px;
    background:
      radial-gradient(60% 80% at 50% 30%, rgba(0,180,216,0.10), transparent 65%),
      linear-gradient(180deg, #f7fafd 0%, #ecf2f8 100%);
  }
  .pcard-img svg { max-width: 110px; }
  .pcard-body { padding: 12px 12px 14px; gap: 8px; }
  .pcard-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.18;
    min-height: 0;
    color: var(--navy-900);
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .pcard-meta {
    grid-template-columns: 56px 1fr;
    gap: 2px 8px;
    font-size: 10.5px;
    line-height: 1.35;
  }
  .pcard-meta dt { font-size: 9.5px; letter-spacing: 0.06em; }
  .pcard-meta dd { font-size: 11px; }
  .pcard-div { font-size: 9px; padding: 2px 8px; letter-spacing: 0.14em; }

  /* Pagination — pill bar with comfortable taps */
  .products-controls { padding: 16px 4vw 24px; }
  .pagination { gap: 6px; }
  .pag-num, .pag-arrow {
    width: 38px;
    height: 38px;
    font-size: 13px;
    font-weight: 700;
  }

  /* Decorative NEW PRODUCT INNOVATION — tighten on mobile */
  .products-page .products-massive-page { padding: 36px 4vw 36px; }
  .products-massive-page .products-massive-text {
    font-size: clamp(20px, 7.5vw, 44px);
    letter-spacing: -0.025em;
  }
}

/* =========================================================
   ≤560px — phone-specific polish
   ========================================================= */
@media (max-width: 560px) {
  .products-page .products-hero { padding: 84px 5vw 22px; }
  .products-hero-title { font-size: clamp(28px, 8.5vw, 42px); line-height: 1; }
  .products-breadcrumb { font-size: 10px; gap: 10px; margin-bottom: 18px; }
  .products-breadcrumb a span { display: none; }

  /* Keep 2-col grid even on small phones for premium density */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pcard-img { height: 100px; padding: 8px; }
  .pcard-img svg { max-width: 90px; }
  .pcard-body { padding: 10px 10px 12px; gap: 6px; }
  .pcard-name { font-size: 12px; }
  .pcard-meta { grid-template-columns: 50px 1fr; font-size: 10px; }
  .pcard-meta dt { font-size: 9px; }
  .pcard-meta dd { font-size: 10.5px; }

  /* Sidebar pills tighter */
  .products-sidebar { padding: 12px 12px 10px; border-radius: 16px; }
  .products-sidebar-btn { padding: 8px 12px; font-size: 11.5px; }

  /* Pagination compact */
  .pag-num, .pag-arrow { width: 34px; height: 34px; font-size: 12px; }
}

/* ≤380px — tiny phones — fall back to single column to keep cards readable */
@media (max-width: 380px) {
  .products-grid { grid-template-columns: 1fr; gap: 12px; }
  .pcard-img { height: 140px; }
}

/* ============================================
   PRESS RELEASES PAGE
   ============================================ */
/* Override global `section { min-height: 100vh }` so press/news sections size
   to their content. Per-section padding stays via the rules below. */
.press-page section {
  min-height: 0;
  padding: 0;
}
.press-page .press-hero {
  padding: 100px 6vw 48px;
}
/* Section switcher: Media & Events <-> Innovation Updates — matches .about-tab design */
.news-toggle {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 48px;
}
.news-toggle a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  min-width: 200px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--navy-900);
  background: rgba(255,255,255,0.5);
  border: 1.5px solid rgba(0,180,216,0.40);
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s, background 0.3s, color 0.3s, border-color 0.3s;
}
.news-toggle a i { font-size: 14px; opacity: 1; color: var(--cyan-500); }
.news-toggle a:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,180,216,0.45);
}
.news-toggle a.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(0,180,216,0.45), inset 0 0 0 2px rgba(255,255,255,0.18);
}
.news-toggle a:hover i,
.news-toggle a.is-active i { color: #fff; opacity: 1; }
/* Dark-background variant (Innovation Updates / carousel section) */
.news-toggle.on-dark a {
  color: var(--paper);
  background: rgba(255,255,255,0.08);
}
.news-toggle.on-dark a:hover,
.news-toggle.on-dark a.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--cyan-500) 0%, #0077B6 100%);
}
/* Product Innovations carousel: match the homepage .products section box exactly
   (the press-page reset above strips section padding/min-height) */
.press-page .products {
  min-height: 100vh;
  padding: 120px 7vw 100px;
  padding-right: max(7vw, var(--nav-clear));
}
.press-page .products-massive-page {
  padding: 56px 4vw 56px;
  margin-top: 0;
}
.press-page .products-massive-page .products-chevron { margin-top: 10px; }
.press-page .footer { padding: 60px 6vw 32px; }
.press-hero .press-hero-sub {
  margin-top: 14px;
  margin-bottom: 0;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  font-weight: 400;
}
.press-page .press-main {
  background: #f6f9fc;
  padding: 56px 6vw 96px;
}
.press-wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.press-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(2,62,138,0.08);
  box-shadow: 0 6px 24px rgba(2,62,138,0.06);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.press-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(2,62,138,0.14);
  border-color: rgba(0,180,216,0.5);
}
.press-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.press-card-thumb {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, #023E8A 0%, #00B4D8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 64px;
}
.press-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  backdrop-filter: blur(6px);
}
.press-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.press-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00B4D8;
}
.press-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: #023E8A;
  margin: 0;
}
.press-card-desc {
  font-size: 15px;
  line-height: 1.55;
  color: #4a5568;
  margin: 0;
}
.press-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #023E8A;
  transition: gap .25s ease, color .25s ease;
}
.press-card:hover .press-card-cta {
  color: #00B4D8;
  gap: 14px;
}
@media (max-width: 720px) {
  .press-page .press-main { padding: 50px 5vw 70px; }
  .press-grid { grid-template-columns: 1fr; gap: 20px; }
  .press-card-thumb { height: 150px; font-size: 52px; }
  .press-card-title { font-size: 18px; }
  .press-hero .press-hero-sub { font-size: 15px; }
}

/* Featured cover-story spread */
.press-feature {
  grid-column: 1 / -1;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(2,62,138,0.08);
  box-shadow: 0 10px 36px rgba(2,62,138,0.08);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.press-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(2,62,138,0.16);
  border-color: rgba(0,180,216,0.5);
}
.press-feature-link {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2.1fr);
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  min-height: 420px;
}
.press-feature-meta {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #f1f7fc 100%);
}
.press-feature-meta .press-card-title {
  font-size: 26px;
  line-height: 1.25;
}
.press-feature-meta .press-card-desc {
  font-size: 16px;
}
.press-feature-image {
  background: #f6f9fc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.press-feature-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease;
}
.press-feature:hover .press-feature-image img {
  transform: scale(1.02);
}
@media (max-width: 980px) {
  .press-feature-link {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .press-feature-image { order: -1; }
  .press-feature-image img { height: auto; }
  .press-feature-meta { padding: 28px 24px 32px; }
  .press-feature-meta .press-card-title { font-size: 22px; }
}

/* ============================================
   NEWS ROOM PAGE
   ============================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.news-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(2,62,138,0.08);
  box-shadow: 0 6px 24px rgba(2,62,138,0.06);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(2,62,138,0.14);
  border-color: rgba(0,180,216,0.5);
}
.news-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.news-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a1a3a;
}
.news-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease;
}
.news-card:hover .news-card-thumb img {
  transform: scale(1.05);
}
.news-card-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.news-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.news-card-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  letter-spacing: 0.02em;
}
.news-card-date i { color: #00B4D8; }
.news-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  color: #023E8A;
  margin: 0;
}
.news-card-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #4a5568;
  margin: 0;
}
.news-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #023E8A;
  transition: gap .25s ease, color .25s ease;
}
.news-card:hover .news-card-cta {
  color: #00B4D8;
  gap: 14px;
}
@media (max-width: 720px) {
  .news-grid { grid-template-columns: 1fr; gap: 20px; }
  .news-card-icon { font-size: 58px; }
  .news-card-title { font-size: 17px; }
}

/* ============================================
   ARTICLE PAGES (individual news posts)
   ============================================ */
.article-hero {
  padding: 100px 6vw 0;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.article-hero .article-title { margin-bottom: 0; padding-bottom: 0; }
.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,4,94,0.78) 0%, rgba(2,62,138,0.85) 100%);
  z-index: 1;
}
.article-hero .products-hero-inner { position: relative; z-index: 2; }
/* All article heroes use the clean .products-hero blue gradient + ::before
   overlay — background photos removed for a consistent look across pages. */
.article-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 18px 0 18px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.article-meta-row i { color: #90E0EF; margin-right: 4px; }
.article-cat {
  background: rgba(0,180,216,0.22);
  border: 1px solid rgba(0,180,216,0.5);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.article-meta-sep { color: rgba(255,255,255,0.4); }
.article-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  max-width: 1100px;
  margin: 0;
  overflow-wrap: break-word;
}
.article-main {
  background: #ffffff;
  padding: 24px 6vw 60px;
  overflow-x: hidden;
}
.article-body {
  max-width: 820px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.75;
  color: #2d3748;
  overflow-wrap: break-word;
}
.article-body p {
  margin: 0 0 22px;
}
.article-body strong { color: #023E8A; font-weight: 700; }
.article-list {
  margin: 0 0 26px;
  padding-left: 22px;
}
.article-list li {
  margin-bottom: 10px;
  line-height: 1.65;
}
.article-list li::marker { color: #00B4D8; }
.article-quote {
  margin: 32px 0;
  padding: 26px 30px;
  background: linear-gradient(135deg, #f1f7fc 0%, #e6f3fa 100%);
  border-left: 4px solid #00B4D8;
  border-radius: 0 12px 12px 0;
}
.article-quote p {
  margin: 0 0 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: #023E8A;
  font-style: italic;
}
.article-quote cite {
  display: block;
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  color: #4a5568;
  letter-spacing: 0.02em;
}
.article-back-row {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(2,62,138,0.12);
}
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #023E8A;
  text-decoration: none;
  transition: gap .25s ease, color .25s ease;
}
.article-back:hover {
  color: #00B4D8;
  gap: 14px;
}
@media (max-width: 720px) {
  .article-hero { padding: 90px 5vw 0; }
  .article-main { padding: 20px 5vw 50px; }
  .article-body { font-size: 16px; line-height: 1.7; }
  .article-quote { padding: 20px 22px; margin: 24px 0; }
  .article-quote p { font-size: 16px; }
}

/* Higher-specificity override to beat any stale .products-hero padding */
.article-page .article-hero { padding: 100px 6vw 0 !important; }
.article-page .article-main { padding: 20px 6vw 60px !important; }
.article-page .article-hero .article-title { margin: 0 !important; padding: 0 !important; }
.article-page .article-meta-row { margin-bottom: 10px !important; }
/* Align hero content (breadcrumb / meta / title) to the same centered column
   as the article body, so nothing is indented or misaligned. */
.article-page .article-hero .products-hero-inner { max-width: 820px; margin: 0 auto; }
.article-page .products-breadcrumb { margin-bottom: 22px; }
@media (max-width: 720px) {
  /* Breathing room at the bottom of the blue hero so the title isn't flush
     against the white body, and consistent 5vw gutters matching the body. */
  .article-page .article-hero { padding: 84px 5vw 22px !important; }
  .article-page .article-main { padding: 24px 5vw 52px !important; }
  .article-page .products-breadcrumb { margin-bottom: 16px; }
  /* Meta row: tidy wrapping, drop the dot separators so a wrapped byline
     never leaves a dangling "·" at the end of a line. */
  .article-page .article-meta-row { gap: 8px 14px; margin: 14px 0 16px !important; }
  .article-page .article-meta-sep { display: none; }
  .article-page .article-title { line-height: 1.12; }
}

/* =========================================================
   HOME CAROUSEL — MOBILE STACKED LAYOUT (≤768px)
   Each product card switches from a full-bleed video with overlaid text to a
   stacked card: the whole video sits at the top at its natural aspect ratio
   (entire frame visible, no cropping, no surrounding black bars) and the copy
   fills the space below. The card keeps a fixed width and height — only the
   split between video and text is dynamic, following the video height.
   ========================================================= */
@media (max-width: 768px) {
  /* Don't stretch every card to the tallest one — each card sizes to its own
     content, and JS syncs the clip height to the active card so there's no dead
     navy space below a shorter card's CTA. */
  .product-stage { min-height: 0; align-items: flex-start; }
  /* Round the TOP corners to match the rounded bottom. Seam-safe on mobile:
     the stacked video is static (no zoom/transform/filter), so this rounded
     clip rasterises on the pixel grid and can't seam. */
  .stage-clip {
    transition: height 0.55s cubic-bezier(.22,1,.36,1);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .slide {
    display: flex;
    flex-direction: column;
    /* Each card spans EXACTLY one stage width. Without this the in-flow video
       (intrinsic 1280px) expands the flex item far past the container, which
       clipped the card and desynced the translateX carousel. */
    flex: 0 0 100%;
    min-width: 0;               /* override desktop min-width:100% so content can't grow the item */
    max-width: 100%;
    height: auto;               /* card grows to fit its content — no clipping */
    background: #03045E;        /* navy backing for the copy area */
  }
  /* In the stacked layout the media wrapper flows as a normal top item rather
     than an absolute full-bleed layer (the desktop drift fix isn't needed when
     the card is stacked & static). */
  .slide-media {
    position: static;
    inset: auto;
    transform: none;
    filter: none;
    overflow: visible;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  /* Video pinned to the top at its intrinsic aspect ratio: full width, auto
     height means the element box equals the video frame — no letterboxing. */
  .slide .img {
    position: static;
    inset: auto;
    transform: none;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .slide video.img {
    width: 100%;
    max-width: 100%;
    height: auto;               /* keeps the native 16:9 aspect — no black bars, no clipping */
    object-fit: contain;
    filter: contrast(1.08) saturate(1.12);
    background: #03045E;
  }
  .slide.is-active .slide-media { animation: none; }   /* disable the scale/zoom */
  .slide-scrim { display: none; }              /* no scrim when stacked */
  .stage-corner { display: none; }             /* not needed — .stage-clip rounds the top */
  /* Copy fills the remaining height below the video and is vertically centred,
     so its placement adapts to each video’s height. */
  .slide .copy {
    position: static;
    inset: auto;
    bottom: auto;
    left: auto;
    right: auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 22px 24px 26px;
    overflow: visible;
    text-shadow: none;
  }
  .slide .copy .num { margin-bottom: 6px; }
  .slide .copy .slide-cta { margin-left: 0; margin-right: auto; }
}