/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5
 * Hallmark · genre: editorial · macrostructure: Marquee Hero (photo-led)
 * Revision 2026-07-28: the split-diptych fold was replaced. Left-headline /
 * right-form-card is the single most-generated hero shape on the web, and
 * shipping it made a one-truck operator read as a template. The fold is now
 * the client's own photograph, full bleed, with a hard-edged ink plate set
 * off-grid over it. Photo leads; type follows.
 * H4 marquee knobs: media=full-bleed-photo, plate=hard-edge-ink, bleed=left-edge
 * F4 step-sequence knobs: numbering=01/02/03, layout=vertical-stack, connector=line
 * nav: N9 edge-aligned minimal · footer: Ft1 mast-headed · CTA: C4 sticky bottom bar
 * theme: custom · vibe: "warm workshop, rust and ink, plainspoken"
 * paper: oklch(95.5% 0.013 62) · accent: oklch(46% 0.150 38)
 * display: Barlow Condensed · body: Source Sans 3
 * axes: light / display-condensed-bold / warm
 * enrichment: E-real — client's own phone photography, full bleed, no stock
 * texture: paper tooth + dust + work-order ruling, behind content, banded stocks
 * caps discipline: display headings + actions only. Never nav, lists or answers.
 * studied: no · context: user-provided
 */

/* Cache-buster must be bumped here too. site.css?v=N only busts THIS file —
   an unversioned @import leaves the browser serving a stale tokens.css, which
   silently resolves every token to empty and drops the declarations that use
   them. Bump both together. */
@import url("../tokens.css?v=11");

/* ============================================================
   Base
   ============================================================ */

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

html, body {
  overflow-x: clip;            /* gate 34 — clip, never hidden */
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Safety net so the canvas is never bare. Body's background normally
     propagates to the canvas, but `overflow-x: clip` on both elements can
     leave an unpainted strip on very wide windows — which reads as the page
     being left-aligned when it is in fact centred. */
  background-color: var(--color-paper);
}

body {
  background-color: var(--color-paper);
  background-image: var(--paper-rule), var(--paper-tooth), var(--paper-dust);
  background-size: var(--paper-size);
  background-blend-mode: var(--paper-blend);
  /* All layers scroll with the sheet. `fixed` is deliberately NOT used here:
     combined with `overflow-x: clip` on html/body it can stop the texture
     painting across the full window, leaving bare white down the right-hand
     side — which makes a correctly centred page read as shoved to the left.
     It also costs scroll performance. Paper should travel with the paper. */
  background-attachment: scroll;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  /* room for the sticky call bar on phones */
  padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
}

@media (min-width: 60rem) {
  body { padding-bottom: 0; }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;          /* headers are roman — always */
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0;
  overflow-wrap: anywhere;     /* gate 51 */
  min-width: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

a { color: inherit; }

/* ============================================================
   Paper stocks

   The single flat tone across the whole page was what read as
   machine-made. Two fixes, together:

   1. Texture BEHIND content, never over it. The previous build laid a
      fixed multiply overlay across the viewport, which also sat on the
      truck photograph and dulled the one asset the page is built on.
      Texture belongs on the surface; the photo is not a surface.
   2. Banded stocks. A page printed on one uninterrupted sheet reads as
      generated. Sections alternate between two stocks so the eye
      registers separate pieces of paper.
   ============================================================ */

.stock {
  background-color: var(--color-paper);
  background-image: var(--paper-rule), var(--paper-tooth), var(--paper-dust);
  background-size: var(--paper-size);
  background-blend-mode: var(--paper-blend);
}

/* The second stock — very slightly darker, slightly warmer. Enough that
   the band edge is legible without announcing itself. */
.stock--2 {
  background-color: var(--color-paper-2);
  background-image: var(--paper-rule), var(--paper-tooth), var(--paper-dust);
  background-size: var(--paper-size);
  background-blend-mode: var(--paper-blend);
}

/* Ink bands take the tooth too, at lower strength — a dark section with no
   surface is the most obviously screen-native thing on a page. */
.stock--ink {
  background-color: var(--color-ink);
  background-image: var(--paper-tooth);
  background-size: 300px 300px;
  background-blend-mode: overlay;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  /* never transitioned — the ring is instant */
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.shell {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 4vw, 3rem);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-sm) var(--space-md);
  z-index: var(--z-nav);
}
.skip:focus { left: var(--space-md); top: var(--space-md); }

