/* Woodlands Roofing Pros — stylesheet
   One static file, no build step, no web fonts, no framework.

   Contrast (WCAG AA: 4.5:1 body and small bold, 3:1 large). --standard is
   the accent, the button color and the a {} link color. Computed from this
   file's own :root:
     --jewel-script-c on --cedar-backdrop ..................................... 16.50:1
     --helm-hushed on --cedar-backdrop / on white ........................ 7.48:1 / 8.00:1
     white on --canopy (#15183a) ....................... 17.16:1
     white on --standard (#4a50a8) ..................... 6.99:1
     white on --standard-deep (#2c3070) ................ 11.91:1
     --standard on --cedar-backdrop (links, section labels) ........ 6.54:1
     --standard on white (links inside cards) .......... 6.99:1
     --canopy on --cedar-backdrop (h2, h3) ......................... 16.05:1
     hero lead (#dfe1f2) on gradient end (#343a63) ..... 8.38:1
     hero subnote / nav (#d6d9ee) on #343a63 ........... 7.78:1
     nav link (#d6d9ee) on --canopy .................... 12.27:1
     brand span (--gold) on --canopy ................... 12.26:1
     footer text (#d3d6ec) on --standard-deep .......... 8.28:1
     success text (--canopy) on #e6e8f6 ................ 14.09:1
     error text (#a1261d) on #fbeceb ................... 6.51:1
     stepper number (--canopy) on --gold ............... 12.26:1
     --helm-hushed on table head (#eef0f8) ................... 7.03:1
   The hero gradient ends on #343a63, between --canopy and --understory,
   not on --understory itself.
*/

:root {
  --canopy: #15183a;
  --understory: #4d5478;
  --standard: #4a50a8;
  --standard-deep: #2c3070;
  --gold: #f0d98a;
  --cedar-backdrop: #f7f7fa;
  --trim-plain: #ffffff;
  --jewel-script-c: #16172a;
  --helm-hushed: #4d4f66;
  --tiller-stroke: #dfe0ea;
  --garnet-veil: 21, 24, 58;
  --orchid-rounding: 4px;
  --willow-width-cap: 1080px;
  /* Fixed call bar: 9px padding top and bottom, a 0.9rem line and 2px slack. */
  --verse-cta-h: 60px;
}
@media (min-width: 760px) { :root { --verse-cta-h: 64px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 17px;
  color: var(--jewel-script-c);
  background: var(--cedar-backdrop);
  line-height: 1.62;
  padding-bottom: var(--verse-cta-h);
}
h1, h2, h3, summary, .pressel, nav, .colophon, .dial-link, .spruce-band-label, .banner-line, .hoverbar, .fair-breadcrumbs, label, button, footer {
  font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
}
img { max-width: 100%; display: block; }
a { color: var(--standard); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--standard-deep); }
.holder { max-width: var(--willow-width-cap); margin: 0 auto; padding: 0 20px; }

