/* ════════════════════════════════════════════════════════════════════
   NeuronFRAMES — Clinical layer (loaded after styles.css on every page)
   Restyles only; no markup/text changes.
   One typeface (IBM Plex Sans + Plex Sans Thai). Palette drawn from the
   logo: cobalt blue, deep navy, logo yellow, clinical aqua for "live".
   Motion: rules that draw in, staggered rise, marker underline, a
   pose-tracking viewfinder + scan line on the hero, sliding button fills.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --paper:      #f2f5fa;
  --paper-2:    #e7ecf5;
  --paper-3:    #fafbfd;
  --ink:        #0a1633;
  --ink-2:      #26324b;
  --ink-soft:   #56627a;
  --rule:       rgba(10, 22, 51, .12);
  --rule-strong:rgba(10, 22, 51, .45);
  --blue:       #1f4fd1;
  --blue-deep:  #0c1f5e;
  --navy:       #0b1a4a;
  --sun:        #f5b700;
  --aqua:       #14a3b4;

  --bg-primary: var(--paper-3);
  --bg-secondary: var(--paper-2);
  --bg-body:    var(--paper);
  --surface:    var(--paper-3);
  --card-bg:    transparent;
  --accent-primary: var(--blue);
  --accent-secondary: var(--aqua);
  --accent-success: var(--aqua);
  --accent-violet: var(--blue-deep);
  --text-primary: var(--ink-2);
  --text-muted: var(--ink-soft);
  --text-heading: var(--ink);
  --border:     var(--rule);
  --radius:     4px;
  --shadow:     none;
  --shadow-sm:  none;
  --grad-brand: var(--blue);

  --font-display: 'IBM Plex Sans', 'IBM Plex Sans Thai', system-ui, -apple-system, sans-serif;
  --font-body:    var(--font-display);
  --font-mono:    var(--font-display);
  --font-thai:    'IBM Plex Sans Thai', 'IBM Plex Sans', system-ui, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ─── Base ───────────────────────────────────────────────────────── */
body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16.5px; line-height: 1.62; letter-spacing: 0;
}
html[lang="th"] body { font-family: var(--font-thai); }
body::before, body::after { display: none !important; }
::selection { background: var(--sun); color: var(--ink); }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: #b3bdd0; border: 2px solid var(--paper-2); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

.bg-ambient, .bg-grid, .bg-blob, .cursor-halo, .orb-container, .hero-scroll { display: none !important; }

/* Thin reading-progress line kept, as a solid cobalt hairline */
#scroll-progress { background: var(--blue) !important; box-shadow: none !important; height: 2px !important; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px;
}
.skip-to-content { border-radius: 0 !important; background: var(--ink) !important; color: var(--paper) !important; box-shadow: none !important; }
.skip-to-content:not(:focus) { opacity: 0; pointer-events: none; }

.container { max-width: 1240px; padding: 0 clamp(20px, 4vw, 48px); }

/* ─── Type: one family, hierarchy by size + weight ─────────────── */
h1, h2, h3, h4,
.cv-card h3, .mode-card h3, .award-card h3, .partner-card h3, .team-card h3,
.why-card h3, .clinic-card h3, .arch-step h3, .pub-item h3 {
  font-family: var(--font-display) !important;
  color: var(--ink);
}
h1, h2 { font-weight: 600; letter-spacing: -0.032em; line-height: 1.04; }
h2, .section-header h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 600; letter-spacing: -0.032em; line-height: 1.06; }
h3, h4 { font-weight: 600; letter-spacing: -0.012em; }
html[lang="th"] h1, html[lang="th"] h2 { letter-spacing: -0.01em; line-height: 1.25; }

/* Emphasis: cobalt, with a logo-yellow marker that draws in on reveal */
.gradient-text, .hero-title .gradient-text {
  color: var(--blue);
  font-style: normal;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
  background: linear-gradient(var(--sun), var(--sun)) no-repeat 0 88% / 0% .14em !important;
  transition: background-size 1.1s var(--ease) .35s;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.visible .gradient-text, .hero-title .gradient-text, .gradient-text.visible { background-size: 100% .14em !important; }
.hero-title .gradient-text { transition-delay: .9s; }

p { color: var(--ink-2); }
strong { font-weight: 600; color: var(--ink); }

/* Eyebrow label: small caps with a rule that draws in */
.section-label {
  display: inline-flex; align-items: center; gap: 12px;
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important;
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue) !important;
}
.section-label::before {
  content: '' !important; width: 32px !important; height: 2px !important;
  border-radius: 0 !important; background: var(--sun) !important;
  box-shadow: none !important; animation: none !important;
  transform-origin: left; transition: transform .8s var(--ease) .2s;
}
.reveal:not(.visible) .section-label::before { transform: scaleX(0); }
.section-label::after { display: none !important; }

/* Section headers: left-aligned split layout */
.section-header {
  text-align: left; max-width: none; margin: 0 0 clamp(2.8rem, 5vw, 4.5rem);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  column-gap: clamp(2rem, 6vw, 6rem); align-items: end;
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--rule); position: relative;
}
.section-header::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--ink); transform-origin: left; transform: scaleX(0);
  transition: transform 1.2s var(--ease) .3s;
}
.section-header.visible::after { transform: scaleX(1); }
.section-header .section-label { grid-column: 1 / -1; margin-bottom: 1.4rem; }
.section-header h2 { grid-column: 1; padding-bottom: 0; margin: 0; }
.section-header h2::after { display: none !important; }
.section-header p { grid-column: 2; margin: 0 !important; max-width: 46ch; font-size: 1.02rem; color: var(--ink-soft); }
/* Headers that carry extra blocks (e.g. stat rows) simply stack */
.section-header:has(> :not(.section-label):not(h2):not(p)) { display: block; }
.section-header:has(> :not(.section-label):not(h2):not(p)) > * { margin-top: 1.6rem !important; }
.section-header:has(> :not(.section-label):not(h2):not(p)) > .section-label { margin-top: 0 !important; }
.section-header:has(> :not(.section-label):not(h2):not(p)) > p { max-width: 60ch; }
@media (max-width: 860px) {
  .section-header { grid-template-columns: 1fr; }
  .section-header p { grid-column: 1; margin-top: 1.2rem !important; }
}

/* ─── Sections ─────────────────────────────────────────────────── */
.section { padding: clamp(80px, 10vw, 132px) 0; }
.divider { height: 0 !important; background: none !important; border: 0 !important; margin: 0 !important; }
.divider::before, .divider::after { display: none !important; }

/* ─── Buttons: fill slides in from the left ────────────────────── */
.btn {
  border-radius: 3px !important; padding: 15px 26px;
  font-family: var(--font-body); font-weight: 600; font-size: .92rem; letter-spacing: .005em;
  transform: none !important; box-shadow: none !important; animation: none !important;
  background-repeat: no-repeat !important; background-position: 0 0 !important;
  background-size: 0% 100% !important;
  transition: background-size .45s var(--ease), color .3s ease, border-color .3s ease !important;
}
.btn::before, .btn::after { display: none !important; }
.btn:hover { background-size: 100% 100% !important; }
.btn-primary, .cv-highlight .btn-primary {
  background-color: var(--blue) !important; color: #fff !important;
  background-image: linear-gradient(var(--ink), var(--ink)) !important;
  border: 1px solid var(--blue) !important;
}
.btn-primary:hover { border-color: var(--ink) !important; }
.btn-outline {
  background-color: transparent !important; color: var(--ink) !important;
  background-image: linear-gradient(var(--ink), var(--ink)) !important;
  border: 1px solid var(--rule-strong) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.btn-outline:hover { border-color: var(--ink) !important; color: #fff !important; }

/* ─── Navigation ───────────────────────────────────────────────── */
#navbar, #navbar.scrolled {
  background: rgba(242, 245, 250, .94) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-bottom: 1px solid var(--rule) !important; box-shadow: none !important;
  padding: 14px 0 !important;
}
.logo:hover { transform: none; }
.logo-img, #navbar.scrolled .logo-img { filter: none !important; height: 36px; }
.nav-links { gap: 1.6rem; }
.nav-links a { font-size: .87rem; font-weight: 500; color: var(--ink-2) !important; }
.nav-links a::before { display: none !important; }
.nav-links a::after {
  content: '' !important; position: absolute; left: 0; right: 0; bottom: -3px !important;
  height: 2px !important; background: var(--sun) !important; border-radius: 0 !important;
  box-shadow: none !important; opacity: 1 !important;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease) !important;
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1) !important; }
.nav-links a:hover, .nav-links a.active { color: var(--ink) !important; background: none !important; box-shadow: none !important; }
.nav-links a.nav-interactive {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 4px 0 !important; border-radius: 0 !important; color: var(--blue) !important; animation: none !important;
}
.nav-links a.nav-interactive::before { display: none !important; }
.nav-cta { padding: 11px 18px !important; }
.lang-toggle {
  border-radius: 3px !important; background: transparent !important;
  border: 1px solid var(--rule) !important; box-shadow: none !important; color: var(--ink-2) !important;
}
.lang-toggle:hover { border-color: var(--ink) !important; }
.nav-toggle span { border-radius: 0 !important; background: var(--ink) !important; }
@media (max-width: 1199px) {
  .nav-links {
    background: var(--paper) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: none !important; border-left: 1px solid var(--rule) !important;
  }
  .nav-links a { font-size: 1.05rem; border-radius: 0 !important; }
  .nav-overlay { background: rgba(10, 22, 51, .4) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ─── Hero ─────────────────────────────────────────────────────── */
#hero { min-height: auto; padding: clamp(140px, 16vw, 190px) 0 clamp(70px, 8vw, 110px); position: relative; }
#hero::before, #hero::after { display: none !important; }
.hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) !important; gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr !important; } }