/* ============================================================
   N9 · Edge-aligned minimal nav
   Wordmark hard-left, phone hard-right, nothing between.
   ============================================================ */

.nav {
  border-bottom: var(--rule) solid var(--color-rule);
  background-color: var(--color-paper);
  background-image: var(--paper-rule), var(--paper-tooth), var(--paper-dust);
  background-size: var(--paper-size);
  background-blend-mode: var(--paper-blend);
}

.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

.nav__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.nav__mark b { color: var(--color-accent); font-weight: 700; }

.nav__tel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  text-decoration: none;
  white-space: nowrap;          /* gate 49 */
  border: var(--rule-thick) solid var(--color-ink);
  padding: 0.4rem var(--space-md);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav__tel:hover { background: var(--color-ink); color: var(--color-paper); }
}
.nav__tel:active { background: var(--color-ink); color: var(--color-paper); }

/* the number itself is hidden on the narrowest phones — the sticky bar owns it there */
.nav__tel span { display: none; }
@media (min-width: 30rem) { .nav__tel span { display: inline; } }

/* Second row — page links, still edge-aligned left. No hamburger: six short
   links wrap onto two lines on a phone and stay tappable. */
.nav__links {
  border-top: var(--rule) solid var(--color-rule-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
  padding-block: 0 var(--space-2xs);
}
@media (min-width: 40rem) {
  .nav__links { gap: 0 var(--space-lg); padding-block: var(--space-2xs) var(--space-xs); }
}

.nav__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  text-decoration: none;
  white-space: nowrap;              /* gate 49 */
  color: var(--color-ink-2);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-bottom: var(--rule-thick) solid transparent;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
@media (min-width: 40rem) {
  .nav__link { font-size: var(--text-xl); min-height: 44px; }
}

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--color-ink); border-bottom-color: var(--color-rule); }
}
.nav__link:active { color: var(--color-ink); }

.nav__link[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ============================================================
   The fold · his photograph, full bleed, with an ink plate on it

   Not a hero card beside a form. The most credible asset this business
   owns is a phone snapshot of a lettered truck at sunrise, so it gets the
   whole screen and the type sits on top of it in a hard-edged block —
   no gradient scrim, no rounded corners, no blur.
   ============================================================ */

/* The fold shares the page's centred column so the photograph, the plate and
   the nav all sit on the same left and right margins. */
.fold {
  position: relative;
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 4vw, 3rem);
  border-bottom: var(--rule) solid var(--color-rule);
}

/* Crop holds the lettered door in frame — that lettering is the whole
   reason this photograph is on the page. Never re-crop past it.

   The grade is deliberate. The original is shot straight into a hazy
   Texas sunrise, so it arrives flat and milky; a small contrast and
   saturation lift makes it read as a photograph rather than a washed
   placeholder. Nothing is added — only what the sun took out. */
.fold__img {
  width: 100%;
  height: 62vw;
  min-height: 16rem;
  max-height: 27rem;
  object-fit: cover;
  object-position: 24% 76%;
  filter: contrast(1.12) saturate(1.14) brightness(0.97);
}

/* The plate. Runs off the left edge of the screen; stops short of the right. */
.fold__plate {
  background-color: var(--color-ink);
  background-image: var(--paper-tooth);
  background-size: 300px 300px;
  background-blend-mode: overlay;
  color: var(--color-paper);
  padding: var(--space-xl) clamp(1.125rem, 4vw, 3rem) var(--space-lg);
}

.fold__title {
  font-size: var(--text-display);
  text-transform: uppercase;
  max-width: 15ch;
  letter-spacing: -0.03em;   /* display tracking, not body tracking */
  line-height: 0.98;
  /* No accent-coloured final phrase. Colour-on-the-last-two-words is the
     same tell as an italicised one — the emphasis here is size alone. */
}

.fold__sub {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  color: var(--color-rule);
  max-width: 44ch;
}

