/* The Tree Firm, Inc. — site stylesheet
   One file, no build step. Colors, fonts and spacing live in the :root tokens
   below; change those first before adding new values anywhere else.

   Same layout system as the Naturally Green site ("Home Premium", Nov 2026):
   frosted glass header, full-width hero, tiles for services, a dark contact
   band and a light footer. The token names (--green, --lime) are kept so the
   two stylesheets stay comparable; here they hold The Tree Firm's browns, the
   same bark browns as the Tree Service tile on the Naturally Green home page,
   with white and a light tan accent (Nov 2026).
   No photos or drawings (Conor's call, Nov 2026): dark surfaces carry the
   growth-rings motif (images/rings.svg), tiles carry thin-line icons, and the
   mark is a line-drawn tree in a ring.
   REVIEW LATER: confirm these colors against the Tree Firm logo. */

:root {
  --green:       #6f4e37;   /* primary brand color (bark brown): buttons, headings */
  --green-dark:  #4b3526;   /* hover, dark bands, phone pill, BCMA tile */
  --lime:        #b08968;   /* accent (light tan): hovers, active item, focus outline, rings, hairlines on dark */
  --tan-light:   #d8c3b0;   /* small text on dark surfaces (eyebrows, credentials row): 6.7:1 on --green-dark */
  --ink:         #191919;   /* nav links, footer links, headings on white */
  --text:        #333333;   /* body copy */
  --text-soft:   #616161;   /* secondary copy */
  --wash:        #faf7f3;   /* very light section background, footer (warm white) */
  --rule:        #e6dfd7;   /* hairlines */
  --white:       #ffffff;


  /* Glass tints, mixed from the tokens above */
  --glass-light: color-mix(in srgb, var(--white) 72%, transparent);
  --glass-dark:  color-mix(in srgb, var(--green-dark) 55%, transparent);
  --glass-edge:  color-mix(in srgb, var(--white) 30%, transparent);
  --glass-blur:  blur(18px) saturate(140%);
  --radius-glass: 1.5rem;   /* tiles, credentials strip, contact cards */
  --header-h:    4.75rem;   /* 4rem under 860px; the hero runs under the header */

  --font: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 68ch;
  --wrap: 1140px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius-pill: 23rem;     /* fully-round buttons */
  --shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }   /* anchors clear the sticky header */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--lime); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  color: var(--green);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1em; max-width: var(--measure); }
ul { padding-left: 1.2em; }
li { margin-bottom: 0.35em; }

/* Section statement: larger heading for home page sections and the contact band */
.display { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; }

/* Small label above a heading. Brown on white; light tan on dark surfaces. */
.eyebrow {
  display: block; margin: 0 0 0.75rem; max-width: none;
  font-size: 0.8rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--eyebrow-color, var(--green));
}
.hero, .page-header, .band, .svc-panel, .tile-panel { --eyebrow-color: var(--tan-light); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 60;
  background: var(--green); color: var(--white);
  padding: 0.6rem 1rem; border-radius: 6px;
}
.skip-link:focus { top: 1rem; color: var(--white); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Reusable pill button */
.button {
  display: inline-block; background: var(--green); color: var(--white);
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0;
  padding: 0.9rem 2.2rem; border-radius: var(--radius-pill);
  border: 1.5px solid var(--green); transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.button:hover { background: var(--lime); border-color: var(--lime); color: var(--white); }
.button-outline { background: transparent; color: var(--green); }
.button-outline:hover { background: var(--green); color: var(--white); border-color: var(--green); }
.button-white { background: var(--white); color: var(--green); border-color: var(--white); }
.button-white:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.button-outline-white { background: transparent; color: var(--white); border-color: var(--white); }
.button-outline-white:hover { background: var(--white); color: var(--green); border-color: var(--white); }
.button-white:focus-visible, .button-outline-white:focus-visible { outline-color: var(--white); }

/* Quiet secondary action beside a button: underline that draws away on hover.
   White, for use on photos and dark bands. */
.text-link {
  font-weight: 600; color: var(--white); padding: 0.4rem 0;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size 0.3s ease;
}
.text-link:hover { color: var(--white); background-size: 0% 1px; }
.text-link:focus-visible { outline-color: var(--white); }
@media (prefers-reduced-motion: reduce) { .text-link { transition: none; } }

.center { text-align: center; }
.center p { margin-inline: auto; }

/* ---------- Header: frosted glass, sticky, runs over the hero ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40; height: var(--header-h);
  border-bottom: 1px solid var(--glass-edge);
}
/* The glass sits on a layer behind the header rather than on the header itself,
   so the dropdown and mobile menu inside it can frost the page too. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.header-inner { display: flex; align-items: center; gap: clamp(0.75rem, 1.5vw, 1.25rem); height: 100%; }
/* Logo: line-drawn tree mark (images/mark.svg, inline) and a text wordmark,
   both in --mark-color: white on the see-through header, brown on the bar. */
.brand { display: flex; align-items: center; gap: 0.65rem; color: var(--mark-color); }
.brand:hover { color: var(--mark-color); }
.brand-mark { width: 2.5rem; height: 2.5rem; flex: none; }
.brand-text { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }

.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.nav li { margin: 0; position: relative; }
.nav a {
  display: block; padding: 0.5rem clamp(0.5rem, 0.9vw, 0.95rem);
  color: var(--ink); font-weight: 600; font-size: clamp(0.88rem, 1vw, 0.95rem);
  white-space: nowrap; border-radius: var(--radius-pill);
}
.nav a:hover { color: var(--green); background: var(--glass-light); }
.nav a[aria-current="page"] { color: var(--green); background: var(--white); }
/* On a service page, a tan underline under "Services" shows which section you're in */
.nav .is-section > a { text-decoration: underline 2px var(--lime); text-underline-offset: 0.45em; }
.nav .has-menu > a::after {
  content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.45em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.2em) rotate(45deg);
}

/* Services dropdown: opens on hover or keyboard focus, no JavaScript */
.nav .submenu {
  display: none; position: absolute; top: calc(100% + 0.5rem); left: 0;
  min-width: 17rem; padding: 0.5rem; margin: 0; list-style: none;
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: 1rem; box-shadow: var(--shadow);
}
.nav .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.5rem; height: 0.5rem; } /* hover bridge */
.nav .submenu a { white-space: normal; border-radius: 0.6rem; padding: 0.55rem 0.9rem; }
.nav .submenu a:hover { background: var(--white); }
.nav .has-menu:hover .submenu, .nav .has-menu:focus-within .submenu { display: block; }

