/* ============================================================
   Copper Peak Roofing template
   Palette: charcoal / clay-copper / warm cream.
   Type: Barlow Condensed (display) + Barlow (body).
   Signature: a single roof-pitch diagonal, echoed from the hero
   seam through every section divider, and chamfered card corners.
   ============================================================ */

@import url("../fonts/fonts.css");

:root {
  --charcoal-950: #191C1E;
  --charcoal-900: #212528;
  --charcoal-800: #2B3033;
  --charcoal-700: #3D444A;
  --charcoal-500: #6B7378;
  --clay-700: #7C331D;
  --clay-600: #9C4023;
  --clay-500: #BC5330;
  --clay-400: #CD6B44;
  --clay-300: #DE8B5E;
  --clay-100: #F3DCC9;
  --steel-500: #4E6472;
  --cream-50: #F6F1E6;
  --cream-100: #EEE4CD;
  --white: #FFFFFF;
  --line: rgba(25, 28, 30, .14);
  --line-light: rgba(246, 241, 230, .16);

  /* compatibility aliases: the shared chat widget (chat.js, unmodified from the
     flagship) reads var(--ink)/var(--brass); pointing them at our own tokens
     restyles it to this palette without touching that file. */
  --ink: var(--charcoal-950);
  --brass: var(--clay-500);

  --font-display: "Barlow Condensed", system-ui, -apple-system, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;

  --chamfer: 22px;
  --chamfer-sm: 14px;
  --wrap: 1240px;
  --nav-h: 80px;
  --shadow: 0 22px 50px rgba(15, 17, 18, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream-50);
  color: var(--charcoal-900);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--charcoal-950);
  margin: 0;
  line-height: 1.03;
  letter-spacing: -0.01em;
  font-weight: 700;
}
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--clay-500); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.section { padding-block: clamp(68px, 8.5vw, 116px); position: relative; }
.section.alt { background: var(--cream-100); }
.section-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; margin: 12px 0 14px; text-transform: uppercase; letter-spacing: -.01em; }
.section-head p { font-size: 17.5px; color: rgba(43, 48, 51, .74); margin: 0; max-width: 56ch; }
.dark { background: var(--charcoal-950); color: rgba(246, 241, 230, .82); }
.dark h2, .dark h3, .dark h4 { color: var(--cream-50); }
.dark .section-head p { color: rgba(246, 241, 230, .68); }

/* ---------- eyebrow (pitch-notation label) ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clay-600);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow.light { color: var(--clay-300); }
.pitch-mark { width: 15px; height: 11px; flex: none; color: inherit; }

/* ---------- buttons: chamfered, never pill ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 15.5px; letter-spacing: .01em;
  padding: 0 26px; height: 52px;
  border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: transform .18s ease, background .18s ease, color .18s ease, filter .18s ease;
}
.btn-primary { background: var(--clay-500); color: #fff; }
.btn-primary:hover { background: var(--clay-600); transform: translateY(-2px); }
.btn-clay { background: var(--clay-500); color: #fff; }
.btn-clay:hover { background: var(--clay-400); transform: translateY(-2px); }
.btn-lg { height: 60px; padding: 0 34px; font-size: 17px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.btn-ghost { background: transparent; color: var(--charcoal-950); border: 1.5px solid var(--charcoal-950); clip-path: none; padding: 0 24px; }
.btn-ghost:hover { background: var(--charcoal-950); color: var(--cream-50); }
.hero .btn-ghost { color: var(--cream-50); border-color: rgba(246, 241, 230, .6); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 800; color: var(--cream-50);
  transition: background .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent; }
.nav-in { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px);
  display: flex; align-items: center; gap: 26px; height: var(--nav-h); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.logo-mark { width: 30px; height: 30px; flex: none; color: var(--clay-500); }
.logo-mark svg { width: 100%; height: 100%; display: block; }
.logo-word { display: flex; flex-direction: column; line-height: 1.02; font-family: var(--font-display); }
.logo-word b { font-size: 19px; font-weight: 800; letter-spacing: .01em; color: inherit; }
.logo-word em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .3em; color: var(--clay-400); margin-top: 2px; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { text-decoration: none; font-weight: 600; font-size: 14.5px; letter-spacing: .01em; opacity: .94; padding: 6px 0; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--clay-400); transition: width .22s ease; }
.nav-links a:hover::after { width: 100%; }
.nav-phone {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 800; font-size: 16px; letter-spacing: .01em; white-space: nowrap; color: inherit;
}
.nav-phone svg { color: var(--clay-400); }
.nav .btn.nav-cta { height: 44px; padding: 0 20px; font-size: 14.5px; }
.nav.is-solid { background: rgba(246, 241, 230, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--charcoal-950); box-shadow: 0 1px 0 var(--line); border-bottom-color: var(--line); }
.nav.is-solid .logo-mark { color: var(--clay-600); }
.nav.is-solid .nav-phone svg { color: var(--clay-600); }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; color: inherit; }
.nav-burger span { width: 24px; height: 2px; background: currentColor; transition: transform .25s ease, opacity .25s ease; }
.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 790; background: var(--charcoal-950); color: var(--cream-50);
  display: none; flex-direction: column; justify-content: center; padding: 40px clamp(24px, 6vw, 48px); }
.menu-open .mobile-menu { display: flex; }
.mobile-menu a { text-decoration: none; }
.mobile-menu nav a { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 8vw, 42px);
  text-transform: uppercase; padding: 12px 0; border-bottom: 1px solid var(--line-light); }
.mobile-menu .mm-foot { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; }
.mobile-menu .nav-phone { font-size: 22px; }

/* ---------- hero: diagonal split, form straddles the seam ---------- */
.hero { position: relative; min-height: 100svh; background: var(--charcoal-950); color: var(--cream-50);
  overflow: hidden; display: flex; align-items: center; }
