/* Ironwood Automotive demo stylesheet (spec 16, v2-demo-auto-repair;
   amendment 16/2): the "High Mileage" register, the pennzoil grammar.
   Standalone, scoped css for this demo alone: every selector is
   .irn- prefixed. The documented machine-scope exceptions are exactly
   two: the token block on #demo-main (the demo's own serving scope:
   the one sanctioned machine-selector root, which also repaints the
   machinery midnight body paint on the serving surface) and the
   descendant link override group (the machinery base paints no
   anchors, so prose anchors would bleed UA styling; fact 302). The
   demo also carries its own border-box group (the machinery sheets
   ship no global reset), which the page-spanning chrome wrapper
   joins.

   Machinery contract (demo-base.css, demo-notice.css, layouts.demo)
   is never redefined here: --demo-notice-space is consumed as the
   plan-3 geometry, exactly two var() sites: the topbar clearance
   padding (the first in-flow element pays the fixed machinery
   banner's height) and the nav band's sticky pin top (the pinned band
   parks at the banner's bottom edge); the banner is machinery
   z-index 9998 fixed-top and nothing demo-owned ever overlaps it. No
   stylesheet imports anywhere; the sibling demo namespaces and the
   app bundles are absent by construction (the prefix census proves
   it). The two @font-face rules live ONLY in this file, self-hosted
   beside their OFL licenses under /demos/auto-repair/fonts/,
   font-display swap (Saira display, DM Sans body; the user font
   ruling of 2026-10-11; no fixed-pitch face in this stack).

   THE BLESSED YELLOW (amendment A1): this demo's yellow family rides
   the sanctioned exception (the Freshcut blessed-yellow precedent,
   spec 13/2). The accent is the maximum-chroma signal yellow (HSL
   52, 100, 50) with the signal charcoal as its ink; the exact bytes
   ride the token lines only (the census pins them there). The accent
   stands apart from the machinery banner token (--demo-notice-bg in
   demo-notice.css, a muted ochre surface) by a pinned distance proof:
   euclid 90.0 of the 441 RGB cube diagonal (20.4 percent), manhattan
   132, hue +8 degrees, saturation +22.7 points, lightness -12 points.
   The banner's own bytes never ride demo artifacts (census needles),
   and the R1 accent family is gone entirely (its bytes are census
   needles and are never quoted here). Yellow rides fills and edges;
   yellow as static text lives only in the two sanctioned sites (the
   readout stand line and the warranty echo). */

@font-face {
  font-family: "Saira";
  src: url("/demos/auto-repair/fonts/saira-latin-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/demos/auto-repair/fonts/dmsans-latin-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* High Mileage tokens (plan 2, the locked block; the single sanctioned
   machine-scope root on this file). Charcoal field, full signal
   yellow accent, signal-white headings, engine-silver copy, neutral
   scrims only, radius 8 verbs, radius 16 panels. */
#demo-main {
  --irn-void: #222222;       /* page field: the signal charcoal */
  --irn-charcoal: #2e2e2e;   /* raised surfaces: tiles, readout, seg rest */
  --irn-plate: #383838;      /* highest surface (hover raise only) */
  --irn-abyss: #1c1c1c;      /* the deep footer band */
  --irn-hairline: rgba(255, 255, 255, 0.14);  /* light-on-dark divider */
  --irn-yellow: #ffdd00;     /* THE accent (HSL 52, 100, 50) */
  --irn-yellow-ink: #222222; /* dark ink on yellow (the pennzoil ink) */
  --irn-yellow-wash: rgba(255, 221, 0, 0.12);  /* subtle fills, never a scrim */
  --irn-wash-dark: rgba(34, 34, 34, 0.10);     /* yellow-band item hover */
  --irn-ink: #ffffff;        /* headings, full opacity */
  --irn-silver: #c9cdd0;     /* body copy */
  --irn-silver-dim: #9aa1a6; /* muted meta, small labels */
  --irn-scrim-triplet: 18, 18, 18;   /* neutral scrim stops only */
  --irn-shell: 1160px;
  --irn-radius: 8px;         /* button + media radius (the rounded-lg voice) */
  --irn-tile: 16px;          /* tile/panel radius (the rounded-2xl voice) */
  --irn-display: "Saira", sans-serif;
  --irn-body: "DM Sans", sans-serif;
  background: var(--irn-void);
  color: var(--irn-silver);
}

/* The page-spanning chrome wrapper (plan 3): it wraps the topbar, the
   sticky nav band, every page's content, and the footer, so the
   sticky ancestor spans the whole scroll. position: relative only:
   NO overflow property may ever ride this element (overflow on the
   sticky ancestor kills the pin). */
.irn-page {
  position: relative;
}

/* The shell: width, inline padding, body type. */
.irn-shell {
  width: 100%;
  max-width: var(--irn-shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  box-sizing: border-box;
  font-family: var(--irn-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--irn-silver);
}
.irn-shell p { margin: 0 0 1.05em; }
.irn-shell ul { margin: 0 0 1.05em; }

/* Box discipline: the machinery stylesheets ship no global reset
   (content-box is the browser default), so the demo carries its own
   border-box group the way the machinery skip link does: min-heights
   stay honest (a 44px target never becomes 44 plus padding). */
.irn-page,
.irn-topbar,
.irn-topbar-row,
.irn-topbar-link,
.irn-shell,
.irn-nav,
.irn-nav-bar,
.irn-brand,
.irn-brand-mark,
.irn-brand-text,
.irn-brand-word,
.irn-brand-sub,
.irn-nav-toggle,
.irn-nav-bars,
.irn-nav-toggle-label,
.irn-nav-links,
.irn-nav-links li,
.irn-btn,
.irn-btn-invert,
.irn-btn-rail,
.irn-textlink,
.irn-tab,
.irn-hero,
.irn-hero-img,
.irn-hero-scrim,
.irn-hero-overlay,
.irn-hero-inner,
.irn-hero-title,
.irn-hero-promise,
.irn-hero-ctas,
.irn-promise,
.irn-promise-line,
.irn-splits,
.irn-split,
.irn-split-b,
.irn-rail,
.irn-split-copy,
.irn-split-media,
.irn-fig,
.irn-fig img,
.irn-quote,
.irn-quote-text,
.irn-quote-name,
.irn-stats,
.irn-stats-grid,
.irn-stat,
.irn-stat-number,
.irn-stat-label,
.irn-warranty,
.irn-warranty-line,
.irn-warranty-echo,
.irn-warranty-lite,
.irn-warranty-lite-line,
.irn-bookband,
.irn-bookband-line,
.irn-contact,
.irn-contact-lines,
.irn-contact-line,
.irn-contact-line a,
.irn-footer,
.irn-footer-grid,
.irn-footer-brand,
.irn-footer-prompt,
.irn-footer-col,
.irn-footer-head,
.irn-footer-copy,
.irn-pagehero,
.irn-pagehero-lede,
.irn-service,
.irn-band-meta,
.irn-band-numeral,
.irn-band-head,
.irn-band-line,
.irn-range,
.irn-codetable,
.irn-codetable th,
.irn-codetable td,
.irn-codetable-line,
.irn-treadnote,
.irn-statement,
.irn-statement-line,
.irn-process,
.irn-step,
.irn-step-numeral,
.irn-step-body,
.irn-step-title,
.irn-people,
.irn-person,
.irn-person-name,
.irn-person-role,
.irn-person-line,
.irn-facts,
.irn-facts-line,
.irn-estimator,
.irn-est-lede,
.irn-seg-row,
.irn-seg-label,
.irn-seg,
.irn-readout,
.irn-readout-line,
.irn-readout-svc,
.irn-readout-veh,
.irn-readout-range,
.irn-readout-meta,
.irn-readout-time,
.irn-readout-note,
.irn-readout-stand,
.irn-steps,
.irn-ready,
.irn-ready-line,
.irn-qa,
.irn-q,
.irn-q-summary,
.irn-q-mark,
.irn-q-body {
  box-sizing: border-box;
}

/* Prose link overrides (the machinery sheets paint no anchors; without
   these the UA link paint would bleed into the demo prose). The
   contact + footer anchor components carry their own link rules
   below; prose anchors take the silver register. The 16/3 D1 repair
   (spec A8): the override must NEVER touch the verb family, so the
   whole .irn-btn family (.irn-btn, .irn-btn-invert, .irn-btn-rail) is
   excluded at the selector level; a yellow verb riding inside a prose
   paragraph (the Home hero CTA pair sits in p.irn-hero-ctas under
   .irn-shell, and the bookband rail verbs get the same guard) paints
   its own contract: yellow fill + the ink-on-yellow token, no
   underline, min-height intact. The .irn-textlink verb is NOT part of
   the exclusion; it keeps its own contract through the keeper rules
   that follow (the override group would otherwise underline it). */
.irn-shell p a:not(.irn-btn, .irn-btn-invert, .irn-btn-rail),
.irn-split-copy p a:not(.irn-btn, .irn-btn-invert, .irn-btn-rail) {
  color: var(--irn-silver);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.irn-shell p a:not(.irn-btn, .irn-btn-invert, .irn-btn-rail):hover,
.irn-split-copy p a:not(.irn-btn, .irn-btn-invert, .irn-btn-rail):hover {
  color: var(--irn-ink);
  text-decoration-color: var(--irn-ink);
}
.irn-shell p a.irn-textlink,
.irn-split-copy p a.irn-textlink {
  color: var(--irn-silver);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.irn-shell p a.irn-textlink:hover,
.irn-split-copy p a.irn-textlink:hover {
  border-bottom-color: var(--irn-yellow);
}

/* Bench rhythm: the shared after-first band separator + padding. Every
   band listed here only ever follows the page's first band (hero,
   statement, or page hero), so one group carries the hairline. The
   promise mega-surface sits outside this group (its own shape does
   the framing on Home). */
.irn-splits,
.irn-quote,
.irn-stats,
.irn-warranty,
.irn-bookband,
.irn-contact,
.irn-service,
.irn-warranty-lite,
.irn-process,
.irn-bay,
.irn-owner,
.irn-people,
.irn-facts,
.irn-estimator,
.irn-steps,
.irn-ready,
.irn-qa {
  border-top: 1px solid var(--irn-hairline);
  padding-block: clamp(56px, 9vw, 104px);
}

/* Headings (Saira display voices per plan 2: hero 3.25rem top,
   statement 3rem top, band heads 2.125rem top, letter-spacing 0;
   the old display tightening is dropped). */
.irn-shell h1,
.irn-shell h2,
.irn-shell h3 {
  font-family: var(--irn-display);
  color: var(--irn-ink);
  margin: 0;
}
.irn-shell h1 {
  font-weight: 700;
  font-size: clamp(2.25rem, 4.6vw, 3rem);
  line-height: 1.1;
}
.irn-shell h2 {
  font-weight: 700;
  font-size: clamp(1.65rem, 3vw, 2.125rem);
  line-height: 1.12;
  margin: 0 0 20px;
}
.irn-shell h3 {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 12px;
}
.irn-shell blockquote {
  margin: 0 0 18px;
  padding: 0;
}

/* The block-tab overline: small-caps label riding a short thick
   yellow bar, left-aligned (never centered, never a pill). */
.irn-tab {
  display: inline-block;
  font-family: var(--irn-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--irn-silver-dim);
  margin: 0 0 14px;
}
.irn-tab::after {
  content: "";
  display: block;
  width: 26px;
  height: 5px;
  margin-top: 7px;
  border-radius: 2px;
  background: var(--irn-yellow);
}
.irn-tab-silver::after { background: var(--irn-silver-dim); }
.irn-tab-mini { font-size: 0.66rem; }
.irn-tab-mini::after { width: 18px; height: 4px; margin-top: 5px; }
.irn-hero-tab { color: var(--irn-silver); }

/* Band numerals: plain wide numerals in white (the pennzoil
   restraint: yellow stays with verbs and edges). */
.irn-band-numeral {
  font-family: var(--irn-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--irn-ink);
  letter-spacing: 0.04em;
}

/* The primary verb (plan 2 section 5, the pennzoil CTA voice):
   solid yellow fill, dark ink, 2px same-color border, radius 8,
   min-height 48, sentence-case labels. The hover is the FULL INVERT
   (charcoal fill, yellow ink). No gradients, no shadows, no motion
   (the matte register). */
.irn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border: 2px solid var(--irn-yellow);
  border-radius: var(--irn-radius);
  background: var(--irn-yellow);
  color: var(--irn-yellow-ink);
  font-family: var(--irn-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}
.irn-btn:hover,
.irn-btn:focus-visible {
  background: var(--irn-void);
  color: var(--irn-yellow);
  border-color: var(--irn-void);
}

/* The inverted chip (the standing verb ON the yellow nav band):
   charcoal fill, yellow ink; hover = the invert of the invert
   (yellow fill, dark ink). Declared after .irn-btn:hover so the
   equal-specificity pseudo rules resolve to this one for invert
   chips. */
.irn-btn-invert {
  background: var(--irn-void);
  border-color: var(--irn-void);
  color: var(--irn-yellow);
}
.irn-btn-invert:hover,
.irn-btn-invert:focus-visible {
  background: var(--irn-yellow);
  color: var(--irn-yellow-ink);
  border-color: var(--irn-yellow);
}

/* The rail verb (the phone + book stacked rail of the book bands):
   the .irn-btn paint at min-height 56, full-width below 700 (the
   three-bar rail stacks one bar per row on small screens). */
.irn-btn-rail { min-height: 56px; }
@media (max-width: 699px) {
  .irn-btn-rail { flex-basis: 100%; width: 100%; }
}

/* The text link verb: silver DM Sans bold; the hover raises the 2px
   yellow underline (transparent at rest so no geometry shift). No
   arrow glyphs: the plain verb label carries. */
.irn-textlink {
  display: inline-block;
  min-height: 44px;
  padding: 8px 0 10px;
  font-family: var(--irn-body);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--irn-silver);
  text-decoration: none;
  text-underline-offset: 5px;
  border-bottom: 2px solid transparent;
}
.irn-textlink:hover { border-bottom-color: var(--irn-yellow); }

/* The utility contact strip (plan 3 section 2): a field-charcoal zone
   above the yellow band, small plain links right-aligned. Background
   stays transparent: the field shows through, so the clearance and
   the strip read as one quiet charcoal zone. The strip pays the
   machinery banner clearance (the first of the two sanctioned
   --demo-notice-space var() sites in this file). */
.irn-topbar {
  padding-top: var(--demo-notice-space);
  background: transparent;
}
.irn-topbar-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-height: 48px;
}
.irn-topbar-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 14px;
  color: var(--irn-silver);
  font-family: var(--irn-body);
  font-weight: 500;
  font-size: 0.8rem;
  text-decoration: none;
}
.irn-topbar-link:hover { color: var(--irn-ink); }
@media (max-width: 399px) {
  .irn-topbar-row { flex-wrap: wrap; }
  .irn-topbar-link { padding-block: 10px; }
}

/* Chrome: the yellow nav band (plan 3 section 3). Sticky: at rest it
   sits in flow under the topbar; on scroll the topbar leaves and the
   band pins exactly at the machinery banner's bottom edge (the pin
   top equals the banner space, so the banner never overlaps the
   band). z-index 30: above content, below the banner's 9998. The
   band is solid yellow from load: no translucency state exists. The
   pin is pure CSS (no script couples chrome to the banner). */
.irn-nav {
  position: sticky;
  top: var(--demo-notice-space);
  z-index: 30;
  background: var(--irn-yellow);
  border-bottom: 2px solid var(--irn-wash-dark);
}
.irn-nav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
}
.irn-nav .irn-brand { color: var(--irn-yellow-ink); }
.irn-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--irn-ink);
  text-decoration: none;
}
.irn-brand-mark { flex: none; }
.irn-brand-text { display: flex; flex-direction: column; }
.irn-brand-word {
  font-family: var(--irn-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: inherit;
}
.irn-brand-sub {
  font-family: var(--irn-body);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--irn-silver-dim);
}

/* The small-screen toggle: dark ink furniture on the yellow band. */
.irn-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  min-width: 46px;
  padding: 8px 14px;
  background: transparent;
  border: 2px solid var(--irn-yellow-ink);
  border-radius: 6px;
  color: var(--irn-yellow-ink);
  font-family: var(--irn-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.irn-nav-toggle:hover { background: var(--irn-wash-dark); }
.irn-nav-bars {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.irn-nav-bars::before,
.irn-nav-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.irn-nav-bars::before { top: -6px; }
.irn-nav-bars::after { top: 6px; }

/* The nav disclosure: attribute-paint contract (visibility is paint).
   Server markup ships the hidden attribute; the IIFE toggles hidden
   AND the class pair and this stylesheet's rules keep paint glued to
   the attribute on every breakpoint. Below 900px the links are the
   stacked charcoal panel that grows the band in flow (the sticky
   element stays pinned while open); at and above 900px the row layout
   republishes them on the band. */
.irn-nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 18px;
  background: var(--irn-charcoal);
  flex-basis: 0;
  flex-grow: 0;
}
.irn-nav-links:not([hidden]) { display: block; flex-basis: 100%; }
.irn-nav-links[hidden] { display: none; }
.irn-nav-links li { border-top: 1px solid var(--irn-hairline); }
.irn-nav-links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 2px;
  color: var(--irn-ink);
  font-family: var(--irn-body);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 4px solid transparent;
}
.irn-nav-links a:hover {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}
.irn-nav-links a[aria-current="page"] {
  border-bottom-color: var(--irn-yellow);
}
.irn-nav-links .irn-btn {
  min-height: 48px;
  margin-top: 6px;
  width: 100%;
  background: var(--irn-yellow);
  border-color: var(--irn-yellow);
  color: var(--irn-yellow-ink);
}

