/* ==========================================================================
   Evans Exterior Landscaping · components
   --------------------------------------------------------------------------
   theme.json owns colors, fonts, sizes, spacing and the base button, link and
   heading styles. This file holds what theme.json can't express: component
   layout, block styles, pseudo-elements, :has() states and responsive rules.

   The look: classic serif headlines (Newsreader) in sentence case, Archivo for
   everything else, pill buttons, hairline dividers and thin line icons. Small
   spaced capitals are kept for labels only (eyebrows, nav, footer headings).

   Spacing inside a component lives here, not in block settings. Section
   padding is set on each section Group with the section-* spacing presets.

   Breakpoints (the only ones; everything else is fluid):
     1100px  the hero and Service area photos are shaded all over (their copy spans most of the width);
             the hero card stacks under the headline
     1000px  service, season and gallery columns step down; How it works stacks
      944px  About row stacks (the portrait keeps its 4:5 shape)
      860px  header links collapse into the mobile menu
      600px  phone layout: single columns, full-width button rows
      480px  smaller header logo, icon-only menu button
      360px  smallest logo, header button drops its icon
   ========================================================================== */

/* ---------- Tokens (mapped to theme.json presets) ---------- */
:root {
  --ee-green: var(--wp--preset--color--logo-green);
  --ee-moss: var(--wp--preset--color--moss);
  --ee-white: var(--wp--preset--color--feather-white);
  --ee-copper: var(--wp--preset--color--copper);
  --ee-copper-light: var(--wp--custom--color--copper-light);
  --ee-night: var(--wp--preset--color--night-olive);
  --ee-tint: var(--wp--preset--color--tint);
  --ee-muted: var(--wp--preset--color--muted);
  --ee-muted-on-green: var(--wp--preset--color--muted-on-green);
  --ee-muted-on-night: var(--wp--preset--color--muted-on-night);
  --ee-muted-on-bronze: var(--wp--preset--color--muted-on-bronze);
  --ee-sand: var(--wp--preset--color--sand);
  --ee-bronze: var(--wp--preset--color--bronze);
  --ee-line: var(--wp--preset--color--line);
  --ee-line-field: var(--wp--custom--color--line-field);
  --ee-line-choice: var(--wp--custom--color--line-choice);
  --ee-line-night: var(--wp--custom--color--line-night);
  --ee-error: var(--wp--custom--color--error);
  --ee-hairline: rgba(23, 28, 17, 0.14);          /* dividers on white and tint */
  --ee-hairline-on-dark: rgba(253, 251, 252, 0.22);
  --ee-soft-white: rgba(253, 251, 252, 0.86);     /* muted text on the lighter green panel */
  --ee-cream: var(--wp--custom--color--cream);    /* headings over photos: warmer than white, so they don't glare */
  --ee-soft-cream: rgba(243, 238, 230, 0.86);     /* body text over photos */
  --ee-shade-all: linear-gradient(180deg, rgba(23, 28, 17, 0.66) 0%, rgba(23, 28, 17, 0.66) 40%, rgba(23, 28, 17, 0.76) 70%, rgba(23, 28, 17, 0.86) 100%); /* photos whose copy spans the width */

  --ee-font: var(--wp--preset--font-family--archivo);
  --ee-serif: var(--wp--preset--font-family--newsreader);

  --ee-gutter: var(--wp--preset--spacing--gutter);
  --ee-radius-s: var(--wp--preset--border-radius--small);
  --ee-radius-m: var(--wp--preset--border-radius--medium);
  --ee-radius-l: var(--wp--preset--border-radius--large);
  --ee-dur-fast: var(--wp--custom--motion--fast);
  --ee-dur: var(--wp--custom--motion--base);
  --ee-dur-slow: var(--wp--custom--motion--slow);
  --ee-ease: var(--wp--custom--motion--ease);

  /* Context defaults (light background); sections below override them */
  --ee-fg-muted: var(--ee-muted);
  --ee-eyebrow: var(--ee-green);
  --ee-heading: var(--ee-green);
  --ee-focus: var(--ee-night);
  --ee-divider: var(--ee-hairline);
  --ee-icon-accent: var(--ee-bronze); /* accent icons on light backgrounds */
}

/* ---------- Font fallbacks ----------
   Until Newsreader and Archivo arrive, text is drawn in a system font resized
   to take the same room, so nothing rewraps or jumps when they swap in (Google
   counts that jump as layout shift). Each face names one system font and its
   metric twins; the theme.json stacks list them after the web font, so the
   first one the device has wins. Widths were measured against the Home hero:
   the serif at the 88px headline (Newsreader narrows at smaller sizes), the
   sans at the 18px lead. Ascent and descent copy the web fonts' own. */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"), local("Gelasio"); size-adjust: 100.38%; ascent-override: 73.22%; descent-override: 26.4%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback Times"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos"); size-adjust: 109.84%; ascent-override: 66.92%; descent-override: 24.13%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback Noto"; src: local("Noto Serif"), local("NotoSerif"), local("NotoSerif-Regular"); size-adjust: 92.95%; ascent-override: 79.08%; descent-override: 28.51%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback DejaVu"; src: local("DejaVu Serif"); size-adjust: 87.05%; ascent-override: 84.43%; descent-override: 30.44%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 98.15%; ascent-override: 89.45%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 98.91%; ascent-override: 88.77%; descent-override: 21.23%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback DejaVu"; src: local("DejaVu Sans"); size-adjust: 86.1%; ascent-override: 101.97%; descent-override: 24.39%; line-gap-override: 0%; }

/* Up to 1000px the Home headline is 46–61px, so the serif stack swaps to
   faces tuned at 46px (the same stack as theme.json, with "Small" faces). */
@font-face { font-family: "Newsreader Fallback Small"; src: local("Georgia"), local("Gelasio"); size-adjust: 96.13%; ascent-override: 76.46%; descent-override: 27.57%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback Small Times"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos"); size-adjust: 105.19%; ascent-override: 69.87%; descent-override: 25.19%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback Small Noto"; src: local("Noto Serif"), local("NotoSerif"), local("NotoSerif-Regular"); size-adjust: 89.02%; ascent-override: 82.57%; descent-override: 29.77%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback Small DejaVu"; src: local("DejaVu Serif"); size-adjust: 83.37%; ascent-override: 88.16%; descent-override: 31.79%; line-gap-override: 0%; }
@media (max-width: 1000px) {
  html:root {
    --wp--preset--font-family--newsreader: Newsreader, "Newsreader Fallback Small", "Newsreader Fallback Small Times", "Newsreader Fallback Small Noto", "Newsreader Fallback Small DejaVu", Georgia, "Times New Roman", serif;
  }
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
:focus-visible {
  outline: 3px solid var(--ee-focus);
  outline-offset: 3px;
}
/* Vertical Group stacks never wrap. Core emits flex-wrap: wrap on them, and a
   wrapping column inside a grid cell makes Chromium size the row far too tall. */
.wp-block-group.is-vertical { flex-wrap: nowrap; }
/* Header, main and footer sit flush; so do full-width sections in a page. */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block: 0; }
h1.wp-block-heading,
h2.wp-block-heading { text-wrap: balance; }
::selection { background-color: var(--ee-sand); color: var(--ee-night); }

/* ---------- Section context ----------
   Green, Tint, Sand, Night and Bronze are section styles (styles/sections/*.json).
   The bridge hands their color context to the components inside.
   Roles: green is the main color (bands, the Panel that texts Chandler);
   Tint and Sand are the light warm grounds (Sand: About, and Chandler's replies
   in the How it works thread); Night is the Our work band and the footer;
   Bronze (copper deepened) is for accent icons on light grounds; copper itself
   stays for buttons and accents. */
.is-style-section-green,
.is-style-panel,
.ee-hero,
.ee-area-cover {
  --ee-fg-muted: var(--ee-muted-on-green);
  --ee-eyebrow: var(--ee-muted-on-green);
  --ee-heading: var(--ee-white);
  --ee-focus: var(--ee-white);
  --ee-divider: var(--ee-hairline-on-dark);
  --ee-icon-accent: var(--wp--preset--color--copper-glow);
}
.is-style-section-bronze {
  --ee-fg-muted: var(--ee-muted-on-bronze);
  --ee-eyebrow: var(--ee-muted-on-bronze);
  --ee-heading: var(--ee-white);
  --ee-focus: var(--ee-white);
  --ee-divider: var(--ee-hairline-on-dark);
  --ee-icon-accent: var(--wp--preset--color--copper-glow);
}
.is-style-section-night {
  --ee-fg-muted: var(--ee-muted-on-night);
  --ee-eyebrow: var(--ee-muted-on-night);
  --ee-heading: var(--ee-white);
  --ee-focus: var(--ee-white);
  --ee-divider: var(--ee-hairline-on-dark);
  --ee-icon-accent: var(--wp--preset--color--copper-glow);
}

