/* =========================================================
   Family Gutters & Guards Inc. - Design tokens
   Palette: Trust & Authority (deep blue + rain accent + orange CTA)
   ========================================================= */
:root {
  --color-primary: #0B2A5B;          /* deep gutter-metal blue */
  --color-primary-600: #10347A;
  --color-primary-700: #0A2050;
  --color-secondary: #3B6FE0;        /* rain blue */
  --color-accent: #EA580C;           /* CTA orange */
  --color-accent-600: #D4470A;
  --color-bg: #FBFAF7;               /* warm off-white (not clinical) */
  --color-surface: #FFFFFF;
  --color-muted: #F1F5FB;
  --color-fg: #0E1B33;
  --color-fg-2: #3A4767;             /* body */
  --color-fg-3: #6A7691;             /* meta */
  --color-border: #E1E7F1;
  --color-border-strong: #C7D2E4;
  --color-danger: #DC2626;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 42, 91, 0.06);
  --shadow: 0 6px 20px -8px rgba(11, 42, 91, 0.18), 0 2px 4px rgba(11, 42, 91, 0.05);
  --shadow-lg: 0 24px 60px -20px rgba(11, 42, 91, 0.28), 0 4px 10px rgba(11, 42, 91, 0.06);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  --nav-h: 76px;
  --container: 1200px;
  --gap: clamp(16px, 2vw, 24px);
}

/* =========================================================
   Reset / base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-fg-2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--color-accent); }

::selection { background: var(--color-accent); color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* Focus */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 65%, transparent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-fg);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 .5em;
  font-variation-settings: "opsz" 32;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.025em; font-variation-settings: "opsz" 144; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1em; }

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary);
  margin: 0 0 18px;
}
.eyebrow--light { color: #BFDBFE; }
.eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.h-light { color: #fff; }

.accent-underline {
  position: relative;
  display: inline-block;
  color: inherit;
}
.accent-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.05em;
  height: 0.35em;
  background: linear-gradient(120deg, rgba(234,88,12,.55), rgba(234,88,12,.25));
  z-index: -1;
  border-radius: 4px;
  transform: skewX(-8deg);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  will-change: transform;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--lg { padding: 15px 26px; font-size: 16px; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn--primary:hover {
  background: var(--color-primary-600);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.btn--primary:active { transform: translateY(0); }

.btn--accent {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(234, 88, 12, 0.55);
}
.btn--accent:hover {
  background: var(--color-accent-600);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -8px rgba(234, 88, 12, 0.65);
}
.btn--accent:active { transform: translateY(0); }

.btn--ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}

.btn__spinner { display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: spin .8s linear infinite;
}
.btn.is-loading .btn__label { opacity: .4; }
.btn.is-loading .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   Nav
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 50;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), height var(--dur) var(--ease);
  background: transparent;
}
.nav__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}

.nav.is-solid {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(11,42,91,.08), 0 6px 24px -14px rgba(11,42,91,.35);
  height: 64px;
}

.brand {
  display: flex; align-items: center; gap: 12px;
  color: #fff;
  transition: color var(--dur) var(--ease);
}
.nav.is-solid .brand { color: var(--color-primary); }
/* Their roofline mark, knocked out of the original artwork.
   The PNG ships in brand red; over the dark hero we flip it to solid white,
   then let it return to red once the nav goes opaque. */
