/* ==========================================================================
   ARCUS MEDICAL — Design System
   Redesign built with taste-skill + ui-ux-pro-max.
   Language: premium-clinical medtech (Medtronic / Edwards / Intuitive family).
   Accent LOCK: teal (from the logo droplet). Structural dark: deep navy.
   Native CSS, no build step. Radius system: buttons/inputs 10px, cards 16px,
   badges pill (documented exception).
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand — deep petrol/teal-green structural (matches the logo droplet, NOT blue) */
  --navy-900: #0A2A2B;
  --navy-800: #0F3839;
  --navy-700: #164A49;
  --navy-600: #245E5B;

  /* Brand — teal-green accent (single locked accent, from the logo) */
  --teal-700: #0D6E62;
  --teal-600: #12857A;
  --teal-500: #17968A;
  --teal-400: #2CA99A;
  --aqua-300: #79D2C4;

  /* Neutrals (teal-tinted, low blue) */
  --ink:        #123338;   /* headings — dark teal charcoal */
  --slate:      #405357;   /* body (>=4.5:1 on white) */
  --slate-soft: #647779;   /* secondary text */
  --bg:         #FFFFFF;
  --bg-soft:    #F2F8F7;   /* green-tinted off-white */
  --bg-tint:    #E4F1EE;
  --border:     #D6E6E2;
  --border-strong: #BFD8D2;

  /* On-dark text */
  --on-dark:      #E9F5F2;
  --on-dark-soft: #A6C6C1;

  /* Brand gradient (droplet: teal-green -> deep petrol) */
  --grad-brand: linear-gradient(148deg, #2CA99A 0%, #12857A 44%, #0F3839 100%);
  --grad-hero:  radial-gradient(120% 120% at 15% 10%, #124545 0%, var(--navy-900) 55%, #061F1E 100%);

  /* Radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Shadows (tinted to navy, never pure black) */
  --shadow-sm: 0 1px 2px rgba(11,33,56,.06), 0 2px 6px rgba(11,33,56,.05);
  --shadow-md: 0 10px 30px -12px rgba(11,33,56,.18), 0 4px 12px -6px rgba(11,33,56,.10);
  --shadow-lg: 0 30px 60px -24px rgba(11,33,56,.30);

  /* Liquid glass */
  --glass-bg:    linear-gradient(155deg, rgba(255,255,255,.74), rgba(255,255,255,.42));
  --glass-brd:   rgba(255,255,255,.70);
  --glass-hi:    inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.25);
  --glass-sh:    0 18px 40px -18px rgba(10,42,40,.28);
  --glass-blur:  blur(18px) saturate(160%);
  --glass-bg-d:  linear-gradient(155deg, rgba(233,245,242,.14), rgba(233,245,242,.04));
  --glass-brd-d: rgba(180,230,222,.22);
  --glass-hi-d:  inset 0 1px 0 rgba(255,255,255,.14);

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);

  /* Type scale (fluid) */
  --fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.4rem);
  --fs-h1:      clamp(2.1rem, 1.4rem + 2.9vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-lead:    clamp(1.06rem, 0.98rem + 0.4vw, 1.28rem);
  --fs-stat:    clamp(2.6rem, 1.8rem + 3.4vw, 4.2rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 0;
  position: relative;
}
/* Subtle site-wide aurora so liquid-glass surfaces have something to refract */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 40% at 10% 6%, rgba(44,169,154,.12), transparent 62%),
    radial-gradient(34% 36% at 92% 16%, rgba(23,150,138,.10), transparent 62%),
    radial-gradient(46% 46% at 74% 96%, rgba(121,210,196,.10), transparent 64%);
}

h1,h2,h3,h4 {
  font-family: "Sora", "IBM Plex Sans", sans-serif;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 .85rem;
  font-weight: 700;
  text-wrap: balance;
}
h1 { line-height: 1.12; }
h2 { font-size: var(--fs-h2); line-height: 1.16; }
h3 { font-size: var(--fs-h3); line-height: 1.32; letter-spacing: -0.005em; }
p { margin: 0 0 1.05rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }
ul, ol { line-height: 1.7; }
li { margin-bottom: .4rem; }
a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--teal-600); }
img { max-width: 100%; height: auto; display: block; }
strong { color: var(--ink); font-weight: 600; }

::selection { background: var(--aqua-300); color: var(--navy-900); }
:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-700); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--teal-500); border-radius: 2px; }
.lead { font-size: var(--fs-lead); color: var(--slate); }
.muted { color: var(--slate-soft); }

/* Numbers use tabular figures */
.tnum { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  --_bg: var(--teal-700); --_fg: #fff; --_bd: transparent;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .82rem 1.35rem; border-radius: var(--r-sm);
  font-family: "Sora", sans-serif; font-weight: 600; font-size: .98rem; line-height: 1;
  background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
  cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: #0A574D; color: #fff; box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); }
.btn .ph { font-size: 1.15em; }

.btn--ghost { --_bg: transparent; --_fg: var(--navy-800); --_bd: var(--border-strong); box-shadow: none; }
.btn--ghost:hover { --_fg: var(--teal-700); background: var(--bg-soft); border-color: var(--teal-500); color: var(--teal-700); }

.btn--on-dark { --_bg: #fff; --_fg: var(--navy-900); }
.btn--on-dark:hover { --_bg: var(--aqua-300); color: var(--navy-900); }
.btn--ghost-dark { --_bg: transparent; --_fg: var(--on-dark); --_bd: rgba(255,255,255,.28); box-shadow: none; }
.btn--ghost-dark:hover { background: rgba(255,255,255,.08); border-color: var(--aqua-300); color: #fff; }

.textlink { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-family: "Sora",sans-serif; }
.textlink .ph { transition: transform .2s var(--ease); }
.textlink:hover .ph { transform: translateX(3px); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: #fff; } }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 70px;
}
/* Brand uses the REAL Arcus logo image (assets/arcus-logo.png). */
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 42px; width: auto; display: block; }
.footer-brand .brand-logo { height: 44px; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: "IBM Plex Sans", sans-serif; font-weight: 500; font-size: .96rem;
  color: var(--navy-700); position: relative; padding-block: .4rem;
}
.nav-links a:hover { color: var(--teal-700); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--teal-500); border-radius: 2px;
}
.nav-actions { display: flex; align-items: center; gap: .75rem; }
.nav-toggle { display: none; }

/* Mobile nav */
.nav-burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); background: #fff; cursor: pointer; align-items: center; justify-content: center;
  color: var(--navy-800);
}
.nav-burger .ph { font-size: 1.4rem; }

@media (max-width: 900px) {
  .nav-burger { display: inline-flex; }
  .nav-links {
    position: fixed; inset: 70px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: .5rem var(--gutter) 1.25rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
  }
  .nav-links a { padding: .95rem .25rem; border-bottom: 1px solid var(--border); font-size: 1.05rem; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-toggle:checked ~ .nav-links { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav .btn--nav-cta { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 120% at 100% 0%, var(--bg-tint) 0%, rgba(232,242,243,0) 55%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.hero-grid {
  display: grid; gap: clamp(1.5rem, 1rem + 4vw, 4rem);
  grid-template-columns: 1.05fr 1fr; align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  min-height: min(88vh, 760px);
}
.hero h1 { font-size: var(--fs-display); max-width: 15ch; }
.hero .lead { max-width: 46ch; margin-top: .4rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
.hero-note { margin-top: 1.4rem; font-size: .9rem; color: var(--slate-soft); display: flex; align-items: center; gap: .5rem; }
.hero-note .ph { color: var(--teal-600); font-size: 1.15rem; }

/* 3D stage */
.stage {
  position: relative; aspect-ratio: 1/1; width: 100%;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--grad-hero);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.06);
  isolation: isolate;
}
.stage canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; touch-action: pan-y; }
.stage canvas:active { cursor: grabbing; }
.stage-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: var(--grad-hero); color: var(--on-dark-soft); padding: 2rem;
}
.stage-fallback .drop {
  width: 92px; height: 118px; margin: 0 auto 1rem;
  background: var(--grad-brand);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  transform: rotate(0deg); box-shadow: 0 20px 50px -10px rgba(0,0,0,.5), inset -10px -14px 30px rgba(0,0,0,.35), inset 8px 10px 22px rgba(255,255,255,.25);
}
.stage-badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; border-radius: var(--r-pill);
  background: rgba(8,26,44,.55); backdrop-filter: blur(6px);
  color: var(--on-dark); font-size: .8rem; font-weight: 500; letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.14);
}
.stage-badge .ph { color: var(--aqua-300); font-size: 1rem; }
.stage-hint {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-soft);
}