@media (min-width: 900px) {
  .irn-nav-toggle { display: none; }
  .irn-nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    flex-basis: auto;
    flex-grow: 0;
    background: transparent;
  }
  .irn-nav-links:not([hidden]) { display: flex; flex-basis: auto; }
  .irn-nav-links[hidden] { display: flex; flex-basis: auto; }
  .irn-nav-links li { border-top: 0; }
  .irn-nav-links a {
    padding: 8px 14px;
    border-radius: 6px;
    color: var(--irn-yellow-ink);
  }
  .irn-nav-links a:hover {
    background: var(--irn-wash-dark);
    border-radius: 6px;
  }
  .irn-nav-links a[aria-current="page"] {
    border-bottom-color: var(--irn-yellow-ink);
  }
  .irn-nav-links .irn-btn {
    min-height: 44px;
    margin: 0;
    padding: 10px 18px;
    width: auto;
  }
}

/* HERO BAND (Home): full-bleed image, neutral bottom-dark scrim, the
   bottom-left overlay per the text-over-image contract (the scrim is
   absolute and sits between img and overlay; overlay text full
   opacity). The scrim stop table (plan 2 section 2): 0.90 over the
   bottom band, 0.62 from the middle band, 0 at the top, plus a flat
   0.30 base wash over the full image footprint: in the bottom band
   the combined floor reads at or above 0.82 against the worst
   realistic bright photo pixel. The scrim is neutral-dark only,
   never accent-tinted. */
