/*
  Atlantic Tower Services, Inc. — visual world

  THESIS:   A tall structure is painted in alternating bands of aviation orange
            and white and lit with red obstruction lights because federal rules
            say it must be. That scheme is the most recognisable thing about the
            objects this company builds, it is specified rather than chosen, and
            no competitor uses it. It refuses the category's two arrangements:
            the drone photo of a climber against a sunset over a blue gradient
            with three icon cards and "Safety. Quality. Integrity.", and the dark
            minimal industrial page with thin white sans and a video loop.
  OWN-WORLD:Aviation orange and marking white own whole bands of the page;
            galvanized steel grey carries the structure; obstruction red marks a
            state and nothing else. Zero radius anywhere. One typeface at three
            widths, which is how a real signage system works. Components are
            named from the site: .banding .elevation .station .agl .beacon
            .placard .plc .rig .readout .nap
  STORY:    A construction manager with a site list sees a contractor whose
            scopes are pinned at the heights they happen at, reads that the
            steel, the shelter HVAC and the generator are one responsibility,
            finds a published day-rate structure and the document each scope
            produces, and telephones.
  FIRST VIEWPORT: The elevation. An AGL scale down the left, the beacon lit at
            the top, the h1 and the telephone placard to its right, and the first
            station already visible. The telephone is the primary action in the
            bar above, in the hero, and in every closing band.
  FORM:     FAA obstruction marking and lighting, candidate 4 of seven grounded
            directions (seed 258fabd1, direction scope, persuade). Staging is the
            elevation itself: scroll position is height above ground.
  MOTION:   One authored moment — the L-864 beacon at the top of the elevation
            pulses once every four seconds, bounded, two-frame, never looping
            faster. Everything else is a single 200ms fade-and-rise on first
            scroll into view. Content is visible by default; prefers-reduced-
            motion removes all of it and leaves the beacon lit.
  ORDER:    Mobile-first. The base rules are the phone composition and every
            media query is min-width.
*/

/* ==================================================================
   1. Font — one face, three widths, self-hosted, no external requests
   ================================================================== */
@font-face {
  font-family: "Saira";
  src: url("/fonts/saira-latin-wdth-normal.woff2") format("woff2-variations"),
       url("/fonts/saira-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: normal;
  font-display: swap;
}

/* ==================================================================
   2. Tokens
   ================================================================== */
:root {
  /* galvanized structure steel — cool, slightly blue */
  --steel-950: #0e1216;
  --steel-900: #161b21;
  --steel-800: #1f262e;
  --steel-700: #2c353f;
  --steel-600: #3e4a57;
  --steel-500: #5c6b7a;
  /* muted text on steel grounds only: 5.56:1 on --steel-900 */
  --steel-400: #8494a3;

  /* marking white */
  --white-050: #f7f8f9;
  --white-100: #eceef1;
  --white-200: #dadee3;
  --white-300: #bcc4cd;
  /* muted text on light grounds only: 5.87:1 on --white-050, 5.37:1 on --white-100 */
  --white-500: #55626f;

  /* aviation orange — a surface, never an accent */
  --orange-700: #a83700;  /* 6.15:1 on --white-050 — the only orange text on light */
  --orange-600: #c64400;
  --orange-500: #e35205;  /* the marking band. Text on it is --steel-950 at 4.90:1 */
  --orange-400: #ff6b1f;  /* 6.08:1 on --steel-900 — the only orange text on steel */
  --orange-100: #ffe4d4;

  /* obstruction red — a state, never a brand colour */
  --beacon-600: #b3141e;  /* 6.51:1 on --white-050 */
  --beacon-500: #d81e28;
  --beacon-300: #f08a8f;  /* 7.20:1 on --steel-900 */

  --sans: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--2: 0.6875rem;
  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: 1.4375rem;
  --step-3: clamp(1.65rem, 1.3rem + 1.5vw, 2.3rem);
  --step-4: clamp(2rem, 1.45rem + 2.5vw, 3.1rem);
  --step-5: clamp(2.4rem, 1.4rem + 4.6vw, 4.4rem);

  --measure: 70ch;
  --wrap: 78rem;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;

  /* Nothing on this site is rounded. A structure is bolted plate and angle. */
  --radius: 0;
  --rule: 1px solid var(--white-200);
  --rule-firm: 1px solid var(--white-300);

  /* the marking scheme itself, as a drawable texture */
  --band: repeating-linear-gradient(
            90deg,
            var(--orange-500) 0 28px,
            var(--white-050) 28px 56px);
}

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

/* ==================================================================
   3. Base
   ================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--white-050);
  color: var(--steel-800);
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Hierarchy comes from width, weight, case and scale — never from a second
   family. Need a different voice? Change font-stretch. */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
  color: var(--steel-950);
}
h1 { font-size: var(--step-5); font-stretch: 78%; line-height: 0.98; letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); font-stretch: 82%; }
h3 { font-size: var(--step-2); font-stretch: 88%; font-weight: 650; line-height: 1.15; }
h4 { font-size: var(--step-1); font-stretch: 92%; font-weight: 650; }

p, ul, ol, dl, table, figure { margin: 0; }

a { color: var(--steel-900); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--orange-700); }

/* One focus treatment site-wide. The beacon colour is the single sanctioned
   non-state use of obstruction red: a focus ring must be one fixed colour. */
:focus-visible {
  outline: 2px solid var(--beacon-500);
  outline-offset: 2px;
}
.sec-steel :focus-visible,
.foot :focus-visible,
.idbar :focus-visible,
.cta :focus-visible { outline-color: var(--beacon-300); }
.sec-orange :focus-visible { outline-color: var(--steel-950); }

