/* GENERATED by lab/gen.mjs from authority.css + nav.css. Do not edit. */
/* Two files, latin subset, variable 400-700, self-hosted: no third-party
   request on any page, and nothing render-blocking from another origin. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- one grade, the same one the film runs ----------
   Every photograph on this site came out of the same warm bay. On a neutral
   ground that warmth reads as the site's colour instead of the lamp's, so it
   comes down here exactly as it does on the landing page. */
/* every photograph on the page, rather than a hand-kept list of the
   containers that happened to exist when the list was written: the page head
   was missing from it and stayed amber on an otherwise neutral page. */
main img { filter: saturate(0.14) contrast(1.1) brightness(1.04); }

/* ============================================================================
   authority.css — the document floor for every Ninth Bay interior page.

   Inherits the landing page's tokens: the accent, the ground and its radial
   lift at lower intensity, the type scale, tabular numerics, the grain, the
   label schema, the photography. None of its machinery: no pin, no scrub, no
   pan, no drift, no signature move. Interior pages are a book, not a film.
   ========================================================================== */

:root {
  --radius: 0;                         /* RULES.md section 6: the shared radius token; this design is square-cornered */
  --nb-canvas:     #0B0B0C;
  --nb-surface:    #151517;
  --nb-plate:      #141416;
  --nb-ink:        #E9E9EB;
  --nb-ink-soft:   #94949A;
  --nb-ink-body:   #C2C2C8;   /* band prose: ink, one step down */
  --nb-lift:       #101012;   /* the ground a breaker sits on */
  --nb-lift-2:     #121214;   /* the closing band */
  --nb-accent:     #FFFFFF;
  --nb-accent-ink: #0B0B0C;

  --nb-hairline:        color-mix(in oklab, var(--nb-ink) 12%, transparent);
  --nb-hairline-strong: color-mix(in oklab, var(--nb-ink) 22%, transparent);

  --nb-font-display: "Archivo", system-ui, sans-serif;
  --nb-font-text:    "Geist", system-ui, sans-serif;

  --nb-t-xs: 0.9375rem;
  --nb-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --nb-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --nb-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --nb-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --nb-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);

  --nb-track-snug:   -0.02em;
  --nb-track-normal: -0.005em;
  --nb-track-wide:    0.08em;
  --nb-leading-tight: 1.06;
  --nb-leading-body:  1.62;

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

  --nb-section: clamp(3.5rem, 7vw, 7.5rem);
  --nb-gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --nb-maxw:    72rem;
  --nb-measure: 62ch;

  --nb-shadow-color: 220 40% 2%;
  --nb-e1: 0 1px 2px hsl(var(--nb-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--nb-shadow-color) / 0.20);
  --nb-e2: 0 2px 4px hsl(var(--nb-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--nb-shadow-color) / 0.30);
  --nb-edge: inset 0 1px 0 color-mix(in oklab, var(--nb-ink) 10%, transparent);

  --nb-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --nb-d-fast: 160ms;
}

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

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

body {
  margin: 0;
  background:
    radial-gradient(120% 80% at 50% 0%,
      color-mix(in oklab, var(--nb-surface) 55%, var(--nb-canvas)) 0%,
      var(--nb-canvas) 62%),
    var(--nb-canvas);
  color: var(--nb-ink);
  font-family: var(--nb-font-text);
  font-size: var(--nb-t-base);
  line-height: var(--nb-leading-body);
  letter-spacing: var(--nb-track-normal);
  -webkit-font-smoothing: antialiased;
}

/* the grain, at the landing page's intensity — one atmosphere across the site */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ------------------------------------------------------------- utilities -- */
.wrap { width: 100%; max-width: var(--nb-maxw); margin-inline: auto; padding-inline: var(--nb-gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--nb-gutter); top: -4rem; z-index: 90;
  background: var(--nb-accent); color: var(--nb-accent-ink);
  font-size: var(--nb-t-sm); padding: var(--nb-2) var(--nb-4);
  text-decoration: none; transition: top var(--nb-d-fast) var(--nb-ease-out);
}
.skip-link:focus { top: var(--nb-2); }

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

/* the site header lives in nav.css, shared with the film */

/* ------------------------------------------------------------- breadcrumb -- */
.crumbs { padding-block: var(--nb-4) 0; }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--nb-2);
  font-size: var(--nb-t-xs); color: var(--nb-ink-soft);
}
.crumbs li + li::before { content: "·"; margin-right: var(--nb-2); color: var(--nb-hairline-strong); }
.crumbs a { color: var(--nb-ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--nb-ink); }
.crumbs [aria-current] { color: var(--nb-ink); }

