/* =============================================================================
   ShingleMe Roofing - Global Stylesheet
   Design system: "The Ridgeline"
   -----------------------------------------------------------------------------
   Token system → base/typography → layout primitives → components → sections
   → header/footer → gallery + lightbox → motion → responsive.
   Every color and type decision derives from the tokens block below.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (sampled from the established ShingleMe identity) */
  --gold:        #A8995F;   /* signature warm taupe/gold accent */
  --gold-2:      #9C8E63;   /* secondary gold (panels) */
  --gold-deep:   #8A7D50;   /* hover / pressed gold */
  --gold-soft:   #C7BC93;   /* light gold for fine accents on dark */
  --gold-ink:    #7A6300;   /* dark gold — readable as text/accents on light bg (5.2:1 on bone) */
  --gold-ink-deep: #3a3318; /* deep gold-brown — eyebrows/labels over gold (CTA) backgrounds */
  --ink:         #0D0D0D;   /* near-black, big dark sections */
  --charcoal:    #262626;   /* dark slate, secondary dark sections */
  --bone:        #F4F1EA;   /* warm off-white light sections */
  --bone-2:      #EAE5D8;   /* slightly deeper warm neutral */
  --white:       #FFFFFF;

  /* Functional text colors */
  --text-on-dark:        rgba(255,255,255,0.92);
  --text-on-dark-muted:  rgba(255,255,255,0.62);
  --text-on-light:       #23211C;
  --text-on-light-muted: #5C584E;
  --line-on-dark:        rgba(255,255,255,0.14);
  --line-on-light:       rgba(0,0,0,0.10);

  /* Typography - Poppins for titles, Arial for body (per brand direction) */
  --font-display: "Poppins", system-ui, sans-serif;   /* titles, labels, buttons, nav */
  --font-serif:   "Poppins", system-ui, sans-serif;   /* eyebrows / kickers (sans, letterspaced) */
  --font-body:    Arial, Helvetica, "Liberation Sans", sans-serif;
  --font-logo:    "Cinzel", Georgia, serif;            /* logo wordmark fallback only */

  /* Fluid type scale */
  --fs-eyebrow: clamp(0.78rem, 0.7rem + 0.4vw, 0.95rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.18vw, 1.08rem);
  --fs-lead:    clamp(1.12rem, 1.02rem + 0.5vw, 1.35rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --fs-h1:      clamp(2.7rem, 1.6rem + 5.2vw, 6rem);

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(1.1rem, 0.6rem + 2.5vw, 2.6rem);
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --radius: 4px;          /* restrained, near-architectural */
  --radius-pill: 999px;
  --peak: 34px;            /* height of the roofline divider */

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;

  /* Elevation */
  --shadow-card: 0 18px 40px -22px rgba(0,0,0,0.55);
  --shadow-lift: 0 30px 60px -28px rgba(0,0,0,0.65);
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-on-light);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  background: var(--ink); color: var(--white); padding: 0.75rem 1.25rem;
  z-index: 2000; border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 0; }
@media (max-width: 820px) {
  /* On mobile, top:0 lands behind browser chrome — drop it below the header */
  .skip-link:focus { top: 4.5rem; }
}

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: 0.7;
}
/* eyebrows pop in vivid yellow over dark backgrounds */
.section--ink .eyebrow, .section--charcoal .eyebrow,
.hero .eyebrow, .photo-head .eyebrow, .reward-card .eyebrow { color: var(--gold); }

h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.h1, h1 { font-size: var(--fs-h1); font-weight: 900; }
.h2, h2 { font-size: var(--fs-h2); font-weight: 900; letter-spacing: 0.01em; }
.h3, h3 { font-size: var(--fs-h3); font-weight: 900; letter-spacing: 0.02em; line-height: 1.1; }

.subhead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
}

.lead { font-size: var(--fs-lead); line-height: 1.55; }
.muted { color: var(--text-on-light-muted); }
.on-dark .muted, .muted-d { color: var(--text-on-dark-muted); }

/* gold underline rule used under headings */
.rule {
  width: 64px; height: 3px; background: var(--gold); border: 0; margin: 1.1rem 0 0;
}
.rule--center { margin-inline: auto; }

/* -----------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }
.wrap--wide { max-width: 1440px; }

.section { padding-block: var(--section-y); position: relative; }
.section--ink      { background: var(--ink);      color: var(--text-on-dark); }
.section--charcoal { background: var(--charcoal);  color: var(--text-on-dark); }
.section--gold     { background: var(--gold);      color: #1d1a10; }
.section--bone     { background: var(--bone); }
.section--white    { background: var(--bone); }
.section--ink, .section--charcoal { }
.section--ink h1, .section--ink h2, .section--ink h3,
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3 { color: var(--white); }

.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.75rem; }

/* Signature roofline divider - a subtle peak at the top edge of a section.
   Used sparingly to make sections meet like a roofline, not a flat seam. */
.peak-top {
  clip-path: polygon(0 var(--peak), 50% 0, 100% var(--peak), 100% 100%, 0 100%);
  margin-top: calc(var(--peak) * -1);
  padding-top: calc(var(--section-y) + var(--peak));
}
/* A-frame divider with a ridge line hugging the roof slopes */
.peak-top--ridge { position: relative; }
.peak-top--ridge::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%;
  height: calc(var(--peak) + 4px); background: var(--gold);
  clip-path: polygon(
    0 var(--peak), 50% 0, 100% var(--peak),
    100% calc(var(--peak) + 4px), 50% 4px, 0 calc(var(--peak) + 4px)
  );
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   5. ROOF-PEAK MOTIF (inline-SVG accent helper styling)
   -------------------------------------------------------------------------- */
.peak-accent { width: 58px; height: auto; color: var(--gold); }
.peak-accent path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* animated draw-on used in hero */
.peak-draw path {
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: peak-draw 1.4s var(--ease) 0.3s forwards;
}
@keyframes peak-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .peak-draw path { animation: none; stroke-dashoffset: 0; }
}

/* -----------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 500; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem;
  padding: 0.95rem 1.9rem; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  will-change: transform;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn--gold    { background: var(--gold); color: #1c1a11; }
.btn--gold:hover { background: var(--ink); color: #fff; box-shadow: var(--shadow-card); }

.btn--dark    { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: #000; box-shadow: var(--shadow-card); }

.btn--light   { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--bone); box-shadow: var(--shadow-card); }

.btn--outline { border-color: currentColor; color: inherit; }
.btn--outline:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn--outline-gold { border-color: var(--gold); color: var(--gold); }
.btn--outline-gold:hover { background: var(--gold); color: #1c1a11; }

.btn--outline-dark { border-color: var(--ink); color: var(--ink); }
.btn--outline-dark:hover { background: var(--ink); color: var(--white); }

.btn--lg { padding: 1.15rem 2.4rem; font-size: 1rem; }

/* -----------------------------------------------------------------------------
   7. UTILITY BAR + HEADER NAV  (markup injected by js/components.js)
   -------------------------------------------------------------------------- */
