/* treasurevalleynewconstruction.com · MASTER · restyled 2026-09-28 against the
     MHC template pack (tokens generated from design-tokens.json v1.1.0).
     ONE stylesheet for every page type on the site: homepage, the three
     section pages, the about page, the sectioned article index and the posts.
     Every value resolves through a custom property emitted from
     mhc-wiki/brand/design-tokens.json — there is no hex literal and no
     font-family literal here. Master carries NO gold: eyebrows are navy, the
     accent rule is red. Class names are unchanged from the pre-restyle pages,
     so no markup the answer layer — or mhc-tvnc-blog-update — depends on moved.
     MOTION: one signature move, reveal-on-entry on the homepage's four
     document cards. Nothing moves on the answer layer, forms or the footer;
     posts and the article index carry no motion. The pre-restyle fade-up
     rules started cards at opacity 0 until a script ran; not carried over. */
  body { overflow-x: hidden; }
  img { max-width: 100%; }
  p + p { margin-top: 0; }

  /* ── NAV ─────────────────────────────────── */
  .nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-1) var(--gutter-desktop); background: var(--color-paper); border-bottom: var(--rule-thin); }
  .nav-brand { text-decoration: none; display: block; padding-block: var(--space-1); }
  .nav-brand-name { display: block; font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); }
  .nav-brand-sub { display: block; font-size: var(--size-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-eyebrow); color: var(--text-primary); opacity: 0.8; }
  .nav-links { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .nav-links a { color: var(--color-link); text-decoration: none; font-size: var(--size-small); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
  .nav-links a:hover, .nav-links a.active { color: var(--color-link-hover); }
  .nav-cta { background: var(--cta-bg); color: var(--cta-text) !important; padding: 0 var(--space-3); border-radius: var(--radius-button); text-transform: uppercase; letter-spacing: 0.06em; }
  .nav-cta:hover { filter: brightness(0.92); }

  /* ── PAGE HEADER ─────────────────────────── */
  .hero { background: var(--section-alt-bg); padding: var(--section-pad-desktop) var(--gutter-desktop); }
  .hero-inner { max-width: var(--container-max); margin-inline: auto; }
  .hero .eyebrow, .hero-eyebrow { display: block; font-size: var(--size-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-eyebrow); color: var(--eyebrow-color); margin-bottom: var(--space-2); }
  .hero h1 { font-family: var(--font-heading); font-size: var(--size-h1); line-height: var(--line-h1); font-weight: var(--weight-h1); color: var(--color-heading); margin-bottom: var(--space-2); max-width: 24ch; }
  .home .hero h1 { font-size: var(--size-display); line-height: var(--line-display); font-weight: var(--weight-display); letter-spacing: var(--ls-display); max-width: 20ch; }
  .hero h1 .accent { color: var(--color-red); }
  .hero p.intro { font-size: var(--size-lead); line-height: var(--line-lead); color: var(--text-primary); max-width: var(--content-max); }
  .hero-cta { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); }
  .hero-btn.secondary, .text-link { font-weight: 600; color: var(--color-link); min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; }
  .hero-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; font-size: var(--size-small); line-height: var(--line-small); color: var(--text-primary); margin-top: var(--space-3); }
  .hero-meta a { color: var(--color-link); font-weight: 600; }
  .hero-meta .dot { width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--color-navy); }

  /* ── CREDENTIAL BAR ──────────────────────── */
  .credential-bar { background: var(--footer-bg); color: var(--text-inverse); text-align: center; padding: var(--space-1) var(--gutter-desktop); font-size: var(--size-legal); line-height: var(--line-legal); letter-spacing: 0.04em; }
  .credential-bar span { color: var(--text-inverse); opacity: 0.6; padding: 0 var(--space-1); }

  /* ── SHARED PIECES ───────────────────────── */
  .section-eyebrow, .card-tag, .callout-label, .byline-eyebrow, .feat-tag, .doc-num, .builder-type, .cat-tagline, .location, .stage-when, .tier-label { display: block; font-size: var(--size-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-eyebrow); color: var(--eyebrow-color); margin-bottom: var(--space-1); }
  .lead { font-size: var(--size-lead); line-height: var(--line-lead); color: var(--text-primary); }
  a.card-link { position: absolute; inset: 0; z-index: 1; }
  .link-text, .card-link-text { position: relative; z-index: 2; }
  .read-link, .doc-link { font-size: var(--size-small); font-weight: 600; color: var(--color-link); text-decoration: underline; padding-top: var(--space-2); border-top: var(--rule-thin); }
  .read-link.external::after { content: ' ↗'; }

  /* ── HOMEPAGE ────────────────────────────── */
  .authority { background: var(--footer-bg); color: var(--text-inverse); padding: var(--space-4) var(--gutter-desktop); }
  .authority-inner { max-width: var(--container-max); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); text-align: center; }
  .authority-item .value { font-family: var(--font-heading); font-size: var(--size-h2); line-height: var(--line-h2); font-weight: var(--weight-h2); line-height: 1; color: var(--text-inverse); margin-bottom: var(--space-1); }
  .authority-item .label { font-size: var(--size-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-eyebrow); color: var(--text-inverse); opacity: 0.85; }
  .docs-section, .directory-section, .faq-at-cta, .contact-section { padding: var(--section-pad-desktop) var(--gutter-desktop); }
  .docs-section, .faq-at-cta { background: var(--section-alt-bg); }
  .docs-inner, .directory-inner, .section-inner { max-width: var(--container-max); margin-inline: auto; }
  .docs-section h2, .directory-inner h2 { font-family: var(--font-heading); font-size: var(--size-h2); line-height: var(--line-h2); font-weight: var(--weight-h2); color: var(--color-heading); margin-bottom: var(--space-2); max-width: 28ch; }
  .docs-section .lead, .directory-inner .lead { font-size: var(--size-body); line-height: var(--line-body); max-width: var(--content-max); margin-bottom: var(--space-5); }
  .docs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .doc-card { background: var(--color-paper); border: var(--rule-thin); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: var(--space-4); position: relative; display: flex; flex-direction: column; }
  .doc-card h3 { font-family: var(--font-heading); font-size: var(--size-h3); line-height: var(--line-h3); font-weight: var(--weight-h3); color: var(--color-heading); margin-bottom: var(--space-1); }
  .doc-card p { font-size: var(--size-body); line-height: var(--line-body); margin-bottom: var(--space-3); flex-grow: 1; }
  .featured-article { background: var(--section-alt-bg); border-left: var(--rule-brand); border-radius: var(--radius-card); padding: var(--space-5); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-5); align-items: center; position: relative; }
  .featured-article .feat-content, .featured-article .feat-cta { position: relative; z-index: 2; }
  .feat-content h3 { font-family: var(--font-heading); font-size: var(--size-h3); line-height: var(--line-h3); font-weight: var(--weight-h3); color: var(--color-heading); margin-bottom: var(--space-2); }
  .feat-content p { margin-bottom: 0; }
  .feat-cta { text-align: center; }
  .feat-num { font-family: var(--font-heading); font-size: var(--size-display); line-height: 1; font-weight: var(--weight-display); color: var(--color-heading); margin-bottom: var(--space-1); }
  .feat-num-label { font-size: var(--size-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-eyebrow); color: var(--text-primary); margin-bottom: var(--space-3); }
  .feat-cta a { font-weight: 600; color: var(--color-link); min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; }
  .about-bar { background: var(--footer-bg); color: var(--text-inverse); padding: var(--section-pad-desktop) var(--gutter-desktop); }
  .about-inner { max-width: var(--content-max); margin-inline: auto; border-left: 3px solid var(--pull-quote-rule); padding-left: var(--space-4); }
  .about-mark { display: none; }
  .about-text { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--text-inverse); }
  .about-attribution { margin-top: var(--space-3); font-size: var(--size-small); line-height: var(--line-small); color: var(--text-inverse); opacity: 0.9; }
  .about-attribution .name { font-weight: 600; color: var(--text-inverse); }
  .links-section { padding: var(--space-8) var(--gutter-desktop); }
  .links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-3); }
  .link-card { display: block; text-decoration: none; background: var(--color-paper); border: var(--rule-thin); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: var(--space-3); min-height: 44px; }
  .link-card-label { display: block; font-size: var(--size-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-eyebrow); color: var(--eyebrow-color); margin-bottom: var(--space-1); }
  .link-card-name { display: block; font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); }
  .link-card:hover .link-card-name { color: var(--color-link-hover); }

  /* HESITATION FAQ (answer layer — restyled only, never edited) */
  .faq-at-cta .section-inner { max-width: var(--content-max); }
  .faq-at-cta h2 { font-family: var(--font-heading); font-size: var(--size-h2); line-height: var(--line-h2); font-weight: var(--weight-h2); color: var(--color-heading); margin-bottom: var(--space-3); }
  .faq-more { margin-top: var(--space-3); }

  /* CONTACT (CTA + form + what happens next) */
  .contact-section { background: var(--footer-bg); color: var(--text-inverse); }
  .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; }
  .contact-copy .section-eyebrow { color: var(--text-inverse); }
  .contact-copy h2 { font-family: var(--font-heading); font-size: var(--size-h2); line-height: var(--line-h2); font-weight: var(--weight-h2); color: var(--text-inverse); margin-bottom: var(--space-2); }
  .contact-copy p { color: var(--text-inverse); margin-bottom: var(--space-3); max-width: var(--content-max); }
  .contact-copy a { color: var(--text-inverse); }
  .contact-links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
  .contact-links a, .repeat-refer a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; color: var(--text-inverse); }
  .repeat-refer { font-size: var(--size-small); margin-top: var(--space-3); }
  .form-box { background: var(--color-paper); color: var(--text-primary); border-radius: var(--radius-card); padding: var(--space-4); box-shadow: var(--shadow-lg); }
  .form-title { font-family: var(--font-heading); font-size: var(--size-h3); line-height: var(--line-h3); font-weight: var(--weight-h3); color: var(--color-heading); margin-bottom: var(--space-1); }
  .form-sub { font-size: var(--size-small); margin-bottom: var(--space-3); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .form-group { display: grid; gap: var(--space-1); margin-bottom: var(--space-2); }
  .form-group label { font-size: var(--size-small); font-weight: 600; color: var(--text-primary); }
  .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 44px; padding: var(--space-1); border: 1px solid var(--cta-secondary-border); border-radius: var(--radius-input); background: var(--color-paper); color: var(--text-primary); font-family: var(--font-body); font-size: var(--size-body); }
  .form-group textarea { min-height: 120px; resize: vertical; }
  .form-consent { display: flex; gap: var(--space-1); align-items: flex-start; margin-bottom: var(--space-2); }
  .form-consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--cta-bg); }
  .form-consent label { font-size: var(--size-small); line-height: var(--line-small); font-weight: 400; color: var(--text-primary); }
  .form-submit { width: 100%; min-height: 44px; background: var(--cta-bg); color: var(--cta-text); border: 1px solid var(--cta-bg); padding: var(--space-2); font-size: var(--size-small); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; font-family: var(--font-body); cursor: pointer; border-radius: var(--radius-button); }
  .form-submit:hover { filter: brightness(0.92); }
  .hp-field { position: absolute; left: -9999px; }
  .form-box .whn { border-top: var(--rule-thin); padding-top: var(--space-4); }
  .form-box .whn h2, .next .whn h2 { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); margin-bottom: var(--space-3); }
  .form-box .whn__step p { font-size: var(--size-small); line-height: var(--line-body); }
  .next { padding: var(--section-pad-desktop) var(--gutter-desktop); }
  .next-inner { max-width: var(--content-max); margin-inline: auto; }
  .next-links { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
  .page-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); }

  /* ── SECTION PAGES + ARTICLE INDEX ───────── */
  .content { display: block; max-width: var(--container-max); margin-inline: auto; padding: var(--section-pad-desktop) var(--gutter-desktop); }
  .content > p { max-width: var(--content-max); margin-bottom: var(--space-3); }
  .section-header { margin-top: var(--space-8); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: var(--rule-thin); }
  .section-header:first-of-type { margin-top: 0; }
  .section-header h2 { font-family: var(--font-heading); font-size: var(--size-h2); line-height: var(--line-h2); font-weight: var(--weight-h2); color: var(--color-heading); margin-bottom: var(--space-1); }
  .section-header p { max-width: var(--content-max); }
  .article-grid, .card-grid, .community-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .article-grid { margin-bottom: var(--space-8); }
  .article-card, .resource-card, .community-card { background: var(--color-paper); border: var(--rule-thin); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: var(--space-4); position: relative; display: flex; flex-direction: column; }
  .article-card.featured { grid-column: span 2; background: var(--section-alt-bg); border-left: var(--rule-brand); }
  .resource-card.featured { background: var(--section-alt-bg); border-left: var(--rule-brand); }
  .content > .resource-card { border-left: var(--rule-brand); margin-block: var(--space-4); display: block; }
  .article-card h3, .resource-card h3, .community-card h3 { font-family: var(--font-heading); font-size: var(--size-h3); line-height: var(--line-h3); font-weight: var(--weight-h3); color: var(--color-heading); margin-bottom: var(--space-2); }
  .article-card p.dek, .resource-card p, .community-card p { font-size: var(--size-body); line-height: var(--line-body); margin-bottom: var(--space-3); flex-grow: 1; }
  .resource-card a:not(.card-link) { font-size: var(--size-small); font-weight: 600; color: var(--color-link); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; position: relative; z-index: 2; }
  .card-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding-top: var(--space-2); border-top: var(--rule-thin); font-size: var(--size-small); color: var(--text-primary); }
  .card-meta .read-link { padding-top: 0; border-top: 0; }
  .coming-soon, .callout { background: var(--section-alt-bg); border-left: 3px solid var(--cta-secondary-border); border-radius: var(--radius-card); padding: var(--space-3); margin-block: var(--space-4); }
  .coming-soon h4 { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); margin-bottom: var(--space-1); }
  .coming-soon p, .callout p { margin-bottom: 0; }
  .callout p + p { margin-top: var(--space-2); }

  /* ── TABLES ──────────────────────────────── */
  .price-table, .comparison-table, .coverage-table { width: 100%; border-collapse: collapse; margin-block: var(--space-4); font-size: var(--size-small); line-height: var(--line-body); }
  .price-table th, .comparison-table th, .coverage-table th { background: var(--color-navy); color: var(--text-inverse); padding: var(--space-2); text-align: left; font-size: var(--size-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-eyebrow); }
  .price-table td, .comparison-table td, .coverage-table td { padding: var(--space-2); border-bottom: var(--rule-thin); vertical-align: top; color: var(--text-primary); }
  .price-table tr:nth-child(even) td, .coverage-table tr:nth-child(even) td { background: var(--section-alt-bg); }
  .price-table td:first-child, .comparison-table td:first-child { font-weight: 600; color: var(--color-heading); }
  .comparison-table td:first-child { background: var(--section-alt-bg); width: 30%; }

  /* ── POSTS + ABOUT ───────────────────────── */
  .article { display: block; max-width: var(--content-max); margin-inline: auto; padding: var(--section-pad-desktop) var(--gutter-desktop); }
  .article p { margin-bottom: var(--space-2); }
  .article p.lead { margin-bottom: var(--space-4); }
  .article h2 { font-family: var(--font-heading); font-size: var(--size-h2); line-height: var(--line-h2); font-weight: var(--weight-h2); color: var(--color-heading); border-top: var(--rule-thin); padding-top: var(--space-4); margin-top: var(--space-6); margin-bottom: var(--space-2); }
  .article h3 { font-family: var(--font-heading); font-size: var(--size-h3); line-height: var(--line-h3); font-weight: var(--weight-h3); color: var(--color-heading); margin-top: var(--space-4); margin-bottom: var(--space-1); }
  .article h4 { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); margin-top: var(--space-3); margin-bottom: var(--space-1); }
  .article ul, .article ol { padding-left: var(--space-3); margin-bottom: var(--space-3); }
  .article li { margin-bottom: var(--space-1); }
  .article strong { font-weight: 600; color: var(--color-heading); }
  .article a { color: var(--color-link); }
  /* QUICK ANSWER — answer layer. Restyled only; never edited. No motion. */
  .quick-answer { margin-block: 0 var(--space-4); }
  .quick-answer .qa-label { display: block; font-size: var(--size-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-eyebrow); color: var(--accent-text-color); margin-bottom: var(--space-1); }
  .quick-answer p { margin-bottom: 0; }
  .pullquote { border-left: 3px solid var(--pull-quote-rule); padding-left: var(--space-3); margin-block: var(--space-5); }
  .pullquote p { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); margin-bottom: 0; }
  .source-note { font-size: var(--size-small); line-height: var(--line-small); margin-bottom: var(--space-4); }
  .checklist { background: var(--color-paper); border: var(--rule-thin); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: var(--space-4); margin-block: var(--space-4); }
  .checklist h3 { margin-top: 0; }
  .checklist ul { list-style: none; padding-left: 0; margin-bottom: 0; }
  .checklist li { padding-left: var(--space-4); position: relative; }
  .checklist li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent-text-color); font-weight: 700; }
  .warranty-tiers, .stage-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-block: var(--space-5); }
  .tier, .stage { background: var(--color-paper); border: var(--rule-thin); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); border-top: 4px solid var(--color-navy); padding: var(--space-3); }
  .tier { text-align: center; }
  .tier.t2, .stage.s2 { border-top-color: var(--color-navy-deep); }
  .tier.t3, .stage.s3 { border-top-color: var(--color-red); }
  .tier .tier-num { font-family: var(--font-heading); font-size: var(--size-h1); line-height: 1; font-weight: var(--weight-h1); color: var(--color-heading); margin-bottom: var(--space-1); }
  .tier h4, .stage h4 { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); margin: 0 0 var(--space-1); }
  .tier p, .stage p { font-size: var(--size-small); line-height: var(--line-body); margin-bottom: 0; }
  .builder-grid { display: grid; gap: var(--space-2); margin-block: var(--space-4); }
  .builder-card { background: var(--color-paper); border: var(--rule-thin); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: var(--space-3); }
  .builder-card h3 { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); margin: 0 0 var(--space-1); }
  .builder-card p { margin-bottom: 0; }
  .timeline { margin-block: var(--space-5); }
  .timeline-row { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: var(--rule-thin); }
  .timeline-row:last-child { border-bottom: 0; }
  .timeline-week { font-size: var(--size-small); font-weight: 600; color: var(--eyebrow-color); text-align: right; }
  .timeline-phase h4 { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); margin: 0 0 var(--space-1); }
  .timeline-phase p { margin-bottom: 0; }
  .category-bars { margin-block: var(--space-4); }
  .cat-bar { margin-bottom: var(--space-3); }
  .cat-bar-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1); }
  .cat-bar-label .name { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); }
  .cat-bar-label .range, .cat-bar-scale { font-size: var(--size-small); color: var(--text-primary); }
  .cat-bar-track { height: 14px; background: var(--section-alt-bg); position: relative; border-radius: var(--radius-sm); overflow: hidden; }
  .cat-bar-fill { position: absolute; height: 100%; }
  .cat-bar-fill.prod { left: 30%; width: 12%; background: var(--color-navy); }
  .cat-bar-fill.semi { left: 38%; width: 20%; background: var(--color-navy-deep); }
  .cat-bar-fill.cust { left: 56%; width: 32%; background: var(--color-red); }
  .cat-bar-scale { display: flex; justify-content: space-between; margin-top: var(--space-1); }
  .price-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--rule-thin); align-items: baseline; }
  .price-row:last-child { border-bottom: 0; }
  .price-row:nth-child(odd) { background: var(--section-alt-bg); }
  .price-label { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); }
  .price-sub { display: block; font-family: var(--font-body); font-size: var(--size-small); font-weight: 400; color: var(--text-primary); }
  .price-value { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--text-primary); white-space: nowrap; }
  .category-card { background: var(--color-paper); border: var(--rule-thin); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); border-left: 4px solid var(--color-navy); padding: var(--space-4); margin-block: var(--space-4); }
  .category-card.semi { border-left-color: var(--color-navy-deep); }
  .category-card.custom { border-left-color: var(--color-red); }
  .category-card h3 { margin-top: 0; }
  .cat-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-block: var(--space-3); padding-block: var(--space-3); border-top: var(--rule-thin); border-bottom: var(--rule-thin); }
  .cat-stat { text-align: center; }
  .cat-stat .label, .cred-item .label, .contact-label { font-size: var(--size-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-eyebrow); color: var(--text-primary); opacity: 0.85; margin-bottom: var(--space-1); }
  .cat-stat .value, .cred-item .value { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); }
  .credentials-grid { background: var(--section-alt-bg); border-radius: var(--radius-card); padding: var(--space-4); margin-block: var(--space-4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); }
  .contact-card { background: var(--color-paper); border: var(--rule-thin); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: var(--space-4); margin-block: var(--space-4); }
  .contact-card h3 { margin-top: 0; }
  .contact-card .contact-row { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: var(--rule-thin); }
  .contact-card .contact-row:last-child { border-bottom: 0; }
  .contact-label { min-width: 6rem; }
  .contact-value a { color: var(--color-link); overflow-wrap: anywhere; }
  .faq-block { background: var(--section-alt-bg); padding: var(--section-pad-desktop) 0; }
  .faq-inner { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter-desktop); }
  .faq-inner h2 { font-family: var(--font-heading); font-size: var(--size-h2); line-height: var(--line-h2); font-weight: var(--weight-h2); color: var(--color-heading); margin-bottom: var(--space-4); }
  .faq-block .faq-item { margin-bottom: var(--space-4); }
  .faq-block .faq-item h3 { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); margin-bottom: var(--space-1); }
  .legal-disclaimer { max-width: var(--content-max); margin-inline: auto; padding: var(--space-3) var(--gutter-desktop); font-size: var(--size-small); line-height: var(--line-body); border-top: var(--rule-thin); border-bottom: var(--rule-thin); }
  .author-byline { max-width: var(--content-max); margin-inline: auto; padding: var(--space-6) var(--gutter-desktop) var(--space-4); }
  .author-byline h3 { font-family: var(--font-heading); font-size: var(--size-h3); line-height: var(--line-h3); font-weight: var(--weight-h3); color: var(--color-heading); margin-bottom: var(--space-1); }
  .author-byline h3 a { color: inherit; }
  .author-byline p { margin-bottom: 0; }

  /* ── CTA BAND ────────────────────────────── */
  .cta, .cta-section { background: var(--footer-bg); color: var(--text-inverse); padding: var(--section-pad-desktop) var(--gutter-desktop); text-align: center; }
  .cta-inner { max-width: var(--content-max); margin-inline: auto; }
  .cta .eyebrow, .cta .section-eyebrow { display: block; font-size: var(--size-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-eyebrow); color: var(--text-inverse); margin-bottom: var(--space-1); }
  .cta h2, .cta-section h2 { font-family: var(--font-heading); font-size: var(--size-h2); line-height: var(--line-h2); font-weight: var(--weight-h2); color: var(--text-inverse); margin-bottom: var(--space-2); }
  .cta p, .cta-section p { color: var(--text-inverse); opacity: 0.92; margin: 0 auto var(--space-3); }
  .cta a, .cta-section a { color: var(--text-inverse); }
  .cta-links { display: flex; gap: var(--space-3); justify-content: center; align-items: center; flex-wrap: wrap; }
  .cta-btn { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; text-decoration: underline; }
  .cta .cta-primary, .cta-section .cta-primary { color: var(--cta-text); text-decoration: none; }

  /* ── FOOTER ──────────────────────────────── */
  /* Inner classes carried verbatim from the perfectmilitaryconnection.com
     index.html (itself carried from PHBP / the PFHC Master pilot): the pack's
     footer component styles its inner classes inline per page rather than in
     the token bundle (PHSP finding, 2026-09-18). Template-pack backport item.
     No motion selector targets the footer. */
  footer { background: var(--footer-bg); color: var(--text-inverse); padding: var(--space-6) var(--gutter-desktop); }
  footer a { color: var(--text-inverse); }
  .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-4); max-width: var(--container-max); margin-inline: auto; }
  .footer-brand-name { font-family: var(--font-heading); font-size: var(--size-h3); line-height: var(--line-h3); font-weight: var(--weight-h3); color: var(--text-inverse); margin-bottom: var(--space-1); }
  .footer-tagline { font-size: var(--size-small); color: var(--text-inverse); opacity: 0.9; margin-bottom: var(--space-2); }
  .footer-broker { font-size: var(--size-small); color: var(--text-inverse); opacity: 0.9; line-height: var(--line-body); }
  .footer-col-title { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); color: var(--text-inverse); margin-bottom: var(--space-1); }
  .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
  .footer-links a { text-decoration: none; font-size: var(--size-small); min-height: 44px; display: inline-flex; align-items: center; }
  .footer-links a:hover { text-decoration: underline; }
  .footer-bottom { border-top: var(--rule-thin); margin-top: var(--space-4); padding-top: var(--space-3); max-width: var(--container-max); margin-inline: auto; }
  .footer-legal { font-size: var(--size-legal); line-height: var(--line-legal); color: var(--text-inverse); opacity: 0.85; }
  .footer-disclaimer { font-size: var(--size-legal); line-height: var(--line-legal); color: var(--text-inverse); opacity: 0.85; margin-top: var(--space-2); }

  @media (max-width: 900px) {
    .nav { padding: var(--space-1) var(--gutter-mobile); }
    /* One ask visible without scrolling on every device: on narrow screens the
       sticky nav keeps only its CTA. */
    .nav-links a:not(.nav-cta) { display: none; }
    .credential-bar, .faq-inner, .legal-disclaimer { padding-inline: var(--gutter-mobile); }
    .hero, .docs-section, .directory-section, .faq-at-cta, .contact-section, .about-bar, .cta, .cta-section, .next { padding: var(--section-pad-mobile) var(--gutter-mobile); }
    .authority { padding-inline: var(--gutter-mobile); }
    .links-section { padding: var(--space-6) var(--gutter-mobile); }
    .content, .article { padding: var(--section-pad-mobile) var(--gutter-mobile); }
    .author-byline { padding-inline: var(--gutter-mobile); }
    .authority-inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .docs-grid, .article-grid, .card-grid, .community-grid, .featured-article, .contact-grid, .form-row, .warranty-tiers, .stage-cards, .cat-stats, .credentials-grid { grid-template-columns: minmax(0, 1fr); }
    .article-card.featured { grid-column: span 1; }
    .featured-article { padding: var(--space-3); gap: var(--space-3); }
    .feat-cta { text-align: left; }
    .timeline-row, .price-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
    .timeline-week { text-align: left; }
    .footer-top { grid-template-columns: minmax(0, 1fr); }
    footer { padding: var(--space-6) var(--gutter-mobile); }
    .price-table, .comparison-table, .coverage-table { display: block; overflow-x: auto; }
  }

