/* Naturally Green, 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.

   The look is the "Home Premium" standard approved on 2 Nov 2026: frosted
   glass header over a full-width photo hero, deep green and lime brand
   colors, Manrope type, photo tiles for services, a dark-green contact band
   and a light footer. Glass is only used on the header, the Services
   dropdown and the mobile menu. */

:root {
  --green:       #12623f;   /* primary brand green: buttons, headings, sidebar */
  --green-dark:  #0d4a30;   /* hover, dark bands, phone pill, BCMA tile */
  --lime:        #8cc63f;   /* accent: hovers, active sidebar item, focus outline */
  --ink:         #191919;   /* nav links, footer links, headings on white */
  --text:        #333333;   /* body copy */
  --text-soft:   #616161;   /* secondary copy */
  --wash:        #fbfbfb;   /* very light section background, footer */
  --rule:        #e3e6e1;   /* hairlines */
  --white:       #ffffff;

  /* Snow and Ice tile; snow mode uses the same blues for the greens */
  --ice:         #1d4f8c;
  --ice-dark:    #143a68;
  --ice-light:   #4fa3dc;
  /* Tree Service tile (The Tree Firm); not changed by snow mode */
  --bark:        #6f4e37;
  --bark-dark:   #4b3526;
  --bark-light:  #b08968;

  /* Glass tints, mixed from the tokens above so snow mode follows */
  --glass-light: color-mix(in srgb, var(--white) 86%, transparent);   /* opaque enough that page text behind never competes with the links */
  --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;   /* photo tiles, BCMA tile, 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);
}
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.1; }

.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: 2px 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; } }

/* Section title with the green-to-lime gradient text (not used on the home page) */
.title-gradient {
  display: inline-block;
  background-image: linear-gradient(to right, var(--green), var(--lime));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.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%; }
.brand { display: block; position: relative; }
.brand img { width: auto; height: 3.5rem; }
.brand .brand-light { display: none; }   /* lime logo, shown only by the see-through header below */

.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(1rem, 0.4rem + 0.9vw, 1.15rem);
  white-space: nowrap; border-radius: var(--radius-pill);
}
.nav a:hover { color: var(--green); background: var(--glass-light); }
.nav a:hover, .nav a[aria-current="page"] { text-shadow: none; }
.nav a[aria-current="page"] { color: var(--green); background: var(--white); }
/* On a service page, a lime 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; font-size: 1.02rem; }
.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: 1.02rem;
  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: 1.02rem; 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 img { height: 2.75rem; }
  .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 a { font-size: 1.1rem; padding-block: 0.65rem; }
  .nav .submenu a { font-size: 1.02rem; }
  .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 banner photo (lime logo, white links with a soft shadow, no frosted
   bar) and turns into the frosted bar over the first 40px of scrolling. The
   links don't fade through grey: they stay white until the bar is 40% in,
   then switch to ink in one step, so they always contrast with what's
   behind them. CSS scroll-driven animation, no JavaScript. Not in snow mode (the header sits above the snow
   banner on a white page there). Browsers without scroll timelines (Firefox
   today) keep the frosted bar. */
@property --nav-link { syntax: "<color>"; inherits: true; initial-value: #191919; }
@property --nav-shadow { syntax: "<color>"; inherits: true; initial-value: transparent; }
@supports (animation-timeline: scroll()) {
  body:not(.snow) .site-header,
  body:not(.snow) .site-header::before,
  body:not(.snow) .brand img {
    animation-timeline: scroll(root); animation-range: 0px 40px;
    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,
  body:not(.snow) .brand img { animation-name: header-fade-in; }
  body:not(.snow) .brand .brand-light { display: block; position: absolute; top: 0; left: 0; animation-name: header-fade-out; }
  @media (min-width: 861px) {
    /* low specificity so :hover and the current-page pill keep their green;
       --nav-link stays ink in snow mode, where the header doesn't animate */
    .nav > ul > li > a { color: var(--nav-link); text-shadow: 0 1px 3px var(--nav-shadow); }
  }
}
@keyframes header-solid {
  0%   { border-bottom-color: transparent; }
  0%, 39.9%  { --nav-link: var(--white); --nav-shadow: rgba(0, 0, 0, 0.45); }
  40%, 100%  { --nav-link: var(--ink); --nav-shadow: transparent; }
  100% { border-bottom-color: var(--glass-edge); }
}
@keyframes header-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes header-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Hero: photos crossfade behind one fixed headline ----------
   Three photos stacked on top of each other; each fades in for a third of a
   21-second cycle and slowly drifts larger while it shows. The headline,
   sub-line and buttons rise in once on page load. Short enough that the
   services heading shows on the first screen. With "reduce motion" on,
   nothing moves and only the first photo shows. */
: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: var(--green-dark);
}
/* 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)); }
}
.hero .slide {
  position: absolute; inset: 0; opacity: 0; transform-origin: 60% 50%;
  animation: hero-fade 21s ease infinite, hero-drift 21s linear infinite;   /* delays below apply to both */
}
.hero .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .slide:nth-child(1) { animation-delay: -1s; }   /* starts already visible */
.hero .slide:nth-child(1) img { object-position: 40% center; }
.hero .slide:nth-child(2) { animation-delay: 6s; }
.hero .slide:nth-child(3) { animation-delay: 13s; }
@keyframes hero-fade {
  0%     { opacity: 0; }
  4.76%  { opacity: 1; }
  33.33% { opacity: 1; }
  38.1%  { opacity: 0; }
  100%   { opacity: 0; }
}
/* Drift resets at the start of each cycle, while the photo is invisible */
@keyframes hero-drift {
  0%    { transform: scale(1); }
  38.1% { transform: scale(1.06); }
  100%  { transform: scale(1.06); }
}
.hero .headline, .hero .sub, .hero .hero-actions { animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero .sub { animation-delay: 0.15s; }
.hero .hero-actions { animation-delay: 0.3s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .slide { animation: none; transform: none; }
  .hero .slide:nth-child(1) { opacity: 1; }
  .hero .headline, .hero .sub, .hero .hero-actions { animation: none; }
}
.hero::after { /* deep scrim: text sits on the photo, not in a box */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0, rgba(0,0,0,0) 9rem),   /* top: under the see-through header */
              linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%),
              linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 60%);
}
.hero-inner { position: relative; z-index: 1; padding-bottom: clamp(2rem, 7vw, 5rem); }
.hero-copy { max-width: 44rem; }
.hero .headline {
  color: var(--white); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em;
  font-size: clamp(2.25rem, 6vw, 4.5rem); margin: 0 0 0.3em;
}
.hero .sub { color: var(--white); font-size: clamp(1.05rem, 2vw, 1.4rem); margin: 0 0 1.5rem; }
.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; }
}

