/* ==========================================================================
   All Trade Solutions: Design System
   Brand: charcoal / white / All Trade green / light neutral gray
   ========================================================================== */

:root {
  /* Brand colors (green sampled from official logo) */
  --green: #6aad29;
  --green-dark: #4f8a1c;
  --green-darker: #3d6b16;
  --green-light: #eaf3e1;
  --green-tint: #f3f8ee;

  --charcoal: #1a1d1b;
  --charcoal-soft: #23271f;
  --black: #101210;

  --white: #ffffff;
  --gray-50: #f7f8f6;
  --gray-100: #f0f2ed;
  --gray-200: #e3e6df;
  --gray-300: #cdd1c7;
  --gray-500: #8a8f85;
  --gray-600: #5c625a;
  --gray-700: #40453f;
  --gray-800: #2b2e2a;

  --font-head: "Archivo", "Arial Narrow", Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --container: 1200px;
  --container-narrow: 820px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 3px rgba(16, 18, 16, 0.08), 0 1px 2px rgba(16, 18, 16, 0.06);
  --shadow-md: 0 6px 16px rgba(16, 18, 16, 0.10), 0 2px 6px rgba(16, 18, 16, 0.06);
  --shadow-lg: 0 16px 40px rgba(16, 18, 16, 0.16);

  --header-h: 84px;
  --header-h-scrolled: 68px;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Default icon sizing. Every inline icon SVG in this project uses
   aria-hidden="true" (see icons.py). Without an explicit width/height,
   browsers fall back to a 300x150 replaced-element box, so this default
   is required; specific components override it below as needed. */
svg[aria-hidden="true"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.dropdown-caret {
  width: 14px;
  height: 14px;
}

.btn svg {
  width: 18px;
  height: 18px;
}

.trust-bar li svg,
.hero-trust li svg,
.footer-contact svg,
.card-link svg,
.related-link .rl-icon svg {
  width: 16px;
  height: 16px;
}

.chip svg {
  width: 15px;
  height: 15px;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* overflow-x: hidden on html is what actually clips the mobile off-canvas
   nav panel (.main-nav, translated fully off-screen with translateX(100%)
   at mobile widths): that panel is position: fixed, and a fixed element's
   contribution to horizontal scroll overflow is only clipped by the true
   root scrolling box, not by an overflow:hidden set lower down (e.g. on
   body or main). Removing it from html (tried while chasing the header
   bug below) brought back real horizontal overflow on every page. So it
   has to stay on html. */
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  /* Reserves the space the fixed header used to occupy naturally when it
     was position: sticky (see .site-header below for why it's fixed
     instead). Transitions together with the header's own shrink so the
     boundary between header and content stays seamless at both sizes. */
  padding-top: var(--header-h);
  transition: padding-top 0.2s ease;
}

body.is-scrolled {
  padding-top: var(--header-h-scrolled);
}

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

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

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.14;
  margin: 0 0 0.5em;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
}

h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.35rem);
}

h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
}

h4 {
  font-size: 1.1rem;
}

p {
  margin: 0 0 1em;
  color: var(--gray-700);
}

.lede {
  font-size: 1.15rem;
  color: var(--gray-700);
}

strong {
  color: var(--charcoal);
}

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 88px 0;
}

.section-tight {
  padding: 56px 0;
}

@media (max-width: 900px) {
  .section {
    padding: 60px 0;
  }
  .section-tight {
    padding: 40px 0;
  }

  /* Two plain (same-background) sections stacked back to back otherwise
     add up to 120px+ of dead whitespace between them on a short mobile
     screen, since each contributes its own top and bottom padding with
     no color change to justify the gap. Collapse it to a single gap. */
  :is(.section, .section-tight):not(.section-alt):not(.section-charcoal)
    + :is(.section, .section-tight):not(.section-alt):not(.section-charcoal) {
    padding-top: 0;
  }
}

.section-alt {
  background: var(--gray-50);
}

.section-charcoal {
  background: var(--charcoal);
  color: var(--white);
}

.section-charcoal h2,
.section-charcoal h3,
.section-charcoal p {
  color: var(--white);
}

.section-charcoal .eyebrow {
  color: var(--green);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-darker);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--green);
}

.section-head {
  max-width: 680px;
  margin-bottom: 44px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head p {
  font-size: 1.08rem;
}

.grid {
  display: grid;
  gap: 28px;
}

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

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

@media (max-width: 980px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}

/* Standalone (non-hero) CTAs used inline in body copy, e.g. "Learn More"
   under a checklist, or a secondary call/services pair under a section's
   copy. These share the base .btn padding by default, which reads as
   noticeably smaller/plainer next to the site's many .btn-lg hero and
   CTA-band buttons. Bump padding, gap and type size for just this
   default-size, non-block tier so it reads as an intentional, finished
   button instead of an undersized afterthought, without touching the
   already-sized .btn-lg/.btn-sm tiers or the full-width mobile bars. */
.btn:not(.btn-lg):not(.btn-sm):not(.btn-block) {
  padding: 18px 30px;
  gap: 10px;
}

.btn svg {
  flex-shrink: 0;
}

.btn-primary {
  background: var(--green-darker);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--green-darker);
  filter: brightness(0.88);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-dark {
  background: var(--charcoal);
  color: var(--white);
}

.btn-dark:hover {
  background: var(--black);
  transform: translateY(-1px);
}

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

.btn-outline:hover {
  background: var(--charcoal);
  color: var(--white);
}

.btn-outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.btn-outline-light:hover {
  background: var(--white);
  color: var(--charcoal);
  border-color: var(--white);
}

.btn-phone {
  background: var(--white);
  color: var(--charcoal);
  border-color: var(--white);
}

.btn-phone:hover {
  background: transparent;
  color: var(--white);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 18px 34px;
  font-size: 1.05rem;
}

.btn-sm {
  padding: 10px 18px;
  font-size: 0.88rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.phone-link {
  font-weight: 700;
  color: inherit;
}

/* ---- Header ---- */
/* position: fixed rather than sticky. The site also needs overflow-x:
   hidden on html (to clip the mobile nav panel below, see the html rule
   near the top of this file) and that turns html into its own scroll
   container, which makes a position: sticky descendant of body track
   that container instead of the real page scroll, so it visibly scrolls
   away instead of staying put. position: fixed is anchored to the
   viewport regardless of that, so it isn't affected. Since fixed removes
   the header from normal flow entirely (sticky only does that once
   "stuck"), body's own padding-top stands in for the flow space the
   header used to reserve; see body/body.is-scrolled above. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  border-bottom: 1px solid var(--gray-200);
}

/* The translucent blur lives on a ::before rather than directly on
   .site-header, because backdrop-filter (like transform/filter) creates a
   new containing block for fixed-position descendants, which would trap
   the fixed, full-viewport mobile nav panel inside the header's own box
   instead of letting it cover the screen. The same is true of transform,
   so the iOS Safari backdrop-filter + compositing fix (promoting to its
   own layer so the blur doesn't flicker/drop a frame while scrolling)
   is applied to this ::before itself rather than to .site-header, which
   would otherwise trap .main-nav the same way. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(6px);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  transition: height 0.2s ease;
  gap: 20px;
}

.site-header.is-scrolled .header-inner {
  height: var(--header-h-scrolled);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand img.brand-icon {
  height: 46px;
  width: auto;
  transition: height 0.2s ease;
}

.brand img.brand-word {
  height: 32px;
  width: auto;
  transition: height 0.2s ease;
}

.site-header.is-scrolled .brand img.brand-icon {
  height: 38px;
}

.site-header.is-scrolled .brand img.brand-word {
  height: 26px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 2px;
}

.main-nav a.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--charcoal);
  border-radius: var(--radius-sm);
}

.main-nav a.nav-link:hover,
.main-nav li.active > a.nav-link {
  color: var(--green-dark);
}

.has-dropdown {
  position: relative;
}

.dropdown-caret {
  transition: transform 0.15s ease;
}

.has-dropdown:hover .dropdown-caret {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: -14px;
  width: 560px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

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

.dropdown-menu a {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  gap: 2px;
}

.dropdown-menu a:hover {
  background: var(--green-tint);
}

.dropdown-menu a strong {
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--charcoal);
}

.dropdown-menu a span {
  font-size: 0.8rem;
  color: var(--gray-600);
}

.dropdown-menu .dropdown-footer {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown-menu .dropdown-footer a {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--green-dark);
  font-size: 0.88rem;
  padding: 4px 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--charcoal);
}

.header-phone svg {
  color: var(--green);
  flex-shrink: 0;
}

.header-phone small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
}

.menu-toggle span {
  width: 24px;
  height: 2.5px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---- Mobile nav ---- */
@media (max-width: 1080px) {
  .main-nav {
    position: fixed;
    inset: 0;
    top: var(--header-h-scrolled);
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 20px 100px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 490;
  }

  .main-nav.is-open {
    transform: translateX(0);
  }

  .main-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-nav a.nav-link {
    padding: 16px 6px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 1.05rem;
    justify-content: space-between;
  }

  .dropdown-menu {
    position: static;
    width: auto;
    grid-template-columns: 1fr;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    padding: 4px 0 10px 12px;
  }

  .has-dropdown.open .dropdown-menu {
    display: grid;
  }

  .has-dropdown.open .dropdown-caret {
    transform: rotate(180deg);
  }

  .header-phone {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .menu-toggle.is-active span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }

  .menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }

  .header-actions .btn {
    display: none;
  }
}

@media (min-width: 1081px) {
  .mobile-only-cta {
    display: none;
  }
}

/* ---- Trust bar ---- */
.trust-bar {
  background: var(--charcoal);
  color: var(--white);
  padding: 15px 0;
}

.trust-bar ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 34px;
}

