/* ==========================================================================
   Trio Data - "Clinical Intelligence" design system (light glassmorphism)
   Deep Navy #111827 · Royal Blue #2563EB · Safety Orange #F97316 (surgical)
   Hanken Grotesk (display) · Inter (body) · Geist (metrics/labels)
   ========================================================================== */
:root {
  --navy: #111827;
  --navy-700: #1f2937;
  --blue: #2563eb;
  --blue-600: #1d4ed8;
  --orange: #f97316;
  --orange-600: #ea6a0c;
  --surface: #f9fafb;
  --surface-2: #f1f5f9;
  --white: #ffffff;
  --border: #e2e8f0;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --glass: rgba(255, 255, 255, 0.7);
  --shadow-soft: 0 20px 40px rgba(17, 24, 39, 0.05);
  --shadow-card: 0 8px 24px rgba(17, 24, 39, 0.06);
  --radius: 8px;
  --radius-lg: 16px;
  --container: 1200px;
  --gutter: 24px;
  --section-gap: 96px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--navy);
  background: var(--surface);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: "Hanken Grotesk", "Inter", sans-serif; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--navy); }
.mono, .metric__value, .eyebrow, .btn, .nav__link, .chip, .tag { font-family: "Geist", "Inter", ui-monospace, monospace; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-gap); }
.section--tight { padding-block: 64px; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--orange); display: inline-block; }
.eyebrow--center { justify-content: center; }
.section__title { font-size: clamp(28px, 4vw, 40px); margin-top: 14px; }
.section__head { text-align: center; margin-bottom: 56px; }
.lead { color: var(--muted); font-size: 18px; max-width: 60ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 14px 22px; border-radius: var(--radius); border: 1px solid transparent;
  transition: transform 0.15s var(--ease), background 0.2s, box-shadow 0.2s; white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary { background: var(--orange); color: #fff; box-shadow: 0 6px 16px rgba(249, 115, 22, 0.25); }
.btn--primary:hover { background: var(--orange-600); box-shadow: 0 10px 22px rgba(249, 115, 22, 0.3); }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-700); }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--navy); }
.btn--ghost:hover { border-color: var(--navy); background: #fff; }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--surface-2); }
.btn .ico { width: 16px; height: 16px; }

/* ---------- Header / Nav ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(249, 250, 251, 0.8); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark { width: 34px; height: 34px; display: grid; place-items: center; }
.brand__name { font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.02em; line-height: 1; }
.brand__name small { display: block; font-family: "Geist", monospace; font-weight: 600; font-size: 9px; letter-spacing: 0.28em; color: var(--muted); margin-top: 3px; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 1.45vw, 22px); }
.nav__link { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); padding: 6px 0; position: relative; transition: color 0.15s; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--orange); }
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--orange); }
.nav__cta { margin-left: 6px; }
.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(8, 42, 99, .08);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--blue);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .18);
  outline-offset: 2px;
}
.theme-toggle__track {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}
.theme-toggle__icon {
  position: absolute;
  width: 18px;
  height: 18px;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.theme-toggle__icon--sun {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.theme-toggle__icon--moon {
  opacity: 0;
  transform: scale(.72) rotate(-18deg);
}
.theme-dark .theme-toggle {
  color: #eaf2ff;
  background: rgba(4, 12, 22, .54);
  border-color: rgba(111, 145, 255, .44);
  box-shadow: 0 0 0 1px rgba(255,255,255,.035), 0 12px 28px rgba(0,0,0,.24);
}
.theme-dark .theme-toggle:hover,
.theme-dark .theme-toggle:focus-visible {
  border-color: #7fa0ff;
}
.theme-dark .theme-toggle__icon--sun {
  opacity: 0;
  transform: scale(.72) rotate(18deg);
}
.theme-dark .theme-toggle__icon--moon {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 4px 0; transition: 0.2s; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 640px;
  display: grid;
  align-items: center;
  padding-block: 96px 104px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 34%, rgba(255,255,255,.36) 62%, rgba(255,255,255,.04) 100%),
    url("../images/home-hero-light.png?v=20260710-restored");
  background-size: cover;
  background-position: center right;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr); gap: 48px; align-items: center; min-height: 460px; }
.hero h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.03em; margin: 18px 0 22px; }
.hero h1 .hl { color: var(--orange); }
.hero__sub { color: var(--muted); font-size: 18px; max-width: 46ch; margin-bottom: 30px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 22px; }
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.chip .dot { width: 16px; height: 16px; color: var(--orange); }
.hero__visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 420px; box-shadow: var(--shadow-soft); }
.hero .hero__visual { display: none !important; }
.hero__visual img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.hero__cards { display: none; }
.floatcard {
  position: absolute; right: 18px; display: flex; align-items: flex-start; gap: 12px;
  background: var(--glass); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.6);
  border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-card); max-width: 250px;
}
.floatcard:nth-child(1) { top: 24px; }
.floatcard:nth-child(2) { top: 120px; }
.floatcard:nth-child(3) { top: 216px; }
.floatcard__ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(249,115,22,.1); color: var(--orange); }
.floatcard__ico svg { width: 18px; height: 18px; }
.floatcard__k { font-family: "Geist", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); font-weight: 600; }
.floatcard__v { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.3; margin-top: 2px; }

/* ---------- Metrics strip ---------- */
.metrics { border-block: 1px solid var(--border); background: #fff; }
.metrics__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric { display: flex; align-items: center; gap: 14px; padding: 30px var(--gutter); border-left: 1px solid var(--border); min-width: 0; }
.metric > div { min-width: 0; }
.metric:first-child { border-left: 0; }
.metric__ico { width: 22px; height: 22px; color: var(--muted-2); flex: none; }
.metric__value { font-family: "Geist", monospace; font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.05; letter-spacing: -0.02em; }
.metric__value .confirm { font-size: 10px; color: var(--orange); vertical-align: super; }
.metric__label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; font-family: "Geist", monospace; }

/* ---------- Cards / glass ---------- */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }

/* Services grid */
.services__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.services__grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc { display: flex; flex-direction: column; gap: 14px; }
.svc__ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: rgba(37,99,235,.08); color: var(--blue); }
.svc__ico svg { width: 22px; height: 22px; }
.svc h3 { font-size: 18px; letter-spacing: -0.01em; }
.svc p { color: var(--muted); font-size: 14px; flex: 1; }
.svc__more { font-family: "Geist", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); display: inline-flex; align-items: center; gap: 6px; }
.svc__more svg { width: 14px; height: 14px; transition: transform 0.15s; }
.svc:hover .svc__more svg { transform: translateX(3px); }

