/* Public site: typography refinements on top of the design stylesheet (/assets/css/styles.css).
   Same family (Nunito Sans, self-hosted) and brand colours; this file only retunes the type scale,
   weights, spacing and hierarchy. Loaded straight after the design stylesheet, so the design's own
   tokens are overridden here rather than edited in design/ (see README). Fold into the design on
   the next drop and delete this file.

   Weight system: 400 body · 500 navigation, secondary text · 600 buttons, subheadings ·
   700 headings, labels · 800 hero headings and display numbers only. */

:root {
  /* Sizes: phone -> tablet -> desktop */
  --font-size-h1: clamp(34px, calc(19px + 3.6vw), 72px);     /* 34 / ~48 / ~71 */
  --font-size-h2: clamp(28px, calc(20px + 1.95vw), 46px);    /* 28 / ~36 / 46 */
  --font-size-h3: clamp(22px, calc(18px + .7vw), 28px);      /* 22 / ~24 / 28 */
  --font-size-h4: clamp(18px, calc(16px + .3vw), 20px);
  --font-size-lead: clamp(17px, calc(15px + .4vw), 20px);
  --font-size-body: 16px;                                    /* 17px from 1024px (design base rule) */
  --font-size-small: 14px;
  --font-size-nav: 15px;
  --font-size-button: 15px;
  --font-size-label: 13px;

  --line-height-display: 1.06;   /* hero */
  --line-height-tight: 1.1;      /* h1 */
  --line-height-heading: 1.15;   /* h2 */
  --line-height-subheading: 1.25;
  --line-height-body: 1.65;
  --line-height-lead: 1.6;

  --letter-spacing-display: -.025em;
  --letter-spacing-tight: -.02em;
  --letter-spacing-heading: -.01em;
  --letter-spacing-button: .05em;
  --letter-spacing-label: .12em;
}

/* ---------- Headings: bold, not everything extra-bold ---------- */
h1, .h1 { font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
h2, .h2 { line-height: var(--line-height-heading); }
h3, .h3 { line-height: var(--line-height-subheading); }
.lead { line-height: var(--line-height-lead); }

/* ---------- Hero: the one place for 800 ---------- */
.hero h1 {
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  max-width: 15ch;
}
.hero--page h1 { max-width: 18ch; }
.hero .lead { font-weight: var(--font-weight-regular); }
.hero__meta { font-weight: var(--font-weight-semibold); }

/* ---------- Section heading pattern: eyebrow -> H2 -> supporting paragraph ---------- */
.eyebrow { font-weight: var(--font-weight-bold); text-wrap: balance; }
.section-head h2, .section-head .h2 { margin-bottom: var(--space-3); }
.section-head > p:not(.eyebrow), .section-head > div > p:not(.eyebrow) { font-size: var(--font-size-lead); line-height: var(--line-height-lead); color: var(--archies-muted); }
.section--dark .section-head > p:not(.eyebrow), .section--dark .section-head > div > p:not(.eyebrow) { color: inherit; opacity: .85; }

/* Phones: keep one-line hero labels ("FENCING · GATES · SHEDS · REGIONAL WA") from breaking */
@media (max-width: 479px) {
  .hero .eyebrow { font-size: 12px; letter-spacing: .08em; gap: 10px; }
  .hero .eyebrow::before { width: 24px; }
}

/* ---------- Numbers: lining, even-width figures for prices, phones and stats ---------- */
body { font-variant-numeric: lining-nums; }
.hero-phone, .loc-panel__contact .num, .stat-bar strong, .image-card__num, a[href^="tel:"] { font-variant-numeric: lining-nums tabular-nums; }