/* ==========================================================================
   ELM LANDSCAPING — COMPLETE STYLESHEET
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
  --color-forest:    #0F2418;
  --color-moss:      #1E3A2A;
  --color-accent:    #79B94B;
  --color-accent-dark: #6aA83e;
  --color-sage:      #DCE7D1;
  --color-offwhite:  #F6F4EE;
  --color-charcoal:  #1C1C1C;
  --color-text:      #2D3B35;
  --color-muted:     #5a6b60;
  --color-border:    #E0E5DC;

  /* RGB channels of the brand colours, for translucent tints:
     rgba(var(--color-accent-rgb), 0.2). These are the Galway defaults;
     each site's own colours (Site Settings → Brand colours) are printed
     straight after this stylesheet and override them. */
  --color-accent-rgb:      121, 185, 75;
  --color-forest-rgb:      15, 36, 24;
  --color-forest-deep-rgb: 10, 24, 16;
  --color-sage-rgb:        220, 231, 209;

  --radius-card:     20px;
  --radius-btn:      12px;
  --radius-pill:     100px;
  --radius-sm:       8px;
  --radius-md:       16px;

  --shadow-sm:       0 2px 8px rgba(var(--color-forest-rgb), 0.06);
  --shadow-card:     0 2px 20px rgba(var(--color-forest-rgb), 0.08);
  --shadow-hover:    0 20px 60px rgba(var(--color-forest-rgb), 0.15);
  --shadow-accent:   0 8px 24px rgba(var(--color-accent-rgb), 0.35);

  --font-heading:    'Plus Jakarta Sans', sans-serif;
  --font-body:       'Inter', sans-serif;

  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
  --transition-img:  0.6s ease;

  /* 112px (was 76px in the static source): the static value was too short
     to contain the 96px-tall .logo-img without overflowing - invisible
     against the transparent/hero-overlay header, but visible once the
     solid scrolled background appears. Reported and fixed post-launch;
     the static reference file is unchanged. */
  --header-height:   112px;
  --container-max:   1280px;
  --container-pad:   24px;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

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

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

ul, ol {
  list-style: none;
}

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

input, textarea, select {
  font-family: inherit;
}

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

/* --------------------------------------------------------------------------
   3. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.section-pad {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-pad-sm {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Section colour utilities */
.section-dark {
  background-color: var(--color-moss);
  color: #fff;
}

.section-forest {
  background-color: var(--color-forest);
  color: #fff;
}

.section-tint {
  background-color: var(--color-offwhite);
}

/* ── Interactive dot texture (all white-bg sections) ─────────────────────── */

.texture-dots {
  --mouse-x: -999px;
  --mouse-y: -999px;
  position: relative;
  overflow: hidden;
}

/* Base layer: very faint static dots visible everywhere */
.texture-dots::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='1.5' fill='%231E3A2A' fill-opacity='0.07'/%3E%3C/svg%3E");
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

/* Spotlight layer: brighter green dots revealed only near the cursor */
.texture-dots::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='2.2' fill='%2379B94B' fill-opacity='0.6'/%3E%3C/svg%3E");
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(300px circle at var(--mouse-x) var(--mouse-y), black 0%, transparent 100%);
  mask-image: radial-gradient(300px circle at var(--mouse-x) var(--mouse-y), black 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.texture-dots > * {
  position: relative;
  z-index: 1;
}

/* FAQ section keeps its own diamond pattern (offwhite bg, not interactive) */
.faq-section {
  position: relative;
  overflow: hidden;
}

.faq-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 12 L24 18 L18 24 L12 18 Z' stroke='%2379B94B' stroke-opacity='0.08' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 0;
}

.faq-section > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-forest);
}

p {
  font-family: var(--font-body);
  color: var(--color-muted);
  line-height: 1.7;
}

.text-accent {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   5. SECTION HEADER
   -------------------------------------------------------------------------- */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px;
}

.section-tag {
  display: inline-block;
  background: rgba(var(--color-accent-rgb), 0.12);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.section-tag--light {
  background: rgba(var(--color-accent-rgb), 0.25);
}

.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--color-forest);
  line-height: 1.2;
  margin-bottom: 20px;
  font-family: var(--font-heading);
}

.section-title--light {
  color: #fff;
}

.section-subtitle {
  font-size: 1rem;
  color: var(--color-muted);
  line-height: 1.7;
}

.section-subtitle--light {
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-base);
  white-space: nowrap;
  line-height: 1;
}

