/* ============================================
   ZP VALETS — STYLESHEET
   Dark, confident automotive theme: near-black
   surfaces, white text, a single blue accent.
   Organized by section, top to bottom, in the
   same order sections appear on the page.
   ============================================ */

/* ---- Colors & basics (change these to re-theme the whole site) ---- */
:root {
  --black: #0A0A0C;        /* page background */
  --panel: #16171A;        /* card / panel background */
  --panel-raised: #1C1D21; /* hover / raised surface */
  --ink: #F5F6F7;          /* heading + primary text */
  --ink-soft: #9AA1AC;     /* secondary / muted text */
  --ink-faint: #6B7280;    /* tertiary text, placeholders */
  --line: rgba(255, 255, 255, 0.10);   /* hairline border on dark surfaces */
  --line-strong: rgba(255, 255, 255, 0.18);
  --accent: #3B82F6;       /* single accent — confident blue */
  --accent-dark: #2563EB;  /* accent hover / pressed */
  --accent-soft: rgba(59, 130, 246, 0.14); /* tinted accent background */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--black);
  color: var(--ink);
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.015em;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Skip link — invisible until a keyboard user tabs to it */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  z-index: 200;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 16px;
}

/* Small reusable line-icon system */
.icon {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: -3px;
  margin-right: 6px;
}
.icon--btn {
  margin-right: 0;
  margin-left: 2px;
}
.icon--lg {
  width: 30px;
  height: 30px;
  stroke-width: 1.4;
  color: var(--accent);
  margin: 0 0 16px;
}

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.eyebrow--on-photo {
  color: #C7D6EE;
}

/* ============================================
   MAIN NAVIGATION
   ============================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 12, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
}

.logo-badge {
  display: flex;
  align-items: center;
}

.logo-img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.terms-lockup {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
}
.logo-img--terms {
  width: 96px;
  height: 96px;
  border-radius: 14px;
}

.logo-text {
  font-family: 'Poppins', sans-serif;
  font-size: 17.5px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}

.logo-tagline {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}

.nav-links {
  display: flex;
  gap: 26px;
  align-items: center;
}

.nav-links a {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.15s;
}

.nav-links a:hover {
  color: #fff;
}

.nav-phone {
  display: flex;
  align-items: center;
  color: var(--ink-soft) !important;
}
.nav-phone .icon {
  color: var(--accent);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  transition: transform 0.2s, opacity 0.2s;
}
.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================
   BUTTONS — used all over the site
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-dark);
}

.btn-outline {
  border-color: var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-outline--on-photo {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}
.btn-outline--on-photo:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.btn-nav {
  padding: 10px 20px;
  font-size: 13px;
}

.btn-quote {
  width: 100%;
  margin-top: 20px;
  font-size: 13px;
  padding: 12px 20px;
}


/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 680px;
  display: flex;
  align-items: center;
  padding: 90px 0;
  background-color: #050607; /* shows instantly, before the video/poster paints */
  /* Same diagonal texture + accent glow used site-wide for the wide-
     screen margins (see .bg-texture) — reused here so the letterbox
     bars around the (untouched) video read as the same intentional
     background, not a separate one-off treatment. */
  background-image:
    radial-gradient(760px 760px at 6% 12%, rgba(59, 130, 246, 0.22), transparent 70%),
    radial-gradient(840px 840px at 96% 88%, rgba(59, 130, 246, 0.20), transparent 70%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 42px
    );
}

.hero-video {
  position: absolute;
  inset: -2%; /* slightly oversized so the ambient zoom never reveals an edge */
  z-index: 0;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.9) contrast(1.08) brightness(0.8);
  animation: hero-zoom 26s ease-in-out infinite alternate;
}

/* On wide screens, hero.mp4's own aspect ratio is much narrower than
   the hero banner's, so object-fit:cover has to crop a lot off the
   top/bottom to fill it — the video ends up over-zoomed and loses
   framing. Switch to contain instead: show the whole clip letterboxed
   at its natural size — the video itself is untouched, the letterbox
   bars are just dressed to match the site's background (see .hero
   background below) instead of sitting flat black. Cover still
   applies below this, where the banner is closer to the video's own
   proportions. */
