/* Type pass, 2026-09-15. Xeno: the type reads thin and fine, hard to read on the
   photos. Display moves from Anton (tall, condensed) to Poppins 800, the same
   family as the wordmark on the shirt logo. Body goes up a size and a weight.
   Small uppercase labels get bigger and lose most of their tracking. Loaded
   after each page's inline styles, so equal specificity wins here. */

:root {
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-condensed: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
}
html { font-size: 106.25%; }
body { font-weight: 500; line-height: 1.65; }
strong, b { font-weight: 700; }

/* Headlines */
h1, h2, h3, h4,
.hero h1, .page-hero h1, .article-hero h1, .blog-hero h1, .section-title, .cta-band h2,
.article h2, .article-wrap h2, .article h3, .article-wrap h3, .faq-question button,
.offer-card h3, .clock-card h3, .community-card h3, .offer-headline, .newsletter h3,
.footer-col h3, .footer h3, .area-body h3, .related-card h3, .index-card h3, .process-step h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-transform: none;
}
h1 em, h2 em, h3 em, .section-title em, .cta-band h2 em, .hero h1 em, .page-hero h1 em,
.article-hero h1 em, .blog-hero h1 em, .article h2 em, .article-wrap h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.hero h1 { font-size: clamp(2.2rem, 3.6vw, 3.1rem); line-height: 1.08; color: #fff; }
.page-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.06; }
.article-hero h1, .blog-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.06; }
.page-hero--photo h1 { color: #fff; }
.section-title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.1; }
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; }
.article h2, .article-wrap h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); line-height: 1.15; }
.article h3, .article-wrap h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: 0; }
.faq-question button { font-size: 1.1rem; line-height: 1.35; letter-spacing: 0; }

/* Lead lines under every hero headline: bigger and heavier */
.hero p.lead, .page-hero .deck, .page-hero .lead, .article-hero .deck, .article-hero p.deck, .blog-hero p, .blog-hero-wrap p {
  opacity: 1;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.55;
}
/* Text sitting on a photograph: white, full opacity, a hair of shadow.
   The About, blog index, materials, and catalog heroes are light, so this is scoped. */
