/* =====================================================================
   CDL Roofing — Shared Stylesheet (V2: Monochrome Contractor-Corporate)
   Supersedes the v1 terracotta/serif direction per
   _pod/DESIGN-DIRECTION-V2.md (Kevin rejected v1 as "too busy, looks
   cheap"). Single CSS file for the whole site. Page-specific rules go
   in their own clearly commented section near the bottom.

   Canonical business facts (name, phone, address, license) live in
   SITE-FACTS.md at the project root. This file, /_pod/TEMPLATE.html,
   and js/main.js are the ONLY places that should ever encode phone
   number / business name / service-area text — copy those exactly
   from SITE-FACTS.md into every page build so nothing can drift.
   Canonical phone: (602) 802-8795  ->  tel:+16028028795
   ===================================================================== */

/* =====================================================================
   0. Fonts — self-hosted woff2, Inter only (400/600/700/800)
   ===================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/inter-800.woff2") format("woff2");
}

/* =====================================================================
   1. Design tokens (verbatim from _pod/DESIGN-DIRECTION-V2.md Section 10)
   ===================================================================== */
:root {
  --black: #0D0D0D; --ink: #171717;
  --gray-700: #4A4A4A; --gray-600: #6B6B6B; --gray-400: #9A9A9A;
  --input-border: #8C8C8C; --divider: #E5E5E5; --paper: #FFFFFF; --white: #FFFFFF;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --space-24: 6rem; --space-32: 8rem; --space-48: 12rem;
  --radius-sm: 4px; --radius-md: 6px; --radius-pill: 999px;
  --shadow-hover: 0 4px 14px rgba(13,13,13,0.10);
  --overlay: linear-gradient(180deg, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0.28) 26%, rgba(13,13,13,0.74) 100%);
  --container-max: 1280px;
  --accent: #B23A2A; --accent-dark: #95301F;

  /* Component measurements referenced across the sheet */
  --header-h-mobile: 64px;
  --header-h-desktop: 84px;
  --utility-bar-h: 34px;
  --mobile-bar-h: 60px;
}

/* =====================================================================
   2. Reset (thin, modern)
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
ul, ol { padding-left: 1.25em; }
img, picture, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; }
table { border-collapse: collapse; }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; }

/* Reduced motion: universal safety-net fallback. Individual components
   additionally gate their animation/transition declarations inside
   @media (prefers-reduced-motion: no-preference) blocks below. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   3. Base typography (V2 type scale, Inter only)
   ===================================================================== */
h1, h2, h3, h4 { font-family: var(--font); color: var(--ink); }

h1 { font-size: 2rem; line-height: 1.05; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 1.625rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.005em; }
h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
h4 { font-size: 1.0625rem; line-height: 1.3; font-weight: 700; }

@media (min-width: 1024px) {
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.5rem; }
  h3 { font-size: 1.5rem; }
}

.u-eyebrow {
  display: inline-block;
  font-weight: 600;
  font-size: 0.8125rem; line-height: 1.4;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
@media (min-width: 1024px) { .u-eyebrow { font-size: 0.875rem; } }

.u-micro {
  display: inline-block;
  font-weight: 600;
  font-size: 0.75rem; line-height: 1.4;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray-600);
}

p { max-width: 62ch; }
p.u-measure-none { max-width: none; }

body, p, li, dd { font-size: 1rem; }
@media (min-width: 1024px) { body, p, li, dd { font-size: 1.0625rem; } }

.u-caption { font-size: 0.875rem; line-height: 1.5; color: var(--gray-600); }

a { color: var(--ink); }
main a:not([class]) { text-decoration: underline; }
main a:not([class]):hover { color: var(--black); }

.u-stat-number {
  display: block;
  font-weight: 800;
  font-size: 2rem; line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
@media (min-width: 1024px) { .u-stat-number { font-size: 2.75rem; } }

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--black);
  color: var(--white);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top 0.15s ease-out;
}
.skip-link:focus { top: var(--space-4); }

:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

/* =====================================================================
   4. Layout / container / section rhythm
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 640px) { .container { padding-inline: 40px; } }

.section { padding-block: 3.5rem; }
@media (min-width: 1024px) { .section { padding-block: 7rem; } }

.section--alt { background: var(--white); }
.section--dark { background: var(--black); color: var(--white); }
.section--tight { padding-block: 2rem; }

.section__head { max-width: 42rem; margin-bottom: var(--space-12); }
.section__head--center { margin-inline: auto; text-align: center; }

/* =====================================================================
   5. Utility bar (desktop only)
   ===================================================================== */
.utility-bar {
  display: none;
  background: var(--black);
  color: var(--white);
}
@media (min-width: 1024px) { .utility-bar { display: block; } }
.utility-bar__inner {
  height: var(--utility-bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
}
.utility-bar a { color: var(--white); text-decoration: none; }
.utility-bar a:hover { text-decoration: underline; }
.utility-bar__right { display: flex; align-items: center; gap: var(--space-6); }
.utility-bar__social { display: flex; gap: var(--space-3); }
.utility-bar__social svg { width: 14px; height: 14px; }

/* =====================================================================
   6. Header (sticky)
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--divider);
}
@media (prefers-reduced-motion: no-preference) {
  .site-header { transition: box-shadow 0.2s ease-out; }
}
.site-header.is-scrolled { box-shadow: 0 2px 10px rgba(13, 13, 13, 0.08); }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h-mobile);
}
@media (min-width: 1024px) { .site-header__inner { height: var(--header-h-desktop); } }

.site-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-header__logo img { height: 41px; width: auto; display: block; }
@media (min-width: 1024px) { .site-header__logo img { height: 53px; } }

.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }

/* Phone: pill on mobile, plain ink text on desktop */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 var(--space-4);
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.header-phone svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (min-width: 1024px) {
  .header-phone {
    background: none;
    color: var(--ink);
    padding: 0;
    min-height: auto;
    font-weight: 700;
    font-size: 1.0625rem;
  }
  .header-phone svg { color: var(--ink); }
}

.site-header__cta { display: none; }
@media (min-width: 1024px) { .site-header__cta { display: inline-flex; } }

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.nav-toggle__box { position: relative; display: block; width: 22px; height: 16px; }
.nav-toggle__box span,
.nav-toggle__box::before,
.nav-toggle__box::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}
.nav-toggle__box::before { top: 0; }
.nav-toggle__box span { top: 7px; }
.nav-toggle__box::after { top: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .nav-toggle__box span,
  .nav-toggle__box::before,
  .nav-toggle__box::after { transition: transform 0.2s ease-out, opacity 0.2s ease-out; }
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::after { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span { opacity: 0; }

/* =====================================================================
   7. Primary nav / mobile menu
   ===================================================================== */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--divider);
  box-shadow: var(--shadow-hover);
  max-height: calc(100dvh - var(--header-h-mobile));
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.site-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
  .site-nav { transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
}

.site-nav__list { display: flex; flex-direction: column; padding: var(--space-4); }
.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  border-bottom: 1px solid var(--divider);
}
.site-nav__list li:last-child a { border-bottom: none; }
.site-nav__list a[aria-current="page"] { color: var(--black); box-shadow: inset 0 -2px 0 var(--black); }

