/* =========================================================================
   TIM'S CLEANING / NYCLEANING FORCES
   Concept: field operations. Night recon (the light reveals what fabric
   hides) + the after-action log (400 real customer debriefs).
   Palette is the brand's own military drab: black, olive, khaki, sand.
   Fluid-first: everything scales continuously from 320px to 1600px.
   ========================================================================= */

/* ---------- Fonts, self-hosted, zero third-party requests ---------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("/assets/fonts/PlexMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("/assets/fonts/PlexMono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Drab scale */
  --black: #0a0b08;
  --od-900: #101208;
  --od-850: #15180e;
  --od-800: #1b1f13;
  --od-700: #262b1b;
  --od-600: #343a26;

  --olive: #686b47;
  --khaki: #9c8b62;
  --khaki-lt: #c4b085;
  --khaki-dk: #6b5d3b;

  /* Field-manual paper */
  --sand: #e9e4d6;
  --sand-2: #ded7c5;
  --sand-3: #cec6ae;

  --signal: #c4462c;
  /* Same red, dark enough to be read as text on the sand surfaces. */
  --signal-ink: #9a3320;
  /* Availability, not alarm: the strip says the crew is reachable right now. */
  --ok: #7bc24a;

  --text: var(--od-800);
  /* Muted greys sat at 4.49:1 and 3.06:1, both under the 4.5 needed at body
     size. Darkened and lightened respectively until they clear it. */
  --text-muted: #4f5440;
  --on-dark: #ddd8c8;
  --on-dark-muted: #a7ab90;

  --line: rgb(27 31 19 / 0.16);
  --line-strong: rgb(27 31 19 / 0.3);
  --line-dark: rgb(196 176 133 / 0.18);
  --line-dark-strong: rgb(196 176 133 / 0.38);

  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "PlexMono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Fluid type, 320px -> 1600px */
  --step--2: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);
  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.07rem + 0.27vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.26rem + 0.55vw, 1.75rem);
  --step-3: clamp(1.625rem, 1.4rem + 1.09vw, 2.375rem);
  --step-4: clamp(2rem, 1.56rem + 2.19vw, 3.5rem);
  --step-5: clamp(2.5rem, 1.77rem + 3.67vw, 5rem);
  --step-6: clamp(3rem, 1.6rem + 7vw, 7.75rem);

  /* Fluid space */
  --sp-3xs: clamp(0.25rem, 0.24rem + 0.03vw, 0.3125rem);
  --sp-2xs: clamp(0.5rem, 0.48rem + 0.08vw, 0.625rem);
  --sp-xs: clamp(0.75rem, 0.72rem + 0.16vw, 0.9375rem);
  --sp-s: clamp(1rem, 0.97rem + 0.16vw, 1.125rem);
  --sp-m: clamp(1.5rem, 1.43rem + 0.35vw, 1.875rem);
  --sp-l: clamp(2rem, 1.82rem + 0.9vw, 2.75rem);
  --sp-xl: clamp(3rem, 2.65rem + 1.76vw, 4.5rem);
  --sp-2xl: clamp(4rem, 3.3rem + 3.52vw, 7rem);
  --sp-3xl: clamp(5rem, 3.77rem + 6.17vw, 9.5rem);

  --wrap: 92rem;
  --wrap-narrow: 48rem;
  --gutter: clamp(1.125rem, 0.7rem + 2.1vw, 3.5rem);

  --r: 3px; /* Field kit, not consumer app. Corners stay sharp. */
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur: 0.28s;

  --header-h: 5rem;
  --strip-h: 2.375rem;

  /* Light surface is the page default; dark sections override these. */
  --lede-color: var(--text-muted);
  --heading-color: var(--od-800);
  --tag-color: var(--khaki-dk);
  --panel-bg: rgb(255 255 255 / 0.45);
  --panel-bg-hover: rgb(255 255 255 / 0.75);
  --panel-line: var(--line);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
body {
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}
img,
video {
  height: auto;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--khaki);
  outline-offset: 3px;
}

/* ---------- Type ---------- */
h1,
h2,
h3,
h4,
.display {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 78;
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 {
  font-size: var(--step-5);
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-2);
  line-height: 1.02;
}
h4 {
  font-size: var(--step-1);
}
p {
  text-wrap: pretty;
}
.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
}
/* Type colour comes from the surface, declared once below. Maintaining a list
   of section classes on every rule is how .sect--darker got left off and the
   eyebrow labels ended up dark brown on near-black at 3:1. */
.lede {
  color: var(--lede-color);
}
h1,
h2,
h3,
h4 {
  color: var(--heading-color);
}

/* Mono service label: the voice of the whole system */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tag-color);
}
.tag::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.tag--plain::before {
  display: none;
}

.mono {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Layout ---------- */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}
/* Long-form pages keep a readable measure, but the column starts on the same
   left edge as every other block on the site. Centring the narrow box made the
   left edge jump between the article and the sections under it. */
.wrap--narrow {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow > * {
  max-width: var(--wrap-narrow);
}
.sect {
  padding-block: var(--sp-2xl);
  position: relative;
}
.sect--tight {
  padding-block: var(--sp-xl);
}
.sect--dark {
  background: var(--od-900);
  color: var(--on-dark);
}
.sect--darker {
  background: var(--black);
  color: var(--on-dark);
}
.sect--sand2 {
  background: var(--sand-2);
}

/* Plotting grid, the quiet texture under every dark block */
.sect--dark::before,
.sect--darker::before,
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.5rem);
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 20%, transparent 78%);
}
.sect > .wrap,
.hero > .wrap {
  position: relative;
  z-index: 1;
}