.hero p.lead, .page-hero--photo .deck, .page-hero--photo .lead, .article-hero .deck, .article-hero p.deck {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.hero::before {
  background: linear-gradient(96deg,
    rgba(12,12,12,0.90) 0%,
    rgba(14,14,14,0.76) 34%,
    rgba(19,19,19,0.52) 52%,
    rgba(19,19,19,0.18) 74%,
    rgba(19,19,19,0.00) 100%);
}
.section-intro p { opacity: 0.92; font-size: 1.08rem; }
.article p, .article-wrap p, .article li, .article-wrap li, .short-answer p, .cost-context p, .tip-callout p, .faq-answer p {
  font-size: 1.05rem;
  line-height: 1.7;
}
.article p strong, .article-wrap p strong { font-weight: 700; }

/* Small uppercase labels: bigger, heavier, less tracking */
.nav-links a, .btn-primary, .btn-outline, .nav-cta, .section-label, .page-eyebrow, .article-eyebrow,
.blog-eyebrow, .hero-kicker, .index-tag, .cost-label, .sa-label, .tip-label, .offer-label, .offer-eyebrow,
.clock-label, .rebate-label, .bio-label, .area-tag, .post-date, .post-cat, .breadcrumb, .strip-item span,
.strip-item a, .map-detail-label, .footer-col h3, .footer h3, .hero-feature figcaption, .photo-single figcaption,
.photo-grid figcaption, .proof-caption, .bar-line-2, .gr-cr, .gr-when, .read-more {
  font-weight: 700;
  letter-spacing: 0.08em;
}
.nav-links a { font-size: 0.92rem; letter-spacing: 0.1em; }
.nav-phone { font-size: 1rem; font-weight: 700; }
.nav-cta { font-size: 0.86rem; letter-spacing: 0.1em; font-weight: 700; }
.btn-primary, .btn-outline { font-size: 0.92rem; letter-spacing: 0.1em; font-weight: 700; }
.section-label, .page-eyebrow, .article-eyebrow, .blog-eyebrow, .index-tag { font-size: 0.9rem; letter-spacing: 0.16em; }
.hero-kicker { font-size: 0.9rem; letter-spacing: 0.12em; }
.breadcrumb { font-size: 0.84rem; letter-spacing: 0.08em; opacity: 0.9; }
.cost-label, .sa-label, .tip-label, .offer-label, .offer-eyebrow, .clock-label, .rebate-label, .bio-label, .area-tag { font-size: 0.86rem; letter-spacing: 0.14em; }
.post-date, .post-cat { font-size: 0.84rem; letter-spacing: 0.08em; }
.strip-item span, .strip-item a { font-size: 0.92rem; letter-spacing: 0.08em; }
.footer-col h3, .footer h3 { font-size: 0.92rem; letter-spacing: 0.14em; font-weight: 800; }
.hero-feature figcaption, .photo-single figcaption, .photo-grid figcaption, .proof-caption { font-size: 0.82rem; letter-spacing: 0.08em; }
.map-detail-value, .fin-example-amount, .stat-value, .gr-score { font-family: var(--font-display); font-weight: 800; }

/* Official logo in the header and footer, the same art as the favicon and the shirts.
   The link is a flex item and the global img rule caps width at 100%, so without
   flex: none the wordmark squashes on a phone. */
.nav-logo { gap: 0; flex: 0 0 auto; min-width: 0; }
.nav-logo-img { height: 54px; width: auto; max-width: none; display: block; }
.footer-logo-img { height: 64px; width: auto; display: block; margin-bottom: 1rem; }
.nav-cta, .nav-phone { white-space: nowrap; }
.hero-eyebrow { font-weight: 700; letter-spacing: 0.14em; font-size: 0.9rem; }
@media (max-width: 1200px) {
  .nav-logo-img { height: 46px; }
  .nav-links { gap: 0.9rem; }
  .nav-links a { font-size: 0.8rem; letter-spacing: 0.04em; }
  .nav-phone { font-size: 0.92rem; }
  .nav-cta { font-size: 0.78rem; letter-spacing: 0.06em; padding: 0.65rem 1.2rem; }
}
@media (max-width: 768px) {
  .nav-logo-img { height: 44px; }
  .nav-phone { font-size: 0.9rem; letter-spacing: 0.02em; }
  .nav-cta { font-size: 0.74rem; letter-spacing: 0.06em; padding: 0.6rem 0.9rem; }
}
@media (max-width: 560px) {
  .nav-phone { display: none; }
  .nav-logo-img { height: 40px; }
  .nav-cta { font-size: 0.76rem; padding: 0.65rem 1rem; }
}

/* Guide intro line, 2026-09-18. The dark-theme rule colors it var(--cream), and after the
   cream flip --cream (and --muted) resolve to light values, so the line was white on cream,
   invisible on all 12 guides. The photo-hero rule above (".article-hero p.deck", white) also
   caught it, so this matches its specificity and wins by coming later. Scoped to the guide header. */
.article-hero-wrap p.deck, .article-hero-wrap .deck { color: #4A4640; opacity: 1; text-shadow: none; }

/* job photos placed by Slim Site.py */
.job-photo{margin:1.8rem 0}.job-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* ── BRIGHT PASS, 2026-09-24 ────────────────────────────────────────────────────
   Xeno: the cream and tan read dirty and every band was a different shade. One clean
   white page, uniform section to section. This file loads after each page's own
   styles, so the tokens here win, and the section rules carry "html body" so they
   also beat the late style blocks on materials, portfolio, and the plant finder.
   Small controls (chips, inputs, table stripes, photo placeholders) get a cool light
   gray instead of tan so they still read as controls on white. The red CTA bands and
   the dark footer stay: they're accents, not the page. */
:root {
  --black: #FFFFFF;        /* page background (legacy name from the dark build) */
  --paper: #FFFFFF;
  --charcoal: #FFFFFF;     /* cards */
  --paper-2: #FFFFFF;
  --black-soft: #F3F4F6;   /* small fills only now, never a section */
  --paper-3: #F3F4F6;
  --charcoal-2: #F7F8FA;   /* card hover */
}
html body { background-color: #FFFFFF; background-image: none; }
html body .texture { display: none; }   /* the noise grain overlay was the "dirty" look */
html body .page-hero:not(.page-hero--photo), html body .article-hero, html body .blog-hero,
html body .services, html body .services-bg, html body .financing, html body .faq,
html body .blog-band, html body .ps-read, html body .block, html body .block.alt,
html body .filterbar, html body #suppliers, html body #finder, html body .post-index,
html body .map-section, html body .fine-print, html body .areas, html body #new-build,
html body .family-band, html body .community-band, html body nav.primary, html body .pf-bar {
  background-color: #FFFFFF;
  background-image: none;
}
/* the nav's scrolled state carried its own cream tint and outranks the rule above */
html body nav.primary.scrolled { background-color: rgba(255,255,255,0.97); background-image: none; }
/* bands no longer change color, so a hairline marks where the sticky bars end */
html body nav.primary, html body .pf-bar, html body .filterbar { border-bottom: 1px solid rgba(19,19,19,0.08); }

/* ── NO WORDS ON OR UNDER PHOTOS, 2026-09-25 ─────────────────────────────────────
   Xeno: all descriptions and words off the pictures, and from underneath them too.
   One rule here instead of editing 16 pages and three generators, so a rebuild of
   the portfolio, materials, or plant finder can't bring captions back. Alt text stays
   in the HTML for screen readers and search. Product names, specs, and the photo
   credits the image licenses require live in the catalog cards, not in captions,
   so they are untouched. */
html body figcaption, html body .gallery-caption, html body .material-name,
html body .ps-open, html body .design-sheet-cap, html body .pf-frame p { display: none !important; }
html body .gallery-item::after, html body .material-tile::after { display: none !important; }

/* Form fields had no visible keyboard focus. The estimate form moved up the home page on
   Sep 25 2026, into the gate's Tab walk, which caught it. */
html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible { outline: 3px solid #C5091C !important; outline-offset: 2px; }

/* ── NO DASHES, DIVIDERS, OR DOTS, 2026-09-25 ─────────────────────────────────────
   Xeno: the little red dashes over the four points, the lines in front of every small
   label, and the vertical dividers read as AI built. Labels and points now stand on
   type and spacing alone. The dots inside labels are rewritten by Title Pass.py. */
html body .section-label::before, html body .article-eyebrow::before, html body .page-eyebrow::before,
html body .legal-label::before, html body .blog-eyebrow::before, html body .hero-eyebrow::before,
html body .cred-item::before, html body .fin-partner::before { display: none !important; }
html body .cred-item + .cred-item { border-left: 0 !important; }
html body .cred-bar { gap: 1.6rem; }