/* ============================================================
   G-UPROOTED — SHARED BRAND DESIGN SYSTEM
   Single source of truth for tokens + shared chrome/components.
   Linked by every page:  <link rel="stylesheet" href="/assets/brand.css" />
   Pair with /assets/brand-config.js (Tailwind CDN config).

   LOCKED GREEN PALETTE — derived from logo.png
   Green  #245F09  primary action: CTAs, icons, links, eyebrows, accents
   Deep   #1A380C  all dark surfaces (replaces template navy)
   Red    #BD1A27  RESERVED — emergency/urgency only

   Token names are GREEN-SEMANTIC. The old template token names
   (--glass-*, --ember*) and wash classes (.wash-navy-*, .wash-ember-*)
   survive ONLY as DEPRECATED aliases at the bottom of this file so that
   page bodies not yet rebuilt keep rendering in green. Remove an alias
   when its page's content pass no longer references it.
   ============================================================ */

:root {
  /* Brand green = primary action color (CTAs, icons, links, eyebrows, accents) */
  --green:         #245F09;   /* primary brand green */
  --green-hover:   #1B4A06;   /* darker — hover/active */
  --green-leaf:    #6FB23E;   /* bright leaf green — icons on deep-green surfaces */
  --green-bright:  #62B22E;   /* brighter accent — eyebrows/accents on dark photo/green surfaces */
  --green-pale:    #CFE8BD;   /* pale green — soft fills/badges */
  --green-ultra:   #EEF6E8;   /* ultra-pale green */
  /* Deep green surfaces + elevation */
  --deep:          #1A380C;   /* base dark surface */
  --deep-2:        #234A12;   /* elevated */
  --deep-3:        #2C5A16;   /* floating */
  --ink:           #1A380C;
  --ink-body:      #182B0E;   /* near-black green — body/headings on white */
  /* Reserved emergency red */
  --emergency:       #BD1A27;
  --emergency-hover: #A01620;
  /* Neutral text */
  --slate:         #4A5247;
  --slate-muted:   #7C857A;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; background: #fff; color: var(--ink-body); }
h1,h2,h3,h4 { font-family: 'Barlow', sans-serif; }

/* Light sections — pure white. Separation comes from dark-green bands,
   layered card shadows, dividers and spacing (no off-white fills). */
.section-dark { background: #FFFFFF; }
.section-mid  { background: #FFFFFF; }

/* Dark sections — layered deep-green radial depth (not a flat fill).
   Grain texture is layered on via the .atmo class where applied. */
.dark-section {
  position: relative;
  background-color: #1A380C;
  background-image:
    radial-gradient(ellipse 90% 75% at 12% -12%, rgba(58,112,28,0.34) 0%, transparent 58%),
    radial-gradient(ellipse 85% 70% at 100% 118%, rgba(11,34,5,0.62)  0%, transparent 56%),
    radial-gradient(ellipse 60% 50% at 82% 4%,   rgba(40,86,18,0.22)  0%, transparent 60%);
}

/* ---- Atmospheric depth for light sections (grain + corner wash) ---- */
.atmo { position: relative; overflow: hidden; }
.atmo > * { position: relative; z-index: 1; }
.atmo::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.05; background-size: 160px 160px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}
.atmo::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--wash, transparent);
}
.wash-deep-tr  { --wash: radial-gradient(ellipse 55% 48% at 100% 0%,   rgba(26,56,12,0.06) 0%, transparent 60%); }
.wash-deep-br  { --wash: radial-gradient(ellipse 55% 48% at 100% 100%, rgba(26,56,12,0.06) 0%, transparent 60%); }
.wash-deep-bl  { --wash: radial-gradient(ellipse 55% 48% at 0% 100%,   rgba(26,56,12,0.06) 0%, transparent 60%); }
.wash-green-tl { --wash: radial-gradient(ellipse 55% 48% at 0% 0%,     rgba(36,95,9,0.05) 0%, transparent 60%); }
.wash-green-tr { --wash: radial-gradient(ellipse 55% 48% at 100% 0%,   rgba(36,95,9,0.05) 0%, transparent 60%); }

.dark-section .text-white        { color: #fff !important; }
.dark-section .text-slate-light  { color: #9DB39A !important; }
.dark-section .btn-outline       { color: #fff; border-color: rgba(255,255,255,0.28); }
.dark-section .btn-outline:hover { border-color: rgba(255,255,255,0.60); background: rgba(255,255,255,0.06); }
.dark-section .divider           { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
.dark-section .section-title-accent { background: linear-gradient(90deg, transparent 0%, var(--green) 25%, var(--green) 75%, transparent 100%); }

.section-dark .text-white,
.section-mid  .text-white       { color: var(--ink-body); }
.section-dark .text-slate-light,
.section-mid  .text-slate-light { color: #54545F; }
.hero-bg .text-slate-light      { color: #9A9AA8; }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(26,56,12,0.12) 30%, rgba(26,56,12,0.12) 70%, transparent 100%);
}

.dark-cta-ramp {
  position: absolute; top: 0; left: 0; right: 0;
  height: 90px; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
}

.nav-wordmark {
  font-family: 'Barlow', sans-serif;
  font-weight: 800; font-size: 24px;
  letter-spacing: -0.02em; color: #fff; line-height: 1;
  transition: color 0.25s cubic-bezier(0.4,0,0.2,1);
}
.nav-wordmark .plus { color: var(--green); }
#navbar.scrolled .nav-wordmark { color: var(--ink-body); }

.footer-wordmark {
  font-family: 'Barlow', sans-serif;
  font-weight: 800; font-size: 28px;
  letter-spacing: -0.02em; color: #fff; line-height: 1;
}
.footer-wordmark .plus { color: var(--green); }

#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.40s cubic-bezier(0.4,0,0.2,1),
              border-color 0.40s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.40s cubic-bezier(0.4,0,0.2,1);
}
#navbar .text-slate-light          { color: rgba(255,255,255,0.68) !important; }
#navbar .hover\:text-white:hover   { color: rgba(255,255,255,1) !important; }
#navbar #hamburger                 { color: rgba(255,255,255,0.80) !important; border-color: rgba(255,255,255,0.18) !important; }
#mobile-menu                       { background: rgba(26,56,12,0.96); backdrop-filter: blur(18px); }
#mobile-menu a.mobile-nav-link     { color: rgba(255,255,255,0.68) !important; }
#mobile-menu a.mobile-nav-link:hover { color: rgba(255,255,255,1) !important; background: rgba(255,255,255,0.06) !important; }
#mobile-menu                       { border-top-color: rgba(255,255,255,0.08) !important; }

#navbar.scrolled {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-bottom-color: rgba(26,56,12,0.07);
  box-shadow: 0 1px 24px rgba(0,0,0,0.06);
}
#navbar.scrolled .text-slate-light         { color: var(--slate) !important; }
#navbar.scrolled .hover\:text-white:hover  { color: var(--ink-body) !important; }
#navbar.scrolled #hamburger                { color: var(--ink-body) !important; border-color: rgba(26,56,12,0.16) !important; }
#navbar.scrolled #mobile-menu              { background: #fff; }
#navbar.scrolled #mobile-menu a.mobile-nav-link       { color: var(--slate) !important; }
#navbar.scrolled #mobile-menu a.mobile-nav-link:hover { color: var(--ink-body) !important; background: rgba(26,56,12,0.04) !important; }
#navbar.scrolled #mobile-menu { border-top-color: rgba(26,56,12,0.08) !important; }

.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 2px; background: var(--green);
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
}
.nav-link:hover::after { width: 100%; }

/* ── Services dropdown (desktop) ── */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-dropdown-trigger .nav-chev { transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
.nav-dropdown:hover .nav-chev,
.nav-dropdown:focus-within .nav-chev { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%;
  margin-top: 14px; min-width: 252px; padding: 8px;
  background: rgba(26,56,12,0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.34), 0 2px 8px rgba(0,0,0,0.18);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.4,0,0.2,1);
  z-index: 60;
}
.nav-dropdown-menu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block; padding: 10px 14px; border-radius: 9px;
  font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  color: rgba(255,255,255,0.70);
  transition: color 0.15s cubic-bezier(0.4,0,0.2,1), background 0.15s cubic-bezier(0.4,0,0.2,1);
}
.nav-dropdown-menu a:hover { color: #fff; background: rgba(255,255,255,0.07); }
.nav-dropdown-menu a[aria-current="page"] { color: #fff; font-weight: 700; background: rgba(36,95,9,0.16); }
#navbar.scrolled .nav-dropdown-menu {
  background: rgba(255,255,255,0.98); border-color: rgba(26,56,12,0.08);
  box-shadow: 0 18px 48px rgba(26,56,12,0.14), 0 2px 8px rgba(26,56,12,0.06);
}
#navbar.scrolled .nav-dropdown-menu a { color: var(--slate); }
#navbar.scrolled .nav-dropdown-menu a:hover { color: var(--ink-body); background: rgba(26,56,12,0.04); }
#navbar.scrolled .nav-dropdown-menu a[aria-current="page"] { color: var(--ink-body); background: rgba(36,95,9,0.12); }

/* ── Services dropdown (mobile) ── */
.mobile-services-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; cursor: pointer; font: inherit; text-align: left;
  color: rgba(255,255,255,0.68);
  transition: color 0.15s cubic-bezier(0.4,0,0.2,1), background 0.15s cubic-bezier(0.4,0,0.2,1);
}
.mobile-services-toggle:hover { color: #fff; background: rgba(255,255,255,0.06); }
.mobile-services-toggle .nav-chev { transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); flex-shrink: 0; }
.mobile-services-toggle[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
.mobile-services-submenu {
  display: none; flex-direction: column; gap: 2px;
  margin: 2px 0 2px 14px; padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.12);
}
.mobile-services-submenu.open { display: flex; }
.mobile-services-submenu a {
  padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.58);
  transition: color 0.15s cubic-bezier(0.4,0,0.2,1), background 0.15s cubic-bezier(0.4,0,0.2,1);
}
.mobile-services-submenu a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.mobile-services-submenu a[aria-current="page"] { color: #fff; font-weight: 700; }
#navbar.scrolled .mobile-services-toggle { color: var(--slate); }
#navbar.scrolled .mobile-services-toggle:hover { color: var(--ink-body); background: rgba(26,56,12,0.04); }
#navbar.scrolled .mobile-services-submenu { border-left-color: rgba(26,56,12,0.10); }
#navbar.scrolled .mobile-services-submenu a { color: var(--slate); }
#navbar.scrolled .mobile-services-submenu a:hover { color: var(--ink-body); background: rgba(26,56,12,0.04); }

.hero-bg { background: #1A380C; }
.hero-vignette {
  background: radial-gradient(ellipse 120% 100% at 50% 50%, transparent 35%, rgba(0,0,0,0.50) 100%);
  pointer-events: none;
}
.hero-bg .btn-outline { color: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.20); }
.hero-bg .btn-outline:hover { border-color: rgba(36,95,9,0.50); background: rgba(26,56,12,0.14); transform: translateY(-2px); }
@media (max-width: 767px) { .hero-text-block h1 { font-size: 2.15rem !important; } }

.btn-primary {
  background: var(--green); color: #fff;
  font-weight: 700; border-radius: 8px; padding: 14px 28px; font-size: 15px;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 18px rgba(36,95,9,0.30);
  transition: transform 0.18s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.18s cubic-bezier(0.4,0,0.2,1),
              background 0.18s cubic-bezier(0.4,0,0.2,1);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary:hover  { background: var(--green-hover); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(36,95,9,0.38); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(36,95,9,0.22); }
.btn-primary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.btn-outline {
  background: transparent; color: var(--ink-body);
  font-weight: 600; border: 1.5px solid rgba(26,56,12,0.22);
  border-radius: 8px; padding: 13px 28px; font-size: 15px;
  transition: transform 0.18s cubic-bezier(0.4,0,0.2,1),
              border-color 0.18s cubic-bezier(0.4,0,0.2,1),
              background 0.18s cubic-bezier(0.4,0,0.2,1);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-outline:hover  { border-color: var(--green); background: rgba(26,56,12,0.05); transform: translateY(-2px); }
.btn-outline:active { transform: translateY(0); }
.btn-outline:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.service-card {
  background: #fff; border: 1px solid rgba(26,56,12,0.07); border-radius: 16px; padding: 30px;
  box-shadow: 0 1px 2px rgba(26,56,12,0.05), 0 6px 18px rgba(26,56,12,0.10), 0 16px 40px rgba(26,56,12,0.09), 0 0 0 1px rgba(26,56,12,0.05);
  transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.24s cubic-bezier(0.4,0,0.2,1),
              border-color 0.24s cubic-bezier(0.4,0,0.2,1);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 20px 48px rgba(26,56,12,0.13), 0 0 0 1.5px rgba(26,56,12,0.20);
  border-color: transparent;
}
.service-card:active { transform: translateY(-2px); box-shadow: 0 2px 8px rgba(26,56,12,0.10), 0 10px 26px rgba(26,56,12,0.12); }
.service-card:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Feature card (inner pages) */
.feature-card {
  background: #fff; border: 1px solid rgba(26,56,12,0.07); border-radius: 16px; padding: 28px 24px;
  box-shadow: 0 1px 2px rgba(26,56,12,0.05), 0 6px 18px rgba(26,56,12,0.09), 0 16px 38px rgba(26,56,12,0.08);
  transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.24s cubic-bezier(0.4,0,0.2,1);
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 16px 36px rgba(26,56,12,0.11); }

/* Insurance / partner pill (inner pages) */
.insurer-pill {
  background: rgba(26,56,12,0.07); border: 1px solid rgba(26,56,12,0.16);
  border-radius: 100px; padding: 8px 20px; font-size: 14px; font-weight: 600;
  color: var(--green); display: inline-flex; align-items: center;
  transition: background 0.18s, border-color 0.18s, transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
.insurer-pill:hover { background: rgba(26,56,12,0.14); border-color: rgba(26,56,12,0.30); transform: translateY(-1px); }

/* Trust badge (inner pages) */
.trust-badge {
  background: rgba(26,56,12,0.07); border: 1px solid rgba(26,56,12,0.15);
  border-radius: 100px; padding: 6px 14px; font-size: 13px; font-weight: 500;
  color: var(--green); display: inline-flex; align-items: center; gap: 6px;
}
.hero-bg .trust-badge {
  background: rgba(36,95,9,0.12);
  border-color: rgba(36,95,9,0.28);
  color: var(--green-pale);
}

.section-title-accent {
  display: inline-block; width: 64px; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--green) 25%, var(--green) 75%, transparent 100%);
  border-radius: 2px; margin-bottom: 12px;
}
.icon-wrap {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, rgba(26,56,12,0.10) 0%, rgba(26,56,12,0.06) 100%);
  border: 1px solid rgba(26,56,12,0.14); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(26,56,12,0.09), inset 0 1px 0 rgba(255,255,255,0.60);
}
/* Trust icon (inner pages) — same green tint, no bottom margin */
.trust-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, rgba(26,56,12,0.10) 0%, rgba(26,56,12,0.06) 100%);
  border: 1px solid rgba(26,56,12,0.14); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(26,56,12,0.09), inset 0 1px 0 rgba(255,255,255,0.60);
}
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--green);
  transition: color 0.18s cubic-bezier(0.4,0,0.2,1), gap 0.18s cubic-bezier(0.4,0,0.2,1);
}
.link-arrow:hover { color: var(--green-hover); gap: 10px; }
.link-arrow:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

.area-card {
  background: linear-gradient(135deg, rgba(26,56,12,0.04) 0%, rgba(26,56,12,0.015) 100%), #fff;
  border: 1px solid rgba(26,56,12,0.12); border-radius: 18px; padding: 36px 40px;
  box-shadow: 0 1px 3px rgba(26,56,12,0.05), 0 10px 28px rgba(26,56,12,0.10), 0 22px 56px rgba(26,56,12,0.09), 0 0 0 1px rgba(26,56,12,0.06);
  transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.24s cubic-bezier(0.4,0,0.2,1);
}
.area-card:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(26,56,12,0.06), 0 16px 40px rgba(26,56,12,0.12), 0 30px 70px rgba(26,56,12,0.10), 0 0 0 1px rgba(26,56,12,0.08); }
.area-card:focus-within { box-shadow: 0 2px 6px rgba(26,56,12,0.06), 0 16px 40px rgba(26,56,12,0.12), 0 0 0 1.5px var(--green); }
.area-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-hover));
  box-shadow: 0 0 6px rgba(26,56,12,0.40); flex-shrink: 0;
}

/* Breadcrumb (inner pages) — sits on the dark hero */
.breadcrumb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.breadcrumb a { color: rgba(255,255,255,0.55); transition: color 0.18s; }
.breadcrumb a:hover { color: rgba(255,255,255,0.90); }
.breadcrumb .sep { color: rgba(255,255,255,0.30); }
.breadcrumb .current { color: rgba(255,255,255,0.80); }

