/* ============================================================
   Starling Intel :: style.css
   Palette: deep navy ladder (#0d1b2a → #1b273b → #3a495a)
            with parchment #d0c9b7 and taupe #99907d accents
   Type: Archivo (display, UI & text) · one variable family, weights 300-600
         Served from Google Fonts; system grotesques are the fallbacks in the stack.
   ============================================================ */

:root {
  --navy-950: #0a1420;
  --navy-900: #0d1b2a;
  --navy-800: #13212f;
  --navy-700: #1b273b;
  --navy-600: #243549;
  --steel: #3a495a;

  --parchment: #d0c9b7;
  --taupe: #99907d;
  /* Ember: reserved for the emergency channel. Nothing routine uses it. */
  --ember: #d4643a;
  --ember-bright: #ef8155;
  --ember-dim: rgba(212, 100, 58, 0.14);

  --text: #c3cedb;
  --text-bright: #f2f5f9;
  --text-dim: #8a9bb0;
  --line: rgba(195, 206, 219, 0.1);
  --line-strong: rgba(195, 206, 219, 0.22);

  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Archivo", "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --shadow-card: 0 1px 2px rgba(4, 10, 18, 0.5), 0 12px 32px -12px rgba(4, 10, 18, 0.55);
  --shadow-card-hover: 0 2px 4px rgba(4, 10, 18, 0.5), 0 24px 48px -16px rgba(4, 10, 18, 0.7);

  --container: 74rem;
  /* The header bar's side gutter. Shared by the desktop row and the mobile
     drawer so the brand and the drawer's links sit on the same line. */
  --nav-gutter: clamp(1.5rem, 3vw, 3rem);
  --section-pad: clamp(4.5rem, 10vw, 8.5rem);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--navy-900);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg {
  max-width: 100%;
  display: block;
}

a { color: inherit; }

::selection {
  background: var(--parchment);
  color: var(--navy-950);
}

:focus-visible {
  outline: 2px solid var(--parchment);
  outline-offset: 3px;
}

.container {
  width: min(100% - 3rem, var(--container));
  margin-inline: auto;
}

.container.narrow { max-width: 46rem; }

.section {
  position: relative;
  padding-block: var(--section-pad);
}

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

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: linear-gradient(to right, var(--taupe), transparent);
  flex-shrink: 0;
}

.section-title,
.page-title,
.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--text-bright);
  text-wrap: balance;
}

.section-title {
  font-size: clamp(2rem, 4.5vw, 3.3rem);
  margin-bottom: 1.5rem;
}

.section-lead {
  max-width: 44rem;
  font-size: 1.06rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 2rem;
}

.rule {
  border: none;
  border-top: 1px solid var(--line-strong);
  width: 4.5rem;
  margin: 0 0 2.5rem;
}

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

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2.1rem;
  border: 1px solid var(--parchment);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.btn-solid {
  background: linear-gradient(180deg, #ddd6c5, var(--parchment));
  color: var(--navy-950);
  box-shadow: 0 1px 2px rgba(4, 10, 18, 0.6), 0 8px 24px -8px rgba(208, 201, 183, 0.35);
}

.btn-solid:hover {
  background: linear-gradient(180deg, #e7e1d2, #d8d2c1);
  box-shadow: 0 2px 4px rgba(4, 10, 18, 0.6), 0 12px 32px -8px rgba(208, 201, 183, 0.45);
  transform: translateY(-1px);
}

.btn-ghost {
  background: rgba(13, 27, 42, 0.25);
  color: var(--text-bright);
  border-color: var(--line-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn-ghost:hover {
  border-color: var(--parchment);
  color: var(--parchment);
  background: rgba(208, 201, 183, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .btn-solid:hover { transform: none; }
}

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

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: 1.1rem;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.site-header.scrolled {
  background: rgba(10, 20, 32, 0.55);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line), 0 12px 32px -16px rgba(4, 10, 18, 0.8);
  padding-block: 0.75rem;
}

/* The bar runs wider than the 74rem body container on purpose: the brand sits
   out at the left edge and the links and CTAs at the right, rather than being
   boxed into the middle of a large screen. The 1.5rem floor on the gutter is
   what keeps the toggle aligned with the drawer items below it on phones. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: 120rem;
  margin-inline: auto;
  padding-inline: var(--nav-gutter);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.nav-mark {
  display: block;
  height: 2.2rem;
  width: auto;
  flex-shrink: 0;
  transition: height 0.3s ease;
}

.site-header.scrolled .nav-mark {
  height: 1.95rem;
}

.nav-wordmark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--text-bright);
  white-space: nowrap;
}

.nav-wordmark em {
  font-style: normal;
  color: var(--parchment);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  list-style: none;
}

.nav-menu a {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  transition: color 0.2s ease;
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  color: var(--text-bright);
}

.nav-menu a[aria-current="page"] {
  border-bottom: 1px solid var(--parchment);
  padding-bottom: 0.2rem;
}

.nav-menu .nav-cta {
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.55rem 1rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.nav-menu .nav-cta:hover {
  background: var(--parchment);
  color: var(--navy-950);
  border-color: var(--parchment);
}

/* The two CTAs read as a pair, set slightly apart from the section links. */
.nav-cta-item + .nav-cta-item { margin-left: -0.5rem; }

.nav-menu .nav-cta-alert {
  color: var(--ember-bright);
  border-color: rgba(212, 100, 58, 0.5);
  background: var(--ember-dim);
}

.nav-menu .nav-cta-alert:hover,
.nav-menu .nav-cta-alert[aria-current="page"] {
  background: var(--ember);
  border-color: var(--ember);
  color: #140a06;
}

/* The page-marker underline would fight the filled button. */
.nav-menu .nav-cta[aria-current="page"] {
  border-bottom-color: var(--ember);
  padding-bottom: 0.55rem;
}

/* Between the collapse point and a comfortable desktop the row is snug,
   so the section links give up tracking before the CTAs give up padding. */
@media (min-width: 76.001rem) and (max-width: 86rem) {
  .nav-menu { gap: 1rem; }
  .nav-menu a { font-size: 0.72rem; letter-spacing: 0.1em; }
  .nav-menu .nav-cta { padding-inline: 0.8rem; }
  .nav-wordmark { font-size: 1.15rem; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 1px;
  width: 1.4rem;
  margin-inline: auto;
  background: var(--text-bright);
  transition: transform 0.25s ease;
}

@media (max-width: 76rem) {
  .nav-toggle { display: flex; }

  /* The bar is transparent until the page is scrolled, so an open drawer would
     otherwise hang off a see-through header. */
  .site-header:has(.nav-menu.open) {
    background: var(--navy-950);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Solid, not translucent: the drawer sits over hero photography and
       body copy, and a blurred panel left both fighting for the same pixels. */
    background: var(--navy-950);
    border-block: 1px solid var(--line);
    box-shadow: 0 32px 48px -16px rgba(4, 10, 18, 0.9);
    padding: 1rem var(--nav-gutter) 1.5rem;
    display: none;
    /* The header is fixed, so the drawer cannot be scrolled into view with the
       page. On a phone in landscape the last items (Request Contact, Emergency
       Help) fall past the fold, so the drawer scrolls itself instead.
       100% here is the header height, which is what the drawer hangs from. */
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .nav-menu.open { display: flex; }

  .nav-menu li { border-bottom: 1px solid var(--line); }
  .nav-menu li:last-child { border-bottom: none; }
  .nav-cta-item { border-bottom: none; padding-top: 0.7rem; }
  .nav-cta-item + .nav-cta-item { margin-left: 0; padding-top: 0.55rem; }

  .nav-menu a {
    display: block;
    padding: 0.9rem 0;
  }

  .nav-menu .nav-cta { text-align: center; padding-block: 0.85rem; }

  .nav-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }
}

/* ---------- Photo media (heroes & bands) ---------- */

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* film grain, laid over every photo layer */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------- Hero (home) ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-950);
}

.hero .hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgba(10, 20, 32, 0.35), rgba(10, 20, 32, 0.35)),
    linear-gradient(to bottom, rgba(10, 20, 32, 0.65), rgba(10, 20, 32, 0.1) 30%, rgba(13, 27, 42, 0.3) 78%, rgba(13, 27, 42, 0.7) 94%, var(--navy-900) 100%),
    linear-gradient(100deg, rgba(10, 20, 32, 0.92) 0%, rgba(10, 20, 32, 0.55) 45%, rgba(10, 20, 32, 0.15) 75%),
    radial-gradient(ellipse 120% 90% at 85% 15%, transparent 55%, rgba(10, 20, 32, 0.45));
}

.hero .hero-media img {
  filter: saturate(0.72) contrast(1.06) brightness(0.9);
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding-block: 6rem 11rem;
  max-width: 54rem;
}

.hero-title {
  font-size: clamp(2.5rem, 6.2vw, 4.5rem);
  margin-bottom: 1.75rem;
  text-shadow: 0 2px 24px rgba(4, 10, 18, 0.6);
}

.hero-sub {
  font-size: clamp(1.125rem, 1.8vw, 1.3rem);
  font-weight: 300;
  max-width: 37rem;
  color: var(--text);
  margin-bottom: 2.6rem;
  text-shadow: 0 1px 12px rgba(4, 10, 18, 0.7);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-scroll {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.hero-scroll span {
  display: block;
  width: 1px;
  height: 3.25rem;
  background: linear-gradient(to bottom, transparent, var(--parchment));
  animation: scroll-hint 2.4s ease-in-out infinite;
}

@keyframes scroll-hint {
  0%, 100% { opacity: 0.25; transform: scaleY(0.7); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll span { animation: none; }
}

/* ---------- Page hero (subpages) ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(10rem, 20vw, 14rem) clamp(3.5rem, 7vw, 5.5rem);
  background: var(--navy-950);
}

.page-hero .hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(10, 20, 32, 0.7), rgba(10, 20, 32, 0.45) 45%, var(--navy-900) 100%),
    linear-gradient(100deg, rgba(10, 20, 32, 0.85) 0%, rgba(10, 20, 32, 0.4) 60%, rgba(10, 20, 32, 0.1) 85%);
}

.page-hero .hero-media img {
  filter: saturate(0.7) contrast(1.05) brightness(0.82);
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

.page-title {
  font-size: clamp(2.4rem, 5.5vw, 4.1rem);
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 24px rgba(4, 10, 18, 0.6);
}

/* --- Full-fold variant: hero holds the first screen, cue points past it --- */

.page-hero.is-full {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: clamp(8rem, 16vw, 11rem) clamp(8.5rem, 14vw, 11rem);
}

/* --- Scroll cue: label over a hairline the light travels down --- */

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.75rem, 4.5vh, 3rem);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: var(--taupe);
  transition: color 0.3s ease, opacity 0.5s ease, transform 0.5s ease;
}

.hero-scroll-cue:hover { color: var(--parchment); }

.hero-scroll-cue .cue-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-indent: 0.34em;
  opacity: 0.8;
  text-shadow: 0 1px 12px rgba(4, 10, 18, 0.8);
  animation: cue-breathe 3.4s ease-in-out infinite;
}

.hero-scroll-cue .cue-track {
  position: relative;
  display: block;
  width: 1px;
  height: 3.5rem;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(208, 201, 183, 0.28), rgba(208, 201, 183, 0.02));
}

.hero-scroll-cue .cue-track::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 1px;
  height: 45%;
  background: linear-gradient(to bottom, transparent, var(--parchment));
  animation: cue-travel 2.8s cubic-bezier(0.55, 0, 0.35, 1) infinite;
}

/* Once the reader takes the hint, the cue steps aside. */
.hero-scroll-cue.is-hidden {
  opacity: 0;
  transform: translate(-50%, 0.75rem);
  pointer-events: none;
}

@keyframes cue-travel {
  0%   { transform: translateY(-105%); opacity: 0; }
  20%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(225%); opacity: 0; }
}

@keyframes cue-breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue .cue-label { animation: none; }
  .hero-scroll-cue .cue-track::after { animation: none; opacity: 1; height: 100%; }
}

/* Short viewports (laptops in landscape, small phones): keep the hero on one
   screen: the index lists are what overflow, so they take the trim. */
@media (max-height: 720px) {
  .page-hero.is-full { padding-block: 6rem 6rem; }
  .hero-scroll-cue { gap: 0.55rem; bottom: 1.25rem; }
  .hero-scroll-cue .cue-track { height: 2.1rem; }

  .domains-hero .domain-list { margin-top: 1.5rem; gap: 0.5rem; }
  .domains-hero .domain-list li { padding: 0.45rem 0.85rem; }

  .services-hero .toc-grid { margin-top: 1.5rem; gap: 0.1rem 2rem; }
  .services-hero .toc-grid a { padding: 0.4rem 0.15rem 0.4rem 0; gap: 0.65rem; }
}

/* Phones: the services index is one long column, so pair it up to keep the
   fold honest. */