@media (min-width: 1300px) {
  .hero-video {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

/* Layered scrim: a directional wash so left-aligned text stays legible,
   plus a soft top/bottom vignette for a more filmic, less "flat" feel. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(100deg, rgba(5,6,7,0.95), rgba(5,6,7,0.68) 42%, rgba(5,6,7,0.24) 75%, rgba(5,6,7,0.18)),
    linear-gradient(180deg, rgba(5,6,7,0.4) 0%, transparent 22%, transparent 78%, rgba(5,6,7,0.5) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.hero-content > * {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-rise 0.8s ease-out forwards;
}
.hero-content .eyebrow--on-photo { animation-delay: 0.05s; }
.hero-content h1                 { animation-delay: 0.16s; }
.hero-content .hero-sub          { animation-delay: 0.28s; }
.hero-content .hero-buttons      { animation-delay: 0.4s; }

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

.hero h1 {
  font-size: clamp(32px, 4.4vw, 50px);
  color: #fff;
  line-height: 1.14;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}

.hero-sub {
  color: #C7CBD2;
  font-size: 16px;
  line-height: 1.7;
  margin-top: 18px;
  max-width: 54ch;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.hero-scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.8);
  animation: hero-bob 2.2s ease-in-out infinite;
}
.hero-scroll-cue .icon { margin: 0; width: 16px; height: 16px; }
.hero-scroll-cue:hover {
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}

@keyframes hero-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { animation: none; transform: none; }
  .hero-content > * { animation: none; opacity: 1; transform: none; }
  .hero-scroll-cue { animation: none; }
}


/* ============================================
   TRUST STRIP
   ============================================ */
.trust-strip {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.trust-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  padding: 22px 20px;
}

.trust-item {
  display: flex;
  align-items: center;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
}

.trust-item .icon {
  color: var(--accent);
}


/* ============================================
   SECTION HEADINGS — reused above every section
   ============================================ */
.section {
  padding: 88px 0;
}

.section--alt {
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-heading {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}

.section-heading .eyebrow {
  display: inline-block;
}

.section-heading h2 {
  font-size: clamp(25px, 3.4vw, 34px);
}

.section-heading p {
  color: var(--ink-soft);
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.7;
}

.section-heading a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ============================================
   PROCESS — 5-step "how it works" section
   ============================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.process-step {
  text-align: center;
  padding-top: 22px;
  border-top: 2px solid var(--line);
}

.step-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.process-step h3 {
  font-size: 16px;
}

.process-step p {
  color: var(--ink-soft);
  font-size: 13.5px;
  margin-top: 8px;
  line-height: 1.55;
}


/* ============================================
   WHY CHOOSE US — 3 value-prop cards
   ============================================ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-card {
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px 26px;
  text-align: center;
}

.why-card h3 {
  font-size: 17px;
}

.why-card p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 10px;
}


/* ============================================
   SERVICES / PRICING CARDS
   ============================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

.service-card {
  scroll-margin-top: 90px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.service-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.service-card-head {
  padding: 22px 22px 18px;
  position: relative;
  border-bottom: 1px solid var(--line);
}

.service-card-head h3 {
  font-size: 18px;
  margin-top: 4px;
}

.service-card-head .tag {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.service-desc {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
  margin-top: 10px;
}

.badge-featured {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.service-card-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.price {
  font-family: 'Poppins', sans-serif;
  font-size: 25px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.price span {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 600;
  margin-top: 4px;
}

.service-card ul {
  list-style: none;
  margin-top: 16px;
  flex: 1;
}

.service-card ul li {
  font-size: 13px;
  color: var(--ink-soft);
  padding: 6px 0;
  display: flex;
  gap: 8px;
  line-height: 1.4;
}

.service-card ul li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.maintenance-banner {
  margin-top: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.maintenance-banner h4 {
  font-size: 16.5px;
}

.maintenance-banner p {
  color: var(--ink-soft);
  font-size: 13.5px;
  margin-top: 4px;
}


/* ============================================
   GALLERY — "Recent Jobs"
   ============================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.gallery-card {
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.gallery-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.gallery-caption {
  padding: 18px 20px;
}

.gallery-caption .car-name {
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}

.gallery-caption .car-service {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 6px;
  line-height: 1.5;
}


/* ============================================
   BEFORE & AFTER SLIDER
   Drag (or tap-drag on touch) to compare. The
   draggable surface is a plain <input type="range">
   stretched invisibly over the whole panel — its
   value drives the "after" image's clip-path and
   the handle's position via JS.
   ============================================ */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ba-slider {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: ew-resize;
  user-select: none;
}

.ba-slider-image {
  position: absolute;
  inset: 0;
}
.ba-slider-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ba-slider-image--after {
  clip-path: inset(0 0 0 50%);
}

.ba-label {
  position: absolute;
  top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(5, 6, 7, 0.65);
  color: #fff;
}
.ba-label--before { left: 14px; }
.ba-label--after { right: 14px; }

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  pointer-events: none;
}
.ba-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
}
.ba-handle .icon {
  position: absolute;
  top: 50%;
  left: 0;
  width: 34px;
  height: 34px;
  padding: 8px;
  margin: 0;
  transform: translate(-50%, -50%) rotate(90deg);
  background: #fff;
  color: var(--ink);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  z-index: 4;
}

@media (max-width: 700px) {
  .ba-grid { grid-template-columns: 1fr; }
}


/* ============================================
   REVIEWS
   ============================================ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.review-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px;
}

.review-card .stars {
  color: var(--accent);
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.review-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
}

.review-author {
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.review-vehicle {
  font-size: 12px;
  color: var(--ink-soft);
}


/* ============================================
   FAQ — native <details>/<summary>, no JS needed
   ============================================ */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.2s;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  padding: 0 4px 22px;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.7;
}