.sect__head {
  display: grid;
  gap: var(--sp-s);
  max-width: 54rem;
  margin-bottom: var(--sp-xl);
}
.sect__head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.grid {
  display: grid;
  gap: var(--sp-m);
}
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.grid--auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
}
.grid--auto-lg {
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
}
.stack {
  display: grid;
  gap: var(--sp-s);
  align-content: start;
}

/* Viewfinder corner brackets, the recurring HUD motif */
.brackets {
  position: relative;
}
.brackets::before,
.brackets::after {
  content: "";
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  border: 1.5px solid var(--khaki);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.brackets::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}
.brackets::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

/* ---------- Status strip ---------- */
.strip {
  background: var(--black);
  color: var(--on-dark-muted);
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
}
.strip__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-m);
  height: var(--strip-h);
  white-space: nowrap;
}
.strip b {
  color: var(--khaki-lt);
  font-weight: 600;
}
.strip__live {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--sand);
}
.strip__live::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ok);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(123 194 74 / 0.55);
  }
  70% {
    box-shadow: 0 0 0 0.6rem rgb(123 194 74 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(123 194 74 / 0);
  }
}
/* The area-of-operations list is the only expendable item in the strip, so it
   is the one that shrinks and truncates. Without this it pushed "Standby 24/7"
   past the right edge, where overflow:hidden silently ate it. */
.strip__ao {
  display: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strip__standby {
  margin-left: auto;
  flex: none;
}
@media (min-width: 60rem) {
  .strip__ao {
    display: block;
  }
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgb(10 11 8 / 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
  color: var(--sand);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3.2vw, 3.5rem);
  min-height: var(--header-h);
  padding-block: 0.5rem;
}
.header__logo img {
  width: clamp(8.5rem, 13vw, 12rem);
  height: auto;
}
.header__nav {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: clamp(1.1rem, 2.1vw, 2.5rem);
}
.header__nav a {
  position: relative;
  padding: 0.7rem 0;
  font-family: var(--f-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
  transition: color var(--dur) var(--ease);
}
.header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.25rem;
  height: 1.5px;
  background: var(--khaki);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.header__nav a:hover,
.header__nav a[aria-current="page"] {
  color: var(--khaki-lt);
}
.header__nav a:hover::after,
.header__nav a[aria-current="page"]::after {
  transform: scaleX(1);
}
.header__cta {
  display: none;
  align-items: center;
  gap: clamp(1rem, 1.6vw, 1.75rem);
  /* Separate the action group from the nav so the right side does not read as
     one undifferentiated run of items. */
  padding-left: clamp(0.5rem, 1.6vw, 1.75rem);
  border-left: 1px solid var(--line-dark);
}
.header__phone {
  display: grid;
  gap: 0.1rem;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 82;
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1;
  color: var(--sand);
  white-space: nowrap;
}
.header__phone span {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--khaki-lt);
}

.burger {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0 0.7rem;
  background: none;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r);
  cursor: pointer;
}
.burger span {
  display: block;
  height: 1.5px;
  background: var(--sand);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 55;
  background: var(--black);
  padding: var(--sp-l) var(--gutter) var(--sp-2xl);
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 0;
  transform: translateY(-6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.mobile-nav[data-open="true"] {
  transform: none;
  opacity: 1;
  visibility: visible;
}
/* :not(.btn) matters. Without it this rule also hit the call button, which is
   an <a>, and beat .btn on specificity: the button was being set in display
   type at heading size and its label broke out of the box. */
.mobile-nav a:not(.btn) {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-block: 0.7em;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--f-display);
  font-variation-settings: "wdth" 80;
  font-size: var(--step-3);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sand);
}
.mobile-nav a i {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-style: normal;
  letter-spacing: 0.12em;
  color: var(--khaki);
}
.mobile-nav a:not(.btn):hover,
.mobile-nav a:not(.btn)[aria-current="page"] {
  color: var(--khaki-lt);
}
.mobile-nav .btn {
  margin-top: var(--sp-l);
  /* The number must never break across lines. */
  white-space: nowrap;
}
body[data-nav-open="true"] {
  overflow: hidden;
}

@media (min-width: 64rem) {
  .burger,
  .mobile-nav {
    display: none;
  }
  .header__nav,
  .header__cta {
    display: flex;
  }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--khaki);
  --btn-fg: var(--black);
  --btn-bd: var(--khaki);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1em 1.7em;
  min-height: 3rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover {
  --btn-bg: var(--khaki-lt);
  --btn-bd: var(--khaki-lt);
  transform: translateY(-1px);
}
.btn:active {
  transform: none;
}
/* Ghost buttons take their ink from the surface they sit on, and the surface
   declares it once. Listing every dark section on the button rule is how the
   phone button in the closing band ended up dark-on-black and invisible. */
