/* AGX Superior Roofing. Design spec v1 (agx-design-chat/CHATGPT_DESIGN_SPEC_v1.md).
   Mobile first. No framework. Motion: CSS transitions only, spec section 5. */

:root {
  --color-charcoal: #080a0b;
  --color-charcoal-raised: #101310;
  --color-bone: #f2f0e9;
  --color-warm: #e8e5dc;
  --color-tan: #d8bf98;
  --color-tan-hover: #e4cfae;
  --color-ink: #f7f6f2;
  --color-muted: #9ca3a7;
  --color-light-text: #080a0b;
  --color-light-support: #353a38; /* supporting text on bone/warm; never muted grey on light */
  --color-dark-text: #f7f6f2;

  --font-display: "Oswald", Impact, "Arial Narrow", sans-serif;
  --font-body: "DM Sans", Arial, sans-serif;

  --container-width: 1248px;
  --gutter: 20px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --section-space: 64px;
  --header-h: 68px;
  --ease-standard: cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 600px) { :root { --gutter: 32px; } }
@media (min-width: 1000px) { :root { --gutter: clamp(32px, 4vw, 64px); --section-space: 96px; --header-h: 84px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--color-bone);
  color: var(--color-light-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}
@media (min-width: 1000px) { body { font-size: 17px; } }
body.has-callbar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0 0 1em; max-width: 68ch; }
ul, ol { padding: 0; margin: 0; }
strong { font-weight: 700; }

h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0 0 .5em; letter-spacing: 0; }
h1 { font-weight: 600; line-height: 1.02; font-size: clamp(3rem, 6.4vw, 5rem); text-transform: uppercase; }
h2 { font-weight: 600; line-height: 1.06; font-size: clamp(2.4375rem, 4.6vw, 4rem); text-transform: uppercase; }
h3, .h3 { font-weight: 500; line-height: 1.08; font-size: clamp(1.6875rem, 2.4vw, 2rem); text-transform: none; }
.lead { font-size: 18px; line-height: 1.6; }
@media (min-width: 1000px) { .lead { font-size: 20px; } }

.wrap { width: 100%; max-width: calc(var(--container-width) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: calc(760px + 2 * var(--gutter)); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- focus: dark ink on light surfaces, tan on dark ones */
:focus-visible { outline: 3px solid var(--color-charcoal); outline-offset: 3px; }
.site-header :focus-visible, .hero :focus-visible, .page-head--dark :focus-visible,
.section--raised :focus-visible, .site-footer :focus-visible, .callbar :focus-visible { outline-color: var(--color-tan); }

.skip { position: absolute; left: 12px; top: -100px; z-index: 100; background: var(--color-tan); color: var(--color-charcoal); padding: 12px 18px; border-radius: var(--radius-sm); font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- buttons: one dominant style (tan), spec 3.4 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color 160ms var(--ease-standard), border-color 160ms var(--ease-standard), color 160ms var(--ease-standard);
}
.btn .ico { flex: none; }
.btn--primary { background: var(--color-tan); color: var(--color-charcoal); }
.btn--primary:hover { background: var(--color-tan-hover); }
.btn--ghost { color: var(--color-ink); border-color: rgba(247, 246, 242, .45); }
.btn--ghost:hover { border-color: var(--color-ink); }
.btn--ghost-dark { color: var(--color-charcoal); border-color: rgba(8, 10, 11, .45); }
.btn--ghost-dark:hover { border-color: var(--color-charcoal); }
.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.actions .btn { width: 100%; }
@media (min-width: 600px) { .actions { flex-direction: row; flex-wrap: wrap; } .actions .btn { width: auto; } }

.text-link { font-weight: 700; text-decoration: underline; text-decoration-color: rgba(8, 10, 11, .35); margin-right: 20px; display: inline-block; padding: 6px 0; }
.text-link:hover { text-decoration-color: currentColor; }
.text-link--light { color: var(--color-ink); text-decoration-color: rgba(216, 191, 152, .6); }

.label { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }

/* ---------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-charcoal); color: var(--color-ink); border-bottom: 1px solid rgba(242, 240, 233, .1); }
.header-row { display: flex; align-items: center; gap: 16px; height: var(--header-h); }
.logo { display: block; flex: none; }
.logo img { width: 86px; height: auto; }
@media (min-width: 1000px) { .logo img { width: 116px; } }
.nav { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.btn--header { min-height: 44px; padding: 0 16px; }
@media (min-width: 1000px) {
  .nav { display: flex; gap: 28px; margin-left: auto; }
  .nav a { color: var(--color-ink); text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 0; transition: color 160ms var(--ease-standard); border-bottom: 2px solid transparent; }
  .nav a:hover { color: var(--color-tan); }
  .nav a[aria-current="page"] { border-bottom-color: var(--color-tan); }
  .header-actions { margin-left: 28px; }
  .btn--header { min-height: 48px; padding: 0 20px; }
  .mnav { display: none; }
}

/* mobile disclosure nav: <details>, works with no JS */
.mnav { position: static; }
.mnav__btn {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 64px; padding: 0 14px; border: 1px solid rgba(247, 246, 242, .45); border-radius: 8px;
  font-weight: 700; font-size: 15px;
}
.mnav__btn::-webkit-details-marker { display: none; }
.mnav[open] .mnav__btn { border-color: var(--color-tan); }
.mnav__panel {
  position: absolute; left: 0; right: 0; top: var(--header-h);
  background: var(--color-charcoal-raised); border-bottom: 1px solid rgba(242, 240, 233, .12);
  padding: 8px var(--gutter) 20px;
  animation: reveal 180ms var(--ease-standard);
}
.mnav__panel nav { display: flex; flex-direction: column; }
.mnav__panel nav a { color: var(--color-ink); text-decoration: none; font-size: 18px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid rgba(242, 240, 233, .08); }
.mnav__panel nav a[aria-current="page"] { color: var(--color-tan); }
.mnav__call { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--color-tan); font-weight: 700; font-size: 18px; text-decoration: none; min-height: 44px; }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- hero (home) */
.hero { position: relative; color: var(--color-ink); background: var(--color-charcoal); overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 10, 11, .55) 0%, rgba(8, 10, 11, .78) 55%, rgba(8, 10, 11, .9) 100%);
}
.hero__inner { padding-top: 72px; padding-bottom: 64px; min-height: 620px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero h1 { font-size: clamp(3.625rem, 8vw, 7rem); line-height: .99; max-width: 850px; margin-bottom: 0; }
.hero h1 span { display: block; }
.hero h1 span:last-child::after { content: ""; display: block; width: 96px; height: 4px; margin-top: 22px; background: var(--color-tan); }
.hero__sub { font-size: 18px; max-width: 520px; margin: 24px 0 0; color: var(--color-ink); }
@media (min-width: 1000px) {
  .hero { min-height: 700px; max-height: 820px; }
  .hero__bg img { object-position: center 52%; }
  .hero::after { background: linear-gradient(90deg, rgba(8, 10, 11, .9) 0%, rgba(8, 10, 11, .7) 45%, rgba(8, 10, 11, .25) 100%); }
  .hero__inner { min-height: 700px; justify-content: center; padding-top: 80px; padding-bottom: 80px; }
  .hero__sub { font-size: 20px; }
}

/* ---------- interior page head */
.page-head { padding: 36px 0 56px; }
.page-head--dark { background: var(--color-charcoal); color: var(--color-ink); }
.page-head--light { background: var(--color-warm); color: var(--color-light-text); border-bottom: 1px solid rgba(8, 10, 11, .08); }
.page-head--light .label { display: inline-block; border-left: 4px solid var(--color-tan); padding-left: 10px; }
.page-head h1 { max-width: 16ch; }
.page-head .lead { max-width: 640px; margin-top: 8px; }
@media (min-width: 1000px) { .page-head { padding: 48px 0 88px; } }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; font-weight: 500; margin: 0 0 28px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.crumbs a { text-decoration: underline; text-decoration-color: rgba(127, 127, 127, .5); }
.page-head--dark .crumbs { color: var(--color-muted); }
.page-head--dark .crumbs [aria-current] { color: var(--color-ink); }

/* ---------- sections */
.section { padding: var(--section-space) 0; }
.section--bone { background: var(--color-bone); }
.section--warm { background: var(--color-warm); }
.section--raised { background: var(--color-charcoal-raised); color: var(--color-ink); }
.section--raised p { color: var(--color-ink); }
.section h2 + p, .section h2 + ul { margin-top: 8px; }
.section .narrow > h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.section .narrow p, .section .narrow li { color: var(--color-light-support); }
.section--raised .narrow p, .section--raised .narrow li { color: var(--color-ink); }

.intro-split { display: grid; gap: 8px 48px; margin-bottom: 40px; }
@media (min-width: 900px) { .intro-split { grid-template-columns: 1fr 1fr; align-items: end; } .intro-split h2 { margin: 0; } .intro-split .lead { margin: 0; } }
.split-40 { display: grid; gap: 16px 64px; }
@media (min-width: 900px) { .split-40 { grid-template-columns: 2fr 3fr; } }

.ticks { list-style: none; margin: 8px 0 20px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; max-width: 68ch; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 3px; background: var(--color-tan); }
.prose h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-top: 1.4em; }