.hero-media { position: absolute; inset: 0; background: var(--charcoal-950);
  clip-path: polygon(63% 0, 100% 0, 100% 100%, 47% 100%); }
.hero-media .hero-fallback, .hero-media .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media .hero-slide { opacity: 0; transition: opacity 1.3s ease; }
.hero-media .hero-slide.is-active { opacity: 1; }
.hero-media .hero-slide[data-hero-photo] { transform: scale(1.08); }
.hero-media .hero-slide[data-hero-photo].is-active { animation: heroKenBurns 10s ease-in-out forwards; }
@keyframes heroKenBurns { from { transform: scale(1.08) translate3d(0, 0, 0); } to { transform: scale(1.18) translate3d(-1.4%, -1.2%, 0); } }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* standing top scrim: keeps the transparent nav's light links/phone readable
       over any hero clip, bright plywood included, regardless of which slide
       is active. */
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 140px),
    linear-gradient(100deg, rgba(25, 28, 30, .62) 0%, rgba(25, 28, 30, .1) 34%, transparent 55%),
    linear-gradient(0deg, rgba(25, 28, 30, .5) 0%, transparent 32%);
}
.hero-seam {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  clip-path: polygon(63% 0, calc(63% + 5px) 0, calc(47% + 5px) 100%, 47% 100%);
  background: linear-gradient(180deg, var(--clay-300), var(--clay-600));
}
.hero-copy { position: relative; z-index: 3; max-width: min(500px, 43%);
  /* box-sizing:content-box (overriding the global border-box reset) so the
     left inset below can grow to match the nav's centered .wrap without
     eating into the text column's own width budget. */
  box-sizing: content-box;
  /* left inset = the exact .wrap/.nav-in formula (max(0, (100% - var(--wrap)) / 2)
     + the same clamp(20px,4vw,40px) edge padding) so the headline's left edge
     lines up with the nav logo's left edge at every viewport width, not just
     the two sizes this was checked at. */
  padding: clamp(96px, 13vh, 150px) 0 0 calc(max(0px, (100% - var(--wrap)) / 2) + clamp(20px, 4vw, 40px)); }
.hero-copy h1 { color: var(--cream-50); font-weight: 800; font-size: clamp(36px, 3.9vw, 58px);
  line-height: 1.03; letter-spacing: -.02em; margin: 16px 0 0; text-transform: uppercase;
  text-shadow: 0 2px 26px rgba(15, 17, 18, .4); }
.hero-sub { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.55; max-width: 42ch;
  color: rgba(246, 241, 230, .92); margin: 18px 0 0; text-shadow: 0 1px 14px rgba(15, 17, 18, .45); }
.hero-load h1, .hero-load .eyebrow, .hero-load .hero-sub, .hero-load .hero-call, .hero-load .hero-badges
  { opacity: 0; transform: translateY(22px); }
.hero-ready h1, .hero-ready .eyebrow, .hero-ready .hero-sub, .hero-ready .hero-call, .hero-ready .hero-badges
  { opacity: 1; transform: none; transition: opacity .75s ease, transform .75s cubic-bezier(.2, .6, .2, 1); }
/* .hero-form gets its own pair: it carries a permanent translate(-45%,-50%)
   for its centering position (see .hero-form above), so its "ready" resting
   state must keep that translate rather than resetting transform to none like
   the plain text elements above. */