/* Differentiators */
.diff__grid { display: grid; grid-template-columns: 1fr 0.8fr 0.9fr; gap: 40px; align-items: center; }
.diff__list { list-style: none; display: flex; flex-direction: column; gap: 16px; margin: 24px 0 30px; }
.diff__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--navy-700); }
.diff__list svg { width: 20px; height: 20px; color: var(--orange); flex: none; margin-top: 1px; }
.diff__img {
  min-height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background:
    linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,.12)),
    url("../images/chess-piece-light.png?v=20260710-restored") center / cover !important;
}
.diff__img > svg { display: none; }
.diff__cards { display: flex; flex-direction: column; gap: 14px; }
.minicard { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-card); }
.minicard__ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(249,115,22,.1); color: var(--orange); }
.minicard__ico svg { width: 16px; height: 16px; }
.minicard h4 { font-size: 14px; font-family: "Hanken Grotesk"; }
.minicard p { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Industries */
.industries { background: #fff; }
.ind__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.ind { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--navy); background-size: cover !important; background-position: center !important; display: flex; align-items: flex-end; padding: 12px; color: #fff; box-shadow: var(--shadow-card); }
.ind--retail { background-image: linear-gradient(160deg, rgba(15,23,42,.12), rgba(15,23,42,.62)), url("../images/industries/retail-fmcg.jpg?v=20260710-reference-source") !important; }
.ind--manufacturing { background-image: linear-gradient(160deg, rgba(15,23,42,.12), rgba(15,23,42,.62)), url("../images/industries/manufacturing.jpg?v=20260710-reference-source") !important; }
.ind--logistics { background-image: linear-gradient(160deg, rgba(15,23,42,.12), rgba(15,23,42,.62)), url("../images/industries/logistics.jpg?v=20260710-reference-source") !important; }
.ind--financial { background-image: linear-gradient(160deg, rgba(15,23,42,.12), rgba(15,23,42,.62)), url("../images/industries/financial-services.jpg?v=20260710-reference-source") !important; }
.ind--healthcare { background-image: linear-gradient(160deg, rgba(15,23,42,.12), rgba(15,23,42,.62)), url("../images/industries/healthcare.jpg?v=20260710-reference-source") !important; }
.ind--mining { background-image: linear-gradient(160deg, rgba(15,23,42,.12), rgba(15,23,42,.62)), url("../images/industries/mining.jpg?v=20260710-reference-source") !important; }
.ind--hospitality { background-image: linear-gradient(160deg, rgba(15,23,42,.12), rgba(15,23,42,.62)), url("../images/industries/hospitality.jpg?v=20260710-reference-source") !important; }
.ind--construction { background-image: linear-gradient(160deg, rgba(15,23,42,.12), rgba(15,23,42,.62)), url("../images/industries/construction.jpg?v=20260710-reference-source") !important; }
.ind::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,24,39,.85), rgba(17,24,39,.2)); z-index: 1; }
.ind img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.ind span { position: relative; z-index: 2; font-family: "Geist", monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* Testimonials wall (gap-fill) */
.testimonials { background: var(--surface); }
.testimonials,
.testimonials + .section { display: none; }
.stitch-extra-grid { display: none; }
.tw__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote { display: flex; flex-direction: column; gap: 16px; }
.quote__mark { font-family: "Hanken Grotesk"; font-size: 44px; line-height: 0.5; color: var(--orange); height: 22px; }
.quote p { font-size: 15px; color: var(--navy-700); font-style: italic; flex: 1; }
.quote__who { font-family: "Geist", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.quote__who strong { color: var(--navy); display: block; font-size: 12px; }

/* Case studies (gap-fill) */
.cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case { display: flex; flex-direction: column; gap: 12px; }
.case__tag { font-family: "Geist", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.case h3 { font-size: 19px; }
.case__stat { font-family: "Geist", monospace; font-size: 30px; font-weight: 700; color: var(--orange); letter-spacing: -0.02em; }
.case p { font-size: 14px; color: var(--muted); }

/* Logo wall */
.logowall { border-top: 1px solid var(--border); }
.logowall__label { text-align: center; font-family: "Geist", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 30px; }
.logowall__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 40px; }
.logowall__item { font-family: "Hanken Grotesk"; font-weight: 600; font-size: 15px; color: var(--muted); opacity: 0.85; }

/* CTA band */
.ctaband { }
.ctaband__inner { background: var(--navy); border-radius: var(--radius-lg); padding: 44px 48px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; box-shadow: var(--shadow-soft); }
.ctaband h2 { color: #fff; font-size: clamp(24px, 3vw, 32px); }
.ctaband p { color: rgba(255,255,255,.7); margin-top: 6px; }

/* ---------- Footer ---------- */
.footer { background: #fff; border-top: 1px solid var(--border); padding-block: 56px 28px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr 0.9fr; gap: 32px; }
.footer__blurb { color: var(--muted); font-size: 14px; margin-top: 16px; max-width: 32ch; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; display: grid; place-items: center; color: var(--muted); transition: 0.15s; }
.footer__social a:hover { color: var(--orange); border-color: var(--orange); }
.footer h4 { font-family: "Geist", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer ul a { font-size: 14px; color: var(--navy-700); transition: color 0.15s; }
.footer ul a:hover { color: var(--orange); }
.footer__contact li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--navy-700); }
.footer__contact svg { width: 16px; height: 16px; color: var(--orange); flex: none; }
.footer__bottom { border-top: 1px solid var(--border); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted-2); font-family: "Geist", monospace; }
.footer__bottom a { color: var(--muted-2); }
.footer__bottom a:hover { color: var(--orange); }

/* ---------- Inner-page components ---------- */
.pagehero { background: linear-gradient(180deg, #fff, var(--surface)); border-bottom: 1px solid var(--border); padding-block: 56px 64px; }
.pagehero--dark {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-bottom: 0;
  padding-block: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 1693 / 929;
  background: linear-gradient(115deg, #0f172a 0%, #1e293b 55%, #16233a 100%);
}
.pagehero--leadership {
  background:
    linear-gradient(135deg, rgba(15,23,42,.97), rgba(15,23,42,.84)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px);
}
.pagehero--services,
.pagehero--investigations {
  background: linear-gradient(90deg, #0f172a 0%, #1f2b40 60%, #243447 100%);
}
.pagehero--services::after,
.pagehero--investigations::after {
  content: "";
  position: absolute;
  right: 7%;
  top: 22%;
  width: 120px;
  height: 190px;
  background: var(--orange);
  clip-path: polygon(100% 0, 28% 50%, 100% 100%);
  opacity: .96;
}
.pagehero--dark .crumb,
.pagehero--dark .crumb a,
.pagehero--dark h1,
.pagehero--dark p { color: #fff; }
.pagehero--dark p { color: rgba(255,255,255,.78); }
.pagehero--dark .crumb { color: rgba(255,255,255,.62); }
.crumb { font-family: "Geist", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: flex; gap: 8px; margin-bottom: 18px; }
.crumb a:hover { color: var(--orange); }
.pagehero h1 { font-size: clamp(32px, 5vw, 52px); max-width: 20ch; }
.pagehero p { color: var(--muted); font-size: 18px; max-width: 60ch; margin-top: 18px; }
.prose { max-width: 68ch; }
.prose h2 { font-size: 26px; margin: 40px 0 14px; }
.prose h3 { font-size: 19px; margin: 28px 0 8px; }
.prose p { color: var(--navy-700); margin-bottom: 14px; }
.prose ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 8px 0 18px; }
.prose ul li { display: flex; gap: 10px; align-items: flex-start; color: var(--navy-700); font-size: 15px; }
.prose ul li svg { width: 18px; height: 18px; color: var(--orange); flex: none; margin-top: 2px; }
.svc-layout { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.svc-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.metric-tile { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-soft); }
.metric-tile .v { font-family: "Geist", monospace; font-size: 40px; font-weight: 700; color: var(--orange); letter-spacing: -0.02em; }
.metric-tile .l { color: rgba(255,255,255,.75); font-size: 13px; margin-top: 6px; }
.minicase { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-card); }
.minicase .tag { font-family: "Geist", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.minicase h4 { font-size: 16px; margin: 6px 0; }
.minicase p { font-size: 13px; color: var(--muted); }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-family: "Geist", monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy-700); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; }
.badge svg { width: 14px; height: 14px; color: var(--orange); }
.step { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--border); }
.step__n { font-family: "Geist", monospace; font-size: 13px; font-weight: 700; color: var(--orange); flex: none; width: 32px; }
.step h3 { margin: 0 0 4px; font-size: 17px; }
.step p { margin: 0; font-size: 14px; color: var(--muted); }

/* Stitch reconciliation media sections */
.stitch-media { background: #fff; border-top: 1px solid var(--border); }
.media-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 76px;
}
.media-row:last-child { margin-bottom: 0; }
.media-row--flip { grid-template-columns: minmax(320px, .82fr) minmax(0, 1fr); }
.media-copy p { color: var(--navy-700); margin-top: 16px; }
.media-copy ul { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.media-copy li { color: var(--muted); font-size: 14px; padding-left: 18px; position: relative; }
.media-copy li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 999px; background: var(--orange); }
.media-image {
  min-height: 340px;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  box-shadow: 0 22px 42px rgba(15, 23, 42, .14);
  border: 1px solid rgba(15, 23, 42, .08);
}
.media-image--intelligence { background-image: url("../images/services-intelligence.jpg?v=20260710"); }
.media-image--investigation { background-image: url("../images/services-investigation.jpg?v=20260710"); }
.media-image--forensic { background-image: url("../images/services-forensic.jpg?v=20260710"); }
.media-image--security { background-image: url("../images/services-security.jpg?v=20260710"); }
/* Investigations media — purpose-made, Trio Data-branded art (wired 2026-07-15, session 41).
   Replaces generic stock-1x.jpg. Each maps to the section whose .eyebrow names it.
   Sources were ~2MB PNGs (1254x1254 and 1536x1024); shipped as JPG q82 @1400w (~0.68MB total
   vs 8.04MB) — the box measures 497x340 (ratio 1.46) with background-size:cover, so the two
   square sources were pre-cropped top-biased to keep their title bands out of the browser crop. */
.media-image--boardroom { background-image: url("../images/investigations/corporate-due-diligence.jpg"); }
.media-image--internal-fraud { background-image: url("../images/investigations/internal-fraud.jpg"); }
.media-image--digital-forensics { background-image: url("../images/investigations/cyber-intel.jpg"); }
.media-image--asset-reference { background-image: url("../images/investigations/asset-recovery.jpg"); }

.threat-band { background: #fff; border-bottom: 1px solid var(--border); }
.threat-band .section__head { margin-bottom: 34px; }
.threat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.threat-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-top: 2px solid var(--orange);
  background: #fff;
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.threat-card h3 { font-size: 18px; margin-bottom: 8px; }
.threat-card p { color: var(--muted); font-size: 14px; }
.empower-strip { background: #fbf7f6; border-bottom: 1px solid var(--border); }
.empower-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.empower-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-card); }
.empower-item span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--orange); background: rgba(249,115,22,.08); font-family: "Geist", monospace; font-weight: 700; }
.empower-item h3 { font-size: 15px; }
.empower-item p { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Team / leadership */
.team__grid { display: flex; flex-direction: column; gap: 24px; }
.person {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-height: 300px;
}
.person__avatar {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border-radius: 0;
  background: linear-gradient(150deg, var(--navy), var(--blue));
  background-size: cover;
  background-position: center;
  color: transparent;
  display: block;
  font-size: 0;
}
.person:nth-child(1) .person__avatar { background-image: url("../images/stock/stock-16.jpg"); }
.person:nth-child(2) .person__avatar { background-image: url("../images/stock/stock-17.jpg"); }
.person:nth-child(3) .person__avatar { background-image: url("../images/stock/stock-18.jpg"); }
.person > div:not(.person__contact) { padding: 30px 30px 0; }
.person h3 { font-size: 20px; }
.person__role { font-family: "Geist", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); }
.person p { font-size: 14px; color: var(--muted); padding-inline: 30px; }
.person__quote { font-style: italic; color: var(--navy-700); border-left: 2px solid var(--orange); padding-left: 12px; margin: 0 30px; font-size: 14px; }
.person__contact {
  grid-column: 3;
  grid-row: 1 / span 4;
  font-family: "Geist", monospace;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 30px;
  border-left: 1px solid var(--border);
  background: var(--surface);
}
.person__contact a:hover { color: var(--orange); }

.principles { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.principles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.principle { text-align: center; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.principle__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--orange); background: rgba(249,115,22,.08); margin-bottom: 12px; }
.principle h3 { font-size: 16px; margin-bottom: 6px; }
.principle p { font-size: 12px; color: var(--muted); padding: 0; }


/* Reference leadership profile section */
.leadership-showcase {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.leadership-showcase .section__head { margin-bottom: 30px; }
.leadership-profile-stack { display: flex; flex-direction: column; gap: 20px; }
.leadership-profile-card {
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr) 270px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
}
.leadership-profile-photo { margin: 0; min-height: 470px; background: #e9eef7; }
.leadership-profile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.leadership-profile-main {
  padding: 46px 46px 38px;
  color: var(--navy);
}
.leadership-profile-main h3 { font-size: clamp(30px, 3vw, 42px); line-height: 1; margin: 0 0 12px; color: #07183d; }
.leadership-role { margin: 0; color: var(--orange); font-weight: 700; font-size: 15px; }
.leadership-rule { width: 46px; height: 2px; background: var(--orange); margin: 14px 0 34px; }
.leadership-profile-main p { color: #111827; font-size: 14px; line-height: 1.95; margin: 0 0 22px; max-width: 58ch; }
.leadership-profile-main blockquote {
  margin: 18px 0 0;
  color: #0b4aa2;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 22px;
  font-weight: 600;
}
.leadership-profile-main blockquote::before { content: "\201C"; color: var(--orange); font-size: 34px; line-height: 0; margin-right: 8px; vertical-align: -8px; }
.leadership-profile-contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 38px 34px;
  border-left: 1px solid #dbe4f0;
}
.leadership-contact-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.leadership-contact-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid #1142b2;
  border-radius: 999px;
  color: #1142b2;
}
.leadership-contact-icon svg { width: 22px; height: 22px; }
.leadership-contact-item strong { display: block; color: #07183d; font-size: 14px; margin-bottom: 6px; }
.leadership-contact-item a,
.leadership-contact-item span { display: block; color: #334155; font-size: 14px; line-height: 1.45; }
.leadership-contact-item a:hover { color: var(--orange); }
@media (max-width: 1050px) {
  .leadership-profile-card { grid-template-columns: minmax(240px, 330px) 1fr; }
  .leadership-profile-contact { grid-column: 2; border-left: 0; border-top: 1px solid #dbe4f0; padding-top: 26px; }
}
@media (max-width: 760px) {
  .leadership-profile-card { grid-template-columns: 1fr; }
  .leadership-profile-photo { min-height: 0; aspect-ratio: 3 / 4; }
  .leadership-profile-main { padding: 30px 24px 24px; }
  .leadership-rule { margin-bottom: 24px; }
  .leadership-profile-main p { font-size: 13px; line-height: 1.75; }
  .leadership-profile-contact { grid-column: auto; padding: 24px; border-left: 0; border-top: 1px solid #dbe4f0; }
}

/* Contact form + lead magnet */
.contact__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-family: "Geist", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { font-family: "Inter", sans-serif; font-size: 15px; color: var(--navy); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; transition: border 0.15s, box-shadow 0.15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.field textarea { resize: vertical; min-height: 110px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-status {
  margin-top: 14px;
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
  font-family: "Geist", monospace;
}
.leadmagnet { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-soft); }
.leadmagnet .eyebrow { color: var(--orange); }
.leadmagnet h3 { color: #fff; font-size: 22px; margin: 12px 0; }
.leadmagnet p { color: rgba(255,255,255,.75); font-size: 14px; margin-bottom: 18px; }
.leadmagnet ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.leadmagnet li { display: flex; gap: 10px; font-size: 13px; color: rgba(255,255,255,.85); }
.leadmagnet li svg { width: 16px; height: 16px; color: var(--orange); flex: none; }
.contactcard { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--border); }
.contactcard svg { width: 18px; height: 18px; color: var(--orange); flex: none; margin-top: 2px; }
.contactcard b { font-family: "Hanken Grotesk"; display: block; font-size: 14px; }
.contactcard span { font-size: 13px; color: var(--muted); }

/* Careers live opportunities */
.career-openings { background: linear-gradient(180deg, rgba(247,251,255,.86), rgba(255,255,255,.96)); }
.career-openings__status {
  margin: 0 auto 22px;
  max-width: 720px;
  text-align: center;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}
.career-openings__status.is-error { color: #9f1239; background: #fff1f2; border-color: #fecdd3; }
.career-openings__status.is-empty { color: #24405f; background: #eef6ff; border-color: #bfdbfe; }
.career-openings__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.career-job {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.career-job__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.career-job__pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--blue);
  background: rgba(37,99,235,.06);
  font-size: 12px;
  font-family: "Geist", monospace;
}
.career-job h3 { color: var(--navy); font-size: 22px; line-height: 1.12; }
.career-job p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.career-job__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.career-job__tag {
  color: #24405f;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 12px;
}
.career-job .btn { align-self: flex-start; margin-top: 4px; }
.career-application {
  margin-top: 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 36px);
  box-shadow: var(--shadow-soft);
}
.career-application__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}
.career-application__head h3 { color: var(--navy); font-size: clamp(24px, 3vw, 34px); margin-top: 8px; }
.career-application__close {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--navy);
  padding: 9px 12px;
  font-family: "Geist", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.career-application__close:hover { border-color: var(--blue); color: var(--blue); }
.career-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 2px 0 18px;
}
.career-consent input { margin-top: 3px; }
.career-application__form .btn { min-width: 210px; justify-content: center; }

@media (max-width: 960px) {
  .svc-layout { grid-template-columns: 1fr; }
  .svc-aside { position: static; }
  .person { grid-template-columns: 1fr; }
  .person__avatar { min-height: 260px; }
  .person > div:not(.person__contact), .person p, .person__quote { padding-inline: 24px; margin-inline: 0; }
  .person__contact { grid-column: auto; grid-row: auto; border-left: 0; border-top: 1px solid var(--border); }
  .principles__grid, .threat-grid, .empower-grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .career-openings__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form__row { grid-template-columns: 1fr; }
  .career-application__head { flex-direction: column; }
  .career-job, .career-application { border-radius: 12px; }
}






































/* HOME LIGHT ASSET RESPONSIVE START */
@media (max-width: 640px) {
  .hero {
    min-height: 0;
    overflow-x: hidden;
    padding-block: 72px 76px;
    background-position: 70% center;
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    max-width: 100%;
    overflow-x: hidden;
  }
  .hero__copy { min-width: 0; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}
/* HOME LIGHT ASSET RESPONSIVE END */


/* HOME FRONTPAGE REFERENCE START */
:root {
  --navy: #082a63;
  --navy-700: #0c3a82;
  --blue: #0d4fb3;
  --blue-600: #0a3f91;
  --surface: #f7fbff;
  --surface-2: #eef6ff;
  --muted: #536884;
  --muted-2: #7d8ca1;
  --border: #dbe7f5;
  --shadow-soft: 0 18px 42px rgba(8, 42, 99, .10);
  --shadow-card: 0 10px 28px rgba(8, 42, 99, .09);
}
.header .nav {
  max-width: 1320px;
  padding-inline: 20px;
}
.brand { flex-shrink: 0; min-width: 0; }
.brand__mark--official {
  width: 50px;
  height: 60px;
  display: block;
  flex: 0 0 auto;
}
.brand__mark--official img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer .brand__mark--official {
  width: 58px;
  height: 70px;
}
.brand__name--sr,
.brand__name--sr small {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 961px) {
  .nav {
    gap: 18px;
  }
  .nav__links {
    flex: 1 1 auto;
    justify-content: center;
    gap: clamp(14px, 1.65vw, 24px);
    min-width: 0;
  }
  .nav__link {
    white-space: nowrap;
    letter-spacing: .06em;
  }
  .nav__cta {
    flex: 0 0 auto;
    margin-left: 0;
  }
}
.section__title,
.svc h3,
.metric__value { color: var(--navy); }
.btn--dark,
.ctaband__inner { background: linear-gradient(135deg, #06317a 0%, #0d4fb3 100%); }
.hero h1 {
  color: var(--navy);
  max-width: 10.5ch;
}
.hero__sub { color: #24405f; }
.metrics {
  border: 0;
  background: transparent;
  margin-top: -52px;
  position: relative;
  z-index: 2;
}
.metrics__grid {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(8, 42, 99, .12);
  overflow: hidden;
}
.metric__ico { color: var(--blue); width: 34px; height: 34px; }
.services { background: #fff; }
.services .section__head { margin-bottom: 26px; }
.services__grid { gap: 18px; }
.svc {
  min-height: 320px;
  border-radius: 8px;
  border-color: #d9e5f4;
  box-shadow: 0 14px 30px rgba(8, 42, 99, .07);
  padding: 36px 24px 28px;
}
.svc__ico {
  width: 66px;
  height: 66px;
  border-radius: 0;
  background: transparent;
  color: var(--blue);
  margin-bottom: 12px;
}
.svc:nth-child(2) .svc__ico,
.svc:nth-child(4) .svc__ico { color: var(--orange); }
.svc__ico svg { width: 58px; height: 58px; }
.svc h3 {
  font-size: 21px;
  line-height: 1.05;
  min-height: 46px;
}
.svc p { color: #24405f; line-height: 1.65; }
.diff {
  background: #fff;
  padding-block: 32px 54px;
}
.diff__grid {
  display: grid;
  grid-template-columns: minmax(300px, .76fr) minmax(0, 1.24fr);
  gap: 0;
  align-items: stretch;
  background: linear-gradient(90deg, #f2f8ff 0%, #f8fbff 38%, #e8f2ff 100%);
  border: 1px solid #dce9f7;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 42px rgba(8, 42, 99, .10);
  padding-inline: 0;
}
.diff__copy {
  padding: 56px 48px;
  align-self: stretch;
}
.diff__copy .section__title {
  text-align: left;
  max-width: none;
  margin-top: 14px;
}
.diff__visual {
  position: relative;
  min-height: 560px;
}
.diff__img {
  position: absolute;
  inset: 0;
  min-height: 100%;
  border-radius: 0;
  box-shadow: none;
  background:
    linear-gradient(90deg, rgba(242,248,255,.05) 0%, rgba(242,248,255,.03) 46%, rgba(242,248,255,.24) 100%),
    url("../images/chess-piece-light.png?v=20260710-restored") center / cover !important;
}
.diff__cards {
  position: absolute;
  z-index: 2;
  right: 28px;
  top: 22px;
  bottom: 22px;
  width: min(340px, calc(100% - 56px));
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: 12px;
}
.diff__cards .minicard {
  flex: 1 1 0;
  min-height: 0;
  padding: 13px 14px;
  gap: 10px;
  border-radius: 8px;
  border-color: rgba(219,231,245,.92);
  background: rgba(255,255,255,.96);
  box-shadow: 0 0 0 1px rgba(255,255,255,.75), 0 14px 34px rgba(8, 42, 99, .16);
  backdrop-filter: blur(8px);
}
.diff__cards .minicard__ico {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--blue);
  border: 1px solid #d9e7f8;
}
.diff__cards .minicard__ico svg { width: 21px; height: 21px; }
.diff__cards .minicard h4 { color: var(--navy); font-size: 13px; line-height: 1.15; }
.diff__cards .minicard p { color: #24405f; font-size: 11px; line-height: 1.28; }
.logowall {
  border-top: 1px solid #dbe7f5;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}
.logowall__label {
  color: var(--blue);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .13em;
  margin-bottom: 34px;
}
.logowall__row {
  gap: 22px 48px;
  justify-content: space-between;
}
.logowall__item {
  color: #667387;
  opacity: 1;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}
.logowall__item small {
  display: block;
  font-family: "Geist", sans-serif;
  font-size: .48em;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-top: 3px;
}
.logowall__item--bidvest { font-style: italic; }
.logowall__item--foschini {
  font-family: Georgia, serif;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.logowall__item--spar { font-weight: 900; }
@media (max-width: 900px) {
  .diff__grid { grid-template-columns: 1fr; }
  .diff__copy { padding: 38px 28px 28px; }
  .diff__copy .section__title { max-width: none; }
  .diff__visual { min-height: 760px; }
  .diff__cards { right: 22px; top: 22px; bottom: 22px; width: min(360px, calc(100% - 44px)); }
  .logowall__row { justify-content: center; }
}
@media (max-width: 640px) {
  .brand__mark--official {
    width: 44px;
    height: 52px;
  }
  .footer .brand__mark--official {
    width: 50px;
    height: 60px;
  }
  .metrics { margin-top: 0; }
  .diff__visual { min-height: auto; }
  .diff__cards {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    padding: 260px 18px 18px;
    gap: 12px;
  }
  .diff__cards .minicard { flex: 0 0 auto; min-height: 0; padding: 14px; }
  .diff__cards .minicard p { font-size: 11.5px; line-height: 1.34; }
  .diff__img { background-position: 50% 20% !important; }
  .logowall__item { font-size: 18px; }
}
/* HOME FRONTPAGE REFERENCE END */

/* ---------- Reveal animation (graceful: visible by default, hidden only when JS is on) ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.confirm-note { font-family: "Geist", monospace; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  :root { --section-gap: 64px; }
  .nav__links { position: fixed; inset: 72px 0 auto 0; background: rgba(249,250,251,.98); backdrop-filter: blur(12px); flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px var(--gutter) 26px; border-bottom: 1px solid var(--border); transform: translateY(-120%); transition: transform 0.25s var(--ease); box-shadow: var(--shadow-soft); }
  .nav__links[data-open="true"] { transform: translateY(0); }
  .nav__link { padding: 10px 0; font-size: 14px; }
  .nav__cta { margin: 8px 0 0; }
  .theme-toggle { margin-top: 8px; }
  .nav__toggle { display: block; }
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__visual { min-height: 320px; }
  .media-row, .media-row--flip { grid-template-columns: 1fr; gap: 26px; margin-bottom: 56px; }
  .media-row--flip .media-image { order: 2; }
  .media-image { min-height: 250px; }
  .metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(3) { border-left: 0; }
  .services__grid, .services__grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diff__grid { grid-template-columns: 1fr; }
  .ind__grid { grid-template-columns: repeat(4, 1fr); }
  .tw__grid, .cases__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pagehero--services::after,
  .pagehero--investigations::after { display: none; }
  .services__grid, .services__grid.cols-3 { grid-template-columns: 1fr; }
  .ind__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .ctaband__inner { flex-direction: column; align-items: flex-start; padding: 32px 26px; }
  .metric { padding: 22px var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Leadership compact grid + profile modal (About) ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 920px; margin-inline: auto; }
.team-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 0 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); cursor: pointer; transition: transform 0.18s var(--ease), box-shadow 0.2s; font-family: inherit; text-align: center; }
.team-card:hover, .team-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--blue); }
.team-card__photo { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(180deg, #eef4fb 0%, #f9fafb 100%); margin-bottom: 12px; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.team-card__name { font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 17px; color: var(--navy); padding-inline: 10px; }
.team-card__role { font-family: "Geist", "Inter", ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-inline: 10px; }
.team-card__hint { font-size: 11.5px; font-weight: 600; color: var(--blue); margin-top: 4px; }
.team-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px; }
.team-modal[hidden] { display: none; }
.team-modal__backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.55); }
.team-modal__panel { position: relative; z-index: 1; width: min(820px, 100%); max-height: 86vh; overflow: auto; background: #fff; border-radius: 16px; box-shadow: var(--shadow-soft); padding: 30px; }
.team-modal__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--navy); }
.team-modal__close:hover, .team-modal__close:focus-visible { background: var(--surface-2); }
.team-modal__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; align-items: start; }
.team-modal__photo { border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #eef4fb, #f9fafb); margin: 0; }
.team-modal__photo img { width: 100%; display: block; }
.team-modal__info h3 { font-size: 24px; }
.team-modal__role { font-family: "Geist", "Inter", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin: 4px 0 12px; }
.team-modal__info p { font-size: 14.5px; color: var(--navy-700); margin-bottom: 10px; line-height: 1.6; }
.team-modal__info blockquote { font-family: "Hanken Grotesk", sans-serif; font-weight: 700; color: var(--blue); margin: 12px 0; }
.team-modal__facts { list-style: none; margin-top: 16px; display: grid; gap: 7px; font-size: 13.5px; color: var(--navy-700); padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.team-modal__facts strong { color: var(--navy); margin-right: 8px; }
.team-modal__facts a { color: var(--blue); }
@media (max-width: 760px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .team-modal { padding: 12px; }
  .team-modal__panel { padding: 22px; }
  .team-modal__grid { grid-template-columns: 1fr; }
  .team-modal__photo { max-width: 220px; margin-inline: auto; }
}

/* ---------- Full-picture page heroes ("* Section Hero" assets; the ENTIRE image always visible) ---------- */
.pagehero--picture { position: relative; padding: 0; border-bottom: 1px solid var(--border); background: var(--navy); overflow: hidden; }
.pagehero__media { aspect-ratio: 1693 / 929; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.pagehero__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(90deg, rgba(15,23,42,.78) 0%, rgba(15,23,42,.42) 46%, rgba(15,23,42,.05) 72%); }
.pagehero--picture .crumb, .pagehero--picture .crumb a { color: rgba(255,255,255,.62); }
.pagehero--picture h1 { color: #fff; }
.pagehero--picture p { color: rgba(255,255,255,.82); }
.pagehero--picture .eyebrow { color: var(--orange); }

/* ===== Hero glass panel + the cascade fix (added 2026-07-15, session 41) =====

   THE BUG the user reported ("in light mode the descriptions are almost invisible; in dark
   mode they are a bit brighter"): `.pagehero p { color: var(--muted) }` (further down this
   file) and `.pagehero--dark p { color: rgba(255,255,255,.78) }` have the SAME specificity
   (0,1,1) — so the LATER rule wins and paints --muted (#536884) on the dark hero ≈ 2.0:1,
   failing WCAG AA. It changes with the theme because --muted is a themed token — which is
   exactly why the user saw it "brighter in dark mode". Their observation was the diagnosis.

   A glass panel ALONE would NOT have fixed it: the text would still resolve to --muted, just
   muted on glass. So this block does BOTH — wins the cascade (0,2,0 > 0,1,1) AND provides the
   glassmorphic panel the user asked for, around the ENTIRE wording section. */
.pagehero--picture .pagehero__glass {
  position: relative;
  align-self: start;
  max-width: 62ch;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(10,18,32,.52);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 18px 50px rgba(2,7,13,.34), inset 0 1px 0 rgba(255,255,255,.10);
}
/* specificity 0,2,0 — beats BOTH .pagehero p (0,1,1) and .pagehero--dark p (0,1,1) */
.pagehero__glass h1 { color: #ffffff; }
.pagehero__glass p { color: rgba(255,255,255,.92); margin-top: 14px; }
.pagehero__glass .crumb,
.pagehero__glass .crumb a { color: rgba(255,255,255,.78); }
.pagehero__glass .crumb a:hover { color: var(--orange); }
.pagehero__glass .eyebrow { color: var(--orange); }
/* the glass supplies its own contrast, so drop the wide scrim behind it */
.pagehero--picture.pagehero--glass .pagehero__overlay {
  background: linear-gradient(90deg, rgba(15,23,42,.42) 0%, rgba(15,23,42,.16) 58%, rgba(15,23,42,0) 82%);
}
@media (max-width: 760px) {
  .pagehero--picture .pagehero__glass {
    max-width: none;
    border: 0;
    border-radius: 0;
    background: rgba(6,26,50,.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    padding: 0;
  }
}
/* Safari <9 / no-backdrop-filter fallback: keep the panel opaque enough to stay readable */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pagehero--picture .pagehero__glass { background: rgba(10,18,32,.86); }
}
@media (max-width: 760px) {
  .pagehero__overlay { position: static; background: #061a32; padding-block: 34px 38px; }
}

/* ============================================================================
   Cinematic scroll-driven hero (Home) - 72-frame canvas scrub, sticky-pinned.
   The light-themed video plays full-bleed behind a left white scrim so the navy
   headline stays legible over the near-white left third. Desktop/tablet scrub;
   <=760px + prefers-reduced-motion fall back to the static poster (JS guards the
   frame fetch so mobile/reduced-motion never download the 72 frames).
   ========================================================================== */
.herocine { position: relative; height: 150vh; background: var(--surface); }
.herocine__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.herocine__stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; overflow: hidden; }
.herocine__stats { flex: 0 0 auto; width: 100%; position: relative; z-index: 4; padding-bottom: 30px; }
.herocine__poster,
.herocine__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.herocine__poster { object-fit: cover; object-position: 72% center; z-index: 0; }
.herocine__canvas { z-index: 1; display: block; }
.herocine__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(247,251,255,.97) 0%, rgba(247,251,255,.93) 28%, rgba(247,251,255,.62) 50%, rgba(247,251,255,.16) 74%, rgba(247,251,255,0) 100%),
    linear-gradient(180deg, rgba(247,251,255,.55) 0%, rgba(247,251,255,0) 24%, rgba(247,251,255,0) 72%, rgba(247,251,255,.5) 100%);
}
.herocine__inner { position: relative; z-index: 3; width: 100%; }
.herocine__copy { max-width: 620px; }
.herocine h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.03em; margin: 18px 0 0; color: var(--navy); max-width: 12ch; }
.herocine h1 .hl { color: var(--orange); }
.herocine__sub { color: #24405f; font-size: 18px; max-width: 46ch; margin: 22px 0 30px; }
.herocine__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.herocine__chips { display: flex; flex-wrap: wrap; gap: 22px; }
.herocine__cue {
  position: absolute; z-index: 3; bottom: 26px;
  left: calc((100% - min(100%, var(--container))) / 2 + var(--gutter));
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Geist", monospace; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.herocine__cue svg { width: 16px; height: 26px; color: var(--orange); }
.herocine__cuedot { animation: herocuebob 1.8s var(--ease) infinite; }
@keyframes herocuebob { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(6px); opacity: .25; } }
/* Metrics strip sits in normal flow after the pinned hero (was pulled up under the old static hero). */
.metrics { margin-top: 0; }
@media (max-width: 760px) {
  .herocine { height: auto; min-height: 0; }
  .herocine__pin { position: static; height: auto; min-height: 0; padding-block: 44px 40px; }
  .herocine__stage { min-height: 300px; }
  .herocine__stats { padding-bottom: 0; margin-top: 22px; }
  .herocine__canvas { display: none; }
  .herocine__scrim { background: linear-gradient(180deg, rgba(247,251,255,.94) 0%, rgba(247,251,255,.74) 30%, rgba(247,251,255,.34) 58%, rgba(247,251,255,.68) 100%); }
  .herocine__copy { max-width: 100%; }
  .herocine h1 { font-size: clamp(28px, 8vw, 36px); margin: 12px 0 0; max-width: 18ch; }
  .herocine__sub { font-size: 15px; margin: 14px 0 22px; }
  .herocine__cta { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 22px; }
  .herocine__cta .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .herocine__chips { gap: 14px; }
  .herocine__cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .herocine__cuedot { animation: none; }
}

/* ==========================================================================
   Trio Data dark mode reference system
   Source: Layout/Website Design/Website Frontpage Dark Mode.png
   ========================================================================== */
.theme-dark {
  color-scheme: dark;
  --navy: #f8fbff;
  --navy-700: #d6e4f4;
  --blue: #3f6fff;
  --blue-600: #2f57de;
  --orange: #5274ff;
  --orange-600: #3c5ee6;
  --surface: #02070d;
  --surface-2: #06121e;
  --white: #08131f;
  --border: #15304d;
  --muted: #a8b8cb;
  --muted-2: #70849d;
  --glass: rgba(7, 16, 28, .72);
  --shadow-soft: 0 24px 70px rgba(0, 0, 0, .48);
  --shadow-card: 0 18px 44px rgba(0, 0, 0, .34);
}
.theme-dark body {
  background: #02070d;
}
.theme-dark body {
  color: #eaf2ff;
  background:
    linear-gradient(180deg, #02070d 0%, #03101b 38%, #02070d 72%, #010509 100%);
}
.theme-dark .header {
  background: rgba(2, 7, 13, .84);
  border-bottom-color: rgba(63, 111, 255, .16);
  box-shadow: 0 1px 0 rgba(255,255,255,.02);
}
.theme-dark .brand__mark--official img {
  filter: drop-shadow(0 0 10px rgba(63, 111, 255, .45)) brightness(1.12);
}
.theme-dark .nav__link {
  color: rgba(234,242,255,.86);
}
.theme-dark .nav__link:hover,
.theme-dark .nav__link[aria-current="page"] {
  color: #7fa0ff;
}
.theme-dark .nav__link[aria-current="page"]::after {
  background: #3f6fff;
  box-shadow: 0 0 18px rgba(63,111,255,.82);
}
.theme-dark .nav__toggle span {
  background: #eaf2ff;
}
.theme-dark .nav__links[data-open="true"],
.theme-dark .nav__links {
  color: #eaf2ff;
}
.theme-dark .btn {
  border-radius: 4px;
}
.theme-dark .btn--primary,
.theme-dark .btn--dark {
  background: linear-gradient(135deg, #2563ff 0%, #6a4cff 100%);
  color: #ffffff;
  border-color: rgba(109, 137, 255, .68);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 14px 30px rgba(37,99,255,.22);
}
.theme-dark .btn--primary:hover,
.theme-dark .btn--dark:hover {
  background: linear-gradient(135deg, #315eff 0%, #785aff 100%);
}
.theme-dark .btn--ghost,
.theme-dark .btn--light {
  color: #eaf2ff;
  background: rgba(4, 12, 22, .42);
  border-color: rgba(63,111,255,.72);
}
.theme-dark .btn--ghost:hover,
.theme-dark .btn--light:hover {
  background: rgba(37,99,255,.13);
  border-color: #6f91ff;
}
.theme-dark .eyebrow {
  color: #4f7cff;
}
.theme-dark .eyebrow::before {
  background: #4f7cff;
  box-shadow: 0 0 16px rgba(79,124,255,.58);
}
.theme-dark .section {
  background: transparent;
}
.theme-dark .section__title,
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4 {
  color: #f8fbff;
}
.theme-dark .herocine {
  height: auto;
  min-height: 820px;
  background: #02070d;
}
.theme-dark .herocine__pin {
  position: relative;
  height: auto;
  min-height: 820px;
  overflow: hidden;
  background: #02070d;
}
.theme-dark .herocine__stage {
  min-height: 620px;
}
.theme-dark .herocine__poster {
  object-position: center center;
  filter: saturate(1.05) contrast(1.06);
}
.theme-dark .herocine--static .herocine__canvas {
  display: none !important;
}
.theme-dark .herocine__scrim {
  background:
    linear-gradient(90deg, rgba(2,7,13,.97) 0%, rgba(2,7,13,.9) 27%, rgba(2,7,13,.48) 54%, rgba(2,7,13,.12) 100%),
    linear-gradient(180deg, rgba(2,7,13,.72) 0%, rgba(2,7,13,.06) 38%, rgba(2,7,13,.68) 100%);
}
.theme-dark .herocine__copy {
  padding-top: 24px;
  max-width: 560px;
}
.theme-dark .herocine h1 {
  color: #ffffff;
  max-width: 9ch;
  font-size: clamp(48px, 7vw, 82px);
  letter-spacing: -0.035em;
  text-shadow: 0 18px 54px rgba(0,0,0,.45);
}
.theme-dark .herocine h1 .hl {
  color: #5274ff;
}
.theme-dark .herocine__sub {
  color: rgba(234,242,255,.84);
}
.theme-dark .herocine__chips .chip {
  color: rgba(234,242,255,.72);
}
.theme-dark .chip .dot {
  color: #5274ff;
}
.theme-dark .herocine__stats {
  padding-bottom: 42px;
}
.theme-dark .metrics {
  border-block-color: rgba(63,111,255,.17);
  background: transparent;
}
.theme-dark .metrics__grid {
  background: rgba(5, 14, 24, .72);
  border: 1px solid rgba(89,124,255,.24);
  box-shadow: 0 24px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
}
.theme-dark .metric {
  border-left-color: rgba(89,124,255,.18);
}
.theme-dark .metric__ico,
.theme-dark .metric__value {
  color: #f8fbff;
}
.theme-dark .metric__ico {
  color: #4f7cff;
  filter: drop-shadow(0 0 14px rgba(79,124,255,.44));
}
.theme-dark .metric__label {
  color: rgba(214,228,244,.74);
}
.theme-dark .card,
.theme-dark .svc,
.theme-dark .minicase,
.theme-dark .team-card,
.theme-dark .guide-card,
.theme-dark .threat-card,
.theme-dark .empower-item {
  background: linear-gradient(180deg, rgba(8,20,33,.74) 0%, rgba(5,14,24,.82) 100%);
  border-color: rgba(63,111,255,.34);
  box-shadow: 0 18px 44px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.035);
}
.theme-dark .card:hover {
  box-shadow: 0 22px 54px rgba(0,0,0,.44), 0 0 0 1px rgba(63,111,255,.32);
}
.theme-dark .services,
.theme-dark .industries,
.theme-dark .logowall,
.theme-dark .footer,
.theme-dark .testimonials {
  background: transparent;
}
.theme-dark .services__grid {
  gap: 20px;
}
.theme-dark .svc {
  border-radius: 8px;
}
.theme-dark .svc__ico,
.theme-dark .guide-card__icon {
  color: #4f7cff;
  background: rgba(63,111,255,.08);
}
.theme-dark .svc:nth-child(2) .svc__ico,
.theme-dark .svc:nth-child(4) .svc__ico {
  color: #5274ff;
}
.theme-dark .svc p,
.theme-dark .guide-card__desc,
.theme-dark .threat-card p,
.theme-dark .case p,
.theme-dark .quote p,
.theme-dark .team-card__role,
.theme-dark .contactcard span {
  color: rgba(214,228,244,.76);
}
.theme-dark .svc__more,
.theme-dark .guide-card__cta,
.theme-dark .team-card__hint {
  color: #6f91ff;
}
.theme-dark .diff {
  background: transparent;
}
.theme-dark .diff__grid {
  background: linear-gradient(90deg, rgba(5,15,26,.94) 0%, rgba(7,19,32,.84) 40%, rgba(3,10,18,.92) 100%);
  border-color: rgba(63,111,255,.18);
  box-shadow: 0 24px 80px rgba(0,0,0,.36);
}
.theme-dark .diff__copy {
  background: linear-gradient(90deg, rgba(3,10,18,.82), rgba(3,10,18,.36));
}
.theme-dark .diff__list li {
  color: rgba(234,242,255,.78);
}
.theme-dark .diff__list svg {
  color: #5274ff;
}
.theme-dark .diff__img {
  background:
    linear-gradient(90deg, rgba(2,7,13,.04) 0%, rgba(2,7,13,.08) 44%, rgba(2,7,13,.38) 100%),
    url("../images/chess-piece-dark.png?v=20260710-restored") center / cover !important;
}
.theme-dark .diff__cards .minicard,
.theme-dark .minicard {
  background: rgba(11, 22, 36, .72);
  border-color: rgba(111,145,255,.3);
  box-shadow: 0 16px 36px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(12px);
}
.theme-dark .diff__cards .minicard__ico,
.theme-dark .minicard__ico {
  color: #5274ff;
  background: rgba(63,111,255,.08);
  border-color: rgba(111,145,255,.3);
}
.theme-dark .diff__cards .minicard h4,
.theme-dark .minicard h4 {
  color: #f8fbff;
}
.theme-dark .diff__cards .minicard p,
.theme-dark .minicard p {
  color: rgba(214,228,244,.78);
}
.theme-dark .ind {
  border: 1px solid rgba(63,111,255,.22);
  box-shadow: 0 16px 40px rgba(0,0,0,.42);
}
.theme-dark .ind::before {
  background: linear-gradient(to top, rgba(1,5,9,.9), rgba(2,7,13,.26));
}
.theme-dark .logowall {
  border-top-color: rgba(63,111,255,.16);
}
.theme-dark .logowall__label {
  color: #4f7cff;
}
.theme-dark .logowall__item {
  color: rgba(234,242,255,.78);
}
.theme-dark .ctaband__inner {
  background:
    linear-gradient(135deg, rgba(11,54,160,.96) 0%, rgba(31,38,137,.96) 55%, rgba(75,46,181,.94) 100%);
  border: 1px solid rgba(111,145,255,.42);
  box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.theme-dark .footer {
  border-top-color: rgba(63,111,255,.14);
}
.theme-dark .footer__blurb,
.theme-dark .footer__bottom,
.theme-dark .footer__bottom a {
  color: rgba(214,228,244,.68);
}
.theme-dark .footer h4,
.theme-dark .footer ul a,
.theme-dark .footer__contact li {
  color: rgba(234,242,255,.78);
}
.theme-dark .footer__contact svg,
.theme-dark .footer__social a:hover {
  color: #6f91ff;
}
.theme-dark .footer__social a {
  border-color: rgba(63,111,255,.24);
  color: rgba(234,242,255,.68);
}
.theme-dark .footer__bottom {
  border-top-color: rgba(63,111,255,.14);
}
.theme-dark .reveal,
.theme-dark.js .reveal,
.theme-dark .reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
}
.theme-dark .team-modal__backdrop {
  background: rgba(0, 4, 10, .78);
  backdrop-filter: blur(8px);
}
.theme-dark .team-modal__panel {
  color: #eaf2ff;
  background: linear-gradient(180deg, rgba(8,20,33,.98) 0%, rgba(4,13,23,.98) 100%);
  border: 1px solid rgba(111,145,255,.34);
  box-shadow: 0 28px 90px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.055);
}
.theme-dark .team-modal__close {
  color: #f8fbff;
  background: rgba(63,111,255,.18);
  border-color: rgba(127,160,255,.78);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.36);
}
.theme-dark .team-modal__close:hover,
.theme-dark .team-modal__close:focus-visible {
  color: #ffffff;
  background: #3f6fff;
  border-color: #9db4ff;
}
.theme-dark .team-modal__info h3 {
  color: #ffffff;
}
.theme-dark .team-modal__info p {
  color: rgba(214,228,244,.84);
}
.theme-dark .team-modal__info blockquote {
  color: #89a6ff;
}
.theme-dark .team-modal__facts {
  color: rgba(214,228,244,.82);
  background: rgba(2,7,13,.66);
  border-color: rgba(111,145,255,.28);
}
.theme-dark .team-modal__facts strong {
  color: #ffffff;
}
.theme-dark .team-modal__facts a {
  color: #9db4ff;
}
.theme-dark .leadmagnet {
  background: linear-gradient(180deg, rgba(9,24,41,.96) 0%, rgba(5,15,26,.98) 100%);
  color: #eaf2ff;
  border: 1px solid rgba(111,145,255,.34);
  box-shadow: 0 24px 70px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05);
}
.theme-dark .leadmagnet .eyebrow {
  color: #7fa0ff;
}
.theme-dark .leadmagnet h3 {
  color: #ffffff;
}
.theme-dark .leadmagnet p,
.theme-dark .leadmagnet li {
  color: rgba(214,228,244,.84);
}
.theme-dark .leadmagnet li svg {
  color: #7fa0ff;
}
.theme-dark .field label {
  color: rgba(214,228,244,.72);
}
.theme-dark .field input,
.theme-dark .field select,
.theme-dark .field textarea {
  color: #eaf2ff;
  background: rgba(2,7,13,.58);
  border-color: rgba(111,145,255,.28);
}
.theme-dark .field input::placeholder,
.theme-dark .field textarea::placeholder {
  color: rgba(214,228,244,.46);
}
.theme-dark .field input:focus,
.theme-dark .field select:focus,
.theme-dark .field textarea:focus {
  border-color: #7fa0ff;
  box-shadow: 0 0 0 3px rgba(79,124,255,.18);
}
.theme-dark .career-openings {
  background: transparent;
}
.theme-dark .career-openings__status,
.theme-dark .career-job,
.theme-dark .career-application {
  color: #eaf2ff;
  background: linear-gradient(180deg, rgba(9,24,41,.96) 0%, rgba(5,15,26,.98) 100%);
  border-color: rgba(111,145,255,.34);
  box-shadow: 0 22px 64px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.theme-dark .career-openings__status {
  color: rgba(214,228,244,.82);
}
.theme-dark .career-openings__status.is-empty {
  color: rgba(214,228,244,.86);
  background: rgba(37,99,255,.09);
  border-color: rgba(111,145,255,.34);
}
.theme-dark .career-openings__status.is-error {
  color: #fecdd3;
  background: rgba(127,29,29,.28);
  border-color: rgba(248,113,113,.35);
}
.theme-dark .career-job h3,
.theme-dark .career-application__head h3 {
  color: #ffffff;
}
.theme-dark .career-job p,
.theme-dark .career-consent {
  color: rgba(214,228,244,.82);
}
.theme-dark .career-job__pill {
  color: #9db4ff;
  background: rgba(63,111,255,.1);
  border-color: rgba(111,145,255,.3);
}
.theme-dark .career-job__tag,
.theme-dark .career-application__close {
  color: rgba(234,242,255,.84);
  background: rgba(2,7,13,.5);
  border-color: rgba(111,145,255,.28);
}
.theme-dark .career-application__close:hover {
  color: #ffffff;
  border-color: #7fa0ff;
}
.theme-dark .metric-tile,
.theme-dark .article__cta {
  color: #eaf2ff;
  background: linear-gradient(180deg, rgba(9,24,41,.96) 0%, rgba(5,15,26,.98) 100%);
  border: 1px solid rgba(111,145,255,.34);
  box-shadow: 0 22px 64px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.theme-dark .metric-tile .v {
  color: #7fa0ff;
}
.theme-dark .metric-tile .l,
.theme-dark .article__cta p {
  color: rgba(214,228,244,.84);
}
.theme-dark .article__cta h2 {
  color: #ffffff;
}
.theme-dark .filter-tab.is-active,
.theme-dark .to-top {
  color: #ffffff;
  background: linear-gradient(135deg, #2563ff 0%, #6a4cff 100%);
}
.theme-dark .pagehero--picture {
  background: #02070d;
}
/* ===== Contact map — STRUCTURE + light appearance (added 2026-07-15, session 41) =====
   Every .contact-map rule used to be scoped to `.theme-dark` only, because the site
   defaulted to dark. In light mode the panel lost its grid, the frame lost min-height,
   and the iframe lost width/height — so the Google embed collapsed to the UA default
   (~300x150) and the map did not render. These rules are unprefixed so BOTH themes get
   the structure. Dark is unaffected: every `.theme-dark .contact-map*` rule below has
   higher specificity (0,2,0 > 0,1,0) and still wins for the properties it declares. */
.contact-map {
  padding-top: 0;
}
.contact-map__panel {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(320px, 1fr);
  gap: 22px;
  align-items: stretch;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.contact-map__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(10px, 2vw, 24px);
}
.contact-map__copy h2 {
  margin: 10px 0 12px;
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.08;
}
.contact-map__copy p {
  color: var(--muted);
  max-width: 44ch;
}
.contact-map__frame {
  position: relative;
  min-height: 360px;          /* without this the iframe collapses — the actual bug */
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.contact-map__frame iframe {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  pointer-events: none;       /* parity with dark: the overlay link owns the click */
}
.contact-map__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px;
  background: linear-gradient(180deg, rgba(8,42,99,0) 42%, rgba(8,42,99,.30) 100%);
}
.contact-map__link span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 4px;
  color: #ffffff;
  background: var(--blue);
  border: 1px solid var(--blue-600);
  box-shadow: var(--shadow-card);
  font-family: "Geist", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.contact-map__link:hover span,
.contact-map__link:focus-visible span {
  background: var(--blue-600);
}
@media (max-width: 760px) {
  .contact-map__panel {
    grid-template-columns: 1fr;
  }
  .contact-map__frame {
    min-height: 300px;
  }
}

.theme-dark .contact-map {
  padding-top: 0;
}
.theme-dark .contact-map__panel {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(320px, 1fr);
  gap: 22px;
  align-items: stretch;
  padding: 24px;
  border: 1px solid rgba(111,145,255,.28);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(8,20,33,.78) 0%, rgba(5,14,24,.94) 100%);
  box-shadow: 0 22px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04);
}
.theme-dark .contact-map__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(10px, 2vw, 24px);
}
.theme-dark .contact-map__copy h2 {
  margin: 10px 0 12px;
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.08;
}
.theme-dark .contact-map__copy p {
  color: rgba(214,228,244,.82);
  max-width: 44ch;
}
.theme-dark .contact-map__frame {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(111,145,255,.28);
  background:
    radial-gradient(circle at 64% 46%, rgba(63,111,255,.42) 0 6px, transparent 7px),
    linear-gradient(135deg, rgba(111,145,255,.22) 0 2px, transparent 2px 34%),
    linear-gradient(45deg, rgba(111,145,255,.13) 0 1px, transparent 1px 28%),
    #06121e;
}
.theme-dark .contact-map__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(111,145,255,.11) 18% 18.4%, transparent 18.4% 100%),
    linear-gradient(0deg, transparent 0 34%, rgba(111,145,255,.1) 34% 34.4%, transparent 34.4% 100%),
    radial-gradient(circle at 64% 46%, rgba(255,255,255,.9) 0 2px, rgba(63,111,255,.34) 3px 16px, transparent 17px);
  mix-blend-mode: screen;
  opacity: .72;
}
.theme-dark .contact-map__frame iframe {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  filter: grayscale(.18) contrast(1.06) brightness(.86);
  pointer-events: none;
}
.theme-dark .contact-map__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px;
  background: linear-gradient(180deg, rgba(2,7,13,0) 42%, rgba(2,7,13,.66) 100%);
}
.theme-dark .contact-map__link span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 4px;
  color: #ffffff;
  background: linear-gradient(135deg, #2563ff 0%, #6a4cff 100%);
  border: 1px solid rgba(157,180,255,.58);
  box-shadow: 0 14px 32px rgba(0,0,0,.34);
  font-family: "Geist", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.theme-dark .contact-map__link:hover span,
.theme-dark .contact-map__link:focus-visible span {
  background: linear-gradient(135deg, #315eff 0%, #785aff 100%);
}
@media (max-width: 960px) {
  .theme-dark .nav__links {
    background: rgba(2,7,13,.98);
    border-bottom-color: rgba(63,111,255,.18);
  }
}
@media (max-width: 760px) {
  .theme-dark .herocine,
  .theme-dark .herocine__pin {
    min-height: 0;
  }
  .theme-dark .herocine__stage {
    min-height: 620px;
  }
  .theme-dark .herocine__pin {
    padding-block: 38px 36px;
  }
  .theme-dark .herocine__poster {
    object-position: 63% center;
  }
  .theme-dark .herocine__scrim {
    background: linear-gradient(180deg, rgba(2,7,13,.96) 0%, rgba(2,7,13,.78) 34%, rgba(2,7,13,.34) 58%, rgba(2,7,13,.88) 100%);
  }
  .theme-dark .herocine h1 {
    max-width: 10ch;
  }
  .theme-dark .contact-map__panel {
    grid-template-columns: 1fr;
  }
  .theme-dark .contact-map__frame {
    min-height: 300px;
  }
}

/* ===== Blog article prose (added 2026-07-09, session 28) ===== */
.article { max-width: 74ch; margin-inline: auto; font-size: 18px; line-height: 1.75; color: #1f2937; }
.article > p, .article > ul, .article > ol, .article > figure, .article > blockquote { margin-bottom: 22px; }
.article h2 { font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 700; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.2; margin: 44px 0 14px; color: var(--navy); }
.article h3 { font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 600; font-size: 20px; margin: 30px 0 10px; color: var(--navy); }
.article a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.article a:hover { color: var(--orange); }
.article strong { color: var(--navy); }
.article ul, .article ol { padding-left: 22px; }
.article li { margin-bottom: 8px; }
.article blockquote { background: var(--surface); border-left: 4px solid var(--orange); border-radius: var(--radius); padding: 18px 20px; color: var(--navy); font-size: 17px; }
.article blockquote p { margin: 0; }
.article figure { margin: 26px 0; overflow-x: auto; }
.article table { width: 100%; border-collapse: collapse; font-size: 16px; }
.article th, .article td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.article thead th { background: var(--surface); font-family: "Geist", monospace; font-size: 13px; }
.article figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.article__meta { font-family: "Geist", monospace; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-top: 12px; }
.article__cta { margin-top: 40px; padding: 28px; background: linear-gradient(150deg, var(--navy), #1e293b); border-radius: 12px; color: #fff; }
.article__cta h2 { color: #fff; margin-top: 0; }
.article__cta p { color: rgba(255,255,255,.8); }

/* ===== HyperFrames Phase 3 rendered media (2026-07-10) ===== */
.phase3-media-section { background: var(--white); border-top: 1px solid var(--border); }
.phase3-media-section--soft { background: var(--surface); }
.phase3-media {
  width: min(1120px, 100%);
  margin-inline: auto;
  border: 1px solid rgba(37,99,235,.22);
  border-radius: var(--radius-lg);
  background: #111827;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.phase3-media--map { width: min(1040px, 100%); }
.phase3-media__video,
.phase3-media__fallback,
.article-stat-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}
.phase3-media__fallback { display: none; }
.article-stat-visual {
  margin: 30px 0;
  border: 1px solid rgba(37,99,235,.22);
  border-radius: var(--radius-lg);
  background: #111827;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.article-stat-visual img { border-radius: inherit; }
.theme-dark .phase3-media-section { background: var(--white); border-color: var(--border); }
.theme-dark .phase3-media-section--soft { background: var(--surface); }
.theme-dark .phase3-media,
.theme-dark .article-stat-visual {
  border-color: rgba(71,118,255,.36);
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
}
@media (max-width: 640px) {
  .phase3-media,
  .article-stat-visual { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .phase3-media__video { display: none; }
  .phase3-media__fallback { display: block; }
}

/* ===== Insights: Blog & Downloads redesign (2026-07-09, session 28) ===== */
.section__rule { display:block; width:56px; height:3px; background:var(--orange); border-radius:2px; margin:14px auto 0; }
.section__sub { margin:16px auto 0; color:var(--muted); font-size:16px; max-width:62ch; }
.section--tint { background:var(--surface); }
/* Latest Insights: filter bar */
.filterbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:36px; }
.filterbar__tabs { display:flex; flex-wrap:wrap; gap:8px; }
.filter-tab { font-family:"Inter",system-ui,sans-serif; font-size:14px; font-weight:500; color:var(--navy); background:transparent; border:0; padding:9px 18px; border-radius:8px; cursor:pointer; transition:background .2s var(--ease),color .2s var(--ease); }
.filter-tab:hover { background:var(--surface-2); }
.filter-tab.is-active { background:var(--navy); color:#fff; }
.filterbar__all { font-family:"Geist",monospace; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--orange); display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.filterbar__all svg { width:14px; height:14px; transition:transform .2s var(--ease); }
.filterbar__all:hover svg { transform:translateX(3px); }
/* Latest Insights: cards (4-up, full-bleed cover, tag+date row) */
#insights-grid { grid-template-columns:repeat(4,1fr); }
#insights-grid .case { overflow:hidden; }
#insights-grid .case > a:first-of-type { display:block; margin:-28px -28px 18px; }
.case__cover { width:100%; height:200px; object-fit:cover; display:block; }
.case__meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:2px; }
.case__date { font-family:"Geist",monospace; font-size:11px; color:var(--muted); white-space:nowrap; }
@media (max-width:1100px){ #insights-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ #insights-grid { grid-template-columns:1fr; } }
/* Official Guides & Documentation */
.guides__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.guide-card { display:flex; gap:16px; align-items:flex-start; padding:24px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); text-decoration:none; transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
.guide-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.guide-card__icon { flex:0 0 auto; width:52px; height:52px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; color:var(--navy); }
.guide-card__icon svg { width:26px; height:26px; }
.guide-card__body { display:flex; flex-direction:column; gap:8px; min-width:0; }
.guide-card__title { font-family:"Hanken Grotesk",system-ui,sans-serif; font-weight:600; font-size:16px; color:var(--navy); line-height:1.3; }
.guide-card__desc { font-size:14px; color:var(--muted); line-height:1.55; }
.guide-card__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
.guide-card__cta { font-family:"Geist",monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--orange); display:inline-flex; align-items:center; gap:6px; }
.guide-card__cta svg { width:13px; height:13px; transition:transform .2s var(--ease); }
.guide-card:hover .guide-card__cta svg { transform:translateX(3px); }
.filetag { font-family:"Geist",monospace; font-size:10px; letter-spacing:.05em; color:var(--muted); border:1px solid var(--border); border-radius:4px; padding:3px 7px; white-space:nowrap; align-self:center; }
@media (max-width:960px){ .guides__grid { grid-template-columns:1fr; } }
/* Stay informed newsletter band */
.newsletter { display:flex; align-items:center; gap:22px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 36px; }
.newsletter__icon { flex:0 0 auto; width:56px; height:56px; border-radius:50%; background:var(--white); display:grid; place-items:center; color:var(--navy); }
.newsletter__icon svg { width:28px; height:28px; }
.newsletter__text { flex:1 1 260px; }
.newsletter__text h2 { font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:22px; color:var(--navy); margin:0 0 4px; }
.newsletter__text p { font-size:14px; color:var(--muted); margin:0; max-width:46ch; }
.newsletter__form { display:flex; gap:10px; flex:1 1 320px; }
.newsletter__input { flex:1; min-width:0; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; font-size:14px; font-family:"Inter",system-ui,sans-serif; color:var(--navy); }
.newsletter__input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.newsletter__form .btn { white-space:nowrap; }
@media (max-width:640px){ .newsletter { padding:24px; } .newsletter__form { flex-direction:column; } .newsletter__form .btn { width:100%; } .filterbar { flex-direction:column; align-items:flex-start; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Responsive article tables: even columns + wrap so wide (4-col) tables fit mobile */
.article table { table-layout: fixed; }
.article th, .article td { overflow-wrap: anywhere; }
/* Back-to-top: easy return after jumping to any in-page section (2026-07-09) */
.to-top { position:fixed; right:20px; bottom:20px; width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; border:0; display:grid; place-items:center; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s; box-shadow:0 8px 20px rgba(8,42,99,.28); z-index:60; }
.to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover { background:var(--orange); }
.to-top svg { width:20px; height:20px; }
@media (max-width:640px){ .to-top { right:14px; bottom:14px; } }
/* Blog "Back to Insights" link (top of each article) */
.back-link { display:inline-flex; align-items:center; gap:6px; font-family:"Geist",monospace; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:22px; }
.back-link svg { width:14px; height:14px; }
.article a.back-link { color:var(--muted); text-decoration:none; }
.article a.back-link:hover { color:var(--orange); }
.article a.back-link:hover svg { transform:translateX(-3px); transition:transform .2s var(--ease); }

/* Final dark-mode contrast guardrails for reusable cards/pills appended after later feature CSS. */
.theme-dark .metric-tile,
.theme-dark .article__cta {
  color: #eaf2ff;
  background: linear-gradient(180deg, rgba(9,24,41,.96) 0%, rgba(5,15,26,.98) 100%);
  border: 1px solid rgba(111,145,255,.34);
  box-shadow: 0 22px 64px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.theme-dark .metric-tile .v,
.theme-dark .filterbar__all,
.theme-dark .guide-card__cta,
.theme-dark .case__tag,
.theme-dark .card .tag,
.theme-dark .minicard .tag,
.theme-dark .minicase .tag,
.theme-dark .case .tag,
.theme-dark .tag {
  color: #8fabff;
}
.theme-dark .metric-tile .l,
.theme-dark .article__cta p {
  color: rgba(214,228,244,.84);
}
.theme-dark .article__cta h2,
.theme-dark .newsletter__text h2 {
  color: #ffffff;
}
.theme-dark .article__cta .btn,
.theme-dark .article__cta a.btn,
.theme-dark .article a.btn {
  color: #ffffff;
  text-decoration: none;
}
.theme-dark .article {
  color: #d6e4f4;
}
.theme-dark .article > p,
.theme-dark .article li {
  color: #d6e4f4;
}
.theme-dark .article h2,
.theme-dark .article h3,
.theme-dark .article strong {
  color: #f8fbff;
}
.theme-dark .article a:not(.btn) {
  color: #9fb7ff;
}
.theme-dark .article a:not(.btn):hover,
.theme-dark .article a:not(.btn):focus-visible {
  color: #ffffff;
}
.theme-dark .article blockquote {
  background: rgba(8, 20, 33, .82);
  border-color: #6f91ff;
  color: #eaf2ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.theme-dark .article blockquote p {
  color: #eaf2ff;
}
.theme-dark .article table {
  color: #d6e4f4;
}
.theme-dark .article th,
.theme-dark .article td {
  border-color: rgba(111,145,255,.28);
}
.theme-dark .article thead th {
  background: rgba(9, 24, 41, .96);
  color: #f8fbff;
}
.theme-dark .article tbody tr:nth-child(even) {
  background: rgba(8, 20, 33, .42);
}
.theme-dark .article figcaption {
  color: #a8b8cb;
}
.theme-dark .article a.back-link {
  color: #a8b8cb;
}
.theme-dark .article__cta a:not(.btn) {
  color: #c6d4ff;
}
.theme-dark .article__cta a:not(.btn):hover,
.theme-dark .article__cta a:not(.btn):focus-visible {
  color: #ffffff;
}
.theme-dark .filter-tab.is-active,
.theme-dark .to-top,
.theme-dark .to-top:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #2563ff 0%, #6a4cff 100%);
}
.theme-dark .newsletter {
  background: linear-gradient(180deg, rgba(8,20,33,.74) 0%, rgba(5,14,24,.82) 100%);
  border-color: rgba(63,111,255,.34);
}
.theme-dark .newsletter__text p,
.theme-dark .filetag {
  color: rgba(214,228,244,.76);
}

/* Dark-mode hero keeps the same scroll-scrub mechanics, but points at dark video frames. */
.theme-dark .herocine {
  height: 150vh;
  min-height: 0;
  background: #02070d;
}
.theme-dark .herocine__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #02070d;
}
.theme-dark .herocine__stage {
  min-height: 0;
  flex: 1 1 auto;
}
.theme-dark .herocine__canvas {
  display: block;
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .theme-dark .herocine {
    height: auto;
    min-height: 0;
  }
  .theme-dark .herocine__pin {
    position: static;
    height: auto;
    min-height: 0;
    padding-block: 38px 36px;
  }
  .theme-dark .herocine__stage {
    min-height: 620px;
  }
  .theme-dark .herocine__canvas {
    display: none;
  }
}

/* ---------- Spotlight border cards (2026-07-10, interaction roadmap effect 1) ----------
   Cursor-tracked border glow on key cards (Vercel/Linear pattern). The ring only paints
   the border area via mask compositing; interior stays untouched for readability.
   Touch devices never see it (hover-none), reduced motion gets no tracking (JS guard). */
.spotlight { position: relative; }
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(37, 99, 235, .10), rgba(249, 115, 22, .05) 52%, transparent 75%);
  opacity: 0;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
    rgba(37, 99, 235, .9), rgba(249, 115, 22, .5) 48%, transparent 74%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}
@media (hover: hover) {
  .spotlight:hover::before, .spotlight:hover::after { opacity: 1; }
}
.card.spotlight::after { border-radius: var(--radius-lg); }
.minicard.spotlight::after { border-radius: 12px; }
.theme-dark .spotlight::before {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(82, 116, 255, .12), rgba(249, 115, 22, .05) 52%, transparent 75%);
}
.theme-dark .spotlight::after {
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
    rgba(112, 140, 255, .95), rgba(249, 115, 22, .45) 48%, transparent 74%);
}

/* ---------- Process journey draw-lines (2026-07-10, interaction roadmap effect 3) ----------
   The methodology steps (About, Undercover Audits) get circular number markers joined by a
   vertical rail whose segments draw in as each step reveals on scroll. Pure CSS transform
   keyed to the existing .reveal/.is-visible system: content never depends on it, resize-safe
   (no fixed coordinates), and without JS the rail renders fully drawn. */
.step { position: relative; }
.step__n {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1.5px solid rgba(249, 115, 22, .5);
  font-size: 12px;
  position: relative;
  z-index: 1;
}
.theme-dark .step__n { border-color: rgba(82, 116, 255, .55); }
.step::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -19px;
  bottom: -19px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(249, 115, 22, .8), rgba(37, 99, 235, .55));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s var(--ease) var(--draw-delay, .1s);
}
.theme-dark .step::before { background: linear-gradient(180deg, rgba(112, 140, 255, .85), rgba(63, 111, 255, .45)); }
.step--first::before { top: 34px; }
.step--last::before { bottom: calc(100% - 34px); }
.step--first.step--last::before { display: none; }
.step--draw::before { transform: scaleY(1); }
html:not(.js) .step::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .step::before { transition: none; } }

/* ---------- Sticky chess narrative (2026-07-10, interaction roadmap effect 4) ----------
   Desktop only (JS gates on min-width 901px + no reduced motion): the "Why Trio Data"
   section grows tall, its grid pins under the header, and the four intelligence cards
   ignite one by one as the visitor scrolls through. Without JS (or on mobile/tablet,
   or reduced motion) the class is absent and the section is exactly the original layout.
   All progress math lives in JS off live rects - nothing is cached, so window resizing
   mid-scroll stays correct; leaving the breakpoint removes the mode entirely. */
@media (min-width: 901px) {
  .diff--sticky { height: 240vh; }
  .diff--sticky > .container {
    position: sticky;
    top: 96px;
  }
  .diff--sticky .diff__cards .minicard {
    opacity: .38;
    transform: translateY(10px) scale(.985);
    transition: opacity .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
  }
  .diff--sticky .diff__cards .minicard.is-lit {
    opacity: 1;
    transform: none;
  }
  .diff--sticky .diff__cards .minicard.is-current {
    box-shadow: 0 0 0 1.5px rgba(249, 115, 22, .55), 0 18px 40px rgba(8, 42, 99, .22);
  }
  .theme-dark .diff--sticky .diff__cards .minicard.is-current {
    box-shadow: 0 0 0 1.5px rgba(112, 140, 255, .6), 0 18px 40px rgba(0, 0, 0, .45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .diff--sticky .diff__cards .minicard { transition: none; }
}


/* ---------- Morph transitions (2026-07-10, interaction roadmap effect 5) ----------
   Leadership modal: backdrop cross-fades while the panel FLIP-morphs from the clicked
   team card (JS drives the transform; these rules cover the backdrop and closing fade).
   Pages: native cross-document View Transitions as progressive enhancement - Chromium
   cross-fades page navigations (service card -> detail page); other browsers ignore it. */
.team-modal__backdrop { transition: opacity .28s ease; }
.team-modal.is-morphing .team-modal__backdrop { animation: modalBackdropIn .28s ease; }
.team-modal.is-closing .team-modal__backdrop { opacity: 0; }
@keyframes modalBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: .2s; }
  ::view-transition-new(root) { animation-duration: .26s; }
}

/* Enquiry failure — same shape as .form-status, red instead of green. */
.form-status--error {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fecaca;
}
.form-status--error a { color: #991b1b; text-decoration: underline; }

/* Honeypot. Off-screen rather than display:none — bots skip hidden inputs but
   still fill positioned ones, and screen readers skip it via aria-hidden. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Partner logo — SEESA (Labour Consultants), mirroring the live site's footer column.
   The SEESA asset is 100%-white artwork on transparency (verified: every opaque pixel is
   #ffffff), because the live site's footer is dark. THIS footer is #fff in light theme and
   transparent-over-dark in dark theme, so a bare white PNG is invisible in light mode. The
   chip gives it a guaranteed dark ground in BOTH themes, and matches how the live site
   already presents the mark (white on dark). SEESA's own colour logo is not a fix here: its
   wordmark is dark navy, so it would disappear on the dark theme instead — same bug mirrored. */
.footer__partner {
  display: inline-block;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 9px 13px;
  margin-bottom: 14px;
  line-height: 0;
  transition: transform 0.15s, border-color 0.15s;
}
.footer__partner:hover { transform: translateY(-1px); border-color: var(--orange); }
.footer__partner img { max-width: 100%; height: auto; display: block; }