/* ============================================================
   One Stop Waterproofing & Restoration
   styles.css - shared design system for the standalone build.
   Pages: index.html, book-now.html, crawlspace-services.html
   All brand values are variables in :root so a final logo or
   colour swap touches this block only.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand colours, sampled from the client logo
     (black + blue gradient). Re-sample when the final logo
     file arrives and recheck the contrast pairs then. */
  --ink: #111111;          /* logo black: headings, top bar, footer bar */
  --blue-deep: #0057a8;    /* primary buttons, dark sections (white text 7.2:1) */
  --blue: #0072ce;         /* links, hovers, active states (4.9:1 on white) */
  --blue-bright: #00a9e0;  /* gradient end + decoration ONLY, never text (2.7:1) */
  --blue-pale: #e8f4fc;    /* light section tint */
  --white: #ffffff;        /* page background (light style, per brief) */
  --text: #1a1a1a;         /* body text on light backgrounds */
  --text-muted: #4d4d4d;   /* secondary text on light backgrounds */
  --text-on-dark: #ffffff; /* text on --blue-deep / --ink */
  --border: #cfdde8;       /* hairlines on light backgrounds */
  --gradient-brand: linear-gradient(90deg, var(--blue-deep), var(--blue-bright));

  /* Type, matching the live site's own Elementor kit:
     body text and buttons are Lato; headings and the main
     menu are Open Sans. Loaded as webfonts; system fallbacks
     keep the pages readable offline. */
  --font-sans: "Lato", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-heading: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-base: 1rem;         /* 16px */
  --fs-small: 0.875rem;
  --fs-h1: clamp(1.75rem, 4.5vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 3.5vw, 2.125rem);
  --fs-h3: 1.25rem;
  --lh-base: 1.6;
  --lh-tight: 1.2;
  --fw-regular: 400;
  /* 700, not 600: Lato has no 600 weight, so 600 rendered as a
     synthesized weight on buttons and labels. Open Sans 600 is
     loaded for headings that want it via --fw-semibold. */
  --fw-medium: 700;
  --fw-semibold: 600;
  --fw-bold: 800;

  /* Spacing scale */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-7: 4rem;     /* 64px */

  /* Shape + layout */
  --radius: 0.5rem;        /* 8px cards */
  --radius-lg: 0.75rem;    /* 12px large cards, CTA bands */
  --radius-pill: 999px;
  --container: 75rem;      /* 1200px content width */
  --shadow-card: 0 2px 10px rgba(17, 17, 17, 0.08);
  --tap-min: 2.75rem;      /* 44px minimum tap target */
  --transition: 160ms ease-in-out;
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--white);
}

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

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: var(--lh-tight);
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--space-3); }
a { color: var(--blue); }

/* Visible keyboard focus everywhere (WCAG 2.1 AA) */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* Screen-reader-only text (star rating labels, etc.) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link, first tab stop on every page */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-3); color: var(--white); }

/* ---------- 3. Layout ---------- */
.container {
  width: min(100% - 2 * var(--space-3), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--space-6); }
.section--tint { background: var(--blue-pale); }

/* Section eyebrow label. On the live site these are divs,
   not headings; kept as labels here to stay 1:1. */
.eyebrow {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: var(--space-2);
}

/* ---------- 4. Buttons + links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem; /* 48px */
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.btn--primary { background: var(--blue-deep); color: var(--white); }
.btn--primary:hover { background: var(--blue); color: var(--white); }
.btn--secondary {
  background: var(--white);
  color: var(--blue-deep);
  border-color: var(--blue-deep);
}
.btn--secondary:hover { background: var(--blue-pale); color: var(--blue-deep); }
.btn--light { background: var(--white); color: var(--blue-deep); }
.btn--light:hover { background: var(--blue-pale); color: var(--blue-deep); }

