/* ============================================================
   ALECAH PAVING — Premium Paving & Hardscaping Website
   Hand-crafted CSS (no framework) for full control, zero build,
   instant load, and no CDN flash.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand — blacktop black + safety yellow (matches the Alecah Paving logo) */
  --yellow: #F2F903;         /* primary brand yellow */
  --yellow-deep: #D2D803;    /* deeper yellow for gradients/hover */
  --yellow-glow: rgba(242, 249, 3, 0.35);
  /* Brand yellow measures 1.06:1 on the light sections — effectively invisible.
     This darkened variant clears WCAG AA (5.37:1 on --paper) while still
     reading as the brand colour rather than grey. Use it for TEXT on light
     backgrounds; dark sections keep the bright --yellow (16.96:1). */
  --yellow-on-light: #656A02;
  --yellow-on-light-dim: #8A8F02;   /* 3.23:1 — decorative rules/dashes only */

  /* Ink / dark surfaces — true blacktop black, warmed a touch off pure black */
  --ink: #0D0D0D;
  --ink-2: #131313;
  --ink-3: #181818;
  --ink-card: #161616;
  --ink-elev: #1c1c1c;

  /* Light surfaces */
  --paper: #F7F6F1;
  --paper-2: #EDEBE2;

  /* Text */
  --text-on-dark: #ECECE8;
  --muted-on-dark: #9C9C96;
  --text-dark: #15150F;
  --muted-dark: #5B5B54;

  /* Lines */
  --line-dark: rgba(255, 255, 255, 0.08);
  --line-light: rgba(15, 15, 9, 0.10);

  /* Type */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-accent: "Anton", "Archivo", system-ui, sans-serif;
  --font-script: "Kaushan Script", cursive;

  /* Layout */
  --container: 1240px;
  --radius: 16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* z-index scale */
  --z-nav: 50;
  --z-overlay: 40;
  --z-lightbox: 80;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* prevent any horizontal scroll from off-canvas/fixed elements */
}
body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--text-on-dark);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
/* subtle asphalt grain — tasteful texture, not decoration overload */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--yellow);
  display: inline-block;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px);
}
.section-title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
.lead {
  font-size: 1.12rem;
  color: var(--muted-on-dark);
  max-width: 60ch;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.section { padding: clamp(72px, 10vw, 130px) 0; position: relative; }
.section--light { background: var(--paper); color: var(--text-dark); }
.section--light .lead { color: var(--muted-dark); }
.section--dark { background: var(--ink); }
.section--ink2 { background: var(--ink-2); }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head .lead { margin-top: 18px; }
.text-center { text-align: center; }
.center-head { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background 0.25s var(--ease), color 0.25s var(--ease);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary {
  background: linear-gradient(135deg, var(--yellow), var(--yellow-deep));
  color: #0D0D0D;
  box-shadow: 0 10px 30px -8px var(--yellow-glow);
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -10px var(--yellow-glow);
}
.btn--ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  border-color: var(--yellow);
  color: var(--yellow);
  transform: translateY(-3px);
}
.btn--dark {
  background: var(--ink);
  color: #fff;
}
.btn--dark:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -12px rgba(0,0,0,.5); }
.btn--block { width: 100%; }

/* ---------- Logo lockup ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0; /* never sacrifice the logo when the nav row gets tight */
}
/* Light halo so the logo's black "PAVING" wordmark doesn't disappear
   against the site's dark backgrounds (header, footer, hero). */
.logo__img {
  height: 76px;
  width: auto;
  aspect-ratio: 1342 / 559; /* locks width so it can't collapse under flex pressure */
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.4));
}
.header.scrolled .logo__img { height: 62px; transition: height 0.4s var(--ease); }
.footer__brand .logo__img { height: 42px; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  padding: 18px 0;
  transition: background 0.4s var(--ease), padding 0.4s var(--ease),
    box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: rgba(13, 13, 13, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  padding: 10px 0;
  border-bottom: 1px solid var(--line-dark);
  box-shadow: 0 12px 40px -20px rgba(0, 0, 0, 0.8);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav__links {
  display: flex;
  gap: 30px;
}
.nav__links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--text-on-dark);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--yellow);
  transition: width 0.3s var(--ease);
}
.nav__links a:hover { color: var(--yellow); }
.nav__links a:hover::after { width: 100%; }
.header__cta { display: flex; align-items: center; gap: 16px; }