/* ------------------------------------------------------------------ type -- */
h1, h2, h3 {
  font-family: var(--nb-font-display); font-weight: 600;
  letter-spacing: var(--nb-track-snug); line-height: var(--nb-leading-tight);
  color: var(--nb-ink); text-wrap: balance; margin: 0;
}
h1 { font-size: var(--nb-t-2xl); }
h2 { font-size: var(--nb-t-xl); }
h3 { font-size: var(--nb-t-lg); }

p, li { max-width: var(--nb-measure); }
p { margin: var(--nb-4) 0 0; }
a { color: var(--nb-ink); text-decoration-color: var(--nb-accent); text-underline-offset: 0.2em; }
a:hover { color: var(--nb-accent); }
strong { color: var(--nb-ink); font-weight: 600; }

.kicker {
  font-family: var(--nb-font-text); font-size: var(--nb-t-xs);
  color: var(--nb-accent); margin: 0 0 var(--nb-3);
}
.lede { font-size: var(--nb-t-lg); line-height: 1.45; color: var(--nb-ink); }
.soft { color: var(--nb-ink-soft); }

/* page rhythm */
.page-head { padding-block: var(--nb-8) var(--nb-6); }
section.doc { padding-block: var(--nb-section); border-top: 1px solid var(--nb-hairline); }
section.doc:first-of-type { border-top: 0; }
section.doc > .wrap > h2 { margin-bottom: var(--nb-2); }

/* the one permitted rule-draw: an accent rule under each h2, drawn on entry */
.rule-draw { display: block; width: 100%; max-width: 8rem; height: 2px; margin-top: var(--nb-3); }
.rule-draw line { stroke: var(--nb-accent); stroke-width: 2; }

/* the 120ms settle on entry. Guarded on scripting: with JavaScript off the
   rule never applies, so nothing can be left hidden by an animation that will
   not run. */
@media (scripting: enabled) {
  .settle:not(.is-set) { opacity: 0; transform: translateY(8px); }
}
.settle.is-set { opacity: 1; transform: none; transition: opacity 120ms var(--nb-ease-out), transform 120ms var(--nb-ease-out); }
@media (prefers-reduced-motion: reduce) {
  .settle { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------- label schema -- */
.plate {
  background: var(--nb-plate);
  border: 1px solid var(--nb-hairline);
  box-shadow: var(--nb-edge), var(--nb-e1);
  padding: var(--nb-4) var(--nb-5);
  max-width: 34ch;
}
.plate__id {
  font-family: var(--nb-font-display); font-weight: 600;
  font-size: var(--nb-t-sm); color: var(--nb-accent); margin: 0;
}
.plate__row {
  font-size: var(--nb-t-sm); line-height: 1.55; margin: var(--nb-2) 0 0;
  color: var(--nb-ink); font-variant-numeric: tabular-nums;
}
.plate__row--soft { color: var(--nb-ink-soft); }

/* ---------------------------------------------------------------- figure -- */
figure.photo { margin: var(--nb-6) 0 0; }
.band__media, .phead__media { margin-inline: 0; }
figure.photo img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--nb-hairline);
  box-shadow: var(--nb-edge), var(--nb-e2);
  background: var(--nb-surface);
}
figure.photo figcaption {
  margin-top: var(--nb-3); font-size: var(--nb-t-sm);
  color: var(--nb-ink-soft); font-variant-numeric: tabular-nums;
  max-width: var(--nb-measure);
}
.photo-pair { display: grid; gap: var(--nb-5); grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .photo-pair { grid-template-columns: 1fr; } }

