/* League City Roofing & Siding — stylesheet
   One static file, no build step, no web fonts, no framework.

   Palette: a deep harbor plum as the chrome, a muted plum for gradients and
   card rules, and a brighter violet for buttons and body links. The accent is
   deliberately lighter than the mid tone, so the call to action is the most
   luminous color on the page rather than the darkest. A pale sea-glass aqua
   carries small highlights, and only ink ever sits on it.

   Contrast, computed (WCAG AA: 4.5:1 small text, 3:1 large bold text):
     --peony-ink on --wheat-bg ............................. 16.37:1
     --zinnia-muted on --wheat-bg ........................... 7.81:1
     --zinnia-muted on white .......................... 8.38:1
     white on --bilge (chrome) ................. 12.83:1
     hero lead / nav #ece4f2 on --bilge ........ 10.36:1
     brand mark --seaglass on --bilge .......... 8.93:1
     white on --mast (CTA) ..................... 5.68:1
     white on --mast-deep (hover, footer) ...... 9.90:1
     white on --keelson ........................ 6.97:1
     --mast on --wheat-bg (links) .................... 5.29:1
     --mast on white (links inside cards) ...... 5.68:1
     --bilge on --wheat-bg (h2, h3) .................. 11.96:1
     --mast-deep on --wheat-bg (labels) .............. 9.23:1
     --peony-ink on --seaglass ....................... 12.22:1
     footer text #d8cbe3 on --mast-deep ........ 6.40:1
     footer link #efe8f5 on --mast-deep ........ 8.27:1
     success #1f5c3a on its tint ............... 6.86:1
     error #a1261d on its tint ................. 6.37:1
   --mast on --seaglass is 3.95:1, so links never sit on the aqua.
*/

:root {
  --bilge: #501565;
  /* RGB channels of --bilge, for the hero photo scrim. */
  --lagoon-tint-over: 80, 21, 101;
  --keelson: #734a7f;
  --mast: #9442b4;
  --mast-deep: #6a1f80;
  --seaglass: #a0e2ee;
  --wheat-bg: #f8f6fb;
  --brisk-white: #ffffff;
  --peony-ink: #1d1626;
  --zinnia-muted: #55495f;
  --echo-divide: #e2dbe9;
  --poppy-corner: 8px;
  --indigo-limit: 1120px;
  /* Height of the fixed call bar: 12px + 11px padding top and bottom around a
     24px line, plus slack. body's padding-bottom tracks it. */
  --cedar-bar-h: 72px;
}
@media (min-width: 721px) { :root { --cedar-bar-h: 73px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--peony-ink);
  background: var(--wheat-bg);
  line-height: 1.62;
  font-size: 1.02rem;
}
img { max-width: 100%; display: block; }
a { color: var(--mast); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mast-deep); }
.peony-bound { max-width: var(--indigo-limit); margin: 0 auto; padding: 0 20px; }

/* Header */
header.dune-headband {
  background: var(--bilge);
  color: var(--brisk-white);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 0 var(--seaglass);
}
header.dune-headband .alpha-sill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
  max-width: var(--indigo-limit);
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}
header.dune-headband a { text-decoration: none; }
header.dune-headband .slate-escutcheon {
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--brisk-white);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0.01em;
}
header.dune-headband .slate-escutcheon span { color: var(--seaglass); }
.plain-cartouche { width: 32px; height: 32px; border-radius: 50%; display: block; flex-shrink: 0; }
header.dune-headband nav { display: flex; gap: 18px; flex-wrap: wrap; }
header.dune-headband nav a { color: #ece4f2; font-size: 0.93rem; }
header.dune-headband nav a:hover { color: var(--brisk-white); text-decoration: underline; }
header.dune-headband .amber-reach-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  background: var(--mast);
  color: var(--brisk-white);
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 700;
}
header.dune-headband .amber-reach-btn:hover { background: var(--mast-deep); }
@media (min-width: 821px) and (max-width: 1100px) {
  header.dune-headband nav { order: 3; flex: 1 0 100%; justify-content: center; margin-top: 2px; }
}