.irn-hero {
  position: relative;
  min-height: clamp(540px, 72vh, 760px);
  overflow: hidden;
}
.irn-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.irn-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(var(--irn-scrim-triplet), 0.90) 0%,
      rgba(var(--irn-scrim-triplet), 0.90) 18%,
      rgba(var(--irn-scrim-triplet), 0.62) 55%,
      rgba(var(--irn-scrim-triplet), 0) 100%
    ),
    rgba(var(--irn-scrim-triplet), 0.30);
}
.irn-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
}
/* The hero content cluster (plan 4 section 1): the shell carries the
   bottom-left composition itself (a column pushed to the band floor,
   items left-aligned), its min-height matching the band so the
   overlay fills the full image area. */
.irn-hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  min-height: clamp(540px, 72vh, 760px);
  padding-block: clamp(40px, 7vw, 88px);
}
.irn-hero-title {
  font-family: var(--irn-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--irn-ink);
  max-width: 15ch;
}
.irn-hero-promise {
  max-width: 46ch;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--irn-silver);
  margin: 18px 0 0;
}
.irn-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  margin: 26px 0 0;
}
.irn-hero-ctas .irn-textlink {
  color: var(--irn-ink);
  min-height: 48px;
  padding: 13px 0 14px;
}
@media (max-width: 699px) {
  .irn-hero-ctas { flex-direction: column; align-items: flex-start; }
  .irn-hero-ctas .irn-btn { width: 100%; }
}

/* The promise mega-surface (plan 4 section 2): the one full-width
   statement surfacing (the pinned A4 exception): a raised charcoal
   body with the 16px radius inside the shell, the band carrying no
   bench top border - the surface's own shape does the framing. The
   two promise lines ride the surface scale (Saira 600 ink), separated
   by a fixed 26px, no rules under them. */
.irn-promise { padding-block: clamp(56px, 9vw, 104px); }
.irn-promise .irn-shell {
  background: var(--irn-charcoal);
  border-radius: var(--irn-tile);
  padding: clamp(28px, 4vw, 44px);
}
.irn-promise-line {
  font-family: var(--irn-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.35;
  color: var(--irn-ink);
  max-width: 62ch;
  margin: 0;
}
.irn-promise-line + .irn-promise-line { margin-top: 26px; }

/* Split promise surfaces (plan 4 section 3 + plan 5 section 4): raised
   charcoal bodies (16px radius, the shared surface padding) carrying
   ONE shared 5fr 7fr column template. Copy always leads the DOM
   (mobile reads copy first); the plain grid drops copy into the 5fr
   column, and .irn-split-b forces it into the 7fr column so the wide
   slot swaps media to copy between rows. Below 900px every row stacks
   copy-over-media and the placement rules release. */
.irn-splits { padding-block: clamp(44px, 7vw, 72px); }
.irn-splits .irn-split + .irn-split { margin-top: 24px; }
.irn-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 24px;
  align-items: center;
  background: var(--irn-charcoal);
  border-radius: var(--irn-tile);
  padding: clamp(28px, 4vw, 44px);
}
.irn-split-b > .irn-split-copy { grid-column: 2; grid-row: 1; }
.irn-split-b > .irn-split-media { grid-column: 1; grid-row: 1; }
@media (max-width: 899px) {
  .irn-split { grid-template-columns: 1fr; }
  .irn-split-b > .irn-split-copy,
  .irn-split-b > .irn-split-media {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Figures: the 3:2 band crop via aspect-ratio (sources are 3:2, the
   crop is lossless for them), the 8px media radius, dark by
   construction; the portrait keeps its own 4:5. */
.irn-fig { margin: 0; }
.irn-fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--irn-radius);
}
.irn-fig-portrait img { aspect-ratio: 4 / 5; }

/* The owner pull quote (text-only on Home; with the portrait on The
   Shop). */
.irn-quote-text {
  font-family: var(--irn-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.42;
  color: var(--irn-ink);
  margin: 0 0 16px;
}
.irn-quote-name {
  font-family: var(--irn-body);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--irn-silver-dim);
  margin: 0;
}