.hero-load .hero-form { opacity: 0; transform: translate(-45%, calc(-50% + 22px)); }
.hero-ready .hero-form { opacity: 1; transform: translate(-45%, -50%); transition: opacity .75s ease, transform .75s cubic-bezier(.2, .6, .2, 1); }
.hero-ready .eyebrow { transition-delay: .05s; }
.hero-ready h1 { transition-delay: .14s; }
.hero-ready .hero-sub { transition-delay: .26s; }
.hero-ready .hero-call { transition-delay: .34s; }
.hero-ready .hero-badges { transition-delay: .42s; }
.hero-ready .hero-form { transition-delay: .3s; }

.hero-call { display: inline-flex; align-items: center; gap: 15px; text-decoration: none; color: var(--cream-50); margin-top: 26px;
  padding: 14px 24px 14px 18px; border: 1px solid rgba(246, 241, 230, .24);
  background: rgba(25, 28, 30, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.hero-call:hover { border-color: var(--clay-400); background: rgba(25, 28, 30, .6); transform: translateY(-2px); }
.hero-call .hc-ic { width: 46px; height: 46px; flex: none; background: var(--clay-500); display: flex; align-items: center; justify-content: center;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
.hero-call .hc-ic svg { color: #fff; }
.hero-call small { display: block; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--clay-300); font-weight: 700; margin-bottom: 3px; }
.hero-call b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.9vw, 38px); letter-spacing: -.01em; line-height: 1; }

.hero-badges { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 22px; }
.hero-badges span { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-size: clamp(11px, .84vw, 12.5px); font-weight: 700; line-height: 1.15;
  padding: 8px 12px; background: rgba(246, 241, 230, .1); border: 1px solid rgba(246, 241, 230, .22);
  color: rgba(246, 241, 230, .95); white-space: nowrap; }
.hero-badges svg { width: 15px; height: 15px; flex: none; color: var(--clay-300); }
.hero-badges .hb-stars { color: #EFB449; letter-spacing: .5px; font-size: 11px; flex: none; }

/* ---------- hero estimate form: solid copper-accented card, straddles the seam ---------- */
.hero-form {
  position: absolute; z-index: 4;
  /* Vertically centered in the region below the fixed nav: top is the midpoint
     of [var(--nav-h), 100%] (the "+ var(--nav-h)/2" shifts the 50% mark down by
     half the nav height), and translateY(-50%) recenters the box's OWN rendered
     height around that point. Percentages in `transform` resolve against the
     element's final computed size (post-layout), so unlike a margin:auto /
     top+bottom pair this works correctly for an auto (content-based) height and
     needs no hard-coded card-height guess; the breathing room above/below is
     whatever's left after centering, split evenly.
     This replaces the previous top:60%/translate(-45%,-40%) pair, which the
     .hero-ready intro-reveal rule below was silently clobbering back to
     `transform:none` once the page finished loading (a real bug: it discarded
     the -40% vertical correction entirely, pinning the card near raw top:60%
     with no centering, i.e. the actual cause of "form too far down"). */
  left: 56%; top: calc(50% + var(--nav-h) / 2); transform: translate(-45%, -50%);
  max-height: calc(100% - var(--nav-h) - 40px); overflow-y: auto;
  width: clamp(320px, 29vw, 410px);
  background: var(--cream-50); color: var(--charcoal-950);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  padding: clamp(24px, 2.2vw, 30px) clamp(22px, 2.1vw, 28px) 24px;
  border-top: 5px solid var(--clay-500);
  box-shadow: 0 30px 70px rgba(10, 9, 8, .45);
}
.hf-flag { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--clay-600); margin-bottom: 12px; }
.hf-flag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--clay-500); box-shadow: 0 0 0 3px rgba(188, 83, 48, .22); }
.hero-form h2 { font-size: clamp(21px, 1.9vw, 26px); font-weight: 800; letter-spacing: -.01em; line-height: 1.06; margin: 0 0 7px; color: var(--charcoal-950); text-transform: uppercase; }
.hf-sub { font-size: 14px; color: rgba(43, 48, 51, .74); margin: 0 0 16px; }
.hf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.hf-field { display: flex; flex-direction: column; gap: 6px; }
.hf-field.full { grid-column: 1 / -1; }
.hf-field label { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--charcoal-950); }
.hf-field input, .hf-field select {
  height: 46px; padding: 0 13px; font-family: var(--font-body); font-size: 15px; color: var(--charcoal-950);
  background: var(--white); border: 1.5px solid var(--line);
  transition: border-color .18s ease, box-shadow .18s ease; }