strong, b { font-weight: 650; }

code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--orange-500);
  color: var(--steel-950);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--step--1);
  font-weight: 650;
  font-stretch: 62%;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.skip:focus { left: var(--sp-4); top: var(--sp-4); }

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

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

/* Grid and flex items default to min-width:auto, which lets a wide table or a
   long unbroken string push a whole column past the viewport. Everything that
   can hold one opts out. */
.split > *, .hero-in > *, .cta-in > *, .foot-in > *, .head-in > *,
.placard > *, .station-body > * { min-width: 0; }
.placard, .nap, .rig-scroll { min-width: 0; max-width: 100%; }

/* ==================================================================
   4. The banding — the recurring texture
   ------------------------------------------------------------------
   The specified marking scheme: alternating bands of aviation orange and
   marking white, equal width, always starting and ending on orange, exactly as
   a real marked structure is painted. It separates major sections and is the
   only ornament in the system.
   ================================================================== */
.banding {
  height: 14px;
  width: 100%;
  background-image: var(--band);
  background-repeat: repeat-x;
  border-block: 1px solid var(--steel-700);
}
.banding-tight { height: 8px; }
/* on a steel ground the white band reads as the lighter marking colour */
.banding-dark { border-color: var(--steel-600); }

/* ==================================================================
   5. Placard labels — the stencilled reference strip
   ================================================================== */
.plabel {
  font-size: var(--step--2);
  font-weight: 600;
  font-stretch: 62%;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-500);
  margin: 0 0 var(--sp-4);
}
.plabel-d { color: var(--white-300); }
.sec-steel .plabel, .cta .plabel, .foot .plabel { color: var(--steel-400); }
.sec-steel .plabel-d, .cta .plabel-d, .foot .plabel-d { color: var(--steel-600); }
.sec-orange .plabel { color: var(--steel-800); }
.sec-orange .plabel-d { color: var(--orange-700); }

/* ==================================================================
   6. Placards — every button on this site is a stencilled plate
   ------------------------------------------------------------------
   A hard rectangle, condensed uppercase, with a 2px rule along the top edge in
   the marking colour, the way a painted band meets a bolted plate.
   ================================================================== */
.plc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--orange-500);
  border-top-width: 3px;
  border-radius: 0;
  background: var(--orange-500);
  color: var(--steel-950);
  font-size: var(--step--1);
  font-weight: 700;
  font-stretch: 66%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}
.plc-lbl { display: block; }
.plc-pri:hover { background: var(--orange-400); border-color: var(--orange-400); color: var(--steel-950); }

.plc-gho {
  background: transparent;
  color: var(--steel-900);
  border-color: var(--steel-700);
  border-top-color: var(--steel-900);
}
.plc-gho:hover { background: var(--steel-900); border-color: var(--steel-900); color: var(--white-050); }

.plc-blk { display: flex; width: 100%; }

/* on a steel ground the ghost inverts */
.sec-steel .plc-gho, .cta .plc-gho, .foot .plc-gho {
  color: var(--white-100);
  border-color: var(--steel-600);
  border-top-color: var(--white-300);
}
.sec-steel .plc-gho:hover, .cta .plc-gho:hover, .foot .plc-gho:hover {
  background: var(--white-050);
  border-color: var(--white-050);
  color: var(--steel-950);
}
/* on an orange ground the primary has to stop being orange */
.sec-orange .plc-pri {
  background: var(--steel-950);
  border-color: var(--steel-950);
  border-top-color: var(--steel-950);
  color: var(--white-050);
}
.sec-orange .plc-pri:hover { background: var(--steel-800); border-color: var(--steel-800); }
.sec-orange .plc-gho { color: var(--steel-950); border-color: var(--steel-950); }
.sec-orange .plc-gho:hover { background: var(--steel-950); color: var(--orange-500); }

/* ==================================================================
   7. Readouts, AGL chips and spans
   ================================================================== */
.readout {
  font-weight: 700;
  font-stretch: 70%;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--steel-950);
  white-space: nowrap;
}
.readout-u {
  font-size: var(--step--2);
  font-weight: 600;
  font-stretch: 62%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-500);
  white-space: nowrap;
}
.sec-steel .readout, .cta .readout { color: var(--white-050); }
.sec-steel .readout-u, .cta .readout-u { color: var(--steel-400); }

/* the height chip — an equipment plate bolted at a level */
.agl {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: 1px solid var(--steel-700);
  line-height: 1;
}
.agl-k {
  display: flex; align-items: center;
  padding: 5px var(--sp-2);
  background: var(--steel-900);
  color: var(--white-100);
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 62%;
  letter-spacing: 0.12em;
}
.agl-v {
  display: flex; align-items: center;
  padding: 5px var(--sp-3);
  background: var(--orange-500);
  color: var(--steel-950);
  font-size: var(--step--1);
  font-weight: 700;
  font-stretch: 70%;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.sec-steel .agl { border-color: var(--steel-600); }

.span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-width: 0;
}
.span-line { flex: 1 1 auto; height: 1px; min-width: var(--sp-3); background: var(--white-300); }
.span-v {
  flex: 0 0 auto;
  font-size: var(--step--2);
  font-weight: 650;
  font-stretch: 62%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-800);
  font-variant-numeric: tabular-nums;
}
.sec-steel .span-line, .cta .span-line { background: var(--steel-600); }
.sec-steel .span-v, .cta .span-v { color: var(--white-200); }

/* ==================================================================
   8. Placard panel — the bolted plate
   ================================================================== */