/* Hero */
.sheer-banner {
  background: linear-gradient(115deg, var(--bilge) 0%, var(--bilge) 60%, var(--keelson) 100%);
  color: var(--brisk-white);
  padding: 48px 20px 42px;
}
.sheer-banner .peony-bound { display: flex; flex-direction: column; gap: 14px; }
.sheer-banner .trowel-strapline {
  display: inline-block;
  background: var(--seaglass);
  color: var(--peony-ink);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: fit-content;
}
.sheer-banner h1 { font-size: 2.2rem; margin: 0; max-width: 820px; line-height: 1.18; }
.sheer-banner p.thicket-blurb { font-size: 1.1rem; color: #ece4f2; max-width: 660px; margin: 0; }
.sheer-banner .subtle-button-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.sheer-banner .ivy-apostil { font-size: 0.9rem; color: #ece4f2; margin: 0; }
.sheer-banner a:not(.lyric-striker) { color: var(--brisk-white); }
.lyric-striker {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}
.lyric-striker.rapid-principal { background: var(--mast); color: var(--brisk-white); }
.lyric-striker.rapid-principal:hover { background: var(--mast-deep); color: var(--brisk-white); }
.lyric-striker.juniper-unfilled { background: transparent; color: var(--brisk-white); border: 2px solid rgba(255,255,255,0.6); }
.lyric-striker.juniper-unfilled:hover { background: rgba(255,255,255,0.12); color: var(--brisk-white); }

/* Homepage hero over a photo. The scrim takes the chrome's own RGB channels. */
.sheer-banner.hatch-photo-led {
  background-image:
    linear-gradient(90deg, rgba(var(--lagoon-tint-over), 0.93) 0%, rgba(var(--lagoon-tint-over), 0.8) 42%, rgba(var(--lagoon-tint-over), 0.3) 72%, rgba(var(--lagoon-tint-over), 0.05) 100%),
    url('/images/hero-roofing-photo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 500px;
  display: flex;
  align-items: center;
  padding: 54px 20px;
}
@media (max-width: 820px) {
  .sheer-banner.hatch-photo-led {
    background-image:
      linear-gradient(180deg, rgba(var(--lagoon-tint-over), 0.92) 0%, rgba(var(--lagoon-tint-over), 0.85) 60%, rgba(var(--lagoon-tint-over), 0.7) 100%),
      url('/images/hero-roofing-photo-mobile.jpg');
    min-height: 430px;
  }
  .sheer-banner h1 { font-size: 1.7rem; }
  header.dune-headband .alpha-sill { justify-content: center; text-align: center; }
}

/* Sections */
section { padding: 44px 20px; }
section.trowel-contrast-band { background: var(--brisk-white); border-top: 1px solid var(--echo-divide); border-bottom: 1px solid var(--echo-divide); }
.linen-band-tag {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.74rem;
  color: var(--mast-deep);
  font-weight: 700;
  margin-bottom: 6px;
}
h2 { font-size: 1.55rem; margin: 0 0 16px; color: var(--bilge); line-height: 1.25; }
h3 { font-size: 1.1rem; margin: 0 0 8px; color: var(--bilge); }
h2.tier-two { font-size: 1.1rem; margin: 0 0 8px; color: var(--bilge); }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
.readable { max-width: 760px; }
ul.plain, ol.plain { margin: 0 0 14px; padding-left: 22px; }
ul.plain li, ol.plain li { margin-bottom: 6px; }

/* Grid cards */
.cliff-panels { display: grid; gap: 16px; }
.cliff-panels.wave-trisect { grid-template-columns: repeat(3, 1fr); }
.cliff-panels.coral-twin { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .cliff-panels.wave-trisect, .cliff-panels.coral-twin { grid-template-columns: 1fr; } }
.sigma-panel {
  background: var(--brisk-white);
  border: 1px solid var(--echo-divide);
  border-left: 4px solid var(--keelson);
  border-radius: var(--poppy-corner);
  padding: 16px 18px;
}
.sigma-panel p { color: var(--zinnia-muted); margin: 6px 0 0; font-size: 0.95rem; }
.sigma-panel h3 a { text-decoration: none; }
.sigma-panel h3 a:hover { text-decoration: underline; }

/* The jurisdiction prompt: two large buttons that jump to the two halves of the
   area list. Sits directly under the homepage hero. */
.county-switch { background: var(--brisk-white); border-bottom: 1px solid var(--echo-divide); padding: 30px 20px; }
.county-switch .peony-bound { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 18px; align-items: stretch; }
.county-switch h2 { font-size: 1.3rem; margin: 0 0 6px; }
.county-switch p { color: var(--zinnia-muted); font-size: 0.95rem; margin: 0; }
.county-switch a.side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 18px 20px;
  border-radius: var(--poppy-corner);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.12rem;
}
.county-switch a.side small { font-weight: 400; font-size: 0.88rem; }
.county-switch a.side.galveston { background: var(--bilge); color: var(--brisk-white); }
.county-switch a.side.galveston small { color: #ece4f2; }
.county-switch a.side.harris { background: var(--wheat-bg); color: var(--bilge); border: 2px solid var(--keelson); }
.county-switch a.side.harris small { color: var(--zinnia-muted); }
.county-switch a.side:hover { filter: brightness(1.08); }
@media (max-width: 820px) { .county-switch .peony-bound { grid-template-columns: 1fr; } }

/* Roofing and siding side by side: two three-card groups that read as six
   across on a wide screen. */
.service-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.service-pair > div > h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mast-deep); margin-bottom: 10px; }
.service-pair .cliff-panels.wave-trisect { gap: 12px; }
.service-pair .sigma-panel { padding: 14px 14px; }
.service-pair .sigma-panel h3 { font-size: 1rem; }
.service-pair .sigma-panel p { font-size: 0.88rem; }
@media (max-width: 1000px) { .service-pair { grid-template-columns: 1fr; } }

/* A single dated callout, set off by a rule and the highlight tint. */
.dated-callout {
  background: var(--seaglass);
  color: var(--peony-ink);
  border-radius: var(--poppy-corner);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 20px;
  align-items: start;
}
.dated-callout .stamp { font-weight: 700; font-size: 1.05rem; line-height: 1.3; border-right: 2px solid var(--bilge); padding-right: 16px; }
.dated-callout .stamp span { display: block; font-size: 2rem; letter-spacing: -0.01em; }
.dated-callout p { margin: 0 0 10px; }
.dated-callout p:last-child { margin: 0; }
.dated-callout a { color: var(--peony-ink); }
@media (max-width: 720px) {
  .dated-callout { grid-template-columns: 1fr; }
  .dated-callout .stamp { border-right: 0; border-bottom: 2px solid var(--bilge); padding: 0 0 10px; }
}

/* Area list split by county. */
.county-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.county-columns > div { background: var(--brisk-white); border: 1px solid var(--echo-divide); border-radius: var(--poppy-corner); padding: 18px 20px; scroll-margin-top: 90px; }
.county-columns > div.galveston { border-top: 5px solid var(--bilge); }
.county-columns > div.harris { border-top: 5px solid var(--seaglass); }
.county-columns h3 { margin-bottom: 4px; }
.county-columns .rule-note { font-size: 0.9rem; color: var(--zinnia-muted); margin: 0 0 12px; }
@media (max-width: 720px) { .county-columns { grid-template-columns: 1fr; } }

/* Area links */
.amber-locales { display: flex; flex-wrap: wrap; gap: 8px; }
.amber-locales a {
  background: var(--wheat-bg);
  border: 1px solid var(--echo-divide);
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--bilge);
  font-size: 0.92rem;
  text-decoration: none;
}
.amber-locales a:hover { border-color: var(--mast); }