/* ---------- service cards, spec 3.5 */
.cards { display: grid; gap: 16px; }
@media (min-width: 800px) { .cards { grid-template-columns: 1fr 1fr; gap: 20px; } .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--color-warm); border: 1px solid rgba(8, 10, 11, .09); border-radius: 12px;
  transition: border-color 180ms var(--ease-standard);
}
.service-card:hover { border-color: rgba(8, 10, 11, .3); }
@media (min-width: 800px) { .service-card { min-height: 240px; } }
.service-card h3, .service-card .h3 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.08; margin: 0; text-transform: none; }
.service-card p { margin: 0; color: var(--color-light-support); }
.service-card a { margin-top: auto; align-self: flex-start; }
.section--bone .service-card { background: var(--color-warm); }
.also { margin-top: 28px; font-weight: 500; max-width: none; }
.also a { font-weight: 700; }

/* ---------- photos, feature */
.photo { margin: 0; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.photo figcaption { font-size: 13px; font-weight: 500; margin-top: 10px; color: var(--color-muted); }
.section--bone .photo figcaption, .section--warm .photo figcaption { color: var(--color-light-support); }
.feature { display: grid; gap: 28px 56px; align-items: center; }
@media (min-width: 900px) { .feature { grid-template-columns: 3fr 2fr; } }
.feature__text h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); }
@media (hover: hover) and (min-width: 900px) {
  .photo { overflow: hidden; border-radius: var(--radius-md); }
  .photo img { transition: transform 240ms var(--ease-standard); }
  .photo:hover img { transform: scale(1.02); }
}

.gallery { display: grid; gap: 20px; }
.gallery__pair, .gallery__trio { display: grid; gap: 20px; }
@media (min-width: 800px) { .gallery__pair { grid-template-columns: 1fr 1fr; } .gallery__trio { grid-template-columns: repeat(3, 1fr); } }
.gallery__cover .photo img { aspect-ratio: 16 / 9; }
.gallery__text { padding: 24px 0; max-width: 760px; }
.gallery__text h2 { font-size: clamp(2rem, 3.6vw, 3rem); }

/* ---------- story (Ogden): text-led with a tan rule, spec 2.6 */
.story { border-left: 3px solid var(--color-tan); padding-left: calc(var(--gutter) + 4px); }
@media (min-width: 900px) { .story { max-width: calc(860px + 2 * var(--gutter)); } }
.story p { font-size: 18px; color: var(--color-light-support); }
.story--dark p { color: var(--color-ink); }

/* ---------- city links / lists */
.city-links { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin: 0 0 24px; }
@media (min-width: 800px) { .city-links { grid-template-columns: repeat(4, 1fr); } }
.city-links a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(8, 10, 11, .14); font-weight: 700; text-decoration: none; }
.city-links a:hover { border-bottom-color: var(--color-charcoal); }
.city-links--small { grid-template-columns: repeat(2, 1fr); }
.svc-links { list-style: none; display: grid; gap: 0 24px; margin: 8px 0 28px; }
@media (min-width: 600px) { .svc-links { grid-template-columns: 1fr 1fr; } }
.svc-links a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(8, 10, 11, .14); font-weight: 700; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0 0 36px; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; color: var(--color-light-support); }

.area-groups { display: grid; gap: 40px; }
@media (min-width: 900px) { .area-groups { grid-template-columns: 1fr 1fr 1fr; } }
.area-list { list-style: none; }
.area-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(8, 10, 11, .14); }
.area-list a { font-weight: 700; }
.area-list span { color: var(--color-light-support); font-size: 15px; }

.which dt { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; margin-top: 28px; }
.which dd { margin: 8px 0 0; color: var(--color-light-support); max-width: 68ch; }