/* ---------- Type: block styles + helper classes ---------- */
/* Eyebrow: small spaced capitals after a short copper rule */
.is-style-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ee-eyebrow);
  text-wrap: balance;
}
.is-style-eyebrow::before,
.ee-section-head--center .is-style-eyebrow::after {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background-color: var(--ee-copper);
}
.is-style-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ee-fg-muted);
}
.ee-lead--hero { max-width: 560px; text-wrap: pretty; }
.ee-lead--page { max-width: 620px; text-wrap: pretty; }
.is-style-note {
  font-size: 14px;
  line-height: normal;
  color: var(--ee-fg-muted);
}
.ee-section-intro {
  max-width: 460px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ee-fg-muted);
}
.ee-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ee-fg-muted);
}
/* Item: serif titles for steps, services, seasons and factors */
.wp-block-heading.is-style-item {
  font-family: var(--ee-serif);
  font-size: var(--wp--preset--font-size--item-title);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: inherit;
}
/* Label caps: small spaced capitals for card titles */
.wp-block-heading.is-style-label-caps {
  font-family: var(--ee-font);
  font-size: 12.5px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
}
.ee-num {
  font-family: var(--ee-serif);
  font-weight: 300;
  line-height: 1;
  color: var(--ee-copper);
}
.ee-item-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ee-fg-muted);
}

/* Thin copper rule (a Separator block) */
.wp-block-separator.ee-rule {
  width: 56px;
  height: 2px;
  margin: 0;
  border: 0;
  opacity: 1;
  background-color: var(--ee-copper);
}

/* Dash list (List block, style "Dash") */
.wp-block-list.is-style-dash {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
}
.is-style-dash > li { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.is-style-dash > li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 1.5px;
  margin-top: calc((1.5em - 1.5px) / 2); /* centered on the first line, also when an item wraps */
  background: var(--ee-copper);
}

/* ---------- Buttons ----------
   theme.json styles the base button: a copper pill, 50px tall, normal case. */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color var(--ee-dur-fast) linear, color var(--ee-dur-fast) linear, border-color var(--ee-dur-fast) linear;
}
.wp-block-button.is-style-outline-light > .wp-block-button__link,
.wp-block-button.is-style-outline-green > .wp-block-button__link {
  padding: 13.5px 24.5px; /* the 1.5px border keeps the pill 50px tall */
  border: 1.5px solid currentColor;
  background-color: transparent;
}
.wp-block-button.is-style-outline-light > .wp-block-button__link { border-color: rgba(253, 251, 252, 0.75); color: var(--ee-white); }
.wp-block-button.is-style-outline-light > .wp-block-button__link:hover { border-color: var(--ee-white); background-color: var(--ee-white); color: var(--ee-green); }
.wp-block-button.is-style-outline-green > .wp-block-button__link { border-color: var(--ee-green); color: var(--ee-green); }
.wp-block-button.is-style-outline-green > .wp-block-button__link:hover { background-color: var(--ee-green); color: var(--ee-white); }
.wp-block-button.ee-btn-sm > .wp-block-button__link {
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
}
.wp-block-buttons.ee-btn-row { gap: 12px; }

/* Icons drawn with a mask so the label text stays editable */
.ee-icon-camera > .wp-block-button__link::before,
.ee-link-arrow a::after,
.ee-text-link a::after {
  content: "";
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ee-icon) center / contain no-repeat;
  mask: var(--ee-icon) center / contain no-repeat;
}
.ee-icon-camera > .wp-block-button__link::before {
  --ee-icon: url("../icons/camera.svg");
  width: 18px;
  height: 18px;
}
.ee-btn-sm.ee-icon-camera > .wp-block-button__link::before { width: 16px; height: 16px; }

/* ---------- Text links ---------- */
.ee-link-arrow a,
.ee-text-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ee-green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.ee-link-arrow a:hover,
.ee-text-link a:hover { color: var(--ee-night); }
.ee-link-arrow a::after,
.ee-text-link a::after {
  --ee-icon: url("../icons/arrow-right.svg");
  width: 16px;
  height: 16px;
}
.ee-plain-link a { color: inherit; text-decoration: none; }
.ee-plain-link a:hover { color: inherit; text-decoration: underline; text-underline-offset: 4px; }

/* Line icons above service, season and factor titles: ee-icon--… picks one */
.ee-has-icon::before {
  content: "";
  flex: none;
  width: var(--ee-icon-size, 44px);
  height: var(--ee-icon-size, 44px);
  background-color: var(--ee-icon-color, var(--ee-green));
  -webkit-mask: var(--ee-icon) center / contain no-repeat;
  mask: var(--ee-icon) center / contain no-repeat;
}
.ee-icon--bed-refresh { --ee-icon: url("../icons/bed-refresh.svg"); }
.ee-icon--mulch { --ee-icon: url("../icons/mulch.svg"); }
.ee-icon--edging { --ee-icon: url("../icons/edging.svg"); }
.ee-icon--planting { --ee-icon: url("../icons/planting.svg"); }
.ee-icon--lighting { --ee-icon: url("../icons/lighting.svg"); }
.ee-icon--all-year { --ee-icon: url("../icons/all-year.svg"); }
.ee-icon--spring-summer { --ee-icon: url("../icons/spring-summer.svg"); }
.ee-icon--fall { --ee-icon: url("../icons/fall.svg"); }
.ee-icon--winter { --ee-icon: url("../icons/winter.svg"); }
.ee-icon--size { --ee-icon: url("../icons/size.svg"); }
.ee-icon--access { --ee-icon: url("../icons/access.svg"); }
.ee-icon--haul-away { --ee-icon: url("../icons/haul-away.svg"); }
.ee-icon--materials { --ee-icon: url("../icons/materials.svg"); }
.ee-icon--pin { --ee-icon: url("../icons/map-pin.svg"); }
.ee-icon--guard { --ee-icon: url("../icons/shield.svg"); }

/* ---------- Header (template part "header") ---------- */
.ee-header__bar {
  padding-block: 14px;
  gap: 8px 32px;
}
.ee-header .wp-block-site-logo a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ee-header .wp-block-site-logo img { display: block; height: 52px; width: auto; }
.ee-header__actions { gap: 32px; }
/* On a page that opens with the photo hero, the header floats over the photo */
.wp-site-blocks:has(.ee-hero) > header.wp-block-template-part {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}
.wp-site-blocks:has(.ee-hero) .ee-header { background: transparent !important; }

/* Sticky header. assets/js/header.js adds html.ee-sticky, which fixes the header
   to the top of the screen, and .is-solid once the page scrolls past its first
   section (on Home, just before the hero copy would slide under the header).
   It starts clear over the photo hero, or green over the green title band, and
   fades to a white bar 20px shorter. Without the script it scrolls away as above. */
:root { --ee-header-h: 80px; } /* full height; 72px below 480px. header.js reads it */
.ee-sticky { scroll-padding-top: 76px; } /* jump links and focused fields land below the bar */
.ee-sticky .wp-site-blocks > header.wp-block-template-part {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  z-index: 30;
}
.ee-sticky .wp-site-blocks:not(:has(.ee-hero)) { padding-top: var(--ee-header-h); } /* the room it took in the page */
.ee-header { position: relative; isolation: isolate; }
/* The white bar is a layer of its own: a backdrop filter on the header would
   also trap the full-screen mobile menu inside the header's box */
.ee-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--ee-white);
  box-shadow: 0 1px 0 var(--ee-hairline), 0 10px 24px -18px rgba(23, 28, 17, 0.4);
  opacity: 0;
  pointer-events: none;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .ee-header::before {
    background-color: color-mix(in srgb, var(--ee-white) 94%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}
.ee-header.is-solid {
  --ee-focus: var(--ee-night);
  --ee-menu-ink: var(--ee-green);
  --ee-menu-line: rgba(70, 89, 42, 0.4);
  --ee-menu-line-hover: var(--ee-green);
  background-color: transparent !important;
  color: var(--ee-green); /* the menu links inherit it (core sets them to inherit) */
}
.ee-header.is-solid::before { opacity: 1; }
.ee-header.is-solid .ee-header__bar { padding-block: 8px; }
.ee-header.is-solid .ee-header__bar > .wp-block-site-logo img { height: 44px; }
/* The logo turns green: the same logo, drawn through a mask, fades in over the
   white one. assets/brand/logo-mask.png is a copy of the site logo: replace it
   if the logo changes. */
.ee-header__bar > .wp-block-site-logo a { position: relative; }
.ee-header__bar > .wp-block-site-logo a::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--ee-green);
  -webkit-mask: url("../brand/logo-mask.png") center / contain no-repeat;
  mask: url("../brand/logo-mask.png") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}
.ee-header.is-solid .ee-header__bar > .wp-block-site-logo img { opacity: 0; }
.ee-header.is-solid .ee-header__bar > .wp-block-site-logo a::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* colors fade; the bar's height eases too, which reflows nothing since the header is fixed */
  .ee-header { transition: background-color var(--ee-dur-slow) linear, color var(--ee-dur-slow) linear; }
  .ee-header::before,
  .ee-header__bar > .wp-block-site-logo a::after { transition: opacity var(--ee-dur-slow) linear; }
  .ee-header__bar { transition: padding var(--ee-dur-slow) var(--ee-ease); }
  .ee-header__bar > .wp-block-site-logo img { transition: height var(--ee-dur-slow) var(--ee-ease), opacity var(--ee-dur-slow) linear; }
  .ee-nav .wp-block-navigation__responsive-container-open { transition: color var(--ee-dur-slow) linear, border-color var(--ee-dur-slow) linear; }
}

.ee-nav .wp-block-navigation__container { gap: 4px 30px; }
.ee-nav .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ee-white);
  text-decoration: none;
}
.ee-nav .wp-block-navigation-item__content:hover { color: var(--ee-white); text-decoration: none; }
/* Menu button (only shows below 860px). Core sets its font three classes deep. */
.ee-nav .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--ee-menu-line, rgba(253, 251, 252, 0.5));
  border-radius: 999px;
  color: var(--ee-menu-ink, var(--ee-white));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.ee-nav .wp-block-navigation__responsive-container-open:hover { border-color: var(--ee-menu-line-hover, var(--ee-white)); }
.ee-nav .wp-block-navigation__responsive-container-open::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("../icons/menu.svg") center / contain no-repeat;
  mask: url("../icons/menu.svg") center / contain no-repeat;
}

/* ---------- Mobile menu (template part "mobile-menu", the Navigation overlay) ---------- */
.ee-mobile-menu {
  min-height: 100vh;
  min-height: 100dvh;
  gap: 28px;
  padding: 14px var(--ee-gutter) 32px;
  /* the overlay sits inside the header's <nav>: reset what it inherits */
  font-size: var(--wp--preset--font-size--body);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.ee-mobile-menu__head { min-height: 68px; }
.ee-mobile-menu .wp-block-site-logo img { display: block; height: 44px; width: auto; }
.ee-mobile-menu .wp-block-navigation-overlay-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1.5px solid rgba(253, 251, 252, 0.5);
  border-radius: 999px;
  color: var(--ee-white);
}
.ee-mobile-menu .wp-block-navigation-overlay-close:hover { border-color: var(--ee-white); }
.ee-mobile-menu .wp-block-navigation-overlay-close svg { display: none; }
.ee-mobile-menu .wp-block-navigation-overlay-close::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("../icons/close.svg") center / contain no-repeat;
  mask: url("../icons/close.svg") center / contain no-repeat;
}
.ee-mobile-menu .ee-overlay-nav,
.ee-mobile-menu .ee-overlay-nav .wp-block-navigation-item { width: 100%; }
.ee-mobile-menu .ee-overlay-nav .wp-block-navigation__container {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.ee-mobile-menu .ee-overlay-nav .wp-block-navigation-item__content {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 64px;
  border-bottom: 1px solid var(--ee-hairline-on-dark);
  font-family: var(--ee-serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ee-white);
  text-decoration: none;
}
.ee-mobile-menu .ee-overlay-nav .wp-block-navigation-item__content:hover { text-decoration: none; }
.ee-mobile-menu__cta { gap: 12px; }

/* ---------- Layout helpers ---------- */
.ee-gap-56 { gap: 56px; }
.ee-gap-44 { gap: 44px; }
.ee-gap-40 { gap: 40px; }
.ee-section-head { gap: 14px; }
.ee-section-head--center { align-items: center; text-align: center; }
.ee-section-head--center .is-style-eyebrow { justify-content: center; }
.ee-section-head--center .ee-section-intro { max-width: 560px; }
.ee-section-head--split { gap: 16px 48px; align-items: flex-end; }

/* Photos: Image blocks with an aspect-ratio preset and "cover" */
.ee-photo,
.ee-photo img { margin: 0; }
.ee-photo img { display: block; width: 100%; }

/* ---------- Home · hero (Cover block, photo with a shade) ---------- */
/* the hero is the whole first screen: svh is the height visible on load, browser bars included */
.wp-block-cover.ee-hero {
  min-height: 100vh;
  min-height: 100svh;
  align-items: flex-end;
  /* the floating header (about 80px) must never cover the copy */
  padding-top: max(var(--wp--preset--spacing--section-96), 128px) !important;
}
/* core sizes a positioned Cover's content to fit (five classes deep); the hero spans the
   wrapper, and the copy fills the photo's height so the headline can center in it */
.wp-block-cover.ee-hero.has-custom-content-position.has-custom-content-position.is-position-bottom-left { align-items: stretch; }
.wp-block-cover.ee-hero.has-custom-content-position.has-custom-content-position.is-position-bottom-left > .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  padding-inline: 0;
}
/* the Cover's inner container doesn't constrain wide children like a Group does */
.ee-hero__inner {
  flex: 1;
  gap: 44px;
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto !important;
}
/* The headline (eyebrow + h1) and the walk-through card sit side by side: the
   headline centered in the photo, the card in the bottom-right corner. They
   stack at the bottom at 1100px and below. */
.ee-hero__copy {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  column-gap: 64px;
}
.ee-hero__copy > .wp-block-group { margin-block: 0; }
.ee-hero__title { align-self: center; gap: 22px; }
.ee-hero h1 { max-width: 840px; color: var(--ee-cream); }
/* the shade (theme.json "Hero shade") does the work; a tight shadow just crisps the letters.
   A wide blurred one made iPhone Safari paint a dark patch over the photo on first load. */