/* Header */
header.headpiece { background: var(--canopy); color: var(--trim-plain); position: sticky; top: 0; z-index: 50; border-bottom: 3px solid var(--gold); }
header.headpiece .stave {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px;
  max-width: var(--willow-width-cap); margin: 0 auto; padding: 12px 20px;
}
header.headpiece .colophon { display: inline-flex; align-items: center; gap: 10px; color: var(--trim-plain); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.01em; text-decoration: none; }
header.headpiece .colophon span { color: var(--gold); }
header.headpiece nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
header.headpiece nav a { color: #d6d9ee; font-size: 0.92rem; text-decoration: none; }
header.headpiece nav a:hover { color: var(--trim-plain); }
header.headpiece .dial-link {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  border: 1px solid var(--gold); color: var(--trim-plain); padding: 8px 15px; border-radius: var(--orchid-rounding);
  font-weight: 600; text-decoration: none;
}
header.headpiece .dial-link:hover { background: var(--standard); border-color: var(--standard); color: var(--trim-plain); }
.stamp-mark { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 820px) { header.headpiece .stave { justify-content: center; text-align: center; } }
@media (min-width: 821px) and (max-width: 1080px) { header.headpiece nav { order: 3; flex: 1 0 100%; justify-content: center; } }

/* Breadcrumb */
.fair-breadcrumbs { max-width: var(--willow-width-cap); margin: 0 auto; padding: 14px 20px 0; font-size: 0.84rem; color: var(--helm-hushed); }
.fair-breadcrumbs a { color: var(--helm-hushed); }

/* Hero */
.first-band { background: linear-gradient(160deg, var(--canopy) 0%, #343a63 100%); color: var(--trim-plain); padding: 52px 20px 46px; }
.first-band .holder { display: flex; flex-direction: column; gap: 16px; }
.first-band h1 { margin: 0; font-size: 2.15rem; line-height: 1.2; max-width: 780px; font-weight: 600; }
.first-band .banner-line { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.first-band .gamma-standfirst { margin: 0; max-width: 640px; font-size: 1.1rem; color: #dfe1f2; }
.first-band .moss-under-note { margin: 0; font-size: 0.9rem; color: #d6d9ee; }
.first-band.indigo-scened {
  background-image:
    linear-gradient(90deg, rgba(var(--garnet-veil), 0.94) 0%, rgba(var(--garnet-veil), 0.78) 42%, rgba(var(--garnet-veil), 0.34) 72%, rgba(var(--garnet-veil), 0.08) 100%),
    url('/images/hero-roofing-photo.jpg');
  background-size: cover; background-position: center; min-height: 540px; display: flex; align-items: center;
}
@media (max-width: 820px) {
  .first-band.indigo-scened {
    background-image:
      linear-gradient(180deg, rgba(var(--garnet-veil), 0.9) 0%, rgba(var(--garnet-veil), 0.84) 60%, rgba(var(--garnet-veil), 0.72) 100%),
      url('/images/hero-roofing-photo-mobile.jpg');
    min-height: 470px;
  }
  .first-band h1 { font-size: 1.7rem; }
}
.reef-call-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.pressel { display: inline-block; padding: 12px 22px; border-radius: var(--orchid-rounding); font-weight: 600; font-size: 0.98rem; text-decoration: none; }
.pressel.crisp-key { background: var(--standard); color: var(--trim-plain); }
.pressel.crisp-key:hover { background: var(--standard-deep); color: var(--trim-plain); }
.pressel.north-shell-btn { color: var(--trim-plain); border: 1px solid rgba(255,255,255,0.5); background: transparent; }
.pressel.north-shell-btn:hover { background: rgba(255,255,255,0.12); color: var(--trim-plain); }

/* Sections */
section { padding: 50px 20px; }
section.washed { background: var(--trim-plain); border-top: 1px solid var(--tiller-stroke); border-bottom: 1px solid var(--tiller-stroke); }
.spruce-band-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--standard); margin: 0 0 6px; }
h2 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 18px; color: var(--canopy); font-weight: 600; }
h3 { font-size: 1.12rem; margin: 0 0 8px; color: var(--canopy); font-weight: 600; }
.prose { max-width: 760px; }
.prose p, .prose li { color: var(--jewel-script-c); }
.prose h2 { margin-top: 34px; }
.prose h2:first-child { margin-top: 0; }

.framework { display: grid; gap: 18px; }
.framework.lantern-pair { grid-template-columns: repeat(2, 1fr); }
.framework.trine { grid-template-columns: repeat(3, 1fr); }
.service-quad { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .service-quad { grid-template-columns: repeat(2, 1fr); } .framework.trine { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .service-quad, .framework.lantern-pair, .framework.trine { grid-template-columns: 1fr; } }
.mosaic-unit { background: var(--trim-plain); border: 1px solid var(--tiller-stroke); border-radius: var(--orchid-rounding); padding: 20px; }
section.washed .mosaic-unit { background: var(--cedar-backdrop); }
.mosaic-unit p { margin: 6px 0 0; color: var(--helm-hushed); font-size: 0.95rem; }

/* The recorded standard, quoted */
.standard-cite { margin: 22px 0; padding: 16px 20px; border-left: 4px solid var(--gold); background: var(--trim-plain); font-size: 1rem; }
.standard-cite p { margin: 0; }
.standard-cite cite { display: block; margin-top: 8px; font-style: normal; font-size: 0.84rem; color: var(--helm-hushed); }
.gap-note { font-size: 0.9rem; color: var(--helm-hushed); border-top: 1px dashed var(--tiller-stroke); padding-top: 12px; margin-top: 22px; }

/* Homepage: the five approved roofing materials */
.materials-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--tiller-stroke); background: var(--trim-plain); }
.material-tile { padding: 22px 18px; border-right: 1px solid var(--tiller-stroke); text-decoration: none; color: var(--jewel-script-c); display: flex; flex-direction: column; gap: 6px; }
.material-tile:last-child { border-right: none; }
.material-tile strong { font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--canopy); font-size: 1.02rem; }
.material-tile span { font-size: 0.86rem; color: var(--helm-hushed); }
.material-tile:hover { background: #eef0f8; color: var(--jewel-script-c); }
.rail-caption { margin: 12px 0 0; font-size: 0.88rem; color: var(--helm-hushed); }
@media (max-width: 900px) {
  .materials-rail { grid-template-columns: 1fr; }
  .material-tile { border-right: none; border-bottom: 1px solid var(--tiller-stroke); }
  .material-tile:last-child { border-bottom: none; }
}

/* Design review as a horizontal four-stage stepper */
.approval-stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: stage; position: relative; }
.approval-stepper::before { content: ""; position: absolute; top: 19px; left: 12%; right: 12%; height: 2px; background: var(--understory); }
.stepper-stage { position: relative; padding: 0 12px; text-align: center; counter-increment: stage; }
.stepper-stage::before {
  content: counter(stage); display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--gold); color: var(--canopy); font-weight: 700; position: relative;
  font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
}
.stepper-stage h3 { font-size: 1rem; }
.stepper-stage p { margin: 0; font-size: 0.9rem; color: var(--helm-hushed); }
@media (max-width: 760px) {
  .approval-stepper { grid-template-columns: 1fr; gap: 18px; }
  .approval-stepper::before { top: 0; bottom: 0; left: 19px; right: auto; width: 2px; height: auto; }
  .stepper-stage { text-align: left; padding: 0 0 0 58px; }
  .stepper-stage::before { position: absolute; left: 0; top: 0; margin: 0; }
}