.hf-field input::placeholder { color: rgba(43, 48, 51, .42); }
.hf-field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191C1E'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 32px; }
.hf-field input:focus, .hf-field select:focus { outline: none; border-color: var(--clay-500); box-shadow: 0 0 0 3px rgba(188, 83, 48, .18); }
.hf-field input.bad, .hf-field select.bad { border-color: #B3331E; box-shadow: 0 0 0 3px rgba(179, 51, 30, .16); }
.hero-form .btn { width: 100%; margin-top: 14px; height: 52px; font-size: 16px; }
.hf-note { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: rgba(43, 48, 51, .62); margin: 11px 0 0; text-align: center; }
.hf-note svg { width: 13px; height: 13px; flex: none; color: var(--steel-500); }
.hero-form .chips button { border-color: var(--line); background: var(--white); }
.hf-done { text-align: center; padding: 10px 0 4px; }
.hf-done .mark { width: 56px; height: 56px; background: var(--clay-500); color: #fff; font-size: 28px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.hf-done h2 { margin-bottom: 10px; }
.hf-done p { font-size: 14.5px; color: rgba(43, 48, 51, .78); }
.hf-step { display: none; }
.hf-step.on { display: block; animation: hfIn .28s ease; }
@keyframes hfIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.scroll-cue { position: absolute; left: clamp(22px, 5vw, 68px); bottom: 20px; z-index: 3; width: 1px; height: 42px; background: rgba(246, 241, 230, .38); overflow: hidden; }
.scroll-cue::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--clay-400); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0% { top: -50%; } 70%, 100% { top: 110%; } }

/* ---------- pitch dividers: echo the hero seam angle between full-width bands ---------- */
.pitch-divider {
  position: relative;
  height: clamp(38px, 5.2vw, 72px);
  margin-top: calc(-1 * clamp(38px, 5.2vw, 72px));
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 6;
  pointer-events: none;
}
.pitch-divider--cream { background: var(--cream-50); }
.pitch-divider--cream-alt { background: var(--cream-100); }
.pitch-divider--charcoal { background: var(--charcoal-950); }

/* ---------- trust / credentials strip ---------- */
.trust { border-bottom: 1px solid var(--line); background: var(--cream-50); position: relative; z-index: 5; }
.trust-in { display: flex; align-items: center; flex-wrap: nowrap; gap: 42px; padding: 22px clamp(20px, 4vw, 44px);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.trust-in::-webkit-scrollbar { display: none; }
.trust-in > * { flex: none; }
.trust-in.is-centered { justify-content: center; }

.rating-blk { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--charcoal-950); flex: none; }
.rating-blk > svg { width: 30px; height: 30px; flex: none; }
.rating-blk .rb-meta { display: flex; flex-direction: column; }
.rating-blk .rb-top { display: flex; align-items: center; gap: 9px; line-height: 1; }
.rating-blk .rb-top b { font-family: var(--font-display); font-weight: 800; font-size: 25px; letter-spacing: -.01em; }
.rating-blk .rb-stars { color: #EFB449; font-size: 15px; letter-spacing: 1.5px; }
.rating-blk .rb-sub { font-size: 12.5px; color: var(--charcoal-500); margin-top: 4px; font-weight: 600; }
.rating-blk:hover .rb-sub { color: var(--charcoal-900); }
.rating-lg > svg { width: 34px; height: 34px; }
.rating-lg .rb-top b { font-size: 27px; }

.cred { display: inline-flex; align-items: center; gap: 11px; }
.cred-em { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.cred-em svg { width: 20px; height: 20px; }
.cred-em-g { background: #fff; box-shadow: 0 3px 8px rgba(25, 28, 30, .16), inset 0 0 0 1px var(--line); }
.cred-em-g svg { width: 22px; height: 22px; }
.cred-t b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; line-height: 1.15; color: var(--charcoal-950); }
.cred-t em { display: block; font-style: normal; font-size: 11.5px; color: var(--charcoal-500); margin-top: 1px; }

/* ---------- services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc { background: var(--white); border: 1px solid var(--line); overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column; filter: drop-shadow(0 1px 0 rgba(25, 28, 30, .04));
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  transition: transform .25s ease, filter .25s ease; }
.svc:hover { transform: translateY(-5px); filter: drop-shadow(0 20px 34px rgba(25, 28, 30, .18)); }
.svc-img { aspect-ratio: 16 / 9.4; overflow: hidden; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.svc:hover .svc-img img { transform: scale(1.045); }
.svc-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.svc h3 { font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: -.005em; }
.svc-range { font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--clay-600); text-align: right; max-width: 42%; flex: none; }
.svc p { font-size: 15px; color: rgba(43, 48, 51, .76); margin: 0; flex: 1; }
.svc-cta { font-size: 13.5px; font-weight: 700; color: var(--charcoal-950); display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
.svc-cta::after { content: "→"; color: var(--clay-500); transition: transform .2s ease; }
.svc:hover .svc-cta::after { transform: translateX(5px); }

/* ---------- storm damage + insurance ---------- */
.storm-sec { overflow: hidden; }
.storm-grid { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.storm-lead { font-size: 17px; color: rgba(246, 241, 230, .84); max-width: 46ch; margin: 16px 0 26px; }
.storm-lead span { color: var(--clay-300); font-weight: 600; }
.storm-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .4)); }
.storm-steps { display: flex; flex-direction: column; gap: 0; }
.storm-step { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding-bottom: 30px; }
.storm-step:last-child { padding-bottom: 0; }
.storm-step-num { width: 46px; height: 46px; flex: none; background: rgba(246, 241, 230, .06); border: 1.5px solid rgba(246, 241, 230, .28);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800;
  font-size: 19px; color: var(--clay-300); position: relative; z-index: 2; }