/* ---------- 5. Top bar (division switcher, every page) ---------- */
.topbar {
  background: var(--ink);
  color: var(--white);
  font-size: var(--fs-small);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-2);
}
.topbar__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-right: auto;
}
.topbar a {
  color: var(--white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}
.topbar a:hover { text-decoration: underline; }
.topbar__division {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.division-pill {
  background: var(--blue);
  color: var(--white);
  font-weight: var(--fw-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.topbar__crosslink { font-weight: var(--fw-medium); }

/* ---------- 6. Header ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-3);
}
.site-logo { display: inline-flex; }
.site-logo img { height: 4rem; width: auto; }

.main-nav { margin-left: auto; }
.main-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  font-family: var(--font-heading);
  color: var(--text);
  text-decoration: none;
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  border-bottom: 3px solid transparent;
}
.main-nav a:hover { color: var(--blue-deep); }
.main-nav a[aria-current="page"] {
  color: var(--blue-deep);
  border-bottom-color: var(--blue);
}

/* ---------- 7. Footer ---------- */
.site-footer {
  background: var(--blue-deep);
  color: var(--text-on-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
}
.footer-brand__card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: inline-block;
}
.footer-brand__card img { height: 4.5rem; width: auto; }
.footer-brand__badges {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.footer-badge { height: 4.5rem; width: auto; }
.site-footer h3 { color: var(--white); }
.site-footer a { color: var(--white); }
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.footer-links a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}
.footer-links a:hover { text-decoration: underline; }
.footer-contact { display: grid; gap: var(--space-3); }
.footer-contact__row { display: grid; gap: var(--space-1); }
.footer-contact__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-bottom {
  background: var(--ink);
  color: var(--white);
  font-size: var(--fs-small);
}
.footer-bottom__inner { padding-block: var(--space-3); }
.footer-bottom p { margin: 0; }

/* ---------- 8. Cards + CTA components ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  color: var(--text);
}
.card h3 { color: var(--ink); }

/* Service cards: equal heights per row, button pinned to the
   bottom so the four Book Now buttons line up. */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.service-card .btn { margin-top: auto; align-self: flex-start; }
.service-card img {
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.trust-card { text-align: left; }
/* Trust card titles are styled text, not headings: on the live
   site they are not headings either, and as headings they would
   skip a level under the H1. */
.trust-card__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: var(--fw-medium);
  color: var(--ink);
  margin: 0;
}
.trust-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius);
  background: var(--gradient-brand);
  margin-bottom: var(--space-2);
}
.trust-card__icon svg {
  width: 1.5rem; height: 1.5rem;
  stroke: var(--white);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Cross-site CTA band (deep blue) */
.cta-band {
  background: var(--blue-deep);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.cta-band h2, .cta-band h3 { color: var(--white); }

/* "Do You Have Any Other Questions?" card */
.cta-card {
  background: var(--blue-deep);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.cta-card h2, .cta-card h3 { color: var(--white); }

/* ---------- 9. Reviews ---------- */
.review-card { display: grid; gap: var(--space-2); }
.review-card blockquote { margin: 0; }
.review-card cite { font-style: normal; font-weight: var(--fw-medium); }
.review-source { margin: 0; color: var(--text-muted); font-size: 0.875rem; }
.google-grid { margin-bottom: var(--space-4); }
.area-cities { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.area-cities ul { margin: 0; padding-left: var(--space-3); display: grid; gap: var(--space-1); }
@media (min-width: 768px) {
  .area-cities { grid-template-columns: 1fr 1fr; }
}
.stars {
  color: var(--blue);
  font-size: 1.125rem;
  letter-spacing: 0.15em;
  line-height: 1;
}
.stars__empty { opacity: 0.35; }
.review-source {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ---------- 10. FAQ (native details, no JS) ---------- */
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  background: var(--white);
}
.faq-item summary {
  cursor: pointer;
  font-weight: var(--fw-medium);
  padding: var(--space-3) var(--space-4);
  min-height: var(--tap-min);
}
.faq-item__body { padding: 0 var(--space-4) var(--space-3); }

/* ---------- 11. Responsive steps ---------- */
/* 768px and up: two-column trust grid, wider footer */
@media (min-width: 768px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .section { padding-block: var(--space-7); }
}

/* 1024px and up: four trust cards in a row */
@media (min-width: 1024px) {
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
}

/* 1440px and up: container stays capped, type scale holds.
   Rule present so the 1440 test width is an explicit case. */
@media (min-width: 1440px) {
  .container { width: min(100% - 2 * var(--space-5), var(--container)); }
}

/* ---------- 12. Page components ---------- */
.site-footer .footer-heading {
  font-size: var(--fs-h3);
  color: var(--white);
  margin-bottom: var(--space-3);
}

.hero { padding-block: var(--space-6); }
/* Photo hero (Home): the live site's own hero photo under a light
   overlay, so the new light brand keeps the live composition. */
.hero--photo { position: relative; overflow: hidden; background: var(--blue-pale); }
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(232, 244, 252, 0.97) 30%, rgba(232, 244, 252, 0.88) 58%, rgba(232, 244, 252, 0.62) 100%);
}
.hero__content { position: relative; z-index: 2; }
.hero--photo .trust-card { background: rgba(255, 255, 255, 0.92); }
@media (max-width: 767px) {
  .hero--photo::before {
    background: linear-gradient(180deg, rgba(232, 244, 252, 0.94) 0%, rgba(232, 244, 252, 0.84) 100%);
  }
}
.hero__badge {
  display: inline-block;
  background: var(--blue-pale);
  color: var(--ink);
  font-weight: var(--fw-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.hero__sub {
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
/* About: text and photo side by side on wide screens, matching
   the live layout where this photo sits in the About section. */
.about-grid { display: grid; gap: var(--space-5); }
.about-figure { margin: 0; }
.about-figure img {
  border-radius: var(--radius-lg);
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.section-more { margin-top: var(--space-4); font-weight: var(--fw-medium); }

/* Why Choose Us: points list with the photo as a contained side
   column on wide screens, matching the live layout. The photo is
   portrait, so it is cropped with object-fit, never full height. */
.why-grid { display: grid; gap: var(--space-5); margin-bottom: var(--space-4); }
.why-figure { margin: 0; }
.why-figure img {
  border-radius: var(--radius-lg);
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.why-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .why-grid { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
  .why-figure img { aspect-ratio: auto; height: 100%; max-height: 560px; }
}

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.google-reviews { margin-top: var(--space-5); }

.page-hero {
  background: var(--blue-pale);
  padding-block: var(--space-6);
}
.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.form-heading { margin-top: var(--space-5); }
.form-embed { margin-bottom: var(--space-5); }

.related-heading { margin-top: var(--space-5); }
.related-links { display: grid; gap: var(--space-2); }

@media (min-width: 768px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-points { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  /* Services stay 2x2 like the live site: at 4 across the
     text-heavy cards turn into narrow, very tall columns. */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
  /* Inside the half-width why column the points stack in one list. */
  .why-points { grid-template-columns: 1fr; }
}

/* Small screens: top bar stacks, cross link stays visible */
@media (max-width: 767px) {
  .topbar__inner { flex-direction: column; align-items: flex-start; }
  .topbar__contact { margin-right: 0; }
  .site-logo img { height: 3.25rem; }
  .main-nav { margin-left: 0; width: 100%; }
}

/* ================================================================
   DESIGN UPGRADE LAYER (user-directed, 2026-10-22)
   The original brief was colour-swap only; the user rejected the
   flat result and directed a full design upgrade instead: motion,
   hover states, depth and polish, same content and structure.
   Everything below layers over the base rules above.
   ================================================================ */

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 6.5rem; }
::selection { background: var(--blue); color: var(--white); }
h1, h2 { text-wrap: balance; letter-spacing: -0.01em; }

/* Sticky header with blur and a shadow once the page scrolls. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 0.3s ease;
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(0, 40, 80, 0.12); }
.site-logo img { transition: transform 0.3s ease; }
.site-logo:hover img { transform: scale(1.03); }

/* Nav: underline that grows from the left on hover. */
.main-nav a { position: relative; }
.main-nav a::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: 0.45rem;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
/* The base layer also underlines the current page with a border;
   keep only the animated bar. */
.main-nav a[aria-current="page"] { border-bottom-color: transparent; }
/* On small screens the sticky header wraps to two rows, so anchor
   jumps need a taller offset. */
@media (max-width: 767px) {
  section[id] { scroll-margin-top: 11rem; }
}

/* Buttons: gradient, lift and shadow on hover, arrow glide. */
.btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.btn--primary {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%);
  box-shadow: 0 4px 14px rgba(0, 87, 168, 0.28);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 87, 168, 0.34);
}
.btn--primary::after, .btn--light::after {
  content: "→";
  margin-left: var(--space-2);
  transition: transform 0.25s ease;
}
.btn--primary:hover::after, .btn--light:hover::after { transform: translateX(3px); }
.btn--secondary { transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; }
.btn--secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 40, 80, 0.14); }
.btn--light { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.btn--light:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22); }
.btn:active { transform: translateY(0); }

/* Cards: lift and deepen on hover; service photos zoom gently. */
.card { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0, 40, 80, 0.14);
  border-color: var(--blue-bright);
}
.service-card { overflow: hidden; }
.service-card img { transition: transform 0.6s ease; }
.service-card:hover img { transform: scale(1.05); }
.trust-card__icon { transition: transform 0.35s ease; }
.trust-card:hover .trust-card__icon { transform: scale(1.1) rotate(-4deg); }
.review-card { position: relative; }
.review-card::before {
  content: "“";
  position: absolute;
  top: 0.4rem;
  right: 1rem;
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 1;
  color: var(--blue-pale);
  z-index: 0;
}
.review-card > *:not(.sr-only) { position: relative; z-index: 1; }

/* Why points: accent bar that fills on hover. */
.why-point {
  border-left: 3px solid var(--blue-pale);
  padding-left: var(--space-3);
  transition: border-color 0.3s ease, background-color 0.3s ease;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.why-point:hover { border-left-color: var(--blue); background: rgba(232, 244, 252, 0.5); }

/* Eyebrow with a leading rule. */
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); }
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
}

/* Hero motion: slow zoom on the photo, staggered entrance. */
.hero__bg { animation: heroZoom 26s ease-in-out infinite alternate; }
@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.hero__content > * { animation: riseIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero__content > *:nth-child(2) { animation-delay: 0.12s; }
.hero__content > *:nth-child(3) { animation-delay: 0.24s; }
.hero__content > *:nth-child(4) { animation-delay: 0.36s; }
.hero__content > *:nth-child(5) { animation-delay: 0.48s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
.hero__badge { position: relative; padding-left: var(--space-4); }
.hero__badge::before {
  content: "";
  position: absolute;
  left: var(--space-2);
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.275rem;
  border-radius: 50%;
  background: var(--blue);
  animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 114, 206, 0.45); }
  55% { box-shadow: 0 0 0 7px rgba(0, 114, 206, 0); }
}

/* Page hero (Book Now, Crawlspace): gradient wash and accent edge. */
.page-hero {
  background: linear-gradient(120deg, var(--blue-pale) 0%, var(--white) 78%);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--blue-deep), var(--blue-bright)) 1;
}

