/* ============================================================
   Silurus Software — v2
   Calm authority. Typography does the work.
   One primary (ink), neutrals (paper, bone, steel), one accent
   (signal green) used in measured doses.
   ============================================================ */

:root {
  /* Ink (primary, dark surfaces) — Palette B: deep navy */
  --ink-deep: #060F1E;    /* deepest stop — footer, gradient bottoms */
  --ink: #0A1A2C;
  --ink-2: #112236;
  --ink-3: #1A2D44;

  /* Paper (cool premium neutrals for light surfaces) */
  --paper: #EEF1F5;       /* main light bg — cool off-white, medtech */
  --paper-2: #E4E9F0;     /* slightly deeper */
  --bone: #D5DCE5;        /* coolest deep stop */

  /* Steel (text on light) */
  --steel-1: #15202E;     /* navy-tinted body text */
  --steel-2: #44505F;
  --steel-3: #76808F;
  --steel-4: #A6ACB7;

  /* On dark */
  --ivory: #EAEDF2;
  --ivory-mute: rgba(234, 237, 242, 0.62);
  --ivory-faint: rgba(234, 237, 242, 0.38);

  /* Signal — brand cyan-blue. Numbers, bullets, brand mark interior. */
  --signal: #1FB6E0;
  --signal-deep: #0D97D7;
  --signal-soft: rgba(31, 182, 224, 0.18);

  /* Warm — terracotta. Primary CTA, kickers, highlights. Used sparingly. */
  --warm: #D26D43;
  --warm-2: #BC5C34;
  --warm-soft: rgba(210, 109, 67, 0.20);
  --warm-fg: #1B0E06;

  /* Hairlines */
  --rule: rgba(10, 26, 44, 0.10);
  --rule-strong: rgba(10, 26, 44, 0.18);
  --rule-dark: rgba(234, 237, 242, 0.10);
  --rule-dark-strong: rgba(234, 237, 242, 0.18);

  /* Type */
  --sans: "Inter", "Söhne", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Layout */
  --max: 1280px;
  --max-wide: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --gutter-lg: clamp(28px, 5vw, 72px);

  /* Motion */
  --ease: cubic-bezier(0.6, 0.04, 0.34, 1);
  --ease-soft: cubic-bezier(0.32, 0.08, 0.24, 1);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--steel-1);
  font-size: 15.5px;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--warm-soft); color: var(--ink); }

/* ============== Typography =================================== */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.022em;
  margin: 0;
  color: inherit;
  text-wrap: balance;
}
h1 {
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: 500;
}
h2 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.022em;
}
h3 {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.016em;
  font-weight: 500;
}
h4 {
  font-size: 15.5px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 500;
}
p { margin: 0; }

.lede {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--steel-2);
  max-width: 56ch;
}
.dark .lede { color: var(--ivory-mute); }

.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum", "zero";
}
.mono-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-3);
  font-weight: 500;
}
.dark .mono-label { color: var(--ivory-faint); }

.mono-label .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warm);
  margin-right: 9px;
  vertical-align: 1px;
}

/* ============== Layout primitives ============================ */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap-wide { max-width: var(--max-wide); }
.hero .hero-bottom { /* keep stat row aligned to same wide wrap */ }

section { position: relative; }

.section-pad { padding: clamp(72px, 7.5vw, 108px) 0; }
.section-pad-sm { padding: clamp(48px, 5vw, 72px) 0; }

/* Tighten where two same-tone sections meet (light→light, dark→dark) */
[data-nav="paper"] + [data-nav="paper"].section-pad,
[data-nav="ink"] + [data-nav="ink"].section-pad {
  padding-top: clamp(40px, 4.5vw, 64px);
}
[data-nav="paper"] + [data-nav="paper"].section-pad-sm,
[data-nav="ink"] + [data-nav="ink"].section-pad-sm {
  padding-top: clamp(32px, 3.5vw, 48px);
}

.dark { background: var(--ink); color: var(--ivory); }
.dark-deep { background: var(--ink); color: var(--ivory); }
.paper { background: var(--paper); color: var(--steel-1); }
.paper-2 { background: var(--paper-2); color: var(--steel-1); }

/* Rule lines used as compositional elements */
.rule { border-top: 1px solid var(--rule); }
.rule-bottom { border-bottom: 1px solid var(--rule); }
.dark .rule, .dark-deep .rule { border-color: var(--rule-dark); }
.dark .rule-bottom { border-color: var(--rule-dark); }

.section-head {
  display: grid;
  grid-template-columns: minmax(180px, 200px) 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.dark .section-head, .dark-deep .section-head { /* dark sections — borderless */ }

.section-head .head-tag {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  position: relative;
}
.section-head .head-tag::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 12px;
  width: 2px;
  height: 14px;
  background: var(--warm);
}
.dark .section-head .head-tag::before,
.dark-deep .section-head .head-tag::before,
.dark-grad .section-head .head-tag::before { background: var(--warm); }
.section-head .head-tag .idx {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--steel-3);
  letter-spacing: 0.06em;
}
.dark .section-head .head-tag .idx { color: var(--ivory-faint); }
.section-head .head-tag .lbl {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-2);
}
.dark .section-head .head-tag .lbl { color: var(--ivory-mute); }

.section-head .head-body { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }

@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; padding-top: 20px; padding-bottom: 36px; }
}

/* ============== Nav ========================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  padding: 21px 0;
  transition: background 360ms var(--ease), border-color 360ms var(--ease), backdrop-filter 360ms var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.on-paper { color: var(--steel-1); }
.nav.on-ink { color: var(--ivory); }
.nav.scrolled.on-paper {
  background: rgba(238, 241, 245, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--rule);
}
.nav.scrolled.on-ink {
  background: rgba(14, 17, 22, 0.78);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--rule-dark);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 15.5px;
  color: inherit;
}
.brand-logo {
  height: 55px;
  width: auto;
  display: block;
  transition: opacity 360ms var(--ease);
}
/* Light (white) logo on ink sections; color logo on paper sections */
.brand-logo-dark { display: none; }
.nav.on-paper .brand-logo-light { display: none; }
.nav.on-paper .brand-logo-dark { display: block; }
.footer .brand-logo { height: 54px; }
.brand .mark {
  width: 22px; height: 22px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.brand .mark svg { width: 100%; height: 100%; }
.brand .name { letter-spacing: -0.012em; }
.brand .name .ent { color: var(--steel-3); font-weight: 400; }
.dark .brand .name .ent, .nav.on-ink .brand .name .ent { color: var(--ivory-faint); }

.nav-links {
  display: flex;
  gap: 28px;
  font-size: 16px;
  color: inherit;
  opacity: 0.78;
}
.nav-links a {
  position: relative;
  white-space: nowrap;
  transition: opacity 220ms var(--ease), color 220ms var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--warm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a:hover { opacity: 1; }

/* ---- Services dropdown ---- */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-dd-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity 220ms var(--ease);
}
.nav-dd-trigger::after {
  content: "";
  position: absolute;
  left: 0; right: 16px;
  bottom: -6px;
  height: 1px;
  background: var(--warm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease);
}
.nav-item:hover .nav-dd-trigger::after,
.nav-item:focus-within .nav-dd-trigger::after { transform: scaleX(1); }
.nav-item:hover .nav-dd-trigger,
.nav-item:focus-within .nav-dd-trigger { opacity: 1; }
.nav-dd-caret {
  font-size: 12px;
  opacity: 0.7;
  transition: transform 240ms var(--ease);
}
.nav-item:hover .nav-dd-caret,
.nav-item:focus-within .nav-dd-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -20px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  gap: 0;
  padding: 10px 0;
  background: var(--ink);
  border: 1px solid var(--rule-dark-strong);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms var(--ease);
  pointer-events: none;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.6);
}
.nav-dropdown::before {
  /* invisible bridge so the menu doesn't close in the gap above it */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -14px;
  height: 14px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dd-col {
  display: flex;
  flex-direction: column;
  padding: 18px 0 14px;
  border-left: 1px solid var(--rule-dark);
}
.nav-dd-col:first-child { border-left: 0; }
.nav-dd-head {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ivory);
  opacity: 1;
  padding: 0 24px 4px;
  margin-bottom: 6px;
}
.nav-dd-head::after { display: none; }
.nav-dd-sub {
  font-size: 13px;
  color: var(--ivory-mute);
  opacity: 0.78;
  padding: 8px 24px;
  letter-spacing: -0.005em;
  transition: color 200ms var(--ease), background 200ms var(--ease), opacity 200ms var(--ease), padding-left 200ms var(--ease);
  position: relative;
}
.nav-dd-sub::after { display: none; }
.nav-dd-sub::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: var(--warm);
  transition: height 200ms var(--ease);
}
.nav-dd-sub:hover {
  opacity: 1;
  color: var(--ivory);
  background: rgba(255,255,255,0.035);
  padding-left: 30px;
}
.nav-dd-sub:hover::before { height: 14px; }

/* Single-column dropdown — uniform links, all same colour */
.nav-dd-link {
  font-size: 16px;
  color: var(--ivory);
  opacity: 1;
  padding: 9px 24px;
  letter-spacing: -0.005em;
  position: relative;
  white-space: nowrap;
  transition: color 200ms var(--ease), background 200ms var(--ease), padding-left 200ms var(--ease);
}
.nav-dd-link::after { display: none; }
.nav-dd-link::before {
  content: "";
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 0;
  background: var(--warm);
  transition: height 200ms var(--ease);
}
.nav-dd-link:hover { color: var(--ivory); background: rgba(255,255,255,0.035); padding-left: 30px; }
.nav-dd-link:hover::before { height: 14px; }
.nav-dd-link[aria-current="page"] { color: var(--ivory); }
.nav-dd-link[aria-current="page"]::before { height: 14px; }
.nav-cta {
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 0;
  opacity: 0.85;
  transition: opacity 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-cta:hover { opacity: 1; }
.nav.on-paper .nav-cta:hover { background: var(--ink); color: var(--paper); }
.nav.on-ink .nav-cta:hover { background: var(--ivory); color: var(--ink); }
.nav-cta .arr { display: inline-block; transition: transform 220ms var(--ease); }
.nav-cta:hover .arr { transform: translateX(3px); }

/* ============== Temporary style picker ====================== */
.style-picker { position: relative; }
.style-trigger {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  background: transparent;
  border: 1px solid currentColor;
  border-color: rgba(255,255,255,0.18);
  color: inherit;
  padding: 7px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 200ms var(--ease), border-color 200ms var(--ease);
  opacity: 0.78;
}
.nav.on-paper .style-trigger { border-color: var(--rule-strong); }
.style-trigger:hover { opacity: 1; }
.style-trigger .style-pre { opacity: 0.55; text-transform: uppercase; letter-spacing: 0.16em; }
.style-trigger .style-name { letter-spacing: 0.02em; text-transform: none; font-family: var(--sans); font-size: 12px; }
.style-trigger .style-caret { font-size: 12px; opacity: 0.7; }
.style-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 90;
  min-width: 280px;
  background: var(--ink);
  border: 1px solid var(--rule-dark-strong);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.nav.on-paper .style-panel {
  background: #fff;
  border-color: var(--rule-strong);
}
.style-panel[hidden] { display: none; }
.style-opt {
  background: transparent;
  border: 0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  color: var(--ivory);
  text-align: left;
  transition: background 180ms var(--ease);
  font-family: var(--sans);
}
.nav.on-paper .style-opt { color: var(--steel-1); }
.style-opt:hover { background: rgba(255,255,255,0.05); }
.nav.on-paper .style-opt:hover { background: rgba(10,26,44,0.04); }
.style-opt.is-active { background: rgba(31,182,224,0.10); }
.nav.on-paper .style-opt.is-active { background: rgba(31,182,224,0.08); }
.style-swatches {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.15);
}
.nav.on-paper .style-swatches { border-color: var(--rule-strong); }
.style-swatches i {
  width: 14px; height: 24px; display: inline-block;
}
.style-label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.style-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-top: 2px;
  opacity: 0.55;
  text-transform: none;
  font-weight: 400;
}

@media (max-width: 1080px) {
  .style-picker .style-pre { display: none; }
}
@media (max-width: 900px) {
  .style-picker { display: none; }
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid currentColor;
  border-color: transparent;
}
.lang {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  transition: opacity 200ms var(--ease), color 200ms var(--ease);
  position: relative;
}
.lang::after {
  content: "·";
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
  pointer-events: none;
}
.lang:last-child::after { display: none; }
.lang:hover { opacity: 0.85; }
.lang.is-active {
  opacity: 1;
  color: var(--signal);
}
.lang.is-active::after { color: inherit; opacity: 1; }
.nav.on-paper .lang.is-active { color: var(--signal); }
.nav.on-ink   .lang.is-active { color: var(--signal); }

@media (max-width: 820px) { .nav-links { display: none; } .lang-switch { gap: 0; } .lang { padding: 8px 6px; } }

/* ============== Buttons ====================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px 13px 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
  min-height: 44px;
  font-family: inherit;
  background: transparent;
  border-radius: 0;
}
.btn .arr { display: inline-block; transition: transform 240ms var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

.btn-ink {
  background: var(--ink);
  color: var(--paper);
}
.btn-ink:hover { background: #1F2532; }

/* Primary CTA — terracotta. The single warm note on the page. */
.btn-paper {
  background: var(--warm);
  color: var(--warm-fg);
}
.btn-paper:hover { background: var(--warm-2); }

.btn-outline-ink {
  border-color: var(--rule-strong);
  color: var(--steel-1);
}
.btn-outline-ink:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-outline-paper {
  border-color: var(--rule-dark-strong);
  color: var(--ivory);
}
.btn-outline-paper:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }

.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 3px;
}

