/* ==========================================================================
   HIDDEN DOOR INVESTIGATION AGENCY
   Cinematic dark theme. Brand accents drawn from the logo.
   ========================================================================== */

:root {
  /* Ground */
  --bg:        #0a0b0d;
  --bg-2:      #0f1216;
  --surface:   #151a21;
  --surface-2: #1c222b;
  --line:      #272f3a;
  --line-2:    #3b4553;

  /* Text */
  --text:  #f7f9fb;
  --muted: #b8c1ce;
  --faint: #8d97a6;

  /* Brand — sampled from the Hidden Door mark */
  --red:   #dd2f3d;
  --red-2: #ef4553;
  --amber: #f1ad20;
  --green: #31a15f;
  --blue:  #2e7be0;

  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 20px 50px -25px rgba(0, 0, 0, .9);
  --shadow-up: 0 24px 60px -30px rgba(221, 47, 61, .45);

  --head: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;

  --nav-h: 74px;
  --tab-h: 62px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--red); color: #fff; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--red-2);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------- Typography */

h1, h2, h3, h4 {
  font-family: var(--head);
  color: #fff;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.5rem); font-weight: 800; letter-spacing: -.036em; }
h2 { font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.75rem); letter-spacing: -.032em; }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); line-height: 1.22; }
h4 { font-size: 1.05rem; line-height: 1.3; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--red);
  flex: none;
}
.eyebrow.is-plain::before { display: none; }

.lead {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  color: var(--muted);
  max-width: 62ch;
}
.muted { color: var(--muted); }
.accent { color: var(--red-2); }

/* ------------------------------------------------------------------ Layout */

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .container { padding: 0 18px; } }

.section { padding: 104px 0; position: relative; }
.section--tight { padding: 76px 0; }
.section--alt { background: var(--bg-2); }
@media (max-width: 860px) { .section { padding: 68px 0; } .section--tight { padding: 54px 0; } }

.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.is-center .eyebrow { justify-content: center; }
.section-head p { margin-top: 20px; }
@media (max-width: 860px) { .section-head { margin-bottom: 38px; } }

.split-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-bottom: 56px;
}
.split-head .section-head { margin-bottom: 0; }

/* ----------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--head); font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 17px 30px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--red); color: #fff; box-shadow: var(--shadow-up); }
.btn--primary:hover { background: var(--red-2); transform: translateY(-2px); }

.btn--ghost { border-color: var(--line-2); color: var(--text); background: rgba(255,255,255,.02); }
.btn--ghost:hover { border-color: var(--text); background: rgba(255,255,255,.06); }

.btn--light { background: var(--text); color: var(--bg); }
.btn--light:hover { background: #fff; transform: translateY(-2px); }

.btn--block { width: 100%; }
.btn--sm { padding: 12px 20px; font-size: 12.5px; }

.link-arrow {
  font-family: var(--head); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 9px; color: var(--text);
  transition: gap .25s ease, color .2s ease;
}
.link-arrow svg { width: 16px; height: 16px; }
.link-arrow:hover { gap: 15px; color: var(--red-2); }

/* ------------------------------------------------------------------ Header */

.header {
  position: fixed; inset: 0 0 auto; z-index: 900;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.header.is-solid {
  background: rgba(10, 11, 13, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand img { height: 38px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text b { font-family: var(--head); font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; }
.brand-text span {
  font-family: var(--head); font-size: 9.5px; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--faint); margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--head); font-size: 13.5px; font-weight: 500;
  letter-spacing: .03em; color: var(--muted);
  padding: 10px 14px; border-radius: var(--radius-sm);
  transition: color .2s ease, background-color .2s ease;
}
.nav a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav a.is-active { color: var(--text); }
.nav a.is-active::after {
  content: ""; display: block; height: 2px; width: 18px;
  background: var(--red); border-radius: 2px; margin: 5px auto -2px;
}

.header-cta { display: flex; align-items: center; gap: 12px; flex: none; }
.status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(49, 161, 95, .2);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

.header-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--head); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding: 8px 13px; border: 1px solid var(--line); border-radius: 100px;
}

@media (max-width: 1080px) { .nav, .header-live { display: none; } }

/* --------------------------------------------------------------------- Hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 56px) 0 104px;
  overflow: hidden;
  isolation: isolate;
}
.hero--inner { min-height: auto; padding: calc(var(--nav-h) + 96px) 0 84px; }

.hero-bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  filter: brightness(1.85) contrast(1.04) saturate(.92);
}

.hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(96deg, rgba(10,11,13,.94) 0%, rgba(10,11,13,.78) 32%, rgba(10,11,13,.24) 60%, rgba(10,11,13,.42) 100%),
    linear-gradient(to top, var(--bg) 1%, rgba(10,11,13,0) 46%);
}
/* Faint surveillance grid — texture, not decoration */
.hero-grid {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 90% 70% at 30% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 30% 45%, #000 20%, transparent 78%);
}

.hero-inner { max-width: 860px; position: relative; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--head); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text);
  background: rgba(255,255,255,.05); border: 1px solid var(--line-2);
  padding: 9px 16px; border-radius: 100px; margin-bottom: 28px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.hero h1 { margin-bottom: 26px; }
.hero h1 em { font-style: normal; color: var(--red-2); }

.hero .lead { font-size: clamp(1.05rem, .99rem + .4vw, 1.22rem); max-width: 58ch; color: #ccd3dd; line-height: 1.62; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 42px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1);
}
.hero-trust span {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--muted);
}
.hero-trust svg { width: 16px; height: 16px; color: var(--green); flex: none; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  font-family: var(--head); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: float 2.6s ease-in-out infinite;
}
.hero-scroll::after { content: ""; width: 1px; height: 30px; background: linear-gradient(var(--faint), transparent); }
@keyframes float { 0%,100% { transform: translate(-50%, 0) } 50% { transform: translate(-50%, 7px) } }
@media (max-width: 860px) { .hero-scroll { display: none; } }

/* --------------------------------------------------------------- Stats bar */

.stats {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-grid > div { padding: 34px 26px; border-right: 1px solid var(--line); }
.stats-grid > div:last-child { border-right: 0; }
.stats b {
  display: block; font-family: var(--head); font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 1.9vw, 3rem); line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.stats span { display: block; margin-top: 11px; font-size: 14.5px; color: var(--muted); }
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid > div { padding: 26px 18px; border-bottom: 1px solid var(--line); }
  .stats-grid > div:nth-child(2n) { border-right: 0; }
  .stats-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ------------------------------------------------------------------- Cards */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
  display: flex; flex-direction: column;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--accent-c, var(--red)); opacity: 0;
  transition: opacity .3s ease;
}
a.card:hover, .card.is-hover:hover {
  transform: translateY(-4px); border-color: var(--line-2); background: var(--surface-2);
}
a.card:hover::before { opacity: 1; }

