/* The Colorado Roofing Company site stylesheet. The structural rules come
   first (mobile-first: designed at phone width, min-width queries add the
   tablet/desktop layout), then the "Skin" section sets the palette, type and
   the storm atmosphere (rain overlay, sunny-sky heroes). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text, #1a2233);
  background: var(--c-bg, #fff);
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--f-head, inherit); line-height: 1.15; margin: 0 0 .6em; color: var(--c-head, inherit); }
h1 { font-size: clamp(1.75rem, 6vw, 3rem); }
h2 { font-size: clamp(1.4rem, 4.5vw, 2.1rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; }
a { color: var(--c-link, var(--c-primary, #06468b)); }
ul, ol { padding-left: 1.2em; }
blockquote { margin: 0 0 .75em; }
figure { margin: 0; }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 1.1rem; }
.narrow { max-width: 46rem; }
.narrow-wrap { max-width: 46rem; margin-left: auto; margin-right: auto; }
.container.narrow { margin: 0 auto; }
.center { text-align: center; }
.center .btn { margin-top: .35rem; }
.muted { color: var(--c-muted, #5a657a); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-accent, #cb1626);
  margin-bottom: .75rem;
}
.lead { font-size: 1.15rem; font-weight: 500; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: .8rem 1.4rem;
  border-radius: var(--radius-btn, 8px);
  font-weight: 700;
  font-family: var(--f-body);
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--c-primary, #cb1626); color: var(--c-primary-text, #fff); box-shadow: var(--shadow-btn, 0 4px 14px rgba(0,0,0,.18)); }
.btn--secondary { background: var(--c-navy, #06468b); color: #fff; }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--outline { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.65); }
.btn--lg { padding: 1rem 1.7rem; font-size: 1.05rem; }
.btn__small { display: block; font-size: .72rem; font-weight: 600; opacity: .85; letter-spacing: .06em; text-transform: uppercase; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; }
.btn-row--center { justify-content: center; }
.btn-row .btn { flex: 1 1 auto; min-width: 12rem; }
@media (min-width: 640px) { .btn-row .btn { flex: 0 1 auto; } }

/* Secondary actions are links, not buttons (one primary CTA style per page). */
.textlink {
  font-weight: 700;
  color: var(--c-link, var(--c-primary, #06468b));
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1.5px;
}
.textlink::after { content: " →"; }
.textlink--ondark { color: #fff; }
.cta-phone { margin: 0; font-weight: 600; }
.cta-phone a { font-weight: 800; white-space: nowrap; text-decoration: none; color: inherit; }
.cta-phone a:hover { text-decoration: underline; }
.cta-phone--big a { font-size: 1.25rem; }

/* --- Announcement bar (red, above the header; string in content.ts) ------ */
.alert-banner {
  background: var(--c-banner-bg, #8a1220);
  color: var(--c-banner-text, #fff);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.45;
  padding: .55rem 0;
  text-align: center;
}
.alert-banner__tel { color: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; }
.alert-banner__tel:hover, .alert-banner__tel:focus-visible { text-decoration: underline; }

/* --- Header ------------------------------------------------------------- */
.site-header {
  background: var(--c-header-bg, #fff);
  color: var(--c-header-text, #1a2233);
  position: sticky;
  top: 0;
  z-index: 60;
  box-shadow: var(--shadow-header, 0 1px 8px rgba(10,20,40,.08));
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; padding-top: .55rem; padding-bottom: .55rem; }
/* Nav logo (692x120 file, ratio 5.766). It is the one item in the header
   row that may shrink: its flex-basis is the target width (323px = 56px
   tall below 1024, 346px = 60px tall from 1024) and it gives way only when
   the row is full, so the header never wraps or overlaps. On a phone that
   means as tall as the row allows beside the menu toggle (39px at 320,
   48.5px at 375, 56px from 418); from 1024 to about 1100 it runs 46.6px
   to 60px while the nav, Call Now and the button share the row. */
.site-header__logo { flex: 0 1 323px; min-width: 0; }
.site-header__logo img { width: 100%; height: auto; }
.site-nav, .site-header__call, .site-header__cta, .site-header__toggle { flex-shrink: 0; }
/* Header button: compact, never moves (no hover lift, no settle). Hidden on
   a phone, where the sticky bar and the mobile menu carry it. */
.site-header__cta {
  display: none;
  margin-left: auto;
  padding: .6rem 1.1rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: none;
}
.site-header__cta:hover { transform: none; filter: brightness(1.07); }
.site-header__cta-short { display: none; }
@media (min-width: 768px) {
  .site-header__cta { display: inline-block; }
  .site-header__cta + .site-header__toggle { margin-left: 0; }
}
.site-nav { display: none; }
.site-header__call {
  margin-left: auto;
  text-decoration: none;
  color: inherit;
  text-align: right;
  line-height: 1.15;
  display: none;
}
.site-header__call-label { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-accent, #cb1626); font-weight: 700; }
.site-header__call-num { font-weight: 800; font-size: 1.3rem; white-space: nowrap; }
.site-header__toggle {
  margin-left: auto;
  width: 44px; height: 40px;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; align-items: center;
  background: none; border: 0; cursor: pointer; padding: 0; color: inherit;
}
.site-header__toggle span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

.mobile-menu { background: var(--c-header-bg, #fff); border-top: 1px solid var(--c-border, #e3e8f0); }
.mobile-menu ul { list-style: none; margin: 0; padding: .4rem 1.1rem 1rem; }
.mobile-menu a {
  display: block; padding: .7rem .2rem; text-decoration: none;
  color: inherit; font-weight: 600; font-size: 1.05rem;
  border-bottom: 1px solid var(--c-border, #e3e8f0);
}
.mobile-menu__call { color: var(--c-accent, #cb1626) !important; }
/* Yellow button, first item in the menu on a phone (the header shows it
   from 768px, so it is hidden here from there up). */
.mobile-menu__cta-item { padding: .6rem 0 .5rem; border-bottom: 1px solid var(--c-border, #e3e8f0); }
.mobile-menu a.mobile-menu__cta { padding: .8rem 1rem; text-align: center; color: var(--c-primary-text, #fff); border: 0; }
@media (min-width: 768px) { .mobile-menu__cta-item { display: none; } }

/* Desktop row: logo, nav, Call Now, yellow button, inside the same 1140px
   container as the page content, so the logo's left edge and the button's
   right edge line up with the content below. To fit one row in that column
   the button uses the short label at every desktop width and the gaps are
   a little tighter (tighter again below 1140, where the column is the
   viewport); the nav font and the Call Now sizes are not reduced. What is
   left over is the logo's: 61px fits from 1140 up, so it is set to 60px
   and the spare 6px sits before Call Now. */
@media (min-width: 1024px) {
  .site-header__inner { gap: .9rem; }
  .site-header__logo { flex-basis: 346px; }
  .site-nav { display: block; }
  .site-nav ul { display: flex; gap: .8rem; list-style: none; margin: 0; padding: 0; }
  .site-nav a { text-decoration: none; color: inherit; font-weight: 600; font-size: .92rem; white-space: nowrap; padding: .3rem 0; border-bottom: 2px solid transparent; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--c-accent, #cb1626); }
  .site-header__call { display: block; }
  .site-header__cta { margin-left: 0; padding: .55rem .85rem; font-size: .95rem; }
  .site-header__cta-full { display: none; }
  .site-header__cta-short { display: inline; }
  .site-header__toggle, .mobile-menu { display: none; }
}
@media (min-width: 1140px) {
  .site-header__inner { gap: 1.1rem; }
  .site-nav ul { gap: 1rem; }
  .site-header__cta { padding: .6rem 1rem; font-size: 1rem; }
}

/* --- Sections ----------------------------------------------------------- */
.section { padding: 2.75rem 0; }
.section--tint { background: var(--c-tint, #f5f7fa); }
.section--panel { background: var(--c-panel, #f5f7fa); }
.section--navy { background: var(--c-navy, #06468b); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section__title { text-align: left; margin-bottom: .5rem; }
.section__sub { color: var(--c-muted, #5a657a); max-width: 46rem; margin-bottom: 1.75rem; }
.section--navy .section__sub { color: rgba(255,255,255,.8); }
.section__sub.center, .section__title.center { margin-left: auto; margin-right: auto; text-align: center; }
@media (min-width: 768px) { .section { padding: 4rem 0; } }
.section--slim { padding-top: 0; }
.section--flush-top { padding-top: 0; }

/* --- Cards / grids ------------------------------------------------------ */
.cardgrid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.25rem 0; }
@media (min-width: 640px) { .cardgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cardgrid { grid-template-columns: repeat(4, 1fr); } .cardgrid--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e3e8f0);
  border-radius: var(--radius-card, 12px);
  padding: 1.25rem;
  box-shadow: var(--shadow-card, none);
}
/* Anchored card (footer links to services/#...): stop below the sticky
   header. --header-h is set from the header's rendered height by the
   inline script in the layout; 80px covers the tallest header without it. */
.card { scroll-margin-top: calc(var(--header-h, 80px) + .5rem); }
.card h3 { margin-bottom: .4rem; color: var(--c-head, inherit); }
.card p { margin: 0; font-size: .95rem; color: var(--c-muted, #5a657a); }
/* A card that holds a bullet list instead of a blurb (Services page,
   "Exterior Services", the seventh card). Same card; it spans two columns
   from 640px, bullets in two columns, so seven cards leave no hole: one
   full last row in the 2-column grid, 4 + (1 + 1 + 2) in the 4-column one. */
.card__list { margin: 0; padding-left: 1.1em; font-size: .95rem; color: var(--c-muted, #5a657a); }
.card__list li { padding: .12rem 0; break-inside: avoid; }
@media (min-width: 640px) {
  .card--wide { grid-column: span 2; }
  .card--wide .card__list { columns: 2; column-gap: 2rem; }
}

.checkgrid { list-style: none; padding: 0; display: grid; gap: .7rem; grid-template-columns: 1fr; margin: 1.25rem 0; }
@media (min-width: 640px) { .checkgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .checkgrid { grid-template-columns: 1fr 1fr 1fr; } .checkgrid--links { grid-template-columns: repeat(4, 1fr); } }
.checkgrid li {
  display: flex; gap: .7rem; align-items: center;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e3e8f0);
  border-radius: var(--radius-card, 12px);
  padding: .85rem 1rem;
  font-weight: 600;
}
.checkgrid__mark {
  flex-shrink: 0;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-check-bg, #e8f0e9); color: var(--c-check, #256833);
  font-weight: 800; font-size: .9rem;
}

/* Why-choose-us items as link cards (the <a> is the card; the li is bare). */
.checkgrid--links li { padding: 0; border: 0; background: none; display: block; }
.checkgrid--links a {
  display: flex; gap: .7rem; align-items: center; height: 100%;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e3e8f0);
  border-radius: var(--radius-card, 12px);
  padding: .85rem 1rem;
  color: inherit; text-decoration: none; font-weight: 600;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.checkgrid--links a::after { content: "›"; margin-left: auto; padding-left: .5rem; font-size: 1.4rem; line-height: 1; color: var(--c-muted); transition: color .15s ease; }
.checkgrid--links a:hover::after, .checkgrid--links a:focus-visible::after { color: var(--c-link, #06468b); }
.checkgrid--links a:hover, .checkgrid--links a:focus-visible { border-color: var(--c-logo-blue, #06468b); background: var(--c-tint, #f5f7fa); transform: translateY(-2px); }
.checkgrid--links a:focus-visible { outline: 2px solid var(--c-link, #06468b); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .checkgrid--links a { transition: none; } .checkgrid--links a:hover { transform: none; } }

/* --- Steps -------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 1.4rem; }
.steps li { display: flex; gap: 1rem; align-items: flex-start; }
.steps h2, .steps h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.steps p { margin: 0; color: var(--c-muted, #5a657a); }
.steps__num {
  flex-shrink: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary, #cb1626); color: var(--c-primary-text, #fff);
  font-weight: 800; font-family: var(--f-head);
}
.steps--row { grid-template-columns: 1fr; }
.steps--row li { flex-direction: column; }
@media (min-width: 768px) { .steps--row { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.steps--compact { gap: .9rem; grid-template-columns: 1fr 1fr; }
.steps--compact li { flex-direction: row; align-items: center; gap: .7rem; }
.steps--compact h3 { margin: 0; font-size: 1rem; }
.steps--compact .steps__num { width: 2rem; height: 2rem; font-size: .9rem; }
@media (min-width: 768px) { .steps--compact { grid-template-columns: repeat(3, 1fr); gap: 1rem 2rem; } }
.section--navy .steps p { color: rgba(255,255,255,.8); }
.section--navy .steps__num { background: #fff; color: var(--c-navy, #06468b); }

/* --- Panels / lists ------------------------------------------------------ */
.twocol { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0; }
@media (min-width: 768px) { .twocol { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.panel {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e3e8f0);
  border-radius: var(--radius-card, 12px);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.panel h2 { font-size: 1.25rem; }
.panel--accent { border-left: 5px solid var(--c-accent, #cb1626); }
.ticklist { list-style: none; padding: 0; margin: 0; }
.ticklist li { padding: .45rem 0 .45rem 1.7rem; position: relative; }
.ticklist li::before { content: "✓"; position: absolute; left: 0; color: var(--c-check, #256833); font-weight: 800; }
.asklist { margin: 0 0 1em; padding-left: 1.4em; }
.asklist li { padding: .3rem 0; font-weight: 600; }
.minilist { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.minilist li { padding: .4rem 0 .4rem 1.5rem; position: relative; }
.minilist li::before { content: "—"; position: absolute; left: 0; color: var(--c-accent, #cb1626); }

.pointlist { display: grid; gap: 1.75rem; margin: 2rem 0; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pointlist { grid-template-columns: 1fr 1fr; gap: 2.25rem; } }
.pointlist__item h2 { font-size: 1.25rem; margin-bottom: .35rem; }
.pointlist__item p { margin: 0; color: var(--c-muted, #5a657a); }
.pointlist__photo { margin: 0; align-self: center; }
.pointlist__photo img { border-radius: var(--radius-card, 12px); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-card); }

/* --- Reviews ------------------------------------------------------------- */
.review {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e3e8f0);
  border-radius: var(--radius-card, 12px);
  padding: 1.4rem;
  display: flex; flex-direction: column; gap: .5rem;
  box-shadow: var(--shadow-card, none);
}
.review__stars { color: var(--c-star, #e8a512); letter-spacing: .12em; font-size: 1.05rem; }
.review blockquote { font-size: 1rem; margin: 0; flex: 1; }
.review figcaption { font-size: .88rem; color: var(--c-muted, #5a657a); font-weight: 600; }
.reviewsgrid { margin-bottom: 1.5rem; }

/* --- Towns -------------------------------------------------------------- */
.towns { list-style: none; padding: 0; margin: 1.25rem 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.towns li {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e3e8f0);
  border-radius: 999px;
  padding: .35rem .95rem;
  font-size: .9rem; font-weight: 600;
}

/* --- Cert bar ------------------------------------------------------------ */
.certbar { background: var(--c-certbar-bg, var(--c-navy, #06468b)); color: var(--c-certbar-text, #fff); padding: 1.4rem 0; }
.certbar__row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .certbar__row { grid-template-columns: repeat(4, 1fr); } }
.certbar__item { text-align: center; }
.certbar__item strong { display: block; font-family: var(--f-head); font-size: 1.02rem; letter-spacing: .02em; }
.certbar__item span { font-size: .8rem; opacity: .85; }
.certbar__row--page { color: var(--c-text); margin: 1rem 0 0; }
.certbar__row--page .certbar__item { background: var(--c-surface, #fff); border: 1px solid var(--c-border, #e3e8f0); border-radius: var(--radius-card, 12px); padding: 1rem; }

/* --- Page hero -----------------------------------------------------------
   One hero for every interior page: the same fixed height at each
   breakpoint, content vertically centered: 260px phone and tablet, 280px
   desktop. 260px is the tallest phone content (Contact: headline, sub and
   the Front Range line, 226px) plus 1rem of padding top and bottom, so all
   six pages share one height. The light sunny-sky treatment is the default
   (see the Skin section); photo heroes lay it over the photo, and Why
   Choose Us swaps in the blue tint. */
.page-hero {
  background: var(--c-pagehero-bg, var(--c-tint, #f5f7fa));
  padding: 1rem 0;
  min-height: 260px;
  display: flex; align-items: center;
}
@media (min-width: 1024px) { .page-hero { min-height: 280px; } }
.page-hero > .container { width: 100%; }
/* Photo heroes: the <img> is a cover layer under a tinted overlay so the
   page's banner treatment stays on top of the photo (PageHero `image`
   prop). Eager-loaded, sized by attributes: no layout shift. */
.page-hero--photo { position: relative; overflow: hidden; }
.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; z-index: 0; }
.page-hero--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 24, 52, .94) 0%, rgba(6, 70, 139, .78) 45%, rgba(8, 24, 52, .45) 100%); }
.page-hero--photo .container { position: relative; z-index: 2; }
@media (min-width: 1024px) { .page-hero__img { object-position: 50% 28%; } }
.page-hero h1 { margin-bottom: .3rem; }
.page-hero .lead { color: var(--c-muted, #5a657a); max-width: 46rem; margin: 0; }
.page-hero .lead a { color: inherit; font-weight: 700; }
.page-hero__note { margin-top: .5rem; font-weight: 400; }

/* --- About / Owner -------------------------------------------------------- */
.about-kurt__grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 768px) { .about-kurt__grid { grid-template-columns: 280px 1fr; gap: 3rem; } }
.about-kurt__photo img {
  border-radius: var(--radius-card, 12px);
  width: 100%; max-width: 300px;
  box-shadow: 0 10px 30px rgba(10,20,40,.18);
}

/* Owner portrait */
.owner-photo {
  border-radius: var(--radius-card, 12px);
  width: 100%; max-width: 300px;
  box-shadow: 0 10px 30px rgba(10,20,40,.18);
}

/* --- Whole-house story (Why Choose Us) ---------------------------------- */
.story__body { border-left: 4px solid var(--c-logo-blue, #06468b); padding-left: 1.1rem; margin: .5rem 0 .75rem; }
.story__body p { font-size: 1.05rem; }
.story__body p:last-child { margin-bottom: 0; }
.story__by { color: var(--c-muted); font-weight: 600; margin: 0; }
.story__grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .story__grid { grid-template-columns: 1.15fr 1fr; gap: 3rem; } }
.story__photo { margin: 0; }
.story__photo img { border-radius: var(--radius-card, 12px); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-card); }
.story__photo figcaption { font-size: .85rem; color: var(--c-muted); margin-top: .6rem; }
.about-kurt__more { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--c-border); }
@media (min-width: 768px) { .about-kurt__more { grid-template-columns: 240px 1fr; gap: 3rem; } }
.about-kurt__rafters { margin: 0; }
.about-kurt__rafters img { border-radius: var(--radius-card, 12px); width: 100%; max-width: 240px; aspect-ratio: 1; object-fit: cover; box-shadow: var(--shadow-card); }
.built-tru { margin: 0; font-size: 1.05rem; }

/* --- Quote form ----------------------------------------------------------- */
.quote-form {
  background: var(--c-form-bg, var(--c-surface, #fff));
  border: 1px solid var(--c-border, #e3e8f0);
  border-radius: var(--radius-card, 12px);
  padding: 1.5rem;
  box-shadow: var(--shadow-card, 0 8px 30px rgba(10,20,40,.08));
  color: var(--c-form-text, var(--c-text, #1a2233));
}
.quote-form__heading { margin-bottom: 1rem; }
.quote-form__grid { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .quote-form__grid { grid-template-columns: 1fr 1fr; }
  .quote-form__wide { grid-column: 1 / -1; }
}
.quote-form label { display: block; font-size: .85rem; font-weight: 600; }
.quote-form label span { display: block; margin-bottom: .3rem; }
.quote-form label em { font-weight: 400; color: var(--c-muted, #5a657a); font-style: normal; }
.quote-form input, .quote-form select, .quote-form textarea {
  width: 100%;
  padding: .7rem .8rem;
  border: 1.5px solid var(--c-border, #cfd8e3);
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
  background: var(--c-input-bg, #fff);
  color: inherit;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: 2px solid var(--c-primary, #cb1626);
  outline-offset: 1px;
  border-color: transparent;
}
.quote-form input[type="file"] { padding: .55rem .6rem; font-size: .9rem; }
.quote-form__submit { width: 100%; margin-top: 1.1rem; }
.quote-form__done { margin: 1rem 0 0; font-weight: 600; color: var(--c-check, #256833); }
.quote-form__error { margin: 1rem 0 0; font-weight: 600; color: var(--c-primary, #cb1626); }
.quote-form__photonote { display: block; margin-top: .4rem; font-weight: 400; color: var(--c-muted, #5a657a); }
.quote-form__photonote[hidden] { display: none; }
/* Honeypot field: off-canvas, never shown, never focusable. */
.quote-form__hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* --- 404 page ------------------------------------------------------------- */
.notfound__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; font-size: 1.15rem; font-weight: 600; }

/* --- CTA sections --------------------------------------------------------- */
.cta-final { background: var(--c-ctafinal-bg, var(--c-tint, #f5f7fa)); }
.cta-final__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .cta-final__grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.cta-final__phone a { font-weight: 800; font-size: 1.25rem; white-space: nowrap; }
.cta-band { background: var(--c-ctaband-bg, var(--c-navy, #06468b)); color: #fff; padding: 2.75rem 0; }
.cta-band h2 { color: #fff; margin-bottom: .4rem; }
.cta-band__inner { text-align: left; }
.cta-band__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; margin-top: 1rem; }
.cta-band__actions .btn { width: 100%; }
.cta-band .cta-phone a { color: #fff; }
@media (min-width: 640px) { .cta-band__actions .btn { width: auto; } }
@media (min-width: 768px) { .cta-band__actions { flex-direction: row; align-items: center; gap: 1.25rem; } }
@media (min-width: 1024px) {
  .cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
  .cta-band h2 { margin: 0; }
  .cta-band__actions { margin: 0; flex-shrink: 0; }
}
/* No heading (Services): button + phone sit left in the container. */
.cta-band--noheading .cta-band__inner { justify-content: flex-start; }
.cta-band--noheading .cta-band__actions { margin-top: 0; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--c-footer-bg, #0e1b2e); color: var(--c-footer-text, #c8d2e0); padding: 2.75rem 0 1rem; font-size: .92rem; }
.site-footer a { color: inherit; }
.site-footer h3 { color: var(--c-footer-head, #fff); font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.site-footer__grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.2fr .7fr 1fr 1.3fr; gap: 2.5rem; } }
.site-footer__list { list-style: none; padding: 0; margin: 0; }
.site-footer__list li { padding: .18rem 0; }
.site-footer__list a { text-decoration: none; }
.site-footer__list a:hover { text-decoration: underline; }
.site-footer__brand img { height: 44px; width: auto; margin-bottom: .75rem; }
.site-footer__tagline { font-weight: 400; }
.site-footer__contact { font-weight: 700; }
.site-footer__contact a { text-decoration: none; }
.site-footer__towns { font-size: .82rem; line-height: 1.55; opacity: .85; }
.warranties { margin-top: 2rem; margin-bottom: 0; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 2rem; padding-top: 1rem; font-size: .8rem; opacity: .75; }
/* Photo credits (Home only): one quieter line under the copyright. */
.site-footer__privacy { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.site-footer__credits { font-size: .72rem; opacity: .8; margin-top: .35rem; }
.site-footer__credits a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.site-footer__credits a:hover, .site-footer__credits a:focus-visible { opacity: 1; }

/* --- Sticky bar (phone, below 768px) -----------------------------------------
   One fixed bar in two halves: red Tap to Call (tel:) on the left, yellow
   Free Evaluation (contact page) on the right. The header has no room for
   the yellow button at this width, so it lives here. No motion. */
.sticky-bar {
  position: fixed;
  left: .75rem; right: .75rem; bottom: .75rem;
  z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.sticky-bar a {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .9rem .4rem;
  font-weight: 800;
  font-size: 1.05rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.sticky-bar__call { background: var(--c-call-bg, #cb1626); color: #fff; }
.sticky-bar__cta { background: var(--c-primary, #fcd200); color: var(--c-primary-text, #14203a); }
@media (min-width: 768px) { .sticky-bar { display: none; } }
body { padding-bottom: 4.25rem; }
@media (min-width: 768px) { body { padding-bottom: 0; } }

/* --- Before / after slider -------------------------------------------------- */
.ba { max-width: 900px; margin: 0 auto; }
.ba__frame { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-card, 12px); overflow: hidden; box-shadow: 0 12px 40px rgba(10,20,40,.25); }
.ba__after, .ba__before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before-wrap { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; overflow: hidden; }
.ba__before { width: auto; max-width: none; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: #fff; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.ba__handle span {
  background: #fff; color: #1a2233; border-radius: 999px;
  font-size: .8rem; font-weight: 800; padding: .45rem .55rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  white-space: nowrap;
}
.ba__label { position: absolute; top: .75rem; background: rgba(10,14,22,.72); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 6px; }
.ba__label--before { left: .75rem; }
.ba__label--after { right: .75rem; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; touch-action: pan-y; }
.ba__caption { text-align: center; font-size: .85rem; color: var(--c-muted); margin-top: .75rem; }
/* Photo credit links in the caption stay as quiet as the caption text. */
.ba__caption a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.ba__caption a:hover, .ba__caption a:focus-visible { color: var(--c-text, inherit); }

/* --- Contact page ------------------------------------------------------------ */
.contactgrid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .contactgrid { grid-template-columns: 1fr 1.2fr; gap: 3rem; } }
.contactgrid__phone a { font-size: 1.6rem; font-weight: 800; text-decoration: none; }

/* --- Misc --------------------------------------------------------------------- */
.hail-split__grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hail-split__grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.hail-split__media img { border-radius: var(--radius-card, 12px); }
.hail-split__media .ba__frame img { border-radius: 0; }

/* ==========================================================================
   Skin: storm response. Dark, bold, urgency-driven. High contrast, condensed
   display type, storm-amber CTAs.
   ========================================================================== */

:root {
  --f-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", system-ui, sans-serif;

  /* Accent set from the logo. Yellow = primary CTA, red = announcement bar +
     tap-to-call, blue = the mid-page CTA band and every accent edge (card
     tops, review boxes, step numbers, panel edges). One blue only: the logo
     blue #104C90. --c-blue-light is used only where blue TEXT sits on the
     dark background and needs the lift for contrast (links, form focus
     ring). */
  --c-logo-blue: #104C90;
  --c-logo-red: #cb1626;
  --c-logo-yellow: #fcd200;
  --c-blue-light: #6fa8f5;   /* text-on-dark only, never an edge or fill */

  --c-navy: var(--c-logo-blue);
  --c-accent: var(--c-logo-yellow);
  --c-bg: #0d1422;
  --c-surface: #141f33;
  --c-text: #dbe3ee;
  --c-head: #ffffff;
  --c-muted: #93a1b5;
  --c-border: #24365a;
  --c-tint: #0f1a2f;
  --c-panel: #0c1930;
  --c-link: var(--c-blue-light);

  --c-primary: var(--c-logo-yellow);
  --c-primary-text: #14203a;

  --c-banner-bg: var(--c-logo-red);
  --c-banner-text: #fff;
  --c-header-bg: #0a101c;
  --c-header-text: #f2f6fb;
  --c-footer-bg: #070c15;
  --c-footer-text: #9fb0c5;
  --c-footer-head: #ffffff;
  --c-certbar-bg: #0a101c;
  --c-call-bg: var(--c-logo-red);
  --c-star: var(--c-logo-yellow);
  --c-check: #6fdb8b;
  --c-check-bg: #10301c;
  --c-input-bg: #0e1826;
  --c-ctafinal-bg: #0a101c;
  --c-ctaband-bg: var(--c-logo-blue);

  --radius-btn: 6px;
  --radius-card: 10px;
  --shadow-card: 0 4px 18px rgba(0, 0, 0, .35);
  --shadow-btn: 0 6px 18px rgba(252, 210, 0, .3);
}

h1, h2 { text-transform: uppercase; letter-spacing: .015em; }
h1 { font-size: clamp(2rem, 7.5vw, 3.6rem); font-weight: 800; }
.section__title { font-weight: 700; }

/* Hero */
.hero-a { background-size: cover; background-position: center 30%; color: #fff; }
/* Tight padding so the three process cards start high, most of all on a
   phone. */
.hero-a__inner { padding: 1.75rem 1.1rem 2rem; }
@media (min-width: 900px) { .hero-a__inner { padding: 3.5rem 1.1rem 4rem; max-width: 60rem; } }
.hero-a h1 { font-size: clamp(1.55rem, 6.5vw, 2.7rem); }
.hero-a__alert {
  display: inline-block;
  background: rgba(252, 210, 0, .14);
  border: 1px solid rgba(252, 210, 0, .55);
  color: #ffe45c;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
/* Paragraph under the headline: body text, sentence case, white, held to
   a readable line length. */
.hero-a__body { max-width: 40rem; margin: 0; color: #fff; font-size: 1.02rem; }
@media (min-width: 900px) { .hero-a__body { font-size: 1.12rem; } }
.hero-a__ticks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.hero-a__ticks li { font-weight: 600; font-size: .92rem; color: rgba(255,255,255,.9); }
.hero-a__ticks li::before { content: "✓ "; color: var(--c-accent); font-weight: 800; }

/* Storm process band: Inspect / Document / Restore as three static cards.
   Each card shows its name and the full explanation at rest; no expand, no
   script. The band grows to fit the three cards side by side on desktop;
   they stack on mobile. Hover / focus: border + shadow lift and a color
   accent only, never a size change. */
.stormbar { background: var(--c-primary); color: var(--c-primary-text, #181104); padding: 1.25rem 0; position: relative; z-index: 5; }
.stormbar__row { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .stormbar__row { grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; } }
.stepcards { list-style: none; padding: 0; margin: 0; }
.stepcard {
  background: var(--c-surface);             /* same dark navy as the "Why homeowners" link cards */
  color: var(--c-text);
  border: 1px solid var(--c-border);        /* a shade lighter than the card, separates it from the band */
  border-radius: var(--radius-card, 10px);
  padding: .9rem 1rem 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, transform .25s var(--ease-out, ease-out);
}
/* Title row: yellow number badge, then the step name in white. */
.stepcard strong { display: flex; align-items: center; gap: .55rem; color: var(--c-head); font-family: var(--f-head); text-transform: uppercase; font-size: 1.2rem; letter-spacing: .04em; margin-bottom: .35rem; }
.stepcard__num {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-logo-yellow); color: var(--c-primary-text, #14203a);
  font: 700 .95rem/1 var(--f-body); letter-spacing: 0;
}
.stepcard p { margin: 0; font-size: .92rem; line-height: 1.5; }
/* Hover / focus / tap: logo-blue border all round, a touch lighter navy,
   deeper shadow, 4px lift. No size change; the badge stays yellow. */
.stepcard:hover, .stepcard:focus-within, .stepcard:active {
  background: #1b2941;
  border-color: var(--c-logo-blue);
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .stepcard { transition: none; }
  .stepcard:hover, .stepcard:focus-within, .stepcard:active { transform: none; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cards darker; blue top edge (logo blue) on the service and review cards */
.card h3 { text-transform: uppercase; letter-spacing: .03em; }
.card, .review { border-top: 3px solid var(--c-logo-blue); }
.steps__num { background: var(--c-logo-blue); color: #fff; }
.panel--accent { border-left-color: var(--c-logo-blue); }
.certbar__row--page .certbar__item { border-top: 3px solid var(--c-logo-blue); }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--c-logo-yellow); }
.about-kurt__photo img, .owner-photo { box-shadow: 0 0 0 3px var(--c-logo-blue), 0 10px 30px rgba(0,0,0,.4); }

/* Sticky bar more urgent */
.sticky-bar a { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .05em; font-size: 1.15rem; }
@media (max-width: 359px) { .sticky-bar a { font-size: 1.02rem; } }

/* Footer/banner separators */
.mobile-menu a { border-bottom-color: #1d2a3d; }

/* Forms on dark */
.quote-form { border-color: #2b3a50; }
.quote-form input, .quote-form select, .quote-form textarea { border-color: #33445d; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline-color: var(--c-blue-light); }
.quote-form input::placeholder, .quote-form textarea::placeholder { color: #5f7089; }

/* Secondary links on the dark palette */
.textlink { color: #ffe45c; }
.cta-final .cta-phone { color: #fff; }

/* --- Motion --------------------------------------------------------------
   Scroll reveal, restrained: opacity + transform only, once, no library.
   Base.astro adds class "js" to <html> before paint and runs one
   IntersectionObserver that marks every .reveal / .stagger element "is-in"
   the first time 15% of it is in view (then unobserves). .settle elements
   (hero content) are marked is-in two frames after first paint instead.
   Without JS nothing here applies and everything renders visible.
   The reveal itself is a one-shot keyframe animation (not a transition), so
   an element's own hover transitions (e.g. .stepcard) are untouched once it
   is in. .stagger children run 70ms apart via --i on the child (capped at 5
   in the markup); .settle steps are --step apart (90ms Home, 60ms interior).
   Under prefers-reduced-motion everything starts visible, no animation.
   TURN OFF: remove the "reveal" / "stagger" / "settle" classes, or delete
   the observer + settle script in Base.astro together with this block. */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); }
html.js :is(.reveal, .stagger > *, .settle) { opacity: 0; }
html.js :is(.reveal.is-in, .stagger.is-in > *, .settle.is-in) {
  opacity: 1;
  animation: reveal .5s var(--ease-out) backwards;
}
html.js .stagger.is-in > * { animation-delay: calc(var(--i, 0) * 70ms); }
html.js .settle.is-in { animation-delay: calc(100ms + var(--i, 0) * var(--step, 90ms)); }
.page-hero { --step: 60ms; }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  html.js :is(.reveal, .stagger > *, .settle),
  html.js :is(.reveal, .settle).is-in,
  html.js .stagger.is-in > * { opacity: 1; animation: none; }
}

/* --- Rain ----------------------------------------------------------------
   Barely-visible rain over the home hero and the dark panel sections
   (Home.astro adds class "rain" to those sections plus an empty
   <i class="rain__near"> child; never on the form section). Three layers,
   each a tiny inline SVG tile of slanted strokes moved by a transform-only
   animation (compositor: no layout, no paint per frame, no asset request):
     far  (::before)     thin, short streaks, slowest, 320x480 tile
     mid  (::after)      mixed lengths, 360x720 tile
     near (.rain__near)  long + a few thick streaks, fastest, 420x840 tile
   Each loop moves exactly one tile height so every layer is seamless; the
   three tile sizes and speeds are non-commensurate so the composite never
   visibly repeats. Tiles were generated with a seeded script (streaks placed
   irregularly, kept fully inside the tile so nothing is clipped at seams).
   TURN OFF: delete this block, or remove the "rain" class in Home.astro.
   TUNE: per-layer opacity (visibility) and animation duration (speed).
   Reduced-motion users never see it. */
.rain { position: relative; overflow: hidden; isolation: isolate; }
.rain > * { position: relative; z-index: 1; }
.rain::before, .rain::after, .rain > .rain__near {
  content: "";
  position: absolute;
  left: 0; right: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.rain::before {
  top: -480px; height: calc(100% + 480px);
  opacity: 0.09;
  background-size: 320px 480px;
  animation-name: rain-far;
  animation-duration: 2.3s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='480' viewBox='0 0 320 480' fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M296 169l-2.2 18' stroke-width='1.0' opacity='0.36'/%3E%3Cpath d='M116 16l-1.8 15' stroke-width='1.0' opacity='0.59'/%3E%3Cpath d='M221 332l-2.0 16' stroke-width='0.8' opacity='0.65'/%3E%3Cpath d='M152 369l-2.4 20' stroke-width='0.7' opacity='0.55'/%3E%3Cpath d='M29 457l-1.8 15' stroke-width='0.7' opacity='0.68'/%3E%3Cpath d='M247 295l-1.5 13' stroke-width='0.8' opacity='0.58'/%3E%3Cpath d='M241 117l-1.4 11' stroke-width='0.8' opacity='0.65'/%3E%3Cpath d='M199 229l-2.0 17' stroke-width='0.8' opacity='0.5'/%3E%3Cpath d='M128 317l-1.3 11' stroke-width='0.7' opacity='0.42'/%3E%3Cpath d='M33 267l-1.3 11' stroke-width='0.7' opacity='0.55'/%3E%3Cpath d='M97 67l-1.3 11' stroke-width='1.0' opacity='0.4'/%3E%3Cpath d='M292 286l-1.1 9' stroke-width='0.7' opacity='0.53'/%3E%3Cpath d='M196 106l-1.7 14' stroke-width='0.7' opacity='0.62'/%3E%3Cpath d='M157 186l-1.8 15' stroke-width='1.0' opacity='0.43'/%3E%3Cpath d='M246 239l-1.1 9' stroke-width='0.7' opacity='0.55'/%3E%3Cpath d='M47 98l-1.5 13' stroke-width='0.7' opacity='0.38'/%3E%3C/svg%3E");
}
@keyframes rain-far { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 480px, 0); } }
.rain::after {
  top: -720px; height: calc(100% + 720px);
  opacity: 0.1;
  background-size: 360px 720px;
  animation-name: rain-mid;
  animation-duration: 1.75s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='720' viewBox='0 0 360 720' fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M97 406l-3.7 31' stroke-width='1.0' opacity='0.79'/%3E%3Cpath d='M289 137l-4.5 38' stroke-width='1.2' opacity='0.55'/%3E%3Cpath d='M162 336l-2.0 17' stroke-width='1.5' opacity='0.62'/%3E%3Cpath d='M241 272l-3.8 32' stroke-width='1.0' opacity='0.61'/%3E%3Cpath d='M325 254l-4.3 36' stroke-width='1.5' opacity='0.54'/%3E%3Cpath d='M99 245l-4.7 39' stroke-width='1.0' opacity='0.49'/%3E%3Cpath d='M121 322l-3.7 31' stroke-width='1.5' opacity='0.8'/%3E%3Cpath d='M220 159l-2.1 17' stroke-width='1.2' opacity='0.75'/%3E%3Cpath d='M272 388l-3.5 29' stroke-width='1.0' opacity='0.67'/%3E%3Cpath d='M29 489l-5.1 42' stroke-width='1.0' opacity='0.47'/%3E%3Cpath d='M168 53l-4.8 40' stroke-width='1.0' opacity='0.58'/%3E%3Cpath d='M56 87l-4.5 37' stroke-width='1.0' opacity='0.77'/%3E%3Cpath d='M331 17l-3.3 28' stroke-width='1.0' opacity='0.7'/%3E%3C/svg%3E");
}
@keyframes rain-mid { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 720px, 0); } }
.rain .rain__near {
  top: -840px; height: calc(100% + 840px);
  opacity: 0.08;
  background-size: 420px 840px;
  animation-name: rain-near;
  animation-duration: 1.45s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='840' viewBox='0 0 420 840' fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M206 539l-8.4 70' stroke-width='2.4' opacity='0.41'/%3E%3Cpath d='M376 297l-6.3 53' stroke-width='2.0' opacity='0.79'/%3E%3Cpath d='M122 657l-8.5 70' stroke-width='1.2' opacity='0.58'/%3E%3Cpath d='M157 284l-5.1 42' stroke-width='2.4' opacity='0.44'/%3E%3Cpath d='M199 355l-7.8 65' stroke-width='1.6' opacity='0.59'/%3E%3Cpath d='M211 58l-4.6 39' stroke-width='2.4' opacity='0.37'/%3E%3Cpath d='M78 539l-3.9 32' stroke-width='1.2' opacity='0.79'/%3E%3Cpath d='M168 422l-6.5 54' stroke-width='1.6' opacity='0.37'/%3E%3Cpath d='M203 726l-6.9 58' stroke-width='2.0' opacity='0.44'/%3E%3C/svg%3E");
}
@keyframes rain-near { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 840px, 0); } }
@media (prefers-reduced-motion: reduce) {
  .rain::before, .rain::after, .rain > .rain__near { display: none; }
}

/* --- Interior heroes: light sunny sky by default ----------------------------
   Every interior page gets the same warm, light sky in contrast to the dark
   storm hero on the home page. Only the hero band; the rest of the page
   keeps the dark palette. Services lays the sky over its photo as a
   translucent overlay. Why Choose Us is the one exception: its roof-deck
   photo keeps the blue tint. Solid logo blue (--c-logo-blue) is the
   fallback for a no-photo page only if the light tint ever reads flat. */
.page-hero {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 224, 150, .95) 0, rgba(255, 214, 120, .55) 9%, rgba(255, 214, 120, 0) 30%),
    linear-gradient(180deg, #8ec1ec 0%, #c6e1f6 52%, #fff2d8 100%);
  color: #14233a;
}
.page-hero h1 { color: #14233a; }
.page-hero .lead { color: #2f4364; }
.page-hero--photo::before {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 224, 150, .9) 0, rgba(255, 214, 120, .5) 9%, rgba(255, 214, 120, 0) 30%),
    linear-gradient(90deg, rgba(198, 225, 246, .96) 0%, rgba(198, 225, 246, .88) 45%, rgba(255, 242, 216, .55) 100%);
}
body[data-page="services"] .page-hero__img { object-position: 70% 50%; }
/* Why Choose Us: blue tint over the roof-deck photo, white text. */
body[data-page="why-choose-us"] .page-hero { color: #fff; }
body[data-page="why-choose-us"] .page-hero--photo::before { background: linear-gradient(90deg, rgba(8, 24, 52, .94) 0%, rgba(16, 76, 144, .78) 45%, rgba(8, 24, 52, .45) 100%); }
body[data-page="why-choose-us"] .page-hero h1 { color: #fff; }
body[data-page="why-choose-us"] .page-hero .lead { color: rgba(255,255,255,.88); }