.storm-step-line { position: absolute; left: 23px; top: 46px; bottom: -2px; width: 2px; background: rgba(246, 241, 230, .2); }
.storm-step:last-child .storm-step-line { display: none; }
.storm-step h3 { color: var(--cream-50); font-size: 19px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; letter-spacing: -.005em; }
.storm-step p { font-size: 14.5px; color: rgba(246, 241, 230, .74); margin: 0; max-width: 46ch; }

/* ---------- materials comparison ---------- */
.material-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.material-card { background: var(--white); border: 1px solid var(--line); position: relative; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  filter: drop-shadow(0 1px 0 rgba(25, 28, 30, .04)); }
.material-img { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.material-img img { width: 100%; height: 100%; object-fit: cover; }
.material-tag { position: absolute; top: 14px; left: 0; background: var(--clay-500); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; padding: 7px 14px 7px 16px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.material-body { padding: 22px 24px 26px; }
.material-body h3 { font-size: 24px; font-weight: 700; text-transform: uppercase; margin-bottom: 14px; }
.material-specs { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.material-specs .row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.material-specs .row:first-child { border-top: 0; }
.material-specs .row span:first-child { color: var(--charcoal-500); font-weight: 600; }
.material-specs .row span:last-child { font-weight: 700; color: var(--charcoal-950); text-align: right; }
.material-best { font-size: 14px; color: rgba(43, 48, 51, .76); border-top: 1px dashed var(--line); padding-top: 12px; margin: 0; }
.material-best b { color: var(--clay-600); font-weight: 700; }

/* ---------- drone inspection CTA band ---------- */
.drone-band { position: relative; overflow: hidden; padding-block: clamp(72px, 10vw, 128px); color: var(--cream-50); }
.drone-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.drone-band::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(25, 28, 30, .92) 0%, rgba(25, 28, 30, .78) 42%, rgba(102, 56, 33, .55) 100%); }
.drone-in { position: relative; z-index: 2; max-width: 680px; }
.drone-in h2 { color: var(--cream-50); font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; text-transform: uppercase; margin: 14px 0 16px; text-shadow: 0 2px 20px rgba(0, 0, 0, .4); }
.drone-in p { font-size: 17px; color: rgba(246, 241, 230, .88); max-width: 54ch; margin: 0 0 26px; }

/* ---------- process ---------- */
.proc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: step; }
.proc-step { position: relative; padding: 30px 24px 0 0; border-top: 3px solid var(--line); }
.proc-step::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--clay-500);
  clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.proc-week { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--clay-600); display: block; margin-bottom: 12px; }
.proc-step h3 { font-size: 20px; font-weight: 700; text-transform: uppercase; display: flex; gap: 9px; align-items: baseline; }
.proc-step h3::before { counter-increment: step; content: "0" counter(step); font-size: 13px; color: var(--charcoal-500); font-weight: 700; font-family: var(--font-body); }
.proc-step p { font-size: 14.5px; color: rgba(43, 48, 51, .74); margin-top: 10px; }