.card-icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  display: grid; place-items: center; margin-bottom: 22px;
  background: color-mix(in srgb, var(--accent-c, var(--red)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-c, var(--red)) 34%, transparent);
  color: var(--accent-c, var(--red));
  flex: none;
}
.card-icon svg { width: 22px; height: 22px; }

.card h3 { margin-bottom: 12px; }
.card p { font-size: 15.5px; color: var(--muted); margin-bottom: 0; }
.card-foot {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--head); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.card-foot svg { width: 16px; height: 16px; transition: transform .25s ease; }
a.card:hover .card-foot svg { transform: translateX(4px); color: var(--red-2); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tag {
  font-family: var(--head); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 100px; padding: 6px 12px;
}

/* --------------------------------------------------------------- Checklist */

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.checklist li { display: flex; gap: 13px; font-size: 15.5px; color: var(--muted); }
.checklist svg { width: 19px; height: 19px; color: var(--green); flex: none; margin-top: 4px; }

/* ----------------------------------------------------------------- Process */

.steps { counter-reset: step; display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 30px; border-top: 2px solid var(--line); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--head); font-weight: 800; font-size: 13px; letter-spacing: .1em;
  color: var(--red-2); position: absolute; top: -11px; left: 0;
  background: var(--bg); padding-right: 12px;
}
.section--alt .step::before { background: var(--bg-2); }
.step h3 { margin-bottom: 11px; }
.step p { font-size: 15px; color: var(--muted); }

/* ------------------------------------------------------------------- Media */

.media-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
@media (max-width: 940px) { .media-split { grid-template-columns: 1fr; gap: 36px; } }
.media-frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,11,13,.6), transparent 55%);
  pointer-events: none;
}
.media-badge {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  background: rgba(10,11,13,.8); border: 1px solid var(--line-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-sm); padding: 14px 18px;
}
.media-badge b { display: block; font-family: var(--head); font-size: 15px; letter-spacing: -.01em; }
.media-badge span {
  display: block; margin-top: 4px; font-family: var(--head); font-size: 10.5px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}

/* -------------------------------------------------------------- Case files */

.case { display: flex; flex-direction: column; }
.case-ref {
  font-family: var(--head); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px;
}
.case-ref b { color: var(--accent-c, var(--red)); font-weight: 600; }
.case h3 { margin-bottom: 14px; }
.case-out {
  margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: rgba(49,161,95,.09); border: 1px solid rgba(49,161,95,.25);
  font-size: 14.5px; color: #bfe3cf;
}
.case-out b {
  display: block; font-family: var(--head); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: 5px;
}

/* --------------------------------------------------------------- Accordion */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0;
  position: relative; font-family: var(--head); font-weight: 600;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); letter-spacing: -.015em;
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red-2); }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; background: var(--muted);
  transition: transform .3s ease, opacity .3s ease;
}
.faq summary::before { width: 15px; height: 2px; margin-top: -1px; }
.faq summary::after  { width: 2px; height: 15px; margin-top: -7.5px; right: 12.5px; }
.faq details[open] summary::after { transform: rotate(90deg); opacity: 0; }
.faq details[open] summary { color: var(--text); }
.faq-body { padding: 0 60px 26px 0; color: var(--muted); font-size: 16px; }

/* -------------------------------------------------------------- CTA banner */

.cta-band { position: relative; overflow: hidden; background: var(--surface); border-top: 1px solid var(--line); }
.cta-band::before {
  content: ""; position: absolute; width: 620px; height: 620px; right: -180px; top: -290px;
  background: radial-gradient(circle, rgba(221,47,61,.16), transparent 66%);
  pointer-events: none;
}
.cta-inner {
  position: relative; display: grid; grid-template-columns: 1.5fr auto;
  gap: 44px; align-items: center; padding: 88px 0;
}
@media (max-width: 900px) { .cta-inner { grid-template-columns: 1fr; padding: 60px 0; } }
.cta-actions { display: flex; flex-direction: column; gap: 12px; min-width: 260px; }

/* ------------------------------------------------------------------ Footer */

.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 72px 0 0; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 44px; }
@media (max-width: 940px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

.footer h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 20px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer ul a { font-size: 15px; color: var(--muted); transition: color .2s ease; }
.footer ul a:hover { color: var(--text); }
.footer-about p { font-size: 15px; color: var(--muted); max-width: 40ch; margin-top: 20px; }
.footer-contact a {
  display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--muted);
  padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .2s ease, color .2s ease;
}
.footer-contact a:hover { border-color: var(--line-2); color: var(--text); }
.footer-contact svg { width: 17px; height: 17px; color: var(--red-2); flex: none; }

.disclaimer {
  margin-top: 56px; padding: 24px 0; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.7; color: var(--faint); max-width: 100ch;
}
.disclaimer b { color: var(--muted); }

.footer-bar {
  border-top: 1px solid var(--line); padding: 22px 0;
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between;
  align-items: center; font-size: 13.5px; color: var(--faint);
}
.footer-bar nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-bar a:hover { color: var(--text); }

/* ======================================================= MOBILE APP SHELL */

.app-bar, .tabbar, .sheet, .hero-float { display: none; }