/* ============== Hero ========================================= */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--ivory);
  overflow: hidden;
  padding-top: 96px;
  padding-bottom: 32px;
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============== Hero video backdrop ========================= */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.72;
  pointer-events: none;
  filter: saturate(0.65) contrast(1.05) brightness(0.95);
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ink) 88%, transparent) 0%,
      color-mix(in srgb, var(--ink) 55%, transparent) 42%,
      color-mix(in srgb, var(--ink) 12%, transparent) 70%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ink-deep) 30%, transparent) 0%,
      color-mix(in srgb, var(--ink-deep) 12%, transparent) 40%,
      color-mix(in srgb, var(--ink-deep) 62%, transparent) 100%);
}
.hero[data-hero-mode="video"] #hero-canvas { display: none; }
.hero[data-hero-mode="waveform"] .hero-video,
.hero[data-hero-mode="axes"] .hero-video,
.hero[data-hero-mode="lattice"] .hero-video,
.hero[data-hero-mode="off"] .hero-video,
.hero[data-hero-mode="waveform"] .hero-video-overlay,
.hero[data-hero-mode="axes"] .hero-video-overlay,
.hero[data-hero-mode="lattice"] .hero-video-overlay,
.hero[data-hero-mode="off"] .hero-video-overlay { display: none; }
.hero[data-hero-mode="off"] #hero-canvas { display: none; }

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* fine measured grid overlay (very faint) */
.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    linear-gradient(to right, rgba(234,237,242,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(234,237,242,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.25));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.25));
}

.hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding-top: 48px;
  padding-bottom: 0;
}

.hero-head h1 { max-width: none; }
.hero-head .lede { max-width: 60ch; }

.hero-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 18px;
  padding-bottom: 24px;
  min-height: 100%;
  position: relative;
}
.hero-stamp {
  margin-top: auto;
  width: 64px;
  height: auto;
  opacity: 0.18;
  align-self: flex-start;
  pointer-events: none;
  filter: drop-shadow(0 0 0 transparent);
}
.hero-domains {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}
.hero-domains li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-dark);
  color: var(--ivory-mute);
  transition: color 240ms var(--ease);
}
.hero-domains li:first-child { border-top: 0; padding-top: 0; }
.hero-domains li:hover { color: var(--ivory); }
.hero-domains .hd-icon {
  width: 22px;
  height: 22px;
  color: var(--signal);
  display: block;
}
.hero-domains .hd-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hero-rail { display: none; }
}
.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ivory-faint);
  letter-spacing: 0.04em;
}
.hero-meta .row { display: flex; gap: 10px; align-items: center; }
.hero-meta .row .k { width: 70px; color: var(--ivory-mute); }
.hero-meta .row .v { color: var(--ivory); }

.hero h1 {
  color: var(--ivory);
  font-size: clamp(40px, 5.2vw, 68px);
  text-shadow: 0 1px 30px rgba(6, 15, 30, 0.45);
}
.hero h1 .accent { color: var(--warm); }

/* ============== Intro expertise list (Why section) ========== */
.intro-expertise {
  margin-bottom: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(180px, 200px) 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 760px) { .intro-expertise { grid-template-columns: 1fr; gap: 18px; } }
.intro-expertise .ie-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-3);
  padding-top: 14px;
}
.intro-expertise .ie-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
}
@media (max-width: 560px) { .intro-expertise .ie-list { grid-template-columns: 1fr; } }
.intro-expertise .ie-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--rule);
}
.intro-expertise .ie-list .ie-idx {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel-3);
  font-feature-settings: "tnum";
}
.intro-expertise .ie-list a {
  font-size: 15.5px;
  letter-spacing: -0.012em;
  color: var(--ink);
  position: relative;
  transition: color 200ms var(--ease), padding-left 200ms var(--ease);
}
.intro-expertise .ie-list a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  width: 8px;
  height: 2px;
  background: var(--warm);
  transition: transform 200ms var(--ease);
}
.intro-expertise .ie-list a:hover {
  color: var(--warm);
  padding-left: 14px;
}
.intro-expertise .ie-list a:hover::before { transform: translateY(-50%) scaleX(1); }

/* ============== Stats strip (below hero, light) ============= */
.stats-strip {
  background: var(--paper);
  color: var(--steel-1);
}
.stats-strip .wrap { padding-top: clamp(28px, 3.5vw, 44px); padding-bottom: clamp(28px, 3.5vw, 44px); }
.stats-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
@media (max-width: 700px) { .stats-strip-grid { grid-template-columns: 1fr 1fr; row-gap: 28px; } }
.stats-strip .stat-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stats-strip .stat-cell .l {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-3);
}
.stats-strip .stat-cell .v {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--steel-1);
  font-feature-settings: "tnum";
}
.stats-strip .stat-cell .v .acc { color: var(--signal); }

/* Hero kicker — brighter + a faint contrast pill so it reads over the video */
.hero .hero-head .mono-label {
  color: var(--ivory);
  font-size: 12px;
  letter-spacing: 0.2em;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px 7px 11px;
  border: 1px solid var(--rule-dark-strong);
  background: color-mix(in srgb, var(--ink-deep) 50%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero .hero-head .mono-label .dot {
  width: 7px; height: 7px;
  background: var(--warm);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warm) 22%, transparent);
}

.hero .lede {
  margin-top: 28px;
  color: var(--ivory);
  max-width: 54ch;
  text-shadow: 0 1px 20px rgba(6, 15, 30, 0.5);
}
.hero-ctas { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }

.hero-bottom {
  position: relative;
  z-index: 3;
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--rule-dark);
  padding-top: 28px;
  padding-bottom: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 760px) {
  .hero-top { grid-template-columns: 1fr; }
  .hero-meta { flex-direction: row; flex-wrap: wrap; gap: 20px; }
  .hero-meta .row .k { width: auto; }
  .hero-bottom { grid-template-columns: 1fr 1fr; }
}

.hero-stat {
  padding: 6px 24px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid var(--rule-dark);
  padding-left: 20px;
}
.hero-stat:first-child { border-left: 0; padding-left: 0; }
.hero-stat .v {
  font-size: 26px;
  letter-spacing: -0.024em;
  color: var(--ivory);
  font-weight: 500;
  font-feature-settings: "tnum";
}
.hero-stat .v .acc { color: var(--signal); }
.hero-stat .l {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-faint);
}

/* ============== Partners ===================================== */
.partners {
  background: var(--paper);
  padding: 56px 0 60px;
  border-bottom: 1px solid var(--rule);
}
.partners-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.partners-inner .mono-label { color: var(--steel-3); text-align: center; }
.partners-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(28px, 3.5vw, 48px);
  align-items: center;
}
.partner-logo:hover { opacity: 1; }
.partner-logo svg { height: 100%; width: auto; max-width: 160px; }

/* ============== Why us — restrained grid ===================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 36px 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 320px;
  background: transparent;
  transition: background 280ms var(--ease);
}
.why-card:hover { background: rgba(14,17,22,0.025); }
.why-card .why-head {
  display: flex; align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--steel-3);
  letter-spacing: 0.06em;
}
.why-card h3 {
  font-size: 20px;
  letter-spacing: -0.02em;
  max-width: 14ch;
  margin-top: 8px;
}
.why-card p { color: var(--steel-2); font-size: 14.5px; line-height: 1.6; max-width: 32ch; }
.why-card .why-icon { width: 28px; height: 28px; color: var(--ink); }

/* When the Why section is dark, switch hairline + text colors */
.dark-deep .why-grid,
.dark-deep .why-card {
  border-color: var(--rule-dark);
}
.dark-deep .why-card:hover { background: rgba(255,255,255,0.03); }
.dark-deep .why-card .why-head { color: var(--ivory-faint); }
.dark-deep .why-card h3 { color: var(--ivory); }
.dark-deep .why-card p { color: var(--ivory-mute); }
.dark-deep .why-card .why-icon { color: var(--ivory); }



/* ============================================================
   Temporary style variants
   ============================================================ */