/* "Rate Us" button (links to Google reviews) */
.rate-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1.5px solid rgba(242, 249, 3, 0.4);
  color: var(--yellow);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.rate-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.rate-btn .rate-btn__g { width: 18px; height: 18px; }
.rate-btn:hover {
  background: var(--yellow);
  color: #0D0D0D;
  border-color: var(--yellow);
  transform: translateY(-2px);
}

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
    background 0.25s var(--ease), transform 0.25s var(--ease);
}
.lang-toggle svg { width: 16px; height: 16px; }
.lang-toggle:hover { border-color: var(--yellow); color: var(--yellow); transform: translateY(-2px); }
.lang-toggle.active { background: var(--yellow); border-color: var(--yellow); color: #0D0D0D; }
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  color: #fff;
  transition: color 0.25s var(--ease);
}
.header__phone svg { width: 17px; height: 17px; color: var(--yellow); }
.header__phone:hover { color: var(--yellow); }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 84px; /* clear the fixed header so tall content never clips */
  overflow: hidden;
  background: radial-gradient(120% 100% at 70% 10%, #1a1a1a 0%, var(--ink) 60%);
}
.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  filter: saturate(112%) contrast(108%) grayscale(0.1);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0.25) 35%, rgba(13,13,13,0.86) 100%),
    radial-gradient(80% 60% at 50% 40%, transparent 0%, rgba(13,13,13,0.4) 100%);
}
.hero__grid-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(75% 75% at 50% 40%, #000 0%, transparent 100%);
  opacity: 0.5;
}
.hero__content {
  position: relative;
  z-index: 2;
  padding-top: 24px;
  padding-bottom: 48px;
  max-width: 880px;
}
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  text-transform: uppercase;
  line-height: 0.98;
  margin-bottom: 22px;
}
.hero h1 .accent {
  color: var(--yellow);
  display: inline-block;
}
/* Shrink the lead-in line so the yellow accent line reads as the dominant statement */
.hero h1 .lede {
  display: inline-block;
  font-size: 0.56em;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #d8d8d2;
}

/* Punchy accent face — a heavier, condensed display font (distinct from Archivo)
   so the yellow phrase pops instead of just being a bolder version of the same type. */
.hero h1 .accent,
.cta-band h2 .accent {
  font-family: var(--font-accent);
  font-weight: 400;
  letter-spacing: 0.01em;
  transform: skewX(-4deg);
  display: inline-block;
  text-shadow: 0 2px 24px rgba(242, 249, 3, 0.35);
}
.hero__sub {
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  color: #cfcfc9;
  max-width: 54ch;
  margin-bottom: 36px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--muted-on-dark);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.hero__scroll .mouse {
  width: 24px; height: 38px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 14px;
  position: relative;
}
.hero__scroll .mouse::after {
  content: "";
  position: absolute;
  left: 50%; top: 7px;
  width: 4px; height: 8px;
  background: var(--yellow);
  border-radius: 4px;
  transform: translateX(-50%);
  animation: scrollWheel 1.8s var(--ease) infinite;
}
@keyframes scrollWheel {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

/* ---------- Trust marquee ---------- */
.trust {
  background: var(--ink-2);
  border-block: 1px solid var(--line-dark);
  padding: 22px 0;
  overflow: hidden;
}
.marquee {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.trust:hover .marquee { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  white-space: nowrap;
}
.marquee__item svg { width: 20px; height: 20px; color: var(--yellow); flex-shrink: 0; }
.marquee__item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Animated floating-paths background ---------- */
.section--paths { position: relative; overflow: hidden; }
.section--paths > .container { position: relative; z-index: 1; }
.bg-paths {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: #ffffff; /* white path group inherits this */
}
.bg-paths svg { width: 100%; height: 100%; display: block; }
.bg-paths g[data-paths="-1"] { color: var(--yellow); } /* yellow accent group */
.bg-paths path { fill: none; stroke: currentColor; stroke-dasharray: 0.5 0.5; }
@keyframes pathFlow { to { stroke-dashoffset: -1; } }

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
/* Photoless service cards. The stock job photos were pulled 2026-09-01 — these
   carry themselves on type, a soft asphalt-toned surface and a yellow edge that
   lights up on hover. Copy is always visible now (it used to be hover-only,
   which only worked because a photo was doing the visual work). */
.service-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  border: 1px solid var(--line-dark);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(242, 249, 3,0.07) 0%, rgba(242, 249, 3,0) 55%),
    linear-gradient(165deg, var(--ink-elev) 0%, var(--ink-card) 45%, var(--ink) 100%);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
/* thin yellow rule that grows along the bottom edge on hover */
.service-card::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--yellow), var(--yellow-deep));
  transition: transform 0.5s var(--ease);
}
.service-card:hover, .service-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(242, 249, 3, 0.32);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,0.85);
}
.service-card:hover::after, .service-card:focus-within::after { transform: scaleX(1); }
.service-card__body { padding: 30px; position: relative; z-index: 1; }
.service-card__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--yellow);
  letter-spacing: 0.1em;
}
.service-card h3 {
  font-size: 1.7rem;
  text-transform: uppercase;
  margin: 10px 0 12px;
  color: #fff;
}
.service-card p {
  color: #c9c9c3;
  font-size: 0.98rem;
  line-height: 1.6;
}
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}
.service-card__link svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.service-card:hover .service-card__link svg { transform: translateX(5px); }