@media (max-width: 1080px) {
  .header { display: none; }
  .hero-tag { font-size: 10.5px; letter-spacing: .13em; padding: 8px 14px; }

  .app-bar {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; inset: 0 0 auto; z-index: 900; height: 58px;
    padding: 0 16px; background: rgba(10,11,13,.72);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid transparent; transition: background-color .3s ease, border-color .3s ease;
  }
  .app-bar.is-solid { background: rgba(10,11,13,.93); border-bottom-color: var(--line); }
  .app-bar .brand img { height: 32px; }
  .app-bar .brand-text b { font-size: 14.5px; }
  .app-bar .brand-text span { font-size: 8.5px; }

  .app-bar-right { display: flex; align-items: center; gap: 9px; }
  .icon-btn {
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: rgba(255,255,255,.03); color: var(--text); cursor: pointer;
    transition: transform .15s ease, border-color .2s ease;
  }
  .icon-btn:active { transform: scale(.93); }
  .icon-btn svg { width: 19px; height: 19px; }
  .pill-live {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--head); font-size: 10.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--line); border-radius: 100px; padding: 8px 12px;
  }

  /* Reading progress — a hairline under the app bar */
  .app-progress { position: fixed; top: 58px; left: 0; height: 2px; z-index: 901; background: var(--red); width: 0; transition: width .1s linear; }

  body { padding-top: 58px; padding-bottom: calc(var(--tab-h) + 26px + env(safe-area-inset-bottom, 0px)); }
  .hero { min-height: calc(100svh - 58px); padding: 48px 0 56px; }
  .hero--inner { padding: 40px 0 48px; }
  html { scroll-padding-top: 74px; }

  /* Bottom tab bar */
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; inset: auto 0 0; z-index: 900;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(10,11,13,.94);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
  }
  .tabbar a,
  .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    position: relative; height: var(--tab-h); padding: 0; margin: 0;
    color: var(--faint); background: none; border: 0; font: inherit;
    cursor: pointer; transition: color .2s ease;
  }
  .tabbar span {
    font-family: var(--head); font-size: 9.5px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  }
  .tabbar svg { width: 20px; height: 20px; }
  .tabbar a::before {
    content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 2px;
    background: var(--red); border-radius: 0 0 3px 3px;
    transform: scaleX(0); transition: transform .28s cubic-bezier(.16,1,.3,1);
  }
  .tabbar a.is-active { color: var(--text); }
  .tabbar a.is-active::before { transform: scaleX(1); }
  .tabbar a:active, .tabbar button:active { background: rgba(255,255,255,.05); }

  /* Full-screen menu sheet */
  .sheet {
    display: block; position: fixed; inset: 0; z-index: 950;
    visibility: hidden; pointer-events: none;
  }
  .sheet.is-open { visibility: visible; pointer-events: auto; }
  .sheet-scrim {
    position: absolute; inset: 0; background: rgba(0,0,0,.6);
    opacity: 0; transition: opacity .3s ease;
  }
  .sheet.is-open .sheet-scrim { opacity: 1; }
  .sheet-panel {
    position: absolute; inset: 0 0 auto; max-height: 100svh; overflow-y: auto;
    background: var(--bg); border-bottom: 1px solid var(--line);
    transform: translateY(-100%); transition: transform .38s cubic-bezier(.16,1,.3,1);
    padding-bottom: 24px;
  }
  .sheet.is-open .sheet-panel { transform: translateY(0); }
  .sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    height: 58px; padding: 0 16px; border-bottom: 1px solid var(--line);
  }
  .sheet-head span {
    font-family: var(--head); font-size: 11px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
  }
  .sheet-links { display: grid; }
  .sheet-links a {
    display: flex; align-items: center; gap: 16px;
    padding: 17px 18px; border-bottom: 1px solid var(--line);
    transition: background-color .2s ease;
  }
  .sheet-links a:active { background: var(--surface); }
  .sheet-links i {
    font-family: var(--head); font-style: normal; font-size: 11px; font-weight: 700;
    letter-spacing: .1em; color: var(--faint); width: 20px; flex: none;
  }
  .sheet-links b { font-family: var(--head); font-size: 17px; font-weight: 600; letter-spacing: -.015em; display: block; }
  .sheet-links em { font-style: normal; font-size: 13.5px; color: var(--faint); display: block; margin-top: 2px; }
  .sheet-links a.is-active b { color: var(--red-2); }
  .sheet-foot { padding: 22px 18px 0; display: grid; gap: 11px; }
}

@media (min-width: 1081px) { .app-progress { display: none; } }

/* ------------------------------------------- Swipeable card rails (phones) */

.swipe-hint { display: none; }

@media (max-width: 760px) {
  /* Cards scroll left-to-right like an app, with the next card peeking in
     so the gesture is discoverable without instructions. */
  .rail-on-mobile {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    margin-inline: -18px;
    padding: 4px 18px 10px;
    scrollbar-width: none;
  }
  .rail-on-mobile::-webkit-scrollbar { display: none; }
  .rail-on-mobile > * {
    flex: 0 0 78%;
    max-width: 310px;
    scroll-snap-align: start;
  }
  /* The last card gets a right gutter so it can sit flush when snapped */
  .rail-on-mobile > *:last-child { margin-right: 6px; }

  .swipe-hint {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--head); font-size: 10.5px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
    margin-top: 14px;
  }
  .swipe-hint::after {
    content: ""; width: 26px; height: 1px; background: var(--line-2);
    position: relative; animation: nudge 1.9s ease-in-out infinite;
  }
  @keyframes nudge { 0%,100% { transform: translateX(0); opacity: .5 } 50% { transform: translateX(7px); opacity: 1 } }

  /* Steps read better as a rail too */
  .steps.rail-on-mobile > * { flex: 0 0 74%; }
}

/* ------------------------------------------------------------- Page header */

.page-head {
  border-bottom: 1px solid var(--line); position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(221,47,61,.20), transparent 58%),
    radial-gradient(90% 80% at 92% 8%, rgba(46,123,224,.13), transparent 62%),
    var(--bg-2);
}
.page-head::before {
  content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 80% 90% at 20% 40%, #000 10%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 20% 40%, #000 10%, transparent 76%);
}
.page-head .container { position: relative; padding-top: calc(var(--nav-h) + 84px); padding-bottom: 84px; }
.page-head h1 { max-width: 17ch; }
.page-head .lead { font-size: clamp(1.05rem, .98rem + .45vw, 1.28rem); }
@media (max-width: 1080px) {
  .page-head .container { padding-top: 44px; padding-bottom: 52px; }
  .page-head h1 { max-width: none; font-size: clamp(2.3rem, 1.7rem + 4.4vw, 3.2rem); }
}
.crumbs {
  font-family: var(--head); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 9px;
}
.crumbs a:hover { color: var(--text); }

/* ------------------------------------------------------------------ Prose */

.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin: 52px 0 16px; }
.prose h3 { margin: 34px 0 10px; color: var(--text); }
.prose p, .prose li { color: var(--muted); font-size: 16.5px; }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: 10px; margin: 18px 0; }
.prose li { position: relative; padding-left: 22px; }
.prose li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 8px; height: 2px; background: var(--red);
}
.prose > :first-child { margin-top: 0; }

.article-meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  font-family: var(--head); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}

.side-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
.with-side { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
@media (max-width: 1000px) { .with-side { grid-template-columns: 1fr; gap: 36px; } }
.sticky { position: sticky; top: calc(var(--nav-h) + 24px); }
@media (max-width: 1080px) { .sticky { position: static; } }

/* ------------------------------------------------------------------- Forms */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: block; }
.field.is-full { grid-column: 1 / -1; }
.field > span {
  display: block; font-family: var(--head); font-size: 11.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.field > span b { color: var(--red-2); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 15px 16px; color: var(--text);
  font-family: var(--body); font-size: 16px; line-height: 1.5;
  transition: border-color .2s ease, background-color .2s ease;
}
.field textarea { resize: vertical; min-height: 150px; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red); background: var(--surface);
}
.field .err { display: none; margin-top: 7px; font-size: 13.5px; color: var(--red-2); }
.field.has-error input, .field.has-error textarea { border-color: var(--red); }
.field.has-error .err { display: block; }

.check {
  display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); transition: border-color .2s ease;
}
.check:hover { border-color: var(--line-2); }
.check input { width: 20px; height: 20px; accent-color: var(--red); flex: none; margin: 2px 0 0; }
.check div { font-size: 15px; color: var(--muted); }
.check b { display: block; color: var(--text); font-weight: 500; font-family: var(--body); }