/* Phone pill at the far right; a round icon button on phones */
.nav-phone {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: none; white-space: nowrap;
  background: var(--green-dark); color: var(--white); font-weight: 600; font-size: 0.95rem;
  padding: 0.55rem 1.2rem; border-radius: var(--radius-pill);
}
.nav-phone:hover { background: var(--green); color: var(--white); }
.nav-phone svg { width: 1rem; height: 1rem; }

.nav-toggle {
  display: none; flex: none; font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-pill);
  padding: 0.45rem 1rem; cursor: pointer;
}
.nav-toggle:hover { color: var(--green); border-color: var(--green); }

@media (max-width: 860px) {
  :root { --header-h: 4rem; }
  .brand-mark { width: 2.1rem; height: 2.1rem; }
  .nav-phone { margin-left: auto; padding: 0; width: 2.5rem; height: 2.5rem; justify-content: center; }
  .nav-phone-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-toggle { display: inline-block; }
  .nav { display: none; }
  .nav.is-open {
    display: block; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 0.5rem);
    background: var(--glass-light);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge); border-radius: 1rem; padding: 0.75rem; box-shadow: var(--shadow);
  }
  .nav ul { flex-direction: column; }
  .nav .has-menu > a::after { display: none; }
  .nav .submenu {
    display: block; position: static; min-width: 0; padding: 0 0 0 1rem;
    background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* See-through header: at the very top of a page the header sits directly on
   the dark banner (white mark and links, no frosted bar) and turns into the
   frosted bar over the first 80px of scrolling. CSS scroll-driven animation,
   no JavaScript. Browsers without scroll timelines (Firefox today) keep the
   frosted bar with the brown mark. */
@property --nav-link { syntax: "<color>"; inherits: true; initial-value: #191919; }
@property --mark-color { syntax: "<color>"; inherits: true; initial-value: #6f4e37; }
@supports (animation-timeline: scroll()) {
  body:not(.snow) .site-header,
  body:not(.snow) .site-header::before {
    animation-timeline: scroll(root); animation-range: 0px 80px;
    animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
  }
  body:not(.snow) .site-header { animation-name: header-solid; }
  body:not(.snow) .site-header::before { animation-name: header-fade-in; }
  @media (min-width: 861px) {
    /* low specificity so :hover and the current-page pill keep their brown */
    .nav > ul > li > a { color: var(--nav-link); }
  }
}
@keyframes header-solid {
  from { border-bottom-color: transparent; --nav-link: var(--white); --mark-color: var(--white); }
  to   { border-bottom-color: var(--glass-edge); --nav-link: var(--ink); --mark-color: var(--green); }
}
@keyframes header-fade-in  { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Hero: dark bark with the growth rings ----------
   No photos: a dark bark panel with a warm glow at the bottom right and the
   growth rings cropped at that corner. The eyebrow, headline, sub-line,
   buttons and credentials row rise in once on page load. Short enough that
   the services heading shows on the first screen. With "reduce motion" on,
   nothing moves. */
:root { --hero-h: min(68vh, 640px); }   /* also sizes the services heading strip below it */
.hero {
  position: relative; overflow: hidden;
  margin-top: calc(-1 * var(--header-h));     /* runs under the glass header */
  height: var(--hero-h); min-height: 24rem;
  display: flex; align-items: flex-end;
  background:
    radial-gradient(70rem 36rem at 88% 100%, color-mix(in srgb, var(--green) 85%, var(--lime)) 0%, transparent 60%),
    var(--green-dark);
  --rings-size: 56rem; --rings-pos: right -16rem bottom -20rem;
}
/* Tall desktop screens: the banner grows with the screen so the services
   heading still sits just above the bottom edge, instead of leaving a band
   of white under it. Laptops keep the height above. */
@media (min-width: 1024px) and (min-height: 880px) {
  :root { --hero-h: max(min(68vh, 640px), calc(50svh + 17.5rem)); }
}
/* Under 1024px the hero grows with its content, so nothing is cut off */
@media (max-width: 1023px) {
  .hero { height: auto; min-height: var(--hero-h); padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 3rem)); }
}

/* Growth rings: one background layer shared by every dark surface. Each
   surface sets its own size and position with --rings-size and --rings-pos. */
.hero::before, .page-header::before, .band::before, .tile-panel::before, .svc-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/images/rings.svg") var(--rings-pos, right -12rem bottom -12rem) / var(--rings-size, 40rem) auto no-repeat;
  opacity: var(--rings-opacity, 1);
}

.hero .eyebrow, .hero .headline, .hero .sub, .hero .hero-actions, .hero-trust { animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero .headline { animation-delay: 0.08s; }
.hero .sub { animation-delay: 0.2s; }
.hero .hero-actions { animation-delay: 0.32s; }
.hero-trust { animation-delay: 0.45s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero .headline, .hero .sub, .hero .hero-actions, .hero-trust { animation: none; }
}
.hero-inner { position: relative; z-index: 1; padding-bottom: clamp(1.5rem, 4.5vh, 3.5rem); }
.hero-copy { max-width: 46rem; }
.hero .headline {
  color: var(--white); font-weight: 700; line-height: 1.02; letter-spacing: -0.04em;
  font-size: clamp(2.5rem, 6vw, 4.75rem); margin: 0 0 0.25em;
}
.hero .sub { color: var(--white); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 46ch; margin: 0 0 1.75rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
@media (max-width: 639px) {
  .hero-actions .button { flex: 1 1 100%; text-align: center; }
  .hero-actions .text-link { margin-inline: auto; }
}
/* Credentials row along the bottom of the hero */
.hero-trust {
  list-style: none; margin: clamp(1.5rem, 3.5vh, 2.5rem) 0 0; padding: 1rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--lime) 40%, transparent);
  display: flex; flex-wrap: wrap; gap: 0.5rem 0;
  color: var(--tan-light); font-size: 0.8rem; font-weight: 700; line-height: 1.4;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.hero-trust li { margin: 0; }
.hero-trust li + li::before {
  content: ""; display: inline-block; width: 1px; height: 1em; margin: 0 1.25rem; vertical-align: -0.15em;
  background: color-mix(in srgb, var(--lime) 50%, transparent);
}
@media (max-width: 639px) {
  .hero-trust { flex-direction: column; gap: 0.35rem; }
  .hero-trust li + li::before { display: none; }
}
@media (min-width: 1024px) and (max-height: 679px) { .hero-trust { display: none; } }   /* short laptop screens */

/* Every page moves like a set of pages: each scroll gesture snaps to the
   next section (every <section> directly inside <main>, then the footer),
   and can't skip one. A section taller than the screen scrolls freely
   inside before the next snap. The service names (.svc-row) are a stop
   only where they would otherwise be skipped: on phones (after the text)
   and short screens. */
html { scroll-snap-type: y mandatory; }
main > section { scroll-snap-align: start; scroll-snap-stop: always; }
.site-footer { scroll-snap-align: end; }
@media (max-width: 639px), (max-height: 700px) {
  main > .svc-row { scroll-snap-align: start; scroll-snap-stop: always; }
}

/* Desktop: each home section is one screen tall (under the header), with its
   content centred, and tightened so it fits; tile rows shrink a little on
   shorter screens. */
@media (min-width: 820px) and (min-height: 600px) {
  .hero ~ #services, .hero ~ #about {
    min-height: calc(100svh - var(--header-h) - 1rem);
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(1rem, 3vh, 2.5rem);
  }
  .hero ~ .section-services .services-head { margin-bottom: clamp(1.25rem, 3vh, 2.5rem); }
  .hero ~ .section-services .bento { grid-template-rows: repeat(2, clamp(6.5rem, calc((100svh - 33rem) / 2), 13rem)); }
  .hero ~ .section-services .bento-three { grid-template-rows: clamp(8rem, calc(100svh - 34rem), 13rem) auto; }
  .hero ~ #about .feature-pair { gap: 1rem; }
  .hero ~ .band { padding-block: clamp(2rem, 5vh, 5rem); }
}
/* 1024px+ wide: the services heading fills the white strip under the hero
   on the first screen, centred in it. The next scroll stops at the tiles
   (not the section top), and the tiles and credentials strip fill that
   whole screen: the tile row takes what the strip leaves, up to 17rem.
   Narrower screens keep the layout above. */
@media (min-width: 1024px) and (min-height: 600px) {
  body:not(.snow) .hero ~ #services { padding-block: 0 1.5rem; justify-content: flex-start; scroll-snap-align: none; }
  body:not(.snow) .hero ~ #services .services-head {
    min-height: calc(100svh - max(var(--hero-h), 24rem));
    align-content: center; margin-bottom: 0; padding-block: 1rem;
  }
  body:not(.snow) .hero ~ #services .services-head p { font-size: 1.125rem; }
  body:not(.snow) .hero ~ #services .bento {
    height: calc(100svh - var(--header-h) - 2.5rem);   /* 1rem under the header, 1.5rem above the next section */
    grid-template-rows: repeat(2, minmax(0, 17rem)) auto; align-content: center;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  body:not(.snow) .hero ~ #services .tile-caption { font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
  body:not(.snow) .hero ~ #services .bento > li:first-child .tile-caption { font-size: clamp(1.5rem, 2.4vw, 2rem); }
  /* Three tiles across, then the credentials strip at its own height */
  body:not(.snow) .hero ~ #services .bento-three { grid-template-rows: minmax(0, 17rem) auto; }
  body:not(.snow) .hero ~ #services .bento-three > li:nth-child(n) .tile-caption { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
}

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