/* The stats band: four cells over 1px inner light hairlines; 2x2 below
   900px with the separators placed by nth-child, 4-up above with the
   verticals only. The desktop top reset rides the grid-scoped
   .irn-stats-grid .irn-stat voice (0,2,0), the same specificity as the
   mobile .irn-stat:nth-child(n+3) separator, and the later file
   position wins the cascade: the 16/3 D2 repair (spec A9). The plain
   .irn-stat reset that served before lost at (0,1,0) and left the
   desktop row with top hairlines on cells 3 and 4 only (the uneven
   band the user flagged). The 2x2 mobile separators stay untouched.
   Numbers read white: yellow stays with verbs and edges. */
.irn-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.irn-stat {
  padding: clamp(22px, 3.5vw, 34px) clamp(16px, 2.5vw, 30px);
}
.irn-stat:nth-child(even) { border-left: 1px solid var(--irn-hairline); }
.irn-stat:nth-child(n+3) { border-top: 1px solid var(--irn-hairline); }
.irn-stat-number {
  font-family: var(--irn-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1.02;
  color: var(--irn-ink);
  letter-spacing: -0.01em;
}
.irn-stat-label {
  font-family: var(--irn-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--irn-silver-dim);
  margin-top: 8px;
}
@media (min-width: 900px) {
  .irn-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .irn-stats-grid .irn-stat { border-top: 0; }
  .irn-stat:nth-child(n+2) { border-left: 1px solid var(--irn-hairline); }
}

/* The warranty band: the trust centerpiece on a raised charcoal
   surface under a 4px yellow top edge (an edge, not text). */
.irn-warranty {
  background: var(--irn-charcoal);
  border-top: 4px solid var(--irn-yellow);
}
.irn-warranty-line {
  font-family: var(--irn-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.2;
  color: var(--irn-ink);
  max-width: 34ch;
  margin: 0 0 14px;
}
/* One of the two sanctioned yellow-as-text sites (plan 2 section 6:
   DM Sans 700 1rem, 12.9:1 on the field). */
.irn-warranty-echo {
  font-family: var(--irn-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--irn-yellow);
  margin: 0;
}

/* The book band (plan 4 section 7): the call to the lift on the field,
   then the two-verb rail: the call verb (the number rides the label)
   and the book verb, both yellow bars at the 56px rail voice, the
   full-width stack below 700. */
.irn-bookband-line {
  font-family: var(--irn-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.25;
  color: var(--irn-ink);
  max-width: 30ch;
  margin: 0 0 22px;
}
.irn-rail { display: flex; gap: 12px; max-width: 720px; }
.irn-rail .irn-btn-rail { flex: 1 1 0; }
@media (max-width: 699px) {
  .irn-rail { flex-direction: column; }
  .irn-rail .irn-btn-rail { width: 100%; }
}

/* The contact block: block links at the touch floor. */
.irn-contact-lines { display: block; margin: 0; }
.irn-contact-line {
  margin: 0;
  padding: 6px 0;
  color: var(--irn-silver);
}
.irn-contact-line a,
.irn-contact-lines .irn-contact-line a {
  display: inline-block;
  min-height: 44px;
  padding: 12px 0;
  color: var(--irn-silver);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.irn-contact-line a:hover,
.irn-contact-lines .irn-contact-line a:hover {
  color: var(--irn-ink);
  text-decoration-color: var(--irn-ink);
}

/* The deep footer (plan 3 section 6): the near-black band, the brand
   block + the two link columns (three columns at or above 900px,
   stacked below), then the hairline copyright strip. Plain text
   column heads; no social icons anywhere. */
.irn-footer {
  background: var(--irn-abyss);
  border-top: 1px solid var(--irn-hairline);
  padding-block: clamp(56px, 8vw, 96px);
}
.irn-footer-grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 900px) {
  .irn-footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: start;
  }
}
.irn-footer .irn-brand { color: var(--irn-ink); }
.irn-footer .irn-brand-word { font-size: 1.75rem; }
.irn-footer-brand { display: flex; flex-direction: column; gap: 6px; }
.irn-footer-prompt {
  color: var(--irn-silver);
  margin: 0;
}
.irn-footer-head {
  font-family: var(--irn-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--irn-silver-dim);
  margin: 0 0 14px;
}
.irn-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.irn-footer-col li { margin: 0; }
.irn-footer-col a {
  display: inline-block;
  min-height: 44px;
  padding: 8px 0;
  color: var(--irn-silver);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.irn-footer-col a:hover { border-bottom-color: var(--irn-yellow); }
.irn-footer-col p { margin: 0 0 10px; }
.irn-footer-copy {
  margin: clamp(30px, 5vw, 48px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--irn-hairline);
  color: var(--irn-silver-dim);
  font-size: 0.9rem;
}

/* Page hero (Services): the thin typographic band. */
.irn-pagehero { padding-block: clamp(52px, 9vw, 96px); }
.irn-pagehero-lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--irn-silver);
  max-width: 52ch;
  margin: 18px 0 0;
}

/* Statement heroes (The Shop, Book): the same thin voice. */
.irn-statement { padding-block: clamp(52px, 9vw, 96px); }
.irn-statement-line {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--irn-silver);
  max-width: 52ch;
  margin: 18px 0 0;
}