/* Gentle snap (Nov 2026; was strict "mandatory" paging, which felt too
   aggressive): scrolling is free, and only when you stop close to the top
   of a section (every <section> directly inside <main>, the snow banner,
   then the footer) does the page settle onto it. A fast scroll can pass
   several sections. Service cards (.svc-row) are a snap point only on
   phones (after the text) and short screens. */
html { scroll-snap-type: y proximity; }
main > section, .snow-banner { scroll-snap-align: start; }
.site-footer { scroll-snap-align: end; }
@media (max-width: 639px), (max-height: 700px) {
  main > .svc-row { scroll-snap-align: start; }
}

/* 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, .snow .hero + .snow-only {
    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 .bcma-tile { padding-block: 1rem; }
  .hero ~ .section-services .bcma-tile p { line-height: 1.5; }
  .hero ~ #about .offer-list { margin-block: 0.75rem 1rem; }
  .hero ~ #about .offer-list li { padding-block: clamp(0.25rem, 0.6vh, 0.45rem); }
  .hero ~ #about .feature-pair { gap: 1rem; }
  .hero ~ #about .about-aside .about-logo { width: min(100%, clamp(140px, 22vh, 220px)); }
  .hero ~ .band { padding-block: clamp(2rem, 5vh, 5rem); }
}
/* Normal mode, 1024px+ wide: the services heading fills the white strip
   under the photo on the first screen, centred in it. The snap point is
   the tiles (not the section top), and the tiles fill that whole screen:
   the two photo rows share what the BCMA row leaves, up to 17rem each.
   Narrower screens (where BCMA is too tall beside Tree Service) and snow
   mode 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;
  }
  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); }
}

/* ---------- Sections ---------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-wash { background: var(--wash); }
.section-green { background: var(--green); color: var(--white); }
.section-green h2, .section-green h3 { color: var(--white); }
.section-green a:not(.button) { color: var(--white); text-decoration: underline; }
.section-green a:not(.button):hover { color: var(--lime); }

.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 (Get to Know Us) */
.about-logo { display: flex; justify-content: center; }
.about-logo img { width: min(100%, 320px); }

.divider { display: block; opacity: 0.5; margin: 1.5rem 0; }

/* Feature rows: green left rule */
.feature { border-left: 4px 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 bento grid of photo 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: large tile full width, then two pairs, then Tree Service and BCMA.
   Desktop: Landscape Maintenance 2 x 2 on the left, the other four beside it,
   Tree Service (when present) and BCMA on the third row. */
.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-tree, .bento .bento-bcma { grid-column: 1 / -1; }
.bento .bento-tree { min-height: clamp(8.5rem, 36vw, 12rem); }
@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-tree { grid-column: 1 / span 2; grid-row: 3; }
  .bento .bento-bcma { grid-column: 1 / -1; grid-row: 3; }
  .bento .bento-tree + .bento-bcma { grid-column: 3 / span 2; }   /* beside Tree Service */
}

.tile {
  position: relative; display: block; height: 100%; overflow: hidden;
  border-radius: var(--radius-glass);
  background: var(--green-dark);  /* shows until the photo loads */
}
.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.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 img { transform: scale(1.03); }
.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 img, .tile-caption::after { transition: none; }
  .tile:hover img { transform: none; }
}

/* Tiles stay hidden at the very top of the page and fade in over the first
   200px of scrolling (the whole grid, on the page's scroll), while each tile
   also fades up in a short ripple as it comes into view. CSS scroll-driven
   animation, no JavaScript (the Snow and Ice page reuses the reveal). 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) {
    .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; }
}

/* Snow and Ice tile: ice blue in both modes */
.tile-snow {
  --green: var(--ice); --green-dark: var(--ice-dark); --lime: var(--ice-light);
  background: var(--ice-dark);
}
.tile-snow:hover .tile-caption::after { background-color: var(--ice); border-color: var(--ice); }
.tile-snow:focus-visible { outline-color: var(--ice-light); }

/* Tree Service tile (The Tree Firm): bark brown, a style box only. It is not
   a link and has no hover state or arrow; never give it a URL. The Tree
   Firm's tree-ring mark fills the tile: oversized, glowing tan, centred past
   the right edge so part of it is cut off (Nov 2026). */
.tile-tree { background: var(--bark-dark); cursor: default; }
.tile-tree::after { background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%); }
.tile-tree .tile-caption small { display: block; }   /* who provides it shows on phones too */
.tile-tree .tile-caption::after { display: none; }
.tile-mark {
  position: absolute; top: 50%; right: 0; transform: translate(32%, -46%);   /* centre past the right edge */
  height: 185%; aspect-ratio: 1; pointer-events: none;
  color: color-mix(in srgb, var(--bark-light) 70%, var(--white));
  filter: drop-shadow(0 0 0.4rem color-mix(in srgb, var(--bark-light) 70%, transparent)) drop-shadow(0 0 1.75rem color-mix(in srgb, var(--bark-light) 40%, transparent));   /* glowing tan */
}
.tile-mark svg { display: block; width: 100%; height: 100%; opacity: 0.75; }