.placard {
  background: var(--white-050);
  border: 1px solid var(--white-300);
  /* the marking band meeting the plate, along the top edge. Never a side bar. */
  border-top: 2px solid var(--orange-500);
  border-radius: 0;
  padding: var(--sp-5);
}
.placard > * + * { margin-top: var(--sp-4); }
.placard-note {
  font-size: var(--step--1);
  color: var(--white-500);
  line-height: 1.6;
}
.sec-steel .placard {
  background: var(--steel-800);
  border-color: var(--steel-600);
  border-top-color: var(--orange-500);
  color: var(--white-100);
}
.sec-steel .placard-note { color: var(--steel-400); }
.sec-steel .placard h2, .sec-steel .placard h3 { color: var(--white-050); }
.sec-stone .placard { background: var(--white-050); }

/* ==================================================================
   9. Identification bar
   ================================================================== */
.idbar {
  background: var(--steel-950);
  color: var(--white-200);
  border-bottom: 3px solid var(--orange-500);
}
.idbar-in {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
}
.idbar-name {
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 62%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-050);
}
.idbar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--steel-400);
}
.idbar-meta span { position: relative; }
.idbar-meta span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(var(--sp-2) * -1 - 1px);
  top: 0.45em;
  bottom: 0.3em;
  width: 1px;
  background: var(--steel-600);
}

/* ==================================================================
   10. Header
   ================================================================== */
.head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white-050);
  border-bottom: 1px solid var(--white-300);
  transition: box-shadow 160ms ease;
}
.head.is-stuck {
  box-shadow: 0 1px 0 var(--white-300), 0 10px 22px -20px rgba(14, 18, 22, 0.5);
}
.head-in {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; }
.brand-mark { flex: 0 0 auto; width: 40px; height: 40px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.04; min-width: 0; }
.brand-a {
  font-size: var(--step-1);
  font-weight: 700;
  font-stretch: 76%;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--steel-950);
}
.brand-b {
  font-size: var(--step--2);
  font-weight: 600;
  font-stretch: 62%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-500);
}

.head-act { display: flex; align-items: center; gap: var(--sp-3); }

.head-tel { display: none; flex-direction: column; line-height: 1.12; text-decoration: none; text-align: right; }
.head-tel-k {
  font-size: var(--step--2);
  font-weight: 600;
  font-stretch: 62%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-500);
}
.head-tel-n {
  font-size: var(--step-0);
  font-weight: 700;
  font-stretch: 72%;
  letter-spacing: 0.01em;
  color: var(--steel-950);
  font-variant-numeric: tabular-nums;
}
.head-tel:hover .head-tel-n { color: var(--orange-700); }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 1px solid var(--white-300);
  border-radius: 0;
  color: var(--steel-900);
  font-size: var(--step--2);
  font-weight: 650;
  font-stretch: 62%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-bars { display: flex; flex-direction: column; gap: 3px; width: 15px; }
.menu-bars i { display: block; height: 2px; background: currentColor; }

.nav { grid-column: 1 / -1; display: none; }
.nav.is-open { display: block; }
.nav-list { list-style: none; margin: 0; padding: 0 0 var(--sp-3); }
.nav-item { border-top: 1px solid var(--white-200); }
.nav-lnk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  font-size: var(--step--1);
  font-weight: 650;
  font-stretch: 66%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--steel-900);
}
.nav-lnk.is-on { color: var(--orange-700); }
.nav-caret {
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.65;
}
.nav-sub { list-style: none; margin: 0 0 var(--sp-3); padding: 0 0 0 var(--sp-4); }
.nav-sub-lnk {
  display: block;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
  text-decoration: none;
  border-left: 2px solid var(--white-200);
}
.nav-sub-lnk:hover { border-left-color: var(--orange-500); }
.nav-sub-n {
  display: block;
  font-size: var(--step-0);
  font-weight: 650;
  font-stretch: 90%;
  color: var(--steel-900);
  line-height: 1.3;
}
.nav-sub-s {
  display: block;
  font-size: var(--step--2);
  font-weight: 600;
  font-stretch: 62%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-500);
  line-height: 1.5;
  margin-top: 3px;
}

/* ==================================================================
   11. Hero
   ================================================================== */
.hero { background: var(--white-050); padding-block: var(--sp-7) var(--sp-8); }
.hero-in { display: grid; gap: var(--sp-7); }
.hero-h1 { margin-bottom: var(--sp-5); }
.hero-h1 em { font-style: normal; color: var(--orange-700); }
.hero-lead {
  font-size: var(--step-1);
  line-height: 1.58;
  max-width: 56ch;
  color: var(--steel-800);
}
.hero-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.hero-fine {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--white-300);
  font-size: var(--step--2);
  font-weight: 600;
  font-stretch: 66%;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-500);
}

/* the drawing plate beside the hero */
.plate {
  background: var(--steel-900);
  border: 1px solid var(--steel-700);
  border-top: 2px solid var(--orange-500);
  padding: var(--sp-5) var(--sp-4);
  color: var(--white-200);
}
.plate .plabel { color: var(--steel-400); }
.plate .plabel-d { color: var(--steel-600); }
.plate-cap {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--steel-700);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--steel-400);
}
.plate-cap a { color: var(--white-100); }
.dwg { width: 100%; height: auto; }
/* An elevation is tall by nature, and at full column width it runs far past the
   copy beside it and leaves a void. Cap it and centre it: the drawing keeps its
   proportion and the two hero columns end together. */