/* ---------- Why / About + stats ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
/* the About photo column was removed 2026-09-01 — one centred column now */
.about-grid--solo {
  grid-template-columns: 1fr;
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}
.about-grid--solo .about__list { text-align: left; display: inline-block; }
.about-grid--solo .eyebrow { justify-content: center; }
.about__media { position: relative; }
.about__media img {
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.6);
}
.about__badge {
  position: absolute;
  left: -28px;
  bottom: 40px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
  max-width: 230px;
}
.about__badge .big {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.9rem;
  letter-spacing: 0.01em;
  color: var(--yellow);
  line-height: 1;
  text-shadow: 0 0 18px rgba(242, 249, 3, 0.55), 0 0 4px rgba(242, 249, 3, 0.4);
  transform: skewX(-12deg);
}
/* Fixed-width + tabular digits so the 0→100 count-up doesn't reflow the
   badge (and re-rasterize the skewed/glowing text) on every frame — that
   reflow, not the animation itself, was what caused the scroll twitch. */
.about__badge .big [data-count] {
  display: inline-block;
  min-width: 5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.about__badge .small { font-size: 0.85rem; color: var(--muted-on-dark); margin-top: 6px; }
.about__list { margin-top: 28px; display: grid; gap: 16px; }
.about__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--muted-dark);
}
.section--dark .about__list li { color: var(--muted-on-dark); }
.about__list .tick {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(242, 249, 3,0.15);
  display: grid;
  place-items: center;
}
.about__list .tick svg { width: 14px; height: 14px; color: var(--yellow-deep); }
.section--dark .about__list .tick svg { color: var(--yellow); }
.about__list strong { color: inherit; font-weight: 700; }
.section--light .about__list strong { color: var(--text-dark); }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
/* Boxed cards — same card language as the Process section (border + radius
   + hover lift), adapted for a light background. */
.stat {
  text-align: center;
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 30px 18px;
  box-shadow: 0 20px 40px -32px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.stat:hover {
  transform: translateY(-6px);
  border-color: rgba(217, 201, 0, 0.45);
  box-shadow: 0 28px 50px -28px rgba(0, 0, 0, 0.35);
}
.section--dark .stat { background: var(--ink-card); border-color: var(--line-dark); }
.section--dark .stat:hover { border-color: rgba(242, 249, 3, 0.35); }
/* Script face + a thicker dark stroke so the yellow reads crisply
   against the light card instead of washing out into it. */
.stat__num {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.2vw, 3.1rem);
  line-height: 1;
  color: var(--yellow);
  -webkit-text-stroke: 2.25px var(--text-dark);
  text-stroke: 2.25px var(--text-dark);
  paint-order: stroke fill;
}
/* Fixed-width + tabular digits so the 0→100 count-up doesn't reflow the
   centered card (and re-rasterize the stroked script) on every frame. */