/* ============================================
   CONTACT SECTION
   ============================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact-row {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.contact-row:first-child {
  padding-top: 0;
}

.contact-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-icon .icon {
  margin-right: 0;
}

.contact-label {
  font-size: 11.5px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.contact-value {
  font-size: 16px;
  margin-top: 4px;
  font-weight: 600;
  color: var(--ink);
}

.contact-value a:hover {
  color: var(--accent);
}

.contact-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 30px;
}

.contact-map {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  filter: grayscale(0.3) contrast(1.05);
}

.contact-map iframe {
  display: block;
}

.form-row {
  margin-bottom: 16px;
}

.form-row label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 7px;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  background: var(--black);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-row textarea {
  resize: vertical;
  min-height: 90px;
}

.contact-form .btn {
  width: 100%;
  border: none;
}

.form-status {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  min-height: 1px;
}
.form-status--success { color: #4ADE80; }
.form-status--error { color: #F87171; }

.form-terms-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.5;
  text-align: center;
}
.form-terms-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ============================================
   FOOTER
   ============================================ */
footer {
  background: var(--black);
  border-top: 1px solid var(--line);
  padding: 56px 0 24px;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}

.footer-brand .logo {
  margin-bottom: 14px;
}

.footer-blurb {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 260px;
}

.footer-col h4 {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a,
.footer-static {
  color: var(--ink-soft);
  font-size: 13.5px;
}

.footer-col a:hover {
  color: #fff;
}

.footer-copyright {
  color: var(--ink-faint);
  font-size: 12.5px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}


/* ============================================
   RESPONSIVE — tablet and mobile
   ============================================ */
@media (max-width: 960px) {
  .menu-toggle { display: flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--black);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 16px;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a:last-child { border-bottom: none; margin-top: 12px; }
  .nav-links .btn { justify-content: center; }
  .nav-phone { border-bottom: 1px solid var(--line); }

  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-columns { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .trust-grid { gap: 12px 24px; }
}

@media (max-width: 600px) {
  .process-grid { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .footer-columns { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .trust-item { font-size: 13px; }
}


/* ============================================
   SCROLL REVEAL
   A single fade-and-rise applied to major section
   blocks as they enter the viewport — see the script
   at the bottom of the page for the IntersectionObserver
   that adds "is-visible" once, on first entry. Skipped
   entirely (elements shown immediately) when the visitor
   has "reduce motion" turned on.
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* Accessibility: visible focus outline for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ---- Sticky mobile CTA bar — mobile only, fixed to bottom ---- */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 700px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--panel);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  }

  /* keep the footer clear of the fixed bar */
  footer { padding-bottom: 64px; }
}

.mobile-cta-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  border-right: 1px solid var(--line);
}

.mobile-cta-item:last-child {
  border-right: none;
}

.mobile-cta-item .icon {
  width: 20px;
  height: 20px;
  margin-right: 0;
}

.mobile-cta-item--primary {
  background: var(--accent);
  color: #fff;
}

/* ---- Soft accent glow — quiet visual interest behind everything,
   mostly noticeable in the empty margins either side of the content
   column on wide screens (opaque section/card backgrounds cover it
   everywhere else). ---- */
.bg-texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(760px 760px at 6% 12%, rgba(59, 130, 246, 0.22), transparent 70%),
    radial-gradient(840px 840px at 96% 88%, rgba(59, 130, 246, 0.20), transparent 70%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 42px
    );
}