:root {
  --ghost-fg: var(--text);
  --ghost-bd: var(--line-strong);
  --ghost-fg-hover: var(--khaki-dk);
}
.hero,
.cta,
.footer,
.callbar,
.sect--dark,
.sect--darker,
.on-dark {
  --ghost-fg: var(--sand);
  --ghost-bd: var(--line-dark-strong);
  --ghost-fg-hover: var(--khaki-lt);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ghost-fg);
  --btn-bd: var(--ghost-bd);
}
.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-fg: var(--ghost-fg-hover);
  --btn-bd: var(--khaki);
}
.btn--dark {
  --btn-bg: var(--od-800);
  --btn-fg: var(--sand);
  --btn-bd: var(--od-800);
}
.btn--dark:hover {
  --btn-bg: var(--black);
  --btn-bd: var(--black);
}
.btn--lg {
  padding: 1.15em 2em;
  font-size: var(--step--1);
}
.btn--wide {
  width: 100%;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.link-mono {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--khaki-dk);
}
.link-mono svg {
  transition: transform var(--dur) var(--ease);
}
.link-mono:hover svg,
.card:hover .link-mono svg {
  transform: translateX(4px);
}
.sect--dark .link-mono {
  color: var(--khaki-lt);
}

/* =========================================================================
   HERO / NIGHT RECON
   The page opens in the dark. A light follows the pointer and reveals the
   contamination field underneath. On touch devices the light sweeps itself.
   ========================================================================= */
.hero {
  position: relative;
  background: var(--black);
  color: var(--on-dark);
  overflow: hidden;
  padding-block: var(--sp-2xl);
  --mx: 62%;
  --my: 38%;
  --beam: clamp(9rem, 24vw, 17rem);
}

/* Layer 1: what lives in the fabric, only visible inside the beam */
.recon {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(
    circle var(--beam) at var(--mx) var(--my),
    #000 0%,
    rgb(0 0 0 / 0.75) 42%,
    transparent 70%
  );
  mask-image: radial-gradient(
    circle var(--beam) at var(--mx) var(--my),
    #000 0%,
    rgb(0 0 0 / 0.75) 42%,
    transparent 70%
  );
}
/* Speck field: the dust itself */
.recon::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(circle, rgb(196 176 133 / 0.55) 0.6px, transparent 0.7px),
    radial-gradient(circle, rgb(104 107 71 / 0.5) 0.5px, transparent 0.6px);
  background-size: 19px 23px, 31px 29px;
  background-position: 0 0, 7px 11px;
}
.recon__words {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.55rem 1.5rem;
  padding: var(--sp-l) var(--gutter);
  font-family: var(--f-mono);
  font-size: clamp(0.5625rem, 0.5rem + 0.3vw, 0.75rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--khaki);
  user-select: none;
}
.recon__words span {
  opacity: 0.85;
  white-space: nowrap;
}
.recon__words span:nth-child(3n) {
  color: var(--olive);
}
.recon__words span:nth-child(5n) {
  color: var(--signal);
  opacity: 0.6;
}

/* Layer 2: the beam glow itself */
.beam {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle calc(var(--beam) * 1.25) at var(--mx) var(--my),
    rgb(196 176 133 / 0.16) 0%,
    rgb(156 139 98 / 0.07) 38%,
    transparent 68%
  );
}
/* Reticle ring so the light reads as a tool, not a mouse-glow gimmick */
.beam::after {
  content: "";
  position: absolute;
  left: var(--mx);
  top: var(--my);
  width: calc(var(--beam) * 2);
  height: calc(var(--beam) * 2);
  margin: calc(var(--beam) * -1) 0 0 calc(var(--beam) * -1);
  border: 1px solid rgb(196 176 133 / 0.16);
  border-radius: 50%;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-xl);
  align-items: start;
}
.hero__title {
  font-size: var(--step-6);
  color: var(--sand);
  font-variation-settings: "wdth" 72;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.01em;
}
.hero__title em {
  font-style: normal;
  color: var(--khaki);
  /* Stencil break: the bar that cuts the letterform, drawn in negative space */
  -webkit-text-stroke: 0;
}
.hero__lede {
  max-width: 34rem;
}
/* Hidden once the estimate form sits beside the headline: at that point the
   button only scrolls to something the visitor is already looking at. */
@media (min-width: 62rem) {
  .hero__jump {
    display: none;
  }
}
.hero__hint {
  display: none;
  align-items: center;
  gap: 0.6em;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  transition: opacity 0.6s var(--ease);
}
.hero__hint::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--khaki);
}
.hero[data-touched="true"] .hero__hint {
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .hero__hint {
    display: inline-flex;
  }
}

