/* =============================================================
   LEAFIELD ROOFING V7 — main.css
   Premium Yorkshire Craftsman palette. Mobile-first.
   ============================================================= */

/* ── TOKEN LAYER — V7 maroon palette (logo-derived 2026-04-23) ── */
:root {
  /* Deep brand dark — almost-black with maroon whisper */
  --slate:        #18080c;
  --slate-mid:    #3a1820;
  --slate-rgb:    24, 8, 12;
  /* Primary accent = maroon */
  --gold:         #8b1e2e;
  --gold-light:   #a83248;
  /* Warm highlight */
  --brass:        #c9973a;
  --brass-light:  #e8b84b;
  /* Neutrals */
  --cream:        #f8f4ee;
  --stone:        #e5e0d8;
  --text:         #1a1410;
  --text-muted:   #6a5d52;
  --radius:       4px;
  --transition:   .3s ease;
  --section-pad:  clamp(3rem, 8vw, 6rem);
  --inner-max:    1280px;
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream);
  overflow-x: clip;
  min-height: 100svh;
  overscroll-behavior-y: none;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
address { font-style: normal; }

/* ── SKIP LINK ───────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  background: var(--gold);
  color: var(--cream);
  padding: .5rem 1rem;
  font-weight: 700;
  z-index: 9999;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  clip: auto;
}

/* ── SCREEN READER ONLY ──────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── UTILITY ─────────────────────────────────────────────────── */
.section-inner {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}
/* V7: text-shadow depth on section titles */
.section-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.05;
  color: var(--slate);
  margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(26,20,16,.1);
}
.section-title--light {
  color: var(--cream);
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.section-sub { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem; }
.section-sub--light { color: var(--stone); }

/* ── REVEAL ANTI-FAILURE PATTERN ─────────────────────────────── */
.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--gold);
  color: var(--cream);
  padding: .85rem 1.75rem;
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 18px rgba(139, 30, 46, 0.32);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--gold-light);
  transform: translateY(-2px);
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  color: var(--cream);
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  color: var(--gold-light);
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #25d366;
  color: #0a0a0a;
  padding: .85rem 1.75rem;
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--radius);
  transition: opacity var(--transition), transform var(--transition);
}
.btn-wa:hover, .btn-wa:focus-visible {
  opacity: .9;
  transform: translateY(-2px);
  outline: 2px solid #25d366;
  outline-offset: 2px;
}
.btn-ghost-outline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--cream);
  color: var(--cream);
  padding: .85rem 1.75rem;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}
.btn-ghost-outline:hover, .btn-ghost-outline:focus-visible {
  background: var(--cream);
  color: var(--slate);
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}

/* ── NAVBAR — V7: adaptive colours (no logo pill) ────────────── */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
/* Solid state: cream bg, dark text */
.nav-header.scrolled {
  background: var(--cream);
  border-bottom: 1px solid var(--stone);
  box-shadow: 0 2px 16px rgba(0,0,0,.12);
}
.nav-inner {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
/* V7: no white pill — direct logo display */
.nav-logo {
  display: inline-flex;
  align-items: center;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-logo:hover { opacity: .85; transform: translateY(-1px); }
.nav-logo img { height: 40px; width: auto; display: block; }
.nav-logo:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }

/* Transparent nav (hero visible) — cream links */
.nav-links {
  display: none;
  gap: 2rem;
  align-items: center;
}
.nav-links a {
  color: var(--cream);
  font-size: .95rem;
  font-weight: 500;
  position: relative;
  padding-bottom: 2px;
  transition: color 200ms ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brass);
  transition: width var(--transition);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { width: 100%; }
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--brass); outline: none; }

/* Solid nav — ink links */
.nav-header.scrolled .nav-links a {
  color: var(--text);
}
.nav-header.scrolled .nav-links a:hover,
.nav-header.scrolled .nav-links a:focus-visible {
  color: var(--gold);
}