/* The service bands: numbered full-width bands on the raised split
   surfaces (the strict media alternation, re-voiced at the 16/3 D3
   round: 01 plain, 02 mirrored via .irn-split-b, 03 plain, 04 mirrored
   via .irn-split-b, 05 re-voiced to plain so the alternation holds all
   the way down). */
.irn-service .irn-band-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}
.irn-band-meta .irn-tab { margin: 0; }
.irn-band-line { max-width: 58ch; }
.irn-range {
  font-family: var(--irn-body);
  font-weight: 700;
  color: var(--irn-ink);
  margin: 0 0 10px;
}

/* The scan-code table (band 02's media callout), re-voiced (plan 4
   section 2): transparent rows sitting on the raised surface body,
   the hairline grid the only framing; header row at the small
   uppercase meta voice, silver cells, zero light surfaces anywhere. */
.irn-codetable {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-family: var(--irn-body);
  font-size: 0.9rem;
  margin: 20px 0 12px;
}
.irn-codetable th,
.irn-codetable td {
  border: 1px solid var(--irn-hairline);
  padding: 10px 12px;
  text-align: left;
  color: var(--irn-silver);
}
.irn-codetable thead th {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--irn-silver-dim);
  background: transparent;
}
.irn-codetable tbody th {
  font-family: var(--irn-display);
  font-weight: 700;
  color: var(--irn-ink);
  width: 88px;
}
.irn-codetable-line {
  font-size: 0.9rem;
  color: var(--irn-silver-dim);
  margin: 0;
}

/* The tread-depth note (band 04's typographic callout): a 2px yellow
    left edge (their edge-accent voice), silver on the field. */
.irn-treadnote {
  border-left: 2px solid var(--irn-yellow);
  padding: 12px 0 12px 14px;
  color: var(--irn-silver);
  max-width: 58ch;
  margin: 0 0 14px;
}

/* The warranty reminder (Services): the open echo band on the field
    under the hairline; the echo line + its textlink. */
.irn-warranty-lite-line {
  font-family: var(--irn-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.35;
  color: var(--irn-ink);
  max-width: 52ch;
  margin: 0 0 16px;
}

/* The process band / the numbered 3-step rows: full-width rows, numeral
   left, hairline separators between rows. Numerals read white. */
.irn-process { display: block; }
.irn-step {
  display: grid;
  grid-template-columns: clamp(64px, 9vw, 96px) 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
  padding-block: clamp(20px, 3vw, 30px);
}
.irn-step + .irn-step { border-top: 1px solid var(--irn-hairline); }
.irn-step-numeral {
  font-family: var(--irn-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1;
  color: var(--irn-ink);
}
.irn-step-title {
  font-family: var(--irn-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--irn-ink);
  margin: 2px 0 8px;
}
.irn-step-body { max-width: 62ch; }

/* The people rows: name + role + line, no boxes, no images. */
.irn-person { padding-block: clamp(18px, 2.6vw, 26px); }
.irn-person + .irn-person { border-top: 1px solid var(--irn-hairline); }
.irn-person-name {
  font-family: var(--irn-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--irn-ink);
  margin: 0 0 6px;
}
.irn-person-role { margin-bottom: 8px; }
.irn-person-line { margin: 0; color: var(--irn-silver); max-width: 58ch; }

/* The plain-facts / have-ready lines (plan 5): the promise-line voice
   (Saira 600 ink at 1.35rem) as a no-box stack: no rules, no
   surfaces, the lines carry their own 18px spacing. */
.irn-facts-line,
.irn-ready-line {
  font-family: var(--irn-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--irn-ink);
  margin: 0 0 18px;
  max-width: 58ch;
}

/* THE ESTIMATOR (Book): two segmented single-select rows + the readout.
   Buttons and readout only; no submit surface of any shape exists on
   this page. Seg buttons: charcoal at rest, the yellow fill + dark
   ink when pressed (the same verb paint as .irn-btn). */
.irn-est-lede {
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 26px;
}
.irn-seg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 24px;
}
@media (min-width: 700px) {
  .irn-seg-row { row-gap: 12px; }
}
.irn-seg-label {
  flex: 0 0 auto;
  min-width: 76px;
  font-family: var(--irn-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--irn-silver-dim);
}
.irn-seg {
  min-height: 48px;
  padding: 0 22px;
  background: var(--irn-charcoal);
  border: 1px solid var(--irn-hairline);
  border-radius: var(--irn-radius);
  color: var(--irn-silver);
  font-family: var(--irn-body);
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
}
.irn-seg:hover { color: var(--irn-ink); border-color: var(--irn-silver-dim); }
.irn-seg[aria-pressed="true"] {
  background: var(--irn-yellow);
  border-color: var(--irn-yellow);
  color: var(--irn-yellow-ink);
  font-weight: 700;
}
@media (min-width: 700px) {
  .irn-seg-label { padding-right: 8px; }
}
@media (max-width: 699px) {
  .irn-seg-label { flex-basis: 100%; }
  .irn-seg { flex-basis: 100%; }
}

/* The readout: the raised surface (the published "15 Years" side
   composition's voice, plan 5 section 2): charcoal body, 16px radius,
   border 0 (the surface shape does the framing; the R1 edge rules
   die). The range line rides the display voice at the pinned clamp;
   the vehicle word stays silver inside it. */
.irn-readout {
  background: var(--irn-charcoal);
  border-radius: var(--irn-tile);
  border: 0;
  padding: clamp(24px, 3.4vw, 40px);
  max-width: 100%;
}
.irn-readout-line {
  font-family: var(--irn-body);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--irn-silver);
  margin: 0 0 8px;
}
.irn-readout-svc { color: var(--irn-ink); font-weight: 700; }
.irn-readout-veh { color: var(--irn-silver); font-style: italic; }
.irn-readout-range {
  font-family: var(--irn-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--irn-ink);
  letter-spacing: -0.01em;
}
.irn-readout-meta {
  font-size: 0.975rem;
  color: var(--irn-silver-dim);
  margin: 0 0 14px;
}
.irn-readout-note { color: var(--irn-silver-dim); }
/* The second sanctioned yellow-as-text site (plan 2 section 6). */
.irn-readout-stand {
  font-family: var(--irn-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--irn-yellow);
  margin: 0;
}