/* top announcement banner (dismissible) */
.announce-bar { background: var(--gold); color: #1c1a11; font-size: 0.86rem; }
.announce-bar[hidden] { display: none; }
.announce-bar__inner { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 42px; padding-block: 0.45rem; position: relative; }
.announce-bar__text { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center; text-align: center; line-height: 1.3; }
.announce-bar__text strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.announce-bar__peak { width: 20px; height: 12px; flex: none; }
.announce-bar__peak path { fill: none; stroke: #1c1a11; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.announce-bar__text a { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.announce-bar__text a svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.announce-bar__text a:hover svg { transform: translateX(3px); }
.announce-bar__close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #1c1a11; transition: background 0.2s var(--ease); }
.announce-bar__close:hover { background: rgba(0,0,0,0.12); }
.announce-bar__close svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .announce-bar { font-size: 0.78rem; }
  /* keep the close button inside the viewport (right:-6px caused a 6px horizontal scroll) */
  .announce-bar__close { right: 0; }
  /* Let the "Learn more" link wrap instead of blowing out horizontally */
  .announce-bar__text a { display: inline; }
  .announce-bar__text a svg { display: none; }
}

.utility-bar {
  background: var(--ink); color: var(--text-on-dark-muted);
  font-size: 0.82rem; border-bottom: 1px solid var(--line-on-dark);
}
.utility-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 42px; padding-block: 0.35rem;
}
.utility-bar a { color: var(--text-on-dark-muted); transition: color 0.2s var(--ease); }
.utility-bar a:hover { color: var(--gold); }
.utility-socials { display: flex; align-items: center; gap: 0.4rem; }
.utility-socials a {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--line-on-dark); border-radius: 50%; color: var(--white);
}
.utility-socials a:hover { border-color: var(--gold); }
.utility-socials svg { width: 14px; height: 14px; }
.utility-right { display: flex; align-items: center; gap: 1.5rem; }
.utility-phone {
  font-family: var(--font-display); letter-spacing: 0.06em; color: var(--white) !important;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.utility-phone svg { width: 14px; height: 14px; color: var(--gold); }

/* sticky main nav */
.site-header { position: sticky; top: 0; z-index: 1200; }
.main-nav {
  background: rgba(244,241,234,0.95);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line-on-light);
  transition: box-shadow 0.3s var(--ease);
}
.main-nav.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,0.4); }
.main-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 76px;
}

/* logo: real image when present, styled wordmark as fallback */
.logo { display: inline-flex; align-items: center; gap: 0; line-height: 1; flex-shrink: 0; margin-right: 1rem; }
.logo__img { height: clamp(32px, 2.4vw, 42px); width: auto; display: block; flex-shrink: 0; object-fit: contain; }
.logo__wordmark { display: none; align-items: flex-end; }
.logo--wordmark .logo__wordmark { display: inline-flex; }
.footer-brand .logo__img { height: 50px; }
/* footer is light, so the logo sits directly on the background — no plate needed */
.footer-brand .logo { background: transparent; padding: 0; border-radius: 0; align-self: flex-start; }
/* Wordmark fallback styled to resemble the real ShingleMe logo:
   engraved serif "SHINGLE" + gold heavy "ME" under a roof-peak. */
.logo__text {
  font-family: var(--font-logo); font-weight: 800; text-transform: uppercase;
  font-size: 1.5rem; letter-spacing: 0.01em; color: currentColor; line-height: 1;
}
.logo--color .logo__wordmark { color: var(--ink); }
.logo__me {
  position: relative; color: var(--gold-ink); padding-top: 10px; margin-left: 0.12em;
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.01em;
}
.logo__peak {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 14px; color: var(--ink);
}
.footer-brand .logo__peak { color: var(--ink); }
.logo__peak path { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.logo:hover .logo__text { opacity: 0.82; }

/* desktop nav list */
.nav-list { display: flex; align-items: center; gap: 0.2rem; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.28rem;
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 0.75rem; color: var(--text-on-light);
  padding: 0.7rem 0.5rem; border-radius: var(--radius);
  transition: color 0.2s var(--ease); white-space: nowrap;
}
.nav-link:hover, .nav-item:focus-within > .nav-link, .nav-item.is-open > .nav-link { color: var(--gold-ink); }
.nav-link[aria-current="page"] { color: var(--gold-ink); }
.nav-link__caret { width: 9px; height: 9px; transition: transform 0.25s var(--ease); }
.nav-item.is-open .nav-link__caret { transform: rotate(180deg); }

/* dropdown */
.dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 244px;
  background: var(--bone); border: 1px solid var(--line-on-light);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  transition-delay: 0.2s;
  z-index: 50;
}
/* transparent bridge over the gap so the mouse doesn't fall through */
.dropdown::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown,
.nav-item.is-open > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.dropdown a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.9rem; border-radius: var(--radius);
  font-size: 0.92rem; color: var(--text-on-light);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.dropdown a:hover { background: var(--bone); color: var(--gold-deep); }
.dropdown a svg { width: 15px; height: 15px; color: var(--gold); flex: none; }

.nav-cta { margin-left: 0.4rem; }