.plate .dwg { max-height: 60vh; margin-inline: auto; }
@media (min-width: 64em) { .plate .dwg { max-height: 30rem; } }
@media (min-width: 86em) { .plate .dwg { max-height: 34rem; } }

/* ==================================================================
   12. Sections — full-bleed bands, never inset cards
   ================================================================== */
.sec { padding-block: var(--sp-8); }
.sec-stone { background: var(--white-100); border-block: 1px solid var(--white-200); }
.sec-steel {
  background: var(--steel-900);
  color: var(--white-100);
}
.sec-steel h1, .sec-steel h2, .sec-steel h3, .sec-steel h4 { color: var(--white-050); }
.sec-steel a { color: var(--white-050); }
.sec-steel a:hover { color: var(--orange-400); }

.sec-orange {
  background: var(--orange-500);
  color: var(--steel-950);
}
.sec-orange h1, .sec-orange h2, .sec-orange h3 { color: var(--steel-950); }
.sec-orange a { color: var(--steel-950); }
.sec-orange a:hover { color: var(--white-050); }

.sec-hd { margin-bottom: var(--sp-6); max-width: var(--measure); }
.sec-hd h2 { margin-bottom: var(--sp-4); }
.sec-hd > p:not(.plabel) { font-size: var(--step-1); line-height: 1.6; color: var(--steel-700); }
.sec-steel .sec-hd > p:not(.plabel) { color: var(--white-200); }
.sec-orange .sec-hd > p:not(.plabel) { color: var(--steel-900); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose > h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-4); }
.prose > h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose > ul, .prose > ol { padding-left: var(--sp-5); }
.prose li + li { margin-top: var(--sp-2); }
.prose .lead { font-size: var(--step-1); line-height: 1.58; color: var(--steel-700); }
.sec-steel .prose, .sec-steel .prose .lead { color: var(--white-100); }
.sec-orange .prose, .sec-orange .prose .lead { color: var(--steel-900); }

.split { display: grid; gap: var(--sp-7); }

/* ==================================================================
   13. The elevation — the signature component
   ------------------------------------------------------------------
   Scroll position is height above ground. A continuous AGL scale runs down the
   left and stations are pinned along it at their working height, top to bottom:
   the beacon, the mounts, the structure, the compound. Below 48em the rail
   collapses, because a 4px vertical scale on a phone is decoration.
   ================================================================== */
.elevation { list-style: none; margin: 0; padding: 0; }
.station {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--steel-700);
  transition: background-color 180ms ease;
}
.station:last-child { border-bottom: 0; }
.station.is-now { background: var(--steel-800); }
.station-rail { display: none; }
.station-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.station-n { font-size: var(--step-2); }
.station-n a { text-decoration-color: var(--steel-600); }
.station-n a:hover { color: var(--orange-400); text-decoration-color: currentColor; }
.station-lead { max-width: 62ch; line-height: 1.62; color: var(--white-200); }
.station-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--steel-700);
  font-size: var(--step--1);
  line-height: 1.5;
}
.station-meta dt {
  font-size: var(--step--2);
  font-weight: 650;
  font-stretch: 62%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-400);
  padding-top: 0.2em;
}
.station-meta dd { margin: 0; color: var(--white-100); }

/* the beacon at the top of the elevation */
.beacon-hd {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--steel-700);
}
.beacon {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;           /* the one circle in the system: it is a lamp */
  background: var(--beacon-500);
  box-shadow: 0 0 0 4px rgba(216, 30, 40, 0.22);
}
.beacon-k {
  font-size: var(--step--2);
  font-weight: 650;
  font-stretch: 62%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--beacon-300);
}
.beacon-v { font-size: var(--step--1); color: var(--steel-400); line-height: 1.5; }

/* ==================================================================
   14. Rig — the dense rate and schedule table
   ================================================================== */
.rig-scroll {
  overflow-x: auto;
  border: 1px solid var(--white-300);
  background: var(--white-050);
  -webkit-overflow-scrolling: touch;
}
.rig-scroll:focus-visible { outline-offset: -2px; }
.rig { width: 100%; border-collapse: collapse; font-size: var(--step--1); line-height: 1.5; }
.rig caption {
  caption-side: top;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--step--2);
  font-weight: 650;
  font-stretch: 62%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-950);
  background: var(--orange-500);
}
.rig th, .rig td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--white-200);
}
.rig thead th {
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 62%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-050);
  background: var(--steel-900);
  white-space: nowrap;
}
.rig tbody th { font-weight: 650; font-stretch: 92%; font-size: var(--step-0); color: var(--steel-950); }
.rig tbody tr:last-child th, .rig tbody tr:last-child td { border-bottom: 0; }
.rig tbody tr:hover { background: var(--white-100); }
.rig .num {
  font-weight: 700;
  font-stretch: 70%;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--steel-950);
}
.rig .rig-sub {
  display: block;
  margin-top: 3px;
  font-size: var(--step--1);
  font-weight: 400;
  font-stretch: 100%;
  color: var(--white-500);
  line-height: 1.5;
  white-space: normal;
}
.rig-note { margin-top: var(--sp-3); font-size: var(--step--1); line-height: 1.6; color: var(--white-500); }
.sec-steel .rig-note { color: var(--steel-400); }
.sec-steel .rig-scroll { border-color: var(--steel-600); }

/* ==================================================================
   15. Rate cards
   ================================================================== */