/* FAQ: card hover, rotating plus, soft open animation. */
.faq-item { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.faq-item:hover { border-color: var(--blue-bright); box-shadow: 0 10px 24px rgba(0, 40, 80, 0.08); }
.faq-item summary { position: relative; padding-right: var(--space-5); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  font-weight: var(--fw-regular);
  color: var(--blue);
  transition: transform 0.3s ease;
}
.faq-item details[open ] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item details[open ] .faq-item__body { animation: riseIn 0.45s ease both; }

/* CTA blocks: layered gradient with a soft light bloom. */
.cta-card, .cta-band { position: relative; overflow: hidden; }
.cta-card::before, .cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 220px at 88% -10%, rgba(255, 255, 255, 0.22), transparent 70%),
    radial-gradient(360px 200px at -5% 115%, rgba(0, 169, 224, 0.35), transparent 70%);
  pointer-events: none;
}
.cta-card > *, .cta-band > * { position: relative; }

/* Google reviews block: framed panel. */
.google-reviews {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(0, 40, 80, 0.07);
}

/* Footer: gradient hairline on top, links glide on hover. */
.site-footer { position: relative; }
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue-bright), var(--blue-deep));
}
.footer-links a { transition: padding-left 0.25s ease, color 0.25s ease; }
.footer-links a:hover { padding-left: 0.35rem; color: var(--blue-deep); text-decoration: none; }
.footer-contact a { transition: color 0.25s ease; }

/* Reveal on scroll (JS adds .in; no-JS and reduced-motion safe).
   Uses the standalone `translate` property, NOT `transform`, so
   the reveal can never override the card hover lift (transform),
   and the transition list covers both systems' properties. */
