/* ==========================================================================
   Delta Private Security Services, Inc.
   Design system + site styles.

   Brand: obsidian black, chrome silver, signal red — taken from the shield.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Typeface — Inter, self-hosted (CSP forbids third-party font hosts)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --red: #d21f26;
  --red-bright: #ee2a32;
  --red-deep: #9c161b;

  /* Neutrals — a true black-to-white ramp with a slight cool cast */
  --ink-900: #08080a;
  --ink-850: #0b0b0d;
  --ink-800: #101114;
  --ink-750: #16181c;
  --ink-700: #1d1f24;
  --ink-600: #2a2d34;
  --ink-500: #3c4048;
  --ink-400: #5b606a;
  --ink-300: #868c96;
  --ink-200: #b4b9c1;
  --ink-150: #d3d7dd;
  --ink-100: #e7e9ed;
  --ink-50:  #f4f5f7;
  --white:   #ffffff;

  /* Chrome — the silver bevel of the shield */
  --chrome-hi: #f3f4f6;
  --chrome:    #c9ccd2;
  --chrome-lo: #8d939c;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: var(--ink-50);
  --text: var(--ink-800);
  --text-muted: var(--ink-400);
  --border: #e2e5ea;
  --border-strong: #cfd4db;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);

  /* Fluid type scale.
     Deliberately compact: this is a business site read by people scanning for
     an answer, not a poster. Display sizes top out well below the fashionable
     range so a wide monitor shows content rather than air. */
  --fs-xs:   0.7rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   clamp(0.9375rem, 0.2vw + 0.9rem, 1rem);
  --fs-lg:   clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  --fs-xl:   clamp(1.1875rem, 0.7vw + 1.05rem, 1.4375rem);
  --fs-2xl:  clamp(1.375rem, 1.35vw + 1.05rem, 1.9375rem);
  --fs-3xl:  clamp(1.75rem, 1.9vw + 1.25rem, 2.5rem);
  --fs-4xl:  clamp(2.0625rem, 2.9vw + 1.35rem, 3.375rem);

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.75rem;
  --sp-7: 2.25rem;
  --sp-8: 3rem;
  --sp-9: 4rem;

  --section-y: clamp(2.5rem, 3.6vw, 3.75rem);

  /* Shape */
  --radius: 2px;
  --radius-lg: 3px;
  --hairline: rgba(255, 255, 255, 0.11);   /* dividers on dark */

  --shadow-sm: 0 1px 2px rgba(8, 8, 10, 0.06), 0 1px 3px rgba(8, 8, 10, 0.08);
  --shadow-md: 0 4px 10px rgba(8, 8, 10, 0.07), 0 12px 28px rgba(8, 8, 10, 0.09);
  --shadow-lg: 0 10px 24px rgba(8, 8, 10, 0.1), 0 28px 60px rgba(8, 8, 10, 0.16);

  --container: 1160px;
  --container-narrow: 720px;
  --measure: 62ch;          /* comfortable reading width for body copy */

  --header-h: 62px;
}

@media (max-width: 860px) {
  :root { --header-h: 56px; }
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  font-feature-settings: "cv05" 1, "cv08" 1;   /* single-storey l, disambiguated I */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  margin: 0 0 var(--sp-3);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink-900);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-base); letter-spacing: -0.008em; font-weight: 700; }
h4 { font-size: var(--fs-sm); letter-spacing: 0; font-weight: 700; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--red-deep); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
li + li { margin-top: 0.4em; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-6) 0;
}

strong, b { font-weight: 700; color: var(--ink-900); }

/* License numbers, phone numbers and counts align in columns. */
.licenses__num, .license-strip__num, .trustbar__value,
.contact-list__value, .steps > li::before, .topbar__licenses,
.topbar__contact, .field__label, .input, .select {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv05" 1, "cv08" 1;
}

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink-900);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  color: #fff;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

@media (max-width: 560px) {
  .container, .container--narrow { width: calc(100% - 2rem); }
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(1.75rem, 2.6vw, 2.5rem); }