.ee-hero__title { text-shadow: 0 1px 2px rgba(23, 28, 17, 0.4); }
/* the card brings its own dark ground, so its text needs no shadow */
.ee-hero__card {
  align-self: end;
  gap: 18px;
  padding: 32px;
  border: 1px solid color-mix(in srgb, var(--ee-cream) 16%, transparent);
  border-radius: var(--wp--preset--border-radius--x-large);
  background: color-mix(in srgb, var(--ee-night) 80%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.ee-hero__card-title { font-family: var(--ee-serif); font-size: 28px; line-height: 1.15; color: var(--ee-cream); }
.ee-hero__card .ee-lead--hero { max-width: none; font-size: 16px; }
.ee-hero__card .ee-btn-row { flex-direction: column; align-items: stretch; }
.ee-hero__card .ee-btn-row > .wp-block-button,
.ee-hero__card .ee-btn-row .wp-block-button__link { width: 100%; }
/* The photo and its shade each get their own layer, so a photo tile Safari paints
   late (iPhones decode big images in tiles) can never be drawn over the shade. */
.ee-hero > .wp-block-cover__image-background,
.ee-hero > .wp-block-cover__background,
.ee-area-cover > .wp-block-cover__image-background,
.ee-area-cover > .wp-block-cover__background { transform: translateZ(0); }
/* buttons sit on their own solid fill: the shadow only smudges their labels */
.ee-hero__card .wp-block-button__link,
.ee-area__copy .wp-block-button__link { text-shadow: none; }
.ee-hero .is-style-eyebrow { color: var(--ee-cream); }
.ee-hero .is-style-lead { color: var(--ee-soft-cream); }
.ee-hero .is-style-note { color: rgba(253, 251, 252, 0.74); }
/* links over the photos (and numbers iPhones turn into links) take the text color, not the green link color */
.ee-hero a:not(.wp-block-button__link),
.ee-area-cover a:not(.wp-block-button__link) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ee-hero__card > .wp-block-buttons { margin-top: 4px; }
/* ---------- Home · services: line icons in columns with hairlines ---------- */
.wp-block-group.ee-services {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}
.ee-service {
  --ee-icon-size: 44px;
  align-items: center;
  gap: 14px;
  padding: 6px 26px 4px;
  text-align: center;
}
.ee-service + .ee-service { border-left: 1px solid var(--ee-divider); }
.ee-service::before { margin-bottom: 6px; }

/* ---------- Home · through the year (green band) ---------- */
.ee-seasons__layout { gap: 40px 64px; align-items: flex-start; }
.ee-seasons__layout > .ee-section-head { flex: 0 1 340px; }
.wp-block-group.ee-seasons {
  flex: 1 1 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
/* Each season has its own color for the line across the top and the icon */
.ee-season {
  --ee-season-color: var(--ee-white);
  --ee-icon-size: 36px;
  --ee-icon-color: var(--ee-season-color);
  --ee-season-pad-top: 30px;
  position: relative;
  gap: 12px;
  padding: var(--ee-season-pad-top) 24px 26px;
  background-image: linear-gradient(var(--ee-season-color), var(--ee-season-color));
  background-repeat: no-repeat;
  background-position: 24px 0;
  background-size: calc(100% - 48px) 2px;
}
.ee-season.ee-icon--spring-summer { --ee-season-color: var(--wp--custom--color--season-spring); }
.ee-season.ee-icon--fall { --ee-season-color: var(--wp--preset--color--copper-glow); }
.ee-season.ee-icon--winter { --ee-season-color: var(--wp--custom--color--season-winter); }
.ee-season + .ee-season { border-left: 1px solid var(--ee-divider); }
.ee-season::before { margin-bottom: 6px; }
.ee-season > .is-style-item { font-size: 22px; color: var(--ee-white); }
/* The season we're in (functions.php adds is-now from the date) sits on a soft
   panel and shows its "This season" line. Text in the panel goes a step
   brighter so it keeps 4.5:1 on the lighter green. */
.ee-season.is-now {
  --ee-fg-muted: var(--ee-soft-white);
  border-radius: var(--ee-radius-l);
  background-color: rgba(253, 251, 252, 0.08);
}
.ee-season.is-now,
.ee-season.is-now + .ee-season { border-left-color: transparent; }
.ee-season__now { display: none; }
.ee-season.is-now > .ee-season__now {
  position: absolute;
  top: var(--ee-season-pad-top);
  right: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--ee-icon-size);
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ee-white);
}
.ee-season__now::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ee-season-color);
}
/* the editor has no date to go by: show every "This season" line so it stays editable */
.block-editor-block-list__block.ee-season__now { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- Home · how it works ---------- */
/* The steps beside a short text thread: an illustration of how a quote goes */
.ee-how__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 56px 96px;
  align-items: center;
}
.ee-how__grid > * { margin-block: 0; }
.ee-how__copy { gap: 14px; }
.ee-how__copy > .ee-steps { align-self: stretch; gap: 0; margin-top: 18px; }
.ee-how__copy > .wp-block-buttons { margin-top: 26px; }
.ee-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--ee-divider);
}
.ee-step:last-child { border-bottom: 1px solid var(--ee-divider); }
.ee-step > * { margin-block: 0; }
/* step numbers are small, so green (copper would fail contrast on tint) in a copper ring */
.ee-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ee-copper);
  border-radius: 50%;
  font-family: var(--ee-serif);
  font-size: 17px;
  line-height: 1;
  color: var(--ee-green);
}
.ee-step__text { gap: 4px; }
.ee-step .is-style-item { font-size: 21px; }

/* The thread: a white card with Chandler's name, then the messages */
.ee-thread {
  gap: 0;
  overflow: hidden;
  border-radius: 16px;
  background-color: var(--ee-white);
  box-shadow: 0 1px 2px rgba(23, 28, 17, 0.06), 0 24px 48px -28px rgba(23, 28, 17, 0.45);
}
.ee-thread__top {
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ee-hairline);
}
.ee-thread__avatar img { display: block; width: 38px; height: 38px; border-radius: 50%; }
.ee-thread__who { gap: 1px; }
.ee-thread__name { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ee-night); }
.ee-thread__meta { font-size: 13px; line-height: 1.3; color: var(--ee-muted); }
.ee-thread__msgs { gap: 8px; padding: 24px 20px 28px; }
/* a little more room where the speaker changes */
.ee-thread__msgs > .ee-bubble--out + .ee-bubble--in,
.ee-thread__msgs > .ee-bubble--in + .ee-bubble--out { margin-top: 10px; }
.ee-bubble {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.45;
}
.ee-bubble--out {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background-color: var(--ee-green);
  color: var(--ee-white);
}
.ee-bubble--in {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background-color: var(--ee-sand);
  color: var(--ee-night);
}
.ee-bubble--photo {
  width: 64%;
  max-width: none;
  padding: 0;
  overflow: hidden;
  background: none;
}
.ee-bubble--photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px 18px 6px 18px;
}

/* ---------- Home · our work (night band) ---------- */
/* A photo wall: three columns of photos in mixed shapes. A photo's shape comes
   from its place in the wall (1st and 6th tall, 2nd and 5th wide, 3rd and 4th
   square), so any photo can go in any spot and the columns stay even. */
.ee-gallery { columns: 3; column-gap: 16px; }
.ee-gallery .wp-block-image { break-inside: avoid; margin: 0 0 22px; }
.ee-gallery img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--ee-radius-m);
}
.ee-gallery .wp-block-image:nth-child(6n + 1) img,
.ee-gallery .wp-block-image:nth-child(6n) img { aspect-ratio: 4 / 5; }
.ee-gallery .wp-block-image:nth-child(6n + 2) img,
.ee-gallery .wp-block-image:nth-child(6n + 5) img { aspect-ratio: 4 / 3; }
.ee-gallery .wp-block-image:nth-child(6n + 3) img,
.ee-gallery .wp-block-image:nth-child(6n + 4) img { aspect-ratio: 1 / 1; }
.ee-gallery .wp-element-caption {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: normal;
  text-align: left;
  color: var(--ee-fg-muted);
}

/* ---------- Home · about ---------- */
.wp-block-group.ee-about__grid { grid-template-columns: minmax(0, 448px) minmax(0, 1fr); gap: 56px 80px; align-items: center; }
.ee-about__photo { width: min(100%, 448px); } /* 4:5 at most 560px tall, never cropped */
.ee-about__copy { gap: 18px; }
.ee-about__copy > .is-style-lead { max-width: 560px; }
.ee-about__copy > .ee-facts { align-self: stretch; max-width: 600px; gap: 0; margin-top: 10px; }
.ee-about__copy > .wp-block-buttons { margin-top: 12px; }
/* Facts: a line icon (ee-icon--…) beside a short title and line, between hairlines */
.ee-fact {
  position: relative;
  gap: 4px;
  padding: 18px 0 18px 52px;
  border-top: 1px solid var(--ee-divider);
}
.ee-fact:last-child { border-bottom: 1px solid var(--ee-divider); }
.ee-fact::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  width: 28px;
  height: 28px;
  background-color: var(--ee-icon-accent);
  -webkit-mask: var(--ee-icon) center / contain no-repeat;
  mask: var(--ee-icon) center / contain no-repeat;
}
.ee-fact > .is-style-item { font-size: 21px; color: var(--ee-heading); }

/* ---------- Home · service area (Cover block: the photo spans the section under the Hero shade) ---------- */
.wp-block-cover.ee-area-cover { min-height: 560px; align-items: center; }
/* same fix as the hero: core sizes a positioned Cover's content to fit */
.wp-block-cover.ee-area-cover.has-custom-content-position.has-custom-content-position.is-position-center-left > .wp-block-cover__inner-container {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}
.ee-area__inner {
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto !important;
}
.ee-area__copy {
  gap: 16px;
  max-width: 560px;
  text-shadow: 0 1px 2px rgba(23, 28, 17, 0.4);
}
.ee-area-cover h2,
.ee-area-cover .is-style-eyebrow { color: var(--ee-cream); }
.ee-area-cover .ee-body { max-width: 500px; color: var(--ee-soft-cream); }
.ee-towns {
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  color: var(--wp--preset--color--copper-glow);
}