.rates { display: grid; gap: var(--sp-4); }
.rate {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--white-050);
  border: 1px solid var(--white-300);
  border-top: 2px solid var(--steel-900);
}
.rate-a { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.rate-n { font-size: var(--step-2); }
.rate-code {
  font-size: var(--step--2);
  font-weight: 650;
  font-stretch: 62%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-050);
  background: var(--steel-900);
  padding: 3px var(--sp-2);
}
.rate-fig {
  font-size: var(--step-2);
  font-weight: 700;
  font-stretch: 70%;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--steel-950);
}
.rate-b > p { line-height: 1.62; }
.rate-suits {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--white-200);
  font-size: var(--step--1);
  color: var(--white-500);
  line-height: 1.6;
}
.rate-suits::before {
  content: "Suits";
  flex: 0 0 auto;
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 62%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-700);
  padding-top: 0.2em;
}

/* ==================================================================
   16. Scope rows
   ================================================================== */
.scopes { border-top: 2px solid var(--steel-900); }
.scope-hd {
  display: none;
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 62%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-500);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--white-300);
}
.scope {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--white-200);
}
.scope-a { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.scope-ref {
  font-size: var(--step--1);
  font-weight: 700;
  font-stretch: 66%;
  color: var(--white-050);
  background: var(--steel-900);
  padding: 2px var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.scope-n { font-size: var(--step-2); }
.scope-n a:hover { color: var(--orange-700); }
.scope-b { max-width: 58ch; line-height: 1.62; }
.scope-c { min-width: 0; }

/* ==================================================================
   17. Sequence — the numbered project stages
   ================================================================== */
.sequence { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--steel-900); }
.seq-m {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--white-200);
  transition: background-color 180ms ease;
}
.seq-m.is-now { background: var(--white-100); }
.sec-steel .sequence { border-top-color: var(--orange-500); }
.sec-steel .seq-m { border-bottom-color: var(--steel-700); }
.sec-steel .seq-m.is-now { background: var(--steel-800); }
.seq-a { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.seq-ref {
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 62%;
  letter-spacing: 0.1em;
  color: var(--steel-950);
  background: var(--orange-500);
  padding: 3px var(--sp-2);
}
.seq-hold {
  font-size: var(--step--2);
  font-weight: 650;
  font-stretch: 62%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--beacon-600);
  border: 1px solid var(--beacon-600);
  padding: 2px var(--sp-2);
}
.sec-steel .seq-hold { color: var(--beacon-300); border-color: var(--beacon-300); }
.seq-n { font-size: var(--step-2); }
.seq-b { max-width: 62ch; line-height: 1.62; }
.seq-more { margin-top: var(--sp-5); }
.seq-more a {
  font-size: var(--step--1);
  font-weight: 650;
  font-stretch: 66%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==================================================================
   18. Identification block
   ================================================================== */
.nap { background: var(--white-050); border: 1px solid var(--white-300); border-top: 2px solid var(--steel-900); padding: var(--sp-5); }
.nap-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--white-300);
  font-size: var(--step--2);
  font-weight: 650;
  font-stretch: 62%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nap-hd-k { color: var(--steel-900); }
.nap-hd-v { color: var(--white-500); }
.nap-hd-v abbr { text-decoration: none; border-bottom: 1px dotted var(--white-500); }
.nap-name {
  font-size: var(--step-1);
  font-weight: 700;
  font-stretch: 80%;
  line-height: 1.22;
  color: var(--steel-950);
  margin-bottom: var(--sp-2);
}
.nap-addr { font-style: normal; line-height: 1.5; margin-bottom: var(--sp-4); }
.nap-st, .nap-city { display: block; }
.nap-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--step--1);
  line-height: 1.5;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--white-200);
}
.nap-rows dt {
  font-size: var(--step--2);
  font-weight: 650;
  font-stretch: 62%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-500);
  padding-top: 0.2em;
}
.nap-rows dd { margin: 0; color: var(--steel-800); }
.nap-tz { color: var(--white-500); }
.nap-rows .tel { font-weight: 700; font-stretch: 72%; font-variant-numeric: tabular-nums; }
/* the email address sits in the same record as the number, so it takes the
   same condensed treatment */
.nap-rows .mail { font-weight: 600; font-stretch: 78%; word-break: break-all; }
.mail { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

.foot .nap, .sec-steel .nap, .cta .nap { background: var(--steel-800); border-color: var(--steel-600); border-top-color: var(--orange-500); }
.foot .nap-hd, .sec-steel .nap-hd, .cta .nap-hd { border-bottom-color: var(--steel-600); }
.foot .nap-hd-k, .sec-steel .nap-hd-k, .cta .nap-hd-k { color: var(--white-100); }
.foot .nap-hd-v, .sec-steel .nap-hd-v, .cta .nap-hd-v { color: var(--steel-400); }
.foot .nap-name, .sec-steel .nap-name, .cta .nap-name { color: var(--white-050); }
.foot .nap-addr, .sec-steel .nap-addr, .cta .nap-addr { color: var(--white-200); }
.foot .nap-rows, .sec-steel .nap-rows, .cta .nap-rows { border-top-color: var(--steel-600); }
.foot .nap-rows dt, .sec-steel .nap-rows dt, .cta .nap-rows dt { color: var(--steel-400); }
.foot .nap-rows dd, .sec-steel .nap-rows dd, .cta .nap-rows dd { color: var(--white-100); }
.foot .nap-rows dd a, .sec-steel .nap-rows dd a { color: var(--white-050); }
.foot .nap-tz, .sec-steel .nap-tz { color: var(--steel-400); }

/* ==================================================================
   19. Page masthead + breadcrumbs
   ================================================================== */
.phead { background: var(--white-050); padding-top: var(--sp-6); }
.phead-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
}
.crumbs { font-size: var(--step--2); font-weight: 600; font-stretch: 66%; letter-spacing: 0.1em; text-transform: uppercase; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before { content: "/"; color: var(--white-300); }
.crumbs a { color: var(--white-500); text-decoration: none; }
.crumbs a:hover { color: var(--steel-900); text-decoration: underline; }
.crumbs [aria-current] { color: var(--steel-900); font-weight: 700; }
.phead-ref {
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 62%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-500);
}
.phead-body { padding-bottom: var(--sp-7); max-width: 64ch; }
.phead-h1 { margin-bottom: var(--sp-4); }
.phead-lead { font-size: var(--step-1); line-height: 1.58; color: var(--steel-700); }