/* Numbered FAQ list. Questions are headings, answers are always visible. */
ol.asked { counter-reset: q; list-style: none; padding: 0; margin: 0; }
ol.asked > li { counter-increment: q; position: relative; padding: 0 0 20px 48px; margin: 0 0 20px; border-bottom: 1px solid var(--echo-divide); }
ol.asked > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
ol.asked > li::before {
  content: counter(q);
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bilge);
  color: var(--brisk-white);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
ol.asked h3 { margin: 4px 0 8px; font-size: 1.06rem; }
ol.asked p { color: var(--zinnia-muted); }

/* Side-by-side rule table */
.opal-table-pan { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 8px; }
table.rulesheet { border-collapse: collapse; width: 100%; min-width: 540px; font-size: 0.93rem; background: var(--brisk-white); }
table.rulesheet th, table.rulesheet td { border: 1px solid var(--echo-divide); padding: 9px 12px; text-align: left; vertical-align: top; }
table.rulesheet th { background: #efe8f5; color: var(--bilge); font-weight: 700; }
table.rulesheet caption { caption-side: bottom; text-align: left; font-size: 0.82rem; color: var(--zinnia-muted); padding-top: 8px; }

/* A first-screen statement of which rule applies to the page's city. */
.rule-flag {
  border-left: 5px solid var(--bilge);
  background: var(--brisk-white);
  padding: 12px 16px;
  border-radius: 0 var(--poppy-corner) var(--poppy-corner) 0;
  font-size: 0.97rem;
  margin: 0;
}
.rule-flag.harris { border-left-color: var(--seaglass); }
.rule-flag strong { color: var(--bilge); }

/* Sticky call bar, visible at every width */
.flat-clingbar {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--mast-deep);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
  gap: 10px;
  justify-content: center;
}
.flat-clingbar-inner { display: flex; gap: 10px; width: 100%; max-width: var(--indigo-limit); margin: 0 auto; }
.flat-clingbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  text-align: center;
  padding: 11px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}