.hero-badge {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 0 0 20px !important; border-radius: 0 !important; position: relative;
  font-family: var(--font-body); font-size: .76rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft) !important;
  margin-bottom: 2rem;
}
.hero-badge::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 8px;
  margin-top: -4px; background: var(--aqua); border-radius: 50%;
  animation: nfLive 2.2s ease-out infinite;
}
@keyframes nfLive {
  0%   { box-shadow: 0 0 0 0 rgba(20, 163, 180, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(20, 163, 180, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 163, 180, 0); }
}
.hero-badge::after, .hero-badge span { display: none !important; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6.2vw, 5.4rem);
  font-weight: 600; letter-spacing: -0.045em; line-height: .98; color: var(--ink);
}
html[lang="th"] .hero-title { letter-spacing: -0.01em; line-height: 1.2; font-size: clamp(2.3rem, 5vw, 4.2rem); }
.hero-hook { font-size: 1.2rem; line-height: 1.5; color: var(--ink); max-width: 36ch; }
.hero-hook strong { color: var(--blue); background: none !important; -webkit-text-fill-color: currentColor !important; }
.hero-sub { color: var(--ink-soft); max-width: 54ch; }

/* Entrance: staggered rise of hero content */
.hero-content > * { animation: nfRise .9s var(--ease) both; }
.hero-content > :nth-child(1) { animation-delay: .05s; }
.hero-content > :nth-child(2) { animation-delay: .15s; }
.hero-content > :nth-child(3) { animation-delay: .3s; }
.hero-content > :nth-child(4) { animation-delay: .4s; }
.hero-content > :nth-child(5) { animation-delay: .5s; }
.hero-content > :nth-child(6) { animation-delay: .6s; }
.hero-visual { animation: nfRise 1.1s var(--ease) .35s both; }
@keyframes nfRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.hero-stats {
  border-top: 2px solid var(--ink) !important; padding-top: 1.4rem !important;
  gap: 0 !important; display: grid !important; grid-template-columns: repeat(3, 1fr);
}
.hero-stats .stat { padding-right: 1rem; border: 0 !important; background: none !important; }
.hero-stats .stat + .stat { border-left: 1px solid var(--rule) !important; padding-left: 1.2rem; }
.hero-stats .stat::before, .hero-stats .stat::after { display: none !important; }
.stat-num, .hero-stats .stat-num, .stat-num .count-up {
  font-family: var(--font-display) !important; font-weight: 600 !important;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem) !important; letter-spacing: -0.035em;
  color: var(--ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important;
}
.hero-stats .stat-label { font-family: var(--font-body); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: .5rem; }

/* Hero visual: camera viewfinder with a pose-tracking scan line */
.hero-visual { position: relative; }
.hero-card {
  position: relative; overflow: hidden;
  background-color: var(--paper-3) !important;
  background-image:
    linear-gradient(var(--blue), var(--blue)), linear-gradient(var(--blue), var(--blue)),
    linear-gradient(var(--blue), var(--blue)), linear-gradient(var(--blue), var(--blue)),
    linear-gradient(var(--blue), var(--blue)), linear-gradient(var(--blue), var(--blue)),
    linear-gradient(var(--blue), var(--blue)), linear-gradient(var(--blue), var(--blue)) !important;
  background-repeat: no-repeat !important;
  background-size: 22px 2px, 2px 22px, 22px 2px, 2px 22px, 22px 2px, 2px 22px, 22px 2px, 2px 22px !important;
  background-position:
    14px 14px, 14px 14px, calc(100% - 14px) 14px, calc(100% - 14px) 14px,
    14px calc(100% - 14px), 14px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px), calc(100% - 14px) calc(100% - 14px) !important;
  border: 1px solid var(--rule) !important; border-radius: 4px !important;
  box-shadow: none !important; animation: none !important; transform: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.hero-card::before { display: none !important; }
.hero-card::after {
  content: '' !important; display: block !important; position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--aqua) !important; opacity: .85; box-shadow: none !important;
  animation: nfScan 4.6s ease-in-out infinite !important; pointer-events: none;
}
@keyframes nfScan { 0%, 100% { transform: translateY(24px); } 50% { transform: translateY(var(--scan-h, 300px)); } }
.hero-card--logo { --scan-h: 300px; }
.hero-card img { filter: none !important; animation: nfBreath 6s ease-in-out infinite; }
@keyframes nfBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }

.floating-badge {
  background: var(--paper) !important; border: 1px solid var(--rule) !important;
  border-radius: 3px !important; box-shadow: none !important; animation: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  font-family: var(--font-body); font-size: .72rem !important; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2) !important;
  padding: 8px 12px !important;
}
.floating-badge::before, .floating-badge::after, .floating-badge .fb-ico { display: none !important; }
.floating-badge.fb-top { top: -1px; right: -1px; background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.floating-badge.fb-bot { bottom: -1px; left: -1px; }

/* ─── Marquee ──────────────────────────────────────────────────── */
.marquee {
  background: var(--navy) !important; border: 0 !important; padding: 15px 0 !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}
.marquee-track { animation-duration: 60s !important; gap: 2.4rem !important; }
.marquee-item {
  font-family: var(--font-body); font-size: .8rem !important; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7) !important;
}
.marquee-item .m-em { color: var(--sun) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.marquee:hover .marquee-item { color: #fff !important; }
.marquee-item .m-ico { display: none !important; }
.marquee-sep { width: 5px !important; height: 5px !important; border-radius: 0 !important; background: var(--aqua) !important; box-shadow: none !important; transform: rotate(45deg); }

/* ─── Partner / trust strips ───────────────────────────────────── */
.trust-strip, .pub-badges { background: none !important; border-color: var(--rule) !important; }
.trust-label, .pub-badges-label {
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft) !important;
}
.logo-wall-item {
  background: transparent !important; border: 1px solid transparent !important;
  border-radius: 3px !important; box-shadow: none !important; transform: none !important;
  transition: border-color .3s, background-color .3s !important;
}
.logo-wall-item img { filter: grayscale(1); opacity: .6; transition: opacity .35s, filter .35s, transform .35s var(--ease); }
.logo-wall-item:hover img, .logo-wall-item.active img { filter: none; opacity: 1; transform: scale(1.06); }
.logo-wall-item.active { border-color: var(--blue) !important; background: var(--paper-3) !important; }
.logo-wall-item::before, .logo-wall-item::after { display: none !important; }
.partner-spotlight, .ps-card {
  background: var(--paper-3) !important; border: 1px solid var(--rule) !important;
  border-radius: 4px !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.partner-spotlight .ps-card { border: 0 !important; }
.ps-tag { background: none !important; border: 0 !important; padding: 0 !important; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue) !important; }
.ps-name { font-family: var(--font-display) !important; font-weight: 600 !important; font-size: 1.5rem !important; letter-spacing: -0.02em; }
.ps-link { color: var(--blue) !important; }
.ps-progress, .ps-progress span { border-radius: 0 !important; }
.ps-progress span { background: var(--sun) !important; }
.pub-badge {
  background: var(--paper-3) !important; border: 1px solid var(--rule) !important;
  border-radius: 4px !important; box-shadow: none !important; transform: none !important;
  transition: border-color .3s !important;
}
.pub-badge:hover { border-color: var(--blue) !important; }
.pub-badge .pb-tag {
  background: none !important; border: 0 !important; border-right: 1px solid var(--rule) !important;
  border-radius: 0 !important; color: var(--blue) !important; font-weight: 700; letter-spacing: .04em;
}
.pub-badge .pb-arrow { transform: none !important; animation: none !important; color: var(--ink-soft); }

/* ─── Card families → ruled blocks with a line that draws in ───── */
.cv-card, .why-card, .mode-card, .clinic-card, .collab-track, .award-card,
.partner-card, .team-card, .impact-item, .wc, .arch-step, .pub-item,
.partner-dept-card, .fft-role, .partner-card--featured {
  position: relative;
  background: transparent !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transform: none;
  padding: 1.7rem 0 0 !important;
}
.cv-card::before, .why-card::before, .mode-card::before, .clinic-card::before,
.award-card::before, .partner-card::before, .team-card::before, .impact-item::before,
.wc::before, .arch-step::before, .collab-track::before, .training-visual::before,
.pub-item::before, .cv-highlight::before, .cv-highlight::after,
.partner-dept-card::before, .fft-role::before, .dashboard-mock::before,
.clinic-card::after, .award-card::after, .impact-item::after, .wc::after,
.collab-track::after, .fft-role::after, .partner-dept-card::after {
  display: none !important;
}
/* the drawn rule */
.cv-card::after, .why-card::after, .mode-card::after, .partner-card::after,
.team-card::after, .arch-step::after, .pub-item::after {
  content: '' !important; display: block !important; position: absolute !important;
  left: 0 !important; right: auto !important; top: 0 !important; bottom: auto !important;
  width: 100% !important; height: 2px !important; opacity: 1 !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; filter: none !important;
  background: var(--ink) !important;
  transform-origin: left; transform: scaleX(1);
  transition: transform 1s var(--ease) calc(var(--reveal-delay, 0ms) + 150ms), background-color .3s ease !important;
}
.reveal:not(.visible)::after { transform: scaleX(0) !important; }
.clinic-card, .award-card, .impact-item, .wc, .collab-track, .fft-role, .partner-dept-card { border-top: 2px solid var(--ink) !important; }

.cv-card:hover::after, .why-card:hover::after, .mode-card:hover::after,
.partner-card:hover::after, .team-card:hover::after, .arch-step:hover::after { background: var(--blue) !important; }
.cv-card:hover, .why-card:hover, .mode-card:hover, .clinic-card:hover, .collab-track:hover,
.award-card:hover, .partner-card:hover, .team-card:hover, .impact-item:hover, .wc:hover,
.arch-step:hover, .pub-item:hover, .partner-dept-card:hover, .fft-role:hover {
  transform: none !important; box-shadow: none !important; background: transparent !important;
}
.clinic-card:hover, .award-card:hover, .impact-item:hover, .wc:hover { border-top-color: var(--blue) !important; }
a.cv-card h3 { transition: color .3s; }
a.cv-card:hover h3 { color: var(--blue) !important; }

.cv-card p, .why-card p, .clinic-card p, .award-card p, .mode-card p,
.partner-card p, .team-card p, .impact-item p, .wc p, .arch-step p {
  color: var(--ink-soft) !important; font-size: .95rem !important; line-height: 1.6;
}
.cv-card h3, .why-card h3, .clinic-card h3, .award-card h3, .mode-card h3,
.partner-card h3, .team-card h3, .impact-item h3, .wc h3, .arch-step h3 {
  font-size: 1.16rem !important; margin-bottom: .7rem !important;
}

.cv-grid, .why-grid, .clinic-grid, .impact-grid, .awards-grid, .partners-grid, .modes-grid {
  gap: clamp(2.4rem, 4vw, 3.6rem) clamp(1.8rem, 3.5vw, 3.2rem) !important;
}
.cv-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)) !important; }