/* BCMA tile: solid --green-dark card in the grid, badge beside the credential */
.bcma-tile {
  height: 100%; display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.25rem; align-items: center;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border-radius: var(--radius-glass);
  background: var(--green-dark); color: var(--white);
}
.bcma-tile h3 { color: var(--white); font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: 0 0 0.25em; }
.bcma-tile .lead-sm { font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.35; margin: 0 0 0.5rem; }
.bcma-tile p { color: var(--white); font-size: clamp(1rem, 1.3vw, 1.1rem); margin-bottom: 0; }
.bcma-tile .badge-wrap { background: var(--white); border-radius: 1rem; padding: 0.6rem; }
.bcma-tile img { width: clamp(64px, 7vw, 88px); height: auto; }
@media (max-width: 639px) {
  .bcma-tile { grid-template-columns: auto 1fr; align-items: start; }
  .bcma-tile .badge-wrap { grid-column: 1; grid-row: 1; padding: 0.4rem; border-radius: 0.75rem; }
  .bcma-tile img { width: 52px; }
  .bcma-tile > div:first-child { display: contents; }
  .bcma-tile h3, .bcma-tile .lead-sm { grid-column: 2; }
  .bcma-tile h3 { grid-row: 1; align-self: center; }
  .bcma-tile .lead-sm, .bcma-tile p { grid-column: 1 / -1; }
}

/* ---------- Home: About, editorial layout with hairline rules ----------
   Phones: logo, then the heading and service list, then the feature rows.
   From 820px: the feature rows sit under the logo on the left, so both
   columns end at about the same height. */
.about { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 820px) {
  .about { grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; gap: 2.5rem 3rem; }
  .about-main { grid-column: 2; grid-row: 1 / span 2; }
  .about-more { grid-column: 1; grid-row: 2; }
  .about-more .feature-pair { grid-template-columns: 1fr; }
}
.about-main > :last-child { margin-bottom: 0; }
.about-more .feature-pair { margin-top: 0; }
.about-aside .about-logo { display: block; width: min(100%, 220px); }
.about-aside .lead-quiet { color: var(--text-soft); margin: 1.25rem 0 0; max-width: 30ch; }
.offer-list { columns: 1; column-gap: 3rem; margin: 1.5rem 0 1.75rem; padding: 0; list-style: none; }
.offer-list li { break-inside: avoid; margin: 0; padding: 0.7rem 0; border-top: 1px solid var(--rule); color: var(--ink); }
@media (min-width: 640px) { .offer-list { columns: 2; } }
.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: 2px solid var(--green); }
.feature-pair .feature h3 { font-size: 1.05rem; }

/* ---------- Inner page header: green-sky band under a dark scrim ----------
   Runs under the glass header, like the home hero. */
.page-header {
  position: relative; margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + clamp(3rem, 8vw, 5.5rem)) 0 clamp(2.5rem, 6vw, 4rem);
  background: var(--green-dark) url("/images/page-header.jpg") center / cover no-repeat;
  color: var(--white);
}
.page-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.6)); }
.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.9rem; font-weight: 600; }
.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 (Careers): 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.4rem; }
.page-header-compact h1 { font-size: clamp(1.75rem, 3.5vw, 2.4rem); margin-bottom: 0.15em; }
.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); }

/* ---------- Careers page ---------- */
/* Open positions ("Mist"): the page's one signature touch, a faint green haze
   at the section's edges. Each job is a white card that opens and closes with
   <details>, no JavaScript. */
.section-mist {
  background: radial-gradient(ellipse 80% 75% at 50% 45%, var(--white) 0%, var(--wash) 50%, color-mix(in srgb, var(--green) 14%, var(--white)) 100%);
}
.positions-title { /* bold heading with a thick lime underline */
  text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: 0.14em; text-underline-offset: 0.2em; text-decoration-skip-ink: none;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.jobs { display: grid; gap: 0.85rem; }
.job {
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-glass);
  box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--green-dark) 5%, transparent);
  transition: border-color 0.3s ease;
}
.job:hover, .job[open] { border-color: color-mix(in srgb, var(--green) 40%, var(--white)); }
.job summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 1.5rem; align-items: center;
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 2rem);
}
.job summary::-webkit-details-marker { display: none; }
.job summary:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: var(--radius-glass); }
.job-title { font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.75rem); letter-spacing: -0.025em; line-height: 1.2; color: var(--green); }
.job summary:hover .job-title { color: var(--green-dark); }
.chips { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.chip {
  margin: 0; font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.75rem; border-radius: var(--radius-pill);
  background: var(--white); border: 1px solid var(--rule); color: var(--ink); white-space: nowrap;
}
.chip-accent { background: var(--lime); border-color: var(--lime); color: var(--green-dark); }   /* only for "Hiring now", "Seasonal" and the like */
.job-toggle {
  grid-column: 2; grid-row: 1 / span 2;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; font-weight: 700; color: var(--green);
}
.job-toggle::after {
  content: ""; width: 0.55rem; height: 0.55rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.3s ease;
}
.job[open] .job-toggle::after { transform: translateY(2px) rotate(-135deg); }
.job-toggle .when-open { display: none; }
.job[open] .job-toggle .when-open { display: inline; }
.job[open] .job-toggle .when-closed { display: none; }
@media (max-width: 639px) { .job-toggle .when-open, .job-toggle .when-closed { display: none !important; } }
.job-body { padding: 0 clamp(1.1rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.5rem 3rem; }
@media (min-width: 820px) { .job-body { grid-template-columns: 7fr 5fr; } }
.job-body h3 { color: var(--ink); font-size: 1rem; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
.job-body ul { margin: 0 0 1.25rem; padding-left: 1.1rem; }
.job-body li { margin: 0; padding: 0.15rem 0; }
.job-body li::marker { color: var(--green); }
.job-aside { background: var(--wash); border: 1px solid var(--rule); border-radius: 1rem; padding: 1.25rem; align-self: start; }
.job-aside dl { margin: 0 0 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; font-size: 0.95rem; }
.job-aside dt { color: var(--text-soft); }
.job-aside dd { margin: 0; color: var(--ink); font-weight: 600; }
.jobs-note { margin-top: 1.5rem; color: var(--text-soft); }
@media (prefers-reduced-motion: reduce) { .job, .job-toggle::after { transition: none; } }

/* Benefits: heading beside the intro, then an auto-fit grid under green rules */
.intro-split { display: grid; gap: 1.25rem 3rem; align-items: start; }
@media (min-width: 820px) { .intro-split { grid-template-columns: 5fr 7fr; } }
.intro-split h2 { margin: 0; }
/* Careers benefits: a light green band, centred heading, and six white
   cards with an icon in even rows (3 x 2 on desktop, 2 x 3 on tablets). */
.section-benefits { background: color-mix(in srgb, var(--green) 7%, var(--white)); }
.benefits-head { max-width: 38rem; margin: 0 auto clamp(2rem, 5vw, 3rem); text-align: center; }
.benefits-head h2 { margin-bottom: 0.75rem; }
.benefits-head p { color: var(--text-soft); text-wrap: balance; }
.benefits-head p:last-child { margin-bottom: 0; }
.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } }
@media (min-width: 960px) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.benefit {
  margin: 0; padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--white); border-radius: var(--radius-glass);
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--white));
}
.benefit-icon {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
  border-radius: 50%; background: var(--green); color: var(--white);
}
.benefit h3 { color: var(--green-dark); font-size: 1.2rem; margin-bottom: 0.4em; }
.benefit p { margin: 0; color: var(--text-soft); }