body[data-style="2"] {
  --ink: #0F1B17;
  --ink-deep: #07110D;
  --ink-2: #15241F;
  --ink-3: #1C3128;
  --paper: #EDF0EC;
  --paper-2: #E3E8E1;
  --bone: #D5DCD2;
  --steel-1: #131F1A;
  --steel-2: #44504A;
  --steel-3: #767F78;
  --ivory: #EDEDE5;
  --ivory-mute: rgba(237, 237, 229, 0.62);
  --ivory-faint: rgba(237, 237, 229, 0.38);
  --signal: #2DBA8A;
  --signal-deep: #1B9A6E;
  --signal-soft: rgba(45, 186, 138, 0.18);
  --warm: #D17B2E;
  --warm-2: #BD6A23;
  --warm-soft: rgba(209, 123, 46, 0.22);
  --warm-fg: #1C0E04;
  --rule: rgba(15, 27, 23, 0.10);
  --rule-strong: rgba(15, 27, 23, 0.18);
  --rule-dark: rgba(237, 237, 229, 0.10);
  --rule-dark-strong: rgba(237, 237, 229, 0.18);
  --sans: "Geist", "Inter", system-ui, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
}
body[data-style="3"] {
  --ink: #131A2C;
  --ink-deep: #0A1020;
  --ink-2: #1B2238;
  --ink-3: #232C44;
  --paper: #ECEFF3;
  --paper-2: #E1E5EC;
  --bone: #D4D9E1;
  --steel-1: #181F2E;
  --steel-2: #4A5160;
  --steel-3: #7B8294;
  --ivory: #E8EAF0;
  --ivory-mute: rgba(232, 234, 240, 0.62);
  --ivory-faint: rgba(232, 234, 240, 0.38);
  --signal: #6F8FE0;
  --signal-deep: #4F73D0;
  --signal-soft: rgba(111, 143, 224, 0.20);
  --warm: #C9594F;
  --warm-2: #B34B41;
  --warm-soft: rgba(201, 89, 79, 0.22);
  --warm-fg: #1B0A08;
  --rule: rgba(19, 26, 44, 0.10);
  --rule-strong: rgba(19, 26, 44, 0.18);
  --rule-dark: rgba(232, 234, 240, 0.10);
  --rule-dark-strong: rgba(232, 234, 240, 0.18);
  --sans: "DM Sans", "Inter", system-ui, sans-serif;
  --mono: "DM Mono", "JetBrains Mono", ui-monospace, monospace;
}
body[data-style="4"] {
  --ink: #1B1F26;
  --ink-deep: #11141A;
  --ink-2: #242931;
  --ink-3: #2E343E;
  --paper: #F2F0EC;
  --paper-2: #E8E5DD;
  --bone: #DAD5CA;
  --steel-1: #1F2329;
  --steel-2: #50535A;
  --steel-3: #80848C;
  --ivory: #E9E6DE;
  --ivory-mute: rgba(233, 230, 222, 0.62);
  --ivory-faint: rgba(233, 230, 222, 0.38);
  --signal: #5085B0;
  --signal-deep: #3A6B95;
  --signal-soft: rgba(80, 133, 176, 0.20);
  --warm: #B85A30;
  --warm-2: #A24E27;
  --warm-soft: rgba(184, 90, 48, 0.22);
  --warm-fg: #1A0904;
  --rule: rgba(27, 31, 38, 0.10);
  --rule-strong: rgba(27, 31, 38, 0.18);
  --rule-dark: rgba(233, 230, 222, 0.10);
  --rule-dark-strong: rgba(233, 230, 222, 0.18);
  --sans: "Manrope", "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
}
body[data-style="5"] {
  --ink: #0E1A1F;
  --ink-deep: #06121A;
  --ink-2: #15242C;
  --ink-3: #1F313A;
  --paper: #E8EBED;
  --paper-2: #DDE2E4;
  --bone: #CFD5D8;
  --steel-1: #131D22;
  --steel-2: #475259;
  --steel-3: #788289;
  --ivory: #E5EBED;
  --ivory-mute: rgba(229, 235, 237, 0.62);
  --ivory-faint: rgba(229, 235, 237, 0.38);
  --signal: #0E97A0;
  --signal-deep: #067A82;
  --signal-soft: rgba(14, 151, 160, 0.20);
  --warm: #D2693C;
  --warm-2: #BC5A2F;
  --warm-soft: rgba(210, 105, 60, 0.22);
  --warm-fg: #1A0A04;
  --rule: rgba(14, 26, 31, 0.10);
  --rule-strong: rgba(14, 26, 31, 0.18);
  --rule-dark: rgba(229, 235, 237, 0.10);
  --rule-dark-strong: rgba(229, 235, 237, 0.18);
  --sans: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

/* 6 — Brutal Lab: high-contrast black + neon yellow + alert red */
body[data-style="6"] {
  --ink: #050505;
  --ink-deep: #000000;
  --ink-2: #0E0E0E;
  --ink-3: #1A1A1A;
  --paper: #F5F5F2;
  --paper-2: #E8E8E2;
  --bone: #D2D2C8;
  --steel-1: #050505;
  --steel-2: #2A2A2A;
  --steel-3: #6E6E6E;
  --ivory: #FFFFFF;
  --ivory-mute: rgba(255, 255, 255, 0.70);
  --ivory-faint: rgba(255, 255, 255, 0.42);
  --signal: #E8FF00;
  --signal-deep: #C2D900;
  --signal-soft: rgba(232, 255, 0, 0.18);
  --warm: #FF3D2E;
  --warm-2: #E62C1E;
  --warm-soft: rgba(255, 61, 46, 0.22);
  --warm-fg: #FFFFFF;
  --rule: rgba(5, 5, 5, 0.20);
  --rule-strong: rgba(5, 5, 5, 0.40);
  --rule-dark: rgba(255, 255, 255, 0.16);
  --rule-dark-strong: rgba(255, 255, 255, 0.32);
  --sans: "Archivo", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
body[data-style="6"] h1, body[data-style="6"] h2 {
  font-weight: 700;
  letter-spacing: -0.034em;
}

/* 7 — Magenta Turquoise: deep teal ink, vivid turquoise signal, magenta accent */
body[data-style="7"] {
  --ink: #0A1F22;
  --ink-deep: #051315;
  --ink-2: #12292D;
  --ink-3: #1B373B;
  --paper: #ECF1F0;
  --paper-2: #DFE6E5;
  --bone: #CFD8D7;
  --steel-1: #0F2326;
  --steel-2: #3F5256;
  --steel-3: #708183;
  --ivory: #E8F1F0;
  --ivory-mute: rgba(232, 241, 240, 0.65);
  --ivory-faint: rgba(232, 241, 240, 0.40);
  --signal: #2DD4BF;
  --signal-deep: #14B8A6;
  --signal-soft: rgba(45, 212, 191, 0.20);
  --warm: #F472B6;
  --warm-2: #EC4899;
  --warm-soft: rgba(244, 114, 182, 0.22);
  --warm-fg: #15050E;
  --rule: rgba(10, 31, 34, 0.12);
  --rule-strong: rgba(10, 31, 34, 0.22);
  --rule-dark: rgba(232, 241, 240, 0.12);
  --rule-dark-strong: rgba(232, 241, 240, 0.22);
  --sans: "Funnel Sans", "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
body[data-style="7"] h1, body[data-style="7"] h2 {
  font-weight: 600;
  letter-spacing: -0.028em;
}

/* 8 — Neon Clinic: near-black + mint signal + warm orange */
body[data-style="8"] {
  --ink: #0B0F0E;
  --ink-deep: #050807;
  --ink-2: #131816;
  --ink-3: #1C2220;
  --paper: #ECEEED;
  --paper-2: #DFE3E1;
  --bone: #D0D5D2;
  --steel-1: #0F1413;
  --steel-2: #424A47;
  --steel-3: #757D7A;
  --ivory: #E6ECEA;
  --ivory-mute: rgba(230, 236, 234, 0.65);
  --ivory-faint: rgba(230, 236, 234, 0.40);
  --signal: #7CFFB2;
  --signal-deep: #4FE08A;
  --signal-soft: rgba(124, 255, 178, 0.20);
  --warm: #FF7A4D;
  --warm-2: #E66838;
  --warm-soft: rgba(255, 122, 77, 0.20);
  --warm-fg: #0B0F0E;
  --rule: rgba(11, 15, 14, 0.10);
  --rule-strong: rgba(11, 15, 14, 0.20);
  --rule-dark: rgba(230, 236, 234, 0.10);
  --rule-dark-strong: rgba(230, 236, 234, 0.22);
  --sans: "Funnel Display", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
body[data-style="8"] h1, body[data-style="8"] h2 {
  font-weight: 600;
  letter-spacing: -0.032em;
}

/* 9 — Lab Lime: deep forest, lab-lime signal, soft yellow accent */
body[data-style="9"] {
  --ink: #0F1A0F;
  --ink-deep: #060F06;
  --ink-2: #16241A;
  --ink-3: #1F3024;
  --paper: #EFF1ED;
  --paper-2: #E2E6DE;
  --bone: #D2D7CC;
  --steel-1: #121E13;
  --steel-2: #424F44;
  --steel-3: #75807A;
  --ivory: #EBF1E8;
  --ivory-mute: rgba(235, 241, 232, 0.65);
  --ivory-faint: rgba(235, 241, 232, 0.40);
  --signal: #86E03B;
  --signal-deep: #65BF22;
  --signal-soft: rgba(134, 224, 59, 0.22);
  --warm: #FFE14D;
  --warm-2: #F5CC1F;
  --warm-soft: rgba(255, 225, 77, 0.22);
  --warm-fg: #0F1A0F;
  --rule: rgba(15, 26, 15, 0.12);
  --rule-strong: rgba(15, 26, 15, 0.22);
  --rule-dark: rgba(235, 241, 232, 0.12);
  --rule-dark-strong: rgba(235, 241, 232, 0.22);
  --sans: "Archivo", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
body[data-style="9"] h1, body[data-style="9"] h2 {
  font-weight: 700;
  letter-spacing: -0.032em;
}

/* ============== Embedded waveform canvas ==================== */
.silurus-wave {
  pointer-events: none;
  display: block;
}
.wave-strip-stats {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  width: 100%;
  height: 78px;
}
.stats { position: relative; overflow: hidden; }

.wave-strip-cta {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.7;
}
.cta-final { overflow: hidden; }
.cta-final .cta-inner { position: relative; z-index: 1; }

/* Legacy medical-trace classes — no longer rendered, replaced by canvas waves */
.medical-trace { display: none; }

/* ============== Stats strip ================================== */
.stats {
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.stats-inner {
  display: grid;
  grid-template-columns: minmax(180px, 200px) 1fr;
  gap: clamp(28px, 5vw, 72px);
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
  align-items: start;
}
.stats-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 760px) { .stats-list { grid-template-columns: 1fr 1fr; row-gap: 24px; } }
.stat-big {
  padding-left: 24px;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat-big:first-child { padding-left: 0; border-left: 0; }
.stat-big .v {
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.034em;
  line-height: 1;
  font-feature-settings: "tnum";
  color: var(--steel-1);
}
.stat-big .v .suf { color: var(--steel-3); font-size: 0.6em; vertical-align: 0.3em; letter-spacing: 0; }
.stat-big .v .acc { color: var(--signal); }
.stat-big .l {
  font-size: 13px;
  color: var(--steel-2);
  max-width: 22ch;
  margin-top: 4px;
}
.stat-big .lbl {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-3);
}

/* ============== Vanta cells background ===================== */
.has-vanta { position: relative; overflow: hidden; }
.has-vanta > .wrap { position: relative; z-index: 2; }
.vanta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
  opacity: 0.85;
  mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, black 65%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, black 65%, transparent 100%);
}
.has-vanta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,15,30,0.65) 0%, rgba(6,15,30,0.35) 30%, rgba(6,15,30,0.35) 70%, rgba(6,15,30,0.75) 100%),
    radial-gradient(ellipse 70% 70% at 25% 35%, rgba(6,15,30,0.75) 0%, rgba(6,15,30,0) 70%);
}

/* ============== Combined trust block (dark) =============== */
.trustblock {
  background: var(--ink);
  color: var(--ivory);
}
.trustblock .partners {
  background: var(--ink);
  border-top: 0;
  border-bottom: 1px solid var(--rule-dark);
}
.trustblock .partners-inner .mono-label { color: var(--ivory-mute); }
.trustblock .partner-logo {
  /* Solid white logos on dark background */
  filter: brightness(0) invert(1);
  opacity: 0.82;
}
.trustblock .partner-logo:hover {
  opacity: 1;
}

.trustblock .testimonials {
  background: var(--ink);
  border: 0;
  padding-top: clamp(56px, 6vw, 88px);
  padding-bottom: clamp(72px, 8vw, 112px);
}
.trustblock .testimonials .section-head { padding-top: 0; }
.trustblock .testimonials h2 { color: var(--ivory); }
.trustblock .testimonials .lbl { color: var(--ivory-mute); }
.trustblock .testimonials .tst {
  border-right: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}
.trustblock .testimonials .tst:nth-child(even) { border-right: 0; }
@media (max-width: 820px) { .trustblock .testimonials .tst { border-right: 0; } }
.trustblock .testimonials .tst-grid { border-top: 1px solid var(--rule-dark); }
.trustblock .testimonials .tst-quote { color: var(--ivory); }
.trustblock .testimonials .tst-quote::before,
.trustblock .testimonials .tst-quote::after { color: var(--ivory-faint); }
.trustblock .testimonials .tst-foot { border-top-color: var(--rule-dark); }
.trustblock .testimonials .tst-name { color: var(--ivory); }
.trustblock .testimonials .tst-role { color: var(--ivory-faint); }

/* ============== Particles.js section background ============= */
.has-particles { position: relative; overflow: hidden; }
.has-particles > .wrap { position: relative; z-index: 1; }
.particles-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
  opacity: 1;
  /* fade edges so it dissolves into adjacent sections */
  mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, black 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, black 55%, transparent 100%);
}

/* ============== Lifecycle / V-model ========================= */
.lifecycle {
  background: var(--ink);
  color: var(--ivory);
}
.vfig {
  margin: clamp(28px, 4vw, 56px) 0 0;
  padding: clamp(28px, 4vw, 56px) 0 0;
  border-top: 1px solid var(--rule-dark);
}
.vmodel {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  width: 100%;
}
.vphase {
  display: grid;
  grid-template-columns: 1fr minmax(120px, 200px) 1fr;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  padding-inline: calc(var(--d, 0) * clamp(2.4vw, 4vw, 56px));
  transition: padding 320ms var(--ease);
}
.vphase-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.vphase-design { text-align: right; align-items: flex-end; }
.vphase-verify { text-align: left;  align-items: flex-start; }
.vphase-name {
  font-size: clamp(14px, 1.05vw, 15.5px);
  letter-spacing: -0.012em;
  color: var(--ivory);
  font-weight: 500;
  line-height: 1.25;
}
.vphase-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ivory-faint);
  line-height: 1.4;
}
.vphase-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--signal);
}
.vphase-line {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.vphase-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  flex-shrink: 0;
}
.vphase-dash {
  flex: 1;
  height: 1px;
  background-image: repeating-linear-gradient(to right, var(--signal) 0 5px, transparent 5px 9px);
  opacity: 0.85;
}
.vphase-ref {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  opacity: 0.85;
}

.vphase-floor {
  display: flex;
  justify-content: center;
  padding-inline: 0;
}
.vphase-floor-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-width: 38ch;
}
.vphase-floor-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  height: 22px;
}
.vphase-floor-line .vphase-dash.vert {
  width: 1px;
  height: 100%;
  background-image: repeating-linear-gradient(to bottom, var(--signal) 0 4px, transparent 4px 8px);
  flex: none;
}
.vphase-center { align-items: center; }

.vcap {
  margin-top: clamp(20px, 2vw, 28px);
  padding-top: 18px;
  border-top: 1px solid var(--rule-dark);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  flex-wrap: wrap;
}
.vcap .vcap-l::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  margin-right: 9px;
  vertical-align: 1px;
}

.vnotes {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule-dark);
  border-left: 1px solid var(--rule-dark);
}
@media (max-width: 980px) { .vnotes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vnotes { grid-template-columns: 1fr; } }
.vnote {
  padding: 26px 24px 28px;
  border-right: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vnote .vnum {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ivory-faint);
  letter-spacing: 0.16em;
}
.vnote h4 { color: var(--ivory); font-size: 15px; margin: 0; letter-spacing: -0.01em; }
.vnote p { color: var(--ivory-mute); font-size: 13.5px; line-height: 1.55; max-width: 34ch; }

/* Responsive: flatten into pair-cards on narrow screens */
@media (max-width: 760px) {
  .vmodel { gap: 14px; }
  .vphase {
    grid-template-columns: 1fr;
    padding-inline: 0 !important;
    gap: 0;
    padding: 0;
    border: 1px solid var(--rule-dark);
    background: rgba(255,255,255,0.015);
  }
  .vphase > .vphase-side {
    padding: 16px 18px;
  }
  .vphase > .vphase-design {
    text-align: left;
    align-items: flex-start;
    border-bottom: 1px solid var(--rule-dark);
  }
  .vphase > .vphase-verify {
    text-align: left;
    align-items: flex-start;
  }
  /* "Design" / "Verify" mini-labels above each side */
  .vphase > .vphase-design::before,
  .vphase > .vphase-verify::before {
    content: "Design";
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ivory-faint);
    margin-bottom: 6px;
  }
  .vphase > .vphase-verify::before { content: "Verify"; color: var(--signal); opacity: 0.85; }

  /* The trace link becomes a horizontal divider between design and verify */
  .vphase > .vphase-link {
    flex-direction: row;
    align-self: stretch;
    justify-content: center;
    gap: 12px;
    padding: 8px 18px;
    background: rgba(31, 182, 224, 0.05);
    border-top: 1px solid var(--rule-dark);
    border-bottom: 1px solid var(--rule-dark);
    order: 1; /* push between design and verify */
  }
  .vphase > .vphase-design { order: 0; border-bottom: 0; }
  .vphase > .vphase-verify { order: 2; }
  .vphase-link .vphase-line { flex: 1; max-width: 120px; }
  .vphase-link .vphase-ref { white-space: nowrap; }

  /* Floor row */
  .vphase-floor {
    border: 1px solid var(--signal);
    border-style: dashed;
    background: rgba(31, 182, 224, 0.05);
    padding: 18px 18px 20px;
  }
  .vphase-floor-line { display: none; }
  .vphase-floor-inner { gap: 6px; }
  .vphase-floor-inner::before {
    content: "Bottom of V — Code";
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--signal);
    margin-bottom: 2px;
  }
}

/* ============== Section background art ====================== */

/* ============== Section background art ====================== */
.has-bg-art { position: relative; overflow: hidden; }
.bg-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.has-bg-art > .wrap { position: relative; z-index: 1; }
.bg-art-brain {
  background-image: url(/web/content/23468);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: clamp(560px, 56vw, 920px) auto;
  opacity: 0.55;
  mix-blend-mode: multiply;
}
@media (max-width: 900px) {
  .bg-art-brain {
    opacity: 0.18;
    background-size: 140% auto;
    background-position: right top;
  }
}

/* ============== EKG divider strip =========================== */
.ekg-divider {
  background: var(--ink);
  overflow: hidden;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  position: relative;
  height: clamp(180px, 22vw, 260px);
}
.ekg-divider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
}
.ekg-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,26,44,0.0) 0%, rgba(10,26,44,0.0) 60%, rgba(10,26,44,0.55) 100%);
}