.nav-cta {
  background: var(--gold);
  color: var(--cream);
  padding: .55rem 1.2rem;
  font-weight: 700;
  font-size: .9rem;
  border-radius: var(--radius);
  white-space: nowrap;
  display: none;
  transition: background var(--transition), transform var(--transition);
  box-shadow: 0 2px 10px rgba(139, 30, 46, 0.35);
}
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta:hover, .nav-cta:focus-visible {
  background: var(--gold-light);
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
/* In solid nav, cta remains maroon — contrast fine on cream bg */

.nav-hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: .5rem;
  border-radius: var(--radius);
  transition: opacity var(--transition);
}
.nav-hamburger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Hamburger lines: cream on transparent nav, ink on solid nav */
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: var(--transition);
}
.nav-header.scrolled .nav-hamburger span { background: var(--text); }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24,8,12,.97);
  backdrop-filter: blur(8px);
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.nav-overlay:not([inert]) { opacity: 1; pointer-events: all; }
.nav-overlay ul {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}
.nav-overlay ul a {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--cream);
  transition: color var(--transition);
}
.nav-overlay ul a:hover { color: var(--brass); }
.nav-overlay-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: var(--cream);
  padding: .5rem;
  border-radius: var(--radius);
  transition: color var(--transition);
}
.nav-overlay-close:hover { color: var(--brass); }
.nav-overlay-close:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.nav-overlay-cta {
  background: var(--gold);
  color: var(--cream);
  padding: .85rem 2rem;
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: var(--radius);
  transition: background var(--transition);
}
.nav-overlay-cta:hover { background: var(--gold-light); }

@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-cta { display: block; }
  .nav-hamburger { display: none; }
}

/* ── HERO — V7: eyebrow company line + Roofing shimmer + float ── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/hero/natural-slate-installation-progress-640.webp');
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
}
@media (min-width: 768px) {
  .hero-bg { background-image: url('../images/hero/natural-slate-installation-progress-1280.webp'); }
}
@media (min-width: 1440px) {
  .hero-bg { background-image: url('../images/hero/natural-slate-installation-progress-1920.webp'); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-bg { animation: heroKenBurns 22s ease-in-out infinite alternate; }
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.08) translate(0, 0); }
  50%  { transform: scale(1.14) translate(-1.5%, -1%); }
  100% { transform: scale(1.12) translate(1%, 1%); }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 20% 85%, rgba(201,151,58,.08), transparent 60%),
    radial-gradient(900px 500px at 80% 15%, rgba(139,30,46,.12), transparent 60%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(24,8,12,.82) 0%, rgba(24,8,12,.45) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--inner-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}
/* V7: thin eyebrow above h1 — small caps, cream, letter-spaced.
   Color: --cream (not --brass) to pass contrast against dark hero bg.
   Brass on cream bg fails WCAG 4.5:1 (computed without bg-image by tools). */
.hero-company {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--cream);
  opacity: .8;
}
.hero-badge {
  display: inline-block;
  border: 1px solid rgba(201,151,58,.5);
  color: var(--cream);
  background: rgba(24,8,12,.35);
  backdrop-filter: blur(4px);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .45rem 1rem;
  border-radius: 999px;
}
.hero-h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: .95;
  color: var(--cream);
}
/* V7: Roofing word — animated gradient shimmer (brass→brass-light→cream) */
.roofing-shimmer {
  font-style: italic;
  background: linear-gradient(
    90deg,
    var(--brass) 0%,
    var(--brass-light) 40%,
    #f8f4ee 60%,
    var(--brass) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none; /* can't combine text-shadow with background-clip:text */
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .roofing-shimmer {
    animation: shimmerGradient 4s linear infinite, roofingFloat 6s ease-in-out infinite;
  }
}
@keyframes shimmerGradient {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
/* V7: subtle 3D float on the Roofing word */
@keyframes roofingFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}
.hero-sub {
  font-size: 1.1rem;
  color: var(--stone);
  max-width: 480px;
  line-height: 1.6;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
/* V7: smaller, lighter hero stats (was 1rem, was 500 weight) */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  color: rgba(248,244,238,.75);
  font-size: .85rem;
  font-weight: 400;
  padding-top: .5rem;
}
.stat-dot { color: var(--brass); opacity: .6; }
.hero-scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--brass);
  z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll { animation: bounce 1.8s ease-in-out infinite; }
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ── SERVICES V7 — 3 cards, keyword overlay + hover caption ──── */
.services-section {
  background: var(--cream);
  padding: var(--section-pad) 0;
}
.services-section .section-inner { margin-bottom: 2rem; }