/* hamburger */
.nav-toggle { display: none; position: relative; z-index: 1300; width: 46px; height: 46px; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 24px; height: 2px; background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -7px; left: 0; }
.nav-toggle span::after  { position: absolute; top:  7px; left: 0; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.nav-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1100;
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

/* -----------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero { position: relative; min-height: clamp(560px, 86vh, 920px); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: -8% 0; z-index: -2; }
.hero__media img,
.hero__media video { width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(13,13,13,0.38) 0%, rgba(13,13,13,0.12) 35%, rgba(13,13,13,0.6) 100%),
    linear-gradient(90deg, rgba(13,13,13,0.62) 0%, rgba(13,13,13,0.22) 55%, rgba(13,13,13,0.05) 100%);
}
.hero__inner { padding-block: clamp(5rem, 14vh, 9rem); color: var(--white); max-width: 1120px; }
.hero__logo-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.hero__peak { width: 64px; color: var(--gold); }
.hero__peak path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.hero__eyebrow { color: var(--gold-soft); }
.hero h1 {
  color: var(--white); text-shadow: 0 2px 30px rgba(0,0,0,0.35);
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem); letter-spacing: 0.01em; line-height: 0.99;
}
.hero__sub { color: rgba(255,255,255,0.9); margin-top: 1.1rem; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem); max-width: 46ch; }
.hero__announce {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.8rem;
  padding: 0.6rem 1.1rem; border: 1px solid var(--line-on-dark); border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06); backdrop-filter: blur(4px);
  font-size: 0.9rem; color: var(--text-on-dark);
}
.hero__announce a { color: var(--gold-soft); display: inline-flex; align-items: center; gap: 0.3rem; }
.hero__announce a:hover { color: var(--white); }
.hero__announce svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.hero__announce a:hover svg { transform: translateX(3px); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.hero__scroll {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.85); font-family: var(--font-display); letter-spacing: 0.2em;
  font-size: 0.75rem; text-transform: uppercase; display: flex; flex-direction: column;
  align-items: center; gap: 0.5rem;
}
.hero__scroll::after { content: ""; width: 2px; height: 48px; background: linear-gradient(var(--gold-soft), transparent); animation: scroll-pulse 2s var(--ease) infinite; }
@keyframes scroll-pulse { 0%,100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* -----------------------------------------------------------------------------
   9. FEATURE TILES
   -------------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.6rem, 1.5vw, 1rem); }
.tile {
  position: relative; display: flex; align-items: flex-end; min-height: clamp(260px, 30vw, 380px);
  border-radius: var(--radius); overflow: hidden; color: var(--white);
  box-shadow: var(--shadow-card); isolation: isolate;
}
.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 0.7s var(--ease);
}
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(13,13,13,0.62) 0%, rgba(13,13,13,0.55) 40%, rgba(13,13,13,0.95) 100%),
    linear-gradient(180deg, rgba(253,208,0,0.16) 0%, rgba(253,208,0,0) 55%);
  transition: background 0.4s var(--ease);
}
.tile:hover img { transform: scale(1.08); }
/* hover: opaque golden gradient over the image; text + icons go black */
.tile:hover::after, .tile:focus-within::after {
  background: linear-gradient(165deg, rgba(199,188,147,0.72) 0%, rgba(168,153,95,0.78) 48%, rgba(138,125,80,0.85) 100%);
}
.tile:hover .tile__icon, .tile:focus-within .tile__icon,
.tile:hover .tile__label, .tile:focus-within .tile__label,
.tile:hover .tile__more, .tile:focus-within .tile__more { color: var(--ink); }
.tile__body { padding: 1.4rem; width: 100%; }
.tile__icon { display: block; width: 44px; height: 44px; color: var(--gold-soft); margin-bottom: 1.1rem; transition: color 0.3s var(--ease); }
.tile__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.tile__label { font-family: var(--font-display); text-transform: uppercase; font-weight: 600; font-size: 1.15rem; letter-spacing: 0.04em; line-height: 1.1; transition: color 0.3s var(--ease); }
.tile__more { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--gold-soft); margin-top: 0.5rem; opacity: 0; transform: translateY(6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease); font-family: var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.tile:hover .tile__more, .tile:focus-within .tile__more { opacity: 1; transform: translateY(0); }
.tile__more svg { width: 13px; height: 13px; }

/* -----------------------------------------------------------------------------
   10. GENERIC CONTENT BLOCKS
   -------------------------------------------------------------------------- */
.section-head { max-width: 640px; }
.section-head--center { margin-inline: auto; text-align: center; }

/* two-column panels over a photo */
.panel-block { position: relative; isolation: isolate; }
.panel-block__bg { position: absolute; inset: 0; z-index: -2; }
.panel-block__bg img { width: 100%; height: 100%; object-fit: cover; }
.panel-block__bg::after { content: ""; position: absolute; inset: 0; background: rgba(13,13,13,0.55); }
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }
.panel {
  background: var(--gold); color: #1d1a10; padding: clamp(1.8rem, 3vw, 2.8rem);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.panel--alt { background: var(--gold-2); }
.panel h3 { color: #14120b; }
.panel .checklist { margin-top: 1.4rem; }

.checklist li { display: flex; align-items: flex-start; gap: 0.7rem; padding-block: 0.4rem; font-weight: 500; }
.checklist li::before {
  content: ""; flex: none; width: 20px; height: 14px; margin-top: 4px;
  background: currentColor;
  -webkit-mask: var(--peak-mask) center/contain no-repeat; mask: var(--peak-mask) center/contain no-repeat;
}
:root {
  /* roof-peak shaped bullet */
  --peak-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M2 13 L10 3 L18 13' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.panel .btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }

/* About + pricing feature-card block (homepage) */
.about-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; }
.loc-chips { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 1.7rem 0 1.9rem; }
.loc-chip { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1.15rem; border: 1px solid var(--line-on-light); border-left: 3px solid var(--gold); border-radius: var(--radius); background: var(--bone); font-size: 0.88rem; color: var(--text-on-light-muted); }
.loc-chip__name { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; color: var(--ink); }
.about-btns { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.price-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--gold); }
.price-card__img { aspect-ratio: 16 / 10; overflow: hidden; }
.price-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.price-card:hover .price-card__img img { transform: scale(1.05); }
.price-card__body { padding: clamp(1.6rem, 3vw, 2.4rem); color: #1c1a11; }
.price-card__body h3 { color: #14120b; margin-top: 0.4rem; }
.price-list { margin: 1.4rem 0; display: flex; flex-direction: column; gap: 0.75rem; }
.price-list li { display: flex; align-items: center; gap: 0.85rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.02rem; color: var(--ink); }
.price-list li::before { content: ""; width: 9px; height: 9px; background: #1c1a11; transform: rotate(45deg); flex: none; }
.price-note { font-size: 0.97rem; color: #332e1c; border-top: 1px solid rgba(0,0,0,0.18); padding-top: 1.1rem; margin: 0; }

@media (max-width: 820px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }

/* offer pills (Why Choose section) */
.pill-grid { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: var(--gold); color: #1c1a11; padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill); font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; font-size: 0.95rem;
  /* float-in from below — plays when .pill-grid scrolls into view (main.js adds .is-visible) */
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.pill-grid.is-visible .pill { opacity: 1; transform: translateY(0); }
.pill-grid.is-visible .pill:nth-child(2) { transition-delay: 0.08s; }
.pill-grid.is-visible .pill:nth-child(3) { transition-delay: 0.16s; }
.pill-grid.is-visible .pill:nth-child(4) { transition-delay: 0.24s; }
.pill svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .pill { opacity: 1; transform: none; transition: none; }
}

/* centered band */
.band { text-align: center; }
.band .h2 { max-width: 20ch; margin-inline: auto; }

/* CTA block */
.cta-block { text-align: center; }
.cta-block .phone-em { color: #14120b; font-family: var(--font-display); letter-spacing: 0.05em; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; white-space: nowrap; }
.cta-block .phone-em:hover { color: #000; }
.phone-link { color: var(--gold-deep); font-weight: 600; }

/* -----------------------------------------------------------------------------
   11. TESTIMONIALS
   -------------------------------------------------------------------------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.testi-card {
  background: var(--charcoal); border: 1px solid var(--line-on-dark);
  border-radius: var(--radius); padding: 2rem 1.8rem 1.8rem; position: relative;
  display: flex; flex-direction: column;
  /* float-in from below — plays when each card scrolls into view (main.js adds .is-visible) */
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.testi-card.is-visible { opacity: 1; transform: translateY(0); }
.testi-card.is-visible:nth-child(2) { transition-delay: 0.08s; }
.testi-card.is-visible:nth-child(3) { transition-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
  .testi-card { opacity: 1; transform: none; transition: none; }
}
.testi-card__mark { font-family: var(--font-serif); font-size: 4.5rem; line-height: 0.6; color: var(--gold); height: 2rem; }
.testi-card__stars { display: flex; gap: 3px; color: var(--gold); margin: 0.4rem 0 1rem; }
.testi-card__stars svg { width: 17px; height: 17px; fill: currentColor; }
.testi-card__quote { color: var(--text-on-dark); font-size: 1.02rem; line-height: 1.6; flex: 1; }
.testi-card__author { margin-top: 1.4rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-soft); font-size: 0.95rem; }

/* -----------------------------------------------------------------------------
   12. CROSS-PROMO BAND (Fixx Me)
   -------------------------------------------------------------------------- */
.crosspromo { background: #108159; color: #fff; }
.crosspromo__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-block: clamp(2rem, 4vw, 3rem); }
.crosspromo__text { display: flex; flex-direction: column; gap: 0.3rem; }
.crosspromo__text strong { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem); font-weight: 600; letter-spacing: 0.02em; }
.crosspromo .btn { background: #c1ae09; color: #1c1a11; border-color: #c1ae09; }
.crosspromo .btn:hover { background: #a89508; border-color: #a89508; box-shadow: var(--shadow-card); }

/* -----------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
/* Light footer on warm off-white with gold accents + taupe top hairline */
.site-footer { background: var(--bone); color: var(--text-on-light); position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft)); }
.site-footer a { color: var(--text-on-light); transition: color 0.2s var(--ease); }
.site-footer a:hover { color: var(--gold-deep); }

/* top band */
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-block: clamp(2.8rem, 5vw, 4rem) 2rem; }
.footer-brand { max-width: 42ch; }
.footer-brand .logo__wordmark .logo__text { color: var(--ink); }
.footer-brand .logo__wordmark .logo__me { color: var(--gold-ink); }
.footer-brand p { margin-top: 1.2rem; color: var(--text-on-light-muted); line-height: 1.7; }
.footer-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.footer-kicker { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.82rem; color: var(--gold-ink); }
.footer-phone { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: 0.02em; color: var(--ink); line-height: 1; }
.footer-phone:hover { color: var(--gold-deep); }
.footer-cta .btn { margin-top: 0.6rem; }
.footer-cta .btn--gold:hover { color: var(--white); }

.footer-divider { height: 1px; background: var(--line-on-light); }

/* columns */
.footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(1.6rem, 3vw, 3rem); padding-block: clamp(2.4rem, 4vw, 3.4rem); }
.footer-h { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem; color: var(--ink); margin-bottom: 1.3rem; }
.footer-loc { font-style: normal; line-height: 1.6; margin-bottom: 1.4rem; display: flex; flex-direction: column; gap: 0.25rem; }
.footer-loc__name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; color: var(--gold-deep); }
.footer-loc__link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--gold-ink) !important; margin-top: 0.25rem; }
.footer-loc__link svg { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.footer-loc__link:hover svg { transform: translateX(3px); }
.footer-links li { margin-bottom: 0.7rem; }
.footer-links a { position: relative; }
.footer-links a:hover { padding-left: 4px; }
.footer-social { display: flex; gap: 0.6rem; margin-bottom: 1.3rem; }
.footer-social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-on-light); border-radius: 50%; color: var(--text-on-light-muted); transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); }
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: #1c1a11; transform: translateY(-3px); }
.footer-social svg { width: 17px; height: 17px; }
.footer-review { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; margin-bottom: 0.6rem; }
.footer-review svg { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.footer-review:hover svg { transform: translateX(3px); }

.footer-bottom { border-top: 1px solid var(--line-on-light); padding-block: 1.6rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-on-light-muted); }
.footer-area { color: var(--text-on-light-muted); }