.faq { display: grid; gap: 28px; margin-top: 16px; }
.faq__item h3 { font-size: 1.5rem; margin-bottom: 8px; }
.faq__item p { margin: 0; }
.rel { list-style: none; display: grid; gap: 16px; margin-top: 12px; }
.rel li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid rgba(8, 10, 11, .14); }
.rel a { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
.rel span { color: var(--color-light-support); }

.job { padding: 24px 0; border-bottom: 1px solid rgba(8, 10, 11, .14); }
.job h3 { margin-bottom: 10px; }
.note { margin-top: 28px; font-size: 15px; }

.cred { display: grid; gap: 20px; margin-top: 16px; }
@media (min-width: 800px) { .cred { grid-template-columns: 1fr 1fr; } }
.cred__item { border: 1px solid rgba(242, 240, 233, .16); border-radius: 12px; padding: clamp(24px, 3vw, 36px); }
.cred__num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; line-height: 1.1; margin-bottom: 12px; }
.f-h { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; color: var(--color-muted); }

.contact-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-card { background: var(--color-warm); border: 1px solid rgba(8, 10, 11, .09); border-radius: 12px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; align-items: flex-start; }
.contact-card p { color: var(--color-light-support); }
.contact-big { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; line-height: 1.1; color: var(--color-charcoal) !important; }
.contact-big a { text-decoration: none; }
.contact-big--email { font-size: clamp(1.1rem, 3.4vw, 1.6rem); overflow-wrap: anywhere; }

/* ---------- footer */
.site-footer { background: var(--color-charcoal); color: var(--color-ink); }
.cta-band { padding: var(--section-space) 0; border-bottom: 1px solid rgba(242, 240, 233, .1); }
.cta-band p { font-size: 18px; max-width: 620px; }
.cta-band p a { color: var(--color-tan); font-weight: 700; }
.footer-grid { display: grid; gap: 32px; padding-top: 56px; padding-bottom: 40px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }
.footer-grid ul { list-style: none; display: grid; gap: 4px; }
.footer-grid li, .f-brand p { color: var(--color-muted); font-size: 15px; }
.footer-grid a { color: var(--color-ink); text-decoration: none; display: inline-block; padding: 6px 0; }
.footer-grid a:hover { color: var(--color-tan); }
.f-brand img { width: 116px; margin-bottom: 16px; }
.f-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 20px; padding-bottom: 32px; border-top: 1px solid rgba(242, 240, 233, .1); font-size: 14px; color: var(--color-muted); }
.f-legal nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.f-legal a { color: var(--color-ink); padding: 6px 0; display: inline-block; }
.f-legal p { margin: 0; padding: 6px 0; }

/* ---------- mobile call bar, spec 10. Hidden unless js/callbar.js turns it on. */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
  background: var(--color-charcoal); border-top: 1px solid rgba(242, 240, 233, .16);
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
}
.callbar .btn { width: 100%; }
.callbar.is-visible { display: block; }
@media (min-width: 1000px) { .callbar, .callbar.is-visible { display: none; } body.has-callbar { padding-bottom: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- weather bridge (addendum 02, 4.1): static, text-led until an approved still exists */
.weather { border-top: 1px solid rgba(8, 10, 11, .08); }
@media (min-width: 1000px) { .weather { padding: 72px 0; } }
.weather h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); }

/* ---------- illustrative media slot (addendum 02, 4.2): only rendered once an asset is approved */
.illustrative { background: var(--color-charcoal); padding: 0 0 48px; }
.illustrative__media { margin: 0; }
.illustrative__media img, .illustrative__media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); display: block; }
.illustrative__media figcaption { font-size: 13px; color: var(--color-muted); margin-top: 10px; }

/* =====================================================================================
   Design spec 03: premium polish pass. Later rules here deliberately override pass 1.
   ===================================================================================== */
:root { --section-space: 72px; --section-major: 72px; }
@media (min-width: 1000px) { :root { --section-space: 96px; --section-major: 112px; } }
.section--major { padding: var(--section-major) 0; }
.section--charcoal { background: var(--color-charcoal); color: var(--color-ink); }
.section--charcoal p { color: var(--color-ink); }
.section--charcoal :focus-visible { outline-color: var(--color-tan); }

/* three display levels: brand (hero), editorial, functional */
h1 { font-size: clamp(2.875rem, 5.4vw, 4.75rem); line-height: 1; }
.h-editorial, h2.h-editorial { font-size: clamp(2.625rem, 5vw, 4.5rem); line-height: 1; }
.h-functional, h2.h-functional { font-size: clamp(2.125rem, 3.4vw, 3.25rem); line-height: 1.06; }
.section h2 { margin-bottom: 24px; }
.lead { line-height: 1.55; }
.label, .f-h { font-size: 12px; line-height: 1.4; }

/* stronger link treatment where a link sits under a block */
.card-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 16px; text-decoration: underline; text-decoration-color: var(--color-tan); text-decoration-thickness: 2px; text-underline-offset: 6px; margin-right: 24px; }
.card-link:hover { text-decoration-color: currentColor; }
.card-link--light { color: var(--color-ink); }
.lead + p, .lead + .actions { margin-top: 32px; }

/* ---------- hero: 143842, directional overlay, separate phone crop */
.hero { min-height: 690px; }
.hero__bg img { object-position: 54% center; }
.hero::after { background: linear-gradient(180deg, rgba(8,10,11,.40) 0%, rgba(8,10,11,.67) 28%, rgba(8,10,11,.87) 100%); }
.hero__inner { min-height: 690px; padding-top: 56px; padding-bottom: 48px; }
.hero__title { font-size: clamp(3.5rem, 12vw, 4.5rem); line-height: .98; letter-spacing: -.025em; max-width: 860px; }
.hero__title span:last-child::after { margin-top: 18px; }
.hero__sub { margin-top: 20px; }
.hero .actions { margin-top: 24px; }
@media (min-width: 768px) {
  .hero { min-height: max(720px, min(82svh, 820px)); max-height: none; }
  .hero__bg img { object-position: 57% 49%; }
  .hero::after {
    background:
      linear-gradient(90deg, rgba(8,10,11,.88) 0%, rgba(8,10,11,.72) 34%, rgba(8,10,11,.28) 72%, rgba(8,10,11,.16) 100%),
      linear-gradient(0deg, rgba(8,10,11,.42), transparent 45%);
  }
  .hero__inner { min-height: max(720px, min(82svh, 820px)); justify-content: center; padding-top: 80px; padding-bottom: 80px; }
  .hero__title { font-size: clamp(4.5rem, 8vw, 7.5rem); line-height: .94; }
}

