/* ==========================================================================
   TRU72 — OREGON COMPONENT SKIN
   --------------------------------------------------------------------------
   Oregon's page furniture, restyled to the North Carolina component patterns
   (D39), carrying the five-colour Rev06 palette (D42). Loads AFTER each
   page's inline <style>, so it is the last word on the shared furniture:
   utility bar, header, nav, drawer, buttons, eyebrows, cards, section bands,
   tables, footer and the mobile sticky bar.

   WHY AN OVERRIDE LAYER RATHER THAN 106 EDITED PAGES
   Oregon's markup and its class names stay exactly as they are — no slug moves,
   no content rewritten, nothing deleted. One file re-skins every page, and the
   internal team's WordPress rebuild (D40) can read the component contract here
   in one place instead of reverse-engineering it from 106 inline blocks.

   `!important` appears only where an inline rule is more specific than anything
   this sheet can say without duplicating Oregon's whole selector tree. It is
   deliberate, and it is confined to this file.

   NC PATTERN REFERENCE (pages/nc/*): square corners, hairline rules rather than
   shadows, tracked uppercase small-caps labels, display type with
   POSITIVE tracking, ink bands hairlined in aged gold.

   COLOUR DISCIPLINE (tru72-tokens.css carries the measured table)
     buttons       INK on PAPER, or PAPER on INK. Never a gold fill.
     small type    INK or SCENERY GREEN on paper · LINEN or PAPER on ink ·
                   PAPER only on scenery green
     ANTIQUE GOLD  rules, keylines, borders, and display type 24px+ on ink
   ========================================================================== */

/* ==========================================================================
   1. TYPE SYSTEM
   ========================================================================== */

body {
  font-family: var(--t72-font-body);
  font-feature-settings: "ss01";
  /* The display face ships in one weight. Nothing gets a faked cut. */
  font-synthesis: none;
  font-size: 16.5px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5,
.hero h1, .hero h2,
.section-head h2 {
  font-family: var(--t72-font-display);
  letter-spacing: var(--t72-track-display) !important;
}

/* The display face at positive tracking sets wider than Oregon's retired serif
   did, so a headline that
   was authored `white-space: nowrap` overflowed the viewport. Measured on
   /, /portland/good-neighbor/ and /albany/good-neighbor/ — it wraps instead. */
.final-cta h2, .final-cta .head-line, .head-line,
.standard-band h2, .section-head h2, .hero h1 {
  white-space: normal !important;
}
h1, h2, h3, h4, .head-line { overflow-wrap: break-word; }

/* Inscriptional display faces collapse under negative tracking. */
.hero h1, .hero h1 .sub, .final-cta h2, .section-head h2,
.faq-q, .rebates h2, .services h2, .scenarios h2, .why-section h2 {
  letter-spacing: var(--t72-track-display) !important;
}

/* The italic voice is Fraunces italic, matching NC. */
.serif, .hero h1 .sub, .hero-body em, .closing-seal-promise em {
  font-family: var(--t72-font-body);
  font-style: italic;
  font-weight: 400;
}

/* Label voice: mono, uppercase, wide — NC's most recognisable texture. */
.eyebrow, .hero-eyebrow .eyebrow, .nav-item > .nav-link, .nav-item > .nav-trigger,
.utility-bar, .footer-col h4, .footer h4, .btn, .breadcrumb, .breadcrumbs,
.closing-seal-promise, .footer-bottom {
  font-family: var(--t72-font-mono);
}

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--t72-type-on-paper-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--t72-gold);   /* gold as a RULE, never as the type */
  flex-shrink: 0;
}
/* On any dark band, label type goes PAPER — the one value that clears AA on
   INK (9.7:1) and on SCENERY GREEN (5.2:1) alike. */
.final-cta .eyebrow, .why-tru72 .eyebrow, .eyebrow-tan,
.hero-dark .eyebrow, .cta-band .eyebrow, .trust-strip .eyebrow,
.closing-seal .eyebrow {
  color: var(--t72-paper) !important;
}
.final-cta .eyebrow::before, .why-tru72 .eyebrow::before, .eyebrow-tan::before {
  background: var(--t72-gold);
}
.hero-eyebrow::after { background: var(--t72-gold) !important; }