/* ============== Imaging credentials strip =================== */
.imaging-strip {
  background: var(--ink-deep);
  color: var(--ivory);
  overflow: hidden;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}
.imaging-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  gap: 0;
}
@media (max-width: 900px) { .imaging-inner { grid-template-columns: 1fr; } }
.imaging-figure {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  background: var(--ink-deep);
  margin: 0;
}
.imaging-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  filter: grayscale(0) contrast(1.02) brightness(1.22);
}
/* Duotone tint: ::before lightens darks to ink-deep, ::after multiplies with signal.
   The right/bottom edge fade is a separate normal-blend layer on top so it always
   resolves to clean --ink-deep regardless of what's behind it. */
.imaging-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink-deep);
  mix-blend-mode: lighten;
  pointer-events: none;
  z-index: 1;
}
.imaging-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signal);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
  opacity: 0.27;
}
.imaging-figure .figure-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(90deg, transparent 55%, var(--ink-deep) 100%),
    linear-gradient(180deg, transparent 70%, color-mix(in srgb, var(--ink-deep) 70%, transparent) 100%);
}
.imaging-figure .figure-meta,
.imaging-figure .figure-corner { z-index: 4; }
.imaging-figure .figure-meta {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-mute);
  display: flex;
  align-items: center;
  gap: 9px;
}
.imaging-figure .figure-meta::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal);
}
.imaging-figure .figure-corner {
  position: absolute;
  bottom: 22px;
  left: 24px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ivory-faint);
}
.imaging-figure .figure-corner .v { color: var(--ivory); }

.imaging-body {
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  justify-content: center;
}
.imaging-body .mono-label { color: var(--ivory-mute); }
.imaging-body h2 {
  color: var(--ivory);
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.022em;
  max-width: 18ch;
}
.imaging-body p {
  color: var(--ivory-mute);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 44ch;
}
.imaging-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 10px;
  border-top: 1px solid var(--rule-dark);
}
.imaging-spec {
  padding: 16px 14px 0 0;
  border-left: 1px solid var(--rule-dark);
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.imaging-spec:nth-child(odd) { border-left: 0; padding-left: 0; }
.imaging-spec .l {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-faint);
}
.imaging-spec .v {
  font-size: 14px;
  color: var(--ivory);
  letter-spacing: -0.01em;
  font-weight: 500;
}

/* ============== Services (dark) ============================== */
.services { background: var(--ink); color: var(--ivory); position: relative; overflow: hidden; }
.services-grid {
  display: grid;
  grid-template-columns: minmax(180px, 200px) 1fr;
  gap: clamp(28px, 5vw, 72px);
}
.services-rows { display: flex; flex-direction: column; }
.svc-row {
  display: grid;
  grid-template-columns: minmax(120px, 140px) 1fr minmax(220px, 280px);
  gap: clamp(20px, 3vw, 48px);
  padding: 38px 0 40px;
  border-top: 1px solid var(--rule-dark);
  align-items: start;
}
.svc-row:first-child { border-top: 0; padding-top: 8px; }
.svc-row .svc-idx {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ivory-faint);
  padding-top: 6px;
}
.svc-row h3 {
  color: var(--ivory);
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  max-width: 22ch;
}
.svc-row .svc-body p {
  color: var(--ivory-mute);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 56ch;
}
.svc-row .svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  padding-top: 8px;
}
.svc-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ivory-mute);
  padding: 4px 8px;
  border: 1px solid var(--rule-dark-strong);
  border-radius: 0;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.svc-tag:hover { border-color: var(--warm); color: var(--ivory); }
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; }
  .svc-row { grid-template-columns: minmax(80px, 100px) 1fr; }
  .svc-row .svc-tags { grid-column: 1 / -1; margin-top: 6px; padding-left: calc(100px + clamp(20px, 3vw, 48px)); }
}
@media (max-width: 560px) {
  .svc-row .svc-tags { padding-left: 0; }
}

/* Hairline waveform decoration in services */
.services .deco {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
  mask-image: linear-gradient(to left, black, transparent 90%);
  -webkit-mask-image: linear-gradient(to left, black, transparent 90%);
}

/* ============== Standards (datasheet) ======================== */
.standards {
  background: #ECF0F5;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.std-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (max-width: 900px) { .std-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .std-grid { grid-template-columns: 1fr; } }
.std-cell {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 180px;
  background: transparent;
  transition: background 240ms var(--ease);
}
.std-cell:hover { background: var(--paper-2); }
.std-cell .std-idx {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--steel-3);
  letter-spacing: 0.06em;
}
.std-cell .std-code {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-top: 6px;
}
.std-cell .std-kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-3);
}
.std-cell .std-desc {
  font-size: 13.5px;
  color: var(--steel-2);
  line-height: 1.5;
  margin-top: 4px;
}

/* ============== Engagement (table-like) ====================== */
.eng-table { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (max-width: 900px) { .eng-table { grid-template-columns: 1fr; } }
.eng-col {
  padding: 36px 32px 36px;
  border-left: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  background: rgba(10, 26, 44, 0.025);
  transition: background 240ms var(--ease);
}
.eng-col:hover { background: rgba(10, 26, 44, 0.05); }
/* A and C get a paper veil so the particle network does not read through the text */
.eng-col:not(.featured) { background: color-mix(in srgb, var(--paper) 80%, transparent); }
.eng-col:not(.featured):hover { background: color-mix(in srgb, var(--paper-2) 86%, transparent); }
.eng-col:first-child { border-left: 0; }
@media (max-width: 900px) { .eng-col:first-child { border-left: 0; border-top: 0; } .eng-col { border-left: 0; border-top: 1px solid var(--rule); } }
.eng-col .eng-mark {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--steel-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eng-col .eng-mark .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); display: inline-block; }
.eng-col.featured {
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  color: var(--ivory);
}
.eng-col.featured h3 { color: var(--ivory); }
.eng-col.featured .eng-mark { color: var(--ivory-faint); }
.eng-col.featured .eng-blurb { color: var(--ivory-mute); }
.eng-col.featured li { color: var(--ivory); }
.eng-col.featured .best-for { color: var(--ivory-faint); border-top-color: var(--rule-dark); }
.eng-col.featured .best-for span { color: var(--ivory-mute); }

.eng-col h3 { font-size: 22px; letter-spacing: -0.02em; }
.eng-col .eng-blurb { color: var(--steel-2); font-size: 14.5px; line-height: 1.55; max-width: 32ch; }
.eng-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.eng-col li {
  display: grid;
  grid-template-columns: 18px 1fr;
  font-size: 14px;
  color: var(--steel-1);
  line-height: 1.5;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.eng-col.featured li { border-top-color: var(--rule-dark); }
.eng-col li::before {
  content: "+";
  font-family: var(--mono);
  font-size: 12px;
  color: var(--steel-3);
  line-height: 1.5;
  margin-top: 2px;
}
.eng-col.featured li::before { color: var(--signal); }
.eng-col .best-for {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-3);
}
.eng-col .best-for span {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--steel-2);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 6px;
}

/* ============== Case studies ================================= */
.cases { background: var(--paper); }
.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
}
@media (max-width: 820px) { .case-grid { grid-template-columns: 1fr; } }
.case-card {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 36px 32px 32px;
  display: flex; flex-direction: column; gap: 16px;
  background: transparent;
  transition: background 280ms var(--ease);
}
.case-card:nth-child(2n) { border-right: 0; }
@media (max-width: 820px) { .case-card { border-right: 0; } }
/* If the 5th card is alone on its row, span it full width */
.case-card:nth-child(5):last-child {
  grid-column: 1 / -1;
  border-right: 0;
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  column-gap: 36px;
  row-gap: 16px;
  align-items: start;
}
.case-card:nth-child(5):last-child .case-head { grid-column: 1 / -1; }
.case-card:nth-child(5):last-child .case-illus {
  grid-row: span 3;
  height: 100%;
  min-height: 260px;
}
.case-card:nth-child(5):last-child .case-meta { grid-column: 1 / -1; }
@media (max-width: 820px) {
  .case-card:nth-child(5):last-child {
    grid-template-columns: 1fr;
  }
  .case-card:nth-child(5):last-child .case-illus {
    grid-row: auto;
    height: 200px;
    min-height: 0;
  }
}
.case-card:hover { background: rgba(14,17,22,0.025); }
.case-card .case-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.case-card .case-illus {
  height: 200px;
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  overflow: hidden;
  padding: 12px;
}
.case-card .case-illus svg { width: 100%; height: 100%; display: block; }
/* Accent classes for SVG illustrations — picks up the live signal color */
.case-illus .acc-stroke { stroke: var(--signal); }
.case-illus .acc-fill { fill: var(--signal); }
.case-illus .acc-fill-soft { fill: var(--signal); opacity: 0.18; }
.case-illus .acc-text { fill: var(--signal); }
.case-card h3 { font-size: 21px; max-width: 28ch; line-height: 1.2; letter-spacing: -0.02em; }
.case-card p { color: var(--steel-2); font-size: 14.5px; line-height: 1.6; max-width: 56ch; }
.case-card .case-meta {
  display: flex; gap: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel-3);
}
.case-card .case-meta .v { color: var(--steel-1); }
.case-card .case-meta .col { display: flex; flex-direction: column; gap: 2px; }

/* ============== Testimonials (dark, restrained) ============== */
.testimonials { background: var(--ink); color: var(--ivory); }
.tst-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule-dark);
}
@media (max-width: 820px) { .tst-grid { grid-template-columns: 1fr; } }
.tst {
  padding: 40px 36px;
  border-right: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  display: flex; flex-direction: column; gap: 24px;
}
.tst:nth-child(even) { border-right: 0; }
@media (max-width: 820px) { .tst { border-right: 0; } }
.tst .tst-quote {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ivory);
  letter-spacing: -0.005em;
  max-width: 46ch;
  font-weight: 400;
}
.tst .tst-quote::before {
  content: "“";
  font-family: var(--sans);
  color: var(--ivory-faint);
  margin-right: 4px;
}
.tst .tst-quote::after {
  content: "”";
  font-family: var(--sans);
  color: var(--ivory-faint);
}
.tst .tst-foot {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-dark);
}
.tst .tst-name { font-size: 14px; color: var(--ivory); font-weight: 500; }
.tst .tst-role { font-size: 13.5px; color: var(--ivory-faint); }

/* ============== Career benefits ============================== */
.careers { background: var(--ink); color: var(--ivory); }
.careers .lede { color: var(--ivory); }
.career-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-dark);
  border-left: 1px solid var(--rule-dark);
}
@media (max-width: 900px) { .career-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .career-grid { grid-template-columns: 1fr; } }
.benefit {
  border-right: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  padding: 28px 28px 32px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 200px;
}
.benefit .idx {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ivory-faint);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.benefit .idx::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--signal);
  display: inline-block;
}
.benefit h4 { color: var(--ivory); font-size: 15px; }
.benefit p { color: var(--ivory-mute); font-size: 13.5px; line-height: 1.55; max-width: 32ch; }

/* ============== FAQ ========================================== */
.faq { background: var(--paper); }
.faq-inner {
  display: grid;
  grid-template-columns: minmax(180px, 200px) 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 760px) { .faq-inner { grid-template-columns: 1fr; gap: 24px; } }
.faq-head { padding-top: 6px; }
.faq-head h2 { max-width: 14ch; margin-top: 8px; }
.faq-head p { color: var(--steel-2); margin-top: 18px; font-size: 14.5px; max-width: 22ch; }

.faq-list { display: flex; flex-direction: column; max-width: 760px; }
details.faq-item {
  border-top: 1px solid var(--rule);
  padding: 22px 0;
}
details.faq-item:last-of-type { border-bottom: 1px solid var(--rule); }
details.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--steel-1);
}
details.faq-item summary::-webkit-details-marker { display: none; }
.faq-summary-left {
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.faq-summary-left .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--steel-3);
  letter-spacing: 0.06em;
}
.faq-toggle {
  width: 18px; height: 18px;
  flex-shrink: 0;
  position: relative;
  transition: transform 320ms var(--ease);
}
.faq-toggle::before, .faq-toggle::after {
  content: "";
  position: absolute;
  background: var(--steel-1);
  transition: transform 320ms var(--ease);
}
.faq-toggle::before {
  left: 50%; top: 50%; width: 14px; height: 1.5px; transform: translate(-50%, -50%);
}
.faq-toggle::after {
  left: 50%; top: 50%; width: 1.5px; height: 14px; transform: translate(-50%, -50%);
}
details[open] .faq-toggle::after { transform: translate(-50%, -50%) scaleY(0); }
details.faq-item .faq-body {
  margin-top: 14px;
  margin-left: 38px;
  font-size: 14.5px;
  color: var(--steel-2);
  line-height: 1.65;
  max-width: 62ch;
}

/* ============== Final CTA ==================================== */
.cta-final {
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--ink);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
}
.cta-final .cta-inner {
  display: grid;
  grid-template-columns: minmax(180px, 200px) 1fr;
  gap: clamp(28px, 5vw, 72px);
  border-top: 1px solid var(--rule-dark);
  padding-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 760px) { .cta-final .cta-inner { grid-template-columns: 1fr; } }