/* ==================================================================
   20. FAQ — native details/summary, works with JS off
   ================================================================== */
.faq { border-top: 2px solid var(--steel-900); }
.faq-i { border-bottom: 1px solid var(--white-200); }
.faq-i summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--step-1);
  font-weight: 650;
  font-stretch: 88%;
  line-height: 1.32;
  color: var(--steel-950);
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary:hover { color: var(--orange-700); }
.faq-sign { flex: 0 0 auto; position: relative; width: 14px; height: 14px; margin-top: 0.36em; }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; background: var(--orange-600); }
.faq-sign::before { left: 0; right: 0; top: 6px; height: 2px; }
.faq-sign::after { top: 0; bottom: 0; left: 6px; width: 2px; transition: opacity 140ms ease; }
.faq-i[open] .faq-sign::after { opacity: 0; }
.faq-a { padding-bottom: var(--sp-5); max-width: var(--measure); }
.faq-a > * + * { margin-top: var(--sp-3); }
.faq-a p { line-height: 1.65; }

/* ==================================================================
   21. Forms
   ================================================================== */
.form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }
.field label, .check label {
  font-size: var(--step--2);
  font-weight: 650;
  font-stretch: 62%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-900);
}
.field-req { font-weight: 600; letter-spacing: 0.1em; color: var(--beacon-600); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--sp-3);
  background: var(--white-050);
  border: 1px solid var(--white-300);
  border-radius: 0;
  color: var(--steel-950);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.5;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--steel-700); }
.field-hint { font-size: var(--step--1); line-height: 1.6; color: var(--white-500); }
.field-err { font-size: var(--step--2); font-weight: 650; font-stretch: 66%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--beacon-600); }
.field.is-err input, .field.is-err select, .field.is-err textarea { border-color: var(--beacon-600); }
.grid-2 { display: grid; gap: var(--sp-5); }
.check { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; }
.check input { width: 20px; height: 20px; margin-top: 0.2em; accent-color: var(--orange-600); }
.check label { text-transform: none; letter-spacing: 0.01em; font-size: var(--step--1); line-height: 1.6; font-weight: 400; font-stretch: 100%; }
/* off screen, never display:none, so a bot still finds it */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--step--1); line-height: 1.62; color: var(--white-500); }
.form-err {
  padding: var(--sp-4);
  border: 1px solid var(--beacon-600);
  border-top: 2px solid var(--beacon-600);
  background: var(--orange-100);
  color: var(--beacon-600);
  font-size: var(--step--1);
  line-height: 1.6;
}
.form-err ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }

/* ==================================================================
   22. Closing action band
   ================================================================== */
.cta { background: var(--steel-950); color: var(--white-100); }
.cta-in { padding-block: var(--sp-8); display: grid; gap: var(--sp-6); }
.cta-h { color: var(--white-050); margin-bottom: var(--sp-4); }
.cta-copy > p { line-height: 1.65; max-width: 58ch; color: var(--white-200); }
.cta-id {
  margin-top: var(--sp-4);
  font-size: var(--step--2);
  font-weight: 600;
  font-stretch: 66%;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-400);
}
.cta-act { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.cta-hrs {
  margin-top: var(--sp-4);
  font-size: var(--step--2);
  font-weight: 600;
  font-stretch: 62%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-400);
}

/* ==================================================================
   23. Footer
   ================================================================== */
.foot { background: var(--steel-950); color: var(--white-200); }
.foot-in { padding-block: var(--sp-8) var(--sp-6); display: grid; gap: var(--sp-7); }
.foot .brand-a { color: var(--white-050); }
.foot .brand-b { color: var(--steel-400); }
.foot-id { display: grid; gap: var(--sp-5); }
.foot-cta { margin: 0; }
.foot-nav { display: grid; gap: var(--sp-6); }
.foot-h {
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 62%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-400);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--steel-700);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li + li { margin-top: var(--sp-2); }
.foot-col a { color: var(--white-200); text-decoration: none; font-size: var(--step--1); line-height: 1.5; }
.foot-col a:hover { color: var(--orange-400); text-decoration: underline; }
.foot-btm { display: grid; gap: var(--sp-2); padding-top: var(--sp-5); border-top: 1px solid var(--steel-700); }
.foot-legal, .foot-note {
  font-size: var(--step--2);
  font-weight: 600;
  font-stretch: 66%;
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-400);
}
.foot-legal a, .foot-note a { color: var(--white-200); }

/* ==================================================================
   24. Content components inside placards and prose
   ================================================================== */
.doclist { display: grid; gap: var(--sp-4); }
.doclist dt { font-size: var(--step-1); font-weight: 700; font-stretch: 84%; color: var(--steel-950); line-height: 1.28; }
.sec-steel .doclist dt, .plate .doclist dt { color: var(--white-050); }
.doclist dd {
  margin: var(--sp-1) 0 0;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--white-300);
  font-size: var(--step--1);
  line-height: 1.62;
  color: var(--white-500);
}
.sec-steel .doclist dd, .plate .doclist dd { border-left-color: var(--steel-600); color: var(--steel-400); }