.stat__num [data-count] {
  display: inline-block;
  min-width: 4.2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.section--dark .stat__num { color: var(--yellow); -webkit-text-stroke-color: var(--ink); text-stroke-color: var(--ink); }
.stat__label {
  margin-top: 8px;
  margin-inline: auto;
  max-width: 18ch;
  font-size: 0.9rem;
  color: var(--muted-dark);
  letter-spacing: 0.02em;
}
.section--dark .stat__label { color: var(--muted-on-dark); }

/* ---------- Process ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
  counter-reset: step;
}
.process-step {
  background: var(--ink-card);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 34px 28px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.process-step:hover { transform: translateY(-6px); border-color: rgba(242, 249, 3,0.35); }
.process-step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 12px; right: 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.4rem;
  color: rgba(255,255,255,0.05);
}
.process-step .ico {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(242, 249, 3,0.2), rgba(242, 249, 3,0.05));
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.process-step .ico svg { width: 26px; height: 26px; color: var(--yellow); }
.process-step h3 { font-size: 1.2rem; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.process-step p { color: var(--muted-on-dark); font-size: 0.95rem; }

/* ---------- Gallery ---------- */
/* Real-project showcase. Replaced the 4-tile stock gallery 2026-09-01.
   One column today; drop in more .project blocks and it becomes a 2-up grid. */
.projects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 1040px;
  margin-inline: auto;
}
.project {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background: linear-gradient(165deg, var(--ink-elev) 0%, var(--ink-card) 60%, var(--ink) 100%);
}
.project__media {
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.project__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease);
}
.project:hover .project__media img { transform: scale(1.05); }
.project__plus {
  position: absolute;
  right: 18px; bottom: 18px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.project__plus svg { width: 18px; height: 18px; }
.project:hover .project__plus, .project:focus-within .project__plus { opacity: 1; transform: scale(1); }
.project__body { padding: 28px 30px 32px; }
.project__loc {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 10px;
}
.project__title {
  font-size: 1.55rem;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
}
.project__body p {
  color: #c9c9c3;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  max-width: 62ch;
}
@media (min-width: 900px) {
  .projects:has(.project + .project) { grid-template-columns: 1fr 1fr; }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: rgba(8,8,8,0.94);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vw;
}
.lightbox.open { display: flex; animation: fadeIn 0.3s var(--ease); }
.lightbox img {
  max-width: 90vw;
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8);
}
.lightbox__close {
  position: absolute;
  top: 24px; right: 28px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: grid; place-items: center;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), color 0.25s var(--ease);
}
.lightbox__close:hover { background: var(--yellow); color: #0D0D0D; transform: rotate(90deg); }
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: grid; place-items: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.lightbox__nav:hover { background: var(--yellow); color: #0D0D0D; }
.lightbox__nav.prev { left: 20px; }
.lightbox__nav.next { right: 20px; }
.lightbox__nav svg { width: 24px; height: 24px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Testimonials ---------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.testimonial {
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.testimonial:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(0,0,0,0.35); }
.testimonial__stars { display: flex; gap: 3px; color: var(--yellow-deep); }
.testimonial__stars svg { width: 19px; height: 19px; }
.testimonial__quote { color: var(--text-dark); font-size: 1.02rem; line-height: 1.6; flex-grow: 1; }
.testimonial__author { display: flex; align-items: center; gap: 14px; }
.testimonial__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
}
.testimonial__name { font-family: var(--font-display); font-weight: 700; color: var(--text-dark); font-size: 0.98rem; }
.testimonial__loc { font-size: 0.85rem; color: var(--muted-dark); }

/* Auto-scrolling testimonial columns (ported from motion/react component) */
.reviews-columns {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 56px;
  max-height: 740px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.review-col { flex: 1 1 0; max-width: 360px; }
.review-col__track {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 24px;
  animation: reviewScroll var(--rev-dur, 44s) linear infinite;
  will-change: transform;
}
.review-col .testimonial { width: 100%; }
.reviews-columns:hover .review-col__track { animation-play-state: paused; }
@keyframes reviewScroll { to { transform: translateY(-50%); } }

/* ---------- Service area ---------- */
.area-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.area__towns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 30px;
}
.area__town {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--ink-card);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.area__town--more { border-color: rgba(242, 249, 3,0.55); color: var(--yellow); font-weight: 700; }
.area__town:hover { border-color: rgba(242, 249, 3,0.5); transform: translateX(4px); }
.area__town svg { width: 16px; height: 16px; color: var(--yellow); flex-shrink: 0; }
.area__map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-dark);
  position: relative;
  min-height: 420px;
  background: var(--ink-card);
}
.area__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; filter: grayscale(0.3) contrast(1.05); }