.cta-final h2 { max-width: 16ch; color: var(--ivory); margin-top: 8px; }
.cta-final p { color: var(--ivory-mute); margin: 18px 0 32px; max-width: 50ch; font-size: 16px; line-height: 1.55; }
.cta-final .btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============== Footer ======================================= */
.footer { background: var(--ink-deep); color: var(--ivory-mute); padding: 56px 0 28px; border-top: 1px solid var(--rule-dark); }
.footer-top {
  display: grid;
  grid-template-columns: minmax(180px, 200px) 1fr;
  gap: clamp(28px, 5vw, 72px);
}
.footer-brand .brand { color: var(--ivory); }
.footer-brand .tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory-faint); margin-top: 18px; }
.footer-offices { display: flex; gap: 40px; margin-top: 36px; flex-wrap: wrap; }
.footer-office { display: flex; flex-direction: column; gap: 4px; font-size: 13px; max-width: 22ch; }
.footer-office .label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory-faint); margin-bottom: 4px; }
.footer-office .addr { color: var(--ivory); line-height: 1.55; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-col h5 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory-faint); margin: 0 0 16px; font-weight: 500; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13.5px; color: var(--ivory); opacity: 0.78; transition: opacity 220ms var(--ease); }
.footer-col a:hover { opacity: 1; }
.footer-bottom {
  border-top: 1px solid var(--rule-dark);
  margin-top: 56px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ivory-faint);
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--mono);
}
.footer-bottom a:hover { color: var(--ivory); }
.footer-bottom .links { display: flex; gap: 18px; }

/* ============== Cookie strip (discreet) ====================== */
.cookie {
  position: fixed;
  left: 24px;
  bottom: 24px;
  background: rgba(14, 17, 22, 0.96);
  border: 1px solid var(--rule-dark-strong);
  color: var(--ivory);
  padding: 14px 16px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 70;
  max-width: 460px;
  border-radius: 0;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.cookie button {
  background: var(--ivory);
  color: var(--ink);
  border: 0;
  padding: 7px 14px;
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.cookie .cookie-close {
  background: transparent;
  color: var(--ivory-faint);
  border: 1px solid var(--rule-dark-strong);
  padding: 6px 10px;
}
.cookie.hidden { display: none; }

/* ============== Reveal animations ============================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  #hero-canvas { display: none; }
}

/* Tweaks panel positioning */
.tweaks-panel-host { z-index: 90 !important; }

/* ============================================================
   Homepage — light-throughout overrides
   The dark↔light alternation between sections felt jumpy. This
   block keeps Hero (video) + Footer dark, and renders everything
   between them as a layered paper rhythm using --paper, --paper-2
   and --bone for subtle separation.
   ============================================================ */

/* ---- Trust block: partners + testimonials ---- */
.trustblock { background: #ECF0F5; color: var(--steel-1); }
.trustblock .partners {
  background: #ECF0F5;
  border-top: 1px solid var(--rule);
  border-bottom: 0;
  padding: clamp(56px, 7vw, 96px) 0 clamp(28px, 3.5vw, 44px);
}
.trustblock .partners .section-head { padding-top: 0; padding-bottom: clamp(28px, 3.5vw, 44px); }
.trustblock .partners .head-tag .lbl { color: var(--steel-3); }
.trustblock .partners h2 { color: var(--ink); }
.trustblock .partners-inner .mono-label { color: var(--steel-3); }
.trustblock .testimonials { padding-top: 0; padding-bottom: clamp(56px, 7vw, 96px); }
.trustblock .partner-logo {
  filter: none;
  opacity: 0.62;
  transition: opacity 220ms var(--ease);
}
.trustblock .partner-logo:hover { opacity: 1; }

.trustblock .testimonials { background: #ECF0F5; color: var(--steel-1); }
.trustblock .testimonials h2 { color: var(--ink); }
.trustblock .testimonials .lbl { color: var(--steel-3) !important; }
.trustblock .testimonials .tst {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.trustblock .testimonials .tst-grid { border-top: 1px solid var(--rule); }
.trustblock .testimonials .tst-quote { color: var(--steel-1); }
.trustblock .testimonials .tst-quote::before,
.trustblock .testimonials .tst-quote::after { color: var(--steel-4); }
.trustblock .testimonials .tst-foot { border-top-color: var(--rule); }
.trustblock .testimonials .tst-name { color: var(--ink); }
.trustblock .testimonials .tst-role { color: var(--steel-3); }

/* ---- Imaging strip: stays dark — full-bleed image, seamless black blend ----
   Text removed by request; section height reduced ~30%. */
.imaging-strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.imaging-inner { grid-template-columns: 46% 54%; }
.imaging-figure { min-height: 0; height: clamp(220px, 24vw, 320px); }
.imaging-figure .figure-fade {
  background:
    linear-gradient(90deg, transparent 35%, var(--ink-deep) 100%),
    linear-gradient(180deg, transparent 72%, color-mix(in srgb, var(--ink-deep) 70%, transparent) 100%);
}

/* ---- Services ---- */
.services { background: var(--paper); color: var(--steel-1); }
.services .head-tag .mono-label,
.services .head-tag .lbl { color: var(--steel-3) !important; }
.services h2 { color: var(--ink); }
.services .lede { color: var(--steel-2); }
.svc-row { border-top: 1px solid var(--rule); }
.svc-row .svc-idx { color: var(--steel-3); }
.svc-row h3 { color: var(--ink); }
.svc-row .svc-body p { color: var(--steel-2); }
.svc-tag {
  color: var(--steel-2);
  border-color: var(--rule-strong);
}
.svc-tag:hover { color: var(--ink); border-color: var(--warm); }
.services .deco { opacity: 0.22; }

/* ---- Lifecycle / V-model ---- */
.lifecycle { background: var(--paper-2); color: var(--steel-1); }
.lifecycle .head-tag .mono-label,
.lifecycle .head-tag .lbl { color: var(--steel-3) !important; }
.lifecycle h2 { color: var(--ink); }
.lifecycle .lede { color: var(--steel-2); }
.vfig { border-top: 1px solid var(--rule); }
.vphase-name { color: var(--ink); }
.vphase-meta { color: var(--steel-3); }
.lifecycle .vnotes {
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.lifecycle .vnote {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.lifecycle .vnote .vnum { color: var(--steel-3); }
.lifecycle .vnote h4 { color: var(--ink); }
.lifecycle .vnote p { color: var(--steel-2); }
.vcap {
  border-top: 1px solid var(--rule);
  color: var(--steel-3);
}

/* ---- Careers: photo background band, light text over dark veil ---- */
.careers {
  background: var(--ink-deep);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
}
.careers .careers-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(/web/content/23660);
  background-repeat: no-repeat;
  background-position: center 28%;
  background-size: cover;
  background-attachment: fixed;
}
.careers .careers-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,15,30,0.74) 0%, rgba(6,15,30,0.58) 32%, rgba(6,15,30,0.62) 68%, rgba(6,15,30,0.84) 100%),
    radial-gradient(ellipse 85% 85% at 32% 32%, rgba(6,15,30,0.45) 0%, rgba(6,15,30,0.85) 100%);
}
.careers > .wrap { position: relative; z-index: 1; }
.careers .head-tag .lbl { color: var(--ivory-mute) !important; }
.careers h2 { color: var(--ivory); }
.careers .lede { color: var(--ivory); }
.career-grid {
  border-top: 1px solid var(--rule-dark);
  border-left: 1px solid var(--rule-dark);
}
.benefit {
  border-right: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  background: rgba(6,15,30,0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.benefit .idx { color: var(--ivory-faint); }
.benefit h4 { color: var(--ivory); }
.benefit p { color: var(--ivory-mute); }

/* ---- CTA final: light paper with ink text, full-width divider, wave stays ---- */
.cta-final { background: var(--paper); color: var(--steel-1); border-top: 1px solid var(--rule); }
.cta-final .cta-inner { border-top: 0; }
.cta-final .head-tag .lbl { color: var(--steel-3) !important; }
.cta-final h2 { color: var(--ink); }
.cta-final p { color: var(--steel-2); }
.cta-final .silurus-wave { mix-blend-mode: multiply; opacity: 0.7; }
/* On light bg, the dark-style outline button needs swap */
.cta-final .btn-paper { background: var(--ink); color: var(--paper); }
.cta-final .btn-paper:hover { background: var(--ink-2); }
.cta-final .btn-outline-paper {
  border-color: var(--rule-strong);
  color: var(--steel-1);
}
.cta-final .btn-outline-paper:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* ============================================================
   Capability marquee (B1) — between stats strip and Why
   Light hairline band, slash dividers, RTL infinite scroll,
   hover to pause. No edge fade.
   ============================================================ */
.cap-marquee {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 24px 0;
  overflow: hidden;
}
.cap-marquee .mq { overflow: hidden; position: relative; width: 100%; }
.cap-marquee .mq-track { display: flex; width: max-content; will-change: transform; }
.cap-marquee .mq-rtl .mq-track { animation: capMqRTL 46s linear infinite; }
.cap-marquee .mq:hover .mq-track { animation-play-state: paused; }
@keyframes capMqRTL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cap-marquee .mq-grp { display: flex; }
.cap-marquee .mq-item {
  display: inline-flex; align-items: center; gap: 20px;
  padding: 0 28px; white-space: nowrap;
}
.cap-marquee .mq-item .term {
  font-size: 16px; letter-spacing: -0.012em; color: var(--steel-1); font-weight: 500;
}
.cap-marquee .mq-item .mk { color: var(--steel-3); }
@media (prefers-reduced-motion: reduce) {
  .cap-marquee .mq-rtl .mq-track { animation: none; }
}

/* ============================================================
   Partners — tasteful hairline contact-sheet of logo cells
   Original logo colours, no dimming, separated by thin rules.
   ============================================================ */
.trustblock .partners-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (max-width: 900px) { .trustblock .partners-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .trustblock .partners-row { grid-template-columns: repeat(2, 1fr); } }
.trustblock .partner-logo {
  filter: none;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 30px);
  min-height: 116px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: transparent;
  transition: background 240ms var(--ease);
}
.trustblock .partner-logo:hover { background: var(--paper); opacity: 1; }
.trustblock .partner-logo img {
  max-height: 46px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ============================================================
   Testimonials — dynamic reveal (slide up + accent line draw),
   in the same family as the medical-services animations.
   ============================================================ */
.trustblock .testimonials .tst {
  position: relative;
  overflow: hidden;
}
.trustblock .testimonials .tst.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 720ms var(--ease-soft), transform 720ms var(--ease-soft);
}
.trustblock .testimonials .tst.reveal.in { opacity: 1; transform: none; }
.trustblock .testimonials .tst:nth-child(2).reveal { transition-delay: 120ms; }

/* cyan traceability line draws across the top of each card */
.trustblock .testimonials .tst::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--signal) 0%, var(--signal) 60%, var(--rule-strong) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 640ms cubic-bezier(.45, 0, .15, 1);
  z-index: 2;
}
.trustblock .testimonials .tst.in::before { transform: scaleX(1); transition-delay: 260ms; }
.trustblock .testimonials .tst:nth-child(2).in::before { transition-delay: 380ms; }

/* the quote + footer ease in just behind the line */
.trustblock .testimonials .tst .tst-quote,
.trustblock .testimonials .tst .tst-foot {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms var(--ease-soft), transform 600ms var(--ease-soft);
}
.trustblock .testimonials .tst.in .tst-quote { opacity: 1; transform: none; transition-delay: 360ms; }
.trustblock .testimonials .tst.in .tst-foot { opacity: 1; transform: none; transition-delay: 480ms; }
.trustblock .testimonials .tst:nth-child(2).in .tst-quote { transition-delay: 480ms; }
.trustblock .testimonials .tst:nth-child(2).in .tst-foot { transition-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  .trustblock .testimonials .tst.reveal,
  .trustblock .testimonials .tst .tst-quote,
  .trustblock .testimonials .tst .tst-foot { opacity: 1; transform: none; }
  .trustblock .testimonials .tst::before { transform: scaleX(1); }
}


/* ============================================================
   Mobile hamburger menu (injected by main.js on small screens)
   ============================================================ */
.nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--rule-dark-strong);
  width: 40px; height: 40px;
  padding: 0;
  cursor: pointer;
  color: inherit;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav.on-paper .nav-burger { border-color: var(--rule-strong); }
.nav-burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 280ms var(--ease), opacity 200ms var(--ease);
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile-panel {
  position: fixed;
  top: 73px; left: 0; right: 0;
  bottom: 0;
  z-index: 75;
  background: var(--ink-deep);
  color: var(--ivory);
  padding: 28px 24px 40px;
  display: none;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  border-top: 1px solid var(--rule-dark);
}
.nav-mobile-panel.is-open { display: flex; }
.nav-mobile-panel a {
  color: var(--ivory);
  font-size: 22px;
  letter-spacing: -0.012em;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-dark);
  display: block;
}
.nav-mobile-panel a:hover { color: var(--warm); }
.nav-mobile-panel .nav-mobile-dd-head {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  padding: 18px 0 8px;
  border-bottom: 0;
}
.nav-mobile-panel .nav-mobile-dd-link {
  font-size: 17px;
  padding-left: 14px;
  color: var(--ivory-mute);
  border-bottom: 1px solid var(--rule-dark);
  padding-top: 14px;
  padding-bottom: 14px;
}
.nav-mobile-panel .lang-switch {
  margin-top: 28px;
  gap: 6px;
  align-self: flex-start;
}
.nav-mobile-panel .lang {
  font-size: 13px;
  padding: 10px 14px;
  border: 1px solid var(--rule-dark-strong);
  color: var(--ivory-mute);
  opacity: 1;
}
.nav-mobile-panel .lang.is-active {
  color: var(--ink-deep);
  background: var(--signal);
  border-color: var(--signal);
}
.nav-mobile-panel .lang::after { display: none; }

body.nav-locked { overflow: hidden; }

@media (max-width: 820px) {
  .nav-burger { display: inline-flex; }
  /* hide desktop language switch on mobile so only the burger panel one shows */
  .nav-inner > .lang-switch { display: none; }
  /* style picker is already hidden on mobile via existing rule */
}