.btn--sm {
  padding: 10px 20px;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 16px 36px;
  font-size: 1rem;
}

.btn--full {
  width: 100%;
  justify-content: center;
}

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

.btn-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}

.btn-outline {
  background: transparent;
  color: var(--color-moss);
  border-color: var(--color-moss);
}

.btn-outline:hover {
  background: var(--color-moss);
  color: #fff;
}

/* Outline button on dark backgrounds */
.section-forest .btn-outline,
.section-dark .btn-outline {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.45);
}

.section-forest .btn-outline:hover,
.section-dark .btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.8);
  color: #fff;
}

.btn-dark {
  background: var(--color-charcoal);
  color: #fff;
  border-color: var(--color-charcoal);
}

.btn-accent {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  font-size: 1.05rem;
  padding: 16px 36px;
}

.btn-accent:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.3s ease;
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease;
  z-index: -1;
}

.site-header.scrolled::before {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 24px rgba(var(--color-forest-rgb), 0.1);
}

.site-header.scrolled .nav-link,
.site-header.scrolled .nav-dropdown-trigger {
  color: var(--color-forest);
}

.site-header.scrolled .site-logo .logo-landscaping {
  color: var(--color-accent);
}

.site-header.scrolled .header-phone {
  color: var(--color-forest);
}

.site-header.header-hidden {
  transform: translateY(-100%);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: 24px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  position: relative; /* anchors .logo-img--alt below */
}

.logo-img {
  height: 96px;
  width: auto;
  display: block;
  transition: opacity 0.35s ease;
}

.logo-img--footer {
  height: 52px;
}

/* Scrolled-state logo: crossfades to a second real asset (chosen in
   Settings → Elm Site Settings) rather than the old `filter: brightness(0)`
   treatment, which turned the whole mark - including the green leaf accent -
   solid black. Stacked exactly on top of the main logo via absolute
   positioning so the swap has no layout shift. */
.logo-img--alt {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.site-header.scrolled .logo-img {
  opacity: 0;
}

.site-header.scrolled .logo-img--alt {
  opacity: 1;
}

.logo-icon {
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-elm {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: -0.02em;
}

.logo-landscaping {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header.scrolled .logo-elm {
  color: var(--color-forest);
}

/* Desktop Nav */
.site-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link,
.nav-dropdown-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-base), background-color var(--transition-base);
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-link::after,
.nav-dropdown-trigger::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
  border-radius: 2px;
}

.nav-link:hover::after,
.nav-link:focus::after,
.nav-dropdown-trigger:hover::after {
  transform: scaleX(1);
}

.nav-link:hover,
.nav-dropdown-trigger:hover {
  color: #fff;
}

.site-header.scrolled .nav-link:hover,
.site-header.scrolled .nav-dropdown-trigger:hover {
  color: var(--color-accent);
}

.dropdown-arrow {
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.has-dropdown.active > .nav-dropdown-trigger .dropdown-arrow,
.has-dropdown:hover > .nav-dropdown-trigger .dropdown-arrow {
  transform: rotate(180deg);
}

/* Mega Menu */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 16px 48px rgba(var(--color-forest-rgb), 0.15);
  border-top: 3px solid var(--color-accent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 999;
}

.has-dropdown:hover .mega-menu,
.has-dropdown.active .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu-inner {
  display: grid;
  grid-template-columns: 3fr 4fr;
  max-width: 800px;
  gap: 0;
  padding: 40px 24px;
}

.mega-col {
  padding: 0 28px;
  border-right: 1px solid var(--color-border);
}

.mega-col:first-child {
  padding-left: 0;
}

.mega-col:last-child {
  border-right: none;
}

.mega-col-title {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  color: var(--color-forest);
}

.mega-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mega-links a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-muted);
  padding: 6px 8px;
  transition: color var(--transition-base), background var(--transition-base), padding-left var(--transition-base);
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
}

.mega-links a:hover {
  color: var(--color-accent);
  background: rgba(var(--color-accent-rgb),0.07);
  padding-left: 10px;
}

.mega-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
  opacity: 0.85;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.mega-links a:hover .mega-icon {
  opacity: 1;
  transform: scale(1.1);
}

.mega-col--featured {
  padding-left: 28px;
  border-right: none;
}

.mega-featured-card {
  background: var(--color-offwhite);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.mega-featured-img {
  height: 140px;
  overflow: hidden;
}

.mega-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-img);
}