/* Common questions (plan 5 section 2): native disclosure rows,
   hairline separators, summary rows at the 56px floor with the 1rem
   bold label; the mark carries an inline chevron stroke (silver, no
   glyph dependency) that turns a quarter-turn when the row opens;
   attribute-driven paint, no animation besides the mark. */
.irn-q { margin: 0; }
.irn-q + .irn-q { border-top: 1px solid var(--irn-hairline); }
.irn-q-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding-block: 14px;
  cursor: pointer;
  font-family: var(--irn-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--irn-ink);
  list-style: none;
}
.irn-q-summary::-webkit-details-marker { display: none; }
.irn-q-mark {
  flex: none;
  color: var(--irn-silver);
  line-height: 0;
}
.irn-q-mark svg { display: block; transition: rotate 0.15s; }
.irn-q[open] .irn-q-summary .irn-q-mark svg { rotate: 90deg; }
.irn-q[open] .irn-q-summary { padding-bottom: 6px; }
.irn-q-body {
  padding: 0 0 18px;
  color: var(--irn-silver);
  max-width: 62ch;
  margin: 0;
}

/* Focus rings: every interactive class carries a visible ring; the
   field-scope ring is yellow, the yellow-band scope uses the dark band
   ink so the ring reads on the band. */
.irn-btn:focus-visible,
.irn-btn-invert:focus-visible,
.irn-btn-rail:focus-visible,
.irn-textlink:focus-visible,
.irn-topbar-link:focus-visible,
.irn-contact-line a:focus-visible,
.irn-footer-col a:focus-visible,
.irn-footer .irn-brand:focus-visible,
.irn-seg:focus-visible,
.irn-q-summary:focus-visible {
  outline: 2px solid var(--irn-yellow);
  outline-offset: 2px;
}
.irn-nav .irn-brand:focus-visible,
.irn-nav-toggle:focus-visible{
  outline: 2px solid var(--irn-yellow-ink);
  outline-offset: 2px;
}
@media (min-width: 900px) {
  .irn-nav .irn-nav-links a:focus-visible {
    outline: 2px solid var(--irn-yellow-ink);
    outline-offset: 2px;
  }
}
@media (max-width: 899px) {
  .irn-nav .irn-nav-links a:focus-visible {
    outline: 2px solid var(--irn-yellow);
    outline-offset: 2px;
  }
}

/* Reduced motion: every transition this demo declares stops; anchor
   jumps stay instant (no smooth scrolling is ever declared). */
@media (prefers-reduced-motion: reduce) {
  .irn-btn,
  .irn-btn-invert,
  .irn-btn-rail,
  .irn-textlink,
  .irn-topbar-link,
  .irn-fig img,
  .irn-seg,
  .irn-contact-line a,
  .irn-footer-col a,
  .irn-nav-links a,
  .irn-nav-toggle,
  .irn-brand,
  .irn-q-mark svg,
  .irn-q-summary {
    transition: none;
  }
}