/* Icons: small line marks in cobalt, nudge on card hover */
.cv-icon, .why-icon, .clinic-icon, .collab-icon, .award-icon, .mode-icon,
.arch-step-icon, .wc-icon, .partner-card-icon, .partner-dept-card-icon,
.fft-role-icon, .cw-icon, .li-icon, .icon {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; width: auto !important; height: auto !important;
  padding: 0 !important; margin: 0 0 1rem !important; color: var(--blue) !important;
  display: inline-flex !important; animation: none !important;
  transform: none; transition: transform .45s var(--ease) !important;
}
.cv-icon::before, .cv-icon::after, .why-icon::before, .why-icon::after,
.mode-icon::before, .mode-icon::after, .clinic-icon::after, .award-icon::after,
.arch-step-icon::after, .wc-icon::after { display: none !important; }
.cv-icon svg, .why-icon svg, .clinic-icon svg, .collab-icon svg, .award-icon svg,
.mode-icon svg, .arch-step-icon svg, .wc-icon svg, .partner-card-icon svg,
.partner-dept-card-icon svg, .fft-role-icon svg, .cw-icon svg {
  width: 24px !important; height: 24px !important; stroke-width: 1.4 !important;
}
.cv-card:hover .cv-icon, .why-card:hover .why-icon, .clinic-card:hover .clinic-icon,
.impact-item:hover .cv-icon, .mode-card:hover .mode-icon, .wc:hover .wc-icon { transform: translateX(4px) !important; }
.cv-icon--teal, .cv-icon--violet, .cv-icon--amber { color: var(--blue) !important; }

/* Bullet rows: short cobalt rule, stacked content */
.clinic-params li, .mode-features li, .training-list li {
  display: block !important; position: relative; padding-left: 22px !important;
  border-color: var(--rule) !important; color: var(--ink-2) !important;
}
.clinic-params li::before, .mode-features li::before, .training-list li::before {
  content: '' !important; position: absolute; left: 0; top: .82em;
  width: 10px !important; height: 2px !important; border-radius: 0 !important;
  background: var(--blue) !important; box-shadow: none !important;
  -webkit-mask: none !important; mask: none !important; border: 0 !important; margin: 0 !important;
}
.training-list li, .training-content li {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important; box-shadow: none !important; transform: none !important;
}

/* Tags */
.team-tags span, .mode-tag, .tag-blue, .tag-teal, .tag-orange, .tag-purple, .room-tag, .partner-pill {
  background: var(--paper-2) !important; border: 0 !important;
  border-radius: 2px !important; color: var(--ink-2) !important; box-shadow: none !important;
  font-family: var(--font-body); font-size: .68rem !important; font-weight: 600 !important;
  letter-spacing: .08em; text-transform: uppercase;
}
.pub-year, .award-year {
  background: none !important; border: 0 !important; padding-left: 0 !important; box-shadow: none !important;
  color: var(--blue) !important; font-size: .72rem !important; font-weight: 700 !important;
  letter-spacing: .1em; text-transform: uppercase;
}

/* Team */
.team-card { text-align: left !important; }
.team-card .team-avatar { margin-left: 0 !important; margin-right: 0 !important; }
.team-card .team-tags { justify-content: flex-start !important; }
.team-avatar {
  background: var(--blue) !important; color: #fff !important;
  border: 0 !important; border-radius: 50% !important; box-shadow: none !important;
  font-weight: 600 !important; font-size: 1.1rem !important; letter-spacing: .02em;
  transition: background-color .3s ease !important;
}
.team-card:hover .team-avatar { background: var(--ink) !important; }
.team-avatar::after, .team-avatar::before { display: none !important; }
.team-role { color: var(--blue) !important; font-size: .74rem !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ─── Highlight panels → deep navy ─────────────────────────────── */
.cv-highlight {
  position: relative; overflow: hidden;
  background: var(--navy) !important; border: 0 !important; border-radius: 4px !important;
  box-shadow: none !important; color: #fff;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 6vw, 5rem) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.cv-highlight > * { position: relative; z-index: 1; }
.cv-highlight h2, .cv-highlight h3 { color: #fff !important; }
.cv-highlight h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem) !important; letter-spacing: -0.025em; }
.cv-highlight .gradient-text { color: var(--sun) !important; background-image: linear-gradient(rgba(51, 185, 138, .35), rgba(51, 185, 138, .35)) !important; }
.cv-highlight p { color: rgba(255, 255, 255, .74) !important; }
.cv-highlight .section-label { color: rgba(255, 255, 255, .7) !important; }
.cv-highlight .btn-primary { background-color: var(--sun) !important; color: var(--ink) !important; border-color: var(--sun) !important; background-image: linear-gradient(#fff, #fff) !important; }
.cv-highlight .btn-outline { color: #fff !important; border-color: rgba(255, 255, 255, .45) !important; background-image: linear-gradient(#fff, #fff) !important; }
.cv-highlight .btn-outline:hover { color: var(--ink) !important; border-color: #fff !important; }
.cv-highlight a:not(.btn) { color: #fff !important; }
.cv-highlight .cv-stat-label, .cv-highlight .cv-sub-label, .cv-highlight .cv-hero-suffix { color: rgba(255, 255, 255, .6) !important; }
.cv-highlight .cv-stat-num, .cv-highlight .cv-hero-num, .cv-highlight .cv-sub-num,
.cv-highlight .count-up, .cv-highlight strong { color: #fff !important; }
.cv-highlight .award-year { color: var(--sun) !important; }
.cv-highlight .award-icon, .cv-highlight .cv-icon { color: var(--sun) !important; }

/* ─── Stats ────────────────────────────────────────────────────── */
.cv-stats { gap: 0 !important; flex-wrap: nowrap !important; }
.cv-stat, .cv-sub-stat, .cv-hero-stat {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
.cv-stat { flex-direction: column !important; align-items: flex-start !important; gap: .35rem !important; }
.cv-stats .cv-stat { padding: 0 clamp(1.2rem, 3vw, 2.4rem) !important; }
.cv-stats .cv-stat:first-child { padding-left: 0 !important; }
.cv-stats .cv-stat + .cv-stat { border-left: 1px solid var(--rule) !important; }
.cv-highlight .cv-stat { align-items: center !important; }
.cv-highlight .cv-stats .cv-stat:first-child { padding-left: clamp(1.2rem, 3vw, 2.4rem) !important; }
.cv-highlight .cv-stats .cv-stat + .cv-stat { border-left-color: rgba(255, 255, 255, .18) !important; }
.cv-stat-num, .cv-hero-num, .cv-sub-num, .cv-sub-stat-num, .fft-num, .mm-num, .dm-value {
  font-family: var(--font-display) !important; font-weight: 600 !important;
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--ink) !important; letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.cv-stat-label, .cv-sub-label, .dm-label, .mm-lbl, .cv-hero-suffix {
  font-family: var(--font-body) !important; font-size: .72rem !important; font-weight: 500 !important;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft) !important; line-height: 1.35;
}

/* Impact result blocks: one big figure, then a tidy 2×2 of sub-figures */
.cv-hero-stat {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  gap: .35rem !important; margin: .4rem 0 1.4rem !important; padding: 0 !important;
}
.cv-hero-stat[style*="center"] { align-items: center !important; }
.cv-hero-num { font-size: clamp(2.6rem, 4vw, 3.4rem) !important; line-height: 1 !important; color: var(--blue) !important; }
.impact-item .cv-stats, .impact-item .cv-sub-stats, .cv-card .cv-sub-stats {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important; margin: 0 0 1.4rem !important; padding: 0 !important;
  border-top: 1px solid var(--rule);
}
.impact-item .cv-stats .cv-stat, .cv-sub-stat {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  gap: .25rem !important; padding: .85rem 0 !important; margin: 0 !important;
  border-bottom: 1px solid var(--rule) !important; border-left: 0 !important;
}
.impact-item .cv-stats .cv-stat:nth-child(2n), .cv-sub-stat:nth-child(2n) { padding-left: 1rem !important; border-left: 1px solid var(--rule) !important; }
.impact-item .cv-stats .cv-stat + .cv-stat:not(:nth-child(2n)) { border-left: 0 !important; }
.cv-sub-num, .impact-item .cv-stat-num { font-size: 1.25rem !important; line-height: 1.15 !important; color: var(--ink) !important; }

/* ─── Media frames ────────────────────────────────────── */
.dashboard-mock {
  padding: 0 !important; border: 1px solid var(--rule-strong) !important; border-radius: 4px !important;
  box-shadow: none !important; background: var(--paper-3) !important; overflow: hidden;
}
.dashboard-mock img { border-radius: 0 !important; transition: transform 6s ease-out; transform: scale(1.04); }
.dashboard-mock.visible img { transform: scale(1); }

/* ─── Tabs, FAQ, forms ─────────────────────────────────────────── */
.tabs-nav, .demo-tabs {
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 2rem !important;
  justify-content: flex-start !important; max-width: none !important;
}
.tab-btn, .demo-tab {
  background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important; box-shadow: none !important; color: var(--ink-soft) !important;
  padding: .9rem 0 !important; margin-bottom: -1px; font-weight: 600 !important;
  transition: color .25s, border-color .25s !important;
}
.tab-btn:hover { color: var(--ink) !important; }
.tab-btn.active, .demo-tab.active, .tab-btn[aria-selected="true"] { color: var(--ink) !important; border-bottom-color: var(--sun) !important; }
.tab-btn::before, .tab-btn::after, .demo-tab::after { display: none !important; }
.tab-btn span, .tab-btn .count { background: var(--paper-2) !important; color: var(--ink-2) !important; border-radius: 2px !important; }
.tab-panel {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 2.4rem 0 0 !important; text-align: left !important;
}
.tab-panel.active { animation: nfRise .6s var(--ease) both; }
.tab-panel-head { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 60ch; }
.tab-panel-head h3 { font-size: 1.6rem !important; letter-spacing: -0.025em; }
.tab-panel-head p { margin-left: 0 !important; margin-right: 0 !important; color: var(--ink-soft) !important; }

.faq-list { border-bottom: 1px solid var(--rule); max-width: none !important; }
.faq-item {
  background: none !important; border: 0 !important; border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important; box-shadow: none !important; transition: border-color .3s !important;
}
.faq-item:hover { border-top-color: var(--blue) !important; }
.faq-q { background: none !important; padding: 1.4rem 0 !important; font-weight: 600 !important; font-size: 1.05rem !important; color: var(--ink) !important; }
.faq-q:hover { color: var(--blue) !important; }
.faq-icon { background: none !important; border: 0 !important; border-radius: 0 !important; color: var(--blue) !important; box-shadow: none !important; }
.faq-a-inner { padding-left: 0 !important; padding-right: 0 !important; color: var(--ink-soft); max-width: 70ch; }

.contact-form, .contact-info {
  background: transparent !important; border: 0 !important; border-top: 2px solid var(--ink) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 2rem 0 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.form-group input, .form-group textarea, .form-group select,
.contact-form input, .contact-form textarea, .contact-form select {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--rule-strong) !important;
  border-radius: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important;
  color: var(--ink) !important; font-family: var(--font-body);
  transition: border-color .3s, box-shadow .3s !important;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus,
.contact-form input:focus, .contact-form textarea:focus {
  border-bottom-color: var(--blue) !important; box-shadow: 0 1px 0 var(--blue) !important; outline: none;
}
.form-group label { font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft) !important; }
.cw-item { background: none !important; border: 0 !important; border-top: 1px solid var(--rule) !important; border-radius: 0 !important; box-shadow: none !important; padding: 1.1rem 0 !important; }
.cw-label { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft) !important; }
.cw-val { color: var(--ink) !important; }

/* ─── Platform pipeline ────────────────────────────────────────── */
.arch-step { text-align: left !important; }
.arch-step-icon { margin-left: 0 !important; }
.arch-connector { display: none !important; }
.arch-step-num, .mode-num {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  font-family: var(--font-display) !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; width: auto !important; height: auto !important;
}
.arch-step-num { color: var(--blue) !important; font-weight: 700 !important; font-size: .9rem !important; letter-spacing: .08em; margin: 0 0 .8rem !important; display: block !important; text-align: left !important; }
.mode-num { opacity: .1 !important; color: var(--blue) !important; font-weight: 700 !important; }
.arch-loop-note {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-size: .8rem !important; font-weight: 500; color: var(--ink-soft) !important;
}

/* ─── Research roadmap: one clean spine, round markers on it ───── */
.roadmap { max-width: 820px !important; margin: 0 !important; padding-left: 0 !important; position: relative; }
.roadmap::before {
  left: 7px !important; top: 10px !important; bottom: 10px !important; width: 2px !important;
  background: var(--rule) !important; box-shadow: none !important; border-radius: 0 !important;
}
.road-item {
  position: relative; background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; transform: none !important;
  padding: 0 0 2.6rem 3rem !important; margin: 0 !important;
}
.road-item:last-child { padding-bottom: 0 !important; }
.road-item::after { display: none !important; }
.road-item::before {
  content: '' !important; position: absolute !important; left: 0 !important; top: 3px !important;
  width: 16px !important; height: 16px !important; border-radius: 50% !important;
  background: var(--paper) !important; border: 2px solid var(--blue) !important;
  box-shadow: none !important; animation: none !important; transform: none !important;
  margin: 0 !important;
}
.road-item.done::before { background: var(--blue) !important; }
.road-item.now::before { background: var(--sun) !important; border-color: var(--sun) !important; animation: nfNow 2.2s ease-out infinite !important; }
@keyframes nfNow {
  0%   { box-shadow: 0 0 0 0 rgba(51, 185, 138, .5); }
  70%  { box-shadow: 0 0 0 10px rgba(51, 185, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(51, 185, 138, 0); }
}
.road-item.future::before { border-style: dashed !important; }
.road-item:hover { transform: none !important; }
.road-phase {
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .1em !important;
  color: var(--blue) !important; margin-bottom: .45rem;
}
.road-phase.now { color: var(--sit-secondary-ink) !important; }
.road-item h3 { font-size: 1.2rem !important; margin-bottom: .4rem !important; }
.road-item p { color: var(--ink-soft) !important; max-width: 62ch; }

/* ─── Awards & partnership alignment ───────────────────────────── */
.award-card { text-align: left !important; }
.award-card .award-icon { margin-right: .6rem !important; }

/* ─── Misc ─────────────────────────────────────────────────────── */
.back-to-top {
  border-radius: 3px !important; background: var(--blue) !important; color: #fff !important;
  box-shadow: none !important; border: 0 !important; transition: background-color .3s, opacity .3s, transform .3s !important;
}
.back-to-top:hover { background: var(--ink) !important; }
.status-banner { background: var(--paper-3) !important; border: 1px solid var(--rule) !important; border-radius: 4px !important; box-shadow: none !important; }

/* ─── Footer ───────────────────────────────────────────────────── */
footer {
  background: var(--ink) !important; color: rgba(255, 255, 255, .7);
  border-top: 3px solid var(--sun) !important; padding: clamp(4rem, 8vw, 6rem) 0 2rem !important;
}
footer::before, footer::after { display: none !important; }
footer .logo-img { filter: none !important; opacity: 1; }
.footer-brand { border: 0 !important; padding-left: 0 !important; }
.footer-brand::before, .footer-brand::after { display: none !important; }
.footer-brand p { color: rgba(255, 255, 255, .62) !important; }
.footer-col h4 { font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .14em !important; color: var(--sun) !important; }
.footer-col a { color: rgba(255, 255, 255, .8) !important; transition: color .25s, transform .25s var(--ease) !important; }
.footer-col a:hover { color: #fff !important; transform: translateX(3px); }
.footer-col a::before, .footer-col a::after { display: none !important; }
.social-btn {
  border-radius: 3px !important; background: transparent !important; box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, .25) !important; color: #fff !important;
  transition: background-color .3s, border-color .3s !important;
}
.social-btn::before { display: none !important; }
.social-btn:hover { background: var(--blue) !important; border-color: var(--blue) !important; }
.social-btn svg { width: 18px; height: 18px; fill: none; color: #fff !important; stroke: #fff !important; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .14) !important; color: rgba(255, 255, 255, .5) !important; font-size: .76rem !important; }
.footer-bottom span { color: rgba(255, 255, 255, .88) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }

/* ─── Reveal motion ────────────────────────────────────────────── */
.reveal {
  filter: none !important;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease) !important;
  transition-delay: var(--reveal-delay, 0ms) !important;
}
.reveal.visible { transform: none; }

/* ─── Linktree ────────────────────────────────────────────────── */
.lt-card {
  background: var(--paper-3) !important; border: 1px solid var(--rule) !important; border-top: 3px solid var(--blue) !important;
  border-radius: 4px !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  animation: nfRise .9s var(--ease) both;
}
.lt-card::before, .lt-card::after { display: none !important; }
.lt-title { font-family: var(--font-display) !important; font-weight: 600 !important; font-size: 1.8rem !important; letter-spacing: -0.03em !important; }
.lt-sub { color: var(--ink-soft) !important; }
.lt-home {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-size: .74rem !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue) !important;
}
.lt-home:hover { color: var(--ink) !important; }
.lt-social, .lt-social.facebook, .lt-social.linkedin, .lt-social.instagram {
  background: transparent !important; color: var(--blue) !important;
  border: 1px solid var(--rule-strong) !important; border-radius: 3px !important;
  box-shadow: none !important; transform: none !important;
  transition: background-color .3s, color .3s, border-color .3s !important;
}
.lt-social:hover { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; }
.lt-divider { background: var(--rule) !important; }
.lt-contact {
  background: var(--blue) linear-gradient(var(--ink), var(--ink)) no-repeat 0 0 / 0% 100% !important;
  color: #fff !important; border-radius: 3px !important;
  box-shadow: none !important; transform: none !important; font-weight: 600 !important;
  transition: background-size .45s var(--ease) !important;
}
.lt-contact:hover { background-size: 100% 100% !important; }
.lt-foot { font-size: .74rem !important; }
.lt-foot span { color: var(--blue) !important; }

/* ─── Small screens ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats .stat + .stat { border-left: 0 !important; padding-left: 0; border-top: 1px solid var(--rule) !important; padding-top: 1rem; margin-top: 1rem; }
  .cv-stats { flex-direction: column; align-items: stretch !important; }
  .cv-stats .cv-stat, .cv-highlight .cv-stats .cv-stat:first-child { padding: 1rem 0 !important; }
  .cv-stats .cv-stat + .cv-stat { border-left: 0 !important; border-top: 1px solid var(--rule) !important; }
  .cv-highlight .cv-stat { align-items: flex-start !important; }
  .cv-highlight .cv-stats .cv-stat + .cv-stat { border-top-color: rgba(255, 255, 255, .18) !important; }
  .impact-item .cv-stats { flex-direction: row; }
  .road-item { padding-left: 2.4rem !important; }
  .tabs-nav { gap: 1.2rem !important; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-content > *, .hero-visual, .tab-panel.active, .lt-card { transform: none !important; animation: none !important; transition: none !important; }
  .hero-card::after, .hero-card img, .hero-badge::before, .road-item.now::before { animation: none !important; }
  .marquee-track { animation: none !important; }
  .gradient-text { background-size: 100% .14em !important; transition: none; }
}

/* Impact: header stats sit left; results grid is an even 2×2 */
.section-header .cv-stats, .section-header .cv-hero-stat { justify-content: flex-start !important; margin-left: 0 !important; }
@media (min-width: 861px) { .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.gradient-text { background-size: 0% .1em !important; }
.visible .gradient-text, .hero-title .gradient-text, .gradient-text.visible { background-size: 100% .1em !important; }
@media (min-width: 861px) { .cv-grid:has(> .cv-card .cv-hero-stat) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ─── Calmer accents: yellow marker only in the page hero title;
       rules are static hairlines, no draw-in animations ─────────── */
.gradient-text, .visible .gradient-text, .gradient-text.visible { background: none !important; }
.hero-title .gradient-text {
  background: linear-gradient(var(--sun), var(--sun)) no-repeat 0 88% / 100% .1em !important;
  animation: nfMark 1.1s var(--ease) .9s both !important;
}
@keyframes nfMark { from { background-size: 0% .1em; } to { background-size: 100% .1em; } }

.section-header::after { display: none !important; }
.reveal:not(.visible) .section-label::before { transform: none; }

.cv-card::after, .why-card::after, .mode-card::after, .partner-card::after,
.team-card::after, .arch-step::after, .pub-item::after {
  height: 1px !important; background: var(--rule-strong) !important;
  transform: none !important; transition: background-color .3s ease !important;
}
.reveal:not(.visible)::after { transform: none !important; }
.clinic-card, .award-card, .impact-item, .wc, .collab-track, .fft-role, .partner-dept-card {
  border-top: 1px solid var(--rule-strong) !important;
}
.hero-stats { border-top-width: 1px !important; border-top-color: var(--rule-strong) !important; }
.contact-form, .contact-info { border-top: 1px solid var(--rule-strong) !important; }

/* ─── Brand palette: aqua + mint (toned down), no orange ───────── */
:root {
  --sit-primary:        #2bb3a8;   /* from #35d8ca, less bright */
  --sit-secondary:      #33b98a;   /* from #3ce3a4, less bright */
  --sit-primary-ink:    #0f7169;   /* text/buttons on light bg (AA) */
  --sit-secondary-ink:  #17704f;

  --blue:      var(--sit-primary-ink);
  --blue-deep: #0a4f4a;
  --aqua:      var(--sit-primary);
  --sun:       var(--sit-secondary);
  --accent-primary:   var(--sit-primary-ink);
  --accent-secondary: var(--sit-primary);
  --accent-success:   var(--sit-secondary);
}
/* Mint accents on dark navy stay light; primary buttons on navy use aqua */
.cv-highlight .btn-primary { background-color: var(--sit-secondary) !important; border-color: var(--sit-secondary) !important; color: var(--ink) !important; }
.cv-highlight .gradient-text { color: #7fd9bb !important; }
.marquee-item .m-em, .footer-col h4 { color: #6fd3b1 !important; }
::selection { background: rgba(51, 185, 138, .35); color: var(--ink); }

/* ─── Scroll-linked motion (driven by js/scroll-fx.js: --p, --pin) ─
   Uses individual translate/rotate/scale so it layers on top of the
   .reveal transform. Only active when the script adds .fx-on. */
.fx-on #hero .hero-content { translate: 0 calc(var(--p, .5) * -70px + 35px); }
.fx-on #hero .hero-visual  { translate: 0 calc(var(--p, .5) * 90px - 45px); }
.fx-on .section-header h2  { translate: 0 calc((1 - var(--pin, 1)) * 18px); }
.fx-on .section-header p   { translate: 0 calc((1 - var(--pin, 1)) * 18px); opacity: calc(.25 + var(--pin, 1) * .75); }
.fx-on .hero-stats, .fx-on .cv-stats { translate: calc((1 - var(--pin, 1)) * -40px) 0; }
.fx-on .logo-wall      { translate: calc((var(--p, .5) - .5) * -80px) 0; }
.fx-on .pub-badges-row { translate: calc((var(--p, .5) - .5) * 60px) 0; }

/* Product screenshot tilts up and settles flat as it scrolls into view */
.fx-on section:has(> .container > .dashboard-mock) .container { perspective: 1600px; }
.fx-on .dashboard-mock {
  transform-origin: 50% 100%;
  rotate: x calc((1 - var(--pin, 1)) * 22deg);
  scale: calc(.88 + var(--pin, 1) * .12);
  opacity: calc(.35 + var(--pin, 1) * .65) !important;
}
.dashboard-mock img { transform: none !important; }

/* Navy panels grow to full width as they arrive */
.fx-on .cv-highlight { scale: calc(.93 + var(--pin, 1) * .07); }

@media (max-width: 720px) {
  .fx-on #hero .hero-content, .fx-on #hero .hero-visual, .fx-on .logo-wall,
  .fx-on .pub-badges-row, .fx-on .hero-stats, .fx-on .cv-stats { translate: none; }
  .fx-on .dashboard-mock { rotate: x calc((1 - var(--pin, 1)) * 12deg); }
}

/* ─── Smooth scroll (Lenis) ─── */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ─── Homepage pinned 3D story (js/story.js adds .story-on) ─── */
.story.story-on { position: relative; height: 100vh; min-height: 640px; padding: 0 !important; overflow: hidden; }
.story-stage { position: absolute; inset: 0; z-index: 0; }
.story-stage canvas { display: block; width: 100%; height: 100%; }
.story-on > .container { position: relative; z-index: 1; height: 100%; padding-top: 118px; pointer-events: none; }
.story-on > .container a, .story-on > .container button { pointer-events: auto; }
.story-on .section-header {
  display: block; max-width: 470px; margin: 0; padding: 0; border: 0;
}
.story-on .section-header::after { display: none; }
.story-on .section-header h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.story-on .section-header p { margin-top: 1.1rem !important; max-width: 40ch; }
.fx-on .story-on .section-header h2, .fx-on .story-on .section-header p { translate: none; opacity: 1; }

/* the five cards stack in one slot, bottom-right; one shows at a time */
.story-on .cv-grid {
  position: absolute; right: clamp(20px, 4vw, 48px); bottom: 48px;
  width: min(390px, 36vw); display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important;
  pointer-events: auto;
}
.story-on .cv-card {
  grid-area: 1 / 1;
  background: var(--paper-3) !important; border: 1px solid var(--rule) !important; border-radius: 8px !important;
  padding: 1.5rem 1.6rem 3.3rem !important;
  opacity: 0 !important; translate: 0 14px; visibility: hidden;
  transition: opacity .45s var(--ease), translate .45s var(--ease), visibility 0s linear .45s !important;
}
.story-on .cv-card.is-active { opacity: 1 !important; translate: 0 0; visibility: visible; transition-delay: 0s !important; }
.story-on .cv-card::after { display: none !important; }
.story-on .cv-card h3 { font-size: 1.3rem !important; }
.story-bar {
  grid-area: 1 / 1; align-self: end; justify-self: start; z-index: 2;
  display: flex; gap: 6px; margin: 0 0 1.3rem 1.6rem;
}
.story-bar span { width: 22px; height: 5px; border-radius: 3px; background: var(--paper-2); transition: background-color .3s, width .4s var(--ease); }
.story-bar span.on { background: var(--sit-primary); }
.story-bar span.on:has(+ span:not(.on)), .story-bar span.on:last-child { width: 48px; }

/* keep the section's button reachable, bottom-left */
.story-on > .container > div:last-child:not(.cv-grid) {
  position: absolute; left: clamp(20px, 4vw, 48px); bottom: 48px; margin: 0 !important;
}
.story-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--paper) 0%, rgba(242, 245, 250, .88) 30%, rgba(242, 245, 250, 0) 50%);
}
.story-stage canvas { opacity: 0; transition: opacity 1.2s var(--ease); }
.story-stage.is-ready canvas { opacity: 1; }

/* story progress segments fill continuously (scroll meter) */
.story-bar span { position: relative; overflow: hidden; background: var(--paper-2) !important; width: 26px !important; }
.story-bar span::after {
  content: ''; position: absolute; inset: 0; background: var(--sit-primary);
  transform-origin: left; transform: scaleX(var(--fill, 0)); transition: transform .18s linear;
}
.story-bar.is-charging span::after { transition: none; }

/* ─── Platform "How it works" pinned story (same pattern as the homepage) ─── */
.story-on .arch-pipeline {
  position: absolute; right: clamp(20px, 4vw, 48px); bottom: 48px;
  width: min(390px, 36vw); display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important;
  pointer-events: auto; margin: 0 !important;
}
.story-on .arch-step {
  grid-area: 1 / 1; text-align: left !important;
  background: var(--paper-3) !important; border: 1px solid var(--rule) !important; border-radius: 8px !important;
  padding: 1.4rem 1.6rem 3.3rem !important;
  opacity: 0 !important; translate: 0 14px; visibility: hidden;
  transition: opacity .45s var(--ease), translate .45s var(--ease), visibility 0s linear .45s !important;
}
.story-on .arch-step.is-active { opacity: 1 !important; translate: 0 0; visibility: visible; transition-delay: 0s !important; }
.story-on .arch-step::after { display: none !important; }
.story-on .arch-step h3 { font-size: 1.3rem !important; }
.story-on .arch-connector { display: none !important; }
.story-on .arch-loop-wrap { max-width: 420px; }

/* Platform story: mirrored layout — heading on the right, step card bottom-left */
.story-flip .story-stage::after { background: linear-gradient(270deg, var(--paper) 0%, rgba(242, 245, 250, .88) 30%, rgba(242, 245, 250, 0) 50%); }
.story-flip .section-header { margin-left: auto !important; }
.story-flip .arch-pipeline { right: auto; left: clamp(20px, 4vw, 48px); }
.story-flip > .container > div:last-child:not(.cv-grid) { left: auto !important; right: clamp(20px, 4vw, 48px); text-align: right; }
.story-flip .arch-loop-note { justify-content: flex-end; }

/* FAQ: keep text clear of the open-state accent bar */
.faq-q { padding-left: 1.1rem !important; }
.faq-a-inner { padding-left: 1.1rem !important; }
.faq-item::before { background: var(--sit-primary) !important; width: 3px !important; border-radius: 2px !important; }

/* Research: Roadmap, Publications and Team all shown — no tab clicks needed */
.tabs-nav { display: none !important; }
.tab-panel { display: block !important; opacity: 1 !important; transform: none !important; }
.tab-panel + .tab-panel { margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem) !important; border-top: 1px solid var(--rule) !important; }

/* ─── Hero: real product (clinician dashboard) instead of a scanned logo ─── */
.hero-grid { align-items: center !important; }
.hero-card--product {
  padding: 0 !important; overflow: hidden; background: var(--paper-3) !important;
  border: 1px solid var(--rule-strong) !important; border-radius: 6px !important;
  box-shadow: 0 30px 60px -36px rgba(10, 22, 51, .35) !important;
}
.hero-card--product::after { display: none !important; }
.hero-card--product img { display: block; width: 100%; height: auto; animation: none !important; }
.hero-visual { margin-right: calc(-1 * clamp(0px, 6vw, 120px)); }
.floating-badge.fb-top { top: 14px !important; right: auto !important; left: 14px; }
.floating-badge.fb-bot { bottom: 14px !important; left: 14px !important; }
@media (max-width: 960px) { .hero-visual { margin-right: 0; } }

/* ─── Facts strip: static, evenly spaced, no ticker ─── */
.marquee--static { background: var(--paper-3) !important; padding: 0 !important; border-top: 1px solid var(--rule) !important; border-bottom: 1px solid var(--rule) !important; }
.marquee--static .marquee-track {
  animation: none !important; width: auto !important; max-width: 1240px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px); display: flex !important; flex-wrap: wrap; gap: 0 !important;
}
.marquee--static .marquee-track > :nth-child(n+15) { display: none !important; }   /* duplicate set only existed for the loop */
.marquee--static .marquee-sep { display: none !important; }
.marquee--static .marquee-item {
  flex: 1 1 250px; padding: 1.3rem 1.4rem 1.3rem 0; margin: 0;
  font-size: .92rem !important; font-weight: 400; letter-spacing: 0; text-transform: none;
  line-height: 1.45; color: var(--ink-soft) !important; white-space: normal;
  border-top: 1px solid var(--rule);
}
.marquee--static .marquee-item .m-em { color: var(--blue) !important; font-weight: 600; }
.marquee--static .marquee-item:hover { color: var(--ink-soft) !important; }
@media (min-width: 961px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important; gap: clamp(2rem, 4vw, 4rem) !important; }
}
.marquee--static .marquee-track { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); column-gap: 2rem !important; }
.marquee--static .marquee-item { display: block !important; }
.marquee--static .m-ico { display: none !important; }
@media (min-width: 961px) {
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important; }
}
.fx-on #hero .hero-visual { translate: 0 calc(var(--p, .5) * 40px - 20px) !important; }
@media (max-width: 1399px) { .hero-visual { margin-right: 0 !important; } }

/* ─── Roadmap: scroll-drawn progress line + milestones that light up when reached ─── */
.road-anim::after {
  content: ''; position: absolute; left: 7px; top: 10px; width: 2px; height: var(--rl, 0px);
  background: var(--sit-primary); transition: height .18s linear; pointer-events: none;
}
.road-anim .road-item::before { z-index: 1; transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.road-anim .road-item:not(.is-reached)::before { background: var(--paper) !important; border-color: var(--rule-strong) !important; animation: none !important; }
.road-anim .road-item.is-reached::before { animation: nfMarkPop .55s var(--ease) both !important; }
.road-anim .road-item.now.is-reached::before { animation: nfMarkPop .55s var(--ease) both, nfNow 2.2s ease-out .55s infinite !important; }
.road-anim .road-item.done.is-reached::before { background: var(--sit-primary) !important; border-color: var(--sit-primary) !important; }
.road-anim .road-item.future.is-reached::before { border-color: var(--sit-primary) !important; }
@keyframes nfMarkPop { 0% { transform: scale(.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.road-anim .road-item > * { transition: opacity .6s var(--ease), translate .6s var(--ease); }
.road-anim .road-item:not(.is-reached) > * { opacity: .28; translate: 18px 0; }
.road-anim .road-item.is-reached > :nth-child(2) { transition-delay: .08s; }
.road-anim .road-item.is-reached > :nth-child(3) { transition-delay: .16s; }
/* footer logo in full colour: its dark-grey "NEURON" needs a light plate to read on the navy footer */
footer .footer-brand .logo { display: inline-flex !important; align-items: center; background: var(--paper); padding: .55rem .8rem; border-radius: 6px; }

/* ─── Equipment page ─── */
.eq-hero { padding: clamp(8rem, 14vw, 10rem) 0 clamp(2.5rem, 5vw, 4rem); }
.eq-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin: 0 0 1.2rem; }
.eq-lead { max-width: 58ch; font-size: 1.08rem; color: var(--ink-soft); margin: 0 0 2.4rem; }
.eq-index { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); }
.eq-index li { flex: 1 1 260px; border-bottom: 1px solid var(--rule); }
.eq-index a { display: flex; gap: 1rem; align-items: baseline; padding: 1.1rem 1.2rem 1.1rem 0; color: var(--ink); font-weight: 600; text-decoration: none; }
.eq-index a span { font-size: .78rem; color: var(--sit-primary-ink, #0f7169); letter-spacing: .08em; }
.eq-index a:hover { color: var(--sit-primary-ink, #0f7169); }
.eq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.eq-device--alt .eq-photo { order: 2; }
.eq-photo { margin: 0; position: sticky; top: 110px; }
.eq-photo img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--rule-strong); }
.eq-photo-slot { aspect-ratio: 4 / 3; border: 1px dashed var(--rule-strong); border-radius: 6px; background: var(--paper-3); display: grid; place-items: center; }
.eq-photo-slot span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.eq-copy h2 { margin: .2rem 0 1.2rem; }
.eq-copy p { color: var(--ink-soft); max-width: 62ch; }
.eq-specs { margin: 2rem 0 0; border-top: 1px solid var(--rule-strong); }
.eq-specs div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--rule); }
.eq-specs dt { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sit-primary-ink, #0f7169); padding-top: .15rem; }
.eq-specs dd { margin: 0; color: var(--ink); line-height: 1.5; }
.eq-steps { list-style: none; counter-reset: eq; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.eq-steps li { counter-increment: eq; padding: 1.4rem 1.4rem 1.4rem 0; border-right: 1px solid var(--rule); }
.eq-steps li + li { padding-left: 1.4rem; }
.eq-steps li:last-child { border-right: 0; }
.eq-steps li::before { content: counter(eq, decimal-leading-zero); display: block; font-size: .78rem; color: var(--sit-primary-ink, #0f7169); letter-spacing: .08em; margin-bottom: .9rem; }
.eq-steps b { display: block; font-size: 1.08rem; color: var(--ink); margin-bottom: .5rem; }
.eq-steps span { color: var(--ink-soft); font-size: .94rem; line-height: 1.55; }
.eq-cta { border-top: 1px solid var(--rule); }
@media (max-width: 900px) {
  .eq-grid { grid-template-columns: 1fr; }
  .eq-photo { position: static; }
  .eq-device--alt .eq-photo { order: 0; }
  .eq-steps { grid-template-columns: 1fr 1fr; }
  .eq-steps li { border-right: 0; padding-left: 0 !important; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 560px) { .eq-steps { grid-template-columns: 1fr; } .eq-specs div { grid-template-columns: 1fr; gap: .25rem; } }
.eq-copy p + p { margin-top: 1rem; }
.eq-caption { margin-top: .7rem; font-size: .82rem; color: var(--ink-soft); line-height: 1.5; }

/* ─── Homepage hero: globe + a background with some depth (this section only) ─── */
#hero { overflow: hidden; isolation: isolate;
  background:
    radial-gradient(58% 70% at 76% 46%, rgba(43, 179, 168, .12), rgba(43, 179, 168, 0) 70%),
    radial-gradient(45% 55% at 4% 96%, rgba(11, 26, 74, .06), rgba(11, 26, 74, 0) 70%),
    linear-gradient(180deg, #f6f9fb 0%, var(--paper) 100%) !important; }
#hero::before { content: '' !important; display: block !important; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(27, 42, 78, .16) 1px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(62% 75% at 74% 46%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 78%);
          mask-image: radial-gradient(62% 75% at 74% 46%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 78%); }
.hero-globe { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1 / 1; margin-left: auto; cursor: grab; touch-action: pan-y; }
.hero-globe.is-dragging { cursor: grabbing; }
.hero-globe canvas { display: block; width: 100%; height: 100%; }
.hero-globe.no-gl { background: radial-gradient(circle at 50% 50%, #e8f0f5 0 48%, transparent 49%); }
#hero .hero-visual .floating-badge { display: none !important; }
.hero-title .gradient-text { white-space: normal; }
@media (max-width: 960px) { .hero-globe { max-width: 420px; margin: 0 auto; } }
/* globe pop-up cards */
.globe-pops { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.gpop { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .38rem .7rem .38rem .4rem; background: #ffffff; border: 1px solid var(--rule); border-radius: 999px;
  font-size: .78rem; font-weight: 500; color: var(--ink); box-shadow: 0 6px 18px -10px rgba(11, 26, 74, .25); opacity: 0; will-change: transform, opacity; }
.gpop-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(43, 179, 168, .12); color: var(--sit-primary-ink, #0f7169); }
.gpop-ico svg { width: 15px; height: 15px; }
/* "Click me" hint under the globe: quiet, and quieter still once it has been clicked */
.globe-hint { position: absolute; left: 50%; bottom: 2%; translate: -50% 0; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .75; transition: opacity .6s ease; }
.globe-hint::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sit-primary); animation: nfHint 2.2s ease-out infinite; }
@keyframes nfHint { 0% { box-shadow: 0 0 0 0 rgba(43, 179, 168, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(43, 179, 168, 0); } }
.hero-globe.was-clicked .globe-hint { opacity: .45; }
.hero-globe.no-gl .globe-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .globe-hint::before { animation: none; } }

/* ═══ Homepage first part: dark, living gradient (js/velaris.js) in the globe's navy / blue / teal ═══ */
:root { --navy: #0a1838; --globe-ink: #050f26; }
#hero { background: var(--globe-ink) !important; color: #e8eef7; }
#hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; display: block; }
#hero::before { background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.5px) !important; z-index: -1; }
#hero .hero-title { color: #ffffff; }
#hero .hero-title .gradient-text { color: #5fe0cf !important; background-image: linear-gradient(#33b98a, #33b98a) !important; }
#hero .hero-badge { color: rgba(232, 238, 247, .7) !important; }
#hero .hero-hook { color: #e8eef7; }
#hero .hero-hook strong { color: #5fe0cf !important; }
#hero .hero-sub { color: rgba(214, 224, 240, .72); }
#hero .hero-sub strong { color: #ffffff; }
#hero .btn-primary { background: #2bb3a8 !important; border-color: #2bb3a8 !important; color: #04122b !important; }
#hero .btn-primary:hover { background: #5fe0cf !important; border-color: #5fe0cf !important; }
#hero .btn-outline { background: transparent !important; border-color: rgba(255, 255, 255, .32) !important; color: #ffffff !important; }
#hero .btn-outline:hover { border-color: #ffffff !important; background: rgba(255, 255, 255, .06) !important; }
#hero .hero-stats { border-top-color: rgba(255, 255, 255, .16) !important; }
#hero .hero-stats .stat + .stat { border-left-color: rgba(255, 255, 255, .14) !important; }
#hero .hero-stats .stat-num, #hero .hero-stats .stat-num > .count-up { color: #ffffff !important; }
#hero .hero-stats .stat-label { color: rgba(214, 224, 240, .62); }
#hero .globe-hint { color: rgba(214, 224, 240, .7); }
/* bigger globe; its canvas is 1.5x the box so orbits and glow can spill out without clipping */
.hero-globe { max-width: 660px; overflow: visible; }
.hero-globe .globe-canvas { position: absolute; left: -25%; top: -25%; width: 150% !important; height: 150% !important; pointer-events: none; }
@media (min-width: 1200px) { #hero .hero-visual { margin-right: -40px; } }
/* the facts strip continues the dark first part */
#hook.marquee--static { background: var(--globe-ink) !important; border-top: 1px solid rgba(255, 255, 255, .06) !important; border-bottom: 0 !important; }
#hook.marquee--static .marquee-item { color: rgba(214, 224, 240, .7) !important; border-top-color: rgba(255, 255, 255, .1); }
#hook.marquee--static .marquee-item .m-em { color: #5fe0cf !important; }
/* the rest of the site's dark surfaces share the globe navy */
footer { background: var(--globe-ink) !important; }
/* hero fades into the facts strip below it (no seam) */
#hero::after { content: '' !important; display: block !important; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 15, 38, 0), var(--globe-ink)); }
/* hero background is now the animated medical-tech scene (js/hero-bg.js): brighter blue, so lift text contrast */
#hero { background: #0f4d9e !important; }
#hero::before { display: none !important; }
#hero::after { height: 120px; }
#hero .hero-title .gradient-text { color: #b3fbf0 !important; background-image: linear-gradient(#5fe0cf, #5fe0cf) !important; }
#hero .hero-hook strong { color: #b3fbf0 !important; }
#hero .hero-badge { color: rgba(240, 248, 255, .85) !important; }
#hero .hero-sub { color: rgba(236, 244, 255, .86); }
#hero .hero-stats .stat-label { color: rgba(236, 244, 255, .78); }
#hero .globe-hint { color: rgba(240, 248, 255, .85); }
#hero .hero-title { text-shadow: 0 1px 24px rgba(5, 25, 70, .25); }
/* partner showcase: everything in the card centred */
.partner-spotlight .ps-card { display: flex !important; flex-direction: column; align-items: center; text-align: center !important; }
.partner-spotlight .ps-tag, .partner-spotlight .ps-name, .partner-spotlight .ps-desc, .partner-spotlight .ps-link { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
.partner-spotlight .ps-desc { max-width: 60ch; }
/* "Next" on the scroll stories: bottom-right of the step card, opposite the progress bar */
.story-next { grid-area: 1 / 1; align-self: end; justify-self: end; z-index: 3; margin: 0 1.2rem .95rem 0;
  display: inline-flex; align-items: center; gap: .3rem; padding: .42rem .7rem .42rem .9rem; cursor: pointer;
  font: 600 .8rem/1 var(--font-body); color: var(--sit-primary-ink, #0f7169); background: transparent;
  border: 1px solid currentColor; border-radius: 999px; transition: background-color .2s, color .2s; }
.story-next svg { width: 15px; height: 15px; }
.story-next:hover, .story-next:focus-visible { background: var(--sit-primary-ink, #0f7169); color: #ffffff; outline: none; }
.story:not(.story-on) .story-next { display: none; }
/* Interactive Journey: Next walks to the next stop */
#hall-next { position: absolute; right: 96px; bottom: 28px; z-index: 6;
  display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .85rem .55rem 1.05rem; cursor: pointer;
  font: 600 .86rem/1 var(--font-body); color: #ffffff; background: var(--sit-primary-ink, #0f7169); border: 0; border-radius: 999px; }
#hall-next svg { width: 16px; height: 16px; }
#hall-next:hover, #hall-next:focus-visible { background: #0b5a54; outline: none; }
body.room-open #hall-next, body.hall-flat #hall-next { opacity: 0; pointer-events: none; }
/* Platform "What is" cards: a still image that opens up on hover / focus */
.wc { transform: none !important; outline: none; }
.wc .wc-shot { margin: -0.6rem -0.6rem 1.1rem; overflow: hidden; border-radius: 6px; max-height: 118px; background: #e6edf3;
  transition: max-height .6s var(--ease), box-shadow .6s var(--ease); }
.wc .wc-shot img { display: block; width: 100%; height: auto; transform: scale(1.06); transform-origin: 50% 45%; transition: transform .8s var(--ease); }
.wc:hover .wc-shot, .wc:focus-visible .wc-shot { max-height: 420px; box-shadow: 0 16px 34px -22px rgba(10, 22, 51, .45); }
.wc:hover .wc-shot img, .wc:focus-visible .wc-shot img { transform: scale(1); }
.wc:focus-visible { box-shadow: 0 0 0 2px var(--sit-primary) !important; }
@media (hover: none) { .wc .wc-shot { max-height: 420px; } .wc .wc-shot img { transform: none; } }
@media (prefers-reduced-motion: reduce) { .wc .wc-shot, .wc .wc-shot img { transition: none; } }
/* centred crop when closed, full frame when open (heights from the card's own width) */
.wc { container-type: inline-size; }
.wc .wc-shot { max-height: none; height: 118px; transition: height .6s var(--ease), box-shadow .6s var(--ease); }
.wc .wc-shot img { height: 100%; object-fit: cover; object-position: 50% 45%; }
.wc:hover .wc-shot, .wc:focus-visible .wc-shot { max-height: none; height: calc((100cqw + 1.2rem) / 1.6); }
.wc .wc-shot img[src*="sensor-glove"] { object-position: 45% 42%; }
.wc .wc-shot img[src*="gamified"] { object-position: 55% 50%; }
@media (hover: none) { .wc .wc-shot { height: calc((100cqw + 1.2rem) / 1.6); } }

/* ── Platform "What is" cards: plain cards with a preview cue; hovering floats the picture beside the card ── */
.wc { position: relative; }
.wc .wc-shot { position: absolute !important; left: calc(100% + 28px); top: 50%; width: min(560px, 44vw); height: auto !important; max-height: none !important;
  margin: 0 !important; z-index: 30; pointer-events: none; opacity: 0; transform: translate(-8px, -50%) scale(.97); transform-origin: left center;
  border-radius: 10px; box-shadow: 0 28px 60px -28px rgba(10, 22, 51, .55), 0 0 0 1px rgba(10, 22, 51, .08) !important;
  transition: opacity .35s var(--ease), transform .45s var(--ease) !important; }
.wc .wc-shot img { height: auto !important; object-fit: initial; transform: none !important; }
.wc:hover .wc-shot, .wc:focus-visible .wc-shot { opacity: 1; transform: translate(0, -50%) scale(1); height: auto !important; }
.wc-cue { display: inline-flex; align-items: center; gap: .6rem; margin-top: .9rem; font-size: .76rem; font-weight: 600; letter-spacing: .04em; color: var(--sit-primary-ink, #0f7169); }
.wc-cue img { width: 46px; height: 30px; object-fit: cover; border-radius: 4px; border: 1px solid var(--rule); transition: transform .3s var(--ease); }
.wc:hover .wc-cue img, .wc:focus-visible .wc-cue img { transform: scale(1.08); }
.wc { cursor: zoom-in; }
@media (max-width: 1100px), (hover: none) {
  .wc .wc-shot { position: static !important; width: auto; opacity: 1; transform: none; margin: 0 0 1rem !important; box-shadow: none !important; }
  .wc-cue { display: none; }
  .wc { cursor: default; }
}

/* Back + Next on the scroll stories */
.story-nav { grid-area: 1 / 1; align-self: end; justify-self: end; z-index: 3; margin: 0 1.2rem .95rem 0; display: inline-flex; gap: .4rem; }
.story-nav .story-next { margin: 0; }
.story-back { display: inline-flex; align-items: center; gap: .25rem; padding: .42rem .85rem .42rem .55rem; cursor: pointer;
  font: 600 .8rem/1 var(--font-body); color: var(--ink-soft); background: transparent; border: 1px solid var(--rule-strong); border-radius: 999px; transition: color .2s, border-color .2s; }
.story-back svg { width: 15px; height: 15px; }
.story-back:hover:not(:disabled), .story-back:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; }
.story-back:disabled { opacity: .35; cursor: default; }
.story:not(.story-on) .story-nav { display: none; }
/* Interactive Journey: Back + Next together */
#hall-nav { position: absolute; right: 96px; bottom: 28px; z-index: 6; display: inline-flex; gap: .45rem; }
#hall-nav #hall-next { position: static; }
#hall-back { display: inline-flex; align-items: center; gap: .3rem; padding: .55rem 1rem .55rem .7rem; cursor: pointer;
  font: 600 .86rem/1 var(--font-body); color: var(--ink); background: rgba(255, 255, 255, .92); border: 1px solid var(--rule-strong); border-radius: 999px; }
#hall-back svg { width: 16px; height: 16px; }
#hall-back:hover, #hall-back:focus-visible { border-color: var(--ink); outline: none; }
body.room-open #hall-nav, body.hall-flat #hall-nav { opacity: 0; pointer-events: none; }
/* homepage hero: every line of text solid and high-contrast on the blue */
#hero .hero-title, #hero .hero-hook, #hero .hero-sub, #hero .hero-sub strong, #hero .hero-badge,
#hero .hero-stats .stat-num, #hero .hero-stats .stat-label, #hero .globe-hint { color: #ffffff !important; opacity: 1; }
#hero .hero-sub, #hero .hero-hook { text-shadow: 0 1px 2px rgba(4, 18, 50, .35); }
#hero .hero-title .gradient-text, #hero .hero-hook strong { color: #c9fff6 !important; }
#hero .hero-stats .stat-label { font-weight: 600; }
#hero .hero-badge::before { background: #5fe0cf !important; }
/* tablets / phones: keep the equipment photo a sensible size once the layout stacks */
@media (max-width: 900px) { .eq-photo { max-width: 520px; margin: 0 auto !important; } }

/* ── phones: no globe in the hero ── */
/* the globe only appears beside the headline; once the hero stacks it would sit alone, so it is left out */
@media (max-width: 960px) { #hero .hero-visual { display: none !important; } }

/* ── Platform "What is" cards: at rest a plain card with the preview cue; on hover the picture opens up inside the card ── */
.wc .wc-shot { position: static !important; left: auto; top: auto; width: auto !important; transform: none !important; opacity: 1 !important;
  margin: -0.6rem -0.6rem 0 !important; height: 0 !important; overflow: hidden; border-radius: 6px; box-shadow: none !important; pointer-events: none;
  transition: height .6s var(--ease), margin .6s var(--ease) !important; }
.wc .wc-shot img { display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 45%; transform: scale(1.04) !important; transition: transform .8s var(--ease) !important; }
.wc:hover .wc-shot, .wc:focus-visible .wc-shot { height: calc((100cqw + 1.2rem) / 1.6) !important; margin-bottom: 1.1rem !important; }
.wc:hover .wc-shot img, .wc:focus-visible .wc-shot img { transform: none !important; }
.wc-cue { transition: opacity .3s var(--ease), max-height .4s var(--ease), margin .4s var(--ease); max-height: 40px; overflow: hidden; }
.wc:hover .wc-cue, .wc:focus-visible .wc-cue { opacity: 0; max-height: 0; margin-top: 0; }
@media (max-width: 1100px), (hover: none) {
  .wc .wc-shot { height: calc((100cqw + 1.2rem) / 1.6) !important; margin-bottom: 1rem !important; }
  .wc .wc-shot img { transform: none !important; }
}

/* ── scroll stories on phones / iPad portrait: compact player (scene, then card, Back / Next / swipe) ── */
.story.story-on.story-compact { height: auto; min-height: 0; overflow: visible; padding: clamp(56px, 11vw, 96px) 0 !important; }
.story-compact > .container { height: auto; padding-top: 0; pointer-events: auto; }
.story-compact .section-header { max-width: none !important; margin: 0 0 1.2rem !important; }
.story-compact .story-stage { position: relative; inset: auto; height: clamp(340px, 64svh, 760px); border-radius: 0; overflow: hidden;
  width: 100vw; max-width: none; margin: 0 0 1rem calc(50% - 50vw);   /* edge to edge, as tall as the card below allows */
  background: var(--paper-2); touch-action: pan-y; pointer-events: auto; }
@media (orientation: landscape) { .story-compact .story-stage { height: clamp(300px, 78svh, 760px); } }
.story-compact .story-stage::after { display: none; }
.story-compact .cv-grid, .story-compact .arch-pipeline { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; width: auto !important; max-width: none !important; }
.story-compact .cv-card, .story-compact .arch-step { min-height: 0; }
.story-compact > .container > div:last-child:not(.cv-grid):not(.arch-pipeline) { position: static !important; margin-top: 1.4rem !important; text-align: center !important; }
.story-compact.story-flip .section-header { margin-left: 0 !important; }
.story-compact .arch-loop-note { position: static !important; margin-top: 1rem; justify-content: flex-start !important; }
.story-compact .story-nav .story-next, .story-compact .story-back { padding-top: .55rem; padding-bottom: .55rem; }
/* compact story: no heading block above the scene (scene first, the step card underneath) */
.story-compact .section-header { display: none !important; }

/* ── homepage hero, higher contrast: deeper green title (no underline), solid buttons, horizon kept clear ── */
#hero { background: #0b3a7a !important; }
#hero .hero-title .gradient-text { color: #2fd47c !important; -webkit-text-fill-color: #2fd47c !important; background-image: none !important; background-size: 0 0 !important; text-decoration: none !important; }
#hero .hero-title { text-shadow: 0 2px 18px rgba(3, 14, 40, .45); }
#hero .hero-sub, #hero .hero-hook, #hero .hero-badge, #hero .hero-stats .stat-label { text-shadow: 0 1px 3px rgba(3, 14, 40, .55); }
#hero .hero-hook strong { color: #6ff0b0 !important; }
#hero .btn-primary { background: #2fd47c !important; border-color: #2fd47c !important; color: #04122b !important; font-weight: 700; box-shadow: 0 6px 20px rgba(3, 14, 40, .35); }
#hero .btn-primary:hover, #hero .btn-primary:focus-visible { background: #5fe6a0 !important; border-color: #5fe6a0 !important; }
#hero .btn-outline { background: #ffffff !important; border-color: #ffffff !important; color: #0b2a63 !important; font-weight: 700; box-shadow: 0 6px 20px rgba(3, 14, 40, .35); }
#hero .btn-outline:hover, #hero .btn-outline:focus-visible { background: #e3f6ff !important; border-color: #e3f6ff !important; color: #0b2a63 !important; }
#hero .btn::before, #hero .btn::after { display: none !important; }
/* the text block no longer drifts against the background, and the stats sit well below the buttons,
   so the horizon line drawn between them always keeps its distance */
.fx-on #hero .hero-content { translate: none !important; }
#hero .hero-stats { margin-top: clamp(4.5rem, 7vw, 6rem) !important; }
#hero .hero-stats { border-top-color: transparent !important; }   /* the horizon line is the divider */