/* ---- self-hosted fonts (scripts/selfhost-demo-fonts.py) ---- */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-normal-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-normal-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-normal-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---- metric-matched fallbacks (scripts/demo-font-fallbacks.py) ---- */
@font-face{font-family:'Barlow Condensed Fallback';font-style:normal;font-weight:700;src:local('Arial Bold'), local('Liberation Sans Bold'), local('Helvetica Neue Bold'), local('Helvetica Bold'), local('Roboto Bold');size-adjust:76.33%;ascent-override:131.00%;descent-override:26.20%;line-gap-override:0.00%}
@font-face{font-family:'Barlow Condensed Fallback';font-style:normal;font-weight:600;src:local('Arial Bold'), local('Liberation Sans Bold'), local('Helvetica Neue Bold'), local('Helvetica Bold'), local('Roboto Bold');size-adjust:76.33%;ascent-override:131.00%;descent-override:26.20%;line-gap-override:0.00%}
@font-face{font-family:'Barlow Fallback';font-style:normal;font-weight:400;src:local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica'), local('Roboto');size-adjust:96.94%;ascent-override:103.15%;descent-override:20.63%;line-gap-override:0.00%}
@font-face{font-family:'Barlow Fallback';font-style:normal;font-weight:600;src:local('Arial Bold'), local('Liberation Sans Bold'), local('Helvetica Neue Bold'), local('Helvetica Bold'), local('Roboto Bold');size-adjust:89.67%;ascent-override:111.52%;descent-override:22.30%;line-gap-override:0.00%}
/* ---- end fallbacks ---- */

/* ============================================================
   Ridgeline Roofing - design system
   A Nelanor concept build at Startup scope (three pages). The site has one job:
   get a homeowner in Jefferson County to call or ask for an estimate. Every
   decision below serves that. Phone number in the header on every width, one
   accent colour spent only on the two ways to get in touch, and the estimate
   promise stated before the first scroll.

   Palette: paper #F4F1EA · panel #E9E4D8 · slate #2B3540 · ink #171C22
            rust #B8471B (the call and estimate buttons only) · sky #5B7C99
   Type: Barlow Condensed (display) + Barlow (body)
   ============================================================ */

:root {
  --paper: #F4F1EA;
  --panel: #E9E4D8;
  --slate: #2B3540;
  --ink: #171C22;
  --rust: #B8471B;
  --rust-deep: #963810;
  --sky: #5B7C99;
  --muted: #5C6570;
  --rule: rgba(23, 28, 34, 0.18);
  --rule-soft: rgba(23, 28, 34, 0.10);
  --error: #8A2E1A;
  --display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Arial, sans-serif;
  --body: "Barlow", "Barlow Fallback", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.8, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
address { font-style: normal; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 14px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container { width: min(1120px, 100% - 40px); margin-inline: auto; }
@media (max-width: 640px) { .container { width: min(1120px, 100% - 32px); } }

/* ---------- type ---------- */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 600; }
.eyebrow {
  font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rust);
}
.lede { font-size: 1.2rem; line-height: 1.5; color: var(--slate); max-width: 34rem; }
.muted { color: var(--muted); }
p + p { margin-top: 0.9em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px; border-radius: 6px; border: 2px solid transparent;
  font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer; transition: background-color .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn-primary { background: var(--rust); color: #fff; }
.btn-primary:hover { background: var(--rust-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn svg { width: 20px; height: 20px; flex: none; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(244, 241, 234, 0.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.01em; text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.site-nav ul { display: flex; align-items: center; gap: 22px; }
.site-nav ul a:not(.btn) { font-weight: 600; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav ul a[aria-current="page"] { border-bottom-color: var(--rust); }
.site-nav ul a:not(.btn):hover { border-bottom-color: var(--ink); }
.nav-phone { min-height: 44px; padding: 8px 16px; font-size: 1.05rem; white-space: nowrap; }
.nav-phone .num { margin-left: 6px; }
.brand { white-space: nowrap; }
@media (max-width: 720px) {
  .site-nav ul { gap: 14px; }
  .site-nav ul li.hide-sm { display: none; }
  .brand { font-size: 1.15rem; }
  .brand svg { width: 26px; height: 26px; }
  /* A phone is the device that can dial, so the button only has to say "Call". */
  .nav-phone .num { display: none; }
  .nav-phone { padding: 8px 14px; }
}

/* ---------- hero ---------- */
.hero { padding: 40px 0 28px; }
.hero-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 48px; } .hero { padding: 56px 0 40px; } }
.hero h1 { margin-top: 12px; }
.hero .lede { margin-top: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-photo img { border-radius: 10px; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hero-photo figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--muted); }
.assurances { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 0.95rem; color: var(--slate); }
.assurances li { display: inline-flex; align-items: center; gap: 8px; }
.assurances svg { width: 18px; height: 18px; color: var(--rust); flex: none; }

/* ---------- sections ---------- */
.section { padding: 56px 0; }
@media (min-width: 900px) { .section { padding: 80px 0; } }
.section-head { max-width: 40rem; }
.section-head p { margin-top: 12px; color: var(--slate); }
.section--panel { background: var(--panel); }
.section--dark { background: var(--slate); color: #E9E4D8; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: #F0A57C; }
.section--dark .muted { color: #B8C0C8; }

/* services grid */
.services { display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 640px) { .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(4, 1fr); } }
.service {
  display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 10px;
  background: #fff; border: 1px solid var(--rule-soft); text-decoration: none; min-height: 100%;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.service:hover { border-color: var(--slate); transform: translateY(-2px); }
.service h3 { font-size: 1.5rem; }
.service p { color: var(--slate); font-size: 0.98rem; }
.service .more { margin-top: auto; font-weight: 600; color: var(--rust); font-family: var(--display); letter-spacing: 0.02em; }

/* steps */
.steps { display: grid; gap: 22px; margin-top: 32px; counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.step { position: relative; padding-top: 14px; border-top: 3px solid var(--rust); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--rust);
}
.step h3 { margin-top: 8px; }
.step p { margin-top: 8px; color: var(--slate); }

/* storm split */
.split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } .split.flip > :first-child { order: 2; } }
.split img { border-radius: 10px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.checklist { margin-top: 18px; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist svg { width: 22px; height: 22px; flex: none; color: var(--rust); margin-top: 2px; }
.section--dark .checklist svg { color: #F0A57C; }

/* owner note */
.owner { display: grid; gap: 24px; align-items: start; }
@media (min-width: 800px) { .owner { grid-template-columns: 300px 1fr; gap: 48px; } }
.owner img { border-radius: 10px; aspect-ratio: 2 / 3; object-fit: cover; width: 100%; max-width: 300px; }
.owner blockquote { font-size: 1.15rem; line-height: 1.55; color: var(--slate); }
.owner blockquote p + p { margin-top: 0.8em; }
.owner .sig { margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.owner .sig span { display: block; font-family: var(--body); font-weight: 400; font-size: 0.95rem; color: var(--muted); }

/* neighbors */
.quotes { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 800px) { .quotes { grid-template-columns: 1fr 1fr; gap: 24px; } }
.quote { padding: 22px 24px; background: #fff; border-left: 4px solid var(--rust); border-radius: 0 8px 8px 0; }
.quote p { font-size: 1.05rem; color: var(--ink); }
.quote footer { margin-top: 10px; font-size: 0.9rem; color: var(--muted); }

/* areas + hours */
.facts { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 800px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts h3 { font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust); font-weight: 600; }
.facts ul, .facts dl { margin-top: 10px; display: grid; gap: 6px; }
.facts dl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule-soft); padding: 4px 0; }
.facts a { text-decoration-color: var(--rule); text-underline-offset: 3px; }

/* CTA band */
.cta-band { padding: 48px 0; background: var(--ink); color: #fff; }
.cta-band .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #C8CED4; max-width: 34rem; margin-top: 8px; }
.cta-band .btn-ghost { color: #fff; border-color: #fff; }
.cta-band .btn-ghost:hover { background: #fff; color: var(--ink); }

/* ---------- services page ---------- */
.page-head { padding: 48px 0 24px; }
.service-block { padding: 40px 0; border-top: 1px solid var(--rule); }
.service-block:first-of-type { border-top: 0; }
.service-block .split img { aspect-ratio: 4 / 3; }
.includes { margin-top: 16px; display: grid; gap: 8px; }
.includes li { padding-left: 18px; position: relative; color: var(--slate); }
.includes li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; border-radius: 2px; background: var(--rust); }
.warranty { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 800px) { .warranty { grid-template-columns: 1fr 1fr 1fr; } }
.warranty div { padding: 22px; background: #fff; border-radius: 10px; border: 1px solid var(--rule-soft); }
.warranty strong { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 700; }
.warranty p { margin-top: 6px; color: var(--slate); font-size: 0.98rem; }
.faq { margin-top: 28px; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; font-family: var(--display); font-weight: 600; font-size: 1.3rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; color: var(--rust); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 18px; color: var(--slate); max-width: 44rem; }

/* ---------- contact page ---------- */
.contact-grid { display: grid; gap: 36px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; } }
.contact-aside .card { padding: 24px; background: #fff; border-radius: 10px; border: 1px solid var(--rule-soft); }
.contact-aside .card + .card { margin-top: 16px; }
.contact-aside .big { font-family: var(--display); font-weight: 700; font-size: 1.9rem; text-decoration: none; display: inline-block; margin-top: 4px; }
.contact-aside h3 { font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust); font-weight: 600; }

.form { margin-top: 28px; display: grid; gap: 20px; }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field .hint { font-weight: 400; color: var(--muted); font-size: 0.92rem; margin-left: 6px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1.5px solid var(--rule); border-radius: 6px; padding: 12px 14px; min-height: 50px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--slate); outline: 3px solid rgba(91, 124, 153, 0.35); outline-offset: 0; }
.field.invalid input, .field.invalid textarea { border-color: var(--error); }
.field-error { color: var(--error); font-size: 0.92rem; margin-top: 6px; }
.two { display: grid; gap: 20px; }
@media (min-width: 640px) { .two { grid-template-columns: 1fr 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--rule); background: #fff; font-weight: 600; font-size: 0.98rem; transition: background-color .15s, border-color .15s;
}
.chip input:checked + span { background: var(--slate); border-color: var(--slate); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.form .note { font-size: 0.92rem; color: var(--muted); }
.form-success { display: none; padding: 24px; border-radius: 10px; background: #fff; border: 1.5px solid var(--slate); }
.form-success.is-on { display: block; }
.form-success h3 { font-size: 1.6rem; }
.form-success p { margin-top: 8px; color: var(--slate); }

/* ---------- footer ---------- */
.site-footer { padding: 40px 0 28px; background: var(--ink); color: #C8CED4; font-size: 0.95rem; }
.site-footer .cols { display: grid; gap: 24px; }
@media (min-width: 800px) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.site-footer .brand { color: #fff; }
.site-footer h3 { color: #fff; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.site-footer ul { margin-top: 10px; display: grid; gap: 6px; }
.site-footer a { color: #E9E4D8; text-decoration-color: rgba(233, 228, 216, 0.4); text-underline-offset: 3px; }
.site-footer a:hover { color: #fff; }
.site-footer .legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.85rem; color: #98A2AC; }
.site-footer .legal p + p { margin-top: 6px; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; transition: opacity .3s; }
  .btn, .service { transition: none; }
}
.page-head h1 { margin-top: 10px; }
.page-head .lede { margin-top: 14px; }