/* ── AUTHOR PAGE (about/jerod-lee.html) — scoped to body.page-author ── */
  /* Author page · treasurevalleynewconstruction.com · MASTER · restyled 2026-09-28.
     Tokens only — no hex or font-family literal outside :root.
     ANSWER LAYER: the Person JSON-LD, the Quick Answer block, the heading
     hierarchy and the canonical are untouched; class names are unchanged
     from the pre-restyle page. No motion. */
  .page-author body { overflow-x: hidden; }
  .page-author img { max-width: 100%; }
  .page-author p + p { margin-top: 0; }

  /* ── NAV ─────────────────────────────────── */
  .page-author .nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); flex-wrap: wrap;
    padding: var(--space-1) var(--gutter-desktop);
    background: var(--color-paper); border-bottom: var(--rule-thin);
  }
  .page-author .nav-brand { text-decoration: none; display: block; padding-block: var(--space-1); }
  .page-author .nav-brand-name { display: block; font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); color: var(--color-heading); }
  .page-author .nav-brand-sub { display: block; font-size: var(--size-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-eyebrow); color: var(--text-primary); opacity: 0.8; }
  .page-author .nav-links { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .page-author .nav-links a { color: var(--color-link); text-decoration: none; font-size: var(--size-small); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
  .page-author .nav-links a:hover { color: var(--color-link-hover); }
  .page-author .nav-links a.active { color: var(--color-link-hover); }
  .page-author .nav-cta { background: var(--cta-bg); color: var(--cta-text) !important; padding: 0 var(--space-3); border-radius: var(--radius-button); text-transform: uppercase; letter-spacing: 0.06em; }
  .page-author .nav-cta:hover { filter: brightness(0.92); }

  /* ── CREDENTIAL BAR ──────────────────────── */
  .page-author .credential-bar { background: var(--footer-bg); color: var(--text-inverse); text-align: center; padding: var(--space-1) var(--gutter-desktop); font-size: var(--size-legal); line-height: var(--line-legal); letter-spacing: 0.04em; }
  .page-author .credential-bar span { color: var(--text-inverse); opacity: 0.6; padding: 0 var(--space-1); }

  /* ── AUTHOR HEADER ───────────────────────── */
  .page-author .hero { background: var(--section-alt-bg); padding: var(--section-pad-desktop) var(--gutter-desktop); }
  .page-author .hero-inner { max-width: var(--container-max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .page-author .author-photo img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; object-position: center top; display: block; border-radius: var(--radius-card); }
  .page-author .author-tag { font-size: var(--size-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-eyebrow); color: var(--eyebrow-color); margin-bottom: var(--space-2); }
  .page-author .author-name { font-family: var(--font-heading); font-size: var(--size-h1); line-height: var(--line-h1); font-weight: var(--weight-h1); color: var(--color-heading); margin-bottom: var(--space-1); }
  .page-author .author-title { font-size: var(--size-lead); line-height: var(--line-lead); color: var(--text-primary); margin-bottom: var(--space-3); }
  .page-author .cred-row { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
  .page-author .cred-pill { background: var(--color-paper); border: var(--rule-thin); border-radius: var(--radius-badge); color: var(--text-primary); font-size: var(--size-small); line-height: var(--line-small); padding: var(--space-1) var(--space-2); }
  .page-author .contact-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
  .page-author .contact-item { font-size: var(--size-body); }
  .page-author .contact-item a { color: var(--color-link); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }

  /* ── MAIN ────────────────────────────────── */
  .page-author .main { max-width: var(--container-max); margin-inline: auto; padding: var(--section-pad-desktop) var(--gutter-desktop); }
  /* QUICK ANSWER — answer layer. Restyled only; markup untouched. The label
     is generated in CSS on this page, as it was before the restyle. */
  .page-author .quick-answer { margin-block: 0 var(--space-5); }
  .page-author .quick-answer::before { content: 'About Jerod Lee'; display: block; font-size: var(--size-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-eyebrow); color: var(--accent-text-color); margin-bottom: var(--space-1); }
  .page-author .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
  .page-author .section-card, .page-author .full-section { background: var(--color-paper); border: var(--rule-thin); border-radius: var(--radius-card); padding: var(--space-4); box-shadow: var(--shadow-sm); }
  .page-author .full-section { margin-bottom: var(--space-4); }
  .page-author .section-card h2, .page-author .full-section h2 { font-family: var(--font-heading); font-size: var(--size-h3); line-height: var(--line-h3); font-weight: var(--weight-h3); color: var(--color-heading); border-bottom: var(--rule-brand); padding-bottom: var(--space-1); margin-bottom: var(--space-2); }
  .page-author .section-card ul { list-style: disc; padding-left: var(--space-3); display: grid; gap: var(--space-1); }
  .page-author .section-card li, .page-author .section-card p, .page-author .full-section p { font-size: var(--size-body); line-height: var(--line-body); color: var(--text-primary); }
  .page-author .section-card a { color: var(--color-link); }
  .page-author .full-section p { max-width: var(--content-max); }
  .page-author .training-box { background: var(--footer-bg); color: var(--text-inverse); border-radius: var(--radius-card); padding: var(--space-4); margin-bottom: var(--space-4); }
  .page-author .training-box h2 { font-family: var(--font-heading); font-size: var(--size-h3); line-height: var(--line-h3); font-weight: var(--weight-h3); color: var(--text-inverse); margin-bottom: var(--space-2); }
  .page-author .training-box p { color: var(--text-inverse); margin-bottom: var(--space-2); max-width: var(--content-max); }

  /* ── CTA ─────────────────────────────────── */
  .page-author .cta-box { background: var(--section-alt-bg); padding: var(--section-pad-desktop) var(--gutter-desktop); text-align: center; }
  .page-author .cta-box h2 { font-family: var(--font-heading); font-size: var(--size-h2); line-height: var(--line-h2); font-weight: var(--weight-h2); color: var(--color-heading); margin-bottom: var(--space-2); }
  .page-author .cta-box p { margin: 0 auto var(--space-3); max-width: var(--content-max); }
  .page-author .cta-box .cta-btn { text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }

  /* ── FOOTER ──────────────────────────────── */
  /* Inner classes carried verbatim from the perfectmilitaryconnection.com
     index.html (itself carried from PHBP / the PFHC Master pilot): the pack's
     footer component styles its inner classes inline per page rather than in
     the token bundle (PHSP finding, 2026-09-18). Template-pack backport item.
     No motion selector targets the footer. */
  .page-author footer { background: var(--footer-bg); color: var(--text-inverse); padding: var(--space-6) var(--gutter-desktop); }
  .page-author footer a { color: var(--text-inverse); }
  .page-author .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-4); max-width: var(--container-max); margin-inline: auto; }
  .page-author .footer-brand-name { font-family: var(--font-heading); font-size: var(--size-h3); line-height: var(--line-h3); font-weight: var(--weight-h3); color: var(--text-inverse); margin-bottom: var(--space-1); }
  .page-author .footer-tagline { font-size: var(--size-small); color: var(--text-inverse); opacity: 0.9; margin-bottom: var(--space-2); }
  .page-author .footer-broker { font-size: var(--size-small); color: var(--text-inverse); opacity: 0.9; line-height: var(--line-body); }
  .page-author .footer-col-title { font-family: var(--font-heading); font-size: var(--size-h4); line-height: var(--line-h4); color: var(--text-inverse); margin-bottom: var(--space-1); }
  .page-author .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
  .page-author .footer-links a { text-decoration: none; font-size: var(--size-small); min-height: 44px; display: inline-flex; align-items: center; }
  .page-author .footer-links a:hover { text-decoration: underline; }
  .page-author .footer-bottom { border-top: var(--rule-thin); margin-top: var(--space-4); padding-top: var(--space-3); max-width: var(--container-max); margin-inline: auto; }
  .page-author .footer-legal { font-size: var(--size-legal); line-height: var(--line-legal); color: var(--text-inverse); opacity: 0.85; }
  .page-author .footer-disclaimer { font-size: var(--size-legal); line-height: var(--line-legal); color: var(--text-inverse); opacity: 0.85; margin-top: var(--space-2); }

  @media (max-width: 900px) {
    .page-author .nav { padding: var(--space-1) var(--gutter-mobile); }
    /* One ask visible without scrolling on every device: on narrow screens the
       sticky nav keeps only its CTA. */
    .page-author .nav-links a:not(.nav-cta) { display: none; }
    .page-author .credential-bar { padding-inline: var(--gutter-mobile); }
    .page-author .footer-top { grid-template-columns: minmax(0, 1fr); }
    .page-author footer { padding: var(--space-6) var(--gutter-mobile); }
    .page-author .hero, .page-author .cta-box { padding: var(--section-pad-mobile) var(--gutter-mobile); }
    .page-author .main { padding: var(--section-pad-mobile) var(--gutter-mobile); }
    .page-author .hero-inner, .page-author .two-col { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .page-author .author-photo { max-width: 260px; }
  }