/* ==========================================================================
   San Antonio Garage Door Co — theme tokens derived from the brand logo
   (charcoal ink + magenta accent). Mobile-first, no build step.
   ========================================================================== */

:root {
  --color-ink: #18171b;
  --color-ink-soft: #34323b;
  --color-accent: #d10cd9;
  --color-accent-dark: #970a9e;
  --color-accent-light: #f6def9;
  --color-bg: #ffffff;
  --color-bg-alt: #faf5fb;
  --color-bg-dark: #18171b;
  --color-border: #e9e2eb;
  --color-text: #262430;
  --color-text-muted: #5c5866;
  --color-white: #ffffff;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(20, 16, 22, 0.08);
  --shadow-md: 0 12px 28px rgba(20, 16, 22, 0.14);
  --shadow-lg: 0 20px 45px rgba(20, 16, 22, 0.22);
  --header-h: 118px;
  --floating-bar-h: 60px;
  --wrap: 1180px;
  --divider-h: 48px;
}

* { box-sizing: border-box; }

/* Decorative background shapes - subtle texture behind section content,
   never interactive, always beneath the real content's stacking order. */
.decor { position: absolute; z-index: 0; pointer-events: none; }
.decor-dots {
  width: 150px; height: 150px; opacity: 0.35;
  background-image: radial-gradient(circle, var(--color-accent) 1.6px, transparent 1.6px);
  background-size: 18px 18px;
}
.tone-ink .decor-dots { opacity: 0.18; }
.decor-blob {
  width: 340px; height: 340px; opacity: 0.07;
  border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
  background: var(--color-accent);
}
.tone-ink .decor-blob { opacity: 0.14; }
.decor-ring {
  width: 220px; height: 220px; border-radius: 50%; opacity: 0.5;
  border: 2px dashed var(--color-accent);
}
.tone-ink .decor-ring { opacity: 0.2; border-color: #fff; }
.decor-top-right { top: -30px; right: -20px; }
.decor-bottom-left { bottom: -40px; left: -30px; }
.decor-bottom-right { bottom: -50px; right: -60px; }
.decor-top-left { top: -20px; left: -20px; }
.decor-mid-right { top: 50%; right: -80px; transform: translateY(-50%); }
@media (max-width: 700px) {
  .decor { display: none; }
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-ink);
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 5vw + 1rem, 3.4rem); }
h2 { font-size: clamp(1.5rem, 2.6vw + 1rem, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 820px; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-ink); color: #fff;
  padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.02em; text-transform: uppercase;
  padding: 12px 22px; border-radius: var(--radius-sm); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform 0.15s ease, background-color 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-dark); }