.mega-featured-card:hover .mega-featured-img img {
  transform: scale(1.05);
}

.mega-featured-body {
  padding: 16px;
}

.mega-featured-tag {
  display: inline-block;
  background: rgba(var(--color-accent-rgb), 0.15);
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 8px;
}

.mega-featured-body h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-forest);
  margin-bottom: 6px;
}

.mega-featured-body p {
  font-size: 0.82rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.mega-featured-link {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-accent);
  transition: color var(--transition-base);
}

.mega-featured-link:hover {
  color: var(--color-accent-dark);
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.header-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color var(--transition-base);
}

.header-phone:hover {
  color: var(--color-accent);
}

.header-phone-numbers {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.header-phone-primary {
  font-weight: 700;
}

.header-phone-secondary {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.7;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-base);
}

.hamburger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}

.site-header.scrolled .hamburger-bar {
  background: var(--color-forest);
}

.hamburger.is-open .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.is-open .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.is-open .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   8. MOBILE MENU
   -------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-forest);
  z-index: 1100;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1090;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-sm);
  transition: color var(--transition-base), background-color var(--transition-base);
}

.mobile-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.mobile-nav {
  flex: 1;
  padding: 20px;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: color var(--transition-base);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
}

.mobile-nav-link:hover {
  color: var(--color-accent);
}

.mobile-acc-arrow {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.mobile-accordion-item.open .mobile-acc-arrow {
  transform: rotate(180deg);
}

.mobile-sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.mobile-accordion-item.open .mobile-sub-menu {
  max-height: 600px;
}

.mobile-sub-group-title {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 0 6px 16px;
}

.mobile-sub-menu a {
  display: block;
  padding: 8px 0 8px 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--transition-base);
}

.mobile-sub-menu a:hover {
  color: var(--color-accent);
}

.mobile-menu-footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}

.mobile-phone-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--transition-base);
}

.mobile-phone-link:hover {
  color: var(--color-accent);
}

.mobile-phone-link--secondary {
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  margin-top: -6px;
}

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(var(--color-forest-rgb), 0.82) 0%,
    rgba(var(--color-forest-rgb), 0.6) 50%,
    rgba(var(--color-forest-rgb), 0.75) 100%
  );
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero-layout {
  display: grid;
  /* 420px (was sized for the old compact 3-field hero form) -> 520px: the
     hero form now shares the fuller "Request a Free Tree Survey" form with
     the final CTA section (see hero-form.php), which needs more room for
     its two-column field rows. */
  grid-template-columns: 1fr 520px;
  gap: 56px;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 48px;
}

.hero-content {
  position: relative;
}

.hero-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-bottom: 28px;
}

.hero-badge {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-badge-divider {
  color: rgba(255, 255, 255, 0.35);
  margin: 0 12px;
  font-size: 0.9rem;
}

.hero-headline {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  font-family: var(--font-heading);
}

.hero-subtext {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.65;
  max-width: 620px;
  margin-bottom: 28px;
  font-family: var(--font-body);
}

/* Social Proof */
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  width: fit-content;
}

.hero-review-avatars {
  display: flex;
  flex-shrink: 0;
}

.hero-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-heading);
  border: 2px solid rgba(255,255,255,0.4);
  margin-right: -8px;
  flex-shrink: 0;
}

.hero-review-avatars { padding-right: 8px; }

.hero-review-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero-stars {
  display: flex;
  gap: 2px;
}

.hero-review-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-body);
}

.hero-review-label strong {
  color: #fff;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Hero enquiry form - now reuses .cta-form-wrap/.quote-form/.form-* from
   the final CTA section (see hero-form.php + template-parts/global/
   quote-form.php) rather than its own hero-specific classes, so the two
   are guaranteed to look identical. */
.hero-form-wrap {
  position: relative;
  align-self: center;
}

/* Hero form: honest "not live yet" message shown after a submit attempt.
   Added during the WordPress conversion (Job 2) - see script.js. */
.hf-pending-message {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-charcoal);
  background: var(--color-sage);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--font-body);
}

.hf-pending-phone-link {
  font-weight: 700;
  color: var(--color-forest);
  text-decoration: underline;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.7; }
  50% { transform: scaleY(0.6); opacity: 0.3; }
}