@media (max-width: 34rem) {
  .services-hero .toc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.05rem 1.1rem;
  }
  .services-hero .toc-grid li { display: flex; }

  .services-hero .toc-grid a {
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    padding: 0.55rem 0;
    gap: 0.5rem;
    /* stretch to the row so the rules under a wrapped label ("Logistics &
       Recovery") line up with the single-line one beside it, and so the tap
       target covers the whole cell */
    flex: 1;
    align-items: center;
  }
  /* Two narrow columns leave no room for the run-out tick. */
  .services-hero .toc-grid a::before { font-size: 0.55rem; }
  .services-hero .toc-grid a::after { display: none; }
}

/* ---------- Statement ---------- */

.statement {
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(58, 73, 90, 0.25), transparent 70%),
    var(--navy-800);
  border-block: 1px solid var(--line);
}

.statement-text {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-bright);
}

.statement-text em {
  font-style: normal;
  color: var(--parchment);
}

/* ---------- Editorial lists (no cards) ---------- */

.client-card h3,
.cap-card h3,
.step-card h3,
.approach-card h3,
.svc-entry h3 {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  color: var(--text-bright);
  line-height: 1.3;
  transition: color 0.25s ease;
}

.client-card p,
.cap-card p,
.step-card p,
.approach-card p,
.svc-entry p {
  font-size: 0.93rem;
  font-weight: 300;
  color: var(--text);
}

.card-index {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--taupe);
  margin-bottom: 0.9rem;
}

/* Who we serve: numbered index, two columns */
.client-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
  border-top: 1px solid var(--line-strong);
}

@media (min-width: 46rem) {
  .client-grid { grid-template-columns: 1fr 1fr; column-gap: 4.5rem; }
}

.client-card {
  padding-block: 2.4rem;
  border-bottom: 1px solid var(--line);
}

.client-card h3 { margin-bottom: 0.7rem; }
.client-card:hover h3 { color: var(--parchment); }

/* Odd card count: let the last one span both columns so the closing rule
   runs the full width instead of stopping halfway. Keeps the measure sane. */
@media (min-width: 46rem) {
  .client-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .client-card:last-child:nth-child(odd) p { max-width: 33rem; }
}

/* Capability highlights & firm principles: ledger rows */
.cap-grid {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line-strong);
}

.cap-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 3.5rem;
  padding-block: 1.9rem;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 46rem) {
  .cap-card { grid-template-columns: minmax(13rem, 21rem) 1fr; }
}

.cap-card:hover h3 { color: var(--parchment); }

.cap-card p { max-width: 40rem; }

/* Engagement steps (firm): ruled columns */
.steps-grid {
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-top: 2.5rem;
}

.step-card {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.4rem;
}

.step-card h3 { margin-bottom: 0.6rem; }

.section-cta { margin-top: 2.75rem; }

/* ---------- Capability index (capabilities page) ---------- */

.cap-group {
  border-top: 1px solid var(--line);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.cap-group:first-of-type { border-top: none; }

.group-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 56rem) {
  .group-grid { grid-template-columns: minmax(15rem, 21rem) 1fr; gap: 4.5rem; }
  .group-rail {
    position: sticky;
    top: 7rem;
    align-self: start;
  }
}

.group-index {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.3em;
  color: var(--taupe);
  margin-bottom: 0.8rem;
}

.group-rail .section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 0;
}

.group-list { border-top: 1px solid var(--line-strong); }

.svc-entry {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1.5rem;
  padding-block: 1.8rem;
  border-bottom: 1px solid var(--line);
}

.svc-num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--taupe);
  padding-top: 0.3rem;
}

.svc-entry h3 { margin-bottom: 0.45rem; font-size: 1.3rem; }
.svc-entry:hover h3 { color: var(--parchment); }
.svc-entry p { max-width: 38rem; }

/* ---------- Domains ---------- */

.domains {
  background:
    radial-gradient(ellipse 60% 90% at 50% 100%, rgba(58, 73, 90, 0.22), transparent 65%),
    var(--navy-800);
  border-block: 1px solid var(--line);
}

.domain-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
  list-style: none;
}

.domain-list li {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(10, 20, 32, 0.4);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.6rem 1.15rem;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(242, 245, 249, 0.04);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.domain-list li:hover {
  color: var(--parchment);
  border-color: rgba(208, 201, 183, 0.4);
}

/* ---------- Products teaser (home) ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 56rem) {
  .split { grid-template-columns: 1.2fr 1fr; gap: 5rem; }
}

.product-list {
  list-style: none;
  border-top: 1px solid var(--line);
}

.product-list li {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--text-bright);
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.25s ease, color 0.25s ease;
}

.product-list li:hover {
  padding-left: 0.9rem;
  color: var(--parchment);
}

/* ============================================================
   Products page :: full-bleed tile mosaic
   A type-only hero over a drifting contour backdrop with a ghost
   product count, a slow code ticker, then an edge-to-edge grid
   of image tiles with hairline gutters (wide tiles at 01, 06,
   08). At rest: photo + title. On hover / focus / tap: the tile
   darkens, corner brackets frame it, and the class label,
   description, and CTA unfold. Closes on a hardware-as-a-service
   section with a four-step ledger.
   ============================================================ */

/* Hero and ticker share the first screen, the ticker riding its bottom edge. */
.products-fold {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.products-hero {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Top padding is now just header clearance; centering does the placing. */
  padding-block: clamp(7rem, 12vw, 9rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--navy-950);
}

/* Short viewports: the hero has no room to breathe, so give the padding back. */
@media (max-height: 720px) {
  .products-hero { padding-block: 6rem 2rem; }
}

.products-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 70% at 100% 100%, rgba(58, 73, 90, 0.28), transparent 65%),
    radial-gradient(ellipse 40% 50% at 0% 0%, rgba(208, 201, 183, 0.05), transparent 60%);
  pointer-events: none;
}

.products-hero .section-topo { opacity: 0.07; }

.products-hero .container { position: relative; z-index: 1; }

.products-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.7rem, 7.4vw, 5.9rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--text-bright);
  text-wrap: balance;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.products-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  border-top: 1px solid var(--line-strong);
  padding-top: 1.5rem;
}

@media (min-width: 56rem) {
  .products-meta {
    grid-template-columns: 10rem minmax(14rem, 19rem) 1fr auto;
    gap: 3rem;
    align-items: start;
  }
}

.showcase-class {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-bright);
  margin-bottom: 0.55rem;
  line-height: 1.5;
}

.showcase-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--taupe);
}

.products-meta-desc {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.75;
  color: var(--text-dim);
  max-width: 22rem;
}

.products-meta-hint {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  align-self: start;
  padding-top: 0.15rem;
}

.products-scroll {
  display: inline-flex;
  color: var(--parchment);
  padding: 0.4rem;
  margin: -0.4rem;
  justify-self: end;
  animation: scroll-nudge 2.4s ease-in-out infinite;
}

@keyframes scroll-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* --- Code ticker: a slow, seamless strip of product codes and names --- */

.product-ticker {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--navy-950);
  padding-block: 0.85rem;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-run 70s linear infinite;
}

.product-ticker:hover .ticker-track { animation-play-state: paused; }

.ticker-run {
  display: flex;
  flex-shrink: 0;
}

.ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  padding-inline: 2.4rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.ticker-item em {
  font-style: normal;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.16em;
  color: var(--taupe);
}

.ticker-item::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: 2.4rem;
  background: var(--parchment);
  opacity: 0.4;
  transform: translateY(-0.2em);
}

@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Full-bleed mosaic: hairline gutters, no card chrome --- */

.product-grid-section {
  position: relative;
  background: var(--navy-900);
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

@media (min-width: 40rem) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(20rem, 42vw, 30rem);
  }
  .product-tile--wide { grid-column: span 2; }
}

@media (min-width: 62rem) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(22rem, 30vw, 34rem);
  }
}

.product-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--navy-950);
  color: var(--text-bright);
}

.product-tile.reveal {
  transition:
    opacity 0.7s ease calc(var(--i, 0) * 60ms),
    transform 0.7s ease calc(var(--i, 0) * 60ms);
}

.product-tile.reveal.visible { transition: none; }

.tile-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.55) contrast(1.06) brightness(0.78);
  transform: scale(1.02);
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.8s ease;
  will-change: transform;
}

/* per-placeholder crops */
#private-pear .tile-media img       { object-position: 45% 45%; filter: saturate(0.55) contrast(1.04) brightness(1.15); }
#scan-sport .tile-media img         { object-position: 40% 50%; }
#alibi-locationlock .tile-media img { object-position: 45% 40%; }
#2fhuman .tile-media img            { object-position: 78% 45%; }
#teamcrypt .tile-media img          { object-position: 35% 55%; }
#ai-free-platforms .tile-media img  { object-position: 50% 50%; }
#disaster-comms .tile-media img     { object-position: 65% 50%; }
#survival-vault .tile-media img     { object-position: 72% 35%; }
#operator-iq .tile-media img        { object-position: 48% 50%; }

/* film grain */
.tile-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* resting scrim keeps the title legible; the hover shade darkens the whole tile */
.tile-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10, 20, 32, 0.92) 0%, rgba(10, 20, 32, 0.45) 38%, rgba(10, 20, 32, 0.05) 70%),
    linear-gradient(to bottom, rgba(10, 20, 32, 0.55) 0%, transparent 28%);
}

.tile-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 32, 0.86);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* reticle corner brackets that draw in on hover */
.product-tile::before,
.product-tile::after {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  z-index: 3;
  border: 0 solid var(--parchment);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

.product-tile::before {
  top: 0.9rem;
  left: 0.9rem;
  border-top-width: 1px;
  border-left-width: 1px;
  transform: translate(0.4rem, 0.4rem);
}

.product-tile::after {
  bottom: 0.9rem;
  right: 0.9rem;
  border-bottom-width: 1px;
  border-right-width: 1px;
  transform: translate(-0.4rem, -0.4rem);
}

.tile-meta {
  position: absolute;
  top: 1.4rem;
  left: 1.6rem;
  right: 1.6rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment);
  text-shadow: 0 1px 2px rgba(4, 10, 18, 0.6);
}

.tile-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--taupe);
}

.tile-body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.6rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
}

.product-tile--wide .tile-body { max-width: 34rem; }

.tile-class {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.55rem;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.45s ease 0.05s, transform 0.45s ease 0.05s;
}

.tile-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text-bright);
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(4, 10, 18, 0.6), 0 2px 18px rgba(4, 10, 18, 0.6);
  transition: color 0.35s ease;
}

.product-tile--wide .tile-name { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }

/* description and CTA are collapsed at rest and unfold on hover */
.tile-desc,
.tile-cta {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.tile-desc {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text);
  margin-top: 0.9rem;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.45s ease, transform 0.45s ease, max-height 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  margin-top: 1.2rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--parchment);
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment);
  text-decoration: none;
  transition: opacity 0.45s ease 0.08s, transform 0.45s ease 0.08s, background-color 0.25s ease, color 0.25s ease;
}

.tile-cta svg { transition: transform 0.3s ease; }

/* --- Open state: hover, keyboard focus on the CTA, or a tap on touch screens.
   Only the CTA is a link; the tile itself is inert. --- */

.product-tile:hover .tile-media img,
.product-tile:focus-within .tile-media img,
.product-tile.is-open .tile-media img {
  transform: scale(1.08);
  filter: saturate(0.4) contrast(1.05) brightness(0.55) blur(1px);
}

.product-tile:hover .tile-shade::after,
.product-tile:focus-within .tile-shade::after,
.product-tile.is-open .tile-shade::after { opacity: 1; }

.product-tile:hover::before,
.product-tile:hover::after,
.product-tile:focus-within::before,
.product-tile:focus-within::after,
.product-tile.is-open::before,
.product-tile.is-open::after {
  opacity: 1;
  transform: none;
}

.product-tile:hover .tile-name,
.product-tile:focus-within .tile-name,
.product-tile.is-open .tile-name { color: var(--parchment); }

.product-tile:hover .tile-class,
.product-tile:focus-within .tile-class,
.product-tile.is-open .tile-class,
.product-tile:hover .tile-desc,
.product-tile:focus-within .tile-desc,
.product-tile.is-open .tile-desc,
.product-tile:hover .tile-cta,
.product-tile:focus-within .tile-cta,
.product-tile.is-open .tile-cta {
  opacity: 1;
  transform: none;
}

.product-tile:hover .tile-desc,
.product-tile:focus-within .tile-desc,
.product-tile.is-open .tile-desc { max-height: 12rem; }

.tile-cta:hover,
.tile-cta:focus-visible { background: rgba(208, 201, 183, 0.1); }

.tile-cta:hover svg { transform: translateX(3px); }

/* Phones: a tile is one full-bleed column, so the frame is no longer taller
   than the copy it holds and an opened description used to ride up over the
   ordinal row. Here the body joins the flow and the tile grows to fit what it
   holds, with 4:3 (75vw at full bleed) kept as a floor rather than a ceiling.
   This overrides the absolute .tile-body above, so it has to sit after it.
   39.99rem, not 40rem: the grid goes two-up at min-width 40rem and both would
   otherwise match at exactly 640px. */