/* Device render presentation (real Arcus TLT CAD render on the dark stage) */
.stage--device {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  padding: clamp(.6rem, 2vw, 1.5rem); perspective: 1100px;
  /* Lighter teal "studio" backdrop so the silver instrument reads well.
     Kept saturated enough that the top-left corner never blends into the page. */
  background: linear-gradient(158deg, #9AD3CD 0%, #5FB2AC 45%, #2C817B 100%);
  border: 1px solid rgba(20, 90, 86, .18);
}
.stage--device .stage-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(85% 72% at 50% 116%, rgba(18,80,76,.28), transparent 60%); }
.stage-device {
  position: relative; z-index: 1; width: 97%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.52));
  transition: transform .2s var(--ease); transform-style: preserve-3d;
}
@media (prefers-reduced-motion: no-preference) { .stage-device { animation: floaty 7s ease-in-out infinite; } }
@keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
/* When the GLB loads, scene.js injects a canvas here for live 360° rotation */
.stage--device canvas { position: relative; z-index: 1; width: 100% !important; height: 100% !important; cursor: grab; touch-action: pan-y; }
.stage--device canvas:active { cursor: grabbing; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .stage { max-width: 460px; margin-inline: auto; }
}

/* ---------- Stat band (dark) ---------- */
.band-dark { background: var(--grad-hero); color: var(--on-dark); }
.band-dark h2, .band-dark h3 { color: #fff; }
.stat-band {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); overflow: hidden;
}
.stat-band .stat { padding: clamp(1.5rem,1rem + 2vw,2.5rem); border-right: 1px solid rgba(255,255,255,.12); }
.stat-band .stat:last-child { border-right: 0; }
.stat .num { display: block; font-family: "Sora",sans-serif; font-weight: 700; font-size: var(--fs-stat); color: #fff; letter-spacing: -.03em; line-height: 1; }
.stat .num .unit { font-size: .4em; color: var(--aqua-300); margin-left: .1em; letter-spacing: 0; }
.stat .label { color: var(--on-dark-soft); margin: .6rem 0 0; font-size: 1rem; }
@media (max-width:720px){ .stat-band { grid-template-columns: 1fr; } .stat-band .stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); } .stat-band .stat:last-child{border-bottom:0;} }

/* ---------- Split (asymmetric) ---------- */
.split { display: grid; gap: clamp(1.5rem,1rem + 4vw,4rem); align-items: center; grid-template-columns: 1.1fr .9fr; }
.split--rev { grid-template-columns: .9fr 1.1fr; }
.split--rev .split-media { order: -1; }
.split-media {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md);
  aspect-ratio: 4/3; background: var(--bg-tint); position: relative;
}
.split-media img, .split-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-tag {
  position: absolute; left: 12px; bottom: 12px; padding: .4rem .75rem; border-radius: var(--r-pill);
  background: rgba(11,33,56,.62); color: #fff; font-size: .78rem; backdrop-filter: blur(6px);
}
@media (max-width:820px){ .split, .split--rev { grid-template-columns: 1fr; } .split--rev .split-media { order: 0; } }

/* ---------- Metric row (plain, no cards) ---------- */
.metric-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  box-shadow: var(--glass-sh), var(--glass-hi); overflow: hidden;
}
.metric { padding: clamp(1.6rem,1.1rem + 2vw,2.3rem) clamp(1.25rem,.7rem + 2vw,2.1rem); border-right: 1px solid rgba(10,42,40,.09); }
.metric:last-child { border-right: 0; }
.metric .m-num { font-family:"Sora",sans-serif; font-weight:700; font-size: clamp(2rem,1.4rem + 2vw,3rem); color: var(--teal-700); letter-spacing:-.03em; line-height:1; }
.metric h3 { margin: .5rem 0 .3rem; }
.metric p { margin: 0; font-size: .98rem; color: var(--slate-soft); }
@media (max-width:760px){ .metric-row { grid-template-columns: 1fr; } .metric { border-right:0; border-bottom:1px solid var(--border);} .metric:last-child{border-bottom:0;} }

/* ---------- Numbered list (Why Now) ---------- */
.numbered { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.numbered .item {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-sh), var(--glass-hi);
  padding: clamp(1.6rem,1.2rem + 2vw,2.3rem);
  display: grid; grid-template-columns: auto 1fr; gap: 1.15rem;
}
.numbered .idx { font-family:"Sora",sans-serif; font-weight:700; font-size:1.05rem; color: var(--teal-600); border:1.5px solid var(--teal-400); width:2.5rem; height:2.5rem; border-radius: var(--r-sm); display:grid; place-items:center; }
.numbered h3 { margin:.15rem 0 .4rem; }
.numbered p { margin: 0; font-size: .98rem; }
@media (max-width:720px){ .numbered { grid-template-columns: 1fr; } }