.nextlist { counter-reset: n; list-style: none; margin: 0; padding: 0; }
.nextlist li { counter-increment: n; display: grid; grid-template-columns: 2rem 1fr; gap: var(--sp-3); line-height: 1.6; }
.nextlist li + li { margin-top: var(--sp-3); }
.nextlist li::before {
  content: counter(n);
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 66%;
  color: var(--steel-950);
  background: var(--orange-500);
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
}

.policy-lead { font-size: var(--step-0); line-height: 1.62; color: var(--white-500); }
.policy-grid { display: grid; gap: var(--sp-3); }
.policy-btn {
  display: grid;
  gap: 3px;
  padding: var(--sp-4);
  border: 1px solid var(--white-300);
  border-top: 2px solid var(--steel-900);
  background: var(--white-050);
  text-decoration: none;
  transition: border-color 130ms ease, background-color 130ms ease;
}
.policy-btn:hover { border-top-color: var(--orange-500); background: var(--white-100); }
.policy-btn-n { font-size: var(--step-0); font-weight: 700; font-stretch: 84%; color: var(--steel-950); line-height: 1.28; }
.policy-btn-s { font-size: var(--step--1); line-height: 1.55; color: var(--white-500); }

.sheet-note { font-size: var(--step--1); line-height: 1.62; color: var(--white-500); padding-top: var(--sp-3); border-top: 1px solid var(--white-200); }
.sec-steel .sheet-note { color: var(--steel-400); border-top-color: var(--steel-700); }

.rate-basis {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--white-200);
  max-width: var(--measure);
  font-size: var(--step--1);
  line-height: 1.62;
  color: var(--white-500);
}
.sec-steel .rate-basis { color: var(--steel-400); border-top-color: var(--steel-700); }

.areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.areas li {
  font-size: var(--step--1);
  font-weight: 600;
  font-stretch: 78%;
  letter-spacing: 0.04em;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--white-200);
}
.sec-steel .areas li { border-bottom-color: var(--steel-700); }

/* a marked state — hold point, stop-work, emergency. Obstruction red only. */
.mark {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--orange-100);
  border: 1px solid var(--beacon-600);
  border-top: 2px solid var(--beacon-600);
}
.mark-k { font-size: var(--step--2); font-weight: 700; font-stretch: 62%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--beacon-600); }
.mark p { font-size: var(--step--1); line-height: 1.62; color: var(--steel-800); }
.sec-steel .mark { background: var(--steel-800); border-color: var(--beacon-300); border-top-color: var(--beacon-300); }
.sec-steel .mark-k { color: var(--beacon-300); }
.sec-steel .mark p { color: var(--white-100); }

.results { border-top: 2px solid var(--steel-900); }
.result { padding-block: var(--sp-5); border-bottom: 1px solid var(--white-200); }
.result-n { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.result-u { font-size: var(--step--2); font-weight: 600; font-stretch: 66%; letter-spacing: 0.08em; color: var(--white-500); margin-bottom: var(--sp-2); }
.result p { font-size: var(--step--1); line-height: 1.6; color: var(--white-500); }

/* ==================================================================
   25. Drawings — the elevation plate
   ================================================================== */
.dwg-fig { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; fill: var(--steel-400); }
.dwg-lbl { font-size: 13px; font-weight: 650; letter-spacing: 0.02em; fill: var(--white-050); }
.dwg-steel { stroke: var(--steel-400); fill: none; stroke-width: 1.4; }
.dwg-steel-h { stroke: var(--white-200); fill: none; stroke-width: 1.8; }
.dwg-orange { fill: var(--orange-500); }
.dwg-white { fill: var(--white-050); }
.dwg-rule { stroke: var(--steel-600); stroke-width: 1; }
.dwg-leader { stroke: var(--steel-500); stroke-width: 1; }
.dwg-lamp { fill: var(--beacon-500); }
.dwg-kn rect { fill: var(--steel-950); stroke: var(--white-200); stroke-width: 1.2; }
.dwg-kn text { font-size: 11px; font-weight: 700; fill: var(--white-050); }
.dwg-tb rect { fill: none; stroke: var(--white-200); stroke-width: 1.2; }
.dwg-tb line { stroke: var(--white-200); stroke-width: 1; }

.knlist { list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--steel-700); }
.knlist li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--sp-3); align-items: start; }
.knlist li + li { margin-top: var(--sp-3); }
.knlist-n {
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 66%;
  color: var(--steel-950);
  background: var(--orange-500);
  width: 1.3rem; height: 1.3rem;
  display: grid; place-items: center;
}
.knlist-t { font-size: var(--step--1); line-height: 1.6; color: var(--steel-400); }

/* ==================================================================
   26. Motion — one authored moment, then a single reveal
   ================================================================== */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity 200ms ease-out, transform 200ms ease-out; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* The authored moment: an L-864 obstruction beacon. A real one flashes 20 to 40
   times a minute; this is slowed to one dignified pulse every four seconds,
   because a page is not an aircraft hazard. */