@media (max-width: 39.99rem) {
  .product-tile {
    min-height: 75vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* keeps a grown tile's copy clear of the absolutely placed ordinal row */
    padding-top: 3.4rem;
  }

  .tile-body {
    position: relative;
    inset: auto;
  }

  .product-tile.is-open .tile-desc,
  .product-tile:focus-within .tile-desc { max-height: 24rem; }
}

/* --- Hardware as a service --- */

.build-cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 55% 80% at 50% 100%, rgba(58, 73, 90, 0.25), transparent 70%),
    var(--navy-900);
}

.build-cta .container { position: relative; z-index: 1; }

.build-cta .home-motif {
  top: auto;
  bottom: -8rem;
  right: -8rem;
  width: min(30rem, 42vw);
  opacity: 0.3;
}

.build-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: start;
}

@media (min-width: 62rem) {
  .build-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 5rem; }
}

.build-cta .section-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.build-steps {
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.build-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0 1rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line);
}

.build-step-num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  color: rgba(208, 201, 183, 0.25);
  transition: color 0.3s ease;
}

@supports (-webkit-text-stroke: 1px black) {
  .build-step-num {
    color: transparent;
    -webkit-text-stroke: 1px rgba(208, 201, 183, 0.35);
  }
}

.build-steps li:hover .build-step-num { -webkit-text-stroke-color: var(--parchment); color: var(--parchment); }

.build-steps h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-bright);
  margin-bottom: 0.35rem;
}

.build-steps p {
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .products-scroll { animation: none; }
  .ticker-track { animation: none; }
  .product-tile.reveal,
  .tile-media img,
  .tile-shade::after,
  .product-tile::before,
  .product-tile::after,
  .tile-class,
  .tile-name,
  .tile-desc,
  .tile-cta,
  .tile-cta svg { transition: none; }
  .product-tile:hover .tile-media img,
  .product-tile:focus-within .tile-media img,
  .product-tile.is-open .tile-media img { transform: none; }
}

/* ---------- Approach (photo band) ---------- */

.approach {
  overflow: hidden;
  background: var(--navy-950);
}

.approach .hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, var(--navy-900) 0%, rgba(13, 27, 42, 0.72) 30%, rgba(13, 27, 42, 0.72) 70%, var(--navy-900) 100%),
    linear-gradient(to right, rgba(10, 20, 32, 0.75), rgba(10, 20, 32, 0.35));
}

.approach .hero-media img {
  filter: saturate(0.8) brightness(0.75);
}

.approach .container {
  position: relative;
  z-index: 2;
}

.approach-grid {
  display: grid;
  gap: 2.5rem 4rem;
  margin-top: 2.75rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.approach-card {
  border-left: 2px solid var(--taupe);
  padding: 0.4rem 0 0.4rem 1.9rem;
}

.approach-card h3 {
  font-size: 1.65rem;
  margin-bottom: 0.7rem;
  text-shadow: 0 1px 16px rgba(4, 10, 18, 0.8);
}

.approach-card p {
  text-shadow: 0 1px 12px rgba(4, 10, 18, 0.85);
}

/* ---------- Contact form ---------- */

.contact {
  background:
    radial-gradient(ellipse 70% 90% at 50% 10%, rgba(58, 73, 90, 0.2), transparent 65%),
    var(--navy-800);
  border-top: 1px solid var(--line);
}

.contact-form { margin-top: 2.5rem; }

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 40rem) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.form-field { margin-bottom: 1.25rem; }

.form-field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.5rem;
}

.form-field .optional {
  text-transform: none;
  letter-spacing: 0.05em;
  font-weight: 400;
  opacity: 0.7;
}

.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--text-bright);
  background: rgba(10, 20, 32, 0.55);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.9rem 1rem;
  box-shadow: inset 0 2px 6px rgba(4, 10, 18, 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--parchment);
  box-shadow: inset 0 2px 6px rgba(4, 10, 18, 0.35), 0 0 0 3px rgba(208, 201, 183, 0.12);
}

.form-field textarea {
  resize: vertical;
  min-height: 8rem;
}

.form-status {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  min-height: 1.5rem;
}

.form-status.success { color: var(--parchment); }
.form-status.error { color: #dba38c; }

/* ---------- Access gate (briefings) ---------- */

.access {
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(58, 73, 90, 0.22), transparent 65%),
    var(--navy-800);
  border-top: 1px solid var(--line);
}

.access-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 58rem) {
  .access-grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 3rem; }
}

.access-panel {
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: rgba(10, 20, 32, 0.45);
  box-shadow: var(--shadow-card);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.access-panel .eyebrow { margin-bottom: 1rem; }

.access-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--text-bright);
  margin-bottom: 0.8rem;
}

.access-note {
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text-dim);
  max-width: 34rem;
}

.access-form { margin-top: 1.9rem; }

.access-form .btn { width: 100%; }

@media (min-width: 40rem) {
  #access-request-form .btn { width: auto; }
}

.access-help {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--text-dim);
}

.access-help a {
  color: var(--parchment);
  text-decoration: none;
  border-bottom: 1px solid rgba(208, 201, 183, 0.35);
}

.access-help a:hover { border-bottom-color: var(--parchment); }

/* Select: matched to the text inputs, with our own caret */
.form-field select {
  width: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--text-bright);
  background-color: rgba(10, 20, 32, 0.55);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.9rem 2.5rem 0.9rem 1rem;
  box-shadow: inset 0 2px 6px rgba(4, 10, 18, 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2399907d' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.7rem;
}

.form-field select:focus {
  outline: none;
  border-color: var(--parchment);
  box-shadow: inset 0 2px 6px rgba(4, 10, 18, 0.35), 0 0 0 3px rgba(208, 201, 183, 0.12);
}

/* The native dropdown list paints in the OS palette, so set both explicitly */
.form-field select option { background: var(--navy-900); color: var(--text-bright); }
.form-field select:invalid { color: var(--text-dim); }

/* Checkbox: square, parchment tick, sized off the type */
.checkbox {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--text-dim);
  cursor: pointer;
}

.checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: rgba(10, 20, 32, 0.55);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* The label is the tap target, and a 22px row is not one on a phone. */
@media (max-width: 60rem) {
  .checkbox { padding-block: 0.65rem; }
}

.checkbox input:checked {
  background: var(--parchment);
  border-color: var(--parchment);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.7l4.5-5' stroke='%230a1420' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.7rem;
}

.form-inline { margin-bottom: 1.5rem; }

.form-field textarea::placeholder {
  color: var(--text-dim);
  opacity: 0.65;
}

/* Field-level validation, set by the access forms */
.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea { border-color: #b9705a; }

.field-error {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-weight: 300;
  color: #dba38c;
}

/* Briefing formats & handling: see the Briefings block at the end of this file */

/* ---------- Closing CTA ---------- */

.closing-cta {
  text-align: center;
  border-top: 1px solid var(--line);
  background: radial-gradient(ellipse 55% 80% at 50% 100%, rgba(58, 73, 90, 0.25), transparent 70%);
}

.closing-cta .section-lead { margin-inline: auto; }

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

.site-footer {
  background: var(--navy-950);
  border-top: 1px solid var(--line);
  padding-block: 3.5rem 2.5rem;
}

.footer-inner {
  display: grid;
  gap: 2rem;
}

@media (min-width: 46rem) {
  .footer-inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .footer-legal { grid-column: 1 / -1; }
}

.footer-tag {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-top: 0.6rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.footer-nav a {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  transition: color 0.2s ease;
}

.footer-nav a:hover { color: var(--text-bright); }

/* Phones and tablets: the footer links are the last navigation on the page and
   a 21px line of type is not a thumb target. Pad the rows out to ~44px and take
   the added height back out of the row gap so the block reads the same. */
@media (max-width: 60rem) {
  .footer-nav { gap: 0.25rem 1.75rem; }
  .footer-nav a { padding-block: 0.7rem; }
}

.footer-legal {
  font-size: 0.8rem;
  color: var(--text);
  opacity: 0.55;
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  margin-top: 0.5rem;
}

.footer-credits {
  display: block;
  font-size: 0.72rem;
  opacity: 0.75;
  margin-top: 0.4rem;
}

.footer-credits a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Parallax layers
   [data-parallax] elements are translated by main.js at a
   fraction of scroll speed. Photo layers get extra bleed so
   the movement never exposes an edge.
   ============================================================ */

[data-parallax] { will-change: transform; }

.hero-media img[data-parallax] {
  height: 126%;
  margin-top: -6.5%;
}

@media (prefers-reduced-motion: reduce) {
  .hero-media img[data-parallax] {
    height: 100%;
    margin-top: 0;
  }
}

.inline-link {
  color: var(--parchment);
  text-decoration: none;
  border-bottom: 1px solid rgba(208, 201, 183, 0.35);
}

.inline-link:hover { border-bottom-color: var(--parchment); }

/* ============================================================
   Services page :: dossier ledger
   ============================================================ */

.page-hero .toc-grid { margin-top: 2.25rem; }

/* The sea photo is dark through its lower half, so the shared page-hero scrim
   extinguishes it well above the fold. Hold the ramp back and lift the plate. */
.services-hero .hero-media::before {
  background:
    linear-gradient(to bottom, rgba(10, 20, 32, 0.68), rgba(10, 20, 32, 0.38) 45%, rgba(13, 27, 42, 0.5) 86%, var(--navy-900) 100%),
    linear-gradient(100deg, rgba(10, 20, 32, 0.85) 0%, rgba(10, 20, 32, 0.4) 60%, rgba(10, 20, 32, 0.1) 85%);
}

.services-hero .hero-media img {
  filter: saturate(0.72) contrast(1.06) brightness(0.95);
}

/* Read as a plate index, not the chip row on the domains hero: hairline
   rules, a struck numeral per entry, and a tick that runs out on hover. */
.toc-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.1rem 2.5rem;
  counter-reset: toc;
}

.toc-grid li { counter-increment: toc; }

.toc-grid a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding: 0.55rem 0.15rem 0.55rem 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

/* Plate numeral: taupe, tabular so the column edge stays true. */
.toc-grid a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--taupe);
  transition: color 0.25s ease;
}

/* Hover tick, pushed to the far edge of the row. */
.toc-grid a::after {
  content: "";
  align-self: baseline;
  margin-left: auto;
  width: 0.9rem;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: translateX(-0.45rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toc-grid a:hover,
.toc-grid a:focus-visible {
  color: var(--parchment);
  border-bottom-color: rgba(208, 201, 183, 0.45);
  transform: translateX(2px);
}

.toc-grid a:hover::before,
.toc-grid a:focus-visible::before { color: var(--parchment); }

.toc-grid a:hover::after,
.toc-grid a:focus-visible::after {
  opacity: 0.65;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .toc-grid a,
  .toc-grid a::after { transition: color 0.25s ease, border-color 0.25s ease; }
  .toc-grid a:hover,
  .toc-grid a:focus-visible { transform: none; }
  .toc-grid a:hover::after,
  .toc-grid a:focus-visible::after { transform: none; }
}

.svc-sector {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding-block: clamp(4rem, 8vw, 6.5rem);
}

.svc-sector:first-of-type { border-top: none; }

.svc-motif {
  position: absolute;
  top: 4%;
  right: -8rem;
  width: min(42rem, 58vw);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  animation: motif-drift 24s ease-in-out infinite alternate;
  will-change: transform;
}

.svc-sector:nth-of-type(even) .svc-motif {
  right: auto;
  left: -10rem;
  animation-duration: 29s;
  animation-delay: -13s;
}

/* Soft parchment wash behind each motif so it reads against the navy */
.svc-motif::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(208, 201, 183, 0.34) 0%,
    rgba(208, 201, 183, 0.12) 40%,
    rgba(208, 201, 183, 0) 68%
  );
  animation: motif-glow 11s ease-in-out infinite alternate;
}

.svc-motif img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 1px rgba(208, 201, 183, 0.9))
    drop-shadow(0 0 20px rgba(208, 201, 183, 0.45));
}

/* Radial motifs turn very slowly; the rotate property keeps clear of the
   parallax transform that main.js writes onto the same image. */
#offense .svc-motif img,
#training .svc-motif img,
#investigations .svc-motif img,
#c2 .svc-motif img,
#family .svc-motif img,
#bespoke .svc-motif img {
  animation: motif-spin 170s linear infinite;
}

#training .svc-motif img,
#c2 .svc-motif img,
#bespoke .svc-motif img {
  animation-direction: reverse;
}

/* Non-radial motifs get a gentle sway instead of a full turn */
#defense .svc-motif img,
#forensics .svc-motif img,
#evaluations .svc-motif img,
#events .svc-motif img {
  animation: motif-sway 18s ease-in-out infinite alternate;
}

@keyframes motif-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.2rem, 1.4rem, 0) scale(1.03); }
  100% { transform: translate3d(1rem, -1rem, 0) scale(1.015); }
}