.section--alt { background: var(--bg-alt); }

/* Dark bands carry the shield as texture at very low opacity. It anchors the
   band to the brand without repeating the logo as an image. */
.section--dark {
  position: relative;
  overflow: hidden;
  background: var(--ink-850);
  color: var(--ink-200);
}
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/assets/img/logo-mark.png");
  background-repeat: no-repeat;
  background-position: right -60px center;
  background-size: auto 150%;
  opacity: 0.035;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0) 55%);
  mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0) 55%);
}
.section--dark > * { position: relative; }
@media (max-width: 720px) { .section--dark::before { display: none; } }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark strong { color: #fff; }
.section--dark a { color: var(--chrome); }
.section--dark a:hover { color: #fff; }

.stack > * + * { margin-top: var(--sp-4); }

.grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Section heading block */
.section-head { max-width: 44rem; margin-bottom: var(--sp-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-muted); font-size: var(--fs-md); max-width: var(--measure); }
.section-head--center p { margin-inline: auto; }
.section--dark .section-head p { color: var(--ink-300); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 var(--sp-2);
}
.eyebrow::before {
  content: "";
  width: 1.4rem;
  height: 2px;
  background: var(--red);
  flex: none;
}
/* A hairline under the section heading block ties the group together. */
.section-head--ruled { border-bottom: 1px solid var(--border); padding-bottom: var(--sp-4); }
.section--dark .section-head--ruled { border-bottom-color: var(--ink-700); }
.section-head--center .eyebrow::before { display: none; }
.section--dark .eyebrow { color: var(--red-bright); }

.lede {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink-600);
  font-weight: 400;
  max-width: 54ch;
}
.section--dark .lede { color: var(--ink-200); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  --btn-bd: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.78em 1.35em;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.15;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
              color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
  -webkit-appearance: none;
  appearance: none;
}
.btn:hover {
  --btn-bg: var(--red-deep);
  --btn-bd: var(--red-deep);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  --btn-bd: var(--border-strong);
}
.btn--ghost:hover {
  --btn-bg: var(--ink-900);
  --btn-bd: var(--ink-900);
  color: #fff;
}

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: var(--chrome-lo);
}
.btn--ghost-light:hover {
  --btn-bg: #fff;
  --btn-bd: #fff;
  color: var(--ink-900);
}

.btn--lg { padding: 0.92em 1.7em; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* Inline "read more" arrow link */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--red);
}
.arrow-link::after {
  content: "→";
  transition: transform 0.16s ease;
}
.arrow-link:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Site header
   -------------------------------------------------------------------------- */

