/* Beaumont Roofing & Siding — base stylesheet
   Single static stylesheet, no build step, no external font/JS dependency.

   Palette: an overcast Gulf-sky blue as the chrome, deliberately on the light
   side for a header color, with a deeper blue doing the work of the CTA and the
   footer, and a pale sandbar tint for small highlight areas. Because the
   chrome is light, white text on it is checked pair by pair below rather than
   assumed, and the footer sits on the deep blue, not on the chrome.

   Contrast, computed rather than eyeballed (WCAG AA needs 4.5:1 for small
   text, 3:1 for large bold text):
     --ferry-copy-c on --arc-page ........................... 14.86:1
     --upper-sub on --arc-page ......................... 6.53:1
     white on --overcast (chrome) ............ 5.62:1
     hero lead / subnote #eef4f8 on chrome ... 5.07:1
     nav link #eaf1f6 on chrome .............. 4.9:1
     brand mark #b7dcf2 on chrome ............ 3.89:1  (18.4px bold: large text, 3:1 floor)
     white on --gust (CTA, links on chrome) .. 6.95:1
     white on --gust-deep (hover, footer) .... 10.24:1
     --gust on --arc-page (body-copy links) ........ 6.46:1
     --gust on white (links inside cards) .... 6.95:1
     --overcast on --arc-page (h2) ................. 5.23:1
     --ferry-copy-c on --sandbar ...................... 11.24:1
     --gust on --sandbar ..................... 4.89:1
     footer text #b5cadb on --gust-deep ...... 6.06:1
     footer link #cfe0ec on --gust-deep ...... 7.57:1
     success #1f5c3a on its tint ............. 6.86:1
     error #a1261d on its tint ............... 6.37:1
   --squall is the light end of the hero gradient and a card tint only. White
   on it is 2.21:1 and it must never carry text.
*/

:root {
  --overcast: #3f6c8c;
  /* RGB channels of --overcast, for the hero photo scrim. */
  --chalk-film: 63, 108, 140;
  --squall: #8fb3cc;
  --gust: #2c5e80;
  --gust-deep: #1e4460;
  --sandbar: #fbd0b1;
  --arc-page: #f4f7f9;
  --solid-pure: #ffffff;
  --ferry-copy-c: #17232c;
  --upper-sub: #4a5b68;
  --ledger-rule: #d8e1e8;
  --cobble-fillet: 10px;
  --dial-reach-c: 1080px;
  /* The fixed CTA bar's real height: 12+11 padding top and bottom plus a
     0.95rem line (24px), +2px slack. Above 721px the link grows to 1rem and
     the bar to 73px. body's padding-bottom tracks both. */
  --keen-cta-h: 72px;
}
@media (min-width: 721px) { :root { --keen-cta-h: 73px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif;
  color: var(--ferry-copy-c);
  background: var(--arc-page);
  line-height: 1.6;
}
h1, h2, h3, h4, .juniper-pretitle, .stencil-banner-tag, .granite-tap, nav, .lyric-hail, .sleek-footbar, .round-area-links, .keel-wayfinder, form, footer.beam-site {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
img { max-width: 100%; display: block; }
a { color: var(--gust); text-decoration: none; }
a:hover { text-decoration: underline; }
.vivid-runway { max-width: var(--dial-reach-c); margin: 0 auto; padding: 0 20px; }

/* Header */
header.beam-site {
  background: var(--overcast);
  color: var(--solid-pure);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid var(--gust-deep);
}
header.beam-site .scout-runner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  max-width: var(--dial-reach-c);
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}
header.beam-site .calm-insignia {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--solid-pure);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
header.beam-site .calm-insignia span { color: #b7dcf2; }
.high-medallion { width: 30px; height: 30px; border-radius: 50%; display: block; flex-shrink: 0; }
header.beam-site nav { display: flex; gap: 16px; flex-wrap: wrap; }
header.beam-site nav a { color: #eaf1f6; font-size: 0.95rem; }
header.beam-site nav a:hover { color: var(--solid-pure); }
header.beam-site .lyric-hail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  background: var(--gust);
  color: var(--solid-pure);
  padding: 9px 16px;
  border-radius: 6px;
  font-weight: 700;
}
header.beam-site .lyric-hail:hover { background: var(--gust-deep); text-decoration: none; }
@media (min-width: 821px) and (max-width: 1080px) {
  header.beam-site nav { order: 3; flex: 1 0 100%; justify-content: center; margin-top: 2px; }
}

/* Hero */
.quarry-topline {
  background: linear-gradient(160deg, var(--overcast) 0%, var(--overcast) 55%, var(--squall) 100%);
  color: var(--solid-pure);
  padding: 52px 20px 44px;
}
.quarry-topline .vivid-runway { display: flex; flex-direction: column; gap: 16px; }
.quarry-topline .juniper-pretitle {
  display: inline-block;
  border-left: 3px solid var(--sandbar);
  padding: 2px 0 2px 10px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content;
}
.quarry-topline h1 { font-size: 2.15rem; margin: 0; max-width: 800px; line-height: 1.2; }
.quarry-topline p.creek-opener-copy { font-size: 1.1rem; color: #eef4f8; max-width: 640px; margin: 0; }
.quarry-topline .lantern-options-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.quarry-topline .fore-apostil { font-size: 0.9rem; color: #eef4f8; }
.granite-tap {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
}
.granite-tap.heather-filled { background: var(--gust); color: var(--solid-pure); }
.granite-tap.heather-filled:hover { background: var(--gust-deep); text-decoration: none; }
.granite-tap.quarry-bare-btn { background: transparent; color: var(--solid-pure); border: 1px solid rgba(255,255,255,0.55); }
.granite-tap.quarry-bare-btn:hover { background: rgba(255,255,255,0.12); text-decoration: none; }

/* Hero with a full-bleed background photo (homepage only). The scrim uses this
   site's own --chalk-film channels, so it stays on the chrome's hue if the palette
   is ever adjusted. The light chrome needs a heavier scrim than a dark one
   would, which is why the left stop starts at 0.94. */
.quarry-topline.coral-pictured {
  background-image:
    linear-gradient(90deg, rgba(var(--chalk-film), 0.94) 0%, rgba(var(--chalk-film), 0.82) 40%, rgba(var(--chalk-film), 0.35) 70%, rgba(var(--chalk-film), 0.08) 100%),
    url('/images/hero-roofing-photo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: 56px 20px;
}
@media (max-width: 820px) {
  .quarry-topline.coral-pictured {
    background-image:
      linear-gradient(180deg, rgba(var(--chalk-film), 0.92) 0%, rgba(var(--chalk-film), 0.86) 55%, rgba(var(--chalk-film), 0.72) 100%),
      url('/images/hero-roofing-photo-mobile.jpg');
    min-height: 440px;
  }
  .quarry-topline h1 { font-size: 1.65rem; }
  header.beam-site .scout-runner { justify-content: center; text-align: center; }
}

/* Sections */
section { padding: 46px 20px; }
section.maple-offset { background: var(--solid-pure); border-top: 1px solid var(--ledger-rule); border-bottom: 1px solid var(--ledger-rule); }
.stencil-banner-tag {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  color: var(--gust);
  font-weight: 700;
  margin-bottom: 6px;
}
h2 { font-size: 1.6rem; margin: 0 0 18px; color: var(--overcast); line-height: 1.25; }
h3 { font-size: 1.12rem; margin: 0 0 8px; color: var(--overcast); }
h2.subhead-tier { font-size: 1.12rem; margin: 0 0 8px; color: var(--overcast); }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

/* Grid cards */
.subtle-board { display: grid; gap: 16px; }
.subtle-board.honey-cols-3 { grid-template-columns: repeat(3, 1fr); }
.subtle-board.russet-cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .subtle-board.honey-cols-3, .subtle-board.russet-cols-2 { grid-template-columns: 1fr; } }
.ruby-brick {
  background: var(--solid-pure);
  border: 1px solid var(--ledger-rule);
  border-top: 3px solid var(--squall);
  border-radius: var(--cobble-fillet);
  padding: 18px 20px;
}
.ruby-brick p { color: var(--upper-sub); margin: 6px 0 0; font-size: 0.95rem; }

/* The insurance explainer band — full width, sits directly under the hero on
   the homepage. Deeper blue than the chrome so the two do not read as one
   block, three short columns of prose. */
.windband {
  background: var(--gust);
  color: var(--solid-pure);
  padding: 40px 20px;
}
.windband h2 { color: var(--solid-pure); }
.windband .stencil-banner-tag { color: var(--sandbar); }
.windband .three-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.windband p { color: #eef4f8; margin: 0; font-size: 0.98rem; }
.windband a { color: var(--solid-pure); text-decoration: underline; }
@media (max-width: 820px) { .windband .three-columns { grid-template-columns: 1fr; } }

/* Two-column county list: first-tier county on the left, the rest on the right. */
.county-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.county-ledger > div {
  background: var(--solid-pure);
  border: 1px solid var(--ledger-rule);
  border-radius: var(--cobble-fillet);
  padding: 18px 20px;
}
.county-ledger h3 { margin-bottom: 4px; }
.county-ledger .ledger-note { font-size: 0.88rem; color: var(--upper-sub); margin: 0 0 12px; }
.county-ledger ul { list-style: none; padding: 0; margin: 0; }
.county-ledger li { padding: 8px 0; border-top: 1px solid var(--ledger-rule); }
.county-ledger li:first-child { border-top: 0; }
.county-ledger li small { display: block; color: var(--upper-sub); font-size: 0.85rem; }
.county-ledger .outside { border-top-color: var(--sandbar); }
@media (max-width: 720px) { .county-ledger { grid-template-columns: 1fr; } }

/* Storm record as a vertical, oldest-first list. */
.storm-roll { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--squall); }
.storm-roll li { position: relative; padding: 0 0 22px 26px; }
.storm-roll li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--overcast);
  border: 3px solid var(--arc-page);
}
.storm-roll li:last-child { padding-bottom: 0; }
.storm-roll .when { display: block; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gust); font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.storm-roll strong { color: var(--overcast); }

/* FAQ — native <details>/<summary>, no JS */
.hatch-query-block { border-bottom: 1px solid var(--ledger-rule); padding: 14px 0; }
.hatch-query-block:first-of-type { padding-top: 0; }
.hatch-query-block summary {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--overcast);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.hatch-query-block summary::-webkit-details-marker { display: none; }
.hatch-query-block summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--gust); flex-shrink: 0; }
.hatch-query-block[open] summary::after { content: "\2212"; }
.hatch-query-block p { margin: 10px 0 0; color: var(--upper-sub); }

/* Wide tables */
.gamma-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 8px; }
table.data { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.93rem; background: var(--solid-pure); }
table.data th, table.data td { border: 1px solid var(--ledger-rule); padding: 9px 12px; text-align: left; vertical-align: top; }
table.data th { background: #e6eef4; color: var(--overcast); font-weight: 700; }
table.data caption { caption-side: bottom; text-align: left; font-size: 0.82rem; color: var(--upper-sub); padding-top: 8px; }

/* Sticky CTA bar — visible at EVERY width */
.sleek-footbar {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--gust-deep);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(0,0,0,0.18);
  gap: 10px;
  justify-content: center;
}
.sleek-footbar-inner { display: flex; gap: 10px; width: 100%; max-width: var(--dial-reach-c); margin: 0 auto; }
.sleek-footbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  text-align: center;
  padding: 11px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
}
.sleek-footbar .easel-handset-mark { flex: none; }
.sleek-footbar-call { flex: 3; background: var(--gust); color: var(--solid-pure); }
.sleek-footbar-quote { flex: 2; background: transparent; color: var(--solid-pure); border: 1px solid rgba(255,255,255,0.45); }
.sleek-footbar-call:hover { background: var(--overcast); text-decoration: none; }
.sleek-footbar-quote:hover { background: rgba(255,255,255,0.12); text-decoration: none; }
.sleek-footbar .vane-subclause { display: none; }
@media (min-width: 580px) { .sleek-footbar .vane-subclause { display: inline; } }
@media (min-width: 721px) {
  .sleek-footbar-inner { justify-content: center; }
  .sleek-footbar a { flex: 0 0 auto; padding: 11px 22px; font-size: 1rem; }
}
body { padding-bottom: var(--keen-cta-h); }

/* Area links */
.round-area-links { display: flex; flex-wrap: wrap; gap: 10px; }
.round-area-links a {
  background: var(--solid-pure);
  border: 1px solid var(--ledger-rule);
  padding: 8px 14px;
  border-radius: 6px;
  color: var(--overcast);
  font-size: 0.92rem;
}
.round-area-links a:hover { border-color: var(--gust); text-decoration: none; }