.brand__mark {
  width: 52px;
  height: auto;
  flex: none;
  filter: brightness(0) invert(1);
  transition: filter var(--dur) var(--ease);
}
.nav.is-solid .brand__mark { filter: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand__amp { color: var(--color-accent); font-style: italic; }
.brand__tag {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: .72; font-weight: 500;
  margin-top: 2px;
}

.nav__links {
  display: flex; gap: 26px; align-items: center;
  font-size: 15px; font-weight: 500;
  /* One line, always. Spanish labels are longer, and a wrapped nav row would
     push the bar to double height. The breakpoint below swaps in the hamburger
     before there's any real chance of a collision. */
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.nav__links a {
  position: relative;
  color: rgba(255,255,255,0.88);
  padding: 6px 0;
  white-space: nowrap;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { transform: scaleX(1); }

.nav.is-solid .nav__links a { color: var(--color-fg-2); }
.nav.is-solid .nav__links a:hover { color: var(--color-primary); }

.nav__actions { display: flex; align-items: center; gap: 14px; }

/* Nav CTA inverts when over the dark hero (top of page) */
.nav:not(.is-solid) .nav__actions .btn--primary {
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35);
}
.nav:not(.is-solid) .nav__actions .btn--primary:hover {
  background: #EEF3FB;
  color: var(--color-primary-700);
}
.nav__phone {
  display: none; align-items: center; gap: 8px;
  color: #fff; font-weight: 600; font-size: 14px;
}
.nav.is-solid .nav__phone { color: var(--color-primary); }

/* Language switch. Outlined so it never competes with the orange CTA, and it
   follows the nav's light/solid states the same way the phone link does. */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit; font-size: 13px; font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.lang-toggle:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }
/* Full word on roomy screens, two-letter code once the nav gets tight */
.lang-toggle__short { display: none; }
.nav.is-solid .lang-toggle {
  color: var(--color-primary);
  border-color: var(--color-border);
  background: #fff;
}
.nav.is-solid .lang-toggle:hover {
  border-color: var(--color-primary);
  background: var(--color-muted);
}

.nav__toggle {
  display: none; background: none; border: none;
  width: 42px; height: 42px; padding: 0;
  position: relative;
}
.nav__toggle span {
  display: block; height: 2px; width: 22px; margin: 4px auto;
  background: currentColor; color: #fff;
  border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav.is-solid .nav__toggle span { background: var(--color-primary); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__mobile {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  background: #fff;
  padding: 20px 24px 28px;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 30px 60px -30px rgba(11,42,91,.3);
  display: flex; flex-direction: column; gap: 14px;
  z-index: 49;
}
.nav__mobile[hidden] { display: none; }
.nav__mobile a {
  padding: 10px 6px;
  color: var(--color-fg);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}
.nav__mobile a:last-child { border-bottom: 0; }
.nav__mobile-call { color: var(--color-accent) !important; }
/* The link rule above outranks .btn--primary, so the CTA needs its white back */
.nav__mobile a.btn--primary,
.nav__mobile a.btn--primary:hover { color: #fff; }

/* Hand off to the hamburger at 1040px, not 900px. The inline nav row needs
   ~967px in English and ~1029px in Spanish once the language button is in it,
   and the Spanish labels are the long ones ("Área de servicio"). Below this the
   row would wrap to two lines instead. */
@media (max-width: 1040px) {
  .nav__links { display: none; }
  .nav__actions .btn--primary { display: none; }
  .nav__phone { display: inline-flex; }
  .nav__toggle { display: block; }
}
@media (max-width: 560px) {
  /* Shorter label, but keep the button a comfortable thumb target */
  .lang-toggle { padding: 7px 10px; gap: 5px; min-height: 40px; }
  .lang-toggle__label { display: none; }
  .lang-toggle__short { display: inline; }
}
@media (max-width: 480px) {
  .nav__phone span { display: none; }
  .brand__tag { display: none; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
  min-height: min(90vh, 820px);
  padding: calc(var(--nav-h) + 56px) 0 104px;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-primary-700);   /* base tone before the photo paints */
}
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__fallback { width: 100%; height: 100%; position: absolute; inset: 0; }

/* --- Background photograph -------------------------------------------
   Swap hero.jpg for a landscape exterior shot, ~2400px wide, subject
   right of center so the copy panel on the left stays clean.
   object-position keeps the subject visible as the viewport narrows.  */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
  filter: saturate(0.92) contrast(1.03);
  animation: heroPhotoIn 900ms var(--ease-out) both;
}
@keyframes heroPhotoIn {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* Legibility + brand grade. Four stacked layers, top-most first:
   1) left-to-right reading panel  2) top wash under the sticky nav
   3) bottom fade into the page    4) flat navy tint to match the palette */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(6, 20, 44, 0.94) 0%,
      rgba(6, 20, 44, 0.86) 30%,
      rgba(7, 23, 50, 0.58) 52%,
      rgba(7, 23, 50, 0.22) 76%,
      rgba(7, 23, 50, 0.34) 100%),
    linear-gradient(to bottom, rgba(6, 20, 44, 0.55) 0%, rgba(6, 20, 44, 0) 24%),
    linear-gradient(to top,    rgba(6, 20, 44, 0.72) 0%, rgba(6, 20, 44, 0) 42%),
    linear-gradient(rgba(11, 42, 91, 0.32), rgba(11, 42, 91, 0.32));
}