.js .reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.8s ease, translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease,
    background-color 0.35s ease;
  transition-delay: var(--d, 0s);
}
.js .reveal.in { opacity: 1; translate: 0 0; }

/* Section headings get a touch more presence. */
.section h2 { margin-bottom: var(--space-4); }
.section-more a, .related-links a { transition: color 0.25s ease, padding-left 0.25s ease; }
.section-more a:hover, .related-links a:hover { padding-left: 0.3rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; translate: none; }
  .hero__bg { animation: none; }
}

/* ============================================================
   ELEMENTOR BRIDGE (appended for the WordPress kit build)
   The frozen stylesheet above is unchanged. The rules below
   only retarget layout containers to Elementor markup
   (.elementor-container / widget wrappers) with the SAME
   values, and neutralise Elementor defaults inside kit
   sections. No visual value is altered.
   ============================================================ */
.elementor-section.hero > .elementor-container, .elementor-section.page-hero > .elementor-container, .elementor-section.section > .elementor-container, .elementor-section.topbar > .elementor-container, .elementor-section.site-header > .elementor-container, .elementor-section.site-footer > .elementor-container, .elementor-section.footer-bottom > .elementor-container { width: min(1200px, 100% - 3rem); margin-inline: auto; }
.hero .elementor-widget, .page-hero .elementor-widget, .section .elementor-widget, .topbar .elementor-widget, .site-header .elementor-widget, .site-footer .elementor-widget, .footer-bottom .elementor-widget { margin-bottom: 0; }
.hero .elementor-column, .page-hero .elementor-column, .section .elementor-column, .topbar .elementor-column, .site-header .elementor-column, .site-footer .elementor-column, .footer-bottom .elementor-column { min-height: 0; }
.hero .elementor-widget-wrap, .page-hero .elementor-widget-wrap, .section .elementor-widget-wrap, .topbar .elementor-widget-wrap, .site-header .elementor-widget-wrap, .site-footer .elementor-widget-wrap, .footer-bottom .elementor-widget-wrap { padding: 0; align-content: flex-start; }
.trust-grid > .elementor-container { display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3); }
.trust-grid > .elementor-container { grid-template-columns: repeat(2, 1fr); }
.trust-grid > .elementor-container { grid-template-columns: repeat(4, 1fr); }
.services-grid > .elementor-container { display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4); }
.services-grid > .elementor-container { grid-template-columns: repeat(2, 1fr); }
.reviews-grid > .elementor-container { display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4); }
.reviews-grid > .elementor-container { grid-template-columns: repeat(2, 1fr); }
.reviews-grid > .elementor-container { grid-template-columns: repeat(3, 1fr); }
.google-grid > .elementor-container { margin-bottom: var(--space-4); }
.contact-cards > .elementor-container { display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5); }
.contact-cards > .elementor-container { grid-template-columns: repeat(2, 1fr); }
.area-cities > .elementor-container { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.area-cities > .elementor-container { grid-template-columns: 1fr 1fr; }
.footer-grid > .elementor-container { display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6); }
.footer-grid > .elementor-container { grid-template-columns: 1.2fr 1fr 1fr; }
.about-grid > .elementor-container { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
.why-grid > .elementor-container { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
.why-points > .elementor-container { display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4); }
.why-points > .elementor-container { grid-template-columns: repeat(2, 1fr); }
.hero__actions > .elementor-container { display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5); }
.elementor-widget-button.btn .elementor-button--primary { background: var(--blue-deep); color: var(--white); }
.elementor-widget-button.btn .elementor-button--primary:hover { background: var(--blue); color: var(--white); }
.elementor-widget-button.btn .elementor-button--secondary { background: var(--white);
  color: var(--blue-deep);
  border-color: var(--blue-deep); }
.elementor-widget-button.btn .elementor-button--secondary:hover { background: var(--blue-pale); color: var(--blue-deep); }
.elementor-widget-button.btn .elementor-button--light { background: var(--white); color: var(--blue-deep); }
.elementor-widget-button.btn .elementor-button--light:hover { background: var(--blue-pale); color: var(--blue-deep); }
.elementor-widget-button.btn .elementor-button--primary { background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%);
  box-shadow: 0 4px 14px rgba(0, 87, 168, 0.28); }
.elementor-widget-button.btn .elementor-button--primary:hover { background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 87, 168, 0.34); }
.elementor-widget-button.btn .elementor-button--primary::after, .btn--light::after { content: "→";
  margin-left: var(--space-2);
  transition: transform 0.25s ease; }
.elementor-widget-button.btn .elementor-button--primary:hover::after, .btn--light:hover::after { transform: translateX(3px); }
.elementor-widget-button.btn .elementor-button--secondary { transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; }
.elementor-widget-button.btn .elementor-button--secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 40, 80, 0.14); }
.elementor-widget-button.btn .elementor-button--light { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.elementor-widget-button.btn .elementor-button--light:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22); }
.elementor-widget-button.btn .elementor-button:active { transform: translateY(0); }
.elementor-widget-button .elementor-button { width: 100%; }
.main-nav ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.main-nav .elementor-nav-menu--main .elementor-item { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--ink); }
.faq-list .elementor-accordion-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--space-3); background: #ffffff; overflow: hidden; }
.faq-list .elementor-tab-title { font-family: var(--font-heading); font-weight: var(--fw-semibold); padding: 1.1rem 1.25rem; }
.faq-list .elementor-tab-content { padding: 0 1.25rem 1.25rem; border-top: none; }
.faq-list .elementor-accordion-icon { display: none; }