/* ---------- FAQ — editorial list (no accordion chrome; answers already open) ---------- */
.faq {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  border-top: 1px solid var(--line-light);
}
.faq__item {
  background: transparent;
  border-bottom: 1px solid var(--line-light);
  padding: 34px 4px;
  transition: background 0.3s var(--ease);
}
.faq__item summary {
  list-style: none;
  cursor: default;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--yellow-deep);
}
.faq__q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}
.faq__a { padding: 16px 0 0 42px; }
.faq__a p { color: var(--muted-dark); max-width: 68ch; font-size: 1.02rem; }

/* ---------- Subpages (Privacy / 404): force solid header, readable legal type ---------- */
.subpage .header {
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-dark);
  padding: 12px 0;
}
.legal { padding-top: clamp(120px, 16vw, 170px); }
.legal__inner { max-width: 800px; margin-inline: auto; }
.legal__updated { color: var(--muted-dark); margin: 6px 0 36px; font-size: 0.95rem; }
.legal h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 38px 0 12px;
}
.legal p, .legal li { color: var(--muted-dark); line-height: 1.75; }
.legal p { margin-bottom: 14px; }
.legal ul { padding-left: 22px; margin-bottom: 14px; display: grid; gap: 8px; }
.legal li { list-style: disc; }
.legal a { color: #8a8000; text-decoration: underline; }
.legal strong { color: var(--text-dark); }

/* 404 */
.notfound {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  background: radial-gradient(120% 100% at 70% 10%, #1a1a1a 0%, var(--ink) 60%);
}
.notfound__code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(5rem, 20vw, 12rem);
  line-height: 1;
  color: var(--yellow);
}
.notfound h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); text-transform: uppercase; color: #fff; margin: 10px 0 16px; }
.notfound p { color: var(--muted-on-dark); max-width: 46ch; margin: 0 auto 30px; }

/* ---------- Google Reviews band ---------- */
.greviews-band {
  background: var(--ink-2);
  border-block: 1px solid var(--line-dark);
  padding: clamp(40px, 6vw, 76px) 0;
}
.greviews {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 48px);
  flex-wrap: wrap;
  text-align: left;
}
.greviews__logo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6);
}
.greviews__logo svg { width: 38px; height: 38px; }
.greviews__rating { display: flex; align-items: center; gap: 12px; }
.greviews__stars { display: inline-flex; gap: 2px; color: var(--yellow); }
.greviews__stars svg { width: 22px; height: 22px; }
.greviews__rating strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: #fff;
}
.greviews__text p { color: var(--muted-on-dark); margin-top: 6px; max-width: 42ch; }
.greviews__btn { flex-shrink: 0; }