@keyframes motif-glow {
  from { opacity: 0.55; transform: scale(0.94); }
  to   { opacity: 1;    transform: scale(1.06); }
}

@keyframes motif-spin {
  to { rotate: 360deg; }
}

@keyframes motif-sway {
  from { rotate: -3deg; }
  to   { rotate: 3deg; }
}

@media (max-width: 40rem) {
  .svc-motif { opacity: 0.34; }
  .svc-motif img { filter: drop-shadow(0 0 1px rgba(208, 201, 183, 0.6)); }
}

@media (prefers-reduced-motion: reduce) {
  .svc-motif,
  .svc-motif::before,
  .svc-motif img { animation: none; }
}

.svc-sector .container {
  position: relative;
  z-index: 1;
}

.sector-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}

@media (min-width: 56rem) {
  .sector-grid { grid-template-columns: minmax(15rem, 21rem) 1fr; gap: 4.5rem; }
  .sector-rail {
    position: sticky;
    top: 7rem;
    align-self: start;
  }
}

.sector-rail .section-title {
  font-size: clamp(1.7rem, 3.2vw, 2.35rem);
  margin-bottom: 1rem;
}

.sector-tag {
  font-size: 0.98rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text-dim);
  max-width: 18rem;
}

.cap-ledger { border-top: 1px solid var(--line-strong); }

.cap-row {
  padding-block: 1.7rem;
  border-bottom: 1px solid var(--line);
}

.cap-row h3 {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 500;
  color: var(--text-bright);
  line-height: 1.3;
  margin-bottom: 0.45rem;
  transition: color 0.25s ease;
}

.cap-row:hover h3 { color: var(--parchment); }

.cap-row p {
  font-size: 0.93rem;
  font-weight: 300;
  color: var(--text);
  max-width: 38rem;
}

.cap-scope {
  display: inline-block;
  vertical-align: 0.25em;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.22rem 0.55rem;
  margin-left: 0.6rem;
}

.sector-examples { margin-top: 2.75rem; }

.examples-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.examples-label::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: linear-gradient(to right, var(--taupe), transparent);
  flex-shrink: 0;
}

.example {
  border-left: 1px solid rgba(153, 144, 125, 0.45);
  padding: 0.35rem 0 0.35rem 1.5rem;
  margin-top: 1.4rem;
  max-width: 36rem;
}

.example strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-bright);
  margin-bottom: 0.35rem;
}

.example p {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-dim);
}

.bespoke-line {
  font-style: italic;
  color: var(--text) !important;
}

/* ============================================================
   Domains page :: breakout bands over a fixed contour backdrop
   ============================================================ */

.domains-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
}

.domains-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.domains-page main,
.domains-page .site-footer {
  position: relative;
  z-index: 1;
}

.domains-hero .page-title {
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
}

.domains-hero .domain-list { margin-top: 2.25rem; }

.domain-list li a {
  text-decoration: none;
  color: inherit;
}

.domain-band {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 62vh, 42rem);
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  border-top: 1px solid var(--line);
  background: var(--navy-950);
}

.domain-band .container { width: min(100% - 3rem, var(--container)); }

/* --- Photo layer: one image per band, scrimmed so the copy side stays ink-dark --- */

.band-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.band-media img {
  position: absolute;
  left: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.6) contrast(1.05) brightness(0.82);
  will-change: transform;
}

/* copy-side scrim (left for odd bands), vertical fade into the page, and a
   soft vignette so the photo reads as tone rather than competing with type */
.band-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, var(--navy-900) 0%, rgba(13, 27, 42, 0.25) 16%, rgba(13, 27, 42, 0.25) 84%, var(--navy-900) 100%),
    linear-gradient(to right, rgba(10, 20, 32, 0.96) 0%, rgba(10, 20, 32, 0.9) 36%, rgba(10, 20, 32, 0.55) 58%, rgba(10, 20, 32, 0.18) 100%),
    radial-gradient(ellipse 70% 90% at 100% 50%, transparent 40%, rgba(10, 20, 32, 0.35) 100%);
}

.domain-band:nth-of-type(even) .band-media::before {
  background:
    linear-gradient(to bottom, var(--navy-900) 0%, rgba(13, 27, 42, 0.25) 16%, rgba(13, 27, 42, 0.25) 84%, var(--navy-900) 100%),
    linear-gradient(to left, rgba(10, 20, 32, 0.96) 0%, rgba(10, 20, 32, 0.9) 36%, rgba(10, 20, 32, 0.55) 58%, rgba(10, 20, 32, 0.18) 100%),
    radial-gradient(ellipse 70% 90% at 0% 50%, transparent 40%, rgba(10, 20, 32, 0.35) 100%);
}

/* film grain, matching the heroes */
.band-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* per-image crops so the interesting part lands on the open (non-copy) side */
#physical .band-media img          { object-position: 70% 50%; }
#insider .band-media img           { object-position: 25% 50%; }
#cyber .band-media img             { object-position: 60% 50%; }
#social .band-media img            { object-position: 50% 40%; }
#ai .band-media img                { object-position: 55% 50%; }
#biological .band-media img        { object-position: 50% 50%; }
#travel .band-media img            { object-position: 65% 40%; }
#signals .band-media img           { object-position: 30% 55%; }
#antisurveillance .band-media img  { object-position: 65% 30%; }
#financial .band-media img         { object-position: 40% 50%; }
#pattern-of-life .band-media img   { object-position: 60% 50%; }
#disaster .band-media img          { object-position: 40% 45%; }
#sovereignty .band-media img       { object-position: 60% 45%; }

@media (max-width: 48rem) {
  .domain-band { min-height: 0; }

  .band-media img { filter: saturate(0.55) contrast(1.05) brightness(0.7); }

  /* stacked layout: no free side, so scrim evenly and lean on the vertical fade */
  .band-media::before,
  .domain-band:nth-of-type(even) .band-media::before {
    background:
      linear-gradient(to bottom, var(--navy-900) 0%, rgba(13, 27, 42, 0.45) 20%, rgba(13, 27, 42, 0.45) 80%, var(--navy-900) 100%),
      rgba(10, 20, 32, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .band-media img { top: 0; height: 100%; }
}

/* landscape frames narrower than the band get no horizontal crop, so widen the
   ones whose subject should sit on the open side */
#disaster .band-media img { width: 150%; left: -50%; object-position: 50% 45%; }
#financial .band-media img { width: 130%; left: -30%; }
#travel .band-media img { width: 125%; left: 0; object-position: 100% 40%; }
#social .band-media img { width: 100%; object-position: 50% 30%; }

.domain-ordinal {
  position: absolute;
  top: 50%;
  right: -1.5rem;
  margin-top: -0.6em;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(11rem, 26vw, 22rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(208, 201, 183, 0.05);
  pointer-events: none;
  user-select: none;
}

@supports (-webkit-text-stroke: 1px black) {
  .domain-ordinal {
    color: transparent;
    -webkit-text-stroke: 1px rgba(208, 201, 183, 0.2);
  }
}

.domain-band:nth-of-type(even) .domain-ordinal {
  right: auto;
  left: -1.5rem;
}

.band-grid {
  position: relative;
  z-index: 2;
}

.band-copy { max-width: 40rem; }

.band-copy .band-title,
.band-copy .band-blurb,
.band-copy .eyebrow,
.band-copy .why-label {
  text-shadow: 0 1px 2px rgba(4, 10, 18, 0.6), 0 2px 24px rgba(4, 10, 18, 0.7);
}

.domain-band:nth-of-type(even) .band-copy {
  margin-left: auto;
}

.band-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--text-bright);
  text-wrap: balance;
  margin-bottom: 1.6rem;
}

.why-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.6rem;
}

.band-blurb {
  font-size: 1.02rem;
  font-weight: 300;
  color: var(--text-bright);
  opacity: 0.92;
  margin-bottom: 1.75rem;
}

.band-services {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-top: 1px solid var(--line-strong);
  padding-top: 1.1rem;
  /* Inline flow rather than flex: as flex items the separator dots could wrap
     to the head of a line on a phone, orphaned from the link they follow.
     There is no break opportunity between a link and its dot inline. */
  line-height: 2.4;
}

.band-services span {
  color: var(--taupe);
  margin-inline: 0.35rem 0.2rem;
}

.band-services a {
  position: relative;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(208, 201, 183, 0.3);
  padding-bottom: 0.15rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* Grows the thumb target past the 20px line of type without moving the rule
   under it, which padding would. */
.band-services a::after {
  content: "";
  position: absolute;
  inset: -0.4rem -0.1rem;
}

.band-services a:hover {
  color: var(--parchment);
  border-bottom-color: var(--parchment);
}

/* ============================================================
   Home :: services pointer list
   ============================================================ */

.svc-index-list {
  list-style: none;
  border-top: 1px solid var(--line);
  columns: 1;
}

@media (min-width: 40rem) {
  .svc-index-list { columns: 2; column-gap: 3rem; }
}

.svc-index-list li {
  break-inside: avoid;
  border-bottom: 1px solid var(--line);
}

.svc-index-list a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-bright);
  text-decoration: none;
  padding: 0.7rem 0.25rem;
  transition: padding-left 0.25s ease, color 0.25s ease;
}

.svc-index-list a span {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--taupe);
}

.svc-index-list a:hover {
  padding-left: 0.9rem;
  color: var(--parchment);
}

/* ============================================================
   Home :: text-section treatments
   Ghost glyphs, line-art motifs, and ledger details so the
   all-type sections carry as much atmosphere as the photo bands.
   ============================================================ */

/* --- Shared: a line-art motif parked in a section's empty quadrant --- */

.home-motif {
  position: absolute;
  top: -2rem;
  right: -6rem;
  width: min(34rem, 46vw);
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
  animation: motif-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}

.home-motif-left {
  top: auto;
  bottom: -7rem;
  right: auto;
  left: -9rem;
  width: min(22rem, 34vw);
  opacity: 0.34;
  animation-duration: 31s;
  animation-delay: -9s;
}

.home-motif::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(208, 201, 183, 0.3) 0%,
    rgba(208, 201, 183, 0.1) 40%,
    rgba(208, 201, 183, 0) 68%
  );
  animation: motif-glow 12s ease-in-out infinite alternate;
}

.home-motif img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 1px rgba(208, 201, 183, 0.9))
    drop-shadow(0 0 18px rgba(208, 201, 183, 0.4));
}

.home-motif-spin img     { animation: motif-spin 190s linear infinite; }
.home-motif-spin-rev img { animation: motif-spin 210s linear infinite reverse; }
.home-motif-sway img     { animation: motif-sway 20s ease-in-out infinite alternate; }

.clients .container,
.domains .container,
.services-pointer .container,
.products-teaser .container,
.statement .container {
  position: relative;
  z-index: 1;
}

.clients,
.services-pointer,
.products-teaser {
  position: relative;
  overflow: hidden;
}

/* --- Statement: manifesto with a ghost quotation mark and word cascade --- */

.statement {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(208, 201, 183, 0.07), transparent 65%),
    radial-gradient(ellipse 70% 100% at 50% 100%, rgba(58, 73, 90, 0.25), transparent 70%),
    var(--navy-800);
}

.ghost-glyph {
  position: absolute;
  top: calc(var(--section-pad) - 1.5rem);
  left: 50%;
  margin-left: -38.5rem;
  z-index: 0;
  font-family: var(--font-text);
  font-size: clamp(16rem, 30vw, 28rem);
  font-weight: 300;
  line-height: 0.8;
  color: rgba(208, 201, 183, 0.05);
  pointer-events: none;
  user-select: none;
}

@supports (-webkit-text-stroke: 1px black) {
  .ghost-glyph {
    color: transparent;
    -webkit-text-stroke: 1px rgba(208, 201, 183, 0.22);
  }
}

.statement .rule {
  width: 6rem;
  border-top: none;
  height: 1px;
  background: linear-gradient(to right, var(--parchment), rgba(208, 201, 183, 0));
}

.statement-text .w {
  display: inline-block;
  opacity: 0.1;
  transform: translateY(0.25em);
  filter: blur(2px);
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
  transition-delay: calc(var(--i, 0) * 32ms);
}

.statement-text.visible .w {
  opacity: 1;
  transform: none;
  filter: none;
}

.statement-sig {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--taupe);
}

.statement-sig span {
  width: 2.5rem;
  height: 1px;
  background: var(--taupe);
}

/* --- Who we serve: ghost ordinals and a growing parchment underline --- */

.clients .client-card {
  position: relative;
  padding-top: 2.6rem;
}

.clients .card-index {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: rgba(208, 201, 183, 0.08);
  margin-bottom: 0.6rem;
  transition: color 0.35s ease;
}

@supports (-webkit-text-stroke: 1px black) {
  .clients .card-index {
    color: transparent;
    -webkit-text-stroke: 1px rgba(208, 201, 183, 0.35);
    transition: -webkit-text-stroke-color 0.35s ease, color 0.35s ease;
  }
  .clients .client-card:hover .card-index {
    -webkit-text-stroke-color: var(--parchment);
  }
}

.clients .client-card h3 {
  position: relative;
  display: inline-block;
  padding-bottom: 0.35rem;
}

.clients .client-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--parchment);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.clients .client-card:hover h3::after { transform: scaleX(1); }

/* --- Domains: drifting contour backdrop, domain codes, live chips --- */

.domains { position: relative; overflow: hidden; }

.section-topo {
  position: absolute;
  inset: -12% -4%;
  z-index: 0;
  opacity: 0.09;
  pointer-events: none;
  animation: motif-drift 40s ease-in-out infinite alternate;
  will-change: transform;
}

.section-topo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cap-code {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--taupe);
  margin-bottom: 0.45rem;
}

.domain-list li {
  position: relative;
  overflow: hidden;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.domain-list li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(208, 201, 183, 0.12) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}

.domain-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(4, 10, 18, 0.9), inset 0 1px 0 rgba(242, 245, 249, 0.06);
}

.domain-list li:hover::before { transform: translateX(120%); }

/* The chip's padding lives on the anchor, not the li, so the whole chip is the
   tap target instead of the 18px line of type inside it. */
.domain-list li { padding: 0; }

.domain-list li a {
  position: relative;
  display: block;
  padding: 0.6rem 1.15rem;
  color: inherit;
  text-decoration: none;
}

@media (max-height: 720px) {
  .domains-hero .domain-list li { padding: 0; }
  .domains-hero .domain-list li a { padding: 0.45rem 0.85rem; }
}

/* --- Services & products: numbered ledgers --- */

.svc-index-list { counter-reset: svc; }

.svc-index-list a::before {
  counter-increment: svc;
  content: counter(svc, decimal-leading-zero);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--taupe);
  min-width: 1.6rem;
  transition: color 0.25s ease;
}

.svc-index-list a:hover::before { color: var(--parchment); }

.product-list { counter-reset: prod; }

.product-list li {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
}

.product-list li::before {
  counter-increment: prod;
  content: "P." counter(prod, decimal-leading-zero);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--taupe);
  min-width: 2.4rem;
  transition: color 0.25s ease;
}

.product-list li::after {
  content: "\2192";
  margin-left: auto;
  font-size: 0.95rem;
  color: var(--parchment);
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.product-list li:hover::before { color: var(--parchment); }
.product-list li:hover::after  { opacity: 1; transform: none; }

@media (max-width: 40rem) {
  .home-motif { opacity: 0.28; width: 60vw; right: -30vw; }
  .home-motif-left { left: -30vw; }
  .home-motif img { filter: drop-shadow(0 0 1px rgba(208, 201, 183, 0.6)); }
  .clients .card-index { font-size: 2.6rem; }
}

@media (max-width: 80rem) {
  .ghost-glyph { left: 0.5rem; margin-left: 0; }
}

@media (max-width: 60rem) {
  .ghost-glyph { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-motif,
  .home-motif::before,
  .home-motif img,
  .section-topo { animation: none; }
  .statement-text .w { opacity: 1; transform: none; filter: none; transition: none; }
  .domain-list li::before { display: none; }
}

/* ============================================================
   Home :: Who We Serve, glass cards over a swapping photo layer
   Hovering (or, on touch, scrolling past) a card crossfades the
   backdrop to that client's image and swaps the ghost ordinal.
   ============================================================ */

.clients {
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
  border-block: 1px solid var(--line);
}

.clients-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.clients-media img {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: saturate(0.6) contrast(1.05) brightness(0.78);
  transition: opacity 1.1s ease;
  will-change: transform, opacity;
}

.clients-media img.is-active { opacity: 1; }

.clients-media img[data-client="gov"]     { object-position: center 60%; }
.clients-media img[data-client="law"]     { object-position: center 60%; }
.clients-media img[data-client="hnw"]     { object-position: center 55%; }
.clients-media img[data-client="family"]  { object-position: center 40%; }
.clients-media img[data-client="special"] { object-position: center 45%; }

.clients-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, var(--navy-950) 0%, rgba(10, 20, 32, 0.45) 22%, rgba(10, 20, 32, 0.45) 78%, var(--navy-950) 100%),
    linear-gradient(to right, rgba(10, 20, 32, 0.55), rgba(10, 20, 32, 0.15) 60%, rgba(10, 20, 32, 0.35)),
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(10, 20, 32, 0.4) 100%);
}

.clients-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* giant ghost ordinal, right of the title, tracks the active card */
.clients-ordinal {
  position: absolute;
  top: calc(var(--section-pad) - 3rem);
  right: 1.5rem;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(10rem, 22vw, 19rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(208, 201, 183, 0.06);
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s ease;
}

@supports (-webkit-text-stroke: 1px black) {
  .clients-ordinal {
    color: transparent;
    -webkit-text-stroke: 1px rgba(208, 201, 183, 0.28);
  }
}

.clients-ordinal.is-swapping { opacity: 0; }

.clients .container { position: relative; z-index: 2; }

.clients .section-title,
.clients .eyebrow {
  text-shadow: 0 1px 2px rgba(4, 10, 18, 0.6), 0 2px 24px rgba(4, 10, 18, 0.7);
}

/* --- Cards --- */

.clients .client-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 3rem;
  border-top: none;
}

@media (min-width: 46rem) {
  .clients .client-grid { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
}

@media (min-width: 66rem) {
  .clients .client-grid { grid-template-columns: repeat(3, 1fr); }
}

.clients .client-card {
  position: relative;
  overflow: hidden;
  padding: 1.9rem 1.75rem 1.9rem;
  border: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 2px;
  background: rgba(13, 27, 42, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(242, 245, 249, 0.04);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.4s ease;
}

/* parchment hairline that draws across the top when active */
.clients .client-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--parchment), rgba(208, 201, 183, 0.2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* soft parchment bloom in the corner behind the ordinal */
.clients .client-card::after {
  content: "";
  position: absolute;
  top: -4rem;
  left: -4rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(208, 201, 183, 0.14), transparent 65%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.clients .client-card:hover,
.clients .client-card.is-active {
  transform: translateY(-4px);
  border-color: rgba(208, 201, 183, 0.45);
  background: rgba(13, 27, 42, 0.5);
  box-shadow: var(--shadow-card-hover), inset 0 1px 0 rgba(242, 245, 249, 0.06);
}

.clients .client-card:hover::before,
.clients .client-card.is-active::before { transform: scaleX(1); }

.clients .client-card:hover::after,
.clients .client-card.is-active::after { opacity: 1; }

.clients .card-index {
  position: relative;
  font-size: 2.9rem;
  margin-bottom: 1rem;
}

@supports (-webkit-text-stroke: 1px black) {
  .clients .client-card.is-active .card-index { -webkit-text-stroke-color: var(--parchment); }
}

.clients .client-card h3 { position: relative; font-size: 1.22rem; }
.clients .client-card p  { position: relative; margin-top: 0.7rem; }

.clients .client-card.is-active h3 { color: var(--parchment); }
.clients .client-card.is-active h3::after { transform: scaleX(1); }

@media (max-width: 48rem) {
  .clients-ordinal { display: none; }
  .clients-media img { filter: saturate(0.55) contrast(1.05) brightness(0.65); }
  .clients .client-card { padding: 1.6rem 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .clients-media img { transition: none; top: 0; height: 100%; }
  .clients .client-card,
  .clients .client-card::before,
  .clients .client-card::after,
  .clients-ordinal { transition: none; }
}

/* ============================================================
   The Firm :: three-theater triptych
   One fold: a short statement over three tall photo panels
   (war zones / top-secret operations / private sector) that
   stand as vertical spines at rest and open wide on hover,
   focus, or tap. Then a "three lineages" section whose ruled
   list lights up the matching ring in an overlapping-rings
   figure, and a one-line close. No cards, no ledgers.
   ============================================================ */

.firm-fold {
  position: relative;
  padding-top: clamp(7rem, 12vw, 9.5rem);
  background:
    radial-gradient(ellipse 55% 60% at 0% 0%, rgba(208, 201, 183, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 70% at 100% 20%, rgba(58, 73, 90, 0.28), transparent 65%),
    var(--navy-950);
}

@media (max-height: 720px) {
  .firm-fold { padding-top: 6rem; }
}

.firm-head {
  padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

.firm-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 6.4vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text-bright);
  text-wrap: balance;
  margin-bottom: 1.5rem;
}

.firm-lead {
  max-width: 40rem;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 300;
  color: var(--text);
}

/* --- The triptych --- */

.theaters {
  position: relative;
  display: flex;
  height: clamp(26rem, 64vh, 42rem);
  border-block: 1px solid var(--line-strong);
  background: var(--navy-950);
}

.theaters.reveal { transform: none; }

.theater {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: default;
  outline-offset: -3px;
  border-left: 1px solid var(--line);
  transition: flex 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.theater:first-child { border-left: none; }

.theater-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.theater-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.45) contrast(1.06) brightness(0.62);
  transform: scale(1.08);
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.8s ease, opacity 0.8s ease;
}

#theater-war .theater-media img        { object-position: 62% 50%; }
#theater-classified .theater-media img { object-position: 60% 50%; filter: saturate(0.2) contrast(1.1) brightness(0.55); }
#theater-private .theater-media img    { object-position: 50% 45%; }

/* scrim: dark floor for the copy, and a top fade so the ordinals read */
.theater-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(10, 20, 32, 0.92) 0%, rgba(10, 20, 32, 0.45) 38%, rgba(10, 20, 32, 0.12) 65%, rgba(10, 20, 32, 0.4) 100%),
    rgba(13, 27, 42, 0.28);
  transition: opacity 0.8s ease;
}

/* film grain, matching the rest of the site's photo layers */
.theater-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.theater-ord {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--taupe);
  transition: color 0.4s ease;
}

/* resting state: the theater's name runs up the spine */
.theater-label {
  position: absolute;
  left: 1.45rem;
  bottom: 1.6rem;
  z-index: 3;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-bright);
  white-space: nowrap;
  opacity: 0.85;
  text-shadow: 0 1px 12px rgba(4, 10, 18, 0.8);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* open state: the name lies down and the line unfolds beneath it */
.theater-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 clamp(1.5rem, 3vw, 2.6rem) clamp(1.6rem, 3vw, 2.4rem);
  opacity: 0;
  transform: translateY(0.9rem);
  transition: opacity 0.5s ease 0.05s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s;
  pointer-events: none;
}

.theater-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-bright);
  margin-bottom: 0.7rem;
  text-shadow: 0 1px 2px rgba(4, 10, 18, 0.6), 0 2px 24px rgba(4, 10, 18, 0.7);
}

.theater-name::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-top: 0.85rem;
  background: linear-gradient(to right, var(--parchment), rgba(208, 201, 183, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

.theater-line {
  max-width: 24rem;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text);
  text-shadow: 0 1px 12px rgba(4, 10, 18, 0.8);
}

/* --- Open: hover, keyboard focus, or a tap (main.js adds .is-open) --- */

@media (hover: hover) and (min-width: 48rem) {
  .theater:hover,
  .theater:focus-visible,
  .theater.is-open { flex-grow: 2.6; }

  .theaters:hover .theater:not(:hover),
  .theaters:has(.theater:focus-visible) .theater:not(:focus-visible) {
    flex-grow: 0.75;
  }

  .theaters:hover .theater:not(:hover) .theater-media img,
  .theaters:has(.theater:focus-visible) .theater:not(:focus-visible) .theater-media img {
    filter: saturate(0.3) contrast(1.06) brightness(0.4);
  }
}

@media (min-width: 48rem) {
  .theater:hover .theater-media img,
  .theater:focus-visible .theater-media img,
  .theater.is-open .theater-media img {
    transform: scale(1);
    filter: saturate(0.55) contrast(1.05) brightness(0.78);
  }

  #theater-classified:hover .theater-media img,
  #theater-classified:focus-visible .theater-media img,
  #theater-classified.is-open .theater-media img {
    filter: saturate(0.28) contrast(1.08) brightness(0.7);
  }

  .theater:hover .theater-label,
  .theater:focus-visible .theater-label,
  .theater.is-open .theater-label {
    opacity: 0;
    transform: rotate(180deg) translateY(-1rem);
  }

  .theater:hover .theater-copy,
  .theater:focus-visible .theater-copy,
  .theater.is-open .theater-copy {
    opacity: 1;
    transform: none;
  }

  .theater:hover .theater-name::after,
  .theater:focus-visible .theater-name::after,
  .theater.is-open .theater-name::after { transform: scaleX(1); }

  .theater:hover .theater-ord,
  .theater:focus-visible .theater-ord,
  .theater.is-open .theater-ord { color: var(--parchment); }
}

/* Touch screens at desktop widths: no hover, so a tap opens (main.js) */
@media (hover: none) and (min-width: 48rem) {
  .theater { cursor: pointer; }
  .theater.is-open { flex-grow: 2.6; }
  .theaters:has(.theater.is-open) .theater:not(.is-open) { flex-grow: 0.75; }
}

/* Phones: stack the panels; each keeps its copy in view */
@media (max-width: 47.99rem) {
  .theaters {
    flex-direction: column;
    height: auto;
  }

  .theater {
    flex: none;
    min-height: clamp(13rem, 34vh, 18rem);
    border-left: none;
    border-top: 1px solid var(--line);
  }

  .theater:first-child { border-top: none; }

  .theater-media img {
    transform: none;
    filter: saturate(0.5) contrast(1.05) brightness(0.68);
  }

  .theater-label { display: none; }

  .theater-copy {
    opacity: 1;
    transform: none;
    padding: 0 1.5rem 1.5rem;
  }

  .theater-name::after { transform: scaleX(1); }
  .theater-ord { top: 1.25rem; left: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .theater,
  .theater-media img,
  .theater-label,
  .theater-copy,
  .theater-name::after { transition: none; }
}

/* --- Lineage: ruled list + overlapping rings --- */

.lineage {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(208, 201, 183, 0.06), transparent 65%),
    radial-gradient(ellipse 70% 100% at 0% 100%, rgba(58, 73, 90, 0.22), transparent 70%),
    var(--navy-800);
  border-bottom: 1px solid var(--line);
}

.lineage-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 60rem) {
  .lineage-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 7rem);
  }
}

.lineage-lead {
  max-width: 34rem;
  font-size: 1.06rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 2.5rem;
}

.lineage-list {
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.lineage-row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lineage-index {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--taupe);
  line-height: 1.3;
  transition: color 0.3s ease;
}

.lineage-row h3 {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 500;
  color: var(--text-bright);
  line-height: 1.3;
  margin-bottom: 0.3rem;
  transition: color 0.3s ease;
}

.lineage-row p {
  font-size: 0.93rem;
  font-weight: 300;
  color: var(--text);
  max-width: 30rem;
}

.lineage-row:hover,
.lineage-row.is-active { padding-left: 0.5rem; }

.lineage-row:hover h3,
.lineage-row.is-active h3 { color: var(--parchment); }

.lineage-row:hover .lineage-index,
.lineage-row.is-active .lineage-index { color: var(--parchment); }

/* the rings figure */

.lineage-rings {
  position: relative;
  width: min(100%, 30rem);
  margin-inline: auto;
  aspect-ratio: 1;
}

.lineage-rings svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rings-reticle {
  stroke: rgba(208, 201, 183, 0.22);
  stroke-width: 1;
  transform-origin: 200px 200px;
  animation: motif-spin 240s linear infinite;
}

.ring {
  stroke: rgba(208, 201, 183, 0.42);
  stroke-width: 1;
  fill: rgba(208, 201, 183, 0.015);
  transition: stroke 0.5s ease, fill 0.5s ease, stroke-width 0.5s ease;
  filter: drop-shadow(0 0 6px rgba(208, 201, 183, 0.18));
}

.ring-text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  fill: var(--taupe);
  transition: fill 0.4s ease;
}

.lineage-rings[data-active="military"]   .ring-military,
.lineage-rings[data-active="intel"]      .ring-intel,
.lineage-rings[data-active="enterprise"] .ring-enterprise {
  stroke: var(--parchment);
  fill: rgba(208, 201, 183, 0.07);
  filter: drop-shadow(0 0 10px rgba(208, 201, 183, 0.45));
}

.lineage-rings[data-active="military"]   .ring-text-military,
.lineage-rings[data-active="intel"]      .ring-text-intel,
.lineage-rings[data-active="enterprise"] .ring-text-enterprise {
  fill: var(--parchment);
}

/* the mark sits in the overlap of all three */
.rings-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9.5%;
  height: auto;
  translate: -50% -50%;
  filter: drop-shadow(0 0 14px rgba(208, 201, 183, 0.4));
  animation: motif-glow 6s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .rings-reticle,
  .rings-mark { animation: none; }
}

/* --- Close --- */

.firm-close {
  position: relative;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(ellipse 55% 80% at 50% 100%, rgba(58, 73, 90, 0.25), transparent 70%),
    var(--navy-900);
}

.firm-close .rule {
  width: 6rem;
  border-top: none;
  height: 1px;
  margin-inline: auto;
  background: linear-gradient(to right, rgba(208, 201, 183, 0), var(--parchment), rgba(208, 201, 183, 0));
}

.firm-close-text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.7vw, 2.1rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--text-bright);
  text-wrap: balance;
  margin-top: 2rem;
}

.firm-close-text em {
  font-style: normal;
  color: var(--parchment);
}

.firm-close-text .w {
  display: inline-block;
  opacity: 0.1;
  transform: translateY(0.25em);
  filter: blur(2px);
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
  transition-delay: calc(var(--i, 0) * 40ms);
}

.firm-close-text.visible .w {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .firm-close-text .w { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ============================================================
   Pricing :: two models
   The one page with no photograph. A type-only fold over a
   line-art rail that splits in two; Model I as six stations on
   a vertical rail that fills as you read (main.js sets
   --progress); a short "where the models divide" beat; Model II
   printed on parchment as a term sheet (a depth ladder and a
   base-plus-completion bar); then a ruled side-by-side.
   ============================================================ */

.price-fold {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100svh;
  padding-top: clamp(5.5rem, 12vh, 9rem);
  padding-bottom: clamp(1.5rem, 3vh, 3rem);
  background:
    radial-gradient(ellipse 50% 55% at 100% 0%, rgba(208, 201, 183, 0.07), transparent 60%),
    radial-gradient(ellipse 65% 70% at 0% 60%, rgba(58, 73, 90, 0.28), transparent 65%),
    var(--navy-950);
}

/* Short viewports: the fold still has to hold the title, the lead, and the
   whole switch, so the type gives way first. */
@media (max-height: 760px) {
  .price-fold { padding-top: 5.5rem; }
  .price-lead { font-size: 1rem; }
}

.price-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, min(6.4vw, 8vh), 5.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text-bright);
  text-wrap: balance;
  margin-bottom: 1.5rem;
}

.price-lead {
  max-width: 40rem;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 300;
  color: var(--text);
}

/* --- The switch: a through line and a diverging line, labels at the ends --- */
/* --fig is the drawn figure's height; the box is taller by --tail so the
   Model II label, which hangs below the branch line, stays inside the box
   (and inside the fold on a laptop screen). */

.switch {
  --fig: clamp(9rem, min(22vw, 24vh), 17rem);
  --tail: 5.75rem;
  position: relative;
  margin-top: clamp(2rem, 4vh, 4.5rem);
  height: calc(var(--fig) + var(--tail));
}

.price-fold .switch { flex-shrink: 0; }

.switch-figure {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: var(--fig);
  overflow: visible;
}

.rail {
  stroke: rgba(208, 201, 183, 0.32);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.rail-main { stroke: rgba(208, 201, 183, 0.6); }

.rail-node {
  fill: var(--navy-950);
  stroke: var(--parchment);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.rail-light {
  fill: var(--text-bright);
  filter: drop-shadow(0 0 4px rgba(208, 201, 183, 0.9));
}

/* wipe in left to right once the fold is on screen (the figure is scaled
   non-uniformly, so a dash-offset draw would come out short) */
.switch-figure {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch.visible .switch-figure { clip-path: inset(0 0 0 0); }

.switch .rail-node,
.switch .rail-light {
  opacity: 0;
  transition: opacity 0.6s ease 1.5s;
}

.switch.visible .rail-node,
.switch.visible .rail-light { opacity: 1; }

.switch-label {
  position: absolute;
  right: max(1.5rem, calc((100% - var(--container)) / 2));
  display: grid;
  gap: 0.2rem;
  text-align: right;
  text-decoration: none;
  color: var(--text);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.7s ease 1.1s, transform 0.7s ease 1.1s, color 0.25s ease;
}

.switch.visible .switch-label { opacity: 1; transform: none; }

/* through line sits at 1/3 of the figure, the branch settles at 2/3 */
.switch-label-main   { bottom: calc(var(--fig) * 0.667 + var(--tail) + 1.1rem); }
.switch-label-branch { top: calc(var(--fig) * 0.667 + 1.1rem); transition-delay: 1.5s, 1.5s, 0s; }

.switch-ord {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--taupe);
}

.switch-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 300;
  color: var(--text-bright);
  transition: color 0.25s ease;
}

.switch-note {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-dim);
}

.switch-label:hover .switch-name,
.switch-label:focus-visible .switch-name { color: var(--parchment); }

.switch-label-branch .switch-name { color: var(--text); }

/* Narrow screens: the figure has nowhere to run, so the labels stand alone */
@media (max-width: 48rem) {
  .price-fold { min-height: 0; }
  .switch {
    height: auto;
    display: grid;
    gap: 1.25rem;
    width: min(100% - 3rem, var(--container));
    margin-inline: auto;
  }
  .switch-figure { display: none; }
  .switch-label {
    position: static;
    text-align: left;
    padding-left: 1.25rem;
    border-left: 1px solid rgba(208, 201, 183, 0.5);
  }
  .switch-label-branch { border-left-color: rgba(208, 201, 183, 0.25); }
}

/* --- Home page: the same switch as a pricing teaser --- */

.models-teaser {
  overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 50% 55% at 100% 0%, rgba(208, 201, 183, 0.07), transparent 60%),
    radial-gradient(ellipse 65% 70% at 0% 70%, rgba(58, 73, 90, 0.28), transparent 65%),
    var(--navy-950);
}

.models-teaser .section-lead { margin-bottom: 0; }
.models-teaser .switch { margin-top: clamp(1.5rem, 3vw, 3rem); }
.models-teaser .models-cta { margin-top: 1.5rem; }

@media (max-width: 48rem) {
  .models-teaser .switch { margin-top: 2rem; }
}

/* --- Model heads (shared by both models) --- */

.model-head {
  max-width: 46rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.model-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.8vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-bright);
  text-wrap: balance;
  margin-bottom: 1.4rem;
}

.model-lead {
  font-size: 1.06rem;
  font-weight: 300;
  color: var(--text);
}

/* --- Model I: six stations on a rail that fills as you read --- */

.model-scoped {
  background:
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(58, 73, 90, 0.2), transparent 65%),
    var(--navy-900);
  border-top: 1px solid var(--line);
}

.stations {
  --progress: 0;
  --rail-col: 2rem;
  position: relative;
  list-style: none;
}

/* the rail, and the fill that climbs down it */
.stations::before,
.stations::after {
  content: "";
  position: absolute;
  left: calc(var(--rail-col) / 2 - 0.5px);
  top: 0;
  width: 1px;
}

.stations::before {
  bottom: 0;
  background: rgba(195, 206, 219, 0.14);
}

.stations::after {
  height: calc(var(--progress) * 100%);
  background: linear-gradient(to bottom, rgba(208, 201, 183, 0.5), var(--parchment));
  box-shadow: 0 0 10px rgba(208, 201, 183, 0.25);
}

.station {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-col) minmax(11rem, 0.55fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.station-marker {
  position: relative;
  height: 100%;
  min-height: 1px;
}

.station-dot {
  position: absolute;
  top: 2.9rem;
  left: 50%;
  width: 0.7rem;
  height: 0.7rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--navy-900);
  transition: border-color 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
}

.station-head,
.station-body {
  padding-block: 2.5rem 2.75rem;
  border-top: 1px solid var(--line);
  opacity: 0.4;
  transform: translateY(0.35rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.station:first-child .station-head,
.station:first-child .station-body { border-top-color: transparent; }

.station-ord {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--taupe);
  margin-bottom: 0.55rem;
  transition: color 0.5s ease;
}

.station-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text-bright);
}

.station-body p {
  max-width: 36rem;
  font-weight: 300;
}

.station-yield {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  margin-top: 1.2rem;
  font-size: 0.88rem;
  color: var(--parchment);
}

.station-yield span {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe);
}

.station.is-lit .station-head,
.station.is-lit .station-body { opacity: 1; transform: none; }

.station.is-lit .station-ord { color: var(--parchment); }

.station.is-lit .station-dot {
  border-color: var(--parchment);
  background: var(--parchment);
  box-shadow: 0 0 0 4px rgba(208, 201, 183, 0.12), 0 0 16px rgba(208, 201, 183, 0.55);
}

@media (max-width: 52rem) {
  .station {
    grid-template-columns: var(--rail-col) minmax(0, 1fr);
    column-gap: 1.25rem;
  }
  .station-head {
    grid-column: 2;
    padding-bottom: 0.9rem;
  }
  .station-body {
    grid-column: 2;
    border-top: none;
    padding-top: 0;
  }
  .station-marker { grid-row: 1 / span 2; }
  .station-dot { top: 3.1rem; }
}

/* how the estimate is expressed */
.terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line-strong);
}

.term-key {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: 0.7rem;
}

.term p {
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text);
}

@media (max-width: 40rem) {
  .terms { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --- The divide: a rail forks, one sentence --- */

.divide {
  position: relative;
  text-align: center;
  padding-block: clamp(4rem, 8vw, 6.5rem);
  background:
    radial-gradient(ellipse 45% 70% at 50% 100%, rgba(208, 201, 183, 0.08), transparent 70%),
    var(--navy-950);
}

.divide-figure {
  width: 5.5rem;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

/* uniform scale here, so the dash draw is exact */
.divide-figure .rail {
  vector-effect: none;
  stroke: rgba(208, 201, 183, 0.55);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.divide-figure .rail-branch { transition-delay: 0.35s; }
.divide-figure.visible .rail { stroke-dashoffset: 0; }

.divide-figure .rail-node {
  opacity: 0;
  transition: opacity 0.5s ease 1.2s;
}

.divide-figure.visible .rail-node { opacity: 1; }

.divide-text {
  max-width: 34rem;
  margin: 2rem auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 300;
  line-height: 1.42;
  color: var(--text-bright);
  text-wrap: balance;
}

.divide-text em {
  font-style: normal;
  color: var(--parchment);
}

.divide-text .w {
  display: inline-block;
  opacity: 0.1;
  transform: translateY(0.25em);
  filter: blur(2px);
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
  transition-delay: calc(var(--i, 0) * 40ms);
}

.divide-text.visible .w {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- Model II: printed on parchment --- */

.model-outcome {
  --ink: var(--navy-950);
  --ink-soft: #2a3646;
  --ink-dim: #4c5b6d;
  --ink-line: rgba(13, 27, 42, 0.16);
  --ink-line-strong: rgba(13, 27, 42, 0.42);
  position: relative;
  overflow: hidden;
  color: var(--ink-soft);
  background:
    radial-gradient(ellipse 60% 60% at 100% 0%, rgba(255, 252, 244, 0.5), transparent 65%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(153, 144, 125, 0.35), transparent 65%),
    linear-gradient(180deg, #d6cfbe, var(--parchment) 40%, #c8c1af);
}

/* paper grain */
.model-outcome::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.12;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.model-outcome .container { position: relative; z-index: 1; }

.model-outcome ::selection {
  background: var(--navy-900);
  color: var(--parchment);
}

.model-outcome .eyebrow { color: var(--navy-700); }
.model-outcome .eyebrow::before { background: linear-gradient(to right, var(--navy-700), transparent); }

.eyebrow-alt {
  margin-left: 0.2rem;
  padding-left: 0.9rem;
  border-left: 1px solid currentColor;
  font-weight: 400;
  letter-spacing: 0.22em;
  opacity: 0.7;
}

.model-outcome .model-title { color: var(--ink); }
.model-outcome .model-lead { color: var(--ink-soft); }

.schedules {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 62rem) {
  .schedules {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}

.schedule {
  border-top: 1px solid var(--ink-line-strong);
  padding-top: 1.6rem;
}

.schedule-ord {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.7rem;
}

.schedule-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
}

.schedule-for {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-dim);
}

.schedule-copy {
  margin-top: 1.4rem;
  max-width: 34rem;
  font-weight: 400;
  color: var(--ink-soft);
}

/* the depth ladder: door at the top, objective at the bottom */
.ladder {
  list-style: none;
  margin-top: 2rem;
  border-top: 1px solid var(--ink-line-strong);
}

.rung {
  --depth: 0;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  grid-template-areas:
    "ord name fee"
    "ord what fee";
  column-gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0.75rem 0.85rem 0.25rem;
  border-bottom: 1px solid var(--ink-line);
  background: rgba(13, 27, 42, calc(var(--depth) * 0.028));
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--depth) * 90ms + 200ms);
}

.schedule.visible .rung { opacity: 1; transform: none; }

.rung:nth-child(1) { --depth: 0; }
.rung:nth-child(2) { --depth: 1; }
.rung:nth-child(3) { --depth: 2; }
.rung:nth-child(4) { --depth: 3; }
.rung:nth-child(5) { --depth: 4; }
.rung:nth-child(6) { --depth: 5; }

.rung-ord {
  grid-area: ord;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

.rung-name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--ink);
}

.rung-what {
  grid-area: what;
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.rung-fee {
  grid-area: fee;
  align-self: center;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.rung-zero .rung-name { color: var(--ink-dim); font-weight: 300; }
.rung-zero .rung-fee { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 0.15rem; }

@media (max-width: 30rem) {
  .rung {
    grid-template-columns: 2rem minmax(0, 1fr);
    grid-template-areas:
      "ord name"
      "ord what"
      "ord fee";
    row-gap: 0.2rem;
  }
  .rung-fee { margin-top: 0.3rem; }
}

/* base plus mission complete: one bar, two shares (.share, since .split is the home page grid) */
.share {
  margin-top: 2.25rem;
}

.share-bar {
  display: flex;
  height: 2.6rem;
  gap: 3px;
}

.share-seg {
  display: block;
  height: 100%;
  transform-origin: left center;
}

.share-base {
  flex: 0 0 28%;
  border: 1px solid var(--ink-line-strong);
  background: rgba(13, 27, 42, 0.06);
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
}

.share-complete {
  flex: 1 1 auto;
  background: var(--navy-900);
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}

.schedule.visible .share-base { opacity: 1; }
.schedule.visible .share-complete { transform: none; }

.share-labels {
  display: flex;
  gap: 3px;
  margin-top: 0.8rem;
}

.share-label {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.share-label-base { flex: 0 0 28%; }
.share-label-complete { flex: 1 1 auto; }

.share-label b {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}

.share-label i {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--ink-dim);
}

.share-note {
  margin-top: 0.9rem;
  font-size: 0.76rem;
  color: var(--ink-dim);
}

.mission-terms {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-line);
}

.mission-terms dt {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.mission-terms dd {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* foot: outcomes priced this way, and the fine print */
.outcome-foot {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem clamp(2rem, 5vw, 5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--ink-line-strong);
}

@media (min-width: 56rem) {
  .outcome-foot { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

.outcome-list-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 1rem;
}

.outcome-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.outcome-list li {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--ink-line-strong);
  border-radius: 2px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.outcome-list li:hover {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--parchment);
}

.outcome-fine {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* --- Side by side: a ruled ledger --- */

.ledger-compare {
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(58, 73, 90, 0.2), transparent 70%),
    var(--navy-800);
  border-bottom: 1px solid var(--line);
}

.compare-table {
  margin-top: 1rem;
  border-top: 1px solid var(--line-strong);
}

.compare-row {
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  padding-block: 1.3rem;
  border-bottom: 1px solid var(--line);
}

.compare-row [role="rowheader"] {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
  padding-top: 0.2rem;
}

.compare-row [role="cell"] {
  font-size: 0.97rem;
  font-weight: 300;
  color: var(--text);
}

.compare-row [role="cell"]:last-child { color: var(--text-bright); }

.compare-row-head {
  padding-block: 1rem;
  border-bottom-color: var(--line-strong);
}

.compare-row-head [role="columnheader"] {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--parchment);
}

.compare-row-head em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-left: 0.6rem;
}

@media (max-width: 44rem) {
  .compare-row {
    grid-template-columns: 1fr;
    row-gap: 0.6rem;
  }
  .compare-row-head { display: none; }
  .compare-row [role="rowheader"] { margin-bottom: 0.2rem; }
  .compare-row [role="cell"] {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: 0.6rem;
  }
  .compare-row [role="cell"]::before {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--taupe);
    padding-top: 0.25rem;
  }
  .compare-row [role="cell"]:nth-child(2)::before { content: "I"; }
  .compare-row [role="cell"]:nth-child(3)::before { content: "II"; }
}

/* --- Reduced motion: everything drawn, lit, and still --- */
@media (prefers-reduced-motion: reduce) {
  .switch-figure { clip-path: none; transition: none; }
  .divide-figure .rail { stroke-dashoffset: 0; transition: none; }
  .switch .rail-node,
  .switch .switch-label,
  .divide-figure .rail-node { opacity: 1; transform: none; transition: none; }
  .rail-light { display: none; }
  .stations { --progress: 1; }
  .station-head,
  .station-body,
  .rung,
  .share-base { opacity: 1; transform: none; transition: none; }
  .share-complete { transform: none; transition: none; }
  .divide-text .w { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ============================================================
   Briefings :: full-fold hero with a format index, a ledger of
   three format plates (drawn glyphs, a live waveform), and the
   handling rules printed as a parchment cover sheet.
   ============================================================ */

/* --- Hero: the swarm photo, the three formats indexed beneath the actions --- */

.briefings-hero .hero-media img { object-position: center 42%; }

.briefings-hero .section-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  max-width: 40rem;
  text-shadow: 0 1px 12px rgba(4, 10, 18, 0.7);
}

.brief-index {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 48rem;
  margin-top: clamp(2.5rem, 5vh, 3.75rem);
  border-top: 1px solid var(--line-strong);
}

.brief-index li { border-right: 1px solid var(--line); }
.brief-index li:last-child { border-right: none; }

.brief-index a {
  position: relative;
  display: block;
  padding: 1.15rem 1.4rem 1.15rem 0;
  text-decoration: none;
  color: var(--text);
}

.brief-index li + li a { padding-left: 1.4rem; }

/* parchment hairline that draws across the top on hover */
.brief-index a::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--parchment);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.brief-index a:hover::before,
.brief-index a:focus-visible::before { transform: scaleX(1); }

.bi-code {
  display: block;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--taupe);
  margin-bottom: 0.5rem;
}

.bi-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-bright);
  text-shadow: 0 1px 12px rgba(4, 10, 18, 0.7);
  transition: color 0.25s ease;
}

.brief-index a:hover .bi-name { color: var(--parchment); }

.bi-cadence {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text-dim);
}

@media (max-width: 34rem) {
  .brief-index { grid-template-columns: 1fr; }
  .brief-index li { border-right: none; border-bottom: 1px solid var(--line); }
  .brief-index li:last-child { border-bottom: none; }
  .brief-index a { padding: 0.85rem 0; }
  .brief-index li + li a { padding-left: 0; }
  .bi-code { float: right; margin: 0.2rem 0 0 1rem; }
}

@media (max-height: 720px) {
  .briefings-hero .eyebrow { margin-bottom: 1rem; }
  .briefings-hero .page-title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: 1.1rem; }
  .briefings-hero .section-lead { font-size: 1rem; max-width: 36rem; margin-bottom: 1.5rem; }
  .briefings-hero .brief-index { margin-top: 1.25rem; }
  .briefings-hero .brief-index a { padding-block: 0.75rem; }
  .briefings-hero .bi-cadence { display: none; }
}

/* --- Formats: a ledger of three plates over a broadcasting signal --- */

.formats {
  overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(208, 201, 183, 0.05), transparent 65%),
    var(--navy-900);
}

.formats .container { position: relative; z-index: 1; }

.signal-motif {
  position: absolute;
  top: -6rem;
  right: -8rem;
  width: min(38rem, 50vw);
  aspect-ratio: 1;
  color: var(--parchment);
  opacity: 0.38;
  pointer-events: none;
  z-index: 0;
  animation: motif-drift 34s ease-in-out infinite alternate;
  will-change: transform;
}

.signal-motif::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(208, 201, 183, 0.22) 0%,
    rgba(208, 201, 183, 0.07) 42%,
    rgba(208, 201, 183, 0) 68%
  );
  animation: motif-glow 12s ease-in-out infinite alternate;
}

.signal-motif svg {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 0.6;
  filter: drop-shadow(0 0 1px rgba(208, 201, 183, 0.8)) drop-shadow(0 0 14px rgba(208, 201, 183, 0.3));
}

.signal-motif .ring {
  opacity: 0.2;
  animation: ring-pulse 5.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);
}

@keyframes ring-pulse {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 0.75; }
}

.format-list {
  list-style: none;
  margin-top: 3rem;
  border-top: 1px solid var(--line-strong);
}

.format {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 3rem;
  padding-block: clamp(2.2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 6rem;
}

@media (min-width: 58rem) {
  .format { grid-template-columns: 9rem minmax(0, 1fr) 18rem; }
}

/* parchment hairline that draws across the top when the reader is on the row */
.format::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--parchment);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.format:hover::before,
.format:focus-within::before { transform: scaleX(1); }

.format-mark {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.format-code {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--taupe);
}

.glyph {
  width: 4.25rem;
  height: 4.25rem;
  fill: none;
  stroke: var(--parchment);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  overflow: visible;
  opacity: 0.78;
  filter: drop-shadow(0 0 8px rgba(208, 201, 183, 0.18));
  transition: opacity 0.35s ease, filter 0.35s ease;
}

.format:hover .glyph {
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(208, 201, 183, 0.35));
}

/* strokes draw in once the row reveals, in the order --d gives them */
.glyph .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s ease;
  transition-delay: var(--d, 0s);
}

.format.visible .glyph .draw { stroke-dashoffset: 0; }