/* Smooth droplet rain - JS-spawned, GPU-composited */
.hero__rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.raindrop {
  position: absolute;
  top: -40px;
  width: 1.2px;
  height: 18px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(to bottom,
    rgba(191, 219, 254, 0) 0%,
    rgba(219, 234, 254, 0.55) 50%,
    rgba(233, 242, 253, 0.8) 100%);
  filter: blur(0.35px);
  will-change: transform, opacity;
  transform-origin: top center;
  --drop-scale: 1;
  animation: raindropFall linear infinite;
}
@keyframes raindropFall {
  0%   { transform: translate3d(0, 0, 0)       scale(var(--drop-scale)); opacity: 0; }
  6%   { opacity: var(--drop-opacity, 0.65); }
  94%  { opacity: var(--drop-opacity, 0.65); }
  100% { transform: translate3d(6px, 940px, 0) scale(var(--drop-scale)); opacity: 0; }
}
.hero::after {
  content: "";
  position: absolute; inset: auto 0 -1px 0; height: 80px; z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 640px) 1fr;
  gap: 40px;
  align-items: end;
  width: 100%;
}
.hero__content { grid-column: 1; }
.hero__content .eyebrow { color: #FED7AA; }
.hero__content .eyebrow__dot { box-shadow: 0 0 0 4px rgba(234,88,12,.35); }

.hero__title {
  color: #fff;
  font-weight: 700;
  font-variation-settings: "opsz" 144;
}
.hero__title-line { display: block; color: #DCE6F5; font-weight: 500; font-size: .82em; font-style: italic; }

.hero__lede {
  font-size: 1.125rem; color: #DCE6F5; max-width: 52ch; margin-bottom: 28px;
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }

.hero__trust {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 22px; flex-wrap: wrap;
  color: #BFDBFE; font-size: 14px; font-weight: 500;
}
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust svg { width: 18px; height: 18px; color: #86EFAC; }

/* Rating card - floats over the open (right) side of the photograph.
   Glass rather than solid white so the image still reads underneath. */
.hero__badge {
  grid-column: 2;
  justify-self: end;
  align-self: end;
  max-width: 290px;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  font-size: 13px;
  color: #EAF1FB;
  background: rgba(10, 26, 54, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.hero__badge strong { font-size: 26px; font-family: var(--font-display); color: #fff; display: block; line-height: 1; }
.hero__badge .stars { display: flex; gap: 2px; margin-top: 4px; }
.hero__badge .stars svg { width: 12px; height: 12px; }

/* Rain reads as noise on top of a photo - keep it, but well back. */
.hero--photo .hero__rain { opacity: 0.4; }

@media (max-width: 900px) {
  .hero {
    min-height: 0;
    padding: calc(var(--nav-h) + 40px) 0 88px;
  }
  .hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .hero__badge { grid-column: 1; justify-self: start; }
  .hero__photo { object-position: 62% 45%; }
  /* Portrait viewports have no room for a side panel - darken top-down instead */
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        rgba(6, 20, 44, 0.86) 0%,
        rgba(6, 20, 44, 0.78) 45%,
        rgba(6, 20, 44, 0.88) 100%),
      linear-gradient(rgba(11, 42, 91, 0.3), rgba(11, 42, 91, 0.3));
  }
}

/* =========================================================
   Sections
   ========================================================= */
.section { padding: clamp(64px, 8vw, 110px) 0; }
.section--muted { background: var(--color-muted); }
.section--dark {
  background: linear-gradient(140deg, var(--color-primary) 0%, #10347A 55%, #0B2A5B 100%);
  color: #DCE6F5;
  position: relative;
  overflow: hidden;
}
.section--dark::before {
  content: "";
  position: absolute; inset: 0;
  background:
    /* Warm glow, upper left - the resting state. When JS is running, .dark-glow
       renders this instead and trails the cursor; see .has-glow below. */
    radial-gradient(circle at 15% 25%, rgba(234,88,12,.18), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(59,111,224,.22), transparent 45%);
  pointer-events: none;
}
/* JS present: hand the warm glow over to the movable layer, keep the cool one. */
.section--dark.has-glow::before {
  background: radial-gradient(circle at 90% 80%, rgba(59,111,224,.22), transparent 45%);
}

/* Cursor-trailing glow. Sized in px so the falloff is consistent, moved only
   with transform so each frame stays on the compositor (no repaint). */
.dark-glow {
  position: absolute;
  top: 0; left: 0;
  width: min(880px, 105vw);
  aspect-ratio: 1;
  margin: calc(min(880px, 105vw) / -2);
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(234, 88, 12, 0.30) 0%,
    rgba(234, 88, 12, 0.17) 32%,
    rgba(234, 88, 12, 0.06) 58%,
    rgba(234, 88, 12, 0) 78%);
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}
.section--dark > .container { position: relative; z-index: 1; }
.section--cta {
  background:
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-muted) 100%);
  border-top: 1px solid var(--color-border);
}

.section__head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section__head .eyebrow { justify-content: center; }
.section__lede { color: var(--color-fg-3); font-size: 1.05rem; }
.section__head code {
  font-size: .85em; background: var(--color-muted); padding: 2px 6px; border-radius: 4px;
  color: var(--color-primary);
}

/* =========================================================
   Services
   ========================================================= */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
}
.service {
  background: var(--color-surface);
  padding: 30px 26px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  position: relative;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.service::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(234,88,12,.06), transparent 40%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.service:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.service:hover::before { opacity: 1; }

.service__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  border-radius: var(--radius);
  margin-bottom: 20px;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.service:hover .service__icon {
  background: var(--color-accent);
  color: #fff;
}
.service__icon svg { width: 30px; height: 30px; }

.service h3 { color: var(--color-fg); margin-bottom: 10px; }
.service p { color: var(--color-fg-2); font-size: 15px; margin-bottom: 22px; }
.service__link {
  font-weight: 600; font-size: 14px;
  color: var(--color-primary);
  display: inline-flex; align-items: center; gap: 6px;
}
.service__link span { transition: transform var(--dur) var(--ease-out); display: inline-block; }
.service:hover .service__link { color: var(--color-accent); }
.service:hover .service__link span { transform: translateX(4px); }

/* The lead service. Warm border + resting tint so it reads as the headline
   offering without breaking the grid rhythm. */
.service__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-fg-3);
  margin-bottom: 6px;
}
/* Overrides the generic `.service p` rule above, which otherwise wins on specificity */
.service .service__tag { margin-bottom: 6px; font-size: 11px; color: var(--color-fg-3); }