/* The display face carries 209 glyphs — Latin plus the punctuation the sites
   use — and two characters that appear in display-sized type are not among
   them: the star U+2605 and the multiplication sign U+00D7. Rather than leave
   them to a per-glyph fallback nobody has measured, the elements that hold
   them take the body face, which has both. Measured on /, /portland/,
   /albany/, /portland/reviews/, /albany/reviews/ and /manual-j/. */
.num, .stars, .rating-number, .symbol,
.rating-summary strong, .reviews strong,
.trust-strip .num, .trust-band .num, .rating-card .rating-number,
.trust-strip strong, .trust-item strong, .trust-band strong {
  font-family: var(--t72-font-body) !important;
}

/* ==========================================================================
   2. UTILITY BAR
   ========================================================================== */

.utility-bar {
  background: var(--t72-ink);
  color: var(--t72-linen);
  font-family: var(--t72-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--t72-gold);
}
.utility-bar a { color: var(--t72-paper); }
.utility-bar a:hover { color: var(--t72-linen); }
.utility-bar .pulse { background: var(--t72-gold); }

/* ==========================================================================
   3. HEADER + NAV
   ========================================================================== */

.site-header {
  background: var(--t72-paper);
  border-bottom: 1px solid var(--t72-rule);
}
.brand-mark img {
  height: 104px;
  width: auto;
  max-width: 240px;
}