.btn-ghost { border-color: var(--color-ink); color: var(--color-ink); background: transparent; }
.btn-ghost:hover { background: var(--color-ink); color: #fff; }
.btn-outline-light { border-color: #fff; color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--color-ink); }
.btn-lg { padding: 15px 28px; font-size: 1.1rem; }
.btn-block { display: flex; width: 100%; margin-top: 12px; }

/* Header ------------------------------------------------------------------ */
/* z-index:200, not 100: .site-header creates its own stacking context, so
   the mobile nav drawer nested inside it (z-index:160) is capped at
   whatever stacking position .site-header itself has relative to page
   siblings like .floating-call-bar (z-index:150) - a child's z-index
   can't "escape" its ancestor's stacking level. At 100 the header (and
   everything in it, including the open drawer) rendered BELOW the
   floating call button. */
.site-header { position: sticky; top: 0; z-index: 200; background: var(--color-white); box-shadow: var(--shadow-sm); }
.header-top { background: var(--color-ink); color: #fff; font-size: 0.85rem; }
.header-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 20px; flex-wrap: wrap; }
.header-tagline { margin: 0; opacity: 0.9; }
.header-phone { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.header-phone .icon { width: 16px; height: 16px; fill: var(--color-accent); }
.header-main { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; gap: 16px; }
.brand-logo { height: 68px; width: auto; } /* padding above trimmed to match, so header-main's total height is unchanged */
.primary-nav > ul { list-style: none; display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; }
.primary-nav { display: flex; align-items: center; gap: 24px; }
.primary-nav > ul > li > a {
  color: var(--color-ink); font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; font-size: 0.98rem; letter-spacing: 0.02em; padding: 8px 2px; display: inline-block;
}
.primary-nav > ul > li > a:hover, .primary-nav > ul > li > a[aria-current="page"] { color: var(--color-accent); text-decoration: none; }
.dropdown-caret { width: 10px; height: 7px; margin-left: 5px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; vertical-align: middle; position: relative; top: -1px; }
.has-dropdown { position: relative; }
.has-dropdown:hover .dropdown-caret, .has-dropdown:focus-within .dropdown-caret, .has-dropdown.is-open .dropdown-caret { transform: rotate(180deg); }
.dropdown {
  /* top:100%, zero gap: the box sits flush against the trigger so there's
     no dead zone the pointer can slip through while moving down to it -
     even a small real gap here would drop :hover on .has-dropdown
     mid-transit and close the menu before the pointer arrives. The extra
     top padding (rather than a margin/gap) gives it visual breathing room
     without creating one, since padding is still part of the hoverable box. */
  display: block; list-style: none; position: absolute; top: 100%; left: 0; padding: 14px 8px 8px;
  width: 240px; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(2px) scale(0.98); transform-origin: top left;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 50; margin: 0;
}
.has-dropdown-right .dropdown { transform-origin: top right; }
.dropdown::before {
  content: ""; position: absolute; top: -6px; left: 20px; width: 12px; height: 12px; background: #fff;
  border-left: 1px solid var(--color-border); border-top: 1px solid var(--color-border); transform: rotate(45deg);
}
.has-dropdown-right .dropdown::before { left: auto; right: 20px; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
/* The rightmost nav items sit close to the viewport edge - hang their
   flyout from the right so it opens inward instead of running off-screen. */
.has-dropdown-right .dropdown { left: auto; right: 0; }
.dropdown li a { display: block; padding: 8px 12px; color: var(--color-text); text-transform: none; font-family: var(--font-body); font-weight: 500; border-radius: 6px; }
.dropdown li a:hover { background: var(--color-bg-alt); color: var(--color-accent-dark); text-decoration: none; }
.link-arrow { width: 13px; height: 13px; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; position: relative; top: -1px; }
.nav-cta { margin-left: 4px; }
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 38px; background: none; border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--color-ink); border-radius: 2px; }
.nav-backdrop { display: none; }

/* Breadcrumbs -------------------------------------------------------------- */
.breadcrumbs { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); font-size: 0.85rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 0; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--color-text-muted); }
.breadcrumbs li[aria-current="page"] { color: var(--color-text-muted); }

/* Section tone alternation --------------------------------------------------*/
.tone-bg { background: var(--color-bg); }
.tone-alt { background: var(--color-bg-alt); }
.tone-ink { background: var(--color-ink); color: #f1eff2; }
.tone-ink h2, .tone-ink h3 { color: #fff; }
.tone-ink p { color: #d3cfd6; }
.tone-ink .content-section p { color: #d3cfd6; }

/* Decorative section divider shapes ----------------------------------------*/
.shape-divider { position: absolute; left: 0; right: 0; bottom: -1px; height: var(--divider-h); overflow: hidden; line-height: 0; pointer-events: none; }
.shape-divider svg { width: 100%; height: 100%; display: block; }
.shape-to-bg polygon { fill: var(--color-bg); }
.shape-to-alt polygon { fill: var(--color-bg-alt); }
.shape-to-ink polygon { fill: var(--color-ink); }

/* Hero ---------------------------------------------------------------------*/
.hero { position: relative; color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(23,22,26,0.94) 15%, rgba(23,22,26,0.62) 62%, rgba(209,12,217,0.35) 100%); }
.hero-inner { position: relative; padding: 68px 20px 76px; }
.hero-copy { max-width: 700px; }
.eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent); font-weight: 700; margin-bottom: 10px; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--color-accent); border-radius: 2px; display: inline-block; }
.hero h1 { color: #fff; }
.hero-lead { font-size: 1.15rem; color: #ecebee; max-width: 60ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 22px 0; }
.trust-badges { list-style: none; display: flex; gap: 18px; flex-wrap: wrap; padding: 0; margin: 10px 0 0; font-size: 0.9rem; }
.trust-badges li { display: flex; align-items: center; gap: 6px; color: #d9d7de; }
.trust-badges li::before { content: "\2713"; color: var(--color-accent); font-weight: 700; }

/* Content sections ---------------------------------------------------------*/
.content-section { padding: 44px 0; }
.content-section p { color: var(--color-text); }
.content-section-media { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 36px; align-items: center; }
.content-section-media.reverse .content-section-media-figure { order: -1; }
.content-section-media-figure { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; }
.content-section-media-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.content-section-media-figure:hover img { transform: scale(1.06); }

/* Photo service cards -------------------------------------------------------*/
.services-grid-section { padding: 56px 0; position: relative; overflow: hidden; }
.services-grid-section > .wrap { position: relative; z-index: 1; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; margin-top: 28px; }
.service-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease; display: flex; flex-direction: column; }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); text-decoration: none; }
.service-card-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.service-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.service-card:hover .service-card-media img { transform: scale(1.06); }
.service-icon {
  /* Fully contained within the photo (top-left corner), not straddling
     the photo/body seam - a badge that overlaps two different
     backgrounds reads as broken rather than deliberate. */
  position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; background: var(--color-accent); box-shadow: var(--shadow-md);
}
.service-icon svg { width: 21px; height: 21px; fill: #fff; }
.service-card-body { padding: 22px; }
.service-card h3 { margin-bottom: 6px; }
.service-card p { color: var(--color-text-muted); font-size: 0.95rem; }
.service-card-link { color: var(--color-accent-dark); font-weight: 700; font-size: 0.9rem; }

/* Gallery / recent work - a quilted grid (see sections.js: gallery()):
   a true CSS grid where every photo's edges snap to shared row/column
   lines, with some tiles spanning 2x1 or 1x2 for a mosaic look. Unlike
   masonry's independently-flowing columns, a grid can't produce a
   ragged bottom edge - every row is a real row. ------------------------*/
.gallery-section { padding: 56px 0; position: relative; overflow: hidden; }
.gallery-section > .wrap { position: relative; z-index: 1; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(var(--quilt-cols, 3), 1fr);
  grid-auto-rows: 150px; gap: 14px; margin-top: 26px;
}
.gallery-grid figure {
  margin: 0; border-radius: var(--radius-sm); overflow: hidden; position: relative;
  box-shadow: var(--shadow-sm); display: block;
}
.gallery-grid img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.4s ease, filter 0.4s ease; }
.gallery-grid figure:hover img { transform: scale(1.08); }
.gallery-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px 6px;
  background: linear-gradient(0deg, rgba(15,14,17,0.75), transparent); color: #fff; font-size: 0.78rem; font-weight: 600;
  opacity: 0; transition: opacity 0.2s ease;
}
.gallery-grid figure:hover figcaption { opacity: 1; }

/* Trust / stat band -----------------------------------------------------*/
.trust-band { padding: 52px 0; position: relative; overflow: hidden; }
.trust-band > .wrap { position: relative; z-index: 1; }
.trust-band-photo { color: #fff; background-size: cover; background-position: center; background-repeat: no-repeat; }
.trust-band-scrim { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(23,22,26,0.93) 10%, rgba(23,22,26,0.7) 100%); z-index: 0; }
/* Parallax: same "stuck while you scroll past" treatment as
   .cta-photo-band-parallax, desktop only (background-attachment:fixed is
   unreliable and can cause scroll jank on mobile, notably iOS Safari). */