/* ---------- Home · estimate ---------- */
.ee-estimate__grid { gap: 32px; align-items: start; }
.wp-block-group.is-style-form-card {
  gap: 22px;
  padding: 40px;
  border: 1px solid var(--ee-line);
  border-radius: var(--ee-radius-l);
  background-color: var(--ee-white);
}
.ee-form-card__head { gap: 12px; }
.ee-form-card__head > .ee-body { font-size: 16px; }
.wp-block-group.is-style-panel {
  gap: 18px;
  padding: 40px;
  border-radius: var(--ee-radius-l);
  background-color: var(--ee-green);
  color: var(--ee-white);
}
.is-style-panel h2,
.is-style-panel h3 { color: var(--ee-white); }
.ee-phone-display {
  font-family: var(--ee-serif);
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap; /* a phone number never breaks across lines */
  color: var(--ee-white);
}
.ee-phone-display a { color: inherit; text-decoration: none; }
.ee-phone-display a:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }

/* ---------- Page hero (Pricing, Contact, 404) ---------- */
.ee-page-hero__inner { gap: 12px; }
.ee-page-hero__inner > .wp-block-buttons { margin-top: 10px; } /* the 404 page's buttons keep their room */
.ee-page-hero__inner > h1 { max-width: 900px; }

/* ---------- Pricing · factors (Group style "Factor") ---------- */
.ee-factors { gap: 24px; }
.wp-block-group.is-style-factor {
  --ee-icon-size: 40px;
  gap: 12px;
  padding: 30px;
  border-radius: var(--ee-radius-l);
  background-color: var(--ee-white);
}
.is-style-factor::before { margin-bottom: 6px; }
.is-style-factor > .is-style-item { font-size: 22px; }

/* ---------- Pricing · FAQ (Details style "FAQ") ---------- */
.ee-faq__grid { gap: 32px 64px; align-items: start; }
.ee-faq__grid .ee-section-intro { max-width: 420px; }
.ee-faq-list { gap: 0; border-top: 1px solid var(--ee-line); }
.wp-block-details.is-style-faq {
  padding: 20px 0;
  border-bottom: 1px solid var(--ee-line);
}
.is-style-faq > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-right: 40px; /* room for the plus/minus */
  cursor: pointer;
  list-style: none;
  font-family: var(--ee-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}
.is-style-faq > summary::-webkit-details-marker { display: none; }
/* Plus that turns into a minus: two thin copper bars. Opening swings the
   upright bar down onto the flat one (both turn a half turn, so it reads as
   one smooth motion); closing swings it back. */
.is-style-faq > summary::before,
.is-style-faq > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 16px;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background-color: var(--ee-copper);
  transition: transform 260ms var(--ee-ease);
}
.is-style-faq > summary::before { transform: rotate(90deg); }
.is-style-faq[open] > summary::before { transform: rotate(180deg); }
.is-style-faq[open] > summary::after { transform: rotate(180deg); }
.is-style-faq > summary:hover { color: var(--ee-green); }
.is-style-faq > :not(summary) {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ee-muted);
}

/* ---------- CTA band ---------- */
.ee-cta__grid { gap: 40px 64px; align-items: center; }
.ee-cta__copy { gap: 18px; }
.ee-cta__copy > .is-style-lead { max-width: 460px; }
.ee-cta__copy > .wp-block-buttons { margin-top: 4px; }
.ee-mini-steps { gap: 0; }
.ee-mini-step { gap: 20px; padding: 18px 0; border-top: 1px solid var(--ee-divider); }
.ee-mini-step:last-child { border-bottom: 1px solid var(--ee-divider); }
.ee-mini-step > .ee-num { flex: none; width: 52px; font-size: 40px; color: var(--ee-fg-muted); }
.ee-mini-step__text { gap: 4px; }
.ee-item-title {
  font-family: var(--ee-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
}

/* ---------- Contact · request form and sidebar ---------- */
.ee-contact__layout { gap: 32px; align-items: flex-start; }
.ee-contact__layout > .ee-contact__form { flex: 999 1 620px; min-width: 0; gap: 28px; }
.ee-contact__layout > .ee-contact__aside { flex: 1 1 320px; min-width: 0; gap: 24px; }
.wp-block-group.is-style-panel.ee-text-panel--compact { gap: 16px; padding: 32px; }
.ee-text-panel--compact > h2.wp-block-heading { font-size: 36px; }
.ee-text-panel--compact > .ee-body { font-size: 16px; }
.ee-text-panel--compact > .ee-phone-display { font-size: 32px; }
.ee-side-card {
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--ee-line);
  border-radius: var(--ee-radius-l);
  background-color: var(--ee-white);
}
.ee-details { gap: 12px; font-size: 16px; line-height: normal; }
.ee-details__row { gap: 16px; }
.ee-details__row > :first-child { color: var(--ee-muted); }
.ee-details__row > :last-child { font-weight: 600; text-align: right; }
.ee-next-steps { gap: 14px; }
.ee-next-step { gap: 14px; }
.ee-next-step > .ee-num { flex: none; width: 34px; font-size: 30px; }
.ee-next-step__text { gap: 2px; }
.ee-next-step__title { font-family: var(--ee-serif); font-size: 19px; line-height: 1.25; }
.ee-next-step__desc { font-size: 15px; line-height: 1.45; color: var(--ee-muted); }

/* ==========================================================================
   Fluent Forms
   Both forms take their look from here, scoped to .fluentform, so they match
   each other. Selectors were checked against Fluent Forms 6.2 markup.
   ========================================================================== */
.fluentform {
  --fluentform-primary: var(--ee-green);
  --fluentform-secondary: var(--ee-muted);
  --fluentform-danger: var(--ee-error);
  --fluentform-border-color: var(--ee-line-field);
  --fluentform-border-radius: var(--ee-radius-m);
  font-family: var(--ee-font);
  color: var(--ee-night);
}
.fluentform .ff-el-group { margin-bottom: 20px; }
.ee-contact__form .fluentform .ff-el-group { margin-bottom: 20px; }
.fluentform .ff-el-group:last-child,
.fluentform .ff_submit_btn_wrapper { margin-bottom: 0; }
/* two and three across, one on phones */
.fluentform .ff-t-container { gap: 16px; }
.fluentform .ff-t-container .ff-el-group { margin-bottom: 20px; }
.ee-contact__form .fluentform .ff-t-container .ff-el-group { margin-bottom: 20px; }
@media (max-width: 767px) { /* Fluent Forms stacks columns here; stacked fields sit 16px apart */
  .fluentform .ff-t-container .ff-t-cell:not(:last-child) .ff-el-group { margin-bottom: 16px; }
}

/* labels */
.fluentform .ff-el-input--label { display: block; margin-bottom: 8px; font-size: 15px; line-height: normal; }
.fluentform .ff-el-input--content { line-height: normal; }
.fluentform.ff-default .ff-el-input--label label,
.fluentform .ff-el-input--label label {
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  color: var(--ee-night);
}
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--ee-copper); }
.fluentform .ee-label-hint { font-weight: 400; color: var(--ee-muted); }
.fluentform .ff-el-help-message {
  margin-top: 0;
  font-size: 14px;
  font-style: normal;
  color: var(--ee-muted);
}

/* inputs, selects, textareas */
.fluentform.ff-default .ff-el-group .ff-el-form-control {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--ee-line-field);
  border-radius: var(--ee-radius-m);
  background-color: var(--ee-white);
  color: var(--ee-night);
  font-family: inherit;
  font-size: 16px;
  line-height: normal;
  box-shadow: none;
}
.fluentform.ff-default .ff-el-group select.ff-el-form-control { padding: 0 14px; }
.fluentform.ff-default .ff-el-group textarea.ff-el-form-control {
  height: auto;
  min-height: 140px;
  padding: 12px 16px;
  line-height: 1.5;
  resize: vertical;
}
.fluentform.ff-default .ff-el-group textarea.ee-textarea--quick { min-height: 120px; }
.fluentform.ff-default .ff-el-group textarea.ee-textarea--short { min-height: 96px; }
.fluentform.ff-default .ff-el-group .ff-el-form-control:hover { border-color: var(--ee-night); }
.fluentform.ff-default .ff-el-group .ff-el-form-control:focus,
.fluentform.ff-default .ff-el-group .ff-el-form-control:focus-visible {
  border-color: var(--ee-green);
  outline: 3px solid var(--ee-green);
  outline-offset: 1px;
}

.fluentform .ee-consent input[type="checkbox"] {
  flex: none;
  top: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ee-green);
}