/* =========================================================
   Why us / stats
   ========================================================= */
.why {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}
.why__body { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 40px); }
.why__intro h2 { color: #fff; }
.why__lede { color: #BFDBFE; font-size: 1.05rem; margin-bottom: 28px; }

/* Crew photo - portrait plate, sits opposite the copy */
.why__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.why__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  transition: transform var(--dur-slow) var(--ease-out);
}
.why__media:hover img { transform: scale(1.03); }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease);
}
.stat:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.09);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex; align-items: baseline; gap: 2px;
  font-variation-settings: "opsz" 144;
}
.stat__num span:last-child { color: var(--color-accent); }
.stat__label {
  margin-top: 8px; font-size: 14px;
  color: #BFDBFE;
}

@media (max-width: 800px) {
  .why { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  /* Full-bleed portrait is too tall on phones - crop to a letterbox */
  .why__media { aspect-ratio: 3 / 2; max-width: 520px; }
  .why__media img { object-position: 50% 28%; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
}

/* =========================================================
   Process
   ========================================================= */
.process {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
  counter-reset: step;
}
.step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.step::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step:hover::before { transform: scaleX(1); }

.step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-primary);
  margin-bottom: 18px;
  font-variation-settings: "opsz" 144;
  transition: color var(--dur) var(--ease);
}
.step:hover .step__num {
  color: var(--color-accent);
  -webkit-text-stroke: 1.5px var(--color-accent);
}
.step h3 { color: var(--color-fg); }
.step p { color: var(--color-fg-2); font-size: 15px; margin: 0; }

/* =========================================================
   Gutter guards
   ========================================================= */
.guards {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}
.guards__text p { color: var(--color-fg-2); }
.guards__text .btn { margin-top: 8px; }
.guards__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Manufacturer marks in a single row under the photos. A third column beside
   the photos would force them down to roughly 150px wide, which costs more
   than the placement is worth. */
.guards__logos {
  grid-column: 1 / -1;
  list-style: none; padding: 0; margin: 18px 0 0;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: clamp(26px, 4vw, 44px);
}
.guards__logos li { display: flex; }
/* Both files are cropped tight to their artwork, so width alone sizes them
   predictably. The wordmark and the round seal are set separately: matching
   their heights would leave the seal looking twice the size of the wordmark. */
