@import url('../fonts/fonts.css');

/* ============================================================
   Armor Estimating - v4

   Built from the live site and the concept boards: charcoal ground,
   brushed steel plate, safety orange for anything you can act on,
   gold reserved for the mark itself. The metal is a real system here
   (one plate recipe, one bevel, one rivet) rather than a texture
   sprinkled on top, which is what stops it reading as a collage.
   ============================================================ */

:root {
  /* ground */
  --ink:        #10141a;
  --ink-2:      #161b23;
  --steel-900:  #1c222b;
  --steel-800:  #232b36;
  --steel-700:  #2d3743;
  --steel-600:  #3b4653;
  --edge:       #4a5563;
  --edge-hi:    rgba(255,255,255,.16);

  /* type */
  --paper:      #eef2f6;
  --muted:      #9aa6b4;
  --dim:        #6c7887;

  /* action - gold, taken from the lockup so the page and the mark agree */
  --gold:       #cfa042;
  --gold-lt:    #f2d492;
  --gold-dk:    #8f6a1d;
  --gold-deep:  #6b4d12;

  --gain:       #4ec98a;

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --band:   clamp(72px, 8.5vw, 124px);
  --wrap:   1280px;
}

* { box-sizing: border-box; }
/* any display declaration outranks the UA rule for [hidden], and .btn sets
   inline-flex, so the step buttons stayed on screen while marked hidden */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* height:auto matters: without it the width/height attributes that
   reserve layout space also fix the rendered height, and every image
   stretches the moment its column is narrower than its intrinsic width */
img { max-width: 100%; height: auto; display: block; }