/* ---------- photo gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px, 15vw, 210px); gap: 16px; }
.gallery-item { position: relative; overflow: hidden; cursor: zoom-in; border: 0; padding: 0; background: var(--charcoal-950);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.gallery-item:nth-child(3n+1) { grid-column: span 2; grid-row: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after { content: "+"; position: absolute; right: 12px; bottom: 8px; color: #fff; font-size: 22px; font-weight: 300;
  opacity: 0; transition: opacity .2s ease; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.gallery-item:hover::after { opacity: .9; }

.lightbox { position: fixed; inset: 0; z-index: 9500; background: rgba(15, 17, 18, .94); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(88vw, 1200px); max-height: 84vh; object-fit: contain; filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .5)); }
.lb-close, .lb-prev, .lb-next { position: absolute; background: rgba(246, 241, 230, .1); border: 1px solid rgba(246, 241, 230, .3); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(246, 241, 230, .22); }
.lb-close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 24px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 28px; }
.lb-prev { left: 18px; } .lb-next { right: 18px; }

/* ---------- reviews (Google style, chamfered) ---------- */
.reviews-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.g-summary { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); padding: 14px 20px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); filter: drop-shadow(var(--shadow)); }
.g-score { display: flex; align-items: center; gap: 10px; }
.g-score b { font-family: var(--font-display); font-size: 29px; font-weight: 800; color: var(--charcoal-950); line-height: 1; }
.g-stars { color: #F4B400; font-size: 17px; letter-spacing: .05em; }
.g-count { font-size: 13px; color: var(--charcoal-500); margin-top: 3px; }
.greviews { position: relative; }
.greviews-track { display: flex; gap: 20px; overflow-x: auto; padding: 8px clamp(20px, 4vw, 40px) 20px; -ms-overflow-style: none; scrollbar-width: none; }
.greviews-track::-webkit-scrollbar { display: none; }
.greview { flex: 0 1 auto; width: clamp(290px, 78vw, 385px); background: var(--white); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  padding: 22px 22px 24px; filter: drop-shadow(0 8px 22px rgba(25, 28, 30, .07));
  display: flex; flex-direction: column; height: 268px; }
.greview-top { display: flex; align-items: center; gap: 13px; flex: none; }
.gavatar { position: relative; overflow: hidden; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 18px; flex: none; }
.gavatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gname { font-weight: 700; font-size: 15px; color: var(--charcoal-950); line-height: 1.2; }
.gsub { font-size: 12.5px; color: var(--charcoal-500); margin-top: 2px; }
.greview-top .g-mark { margin-left: auto; width: 21px; height: 21px; flex: none; }
.greview .g-row { display: flex; align-items: center; gap: 8px; margin: 13px 0 9px; flex: none; }
.greview .g-row .g-stars { font-size: 15px; }
.greview .g-when { font-size: 12px; color: var(--charcoal-500); }
.gtext { font-size: 14px; line-height: 1.58; color: var(--charcoal-900); margin: 0; flex: 0 1 auto; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; }
.g-nav { position: absolute; top: 42%; z-index: 5; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--white);
  color: var(--charcoal-950); font-size: 22px; line-height: 1; cursor: pointer; filter: drop-shadow(var(--shadow));
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.g-nav:hover { background: var(--charcoal-950); color: var(--cream-50); }
.g-prev { left: 6px; } .g-next { right: 6px; }

/* ---------- stats / credentials ---------- */
.awards-sec { padding-block: clamp(56px, 7vw, 84px); }
.awards-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 38px; padding-bottom: 38px; border-bottom: 1px solid var(--line-light); }
.stat .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4.2vw, 54px); color: var(--cream-50); line-height: 1; letter-spacing: -.01em; }
.stat .n em { color: var(--clay-300); font-style: normal; }
.stat .l { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(246, 241, 230, .58); margin-top: 10px; display: block; font-weight: 600; }
.awards-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 38px; }
.award { grid-column: span 2; display: flex; align-items: center; gap: 15px; background: rgba(246, 241, 230, .05); border: 1px solid var(--line-light);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); padding: 18px 20px; }
.award .cred-em { width: 46px; height: 46px; }
.award .cred-em svg { width: 26px; height: 26px; }
.award b { display: block; color: var(--cream-50); font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.2; text-transform: uppercase; }
.award > div > span { display: block; font-size: 12px; color: rgba(246, 241, 230, .6); margin-top: 3px; }

/* ---------- service area ---------- */
.areas-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.area-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.area-chips span { font-size: 13.5px; font-weight: 600; border: 1px solid var(--line); background: var(--white);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); padding: 9px 16px 9px 15px; }
.areas-note { margin-top: 18px; font-size: 14.5px; color: rgba(43, 48, 51, .7); }

/* ---------- faq ---------- */
.faq-wrap { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 23px 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--charcoal-950); text-transform: uppercase; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; color: var(--clay-500); transition: transform .25s ease; flex: none; font-family: var(--font-body); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 0 23px; max-width: 66ch; color: rgba(43, 48, 51, .8); font-size: 15.5px; }