/* Readout row under the headline */
.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 45%), 1fr));
  gap: var(--sp-s) var(--sp-m);
  padding-top: var(--sp-m);
  margin-top: var(--sp-2xs);
  border-top: 1px solid var(--line-dark-strong);
}
.readout div {
  display: grid;
  gap: 0.15rem;
}
.readout b {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 80;
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1;
  color: var(--khaki-lt);
}
.readout span {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(23rem, 28rem);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

/* Optical alignment: line-height 0.88 leaves the cap top sitting below the box
   top, so the headline reads as hanging lower than the form card next to it.
   This pulls the caps back onto the card's top edge. */
.hero__inner > .stack > .hero__title:first-child {
  margin-top: -0.073em;
}

/* =========================================================================
   REQUEST FORM / "CALL IT IN"
   ========================================================================= */
/* The card takes its lift from the surface, and the surface declares it once.
   Keying this to a list of section modifiers meant a plain light <section
   class="sect"> was never on the list, so the card kept a heavy drop shadow
   meant for dark backgrounds. Same failure as the ghost button had. */
:root {
  --card-bg: #f2eee3;
  --card-shadow: none;
}
/* One declaration of what a dark surface means. Every surface-dependent
   token belongs here, not spread across per-component selector lists. */
.hero,
.cta,
.sect--dark,
.sect--darker,
.footer,
.on-dark {
  --card-bg: var(--sand);
  --card-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
  --lede-color: var(--on-dark-muted);
  --heading-color: var(--sand);
  --tag-color: var(--khaki-lt);
  --panel-bg: rgb(196 176 133 / 0.04);
  --panel-bg-hover: rgb(196 176 133 / 0.09);
  --panel-line: var(--line-dark);
}
/* A light island inside a dark section has to reset the surface tokens, or it
   inherits them and paints sand type onto a sand card. */
.form-card {
  --heading-color: var(--od-800);
  --lede-color: var(--text-muted);
  --tag-color: var(--khaki-dk);
  --panel-bg: rgb(255 255 255 / 0.45);
  --panel-bg-hover: rgb(255 255 255 / 0.75);
  --panel-line: var(--line);
  --ghost-fg: var(--text);
  --ghost-bd: var(--line-strong);
  --ghost-fg-hover: var(--khaki-dk);
  position: relative;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--od-800);
  border-radius: var(--r);
  padding: clamp(1.25rem, 1rem + 1.3vw, 2rem);
  box-shadow: var(--card-shadow);
}
.form-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-s);
  padding-bottom: var(--sp-xs);
  margin-bottom: var(--sp-s);
  border-bottom: 1.5px solid var(--od-800);
}
.form-card__head h2,
.form-card__head h3 {
  font-size: var(--step-2);
}
.form-card__note {
  font-size: var(--step--1);
  color: var(--text-muted);
}

.form {
  display: grid;
  gap: var(--sp-s);
  margin-top: var(--sp-s);
}
.form__row {
  display: grid;
  gap: var(--sp-s);
}
@media (min-width: 26rem) {
  .form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.field > label,
.field-legend {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field-legend {
  padding: 0 0 0.4rem;
}
.req {
  color: var(--signal-ink);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  min-height: 3rem;
  background: rgb(255 255 255 / 0.6);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field textarea {
  min-height: 6.5rem;
  resize: vertical;
}
.field input:hover,
.field textarea:hover {
  border-color: var(--line-strong);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--khaki-dk);
}
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--signal);
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Photo attachment */
.field__hint {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0.75;
}
.file-field input[type="file"] {
  padding: 0.7rem 0.9rem;
  font-family: var(--f-mono);
  /* iOS zooms the whole page when a focused field is under 16px. The small
     type belongs on the button inside it, not on the field. */
  font-size: 1rem;
  cursor: pointer;
}
.file-field input[type="file"]::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.5rem 1rem;
  background: var(--od-800);
  color: var(--sand);
  border: 0;
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.file-field input[type="file"]::file-selector-button:hover {
  background: var(--black);
}
.file-field__list:empty {
  display: none;
}
.file-field__list {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  color: var(--khaki-dk);
}
.file-field__list[data-error] {
  color: var(--signal);
}

.picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(6rem, 100%), 1fr));
  gap: 0.375rem;
}
.picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.picker label {
  display: grid;
  place-items: center;
  gap: 0.15rem;
  min-height: 3.25rem;
  padding: 0.5rem 0.4rem;
  background: rgb(255 255 255 / 0.6);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.picker label:hover {
  border-color: var(--line-strong);
}
.picker input:checked + label {
  background: var(--od-800);
  border-color: var(--od-800);
  color: var(--sand);
}
.picker input:focus-visible + label {
  outline: 2px solid var(--khaki);
  outline-offset: 2px;
}

.form__status {
  display: none;
  font-size: var(--step--1);
  padding: 0.8rem 0.9rem;
  border-left: 3px solid;
  border-radius: 0 var(--r) var(--r) 0;
}
.form__status[data-state="ok"] {
  display: block;
  background: rgb(104 107 71 / 0.14);
  border-color: var(--olive);
  color: #3f4530;
}
.form__status[data-state="err"] {
  display: block;
  background: rgb(196 70 44 / 0.1);
  border-color: var(--signal);
  color: #8e2f1c;
}
.form__legal {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.form__legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================================
   SERVICE / UNIT CARDS
   ========================================================================= */
.unit {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  background: var(--od-900);
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.unit:hover {
  border-color: var(--khaki);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgb(10 11 8 / 0.28);
}
/* On a dark section the card would otherwise be the exact colour of its own
   background and vanish, leaving only a hairline. Lift it one step. */
.sect--dark .unit,
.sect--darker .unit {
  background: var(--od-800);
}
.sect--dark .unit:hover,
.sect--darker .unit:hover {
  box-shadow: none;
}

/* ---- Drawing panel ----
   The cards carry the drawings, not photographs. At card size a technical
   cut-away says what the service is faster than a cropped photo can, and the
   soil lifting out on hover is the proposition in one gesture. Photographs do
   the atmospheric work further down the page, where they run large. */
.unit__plate {
  position: relative;
  background: var(--black);
  border-bottom: 1px solid var(--line-dark-strong);
}
.unit__plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  opacity: 0.5;
}

.plate {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.plate__ink {
  fill: none;
  stroke: var(--khaki);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plate__wand {
  fill: rgb(156 139 98 / 0.14);
}
.plate__hatch,
.plate__guide,
.plate__weave line {
  stroke: rgb(156 139 98 / 0.4);
  stroke-width: 1;
}
.plate__guide {
  stroke-dasharray: 3 4;
}
.plate__quilt,
.plate__coil {
  stroke: rgb(196 176 133 / 0.55);
}
.plate__arrow {
  stroke: var(--khaki-lt);
  stroke-width: 1.5;
}
.plate__label {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  fill: rgb(196 176 133 / 0.6);
  stroke: none;
}
/* The soil is the point: hovering extracts it. */
.plate__soil circle {
  fill: var(--khaki-lt);
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease);
}
.unit:hover .plate__soil circle,
.unit:focus-visible .plate__soil circle {
  transform: translateY(-46px);
  opacity: 0;
}
.unit:hover .plate__soil circle:nth-child(3n) {
  transition-delay: 0.08s;
}
.unit:hover .plate__soil circle:nth-child(3n + 1) {
  transition-delay: 0.16s;
}

/* ---- Card text ---- */
.unit__body {
  display: grid;
  gap: var(--sp-xs);
  align-content: start;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
}
.unit__body h3 {
  color: var(--sand);
}
.unit__body p {
  color: var(--on-dark-muted);
  font-size: var(--step--1);
}
.unit__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem var(--sp-s);
  margin-top: var(--sp-2xs);
  padding-top: var(--sp-xs);
  border-top: 1px dashed var(--line-dark-strong);
}
.unit__spec {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.unit .link-mono {
  color: var(--khaki-lt);
}

/* Wide plate above the index, so the block has an anchor and the rows keep
   their full width. */
.coverage__band {
  position: relative;
  margin: 0 0 var(--sp-xl);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--panel-line);
  border-radius: var(--r);
  background: var(--black);
}
@media (min-width: 58rem) {
  .coverage__band {
    aspect-ratio: 21 / 8;
  }
}
.coverage__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.7) sepia(0.26);
}
.coverage__band figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.5rem 0.9rem;
  background: rgb(10 11 8 / 0.82);
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--khaki-lt);
}