.split { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .split { grid-template-columns: 5fr 7fr; } }
.split-even { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .split-even { grid-template-columns: 1fr 1fr; } }

/* Centered image beside copy (About Us) */
.about-logo { display: flex; justify-content: center; }
.about-logo img { width: min(100%, 320px); }

/* Feature rows: brown left rule */
.feature { border-left: 2px solid var(--green); padding-left: 1.25rem; margin: 1.5rem 0; }
.feature h3 { color: var(--ink); margin-bottom: 0.25em; }
.feature p { margin: 0; }

/* ---------- Home: services heading and the grid of service tiles ---------- */
.section-services { padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); }
.services-head { display: grid; gap: 0.75rem 3rem; align-items: end; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.services-head h2 { margin: 0; }
.services-head p { color: var(--text-soft); margin: 0; }
@media (min-width: 820px) { .services-head { grid-template-columns: 3fr 2fr; } }
/* Large screens: heading and line centred above the tiles. */
@media (min-width: 1024px) {
  .services-head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .services-head h2, .services-head p { text-wrap: balance; }
  .services-head p { max-width: 46ch; }
}

/* Phone: first tile full width, then a pair, then the credentials strip.
   Desktop: three tiles across, the credentials strip under them. */
.bento {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, clamp(8.5rem, 36vw, 12rem));
  grid-auto-rows: auto;
}
.bento > li { margin: 0; }
.bento > li:first-child { grid-column: span 2; }
.bento .bento-bcma { grid-column: 1 / -1; }
@media (min-width: 820px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, clamp(10rem, 14vw, 13rem)); gap: 1rem; }
  .bento > li:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .bento .bento-bcma { grid-column: 1 / -1; grid-row: 3; }
}
.bento-three { grid-template-rows: repeat(2, clamp(8.5rem, 36vw, 12rem)) auto; }
@media (min-width: 820px) {
  .bento-three { grid-template-columns: repeat(3, 1fr); grid-template-rows: clamp(12rem, 24vw, 17rem) auto; }
  .bento-three > li:first-child { grid-column: auto; grid-row: auto; }
  .bento-three .bento-bcma { grid-row: 2; }
  .bento.bento-three > li:nth-child(n) .tile-caption {   /* all three captions the same size */
    left: clamp(1rem, 2vw, 1.5rem); right: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.5rem);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  }
}