/* ---------- estimate ---------- */
.estimate-grid { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.est-copy h2 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 800; margin: 14px 0 18px; text-transform: uppercase; }
.est-copy .promise { font-size: 17px; color: rgba(246, 241, 230, .84); max-width: 46ch; }
.est-points { list-style: none; margin: 24px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.est-points li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; color: rgba(246, 241, 230, .84); }
.est-points li::before { content: "✓"; color: var(--clay-300); font-weight: 800; flex: none; }
.est-phone { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream-50); }
.est-phone svg { color: var(--clay-300); }
.est-phone span { font-family: var(--font-display); font-weight: 800; font-size: clamp(25px, 2.9vw, 33px); letter-spacing: -.01em; }
.est-meta { margin-top: 14px; font-size: 13px; color: rgba(246, 241, 230, .58); }
.form-card { background: var(--cream-50); padding: clamp(24px, 3vw, 36px); color: var(--charcoal-950);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  border-top: 5px solid var(--clay-500); filter: drop-shadow(0 30px 70px rgba(0, 0, 0, .35)); }
.form-card h3 { font-size: 21px; font-weight: 700; margin-bottom: 4px; color: var(--charcoal-950); text-transform: uppercase; }
.form-sub { font-size: 14px; color: rgba(43, 48, 51, .64); margin-bottom: 22px; }
.f-step { display: none; }
.f-step.on { display: block; animation: fIn .3s ease; }
@keyframes fIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-field { display: flex; flex-direction: column; gap: 7px; }
.f-field.full { grid-column: 1 / -1; }
.f-field label { font-size: 13px; font-weight: 700; color: var(--charcoal-950); }
.f-field input, .f-field select { height: 50px; border: 1.5px solid var(--line); padding: 0 15px; font-size: 15px; font-family: inherit;
  background: var(--white); color: var(--charcoal-950); width: 100%; appearance: none; }
.f-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23191C1E' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; }
.f-field input:focus, .f-field select:focus { outline: none; border-color: var(--clay-500); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips button { border: 1.5px solid var(--line); background: var(--white); color: var(--charcoal-950); border-radius: 999px;
  padding: 10px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--charcoal-950); border-color: var(--charcoal-950); color: var(--cream-50); }