/* ---------- service panels */
.cards { gap: 16px; }
.service-card { padding: 24px; background: #e6e2d6; border-color: rgba(8,10,11,.12); }
@media (min-width: 800px) { .service-card { padding: 36px; min-height: 260px; } }
.service-card h3, .service-card .h3 { font-size: clamp(1.8125rem, 2.8vw, 2.125rem); font-weight: 600; text-transform: uppercase; letter-spacing: .005em; }
.service-card p { font-size: 17px; max-width: 34ch; }
.service-card .card-link { margin-top: auto; padding-top: 8px; }

/* ---------- photographic interlude: full bleed, 4:5 phone, 21:9 desktop */
.interlude { position: relative; background: var(--color-charcoal); }
.interlude__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% center; display: block; }
@media (min-width: 768px) { .interlude__img img { aspect-ratio: 21 / 9; object-position: center 55%; } }
.interlude::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(0deg, rgba(8,10,11,.75), transparent); pointer-events: none; }
.interlude__line { position: absolute; left: var(--gutter); bottom: 20px; z-index: 1; margin: 0; color: var(--color-ink); font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
@media (min-width: 1000px) { .interlude__line { left: max(var(--gutter), calc((100vw - var(--container-width)) / 2)); bottom: 32px; } }
.work { padding-top: 48px; }
@media (min-width: 1000px) { .work { padding-top: 64px; } }
.split-40 > h2 { margin: 0 0 24px; }

/* ---------- Ogden editorial excerpt */
.excerpt { display: grid; gap: 24px; }
.excerpt__meta { border-top: 3px solid var(--color-tan); padding-top: 16px; max-width: 280px; }
.excerpt__place { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; text-transform: uppercase; margin: 0; }
.excerpt__kind { margin: 4px 0 0; color: var(--color-light-support); font-weight: 500; }
.excerpt__body p { color: var(--color-light-support); }
.excerpt__body .lead { color: var(--color-light-text); }
@media (min-width: 900px) { .excerpt { grid-template-columns: 1fr 2fr; gap: 64px; } }

/* ---------- photo bands on hubs */
.band { background: var(--color-bone); padding-top: 48px; }
.photo--wide img { aspect-ratio: 16 / 9; }
.section--charcoal .photo figcaption { color: var(--color-muted); }
.band .photo figcaption { color: var(--color-light-support); }

/* ---------- interior header, variant A (photo split) */
.page-head__grid { display: grid; gap: 32px; }
.page-head--split .page-head__text h1 { max-width: 14ch; }
.page-head--split .page-head__text .lead { max-width: 480px; }
.photo--head img { aspect-ratio: 16 / 10; border-radius: 10px; }
.page-head--dark .photo figcaption { color: var(--color-muted); }
@media (min-width: 1000px) {
  .page-head--split { padding: 80px 0; }
  .page-head__grid { grid-template-columns: 48fr 52fr; align-items: center; gap: 56px; }
  .photo--head img { aspect-ratio: 5 / 4; border-radius: 12px; }
}
@media (max-width: 999px) { .page-head--split { padding: 44px 0; } }
.photo--portrait img { aspect-ratio: 3 / 4; max-height: 640px; }
@media (min-width: 1000px) { .page-head__media--portrait { max-width: 440px; justify-self: end; } }

/* ---------- variant B (technical text-led): architectural CSS motif, no image */
.page-head--technical { position: relative; overflow: hidden; }
.page-head--technical::before {
  content: ""; position: absolute; right: -6%; top: 0; bottom: 0; width: 52%;
  background:
    repeating-linear-gradient(0deg, rgba(216,191,152,.08) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(216,191,152,.06) 0 1px, transparent 1px 68px);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.page-head--technical .wrap { position: relative; }
.page-head--technical .label { color: var(--color-tan); }

/* ---------- city header: type-led two column with location mark */
.page-head--city .page-head__grid { align-items: end; }
.city-mark { display: flex; flex-direction: column; gap: 4px; border-top: 3px solid var(--color-tan); padding-top: 14px; max-width: 320px; }
.city-mark span:first-child { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; text-transform: uppercase; line-height: 1.05; }
.city-mark span:last-child { color: var(--color-light-support); font-weight: 500; }
@media (min-width: 1000px) { .page-head--city .page-head__grid { grid-template-columns: 2fr 1fr; } .city-mark { justify-self: end; margin-bottom: 8px; } }
@media (max-width: 999px) { .page-head--city .city-mark { display: none; } }

/* ---------- projects collection */
.collection { padding: 56px 0; }
.collection + .collection { padding-top: 0; }
@media (min-width: 1000px) { .collection { padding: 80px 0; } }
.collection__note { color: var(--color-muted) !important; font-size: 15px; max-width: 62ch; }
.mosaic, .pair, .single { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: 62fr 38fr; grid-template-rows: auto auto; }
  .mosaic__lead { grid-row: 1 / span 2; }
  .mosaic__lead img { aspect-ratio: auto; height: 100%; min-height: 100%; }
  .pair { grid-template-columns: 1fr 1fr; }
}
.mosaic .photo:not(.mosaic__lead) img { aspect-ratio: 4 / 3; }
.mosaic__lead img { aspect-ratio: 3 / 2; }
.pair .photo img { aspect-ratio: 3 / 2; }
.single { max-width: 1000px; }
.photo__link { display: block; border-radius: var(--radius-md); }
.photo__link:focus-visible { outline: 3px solid var(--color-tan); outline-offset: 3px; }

/* ---------- viewer (js/gallery.js) */
.viewer { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 96vh; }
.viewer::backdrop { background: rgba(8,10,11,.92); }
.viewer__frame { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--color-ink); }
.viewer__img { max-width: min(96vw, 1400px); max-height: 78vh; width: auto; height: auto; border-radius: 8px; }
.viewer__cap { margin: 0; font-size: 15px; text-align: center; }
.viewer__nav { display: flex; align-items: center; gap: 16px; }
.viewer__count { font-size: 14px; color: var(--color-muted); min-width: 64px; text-align: center; }
.viewer__btn, .viewer__close { min-height: 44px; min-width: 44px; padding: 0 18px; border-radius: 8px; font: 700 15px var(--font-body); cursor: pointer; }
.viewer__btn { background: transparent; color: var(--color-ink); border: 1px solid rgba(247,246,242,.5); }
.viewer__close { background: var(--color-tan); color: var(--color-charcoal); border: 0; }
.viewer :focus-visible { outline: 3px solid var(--color-tan); outline-offset: 3px; }
/* mosaic lead fills its two-row cell (desktop) */
@media (min-width: 900px) {
  .mosaic__lead { display: flex; flex-direction: column; }
  .mosaic__lead .photo__link { flex: 1; display: block; min-height: 0; }
  .mosaic__lead picture { display: block; height: 100%; }
  .mosaic__lead img { height: 100%; aspect-ratio: auto; }
}
.gallery + .collection__note { margin-top: 28px; }
.viewer { overflow: visible; padding: 8px; }
.viewer__img { max-height: 70vh; }