/* Apply: short intro beside a card with the ways to apply */
.apply { display: grid; gap: 2rem 3.5rem; align-items: start; }
@media (min-width: 820px) { .apply { grid-template-columns: 5fr 7fr; } }
.apply-aside p { color: var(--text-soft); }
.apply-card {
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-glass);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.apply-card h3 { color: var(--ink); margin-bottom: 0.35em; }
.apply-card p { color: var(--text-soft); }
.apply-card .apply-alt { margin: 2rem 0 0; font-weight: 600; color: var(--ink); }
.apply-direct { list-style: none; margin: 0.75rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.apply-direct li { margin: 0; border-bottom: 1px solid var(--rule); }
.apply-direct a { display: block; padding: 0.8rem 0; font-weight: 600; overflow-wrap: anywhere; }
.button-icon { display: inline-flex; align-items: center; gap: 0.6rem; }
.button-icon svg { width: 1rem; height: 1rem; flex: none; }

/* ---------- Service pages (one template for all five): "calm" layout ----------
   Compact banner with both calls to action; a quiet row of five compact
   service cards (small photo + name, current one solid dark green) under it
   on desktop and after the content on phones; then the section heading and
   copy with the photo beside it at its true size, and one slim "Talk to us"
   line under the copy. Plant/Tree Health Care and Snow and Ice add a band of
   feature cards (and the Snow and Ice request form). */
.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: repeat(2, minmax(0, 1fr)); }
.svc-row a span { min-width: 0; text-wrap: balance; }   /* whole words only, never hyphenated */
.svc-row li { margin: 0; }
.svc-row li:nth-child(5) { grid-column: 1 / -1; }
.svc-row a {
  display: grid; grid-template-columns: 2.75rem 1fr; align-items: center; gap: 0.55rem; height: 100%;
  padding: 0.45rem 0.85rem 0.45rem 0.45rem; border: 1px solid var(--rule); border-radius: 1rem;
  background: var(--white); color: var(--ink); font-weight: 600; font-size: 0.88rem; line-height: 1.25;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.svc-row img { width: 2.75rem; height: 2.4rem; object-fit: cover; border-radius: 0.5rem; background: var(--green-dark); }
.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); }
.svc-row .is-snow img { background: var(--ice-dark); }
.svc-row .is-snow:not([aria-current]):hover { border-color: var(--ice); color: var(--ice); }
@media (max-width: 639px) {   /* phones: one rectangular row per service, so names have room */
  .svc-row ul { grid-template-columns: minmax(0, 1fr); }
  .svc-row li:nth-child(5) { grid-column: auto; }
  .svc-row a { grid-template-columns: 3.25rem 1fr; gap: 0.85rem; padding: 0.5rem 0.75rem 0.5rem 0.5rem; border-radius: 0.6rem; font-size: 0.95rem; }
  .svc-row img { width: 3.25rem; height: 2.6rem; border-radius: 0.4rem; }
}
@media (min-width: 640px) {
  .svc-row ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .svc-row li:nth-child(5) { grid-column: auto; }
  .svc-row a { grid-template-columns: 3.5rem 1fr; gap: 0.75rem; font-size: 0.92rem; }
  .svc-row img { width: 3.5rem; height: 3rem; border-radius: 0.65rem; }
}
@media (min-width: 1024px) { .svc-row ul { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .svc-row a { transition: none; } }
/* Phones: the cards 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) > .service-extras, 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: 2rem 3rem; align-items: start; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "cta" "photo"; }
.svc-copy { grid-area: copy; }
.svc-grid .cta-line { grid-area: cta; }
.svc-photo { grid-area: photo; }
@media (min-width: 900px) {
  /* Heading and photo at the top, side by side; the "Talk to us" card right
     under the photo. Tight spacing above so all three fit the first screen. */
  .svc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 450px); grid-template-rows: auto 1fr; grid-template-areas: "copy photo" "copy cta"; row-gap: 0.75rem; }
  .svc-photo img { max-height: 15rem; object-fit: cover; }
  .svc-content { padding-top: clamp(1.5rem, 2.5vw, 2rem); }
  .svc-row ul { padding-block: 1rem; }
}
.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 photo 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, e.g. Snow and Ice). 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)); }
}
.svc-photo { margin: 0; }
.svc-photo img { max-width: min(100%, 450px); border-radius: var(--radius-glass); background: var(--wash); }   /* width attribute keeps it at or below its pixel width */

/* "Talk to us" card: under the photo on desktop, after the text on phones.
   A light green tint with a green outline so it reads as the next step. */