/* ---------- Coverage index ----------
   Full-width rows. The scale of the type is the visual; there is no drawing
   to be judged on. */
.cov {
  display: grid;
  border-top: 1px solid var(--line-dark-strong);
}
.sect--sand2 .cov,
.sect:not(.sect--dark):not(.sect--darker) .cov {
  border-color: var(--line-strong);
}
.cov__row {
  display: grid;
  gap: var(--sp-2xs) var(--sp-l);
  align-items: baseline;
  padding-block: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border-bottom: 1px solid var(--line-dark-strong);
  transition: background-color var(--dur) var(--ease);
}
.sect--sand2 .cov__row,
.sect:not(.sect--dark):not(.sect--darker) .cov__row {
  border-color: var(--line-strong);
}
@media (min-width: 52rem) {
  .cov__row {
    grid-template-columns: auto minmax(9rem, 15rem) minmax(0, 1fr);
  }
}
.cov__n {
  font-family: var(--f-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  color: var(--khaki);
  opacity: 0.75;
}
.cov__label {
  font-size: var(--step-3);
  font-variation-settings: "wdth" 78;
  font-weight: 800;
  line-height: 1;
  color: var(--sand);
}
.sect--sand2 .cov__label,
.sect:not(.sect--dark):not(.sect--darker) .cov__label {
  color: var(--od-800);
}
.cov__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0;
}
.cov__items li {
  font-size: var(--step-1);
  color: var(--on-dark-muted);
  padding-right: 1.1rem;
  margin-right: 1.1rem;
  border-right: 1px solid var(--line-dark-strong);
}
.cov__items li:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}
.sect--sand2 .cov__items li,
.sect:not(.sect--dark):not(.sect--darker) .cov__items li {
  color: var(--text-muted);
  border-color: var(--line-strong);
}
.cov__row:hover {
  background: rgb(196 176 133 / 0.045);
}
.cov__row:hover .cov__items li {
  color: var(--on-dark);
}
.sect--sand2 .cov__row:hover .cov__items li,
.sect:not(.sect--dark):not(.sect--darker) .cov__row:hover .cov__items li {
  color: var(--text);
}

/* Standalone dark panel, for content that is card-shaped but is not a unit
   (the mattress threat notes). */
.panel {
  display: grid;
  gap: var(--sp-xs);
  align-content: start;
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--r);
}
.panel__code {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--khaki-lt);
  padding-bottom: var(--sp-2xs);
  border-bottom: 1px dashed var(--line-dark-strong);
}
.panel h3 {
  color: var(--sand);
}
.panel p {
  color: var(--on-dark-muted);
}


/* =========================================================================
   MISSION SEQUENCE: RECON / BRIEF / DEPLOY / EXTRACT
   ========================================================================= */
/* Columns are separated by real space, not by a rule pressed against the
   text. The previous version had padding only on the right, so every column
   after the first started flush against the neighbour's divider. */
.seq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--sp-l);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--line-dark-strong);
}
.sect--sand2 .seq,
.sect:not(.sect--dark):not(.sect--darker) .seq {
  border-color: var(--line-strong);
}
.seq__item {
  position: relative;
  display: grid;
  gap: var(--sp-2xs);
  align-content: start;
}
.seq__item::before {
  /* Tick where this step meets the rail */
  content: "";
  position: absolute;
  top: calc(var(--sp-m) * -1 - 1px);
  left: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--khaki);
}