/* ================================================================
   Elementor bridge II: header and footer structure.
   The frozen layout classes sit on Elementor sections, but the
   children Elementor actually lays out live in .elementor-container
   and .elementor-widget-wrap. These rules put each layout on the
   node Elementor renders, with the frozen values.
   ================================================================ */
.topbar__inner > .elementor-container > .elementor-column > .elementor-widget-wrap,
.site-header__inner > .elementor-container > .elementor-column > .elementor-widget-wrap,
.footer-brand__badges > .elementor-container > .elementor-column > .elementor-widget-wrap {
  flex-direction: row;
  align-items: center;
}
.topbar__inner .elementor-widget,
.site-header__inner .elementor-widget,
.footer-brand__badges .elementor-widget { width: auto; }
.topbar__inner > .elementor-container > .elementor-column > .elementor-widget-wrap { justify-content: space-between; }
.site-header__inner > .elementor-container > .elementor-column > .elementor-widget-wrap { gap: var(--space-3) var(--space-5); }
.site-header__inner .elementor-widget-nav-menu { flex: 1 1 auto; }
.footer-brand__badges > .elementor-container > .elementor-column > .elementor-widget-wrap { gap: var(--space-3); }
.footer-badge img { height: 4.5rem; width: auto; }
.footer-grid > .elementor-container { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.footer-grid .elementor-column { width: auto; }
@media (min-width: 768px) {
  .footer-grid > .elementor-container { grid-template-columns: 1.2fr 1fr 1fr; }
}
/* Sticky header: the whole header part sticks, offset by the
   topbar height (3.75rem) so the topbar scrolls away first,
   exactly like the static site. */
header.elementor[data-elementor-type="header"] {
  position: sticky;
  top: -3.75rem;
  z-index: 60;
}
/* Nav menu: the frozen .main-nav link design mapped onto the
   Elementor Pro nav menu markup. */
.main-nav .elementor-nav-menu .menu-item a.elementor-item {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  color: var(--text);
  text-decoration: none;
  min-height: var(--tap-min);
  position: relative;
}
.main-nav .elementor-nav-menu .menu-item a.elementor-item::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: 0.45rem;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
  opacity: 1;
}
.main-nav .elementor-nav-menu .menu-item a.elementor-item:hover,
.main-nav .elementor-nav-menu a.elementor-item-active { color: var(--blue-deep); }
.main-nav .elementor-nav-menu .menu-item a.elementor-item:hover::after,
.main-nav .elementor-nav-menu a.elementor-item-active::after { transform: scaleX(1); }

/* ================================================================
   Elementor bridge III: buttons on the real anchor, header and
   footer column alignment, FAQ marker.
   The frozen .btn classes land on the Elementor button widget
   wrapper, so the wrapper is neutralised and the full button
   design is applied to the anchor Elementor actually renders.
   ================================================================ */
.elementor-widget-button.btn { display: inline-flex; background: none; box-shadow: none; padding: 0; min-height: 0; border: none; border-radius: 0; }
.elementor-widget-button.btn .elementor-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius); border: 2px solid transparent;
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium);
  text-decoration: none; width: auto;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.elementor-widget-button.btn--primary .elementor-button { background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%); color: var(--white); box-shadow: 0 4px 14px rgba(0, 87, 168, 0.28); }
.elementor-widget-button.btn--primary .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 87, 168, 0.34); color: var(--white); }
.elementor-widget-button.btn--primary .elementor-button::after,
.elementor-widget-button.btn--light .elementor-button::after { content: "→"; margin-left: var(--space-2); transition: transform 0.25s ease; }
.elementor-widget-button.btn--primary .elementor-button:hover::after,
.elementor-widget-button.btn--light .elementor-button:hover::after { transform: translateX(3px); }
.elementor-widget-button.btn--secondary .elementor-button { background: var(--white); color: var(--blue-deep); border-color: var(--blue-deep); }
.elementor-widget-button.btn--secondary .elementor-button:hover { background: var(--blue-pale); color: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 40, 80, 0.14); }
.elementor-widget-button.btn--light .elementor-button { background: var(--white); color: var(--blue-deep); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.elementor-widget-button.btn--light .elementor-button:hover { background: var(--blue-pale); color: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22); }
.topbar__inner .elementor-column:last-child .topbar__division { justify-content: flex-end; }
.main-nav .elementor-nav-menu { justify-content: flex-end; }
.site-header__inner .elementor-column:last-child .elementor-button-wrapper { text-align: right; }
.faq-list .elementor-tab-title { position: relative; }
.faq-list .elementor-tab-title::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-weight: 400; transition: transform 0.25s ease; }
.faq-list .elementor-tab-title.elementor-active::after { transform: translateY(-50%) rotate(45deg); }

/* ================================================================
   Elementor bridge IV: theme collisions, width caps, typography.
   Hello Elementor styles .site-header and .site-footer as its own
   theme parts (flex, padding, and max-width caps up to 1140px);
   the design uses the same class names, so those rules are
   neutralised on the kit's sections. Elementor's generated widget
   CSS also outranks the frozen element selectors, so the design
   typography is restated at higher specificity.
   ================================================================ */
.elementor-section.site-header, .elementor-section.site-footer { max-width: none; }
.elementor-section.site-header { display: block; padding: 0; position: relative; }
.elementor-section.site-footer { padding: 0; }
.elementor .site-logo img { height: 4rem; width: auto; }
@media (max-width: 767px) { .elementor .site-logo img { height: 3.25rem; } }
.elementor h1.elementor-heading-title, .elementor h2.elementor-heading-title { font-family: var(--font-heading); font-weight: var(--fw-bold); }
.elementor h3.elementor-heading-title, .elementor h4.elementor-heading-title { font-family: var(--font-heading); font-weight: var(--fw-semibold); }
.elementor .elementor-widget-text-editor { font-family: var(--font-body); }
.elementor .site-footer .elementor-heading-title { color: var(--white); }
.elementor .section .elementor-widget-text-editor a { color: var(--blue); }