/* =====================================================================================
   Design spec 04: homepage service grid. Typographic, photo-free, one link per panel.
   ===================================================================================== */
:root {
  --agx-service-bg: #f2f0e9;
  --agx-service-lead: #101310;
  --agx-service-panel: #e8e5dc;
  --agx-service-panel-alt: #dedbd2;
  --agx-service-border: #d1ccc0;
  --agx-service-heading: #080a0b;
  --agx-service-body: #343936;
  --agx-service-accent: #d8bf98;
}
.home-services { background: var(--agx-service-bg); padding: 72px 0; }
@media (min-width: 900px) { .home-services { padding: 104px 0 112px; } }
.home-services__intro { display: grid; gap: 16px 48px; margin-bottom: 36px; }
.home-services__intro h2 { font-size: clamp(2.625rem, 4.6vw, 4rem); line-height: 1.02; margin: 0; }
.home-services__intro p { font-size: 17px; color: var(--agx-service-body); margin: 0 0 12px; max-width: 46ch; }
.home-services__all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 15px; color: var(--agx-service-heading); text-decoration: underline; text-decoration-color: var(--agx-service-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 900px) {
  .home-services__intro { grid-template-columns: 7fr 5fr; align-items: end; margin-bottom: 48px; }
  .home-services__intro p { font-size: 18px; }
}

.service-grid { display: grid; gap: 10px; }
.service-panel {
  display: flex; flex-direction: column; min-width: 0;
  text-decoration: none; color: var(--agx-service-heading);
  background: var(--agx-service-panel); border: 1px solid var(--agx-service-border); border-radius: 8px;
  padding: 22px; min-height: 164px;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.service-panel h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; line-height: 1.02; font-size: 29px; margin: 0 0 10px; text-wrap: balance; }
.service-panel p { font-size: 15px; line-height: 1.55; color: var(--agx-service-body); margin: 0 0 20px; max-width: 40ch; }
.service-panel__action { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; min-height: 24px; font-size: 14px; font-weight: 700; }
.service-panel__arrow { font-size: 18px; line-height: 1; transition: transform 160ms ease; }
.service-panel--side { min-height: 184px; }
.service-panel--side h3 { font-size: 31px; }
.service-panel--lead { background: var(--agx-service-lead); border-color: var(--agx-service-lead); color: #f7f6f2; padding: 26px; min-height: 320px; }
.service-panel--lead h3 { font-size: min(51px, 12vw); line-height: .98; color: #f7f6f2; margin-bottom: 16px; } /* min(): "REPLACEMENT." overflowed the tile on 360px phones at a fixed 51px */
.service-panel--lead p { font-size: 16px; color: #d9d6cd; max-width: 44ch; }
.service-panel--lead .service-panel__action { color: var(--agx-service-accent); border-top: 1px solid rgba(242, 240, 233, .16); padding-top: 16px; }

@media (min-width: 900px) {
  .service-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(201px, auto) minmax(201px, auto) minmax(192px, auto);
    gap: 12px;
  }
  .service-panel { padding: 28px; min-height: 0; }
  .service-panel--lead { grid-column: 1 / 8; grid-row: 1 / 3; padding: 40px; }
  .service-panel--lead h3 { font-size: 68px; }
  .service-panel--lead p { font-size: 17px; }
  .service-panel--side { grid-column: 8 / 13; }
  .service-panel--side h3 { font-size: 38px; }
  .service-panel--base:nth-child(4) { grid-column: 1 / 5; }
  .service-panel--base:nth-child(5) { grid-column: 5 / 9; }
  .service-panel--base:nth-child(6) { grid-column: 9 / 13; }
}

/* Hover photo backdrop (Porter 2026-10-17, pattern from herrimanhandyman.com).
   Adds a layer BEHIND the section. It changes no tile size, spacing or position: while a
   photo shows, only tile colour changes. Driven by js/services-backdrop.js, and only on
   real hover pointers with motion allowed; everyone else keeps the plain section. */
.has-photo-backdrop { position: relative; overflow: hidden; isolation: isolate; }
.has-photo-backdrop > .wrap { position: relative; z-index: 1; }
.svc-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.svc-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .28s ease; }
.svc-bg img.is-shown { opacity: 1; }
/* Bone scrim: heaviest across the top band where the heading sits on the photo, opening
   up over the grid where the tiles supply their own contrast. */
.svc-bg::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .28s ease;
  background: linear-gradient(180deg, rgba(242,240,233,.94) 0%, rgba(242,240,233,.88) 14%, rgba(242,240,233,.72) 24%, rgba(242,240,233,.30) 38%, rgba(242,240,233,.26) 78%, rgba(242,240,233,.46) 100%); }
.has-photo-backdrop.is-showing .svc-bg::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .has-photo-backdrop .service-panel { transition: background-color .3s ease, border-color .2s ease; }
  .has-photo-backdrop.is-showing .service-panel:not(.is-active) { background: rgba(232,229,220,.8); border-color: rgba(255,255,255,.8); }
  .has-photo-backdrop.is-showing .service-panel--lead:not(.is-active) { background: rgba(16,19,16,.82); border-color: rgba(16,19,16,.82); }
}
@media (prefers-reduced-motion: reduce) { .svc-bg img, .svc-bg::after, .has-photo-backdrop .service-panel { transition: none; } }

@media (hover: hover) and (pointer: fine) {
  .service-panel:hover { background: var(--agx-service-panel-alt); }
  .service-panel--lead:hover { background: var(--agx-service-lead); border-color: var(--agx-service-accent); }
  .service-panel:hover .service-panel__arrow { transform: translate(2px, -2px); }
}
.service-panel:focus-visible { outline: 3px solid #080a0b; outline-offset: 4px; }
.service-panel--lead:focus-visible { outline-color: #d8bf98; box-shadow: 0 0 0 6px #080a0b; }
.service-panel:active { filter: brightness(.96); }
@media (prefers-reduced-motion: reduce) {
  .service-panel, .service-panel__arrow { transition: none; }
  .service-panel:hover .service-panel__arrow { transform: none; }
}

/* =====================================================================================
   Owner instruction 2026-10-11: hero fits ONE screen below the sticky header, keyword H1,
   optional lead form card. Overrides the pass 3 hero heights (690/720px minimums made the
   hero taller than a 1280x720 or 360x740 screen). Height is content driven with a
   100svh-based minimum, never a fixed height, so 200% zoom can still grow it.
   ===================================================================================== */
.hero, .hero__inner { min-height: 0; max-height: none; }
.hero { min-height: clamp(480px, calc(100svh - var(--header-h)), 900px); display: flex; }
.hero__inner { width: 100%; padding-top: 28px; padding-bottom: 28px; justify-content: flex-start; gap: 20px; }
.hero .hero__title { font-size: clamp(2rem, 8.6vw, 2.75rem); line-height: 1; letter-spacing: 0; max-width: 18ch; margin: 0; }
.hero .hero__title span:last-child::after, .hero .hero__title::after { content: none; }
.hero__copy { display: flex; flex-direction: column; gap: 12px; }
.hero__copy .label { margin: 0; }
.hero .hero__sub { font-size: 15px; line-height: 1.5; margin: 0; max-width: 560px; }
.hero .hero__actions { margin-top: 4px; }
.hero__email { color: var(--color-ink); font-weight: 700; font-size: 15px; text-decoration: underline; text-decoration-color: var(--color-tan); text-underline-offset: 5px; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 767px) {
  /* phone with a form: the sticky header's Call button is always on screen, so the hero
     drops its own call row and label to keep headline, sentence and the compact form
     above the fold (header 68px + call bar 76px allowed for). */
  .hero--form .hero__actions, .hero--form .hero__label { display: none; }
}
@media (min-width: 768px) {
  .hero__inner { justify-content: center; padding-top: 40px; padding-bottom: 40px; }
  .hero .hero__title { font-size: clamp(2.75rem, 4.6vw, 4.25rem); line-height: .98; max-width: 16ch; }
  .hero .hero__sub { font-size: 18px; }
}
@media (min-width: 1000px) {
  .hero--form .hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); align-items: center; gap: 48px; }
}