/* CTA band */
.azure-close-band { background: var(--overcast); color: var(--solid-pure); text-align: center; padding: 44px 20px; }
.azure-close-band h2 { color: var(--solid-pure); }
.azure-close-band p { color: #eef4f8; margin-bottom: 18px; }

/* Contact form */
form.mint-request-form { display: grid; gap: 12px; max-width: 480px; }
form.mint-request-form label { font-size: 0.88rem; font-weight: 600; color: var(--overcast); display: block; margin-bottom: 4px; }
form.mint-request-form input, form.mint-request-form select, form.mint-request-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--ledger-rule);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--solid-pure);
}
form.mint-request-form .cobalt-proviso { font-size: 0.78rem; color: var(--upper-sub); }
form.mint-request-form .myrtle-hp-field { position: absolute; left: -9999px; top: -9999px; }
form.mint-request-form button[disabled] { opacity: 0.6; cursor: not-allowed; }
.ember-return-note { margin-top: 12px; padding: 11px 14px; border-radius: 6px; font-size: 0.9rem; display: none; }
.ember-return-note.visible { display: block; }
.ember-return-note.success { background: #e4f2ea; color: #1f5c3a; }
.ember-return-note.error { background: #fbe9e7; color: #a1261d; }

/* Breadcrumb */
.keel-wayfinder { font-size: 0.85rem; color: var(--upper-sub); padding: 14px 20px 0; max-width: var(--dial-reach-c); margin: 0 auto; }
.keel-wayfinder a { color: var(--upper-sub); }

/* Footer — on the deep blue, not the chrome: the chrome is too light to carry
   small footer text at 4.5:1. */
footer.beam-site { background: var(--gust-deep); color: #b5cadb; padding: 40px 20px 24px; font-size: 0.9rem; }
footer.beam-site .vivid-runway { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
footer.beam-site h2 { color: var(--solid-pure); font-size: 0.95rem; margin: 0 0 10px; }
footer.beam-site ul { list-style: none; padding: 0; margin: 0; }
footer.beam-site li { margin-bottom: 6px; }
footer.beam-site a { color: #cfe0ec; }
footer.beam-site .maple-floorline {
  max-width: var(--dial-reach-c);
  margin: 24px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 720px) { footer.beam-site .vivid-runway { grid-template-columns: 1fr 1fr; } }

.stub-mark {
  background: #fff3cd;
  color: #7a5b00;
  border: 1px dashed var(--sandbar);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.82em;
}

/* A short highlighted aside — the sandbar tint carries ink, never white. */
.sandbar-note {
  background: var(--sandbar);
  color: var(--ferry-copy-c);
  border-radius: var(--cobble-fillet);
  padding: 16px 20px;
  margin: 18px 0 0;
}
.sandbar-note p { margin: 0; }

/* --- Work photos ------------------------------------------------------ */
/* One inline documentary shot per service page, dropped between two content
   sections. Not a gallery grid and not a CSS background. The width cap is what
   stops an unclassed figure rendering full-bleed. Every master on this site is
   landscape 1200x800, so there are no orientation modifiers. */
.vertex-task-shot { max-width: var(--dial-reach-c); margin: 0 auto; padding: 32px 20px; }
.vertex-task-shot img {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--cobble-fillet);
  border: 1px solid var(--ledger-rule);
}

/* --- Homepage work strip ---------------------------------------------- */
/* Twelve small thumbnails, one per service page plus the certificate page,
   in a single horizontally scrolling row with scroll-snap rather than a tiled
   grid, so the strip reads as a contact sheet and never leaves a ragged last
   row at any width. Plain images, not links, not lightboxed, no captions. */
.rudder-filmstrip .vivid-plates {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.rudder-filmstrip img {
  flex: 0 0 240px;
  width: 240px;
  /* height:auto is required — the img height="320" attribute would otherwise
     force a 320px box and make aspect-ratio be ignored. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--ledger-rule);
  background: var(--solid-pure);
  scroll-snap-align: start;
}
@media (max-width: 520px) { .rudder-filmstrip img { flex-basis: 200px; width: 200px; } }

/* Reviews — server-gated partial, off until real reviews exist. */
.true-feedback-block .ledger-remark { border-top-color: var(--sandbar); }
.sextant-stars { color: #b8860b; letter-spacing: 0.1em; margin: 0 0 8px; }
.still-attribution { color: var(--muted); font-size: 0.9rem; margin: 8px 0 0; }