.cta-line {
  padding: 1.25rem 1.5rem; display: grid; gap: 0.85rem;
  background: color-mix(in srgb, var(--green) 7%, var(--white));
  border: 1px solid color-mix(in srgb, var(--green) 30%, var(--white));
  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 on the service pages (Snow and Ice has its own frosted
   version): the "Talk to us" card and the feature cards get a rim that
   catches the light from the top left (lime fading to white, then a deeper
   green), a faint green glow in that corner, a small leaf in the other and
   a soft green shadow; the photo gets a white frame with a lime edge.
   Colours come from the tokens, so snow mode turns them blue. Static. */
main:not(.page-ice) { --leaf-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312623f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='.32'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E"); }
main:not(.page-ice) .cta-line, main:not(.page-ice) .service-extras .feature-box {
  --card-bg: var(--white);
  border: 1.5px solid transparent;
  background:
    var(--leaf-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);
}
main:not(.page-ice) .cta-line { --card-bg: color-mix(in srgb, var(--green) 7%, var(--white)); }
main:not(.page-ice) .svc-photo img {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92), 0 0 0 5.5px color-mix(in srgb, var(--lime) 55%, var(--white)),
              0 16px 32px -20px color-mix(in srgb, var(--green-dark) 60%, transparent);
}

/* Buttons in the service 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; }

/* Feature cards after the content (Plant/Tree Health Care, Snow and Ice) */
.service-extras .feature-boxes { gap: 1rem; margin: 0; }
.service-extras .feature-box {
  text-align: left; box-shadow: none; border: 1px solid var(--rule);
  border-radius: var(--radius-glass); padding: clamp(1.25rem, 3vw, 1.75rem);
}
.service-extras .feature-box h3 { color: var(--ink); margin-bottom: 0.35em; }
.service-extras .feature-box h3::before { content: ""; display: block; width: 2rem; height: 3px; background: var(--green); margin-bottom: 0.9rem; }
.service-extras.is-snow .feature-box h3::before { background: var(--ice); }
.service-extras .feature-box p { font-size: 1rem; }

/* Snow and Ice request form (TEST ONLY stub), first in its band since it is
   what the page asks for: intro beside a form card, with the Reliability and
   Responsiveness boxes under the intro on desktop and after the form on
   phones. */
.request { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 3.5rem; align-items: start; }
.request .contact-form input, .request .contact-form select, .request .contact-form textarea { width: 100%; min-width: 0; }
@media (min-width: 820px) {
  .request { grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; grid-template-areas: "aside form" "features form"; row-gap: 1.5rem; }
  .request-aside { grid-area: aside; }
  .request .contact-form { grid-area: form; }
  .request-features { grid-area: features; }
}
.service-extras .request-features { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.service-extras .request-features .feature-box { padding: 1rem 1.25rem; }
.service-extras .request-features .feature-box h3 { font-size: 1.1rem; margin-bottom: 0.25em; }
.service-extras .request-features .feature-box h3::before { width: 1.5rem; margin-bottom: 0.6rem; }
.service-extras .request-features .feature-box p { font-size: 0.95rem; }
@media (min-width: 640px) and (max-width: 819px) { .service-extras .request-features { grid-template-columns: 1fr 1fr; } }
.request-aside p { color: var(--text-soft); }
.request .contact-form {
  max-width: none; background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius-glass); padding: clamp(1.25rem, 3vw, 2rem); gap: 1rem 1.25rem;
}
@media (min-width: 640px) { .request .contact-form { grid-template-columns: 1fr 1fr; } .request .contact-form .full { grid-column: 1 / -1; } }
.request .contact-form p { margin: 0; }
/* Treatment interests: three checkbox tiles, side by side from 640px */
.check-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.check-row { display: grid; gap: 0.5rem; }
.check-group legend { padding: 0; margin-bottom: 0.4rem; font-weight: 600; font-size: 0.95rem; }
.check-group legend span { font-weight: 400; color: var(--text-soft); }
@media (min-width: 640px) { .check-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contact-form .check {
  display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.8rem; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 0.6rem; background: var(--white); line-height: 1.3;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.contact-form .check input { width: 1.1rem; height: 1.1rem; margin: 0.1rem 0 0; flex: none; accent-color: var(--green); }
.check small { display: block; font-weight: 400; font-size: 0.85rem; color: var(--text-soft); margin-top: 0.15rem; }
.contact-form .check:hover { border-color: var(--lime); }
.contact-form .check:has(input:checked) { border-color: var(--green); background: color-mix(in srgb, var(--lime) 10%, var(--white)); }
.contact-form .check:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
.contact-form .check input:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .contact-form .check { transition: none; } }
/* Site map upload, with a hint that it matters */
.file-field { display: grid; gap: 0.4rem; }
.file-field > label { font-weight: 600; font-size: 0.95rem; }
.contact-form .file-field input { padding: 0.55rem; border-style: dashed; background: color-mix(in srgb, var(--lime) 6%, var(--white)); cursor: pointer; }
.file-field input::file-selector-button {
  font: inherit; font-weight: 600; font-size: 0.9rem; margin-right: 0.75rem; padding: 0.45rem 1rem; cursor: pointer;
  color: var(--white); background: var(--green); border: 0; border-radius: var(--radius-pill);
}
.field-hint {
  font-size: 0.88rem; line-height: 1.5; color: var(--text-soft);
  padding: 0.55rem 0.8rem; border-left: 3px solid var(--lime); border-radius: 0;
  background: color-mix(in srgb, var(--lime) 8%, var(--white));
}
.field-hint strong { color: var(--green-dark); }

/* Feature boxes (snow and ice page; three-up snow steps on the home page) */
.feature-boxes { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin: 1.5rem 0 0; clear: both; }
@media (min-width: 640px) { .feature-boxes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 820px) { .feature-boxes.three { grid-template-columns: repeat(3, 1fr); } }
.feature-box { background: var(--white); box-shadow: var(--shadow); padding: 2rem; text-align: center; }
.feature-box h3 { color: var(--green); }
.feature-box p { margin: 0; font-size: 0.95rem; }
.feature-box .step { display: block; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 0.4rem; }

/* ---------- 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); }
.credential-list { padding-left: 1.2em; }
.credential-list li { font-weight: 600; margin-bottom: 0.6rem; }

/* ---------- 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%; background: var(--white); box-shadow: var(--shadow);
  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-image: linear-gradient(to right, var(--green), var(--lime));
  display: flex; align-items: center; justify-content: center;
}
.contact-card .icon svg { width: 1.5rem; height: 1.5rem; fill: var(--white); }
.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 h2 { color: var(--green); }

.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); }

/* Triage request form (Snow and Ice page). Stub: not connected to anything yet. */
.test-badge {
  display: inline-block; background: #ffd54f; color: #5a4300; font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.08em; padding: 0.25rem 0.6rem; border-radius: 4px;
  vertical-align: middle; margin-left: 0.5rem;
}

/* ---------- Contact band: solid --green-dark, before the footer ---------- */
.band { background: var(--green-dark); color: var(--white); padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
@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(--wash); 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-logo { width: 12rem; height: auto; margin-bottom: 1rem; }
.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); }
}