/* 3-column grid for V7 */
.services-grid--3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}
@media (min-width: 768px) {
  .services-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.service-card-v7 {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  /* 4/5 desktop ratio, 4/3 mobile */
  aspect-ratio: 4/3;
  cursor: pointer;
  /* Pure CSS 3D — no vanilla-tilt per feedback (AI-generic signal) */
  transform-style: preserve-3d;
  transition: transform 400ms cubic-bezier(.22,1,.36,1), box-shadow 400ms ease;
}
@media (min-width: 768px) {
  .service-card-v7 { aspect-ratio: 4/5; }
}
.service-card-v7:hover, .service-card-v7:focus-visible {
  transform: perspective(1200px) rotateX(-2deg) rotateY(3deg);
  box-shadow: 0 24px 48px rgba(24,8,12,.35);
  outline: none;
}
.service-card-v7:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}

/* Full-bleed bg image */
.svc-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
}
.service-card-v7:hover .svc-bg { transform: scale(1.06); }

/* Default: dark gradient bottom 25% only */
.svc-gradient-default {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(24,8,12,.85) 0%, rgba(24,8,12,.0) 30%);
  transition: opacity .4s ease;
}

/* Hover: full overlay fades in */
.svc-gradient-hover {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(24,8,12,.95) 0%, rgba(24,8,12,.6) 50%, rgba(24,8,12,.2) 100%);
  opacity: 0;
  transition: opacity .4s ease;
}
.service-card-v7:hover .svc-gradient-hover,
.service-card-v7:focus-visible .svc-gradient-hover { opacity: 1; }

/* Keyword: default at bottom center, shifts to top-left on hover */
.svc-keyword {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  color: var(--cream);
  text-shadow: 0 2px 16px rgba(24,8,12,.6), 0 0 32px rgba(201,151,58,.3);
  letter-spacing: .04em;
  z-index: 3;
  transition: bottom .35s ease, left .35s ease, transform .35s ease, font-size .35s ease;
  white-space: nowrap;
  pointer-events: none;
}
.service-card-v7:hover .svc-keyword,
.service-card-v7:focus-visible .svc-keyword {
  bottom: auto;
  top: 1.25rem;
  left: 1.25rem;
  transform: none;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  text-shadow: none;
}

/* Caption: slides up from bottom on hover */
.svc-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  z-index: 4;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.service-card-v7:hover .svc-caption,
.service-card-v7:focus-visible .svc-caption {
  transform: translateY(0);
  opacity: 1;
}
.svc-caption h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--cream);
  margin-bottom: .6rem;
  line-height: 1.2;
}
.svc-bullets {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.svc-bullets li {
  font-size: .88rem;
  color: var(--stone);
  padding-left: 1rem;
  position: relative;
}
.svc-bullets li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--brass);
}

/* ── BEFORE & AFTER ──────────────────────────────────────────── */
.ba-section {
  background: var(--slate);
  padding: var(--section-pad) 0;
}
.ba-section .section-inner { margin-bottom: 2.5rem; }
.ba-featured {
  max-width: var(--inner-max);
  margin: 0 auto 2rem;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}
