/* AVIT production stylesheet
   Type: IBM Plex Sans (display + body) / IBM Plex Mono (labels)
   Replaces the inline-style DC authoring format. One nav breakpoint: 1120px. */

:root {
  --red: #E2231A;
  --red-dark: #8C1712;
  --red-lift: #FF6B63;          /* error text on dark surfaces, 5.4:1 on charcoal */
  /* Red TEXT on the dark surfaces. Brand red measures 3.06:1 on charcoal and
     3.64:1 on black: fine for fills, marks, rules and display numerals, short
     of the 4.5:1 that normal-sized text needs. --red-ink is 4.97:1 on charcoal
     and 6.12:1 on black. It coincides with --red-lift today; the two are kept
     apart because one is an error state and one is body/label ink. Brand red
     stays the red on white, where it already measures 4.68:1.
     One constraint to keep: --red-ink is only 4.25:1 on --slate, so the band
     surfaces (.sect--band, .facility, the coverage band section) must not take
     red normal-sized text. None ships today; if red copy is ever wanted there,
     lift the value for that surface rather than reusing this token. */
  --red-ink: #FF6B63;
  --charcoal: #2A2A2D;
  --slate: #37373B;
  --black: #1C1C1C;
  --gray-700: #4A4A4A;
  --gray-500: #737373;
  --gray-400: #9A9A9A;          /* the on-dark secondary. Never #737373 on dark. */
  --gray-300: #B5B5B5;
  --gray-100: #E8E8E8;
  --white: #fff;
  --wrap: 1200px;
  --skew: -12deg;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --label: 0.14em;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img { max-width: 100%; display: block; }

/* Links. The default page surface is charcoal, so the default link ink is
   --red-ink. Brand red is kept for links on the white surfaces, which are all
   marked (.on-light, .panel--drawer, .card); there it measures 4.68:1 and its
   hover drops to --red-dark at 9.35:1 rather than the lifted red, which would
   be 2.79:1 on white. Hover stays a distinct value on both surfaces, focus is
   the shared ring below, and :visited is left unstyled exactly as before. */
a { color: var(--red-ink); text-decoration: none; }
a:hover { color: #fff; }
/* :not(.btn) matters: without it these two-class selectors outrank .btn--primary
   and .btn--ghost, and a red button on a white panel would get red text on a red
   field. Buttons keep their own colour pair. */
.on-light a:not(.btn), .panel--drawer a:not(.btn), .card a:not(.btn) { color: var(--red); }
.on-light a:not(.btn):hover, .panel--drawer a:not(.btn):hover, .card a:not(.btn):hover { color: var(--red-dark); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }

/* ---- focus: one visible ring, everywhere, no exceptions ---- */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-light :focus-visible { outline-color: var(--red-dark); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--red); color: #fff; padding: 12px 18px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  transition: top .15s ease-out;
}
.skip:focus { top: 12px; color: #fff; }

/* ---- shared bits ---- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--mono); letter-spacing: 0.12em; }
.slash { display: block; background: var(--red); transform: skewX(var(--skew)); flex: none; }
.eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.08em;
  color: var(--gray-400); text-transform: uppercase;
}
/* --gray-400 is the on-dark secondary: 4.92:1 on charcoal but only 2.81:1 on
   white. On the light surfaces the eyebrow steps down to --gray-500, 4.74:1. */
.on-light .eyebrow { color: var(--gray-500); }
.rule { width: 26px; height: 3px; background: var(--red); transform: skewX(var(--skew)); }
.sect { padding: 96px 0 88px; }
.sect--light { background: var(--white); color: var(--black); }
.sect--black { background: var(--black); }
.sect--band { background: var(--slate); border-block: 1px solid rgba(255,255,255,.06); }
.lede { font-size: 19px; line-height: 1.6; color: var(--gray-300); max-width: 40em; }
.body-sm { font-size: 15px; line-height: 1.6; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 15px 26px; border: 1px solid transparent; border-radius: 3px;
  cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out;
}
.btn--lg { font-size: 17px; padding: 18px 32px; }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); color: #fff; }
.btn--ghost { background: none; color: #fff; border-color: rgba(255,255,255,.3); }
.btn--ghost:hover { background: rgba(255,255,255,.07); color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 60; background: var(--charcoal);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 32px; max-width: var(--wrap); margin: 0 auto; }
.nav__links { display: flex; align-items: center; gap: 22px; }
.nav__links a { white-space: nowrap; }
.navlink {
  font-family: var(--sans); font-weight: 500; font-size: 12px; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
.navlink:hover, .navlink[aria-current="page"] { color: #fff; }
.nav__phone {
  display: flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: 12px; line-height: 1; letter-spacing: 0.06em; color: #fff; white-space: nowrap;
}
.nav__phone:hover { color: var(--red-ink); }
.nav__phone .slash { width: 8px; height: 11px; }

/* Experience dropdown: hover AND focus-within, so keyboards get it too */
.drop { position: relative; }
.drop__btn {
  display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0;
  font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,.72); cursor: pointer;
}
.drop__btn:hover { color: #fff; }
.drop__btn .slash { width: 6px; height: 10px; transition: width .2s ease-out; }
.drop:hover .drop__btn .slash, .drop__btn[aria-expanded="true"] .slash { width: 13px; }
.drop__menu {
  position: absolute; top: 100%; left: -18px; padding-top: 15px; z-index: 70; display: none;
}
.drop__menu[data-open] { display: block; }
.drop__inner {
  min-width: 236px; background: var(--charcoal); border: 1px solid var(--gray-700);
  border-radius: 3px; box-shadow: 0 18px 40px rgba(0,0,0,.5); padding: 8px 0;
  display: flex; flex-direction: column;
}
.drop__inner a {
  padding: 11px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  color: rgba(255,255,255,.82);
}
.drop__inner a:hover { color: #fff; background: rgba(255,255,255,.06); }

.burger {
  display: none; background: none; border: 1px solid rgba(255,255,255,.28);
  border-radius: 2px; padding: 11px 12px; cursor: pointer;
  flex-direction: column; align-items: center; gap: 4px; flex: none;
}
.burger span { display: block; width: 18px; height: 2px; background: #fff; }

/* ---- overlays (menu + drawer) ---- */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.62); z-index: 90; }
.scrim[hidden] { display: none; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  display: flex; flex-direction: column; box-shadow: -14px 0 36px rgba(0,0,0,.5);
}
.panel[hidden] { display: none; }
.panel--menu { width: min(392px, 90vw); background: var(--charcoal); border-left: 1px solid var(--gray-700); }
.panel--drawer { width: min(460px, 92vw); background: var(--white); color: var(--black); }
.panel__head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.panel--drawer .panel__head { border-bottom-color: var(--gray-100); }
.panel__close {
  background: none; border: 0; padding: 6px 8px; font-size: 24px; line-height: 1;
  color: inherit; cursor: pointer;
}
.panel__body { flex: 1; overflow-y: auto; }
.menu__item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 19px 24px; border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--sans); font-weight: 700; font-size: 18px; color: #fff;
}
.menu__item:hover { background: rgba(255,255,255,.05); color: #fff; }
.menu__foot { padding: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 10px; }
.menu__note { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; color: var(--gray-400); padding-left: 20px; text-transform: uppercase; }
.menu__tel { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 21px; color: #fff; }
.menu__tel:hover { color: var(--red); }
.menu__tel .slash { width: 9px; height: 17px; }

/* ---- hero ---- */
.hero { position: relative; background: var(--charcoal); overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__in { position: relative; padding: 116px 32px 0; max-width: var(--wrap); margin: 0 auto; }
/* The nav already carries the mark; the hero eyebrow is text only. */
.hero__flag { display: flex; align-items: center; gap: 14px; }
.hero h1 { font-size: clamp(42px, 7vw, 74px); margin: 28px 0 0; max-width: 19ch; text-wrap: balance; }
.hero__verticals {
  margin-top: 84px; border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0 24px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.08em;
  color: var(--gray-400); text-transform: uppercase;
}
.hero__verticals a { color: var(--gray-400); }
.hero__verticals a:hover { color: #fff; }
.cta-row { display: flex; align-items: center; gap: 18px; margin-top: 38px; flex-wrap: wrap; }

/* ---- stats ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats > div { padding: 34px 28px; border-right: 1px solid rgba(255,255,255,.08); }
.stats > div:first-child { padding-left: 0; }
.stats > div:last-child { padding-right: 0; border-right: 0; }
.stats__n { font-family: var(--sans); font-weight: 700; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.stats__l { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; color: var(--gray-300); margin-top: 10px; text-transform: uppercase; }

/* ---- capability cards: real buttons ---- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 12px; text-align: left;
  background: var(--white); color: var(--black); border: 1px solid var(--gray-100);
  border-radius: 4px; padding: 26px; font: inherit; cursor: pointer;
  transition: transform .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out;
}
.card:hover { transform: translateY(-4px); border-color: var(--red); box-shadow: 0 10px 24px rgba(28,28,28,.08); }
.card__tab {
  position: absolute; bottom: calc(100% - 28px); right: 26px; width: 34px; height: 46px;
  background: var(--gray-100); transform: skewX(var(--skew)); transform-origin: bottom right;
  transition: background-color .22s ease-out;
}
.card:hover .card__tab, .card:focus-visible .card__tab { background: var(--red); }
.card__n { font-weight: 700; font-size: 44px; line-height: 1; color: var(--gray-300); font-variant-numeric: tabular-nums; }
.card h3 { font-size: 20px; margin: 6px 0 0; }
.card p { font-size: 15px; line-height: 1.6; color: var(--gray-700); margin: 0; }
.card__more {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--gray-100);
  font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.06em;
  color: var(--gray-700); text-transform: uppercase;
}
.card--wide { grid-column: 1 / -1; background: var(--charcoal); color: #fff; border-color: var(--gray-700); }
.card--wide h3 { color: #fff; }
.card--wide p { color: var(--gray-300); }
.card--wide .card__n { color: var(--red); }
.card--wide .card__more { border-top-color: rgba(255,255,255,.12); color: var(--gray-300); }

/* ---- drawer content ---- */
.drawer__body { padding: 28px 24px; }
.drawer__title { font-size: 24px; margin-top: 16px; }
.vendors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.vendors span {
  border: 1px solid var(--gray-100); border-radius: 2px; min-height: 72px;
  display: flex; align-items: center; justify-content: center; padding: 11px 8px; text-align: center;
  font-weight: 600; font-size: 14px; color: var(--black);
}
/* Logo tiles share the text tile's box, so a partial logo set still reads as
   one grid. Each mark is pre-composited into an identical 170x50 white box
   (written @2x) with its draw scale set by measured aspect ratio. A square
   glyph needs more height than a 9:1 wordmark to carry the same optical
   weight. Uniform boxes mean one rule sizes the entire wall. */
.vendors img { width: 100%; max-width: 170px; height: auto; display: block; }
.drawer__foot { padding: 18px 24px; border-top: 1px solid var(--gray-100); display: grid; }

/* The four-card phase grid and its red rules were removed: three or four equal
   cards had become the default answer to every content problem on the site.
   Sequenced content is now .steps, numeral-led. .grid4 survives only for the
   footer column grid reference in the responsive block below. */

/* ---- intake form ---- */
.intake { max-width: 760px; margin: 0 auto; }
.panelbox {
  background: var(--charcoal); border: 1px solid var(--gray-700); border-radius: 4px;
  position: relative; overflow: hidden; margin-top: 40px;
}
.panelbox[data-state="error"] { border-color: var(--red); }
.panelbox__head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.06em;
  color: var(--gray-300); text-transform: uppercase;
}
.form { padding: 28px 22px 26px; display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; color: var(--gray-300); text-transform: uppercase; }
.field__hint { font-size: 12px; line-height: 1.5; color: var(--gray-400); }
.field input, .field textarea {
  background: var(--black); border: 1px solid var(--gray-700); border-radius: 2px;
  padding: 13px 14px; color: #fff; font-family: var(--mono); font-size: 14px;
  width: 100%; transition: border-color .15s ease-out;
}
/* #6E6E6E was 3.34:1 on the --black field. #8C8C8C is 5.07:1 and still reads
   as clearly secondary against the #fff typed value at 17.4:1. */
.field input::placeholder, .field textarea::placeholder { color: #8C8C8C; }
.field input:focus, .field textarea:focus { border-color: var(--red); outline: 2px solid var(--red); outline-offset: 1px; }
.field textarea { resize: vertical; min-height: 108px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); }
.field__err { font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--red-lift); }
.field__err:empty { display: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.status { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0.02em; color: var(--gray-400); }
.status[data-state="error"] { color: var(--red-lift); }
.privacy-note { font-size: 12px; line-height: 1.55; color: var(--gray-400); }
/* [hidden] must beat the flex display, or the success panel ships visible. */
.done[hidden] { display: none; }
.done { padding: 56px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }

/* Honeypot. Deliberately NOT .sr-only: that stays focusable and announced.
   The markup takes it out of the tab order and hides it from assistive
   technology; this parks it off-screen with no layout impact. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile block. Ships hidden and stays hidden until an endpoint and an
   exact-host public sitekey are both configured. */
.cf-block { display: flex; flex-direction: column; gap: 9px; }
.cf-block[hidden] { display: none; }

/* ---- page header (interior pages) ---- */
.phead { background: var(--charcoal); border-bottom: 1px solid rgba(255,255,255,.08); }
.phead__in {
  max-width: var(--wrap); margin: 0 auto; padding: 92px 32px 76px;
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 56px; align-items: end;
}
.phead h1 { font-size: clamp(38px, 6vw, 68px); margin: 22px 0 0; max-width: 740px; text-wrap: balance; }
.phead .lede { font-size: 19px; max-width: 620px; }

.dl { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.14); margin: 0; }
.dl > div {
  display: flex; justify-content: space-between; gap: 8px 16px; padding: 14px 0;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dl > div:last-child { border-bottom: 0; }
.dl dt { color: var(--gray-400); }
.dl dd { margin: 0; color: #fff; }

/* ---- native disclosure accordions ----
   <details>/<summary> gives keyboard operation, correct ARIA and a working
   no-JS fallback for free. Content stays in the DOM when closed, so it is
   indexable. Marker is drawn by us; the UA triangle is removed. */
.spec, .faq { border-bottom: 1px solid var(--gray-100); }
.faq { border-bottom: 0; border-top: 1px solid rgba(255,255,255,.1); }
.faq:last-of-type { border-bottom: 2px solid var(--red); }
.spec:last-of-type { border-bottom: 2px solid var(--charcoal); }

.spec > summary, .faq > summary {
  display: grid; grid-template-columns: 1fr 1.25fr 24px; gap: 28px;
  align-items: baseline; padding: 28px 0; cursor: pointer; list-style: none;
  transition: background-color .16s ease-out;
}
/* The hover field bleeds past the text columns. Flush with the first and last
   column it reads as a band clipped mid-row. The negative inline margin keeps
   the grid tracks where they were. */
.spec > summary { margin-inline: -20px; padding-inline: 20px; border-radius: 2px; }
.faq > summary { grid-template-columns: 1fr 24px; padding: 24px 0; }
.spec > summary::-webkit-details-marker,
.faq > summary::-webkit-details-marker { display: none; }
.spec > summary:hover { background: #F0F0F1; }
.spec > summary:hover .spec__mk { background: var(--red); }
.faq > summary:hover { background: rgba(255,255,255,.03); }

.spec__id { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--gray-500); }
.faq .spec__id { color: var(--gray-400); }
.spec > summary h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }
.faq > summary h3 { font-size: 19px; line-height: 1.3; color: #fff; }
.spec__desc { font-size: 15px; line-height: 1.6; color: var(--gray-700); }
/* The marker is the visible affordance and the collapsed/expanded indicator for
   an interactive control, so WCAG 1.4.11 applies to it in both states and on
   every surface it appears over. Native <details> semantics do not exempt it.
   Only the fill changed: width, height, skew, justify-self and the .18s
   background fade are exactly as before.
     closed on white      --gray-300 2.05:1  ->  --gray-500 4.74:1
     closed on charcoal    rgba(#fff,.3) 2.65:1  ->  --gray-400 5.09:1
     open on charcoal      --red 3.06:1 at rest but 2.80:1 over the FAQ row's
                           3% hover wash  ->  --red-ink 5.14:1 / 4.70:1
   The open spec marker stays brand red: 4.68:1 on white and 4.11:1 over the
   #F0F0F1 summary hover band. */
.spec__mk {
  justify-self: end; width: 22px; height: 11px; transform: skewX(var(--skew));
  background: var(--gray-500); transition: background-color .18s ease-out;
}
.faq .spec__mk { background: var(--gray-400); }
details[open] .spec__mk { background: var(--red); }
.faq[open] .spec__mk { background: var(--red-ink); }

.spec__body, .faq__body {
  display: grid; grid-template-columns: 1fr; padding: 0 0 34px;
}
.faq__body { padding-bottom: 28px; }
.faq__body p { font-size: 15px; line-height: 1.6; color: var(--gray-300); max-width: 780px; margin: 0; }
.spec__label { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; color: var(--gray-500); text-transform: uppercase; }
.spec__incl {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px 36px; margin: 14px 0 0;
  padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--black);
}
.spec__plat {
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0.03em;
  line-height: 1.7; color: var(--gray-700); margin: 10px 0 0; text-transform: uppercase;
}

/* ---- failure-mode rows (non-interactive spec rows) ---- */
.fm {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px;
  align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--gray-100);
}
.fm--last { border-bottom: 2px solid var(--charcoal); }
.fm h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; }
.fm p { font-size: 15px; line-height: 1.6; color: var(--gray-700); margin: 0; }

/* ---- about: asymmetric prose column, facility blocks, phase headings ----
   The four-box company-values grid was deleted. Values stated as a card grid
   are the least credible way to state them; the prose and the facility specs
   carry the same ground now. */
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; padding-top: 44px; }
/* The home page's "AVIT Standard" section (#method) needs a wider second column
   than the About split. It used to declare that inline, which is exactly why it
   stayed two-up at 390px: an inline grid-template-columns outranks every media
   rule in this sheet, so the 920px stack below could never reach it. Declared
   here instead, scoped to #method, with its own stacked rule at the same
   breakpoint. No !important anywhere. */
#method .split--method { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
@media (max-width: 920px) {
  #method .split--method { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 22px; font-size: 17px; line-height: 1.65; }
.prose p { margin: 0; }
.on-light .prose { color: var(--gray-700); }

/* Facility block. Replaced the photo placeholders: the page states the two
   buildings as measured fact rather than holding space for art that may
   never arrive. */
.facility {
  background: var(--slate);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px;
}
.facility::before {
  content: ""; width: 26px; height: 12px; background: var(--red);
  transform: skewX(var(--skew)); margin-bottom: 14px;
}
.facility p { margin: 0; }
.facility .mono { font-size: 12px; letter-spacing: 0.1em; color: var(--gray-300); }
.facility__n {
  font-family: var(--sans); font-weight: 700; font-size: clamp(38px, 5vw, 56px);
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff;
}
.facility__n span { font-size: 15px; letter-spacing: 0.08em; margin-left: 8px; color: var(--gray-300); }
.facility__u { color: var(--gray-300) !important; }

.phase-head {
  display: flex; align-items: baseline; gap: 18px;
  margin-top: 40px; padding-bottom: 12px; border-bottom: 1px solid var(--charcoal);
}
.phase-head:first-of-type { margin-top: 44px; }
.phase-head h3 {
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; color: var(--red); text-transform: uppercase;
}
.phase-head > span:first-of-type { flex: 1; height: 1px; }

/* ---- contact layout + native radio choice group ----
   A real <fieldset>/<legend> + radios: correct grouping semantics, arrow-key
   navigation, and a non-colour selected indicator (the red skew marker). */
.contact-split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 64px; align-items: start; }

.choice { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.choice legend {
  padding: 0; font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em; color: var(--gray-300); text-transform: uppercase;
}
.choice__opt {
  position: relative; display: block; cursor: pointer;
  padding: 15px 16px 15px 34px; border-radius: 2px;
  background: var(--black); border: 1px solid var(--gray-700);
  transition: border-color .16s ease-out;
}
.choice__opt:hover { border-color: var(--gray-400); }
.choice__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
/* the marker: 9x16 skew block, present only when selected, not colour alone */
.choice__opt > span::before {
  content: ""; position: absolute; left: 14px; top: 19px;
  width: 9px; height: 16px; background: var(--gray-700);
  transform: skewX(var(--skew)); transition: background-color .16s ease-out;
}
.choice__opt:has(input:checked) { border-color: var(--red); }
.choice__opt:has(input:checked) > span::before { background: var(--red); }
.choice__opt:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.choice__t { display: block; font-weight: 700; font-size: 14px; color: #fff; }
.choice__d { display: block; font-size: 12px; line-height: 1.5; color: var(--gray-400); margin-top: 5px; }

/* ---- retired: three-quotation rotator ----
   These rules are inert. No page in the build renders .proof / .proof__item /
   .proof__nav: the home page carries one named quotation as a plain
   <figure class="quote">, styled further down this sheet. The block is left
   standing rather than deleted because this pass was scoped to correcting
   defects, not removing code. Delete it, and the matching upgrade block in
   site.js, in the next content pass. */
.proof { border-top: 1px solid rgba(255,255,255,.08); }
.proof__panels { margin-top: 30px; }
.proof__item { margin: 0 0 34px; max-width: 900px; }
.proof__item:last-child { margin-bottom: 0; }
.proof blockquote {
  font-weight: 700; font-size: clamp(21px, 2.7vw, 31px); line-height: 1.28;
  letter-spacing: -0.02em; margin: 0; text-wrap: pretty;
}
.proof figcaption { margin-top: 18px; font-size: 13px; line-height: 1.7; color: var(--gray-400); }
.proof figcaption strong { color: #fff; font-weight: 600; }

.proof[data-rotator] .proof__panels { min-height: 200px; }
.proof[data-rotator] .proof__item { display: none; margin-bottom: 0; }
.proof[data-rotator] .proof__item[data-active] { display: block; }

.proof__nav { display: none; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.proof[data-rotator] .proof__nav { display: flex; }
.proof__nav button {
  background: none; border: 1px solid var(--gray-700); border-radius: 2px;
  padding: 10px 15px; font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.04em; color: var(--gray-400); cursor: pointer;
  transition: border-color .15s ease-out, color .15s ease-out;
}
.proof__nav button:hover { color: #fff; border-color: var(--gray-400); }
.proof__nav button[aria-selected="true"] { color: #fff; border-color: var(--red); }
/* selected state carries a shape, not colour alone */
.proof__nav button[aria-selected="true"]::before {
  content: ""; display: inline-block; width: 7px; height: 11px; background: var(--red);
  transform: skewX(var(--skew)); margin-right: 9px; vertical-align: -1px;
}

/* ---- footer ---- */
.foot { background: var(--charcoal); border-top: 1px solid rgba(255,255,255,.08); }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding: 56px 0 0; }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* Stretch would force the logo to column width against its fixed height. */
.foot__col img { align-self: flex-start; max-width: 100%; }
/* ---- PT.05: mono is reserved for part-like data: the phone number and the
   postal address. Labels, stats captions and footer heads run in the body face. */
.foot__h { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; color: var(--gray-400); text-transform: uppercase; }
.foot__col a { font-weight: 500; font-size: 13px; color: rgba(255,255,255,.78); }
.foot__col a:hover, .foot__col a[aria-current="page"] { color: #fff; }
.foot address { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; line-height: 1.9; color: var(--gray-400); }
.foot__bar {
  margin-top: 44px; padding: 22px 0 28px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.06em;
  color: var(--gray-400); text-transform: uppercase;
}

/* ---- responsive: ONE nav breakpoint ---- */
@media (max-width: 1120px) {
  .nav__links .deskonly { display: none !important; }
  .burger { display: flex; }
}
@media (max-width: 920px) {
  .wrap, .nav__in, .hero__in, .phead__in { padding-left: 22px; padding-right: 22px; }
  .phead__in { grid-template-columns: 1fr; gap: 40px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding: 24px 0; }
  .grid4, .foot__grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .contact-split { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 840px) {
  .nav__phone .hide-sm { display: none; }
}
@media (max-width: 700px) {
  .cards, .grid2, .grid4, .foot__grid, .vendors, .spec__incl { grid-template-columns: 1fr; }
  /* Accordion rows: explicit grid areas so the marker can never wrap. */
  .spec > summary {
    grid-template-columns: 1fr 24px;
    grid-template-areas: "title mk" "desc desc";
    gap: 8px 16px; padding: 22px 0;
  }
  .faq > summary {
    grid-template-columns: 1fr 24px;
    grid-template-areas: "title mk";
    gap: 8px 16px; padding: 20px 0;
  }
  .spec > summary > h3, .faq > summary > h3 { grid-area: title; }
  .spec > summary > .spec__desc { grid-area: desc; }
  .spec > summary > .spec__mk, .faq > summary > .spec__mk { grid-area: mk; }
  .spec__body, .faq__body { grid-template-columns: 1fr; gap: 0; }
  .spec__body > div:first-child, .faq__body > div:first-child { display: none; }
  .fm { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .spec > summary { margin-inline: -12px; padding-inline: 12px; }
  .sect { padding: 64px 0 56px; }
  .hero__in { padding-top: 72px; }
  .hero__verticals { margin-top: 56px; }
  .hide-sm { display: none; }
}
@media (max-width: 560px) {
  .nav img { height: 34px; }
  .nav__links { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- coverage page (body.cov) ----
   Ported out of the page's own <style> block (ARCH). Scoped to .cov: the
   coverage markup predates the shared sheet's .btn--primary / .nav__links
   conventions, so its older .btn / .ghost / .deskonly names live here without
   reaching any other page. Appearance and breakpoints are unchanged. */
.cov {
  --avit-red: var(--red);
  --avit-red-dark: var(--red-dark);
  --tracking-label: 0.08em;
  --leading-body: 1.6;
  --leading-tight: 1.1;
  --text-body-l: 19px;
  --font-display: var(--sans);
  --font-body: var(--sans);
}
.cov [data-dark] { --gray-500: #9A9A9A; }
.cov [data-dark="band"] { --gray-500: #B5B5B5; }
.cov .navlink {
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: rgba(255,255,255,.72); white-space: nowrap;
}
.cov .navlink:hover { color: #fff; }
.cov .slash { background: var(--avit-red); transform: skewX(-12deg); }
.cov .btn {
  font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .04em;
  padding: 16px 26px; border-radius: 2px; border: 1px solid var(--avit-red);
  background: var(--avit-red); color: #fff; cursor: pointer; display: inline-block;
  transition: background-color .16s, border-color .16s;
}
.cov .btn:hover { background: #B31C15; border-color: #B31C15; color: #fff; }
.cov .btn.ghost { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.cov .btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.05); }

.cov .dd {
  position: absolute; top: 100%; left: -18px; margin-top: 15px; transform-origin: top left;
  min-width: 236px; background: var(--charcoal); border: 1px solid var(--gray-700);
  border-radius: 3px; box-shadow: 0 18px 40px rgba(0,0,0,.5); padding: 8px 0;
  display: none; flex-direction: column;
}
.cov .dd.on { display: flex; animation: covDropIn .22s cubic-bezier(.22,.7,.3,1) both; }
.cov .dd::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; }
.cov .dd.on a { animation: covItemIn .24s ease-out both; }
.cov .dd.on a:nth-child(1) { animation-delay: .03s; }
.cov .dd.on a:nth-child(2) { animation-delay: .06s; }
.cov .dd.on a:nth-child(3) { animation-delay: .09s; }
.cov .dd a {
  display: flex; justify-content: space-between; gap: 14px; padding: 11px 18px;
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82);
}
.cov .dd a:hover { color: #fff; background: rgba(255,255,255,.06); }
.cov #expbtn .slash { transition: width .2s cubic-bezier(.22,.7,.3,1); }
.cov #expwrap:hover #expbtn .slash { width: 13px; }

.cov .specrow {
  display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
}
.cov .footcol { display: flex; flex-direction: column; gap: 14px; }
.cov .footcol a { font-family: var(--font-display); font-weight: 500; font-size: 13px; color: rgba(255,255,255,.78); }
.cov .footcol a:hover { color: #fff; }
.cov .footlabel {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: .08em; color: var(--gray-400); text-transform: uppercase;
}

.cov .burger { display: none; }
.cov .drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(392px, 90vw);
  background: var(--charcoal); border-left: 1px solid var(--gray-700); z-index: 91;
  display: none; flex-direction: column; box-shadow: -14px 0 36px rgba(0,0,0,.5);
}
.cov .drawer.on { display: flex; animation: covDrawerIn .22s ease-out; }
.cov .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.62); z-index: 90; display: none; }
.cov .scrim.on { display: block; animation: covFade .2s ease-out; }
.cov .drawer a.item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 19px 24px; border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff;
}
.cov .drawer a.item:hover { background: rgba(255,255,255,.05); color: #fff; }
.cov [style*="font-variant-numeric"] { font-variant-numeric: tabular-nums; }

/* Service footprint. The resting fill has to read as SERVED: a fill darker than
   the band behind it reads as a hole punched in the page, so the field is a deep
   oxblood and hover lifts to full brand red. */
.cov #map .tile { cursor: default; }
.cov #map .tile rect.st { fill: #4A211E; stroke: rgba(255,255,255,.26); stroke-width: .8px; transition: fill .14s ease-out; }
.cov #map .tile.hq rect.st { fill: #8C1712; }
.cov #map .tile:hover rect.st { fill: var(--avit-red); }
.cov #map .tile rect.hqbar { fill: var(--avit-red); }
/* Dispatch marks sit on the field, so they run brighter than it, never brand red. */
.cov #map .tile rect.dot { fill: #FF6B63; }
.cov #map .tile text {
  fill: #fff; font-family: var(--mono); font-size: 19px; font-weight: 500;
  letter-spacing: .06em; pointer-events: none;
}

@keyframes covFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes covDropIn { from { opacity: 0; transform: translateY(-7px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes covItemIn { from { opacity: 0; transform: translateX(-6px) } to { opacity: 1; transform: none } }
@keyframes covDrawerIn { from { transform: translateX(100%) } to { transform: none } }
@keyframes covRowIn { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

/* The !important flags are load-bearing: the coverage markup carries its grid
   columns as inline style attributes, which a plain media rule cannot beat. */
@media (max-width: 1120px) {
  .cov .hide-md { display: none !important; }
  .cov .deskonly { display: none !important; }
  .cov .burger { display: flex !important; }
}
@media (max-width: 920px) {
  .cov .split { grid-template-columns: 1fr !important; gap: 44px !important; }
  .cov .footgrid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 700px) {
  .cov .footgrid { grid-template-columns: 1fr !important; }
  .cov .metros { columns: 2 !important; }
}
@media (max-width: 430px) {
  .cov .metros { columns: 1 !important; }
  /* Coverage's nav is inline-styled and predates .nav__in, so it needs its own
     narrow-phone squeeze. Without it the row overflows by a few px at 360. */
  .cov nav img { height: 34px !important; }
  .cov nav .wrap > div { gap: 12px !important; }
  .cov nav .wrap { padding-left: 16px !important; padding-right: 16px !important; }
}


/* ---- hero: single measured copy column ----
   The hero carries copy and the two calls to action only. Nothing decorative
   sits beside it, so the column is capped at a readable measure instead of
   being stretched by a neighbour. */
.hero__col { max-width: 760px; }

/* ---- numbered process steps: replaces the four-card phase grid ----
   Numerals carry the sequence, per the brand's numeral-led process layouts. */
.steps { margin-top: 4px; }
.step {
  display: grid; grid-template-columns: 76px 1fr; gap: 28px; align-items: baseline;
  padding: 28px 0; border-top: 1px solid rgba(255,255,255,.1);
}
.step:last-of-type { border-bottom: 1px solid rgba(255,255,255,.1); }
.step__n { font-weight: 700; font-size: 32px; line-height: 1; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.step h3 { font-size: 19px; line-height: 1.3; }
.step p { font-size: 15px; line-height: 1.65; color: var(--gray-300); margin: 9px 0 0; max-width: 64ch; }
.on-light .step { border-top-color: var(--gray-100); }
.on-light .step:last-of-type { border-bottom-color: var(--gray-100); }
.on-light .step p { color: var(--gray-700); }

/* ---- specification rows: operational evidence in place of testimonial ---- */
.specs { margin: 0; border-top: 2px solid var(--charcoal); }
.spec-row {
  display: grid; grid-template-columns: 260px 1fr; gap: 18px 40px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--gray-100);
}
.spec-row dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--gray-500); text-transform: uppercase; }
.spec-row dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--gray-700); }
.specs--dark { border-top-color: rgba(255,255,255,.22); }
.specs--dark .spec-row { border-bottom-color: rgba(255,255,255,.1); }
.specs--dark dd { color: var(--gray-300); }
.specs--dark dt { color: var(--gray-400); }

/* ---- the one customer quotation, set as the page's proof moment ---- */
.quote { max-width: 960px; margin: 0; }
.quote blockquote {
  font-weight: 700; font-size: clamp(23px, 3.5vw, 40px); line-height: 1.22;
  letter-spacing: -0.02em; margin: 0; text-wrap: pretty;
}
.quote figcaption { margin-top: 28px; font-size: 14px; line-height: 1.75; color: var(--gray-500); }
.quote figcaption strong { color: var(--black); font-weight: 600; }

@media (max-width: 700px) {
  .step { grid-template-columns: 52px 1fr; gap: 18px; padding: 22px 0; }
  .step__n { font-size: 24px; }
  .spec-row { grid-template-columns: 1fr; gap: 7px; }
}