/* The drawn glyph, and the dashed run to the next step */
.seq__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--sp-2xs);
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r);
  background: rgb(196 176 133 / 0.05);
}
.sect--sand2 .seq__icon,
.sect:not(.sect--dark):not(.sect--darker) .seq__icon {
  border-color: var(--line-strong);
  background: rgb(255 255 255 / 0.4);
}
.seq__glyph {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: var(--khaki);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sect--sand2 .seq__glyph,
.sect:not(.sect--dark):not(.sect--darker) .seq__glyph {
  stroke: var(--khaki-dk);
}
@media (min-width: 64rem) {
  .seq__icon::after {
    content: "";
    position: absolute;
    left: calc(100% + 0.6rem);
    top: 50%;
    width: calc(var(--sp-l) + 100%);
    border-top: 1px dashed var(--line-dark-strong);
  }
  .sect--sand2 .seq__icon::after,
  .sect:not(.sect--dark):not(.sect--darker) .seq__icon::after {
    border-color: var(--line-strong);
  }
  .seq__item:last-child .seq__icon::after {
    display: none;
  }
}

.seq__n {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--khaki);
}
.sect--sand2 .seq__n,
.sect:not(.sect--dark):not(.sect--darker) .seq__n {
  color: var(--khaki-dk);
}
.seq__item h3 {
  font-size: var(--step-2);
}
.seq__item p {
  font-size: var(--step--1);
  color: var(--on-dark-muted);
}
.sect--sand2 .seq__item p,
.sect:not(.sect--dark):not(.sect--darker) .seq__item p {
  color: var(--text-muted);
}

/* The block described step one, then stopped. Now it hands over. */
.seq__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s) var(--sp-l);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--line-dark-strong);
}
.sect--sand2 .seq__cta,
.sect:not(.sect--dark):not(.sect--darker) .seq__cta {
  border-color: var(--line-strong);
}
.seq__cta p {
  max-width: 34rem;
  font-size: var(--step-1);
  color: var(--on-dark-muted);
}
.sect--sand2 .seq__cta p,
.sect:not(.sect--dark):not(.sect--darker) .seq__cta p {
  color: var(--text-muted);
}

/* =========================================================================
   AFTER ACTION REPORTS: the wall of 400 real faces
   ========================================================================= */
.aar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13.5rem, 100%), 1fr));
  gap: 1px;
  background: var(--line-dark-strong);
  border: 1px solid var(--line-dark-strong);
}
.aar__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: var(--od-850);
  overflow: hidden;
  cursor: pointer;
}
.aar__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.78) sepia(0.25);
  transition: filter 0.45s var(--ease), transform 0.6s var(--ease);
}
.aar__item:hover img,
.aar__item:focus-visible img {
  filter: grayscale(0) contrast(1.02) brightness(1);
  transform: scale(1.04);
}
.aar__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(10 11 8 / 0.85) 0%, rgb(10 11 8 / 0.1) 55%);
  transition: opacity var(--dur) var(--ease);
}
.aar__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.aar__play::before {
  content: "";
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--khaki-lt);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.aar__play::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.75rem solid var(--khaki-lt);
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
  margin-left: 0.2rem;
  transition: border-left-color var(--dur) var(--ease);
}
.aar__item:hover .aar__play::before {
  background: var(--khaki);
  transform: scale(1.08);
}
.aar__item:hover .aar__play::after {
  border-left-color: var(--black);
}
.aar__item iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================================
   DEBRIEF (text testimonials) as dossier slips
   ========================================================================= */
.debrief {
  display: grid;
  gap: var(--sp-s);
  align-content: start;
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  background: rgb(255 255 255 / 0.5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--khaki);
  border-radius: 0 var(--r) var(--r) 0;
}
.debrief__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--khaki-dk);
}
.debrief__stars {
  letter-spacing: 0.1em;
  color: var(--khaki-dk);
}
.debrief p {
  font-size: var(--step-0);
}
.debrief footer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--f-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.debrief__who {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}
.debrief__who b {
  font-weight: 600;
  letter-spacing: 0.06em;
}
.debrief__who em {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--text-muted);
}
.debrief__id {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  background: var(--od-800);
  color: var(--khaki-lt);
  font-family: var(--f-display);
  font-variation-settings: "wdth" 85;
  font-weight: 800;
  border-radius: var(--r);
}

/* ---------- Stat blocks ---------- */
.stat {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding-top: var(--sp-s);
  border-top: 2px solid var(--khaki);
}
.stat b {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 76;
  font-size: var(--step-4);
  font-weight: 900;
  line-height: 0.9;
  color: var(--sand);
}
.sect--sand2 .stat b,
.sect:not(.sect--dark):not(.sect--darker) .stat b {
  color: var(--od-800);
}
.stat strong {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--khaki-lt);
}
.sect--sand2 .stat strong,
.sect:not(.sect--dark):not(.sect--darker) .stat strong {
  color: var(--khaki-dk);
}
.stat span {
  font-size: var(--step--1);
  color: var(--on-dark-muted);
}
.sect--sand2 .stat span,
.sect:not(.sect--dark):not(.sect--darker) .stat span {
  color: var(--text-muted);
}