.scroll-text {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10. TRUST BAR
   -------------------------------------------------------------------------- */
.trust-bar {
  padding: 36px 0;
  border-bottom: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   CERTIFICATIONS (FOOTER)
   -------------------------------------------------------------------------- */
.footer-certs {
  display: flex;
  align-items: center;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0;
}

.certs-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  flex-shrink: 0;
}

.certs-logos {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.cert-item {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: opacity 0.25s ease;
}

.cert-item:hover {
  opacity: 1;
}

.cert-item img {
  height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 600px) {
  .footer-certs {
    flex-direction: column;
    gap: 16px;
  }
  .cert-item img {
    height: 48px;
  }
}

.trust-list {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  justify-content: center;
}

.trust-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-accent-rgb), 0.1);
  border-radius: 12px;
}

.trust-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.trust-text strong {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-forest);
  white-space: nowrap;
}

.trust-text span {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.trust-divider {
  width: 1px;
  height: 48px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   11. SERVICES GRID
   -------------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.service-card-img {
  height: 220px;
  overflow: hidden;
}

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

.service-card:hover .service-card-img img {
  transform: scale(1.08);
}

.service-card-body {
  padding: 28px;
}

.service-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-accent-rgb), 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.service-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-forest);
  margin-bottom: 10px;
}

.service-card-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.65;
  margin-bottom: 20px;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  transition: gap var(--transition-base), color var(--transition-base);
}

.card-link:hover {
  gap: 10px;
  color: var(--color-accent-dark);
}

/* --------------------------------------------------------------------------
   12. ABOUT SECTION
   -------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-images {
  position: relative;
  padding-bottom: 60px;
  padding-right: 60px;
}

.about-img-main {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 3/4;
}

.about-img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-img);
}

.about-images:hover .about-img-main img {
  transform: scale(1.04);
}

.about-img-secondary {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.about-img-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-img);
}

.about-images:hover .about-img-secondary img {
  transform: scale(1.05);
}

.about-years-badge {
  position: absolute;
  top: 24px;
  left: -20px;
  background: var(--color-accent);
  color: #fff;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  text-align: center;
  z-index: 2;
  box-shadow: var(--shadow-accent);
}

.about-years-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  font-family: var(--font-heading);
}

.about-years-label {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.92;
  font-family: var(--font-heading);
}

.about-content .section-title {
  margin-top: 16px;
}

.about-lead {
  font-size: 1.05rem;
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 28px;
}

.about-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.about-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.5;
}

.about-check {
  width: 22px;
  height: 22px;
  background: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* About section — dark background overrides */
.about-section.section-forest {
  position: relative;
  overflow: hidden;
}

.about-section.section-forest .about-topo {
  opacity: 1;
}

.about-section.section-forest .about-lead {
  color: rgba(var(--color-sage-rgb),0.82);
}

.about-section.section-forest .about-point {
  color: rgba(255,255,255,0.85);
}

.about-section.section-forest .about-years-badge {
  background: rgba(var(--color-forest-deep-rgb), 0.82);
  border: 1px solid rgba(var(--color-accent-rgb),0.5);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
}

.about-section.section-forest .about-years-number {
  color: var(--color-accent);
  text-shadow: 0 0 20px rgba(var(--color-accent-rgb),0.4);
}

.about-section.section-forest .about-years-label {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   13. PORTFOLIO
   -------------------------------------------------------------------------- */
/* Filter buttons */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 48px;
}

.filter-btn {
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border);
  background: transparent;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.25s ease;
}

.filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filter-btn--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Filterable grid */
.portfolio-grid-filter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.pf-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  cursor: pointer;
  aspect-ratio: 4 / 3;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.pf-item.pf-hidden {
  display: none;
}

.pf-img {
  width: 100%;
  height: 100%;
}

.pf-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-img);
  display: block;
}

.pf-item:hover .pf-img img {
  transform: scale(1.06);
}

.pf-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(var(--color-forest-rgb), 0.92) 0%,
    rgba(var(--color-forest-rgb), 0.2) 55%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.pf-tag {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
  align-self: flex-start;
}