.tile {
  position: relative; display: block; height: 100%; overflow: hidden;
  border-radius: var(--radius-glass);
  background: var(--green-dark);
}
.tile::after { /* bottom shade under the caption */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.6) 100%);
}
.tile-caption {
  position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: 1rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem;
  color: var(--white); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}
.tile-caption small { display: block; font-weight: 400; font-size: 0.85rem; opacity: 0.9; margin-top: 0.25rem; }
.tile-caption::after { /* arrow in a circle, CSS only */
  content: ""; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--glass-edge);
  background: var(--glass-edge) no-repeat center / 0.9rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.bento > li:first-child .tile-caption {
  left: clamp(1rem, 2.5vw, 1.75rem); right: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
}
.tile:hover { color: var(--white); }
.tile:hover .tile-caption::after { transform: translateX(3px); background-color: var(--green); border-color: var(--green); }
.tile:focus-visible { outline-offset: 4px; }
@media (max-width: 639px) {
  .tile-caption small { display: none; }
  .bento > li:not(:first-child) .tile-caption { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; font-size: 0.95rem; }
  .bento > li:not(:first-child) .tile-caption::after { width: 1.75rem; height: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .tile-caption::after { transition: none; } }

/* On the home page the tiles stay hidden at the very top and fade in over
   the first 200px of scrolling (the whole grid, on the page's scroll); on the
   Services page they are on the first screen, so they just show. Each tile
   also fades up in a short ripple as it comes into view. CSS scroll-driven
   animation, no JavaScript, and the site's only scroll-linked motion. A page
   opened already scrolled down shows the tiles. Browsers without support
   (Firefox today) and visitors who reduce motion simply see the tiles. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero ~ .section-services .bento { animation: tiles-gate linear both; animation-timeline: scroll(root); animation-range: 0px 200px; }
    .bento > li { animation: tile-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .bento > li:nth-child(2), .bento > li:nth-child(4) { animation-range: entry 6% entry 61%; }
    .bento > li:nth-child(3), .bento > li:nth-child(5) { animation-range: entry 12% entry 67%; }
    .bento > li:nth-child(6) { animation-range: entry 4% entry 59%; }
    .bento > li:nth-child(7) { animation-range: entry 10% entry 65%; }
  }
}
@keyframes tiles-gate {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tile-reveal {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Service tiles: brown tonal panels (no photos), a thin-line icon at the top
   left, growth rings in the top right corner. Three related shades. */
.tile-panel {
  background: var(--tile-bg, var(--green));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --rings-size: 22rem; --rings-pos: right -9rem top -9rem;
  transition: box-shadow 0.3s ease;
}
.tile-panel-dark { --tile-bg: var(--green-dark); }
.tile-panel-warm { --tile-bg: color-mix(in srgb, var(--green) 78%, var(--lime)); }
.tile-panel::before { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tile-panel::after { background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.22) 100%); }
.tile-icon {
  position: absolute; z-index: 1; top: clamp(1rem, 2vw, 1.5rem); left: clamp(1rem, 2vw, 1.5rem);
  width: 4rem; height: 4rem; padding: 0.85rem; border-radius: 50%; color: var(--white);
  background: color-mix(in srgb, var(--lime) 16%, transparent);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--lime) 75%, transparent), 0 0 1.75rem color-mix(in srgb, var(--lime) 55%, transparent),
              inset 0 0 1rem color-mix(in srgb, var(--lime) 30%, transparent);   /* glowing icon, light brown */
  transition: box-shadow 0.3s ease;
}
.tile-icon svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 0.35rem color-mix(in srgb, var(--tan-light) 70%, transparent)); }
.tile-panel:hover .tile-icon {
  box-shadow: 0 0 0 1.5px var(--tan-light), 0 0 2.5rem color-mix(in srgb, var(--lime) 80%, transparent),
              inset 0 0 1rem color-mix(in srgb, var(--lime) 40%, transparent);
}
.tile-panel:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1rem 2.5rem rgba(75, 53, 38, 0.22); }
.tile-panel:hover::before { transform: translate(-6px, 6px); }
.tile-panel:hover .tile-caption::after { background-color: var(--lime); border-color: var(--lime); }
@media (max-width: 639px) { .tile-icon { width: 2.75rem; height: 2.75rem; padding: 0.6rem; } }
@media (prefers-reduced-motion: reduce) {
  .tile-panel, .tile-panel::before, .tile-icon { transition: none; }
  .tile-panel:hover::before { transform: none; }
}