@media (max-width: 680px) {
  .greviews { flex-direction: column; text-align: center; gap: 22px; }
  .greviews__text p { margin-inline: auto; }
  .greviews__btn { width: 100%; }
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  padding: clamp(80px, 12vw, 150px) 0;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 130%;
  object-fit: cover;
  /* Top third of the night plate is empty sky — bias down onto the lit blocks. */
  object-position: center 58%;
  will-change: transform;
}
.cta-band::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* Lighter than it was: the night skyline is already dark, so the old
     0.88/0.8 scrim (tuned for a bright dusk plate) flattened it to black.
     Still heavy enough to hold white headline contrast. */
  background: linear-gradient(180deg, rgba(13,13,13,0.78), rgba(13,13,13,0.68));
}
.cta-band h2 {
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  text-transform: uppercase;
  color: #fff;
  max-width: 16ch;
  margin: 0 auto 18px;
}
.cta-band h2 .accent { color: var(--yellow); }
.cta-band p { color: #cfcfc9; font-size: 1.15rem; max-width: 52ch; margin: 0 auto 36px; }
.cta-band .hero__actions { justify-content: center; }

/* ---------- Quote / Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
}
.contact__info { display: flex; flex-direction: column; gap: 26px; }
.contact__card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.contact__card .ico {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(242, 249, 3,0.2), rgba(242, 249, 3,0.05));
  display: grid; place-items: center;
}
.contact__card .ico svg { width: 24px; height: 24px; color: var(--yellow); }
.contact__card h4 { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 4px; }
.contact__card a, .contact__card p { color: #fff; font-size: 1.08rem; font-weight: 500; }
.contact__card a:hover { color: var(--yellow); }
.contact__phones { display: flex; flex-direction: column; gap: 6px; }
.contact__phone-row { display: flex; align-items: center; gap: 10px; }
.contact__tag {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(242, 249, 3, 0.14);
  padding: 3px 8px;
  border-radius: 999px;
}

.form {
  background: var(--ink-card);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 38px;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #5f5f59; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(242, 249, 3,0.15);
}
.field textarea { resize: vertical; min-height: 120px; }
.form__note { font-size: 0.85rem; color: var(--muted-on-dark); margin-top: 14px; text-align: center; }
.form__success {
  display: none;
  text-align: center;
  padding: 40px 20px;
}
.form__success.show { display: block; animation: fadeIn 0.4s var(--ease); }
.form__success .ico {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: rgba(242, 249, 3,0.15);
  display: grid; place-items: center;
  margin: 0 auto 20px;
}
.form__success .ico svg { width: 36px; height: 36px; color: var(--yellow); }
.form__success h3 { font-size: 1.5rem; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.form__success p { color: var(--muted-on-dark); }

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
  padding: 70px 0 32px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--line-dark);
}
.footer__brand p { color: var(--muted-on-dark); margin-top: 20px; max-width: 34ch; font-size: 0.95rem; }
.footer__social-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 28px;
}
.footer__col h4 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
}
.footer__col ul { display: grid; gap: 12px; }
.footer__col a, .footer__col li { color: var(--muted-on-dark); font-size: 0.95rem; transition: color 0.25s var(--ease); }
.footer__tag {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(242, 249, 3, 0.14);
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 4px;
}
.footer__col a:hover { color: var(--yellow); }
.footer__socials { display: flex; gap: 12px; margin-top: 22px; }
.footer__socials a {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line-dark);
  display: grid; place-items: center;
  color: var(--muted-on-dark);
  transition: all 0.25s var(--ease);
}
.footer__socials a:hover { color: var(--yellow); border-color: var(--yellow); transform: translateY(-3px); }
.footer__socials svg { width: 18px; height: 18px; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 28px;
  color: var(--muted-on-dark);
  font-size: 0.85rem;
}
.footer__bottom a:hover { color: var(--yellow); }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--yellow-deep), var(--yellow));
  box-shadow: 0 0 14px var(--yellow-glow);
  will-change: transform;
}

/* ---------- Scroll reveal ---------- */
/* will-change is applied/cleared in JS only for the duration of the reveal
   transition (see main.js) — leaving it on permanently after the one-shot
   animation finishes forces a lingering compositor layer on every revealed
   element, which causes subpixel jitter in children (e.g. skewed/glowing
   text) whenever the page scrolls past them. */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* Directional reveal variants (added for richer scroll motion) */
.reveal.from-left { transform: translateX(-52px); }
.reveal.from-right { transform: translateX(52px); }
.reveal.zoom-in { transform: scale(0.9); }
.reveal.blur-in { filter: blur(10px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
.reveal.from-left.in,
.reveal.from-right.in,
.reveal.zoom-in.in { transform: none; }
.reveal.blur-in.in { filter: blur(0); }

/* Hero parallax targets */
.hero__content { will-change: transform, opacity; }
.hero__video { will-change: transform; }

/* ---------- Floating mobile call bar ---------- */
.call-bar {
  display: none;
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: var(--z-overlay);
  gap: 12px;
}
.call-bar .btn { flex: 1; padding: 16px; box-shadow: 0 14px 30px -10px rgba(0,0,0,0.6); }

/* ---------- Responsive ---------- */
@media (max-width: 1150px) {
  .nav__links { gap: 22px; }
  .header__phone { display: none; } /* keep the Free Estimate button; phone returns on wide screens */
}

@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about__media { max-width: 460px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .area-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 1000px) {
  body { font-size: 16px; }
  .nav__links, .header__phone { display: none; }
  /* free up room for the hamburger; the floating call-bar carries the CTA */
  .header__cta .btn--primary { display: none; }
  .header__cta { gap: 10px; }
  .rate-btn { padding: 9px; } /* star-only on mobile */
  .rate-btn__label { display: none; }
  .nav-toggle { display: flex; margin-left: 4px; }
  .logo__img { height: 52px; }
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    height: 100vh;
    height: 100dvh;
    width: min(82vw, 360px);
    background: var(--ink-2);
    border-left: 1px solid var(--line-dark);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 96px 40px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    box-shadow: -30px 0 80px -30px rgba(0,0,0,0.8);
  }
  .nav.open { transform: translateX(0); }
  .nav__links { display: flex; flex-direction: column; gap: 8px; width: 100%; }
  .nav__links a { font-size: 1.4rem; padding: 12px 0; width: 100%; }
  .nav__links a::after { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .form__row { grid-template-columns: 1fr; }
  .form { padding: 26px; }
  .footer__top { grid-template-columns: 1fr; gap: 28px; }
  .call-bar { display: flex; }
  .footer { padding-bottom: 96px; }
  .hero__scroll { display: none; }
  .area__towns { grid-template-columns: 1fr; }

  /* ---- Touch targets ----
     Everything tappable gets to ~44px, the minimum comfortable finger target.
     All of this lives inside the mobile query, so desktop metrics are untouched. */
  .service-card__link {
    min-height: 44px;
    align-items: center;
    margin-top: 14px;
  }
  .rate-btn { min-width: 44px; min-height: 44px; justify-content: center; }
  .lang-toggle { min-width: 44px; min-height: 44px; }
  .nav-toggle { min-width: 44px; min-height: 44px; }
  .faq__item summary { min-height: 44px; align-items: center; }
  .footer a, .nav__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .project__media { cursor: default; }   /* no hover-zoom affordance on touch */
  /* the two tel: links in the contact card are the highest-intent taps on the
     page — give them a full finger target */
  .contact__phone-row a { display: flex; align-items: center; min-height: 44px; }
  .contact__card a[href^="mailto:"] { display: flex; align-items: center; min-height: 44px; }
  .footer__socials a { min-width: 44px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__video { opacity: 0.25; }
  /* show testimonial columns as static, fully-readable cards */
  .reviews-columns { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .review-col__track { animation: none; }
}

[hidden] { display: none !important; }

/* Shown only if the quote form is submitted while still pointing at the
   Formspree placeholder — see the placeholder branch in js/main.js. */
.form__notconnected {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(242, 249, 3, 0.45);
  border-left: 3px solid var(--yellow);
  border-radius: 10px;
  background: rgba(242, 249, 3, 0.07);
  color: var(--text-on-dark);
  font-size: 0.95rem;
  line-height: 1.55;
}
.form__notconnected a { color: var(--yellow); text-decoration: underline; }

/* ---------- Netlify injected badge ----------
   Netlify drops a fixed-position iframe (#nl-badge-frame) at z-index
   2147483645 into the bottom-right of the page. On phones it lands exactly on
   top of the "Free Quote" button in the floating call bar and swallows the tap,
   which kills one of the two primary CTAs. Hidden here; the call bar is also
   lifted above it as a belt-and-braces measure in case the id ever changes. */
#nl-badge-frame,
iframe[title="Powered by Netlify"] { display: none !important; }
.call-bar { z-index: 2147483646; }

/* ---------- Legibility of brand yellow on light sections ----------
   Yellow text on --paper is 1.06:1 and cannot be read. Scoped overrides so
   only the light sections change; every dark section keeps the bright accent.
   .stat__num is deliberately NOT included — it carries a 2.25px dark
   text-stroke that already makes the yellow legible there. */
.section--light .eyebrow { color: var(--yellow-on-light); }
.section--light .eyebrow::before { background: var(--yellow-on-light-dim); }
.section--light .faq__num { color: var(--yellow-on-light); }
.section--light .about__list .tick svg { color: var(--yellow-on-light); }

/* "Sunday · Closed" under the contact-card hours — present but visibly
   secondary to the open hours above it. */
.closed-day { color: var(--muted-on-dark); font-size: 0.92em; }