/* Mobile menu — accordion dropdown */
.nav-mobile-panel .nav-mobile-dd-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-dark);
  color: var(--ivory);
  font-family: inherit;
  font-size: 22px;
  letter-spacing: -0.012em;
  cursor: pointer;
  text-align: left;
}
.nav-mobile-panel .nav-mobile-dd-toggle .caret {
  font-family: var(--mono);
  font-size: 22px;
  color: var(--ivory-mute);
  width: 22px;
  text-align: center;
  transition: color 200ms var(--ease);
}
.nav-mobile-panel .nav-mobile-dd-toggle.is-open .caret { color: var(--warm); }
.nav-mobile-panel .nav-mobile-dd-sub {
  display: none;
  flex-direction: column;
  padding: 6px 0 14px 16px;
  border-bottom: 1px solid var(--rule-dark);
}
.nav-mobile-panel .nav-mobile-dd-sub.is-open { display: flex; }
.nav-mobile-panel .nav-mobile-dd-sub .nav-mobile-dd-link {
  font-size: 16px;
  color: var(--ivory-mute);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-dark);
  padding-left: 0;
}
.nav-mobile-panel .nav-mobile-dd-sub .nav-mobile-dd-link:last-child { border-bottom: 0; }
.nav-mobile-panel .nav-mobile-dd-sub .nav-mobile-dd-link:hover { color: var(--warm); }


/* ============================================================
   WHY cards — distinct elevated cards (overrides grid hairline)
   ============================================================ */
.why-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  border-top: 0;
  border-left: 0;
  padding-top: 4px;
}
.why-card {
  border: 1px solid var(--rule-strong);
  border-right: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  background: #FFFFFF;
  padding: 30px 26px 32px;
  border-radius: 0;
  box-shadow:
    0 1px 2px rgba(10, 26, 44, 0.04),
    0 6px 18px -10px rgba(10, 26, 44, 0.10);
  transition:
    transform 320ms var(--ease),
    box-shadow 320ms var(--ease),
    border-color 320ms var(--ease),
    background 280ms var(--ease);
  position: relative;
}
.why-card:hover {
  background: #FFFFFF;
  border-color: rgba(10, 26, 44, 0.22);
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(10, 26, 44, 0.06),
    0 18px 38px -12px rgba(10, 26, 44, 0.18);
}
.why-card .why-icon { color: var(--ink); }
.why-card h3 { color: var(--ink); }
.why-card p { color: var(--steel-2); }

/* Dark variant (when section is dark) */
.dark-deep .why-card,
.paper .why-card { /* paper section keeps light card */ background: #FFFFFF; }
.dark-deep .why-card {
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--rule-dark-strong);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 10px 26px -10px rgba(0, 0, 0, 0.45);
}
.dark-deep .why-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(234, 237, 242, 0.30);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.28),
    0 22px 44px -14px rgba(0, 0, 0, 0.55);
}

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .why-grid { grid-template-columns: 1fr; gap: 14px; }
}


/* ============================================================
   WHY cards — single offset back layer (bottom-right)
   Same styling as the front card, just translated 10px right
   and down so it peeks out only on the right and bottom edges.
   ============================================================ */
.why-grid { overflow: visible; }
.why-card {
  position: relative;
  isolation: isolate;
}
.why-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #FFFFFF;
  border: 1px solid var(--rule-strong);
  transform: translate(-2px, -2px);
  transition: transform 360ms var(--ease);
}
.why-card:hover::after {
  transform: translate(-4px, -4px);
}

@media (max-width: 560px) {
  .why-card::after { display: none; }
}




/* Front (visible) why-card — cyan signal background */
.paper .why-card, .why-card { background: var(--paper-2); border-color: var(--rule-strong); }
.paper .why-card:hover, .why-card:hover { background: var(--bone); border-color: var(--rule-strong); }
.paper .why-card h3, .why-card h3 { color: var(--ink); }
.paper .why-card p, .why-card p { color: var(--ink-2); }
.paper .why-card .why-icon, .why-card .why-icon { color: var(--ink); }
.paper .why-card .why-head, .why-card .why-head, .paper .why-card .why-head span, .why-card .why-head span { color: var(--ink-3); }


/* ============================================================
   Partners — separated cells, no grid hairlines, no 3D
   Just background + soft gap between them
   ============================================================ */
.trustblock .partners-row {
  border-top: 0;
  border-left: 0;
  gap: clamp(12px, 1.3vw, 18px);
}
.trustblock .partner-logo {
  border: 1px solid var(--rule);
  background: #FFFFFF;
  transition: background 240ms var(--ease), border-color 240ms var(--ease);
}
.trustblock .partner-logo:hover {
  background: var(--paper-2);
  border-color: var(--rule-strong);
}


/* Testimonials — gap between the two cards */
.trustblock .testimonials .tst-grid {
  column-gap: clamp(10px, 1.2vw, 15px);
  border-top: 0;
}
.trustblock .testimonials .tst {
  border-right: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.trustblock .testimonials .tst:nth-child(even) {
  border-right: 1px solid var(--rule);
}


/* ============================================================
   Standards cards — match WHY cards: gap, cyan, 3D back layer
   ============================================================ */
.std-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  border-top: 0;
  border-left: 0;
  overflow: visible;
}
.std-cell {
  position: relative;
  isolation: isolate;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-right: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  transition: transform 320ms var(--ease), background 280ms var(--ease);
}
.std-cell:hover {
  background: var(--bone);
  border-color: var(--rule-strong);
}
.std-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #FFFFFF;
  border: 1px solid var(--rule-strong);
  transform: translate(-2px, -2px);
  transition: transform 360ms var(--ease);
}
.std-cell:hover::after { transform: translate(-4px, -4px); }

.std-cell .std-idx { color: var(--ink-3); }
.std-cell .std-code { color: var(--ink); }
.std-cell .std-kicker { color: var(--ink-3); }
.std-cell .std-desc { color: var(--ink-2); }

@media (max-width: 900px) { .std-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) {
  .std-grid { grid-template-columns: 1fr; }
  .std-cell::after { display: none; }
}


.section-head .head-tag .lbl { font-size: 12px; }


/* Bump all small mono uppercase labels to 12px for parity */
.hero-stat .l,
.mono-label,
.stats-strip .stat-cell .l,
.imaging-spec .l,
.std-cell .std-kicker,
.std-cell .std-idx,
.benefit .idx,
.benefit-item .idx,
.svc-row .svc-idx,
.case-card .case-meta,
.vphase-meta,
.vnote .vnum,
.footer-office .label,
.footer-col h5 { font-size: 12px; }


/* ============================================================
   Services — each row as a clean separated horizontal card
   ============================================================ */
.services .services-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.5vw, 22px);
}
.services .svc-row {
  border-top: 0;
  border: 1px solid var(--rule);
  background: #FFFFFF;
  padding: clamp(24px, 2.5vw, 36px) clamp(24px, 2.5vw, 36px);
  transition: border-color 240ms var(--ease), background 240ms var(--ease);
}
.services .svc-row:first-child { padding-top: clamp(24px, 2.5vw, 36px); }
.services .svc-row:hover {
  border-color: var(--rule-strong);
  background: var(--paper-2);
}


/* ============================================================
   Homepage Services — stack vertically as separated cards
   (overrides the 2-col grid hairline layout)
   ============================================================ */
.svc-home-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.5vw, 22px);
  border-top: 0;
  border-left: 0;
}
.svc-home-card {
  border: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: #FFFFFF;
  padding: clamp(24px, 2.5vw, 36px) clamp(24px, 2.5vw, 36px);
  transition: border-color 240ms var(--ease), background 240ms var(--ease);
}
.svc-home-card:hover {
  border-color: var(--rule-strong);
  background: var(--paper-2);
}


/* ============================================================
   Homepage Services — editorial ledger rows
   Full-width rows, hairline rule between, generous breathing,
   number + 'More details' on the same baseline, big title,
   warm left-edge bar slides in on hover.
   ============================================================ */
.svc-home-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule-strong);
  border-left: 0;
}
.svc-home-card {
  display: block;
  position: relative;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: clamp(32px, 3.5vw, 52px) clamp(12px, 2vw, 32px) clamp(36px, 3.8vw, 54px);
  grid-template-columns: none;
  gap: 0;
  box-shadow: inset 0 0 0 0 var(--warm);
  transition: background 320ms var(--ease), padding-left 320ms var(--ease), box-shadow 320ms var(--ease);
}
.svc-home-card:hover {
  background: rgba(10, 26, 44, 0.025);
  padding-left: clamp(28px, 3vw, 52px);
  box-shadow: inset 2px 0 0 0 var(--warm);
}
/* Drop the decorative SVG visual entirely for a cleaner read */
.svc-home-card .sh-visual { display: none; }

.svc-home-card .sh-body {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: clamp(24px, 2.4vw, 48px);
  row-gap: clamp(10px, 1vw, 18px);
  grid-template-areas:
    "idx   more"
    "title more"
    "blurb blurb"
    "tags  tags";
  align-items: start;
}
.svc-home-card .sh-idx {
  grid-area: idx;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel-3);
}
.svc-home-card h3 {
  grid-area: title;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink);
  max-width: 30ch;
  margin-top: 2px;
  transition: color 240ms var(--ease);
}
.svc-home-card:hover h3 { color: var(--warm-2); }

.svc-home-card p {
  grid-area: blurb;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel-2);
  max-width: 68ch;
  margin-top: 6px;
}
.svc-home-card .sh-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
}
.svc-home-card .sh-tags span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel-2);
  border: 1px solid var(--rule-strong);
  padding: 5px 10px;
}
.svc-home-card .sh-more {
  grid-area: more;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: start;
  margin-top: 4px;
  white-space: nowrap;
  transition: color 240ms var(--ease);
}
.svc-home-card .sh-more .arr { transition: transform 280ms var(--ease); }
.svc-home-card:hover .sh-more { color: var(--warm); }
.svc-home-card:hover .sh-more .arr { transform: translateX(8px); }

/* Mobile — collapse the two-column header to single stack */
@media (max-width: 640px) {
  .svc-home-card { padding-left: 4px; padding-right: 4px; }
  .svc-home-card:hover { padding-left: 16px; }
  .svc-home-card .sh-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "idx"
      "title"
      "blurb"
      "tags"
      "more";
  }
  .svc-home-card h3 { max-width: 100%; }
}


/* Restore the decorative SVG visual on the editorial ledger row.
   Position it as a small anchor block on the left side. */
.svc-home-card { display: grid; grid-template-columns: clamp(80px, 9vw, 120px) 1fr; column-gap: clamp(20px, 2.5vw, 44px); align-items: start; }
.svc-home-card .sh-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 120px;
  border: 1px solid var(--rule);
  background: #FFFFFF;
  color: var(--steel-2);
  transition: color 240ms var(--ease), border-color 240ms var(--ease), background 240ms var(--ease);
}
.svc-home-card .sh-visual svg { width: 70%; height: auto; }
.svc-home-card:hover .sh-visual {
  color: var(--ink);
  border-color: var(--rule-strong);
  background: var(--paper-2);
}

/* On narrow screens hide the visual to keep the layout clean */
@media (max-width: 640px) {
  .svc-home-card { grid-template-columns: 1fr; }
  .svc-home-card .sh-visual { display: none; }
}


/* ============================================================
   Homepage Services — match section-head proportions
   Wider left column, paper bg behind SVG, animated cyan strokes
   ============================================================ */
.svc-home-card {
  grid-template-columns: minmax(180px, 200px) 1fr !important;
  column-gap: clamp(28px, 5vw, 72px) !important;
}
.svc-home-card .sh-visual {
  display: flex !important;
  aspect-ratio: 1 / 1;
  max-width: 200px;
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--steel-2);
  position: relative;
  overflow: hidden;
}
.svc-home-card .sh-visual svg { width: 78%; height: auto; }
/* Cyan accents inside the SVG */
.svc-home-card .sh-visual .acc-stroke { stroke: var(--signal); }
.svc-home-card .sh-visual .acc-fill { fill: var(--signal); }

/* Animated draw-in for primary lines on hover */
.svc-home-card .sh-visual svg polyline,
.svc-home-card .sh-visual svg line,
.svc-home-card .sh-visual svg path {
  stroke-dasharray: 600;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms var(--ease), stroke 320ms var(--ease);
}
.svc-home-card:hover .sh-visual svg polyline,
.svc-home-card:hover .sh-visual svg line,
.svc-home-card:hover .sh-visual svg path {
  stroke-dashoffset: 600;
  animation: svcStrokeDraw 1200ms var(--ease) forwards;
}
@keyframes svcStrokeDraw {
  0%   { stroke-dashoffset: 600; }
  100% { stroke-dashoffset: 0; }
}
/* On hover, recolor visual + accent fill pulse */
.svc-home-card:hover .sh-visual {
  background: var(--paper);
  border-color: var(--rule-strong);
  color: var(--signal-deep);
}
.svc-home-card:hover .sh-visual .acc-fill {
  fill: var(--warm);
}

@media (max-width: 640px) {
  .svc-home-card {
    grid-template-columns: 1fr !important;
  }
  .svc-home-card .sh-visual { display: none !important; }
}


