/*
 * One body-copy standard across the site (Fact Sheet §6 Type: "Body font matched in style and size across all pages").
 * The home page is the reference: Inter Light, 17px on desktop, never under 16px (readable for older visitors).
 * Display text (heroes, ledes, pull quotes, captions, small notes) keeps its own style; running paragraphs and lists use this.
 */
:root { --elh-body-size: clamp(16px, 1.2vw, 17px); --elh-body-lh: 1.72; }

/* Why Us */
.rc-text > p, .founding-r > p, .wu-strip-r > p, .reasons-hd-r > p,
/* Developers */
.pillar-text, .lede-body > p, .inv-head-r p, .inv-foot > p, .faq-note,
/* Our Story */
.story-body, .story-body > p, .where-sub, .conv-inner > p.sub,
/* Build */
.ts-lede, .ts-body-text,
/* FAQ, Warranty, Homeowner Resources, Code of Conduct, legal pages */
.faq-a > p, .faq-intro > p, .legal-prose > p, .legal-prose li, .faq-hero-sub,
/* Sell */
.sec-body > p, .why-item p, .step > p, .sec-lede, .areas-note, .cta-sub,
/* Stories, closing strips */
.post-card > p, .feat-excerpt, .grain > p,
/* Contact, Client Portal, Project, articles */
.section-body, .help-text-body, .description, .inquiry-sub, .article-wrap > p, .article-wrap li {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: var(--elh-body-size) !important;
  font-weight: 300 !important;
  line-height: var(--elh-body-lh) !important;
}

/* A phone number is one unit: never break "(480) 340-" / "8700" across lines. */
a[href^="tel:"] { white-space: nowrap; }

/* avoid a single word stranded on the last line of a paragraph */
.rc-text > p, .founding-r > p, .wu-strip-r > p, .reasons-hd-r > p, .pillar-text, .lede-body > p, .inv-head-r p, .inv-foot > p, .faq-note, .story-body, .story-body > p, .where-sub, .conv-inner > p.sub, .ts-lede, .ts-body-text, .faq-a > p, .faq-intro > p, .legal-prose > p, .legal-prose li, .faq-hero-sub, .sec-body > p, .why-item p, .step > p, .sec-lede, .areas-note, .cta-sub, .post-card > p, .feat-excerpt, .grain > p, .section-body, .help-text-body, .description, .inquiry-sub, .article-wrap > p, .article-wrap li { text-wrap: pretty; }

/* Keyboard focus is always visible: gold ring on the dark pages; navy on the light article pages (article.css). */
:focus-visible { outline: 2px solid #BFA06A !important; outline-offset: 3px !important; }

/* headings break into even lines (no lone word such as "at" or "lot?" on the last line) */
h2, h3 { text-wrap: balance; }

/* Sticky components sit below the nav while it is visible and move up when it hides, so they never slide
   under the returning bar and never leave an empty strip. elh-nav.js sets data-elh-nav-state on <html>
   (top | shown | hidden | open) and --elh-nav-h to the measured header height. Use: top: var(--sticky-top). */
:root { --sticky-top: calc(var(--elh-nav-h, 88px) + 12px); }
html[data-elh-nav-state="hidden"] { --sticky-top: 24px; }

/* Mobile heroes take Our Story's proportions (Oct 14): 92% of the screen, with the title, its line and the text
   under it about two-thirds of the way down, so all of it shows before scrolling, even on a short phone. Most pages
   set the hero's size inline or in their own <style>, hence !important. Pages pad either the hero itself, its
   .hero-copy (Our Story, Portfolio) or its .hero-caption (project pages); each is matched below. */
@media (max-width: 760px) {
  #hero-banner, #top[data-screen-label="Hero"] { min-height: 92vh !important; }
  #hero-banner:not(:has(> .hero-copy, > .hero-caption)) { padding-bottom: calc(10vh + 32px) !important; }
  #hero-banner > .hero-copy { padding-bottom: calc(10vh + 32px) !important; }
  #hero-banner > .hero-caption { margin-bottom: calc(10vh + 32px) !important; }
  #top[data-screen-label="Hero"] > div:has(> [data-elh-h1]) { padding-bottom: calc(10vh + 32px) !important; }
}