.form-note { margin-top: 18px; padding: 15px 17px; border-radius: var(--radius-sm); font-size: 15px; }
.form-note.is-ok  { background: rgba(49,161,95,.1); border: 1px solid rgba(49,161,95,.3); color: #bfe3cf; }
.form-note.is-bad { background: rgba(221,47,61,.1); border: 1px solid rgba(221,47,61,.3); color: #f4b8bd; }

/* ------------------------------------------------------------- Price cards */

.price { display: flex; flex-direction: column; }
.price.is-featured { border-color: rgba(221,47,61,.5); background: var(--surface-2); }
.price-badge {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--head); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--red); color: #fff; padding: 6px 11px; border-radius: 100px;
}
.price-amount {
  font-family: var(--head); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(2.1rem, 1.7rem + 1.6vw, 2.9rem); line-height: 1;
  margin: 20px 0 8px; font-variant-numeric: tabular-nums;
}
.price-amount sup { font-size: .5em; vertical-align: super; color: var(--faint); }
.price-unit { font-size: 14px; color: var(--faint); margin-bottom: 26px; }
.price .checklist { flex: 1; }
.price .btn { margin-top: 28px; }

/* ------------------------------------------------------------------ Reveal */

/* Scoped to .js so the page is fully visible if JavaScript never runs. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Utils */

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: 30px; }
.mt-4 { margin-top: 44px; }
.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;
}
.skip {
  position: fixed; top: -100px; left: 16px; z-index: 999;
  background: var(--red); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm);
  font-family: var(--head); font-size: 13px; font-weight: 600;
}
.skip:focus { top: 16px; }

/* ==========================================================================
   EXPRESSIVE LAYER
   Depth, motion and asymmetry — the things that stop a dark site reading flat.
   ========================================================================== */

/* --- Film grain over everything. Cheap, and it kills the flat-black look --- */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none; opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Hero: coloured light, not just darkness --- */
.hero-glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: min(1000px, 90vw); aspect-ratio: 1;
  left: -18%; top: -32%;
  background: radial-gradient(circle, rgba(221, 47, 61, .26), transparent 62%);
}
.hero-glow--2 {
  left: auto; right: -20%; top: auto; bottom: -40%;
  width: min(760px, 70vw);
  background: radial-gradient(circle, rgba(46, 123, 224, .18), transparent 64%);
}

/* Load-in: each headline line rises out of its own mask */
.line { display: block; overflow: hidden; }
.line > span { display: block; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .js .line > span {
    transform: translateY(110%);
    animation: lineUp .95s cubic-bezier(.16, 1, .3, 1) forwards;
  }
  .js .line:nth-child(2) > span { animation-delay: .1s; }
  .js .line:nth-child(3) > span { animation-delay: .2s; }
  .js .hero .lead,
  .js .hero-actions,
  .js .hero-trust,
  .js .hero-tag { animation: fadeUp .9s cubic-bezier(.16, 1, .3, 1) .34s backwards; }
}
@keyframes lineUp { to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Vertical rule of text down the hero edge — quiet, but it signals craft */
.hero-side {
  position: absolute; right: 34px; bottom: 120px; z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--head); font-size: 11px; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase; color: var(--faint);
  display: flex; align-items: center; gap: 16px;
}
.hero-side::before { content: ""; width: 1px; height: 60px; background: linear-gradient(var(--red), transparent); }
@media (max-width: 1200px) { .hero-side { display: none; } }

/* --- Infinite marquee --- */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-2); padding: 20px 0; overflow: hidden;
  --mq-speed: 42s;
}
.marquee-track {
  display: flex; align-items: center; gap: 44px; width: max-content;
  animation: slide var(--mq-speed) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > * {
  font-family: var(--head); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(1.15rem, .9rem + 1.1vw, 1.9rem); white-space: nowrap;
  display: flex; align-items: center; gap: 44px;
}
.marquee-track b { color: #fff; font-weight: 800; }
.marquee-track i {
  font-style: normal; color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
}
.marquee-track u { text-decoration: none; color: var(--red); font-size: .5em; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* --- Bento grid: not every card is the same size --- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bento .span-2 { grid-column: span 2; }
.bento .row-2 { grid-row: span 2; }
/* The wide closing card lays its content out horizontally */
.bento > .span-2:not(.card--feature) { flex-direction: row; align-items: flex-start; gap: 26px; }
.bento > .span-2:not(.card--feature) .card-icon { margin-bottom: 0; }
.bento > .span-2:not(.card--feature) > div { flex: 1; }
@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .span-2 { grid-column: span 2; }
  .bento .row-2 { grid-row: auto; }
}
@media (max-width: 680px) {
  .bento { grid-template-columns: 1fr; }
  .bento .span-2 { grid-column: auto; }
  .bento > .span-2:not(.card--feature) { flex-direction: column; gap: 0; }
  .bento > .span-2:not(.card--feature) .card-icon { margin-bottom: 22px; }
}

/* Feature card with a photo behind it */
.card--feature {
  position: relative; min-height: 300px; justify-content: flex-end;
  border-color: var(--line-2);
}
.card--feature .card-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.card--feature .card-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.5) saturate(.85);
  transform: scale(1.02); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.card--feature:hover .card-bg img { transform: scale(1.09); }
.card--feature .card-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 11, 13, .96) 12%, rgba(10, 11, 13, .55) 62%, rgba(10, 11, 13, .35));
}
.card--feature > *:not(.card-bg) { position: relative; z-index: 1; }

/* Oversized outlined numeral, watermarked into the corner */
.card-num {
  position: absolute; top: 8px; right: 16px; z-index: 1;
  font-family: var(--head); font-weight: 800; font-size: 4.4rem; line-height: 1;
  letter-spacing: -.05em; color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  transition: -webkit-text-stroke-color .35s ease, opacity .35s ease;
  opacity: .8; pointer-events: none;
}
a.card:hover .card-num { -webkit-text-stroke-color: var(--accent-c, var(--red)); opacity: 1; }

/* Pointer-tracked glow inside cards */
a.card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--accent-c, var(--red)) 16%, transparent), transparent 62%);
  opacity: 0; transition: opacity .35s ease;
}
a.card:hover::after { opacity: 1; }
a.card > * { position: relative; z-index: 1; }