.skip { position: absolute; left: -9999px; background: var(--gold); color: #171104; padding: 12px 18px; z-index: 200; }
.skip:focus { left: 12px; top: 12px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ============================================================
   The metal system
   ============================================================ */

/* one plate recipe, used everywhere something is a physical object */
.plate {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 42%),
    repeating-linear-gradient(96deg,
      rgba(255,255,255,.020) 0 2px, rgba(0,0,0,.020) 2px 4px),
    linear-gradient(168deg, var(--steel-700), var(--steel-900) 62%, #171d25);
  border: 1px solid var(--edge);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 var(--edge-hi),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 14px 34px rgba(0,0,0,.45);
}

/* Four screws, one drawn SVG repeated at the corners with a different
   slot angle each time. Rivets read as dots at this size; a slot and a
   bevelled head is what makes it read as hardware. */
.plate--riveted::before, .scope figure::after {
  content: '';
  position: absolute; inset: 8px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: var(--screw, 15px) var(--screw, 15px);
  background-position: left top, right top, left bottom, right bottom;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23949fac'/%3E%3Cstop offset='.5' stop-color='%235a6572'/%3E%3Cstop offset='1' stop-color='%232f3742'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='7.5' cy='8.2' r='5.4' fill='%23000' opacity='.6'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='url(%23a)'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='none' stroke='%23b3bdc9' stroke-opacity='.45'/%3E%3Cpath d='M4.1 9.1 11 5.2' stroke='%231a1f27' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M4.1 8.3 11 4.4' stroke='%23aab4c0' stroke-opacity='.5' stroke-width='.7' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23949fac'/%3E%3Cstop offset='.5' stop-color='%235a6572'/%3E%3Cstop offset='1' stop-color='%232f3742'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='7.5' cy='8.2' r='5.4' fill='%23000' opacity='.6'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='url(%23b)'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='none' stroke='%23b3bdc9' stroke-opacity='.45'/%3E%3Cpath d='M5.6 11 9.4 4.1' stroke='%231a1f27' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M4.9 10.6 8.7 3.7' stroke='%23aab4c0' stroke-opacity='.5' stroke-width='.7' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23949fac'/%3E%3Cstop offset='.5' stop-color='%235a6572'/%3E%3Cstop offset='1' stop-color='%232f3742'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='7.5' cy='8.2' r='5.4' fill='%23000' opacity='.6'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='url(%23c)'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='none' stroke='%23b3bdc9' stroke-opacity='.45'/%3E%3Cpath d='M4 5.9 11 9.4' stroke='%231a1f27' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M4 5.1 11 8.6' stroke='%23aab4c0' stroke-opacity='.5' stroke-width='.7' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3ClinearGradient id='d' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23949fac'/%3E%3Cstop offset='.5' stop-color='%235a6572'/%3E%3Cstop offset='1' stop-color='%232f3742'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='7.5' cy='8.2' r='5.4' fill='%23000' opacity='.6'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='url(%23d)'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='none' stroke='%23b3bdc9' stroke-opacity='.45'/%3E%3Cpath d='M3.6 7.5 H11.4' stroke='%231a1f27' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M3.6 6.7 H11.4' stroke='%23aab4c0' stroke-opacity='.5' stroke-width='.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* stamped, engraved type on metal */
.stamp {
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em;
  color: #c9d3de;
  text-shadow: 0 1px 0 rgba(0,0,0,.75), 0 -1px 0 rgba(255,255,255,.10);
}

/* ---------- type ---------- */
.d1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: .94; letter-spacing: -.005em; text-transform: uppercase;
  margin: 0;
}
.d2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.02; text-transform: uppercase; margin: 0;
}
.lede { font-size: clamp(16.5px, 1.6vw, 20px); color: var(--muted); max-width: 60ch; margin: 18px 0 0; }

/* the brushed-silver headline off the live site */
.brushed {
  background: linear-gradient(180deg, #ffffff 6%, #c6ced8 38%, #7d8894 62%, #e6ecf2 92%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.55));
}
.hot { color: var(--gold-lt); }

/* ---------- buttons ----------

   Rebuilt off the live site's own CTA, which is a pressed plate sitting
   in a brushed chrome housing, not a rounded rectangle with a gradient.
   The bezel is the border, painted with its own gradient through
   border-box, and the plate is the same box painted through padding-box,
   so the whole thing is one element and one border-radius.
   ------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: .045em; text-transform: uppercase;
  text-decoration: none; padding: 12px 26px;
  color: #1e1607;
  text-shadow: 0 1px 0 rgba(255,255,255,.34);
  border: 5px solid transparent;
  border-radius: 9px;
  background:
    linear-gradient(180deg, #f7dfa8 0%, var(--gold) 38%, #b98c2b 78%, #a97d24 100%) padding-box,
    linear-gradient(180deg, #f2f5f8 0%, #aeb7c1 22%, #6e7883 52%, #98a2ad 74%, #e7ecf1 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 2px 5px rgba(255,255,255,.30),
    inset 0 -6px 12px rgba(0,0,0,.25),
    0 2px 0 rgba(0,0,0,.45),
    0 10px 22px rgba(0,0,0,.5);
  transition: filter .16s ease, transform .1s ease, box-shadow .1s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.6),
    inset 0 3px 9px rgba(0,0,0,.45),
    0 1px 0 rgba(0,0,0,.4),
    0 4px 10px rgba(0,0,0,.45);
}
.btn:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }

/* same housing, a steel plate in it */
.btn--ghost {
  color: #e7edf4; text-shadow: 0 1px 0 rgba(0,0,0,.55);
  background:
    linear-gradient(180deg, #3c4653 0%, #2b3440 40%, #1d242d 100%) padding-box,
    linear-gradient(180deg, #dde3e9 0%, #9aa4af 22%, #5f6975 52%, #8b95a1 74%, #d3dae1 100%) border-box;
}

/* on the gold band the housing stays, the plate goes dark */
.btn--dark {
  color: var(--gold-lt); text-shadow: 0 1px 0 rgba(0,0,0,.6);
  background:
    linear-gradient(180deg, #39424e 0%, #232b35 42%, #12171d 100%) padding-box,
    linear-gradient(180deg, #fdf3dc 0%, #c8a457 24%, #7b5c17 52%, #b08e42 74%, #f7ecd2 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.6),
    inset 0 2px 5px rgba(255,255,255,.10),
    0 2px 0 rgba(74,55,14,.5),
    0 10px 22px rgba(60,44,10,.42);
}
.btn--line {
  color: #241a06; text-shadow: 0 1px 0 rgba(255,255,255,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.08)) padding-box,
    linear-gradient(180deg, #6b5119, #3a2b09 52%, #7d6120) border-box;
  box-shadow: inset 0 0 0 1px rgba(29,21,5,.35), 0 2px 0 rgba(74,55,14,.35);
}
.btn--line:hover { filter: none; background-color: rgba(29,21,5,.06); }

.arw { transition: transform .16s; font-size: .92em; }
.btn:hover .arw { transform: translateX(3px); }

/* ============================================================
   Header
   ============================================================ */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: 22px;
  padding: 14px var(--gutter);
  transition: background .3s, border-color .3s, padding .3s;
  border-bottom: 1px solid transparent;
}
.hdr[data-stuck] {
  background: rgba(16,20,26,.92);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: #2a323d;
  padding-block: 9px;
}
.brand { margin-right: auto; display: block; }
.brand img { width: clamp(190px, 20vw, 268px); transition: width .3s; }
.hdr[data-stuck] .brand img { width: clamp(160px, 16vw, 210px); }

.nav { display: flex; gap: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.nav a {
  color: #c3ccd7; text-decoration: none; padding-block: 4px;
  border-bottom: 1px solid transparent; transition: color .16s, border-color .16s;
}
.nav a:hover { color: #fff; border-bottom-color: var(--gold); }
@media (max-width: 980px) { .nav { display: none; } }
/* with the nav gone the button is the only control left, so it shrinks
   rather than wrapping onto two lines and shouldering the lockup out */
@media (max-width: 620px) {
  .hdr { gap: 12px; padding-inline: 16px; }
  .hdr .btn { font-size: 10.5px; letter-spacing: .1em; padding: 11px 14px; white-space: nowrap; }
  .brand img { width: 148px; }
  .hdr[data-stuck] .brand img { width: 130px; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; align-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #1e262f 0%, #141920 55%, #0b0e13 100%);
}
/* hexagonal plate, the armour reference, kept almost subliminal */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('../images/hex.jpg') center/cover no-repeat;
  opacity: .16; mix-blend-mode: screen; pointer-events: none;
}
/* One composited plate: both scenes fall away into a black centre, so
   the copy sits on true black and there is no edge to notice. Blending
   two separate images in CSS could never hold up at every width. */
.hero__fig {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
  pointer-events: none;
}
@media (max-width: 820px) { .hero__fig { object-position: 24% bottom; opacity: .5; } }

/* the nav sits over open sky at the top of the plate, so it needs a
   bed of its own or the links fall below contrast */
.hero::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 190px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,12,16,.88), rgba(9,12,16,.45) 52%, transparent);
}

.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(80% 60% at 50% 40%, #000, transparent 78%);
}

.hero__inner {
  position: relative; z-index: 3; width: 100%;
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(96px, 12vh, 124px) var(--gutter) clamp(56px, 8vh, 84px);
  text-align: center;
}
.hero__sub { margin: 20px auto 0; max-width: 56ch; color: #c2cbd6; font-size: clamp(15px, 1.5vw, 19px); }
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* the four proof points, on one rail */
.rail {
  margin: clamp(34px, 5vh, 54px) auto 0;
  max-width: 940px; padding: 14px clamp(10px, 2vw, 22px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 26px);
}
.rail li { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.rail b {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 2.4vw, 32px); line-height: 1;
  color: var(--gold-lt); text-transform: uppercase;
}
.rail span { font-family: var(--mono); font-size: clamp(9px, .92vw, 11px); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 720px) { .rail { grid-template-columns: repeat(2, 1fr); row-gap: 18px; } }

/* the smaller plate under it: two words, nothing else */
.rail--sm {
  --screw: 11px;   /* the small plate cannot carry full size hardware */
  margin-top: 12px; max-width: 420px;
  grid-template-columns: repeat(2, 1fr);
  padding: 11px clamp(10px, 2vw, 18px);
}
.rail--sm li {
  font-family: var(--mono); font-size: clamp(10px, 1vw, 11.5px);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lt);
  align-items: center;
}
.rail--sm li + li { border-left: 1px solid rgba(255,255,255,.10); }
@media (max-width: 720px) { .rail--sm { grid-template-columns: repeat(2, 1fr); row-gap: 0; } }

/* ============================================================
   Ticker - the one thing on the page that never stops moving,
   and a hard horizontal edge to cut the hero off from the band
   below it so the two dark grounds do not run together.
   ============================================================ */
.ticker {
  background: #090c11; color: rgba(255,255,255,.6);
  border-block: 1px solid #232b35;
  overflow: hidden; padding: 13px 0;
}
.ticker__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.ticker__track > div { display: flex; }
.ticker i {
  font-style: normal; font-family: var(--mono);
  font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  padding: 0 26px; white-space: nowrap;
  display: flex; align-items: center; gap: 26px;
}
.ticker i::after { content: ''; width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ============================================================
   Section furniture

   The three boards Hunter pulled all work the same way: the palette
   never changes, but no two bands are built alike and the ground
   flips underneath you. So each section below gets its own layout
   and its own footing, and the eyebrow is the one part that repeats.
   ============================================================ */
.tag {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px;
}
.tag::before { content: ''; width: 30px; height: 1px; background: currentColor; opacity: .7; }
.tag--mid { justify-content: center; }
.tag--mid::after { content: ''; width: 30px; height: 1px; background: currentColor; opacity: .7; }
.tag--dk { color: #5d4409; }   /* darker than the gold token: 11px on a pale ground needs 4.5:1 */

/* ============================================================
   2. Results - dark, and the only place on the page that
   measures anything. Bars rather than cards, because the point
   is the gap between two numbers.
   ============================================================ */
.results {
  position: relative; overflow: hidden;
  padding-block: var(--band);
  background: var(--ink-2);
  border-block: 1px solid #242c36;
}
.results::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../images/hex.jpg') center/cover no-repeat;
  opacity: .07; mix-blend-mode: screen;
}
.results__wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(30px, 5vw, 76px); align-items: start;
}
.results__head { position: sticky; top: 108px; }
.results__head .lede { margin-bottom: 26px; }

.bars { display: grid; gap: clamp(28px, 4vw, 44px); }
.bar { border-top: 1px solid #2c3541; padding-top: clamp(20px, 2.4vw, 28px); }
.bar header { margin-bottom: 20px; }
.bar h3 {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(18px, 1.9vw, 23px); margin: 0; color: #dbe3ec;
}
.bar header p { margin: 3px 0 0; font-size: 14.4px; color: var(--dim); }

.bar__row {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) 118px;
  align-items: center; gap: clamp(10px, 1.6vw, 18px); margin-bottom: 12px;
}
.bar__k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.bar__track {
  height: 13px; border-radius: 2px; overflow: hidden;
  background: linear-gradient(180deg, #171d25, #1f2731);
  border: 1px solid #333c48;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.bar__fill {
  display: block; height: 100%; width: var(--w);
  transition: width 1.15s cubic-bezier(.22,.61,.36,1);
}
.bars[data-armed] .bar__fill { width: 0; }
.bars[data-armed][data-in] .bar__fill { width: var(--w); }
.bar__fill--was { background: linear-gradient(180deg, var(--steel-600), var(--steel-700)); }
.bar__fill--now {
  background: linear-gradient(180deg, var(--gold-lt), var(--gold) 52%, var(--gold-dk));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.bar__v {
  font-family: var(--display); font-weight: 600; font-size: clamp(16px, 1.7vw, 21px);
  text-align: right; color: var(--muted); font-variant-numeric: tabular-nums;
}
.bar__v--now { color: #fff; }
.bar__delta { margin: 16px 0 0; display: flex; align-items: baseline; gap: 10px; }
.bar__count {
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(30px, 4.2vw, 50px); color: var(--gold-lt);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.bar__delta em {
  font-family: var(--mono); font-style: normal; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
@media (max-width: 900px) {
  .results__wrap { grid-template-columns: 1fr; }
  .results__head { position: static; }
  .bar__row { grid-template-columns: 1fr; gap: 5px; }
  .bar__v { text-align: left; }
}

/* ============================================================
   Creed - light zinc, centred, no picture. Sits between two dark
   bands so they stop running into each other, and it is deliberately
   a darker, warmer light than the Why band further down, so the two
   pale sections do not read as the same section twice.
   ============================================================ */
.creed {
  position: relative; overflow: hidden;
  padding-block: clamp(52px, 6.5vw, 88px);
  color: #241a06;
  text-align: center;
  background: linear-gradient(180deg, #e2b761 0%, #c39331 50%, #ac7c26 100%);
  border-block: 1px solid var(--gold-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.28);
}
/* circuit traces instead of the hex plate here. The source is bright blue
   lines on a dark ground, which would fight the gold, so it is greyscaled
   and inverted first: multiplied over brass the traces read as etched into
   the plate rather than glowing on top of it. Masked so it climbs out of
   the bottom edge and is gone by the time it reaches the copy, which is
   the whole point: texture under the words, not competing with them. */
.creed::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../images/circuit.jpg') center bottom / cover no-repeat;
  opacity: .12; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.34) 30%, transparent 58%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.34) 30%, transparent 58%);
}
.creed__wrap { position: relative; z-index: 1; max-width: 860px; }
.creed__mark { width: 46px; height: auto; margin: 0 auto 16px; opacity: .95; filter: drop-shadow(0 2px 3px rgba(60,42,6,.45)); }
.creed .tag { color: #37280a; justify-content: center; max-width: none; margin: 0 auto 16px; }
.creed h2 {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(24px, 3.4vw, 44px); line-height: 1.04; margin: 0;
  color: #120c02; text-shadow: 0 1px 0 rgba(255,255,255,.26);
}
.creed h2::after {
  content: ''; display: block; width: 74px; height: 2px; margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, rgba(28,20,5,.55), transparent);
}
.creed p {
  margin: 20px auto 0; max-width: 62ch;
  font-size: clamp(16.5px, 1.7vw, 19px); color: #120c02;
}
.creed strong { color: #000; }
.creed__last { font-family: var(--display); font-size: clamp(19px, 2.1vw, 25px); text-transform: uppercase; color: #120c02; letter-spacing: .01em; }

/* ============================================================
   3. Services - dark, split. A list with rules, not four boxes.
   ============================================================ */
.svc-band { position: relative; overflow: hidden; padding-block: var(--band); background: var(--ink); }

/* The sketch drawings. Each one runs off the side of its band with
   roughly half of it past the edge, bottom aligned, so it reads as a
   drawing laid under the page rather than a picture placed on it.
   Behind the content and well under it in weight. */
.plan {
  position: absolute; z-index: 0; bottom: 0;
  pointer-events: none; user-select: none;
  height: min(96%, 720px); width: auto; max-width: none;
}
.plan--roof  { left: 0; height: min(118%, 900px); transform: translateX(-36%); opacity: .38; }
/* the two paper drawings on the services page, same treatment: off the
   left edge, bottom aligned, behind the column that explains them */
.plan--docs    { left: 0; bottom: 12%; height: min(64%, 470px); transform: translateX(-26%); opacity: .95; }
.plan--invoice { left: 0; bottom: 8%; height: min(80%, 580px); transform: translateX(-28%); opacity: .95; }
.plan--floor { right: 0; transform: translateX(46%); opacity: .5; }
.svc-band__wrap, .why__wrap { position: relative; z-index: 1; }
.svc-band__wrap {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 80px); align-items: start;
}
.svc-band__head { position: sticky; top: 108px; }
.svc-band__head .lede { margin-bottom: 26px; }

.svcs { list-style: none; margin: 0; padding: 0; }
.svc {
  position: relative;
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 40px;
  align-items: start; gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(20px, 2.4vw, 28px) clamp(10px, 1.4vw, 16px);
  border-top: 1px solid #232b35;
  transition: background .2s ease;
}
.svc:last-child { border-bottom: 1px solid #232b35; }
.svc::after {
  content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--gold); transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.svc:hover { background: rgba(255,255,255,.028); }
.svc:hover::after { width: 100%; }
.svc__n {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: var(--gold-dk); padding-top: 5px;
}
.svc h3 {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(20px, 2.1vw, 27px); line-height: 1.08; margin: 0 0 7px; color: #dfe6ee;
}
.svc p { margin: 0; font-size: 16px; color: var(--muted); max-width: 52ch; }
.svc__ic { width: 30px; height: 30px; color: #46525f; transition: color .2s ease; margin-top: 4px; }
.svc:hover .svc__ic { color: var(--gold); }
@media (max-width: 900px) {
  .svc-band__wrap { grid-template-columns: 1fr; }
  .svc-band__head { position: static; }
  .svc { grid-template-columns: 34px minmax(0, 1fr); }
  .svc__ic { display: none; }
}

/* ============================================================
   4. Why Armor - the ground flips. Brushed steel, dark type.
   Still metal, so the page does not stop being itself, but the
   page stops looking like one long dark corridor.
   ============================================================ */
.why { position: relative; overflow: hidden; padding-block: var(--band); }
.why__wrap {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.why__fig { position: relative; margin: 0; }
.why__fig::before {
  content: ''; position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold-dk); border-radius: 3px;
}
.why__fig img {
  position: relative; border-radius: 3px;
  border: 1px solid #9aa5b2;
  box-shadow: 0 22px 44px rgba(23,32,43,.28);
  filter: saturate(.72) contrast(1.04);
}
.why__fig figcaption {
  position: relative; margin-top: 30px; padding-left: 24px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #3b4550;
}
.why h2 { color: #10161d; text-shadow: 0 1px 0 rgba(255,255,255,.6); }

.pts { margin: clamp(24px, 3vw, 34px) 0 0; }
.pt { border-top: 1px solid rgba(24,32,41,.16); padding: clamp(14px, 1.8vw, 19px) 0; }
.pt:last-child { border-bottom: 1px solid rgba(24,32,41,.16); }
.pt dt {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(18px, 1.9vw, 22px); color: #0d131a;
}
.pt dt span { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: #4a3606; }
.pt dd { margin: 7px 0 0 36px; font-size: 16.4px; line-height: 1.58; color: #333d49; max-width: 54ch; }
@media (max-width: 900px) {
  .why__wrap { grid-template-columns: 1fr; }
  .why__fig::before { inset: 12px -12px -12px 12px; }
}

/* ============================================================
   5. How it works - dark again, and vertical. The four stations
   hang off one rail, alternating, so it reads as a route rather
   than as another row of boxes.
   ============================================================ */
.how {
  position: relative; padding-block: var(--band);
  background: radial-gradient(110% 70% at 50% 0%, #1a212a 0%, #12171e 60%, #0d1116 100%);
}
.how__head { max-width: 620px; margin-bottom: clamp(34px, 4.5vw, 56px); }

.rail-v { list-style: none; margin: 0; padding: 0; position: relative; }
/* the rail is drawn per station rather than down the whole list, so it
   stops at the last stop instead of trailing off into the next band */
.stn::before {
  content: ''; position: absolute; z-index: 0;
  top: 28px; height: 100%; left: 27px; width: 2px;
  background: linear-gradient(180deg, var(--gold-dk), var(--gold-deep));
}
.stn:first-child::before { background: linear-gradient(180deg, transparent, var(--gold-dk) 22%, var(--gold-deep)); }
.stn:last-child::before { display: none; }
.stn {
  position: relative; display: grid;
  grid-template-columns: 56px minmax(0, 1fr); gap: clamp(16px, 2vw, 26px);
  padding-bottom: clamp(18px, 2.4vw, 26px);
  opacity: .35; transform: translateY(12px);
  transition: opacity .55s ease, transform .55s ease;
}
.stn[data-on] { opacity: 1; transform: none; }
.stn__num {
  position: relative; z-index: 1;
  grid-column: 1; justify-self: center;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 21px;
  color: var(--gold-lt);
  background: linear-gradient(180deg, var(--steel-700), var(--steel-900));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-hi), 0 0 0 7px #12171e, 0 10px 22px rgba(0,0,0,.5);
}
.stn__card { padding: 20px 22px 22px; }
.stn__who {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px;
}
.stn h3 {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(18px, 1.9vw, 23px); margin: 0 0 6px; color: #dfe6ee;
}
.stn p { margin: 0; font-size: 15.6px; color: var(--muted); }
.stn--end { padding-bottom: 0; }
.stn--end .stn__num { background: linear-gradient(180deg, var(--gold-lt), var(--gold-dk)); color: #1d1505; border-color: var(--gold-deep); font-size: 24px; }
.stn__card--end { background: none; border: 1px dashed var(--gold-dk); border-radius: 4px; box-shadow: none; }
.stn__card--end h3 { color: var(--gold-lt); }

/* wide enough to swing them either side of the rail */
@media (min-width: 940px) {
  .stn::before { left: 50%; margin-left: -1px; }
  .stn { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); padding-bottom: clamp(26px, 3vw, 40px); }
  .stn__num { grid-column: 2; }
  .stn__card { grid-column: 3; grid-row: 1; }
  .stn:nth-child(odd) .stn__card { grid-column: 1; text-align: right; }
  .stn:nth-child(odd) .stn__card .stn__who { }
  .stn__num { box-shadow: inset 0 1px 0 var(--edge-hi), 0 0 0 7px #141a21, 0 10px 22px rgba(0,0,0,.5); }
}

/* ============================================================
   6. Start - full bleed gold. The one band that is not dark and
   not metal, so the last thing on the page is the loudest.
   ============================================================ */
.close {
  position: relative; overflow: hidden;
  padding-block: clamp(52px, 6.5vw, 84px);
  color: #1d1505;
  background: linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 46%, var(--gold-dk) 100%);
  border-block: 1px solid var(--gold-deep);
}
.close::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../images/hex.jpg') center/cover no-repeat;
  opacity: .10; mix-blend-mode: multiply;
}
.close__wrap {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: clamp(22px, 3vw, 48px);
}
.close h2 { color: #1a1204; margin: 0; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.close p { margin: 12px 0 0; max-width: 46ch; color: #3a2b0d; font-size: 16.5px; }
.close__row { display: flex; gap: 14px; flex-wrap: wrap; }
.close .btn--dark { align-self: flex-start; }
.btn--dark {
  background: linear-gradient(180deg, var(--steel-700), #141a21);
  border-color: #0c1015; color: var(--gold-lt);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 20px rgba(60,44,10,.4);
}
.btn--line {
  background: none; border-color: rgba(29,21,5,.5); color: #241a06;
  box-shadow: none;
}
.btn--line:hover { background: rgba(29,21,5,.08); filter: none; }

/* ============================================================
   Footer
   ============================================================ */
.ftr { background: #0b0e13; padding-block: 40px; border-top: 1px solid #1d242d; }
.ftr__wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.ftr img { width: 168px; margin-right: auto; }
.ftr p { margin: 0; font-size: 14.6px; color: var(--dim); }
.ftr a { color: var(--muted); text-decoration: none; font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; }
.ftr a:hover { color: var(--gold-lt); }

/* ============================================================
   Reveal
   ============================================================ */
[data-rise][data-armed] { opacity: 0; transform: translateY(18px); }
[data-rise][data-in] {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  [data-rise], .stn { opacity: 1; transform: none; transition: none; }
  .bar__fill { transition: none; }
}

/* ============================================================
   Services page

   Same rules as the homepage: the palette holds, no two bands are
   built alike, and the ground flips underneath you as you go.
   Dark, dark, light, dark, brass, dark, gold.
   ============================================================ */
.phead {
  position: relative; overflow: hidden;
  padding: calc(var(--band) + 44px) 0 var(--band);
  background: radial-gradient(120% 90% at 30% 0%, #232c37 0%, #161c24 52%, #0d1116 100%);
}
.phead::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../images/hex.jpg') center/cover no-repeat;
  opacity: .1; mix-blend-mode: screen;
}
.phead__wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 72px); align-items: end;
}
.phead__h { font-size: clamp(34px, 5.4vw, 74px); margin-bottom: 6px; }

/* the four services as a numbered index, which doubles as page navigation */
.index { list-style: none; margin: 0; padding: 0; }
.index li { border-top: 1px solid #2a323d; }
.index li:last-child { border-bottom: 1px solid #2a323d; }
.index a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 6px; text-decoration: none;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(17px, 1.8vw, 21px); color: #cdd6e0;
  transition: color .16s ease, padding-left .2s ease;
}
.index a span { font-family: var(--mono); font-size: 11px; color: var(--gold); }
.index a:hover { color: var(--gold-lt); padding-left: 14px; }
.index a:hover span { color: var(--gold); }
@media (max-width: 900px) { .phead__wrap { grid-template-columns: 1fr; align-items: start; } }

/* ---- the four service sections ---- */
.svc-sec { position: relative; overflow: hidden; padding-block: var(--band); }
.svc-sec__wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 5vw, 76px); align-items: start;
}
.svc-sec__n {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em; color: var(--gold); margin-bottom: 12px;
}
.svc-sec__head .lede { margin-bottom: 26px; }
.svc-sec--a { background: var(--ink-2); border-top: 1px solid #242c36; }
.svc-sec--c { background: radial-gradient(110% 70% at 70% 0%, #1a212a, #10141a 68%); }
@media (max-width: 900px) {
  .svc-sec__wrap { grid-template-columns: 1fr; }
  .svc-sec__wrap--flip > *:first-child { order: 2; }
}

/* 01, the checklist */
.checks {
  border: 1px solid #2f3844; border-radius: 4px;
  padding: clamp(20px, 2.6vw, 30px); background: rgba(255,255,255,.018);
}
.checks__cap { margin: 0 0 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.checks ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(18px, 3vw, 40px); }
.checks li { break-inside: avoid; position: relative; padding: 8px 0 8px 26px; font-size: 15.6px; color: #c3ccd7; }
.checks li::before {
  content: ''; position: absolute; left: 4px; top: 13px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.checks__foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #2a323d; font-size: 15px; color: var(--dim); }
@media (max-width: 620px) { .checks ul { columns: 1; } }

/* 02, the light band and its spec sheet */

.svc-sec--b h2 { color: #10161d; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.svc-sec--b .lede { color: #333d49; }
.svc-sec--b .svc-sec__n { color: #5d4409; }
.spec { margin: 0; }
.spec > div {
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px;
  padding: 14px 0; border-top: 1px solid rgba(24,32,41,.16);
}
.spec > div:last-child { border-bottom: 1px solid rgba(24,32,41,.16); }
.spec dt { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #4a3606; padding-top: 2px; }
.spec dd { margin: 0; font-size: 16.4px; line-height: 1.55; color: #232b34; }
@media (max-width: 620px) { .spec > div { grid-template-columns: 1fr; gap: 4px; } }

/* 03, where the money actually sits on a claim */
.rcv {
  border: 1px solid #2f3844; border-radius: 4px;
  padding: clamp(20px, 2.6vw, 30px); background: rgba(255,255,255,.018);
}
.rcv__cap { margin: 0 0 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.rcv__bar { display: flex; border: 1px solid #3b4653; border-radius: 3px; overflow: hidden; }
.rcv__bar i { font-style: normal; padding: 16px 18px; display: block; }
.rcv__acv { flex: 0 0 58%; background: linear-gradient(180deg, var(--steel-700), var(--steel-900)); }
.rcv__dep { flex: 1 1 42%; background: linear-gradient(180deg, var(--gold-lt), var(--gold) 52%, #b98c2b); }
.rcv__bar b { display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 17px; }
.rcv__bar span { display: block; margin-top: 2px; font-size: 12.6px; }
.rcv__acv b { color: #dbe3ec; }
.rcv__acv span { color: var(--muted); }
.rcv__dep b { color: #120c02; }
.rcv__dep span { color: #2c2008; }
.rcv__tot {
  margin: 9px 0 0; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim);
}
.rcv__steps { list-style: none; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid #2a323d; }
.rcv__steps li { display: flex; gap: 14px; padding: 9px 0; font-size: 15.6px; color: #c3ccd7; }
.rcv__steps span {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10.5px; color: var(--gold-lt);
  border: 1px solid var(--gold-dk);
}

/* 04, brass and centred, laid out as a row so it reads as a sequence */
.svc-sec--d {
  color: #120c02; text-align: center;
  background: linear-gradient(180deg, #e2b761 0%, #c39331 50%, #ac7c26 100%);
  border-block: 1px solid var(--gold-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.28);
}
.svc-sec--d::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../images/hex.jpg') center/cover no-repeat;
  opacity: .12; mix-blend-mode: multiply;
}
.escal { position: relative; z-index: 1; }
.escal .tag { color: #37280a; margin-bottom: 16px; }
.escal h2 { color: #120c02; text-shadow: 0 1px 0 rgba(255,255,255,.26); margin: 0; }
.escal__lede { margin: 18px auto 0; max-width: 64ch; font-size: clamp(15px, 1.5vw, 17px); color: #120c02; }
.escal__row {
  list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: left;
}
.escal__row li { position: relative; padding: 4px clamp(14px, 2vw, 26px); }
.escal__row li + li { border-left: 1px solid rgba(28,20,5,.3); }
.escal__row b {
  display: block; font-family: var(--display); font-weight: 600;
  text-transform: uppercase; font-size: clamp(17px, 1.9vw, 22px); color: #120c02;
}
.escal__row span { display: block; margin-top: 7px; font-size: 13.8px; color: #2b2007; }
@media (max-width: 860px) {
  .escal__row { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .escal__row li:nth-child(3) { border-left: 0; }
}
@media (max-width: 520px) {
  .escal__row { grid-template-columns: 1fr; }
  .escal__row li + li { border-left: 0; border-top: 1px solid rgba(28,20,5,.3); padding-top: 18px; }
}

/* what we need from you */
.need { background: var(--ink); }
.need__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(14px, 2vw, 22px); }
.need__grid article { padding: 26px 24px 24px; }
.need__grid h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 21px; margin: 0 0 8px; color: var(--gold-lt); }
.need__grid p { margin: 0; font-size: 16px; color: var(--muted); }
.need__foot { margin: clamp(26px, 3vw, 36px) 0 0; font-family: var(--display); font-size: clamp(17px, 2vw, 24px); text-transform: uppercase; color: #b9c4d0; }

/* the service rows on the homepage lead through to the page that
   explains them, so the whole row is the target, not just the words */
.svc h3 a { color: inherit; text-decoration: none; }
.svc h3 a::after { content: ''; position: absolute; inset: 0; }

/* ============================================================
   The closing form

   The band used to be a heading and two buttons that said email us.
   That asks for a file before anyone has agreed to work together.
   This asks a few questions instead, which is the same conversation
   Armor would have on the phone, and it lets the fit go both ways.
   ============================================================ */
.close__wrap { align-items: start; }
.close__say { flex: 1 1 380px; max-width: 34em; }
.close__say p { max-width: 46ch; }
.close__alt { margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #3a2b0d; }
.close__alt a { color: #1a1204; text-underline-offset: 3px; }

.cform {
  flex: 1 1 440px; max-width: 560px;
  padding: clamp(20px, 2.4vw, 28px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%),
    linear-gradient(168deg, #2b333e, #1a212a 62%, #141a21);
}
.cform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-bottom: 14px; }
.cform label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lt);
}
.cform input, .cform select {
  font-family: var(--body); font-size: 15px; color: var(--paper);
  background: #10151b; border: 1px solid #3c4653; border-radius: 3px;
  padding: 11px 12px; width: 100%;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cform select {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 15px top 20px, right 10px top 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  background-color: #10151b;
}
.cform input:focus, .cform select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45), 0 0 0 3px rgba(207,160,66,.25);
}
.cform input[aria-invalid="true"] { border-color: #d4664e; }
.cform .btn { margin-top: 4px; }
.cform__note { margin: 14px 0 0; min-height: 1.2em; font-size: 14.2px; color: var(--muted); }
.cform__note[data-state="bad"] { color: #f0a08b; }
.cform__note[data-state="ok"] { color: var(--gold-lt); }
@media (max-width: 560px) { .cform__row { grid-template-columns: 1fr; } }

/* the heading block above the three plates had a label on it as well,
   which was one line too many in a short section */
.band__head--tight { margin-bottom: clamp(22px, 2.6vw, 30px); }

/* ============================================================
   01 What we scope

   Photo led on purpose. A contractor deciding whether Armor can
   handle a mitigation file should be able to tell from across the
   room, before reading a word of it. Near black so the three
   photographs are the brightest thing in the band.
   ============================================================ */
.scopes { background: #0d1116; border-top: 1px solid #242c36; }
.scopes__head { max-width: 720px; margin-bottom: clamp(30px, 4vw, 48px); }
.scopes__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}
.scope figure {
  margin: 0 0 18px; position: relative;
  border: 1px solid #2f3844; border-radius: 3px; overflow: hidden;
  background: #11161d;
}
.scope figure::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,17,22,0) 55%, rgba(13,17,22,.55));
}
.scope img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.82) contrast(1.03); }
.scope h3 {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(20px, 2.1vw, 26px); margin: 0 0 8px; color: var(--gold-lt);
}
.scope > p { margin: 0 0 16px; font-size: 15.6px; color: var(--muted); }
.scope ul {
  list-style: none; margin: 0; padding: 16px 0 0;
  border-top: 1px solid #2a323d;
  columns: 2; column-gap: clamp(14px, 1.6vw, 24px);
}
.scope li {
  break-inside: avoid; position: relative;
  padding: 6px 0 6px 15px; font-size: 14.6px; color: #b3bdc9;
}
.scope li::before {
  content: ''; position: absolute; left: 0; top: 12px;
  width: 5px; height: 1px; background: var(--gold-dk);
}
@media (max-width: 1000px) {
  .scopes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scope:last-child { grid-column: 1 / -1; }
  .scope:last-child ul { columns: 3; }
}
@media (max-width: 680px) {
  .scopes__grid { grid-template-columns: 1fr; }
  .scope:last-child ul { columns: 2; }
}

/* ============================================================
   The CRM band

   Sits under Why Armor because it is the same argument carried one
   step further: the reason the complexity is handled is that there
   is a system and a team behind it, not one person with a mailbox.
   ============================================================ */
.crm {
  position: relative; overflow: hidden;
  padding-block: clamp(54px, 6.5vw, 92px);
  background: linear-gradient(180deg, #12171e 0%, #171d26 52%, #10151b 100%);
  border-block: 1px solid #242c36;
}
.crm::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../images/circuit.jpg') center bottom / cover no-repeat;
  opacity: .1; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 72%);
  mask-image: linear-gradient(0deg, #000, transparent 72%);
}
.crm__wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(28px, 5vw, 68px); align-items: center;
}
.crm h2 { margin-bottom: 4px; }
.crm .lede { margin-bottom: 0; }
.crm__pts { list-style: none; margin: clamp(22px, 3vw, 30px) 0 0; padding: 0; display: grid; gap: 12px; }
.crm__pts li {
  position: relative; padding-left: 30px;
  font-size: 16.2px; color: #c3ccd7;
}
.crm__pts li::before {
  content: ''; position: absolute; left: 4px; top: 9px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.crm__plate { padding: clamp(20px, 2.4vw, 28px); }
.crm__plate h3 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 18px;
}
.crm__rows { list-style: none; margin: 0; padding: 0; }
.crm__rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-top: 1px solid #2a323d;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #aab4c1;
}
.crm__rows li:last-child { border-bottom: 1px solid #2a323d; }
.crm__rows b {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  letter-spacing: .04em; color: var(--gold-lt);
}
.crm__note { margin: 16px 0 0; font-size: 13px; color: var(--dim); }
@media (max-width: 900px) { .crm__wrap { grid-template-columns: 1fr; } }

/* a record out of the system, rather than the pipeline again: How It
   Works already runs the stages directly below this band */
.rec__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; }
.rec__id { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.rec__stage {
  font-style: normal; font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #2a1f08;
  background: linear-gradient(180deg, var(--gold-lt), var(--gold-dk));
  border: 1px solid var(--gold-deep); border-radius: 2px; padding: 4px 10px;
}
.rec__rows { list-style: none; margin: 0; padding: 0; }
.rec__rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px solid #2a323d;
}
.rec__rows span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.rec__rows b { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .03em; color: #dbe3ec; }
/* the money is deliberately blank: a real figure here would be somebody's */
.rec__rows em { width: 92px; height: 11px; border-radius: 2px; background: rgba(207,160,66,.26); }
.rec__last { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #2a323d; font-size: 12.8px; color: var(--dim); }

/* ============================================================
   Light bands, take two

   Both pages had runs of dark against dark, which is the thing
   Hunter keeps catching. Three more bands flip to brushed steel so
   nothing dark ever sits directly against something else dark:

     home      dark, gold, dark, LIGHT, dark, LIGHT, gold
     services  dark, LIGHT, dark, LIGHT, dark, LIGHT, gold

   One recipe, applied by class, rather than each band inventing its
   own pale grey.
   ============================================================ */
.lt {
  color: #182029;
  background:
    repeating-linear-gradient(93deg, rgba(255,255,255,.30) 0 2px, rgba(0,0,0,.012) 2px 4px),
    linear-gradient(180deg, #eaeef2 0%, #d2d9e1 52%, #e3e7ed 100%);
  border-block: 1px solid #aeb8c4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.16);
}
.lt h2, .lt h3 { color: #10161d; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.lt .lede { color: #333d49; }
.lt .stamp { color: #1b232c; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.lt .tag { color: #5d4409; }
.lt .svc-sec__n { color: #5d4409; }

/* --- 01 What we scope, now on steel with the photographs bolted to it --- */
.scope figure {
  position: relative; margin: 0 0 20px; overflow: hidden;
  border: 6px solid transparent; border-radius: 5px;
  background:
    linear-gradient(180deg, #11161d, #11161d) padding-box,
    linear-gradient(180deg, #f4f7fa 0%, #aab3bd 22%, #6e7883 52%, #99a3ae 74%, #e9eef3 100%) border-box;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 12px 26px rgba(23,32,43,.28);
}
.scope figure::after {
  content: ''; position: absolute; inset: 8px; pointer-events: none;
  background-repeat: no-repeat;
  background-size: 13px 13px;
  background-position: left top, right top, left bottom, right bottom;
}
.scope img { display: block; }
.scope h3 { color: #131a22; }
.scope > p { color: #46505c; }
.scope ul { border-top-color: rgba(24,32,41,.18); }
.scope li { color: #3a444f; }
.scope li::before { background: #8a6716; }

/* --- How it works, on steel: dark plates read as hardware on a bench --- */
.how.lt .stn__num { box-shadow: inset 0 1px 0 var(--edge-hi), 0 0 0 7px #dbe1e8, 0 10px 22px rgba(23,32,43,.3); }
.how.lt .stn__card--end { border-color: #8a6716; }
.how.lt .stn__card--end h3 { color: #4a3606; }
.how.lt .stn__card--end .stn__who { color: #5d4409; }
.how.lt .stn__card--end p { color: #3a444f; }

/* --- What we need, on steel --- */
.need.lt .need__foot { color: #2c3540; }

@media (min-width: 940px) {
  .how.lt .stn__num { box-shadow: inset 0 1px 0 var(--edge-hi), 0 0 0 7px #dae0e7, 0 10px 22px rgba(23,32,43,.3); }
}

/* Headings that sit on a dark plate inside a light band keep their own
   colour. .lt darkens type for the band's own ground, not for the metal
   bolted onto it. */
.how.lt .stn h3 { color: #dfe6ee; text-shadow: none; }
.how.lt .stn__card--end h3 { color: #4a3606; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.need.lt .need__grid h3 { color: var(--gold-lt); text-shadow: none; }

/* ---- the fuller form ---- */
.cform__wide { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cform textarea {
  font-family: var(--body); font-size: 15px; color: var(--paper);
  background: #10151b; border: 1px solid #3c4653; border-radius: 3px;
  padding: 11px 12px; width: 100%; resize: vertical; min-height: 84px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45);
}
.cform textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45), 0 0 0 3px rgba(207,160,66,.25);
}
.cform__set { border: 1px solid #333c48; border-radius: 3px; margin: 0 0 14px; padding: 14px 16px 16px; }
.cform__set legend {
  padding: 0 8px; margin-left: -4px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lt);
}
.cform__set[data-invalid] { border-color: #d4664e; }
.cform__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }

/* checkbox rows are sentences, not field labels, so they opt out of the
   uppercase mono treatment the rest of the form uses */
.cform__checks label, .cform label.cform__opt {
  flex-direction: row; align-items: flex-start; gap: 10px;
  font-family: var(--body); font-size: 15px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: #c8d1db; cursor: pointer;
}
.cform__opt { margin-top: 12px; }
.cform__opt span { font-size: 13.4px; line-height: 1.5; color: var(--muted); }
.cform__checks input, .cform__opt input {
  flex: none; width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--gold); cursor: pointer;
}
.cform__set--consent { margin-top: 4px; }
@media (max-width: 560px) { .cform__checks { grid-template-columns: 1fr; } }

/* ---- multi step ---- */
.cform__bar { height: 3px; border-radius: 2px; background: #10151b; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); overflow: hidden; }
.cform__bar i { display: block; height: 100%; width: var(--p, 25%); background: linear-gradient(90deg, var(--gold-dk), var(--gold)); transition: width .35s cubic-bezier(.22,.61,.36,1); }
.cform__step {
  display: flex; align-items: baseline; gap: 12px; margin: 14px 0 18px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.cform__step em { font-style: normal; color: var(--gold-lt); }
.fs { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.fs legend {
  padding: 0; margin-bottom: 12px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lt);
}
.fs[data-invalid] .cform__checks { outline: 1px solid #d4664e; outline-offset: 8px; border-radius: 3px; }
.cform__nav { display: flex; gap: 12px; margin-top: 20px; }
.cform__nav .btn { flex: 0 0 auto; }
.close .cform__nav .btn--line { color: #cdd6e0; border-color: rgba(255,255,255,.24); text-shadow: none; background: rgba(255,255,255,.04) padding-box, linear-gradient(180deg, #5c6673, #333c48) border-box; }
.close .cform__nav .btn--line:hover { background: rgba(255,255,255,.09) padding-box, linear-gradient(180deg, #6d7885, #3d4653) border-box; }

/* ---- the scope text on a plate of its own ---- */
.scope__plate {
  position: relative;
  padding: clamp(18px, 2vw, 24px);
  border-radius: 4px;
  border: 1px solid #b0bac6;
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 44%),
    repeating-linear-gradient(96deg, rgba(255,255,255,.35) 0 2px, rgba(0,0,0,.014) 2px 4px),
    linear-gradient(168deg, #e7ebf0, #d3dae1 62%, #dfe4ea);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 10px 24px rgba(23,32,43,.18);
}
.scope__plate::before {
  content: ''; position: absolute; inset: 9px; pointer-events: none;
  background-repeat: no-repeat; background-size: 13px 13px;
  background-position: left top, right top, left bottom, right bottom;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e8ecf1'/%3E%3Cstop offset='.5' stop-color='%23a4aeba'/%3E%3Cstop offset='1' stop-color='%23717c88'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='7.5' cy='8.2' r='5.4' fill='%23000' opacity='.22'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='url(%23p)'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='none' stroke='%2374808d' stroke-opacity='.7'/%3E%3Cpath d='M4.1 9.1 11 5.2' stroke='%235d6874' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3ClinearGradient id='q' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e8ecf1'/%3E%3Cstop offset='.5' stop-color='%23a4aeba'/%3E%3Cstop offset='1' stop-color='%23717c88'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='7.5' cy='8.2' r='5.4' fill='%23000' opacity='.22'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='url(%23q)'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='none' stroke='%2374808d' stroke-opacity='.7'/%3E%3Cpath d='M5.6 11 9.4 4.1' stroke='%235d6874' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e8ecf1'/%3E%3Cstop offset='.5' stop-color='%23a4aeba'/%3E%3Cstop offset='1' stop-color='%23717c88'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='7.5' cy='8.2' r='5.4' fill='%23000' opacity='.22'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='url(%23r)'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='none' stroke='%2374808d' stroke-opacity='.7'/%3E%3Cpath d='M4 5.9 11 9.4' stroke='%235d6874' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e8ecf1'/%3E%3Cstop offset='.5' stop-color='%23a4aeba'/%3E%3Cstop offset='1' stop-color='%23717c88'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='7.5' cy='8.2' r='5.4' fill='%23000' opacity='.22'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='url(%23s)'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.4' fill='none' stroke='%2374808d' stroke-opacity='.7'/%3E%3Cpath d='M3.6 7.5 H11.4' stroke='%235d6874' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.scope__plate h3 { margin-top: 0; }
.scope__plate ul { border-top-color: rgba(24,32,41,.2); }

/* ---- the hero rails, pushed harder ---- */
.rail { padding: 20px clamp(12px, 2.2vw, 26px); }
.rail b { font-size: clamp(24px, 3vw, 40px); }
.rail span { font-size: clamp(10.5px, 1.05vw, 13px); letter-spacing: .12em; color: #b6c0cc; }
.rail--sm { --screw: 12px; margin-top: 14px; max-width: 500px; padding: 15px clamp(12px, 2.2vw, 22px); }
.rail--sm li { font-size: clamp(12px, 1.25vw, 15px); letter-spacing: .18em; }

/* ---- figures on the claim record ---- */
.rec__n { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .03em; color: #cfd8e2; font-variant-numeric: tabular-nums; }
.rec__n--ok { color: var(--gold-lt); }

/* ---- the last station is the result, so it is the one in brass ---- */
.stn--end .stn__card {
  border: 1px solid var(--gold-deep); border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #e2b761 0%, #c39331 52%, #ac7c26 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.28), 0 12px 28px rgba(60,44,10,.32);
}
.how.lt .stn--end .stn__card h3,
.stn--end .stn__card h3 { color: #120c02; text-shadow: 0 1px 0 rgba(255,255,255,.28); }
.stn--end .stn__card .stn__who { color: #4a3606; }
.stn--end .stn__card p { color: #2b2007; }

/* ---- the damage types, named in their own colours ----
   Muted on purpose. These are the only colours on the site outside the
   charcoal and the gold, and they are here to be scanned rather than
   admired: five words, five things a mitigation contractor is looking for. */
.scope__t {
  font-size: clamp(26px, 2.9vw, 36px); font-weight: 700;
  letter-spacing: .005em; line-height: 1.02; margin-bottom: 12px;
}
.scope__t span { -webkit-text-stroke: .4px rgba(0,0,0,.14); }
.w-water { color: #1f6fa8; }
.w-fire  { color: #b23a20; }
.w-smoke { color: #5c6773; }
.w-haz   { color: #a67a09; }
.w-con   { color: #bd6316; }

/* and the line items under them carry more weight */
.scope li { color: #2f3945; font-size: 15px; padding: 7px 0 7px 16px; }
.scope li::before { background: #8a6716; width: 6px; height: 2px; top: 15px; }
.scope > p { color: #3c4652; }

/* ============================================================
   01 Roofing and construction

   Two photographs rather than three, so they run bigger. Dark
   ground: the ticker above it does the separating, the same way
   it does between the hero and the results band on the home page.
   ============================================================ */
.trades { background: #0d1116; border-top: 1px solid #242c36; }
.trades__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.trades .scope figure {
  background:
    linear-gradient(180deg, #11161d, #11161d) padding-box,
    linear-gradient(180deg, #f4f7fa 0%, #aab3bd 22%, #6e7883 52%, #99a3ae 74%, #e9eef3 100%) border-box;
}
.trade__plate {
  position: relative;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--edge); border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 42%),
    repeating-linear-gradient(96deg, rgba(255,255,255,.020) 0 2px, rgba(0,0,0,.020) 2px 4px),
    linear-gradient(168deg, var(--steel-700), var(--steel-900) 62%, #171d25);
  box-shadow: inset 0 1px 0 var(--edge-hi), inset 0 -1px 0 rgba(0,0,0,.55), 0 14px 34px rgba(0,0,0,.45);
}
.trade__plate h3 {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 10px; color: var(--gold-lt);
}
.trade__plate > p { margin: 0 0 18px; font-size: 15.6px; color: var(--muted); }
.trade__plate ul {
  list-style: none; margin: 0; padding: 16px 0 0;
  border-top: 1px solid #2a323d;
  columns: 2; column-gap: clamp(16px, 2vw, 28px);
}
.trade__plate li {
  break-inside: avoid; position: relative;
  padding: 6px 0 6px 15px; font-size: 14.6px; color: #b7c1cd;
}
.trade__plate li::before {
  content: ''; position: absolute; left: 0; top: 15px;
  width: 6px; height: 2px; background: var(--gold-dk);
}
@media (max-width: 860px) { .trades__grid { grid-template-columns: 1fr; } }

/* ============================================================
   The sketch drawings, out of the way of the words

   They are bottom aligned and bleed off one edge, which is fine
   while the columns are wide. As the layout narrows the text
   comes to them, so they step back twice before the single
   column breakpoint rather than only at it.
   ============================================================ */
@media (max-width: 1400px) {
  .plan--roof    { opacity: .24; transform: translateX(-44%); }
  .plan--floor   { opacity: .3;  transform: translateX(54%); }
  .plan--invoice { opacity: .72; transform: translateX(-38%); }
  .plan--docs    { opacity: .8;  transform: translateX(-34%); }
}
@media (max-width: 1120px) {
  .plan--roof    { opacity: .14; transform: translateX(-54%); }
  .plan--floor   { opacity: .17; transform: translateX(62%); }
  .plan--invoice { opacity: .45; transform: translateX(-48%); }
  .plan--docs    { opacity: .5;  transform: translateX(-44%); }
}

/* ============================================================
   The menu on a phone

   There was no way to reach the services page from a phone at
   all: the nav is hidden below 980 and the only control left was
   the CTA. Below that width the links move into a panel behind a
   button instead of disappearing.
   ============================================================ */
.burger {
  display: none;
  width: 46px; height: 42px; flex: none;
  align-items: center; justify-content: center; gap: 5px; flex-direction: column;
  border: 1px solid var(--edge); border-radius: 3px;
  background: linear-gradient(180deg, var(--steel-700), var(--steel-900));
  box-shadow: inset 0 1px 0 var(--edge-hi);
  cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 2px; border-radius: 1px;
  background: var(--gold-lt);
  transition: transform .22s ease, opacity .16s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .burger { display: flex; }
  .hdr { flex-wrap: wrap; row-gap: 0; }
  .nav {
    display: flex; flex-direction: column; gap: 0;
    order: 3; width: 100%;
    max-height: 0; overflow: hidden;
    transition: max-height .3s cubic-bezier(.22,.61,.36,1);
  }
  .nav[data-open] { max-height: 380px; }
  .nav a {
    padding: 15px 4px; font-size: 13px; letter-spacing: .14em;
    border-bottom: 1px solid #2a323d;
  }
  .nav a:first-child { border-top: 1px solid #2a323d; margin-top: 12px; }
  .nav a:hover { border-bottom-color: #2a323d; color: var(--gold-lt); }
  /* the bar has a panel under it now, so it needs its own ground even
     before the scroll handler gives it one */
  .hdr { background: rgba(16,20,26,.94); backdrop-filter: blur(14px) saturate(1.1); }
  .hdr:has(.nav[data-open]) { border-bottom-color: #2a323d; }
}
/* on a narrow phone the lockup, the CTA and the button do not fit on one
   row, and a header that wraps to two pushes the hero down the screen.
   The CTA steps out: Start here is the last item in the menu. */
@media (max-width: 620px) {
  .hdr > .btn { display: none; }
  .brand { margin-right: auto; }
}

/* ============================================================
   Reading the words over the drawings

   The paper and the invoice sit behind the copy, and on a narrow
   screen the copy comes to meet them. Stepping the drawings back
   was half of it; the other half is that these panels needed a
   ground of their own rather than a transparent tint.
   ============================================================ */
@media (max-width: 1120px) {
  .checks, .rcv {
    background: rgba(16,21,27,.93);
    backdrop-filter: blur(3px);
    border-color: #3a4451;
  }
  .checks li, .rcv__steps li { color: #d3dbe4; }
  .checks__foot { color: #9fabb8; }
  .svc-sec__head .lede { color: #c3ccd7; }
}
@media (max-width: 700px) {
  .checks, .rcv { background: rgba(16,21,27,.97); }
  /* the head sits directly over the paper on a phone, so it gets one too */
  .svc-sec--a .svc-sec__head, .svc-sec--c .svc-sec__head {
    position: relative; z-index: 1;
    padding: 20px 18px; border-radius: 4px;
    background: rgba(16,21,27,.9);
    backdrop-filter: blur(3px);
  }
}

/* the ACV and depreciation bar, legible at any width */
.rcv__bar b { font-size: clamp(15px, 1.7vw, 17px); }
.rcv__bar span { font-size: clamp(12px, 1.25vw, 12.6px); line-height: 1.35; }
/* it stays a row on a phone. Stacking the two halves would make them the
   same size, and their relative size is the entire point of the picture. */
@media (max-width: 620px) {
  .rcv__bar i { padding: 12px 10px; }
  .rcv__bar b { font-size: 14px; letter-spacing: .01em; }
  .rcv__bar span { font-size: 11px; line-height: 1.3; }
  .rcv__acv { flex: 0 0 52%; }
}

/* The circuit artwork, lighting this band off the page head above it.
   The traces hang from the top edge and thin out on the way down, so they
   start hard against the ticker rather than fading in below it.

   This is line art Hunter found, not the photographic version it started
   as. That one was a picture of light, so every trace carried a glow and
   the whole thing sat on a gradient. Thresholding it to isolate the lines
   only worked on the brightest ones, which is why some traces survived
   and others broke off mid run. Drawn lines have no such problem: uniform
   weight, solid end to end, and the ground is already black.

   The flip is baked into the file. Doing it with transform: rotate(180deg)
   turned the mask upside down along with the artwork, which put the solid
   end at the bottom and faded the traces out exactly where they were meant
   to be strongest. */
.trades { position: relative; }
.trades::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../images/circuit-gold.jpg') center top / cover no-repeat;
  /* screen ignores black entirely, so with a black ground this runs at
     full strength and what lands on the page is the lines and nothing else */
  opacity: 1; mix-blend-mode: screen;
  background-size: 100% auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 84%);
  mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 84%);
}
.trades > .wrap { position: relative; z-index: 1; }

/* the bar fills from the left when you reach it, ACV then the withheld
   part behind it, so it reads as one amount being divided */
.rcv__bar { position: relative; }
.rcv[data-armed] .rcv__bar i {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .85s cubic-bezier(.22,.61,.36,1);
}
.rcv[data-armed] .rcv__bar i > * { opacity: 0; transition: opacity .3s ease .55s; }
.rcv[data-armed][data-in] .rcv__bar i { transform: scaleX(1); }
.rcv[data-armed][data-in] .rcv__dep { transition-delay: .3s; }
.rcv[data-armed][data-in] .rcv__bar i > * { opacity: 1; }
.rcv[data-armed][data-in] .rcv__dep > * { transition-delay: .85s; }
@media (prefers-reduced-motion: reduce) {
  .rcv__bar i, .rcv__bar i > * { transform: none; opacity: 1; transition: none; }
}

/* The traces are densest at the top left, which is where the heading and
   the lede sit. Rather than dim the artwork back down, the text block
   carries its own soft ground, so the band stays bright everywhere the
   words are not. Painted as the element's own background, so it sits
   behind its text without any z-index games against the circuit layer. */
.trades .scopes__head {
  padding: 26px 34px 30px 0;
  background:
    linear-gradient(90deg, rgba(9,12,17,.94) 0%, rgba(9,12,17,.9) 52%, rgba(9,12,17,0) 100%),
    radial-gradient(130% 150% at 8% 50%, rgba(9,12,17,.9), rgba(9,12,17,0) 82%);
}
@media (max-width: 860px) {
  .trades .scopes__head {
    padding: 22px 20px 24px;
    background: rgba(9,12,17,.86);
    border-radius: 4px;
  }
}

/* ============================================================
   Legal pages

   One column, generous measure, nothing in the background. These
   are read rather than scanned, which is the opposite of every
   other page here, so they get none of the material treatment.
   ============================================================ */
.phead--legal { padding-block: calc(var(--band) + 30px) clamp(38px, 5vw, 60px); }
.phead--legal .phead__h { font-size: clamp(32px, 4.6vw, 62px); }
.phead--legal .lede { max-width: 56ch; }
.legal__date {
  margin: 20px 0 0; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.legal { padding-block: clamp(48px, 6vw, 84px); }
.legal__wrap { max-width: 74ch; }
.legal h2 {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.1;
  margin: clamp(34px, 4vw, 52px) 0 14px; color: #10161d;
  padding-top: clamp(22px, 2.6vw, 32px); border-top: 1px solid rgba(24,32,41,.16);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p { margin: 0 0 16px; font-size: 17px; line-height: 1.68; color: #2c3540; }
.legal ul { margin: 0 0 18px; padding: 0; list-style: none; }
.legal li {
  position: relative; padding: 6px 0 6px 22px;
  font-size: 17px; line-height: 1.62; color: #2c3540;
}
.legal li::before {
  content: ''; position: absolute; left: 2px; top: 16px;
  width: 7px; height: 2px; background: #8a6716;
}
.legal strong { color: #10161d; }
.legal a { color: #4a3606; text-underline-offset: 3px; }
.legal a:hover { color: #10161d; }

/* ============================================================
   Cookie consent

   Anchored to the bottom, out of the way of the page rather than
   across the middle of it. Reject and Accept are the same size and
   sit side by side: on a bar like this the refusal being harder
   than the agreement is not a style choice, it is unlawful in
   several of the places this site is read.
   ============================================================ */
.cc {
  position: fixed; z-index: 200; inset: auto 0 0 0;
  padding: 0 var(--gutter) max(16px, env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.cc[data-in] { transform: none; }
.cc__in {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: 18px clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--edge); border-top-left-radius: 4px; border-top-right-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 42%),
    linear-gradient(168deg, var(--steel-700), var(--steel-900) 62%, #171d25);
  box-shadow: inset 0 1px 0 var(--edge-hi), 0 -14px 40px rgba(0,0,0,.55);
}
.cc__t { margin: 0; font-size: 15px; line-height: 1.55; color: #c8d1db; }
.cc__t a { color: var(--gold-lt); text-underline-offset: 3px; }
.cc__row { display: flex; gap: 12px; flex: none; }
.cc__row .btn { padding: 11px 22px; font-size: 15px; }
@media (max-width: 720px) {
  .cc { padding-inline: 12px; }
  .cc__in { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .cc__row .btn { flex: 1 1 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cc { transition: none; }
}

/* ============================================================
   THANK YOU PAGE
   The gold band is the whole page here rather than a strip at the
   bottom, so it needs to fill the viewport and centre rather than
   sit as a two-column row.
   ============================================================ */
.close--thanks { display: flex; align-items: center; min-height: calc(100dvh - 120px); padding-block: calc(var(--band) + 34px) clamp(48px, 6vw, 76px); }
.close__wrap--thanks { flex-direction: column; align-items: center; text-align: center; justify-content: center; }
.close--thanks h1 { color: #1a1204; margin: 6px 0 0; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.close--thanks p { max-width: 52ch; }
.close__row--thanks { margin-top: 26px; justify-content: center; }