/* Credentials strip under the tiles: white card with the ISA badge, a short
   statement and three facts. A column of facts at 1024px+, three across on
   tablets, stacked on phones. */
.cred-strip {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 20rem); gap: 1rem 2rem; align-items: center;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(2.5rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-glass);   /* rim, glow and shadow: sunlit cards, under the service pages */
}
.cred-badge {
  padding: 0.5rem; border-radius: 0.75rem; background: var(--white);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--lime) 55%, var(--white)), 0 0 1.5rem color-mix(in srgb, var(--lime) 35%, transparent),
              0 12px 24px -16px color-mix(in srgb, var(--green-dark) 60%, transparent);
}
.cred-badge img { width: clamp(52px, 5vw, 64px); }
.cred-copy .eyebrow { margin-bottom: 0.4rem; }
.cred-copy h3 { color: var(--green); font-size: clamp(1.1rem, 1.6vw, 1.3rem); margin: 0 0 0.3em; }
.cred-copy p { margin: 0; color: var(--text-soft); font-size: 0.95rem; line-height: 1.55; max-width: 50ch; }
.cred-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cred-list li {
  margin: 0; padding: 0.55rem 0; border-bottom: 1px solid var(--rule);
  font-weight: 700; font-size: 0.9rem; line-height: 1.35; color: var(--ink);
}
.cred-list span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--text-soft); }
@media (max-width: 1023px) {
  .cred-strip { grid-template-columns: auto minmax(0, 1fr); }
  .cred-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-top: 0; }
  .cred-list li { border-bottom: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 639px) {
  .cred-strip { grid-template-columns: minmax(0, 1fr); align-items: start; padding-right: clamp(1.25rem, 3vw, 2rem); }
  .cred-badge { justify-self: start; }
  .cred-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cred-list li:last-child { border-bottom: 1px solid var(--rule); }
}

/* ---------- Home: About, two facts under hairlines ---------- */
.feature-pair { display: grid; gap: 1.5rem 3rem; margin: 2.5rem 0; }
@media (min-width: 640px) { .feature-pair { grid-template-columns: 1fr 1fr; } }
.feature-pair .feature { margin: 0; padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--green); }
.feature-pair .feature h3 { font-size: 1.05rem; }

/* ---------- Inner page header: dark bark band with the growth rings ----------
   Runs under the glass header, like the home hero. */
.page-header {
  position: relative; overflow: hidden; margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + clamp(3rem, 8vw, 5.5rem)) 0 clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(50rem 24rem at 90% 120%, color-mix(in srgb, var(--green) 80%, var(--lime)) 0%, transparent 60%),
    var(--green-dark);
  color: var(--white);
  border-bottom: 1px solid color-mix(in srgb, var(--lime) 55%, transparent);
  --rings-size: 46rem; --rings-pos: right -18rem center; --rings-opacity: 0.9;
}
.page-header .wrap { position: relative; }
.page-header h1 { color: var(--white); font-size: clamp(2rem, 6vw, 3.75rem); letter-spacing: -0.035em; margin-bottom: 0.3em; }
.page-header p { color: var(--white); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.35; max-width: 32ch; margin: 0; }
.breadcrumb { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tan-light); }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.7; }
.breadcrumb a { color: var(--white); opacity: 0.85; }
.breadcrumb a:hover { opacity: 1; color: var(--white); }
.breadcrumb a:focus-visible { outline-color: var(--white); }

.page-header .page-sub { font-weight: 600; letter-spacing: -0.01em; }
.page-header .hero-actions { margin-top: 1.75rem; }

/* Compact page header: title and tagline on the left, buttons on the right
   in one short band, so the content below starts on the first screen.
   Stacks under 820px; buttons stay side by side on phones. */
.page-header-compact { padding: calc(var(--header-h) + clamp(1rem, 2.5vw, 1.75rem)) 0 clamp(1.25rem, 3vw, 2rem); }
.page-header-row { display: grid; gap: 1.25rem 2.5rem; align-items: end; }
@media (min-width: 820px) { .page-header-row { grid-template-columns: 1fr auto; } }
.page-header-compact .breadcrumb { margin-bottom: 0.5rem; }
.page-header-compact h1 { font-size: clamp(1.9rem, 3.5vw, 2.5rem); letter-spacing: -0.04em; margin-bottom: 0.1em; }
.page-header-compact .page-sub { font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 400; max-width: none; opacity: 0.9; }
.page-header-compact .hero-actions { margin-top: 0; }
.page-header-compact .hero-actions .button { flex: none; padding: 0.75rem 1.6rem; }
.page-header-compact .hero-actions .text-link { margin-inline: 0; white-space: nowrap; }
.page-header-compact + .section { padding-top: clamp(2rem, 5vw, 3.5rem); }

/* ---------- Service pages (one template for all three) ----------
   Compact banner with both calls to action; a quiet row of service names
   (current one solid dark brown) under it on desktop and after the content
   on phones; then the heading and copy on the left, and on the right a dark
   "What we do" panel with the "Talk to us" card under it. On phones: text,
   panel, card, then the services. */
.svc-row { border-bottom: 1px solid var(--rule); }
.svc-row ul { list-style: none; margin: 0; padding: 1.25rem 0; display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr); }
.svc-row li { margin: 0; }
.svc-row a {
  display: flex; align-items: center; justify-content: center; height: 100%; text-align: center;
  padding: 0.7rem 0.85rem; border: 1px solid var(--rule); border-radius: var(--radius-pill);
  background: var(--white); color: var(--ink); font-weight: 600; font-size: 0.92rem; line-height: 1.25;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.svc-row a:hover { border-color: var(--green); color: var(--green); }
.svc-row a:focus-visible { outline-offset: 2px; }
.svc-row a[aria-current="page"] { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }
@media (min-width: 640px) { .svc-row ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } }
@media (prefers-reduced-motion: reduce) { .svc-row a { transition: none; } }
/* Phones: the service names come after the content, with a visible heading */
@media (max-width: 819px) {
  main:has(> .svc-row) { display: flex; flex-direction: column; }
  main > .svc-row { order: 1; border-bottom: 0; padding-bottom: 1.5rem; }
  main:has(> .svc-row) > .band { order: 2; }
  .svc-row .visually-hidden { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 0; }
}

.svc-content { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.svc-grid { display: grid; gap: 1.5rem 3rem; align-items: start; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "panel" "cta"; }
.svc-copy { grid-area: copy; }
.svc-grid .svc-panel { grid-area: panel; }
.svc-grid .cta-line { grid-area: cta; }
@media (min-width: 900px) {
  /* Copy on the left; the panel and the "Talk to us" card stacked on the
     right. Tight spacing above so all of it fits the first screen. */
  .svc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-rows: auto 1fr; grid-template-areas: "copy panel" "copy cta"; row-gap: 0.75rem; }
  .svc-content { padding-top: clamp(1.25rem, 2vw, 1.75rem); }
  .svc-row ul { padding-block: 0.85rem; }
  .svc-grid .cta-line { padding: 1rem 1.5rem; gap: 0.7rem; }
}
.svc-copy h2 { margin-bottom: 1rem; }   /* standard h2 size: the banner's h1 leads */
.svc-copy p { max-width: 62ch; }
/* Desktop: the description and its heading are sized to how much text the
   page has, so the left column roughly matches the panel and card on the
   right. Each page picks one class on .svc-copy: copy-fit-l (short text),
   copy-fit-m, copy-fit-s, or none (long text). Sizes grow with the screen
   from 1024px and stop growing at 1440px. If a page's text changes, pick the
   class that keeps the left column no taller than the right. */
@media (min-width: 1024px) {
  .svc-copy { --copy-fs: 1rem; }
  .svc-copy.copy-fit-s { --copy-fs: clamp(1rem, 0.4rem + 0.94vw, 1.15rem); }
  .svc-copy.copy-fit-m { --copy-fs: clamp(1rem, 1.5625vw, 1.25rem); }
  .svc-copy.copy-fit-l { --copy-fs: clamp(1.15rem, 0.66rem + 0.77vw, 1.35rem); }
  .svc-copy p { font-size: var(--copy-fs); }
  .svc-copy h2 { font-size: max(clamp(1.6rem, 3.2vw, 2.25rem), calc(var(--copy-fs) * 2)); }
}

/* "What we do": dark panel with the growth rings and a list with tan ticks */
.svc-panel {
  position: relative; overflow: hidden;
  padding: clamp(1.1rem, 2vw, 1.3rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--green-dark); color: var(--white); border-radius: var(--radius-glass);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --rings-size: 26rem; --rings-pos: right -10rem bottom -10rem; --rings-opacity: 0.9;
}
.svc-panel > * { position: relative; }
.svc-panel .eyebrow { margin-bottom: 0.35rem; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
  margin: 0; position: relative; padding: 0.3rem 0 0.3rem 1.6rem;
  font-weight: 600; font-size: 0.92rem; line-height: 1.4;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.check-list li:first-child { border-top: 0; }
.check-list li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.5rem; width: 0.4rem; height: 0.75rem;
  border-right: 1.5px solid var(--lime); border-bottom: 1.5px solid var(--lime); transform: rotate(45deg);
}

/* "Talk to us" card: under the panel on desktop, after it on phones. A light
   brown tint so it reads as the next step; sunlit like the cards below. */
.cta-line {
  padding: 1.25rem 1.5rem; display: grid; gap: 0.85rem;
  border-radius: var(--radius-glass);
}
.cta-line p { margin: 0; font-weight: 700; font-size: 1.1rem; color: var(--green-dark); letter-spacing: -0.01em; }
.cta-line-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.button-sm { padding: 0.6rem 1.3rem; font-size: 0.9rem; }
@media (max-width: 639px) {
  .cta-line-actions, .cta-line-actions .button { width: 100%; }
}

/* Sunlit cards, the light brown version of the Naturally Green service
   cards: the "Talk to us" card, the home credentials strip and the contact
   cards get a rim that catches the light from the top left (tan fading to
   white, then a deeper brown), a faint tan glow in that corner, a small
   tree-ring mark in the other and a soft brown shadow. Static. */
:root { --ring-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23b08968' stroke-width='3' stroke-linecap='round' opacity='.6'%3E%3Ccircle cx='32' cy='32' r='29'/%3E%3Cellipse cx='33.6' cy='33.2' rx='21.5' ry='20.5' transform='rotate%28-20 33.6 33.2%29'/%3E%3Cellipse cx='34.8' cy='34.2' rx='14' ry='13.2' transform='rotate%28-20 34.8 34.2%29'/%3E%3Ccircle cx='35.6' cy='35' r='7'/%3E%3Ccircle cx='36' cy='35.4' r='1.7' fill='%23b08968'/%3E%3C/svg%3E"); }
.cta-line, .cred-strip, .contact-card {
  --card-bg: var(--white);
  border: 1.5px solid transparent;
  background:
    var(--ring-mark) right 0.9rem top 0.8rem / 1.5rem 1.5rem no-repeat padding-box,
    radial-gradient(130% 100% at 0 0, color-mix(in srgb, var(--lime) 18%, transparent), transparent 45%) padding-box,
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--lime) 85%, var(--white)) 0%, var(--white) 32%,
      color-mix(in srgb, var(--lime) 35%, var(--white)) 65%, color-mix(in srgb, var(--green) 45%, var(--white)) 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 30px -22px color-mix(in srgb, var(--green-dark) 55%, transparent);
}
.cta-line { --card-bg: color-mix(in srgb, var(--green) 6%, var(--white)); }

