/* Roof-Rank base styles — reset, background system, type rules.
   No media queries: every grid is auto-fit with a minmax floor, every
   display size is a clamp or a min. Zero JS, zero shadows, zero gradients
   other than the two named background layers below. */

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-ink); text-decoration: none; }
a:hover { color: var(--color-primary); }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

input, select, textarea, button { font-family: inherit; }

img, svg { display: block; max-width: 100%; }

/* ---- background system: nested grid + fixed vignette ---- */

.bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--color-primary-rgb), 0.05) 2px, transparent 2px),
    linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.05) 2px, transparent 2px),
    linear-gradient(rgba(var(--color-primary-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(rgba(var(--color-primary-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.03) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px, 25px 25px, 25px 25px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.bg-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(140% 85% at 50% 46%,
    rgba(3, 4, 6, 0.8) 0%, rgba(3, 4, 6, 0.55) 45%, rgba(3, 4, 6, 0.3) 75%, transparent 100%);
}

.page {
  position: relative;
  min-height: 100vh;
  /* overflow-x: hidden (not clip) would force overflow-y to compute as
     "auto", turning .page into a scroll-container ancestor of the sticky
     header. Since .page's own box always matches its content height, it
     never scrolls internally — but its mere presence as a scroll container
     makes it the sticky header's stick reference instead of the viewport,
     so the header scrolls away with the page. overflow-x: clip avoids the
     visible/hidden auto-pairing quirk and keeps overflow-y: visible. */
  overflow-x: clip;
  overflow-y: visible;
}

.page-body { position: relative; z-index: 1; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}
.container--centered-col { display: flex; flex-direction: column; align-items: center; }

/* ---- type rules ---- */

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0; text-wrap: pretty; }

.h1--hero {
  font-weight: 700;
  /* No manual line break and no hard floor: text-wrap:balance (set on the
     shared h1 rule above) picks the break point itself from the live
     container width at every viewport, so it can never run out of room
     the way a fixed "\n" + a frozen clamp floor did. It happens to land
     on "Roofing websites built / to be cited by AI." at normal widths
     because that's the most balanced split, and folds to 3 lines only
     once a width genuinely can't fit 2 balanced lines at this size. */
  font-size: clamp(1.15rem, 7.7vw, 4.6rem);
  letter-spacing: -0.032em;
  line-height: 1.06;
}
.h1--wide { font-weight: 700; font-size: min(5.1vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.08; }
.h1--page { font-weight: 700; font-size: clamp(2.05rem, 3.4vw, 2.75rem); letter-spacing: -0.025em; line-height: 1.1; }
.h2--section { font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.015em; line-height: 1.15; }
.h3--proof { font-weight: 700; font-size: 1.4rem; letter-spacing: -0.015em; line-height: 1.3; }
.h3--card { font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.35; }

.text--hero-sub { font-size: 1.05rem; font-weight: 400; line-height: 1.65; color: var(--color-muted); max-width: 600px; }
.text--section-sub { font-size: 0.98rem; font-weight: 400; line-height: 1.6; color: var(--color-muted); max-width: 640px; }
.text--card-body { font-size: 0.92rem; font-weight: 400; line-height: 1.6; color: var(--color-muted); }
.text--quote { font-size: 1rem; font-weight: 400; line-height: 1.62; color: var(--color-subject); }

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-primary);
  border-bottom: 1px solid var(--border-primary-soft);
  padding-bottom: 3px;
}
.link-underline .icon-arrow { transition: transform 0.22s ease; }
.link-underline:hover { color: var(--color-ink); border-color: rgba(var(--color-ink-rgb), 0.6); }
.link-underline:hover .icon-arrow { transform: translateX(4px); }

.rr-arrow { transition: transform 0.22s ease; }
a:hover .rr-arrow { transform: translateX(4px); }

.eyebrow-mono { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.breadcrumb-mono { font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-faint); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}