.fold__tel {
  margin-top: var(--space-lg);
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 11vw, 5.25rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--color-paper);
  white-space: nowrap;
  border-bottom: var(--rule-slab) solid var(--color-accent);
  padding-bottom: var(--space-2xs);
  width: fit-content;
  max-width: 100%;
  transition: color var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fold__tel:hover { color: var(--color-accent); }
}

.fold__terms {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-rule);
}
.fold__terms b { color: var(--color-paper); font-weight: 700; }

/* The three things every seller in this category is actually scanning for.
   They were dropped when the diptych fold was rebuilt; putting them back in
   the fold is a conversion fix, not decoration. Set as a hard strip, not
   pills or chips. */
.fold__proof {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule) solid color-mix(in oklch, var(--color-paper) 28%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-paper);
}
.fold__proof li { display: flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.fold__proof li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-accent);
  flex: none;
}

/* Overlay from 60rem.

   The previous build only overlaid above 82rem (1312px). Below that the plate
   stacked under the photograph, which on a 1280x800 or 1024x768 laptop pushed
   the phone number to 1050px — a quarter of a screen BELOW the fold, on four
   of the four laptop sizes measured. The phone number IS the business.
   Hallmark's hero space discipline requires headline, lede and primary CTA
   visible without scrolling, and caps the hero at 70-90% of the viewport;
   this fold was running at 122-127%.

   The photograph is shorter now so the whole fold fits. It gives up a little
   grandeur for the only thing on the page that earns money. */
@media (min-width: 60rem) {
  .fold { margin-bottom: var(--space-2xl); }

  .fold__img {
    height: min(72vh, 42rem);
    max-height: none;
  }

  /* The plate straddles two edges at once: the bottom of the photograph and
     the right of the screen. Sitting it flush-right, bled off-canvas, and
     hanging below the image is what keeps the fold from reading as a
     centred hero in a container. Its text still aligns to the page's
     right column — only the ink runs off. */
  .fold__wrap {
    position: absolute;
    left: clamp(1.125rem, 4vw, 3rem);
    right: clamp(1.125rem, 4vw, 3rem);
    bottom: calc(-1 * var(--space-2xl));
    display: flex;
    justify-content: flex-end;
  }
  /* Contained, not bled.

     The plate used to run off the right edge of the screen. Two problems with
     that: its right edge did not line up with the nav's "Call" button, so it
     read as misalignment rather than intent; and the width math used 100vw,
     which INCLUDES the scrollbar while the layout box excludes it — so on any
     machine showing a classic scrollbar the plate was ~15px wider than
     intended and its text no longer aligned to the page's right margin.

     It now sits inside the same centred column as everything else and shares
     the nav's right margin. No 100vw anywhere in the fold. */
  .fold__plate {
    width: clamp(24rem, 40%, 32rem);
    padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  }
  .fold__title { font-size: clamp(2.1rem, 3.1vw, 3.25rem); }
  .fold__sub   { font-size: var(--text-base); margin-top: var(--space-sm); }
  .fold__tel   { font-size: clamp(2.5rem, 4.4vw, 4rem); margin-top: var(--space-md); }
  .fold__proof {
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    font-size: var(--text-base);
    gap: var(--space-2xs) var(--space-md);
  }
}

/* ============================================================
   Contact sheet

   Researched against real operators, not templates. Junk Car Girls
   (junkcargirls.com) — an actual one-yard local outfit — runs 41
   photographs over 20 sections. This page ran ONE, across seven sections,
   with content stopping at 43% of the canvas. That gap is what reads as
   machine-made: a real working business has photographed itself to death,
   and a generated page has a single tasteful hero.

   No new photography existed, so these are seven genuine frames pulled
   from the two originals at 4000x3000 — the door lettering, the bedside,
   the boom, the toolboxes, the dually. That is what a real operator does
   with a shoot. It is not stock and it is not invented.

   Laid out as a proof sheet: irregular spans, tight seams, mixed crops.
   A uniform 3-across gallery of equal tiles is the tell being avoided.
   ============================================================ */

.strip {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rule-thick);
}

@media (min-width: 48rem) {
  .strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 11rem;
  }
  /* Spans follow each crop's real aspect ratio — a 2.76:1 frame in a tall
     slot means object-fit eats the subject, which is how the door lettering
     lost half its phrase on the first pass. Uneven on purpose, but never
     at the cost of the picture. */
  .strip > *:nth-child(1) { grid-column: span 4; }                    /* lettering  2.76:1 */
  .strip > *:nth-child(2) { grid-column: span 2; grid-row: span 2; }  /* cab        1.39:1 */
  .strip > *:nth-child(3) { grid-column: span 2; }                    /* boom       2.07:1 */
  .strip > *:nth-child(4) { grid-column: span 2; }                    /* wheel      1:1    */
  .strip > *:nth-child(5) { grid-column: span 2; }                    /* toolbox    1.60:1 */
  .strip > *:nth-child(6) { grid-column: span 2; }                    /* bedside    2:1    */
  .strip > *:nth-child(7) { grid-column: span 2; }                    /* cab wide   1.50:1 */
}

.strip figure { margin: 0; position: relative; background: var(--color-ink); }

.strip img {
  width: 100%;
  height: 100%;
  min-height: 9rem;
  object-fit: cover;
  display: block;
}

/* The lettering is the point of the whole sheet — never crop into the words. */
.strip > *:nth-child(1) img { object-position: 50% 55%; }

/* Captions sit on the frame, bottom-left, like a grease-pencil note on a
   proof. Only some frames carry one — labelling all seven reads catalogued. */
.strip figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: var(--space-2xs) var(--space-xs);
  max-width: 90%;
}

/* Secondary photographs. Snapshots, not museum pieces — no mat, no frame,
   caption set loose underneath. */
.plate { margin-top: var(--space-lg); }
.plate img { width: 100%; }
.plate figcaption {
  padding-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 44ch;
}

/* The oversized local number, used at the head of interior pages. */
.hero__call {
  margin-top: var(--space-lg);
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 7vw, 3.25rem);
  text-decoration: none;
  color: var(--color-ink);
  line-height: 1;
  border-bottom: var(--rule-slab) solid var(--color-accent);
  padding-bottom: var(--space-2xs);
  transition: color var(--dur-short) var(--ease-out);
}
.hero__call span { white-space: nowrap; }        /* gate 49 */
.hero__call small {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .hero__call:hover { color: var(--color-accent); }
}

/* ============================================================
   Quote form

   Deliberately not a card. A bordered, tinted, drop-shadowed panel with a
   progress bar is the universal AI "lead widget" — it reads as bolted on.
   This is just the next thing on the page, under a rule.
   ============================================================ */

.quote {
  border-top: var(--rule-slab) solid var(--color-accent);
  padding-top: var(--space-lg);
  max-width: 44rem;
}

.quote__head { padding: 0 0 var(--space-lg); }

.quote__step {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.quote__title {
  font-size: var(--text-3xl);
  margin-top: var(--space-2xs);
  text-transform: uppercase;
}

.bar {
  display: flex;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  max-width: 11rem;      /* an indicator, not a decorative full-width band */
}
.bar span {
  height: 4px;
  flex: 1;
  background: var(--color-rule);
  transition: background-color var(--dur-mid) var(--ease-out);
}
.bar span.is-done { background: var(--color-accent); }

.quote__body { padding: 0; }

.panel { display: none; }
.panel.is-active { display: block; }

/* Four across, not a 2×2 block. An even grid of equal tiles is the tell;
   these are sized to their words the way real buttons are. */
.opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.opt {
  flex: 0 1 auto;
  min-width: 8rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  text-transform: uppercase;
  background: transparent;
  border: var(--rule-thick) solid var(--color-ink);
  color: var(--color-ink);
  padding: var(--space-md) var(--space-lg);
  min-height: 64px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .opt:hover { border-color: var(--color-ink); }
}
.opt:active { transform: translateY(1px); }
.opt[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.fields { display: grid; gap: var(--space-md); }

.field label {
  display: block;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2xs);
}

.field input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-thick) solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  min-height: 52px;
  transition: border-color var(--dur-short) var(--ease-out);
}
.field input::placeholder { color: var(--color-muted); }
.field input:hover { border-color: var(--color-neutral); }
.field input[aria-invalid="true"] { border-color: var(--color-error); }

.field__err {
  display: none;
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-error);
}
.field input[aria-invalid="true"] ~ .field__err { display: block; }