/* --- The colour break: one loud section against all that dark --- */
.band {
  position: relative; overflow: hidden;
  background: var(--red); color: #fff;
  padding: 96px 0;
}
.band::before {
  content: ""; position: absolute; inset: 0; opacity: .16;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size: 26px 26px;
  mask-image: linear-gradient(115deg, #000 8%, transparent 62%);
  -webkit-mask-image: linear-gradient(115deg, #000 8%, transparent 62%);
}
.band .container { position: relative; }
.band h2 { font-size: clamp(2.3rem, 1.3rem + 4.4vw, 5.25rem); color: #fff; }
.band .eyebrow { color: rgba(255, 255, 255, .72); }
.band .eyebrow::before { background: #fff; }
.band p { color: rgba(255, 255, 255, .88); }
.band .btn--light:hover { background: #fff; }
.band-grid {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: end;
}
@media (max-width: 900px) { .band { padding: 64px 0; } .band-grid { grid-template-columns: 1fr; gap: 32px; } }
.band-stats { display: grid; gap: 22px; }
.band-stats div { border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 14px; }
.band-stats b {
  display: block; font-family: var(--head); font-weight: 800;
  font-size: 2.4rem; line-height: 1; letter-spacing: -.03em;
}
.band-stats span { display: block; margin-top: 7px; font-size: 14.5px; color: rgba(255, 255, 255, .78); }

/* --- Process as a connected track rather than four loose boxes --- */
.track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 1px;
  background: linear-gradient(90deg, var(--red), var(--line) 55%, transparent);
}
.track-step { position: relative; padding-top: 62px; }
.track-step::before {
  content: ""; position: absolute; top: 14px; left: 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-2);
  transition: border-color .3s ease, background-color .3s ease;
}
.section--alt .track-step::before { background: var(--bg-2); }
.track-step.is-in::before { border-color: var(--red); background: var(--red); }
.track-step em {
  position: absolute; top: 12px; left: 30px; font-style: normal;
  font-family: var(--head); font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; color: var(--faint);
}
.track-step h3 { margin-bottom: 12px; }
.track-step p { font-size: 15px; color: var(--muted); }
@media (max-width: 1020px) { .track { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } }
@media (max-width: 620px)  {
  .track { grid-template-columns: 1fr; row-gap: 0; }
  .track::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto;
                   background: linear-gradient(180deg, var(--red), var(--line) 60%, transparent); }
  .track-step { padding: 0 0 34px 34px; }
  .track-step::before { top: 4px; }
  .track-step em { top: 2px; left: 34px; position: static; display: block; margin-bottom: 8px; }
}

/* --- Stat counters --- */
.stats b { color: #fff; }
.stats-grid > div { position: relative; overflow: hidden; }
.stats-grid > div::before {
  content: ""; position: absolute; left: 26px; top: 0; width: 26px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.stats-grid > div.is-in::before { transform: scaleX(1); }

/* --- Section heads with more presence --- */
.section-head h2 { max-width: 20ch; }
.section-head.is-center h2 { margin-inline: auto; }

/* --- Case cards get the same numeral treatment --- */
.case { position: relative; }
.case-num {
  position: absolute; bottom: 14px; right: 18px; z-index: 0;
  font-family: var(--head); font-weight: 800; font-size: 4.6rem; line-height: 1;
  letter-spacing: -.05em; opacity: .5;
  color: transparent; -webkit-text-stroke: 1px var(--line-2); pointer-events: none;
}
.case > *:not(.case-num) { position: relative; z-index: 1; }

/* --- Link underline that draws in --- */
.link-arrow { position: relative; }
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%;
  background: var(--red); transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- Buttons: a sweep on hover --- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary > * { position: relative; z-index: 1; }
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28), transparent 70%);
  transform: translateX(-120%); transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.btn--primary:hover::before { transform: translateX(120%); }

@media (max-width: 760px) {
  .hero-glow { top: -18%; left: -40%; }
  .card-num { font-size: 3.4rem; }
}

/* Rails must win over the bento/grid declarations defined above them. */
@media (max-width: 760px) {
  .bento.rail-on-mobile,
  .grid.rail-on-mobile,
  .steps.rail-on-mobile,
  .track.rail-on-mobile {
    display: flex;
    grid-template-columns: none;
  }
  .bento.rail-on-mobile > .span-2,
  .bento.rail-on-mobile > .row-2 { grid-column: auto; grid-row: auto; }
  .bento.rail-on-mobile > .card--feature { min-height: 340px; }
  .bento.rail-on-mobile > .span-2:not(.card--feature) { flex-direction: column; gap: 0; }
  .bento.rail-on-mobile > .span-2:not(.card--feature) .card-icon { margin-bottom: 22px; }
}

/* ==========================================================================
   MOBILE: make it feel like an app worth opening
   ========================================================================== */

@media (max-width: 1080px) {

  /* --- Hero: slow push-in on the photograph --- */
  @media (prefers-reduced-motion: no-preference) {
    .hero-bg img { animation: kenburns 26s ease-out both; transform-origin: 62% 55%; }
  }
  @keyframes kenburns {
    from { transform: scale(1.06); }
    to   { transform: scale(1.19); }
  }

  .hero { padding: 34px 0 96px; overflow: visible; }
  .hero-tag { margin-bottom: 20px; }
  .hero h1 { font-size: clamp(2.35rem, 1.75rem + 4.6vw, 3.4rem); letter-spacing: -.042em; margin-bottom: 20px; }
  .hero .lead { font-size: .99rem; line-height: 1.56; }
  .hero-actions { gap: 10px; margin-top: 28px; }
  .hero-actions .btn { width: 100%; }

  /* Trust markers become a scrolling strip rather than a wrapped list */
  .hero-trust {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0;
    margin: 26px -18px 0; padding: 18px 18px 0;
    border-top: 1px solid rgba(255,255,255,.12);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hero-trust::-webkit-scrollbar { display: none; }
  .hero-trust span { white-space: nowrap; padding-right: 22px; font-size: 13.5px; }

  /* Glass panel straddling the hero and the section beneath it */
  .hero-float {
    position: absolute; left: 18px; right: 18px; bottom: -42px; z-index: 5;
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: rgba(21, 26, 33, .72);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    box-shadow: 0 24px 60px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.3);
    overflow: hidden;
  }
  .hero-float a {
    padding: 15px 10px; text-align: center; color: var(--text);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    transition: background-color .2s ease;
  }
  .hero-float a + a { border-left: 1px solid rgba(255,255,255,.1); }
  .hero-float a:active { background: rgba(255,255,255,.07); }
  .hero-float svg { width: 21px; height: 21px; color: var(--red-2); }
  .hero-float a:nth-child(2) svg { color: var(--blue); }
  .hero-float a:nth-child(3) svg { color: var(--amber); }
  .hero-float span {
    font-family: var(--head); font-size: 10px; font-weight: 700;
    letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
  }
  .marquee { margin-top: 62px; }

  /* --- Bigger, more confident section type --- */
  .section-head h2 { max-width: 14ch; }
  .section-head p.lead { font-size: 1.02rem; }

  /* --- Raised primary action in the tab bar --- */
  .tabbar { grid-template-columns: 1fr 1fr 84px 1fr 1fr; overflow: visible; }
  .tab-fab {
    position: relative; display: flex; align-items: center; justify-content: center;
  }
  .tab-fab i {
    position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--red); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 12px 28px -8px rgba(221,47,61,.75), 0 0 0 6px var(--bg);
    transition: transform .2s ease, box-shadow .25s ease;
  }
  .tab-fab i svg { width: 24px; height: 24px; }
  .tab-fab:active i { transform: translateX(-50%) scale(.92); }
  .tab-fab span { margin-top: 30px; color: var(--red-2); }
  .tab-fab::before { display: none; }

  /* --- Card rails: the centred card is the one in focus --- */
  .rail-on-mobile > * { transition: opacity .3s ease, transform .3s ease; }
}

@supports (animation-timeline: view()) {
  @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .rail-on-mobile > * {
      animation: railFocus linear both;
      animation-timeline: view(inline);
      animation-range: entry 5% exit 95%;
    }
    @keyframes railFocus {
      0%          { opacity: .4; transform: scale(.93); }
      38%, 62%    { opacity: 1;  transform: scale(1); }
      100%        { opacity: .4; transform: scale(.93); }
    }
  }
}