/* ---------- Snow mode ----------
   Setting SITE_MODE=snow on the Railway service makes nginx add class="snow"
   to <body>. Everything below only applies then. Mark content that should
   appear only in snow mode with class="snow-only", and content that should
   disappear in snow mode with class="normal-only". */
.snow-only { display: none; }
.snow .snow-only { display: block; }
.snow .normal-only { display: none; }

/* Also the Snow and Ice page's own colours, all year (see the end of this file) */
.snow, body:has(> main.page-ice) {
  --green:      var(--ice);         /* ice blue takes the place of the brand green */
  --green-dark: var(--ice-dark);
  --lime:       var(--ice-light);   /* light blue takes the place of the lime accent */
  --wash:       #f2f7fc;
  --rule:       #d6e4f0;
  --glass-dark: color-mix(in srgb, var(--ice-dark) 55%, transparent);
}

/* Banner under the header, every page, snow mode only. The hero and page
   header sit below it instead of running under the header. */
.snow-banner {
  position: relative; z-index: 30;
  background: var(--green); color: var(--white); text-align: center;
  padding: 0.75rem var(--gutter); font-weight: 600; font-size: 0.95rem;
}
.snow-banner a { color: var(--white); text-decoration: underline; }
.snow-banner a:hover { color: #cfe6f7; }
.snow .page-header {
  margin-top: 0; padding-top: clamp(3rem, 8vw, 5.5rem);
  background: linear-gradient(135deg, var(--ice-light) 0%, var(--ice) 55%, var(--ice-dark) 100%);
}
.snow .page-header-compact { padding-top: clamp(1rem, 2.5vw, 1.75rem); }

/* Snow hero: replaces the photo rotation with one still, icy slide */
.hero .snow-slide {
  display: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 62%, rgba(255,255,255,0.14) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 80%, rgba(255,255,255,0.12) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 88% 20%, rgba(255,255,255,0.16) 0 2px, transparent 3px),
    linear-gradient(160deg, var(--ice-dark) 0%, var(--ice) 55%, var(--ice-light) 100%);
}
.snow .hero { margin-top: 0; height: auto; min-height: min(60vh, 560px); }
.snow .hero .slide:not(.snow-slide) { display: none; }
.snow .hero .snow-slide { display: block; opacity: 1; animation: none; }

/* ---------- Snow and Ice page: icy blue, all year ----------
   <main class="page-ice"> (on /snow-ice/ only; the shared header, footer and
   body tag stay as they are) swaps the greens for the ice blues across the
   whole page, the same way snow mode does. The banner has quiet snowflakes
   (drawn below as small SVG patterns, white on blue), and when the page
   opens, snow falls over the whole screen for about seven seconds and fades
   away (CSS only; off under reduced motion). The feature band gets a light
   fall of snow dots. */
.page-ice .page-header {
  --flakes-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='220'%3E%3Csymbol id='f' viewBox='0 0 24 24'%3E%3Cpath d='M12 12L12.0 2.0M12.0 5.8L9.74 3.54M12.0 5.8L14.26 3.54M12 12L3.34 7.0M6.63 8.9L3.54 9.73M6.63 8.9L5.8 5.81M12 12L3.34 17.0M6.63 15.1L5.8 18.19M6.63 15.1L3.54 14.27M12 12L12.0 22.0M12.0 18.2L14.26 20.46M12.0 18.2L9.74 20.46M12 12L20.66 17.0M17.37 15.1L20.46 14.27M17.37 15.1L18.2 18.19M12 12L20.66 7.0M17.37 8.9L18.2 5.81M17.37 8.9L20.46 9.73' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'/%3E%3C/symbol%3E%3Cuse href='%23f' x='18' y='26' width='18' height='18' opacity='0.48' transform='rotate(10 27.0 35.0)'/%3E%3Cuse href='%23f' x='150' y='8' width='12' height='12' opacity='0.35' transform='rotate(25 156.0 14.0)'/%3E%3Cuse href='%23f' x='206' y='120' width='22' height='22' opacity='0.42' transform='rotate(0 217.0 131.0)'/%3E%3Cuse href='%23f' x='84' y='150' width='14' height='14' opacity='0.32' transform='rotate(35 91.0 157.0)'/%3E%3Cuse href='%23f' x='120' y='82' width='9' height='9' opacity='0.29' transform='rotate(15 124.5 86.5)'/%3E%3C/svg%3E");
  --flakes-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='160'%3E%3Csymbol id='f' viewBox='0 0 24 24'%3E%3Cpath d='M12 12L12.0 2.0M12.0 5.8L9.74 3.54M12.0 5.8L14.26 3.54M12 12L3.34 7.0M6.63 8.9L3.54 9.73M6.63 8.9L5.8 5.81M12 12L3.34 17.0M6.63 15.1L5.8 18.19M6.63 15.1L3.54 14.27M12 12L12.0 22.0M12.0 18.2L14.26 20.46M12.0 18.2L9.74 20.46M12 12L20.66 17.0M17.37 15.1L20.46 14.27M17.37 15.1L18.2 18.19M12 12L20.66 7.0M17.37 8.9L18.2 5.81M17.37 8.9L20.46 9.73' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'/%3E%3C/symbol%3E%3Cuse href='%23f' x='30' y='100' width='8' height='8' opacity='0.35' transform='rotate(20 34.0 104.0)'/%3E%3Cuse href='%23f' x='120' y='40' width='7' height='7' opacity='0.32' transform='rotate(0 123.5 43.5)'/%3E%3Cuse href='%23f' x='150' y='130' width='6' height='6' opacity='0.26' transform='rotate(30 153.0 133.0)'/%3E%3Cuse href='%23f' x='70' y='10' width='6' height='6' opacity='0.29' transform='rotate(10 73.0 13.0)'/%3E%3C/svg%3E");
  /* Snow in three depths: soft out-of-focus specks far away, small flakes
     in the middle, a few big crisp flakes up close. */
  background:
    var(--flakes-a) 0 0 / 260px 220px,
    var(--flakes-b) 70px 40px / 180px 160px,
    radial-gradient(circle, rgba(255,255,255,0.4) 0, rgba(255,255,255,0) 3px) 0 0 / 90px 80px,
    radial-gradient(circle, rgba(255,255,255,0.28) 0, rgba(255,255,255,0) 4px) 37px 29px / 130px 110px,
    linear-gradient(120deg, var(--ice-dark) 0%, var(--ice) 60%, color-mix(in srgb, var(--ice) 55%, var(--ice-light)) 100%);
  padding-bottom: calc(clamp(1.25rem, 3vw, 2rem) + clamp(12px, 1.5vw, 24px));   /* room for the snowbank */
}
/* The snow keeps drifting down gently, each depth at its own speed (near
   flakes fastest), so the banner feels deep rather than flat. Each layer
   moves a whole number of its tiles per 30s loop, so the loop is seamless. */
@media (prefers-reduced-motion: no-preference) {
  .page-ice .page-header { animation: ice-drift 30s linear infinite; }
}
@keyframes ice-drift {
  from { background-position: 0 0, 70px 40px, 0 0, 37px 29px, 0 0; }
  to   { background-position: 0 660px, 70px 360px, 0 80px, 37px 139px, 0 0; }
}
@media (min-width: 820px) { .page-ice .svc-row ul { padding-top: 0.75rem; } }   /* the snowbank already separates them */
/* A soft, uneven snowbank along the bottom of the banner (a pale blue drift
   behind a white one), as if snow had piled up against the cards below. */
.page-ice .page-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: clamp(24px, 3vw, 46px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V30C80 16 170 12 260 26C360 40 430 18 540 14C650 10 720 34 820 30C930 26 980 4 1090 10C1200 16 1250 36 1340 26C1390 20 1420 16 1440 18V70Z' fill='%23d6e7f6'/%3E%3Cpath d='M0 70V48C70 36 150 30 230 42C320 56 400 44 480 32C570 20 650 34 740 46C830 58 910 40 1000 30C1090 22 1160 40 1250 48C1330 54 1400 42 1440 38V70Z' fill='white'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

/* Frosted edges: the white cards (the "Talk to us" card, the feature boxes
   and the request form) get an icy rim that catches the light from the top
   left, a faint frost in that corner, a small snowflake in the other, and a
   cool blue shadow; the photo gets a frosted white frame. Static. */
.page-ice { --flake-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12L12.0 2.0M12.0 5.8L9.74 3.54M12.0 5.8L14.26 3.54M12 12L3.34 7.0M6.63 8.9L3.54 9.73M6.63 8.9L5.8 5.81M12 12L3.34 17.0M6.63 15.1L5.8 18.19M6.63 15.1L3.54 14.27M12 12L12.0 22.0M12.0 18.2L14.26 20.46M12.0 18.2L9.74 20.46M12 12L20.66 17.0M17.37 15.1L20.46 14.27M17.37 15.1L18.2 18.19M12 12L20.66 7.0M17.37 8.9L18.2 5.81M17.37 8.9L20.46 9.73' fill='none' stroke='%234fa3dc' stroke-width='1.5' stroke-linecap='round' opacity='.35'/%3E%3C/svg%3E"); }   /* one faint ice-blue snowflake, for the card corners */
.page-ice .cta-line, .page-ice .feature-box, .page-ice .request .contact-form {
  --card-bg: var(--white);
  border: 1.5px solid transparent;
  background:
    var(--flake-mark) right 0.9rem top 0.8rem / 1.6rem 1.6rem no-repeat padding-box,
    radial-gradient(130% 100% at 0 0, color-mix(in srgb, var(--ice-light) 22%, transparent), transparent 45%) padding-box,
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ice-light) 90%, var(--white)) 0%, var(--white) 30%,
      color-mix(in srgb, var(--ice-light) 40%, var(--white)) 65%, color-mix(in srgb, var(--ice-light) 85%, 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(--ice-dark) 60%, transparent);
}
.page-ice .cta-line { --card-bg: color-mix(in srgb, var(--green) 7%, var(--white)); }
@media (max-width: 639px) { .page-ice .request .contact-form { --flake-mark: none; } }   /* its first label runs full width there */
.page-ice .svc-photo img {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92), 0 0 0 5.5px color-mix(in srgb, var(--ice-light) 55%, var(--white)),
              0 16px 32px -20px color-mix(in srgb, var(--ice-dark) 65%, transparent);
}

/* Movement as you go: the banner's words and buttons rise in when the page
   opens and the service cards follow in a short ripple; further down, the
   copy, photo, cards and form fade up as they scroll into view (the same
   scroll-driven reveal as the home tiles; anything already on screen when
   the page opens just shows). CSS only; off under reduced motion, and
   browsers without scroll timelines simply show everything. */