/* Buttons in the banner and card: phone icon beside the label */
.button-icon { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; }
.button-icon svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* ---------- About page ---------- */
.lead { font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 600; color: var(--green); line-height: 1.4; max-width: 40ch; }
/* A level-two heading shown at h3 size, where the page outline needs an h2 */
.as-h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

/* ---------- Contact ---------- */
.contact-cards { list-style: none; padding: 0; margin: 0 0 3rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }
.contact-cards li { margin: 0; }
.contact-card {
  display: block; height: 100%;   /* rim, glow and shadow: sunlit cards, above */
  border-radius: var(--radius-glass); padding: 2rem 1.5rem; text-align: center; color: var(--text);
}
.contact-card .icon {
  width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 50%;
  background: color-mix(in srgb, var(--lime) 14%, var(--white));
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5.5px color-mix(in srgb, var(--lime) 55%, var(--white)),
              0 0 1.5rem color-mix(in srgb, var(--lime) 50%, transparent);   /* glowing icon */
  transition: box-shadow 0.25s ease;
}
.contact-card .icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.contact-card h2 { color: var(--ink); font-size: 1.1rem; margin-bottom: 0.25em; }
.contact-card p { margin: 0; max-width: none; overflow-wrap: anywhere; font-size: 0.95rem; }
a.contact-card:hover .icon {
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5.5px color-mix(in srgb, var(--lime) 80%, var(--white)),
              0 0 2rem color-mix(in srgb, var(--lime) 75%, transparent);
}
a.contact-card:hover h2 { color: var(--green); }
@media (prefers-reduced-motion: reduce) { .contact-card .icon { transition: none; } }

.contact-form { display: grid; gap: 1rem; max-width: 36rem; }
.contact-form[hidden] { display: none; }
.contact-form label { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.95rem; }
.contact-form input, .contact-form textarea, .contact-form select {
  font: inherit; padding: 0.7rem 0.9rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--white);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: 2px solid var(--lime); border-color: var(--lime); }
.form-note { font-size: 0.9rem; color: var(--text-soft); }

/* ---------- Contact band: dark bark with the growth rings, before the footer ---------- */
.band {
  position: relative; overflow: hidden;
  background: var(--green-dark); color: var(--white); padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  --rings-size: 44rem; --rings-pos: right -14rem top -18rem; --rings-opacity: 0.8;
}
.band > .wrap { position: relative; }
@media (min-width: 820px) {
  .contact-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
  .contact-panel h2 { margin: 0; }
}
.band h2 { color: var(--white); }
.band p, .band a { color: var(--white); }
.band a:hover { color: var(--lime); }
.contact-lines { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.contact-lines li { margin: 0; border-bottom: 1px solid var(--glass-edge); }
.contact-lines li:first-child { border-top: 1px solid var(--glass-edge); }
.contact-lines a {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 0;
  font-weight: 600; font-size: clamp(1rem, 1.8vw, 1.3rem); overflow-wrap: anywhere;
}
.contact-lines svg { width: 1.2rem; height: 1.2rem; flex: none; }
.band .button-white { color: var(--green); }
.band .button-white:hover { color: var(--white); }
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
@media (max-width: 639px) { .contact-lines a { font-size: 0.95rem; } }

/* ---------- Footer: light ---------- */
.site-footer {
  background: var(--white); color: var(--text); border-top: 1px solid var(--rule);
  padding: clamp(3rem, 7vw, 4.5rem) 0 1.5rem; font-size: 0.95rem;
}
.footer-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: 1fr 1fr; }   /* phones: Services and Quick Links side by side */
.footer-contact { grid-column: 1 / -1; }                                            /* logo and contact block span both columns */
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
  .footer-contact { grid-column: auto; }
}
.footer-brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; color: var(--green); font-size: 1.15rem; margin-bottom: 0.75rem; }
.footer-mark { width: 1.75rem; height: 1.75rem; flex: none; color: var(--green); }
.site-footer p { color: var(--text); margin: 0 0 0.3rem; }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--green); }
.footer-contact a { font-weight: 600; color: var(--green); }
.site-footer h3 { color: var(--green); font-size: 1rem; letter-spacing: -0.01em; margin-bottom: 0.75rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; padding: 0.2rem 0; }
.site-footer .footer-legal {
  max-width: none; margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  text-align: center; color: var(--text-soft); font-size: 0.85rem;
}

/* ---------- No backdrop-filter? Fall back to solid white ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before, .nav .submenu, .nav.is-open { background: var(--white); }
}