/* the video frame: reticle corners that step outward on hover */
.glyph-frame .corner { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.format:hover .c-tl { transform: translate(-3px, -3px); }
.format:hover .c-tr { transform: translate(3px, -3px); }
.format:hover .c-br { transform: translate(3px, 3px); }
.format:hover .c-bl { transform: translate(-3px, 3px); }

/* the weekly: a waveform that breathes once it is on screen */
.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.wave i {
  display: block;
  width: 3px;
  height: var(--h, 50%);
  border-radius: 2px;
  background: var(--parchment);
  transform: scaleY(0.2);
  transform-origin: center;
  animation: wave-bar 1.7s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -0.19s);
  animation-play-state: paused;
}

.format.visible .wave i { animation-play-state: running; }

@keyframes wave-bar {
  0%   { transform: scaleY(0.2); opacity: 0.55; }
  100% { transform: scaleY(1); opacity: 1; }
}

.format-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.2vw, 1.8rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--text-bright);
  transition: color 0.25s ease;
}

.format:hover .format-body h3 { color: var(--parchment); }

.format-cadence {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text-dim);
}

.format-body p:not(.format-cadence) {
  margin-top: 1.1rem;
  max-width: 36rem;
  font-size: 0.95rem;
  font-weight: 300;
}

.format-spec {
  align-self: start;
  border-left: 1px solid var(--line);
  padding-left: 1.5rem;
}

.format-spec div {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.format-spec div:last-child { border-bottom: none; }

.format-spec dt {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
  padding-top: 0.2em;
}

.format-spec dd {
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--text);
}

@media (max-width: 58rem) {
  .format-mark { flex-direction: row; align-items: center; gap: 1.5rem; }
  .glyph { width: 3.25rem; height: 3.25rem; }
  .format-spec { border-left: none; padding-left: 0; border-top: 1px solid var(--line); }
}

/* --- Handling: the rules printed as a cover sheet --- */

.handling {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(58, 73, 90, 0.22), transparent 70%),
    var(--navy-900);
}

.cover-sheet {
  --ink: var(--navy-950);
  --ink-soft: #2a3646;
  --ink-dim: #4c5b6d;
  --ink-line: rgba(13, 27, 42, 0.16);
  --ink-line-strong: rgba(13, 27, 42, 0.42);
  --sheet-x: clamp(1.5rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
  margin-top: 3rem;
  color: var(--ink-soft);
  border-radius: 2px;
  background:
    radial-gradient(ellipse 60% 60% at 100% 0%, rgba(255, 252, 244, 0.5), transparent 65%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(153, 144, 125, 0.35), transparent 65%),
    linear-gradient(180deg, #d6cfbe, var(--parchment) 40%, #c8c1af);
  box-shadow:
    0 1px 0 rgba(255, 252, 244, 0.45) inset,
    0 2px 4px rgba(4, 10, 18, 0.5),
    0 40px 80px -30px rgba(4, 10, 18, 0.9);
}

/* paper grain */
.cover-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.12;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cover-sheet > * { position: relative; z-index: 1; }

.cover-sheet ::selection {
  background: var(--navy-900);
  color: var(--parchment);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem var(--sheet-x);
  border-bottom: 1px solid var(--ink-line-strong);
}

.sheet-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.sheet-label strong { font-weight: 600; color: var(--ink); }

.sheet-label span {
  margin-left: 0.6rem;
  padding-left: 0.9rem;
  border-left: 1px solid currentColor;
}

/* the stamp: two thin rules, a little off square, pressed lightly */
.stamp {
  flex-shrink: 0;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
  transform: rotate(-4deg);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-indent: 0.3em;
  color: var(--ink);
  opacity: 0.55;
  mix-blend-mode: multiply;
}

@media (max-width: 40rem) {
  .sheet-head { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .sheet-label span {
    display: block;
    margin: 0.35rem 0 0;
    padding-left: 0;
    border-left: none;
  }
  .stamp { transform: rotate(-3deg); margin-left: 0.25rem; }
}

.clauses {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
}

.clause {
  padding: clamp(1.75rem, 3.5vw, 2.6rem) var(--sheet-x);
  border-bottom: 1px solid var(--ink-line);
}

@media (min-width: 46rem) {
  .clauses { grid-template-columns: 1fr 1fr; }
  .clause:nth-child(odd) { border-right: 1px solid var(--ink-line); }
  .clause:nth-last-child(-n + 2) { border-bottom: none; }
}

.clause-num {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--ink-dim);
}

.clause-num::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: linear-gradient(to right, var(--ink-dim), transparent);
}

.clause h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.clause p {
  max-width: 30rem;
  font-size: 0.93rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.clause a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-line-strong);
  transition: border-color 0.2s ease;
}

.clause a:hover { border-bottom-color: var(--ink); }

.sheet-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  padding: 1.1rem var(--sheet-x);
  border-top: 1px solid var(--ink-line-strong);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-dim);
}

/* --- Closing: two actions side by side --- */

.closing-cta .section-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* --- Reduced motion: everything drawn, lit, and still --- */

@media (prefers-reduced-motion: reduce) {
  .signal-motif,
  .signal-motif::before,
  .signal-motif .ring { animation: none; }
  .signal-motif .ring { opacity: 0.4; }
  .glyph .draw { stroke-dashoffset: 0; transition: none; }
  .wave i { animation: none; transform: scaleY(1); }
  .brief-index a::before,
  .format::before,
  .glyph-frame .corner { transition: none; }
}

/* ============================================================
   EMERGENCY PAGE (emergency.html)
   ------------------------------------------------------------
   Read under duress, on a bad connection, possibly one handed.
   Three rules govern everything below:
     1. The channels are painted by the first frame. No .reveal,
        no parallax, no JS dependency anywhere above the form.
     2. Every target clears 3rem of height so a shaking thumb
        still lands on it.
     3. Ember (--ember) appears here and nowhere else on the site,
        so the emergency route never reads as one more CTA.
   ============================================================ */

.emergency-page {
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(212, 100, 58, 0.13), transparent 62%),
    var(--navy-900);
}

.er-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Fold ---------- */

.er-fold {
  padding-top: clamp(7.5rem, 15vw, 10.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.er-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ember-bright);
  margin-bottom: 1.2rem;
}

.er-pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 0 rgba(212, 100, 58, 0.6);
  animation: er-pulse 2.4s ease-out infinite;
  flex-shrink: 0;
}

@keyframes er-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 100, 58, 0.55); }
  70%  { box-shadow: 0 0 0 0.7rem rgba(212, 100, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 100, 58, 0); }
}

.er-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text-bright);
  margin-bottom: 1.2rem;
}

.er-lead {
  max-width: 46rem;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  font-weight: 300;
  color: var(--text);
  margin-bottom: 1.8rem;
}

/* The one thing that outranks us. */
.er-999 {
  max-width: 46rem;
  border-left: 2px solid var(--ember);
  background: linear-gradient(90deg, var(--ember-dim), transparent 80%);
  padding: 0.95rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 2.5rem;
}

.er-999 strong {
  font-weight: 500;
  color: var(--text-bright);
}

/* ---------- Channels ---------- */

.channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  list-style: none;
}

@media (min-width: 48rem) {
  .channels { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .channels > li:first-child { grid-column: 1 / -1; }
}

.channel {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-height: 4.6rem;
  padding: 1rem 1.2rem;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: rgba(19, 33, 47, 0.75);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, background-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}

.channel:hover,
.channel:focus-visible {
  border-color: var(--ember);
  background: rgba(30, 39, 47, 0.9);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.channel-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212, 100, 58, 0.35);
  border-radius: 50%;
  color: var(--ember-bright);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.channel-icon svg { width: 1.3rem; height: 1.3rem; }

.channel:hover .channel-icon,
.channel:focus-visible .channel-icon {
  background: var(--ember-dim);
  border-color: var(--ember);
}

.channel-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.channel-kind {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe);
}

.channel-value {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-bright);
  overflow-wrap: anywhere;
}

.channel-note {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-dim);
}

.channel-arrow {
  margin-left: auto;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-dim);
  transition: color 0.2s ease, transform 0.2s ease;
}

.channel:hover .channel-arrow,
.channel:focus-visible .channel-arrow {
  color: var(--ember-bright);
  transform: translateX(3px);
}

/* The call button is the one we want people to hit first. */
.channel-primary {
  border-color: var(--ember);
  background:
    linear-gradient(120deg, rgba(212, 100, 58, 0.18), rgba(19, 33, 47, 0.8) 55%);
}

.channel-primary .channel-icon {
  background: var(--ember);
  border-color: var(--ember);
  color: #140a06;
}

.channel-primary:hover .channel-icon,
.channel-primary:focus-visible .channel-icon {
  background: var(--ember-bright);
  border-color: var(--ember-bright);
}

.channel-primary .channel-value { font-size: clamp(1.25rem, 3.4vw, 1.9rem); }
.channel-primary .channel-kind { color: var(--ember-bright); }

.er-jump {
  margin-top: 1.4rem;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text-dim);
}

.er-jump a {
  color: var(--parchment);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.er-jump a:hover { border-bottom-color: var(--parchment); }

/* ---------- Request: form beside the standing instructions ---------- */

.er-request {
  border-top: 1px solid var(--line);
  background: rgba(10, 20, 32, 0.45);
}

.er-request-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 4.5rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .er-request-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.er-form { margin-top: 2.2rem; }

.er-form .form-field input::placeholder,
.er-form .form-field textarea::placeholder {
  color: var(--text-dim);
  opacity: 0.6;
}

.er-form .form-field textarea { min-height: 6.5rem; }

/* --- Chip sets: tappable answers instead of another dropdown --- */

.chip-set {
  border: none;
  margin-bottom: 1.6rem;
}

.chip-set legend {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.7rem;
  padding: 0;
}

.chip-set legend .optional {
  text-transform: none;
  letter-spacing: 0.05em;
  font-weight: 400;
  opacity: 0.7;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip { cursor: pointer; }

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: block;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(10, 20, 32, 0.55);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.6rem 0.9rem;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.chip:hover span { border-color: var(--taupe); color: var(--text-bright); }

.chip input:checked + span {
  background: var(--ember);
  border-color: var(--ember);
  color: #140a06;
}

.chip input:focus-visible + span {
  outline: 2px solid var(--parchment);
  outline-offset: 2px;
}

.er-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 1.8rem;
}

/* Same reasoning as .checkbox: the label is the target, so give it a thumb's
   worth of height. This one matters more, it is read under duress. */
@media (max-width: 60rem) {
  .er-check { padding-block: 0.6rem; margin-bottom: 1.4rem; }
}

.er-check input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--ember);
  flex-shrink: 0;
}

.btn-alert {
  background: linear-gradient(180deg, var(--ember-bright), var(--ember));
  border-color: var(--ember);
  color: #140a06;
  box-shadow: 0 1px 2px rgba(4, 10, 18, 0.6), 0 8px 24px -8px rgba(212, 100, 58, 0.45);
}

.btn-alert:hover {
  background: linear-gradient(180deg, #f4906a, #de6f45);
  box-shadow: 0 2px 4px rgba(4, 10, 18, 0.6), 0 12px 32px -8px rgba(212, 100, 58, 0.55);
  transform: translateY(-1px);
}

.btn-alert:disabled {
  opacity: 0.55;
  cursor: progress;
  transform: none;
}

/* --- Aside: what happens next, and how to stay safe meanwhile --- */

.er-aside {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.2rem, 3vw, 2rem);
}

@media (max-width: 61.999rem) {
  .er-aside {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 2.5rem;
  }
}

.er-aside-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: 1.4rem;
}

.er-aside-title:not(:first-child) { margin-top: 2.8rem; }

.er-steps {
  list-style: none;
  display: grid;
  gap: 1.5rem;
}

.er-steps li {
  display: grid;
  grid-template-columns: 2.3rem 1fr;
  gap: 0 0.8rem;
}

.er-step-n {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--ember-bright);
  line-height: 1.5;
}

.er-steps h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-bright);
  margin-bottom: 0.25rem;
}

.er-steps p {
  grid-column: 2;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text-dim);
}

.er-steps em { font-style: italic; color: var(--text); }

.er-safety {
  list-style: none;
  display: grid;
  gap: 0.8rem;
}

.er-safety li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text-dim);
}

.er-safety li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 1px;
  background: var(--taupe);
}

/* ---------- Closing ---------- */

.er-closing {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--line);
  text-align: center;
}

.er-closing .rule { margin-inline: auto; }

.er-closing-line {
  font-size: 1.02rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 2rem;
}

.er-closing-num {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
}

.er-closing-num a {
  color: var(--text-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 100, 58, 0.5);
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}

.er-closing-num a:hover { border-bottom-color: var(--ember); color: var(--ember-bright); }

.er-closing-alt {
  margin-top: 1.6rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-dim);
}

.er-closing-alt a {
  color: var(--parchment);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.er-closing-alt a:hover { border-bottom-color: var(--parchment); }

@media (prefers-reduced-motion: reduce) {
  .er-pulse { animation: none; }
  .channel,
  .channel-arrow,
  .btn-alert:hover { transition: none; transform: none; }
}