#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

.fade-up {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.phone-pulse { animation: pulse-ring 2.5s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(36,95,9,0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(36,95,9,0); }
}

@media (min-width: 1024px) {
  .hero-outer {
    max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
    padding-left: clamp(48px, 5vw, 96px) !important; padding-right: 0 !important;
  }
  .hero-text-block { max-width: 600px !important; }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F3F3F6; }
::-webkit-scrollbar-thumb { background: #D0D0DA; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* ============================================================
   DEPRECATED BACKWARD-COMPAT ALIASES
   The template shipped a provisional red/navy "glass/ember" palette.
   These aliases remap the OLD token + wash names onto GREEN values so
   page bodies not yet rebuilt keep rendering on-brand. They are
   temporary: delete each alias when its page's content pass stops
   referencing it. DO NOT author new markup against these names.
   ============================================================ */
:root {
  --glass-primary: #245F09;   /* DEPRECATED → --green */
  --glass-hover:   #1B4A06;   /* DEPRECATED → --green-hover */
  --glass-light:   #2E7A0C;   /* DEPRECATED → green 400 */
  --glass-pale:    #CFE8BD;   /* DEPRECATED → --green-pale */
  --glass-ultra:   #EEF6E8;   /* DEPRECATED → --green-ultra */
  --ember:         #245F09;   /* DEPRECATED → --green (NOT emergency red) */
  --ember-hover:   #1B4A06;   /* DEPRECATED → --green-hover */
}
/* DEPRECATED wash aliases → green corner washes */
.wash-navy-tr  { --wash: radial-gradient(ellipse 55% 48% at 100% 0%,   rgba(26,56,12,0.06) 0%, transparent 60%); }
.wash-navy-br  { --wash: radial-gradient(ellipse 55% 48% at 100% 100%, rgba(26,56,12,0.06) 0%, transparent 60%); }
.wash-navy-bl  { --wash: radial-gradient(ellipse 55% 48% at 0% 100%,   rgba(26,56,12,0.06) 0%, transparent 60%); }
.wash-ember-tl { --wash: radial-gradient(ellipse 55% 48% at 0% 0%,     rgba(36,95,9,0.05) 0%, transparent 60%); }
.wash-ember-tr { --wash: radial-gradient(ellipse 55% 48% at 100% 0%,   rgba(36,95,9,0.05) 0%, transparent 60%); }

/* ============================================================
   PHOTO FRAME — shared showcase-photo treatment
   (rounded, layered green shadow, hover lift + subtle zoom).
   Mirrors the homepage's "Trees Are All We Do" photo; used in
   service/city intro right-columns. Authored against green tokens.
   ============================================================ */
.photo-frame {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 18px; background: #1A380C;
  box-shadow: 0 1px 2px rgba(26,56,12,0.06), 0 10px 28px rgba(26,56,12,0.15),
              0 22px 52px rgba(26,56,12,0.11), 0 0 0 1px rgba(26,56,12,0.07);
  transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.24s cubic-bezier(0.4,0,0.2,1);
}
.photo-frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.photo-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 22px 52px rgba(26,56,12,0.20),
              0 0 0 1.5px rgba(26,56,12,0.18);
}
.photo-frame:hover img { transform: scale(1.04); }
.photo-frame:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }