@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex';
  src: url('../fonts/plex-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex';
  src: url('../fonts/plex-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #d0303a;
  --red-light: #e24048;
  --ink-950: #08080a;
  --ink-900: #101013;
  --ink-800: #1a1a1f;
  --ink-700: #2a2a31;
  --steel: #8a8f98;
  --steel-light: #b6bac1;
  /* Secondary text on light backgrounds: --steel only reaches 3.25:1 on white, which
     fails AA, so light contexts use this darker step (6.4:1) instead. */
  --steel-ink: #5a6068;
  --paper: #fff;
  --paper-50: #f4f4f6;
  --paper-200: #e2e2e6;

  --fs-display: clamp(2.55rem, 1.1rem + 6.4vw, 6.4rem);
  --fs-h2: clamp(1.95rem, 1.2rem + 2.5vw, 3.2rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  --fs-h4: clamp(1.05rem, 1rem + 0.24vw, 1.18rem);
  --fs-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --gap: clamp(1.1rem, 0.6rem + 1.6vw, 2rem);
  --pad-x: clamp(1.15rem, 0.4rem + 3vw, 3.5rem);
  --pad-y: clamp(4rem, 2rem + 7vw, 8.5rem);
  --max: 1280px;
  --max-wide: 1600px;
  --measure: 68ch;

  --r: 3px;
  --r-img: 2px;
  --hair: rgba(255, 255, 255, 0.11);

  /* Layered rather than a single blur: a tight contact shadow plus a wide ambient one is
     what stops a card from looking like a flat rectangle with a grey halo. */
  --shadow: 0 1px 1px rgba(8, 8, 10, 0.05), 0 4px 8px -3px rgba(8, 8, 10, 0.09),
    0 16px 28px -14px rgba(8, 8, 10, 0.16);
  --shadow-lift: 0 2px 3px rgba(8, 8, 10, 0.07), 0 10px 20px -8px rgba(8, 8, 10, 0.16),
    0 36px 64px -28px rgba(8, 8, 10, 0.4);

  /* Fine film grain. Breaks up the large flat darks and, more usefully, hides the
     banding that wide low-contrast gradients show on 8-bit displays. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  --t-fast: 140ms;
  --t: 220ms;
  --t-slow: 400ms;
  --t-slower: 680ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --header-h: 76px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: 'Plex', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.62;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* German compounds such as "Datenschutzerklärung" or "Gemeindepatrouillen" are longer
     than a narrow column, so allow breaking rather than letting them push the layout. */
  overflow-wrap: break-word;
}

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

img {
  height: auto;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: 'Archivo', 'Arial Narrow', 'Segoe UI', sans-serif;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
  hyphens: auto;
}

h1 {
  font-size: var(--fs-display);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.16;
}

h4 {
  font-size: var(--fs-h4);
  line-height: 1.25;
  letter-spacing: -0.012em;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.dark :focus-visible,
.hero :focus-visible {
  outline-color: var(--red-light);
}

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

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--ink-950);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r);
  transition: top var(--t) var(--ease-out);
}

.skip:focus {
  top: 1rem;
}

/* Layout */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.wrap--wide {
  max-width: var(--max-wide);
}

.sec {
  padding-block: var(--pad-y);
}

.dark {
  position: relative;
  background: var(--ink-950);
  color: var(--paper);
}

.dark::after,
.hero::after,
.band::after,
.phead::after,
.oops::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--grain);
  opacity: 0.05;
  pointer-events: none;
}

.hero::after,
.band::after {
  z-index: 3;
}

/* Hairline of light where a dark band meets the section above it: the edge that makes
   stacked full-width blocks read as separate planes instead of one flat wall. */
.dark::before,
.phead::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 22%, rgba(208, 48, 58, 0.5) 50%, rgba(255, 255, 255, 0.16) 78%, transparent);
  z-index: 2;
}

.tinted {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, var(--paper-50) 26%, var(--paper-50) 100%);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.4rem;
  font-family: 'Plex', sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-ink);
}

.dark .eyebrow,
.band .eyebrow {
  color: var(--steel);
}

.eyebrow::before {
  content: '';
  width: 18px;
  height: 9px;
  background: var(--red);
  transform: skewX(-16deg);
}

.lede {
  max-width: 52ch;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.5;
  color: var(--ink-800);
}

/* .phead and .band carry their own dark background without the .dark class, so they have
   to be listed here too or the lede keeps its light-background colour on near-black. */
.dark .lede,
.band .lede,
.phead .lede,
.oops .lede {
  color: var(--steel-light);
}

/* One standard gap between a section heading and its lede; the old per-instance
   inline margins drifted between 1rem and 1.2rem. */
h2 + .lede {
  margin-top: 1.2rem;
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1.1em;
}

/* Header */

.head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--header-h);
  color: var(--paper);
  transition: background var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top);
}

.head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  height: var(--header-h);
}

.head.is-stuck {
  background: rgba(8, 8, 10, 0.9);
  border-bottom-color: var(--hair);
  backdrop-filter: saturate(140%) blur(14px);
}

body:not(.has-dark-hero) .head {
  background: var(--ink-950);
  border-bottom-color: var(--hair);
}

.head__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  flex: 0 0 auto;
  color: currentColor;
  text-decoration: none;
}

.head__logo img {
  width: auto;
  height: 52px;
}

.head__wordmark {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: 'Archivo', sans-serif;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

.head__wordmark b {
  font-weight: 800;
  color: var(--red-light);
}

.head__wordmark small {
  font-family: 'Plex', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.36em;
  color: var(--steel-light);
}

.head__right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(0.8rem, 0.2rem + 1.4vw, 1.9rem);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 1.6vw, 2.1rem);
}

.nav__link {
  position: relative;
  padding: 0.4rem 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--t-fast) var(--ease-out);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current='page'] {
  color: #fff;
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

.head__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0.62rem 1.1rem;
  background: var(--red);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border-radius: var(--r);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.head__cta:hover {
  background: var(--red-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(208, 48, 58, 0.6);
}

.head__cta:active {
  transform: translateY(1px);
}

.head__cta svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

@media (max-width: 540px) {
  .head__cta span {
    display: none;
  }

  .head__cta {
    min-width: 44px;
    padding: 0.7rem 0.85rem;
  }

  .head__logo img {
    height: 40px;
  }

  .head__wordmark {
    font-size: 1.02rem;
  }

  .head__wordmark small {
    display: none;
  }
}

.progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--red);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.burger {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: #fff;
  transition: transform var(--t) var(--ease-out), opacity var(--t-fast) linear;
}

.is-open .burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.is-open .burger span:nth-child(2) {
  opacity: 0;
}

.is-open .burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 899px) {
  .burger {
    display: block;
  }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.4rem;
    padding: calc(var(--header-h) + 2rem) var(--pad-x) 3rem;
    background: var(--ink-950);
    /* Landscape phones are shorter than the menu; the panel scrolls itself and keeps
       its momentum instead of rubber-banding the locked page behind it. */
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    /* Visibility flips instantly on open so the panel is focusable straight away, and
       only on close is it delayed until the fade has finished. Transitioning it in both
       directions would leave the first link unfocusable for half the animation. */
    transition: opacity var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  }

  .is-open .nav {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--t-slow) var(--ease-out), visibility 0s;
  }

  .nav__link {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1.9rem, 1.2rem + 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    padding: 0.45rem 0;
    opacity: 0;
    transform: translateY(14px);
  }

  .is-open .nav__link {
    opacity: 1;
    transform: none;
    transition: opacity var(--t-slow) var(--ease-out) calc(60ms * var(--i, 0) + 90ms),
      transform var(--t-slow) var(--ease-out) calc(60ms * var(--i, 0) + 90ms);
  }

  .nav__link::after {
    display: none;
  }

  .nav__foot {
    margin-top: auto;
    display: grid;
    gap: 0.3rem;
    font-size: var(--fs-sm);
    color: var(--steel);
  }

  .nav__foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
}

@media (min-width: 900px) {
  .nav__foot {
    display: none;
  }
}

/* Buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0.85rem 1.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease-out),
    color var(--t) var(--ease-out), background var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary:hover {
  box-shadow: 0 12px 26px -10px rgba(208, 48, 58, 0.55);
}

.btn--ghost:hover {
  box-shadow: 0 10px 22px -12px rgba(8, 8, 10, 0.55);
}

/* A single light pass across the primary button, the way lacquer catches light. */
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 32%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s var(--ease-out);
  pointer-events: none;
}

.btn--primary:hover::after {
  left: 115%;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--red);
  color: #fff;
}

.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--red-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}

.btn--primary:hover::before {
  transform: scaleX(1);
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.btn--dark {
  background: var(--ink-950);
  color: #fff;
}

.btn--dark:hover {
  background: var(--ink-800);
}

.btn--wide {
  width: 100%;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--red);
}

.link-arrow svg {
  width: 15px;
  height: 15px;
  transition: transform var(--t) var(--ease-out);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* Hero */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 5rem));
  padding-bottom: clamp(2.5rem, 6vh, 5rem);
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(130% 120% at 78% 30%, #14141a 0%, var(--ink-950) 55%);
  background-color: var(--ink-950);
  color: #fff;
  overflow: hidden;
}

@supports not (height: 100svh) {
  .hero {
    min-height: 100vh;
  }
}

.hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.hero__claim {
  font-size: clamp(2.7rem, 1.2rem + 5.6vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.028em;
  text-transform: uppercase;
}

.hero__l {
  display: block;
}

.hero__l--ghost {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.62);
}

.hero__dot {
  color: var(--red-light);
}

.hero__rail {
  position: absolute;
  left: clamp(0.5rem, 1vw, 1.2rem);
  bottom: clamp(2.5rem, 6vh, 5rem);
  display: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel);
}

@media (min-width: 1180px) {
  .hero__rail {
    display: block;
  }
}

.hero__proof {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: clamp(1.8rem, 3.5vw, 2.8rem) 0 0;
}

.hero__proof img {
  width: clamp(120px, 13vw, 180px);
  height: auto;
  border: 1px solid var(--hair);
  border-radius: var(--r-img);
  box-shadow: var(--shadow-lift);
}

.hero__proof figcaption {
  max-width: 21ch;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

/* The red plane. Not an accent: a structural panel the badge is mounted on. */
.hero__panel {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(72vw, 430px);
  background:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(166deg, #c22531 0%, #a01c26 52%, #7c141c 100%);
  background-color: #a01c26;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero__panel::before,
.hero__panel::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(255, 255, 255, 0.55);
  border-style: solid;
  pointer-events: none;
}

.hero__panel::before {
  top: 10px;
  left: 10px;
  border-width: 1px 0 0 1px;
}

.hero__panel::after {
  bottom: 10px;
  right: 10px;
  border-width: 0 1px 1px 0;
}

@media (min-width: 900px) {
  .hero__panel {
    min-height: min(60vh, 580px);
    margin-right: calc(var(--pad-x) * -0.55);
  }
}

.hero__panel .hero__stage {
  width: min(86%, 540px);
}

.hero__sub {
  max-width: 46ch;
  margin-top: clamp(1.1rem, 2vw, 1.7rem);
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.28rem);
  line-height: 1.5;
  color: var(--steel-light);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: clamp(1.7rem, 3vw, 2.6rem);
}

.pulse {
  position: relative;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--red);
}

.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--red);
  animation: pulse 2.6s var(--ease-out) infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  70%,
  100% {
    transform: scale(3.4);
    opacity: 0;
  }
}

.hero__stage {
  position: relative;
  justify-self: center;
  width: min(100%, 420px);
  aspect-ratio: 1 / 1;
}

.hero__stage::before {
  content: '';
  position: absolute;
  inset: -8% -5% -3%;
  background: radial-gradient(46% 40% at 50% 46%, rgba(22, 0, 2, 0.48), rgba(22, 0, 2, 0.12) 48%, transparent 64%),
    radial-gradient(38% 9% at 50% 94%, rgba(12, 0, 1, 0.55), transparent 62%);
  pointer-events: none;
}

.hero__stage canvas,
.hero__stage .shield-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Poster: the flat logo holds the space until (or instead of) the WebGL badge. It paints
   above the canvas, so it must not swallow the touch drags meant for the 3D. */
.hero__stage .shield-static {
  object-fit: contain;
  padding: 5%;
  filter: drop-shadow(0 26px 44px rgba(8, 8, 10, 0.55));
  pointer-events: none;
}

.hero__stage canvas {
  opacity: 0;
  transition: opacity var(--t-slower) var(--ease-out);
}

.hero__stage canvas.is-live {
  opacity: 1;
}

.hero__stage canvas.is-live + .shield-static {
  opacity: 0;
}

.shield-static {
  transition: opacity var(--t-slower) var(--ease-out);
}

@media (min-width: 900px) {
  .hero__in {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  }

  .hero__stage {
    width: min(100%, 560px);
    justify-self: center;
  }
}

/* Very short landscape windows: the square stage would eat the whole viewport. */
@media (max-height: 560px) and (min-width: 700px) {
  .hero {
    min-height: 480px;
  }

  .hero__stage {
    width: min(100%, 300px);
  }

  .hero__status,
  .hero__proof {
    display: none;
  }

  .hero__claim {
    font-size: clamp(2.2rem, 9vh, 3.2rem);
  }
}

@media (max-height: 460px) {
  .hero__stage {
    display: none;
  }
}

/* Trust strip */

.trust {
  border-bottom: 1px solid var(--paper-200);
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trust__item {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem) clamp(0.9rem, 2vw, 1.8rem);
  border-top: 1px solid var(--paper-200);
  background: linear-gradient(180deg, #fff, #fafafb);
}

/* An oversized ghost of the figure sits behind each stat, cropped by the cell. It gives
   the row a background layer so the numbers are not floating on flat white. */
.trust__item::before {
  content: attr(data-ghost);
  position: absolute;
  right: -0.12em;
  bottom: -0.42em;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(4.5rem, 2rem + 9vw, 8.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: rgba(8, 8, 10, 0.035);
  pointer-events: none;
  user-select: none;
}

.trust__item > * {
  position: relative;
}

.trust__item:nth-child(odd) {
  border-right: 1px solid var(--paper-200);
}

.trust__n {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-950);
}

.trust__n span {
  color: var(--red);
}

.trust__t {
  display: block;
  margin-top: 0.55rem;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink-800);
  hyphens: auto;
}

@media (min-width: 760px) {
  .trust__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .trust__item {
    border-top: 0;
    border-right: 1px solid var(--paper-200);
  }

  .trust__item:last-child {
    border-right: 0;
  }
}

/* Editorial split */

/* minmax(0, 1fr) rather than a bare 1fr: grid items default to min-width auto, so a
   single long German compound would otherwise widen the track past its container. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  }

  .split--flip > :first-child {
    order: 2;
  }

  .split--wide-media {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.frame {
  position: relative;
  border-radius: var(--r-img);
  overflow: hidden;
  background: var(--ink-900);
  box-shadow: var(--shadow);
}

/* Inner hairline plus a vignette. Photographs shot on different days sit together far
   better once they all share one edge treatment. */
.frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 0 60px rgba(8, 8, 10, 0.22);
}

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

.frame--tall {
  aspect-ratio: 4 / 5;
}

.frame--wide {
  aspect-ratio: 16 / 10;
}

/* In ratio-locked frames an in-flow img cannot resolve height:100% against the
   ratio-derived height; it falls back to its natural height and the frame's
   overflow chops it off at the bottom edge. Absolute positioning gives the img a
   definite box, so object-fit crops from the centre instead. */
.frame--tall img,
.frame--wide img,
.rail .frame img {
  position: absolute;
  inset: 0;
}

/* The photo keeps its own proportions, nothing gets cropped away. */
.frame--natural img {
  height: auto;
}

/* Image pairs whose column widths match the photos' aspect ratios: with widths
   proportional to the ratios, both uncropped pictures land on the same height. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3vw, 30px);
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  align-items: start;
}

.duo figure {
  margin: 0;
}

@media (min-width: 760px) {
  .duo--detektiv {
    grid-template-columns: minmax(0, 1.459fr) minmax(0, 0.66fr);
  }

  .duo--training {
    grid-template-columns: minmax(0, 1.136fr) minmax(0, 1.383fr);
  }
}

/* Stacked on small screens; the tall portrait narrows so it does not run the full
   height of the phone screen, and hangs on the left grid edge like everything else. */
@media (max-width: 759.98px) {
  .duo--detektiv > figure:last-child {
    width: min(76%, 400px);
    justify-self: start;
  }
}

.frame--edge::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34%;
  height: 4px;
  background: var(--red);
}

.values {
  display: grid;
  gap: 0.85rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.values li {
  position: relative;
  padding-left: 1.9rem;
  font-size: var(--fs-sm);
  line-height: 1.45;
  hyphens: auto;
}

.values li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.36em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}

@media (min-width: 620px) {
  .values--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}

/* Service index */

.svcindex {
  margin-top: clamp(2rem, 4vw, 3.2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.svcindex li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.svcindex a {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, auto) auto;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding: clamp(1.05rem, 2.4vw, 1.6rem) 0.6rem;
  text-decoration: none;
  isolation: isolate;
}

.svcindex a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--ease-out);
}

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

.svcindex__n {
  font-family: 'Archivo', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--red-light);
}

.svcindex__t {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.45rem, 1rem + 2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.04;
  text-transform: uppercase;
  color: #fff;
  hyphens: auto;
}

.svcindex__d {
  max-width: 30ch;
  font-size: var(--fs-sm);
  text-align: right;
  color: var(--steel-light);
}

.svcindex__a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  transition: transform 0.34s var(--ease-out), background var(--t) var(--ease-out);
}

.svcindex__a svg {
  width: 17px;
  height: 17px;
}

.svcindex a:hover .svcindex__n,
.svcindex a:hover .svcindex__d {
  color: #fff;
}

.svcindex a:hover .svcindex__a {
  transform: rotate(-45deg);
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 820px) {
  .svcindex a {
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  }

  .svcindex__d {
    display: none;
  }
}

/* Full-bleed band */

.band {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
  color: #fff;
}

.band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}

.band__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(94deg, rgba(8, 8, 10, 0.95) 4%, rgba(8, 8, 10, 0.74) 52%, rgba(8, 8, 10, 0.5) 100%);
}

.band__in {
  position: relative;
  z-index: 2;
}

.checks {
  display: grid;
  gap: 0.9rem var(--gap);
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  max-width: 62ch;
}

.checks li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--steel-light);
  hyphens: auto;
}

.checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}

@media (min-width: 720px) {
  .checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

/* Fleet rail */

.rail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--gap);
}

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 460px);
  gap: var(--gap);
  margin-top: clamp(1.8rem, 3vw, 2.8rem);
  padding-inline: var(--pad-x);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail::after {
  content: '';
  width: 1px;
}

.rail figure {
  margin: 0;
  scroll-snap-align: start;
}

.rail .frame {
  aspect-ratio: 16 / 10;
}

.rail figcaption {
  margin-top: 0.8rem;
  font-size: var(--fs-xs);
  color: var(--steel);
}

.rail.is-grabbing {
  cursor: grabbing;
  scroll-snap-type: none;
}

.rail-nav {
  display: none;
  gap: 0.5rem;
}

.rail-nav button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  color: #fff;
  cursor: pointer;
  transition: border-color var(--t) var(--ease-out), background var(--t) var(--ease-out),
    transform var(--t) var(--ease-out);
}

.rail-nav button:hover:not(:disabled) {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.rail-nav button:disabled {
  opacity: 0.32;
  cursor: default;
}

.rail-nav svg {
  width: 17px;
  height: 17px;
}

@media (min-width: 900px) {
  .rail-nav {
    display: flex;
  }

  .rail {
    grid-auto-columns: min(42vw, 520px);
  }
}

/* Position counter for touch layouts, where the arrows are hidden and swiping gives
   no sense of how many photos remain. */
.rail-count {
  display: none;
  margin: 1rem var(--pad-x) 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--steel);
}

@media (max-width: 899px) {
  .rail-count {
    display: block;
  }
}

/* Coverage / radar */

.reach {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 860px) {
  .reach {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  }
}

.radar {
  position: relative;
  aspect-ratio: 1 / 1;
  width: min(100%, 400px);
  justify-self: center;
}

.radar svg {
  width: 100%;
  height: 100%;
}

.radar__sweep {
  transform-origin: 100px 100px;
  animation: sweep 7s linear infinite;
}

@keyframes sweep {
  to {
    transform: rotate(360deg);
  }
}

.radar__ring {
  animation: ring 4.2s var(--ease-out) infinite;
}

.radar__ring:nth-of-type(2) {
  animation-delay: 1.4s;
}

.radar__ring:nth-of-type(3) {
  animation-delay: 2.8s;
}

@keyframes ring {
  0% {
    r: 18;
    opacity: 0.55;
  }
  100% {
    r: 88;
    opacity: 0;
  }
}

.reach__list {
  display: grid;
  gap: 1px;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--hair);
}

.reach__list li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 0;
  background: var(--ink-950);
}

.reach__list b {
  font-family: 'Archivo', sans-serif;
  font-size: var(--fs-h4);
  font-weight: 800;
}

/* The label only gets a fixed column once there is room for it beside the description. */
@media (min-width: 520px) {
  .reach__list li {
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
  }

  .reach__list b {
    flex: 0 0 8.5rem;
  }
}

.reach__list span {
  font-size: var(--fs-sm);
  color: var(--steel);
}

/* Mission */

.mission {
  text-align: center;
}

.mission h2 {
  max-width: 26ch;
  margin: 0 auto;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.mission p {
  max-width: 58ch;
  margin: clamp(1.4rem, 3vw, 2rem) auto 0;
  color: var(--ink-800);
}

.mission__rule {
  width: 46px;
  height: 3px;
  margin: 0 auto clamp(1.6rem, 3vw, 2.2rem);
  background: var(--red);
}

/* Contact */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.4rem, 4vw, 4rem);
}

@media (min-width: 940px) {
  .contact {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  }
}

.tel {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.75rem, 1rem + 3.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: #fff;
  transition: color var(--t) var(--ease-out);
}

.tel:hover {
  color: var(--red-light);
}

.tel svg {
  width: 0.72em;
  height: 0.72em;
  flex: 0 0 auto;
  color: var(--red);
}

.cinfo {
  display: grid;
  gap: 1px;
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--hair);
}

.cinfo div {
  padding: 1.05rem 0;
  background: var(--ink-950);
}

.cinfo dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}

.cinfo dd {
  margin: 0.35rem 0 0;
  font-size: var(--fs-sm);
}

.cinfo a {
  display: inline-block;
  padding-block: 0.45rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  transition: border-color var(--t) var(--ease-out);
}

.cinfo a:hover {
  border-color: var(--red);
}

/* Form */

.form {
  display: grid;
  gap: 1.05rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  background: var(--ink-900);
  border: 1px solid var(--hair);
  border-radius: var(--r);
}

.form__row {
  display: grid;
  gap: 1.05rem;
}

@media (min-width: 560px) {
  .form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: grid;
  gap: 0.42rem;
}

.field > label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-light);
}

.field .req {
  color: var(--red-light);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.72rem 0.85rem;
  background: var(--ink-950);
  color: #fff;
  border: 1px solid var(--ink-700);
  border-radius: var(--r);
  transition: border-color var(--t) var(--ease-out), background var(--t) var(--ease-out);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a8f98' stroke-width='1.6' d='m1 1.6 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 12px 8px;
  padding-right: 2.4rem;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--steel);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--red);
  outline: none;
  box-shadow: 0 0 0 3px rgba(208, 48, 58, 0.2);
}

.field--bad input,
.field--bad select,
.field--bad textarea {
  border-color: var(--red-light);
}

.field__err {
  font-size: var(--fs-xs);
  color: #ff8d93;
}

.consent .field__err {
  grid-column: 1 / -1;
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--steel);
}

.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
}

.consent input {
  width: 24px;
  height: 24px;
  min-height: 0;
  margin: 1px 0 0;
  accent-color: var(--red);
  flex: 0 0 auto;
}

.consent label {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--steel-light);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.consent a {
  color: #fff;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Footer */

.foot {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
  color: var(--steel);
  border-top: 1px solid var(--hair);
  padding-top: clamp(2.8rem, 2rem + 3vw, 4.5rem);
  padding-bottom: calc(clamp(1.6rem, 3vw, 2.4rem) + env(safe-area-inset-bottom));
  font-size: var(--fs-sm);
}

/* On phones the two link groups share a row instead of stacking into one long
   left-aligned column; the logo block and the contact block keep the full width. */
.foot__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.4rem, 5vw, 2.4rem);
}

.foot__grid > div:first-child,
.foot__grid > div:last-child {
  grid-column: 1 / -1;
}

@media (min-width: 700px) {
  .foot__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  }

  .foot__grid > div:first-child,
  .foot__grid > div:last-child {
    grid-column: auto;
  }
}

@media (min-width: 1000px) {
  .foot__grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  }
}

.foot__logo {
  display: block;
  color: #fff;
}

.foot__logo svg,
.foot__logo img {
  width: auto;
  height: 132px;
}

.foot address {
  margin-top: 1.2rem;
  font-style: normal;
  line-height: 1.7;
}

.foot h4 {
  margin-bottom: 0.9rem;
  font-family: 'Plex', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

/* No row gap: the padding is what makes each link a comfortable target, so adding gap
   on top would only stretch the footer without enlarging anything. */
.foot ul {
  display: grid;
}

.foot ul a {
  display: block;
  padding-block: 0.5rem;
}

.foot a {
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}

.foot a:hover {
  color: #fff;
}

.social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  transition: border-color var(--t) var(--ease-out), color var(--t) var(--ease-out),
    transform var(--t) var(--ease-out);
}

.social a:hover {
  transform: translateY(-3px);
}

.social a:hover {
  border-color: var(--red);
  color: #fff;
}

.social svg {
  width: 18px;
  height: 18px;
}

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem var(--gap);
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  font-size: var(--fs-xs);
}

.foot__bar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2rem;
}

.foot__bar nav a {
  display: inline-block;
  padding-block: 0.45rem;
}

.foot__tag {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Sub-pages */

.phead {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.6rem, 5vw, 5rem));
  padding-bottom: clamp(2.2rem, 4vw, 3.6rem);
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(120% 150% at 12% 0%, #16161c 0%, var(--ink-950) 58%);
  background-color: var(--ink-950);
  color: #fff;
  overflow: hidden;
}

.phead .wrap {
  position: relative;
  z-index: 2;
}

.phead h1 {
  position: relative;
  z-index: 2;
  max-width: 20ch;
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5rem);
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.phead h1::after {
  content: '.';
  color: var(--red-light);
}

.phead__ghost {
  position: absolute;
  right: -0.04em;
  bottom: -0.2em;
  z-index: 0;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(4.5rem, 15vw, 13rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  pointer-events: none;
  user-select: none;
}

.phead .lede {
  margin-top: 1.2rem;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  font-size: var(--fs-xs);
  color: var(--steel);
}

.crumbs a {
  display: inline-block;
  padding-block: 0.3rem;
  text-decoration: none;
}

.crumbs a:hover {
  color: #fff;
}

.crumbs li:not(:last-child)::after {
  content: '/';
  margin-left: 0.5rem;
  color: var(--ink-700);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 940px) {
  .docs {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .docs__nav {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.docs__nav h2 {
  margin-bottom: 1rem;
  font-family: 'Plex', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-ink);
}

.docs__nav ol {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: d;
}

.docs__nav a {
  display: block;
  padding: 0.45rem 0;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--ink-800);
  border-bottom: 1px solid var(--paper-200);
  transition: color var(--t-fast) var(--ease-out), padding-left var(--t) var(--ease-out);
}

.docs__nav a:hover {
  color: var(--red);
  padding-left: 6px;
}

.doc h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--paper-200);
}

.doc > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.doc h3 {
  font-size: var(--fs-h4);
  margin-top: 1.8rem;
}

.doc p,
.doc ul,
.doc dl {
  max-width: var(--measure);
}

.doc p + p,
.doc h2 + p,
.doc h3 + p,
.doc p + ul,
.doc ul + p,
.doc p + dl {
  margin-top: 1rem;
}

.doc ul {
  display: grid;
  gap: 0.5rem;
}

.doc ul li {
  position: relative;
  padding-left: 1.3rem;
}

.doc ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 1px;
}

.doc dl {
  display: grid;
  gap: 0.1rem;
  margin: 1.2rem 0 0;
}

.doc dl > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--paper-200);
}

@media (min-width: 620px) {
  .doc dl > div {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 1rem;
  }
}

.doc dt {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
}

.doc dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-800);
}

.doc a {
  color: var(--ink-900);
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}

.doc a:hover {
  color: var(--red);
}

.stamp {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-xs);
  color: var(--steel-ink);
  border: 1px solid var(--paper-200);
  border-radius: 2px;
}

.callout {
  margin-top: 1.4rem;
  padding: 1.1rem 1.3rem;
  max-width: var(--measure);
  font-size: var(--fs-sm);
  background: var(--paper-50);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--r) var(--r) 0;
}

/* Service detail sections */

.lsec {
  padding-block: clamp(2.6rem, 2rem + 3vw, 4.6rem);
  border-top: 1px solid var(--paper-200);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.lsec:first-of-type {
  border-top: 0;
}

.lsec__n {
  font-family: 'Archivo', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--red);
}

.lsec h2 {
  margin-top: 0.5rem;
}

.lsec__body {
  margin-top: 1.1rem;
}

.lsec__body p + p {
  margin-top: 0.9rem;
}

.notice {
  margin-top: 1.2rem;
  padding: 0.95rem 1.2rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-800);
  background: var(--paper-50);
  border: 1px solid var(--paper-200);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--r) var(--r) 0;
}

/* 404 */

.oops {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: calc(var(--header-h) + 3rem) var(--pad-x) 4rem;
  text-align: center;
  background: var(--ink-950);
  color: #fff;
}

.oops__code {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(4.5rem, 3rem + 9vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--red);
}

.oops p {
  max-width: 44ch;
  margin: 1.2rem auto 2rem;
  color: var(--steel-light);
}

.oops__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

/* Section marker */

.secmark {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.secmark span:first-child {
  font-family: 'Archivo', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--red);
}

.secmark span:last-child {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-ink);
}

.secmark::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--paper-200);
}

.dark .secmark span:first-child,
.band .secmark span:first-child {
  color: var(--red-light);
}

.dark .secmark span:last-child,
.band .secmark span:last-child {
  color: var(--steel);
}

.dark .secmark::after,
.band .secmark::after {
  background: var(--hair);
}

/* Hero status chip */

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
  padding: 0.55rem 0.95rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--steel-light);
  background: rgba(8, 8, 10, 0.55);
  border: 1px solid var(--hair);
  border-radius: 2px;
  backdrop-filter: blur(6px);
}

.hero__status-sep {
  width: 1px;
  height: 0.9em;
  background: var(--hair);
}

/* Below 430px the clock is hidden; its separator must go with it. The separator is a
   span like the clock, so :last-of-type would never match it; it is always the
   second-to-last child. */
@media (max-width: 430px) {
  .hero__status-sep:nth-last-child(2),
  .hero__status [data-clock] {
    display: none;
  }
}

/* Service ticker */

.ticker {
  overflow: hidden;
  background: var(--ink-950);
  border-top: 1px solid var(--hair);
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  width: max-content;
  padding-block: 0.85rem;
  animation: ticker 46s linear infinite;
}

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

.ticker span {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--steel);
}

.ticker i {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  background: var(--red);
  transform: rotate(45deg);
}

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

/* Faint plan grid for dark ops-style panels */

.grid-bg {
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Footer ghost wordmark */

.foot::before {
  content: 'AC SECURITY';
  position: absolute;
  left: 50%;
  top: -0.26em;
  transform: translateX(-50%);
  font-family: 'Archivo', sans-serif;
  font-size: clamp(5rem, 16vw, 15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
  user-select: none;
}

/* Dark page variants */

.dark .docs__nav h2 {
  color: var(--steel);
}

.dark .docs__nav a {
  color: var(--steel-light);
  border-bottom-color: var(--hair);
}

.dark .docs__nav a:hover {
  color: #fff;
}

.dark .lsec {
  border-top-color: var(--hair);
}

.dark .lsec__n {
  color: var(--red-light);
}

.dark .lsec__body p,
.dark .prose p,
.dark .values li {
  color: var(--steel-light);
}

.dark .notice {
  color: var(--steel-light);
  background: var(--ink-900);
  border-color: var(--hair);
  border-left-color: var(--red);
}

/* Mobile call bar */

.callbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 55;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 58px;
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
  background: var(--red);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 -10px 26px rgba(8, 8, 10, 0.4);
  transition: transform var(--t-slow) var(--ease-out);
}

/* While a form field is focused the keyboard is up and the bar would sit right under
   the caret, catching mistaps that launch the dialer. Browsers without :has simply
   keep the bar visible. */
body:has(.form :focus-within) .callbar {
  transform: translateY(120%);
}

.callbar svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.callbar strong {
  font-family: 'Archivo', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 759px) {
  .callbar {
    display: flex;
  }

  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

.callbar {
  transition: transform var(--t-fast) var(--ease-out);
}

.callbar:active {
  transform: scale(0.985);
}

/* FAQ accordion */

.faq {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--paper-200);
}

.faq details {
  border-bottom: 1px solid var(--paper-200);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.2vw, 1.35rem) 0.2rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: color var(--t-fast) var(--ease-out);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--red);
}

.faq summary svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--red);
  transition: transform var(--t) var(--ease-out);
}

.faq details[open] summary svg {
  transform: rotate(45deg);
}

.faq__a {
  max-width: 62ch;
  padding: 0 0.2rem 1.25rem;
  color: var(--ink-800);
}

.faq details[open] .faq__a {
  animation: faqin 0.32s var(--ease-out);
}

@keyframes faqin {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* Service rows announce themselves on scroll: the same red pass a hover triggers,
   fired once automatically so touch screens see it too. */

.svcindex li.is-scanned a::before {
  animation: rowscan 0.95s var(--ease-out) calc(70ms * var(--i, 0)) both;
}

@keyframes rowscan {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  42% {
    transform: scaleX(1);
    transform-origin: left;
  }
  58% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

/* Backdrop blur re-composites everything behind the fixed header on every scrolled
   frame, which is what phone GPUs stutter on. Touch devices get solid fills instead;
   the glassy header stays a desktop treat. */
@media (hover: none) {
  .head.is-stuck {
    background: rgba(10, 10, 13, 0.97);
    backdrop-filter: none;
  }

  .hero__status {
    background: rgba(8, 8, 10, 0.82);
    backdrop-filter: none;
  }
}

/* Motion */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-slower) var(--ease-out) calc(70ms * var(--i, 0)),
    transform var(--t-slower) var(--ease-out) calc(70ms * var(--i, 0));
}

html:not(.js) [data-reveal] {
  opacity: 1;
  transform: none;
}

[data-reveal='clip'] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
}

.js [data-reveal='clip'].is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms var(--ease-out) calc(70ms * var(--i, 0));
}

html:not(.js) [data-reveal='clip'] {
  clip-path: none;
}

.lines {
  display: block;
}

.lines__l {
  display: block;
  overflow: hidden;
}

.lines__l > span {
  display: block;
  transform: translateY(105%);
}

.js .lines.is-in .lines__l > span {
  transform: none;
  transition: transform 820ms var(--ease-out) calc(85ms * var(--i, 0));
}

@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;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal='clip'] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .lines__l > span {
    transform: none;
  }

  .card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}