/* --- The colour band deserves the same weight on a phone --- */
@media (max-width: 760px) {
  .band { padding: 72px 0; }
  .band h2 { font-size: clamp(2.6rem, 1.8rem + 7vw, 4rem); }
  .band-stats { grid-template-columns: 1fr; gap: 16px; }
  .band-stats b { font-size: 2rem; }
  .band .btn { width: 100%; }

  .cta-actions .btn { width: 100%; }
  .stats-grid > div::before { left: 18px; }
}

/* ==========================================================================
   HERO: layered composition, with the phone line as the loudest object
   ========================================================================== */

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 372px;
  gap: 56px;
  align-items: center;
}
@media (max-width: 1180px) { .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; } }
/* The trust strip scrolls, so it must not contribute its full width to the track */
.hero-inner, .hero-panel { min-width: 0; }

/* HUD corner brackets */
.hero-frame { position: absolute; inset: 92px 34px 60px; z-index: 1; pointer-events: none; }
.hero-frame i { position: absolute; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.22); }
.hero-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hero-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hero-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hero-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
@media (max-width: 1080px) { .hero-frame { display: none; } }

/* A slow sweep across the photograph — surveillance, not decoration */
.hero-scan {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.hero-scan::before {
  content: ""; position: absolute; left: 0; right: 0; height: 42%;
  background: linear-gradient(to bottom, transparent, rgba(221,47,61,.055) 45%, rgba(255,255,255,.045) 50%, transparent);
  animation: sweep 9s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes sweep { 0% { top: -45%; } 55%, 100% { top: 105%; } }
@media (prefers-reduced-motion: reduce) { .hero-scan { display: none; } }

/* --- The call panel --- */
.hero-panel { display: grid; gap: 14px; position: relative; z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-panel { animation: fadeUp 1s cubic-bezier(.16,1,.3,1) .5s backwards; }
}

.hero-call {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(28, 34, 43, .88), rgba(15, 18, 22, .92));
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px; padding: 24px;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .95);
}
.hero-call::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--amber), transparent);
}
.hero-call-top {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--head); font-size: 10.5px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
}

.hero-phone {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 0;
  font-family: var(--head); font-weight: 800; letter-spacing: -.032em;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.05rem); line-height: 1.1;
  color: #fff; font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}
.hero-phone svg { width: 26px; height: 26px; color: var(--red-2); flex: none; }
.hero-phone:hover { color: var(--red-2); }

.hero-call-note {
  margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted);
}
.hero-call-alt {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.11);
}
.hero-call-alt a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 8px; border: 1px solid var(--line-2); border-radius: 9px;
  font-family: var(--head); font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; color: var(--muted);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.hero-call-alt a:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.06); }
.hero-call-alt svg { width: 15px; height: 15px; flex: none; }

.hero-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hero-tiles div {
  background: rgba(21, 26, 33, .7); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 11px; padding: 15px 10px; text-align: center;
}
.hero-tiles b {
  display: block; font-family: var(--head); font-weight: 800; color: #fff;
  font-size: 1.45rem; line-height: 1; letter-spacing: -.03em;
}
.hero-tiles span {
  display: block; margin-top: 7px; font-family: var(--head); font-size: 9.5px;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

.hero-note {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55; color: var(--faint);
  padding: 2px 4px;
}
.hero-note-k { color: var(--green); flex: none; }
.hero-note-k svg { width: 16px; height: 16px; }

/* --- Phone in the header --- */
.header-phone {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border: 1px solid var(--line-2); border-radius: 100px;
  font-family: var(--head); font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  color: #fff; font-variant-numeric: tabular-nums;
  transition: border-color .2s ease, background-color .2s ease;
}
.header-phone svg { width: 15px; height: 15px; color: var(--red-2); }
.header-phone:hover { border-color: var(--red); background: rgba(221,47,61,.12); }
@media (max-width: 1180px) { .header-phone span { display: none; } }
@media (max-width: 1080px) { .header-phone { display: none; } }

.icon-btn--call { border-color: rgba(221,47,61,.5); color: var(--red-2); background: rgba(221,47,61,.12); }

/* --- Phone panel on phones --- */
@media (max-width: 1180px) {
  .hero-panel { max-width: 520px; }
  .hero-note { display: none; }
}
@media (max-width: 1080px) {
  .hero-layout { gap: 26px; }
  .hero-panel { max-width: none; gap: 12px; }
  .hero-call { padding: 20px; border-radius: 14px; }
  .hero-phone { font-size: 1.75rem; }
  .hero-tiles { gap: 8px; }
  .hero-tiles div { padding: 13px 8px; }
  .hero-tiles b { font-size: 1.28rem; }
  /* The hero already carries a call action, so the float leads with Telegram */
  .hero { padding-bottom: 104px; }
}

/* On a phone the number is the fastest route to us, so it leads. */
.btn--call { display: none; }

@media (max-width: 1080px) {
  .btn--call {
    display: inline-flex;
    font-size: 15px; letter-spacing: -.01em; text-transform: none;
    font-weight: 700; font-variant-numeric: tabular-nums; padding: 18px 24px;
  }
  .btn--call svg { width: 19px; height: 19px; }
  .btn--consult { background: transparent; color: var(--text); border-color: var(--line-2); box-shadow: none; }
  .btn--consult:hover { background: rgba(255,255,255,.06); }
  .btn--explore { display: none; }

  .hero { padding: 26px 0 100px; }
  .hero-tag { margin-bottom: 16px; }
  .hero h1 { margin-bottom: 18px; }
  .hero .lead { font-size: .96rem; line-height: 1.55; }
  .hero-actions { margin-top: 24px; }
  .hero-trust { margin-top: 22px; padding-top: 16px; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 2.2rem; }
  .hero .lead { font-size: .93rem; }
}

/* The glass call card is desktop-only — on a phone the red call button and the
   floating action bar already cover it, and repeating the number reads as clutter. */
@media (max-width: 1080px) {
  .hero-call { display: none; }
  .hero-panel { gap: 10px; }
  .hero-tiles { margin-top: 4px; }
}

/* ==========================================================================
   HERO: the torch, the redaction, and the door
   The agency is called Hidden Door and it works in the dark. The hero does
   both of those things literally rather than describing them.
   ========================================================================== */

/* Animatable custom properties so the torch eases instead of snapping */
@property --tx { syntax: "<length-percentage>"; inherits: true; initial-value: 62%; }
@property --ty { syntax: "<length-percentage>"; inherits: true; initial-value: 48%; }

.hero { --tx: 68%; --ty: 46%; --px: 0; --py: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero { transition: --tx .4s cubic-bezier(.22,1,.36,1), --ty .4s cubic-bezier(.22,1,.36,1); }
}

.hero-bg > div { position: absolute; inset: 0; pointer-events: none; }

/* Everything outside the beam is held back */
.hero-dim {
  background: rgba(5, 6, 8, .46);
  -webkit-mask-image: radial-gradient(circle 360px at var(--tx) var(--ty), transparent 2%, #000 74%);
          mask-image: radial-gradient(circle 360px at var(--tx) var(--ty), transparent 2%, #000 74%);
}

/* …and what the beam lands on warms up */
.hero-torch {
  mix-blend-mode: screen;
  background:
    radial-gradient(circle 320px at var(--tx) var(--ty), rgba(255, 214, 162, .22), transparent 74%),
    radial-gradient(circle 130px at var(--tx) var(--ty), rgba(255, 240, 214, .16), transparent 78%);
}

/* Parallax: the photograph lags behind the pointer */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-bg img {
    transform: scale(1.055) translate3d(calc(var(--px) * -14px), calc(var(--py) * -14px), 0);
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
  }
  .hero-grid,
  .hero-frame {
    transform: translate3d(calc(var(--px) * 9px), calc(var(--py) * 9px), 0);
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
  }
}

/* On touch the beam sweeps the scene on its own */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .hero { animation: torchDrift 17s ease-in-out infinite alternate; }
  @keyframes torchDrift {
    0%   { --tx: 24%; --ty: 62%; }
    50%  { --tx: 76%; --ty: 40%; }
    100% { --tx: 40%; --ty: 70%; }
  }
  .hero-dim {
    -webkit-mask-image: radial-gradient(circle 210px at var(--tx) var(--ty), transparent 4%, #000 70%);
            mask-image: radial-gradient(circle 210px at var(--tx) var(--ty), transparent 4%, #000 70%);
  }
}

/* --- Redaction: the headline is declassified line by line --- */
.redacted .line { position: relative; }
.redacted .line::after {
  content: "";
  position: absolute; inset: .1em 0 .12em;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .redacted .line > span {
    opacity: 0; transform: none;
    animation: declassify 1.15s linear forwards;
  }
  .js .redacted .line::after { animation: redact 1.15s cubic-bezier(.65, 0, .35, 1) forwards; }
  .js .redacted .line:nth-child(2) > span,
  .js .redacted .line:nth-child(2)::after { animation-delay: .16s; }
  .js .redacted .line:nth-child(3) > span,
  .js .redacted .line:nth-child(3)::after { animation-delay: .32s; }
}
@keyframes redact {
  0%   { transform: scaleX(0); transform-origin: left; }
  42%  { transform: scaleX(1); transform-origin: left; }
  52%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes declassify {
  0%, 46%   { opacity: 0; }
  47%, 100% { opacity: 1; }
}

/* --- The door. Opens once, then gets out of the way. --- */
.door {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: none;
}
.door.is-playing { display: block; }
.door i {
  position: absolute; top: 0; bottom: 0; width: 50.2%;
  background: #07080a;
  animation: doorOpen 1.15s cubic-bezier(.76, 0, .24, 1) .12s forwards;
}
.door i:first-child { left: 0; transform-origin: left; }
.door i:last-child  { right: 0; animation-name: doorOpenRight; }
.door b {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom, transparent, var(--amber), var(--red), transparent);
  animation: seam 1.15s cubic-bezier(.76, 0, .24, 1) .12s forwards;
}
@keyframes doorOpen      { to { transform: translateX(-101%); } }
@keyframes doorOpenRight { to { transform: translateX(101%); } }
@keyframes seam {
  0%   { opacity: 0; transform: scaleY(.2); }
  22%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1) scaleX(14); }
}
@media (prefers-reduced-motion: reduce) { .door { display: none !important; } }

/* --- Leadership card: a supporting profile, not the page's subject --- */
.lead-card {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.lead-card-img { position: relative; min-height: 100%; }
.lead-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.lead-card-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(21, 26, 33, .9));
}
.lead-card-body { padding: 32px 34px; }
.lead-card-body h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -.03em; }
.lead-card-role {
  margin: 8px 0 18px; font-family: var(--head); font-size: 11.5px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--red-2);
}
.lead-card-body p { font-size: 15.5px; color: var(--muted); }
.lead-card .checklist li { font-size: 14.5px; }
.lead-card .checklist svg { color: var(--amber); }

@media (max-width: 860px) {
  .lead-card { grid-template-columns: 1fr; }
  .lead-card-img { height: 240px; }
  .lead-card-img img { object-position: center 18%; }
  .lead-card-img::after { background: linear-gradient(to bottom, transparent 40%, rgba(21, 26, 33, .95)); }
  .lead-card-body { padding: 24px 22px; }
}

