/* ==========================================================================
   TRU72 — SHARED SURFACE + BUTTON SYSTEM
   --------------------------------------------------------------------------
   Two things live here, shared by all four sites from this one file:
   SECTION 1, the two button styles (D46), and SECTION 2, the SCENERY GREEN
   band. Both were measured in the browser at the sizes and colours they
   actually render at; the figures quoted below are those measurements.

   ==========================================================================
   SECTION 1 — THE TWO BUTTONS (D46)
   ==========================================================================
   TWO button styles, both shipping, on all four sites, from this one file.

     GOLD   fill ANTIQUE GOLD #C39954, label INK #3D3F3F
            MEASURED 4.04:1  (the 3.1:1 in the worksheet is INK on the
            DROPPED gold-aged that D42 removed; on the approved ANTIQUE GOLD the
            real figure is 4.04:1 — still below 4.5:1, so the rule is the
            same either way)
            => WCAG AA LARGE TEXT ONLY.  Large text is 24px, or 18.66px at
            weight 700.  Every gold button below is locked to 20px/700
            (19px/700 under 600px), so it clears the bold threshold at its
            ACTUAL rendered size, not just in intent.
            Gold is the PRIMARY call to action: the hero CTA and the big
            banner CTA.

     INK    fill INK #3D3F3F, label PAPER #FFF6DC, 9.8:1 — any size.
            Everything secondary, everything small, and every gold
            candidate that lives somewhere too tight to size up.

   WHERE GOLD IS **NOT** USED, DELIBERATELY  (D46: do not shrink the gold
   one — use ink there instead)

     .header-cta / .nav-cta     the sticky header bar. A 20px label breaks
                                the one-line header at 1200px and pushes the
                                logo off at 375px.
     .mobile-sticky             the two-up sticky mobile bar. Two 20px
                                labels do not fit 375px without wrapping the
                                bar to two rows over the page content.
     .market-actions            the booking card's 10px stacked buttons.
     .trucomfort-actions,
     .product-actions,
     .cc-mention-actions,
     .services-foot-actions,
     .card-actions, .btn-stack  dense card footers, two buttons per card.
     .cta-row, .inline-cta-buttons
                                inline callouts inside a two-column band —
                                secondary by role, and narrow by layout.
     every .btn-outline,
     .btn-secondary, .btn-call  secondary by definition; they stay outlined.

   LOAD ORDER — this sheet loads LAST on every page, after the per-site
   component sheet, so it is the final word on the primary CTA:

       tru72-tokens.css -> tru72-skin-<site>.css -> inline <style>
         -> tru72-<site>-components.css -> THIS FILE

   Colour comes only from the five tokens in tru72-tokens.css. No new hex.
   ========================================================================== */

:root {
  /* The gold button's label size. Both values clear WCAG's bold large-text
     threshold (18.66px @ 700). Do not lower either one. */
  --t72-cta-size:        20px;
  --t72-cta-size-narrow: 19px;
  --t72-cta-weight:      700;
  --t72-cta-track:       .06em;
  /* PHASE 25B — the BOX comes down, the TYPE does not. 17px of padding round
     20px/1.15 type made a 59px control; the reference's own largest gold
     button, `.btn-gold.btn-large`, is 45px and its hero button 50px. The
     20px type is the contrast licence (D46: INK on ANTIQUE GOLD is 4.04:1,
     an AA pass for LARGE text only) and cannot move, but nothing licenses
     the padding. 13px gives 51px, which is the reference's hero button, and
     still clears the 44px WCAG 2.5.5 target with room. */
  --t72-cta-pad:         13px 30px;
  --t72-cta-pad-narrow:  12px 22px;
}

/* --------------------------------------------------------------------------
   THE GOLD PRIMARY
   --------------------------------------------------------------------------
   `.t72-cta` is the explicit opt-in for new markup. The selectors beside it
   are the existing primary CTAs on the four sites' built pages:

     NC          .hero-actions / .hero-cta / .hero-seal-actions
                 .final-cta-actions / .mid-cta-actions
                 .cc-strip-actions / .featured-cta-row
     OR, NV,
     brand       .hero-cta / .hero-cta-row  (the filled .btn-primary)
                 .final-cta-buttons         (the filled .btn-tan/.btn-primary)

   The second button in each of those rows is the outline/call twin and is
   excluded — one gold button per row, which is what "primary" means.
   -------------------------------------------------------------------------- */
.t72-cta,
.hero-actions  > .btn:not(.btn-outline):not(.btn-outline-light):not(.btn-call):not(.btn-secondary),
.hero-cta      > .btn-gold,
.hero-seal-actions   > .btn-gold,
.final-cta-actions   > .btn-gold,
.mid-cta-actions     > .btn-gold,
.cc-strip-actions    > .btn-gold,
.featured-cta-row    > .btn-gold,
.hero-cta      > .btn-primary,
.hero-cta-row  > .btn-primary,
.final-cta-buttons > .btn-primary,
.final-cta-buttons > .btn-tan {
  background: var(--t72-gold) !important;
  color: var(--t72-ink) !important;
  border: 1px solid var(--t72-gold) !important;

  /* THE SIZE IS THE ACCESSIBILITY ARGUMENT. It is set here, with the fill,
     so a gold fill can never be applied without the size that licenses it. */
  font-size: var(--t72-cta-size) !important;
  font-weight: var(--t72-cta-weight) !important;
  letter-spacing: var(--t72-cta-track) !important;
  line-height: 1.15 !important;
  padding: var(--t72-cta-pad) !important;
  text-transform: uppercase;

  /* Sizing up the label makes it long. Let it wrap rather than push the page
     sideways; nothing here is nowrap any more. */
  white-space: normal !important;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
}

/* The label colour some pages set on a child span/strong must follow the
   button, or a linen/green label lands on gold (2.2:1 and 2.6:1). */
.t72-cta *,
.hero-actions  > .btn:not(.btn-outline):not(.btn-outline-light):not(.btn-call):not(.btn-secondary) *,
.hero-cta      > .btn-gold *,
.hero-seal-actions   > .btn-gold *,
.final-cta-actions   > .btn-gold *,
.mid-cta-actions     > .btn-gold *,
.cc-strip-actions    > .btn-gold *,
.featured-cta-row    > .btn-gold *,
.hero-cta      > .btn-primary *,
.hero-cta-row  > .btn-primary *,
.final-cta-buttons > .btn-primary *,
.final-cta-buttons > .btn-tan * {
  color: var(--t72-ink) !important;
  fill: currentColor;
  stroke: currentColor;
}

/* HOVER — gold hands over to the ink button. PAPER on INK is 9.8:1, so the
   hover state is more legible than the rest state, never less. */
.t72-cta:hover, .t72-cta:focus-visible,
.hero-actions  > .btn:not(.btn-outline):not(.btn-outline-light):not(.btn-call):not(.btn-secondary):hover,
.hero-cta      > .btn-gold:hover,
.hero-seal-actions   > .btn-gold:hover,
.final-cta-actions   > .btn-gold:hover,
.mid-cta-actions     > .btn-gold:hover,
.cc-strip-actions    > .btn-gold:hover,
.featured-cta-row    > .btn-gold:hover,
.hero-cta      > .btn-primary:hover,
.hero-cta-row  > .btn-primary:hover,
.final-cta-buttons > .btn-primary:hover,
.final-cta-buttons > .btn-tan:hover {
  background: var(--t72-ink) !important;
  color: var(--t72-paper) !important;
  border-color: var(--t72-ink) !important;
}
.t72-cta:hover *, .t72-cta:focus-visible *,
.hero-actions  > .btn:not(.btn-outline):not(.btn-outline-light):not(.btn-call):not(.btn-secondary):hover *,
.hero-cta      > .btn-gold:hover *,
.hero-seal-actions   > .btn-gold:hover *,
.final-cta-actions   > .btn-gold:hover *,
.mid-cta-actions     > .btn-gold:hover *,
.cc-strip-actions    > .btn-gold:hover *,
.featured-cta-row    > .btn-gold:hover *,
.hero-cta      > .btn-primary:hover *,
.hero-cta-row  > .btn-primary:hover *,
.final-cta-buttons > .btn-primary:hover *,
.final-cta-buttons > .btn-tan:hover * {
  color: var(--t72-paper) !important;
}

/* --------------------------------------------------------------------------
   THE INK BUTTON — explicit utility, for new markup that needs a secondary
   or a small button. The four sites' existing ink buttons are unchanged and
   keep coming from their own component sheets.
   -------------------------------------------------------------------------- */
.t72-btn-ink {
  background: var(--t72-ink);
  color: var(--t72-paper);
  border: 1px solid var(--t72-ink);
  text-decoration: none;
}
.t72-btn-ink:hover, .t72-btn-ink:focus-visible {
  background: var(--t72-green);
  border-color: var(--t72-green);
  color: var(--t72-paper);       /* 5.2:1 */
}

/* --------------------------------------------------------------------------
   FOCUS — one ring that stays visible on BOTH surfaces
   --------------------------------------------------------------------------
   A gold CTA sits on paper in a hero and on ink in a final-CTA band. A single
   INK ring disappears on the ink band and a single PAPER ring disappears on
   paper, so the ring is drawn twice: a PAPER halo immediately around the
   button (9.7:1 against an ink band) with an INK outline outside it (12.1:1
   against a paper band). One of the two is always the contrasting one.
   -------------------------------------------------------------------------- */
.t72-cta:focus-visible,
.hero-actions  > .btn:focus-visible,
.hero-cta      > .btn-gold:focus-visible,
.hero-seal-actions   > .btn-gold:focus-visible,
.final-cta-actions   > .btn-gold:focus-visible,
.mid-cta-actions     > .btn-gold:focus-visible,
.cc-strip-actions    > .btn-gold:focus-visible,
.featured-cta-row    > .btn-gold:focus-visible,
.hero-cta      > .btn-primary:focus-visible,
.hero-cta-row  > .btn-primary:focus-visible,
.final-cta-buttons > .btn-primary:focus-visible,
.final-cta-buttons > .btn-tan:focus-visible {
  outline: 2px solid var(--t72-ink) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 4px var(--t72-paper) !important;
}