/* Village index: a two-column list, grouped by era */
.village-index { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.village-era h3 { font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--helm-hushed); border-bottom: 2px solid var(--gold); padding-bottom: 6px; }
.village-era ul { list-style: none; margin: 0; padding: 0; }
.village-era li { padding: 9px 0; border-bottom: 1px solid var(--tiller-stroke); display: flex; justify-content: space-between; gap: 12px; }
.village-era li span { color: var(--helm-hushed); font-size: 0.88rem; white-space: nowrap; }
@media (max-width: 680px) { .village-index { grid-template-columns: 1fr; } }

/* FAQ: accordion with a sticky in-page nav */
.faq-layout { display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: start; }
.faq-nav { position: sticky; top: 96px; font-size: 0.9rem; font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif; }
.faq-nav p { margin: 0 0 8px; font-weight: 700; color: var(--canopy); }
.faq-nav ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--tiller-stroke); }
.faq-nav li a { display: block; padding: 5px 0 5px 12px; color: var(--helm-hushed); text-decoration: none; }
.faq-nav li a:hover { color: var(--standard); }
.faq-group { scroll-margin-top: 96px; margin-bottom: 30px; }
@media (max-width: 820px) { .faq-layout { grid-template-columns: 1fr; } .faq-nav { position: static; } }
.whistle-question { border-bottom: 1px solid var(--tiller-stroke); padding: 14px 0; }
.whistle-question summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem; color: var(--canopy); display: flex; justify-content: space-between; gap: 14px; }
.whistle-question summary::-webkit-details-marker { display: none; }
.whistle-question summary::after { content: "\203A"; color: var(--standard); font-size: 1.3rem; line-height: 1; transition: transform 0.15s; }
.whistle-question[open] summary::after { transform: rotate(90deg); }
.whistle-question p { margin: 10px 0 0; color: var(--helm-hushed); }

/* Work strip */
.photo-band .plates { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.photo-band img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--orchid-rounding); border: 1px solid var(--tiller-stroke); }
@media (max-width: 900px) { .photo-band .plates { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .photo-band .plates { grid-template-columns: repeat(2, 1fr); } }

/* One documentary photo per inner page */
.record-shot { max-width: var(--willow-width-cap); margin: 0 auto; padding: 30px 20px 0; }
.record-shot img { width: 100%; max-width: 820px; height: auto; margin: 0 auto; border-radius: var(--orchid-rounding); border: 1px solid var(--tiller-stroke); }

/* Cost table */
.grid-pan { overflow-x: auto; }
table.schedule-table { border-collapse: collapse; width: 100%; background: var(--trim-plain); font-size: 0.95rem; }
table.schedule-table th, table.schedule-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--tiller-stroke); }
table.schedule-table th { font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--canopy); background: #eef0f8; }

/* Error page links */
.loyal-catchment { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* Closing band */
.sendoff { background: var(--canopy); color: var(--trim-plain); text-align: center; padding: 46px 20px; border-top: 3px solid var(--gold); }
.sendoff h2 { color: var(--trim-plain); }
.sendoff p { color: #d6d9ee; margin: 0 auto 18px; max-width: 620px; }
.sendoff .pressel.north-shell-btn { margin-left: 8px; }

/* Contact form */
form.canvass { display: grid; gap: 12px; }
form.canvass label { display: block; margin-bottom: 4px; font-size: 0.88rem; font-weight: 600; color: var(--canopy); }
form.canvass input, form.canvass select, form.canvass textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #c9cbdb; border-radius: var(--orchid-rounding); font: inherit; font-size: 0.96rem; background: var(--trim-plain);
}
form.canvass .heather-filler-line { position: absolute; left: -9999px; top: -9999px; }
form.canvass button { border: none; cursor: pointer; }
form.canvass button[disabled] { opacity: 0.6; cursor: not-allowed; }
form.canvass .rider-note { font-size: 0.8rem; color: var(--helm-hushed); margin: 0; }
.answer-line { display: none; margin-top: 10px; padding: 11px 14px; border-radius: var(--orchid-rounding); font-size: 0.92rem; }
.answer-line.visible { display: block; }
.answer-line.success { background: #e6e8f6; color: var(--canopy); }
.answer-line.error { background: #fbeceb; color: #a1261d; }

/* Footer */
footer.headpiece { background: var(--standard-deep); color: #d3d6ec; padding: 40px 20px 22px; font-size: 0.9rem; }
footer.headpiece .holder { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
footer.headpiece h2 { color: var(--trim-plain); font-size: 0.95rem; margin: 0 0 10px; }
footer.headpiece ul { list-style: none; margin: 0; padding: 0; }
footer.headpiece li { margin-bottom: 6px; }
footer.headpiece a { color: #d3d6ec; text-decoration: none; }
footer.headpiece a:hover { color: var(--trim-plain); text-decoration: underline; }
footer.headpiece .hemline { display: block; margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.8rem; }
@media (max-width: 720px) { footer.headpiece .holder { grid-template-columns: 1fr 1fr; } }

/* Fixed call bar, every width */
.hoverbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--canopy); border-top: 2px solid var(--gold); padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); }
.hoverbar-inner { display: flex; gap: 10px; max-width: var(--willow-width-cap); margin: 0 auto; }
.hoverbar a { display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; padding: 10px; border-radius: var(--orchid-rounding); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.clingbar-call { flex: 3; background: var(--standard); color: var(--trim-plain); }
.hoverbar-quote { flex: 2; color: var(--trim-plain); border: 1px solid rgba(255,255,255,0.45); }
.clingbar-call:hover { background: var(--standard-deep); color: var(--trim-plain); }
.hoverbar-quote:hover { background: rgba(255,255,255,0.12); color: var(--trim-plain); }
.hoverbar .speaker-mark { flex: none; }
.hoverbar .sidenote-cta { display: none; }
@media (min-width: 560px) { .hoverbar .sidenote-cta { display: inline; } }
@media (min-width: 760px) { .hoverbar-inner { justify-content: center; } .hoverbar a { flex: 0 0 auto; padding: 11px 24px; font-size: 0.95rem; } }