.flat-clingbar .domino-ico-phone { flex: none; }
.flat-clingbar-call { flex: 3; background: var(--mast); color: var(--brisk-white); }
.flat-clingbar-quote { flex: 2; background: transparent; color: var(--brisk-white); border: 1px solid rgba(255,255,255,0.5); }
.flat-clingbar-call:hover { background: var(--bilge); color: var(--brisk-white); }
.flat-clingbar-quote:hover { background: rgba(255,255,255,0.12); color: var(--brisk-white); }
.flat-clingbar .humble-dock-note { display: none; }
@media (min-width: 580px) { .flat-clingbar .humble-dock-note { display: inline; } }
@media (min-width: 721px) {
  .flat-clingbar-inner { justify-content: center; }
  .flat-clingbar a { flex: 0 0 auto; padding: 11px 24px; font-size: 1rem; }
}
body { padding-bottom: var(--cedar-bar-h); }

/* CTA band */
.upper-coda { background: var(--bilge); color: var(--brisk-white); text-align: center; padding: 44px 20px; }
.upper-coda h2 { color: var(--brisk-white); }
.upper-coda p { color: #ece4f2; margin-bottom: 18px; }
.upper-coda .lyric-striker + .lyric-striker { margin-left: 10px; }

/* Contact form */
form.arrow-canvass { display: grid; gap: 12px; max-width: 480px; }
form.arrow-canvass label { font-size: 0.88rem; font-weight: 600; color: var(--bilge); display: block; margin-bottom: 4px; }
form.arrow-canvass input, form.arrow-canvass select, form.arrow-canvass textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #cfc3da;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--brisk-white);
}
form.arrow-canvass .whistle-small-note { font-size: 0.78rem; color: var(--zinnia-muted); }
form.arrow-canvass .outer-locale-note { position: absolute; left: -9999px; top: -9999px; }
form.arrow-canvass button { border: 0; cursor: pointer; font-family: inherit; }
form.arrow-canvass button[disabled] { opacity: 0.6; cursor: not-allowed; }
.cameo-feedback { margin-top: 12px; padding: 11px 14px; border-radius: 6px; font-size: 0.9rem; display: none; }
.cameo-feedback.visible { display: block; }
.cameo-feedback.success { background: #e4f2ea; color: #1f5c3a; }
.cameo-feedback.error { background: #fbe9e7; color: #a1261d; }

/* Breadcrumb */
.pennant-ariadne { font-size: 0.85rem; color: var(--zinnia-muted); padding: 14px 20px 0; max-width: var(--indigo-limit); margin: 0 auto; }
.pennant-ariadne a { color: var(--zinnia-muted); }

/* Footer */
footer.dune-headband { background: var(--mast-deep); color: #d8cbe3; padding: 40px 20px 24px; font-size: 0.9rem; }
footer.dune-headband .peony-bound { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
footer.dune-headband h2 { color: var(--brisk-white); font-size: 0.95rem; margin: 0 0 10px; }
footer.dune-headband ul { list-style: none; padding: 0; margin: 0; }
footer.dune-headband li { margin-bottom: 6px; }
footer.dune-headband a { color: #efe8f5; text-decoration: none; }
footer.dune-headband a:hover { text-decoration: underline; color: var(--brisk-white); }
footer.dune-headband .facet-undercarriage {
  max-width: var(--indigo-limit);
  margin: 24px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 720px) { footer.dune-headband .peony-bound { grid-template-columns: 1fr 1fr; } }

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

/* Work photos: one documentary shot per service page, between two sections.
   The width cap keeps an unclassed figure from rendering full-bleed. */
.fair-record-shot { max-width: var(--indigo-limit); margin: 0 auto; padding: 30px 20px; }
.fair-record-shot img {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--poppy-corner);
}

/* Homepage work strip: a two-row tile of twelve thumbnails. */
.loyal-gallery-band .russet-plates { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.loyal-gallery-band img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
  background: var(--brisk-white);
}
@media (max-width: 900px) { .loyal-gallery-band .russet-plates { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .loyal-gallery-band .russet-plates { grid-template-columns: repeat(2, 1fr); } }

/* Reviews: server-gated partial, off until real reviews exist. */
.ferry-accounts .beam-commendation { border-left-color: var(--seaglass); }
.thyme-tally { color: #8a6d00; letter-spacing: 0.1em; margin: 0 0 8px; }
.drift-source-name { color: var(--zinnia-muted); font-size: 0.9rem; margin: 8px 0 0; }