.trust-bar li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.trust-bar li svg {
  color: var(--green);
  flex-shrink: 0;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  background: var(--charcoal) url("/assets/images/generated/hero-home-main.webp") center 62% / cover no-repeat;
  color: var(--white);
  overflow: hidden;
  border-bottom: 4px solid var(--green);
}

/* A real photo now sits behind the hero (see .hero background above). This
   scrim is the same brand gradient as before, just with alpha added, so the
   dark, on-brand hero look is unchanged but the photo reads through as
   texture and depth instead of the old flat gradient. Kept dark enough to
   hold full contrast for the white heading/body text on top. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 82% 15%, rgba(106, 173, 41, 0.25), transparent 55%),
    linear-gradient(160deg, rgba(26, 29, 27, 0.92) 0%, rgba(35, 39, 31, 0.88) 60%, rgba(26, 29, 27, 0.94) 100%);
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  z-index: 0;
  mask-image: linear-gradient(180deg, black, transparent 85%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 50px;
  align-items: center;
  /* padding-top/bottom only: this element also carries the shared
     .container class, which supplies the 24px left/right gutter. A
     shorthand `padding` here would zero that gutter out (it did before
     this fix), leaving every bit of hero content flush against the
     screen edges on mobile with no side margin at all. */
  padding-top: 76px;
  padding-bottom: 64px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(106, 173, 41, 0.15);
  border: 1px solid rgba(106, 173, 41, 0.4);
  color: var(--green);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 30px;
  margin-bottom: 22px;
}

.hero h1 {
  color: var(--white);
  margin-bottom: 18px;
}

.hero h1 .accent {
  color: var(--green);
}

.hero .lede {
  color: var(--gray-300);
  font-size: 1.2rem;
  max-width: 560px;
  margin-bottom: 30px;
}

.hero-trust {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.hero-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--gray-300);
}

.hero-trust li svg {
  color: var(--green);
}

.hero-visual {
  position: relative;
}

.hero-panel {
  position: relative;
  background: linear-gradient(155deg, #262b22 0%, #1c1f1a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-lg);
}

.hero-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.hero-tile {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-tile .tile-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(106, 173, 41, 0.16);
  border-radius: var(--radius-sm);
  color: var(--green);
  overflow: hidden;
}

.hero-tile .tile-icon.tile-icon-media {
  width: 52px;
  height: 52px;
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-tile .tile-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-tile strong {
  font-family: var(--font-head);
  font-size: 0.92rem;
  color: var(--white);
}

.hero-tile span {
  font-size: 0.78rem;
  color: var(--gray-500);
}

.hero-panel-footer {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hero-panel-footer .label {
  font-size: 0.78rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-head);
  font-weight: 700;
}

.hero-panel-footer strong {
  color: var(--green);
  font-family: var(--font-head);
}

.hero-panel-footer .brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-panel-footer .brand-lockup img {
  height: 24px;
  width: auto;
  background: var(--white);
  padding: 5px;
  border-radius: 6px;
  box-sizing: content-box;
}

.hero-panel-footer .brand-lockup strong {
  font-size: 0.98rem;
}

@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding-top: 48px;
    padding-bottom: 44px;
  }
  .hero .lede {
    max-width: none;
  }
}

@media (max-width: 700px) {
  /* The desktop hero packs a badge, heading, two paragraphs, two large
     buttons, a trust list, AND a graphic tile panel that just repeats
     the four service categories shown properly (with real cards) two
     sections down. Stacked full-width on a phone that reads as a wall
     of text before any real content, not a tightened, mobile-specific
     hero. Trim it down to one clear line of copy and one clear pair of
     actions instead of reproducing the whole desktop layout vertically. */
  .hero-subtext,
  .hero-visual {
    display: none;
  }

  /* Center the whole hero column on mobile: badge, heading, copy,
     buttons, and trust list all centered as a group. */
  .hero-inner > div:first-child {
    text-align: center;
  }

  .hero-badge {
    margin-bottom: 16px;
  }

  .hero h1 {
    margin-bottom: 14px;
  }

  .hero .lede {
    font-size: 1.05rem;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero .cta-row {
    justify-content: center;
  }

  .hero .cta-row .btn-lg {
    padding: 15px 22px;
    font-size: 0.98rem;
  }

  .hero-trust {
    margin-top: 22px;
    gap: 8px 20px;
    justify-content: center;
  }

  .hero-trust li {
    font-size: 0.84rem;
  }
}

/* ---- Page hero (interior pages) ---- */
.page-hero {
  background: var(--charcoal);
  color: var(--white);
  padding: 56px 0 44px;
  position: relative;
  border-bottom: 4px solid var(--green);
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 85% 0%, rgba(106, 173, 41, 0.18), transparent 55%);
}

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

/* Media variant: a real photo behind the service-page hero instead of a
   flat charcoal panel. The image sits at z-index 0, a left-to-right dark
   gradient scrim (z-index 1, replacing the plain radial glow) keeps the
   breadcrumb/h1/lede legible over it since that's exactly where the text
   sits, and it stays darkest on the left and eases off toward the right
   so the photo still reads. */
.page-hero.has-media {
  padding: 96px 0 70px;
}

.page-hero .hero-bg-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero.has-media::before {
  background: linear-gradient(100deg, rgba(10, 12, 10, 0.93) 0%, rgba(10, 12, 10, 0.86) 32%, rgba(10, 12, 10, 0.6) 60%, rgba(10, 12, 10, 0.3) 100%);
}

@media (max-width: 720px) {
  .page-hero.has-media {
    padding: 76px 0 56px;
  }

  .page-hero.has-media::before {
    background: rgba(10, 12, 10, 0.88);
  }
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: 0.84rem;
  color: var(--gray-500);
  margin: -10px 0 8px;
  font-family: var(--font-head);
  font-weight: 600;
}

.breadcrumbs a {
  display: inline-block;
  color: var(--gray-300);
  padding: 10px 4px;
}

.breadcrumbs [aria-current="page"] {
  display: inline-block;
  padding: 10px 4px;
}

.breadcrumbs a:hover {
  color: var(--green);
}

.breadcrumbs .sep {
  color: var(--gray-600);
}

.page-hero h1 {
  color: var(--white);
  max-width: 780px;
  margin-bottom: 14px;
}

.page-hero .lede {
  color: var(--gray-300);
  max-width: 680px;
  font-size: 1.1rem;
  margin-bottom: 26px;
}

/* ---- Cards ---- */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--gray-300);
}

.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card .card-media {
  position: relative;
  aspect-ratio: 16/10;
  background: linear-gradient(150deg, var(--charcoal), var(--charcoal-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.service-card .card-media svg {
  width: 56px;
  height: 56px;
  color: var(--green);
  position: relative;
  z-index: 1;
}

.service-card .card-media img.card-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.service-card:hover .card-media img.card-illustration {
  transform: scale(1.04);
}

.service-card .card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}

.service-card .card-media .media-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(16, 18, 16, 0.7);
  color: var(--gray-300);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 3px;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  z-index: 1;
}

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

.card-body h3 {
  margin-bottom: 8px;
}

.card-body p {
  font-size: 0.96rem;
  flex: 1;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--green-darker);
  margin: -6px 0 -12px -2px;
  padding: 12px 2px;
}

.card-link svg {
  transition: transform 0.15s ease;
}

.card:hover .card-link svg {
  transform: translateX(3px);
}

/* ---- Icon list / feature list ---- */
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-200);
}

.feature-list li:last-child {
  border-bottom: none;
}

.feature-list .feature-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--green-light);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-list h4 {
  margin-bottom: 3px;
  font-size: 1rem;
}

.feature-list p {
  margin: 0;
  font-size: 0.92rem;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-weight: 500;
  color: var(--charcoal);
}

.check-list svg {
  flex-shrink: 0;
  color: var(--green);
  margin-top: 3px;
}

/* ---- Stat / value chips ---- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  padding: 9px 16px;
  border-radius: 30px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.86rem;
}

.chip svg {
  color: var(--green-dark);
}

/* ---- Panels / graphic blocks (used in place of photography) ---- */
.graphic-panel {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--charcoal) 0%, var(--charcoal-soft) 100%);
  color: var(--white);
  padding: 40px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.graphic-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* The grid texture and glow are for the flat charcoal panels only; a real
   photo behind the panel already has its own detail, so the texture is
   dropped to keep the photo (and the badge/heading sitting on top of it)
   clean and legible instead of competing with a line pattern. */
.graphic-panel.has-illustration::before {
  display: none;
}

.graphic-panel::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 173, 41, 0.28), transparent 70%);
}

.graphic-panel .panel-icon {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  border-radius: var(--radius-md);
  background: rgba(106, 173, 41, 0.16);
  border: 1px solid rgba(106, 173, 41, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  margin-bottom: 20px;
}

.graphic-panel .panel-icon svg {
  width: 30px;
  height: 30px;
}

.graphic-panel h3,
.graphic-panel p {
  position: relative;
  z-index: 1;
  color: var(--white);
}

/* Panel caption: visually a heading-weight label, but not a real document
   heading (its text duplicates the page's own h1), so it's a styled
   paragraph instead of an h-tag to avoid a redundant/skipped heading. */
.graphic-panel .panel-caption {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.01em;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  margin: 0 0 0.5em;
}

.graphic-panel .media-tag {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  color: var(--gray-300);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 3px;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.graphic-panel.has-illustration .media-tag {
  background: rgba(10, 12, 10, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
}

/* Illustration variant: the generated service scene fills the panel as a
   background image; a bottom scrim keeps the heading/text legible over it. */
.graphic-panel.has-illustration {
  background: var(--charcoal);
}

.graphic-panel .panel-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.graphic-panel.has-illustration::after {
  background: linear-gradient(0deg, rgba(12, 14, 12, 0.94) 0%, rgba(12, 14, 12, 0.72) 45%, rgba(12, 14, 12, 0.38) 75%, rgba(12, 14, 12, 0.12) 100%);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  z-index: 1;
}

.graphic-panel .panel-icon,
.graphic-panel h3,
.graphic-panel p,
.graphic-panel .panel-caption,
.graphic-panel .media-tag {
  z-index: 2;
}

/* Signature variant: for a plain graphic-panel that has no photo behind it
   and still needs to read as deliberately designed rather than a flat
   generic box. Richer layered glow, a diagonal accent texture instead of a
   plain grid, a bigger badge-style icon with a glow ring, and a short
   checklist that gives the box real visual structure instead of just an
   icon and two lines of text. */
.graphic-panel.signature {
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}

.graphic-panel.signature::before {
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 28px);
  background-size: auto;
}

.graphic-panel.signature::after {
  top: auto;
  bottom: -90px;
  left: -70px;
  right: auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(106, 173, 41, 0.24), transparent 70%);
}

.graphic-panel.signature .panel-icon {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--green) 0%, var(--green-dark) 100%);
  border: none;
  color: var(--white);
  box-shadow: 0 0 0 6px rgba(106, 173, 41, 0.14), 0 14px 30px -10px rgba(106, 173, 41, 0.6);
}

.graphic-panel.signature .panel-icon::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(106, 173, 41, 0.4);
}

.graphic-panel.signature .panel-icon svg {
  width: 32px;
  height: 32px;
}

@media (prefers-reduced-motion: no-preference) {
  .graphic-panel.signature .panel-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(106, 173, 41, 0.5);
    animation: signature-pulse 2.6s ease-out infinite;
  }
}

@keyframes signature-pulse {
  0% { box-shadow: 0 0 0 0 rgba(106, 173, 41, 0.45); }
  70% { box-shadow: 0 0 0 18px rgba(106, 173, 41, 0); }
  100% { box-shadow: 0 0 0 0 rgba(106, 173, 41, 0); }
}

.graphic-panel.signature h3 {
  position: relative;
  padding-bottom: 16px;
}

.graphic-panel.signature h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green), transparent);
}

.graphic-panel .signature-list {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.graphic-panel .signature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--white);
}

.graphic-panel .signature-list svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--green);
}

/* photo-style placeholder frame (for real photography later) */
.photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(150deg, var(--gray-200), var(--gray-100));
  border: 1px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-frame.dark {
  background: linear-gradient(150deg, var(--charcoal-soft), var(--charcoal));
  border-color: rgba(255, 255, 255, 0.1);
}

.photo-frame img.frame-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-frame .frame-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  background: rgba(16, 18, 16, 0.72);
  color: var(--gray-300);
  font-size: 0.72rem;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 3px;
}

.photo-frame .frame-content {
  text-align: center;
  padding: 20px;
}

.photo-frame .frame-content svg {
  width: 42px;
  height: 42px;
  color: var(--green);
  margin: 0 auto 10px;
}

.photo-frame .frame-content span {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--gray-600);
}

.photo-frame.dark .frame-content span {
  color: var(--gray-300);
}

/* ---- Split section ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.split.reverse {
  direction: rtl;
}

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

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .split.reverse {
    direction: ltr;
  }
}

/* ---- Story / about styling ---- */
.story-quote {
  border-left: 4px solid var(--green);
  padding: 6px 0 6px 24px;
  margin: 26px 0;
  font-family: var(--font-head);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.4;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 52px;
  row-gap: 0;
  counter-reset: value-index;
  margin-top: 8px;
  border-bottom: 1px solid var(--gray-200);
}

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

.value-card {
  position: relative;
  counter-increment: value-index;
  text-align: left;
  padding: 28px 48px 28px 72px;
  border-top: 1px solid var(--gray-200);
}

.value-card::before {
  content: counter(value-index, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 30px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--gray-300);
  line-height: 1;
}

.value-card .v-icon {
  position: absolute;
  right: 0;
  top: 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.value-card .v-icon svg {
  width: 15px;
  height: 15px;
}

.value-card h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.value-card p {
  font-size: 0.9rem;
  margin: 0;
}

/* ---- Service area / map ---- */
.map-panel {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.map-embed-wrap {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--gray-100);
}

.map-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  gap: 8px;
  background:
    linear-gradient(rgba(26, 29, 27, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 29, 27, 0.03) 1px, transparent 1px),
    var(--gray-100);
  background-size: 26px 26px;
}

.map-placeholder svg {
  width: 40px;
  height: 40px;
  color: var(--green-dark);
}

.map-placeholder strong {
  font-family: var(--font-head);
  font-size: 1rem;
}

.map-placeholder span {
  font-size: 0.86rem;
  color: var(--gray-600);
  max-width: 320px;
}

.county-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.county-tag {
  background: var(--white);
  border: 1px solid var(--gray-200);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gray-700);
}

/* ---- Forms ---- */
.form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-md);
}

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

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.86rem;
  margin-bottom: 7px;
  color: var(--charcoal);
}

.field .req {
  color: var(--green-dark);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--charcoal);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(106, 173, 41, 0.18);
}

.field textarea {
  resize: vertical;
  min-height: 130px;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.radio-pill {
  position: relative;
}

.radio-pill input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.radio-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 18px;
  border: 1.5px solid var(--gray-300);
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gray-700);
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.radio-pill input:checked + span {
  background: var(--green-darker);
  border-color: var(--green-darker);
  color: var(--white);
}

.radio-pill input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(106, 173, 41, 0.3);
}

.file-drop {
  border: 1.5px dashed var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 22px;
  text-align: center;
  color: var(--gray-600);
  font-size: 0.88rem;
  position: relative;
  background: var(--gray-50);
}

.file-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.file-drop svg {
  color: var(--green-dark);
  margin-bottom: 8px;
}

.form-note {
  font-size: 0.8rem;
  color: var(--gray-600);
  margin-top: 6px;
}

.form-success {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

.form-success h2 {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
}

.form-success svg {
  color: var(--green);
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
}

/* ---- Contact info block ---- */
.contact-info-list li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-200);
  align-items: flex-start;
}

.contact-info-list li > div {
  min-width: 0;
}

.contact-info-list li:last-child {
  border: none;
}

.contact-info-list .ci-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--green-light);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-list strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.98rem;
}

.contact-info-list span,
.contact-info-list a {
  font-size: 0.94rem;
  color: var(--gray-600);
  overflow-wrap: anywhere;
}

.contact-info-list a {
  display: inline-block;
  padding: 9px 0;
  margin: -9px 0;
}

.contact-info-list a:hover {
  color: var(--green-dark);
}

/* ---- CTA band ---- */
.cta-band {
  background: linear-gradient(150deg, var(--charcoal), var(--charcoal-soft));
  color: var(--white);
  padding: 64px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(106, 173, 41, 0.2), transparent 60%);
}

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

.cta-band h2 {
  color: var(--white);
  margin-bottom: 10px;
}

.cta-band p {
  color: var(--gray-300);
  font-size: 1.08rem;
  max-width: 620px;
  margin: 0 auto 30px;
}

.cta-band .cta-row {
  justify-content: center;
}

/* ---- FAQ / accordion (used where helpful) ---- */
.accordion-item {
  border-bottom: 1px solid var(--gray-200);
}

.accordion-trigger {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--charcoal);
}

.accordion-trigger svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--green-dark);
}

.accordion-item.open .accordion-trigger svg {
  transform: rotate(45deg);
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease;
}

.accordion-panel-inner {
  padding-bottom: 20px;
  color: var(--gray-700);
  font-size: 0.96rem;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--charcoal);
  color: var(--gray-300);
  padding-top: 64px;
}

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

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

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

.footer-brand-plate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.footer-brand-plate img.brand-icon {
  height: 40px;
  width: auto;
}

.footer-brand-plate img.brand-word {
  height: 28px;
  width: auto;
}

.footer-tagline {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--white);
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.footer-col h3 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--white);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.footer-col ul li {
  margin-bottom: 2px;
}

.footer-col a:not(.btn) {
  display: inline-block;
  font-size: 0.92rem;
  color: var(--gray-300);
  padding: 9px 0;
}

.footer-col a:not(.btn):hover {
  color: var(--green);
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  margin-bottom: 2px;
}

.footer-contact a,
.footer-contact span {
  display: inline-block;
  padding: 9px 0;
}

.footer-contact svg {
  color: var(--green);
  flex-shrink: 0;
  margin-top: 10px;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.footer-badge {
  font-size: 0.72rem;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(106, 173, 41, 0.14);
  color: var(--green);
  border: 1px solid rgba(106, 173, 41, 0.3);
  padding: 6px 11px;
  border-radius: 30px;
}

.footer-bottom {
  padding: 22px 0 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--gray-500);
}

.footer-bottom .legal-links {
  display: flex;
  gap: 10px;
  margin: -10px 0;
}

.footer-bottom .legal-links a {
  display: inline-block;
  padding: 10px 4px;
}

.footer-bottom a:hover {
  color: var(--green);
}

/* ---- Sticky mobile CTA bar ---- */
.sticky-cta {
  display: none;
}

@media (max-width: 900px) {
  .sticky-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    box-shadow: 0 -4px 18px rgba(16, 18, 16, 0.18);
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }

  /* Every page already leads with its own "Get a Free Estimate" / "Call"
     buttons in the hero. Showing this bar at the same time doubled up
     every call-to-action on first load. main.js (initStickyCta) adds
     is-visible once that hero button row has scrolled out of view, so
     only one set of CTA buttons is ever on screen at once. */
  .sticky-cta.is-visible {
    transform: translateY(0);
  }

  .sticky-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 10px calc(15px + env(safe-area-inset-bottom));
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.96rem;
  }

  .sticky-cta a.call {
    background: var(--charcoal);
    color: var(--white);
  }

  .sticky-cta a.estimate {
    background: var(--green-darker);
    color: var(--white);
  }

  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
}

/* ---- Misc ---- */
.divider {
  height: 1px;
  background: var(--gray-200);
  margin: 40px 0;
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--green-darker);
  color: var(--white);
  padding: 12px 18px;
  z-index: 1000;
  font-family: var(--font-head);
  font-weight: 700;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

.text-center {
  text-align: center;
}

.mt-0 {
  margin-top: 0;
}

.small-note {
  font-size: 0.84rem;
  color: var(--gray-600);
}

table.plain-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

table.plain-table th,
table.plain-table td {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  font-size: 0.92rem;
}

table.plain-table th {
  background: var(--gray-50);
  font-family: var(--font-head);
}

.related-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .related-services {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .related-services {
    grid-template-columns: 1fr;
  }
}

.related-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
}

.related-link:hover {
  border-color: var(--green);
  color: var(--green-dark);
}

.related-link .rl-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--green-light);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.callout-box {
  background: var(--green-tint);
  border: 1px solid var(--green-light);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  margin: 28px 0;
}

.callout-box p {
  margin: 0;
  color: var(--gray-700);
}

.callout-box strong {
  color: var(--charcoal);
}

/* ---- Scroll reveal (see main.js initScrollReveal) ----
   The hidden starting state lives ONLY inside this media query, so
   prefers-reduced-motion: reduce users (and any browser without
   IntersectionObserver, which never adds these classes at all) simply
   see the final, fully visible layout with no animation step. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-pending {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }

  .reveal-pending.reveal-in {
    opacity: 1;
    transform: translateY(0);
  }
}