/* Testimonial cards — 35% white veil so they read on the particles bg */
.trustblock .testimonials .tst {
  background: rgba(255, 255, 255, 0.40);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* Careers — lighter overlay so the team photo shows through */
.careers .careers-photo::after {
  background:
    linear-gradient(180deg, rgba(6,15,30,0.45) 0%, rgba(6,15,30,0.28) 32%, rgba(6,15,30,0.32) 68%, rgba(6,15,30,0.55) 100%),
    radial-gradient(ellipse 85% 85% at 32% 32%, rgba(6,15,30,0.18) 0%, rgba(6,15,30,0.52) 100%);
}
.careers .benefit { background: rgba(6,15,30,0.20); }


/* Careers benefits — brighter text, hide numbers */
.careers .benefit .idx { display: none; }
.careers .benefit h4 { color: #FFFFFF; }
.careers .benefit p { color: rgba(255, 255, 255, 0.92); }


/* Trustblock — single continuous particles network across partners + testimonials */
.trustblock { background: #ECF0F5; position: relative; overflow: hidden; }
.trustblock > .partners,
.trustblock > .testimonials { background: transparent; }
.trustblock .partners, .trustblock .testimonials { position: relative; pointer-events: none; }


/* Partner cards — solid bg + let particles grab pass through */
.trustblock .partner-logo {
  background: #FFFFFF;
}
.trustblock .partner-logo:hover {
  background: var(--paper-2);
}


.svc-home-card .sh-idx { display: none; }


.svc-home-card h3 { font-size: clamp(19px, 1.8vw, 24px); }


/* Sign in / Sign out auth link after lang-switch */
.nav-inner > .nav-auth { margin-left: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-color: rgba(255, 255, 255, 0.22);
  color: inherit;
  margin-left: 6px;
  opacity: 0.82;
  transition: opacity 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
  white-space: nowrap;
}
.nav.on-paper .nav-inner > .nav-auth { margin-left: 0; border-color: var(--rule-strong); }
.nav-inner > .nav-auth:hover { opacity: 1; }
.nav.on-paper .nav-inner > .nav-auth:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav.on-ink .nav-inner > .nav-auth:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }

@media (max-width: 820px) { .nav-inner > .nav-auth { margin-left: 0; display: none; } }


/* ============================================================
   Collapsed language dropdown + Time Tracker auth chip
   ============================================================ */
.lang-switch-dd { position: relative; border: 0; }
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid currentColor;
  border-color: rgba(255, 255, 255, 0.22);
  color: inherit;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 10px 8px 12px;
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 200ms var(--ease), border-color 200ms var(--ease);
}
.nav.on-paper .lang-trigger { border-color: var(--rule-strong); }
.lang-trigger:hover { opacity: 1; }
.lang-trigger .lang-current { color: var(--signal); font-weight: 500; }
.lang-trigger .lang-caret { font-size: 10px; opacity: 0.7; transition: transform 240ms var(--ease); }
.lang-switch-dd.is-open .lang-trigger .lang-caret { transform: rotate(180deg); }

.lang-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  min-width: 90px;
  background: var(--ink);
  border: 1px solid var(--rule-dark-strong);
  padding: 6px 0;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms var(--ease);
}
.nav.on-paper .lang-panel { background: #FFFFFF; border-color: var(--rule-strong); }
.lang-switch-dd.is-open .lang-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-panel[hidden] { display: flex; }
.lang-panel .lang-opt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory);
  padding: 9px 18px;
  display: block;
  transition: background 180ms var(--ease), color 180ms var(--ease), padding-left 180ms var(--ease);
}
.nav.on-paper .lang-panel .lang-opt { color: var(--steel-1); }
.lang-panel .lang-opt:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--signal);
  padding-left: 22px;
}
.nav.on-paper .lang-panel .lang-opt:hover { background: rgba(10, 26, 44, 0.04); }
.lang-panel .lang-opt.is-active { color: var(--signal); }

/* Time Tracker chip — sits between lang-switcher and Sign in/out */
.nav-inner > .nav-tracker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--signal);
  color: var(--signal);
  margin-left: 6px;
  background: rgba(31, 182, 224, 0.08);
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
  white-space: nowrap;
}
.nav-inner > .nav-tracker:hover {
  background: var(--signal);
  color: var(--ink);
}
.nav-inner > .nav-tracker[aria-current="page"] {
  background: var(--signal);
  color: var(--ink);
}

@media (max-width: 820px) {
  .nav-inner > .nav-tracker { display: none; }
}


.nav-inner > .lang-switch-dd { margin-left: 6px; margin-right: 15px; }


/* ============================================================
   About page — full-page light VANTA bg + light hero theme
   ============================================================ */
body.sandbox-cells-page #vanta-about-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
body.sandbox-cells-page { background: transparent; }

/* All sections on About page become transparent so the bg shows through */
body.sandbox-cells-page section { background: transparent !important; }
body.sandbox-cells-page section::before,
body.sandbox-cells-page section::after { background: transparent !important; }
body.sandbox-cells-page .footer { background: var(--ink-deep); }

/* Hero turns light theme */
body.sandbox-cells-page .hero,
body.sandbox-cells-page .hero.hero-inner-page { background: transparent; color: var(--steel-1); }
body.sandbox-cells-page .hero::before { background: none !important; }
body.sandbox-cells-page .hero h1 { color: var(--ink); text-shadow: none; }
body.sandbox-cells-page .hero h1 .accent { color: var(--warm); }
body.sandbox-cells-page .hero .lede,
body.sandbox-cells-page .hero .hero-head .lede { color: var(--steel-2); text-shadow: none; }
body.sandbox-cells-page .hero .hero-kicker {
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink);
  border-color: var(--rule-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.sandbox-cells-page .hero .hero-kicker .dot { background: var(--warm); }
body.sandbox-cells-page .hero .hero-grid {
  background-image:
    linear-gradient(to right, rgba(10, 26, 44, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 26, 44, 0.04) 1px, transparent 1px);
}



/* Content sections — semi-transparent paper veil so text reads on the cells bg */
body.sandbox-cells-page .story,
body.sandbox-cells-page section.section-pad-sm,
body.sandbox-cells-page section.section-pad {
  position: relative;
}
body.sandbox-cells-page .story::after,
body.sandbox-cells-page section.section-pad-sm:not(.cta-final)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: -1;
}

/* CTA at bottom — keep dark ink card on top of the bg */
body.sandbox-cells-page .cta-final { background: rgba(10, 26, 44, 0.94); color: var(--ivory); }
body.sandbox-cells-page .cta-final h2 { color: var(--ivory); }
body.sandbox-cells-page .cta-final p { color: var(--ivory-mute); }


/* About page — kill all hero overlays so VANTA cells show clean */
body.sandbox-cells-page .hero::before,
body.sandbox-cells-page .hero.hero-inner-page::before,
body.sandbox-cells-page .hero::after,
body.sandbox-cells-page .hero.hero-inner-page::after { background: none !important; display: none !important; }
body.sandbox-cells-page .hero .hero-video-overlay,
body.sandbox-cells-page .hero #hero-canvas,
body.sandbox-cells-page .hero .hero-video,
body.sandbox-cells-page .hero .vanta-bg { display: none !important; }
body.sandbox-cells-page .hero { background: transparent !important; }


/* Vanta needs to sit ABOVE the body bg paint, with content above it */
body.sandbox-cells-page #vanta-about-bg {
  z-index: 0;
}
body.sandbox-cells-page,
body.sandbox-cells-page html { background: transparent !important; }
body.sandbox-cells-page section,
body.sandbox-cells-page footer { position: relative; z-index: 1; }
body.sandbox-cells-page header.nav { position: fixed; z-index: 80; }


/* 75% white veil above the vanta cells, below the content */
body.sandbox-cells-page::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.65); z-index: 0; pointer-events: none; }


/* About page CTA — solid light bg, no cells visible */
body.sandbox-cells-page .cta-final {
  background: var(--paper) !important;
  color: var(--steel-1);
}
body.sandbox-cells-page .cta-final h2 { color: var(--ink); }
body.sandbox-cells-page .cta-final p { color: var(--steel-2); }
body.sandbox-cells-page .cta-final .head-tag .lbl { color: var(--steel-3) !important; }

body.sandbox-cells-page { position: relative; min-height: 100vh; }


.nav { padding: 11px 0; }


/* About page — at top of page, nav is transparent with DARK text/color logo.
   When scrolled, falls back to default on-ink dark backdrop + white text. */
body.sandbox-cells-page header.nav.on-ink:not(.scrolled) {
  color: var(--steel-1);
  background: transparent;
}
body.sandbox-cells-page header.nav.on-ink:not(.scrolled) .brand-logo-light { display: none; }
body.sandbox-cells-page header.nav.on-ink:not(.scrolled) .brand-logo-dark { display: block; }
body.sandbox-cells-page header.nav.on-ink:not(.scrolled) .lang-trigger,
body.sandbox-cells-page header.nav.on-ink:not(.scrolled) .nav-auth { border-color: var(--rule-strong); }
body.sandbox-cells-page header.nav.on-ink:not(.scrolled) .nav-auth:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }


/* About hero kicker — back to dark variant (like homepage hero kicker) */
body.sandbox-cells-page .hero .hero-kicker {
  background: color-mix(in srgb, var(--ink-deep) 55%, transparent);
  color: var(--ivory);
  border-color: var(--rule-dark-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.sandbox-cells-page .hero .hero-kicker .dot { background: var(--warm); }


/* News page — lighter veil so fog texture shows */
body.sandbox-news-page::after { display: none !important; }


/* ============================================================
   News items — match WHY card family: gray front + offset back
   No cyan accents. Stacked paper effect like .why-card.
   ============================================================ */
body.sandbox-news-page .news-list {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 36px);
  overflow: visible;
}
body.sandbox-news-page .news-item {
  position: relative;
  isolation: isolate;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.5vw, 40px);
  box-shadow: none;
  transition: transform 320ms var(--ease), background 280ms var(--ease);
  color: var(--steel-1);
}
body.sandbox-news-page .news-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #FFFFFF;
  border: 1px solid var(--rule-strong);
  transform: translate(-2px, -2px);
  transition: transform 360ms var(--ease);
}
body.sandbox-news-page .news-item:hover {
  transform: translate(-2px, -2px);
  background: var(--bone);
}
body.sandbox-news-page .news-item:hover::after {
  transform: translate(-4px, -4px);
}

body.sandbox-news-page .news-item .news-figure {
  margin: 0;
  border: 1px solid var(--rule);
  overflow: hidden;
}
body.sandbox-news-page .news-item .news-figure img {
  display: block; width: 100%; height: auto;
  transition: transform 600ms var(--ease), filter 320ms var(--ease);
  filter: grayscale(0.20);
}
body.sandbox-news-page .news-item:hover .news-figure img {
  transform: scale(1.03);
  filter: grayscale(0);
}

body.sandbox-news-page .news-item .news-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em; color: var(--steel-3);
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--rule);
}
body.sandbox-news-page .news-item .news-cat {
  color: var(--warm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.sandbox-news-page .news-item h2 {
  color: var(--ink);
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.022em;
  line-height: 1.2;
}
body.sandbox-news-page .news-item p { color: var(--steel-2); }

@media (max-width: 560px) {
  body.sandbox-news-page .news-item::after { display: none; }
}


/* News page CTA "Stay in touch" — light bg matching the news cards */
body.sandbox-news-page .cta-final {
  background: #FFFFFF !important;
  color: var(--steel-1);
}
body.sandbox-news-page .cta-final h2 { color: var(--ink); }
body.sandbox-news-page .cta-final p { color: var(--steel-2); }
body.sandbox-news-page .cta-final .head-tag .lbl { color: var(--steel-3) !important; }
body.sandbox-news-page .cta-final .silurus-wave { mix-blend-mode: multiply; opacity: 0.55; }


/* Kill the hairline border under the news hero */
body.sandbox-news-page .hero.hero-inner-page { border-bottom: 0 !important; }
body.sandbox-news-page .hero.hero-inner-page + section { border-top: 0 !important; }
body.sandbox-news-page .news-section { border-top: 0 !important; }


/* News page — trim spacing under hero to match About */
body.sandbox-news-page .news-section { padding-top: clamp(20px, 3vw, 36px); }
body.sandbox-news-page .news-section .section-head { padding-top: 0; padding-bottom: clamp(14px, 2vw, 24px); }


/* ============================================================
   Contact page — same family as News (cards + light overlay)
   ============================================================ */
/* Veil opacity — same as news (30%) */
body.sandbox-contact-page::after { background: rgba(255, 255, 255, 0.30) !important; }

/* Section cards — same elevated "stacked paper" treatment as news-item */
body.sandbox-contact-page .ct-section,
body.sandbox-contact-page .booking,
body.sandbox-contact-page .contacts,
body.sandbox-contact-page .offices {
  position: relative;
  isolation: isolate;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.5vw, 40px);
  margin: clamp(16px, 1.8vw, 28px) auto;
  max-width: var(--max);
  width: calc(100% - 2 * var(--gutter));
  color: var(--steel-1);
}
body.sandbox-contact-page .ct-section::after,
body.sandbox-contact-page .booking::after,
body.sandbox-contact-page .contacts::after,
body.sandbox-contact-page .offices::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #FFFFFF;
  border: 1px solid var(--rule-strong);
  transform: translate(-2px, -2px);
}

/* Contact CTA — same white treatment as News Stay-in-touch */



/* ============================================================
   Careers section — white overlay on photo bg + black text
   ============================================================ */
