/* ==========================================================================
   Virginia Renovations — brand-site-fixes.css  (2026-11-07)
   Load AFTER brand-tokens.css. brand-tokens.css is the shared brand file
   (Drive 1BJziFm78TQXXfXTrKrGrSRFV4owsCvcc) and is used unchanged; this file
   holds website-only fixes found by the rendered-pixel contrast check.
   Rollback: remove the <link> to this file.
   ========================================================================== */
:root { --on-brass: #2a3324; }   /* approved text colour on Light Brass (6.8:1) */

/* 1. Inner-page photo heroes keep a light headline (brand-tokens sets every
      .hero h1 to Moss Slate, which is meant for the cream home hero only). */
.hero--page h1 { color: var(--on-dark); }

/* 2. Inner-page hero scrim: the site's near-black wash is too thin over bright
      daylight photos (headline measured 2.0-2.9:1, sub 1.4-2.8:1). Deep Moss
      Slate wash, strongest behind the text column (bottom-left). */
.hero--page .hero__scrim {
  background:
    linear-gradient(95deg, rgba(42, 51, 36, 0.9) 0%, rgba(42, 51, 36, 0.86) 52%, rgba(42, 51, 36, 0.6) 72%, rgba(42, 51, 36, 0.22) 100%),
    linear-gradient(180deg, rgba(42, 51, 36, 0.1) 0%, rgba(42, 51, 36, 0.35) 100%);
}
@media (max-width: 760px) {   /* text spans the full width on phones */
  .hero--page .hero__scrim { background: linear-gradient(180deg, rgba(42, 51, 36, 0.86) 0%, rgba(42, 51, 36, 0.9) 100%); }
}

/* 3. CTA band: slightly deeper centre so the small Light Brass eyebrow
      clears 4.5:1; links in the band use Light Brass, not Gold Deep. */
.cta-band::after {
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(42, 51, 36, 0.93) 0%, rgba(42, 51, 36, 0.86) 55%, rgba(42, 51, 36, 0.66) 100%),
    linear-gradient(180deg, rgba(42, 51, 36, 0.36) 0%, rgba(42, 51, 36, 0.12) 30%, rgba(42, 51, 36, 0.12) 70%, rgba(42, 51, 36, 0.36) 100%);
}
.cta-band .tlink { color: var(--brass); }

/* 4. Text on Light Brass uses #2a3324. */
.cta-band .btn--primary, .hero--page .btn--primary,
.cta-band .btn--primary:hover, .hero--page .btn--primary:hover,
.skip-link, .badge-note, .progress li[data-done="true"] .dot { color: var(--on-brass); }

/* 5. Olive is for light backgrounds only: on dark heroes and bands, hovers and
      focus rings use Light Brass. */
.hero--page .tlink:hover, .hero--page .crumbs a:hover, .cta-band .tlink:hover { color: var(--brass-lt); }
.hero--page :focus-visible, .cta-band :focus-visible { outline-color: var(--brass); }

/* 6. Form focus ring tinted to Moss Slate (the site's was a Forest tint). */
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(62, 74, 55, 0.14); }