.card h4 { color: #fff; }

/* ==========================================================================
   MOBILE HERO — an evidence photo you search with a torch
   The screen is dark on purpose. Drag a finger and the beam uncovers the
   scene underneath. Under it, the subject keeps getting declassified.
   ========================================================================== */

.hero-file { display: none; }

@media (max-width: 1080px) {

  /* Desktop's full-bleed backdrop steps aside — the card is the image now */
  .hero-bg, .hero-scrim, .hero-grid, .hero-scan, .hero-frame, .hero-side { display: none; }

  .hero {
    display: block;
    min-height: 0;
    padding: 12px 0 72px;
    overflow: visible;
    background:
      radial-gradient(120% 70% at 10% 0%, rgba(221, 47, 61, .17), transparent 60%),
      var(--bg);
  }
  .hero-glow, .hero-glow--2 { display: none; }
  .hero-layout { display: block; padding-top: 0; margin-top: 0; }
  .hero-inner { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .hero-inner::before { display: none; }

  /* ---------- The evidence card ---------- */
  .hero-file {
    display: block;
    margin: 0 0 16px;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    overflow: hidden;
    background: #0b0d10;
    box-shadow: 0 26px 56px -30px rgba(0, 0, 0, .95);
  }

  .hero-file-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 13px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
    font-family: var(--head); font-size: 9.5px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
  }
  .hero-file-bar span:last-child { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
  .hero-file-cue {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--text); letter-spacing: .1em;
  }
  .hero-file-cue svg { width: 13px; height: 13px; color: var(--amber); }
  @media (prefers-reduced-motion: no-preference) {
    .hero-file-cue svg { animation: cueNudge 2.4s ease-in-out infinite; }
    @keyframes cueNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
  }

  .hero-file-photo {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    touch-action: none;               /* the drag belongs to the torch, not the page */
    cursor: crosshair;
    --fx: 50%;
    --fy: 52%;
  }
  /* A 4x4 mirror-tiled grid, twice the frame in each direction. Panning it by
     any amount modulo two tiles leaves the visible window always covered, so
     the scene can be scanned without ever reaching an edge. */
  .hero-scene {
    position: absolute; top: 0; left: 0;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-auto-rows: 25%;
    width: 400%; height: 400%;
    transform-origin: 50% 50%;
    will-change: transform;
    backface-visibility: hidden;
  }
  .hero-scene img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
    filter: brightness(2.3) contrast(1.05) saturate(.88);
    display: block;
  }
  /* fxCR — C flips the column, R flips the row */
  .hero-scene .fx10 { transform: scaleX(-1); }
  .hero-scene .fx01 { transform: scaleY(-1); }
  .hero-scene .fx11 { transform: scale(-1, -1); }

  .hero-file-photo { perspective: 900px; }

  .hero-file-coords {
    position: absolute; right: 12px; bottom: 11px; z-index: 3;
    font-family: var(--head); font-size: 9px; font-weight: 700;
    letter-spacing: .14em; color: rgba(255, 255, 255, .5);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
    pointer-events: none;
  }

  /* Everything the beam is not on stays hidden */
  .hero-file-dim {
    position: absolute; inset: 0; pointer-events: none;
    background: #06070a;
    -webkit-mask-image: radial-gradient(circle 124px at var(--fx) var(--fy), transparent 8%, #000 78%);
            mask-image: radial-gradient(circle 124px at var(--fx) var(--fy), transparent 8%, #000 78%);
  }
  .hero-file-beam {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
    background:
      radial-gradient(circle 120px at var(--fx) var(--fy), rgba(255, 216, 168, .32), transparent 74%),
      radial-gradient(circle 40px at var(--fx) var(--fy), rgba(255, 244, 226, .26), transparent 80%);
  }
  /* The beam is driven frame-by-frame in JS: a custom property cannot be
     interpolated by CSS unless it is registered, and the hand-off between the
     idle sweep and the pointer needs to ease rather than snap. */

  /* Registration marks, like a print from an evidence bag */
  .hero-file-photo .tick {
    position: absolute; width: 14px; height: 14px; pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .34); z-index: 2;
  }
  .tick.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
  .tick.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
  .tick.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
  .tick.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

  /* ---------- Content below the card ---------- */
  .hero-tag {
    margin-bottom: 12px;
    background: rgba(221, 47, 61, .13);
    border-color: rgba(221, 47, 61, .34);
  }
  .hero h1 {
    font-size: clamp(2.05rem, 1.45rem + 4.4vw, 2.9rem);
    letter-spacing: -.045em; margin-bottom: 13px;
  }
  .hero .lead { font-size: .87rem; line-height: 1.48; color: #b6c0cd; }
  .hero-trust { display: none; }

  .hero-actions { margin-top: 16px; gap: 9px; }
  .btn--call {
    padding: 17px 22px; font-size: 1.08rem; font-weight: 800;
    letter-spacing: -.02em; border-radius: 12px;
    box-shadow: 0 16px 34px -14px rgba(221, 47, 61, .8);
  }
  .btn--call svg { width: 21px; height: 21px; }
  .btn--consult { padding: 15px 22px; border-radius: 12px; }

  .hero-panel { margin-inline: -18px; }
  .hero-tiles {
    grid-template-columns: repeat(3, 1fr); gap: 0; margin: 24px 0 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .hero-tiles div { background: none; border: 0; border-radius: 0; padding: 16px 8px; }
  .hero-tiles div + div { border-left: 1px solid var(--line); }
  .hero-tiles b { font-size: 1.5rem; }

  .hero-float {
    position: static; margin: 0; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; background: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .hero-float a { padding: 16px 10px; }
  .hero-float a + a { border-left: 1px solid var(--line); }
  .marquee { margin-top: 0; }
}

/* ---------- The subject keeps getting declassified ---------- */

.hero-rotator { display: none; }

@media (max-width: 1080px) {
  .hero-rotator {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px;
    margin: -2px 0 14px;
    font-family: var(--head); font-size: 11.5px; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
  }
  .hero-rotator-label { color: var(--faint); }

  .hero-rotator-slot {
    position: relative; display: inline-grid; vertical-align: bottom;
    padding: 3px 9px; border-radius: 3px;
    background: rgba(255, 255, 255, .05);
  }
  /* every option occupies the same cell, so the box never jumps */
  .hero-rotator-word {
    grid-area: 1 / 1; color: #fff; white-space: nowrap;
    visibility: hidden;
  }
  .hero-rotator-word.is-on { visibility: visible; }

  .hero-rotator-bar {
    position: absolute; inset: 0; border-radius: 3px;
    background: var(--red); transform-origin: left; transform: scaleX(0);
  }
  @media (prefers-reduced-motion: no-preference) {
    .js .hero-rotator-bar { animation: redactWord 3.2s cubic-bezier(.66, 0, .34, 1) infinite; }
    @keyframes redactWord {
      0%, 6%    { transform: scaleX(0); transform-origin: left; }
      17%, 23%  { transform: scaleX(1); transform-origin: left; }
      24%       { transform: scaleX(1); transform-origin: right; }
      38%, 100% { transform: scaleX(0); transform-origin: right; }
    }
  }
}

/* --- Coverage tiers: base, then country, then abroad --- */
.reach-list { display: grid; gap: 16px; }

.reach {
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .3s ease, transform .3s ease;
}
.reach:hover { border-color: var(--line-2); transform: translateY(-3px); }

.reach-mark {
  position: relative; display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-c) 22%, transparent), transparent 70%),
    var(--bg-2);
  border-right: 1px solid var(--line);
}
/* Concentric rings — the reach widens with each tier */
.reach-mark::before,
.reach-mark::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent-c) 42%, transparent);
}
.reach-mark::before { width: 56px; height: 56px; }
.reach-mark::after { width: 90px; height: 90px; opacity: .5; }
.reach-mark span {
  position: relative; z-index: 1;
  font-family: var(--head); font-weight: 800; font-size: 1.6rem;
  letter-spacing: -.03em; color: var(--accent-c);
  font-variant-numeric: tabular-nums;
}

.reach-body { padding: 28px 30px; }
.reach-body h3 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.75rem); letter-spacing: -.03em; }
.reach-body > p { font-size: 15.5px; color: var(--muted); max-width: 68ch; }

@media (max-width: 760px) {
  .reach { grid-template-columns: 1fr; }
  .reach-mark { height: 76px; border-right: 0; border-bottom: 1px solid var(--line); }
  .reach-mark::before { width: 42px; height: 42px; }
  .reach-mark::after { width: 68px; height: 68px; }
  .reach-body { padding: 22px 20px; }
}

.reach-facts { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.reach-facts li { font-size: 14.5px; }
.reach-facts svg { color: var(--accent-c); }