.pf-overlay h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.pf-overlay p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.portfolio-cta {
  text-align: center;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   PROCESS TOPOGRAPHIC SVG BACKGROUND
   -------------------------------------------------------------------------- */
.process-section {
  position: relative;
  overflow: hidden;
}

.process-topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

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

/* Contour lines */
.topo-line {
  fill: none;
  stroke: rgba(var(--color-accent-rgb), 0.12);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.topo-1 { stroke-dasharray: 1800; animation: topo-flow 18s linear infinite; }
.topo-2 { stroke-dasharray: 1800; animation: topo-flow 22s linear infinite reverse; stroke-opacity: 0.8; }
.topo-3 { stroke-dasharray: 1800; animation: topo-flow 26s linear infinite; stroke: rgba(var(--color-accent-rgb), 0.08); }
.topo-4 { stroke-dasharray: 1800; animation: topo-flow 20s linear infinite reverse; }
.topo-5 { stroke-dasharray: 1800; animation: topo-flow 24s linear infinite; stroke-opacity: 0.7; }
.topo-6 { stroke-dasharray: 1800; animation: topo-flow 28s linear infinite reverse; stroke: rgba(var(--color-accent-rgb), 0.08); }
.topo-7 { stroke-dasharray: 1800; animation: topo-flow 16s linear infinite; stroke-opacity: 0.6; }

@keyframes topo-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 1800; }
}

/* Depth circles */
.topo-circle {
  fill: none;
  stroke: rgba(var(--color-accent-rgb), 0.06);
  stroke-width: 1;
}

.topo-c1 { animation: topo-pulse 12s ease-in-out infinite; }
.topo-c2 { animation: topo-pulse 16s ease-in-out infinite reverse; }
.topo-c3 { animation: topo-pulse 10s ease-in-out infinite 3s; }

@keyframes topo-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); transform-origin: center; }
  50%       { opacity: 1;   transform: scale(1.06); transform-origin: center; }
}

@media (prefers-reduced-motion: reduce) {
  .topo-line, .topo-circle { animation: none; }
}

/* --------------------------------------------------------------------------
   14. PROCESS SECTION
   -------------------------------------------------------------------------- */
.process-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 64px;
}

.process-step {
  flex: 1;
  text-align: center;
  padding: 0 20px;
}

.process-number {
  font-size: 4.5rem;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  font-family: var(--font-heading);
  margin-bottom: 16px;
  display: block;
}

.process-content h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.process-content p {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  line-height: 1.65;
}

.process-connector {
  flex-shrink: 0;
  width: 60px;
  height: 2px;
  background: rgba(var(--color-accent-rgb), 0.35);
  margin-top: 36px;
  align-self: flex-start;
  margin-top: 36px;
}

/* --------------------------------------------------------------------------
   15. SERVICE DETAIL SPLITS
   -------------------------------------------------------------------------- */
.splits-section {
  padding-top: 100px;
  padding-bottom: 20px;
}

.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 100px;
}

.split-row--reverse {
  direction: rtl;
}

.split-row--reverse > * {
  direction: ltr;
}

.split-image {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-img);
}

.split-image:hover img {
  transform: scale(1.04);
}

.split-content .section-title {
  margin-top: 16px;
  margin-bottom: 16px;
}

.split-lead {
  font-size: 1rem;
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.split-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.split-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
}

.split-list li::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Tree surgery off-white inset */
.split-row--offwhite {
  background: var(--color-offwhite);
  border-radius: 24px;
  padding: 72px 64px;
  margin-left: -64px;
  margin-right: -64px;
  margin-bottom: 60px;
  gap: 64px;
}

/* --------------------------------------------------------------------------
   16. STATS SECTION
   -------------------------------------------------------------------------- */
.stats-section {
  padding-top: 100px;
  padding-bottom: 100px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stat-item {
  text-align: center;
  padding: 20px 24px;
  position: relative;
}

.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.stat-number-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  margin-bottom: 12px;
}

.stat-number--compact {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
}

.stat-number {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

.stat-suffix {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--color-accent);
  font-family: var(--font-heading);
  line-height: 1;
}

.stat-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   17. TESTIMONIALS
   -------------------------------------------------------------------------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.testimonial-card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 36px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.testimonial-stars {
  font-size: 1.15rem;
  color: var(--color-accent);
  letter-spacing: 2px;
  margin-bottom: 18px;
}

.testimonial-card blockquote {
  margin: 0 0 24px;
}

.testimonial-card blockquote p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.7;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-moss);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-info strong {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-forest);
}

.author-info span {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   18. CLIENTS MARQUEE
   -------------------------------------------------------------------------- */
.clients-section {
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.clients-heading {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 32px;
}

.clients-marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  margin-top: 16px;
}

.clients-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 35s linear infinite;
}

.clients-marquee:hover .clients-track {
  animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  flex-shrink: 0;
}

