/* =========================================================================
   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;
  /* Availability, not alarm: the strip says the crew is reachable right now. */
  --ok: #7bc24a;

  --text: var(--od-800);
  --text-muted: #5c6148;
  --on-dark: #ddd8c8;
  --on-dark-muted: #8f9378;

  --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;
}

/* ---------- 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);
}
.on-dark .lede,
.sect--dark .lede,
.hero .lede {
  color: var(--on-dark-muted);
}
.sect--dark h1,
.sect--dark h2,
.sect--dark h3,
.sect--dark h4 {
  color: var(--sand);
}

/* 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(--khaki-dk);
}
.tag::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.tag--plain::before {
  display: none;
}
.sect--dark .tag,
.on-dark .tag,
.hero .tag {
  color: var(--khaki-lt);
}

.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;
}
.wrap--narrow {
  width: min(100% - var(--gutter) * 2, var(--wrap-narrow));
  margin-inline: auto;
}
.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;
}
.mobile-nav a {
  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:hover,
.mobile-nav a[aria-current="page"] {
  color: var(--khaki-lt);
}
.mobile-nav .btn {
  margin-top: var(--sp-l);
}
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"
   ========================================================================= */
.form-card {
  position: relative;
  background: var(--sand);
  color: var(--text);
  border: 1px solid var(--od-800);
  border-radius: var(--r);
  padding: clamp(1.25rem, 1rem + 1.3vw, 2rem);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
}
.sect--sand2 .form-card,
.sect--sand .form-card {
  box-shadow: none;
  background: #f2eee3;
}
.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);
}
.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;
}

.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;
}

/* ---- The drawn plate ---- */
.unit__plate {
  position: relative;
  background: var(--black);
  border-bottom: 1px solid var(--line-dark-strong);
}
.unit__plate::before {
  /* Plotting grid behind the drawing, same motif as the dark sections */
  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);
}

/* 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: rgb(196 176 133 / 0.04);
  border: 1px solid var(--line-dark);
  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);
}

.post-card--dark {
  background: rgb(196 176 133 / 0.04);
  border-color: var(--line-dark);
}
.post-card--dark:hover {
  background: rgb(196 176 133 / 0.08);
  border-color: var(--khaki);
}

/* =========================================================================
   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--sand .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--sand .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--sand .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--sand .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--sand .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--sand .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--sand .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--sand .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);
}
.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__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--sand .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--sand .stat strong {
  color: var(--khaki-dk);
}
.stat span {
  font-size: var(--step--1);
  color: var(--on-dark-muted);
}
.sect--sand2 .stat span,
.sect--sand .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: baseline;
  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);
  border-radius: var(--r);
  color: var(--signal);
  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;
  gap: 0.55rem;
}
.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);
}
.social a {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  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;
}

/* ---------- 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;
  }
}

/* ---------- Prose / blog ---------- */
.prose {
  display: grid;
  gap: var(--sp-s);
}
.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;
}
.post-card {
  display: grid;
  gap: var(--sp-xs);
  align-content: start;
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  background: rgb(255 255 255 / 0.45);
  border: 1px solid var(--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: rgb(255 255 255 / 0.75);
  border-color: var(--khaki);
  transform: translateY(-3px);
}
.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);
}

/* ---------- 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);
}
.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;
  }
}