.ba-featured .ba-slider { aspect-ratio: 16/9; }
.ba-grid {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.ba-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4/3;
  cursor: col-resize;
  user-select: none;
}
.ba-before-img,
.ba-after-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top; /* V7: show roof/upper zone (cropped images now top-aligned) */
}
.ba-before-img { clip-path: inset(0 50% 0 0); }
.ba-label {
  position: absolute;
  top: .75rem;
  padding: .3rem .6rem;
  background: rgba(24,8,12,.7);
  color: var(--cream);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 2px;
  z-index: 4;
}
.ba-label-before { left: .75rem; }
.ba-label-after  { right: .75rem; }
.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--gold);
  z-index: 5;
  transform: translateX(-50%);
  pointer-events: none;
}
.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: col-resize;
  z-index: 7;
  -webkit-appearance: none;
}
@media (min-width: 640px) { .ba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .ba-grid { grid-template-columns: repeat(3, 1fr); }
  .ba-featured .ba-slider { aspect-ratio: 16/7; }
}

/* ── WHY US — V7: hover 3D tilt + icon pulse ─────────────────── */
.why-section {
  background: var(--cream);
  display: grid;
  grid-template-columns: 1fr;
  min-height: 600px;
}
.why-image {
  position: relative;
  overflow: hidden;
  min-height: 300px;
}
.why-image img { width: 100%; height: 100%; object-fit: cover; }
.why-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(201,151,58,.9) 0%, transparent 100%);
  color: var(--slate);
  font-weight: 700;
  font-size: 1rem;
  padding: 1.5rem 1.5rem .75rem;
}
.why-content { padding: var(--section-pad) clamp(1.5rem, 5vw, 3rem); }
.why-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.5rem;
}
.why-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--stone);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}
.why-item::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--gold);
  border-radius: 2px;
  transition: width .3s ease;
}
/* V7: 3D hover tilt on why-items */
@media (prefers-reduced-motion: no-preference) {
  .why-item:hover {
    transform: perspective(1000px) rotateY(3deg) translateZ(4px) translateX(4px);
  }
}
.why-item:hover::before, .why-item:focus-within::before { width: 3px; }
.why-icon {
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform .3s ease;
}
/* V7: icon pulse when why-item enters viewport — triggered by JS .icon-pulse class */
@media (prefers-reduced-motion: no-preference) {
  .why-item.icon-pulse .why-icon {
    animation: iconPulse .4s ease-out forwards;
  }
}
@keyframes iconPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.why-item h3 { font-size: 1rem; font-weight: 600; color: var(--slate); margin-bottom: .15rem; }
.why-item p { font-size: .9rem; color: var(--text-muted); }
@media (min-width: 1024px) {
  .why-section { grid-template-columns: 3fr 2fr; }
  .why-image { order: 1; min-height: auto; }
  .why-content { order: 2; }
}

/* ── PROCESS — V7: glass 3D cards (no images) ────────────────── */
.process-section {
  background: var(--slate);
  padding: var(--section-pad) 0;
  position: relative;
}
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
  position: relative;
}
/* V7: glass morphism card */
.process-card {
  position: relative;
  text-align: center;
  background: linear-gradient(145deg, rgba(244,239,230,.08) 0%, rgba(244,239,230,.02) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(244,239,230,.12);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  transform-style: preserve-3d;
  transition: transform 400ms cubic-bezier(.22,1,.36,1), box-shadow 400ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  .process-card {
    animation: cardFloat 6s ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
  }
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.process-card:hover {
  transform: perspective(1000px) rotateX(-4deg) rotateY(6deg) translateZ(16px);
  box-shadow: 0 24px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(244,239,230,.2);
}
/* Number badge floats at top-left — translateZ for parallax depth */
.process-num {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--brass);
  transform: translateZ(24px);
}
/* Icon circle */
.process-icon-wrap {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--slate-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(201,151,58,.3);
  transform: translateZ(8px);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.process-card:hover .process-icon-wrap {
  border-color: rgba(201,151,58,.7);
  box-shadow: 0 0 20px rgba(201,151,58,.2);
}
.process-icon-wrap svg { color: var(--brass); }
.process-card h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--cream);
  margin-bottom: .4rem;
  transform: translateZ(4px);
}
.process-card p { font-size: .9rem; color: var(--stone); max-width: 220px; margin: 0 auto; }
.process-line {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  width: 100%;
  height: 8px;
  pointer-events: none;
}
@media (min-width: 768px) {
  .process-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .process-line { display: block; }
}
/* Disable float animation under reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .process-card { animation: none; }
  .process-card:hover { transform: none; }
}

/* ── GALLERY ─────────────────────────────────────────────────── */
.gallery-section {
  background: var(--cream);
  padding: var(--section-pad) 0;
}
.gallery-section .section-inner { margin-bottom: 2rem; }
.gallery-grid {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  columns: 1;
  gap: .75rem;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: .75rem;
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
}
.gallery-item--feature { column-span: all; }
.gallery-btn {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 0;
}
.gallery-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.gallery-btn img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s ease;
}
.gallery-btn:hover img, .gallery-btn:focus-visible img { transform: scale(1.06); }
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(24,8,12,.55);
  opacity: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  transition: opacity .3s ease;
}
.gallery-btn:hover .gallery-overlay, .gallery-btn:focus-visible .gallery-overlay { opacity: 1; }
.gallery-name { color: var(--cream); font-weight: 600; font-size: .9rem; }
@media (min-width: 640px) { .gallery-grid { columns: 2; } }
@media (min-width: 1024px) { .gallery-grid { columns: 3; } }