@media (prefers-reduced-motion: no-preference) {
  .page-ice .page-header .wrap > div { animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .page-ice .page-header .hero-actions { animation-delay: 0.2s; }
  .page-ice .svc-row li { animation: hero-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .page-ice .svc-row li:nth-child(1) { animation-delay: 0.3s; }
  .page-ice .svc-row li:nth-child(2) { animation-delay: 0.38s; }
  .page-ice .svc-row li:nth-child(3) { animation-delay: 0.46s; }
  .page-ice .svc-row li:nth-child(4) { animation-delay: 0.54s; }
  .page-ice .svc-row li:nth-child(5) { animation-delay: 0.62s; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .page-ice .svc-copy, .page-ice .svc-photo, .page-ice .cta-line,
    .page-ice .request-aside, .page-ice .request .contact-form, .page-ice .feature-box,
    .page-ice .band .wrap > * {
      animation: tile-reveal linear both; animation-timeline: view(); animation-range: entry 0px entry 160px;
    }
    .page-ice .svc-photo, .page-ice .request .contact-form, .page-ice .feature-box + .feature-box,
    .page-ice .band .wrap > * + * { animation-range: entry 30px entry 190px; }
  }
}
/* Snowfall over the whole screen when the page opens: two fixed layers of
   flakes (big ones on ::after, faster, as if nearer; small ones on ::before)
   above the page and under the header, never catching clicks. Each layer is
   twice the screen tall with flakes only in its top half, and slides down
   one screen height, so the snow enters from the top edge and sweeps down
   (transform only, so it stays smooth), then fades out after about seven
   seconds. White flakes with a soft ice-blue edge show on white and blue. */
.page-ice {
  --flakes-fall-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='300'%3E%3Csymbol id='f' viewBox='-2 -2 28 28'%3E%3Cpath d='M12 12L12.0 2.0M12.0 5.8L9.74 3.54M12.0 5.8L14.26 3.54M12 12L3.34 7.0M6.63 8.9L3.54 9.73M6.63 8.9L5.8 5.81M12 12L3.34 17.0M6.63 15.1L5.8 18.19M6.63 15.1L3.54 14.27M12 12L12.0 22.0M12.0 18.2L14.26 20.46M12.0 18.2L9.74 20.46M12 12L20.66 17.0M17.37 15.1L20.46 14.27M17.37 15.1L18.2 18.19M12 12L20.66 7.0M17.37 8.9L18.2 5.81M17.37 8.9L20.46 9.73' fill='none' stroke='%237fb3dd' stroke-width='3.6' stroke-linecap='round' stroke-opacity='.75'/%3E%3Cpath d='M12 12L12.0 2.0M12.0 5.8L9.74 3.54M12.0 5.8L14.26 3.54M12 12L3.34 7.0M6.63 8.9L3.54 9.73M6.63 8.9L5.8 5.81M12 12L3.34 17.0M6.63 15.1L5.8 18.19M6.63 15.1L3.54 14.27M12 12L12.0 22.0M12.0 18.2L14.26 20.46M12.0 18.2L9.74 20.46M12 12L20.66 17.0M17.37 15.1L20.46 14.27M17.37 15.1L18.2 18.19M12 12L20.66 7.0M17.37 8.9L18.2 5.81M17.37 8.9L20.46 9.73' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'/%3E%3C/symbol%3E%3Cuse href='%23f' x='30' y='40' width='24' height='24' opacity='0.95' transform='rotate(0 42.0 52.0)'/%3E%3Cuse href='%23f' x='200' y='24' width='17' height='17' opacity='0.85' transform='rotate(20 208.5 32.5)'/%3E%3Cuse href='%23f' x='262' y='170' width='27' height='27' opacity='0.9' transform='rotate(35 275.5 183.5)'/%3E%3Cuse href='%23f' x='110' y='210' width='19' height='19' opacity='0.85' transform='rotate(10 119.5 219.5)'/%3E%3Cuse href='%23f' x='160' y='110' width='13' height='13' opacity='0.75' transform='rotate(25 166.5 116.5)'/%3E%3C/svg%3E");
  --flakes-fall-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='200'%3E%3Csymbol id='f' viewBox='-2 -2 28 28'%3E%3Cpath d='M12 12L12.0 2.0M12.0 5.8L9.74 3.54M12.0 5.8L14.26 3.54M12 12L3.34 7.0M6.63 8.9L3.54 9.73M6.63 8.9L5.8 5.81M12 12L3.34 17.0M6.63 15.1L5.8 18.19M6.63 15.1L3.54 14.27M12 12L12.0 22.0M12.0 18.2L14.26 20.46M12.0 18.2L9.74 20.46M12 12L20.66 17.0M17.37 15.1L20.46 14.27M17.37 15.1L18.2 18.19M12 12L20.66 7.0M17.37 8.9L18.2 5.81M17.37 8.9L20.46 9.73' fill='none' stroke='%237fb3dd' stroke-width='3.6' stroke-linecap='round' stroke-opacity='.75'/%3E%3Cpath d='M12 12L12.0 2.0M12.0 5.8L9.74 3.54M12.0 5.8L14.26 3.54M12 12L3.34 7.0M6.63 8.9L3.54 9.73M6.63 8.9L5.8 5.81M12 12L3.34 17.0M6.63 15.1L5.8 18.19M6.63 15.1L3.54 14.27M12 12L12.0 22.0M12.0 18.2L14.26 20.46M12.0 18.2L9.74 20.46M12 12L20.66 17.0M17.37 15.1L20.46 14.27M17.37 15.1L18.2 18.19M12 12L20.66 7.0M17.37 8.9L18.2 5.81M17.37 8.9L20.46 9.73' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'/%3E%3C/symbol%3E%3Cuse href='%23f' x='20' y='130' width='11' height='11' opacity='0.8' transform='rotate(15 25.5 135.5)'/%3E%3Cuse href='%23f' x='140' y='56' width='10' height='10' opacity='0.75' transform='rotate(0 145.0 61.0)'/%3E%3Cuse href='%23f' x='186' y='166' width='9' height='9' opacity='0.7' transform='rotate(30 190.5 170.5)'/%3E%3Cuse href='%23f' x='86' y='18' width='9' height='9' opacity='0.7' transform='rotate(10 90.5 22.5)'/%3E%3C/svg%3E");
}
.page-ice::before, .page-ice::after {
  content: ""; position: fixed; left: 0; right: 0; top: -100vh; height: 200vh;
  z-index: 35; pointer-events: none;
  -webkit-mask: linear-gradient(#000 44%, transparent 50%);
          mask: linear-gradient(#000 44%, transparent 50%);
  animation: ice-snowfall 7s cubic-bezier(0.3, 0.15, 0.55, 1) 0.2s both;
}
.page-ice::after { background: var(--flakes-fall-a) 0 0 / 320px 300px; }
.page-ice::before { background: var(--flakes-fall-b) 40px 0 / 220px 200px; animation-duration: 8.5s; }
@keyframes ice-snowfall {
  0%   { transform: translate(0, 0); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(24px, 100vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-ice::before, .page-ice::after { display: none; }
}
.page-ice .page-header::before { background: linear-gradient(180deg, rgba(10, 30, 60, 0.35), rgba(10, 30, 60, 0) 60%); }
.page-ice .service-extras {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--ice-light) 22%, transparent) 0 1.5px, transparent 2.5px) 0 0 / 41px 43px,
    radial-gradient(circle, color-mix(in srgb, var(--ice-light) 14%, transparent) 0 2px, transparent 3px) 17px 23px / 73px 67px,
    linear-gradient(180deg, var(--wash), color-mix(in srgb, var(--ice-light) 16%, var(--white)));
}