@media (max-width: 860px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr; } .footer-top { flex-direction: column; } }

/* UserWay accessibility widget: anchor bottom-right, same row as call-fab */
#userwayAccessibilityIcon,
.userway_buttons_wrapper {
  position: fixed !important;
  bottom: 1rem !important;
  right: 1rem !important;
  left: auto !important;
  top: auto !important;
}

/* persistent mobile click-to-call — sits to the LEFT of the accessibility icon */
.call-fab {
  position: fixed; right: calc(1rem + 56px + 0.5rem); bottom: 1rem; z-index: 900; display: none;
  width: 58px; height: 58px; border-radius: 50%; background: var(--gold);
  color: #1c1a11; place-items: center; box-shadow: var(--shadow-lift);
  border: 2px solid #1c1a11;
  animation: fab-in 0.4s var(--ease) 1s both;
}
.call-fab svg { width: 24px; height: 24px; }
@keyframes fab-in { from { transform: scale(0); } to { transform: scale(1); } }

/* =============================================================================
   13b. INTERIOR / SERVICE PAGES
   ========================================================================== */
/* photo background for the testimonials header (keeps section--ink as fallback) */
.photo-head { position: relative; overflow: hidden; isolation: isolate; }
.photo-head__media { position: absolute; inset: 0; z-index: -2; }
.photo-head__media img { width: 100%; height: 100%; object-fit: cover; }
.photo-head__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,13,13,0.66) 0%, rgba(13,13,13,0.6) 45%, rgba(13,13,13,0.82) 100%); }

/* compact photo hero for interior pages */
.subhero { position: relative; min-height: clamp(360px, 52vh, 540px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; color: var(--white); }
.subhero__media { position: absolute; inset: 0; z-index: -2; }
.subhero__media img { width: 100%; height: 100%; object-fit: cover; }
.subhero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,13,13,0.45) 0%, rgba(13,13,13,0.35) 40%, rgba(13,13,13,0.86) 100%); }
.subhero__inner { padding-block: clamp(2.4rem, 5vw, 4rem); max-width: 820px; }
.subhero h1 { color: var(--white); font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem); line-height: 1; }
.subhero__crumb { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--gold-soft); margin-bottom: 1rem; }
.subhero__crumb a { color: rgba(255,255,255,0.7); } .subhero__crumb a:hover { color: var(--white); }
.subhero__sub { font-size: var(--fs-lead); color: rgba(255,255,255,0.9); margin-top: 1rem; max-width: 56ch; }

/* info cards (e.g. "things to look for") - clean, no iconography */
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.info-card { background: var(--white); border: 1px solid var(--line-on-light); border-radius: var(--radius); padding: clamp(1.6rem, 2.4vw, 2.2rem); border-top: 3px solid var(--gold); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.info-card__idx { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.1em; color: var(--gold-ink); }
.info-card h3 { font-size: 1.2rem; margin: 0.5rem 0 0.6rem; }
.info-card p { color: var(--text-on-light-muted); }
.section--ink .info-card, .section--charcoal .info-card { background: rgba(255,255,255,0.04); border-color: var(--line-on-dark); }
.section--ink .info-card h3, .section--charcoal .info-card h3 { color: var(--white); }
.section--ink .info-card p, .section--charcoal .info-card p { color: var(--text-on-dark-muted); }

/* two-column content + media split */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.split--media-first .split__media { order: -1; }
.split__media { border-radius: var(--radius); overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* highlighted process / "what to do" panel */
.leak-panel { background: var(--gold); color: #1c1a11; border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 3rem); }
.leak-panel h2 { color: #14120b; }
.leak-panel .contact-row { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; margin: 1.4rem 0; }
.leak-panel .contact-row a { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: #14120b; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: underline; text-underline-offset: 4px; }
.leak-panel .contact-row a:hover { color: #000; }

/* leak step tiles */
.leak-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.leak-step { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: clamp(1.6rem, 2.5vw, 2.2rem); }
.leak-step__icon { font-size: 2rem; color: var(--gold); margin-bottom: 1rem; }
.leak-step h3 { color: var(--white); font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin: 0 0 0.6rem; }
.leak-step p { color: var(--text-on-dark-muted); font-size: 0.95rem; line-height: 1.65; margin: 0; }
.leak-step p strong { color: var(--white); }
.leak-step__contacts { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); }
.leak-step__contacts a { color: var(--gold); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.leak-step__contacts a:hover { color: var(--white); }
/* Medium widths: 3 columns would squeeze the email in box 1 too narrow to fit on
   one line, so drop to 2 columns and move the contact box full-width underneath
   the other two (two boxes on top, contact box spanning both columns below). */
@media (min-width: 721px) and (max-width: 1080px) {
  .leak-steps { grid-template-columns: 1fr 1fr; }
  .leak-steps .leak-step:first-child { order: 1; grid-column: 1 / -1; }
}
@media (max-width: 720px) { .leak-steps { grid-template-columns: 1fr; } }

/* note / warning callout */
.note-callout { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.6rem; padding: 1.1rem 1.3rem; background: rgba(13,13,13,0.9); color: var(--white); border-radius: var(--radius); border-left: 4px solid var(--gold); }
.note-callout strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-soft); }

.steps { counter-reset: step; margin-top: 1.4rem; }
.steps li { counter-increment: step; display: flex; gap: 1rem; padding-block: 0.7rem; align-items: flex-start; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; color: var(--gold-ink); flex: none; min-width: 2.2rem; font-size: 1rem; }

/* inquire / estimate form */
.form-card { background: var(--white); border: 1px solid var(--line-on-light); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--shadow-card); }
.form { display: grid; gap: 1.15rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.76rem; font-weight: 600; color: var(--ink); }
.field label .req { color: var(--gold-deep); }
.field input, .field select, .field textarea { padding: 0.85rem 1rem; border: 1.5px solid var(--line-on-light); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; background: var(--white); color: var(--ink); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(253,208,0,0.18); }
.field textarea { min-height: 130px; resize: vertical; }
.field__err { color: #b3403a; font-size: 0.8rem; min-height: 0; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b3403a; }
.form-note { font-size: 0.85rem; color: var(--text-on-light-muted); }
.form-success { text-align: center; padding: 1rem 0; }
.form-success__check { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; margin: 0 auto 1.2rem; }
.form-success__check svg { width: 30px; height: 30px; color: #1c1a11; }
.is-hidden { display: none !important; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* location pages */
.loc-map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); border: 3px solid var(--white); aspect-ratio: 4 / 3; background: var(--charcoal); }
.loc-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.9); }

/* -----------------------------------------------------------------------------
   Past-projects map (Leaflet + marker clustering)
   -------------------------------------------------------------------------- */
/* 2-up map explorer (past-projects page) */
.map-explorer { display: flex; height: clamp(540px, 72vh, 820px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); border: 2px solid var(--line-on-light); }
.map-explorer__map { flex: 2 1 0; min-width: 0; position: relative; }
.projects-map { position: absolute; inset: 0; background: var(--bone-2); }
.projects-map .leaflet-container { height: 100%; width: 100%; font-family: var(--font-body); background: var(--bone-2); }
/* on-brand cluster bubbles (override Leaflet's default blue/green) */
.projects-map .marker-cluster { background: rgba(253,208,0,0.35); }
.projects-map .marker-cluster div { background: var(--gold); color: #1c1a11; font-family: var(--font-display); font-weight: 600; }
.projects-map .marker-cluster-large { background: rgba(138,125,80,0.4); }
.projects-map .marker-cluster-large div { background: var(--gold-deep); color: #fff; }
/* rich pin popup */
.map-pop { width: 210px; }
.map-pop__img { width: 100%; height: 120px; object-fit: cover; border-radius: calc(var(--radius) - 4px); display: block; margin-bottom: 0.65rem; background: var(--bone-2); }
.map-pop__body { display: flex; flex-direction: column; gap: 0.15rem; }
.map-pop__name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.map-pop__town { font-size: 0.85rem; color: var(--text-on-light-muted); }
.map-pop__cat { font-size: 0.78rem; color: var(--gold-deep); font-family: var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 0.2rem; }
.leaflet-popup-content { margin: 0.7rem 0.8rem; }
.leaflet-popup-content-wrapper { border-radius: var(--radius); }
/* sidebar panel */
.map-explorer__panel { flex: 1 1 0; min-width: 280px; max-width: 420px; display: flex; flex-direction: column; border-left: 2px solid var(--line-on-light); background: var(--white); overflow: hidden; }
.map-explorer__header { padding: 1rem 1.1rem 0.9rem; border-bottom: 1px solid var(--line-on-light); flex: none; background: var(--white); }
.map-explorer__search-wrap { display: flex; align-items: center; gap: 0.5rem; background: var(--bone); border: 1.5px solid var(--line-on-light); border-radius: var(--radius); padding: 0.6rem 0.85rem; transition: border-color 0.2s; }
.map-explorer__search-wrap:focus-within { border-color: var(--gold); }
.map-explorer__search-icon { width: 15px; height: 15px; flex: none; color: var(--text-on-light-muted); }
.map-explorer__search { border: 0; background: transparent; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink); flex: 1; outline: none; min-width: 0; }
.map-explorer__search::placeholder { color: var(--text-on-light-muted); }
.map-explorer__count { font-size: 0.72rem; color: var(--text-on-light-muted); margin: 0.5rem 0 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; }
/* scrollable list */
.map-explorer__list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.map-explorer__list::-webkit-scrollbar { width: 4px; }
.map-explorer__list::-webkit-scrollbar-track { background: transparent; }
.map-explorer__list::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
.map-explorer__empty { padding: 2rem 1.2rem; text-align: center; color: var(--text-on-light-muted); font-size: 0.88rem; }
/* custom map pin dots */
.pin-dot { background: transparent; border: none; }
.pin-dot span { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.pin-dot--plain span { background: #8a8a8a; }
.pin-dot--photo span { background: #2ecc71; box-shadow: 0 0 0 2px #fff, 0 0 6px rgba(46,204,113,0.6); }
/* project cards in the list */
.map-card { display: flex; gap: 0.9rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line-on-light); cursor: pointer; transition: background 0.15s; align-items: flex-start; }
.map-card:hover { background: var(--bone); }
.map-card.is-active { background: rgba(168,153,95,0.1); box-shadow: inset 3px 0 0 var(--gold); }
.map-card__img { width: 80px; height: 72px; object-fit: cover; border-radius: calc(var(--radius) - 2px); flex: none; background: var(--bone-2); display: block; }
.map-card__img--empty { background: var(--bone-2); display: flex; align-items: center; justify-content: center; }
.map-card__body { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; padding-top: 0.1rem; }
.map-card__name { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.map-card__town { font-size: 0.78rem; color: var(--text-on-light-muted); display: flex; align-items: center; gap: 0.3rem; }
.map-card__cat { font-size: 0.68rem; color: var(--gold-deep); font-family: var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; background: rgba(193,174,9,0.12); padding: 0.18rem 0.55rem; border-radius: 99px; display: inline-block; width: fit-content; margin-top: 0.1rem; }
.map-load-more { display: block; width: 100%; padding: 1rem; background: var(--bone); border: 0; border-top: 1px solid var(--line-on-light); font-family: var(--font-display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-deep); cursor: pointer; transition: background 0.15s; }
.map-load-more:hover { background: var(--bone-2); }
.map-explorer__filters { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.map-filter-btn { font-family: var(--font-display); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; padding: 0.3rem 0.75rem; border: 1.5px solid var(--line-on-light); border-radius: 99px; background: transparent; color: var(--text-on-light-muted); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; }
.map-filter-btn:hover { border-color: var(--gold); color: var(--ink); }
.map-filter-btn.is-active { background: var(--gold); border-color: var(--gold); color: #1c1a11; }
@media (max-width: 860px) {
  .map-explorer { flex-direction: column; height: auto; }
  .map-explorer__map { flex: none; height: clamp(320px, 52vh, 500px); }
  .map-explorer__panel { width: 100%; min-width: 0; max-width: none; max-height: 380px; border-left: 0; border-top: 2px solid var(--gold); }
}
.hours-list { margin: 1rem 0 0; border-top: 1px solid var(--line-on-light); }
.hours-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-on-light); }
.hours-list .day { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem; }
.hours-list .time { color: var(--text-on-light-muted); }
.loc-contact { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1.4rem; }
.loc-contact .loc-phone { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); color: var(--ink); letter-spacing: 0.02em; }
.loc-contact .loc-phone:hover { color: var(--gold-deep); }
.loc-contact address { font-style: normal; color: var(--text-on-light-muted); }
.loc-review { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--gold-ink); font-weight: 600; margin-top: 0.4rem; }
.loc-review svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.loc-review:hover svg { transform: translateX(3px); }
.loc-badge { display: inline-block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 600; background: var(--gold); color: #1c1a11; padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); margin-bottom: 1rem; }

/* locations hub cards */
.loc-hub { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); }
.loc-hub__card { background: var(--white); border: 1px solid var(--line-on-light); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.loc-hub__map { aspect-ratio: 16 / 9; background: var(--charcoal); }
.loc-hub__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.loc-hub__body { padding: clamp(1.4rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.loc-hub__body h3 { font-size: 1.4rem; }
.loc-hub__body .btn { margin-top: auto; align-self: flex-start; white-space: normal; max-width: 100%; text-align: center; }
@media (max-width: 820px) { .loc-hub { grid-template-columns: 1fr; } }

/* reviews masonry (testimonials page) */
.reviews-grid { columns: 3 330px; column-gap: clamp(1rem, 2vw, 1.6rem); }
.review-card { break-inside: avoid; margin-bottom: clamp(1rem, 2vw, 1.6rem); background: var(--white); border: 1px solid var(--line-on-light); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: clamp(1.4rem, 2.2vw, 1.9rem); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.review-stars { color: var(--gold-ink); letter-spacing: 3px; font-size: 1rem; line-height: 1; }
.review-quote { margin-top: 0.9rem; color: var(--text-on-light); line-height: 1.6; }
.review-author { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--line-on-light); font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.92rem; color: var(--ink); display: flex; align-items: center; gap: 0.5rem; }
.review-author::before { content: ""; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex: none; }
.review-verified { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 400; color: var(--text-on-light-muted); }
@media (max-width: 720px) { .reviews-grid { columns: 1; } }

/* inline testimonial grid (service pages, on dark background) */
.testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: 0; }
.testimonial { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: clamp(1.4rem, 2.2vw, 2rem); position: relative; }
.testimonial p { color: var(--text-on-dark); line-height: 1.65; font-size: 1rem; margin: 0; }
.testimonial footer { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.82rem; color: var(--white); }
.testimonial footer .stars { color: var(--gold); letter-spacing: 2px; font-size: 0.9rem; text-transform: none; }
@media (max-width: 680px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   PROGRAMMATIC SEO — location tags, problem cards, utility layout
   ========================================================================== */

/* photo-background section — replaces flat section--ink on project grids */
.section--photo-bg {
  position: relative;
  isolation: isolate;
  color: var(--white);
  background-image:
    linear-gradient(180deg, rgba(14,10,4,0.82) 0%, rgba(14,10,4,0.74) 50%, rgba(14,10,4,0.88) 100%),
    url('/images/projects/shingles_(3).jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.section--photo-bg h1,
.section--photo-bg h2,
.section--photo-bg h3 { color: var(--white); }
.section--photo-bg .eyebrow { color: var(--gold); }
.section--photo-bg .rule { background: var(--gold); }
.section--photo-bg .lead { color: rgba(255,255,255,0.82); }
@media (max-width: 768px) {
  .section--photo-bg { background-attachment: scroll; }
}

/* gold stat strip — trust proof band below hero */
.stat-strip {
  background: var(--gold);
  padding-block: clamp(1.2rem, 2.2vw, 1.8rem);
}
.stat-strip__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
  flex-wrap: wrap;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
.stat-strip__item { text-align: center; }
.stat-strip__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1;
  color: #14120b;
}
.stat-strip__label {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(28,26,17,0.68);
  margin-top: 0.35rem;
}
.stat-strip__divider {
  width: 1px;
  height: 2.4rem;
  background: rgba(28,26,17,0.22);
  flex: none;
}
@media (max-width: 540px) {
  .stat-strip__divider { display: none; }
}

/* cta-band — used in location pages */
.cta-band {
  background: var(--gold);
  padding-block: clamp(2.4rem, 5vw, 4rem);
}
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band__copy h2 { color: #14120b; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); max-width: 34ch; }
.cta-band__copy p { color: rgba(28,26,17,0.78); margin-top: 0.6rem; max-width: 50ch; }
.cta-band__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.btn--white { background: #fff; color: #14120b; border-color: #fff; }
.btn--white:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--outline-white { border-color: rgba(28,26,17,0.45); color: #14120b; }
.btn--outline-white:hover { background: rgba(28,26,17,0.1); }

/* area tag chips (location list) */
.area-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.area-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--white);
  border: 1.5px solid var(--line-on-light);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease), color 0.2s var(--ease);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.area-tag::after {
  content: "→";
  font-size: 0.78rem;
  color: var(--gold-ink);
  transition: transform 0.2s var(--ease);
  margin-left: 0.1rem;
}
.area-tag:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.18);
  transform: translateY(-2px);
  color: var(--ink);
}
.area-tag:hover::after { transform: translateX(3px); }

/* NEPA directory blob background */
.nepa-directory { position: relative; overflow: hidden; background: #faf7f2; }
.nepa-directory .wrap { position: relative; z-index: 1; }
.nd-blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.nd-blob--1 { width: 640px; height: 640px; top: -180px; left: -200px; background: radial-gradient(circle, rgba(193,174,9,0.18) 0%, transparent 70%); filter: blur(72px); }
.nd-blob--2 { width: 720px; height: 720px; bottom: -220px; right: -180px; background: radial-gradient(circle, rgba(168,130,60,0.2) 0%, transparent 70%); filter: blur(90px); }
.nd-blob--3 { width: 500px; height: 500px; top: 35%; left: 38%; background: radial-gradient(circle, rgba(240,210,140,0.15) 0%, transparent 70%); filter: blur(60px); }
.nd-blob--4 { width: 380px; height: 380px; top: 10%; right: 15%; background: radial-gradient(circle, rgba(193,174,9,0.1) 0%, transparent 70%); filter: blur(55px); }
.nd-blob--5 { width: 460px; height: 460px; top: 55%; left: 8%; background: radial-gradient(circle, rgba(210,185,100,0.14) 0%, transparent 70%); filter: blur(65px); }
.nd-blob--6 { width: 320px; height: 320px; top: 20%; left: 55%; background: radial-gradient(circle, rgba(193,174,9,0.12) 0%, transparent 70%); filter: blur(48px); }
.nd-blob--7 { width: 550px; height: 550px; bottom: 5%; left: 30%; background: radial-gradient(circle, rgba(168,145,70,0.13) 0%, transparent 70%); filter: blur(80px); }
.nd-blob--8 { width: 280px; height: 280px; top: 70%; right: 10%; background: radial-gradient(circle, rgba(240,220,130,0.16) 0%, transparent 70%); filter: blur(44px); }

/* county section header row on index */
.county-section { padding-block: clamp(2.4rem, 4vw, 3.6rem); border-bottom: 1px solid var(--line-on-light); }
.county-section:last-child { border-bottom: 0; }
.county-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.county-section__head h2, .county-section__head h3 { margin: 0; }
.county-section__count { font-size: 0.82rem; color: var(--text-on-light-muted); font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.county-section--on-dark { border-bottom-color: var(--line-on-dark); }
.county-section--on-dark .county-section__count { color: var(--text-on-dark-muted); }
.county-section--on-dark .county-section__head a { color: var(--white); }
.county-section--on-dark .county-section__head a:hover { color: var(--gold); }

/* problem cards (roofing problems list) */
.prob-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 2.4rem;
}
.prob-card {
  background: var(--white);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
  border-left: 4px solid var(--gold);
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.prob-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.prob-card--high { border-left-color: #c0392b; }
.prob-card--medium { border-left-color: #d4830a; }
.prob-card--low { border-left-color: #2e7d32; }
.prob-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.25;
}
.prob-card__name:hover { color: var(--gold-deep); }
.prob-card__summary { color: var(--text-on-light-muted); font-size: 0.95rem; line-height: 1.55; flex: 1; }
.prob-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.4rem; }
.prob-card__link { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.prob-card__link:hover { color: var(--gold-deep); }
.prob-card__link::after { content: "→"; transition: transform 0.2s var(--ease); }
.prob-card__link:hover::after { transform: translateX(3px); }

/* urgency badge */
.badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid;
}
.badge--high { background: #fff0ef; border-color: #e5a19c; color: #a02020; }
.badge--medium { background: #fff8ec; border-color: #e8c077; color: #96580a; }
.badge--low { background: #edf7ee; border-color: #89c98d; color: #255d28; }

/* info-card link (used on service area detail problems section) */
.info-card { display: flex; flex-direction: column; }
.info-card p { flex: 1; }
.info-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gold-ink);
  text-decoration: none;
}
.info-card__link:hover { color: var(--gold-deep); }
.info-card__link::after { content: "→"; font-size: 0.75rem; transition: transform 0.2s var(--ease); }
.info-card__link:hover::after { transform: translateX(3px); }

/* two-column layout (service area pages) */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; }
  .prob-grid { grid-template-columns: 1fr; }
}

/* check list */
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.check-list li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--text-on-light); line-height: 1.45; }
.check-list li::before { content: ""; width: 17px; height: 17px; border-radius: 50%; background: var(--gold); flex: none; margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%231c1a11' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
}

/* aggregate rating badge */
.rating-hero { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.rating-hero__stars { color: var(--gold); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); letter-spacing: 6px; line-height: 1; }
.rating-hero__label { color: var(--text-on-dark-muted); font-size: 0.95rem; }

/* reward cards (referral program) */
.reward-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.8rem); }
.reward-card { background: var(--ink); color: var(--white); border-radius: var(--radius); padding: clamp(1.8rem, 3.5vw, 2.8rem); text-align: center; border-bottom: 4px solid var(--gold); }
.reward-card .reward-amt { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 2rem + 5vw, 5rem); color: var(--gold); line-height: 1; }
.reward-card .reward-for { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; color: var(--gold-soft); margin-top: 1.1rem; }
.reward-card p { color: var(--text-on-dark-muted); margin-top: 0.9rem; }
@media (max-width: 720px) { .reward-grid { grid-template-columns: 1fr; } }

/* full-width banner image (client promo graphics) */
.media-banner { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.media-banner img { width: 100%; height: auto; display: block; }

/* responsive video embeds (helpful resources) */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem); }
.video-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 920px; }
.video-card h3 { font-size: 1.05rem; margin-bottom: 0.8rem; }
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); background: var(--charcoal); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
video.video-embed { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* click-to-play YouTube facade (works from file:// and when hosted) */
.yt-facade { cursor: pointer; }
.yt-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-facade::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,0.15), rgba(13,13,13,0.45)); transition: background 0.3s var(--ease); }
.yt-facade:hover::before { background: rgba(13,13,13,0.3); }
.yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 68px; height: 68px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; transition: transform 0.25s var(--ease), background 0.25s var(--ease); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6); }
.yt-facade:hover .yt-play { transform: translate(-50%,-50%) scale(1.08); background: var(--gold-soft); }
.yt-play::after { content: ""; margin-left: 4px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #1c1a11; }
@media (max-width: 900px) { .video-grid { grid-template-columns: 1fr; } .video-grid--two { grid-template-columns: 1fr; } }

/* resource tool links */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.8rem); }
.tool-card { display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; background: var(--white); border: 1px solid var(--line-on-light); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.2rem); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.tool-card__kicker { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--gold-ink); }
.tool-card h3 { font-size: 1.25rem; }
.tool-card p { color: var(--text-on-light-muted); flex: 1; }
@media (max-width: 720px) { .tool-grid { grid-template-columns: 1fr; } }

/* warranty seal */
.seal-svg { width: clamp(180px, 22vw, 240px); flex: none; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.35)); }
.seal-row { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2rem); flex-wrap: wrap; }
.seal-body { flex: 1; min-width: 280px; }
@media (max-width: 640px) {
  .seal-row { flex-direction: column; align-items: center; }
  .seal-svg { width: clamp(160px, 55vw, 220px); }
  .seal-body { min-width: 0; width: 100%; text-align: center; }
  .seal-body .eyebrow { display: block; }
  .seal-body .rule { margin-inline: auto; }
}

/* coverage comparison (covered vs not covered) */
.cover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.6rem); }
.cover-col { background: var(--white); border: 1px solid var(--line-on-light); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: clamp(1.4rem, 2.4vw, 2rem); }
.cover-col--no { border-top-color: rgba(0,0,0,0.22); }
.cover-col__title { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.05rem; margin-bottom: 1rem; }
.cover-col__title .badge-i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.cover-col--yes .badge-i { background: var(--gold); color: #1c1a11; }
.cover-col--no .badge-i { background: #e7e2d6; color: #6b6656; }
.cover-col__title .badge-i svg { width: 15px; height: 15px; }
.cover-list li { display: flex; gap: 0.7rem; align-items: flex-start; padding-block: 0.55rem; border-bottom: 1px solid var(--line-on-light); color: var(--text-on-light); }
.cover-list li:last-child { border-bottom: 0; }
.cover-list svg { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.cover-col--yes .cover-list svg { color: var(--gold-deep); }
.cover-col--no .cover-list svg { color: #b9b3a3; }
.cover-list li span { line-height: 1.4; }

@media (max-width: 820px) {
  .info-cards { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--media-first .split__media { order: 0; }
  .cover-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   14. GALLERY + LIGHTBOX  (Past Projects)
   ========================================================================== */
.gallery-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.filter-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-btn {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.8rem; padding: 0.6rem 1.15rem; border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-on-light); color: var(--text-on-light); background: transparent;
  transition: all 0.22s var(--ease);
}
.filter-btn:hover { border-color: var(--gold); color: var(--gold-deep); }
.filter-btn.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.section--ink .filter-btn, .section--charcoal .filter-btn { color: var(--text-on-dark); border-color: var(--line-on-dark); }
.section--ink .filter-btn.is-active, .section--charcoal .filter-btn.is-active { background: var(--gold); color: #1c1a11; border-color: var(--gold); }
.gallery-count { font-size: 0.85rem; color: var(--text-on-light-muted); font-family: var(--font-display); letter-spacing: 0.06em; }
.section--ink .gallery-count, .section--charcoal .gallery-count { color: var(--text-on-dark-muted); }

/* masonry-ish responsive grid via CSS columns keeps varied aspect ratios */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.4vw, 1rem);
}
.gallery__item {
  position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  display: block; width: 100%; aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-card); isolation: isolate;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.gallery__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(13,13,13,0.82) 100%);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.gallery__item:hover::after { opacity: 1; }
.gallery__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem; z-index: 2;
  color: var(--white); transform: translateY(8px); opacity: 0;
  display: flex; flex-direction: column; gap: 0.2rem;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.gallery__item:hover .gallery__cap { transform: translateY(0); opacity: 1; }
.gallery__cap-cat { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.65rem; color: var(--gold-soft); }
.gallery__cap-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; }
.lb-cat { font-size: 0.85em; font-weight: 400; color: rgba(255,255,255,0.6); }
.gallery__expand { position: absolute; top: 0.9rem; right: 0.9rem; width: 38px; height: 38px; display: grid; place-items: center; background: rgba(13,13,13,0.5); border-radius: 50%; color: #fff; opacity: 0; transform: scale(0.8); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); z-index: 2; }
.gallery__item:hover .gallery__expand { opacity: 1; transform: scale(1); }
.gallery__expand svg { width: 16px; height: 16px; }
.gallery__item.is-hidden { display: none; }

.gallery-empty { text-align: center; padding: 3rem 1rem; color: var(--text-on-light-muted); font-family: var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(8,8,8,0.94); padding: clamp(0.5rem, 3vw, 3rem);
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage { position: relative; max-width: 1100px; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lightbox__img { max-width: 100%; max-height: 78vh; border-radius: var(--radius); box-shadow: var(--shadow-lift); object-fit: contain; background: var(--charcoal); }
.lightbox__cap { color: var(--text-on-dark); margin-top: 1rem; text-align: center; max-width: 60ch; }
.lightbox__cap b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-soft); display: block; margin-bottom: 0.2rem; font-weight: 500; }
.lightbox__count { font-family: var(--font-display); letter-spacing: 0.1em; font-size: 0.8rem; color: var(--text-on-dark-muted); margin-top: 0.6rem; }
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.08);
  border: 1px solid var(--line-on-dark); color: #fff; display: grid; place-items: center;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease); z-index: 3;
}
.lb-btn:hover { background: var(--gold); color: #1c1a11; }
.lb-prev { left: -8px; } .lb-next { right: -8px; }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { position: absolute; top: -54px; right: 0; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid var(--line-on-dark); color: #fff; display: grid; place-items: center; transition: background 0.2s var(--ease); }
.lb-close:hover { background: var(--gold); color: #1c1a11; }
.lb-close svg { width: 20px; height: 20px; }

/* =============================================================================
   15. MOTION - scroll reveal
   ========================================================================== */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .tile img, .gallery__item img { transition: none; }
}

/* =============================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1120px) {
  /* collapse desktop nav, reveal hamburger + drawer (logo always stays visible) */
  .nav-toggle { display: flex; }
  /* drop the glass effect so .main-nav stops creating a stacking context that
     would trap the open drawer below .nav-backdrop; lets the bar dim while the
     drawer (z 1200) and hamburger (z 1300) stay above the backdrop (z 1100) */
  .main-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-cta.nav-cta--desktop { display: none; }
  .primary-nav {
    position: fixed; top: 0; right: 0; height: 100dvh; width: min(88vw, 360px);
    background: var(--bone); z-index: 1200; padding: 6rem 1.5rem 2rem;
    overflow-y: auto; transform: translateX(100%); transition: transform 0.35s var(--ease);
    box-shadow: -20px 0 50px -20px rgba(0,0,0,0.5); display: block;
  }
  body.nav-open .primary-nav { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line-on-light); }
  .nav-link { padding: 1rem 0.4rem; font-size: 1rem; justify-content: space-between; }
  /* mobile: dropdowns expand inline, toggled by JS */
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 0.6rem 0.6rem; min-width: 0;
    display: none;
  }
  .nav-item.is-open > .dropdown { display: block; }
  .nav-item:hover > .dropdown:not(.is-forced) { } /* avoid hover-open on touch */
  .nav-cta.nav-cta--mobile { display: inline-flex; width: 100%; margin: 1.2rem 0 0; }
  .call-fab { display: grid; }
}

@media (min-width: 1121px) {
  .nav-cta--mobile { display: none; }
  /* logo left · links centered · inquire right (flex, so the logo never stretches) */
  .primary-nav { margin-inline: auto; display: flex; justify-content: center; }
  .nav-link { padding: 0.7rem 0.7rem; font-size: 0.8rem; }
}

@media (max-width: 720px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .panel-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .utility-bar__inner { justify-content: center; }
  .utility-left { display: none; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .lb-prev { left: 4px; } .lb-next { right: 4px; }
  .lb-btn { width: 46px; height: 46px; }
}

@media (max-width: 480px) {
  .tiles { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero__cta .btn { flex: 1; }
}

/* County service-area buttons are very long — stack them below the heading
   early enough to catch "All Lackawanna County Service Areas" at 448px */
@media (max-width: 540px) {
  .county-section__head { flex-direction: column; align-items: flex-start; }
  .county-section__head .btn { align-self: stretch; text-align: center; }
}

@media (max-width: 420px) {
  /* Core fix: long button labels wrap instead of overflowing the viewport */
  .btn { white-space: normal; text-align: center; max-width: 100%; }

  /* Stack location buttons so each takes full width */
  .about-btns { flex-direction: column; }
  .about-btns .btn { width: 100%; }

  /* Skip-link stays on-screen when focused */
  .skip-link { left: 1rem; right: 1rem; transform: none; max-width: none; text-align: center; }

  /* Drop the redundant "Contact Us" text link in utility bar — phone stays */
  .utility-right > a:not(.utility-phone) { display: none; }

  /* Hero CTA: stack buttons vertically so flex:1 can't force them too narrow */
  .hero__cta { flex-direction: column; align-items: flex-start; }
  .hero__cta .btn { flex: none; width: 100%; }
}

/* =============================================================================
   17. LAYOUT BLOWOUT & OVERFLOW PATCHES
   ========================================================================== */

/* Grid children default to min-width:auto which lets content force columns wider
   than allocated. Setting 0 allows columns to compress to their assigned fr. */
.split > *,
.leak-steps > *,
.info-cards > *,
.loc-hub > *,
.tiles > * { min-width: 0; }

/* Form field pairs need the same treatment inside their sub-grid */
.form-row > * { min-width: 0; }

/* loc-map: defensive grid min-size reset (the map sizes via aspect-ratio 4/3 and
   shrinks with its column; min-height was removed as it forced a 427px min width) */
.loc-map { min-width: 0; }

/* Storm damage contacts: safety net so a long email can never break the layout.
   The primary fix is the medium-width leak-steps reflow (see the @media by
   .leak-steps) which gives the email box full width so it stays on one line. */
.leak-step__contacts a { overflow-wrap: anywhere; min-width: 0; max-width: 100%; }

/* Native <video> inherits overflow:hidden from .video-embed which clips
   browser-native controls — visible restores them */
video.video-embed { overflow: visible; }

/* Testimonials: last card's margin-bottom piles onto the section's own
   bottom padding, creating an outsized gap before the CTA */
.review-card:last-child { margin-bottom: 0; }

/* loc-hub cards (Locations page) need a reasonable minimum height on small
   viewports so the map iframe has room to render */
@media (max-width: 820px) {
  .loc-hub__map { min-height: 220px; }
}

/* Prevent the gallery preview + button from causing horizontal scroll on
   service pages — the 2-col gallery already handled, this catches edge cases */
@media (max-width: 540px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}