.nav-item > .nav-link,
.nav-item > .nav-trigger {
  font-family: var(--t72-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--t72-ink);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-item > .nav-link:hover,
.nav-item > .nav-trigger:hover,
.nav-item:hover > .nav-trigger,
.nav-item:focus-within > .nav-trigger {
  color: var(--t72-green);
  border-bottom-color: var(--t72-gold);
}
.nav-item > .nav-link.is-active {
  color: var(--t72-green);
  border-bottom-color: var(--t72-gold);
}
.nav-caret { color: var(--t72-green); }

.nav-dropdown {
  background: var(--t72-paper);
  border: 1px solid var(--t72-gold);
  border-top: 1px solid var(--t72-gold);
  box-shadow: var(--t72-shadow-drop);
  border-radius: 0;
}
.nav-dropdown a {
  font-family: var(--t72-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t72-ink);
}
.nav-dropdown a:hover {
  background: var(--t72-paper-warm);
  color: var(--t72-green);
}
.nav-open, .nav-close { color: var(--t72-ink); }

/* ==========================================================================
   4. BUTTONS
   INK on PAPER or PAPER on INK. A gold fill fails at every text colour
   (PAPER on ANTIQUE GOLD 2.6:1, INK on INK on gold 4.0:1) so there is none.
   ========================================================================== */

.btn {
  font-family: var(--t72-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: 0;
  border-width: 1px;
  border-style: solid;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: none; }
.btn-large { padding: 17px 34px; font-size: 12px; }

/* Primary — the only filled button on a paper surface. 9.8:1. */
.btn-primary {
  background: var(--t72-ink);
  color: var(--t72-paper);
  border-color: var(--t72-ink);
}
.btn-primary:hover {
  background: var(--t72-green);
  border-color: var(--t72-green);
  color: var(--t72-paper);            /* 5.2:1 */
}
/* The header pair: schedule is the primary action, call is its outline twin.
   Both on PAPER, so both are INK — no second fill colour. */
.header-cta .btn-schedule, .hero-cta .btn-schedule, .btn-schedule {
  background: var(--t72-ink);
  color: var(--t72-paper);
  border-color: var(--t72-ink);
}
.btn-schedule:hover {
  background: var(--t72-green);
  border-color: var(--t72-green);
  color: var(--t72-paper);
}
.header-cta .btn-call, .btn-call {
  background: transparent;
  color: var(--t72-ink);
  border-color: var(--t72-ink);
}
.header-cta .btn-call:hover, .btn-call:hover {
  background: var(--t72-ink);
  color: var(--t72-paper);
  border-color: var(--t72-ink);
}
/* On an ink band the same pair inverts. */
.final-cta .btn-call, .trust-strip .btn-call, .why-tru72 .btn-call,
.local-story .btn-call, .cta-band .btn-call {
  background: transparent;
  color: var(--t72-paper);
  border-color: var(--t72-paper);
}
.final-cta .btn-schedule, .cta-band .btn-schedule {
  background: var(--t72-paper);
  color: var(--t72-ink);
  border-color: var(--t72-paper);
}

/* Secondary — outlined on paper. */
.btn-secondary {
  background: transparent;
  color: var(--t72-ink);
  border-color: var(--t72-ink);
}
.btn-secondary:hover {
  background: var(--t72-ink);
  border-color: var(--t72-ink);
  color: var(--t72-paper);
}
/* The light button, for an ink band. 9.7:1 either way. */
.btn-tan, .btn-ghost-cream {
  background: var(--t72-paper);
  color: var(--t72-ink);
  border-color: var(--t72-paper);
}
.btn-tan:hover, .btn-ghost-cream:hover {
  background: transparent;
  color: var(--t72-paper);
  border-color: var(--t72-paper);
}
/* A light button on a paper surface would be paper-on-paper. Where Oregon puts
   one on a light band, it takes the primary treatment instead. */
.hero .btn-tan, .services .btn-tan, .story .btn-tan, .about .btn-tan,
.section-head .btn-tan, .related .btn-tan, .faq-section .btn-tan,
.rebates .btn-tan, .method .btn-tan, .problems .btn-tan,
.hero .btn-ghost-cream, .services .btn-ghost-cream, .rebates .btn-ghost-cream {
  background: var(--t72-ink);
  color: var(--t72-paper);
  border-color: var(--t72-ink);
}

/* Rust was Oregon's one filled-button colour, and it is retired. Several pages
   re-fill their own CTA rather than using .btn-primary, so those land on the
   accent by inheritance. Every filled CTA is INK on PAPER, 9.8:1. Measured
   across the built pages — these are the variants that re-fill themselves. */
a.card-cta, a.city-schedule-btn, a.call, a.book, a.find, a.btn-call-big,
.btn-primary, .btn.btn-primary, .btn-primary.btn-large {
  background: var(--t72-ink) !important;
  color: var(--t72-paper) !important;
  border-color: var(--t72-ink) !important;
}
/* ...and invert on an ink band, where an ink button would vanish. */
.final-cta a.call, .final-cta a.book, .final-cta a.find, .final-cta .btn-primary,
.trust-strip .btn-primary, .why-tru72 .btn-primary, .local-story .btn-primary,
.cta-band .btn-primary, .closing-seal .btn-primary,
.savings-card .btn-primary, .wa-callout .btn-primary {
  background: var(--t72-paper) !important;
  color: var(--t72-ink) !important;
  border-color: var(--t72-paper) !important;
}

/* ==========================================================================
   5. SURFACES — square corners, hairline rules, no soft shadows
   ========================================================================== */

.service-card, .scenario-card, .problem-card, .why-card, .related-card,
.compare-card, .visit-card, .program-card, .price-card, .loc-card,
.location-card, .intent-card, .form-card, .partner-card, .routing-card,
.comparison-table, .rebate-table, .compare-table, .faq-list,
.hero-photo, .photo-placeholder, .proof-strip {
  border-radius: 0 !important;
}
.service-card, .scenario-card, .problem-card, .why-card, .related-card,
.compare-card, .visit-card, .program-card, .price-card, .loc-card,
.location-card, .intent-card, .partner-card, .routing-card {
  box-shadow: none;
  border-color: var(--t72-rule-strong);
}
.service-card:hover, .scenario-card:hover, .related-card:hover,
.routing-card:hover, .loc-card:hover, .location-card:hover {
  box-shadow: none;
  background: var(--t72-paper-warm);
  border-color: var(--t72-gold);
  transform: none;
}

/* Ink bands carry an aged-gold hairline top and bottom — the NC signature, and
   now the only thing separating two adjacent dark bands. */
.final-cta, .why-tru72, .trust-strip, .closing-seal, .hd-badge-inner {
  border-top: 1px solid var(--t72-gold);
  border-bottom: 1px solid var(--t72-gold);
}

/* ==========================================================================
   6. TABLES
   ========================================================================== */

.rebate-table, .compare-table, .comparison-table {
  border: 1px solid var(--t72-rule-strong);
  border-radius: 0;
  overflow: hidden;
}
.rebate-table th, .compare-table th, .comparison-header {
  font-family: var(--t72-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.rebate-table td, .compare-table td, .compare-cell, .comparison-row {
  font-family: var(--t72-font-body);
}
.comparison-header .col-tru72, .comparison-row .col-tru72,
.cmp-check { color: var(--t72-paper); }
.comparison-header .col-other, .col-other, .cmp-x { color: var(--t72-linen); }

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.site-footer { background: var(--t72-ink); color: var(--t72-linen); }
.site-footer a { color: var(--t72-linen); }
.site-footer a:hover { color: var(--t72-paper); }
.footer-col h4, .footer-brand-nav h4 {
  font-family: var(--t72-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--t72-paper);
}
.footer-brand img { width: 168px; height: auto; max-width: 100%; }
.footer-bottom {
  font-family: var(--t72-font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--t72-linen);
  border-top: 1px solid rgba(203,192,170,.22);
}

/* ==========================================================================
   8. MEASURED CONTRAST CORRECTIONS
   --------------------------------------------------------------------------
   Every rule below fixes a pair MEASURED failing WCAG AA on the built pages —
   element, container, page and ratio are all named so the next person can
   re-check rather than trust. Nothing here is a guess.
   ========================================================================== */

/* -- ANTIQUE GOLD as type on PAPER is 2.4:1 and fails at EVERY size, large
      included. /oregon-rebates/ measured 2.43 on a 35px figure. -------- */
.range, .amount, .figure, .program-range { color: var(--t72-ink) !important; }
/* ...and the same figures sitting on an INK card take PAPER, which clears at
   every size (9.7:1) where gold would only clear at 24px+. Measured on
   /pricing/, /portland/ and /portland/services/emergency/. */
.price-card.featured .figure, .mission-seal-strip .figure, .em-hero .figure,
.savings-card .figure, .final-cta .figure, .why-tru72 .figure,
.trust-strip .figure, .rating-card .figure, .wa-callout .figure,
.hero-plan-card .figure, .compare-card .figure, .tldr-card .figure,
.office .figure, .step .figure, .belief .figure, .deeper .figure,
.apply .figure, .cta-band .figure, .locations-cta .figure,
.price-card.featured .amount, .savings-card .amount, .savings-card .range {
  color: var(--t72-paper) !important;
}

/* -- gold as type on paper is 2.4:1. On paper, quiet type is SCENERY
      GREEN (5.2:1). /oregon-rebates/ /portland/rebates/ /albany/rebates/ -- */
.tag, .map-tag { color: var(--t72-green) !important; }

/* -- ...but the same .tag sits on an INK card in six places, where SCENERY
      GREEN is 1.9:1. On ink, quiet type is LINEN (5.7:1). -------------- */
.savings-card .tag,          /* /oregon-rebates/ /portland/rebates/ /albany/ */
.wa-callout .tag,            /* /oregon-rebates/ /portland/rebates/          */
.compare-card.good .tag,     /* /manual-j/ /portland/manual-j/               */
.price-card.featured .tag,   /* /pricing/                                    */
.rating-card .tag,           /* /portland/reviews/ /albany/reviews/          */
.hero-map .map-tag,          /* /portland/service-area/ /albany/service-area/ */
.nv-callout .tag {           /* the desert-market rebates page               */
  color: var(--t72-linen) !important;
}

/* -- rating glyphs and display numerals on PAPER. LINEN is 1.7:1 there.
      /portland/ /albany/ · /schedule/ ---------------------------------- */
.reviews .stars, .rating-summary .stars, .review-card .stars,
.intent-num { color: var(--t72-ink) !important; }

/* -- the same numerals on an INK card are display sized, which is the one
      place the brand guide clears ANTIQUE GOLD (4.0:1 at 24px+).
      /portland/reviews/ /albany/reviews/ ------------------------------- */
.rating-card .rating-number, .rating-card .stars { color: var(--t72-gold) !important; }
.rating-card .rating-meta { color: var(--t72-linen) !important; }

/* -- a white enrolment box is not PAPER; LINEN is 1.8:1 on white.
      /tru-comfort/ /portland/tru-comfort/ /albany/tru-comfort/ ---------- */
.enroll-label { color: var(--t72-ink) !important; }
.enroll-note  { color: var(--t72-green) !important; }

/* -- a SCENERY GREEN band clears AA for PAPER only; LINEN is 3.1:1 on it.
      /diagnostic-first/ /manual-j/ ------------------------------------- */
.locations-cta .eyebrow { color: var(--t72-paper) !important; }

/* -- the comparison table's HEADER row is ink; its body rows are paper.
      /pricing/ --------------------------------------------------------- */
.compare-row.header .cell { color: var(--t72-linen) !important; }

/* -- SCENERY GREEN type on an INK band is 1.9:1. /portland/ /albany/ ---- */
.local-story p, .local-story li { color: var(--t72-linen) !important; }

/* -- INK type on an INK card. /portland/services/emergency/ ------------- */
.emergency-block .label, .em-hero .label, .safety-card .label {
  color: var(--t72-paper) !important;
}

/* ==========================================================================
   9. BADGES — the Rev06 artwork is 3:2, the retired set was 1:1
   ========================================================================== */

img[src*="tru72-goodneighbor-badge"],
img[src*="tru72-missionready-badge"],
img[src*="tru72-trucomfort-badge"] {
  width: auto;
  max-width: min(100%, 260px);
  height: auto;
  object-fit: contain;
}

/* ==========================================================================
   10. MOBILE — NC's behaviour is the target. Oregon keeps its own full-screen
   drawer markup and script; only the surface changes, to the ink drawer.
   ========================================================================== */

.mobile-sticky {
  background: var(--t72-ink);
  border-top: 1px solid var(--t72-gold);
}
.mobile-sticky a, .mobile-sticky .call { color: var(--t72-paper); }
.mobile-sticky .label, .mobile-sticky span { color: var(--t72-linen); }

@media (max-width: 720px) {
  .brand-mark img { height: 56px; max-width: 170px; }

  /* The drawer. Oregon authored it `position: fixed; inset: 0`, but it is also
     a grid item, and a fixed grid child with `justify-self` sizes to its grid
     area rather than the viewport — so it opened as a ~150px column instead of
     a full-screen panel. Measured at 375px: 145px wide, offset 115px from the
     left. Explicit width/height/offsets fix it. */
  .site-header .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    justify-self: stretch;
    align-self: stretch;
    margin: 0;
    background: var(--t72-ink) !important;
    border-top: 2px solid var(--t72-gold);
    overflow-y: auto;
  }
  .main-nav .nav-item { border-bottom: 1px solid rgba(203,192,170,.24) !important; }
  .main-nav .nav-item > .nav-link,
  .main-nav .nav-trigger {
    color: var(--t72-paper) !important;
    font-family: var(--t72-font-mono);
    font-size: 12px !important;
    letter-spacing: .15em;
  }
  .main-nav .nav-caret { color: var(--t72-paper) !important; }
  .main-nav .nav-dropdown { background: rgba(0,0,0,.22) !important; border: none; }
  .main-nav .nav-dropdown a {
    color: var(--t72-linen) !important;
    font-size: 11px !important;
    letter-spacing: .12em;
  }
  .nav-close { color: var(--t72-paper) !important; }

  /* Type does not shrink below the readable floor on a phone. */
  body { font-size: 16px; }
  .btn { font-size: 11px; padding: 15px 22px; }
  .eyebrow { font-size: 10.5px; letter-spacing: .2em; }
  .utility-bar { font-size: 10px; letter-spacing: .14em; }

  /* Wide tables scroll rather than overflow the viewport. */
  .rebate-table, .compare-table, .comparison-table { display: block; overflow-x: auto; }

  /* NOTHING may push the page sideways on a phone.
     Grid and flex children default to min-width:auto, so one long word or one
     wide child drags the whole document out past the viewport. Measured at
     375px on /tru-comfort/ (441px), /oregon-rebates/ and /portland/rebates/
     (401px), /portland/ and /albany/ (383px) and /portland/schedule/ (406px),
     plus their per-city copies. */
  .container > *, .container > * > *,
  [class$="-grid"] > *, [class$="-groups"] > *,
  .footer-bottom > *, .footer-grid > * { min-width: 0; }
  .perks-groups, .programs-grid, .price-grid, .compare-grid,
  .amounts-row, .intent-grid, .enroll-cards, .enroll-grid,
  .plan-grid, .tier-grid { grid-template-columns: 1fr !important; }
  .enroll-card, .enroll-cards > * { max-width: 100%; }
  .footer-legal-nav, .footer-bottom, .footer-brand-nav { flex-wrap: wrap; }
  h1, h2, h3, h4, .sub, .head-line, .eyebrow,
  .e-text, .e-text strong { overflow-wrap: anywhere; }
  .e-row, .e-text { min-width: 0; }
  svg, img, iframe, table, pre { max-width: 100%; }
}

/* ==========================================================================
   11. ACCESSIBILITY
   ========================================================================== */

.skip-link { background: var(--t72-ink); color: var(--t72-paper); }

a:focus-visible, button:focus-visible, summary:focus-visible,
.nav-link:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--t72-ink);
  outline-offset: 2px;
}

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