/* ---------- Checklist / pills ---------- */
.checks {
  display: grid;
  gap: var(--sp-xs);
}
.checks li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.8rem;
  align-items: start;
}
.checks li::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.32em;
  background: var(--khaki);
  clip-path: polygon(14% 44%, 0 58%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pills li {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sect--dark .pills li,
.sect--darker .pills li {
  border-color: var(--line-dark);
  color: var(--on-dark);
}

/* ---------- Ratings row ---------- */
.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-s) var(--sp-l);
  padding-block: var(--sp-m);
}
.trust__item {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.trust__item b {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 82;
  font-size: var(--step-1);
  font-weight: 800;
  color: var(--od-800);
}
.trust__item:hover {
  color: var(--khaki-dk);
}
.trust__item:hover b {
  color: var(--khaki-dk);
}

/* ---------- Split ---------- */
.split {
  display: grid;
  gap: var(--sp-xl);
  align-items: center;
}
@media (min-width: 58rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2xl);
  }
  .split--reverse > :first-child {
    order: 2;
  }
}
.split__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--od-850);
  border: 1px solid var(--line-dark-strong);
}
.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(0.92) sepia(0.22);
}
.split__media figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.5rem 0.85rem;
  background: rgb(10 11 8 / 0.82);
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--khaki-lt);
}

/* ---------- FAQ ---------- */
.faq {
  border-top: 1px solid var(--line-strong);
}
.sect--dark .faq {
  border-color: var(--line-dark-strong);
}
.faq details {
  border-bottom: 1px solid var(--line-strong);
}
.sect--dark .faq details {
  border-color: var(--line-dark-strong);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
  padding: var(--sp-s) 0;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 84;
  font-size: var(--step-1);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary > span {
  min-width: 0;
  flex: 1 1 auto;
}
.faq summary:hover {
  color: var(--khaki-dk);
}
.sect--dark .faq summary:hover {
  color: var(--khaki-lt);
}
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--f-mono);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1;
  color: var(--khaki);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq__body {
  padding: 0 0 var(--sp-m);
  max-width: 52rem;
  color: var(--text-muted);
}
.sect--dark .faq__body {
  color: var(--on-dark-muted);
}

/* ---------- Offer stamp ---------- */
.stamp {
  display: inline-grid;
  gap: 0.1rem;
  justify-items: center;
  padding: 0.7rem 1.1rem;
  border: 2px solid var(--signal-ink);
  border-radius: var(--r);
  color: var(--signal-ink);
  font-family: var(--f-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  opacity: 0.9;
}
.stamp b {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 80;
  font-size: var(--step-3);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}
.stamp span {
  font-size: var(--step--2);
}

/* ---------- Closing CTA ---------- */
.cta {
  position: relative;
  background: var(--black);
  color: var(--sand);
  overflow: hidden;
  border-top: 1px solid var(--line-dark-strong);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.5rem);
  opacity: 0.4;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 100%, #000 10%, transparent 75%);
}
/* Left aligned on the same edge and the same container as the FAQ above it
   and the footer below it. Centring one band in a stack of left-aligned ones
   read as three different pages glued together. */
.cta__inner {
  position: relative;
  display: grid;
  gap: var(--sp-xl);
  align-items: end;
  padding-block: var(--sp-2xl);
}
@media (min-width: 58rem) {
  .cta__inner {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    gap: var(--sp-2xl);
  }
}
.cta__lead {
  display: grid;
  gap: var(--sp-s);
  align-content: start;
}
.cta__side {
  display: grid;
  gap: var(--sp-m);
  align-content: end;
}
.cta h2 {
  font-size: var(--step-5);
  font-variation-settings: "wdth" 74;
  font-weight: 900;
  color: var(--sand);
}

/* Heading on the left, questions on the right, full container width. */
.faq-split {
  display: grid;
  gap: var(--sp-l);
  align-items: start;
}
@media (min-width: 58rem) {
  .faq-split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--sp-2xl);
  }
}
.faq-split .sect__head {
  margin-bottom: 0;
}
.cta h2 em {
  font-style: normal;
  color: var(--khaki);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--black);
  color: var(--on-dark-muted);
  border-top: 1px solid var(--line-dark);
  padding-block: var(--sp-xl) var(--sp-m);
  font-size: var(--step--1);
}
.footer__grid {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
  padding-bottom: var(--sp-l);
  border-bottom: 1px solid var(--line-dark);
}
.footer h4 {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--khaki-lt);
  margin-bottom: var(--sp-s);
}
.footer ul {
  display: grid;
}
.footer ul li {
  display: flex;
}
.footer ul a,
.footer ul li {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}
.footer a:hover {
  color: var(--khaki-lt);
}
.footer__logo img {
  width: 10.5rem;
  margin-bottom: var(--sp-s);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-m);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-m);
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.social {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--sp-s);
}
/* Touch targets. A standalone control needs about 44px before a thumb hits it
   reliably; inline links inside a sentence are exempt and stay as they are. */
.social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.social a:hover {
  background: var(--khaki);
  border-color: var(--khaki);
  color: var(--black);
}
.social svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* The same three links on the contact page, where they are read rather than
   glanced at, so each keeps its word. Chips rather than the footer's icon
   squares: this row sits inside a definition list next to the phone and the
   address, and a strip of bare glyphs there reads as decoration. */
.reach {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  text-transform: none;
}
.reach a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.reach a:hover,
.reach a:focus-visible {
  background: var(--khaki);
  border-color: var(--khaki);
  color: var(--black);
}
.reach svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