.topbar {
  position: relative;
  background: var(--ink-900);
  color: var(--ink-300);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--hairline);
}
.topbar__licenses span { position: relative; }
.topbar__licenses span + span { margin-left: 1.25rem; padding-left: 1.25rem; }
.topbar__licenses span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 1px;
  background: var(--hairline);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 32px;
  padding-block: 0.25rem;
}
.topbar__licenses { display: flex; flex-wrap: wrap; gap: 0; }
.topbar__licenses span { white-space: nowrap; }
.topbar__contact { display: flex; gap: 1.25rem; align-items: center; }
.topbar a { color: var(--chrome); text-decoration: none; font-weight: 700; }
.topbar a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 900px) { .topbar { display: none; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 11, 13, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* Logo lockup: shield mark + typographic wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
}
.brand__mark {
  width: auto;
  height: 36px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
}
.brand__tag {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.235em;
  color: var(--chrome);
  margin-top: 0.28em;
}

@media (max-width: 860px) {
  .brand__mark { height: 32px; }
  .brand__name { font-size: 1.02rem; }
  .brand__tag { font-size: 0.55rem; letter-spacing: 0.16em; }
}
@media (max-width: 380px) {
  .brand__name { font-size: 1rem; }
  .brand__tag { font-size: 0.52rem; letter-spacing: 0.12em; }
}

/* Primary nav */
.nav { display: flex; align-items: center; gap: var(--sp-2); }

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list li { margin: 0; }

.nav__link {
  display: block;
  padding: 0.5rem 0.68rem;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-200);
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav__link[aria-current="page"] { color: #fff; }
.nav__link { position: relative; }
.nav__link[aria-current="page"] { color: #fff; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.68rem;
  right: 0.68rem;
  bottom: 0.15rem;
  height: 2px;
  background: linear-gradient(90deg, var(--red) 0 55%, var(--chrome) 55% 100%);
}

.nav__cta { margin-left: var(--sp-3); }
.nav__cta .btn { padding: 0.62em 1.05em; font-size: 0.7rem; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  min-height: 44px;
  cursor: pointer;
}
.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 12px;
  flex: none;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1040px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    display: block;
    background: var(--ink-850);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-4) 0 var(--sp-5);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
  }
  .nav__link {
    padding: 0.95rem 0.5rem;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
  }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__link[aria-current="page"] {
    color: #fff;
    border-left: 3px solid var(--red);
    padding-left: 0.85rem;
  }
  .nav__cta {
    width: min(100% - 2.5rem, var(--container));
    margin: var(--sp-4) auto 0;
  }
  .nav__cta .btn { width: 100%; padding: 0.95em 1.2em; font-size: 0.8rem; }
}

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(210, 31, 38, 0.18) 0%, rgba(210, 31, 38, 0) 55%),
    radial-gradient(90% 70% at 12% 0%, rgba(201, 204, 210, 0.13) 0%, rgba(201, 204, 210, 0) 60%),
    linear-gradient(168deg, #17191d 0%, #0b0b0d 52%, #08080a 100%);
  color: var(--ink-200);
  isolation: isolate;
}

/* Faint diagonal chevrons echoing the shield's inverted V */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    -52deg,
    rgba(255, 255, 255, 0.032) 0 1px,
    rgba(255, 255, 255, 0) 1px 74px
  );
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 140px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0) 0%, rgba(8, 8, 10, 0.75) 100%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
}

.hero__title {
  font-size: var(--fs-4xl);
  color: #fff;
  margin-bottom: var(--sp-4);
  letter-spacing: -0.028em;
  max-width: 15ch;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  color: var(--red-bright);
}

.hero__lede {
  font-size: var(--fs-lg);
  color: var(--ink-200);
  max-width: 48ch;
  margin-bottom: var(--sp-5);
}

/* The shield sits on a square plate, centred on both axes. place-items handles
   the centring so it cannot drift with the <picture> element's sizing. */
.hero__art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  width: min(100%, 320px);
  margin-inline: auto;
}
.hero__art > picture { display: block; height: 72%; }
.hero__art::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(201, 204, 210, 0.09) 0%, rgba(201, 204, 210, 0) 70%);
}
/* Corner ticks — a small drafting cue that reads as considered, not decorative. */
.hero__art::after {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(var(--red), var(--red)) 0 0 / 14px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) 0 0 / 2px 14px no-repeat,
    linear-gradient(var(--red), var(--red)) 100% 0 / 14px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) 100% 0 / 2px 14px no-repeat,
    linear-gradient(var(--red), var(--red)) 0 100% / 14px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) 0 100% / 2px 14px no-repeat,
    linear-gradient(var(--red), var(--red)) 100% 100% / 14px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) 100% 100% / 2px 14px no-repeat;
}
.hero__shield {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.65));
}

.hero__points {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.hero__points li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-base);
  color: var(--ink-150);
  margin: 0;
}
.hero__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; text-align: left; }
  .hero__art { order: -1; }
  .hero__art { width: min(58vw, 210px); }
}

/* Trust strip under the hero */
.trustbar {
  background: var(--ink-900);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-300);
}
.trustbar__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-6);
  padding-block: var(--sp-4);
}
@media (max-width: 419px) { .trustbar__inner { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) { .trustbar__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trustbar__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--hairline);
}
.trustbar__item:first-child { border-left-color: var(--red); border-left-width: 2px; }
.trustbar__value {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.trustbar__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-300);
}