.btn {
  width: 100%;
  max-width: 24rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;                 /* gate 49 */
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: var(--rule-thick) solid var(--color-accent);
  padding: var(--space-md);
  min-height: 60px;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { opacity: 0.75; cursor: progress; }

.reassure {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}

.back {
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
  background: none;
  border: 0;
  padding: var(--space-xs) 0;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .back:hover { color: var(--color-ink); }
}

.noscript {
  padding: var(--space-lg);
  font-size: var(--text-base);
}

/* ============================================================
   Sections
   ============================================================ */

.sec { padding-block: var(--space-3xl); }
.sec--tight { padding-block: var(--space-2xl); }
.sec--rule { border-bottom: var(--rule) solid var(--color-rule); }

/* Alternate stock. Sections sit on visibly different sheets so the page
   stops reading as one uninterrupted machine-printed surface. */
.sec--alt {
  background-color: var(--color-paper-2);
  background-image: var(--paper-rule), var(--paper-tooth), var(--paper-dust);
  background-size: var(--paper-size);
  background-blend-mode: var(--paper-blend);
  border-top: var(--rule) solid var(--color-rule);
}

/* vertical-stack section heads only — never tag-left/heading-right (gate 54) */
.sec__title {
  font-size: var(--text-display-s);
  text-transform: uppercase;
  max-width: 20ch;
}

.sec__lede {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  color: var(--color-ink-2);
  max-width: 56ch;
}

/* Two-column section body. Content was stopping at 43% of the canvas on
   every section, leaving the right half empty — which reads as a template
   with unfilled slots. Sections now carry their own evidence beside them. */
.split {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
  .split > figure { position: sticky; top: var(--space-lg); }
}

.split figure { margin: 0; }
.split figure img { width: 100%; display: block; }
.split figcaption {
  padding-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ---- F4 · step sequence, vertical stack with connector line ---- */

.steps {
  margin-top: var(--space-2xl);
  display: grid;
  gap: 0;
  max-width: 62rem;   /* rules stop where the prose stops */
}

.step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: var(--rule) solid var(--color-rule);
  position: relative;
}
.step:last-child { border-bottom: var(--rule) solid var(--color-rule); }

.step__n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.step h3 {
  font-size: var(--text-xl);
  text-transform: uppercase;
}

.step p {
  margin-top: var(--space-2xs);
  color: var(--color-ink-2);
  max-width: 60ch;
}

@media (min-width: 40rem) {
  .step { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-lg); }
  .step__n { font-size: var(--text-3xl); }
  .step h3 { font-size: var(--text-2xl); }
}

/* ---- What we buy ---- */

.buy {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}

@media (min-width: 60rem) {
  .buy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.buy__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0;
}
.buy__list li {
  padding-block: var(--space-sm);
  border-bottom: var(--rule) solid var(--color-rule);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
}

.note {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-paper-2);
  border-left: var(--rule-thick) solid var(--color-accent);
  font-size: var(--text-base);
  max-width: 52ch;
}

/* ---- Service area ---- */

.areas {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
  .areas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
}

.areas h3 {
  font-size: var(--text-lg);
  text-transform: uppercase;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule) solid var(--color-rule);
}

.areas ul { margin-top: var(--space-sm); }
.areas li {
  padding-block: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
}

/* ---- FAQ ---- */

.faq { margin-top: var(--space-xl); border-top: var(--rule) solid var(--color-rule); }

.faq details {
  border-bottom: var(--rule) solid var(--color-rule);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-md);
  padding-right: var(--space-xl);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  font-size: var(--text-2xl);
  color: var(--color-accent);
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--color-accent); }
}

.faq p {
  padding-bottom: var(--space-lg);
  color: var(--color-ink-2);
  max-width: 62ch;
}

/* ---- Closing call band ---- */