/* ================================================================
   Elementor bridge V: cascade order fallout, full-bleed hero,
   nav item sizing. Elementor's frontend stylesheet prints after
   this file, so the rules that must beat it carry an extra class
   of specificity; the plugin also enqueues this stylesheet after
   Elementor's. The hero background widget is positioned against
   its widget wrap in Elementor (wraps are position:relative), so
   it is broken out to the full viewport width from the centred
   column, exactly as the frozen img spans the section.
   ================================================================ */
body .elementor-section.site-header, body .elementor-section.site-footer { max-width: none; }
.elementor .hero__bg { left: calc(50% - 50vw); right: auto; width: 100vw; }
.elementor .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.elementor .main-nav .elementor-nav-menu .elementor-item { font-family: var(--font-heading); font-weight: var(--fw-medium); }
.elementor .main-nav .elementor-nav-menu--main .elementor-nav-menu { gap: var(--space-2) var(--space-4); }
.elementor .elementor-button { white-space: nowrap; }
.elementor .elementor-widget-text-editor a { color: var(--blue); }

/* ================================================================
   Elementor bridge VI: stacking and footer menu colour. In the
   frozen page the trust grid sits inside .hero__content, which
   carries z-index 2 over the hero veil; in the kit it is a sibling
   inner section, so it gets the same lift explicitly. Elementor's
   generated nav-menu rule colours menu items with the global text
   colour, which is wrong on the dark footer.
   ================================================================ */
.elementor .trust-grid { position: relative; z-index: 2; }
.elementor .site-footer .elementor-nav-menu .elementor-item { color: var(--white); }
.elementor .main-nav .elementor-nav-menu .menu-item { margin: 0; }

/* ================================================================
   Elementor bridge VII: deep-audit fixes. The bridge I grid rules
   were flat (desktop templates at every width); the frozen design
   is mobile-first, so every grid container's templates are
   restated here with their exact breakpoints, and the grids the
   flat block missed get their display and gap. Also: stacking
   lifts the frozen CSS gives direct children (review-card,
   cta-card, cta-band) are retargeted to the Elementor wrap and
   container, the hero entrance animation reaches the hero
   widgets, footer text links stay white, and service-card
   buttons pin to the card foot like the frozen flex cards.
   ================================================================ */
.trust-grid > .elementor-container { grid-template-columns: 1fr; }
.services-grid > .elementor-container { grid-template-columns: 1fr; }
.reviews-grid > .elementor-container { grid-template-columns: 1fr; }
.contact-cards > .elementor-container { grid-template-columns: 1fr; }
.area-cities > .elementor-container { grid-template-columns: 1fr; }
.footer-grid > .elementor-container { grid-template-columns: 1fr; }
.why-points > .elementor-container { grid-template-columns: 1fr; }
.about-grid > .elementor-container { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.why-grid > .elementor-container { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.footer-contact > .elementor-container { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 768px) {
  .trust-grid > .elementor-container { grid-template-columns: repeat(2, 1fr); }
  .services-grid > .elementor-container { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid > .elementor-container { grid-template-columns: repeat(2, 1fr); }
  .contact-cards > .elementor-container { grid-template-columns: repeat(2, 1fr); }
  .area-cities > .elementor-container { grid-template-columns: 1fr 1fr; }
  .footer-grid > .elementor-container { grid-template-columns: 1.2fr 1fr 1fr; }
  .about-grid > .elementor-container { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .why-grid > .elementor-container { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
  .why-points > .elementor-container { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .trust-grid > .elementor-container { grid-template-columns: repeat(4, 1fr); }
  .reviews-grid > .elementor-container { grid-template-columns: repeat(3, 1fr); }
  .why-points > .elementor-container { grid-template-columns: 1fr; }
}
.elementor .review-card .elementor-widget-wrap > * { position: relative; z-index: 1; }
.elementor .cta-card .elementor-widget-wrap > * { position: relative; }
.elementor .cta-band > .elementor-container { position: relative; }
.elementor .hero__content .elementor-widget-wrap > * { animation: riseIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.elementor .hero__content .elementor-widget-wrap > *:nth-child(2) { animation-delay: 0.12s; }
.elementor .hero__content .elementor-widget-wrap > *:nth-child(3) { animation-delay: 0.24s; }
.elementor .hero__content .elementor-widget-wrap > *:nth-child(4) { animation-delay: 0.36s; }
.elementor .hero__content .elementor-widget-wrap > *:nth-child(5) { animation-delay: 0.48s; }
.elementor .site-footer .elementor-widget-text-editor a { color: var(--white); }
.elementor .service-card .elementor-widget-button { margin-top: auto; align-self: flex-start; }
.elementor .main-nav .elementor-nav-menu { margin: 0; padding: 0; list-style: none; }

/* ================================================================
   Elementor bridge VIII: menu item geometry and dark-context
   text. Elementor Pro's menu stylesheet pads every item 13px
   20px and grows items to fill the row; the frozen design pads
   items zero and sizes them by content, which is what lets all
   seven items fit the header row. On dark sections the design
   colours text by inheritance from the section; Elementor's
   generated widget rules colour text widgets with the global
   text colour instead, so the design colour is restated.
   ================================================================ */
.elementor .main-nav .elementor-nav-menu--main .elementor-nav-menu .elementor-item { padding: 0; min-height: var(--tap-min); flex-grow: 0; }
.elementor .site-footer .elementor-widget-text-editor, .elementor .cta-band .elementor-widget-text-editor, .elementor .cta-card .elementor-widget-text-editor { color: var(--text-on-dark); }
.elementor .footer-bottom .elementor-widget-text-editor { color: var(--white); }
.elementor .cta-band .elementor-heading-title, .elementor .cta-card .elementor-heading-title { color: var(--text-on-dark); }

/* ================================================================
   Elementor bridge IX: two structural collisions.
   1. The frozen grid rules use the design class as the grid
      element; in Elementor that class sits on the SECTION and
      its only child is the .elementor-container, so the section
      became a grid and squeezed its container into one track.
      Sections stay block; the container carries the layout.
   2. Elementor's base stylesheet gives every column
      width: 100%, which inside a grid resolves against the
      container and collapses the item to its content. Grid
      columns take their track width instead.
   3. Raw .btn anchors inside text widgets (hero actions, card
      buttons) were recoloured by the bridge V text-link rule;
      the frozen button colours are restated for them.
   ================================================================ */
.elementor .elementor-section { display: block; }
.elementor .trust-grid > .elementor-container > .elementor-column, .elementor .services-grid > .elementor-container > .elementor-column, .elementor .reviews-grid > .elementor-container > .elementor-column, .elementor .contact-cards > .elementor-container > .elementor-column, .elementor .area-cities > .elementor-container > .elementor-column, .elementor .about-grid > .elementor-container > .elementor-column, .elementor .why-grid > .elementor-container > .elementor-column, .elementor .why-points > .elementor-container > .elementor-column, .elementor .footer-grid > .elementor-container > .elementor-column, .elementor .footer-contact > .elementor-container > .elementor-column { width: auto; }
.elementor .elementor-widget-text-editor a.btn--primary { color: var(--white); }
.elementor .elementor-widget-text-editor a.btn--secondary, .elementor .elementor-widget-text-editor a.btn--light { color: var(--blue-deep); }

/* ================================================================
   Elementor bridge X: typography and eyebrow parity.
   Heading widgets render with line-height 1 in WordPress (the
   kit typography carries no line-height and the theme default
   wins); the frozen design sets every heading at 1.2. The
   eyebrow class lands on the text widget while its text sits in
   a bare inner paragraph, so the frozen weight and the zero
   paragraph margin are restated where the text actually is.
   ================================================================ */
.elementor .elementor-heading-title { line-height: 1.2; }
.elementor .elementor-widget-text-editor.eyebrow { font-weight: var(--fw-medium); }
.elementor .eyebrow p { margin: 0; }

/* ================================================================
   Elementor bridge XI: heading rhythm and header geometry.
   Elementor's frontend reset zeroes every heading title's
   margin, which ate the design's base rhythm (headings carry
   margin-bottom space-3, section h2s space-4); both are
   restated. Footer headings are sized by the design's
   footer-heading class, not the global h2 size. The footer's
   grid padding lives on the container (bridge I); the frozen
   rule also pads the section, so the section's copy is removed.
   Eyebrows carry margin-bottom space-2 in the design. The
   header and top bar inners are space-between flex rows in the
   design, so their columns size to content instead of fixed
   percentages, putting the Get Started button flush right.
   ================================================================ */
.elementor .elementor-heading-title { margin: 0 0 var(--space-3); }
.elementor .section h2.elementor-heading-title { margin-bottom: var(--space-4); }
.elementor .footer-heading .elementor-heading-title { font-size: var(--fs-h3); }
.elementor .elementor-section.footer-grid { padding-block: 0; }
.elementor .eyebrow { margin-bottom: var(--space-2); }
.elementor .site-header__inner > .elementor-container, .elementor .topbar__inner > .elementor-container { justify-content: space-between; }
.elementor .site-header__inner > .elementor-container > .elementor-column, .elementor .topbar__inner > .elementor-container > .elementor-column { width: auto; }

/* ================================================================
   Elementor bridge XII: button pseudo-elements, header button
   centring, FAQ rhythm. Button widgets carry the design's .btn
   classes on the wrapper, so the frozen .btn--primary::after
   arrow renders a second time on the wrapper, widening it by
   24px and pushing the visible button off the header's right
   edge; the wrapper's pseudo-elements are suppressed (the
   anchor keeps its own arrow). The header button is centred
   in its row with auto margins. FAQ items take the design's
   summary padding, line height and item spacing.
   ================================================================ */
.elementor .elementor-widget-button.btn::before, .elementor .elementor-widget-button.btn::after { content: none; }
.elementor .site-header__inner .elementor-widget-button { margin-block: auto; }
.elementor .elementor-accordion .elementor-tab-title { padding-block: var(--space-3); line-height: 1.6; }
.elementor .elementor-accordion .elementor-accordion-title { line-height: 1.6; }
.elementor .faq-list .elementor-accordion-item { margin-bottom: var(--space-3); }

/* ================================================================
   Elementor bridge XIII: header centring and Why points gap.
   Classic column wraps are block boxes, so the bridge XII auto
   margins could not centre the header button; the header wraps
   become flex rows with centred items instead. The Why points
   stack in a block wrap in WordPress where the design spaces
   the points with a 24px grid gap; the wrap becomes a flex
   column with the same gap.
   ================================================================ */
.elementor .site-header__inner .elementor-widget-wrap { display: flex; align-items: center; }
.elementor .why-grid .elementor-column.why-points > .elementor-widget-wrap { display: flex; flex-direction: column; row-gap: var(--space-4); }

/* ================================================================
   Elementor bridge XIV: header wrap alignment, restated at
   higher specificity. Elementor's per-element generated rules
   set the header wraps back to flex-start after bridge XIII;
   the same centring is restated one class deeper so it wins.
   ================================================================ */
.elementor .site-header__inner .elementor-column .elementor-widget-wrap { align-items: center; }

/* ================================================================
   Elementor bridge XV: full-site alignment pass.
   Header: the design pushes the nav right with auto margin and
   a 24px gap before the button (bridge XI's equal space-between
   distribution was wrong), and header widgets centre in their
   row. FAQ: Elementor's accordion icon is replaced by the
   design's own blue "+" at the right of the title, rotating
   when open; titles take the design's weight, colour and body
   font in every state; body padding matches the design.
   CTA buttons sit at the left like the design, not centred.
   Service card buttons pin to the card foot on every card.
   Footer badges get the design's gap and vertical centring.
   Plain content links keep the design's underline.
   ================================================================ */
.elementor .site-header__inner > .elementor-container { justify-content: flex-start; }
.elementor .site-header__inner > .elementor-container > .elementor-column:nth-child(2) { margin-left: auto; }
.elementor .site-header__inner > .elementor-container > .elementor-column:nth-child(3) { margin-left: var(--space-4); }
.elementor .site-header__inner .elementor-column .elementor-widget { align-self: center; margin-block: auto; }
.elementor .faq-list .elementor-accordion-icon { display: none; }
.elementor .faq-list .elementor-tab-title { position: relative; padding-inline: var(--space-4); padding-right: var(--space-5); }
.elementor .faq-list .elementor-tab-title::after { content: "+"; position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); font-size: 1.35rem; font-weight: 400; color: var(--blue); transition: transform 0.3s ease; }
.elementor .faq-list .elementor-tab-title.elementor-active::after { transform: translateY(-50%) rotate(45deg); }
.elementor .faq-list .elementor-tab-title .elementor-accordion-title { font-family: var(--font-body); font-weight: var(--fw-medium); color: var(--text); }
.elementor .faq-list .elementor-tab-content { padding: 0 var(--space-4) var(--space-3); }
.elementor .cta-card .elementor-widget-button, .elementor .cta-band .elementor-widget-button { justify-content: flex-start; }
.elementor .services-grid .elementor-column > .elementor-widget-wrap { display: flex; flex-direction: column; }
.elementor .services-grid .elementor-widget-button { margin-top: auto; }
.elementor .footer-brand__badges > .elementor-container { align-items: center; column-gap: var(--space-3); }
.elementor .elementor-widget-text-editor a:not(.btn) { text-decoration: underline; }
.elementor .elementor-widget-text-editor .footer-links a, .elementor .footer-links a { text-decoration: none; }
.elementor .footer-contact a { text-decoration: underline; }

/* ================================================================
   Elementor bridge XVI: header vertical centring, nav width,
   service card wrap height. The header columns centre in
   their 64px row via the container's align-items (the design's
   flex row does the same). The nav widget carries 24px of
   trailing space the design does not have; a matching negative
   end margin restores the design's distribution. Service card
   wraps are stretched to the full card height so the bridge XV
   foot pinning has room to work on every card.
   ================================================================ */
.elementor .site-header__inner > .elementor-container { align-items: center; }
.elementor .site-header__inner .elementor-widget-nav-menu { margin-inline-end: calc(var(--space-4) * -1); }
.elementor .services-grid .elementor-column > .elementor-widget-wrap { height: 100%; }

/* ================================================================
   Elementor bridge XVII: crawlspace page spacing. The area
   cities margin belongs to the section (frozen rule); bridge I
   also put it on the container, doubling it inside the
   section, so the container copy is removed. The related
   links block keeps its design margin above it.
   ================================================================ */
.elementor .area-cities > .elementor-container { margin-top: 0; }
.elementor .related-links { margin-top: var(--space-3); }

/* ================================================================
   Elementor bridge XVIII: menu active state, form heading,
   review card packing. The menu's blue and underline belong
   to the one item Elementor marks active (the exact page
   match), not to every item WordPress flags as current; the
   two bridge rules above were rekeyed to match. The Book Now
   form heading keeps the design's margin above it. Review
   and Google card content packs from the top like the
   design's grid cards.
   ================================================================ */
.elementor .form-heading { margin-top: var(--space-5); }
.elementor .reviews-grid .elementor-column > .elementor-widget-wrap, .elementor .google-grid .elementor-column > .elementor-widget-wrap { align-content: flex-start; }

/* ================================================================
   Elementor bridge XIX: hero photo full bleed, section-more
   margins. The hero background widget anchors to the hero
   section itself (the design's full-bleed photo), so the
   in-between wrappers give up their positioning and the
   widget stretches edge to edge. On the crawlspace page the
   "more" line's design margins sit on the widget, not
   trapped inside it.
   ================================================================ */
.elementor .hero .elementor-container, .elementor .hero .elementor-column, .elementor .hero .elementor-widget-wrap { position: static; }
.elementor .hero .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.elementor .hero .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.elementor .elementor-widget:has(.section-more) { margin-top: var(--space-4); }
.elementor .elementor-widget .section-more { margin-top: 0; margin-bottom: 0; }

/* ================================================================
   Elementor bridge XX: button widgets shrink to their label.
   A button widget carries the design's btn classes, whose
   centring belongs inside a content-width box. Stretched to
   the full column width, the widget centred its label
   instead of sitting at the card's left edge like the
   design. Fit-content width restores the design's button
   box everywhere (service cards, contact cards, calls to
   action) without touching the pinned foot margins.
   ================================================================ */
.elementor .elementor-widget.btn { width: fit-content; justify-content: flex-start; }