/* choice chips (Contact): compact pills that wrap several to a row */
.fluentform .ee-chips .ff-el-input--content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
}
.fluentform .ee-chips .ff-el-form-check { margin: 0; }
.fluentform.ff-default .ee-chips .ff-el-form-check label.ff-el-form-check-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px 0 12px;
  border: 1px solid var(--ee-line-choice);
  border-radius: 999px;
  background-color: var(--ee-white);
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--ee-dur-fast) linear, background-color var(--ee-dur-fast) linear;
}
.fluentform.ff-default .ee-chips .ff-el-form-check label.ff-el-form-check-label:hover { border-color: var(--ee-line-field); }
.fluentform.ff-default .ee-chips .ff-el-form-check label.ff-el-form-check-label:has(input:checked) {
  border-color: var(--ee-green);
  box-shadow: inset 0 0 0 1px var(--ee-green);
  background-color: var(--ee-tint);
  color: var(--ee-green);
}
.fluentform .ee-chips .ff-el-form-check-input {
  flex: none;
  top: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ee-green);
}

/* consent checkbox */
.fluentform .ee-consent .ff-el-tc { display: block; }
.fluentform .ee-consent label.ff_tc_label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}
.fluentform .ee-consent label.ff_tc_label > span,
.fluentform .ee-consent label.ff_tc_label > div { display: block; padding: 0 !important; width: auto; }
.fluentform .ee-consent input[type="checkbox"] { margin-top: 2px; }

/* section headings (the free version has no steps) */
.fluentform .ee-form-section { margin-bottom: 14px; }
.fluentform .ee-form-section:not(.ee-form-section--first) { padding-top: 24px; border-top: 1px solid var(--ee-line); }
.fluentform .ee-form-section hr { display: none; }
.fluentform .ee-form-section .ff-el-section-title {
  margin: 0;
  font-family: var(--ee-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ee-green);
}
.fluentform .ee-form-section .ff-section_break_desk:empty { display: none; }

/* "Have photos? Text them…" where the upload would be */
.fluentform .ee-form-note {
  position: relative;
  min-height: 54px;
  margin: 0;
  padding: 14px 16px 14px 68px;
  border: 1px dashed var(--ee-line-field);
  border-radius: var(--ee-radius-m);
  background-color: var(--ee-tint);
  font-size: 15px;
  line-height: 1.45;
}
/* green circle with a white camera, like the upload zone it stands in for */
.fluentform .ee-form-note::before,
.fluentform .ee-form-note::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
}
.fluentform .ee-form-note::before { left: 16px; width: 40px; height: 40px; background-color: var(--ee-green); }
.fluentform .ee-form-note::after {
  left: 27px;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background-color: var(--ee-white);
  -webkit-mask: url("../icons/camera.svg") center / contain no-repeat;
  mask: url("../icons/camera.svg") center / contain no-repeat;
}
.fluentform .ee-form-note a { color: var(--ee-green); font-weight: 600; }

/* buttons */
.fluentform.ff-default .ff-btn-submit:not(.ff_btn_no_style) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background-color: var(--ee-copper);
  color: var(--ee-night);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  opacity: 1;
  transition: background-color var(--ee-dur-fast) linear;
}
.fluentform.ff-default .ff-btn-submit:not(.ff_btn_no_style):hover,
.fluentform.ff-default .ff-btn-submit:not(.ff_btn_no_style):focus { background-color: var(--ee-copper-light); color: var(--ee-night); opacity: 1; }
.fluentform.ff-default .ff-btn-submit:focus-visible { outline: 3px solid var(--ee-night); outline-offset: 3px; }
/* Contact: the send button sits at the right */
.ee-contact__form .fluentform .ff_submit_btn_wrapper { text-align: right; }
.ee-contact__form .fluentform.ff-default .ff-btn-submit:not(.ff_btn_no_style) { width: auto; }

/* errors (Brick) */
.fluentform.ff-default .ff-el-group.ff-el-is-error .ff-el-form-control,
.fluentform.ff-default .ff-el-group.ff-el-is-error .ff-el-form-control:hover { border-color: var(--ee-error); }
.fluentform .ff-el-is-error .text-danger,
.fluentform .error.text-danger {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ee-error);
}
.fluentform .ff-el-is-error .ff-el-form-check-label { color: inherit; }

/* sent */
.ff-message-success {
  margin: 0;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--ee-radius-m);
  box-shadow: none;
  background-color: var(--ee-green);
  color: var(--ee-white);
  font-size: 15px;
  line-height: 1.5;
}
.ee-contact__form .ff-message-success { padding: 8px 0; background: none; color: var(--ee-night); }
.ee-success { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ee-success__icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--ee-green);
}
.ee-success__icon::after {
  content: "";
  position: absolute;
  inset: 16px;
  background-color: var(--ee-white);
  -webkit-mask: url("../icons/check.svg") center / contain no-repeat;
  mask: url("../icons/check.svg") center / contain no-repeat;
}
.ee-success__title {
  margin: 0;
  font-family: var(--ee-serif);
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--ee-green);
}
.ee-success__text { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--ee-muted); }
.ee-success p { margin: 0; }
a.ee-success__again {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 24px;
  border: 1.5px solid var(--ee-green);
  border-radius: 999px;
  color: var(--ee-green);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
a.ee-success__again:hover { background-color: var(--ee-green); color: var(--ee-white); }

/* ---------- Footer (template part "footer") ---------- */
.ee-footer__main {
  padding-block: 64px 44px;
  gap: 32px 48px;
}
.ee-footer__brand { gap: 14px; max-width: 360px; }
.ee-footer .wp-block-site-logo img { display: block; height: 64px; width: auto; }
.ee-footer__tagline {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ee-fg-muted);
}
.ee-footer__col {
  gap: 10px;
  font-size: 15px;
  line-height: normal;
}
.ee-footer__heading {
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ee-fg-muted);
}
.ee-footer a { color: var(--ee-white); text-decoration: none; }
.ee-footer a:hover { color: var(--ee-white); }
.ee-social a:hover { text-decoration: underline; text-decoration-color: var(--ee-copper); text-underline-offset: 4px; }
/* Explore list: a vertical Navigation block */
.ee-footer-nav {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.ee-footer-nav .wp-block-navigation__container { gap: 10px; }
/* Socials: one link per row, official icon in a 24px slot */
.ee-socials { gap: 12px; }
.ee-social { display: flex; } /* no line box around the link: rows are exactly icon-tall */
.ee-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ee-social img {
  flex: none;
  width: 24px !important; /* the inline-image width is for the editor */
  height: 20px;
  object-fit: contain;
  object-position: left center;
}
.ee-footer__legal {
  position: relative;
  padding-block: 20px 30px;
}
.ee-footer > .ee-footer__legal { margin-block-start: 0; }
/* Divider runs the full wrapper width (content plus gutters) */
.ee-footer__legal::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--ee-gutter) * -1);
  right: calc(var(--ee-gutter) * -1);
  border-top: 1px solid var(--ee-line-night);
}
.ee-footer__legal { gap: 16px 32px; }
.ee-footer .ee-footer__fine { gap: 4px 24px; align-items: baseline; }
.ee-copyright,
.ee-legal-link {
  font-size: 13px;
  line-height: normal;
  color: var(--ee-fg-muted);
}
.ee-footer .ee-legal-link a {
  display: inline-flex;
  align-items: center;
  min-height: 24px; /* WCAG 2.2 target size */
  color: var(--ee-fg-muted);
}
.ee-footer .ee-legal-link a:hover { color: var(--ee-white); }
/* "Built by ChapelDSGN", kept small */
.ee-credit,
.ee-credit a { display: flex; }
.ee-credit svg {
  display: block;
  width: auto;
  height: 30px;
  overflow: visible; /* a fallback serif runs a little wider than Newsreader */
}

/* ---------- Privacy policy and Accessibility pages ---------- */
.ee-legal h2 {
  margin-top: 44px;
  font-size: var(--wp--preset--font-size--card-title);
}
.ee-legal h2 + * { margin-top: 12px; }
.ee-legal p,
.ee-legal li { line-height: 1.65; }
.ee-legal ul { padding-left: 1.2em; }
.ee-legal li + li { margin-top: 6px; }
.ee-legal__updated {
  font-size: 15px;
  color: var(--ee-fg-muted);
}

/* ==========================================================================
   Motion
   Subtle and quick: transform, opacity and color only, 120-320ms, no bounce.
   The hero never animates, and movement is off under prefers-reduced-motion
   (see the end of this file); colors still change. Scroll reveals come from
   assets/js/motion.js; add the class ee-no-reveal to a block to opt it out.
   ========================================================================== */