.guards__logo { height: auto; }
.guards__logo--wide { width: 232px; }
.guards__logo--badge { width: 106px; }

@media (max-width: 560px) {
  .guards__logos { gap: 24px; margin-top: 14px; }
  .guards__logo--wide { width: 172px; }
  .guards__logo--badge { width: 80px; }
}
.guards__media figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--color-primary);
  box-shadow: var(--shadow);
}
/* Scoped to figure: the logo list lives in this container too, and a bare
   `.guards__media img` would stretch the marks to the full column. */
.guards__media figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.guards__media figure:hover img { transform: scale(1.04); }

@media (max-width: 860px) {
  .guards { grid-template-columns: 1fr; }
  .guards__media { max-width: 520px; }
}
@media (max-width: 420px) {
  /* Two portrait plates get too narrow to read side by side on a small phone */
  .guards__media { grid-template-columns: 1fr; max-width: 320px; }
  .guards__media figure { aspect-ratio: 4 / 3; }
}

/* =========================================================
   Gallery
   ========================================================= */
/* Six job photos on an even three-up. The sources are a mix of portrait and
   landscape, so every tile is forced to one ratio and the image covers it. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery__item {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-primary);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.04); }
/* Portrait sources: pull the crop up so roofline and gutter stay in frame */
.gallery__item img[src="work-commercial.jpg"] { object-position: 50% 38%; }
.gallery__item img[src="work-turret-install.jpg"] { object-position: 50% 42%; }
.gallery__item img[src="work-install-crew.jpg"] { object-position: 50% 35%; }
.gallery__item img[src="work-finished-home.jpg"] { object-position: 50% 62%; }

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__item { aspect-ratio: 3 / 2; }
}

/* =========================================================
   Testimonials
   ========================================================= */
.testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  max-width: 1080px;
  margin-inline: auto;
}
@media (max-width: 720px) {
  .testimonials { grid-template-columns: 1fr; }
}
.quote {
  margin: 0;
  padding: 32px 28px 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.quote__mark {
  width: 34px; height: 34px;
  color: var(--color-accent);
  opacity: .85;
  margin-bottom: 14px;
}
.quote blockquote {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-fg);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.005em;
}
.quote figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.quote figcaption strong { color: var(--color-fg); font-weight: 600; font-family: var(--font-body); }
.quote figcaption span { color: var(--color-fg-3); font-size: 13px; }

/* =========================================================
   Service area
   ========================================================= */
.area {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.area__towns {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px 20px;
  margin: 20px 0 28px;
}
.area__towns li {
  display: flex; align-items: center; gap: 10px;
  font-weight: 500; color: var(--color-fg);
  font-size: 15px;
}
.area__towns li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
}
.area__note { color: var(--color-fg-3); font-size: 15px; }
.area__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #EFF4FB;
}
.area__map svg,
.area__map img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 800px) {
  .area { grid-template-columns: 1fr; }
  .area__map { max-width: 420px; margin: 0 auto; }
}

/* =========================================================
   Quote form
   ========================================================= */
.quote-section {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.quote-section .quote__pitch h2 { color: var(--color-fg); }
.quote__pitch .eyebrow { color: var(--color-primary); }
.quote__perks {
  list-style: none; padding: 0; margin: 24px 0 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.quote__perks li {
  display: flex; align-items: center; gap: 12px;
  color: var(--color-fg-2); font-size: 15px;
}
.quote__perks svg { width: 20px; height: 20px; color: var(--color-accent); flex: none; }
.quote__call {
  display: flex; align-items: baseline; gap: 12px;
  padding-top: 22px; margin-top: 6px;
  border-top: 1px dashed var(--color-border-strong);
  color: var(--color-fg-3); font-size: 14px;
}
.quote__call a { font-size: 20px; color: var(--color-primary); }
.quote__call a:hover { color: var(--color-accent); }

.form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow);
}
.form__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 16px;
}
.field { display: flex; flex-direction: column; margin-bottom: 16px; }
.field label, .field legend {
  font-weight: 600; font-size: 14px; color: var(--color-fg);
  margin-bottom: 8px;
  display: inline-block;
}
.field__opt { color: var(--color-fg-3); font-weight: 500; font-size: 13px; }