.site-nav__mobile-cta { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-6); }
.site-nav__mobile-cta .btn { width: 100%; }

@media (min-width: 1024px) {
  .site-nav, .site-nav[hidden] {
    display: flex !important;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    flex: 1;
    justify-content: center;
  }
  .site-nav__list { flex-direction: row; align-items: center; gap: var(--space-12); padding: 0; }
  .site-nav__list a { min-height: auto; border-bottom: none; padding: var(--space-2) 0; white-space: nowrap; }
  .site-nav__list a[aria-current="page"] { box-shadow: inset 0 -2px 0 0 var(--black); }
  .site-nav__mobile-cta { display: none; }
}

body.nav-open { overflow: hidden; }

/* =====================================================================
   8. Buttons
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1.5px solid transparent;
}
@media (min-width: 1024px) { .btn { font-size: 1rem; } }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out; }
}

.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--accent-dark); }

.btn--secondary { background: transparent; border-color: var(--black); color: var(--black); }
.btn--secondary:hover { background: var(--black); color: var(--white); }

.btn--on-dark.btn--secondary { border-color: var(--white); color: var(--white); }
.btn--on-dark.btn--secondary:hover { background: var(--white); color: var(--black); }

.btn--tertiary {
  min-height: auto;
  padding: 0;
  border: none;
  color: var(--ink);
  gap: 0.375rem;
  font-weight: 600;
}
.btn--tertiary:hover { text-decoration: underline; }

.btn--full { width: 100%; }

/* =====================================================================
   9. Hero — photo/video (full-bleed, overlay) — home, residential,
   commercial, our-work
   ===================================================================== */
.hero-photo {
  position: relative;
  overflow: hidden;
  color: var(--white);
  min-height: 480px;
  display: flex;
}
@media (min-width: 1024px) {
  /* Full-bleed hero: always fills the full browser width. Height scales with the
     viewport (16:9-style via 56.25vw) but is floored at 560px and capped at 820px so
     it never gets too short or too tall. Driving HEIGHT (not aspect-ratio) is what keeps
     the width at 100% on ultra-wide screens; aspect-ratio + max-height caps the width. */
  .hero-photo { min-height: 0; height: clamp(560px, 56.25vw, 820px); }
}
.hero-photo__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.hero-photo__overlay { position: absolute; inset: 0; background: var(--overlay); }
.hero-photo__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  /* Bottom-anchored on every breakpoint: the overlay gradient is
     darkest at the bottom (rgba(13,13,13,0.74)) and lightest at the
     top (0.30), so anchoring text to the bottom keeps white text on
     the darkest part of the photo for reliable contrast regardless of
     what the underlying photo looks like near the top. */
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-4);
  padding-block: var(--space-8);
}
@media (min-width: 1024px) {
  .hero-photo__content {
    padding-bottom: var(--space-24);
  }
}
.hero-photo__content .u-eyebrow { color: var(--white); }
/* Interior-page hero headlines: sized down from the global 3.5rem so they don't overpower
   the page. The homepage (.hero-photo--full) keeps its own larger size via higher specificity. */
.hero-photo__content h1 { color: var(--white); font-size: clamp(1.75rem, 5vw, 2.6rem); }
.hero-photo__content p { color: var(--white); }
.hero-photo__actions { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.hero-photo__actions .btn { width: 100%; }
/* Hero CTAs run a little smaller than the site default so they don't dominate the hero. */
.hero-photo__actions .btn { min-height: 46px; padding: 0.7rem 1.4rem; font-size: 0.875rem; }
@media (min-width: 640px) {
  /* Equal-width buttons: both size to the wider of the pair */
  .hero-photo__actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: auto; }
  .hero-photo__actions .btn { width: 100%; text-align: center; justify-content: center; }
}
.hero-photo__trust { font-size: 0.875rem; color: rgba(255,255,255,0.85); }

/* Hero stat row (Google rating, roofs serviced, experience, warranty), thin divider lines between each */
.hero-stats { display: flex; flex-wrap: wrap; margin-top: var(--space-8); }
.hero-stat { padding-inline: var(--space-8); }
.hero-stat:first-child { padding-left: 0; }
.hero-stat:not(:first-child) { border-left: 1px solid rgba(255,255,255,0.22); }
.hero-stat__num { display: block; font-size: 1.5rem; font-weight: 600; color: var(--white); line-height: 1; }
.hero-stat__star { color: #F5B301; margin-left: 2px; font-size: 1.05rem; }
.hero-stat__label { display: block; margin-top: var(--space-2); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
@media (max-width: 640px) {
  /* On phones the four stats become a clean 2x2 grid with no vertical divider lines
     (those only read right in a single horizontal row). */
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-6); }
  .hero-stat { padding-inline: 0; }
  .hero-stat:not(:first-child) { border-left: 0; }
  .hero-stat__num { font-size: 1.3rem; }
}

/* Google reviews badge (top of hero, links to the Google listing) */
.google-badge { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; background: rgba(13,13,13,0.45); border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius-sm); padding: 8px 14px; color: var(--white); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; backdrop-filter: blur(4px); }
.google-badge:hover { border-color: rgba(255,255,255,0.55); background: rgba(13,13,13,0.62); }
.google-badge svg { width: 15px; height: 15px; flex-shrink: 0; }
.google-badge__star { color: #F5B301; }
.google-badge__dot { opacity: 0.5; }

/* Homepage hero: Google badge through stats as one block, centered in the middle of the hero */
.hero-photo__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.hero-photo__main .google-badge { margin-bottom: var(--space-2); }
.hero-photo--full .hero-photo__content { justify-content: center; padding-top: var(--space-16); padding-bottom: var(--space-16); }

/* =====================================================================
   10. Hero — plain (two-column, light bg) — about, service-areas
   ===================================================================== */
.hero-plain { background: var(--white); padding-block: var(--space-12); }
@media (min-width: 1024px) { .hero-plain { padding-block: var(--space-16); } }
.hero-plain__inner { display: flex; flex-direction: column; gap: var(--space-8); }
@media (min-width: 1024px) { .hero-plain__inner { flex-direction: row; align-items: center; gap: var(--space-12); } }
.hero-plain__content { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.hero-plain__media { flex: 1; }
.hero-plain__actions { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 640px) { .hero-plain__actions { flex-direction: row; } }

/* Simple intro (contact, 404) — text-only, no media column */
.hero-intro { background: var(--white); padding-block: var(--space-12) var(--space-6); }

/* =====================================================================
   11. Trust-stat band (static, no count-up)
   ===================================================================== */
.trust-bar { background: var(--paper); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); padding-block: var(--space-8); }
.trust-bar__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (min-width: 640px) { .trust-bar__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); } }
.trust-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.trust-item__icon { width: 28px; height: 28px; color: var(--ink); }
.trust-item__logo { width: 44px; height: 44px; object-fit: contain; border-radius: var(--radius-sm); }
.trust-item__stat { font-weight: 700; font-size: 1rem; color: var(--ink); }
.trust-item__caption { font-size: 0.8125rem; color: var(--gray-600); }

/* =====================================================================
   12. Photo frames / TODO-photo box (shared real-photo + missing-photo
   treatment used by service cards, gallery, case studies, about)
   ===================================================================== */
.photo-frame { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--paper); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame--3-2 { aspect-ratio: 3 / 2; }
.photo-frame--16-9 { aspect-ratio: 16 / 9; }
.photo-frame--square { aspect-ratio: 1 / 1; }

.photo-box--todo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--paper);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  text-align: center;
  padding: var(--space-4);
}
.photo-box--todo span {
  color: var(--gray-600);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* =====================================================================
   13. Service cards (equal billing: residential | commercial)
   ===================================================================== */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
/* Uniform 4-up (residential: 8 cards -> 4+4, no lone card) */
@media (min-width: 1024px) { .services-grid--4up { grid-template-columns: repeat(4, 1fr); } }
.services-grid--split { grid-template-columns: 1fr; }
@media (min-width: 640px) { .services-grid--split { grid-template-columns: repeat(2, 1fr); } }

.service-card { background: var(--white); border: 1px solid var(--divider); border-radius: var(--radius-md); overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .service-card { transition: border-color 0.15s ease-out; }
}
.service-card:hover { border-color: var(--gray-400); }
.service-card__body { padding: var(--space-6); }
.service-card h3 { margin-bottom: var(--space-3); }
.service-card ul { padding-left: 1.1em; color: var(--gray-700); margin-bottom: var(--space-4); }
.service-card li { font-size: 0.9375rem; margin-bottom: var(--space-1); }
.service-card p { color: var(--gray-700); margin-bottom: var(--space-4); }

/* Icon-based mini cards (why-CDL grid, material cards) */
.icon-card { background: var(--white); border: 1px solid var(--divider); border-radius: var(--radius-md); padding: var(--space-6); }
.icon-card__icon { width: 32px; height: 32px; color: var(--ink); margin-bottom: var(--space-4); }
.icon-card h3 { margin-bottom: var(--space-2); }
.icon-card p { color: var(--gray-700); }
.section--dark .icon-card { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.18); }
.section--dark .icon-card__icon { color: var(--accent); }
.section--dark .icon-card p { color: rgba(255,255,255,0.72); }

.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }

/* =====================================================================
   14. Anchor project feature
   ===================================================================== */
.anchor-project { display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 1024px) { .anchor-project { flex-direction: row; align-items: center; gap: var(--space-12); } }
.anchor-project__media { flex: 0 0 auto; }
@media (min-width: 1024px) { .anchor-project__media { flex: 0 0 58%; } }
.anchor-project__content { flex: 1; }
.anchor-project__result { font-weight: 700; color: var(--ink); margin-top: var(--space-2); }

/* =====================================================================
   15. Project gallery (flat cards, caption below, never overlaid)
   ===================================================================== */
.gallery-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-card__media { overflow: hidden; border: 1px solid var(--divider); border-radius: var(--radius-md); }
.gallery-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .gallery-card__media img { transition: transform 0.25s ease-out; }
  .gallery-card:hover .gallery-card__media img { transform: scale(1.02); }
}
.gallery-card__caption { margin-top: var(--space-3); font-size: 0.875rem; color: var(--gray-700); }

/* =====================================================================
   16. Case-study cards (Our Work + teasers on residential/commercial)
   ===================================================================== */
.case-study-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .case-study-grid { grid-template-columns: repeat(2, 1fr); } }
.case-study-card { border: 1px solid var(--divider); border-radius: var(--radius-md); overflow: hidden; background: var(--white); }
.case-study-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.case-study-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-study-card__body { padding: var(--space-6); border-top: 1px solid var(--divider); }
.case-study-card__body h3 { margin: var(--space-2) 0; }
.case-study-card__result { color: var(--gray-700); margin-bottom: var(--space-4); }
.case-study-card__quote {
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--gray-700);
  margin-top: var(--space-3);
  padding-left: var(--space-3);
  border-left: 2px solid var(--divider);
}
.case-study-card__quote cite { display: block; margin-top: var(--space-1); font-style: normal; font-weight: 600; font-size: 0.8125rem; color: var(--gray-600); }

.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* =====================================================================
   17. Storm-damage band (the ONE other overlay moment besides hero)
   ===================================================================== */
.storm-band {
  position: relative;
  overflow: hidden;
  color: var(--white);
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.storm-band__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.storm-band__overlay { position: absolute; inset: 0; background: var(--overlay); }
.storm-band__content { position: relative; z-index: 1; max-width: 42rem; padding-block: var(--space-12); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.storm-band__content h2 { color: var(--white); }
.storm-band__content p { color: rgba(255,255,255,0.9); }

/* =====================================================================
   18. Credential / badge row
   ===================================================================== */
.credential-row { background: var(--paper); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); padding-block: var(--space-8); }
.credential-row__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4) var(--space-12); text-align: center; }
.credential-row__item { font-weight: 700; font-size: 0.9375rem; color: var(--ink); }
.credential-row__item span { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--gray-600); margin-top: var(--space-1); }

/* =====================================================================
   19. Testimonials (light bg, static grid, plain stars)
   ===================================================================== */
.testimonial-band { background: var(--white); padding-block: var(--space-16); }
.testimonial-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 1024px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial { text-align: center; display: flex; flex-direction: column; align-items: center; }
.testimonial__stars { color: var(--black); margin-bottom: var(--space-3); letter-spacing: 0.1em; }
.testimonial__quote { color: var(--ink); font-size: 1.0625rem; }
.testimonial__attribution { display: block; margin-top: var(--space-4); font-weight: 600; font-size: 0.875rem; color: var(--gray-600); }

.testimonial-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); }
.testimonial-dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--divider); }
.testimonial-dots button[aria-current="true"] { background: var(--black); }

/* =====================================================================
   20. Quote form
   ===================================================================== */
.quote-form-section { background: var(--paper); padding-block: var(--space-16); }
@media (min-width: 1024px) { .quote-form-section { padding-block: var(--space-24); } }

.quote-form-layout { display: grid; gap: var(--space-12); }
@media (min-width: 1024px) { .quote-form-layout--with-aside { grid-template-columns: 3fr 2fr; } }

.quote-form { background: var(--white); border: 1px solid var(--divider); border-radius: var(--radius-md); padding: 2rem; }
@media (min-width: 768px) { .quote-form { padding: 2.5rem; } }

.form-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: var(--space-6); }
.form-field label { font-weight: 600; font-size: 0.875rem; color: var(--ink); }
.form-field .u-required { color: var(--ink); }
.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
  background: var(--white);
  font-size: 1rem;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(13, 13, 13, 0.12);
}
@media (prefers-reduced-motion: no-preference) {
  .form-field input, .form-field select, .form-field textarea {
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
  }
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border: 2px solid var(--black); }
.form-field__error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.8125rem;
}
.form-field.has-error .form-field__error { display: flex; }
.form-field__error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 800;
  flex-shrink: 0;
}

.quote-form__call-line { text-align: center; margin-bottom: var(--space-4); font-size: 0.9375rem; }
.quote-form__submit { width: 100%; min-height: 52px; }
.quote-form__trust { margin-top: var(--space-4); text-align: center; font-size: 0.875rem; color: var(--gray-600); }
.quote-form__notice {
  display: none;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  font-size: 0.9375rem;
  background: var(--paper);
}
.quote-form__notice.is-visible { display: block; }

.honeypot-field { position: absolute; left: -9999px; top: -9999px; }

.contact-card { background: var(--white); border: 1px solid var(--divider); border-radius: var(--radius-md); padding: var(--space-8); height: fit-content; }
.contact-card h3 { margin-bottom: var(--space-4); }
.contact-card__row { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.contact-card__row svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink); margin-top: 2px; }

/* =====================================================================
   21. Footer
   ===================================================================== */
.site-footer { background: var(--black); color: var(--gray-400); }
.site-footer a { color: var(--gray-400); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

.footer__top { padding-block: var(--space-16); }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }

.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__logo img { height: 32px; width: auto; }
.footer__blurb { font-size: 0.9375rem; color: var(--gray-400); max-width: 32ch; }
.footer__social { display: flex; gap: var(--space-3); }
.footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); }
.footer__social svg { width: 18px; height: 18px; }

.footer__col-title { font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); margin-bottom: var(--space-4); }
.footer__col ul { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.footer__col li { font-size: 0.9375rem; }

.footer__areas { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); font-size: 0.875rem; }
.footer__areas a { text-decoration: underline; }

.footer__hours dt { font-weight: 600; color: var(--white); margin-top: var(--space-2); }
.footer__hours dd { font-size: 0.9375rem; }

.footer__phone-btn { display: inline-block; color: var(--white); font-weight: 600; font-size: 1rem; text-decoration: none; margin: var(--space-2) 0; }
.footer__phone-btn:hover { color: var(--gray-400); text-decoration: none; }

details.footer__col summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
details.footer__col summary::-webkit-details-marker { display: none; }
details.footer__col summary::after { content: "+"; font-size: 1.25rem; color: var(--white); }
details.footer__col[open] summary::after { content: "\2212"; }
details.footer__col .footer__col-body { padding-top: var(--space-2); padding-bottom: var(--space-4); }

@media (min-width: 768px) {
  details.footer__col summary { cursor: default; pointer-events: none; min-height: auto; }
  details.footer__col summary::after { display: none; }
  details.footer__col .footer__col-body { padding: 0; }
}

.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-block: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); font-size: 0.8125rem; color: var(--gray-400); }
@media (min-width: 768px) { .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } }

/* =====================================================================
   22. Mobile sticky contact bar (replaces v1 FAB + mobile-cta-bar)
   ===================================================================== */
.mobile-sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: flex;
  height: var(--mobile-bar-h);
  box-shadow: 0 -2px 10px rgba(13, 13, 13, 0.10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}
.mobile-sticky-bar.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-sticky-bar { transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
}
.mobile-sticky-bar a {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  min-height: 44px;
}
.mobile-sticky-bar__call { background: var(--black); color: var(--white); }
.mobile-sticky-bar__quote { background: var(--white); color: var(--black); border-left: 1.5px solid var(--black); }
.mobile-sticky-bar svg { width: 18px; height: 18px; }
@media (min-width: 1024px) { .mobile-sticky-bar { display: none; } }

body { padding-bottom: 0; }
@media (max-width: 1023px) {
  body.has-mobile-bar { padding-bottom: var(--mobile-bar-h); }
}

/* =====================================================================
   23. Monsoon callout — neutral (content kept, color treatment dropped)
   ===================================================================== */
.monsoon-callout {
  background: var(--paper);
  border: 1px solid var(--divider);
  border-left: 4px solid var(--black);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 768px) { .monsoon-callout { flex-direction: row; align-items: flex-start; gap: var(--space-8); } }
.monsoon-callout__icon { flex-shrink: 0; width: 40px; height: 40px; color: var(--ink); }
.monsoon-callout__card h2, .monsoon-callout__card h3 { margin-bottom: var(--space-3); }

/* =====================================================================
   24. UV gradient bar — restyled monochrome (no clay gradient)
   ===================================================================== */
.uv-bar-widget { display: flex; flex-direction: column; gap: var(--space-2); max-width: 28rem; }
.uv-bar { height: 10px; border-radius: var(--radius-pill); border: 1px solid var(--divider); background: linear-gradient(90deg, var(--white), var(--black)); }
.uv-bar-widget__labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--gray-600); letter-spacing: 0.04em; text-transform: uppercase; }

/* =====================================================================
   25. Material comparison cards — monochrome (no color coding)
   ===================================================================== */
.material-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
/* Breathing room when material cards follow a split-block (underlayment section) */
.split-block + .material-grid { margin-top: var(--space-12); }
@media (min-width: 768px) { .material-grid { grid-template-columns: repeat(3, 1fr); } }
/* 4-card comparison: 2x2 on tablet, single row of 4 on desktop (no lone card) */
@media (min-width: 640px) { .material-grid--4up { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .material-grid--4up { grid-template-columns: repeat(4, 1fr); } }
.material-card { background: var(--white); border: 1px solid var(--divider); border-radius: var(--radius-md); padding: var(--space-6); }
.material-card__icon { width: 28px; height: 28px; margin-bottom: var(--space-4); color: var(--ink); }

/* =====================================================================
   26. FAQ accordion
   ===================================================================== */
.faq-list { display: flex; flex-direction: column; gap: var(--space-4); max-width: 62ch; margin-inline: auto; }
.faq-item { background: var(--white); border: 1px solid var(--divider); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 44px; font-weight: 700; font-size: 1rem; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex-shrink: 0; font-size: 1.25rem; color: var(--ink); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin-top: var(--space-3); color: var(--gray-700); max-width: none; }

/* =====================================================================
   27. Scroll reveal — one mechanism, no stagger choreography
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* =====================================================================
   Project cards — soft shadow at rest, lift and deepen on hover
   ===================================================================== */
.case-study-card, .project-feature { box-shadow: 0 10px 24px -18px rgba(13,13,13,0.28); }
@media (prefers-reduced-motion: no-preference) {
  .case-study-card.reveal, .project-feature.reveal { transition: opacity 0.4s ease-out, transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease; }
  .case-study-card:not(.reveal), .project-feature:not(.reveal) { transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease; }
}
.case-study-card:hover, .project-feature:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -24px rgba(13,13,13,0.42); }

/* =====================================================================
   Scrolling credential marquee
   ===================================================================== */
.marquee { overflow: hidden; border-block: 1px solid var(--divider); background: var(--white); height: 50px; display: flex; align-items: center; }
.marquee__track { display: flex; width: max-content; animation: marquee-scroll 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; padding-block: var(--space-5); flex-shrink: 0; }
.marquee__group > span { display: inline-flex; align-items: center; white-space: nowrap; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-700); padding-inline: var(--space-6); }
.marquee__group > span::after { content: "\2726"; margin-left: var(--space-6); color: var(--gray-400); font-size: 0.7rem; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; } }

/* Dark stats band */
.stat-band__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); text-align: center; }
@media (min-width: 768px) { .stat-band__grid { grid-template-columns: repeat(4, 1fr); } }
.stat-item__num { display: block; font-size: 2.25rem; font-weight: 800; line-height: 1.05; color: var(--white); }
.stat-item__label { display: block; margin-top: var(--space-2); font-size: 0.875rem; color: rgba(255,255,255,0.72); }

/* Legibility for headings/eyebrows on dark sections */
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark .section__head .u-eyebrow, .section--dark .u-eyebrow { color: var(--accent); }
.section--dark .section__head p { color: rgba(255,255,255,0.75); }

/* How We Work — process steps (dark, bordered cards) */
.process-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-12); }
@media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(5, 1fr); } }
.process-step { padding: var(--space-6); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-md); background: rgba(255,255,255,0.02); }
.process-step__num { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: 0.04em; color: var(--accent); }
.process-step h3 { margin: var(--space-3) 0 var(--space-2); color: var(--white); }
.process-step p { color: rgba(255,255,255,0.72); font-size: 0.875rem; margin: 0; }

/* Capabilities brochure download link (bordered button) */
.brochure-link { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--accent); color: var(--accent); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 11px 20px; border-radius: var(--radius-sm); text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.brochure-link:hover { background: var(--accent); color: var(--white); }

/* Signs list (residential, side-by-side) */
ul.sign-list { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-4); }
.sign-list li { position: relative; padding-left: var(--space-6); color: var(--gray-700); }
.sign-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

/* Honest Version — 3 failure-mode cards (dark) */
.honest-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-12); }
@media (min-width: 900px) { .honest-grid { grid-template-columns: repeat(3, 1fr); } }
.honest-point { padding: var(--space-6); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-md); background: rgba(255,255,255,0.02); }
.honest-point__num { display: block; font-size: 1.75rem; font-weight: 800; color: var(--accent); }
.honest-point h3 { margin: var(--space-3) 0 var(--space-2); color: var(--white); font-size: 1.0625rem; }
.honest-point p { color: rgba(255,255,255,0.72); font-size: 0.9375rem; margin: 0; }

/* Flagship horizontal project feature (Embassy, country club, etc.) */
.project-feature { display: grid; border: 1px solid var(--divider); border-radius: var(--radius-md); overflow: hidden; background: var(--white); }
.project-feature__media { overflow: hidden; aspect-ratio: 16 / 10; }
.project-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-feature__body { padding: var(--space-8); display: flex; flex-direction: column; justify-content: center; }
.project-feature__body h3 { margin: var(--space-2) 0 var(--space-3); }
@media (min-width: 768px) {
  .project-feature { grid-template-columns: 1.2fr 1fr; }
  .project-feature__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
}
.project-feature__media--stack { aspect-ratio: auto; display: grid; grid-auto-rows: 1fr; gap: 4px; }
.project-feature__media--stack img { min-height: 210px; }
@media (min-width: 768px) { .project-feature__media--stack { min-height: 540px; } }

/* =====================================================================
   28. Misc utilities
   ===================================================================== */
.u-text-center { text-align: center; }
.u-mt-0 { margin-top: 0; }
.u-flex { display: flex; }
.u-gap-2 { gap: var(--space-2); }
.u-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--paper);
  border: 1px solid var(--divider);
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  font-size: 0.8125rem;
  font-weight: 600;
}
.u-todo {
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  border: 1px dashed var(--gray-400);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: 0.8125rem;
  font-style: italic;
}

/* =====================================================================
   Page-specific rules go below this line, one clearly commented
   section per page, e.g.:
   /* ===== Our Work page ===== */
/* ===================================================================== */

/* ===== Home page (index.html) ===== */
.case-study-grid--featured { grid-template-columns: 1fr; }
@media (min-width: 640px) { .case-study-grid--featured { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .case-study-grid--featured { grid-template-columns: repeat(3, 1fr); } }

/* ===== About page leadership portrait ===== */
.about-portrait { margin: 0; align-self: center; }
.about-portrait__media { max-width: 380px; margin-inline: auto; position: relative; }
.about-portrait__photo {
  display: block;
  width: 100%;
  height: auto;
  /* Clean full portrait, no edge fade. */
}
.about-portrait__caption { margin-top: var(--space-3); text-align: center; }
.about-portrait__circa { display: block; margin-top: var(--space-1); font-size: 0.8125rem; font-style: italic; color: var(--gray-400); }
/* Desktop: pull the caption out of flow so the PHOTO (not photo+caption) centers against the paragraph */
@media (min-width: 900px) {
  .about-portrait { position: relative; }
  .about-portrait__caption { position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--space-4); }
}
.about-portrait__caption strong { display: block; font-size: 1.0625rem; color: var(--ink); font-weight: 700; }
.about-portrait__caption span { display: block; margin-top: var(--space-1); font-size: 0.9375rem; color: var(--gray-600); }

/* ===== Service areas page (AZ coverage map with location pins) ===== */
.coverage-block { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .coverage-block { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }
.coverage-block__text .section__head { margin-bottom: var(--space-4); }
.coverage-block__text p { color: var(--gray-700); max-width: 52ch; }
.coverage-block__map { display: flex; justify-content: center; }

.az-map { width: 100%; max-width: 440px; height: auto; }
.az-map__shape { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.az-map__dot { fill: var(--ink); stroke: var(--white); stroke-width: 1.5; }
.az-map__pin--hub .az-map__dot { fill: var(--black); }
/* Pulse ring on the Phoenix hub */
.az-map__pin--hub { transform-box: fill-box; transform-origin: center; }
.az-map__pin--hub::after { content: ""; }
.az-map__hub-ring { fill: none; stroke: var(--ink); stroke-width: 1.25; opacity: 0.5; transform-box: fill-box; transform-origin: center; animation: azPulse 2.6s ease-out infinite; }
@keyframes azPulse { 0% { r: 6px; opacity: 0.55; } 100% { r: 18px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .az-map__hub-ring { animation: none; opacity: 0; } }
.az-map__label { font-family: var(--font); font-size: 9px; font-weight: 700; fill: var(--ink); letter-spacing: 0.02em; }
.az-map__label--left { text-anchor: end; }
.az-map__pin--hub .az-map__label { font-size: 9px; }

/* Vector logo */
.site-header__logo svg { height: 30px; width: auto; display: block; color: var(--ink); }
@media (min-width: 1024px) { .site-header__logo svg { height: 36px; } }
.footer__logo svg { height: 44px; width: auto; display: block; color: var(--white); }
.hero-plain__media img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }

/* Transparent header over photo/video heroes */
body.has-photo-hero .hero-photo { margin-top: -64px; }
@media (min-width: 1024px) { body.has-photo-hero .hero-photo { margin-top: -84px; } }
body.has-photo-hero:not(.nav-open) .site-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; }
body.has-photo-hero:not(.nav-open) .site-header:not(.is-scrolled) .site-header__logo svg { color: var(--white); }
body.has-photo-hero:not(.nav-open) .site-header:not(.is-scrolled) .site-nav__list a { color: var(--white); }
body.has-photo-hero:not(.nav-open) .site-header:not(.is-scrolled) .site-nav__list a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--white); }
body.has-photo-hero:not(.nav-open) .site-header:not(.is-scrolled) .nav-toggle__box span,
body.has-photo-hero:not(.nav-open) .site-header:not(.is-scrolled) .nav-toggle__box::before,
body.has-photo-hero:not(.nav-open) .site-header:not(.is-scrolled) .nav-toggle__box::after { background: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  .site-header { transition: background-color 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out; }
}