/* ── LIGHTBOX ────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(24,8,12,.95);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease;
}
.lightbox:not([hidden]) { opacity: 1; }
.lightbox[hidden] { display: none; }
.lb-img-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  max-width: 90vw;
  max-height: 90vh;
}
.lb-img { max-width: 90vw; max-height: 80vh; object-fit: contain; display: block; border-radius: var(--radius); }
.lb-title {
  color: var(--cream);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  text-align: center;
}
.lb-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  color: var(--cream);
  padding: .5rem;
  border-radius: var(--radius);
  transition: color var(--transition);
  z-index: 10;
}
.lb-close:hover, .lb-close:focus-visible { color: var(--gold); outline: 2px solid var(--gold); outline-offset: 2px; }
.lb-prev, .lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: var(--gold);
  color: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  z-index: 10;
}
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-prev:hover, .lb-prev:focus-visible,
.lb-next:hover, .lb-next:focus-visible {
  background: var(--gold-light);
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

/* ── STATS ───────────────────────────────────────────────────── */
.stats-section {
  background: linear-gradient(135deg, var(--brass) 0%, var(--brass-light) 100%);
  padding: var(--section-pad) clamp(1rem, 4vw, 2.5rem);
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 40%, rgba(24,8,12,.1), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(24,8,12,.08), transparent 45%);
  pointer-events: none;
}
.stats-grid {
  max-width: var(--inner-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--slate);
  line-height: 1;
}
.stat-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--slate);
  margin-top: .4rem;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── REVIEWS — V7: single featured block, no carousel ───────── */
.reviews-section {
  background: var(--slate);
  padding: var(--section-pad) 0;
  overflow: hidden;
}
.reviews-section .section-inner { margin-bottom: 2rem; }

.reviews-featured {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* V7: featured review card — large, centered, perspective hover */
.review-card--featured {
  position: relative;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(201,151,58,.25);
  border-radius: 8px;
  padding: 2.5rem 2rem 2rem;
  width: 100%;
  transition: transform 400ms ease, box-shadow 400ms ease;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .review-card--featured:hover {
    transform: perspective(1000px) rotateY(2deg) translateZ(8px);
    box-shadow: 0 20px 40px rgba(0,0,0,.3);
  }
}

/* V7: big floating opening quote mark — subtle rotate animation */
.review-quote-mark {
  position: absolute;
  top: -1rem;
  left: 1.5rem;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(5rem, 12vw, 8rem);
  color: var(--brass);
  opacity: .15;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .review-quote-mark {
    animation: quoteTurn 8s ease-in-out infinite;
  }
}
@keyframes quoteTurn {
  0%, 100% { transform: rotate(-4deg); }
  50%       { transform: rotate(2deg); }
}

/* V7: star shimmer on viewport enter */
.review-stars {
  color: var(--brass);
  font-size: 1.2rem;
  letter-spacing: 3px;
  position: relative;
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .review-card--featured.star-shimmer .review-stars {
    animation: starShimmer .8s ease-out forwards;
  }
}
@keyframes starShimmer {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.6) saturate(1.4); }
  100% { filter: brightness(1); }
}