/* --------------------------------------------------------------------------
   7. Page header (interior pages)
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  background:
    radial-gradient(100% 120% at 85% 0%, rgba(210, 31, 38, 0.16) 0%, rgba(210, 31, 38, 0) 58%),
    linear-gradient(168deg, #17191d 0%, #0b0b0d 100%);
  color: var(--ink-200);
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -52deg,
    rgba(255, 255, 255, 0.03) 0 1px,
    rgba(255, 255, 255, 0) 1px 74px
  );
  pointer-events: none;
}
.page-head > * { position: relative; }
.page-head h1 { color: #fff; margin-bottom: var(--sp-2); max-width: 24ch; text-wrap: balance; }
.page-head p { color: var(--ink-200); font-size: var(--fs-md); max-width: 62ch; margin: 0; }

.breadcrumbs {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-300);
  margin-bottom: var(--sp-3);
}
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--ink-400); }
.breadcrumbs a { color: var(--ink-300); text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--chrome); }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) - 0.15rem);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Every card carries a hairline rule at the top edge; on a linked card it
   fills red on hover. Static, deliberate — not a decorative flourish. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--border-strong);
}
.section--dark .card::before { background: var(--ink-600); }
a.card::after, .card--link::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
a.card:hover::after, .card--link:hover::after { transform: scaleX(1); }
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }
.card p:last-of-type { margin-bottom: 0; }
.card .checklist { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.card .checklist li::before { top: 0.35em; }
.card__foot { margin-top: auto; padding-top: var(--sp-4); }

a.card, .card--link { text-decoration: none; color: inherit; }
a.card:hover, .card--link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
a.card:hover h3 { color: var(--red); }

/* display:inline-flex matters — a plain <span> is inline, width/height are
   ignored on it, and the SVG then expands to the full container width. */
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--sp-3);
  color: var(--red);
  background: rgba(210, 31, 38, 0.07);
  border: 1px solid rgba(210, 31, 38, 0.16);
  flex: none;
}
.card__icon svg { width: 19px; height: 19px; display: block; }
.section--dark .card__icon {
  background: rgba(210, 31, 38, 0.14);
  border-color: rgba(210, 31, 38, 0.32);
  color: var(--red-bright);
}

.section--dark .card {
  background: var(--ink-800);
  border-color: var(--ink-700);
}
.section--dark .card p { color: var(--ink-300); }
.section--dark a.card:hover { border-color: var(--ink-600); }

/* Numbered process steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin: 0;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.15rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--red);
  letter-spacing: -0.03em;
}
.steps h3 { margin-bottom: var(--sp-1); }
.steps p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; margin: 0; }
.section--dark .steps p { color: var(--ink-300); }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: grid; gap: 0.45rem; font-size: var(--fs-base); }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin: 0;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 1.05rem;
  height: 0.6rem;
  border-left: 2.5px solid var(--red);
  border-bottom: 2.5px solid var(--red);
  transform: rotate(-45deg);
}
.section--dark .checklist li::before { border-color: var(--red-bright); }

/* Requirement list — for the hard "MUST" rules on careers pages */
.reqlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.reqlist li {
  position: relative;
  padding-left: 1.9rem;
  margin: 0;
  font-size: var(--fs-base);
}
.reqlist li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.55em;
  width: 0.62rem;
  height: 0.62rem;
  background: var(--ink-300);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Split media/content row */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: center;
}
.split--top { align-items: start; }

/* Form pages: give the form the wider column instead of an even split. */
@media (min-width: 900px) {
  .split--form { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* Definition-style feature list */
.featurelist { display: grid; gap: var(--sp-4); }
.featurelist__item { padding-left: var(--sp-4); border-left: 2px solid var(--border); }
.featurelist__item h3 { margin-bottom: var(--sp-1); }
.featurelist__item p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; margin: 0; }
.section--dark .featurelist__item { border-left-color: var(--ink-600); }
.section--dark .featurelist__item p { color: var(--ink-300); }

/* Callout panel */
.callout {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
}
.callout h3 { margin-bottom: var(--sp-2); }
.callout p { font-size: var(--fs-sm); line-height: 1.55; }
.callout p:last-child { margin-bottom: 0; }
.section--dark .callout { background: var(--ink-800); border-color: var(--ink-700); border-left-color: var(--red); }

/* License plate — the BSIS credentials, shown as evidence */
.licenses {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.licenses li {
  margin: 0;
  position: relative;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-left: 2px solid var(--red);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}
.section--alt .licenses li, .section:not(.section--dark) .licenses li {
  background: var(--ink-850);
}
.licenses__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 0.2rem;
}
.licenses__num {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  letter-spacing: 0.02em;
}

/* Three across once there is room, with subgrid holding the numbers on one
   line however many lines each label takes. */
/* Four plates divide as 2x2 before they fit one row, so none is ever orphaned. */
@media (min-width: 620px) { .licenses--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .licenses--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (min-width: 700px) {
  .licenses:not(.licenses--4) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .licenses li {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    align-content: start;
    row-gap: 0.25rem;
  }
  .licenses__label { margin-bottom: 0; }
}

/* CTA band */
.cta-band {
  background:
    radial-gradient(90% 140% at 88% 10%, rgba(210, 31, 38, 0.22) 0%, rgba(210, 31, 38, 0) 60%),
    linear-gradient(160deg, #17191d 0%, #08080a 100%);
  color: var(--ink-200);
}
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
}
.cta-band h2 { color: #fff; margin-bottom: var(--sp-2); }
.cta-band p { color: var(--ink-200); margin: 0; max-width: 68ch; }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--sp-4); }

.field { display: grid; gap: 0.4rem; align-content: start; }
.field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-700);
}
.field__req { color: var(--red); margin-left: 0.15em; }
.field__hint { font-size: var(--fs-sm); color: var(--text-muted); }
.field__error {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--red-deep);
}

.input, .textarea, .select {
  width: 100%;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.58rem 0.7rem;
  box-shadow: inset 0 1px 2px rgba(8, 8, 10, 0.045);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.textarea { min-height: 7.5rem; resize: vertical; line-height: 1.55; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235b606a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 11px 7px;
  padding-right: 2.4rem;
}

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(210, 31, 38, 0.14), inset 0 1px 2px rgba(8, 8, 10, 0.045);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--red);
  background: #fff7f7;
}

.input::placeholder, .textarea::placeholder { color: var(--ink-400); }

.field--file .input[type="file"] { padding: 0.4rem 0.45rem; background: #fff; }
.field--file .input[type="file"]::file-selector-button {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-900);
  background: var(--bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.4rem 0.8rem;
  margin-right: 0.7rem;
  cursor: pointer;
}
.field--file .input[type="file"]::file-selector-button:hover {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 620px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Three across only once each column is still comfortably wide enough to type
   in. In the two-column range the third field spans the row rather than sitting
   in the left half with dead space beside it. */
@media (min-width: 620px) and (max-width: 899px) {
  .field-row--3 > .field:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A textarea stretched the full width of a wide panel is unpleasant to type in;
   the checkbox statements are simply hard to read past ~85 characters. */
.form-panel .textarea,
.form-panel .checkbox span { max-width: 90ch; }

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-600);
}
.checkbox input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--red);
  flex: none;
}

/* reCAPTCHA v3 attribution — required wherever the badge is suppressed */
.recaptcha-notice {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}
.recaptcha-notice a { color: var(--text-muted); text-decoration: underline; }
.recaptcha-notice a:hover { color: var(--red); }
.grecaptcha-badge { visibility: hidden; }

/* Honeypot — must stay reachable to bots but invisible and unfocusable */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 2px solid var(--red);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  box-shadow: var(--shadow-sm);
}

.alert {
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid;
  font-size: var(--fs-sm);
}
.alert h3 { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.alert p:last-child { margin-bottom: 0; }
.alert--ok  { background: #edf7ee; border-color: #b8dcbc; color: #1c5024; }
.alert--ok h3 { color: #17421e; }
.alert--err { background: #fdf0f0; border-color: #f0bfc1; color: #8a1a1f; }
.alert--err h3 { color: #6f1418; }
.alert--info { background: var(--bg-alt); border-color: var(--border-strong); color: var(--ink-600); }

.alert ul { margin: var(--sp-2) 0 0; padding-left: 1.15em; }

/* --------------------------------------------------------------------------
   10. Contact blocks
   -------------------------------------------------------------------------- */

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.contact-list li { margin: 0; }
.contact-list__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.3rem;
}
.contact-list__value {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  text-decoration: none;
  display: inline-block;
}
a.contact-list__value:hover { color: var(--red); }
.contact-list__note { font-size: var(--fs-sm); color: var(--text-muted); margin: 0.15rem 0 0; }

.section--dark .contact-list__value { color: #fff; }
.section--dark a.contact-list__value:hover { color: var(--red-bright); }
.section--dark .contact-list__note { color: var(--ink-300); }

/* FAQ / accordion */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  background: none;
  border: 0;
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
}
.faq__q:hover { color: var(--red); }
.faq__icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.16em; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: var(--red);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq__icon::before { inset: 45% 0 45% 0; }
.faq__icon::after  { inset: 0 45% 0 45%; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__a { padding: 0 0 var(--sp-4); max-width: var(--measure); }
.faq__a p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }
.faq__a[hidden] { display: none; }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  background: var(--ink-900);
  color: var(--ink-300);
  font-size: var(--fs-sm);
  border-top: 3px solid var(--red);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -70px;
  width: 340px;
  pointer-events: none;
  background: url("/assets/img/logo-mark.png") no-repeat left center / auto 190%;
  opacity: 0.03;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 65%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 65%);
}
@media (max-width: 900px) { .site-footer::before { display: none; } }
.site-footer .container { position: relative; }

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-5);
  padding-block: var(--sp-7) var(--sp-5);
}
@media (min-width: 620px) {
  /* Three nav lists, three columns — the brand takes its own full-width row. */
  .site-footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .site-footer__main { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: auto; }
}

.site-footer h2 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--chrome);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--hairline);
}

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.site-footer li a { display: inline-block; padding-block: 0.45rem; }
@media (max-width: 619px) {
  .site-footer li a { padding-block: 0.6rem; }
  .site-footer__bottom nav a { display: inline-block; padding-block: 0.5rem; }
}
.site-footer li { margin: 0; }
.site-footer a { color: var(--ink-300); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-brand__lockup { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--sp-4); }
.footer-brand__mark { height: 40px; width: auto; }
.footer-brand__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1.1;
}
.footer-brand__tag {
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--chrome);
  margin-top: 0.3em;
}
.footer-brand p { color: var(--ink-300); max-width: 34ch; }

/* The BSIS license strip — required in advertising, given real weight here */
.site-footer__licenses {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--sp-4);
}
.license-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.license-strip li {
  margin: 0;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--hairline);
}
.license-strip__label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 0.2rem;
}
.license-strip__num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  letter-spacing: 0.02em;
}

/* One credential per row below 900px: nothing can fuse, and every entry reads
   as its own record. At 900px all four fit one row, and subgrid keeps every
   label in one band and every number in the next even when a label wraps. */
@media (min-width: 900px) {
  .license-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .license-strip li {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    align-content: start;
    row-gap: 0.2rem;
  }
  .license-strip__label { margin-bottom: 0; }
  .license-strip li:first-child { border-left: 2px solid var(--red); }
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-300);
}
.site-footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* --------------------------------------------------------------------------
   12. Utilities
   -------------------------------------------------------------------------- */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.muted { color: var(--text-muted); }
.section--dark .muted, .section--dark .small.muted { color: var(--ink-300); }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--sp-6); font-size: var(--fs-xl); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-5); }
.prose .lede { max-width: none; }

/* --------------------------------------------------------------------------
   13. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .topbar, .nav-toggle, .cta-band, .btn, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .page-head, .section--dark, .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
  .hero__title, .page-head h1, .section--dark h2, .site-footer h2 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}