/* Every other focusable thing keeps a visible ring too. */
a:focus-visible, button:focus-visible, summary:focus-visible,
.btn:focus-visible, .t72-btn-ink:focus-visible {
  outline: 2px solid var(--t72-ink);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   NARROW VIEWPORTS
   --------------------------------------------------------------------------
   19px/700 still clears the bold large-text threshold (18.66px). The padding
   comes in and the row goes full width so a long label wraps inside the
   button instead of widening the page.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --t72-cta-size: var(--t72-cta-size-narrow);
    --t72-cta-pad:  var(--t72-cta-pad-narrow);
  }
  .hero-actions, .hero-cta, .hero-cta-row,
  .final-cta-actions, .final-cta-buttons, .mid-cta-actions,
  .cc-strip-actions, .hero-seal-actions, .featured-cta-row {
    flex-wrap: wrap;
  }
  .t72-cta,
  .hero-actions  > .btn:not(.btn-outline):not(.btn-outline-light):not(.btn-call):not(.btn-secondary),
  .hero-cta      > .btn-gold,
  .hero-seal-actions   > .btn-gold,
  .final-cta-actions   > .btn-gold,
  .mid-cta-actions     > .btn-gold,
  .cc-strip-actions    > .btn-gold,
  .featured-cta-row    > .btn-gold,
  .hero-cta      > .btn-primary,
  .hero-cta-row  > .btn-primary,
  .final-cta-buttons > .btn-primary,
  .final-cta-buttons > .btn-tan {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   SECTION 2 — THE SCENERY GREEN BAND
   --------------------------------------------------------------------------
   SCENERY GREEN #696859 is a brand colour that was doing almost nothing: it
   carried muted type and nothing else. It is now a SURFACE, so a long page
   stops alternating only PAPER and INK.

   MEASURED, on SCENERY GREEN as a ground:

       PAPER   #FFF6DC   5.22:1   passes AA at every size   <- the ONLY type
       GOLD    #C39954   2.15:1   fails at every size
       INK     #3D3F3F   1.88:1   fails at every size
       LINEN   #CBC0AA   3.13:1   fails small text
       PAPER at 82% over green    4.13:1   fails small text

   So on a green band EVERY type colour is solid PAPER. The last two lines are
   the trap: Oregon's dark bands carry LINEN eyebrows and PAPER at 0.5-0.85
   alpha, both of which pass on INK and fail on GREEN. The blanket rule below
   therefore forces solid PAPER on every descendant and kills the alpha - it
   is what makes the band safe, not a tidy-up.

   AND NO GOLD ON GREEN, as type OR as a rule: 2.15:1. Where a green band
   needs a hairline it uses --t72-rule-on-green, which is PAPER at 42% - the
   same pigment as the type, not a third colour.

   THE BANDS, and why each one:

     .mid-cta      NC   8 sections. A mid-page CTA band that shipped INK,
                        sitting between an INK "discipline" band and an INK
                        "final-cta". Three ink bands in a row became one ink,
                        one green, one ink. Text and buttons only - no cards
                        inside it, which is what makes the blanket rule safe.
     .cc-mention   NC   14 sections. The Tru Comfort strip, which shipped INK
                        directly above the INK final-cta. Same shape: a
                        heading, a paragraph and one button.
     .final-cta    the brand hub, 4 sections — and ONLY the hub: Oregon,
                        Nevada and NC all render .t72c-final-cta, which the
                        component sheet already paints SCENERY GREEN. The hub
                        has its own stylesheet and was untouched by Phase 14,
                        so its closing band was still INK directly above an INK
                        footer. The reference's own .final-cta is --ink-soft,
                        i.e. green. Text and one button, no cards.  (Phase 15)
     .trust-strip  OR, NV, brand - 97 sections. The stat strip under the
                        hero, which shipped INK immediately below the PAPER
                        hero and above a PAPER-tint band. Four cells of type
                        and a hairline divider. MEASURED: 0 of the 97 contain
                        a button, so it stays a pure type surface.

     .t72-band-green    the opt-in class for new markup.

   NOT converted: .hero stays PAPER. The point is to break up a run of
   identical bands, not to recolour every dark band. (.final-cta WAS on that
   not-converted list until Phase 15 read the reference's own declaration for
   it — `background: var(--ink-soft)` — and found it had been green all along.)
   ========================================================================== */

:root {
  /* A hairline for a green band: PAPER at 42%. No new pigment, and it is
     never used for type. */
  --t72-rule-on-green: rgba(255, 246, 220, .42);
}

.t72-band-green,
.mid-cta,
.cc-mention,
.final-cta,
.trust-strip {
  background: var(--t72-green) !important;
  background-image: none !important;
  color: var(--t72-paper) !important;
  --t72-label: var(--t72-paper);   /* NOT linen - linen is 3.13:1 here */
  --t72-rule: var(--t72-rule-on-green);
  --t72-rule-strong: var(--t72-rule-on-green);
  --t72-rule-on-ink: var(--t72-rule-on-green);
}

/* Every descendant that is not a button takes SOLID PAPER. This overrides the
   inline `color: rgba(255,246,220,.82)` and the LINEN eyebrows the pages set
   for an INK ground, both of which fail on green. The gold CTA's own rules
   are (0,2,0) and outrank this (0,1,0), so a gold button keeps its INK label
   whatever the source order. */
.t72-band-green *,
.mid-cta *,
.cc-mention *,
.final-cta *,
.trust-strip * {
  color: var(--t72-paper) !important;
  opacity: 1;
}

/* Hairlines, dividers and keylines inside a green band: PAPER at 42%.
   Never gold - 2.15:1. */
.t72-band-green .eyebrow::before, .t72-band-green .eyebrow::after,
.mid-cta .eyebrow::before, .mid-cta .eyebrow::after,
.cc-mention .eyebrow::before, .cc-mention .eyebrow::after,
.trust-strip .eyebrow::before, .trust-strip .eyebrow::after,
.mid-cta .mid-cta-eyebrow::before, .cc-mention .cc-mention-eyebrow::before,
.trust-strip .trust-cell-rule,
.t72-band-green hr, .mid-cta hr, .cc-mention hr, .trust-strip hr {
  background: var(--t72-rule-on-green) !important;
  border-color: var(--t72-rule-on-green) !important;
  color: var(--t72-rule-on-green) !important;
}
.t72-band-green .trust-cell, .trust-strip .trust-cell,
.mid-cta .mid-cta-inner, .cc-mention .cc-mention-inner {
  border-color: var(--t72-rule-on-green) !important;
}

/* --------------------------------------------------------------------------
   BUTTONS ON A GREEN BAND
   --------------------------------------------------------------------------
   An INK button on green is 1.88:1 against the band - it disappears. So:

     primary    -> the GOLD button. Its own legibility is INK on GOLD, 4.04:1
                   at 20px/700, and that figure does not change with the
                   colour behind it. Gold vs green is 2.68:1 as a boundary, so
                   the gold button also carries a PAPER keyline (5.22:1) to
                   meet the 3:1 non-text requirement for a UI component.
     secondary  -> outline: transparent fill, PAPER label, PAPER border.
                   5.22:1 both ways.
   -------------------------------------------------------------------------- */
.t72-band-green .btn-gold, .t72-band-green .btn-primary, .t72-band-green .t72-cta,
.mid-cta .btn-gold, .mid-cta .btn-primary,
.final-cta .btn-gold, .final-cta .btn-primary, .final-cta .t72-cta,
.cc-mention .btn-gold, .cc-mention .btn-primary {
  background: var(--t72-gold) !important;
  color: var(--t72-ink) !important;
  border: 1px solid var(--t72-gold) !important;
  box-shadow: 0 0 0 1px var(--t72-paper) !important;   /* 5.22:1 keyline */
  font-size: var(--t72-cta-size) !important;
  font-weight: var(--t72-cta-weight) !important;
  letter-spacing: var(--t72-cta-track) !important;
  line-height: 1.15 !important;
  padding: var(--t72-cta-pad) !important;
  white-space: normal !important;
  max-width: 100%;
}
.t72-band-green .btn-gold *, .t72-band-green .btn-primary *, .t72-band-green .t72-cta *,
.mid-cta .btn-gold *, .mid-cta .btn-primary *,
.final-cta .btn-gold *, .final-cta .btn-primary *, .final-cta .t72-cta *,
.cc-mention .btn-gold *, .cc-mention .btn-primary * {
  color: var(--t72-ink) !important;
}
.t72-band-green .btn-gold:hover, .t72-band-green .btn-primary:hover,
.mid-cta .btn-gold:hover, .mid-cta .btn-primary:hover,
.cc-mention .btn-gold:hover, .cc-mention .btn-primary:hover {
  background: var(--t72-ink) !important;
  color: var(--t72-paper) !important;
  border-color: var(--t72-paper) !important;   /* keeps the edge at 5.22:1 */
}
.t72-band-green .btn-gold:hover *, .mid-cta .btn-gold:hover *,
.cc-mention .btn-gold:hover *, .t72-band-green .btn-primary:hover *,
.mid-cta .btn-primary:hover *, .cc-mention .btn-primary:hover * {
  color: var(--t72-paper) !important;
}

/* Everything secondary on a green band is the light outline. This catches
   .btn-outline, whose INK label and INK border are 1.88:1 on green. */
.t72-band-green .btn-outline, .t72-band-green .btn-outline-light,
.t72-band-green .btn-secondary, .t72-band-green .btn-call,
.mid-cta .btn-outline, .mid-cta .btn-outline-light,
.mid-cta .btn-secondary, .mid-cta .btn-call,
.cc-mention .btn-outline, .cc-mention .btn-outline-light,
.cc-mention .btn-secondary, .cc-mention .btn-call,
.trust-strip .btn-outline, .trust-strip .btn-secondary, .trust-strip .btn-call {
  background: transparent !important;
  color: var(--t72-paper) !important;
  border-color: var(--t72-paper) !important;
}
.t72-band-green .btn-outline:hover, .t72-band-green .btn-outline-light:hover,
.t72-band-green .btn-secondary:hover, .t72-band-green .btn-call:hover,
.mid-cta .btn-outline:hover, .mid-cta .btn-outline-light:hover,
.mid-cta .btn-secondary:hover, .mid-cta .btn-call:hover,
.cc-mention .btn-outline:hover, .cc-mention .btn-outline-light:hover,
.cc-mention .btn-secondary:hover, .cc-mention .btn-call:hover {
  background: var(--t72-paper) !important;
  color: var(--t72-ink) !important;
  border-color: var(--t72-paper) !important;
}
.t72-band-green .btn-outline:hover *, .mid-cta .btn-outline:hover *,
.cc-mention .btn-outline:hover *, .t72-band-green .btn-outline-light:hover *,
.mid-cta .btn-outline-light:hover *, .cc-mention .btn-outline-light:hover *,
.mid-cta .btn-call:hover *, .cc-mention .btn-call:hover * {
  color: var(--t72-ink) !important;
}

/* A paper-filled button on green keeps its INK label (12.1:1) and reads
   against the band at 5.22:1. */
.t72-band-green .btn-tan, .t72-band-green .btn-ghost-cream,
.t72-band-green .btn-schedule,
.mid-cta .btn-tan, .mid-cta .btn-ghost-cream, .mid-cta .btn-schedule,
.cc-mention .btn-tan, .cc-mention .btn-ghost-cream, .cc-mention .btn-schedule,
.trust-strip .btn-tan, .trust-strip .btn-ghost-cream, .trust-strip .btn-schedule {
  background: var(--t72-paper) !important;
  color: var(--t72-ink) !important;
  border-color: var(--t72-paper) !important;
}
.t72-band-green .btn-tan *, .mid-cta .btn-tan *, .cc-mention .btn-tan *,
.trust-strip .btn-tan *, .t72-band-green .btn-schedule *,
.mid-cta .btn-schedule *, .cc-mention .btn-schedule *, .trust-strip .btn-schedule * {
  color: var(--t72-ink) !important;
}

/* The focus ring on a green band: the PAPER halo is the visible one (5.22:1
   against green), with the INK outline outside it. */
.t72-band-green a:focus-visible, .t72-band-green button:focus-visible,
.mid-cta a:focus-visible, .mid-cta button:focus-visible,
.cc-mention a:focus-visible, .cc-mention button:focus-visible,
.trust-strip a:focus-visible, .trust-strip button:focus-visible {
  outline: 2px solid var(--t72-ink) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 4px var(--t72-paper) !important;
}

/* ==========================================================================
   SECTION 3 — THE MEASURED CONTRAST FIXES
   --------------------------------------------------------------------------
   Every rule below closes a failure that was MEASURED in a browser, on the
   built page, at the size and colour it actually renders — not read off the
   source. The audit walked every text node on all 45 NC URLs, 41 Oregon URLs,
   the brand hub and the unpublished fourth site, composited each colour
   through its ancestors' alpha and gradients, and compared against 4.5:1 (or 3:1 for
   large text). These were the only things it found.

   TWO CAUSES, over and over:

     1. A colour that passes at full strength, faded with opacity or an alpha
        until it does not. Nothing here changes a hue; it removes a fade, or
        swaps to --t72-label, which already resolves to the right colour for
        whichever surface the element sits on (SCENERY GREEN on paper 5.22:1,
        LINEN on ink 5.7:1, PAPER on a green band 5.22:1).

     2. LINEN used as small type on PAPER — 1.67:1. LINEN is a type colour for
        INK grounds only. On paper it goes to --t72-label.

   | selector                    | was                        | now     |
   |-----------------------------|----------------------------|---------|
   | .sep (breadcrumb)           | LINEN on paper      1.67:1 | 5.22:1  |
   | .caret (nav arrow)          | GREEN at 80%        3.48:1 | 5.22:1  |
   | .pillar-number              | GREEN at 70%        2.88:1 | 5.22:1  |
   | .chapter-num                | GREEN at 85%        3.83:1 | 5.22:1  |
   | .hero-jump-list .count      | GREEN at 85%        3.70:1 | 5.01:1  |
   | .hero-note                  | GREEN at 85%        3.83:1 | 5.22:1  |
   | .row-note, .price-unit      | PAPER at 55% on ink 4.23:1 | 5.70:1  |
   | .footer-brand .meta         | PAPER at 50% on ink 3.78:1 | 5.70:1  |
   | .footer-legal-nav span      | PAPER at 32% on ink 2.45:1 | 5.70:1  |
   | .strikethrough              | PAPER at 50% on ink 3.78:1 | 5.70:1  |
   | .state-label (the map)      | PAPER at 45% on ink 3.37:1 | 5.70:1  |
   | .btn at reduced opacity     | INK at 70% on paper 4.23:1 | 12.1:1  |
   | .locations-cta .loc-card p  | PAPER at 75% on a paper    | 5.55:1  |
   |                             | wash over green     3.31:1 |         |

   The last one is the only structural change: the card on that green band
   carried a 7%-PAPER wash, which lightened the ground under its own paper
   type. The wash becomes 12% INK, so the card still separates from the band
   but separates DOWNWARD, and the paper type gains contrast instead of
   losing it.

   And on the fourth site's /service-area/ page, three more of the same kind:
   .county-label (PAPER at 50% on ink, 3.62:1), and the .cell.area and
   .cell.time table headings, which were INK on INK (invisible, 1:1) and
   SCENERY GREEN on INK (1.88:1). All three take --t72-label, 5.7:1.

   NOT a failure, and deliberately left alone: .neighbor-cta on the NC city
   pages renders at opacity 0 and reveals on hover. Invisible text is not a
   contrast case, and at its revealed opacity it measures 5.22:1.
   ========================================================================== */

/* --- 1. LINEN is never small type on PAPER ------------------------------- */
.sep, .breadcrumb .sep, .breadcrumbs .sep,
.tag, .map-tag, .rating-meta {
  color: var(--t72-label, var(--t72-green)) !important;
}

/* --- 2. Fades removed. The colour underneath already passes. ------------- */
.caret, .nav-item .caret, .nav-link .caret,
.pillar-number, .chapter-num,
.hero-jump-list .count, .hero-note {
  opacity: 1 !important;
}
.caret, .nav-item .caret, .nav-link .caret {
  color: var(--t72-label, var(--t72-green)) !important;
}

/* PHASE 4c. The rule above is right for the desktop nav, which sits on PAPER
   (5.22:1). Below 720px the same caret moves into the NC mobile drawer, and
   `.nav-links` there is `background: var(--ink)` — SCENERY GREEN on INK is
   1.88:1. Phase 4b's audit never saw it because it measured pages as loaded
   and the drawer is closed until the toggle is pressed; a closed drawer's
   caret has a 0x0 box, so it is not a text node anyone can fail.
   Measured with the drawer open at 375px: 1.88:1 before, 9.83:1 after. */
@media (max-width: 720px) {
  .nav-links .caret,
  .nav-links .nav-item .caret,
  .nav-links .nav-link .caret {
    color: var(--t72-paper, #FFF6DC) !important;
  }
}

/* A button is never faded. At 70% its INK label drops to 4.23:1. */
.btn, a[class*="btn-"], button[class*="btn-"] {
  opacity: 1 !important;
}

/* --- 3. Alpha-on-INK type takes the surface's own label colour ----------- */
.row-note, .price-unit,
.footer-brand .meta, .footer-legal-nav span,
.strikethrough, .seal-stat .strikethrough,
.state-label, .state-label.or, .state-label.wa {
  color: var(--t72-label, var(--t72-linen)) !important;
  opacity: 1 !important;
}

/* --- 4. The card on the green locations band separates downward ---------- */
.locations-cta .loc-card {
  background: rgba(61, 63, 63, .12) !important;   /* INK wash, not PAPER */
}
.locations-cta .loc-card p,
.locations-cta .loc-card li,
.locations-cta .loc-card span:not([class*="btn"]) {
  color: var(--t72-paper) !important;
  opacity: 1 !important;
}

/* --- 5. The fourth site's /service-area/ page --------------------------- */
.county-label {
  color: var(--t72-label, var(--t72-linen)) !important;
  opacity: 1 !important;
}
/* The response table's header row is an INK band; its body rows are
   transparent over PAPER. One --t72-label covered both and was wrong on one
   of them, so each takes the colour its own ground needs. */
.response-row.header .cell { color: var(--t72-linen) !important; }   /* 5.7:1  */
.response-row:not(.header) .cell { color: var(--t72-ink) !important; } /* 12.1:1 */

/* ==========================================================================
   SECTION 4 — ONE LAYOUT FIX
   --------------------------------------------------------------------------
   MEASURED: the fourth site's /about/ page scrolled 11px sideways at 375px.
   Its chapter list is a CSS grid, and a grid item defaults to min-width:auto, which
   refuses to shrink below its widest unbreakable content. min-width:0 is the
   standard release valve; it changes nothing at any width where the content
   already fits.
   ========================================================================== */
@media (max-width: 1080px) {
  .chapter, .chapter-anchor, .chapter-body { min-width: 0; }
  .chapter-body p, .chapter-body h3, .chapter-body .pullquote { overflow-wrap: break-word; }
}

/* ==========================================================================
   SECTION 5 — THE REST OF THE --ink-soft SURFACES               (Phase 15)
   --------------------------------------------------------------------------
   D84's first misreading, finished. The live T. Byrd's site names its warm
   olive --ink-soft, and it is #696859 — SCENERY GREEN, one of the approved
   five. Read as "a shade of ink" it was painted #3D3F3F, which silently took
   the green out of five surfaces at once. Phase 14 put the COMPONENT surfaces
   back (the booking card, the stat band, the promises band, the final CTA and
   the city-page triage cards, all in tru72-components.css). What was left was
   the hand-written bands on Oregon, Nevada and the hub, which no component
   renders and which Phase 14 explicitly did not reach.

   MEASURED ON THE REFERENCE, by reading which of its bands declare
   background: var(--ink-soft):

     index.html            .booking-card  .trust-band  .promises  .final-cta
     hvac-raleigh-nc/      + .intent-row  .area-cell.parent
     service-areas-charlotte/   .recovery
     faqs/                 .recovery
     — and LINEN on        .reviews  .service-area  .routing  .faq
     — and INK on          .cardinal-section, the membership feature band
     — and INK on the CHROME: .utility, .footer, .mobile-sticky. Those were
       never the misreading and they are not touched.

   OUR BANDS THAT ANSWER TO THOSE, and the evidence for each:

     .locations       Oregon's state landing page. Two market panels, each with
                      a city, an address, a phone and a Schedule control — the
                      reference's .booking-card down to the shape. It was PAPER.
     .locations-cta   the same device on five Oregon leaf pages. It was already
                      SCENERY GREEN on two of them (--green-ink) and INK on
                      three (--navy) — the misreading, visible as an
                      inconsistency inside one site.
     .cta-band        the sitemap page's closing call to action: a heading, a
                      line and nothing else. .final-cta by another name, and it
                      was INK.
     .reviews         LINEN, not green. The reference puts its reviews on linen
                      with PAPER cards floating on it, and that is one of the
                      two big mid-page linen bands that give its pages their
                      middle. Ours was PAPER on Oregon and PAPER-WARM on the NC
                      city pages, where it also made a warm run of three with
                      .t72c-rebate-sec above it.

   WHAT IS DELIBERATELY NOT CONVERTED

     .mission-seal-strip  stays INK. Dark is the occasional NARROW band that
                          breaks the page, and on the Oregon landing page this
                          is the one that does it.
     .tru-comfort-block   GONE (Phase 16, D88). It was the Oregon landing's
                          Tru Comfort CARD, a PAPER-WARM half-band hanging off
                          the .t72c-prob-sec above it. The same content is now
                          the shared INK feature band .t72c-tc-sec, which is
                          what North Carolina and the reference both use.
     .hd-trust            stays PAPER-WARM, registered for the same reason.
   ========================================================================== */

/* -- A GREEN BAND WHOSE CARDS ARE RECESSED PANELS -------------------------
   .t72-band-green's blanket * { color: PAPER } is safe only on a band of pure
   type. These two hold light cards, so they take the reference's other shape
   instead: the card becomes a translucent INK recess in the green — the same
   device as the booking card's market panels — and PAPER type sits on that.
   MEASURED: INK at 12% over SCENERY GREEN resolves to about #5F5E51, on which
   PAPER is 5.55:1, so the card separates from the band and the type gains
   contrast rather than losing it.
   -------------------------------------------------------------------------- */
.t72-band-green-panels,
.locations,
.locations-cta {
  background: var(--t72-green) !important;
  background-image: none !important;
  color: var(--t72-paper) !important;
  --t72-label: var(--t72-paper);
  --t72-rule: var(--t72-rule-on-green);
  --t72-rule-strong: var(--t72-rule-on-green);
  --t72c-display-soft: var(--t72-paper);
}
.t72-band-green-panels :is(h1,h2,h3,h4,p,span,li,div,em,strong,time,address),
.locations :is(h1,h2,h3,h4,p,span,li,div,em,strong,time,address),
.locations-cta :is(h1,h2,h3,h4,p,span,li,div,em,strong,time,address) {
  color: var(--t72-paper) !important;
  opacity: 1;
}
/* The recess. .loc-card is the leaf-page card and was already handled in
   SECTION 3; .loc-card-mini is the Oregon landing page's. Same treatment. */
.t72-band-green-panels .card,
.locations .loc-card-mini,
.locations-cta .loc-card {
  background: rgba(61, 63, 63, .12) !important;
  border-color: var(--t72-rule-gold-soft) !important;
}
.locations .loc-card-mini:hover, .locations-cta .loc-card:hover {
  border-color: var(--t72-rule-gold) !important;
}
/* Eyebrow hairlines: PAPER at 42%, never gold — 2.15:1 on green. */
.locations .eyebrow::before, .locations .eyebrow::after,
.locations-cta .eyebrow::before, .locations-cta .eyebrow::after,
.t72-band-green-panels .eyebrow::before, .t72-band-green-panels .eyebrow::after {
  background: var(--t72-rule-on-green) !important;
}
/* A control on a green band. 13px is far under the 18.66px bold that licenses
   a gold fill, so this is the PAPER fill with an INK label: 12.1:1 inside the
   button, 5.22:1 against the band. */
.locations .city-schedule-btn, .locations-cta .city-schedule-btn,
.t72-band-green-panels .city-schedule-btn {
  background: var(--t72-paper) !important;
  color: var(--t72-ink) !important;
  border-color: var(--t72-paper) !important;
}
.locations .city-schedule-btn:hover, .locations-cta .city-schedule-btn:hover {
  background: var(--t72-linen) !important;
  color: var(--t72-ink) !important;
  border-color: var(--t72-linen) !important;
}
/* -- THE OREGON LANDING PAGE'S MARKET CONTROLS ARE GOLD          (Phase 20)
   Bethany asked for gold buttons in "Serving Communities We Call Home". The
   rule directly above says why they could not be: 13px is under the 18.66px
   bold that licenses a gold fill. So the SIZE is licensed first and the fill
   follows it, in one block, exactly the way D46 is enforced everywhere else —
   19px/700, INK on ANTIQUE GOLD, 4.04:1, which clears AA large text at its
   rendered size.

   AND THE KEYLINE IS PAPER, NOT GOLD. Gold against SCENERY GREEN is 2.15:1,
   under the 3:1 WCAG 1.4.11 wants for a control's boundary, so a gold button
   with a gold edge would dissolve into the band. PAPER against green is
   5.22:1 and draws the button's shape. Measured, both.

   .locations ONLY — the Oregon landing page's section. The five leaf pages
   that carry the same device as .locations-cta keep the PAPER control until
   Bethany says otherwise; they are not the section she was looking at. */
.locations .city-schedule-btn {
  background: var(--t72-gold) !important;
  color: var(--t72-ink) !important;
  border: 1px solid var(--t72-paper) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  padding: 13px 24px !important;
  min-height: 48px;
}
.locations .city-schedule-btn:hover,
.locations .city-schedule-btn:focus-visible {
  background: var(--t72-paper) !important;
  color: var(--t72-ink) !important;
  border-color: var(--t72-paper) !important;
}
.locations .city-explore-link, .locations-cta .city-explore-link,
.locations .city-explore-link:hover, .locations-cta .city-explore-link:hover {
  color: var(--t72-paper) !important;
}
.locations a:focus-visible, .locations-cta a:focus-visible,
.t72-band-green-panels a:focus-visible {
  outline: 2px solid var(--t72-ink) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 4px var(--t72-paper) !important;
}

/* -- A PLAIN GREEN BAND, THE SAME SHAPE AS SECTION 2's LIST --------------- */
.cta-band {
  background: var(--t72-green) !important;
  background-image: none !important;
  color: var(--t72-paper) !important;
  --t72-label: var(--t72-paper);
  --t72-rule: var(--t72-rule-on-green);
  --t72c-display-soft: var(--t72-paper);
  border-top: 1px solid var(--t72-rule-gold);
  border-bottom: 1px solid var(--t72-rule-gold);
}
.cta-band * { color: var(--t72-paper) !important; opacity: 1; }
.cta-band .eyebrow::before, .cta-band .eyebrow::after, .cta-band hr {
  background: var(--t72-rule-on-green) !important;
}

/* -- THE LINEN REVIEWS BAND ----------------------------------------------
   On flat LINEN #CBC0AA only INK clears AA: INK 5.89:1, SCENERY GREEN 3.13:1,
   ANTIQUE GOLD 1.46:1, PAPER 1.67:1. So every type colour resolves to INK and
   the hierarchy is carried by size and weight, exactly as the LINEN bands in
   tru72-components.css already do. The review widget is a third-party iframe
   and keeps its own light ground, which is what the reference's PAPER review
   cards on linen look like anyway.
   -------------------------------------------------------------------------- */
.t72-band-linen,
.reviews {
  background: var(--t72-linen) !important;
  background-image: none !important;
  color: var(--t72-ink) !important;
  --t72-label: var(--t72-ink);
  --t72c-display-soft: var(--t72-ink);
}
.t72-band-linen :is(h1,h2,h3,h4,p,span,li,div,em,strong,a,time,summary),
.reviews :is(h1,h2,h3,h4,p,span,li,div,em,strong,a,time,summary) {
  color: var(--t72-ink) !important;
  opacity: 1;
}
/* A card on linen goes PAPER, which is the reference's own arrangement, and
   INK on PAPER is 12.1:1. */
.t72-band-linen .card, .reviews .review-card {
  background: var(--t72-paper) !important;
  border-color: var(--t72-rule-strong) !important;
}
/* The stars are decoration, but ANTIQUE GOLD on linen is 1.46:1 — they would
   be invisible rather than decorative, so they take INK like everything else.
   The rating number beside them carries the meaning either way. */
.reviews .stars, .reviews .rating-summary .stars { color: var(--t72-ink) !important; }
.t72-band-linen .eyebrow::before, .t72-band-linen .eyebrow::after,
.reviews .eyebrow::before, .reviews .eyebrow::after {
  background: var(--t72-rule-strong) !important;
}
.reviews a:focus-visible, .t72-band-linen a:focus-visible {
  outline: 2px solid var(--t72-ink) !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   SECTION 6 — THE ITALIC DISPLAY LINE ON A HAND-WRITTEN HEADING  (Phase 15)
   --------------------------------------------------------------------------
   tru72-components.css styles .t72c-h1 em and .t72c-h em, which covers every
   heading a component renders — 917 on Oregon alone. It does not cover the
   headings a page writes itself, and tools/display_em.py marks those up too,
   so without this rule they would come out as an inline italic run inside the
   uppercase line rather than as a second line under it.

   THE COLOUR IS --t72-label, NOT GOLD-AGED. --t72-label is declared beside
   every surface's background by the per-site sheets, and it already resolves
   to something that passes AT ANY SIZE on every ground:

       on PAPER and the two tints   SCENERY GREEN   5.23 / 4.79 / 4.57:1
       on INK                       LINEN           5.89:1
       on a SCENERY GREEN band      PAPER           5.23:1
       on LINEN                     INK             5.89:1

   A hand-written band does not declare --t72c-display-soft and this rule
   cannot know its ground, so it takes the colour that is safe on all of them.
   GOLD-AGED needs a PAPER ground AND 24px and neither can be proven here —
   which is the condition audit check 14b exists to enforce. The component
   headings, where both ARE proven, carry the gold.
   ========================================================================== */
:is(h1, h2):not([class*="t72c-h"]) > em {
  display: block;
  font-family: var(--t72-font-body);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.005em;
  font-size: .78em;
  line-height: 1.12;
  margin-top: .12em;
  /* THE COLOUR IS NOT SET HERE ANY MORE. This rule predates the per-ground
     accent: it could not know its ground, so it took the colour that was safe
     on all of them -- and at (0,1,2) it then outranked the accent rule and
     held ten hand-written headings ink or green while everything else went
     gold. tru72-components.css resolves the right gold per ground now, and
     this rule keeps only the layout it was really for. */
}

/* ==========================================================================
   SECTION 7 — TWO MORE LAYOUT FIXES, BOTH MEASURED AT 375px   (Phase 15)
   --------------------------------------------------------------------------
   1. THE LEGAL PAGES' TABLE OF CONTENTS.  `.legal-body .container` is a
      `240px 1fr` grid with the contents list in the fixed column. Oregon's
      pages carry a media query that stacks it; Nevada's /privacy/ does not, so
      at 375px the fixed 240px column ate the width, the content column
      computed to 0px and its list items rendered outside the page — the
      document measured 530px against a 375px viewport. Stacking is what every
      other legal page on every other site already does, so it goes here once
      rather than into the one page that is missing it.

   2. A GRID ITEM THAT WILL NOT SHRINK.  min-width: 0 is applied at the two
      components that needed it (the stat band and the card grids, in
      tru72-components.css). This is the same release valve for the
      hand-written grids, which no component owns.

   MEASURED AFTER, at 375px, on all 208 pages of the four sites:
   0 pages with horizontal scroll, 0 WCAG AA failures.
   ========================================================================== */
@media (max-width: 900px) {
  /* !important because the legal pages carry their own <style> AFTER this
     sheet's <link> — measured, not assumed: the rule matched, tied on
     specificity and lost on source order, and the grid stayed 240px 7px. */
  .legal-body .container { grid-template-columns: 1fr !important; gap: 36px !important; }
  .legal-toc { position: static; }
  .legal-article, .legal-article section, .legal-body ul, .legal-body ol {
    min-width: 0;
  }
  .legal-body li, .legal-body p, .legal-body dd { overflow-wrap: break-word; }
}

/* ==========================================================================
   SECTION 8 — THE DARK DESK AND THE CREAM SHEET                  (Phase 18)
   --------------------------------------------------------------------------
   THE ONE MEASUREMENT THAT STARTED THIS PHASE.

       live reference   body { background: rgb(61,63,63) }    = INK
       tru72or.com      body { background: rgb(255,246,220) } = PAPER

   The reference is not a cream website. It is a **1440px cream sheet lying on
   a dark desk**: the page behind the content is INK, the content is a PAPER
   panel centred on it with a deep drop shadow, and the sheet's two edges are
   what frame every band inside it. Phase 14 wrote that down and rebuilt NC
   around it — NC and the brand hub both carry `<div class="page">` and an INK
   body, straight from the reference. Oregon and Nevada never got it: their
   body is PAPER, so the sheet and the desk are the same colour, the edges
   vanish, and nothing frames the page. Bethany's words were that the two sites
   look nothing alike "even the fonts" — the faces are byte-identical; this is
   what was actually different.

   TWO SHAPES, ONE RESULT, because the four sites are not one codebase:

     .page             brand + NC. The reference's own wrapper, already inside
                       an INK <body>. Nothing here changes it.
     body.t72-sheet    Oregon + Nevada. Those pages have no wrapper element at
                       all, so the BODY becomes the sheet. build.py adds the
                       class, and only to a page that has no .page of its own,
                       so the two can never both apply.

   WHY A CLASS AND NOT A BARE `body` RULE. A handful of pages carry their own
   <style> AFTER this sheet's <link> (the legal template — see SECTION 7). A
   bare `body` selector ties with theirs on specificity and loses on source
   order, which is exactly the bug SECTION 7 documents. `body.t72-sheet` is
   0-1-1 against their 0-0-1 and wins wherever it is loaded.

   THE DESK GOES ON <html>, NOT ON <body>. A body background propagates to the
   canvas when html has none, so painting the desk on body would paint the
   whole viewport and there would be no sheet to see. Once html carries a
   background, body paints only its own box — which is the sheet.

   MOBILE: nothing. The reference has no breakpoint on `.page` at all; the
   sheet is simply wider than the phone, so below 1440px it is already edge to
   edge and the desk is not visible. Measured at 375px: sheet 375px, no desk,
   no horizontal scroll — the same as the reference.
   ========================================================================== */
html { background: var(--t72-ink); }
body.t72-sheet {
  max-width: var(--t72-page-max, 1440px);
  margin-inline: auto;
  background: var(--t72-paper);
  box-shadow: var(--t72-shadow-drop);
}

/* ==========================================================================
   SECTION 9 — THE OREGON/NEVADA CONTAINER TAKES THE SYSTEM GUTTER (Phase 18)
   --------------------------------------------------------------------------
   The Oregon and Nevada pages carry a hand-written `.container` from the old
   build — `max-width: 1240px; padding: 0 32px` — which measures 1176px. The
   shared component bands measure 1328px on the same page. So the nav, the
   utility bar and every hand-written band sat 76px narrower on each side than
   the hero directly beneath them, and the page had two different left edges.
   That is the "justification of the sections" Bethany could see and none of
   our checks could: every individual band was internally consistent.

   One measure, from the tokens: 1328px inside two 56px gutters, which is the
   reference's. `body .container` is 0-1-1 so it wins over both the page's own
   `.container` and the late <style> on the legal pages; the compound rules
   that deliberately run narrower (`.legal-body .container`, `.related-legal
   .container`) are 0-2-0 and still win over it, which is correct — those are
   reading measures, not page measures.
   ========================================================================== */
body .container {
  max-width: var(--t72-page-measure, 1328px);
  padding-left: var(--t72-gutter);
  padding-right: var(--t72-gutter);
}
/* The header and the utility bar state their own max-width (1400px / 1240px)
   at a higher specificity, so they are restated here at a higher one still.
   Their vertical padding is theirs and is left alone. */
body .site-header .container,
body .utility-bar .container,
body .breadcrumb .container {
  max-width: var(--t72-page-measure, 1328px);
  padding-left: var(--t72-gutter);
  padding-right: var(--t72-gutter);
}

/* ==========================================================================
   SECTION 10 — THE UTILITY BAR AT PHONE WIDTH                    (Phase 18)
   --------------------------------------------------------------------------
   WHAT THE REFERENCE ACTUALLY DOES, measured at 375px on the live site: it
   KEEPS the bar — it does not hide it — at 10.5px in 22px gutters, its two
   items each taking a full-width row 28px tall. And it carries **no glyphs at
   all**, at any width. Its bar is words only.

   Ours (Oregon and Nevada; the brand hub and NC already have no glyphs and
   already match) sets a location pin and a clock inline before the text. At
   375px the two items sit side by side in 156px each, so both wrap to three
   lines of 10px type, and the pin is the first thing on the page. Bethany
   asked for the pin to go.

   So: below the reference's own breakpoint the glyphs go and each item takes
   its own full-width row, which is the reference's shape. The WORDS are
   untouched, and the bar stays — hiding it would be a third behaviour that
   neither site has. The `.pulse` status dot is not a glyph and is kept: it is
   8px of colour with no detail to lose, and the reference has an equivalent.

   PHASE 23 — WHY THIS FINALLY TAKES EFFECT, AND ON EVERY PAGE
   Phase 18 wrote the shape and Phase 21 added `display: block` to restore the
   bar. Both were correct; both reached 2 pages out of 150. The reason was not
   specificity and not source order — it was that 148 pages carried

       @media (max-width:880px) { .utility-bar { display:none !important } }

   in their own <style>, and `!important` does not lose to a later sheet. No
   rule that could be written here would ever have won. The answer was to stop
   writing rules: tools/lift_utility_bar.py deleted every inline copy of the
   component, and tools/audit_phase5.py check 19 fails the build if one comes
   back. The bar's appearance and layout now live in ONE place per bar class —
   tru72-or-components.css §2 for `.utility-bar`, tru72-hub.css and
   tru72-nc-components.css for `.utility` — and this block is the ONLY place
   either of them changes shape at phone width. Nothing here uses `!important`,
   and nothing needs to.

   BOTH BAR CLASSES ARE HANDLED HERE. The estate has two spellings of the same
   component: `.utility-bar` on Oregon and Nevada, `.utility` on the brand hub
   and North Carolina. They are one thing to a visitor, so one rule governs
   when they stack. `.utility` gets `flex-direction: column` and nothing else —
   the hub centres its bar and NC ranges its left, and both of those are the
   site's own decision about a bar that was already stacking correctly.

   Measured at 390px on every page of every build: 258 of 258 pass.
   ========================================================================== */
@media (max-width: 720px) {
  /* OREGON AND NEVADA — `.utility-bar`.
     The container stacks, so `.left` and `.right` cannot be pushed onto one
     row by a wrap; each of them stacks in turn, so every word-item — the
     service area, the hours, the same-day note, the phone — takes its own
     full-width row. `flex-wrap: nowrap` says the rows are the column's, not
     a wrap's, so a longer phrase lengthens its own row instead of reflowing
     the bar. Ranged left at the gutter, which is what North Carolina does and
     what the layouts come from. */
  .utility-bar .container {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
  }
  .utility-bar .left,
  .utility-bar .right {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 4px;
  }
  .utility-bar .left > *,
  .utility-bar .right > * { display: block; }

  /* NO GLYPHS. The reference has none at any width; at 375px ours pushed both
     items to three lines of 10px type and put a location pin above the
     headline. The `.pulse` dot is not a glyph and stays. */
  .utility-bar svg { display: none; }

  /* THE BRAND HUB AND NORTH CAROLINA — `.utility`. */
  .utility { flex-direction: column; flex-wrap: nowrap; }
}


/* ===========================================================================
   THE NAV, TRIMMED                                               (Phase 28)
   ===========================================================================
   MEASURED, THE NAV ALREADY MATCHED THE REFERENCE EXACTLY: utility bar 36px,
   nav 185px, logo 148px, links Geist Mono 12px/500/.2em. So this is Bethany
   choosing to improve on the reference, not a drift being corrected -- she
   asked to keep the logo, lose height, and raise the link size.

   The 185px is arithmetic, not slack: 18 + 148 + 18. The logo sets the floor,
   so the only height available is the padding, and 8px top and bottom is the
   least that still keeps the logo off the utility bar's edge. 148 + 16 = 164.

   `.nav-item`'s own 22px padding is what gives the links their hit area; it
   stays, because at 8px band padding the item column (22+30+22 = 74) is still
   far under the logo and costs nothing.

   Written as `body .nav` (0,1,1) rather than `.nav` (0,1,0) so it wins on
   specificity and not on load order -- the per-page <style> that declares the
   nav sits ABOVE this sheet in the head today, and a later page that moves it
   below would silently take the trim away again. */
/* SUPERSEDED BY PHASE 29's uniform header block below, which sets the same
   two properties for BOTH header systems instead of nav.nav alone. */

/* ===========================================================================
   ONE HEADER, FOUR SITES                                         (Phase 29)
   ===========================================================================
   Bethany: "some of the sites have a sticky header and some don't -- pick a
   style and be consistent. also, let's make sure the header is reduced in
   height everywhere and the nav menu font is increase. everything uniform.
   i don't like how different the sites are"

   MEASURED BEFORE CHOOSING. There were three header systems and two scroll
   behaviours:

       site      markup                sticky   height   logo    links
       NC        nav.nav                 no      165px   148px   13px
       Oregon    header.site-header     YES      102px    79px   11px
       Nevada    header.site-header     YES      102px    79px   11px
       hub       nav.nav                 no      105px    88px   13px

   THE CHOICE IS STICKY, and it is a deliberate divergence from the reference,
   which is position:relative. Two of the four sites already stick, a short
   header is only worth having if it stays reachable, and on an HVAC site the
   phone number and the schedule button are the page's job -- they should not
   scroll away. Bethany asked for one style; this is the one that earns its
   height back.

   96px, 76px logo, 14px links. Every clause of the request is satisfied and
   none of them is satisfied by accident:
     - reduced EVERYWHERE, not just on the tall one: 165->96, 102->96, 105->96
     - uniform: one height, one logo size, one link size across all four
     - link font UP everywhere: 13->14 on NC and the hub, 11->14 on OR and NV

   WHAT THIS COSTS, SAID PLAINLY: NC's logo comes down from 148px to 76px.
   Bethany had previously chosen "keep logo at 148, trim padding only" for NC
   alone, but that predates "everything uniform" and the two cannot both hold
   -- a 148px logo IS the 165px header. Uniform-and-shorter means the logo
   moves. This note exists so the earlier decision is not silently reversed:
   it was superseded on 2026-09-28, not forgotten.

   The utility bar deliberately does NOT stick. It is 36px of hours and phone
   numbers; sticking it would make the fixed furniture 132px and undo the
   height this block just bought. It scrolls away and the header lands at 0.
   ========================================================================== */
:is(nav.nav, header.site-header, .page > header) {
  position: sticky;
  top: 0;
  z-index: 60;
}
:is(nav.nav, header.site-header) {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* THE HUB WRAPS ITS NAV IN A BARE <header>, AND THAT BROKE STICKY IN A WAY
   WORTH RECORDING: a sticky element sticks within its PARENT's box, and that
   header is exactly as tall as the nav inside it, so the nav had nowhere to
   travel and scrolled away with its wrapper. Declaring position:sticky on it
   was true and did nothing. The wrapper is what has to stick -- its parent is
   .page, which is the whole document -- so the inner nav goes back to static
   and the header carries it. NC has no such wrapper, so its nav sticks
   directly; both land at top:0 either way. */
.page > header > nav.nav {
  position: static;
}
/* The wrapper paints too. Today the nav fills it exactly so cream shows
   either way, but a transparent sticky bar is one layout change away from
   letting the page scroll through it, and the failure looks like a bug rather
   than a style. Costs nothing to make it impossible. */
.page > header {
  background: var(--t72-paper, #FFF6DC);
}

/* THE LOGO IS THE HEADER'S HEIGHT. Nothing else in the bar is taller, so the
   header's height is this number plus the 10px padding either side. Set on the
   image rather than a wrapper because NC wraps it in <a> and Oregon wraps it
   in <a class="brand-mark">, and the image is the one node both have. */
.nav .nav-brand img,
.site-header .brand-mark img,
.site-header .container > a > img {
  height: 76px;
  width: auto;
  display: block;
}

/* Both nav systems, one size. NC's links are <a> inside .nav-links .nav-item;
   Oregon's are <button class="nav-trigger"> plus plain <a> inside .main-nav.
   The dropdown's own links are left alone -- they are a menu, not the bar. */
.nav .nav-links,
.nav .nav-links .nav-item > a,
.main-nav > .nav-item > a,
.main-nav > a,
.main-nav .nav-trigger {
  font-size: 14px;
}

/* SITE-HEADER ALREADY DECLARED A HEIGHT OR PADDING OF ITS OWN on Oregon and
   Nevada; this neutralises it so the padding above is the only thing setting
   the bar's height, and the two systems land on the same number. */
header.site-header > .container {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* THE ONE RULE THAT MADE STICKY POSSIBLE AT ALL. `.page` carried
   `overflow: hidden`, which makes it a scroll container -- and a sticky child
   sticks to its nearest scroll container, not the viewport, so NC's header
   could never stick no matter what position it was given. `overflow: clip`
   clips exactly the same way (it is there to stop horizontal overflow) but
   does NOT create a scroll container, so sticky resolves against the viewport.
   This is why NC and the hub were not sticky and Oregon and Nevada were: only
   NC and the hub have this wrapper. */
.page {
  overflow: clip;
}

/* ANCHORS HAVE TO CLEAR THE STICKY BAR. Every in-page link -- the FAQ jumps,
   #booking, the skip link's target -- used to land with its heading at the top
   of the viewport. With a 97px bar pinned there, that heading now lands
   UNDERNEATH it, and the reader arrives looking at the middle of a section
   wondering where the answer went. scroll-padding-top on the scroll container
   moves every scroll-into-view down by the bar's height, once, for every
   anchor on all four sites. The 12px is breathing room so the heading is not
   flush against the bar's underside.

   Declared as a token because the bar's height is now one number in one place;
   if it moves, this follows it. */
:root {
  --t72-header-h: 97px;
}
html {
  scroll-padding-top: calc(var(--t72-header-h) + 12px);
}
@media (max-width: 880px) {
  :root { --t72-header-h: 84px; }
}