.f-opt { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: rgba(43, 48, 51, .7); margin-top: 16px; }
.f-opt input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--clay-500); }
.f-submit { width: 100%; margin-top: 20px; }
.f-note { text-align: center; font-size: 12px; color: rgba(43, 48, 51, .52); margin-top: 14px; }
.f-done { text-align: center; padding: 28px 6px; }
.f-done .mark { width: 56px; height: 56px; background: var(--clay-500); color: #fff; font-size: 25px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.f-done h3 { margin-bottom: 10px; text-transform: uppercase; }
.f-done p { font-size: 15px; color: rgba(43, 48, 51, .78); }

/* ---------- footer ---------- */
.footer { padding-top: clamp(28px, 3.5vw, 48px); }
.foot-grid { display: grid; grid-template-columns: 4fr 2.4fr 2.4fr 3.2fr; gap: 36px; padding-bottom: 44px; border-bottom: 1px solid var(--line-light); }
.foot-grid h4 { color: var(--cream-50); font-size: 14px; margin-bottom: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-grid a { text-decoration: none; font-size: 14.5px; color: rgba(246, 241, 230, .74); }
.foot-grid a:hover { color: var(--cream-50); }
.foot-phone { font-weight: 800 !important; font-size: 17px !important; color: var(--cream-50) !important; }
.foot-muted { font-size: 14px; color: rgba(246, 241, 230, .6); }
.foot-brand p { font-size: 14.5px; color: rgba(246, 241, 230, .74); max-width: 30ch; margin: 14px 0 18px; }
.foot-brand .logo { margin-bottom: 4px; }
.foot-brand .logo-mark { color: var(--clay-400); }
.social { display: flex; gap: 10px; }
.social a { width: 40px; height: 40px; border: 1px solid var(--line-light); display: flex; align-items: center; justify-content: center;
  color: rgba(246, 241, 230, .82); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: background .2s, color .2s, border-color .2s; }
.social a:hover { background: var(--clay-500); border-color: var(--clay-500); color: #fff; }
.social svg { width: 18px; height: 18px; }
.badge-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; padding: 28px 0; border-bottom: 1px solid var(--line-light); }
.foot-creds { display: flex; flex-wrap: wrap; align-items: center; gap: 17px 28px; }
.rating-foot, .rating-foot .rb-top b { color: var(--cream-50); }
.rating-foot .rb-sub { color: rgba(246, 241, 230, .6); }
.rating-foot:hover .rb-sub { color: rgba(246, 241, 230, .82); }
.cred-foot .cred-t b { color: var(--cream-50); }
.cred-foot .cred-t em { color: rgba(246, 241, 230, .55); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; align-items: center; padding: 22px 0 30px; font-size: 12.5px; color: rgba(246, 241, 230, .5); }
.foot-bottom a { color: rgba(246, 241, 230, .74); }

/* ---------- mobile call bar ---------- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; display: none; grid-template-columns: 1fr 1fr 1.4fr; gap: 1px;
  background: var(--charcoal-950); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 30px rgba(15, 17, 18, .25); }
.callbar a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 60px; text-decoration: none; font-weight: 700;
  font-size: 14.5px; background: var(--charcoal-950); color: var(--cream-50); }
.callbar a.cb-est { background: var(--clay-500); color: #fff; }

/* ---------- reveals ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .6, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.rv.on { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .material-grid { grid-template-columns: 1fr 1fr; }
  .proc { grid-template-columns: 1fr 1fr; gap: 26px 30px; }
  .areas-grid, .estimate-grid { grid-template-columns: 1fr; }
  .storm-grid { grid-template-columns: 1fr; }
  .storm-photo { max-width: 460px; }
  .awards-grid { grid-template-columns: repeat(4, 1fr); }
  .award { grid-column: span 2; }
  .awards-stats { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Hero split collapses to a stacked layout: media dims to a backdrop, form drops to normal flow. */
@media (max-width: 900px) {
  .hero { display: block; min-height: 0; padding: clamp(104px, 24vw, 148px) 0 44px; }
  .hero-media { clip-path: none; }
  .hero-media::after {
    background: linear-gradient(180deg, rgba(25, 28, 30, .58) 0%, rgba(25, 28, 30, .86) 62%, var(--charcoal-950) 100%);
  }
  .hero-seam { display: none; }
  .hero-copy { position: relative; max-width: none; padding: 0 clamp(20px, 5vw, 32px); }
  .hero-form {
    position: relative; left: auto; top: auto; bottom: auto; transform: none;
    width: auto; margin: 30px clamp(20px, 5vw, 32px) 0;
    max-height: none; overflow-y: visible;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  }
  /* .hero-load .hero-form / .hero-ready .hero-form (two classes) outrank the
     plain .hero-form reset above (one class) on specificity alone regardless of
     source order, so the desktop translate(-45%,-50%) positioning transform has
     to be neutralized here too, or it reapplies on top of this relative-flow
     mobile card and drags it sideways. */
  .hero-load .hero-form { transform: none; }
  .hero-ready .hero-form { transform: none; }
  .scroll-cue { display: none; }
}

@media (max-width: 768px) {
  .nav-links, .nav .nav-phone, .nav .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .proc { grid-template-columns: 1fr; }
  .material-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(140px, 34vw, 190px); }
  .gallery-item:nth-child(3n+1) { grid-column: span 2; grid-row: span 1; }
  .callbar { display: grid; }
  html { scroll-padding-bottom: 76px; }
  body { padding-bottom: 60px; }
  .reviews-head { align-items: flex-start; }
  .greview { height: 300px; }
  .trust-in { gap: 30px; }
  .drone-in { max-width: none; }
  .cw-root { bottom: 76px !important; }
}

@media (max-width: 560px) {
  .f-grid, .hf-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: clamp(34px, 10.5vw, 46px); }
  .hero-call .hc-ic { width: 40px; height: 40px; }
  .hero-form { padding: 22px 18px 20px; }
  .foot-grid { grid-template-columns: 1fr; }
  .awards-grid { grid-template-columns: 1fr; }
  .award { grid-column: span 1; }
  .svc-top { flex-direction: column; align-items: flex-start; gap: 3px; }
  .svc-range { text-align: left; max-width: none; }
  .hero .eyebrow { display: inline-flex; }
  .storm-lead { max-width: none; }
  .greview { height: 320px; }
  .logo-word em { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .hero-load h1, .hero-load .eyebrow, .hero-load .hero-sub, .hero-load .hero-call, .hero-load .hero-badges { opacity: 1; transform: none; }
  .hero-load .hero-form { opacity: 1; transform: translate(-45%, -50%); }
  .hero-media .hero-slide { transition: none; }
  .hero-media .hero-slide[data-hero-photo].is-active { animation: none; transform: scale(1.08); }
  .scroll-cue::after, .svc, .svc-img img, .gallery-item img { animation: none; transition: none; }
}