.band {
  background-color: var(--color-ink);
  background-image: var(--paper-tooth);
  background-size: 300px 300px;
  background-blend-mode: overlay;
  color: var(--color-paper);
  padding-block: var(--space-3xl);
}
.band h2 {
  font-size: var(--text-display-s);
  text-transform: uppercase;
  max-width: 18ch;
}
.band p { margin-top: var(--space-md); color: var(--color-rule); max-width: 48ch; }
.band__tel {
  margin-top: var(--space-xl);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 8vw, 3.5rem);
  text-decoration: none;
  color: var(--color-paper);
  white-space: nowrap;
  line-height: 1;
  border-bottom: var(--rule-thick) solid var(--color-accent);
  padding-bottom: var(--space-2xs);
}
@media (hover: hover) and (pointer: fine) {
  .band__tel:hover { color: var(--color-accent); }
}

/* ============================================================
   Interior pages — shared blocks
   ============================================================ */

/* Page head: title + lede, vertical stack. Same shape as .sec but the
   title steps up to display size because it is the page's only h1. */
.pagehead {
  padding-block: var(--space-2xl) var(--space-2xl);
  border-bottom: var(--rule) solid var(--color-rule);
}
.pagehead h1 {
  font-size: var(--text-display);
  text-transform: uppercase;
  max-width: 16ch;
}
.pagehead .sec__lede { max-width: 58ch; }

/* Category blocks — heading + a real sentence, not a bare list item.
   Used on what-we-buy and service-area. */
.defs { margin-top: var(--space-xl); }

.defs > div {
  padding-block: var(--space-lg);
  border-top: var(--rule) solid var(--color-rule);
  display: grid;
  gap: var(--space-2xs) var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
}
.defs > div:last-child { border-bottom: var(--rule) solid var(--color-rule); }

@media (min-width: 48rem) {
  .defs > div { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
}

.defs h3 {
  font-size: var(--text-xl);
  text-transform: uppercase;
}
.defs p { color: var(--color-ink-2); max-width: 62ch; }

/* Running prose — legal pages and the About narrative. */
.prose { margin-top: var(--space-lg); max-width: 66ch; }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 {
  font-size: var(--text-2xl);
  text-transform: uppercase;
  margin-top: var(--space-2xl);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-xl); text-transform: uppercase; margin-top: var(--space-xl); }
.prose p { color: var(--color-ink-2); }
.prose ul { list-style: none; }
.prose li {
  position: relative;
  padding-left: var(--space-lg);
  color: var(--color-ink-2);
}
.prose li + li { margin-top: var(--space-xs); }
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.85rem;
  height: var(--rule-thick);
  background: var(--color-accent);
}
.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: var(--rule-thick);
}
@media (hover: hover) and (pointer: fine) {
  .prose a:hover { color: var(--color-accent); }
}
.prose strong { color: var(--color-ink); font-weight: 700; }

/* Contact — the facts column beside the form. */
.contact {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

.facts { display: grid; gap: var(--space-lg); }
.facts > div { border-top: var(--rule) solid var(--color-rule); padding-top: var(--space-md); }
.facts dt {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.facts dd {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
}
.facts dd.is-plain {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  text-transform: none;
  color: var(--color-ink-2);
}

/* ============================================================
   Ft1 · Mast-headed footer
   ============================================================ */

.foot { padding-block: var(--space-2xl); }

.foot__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  text-transform: uppercase;
  line-height: 1;
}

.foot__tag {
  margin-top: var(--space-xs);
  color: var(--color-muted);
  max-width: 48ch;
}

.foot__nav {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule) solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
}

.foot__nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  text-decoration: none;
  white-space: nowrap;              /* gate 49 */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: var(--rule-thick) solid transparent;
  transition: border-color var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .foot__nav a:hover { border-bottom-color: var(--color-accent); }
}

.foot__row {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule) solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.foot__link {
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .foot__link:hover { color: var(--color-ink); }
}

/* ============================================================
   C4 · Sticky bottom call bar — phones only
   ============================================================ */

.callbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-top: var(--rule-thick) solid var(--color-accent-2);
  padding: var(--space-sm) var(--space-md);
  padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  min-height: 60px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.callbar small {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: none;
  opacity: 0.9;
}
.callbar:active { background: var(--color-accent-2); }

@media (min-width: 60rem) {
  .callbar { display: none; }
}

/* ============================================================
   Motion — one orchestrated entrance, nothing else
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .rise {
    opacity: 0;
    transform: translateY(12px);
  }
  .rise.is-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-long) var(--ease-out),
                transform var(--dur-long) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}