.review-card blockquote p {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cream);
  line-height: 1.7;
  margin-top: .75rem;
}
.review-author {
  font-size: .85rem;
  color: var(--stone);
  font-weight: 500;
  margin-top: 1rem;
}
/* P0 fix: --text-muted is too low contrast on dark --slate bg. Use --stone (#e5e0d8) */
.review-note {
  font-size: .85rem;
  color: var(--stone);
  text-align: center;
}
.review-note a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.review-note a:hover { color: var(--brass-light); }
.review-note a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ── QUOTE CTA ───────────────────────────────────────────────── */
.quotecta-section {
  position: relative;
  background-image: url('../images/gallery/aerial-drone-new-vs-old-roof-comparison.jpg');
  background-size: cover;
  background-position: center;
  padding: var(--section-pad) clamp(1rem, 4vw, 2.5rem);
}
.quotecta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(24,8,12,.88);
}
.quotecta-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.quotecta-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: .2em;
}
.quotecta-h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  color: var(--cream);
  line-height: 1.05;
}
.quotecta-h2 em { color: var(--brass); font-style: italic; }
.quotecta-body { font-size: 1.05rem; color: var(--stone); max-width: 480px; }
.quotecta-btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ── CONTACT — V7: reduced padding ~30%, tighter logo ────────── */
.contact-section {
  background: var(--cream);
  /* V7: ~30% reduction from --section-pad clamp(3rem,8vw,6rem) → clamp(2rem,5.5vw,4.2rem) */
  padding: clamp(2rem, 5.5vw, 4.2rem) 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.contact-card { display: flex; flex-direction: column; gap: 1rem; position: relative; isolation: isolate; }
.contact-card > *:not(.contact-logo-3d) { position: relative; z-index: 1; }

/* V7: logo 3D — max-width 220px, tighter offset */
.contact-logo-3d {
  position: absolute;
  top: -24px;
  right: -32px;
  width: clamp(140px, 25vw, 220px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 0;
  opacity: .18;
  filter: drop-shadow(0 20px 28px rgba(26,20,16,.3));
  transform-style: preserve-3d;
  animation: logo-float-3d 7s cubic-bezier(.4, 0, .2, 1) infinite;
  will-change: transform;
}
.contact-logo-3d img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: perspective(1200px) rotateX(18deg) rotateY(-14deg);
}
@keyframes logo-float-3d {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50%      { transform: translate3d(0, -14px, 0) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-logo-3d { animation: none; }
}
@media (max-width: 767px) {
  .contact-logo-3d { top: -16px; right: -20px; width: 120px; opacity: .12; }
}
.contact-card-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 2rem;
  color: var(--slate);
}
.contact-address { display: flex; flex-direction: column; gap: .4rem; font-size: .95rem; color: var(--text-muted); }
.contact-phone {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--slate);
  transition: color var(--transition);
}
.contact-phone:hover { color: var(--gold); }
.contact-hours { font-size: .9rem; }
.contact-marquee {
  background: var(--brass);
  overflow: hidden;
  white-space: nowrap;
  padding: .4rem 0;
  border-radius: var(--radius);
}
.contact-marquee-track {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slate);
}
@media (prefers-reduced-motion: no-preference) {
  .contact-marquee-track { animation: marquee-scroll 20s linear infinite; }
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.contact-wa {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #25d366;
  color: #0a0a0a;
  padding: .7rem 1.4rem;
  font-weight: 700;
  font-size: .95rem;
  border-radius: var(--radius);
  width: fit-content;
  transition: opacity var(--transition);
}
.contact-wa:hover, .contact-wa:focus-visible { opacity: .9; outline: 2px solid #25d366; outline-offset: 2px; }
.contact-socials { display: flex; gap: .75rem; align-items: center; }
.contact-socials a {
  color: var(--text-muted);
  transition: color var(--transition);
  padding: .5rem;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.contact-socials a:hover, .contact-socials a:focus-visible { color: var(--gold); outline: 2px solid var(--gold); outline-offset: 2px; }

/* Form */
.contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.form-field { display: flex; flex-direction: column; gap: .35rem; position: relative; }
.form-field label { font-size: .85rem; font-weight: 600; color: var(--slate); transition: color var(--transition); }
.form-field:focus-within label { color: var(--gold); }
.form-field input,
.form-field select,
.form-field textarea {
  border: none;
  border-bottom: 1px solid var(--stone);
  background: transparent;
  padding: .6rem 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  transition: border-color var(--transition);
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-bottom-color: var(--gold); }
.form-field input.error,
.form-field textarea.error { border-bottom-color: #d32f2f; }
.form-error { font-size: .8rem; color: #d32f2f; min-height: 1.2em; }
.form-submit {
  background: var(--gold);
  color: var(--cream);
  padding: 1rem;
  font-weight: 700;
  font-size: 1rem;
  width: 100%;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition);
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 16px rgba(139, 30, 46, 0.3);
}
.form-submit:hover, .form-submit:focus-visible {
  background: var(--gold-light);
  transform: translateY(-1px);
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
.form-success {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(201,151,58,.12);
  border: 1px solid var(--gold);
  color: var(--text);
  padding: 1rem;
  border-radius: var(--radius);
  font-weight: 600;
}
.form-success svg { color: var(--gold); flex-shrink: 0; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer {
  background: var(--slate);
  padding: var(--section-pad) 0 0;
  color: var(--stone);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(201,151,58,.15);
}
.footer-brand p { margin-top: 1rem; font-size: .9rem; color: var(--stone); line-height: 1.6; }
.footer-logo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  padding: 10px 16px;
  border-radius: 8px;
  max-width: 220px;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.footer-logo-pill img {
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.footer-col h3 {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brass);
  margin-bottom: 1rem;
}
.footer-col ul li + li { margin-top: .5rem; }
.footer-col a { font-size: .9rem; color: var(--stone); transition: color var(--transition); }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--gold-light); outline: 2px solid var(--gold-light); outline-offset: 1px; }
.footer-col address { font-size: .9rem; line-height: 1.8; }
.footer-col address a { color: var(--stone); }
.footer-col address a:hover { color: var(--gold-light); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  font-size: .8rem;
  color: var(--stone);
}
.footer-tweb { color: var(--brass); font-weight: 600; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

/* ── FLOATING ELEMENTS ───────────────────────────────────────── */
.wa-float-aside {
  position: fixed;
  bottom: 6rem;
  right: 1.25rem;
  z-index: 500;
}
@media (min-width: 768px) { .wa-float-aside { bottom: 2rem; } }
.wa-float {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #25d366;
  color: #0a0a0a;
  padding: .65rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  transition: transform var(--transition), box-shadow var(--transition);
}
@media (prefers-reduced-motion: no-preference) {
  .wa-float { animation: wa-glow 2s ease-in-out infinite; }
}
@keyframes wa-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.4); }
  50% { box-shadow: 0 4px 20px rgba(37,211,102,.5), 0 0 0 8px rgba(37,211,102,.1); }
}
.wa-float:hover, .wa-float:focus-visible { transform: translateY(-2px); outline: 2px solid #25d366; outline-offset: 2px; }
.mobile-cta-aside {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 600;
}
.mobile-cta-bar { display: flex; }
.mob-call, .mob-wa {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  font-weight: 700;
  font-size: .95rem;
}
.mob-call { background: var(--slate); color: var(--cream); border-top: 2px solid var(--gold); }
.mob-wa { background: #25d366; color: #0a0a0a; }
.mob-call:focus-visible, .mob-wa:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
@media (min-width: 768px) { .mobile-cta-aside { display: none; } }