@media (min-width: 901px) {
  .trust-band-photo-parallax { background-attachment: fixed; }
}
.trust-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; }
.trust-band-item { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--radius); background: rgba(255,255,255,0.06); }
.tone-bg .trust-band-item, .tone-alt .trust-band-item { background: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.trust-band-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-accent); display: flex; align-items: center; justify-content: center; }
.trust-band-icon svg { width: 20px; height: 20px; fill: #fff; }
.trust-band-item strong { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.01em; }
.trust-band-item span { font-size: 0.88rem; color: inherit; opacity: 0.85; }

/* Process / how-it-works steps ---------------------------------------------*/
.process-section { padding: 56px 0; position: relative; overflow: hidden; }
.process-section > .wrap { position: relative; z-index: 1; }
.process-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.process-step { position: relative; padding: 28px 20px 22px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.tone-alt .process-step, .tone-ink .process-step { background: rgba(255,255,255,0.9); }
.process-step-number {
  position: absolute; top: -14px; left: 20px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-ink); color: #fff; font-family: var(--font-display); font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem; box-shadow: var(--shadow-sm);
}
.process-step-icon { display: flex; width: 42px; height: 42px; border-radius: 10px; background: var(--color-accent-light); align-items: center; justify-content: center; margin: 10px 0 14px; }
.process-step-icon svg { width: 20px; height: 20px; fill: var(--color-accent-dark); }
.process-step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.process-step p { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; }
.process-grid li:not(:last-child)::after {
  content: ""; position: absolute; top: 45%; left: 100%; width: 24px; height: 2px; background: var(--color-border);
  display: none;
}
@media (min-width: 901px) {
  .process-grid li:not(:last-child)::after { display: block; }
}

/* CTA photo band (mid-page promo banner) -------------------------------------*/
.cta-photo-band {
  position: relative; color: #fff; overflow: hidden; min-height: 320px; display: flex; align-items: center;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* Parallax: the photo stays fixed to the viewport while the page scrolls
   past it, so the section appears to slide over a static image - desktop
   only, since background-attachment:fixed is unreliable and can cause
   scroll jank on mobile browsers (notably iOS Safari, which never
   properly supported it). Mobile keeps a normal scrolling background. */
@media (min-width: 901px) {
  .cta-photo-band-parallax { background-attachment: fixed; }
}
.cta-photo-band-scrim { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(151,10,158,0.92) 0%, rgba(24,23,27,0.88) 100%); }
.cta-photo-band-inner { position: relative; padding: 52px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-photo-band h2 { color: #fff; margin-bottom: 6px; }
.cta-photo-band p { color: #f3e6f5; max-width: 46ch; margin: 0; }

/* Link grid (areas we serve, related links) --------------------------------*/
.link-grid-section { padding: 52px 0; }
.link-grid { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 12px; }
.link-grid li a { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-weight: 600; color: var(--color-ink); box-shadow: var(--shadow-sm); }
.link-grid li a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.link-grid li a:hover { border-color: var(--color-accent); color: var(--color-accent-dark); text-decoration: none; transform: translateY(-2px); }
.link-grid li a span { font-weight: 400; font-size: 0.85rem; color: var(--color-text-muted); }

/* Area directory (hub page) ------------------------------------------------*/
.area-directory-section { padding: 52px 0; }
.area-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; margin-top: 20px; }
.area-group { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.area-group h3 { color: var(--color-accent-dark); font-size: 1rem; margin-bottom: 8px; border-bottom: 2px solid var(--color-accent); display: inline-block; padding-bottom: 2px; }
.area-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.area-group li a { color: var(--color-text); font-size: 0.92rem; }
.area-group li a:hover { color: var(--color-accent-dark); }

/* FAQ ------------------------------------------------------------------- */
.faq-section { padding: 48px 0; }
.faq-list { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 4px 18px; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.faq-item.is-open { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.faq-item summary { cursor: pointer; font-weight: 700; padding: 14px 0; font-family: var(--font-display); font-size: 1.05rem; list-style: none; position: relative; padding-right: 28px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0; top: 12px; font-size: 1.4rem; color: var(--color-accent); line-height: 1;
  transition: transform 0.3s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
/* Native <details> shows/hides its content instantly via the `open`
   attribute with no way to transition "auto" height. With JS available,
   main.js takes over: it intercepts the toggle, measures the real
   content height, and animates max-height/opacity itself (see
   .faq-item.is-open below, driven by the JS-set inline max-height).
   Without JS, .js never gets added to <html> and the native instant
   open/close still works fully - just without the animation. */
.js .faq-answer { display: block; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.3s ease; }
.js .faq-item.is-open .faq-answer { opacity: 1; }
.faq-answer p { color: var(--color-text-muted); padding-bottom: 14px; }

/* CTA band ---------------------------------------------------------------*/
/* A visibly different shade from the footer that usually follows it
   (var(--color-ink-soft), not --color-ink, which is identical to
   --color-bg-dark) - back to back, two identical near-black sections
   read as one undifferentiated block with no visible seam. */
.cta-band { background: var(--color-ink-soft); color: #fff; padding: 40px 0; position: relative; overflow: hidden; }
.cta-band > .wrap { position: relative; z-index: 1; }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin-bottom: 4px; }
.cta-band p { color: #cfccd4; margin: 0; }

/* Contact card / two column trust layout ----------------------------------*/
.wrap-narrow-with-aside { max-width: var(--wrap); margin: 0 auto; padding: 44px 20px; }
.wrap-narrow-with-aside.has-aside { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.contact-card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; position: sticky; top: calc(var(--header-h) + 20px); }
.contact-card h2 { font-size: 1.2rem; }
.contact-card p { font-size: 0.95rem; margin-bottom: 14px; }

/* Quote request form -------------------------------------------------------*/
.quote-form-section { padding: 52px 0; position: relative; overflow: hidden; }
.quote-form-section > .wrap { position: relative; z-index: 1; }
.quote-form-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 32px; max-width: 640px; margin: 0 auto; }
.quote-form-card h2 { margin-bottom: 6px; }
.quote-form-card > p { color: var(--color-text-muted); margin-bottom: 22px; }
.quote-form { display: flex; flex-direction: column; gap: 16px; }
.quote-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 600; color: var(--color-ink); }
.quote-form label em { color: var(--color-accent); font-style: normal; margin-left: 2px; }
.quote-form input, .quote-form select, .quote-form textarea {
  font: inherit; padding: 11px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg-alt); color: var(--color-text); width: 100%;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: 2px solid var(--color-accent); outline-offset: 1px; background: #fff;
}
.quote-form textarea { resize: vertical; min-height: 90px; }
.quote-form-note { font-size: 0.82rem; color: var(--color-text-muted); text-align: center; margin: 0; }
.quote-form-note[data-state="error"] { color: #b3261e; }
.quote-form-note[data-state="ok"] { color: #1a7a3c; }
@media (max-width: 560px) {
  .quote-form-row { grid-template-columns: 1fr; }
  .quote-form-card { padding: 22px; }
}

/* Legal pages ------------------------------------------------------------*/
.legal-hero { background: var(--color-bg-alt); padding: 44px 0 24px; border-bottom: 1px solid var(--color-border); }
.legal-body { padding: 36px 0 60px; }
.legal-body h2 { margin-top: 1.6em; font-size: 1.3rem; }

/* Footer -------------------------------------------------------------------*/
.site-footer { background: var(--color-bg-dark); color: #cfccd4; padding: 56px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
.footer-col h2 { color: #fff; font-size: 1.05rem; margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: #cfccd4; font-size: 0.92rem; }
.footer-col a:hover { color: var(--color-accent); }
/* Every logo in this photo library mixes a dark charcoal/black line-art
   element (roofline, house outline) with the brand accent color - fine
   on the white background the source PNGs ship with, but the
   transparency step (make_logo_transparent.py) strips exactly that
   white, so those dark strokes go near-invisible against the footer's
   own dark background (var(--color-bg-dark)) on every site. A white
   card behind the logo restores the contrast the artwork was designed
   for, everywhere the footer's dark background is used. */
.footer-brand img { background: #fff; border-radius: var(--radius-sm); margin-bottom: 14px; }
.footer-brand p { font-size: 0.92rem; }
.footer-nap { font-size: 0.9rem; line-height: 1.7; }
.footer-nap a { color: #fff; font-weight: 600; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 18px 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.85rem; }
.footer-legal { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }
.footer-legal a { color: #a7a3ae; }

/* Floating mobile call bar - nearly full width (small inset on all sides
   so all 4 rounded corners are actually visible - flush against the
   screen edge, a rounded bottom corner just looks like a notch, not
   rounding), pinned near the bottom edge. A corner-anchored pill (tried
   first) is a fixed-position element too, so it sits over whatever
   content happens to scroll underneath it at any given moment, not just
   at the end of the page - on a busy page that reads as broken (covering
   headings mid-scroll). Staying nearly full width avoids that: it still
   reads as a persistent toolbar, the same convention as a native app's
   bottom tab bar, just with room for the rounding to show. -------------*/
.floating-call-bar {
  display: none;
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 150;
  height: var(--floating-bar-h);
  background: var(--color-accent);
  color: #fff;
  align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(20,16,22,0.3), 0 2px 8px rgba(20,16,22,0.16);
}
.floating-call-bar:hover, .floating-call-bar:active {
  background: var(--color-accent-dark); text-decoration: none; color: #fff;
}
.floating-call-bar .icon { width: 20px; height: 20px; fill: #fff; }

/* Responsive ---------------------------------------------------------------*/
@media (max-width: 900px) {
  .primary-nav { position: fixed; top: 0; bottom: 0; right: -340px; left: auto; width: min(320px, 86vw); background: #fff; flex-direction: column;
    align-items: stretch; padding: 90px 24px 24px; box-shadow: -8px 0 30px rgba(0,0,0,0.18); z-index: 160;
    transition: right 0.25s ease; overflow-y: auto; }
  .primary-nav.is-open { right: 0; }
  .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(15,14,17,0.45); z-index: 155; opacity: 0; visibility: hidden; transition: opacity 0.25s ease; }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .primary-nav > ul > li > a { padding: 12px 4px; border-bottom: 1px solid var(--color-border); }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: none; display: none; padding: 4px 0 4px 12px; }
  .dropdown::before { display: none; }
  .has-dropdown.is-open .dropdown { display: block; }
  .dropdown-caret { margin-left: auto; }
  .primary-nav > ul > li > a { display: flex; align-items: center; }
  .nav-cta { margin: 16px 0 0; text-align: center; }
  .nav-toggle { display: flex; }
  .header-tagline { display: none; }
  .header-top-inner { justify-content: flex-end; }
  body { padding-bottom: calc(var(--floating-bar-h) + 24px); } /* bar height + its 12px top/bottom clearance from the inset */
  .floating-call-bar { display: flex; }
  /* .floating-call-bar (z-index:150) is wider than .primary-nav's open
     drawer (z-index:160) and isn't scoped inside it, so without this its
     left edge would peek out from behind the drawer while it's open,
     overlapping the drawer's own phone/Get a Quote elements right next
     to it. main.js toggles this class on <body> in openNav/closeNav. */
  .nav-open .floating-call-bar { display: none; }
  .wrap-narrow-with-aside.has-aside { grid-template-columns: 1fr; }
  .contact-card { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .content-section-media { grid-template-columns: 1fr; gap: 20px; }
  .content-section-media .content-section-media-figure {
    /* Break out of .wrap's 20px side padding to run edge-to-edge instead
       of sitting as a narrower, floating rounded card with visible
       margin on both sides. */
    order: -1; aspect-ratio: 16 / 9;
    width: calc(100% + 40px); margin: 0 -20px;
    border-radius: 0; box-shadow: none;
  }
  .trust-band-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-auto-rows: 120px; }
  .cta-photo-band-inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  :root { --divider-h: 32px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .link-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .area-directory { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { padding: 44px 16px 40px; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; }
  .trust-band-grid { grid-template-columns: 1fr; }
  /* The large 2-span quilt tiles feel cramped this narrow - drop every
     figure back to a plain 1x1 cell in a simple 2-column grid instead
     of trying to preserve the mosaic spans (!important beats the
     per-figure inline grid-column/grid-row set in sections.js). */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .gallery-grid figure { grid-column: auto !important; grid-row: auto !important; }
  .services-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
}
@media (min-width: 901px) {
  .nav-toggle { display: none; }
}

/* Scroll-reveal entrance animation -------------------------------------
   Sections and grid items fade/slide in the first time they scroll into
   view (JS toggles .is-visible via IntersectionObserver in main.js; with
   JS disabled the noscript rule below keeps everything visible). */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.32s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.38s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.44s; }
.no-js .reveal, .no-js .reveal-stagger > * { opacity: 1; transform: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}


/* ==========================================================================
   Variant C - "Utility": a darker, industrial design language layered on
   top of main.css. Redeclares the shape/type tokens (sharp corners, hard
   flat shadows, Oswald headings) so every shared component reshapes for
   free, then supplies the four structurally distinct pieces (dark header,
   bottom-anchored hero with a stat strip, two-tone split CTA band, dense
   bordered photo grid) that main.css has no rules for. See
   templates/variants/c.js for the markup these target.
   ========================================================================== */

:root {
  --radius: 4px;
  --radius-sm: 2px;
  --shadow-sm: 0 1px 0 rgba(20, 16, 22, 0.18);
  --shadow-md: 0 3px 0 rgba(20, 16, 22, 0.18);
  --shadow-lg: 0 6px 0 rgba(20, 16, 22, 0.2);
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --header-h: 82px;
}

/* Dark header ------------------------------------------------------------ */
.site-header { background: var(--color-ink); border-bottom: 3px solid var(--color-accent); box-shadow: none; }
/* Same fix as .footer-brand img in main.css: the logo's dark line-art
   elements need a white backdrop to stay visible, and this is the one
   header background that's actually dark (A and B's headers are white,
   so their logos already sit on white and don't need this). */
.brand { background: #fff; border-radius: var(--radius-sm); display: inline-flex; align-items: center; }
/* Desktop-only: on mobile .primary-nav becomes a white off-canvas drawer
   (see main.css's mobile media query), and white nav-link text on that
   white background would be invisible except for the accent-colored
   active-page link - main.css's own dark-on-white link color already
   applies correctly there without this override. */
@media (min-width: 901px) {
  .primary-nav > ul > li > a { color: #fff; }
  .primary-nav > ul > li > a:hover, .primary-nav > ul > li > a[aria-current="page"] { color: var(--color-accent); }
}
.nav-toggle { border-color: rgba(255, 255, 255, 0.3); }
.nav-toggle span { background: #fff; }
.header-phone-c { display: inline-flex; align-items: center; gap: 7px; color: var(--color-accent); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 0 4px; white-space: nowrap; }
.header-phone-c .icon { width: 17px; height: 17px; fill: var(--color-accent); }
.nav-cta { border-radius: var(--radius-sm); }
@media (min-width: 901px) {
  .header-phone-c:hover { text-decoration: none; color: #fff; }
}
@media (max-width: 900px) {
  .header-phone-c { margin: 14px 0 0; justify-content: center; padding: 10px 4px; border-top: 1px solid var(--color-border); }
}

/* Bottom-anchored hero with a stat strip ----------------------------------*/
.hero-c { position: relative; color: #fff; overflow: hidden; min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-c .hero-media { position: absolute; inset: 0; }
.hero-c .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-c-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,22,26,0.96) 12%, rgba(23,22,26,0.55) 55%, rgba(23,22,26,0.15) 100%); }
.hero-c-inner { position: relative; padding: 40px 20px 48px; }
/* h1 needs its own override, not just inherited color:#fff on .hero-c -
   an element's own explicit color (h1 gets one from the shared base
   h1/h2/h3/h4 rule) always wins over an inherited value, so without this
   the headline rendered in near-black ink text on top of the photo. */
.hero-c-inner h1 { color: #fff; }
.hero-c-inner .hero-lead { color: #ecebee; }
.hero-c-stats { position: relative; background: var(--color-ink); border-top: 3px solid var(--color-accent); }
.hero-c-stats-inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-c-stats-inner > div { padding: 16px 12px; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.14); }
.hero-c-stats-inner > div:last-child { border-right: none; }
.hero-c-stats-inner strong { display: block; font-family: var(--font-display); color: var(--color-accent); font-size: 1.1rem; letter-spacing: 0.02em; }
.hero-c-stats-inner span { display: block; font-size: 0.8rem; color: #cfccd4; margin-top: 2px; }
@media (max-width: 560px) {
  .hero-c-stats-inner strong { font-size: 0.95rem; }
  .hero-c-stats-inner span { font-size: 0.72rem; }
}

/* Plain (photo-less) content sections - contentSections() alternates a
   photo in every other section; the ones without one otherwise render as
   a bare, undecorated text block, which reads flat against this variant's
   photo-heavy, industrial styling everywhere else on the page. Scoped to
   [data-variant="c"] so variants A and B (whose plain sections were never
   flagged) keep the shared, unmodified look. */
[data-variant="c"] .content-section-plain .wrap-narrow {
  border-left: 4px solid var(--color-accent);
  padding-left: 28px;
}
[data-variant="c"] .content-section-plain h2 {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
@media (max-width: 560px) {
  [data-variant="c"] .content-section-plain .wrap-narrow { padding-left: 18px; border-left-width: 3px; }
}

/* Two-tone split CTA band -------------------------------------------------*/
.cta-split { display: grid; grid-template-columns: 1fr 1fr; }
.cta-split-copy { background: var(--color-ink); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 40px clamp(20px, 4vw, 60px) 40px clamp(20px, 4vw, 80px); }
.cta-split-copy h2, .cta-split-copy p { max-width: 34ch; }
.cta-split-copy h2 { color: #fff; margin-bottom: 4px; }
.cta-split-copy p { color: #cfccd4; margin: 0; }
.cta-split-actions { background: var(--color-accent); display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 32px 20px; }
@media (max-width: 700px) {
  .cta-split { grid-template-columns: 1fr; }
}

/* Dense bordered "documentation sheet" photo grid -------------------------*/
.gallery-doc-section { padding: 56px 0; }
.gallery-doc { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px; margin-top: 24px; background: var(--color-border); }
.gallery-doc-item { margin: 0; background: var(--color-bg); }
.gallery-doc-media { aspect-ratio: 4 / 3; overflow: hidden; }
.gallery-doc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.gallery-doc-item:hover .gallery-doc-media img { transform: scale(1.06); }
.gallery-doc-item figcaption { padding: 8px 10px; font-size: 0.78rem; font-weight: 600; border-top: 2px solid var(--color-accent); color: var(--color-text); }


:root{--color-accent:#6b1874;--color-accent-dark:#490d4f;--color-accent-light:#f4d8f7;}