.field input, .field textarea {
  font: inherit; font-size: 15px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-fg);
  min-height: 46px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
  width: 100%;
}
.field input:hover, .field textarea:hover { border-color: var(--color-border-strong); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.field textarea { resize: vertical; min-height: 96px; }

.field.is-error input, .field.is-error textarea { border-color: var(--color-danger); }
.field.is-error input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger) 20%, transparent); }
.field__error {
  color: var(--color-danger); font-size: 13px; margin: 6px 0 0; min-height: 1em;
  font-weight: 500;
}

.field--group { border: 0; padding: 0; margin: 0 0 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500; color: var(--color-fg-2);
  transition: all var(--dur) var(--ease);
  min-height: 40px;
}
.chip:hover span { border-color: var(--color-primary); color: var(--color-primary); }
.chip input:checked ~ span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.chip input:focus-visible ~ span {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 65%, transparent);
  outline-offset: 3px;
}

.form__legal { color: var(--color-fg-3); font-size: 12px; margin: 14px 0 0; text-align: center; }
/* Honeypot - off-screen for sighted users, invisible to screen readers,
   unreachable by keyboard. Bots fill it in and Web3Forms drops the send. */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form__error-box[hidden] { display: none; }
.form__error-box {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: 20px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--color-danger) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-danger) 32%, transparent);
  border-radius: var(--radius);
  color: #7F1D1D;
}
.form__error-box svg { width: 26px; height: 26px; color: var(--color-danger); flex: none; }
.form__error-box strong { display: block; margin-bottom: 2px; }
.form__error-box p { margin: 0; font-size: 14px; color: #7F1D1D; }
.form__error-box a { color: #7F1D1D; text-decoration: underline; font-weight: 600; }

.form__success[hidden] { display: none; }
.form__success {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: 20px;
  padding: 18px 20px;
  background: color-mix(in srgb, #16A34A 8%, #fff);
  border: 1px solid color-mix(in srgb, #16A34A 30%, transparent);
  border-radius: var(--radius);
  color: #14532D;
}
.form__success svg { width: 26px; height: 26px; color: #16A34A; flex: none; }
.form__success strong { display: block; margin-bottom: 2px; }
.form__success p { margin: 0; font-size: 14px; color: #14532D; }
.form__success a { color: #14532D; text-decoration: underline; }

@media (max-width: 800px) {
  .quote-section { grid-template-columns: 1fr; }
  .form { padding: 26px 22px; }
  .form__row { grid-template-columns: 1fr; }
}

/* =========================================================
   Footer
   ========================================================= */
.footer {
  background: var(--color-primary);
  color: #BFDBFE;
  padding: 72px 0 24px;
  position: relative;
}
.footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.footer__inner {
  display: grid;
  /* Contact column is wider than the rest: it carries the email address, which
     is the longest unbreakable string on the page. */
  grid-template-columns: 1.25fr 0.9fr 1.3fr 0.8fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer__brand .brand { color: #fff; }
/* Full lockup, incl. the tagline. Flipped to white so it reads on navy. */
.footer__logo { display: block; width: min(250px, 100%); }
.footer__logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
  transition: opacity var(--dur) var(--ease);
}
.footer__logo:hover img { opacity: 1; }
.footer__blurb { margin-top: 16px; font-size: 14px; color: #BFDBFE; max-width: 320px; }
.footer h4 {
  color: #fff; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.16em;
  margin-bottom: 14px;
}
.footer address { font-style: normal; font-size: 15px; color: #DCE6F5; line-height: 1.7; }
.footer p { margin: 0 0 6px; font-size: 15px; }
/* Long address in a narrow column. Needs `.footer` on the front to outrank
   `.footer p` above, or it would sit at 15px and wrap mid-word. */
.footer .footer__email { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.footer__email a { overflow-wrap: break-word; }
.footer__hours { color: #DCE6F5; margin-top: 12px !important; font-size: 14px; line-height: 1.75; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 8px; }
.footer a { color: #DCE6F5; }
.footer a:hover { color: var(--color-accent); }

.footer__legal {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0 0;
  font-size: 12px; color: rgba(191,219,254,.7);
}
.footer__built { font-family: var(--font-display); font-style: italic; }

/* Four columns get too narrow for the email well before 800px, so hand off to
   two columns at the same width the nav does. */
@media (max-width: 1040px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
}
@media (max-width: 480px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; gap: 8px; text-align: center; }
}

/* =========================================================
   Reveal animation (Intersection Observer)
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .raindrop { display: none; }
}