/* ==========================================================================
   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. */
  --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);

  padding: 80px 0;
  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. */
.t72c-wrap {
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--t72-gutter, 56px);
}
.t72c + .t72c { border-top: 1px solid var(--t72-rule); }

/* ==========================================================================
   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. */
.t72c-inline-cta, .t72c-story-sec, .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);
}
.t72c-process-sec, .t72c-jump-sec,
.t72c-faq-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.

   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. */
.t72c-route-sec, .t72c-areas-sec, .t72c-method-sec {
  --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-trust-sec, .t72c-promise-sec, .t72c-final-cta, .t72c-book,
.t72c-triage-card {
  --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-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-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.
   -------------------------------------------------------------------------- */
.t72c-island, .t72c-table .t72c-us,
.t72c-sign, .t72c-route, .t72c-prob, .t72c-svc, .t72c-rel, .t72c-brand,
.t72c-promise, .t72c-plan, .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: 700;
  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); }
.t72c-h1 { font-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   .82em of clamp(40px, 4.6vw, 62px)  -> 32.8px at 375px
       .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. */
.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: .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);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  /* 12.5px, 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)
   --------------------------------------------------------------------------
   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.
   ========================================================================== */
.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-final-cta, .t72c-seo-sec,
.t72c-seal-sec { text-align: 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-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-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 { 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;
}
.t72c-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 15px 28px;
  border-radius: var(--t72-radius, 2px);
  font-family: var(--t72-font-label);
  font-weight: 700;
  letter-spacing: .06em;
  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);
  font-size: 15px;
}
.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);
  font-size: 15px;
}
.t72c .t72c-btn-outline:hover { background: var(--t72c-btn-outline-hover); }

.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 ------ */
.t72c-means {
  margin: 14px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--t72-gold);
  /* On a dark band --t72c-means-bg is `transparent`, so this reads
     PAPER-on-INK at 9.7:1 rather than the warm tint. */
  background: var(--t72c-means-bg);
  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 0 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. 7% is the reference's opacity, and it is decoration — aria-hidden
   by construction, because it is a background. */
.t72c-hero::before {
  content: '';
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  width: 480px; height: 480px;
  background: var(--t72c-watermark, none) center/contain no-repeat;
  opacity: .07; z-index: 1; pointer-events: none;
}
.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: 700;
  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: 700;
  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); }
.t72c-mkt-name {
  display: inline-block; font-family: var(--t72-font-display);
  font-weight: 700; 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; }

.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 ------------------------------------------------------ */
.t72c-triage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.t72c-triage-card {
  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); }
.t72c-triage-h {
  font-family: var(--t72-font-display); font-weight: 700;
  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 buttons side by side
   rather than stacked full-width, which is what made the card read as a stack
   of slabs. */
.t72c-triage-card .t72c-actions {
  margin-top: auto; padding-top: 16px; gap: 8px;
  border-top: 1px solid var(--t72-rule-gold);
}
.t72c-triage-card .t72c-actions > .t72c-btn {
  flex: 1 1 150px; min-width: 0; padding: 13px 14px; font-size: 14px;
}
.t72c-triage-card .t72c-note { text-align: center; font-size: 13px; }

/* ==========================================================================
   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 0; }
.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: 700;
  font-size: 22px; line-height: 1; letter-spacing: .015em; text-transform: uppercase;
  color: var(--t72c-fg-strong);
}
.t72c-trust-l {
  font-family: var(--t72-font-label); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.45;
  margin-top: 8px; color: var(--t72c-fg);
}
.t72c-trust-sec .t72c-creds { justify-content: center; margin-top: 18px; padding-top: 14px; }
.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;
}
.t72c-signs { grid-template-columns: repeat(3, 1fr); }
.t72c-promises { grid-template-columns: repeat(5, 1fr); }
.t72c-plans { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
.t72c-sign, .t72c-route, .t72c-prob, .t72c-svc, .t72c-rel, .t72c-brand,
.t72c-promise, .t72c-plan {
  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-sign-h, .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: 700;
  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; }
.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);
}
/* 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. */
.t72c-svc-featured .t72c-svc-tag {
  display: inline-block; align-self: flex-start;
  padding: 5px 11px; margin: 0 0 14px;
  background: var(--t72-gold);
  font-size: 19px; font-weight: 700; letter-spacing: .06em;
}
.t72c .t72c-svc-featured .t72c-svc-tag { color: var(--t72-ink); }
.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; }
.t72c-svc-n {
  font-family: var(--t72-font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; display: block; margin-bottom: 8px;
  color: var(--t72c-fg-muted);             /* 5.2:1 — gold at 15px is 2.43:1 */
}
/* 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;
}
.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 ----------------------------------------------- */
.t72c-method, .t72c-steps {
  list-style: none; margin: 0; padding: 0; counter-reset: t72c-step;
  display: grid; gap: 22px;
}
.t72c-method { grid-template-columns: repeat(3, 1fr); }
.t72c-steps { grid-template-columns: repeat(5, 1fr); }
.t72c-method-step, .t72c-step { counter-increment: t72c-step; }
.t72c-method-step::before, .t72c-step::before {
  content: counter(t72c-step, decimal-leading-zero);
  display: block; font-family: var(--t72-font-display); font-weight: 700;
  font-size: 15px; letter-spacing: .1em;
  color: var(--t72c-fg-muted);             /* GREEN 5.2:1 / LINEN 5.7:1 at 15px */
  padding-bottom: 10px; margin-bottom: 12px;
  /* The gold stays, as the RULE. D42: gold is decoration, not type. */
  border-bottom: 1px solid var(--t72-rule-gold);
}
.t72c-step { background: var(--t72-paper); border: 1px solid var(--t72-rule); padding: 22px 20px; }
.t72c-method-h, .t72c-step-h {
  font-family: var(--t72-font-display); font-weight: 700;
  font-size: clamp(19px, 1.7vw, 22px); line-height: 1.08;
  letter-spacing: .005em; text-transform: uppercase; margin: 0 0 10px;
}
.t72c-method-b, .t72c-step-b { font-size: 15.5px; line-height: 1.55; margin: 0 0 8px; }

/* -- 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: 700; 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 0; 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 0; }
.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: 700; 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 ---------------------------------------------------------- */
.t72c-faqs { border-top: 1px solid var(--t72c-rule-soft); max-width: 900px; }
.t72c-faq-item { border-bottom: 1px solid var(--t72c-rule-soft); }
.t72c-faq-q {
  cursor: pointer; list-style: none;
  padding: 19px 44px 19px 0; min-height: 44px; position: relative;
  font-family: var(--t72-font-display); font-weight: 700;
  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 0; }
.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 0 48px; border-top: 1px solid var(--t72-rule); }
.t72c-seo-sec .t72c-h { font-size: clamp(17px, 1.3vw, 20px); }

/* -- 23. enrol cards ------------------------------------------------------- */
.t72c-plan { border-top: 3px solid var(--t72-rule-strong); }
.t72c-best { border-top-color: 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: 700; 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: 700;
  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: 700;
  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 0 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: 700;
  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) {
  .t72c-steps { grid-template-columns: repeat(3, 1fr); }
  .t72c-promises { grid-template-columns: repeat(3, 1fr); }
  .t72c-areas { grid-template-columns: repeat(4, 1fr); }
  .t72c-hero::before { right: -160px; opacity: .05; }
}
@media (max-width: 880px) {
  .t72c { padding: 56px 0; }
  .t72c-hero { padding: 36px 0 56px; }
  .t72c-trust-sec { padding: 24px 0; }
  .t72c-wrap { padding: 0 var(--t72-gutter-mobile, 22px); }
  .t72c-triage, .t72c-signs, .t72c-routes, .t72c-probs, .t72c-svcs,
  .t72c-rels, .t72c-brands, .t72c-method { grid-template-columns: repeat(2, 1fr); }
  .t72c-steps, .t72c-promises { grid-template-columns: repeat(2, 1fr); }
  .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; }
}
@media (max-width: 560px) {
  .t72c-triage, .t72c-signs, .t72c-routes, .t72c-probs, .t72c-svcs,
  .t72c-rels, .t72c-brands, .t72c-method, .t72c-steps, .t72c-promises,
  .t72c-plans { grid-template-columns: 1fr; }
  .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) {
  .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; }
}