/* ---------- lead card */
.lead-card { background: var(--color-bone); color: var(--color-light-text); border-radius: 12px; padding: 16px; box-shadow: 0 1px 0 rgba(8,10,11,.2); width: 100%; max-width: 460px; }
@media (min-width: 1000px) { .lead-card { padding: 24px; justify-self: end; } }
.lead-card__title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.375rem; line-height: 1.1; margin: 0 0 10px; }
.lead-demo { margin: 0 0 10px; padding: 4px 10px; display: inline-block; background: #7a1f1f; color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .06em; border-radius: 4px; }
.lead-form { display: grid; gap: 8px; }
.lead-field { display: grid; gap: 3px; }
.lead-field label { font-size: 13px; font-weight: 700; }
.lead-opt { font-weight: 400; color: var(--color-light-support); }
.lead-field input, .lead-field select, .lead-field textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; font: 16px/1.3 var(--font-body); color: var(--color-light-text);
  background: #fff; border: 1px solid #8a8f8c; border-radius: 6px;
}
.lead-field textarea { min-height: 56px; resize: vertical; }
.lead-field input:focus-visible, .lead-field select:focus-visible, .lead-field textarea:focus-visible { outline: 3px solid var(--color-charcoal); outline-offset: 1px; }
.hero .lead-card :focus-visible { outline-color: var(--color-charcoal); }
.lead-field [aria-invalid="true"] { border-color: #a12a2a; border-width: 2px; }
.lead-err { color: #a12a2a; font-size: 13px; font-weight: 700; }
.lead-submit { width: 100%; min-height: 48px; margin-top: 4px; border: 0; cursor: pointer; }
.lead-submit:disabled { opacity: .7; cursor: default; }
.lead-consent { font-size: 12px; line-height: 1.45; color: var(--color-light-support); margin: 0; max-width: none; }
.lead-consent a { color: var(--color-light-text); }
.lead-status { margin: 4px 0 0; padding: 10px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; max-width: none; }
.lead-status--ok { background: #e3efe3; color: #173d1d; }
.lead-status--error { background: #f6e3e3; color: #5c1414; }
.lead-status--demo { background: #fff3cd; color: #4a3a00; }
.lead-status a { color: inherit; font-weight: 700; }
.lead-noscript { font-size: 15px; margin: 0; }
@media (max-width: 767px) { .lead-wide { display: none; } }
@media (min-width: 768px) and (max-height: 760px) {
  /* short laptop screens (1366x768, 1280x720): tighten the card so the hero still fits */
  .lead-card { padding: 18px 20px; }
  .lead-form { gap: 6px; }
  .lead-field textarea { min-height: 44px; }
  .lead-card__title { margin-bottom: 6px; }
}

/* footer call band title is no longer a heading (chrome labels are not headings) */
.cta-title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(2.4375rem, 4.6vw, 4rem); line-height: 1.06; margin: 0 0 .5em; max-width: none; }
.cred__h { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 12px; line-height: 1.4; }
.motto { font-weight: 700; margin-bottom: 12px; }
@media (max-width: 767px) {
  /* compact phone hero with a form: keep everything above header + call bar at 360x740 */
  .hero--form .hero__inner { padding-top: 16px; padding-bottom: 16px; gap: 14px; }
  .hero--form .hero__copy { gap: 8px; }
  .hero--form .lead-card { padding: 14px; }
  .hero--form .lead-card__title { font-size: 1.25rem; margin-bottom: 8px; }
  .hero--form .lead-demo { margin-bottom: 6px; padding: 2px 8px; }
  .hero--form .lead-form { gap: 6px; }
}
@media (min-width: 768px) {
  .hero .hero__title { max-width: 22ch; }
  .hero .hero__sub { margin-top: 6px; }
}
@media (min-width: 1000px) {
  /* beside the form the headline gets ~55% of the row: two lines, not four */
  .hero--form .hero__title { font-size: clamp(2.75rem, 3.9vw, 3.75rem); max-width: none; }
  .hero:not(.hero--form) .hero__title { font-size: clamp(3rem, 4.6vw, 4.5rem); max-width: 20ch; }
}

/* =====================================================================================
   Design spec 05: homepage weather gallery. Horizontal scroll-snap, CSS-only visuals,
   no images. Replaces the interim weather text block.
   ===================================================================================== */
:root {
  --weather-section: #e8e5dc; --weather-charcoal: #101310; --weather-bone: #f2f0e9; --weather-tan: #d8bf98;
  --weather-rain: #293537; --weather-wind: #555b58; --weather-hail: #676c70;
  --weather-snow: #b9c6ca; --weather-freeze: #728c91; --weather-sun: #d8bf98;
  --weather-card-radius: 10px; --weather-card-gap: 16px; --weather-card-width: 420px;
}
.weather-gallery { background: var(--weather-section); padding: 72px 0 80px; }
@media (min-width: 900px) { .weather-gallery { padding: 104px 0 112px; } }
.weather-gallery__header { display: grid; gap: 16px 48px; margin-bottom: 28px; }
.weather-gallery__header h2 { font-size: clamp(2.5rem, 4.6vw, 4rem); line-height: 1.02; margin: 0; }
.weather-gallery__intro p { color: var(--color-light-support); font-size: 17px; margin: 0; max-width: 46ch; }
.weather-gallery__controls { display: flex; gap: 10px; margin-top: 20px; }
.weather-gallery__controls[hidden] { display: none; }
.wg-btn {
  width: 48px; height: 48px; border-radius: 8px; border: 1px solid rgba(8,10,11,.45); background: transparent;
  color: var(--color-charcoal); font: 700 20px/1 var(--font-body); cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.wg-btn:hover:not(:disabled) { background: #dedbd2; border-color: var(--color-charcoal); }
.wg-btn:disabled { opacity: .35; cursor: default; }
.wg-btn:focus-visible { outline: 3px solid var(--color-charcoal); outline-offset: 3px; }
.weather-gallery__hint { margin-top: 14px !important; font-size: 13px !important; font-weight: 600; }
@media (min-width: 900px) {
  .weather-gallery__header { grid-template-columns: 7fr 5fr; align-items: end; margin-bottom: 44px; }
  .weather-gallery__intro p { font-size: 18px; }
  .weather-gallery__hint { display: none; }
}

.weather-gallery__track {
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch; padding-bottom: 8px; border-radius: var(--weather-card-radius);
}
.weather-gallery__track:focus-visible { outline: 3px solid var(--color-charcoal); outline-offset: 4px; }
.weather-gallery__slide {
  flex: 0 0 min(310px, calc(100% - 40px)); min-width: 0; scroll-snap-align: start; scroll-snap-stop: normal;
  display: flex; flex-direction: column; min-height: 450px; border-radius: var(--weather-card-radius); overflow: hidden;
  background: var(--weather-charcoal);
}
@media (min-width: 768px) {
  .weather-gallery__track { gap: var(--weather-card-gap); }
  .weather-gallery__slide { flex-basis: var(--weather-card-width); min-height: 480px; }
}
.weather-gallery__visual {
  height: 175px; flex: none; display: flex; align-items: center; justify-content: flex-start; padding: 0 22px;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; line-height: .9;
  font-size: clamp(3.5rem, 21vw, 5.125rem); color: var(--weather-bone); position: relative; overflow: hidden;
}
@media (min-width: 768px) { .weather-gallery__visual { height: 210px; padding: 0 28px; font-size: clamp(4.5rem, 7vw, 6.5rem); } }
.weather-gallery__visual span { position: relative; z-index: 1; }
/* static abstract patterns: decoration only, never a picture of roof damage */
.weather-gallery__slide--rain .weather-gallery__visual { background: var(--weather-rain) repeating-linear-gradient(115deg, transparent 0 14px, rgba(242,240,233,.12) 14px 15px); }
.weather-gallery__slide--wind .weather-gallery__visual { background: var(--weather-wind) repeating-linear-gradient(0deg, transparent 0 22px, rgba(242,240,233,.14) 22px 23px); }
.weather-gallery__slide--hail .weather-gallery__visual {
  background:
    radial-gradient(circle at 12% 22%, rgba(242,240,233,.22) 0 4px, transparent 5px),
    radial-gradient(circle at 34% 70%, rgba(242,240,233,.18) 0 3px, transparent 4px),
    radial-gradient(circle at 58% 30%, rgba(242,240,233,.2) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 64%, rgba(242,240,233,.16) 0 3px, transparent 4px),
    radial-gradient(circle at 90% 18%, rgba(242,240,233,.2) 0 4px, transparent 5px),
    radial-gradient(circle at 46% 88%, rgba(242,240,233,.14) 0 3px, transparent 4px),
    var(--weather-hail);
}
.weather-gallery__slide--snow .weather-gallery__visual {
  color: var(--weather-charcoal);
  background:
    linear-gradient(180deg, transparent 72%, rgba(255,255,255,.45) 72% 80%, transparent 80% 86%, rgba(255,255,255,.3) 86% 92%, transparent 92%),
    var(--weather-snow);
}
.weather-gallery__slide--freeze .weather-gallery__visual {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; font-size: clamp(2.75rem, 15vw, 3.75rem);
  background: linear-gradient(180deg, var(--weather-freeze) 0 50%, var(--weather-snow) 50% 100%);
}
.weather-gallery__slide--freeze .weather-gallery__visual span:last-child { color: var(--weather-charcoal); }
@media (min-width: 768px) { .weather-gallery__slide--freeze .weather-gallery__visual { font-size: clamp(3.25rem, 5vw, 4.5rem); } }
.weather-gallery__slide--heat .weather-gallery__visual {
  color: var(--weather-charcoal);
  background: repeating-radial-gradient(circle at 85% 50%, transparent 0 18px, rgba(8,10,11,.08) 18px 19px), var(--weather-sun);
}
.weather-gallery__content { display: flex; flex-direction: column; flex: 1; padding: 22px; color: var(--weather-bone); }
@media (min-width: 768px) { .weather-gallery__content { padding: 26px 28px 28px; } }
.weather-gallery__content h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 29px; line-height: 1.05; margin: 0 0 12px; color: var(--weather-bone); }
@media (min-width: 768px) { .weather-gallery__content h3 { font-size: 31px; } }
.weather-gallery__content p { font-size: 15px; line-height: 1.55; color: #d9d6cd; margin: 0 0 20px; }
@media (min-width: 768px) { .weather-gallery__content p { font-size: 16px; } }
.weather-gallery__link {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center; min-height: 44px;
  color: var(--weather-tan); font-weight: 700; font-size: 15px; text-decoration: none;
  border-top: 1px solid rgba(242,240,233,.16); padding-top: 12px;
}
.weather-gallery__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.weather-gallery__link:focus-visible { outline: 3px solid var(--weather-tan); outline-offset: 3px; }

.weather-gallery__progress { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.weather-gallery__progress[hidden] { display: none; }
.weather-gallery__count { font-size: 13px; font-weight: 600; min-width: 48px; }
.weather-gallery__bar { flex: 1; max-width: 360px; height: 3px; background: rgba(8,10,11,.15); border-radius: 2px; overflow: hidden; }
.weather-gallery__bar span { display: block; height: 100%; width: 16.66%; background: var(--color-charcoal); }
.weather-gallery__close { margin: 24px 0 4px; color: var(--color-light-support); max-width: 60ch; }
@media (prefers-reduced-motion: reduce) { .wg-btn { transition: none; } }

/* =====================================================================================
   Design spec 06: callback widget (NOT a chat). Rendered at runtime by js/lead-form.js
   only in token builds. Layers: dialog 61 > backdrop 60 > header 50 > trigger 41 >
   mobile call bar 40 > content. No pulse, no dots, no avatar.
   ===================================================================================== */
.cb-trigger {
  position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 41;
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px 0 14px;
  background: #101310; color: #f2f0e9; border: 1px solid #d8bf98; border-radius: 999px;
  font: 700 15px/1 var(--font-body); cursor: pointer; box-shadow: 0 8px 28px rgba(8, 10, 11, .16);
  transition: opacity 120ms ease;
}
.cb-trigger[hidden] { display: none; }
.cb-trigger:focus-visible { outline: 3px solid #d8bf98; outline-offset: 3px; }
.cb-glyph { width: 20px; height: 18px; border: 2px solid #d8bf98; border-radius: 6px 6px 6px 2px; position: relative; flex: none; }
.cb-glyph::after { content: ""; position: absolute; left: 3px; bottom: -6px; border: 5px solid transparent; border-top-color: #d8bf98; border-bottom: 0; }
.cb-label-mobile { display: none; }
@media (max-width: 767px) {
  .cb-trigger { right: 20px; height: 44px; min-width: 132px; justify-content: center; padding: 0 18px; font-size: 15px; }
  .cb-trigger--home { display: none !important; }
  .cb-glyph, .cb-label-desktop { display: none; }
  .cb-label-mobile { display: inline; }
}
.cb-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(8, 10, 11, .28); }
.cb-backdrop[hidden] { display: none; }
.cb-dialog {
  position: fixed; z-index: 61; right: 24px; bottom: calc(24px + 56px + 12px + env(safe-area-inset-bottom, 0px));
  width: 376px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain;
  background: #f2f0e9; color: var(--color-light-text); border-radius: 12px; padding: 20px;
  box-shadow: 0 16px 48px rgba(8, 10, 11, .28); animation: cbFade 120ms ease;
}
.cb-dialog[hidden] { display: none; }
@keyframes cbFade { from { opacity: 0; } to { opacity: 1; } }
.cb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #d1ccc0; }
.cb-title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.5rem; line-height: 1.05; margin: 0; }
.cb-title:focus { outline: none; }
.cb-title:focus-visible { outline: 3px solid var(--color-charcoal); outline-offset: 3px; }
.cb-close { flex: none; width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; background: transparent; font: 400 28px/1 var(--font-body); color: var(--color-charcoal); cursor: pointer; border-radius: 8px; }
.cb-close:focus-visible { outline: 3px solid var(--color-charcoal); outline-offset: 0; }
.cb-desc { font-size: 15px; color: var(--color-light-support); margin: 0 0 12px; }
.cb-form { display: grid; gap: 12px; }
.cb-form .lead-submit { min-height: 48px; }
.cb-call { min-height: 44px; width: 100%; }
.cb-summary, .cb-fail { border-radius: 8px; padding: 12px; font-size: 14px; }
.cb-summary { background: #f6e3e3; color: #5c1414; }
.cb-summary p, .cb-fail p { margin: 0 0 6px; }
.cb-summary ul { margin: 0; padding-left: 18px; }
.cb-fail { background: #f6e3e3; color: #5c1414; }
.cb-fail--demo { background: #fff3cd; color: #4a3a00; }
.cb-fail a { color: inherit; font-weight: 700; }
.cb-fail__title { font-weight: 700; }
.cb-summary[hidden], .cb-fail[hidden], .cb-view[hidden] { display: none; }
.cb-retry { min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid currentColor; background: transparent; color: inherit; font: 700 14px var(--font-body); cursor: pointer; margin-top: 4px; }
.cb-retry:focus-visible { outline: 3px solid var(--color-charcoal); outline-offset: 2px; }
.cb-ok-close { min-height: 48px; width: 100%; margin-top: 8px; border: 0; cursor: pointer; }
.cb-title--ok { margin-bottom: 10px; }
@media (max-width: 767px) {
  .cb-backdrop { background: rgba(8, 10, 11, .7); }
  .cb-dialog {
    left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: calc(100dvh - 16px);
    border-radius: 16px 16px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: cbSheet 160ms ease;
  }
  .cb-wide { display: grid; } /* the sheet keeps all four fields */
  body.cb-open .callbar { visibility: hidden; }
  @keyframes cbSheet { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
body.cb-open { overflow: hidden; }
@media (min-width: 768px) {
  /* the panel sits 92px up (above the 56px trigger); keep 24px clear of the top so it
     never rides over the sticky header, and scroll inside instead (spec 06 said 100dvh-96) */
  .cb-dialog { max-height: calc(100dvh - 92px - 24px - env(safe-area-inset-bottom, 0px)); }
}

/* WebDevAuto footer credit + 44px tap targets in the legal row (owner, 2026-10-12) */
.f-legal a, .f-credit a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
.f-credit { margin: 0; }
.f-credit a { color: var(--color-ink); text-decoration: underline; text-decoration-color: rgba(216, 191, 152, .6); text-underline-offset: 4px; }
.f-credit a:hover { color: var(--color-tan); }
@media (max-width: 999px) {
  /* the fixed call bar must never cover the last footer row on phones */
  .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.has-callbar { padding-bottom: 0; }
}