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

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

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

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

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

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

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

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

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

:root {
  /* The gold button's label size. Both values clear WCAG's bold large-text
     threshold (18.66px @ 700). Do not lower either one. */
  --t72-cta-size:        20px;
  --t72-cta-size-narrow: 19px;
  --t72-cta-weight:      700;
  --t72-cta-track:       .06em;
  --t72-cta-pad:         17px 30px;
  --t72-cta-pad-narrow:  15px 22px;
}

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

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

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

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

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

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

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

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

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

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

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

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

   MEASURED, on SCENERY GREEN as a ground:

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

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

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

   THE BANDS, and why each one:

     .mid-cta      NC   8 sections. A mid-page CTA band that shipped INK,
                        sitting between an INK "discipline" band and an INK
                        "final-cta". Three ink bands in a row became one ink,
                        one green, one ink. Text and buttons only - no cards
                        inside it, which is what makes the blanket rule safe.
     .cc-mention   NC   14 sections. The Tru Comfort strip, which shipped INK
                        directly above the INK final-cta. Same shape: a
                        heading, a paragraph and one button.
     .trust-strip  OR, NV, brand - 97 sections. The stat strip under the
                        hero, which shipped INK immediately below the PAPER
                        hero and above a PAPER-tint band. Four cells of type
                        and a hairline divider. MEASURED: 0 of the 97 contain
                        a button, so it stays a pure type surface.

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

   NOT converted: .final-cta and .hero stay INK and PAPER. The point is to
   break up a run of identical bands, not to recolour every dark band.
   ========================================================================== */

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

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

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

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

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

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

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

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

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

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

   TWO CAUSES, over and over:

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

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

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

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

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

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

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

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

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

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

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

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

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

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