/* ---------- Sticky mobile action bar ---------- */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.55rem var(--gutter) calc(0.55rem + env(safe-area-inset-bottom));
  background: rgb(10 11 8 / 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-dark-strong);
}
.callbar .btn {
  min-height: 2.85rem;
  padding: 0.65em 0.8em;
}
@media (min-width: 64rem) {
  .callbar {
    display: none;
  }
}
@media (max-width: 63.99rem) {
  body {
    padding-bottom: 4.25rem;
  }
  /* Standalone links a thumb has to hit: the logo and the breadcrumb. */
  .header__logo,
  .tag a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* ---------- Article ---------- */
.article {
  display: grid;
  gap: var(--sp-xl);
  align-items: start;
}
@media (min-width: 64rem) {
  .article {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
    gap: var(--sp-2xl);
  }
  .article__side {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-m));
  }
}
.article__side {
  display: grid;
  gap: var(--sp-m);
  align-content: start;
}
.side-card {
  display: grid;
  gap: var(--sp-xs);
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--r);
}
.side-card h3 {
  font-size: var(--step-2);
}
.side-card p {
  font-size: var(--step--1);
  color: var(--lede-color);
}
.side-card .btn {
  margin-top: var(--sp-2xs);
}
.side-links h4 {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--tag-color);
  margin-bottom: var(--sp-2xs);
}
.side-links ul {
  display: grid;
}
.side-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  gap: var(--sp-s);
  padding-block: var(--sp-xs);
  border-bottom: 1px solid var(--panel-line);
  transition: color var(--dur) var(--ease);
}
.side-links a:hover {
  color: var(--khaki-dk);
}
.side-links span {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 82;
  font-size: var(--step-0);
  font-weight: 700;
  text-transform: uppercase;
}
.side-links em {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lede-color);
  white-space: nowrap;
}

/* ---------- Prose / blog ---------- */
.prose {
  display: grid;
  gap: var(--sp-s);
}
/* Only inside the two-column article. On the privacy page .prose is itself the
   container, and capping it there collapsed the box and centred it, so the
   text sat on a different edge from its own heading. */
.article .prose {
  max-width: 44rem;
}
.prose h2 {
  font-size: var(--step-3);
  margin-top: var(--sp-m);
}
.prose h3 {
  font-size: var(--step-2);
  margin-top: var(--sp-s);
}
.prose ul {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.2rem;
  list-style: square;
}
.prose a {
  color: var(--khaki-dk);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Surface-driven, so a card on a dark section cannot end up with the light
   background. The old dark modifier was declared above this rule and lost the
   cascade to it, which put a pale slab on the blog index. */
.post-card {
  display: grid;
  gap: var(--sp-xs);
  align-content: start;
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--r);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.post-card:hover {
  background: var(--panel-bg-hover);
  border-color: var(--khaki);
  transform: translateY(-3px);
}
/* Article imagery. One treatment, same family as the rest of the photography. */
.prose__lead,
.post-card__thumb {
  position: relative;
  display: block;
  margin: 0 0 var(--sp-s);
  overflow: hidden;
  border: 1px solid var(--panel-line);
  border-radius: var(--r);
  background: var(--black);
  aspect-ratio: 3 / 2;
}
.prose__lead img,
.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.78) sepia(0.26);
  transition: transform 0.7s var(--ease);
}
.post-card:hover .post-card__thumb img {
  transform: scale(1.04);
}
.prose__lead figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.5rem 0.9rem;
  background: rgb(10 11 8 / 0.82);
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--khaki-lt);
}
.post-card__thumb {
  margin-bottom: var(--sp-2xs);
}

.post-card time {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--khaki-dk);
}
.post-card h3 {
  font-size: var(--step-2);
}
.post-card p {
  color: var(--text-muted);
}

/* ---------- Who shows up ----------
   Kept small on purpose: the only picture of Tim is a video cover frame at
   360px, and at this size the upscale does not read. */
.who {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  margin: var(--sp-2xs) 0 0;
}
.who img {
  width: clamp(7.5rem, 22vw, 9.5rem);
  height: auto;
  flex: none;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r);
  filter: contrast(1.04) brightness(0.94);
}
.who figcaption {
  display: grid;
  gap: 0.15rem;
}
.who b {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 82;
  font-size: var(--step-2);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sand);
}
.who span {
  font-size: var(--step--1);
  color: var(--on-dark-muted);
  max-width: 18rem;
}

/* ---------- Contact data list ---------- */
.info {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-dark-strong);
}
.info__item {
  display: grid;
  gap: 0.2rem;
  padding-block: var(--sp-s);
  border-bottom: 1px solid var(--line-dark-strong);
}
.info__item dt {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--khaki-lt);
}
.info__item dd {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 84;
  font-size: var(--step-2);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sand);
}
/* The phone and the e-mail are the point of this page, so they get a real
   target rather than a line of text a thumb has to aim at. */
.info__item dd a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.info__item dd a:hover {
  color: var(--khaki-lt);
}
.map {
  overflow: hidden;
  border: 1px solid var(--line-dark-strong);
  aspect-ratio: 16 / 11;
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.9) contrast(0.85) sepia(0.3);
}

/* ---------- Utilities ---------- */
.center {
  text-align: center;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--khaki);
  color: var(--black);
  font-family: var(--f-mono);
  font-weight: 600;
  transform: translateY(-120%);
}
.skip-link:focus {
  transform: none;
}

/* ---------- Motion ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .recon,
  .beam {
    display: none;
  }
}

@media print {
  .header,
  .callbar,
  .mobile-nav,
  .cta,
  .aar,
  .recon,
  .beam,
  .strip {
    display: none !important;
  }
  body {
    padding-bottom: 0;
    background: #fff;
  }
}