/* media split: photo beside copy on wide screens */
.split { display: grid; gap: var(--nb-6); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- table -- */
.table-scroll { overflow-x: auto; max-width: 100%; margin-top: var(--nb-5); }
.table-scroll table { margin-top: 0; min-width: 34rem; }
.table-scroll:focus-visible { outline: 2px solid var(--nb-accent); outline-offset: 4px; }
@media print { .table-scroll { overflow: visible; } .table-scroll table { min-width: 0; } }
table { border-collapse: collapse; width: 100%; margin-top: var(--nb-5); font-variant-numeric: tabular-nums; }
caption { text-align: left; font-size: var(--nb-t-sm); color: var(--nb-ink-soft); margin-bottom: var(--nb-3); }
th, td {
  text-align: left; padding: var(--nb-3) var(--nb-4);
  border-bottom: 1px solid var(--nb-hairline);
  font-size: var(--nb-t-sm); vertical-align: top;
}
th {
  font-family: var(--nb-font-text); font-weight: 500;
  font-size: var(--nb-t-xs); color: var(--nb-ink-soft);
}
td { color: var(--nb-ink); }

/* ------------------------------------------------------------------ list -- */
ul.doc-list, ol.doc-list { margin: var(--nb-4) 0 0; padding-left: 1.2em; }
ul.doc-list li + li, ol.doc-list li + li { margin-top: var(--nb-2); }

dl.spec { margin: var(--nb-5) 0 0; }
dl.spec div { display: grid; grid-template-columns: 12rem 1fr; gap: var(--nb-4); padding-block: var(--nb-3); border-bottom: 1px solid var(--nb-hairline); }
dl.spec dt { font-size: var(--nb-t-xs); color: var(--nb-ink-soft); }
dl.spec dd { margin: 0; font-size: var(--nb-t-sm); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { dl.spec div { grid-template-columns: 1fr; gap: var(--nb-1); } }

/* ------------------------------------------------------------------- faq -- */
.faq { margin-top: var(--nb-5); }
.faq > div { padding-block: var(--nb-5); border-top: 1px solid var(--nb-hairline); }
.faq h3 { font-size: var(--nb-t-base); font-family: var(--nb-font-text); font-weight: 600; }
.faq p { color: var(--nb-ink-soft); }
.faq p strong, .faq p b { color: var(--nb-ink); }

/* ------------------------------------------------------------ limit block -- */
.limit {
  border-left: 2px solid var(--nb-accent);
  padding: var(--nb-4) var(--nb-5);
  background: #121214;
  margin-top: var(--nb-6); max-width: 70ch;
}
.limit .kicker { margin-bottom: var(--nb-2); }
.limit p { margin-top: var(--nb-2); }

/* ------------------------------------------------------------------- cta -- */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--nb-4); align-items: center; margin-top: var(--nb-6); }
.btn {
  display: inline-block; cursor: pointer;
  font-family: var(--nb-font-text); font-size: var(--nb-t-sm);
  background: var(--nb-accent); color: var(--nb-accent-ink);
  border: 1px solid var(--nb-accent);
  padding: var(--nb-3) var(--nb-6); text-decoration: none;
}
.btn:hover { background: var(--nb-ink); border-color: var(--nb-ink); color: var(--nb-canvas); }
.btn--ghost { background: transparent; color: var(--nb-ink); border-color: var(--nb-hairline-strong); }
.btn--ghost:hover { background: transparent; color: var(--nb-accent); border-color: var(--nb-accent); }

/* ---------------------------------------------------------------- funnel -- */
.funnel { max-width: 44rem; }
.funnel fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.funnel legend {
  font-family: var(--nb-font-display); font-weight: 600;
  font-size: var(--nb-t-xl); letter-spacing: var(--nb-track-snug);
  line-height: var(--nb-leading-tight); padding: 0; margin-bottom: var(--nb-2);
}
.funnel__hint { color: var(--nb-ink-soft); font-size: var(--nb-t-sm); margin-top: 0; }
.funnel__progress {
  font-size: var(--nb-t-xs); color: var(--nb-ink-soft);
  font-variant-numeric: tabular-nums; margin-bottom: var(--nb-5);
}
.choices { display: grid; gap: var(--nb-3); margin-top: var(--nb-5); }
.choices label {
  display: flex; gap: var(--nb-3); align-items: baseline; cursor: pointer;
  border: 1px solid var(--nb-hairline); background: var(--nb-plate);
  padding: var(--nb-4) var(--nb-5); font-size: var(--nb-t-sm);
}
.choices label:hover { border-color: var(--nb-hairline-strong); }
.choices input:checked + span { color: var(--nb-accent); }
.choices label:has(input:checked) { border-color: var(--nb-accent); }
.choices input { accent-color: var(--nb-accent); }

/* the three-photograph condition question */
.photo-q { display: grid; gap: var(--nb-4); grid-template-columns: repeat(3, 1fr); margin-top: var(--nb-5); }
@media (max-width: 720px) { .photo-q { grid-template-columns: 1fr; } }
.photo-q label { display: block; cursor: pointer; border: 1px solid var(--nb-hairline); background: var(--nb-plate); padding: var(--nb-3); }
.photo-q label:has(input:checked) { border-color: var(--nb-accent); }
.photo-q img { display: block; width: 100%; height: auto; }
.photo-q .photo-q__name {
  display: block; margin-top: var(--nb-3);
  font-family: var(--nb-font-display); font-weight: 600; font-size: var(--nb-t-sm); color: var(--nb-accent);
}
.photo-q .photo-q__desc { display: block; margin-top: var(--nb-1); font-size: var(--nb-t-xs); color: var(--nb-ink-soft); }
.photo-q input { position: absolute; opacity: 0; }
.photo-q label:has(input:focus-visible) { outline: 2px solid var(--nb-accent); outline-offset: 2px; }

.field { margin-top: var(--nb-5); }
.field label { display: block; font-size: var(--nb-t-xs); color: var(--nb-ink-soft); margin-bottom: var(--nb-2); }
.field input, .field textarea, .field select {
  width: 100%; max-width: 28rem;
  background: var(--nb-plate); color: var(--nb-ink);
  border: 1px solid var(--nb-hairline-strong);
  font-family: var(--nb-font-text); font-size: var(--nb-t-base);
  padding: var(--nb-3) var(--nb-4);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--nb-accent); outline-offset: 0; border-color: var(--nb-accent); }
.field .err { display: none; color: #E5695E; font-size: var(--nb-t-sm); margin-top: var(--nb-2); }
.field.is-invalid .err { display: block; }
.field.is-invalid input { border-color: #E5695E; }

.funnel__nav { display: flex; gap: var(--nb-4); margin-top: var(--nb-7); }
.funnel__note { font-size: var(--nb-t-sm); color: var(--nb-ink-soft); margin-top: var(--nb-4); }

/* JS off: all steps render as one long form. JS on: .funnel--live shows one. */
.funnel--live .funnel__step { display: none; }
.funnel--live .funnel__step.is-current { display: block; }
.funnel__step + .funnel__step { margin-top: var(--nb-8); }
.funnel--live .funnel__step + .funnel__step { margin-top: 0; }

/* ---------------------------------------------------------------- footer -- */
.ft { margin-top: var(--nb-9); border-top: 1px solid var(--nb-hairline); padding-block: var(--nb-7); }
.ft__grid { display: grid; gap: var(--nb-6); grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; }
@media (max-width: 1080px) { .ft__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 860px) { .ft__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ft__grid { grid-template-columns: 1fr; } }
.ft h2 { font-size: var(--nb-t-xs); font-family: var(--nb-font-text); font-weight: 500; color: var(--nb-ink-soft); }
.ft ul { list-style: none; margin: var(--nb-3) 0 0; padding: 0; }
.ft li + li { margin-top: var(--nb-2); }
.ft a { font-size: var(--nb-t-sm); color: var(--nb-ink-soft); text-decoration: none; }
.ft a:hover { color: var(--nb-ink); }
.ft__word { font-family: var(--nb-font-display); font-weight: 600; font-size: var(--nb-t-sm); }
.ft__note { font-size: var(--nb-t-sm); color: var(--nb-ink-soft); margin-top: var(--nb-3); max-width: 40ch; }
.ft__legal { margin-top: var(--nb-7); padding-top: var(--nb-5); border-top: 1px solid var(--nb-hairline); font-size: var(--nb-t-xs); color: var(--nb-ink-soft); display: flex; flex-wrap: wrap; gap: var(--nb-4); justify-content: space-between; }

/* ----------------------------------------------------------------- print -- */
@media print {
  body { background: #fff; color: #111; }
  .grain, .nav, .ft, .crumbs, .cta-row, .skip-link { display: none !important; }
  a { color: #111; text-decoration: none; }
  .plate { border: 1px solid #999; box-shadow: none; background: #fff; }
  h1, h2, h3, p, li, td, dd, strong, b { color: #111 !important; }
  .plate__id { color: #3A3A3E; }
}

/* ============================================================================
   COMPOSITION — the band system.

   A ban list is not a layout. Interior pages are built from bands: one idea,
   an eyebrow, a headline, 60 to 110 words, one image, one action. Bands
   alternate image side, and never three run without a differently-shaped
   strip between a pair. Nothing here moves; composition is not motion.
   ========================================================================== */

/* --------------------------------------------------------------- page head */
.phead { padding-block: clamp(2.5rem, 5vw, 4rem) var(--nb-5); }
.phead h1 { margin-top: var(--nb-3); }
.phead__stand {
  font-size: var(--nb-t-lg); line-height: 1.45; color: var(--nb-ink);
  max-width: 46ch; margin-top: var(--nb-4);
}
.phead__note { color: var(--nb-ink-soft); font-size: var(--nb-t-sm); max-width: 60ch; }
.phead__media { margin: var(--nb-5) 0 clamp(1rem, 3vw, 2.5rem); }
.phead__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 21 / 8; object-fit: cover;
  background: var(--nb-surface); border: 1px solid var(--nb-hairline);
}
.phead__media figcaption {
  margin-top: var(--nb-3); font-size: var(--nb-t-sm); color: var(--nb-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------- band */
.band { padding-block: clamp(2.75rem, 5vw, 4.75rem); border-top: 1px solid var(--nb-hairline); }
.band__in {
  display: grid; gap: clamp(1.5rem, 3.4vw, 3.25rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  align-items: center;
}
/* the image side is the whole rhythm: DOM order is copy then media, so a
   left-side band has to reorder or every band renders image-right */
.band--left .band__media { order: 1; }
.band--left .band__copy  { order: 2; }
.band--right .band__media { order: 2; }
.band--right .band__copy  { order: 1; }
@media (max-width: 860px) {
  .band__in { grid-template-columns: 1fr; }
  .band--right .band__media, .band--right .band__copy { order: initial; }
  .band__media { order: -1; }
}

.band__eyebrow {
  font-size: 14px; letter-spacing: 0;
  color: var(--nb-accent); margin: 0 0 var(--nb-3);
}
.band__copy h2 {
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2rem); font-weight: 700;
  line-height: 1.12; margin: 0; max-width: 22ch; letter-spacing: -0.015em;
}
.band__copy p {
  font-size: var(--nb-t-base); line-height: 1.6;
  color: var(--nb-ink-body);
  max-width: 52ch; margin-top: var(--nb-4);
}
.band__copy p strong { color: var(--nb-ink); }
.band__action {
  display: inline-block; margin-top: var(--nb-5);
  font-size: var(--nb-t-sm);
  color: var(--nb-accent); text-decoration: none;
  border-bottom: 1px solid var(--nb-accent); padding-bottom: 0.35rem;
}
.band__action:hover { color: var(--nb-ink); border-bottom-color: var(--nb-ink); }

.band__media { margin: 0; }
.band__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--nb-surface);
}
.band__media figcaption {
  margin-top: var(--nb-3); font-size: var(--nb-t-sm); color: var(--nb-ink-soft);
  font-variant-numeric: tabular-nums; max-width: 46ch;
}

/* ------------------------------------------------------- breaker: spec row */
.strip {
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
  border-top: 1px solid var(--nb-hairline);
  background: var(--nb-lift);
}
.strip__label {
  font-size: 14px; letter-spacing: 0;
  color: var(--nb-accent); margin: 0 0 var(--nb-5);
}
.spec-row { display: grid; gap: 1px; background: var(--nb-hairline); border: 1px solid var(--nb-hairline); }
@media (min-width: 700px) { .spec-row { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .spec-row--6 { grid-template-columns: repeat(6, 1fr); } }
.spec-row > div { background: var(--nb-canvas); padding: var(--nb-5) var(--nb-4); }
.spec-row dt {
  font-size: var(--nb-t-xs);
  color: var(--nb-ink-soft); margin-bottom: var(--nb-2);
}
.spec-row dd {
  margin: 0; font-family: var(--nb-font-display); font-weight: 600;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); color: var(--nb-ink);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.spec-row small { display: block; margin-top: var(--nb-2); font-size: var(--nb-t-xs); color: var(--nb-ink-soft); }

/* -------------------------------------------------- breaker: numbered steps */
.steps-4 { display: grid; gap: var(--nb-5); }
@media (min-width: 760px) { .steps-4 { grid-template-columns: repeat(4, 1fr); } }
.steps-4 > li { list-style: none; margin: 0; max-width: none; border-top: 2px solid var(--nb-accent); padding-top: var(--nb-4); }
.steps-4 .n {
  font-family: var(--nb-font-display); font-weight: 600; font-size: var(--nb-t-sm); color: var(--nb-accent); display: block; margin-bottom: var(--nb-2);
}
.steps-4 h3 { font-size: var(--nb-t-base); font-family: var(--nb-font-text); font-weight: 600; }
.steps-4 p { font-size: var(--nb-t-sm); color: var(--nb-ink-soft); margin-top: var(--nb-2); }

/* ----------------------------------------------- breaker: plate row, cropped
   The rail from the film, read cropped: five objects in the label schema. */
.plate-row { display: grid; gap: var(--nb-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .plate-row { grid-template-columns: repeat(5, 1fr); } }
.plate-row figure { margin: 0; }
.plate-row img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--nb-surface); border: 1px solid var(--nb-hairline);
}
.plate-row figcaption { margin-top: var(--nb-3); }
.plate-row .p-id {
  font-family: var(--nb-font-display); font-weight: 600; font-size: var(--nb-t-xs); color: var(--nb-accent); margin: 0;
}
.plate-row .p-row { font-size: var(--nb-t-sm); margin: var(--nb-2) 0 0; color: var(--nb-ink); font-variant-numeric: tabular-nums; }
.plate-row .p-row--soft { color: var(--nb-ink-soft); }

/* --------------------------------------------------- breaker: coverage grid */
.coverage { display: grid; gap: 1px; background: var(--nb-hairline); border: 1px solid var(--nb-hairline); }
@media (min-width: 560px) { .coverage { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .coverage { grid-template-columns: repeat(5, 1fr); } }
.coverage a, .coverage span {
  background: var(--nb-canvas); padding: var(--nb-4); display: block;
  font-size: var(--nb-t-sm); color: var(--nb-ink-soft); text-decoration: none;
}
.coverage a:hover { color: var(--nb-accent); background: var(--nb-plate); }
.coverage strong { display: block; color: var(--nb-ink); font-weight: 500; }

/* ------------------------------------------------------ breaker: pull quote */
.pullquote { padding-block: var(--nb-8); border-top: 1px solid var(--nb-hairline); background: var(--nb-plate); }
.pullquote blockquote {
  margin: 0; max-width: 34ch;
  font-family: var(--nb-font-display); font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem); line-height: 1.18;
  color: var(--nb-ink); text-wrap: balance;
}
.pullquote cite {
  display: block; margin-top: var(--nb-5); font-style: normal;
  font-size: var(--nb-t-xs); color: var(--nb-accent);
}

/* ----------------------------------------------------------------- CTA band */
.cta-band {
  padding-block: clamp(3rem, 5.5vw, 5rem);
  border-top: 1px solid var(--nb-hairline);
  background: var(--nb-lift-2);
}
.cta-band .band__in { align-items: center; }
.cta-band h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); max-width: 18ch; }
.cta-band p { color: var(--nb-ink-soft); max-width: 46ch; }

@media print {
  .band__media, .plate-row, .phead__media { display: none !important; }
  .band, .strip, .pullquote, .cta-band { border-color: #ccc !important; }
}

/* ============================================================================
   nav.css — the one navigation bar, shared by the film and the document floor.

   It runs on --nb-* tokens. The interior pages get those from authority.css;
   the home page aliases them to its own --sc-* tokens, so the bar is literally
   the same component in both places and cannot drift.

   No JavaScript. The services menu opens on hover and on focus-within; the
   phone panel is a <details>, so it works with scripting off and is operable
   from the keyboard either way.
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  /* explicit rgba rather than color-mix: the contrast verifier reads this
     value directly, and it should read the real one */
  background: rgba(10, 9, 8, 0.88);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid var(--nb-hairline);
}
/* the film wants the bar floating over it, outside the engine's layout */
.nav--fixed { position: fixed; inset: 0 0 auto 0; }

.nav__in {
  width: 100%;
  max-width: var(--nb-maxw, 72rem);
  margin-inline: auto;
  padding-inline: var(--nb-gutter);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  min-height: 4.25rem;
}

/* ------------------------------------------------------------- wordmark -- */
/* The wordmark is a token slot: "Bob's Detail" and a sixty-three character
   name are the same string. Left at flex: none it pushed the menu, the phone
   and the CTA off the right edge of a 1440 viewport and off a phone entirely.
   It shrinks now, and past its cap it truncates rather than wrapping: the bar
   is one line tall and the full name is in the footer, the colophon and the
   page title. */
.nav__mark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; white-space: nowrap;
  flex: 0 0 auto; min-width: 0; max-width: min(46ch, 40vw);
}
@media (max-width: 900px) { .nav__mark { max-width: min(30ch, 62vw); } }
/* the lamp, at 1:8 scale — the same mark as the sign lockup and the favicon */
.nav__mark::before {
  content: ""; width: 1.4rem; height: 3px; flex: none;
  background: var(--nb-accent);
  transition: width 200ms var(--nb-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.nav__mark:hover::before { width: 2rem; }
.nav__mark span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--nb-font-display); font-weight: 600;
  font-size: 0.9375rem;
  color: var(--nb-ink);
}

/* ---------------------------------------------------------------- links -- */
/* min-width: 0 alone lets the list shrink but not its children, so the last
   items slid under the phone number instead of being cut. The list clips.
   Nothing in it is unreachable: every destination is also in the footer, the
   colophon and the mobile panel. */
.nav__list {
  display: flex; align-items: center;
  flex: 0 1 auto; min-width: 0;
  /* clipping mid-word reads as a bug ("ABOL"), so the row scrolls instead and
     fades at the cut. Nothing becomes unreachable: tabbing scrolls it into
     view, and every destination is also in the footer and the mobile panel. */
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  gap: clamp(1rem, 2.2vw, 1.9rem);
  list-style: none; margin: 0 auto 0 clamp(0.5rem, 2vw, 1.5rem); padding: 0;
}
.nav__list > li { margin: 0; max-width: none; }

.nav__link {
  position: relative; display: inline-block;
  padding-block: 1.5rem;
  font-family: var(--nb-font-text);
  font-size: 0.9375rem;
  color: var(--nb-ink-soft); text-decoration: none; white-space: nowrap;
  transition: color 160ms var(--nb-ease-out, ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1.15rem;
  height: 1px; background: var(--nb-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 200ms var(--nb-ease-out, ease-out);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--nb-ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current] { color: var(--nb-ink); }
.nav__link[aria-current]::after { transform: scaleX(1); }
.nav__caret {
  /* explicit: the film's stylesheet sets svg { display: block }, which would
     otherwise drop the chevron onto its own line */
  display: inline-block;
  width: 0.58em; height: 0.4em; margin-left: 0.45em; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 160ms var(--nb-ease-out, ease-out);
}
.nav__group:hover .nav__caret,
.nav__group:focus-within .nav__caret { transform: rotate(180deg); }

/* ------------------------------------------------------------- services -- */
.nav__group { position: relative; }
.nav__menu {
  position: absolute; top: 100%; left: -0.9rem; min-width: 21rem;
  margin: 0; padding: 0.4rem; list-style: none;
  background: var(--nb-plate, #141416);
  border: 1px solid var(--nb-hairline);
  box-shadow: var(--nb-edge), var(--nb-e2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 150ms var(--nb-ease-out, ease-out),
              transform 150ms var(--nb-ease-out, ease-out),
              visibility 150ms;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu li { margin: 0; max-width: none; }
.nav__menu a {
  display: block; padding: 0.7rem 0.85rem; text-decoration: none;
  color: var(--nb-ink); font-size: 0.92rem; line-height: 1.3;
  border-left: 2px solid transparent;
}
.nav__menu a small {
  display: block; margin-top: 0.2rem;
  font-size: 0.9375rem; color: var(--nb-ink-soft); letter-spacing: 0;
}
.nav__menu a:hover,
.nav__menu a:focus-visible {
  background: rgba(168, 135, 63, 0.10);
  border-left-color: var(--nb-accent);
  color: var(--nb-ink);
}
.nav__menu a[aria-current] { border-left-color: var(--nb-accent); color: var(--nb-accent); }

/* ----------------------------------------------------------- right side -- */
.nav__right { display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.4rem); flex: none; }
.nav__tel {
  font-size: 0.9375rem; color: var(--nb-ink-soft);
  text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color 160ms var(--nb-ease-out, ease-out);
}
.nav__tel:hover { color: var(--nb-ink); }
.nav__cta {
  font-family: var(--nb-font-text);
  font-size: 0.9375rem;
  background: var(--nb-accent); color: var(--nb-accent-ink, #0B0B0C);
  border: 1px solid var(--nb-accent);
  padding: 0.7rem 1.15rem; text-decoration: none; white-space: nowrap;
  transition: background 160ms var(--nb-ease-out, ease-out),
              border-color 160ms var(--nb-ease-out, ease-out),
              color 160ms var(--nb-ease-out, ease-out);
}
.nav__cta:hover { background: var(--nb-ink); border-color: var(--nb-ink); color: var(--nb-canvas, #0B0B0C); }

/* ------------------------------------------- second tier: the collection --
   Home only. The index of panels that jumps into the rail — the film's own
   nav treatment, kept, now sitting under the site bar instead of replacing it. */
.nav__tier {
  border-top: 1px solid var(--nb-hairline);
  background: rgba(10, 9, 8, 0.55);
}
.nav__tier-in {
  width: 100%; max-width: var(--nb-maxw, 72rem); margin-inline: auto;
  padding: 0 var(--nb-gutter);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 2.6rem;
}
.nav__tier-label {
  font-size: 0.9375rem;
  color: var(--nb-accent); white-space: nowrap;
}
.nav__tier-in button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--nb-font-text); font-size: 0.9375rem;
  color: var(--nb-ink-soft); padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--nb-ease-out, ease-out),
              border-color 160ms var(--nb-ease-out, ease-out);
}
.nav__tier-in button:hover { color: var(--nb-ink); border-bottom-color: var(--nb-accent); }
.nav__tier-in button:active { transform: translateY(1px); }

/* --------------------------------------------------------------- mobile -- */
.nav__more { display: none; margin-left: auto; flex: none; }
.nav__more > summary {
  display: flex; align-items: center; gap: 0.55rem; cursor: pointer;
  list-style: none; padding: 0.6rem 0.2rem;
  font-size: 0.9375rem;
  color: var(--nb-ink);
}
.nav__more > summary::-webkit-details-marker { display: none; }
.nav__more > summary::after {
  content: ""; width: 1.05rem; height: 8px;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
}
.nav__more[open] > summary::after {
  border-bottom-color: transparent;
  height: 4px;
}
.nav__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  /* no backdrop-filter here: nesting one inside the bar's own makes Chrome
     composite this panel translucently and the page reads through it */
  background: #0B0B0C;
  border-bottom: 1px solid var(--nb-hairline);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  padding: var(--nb-4, 1rem) var(--nb-gutter) var(--nb-6, 2rem);
  max-height: calc(100vh - 4.25rem); overflow-y: auto;
}
.nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__panel li { margin: 0; max-width: none; }
.nav__panel a {
  display: block; padding: 0.85rem 0; text-decoration: none;
  color: var(--nb-ink); font-size: 0.95rem;
  border-bottom: 1px solid var(--nb-hairline);
}
.nav__panel a[aria-current] { color: var(--nb-accent); }
.nav__panel .nav__panel-sub a {
  padding-left: 1rem; font-size: 0.9375rem; color: var(--nb-ink-soft);
}
.nav__panel .nav__panel-sub a:hover { color: var(--nb-ink); }
.nav__panel .nav__panel-sub a[aria-current] { color: var(--nb-accent); }
.nav__panel-head {
  font-size: 0.9375rem;
  color: var(--nb-accent); margin: var(--nb-5, 1.5rem) 0 var(--nb-2, 0.5rem);
}
.nav__panel .nav__cta { display: block; text-align: center; margin-bottom: var(--nb-5, 1.5rem); }
.nav__panel .nav__tel { display: block; padding: 0.85rem 0; font-size: 0.95rem; }

@media (max-width: 1080px) {
  .nav__list { gap: 1.1rem; }
  .nav__link { font-size: 0.9375rem; }
  .nav__tel { display: none; }
}
@media (max-width: 900px) {
  .nav__list, .nav__right { display: none; }
  .nav__more { display: block; }
  .nav__tier { display: none; }
  .nav__in { min-height: 3.75rem; }
  .nav__panel { max-height: calc(100vh - 3.75rem); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__link::after, .nav__menu, .nav__mark::before, .nav__cta, .nav__tel, .nav__link { transition: none; }
}
@media print { .nav { display: none !important; } }

/* a name with no spaces long enough to widen its column breaks instead */
.ft__word, .colophon .plate__id { overflow-wrap: anywhere; }

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

/* RULES.md section 10a: the shared handler writes the outcome here. Empty until
   it has something to say, then success or error — both styled. */
.form-status { margin: 0 0 1rem; padding: 0.8rem 1rem; border: 1px solid currentColor; border-radius: var(--radius, 0); font-size: 0.95em; }
.form-status:empty { display: none; }
.form-status.success, .form-status[data-state="success"] { opacity: 1; }
.form-status.error, .form-status[data-state="error"] { border-color: #C9553D; }