/* ==========================================================================
   TRU72 — THE SHARED COMPONENT SET  (Phase 6)
   --------------------------------------------------------------------------
   Every component in components.py renders classes from this one sheet, on all
   four sites. It loads LAST, after tru72-surfaces.css, and build.py adds the
   link only to pages that actually use a component — so nothing here can move
   a pixel on a page that has not been converted yet.

   THE THREE CONSTRAINTS, AND WHERE EACH ONE IS ENFORCED

   1. COLOUR — D42's five, and nothing else. There is not one hex literal in
      this file. Every colour is var(--t72-ink | --t72-green | --t72-gold |
      --t72-linen | --t72-paper), the two LINEN-in-PAPER surface tints, or one
      of the rule tokens. A sixth colour cannot be introduced here without
      first being introduced in tru72-tokens.css, which is the switch.

   2. TYPE — D43's two faces. --t72-font-display (Friz Quadrata, falling back
      to Fraunces until the webfont licence is bought) for headings and display
      numerals; --t72-font-body (Fraunces) for everything else. No third face.

   3. BUTTONS — D46. This sheet styles .t72c-btn's SHAPE only: padding, border,
      radius, focus. The gold FILL and the 20px/700 that licenses it at 4.04:1
      come from .t72-cta in tru72-surfaces.css, in a single declaration block,
      with !important. A component asking for a gold button gets the size with
      it, whatever it does here. .t72c-btn-ink is PAPER on INK at 9.7:1 and is
      legible at any size, which is why every dense or narrow slot uses it.

   ACCESSIBILITY THAT IS STRUCTURAL RATHER THAN OPTIONAL
   - .t72c-sr is the visually-hidden class used for table captions and the
     headings that label a band which has no visible title. It is never used to
     hide something a sighted user needs.
   - Focus is visible everywhere: a 3px ANTIQUE GOLD ring with a 2px offset, on
     paper and on ink, on links, buttons, summaries and jump links. :focus (not
     only :focus-visible) on the controls, so keyboard and assistive-tech focus
     both show.
   - Every interactive target is at least 44px tall at 375px.
   - prefers-reduced-motion removes the two transitions in the file.

   375px: every grid is a single column below 720px, every table scrolls inside
   its own wrapper rather than widening the page, and the gutter drops to
   --t72-gutter-mobile. There is no fixed width anywhere in this sheet.
   ========================================================================== */

/* ==========================================================================
   THE SURFACE CONTRACT                                        (Phase 8, fix 1)
   --------------------------------------------------------------------------
   THE BUG THIS REPLACES. Every text colour in this sheet used to name a token
   directly, and every dark band then had to re-state that colour through a
   descendant selector — `.t72c-hero a { color: … }`, `.t72c-hero .t72c-note
   { color: … }`, and so on: eight separate hand-maintained selector lists.
   That works only while a band is one flat surface. It is wrong the moment a
   component puts a PAPER card on an INK band, because the band's descendant
   selector reaches straight through the card and paints on-INK text on PAPER.

   It happened. `hero-booking`'s market card (`.t72c-book`) is a PAPER card on
   the INK hero. `.t72c-hero a` painted the two market names PAPER-on-PAPER —
   measured 1.00:1, literally invisible — and `.t72c-hero .t72c-note` took the
   card's footnote to 1.67:1. The sheet already carried a one-off exception for
   headings (`.t72c-hero .t72c-book :is(h2, h3)`), which is the tell: the
   pattern needed a hand-written exception per selector, so the next component
   to nest a surface would have reintroduced the fault with no warning.

   THE FIX. A band no longer states colours for its descendants. It states what
   KIND OF SURFACE it is, once, as the variables below, and every colour rule in
   this file reads a variable. Variables inherit, so a nested surface redeclares
   them once — see the PAPER ISLAND block — and everything inside it follows
   automatically. A component cannot inherit the wrong surface's colour any
   more, because no rule reaches past a surface boundary.

   THE ROLES, and the measured pair each one resolves to (WCAG 2.1):
     --t72c-fg          body copy          INK on PAPER 12.1:1 · LINEN on INK 5.7:1
     --t72c-fg-muted    secondary copy     GREEN 5.2:1         · LINEN 5.7:1
     --t72c-fg-strong   links, emphasis    INK 12.1:1          · PAPER 9.7:1
     --t72c-display     headings >= 25px   INK 12.1:1          · GOLD 4.0:1 (large only)
     --t72c-accent      small labels       GREEN 5.2:1         · LINEN 5.7:1
     --t72c-rule-soft   hairlines
   GOLD is never --t72c-fg / -muted / -accent on either surface: 2.4:1 on PAPER
   at every size, 4.0:1 on INK, which licenses it for display type only. That is
   why --t72c-display is a separate role from --t72c-fg-strong, and why
   .t72c-h3 (19-22px) reads -fg-strong rather than -display.

   ADDING A COMPONENT: read a variable, never a --t72-type-* token directly.
   NESTING A SURFACE: give the element .t72c-island (PAPER) and nothing else is
   needed. tools/audit_phase5.py check 14 fails the build if either is broken.
   ========================================================================== */

/* -- the band -------------------------------------------------------------- */
.t72c {
  /* PAPER is the default surface. */
  /* Its italic accent is GOLD-AGED, which is what the reference sets on cream
     and the only gold legal there (3.18:1 against antique gold's 2.43:1).
     Stated HERE so the accent rule below reads `--t72c-gold-ok` alone and
     never names the D83 token -- `.t72c` is already one of the four selectors
     the cage permits to read it. */
  --t72c-gold-ok:           var(--t72-display-italic-on-paper);
  --t72c-fg:                var(--t72-type-on-paper);
  --t72c-fg-muted:          var(--t72-type-on-paper-muted);
  --t72c-fg-strong:         var(--t72-type-on-paper);
  --t72c-display:           var(--t72-type-on-paper);
  --t72c-accent:            var(--t72-type-on-paper-muted);
  --t72c-rule-soft:         var(--t72-rule);
  --t72c-btn-ink-bg:        var(--t72-ink);
  --t72c-btn-ink-fg:        var(--t72-paper);
  --t72c-btn-ink-hover:     var(--t72-green);
  --t72c-btn-outline-fg:    var(--t72-ink);
  --t72c-btn-outline-bd:    var(--t72-rule-strong);
  --t72c-btn-outline-hover: var(--t72-paper-deep);
  --t72c-means-bg:          var(--t72-paper-warm);

  /* THE ITALIC DISPLAY LINE, on the band's default ground — which is PAPER,
     and PAPER is the ONLY step where GOLD-AGED clears 3.0 (3.18:1; the two
     tints measure 2.92 and 2.78 and fail). The two .t72c-lite-* classes
     below take it back to SCENERY GREEN for exactly that reason. (D83) */
  --t72c-display-soft:      var(--t72-display-italic-on-paper);

  /* THE GUTTER IS ON THE BAND, which is where the reference puts it:
     `.hero { padding: 44px 56px 72px }`, `.trust-band { padding: 28px 56px }`,
     `.services { padding: 80px 56px }`. Phase 14 got the MEASURE right but put
     the gutter on the inner wrapper instead, so every band of ours computed
     `padding: 80px 0px` and reported an inner width of 1265px against the
     reference's 1153px at 1280px of viewport — the 112px the two gutters are
     worth — even though the text inside it did not actually sit that wide.
     The gutter is a property of the band on the reference, so it is one
     here. (Phase 18) */
  padding: 80px var(--t72-gutter);
  background: var(--t72-paper);
  color: var(--t72c-fg-strong);
  font-family: var(--t72-font-body);
}
/* The reference site is a 1440px page with a 56px gutter, so its content
   measures 1328px and its bands run edge to edge inside that page. 1180 was a
   Phase 6 invention, and it is most of why the build read as narrower and more
   crowded than the site it was copying. box-sizing is stated because this sheet
   also loads on pages whose inline reset it cannot see.

   THE WRAP NO LONGER CARRIES THE GUTTER — the band above does. What is left is
   the MEASURE, 1328px, the sheet less its two gutters. On a sheet-width page
   the band's own padding has already taken the content to 1328 and this cap
   never binds; it binds only where a band sits outside the sheet, and there it
   is the backstop that keeps the measure honest. */
.t72c-wrap {
  box-sizing: border-box;
  max-width: var(--t72-page-measure, 1328px);
  margin: 0 auto;
  padding: 0;
}
/* A RULE BETWEEN TWO BANDS THAT ALREADY DIFFER IN COLOUR IS REDUNDANT, and
   drawing one everywhere is the single biggest source of our hairline
   overshoot. Measured like-for-like against the reference:

     about page      ref 21   ours 20    (fine)
     city landing    ref 60-62  ours 77-87
     EQUIPMENT       ref 34   ours 72-83
     programme       ref 36   ours 70

   On our air-conditioning page, 11 of the 83 hairlines were this one rule
   firing once per section. The reference does not appear in its own top ten
   contributors at all: it separates bands by GROUND, and rules only where two
   bands share one. Phase 25B took boxes out and put rules in, and this is
   where it went past the mark.

   So the separator now fires only when it is doing work: between two bands
   that paint the same ground. If either side paints its own, the colour change
   already separates them. */
.t72c + .t72c { border-top: 1px solid var(--t72-rule); }

/* the FOLLOWING band paints its own ground -- no rule needed above it */
.t72c + :is(.t72c-band-green, .t72c-band-ink, .t72c-band-linen, .t72c-band-paper,
            .t72c-lite-warm, .t72c-lite-deep, .t72c-lite-paper,
            .t72c-promise-sec, .t72c-final-cta, .t72c-plan-sec, .t72c-tc-sec,
            .t72c-route-sec, .t72c-areas-sec, .t72c-method-sec, .t72c-trust-sec,
            .t72c-inline-cta, .t72c-prob-sec, .t72c-rebate-sec, .t72c-mgr-sec,
            .t72c-process-sec, .t72c-jump-sec, .t72c-seal-sec) {
  border-top: 0;
}
/* the PRECEDING band paints its own ground -- same reasoning, other side */
:is(.t72c-band-green, .t72c-band-ink, .t72c-band-linen, .t72c-band-paper,
    .t72c-lite-warm, .t72c-lite-deep, .t72c-lite-paper,
    .t72c-promise-sec, .t72c-final-cta, .t72c-plan-sec, .t72c-tc-sec,
    .t72c-route-sec, .t72c-areas-sec, .t72c-method-sec, .t72c-trust-sec,
    .t72c-inline-cta, .t72c-prob-sec, .t72c-rebate-sec, .t72c-mgr-sec,
    .t72c-process-sec, .t72c-jump-sec) + .t72c {
  border-top: 0;
}
/* Except the bands whose gold frame IS the device -- the trust band asks for
   all four sides, and Bethany chose that treatment deliberately. */
.t72c + .t72c-trust-sec.t72c-band-green,
.t72c-trust-sec.t72c-band-green {
  border-top: 1px solid var(--t72-rule-gold);
}

/* ==========================================================================
   THE GROUND                                                      (Phase 14)
   --------------------------------------------------------------------------
   DERIVED FROM THE LIVE REFERENCE, NOT INVENTED. Measured off
   TByrds_Launch/index.html, its city pages and its service pages, the ground is
   a five-step ladder and it is CREAM-DOMINANT: roughly 60% of a page's vertical
   run is PAPER, ~15% SCENERY GREEN, ~18% INK, ~7% LINEN. Dark is an occasional
   NARROW band that breaks the page. It is never the page's ground, and it is
   never the hero.

   Phase 6 had six of the ten homepage bands on flat INK. That is the single
   biggest reason the build stopped reading like the site it came from, which is
   why this block, not the component blocks below, is the important part of the
   file.

     PAPER        the default: hero, services, the SEO paragraph, the seal
     PAPER-WARM   a second light step so two prose bands do not merge
     PAPER-DEEP   a third light step, for the list-ish and stepwise bands
     LINEN        one mid band per page — routing, signs, the leaf FAQ
     SCENERY GRN  the narrow stat band, the promises band, the final CTA
     INK          ONE feature band per page. On the reference that is the
                  membership programme; INK is not spent anywhere else, which
                  is what keeps it meaning something
   ========================================================================== */

/* -- light steps. Both tints are LINEN mixed into PAPER (tokens file), so
      neither is a new pigment. ------------------------------------------- */
/* The mid-page CTA strip is PAPER-WARM, which is what the reference's own
   mid-page callout (`.cc-mention` on its service pages) sits on. It was INK,
   and on a page whose feature band is already INK that produced 1240px of
   uninterrupted dark — the slab this phase exists to remove.

   THE THREE LIGHT STEPS ARE ASSIGNED SO THAT NEIGHBOURS DIFFER. The two tints
   are within a few percent of PAPER, so a run of them reads as one slab just as
   surely as a run of INK does — a long service page came out 52% tint with no
   visible seam for six bands. The split below is made against the template
   order in docs/PAGE_TEMPLATES.md, so no two adjacent bands on a service page
   or a city page land on the same step. Adding a component means placing it in
   this list by looking at what will sit either side of it. */
/* A TINT TAKES THE GOLD BACK, IN THE SAME DECLARATION THAT PAINTS IT. (D83)
   GOLD-AGED is 3.18:1 on PAPER and 2.92:1 / 2.78:1 on these two, so a band
   that steps off PAPER must step off the gold in the same breath. Writing the
   reset here rather than in a separate rule is deliberate: a band cannot be
   moved onto a tint without carrying it. Audit check 14b proves that every
   non-PAPER background in this sheet does the same. */
/* PHASE 21 — .t72c-story-sec left this list. The reference's heritage band
   (`.about`) is flat PAPER and Bethany's rhythm names it "cream heritage/about
   with photography", so its INTENDED step is PAPER and it is stated with the
   other PAPER bands below. relevel() can still bump it if a page ever stacks it
   against another cream band. */
.t72c-inline-cta, .t72c-prob-sec, .t72c-rebate-sec,
.t72c-mgr-sec {
  --t72c-display-soft: var(--t72-type-on-paper-muted);   /* 4.79:1 */
  background: var(--t72-paper-warm);
}
/* PHASE 21 — .t72c-faq-sec left this list for the same reason: the
   reference's `.faq` is flat PAPER, and so is Bethany's "cream FAQ". */
.t72c-process-sec, .t72c-jump-sec {
  --t72c-display-soft: var(--t72-type-on-paper-muted);   /* 4.57:1 */
  background: var(--t72-paper-deep);
}
/* PAPER, i.e. the default, stated here so the alternation is readable in one
   place: .t72c-signs-sec, .t72c-svc-sec, .t72c-compare-sec, .t72c-brands-sec,
   .t72c-rel-sec, .t72c-triage-sec, .t72c-seo-sec, .t72c-seal-sec,
   .t72c-story-sec and .t72c-faq-sec (both moved here in Phase 21).

   THE BUMP. Which bands end up beside each other depends on the page's
   manifest, so the lists above state the INTENDED step and components.py's
   relevel() pass resolves the collisions it cannot: a light band that would
   repeat the light band directly above it gets one of these three classes,
   picked to differ from both neighbours. They are last and they are specific,
   so they win over the intent above without !important. Its GROUND map mirrors
   the lists above — move a band here and move it there. */
.t72c.t72c-lite-paper { background: var(--t72-paper); }
/* relevel() can move ANY light band onto a tint at build time, so the bump
   carries the same reset as the intent above: a band cannot be bumped off
   PAPER without also losing the gold it is no longer legible in. (D83) */
.t72c.t72c-lite-warm {
  --t72c-display-soft: var(--t72-type-on-paper-muted);
  background: var(--t72-paper-warm);
}
.t72c.t72c-lite-deep {
  --t72c-display-soft: var(--t72-type-on-paper-muted);
  background: var(--t72-paper-deep);
}
/* And the bump back ONTO paper restores it, for a band whose intent was a
   tint and whose neighbours pushed it to cream. */
.t72c.t72c-lite-paper {
  --t72c-display-soft: var(--t72-display-italic-on-paper);
}

/* -- LINEN ----------------------------------------------------------------
   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 the whole contract resolves to INK and
   the hierarchy is carried by size and weight rather than by a second colour.
   Cards sitting on it are PAPER and re-declare the paper contract below.
   -------------------------------------------------------------------------- */
/* The diagnostic-proof band joins routing and the service area on LINEN. The
   reference spends a third of a service page on linen — two full-height bands
   of it — and with only routing there the middle of ours was all tint. */
/* THE TRUST BAND IS LINEN, NOT SCENERY GREEN.                     (Phase 21)
   Measured on the reference at 1280px: `.trust-band { background: var(--linen);
   color: var(--ink-deep) }` — #CBC0AA with dark type, 124px tall between two
   gold hairlines. Ours had it on SCENERY GREEN, so the page went cream · green
   · cream where the reference goes cream · TAUPE · cream, and the first green
   on the page arrived four bands later at the promises. Bethany's rhythm names
   it "taupe trust band" and the reference agrees.

   The type contract comes with the ground: on LINEN only INK clears AA
   (5.89:1); PAPER is 1.67:1 and would have been invisible, which is exactly
   what moving the ground without moving the contract would have shipped.

   --t72c-gold-ok is the one deliberate exception. Measured on the live
   reference, `h2 em` on LINEN rgb(203,192,170) is GOLD-AGED rgb(168,133,74)
   -- the same gold it uses on cream -- at 1.91:1. That is below AA, and it is
   what Bethany asked us to match ("it was consistent on the tbyrds site and
   needs to be on the new tru72 site"). The accent is decorative emphasis on a
   phrase that also reads in the surrounding INK sentence, so the ground's
   readable contract below is unaffected: only the gilded phrase takes it. */
.t72c-trust-sec,
.t72c-route-sec, .t72c-areas-sec, .t72c-method-sec,
.t72c-band-linen, .t72c.t72c-band-linen {
  --t72c-gold-ok:           var(--t72-display-italic-on-paper);
  --t72c-fg:                var(--t72-ink);
  --t72c-fg-muted:          var(--t72-ink);
  --t72c-fg-strong:         var(--t72-ink);
  --t72c-display:           var(--t72-ink);
  --t72c-display-soft:      var(--t72-ink);
  --t72c-accent:            var(--t72-ink);
  --t72c-rule-soft:         var(--t72-rule-strong);
  --t72c-btn-ink-bg:        var(--t72-ink);
  --t72c-btn-ink-fg:        var(--t72-paper);
  --t72c-btn-ink-hover:     var(--t72-green);
  --t72c-btn-outline-fg:    var(--t72-ink);
  --t72c-btn-outline-bd:    var(--t72-rule-strong);
  --t72c-btn-outline-hover: var(--t72-paper);
  --t72c-means-bg:          var(--t72-paper);

  background: var(--t72-linen);
  color: var(--t72c-fg-strong);
}

/* -- SCENERY GREEN --------------------------------------------------------
   PAPER is the ONLY one of the five that clears AA on SCENERY GREEN (5.23:1);
   LINEN is 3.13:1 and ANTIQUE GOLD 2.15:1. So every type role resolves to
   PAPER. Gold keeps the hairline, which is decoration and exempt from 1.4.11.
   -------------------------------------------------------------------------- */