.client-logo img {
  height: 44px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.client-logo img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .clients-track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   19. BROCHURE CTA SECTION
   -------------------------------------------------------------------------- */
.brochure-section {
  position: relative;
  overflow: hidden;
}

.brochure-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(var(--color-accent-rgb),0.08) 0%, transparent 70%);
  pointer-events: none;
}

.brochure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.brochure-content {
  position: relative;
  z-index: 1;
}

.brochure-content .section-title {
  text-align: left;
  margin-bottom: 16px;
}

.brochure-content .section-subtitle {
  text-align: left;
  margin-bottom: 32px;
  color: rgba(var(--color-sage-rgb),0.8);
}

.brochure-points {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brochure-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--color-sage);
  font-size: 1rem;
  line-height: 1.5;
}

.brochure-points li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent);
}

.brochure-visual {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brochure-mockup {
  position: relative;
  width: 100%;
  max-width: 420px;
}

.brochure-mockup-shadow {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 40px;
  background: rgba(0,0,0,0.4);
  filter: blur(20px);
  border-radius: 50%;
  z-index: 0;
}

.brochure-mockup-cover {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
  transform: perspective(1000px) rotateY(-8deg) rotateX(2deg);
  transition: transform 0.5s ease;
}

.brochure-mockup-cover:hover {
  transform: perspective(1000px) rotateY(-4deg) rotateX(1deg) translateY(-4px);
}

.brochure-mockup-cover .bm-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brochure-mockup-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--color-forest-rgb),0.55) 0%, rgba(var(--color-forest-rgb),0.2) 40%, rgba(var(--color-forest-rgb),0.75) 100%);
  z-index: 1;
}

.bm-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 28px;
}

.bm-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}

.bm-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bm-tag {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 4px;
  width: fit-content;
  margin-bottom: 8px;
}

.bm-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}

.bm-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

@media (max-width: 900px) {
  .brochure-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .brochure-visual {
    order: -1;
  }

  .brochure-mockup {
    max-width: 280px;
  }

  .brochure-mockup-cover {
    transform: none;
  }

  .brochure-mockup-cover:hover {
    transform: translateY(-4px);
  }
}

/* --------------------------------------------------------------------------
   20. FAQ SECTION
   -------------------------------------------------------------------------- */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}

.faq-intro .section-title {
  text-align: left;
}

.faq-intro .section-subtitle {
  text-align: left;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

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

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-forest);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-base);
}

.faq-question:hover {
  color: var(--color-accent);
}

.faq-item.open .faq-question {
  color: var(--color-accent);
}

.faq-arrow {
  flex-shrink: 0;
  color: var(--color-muted);
  transition: transform 0.25s ease, color 0.25s ease;
}

.faq-item.open .faq-arrow {
  transform: rotate(180deg);
  color: var(--color-accent);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item.open .faq-answer {
  max-height: 300px;
}

.faq-answer p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.7;
  padding-bottom: 20px;
}

/* --------------------------------------------------------------------------
   20. FINAL CTA / CONTACT SECTION
   -------------------------------------------------------------------------- */
.cta-final-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 0;
}

.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--color-forest-rgb), 0.92) 0%,
    rgba(var(--color-forest-rgb), 0.8) 100%
  );
  z-index: 1;
}

.cta-final-section .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.cta-final-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.cta-final-text .section-title {
  margin-top: 16px;
  margin-bottom: 16px;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

/* Quote Form */
.cta-form-wrap {
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius-card);
  padding: 40px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}

.form-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-forest);
  margin-bottom: 28px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-group label {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-forest);
}

.form-group label span {
  color: var(--color-accent);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  background: #fff;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  outline: none;
  appearance: none;
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%235a6b60' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #aab5ae;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-note {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-muted);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  padding-top: 80px;
  padding-bottom: 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col--brand .site-logo {
  margin-bottom: 16px;
}

.footer-logo-text {
  color: rgba(255, 255, 255, 0.7) !important;
}

.footer-logo .logo-elm {
  color: #fff;
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 280px;
}

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

.footer-contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer-contact-link:hover {
  color: var(--color-accent);
}

.footer-cross-sell {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
  max-width: 280px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-cross-sell a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}

.footer-cross-sell a:hover {
  color: var(--color-accent);
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color var(--transition-base), padding-left var(--transition-base);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--color-accent);
  padding-left: 4px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-copyright,
.footer-serving {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
}

/* --------------------------------------------------------------------------
   22. STICKY MOBILE CTA BAR
   -------------------------------------------------------------------------- */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--color-forest);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 16px;
  gap: 12px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
}

.sticky-cta-quote {
  flex: 1;
  text-align: center;
  justify-content: center;
}

.sticky-cta-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: var(--radius-btn);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition-base);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sticky-cta-call:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* --------------------------------------------------------------------------
   23. SCROLL REVEAL ANIMATIONS
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Mid-page CTA strip */
.midpage-cta {
  background: var(--color-forest);
  padding: 32px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(var(--color-accent-rgb),0.15);
  border-bottom: 1px solid rgba(var(--color-accent-rgb),0.15);
}

/* Topo SVG background */
.midpage-topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Decorative leaf on the right */
.midpage-leaf {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: 320px;
  pointer-events: none;
  opacity: 0.8;
}

/* Ghost large background text */
.midpage-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: clamp(5rem, 14vw, 11rem);
  font-weight: 800;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--color-accent-rgb),0.1);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.03em;
  line-height: 1;
}

.midpage-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* Left accent border */
.midpage-cta-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
  border-left: 3px solid var(--color-accent);
}

.midpage-cta-label {
  font-size: 0.78rem;
  color: var(--color-accent);
  font-family: var(--font-heading);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}

.midpage-cta-headline {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.midpage-cta-headline em {
  font-style: italic;
  color: var(--color-accent);
}

.midpage-cta-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.midpage-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  transition: color var(--transition-base);
  white-space: nowrap;
}

.midpage-phone svg {
  color: var(--color-accent);
  flex-shrink: 0;
}

.midpage-phone:hover {
  color: var(--color-accent);
}

.midpage-divider {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.3);
  font-family: var(--font-body);
}

/* Google rating badge */
.google-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 40px;
  padding: 8px 18px 8px 12px;
  margin-top: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.google-rating-stars {
  display: flex;
  gap: 2px;
}

.google-rating-text {
  font-size: 0.83rem;
  color: var(--color-charcoal);
  font-family: var(--font-body);
}

.google-rating-text strong {
  color: var(--color-forest);
}

/* Featured testimonial card */
.testimonial-card--featured {
  grid-column: span 1;
  background: var(--color-forest);
  color: #fff;
}

.testimonial-card--featured .testimonial-stars {
  color: #F59E0B;
}

.testimonial-card--featured blockquote p {
  color: rgba(255,255,255,0.88);
}

.testimonial-card--featured .author-info strong {
  color: #fff;
}

.testimonial-card--featured .author-info span {
  color: rgba(255,255,255,0.6);
}

.testimonial-card--featured .author-avatar {
  background: rgba(var(--color-accent-rgb),0.25);
  color: var(--color-accent);
}

/* Post-testimonial CTA */
.testimonials-cta {
  margin-top: 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.testimonials-cta-text {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-charcoal);
  margin: 0;
}

.testimonials-cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 768px) {
  .midpage-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .midpage-cta-actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  .midpage-leaf {
    display: none;
  }

  .midpage-ghost {
    font-size: clamp(3.5rem, 18vw, 6rem);
  }

  .google-rating {
    flex-wrap: wrap;
    border-radius: 16px;
    padding: 10px 14px;
  }
}

/* --------------------------------------------------------------------------
   24. RESPONSIVE — 1180px
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .mega-menu-inner {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }

  .mega-col--featured {
    display: none;
  }

  .footer-top {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 32px;
  }

  .trust-item {
    padding: 12px 20px;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   25. RESPONSIVE — 1024px
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --container-pad: 20px;
  }

  .site-nav,
  .header-actions {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .about-grid {
    gap: 48px;
  }

  .split-row {
    gap: 48px;
  }

  .cta-final-content {
    gap: 48px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .stat-item:nth-child(3)::before {
    display: none;
  }

  .stat-item:nth-child(3),
  .stat-item:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .footer-col--brand {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   26. RESPONSIVE — 900px
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-steps {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .process-step {
    max-width: 360px;
    padding: 24px 20px;
  }

  .process-connector {
    width: 2px;
    height: 40px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 100px;
    padding-bottom: 60px;
  }

  .hero-form-wrap {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-grid-filter {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   27. RESPONSIVE — 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;
  }

  /* Same root cause as the desktop scrolled-header logo fix: .logo-img is
     a fixed 96px tall at every width in the static source, with no mobile
     override, so it overflowed this breakpoint's 64px header exactly the
     same way. Sized to match the 40px hamburger icon it sits beside.
     Scoped to .site-header specifically - .logo-img--footer (52px) and the
     mobile-menu drawer's logo aren't height-constrained the same way and
     weren't reported as broken. */
  .site-header .logo-img {
    height: 40px;
  }

  .section-pad {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .section-pad-sm {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .section-header {
    margin-bottom: 44px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .about-images {
    padding-bottom: 80px;
    padding-right: 40px;
    margin-bottom: 40px;
  }

  .about-years-badge {
    left: 0;
  }

  .split-row,
  .split-row--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    direction: ltr;
  }

  .split-row--reverse {
    direction: ltr;
  }

  .split-row--offwhite {
    padding: 48px 28px;
    margin-left: -28px;
    margin-right: -28px;
    border-radius: 16px;
  }

  .cta-final-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .faq-intro .btn {
    display: none;
  }

  .trust-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .trust-divider {
    display: none;
  }

  .trust-item {
    padding: 16px 12px;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .portfolio-grid-filter {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .footer-col--brand {
    grid-column: auto;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .sticky-cta {
    display: flex;
  }

  body {
    padding-bottom: 68px;
  }

  .cta-final-section {
    padding-bottom: 90px;
  }

  .cta-form-wrap {
    padding: 28px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   28. RESPONSIVE — 480px
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .section-pad {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .hero-headline {
    /* Was clamp(2rem, 8vw, 2.8rem) - that floor (2rem) rendered smaller
       than the base rule's own floor (2.5rem) on typical phones, making
       the heading shrink on mobile instead of scaling appropriately.
       Fixed per director feedback (2026-08-17): bigger on mobile. */
    font-size: clamp(2.6rem, 9vw, 3.25rem);
  }

  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-badges {
    display: none;
  }

  /* Avatars + stars + review-label row: previously had no mobile rule at
     all, so `width: fit-content` (base) let it try to stay on one
     unwrapped line, cramming everything together on a narrow phone.
     Fixed per director feedback (2026-08-17): let the label wrap onto two
     lines cleanly. min-width: 0 is the actual fix - flex children default
     to min-width: auto (their unwrapped content width), which silently
     blocks wrapping even when white-space is normal. */
  .hero-social-proof {
    width: 100%;
    align-items: flex-start;
  }

  .hero-review-text {
    min-width: 0;
  }

  .hero-review-label {
    white-space: normal;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-number {
    font-size: 3rem;
  }

  .process-steps {
    gap: 0;
  }

  .trust-list {
    grid-template-columns: 1fr;
  }

  /* Static source forces .trust-text strong/span to white-space: nowrap at
     every width. At 480px and below, several trust items' text is wider
     than the column, so it silently overflowed instead of wrapping - and
     the flex child's default min-width: auto blocked wrapping even where
     white-space allowed it (same root cause as the Job 2 hero-review-text
     fix). Fixed here only, for this breakpoint - desktop's tight one-line
     look is unaffected. */
  .trust-text {
    min-width: 0;
  }

  .trust-text strong,
  .trust-text span {
    white-space: normal;
  }

  /* .trust-item's base rule uses justify-content: center, which centers
     each row's icon+text as its OWN unit - fine on desktop, where the grid
     column widths are equal, but on this single-column mobile layout every
     row's icon lands at a different horizontal position depending on that
     row's own content width, so the icons never line up in a column.
     flex-start anchors every row's icon (and its text) to the same left
     edge instead. */
  .trust-item {
    justify-content: flex-start;
  }

  .section-header {
    margin-bottom: 36px;
  }

  .about-images {
    padding-right: 0;
    padding-bottom: 120px;
  }

  .about-img-secondary {
    width: 70%;
  }

  .cta-buttons {
    flex-direction: column;
  }

  .cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   29. FOCUS STYLES (ACCESSIBILITY)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   VIDEO SECTION
   -------------------------------------------------------------------------- */
.video-section {
  text-align: center;
}

.video-embed-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.video-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: 0 24px 80px rgba(var(--color-forest-rgb), 0.18);
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius-card);
}

/* --------------------------------------------------------------------------
   ABOUT CTAs (BROCHURE DOWNLOAD BUTTON)
   -------------------------------------------------------------------------- */
.about-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

@media (max-width: 480px) {
  .about-ctas {
    flex-direction: column;
  }
  .about-ctas .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   30. PRINT STYLES
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .mobile-menu,
  .sticky-cta,
  .scroll-indicator {
    display: none !important;
  }
}