/* Original logo recolor states */
body.has-photo-hero:not(.nav-open) .site-header:not(.is-scrolled) .site-header__logo img { filter: brightness(0) invert(1); }
.footer__logo img { height: 48px; width: auto; }

.u-grayscale { filter: grayscale(1) contrast(1.05); }

#hero-video, #hero-video-b { transition: opacity 0.7s ease; }
#hero-video-b { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #hero-video, #hero-video-b { transition: none; } }

/* Taller hero variant (About): desktop matches the photo's 16:9 exactly (zero crop) */
@media (min-width: 768px) { .hero-photo--tall { height: auto; aspect-ratio: 16 / 9; min-height: 0; max-height: none; } }
@media (max-width: 767px) { .hero-photo--tall { min-height: 540px; height: 70vh; } }

.h1-stack { display: block; }

/* Credential strip -- quiet plaque row */
.cred-strip { background: var(--paper); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.cred-strip__inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-3) var(--space-8); padding: var(--space-6) 0; }
.cred-strip span { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-700); white-space: nowrap; }
.cred-strip span:not(:last-child)::after { content: "\00b7"; margin-left: var(--space-8); color: var(--gray-400); }
@media (max-width: 767px) { .cred-strip span:not(:last-child)::after { content: none; } .cred-strip__inner { gap: var(--space-2) var(--space-6); } }

/* Nav polish: wider tracking + understated underline on hover */
@media (min-width: 1024px) {
  .site-nav__list a { letter-spacing: 0.06em; }
  .site-nav__list a:hover { box-shadow: inset 0 -2px 0 currentColor; }
}
/* Section-head signature: short black rule under every section heading */
.section__head h2::after { content: ""; display: block; width: 44px; height: 3px; background: var(--accent); margin-top: var(--space-3); }
.section__head h2 { margin-bottom: var(--space-6); }
.section__head p { margin-top: 0; }
.section__head--center h2::after { margin-left: auto; margin-right: auto; }

a.gallery-card { text-decoration: none; color: inherit; display: block; }
a.gallery-card .gallery-card__caption { font-weight: 600; color: var(--ink); }
a.gallery-card:hover .gallery-card__caption { text-decoration: underline; }

.cred-strip__badge { display: inline-flex; align-items: center; gap: var(--space-3); }
.cred-strip__badge img { height: 44px; width: auto; }
.u-inline-badge { height: 48px; width: auto; float: left; margin-right: var(--space-3); }

.split-block { display: grid; gap: var(--space-8); margin-top: var(--space-12); align-items: center; }
@media (min-width: 900px) { .split-block { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }

/* Insights */
.hero-intro { padding: var(--space-16) 0 var(--space-8); border-bottom: 1px solid var(--divider); }
.hero-intro h1 { margin-bottom: var(--space-3); }
.hero-intro p { color: var(--gray-600); max-width: 48rem; }
.insight-list { max-width: 52rem; }
.insight-item { padding: var(--space-8) 0; border-bottom: 1px solid var(--divider); }
.insight-item:last-child { border-bottom: none; }
.insight-item h2 { margin: var(--space-2) 0 var(--space-3); }
.insight-item h2 a { color: var(--ink); text-decoration: none; }
.insight-item h2 a:hover { text-decoration: underline; }
.insight-item p { color: var(--gray-700); max-width: 62ch; }
.insight-item--featured { padding-top: var(--space-4); }
.insight-item--featured h2 { font-size: 2rem; }
@media (min-width: 1024px) { .insight-item--featured h2 { font-size: 2.5rem; } }
/* Article */
.article { padding: var(--space-16) 0 var(--space-24); }
.article__inner { max-width: 44rem; }
.article h1 { margin: var(--space-3) 0 var(--space-6); }
.article__lead { font-size: 1.1875rem; line-height: 1.55; color: var(--gray-700); margin-bottom: var(--space-8); }
.article h2 { font-size: 1.5rem; margin: var(--space-12) 0 var(--space-4); }
.article h2::after { content: ""; display: block; width: 32px; height: 2px; background: var(--black); margin-top: var(--space-3); }
.article p { margin-bottom: var(--space-4); }
.article__cta { margin-top: var(--space-12); padding: var(--space-8); border: 1px solid var(--divider); border-radius: var(--radius-md); }
.article__cta p { font-weight: 600; }
.article__cta .btn { margin-right: var(--space-3); margin-top: var(--space-2); }

/* Property-type marquee */
.pt-marquee { overflow: hidden; margin-top: var(--space-8); }
.pt-track { display: flex; gap: var(--space-6); width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .pt-track { animation: pt-scroll 45s linear infinite; }
  .pt-marquee:hover .pt-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .pt-marquee { overflow-x: auto; } }
@keyframes pt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pt-card { flex: 0 0 auto; width: 280px; margin: 0; }
.pt-card img { width: 100%; height: 187px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--divider); display: block; }
.pt-card figcaption { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-700); margin-top: var(--space-2); }

/* Full-height homepage hero: credential strip lands at the bottom of the viewport */
/* Hero fills the window (utility bar 34px + ticker 50px accounted for so the ticker sits flush at the bottom),
   but uses min-height + auto so the tagline and buttons are never cut off when the window is resized. */
.hero-photo--full { min-height: calc(100svh - 84px); height: auto; max-height: none; }
/* Cinematic grade on the homepage hero video: darker and moodier, richer contrast,
   slightly desaturated for a filmic look. No sepia, keeps it out of the brown range. */