.t72c-promise-sec, .t72c-final-cta, .t72c-book,
.t72c-triage-card, .t72c-band-green, .t72c.t72c-band-green {
  /* The reference sets its green-band italic in ANTIQUE GOLD, measured
     rgb(195,153,84) on rgb(105,104,89) -- 2.15:1, a failure it ships
     knowingly and Bethany has chosen three times. */
  --t72c-gold-ok:           var(--t72-gold);
  --t72c-fg:                var(--t72-type-on-green);
  --t72c-fg-muted:          var(--t72-type-on-green);
  --t72c-fg-strong:         var(--t72-type-on-green);
  --t72c-display:           var(--t72-type-on-green);
  --t72c-display-soft:      var(--t72-type-on-green);
  --t72c-accent:            var(--t72-type-on-green);
  --t72c-rule-soft:         var(--t72-rule-on-ink);
  --t72c-btn-ink-bg:        var(--t72-paper);
  --t72c-btn-ink-fg:        var(--t72-ink);
  --t72c-btn-ink-hover:     var(--t72-linen);
  --t72c-btn-outline-fg:    var(--t72-paper);
  --t72c-btn-outline-bd:    var(--t72-rule-on-ink);
  --t72c-btn-outline-hover: var(--t72-rule-on-ink);
  --t72c-means-bg:          transparent;

  background: var(--t72-green);
  color: var(--t72c-fg-strong);
}
.t72c-trust-sec, .t72c-promise-sec, .t72c-final-cta {
  border-top: 1px solid var(--t72-rule-gold);
  border-bottom: 1px solid var(--t72-rule-gold);
}

/* -- INK ------------------------------------------------------------------
   The page's ONE feature panel — the membership programme, which is the
   reference site's Cardinal Club section and ours is .t72c-tc-sec, the Tru
   Comfort band — plus the enrolment band and the short centred standard band.
   PAPER and LINEN on INK measure 9.7:1 and 5.7:1; display type 25px and up may
   be ANTIQUE GOLD at 4.04:1.
   -------------------------------------------------------------------------- */
.t72c-plan-sec, .t72c-tc-sec, .t72c-mkt-link, .t72c-mkt-panel,
.t72c-promise-panel, .t72c-band-ink, .t72c.t72c-band-ink {
  --t72c-gold-ok:           var(--t72-gold);
  --t72c-fg:                var(--t72-type-on-ink);
  --t72c-fg-muted:          var(--t72-type-on-ink);
  --t72c-fg-strong:         var(--t72-type-on-ink-strong);
  --t72c-display:           var(--t72-display-on-ink);
  --t72c-display-soft:      var(--t72-display-on-ink);
  --t72c-accent:            var(--t72-type-on-ink);
  --t72c-rule-soft:         var(--t72-rule-on-ink);
  --t72c-btn-ink-bg:        var(--t72-paper);
  --t72c-btn-ink-fg:        var(--t72-ink);
  --t72c-btn-ink-hover:     var(--t72-linen);
  --t72c-btn-outline-fg:    var(--t72-paper);
  --t72c-btn-outline-bd:    var(--t72-rule-on-ink);
  --t72c-btn-outline-hover: var(--t72-rule-on-ink);
  --t72c-means-bg:          transparent;

  background: var(--t72-ink);
  color: var(--t72c-fg-strong);
}
.t72c-plan-sec, .t72c-tc-sec {
  border-top: 1px solid var(--t72-rule-gold);
  border-bottom: 1px solid var(--t72-rule-gold);
}
/* .t72c-mkt-link IS NOT A FULL INK BAND. It takes the ink contract above
   because it is a dark recess, but it paints --t72-panel-on-dark, INK at 34%,
   over the SCENERY GREEN booking card, and that composites to #5A5A50 rather
   than to INK. LINEN on #5A5A50 is 3.87:1, and the two 12.5px sub-lines
   inside the recess were a real AA failure on the NC homepage. PAPER on
   #5A5A50 is 5.51:1, so the muted role resolves to PAPER inside the recess
   and the rest of the ink contract stands. Found by measuring: no rule in
   this sheet could state it, because the ground is composited at paint time. */
.t72c-mkt-link, .t72c-mkt-panel { --t72c-fg-muted: var(--t72-paper); }

/* -- PAPER ISLANDS --------------------------------------------------------
   A PAPER surface sitting inside a band of a different colour. It redeclares
   the contract and everything within it follows — no per-selector exception is
   written anywhere else in this file, and none should be.

   `.t72c-island` is the hook a NEW component uses: put the class on the card
   and it is done. Phase 14 adds every card in this sheet that paints itself
   `background: var(--t72-paper)`, because the ground ladder above now puts
   several of them on LINEN or SCENERY GREEN, where the band's contract would
   otherwise reach through and paint PAPER type onto a PAPER card.
   -------------------------------------------------------------------------- */
/* PHASE 25B — `.t72c-sign`, `.t72c-prob`, `.t72c-brand`, `.t72c-promise` and
   `.t72c-plan` LEAVE THIS LIST, and the reason is the whole point of the
   block. This contract exists for a card that paints ITSELF PAPER on a
   darker band. Those five stopped painting themselves anything, so they now
   sit on the band's own ground — and leaving them here would have done
   exactly what the note above warns about, in reverse: the 5-up promises row
   on the three careers pages and the Las Vegas one is on SCENERY GREEN, and
   the paper contract painted INK headings and INK body onto it. Measured
   before this line was written: INK #3D3F3F on SCENERY GREEN #6B6A5C is
   1.60:1 — unreadable, and a failure the declared-pair contrast check could
   not see because both colours are legal, just not together. They take the
   band's contract now, which is PAPER on green at 5.23:1. */
.t72c-island, .t72c-table .t72c-us,
.t72c-route, .t72c-svc, .t72c-rel, .t72c-step, .t72c-jump {
  --t72c-fg:                var(--t72-type-on-paper);
  --t72c-fg-muted:          var(--t72-type-on-paper-muted);
  --t72c-fg-strong:         var(--t72-type-on-paper);
  --t72c-display:           var(--t72-type-on-paper);
  --t72c-accent:            var(--t72-type-on-paper-muted);
  --t72c-rule-soft:         var(--t72-rule);
  --t72c-btn-ink-bg:        var(--t72-ink);
  --t72c-btn-ink-fg:        var(--t72-paper);
  --t72c-btn-ink-hover:     var(--t72-green);
  --t72c-btn-outline-fg:    var(--t72-ink);
  --t72c-btn-outline-bd:    var(--t72-rule-strong);
  --t72c-btn-outline-hover: var(--t72-paper-deep);
  --t72c-means-bg:          var(--t72-paper-warm);
  --t72c-display-soft:      var(--t72-type-on-paper-muted);

  color: var(--t72c-fg-strong);
}

/* -- headings -------------------------------------------------------------- */
/* THE DISPLAY VOICE, taken off the reference (Phase 14). Every display heading
   there is UPPERCASE Friz Quadrata set very tight — line-height .95 on the h1,
   1.0 on a section head — and the second half of the thought is an italic
   Fraunces `em` in the warm accent colour, dropped to its own line at ~.82em.
   Phase 6 set sentence case at line-height 1.08 and left `em` unstyled, which
   is why the headings read as a different typeface family even though the two
   faces were right. */
.t72c-h1, .t72c-h, .t72c-h3 {
  font-family: var(--t72-font-display);
  font-weight: var(--t72-display-weight);
  letter-spacing: var(--t72-track-display, .005em);
  line-height: 1.0;
  text-transform: uppercase;
  margin: 0 0 18px;
  text-wrap: balance;
  /* Stated, not inherited. Each of the four sites has its own global
     `h1,h2,h3 { color: ... }` in a page's inline <style>, and a component has
     to look the same on all four. */
}
/* .t72c-h1 (32px min) and .t72c-h (25px min) are the only headings large
   enough to carry ANTIQUE GOLD on INK at 4.0:1. --t72c-display is GOLD on a
   dark band and INK on PAPER, so one rule covers both. */
.t72c-h1, .t72c-h { color: var(--t72c-display); }

/* ===========================================================================
   THE PAGE-FAMILY HEADING SCALE — consumed here, DECLARED in
   tru72-tokens.css.                                    (Phase 25a / 25b)
   ===========================================================================
   The scale itself moved to the token sheet in Phase 25b, and the move was
   forced by measurement rather than tidiness: Oregon's and Nevada's legal,
   sitemap and 404 pages render no .t72c-* component at all, so build.py does
   not link tru72-components.css on them. With the declarations living here,
   `body.t72-fam-legal` on /terms/ resolved to NOTHING and the page silently
   fell back to its own 53.8px clamp while every other legal page in the
   estate measured 43.5px. tru72-tokens.css is the one sheet all 258 pages of
   all five builds load, which is where a value every page needs belongs.

   The full derivation — the reference's measured sizes at four viewports,
   family by family — is in the token sheet beside the numbers. */
.t72c-h1 {
  font-size: var(--t72c-h1-size, clamp(40px, 4.6vw, 62px));
  line-height: .95;
}
.t72c-h  { font-size: clamp(30px, 3.4vw, 46px); }

/* THE ITALIC HALF — and the ONLY two rules in the system that may read
   --t72-display-italic-on-paper.                                 (D83)

   --t72c-display-soft resolves per surface, and every branch is measured:

     PAPER            GOLD-AGED #A8854A   3.18:1   large text only  <- D83
     PAPER-WARM/DEEP  SCENERY GREEN       4.79 / 4.57:1   any size
     LINEN            INK                 5.89:1
     SCENERY GREEN    PAPER               5.23:1   (never gold on green — D83)
     INK              ANTIQUE GOLD        4.04:1   large text only

   The reference sets this line in its own aged gold on cream and that is now
   exactly what we do. It was the single biggest remaining difference from the
   live site at the end of Phase 14.

   THE SIZE FLOOR IS LOAD-BEARING. 3.18:1 is an AA pass for LARGE text only,
   and this line is Fraunces at weight 400, so "large" means the full 24px.
       .t72c-h1 em   max(24px, .82em)                  -> 24.0px at its floor
       .t72c-h  em   max(24px, .74em) of clamp(30px, …) -> 24.0px at 375px
   The `max()` is the floor: .74em of the 30px minimum head is 22.2px, which
   is under the threshold, so the colour would be illegal on a narrow
   viewport. It costs 1.8px at 375px and nothing at all from 486px up, where
   .74em has already overtaken 24px. Do not remove it, and do not reduce
   either multiplier, without re-deriving this.

   PHASE 25A ADDED THE SAME max() TO .t72c-h1 em, AND IT IS NOW REQUIRED, not
   belt-and-braces. The page-family scale above gives the `program` family a
   28px minimum and `service-areas` a 24px mobile minimum; .82em of those is
   22.96px and 19.68px, both under the 24px that licenses GOLD-AGED on PAPER.
   Without the floor, shrinking the heads to the reference's sizes would have
   silently turned 8 financing / Good Neighbor / Mission Ready / savings pages
   into contrast failures. */
.t72c-h1 em, .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: max(24px, .82em);
  color: var(--t72c-display-soft);
}
.t72c-h em { font-size: max(24px, .74em); }
/* Every other heading — .t72c-h3 at 19-22px, and any unclassed h2..h6 a
   component emits — is under the 24px that licenses gold, so it takes the
   surface's strong text colour: PAPER on INK 9.7:1, INK on PAPER 12.1:1.
   The :not()s exclude the two display classes above without out-specifying
   them by accident. */
.t72c-h3,
.t72c :is(h2, h3, h4, h5, h6):not(.t72c-h):not(.t72c-h1) { color: var(--t72c-fg-strong); }
.t72c-h3 { font-size: clamp(19px, 1.7vw, 22px); }

.t72c-deck {
  font-size: clamp(16.5px, 1.35vw, 18px);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 62ch;
  color: var(--t72c-fg);
}
/* THE EYEBROW IS A KEYLINE, NOT A LABEL (Phase 14). On the reference every
   eyebrow is preceded by a 26px ANTIQUE GOLD hairline, and a centred one is
   flanked by two. That hairline is where the gold lives on a cream page: as
   decoration it is exempt from contrast minimums, where gold TYPE at 13px is a
   2.43:1 failure. Phase 6 dropped the rule and kept only the label, which took
   the warm accent off every cream band on the site at a stroke. */
.t72c-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--t72-font-label);
  /* 11px/500, not 12.5px/700: measured on the reference's `.eyebrow` at 1280px.
     The old values were a serif face being pushed to carry a mono's texture by
     weight; with Geist Mono under it (D95) the reference's own numbers are
     right and the label reads lighter and wider, which is the texture. */
  font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  /* 11px, so never gold: 2.43:1 on PAPER, and 4.0:1 on INK licenses 18.66px
     bold at the smallest. GREEN 5.2:1 / LINEN 5.9:1 / PAPER-on-GREEN 5.2:1. */
  color: var(--t72c-accent);
  margin: 0 0 18px;
}
.t72c-eyebrow::before {
  content: ''; flex: 0 0 auto; width: 26px; height: 1px;
  background: var(--t72-gold);
}

/* ==========================================================================
   ALIGNMENT                                       (Phase 14, corrected in 18)
   --------------------------------------------------------------------------
   The reference is a symmetrical site. Its hero, its stat band, its routing
   heads, its symptom heads, its promises head, its standard band, its final
   CTA, its SEO paragraph and its closing seal are ALL centred on an inner
   measure of 720–1080px; only the services grid, the about/story split and the
   FAQ two-column are left-aligned. Phase 6 left-aligned everything, which is
   the other half of why the page felt asymmetric and dense.

   PHASE 18 — WHERE THE CENTRING IS DECLARED. Phase 14 centred the BAND. The
   reference almost never does: read its computed styles and `.hero`,
   `.trust-band`, `.semantic-band`, `.services`, `.promises`, `.about`,
   `.reviews`, `.faq` and `.seo-service-area` all compute `text-align: start`.
   What it centres is the thing INSIDE — `.hero-inner`, `.trust-band .cell`,
   `.routing-head`, `.signs-head`, `.promises-head`, `.seo-service-area-inner`
   — each on its own measure, with the cards beneath left-aligned. Only three
   whole bands are centred: `.standard-band`, `.final-cta` and `.closing-seal`.

   That distinction is not cosmetic. A centred BAND is a default that every
   future child inherits and that each one then has to opt out of by hand; the
   list of opt-outs below is what that costs. A centred HEAD centres the head.

   So the three bands the reference centres are centred here, and everywhere
   else the band is left and its contents are centred one level in. The
   children are taken as a group rather than named one by one, because that is
   exactly the set that inherited the centring before — this rewrites where the
   declaration lives without moving a pixel. The card resets below still win
   inside the lists, being matched on the card itself.
   ========================================================================== */
/* The three the reference centres whole. */
.t72c-centred, .t72c-final-cta, .t72c-seal-sec { text-align: center; }

/* Everywhere else: the band is left, its head/lede/actions are centred. */
:is(.t72c-hero, .t72c-trust-sec, .t72c-route-sec, .t72c-signs-sec,
    .t72c-promise-sec, .t72c-method-sec, .t72c-process-sec, .t72c-plan-sec,
    .t72c-inline-cta, .t72c-seo-sec, .t72c-faq-sec) > .t72c-wrap > * { text-align: center; }

/* CENTRING THE TEXT IS NOT CENTRING THE BOX, and this is the third time that
   distinction has cost a fix. `.t72c-deck` carries `max-width: 62ch` with
   `margin: 0 0 28px` -- zero side margins -- so in a band that centres its
   type the deck is a ~691px box sitting hard LEFT of a 1,149px wrap, with its
   text centred inside it. It reads as plainly off-centre, which is what
   Bethany kept seeing.

   It was fixed twice in the wrong place: once in North Carolina's own sheet,
   once page-by-page during the Oregon pass. Nevada loads neither, so Nevada
   still showed 0/458 while Oregon and NC showed 195/195. Fixing it HERE, in
   the sheet all four sites load, is what makes it true everywhere -- and it
   is the shape this whole estate should be in before the sites split per
   location.

   Scoped to the same section list above, so a deck in a LEFT-aligned band
   keeps its left edge and does not float into the middle of a ragged column. */
:is(.t72c-hero, .t72c-trust-sec, .t72c-route-sec, .t72c-signs-sec,
    .t72c-promise-sec, .t72c-method-sec, .t72c-process-sec, .t72c-plan-sec,
    .t72c-inline-cta, .t72c-seo-sec, .t72c-faq-sec) > .t72c-wrap > :is(.t72c-deck,
    .t72c-fineprint, .t72c-creed, .t72c-claim, .t72c-evidence) {
  margin-inline: auto;
}

/* AND SO DOES THE ACTION ROW.                                    (Phase 25b)
   The band's children take `text-align: center` from the rule above, but
   `.t72c-actions` is a FLEX row, and text-align does not move a flex item.
   So on every centred band the head and the deck were centred and the
   buttons under them sat hard against the left gutter — measured on the
   signs, method, process and services bands of every service page in the
   estate. The reference centres both: `.services-foot-actions` and
   `.final-cta-actions` are `display:flex … justify-content:center`. */
:is(.t72c-centred, .t72c-hero, .t72c-trust-sec, .t72c-route-sec,
    .t72c-signs-sec, .t72c-promise-sec, .t72c-method-sec, .t72c-process-sec,
    .t72c-plan-sec, .t72c-inline-cta, .t72c-seo-sec, .t72c-faq-sec,
    .t72c-final-cta, .t72c-svc-sec) > .t72c-wrap > .t72c-actions {
  justify-content: center;
}

.t72c-centred .t72c-eyebrow, .t72c-hero .t72c-eyebrow,
.t72c-trust-sec .t72c-eyebrow, .t72c-route-sec .t72c-eyebrow,
.t72c-signs-sec .t72c-eyebrow, .t72c-promise-sec .t72c-eyebrow,
.t72c-method-sec .t72c-eyebrow, .t72c-process-sec .t72c-eyebrow,
.t72c-plan-sec .t72c-eyebrow, .t72c-inline-cta .t72c-eyebrow,
.t72c-final-cta .t72c-eyebrow, .t72c-faq-sec .t72c-eyebrow,
.t72c-seo-sec .t72c-eyebrow { justify-content: center; }

.t72c-centred .t72c-eyebrow::after, .t72c-hero .t72c-eyebrow::after,
.t72c-trust-sec .t72c-eyebrow::after, .t72c-route-sec .t72c-eyebrow::after,
.t72c-signs-sec .t72c-eyebrow::after, .t72c-promise-sec .t72c-eyebrow::after,
.t72c-method-sec .t72c-eyebrow::after, .t72c-process-sec .t72c-eyebrow::after,
.t72c-plan-sec .t72c-eyebrow::after, .t72c-inline-cta .t72c-eyebrow::after,
.t72c-final-cta .t72c-eyebrow::after, .t72c-faq-sec .t72c-eyebrow::after,
.t72c-seo-sec .t72c-eyebrow::after {
  content: ''; flex: 0 0 auto; width: 26px; height: 1px;
  background: var(--t72-gold);
}

/* A centred band's head sits on its own narrow measure — 720px for a section
   head, which is the reference's `.routing-head` / `.signs-head` / the
   promises head. The grid under it keeps the full 1328. */
.t72c-centred > .t72c-wrap > .t72c-h,
.t72c-centred > .t72c-wrap > .t72c-deck,
.t72c-route-sec > .t72c-wrap > .t72c-h, .t72c-route-sec > .t72c-wrap > .t72c-deck,
.t72c-signs-sec > .t72c-wrap > .t72c-h, .t72c-signs-sec > .t72c-wrap > .t72c-deck,
.t72c-promise-sec > .t72c-wrap > .t72c-h, .t72c-promise-sec > .t72c-wrap > .t72c-deck,
.t72c-method-sec > .t72c-wrap > .t72c-h, .t72c-method-sec > .t72c-wrap > .t72c-deck,
.t72c-process-sec > .t72c-wrap > .t72c-h, .t72c-process-sec > .t72c-wrap > .t72c-deck,
.t72c-plan-sec > .t72c-wrap > .t72c-h, .t72c-plan-sec > .t72c-wrap > .t72c-deck,
.t72c-inline-cta > .t72c-wrap > .t72c-h, .t72c-inline-cta > .t72c-wrap > .t72c-deck,
.t72c-final-cta > .t72c-wrap > .t72c-h, .t72c-final-cta > .t72c-wrap > .t72c-deck {
  max-width: 760px; margin-left: auto; margin-right: auto;
}
/* Cards stay left-aligned inside a centred band — the reference centres the
   HEAD, not the prose in the cards under it. */
.t72c-triage-card, .t72c-sign, .t72c-route, .t72c-prob, .t72c-svc, .t72c-rel,
.t72c-brand, .t72c-promise, .t72c-plan, .t72c-step, .t72c-method-step,
.t72c-book, .t72c-table, .t72c-faqs,
/* PHASE 25B — the promise LIST was missing from this reset, so every row of
   it inherited the band's centring and set ragged-centre prose two lines
   deep. The reference's `.promise-row` is left, like every other row in this
   list. Measured on /portland/, /albany/ and /las-vegas/. */
.t72c-promise-list, .t72c-promise-row { text-align: left; }

/* PHASE 26 — THE RESET ABOVE NEVER WON FOR THE FAQ.
   `.t72c-faqs` is a DIRECT child of the band's wrap, so the centring rule
   `:is(… .t72c-faq-sec) > .t72c-wrap > *` matched it at (0,2,0) and the
   single-class reset at (0,1,0) lost. Every question and every answer on
   every site has been ragged-centre — multi-line prose, centred, which is the
   opposite of the scannable list the rule further down this sheet says it is
   building. The intent was already written; only the specificity was wrong.
   Measured on heat-pumps, reviews, diagnostic-first and financing. */
.t72c-faq-sec > .t72c-wrap > .t72c-faqs,
.t72c-faq-sec .t72c-faq-q,
.t72c-faq-sec .t72c-faq-a { text-align: left; }
.t72c-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* -- links and focus ------------------------------------------------------- */
/* One rule, both surfaces. This used to be `color: inherit` plus a five-band
   on-INK override, and the override was what painted PAPER links onto the
   hero's PAPER booking card at 1.00:1. */
.t72c a { color: var(--t72c-fg-strong); }
.t72c :is(a, summary, button):focus,
.t72c :is(a, summary, button):focus-visible {
  outline: 3px solid var(--t72-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -- buttons: SHAPE only. D46's gold fill + size come from tru72-surfaces.css */
.t72c-actions {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin: 26px 0 0;
}
/* ===========================================================================
   THE CTA LADDER                                                 (Phase 25a)
   ===========================================================================
   THE REFERENCE DOES NOT MAKE EVERY LINK A LARGE SOLID BUTTON. Counted in a
   browser across 49 of our routes and the 43 that have a counterpart, with
   the header, nav, footer and skip link excluded so only in-page calls count:

                          solid fill   of those, large   outlined   quiet link
     Tru72 dist/nc           334            325            215          187
     TByrds_Launch           183            161            188          457

   The reference leads with the quiet tier — 2.5 quiet links for every solid
   button. We inverted it: 0.56 to one, and 97% of our solids were large. The
   reason is structural, not editorial: we had no quiet tier at all. Every CTA
   the components could emit was a box.

   THE REFERENCE'S OWN CONTROL SCALE, read off its computed styles:

     .btn                     Geist Mono 10.5px / 600, .16em, 12px 20px
     .btn-large               11.5px / 600, .16em, 14px 24px      -> 45px tall
     .hero-actions .btn       12px / 600, .18em, 16px 30px        -> 50px tall
     .btn-schedule/.btn-call  10px / 600, 11px 14px               -> 37px tall
     .see-all                 10.5px / 600, .22em, GOLD-AGED,
                              1px GOLD-AGED underline, no box     -> 17px tall

   Ours was one size for three tiers: 15px / 700 for both the ink solid and
   the outline, 51px tall, against the reference's 11.5px / 600 at 45px. The
   BOXES were nearly the same height — the reference's controls are 44 to 50px
   too — so the difference was never the tap target, it was the type. This
   rule takes the type to the reference's and leaves the target alone.

   TWO DELIBERATE DIVERGENCES, both recorded rather than quietly taken:

   1. min-height stays at 44px, not the reference's 37. The reference's
      smallest controls are under the 44px WCAG 2.5.5 target. Its .btn-large,
      which is what this rule matches, is 45px, so 44 costs nothing there and
      protects the tighter rows.

   2. THE GOLD PRIMARY KEEPS 20px / 700 and does not come down to 11.5px.
      That is not an oversight. INK on ANTIQUE GOLD is 4.04:1, an AA pass for
      LARGE text only, so .t72-cta's size IS its contrast licence (D46) and
      shrinking it would be a new accessibility failure, not a style choice.
      The allow-list already carries two controls the reference itself sizes;
      widening it to the main call to action is Bethany's decision, not this
      phase's. Keeping gold at 20px is also what MAKES the ladder legible:

        gold primary   20px / 700, 59px tall
        ink solid      11.5px / 600, 45px
        outlined       11.5px / 600, 45px
        quiet link     10.5px / 600, 17px, no box

      Four steps where there were two. */
.t72c-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 14px 24px;
  border-radius: var(--t72-radius, 2px);
  font-family: var(--t72-font-label);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
/* NOTE THE `.t72c ` PREFIX ON EVERY BUTTON COLOUR RULE BELOW. It is not
   decoration. `.t72c a` above is specificity 0-1-1 and `.t72c-btn-ink` on its
   own is 0-1-0, so the band's colour used to win: an ink button on a PAPER
   band came out INK-on-INK and the label was invisible. Measured 1.00:1 in the
   browser. Prefixing takes these to 0-2-0.

   The INVERSION is now the surface's business, not a band list. A button
   inside a PAPER ISLAND on the INK hero gets the PAPER-band treatment, which
   the old five-band lists could not express: it would have rendered an ink
   button PAPER-on-PAPER (invisible border, invisible outline label). Both
   directions measure PAPER-against-INK at 9.7:1. */
.t72c .t72c-btn-ink {
  background: var(--t72c-btn-ink-bg);
  color: var(--t72c-btn-ink-fg);
  border: 1px solid var(--t72c-btn-ink-bg);
  /* 15px was this tier's own size; it now takes the ladder's 11.5px from
     .t72c-btn, which is what the reference's .btn-large measures. */
}
.t72c .t72c-btn-ink:hover {
  background: var(--t72c-btn-ink-hover); border-color: var(--t72c-btn-ink-hover);
}
.t72c .t72c-btn-outline {
  background: transparent;
  color: var(--t72c-btn-outline-fg);
  border: 1px solid var(--t72c-btn-outline-bd);
}
.t72c .t72c-btn-outline:hover { background: var(--t72c-btn-outline-hover); }

/* THE QUIET TIER — the reference's `.see-all`, which we did not have.
   Geist Mono 10.5px/600 in GOLD-AGED with a 1px GOLD-AGED hairline under it,
   and NO box: 17px tall against the outlined call's 45px. This is how the
   reference says "there is more of this over here" without spending a button
   on it, and its absence is why we shipped 334 solid fills against the
   reference's 183.

   GOLD-AGED at 10.5px WOULD BREAK D83, so it is not GOLD-AGED here: the
   cage licenses #A8854A on PAPER for LARGE text only. --t72c-accent is the
   same role the eyebrow uses at 11px and is already measured per surface
   (GREEN 5.2:1 / LINEN 5.9:1 / PAPER-on-GREEN 5.2:1), so the label carries
   the meaning at full contrast and the GOLD-AGED hairline stays decorative —
   a non-text rule under WCAG 1.4.11, exactly as the utility bar's is.

   The focus ring, the 44px pointer target and the hit area come from the
   padding below rather than from a box, so the tier is quiet to look at and
   the same size to hit. */
.t72c-btn-quiet {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 0 12px;
  font-family: var(--t72-font-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  border: 0;
  transition: none;
}
.t72c .t72c-btn-quiet { color: var(--t72c-accent); }
.t72c-btn-quiet > .t72c-btn-quiet-rule {
  /* The underline is on an inner span so it hugs the words, not the 44px
     target. Without it the hairline would sit 12px below the type. */
  border-bottom: 1px solid var(--t72-gold);
  padding-bottom: 2px;
}
.t72c .t72c-btn-quiet:hover > .t72c-btn-quiet-rule {
  border-bottom-color: currentColor;
}
/* The reference writes the arrow into the link text ("See all FAQs →").
   A pseudo-element says the same thing without putting a glyph in the copy,
   and keeps it out of anything that reads the label back. */
.t72c-btn-quiet::after {
  content: "\2192";
  font-size: 1.15em;
  letter-spacing: 0;
  line-height: 1;
}

.t72c-note {
  font-size: 14px; line-height: 1.45; margin: 12px 0 0;
  color: var(--t72c-fg-muted);
}
.t72c-fineprint {
  font-size: 14px; line-height: 1.5; margin: 14px 0 0;
  color: var(--t72c-fg-muted); max-width: 70ch;
}

/* -- "What it means:" — the Oregon translation device, spec §1.3 DO #5 ------ */
/* PHASE 25B — THE FILL COMES OFF.
   `.t72c-means` has no counterpart in the reference at all: it is Oregon's
   own translation device (spec 1.3 DO #5) and the CONTENT stays. What came
   off is the enclosure. It was a padded panel with its own PAPER fill and a
   3px gold slab down the left, sitting inside a method step that was already
   inside a section — a box in a box, three of them in a row, which is
   exactly the weight Bethany saw. The reference's way of marking an aside is
   a hairline and space, so that is what this is now: the same 1px gold as
   every other rule in the system, the indent kept so the aside still reads
   as an aside, and the text on the band's own ground.

   CONTRAST IS UNAFFECTED, and was checked rather than assumed: the fill was
   PAPER on a LINEN band and PAPER-WARM on a paper band, and the type is
   --t72c-fg-strong either way — INK on LINEN 5.89:1, INK on PAPER 12.1:1.
   On a dark band the fill was already `transparent`, so nothing moves there.
   --t72c-means-bg is kept as a token for any band that wants the panel back. */
.t72c-means {
  margin: 14px 0 0;
  padding: 2px 0 2px 16px;
  border-left: 1px solid var(--t72-gold);
  background: none;
  color: var(--t72c-fg-strong);
  font-size: 16px; line-height: 1.55;
  max-width: 70ch;
}
.t72c-means-label {
  font-family: var(--t72-font-label);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-size: 13px;
  display: inline-block; margin-right: 6px;
  /* 13px, far under the 18.66px bold that licenses gold on ink, so this is
     GREEN 5.2:1 / LINEN 5.7:1 and never gold's 4.04:1. */
  color: var(--t72c-accent);
}
.t72c-claim { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.35; margin: 0 0 10px; }
.t72c-evidence {
  font-family: var(--t72-font-mono, var(--t72-font-body));
  font-size: 15px; line-height: 1.6; margin: 0 0 4px;
  color: var(--t72c-fg-muted);
}
.t72c-means-block { padding: 0; background: none; }

/* ==========================================================================
   1. THE HERO                                                    (Phase 14)
   --------------------------------------------------------------------------
   THIS IS THE BLOCK THAT WAS WRONG. The reference hero is:

     · CREAM ground, not ink. The page opens on paper and stays there.
     · ONE CENTRED COLUMN on a 1080px measure — small eyebrow between two gold
       hairlines, an uppercase display headline whose second half is an italic
       gold-warm line under it, then a one-line promise.
     · The BOOKING CARD CENTRED BELOW that, narrow (560px), floating on the
       cream, not floated into a right-hand column.
     · The longer lede LAST, centred under the card on a 64ch measure.
     · The brand mark as a large watermark at 7% behind the right-hand side.

   Phase 6 built an ink-ground, 1.25fr/.9fr, left-aligned split. Everything
   below restores the column.
   ========================================================================== */
.t72c-hero {
  padding: 44px var(--t72-gutter) 76px;
  position: relative;
  overflow: hidden;
  background: var(--t72-paper);
}
/* THE WATERMARK. `--t72c-watermark` is set per site by that site's own sheet
   (NC sets the Tru72 mark); with no image the rule paints nothing and costs
   nothing. It is decoration, and aria-hidden by construction because it is a
   background.

   22% WAS PHASE 20'S ANSWER, AND PHASE 25A WITHDREW IT FOR NORTH CAROLINA.
   The reasoning below — "the reference's 7% is right for a flat vermilion
   cardinal; ours is mostly mid-tone INK and cream and at 7% it did not read
   at all" — does not survive measurement. Both marks were composited over
   PAPER and the mean relative-luminance drop across the whole mark compared:
   at .07 the cardinal drops 0.0275 and the owl 0.0285. The owl is 3.6%
   HEAVIER per unit opacity, not fainter — its mean alpha coverage is 0.375
   against the cardinal's 0.267. See docs/PHASE25A_NC_RECONCILE.md §1.14.
   The block further down sets the reference's own opacity per page family;
   .22 survives only as the default for pages that declare no family, which
   today is Oregon, Nevada and the brand hub. The contrast arithmetic below is
   still correct and is still the ceiling.

   At 1280px exactly ONE text node on the
   Oregon homepage sits over the mark on bare PAPER (the hero's 16.5px lede;
   the headline, the stats and the booking card either clear the mark or sit
   on their own opaque ground). Its darkest pixel of owl is #3C3C3D, so the
   worst ground under that paragraph composites to #D4CDB9 and INK on it
   measures:

       opacity   ground    contrast   AA needs 4.5:1
          .07    #F4EDD3     8.74:1
          .22    #D4CDB9     6.68:1   <- shipped
          .34    #D4CFBB     5.28:1
          .45    #C8C3B1     4.17:1   FAILS

   .22 is three times the ink and still 48% clear of the threshold. Anything
   above .34 is a contrast failure and the mark stops being a watermark. */
.t72c-hero::before {
  content: '';
  position: absolute;
  right: var(--t72c-wm-right, 40px); top: 50%; transform: translateY(-50%);
  width: var(--t72c-wm-size, 480px); height: var(--t72c-wm-size, 480px);
  background: var(--t72c-wm-image, var(--t72c-watermark, none))
              center/contain no-repeat;
  opacity: var(--t72c-wm-opacity, .22); z-index: 1; pointer-events: none;
}

/* ===========================================================================
   THE MASCOT'S ROLE, RE-MEASURED                                 (Phase 25a)
   ===========================================================================
   THE OWL WAS BEHIND EVERY HERO. Measured in Chromium at 1280px:

                              pages with a hero mascot   opacity   box      offset
     Tru72 dist/nc            42 of 49                   .22       480px    right:  40px
     TByrds_Launch reference  14 of 43                   .05-.07   480-760  right:-180px

   28 of the reference's 43 heroes carry NO mascot at all, and the 11 inner
   pages that do carry one push it 180px OFF the right edge at 720px, so what
   enters the sheet is the flank of a very large, very faint shape. Ours was
   the HOMEPAGE treatment — a 480px disc parked at right:40px, inside the
   centred 1080px copy column — repeated on 42 pages. Measured against each
   page's own <h1> box, the mark overlapped the headline on 39 of them, by a
   mean of 30% of the headline's width and up to 39%. That is the "competing
   with the words" Bethany saw, and it is a number, not an impression.

   THE .22 WAS DERIVED FROM A CLAIM THAT DOES NOT SURVIVE MEASUREMENT. The
   note above says the reference's 7% "is right for a flat vermilion cardinal"
   and that the Tru72 owl "at 7% did not read at all". Both marks were loaded
   and composited over PAPER in numpy, and the mean relative-luminance drop
   across the whole mark — how much of the page it actually darkens, which is
   what "reads" means — comes out:

       opacity   reference cardinal   Tru72 owl
         .05          0.0199            0.0205
         .07          0.0275            0.0285
         .22          0.0800            0.0838

   The owl is 3.6% HEAVIER per unit opacity than the cardinal, not lighter.
   Its mean alpha coverage is higher (0.375 vs 0.267) and that more than
   offsets its paler ink. So .22 was not compensating for a faint mark; it was
   simply 3.0x the reference's weight. What the reference buys legibility with
   is AREA and CROP — 720-760px instead of 480px — not opacity.

   So: the reference's own numbers, per family, and only on the families whose
   reference counterpart has a mascot. A page that declares no family keeps
   the old behaviour exactly. PHASE 25B declared a family on every Oregon,
   Nevada and brand page, so this block now governs all five builds: 102
   Oregon heroes and 40 Nevada ones came off .22 and 480px in one step,
   because the families they were given are not the three the reference puts
   a mascot on.

   Contrast is unaffected and improves: the darkest owl pixel is #333436, so
   the worst ground under a hero paragraph goes from #D2CBB7 (INK at 6.56:1)
   to #F5ECD4 at .05 (INK at 9.01:1). The .34 ceiling in the note above still
   stands and we are now a long way under it.

   To raise the mark again, change ONE token per family below. */
body[class*="t72-fam-"] .t72c-hero::before { --t72c-wm-image: none; }

body.t72-fam-home .t72c-hero::before {
  --t72c-wm-image: var(--t72c-watermark, none);
  --t72c-wm-size: 480px; --t72c-wm-right: 40px; --t72c-wm-opacity: .14;
}
body.t72-fam-city-landing .t72c-hero::before {
  --t72c-wm-image: var(--t72c-watermark, none);
  --t72c-wm-size: 760px; --t72c-wm-right: -160px; --t72c-wm-opacity: .12;
}
body.t72-fam-equipment .t72c-hero::before,
body.t72-fam-seasonal .t72c-hero::before {
  --t72c-wm-image: var(--t72c-watermark, none);
  --t72c-wm-size: 720px; --t72c-wm-right: -180px; --t72c-wm-opacity: .10;
}
/* ===========================================================================
   THE SCHEDULE PAGE OPENS DARK                                   (Phase 25b)
   ===========================================================================
   Bethany: `/portland/schedule/` and `/albany/schedule/` are "a mess" — a
   large cream marketing hero with a lot of material ahead of the booking
   choices. The reference's `schedule-charlotte` is three sections and 1850px
   of document: a DARK introductory panel, the visit choices, a fallback. Its
   opening, read off its own source:

     .sched-hero    { background:var(--ink); color:var(--paper);
                      padding:72px 56px 64px; text-align:center }
     .sched-hero::before { 600px mark, CENTRED, opacity .04 }
     .sched-hero h1 { 'Fraunces' clamp(36px,4.5vw,60px); font-weight:300;
                      line-height:1.1; letter-spacing:-.01em;
                      color:var(--paper) }   <- sentence case, NOT uppercase
     .sched-hero h1 em { font-style:italic; color:var(--gold) }  <- INLINE
     .sched-hero p  { 18px; color:var(--linen); max-width:520px }

   That is the softer sentence-case serif with gold italic emphasis she
   describes, and it is why the page reads as an invitation rather than a
   billboard. Ours was `.t72c-h1`: Friz Quadrata 700, uppercase, on cream,
   with the italic half dropped to its own line at .82em.

   CONTRAST IS THE REASON THE GOLD MAY BE INLINE HERE AND NOWHERE ELSE.
   ANTIQUE GOLD on INK is 4.04:1 — an AA pass for LARGE text only (D83) — and
   this family's clamp has a 36px minimum, so an `em` at 1em is 36px at every
   viewport and never approaches the 24px floor. PAPER on INK is 9.7:1.
   The whole INK contract is redeclared below rather than colouring children
   one by one, exactly as a band does.
   ========================================================================== */
body.t72-fam-schedule .t72c-hero {
  --t72c-fg:                var(--t72-type-on-ink);
  --t72c-fg-muted:          var(--t72-type-on-ink);
  --t72c-fg-strong:         var(--t72-type-on-ink-strong);
  --t72c-display:           var(--t72-display-on-ink);
  --t72c-display-soft:      var(--t72-display-on-ink);
  --t72c-accent:            var(--t72-type-on-ink);
  --t72c-rule-soft:         var(--t72-rule-on-ink);
  --t72c-btn-ink-bg:        var(--t72-paper);
  --t72c-btn-ink-fg:        var(--t72-ink);
  --t72c-btn-ink-hover:     var(--t72-linen);
  --t72c-btn-outline-fg:    var(--t72-paper);
  --t72c-btn-outline-bd:    var(--t72-rule-on-ink);
  --t72c-btn-outline-hover: var(--t72-rule-on-ink);
  --t72c-means-bg:          transparent;

  background: var(--t72-ink);
  color: var(--t72c-fg-strong);
  padding: 72px var(--t72-gutter) 64px;
}
/* The reference's mark on this page is centred behind the panel, not pushed
   off the right edge, and at .04 it is the faintest in the estate. */
body.t72-fam-schedule .t72c-hero::before {
  --t72c-wm-image: var(--t72c-watermark, none);
  width: 600px; height: 600px;
  right: auto; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  opacity: .04;
}
body.t72-fam-schedule .t72c-h1 {
  /* The SURFACE's strong text role, not --t72c-display. On a dark band
     --t72c-display resolves to ANTIQUE GOLD, which painted the WHOLE headline
     gold; the reference paints the headline PAPER and only the italic half
     gold. --t72c-fg-strong is PAPER here, 9.7:1, and stays correct if this
     panel is ever moved to another ground. (audit check: a component rule may
     not name a type token directly.) */
  color: var(--t72c-fg-strong);
  font-family: var(--t72-font-body);
  font-weight: 300;
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-bottom: 16px;
}
body.t72-fam-schedule .t72c-h1 em {
  display: inline;
  font-family: inherit;
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--t72-gold);
}
/* The reference's own panel paragraph is 520px wide because it is ONE
   sentence. Ours is four, and this rule may not shorten them, so the measure
   goes the other way: 68ch takes the deck from four lines to three at 1280
   and costs nothing at a phone width, where it wraps either way. */
body.t72-fam-schedule .t72c-hero-lede { max-width: 68ch; }
body.t72-fam-schedule .t72c-hero-grid { gap: 20px; }
body.t72-fam-schedule .t72c-hero .t72c-actions { margin-top: 20px; }
body.t72-fam-schedule .t72c-hero .t72c-deck { font-size: 18px; }

.t72c-hero > .t72c-wrap { position: relative; z-index: 2; }
.t72c-hero-grid {
  display: flex; flex-direction: column; align-items: center;
  gap: 28px;
  max-width: 1080px; margin: 0 auto;
}
.t72c-hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; }
.t72c-hero-copy .t72c-h1 { margin-bottom: 10px; }
.t72c-hero-promise {
  font-family: var(--t72-font-body); font-style: italic;
  font-size: 18px; line-height: 1.4; letter-spacing: .005em;
  color: var(--t72c-fg-muted); margin: 0;
}
.t72c-hero-lede {
  max-width: 64ch; margin: 0 auto;
  font-size: 16.5px; line-height: 1.6; color: var(--t72c-fg);
}
.t72c-hero-lede .t72c-deck { margin: 0; max-width: none; font-size: inherit; line-height: inherit; }
.t72c-hero-lede .t72c-actions { justify-content: center; }
.t72c-hero-stats { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; }
.t72c-hero-stats li { display: flex; flex-direction: column; }
.t72c-stat-n {
  font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: clamp(27px, 2.6vw, 34px); color: var(--t72c-display); line-height: 1;
}
.t72c-stat-l {
  font-size: 14px; letter-spacing: .04em; margin-top: 6px; color: var(--t72c-fg);
}
/* -- the middle band of the hero column: booking card and/or photograph ---- */
/* THE MIDDLE OF THE HERO COLUMN, 660px — and the PHOTOGRAPH inside it still
   560px.                                                    (Phase 16)
   The reference's booking card is 560px wide and its schedule control says
   "SCHEDULE ->" at 11px. Ours says "Book Charlotte" at the 19px/700 that
   D46 requires of a gold fill, and a 241px market panel cannot hold that:
   measured, the label needs 207px in a 173px box and wrapped to two lines.
   Shortening the label further was not the answer — Bethany chose these
   words — and crushing the control's padding to fit is how a button stops
   looking like one. So the card takes the width its own type needs: 660px
   leaves 16px of slack on the longest label and 51px on the shorter.
   This is the same consequence Phase 14 recorded for the card's HEIGHT:
   D46 makes our controls bigger than the reference's, and the card is what
   gives. The photograph is not, so it keeps the reference's 560px. */
.t72c-hero-aside { display: grid; gap: 28px; align-content: start; width: 100%; max-width: 660px; margin: 0 auto; }
.t72c-hero-photo { width: 100%; max-width: 560px; margin-inline: auto; }
.t72c-hero-solo .t72c-hero-lede { max-width: 72ch; }
/* Photographs carry a gold keyline, the same hairline the booking card uses.
   No fixed height: these are supplied photographs of unknown aspect ratio, and
   the width/height attributes on the tag reserve the space. */
.t72c-hero-photo img, .t72c-story-photo img, .t72c-photo-strip-item img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--t72-rule-gold);
  border-radius: var(--t72-radius, 2px);
}

/* ==========================================================================
   THE BOOKING CARD — "pick your market"                          (Phase 14)
   --------------------------------------------------------------------------
   THE WARM OLIVE SURFACE IS THE POINT. On the reference this card is
   `background: var(--ink-soft)` with a 1px aged-gold keyline, and --ink-soft is
   #696859 — which is SCENERY GREEN, one of the approved five. The name is what
   misled the earlier pass: read as "a soft shade of ink" it was painted with
   INK #3D3F3F (and here, with PAPER), and the single most-liked surface on the
   site disappeared.

   Its colour contract is declared with the other SCENERY GREEN surfaces above,
   so PAPER (5.23:1) carries every label inside it. The nested market panels are
   a translucent INK over that green — see --t72-panel-on-dark — which is the
   recessed look the reference gets from its own translucent charcoal, and
   PAPER on the
   result measures 6.46:1.
   ========================================================================== */
/* The card's small label sits ABOVE its heading on the reference ("— CHOOSE
   YOUR MARKET", then "SCHEDULE SERVICE TODAY."). The component renders heading
   first, so the order is set here rather than by moving the markup, which would
   change the heading's position in the document outline. */
.t72c-book {
  display: flex; flex-direction: column;
  border: 1px solid var(--t72-gold);
  border-radius: var(--t72-radius, 2px);
  padding: 32px 32px 28px;
  box-shadow: var(--t72-shadow-deep, none);
}
.t72c-book-h {
  font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: 22px; line-height: 1; letter-spacing: .015em;
  text-transform: uppercase; margin: 0 0 6px;
}
.t72c-book-deck {
  order: -1;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--t72-font-label); font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  margin: 0 0 8px; color: var(--t72c-fg-muted);
}
.t72c-book-deck::before {
  content: ''; flex: 0 0 auto; width: 18px; height: 1px; background: var(--t72-gold);
}
.t72c-book-h { margin-bottom: 20px; }
.t72c-mkts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.t72c-mkt { display: flex; flex-direction: column; }
.t72c-mkt-link {
  display: flex; flex-direction: column; flex: 1; gap: 10px; text-decoration: none;
  border: 1px solid var(--t72-rule-gold-soft);
  border-radius: var(--t72-radius, 2px);
  padding: 20px 18px; min-height: 48px;
  background: var(--t72-panel-on-dark);
  transition: border-color .15s ease;
}
.t72c-mkt-link:hover { border-color: var(--t72-gold); }
/* THE PER-CITY PAIR.                                             (Phase 20)
   The reference's market panel is not a link: it is a panel holding the city,
   its serving line and that city's OWN two controls — a gold Schedule and an
   outline Call. `.t72c-mkt-panel` is the same recess as `.t72c-mkt-link`
   above (it joins the INK contract in the band list at the top of this sheet,
   so PAPER resolves inside it exactly the same way) with the hover border
   moved onto the controls, because a panel that is not clickable must not
   pretend to be. */
.t72c-mkt-panel {
  display: flex; flex-direction: column; flex: 1; gap: 10px;
  border: 1px solid var(--t72-rule-gold-soft);
  border-radius: var(--t72-radius, 2px);
  padding: 20px 18px;
  background: var(--t72-panel-on-dark);
}
.t72c-mkt-panel:hover { border-color: var(--t72-rule-gold); }
/* The pair stacks and sits on the floor of the panel, so two cities whose
   serving lines run to different depths still line their controls up. */
.t72c-mkt-actions {
  display: flex; flex-direction: column; gap: 8px; margin-top: auto;
}
.t72c-mkt-actions > .t72c-mkt-go { margin-top: 0; }
/* The call control. PAPER on the recess measures 5.51:1, and at 15px/700 it
   is normal-size text, so it is an OUTLINE and never a gold fill — D46's gold
   needs 18.66px bold and this label is deliberately one short word. 48px tall,
   full width of the panel, which is WCAG 2.5.8 with room to spare. */
.t72c-mkt-actions > .t72c-btn {
  width: 100%; min-height: 48px; padding: 12px 14px; font-size: 15px;
}
.t72c-mkt-name {
  display: inline-block; font-family: var(--t72-font-display);
  font-weight: var(--t72-display-weight); font-size: 24px; line-height: 1;
  letter-spacing: .005em; text-transform: uppercase;
}
/* The reference runs the rating and the "now serving" line together as one
   italic sub-line under the city name; the component keeps them as two fields,
   so they stack with no gap between them. */
.t72c-mkt-rating, .t72c-mkt-serving {
  display: block; font-family: var(--t72-font-body); font-style: italic;
  font-size: 12.5px; line-height: 1.35; color: var(--t72c-fg-muted);
}
.t72c-mkt-rating { margin-bottom: -8px; }
/* THE GOLD BOOKING BUTTON. The reference's schedule control is a gold fill and
   this is the one place the build can reproduce it inside D46: INK on ANTIQUE
   GOLD is 4.04:1, which clears AA large text at 18.66px bold, so the label is
   locked to 19px/700 in the same block as the fill. `.t72c ` prefixes the
   colour so it beats `.t72c a` (0-1-1), which would otherwise paint the label
   PAPER on gold at 2.6:1. */
.t72c-mkt-go {
  display: block; margin-top: auto; padding: 12px 14px;
  font-family: var(--t72-font-label);
  font-size: 19px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-align: center;
  background: var(--t72-gold);
  border: 1px solid var(--t72-gold);
}
.t72c .t72c-mkt-go { color: var(--t72-ink); }
.t72c .t72c-mkt-link:hover .t72c-mkt-go {
  background: var(--t72-paper); border-color: var(--t72-paper); color: var(--t72-ink);
}
.t72c-mkt-note {
  font-family: var(--t72-font-body); font-style: italic;
  font-size: 12.5px; margin: 8px 0 0; color: var(--t72c-fg-muted);
}
/* The card-level call buttons. The reference puts a small "Call" inside each
   market panel; the component carries them as one card-level row, so they are
   laid out two-up to match the market grid above rather than stacking
   full-width and making the card half again as tall. */
.t72c-book .t72c-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
.t72c-book .t72c-actions > .t72c-btn { font-size: 14px; padding: 12px 10px; width: auto; }
/* A market whose markets share ONE number has ONE call button, and half a row
   is not a button. Oregon is that case: Portland and Albany are both reached on
   the same Oregon line, so the row holds a single control and it takes the whole
   width. NC, with a number per market, still lays two out side by side. */
.t72c-book .t72c-actions > .t72c-btn:only-child { grid-column: 1 / -1; }

.t72c-book .t72c-note {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--t72-rule-gold-soft);
  font-family: var(--t72-font-body); font-style: italic;
  font-size: 12.5px; text-align: center;
}

/* -- 2. intent triage ------------------------------------------------------
   REBUILT AGAINST THE REFERENCE, MEASURED AT 1280px.              (Phase 21)

   Reference `.intent-triage`, every value read off the RENDERED page rather
   than off its stylesheet, so nothing here is copied from a rule that never
   applied:

     section         padding 64px 56px 72px on PAPER
     .intent-head    max-width 70ch (725.8px drawn), 36px below it
     .eyebrow        Geist Mono 11px / .22em / 500, SCENERY GREEN
     h2              clamp(28px, 3.2vw, 42px) -> 40.96px, line-height 1.05,
                     max-width 32ch, uppercase
     h2 em           the SAME size as the h2, Fraunces italic 400, GOLD-AGED
     .intent-list    grid repeat(3, 1fr), gap 22px
     .intent-row     SCENERY GREEN, 1px border, padding 32px 28px, gap 14px,
                     all three 343.2px tall
     .intent-num     Geist Mono 10px / .26em / 600
     .intent-heading 22px / 23.1px display, ONE line
     .intent-body    15.5px / 24.025px, five lines
     .intent-cta     margin-top auto, padding-top 16px, 1px gold top rule,
                     column gap 10px  <- the WHOLE block goes to the floor
     .intent-actions row, gap 8px, each button flex:1, 39px tall
     .btn            Geist Mono 10px / .14em / 600, padding 12px 14px
     .intent-meta    Geist Mono 9.5px / .14em / 500, UNDER the actions

   OURS DIVERGED FIVE WAYS AND ALL FIVE ARE FIXED: 80px section padding for
   64/72, a full-width head for 70ch, a .74em italic for a full-size one, the
   note above the actions rather than below, and `margin-top:auto` on the
   actions alone rather than on the whole footer — which is what let card three
   sit its buttons 58px higher than cards one and two.

   THE THREE COLOURS WE DO NOT COPY, and why. Each is listed with its measured
   ratio in docs/PHASE21_RECONSTRUCTION.md; all three are the reference putting
   warm type on SCENERY GREEN, which this palette has measured as failing:

     .intent-body   reference LINEN on green   3.13:1  -> we ship PAPER 5.22:1
     .intent-num    reference ANTIQUE GOLD     2.15:1  -> we ship PAPER 5.22:1
     .intent-meta   reference LINEN            3.13:1  -> we ship PAPER 5.22:1

   Everything else — size, tracking, weight, position and box — is the
   reference's. */
.t72c-triage-sec { padding-top: 64px; padding-bottom: 72px; }
.t72c-triage-head { max-width: 70ch; margin: 0 0 36px; }
/* The reference's headline is narrower than its head block: 32ch, so the
   display line breaks before the italic line rather than running the full
   measure. The 70ch above is what the eyebrow uses. */
/* The opening headline is the reference's OWN clamp, which is one step down
   from the system default: `clamp(28px, 3.2vw, 42px)` against our
   `clamp(30px, 3.4vw, 46px)`, i.e. 40.96px against 43.52px at 1280. The
   reference runs a different clamp per section — nine of them on this page —
   so this is scoped to the opening rather than moved into `.t72c-h`. */
.t72c-triage-sec .t72c-triage-head > .t72c-h {
  max-width: 32ch; margin: 0;
  font-size: clamp(28px, 3.2vw, 42px);
  /* 1.05, the reference's. The system default is 1.0, which closed the gap
     between the display line and the gold italic under it by 2.1px at 1440. */
  line-height: 1.05;
}
.t72c-triage-sec .t72c-triage-head > .t72c-eyebrow { margin: 0 0 18px; }
.t72c-triage-sec .t72c-triage-head > .t72c-deck { margin: 18px 0 0; }
/* The italic line is the SAME size as the display line it follows — ours was
   .74em of it. Still inside D83's cage: the floor is `max(24px, 1em)` of
   clamp(30px, …), so its smallest rendered size is 30px, above the 24px that
   licenses GOLD-AGED on PAPER. */
.t72c-triage-sec .t72c-h em { font-size: max(24px, 1em); }

.t72c-triage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* `min-width: 0` HERE IS STRUCTURAL, NOT COSMETIC.                (Phase 24)
   A grid item's automatic minimum size is its MIN-CONTENT width, so a `1fr`
   track is really `minmax(auto, 1fr)` and cannot come out narrower than the
   widest unbreakable thing inside it. This card's `.t72c-actions` row is
   `flex-wrap: nowrap` holding two `white-space: nowrap` buttons, so its
   min-content is both labels side by side — 520px on /las-vegas/, whose second
   button reads "Call (725) 223-1024". The single `1fr` track therefore
   computed to 566.422px inside a 346px grid at 390px and the page scrolled
   198px sideways; at 1280px each of the three tracks computed to 578px and it
   scrolled 205px. Measured every 320–1440px: the card was 566px wide at every
   width from 320 to 600, whatever the viewport did.

   It is the fault Phase 3b found on the stat band, and the 560px block below
   already answers it for `.t72c-tc-list li` and `.t72c-tc-copy`. It belongs on
   the card itself rather than on the one page that showed it, so that no other
   page built from this component can develop it: the track now sizes to the
   grid, and the phone rule below gives the two actions somewhere to go. */
.t72c-triage-card {
  min-width: 0;
  border: 1px solid var(--t72-gold);
  border-radius: var(--t72-radius, 2px); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .25s ease;
}
.t72c-triage-card:hover { border-color: var(--t72-paper); }
/* The numbered category label. PAPER, not the reference's ANTIQUE GOLD: gold
   on SCENERY GREEN is 2.15:1 and no size rescues it (D42). Size, tracking,
   weight and position are the reference's exactly. */
.t72c-triage-num {
  margin: 0;
  font-family: var(--t72-font-label);
  font-size: 10px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--t72c-fg-strong);
}
.t72c-triage-h {
  font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: clamp(20px, 1.9vw, 22px); line-height: 1.05;
  letter-spacing: .005em; text-transform: uppercase; margin: 0;
  color: var(--t72c-fg-strong);
}
.t72c-triage-body { font-size: 15.5px; line-height: 1.55; margin: 0; flex-grow: 1; }
/* The reference's .intent-cta: a gold hairline, then the actions, then the
   footnote. THE WHOLE BLOCK goes to the card floor, so every card's buttons
   land on the same line whether or not it carries a note. */
.t72c-triage-cta {
  margin-top: auto; padding-top: 16px;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--t72-rule-gold);
}
/* THE ROW WRAPS; IT USED TO BE `nowrap`.                          (Phase 24)
   `white-space: nowrap` on the BUTTON is the reference's and stays: it is what
   holds "Call (725) 223-1024" on one line rather than breaking a phone number
   across two, and it is not negotiable.

   `flex-wrap: nowrap` on the ROW was the reference's too, and it does not
   survive `repeat(3, 1fr)`. The reference's own grid lets its three columns
   come out 354.8 / 399.3 / 354.8 — unequal, each opening to fit its buttons.
   Ours asks for three EQUAL thirds, so when a card's two nowrap labels needed
   520px the only way the browser could honour both was to make every track
   520px wide and let the page scroll: measured on /las-vegas/, 198px sideways
   at 390px and 205px at 1280px. `min-width: 0` on the card stops the track
   being dragged open, and then the row has to be able to break or the labels
   simply overflow the card instead — three buttons printing over each other in
   the third Las Vegas card at 1280px.

   So the row wraps and the buttons size to their content (`flex: 1 1 auto`
   rather than `1 1 0`, whose zero basis can never reach a wrap threshold).
   Each line's buttons then grow to fill it, so a row that fits still reads as
   equal halves. Measured at 320, 360, 375, 390, 412, 430, 500, 560, 700, 880,
   1024, 1280 and 1440px on all 10 pages that carry this component: no button
   clipped, no page scrolling sideways, and the nine pages other than
   /las-vegas/ render identically to before. */
.t72c-triage-card .t72c-actions {
  margin: 0; gap: 8px; flex-wrap: wrap; align-items: stretch;
}
.t72c-triage-card .t72c-actions > .t72c-btn {
  flex: 1 1 auto; min-width: 0; padding: 12px 14px;
  font-size: 10px; letter-spacing: .14em; font-weight: 600;
  min-height: 39px; line-height: 1.15; white-space: nowrap;
}
/* ==========================================================================
   THE CARD'S PRIMARY IS THE REFERENCE'S GOLD BUTTON, AT THE REFERENCE'S SIZE.
   --------------------------------------------------------------------------
   ACCEPTED WCAG AA FAILURE — Bethany's call, 2026-09-23.

   The reference's `.intent-actions .btn-schedule` is ANTIQUE GOLD #C39954
   filled with an INK #3D3F3F label at Geist Mono 10px / weight 600. Measured,
   INK on ANTIQUE GOLD is 4.04:1. At 10px that is normal text and AA wants
   4.5:1, so the reference's own control fails by 0.46.

   Phase 21 shipped the nearest passing variant instead — a PAPER fill at
   12.1:1 — and Bethany overruled it: be faithful. She took the trade-off
   knowingly, on the record, and it supersedes D46's "gold fill only at 24px,
   or 18.66px at weight 700" FOR CONTROLS THE REFERENCE ITSELF SIZES. It
   licenses nothing else. Body text, headings, eyebrows, the numbered labels
   and the card footnote all still resolve to PAPER at 5.22:1, because those
   are not controls and the reference's warm-on-green type there was a
   different failure that she did not accept.

   It is on the audit's ACCEPTED_CONTRAST_FAILURES list by name, with the
   measured ratio and the threshold it misses, so the contrast check still
   RUNS at full strength: it reports "N accepted, 0 unexpected" and fails
   loudly on any pair that is not on that list.
   ========================================================================== */
.t72c .t72c-triage-card .t72c-actions > .t72c-btn-ink {
  background: var(--t72-gold);
  color: var(--t72-ink);
  border-color: var(--t72-gold);
}
.t72c .t72c-triage-card .t72c-actions > .t72c-btn-ink:hover {
  background: var(--t72-paper);
  border-color: var(--t72-paper);
  color: var(--t72-ink);                /* 12.1:1 — the hover state passes */
}
/* The secondary is the reference's `.btn-call`: transparent over SCENERY
   GREEN with a PAPER label (5.22:1, passes) inside a half-opacity PAPER
   keyline. The keyline resolves to #B4AF9A over green, 2.56:1, under 1.4.11's
   3:1 for a control boundary — also accepted, also listed, and the label it
   surrounds is what carries the meaning. */
.t72c .t72c-triage-card .t72c-actions > .t72c-btn-outline {
  border-color: rgba(255, 246, 220, .5);
}
/* The supporting note under the actions. PAPER for the same reason as the
   body; the link variant keeps an underline so colour alone is not what marks
   it (WCAG 1.4.1). */
.t72c-triage-meta {
  margin: 0;
  font-family: var(--t72-font-label);
  font-size: 9.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1.45;
  color: var(--t72c-fg-strong);
}
.t72c .t72c-triage-meta-link {
  font-weight: 600; color: var(--t72c-fg-strong);
  text-decoration: underline; text-underline-offset: 3px;
}
.t72c .t72c-triage-meta-link:hover { text-decoration-thickness: 2px; }

/* ==========================================================================
   3. THE STAT BAND                                               (Phase 14)
   --------------------------------------------------------------------------
   NARROW, and that is the whole idea. The reference's trust band is 28px of
   padding — about 100px tall — sitting on SCENERY GREEN between two gold
   hairlines, with five centred cells divided by vertical gold hairlines. It
   BREAKS the cream page; it does not become the page. Phase 6 gave it 40px on
   flat INK with left-aligned cells and no dividers.
   ========================================================================== */
.t72c-trust-sec { padding: 28px var(--t72-gutter); }
.t72c-trust {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0; align-items: center; max-width: 1320px; margin-inline: auto;
}
.t72c-trust-item {
  display: flex; flex-direction: column; text-align: center;
  padding: 6px 24px;
  border-right: 1px solid var(--t72-rule-gold-soft);
  /* MEASURED at 375px: the stat band was the single reason 12 Oregon and
     Nevada pages scrolled sideways. A grid item will not shrink below its
     widest unbreakable word, and Oregon's stat labels are longer than North
     Carolina's — "SAME VALUES, TESTED METHOD" against "SINCE 1972" — so the
     two-up row pushed the document to 393-402px. (Phase 15) */
  min-width: 0;
}
.t72c-trust-n, .t72c-trust-l { min-width: 0; overflow-wrap: break-word; }
.t72c-trust-item:last-child { border-right: none; }
.t72c-trust-n {
  font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: 22px; line-height: 1; letter-spacing: .015em; text-transform: uppercase;
  color: var(--t72c-fg-strong);
}
/* 9.5px/500, the reference's `.trust-band .lab`. It was 11px/700, which is a
   serif being pushed to look like a mono; with Geist Mono under it the
   reference's own weight is right. */
.t72c-trust-l {
  font-family: var(--t72-font-label); font-size: 9.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.45;
  margin-top: 8px; color: var(--t72c-fg);
}
/* On LINEN the cell divider is the reference's dark hairline, not the gold one
   it used on green: the reference draws its own charcoal at 22% alpha there,
   and we draw --t72-rule-strong, which is INK at 32%. The literal is not
   repeated here because that charcoal is a retired value and audit check 2
   reads comments as well as declarations. */
.t72c-trust-sec .t72c-trust-item { border-right-color: var(--t72-rule-strong); }
.t72c-trust-sec .t72c-trust-item:last-child { border-right: none; }
.t72c-trust-sec .t72c-creds { justify-content: center; margin-top: 18px; padding-top: 14px; }

/* THE BAND ON SCENERY GREEN, WITH GOLD CARRYING THE ACCENTS.     (Phase 27)
   Bethany, for North Carolina: "this section background green with gold
   accents". ANTIQUE GOLD on SCENERY GREEN measures 2.15:1, which is legal for
   text at NO size, so gold here is decoration only and exempt from 1.4.11: the
   frame (the gold hairlines above and below, already unconditional further
   up), the vertical cell dividers, and a new rule under each value that
   separates it from its label. The value and the label stay PAPER at 5.23:1.
   A gold label would be an AA failure dressed as a styling choice.

   This was proved on one Oregon service page in Phase 26 and lived in that
   page's own <style>. Thirty-three North Carolina pages now ask for the same
   treatment, so it is hoisted here verbatim rather than pasted thirty-three
   times. It is keyed on the modifier, so it costs nothing to a band that has
   not asked for green, and Oregon's one green band renders identically.

   The LINEN contract names .t72c-trust-sec, so the dark cell hairline two
   rules up matches at (0,2,0); these are (0,3,0) and take it back. */
/* The frame's own top edge. `.t72c + .t72c { border-top: 1px solid
   var(--t72-rule) }` is (0,2,0) and outranks the (0,1,0) gold frame rule up at
   the surface contracts, so every trust band that follows another section has
   been drawing its top hairline in INK at 14% — invisible on green, which left
   the band framed on three sides. Measured on the rendered page, not read off
   the source. (0,3,0) puts the fourth side back. */
.t72c.t72c-trust-sec.t72c-band-green { border-top-color: var(--t72-rule-gold); }
.t72c-trust-sec.t72c-band-green .t72c-trust-item {
  border-right-color: var(--t72-rule-gold);
}
.t72c-trust-sec.t72c-band-green .t72c-trust-item:last-child { border-right: none; }
.t72c-trust-sec.t72c-band-green .t72c-trust-n {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--t72-rule-gold);
}
.t72c-trust-sec.t72c-band-green .t72c-creds { border-top-color: var(--t72-rule-gold); }

.t72c-creds {
  list-style: none; margin: 22px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--t72c-rule-soft);
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: 14px; color: var(--t72c-fg);
}

/* -- 5. signs / 6. routing / 22. problems / 21. services -------------------- */
.t72c-signs, .t72c-routes, .t72c-probs, .t72c-svcs, .t72c-rels, .t72c-brands,
.t72c-promises, .t72c-plans {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
/* THE SIGNS BLOCK IS THE REFERENCE'S `.signs`, DOWN TO THE NAME. (Phase 25b)
   `cooling-charlotte` builds it as `.signs-grid` — two columns, 920px, 24px
   by 56px — of `.signs-item` hairline rows, each a mono numeral in its own
   28px column beside one 16.5px sentence with a bold lead. No card, no fill,
   no border, and `gap: 0` on a phone so the rows become one ruled list. Ours
   was three bordered PAPER cards per row. Every sign block in the estate
   holds six or eight items, so two columns divide evenly at both counts. */
.t72c-signs {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 56px;
  max-width: 920px; margin-inline: auto;
}
.t72c-sign {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  align-items: baseline;
  background: none; border: 0; border-radius: 0;
  border-top: 1px solid var(--t72c-rule-soft);
  padding: 18px 0 20px;
  counter-increment: t72c-sign;
}
.t72c-signs { counter-reset: t72c-sign; }
.t72c-sign::before {
  content: counter(t72c-sign, decimal-leading-zero);
  font-family: var(--t72-font-label);
  font-size: 10.5px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--t72c-accent);
  min-width: 28px;
}
.t72c-sign-body { min-width: 0; }
.t72c-sign-h {
  font-family: var(--t72-font-body); font-weight: 600;
  font-size: 16.5px; line-height: 1.5;
  letter-spacing: 0; text-transform: none;
  margin: 0 0 2px;
}
.t72c-sign-b { font-size: 16.5px; line-height: 1.5; margin: 0; }
.t72c-promises { grid-template-columns: repeat(5, 1fr); }
.t72c-plans { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
/* WHICH OF THESE THE REFERENCE ACTUALLY BOXES.                  (Phase 25b)
   Counted on the reference, block by block: it boxes a grid cell when the
   cell is a CHOICE you click — `.routing-card`, `.sched-card`, the city
   cards — and it does NOT box an explanation. Its explanatory grids are
   `.signs-item` and `.promise-row`, both hairline rows on the page's own
   ground, and its one boxed non-clickable block is `.steps-grid`, which is a
   SINGLE keyline subdivided by hairlines rather than n cards with air
   between them.

   So `.t72c-route` and `.t72c-rel` keep the card: both render links. The
   problems, the brands and the plans lose it and take the hairline row,
   because none of them is clickable and all three are explanation. `.t72c-
   sign` has its own rule above; `.t72c-svc` has been the reference's
   subdivided keyline since Phase 14. */
.t72c-route, .t72c-svc, .t72c-rel {
  background: var(--t72-paper); border: 1px solid var(--t72c-rule-soft);
  border-radius: var(--t72-radius, 2px); padding: 26px 24px;
  display: flex; flex-direction: column;
  /* A grid item defaults to min-width: auto, which refuses to shrink below its
     widest unbreakable word. MEASURED at 1200px: the five-up promises row on
     the three Oregon careers pages and the Las Vegas one pushed the document
     3px wide because one label would not break. min-width: 0 is the standard
     release valve and changes nothing at a width where it already fits.
     (Phase 15) */
  min-width: 0;
  overflow-wrap: break-word;
}
.t72c-prob, .t72c-brand, .t72c-promise, .t72c-plan {
  background: none; border: 0; border-radius: 0;
  border-top: 1px solid var(--t72c-rule-soft);
  padding: 18px 0 20px;
  display: flex; flex-direction: column;
  min-width: 0; overflow-wrap: break-word;
}

.t72c-route-h, .t72c-prob-h, .t72c-svc-h, .t72c-rel-h,
.t72c-brand-h, .t72c-promise-h, .t72c-plan-h {
  font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: clamp(20px, 1.8vw, 24px); line-height: 1.05;
  letter-spacing: .005em; text-transform: uppercase; margin: 0 0 12px;
}

/* -- THE SERVICES GRID IS SEAMLESS                               (Phase 14)
   The reference's six services are not cards with gaps: they are one bordered
   block subdivided by hairlines, each cell 260px tall. It reads as a printed
   table of contents, and it is the most recognisable single element on the
   page after the hero. The container carries the outer keyline on three sides;
   each cell draws its own bottom, so the last row's rule closes the block. */
.t72c-svcs {
  gap: 0;
  border: 1px solid var(--t72-rule-strong);
  border-bottom: 0;
}
.t72c-svc {
  border: 0;
  border-right: 1px solid var(--t72-rule-strong);
  border-bottom: 1px solid var(--t72-rule-strong);
  min-height: 250px;
  padding: 32px 30px 28px;
  transition: background-color .2s ease;
}
.t72c-svc:nth-child(3n) { border-right: 0; }
/* A SHORT LAST ROW STILL CLOSES THE BLOCK.                       (Phase 20)
   The block is one keyline round six cells with hairlines through it, and it
   only reads that way when the last row is full. Oregon's homepage has FIVE
   services, not NC's six, so the last cell takes the rest of its row instead
   of leaving a hole with no bottom edge. It is the count that decides, so the
   rule is written against the count: a grid whose last child is the 2nd of a
   row spans 2, one whose last child is the 1st of a row spans 3. A six-cell
   grid matches neither and is untouched — measured, NC's homepage is
   byte-identical. It holds at the 2-column breakpoint too, where five cells
   are 2 + 2 + 1 and the same span fills the row. */
.t72c-svcs:has(> :last-child:nth-child(3n + 2)) > .t72c-svc:last-child { grid-column: span 2; }
.t72c-svcs:has(> :last-child:nth-child(3n + 1)) > .t72c-svc:last-child { grid-column: 1 / -1; }
.t72c-svcs > .t72c-svc:last-child { border-right: 0; }
.t72c-svc:hover {
  --t72c-display-soft: var(--t72-type-on-paper-muted);
  background: var(--t72-paper-warm);
}

/* THE ONE DARK CELL. The reference highlights a single service — its "Carolina
   Favorite" heat pump — by filling that one cell dark inside an otherwise cream
   grid, and it is the grid's whole point of interest. The cell redeclares the
   INK contract in full rather than colouring its children, exactly as a band
   does, which is what lets the tag, the heading, the body and any button inside
   it come out right with no per-element exception. */
.t72c-svc-featured {
  --t72c-fg:                var(--t72-type-on-ink);
  --t72c-fg-muted:          var(--t72-type-on-ink);
  --t72c-fg-strong:         var(--t72-type-on-ink-strong);
  --t72c-display:           var(--t72-display-on-ink);
  --t72c-display-soft:      var(--t72-display-on-ink);
  --t72c-accent:            var(--t72-type-on-ink);
  --t72c-rule-soft:         var(--t72-rule-on-ink);
  --t72c-btn-ink-bg:        var(--t72-paper);
  --t72c-btn-ink-fg:        var(--t72-ink);
  --t72c-btn-ink-hover:     var(--t72-linen);
  --t72c-btn-outline-fg:    var(--t72-paper);
  --t72c-btn-outline-bd:    var(--t72-rule-on-ink);
  --t72c-btn-outline-hover: var(--t72-rule-on-ink);
  --t72c-means-bg:          transparent;

  background: var(--t72-ink);
  color: var(--t72c-fg-strong);
}
.t72c-svc-featured:hover {
  --t72c-display-soft: var(--t72-type-on-green);
  background: var(--t72-green);
}

/* AT MOST ONE. Every featured cell AFTER the first in the same grid takes the
   paper contract back. The rule is a sibling combinator rather than a page
   edit because the fault is in the component's definition of "featured", and
   96 grids would otherwise have to be corrected one at a time and could
   regress one at a time. North Carolina's grids declare exactly one and are
   untouched by construction. */
.t72c-svcs > .t72c-svc-featured ~ .t72c-svc-featured {
  --t72c-fg:                var(--t72-type-on-paper);
  --t72c-fg-muted:          var(--t72-type-on-paper-muted);
  --t72c-fg-strong:         var(--t72-type-on-paper);
  --t72c-display:           var(--t72-type-on-paper);
  /* NOT --t72-display-italic-on-paper. D83 lets exactly two selectors read
     that role and the audit enforces it; a cell is not a band. SCENERY GREEN
     is what the two .t72c-lite-* grounds take for the same reason. */
  --t72c-display-soft:      var(--t72-type-on-paper-muted);
  --t72c-accent:            var(--t72-type-on-paper-muted);
  --t72c-rule-soft:         var(--t72-rule);
  --t72c-btn-ink-bg:        var(--t72-ink);
  --t72c-btn-ink-fg:        var(--t72-paper);
  --t72c-btn-ink-hover:     var(--t72-green);
  --t72c-btn-outline-fg:    var(--t72-ink);
  --t72c-btn-outline-bd:    var(--t72-rule-strong);
  --t72c-btn-outline-hover: var(--t72-paper-warm);
  --t72c-means-bg:          var(--t72-paper-warm);

  background: var(--t72-paper);
  color: var(--t72c-fg-strong);
}
.t72c-svcs > .t72c-svc-featured ~ .t72c-svc-featured:hover {
  --t72c-display-soft: var(--t72-type-on-paper-muted);
  background: var(--t72-paper-warm);
}
/* The tag is the reference's gold flag: INK on ANTIQUE GOLD is 4.04:1, so it is
   locked to 19px/700 and clears AA large text at its rendered size, like every
   other gold fill on the site. */
/* ===========================================================================
   ONE DARK CELL, NOT SIX, AND THE TAG IS A LABEL             (Phase 25b)
   ===========================================================================
   Counted on the reference's own services grid: `service-card-featured`
   appears on ONE article of six, and that one cell carries a small
   `.favorite-badge` — Geist Mono 9px/700 on gold, 6px by 10px of padding —
   while the other five carry nothing but `.service-num`. The dark cell is
   the grid's single point of interest and the badge is its flag.

   Counted in our build: 96 of the 103 services grids in the estate had
   EVERY cell dark, because the component treats a `tag` as a request to
   feature the cell and 349 items carry one. And our badge was 19px/700 in a
   gold slab — 2.1x the reference's 9px — so every card in the grid shouted
   the same way and the device meant nothing. The `tag` on those cards is not
   a flag at all: it is the card's standfirst, a customer's words, which is
   the reference's `.service-num` role.

   So: the first featured cell in a grid stays dark and every later one takes
   the paper contract back, which restores the reference's one-of-six without
   touching a single page source. And the tag takes the standfirst's own
   micro-label treatment instead of a fill. The gold slab does not survive at
   any size we could legally set it: INK on ANTIQUE GOLD is 4.04:1 and an AA
   pass for LARGE text only (D46), so the reference's 9px badge is not
   available to us and a 19px one is the loudest thing on the page. */
.t72c-svc-tag {
  display: block; align-self: flex-start;
  padding: 0; margin: 0 0 14px;
  background: none;
  font-family: var(--t72-font-label); font-weight: 600; font-size: 10.5px;
  /* .16em, not the reference's .22em on `.card-label`. Its labels are two
     words ("Keep it running"); 348 of our 349 tags are a whole sentence in a
     customer's voice, and .22em of tracking on a sentence stops being a
     label and starts being hard to read. .16em is inside the range the
     reference uses for its own longer mono runs (.12em to .22em). */
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.55;
  color: var(--t72c-fg-muted);
}
.t72c-sign-b, .t72c-route-b, .t72c-prob-b, .t72c-svc-b, .t72c-rel-b,
.t72c-brand-b, .t72c-promise-b, .t72c-plan-b {
  font-size: 15.5px; line-height: 1.55; margin: 0;
}
.t72c-sign .t72c-actions, .t72c-route .t72c-actions, .t72c-svc .t72c-actions,
.t72c-plan .t72c-actions { margin-top: auto; padding-top: 16px; }
/* A heading that IS the link is the card's tap target, so it has to be one:
   measured at 375px a bare 20px heading link came out 23px tall, under WCAG
   2.5.8's 24px minimum. The padding takes it past 44px. */
.t72c-rel-h a, .t72c-svc-h a, .t72c-prob-h a {
  display: block; padding: 11px 0; min-height: 44px;
}
.t72c-rel-h, .t72c-svc-h, .t72c-prob-h { margin-bottom: 0; }
/* The reference's `.service-num` verbatim except for its colour: 'Geist
   Mono' 9.5px/600 at .26em, uppercase, 14px under. It sets that label in
   GOLD-AGED, which is 3.18:1 on cream and large-text-only under D83, so ours
   takes --t72c-fg-muted: SCENERY GREEN 5.2:1 on paper, PAPER 9.7:1 on the
   dark cell. 10.5px rather than 9.5, because 9.5px of Geist Mono at .26em is
   under our own type floor. Ours was 15px DISPLAY face, which read as a
   second heading above the heading.                              (Phase 25b) */
.t72c-svc-n {
  font-family: var(--t72-font-label); font-weight: 600; font-size: 10.5px;
  letter-spacing: .26em; display: block; margin-bottom: 14px;
  text-transform: uppercase;
  color: var(--t72c-fg-muted);
}
/* The featured cell carries the number line AND the flag, so the flag closes
   up under it rather than keeping the standfirst's own bottom margin. */
.t72c-svc-featured .t72c-svc-n { margin-bottom: 10px; }

/* THE GRID'S FOOT. One centred line, then the market buttons centred under
   it — the reference's `.services-foot`. The line is the section's own note,
   promoted above the buttons by the component. */
.t72c-svc-sec > .t72c-wrap > .t72c-note {
  text-align: center; font-style: italic; font-size: 20px; line-height: 1.4;
  margin: 34px 0 0; color: var(--t72c-fg);
}
.t72c-svc-sec > .t72c-wrap > .t72c-actions { justify-content: center; margin-top: 20px; }
/* Local story — the neighbourhood / per-city leaf's prose block. Measured
   line length, because these pages are long on purpose. */
.t72c-story { max-width: 74ch; }
.t72c-story-p { font-size: 17px; line-height: 1.65; margin: 0 0 18px; }
.t72c-story-p:last-child { margin-bottom: 0; }
.t72c-story-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.t72c-story-solo { grid-template-columns: 1fr; }
.t72c-photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 32px 0 0; }
@media (max-width: 880px) {
  .t72c-story-grid { grid-template-columns: 1fr; gap: 28px; }
  .t72c-photo-strip { grid-template-columns: 1fr; gap: 18px; }
}

.t72c-svc-tag, .t72c-brand-role {
  font-family: var(--t72-font-label); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--t72c-accent); margin: 0 0 8px;
}
/* ==========================================================================
   THE PROMISES, AS A NUMBERED LIST + A KEYLINED PANEL             (Phase 20)
   --------------------------------------------------------------------------
   The reference's "how we work" band, rebuilt for Oregon: a rule-separated
   ordered list of one-line promises, each opened by its numeral and its own
   standfirst, and under it a keylined panel that carries the method.

   WHERE THE GOLD WENT. The reference paints its numerals, its picked-out
   phrases and its panel type in ANTIQUE GOLD on this exact ground — its
   --ink-soft is #696859, which is our SCENERY GREEN — and gold on green is
   2.15:1. That is a real AA failure on the reference and it is not being
   copied. On the green, every type colour is PAPER (5.22:1) and the phrase
   that the reference picks out in gold italic is picked out in italic alone.

   THE PANEL IS INK, and that is where the gold comes back: on INK, ANTIQUE
   GOLD is 4.04:1, which clears AA large text at 24px or at 18.66px bold, so
   the panel's eyebrow and its instrument line are locked to 19px/700 in the
   same blocks as their colour and its heading's italic is 26px and up. The
   keyline is gold, which is decoration and exempt from 1.4.11, and it is the
   reference's own gold keyline.
   ========================================================================== */
.t72c-promise-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 860px;
  border-top: 1px solid var(--t72-rule-on-ink);
  text-align: left;
}
.t72c-promise-row {
  display: grid; grid-template-columns: auto 1fr; gap: 24px;
  align-items: baseline; padding: 14px 8px;
  border-bottom: 1px solid var(--t72-rule-on-ink);
}
.t72c-promise-n {
  font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; color: var(--t72c-fg-muted);   /* PAPER, 5.22:1 */
}
.t72c-promise-t {
  margin: 0; font-size: 18px; line-height: 1.4; letter-spacing: .005em;
  color: var(--t72c-fg-strong);
}
.t72c-promise-t em { font-style: italic; }

/* The panel. A solid INK recess in the green, so the gold inside it is
   licensed; `.t72c-promise-panel` joins the INK contract in the band list at
   the top of this sheet, which is what resolves PAPER and LINEN inside it. */
.t72c-promise-panel {
  max-width: 760px; margin: 36px auto 0;
  padding: 36px 44px 32px; text-align: center;
  border: 1px solid var(--t72-rule-gold);
  border-radius: var(--t72-radius, 2px);
}
.t72c-panel-eyebrow {
  margin: 0 0 12px; font-family: var(--t72-font-label);
  font-size: 19px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--t72-gold);     /* 4.04:1, 19/700 */
}
.t72c-panel-h {
  margin: 0 0 14px; font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: clamp(26px, 2.8vw, 36px); line-height: 1;
  letter-spacing: .005em; text-transform: uppercase;
  color: var(--t72c-fg-strong);
}
.t72c-panel-h em {
  font-family: var(--t72-font-body); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  color: var(--t72-gold);                    /* 4.04:1 — 26px and up only */
}
.t72c-panel-data {
  margin: 0 0 8px; font-family: var(--t72-font-label);
  font-size: 19px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t72-gold);     /* 4.04:1, 19/700 */
}
.t72c-panel-sub {
  margin: 0 0 18px; font-style: italic; font-size: 15.5px; line-height: 1.5;
  color: var(--t72c-fg);                                         /* 5.7:1 */
}
.t72c-panel-closer {
  margin: 0 auto; max-width: 42ch; font-style: italic;
  font-size: 17px; line-height: 1.5;
  color: var(--t72c-fg-strong);                                  /* 9.7:1 */
}
.t72c-promise-listed .t72c-creed { max-width: 760px; margin-inline: auto; }
@media (max-width: 720px) {
  .t72c-promise-row { grid-template-columns: 1fr; gap: 6px; }
  .t72c-promise-panel { padding: 28px 22px 26px; }
  .t72c-panel-eyebrow, .t72c-panel-data { font-size: 19px; }
  /* `nowrap` is right when the label is just "01" in its own narrow column.
     The Phase 26 rebuild writes the whole lead phrase into it -- "01 -
     Homeowners and renters" -- and on one row at 320px that is 301px of
     unbreakable text inside a 304px measure, which pushed the page to 360px
     wide. Once the row is a single column the label has no reason to hold one
     line, so it wraps. */
  .t72c-promise-n { white-space: normal; }
}
.t72c-creed {
  font-style: italic; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.35;
  margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--t72-rule-gold);
  text-align: center;
}

/* -- 7 + 12. tables -------------------------------------------------------- */
.t72c-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.t72c-table {
  width: 100%; border-collapse: collapse; text-align: left;
  font-size: 16px; line-height: 1.5; min-width: 520px;
}
.t72c-table th, .t72c-table td {
  padding: 15px 18px; border-bottom: 1px solid var(--t72-rule); vertical-align: top;
}
.t72c-table thead th {
  font-family: var(--t72-font-label); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 2px solid var(--t72-gold);
  color: var(--t72c-accent);
}
.t72c-table tbody th { font-weight: 600; }
.t72c-table .t72c-us { background: var(--t72-paper); }
.t72c-table thead .t72c-us { color: var(--t72c-fg-strong); }
.t72c-rebates { min-width: 560px; }

/* -- 8. method / 10. process ----------------------------------------------- */
/* ===========================================================================
   THE THREE-ITEM EXPLANATORY BLOCK                                (Phase 25b)
   ===========================================================================
   Bethany, on "Three reasons systems fail during heat waves":
   "our boxed sections look heavy where the reference is more elegant."

   SO THE REFERENCE WAS READ RATHER THAN GUESSED AT. Its equivalent block is
   `.signs` on `cooling-charlotte` — "Tell us what you're noticing", six
   numbered explanations under one head — and `concord-nc-air-conditioning`
   carries the same material as running prose with no block at all. Its
   declarations, verbatim:

     .signs-grid { display:grid; grid-template-columns:repeat(2,1fr);
                   gap:24px 56px; max-width:920px; margin:0 auto }
     .signs-item { display:grid; grid-template-columns:auto 1fr; gap:18px;
                   padding:18px 0; border-top:1px solid var(--rule);
                   align-items:baseline }
     .signs-item .num { 'Geist Mono' 10.5px/600, .26em, uppercase,
                        min-width:28px }
     .signs-item p    { 'Fraunces' 16.5px/1.5, margin:0 }
     .signs-item p strong { font-weight:600 }
     @media  .signs-grid { grid-template-columns:1fr; gap:0 }
             .signs-item { padding:16px 0 }

   IT DOES NOT BOX THE BLOCK. There is no card, no fill, no enclosing border
   and no gap between the rows on a phone — one hairline per item and 18px of
   air, so six explanations read as one ruled list. The number is a MONO
   MICRO-LABEL in its own 28px column, not a display-face numeral above the
   text, and the emphasis inside the row is one bold lead phrase at the same
   size as the sentence it starts.

   Ours was: a 15px display-face numeral with a FULL-WIDTH GOLD RULE under it,
   a 22px uppercase display heading, 15.5px body — and then a filled, 3px
   gold-bordered `.t72c-means` panel inside every item. Three items in a row,
   each carrying a box inside a box. That is the weight she is describing.

   This rule is the reference's, with two deliberate divergences, both
   recorded rather than quietly taken:

   1. THE NUMBER IS NOT GOLD-AGED. The reference sets its 10.5px numeral in
      GOLD-AGED, which is 3.18:1 on cream — an AA pass for large text only.
      D83 forbids it at this size, so the numeral takes --t72c-accent, which
      is SCENERY GREEN 5.2:1 on paper and INK 5.89:1 on linen. Geometry from
      the reference, colour from our own contract.

   2. THE COLUMN COUNT STAYS AT THREE. The reference's block holds six items
      in two columns; ours holds three in three, and 48 of the 71 `method`
      calls in the estate are exactly three items. Restacking them into two
      columns would leave a 2+1 orphan row on nearly every page. The gaps
      take the reference's 56px column rhythm instead, so each column lands
      at ~405px against the reference's ~430px.
   ========================================================================== */
.t72c-method, .t72c-steps {
  list-style: none; margin: 0; padding: 0; counter-reset: t72c-step;
  display: grid;
}
.t72c-method { grid-template-columns: repeat(3, 1fr); gap: 26px 56px; }
/* `grid-auto-flow: column` rather than a fixed five, because the estate's
   process blocks hold 3, 4 or 5 steps (36 fives, 24 fours, 14 threes). A
   fixed five-column track left a three-step block as three cells and two
   holes inside a single keyline, which is worse than the gapped cards it
   replaced. One row of N equal columns is always a closed rectangle. */
.t72c-steps {
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 0;
}
.t72c-method-step, .t72c-step { counter-increment: t72c-step; }

.t72c-method-step {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  align-items: baseline;
  padding: 18px 0 20px;
  border-top: 1px solid var(--t72c-rule-soft);
  min-width: 0;
}
.t72c-method-step::before {
  content: counter(t72c-step, decimal-leading-zero);
  font-family: var(--t72-font-label);
  font-size: 10.5px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--t72c-accent);
  min-width: 28px;
}
.t72c-method-body { min-width: 0; }

/* The process steps keep a box, because the reference keeps one for THIS
   block and only this one: `.steps-grid` draws a single 1px keyline round the
   whole run, `gap: 0`, and each `.step-card` draws its own right and bottom
   hairline — ONE box divided, not five boxes with air between them. Its
   number is the same mono micro-label. Ours was five separate bordered cards
   22px apart. */
.t72c-steps { border: 1px solid var(--t72-rule-strong); }
.t72c-step {
  background: var(--t72-paper);
  border: 0;
  border-right: 1px solid var(--t72-rule-strong);
  padding: 30px 26px 26px;
  min-width: 0;
}
.t72c-steps > .t72c-step:last-child { border-right: 0; }
.t72c-step::before {
  content: counter(t72c-step, decimal-leading-zero);
  display: block;
  font-family: var(--t72-font-label);
  font-size: 10.5px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--t72c-accent);
  margin-bottom: 18px;
}
/* The lead phrase, not a second heading. The reference's row emphasises with
   one `strong` at the body's own size; ours keeps a real <h3> for the outline
   and dresses it as that lead. */
.t72c-method-h, .t72c-step-h {
  font-family: var(--t72-font-body); font-weight: 600;
  font-size: 16.5px; line-height: 1.5;
  letter-spacing: 0; text-transform: none;
  margin: 0 0 2px;
}
.t72c-method-b, .t72c-step-b { font-size: 16.5px; line-height: 1.5; margin: 0; }
.t72c-method-b + *, .t72c-step-b + * { margin-top: 10px; }

/* -- 14. manager card ------------------------------------------------------ */
.t72c-mgr { display: grid; grid-template-columns: 240px 1fr; gap: 34px; align-items: start; }
.t72c-mgr-photo img { width: 100%; height: auto; display: block; border: 1px solid var(--t72-rule-gold); border-radius: var(--t72-radius, 2px); }
.t72c-mgr-name { font-family: var(--t72-font-display); font-weight: var(--t72-display-weight); font-size: clamp(22px, 2vw, 28px); line-height: 1.12; margin: 0 0 14px; color: var(--t72c-display); }
.t72c-mgr-role { display: block; font-family: var(--t72-font-label); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t72c-accent); margin-top: 6px; }
.t72c-mgr-b { font-size: 16.5px; line-height: 1.6; margin: 0 0 14px; color: var(--t72c-fg-strong); }
.t72c-mgr-acc { font-size: 17px; line-height: 1.5; margin: 18px 0 0; padding-left: 16px; border-left: 3px solid var(--t72-gold); color: var(--t72c-fg-strong); }

/* -- 15 + 16. CTAs --------------------------------------------------------- */
/* The reference's "Modern Convenience. Traditional Values." standard band: a
   short, centred INK band that breaks the cream run. 56px, not a full section. */
.t72c-inline-cta { padding: 56px var(--t72-gutter); border-top: 1px solid var(--t72-rule-gold); border-bottom: 1px solid var(--t72-rule-gold); }
.t72c-inline-cta .t72c-h { margin-bottom: 0; }
.t72c-inline-cta .t72c-actions { justify-content: center; margin-top: 24px; }

.t72c-final-cta { padding: 76px var(--t72-gutter); }
.t72c-final-cta .t72c-h { max-width: 18ch; margin-left: auto; margin-right: auto; font-size: clamp(34px, 3.8vw, 54px); }
.t72c-final-cta .t72c-deck { max-width: 48ch; margin-left: auto; margin-right: auto; font-style: italic; }
.t72c-final-cta .t72c-actions { justify-content: center; }
.t72c-phones { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 46px; justify-content: center; }
.t72c-phone-city { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--t72c-accent); font-family: var(--t72-font-label); }
.t72c-phone { display: inline-block; min-height: 44px; font-family: var(--t72-font-display); font-weight: var(--t72-display-weight); font-size: clamp(22px, 2.2vw, 28px); color: var(--t72c-display); text-decoration: none; margin-top: 4px; }
.t72c-phone:hover { text-decoration: underline; }

/* -- 17 + 18. FAQ ---------------------------------------------------------- */
/* CENTRED (Phase 20). Bethany, on the Oregon homepage: centre the FAQs. The
   head joins the centred list above; the accordion keeps its 900px measure
   and is centred under it, and the questions and answers inside it stay
   left-aligned because a left-ranged question is what makes a stack of them
   scannable (the `text-align: left` reset on .t72c-faqs, further up). */
.t72c-faqs {
  border-top: 1px solid var(--t72c-rule-soft); max-width: 900px;
  margin-inline: auto;
}
/* THE ROW RHYTHM WAS BEING PAID FOR TWICE.                       (Phase 27)
   Bethany: "reduce the spacing of the faqs — it's a little too much space
   between each question." Measured, not guessed. c_faq() writes both the
   component class and the reference's own legacy class — `t72c-faq-item
   faq-item`, `t72c-faq-q faq-q` — and every ported page still carries the
   reference's inline sheet, which declares `.faq-item { padding: 20px 0 }` and
   `.faq-q { margin: 0 0 10px }`. This block declared neither, so both landed
   unopposed ON TOP of the summary's own 19px/19px. A collapsed row spent 89px
   of chrome (20+19+19+20 padding, 10 margin, 1 divider) around a 25px line,
   and question-to-question measured 114px at 1280px.

   The reference spends 41px per row (20 top, 20 bottom, 1 divider). Declaring
   the two properties here — the component sheet loads after the ported inline
   block on all 173 pages, verified — hands the row back to the summary alone:
   39px of chrome, 64px question-to-question. That is the reference's rhythm to
   two pixels, on an accordion rather than an open list.

   Not scoped to North Carolina: 86 Oregon pages carry the same legacy sheet
   and were equally loose, and the sites are meant to feel the same. The 19px
   summary padding also keeps every question's 44px pointer target. */
.t72c-faq-item { padding: 0; border-bottom: 1px solid var(--t72c-rule-soft); }
.t72c-faq-q {
  cursor: pointer; list-style: none; margin: 0;
  padding: 19px 44px 19px 0; min-height: 44px; position: relative;
  font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3;
}
.t72c-faq-q::-webkit-details-marker { display: none; }
.t72c-faq-q::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--t72-font-display); font-size: 24px; color: var(--t72c-accent);
}
.t72c-faq-item[open] .t72c-faq-q::after { content: "\2212"; }
.t72c-faq-a { padding: 0 0 20px; max-width: 74ch; }
.t72c-faq-a p { font-size: 16px; line-height: 1.6; margin: 0 0 12px; }
.t72c-faq-a p:last-child { margin-bottom: 0; }
.t72c-jumps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.t72c-jump {
  display: inline-flex; align-items: center; min-height: 44px; padding: 11px 20px;
  border: 1px solid var(--t72-rule-strong); border-radius: var(--t72-radius, 2px);
  background: var(--t72-paper); text-decoration: none;
  font-family: var(--t72-font-label); font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.t72c-jump:hover { border-color: var(--t72-gold); }

/* -- 19 + 20. service areas and the SEO paragraph -------------------------- */
.t72c-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 18px; font-size: 15.5px; }
.t72c-areas li { padding: 6px 0; border-bottom: 1px solid var(--t72c-rule-soft); }
.t72c-areas a { min-height: 44px; display: flex; align-items: center; }
.t72c-areas-more { margin: 26px 0 0; font-size: 16px; line-height: 1.55; }
/* THE SERVICE-AREA GROUP READS AS ONE BAND. A city page emits one areas
   section per county (D82), and five separate LINEN bands in a row made five
   visible band edges where the reference has one `.service-area`. Collapsing
   the seam turns the group back into a single band with county subheads. */
.t72c-areas-sec { padding: 44px var(--t72-gutter); }
.t72c-areas-sec + .t72c-areas-sec { border-top: 0; padding-top: 0; }
.t72c-areas-sec .t72c-h { font-size: clamp(22px, 2vw, 28px); }

.t72c-seo { max-width: 960px; margin: 0 auto; }
.t72c-seo p { font-size: 15px; line-height: 1.65; margin: 0 0 12px; color: var(--t72c-fg); }
.t72c-seo-sec { padding: 44px var(--t72-gutter) 48px; border-top: 1px solid var(--t72-rule); }
.t72c-seo-sec .t72c-h { font-size: clamp(17px, 1.3vw, 20px); }

/* -- 23. enrol cards ------------------------------------------------------- */
/* PHASE 25B — the rule is surface-aware, and only the best plan gets the
   3px. `--t72-rule-strong` is INK at 32%, which was visible while the plan
   painted itself PAPER and is invisible now that it sits on the band's own
   INK ground; `--t72c-rule-soft` resolves per surface and is the same value
   every other hairline in the sheet uses. And all three plans carried the
   3px, with only the colour telling them apart — so the marker marked
   nothing. One hairline each, one 3px gold rule on the one being pointed
   at. */
.t72c-plan { border-top: 1px solid var(--t72c-rule-soft); }
.t72c-best { border-top: 3px solid var(--t72-gold); }
.t72c-bestflag {
  font-family: var(--t72-font-label); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--t72c-accent); margin: 0 0 8px;
}
.t72c-plan-price { font-family: var(--t72-font-display); font-weight: var(--t72-display-weight); font-size: clamp(26px, 2.6vw, 34px); line-height: 1; margin: 0 0 12px; }
.t72c-includes { margin-top: 30px; }
.t72c-includes ul { margin: 0; padding-left: 20px; }
.t72c-includes li { font-size: 16px; line-height: 1.6; margin-bottom: 8px; }

/* -- 24. the Tru Comfort feature band                          (Phase 16) ---
   The reference's Cardinal Club section, and North Carolina's hand-written
   .trucomfort-section, as ONE component. The geometry below is the NC band's,
   read off pages/nc/hvac-concord-nc/index.html line for line, so converting
   the three NC pages to the component changes nothing a visitor sees.

   THE CONTRAST LADDER INSIDE AN INK BAND, all of it measured:
     PAPER on INK   9.7:1   the feature list and the programme name
     LINEN on INK   5.7:1   the tag, the price, the deck, the tertiary links —
                            passes at ANY size, which is what lets the 9.5px
                            tag and the 12.5px links be legitimate
     gold           decoration only: the keyline, the diamond bullets and the
                            link underline. No gold TYPE in this band at all,
                            because ANTIQUE GOLD on INK is 4.04:1 and would
                            need 24px, and nothing here but the price is that
                            big. The price is LINEN, as NC shipped it.
   The one gold FILL is the CTA, which is `style: "gold"` and therefore
   .t72-cta, carrying D46's size with it.                                    */
.t72c-tc-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center;
  max-width: 1140px; margin: 0 auto;
  border: 1px solid var(--t72-gold); padding: 44px;
}
.t72c-tc-mark { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* NC's mark is square and Oregon/Nevada's Tru Comfort badge is 1.5:1, so the
   slot is bounded rather than set: a square mark still renders at exactly
   the 104px NC shipped, and a wide badge fills the width it needs at the
   same optical height instead of shrinking to 104px across and going to
   mud. Measured on both. */
.t72c-tc-mark img { width: auto; height: auto; max-width: 200px; max-height: 104px; }
.t72c-tc-tag {
  margin: 0; font-family: var(--t72-font-label); font-size: 9.5px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--t72c-fg-muted);
}
.t72c-tc-name {
  margin: 4px 0 0; font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: 24px; line-height: 1; letter-spacing: .005em; text-transform: uppercase;
  color: var(--t72c-fg-strong);
}
.t72c-tc-price {
  margin: 12px 0 0; font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: 44px; line-height: 1; letter-spacing: -.005em; color: var(--t72c-fg-muted);
}
.t72c-tc-unit {
  font-size: .5em; font-family: var(--t72-font-body); font-weight: 400;
  font-style: italic; letter-spacing: 0;
}
.t72c-tc-sub {
  margin: 4px 0 0; font-family: var(--t72-font-body); font-style: italic;
  font-size: 13px; color: var(--t72c-fg-muted);
}
.t72c-tc-copy { display: flex; flex-direction: column; gap: 18px; }
/* NOT .t72c-h. The reference's feature-band heading is the BODY face in
   italic, not the uppercase display voice, so it is deliberately outside the
   display ladder — and therefore outside the GOLD-AGED cage, which only
   .t72c-h1 em and .t72c-h em may enter. (D83) */
.t72c-tc-h {
  margin: 0; max-width: 22ch;
  font-family: var(--t72-font-body); font-weight: 400; font-style: italic;
  font-size: clamp(25px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.005em;
  text-transform: none; color: var(--t72c-fg-muted);
}
.t72c-tc-deck { margin: 0; max-width: 56ch; font-size: 15.5px; line-height: 1.55; color: var(--t72c-fg-muted); }
.t72c-tc-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
}
.t72c-tc-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.45; color: var(--t72c-fg-strong);
}
.t72c-tc-list li::before {
  content: ''; flex-shrink: 0; width: 6px; height: 6px; margin-top: 8px;
  background: var(--t72-gold); transform: rotate(45deg);
}
.t72c-tc-sec .t72c-actions { margin-top: 4px; }
.t72c-tc-links {
  margin: 0; display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--t72c-fg-muted);
}
.t72c-tc-link { color: var(--t72c-fg-muted); }
/* only a real link is underlined; a tertiary NOTE is a span and is not */
a.t72c-tc-link { border-bottom: 1px solid var(--t72-gold); padding-bottom: 1px; }
a.t72c-tc-link:hover { color: var(--t72c-fg-strong); }
.t72c-tc-mission {
  font-family: var(--t72-font-label); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}

/* -- 25. financing --------------------------------------------------------- */
.t72c-fin { margin: 0 0 18px; padding-left: 20px; }
.t72c-fin li { font-size: 16.5px; line-height: 1.6; margin-bottom: 10px; max-width: 70ch; }
.t72c-fin-lender { font-size: 16.5px; line-height: 1.6; margin: 0 0 8px; }
/* The partner's own mark. Constrained rather than sized: it is a supplied
   logo file and the component does not know its aspect ratio. */
.t72c-fin-logo { margin: 4px 0 30px; }
.t72c-fin-logo img { display: block; max-width: 260px; width: 100%; height: auto; }
.t72c-fin-groups {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 44px;
  margin: 0 0 10px; max-width: 900px;
}
.t72c-fin-group .t72c-fin { margin-bottom: 0; }
@media (max-width: 720px) { .t72c-fin-groups { grid-template-columns: 1fr; gap: 18px; } }

/* -- 26. closing seal ------------------------------------------------------
   The reference closes on CREAM, not on ink: a widely tracked uppercase promise
   line, then a divider — gold hairline, the mark, gold hairline. Phase 6 made
   it a dark band with the mark above the words. */
.t72c-seal-sec { padding: 56px var(--t72-gutter) 64px; border-top: 1px solid var(--t72-rule); }
.t72c-seal {
  margin: 0 0 28px; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 22px;
  font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: clamp(18px, 1.9vw, 22px); letter-spacing: .22em;
  text-transform: uppercase; color: var(--t72c-fg-strong);
}
.t72c-seal-divider { display: flex; align-items: center; justify-content: center; gap: 28px; }
.t72c-seal-rule { flex: 0 1 220px; height: 1px; background: var(--t72-gold); opacity: .55; }
.t72c-seal-mark { display: block; width: 56px; height: 56px; object-fit: contain; opacity: .9; }

/* ==========================================================================
   NARROW. Two breakpoints, and every grid ends up single-column by 560px.
   Checked at 375 x 812: no horizontal scroll, every tap target >= 44px.
   ========================================================================== */
@media (max-width: 1080px) {
  /* The process block leaves its single row and becomes two columns, the
     container closing the top / left / right and each cell its own bottom —
     the reference's own mobile step for `.steps-grid`. A short last row
     takes the rest of its row so the keyline still closes. */
  .t72c-steps {
    grid-auto-flow: row; grid-template-columns: repeat(2, 1fr);
    border-bottom: 0;
  }
  .t72c-step { border-bottom: 1px solid var(--t72-rule-strong); }
  .t72c-step:nth-child(2n) { border-right: 0; }
  .t72c-steps:has(> :last-child:nth-child(2n + 1)) > .t72c-step:last-child { grid-column: span 2; }
  .t72c-promises { grid-template-columns: repeat(3, 1fr); }
  .t72c-areas { grid-template-columns: repeat(4, 1fr); }
  /* Half the mark is off the sheet below 1080px, so it takes a little more
     ink to read the same. Measured at 375px with the same method: the worst
     pair over the mark is 7.42:1, on a #DFD8C2 ground. */
  .t72c-hero::before { right: -160px; opacity: .16; }
}
@media (max-width: 880px) {
  .t72c { padding: 56px var(--t72-gutter); }
  .t72c-hero { padding: 36px var(--t72-gutter) 56px; }
  .t72c-trust-sec { padding: 24px var(--t72-gutter); }
  .t72c-routes, .t72c-probs, .t72c-svcs,
  .t72c-rels, .t72c-brands, .t72c-method { grid-template-columns: repeat(2, 1fr); }
  .t72c-promises { grid-template-columns: repeat(2, 1fr); }
  .t72c-method { gap: 22px 40px; }
  .t72c-areas { grid-template-columns: repeat(3, 1fr); }
  .t72c-mgr { grid-template-columns: 1fr; gap: 24px; }
  .t72c-tc-grid { grid-template-columns: 1fr; gap: 44px; padding: 36px 28px; }
  .t72c-mgr-photo { max-width: 240px; }
  /* the seamless grid re-cuts its hairlines when it drops to two columns */
  .t72c-svc:nth-child(3n) { border-right: 1px solid var(--t72-rule-strong); }
  .t72c-svc:nth-child(2n) { border-right: 0; }
}
/* THE OPENING CARDS DROP TO ONE COLUMN AT 1200px, NOT AT 880.     (Phase 21)
   That is the reference's own breakpoint: `@media (max-width: 1200px)` takes
   `.intent-list` to `1fr` and `.intent-row` to `28px 22px` of padding. Ours
   held three columns down to 880 and two below that, so between 880 and 1200
   each card came out 265px wide — the heading wrapped to two lines, the body
   ran to eight, and the two actions stopped fitting on one row. Widening the
   window is not the fix; the reference already solved it by stacking. The
   `.t72c-triage` entries are therefore withdrawn from the 880 and 560 lists
   above and below — one column is already one column. */
@media (max-width: 1200px) {
  .t72c-triage { grid-template-columns: 1fr; gap: 18px; }
  .t72c-triage-card { padding: 28px 22px; }
}
/* A 320px PHONE STILL HAS TO HOLD THE PAGE.                       (Phase 25b)
   Swept at 17 widths from 320 to 1600 on all 258 pages — 4386 page-viewport
   checks — two of them scrolled sideways, both at 320px and both Oregon:
   `/portland/service-area/` by 16px on a `.t72c-areas` item reading "Alberta
   Arts · NE Portland", and `/sitemap/` by 13px on a `span.url` printing
   "/portland/neighborhoods/laurelhurst/". Both are the same fault: one
   unbreakable run longer than the column. Neither shows at 360px or above,
   so nothing at a supported width moved; 320 is the narrowest phone still in
   use and there is no reason to leave it broken. */
@media (max-width: 380px) {
  .t72c-areas > li, .t72c-areas a, .t72c-areas span { overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
  .t72c-signs, .t72c-routes, .t72c-probs, .t72c-svcs,
  .t72c-rels, .t72c-brands, .t72c-method, .t72c-steps, .t72c-promises,
  .t72c-plans { grid-template-columns: 1fr; }
  /* The reference takes its hairline lists to `gap: 0` on a phone so the
     rows run continuously instead of floating apart, and shortens the row's
     own padding. `.signs-grid { grid-template-columns: 1fr; gap: 0 }` and
     `.signs-item { padding: 16px 0 }`, verbatim. */
  .t72c-signs, .t72c-method { gap: 0; }
  .t72c-sign, .t72c-method-step, .t72c-prob, .t72c-brand,
  .t72c-promise, .t72c-plan { padding: 16px 0 18px; }
  .t72c-step { border-right: 0; }
  /* AND THE SHORT-LAST-ROW SPAN GOES WITH THE COLUMNS. `grid-column: span 2`
     in a ONE-column grid does not clamp: it creates an implicit second
     column and drags every other cell into a two-up the phone has no room
     for. Measured at 375px before this rule: the first cell came out 44px
     wide and 5,086px tall, one letter per line. There is no short row when
     there is one column, so the span is simply withdrawn. */
  .t72c-svcs:has(> :last-child:nth-child(3n + 2)) > .t72c-svc:last-child,
  .t72c-svcs:has(> :last-child:nth-child(3n + 1)) > .t72c-svc:last-child { grid-column: auto; }
  .t72c-areas { grid-template-columns: repeat(2, 1fr); }
  .t72c-hero-stats { gap: 22px; }
  /* the feature list goes single column so a long benefit cannot force the
     grid wider than the viewport — the fault Phase 15 §7 found on the stat
     band, which is the same shape of grid */
  .t72c-tc-list { grid-template-columns: 1fr; }
  .t72c-tc-list li, .t72c-tc-copy, .t72c-tc-grid { min-width: 0; }
  .t72c-tc-links { gap: 14px; }
  .t72c-actions { gap: 10px; }
  .t72c-actions > .t72c-btn { width: 100%; }
  .t72c-phones { gap: 18px; flex-direction: column; }
  .t72c-svc:nth-child(n) { border-right: 0; }
  .t72c-svc { min-height: 0; padding: 26px 22px 24px; }
  /* the stat band stacks two-up, and the vertical hairlines become one rule
     per row rather than a stray line down the middle of a wrapped grid */
  .t72c-trust { grid-template-columns: 1fr 1fr; }
  .t72c-trust-item { padding: 12px 14px; border-right: 1px solid var(--t72-rule-gold-soft); }
  .t72c-trust-item:nth-child(2n) { border-right: none; }
  /* the booking card's two markets stack; the gold control stays 19px/700 */
  .t72c-mkts { grid-template-columns: 1fr; gap: 10px; }
  .t72c-book .t72c-actions { grid-template-columns: 1fr; }
  .t72c-book { padding: 24px 20px 22px; }
  .t72c-hero::before { width: 520px; height: 520px; right: -200px; }
  .t72c-seal-rule { flex-basis: 60px; }
  .t72c-seal { letter-spacing: .16em; }
}

@media (prefers-reduced-motion: reduce) {
  /* The reference gives the HERO row its own step up — .hero-actions .btn is
   12px/.18em at 16px 30px, 50px tall, against .btn-large's 11.5px at 45px.
   One step, in the one place the page asks to be acted on immediately. The
   gold primary is already above this and is untouched by it. */
.t72c-hero .t72c-actions > .t72c-btn {
  font-size: 12px; letter-spacing: .18em; padding: 16px 30px; min-height: 50px;
}

.t72c-btn, .t72c-mkt-link { transition: none; }
}

@media print {
  /* Print flattens every surface to white, so the surface contract has to be
     re-declared or an INK band would print LINEN-on-white at 2.6:1. */
  .t72c {
    padding: 18px 0; background: none;
    --t72c-fg: var(--t72-ink); --t72c-fg-muted: var(--t72-ink);
    --t72c-fg-strong: var(--t72-ink); --t72c-display: var(--t72-ink);
    --t72c-accent: var(--t72-ink); --t72c-rule-soft: var(--t72-rule);
    --t72c-means-bg: transparent;
    color: var(--t72-ink);
  }
  .t72c-faq-a { display: block; }
}


/* ==========================================================================
   PHASE 26 — THE REVISION UTILITIES
   Bethany's revision pass, 2026-09-24. Four devices, each asked for on many
   sections at once, so each is written once here rather than as a per-section
   selector. The three grounds are not defined here: .t72c-band-green,
   .t72c-band-ink and .t72c-band-linen are joined to the surface contracts in
   SECTION 3 above, which is what keeps a banded section's type legal.
   ========================================================================== */

/* -- 0. THE PAPER GROUND --------------------------------------------------
   `"band": "paper"` emitted `.t72c-band-paper`, which nothing defined — the
   key was a silent no-op and a section that asked to be taken BACK to paper
   kept whatever ground its component declares. Caught by the agent rebuilding
   the Tru Comfort pages, which wanted a light band and got linen instead.

   Paper is the default in `.t72c`, so this class only has to win against a
   component's own ground rule. It restates the paper contract rather than
   unsetting the others, because a half-reset would leave, say, the ink band's
   --t72c-btn-ink-bg behind and paint a paper button on paper.
   -------------------------------------------------------------------------- */
.t72c-band-paper, .t72c.t72c-band-paper {
  --t72c-fg:                var(--t72-type-on-paper);
  --t72c-fg-muted:          var(--t72-type-on-paper-muted);
  --t72c-fg-strong:         var(--t72-type-on-paper);
  --t72c-display:           var(--t72-type-on-paper);
  --t72c-accent:            var(--t72-type-on-paper-muted);
  --t72c-rule-soft:         var(--t72-rule);
  --t72c-btn-ink-bg:        var(--t72-ink);
  --t72c-btn-ink-fg:        var(--t72-paper);
  --t72c-btn-ink-hover:     var(--t72-green);
  --t72c-btn-outline-fg:    var(--t72-ink);
  --t72c-btn-outline-bd:    var(--t72-rule-strong);
  --t72c-btn-outline-hover: var(--t72-paper-deep);
  --t72c-means-bg:          var(--t72-paper-warm);

  background: var(--t72-paper);
  background-image: none;
  color: var(--t72c-fg-strong);
}
/* The display-italic role is caged by D83: GOLD-AGED has 0.18 of contrast
   margin and is legal on PAPER and nowhere else, so audit_phase5 re-derives
   who may read it. This band paints PAPER two rules up, which is the same
   proof `.t72c-lite-paper` stands on, and it has to restore the role because
   the ground it is overriding — a green or ink band — set it to that ground's
   own colour, which on paper would be invisible. It is on its own rule so the
   cage can name it exactly. */
.t72c.t72c-band-paper {
  --t72c-display-soft:      var(--t72-display-italic-on-paper);
}

/* -- 1a. THE TINTS TAKE NO GOLD ------------------------------------------
   PAPER-WARM and PAPER-DEEP are cream mixed with 18% and 30% LINEN, and they
   are the grounds D83 already records as GOLD-AGED's two near-misses: 2.92:1
   and 2.78:1, both under the 3.0 that licenses large text. So the tints
   answer "no gold here" and the phrase resolves to the ground's own display
   colour, the same way SCENERY GREEN and LINEN do.

   These 12 nodes were invisible to the contrast guard until Phase 26, because
   color-mix() computes to `color(srgb ...)` and the guard's parser read only
   rgb()/rgba() -- it walked past the tint to the cream behind it and measured
   a ground that was never painted. The parser is fixed in
   tools/measure_contrast_rendered.py; this is the fault it then found.
   -------------------------------------------------------------------------- */
/* THE WARM TINTS NOW INHERIT CREAM'S GOLD, by not overriding it.

   They used to force the accent to ink here. That was written when the only
   cream gold on offer was ANTIQUE at 2.43:1; the accent is GOLD-AGED now,
   which is 3.18:1 on cream and 2.92:1 on these tints -- a hair under the 3.0
   line rather than a colour nobody can see, and the tints ARE cream visually,
   so an accent that changed colour between a cream band and a cream-tinted
   one read as a mistake. Bethany: "all of the italicised Fraunces pieces need
   to be in gold ... it is such important detail."

   Deleting the override rather than restating the colour matters: these
   sections are `.t72c`, so they inherit its `--t72c-gold-ok`, and nothing new
   names the D83 token. LINEN keeps its ink fallback -- that one is 1.46:1 and
   Bethany chose ink for it explicitly. */

/* -- 1. THE GOLD PHRASE ---------------------------------------------------
   The reference sets the SECOND sentence of a two-sentence headline in gold --
   "Standard. Method." after "Heritage.", "We provide them." after the claim.

   WHICH gold is not a style choice, it is the ground's answer, and the first
   version of this rule got it wrong. Measured, not quoted:

                     PAPER    INK     GREEN   LINEN
     ANTIQUE GOLD    2.43     4.04    2.15    1.46
     GOLD-AGED       3.18     3.09    1.64    1.91     (AA large text = 3.0)

   ANTIQUE GOLD on PAPER is 2.43:1 and fails at every size. It is legal on INK
   and nowhere else. On PAPER the legal gold is GOLD-AGED at 3.18:1, which is
   exactly the colour D83 exists for and why D83 exists at all. On SCENERY
   GREEN and LINEN no gold is legal at any size, so the phrase keeps its
   emphasis from size and position instead.

   So --t72c-gold-ok is the ground's answer and the phrase cannot override it:
   INK sets ANTIQUE GOLD, GREEN and LINEN set their own type colour, and the
   default -- PAPER -- is the display-italic role, which resolves to GOLD-AGED.

   GOLD-AGED is caged by D83 to 24px and up, and `max(24px, 1em)` is what makes
   that TRUE BY CONSTRUCTION rather than by convention: a gold phrase cannot
   render under 24px however small the heading around it is, which is what
   audit_phase5's cage re-derives. Inside body copy the class drops both the
   colour and the size and carries emphasis by weight, because that is where a
   24px floor would be absurd and gold would be illegal anyway.
   -------------------------------------------------------------------------- */
.t72c-gold {
  color: var(--t72c-gold-ok, var(--t72-display-italic-on-paper));
  font-size: max(24px, 1em);
  font-style: normal;
}
.t72c-h .t72c-gold,
.t72c-hero-h .t72c-gold,
h1 .t72c-gold, h2 .t72c-gold {
  color: var(--t72c-gold-ok, var(--t72-display-italic-on-paper));
}
/* The guard. Emphasis by weight, at the surrounding copy's own size. */
p .t72c-gold, li .t72c-gold, .t72c-deck .t72c-gold,
.t72c-step-b .t72c-gold, .t72c-means .t72c-gold {
  color: inherit;
  font-size: inherit;
  font-weight: 600;
}

/* -- 2. A FIXED COLUMN COUNT ---------------------------------------------
   "two rows of three", "2 rows of 2". The component grids are auto-flow, so
   six cards became one row of six. These pin the track count and centre the
   run, which is the other half of what was asked: a 3-up grid holding 4 cards
   left a hole on the right.
   -------------------------------------------------------------------------- */
.t72c-cols-2 > .t72c-wrap > :is(ul, ol, div)[class*="t72c-"],
.t72c-cols-3 > .t72c-wrap > :is(ul, ol, div)[class*="t72c-"],
.t72c-cols-4 > .t72c-wrap > :is(ul, ol, div)[class*="t72c-"] {
  grid-auto-flow: row;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 881px) {
  .t72c-cols-2 > .t72c-wrap > :is(ul, ol, div)[class*="t72c-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    max-width: 900px;
  }
  .t72c-cols-3 > .t72c-wrap > :is(ul, ol, div)[class*="t72c-"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
  }
  .t72c-cols-4 > .t72c-wrap > :is(ul, ol, div)[class*="t72c-"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
  }
}
@media (min-width: 601px) and (max-width: 880px) {
  .t72c-cols-3 > .t72c-wrap > :is(ul, ol, div)[class*="t72c-"],
  .t72c-cols-4 > .t72c-wrap > :is(ul, ol, div)[class*="t72c-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
  }
}

/* -- 2a. THE PROCESS KEYLINE FOLLOWS THE COLUMN COUNT -------------------
   `.t72c-steps` draws ONE box round the whole run with each cell adding its
   own right hairline -- correct for a single row. The repair that closes the
   grid when it wraps to two columns lived in `@media (max-width: 1080px)`,
   keyed to the VIEWPORT. So `"cols": 2` at desktop width produced a 2x2 with
   no hairline between the rows and a doubled edge on the right, and the
   obvious way out was to abandon the 2x2 -- which is not what was asked for.

   The keyline is a property of the layout, not of the screen, so these rules
   key off the column count instead and hold at every width.
   -------------------------------------------------------------------------- */
.t72c-cols-2 > .t72c-wrap > .t72c-steps { border-bottom: 0; }
.t72c-cols-2 > .t72c-wrap > .t72c-steps > .t72c-step {
  border-bottom: 1px solid var(--t72-rule-strong);
}
.t72c-cols-2 > .t72c-wrap > .t72c-steps > .t72c-step:nth-child(2n) {
  border-right: 0;
}
/* A short last row spans the rest of it so the box still closes. */
.t72c-cols-2 > .t72c-wrap > .t72c-steps:has(> :last-child:nth-child(2n + 1))
  > .t72c-step:last-child { grid-column: span 2; }

/* Same for a 3-up run: the third cell in each row closes, every cell carries
   its own bottom, and the container stops drawing one. */
.t72c-cols-3 > .t72c-wrap > .t72c-steps { border-bottom: 0; }
.t72c-cols-3 > .t72c-wrap > .t72c-steps > .t72c-step {
  border-bottom: 1px solid var(--t72-rule-strong);
}
.t72c-cols-3 > .t72c-wrap > .t72c-steps > .t72c-step:nth-child(3n) {
  border-right: 0;
}

/* -- 3. THE CENTRED RUN ---------------------------------------------------
   "center the three boxes", "center the 4 boxes". Centres the grid inside the
   wrap and holds the run to a width where three cards read as a group rather
   than as a full-bleed row. The cards' own type stays left-aligned unless the
   section also asked to be centred, because centred body copy at this measure
   is harder to read, which is the opposite of what was asked for.
   -------------------------------------------------------------------------- */
.t72c-grid-centred > .t72c-wrap > :is(ul, ol, div)[class*="t72c-"] {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.t72c-grid-centred > .t72c-wrap { display: flow-root; }

/* -- 4. THE BOTTOM-JUSTIFIED "WHAT IT MEANS" ------------------------------
   Asked for on six pages in the same words: "make all of the what means boxes
   justified at the bottom so they line up better visually". The cards are
   grid cells of equal height already; what varied was where the means line
   started, because the body copy above it differs in length. Making each cell
   a column and giving the means line `margin-top: auto` pins every means line
   in a row to the same baseline. Nothing moves when a card has no means line.
   -------------------------------------------------------------------------- */
.t72c-step, .t72c-brand, .t72c-plan, .t72c-route-card, .t72c-sign {
  display: flex;
  flex-direction: column;
}
.t72c-step > .t72c-means,
.t72c-brand > .t72c-means,
.t72c-plan > .t72c-means,
.t72c-route-card > .t72c-means,
.t72c-sign > .t72c-means {
  margin-top: auto;
  padding-top: 14px;
}
/* .t72c-step draws its number with ::before and lays out as a grid in the
   rule above this sheet's SECTION on process steps. Re-declaring display
   there would drop the number, so the number keeps its own row. */
.t72c-step::before { flex: 0 0 auto; }

/* METHOD is the sixth component that carries a means line and it was NOT in
   the list above — its means sits one level deeper, inside .t72c-method-body,
   so `margin-top: auto` on the card did nothing. Found when the ductless
   pages' means lines stayed ragged (45/45/20px and 20/94/45px off the bottom)
   after every other page had lined up.

   .t72c-method-step stays a GRID: it is `auto 1fr`, the numeral in the first
   track, and turning it into a flex column would drop the numeral out of its
   column. Only the body becomes the column, and the step stretches it to the
   row height instead of hanging it from the first baseline. The numeral is
   pinned back to the baseline so the change is invisible on the stacked,
   one-per-row case, which is most of them. */
.t72c-method-step { align-items: stretch; }
.t72c-method-step::before { align-self: baseline; }
.t72c-method-body { display: flex; flex-direction: column; }
.t72c-method-body > .t72c-means { margin-top: auto; padding-top: 14px; }


/* ==========================================================================
   THE ITALIC ACCENT — ALL OF IT, LOWERCASE, AND THE RIGHT GOLD
   Bethany, 2026-09-28: "the accented fraunces text in caps ... what worked was
   the lower case. also all of the italicized fraunces pieces need to be in
   gold, like Modern diagnostics., Schedule comfort., actually say."

   Both faults confirmed against the reference before changing anything. Every
   <em> in a display heading there measures:

     ground        colour                       transform
     cream         rgb(168,133,74) GOLD-AGED    none   (parent is uppercase)
     dark ink      rgb(195,153,84) ANTIQUE      none
     scenery green rgb(195,153,84) ANTIQUE      none

   TWO THINGS WE HAD WRONG. The accent inherited `text-transform: uppercase`
   from its heading, so it set in caps where the reference sets it lowercase --
   which is the whole point of an italic aside: it changes voice, not volume.
   And only the `.t72c-gold` span was gilded, so every plain <em> in a
   headline stayed ink: "Modern diagnostics.", "Schedule comfort.",
   "actually say." She is right that it is the detail that carries the page.

   ON CREAM THE GOLD IS GOLD-AGED, not antique. That is not a nicety: antique
   gold on cream is 2.43:1 and illegal at any size, gold-aged is 3.18:1 and
   legal for display type. The reference has been doing this all along, which
   is why its cream italics read and ours looked washed out.
   ========================================================================== */
/* SCOPED TO HEADINGS THAT CARRY A DISPLAY CLASS, deliberately. A bare
   unclassed <h2> can be small -- one on the NC homepage renders its italic at
   13px -- and gold at that size is illegal on every ground. The classed
   headings all carry the max(24px, …) floors the D83 cage already re-derives.
   The reference ships that 13px case in gold anyway; it is one of its 1,879
   failing nodes, and not a thing to copy. */
/* BROADENED on Bethany's second pass: "make sure all of the italicised
   Fraunces are in gold -- everywhere. it was consistent on the tbyrds site."
   The narrow version excluded bare <h2>/<h3>, which are the HAND-WRITTEN
   headings on the NC pages -- and those are exactly the ones she named:
   "Modern diagnostics.", "actually say.", "Traditional Values." Consistency
   is the point of the device, so every display italic takes it.

   The one small case, `.semantic-band h2 em` at 13px, is gilded too. The
   reference gilds the same element at 17px. Below 24px gold-aged needs 4.5:1
   and has 3.18, so it is a knowing failure, matching a site that ships 1,879
   of them. */
/* A BLANKET, NOT AN ALLOW-LIST, AND THAT IS THE POINT. Measured on the live
   reference: every single <em> on the page is a gilded Fraunces phrase, in
   display lines and in 18px body slots alike. Bethany asked for exactly that
   ("it was consistent on the tbyrds site and needs to be on the new tru72
   site"). The first attempt here WAS an allow-list of slot classes, and it
   leaked three times in a row -- .t72c-mgr-b, .t72c-svc-b, .t72c-triage-body
   each turned up only when a new page was measured. An allow-list of slot
   names cannot be complete, because the slots are page furniture and new pages
   add new ones. So the default is gilded and the exceptions are named: running
   prose, where a gilded sentence would be both wrong and unreadable.
   Sizes in the body slots run 15.5-18px, where GOLD-AGED on cream is 3.18:1 --
   under AA for small text. That is the reference's own treatment and what she
   asked to match; the sentence around the accent stays INK, so every slot
   reads with or without it. */
:is(.t72c, body) :is(h1, h2, h3, .t72c-h, .t72c-h1, .t72c-hero-h, .t72c-creed,
    .closing-seal-promise, .band-head) em,
:is(.t72c, body.t72-sheet) :not(p.t72c-p, p.t72c-body, .t72c-prose, .t72c-lede,
    .t72c-faq-a, .t72c-legal) > em,
:is(h1, h2, h3, .t72c-h, .t72c-h1, .t72c-hero-h, .t72c-creed,
    .closing-seal-promise, .band-head) em,
:is(h1, h2, h3, .t72c-h, .t72c-h1, .t72c-hero-h) .t72c-gold,
.t72c .t72c-gold {
  font-family: var(--t72-font-body);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  /* !important because the ported per-page sheets still carry rules like
     `.about-text h2 em { color: var(--t72-label) }` at (0,1,2), one step above
     this selector, on pages that were built before the accent existed. There
     are dozens of them across the NC and Oregon page sets and they are not
     individually wrong -- they are simply older. The accent is one site-wide
     decision and should not lose to a page. */
  color: var(--t72c-gold-ok) !important;
}
/* Lowercase is the point even where the colour does not apply: the italic is
   a change of voice, not of volume, and the reference sets every one of them
   `text-transform: none` under an uppercase heading. */
:is(h1, h2, h3) em { text-transform: none; letter-spacing: 0; }

/* Running copy is not an accent: an <em> inside a paragraph or a list is
   emphasis at the copy's own size, where gold is illegal on every ground. */
:is(p, li, dd, figcaption, small, .t72c-deck, .t72c-step-b, .t72c-means,
    .t72c-fineprint) em,
:is(p, li, dd, .t72c-deck, .t72c-step-b, .t72c-means) .t72c-gold {
  font-style: italic;
  text-transform: inherit;
  color: inherit;
}


/* THE LEGACY HAND-WRITTEN BANDS state their gold too. They are the ported
   markup that publishes no surface contract -- `.t72-band-green`, the closing
   seal, the plain CTA bands -- so without this they would take the cream
   default on a dark or green ground, where gold-aged is 1.64:1 and 3.09:1
   respectively. Antique gold is the right one on both. */
.t72-band-green, .t72-band-green-panels, .cta-band, .final-cta, .closing-seal,
.mid-cta, .cc-mention, .trust-strip, .locations, .locations-cta,
.brand-creed, .standard-band, .semantic-band.on-dark {
  --t72c-gold-ok: var(--t72-gold);
}

/* ===========================================================================
   THE LABEL VOICE TAKES THE GOLD                                 (Phase 28)
   ===========================================================================
   MEASURED ON THE LIVE REFERENCE, ELEMENT BY ELEMENT. Its homepage carries 46
   gilded text nodes to our 16, and the 30 we were missing are not scattered --
   they are one voice. Every Geist Mono label on the reference is gold: the
   service numbers, the promise-row numerals, the programme tags, the data
   line, the "service area" label, the footer column heads, the city names in
   the utility bar. Not the display type, not the body copy. The mono label
   voice, everywhere it appears.

   WHICH GOLD IS NOT DECLARED HERE. Each of these takes `--t72c-gold-ok`, the
   ground's own gold, so the same rule renders GOLD-AGED on cream and linen and
   ANTIQUE on green and ink -- which is exactly the split the reference uses:

       service-num  on cream  rgb(168,133,74)   GOLD-AGED
       service-num  on ink    rgb(195,153,84)   ANTIQUE
       num          on green  rgb(195,153,84)   ANTIQUE
       label, lead  on cream  rgb(168,133,74)   GOLD-AGED

   EYEBROWS ARE DELIBERATELY NOT IN THIS LIST. They are the same mono voice and
   the reference does gild them, but they run 10-11px, where GOLD-AGED on cream
   measures 2.4:1. Bethany was given that number and chose: "yes, do the
   numbers and labels in gold, keep eyebrows ink" (2026-09-28). So .t72c-eyebrow,
   .eyebrow and .rebrand-eyebrow keep the ground's ordinary type colour, and
   the exclusion is written as a rule below rather than left to the absence of
   a selector, so a later sheet cannot quietly sweep them in.

   BUTTONS AND LINKS ARE ALSO OUT. They are mono too, but a control's colour is
   its affordance, not a label's accent; the reference keeps its buttons' own
   colours as well. Only `see-all` is gilded there, and that is one quiet link
   we have chosen not to follow, because Bethany asked for numbers and labels.

   CONTRAST, STATED PLAINLY. These land between 9.5px and 15px, where AA wants
   4.5:1. GOLD-AGED on cream is 3.18:1 and ANTIQUE on ink is 4.04:1 and on
   green 2.15:1. The reference ships all three. Bethany has now chosen this
   treatment four times and was given the measured numbers each time. What
   protects the pages is that none of these nodes is the only copy of its
   information: every numeral is followed by the label it counts, every tag
   sits above the heading it tags, and the footer column heads sit above links
   that name themselves.
   ========================================================================== */
.t72c-svc-n,            /* 01 - COOLING, on the services grid   (service-num) */
.t72c-trust-l,          /* the five promise numerals                    (num) */
.t72c-svc-tag,          /* the programme tag over a service   (program-tag)   */
.t72c-tc-tag,           /* the Tru Comfort tag                (program-tag)   */
.t72c-means-label,      /* "what it means" row labels               (label)   */
.t72c-evidence,         /* the instrument line                  (data-line)   */
.t72c-phone-city,       /* CHARLOTTE / RALEIGH over a number         (SPAN)   */
.t72c-plan-tag,
.t72c-step-n,
.t72c-promise-n,
.t72c-method-n {
  color: var(--t72c-gold-ok);
}

/* NO EYEBROW RULE HERE, AND THAT IS THE FIX. The first version of this block
   "defensively" restored the eyebrows' colour to --t72c-fg-muted, which is not
   what they had: the plain `.eyebrow` on cream was SCENERY GREEN and the
   defensive rule turned it INK. Nothing in the gold list above matches an
   eyebrow, so the exclusion was never needed -- it only broke a colour nobody
   asked to change. Eyebrows are left alone entirely; if a later sheet ever
   does sweep them into the gold, the fix is to narrow that sheet's selector,
   not to add a counter-rule here. */

/* THE LEGACY FOOTER AND UTILITY BAR SIT OUTSIDE EVERY .t72c CONTRACT, so they
   have no --t72c-gold-ok to read and would fall back to the root default,
   GOLD-AGED, which on INK is 3.09:1 -- worse than the ANTIQUE the reference
   actually uses there (4.04:1). Both are painted on INK, so both publish the
   ink contract's gold explicitly rather than inheriting the wrong one. */
.utility, .footer {
  --t72c-gold-ok: var(--t72-gold);
}
.utility .phones span,          /* CHARLOTTE / RALEIGH over each number       */
.footer .footer-grid h4,        /* the footer column heads              (H4)  */
.footer .footer-brand .label {  /* "Service area, North Carolina"    (label)  */
  color: var(--t72c-gold-ok);
}