.careers .careers-photo::after {
  background:
    linear-gradient(180deg, rgba(11, 31, 52, 0.50) 0%, rgba(11, 31, 52, 0.38) 32%, rgba(11, 31, 52, 0.42) 68%, rgba(11, 31, 52, 0.65) 100%),
    radial-gradient(ellipse 85% 85% at 32% 32%, rgba(11, 31, 52, 0.25) 0%, rgba(11, 31, 52, 0.60) 100%) !important;
}
.careers h2 { color: #000000 !important; }
.careers .lede { color: #000000 !important; }
.careers .head-tag .lbl { color: #1A1A1A !important; }
.careers .benefit { background: rgba(255, 255, 255, 0.65); }
.careers .benefit h4 { color: #000000 !important; }
.careers .benefit p { color: #000000 !important; }
.careers .benefit .idx { color: #1A1A1A !important; }




/* ============================================================
   Careers benefit cards — match WHY card family (gray + back layer)
   ============================================================ */
.careers .career-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  border-top: 0;
  border-left: 0;
  overflow: visible;
}
.careers .benefit {
  position: relative;
  isolation: isolate;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  padding: 28px 28px 32px;
  min-height: 200px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform 320ms var(--ease), background 280ms var(--ease);
}
.careers .benefit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #FFFFFF;
  border: 1px solid var(--rule-strong);
  transform: translate(-2px, -2px);
  transition: transform 360ms var(--ease);
}
.careers .benefit:hover { transform: translate(-2px, -2px); background: var(--bone); }
.careers .benefit:hover::after { transform: translate(-4px, -4px); }

/* Dark text override stays (already set), kicker/idx hidden by an earlier rule */
.careers .benefit h4 { color: var(--ink) !important; }
.careers .benefit p { color: var(--steel-1) !important; }

@media (max-width: 900px) { .careers .career-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) {
  .careers .career-grid { grid-template-columns: 1fr; }
  .careers .benefit::after { display: none; }
}


/* Careers benefit icons — hairline SVGs, same family as why-icons */
.careers .benefit { display: flex; flex-direction: column; gap: 12px; }
.careers .benefit .benefit-icon {
  width: 28px;
  height: 28px;
  color: var(--ink);
  margin-top: 4px;
  margin-bottom: 4px;
}


/* ============================================================
   Engagement featured — same tone as A/C, stronger border, larger
   ============================================================ */
.eng-col.featured {
  background: color-mix(in srgb, var(--paper) 80%, transparent) !important;
  color: var(--steel-1) !important;
  border: 2px solid var(--ink) !important;
  position: relative;
  z-index: 1;
  transform: scale(1.03);
  transform-origin: center;
  padding: 40px 36px 40px;
}
.eng-col.featured h3 { color: var(--ink) !important; }
.eng-col.featured .eng-mark { color: var(--steel-3) !important; }
.eng-col.featured .eng-blurb { color: var(--steel-2) !important; }
.eng-col.featured li { color: var(--steel-1) !important; border-top-color: var(--rule) !important; }
.eng-col.featured li::before { color: var(--signal) !important; }
.eng-col.featured .best-for { color: var(--steel-3) !important; border-top-color: var(--rule) !important; }
.eng-col.featured .best-for span { color: var(--steel-2) !important; }

@media (max-width: 900px) {
  .eng-col.featured { transform: none; padding: 36px 32px 36px; }
}


/* Engagement A and C — same border family, just lighter */
.eng-col:not(.featured) {
  border: 1px solid var(--rule-strong) !important;
}
.eng-table { border-top: 0; border-bottom: 0; }


/* Remove hairline between Why section and trustblock partners */
.trustblock .partners, .trustblock { border-top: 0 !important; }


/* Remove hairline between Standards and Services */
.standards { border-bottom: 0 !important; }
.services-home { border-top: 0 !important; }


/* ============================================================
   About page — elevate every content section as a white card
   ============================================================ */
body.sandbox-about-page .story,
body.sandbox-about-page section.section-pad-sm:not(.cta-final),
body.sandbox-about-page section.section-pad:not(.cta-final) {
  background: #FFFFFF !important;
  border: 1px solid var(--rule-strong);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.5vw, 40px) !important;
  margin: clamp(16px, 1.8vw, 28px) auto;
  max-width: var(--max);
  width: calc(100% - 2 * var(--gutter));
  box-shadow:
    0 1px 2px rgba(10, 26, 44, 0.04),
    0 12px 28px -14px rgba(10, 26, 44, 0.12);
}
/* Cancel earlier ::after veil that referenced these sections */
body.sandbox-about-page .story::after,
body.sandbox-about-page section.section-pad-sm:not(.cta-final)::after,
body.sandbox-about-page section.section-pad:not(.cta-final)::after { display: none !important; }


/* ============================================================
   About — People grid as stacked-paper cards (like Standards)
   ============================================================ */
body.sandbox-about-page .people-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  border-top: 0;
  border-left: 0;
  overflow: visible;
}
body.sandbox-about-page .person-card {
  position: relative;
  isolation: isolate;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule-strong) !important;
  border-right: 1px solid var(--rule-strong) !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  transition: transform 320ms var(--ease), background 280ms var(--ease);
}
body.sandbox-about-page .person-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #FFFFFF;
  border: 1px solid var(--rule-strong);
  transform: translate(-2px, -2px);
  transition: transform 360ms var(--ease);
}
body.sandbox-about-page .person-card:hover { transform: translate(-2px, -2px); background: var(--bone) !important; }
body.sandbox-about-page .person-card:hover::after { transform: translate(-4px, -4px); }

@media (max-width: 760px) { body.sandbox-about-page .people-grid { grid-template-columns: 1fr; } }
@media (max-width: 540px) { body.sandbox-about-page .person-card::after { display: none; } }





/* Contact CTA — more breathing between p and button */
body.sandbox-contact-page .cta-final p { margin-bottom: 48px; }
body.sandbox-contact-page .cta-final .btns { gap: 16px; }


body.sandbox-about-page::after { background: rgba(6, 15, 30, 0.50) !important; display: block !important; }


/* Footer now 3 columns (Standards removed), tighter */
.footer-cols { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr 1fr; } }


/* Footer offices side-by-side (Budapest + Singapore) */
.footer-top { grid-template-columns: minmax(320px, 1fr) 1fr; }
.footer-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; flex-wrap: nowrap; }
.footer-office { max-width: none; min-width: 0; }
@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-offices { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-offices { grid-template-columns: 1fr; }
}


/* About: strip elevated white card wrap from Our Story and The People sections.
   Only the individual .person-card cards keep their styling. */
body.sandbox-about-page section#story,
body.sandbox-about-page section#people {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
}


/* About page — dark cells bg, white text, strip section card wrappers */
body.sandbox-about-page .story,
body.sandbox-about-page section.section-pad-sm:not(.cta-final),
body.sandbox-about-page section.section-pad:not(.cta-final) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
}

body.sandbox-about-page .hero.hero-inner-page h1,
body.sandbox-about-page h1,
body.sandbox-about-page h2,
body.sandbox-about-page h3,
body.sandbox-about-page h4,
body.sandbox-about-page h5 { color: var(--ivory) !important; }
body.sandbox-about-page p,
body.sandbox-about-page .lede,
body.sandbox-about-page .hero.hero-inner-page .lede,
body.sandbox-about-page .hero.hero-inner-page .hero-lede,
body.sandbox-about-page .story p,
body.sandbox-about-page .head-body p { color: var(--ivory) !important; }
body.sandbox-about-page .head-tag .lbl { color: var(--ivory-mute) !important; }

/* CTA at bottom — keep its standalone treatment */
body.sandbox-about-page .cta-final h2 { color: var(--ivory) !important; }
body.sandbox-about-page .cta-final p { color: var(--ivory-mute) !important; }


/* Inside person-cards (light gray bg) — text stays dark */
body.sandbox-about-page .person-card,
body.sandbox-about-page .person-card * { color: var(--steel-1) !important; }
body.sandbox-about-page .person-card .person-name,
body.sandbox-about-page .person-card h3,
body.sandbox-about-page .person-card h4 { color: var(--ink) !important; }
body.sandbox-about-page .person-card .role { color: var(--warm) !important; }
body.sandbox-about-page .person-card .person-bio,
body.sandbox-about-page .person-card p { color: var(--steel-1) !important; }
body.sandbox-about-page .person-card .person-title-line,
body.sandbox-about-page .person-card .person-head { color: var(--steel-3) !important; }


/* About — navbar same as homepage (on-ink dark scheme), even at top */
body.sandbox-about-page header.nav.on-ink:not(.scrolled) {
  color: var(--ivory) !important;
  background: transparent !important;
}
body.sandbox-about-page header.nav.on-ink:not(.scrolled) .brand-logo-light { display: block !important; }
body.sandbox-about-page header.nav.on-ink:not(.scrolled) .brand-logo-dark { display: none !important; }
body.sandbox-about-page header.nav.on-ink:not(.scrolled) .lang-trigger,
body.sandbox-about-page header.nav.on-ink:not(.scrolled) .nav-auth { border-color: rgba(255, 255, 255, 0.22) !important; }


/* Contact booking section heading + lede — black on the gray card */
body.sandbox-contact-page .booking .section-head h2 { color: #000000 !important; }
body.sandbox-contact-page .booking .section-head .lede { color: #1A1A1A !important; }
body.sandbox-contact-page .booking .section-head .lbl { color: #2A2A2A !important; }


/* Contact CTA — solid dark navy, light text, wave hidden */
body.sandbox-contact-page .cta-final {
  background: var(--ink-deep) !important;
  color: var(--ivory);
}
body.sandbox-contact-page .cta-final h2 { color: var(--ivory) !important; }
body.sandbox-contact-page .cta-final p { color: var(--ivory-mute) !important; }
body.sandbox-contact-page .cta-final .head-tag .lbl { color: var(--ivory-faint) !important; }
body.sandbox-contact-page .cta-final .silurus-wave,
body.sandbox-contact-page .cta-final canvas.wave-strip-cta { display: none !important; }


/* About CTA — solid dark navy, light text, wave hidden */
body.sandbox-about-page .cta-final {
  background: transparent !important;
  color: var(--ivory) !important;
}
body.sandbox-about-page .cta-final h2 { color: var(--ivory) !important; }
body.sandbox-about-page .cta-final p { color: var(--ivory-mute) !important; }
body.sandbox-about-page .cta-final .head-tag .lbl { color: var(--ivory-faint) !important; }
body.sandbox-about-page .cta-final .silurus-wave,
body.sandbox-about-page .cta-final canvas.wave-strip-cta { display: none !important; }


/* About CTA — Email the team button: warm orange */
body.sandbox-about-page .cta-final .btn,
body.sandbox-about-page .cta-final .btn-paper {
  background: var(--warm) !important;
  color: var(--warm-fg) !important;
  border-color: var(--warm) !important;
}
body.sandbox-about-page .cta-final .btn:hover,
body.sandbox-about-page .cta-final .btn-paper:hover {
  background: var(--warm-2) !important;
  border-color: var(--warm-2) !important;
}


/* About CTA — breathing room between heading and button */
body.sandbox-about-page .cta-final .btns { margin-top: 28px; }


/* About CTA — fade from transparent (cells) at top to --ink-deep (footer) at bottom */
body.sandbox-about-page .cta-final {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
body.sandbox-about-page .cta-final::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg,
    rgba(6, 15, 30, 0) 0%,
    rgba(6, 15, 30, 0.30) 40%,
    rgba(6, 15, 30, 0.78) 80%,
    rgba(6, 15, 30, 1) 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
}
body.sandbox-about-page .cta-final .cta-inner,
body.sandbox-about-page .cta-final .head-tag { position: relative; z-index: 2; }


/* About — hide hairline above the footer so the CTA gradient flows in cleanly */
body.sandbox-about-page .footer { border-top: 0 !important; }
body.sandbox-about-page .cta-final { border-top: 0 !important; border-bottom: 0 !important; }


/* News page — dark theme: light text, no section card wrappers, white hero text */
body.sandbox-news-page .story,
body.sandbox-news-page section.section-pad-sm:not(.cta-final),
body.sandbox-news-page section.section-pad:not(.cta-final) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
}
body.sandbox-news-page .hero.hero-inner-page h1,
body.sandbox-news-page h1,
body.sandbox-news-page h2,
body.sandbox-news-page h3,
body.sandbox-news-page h4,
body.sandbox-news-page h5 { color: var(--ivory) !important; }
body.sandbox-news-page p,
body.sandbox-news-page .lede,
body.sandbox-news-page .hero.hero-inner-page .lede,
body.sandbox-news-page .hero.hero-inner-page .hero-lede,
body.sandbox-news-page .head-body p { color: var(--ivory) !important; }
body.sandbox-news-page .head-tag .lbl { color: var(--ivory-mute) !important; }

/* News item cards stay light gray for readability */
body.sandbox-news-page .news-item h2 { color: var(--ink) !important; }
body.sandbox-news-page .news-item p { color: var(--steel-1) !important; }
body.sandbox-news-page .news-item .news-meta { color: var(--steel-3) !important; }
body.sandbox-news-page .news-item .news-cat { color: var(--warm) !important; }

/* Stay in touch CTA — dark, light text */
body.sandbox-news-page .cta-final {
  background: transparent !important;
  color: var(--ivory) !important;
}
body.sandbox-news-page .cta-final h2 { color: var(--ivory) !important; }
body.sandbox-news-page .cta-final p { color: var(--ivory-mute) !important; }
body.sandbox-news-page .cta-final .head-tag .lbl { color: var(--ivory-faint) !important; }
body.sandbox-news-page .cta-final .silurus-wave,
body.sandbox-news-page .cta-final canvas.wave-strip-cta { display: none !important; }

/* Navbar — homepage-style dark (not light) on top */
body.sandbox-news-page header.nav.on-ink:not(.scrolled) {
  color: var(--ivory) !important;
  background: transparent !important;
}
body.sandbox-news-page header.nav.on-ink:not(.scrolled) .brand-logo-light { display: block !important; }
body.sandbox-news-page header.nav.on-ink:not(.scrolled) .brand-logo-dark { display: none !important; }
body.sandbox-news-page header.nav.on-ink:not(.scrolled) .lang-trigger,
body.sandbox-news-page header.nav.on-ink:not(.scrolled) .nav-auth { border-color: rgba(255, 255, 255, 0.22) !important; }


/* News page — kill the backdrop blur veil on section::after */
body.sandbox-news-page .story::after,
body.sandbox-news-page section.section-pad-sm::after,
body.sandbox-news-page section.section-pad::after {
  display: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
}


/* Careers — heading + lede white */
.careers h2, .careers .head-body h2 { color: var(--ivory) !important; }
.careers .lede, .careers .head-body .lede { color: var(--ivory) !important; }
.careers .head-tag .lbl { color: var(--ivory-mute) !important; }