.js .beacon { animation: beacon 4s steps(1, end) infinite; }
@keyframes beacon {
  0%, 12%   { background: var(--beacon-500); box-shadow: 0 0 0 5px rgba(216, 30, 40, 0.30); }
  13%, 100% { background: var(--beacon-600); box-shadow: 0 0 0 4px rgba(216, 30, 40, 0.16); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  /* the beacon stays lit rather than dark */
  .js .beacon { background: var(--beacon-500); box-shadow: 0 0 0 4px rgba(216, 30, 40, 0.22); }
}

/* ==================================================================
   27. Responsive — mobile-first, min-width only
   ================================================================== */
@media (min-width: 34em) {
  .wrap { padding-inline: var(--sp-5); }
  .idbar-in { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
  .scope { grid-template-columns: 1fr 12rem; align-items: start; gap: var(--sp-4) var(--sp-5); }
  .scope-a, .scope-b { grid-column: 1; }
  .scope-c { grid-column: 2; grid-row: 1 / span 2; }
  .seq-m { grid-template-columns: 1fr 12rem; align-items: center; gap: var(--sp-4) var(--sp-5); }
  .seq-a, .seq-b { grid-column: 1; }
  .seq-c { grid-column: 2; grid-row: 1 / span 2; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .policy-grid { grid-template-columns: 1fr 1fr; }
  .areas { grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
}

@media (min-width: 48em) {
  .sec { padding-block: var(--sp-9); }
  .hero { padding-block: var(--sp-8) var(--sp-9); }
  .placard, .nap { padding: var(--sp-6); }
  .rates { grid-template-columns: repeat(2, 1fr); }
  .foot-nav { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-6); }
  .foot-btm { grid-template-columns: 1fr auto; align-items: baseline; gap: var(--sp-4); }
  .cta-in { grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-7); }
  .cta-act { flex-direction: column; align-items: stretch; }

  /* the AGL rail appears once there is room for it to carry information */
  .station { grid-template-columns: 5.5rem 1fr; gap: var(--sp-5); }
  .station-rail {
    display: block;
    position: relative;
    justify-self: center;
    width: 2px;
    background: var(--steel-700);
    min-height: 100%;
  }
  .station-node {
    position: absolute;
    top: 0.55rem; left: 50%;
    width: 13px; height: 13px;
    transform: translateX(-50%);
    background: var(--steel-900);
    border: 2px solid var(--steel-400);
  }
  .station.is-now .station-node { background: var(--orange-500); border-color: var(--orange-500); }
}

@media (min-width: 64em) {
  .head-in { grid-template-columns: auto 1fr auto; gap: var(--sp-5); }
  .brand { grid-column: 1; grid-row: 1; }
  .nav { grid-column: 2; grid-row: 1; display: block; }
  .head-act { grid-column: 3; grid-row: 1; }
  .head-tel { display: flex; }
  .menu-btn { display: none; }

  .nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); padding: 0; }
  .nav-item { border-top: 0; position: relative; }
  .nav-lnk { padding: var(--sp-3); }
  .nav-lnk.is-on { color: var(--steel-950); box-shadow: inset 0 -2px 0 var(--orange-500); }
  .nav-lnk:hover { color: var(--orange-700); }

  .nav-sub {
    position: absolute;
    top: 100%; left: 0;
    z-index: 30;
    min-width: 22rem;
    margin: 0;
    padding: var(--sp-3);
    background: var(--white-050);
    border: 1px solid var(--white-300);
    border-top: 2px solid var(--orange-500);
    box-shadow: 0 18px 38px -28px rgba(14, 18, 22, 0.65);
    opacity: 0; visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
  }
  .nav-item-group:hover .nav-sub,
  .nav-item-group:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
  .nav-sub-lnk { padding-block: var(--sp-3); }

  .hero-in { grid-template-columns: 1.1fr 0.9fr; align-items: start; gap: var(--sp-8); }
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split-wide { grid-template-columns: 1.25fr 0.75fr; }
  .foot-in { grid-template-columns: 21rem 1fr; gap: var(--sp-8); }
  .foot-nav { grid-template-columns: repeat(4, 1fr); }
  .foot-btm { grid-column: 1 / -1; }
  .scope-hd { display: grid; grid-template-columns: 1fr 13rem; gap: var(--sp-5); }
  .scope { grid-template-columns: 1fr 13rem; }
  .seq-m { grid-template-columns: 1fr 13rem; }
  .rig { font-size: var(--step-0); }
  .phead-body { padding-bottom: var(--sp-8); }
  .station { grid-template-columns: 7rem 1fr; }
}

@media (min-width: 86em) {
  :root { --wrap: 84rem; }
  .rates { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 23.5em) {
  :root { --step-5: 2.05rem; }
  .head-in { gap: var(--sp-3); }
  .brand-mark { width: 34px; height: 34px; }
}

/* ==================================================================
   28. Print — a rate sheet is a thing people print
   ================================================================== */
@media print {
  .idbar, .head, .foot-nav, .cta, .menu-btn, .skip, .banding { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .sec, .hero { padding-block: 12pt; }
  .sec-steel, .sec-orange, .cta, .foot, .plate { background: #fff !important; color: #000 !important; }
  .sec-steel h1, .sec-steel h2, .sec-steel h3, .sec-orange h2 { color: #000 !important; }
  .placard, .nap, .rig-scroll { box-shadow: none; border-color: #999; break-inside: avoid; }
  .station, .rate, .scope, .seq-m, .faq-i { break-inside: avoid; }
  .faq-a { display: block !important; }
  a { text-decoration: underline; }
  .agl-v, .seq-ref, .nextlist li::before { background: none !important; color: #000 !important; box-shadow: inset 0 0 0 1px #000; }
  .rig caption, .rig thead th { background: none !important; color: #000 !important; border-bottom: 1px solid #000; }
  .rig tbody tr:hover { background: none; }
  .beacon { background: #000 !important; box-shadow: none !important; }
}