.hero-photo--full .hero-photo__media { filter: saturate(0.9) contrast(1.16) brightness(0.78); }
@media (max-width: 1023px) { .hero-photo--full { min-height: calc(100svh - 120px); height: auto; } }
@media (max-width: 767px) { .hero-photo--full { min-height: 100vh; min-height: 100dvh; height: auto; } }
@media (max-width: 767px) {
  /* Declutter the mobile hero video: drop the eyebrow line and the tagline paragraph
     so the video is not crowded with text. Keep the Google badge, headline, CTAs and
     trust stats, spaced out and centered over the full hero height so it breathes. */
  .hero-photo--full .hero-photo__main > .u-eyebrow,
  .hero-photo--full .hero-photo__main > p:not([class]) { display: none; }
  .hero-photo--full .hero-photo__main { gap: var(--space-6); }
  .hero-photo--full .hero-stats { margin-top: var(--space-2); }
  /* Push the whole block (badge, headline, buttons, stats) down toward the bottom of the
     hero, same as desktop. Safe because the hero grows with its content, so it can't spill
     up into the header. */
  .hero-photo--full .hero-photo__content { justify-content: flex-end; }
}

/* Insights: image-led cards */
.insight-feature { display: grid; gap: var(--space-6); text-decoration: none; color: inherit; border: 1px solid var(--divider); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-12); }
@media (min-width: 900px) { .insight-feature { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.insight-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16/10; }
.insight-feature__body { padding: var(--space-6) var(--space-8) var(--space-8); }
.insight-feature__body h2 { margin: var(--space-2) 0 var(--space-4); }
.insight-feature__body p { color: var(--gray-700); max-width: 55ch; margin-bottom: var(--space-4); }
.insight-feature:hover h2 { text-decoration: underline; }
.insight-grid { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .insight-grid { grid-template-columns: 1fr 1fr; } }
.insight-card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--divider); border-radius: var(--radius-md); overflow: hidden; }
.insight-card__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.insight-card__body { padding: var(--space-6); }
.insight-card__body h3 { margin: var(--space-2) 0 var(--space-3); }
.insight-card__body p { color: var(--gray-700); margin-bottom: var(--space-3); }
.insight-card:hover h3 { text-decoration: underline; }
.article__hero { margin: 0 0 var(--space-8); }
.article__hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-md); display: block; }

/* Credentials overlaid at the bottom of the hero video */
.hero-cred { position: absolute; left: 0; right: 0; bottom: var(--space-4); z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-8); padding: 0 var(--space-6); }
.hero-cred span { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); white-space: nowrap; opacity: 0.92; }
.hero-photo--full .hero-photo__content h1, .hero-photo--full .hero-photo__content p { text-shadow: 0 2px 24px rgba(13,13,13,0.45); }
/* Longer homepage headline sized down a touch so it sits clean */
.hero-photo--full .hero-photo__content h1 { font-size: clamp(1.9rem, 6.5vw, 2.4rem); }
@media (min-width: 1024px) { .hero-photo--full .hero-photo__content h1 { font-size: 2.9rem; } }
/* Homepage hero headline: a small uppercase kicker ("RESIDENTIAL & COMMERCIAL") sits over
   the big main line ("Roofing Repair & Replacement"). Hierarchy comes from size and case,
   both white, so it always reads over the dark video. */
.hero-photo--full .hero-photo__content h1 .h1-kicker {
  display: block;
  font-size: clamp(0.8rem, 2.4vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  color: #F5B301;
}
.hero-photo--full .hero-photo__content h1 .h1-stack { font-style: normal; }
/* Homepage hero block sits low in the frame, not mid-picture */
.hero-photo--full .hero-photo__content { padding-bottom: var(--space-12); }
@media (min-width: 1024px) { .hero-photo--full .hero-photo__content { justify-content: flex-end; padding-bottom: var(--space-24); } }
@media (max-width: 767px) { .hero-cred { gap: var(--space-1) var(--space-4); bottom: var(--space-3); } .hero-cred span { font-size: 0.6875rem; } }

/* Service area cards */
.area-grid { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 768px) { .area-grid { grid-template-columns: 1fr 1fr; } }
.area-card { border: 1px solid var(--divider); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); }
.area-card h3 { margin-bottom: var(--space-3); }
.area-card p { color: var(--gray-700); }

/* Crisp separation between page sections */
main > section + section { border-top: 1px solid var(--divider); }
main > .hero-photo + section, main > section.cred-strip + section { border-top: 1px solid var(--divider); }

/* Credential cards (About) */
.cred-grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .cred-grid { grid-template-columns: 1fr 1fr; } }
.cred-card { position: relative; border: 1px solid var(--divider); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); }
.cred-card h3 { font-size: 1.125rem; margin-bottom: var(--space-2); }
.cred-card p { color: var(--gray-700); font-size: 0.9375rem; margin: 0; }
.cred-card__badge { float: right; margin-left: var(--space-4); }
.cred-card__badge img { height: 56px; width: auto; display: block; }
a.cred-card { display: block; text-decoration: none; color: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
a.cred-card:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.cred-stars { color: #F5B301; letter-spacing: 3px; font-size: 1.05rem; line-height: 1; margin-bottom: var(--space-2); }
.bbb-seal { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.bbb-seal__mark { background: #0a4d8c; color: #fff; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-style: italic; letter-spacing: 1px; font-size: 1rem; line-height: 1; padding: 5px 9px; border-radius: 3px; }
.bbb-seal__grade { color: #0a4d8c; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.5px; }

/* Clean image-only hero: no overlay, no text */
.hero-photo--clean { height: 58vh; min-height: 380px; max-height: 640px; }
.hero-photo--clean .hero-photo__overlay { display: none; }
.section__head h1::after { content: ""; display: block; width: 44px; height: 3px; background: var(--accent); margin-top: var(--space-3); }
.section__head h1 { margin-bottom: var(--space-6); }

/* Global paragraph rhythm: consecutive paragraphs always get breathing room */
p + p { margin-top: var(--space-4); }
.split-block h3 + p, .split-block .section__head + p { margin-top: 0; }

/* Sectioned image collage hero (Our Work) */
.hero-collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; background: var(--white); height: 44vh; min-height: 320px; }
@media (min-width: 900px) { .hero-collage { grid-template-columns: repeat(4, 1fr); height: 52vh; max-height: 560px; } }
.hero-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }