/*
Theme Name:  MDavis Contracting
Description: Child theme for M. Davis Contracting — luxury hardscape & landscaping, South Shore MA
Template:    generatepress
Version:     1.0.0
Author:      Tyler Anderson
Text Domain: mdavis-contracting
*/

/* ============================================================
   TABLE OF CONTENTS
   1.  Design Tokens (CSS Custom Properties)
   2.  Luxury Texture Overlays
   3.  Base / Reset
   4.  Typography
   5.  GeneratePress Global Overrides
   6.  Navigation
   7.  Buttons
   8.  Layout Utilities
   9.  Section Shared Styles
   10. Hero
   11. Proof Bar
   12. Services Grid
   13. Signature Quote
   14. Before / After Slider
   15. Process Steps
   16. Portfolio Grid
   17. Why Davis (Differentiator Cards)
   18. Testimonial
   19. Service Area Tags
   20. Final CTA Section
   21. Footer
   22. Scroll Reveal System
   23. Responsive Overrides
============================================================ */


/* ============================================================
   1. DESIGN TOKENS
============================================================ */
:root {
  /* Brand Colors */
  --blue:          #004aad;
  --blue-hover:    #0058cc;
  --blue-glow:     rgba(0, 74, 173, 0.3);
  --dark:          #201913;
  --dark-alt:      #212020;
  --dark-card:     #2a2320;
  --dark-border:   rgba(255, 255, 255, 0.08);
  --white:         #ffffff;
  --white-soft:    rgba(255, 255, 255, 0.85);
  --white-muted:   rgba(255, 255, 255, 0.5);
  --white-faint:   rgba(255, 255, 255, 0.03);

  /* Motion */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'Raleway', system-ui, -apple-system, sans-serif;

  /* Layout */
  --container:     1280px;
  --gutter:        clamp(1.25rem, 4vw, 3rem);
}


/* ============================================================
   2. LUXURY TEXTURE OVERLAYS
   Usage: add class to any position:relative container.
   Grain   — subtle noise, feels like print
   Paver   — herringbone, echoes hardscape craft
   Lines   — geometric verticals
   Diagonal — luxury editorial stripe
============================================================ */
.texture-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.028;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.texture-paver::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.018;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(135deg, var(--white) 25%, transparent 25%),
    linear-gradient(225deg, var(--white) 25%, transparent 25%),
    linear-gradient(45deg,  var(--white) 25%, transparent 25%),
    linear-gradient(315deg, var(--white) 25%, transparent 25%);
  background-size: 40px 40px;
  background-position: 20px 0, 20px 0, 0 0, 0 0;
}

.texture-lines::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.025;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 120px,
    var(--white) 120px,
    var(--white) 121px
  );
}

.texture-diagonal::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.02;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 60px,
    var(--white) 60px,
    var(--white) 61px
  );
}


/* ============================================================
   3. BASE / RESET
============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--white);
  background-color: var(--dark);
  line-height: 1.6;
  overflow-x: hidden;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


/* ============================================================
   4. TYPOGRAPHY
============================================================ */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--font-display);
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.75rem, 6vw, 5rem);   font-weight: 500; }
h2 { font-size: clamp(2rem,    4vw, 3.25rem); font-weight: 500; }
h3 { font-size: clamp(1.5rem,  2.5vw, 2rem);  font-weight: 500; }
h4 { font-size: clamp(1.25rem, 2vw,   1.5rem); font-weight: 600; }

p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.7;
  color: var(--white-muted);
}

/* Section eyebrow label — "HARDSCAPE · SOUTH SHORE" style */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}

.section-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--blue);
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 1rem;
}

.section-desc {
  font-size: 1.0625rem;
  font-weight: 300;
  color: var(--white-muted);
  line-height: 1.7;
  max-width: 560px;
}

.section-header {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}


/* ============================================================
   5. GENERATEPRESS GLOBAL OVERRIDES
   Override GP defaults so the dark luxury palette takes over.
============================================================ */

/* Body & site background */
body,
.site,
.site-content {
  background-color: var(--dark) !important;
  color: var(--white) !important;
}

/* Prevent GP from forcing white backgrounds on page areas */
.inside-article,
.entry-content {
  background: transparent !important;
}

/* Gutenberg block default color reset */
.wp-block-group,
.wp-block-columns,
.wp-block-column {
  color: var(--white);
}

/* Remove GP default blue link underlines */
.entry-content a:not(.wp-block-button__link) {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================
   6. NAVIGATION
   Fixed on scroll, dark background with blur, blue CTA button.
============================================================ */
.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent !important;
  padding: 1.25rem 0 !important;
  border-bottom: none !important;
  transition:
    background 400ms var(--ease-smooth),
    padding    400ms var(--ease-smooth);
}

/* JS adds .scrolled when user scrolls past 40px */
.site-header.scrolled {
  background: rgba(32, 25, 19, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

/* GP nav wrapper */
.main-navigation,
#site-navigation {
  background: transparent !important;
}

/* Logo shrinks on scroll */
.site-header .site-logo img,
.site-header .custom-logo {
  height: 52px;
  width: auto;
  transition: height 300ms var(--ease-out);
}
.site-header.scrolled .site-logo img,
.site-header.scrolled .custom-logo {
  height: 40px;
}

/* Nav links */
.main-navigation ul li a,
.main-navigation ul li a:visited {
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--white-soft) !important;
  transition: color 200ms ease;
  position: relative;
}

/* Blue underline on hover */
.main-navigation ul li a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--blue);
  transition: width 300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .main-navigation ul li a:hover {
    color: var(--white) !important;
  }
  .main-navigation ul li a:hover::after {
    width: 100%;
  }
}

/* Nav CTA button */
.nav-cta,
.main-navigation .nav-cta a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1.5rem !important;
  background: var(--blue) !important;
  color: var(--white) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  transition: background 200ms ease, transform 160ms var(--ease-out) !important;
}

.nav-cta:active,
.main-navigation .nav-cta a:active {
  transform: scale(0.97) !important;
}

@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover,
  .main-navigation .nav-cta a:hover {
    background: var(--blue-hover) !important;
    color: var(--white) !important;
  }
  .main-navigation .nav-cta a:hover::after {
    display: none;
  }
}

/* Mobile hamburger */
.menu-toggle,
button.menu-toggle {
  background: transparent !important;
  color: var(--white) !important;
  border: none !important;
  padding: 0.5rem !important;
}


/* ── Custom homepage nav (front-page.php) ───────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 1.25rem 0;
  transition: background 400ms var(--ease-smooth), padding 400ms var(--ease-smooth);
}

.nav.scrolled {
  background: rgba(32, 25, 19, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--dark-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo img,
.nav-logo .custom-logo {
  height: 52px;
  width: auto;
  display: block;
  transition: height 300ms var(--ease-out);
}

.nav.scrolled .nav-logo img,
.nav.scrolled .nav-logo .custom-logo {
  height: 40px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-soft);
  transition: color 200ms ease;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--blue);
  transition: width 300ms var(--ease-out);
}

@media (hover: hover) {
  .nav-links a:hover { color: var(--white); }
  .nav-links a:hover::after { width: 100%; }
}

.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
}

/* Mobile nav overlay — hidden until .open is added by JS */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--dark);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  text-align: center;
}

.mobile-nav.open {
  display: flex;
}

.mobile-nav a {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-soft);
  transition: color 200ms ease;
}

@media (hover: hover) {
  .mobile-nav a:hover { color: var(--white); }
}

.mobile-nav-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2rem;
  color: var(--white);
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
}

/* Hide desktop nav items on mobile, show hamburger */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-cta   { display: none !important; }
  .nav-mobile-toggle { display: flex; }
}


/* ============================================================
   7. BUTTONS
   Two variants: primary (solid blue) and secondary (ghost).
============================================================ */

/* --- Primary --- */
.btn-primary,
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 2rem;
  background: var(--blue);
  color: var(--white) !important;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  border: none;
  box-shadow: 0 0 0 0 var(--blue-glow);
  transition:
    background  200ms ease,
    transform   160ms var(--ease-out),
    box-shadow  300ms ease;
}

.btn-primary:active,
.wp-block-button.is-style-fill .wp-block-button__link:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .wp-block-button.is-style-fill .wp-block-button__link:hover {
    background: var(--blue-hover);
    box-shadow: 0 4px 24px var(--blue-glow);
  }
}

/* Arrow icon inside button — shifts right on hover */
.btn-primary svg,
.wp-block-button.is-style-fill .wp-block-button__link svg {
  width: 16px;
  height: 16px;
  transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover svg { transform: translateX(3px); }
}

/* --- Secondary (ghost underline) --- */
.btn-secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  color: var(--white-soft);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--white-muted) !important;
  border-radius: 0 !important;
  transition: color 200ms ease, border-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover,
  .wp-block-button.is-style-outline .wp-block-button__link:hover {
    color: var(--white);
    border-bottom-color: var(--white) !important;
  }
}


/* ============================================================
   8. LAYOUT UTILITIES
============================================================ */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sections */
section,
.wp-block-group.section {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

/* Two-column grid shorthand */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

/* Three-column grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Six-column grid (service + differentiator cards) */
.grid-6 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Horizontal rule — blue accent bar */
.accent-bar {
  width: 48px;
  height: 2px;
  background: var(--blue);
  margin-block: 1.5rem;
}


/* ============================================================
   9. SECTION SHARED STYLES
   (proof bar accent, section separators)
============================================================ */
section {
  position: relative;
}


/* ============================================================
   10. HERO
   Full-viewport, image behind dark gradient, content bottom-left.
============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(4rem, 10vh, 8rem);
  overflow: hidden;
}

/* Background image wrapper */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Gradient overlay — dark bottom fade, slight blue top-right */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(32, 25, 19, 0.55)  0%,
      rgba(32, 25, 19, 0.25) 25%,
      rgba(32, 25, 19, 0.50) 50%,
      rgba(32, 25, 19, 0.85) 75%,
      rgba(32, 25, 19, 0.97) 100%
    );
}

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

/* "SOUTH SHORE · LUXURY HARDSCAPE" pill label */
.hero-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--blue);
  padding: 0.375rem 0.875rem;
  border-radius: 2px;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(12px);
  animation: heroFadeIn 800ms var(--ease-out) 300ms forwards;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeIn 900ms var(--ease-out) 500ms forwards;
}

.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 400;
  color: var(--white);
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: 2.5rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(12px);
  animation: heroFadeIn 800ms var(--ease-out) 700ms forwards;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(12px);
  animation: heroFadeIn 800ms var(--ease-out) 900ms forwards;
}

@keyframes heroFadeIn {
  to { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   11. PROOF BAR
   "Est. 2020 · South Shore MA · All Project Scales"
============================================================ */
.proof-bar {
  padding: 1.5rem 0;
  border-top: 1px solid var(--dark-border);
  border-bottom: 1px solid var(--dark-border);
  background: var(--dark);
}

.proof-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  flex-wrap: wrap;
}

.proof-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--white-muted);
  letter-spacing: 0.02em;
}

.proof-item strong {
  font-weight: 600;
  color: var(--white);
  font-size: 1rem;
}

.proof-divider {
  width: 1px;
  height: 28px;
  background: var(--dark-border);
}


/* ============================================================
   12. SERVICES GRID
   6 photo cards, image zoom on hover, title bottom-left.
============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.service-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  background: var(--dark-card);
}

.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover img {
    transform: scale(1.06);
  }
}

/* Gradient overlay — dark bottom */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(32,25,19,0.9) 0%, transparent 55%);
  z-index: 1;
}

.service-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  z-index: 2;
}

.service-card__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.375rem;
}

.service-card__link {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 250ms var(--ease-out),
    transform 250ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover .service-card__link {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   13. SIGNATURE QUOTE
   Decorative oversized " mark, italic Playfair, centered.
============================================================ */
.quote-section {
  background: var(--dark-alt);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.quote-mark {
  font-family: var(--font-display);
  font-size: clamp(6rem, 15vw, 12rem);
  line-height: 0.6;
  color: var(--blue);
  opacity: 0.25;
  display: block;
  margin-bottom: -1rem;
  user-select: none;
}

.quote-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--white);
  max-width: 800px;
  margin-inline: auto;
}

.quote-attr {
  margin-top: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
}


/* ============================================================
   14. BEFORE / AFTER SLIDER
   Draggable clip-path reveal slider.
   JS: assets/js/before-after.js (added in Phase 2)
============================================================ */
.ba-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  user-select: none;
  cursor: col-resize;
  aspect-ratio: 16 / 9;
  max-width: 900px;
  margin-inline: auto;
}

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

/* "After" image clips to a percentage (controlled by JS) */
.ba-after {
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0ms linear; /* JS removes transition for drag */
}

.ba-handle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background: var(--white);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ba-handle::before {
  content: '';
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
  position: absolute;
}

.ba-label {
  position: absolute;
  bottom: 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 2px;
  z-index: 5;
}

.ba-label--before {
  left: 1rem;
  background: rgba(32,25,19,0.8);
  color: var(--white-muted);
}

.ba-label--after {
  right: 1rem;
  background: var(--blue);
  color: var(--white);
}


/* ============================================================
   15. PROCESS STEPS
   3-step with large faded numbers (01 02 03).
============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  position: relative;
}

/* Horizontal connecting line between steps */
.process-grid::before {
  content: '';
  position: absolute;
  top: 2rem;
  left: calc(16.666% + 1rem);
  right: calc(16.666% + 1rem);
  height: 1px;
  background: linear-gradient(90deg, var(--blue) 0%, rgba(0,74,173,0.2) 100%);
  pointer-events: none;
}

.process-step {
  position: relative;
  padding-top: 5rem;
}

.process-step__num {
  position: absolute;
  top: -0.5rem;
  left: 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 74, 173, 0.12);
  pointer-events: none;
  user-select: none;
}

.process-step__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 24px rgba(0,74,173,0.35);
}

.process-step__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.process-step__desc {
  font-size: 0.9375rem;
  color: var(--white-muted);
  line-height: 1.7;
}


/* ============================================================
   16. PORTFOLIO GRID
   Asymmetric grid, photo cards with blue overlay on hover.
============================================================ */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 0.75rem;
}

/* Span patterns for asymmetric layout */
.portfolio-grid > *:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.portfolio-grid > *:nth-child(4) { grid-column: span 2; }
.portfolio-grid > *:nth-child(7) { grid-column: span 2; }

.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--dark-card);
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}

.portfolio-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 74, 173, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}

.portfolio-item__overlay span {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-item:hover img { transform: scale(1.06); }
  .portfolio-item:hover .portfolio-item__overlay { opacity: 1; }
}


/* ============================================================
   17. WHY DAVIS — DIFFERENTIATOR CARDS
   6 cards with blue icon badge, border + bg on hover.
============================================================ */
.differentiators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.diff-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--dark-border);
  border-radius: 6px;
  padding: 2rem;
  transition:
    border-color       300ms var(--ease-out),
    background-color   300ms var(--ease-out),
    transform          300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .diff-card:hover {
    border-color: rgba(0, 74, 173, 0.4);
    background-color: rgba(0, 74, 173, 0.06);
    transform: translateY(-3px);
  }
}

.diff-card__icon {
  width: 48px;
  height: 48px;
  background: var(--blue);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
  color: var(--white);
}

.diff-card__icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
}

.diff-card__title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.625rem;
}

.diff-card__desc {
  font-size: 0.9375rem;
  color: var(--white-muted);
  line-height: 1.65;
}


/* ============================================================
   18. TESTIMONIAL
   Left blue border, italic Playfair quote, author in caps.
============================================================ */
.testimonial-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.testimonial-block {
  border-left: 3px solid var(--blue);
  padding-left: 2rem;
}

.testimonial-block__stars {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  color: var(--blue);
}

.testimonial-block__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.testimonial-block__author {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue);
}

.testimonial-block__location {
  font-size: 0.8125rem;
  color: var(--white-muted);
  margin-top: 0.25rem;
}


/* ============================================================
   19. SERVICE AREA TAGS
   Pill tags for 27 towns; Pembroke highlighted in blue.
============================================================ */
.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

.area-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.875rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  color: rgba(255,255,255,0.6);
  transition: all 200ms var(--ease-out);
}

.area-tag--primary {
  border-color: var(--blue);
  color: var(--white);
  background: rgba(0, 74, 173, 0.2);
}

.area-tag svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .area-tag:hover {
    border-color: rgba(255,255,255,0.35);
    color: var(--white);
  }
}


/* ============================================================
   20. FINAL CTA SECTION
   Dark bg, radial blue glow, centered headline + button.
============================================================ */
.cta-section {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-alt) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Radial blue glow behind content */
.cta-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0,74,173,0.22) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section .container {
  position: relative;
  z-index: 1;
}

.cta-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1.25rem;
}

.cta-sub {
  font-size: 1.0625rem;
  color: var(--white-muted);
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}


/* ============================================================
   21. FOOTER
   Dark bg, 4-column grid, muted links brighten on hover.
============================================================ */
.site-footer,
#colophon {
  background-color: var(--dark) !important;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-block: 4rem 2rem;
  color: rgba(255,255,255,0.6);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: 3rem;
}

.footer-brand img {
  height: 48px;
  width: auto;
  margin-bottom: 1.25rem;
  opacity: 0.9;
}

.footer-brand p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.5rem;
  transition: color 200ms ease;
}

.footer-contact-item:hover {
  color: var(--white);
}

.footer-col-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.25rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-links a {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  transition: color 200ms ease;
}

.footer-links a:hover {
  color: var(--white);
}

/* Social icons row */
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  transition: all 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .footer-social a:hover {
    border-color: var(--blue);
    background: rgba(0,74,173,0.15);
    color: var(--white);
  }
}

.footer-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Bottom bar */
.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.3);
}


/* ============================================================
   22. SCROLL REVEAL SYSTEM
   Add class="reveal" to any element.
   Add class="reveal-stagger" to a parent for nth-child delays.
   JS (reveal.js) adds class="visible" when in viewport.
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   700ms var(--ease-out),
    transform 700ms var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Auto-stagger delays for direct children */
.reveal-stagger > .reveal:nth-child(1) { transition-delay:   0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay:  60ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 300ms; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 360ms; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 420ms; }
.reveal-stagger > .reveal:nth-child(9) { transition-delay: 480ms; }

/* Reduced motion — disable all animation */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-label,
  .hero h1,
  .hero-sub,
  .hero-ctas {
    opacity: 1;
    transform: none;
    animation: none;
  }
}


/* ============================================================
   23. RESPONSIVE OVERRIDES
============================================================ */

/* Tablet — 1024px */
@media (max-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
  }
  .portfolio-grid > *:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .portfolio-grid > *:nth-child(4),
  .portfolio-grid > *:nth-child(7) { grid-column: span 1; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .testimonial-wrap {
    grid-template-columns: 1fr;
  }
  .process-grid::before { display: none; }
}

/* Mobile — 768px */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr 1fr;
  }
  .process-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 180px;
  }
  .portfolio-grid > * { grid-column: span 1 !important; grid-row: span 1 !important; }

  .proof-divider { display: none; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .testimonial-wrap { grid-template-columns: 1fr; }
}

/* Small mobile — 480px */
@media (max-width: 480px) {
  .services-grid        { grid-template-columns: 1fr; }
  .differentiators-grid { grid-template-columns: 1fr; }
  .why-grid             { grid-template-columns: 1fr; }
  .portfolio-grid       { grid-template-columns: 1fr; }
  .hero-ctas            { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   HOMEPAGE COMPONENT STYLES
   front-page.php uses these class names — kept separate from the
   original design-system classes above for clarity.
============================================================ */

/* ── Why Davis cards (Section 8) ───────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.why-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--dark-border);
  border-radius: 6px;
  padding: 2rem;
  transition:
    border-color     300ms var(--ease-out),
    background-color 300ms var(--ease-out),
    transform        300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .why-card:hover {
    border-color: rgba(0, 74, 173, 0.4);
    background-color: rgba(0, 74, 173, 0.06);
    transform: translateY(-3px);
  }
}

.why-icon {
  width: 48px;
  height: 48px;
  background: var(--blue);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
  color: var(--white);
}

.why-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
}

.why-card h3 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.625rem;
}

.why-card p {
  font-size: 0.9375rem;
  color: var(--white-muted);
  line-height: 1.65;
}

/* ── Testimonial (Section 9) ────────────────────────────── */
.testimonial-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--white);
  margin: 2rem auto;
  max-width: 700px;
}

.testimonial-author {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue);
}

.testimonial-location {
  font-size: 0.8125rem;
  color: var(--white-muted);
  margin-top: 0.25rem;
}

/* ── Service Areas grid (Section 10) ────────────────────── */
.areas-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
  justify-content: center;
}

.area-home {
  border-color: var(--blue) !important;
  color: var(--white) !important;
  background: rgba(0, 74, 173, 0.2);
}

/* ── Final CTA (Section 11) ─────────────────────────────── */
.final-cta {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-alt) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0,74,173,0.22) 0%, transparent 70%);
  pointer-events: none;
}

.final-cta .container {
  position: relative;
  z-index: 1;
}

/* ── Footer columns (Section 12) ────────────────────────── */
.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.25rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-col ul a {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  transition: color 200ms ease;
}

@media (hover: hover) {
  .footer-col ul a:hover { color: var(--white); }
}

/* ── Before/After slider (Section 5) ────────────────────── */
.ba-slider-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  user-select: none;
  cursor: col-resize;
  aspect-ratio: 16 / 9;
  max-width: 900px;
  margin-inline: auto;
}

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

.ba-label-before,
.ba-label-after {
  position: absolute;
  bottom: 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 2px;
  z-index: 5;
}

.ba-label-before {
  left: 1rem;
  background: rgba(32,25,19,0.8);
  color: var(--white-muted);
}

.ba-label-after {
  right: 1rem;
  background: var(--blue);
  color: var(--white);
}

/* ── Process steps (Section 6) ──────────────────────────── */
.process-number {
  position: absolute;
  top: -0.5rem;
  left: 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 74, 173, 0.12);
  pointer-events: none;
  user-select: none;
}

.process-step h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.process-step p {
  font-size: 0.9375rem;
  color: var(--white-muted);
  line-height: 1.7;
}

/* ── Portfolio overlays (Section 7) ─────────────────────── */
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 74, 173, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}

.portfolio-overlay span {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-item:hover .portfolio-overlay { opacity: 1; }
  .portfolio-item:hover img { transform: scale(1.06); }
}

/* ── Service card labels (Section 3) ────────────────────── */
.service-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  z-index: 2;
}

.service-info h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.25rem;
}

.service-info p {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}

.service-arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  color: var(--white);
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover .service-arrow { opacity: 1; }
}

/* ── Footer wrapper ──────────────────────────────────────── */
.footer {
  background-color: var(--dark);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-block: 4rem 2rem;
  color: rgba(255,255,255,0.6);
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.3);
}