/* ---------- Process stepper ---------- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,.5rem + 2vw,2rem); position: relative; }
.step { position: relative; }
.step .s-idx {
  width: 3.2rem; height: 3.2rem; border-radius: var(--r-md);
  background: var(--grad-brand); color:#fff; display:grid; place-items:center;
  font-family:"Sora",sans-serif; font-weight:700; font-size:1.25rem; box-shadow: var(--shadow-md);
  margin-bottom: 1.1rem;
}
.step h3 { margin-bottom: .45rem; }
.step p { font-size: .98rem; margin: 0; }
.step:not(:last-child)::after {
  content:""; position:absolute; top: 1.6rem; left: calc(3.2rem + .8rem); right: -1rem; height: 2px;
  background: linear-gradient(90deg, var(--teal-400), transparent);
}
@media (max-width:760px){ .steps { grid-template-columns:1fr; } .step:not(:last-child)::after{ display:none; } }

/* ---------- Market proportion ---------- */
.share { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem,1rem + 3vw,3.5rem); align-items:center; }
.share-bar { display:flex; height: clamp(150px,26vw,240px); border-radius: var(--r-md); overflow:hidden; box-shadow: var(--shadow-md); }
.share-bar .seg { display:flex; flex-direction:column; justify-content:flex-end; padding: 1.1rem; color:#fff; }
.share-bar .seg--us { flex: 0 0 78%; background: var(--grad-brand); }
.share-bar .seg--them { flex: 0 0 22%; background: var(--navy-700); }
.share-bar .seg .pct { font-family:"Sora",sans-serif; font-weight:700; font-size: clamp(1.6rem,1rem + 2.4vw,2.6rem); line-height:1; }
.share-bar .seg .cap { font-size:.86rem; color: rgba(255,255,255,.82); margin-top:.3rem; }
.tam { display:grid; gap:.8rem; }
.tam .tam-row { display:grid; grid-template-columns: auto 1fr; gap:1rem; align-items:baseline; padding-bottom:.8rem; border-bottom:1px solid var(--border); }
.tam .tam-row:last-child{ border-bottom:0; }
.tam .tam-num { font-family:"Sora",sans-serif; font-weight:700; font-size:1.7rem; color: var(--ink); letter-spacing:-.02em; }
.tam .tam-lab strong{ display:block; } .tam .tam-lab span{ font-size:.92rem; color:var(--slate-soft); }
@media (max-width:820px){ .share { grid-template-columns:1fr; } }

/* ---------- Feature grid (bento-ish, diverse) ---------- */
.bento { display:grid; grid-template-columns: repeat(2,1fr); gap: 1.15rem; }
.tile {
  background: var(--glass-bg-d);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd-d);
  border-radius: var(--r-lg);
  padding: clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
  box-shadow: var(--glass-hi-d);
}
.tile .t-ico { width:2.9rem;height:2.9rem;border-radius:var(--r-sm); display:grid;place-items:center; background: rgba(111,208,208,.14); color: var(--aqua-300); margin-bottom:1rem; }
.tile .t-ico .ph{ font-size:1.5rem; }
.tile h3{ color:#fff; margin-bottom:.4rem; }
.tile p{ color: var(--on-dark-soft); margin:0; font-size:.98rem; }
.tile--wide { grid-column: span 2; }
@media (max-width:720px){ .bento { grid-template-columns:1fr; } .tile--wide{ grid-column: span 1; } }

/* ---------- CTA closing ---------- */
.cta-close { text-align: left; }
.cta-close .cta-inner {
  background: var(--grad-hero); color: var(--on-dark);
  border-radius: var(--r-lg); padding: clamp(2rem,1.5rem + 4vw,4rem);
  display:grid; grid-template-columns: 1.3fr auto; gap: 2rem; align-items:center;
  box-shadow: var(--shadow-lg); position: relative; overflow:hidden;
}
.cta-close .cta-inner::after{
  content:""; position:absolute; right:-10%; top:-40%; width:60%; height:180%;
  background: radial-gradient(circle at center, rgba(47,169,173,.35), transparent 60%);
  pointer-events:none;
}
.cta-close h2 { color:#fff; max-width: 20ch; }
.cta-close p { color: var(--on-dark-soft); max-width: 48ch; margin:0; }
.cta-close .cta-actions{ display:flex; flex-direction:column; gap:.75rem; position:relative; z-index:1; }
@media (max-width:760px){ .cta-close .cta-inner{ grid-template-columns:1fr; } }

/* ---------- Cards — liquid glass ---------- */
.card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  padding: clamp(1.9rem, 1.3rem + 2vw, 2.7rem);
  box-shadow: var(--glass-sh), var(--glass-hi);
}
.card > *:first-child { margin-top: 0; }
.card ul { margin-top: .9rem; }

/* ---------- Team ---------- */
.team-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.3rem; }
.member { border:1px solid var(--glass-brd); border-radius: var(--r-lg); overflow:hidden; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-sh), var(--glass-hi); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.member:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.member .photo { aspect-ratio: 4/3; background: var(--bg-tint); position:relative; }
.member .photo img{ width:100%;height:100%;object-fit:cover; }
.member .photo .initials{ position:absolute; inset:0; display:grid; place-items:center; font-family:"Sora",sans-serif; font-weight:700; font-size:2.4rem; color: var(--teal-600); background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.member .m-body{ padding: 1.25rem 1.35rem 1.5rem; }
.member .role{ color: var(--teal-700); font-weight:600; font-size:.86rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.35rem; }
.member h3{ font-size:1.15rem; margin-bottom:.5rem; }
.member p{ font-size:.94rem; margin:0 0 .9rem; color: var(--slate); }
@media (max-width:900px){ .team-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:620px){ .team-grid{ grid-template-columns: 1fr;} }

/* ---------- Values / mini grid ---------- */
.mini-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.15rem; }
.mini{
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-brd); border-radius:var(--r-lg);
  box-shadow: var(--glass-sh), var(--glass-hi);
  padding: clamp(1.6rem,1.2rem + 2vw,2.2rem);
}
.mini .m-ico{ width:2.7rem;height:2.7rem;border-radius:var(--r-sm); display:grid;place-items:center; background:var(--bg-tint); color:var(--teal-700); margin-bottom:.9rem; }
.mini .m-ico .ph{ font-size:1.4rem; }
.mini h3{ font-size:1.12rem; margin-bottom:.35rem; }
.mini p{ margin:0; font-size:.96rem; }
@media (max-width:680px){ .mini-grid{ grid-template-columns:1fr; } }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.1rem 1.2rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field--full{ grid-column: 1 / -1; }
.field label{ font-weight:600; color: var(--ink); font-size:.92rem; }
.field .req{ color: var(--teal-700); }
.field input, .field select, .field textarea{
  font: inherit; color: var(--ink); background:#fff;
  border:1.5px solid var(--border-strong); border-radius: var(--r-sm);
  padding: .8rem .9rem; width:100%; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:#9aa9b5; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(23,148,155,.15); }
.field .help{ font-size:.82rem; color: var(--slate-soft); }
.contact-layout{ display:grid; grid-template-columns: 1.4fr .9fr; gap: clamp(1.5rem,1rem + 3vw,3.5rem); align-items:start; }
.contact-info{
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-brd); border-radius: var(--r-lg);
  box-shadow: var(--glass-sh), var(--glass-hi);
  padding: clamp(1.8rem,1.3rem + 2vw,2.4rem);
}
.contact-info .ci-row{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; padding: .9rem 0; border-bottom:1px solid var(--border); }
.contact-info .ci-row:last-child{ border-bottom:0; }
.contact-info .ci-ico{ width:2.5rem;height:2.5rem;border-radius:var(--r-sm); background:#fff; border:1px solid var(--border); display:grid;place-items:center; color:var(--teal-700); }
.contact-info .ci-ico .ph{ font-size:1.25rem; }
.contact-info .ci-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--slate-soft); }
.contact-info .ci-val{ color:var(--ink); font-weight:500; }
@media (max-width:820px){ .contact-layout{ grid-template-columns:1fr; } .form-grid{ grid-template-columns:1fr; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ background: var(--grad-hero); color: var(--on-dark); border-bottom: 1px solid rgba(255,255,255,.08); position:relative; overflow:hidden; }
.page-hero::after{ content:""; position:absolute; right:-8%; top:-30%; width:45%; height:160%; background: radial-gradient(circle, rgba(47,169,173,.28), transparent 62%); pointer-events:none; }
.page-hero h1{ color:#fff; font-size: var(--fs-h1); max-width: 18ch; }
.page-hero .lead{ color: var(--on-dark-soft); max-width: 54ch; }
.page-hero .eyebrow{ color: var(--aqua-300); }
.page-hero .eyebrow::before{ background: var(--aqua-300); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy-900); color: var(--on-dark-soft); padding-block: clamp(3rem,2rem + 3vw,4.5rem) 2rem; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; padding-bottom: 2.5rem; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand svg{ height:44px; width:auto; margin-bottom:1rem; }
.footer-brand p{ color: var(--on-dark-soft); font-size:.95rem; max-width:34ch; }
.footer-col h4{ color:#fff; font-family:"IBM Plex Sans",sans-serif; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.footer-col a{ color: var(--on-dark-soft); font-size:.96rem; }
.footer-col a:hover{ color: var(--aqua-300); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:1.5rem; font-size:.86rem; color: var(--on-dark-soft); }
.footer-social{ display:flex; gap:.6rem; }
.footer-social a{ width:40px;height:40px;border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.16); display:grid;place-items:center; color:var(--on-dark); }
.footer-social a:hover{ background: rgba(255,255,255,.08); color:#fff; border-color: var(--aqua-300); }
@media (max-width:820px){ .footer-top{ grid-template-columns: 1fr 1fr; } .footer-brand{ grid-column:1/-1; } }
@media (max-width:520px){ .footer-top{ grid-template-columns: 1fr; } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn, .member, .textlink .ph { transition: none !important; }
}

/* Divider label */
.kicker { color: var(--teal-700); font-weight:600; font-family:"Sora",sans-serif; }

/* ---------- Liquid-glass fallbacks (accessibility / unsupported) ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .member, .mini, .numbered .item, .contact-info, .metric-row { background: #fff; }
  .tile { background: rgba(233,245,242,.10); }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .member, .mini, .numbered .item, .contact-info, .metric-row {
    background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .tile { background: rgba(233,245,242,.10) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ==========================================================================
   MOBILE & TABLET POLISH (iPhone / iPad)
   ========================================================================== */

/* No accidental horizontal scroll; wrap long words in headings */
html, body { overflow-x: clip; }
h1, h2, h3, h4 { overflow-wrap: break-word; }
/* Only on very narrow phones allow hard breaks to avoid overflow */
@media (max-width: 400px) { h1, h2, h3 { overflow-wrap: anywhere; } }

/* Respect the notch / home indicator (landscape, edge-to-edge) */
.container { padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)); }
.site-footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }

/* Video fills its frame on every device */
.split-media video { width: 100%; height: 100%; object-fit: cover; }

/* Primary CTA inside the mobile menu (hidden on desktop) */
.nav-cta-mobile { display: none; }

/* ---- Tablet (iPad portrait ≤ 1024) ---- */
@media (max-width: 1024px) {
  .footer-social a { width: 44px; height: 44px; }   /* comfortable touch targets */
}

/* ---- Mobile menu (≤ 900px): show CTA in the dropdown ---- */
@media (max-width: 900px) {
  .nav-cta-mobile { display: block; padding: 1rem .25rem .35rem !important; border-bottom: 0 !important; }
  .nav-cta-mobile .btn { width: 100%; justify-content: center; }
  /* let the opened menu scroll if it ever exceeds the viewport */
  .nav-toggle:checked ~ .nav-links { max-height: calc(100dvh - 70px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- Phone (≤ 560px) ---- */
@media (max-width: 560px) {
  :root { --gutter: 1.15rem; }
  /* Full-width, thumb-friendly CTAs */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .cta-close .cta-actions .btn { width: 100%; justify-content: center; }
  form .btn { width: 100%; justify-content: center; }
  /* Footer meta stacks */
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .9rem; }
  /* Comfortable share bar height so captions never clip */
  .share-bar { height: auto; min-height: 200px; }
  .share-bar .seg { padding: 1rem .9rem; }
  /* Slightly tighter hero on very small screens */
  .hero-grid { padding-block: 1.75rem 0; gap: 1.75rem; }
  .stage { max-width: 100%; }
}

/* ---- Very small (≤ 380px, iPhone SE/mini) ---- */
@media (max-width: 380px) {
  body { font-size: 16px; }
  .nav { height: 62px; }
  .brand .brand-logo { height: 36px; }
}

/* iOS: avoid input zoom-on-focus (needs ≥16px) — already 17px, lock it in */
@media (max-width: 560px) {
  .field input, .field select, .field textarea { font-size: 16px; }
}