/* Underlines that draw in from the left: header, menu and footer links */
.ee-nav .wp-block-navigation-item__label,
.ee-footer-nav .wp-block-navigation-item__label,
.ee-footer__col p:not(.ee-social) a,
.ee-footer .ee-legal-link a {
  padding-bottom: 3px;
  background-image: linear-gradient(var(--ee-copper), var(--ee-copper));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
}
.ee-nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.ee-nav .wp-block-navigation-item__content[aria-current="page"] .wp-block-navigation-item__label,
.ee-footer-nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.ee-footer__col p:not(.ee-social) a:hover,
.ee-footer .ee-legal-link a:hover { background-size: 100% 1px; }

@keyframes ee-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* buttons lift on hover and settle when pressed */
  .wp-block-button__link,
  .fluentform.ff-default .ff-btn-submit:not(.ff_btn_no_style),
  a.ee-success__again {
    transition: transform var(--ee-dur-fast) var(--ee-ease), background-color var(--ee-dur-fast) linear, color var(--ee-dur-fast) linear, border-color var(--ee-dur-fast) linear;
  }
  .wp-block-button__link:hover,
  .fluentform.ff-default .ff-btn-submit:not(.ff_btn_no_style):hover,
  a.ee-success__again:hover { transform: translateY(-1px); }
  .wp-block-button__link:active,
  .fluentform.ff-default .ff-btn-submit:not(.ff_btn_no_style):active,
  a.ee-success__again:active { transform: translateY(0); transition-duration: 60ms; }

  /* arrows nudge toward where the link goes */
  .ee-link-arrow a::after,
  .ee-text-link a::after { transition: transform var(--ee-dur) var(--ee-ease); }
  .ee-link-arrow a:hover::after,
  .ee-text-link a:hover::after { transform: translateX(3px); }

  /* underlines draw in */
  .ee-nav .wp-block-navigation-item__label,
  .ee-footer-nav .wp-block-navigation-item__label,
  .ee-footer__col p:not(.ee-social) a,
  .ee-footer .ee-legal-link a { transition: background-size 240ms var(--ee-ease), color var(--ee-dur) linear; }

  /* fields ease into their hover and focus colors */
  .fluentform.ff-default .ff-el-group .ff-el-form-control { transition: border-color var(--ee-dur-fast) linear, outline-color var(--ee-dur-fast) linear; }

  /* sections settle in as they scroll into view (motion.js marks them) */
  .ee-reveal-ready .ee-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--ee-dur-slow) var(--ee-ease), transform var(--ee-dur-slow) var(--ee-ease);
    transition-delay: calc(var(--ee-i, 0) * 60ms);
  }
  .ee-reveal-ready .ee-reveal.is-in { opacity: 1; transform: none; }
  /* the line above each step draws across once the step is in */
  .ee-reveal-ready .ee-step.ee-reveal { position: relative; border-top-color: transparent; }
  .ee-reveal-ready .ee-step.ee-reveal::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--ee-divider);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 320ms var(--ee-ease) calc(var(--ee-i, 0) * 60ms + 120ms);
  }
  .ee-reveal-ready .ee-step.ee-reveal.is-in::before { transform: scaleX(1); }

  /* phone menu: links follow one another in */
  .is-menu-open .ee-overlay-nav .wp-block-navigation-item,
  .is-menu-open .ee-mobile-menu__cta { animation: ee-rise 280ms var(--ee-ease) both; }
  .is-menu-open .ee-overlay-nav .wp-block-navigation-item:nth-child(2) { animation-delay: 40ms; }
  .is-menu-open .ee-overlay-nav .wp-block-navigation-item:nth-child(3) { animation-delay: 80ms; }
  .is-menu-open .ee-overlay-nav .wp-block-navigation-item:nth-child(4) { animation-delay: 120ms; }
  .is-menu-open .ee-overlay-nav .wp-block-navigation-item:nth-child(5) { animation-delay: 160ms; }
  .is-menu-open .ee-mobile-menu__cta { animation-delay: 180ms; }

  /* FAQ answers glide open and closed (browsers without ::details-content just open) */
  .wp-block-details.is-style-faq { interpolate-size: allow-keywords; }
  .wp-block-details.is-style-faq::details-content {
    height: 0;
    overflow: clip;
    transition: height 260ms var(--ee-ease), content-visibility 260ms allow-discrete;
  }
  .wp-block-details.is-style-faq[open]::details-content { height: auto; }

  /* form: the sent message eases up */
  .ff-message-success { animation: ee-rise var(--ee-dur-slow) var(--ee-ease) both; }
}

/* Phones: the scroll story. motion.js plays the How it works thread one
   message at a time and lights the step nearest the middle of the screen;
   where the browser supports scroll-driven animations, photos, cards and
   headings also move with the scroll. */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .wp-block-post-content > .alignfull { overflow-x: clip; } /* sliding photos never widen the page */

  .ee-bubble { transform-origin: 100% 100%; transition: opacity 280ms var(--ee-ease), transform 320ms var(--ee-ease); }
  .ee-bubble--in { transform-origin: 0 100%; }
  .ee-bubble.is-waiting { opacity: 0; transform: translateY(10px) scale(0.96); }
  .ee-typing {
    align-self: flex-start;
    display: inline-flex;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 18px;
    border-bottom-left-radius: 6px;
    background-color: var(--ee-sand);
  }
  .ee-typing i { width: 6px; height: 6px; border-radius: 50%; background-color: rgba(23, 28, 17, 0.45); animation: ee-typing 900ms ease-in-out infinite; }
  .ee-typing i:nth-child(2) { animation-delay: 150ms; }
  .ee-typing i:nth-child(3) { animation-delay: 300ms; }

  /* the lit step's number fills with copper; the others dim (their contents, so the reveal keeps its own opacity) */
  .ee-step > * { transition: opacity 240ms linear; }
  .ee-step.is-dim > * { opacity: 0.5; }
  .ee-step__num { transition: background-color 240ms linear, border-color 240ms linear, color 240ms linear; }
  .ee-step.is-lit .ee-step__num { background-color: var(--ee-copper); border-color: var(--ee-copper); color: var(--ee-night); }

  @supports (animation-timeline: view()) {
    /* the timeline comes after the shorthand, which resets it */
    .ee-gallery .wp-block-image { animation: ee-slide-left linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .ee-gallery .wp-block-image:nth-child(even) { animation-name: ee-slide-right; }
    .ee-about__photo img { animation: ee-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .ee-season,
    .ee-service { animation: ee-scroll-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .wp-block-post-content h2.wp-block-heading { animation: ee-scroll-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
  }
}
@keyframes ee-typing {
  0%, 80%, 100% { opacity: 0.5; transform: none; }
  40% { opacity: 1; transform: translateY(-3px); }
}
@keyframes ee-slide-left { from { opacity: 0; transform: translateX(-28px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes ee-slide-right { from { opacity: 0; transform: translateX(28px) rotate(1.5deg); } to { opacity: 1; transform: none; } }
@keyframes ee-settle { from { transform: scale(1.12); filter: saturate(0.6); } to { transform: none; filter: none; } }
@keyframes ee-scroll-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  /* the copy over the photos runs most of the width here, so the whole photo is shaded, not just the left */
  .ee-hero > .wp-block-cover__background.has-hero-shade-gradient-background,
  .ee-area-cover > .wp-block-cover__background.has-hero-shade-gradient-background {
    background: var(--ee-shade-all) !important; /* core's gradient class is !important */
  }
  /* the hero headline and card stack at the bottom of the photo */
  .ee-hero__copy { display: flex; flex-direction: column; justify-content: flex-end; gap: 36px; }
  .ee-hero__title { align-self: auto; }
  .ee-hero__card { align-self: stretch; max-width: 560px; }
}

@media (max-width: 1000px) {
  .wp-block-group.ee-services,
  .wp-block-group.ee-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .ee-service:nth-child(odd),
  .ee-season:nth-child(odd) { border-left: 0; }
  .ee-seasons__layout > .ee-section-head { flex-basis: auto; }
  .ee-seasons__layout { flex-direction: column; align-items: stretch; }
  .ee-how__grid { grid-template-columns: minmax(0, 1fr); }
  .ee-thread { width: 100%; max-width: 480px; }
  .ee-gallery { columns: 2; }
}

@media (max-width: 944px) {
  /* The About row stacks; the portrait keeps its full 4:5 shape (no crop) */
  .wp-block-group.ee-about__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Core's Navigation collapses at 600px; the design collapses at 860px. */
@media (min-width: 600px) and (max-width: 860px) {
  .ee-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .ee-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 860px) {
  .ee-header__bar { flex-wrap: nowrap; gap: 12px; }
  .ee-header__actions { gap: 8px; }
  .ee-header__actions > .ee-nav { order: 2; } /* "Text a photo", then Menu */
}

@media (max-width: 600px) {
  /* Phones get one shorter rhythm: every section pads 44px top and bottom.
     The sections use these presets inline, so redefining them is enough. */
  html:root {
    --wp--preset--spacing--section-64: 44px;
    --wp--preset--spacing--section-72: 44px;
    --wp--preset--spacing--section-80: 44px;
    --wp--preset--spacing--section-88: 44px;
    --wp--preset--spacing--section-96: 44px;
  }
  .ee-section-head { gap: 10px; }
  .ee-section-intro { font-size: 16px; line-height: 1.5; }
  .ee-page-hero__inner { gap: 10px; }
  .ee-lead--page { font-size: 16px; line-height: 1.5; }
  .ee-gap-56,
  .ee-gap-44 { gap: 28px; }

  .ee-hero__inner { gap: 36px; }
  .ee-hero__title, .ee-area__copy { text-shadow: none; }
  .ee-hero__card { gap: 14px; padding: 22px 20px; }
  .ee-hero__card-title { font-size: 22px; }
  .wp-block-cover.ee-area-cover { min-height: 380px; }

  /* services: two across, and an odd last one spans the row */
  .wp-block-group.ee-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .ee-service,
  .ee-service + .ee-service {
    --ee-icon-size: 30px;
    gap: 6px;
    padding: 18px 0;
    border-left: 0;
    border-top: 1px solid var(--ee-divider);
  }
  .ee-service:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ee-service::before { margin-bottom: 2px; }
  .ee-service > .is-style-item { font-size: 19px; }
  .ee-service > .ee-item-text { font-size: 14.5px; line-height: 1.45; }

  /* seasons: two by two, a short color line on each hairline */
  .ee-seasons__layout { gap: 24px; }
  .wp-block-group.ee-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .ee-season,
  .ee-season + .ee-season {
    --ee-icon-size: 28px;
    --ee-season-pad-top: 18px;
    gap: 6px;
    padding: var(--ee-season-pad-top) 0 16px;
    border-left: 0;
    border-top: 1px solid var(--ee-divider);
    background-position: 0 0;
    background-size: 32px 2px;
  }
  .ee-season.is-now { padding-inline: 10px; background-position: 10px 0; }
  .ee-season.is-now > .ee-season__now { right: 10px; font-size: 10px; letter-spacing: 0.1em; }
  .ee-season::before { margin-bottom: 2px; }
  .ee-season > .is-style-item { font-size: 18px; }
  .ee-season > .ee-item-text { font-size: 14px; line-height: 1.45; }

  /* how it works: tighter steps and a smaller thread */
  .ee-how__grid { gap: 28px; }
  .ee-how__copy > h2 { font-size: 30px; }
  .ee-how__copy > .ee-steps { margin-top: 8px; }
  .ee-step { grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding: 13px 0; }
  .ee-step__num { width: 28px; height: 28px; font-size: 15px; }
  .ee-step .is-style-item { font-size: 18px; }
  .ee-step .ee-item-text { font-size: 14.5px; line-height: 1.45; }
  .ee-how__copy > .wp-block-buttons { margin-top: 18px; gap: 10px; }
  .ee-how__copy .wp-block-button__link { min-height: 46px; padding-block: 11px; }
  .ee-thread__top { padding: 12px 14px; }
  .ee-thread__msgs { gap: 6px; padding: 16px 14px 18px; }
  .ee-bubble { padding: 8px 12px; font-size: 14px; }
  .ee-bubble--photo { width: 54%; padding: 0; }

  /* our work: three across, every photo square */
  .ee-gallery { columns: 3; column-gap: 8px; }
  .ee-gallery .wp-block-image { margin-bottom: 10px; }
  .ee-gallery .wp-block-image:nth-child(n) img { aspect-ratio: 1 / 1; border-radius: 6px; }
  .ee-gallery .wp-element-caption { min-height: 2.6em; margin-top: 5px; font-size: 11px; line-height: 1.3; } /* two lines, so the rows stay level */

  /* about: the whole portrait (never cropped), small, beside the heading */
  .wp-block-group.ee-about__grid { grid-template-columns: 118px minmax(0, 1fr); column-gap: 18px; row-gap: 0; align-items: end; }
  .ee-about__grid > .ee-about__copy { display: contents; } /* its blocks join the grid; beats core's body .is-layout-flex */
  .ee-about__photo { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 118px; overflow: hidden; border-radius: 10px; }
  .ee-about__photo img { border-radius: 10px !important; } /* the Image block writes its radius inline */
  .ee-about__copy > .is-style-eyebrow { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 8px; }
  .ee-about__copy > h2 { grid-column: 2; grid-row: 2; align-self: start; font-size: 30px; }
  .ee-about__copy > .is-style-lead,
  .ee-about__copy > .ee-facts,
  .ee-about__copy > .wp-block-buttons { grid-column: 1 / -1; }
  .ee-about__copy > .is-style-lead { margin-top: 22px; font-size: 16px; }
  .ee-about__copy > .ee-facts { margin-top: 18px; }
  .ee-about__copy > .wp-block-buttons { margin-top: 20px; }
  .ee-fact { padding: 13px 0 13px 42px; }
  .ee-fact::before { top: 14px; width: 24px; height: 24px; }
  .ee-fact > .is-style-item { font-size: 18px; }
  .ee-fact > .ee-item-text { font-size: 14.5px; }

  /* cards, panels and forms */
  .ee-text-panel--compact > h2.wp-block-heading { font-size: 30px; } /* stays below the 36px page title */
  .wp-block-group.is-style-form-card,
  .wp-block-group.is-style-panel,
  .wp-block-group.is-style-panel.ee-text-panel--compact,
  .wp-block-group.is-style-factor,
  .ee-side-card { padding: 24px; }
  .ee-phone-display { font-size: 36px; }
  .ee-contact__form .fluentform.ff-default .ff-btn-submit:not(.ff_btn_no_style) { width: 100%; }
  .wp-block-group.is-style-form-card.ee-contact__form { padding: 22px 18px; }
  .fluentform.ff-default .ff-el-group textarea.ee-textarea--quick { min-height: 88px; }
  .ee-btn-row > .wp-block-button { flex: 1 1 auto; }
  .ee-btn-row > .wp-block-button > .wp-block-button__link { width: 100%; }
  /* Home estimate: the form already says "Have photos? Text them", so the
     Send a photo panel waits for bigger screens */
  .ee-estimate__grid { gap: 20px; }
  .ee-estimate__grid > .is-style-panel { display: none; }
  .ee-estimate__grid > .wp-block-group.is-style-form-card { padding: 20px; }
  .ee-estimate__grid .ee-form-card__head { gap: 8px; }
  .ee-estimate__grid .fluentform .ff-el-group { margin-bottom: 14px; }

  /* footer: brand across, Contact and Explore side by side, socials as a row of icons */
  .ee-footer .ee-footer__main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; padding-block: 36px 24px; }
  .ee-footer__brand,
  .ee-footer__col:has(.ee-socials) { grid-column: 1 / -1; }
  .ee-footer .ee-socials.ee-socials { flex-direction: row; flex-wrap: wrap; gap: 0; }
  .ee-social a { min-width: 44px; min-height: 44px; gap: 0; font-size: 0; } /* the name stays for screen readers */
  .ee-social img { height: 24px; }
  .ee-copyright { flex-basis: 100%; } /* then the two links side by side, then the credit */
}

@media (max-width: 480px) {
  :root { --ee-header-h: 72px; }
  .ee-header .wp-block-site-logo img { height: 44px; }
  .ee-header.is-solid .ee-header__bar > .wp-block-site-logo img { height: 38px; }
  .ee-nav .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open { gap: 0; padding: 0 10px; font-size: 0; }
}

@media (max-width: 360px) {
  .ee-header .wp-block-site-logo img { height: 40px; }
  .ee-header.is-solid .ee-header__bar > .wp-block-site-logo img { height: 36px; }
  .ee-header .ee-btn-sm.ee-icon-camera > .wp-block-button__link::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}