@charset "UTF-8";
/* ==========================================================================
   Eco-clean.bg — design system
   Palette is injected from content/shared/site.json as --eco-* properties.
   Everything below is layout, type and rhythm.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Brand palette. These are DEFAULTS — inc/assets.php overrides them at
     runtime from content/shared/site.json. Keeping real values here means the
     site still renders correctly if that file is ever missing. */
  --eco-green: #4CAF2A;
  --eco-green-cta: #3A841F;   /* AA-safe green for white text */
  --eco-green-dark: #2E7D14;
  --eco-blue: #1B63C4;
  --eco-blue-dark: #12376E;
  --eco-sky: #4BA3EA;
  --eco-ink: #0F2038;
  --eco-muted: #5A6B80;
  --eco-line: #E3E9F0;
  --eco-cloud: #F5F9FC;

  --font-display: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Fluid type scale — 320px → 1440px viewport */
  --fs-xs:   clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --fs-sm:   clamp(0.88rem, 0.85rem + 0.14vw, 0.96rem);
  --fs-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --fs-md:   clamp(1.13rem, 1.05rem + 0.35vw, 1.31rem);
  --fs-lg:   clamp(1.35rem, 1.18rem + 0.75vw, 1.80rem);
  --fs-xl:   clamp(1.70rem, 1.35rem + 1.55vw, 2.60rem);
  --fs-2xl:  clamp(2.10rem, 1.55rem + 2.45vw, 3.60rem);
  --fs-3xl:  clamp(2.50rem, 1.70rem + 3.55vw, 4.50rem);

  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-section: clamp(3.5rem, 7vw, 7rem);

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15,32,56,.06), 0 2px 8px rgba(15,32,56,.05);
  --shadow:    0 4px 12px rgba(15,32,56,.06), 0 12px 32px rgba(15,32,56,.07);
  --shadow-lg: 0 8px 24px rgba(15,32,56,.08), 0 24px 64px rgba(15,32,56,.10);
  --shadow-green: 0 8px 24px rgba(76,175,42,.28);

  --wrap: 1180px;
  --wrap-narrow: 760px;

  --grad-brand: linear-gradient(115deg, var(--eco-green) 0%, var(--eco-sky) 55%, var(--eco-blue) 100%);
  --grad-deep:  linear-gradient(150deg, var(--eco-blue-dark) 0%, var(--eco-blue) 100%);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html {
  scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%;
  /* The closed mobile drawer sits off-screen to the right; clip stops it
     widening the document. `clip` rather than `hidden` so the sticky header
     keeps working. */
  overflow-x: clip;
}
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--eco-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .eco-display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--eco-blue-dark);
  margin: 0 0 var(--sp-4);
  /* Bulgarian words are long — never let them break mid-word into a mess. */
  overflow-wrap: break-word;
  hyphens: manual;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--eco-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--eco-green-dark); }

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

:focus-visible {
  outline: 3px solid var(--eco-green);
  outline-offset: 3px;
  border-radius: 4px;
}

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  background: #fff; padding: 12px 20px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow); width: auto; height: auto; clip: auto; clip-path: none;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.eco-wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 768px) { .eco-wrap { width: min(100% - 4rem, var(--wrap)); } }

.eco-section { padding-block: var(--sp-section); position: relative; }
.eco-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.eco-section--cloud { background: var(--eco-cloud); }
.eco-section--deep  { background: var(--grad-deep); color: #fff; }
.eco-section--deep h2, .eco-section--deep h3 { color: #fff; }

.eco-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.eco-head--center { margin-inline: auto; text-align: center; }
.eco-head p { color: var(--eco-muted); font-size: var(--fs-md); }
.eco-section--deep .eco-head p { color: rgba(255,255,255,.82); }

.eco-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--eco-green-dark);
  margin-bottom: var(--sp-3);
}
.eco-eyebrow::before {
  content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--grad-brand);
}
.eco-section--deep .eco-eyebrow { color: #9BE07B; }
.eco-head--center .eco-eyebrow::before { display: none; }

.eco-svg { flex: 0 0 auto; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* `.eco-btn` is used two ways: on a plain <a> in PHP templates, and on the
   core/button WRAPPER div (where the modifier class is needed for the child
   selectors below). Excluding .wp-block-button here stops the wrapper picking
   up button chrome of its own — otherwise you get a pill inside a pill. */
/* Core's .wp-element-button padding is inlined after this stylesheet and ties
   on specificity, so block buttons came out smaller than the ones rendered from
   PHP templates. The child selector below outranks it and keeps both identical. */
.wp-block-button > .wp-block-button__link {
  padding: 1rem 1.65rem;
  border-radius: var(--radius-pill);
}
.eco-btn:not(.wp-block-button), .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: 1rem 1.65rem; border-radius: var(--radius-pill); border: 2px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
  white-space: nowrap;
}
.eco-btn--lg:not(.wp-block-button) { padding: 1.15rem 2.1rem; font-size: var(--fs-base); }
.wp-block-button.eco-btn--lg > .wp-block-button__link { padding: 1.15rem 2.1rem; font-size: var(--fs-base); }
.eco-btn--block:not(.wp-block-button) { width: 100%; }

.eco-btn--primary:not(.wp-block-button), .is-style-eco-primary .wp-block-button__link {
  background: var(--eco-green-cta); color: #fff; box-shadow: var(--shadow-green);
}
.eco-btn--primary:not(.wp-block-button):hover {
  background: var(--eco-green-dark); color: #fff;
  transform: translateY(-2px); box-shadow: 0 12px 30px rgba(76,175,42,.36);
}
.eco-btn--secondary:not(.wp-block-button) { background: var(--eco-blue); color: #fff; }
.eco-btn--secondary:not(.wp-block-button):hover { background: var(--eco-blue-dark); color: #fff; transform: translateY(-2px); }

.eco-btn--ghost:not(.wp-block-button), .is-style-eco-ghost .wp-block-button__link {
  background: rgba(255,255,255,.88); color: var(--eco-blue-dark); border-color: var(--eco-line);
  backdrop-filter: blur(6px);
}
.eco-btn--ghost:not(.wp-block-button):hover { border-color: var(--eco-green); color: var(--eco-green-dark); background: rgba(76,175,42,.06); }
.eco-section--deep .eco-btn--ghost:not(.wp-block-button) { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.14); }
.eco-section--deep .eco-btn--ghost:not(.wp-block-button):hover { background: rgba(255,255,255,.24); color: #fff; border-color: #fff; }

.eco-btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.eco-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--eco-line);
  transition: box-shadow .25s var(--ease);
}
.eco-header.is-stuck { box-shadow: var(--shadow-sm); }

.eco-topbar {
  background: var(--eco-blue-dark); color: rgba(255,255,255,.86);
  font-size: var(--fs-xs);
}
.eco-topbar .eco-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 38px; }
.eco-topbar a { color: #fff; text-decoration: none; }
.eco-topbar a:hover { color: #9BE07B; }
.eco-topbar__list { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.eco-topbar__list li { display: flex; align-items: center; gap: .4rem; }
@media (max-width: 860px) { .eco-topbar { display: none; } }

.eco-bar { display: flex; align-items: center; gap: var(--sp-5); min-height: 76px; }

.eco-logo { flex: 0 0 auto; display: flex; align-items: center; text-decoration: none; }
.eco-logo img { height: clamp(40px, 5vw, 54px); width: auto; }
.eco-logo__text { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--eco-blue-dark); letter-spacing: -.02em; }
.eco-logo__text em { font-style: normal; color: var(--eco-green); }

.eco-nav { margin-left: auto; }
.eco-nav ul { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
.eco-nav a {
  display: block; padding: .55rem .25rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  color: var(--eco-ink); position: relative; white-space: nowrap;
}
.eco-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--grad-brand); border-radius: 2px; transition: right .25s var(--ease);
}
.eco-nav a:hover::after,
.eco-nav .current-menu-item > a::after,
.eco-nav .current-menu-ancestor > a::after { right: 0; }
.eco-nav .current-menu-item > a { color: var(--eco-green-dark); }

/* Dropdown */
.eco-nav .menu-item-has-children { position: relative; }
.eco-nav .sub-menu {
  position: absolute; top: calc(100% + .6rem); left: -1rem; min-width: 270px;
  background: #fff; border: 1px solid var(--eco-line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .5rem; display: block;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.eco-nav .menu-item-has-children:hover > .sub-menu,
.eco-nav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.eco-nav .sub-menu { flex-direction: column; align-items: stretch; gap: 0; }
.eco-nav .sub-menu a { padding: .7rem .9rem; border-radius: var(--radius-sm); white-space: normal; }
.eco-nav .sub-menu a::after { display: none; }
.eco-nav .sub-menu a:hover { background: var(--eco-cloud); color: var(--eco-green-dark); }
.eco-nav .menu-item-has-children > a::before {
  content: ''; display: inline-block; width: .4em; height: .4em; margin-left: .45em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .5;
}

/* The drawer is a child of the header, so it would paint over the burger.
   Lifting the actions above it keeps the close (X) button visible and tappable. */
.eco-header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; position: relative; z-index: 95; }
.eco-header__tel {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm); color: var(--eco-blue-dark);
}
.eco-header__tel svg { width: 18px; height: 18px; color: var(--eco-green); }
@media (max-width: 1080px) { .eco-header__tel span { display: none; } }

/* Language switcher */
.eco-langs { display: inline-flex; background: var(--eco-cloud); border-radius: var(--radius-pill); padding: 3px; }
.eco-langs__item {
  padding: .35rem .7rem; border-radius: var(--radius-pill); text-decoration: none;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; color: var(--eco-muted);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.eco-langs__item.is-current { background: #fff; color: var(--eco-blue-dark); box-shadow: var(--shadow-sm); }
.eco-topbar .eco-langs { background: rgba(255,255,255,.12); }
.eco-topbar .eco-langs__item { color: rgba(255,255,255,.7); }
.eco-topbar .eco-langs__item.is-current { background: rgba(255,255,255,.95); color: var(--eco-blue-dark); }

/* Mobile toggle */
.eco-burger {
  display: none; width: 46px; height: 46px; padding: 0; border: 1px solid var(--eco-line);
  border-radius: var(--radius-sm); background: #fff; cursor: pointer; position: relative;
}
.eco-burger span, .eco-burger::before, .eco-burger::after {
  content: ''; position: absolute; left: 50%; width: 20px; height: 2px; border-radius: 2px;
  background: var(--eco-blue-dark); transform: translateX(-50%); transition: all .25s var(--ease);
}
.eco-burger::before { top: 15px; }
.eco-burger span    { top: 22px; }
.eco-burger::after  { top: 29px; }
.eco-burger[aria-expanded="true"]::before { top: 22px; transform: translateX(-50%) rotate(45deg); }
.eco-burger[aria-expanded="true"] span    { opacity: 0; }
.eco-burger[aria-expanded="true"]::after  { top: 22px; transform: translateX(-50%) rotate(-45deg); }

@media (max-width: 980px) {
  /* backdrop-filter on the header makes it a containing block for
     position:fixed descendants, which collapses the drawer to the header's
     own height. Drop it where the drawer lives; the header is solid here. */
  .eco-header { backdrop-filter: none; background: #fff; }

  .eco-burger { display: block; order: 3; }
  .eco-nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px);
    background: #fff; padding: 96px var(--sp-5) var(--sp-6);
    box-shadow: -12px 0 40px rgba(15,32,56,.16);
    transform: translateX(100%); transition: transform .3s var(--ease), visibility .3s;
    overflow-y: auto; z-index: 90;
    visibility: hidden;   /* keeps off-screen links out of the tab order */
  }
  .eco-nav.is-open { transform: translateX(0); visibility: visible; }
  .eco-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .eco-nav > div > ul > li { border-bottom: 1px solid var(--eco-line); }
  .eco-nav a { padding: 1rem .25rem; font-size: var(--fs-md); }
  .eco-nav a::after { display: none; }
  .eco-nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 .5rem .9rem; min-width: 0;
  }
  .eco-nav .sub-menu a { font-size: var(--fs-sm); padding: .55rem .25rem; color: var(--eco-muted); }
  .eco-scrim {
    position: fixed; inset: 0; background: rgba(15,32,56,.45); z-index: 89;
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
  }
  .eco-scrim.is-open { opacity: 1; visibility: visible; }
  body.eco-locked { overflow: hidden; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.eco-hero { position: relative; overflow: hidden; background: var(--eco-cloud); isolation: isolate; }
.eco-hero__bg { position: absolute; inset: 0; z-index: -2; }
.eco-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.eco-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 42%, rgba(255,255,255,.42) 68%, rgba(255,255,255,.08) 100%);
}
@media (max-width: 860px) {
  .eco-hero::after { background: linear-gradient(180deg, rgba(255,255,255,.95) 30%, rgba(255,255,255,.86) 100%); }
}

.eco-hero__inner { padding-block: clamp(3rem, 8vw, 6.5rem); max-width: 40rem; }
.eco-hero h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-5); }
.eco-hero h1 em { font-style: normal; color: var(--eco-green); }
.eco-hero__lead { font-size: var(--fs-md); color: var(--eco-muted); margin-bottom: var(--sp-6); max-width: 34rem; }
.eco-hero .eco-btns { margin-bottom: var(--sp-6); }

.eco-hero__trust { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6); }
.eco-hero__trust li { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-sm); font-weight: 600; color: var(--eco-blue-dark); }
.eco-hero__trust svg { width: 22px; height: 22px; color: var(--eco-green); flex: 0 0 auto; }
.eco-hero__trust ul { list-style: none; margin: 0; padding: 0; display: contents; }

/* Decorative bubbles — purely ornamental, hidden from assistive tech. */
.eco-bubbles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.eco-bubbles i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(75,163,234,.28) 55%, rgba(27,99,196,.16));
  animation: eco-float 14s ease-in-out infinite;
}
.eco-bubbles i:nth-child(1) { width: 120px; height: 120px; right: 8%;  top: 12%; animation-delay: -1s; }
.eco-bubbles i:nth-child(2) { width: 62px;  height: 62px;  right: 26%; top: 42%; animation-delay: -5s; }
.eco-bubbles i:nth-child(3) { width: 38px;  height: 38px;  right: 14%; top: 68%; animation-delay: -9s; }
@keyframes eco-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-22px) scale(1.05); }
}
@media (max-width: 860px) { .eco-bubbles { display: none; } }

/* ── Cards & grids ──────────────────────────────────────────────────────── */
.eco-grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.eco-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.eco-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.eco-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.eco-card {
  background: #fff; border: 1px solid var(--eco-line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  position: relative; overflow: hidden;
}
/* ::after, not ::before — the icon chip owns ::before on any card carrying an
   eco-ico-* class, and two rules on the same pseudo-element merge: the bar's
   `position:absolute` and `transform:scaleX(0)` were collapsing the icon to
   zero width, so it only appeared while the card was hovered. */
.eco-card::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.eco-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.eco-card:hover::after { transform: scaleX(1); }
.eco-card h3 { margin: 0; font-size: var(--fs-md); }
.eco-card p { color: var(--eco-muted); font-size: var(--fs-sm); margin: 0; }
.eco-card__link { margin-top: auto; padding-top: var(--sp-2); font-weight: 700; font-family: var(--font-display); font-size: var(--fs-sm); text-decoration: none; color: var(--eco-green-cta); }
.eco-card__link::after { content: ' →'; transition: margin .2s var(--ease); }
.eco-card:hover .eco-card__link::after { margin-left: .25rem; }
.eco-card__price { font-family: var(--font-display); font-weight: 800; color: var(--eco-blue-dark); font-size: var(--fs-md); }
.eco-card__price small { font-weight: 600; color: var(--eco-muted); font-size: var(--fs-xs); }

/* Cards that are entirely clickable, without nesting links */
.eco-card--link a.eco-card__cover { position: absolute; inset: 0; z-index: 1; text-indent: -9999px; }

.eco-icon {
  width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--radius);
  display: grid; place-items: center; background: rgba(76,175,42,.10); color: var(--eco-green-dark);
}
.eco-icon svg { width: 28px; height: 28px; }
.eco-icon--blue { background: rgba(27,99,196,.10); color: var(--eco-blue); }

/* ── Steps ──────────────────────────────────────────────────────────────── */
.eco-steps { counter-reset: step; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.eco-step { position: relative; padding-top: 3.4rem; }
.eco-step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; line-height: 1;
  color: var(--eco-green-cta); opacity: .55;
}
.eco-step h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.eco-step p { color: var(--eco-muted); font-size: var(--fs-sm); margin: 0; }

/* ── Feature list with ticks ────────────────────────────────────────────── */
.eco-checks, .is-style-eco-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.eco-checks li, .is-style-eco-checks li { position: relative; padding-left: 2rem; }
.eco-checks li::before, .is-style-eco-checks li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; background: var(--eco-green) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: .7rem;
}

/* ── Stats ──────────────────────────────────────────────────────────────── */
.eco-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--sp-5); }
.eco-stat { text-align: center; }
.eco-stat b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-2xl); line-height: 1; color: var(--eco-green-cta);
}
.eco-section--deep .eco-stat b { color: #9BE07B; }
.eco-stat span { font-size: var(--fs-sm); color: var(--eco-muted); }
.eco-section--deep .eco-stat span { color: rgba(255,255,255,.8); }

/* ── Testimonials ───────────────────────────────────────────────────────── */
.eco-quote {
  background: #fff; border: 1px solid var(--eco-line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2.1rem); display: flex; flex-direction: column; gap: var(--sp-4);
}
.eco-quote__stars { color: #F5A623; letter-spacing: .12em; font-size: var(--fs-sm); }
.eco-quote blockquote { margin: 0; font-size: var(--fs-base); color: var(--eco-ink); }
.eco-quote figcaption { margin-top: auto; display: flex; align-items: center; gap: .75rem; font-size: var(--fs-sm); }
.eco-quote figcaption b { font-family: var(--font-display); color: var(--eco-blue-dark); }
.eco-quote figcaption span { color: var(--eco-muted); }
.eco-quote__avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--eco-green-cta); color: #fff; font-family: var(--font-display); font-weight: 800;
  flex: 0 0 auto;
}

/* ── FAQ (no JavaScript) ────────────────────────────────────────────────── */
.eco-faq,
.eco-faq > .wp-block-group__inner-container { display: grid; gap: var(--sp-3); }
.eco-faq { max-width: var(--wrap-narrow); margin-inline: auto; }
.eco-faq details, .wp-block-details {
  background: #fff; border: 1px solid var(--eco-line); border-radius: var(--radius);
  padding: 0; overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.eco-faq details[open], .wp-block-details[open] { border-color: rgba(76,175,42,.4); box-shadow: var(--shadow-sm); }
.eco-faq summary, .wp-block-details summary {
  cursor: pointer; list-style: none; padding: 1.15rem 3.25rem 1.15rem 1.35rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base);
  color: var(--eco-blue-dark); position: relative;
}
.eco-faq summary::-webkit-details-marker, .wp-block-details summary::-webkit-details-marker { display: none; }
.eco-faq summary::after, .wp-block-details summary::after {
  content: ''; position: absolute; right: 1.35rem; top: 50%; width: .55rem; height: .55rem;
  border-right: 2px solid var(--eco-green); border-bottom: 2px solid var(--eco-green);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s var(--ease);
}
.eco-faq details[open] summary::after, .wp-block-details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.eco-faq details > *:not(summary), .wp-block-details > *:not(summary) {
  padding: 0 1.35rem 1.35rem; margin: 0; color: var(--eco-muted); font-size: var(--fs-sm);
}

/* ── Split section (text + media) ───────────────────────────────────────── */
.eco-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .eco-split { grid-template-columns: 1fr 1fr; }
  .eco-split--reverse .eco-split__media { order: -1; }
}
.eco-split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }
.eco-split__media { position: relative; }
.eco-split__badge {
  position: absolute; bottom: -18px; left: -18px; background: #fff; border-radius: var(--radius);
  padding: 1rem 1.35rem; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: .75rem;
}
.eco-split__badge b { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--eco-green); line-height: 1; }
.eco-split__badge span { font-size: var(--fs-xs); color: var(--eco-muted); }
@media (max-width: 640px) { .eco-split__badge { display: none; } }

/* ── CTA band ───────────────────────────────────────────────────────────── */
.eco-cta {
  background: var(--grad-deep); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem); text-align: center; position: relative; overflow: hidden;
}
.eco-cta::before {
  content: ''; position: absolute; width: 460px; height: 460px; right: -140px; top: -180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.13), transparent 68%);
}
.eco-cta > * { position: relative; }
.eco-cta h2 { color: #fff; position: relative; z-index: 1; }
.eco-cta p { color: rgba(255,255,255,.84); max-width: 40rem; margin-inline: auto; font-size: var(--fs-md); }
.eco-cta .eco-btns, .eco-cta .wp-block-buttons { justify-content: center; margin-top: var(--sp-5); }

/* ── Form ───────────────────────────────────────────────────────────────── */
.eco-form {
  display: grid; gap: var(--sp-4);
  background: #fff; border: 1px solid var(--eco-line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--shadow);
}
@media (min-width: 640px) {
  .eco-form { grid-template-columns: 1fr 1fr; }
  .eco-form__row--message, .eco-form__row--consent,
  .eco-form button, .eco-form__fineprint, .eco-form__alert { grid-column: 1 / -1; }
}
.eco-form__row { display: grid; gap: .4rem; margin: 0; }
.eco-form label { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--eco-blue-dark); }
.eco-form .req { color: var(--eco-green); }
.eco-form input:not([type=checkbox]), .eco-form select, .eco-form textarea {
  width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--eco-ink);
  padding: .85rem 1rem; border: 1.5px solid var(--eco-line); border-radius: var(--radius-sm);
  background: var(--eco-cloud); transition: border-color .18s var(--ease), background .18s var(--ease);
}
.eco-form input:focus, .eco-form select:focus, .eco-form textarea:focus {
  outline: none; border-color: var(--eco-green); background: #fff;
  box-shadow: 0 0 0 4px rgba(76,175,42,.12);
}
.eco-form textarea { resize: vertical; min-height: 120px; }
.eco-check { display: flex; align-items: flex-start; gap: .65rem; font-weight: 400; font-family: var(--font-body); font-size: var(--fs-xs); color: var(--eco-muted); }
.eco-check input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--eco-green); flex: 0 0 auto; }
.eco-form__fineprint { font-size: var(--fs-xs); color: var(--eco-muted); margin: 0; text-align: center; }
.eco-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.eco-form__alert { padding: 1rem 1.25rem; border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.eco-form__alert--ok  { background: rgba(76,175,42,.10); border: 1px solid rgba(76,175,42,.35); color: var(--eco-green-dark); }
.eco-form__alert--err { background: rgba(214,69,69,.08); border: 1px solid rgba(214,69,69,.32); color: #A32020; }

/* ── Opening hours table ────────────────────────────────────────────────── */
.eco-hours { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.eco-hours th, .eco-hours td { padding: .55rem 0; text-align: left; border: 0; border-bottom: 1px dashed var(--eco-line); }
.eco-hours th { font-weight: 600; color: var(--eco-muted); }
.eco-hours td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.eco-hours__note { font-size: var(--fs-xs); color: var(--eco-muted); margin-top: var(--sp-2); }

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */
.eco-crumbs { font-size: var(--fs-xs); color: var(--eco-muted); padding-block: var(--sp-4); }
.eco-crumbs a { color: var(--eco-muted); text-decoration: none; }
.eco-crumbs a:hover { color: var(--eco-green-dark); text-decoration: underline; }
.eco-crumbs span[aria-current] { color: var(--eco-blue-dark); font-weight: 600; }

/* ── Page hero (inner pages) ────────────────────────────────────────────── */
.eco-pagehead { background: var(--eco-cloud); border-bottom: 1px solid var(--eco-line); }
.eco-pagehead__inner { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem); max-width: 48rem; }
.eco-pagehead h1 { margin-bottom: var(--sp-3); }
.eco-pagehead p { color: var(--eco-muted); font-size: var(--fs-md); margin: 0; }

/* ── Content typography (post/page body) ────────────────────────────────── */
.eco-content { max-width: var(--wrap-narrow); }
.eco-content > * + * { margin-top: var(--sp-5); }
.eco-content h2 { margin-top: var(--sp-7); }
.eco-content h3 { margin-top: var(--sp-6); }
.eco-content ul, .eco-content ol { padding-left: 1.25rem; }
.eco-content li + li { margin-top: .4rem; }
.eco-content blockquote {
  margin: 0; padding: var(--sp-4) var(--sp-5); border-left: 4px solid var(--eco-green);
  background: var(--eco-cloud); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-md); color: var(--eco-blue-dark);
}
.eco-content img { border-radius: var(--radius); }
.eco-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.eco-content th, .eco-content td { padding: .75rem 1rem; border: 1px solid var(--eco-line); text-align: left; }
.eco-content th { background: var(--eco-cloud); font-family: var(--font-display); }

/* Wide blocks inside a constrained column must not blow out the layout. */
.eco-content .alignwide, .eco-content .alignfull { max-width: 100%; }
.eco-content .wp-block-table { overflow-x: auto; display: block; }

/* Block-editor style aliases so client-built pages inherit the design */
.is-style-eco-panel {
  background: var(--eco-cloud); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.is-style-eco-cards > .wp-block-column {
  background: #fff; border: 1px solid var(--eco-line); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
}
.has-eco-green-color { color: var(--eco-green) !important; }
.has-eco-blue-dark-color { color: var(--eco-blue-dark) !important; }
.has-eco-cloud-background-color { background-color: var(--eco-cloud) !important; }
.has-eco-green-background-color { background-color: var(--eco-green) !important; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.eco-footer { background: var(--eco-blue-dark); color: rgba(255,255,255,.72); font-size: var(--fs-sm); }
.eco-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.eco-footer a:hover { color: #9BE07B; }
.eco-footer h3 {
  color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: var(--sp-4);
}
.eco-footer__top { padding-block: var(--sp-8) var(--sp-7); display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.eco-footer__brand img { height: 54px; width: auto; margin-bottom: var(--sp-4); }
.eco-footer ul li { display: flex; align-items: center; gap: .6rem; }
.eco-footer ul li svg { width: 17px; height: 17px; flex: 0 0 auto; color: #9BE07B; }
.eco-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.eco-footer .eco-hours th, .eco-footer .eco-hours td { border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.78); }
.eco-footer .eco-hours__note { color: rgba(255,255,255,.6); }
.eco-footer .eco-hours { border: 0; }
.eco-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.13); padding-block: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; font-size: var(--fs-xs);
}
.eco-footer__social { display: flex; gap: .6rem; margin-top: var(--sp-4); }
.eco-footer__social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.10); transition: background .2s var(--ease), transform .2s var(--ease);
}
.eco-footer__social a:hover { background: var(--eco-green-cta); transform: translateY(-2px); }
.eco-footer__social svg { width: 18px; height: 18px; }

/* ── Mobile sticky call bar ─────────────────────────────────────────────── */
.eco-callbar { display: none; }
@media (max-width: 767px) {
  .eco-callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; inset: auto 0 0; z-index: 95;
    background: var(--eco-line); box-shadow: 0 -4px 20px rgba(15,32,56,.14);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .eco-callbar a {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .95rem; text-decoration: none; background: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--eco-blue-dark);
  }
  .eco-callbar a.is-primary { background: var(--eco-green-cta); color: #fff; }
  .eco-callbar svg { width: 18px; height: 18px; }
  body { padding-bottom: 64px; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .eco-header, .eco-footer, .eco-callbar, .eco-cta, .eco-form { display: none !important; }
  body { color: #000; font-size: 11pt; }
}






/* ── Icon chips for block-built cards ───────────────────────────────────── */
/* Generated from inc/icons.php by scripts/build-icons.py so the CSS and PHP
   icon sets can never drift apart. Do not hand-edit these rules.           */
[class*="eco-ico-"]::before {
  content: ''; display: block; flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: var(--radius);
  background-color: rgba(76,175,42,.10);
  background-repeat: no-repeat; background-position: center; background-size: 28px 28px;
  margin-bottom: var(--sp-2);
}
.eco-ico-home::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M3%2010.5%2012%203l9%207.5%22/><path%20d=%22M5%209.5V21h14V9.5%22/><path%20d=%22M9%2021v-6h6v6%22/></svg>"); }
.eco-ico-building::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x=%224%22%20y=%222%22%20width=%2216%22%20height=%2220%22%20rx=%221%22/><path%20d=%22M9%207h.01M15%207h.01M9%2011h.01M15%2011h.01M9%2015h.01M15%2015h.01%22/><path%20d=%22M10%2022v-3h4v3%22/></svg>"); }
.eco-ico-sparkle::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%232E7D14'%20stroke='none'%20stroke-width='0'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M12%203l1.9%205.6L19.5%2010l-5.6%201.9L12%2017.5l-1.9-5.6L4.5%2010l5.6-1.4z%22/><path%20d=%22M19%2015l.8%202.2L22%2018l-2.2.8L19%2021l-.8-2.2L16%2018l2.2-.8z%22/></svg>"); }
.eco-ico-brush::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M9.5%2014.5%203%2021%22/><path%20d=%22M4%2016.5%2016.5%204a2.1%202.1%200%200%201%203%203L7%2019.5z%22/><path%20d=%22M14%206l4%204%22/></svg>"); }
.eco-ico-sofa::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M4%2012V8a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v4%22/><path%20d=%22M2%2014a2%202%200%200%201%202-2%202%202%200%200%201%202%202v3h12v-3a2%202%200%200%201%204%200v5H2z%22/></svg>"); }
.eco-ico-stairs::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M3%2021h4v-4h4v-4h4V9h4V5h3%22/></svg>"); }
.eco-ico-leaf::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.5%2019%202c1%202%202%204.2%202%208a7%207%200%200%201-10%2010z%22/><path%20d=%22M2%2021c0-3%201.9-7%208-9%22/></svg>"); }
.eco-ico-shield::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22/><polyline%20points=%229%2012%2011%2014%2015%2010%22/></svg>"); }
.eco-ico-clock::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx=%2212%22%20cy=%2212%22%20r=%2210%22/><polyline%20points=%2212%206%2012%2012%2016%2014%22/></svg>"); }
.eco-ico-euro::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M18%206a8%208%200%201%200%200%2012%22/><line%20x1=%223%22%20y1=%2210%22%20x2=%2213%22%20y2=%2210%22/><line%20x1=%223%22%20y1=%2214%22%20x2=%2213%22%20y2=%2214%22/></svg>"); }
.eco-ico-check::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><polyline%20points=%2220%206%209%2017%204%2012%22/></svg>"); }
.eco-ico-tools::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M14.7%206.3a4%204%200%200%200%205%205l-9.4%209.4a2.1%202.1%200%200%201-3-3z%22/><path%20d=%22M17.6%203.5%2021%206.9%22/></svg>"); }
.eco-ico-pin::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M21%2010c0%207-9%2013-9%2013S3%2017%203%2010a9%209%200%200%201%2018%200z%22/><circle%20cx=%2212%22%20cy=%2210%22%20r=%223%22/></svg>"); }
.eco-ico-phone::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202%204.2%202%202%200%200%201%204%202h3a2%202%200%200%201%202%201.7c.1%201%20.4%201.9.7%202.8a2%202%200%200%201-.5%202.1L8.1%209.9a16%2016%200%200%200%206%206l1.3-1.1a2%202%200%200%201%202.1-.5c.9.3%201.8.6%202.8.7a2%202%200%200%201%201.7%202z%22/></svg>"); }
.eco-ico-mail::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M4%204h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2z%22/><polyline%20points=%2222%2C6%2012%2C13%202%2C6%22/></svg>"); }
.eco-ico-chat::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M21%2011.5a8.4%208.4%200%200%201-9%208.4%208.5%208.5%200%200%201-3.8-.9L3%2021l1.9-5.1A8.4%208.4%200%200%201%2012%203a8.4%208.4%200%200%201%209%208.5z%22/></svg>"); }
.eco-ico-star::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%232E7D14'%20stroke='none'%20stroke-width='0'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M12%202l3.1%206.3%206.9%201-5%204.9%201.2%206.9L12%2017.8%205.8%2021l1.2-6.9-5-4.9%206.9-1z%22/></svg>"); }
.eco-ico-arrow::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><line%20x1=%225%22%20y1=%2212%22%20x2=%2219%22%20y2=%2212%22/><polyline%20points=%2212%205%2019%2012%2012%2019%22/></svg>"); }
.eco-ico-kitchen::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x=%223%22%20y=%224%22%20width=%2218%22%20height=%2216%22%20rx=%222%22/><circle%20cx=%228.5%22%20cy=%229.5%22%20r=%221.5%22/><circle%20cx=%2215.5%22%20cy=%229.5%22%20r=%221.5%22/><circle%20cx=%228.5%22%20cy=%2215.5%22%20r=%221.5%22/><circle%20cx=%2215.5%22%20cy=%2215.5%22%20r=%221.5%22/></svg>"); }
.eco-ico-bath::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M5%2012V6.5a2.5%202.5%200%200%201%205%200%22/><path%20d=%22M2%2012h20v3a4%204%200%200%201-4%204H6a4%204%200%200%201-4-4z%22/><path%20d=%22M6%2019v2%22/><path%20d=%22M18%2019v2%22/></svg>"); }
.eco-ico-carpet::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M4%207h16v10H4z%22/><path%20d=%22M4%207c0-1.1.9-2%202-2h12a2%202%200%200%201%202%202%22/><path%20d=%22M4%2017c0%201.1.9%202%202%202h12a2%202%200%200%200%202-2%22/><path%20d=%22M8%2010v4M12%2010v4M16%2010v4%22/></svg>"); }
.eco-ico-bed::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E7D14'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M3%2018v-8a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v8%22/><path%20d=%22M3%2014h18%22/><path%20d=%22M7%208V6h10v2%22/><path%20d=%22M3%2018v2M21%2018v2%22/></svg>"); }
/* ── end icon chips ── */






/* ══════════════════════════════════════════════════════════════════════════
   Gutenberg block bindings
   Pages are built from CORE blocks only, so the client edits everything
   visually. These rules map those core blocks onto the design system above.
   ══════════════════════════════════════════════════════════════════════════ */

/* Full-bleed sections inside the constrained main column */
.eco-main > .wp-block-group.alignfull,
.eco-main > .wp-block-cover.alignfull { width: 100%; max-width: none; margin-inline: 0; }

.wp-block-group.eco-section > .wp-block-group__inner-container,
.wp-block-group.eco-section > * { margin-inline: auto; width: min(100% - 2.5rem, var(--wrap)); }
@media (min-width: 768px) {
  .wp-block-group.eco-section > .wp-block-group__inner-container,
  .wp-block-group.eco-section > * { width: min(100% - 4rem, var(--wrap)); }
}

/* ── Hero built on core/cover ───────────────────────────────────────────── */
.wp-block-cover.eco-hero {
  min-height: clamp(430px, 62vh, 640px);
  padding: 0; align-items: center; justify-content: flex-start;
}
/* core/cover already renders an overlay span — reuse it for the brand
   gradient instead of hiding it, so hero text stays readable on the photo. */
/* WordPress inlines core block CSS AFTER the theme stylesheet, so the
   selector below is deliberately more specific than core's
   `.has-background-dim-0 { opacity: 0 }` rather than relying on order. */
.wp-block-cover.eco-hero > span.wp-block-cover__background.has-background-dim {
  display: block; opacity: 1; z-index: 1;
  background: linear-gradient(100deg,
    rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 38%,
    rgba(255,255,255,.55) 62%, rgba(255,255,255,.06) 100%);
}
.wp-block-cover.eco-hero .wp-block-cover__image-background { object-position: 72% center; z-index: 0; }
.wp-block-cover.eco-hero > .wp-block-cover__inner-container { z-index: 2; position: relative; }
@media (max-width: 860px) {
  .wp-block-cover.eco-hero .wp-block-cover__background {
    background: linear-gradient(180deg, rgba(255,255,255,.97) 28%, rgba(255,255,255,.86) 62%, rgba(255,255,255,.55) 100%);
  }
}
.wp-block-cover.eco-hero > .wp-block-cover__inner-container {
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  color: var(--eco-ink); text-align: left;
}
@media (min-width: 768px) {
  .wp-block-cover.eco-hero > .wp-block-cover__inner-container { width: min(100% - 4rem, var(--wrap)); }
}
.wp-block-cover.eco-hero h1 { color: var(--eco-blue-dark); max-width: 18ch; }
.wp-block-cover.eco-hero > .wp-block-cover__inner-container > p { max-width: 34rem; color: var(--eco-muted); font-size: var(--fs-md); }
.wp-block-cover.eco-hero .wp-block-buttons { margin-top: var(--sp-6); }

/* ── core/columns as the card grid ─────────────────────────────────────── */
/* CSS Grid, not flex percentages. `flex-basis: calc(25% - 1.3rem)` on four
   columns plus three 1.75rem gaps overflows the row by a fraction of a pixel,
   which silently wrapped the fourth card onto a full-width row of its own.
   Grid subtracts the gaps from the tracks itself, so the sums cannot drift —
   and it sidesteps core's `flex-wrap:nowrap!important` entirely. */
.wp-block-columns.eco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
  align-items: stretch;
}
.wp-block-columns.eco-grid > .wp-block-column { flex-basis: auto; width: auto; min-width: 0; }
.wp-block-columns.eco-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.wp-block-columns.eco-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
@media (max-width: 600px) { .wp-block-columns.eco-grid { grid-template-columns: 1fr; } }

/* A core/group carrying .eco-card becomes a card */
.wp-block-group.eco-faq { max-width: var(--wrap-narrow); margin-inline: auto; }
.wp-block-group.eco-card > .wp-block-group__inner-container > * { margin-block: 0 var(--sp-3); }
.wp-block-group.eco-card > .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }
.wp-block-group.eco-card h3 { margin-top: 0; }
.eco-card .wp-block-buttons { margin-top: auto; }

/* ── core/media-text as the split section ──────────────────────────────── */
.wp-block-media-text.eco-split { gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr 1fr; }
.wp-block-media-text.eco-split .wp-block-media-text__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.wp-block-media-text.eco-split .wp-block-media-text__content { padding: 0; }
@media (max-width: 781px) { .wp-block-media-text.eco-split { grid-template-columns: 1fr; } }

/* ── Buttons rendered by core/button ───────────────────────────────────── */
.wp-block-button.eco-btn--primary > .wp-block-button__link { background: var(--eco-green-cta); color: #fff; box-shadow: var(--shadow-green); }
.wp-block-button.eco-btn--primary > .wp-block-button__link:hover { background: var(--eco-green-dark); transform: translateY(-2px); }
.wp-block-button.eco-btn--ghost > .wp-block-button__link {
  background: rgba(255,255,255,.9); color: var(--eco-blue-dark); border: 2px solid var(--eco-line);
  backdrop-filter: blur(6px);
}
.wp-block-button.eco-btn--ghost > .wp-block-button__link:hover { border-color: var(--eco-green); color: var(--eco-green-dark); }
.eco-cta .wp-block-button.eco-btn--ghost > .wp-block-button__link,
.eco-section--deep .wp-block-button.eco-btn--ghost > .wp-block-button__link {
  background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5);
  backdrop-filter: none;
}
.eco-cta .wp-block-button.eco-btn--ghost > .wp-block-button__link:hover,
.eco-section--deep .wp-block-button.eco-btn--ghost > .wp-block-button__link:hover {
  background: rgba(255,255,255,.24); border-color: #fff; color: #fff;
}

/* ── Stats row ─────────────────────────────────────────────────────────── */
.wp-block-columns.eco-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
}
.wp-block-columns.eco-stats > .wp-block-column { text-align: center; flex-basis: auto; width: auto; min-width: 0; }
.wp-block-columns.eco-stats h3 {
  font-size: var(--fs-2xl); color: var(--eco-green-cta); margin-bottom: .25rem; line-height: 1;
}
.wp-block-columns.eco-stats p { color: var(--eco-muted); font-size: var(--fs-sm); margin: 0; }
.eco-section--deep .wp-block-columns.eco-stats h3 { color: #9BE07B; }
.eco-section--deep .wp-block-columns.eco-stats p { color: rgba(255,255,255,.8); }

/* ── Steps built as columns ────────────────────────────────────────────── */
.wp-block-columns.eco-steps {
  counter-reset: step; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.wp-block-columns.eco-steps > .wp-block-column { flex-basis: auto; width: auto; min-width: 0; }
.wp-block-columns.eco-steps > .wp-block-column { position: relative; padding-top: 3.4rem; }
.wp-block-columns.eco-steps > .wp-block-column::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0; line-height: 1;
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800;
  color: var(--eco-green-cta); opacity: .55;
}
.wp-block-columns.eco-steps h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.wp-block-columns.eco-steps p { color: var(--eco-muted); font-size: var(--fs-sm); margin: 0; }

/* ── Testimonial groups ────────────────────────────────────────────────── */
.wp-block-group.eco-quote { height: 100%; }
.wp-block-group.eco-quote p:first-child { color: #F5A623; letter-spacing: .12em; margin-bottom: var(--sp-3); }
.wp-block-group.eco-quote p:last-child { color: var(--eco-muted); font-size: var(--fs-xs); margin-top: var(--sp-3); }

/* ── Mobile drawer CTA (hidden on desktop) ─────────────────────────────── */
.eco-nav__mobile-cta { display: none; margin-top: var(--sp-5); }
@media (max-width: 980px) { .eco-nav__mobile-cta { display: block; } }
@media (max-width: 980px) { .eco-header__cta { display: none; } }

/* Header CTA is noise on very small screens — the sticky call bar covers it. */
@media (max-width: 420px) { .eco-header__tel { display: none; } }

/* ── Contact page layout ───────────────────────────────────────────────── */
/* core/columns is display:flex from core CSS that loads after this file, so
   these selectors carry the extra class to win on specificity, not order. */
.wp-block-columns.eco-contact, .eco-contact {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
@media (min-width: 900px) {
  .wp-block-columns.eco-contact, .eco-contact { grid-template-columns: 1.15fr .85fr; }
}
.wp-block-columns.eco-contact > .wp-block-column { flex-basis: auto; width: 100%; }
.eco-contact__aside { display: grid; gap: var(--sp-5); }
.eco-contact__block {
  background: var(--eco-cloud); border-radius: var(--radius-lg); padding: clamp(1.25rem, 2.4vw, 1.9rem);
}
.eco-contact__block h3 { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.eco-contact__block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; font-size: var(--fs-sm); }
.eco-contact__block li { display: flex; align-items: center; gap: .6rem; }
.eco-contact__block svg { width: 18px; height: 18px; color: var(--eco-green); flex: 0 0 auto; }

/* ── Pagination ────────────────────────────────────────────────────────── */
.wp-block-query-pagination, .navigation.pagination { margin-top: var(--sp-7); }
.nav-links { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.page-numbers {
  display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .75rem;
  border-radius: var(--radius-sm); border: 1px solid var(--eco-line); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--eco-blue-dark);
}
.page-numbers.current { background: var(--eco-green-cta); border-color: var(--eco-green-cta); color: #fff; }
.page-numbers:hover:not(.current) { border-color: var(--eco-green); color: var(--eco-green-dark); }

/* ══════════════════════════════════════════════════════════════════════════
   Rich components
   Added so pages carry real depth instead of one oversized split block.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Feature grid (reasons, guarantees — no outbound link) ──────────────── */
.wp-block-group.eco-feature {
  background: var(--eco-cloud); border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  height: 100%; border: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.wp-block-group.eco-feature:hover { background: #fff; border-color: var(--eco-line); box-shadow: var(--shadow); }
.eco-feature h3 { font-size: var(--fs-base); margin: 0; }
.eco-feature p  { font-size: var(--fs-sm); color: var(--eco-muted); margin: 0; }
.eco-section--deep .eco-feature { background: rgba(255,255,255,.07); }
.eco-section--deep .eco-feature h3 { color: #fff; }
.eco-section--deep .eco-feature p { color: rgba(255,255,255,.78); }

/* ── Grouped checklists ─────────────────────────────────────────────────── */
.wp-block-group.eco-checkgroup {
  background: #fff; border: 1px solid var(--eco-line); border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.4vw, 1.85rem); height: 100%;
}
.eco-checkgroup h3 {
  font-size: var(--fs-base); margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--eco-line);
}
.eco-checkgroup ul { font-size: var(--fs-sm); }

/* ── Included / not included ────────────────────────────────────────────── */
.wp-block-columns.eco-compare { align-items: stretch; }
.wp-block-group.eco-compare__col {
  border-radius: var(--radius-lg); padding: clamp(1.35rem, 2.4vw, 1.9rem); height: 100%;
  border: 1px solid var(--eco-line);
}
.eco-compare__col h3 { font-size: var(--fs-base); margin: 0 0 var(--sp-4); }
.eco-compare__col ul { font-size: var(--fs-sm); }
.eco-compare__col--yes { background: rgba(76,175,42,.07); border-color: rgba(76,175,42,.28); }
.eco-compare__col--yes h3 { color: var(--eco-green-dark); }
.eco-compare__col--no  { background: var(--eco-cloud); }
.eco-compare__col--no h3 { color: var(--eco-muted); }

.is-style-eco-crosses { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.is-style-eco-crosses li { position: relative; padding-left: 2rem; color: var(--eco-muted); }
.is-style-eco-crosses li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; background: #C2CCD6 no-repeat center; background-size: .62rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* ── Data tables ────────────────────────────────────────────────────────── */
.wp-block-table.eco-table { margin: 0; overflow-x: auto; }
.eco-table table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); min-width: 460px;
}
.eco-table th, .eco-table td { padding: .85rem 1.1rem; text-align: left; border: 0; border-bottom: 1px solid var(--eco-line); }
.eco-table thead th {
  background: var(--eco-blue-dark); color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.eco-table tbody tr:last-child td { border-bottom: 0; }
.eco-table tbody tr:nth-child(even) { background: var(--eco-cloud); }
.eco-table td:first-child { font-weight: 600; color: var(--eco-blue-dark); }
.eco-table td + td { font-variant-numeric: tabular-nums; }

/* ── Timeline ───────────────────────────────────────────────────────────── */
.wp-block-group.eco-timeline,
.wp-block-group.eco-timeline > .wp-block-group__inner-container {
  counter-reset: tl; display: grid; gap: 0;
}
.wp-block-group.eco-timeline { text-align: left; max-width: var(--wrap-narrow); margin-inline: auto; }
.wp-block-group.eco-timeline__item {
  counter-increment: tl; position: relative;
  padding: 0 0 var(--sp-6) clamp(3.25rem, 6vw, 4.25rem);
  border-left: 2px solid var(--eco-line); margin-left: 1.35rem;
}
.eco-timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.eco-timeline__item::before {
  content: counter(tl); position: absolute; left: 0; top: -2px;
  transform: translateX(-50%);
  width: 2.7rem; height: 2.7rem; border-radius: 50%;
  display: grid; place-items: center;
  /* Flat, not a gradient: a two-colour blend on a 2.7rem disc reads as
     decoration for its own sake at this size. */
  background: var(--eco-green-cta); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm);
  box-shadow: 0 0 0 6px #fff;
}
.eco-section--cloud .eco-timeline__item::before { box-shadow: 0 0 0 6px var(--eco-cloud); }
.eco-timeline__item h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
.eco-timeline__item p  { color: var(--eco-muted); font-size: var(--fs-sm); margin: 0; }
.eco-timeline__meta {
  display: inline-block; margin-top: var(--sp-3) !important;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
  color: var(--eco-green-dark); background: rgba(76,175,42,.10);
  padding: .3rem .7rem; border-radius: var(--radius-pill);
}

/* ── Callout ────────────────────────────────────────────────────────────── */
.wp-block-group.eco-callout {
  max-width: var(--wrap-narrow); margin-inline: auto; text-align: left;
  border-radius: var(--radius-lg); padding: clamp(1.35rem, 2.6vw, 2rem);
  border-left: 4px solid var(--eco-green); background: rgba(76,175,42,.07);
}
.eco-callout--warn { border-left-color: #E0A33A; background: rgba(224,163,58,.09); }
.eco-callout h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.eco-callout p  { font-size: var(--fs-sm); color: var(--eco-ink); margin: 0 0 var(--sp-3); }
.eco-callout p:last-child { margin-bottom: 0; }

/* ── Long-form supporting copy ──────────────────────────────────────────── */
.wp-block-group.eco-longform { max-width: var(--wrap-narrow); margin-inline: auto; text-align: left; }
.eco-longform h3 { font-size: var(--fs-md); margin: var(--sp-6) 0 var(--sp-3); }
.eco-longform > h3:first-child { margin-top: 0; }
.eco-longform p { color: var(--eco-muted); margin-bottom: var(--sp-4); }
.eco-longform ul { color: var(--eco-muted); padding-left: 1.25rem; margin-bottom: var(--sp-4); }
.eco-longform li + li { margin-top: .35rem; }

/* ── Pulled-out quote ───────────────────────────────────────────────────── */
.wp-block-group.eco-quotebanner {
  max-width: 62rem; margin-inline: auto; text-align: center;
  background: var(--grad-deep); color: #fff;
  border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.25rem);
  position: relative; overflow: hidden;
}
.eco-quotebanner::before {
  content: '„'; position: absolute; top: -2.2rem; left: 1.5rem;
  font-family: var(--font-display); font-size: 10rem; line-height: 1;
  color: rgba(255,255,255,.10);
}
.eco-quotebanner__text {
  position: relative; font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-lg); line-height: 1.45; color: #fff; margin-bottom: var(--sp-5) !important;
}
.eco-quotebanner__by { position: relative; font-size: var(--fs-sm); color: rgba(255,255,255,.75); margin: 0 !important; }
.eco-quotebanner__by strong { color: #9BE07B; }

/* ── Related services (internal linking) ────────────────────────────────── */
.eco-card--slim { padding: clamp(1.25rem, 2.2vw, 1.6rem); }
.eco-card--slim h3 { font-size: var(--fs-base); }

/* ── Service-area pills ─────────────────────────────────────────────────── */
.wp-block-group.eco-pills,
.wp-block-group.eco-pills > .wp-block-group__inner-container {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
}
.wp-block-group.eco-pills { max-width: 52rem; margin-inline: auto; }
.eco-pill {
  margin: 0 !important;
  background: #fff; border: 1px solid var(--eco-line); border-radius: var(--radius-pill);
  padding: .5rem 1.1rem; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-sm); color: var(--eco-blue-dark);
}
.eco-section--cloud .eco-pill { background: #fff; }

/* ── Trust badges ───────────────────────────────────────────────────────── */
.wp-block-group.eco-badge {
  display: flex; flex-direction: column; gap: .35rem; text-align: left;
}
.eco-badge p { margin: 0; font-size: var(--fs-sm); color: var(--eco-muted); }
.eco-badge p strong { display: block; font-family: var(--font-display); color: var(--eco-blue-dark); font-size: var(--fs-base); }
.eco-badge[class*="eco-ico-"]::before { width: 44px; height: 44px; background-size: 22px 22px; }

/* ── Separator ──────────────────────────────────────────────────────────── */
.wp-block-separator.eco-rule {
  border: 0; border-top: 1px solid var(--eco-line);
  max-width: var(--wrap-narrow); margin-inline: auto; opacity: 1;
}

/* ── Fine print ─────────────────────────────────────────────────────────── */
.eco-fineprint { font-size: var(--fs-xs); color: var(--eco-muted); margin-top: var(--sp-4) !important; }
.eco-fineprint--center { text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
   Interactive components
   Everything here has a working no-JavaScript state, and everything animated
   is switched off under prefers-reduced-motion at the end of this block.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Before / after slider ──────────────────────────────────────────────── */
.eco-ba {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); aspect-ratio: 16 / 10; background: var(--eco-cloud);
  touch-action: pan-y; user-select: none; cursor: ew-resize;
  max-width: 62rem; margin-inline: auto;
}
/* The two halves are core/image blocks, so figures are the layers. */
.eco-ba figure { position: absolute; inset: 0; margin: 0; }
.eco-ba img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; -webkit-user-drag: none; border-radius: 0;
}
.eco-ba__before {
  position: absolute; inset: 0; width: 50%; overflow: hidden; z-index: 2;
  border-right: 3px solid #fff;
}
/* The clipped layer must stay the full width of the slider, or the image
   squashes horizontally as the pane narrows instead of being revealed. */
.eco-ba__before figure { width: var(--ba-w, 100%); }
.eco-ba__before img { width: var(--ba-w, 100%); max-width: none; }
.eco-ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 44px;
  transform: translateX(-50%); z-index: 3; cursor: ew-resize;
  background: none; border: 0; padding: 0; display: grid; place-items: center;
}
.eco-ba__handle::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; transform: translateX(-50%); background: #fff;
  box-shadow: 0 0 12px rgba(15,32,56,.35);
}
.eco-ba__grip {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow);
  display: grid; place-items: center; color: var(--eco-blue-dark);
}
.eco-ba__grip svg { width: 22px; height: 22px; }
.eco-ba__handle:focus-visible .eco-ba__grip { outline: 3px solid var(--eco-green); outline-offset: 3px; }
.eco-ba__label {
  position: absolute; top: 1rem; z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase;
  padding: .4rem .85rem; border-radius: var(--radius-pill);
  background: rgba(15,32,56,.72); color: #fff; backdrop-filter: blur(6px);
}
.eco-ba__label--before { left: 1rem; }
.eco-ba__label--after  { right: 1rem; background: rgba(58,132,31,.94); }
/* Before the script runs there is no drag affordance, so hide the hint. */
.eco-ba:not(.is-ready) .eco-ba__handle { display: none; }
.eco-ba:not(.is-ready) .eco-ba__before { width: 50%; }

/* ── Carousel ───────────────────────────────────────────────────────────── */
.eco-carousel { position: relative; }
/* WordPress wraps a group's children in .wp-block-group__inner-container, so
   any layout set on the group itself would apply to that single wrapper rather
   than to the slides. Every layout rule below therefore targets the group AND
   its inner container — which also keeps the markup working if a future
   WordPress version drops the wrapper. */
/* The scroll container and the grid that lays out the slides MUST be the same
   element. WordPress wraps a group's children in .wp-block-group__inner-container,
   so when that wrapper exists it is the scroller; otherwise the track itself is.
   Splitting the two makes scroll-snap fight the scroll and the track jumps back
   to its start on every programmatic scroll. */
.eco-carousel__scroller,
.eco-carousel__track > .wp-block-group__inner-container,
.eco-carousel__track:not(:has(> .wp-block-group__inner-container)) {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(100%, 30rem);
  gap: clamp(1rem, 2.2vw, 1.75rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .5rem .25rem 1.25rem; margin: -.5rem -.25rem 0;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  position: relative;   /* makes slide.offsetLeft relative to the scroller */
}
.eco-carousel__scroller::-webkit-scrollbar,
.eco-carousel__track > .wp-block-group__inner-container::-webkit-scrollbar { display: none; }
.eco-carousel__track::-webkit-scrollbar { display: none; }
.eco-carousel__track > * { scroll-snap-align: center; height: auto; }
@media (min-width: 900px) {
  .eco-carousel__scroller,
  .eco-carousel__track > .wp-block-group__inner-container,
  .eco-carousel__track:not(:has(> .wp-block-group__inner-container)) { grid-auto-columns: calc(33.333% - 1.2rem); }
}

.eco-carousel__nav {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-4); margin-top: var(--sp-4);
}
.eco-carousel__arrow {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  /* On a white section a white button with a hairline border is effectively
     invisible; the tinted ground and darker rule keep it discoverable. */
  border: 1.5px solid var(--eco-line); background: var(--eco-cloud);
  color: var(--eco-blue-dark); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.eco-carousel__arrow:hover { transform: translateY(-1px); }
/* `img, svg, video { height: auto }` in the reset collapses these to a few
   pixels, because the SVG's width/height attributes lose to the stylesheet. */
.eco-carousel__arrow svg {
  width: 20px; height: 20px; min-width: 20px; max-width: none; flex: 0 0 auto;
}
.eco-carousel__dots { padding-inline: .35rem; }
.eco-carousel__arrow:hover { background: var(--eco-green-cta); border-color: var(--eco-green-cta); color: #fff; }
.eco-carousel__dots { display: flex; gap: .45rem; }
.eco-carousel__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--eco-line); cursor: pointer;
  transition: width .25s var(--ease), background .25s var(--ease);
}
.eco-carousel__dot.is-active { width: 26px; border-radius: var(--radius-pill); background: var(--eco-green-cta); }
.eco-section--deep .eco-carousel__arrow { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.eco-section--deep .eco-carousel__dot { background: rgba(255,255,255,.28); }
.eco-section--deep .eco-carousel__dot.is-active { background: #9BE07B; }

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
/* Only applies once JS has flagged support, so content is never stuck hidden. */
.eco-reveal-on .eco-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.eco-reveal-on .eco-reveal.is-revealed { opacity: 1; transform: none; }

/* ── Marquee (trust strip) ──────────────────────────────────────────────── */
.eco-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.eco-marquee__track { display: flex; gap: clamp(2rem, 5vw, 4rem); width: max-content; animation: eco-marquee 32s linear infinite; }
.eco-marquee:hover .eco-marquee__track { animation-play-state: paused; }
.eco-marquee__item {
  display: flex; align-items: center; gap: .6rem; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  color: var(--eco-muted);
}
.eco-marquee__item svg { width: 20px; height: 20px; color: var(--eco-green); flex: 0 0 auto; }
@keyframes eco-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Hero video ─────────────────────────────────────────────────────────── */
.eco-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center; z-index: 0;
  opacity: 0; transition: opacity .9s var(--ease);
}
.eco-hero__video.is-playing { opacity: 1; }

/* ── Parallax layers ────────────────────────────────────────────────────── */
[data-parallax] { will-change: transform; }

/* ── Scroll progress bar ────────────────────────────────────────────────── */
.eco-progress {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 101;
  background: var(--grad-brand); transform-origin: 0 50%;
  transform: scaleX(0); animation: eco-progress linear;
  animation-timeline: scroll(root block);
}
@supports not (animation-timeline: scroll()) { .eco-progress { display: none; } }
@keyframes eco-progress { to { transform: scaleX(1); } }

/* ── Motion off ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .eco-reveal-on .eco-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .eco-marquee__track { animation: none; }
  .eco-progress { display: none; }
  [data-parallax] { transform: none !important; }
}

/* Decorative parallax layer inside the CTA band. */
.eco-cta__layer {
  position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(44rem 28rem at 80% 10%, rgba(255,255,255,.15), transparent 62%),
    radial-gradient(34rem 22rem at 10% 95%, rgba(120,190,255,.16), transparent 64%);
}
.eco-cta > * { position: relative; z-index: 1; }

/* ── Service cards with a photo across the top ──────────────────────────── */
.wp-block-group.eco-card--photo { --card-pad: clamp(1.5rem, 2.6vw, 2.1rem); padding-top: 0; }
/* The card keeps its padding; the figure bleeds back out to the card edges,
   which is simpler than zeroing the padding and re-padding every child. */
.eco-card--photo figure.wp-block-image {
  margin: 0 calc(var(--card-pad) * -1) var(--sp-4);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--eco-cloud);
}
.eco-card--photo figure.wp-block-image img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
  transition: transform .5s var(--ease);
}
.eco-card--photo:hover figure.wp-block-image img { transform: scale(1.04); }
.eco-card--photo .eco-card__price {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  color: var(--eco-green-dark); margin-top: auto;
}
/* The hover rule lives on ::after; keep it below the photo's rounded corners. */
.eco-card--photo::after { z-index: 2; }

/* ── Standalone prose block inside a full-width section ─────────────────── */
.wp-block-group.eco-prose,
.wp-block-group.eco-prose > .wp-block-group__inner-container {
  display: grid; gap: var(--sp-4);
}
.wp-block-group.eco-prose {
  max-width: var(--wrap-narrow); margin-inline: auto; text-align: left;
}
.eco-prose h2 { margin-top: var(--sp-5); }
.eco-prose > .wp-block-group__inner-container > h2:first-child { margin-top: 0; }
.eco-prose p { color: var(--eco-muted); margin: 0; }
.eco-prose ul { color: var(--eco-muted); padding-left: 1.25rem; margin: 0; }
.eco-prose li + li { margin-top: .35rem; }

/* A focusable scroll region needs a visible focus ring of its own. */
.eco-carousel__scroller:focus-visible {
  outline: 3px solid var(--eco-green-cta); outline-offset: 4px; border-radius: var(--radius);
}

/* ── Common mistakes ────────────────────────────────────────────────────── */
.wp-block-group.eco-mistakes,
.wp-block-group.eco-mistakes > .wp-block-group__inner-container {
  display: grid; gap: var(--sp-3);
}
.wp-block-group.eco-mistakes { max-width: var(--wrap-narrow); margin-inline: auto; text-align: left; counter-reset: mk; }
.wp-block-group.eco-mistake {
  position: relative; background: #fff; border: 1px solid var(--eco-line);
  border-left: 3px solid #E0A33A; border-radius: var(--radius);
  padding: 1.1rem 1.35rem 1.1rem 3.6rem;
}
.eco-mistake::before {
  counter-increment: mk; content: counter(mk);
  position: absolute; left: 1.1rem; top: 1.15rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(224,163,58,.16); color: #9A6410;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xs);
}
.eco-mistake h3 { font-size: var(--fs-base); margin: 0 0 .3rem; }
.eco-mistake p  { font-size: var(--fs-sm); color: var(--eco-muted); margin: 0; }

/* ── Stat band over a photograph ────────────────────────────────────────── */
.wp-block-cover.eco-statband {
  min-height: 0; padding-block: clamp(3rem, 6vw, 4.75rem);
  align-items: center;
}
.wp-block-cover.eco-statband > span.wp-block-cover__background.has-background-dim {
  display: block; opacity: 1; z-index: 1;
  background: linear-gradient(180deg, rgba(18,55,110,.92), rgba(15,32,56,.94));
}
.wp-block-cover.eco-statband .wp-block-cover__image-background { z-index: 0; }
.wp-block-cover.eco-statband > .wp-block-cover__inner-container {
  position: relative; z-index: 2;
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; color: #fff;
}
@media (min-width: 768px) {
  .wp-block-cover.eco-statband > .wp-block-cover__inner-container { width: min(100% - 4rem, var(--wrap)); }
}
.eco-statband h2 {
  color: #fff; text-align: center; font-size: var(--fs-lg);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem); max-width: 34ch;
  margin-inline: auto;
}
.eco-statband .wp-block-columns.eco-stats h3 { color: #9BE07B; }
.eco-statband .wp-block-columns.eco-stats p  { color: rgba(255,255,255,.82); }
.eco-statband .wp-block-columns.eco-stats > .wp-block-column { position: relative; }
.eco-statband .wp-block-columns.eco-stats > .wp-block-column + .wp-block-column::before {
  content: ''; position: absolute; left: calc(var(--sp-5) * -0.5); top: 12%; bottom: 12%;
  width: 1px; background: rgba(255,255,255,.16);
}
@media (max-width: 781px) {
  .eco-statband .wp-block-columns.eco-stats > .wp-block-column + .wp-block-column::before { display: none; }
}

.wp-block-buttons.eco-btns--center { justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ── FAQ: heading + help panel beside the questions ─────────────────────── */
.wp-block-columns.eco-faq__layout {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
@media (min-width: 900px) {
  .wp-block-columns.eco-faq__layout { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}
.eco-faq__layout > .wp-block-column { flex-basis: auto; width: auto; min-width: 0; }
@media (min-width: 900px) {
  .eco-faq__aside { position: sticky; top: 7.5rem; }
}
.eco-faq__aside h2 { margin-bottom: var(--sp-4); }
.eco-faq__aside > .wp-block-group__inner-container > p,
.eco-faq__aside > p { color: var(--eco-muted); margin-bottom: var(--sp-5); }

.wp-block-group.eco-faq__help {
  background: var(--grad-deep); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.6vw, 1.9rem); margin-top: var(--sp-5);
}
.eco-faq__help h3 { color: #fff; font-size: var(--fs-base); margin: 0 0 var(--sp-2); }
.eco-faq__help p  { color: rgba(255,255,255,.82); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); }
.eco-faq__help .wp-block-buttons { margin: 0; }

/* The accordion itself is no longer a narrow centred column. */
.eco-faq__layout .eco-faq,
.eco-faq__layout .eco-faq > .wp-block-group__inner-container { max-width: none; margin-inline: 0; }
.eco-faq__layout .eco-faq summary { font-size: var(--fs-md); padding-block: 1.25rem; }
.eco-faq__layout .wp-block-details[open] { border-color: rgba(58,132,31,.45); box-shadow: var(--shadow); }

/* ══════════════════════════════════════════════════════════════════════════
   Section variants
   Each section type takes a "variant" (hero, cta, faq) or "layout" (cards) in
   its JSON. Same content, different shape — so a page can be re-laid-out with
   a one-word edit instead of new markup.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: split ────────────────────────────────────────────────────────── */
.eco-herowrap--split { padding: 0; }
.wp-block-media-text.eco-hero__split {
  grid-template-columns: 1fr 1fr; gap: 0; align-items: center;
  background: var(--eco-cloud); min-height: clamp(26rem, 52vh, 38rem);
}
.eco-hero__split .wp-block-media-text__media { height: 100%; }
.eco-hero__split .wp-block-media-text__media img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none;
}
.eco-hero__split .wp-block-media-text__content {
  padding: clamp(2rem, 5vw, 4.5rem);
  width: min(100%, calc(var(--wrap) / 2));
  margin-inline-start: auto;
}
.eco-hero__split h1 { font-size: var(--fs-2xl); }
@media (max-width: 781px) {
  .wp-block-media-text.eco-hero__split { grid-template-columns: 1fr; }
  .eco-hero__split .wp-block-media-text__media { height: 16rem; }
  .eco-hero__split .wp-block-media-text__content { width: 100%; margin: 0; }
}

/* ── Hero: stacked ──────────────────────────────────────────────────────── */
.eco-herowrap--stacked { padding-block: clamp(2.5rem, 5vw, 4rem) 0; background: var(--eco-cloud); }
.eco-hero__stackedtext {
  width: min(100% - 2.5rem, 52rem); margin-inline: auto; text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.eco-hero__stackedtext h1 { font-size: var(--fs-2xl); }
.eco-hero__stackedtext p { color: var(--eco-muted); font-size: var(--fs-md); margin-inline: auto; max-width: 46ch; }
.eco-hero__stackedtext .wp-block-buttons { justify-content: center; }
.eco-herowrap--stacked figure.wp-block-image { margin: 0; }
.eco-herowrap--stacked figure.wp-block-image img {
  width: 100%; height: clamp(16rem, 42vh, 30rem); object-fit: cover; border-radius: 0;
}

/* ── Hero: card overlapping the image ───────────────────────────────────── */
.wp-block-cover.eco-hero--card { align-items: flex-end; min-height: clamp(28rem, 62vh, 42rem); }
.eco-hero--card > span.wp-block-cover__background.has-background-dim {
  background: linear-gradient(180deg, rgba(15,32,56,.10) 40%, rgba(15,32,56,.42) 100%);
}
.wp-block-group.eco-hero__card {
  background: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 34rem; box-shadow: var(--shadow-lg);
  margin-block-end: clamp(-2rem, -3vw, -3rem);
}
.eco-hero__card h1 { font-size: var(--fs-xl); }
.eco-hero__card p { color: var(--eco-muted); }

/* ── Hero: centred ──────────────────────────────────────────────────────── */
.wp-block-cover.eco-hero--centred > .wp-block-cover__inner-container { text-align: center; max-width: 46rem; }
.eco-hero--centred h1 { max-width: none; margin-inline: auto; }
.eco-hero--centred p { margin-inline: auto; }
.eco-hero--centred .wp-block-buttons { justify-content: center; }
.eco-hero--centred > span.wp-block-cover__background.has-background-dim {
  background: linear-gradient(180deg, rgba(255,255,255,.93), rgba(255,255,255,.86));
}

/* ── CTA: slim bar ──────────────────────────────────────────────────────── */
.wp-block-group.eco-cta--bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem); text-align: left;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 3.5vw, 3rem);
}
.eco-cta--bar .eco-cta__copy h2 { font-size: var(--fs-lg); margin-bottom: .35rem; }
.eco-cta--bar .eco-cta__copy p  { margin: 0; font-size: var(--fs-sm); }
.eco-cta--bar .wp-block-buttons { margin: 0; flex: 0 0 auto; }
@media (max-width: 781px) {
  .wp-block-group.eco-cta--bar { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ── CTA: with a photograph beside it ───────────────────────────────────── */
.wp-block-media-text.eco-cta__split {
  grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
  border-radius: var(--radius-lg); overflow: hidden; text-align: left;
}
.eco-cta__split .wp-block-media-text__media img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none;
}
.eco-cta__split .wp-block-media-text__content { padding: clamp(1.75rem, 3.5vw, 3rem); }
.eco-cta__split.eco-cta--image { background: var(--grad-deep); color: #fff; }
.eco-cta--image h2 { color: #fff; }
.eco-cta--image p  { color: rgba(255,255,255,.84); }
.eco-cta__split.eco-cta--outline { background: #fff; border: 1px solid var(--eco-line); }
.eco-cta--outline h2 { color: var(--eco-blue-dark); }
.eco-cta--outline p  { color: var(--eco-muted); }
.eco-cta__split .wp-block-buttons { justify-content: flex-start; }
@media (max-width: 781px) { .wp-block-media-text.eco-cta__split { grid-template-columns: 1fr; } }

/* ── CTA: full-bleed band ───────────────────────────────────────────────── */
.wp-block-group.eco-cta--wide {
  border-radius: 0; padding-block: clamp(3rem, 6vw, 5rem);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.eco-cta--wide > * { width: min(100% - 0rem, var(--wrap)); margin-inline: auto; }

/* ── Cards: heading in its own column ───────────────────────────────────── */
.wp-block-columns.eco-cards__layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  .wp-block-columns.eco-cards__layout { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .eco-cards__aside { position: sticky; top: 7.5rem; }
}
.eco-cards__layout > .wp-block-column { flex-basis: auto; width: auto; min-width: 0; }
.eco-cards__aside .eco-head { margin-bottom: 0; }

/* ── FAQ: two columns, centred, and always-open variants ────────────────── */
.wp-block-columns.eco-faq__cols { align-items: start; }
.eco-faq__cols > .wp-block-column { flex-basis: auto; width: auto; min-width: 0; }
.eco-faq__cols .eco-faq,
.eco-faq__cols .eco-faq > .wp-block-group__inner-container { max-width: none; margin-inline: 0; }

.wp-block-group.eco-faq__closer {
  text-align: center; max-width: 44rem; margin-inline: auto;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
.eco-faq__closer h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.eco-faq__closer p  { color: var(--eco-muted); margin-bottom: var(--sp-4); }
.eco-faq__closer .wp-block-buttons { justify-content: center; }

.wp-block-group.eco-qa {
  background: #fff; border: 1px solid var(--eco-line); border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.4vw, 1.85rem); height: 100%;
}
.eco-qa h3 { font-size: var(--fs-base); margin: 0 0 var(--sp-2); }
.eco-qa p  { font-size: var(--fs-sm); color: var(--eco-muted); margin: 0; }

/* ── Trust strip ─────────────────────────────────────────────────────────
   Replaces the scrolling marquee. Nothing moves, nothing is clipped, and
   every claim is readable at a glance instead of only while it passes.
   ──────────────────────────────────────────────────────────────────────── */
ul.eco-trust {
  list-style: none; margin: 0; padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.4vw, 2rem);
  display: grid; gap: clamp(.85rem, 2vw, 1.35rem) clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  background: #fff; border: 1px solid var(--eco-line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.eco-trust__item {
  display: flex; align-items: center; gap: .7rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--eco-blue-dark);
  line-height: 1.35; margin: 0;
}
.eco-trust__item svg {
  flex: 0 0 auto; width: 1.35rem; height: 1.35rem;
  min-width: 1.35rem; max-width: none; color: var(--eco-green);
}
.eco-trust__item span { min-width: 0; }

/* ── Coverage section: contain the pills, separate the facts ─────────────
   Free-floating centred pills wrap into a ragged pyramid and the facts
   underneath ran straight into them. A panel gives the pills an edge to sit
   against, and a rule separates the two halves of the section.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-group.eco-pills {
  max-width: 58rem; padding: clamp(1.1rem, 2.2vw, 1.6rem);
  background: #fff; border: 1px solid var(--eco-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.wp-block-group.eco-pills > .wp-block-group__inner-container { gap: .55rem; }
.eco-pill { border-color: #e6ecf3; background: var(--eco-cloud); }

.wp-block-columns.eco-badges {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--eco-line);
}
.wp-block-group.eco-badge { gap: .45rem; }
.eco-badge p strong { margin-bottom: .1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Services mega menu
   Opens on hover and on keyboard focus, so it is reachable without a mouse.
   Below 980px the header collapses into the drawer and the panel becomes a
   plain stacked list, because a full-width panel has nowhere to go.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 981px) {
  .eco-mega-parent { position: static; }

  .eco-mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid var(--eco-line);
    box-shadow: 0 18px 40px -18px rgba(15, 32, 56, .28);
    opacity: 0; visibility: hidden; transform: translateY(-.5rem);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 60;
  }
  .eco-mega-parent:hover > .eco-mega,
  .eco-mega-parent:focus-within > .eco-mega {
    opacity: 1; visibility: visible; transform: none;
  }

  .eco-mega__inner {
    width: min(100% - 3rem, var(--wrap)); margin-inline: auto;
    display: grid; grid-template-columns: minmax(0, 1fr) 19rem;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
  }
  .eco-mega__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem .75rem; align-content: start;
  }
}

.eco-mega__item { margin: 0; }
.eco-mega__item > a {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .7rem .8rem; border-radius: var(--radius-md);
  text-decoration: none; color: inherit;
  transition: background .15s ease;
}
.eco-mega__item > a:hover,
.eco-mega__item > a:focus-visible { background: var(--eco-cloud); }

.eco-mega__ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: var(--radius-md);
  background: rgba(76,175,42,.10); color: var(--eco-green-dark);
}
.eco-mega__ico svg { width: 1.3rem; height: 1.3rem; min-width: 1.3rem; max-width: none; }

.eco-mega__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.eco-mega__text strong {
  font-family: var(--font-display); font-size: var(--fs-base);
  color: var(--eco-blue-dark); line-height: 1.25;
}
.eco-mega__desc {
  font-size: var(--fs-xs); color: var(--eco-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.eco-mega__price {
  font-size: var(--fs-xs); font-weight: 700; color: var(--eco-green-cta); margin-top: .1rem;
}

.eco-mega__aside {
  background: var(--eco-cloud); border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  display: flex; flex-direction: column; gap: .6rem; align-self: start;
}
.eco-mega__asidetitle {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-base); color: var(--eco-blue-dark); line-height: 1.3;
}
.eco-mega__asidetext { margin: 0; font-size: var(--fs-xs); color: var(--eco-muted); line-height: 1.5; }
.eco-mega__tel {
  display: flex; align-items: center; gap: .5rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; color: var(--eco-blue-dark);
  font-size: var(--fs-sm);
}
.eco-mega__tel svg { width: 1.1rem; height: 1.1rem; min-width: 1.1rem; max-width: none; color: var(--eco-green); }
.eco-mega__tel:hover span { text-decoration: underline; }

/* Inside the mobile drawer the panel is just a stacked list. */
@media (max-width: 980px) {
  .eco-mega { display: block; }
  .eco-mega__inner { display: block; padding: 0; }
  .eco-mega__grid { list-style: none; margin: 0 0 .75rem; padding: 0; display: block; }
  .eco-mega__item > a { padding: .55rem .25rem; }
  .eco-mega__desc { display: none; }
  .eco-mega__aside { display: none; }
}

/* ── Mega menu: beat the existing nav rules ───────────────────────────────
   Three rules in the Dropdown block above outrank the mega-menu defaults and
   have to be answered at equal-or-higher specificity, not by source order:
     .eco-nav .menu-item-has-children { position: relative }  ← sized the panel
       to a 55px <li> instead of the header
     .eco-nav ul { display: flex }                            ← killed the grid
     .eco-nav a { padding / font-size } and its ::after underline
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 981px) {
  .eco-nav .eco-mega-parent { position: static; }
  .eco-nav ul.eco-mega__grid { display: grid; align-items: start; }
  .eco-nav .eco-mega { padding-inline: 0; }
}
.eco-nav .eco-mega a { padding: .7rem .8rem; font-size: inherit; font-weight: inherit; }
.eco-nav .eco-mega a::after { display: none; }
.eco-nav .eco-mega__aside a.eco-btn { padding: .8rem 1.2rem; }
.eco-nav ul.eco-mega__grid { list-style: none; margin: 0; padding: 0; }
.eco-nav .eco-mega__item { border-bottom: 0; }
/* .eco-nav a sets white-space: nowrap for the top-level bar; mega-menu
   descriptions are two-line paragraphs and must wrap. */
.eco-nav .eco-mega a { white-space: normal; }

/* ── Cards fill their grid cell ───────────────────────────────────────────
   The grid stretches each .wp-block-column to the tallest in the row, but the
   card inside sized itself to its own text, so a row of cards ended up with
   ragged bottom edges. Make the column a flex column and let the card grow.
   ──────────────────────────────────────────────────────────────────────── */
.eco-grid > .wp-block-column,
.eco-stats > .wp-block-column,
.eco-steps > .wp-block-column { display: flex; flex-direction: column; }
.eco-grid > .wp-block-column > *,
.eco-grid > .wp-block-column > .wp-block-group__inner-container { flex: 1 1 auto; }
.eco-grid .eco-card { height: 100%; }
/* Push the "Learn more" link to the bottom so links line up across a row. */
.eco-card__link { margin-top: auto; }

/* ── Grids must beat core's flex ─────────────────────────────────────────
   Core ships .wp-block-columns{display:flex;flex-wrap:nowrap} and WordPress
   inlines that AFTER the theme stylesheet, so a bare .eco-grid lost and every
   grid silently fell back to flex, ignoring the requested column count. The
   double class raises specificity to (0,2,0) so the grid actually applies.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-grid { display: grid; }
.wp-block-columns.eco-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.wp-block-columns.eco-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.wp-block-columns.eco-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.wp-block-columns.eco-grid > .wp-block-column { flex-basis: auto !important; width: auto; min-width: 0; }

/* ── Split section ───────────────────────────────────────────────────────
   The button sat flush against the last checklist item, and a studio cut-out
   on a white section had no edge to sit against. A tinted panel behind the
   image gives it one without needing a different photograph.
   ──────────────────────────────────────────────────────────────────────── */
.eco-split .wp-block-buttons { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.eco-split .wp-block-media-text__content > *:last-child { margin-bottom: 0; }
.wp-block-media-text.eco-split .wp-block-media-text__media {
  background: var(--eco-cloud); border-radius: var(--radius-lg); overflow: hidden;
}
.wp-block-media-text.eco-split .wp-block-media-text__media img {
  border-radius: var(--radius-lg);
}

/* ── Testimonial variants ────────────────────────────────────────────────
   carousel (existing) · grid · bordered · feature · stack
   ──────────────────────────────────────────────────────────────────────── */
.eco-quote__stars { margin: 0 0 var(--sp-3); color: #F5A623; letter-spacing: .12em; font-size: var(--fs-sm); }

.wp-block-group.eco-quote--bordered {
  background: transparent; border: 1px solid var(--eco-line); box-shadow: none;
}
.wp-block-group.eco-quote--lead {
  max-width: 46rem; margin-inline: auto; text-align: center;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.eco-quote--lead p:nth-of-type(1) { font-size: var(--fs-lg); line-height: 1.5; }
.eco-quote--lead .eco-quote__stars { font-size: var(--fs-base); }

/* ── Split variants ──────────────────────────────────────────────────────
   media (default) · stacked · card · wide
   ──────────────────────────────────────────────────────────────────────── */
.eco-split__head { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.wp-block-columns.eco-split__cols { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
@media (min-width: 900px) {
  .wp-block-columns.eco-split__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.eco-split__cols > .wp-block-column { flex-basis: auto; width: auto; min-width: 0; }
.eco-split__cols figure.wp-block-image { margin: 0; }
.eco-split__cols figure.wp-block-image img {
  width: 100%; height: 100%; max-height: 26rem; object-fit: cover; border-radius: var(--radius-lg);
}

.wp-block-cover.eco-split__cover { min-height: clamp(24rem, 48vh, 34rem); align-items: flex-end; }
.wp-block-group.eco-split__card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.6rem, 3vw, 2.5rem); max-width: 38rem;
  margin-block-end: clamp(-1.5rem, -2.5vw, -2.5rem);
}
.eco-split__card h2 { font-size: var(--fs-xl); }

.wp-block-media-text.eco-split--wide { grid-template-columns: 4fr 5fr; }
.eco-split--wide .wp-block-media-text__media img { max-height: 34rem; object-fit: cover; }
@media (max-width: 781px) { .wp-block-media-text.eco-split--wide { grid-template-columns: 1fr; } }

/* ── Dropdown chevron ────────────────────────────────────────────────────
   It is drawn with ::before because ::after already carries the underline,
   so it rendered to the LEFT of the label and its margin-left pushed it away
   from the label rather than towards it. Flex ordering puts it back on the
   right; the absolutely positioned underline is unaffected.
   ──────────────────────────────────────────────────────────────────────── */
.eco-nav .menu-item-has-children > a { display: inline-flex; align-items: center; gap: .45em; }
.eco-nav .menu-item-has-children > a::before { order: 1; margin-left: 0; }

/* ── Steps: joined sequence ──────────────────────────────────────────────
   The numbers alone read as four unrelated columns. A rule behind the row,
   with each number sitting on it in a filled disc, reads as one process.
   The rule is drawn on the container so it cannot fall between wrapped rows.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-steps--line { position: relative; }
@media (min-width: 900px) {
  .eco-steps--line::before {
    content: ''; position: absolute; left: 0; right: 0; top: 1.15rem;
    height: 2px; background: var(--eco-line); z-index: 0;
  }
}
.eco-steps--line > .wp-block-column { padding-top: 3.6rem; }
.wp-block-columns.eco-steps--line > .wp-block-column::before {
  display: grid; place-items: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--eco-green-cta); color: #fff;
  font-size: var(--fs-sm); font-weight: 700; z-index: 1;
}

.wp-block-columns.eco-steps--cards > .wp-block-column {
  background: #fff; border: 1px solid var(--eco-line); border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.4vw, 1.85rem); padding-top: 3.4rem;
}
.wp-block-columns.eco-steps--cards > .wp-block-column::before { top: clamp(1.35rem, 2.4vw, 1.85rem); left: clamp(1.35rem, 2.4vw, 1.85rem); }

/* Checklist without card chrome: rules instead of boxes. */
.wp-block-group.eco-checkgroup--plain {
  background: transparent; border: 0; border-top: 2px solid var(--eco-green);
  border-radius: 0; padding: var(--sp-4) 0 0;
}
.eco-checkgroup--plain h3 { border-bottom: 0; padding-bottom: 0; }

/* ── Blog post ───────────────────────────────────────────────────────────
   Photograph, then title, then body. The reading column is centred: at 760px
   inside an 1180px wrap it used to sit hard left with a dead gutter beside it.
   ──────────────────────────────────────────────────────────────────────── */
.eco-content { margin-inline: auto; }

figure.eco-postcover { margin: 0; }
.eco-postcover img {
  display: block; width: 100%;
  height: clamp(15rem, 40vh, 26rem); object-fit: cover;
}

.eco-posthead {
  max-width: var(--wrap-article); margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.eco-posthead h1 { margin: var(--sp-3) 0 var(--sp-3); }
.eco-posthead__meta { color: var(--eco-muted); font-size: var(--fs-sm); margin: 0; }

/* A slightly wider measure than the 760px used elsewhere: long Cyrillic
   articles read cramped at the narrower width. */
:root { --wrap-article: 840px; }
.eco-content { max-width: var(--wrap-article); }
.eco-content--after { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ══════════════════════════════════════════════════════════════════════════
   Surface variety
   Sixteen white sections and six pale ones is what makes a page read as
   templated. These tones give the page a rhythm without adding a single
   image request: both patterns are drawn with gradients.
   ══════════════════════════════════════════════════════════════════════════ */

/* Fine dot grid. Quiet enough to sit behind body copy. */
.eco-section--dots {
  background-color: var(--eco-cloud);
  background-image: radial-gradient(rgba(15, 32, 56, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -11px -11px;
}

/* Two soft brand-coloured light sources, bled off opposite corners. */
.eco-section--mesh {
  background:
    radial-gradient(58rem 30rem at 10% -12%, rgba(76, 175, 42, .12), transparent 60%),
    radial-gradient(48rem 28rem at 94% 6%,  rgba(29, 78, 137, .10), transparent 62%),
    var(--eco-cloud);
}

/* A hairline rule at the top of a plain section, so two white sections in a
   row still read as two sections. */
.eco-section--edge { border-top: 1px solid var(--eco-line); }

/* ── Shaped images ───────────────────────────────────────────────────────
   A plain rounded rectangle everywhere is the flattest possible choice. One
   asymmetric corner pair gives the image a deliberate silhouette while
   staying inside the existing radius scale.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-media-text.eco-split .wp-block-media-text__media img,
.eco-split__cols figure.wp-block-image img {
  border-radius: var(--radius-lg) 5.5rem var(--radius-lg) 5.5rem;
}
.wp-block-media-text.eco-split.has-media-on-the-right .wp-block-media-text__media img {
  border-radius: 5.5rem var(--radius-lg) 5.5rem var(--radius-lg);
}
@media (max-width: 781px) {
  .wp-block-media-text.eco-split .wp-block-media-text__media img,
  .eco-split__cols figure.wp-block-image img { border-radius: var(--radius-lg); }
}

/* ── Icon badge over a card photo ────────────────────────────────────────
   The chip straddles the bottom edge of the photo, which ties the image and
   the body copy together instead of stacking two unrelated rectangles.
   ──────────────────────────────────────────────────────────────────────── */
.eco-card--photo { position: relative; }
.eco-card--photo[class*="eco-ico-"]::before {
  /* Bottom-RIGHT of the photo. On the left it sat directly above the first
     word of the heading, and no amount of clearance fixes that without
     pushing the whole card body down. */
  position: absolute; z-index: 2;
  right: clamp(1.25rem, 2.2vw, 1.75rem); left: auto;
  width: 3rem; height: 3rem; background-size: 1.5rem 1.5rem;
  background-color: #fff;
  border: 1px solid var(--eco-line);
  box-shadow: var(--shadow-sm);
  margin: 0;
}

/* The badge has to know where the photo ends. A fixed photo height (rather
   than aspect-ratio) lets one custom property drive both, and it also keeps
   the cards in a row aligned when their titles wrap to different depths. */
.wp-block-group.eco-card--photo { --photo-h: clamp(10rem, 18vw, 13.5rem); }
.eco-card--photo figure.wp-block-image {
  aspect-ratio: auto; height: var(--photo-h);
  /* 1.5rem of the badge hangs below the photo; leave clearance under it. */
  margin-bottom: 2.6rem;
}
.eco-card--photo[class*="eco-ico-"]::before { top: calc(var(--photo-h) - 1.5rem); }

/* ══════════════════════════════════════════════════════════════════════════
   Decorative geometry
   One oversized shape bleeding off a section edge, drawn in CSS. It gives a
   section a focal point without an image request, and because it is tied to
   the section rather than the content it can sit behind several blocks at
   once. Purely decorative: aria-hidden by construction (a pseudo-element),
   and it never intercepts a click.
   ══════════════════════════════════════════════════════════════════════════ */
.eco-decor { position: relative; overflow: hidden; isolation: isolate; }
.eco-decor::before {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
}
/* Section content must clear the shape. */
.eco-decor > .wp-block-group__inner-container,
.eco-decor > * { position: relative; }

/* A complete ring, sitting inside the section rather than bleeding off it.
   Half a ring clipped by a section edge reads as a rendering fault; a whole
   one reads as a decision. Sized off the viewport so it stays clear of the
   measure, and vertically centred so it never lands on a heading. */
.eco-decor--ring::before {
  width: clamp(16rem, 26vw, 30rem); aspect-ratio: 1; border-radius: 50%;
  border: clamp(2.25rem, 4vw, 4rem) solid rgba(76, 175, 42, .07);
  right: clamp(.75rem, 3vw, 3.5rem);
  top: 50%; transform: translateY(-50%);
}
/* The matching ring on the other side, in the blue. */
.eco-decor--arc::before {
  width: clamp(15rem, 24vw, 28rem); aspect-ratio: 1; border-radius: 50%;
  border: clamp(2.25rem, 4vw, 4rem) solid rgba(29, 78, 137, .06);
  left: clamp(.75rem, 3vw, 3.5rem);
  bottom: clamp(1rem, 4vw, 3rem);
}
/* A filled quadrant tucked into the top-left corner. */
.eco-decor--corner::before {
  width: clamp(16rem, 26vw, 26rem); aspect-ratio: 1;
  border-radius: 0 0 100% 0;
  background: linear-gradient(135deg, rgba(76, 175, 42, .09), rgba(29, 78, 137, .05));
  left: 0; top: 0;
}
/* On a dark band the same shapes have to be light, not tinted. */
.eco-section--deep.eco-decor--ring::before,
.eco-cta.eco-decor--ring::before { border-color: rgba(255, 255, 255, .07); }
.eco-section--deep.eco-decor--arc::before { border-color: rgba(255, 255, 255, .05); }

@media (prefers-reduced-motion: no-preference) {
  .eco-decor--ring::before { transition: transform .6s var(--ease); }
}

/* ── CTA over a photograph ───────────────────────────────────────────────
   The scrim is deliberately heavy: white on a photograph has to clear 4.5:1
   at the lightest pixel, not the average one, and a cleaning photo is mostly
   highlights. Brand colour goes in as a tint on top so it still reads as ours
   rather than as a stock image with text on it.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-cover.eco-cta--photo {
  border-radius: var(--radius-lg); overflow: hidden;
  min-height: clamp(18rem, 34vh, 24rem);
  padding: clamp(2.25rem, 5vw, 3.75rem);
  align-items: center; justify-content: center;
}
.wp-block-cover.eco-cta--photo > span.wp-block-cover__background.has-background-dim {
  display: block; opacity: 1; z-index: 1;
  background:
    linear-gradient(105deg, rgba(11, 32, 58, .93) 0%, rgba(11, 32, 58, .80) 46%, rgba(20, 62, 40, .72) 100%);
}
.eco-cta--photo > .wp-block-cover__inner-container { position: relative; z-index: 2; text-align: center; }
.eco-cta--photo h2 { color: #fff; }
.eco-cta--photo p  { color: rgba(255, 255, 255, .88); max-width: 42rem; margin-inline: auto; }
.eco-cta--photo .wp-block-buttons { justify-content: center; margin-top: var(--sp-5); }

/* ── Photo band ──────────────────────────────────────────────────────────
   A breather between two runs of text. Nobody reads three text sections in a
   row, so this gives the eye somewhere to land and marks where one part of
   the page ends. Full-bleed on purpose: the width change is what registers
   as a break, more than the photograph itself.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-cover.eco-photoband {
  min-height: clamp(11rem, 26vh, 17rem);
  align-items: center; justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.wp-block-cover.eco-photoband--tall { min-height: clamp(16rem, 42vh, 27rem); }
.wp-block-cover.eco-photoband > span.wp-block-cover__background.has-background-dim {
  display: block; opacity: 1; z-index: 1;
  /* .62 is the lightest this can go and still clear 4.5:1 for white text
     over a pure-white photograph. Measured, not guessed. */
  background: linear-gradient(180deg, rgba(11, 32, 58, .52), rgba(11, 32, 58, .68));
}
.eco-photoband > .wp-block-cover__inner-container { position: relative; z-index: 2; text-align: center; }
.eco-photoband__line {
  margin: 0; color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-lg); line-height: 1.3;
  max-width: 34rem; margin-inline: auto;
  text-shadow: 0 1px 18px rgba(11, 32, 58, .45);
}
/* Slow drift on the image itself, not the section, so nothing reflows. */
@media (prefers-reduced-motion: no-preference) {
  .eco-photoband--parallax .wp-block-cover__image-background {
    transform: scale(1.12); will-change: transform;
  }
}

/* ── Photo band scrim, independent of core's dim classes ─────────────────
   bk_cover() emits has-background-dim-0, and core's `.has-background-dim-0
   {opacity:0}` is inlined after the theme. Rather than keep winning that
   fight on specificity, paint the scrim on the cover itself: nothing in core
   touches this pseudo-element, so the contrast cannot regress.
   ──────────────────────────────────────────────────────────────────────── */
/* The ::after veil that used to live here painted over the text as well as
   the photograph. The span scrim below does the job and sits under the
   inner container, where a scrim belongs. */
.eco-photoband > .wp-block-cover__inner-container { z-index: 2; }

/* ── Split: give the image its half ──────────────────────────────────────
   The media column was collapsing to its natural image width while the text
   ran on, so the two halves read as unbalanced. Equal columns, and the image
   fills its column instead of floating in it.
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 782px) {
  .wp-block-media-text.eco-split { grid-template-columns: 1fr 1fr; align-items: center; }
  .eco-split .wp-block-media-text__media { height: 100%; display: flex; }
  .eco-split .wp-block-media-text__media img {
    width: 100%; height: 100%; object-fit: cover; min-height: 22rem;
  }
}

/* ── Inner-page hero with a photograph ───────────────────────────────────
   A tinted band with a title in it is what every legal page gets. A service
   page has a photograph, so it should use it: title and CTA on one side, the
   photograph on the other, above the fold.
   ──────────────────────────────────────────────────────────────────────── */
.eco-pagehead--hero { padding-block: clamp(1.75rem, 3.5vw, 3rem) 0; overflow: hidden; }
.eco-pagehead__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .eco-pagehead--hero .eco-pagehead__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.eco-pagehead--hero .eco-pagehead__inner { padding-block: clamp(1rem, 3vw, 2.5rem); }
.eco-pagehead__cta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}
figure.eco-pagehead__media { margin: 0; align-self: stretch; display: flex; }
.eco-pagehead__media img {
  width: 100%; height: 100%; object-fit: cover;
  min-height: clamp(15rem, 34vh, 24rem);
  /* Same asymmetric silhouette as the split sections, so the page reads as
     one design rather than a hero bolted onto a template. */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@media (max-width: 899px) {
  .eco-pagehead__media img { border-radius: var(--radius-lg); }
  .eco-pagehead--hero { padding-bottom: clamp(1.5rem, 3vw, 2rem); }
}
/* The scrim must sit under the words, not over them. Core gives the inner
   container no stacking position of its own, so it has to be stated here at a
   specificity that beats the earlier rule. */
.wp-block-cover.eco-photoband > .wp-block-cover__inner-container {
  position: relative; z-index: 3;
}
.wp-block-cover.eco-photoband .eco-photoband__line { color: #fff; }

/* Two-up numbered cards, for advisory lists short enough not to need three. */
@media (min-width: 700px) {
  .wp-block-columns.eco-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The callout sat next to the mistake cards wearing the same left border in a
   different colour, so the two read as one component with a bug. It now takes
   an icon and the full measure. */
.wp-block-group.eco-callout[class*="eco-ico-"] { padding-left: clamp(4.5rem, 8vw, 5.5rem); position: relative; }
.eco-callout[class*="eco-ico-"]::before {
  position: absolute; left: clamp(1.25rem, 2.4vw, 1.75rem); top: clamp(1.35rem, 2.4vw, 1.85rem);
  width: 2.6rem; height: 2.6rem; background-size: 1.4rem 1.4rem; margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Path
   A sequence drawn as a route rather than a row of boxes: a spine down the
   middle, numbered nodes sitting on it, and the items alternating either side.
   Reads as one journey with an order, which a grid of equal cards cannot do.
   Below 800px the spine moves to the left and everything stacks beside it,
   because alternating sides needs width to make sense.
   ══════════════════════════════════════════════════════════════════════════ */
.wp-block-columns.eco-path {
  display: grid; position: relative; counter-reset: step;
  gap: clamp(1.25rem, 2.5vw, 2rem) 0;
  padding-block: var(--sp-4);
}
.eco-path > .wp-block-column {
  flex-basis: auto; width: auto; min-width: 0;
  position: relative;
  background: #fff; border: 1px solid var(--eco-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  box-shadow: var(--shadow-sm);
}
.eco-path h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
.eco-path p  { margin: 0; color: var(--eco-muted); font-size: var(--fs-sm); }

/* The numbered node. It sits on the spine, not inside the card, so the card
   text never has to leave room for it. */
.eco-path > .wp-block-column::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: clamp(1.25rem, 2.4vw, 1.75rem);
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--eco-green-cta); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  box-shadow: 0 0 0 6px #fff;
  z-index: 1;
}

@media (min-width: 800px) {
  .wp-block-columns.eco-path { grid-template-columns: 1fr 5rem 1fr; }
  /* The spine, inset so it starts and ends at a node. */
  .eco-path::before {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    top: 2.5rem; bottom: 2.5rem; width: 2px; background: var(--eco-line);
  }
  /*
   * Every item takes its own grid row and simply sits in the left or the
   * right column, which is what produces the zigzag. An earlier version tried
   * to interleave the two sides with negative margins; grid auto-placement
   * had already put each item on its own row, so the margins only pulled the
   * cards out of line with their own numbers.
   */
  /*
   * One item per row, sized to half the width and pushed left or right.
   * Placing items into two grid COLUMNS instead lets grid pair them up two to
   * a row, and then items 1 and 2 share a row, so their two nodes land on the
   * identical point of the spine and one hides the other.
   */
  .wp-block-columns.eco-path { grid-template-columns: 1fr; }
  .eco-path > .wp-block-column { width: calc(50% - 2.5rem); }
  .eco-path > .wp-block-column:nth-child(even) { margin-left: auto; }
  .eco-path > .wp-block-column:nth-child(odd)::before  { right: -3.8rem; }
  .eco-path > .wp-block-column:nth-child(even)::before { left: -3.8rem; }
}

@media (max-width: 799px) {
  .wp-block-columns.eco-path { grid-template-columns: 1fr; padding-left: 3.6rem; }
  .eco-path::before {
    content: ''; position: absolute; left: 1.3rem;
    top: 1.5rem; bottom: 1.5rem; width: 2px; background: var(--eco-line);
  }
  .eco-path > .wp-block-column::before { left: -3.9rem; }
}

/* ── Quote with a photograph beside it ───────────────────────────────────
   The dark gradient band is the page's one landmark, so the photograph joins
   it rather than replacing it: equal columns, matched heights, and the band
   keeps its own rounding on the side away from the image.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-media-text.eco-quotewrap { grid-template-columns: 1fr 1.25fr; gap: 0; align-items: stretch; }
.eco-quotewrap .wp-block-media-text__media { display: flex; }
.eco-quotewrap .wp-block-media-text__media img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.eco-quotewrap .wp-block-media-text__content { padding: 0; display: flex; }
.eco-quotewrap .eco-quotebanner { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin: 0; width: 100%; }
@media (max-width: 781px) {
  .wp-block-media-text.eco-quotewrap { grid-template-columns: 1fr; }
  .eco-quotewrap .wp-block-media-text__media img { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 15rem; }
  .eco-quotewrap .eco-quotebanner { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}
/* Body copy stays left-aligned on both sides of the path. Ragged-left text is
   harder to read, and only the card's position needs to alternate. */
.eco-path > .wp-block-column { text-align: left; }

/* Feature cards: the heading was sitting flush on the paragraph. */
.eco-feature h3 { margin-bottom: var(--sp-2); }
.eco-feature p  { margin-top: 0; }

/* ── Feature list ────────────────────────────────────────────────────────
   The same reasons, without a fourth grid of tinted boxes. The icon sits on
   the heading line rather than above it, so a row is two lines instead of
   four, and a hairline rule does the separating that a card border used to.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-featurelist { gap: 0 clamp(2rem, 4vw, 3.5rem); }
.eco-featurelist > .wp-block-column { flex-basis: auto; width: auto; min-width: 0; }
.eco-featurelist .wp-block-group.eco-feature {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--eco-line);
  padding: clamp(1.1rem, 2vw, 1.5rem) 0;
  height: auto;
}
.eco-featurelist .eco-feature:hover { background: transparent; box-shadow: none; }
/* Icon inline with the heading, not stacked above it. */
.eco-featurelist .eco-feature[class*="eco-ico-"]::before {
  width: 1.75rem; height: 1.75rem; background-size: 1.05rem 1.05rem;
  float: left; margin: .05rem .7rem 0 0;
}
.eco-featurelist .eco-feature h3 { font-size: var(--fs-base); margin-bottom: .3rem; }
.eco-featurelist .eco-feature p  { clear: both; padding-top: .1rem; }

/* The trust strip carrying a bold lead-in plus a sentence needs more room
   per item than the homepage version, which is three words a piece. */
ul.eco-trust--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.eco-trust--wide .eco-trust__item { align-items: flex-start; font-weight: 400; }
.eco-trust--wide .eco-trust__item strong { display: block; font-weight: 700; }
.eco-trust--wide .eco-trust__item svg { margin-top: .1rem; }
/* The coverage facts sit under the district panel, so they get air above and
   no second border fighting the panel's. */
ul.eco-trust--facts {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  background: transparent; border: 0; box-shadow: none; padding-inline: 0;
}

/* ── Included / not included, without the two tinted boxes ───────────────
   A green panel next to a grey one is the most recognisable generated-page
   layout in circulation. Same information, no boxes: a rule at the top of
   each column and the tick or cross doing the work.
   ──────────────────────────────────────────────────────────────────────── */
.eco-compare--plain .wp-block-group.eco-compare__col {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: var(--sp-4) 0 0;
  border-top: 2px solid var(--eco-line);
}
.eco-compare--plain .eco-compare__col--yes { border-top-color: var(--eco-green); }
.eco-compare--plain .eco-compare__col h3 { font-size: var(--fs-base); margin-bottom: var(--sp-3); }

/* ── Ghost button hover ──────────────────────────────────────────────────
   Our ghost rule only set border and text colour, so on a core button the
   parent theme's dark hover background came through underneath and produced
   a charcoal pill with green text. State the background explicitly.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-button.eco-btn--ghost > .wp-block-button__link:hover,
.wp-block-button.eco-btn--ghost > .wp-block-button__link:focus-visible {
  background: rgba(76, 175, 42, .08);
  border-color: var(--eco-green);
  color: var(--eco-green-dark);
}

/* Four short facts belong on one row, not three and a widow. */
ul.eco-trust--facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
/* A wide crop of a room photograph cuts people off at the neck when centred.
   Biasing upward keeps heads and the top of the room in frame. */
.eco-postcover img { object-position: center 28%; }

/* ══ BEGIN generated: section variant parts. Edit files in parts/, then run scripts/build-css.py ══ */

/* ── callout-aside ─────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   Advice aside
   A photograph beside a short piece of practical advice. Replaces the tinted
   icon box, which was one more box in exactly the shape the client keeps
   rejecting. Hairline frame, matched heights, photo takes the narrow half so
   the words stay in charge.
   ══════════════════════════════════════════════════════════════════════════ */
.wp-block-media-text.eco-callout-aside {
  grid-template-columns: 2fr 3fr;
  gap: 0;
  align-items: stretch !important;
  max-width: 56rem;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--eco-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.eco-callout-aside .wp-block-media-text__media {
  display: flex; margin: 0;
  /* Core puts align-self: center on the media child, which beats the
     container's stretch and left the photo floating with white above and
     below. The child's own property is the one that has to say stretch. */
  align-self: stretch;
}
.eco-callout-aside .wp-block-media-text__media img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 0; box-shadow: none; min-height: 15rem;
}
.eco-callout-aside .wp-block-media-text__content {
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.eco-callout-aside h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.eco-callout-aside p  { font-size: var(--fs-sm); color: var(--eco-ink); margin: 0 0 var(--sp-3); }
.eco-callout-aside p:last-child { margin-bottom: 0; }

@media (max-width: 781px) {
  .wp-block-media-text.eco-callout-aside { grid-template-columns: 1fr; }
  .eco-callout-aside .wp-block-media-text__media img { min-height: 11rem; max-height: 14rem; }
}

/* ── cards-bento ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   Cards — "bento" variant
   An asymmetric mosaic of six cells: text panels on a light tint and
   photographs, at three different sizes, so a card section reads as composed
   instead of as a row of equal boxes.

   Self-contained: every selector below is scoped to .eco-cards-bento or to
   the .eco-cards__* classes it owns. Nothing outside the variant is restyled.
   ========================================================================== */

/* ── The mosaic ─────────────────────────────────────────────────────────── */
/* core/columns is `display:flex` from block CSS that WordPress inlines AFTER
   the theme stylesheet, so this carries the extra class to win on
   specificity (0,2,0) rather than on source order. A bare .eco-cards-bento
   would lose and the whole mosaic would silently fall back to a flex row. */
.wp-block-columns.eco-cards-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Row height is a floor, not a fixed height: a cell whose Bulgarian copy
     runs long grows the row rather than clipping. */
  grid-auto-rows: minmax(clamp(8.5rem, 13vw, 11rem), auto);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  align-items: stretch !important;
}

/* Core still hands each column a flex-basis; harmless in a grid container,
   but zeroing it keeps devtools honest. min-width:0 is what actually
   matters — without it a long unbroken word can push a track wider than
   its share and the page starts scrolling sideways. */
.wp-block-columns.eco-cards-bento > .wp-block-column.eco-cards__cell {
  flex-basis: auto;
  width: auto;
  min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
}

/* ── The six sizes ──────────────────────────────────────────────────────── */
/* Spans only, no explicit line numbers: auto-placement tiles them into an
   exact 4 × 3 field (4 + 2 + 1 + 1 + 2 + 2 = 12 cells), and the mosaic
   survives the client reordering or adding items in the editor. */
.wp-block-columns.eco-cards-bento > .eco-cards__cell {
  grid-column: span 2;
  grid-row: span 1;
}
.wp-block-columns.eco-cards-bento > .eco-cards__cell:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.wp-block-columns.eco-cards-bento > .eco-cards__cell:nth-child(2) { grid-column: span 2; }
.wp-block-columns.eco-cards-bento > .eco-cards__cell:nth-child(3) { grid-column: span 1; }
.wp-block-columns.eco-cards-bento > .eco-cards__cell:nth-child(4) { grid-column: span 1; }
.wp-block-columns.eco-cards-bento > .eco-cards__cell:nth-child(5) { grid-column: span 2; }
.wp-block-columns.eco-cards-bento > .eco-cards__cell:nth-child(6) { grid-column: span 2; }

/* ── Text cells ─────────────────────────────────────────────────────────── */
.eco-cards-bento .eco-cards__cell--text {
  background: var(--eco-cloud);
  border: 1px solid var(--eco-line);
  padding: clamp(1.15rem, 2.2vw, 1.8rem);
  justify-content: flex-start;
}
/* The first cell is the one the eye lands on, so it gets the section's only
   accent: a flat brand rule, not a blend. */
.eco-cards-bento .eco-cards__cell--text:nth-child(1) {
  border-top: 3px solid var(--eco-green);
}
.eco-cards-bento .eco-cards__cell--text h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--eco-blue-dark);
}
.eco-cards-bento .eco-cards__cell--text:nth-child(1) h3 { font-size: var(--fs-lg); }
.eco-cards-bento .eco-cards__cell--text p {
  margin: 0;
  color: var(--eco-muted);          /* 5.1:1 on --eco-cloud */
  font-size: var(--fs-sm);
}

/* Reuse of the theme's generated icon chips: the cell carries an eco-ico-*
   class and the chip renders on ::before. Shrunk here because a 56px chip
   inside a one-cell panel leaves no room for the copy. */
.eco-cards-bento .eco-cards__cell--text::before {
  width: 40px;
  height: 40px;
  background-size: 20px 20px;
  margin-bottom: var(--sp-1);
}
.eco-cards-bento .eco-cards__cell--text:nth-child(1)::before {
  width: 56px;
  height: 56px;
  background-size: 28px 28px;
}

/* ── Photo cells ────────────────────────────────────────────────────────── */
.eco-cards-bento .eco-cards__cell--photo {
  background: var(--eco-cloud);     /* what shows while the photo loads */
  justify-content: flex-end;
  gap: 0;
}
/* The figure fills the cell instead of setting its height, so the photo takes
   whatever shape the mosaic gave it. */
.eco-cards-bento .eco-cards__cell--photo figure.eco-cards__media {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.eco-cards-bento .eco-cards__cell--photo figure.eco-cards__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Caption scrim. Flat, not a fade: the required 4.5:1 has to hold against the
   LIGHTEST pixel a photograph can put under the text, and only a uniform
   panel guarantees that. --eco-blue-dark at 72% over a pure-white pixel
   resolves to rgb(84,111,151), which is 5.1:1 against #fff; over any darker
   pixel it can only improve, and the opaque fallback below is 11.7:1. */
.eco-cards-bento .eco-cards__scrim {
  position: relative;
  z-index: 1;
  background: var(--eco-blue-dark);
  background: color-mix(in srgb, var(--eco-blue-dark) 72%, transparent);
  padding: var(--sp-4);
}
.eco-cards-bento .eco-cards__scrim h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  color: #fff;
}
.eco-cards-bento .eco-cards__scrim p {
  margin: var(--sp-1) 0 0;
  color: #fff;
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* ── Price and link ─────────────────────────────────────────────────────── */
.eco-cards-bento .eco-cards__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--eco-blue-dark);
}
.eco-cards-bento .eco-cards__link {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
}
/* green-dark, not green-cta: on the --eco-cloud tint the CTA green measures
   4.4:1 and misses AA, the darker one is 4.9:1. */
.eco-cards-bento .eco-cards__link a {
  color: var(--eco-green-dark);
  text-decoration: none;
}
.eco-cards-bento .eco-cards__link a::after { content: ' →'; }
.eco-cards-bento .eco-cards__link a:hover { text-decoration: underline; }
.eco-cards-bento .eco-cards__scrim .eco-cards__link a { color: #fff; }

/* ── Motion ─────────────────────────────────────────────────────────────── */
.eco-cards-bento .eco-cards__cell {
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
  box-shadow: var(--shadow-sm);
}
@media (prefers-reduced-motion: no-preference) {
  .eco-cards-bento .eco-cards__cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .eco-cards-bento .eco-cards__cell--photo figure.eco-cards__media img { transition: transform .5s var(--ease); }
  .eco-cards-bento .eco-cards__cell--photo:hover figure.eco-cards__media img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .eco-cards-bento .eco-cards__cell:hover { box-shadow: var(--shadow-lg); }
}

/* ── Below 1000px: two columns, one row each ────────────────────────────── */
@media (max-width: 999px) {
  .wp-block-columns.eco-cards-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-block-columns.eco-cards-bento > .eco-cards__cell:nth-child(1) { grid-row: span 1; }
  .eco-cards-bento .eco-cards__cell--photo { min-height: 14rem; }
}

/* ── Below 800px: a single column, in source order ──────────────────────── */
@media (max-width: 799px) {
  .wp-block-columns.eco-cards-bento {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  .wp-block-columns.eco-cards-bento > .eco-cards__cell,
  .wp-block-columns.eco-cards-bento > .eco-cards__cell:nth-child(1),
  .wp-block-columns.eco-cards-bento > .eco-cards__cell:nth-child(2),
  .wp-block-columns.eco-cards-bento > .eco-cards__cell:nth-child(3),
  .wp-block-columns.eco-cards-bento > .eco-cards__cell:nth-child(4),
  .wp-block-columns.eco-cards-bento > .eco-cards__cell:nth-child(5),
  .wp-block-columns.eco-cards-bento > .eco-cards__cell:nth-child(6) {
    grid-column: auto;
    grid-row: auto;
  }
  /* Nothing is stretching a photo cell any more, so it needs a shape of its
     own or it collapses to the height of its caption. */
  .eco-cards-bento .eco-cards__cell--photo {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

/* ── cta-angled ─────────────────────────────────────────────── */
/* ==========================================================================
   CTA — "angled"
   Full-bleed dark band. Photograph flush left, top to bottom of the band.
   Copy, one button, a small label and the phone number set large on the right.
   The bottom-right corner is cut at 45 degrees with clip-path, so the page
   background shows through the notch.

   Self-contained: every selector is anchored on .eco-cta-angled*, so this file
   restyles nothing else and can be dropped without touching eco-clean.css.

   THE NOTCH CAN NEVER EAT THE TEXT
   The cut is the triangle where (distance from right) + (distance from bottom)
   < --eco-ctaa-notch. The copy column carries
       padding-block-end: calc(--eco-ctaa-pad + --eco-ctaa-notch)
   and the band itself has zero padding, so the copy column's bottom edge IS
   the band's bottom edge. Every text pixel therefore sits at least
   --eco-ctaa-notch above the band's bottom, which puts it outside the triangle
   at every width, at every notch size, in both the one- and two-column shape.
   The right-hand padding is a second, looser guard; the bottom one is the
   guarantee.

   CONTRAST
   No text is ever set over the photograph — the photo owns the left half, the
   copy owns the right half of a solid band, and on narrow screens they stack
   rather than overlap. So: no scrim needed, and none faked.
   The band is --grad-deep, whose LIGHTEST stop is --eco-blue (#1B63C4),
   relative luminance 0.1314. The lightest-pixel worst case for body copy is
   rgba(255,255,255,.88) composited over it = rgb(227.6, 236.3, 247.9),
   luminance 0.8344.
       (0.8344 + 0.05) / (0.1314 + 0.05) = 0.8844 / 0.1814 = 4.87:1  → passes AA
   Pure white on the same stop is (1.05)/(0.1814) = 5.79:1. The label, phone
   number and heading are pure white; nothing on this band is lighter-weight
   than .88 white. The photo edge fade darkens toward the copy, so it only ever
   improves the join, never lightens it.
   ========================================================================== */

/* ── The band ───────────────────────────────────────────────────────────── */
.wp-block-group.eco-cta-angled {
  /* 45 degrees means the horizontal and vertical cuts are the same length. */
  --eco-ctaa-notch: clamp(2.5rem, 7vw, 8rem);
  --eco-ctaa-pad:   clamp(1.5rem, 4vw, 3.5rem);

  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0;                     /* the photo is flush; padding lives on the copy */
  color: #fff;
  background: var(--grad-deep);
  overflow: clip;                 /* clip, not hidden — never make a scroll container */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--eco-ctaa-notch)),
    calc(100% - var(--eco-ctaa-notch)) 100%,
    0 100%
  );
}

/* The seeder writes the group without an inner container, but the block editor
   adds one the moment the client re-saves the page. Neutralise both shapes. */
.eco-cta-angled > .wp-block-group__inner-container {
  margin: 0;
  padding: 0;
}

/* ── Grid ───────────────────────────────────────────────────────────────
   Core inlines .wp-block-columns{display:flex} AFTER the theme stylesheet, so
   this has to match at (0,2,0) or the grid silently falls back to flex.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-cta-angled__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  min-height: clamp(18rem, 40vw, 30rem);
  align-items: stretch !important;
}
/* Note: no `padding` here. This selector is (0,3,0) and would out-specify the
   copy column's padding below, which is what keeps the text clear of the
   notch. Padding is zeroed on the media column instead, where nothing
   competes for it. */
.wp-block-columns.eco-cta-angled__grid > .wp-block-column {
  flex-basis: auto;               /* core sets flex-basis:0 / 100%!important */
  width: auto;
  min-width: 0;
  margin: 0;
}
@media (min-width: 900px) {
  .wp-block-columns.eco-cta-angled__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ── Photograph ─────────────────────────────────────────────────────────
   The figure is absolutely positioned inside the stretched column, so the
   photo fills the band top to bottom whatever the copy's height is, without
   depending on percentage heights resolving through a grid item.
   ──────────────────────────────────────────────────────────────────────── */
.eco-cta-angled .eco-cta-angled__media {
  position: relative;
  padding: 0;
  min-height: clamp(12rem, 46vw, 20rem);
}
.eco-cta-angled .eco-cta-angled__media figure.wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
  overflow: clip;
}
.eco-cta-angled .eco-cta-angled__media figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/* Softens the seam where the photograph meets the band. Large surface, so it
   is not one of the small gradient discs the client had flattened. */
.eco-cta-angled .eco-cta-angled__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;           /* decoration must never swallow a click */
  background: linear-gradient(180deg, transparent 55%, var(--eco-blue-dark) 100%);
  opacity: .55;
}
@media (min-width: 900px) {
  .eco-cta-angled .eco-cta-angled__media::after {
    background: linear-gradient(90deg, transparent 60%, var(--eco-blue-dark) 100%);
  }
}

/* ── Copy column ────────────────────────────────────────────────────────── */
.eco-cta-angled .eco-cta-angled__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-block-start: calc(var(--eco-ctaa-pad) + var(--sp-5));
  /* The guarantee. See the note at the top of this file. */
  padding-block-end: calc(var(--eco-ctaa-pad) + var(--eco-ctaa-notch));
  padding-inline-start: var(--eco-ctaa-pad);
  /* Second guard, and it lines the copy's right edge up with the page wrap
     on wide screens. Deliberately NOT max(var(), calc(...)): Autoptimize's
     minifier on production ate that declaration together with the closing
     brace, leaving an unclosed rule that silently killed every stylesheet
     rule after this file in the bundle. A media query does the same job with
     nothing for the minifier to choke on. */
  padding-inline-end: var(--eco-ctaa-pad);
}
/* Text-only fallback (no photograph in the JSON): keep it inside the measure. */
.eco-cta-angled--flat .eco-cta-angled__body {
  max-width: var(--wrap);
  margin-inline: auto;
}

.eco-cta-angled .eco-cta-angled__copy {
  max-width: 34rem;
  min-width: 0;
}
.eco-cta-angled .eco-cta-angled__copy h2 {
  color: #fff;
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}
.eco-cta-angled .eco-cta-angled__copy > p {
  color: rgba(255, 255, 255, .88);   /* 4.87:1 on the lightest band stop */
  font-size: var(--fs-md);
  max-width: 32rem;
  margin-bottom: 0;
}

.eco-cta-angled .wp-block-buttons.eco-cta-angled__actions {
  justify-content: flex-start;
  margin-top: var(--sp-5);
  margin-bottom: 0;
}

/* ── Label and phone number ─────────────────────────────────────────────── */
.eco-cta-angled .eco-cta-angled__label {
  margin: var(--sp-6) 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;                       /* 5.79:1 on the lightest band stop */
}
.eco-cta-angled .eco-cta-angled__phone {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (min-width: 640px) {
  .eco-cta-angled .eco-cta-angled__phone { font-size: var(--fs-xl); }
}
.eco-cta-angled .eco-cta-angled__phone a {
  color: #fff;
  text-decoration: none;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.eco-cta-angled .eco-cta-angled__phone a:hover,
.eco-cta-angled .eco-cta-angled__phone a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* ── Buttons on a dark ground ───────────────────────────────────────────
   The theme's dark-band button treatment is keyed to .eco-cta / .eco-section
   --deep, neither of which this band carries. Repeat it inside our own scope
   at (0,4,0) so it beats the light default at (0,3,0).
   ──────────────────────────────────────────────────────────────────────── */
.eco-cta-angled .wp-block-button.eco-btn--ghost > .wp-block-button__link {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
  backdrop-filter: none;
}
.eco-cta-angled .wp-block-button.eco-btn--ghost > .wp-block-button__link:hover,
.eco-cta-angled .wp-block-button.eco-btn--ghost > .wp-block-button__link:focus-visible {
  background: rgba(255, 255, 255, .24);
  border-color: #fff;
  color: #fff;
}

/* ── Motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .eco-cta-angled .eco-cta-angled__phone a {
    transition: text-decoration-color .25s var(--ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  .eco-cta-angled .eco-cta-angled__phone a { transition: none; }
  /* The theme lifts primary buttons 2px on hover; that is motion. */
  .eco-cta-angled .wp-block-button > .wp-block-button__link:hover { transform: none; }
}

/* ── No clip-path support ───────────────────────────────────────────────── */
@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%)) {
  .wp-block-group.eco-cta-angled { clip-path: none; }
}

/* Above the wrap plus breathing room, the copy's right edge follows the page
   gutter instead of the fixed pad. 1320px: --wrap is 1180px, so the gutter
   ((100vw - 1180px) / 2) exceeds the pad from here up. */
@media (min-width: 1320px) {
  .eco-cta-angled .eco-cta-angled__body {
    padding-inline-end: calc((100vw - var(--wrap)) / 2);
  }
}

/* ── faq-grid ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   FAQ — "grid" variant
   Bordered boxes, three across, every answer already visible. Built for a
   page whose answers run a line or two; the two-col accordion stays the
   default where eighteen long questions would otherwise become a wall.

   Self-contained on purpose: every selector below is anchored on
   .eco-faq-grid or .eco-faq__box, so this file restyles nothing else and can
   load in any order relative to eco-clean.css.
   ========================================================================== */

/* ── The grid ────────────────────────────────────────────────────────────
   Core ships .wp-block-columns{display:flex} and WordPress inlines it AFTER
   the theme stylesheet, so a single class loses on source order however late
   this file is enqueued. The pair .wp-block-columns.eco-faq-grid scores
   (0,2,0) and wins on specificity instead — the same trick the other grids
   in this theme carry.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-faq-grid {
  display: grid;
  /* Fixed column counts rather than auto-fit: with auto-fit six boxes can
     land 4+2 at some widths, and rows have to come out even. */
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  align-items: stretch !important;
}

@media (min-width: 600px) {
  .wp-block-columns.eco-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .wp-block-columns.eco-faq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wp-block-columns.eco-faq-grid > .wp-block-column {
  /* Core's own .wp-block-columns > .wp-block-column{flex-basis:0} ties at
     (0,2,0) and is inlined later, so this one needs the !important. */
  flex-basis: auto !important;
  width: auto;
  /* Bulgarian question wording is long; without this the track refuses to
     shrink and the page scrolls sideways at 375px. */
  min-width: 0;
  /* Column is the grid cell, box is inside it: make the column a flex column
     so the box can stretch and every box in a row ends level. */
  display: flex;
  flex-direction: column;
}

/* Both group shapes: WordPress may wrap a group's children in
   .wp-block-group__inner-container, in which case that wrapper is what sits
   in the column. */
.wp-block-columns.eco-faq-grid > .wp-block-column > * { flex: 1 1 auto; }

/* ── The box ─────────────────────────────────────────────────────────────
   No fill. The outline reads as one set against whatever tone the section
   carries, which is also what keeps it right on `cloud`, `dots` and `mesh`
   without a per-tone background rule.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-group.eco-faq__box {
  height: 100%;
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  border: 1px solid var(--eco-line);
  border-radius: var(--radius-lg);
  background: transparent;
  overflow-wrap: break-word;
  hyphens: manual;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.wp-block-group.eco-faq__box:hover {
  border-color: var(--eco-green);
  box-shadow: var(--shadow-sm);
}

.eco-faq__box > .wp-block-group__inner-container > *:last-child,
.eco-faq__box > *:last-child { margin-bottom: 0; }

/* Question: bold, on top. Set at body size — an h3 at --fs-lg in a box this
   narrow wraps to four lines and stops looking like a question. */
.eco-faq__box .eco-faq__q {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--eco-blue-dark);
}

.eco-faq__box .eco-faq__a {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--eco-muted);
}

/* ── Dark section tone ───────────────────────────────────────────────────
   On `deep` the section text is already white and --eco-line all but
   vanishes, so the outline and the answer switch to translucent white.
   `inherit` on the question rather than a colour of its own: the section has
   set the right one, and this selector would otherwise beat it.
   ──────────────────────────────────────────────────────────────────────── */
.eco-section--deep .wp-block-group.eco-faq__box { border-color: rgba(255, 255, 255, .28); }
.eco-section--deep .wp-block-group.eco-faq__box:hover { border-color: rgba(255, 255, 255, .55); box-shadow: none; }
.eco-section--deep .eco-faq__box .eco-faq__q { color: inherit; }
.eco-section--deep .eco-faq__box .eco-faq__a { color: rgba(255, 255, 255, .82); }

@media (prefers-reduced-motion: reduce) {
  .wp-block-group.eco-faq__box { transition: none; }
}

/* ── features-dark ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   Features — "dark" variant
   Heading and a bolder sub-headline on the section's light ground, then four
   dark cards in a 2x2. Each card: a filled green disc at the top left, the
   card heading beside it on the same line, the paragraph below across the
   full card width.
   Self-contained. Every selector is anchored on a class this variant emits.
   ========================================================================== */

/* ── Section head ────────────────────────────────────────────────────────
   Left aligned, not centred. A centred heading over an even grid of cards is
   the single most template-looking arrangement on the site, and the standing
   brief is that sameness is the tell.
   ─────────────────────────────────────────────────────────────────────── */
.eco-features-dark__head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.eco-features-dark__h2 {
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}

/* "Bolder sub-headline": it carries the ink colour and 600 weight rather than
   the muted-grey lead used elsewhere. The h2 still dominates, by scale —
   --fs-xl against --fs-md at 800 against 600. */
.eco-features-dark__lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--eco-blue-dark);
  max-width: 40rem;
  text-wrap: pretty;
}

/* ── The 2x2 ─────────────────────────────────────────────────────────────
   Core ships .wp-block-columns{display:flex} and WordPress inlines it AFTER
   the theme stylesheet, so the double class is what makes this a grid at all;
   a bare .eco-features-dark__grid would silently stay flex.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-features-dark__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--sp-4), 2.4vw, var(--sp-5));
  align-items: stretch !important;
}

/* Two up above 800px, one column below it, per the brief. Explicit tracks,
   not auto-fit: a fifth item has to start a third row of two, never a row of
   three, because the client's standing note is "six cards is 3+3, not 4+2". */
@media (min-width: 800px) {
  .wp-block-columns.eco-features-dark__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Core sets flex-basis:100%!important below 782px and flex-basis:0!important
   above it, so this needs the !important to win — the grid ignores flex-basis
   but the declared width would still fight the track. min-width:0 is what
   lets a long Bulgarian word wrap instead of pushing the page sideways. */
.wp-block-columns.eco-features-dark__grid > .wp-block-column {
  flex-basis: auto !important;
  width: auto;
  min-width: 0;
  display: flex;
}

/* ── The card ────────────────────────────────────────────────────────────
   Two shapes are handled everywhere below. The seeder writes a group's
   children directly inside .wp-block-group; WordPress re-saving that group
   from the editor wraps them in .wp-block-group__inner-container, and a
   layout rule set on the group would then style that one wrapper instead of
   the badge, heading and paragraph.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-group.eco-features-dark__card {
  position: relative;
  isolation: isolate;          /* so the decorative ::before can sit at z-index
                                  -1: above the card's own background, below
                                  every word of text. */
  overflow: hidden;            /* clips the corner light to the radius */
  width: 100%;
  height: 100%;
  padding: clamp(var(--sp-5), 3.2vw, var(--sp-7));
  border-radius: var(--radius-lg);
  background-color: var(--eco-blue-dark);
  box-shadow: var(--shadow-lg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

/* The layout itself, on whichever element actually holds the children. */
.wp-block-group.eco-features-dark__card,
.wp-block-group.eco-features-dark__card > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  row-gap: var(--sp-4);
  align-items: center;
  align-content: start;
}

/* When the wrapper is present it becomes the only child of the outer grid, so
   it takes both tracks and the full card height, and the real two-column
   layout happens one level down. */
.wp-block-group.eco-features-dark__card > .wp-block-group__inner-container {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: stretch;
  height: 100%;
}

/* One soft brand-coloured light source in the top corner, so four dark cards
   in a row are not four identical rectangles. Drawn on a pseudo-element that
   fills the whole card, which is far bigger than 4rem. */
.eco-features-dark__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 88% -10%, var(--eco-green) 0%, transparent 62%);
  opacity: .16;
}

.eco-features-dark__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), var(--shadow-sm);
}

/* ── The badge ───────────────────────────────────────────────────────────
   The shared eco-ico-* chip paints a dark green glyph (#2E7D14, baked into
   the data URI) on a pale green tint. On this card that glyph would sit at
   1.1:1 against a green fill and vanish. So the disc is this element and the
   glyph is its ::before, with its own tint removed and the artwork flipped to
   white by the filter — the only way to recolour a background-image without
   duplicating every icon path out of inc/icons.php.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-group.eco-features-dark__badge {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 3rem;
  height: 3rem;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  background-color: var(--eco-green-cta);
}

/* The badge group is written empty; if the editor ever re-saves it with a
   wrapper, that wrapper must not push the disc open. */
.wp-block-group.eco-features-dark__badge > .wp-block-group__inner-container {
  display: none;
}

/* Two classes, deliberately: the generated [class*="eco-ico-"]::before chip is
   also (0,1,0), so a single class here would be decided by load order alone. */
.wp-block-group.eco-features-dark__badge::before {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  border-radius: 0;
  background-color: transparent;
  background-size: 1.5rem 1.5rem;
  /* brightness(0) flattens the artwork to black, invert(1) lifts it to white;
     alpha is untouched, so only the strokes are painted. The disc colour is
     on the parent and never passes through this filter. */
  filter: brightness(0) invert(1);
}

/* ── Card text ───────────────────────────────────────────────────────────── */
.eco-features-dark__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.25;
  color: var(--eco-cloud);
  text-wrap: balance;
}

.eco-features-dark__text {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  /* Stepped back from the heading by mixing the card ground back in, so the
     two do not read at the same volume. The plain --eco-cloud first line is
     the fallback wherever color-mix is unsupported; it is the lighter of the
     two, so the fallback path cannot be the one that fails contrast. */
  color: var(--eco-cloud);
  color: color-mix(in srgb, var(--eco-cloud) 78%, var(--eco-blue-dark));
  text-wrap: pretty;
}

/* ── Narrow screens ──────────────────────────────────────────────────────
   At 375px the disc drops to 2.5rem so the heading beside it keeps a usable
   measure and stays on the badge's line instead of wrapping under it.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .wp-block-group.eco-features-dark__badge { width: 2.5rem; height: 2.5rem; }
  .wp-block-group.eco-features-dark__badge::before {
    width: 1.25rem; height: 1.25rem; background-size: 1.25rem 1.25rem;
  }
}

/* ── Motion ──────────────────────────────────────────────────────────────
   The hover lift is the only movement in this file.
   ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wp-block-group.eco-features-dark__card,
  .eco-features-dark__card:hover {
    transition: none;
    transform: none;
  }
}

/* ── features-panel ─────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   features / variant: "panel"
   Four icon cards in a staggered 2x2 on the left, the section's heading, copy
   and CTA in a panel on the right. Self-contained: every selector below is
   anchored on .eco-features__* or .eco-features-panel, so nothing else on the
   site changes when this file loads.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The two-column shell ───────────────────────────────────────────────── */
/* Core's .wp-block-columns{display:flex} is inlined AFTER the theme sheet, so
   a bare .eco-features__panelwrap would lose and the grid would silently fall
   back to flex. Pairing the block class with ours matches at (0,2,0). */
.wp-block-columns.eco-features__panelwrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: start !important;
  margin-block: 0;
}
.eco-features__panelwrap > .wp-block-column {
  flex-basis: auto; width: auto; min-width: 0;
}

@media (min-width: 980px) {
  .wp-block-columns.eco-features__panelwrap {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
  /* The panel is first in the markup so the h2 precedes the cards it labels.
     Explicit placement puts it on the right without an `order` shuffle, which
     would leave the reading order and the visual order disagreeing. */
  .eco-features__panelwrap > .eco-features__cardscol { grid-column: 1; grid-row: 1; }
  .eco-features__panelwrap > .eco-features-panel     { grid-column: 2; grid-row: 1; }
}

/* ── The staggered 2x2 ──────────────────────────────────────────────────── */
.wp-block-columns.eco-features__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.2vw, 1.5rem);
  margin-block: 0;
}
.eco-features__grid > .wp-block-column {
  flex-basis: auto; width: auto; min-width: 0;
}

/* One column below this: at 375px two cards would leave ~140px of text
   measure, which is narrower than the shortest card heading. */
@media (min-width: 560px) {
  .wp-block-columns.eco-features__grid {
    --eco-features-step: clamp(1.5rem, 3vw, 3rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* The offset is reserved as padding because the stagger below is drawn
       with `translate`, which takes no space of its own. */
    padding-block-end: var(--eco-features-step);
  }
  /* Offsetting the second column with margin-block-start instead would grow
     row one, which opens the same gap inside the LEFT column and reads as a
     mistake rather than a rhythm. `translate` moves the paint only, so both
     columns keep an even internal gap. Cards in a row still share a height. */
  .eco-features__grid > .wp-block-column:nth-child(2n) {
    translate: 0 var(--eco-features-step);
  }
}

/* ── The card ───────────────────────────────────────────────────────────── */
/* WordPress wraps a group's children in .wp-block-group__inner-container, so
   the column layout has to be declared on whichever of the two is actually
   holding the heading and the paragraph. */
.wp-block-group.eco-features__card,
.wp-block-group.eco-features__card > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.wp-block-group.eco-features__card {
  height: 100%;
  background: var(--eco-cloud);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.wp-block-group.eco-features__card > .wp-block-group__inner-container { flex: 1 1 auto; }
.eco-features__card:hover { border-color: var(--eco-green); box-shadow: var(--shadow-sm); }

/* The shared icon chip already carries its own bottom margin; the flex gap
   above supplies that spacing here, and two of them stack up visibly. */
.eco-features__card::before { margin-bottom: 0; }

.eco-features__card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: 1.3;
  margin: 0;
  overflow-wrap: break-word;
}
.eco-features__card p {
  font-size: var(--fs-sm);
  color: var(--eco-muted);
  margin: 0;
  overflow-wrap: break-word;
}

/* ── The panel ──────────────────────────────────────────────────────────── */
.wp-block-column.eco-features-panel { align-self: start; }

@media (min-width: 980px) {
  /* The panel is the shorter column, so it can follow the cards down. */
  .wp-block-column.eco-features-panel { position: sticky; top: 7.5rem; }
}

.eco-features-panel h2 {
  font-size: var(--fs-xl);
  line-height: 1.15;
  margin: 0 0 var(--sp-4);
  overflow-wrap: break-word;
}
.eco-features-panel p:not(.eco-features__eyebrow) {
  color: var(--eco-muted);
  font-size: var(--fs-md);
  max-width: 42ch;
  margin: 0 0 var(--sp-5);
}

.eco-features__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--eco-green-cta);
  margin: 0 0 var(--sp-3);
}
/* A flat rule, not the brand gradient: the client had two-colour blends taken
   off every small element, and 26x2px is smaller than the numbered discs were. */
.eco-features__eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--eco-green-cta);
}

/* A CTA flush against the copy above it looks broken; the paragraph's
   margin-block-end carries the gap, so the buttons add none of their own. */
.eco-features-panel .wp-block-buttons.eco-features__cta {
  margin-block: 0;
  gap: var(--sp-3);
}

/* ── On a deep section ──────────────────────────────────────────────────── */
/* .eco-section--deep sets colour:#fff on the whole section, which would put
   white headings on the light card tint. The tint has to invert with it. */
.eco-section--deep .wp-block-group.eco-features__card {
  background: rgba(255, 255, 255, .07);
}
.eco-section--deep .eco-features__card:hover {
  border-color: rgba(255, 255, 255, .35);
}
/* .88 white, not .78: measured against --eco-blue (#1B63C4), the lightest
   stop of --grad-deep, that is 4.8:1. Against the .07 card tint over the same
   stop it is 4.7:1. Both clear 4.5:1. */
.eco-section--deep .eco-features__card p,
.eco-section--deep .eco-features-panel p:not(.eco-features__eyebrow) {
  color: rgba(255, 255, 255, .88);
}
/* Inherit the section's white rather than the brand green, which reads at
   2.0:1 on the light end of that gradient. */
.eco-section--deep .eco-features__eyebrow { color: inherit; }
.eco-section--deep .eco-features__eyebrow::before { background: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .wp-block-group.eco-features__card { transition: none; }
}

/* ── longform-fold ─────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   Folded long-form prose
   Native <details>: no JS, keyboard and screen-reader behaviour for free,
   and the content stays in the DOM for search engines. The summary is styled
   as a ghost button; the two labels swap on [open].
   ══════════════════════════════════════════════════════════════════════════ */
.eco-longform-fold { max-width: var(--wrap-narrow); margin-inline: auto; }

.eco-longform-fold__summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-inline: auto;
  padding: .75rem 1.5rem;
  border: 1.5px solid var(--eco-green-cta);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--eco-green-dark);
  transition: background .15s var(--ease);
}
/* Center the pill: summary is the details' first child, so text-align on the
   parent is the only handle that works in both group shapes. */
.eco-longform-fold { text-align: center; }
.eco-longform-fold > .eco-longform { text-align: left; }

/* The teaser: the first topic, always visible, sitting above the pill. */
.eco-longform--teaser {
  max-width: var(--wrap-narrow); margin: 0 auto var(--sp-6);
  text-align: left;
}

.eco-longform-fold__summary::-webkit-details-marker { display: none; }
.eco-longform-fold__summary::after {
  content: '';
  width: .5em; height: .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s var(--ease);
}
.eco-longform-fold__summary:hover,
.eco-longform-fold__summary:focus-visible { background: rgba(76, 175, 42, .08); }

.eco-longform-fold__less { display: none; }
.eco-longform-fold[open] .eco-longform-fold__less { display: inline; }
.eco-longform-fold[open] .eco-longform-fold__more { display: none; }
.eco-longform-fold[open] .eco-longform-fold__summary::after { transform: rotate(-135deg) translateY(-2px); }
.eco-longform-fold[open] > .eco-longform { margin-top: var(--sp-6); }

@media (prefers-reduced-motion: reduce) {
  .eco-longform-fold__summary::after { transition: none; }
}

/* ── post-author ─────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   Author box
   Sits under a blog post. Portrait, name, short bio, on a light panel.
   Renders nothing unless the author has a description, so an empty WordPress
   profile cannot leave a blank card on the page.
   ══════════════════════════════════════════════════════════════════════════ */
.eco-author {
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  background: var(--eco-cloud); border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.8vw, 2rem);
  max-width: var(--wrap-article); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}
.eco-author__avatar {
  width: clamp(4.5rem, 9vw, 6.25rem); aspect-ratio: 1;
  border-radius: var(--radius-md); object-fit: cover; display: block;
}
.eco-author__name {
  margin: 0 0 var(--sp-2); font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-base); color: var(--eco-blue-dark);
}
.eco-author__bio { margin: 0; color: var(--eco-muted); font-size: var(--fs-sm); line-height: 1.6; }

@media (max-width: 560px) {
  .eco-author { grid-template-columns: 1fr; }
  .eco-author__avatar { width: 4.5rem; }
}

/* ── posthead-split ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   Blog post header — "split" variant
   Emitted by eco_post_header_split() from single.php, not by ec_section().
   Left: a very large title, the date beneath it, then the category chips.
   Right: one large photograph on a small radius.
   Below 900px the photograph moves above the text, which keeps the order the
   client asked for on a phone: photograph, then title, then the body.
   The reading column below (.eco-content) is untouched by this file.
   Self-contained. Every selector is anchored on a class this variant emits.
   ========================================================================== */

/* ── The band ────────────────────────────────────────────────────────────
   A cloud tint, so the header reads as its own object and the white reading
   column below starts cleanly. The old tinted band looked broken because a
   760px column left a dead gutter beside it; here the photograph fills that
   side, so nothing is left empty.
   ─────────────────────────────────────────────────────────────────────── */
.eco-posthead-split {
  background: var(--eco-cloud);
  padding-block: clamp(var(--sp-5), 4vw, var(--sp-8));
}

/* eco_breadcrumbs() prints its own .eco-wrap, so it is called outside the
   grid below and needs no width correction. Only its rhythm is adjusted. */
.eco-posthead-split > .eco-crumbs {
  padding-top: 0;
  padding-bottom: clamp(var(--sp-4), 2vw, var(--sp-5));
}

/* ── The two columns ─────────────────────────────────────────────────────
   Named areas rather than `order`, so the photograph-above-text swap is one
   declaration and the DOM keeps the title first for a screen reader.
   minmax(0, …) on both tracks is what lets a long Bulgarian word wrap
   instead of widening the track and pushing the page sideways.
   ─────────────────────────────────────────────────────────────────────── */
.eco-posthead-split__inner {
  display: grid;
  grid-template-areas:
    "media"
    "text";
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  align-items: center;
}
@media (min-width: 900px) {
  .eco-posthead-split__inner {
    grid-template-areas: "text media";
    /* The title column takes the larger share: it is the loudest thing on the
       page and needs three or four words a line, not two. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  }
}

.eco-posthead-split__text {
  grid-area: text;
  min-width: 0;
  position: relative;
}

/* Decorative accent above the title. Solid brand green, no gradient: a 4px
   bar is far under the 4rem floor where a gradient would only band. */
.eco-posthead-split__text::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-bottom: var(--sp-4);
  background: var(--eco-green);
  border-radius: 2px;
  pointer-events: none;
}

/* ── Title ───────────────────────────────────────────────────────────────
   Deliberately one step above the site's h1 on desktop. It steps back down
   below 900px, where the same size beside a 335px measure would leave three
   words a line and a very ragged rag.
   ─────────────────────────────────────────────────────────────────────── */
.eco-posthead-split__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--eco-blue-dark);
  margin: 0;
  text-wrap: balance;
  /* Long compounds ("Микробиологично") must break rather than overflow. */
  overflow-wrap: break-word;
  hyphens: manual;
}
@media (min-width: 900px) {
  .eco-posthead-split__title { font-size: var(--fs-3xl); }
}

/* ── Date ────────────────────────────────────────────────────────────────── */
.eco-posthead-split__date {
  display: block;
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--eco-muted);
  letter-spacing: 0.01em;
}

/* ── Category chips ──────────────────────────────────────────────────────
   White on --eco-green-cta, not on --eco-green: the lighter brand green is a
   2.8:1 pairing with white and fails badly at chip size. The CTA green is the
   same brand hue at an AA-safe lightness (4.67:1), which is what the button
   set already uses for white text.
   ─────────────────────────────────────────────────────────────────────── */
.eco-posthead-split__cats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
  padding: 0;
}
.eco-posthead-split__cats li { margin: 0; }

.eco-posthead-split__chip {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  background: var(--eco-green-cta);
  color: #fff;
  border-radius: calc(var(--radius-lg) / 3);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  /* A chip is never wider than the column it sits in. */
  max-width: 100%;
  overflow-wrap: break-word;
  transition: background-color 0.18s var(--ease);
}
.eco-posthead-split__chip:hover,
.eco-posthead-split__chip:focus-visible {
  background: var(--eco-green-dark);
  color: #fff;
  text-decoration: none;
}

/* ── The photograph ──────────────────────────────────────────────────────
   A small radius, deliberately: everything else on the site is a 24px
   rounded rectangle, and the point of this header is that it does not look
   like every other block. Derived from --radius-lg so it tracks any future
   change to the scale instead of hard-coding 12px.
   ─────────────────────────────────────────────────────────────────────── */
.eco-posthead-split__media {
  grid-area: media;
  min-width: 0;
  margin: 0;
  border-radius: calc(var(--radius-lg) / 2);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--eco-line); /* holds the frame while the image decodes */
}
.eco-posthead-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  /* 3:2 on a phone, squarer beside the title on desktop. Both crop lightly
     out of the 16:9 eco_wide file rather than cutting it in half. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 40%;
}
@media (min-width: 900px) {
  .eco-posthead-split__media img { aspect-ratio: 4 / 3; }
}

/* A post with no featured image: the text takes the full width and keeps the
   same measure as the reading column below it. */
.eco-posthead-split--nomedia .eco-posthead-split__inner {
  grid-template-areas: "text";
  grid-template-columns: minmax(0, 1fr);
}
.eco-posthead-split--nomedia .eco-posthead-split__text { max-width: 34rem; }

/* ── Motion ──────────────────────────────────────────────────────────────
   The only transition here is the chip hover colour; it is switched off
   along with anything the shared reveal observer might later attach.
   ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .eco-posthead-split,
  .eco-posthead-split__text,
  .eco-posthead-split__media,
  .eco-posthead-split__chip {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ── pricing-card ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   Pricing card — the "card" variant of the `table` section.

   Heading and intro on the left, one bordered price card on the right, built
   from the rows the table already carries. Self-contained: every selector's
   subject is an eco-pricing__* or eco-pricing-card class, so this file can be
   added or dropped without touching anything else in the system.
   ========================================================================== */

/* ── Layout: intro beside the card ───────────────────────────────────────
   Core ships .wp-block-columns{display:flex;flex-wrap:nowrap} and WordPress
   inlines it AFTER the theme stylesheet, so a single class loses the cascade
   and the grid silently falls back to flex. The doubled class takes this to
   (0,2,0), which wins.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-pricing__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
}

/* Core writes flex-basis onto every column; inside a grid it fights the track
   sizes, and min-width:0 is what stops a long Bulgarian word widening the
   track and pushing the page sideways. Centring is set per item because core
   ships .wp-block-columns{align-items:norma !importantl!important}, which no
   align-items of ours can beat. */
.wp-block-columns.eco-pricing__layout > .wp-block-column {
  flex-basis: auto !important;
  width: auto;
  min-width: 0;
  align-self: center;
}

@media (min-width: 880px) {
  .wp-block-columns.eco-pricing__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  }
}

/* The section heading normally reserves space for the block beneath it. Here
   the card sits beside it, not under it, so that gap is the column gap's job. */
.eco-pricing__intro > * { margin-bottom: 0; }
.eco-pricing__intro > * + * { margin-top: var(--sp-5); }

/* ── The card ────────────────────────────────────────────────────────────
   WordPress wraps a group's children in .wp-block-group__inner-container the
   moment the client re-saves the page in the editor, so the seeded shape and
   the re-saved shape both have to lay the card out.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-group.eco-pricing-card {
  /* White rather than a tint: the card has to read as raised on a plain
     section and on a --eco-cloud, dots or mesh one alike. */
  --eco-pricing-surface: white;

  container-type: inline-size;
  container-name: eco-pricing-card;

  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  background: var(--eco-pricing-surface);
  border: 1px solid var(--eco-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* Set explicitly so the card keeps its own colour scheme even when the
     surrounding section is a dark tone. */
  color: var(--eco-ink);
}

.wp-block-group.eco-pricing-card > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  height: 100%;
}

/* ── Top row: icon and price ─────────────────────────────────────────────
   The icon is the theme's generated eco-ico-* chip on this group, so no new
   image and no second icon set.

   Below 18rem of card — a 375px screen leaves 285px — the price drops under
   the icon and both read from the left. Forcing the wireframe's icon-left /
   price-right row at that width breaks a unit like "На апартамент / месец"
   into three lines and leaves a hole in the middle of the row.
   ──────────────────────────────────────────────────────────────────────── */
.eco-pricing-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-3) var(--sp-4);
}

/* The chip is stacked above a card title everywhere else, so it carries a
   bottom margin and a 56px box. Beside a price it wants neither. */
.eco-pricing-card .eco-pricing-card__top::before {
  width: 44px;
  height: 44px;
  background-size: 22px 22px;
  border-radius: var(--radius-sm);
  margin-bottom: 0;
}

.wp-block-group.eco-pricing-card .eco-pricing-card__price {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-2);
}

/* The re-saved shape: the price paragraph is one level deeper, so the wrapper
   is what has to carry the row behaviour. */
.eco-pricing-card__top > .wp-block-group__inner-container {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
}

.eco-pricing-card__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--eco-blue-dark);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.eco-pricing-card__unit {
  max-width: 9rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--eco-muted);
}

/* Wide enough for the wireframe's row: icon top-left, price top-right, with
   margin-left:auto rather than space-between so the two stay together when
   the unit wraps. */
@container eco-pricing-card (min-width: 18rem) {
  .eco-pricing-card__top { flex-wrap: nowrap; }

  .wp-block-group.eco-pricing-card .eco-pricing-card__price,
  .eco-pricing-card__top > .wp-block-group__inner-container {
    flex: 0 1 auto;
    margin-left: auto;
    justify-content: flex-end;
    text-align: right;
  }

  .eco-pricing-card__unit { text-align: right; }
}

/* ── Label and description ───────────────────────────────────────────── */
/* (0,2,0) so the card keeps its ink colour under .eco-section--deep h3. */
.wp-block-group.eco-pricing-card .eco-pricing-card__label {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--eco-blue-dark);
}

.wp-block-group.eco-pricing-card .eco-pricing-card__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--eco-muted);
}

/* ── Ticked feature list ─────────────────────────────────────────────────
   The ticks come from the shared .is-style-eco-checks style; only the column
   count is set here, at (0,2,0) so it outranks that style's single column.
   Measured against the CARD, not the viewport: the card is a fixed 30rem
   track on desktop and full width below 880px, so a viewport query would get
   the middle sizes wrong in both directions. 18rem of card is two columns of
   roughly 130px of text, which is where a short label still reads; a 375px
   screen leaves 285px and stays single column.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-list.eco-pricing-card__features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
  font-size: var(--fs-sm);
}

@container eco-pricing-card (min-width: 18rem) {
  .wp-block-list.eco-pricing-card__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Without container query support the card still reads, one column deep. Give
   it the two columns back from the width where the card is certainly wide
   enough, whether it is full width or already in its own track. */
@supports not (container-type: inline-size) {
  @media (min-width: 620px) {
    .wp-block-list.eco-pricing-card__features {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

.eco-pricing-card__feature {
  display: block;
  font-weight: 600;
  color: var(--eco-ink);
}

/* The row's number sits under its label rather than beside it: two columns of
   label-plus-value on one line is what forces sideways scroll at 375px. */
.eco-pricing-card__value {
  display: block;
  font-size: var(--fs-xs);
  color: var(--eco-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Full-width call to action ───────────────────────────────────────────
   margin-top:auto keeps the button on the card's bottom edge when the card is
   stretched by a taller neighbour; the padding is the breathing room the
   client asked for, since a CTA flush against the list above it looks broken.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-buttons.eco-pricing-card__cta {
  display: flex;
  margin-top: auto;
  padding-top: var(--sp-2);
}

.eco-pricing-card__cta .wp-block-button {
  width: 100%;
}

/* Block buttons ship white-space:nowrap, which a long Bulgarian CTA label
   overflows at 375px. */
.eco-pricing-card__cta .wp-block-button > .wp-block-button__link {
  width: 100%;
  white-space: normal;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .eco-pricing-card__cta .wp-block-button > .wp-block-button__link {
    transition: transform .18s var(--ease), background-color .18s var(--ease);
  }
  .eco-pricing-card__cta .wp-block-button > .wp-block-button__link:hover {
    transform: translateY(-2px);
  }
}

/* Centre the intro against the tall card; !important because core ships
   .wp-block-columns{align-items:normal!important}. */
.wp-block-columns.eco-pricing__layout { align-items: center !important; }

/* ── pricing-tiers ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   Pricing — "tiers" variant
   A dark full-bleed band: centred heading and lead, an optional monthly /
   annual toggle, then plan cards on a slightly lighter dark ground. The card
   the DATA marks "popular" is raised, larger, and carries a light chip.

   No JavaScript. The toggle is two visually hidden radio inputs that sit as
   siblings of the switch and of the card grid, so ~ does the switching. The
   seeder emits the toggle only when the data carries a second price set, so
   there is never a dead control on the page.

   Self-contained: every selector is anchored on a class this variant emits,
   and every colour is derived from an existing token with color-mix, so the
   runtime palette from site.json still flows through.
   ========================================================================== */

/* ── Palette ─────────────────────────────────────────────────────────────
   Measured against the two grounds this section actually paints (all ratios
   computed, not eyeballed):

     band          --eco-blue-dark                                  #12376E
     card          7%  --eco-cloud in --eco-blue-dark               #224578
     card, raised  12% --eco-cloud in --eco-blue-dark               #2D4E7F

     --pt-ink    --eco-cloud            11.04 band · 9.06 card · 7.91 raised
     --pt-dim    78% cloud               7.34 band · 6.02 card · 5.26 raised
     --pt-accent 55% --eco-green +cloud  6.52 band · 5.35 card · 4.67 raised

   Raw --eco-green is 3.41:1 on the card and 2.98:1 on the raised card, so it
   is never used here for text of any size — --pt-accent is the green that
   clears 4.5:1 on both, and it is still the brand green, only lifted toward
   --eco-cloud. Accent is spent on numerals and ticks; sentences take --pt-ink
   or --pt-dim.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-group.eco-pricing-tiers {
  --pt-band:        var(--eco-blue-dark);
  --pt-card:        color-mix(in srgb, var(--eco-cloud) 7%,  var(--eco-blue-dark));
  --pt-card-raised: color-mix(in srgb, var(--eco-cloud) 12%, var(--eco-blue-dark));
  --pt-ink:         var(--eco-cloud);
  --pt-dim:         color-mix(in srgb, var(--eco-cloud) 78%, var(--eco-blue-dark));
  --pt-accent:      color-mix(in srgb, var(--eco-green) 55%, var(--eco-cloud));
  /* Hairlines and card edges: decorative separators, no contrast minimum. */
  --pt-edge:        color-mix(in srgb, var(--eco-cloud) 22%, var(--eco-blue-dark));
  /* Interactive boundaries (ghost button, switch outline): 4.10:1 on the
     card, 3.58:1 on the raised card, 5.00:1 on the band — all clear 3:1. */
  --pt-edge-strong: color-mix(in srgb, var(--eco-cloud) 60%, var(--eco-blue-dark));

  background: var(--pt-band);
  color: var(--pt-ink);
}

/* The theme paints headings --eco-blue-dark, which on this band would be
   invisible. This section is dark by definition, not by tone. */
.wp-block-group.eco-pricing-tiers .eco-head h2 { color: var(--pt-ink); }
.wp-block-group.eco-pricing-tiers .eco-head p  { color: var(--pt-dim); }
.wp-block-group.eco-pricing-tiers .eco-head    { margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-6)); }

/* ── The toggle ──────────────────────────────────────────────────────────
   The two radios are real inputs, visually hidden but focusable and in the
   accessibility tree: they share a name, so a screen reader announces
   "Месечно, radio button, 1 of 2, selected" and the arrow keys move between
   them. Each is described by the visible legend above the switch.

   .wp-block-group.eco-section > * hands every direct child the wrap width and
   auto margins, which would stretch these; (0,3,0) is what takes it back. The
   selectors are descendant, not child, so they survive WordPress re-saving
   the group with a .wp-block-group__inner-container around its children.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-group.eco-pricing-tiers .eco-pricing-tiers__legend {
  width: auto;
  margin: 0 auto var(--sp-3);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--pt-dim);
}

.wp-block-group.eco-pricing-tiers .eco-pricing-tiers__state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wp-block-group.eco-pricing-tiers .eco-pricing-tiers__switch {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(var(--sp-6), 4vw, var(--sp-7));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--pt-card);
  border: 1px solid var(--pt-edge);
  border-radius: var(--radius-pill);
}

.eco-pricing-tiers__opt {
  display: block;
  cursor: pointer;
  padding: var(--sp-2) clamp(var(--sp-4), 4vw, var(--sp-5));
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.2;
  color: var(--pt-dim);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.eco-pricing-tiers__opt:hover { color: var(--pt-ink); }

/* Selected: --eco-blue-dark on --eco-cloud, 11.04:1. */
.eco-pricing-tiers__state--monthly:checked ~ .eco-pricing-tiers__switch .eco-pricing-tiers__opt--monthly,
.eco-pricing-tiers__state--annual:checked  ~ .eco-pricing-tiers__switch .eco-pricing-tiers__opt--annual {
  background: var(--eco-cloud);
  color: var(--eco-blue-dark);
}

/* The focus ring has to land on the label, because the input it belongs to is
   the hidden one. --pt-accent reads at 4.67:1 against the switch ground. */
.eco-pricing-tiers__state--monthly:focus-visible ~ .eco-pricing-tiers__switch .eco-pricing-tiers__opt--monthly,
.eco-pricing-tiers__state--annual:focus-visible  ~ .eco-pricing-tiers__switch .eco-pricing-tiers__opt--annual {
  outline: 3px solid var(--pt-accent);
  outline-offset: 2px;
}

/* ── The grid ────────────────────────────────────────────────────────────
   Core ships .wp-block-columns{display:flex} and WordPress inlines it AFTER
   the theme stylesheet, so the double class is what makes this a grid at all.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-pricing-tiers__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: stretch !important;
}

/* Core gives every column flex-basis:100%; under grid that blows the track
   out, and min-width:0 is what keeps a long Bulgarian plan name wrapping
   instead of pushing the page sideways. */
.wp-block-columns.eco-pricing-tiers__grid > .wp-block-column {
  flex-basis: auto !important;
  width: auto;
  min-width: 0;
  display: flex;
}

@media (min-width: 880px) {
  .wp-block-columns.eco-pricing-tiers__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(var(--sp-4), 2vw, var(--sp-5));
    /* Room for the raised card to lift without touching the switch. */
    margin-top: var(--sp-5);
  }
  /* Raised: a negative top margin on a stretched grid item makes the card
     start higher AND finish taller than its neighbours. No transform, so
     nothing is repainted at a fractional scale and the text stays crisp. */
  .wp-block-columns.eco-pricing-tiers__grid > .wp-block-column.eco-pricing-tiers__col--featured {
    margin-block: calc(var(--sp-5) * -1) 0;
  }
}

/* More than three plans still reads as equal columns, in rows of three. */
@media (min-width: 880px) {
  .wp-block-columns.eco-pricing-tiers__grid { row-gap: var(--sp-5); }
}

/* ── The card ────────────────────────────────────────────────────────────
   Both shapes: WordPress wraps a re-saved group's children in
   .wp-block-group__inner-container, which would otherwise swallow the column
   layout and leave every card a stack of default blocks.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-group.eco-pricing-tiers__card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  background: var(--pt-card);
  border: 1px solid var(--pt-edge);
  border-radius: var(--radius-lg);
  transition: border-color .2s var(--ease);
}
.wp-block-group.eco-pricing-tiers__card > .wp-block-group__inner-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: auto;
  margin: 0;
}
.wp-block-group.eco-pricing-tiers__card:hover { border-color: var(--pt-edge-strong); }

.wp-block-group.eco-pricing-tiers__card--featured {
  background: var(--pt-card-raised);
  border-color: var(--pt-edge-strong);
  box-shadow: var(--shadow-lg);
}

/* ── The chip ────────────────────────────────────────────────────────────
   Emitted only where the data says "popular": true. --eco-blue-dark on
   --eco-cloud, 11.04:1.
   ─────────────────────────────────────────────────────────────────────── */
.eco-pricing-tiers__chiprow {
  margin: 0;
  line-height: 1;
}
.eco-pricing-tiers__chip {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--eco-cloud);
  color: var(--eco-blue-dark);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xs);
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Name, price, rule, description ──────────────────────────────────── */
.wp-block-group.eco-pricing-tiers__card .eco-pricing-tiers__name {
  margin: 0;
  color: var(--pt-ink);
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
}

.eco-pricing-tiers__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
  margin: 0;
}
/* The second price set is emitted next to the first and hidden here, so the
   hidden one is out of the accessibility tree too: a screen reader reads the
   price that is actually showing, once. */
.eco-pricing-tiers__price--annual { display: none; }
.eco-pricing-tiers__state--annual:checked ~ .wp-block-columns.eco-pricing-tiers__grid .eco-pricing-tiers__price--monthly { display: none; }
.eco-pricing-tiers__state--annual:checked ~ .wp-block-columns.eco-pricing-tiers__grid .eco-pricing-tiers__price--annual  { display: flex; }

/* --fs-xl, not --fs-2xl: three cards in a 1180px wrap leave about 310px of
   content per card, and a four-digit annual figure plus "на година" does not
   fit on one line at --fs-2xl. The period is specified to sit BESIDE the
   figure, so the figure takes the size at which it can. */
.eco-pricing-tiers__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pt-accent);
}
.eco-pricing-tiers__per {
  font-size: var(--fs-sm);
  color: var(--pt-dim);
}

/* The enquiries card carries a phone number where the others carry a figure.
   Smaller than a price, because a phone number is four times as long and has
   to survive 375px without a horizontal scrollbar. */
.eco-pricing-tiers__price--phone .eco-pricing-tiers__amount {
  font-size: var(--fs-lg);
  overflow-wrap: anywhere;
}
.eco-pricing-tiers__card .eco-pricing-tiers__tel {
  color: var(--pt-accent);
  text-decoration: none;
}
.eco-pricing-tiers__card .eco-pricing-tiers__tel:hover,
.eco-pricing-tiers__card .eco-pricing-tiers__tel:focus-visible {
  color: var(--pt-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Hairline. Core's separator rules are inlined after the theme sheet, so this
   needs the extra class to win. */
.eco-pricing-tiers__card .wp-block-separator {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--pt-edge);
  opacity: 1;
}

.eco-pricing-tiers__note {
  margin: 0;
  color: var(--pt-dim);
  font-size: var(--fs-sm);
}

/* ── Feature list ────────────────────────────────────────────────────────
   Small green ticks drawn as a mask over --pt-accent, so the tick colour is
   the token and not a colour baked into the SVG: change --eco-green in
   site.json and these follow.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-list.eco-pricing-tiers__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.wp-block-list.eco-pricing-tiers__features li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--pt-dim);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.wp-block-list.eco-pricing-tiers__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .34em;
  width: .95rem;
  height: .95rem;
  background-color: var(--pt-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* ── Call to action ──────────────────────────────────────────────────────
   margin-top:auto pins every button to the bottom of its card, so the row of
   buttons lines up even when one plan lists two more features than the next.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-buttons.eco-pricing-tiers__cta {
  margin-top: auto;
  padding-top: var(--sp-2);
  gap: var(--sp-3);
}
.wp-block-buttons.eco-pricing-tiers__cta .wp-block-button { width: 100%; }
.wp-block-buttons.eco-pricing-tiers__cta .wp-block-button__link {
  display: block;
  width: 100%;
  text-align: center;
}
/* The theme's ghost button is drawn for a light ground; on this band it needs
   its own colours. --pt-ink text at 9.06:1, --pt-edge-strong border at 4.10:1
   on the card and 3.58:1 on the raised one. */
.eco-pricing-tiers .wp-block-button.eco-btn--ghost > .wp-block-button__link {
  color: var(--pt-ink);
  background: transparent;
  border-color: var(--pt-edge-strong);
}
.eco-pricing-tiers .wp-block-button.eco-btn--ghost > .wp-block-button__link:hover {
  color: var(--eco-blue-dark);
  background: var(--eco-cloud);
  border-color: var(--eco-cloud);
}

/* ── Raised card, the extra half-size ───────────────────────────────────── */
@media (min-width: 880px) {
  .eco-pricing-tiers__col--featured .wp-block-group.eco-pricing-tiers__card {
    padding: clamp(var(--sp-6), 3.4vw, var(--sp-7)) clamp(var(--sp-5), 3vw, var(--sp-6));
  }
  .eco-pricing-tiers__col--featured .eco-pricing-tiers__name { font-size: var(--fs-lg); }
  /* The figure deliberately does NOT grow with the card: at --fs-3xl a
     four-digit annual price pushes "на година" onto its own line, which reads
     as a bug rather than as emphasis. The lift, the lighter ground, the
     padding and the name carry the emphasis instead. */
}

/* ── Motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .eco-pricing-tiers__opt,
  .wp-block-group.eco-pricing-tiers__card { transition: none; }
}

/* ── quotes-cards ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   Quotes — "cards" variant
   Centred head, then three white review cards on a very light ground.
   Self-contained: every selector below is scoped to .eco-quotes-cards or
   .eco-quotes__*, so nothing outside this variant changes.
   ========================================================================== */

/* ── Ground ─────────────────────────────────────────────────────────────── */
/* Only applied when the JSON asked for no "tone", so an explicit tone still
   wins — see the PHP branch. */
.eco-quotes__section { background: var(--eco-cloud); }

/* ── The row of cards ────────────────────────────────────────────────────
   Core ships .wp-block-columns{display:flex} and WordPress inlines it AFTER
   the theme stylesheet, so a single class loses. The double class takes this
   to (0,2,0) and the grid actually applies.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-quotes-cards {
  display: grid;
  /* One column, then three. Deliberately no two-column step: three reviews in
     a two-up grid is the 2+1 ragged row the client has already rejected. */
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  align-items: stretch !important;
}
@media (min-width: 880px) {
  .wp-block-columns.eco-quotes-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wp-block-columns.eco-quotes-cards > .wp-block-column {
  flex-basis: auto !important;
  width: auto;
  /* Grid tracks are min-content wide by default; without this a long unbroken
     word (a URL, a long Bulgarian compound) widens the track and pushes the
     whole page sideways. */
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── The card ───────────────────────────────────────────────────────────── */
.wp-block-group.eco-quotes__card {
  height: 100%;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  box-shadow: var(--shadow-sm);
  /* The palette has no star colour. Declared once here rather than repeated
     as a literal; the value matches .eco-quote__stars so both testimonial
     treatments read as the same rating. */
  --eco-quotes-star: #F5A623;
}

/* WordPress wraps a group's children in .wp-block-group__inner-container in
   some contexts and not in others, so the column layout has to be declared on
   whichever element ends up holding the children. */
.wp-block-group.eco-quotes__card,
.eco-quotes__card > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.eco-quotes__card > .wp-block-group__inner-container { flex: 1 1 auto; padding: 0; }

/* The parent theme centres every .wp-block-group__inner-container with auto
   side margins and a max-width. Inside a flex card that shrink-wraps a short
   block and floats it to the middle, which is how the person block ended up
   centred while the quote above it stayed flush left. Pin both full width. */
.eco-quotes__card > .wp-block-group__inner-container,
.eco-quotes__person > .wp-block-group__inner-container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Flex gap owns the vertical rhythm inside the card, so the block margins go.
   Core's flow layout adds a margin-block-start to every child but the first,
   which would stack on top of the gap. */
.eco-quotes__card p { margin: 0; }
.wp-block-group.eco-quotes__card > *,
.eco-quotes__card > .wp-block-group__inner-container > * { margin-block: 0; }

@media (prefers-reduced-motion: no-preference) {
  .wp-block-group.eco-quotes__card {
    transition: box-shadow .25s var(--ease), transform .25s var(--ease);
  }
  .wp-block-group.eco-quotes__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
}

/* ── Stars ──────────────────────────────────────────────────────────────── */
.eco-quotes__card .eco-quotes__stars {
  color: var(--eco-quotes-star);
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  line-height: 1;
}

/* ── The quote ──────────────────────────────────────────────────────────── */
.eco-quotes__text {
  font-size: var(--fs-base);
  line-height: 1.7;
  overflow-wrap: break-word;
}

/* ── The rule ────────────────────────────────────────────────────────────
   Core's .wp-block-separator:not(.is-style-wide):not(.is-style-dots) sets
   width:100px at (0,3,0) and is inlined after the theme, so the element
   selector is here to take this to (0,3,1) and win on specificity rather
   than on source order.
   ──────────────────────────────────────────────────────────────────────── */
.eco-quotes__card hr.wp-block-separator.eco-quotes__rule {
  width: 100%;
  max-width: none;
  border: 0;
  border-top: 1px solid var(--eco-line);
  opacity: 1;
  /* margin-top:auto drops the rule to the foot of the card, so the person
     rows line up across a row of cards whose quotes differ in length. */
  margin: auto 0 0;
}

/* ── The person ─────────────────────────────────────────────────────────── */
.wp-block-group.eco-quotes__person,
.eco-quotes__person > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
}

/* An initial on a solid disc, never a photograph: a stock face beside a named
   review invents a customer. Flat fill, no blend, per the note on the
   numbered discs. */
.eco-quotes__card .eco-quotes__avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--eco-green-cta);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}

.eco-quotes__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-base);
  line-height: 1.3;
  color: var(--eco-blue-dark);
}
.eco-quotes__where {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--eco-muted);
}

/* ── split-benefits ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   Split — "benefits" variant
   Left: eyebrow behind a short thick green bar, heading, lead paragraph, then
   benefit rows (green tick disc, bold label, lighter one-line description).
   Right: a tall photograph with a small radius, optionally carrying a dark
   trust badge on its lower-left corner.

   Self-contained on purpose: every selector is anchored on
   .eco-split-benefits or .eco-split-benefits__*, so this file restyles nothing
   else and can load in any order relative to eco-clean.css.
   ========================================================================== */

/* ── The two columns ─────────────────────────────────────────────────────
   Core ships .wp-block-columns{display:flex} and WordPress inlines it AFTER
   the theme stylesheet, so a single class loses on source order however late
   this file is enqueued. The pair .wp-block-columns.eco-split-benefits scores
   (0,2,0) and wins on specificity instead — the same trick the other grids in
   this theme carry.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-split-benefits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center !important;
}

/* 900px, not core's 782px: below this the text column and a tall photograph
   side by side leave the copy at about 20 characters a line. */
@media (min-width: 900px) {
  .wp-block-columns.eco-split-benefits {
    /* Text gets the wider track: the photograph is portrait and does not need
       the room, and a 1fr 1fr split makes the benefit rows wrap awkwardly. */
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
  .wp-block-columns.eco-split-benefits.eco-split-benefits--reverse > .eco-split-benefits__media {
    order: -1;
  }
}

.wp-block-columns.eco-split-benefits > .wp-block-column {
  /* Core's own .wp-block-columns > .wp-block-column{flex-basis:0} ties at
     (0,2,0) and is inlined later, so this one needs the !important. */
  flex-basis: auto !important;
  width: auto;
  /* Bulgarian labels are long; without this the track refuses to shrink and
     the page scrolls sideways at 375px. */
  min-width: 0;
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────
   Its own class rather than .eco-eyebrow: that one draws a horizontal dash in
   --grad-brand, and this wireframe wants a short thick vertical bar. Opt-in
   from the JSON only — CLIENT-NOTES rules out eyebrows as a default.
   ──────────────────────────────────────────────────────────────────────── */
.eco-split-benefits__text .eco-split-benefits__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--eco-green-cta);
}
.eco-split-benefits__eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 1.15em;
  border-radius: 3px;
  background: var(--eco-green);
  /* Decorative: never eat a click meant for the text beside it. */
  pointer-events: none;
}

/* ── Heading and lead ───────────────────────────────────────────────────── */
.eco-split-benefits__text .eco-split-benefits__h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xl);
}
.eco-split-benefits__text .eco-split-benefits__lead {
  margin: 0 0 var(--sp-4);
  max-width: 34rem;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--eco-muted);
}
.eco-split-benefits__text .eco-split-benefits__lead:last-of-type {
  margin-bottom: 0;
}

/* ── Benefit rows ────────────────────────────────────────────────────────
   Two-column grid per row: the tick disc in track 1, the copy in track 2.

   Trap 7: WordPress may wrap a group's children in
   .wp-block-group__inner-container, so a row holds either two paragraphs or
   one wrapper. `> *` matches real children only (pseudo-elements are not
   matched), which is why the disc can be pinned to track 1 while every real
   child — wrapper or paragraphs — is pushed into track 2. Both shapes land
   identically.
   ──────────────────────────────────────────────────────────────────────── */
/*
 * Trap 7 applies to the container as well as the row. WordPress wraps a
 * group's children in .wp-block-group__inner-container, so this grid had
 * exactly one item and its gap never fired between rows. The rows looked
 * evenly spaced only because core's flow margin happens to equal --sp-5.
 * Style whichever element actually holds the rows.
 */
.eco-split-benefits__rows,
.eco-split-benefits__rows > .wp-block-group__inner-container {
  display: grid;
  gap: var(--sp-5);
}
.eco-split-benefits__rows { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.wp-block-group.eco-split-benefits__row {
  --ecosb-disc: 1.75rem;
  --ecosb-disc-top: 0.15rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--ecosb-disc) minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: start;
}
.eco-split-benefits__row > * {
  grid-column: 2;
  min-width: 0;
}

/* The disc. Flat --eco-green-cta, not --grad-brand: house rule, no gradients
   under 4rem, and this is 28px. */
.eco-split-benefits__row::before {
  content: '';
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin-top: var(--ecosb-disc-top);
  width: var(--ecosb-disc);
  height: var(--ecosb-disc);
  border-radius: 50%;
  background: var(--eco-green-cta);
  pointer-events: none;
}

/* The tick, drawn as two borders rotated 45deg rather than an SVG, so it
   inherits the token colour and costs no request. Absolutely placed against
   the row, whose disc always starts at inline-start 0 of track 1.

   Tick on disc: --eco-cloud (L 0.9419) on --eco-green-cta (L 0.1750)
   → (0.9419 + 0.05) / (0.1750 + 0.05) = 0.9919 / 0.2250 = 4.41:1,
   comfortably over the 3:1 WCAG 1.4.11 floor for a graphical object. */
.eco-split-benefits__row::after {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--ecosb-disc) * 0.5);
  top: calc(var(--ecosb-disc-top) + var(--ecosb-disc) * 0.5);
  width: 0.5rem;
  height: 0.28rem;
  border-inline-start: 2px solid var(--eco-cloud);
  border-bottom: 2px solid var(--eco-cloud);
  transform: translate(-50%, -62%) rotate(-45deg);
  pointer-events: none;
}

.eco-split-benefits__row .eco-split-benefits__label {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--eco-blue-dark);
  overflow-wrap: break-word;
  hyphens: manual;
}
.eco-split-benefits__row .eco-split-benefits__desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--eco-muted);
}

/* Both group shapes again, for the trailing margin. */
.eco-split-benefits__row > .wp-block-group__inner-container > *:last-child,
.eco-split-benefits__row > *:last-child { margin-bottom: 0; }

.eco-split-benefits__text .wp-block-buttons {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* ── The photograph ─────────────────────────────────────────────────────── */
.eco-split-benefits__media {
  position: relative;
}
.eco-split-benefits__media figure.wp-block-image {
  margin: 0;
  /* Tall, per the wireframe. Portrait on mobile too, but shallower, so the
     copy above it is not pushed a whole screen away. */
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease);
}
.eco-split-benefits__media figure.wp-block-image:hover {
  box-shadow: var(--shadow-lg);
}
.eco-split-benefits__media figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
@media (min-width: 900px) {
  .eco-split-benefits__media figure.wp-block-image {
    aspect-ratio: 3 / 4;
    max-height: clamp(28rem, 62vh, 40rem);
  }
}

/* ── Trust badge ─────────────────────────────────────────────────────────
   Rendered only when the section passes "trust": true AND site.json's trust
   block is "verified": true. No faces, ever: stock avatars next to a review
   count invent customers, which is the one thing this project will not ship.

   Contrast, and the arithmetic the house rule asks for. The badge is a fully
   OPAQUE panel, so the photograph beneath contributes nothing and the
   lightest possible pixel (pure white, L 1.0) cannot lift it:

     --eco-blue-dark #12376E  → L 0.0399
     --eco-cloud     #F5F9FC  → L 0.9419
     text on panel: (0.9419 + 0.05) / (0.0399 + 0.05) = 0.9919 / 0.0899
                  = 11.03:1   (AA needs 4.5:1)

   Floor if the panel is ever thinned: at alpha .94 composited over pure
   white the panel becomes rgb(32.2, 67.0, 118.7), L 0.0565, and the same
   text reads (0.9919) / (0.1065) = 9.31:1. Still clear. Anything below
   alpha .80 must be re-checked before it ships.

   Stars are a graphic, not text (the accessible name carries the rating):
     --eco-green #4CAF2A → L 0.3236
     (0.3236 + 0.05) / (0.0399 + 0.05) = 0.3736 / 0.0899 = 4.16:1,
     over the 3:1 floor for non-text contrast.

   Flat fill, not --grad-deep: the badge is well under 4rem tall.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-group.eco-split-benefits__badge {
  position: absolute;
  z-index: 2;
  inset-inline-start: var(--sp-4);
  bottom: var(--sp-4);
  /* At 375px the badge must stay inside the photograph, or the section
     widens the document. */
  max-width: calc(100% - var(--sp-6));
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--eco-blue-dark);
  color: var(--eco-cloud);
  box-shadow: var(--shadow-lg);
}

/* Only once there is room to hang it off the corner without reaching the
   viewport edge: the wrap keeps a 2rem gutter at this width. */
@media (min-width: 900px) {
  .wp-block-group.eco-split-benefits__badge {
    inset-inline-start: calc(var(--sp-5) * -1);
    bottom: calc(var(--sp-5) * -1);
    max-width: none;
  }
}

.eco-split-benefits__badge .eco-split-benefits__rating {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  color: var(--eco-cloud);
}
.eco-split-benefits__badge .eco-split-benefits__score {
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.eco-split-benefits__badge .eco-split-benefits__stars {
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: .06em;
  color: var(--eco-green);
}
.eco-split-benefits__badge .eco-split-benefits__reviews {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  white-space: nowrap;
  color: var(--eco-cloud);
}

/* ── Dark section tone ───────────────────────────────────────────────────
   On `deep` the section text is already white, so the label takes `inherit`
   rather than a colour of its own (which would beat what the section set) and
   the muted copy switches to translucent white.
   ──────────────────────────────────────────────────────────────────────── */
.eco-section--deep .eco-split-benefits__text .eco-split-benefits__h2,
.eco-section--deep .eco-split-benefits__row .eco-split-benefits__label { color: inherit; }
.eco-section--deep .eco-split-benefits__text .eco-split-benefits__lead,
.eco-section--deep .eco-split-benefits__row .eco-split-benefits__desc { color: rgba(255, 255, 255, .82); }
/* --eco-green-cta on --grad-deep is too close in value to read as a chip;
   the brighter green separates. Tick contrast is unchanged in kind:
   --eco-cloud (L 0.9419) on --eco-green (L 0.3236) = 2.65:1 would fail, so
   the tick switches to the dark ink instead:
   (0.3236 + 0.05) / (0.0142 + 0.05) = 0.3736 / 0.0642 = 5.82:1. */
.eco-section--deep .eco-split-benefits__row::before { background: var(--eco-green); }
.eco-section--deep .eco-split-benefits__row::after {
  border-inline-start-color: var(--eco-ink);
  border-bottom-color: var(--eco-ink);
}
.eco-section--deep .eco-split-benefits__text .eco-split-benefits__eyebrow { color: var(--eco-cloud); }
/* On a dark band the badge would vanish into the section; the outline keeps
   its edge without changing the fill the contrast maths above assumes. */
.eco-section--deep .wp-block-group.eco-split-benefits__badge {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  .eco-split-benefits__media figure.wp-block-image { transition: none; }
  .eco-split-benefits__media figure.wp-block-image:hover { box-shadow: var(--shadow-sm); }
}

/* ── split-collage ─────────────────────────────────────────────── */
/* ==========================================================================
   Split — "collage" variant
   ---------------------------------------------------------------------------
   Three photographs laid down on top of each other at slight offsets, with the
   copy beside them. The point is that it should read as a small pile someone
   put on a table, not as a grid: the sizes differ, the rotations differ, and
   nothing lines up with anything else.

   Self-contained. Every selector is scoped to .eco-split-collage*; nothing
   here restyles a shared class.

   Two things worth knowing before editing:

   1. Core's `.wp-block-columns{display:flex}` (and `align-items:normal
      !important`) is inlined AFTER this stylesheet. Every layout claim on the
      columns block is therefore made at (0,2,0) or with !important, otherwise
      the grid silently falls back to flex. That bug has shipped here twice.
   2. The stack lives on the COLUMN itself, not on a group inside it. A
      core/column never gets a `.wp-block-group__inner-container`, so the
      photographs stay direct children in the editor and on the front end
      alike, and the containing block for their absolute positioning cannot
      move out from under them.
   ========================================================================== */

/* ── The two columns ────────────────────────────────────────────────────── */

.wp-block-columns.eco-split-collage {
  display: grid;
  /* The collage gets slightly more room than the copy: the photographs carry
     the section, and a measured column of text does not want to be wide. */
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  /* Core ships `align-items: norma !importantl !important` on this block. */
  align-items: cente !importantr !important;
}

.wp-block-columns.eco-split-collage > .wp-block-column {
  flex-basis: auto;
  width: auto;
  min-width: 0;
}

/* "reverse": true in the JSON puts the collage on the right. */
.wp-block-columns.eco-split-collage--reverse > .eco-split-collage__media { order: 2; }

/* ── The stack ──────────────────────────────────────────────────────────── */

.wp-block-column.eco-split-collage__media {
  position: relative;
  /* A fixed box the photographs are positioned inside, so the composition
     scales as one piece instead of three independently sized images. */
  aspect-ratio: 5 / 4;
  isolation: isolate;
}

/* The surface the photographs were laid on: one flat panel, offset from the
   pile so it reads as depth rather than as a frame. Flat fill on purpose —
   a gradient here is the "decoration for its own sake" the client had
   stripped out. Never intercepts a click. */
.wp-block-column.eco-split-collage__media::before {
  content: '';
  position: absolute;
  inset: 14% 1% -5% 5%;
  z-index: 0;
  border-radius: var(--radius-lg);
  background: var(--eco-cloud);
  pointer-events: none;
}

/* One photograph: nothing but a soft shadow, a small radius and a hairline so
   two overlapping images never melt into each other. */
.wp-block-image.eco-split-collage__shot {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--eco-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  background: var(--eco-cloud);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

/* Core's `.wp-block-image img{height:auto}` is (0,1,1) and inlined after this
   file, so the fill has to be claimed at (0,2,1). */
.wp-block-image.eco-split-collage__shot > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

/* Three photographs — the full composition.
   Sizes and angles are all different on purpose; a repeated offset reads as a
   pattern, which is the opposite of what this is for. Every edge keeps 1-3%
   clear of the column so the rotated corners stay inside the wrap. */
.eco-split-collage__media--3 .eco-split-collage__shot--1 {
  inset: 1% 34% 21% 1%;
  z-index: 1;
  transform: rotate(-2.4deg);
}
.eco-split-collage__media--3 .eco-split-collage__shot--2 {
  inset: 27% 3% 1% 31%;
  z-index: 2;
  transform: rotate(2.2deg);
}
.eco-split-collage__media--3 .eco-split-collage__shot--3 {
  inset: 5% 2% 62% 58%;
  z-index: 3;
  transform: rotate(5.5deg);
}

/* Two photographs. */
.eco-split-collage__media--2 .eco-split-collage__shot--1 {
  inset: 1% 30% 15% 1%;
  z-index: 1;
  transform: rotate(-2deg);
}
.eco-split-collage__media--2 .eco-split-collage__shot--2 {
  inset: 23% 2% 1% 34%;
  z-index: 2;
  transform: rotate(2.6deg);
}

/* One photograph. Nothing to stack, so it stops pretending: square to the
   grid, no tilt, and the same generous corner the other split variants use. */
.eco-split-collage__media--1::before { display: none; }
.eco-split-collage__media--1 .eco-split-collage__shot--1 {
  inset: 0;
  z-index: 1;
  transform: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ── The copy ───────────────────────────────────────────────────────────── */

/* Two shapes: a column beside the collage, or — when a section carries no
   usable photograph at all — a bare group on its own. */
.wp-block-column.eco-split-collage__text,
.wp-block-group.eco-split-collage__text {
  max-width: 34rem;
}

.eco-split-collage__text h2 {
  font-size: var(--fs-xl);
  color: var(--eco-blue-dark);
  text-wrap: balance;
  margin-bottom: var(--sp-4);
}

.eco-split-collage__text p {
  color: var(--eco-muted);
  font-size: var(--fs-md);
}

/* The eyebrow is opt-in from the JSON (see the PHP branch). Written at (0,2,0)
   so it outranks the `.eco-split-collage__text p` rule above it. */
.eco-split-collage__text .eco-split-collage__eyebrow {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* --eco-green-dark (#2E7D14), the same accent the house .eco-eyebrow uses:
     5.17:1 on white, 4.89:1 on an --eco-cloud section. --eco-green-cta drops
     to 4.41:1 on cloud, which fails AA for text this small. */
  color: var(--eco-green-dark);
}

/* On a deep-toned section the section itself sets the text colour; hand it
   back rather than forcing ink onto navy. Scoping only, nothing outside
   .eco-split-collage* is restyled. */
.eco-section--deep .eco-split-collage__text h2,
.eco-section--deep .eco-split-collage__text p,
.eco-section--deep .eco-split-collage__text .eco-split-collage__eyebrow {
  color: inherit;
}

/* "a CTA flush against the paragraph above it looks broken" */
.eco-split-collage__text .wp-block-buttons {
  margin-top: var(--sp-6);
}
/* WordPress may wrap a group's children in .wp-block-group__inner-container,
   so the fallback shape is matched at both depths. */
.eco-split-collage__text > *:last-child,
.eco-split-collage__text > .wp-block-group__inner-container > *:last-child {
  margin-bottom: 0;
}

/* ── Motion ─────────────────────────────────────────────────────────────── */
/* Hovering the pile opens it very slightly, the way you would nudge photos
   apart to see the one underneath. Pointer devices only, wide layouts only,
   and off entirely when the visitor has asked for less movement. */
@media (min-width: 800px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .eco-split-collage__media--3:hover .eco-split-collage__shot--1 { transform: rotate(-3.6deg) translate(-1.5%, -1%); }
  .eco-split-collage__media--3:hover .eco-split-collage__shot--2 { transform: rotate(3.2deg) translate(1.5%, 1%); }
  .eco-split-collage__media--3:hover .eco-split-collage__shot--3 { transform: rotate(7deg) translate(1%, -1.5%); }
  .eco-split-collage__media--2:hover .eco-split-collage__shot--1 { transform: rotate(-3deg) translate(-1.5%, -1%); }
  .eco-split-collage__media--2:hover .eco-split-collage__shot--2 { transform: rotate(3.6deg) translate(1.5%, 1%); }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-image.eco-split-collage__shot { transition: none; }
}

/* ── Below 800px ────────────────────────────────────────────────────────── */
/* The pile does not survive a narrow column: at 375px three overlapping
   photographs are three unreadable slivers. One photograph, square to the
   grid, and everything else stacks under it. */
@media (max-width: 799px) {

  .wp-block-columns.eco-split-collage {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }

  /* Whichever side it was on, the photograph comes first when stacked. */
  .wp-block-columns.eco-split-collage--reverse > .eco-split-collage__media { order: 0; }

  .wp-block-column.eco-split-collage__media { aspect-ratio: 5 / 4; }
  .wp-block-column.eco-split-collage__media::before { display: none; }

  .eco-split-collage__media .eco-split-collage__shot--2,
  .eco-split-collage__media .eco-split-collage__shot--3 { display: none; }

  .eco-split-collage__media .eco-split-collage__shot--1 {
    inset: 0;
    transform: none;
    border-radius: var(--radius-lg);
  }

  .wp-block-column.eco-split-collage__text { max-width: none; }
}

/* ── split-dots ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   split → variant "dots"
   --------------------------------------------------------------------------
   Left  : ruled eyebrow, heading, paragraph, 2x2 icon-and-label grid,
           second paragraph, two-column ticked list.
   Right : tall photograph, a smaller photograph overlapping its lower-left
           corner, and a dot-grid block bleeding behind the top-right.
           The dot grid is drawn in CSS. No image request.

   Every selector here is prefixed .eco-split-dots. Nothing outside the
   component is restyled, and no rule is written into eco-clean.css.

   Two things this file works around, both already documented in CLAUDE.md:

   1. Core's `.wp-block-columns { display: flex }` is inlined AFTER the theme
      stylesheet, so source order cannot beat it. Every grid rule below is
      written at (0,2,0) or higher — `.wp-block-columns.eco-split-dots`,
      never a bare `.eco-split-dots`. Same for the icon chip, which has to
      out-specify the generated `[class*="eco-ico-"]::before` at (0,1,0).
   2. WordPress re-serialises a saved group with its children inside
      `.wp-block-group__inner-container`. The frame is positioned rather than
      laid out, so it survives both shapes; the fact chip is a pseudo-element
      on the group itself, so it stays a sibling of the wrapper either way.
   ========================================================================== */

/* ── The two columns ────────────────────────────────────────────────────── */
/* (0,2,0): beats core's inlined `.wp-block-columns { display: flex }`. */
.wp-block-columns.eco-split-dots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center !important;
  margin-block: 0;
}

.wp-block-columns.eco-split-dots > .wp-block-column {
  /* Grid ignores the flex sizing core sets on columns; min-width:0 stops a
     long word or a wide image from pushing the track past its track size. */
  min-width: 0;
  flex-basis: auto;
}

@media (min-width: 900px) {
  .wp-block-columns.eco-split-dots {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
  /* "reverse": true mirrors the section. Only above the stacking width:
     stacked, the copy should still come before the photographs. */
  .wp-block-columns.eco-split-dots--reverse > .wp-block-column.eco-split-dots__media {
    order: -1;
  }
}

/* ── Left column: vertical rhythm ───────────────────────────────────────── */
.wp-block-column.eco-split-dots__text > * {
  margin-block: 0;
}
.wp-block-column.eco-split-dots__text > * + * {
  margin-top: var(--sp-5);
}

.wp-block-column.eco-split-dots__text h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.15;
  text-wrap: balance;
}

.eco-split-dots__para {
  color: var(--eco-muted);
  max-width: 34rem;
}

/* ── Eyebrow, preceded by a short rule ──────────────────────────────────── */
/* Colours are picked for contrast, not decoration:
     label  --eco-blue-dark #12376E on --eco-cloud #F5F9FC → 11.04:1
     rule   --eco-green-cta #3A841F on --eco-cloud         →  4.41:1
   The label is small uppercase (not "large text"), so it needs 4.5:1 and
   clears it comfortably. The rule is a non-text graphic, needing 3:1.
   --eco-green-cta was deliberately NOT used for the label: at 4.41:1 it
   would fail on the cloud tone. */
.eco-split-dots__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--eco-blue-dark);
}

.eco-split-dots__eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  /* Flat, not --grad-brand: a 28x2px bar is far under 4rem, and the client
     had every small gradient flattened. */
  background: var(--eco-green-cta);
  pointer-events: none;
}

/* ── 2x2 icon-and-label grid ────────────────────────────────────────────── */
/* (0,2,0) again, for the same reason as the outer columns. auto-fit holds
   two up from 375px (2 x 9.5rem + 1.5rem gap = 20.5rem inside a 20.9rem
   content width) and folds to one only on something narrower still. */
.wp-block-columns.eco-split-dots__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--sp-5);
  margin-block: 0;
}

.wp-block-columns.eco-split-dots__facts > .wp-block-column {
  min-width: 0;
  flex-basis: auto;
}

.wp-block-group.eco-split-dots__fact {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Handles the saved shape, where WordPress wraps the label in
   .wp-block-group__inner-container. The chip pseudo-element stays a direct
   child of the group in both shapes, so it is unaffected. */
.wp-block-group.eco-split-dots__fact > .wp-block-group__inner-container {
  min-width: 0;
  flex: 1 1 auto;
}

/* Round chip. (0,2,0) so it out-specifies the generated
   `[class*="eco-ico-"]::before`, which is a 56px rounded square with a
   bottom margin, built for stacked cards. Everything except the glyph is
   restated here so the component still reads correctly on its own; the
   background-image comes from the generated block, which keeps the icon set
   in step with inc/icons.php. 3rem is under 4rem: flat tint, no gradient. */
.wp-block-group.eco-split-dots__fact::before {
  content: '';
  display: block;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  margin: 0;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--eco-green) 12%, transparent);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.5rem 1.5rem;
  pointer-events: none;
}

.wp-block-group.eco-split-dots__fact p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1.3;
}

.wp-block-group.eco-split-dots__fact strong {
  font-weight: 700;
}

/* ── Two-column ticked list ─────────────────────────────────────────────── */
/* display:grid is restated rather than inherited from .is-style-eco-checks,
   so the list is correct even if only this file is present. The tick itself
   is the theme's, and is left alone. */
.wp-block-list.eco-split-dots__checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  column-gap: var(--sp-5);
  row-gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-block-list.eco-split-dots__checks li {
  font-size: var(--fs-sm);
}

.wp-block-buttons.eco-split-dots__cta {
  /* The client has called out a CTA sitting flush against the list above it. */
  margin-top: var(--sp-6);
}

/* ── Right column: the photograph pair ──────────────────────────────────── */
/* The padding is the room the inset photograph and the dot block hang into,
   so neither has to escape the column. */
.eco-split-dots__frame {
  position: relative;
  padding-left: clamp(1.25rem, 3.5vw, 2.75rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* Dot grid, bleeding behind the top-right corner. Drawn with a repeating
   radial-gradient, the same technique as .eco-section--dots, and sits under
   both photographs. Decorative: it must never eat a click. */
.eco-split-dots__frame::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: calc(var(--sp-6) * -1);
  right: calc(var(--sp-5) * -1);
  width: clamp(7rem, 17vw, 11.5rem);
  height: clamp(7rem, 17vw, 11.5rem);
  background-image: radial-gradient(
    color-mix(in srgb, var(--eco-blue-dark) 28%, transparent) 1.5px,
    transparent 1.5px
  );
  background-size: 18px 18px;
  pointer-events: none;
}

@media (max-width: 781px) {
  /* Nothing bleeds past the content edge on a phone. html/body already carry
     overflow-x: clip, but the page should not be relying on it. */
  .eco-split-dots__frame::before {
    right: 0;
    top: calc(var(--sp-5) * -1);
  }
}

/* Main photograph: tall, per the wireframe. */
.wp-block-image.eco-split-dots__photo {
  position: relative;
  z-index: 1;
  margin: 0;
}

.wp-block-image.eco-split-dots__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Smaller photograph, overlapping the main one's lower-left corner. It hangs
   into the frame's padding, so the overlap costs no extra width. */
.wp-block-image.eco-split-dots__inset {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: clamp(6.5rem, 34%, 11rem);
  margin: 0;
}

.wp-block-image.eco-split-dots__inset img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  /* A cloud-coloured ring, so the two photographs read as two photographs
     wherever their edges are tonally close. */
  border: var(--sp-1) solid var(--eco-cloud);
  box-shadow: var(--shadow-lg);
}

/* Where the section has no second image, the frame is just a tall photo. */
.eco-split-dots__frame:not(:has(.eco-split-dots__inset)) {
  padding-left: 0;
  padding-bottom: 0;
}

/* ── Deep tone ──────────────────────────────────────────────────────────── */
/* tone: "deep" paints --grad-deep behind the section and flips the copy to
   white. Only the two colours this component owns need adjusting. */
.eco-section--deep .eco-split-dots__eyebrow {
  color: color-mix(in srgb, var(--eco-green) 55%, var(--eco-cloud));
}

.eco-section--deep .eco-split-dots__para {
  color: color-mix(in srgb, var(--eco-cloud) 82%, transparent);
}

.eco-section--deep .wp-block-group.eco-split-dots__fact::before {
  background-color: color-mix(in srgb, var(--eco-cloud) 14%, transparent);
}

.eco-section--deep .eco-split-dots__frame::before {
  background-image: radial-gradient(
    color-mix(in srgb, var(--eco-cloud) 26%, transparent) 1.5px,
    transparent 1.5px
  );
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
/* The component ships no motion of its own. This is a guard: the theme puts
   transitions on some shared elements, and a saved page can nest one of them
   inside this section. Nothing here should animate for a reader who has
   asked for that. */
@media (prefers-reduced-motion: reduce) {
  .eco-split-dots,
  .eco-split-dots *,
  .eco-split-dots *::before,
  .eco-split-dots *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .eco-split-dots__frame::before {
    display: none;
  }
  .wp-block-columns.eco-split-dots {
    gap: var(--sp-5);
  }
}

/* ── split-statcard ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   Split — "statcard" variant
   Copy on one side (heading, a bolder sub-headline, then the paragraphs), a
   tall photograph on the other with a white card of figures overlapping its
   lower portion, inset from both edges of the photo. Below 900px the card
   stops overlapping and sits under the photograph at full width.

   Self-contained: every selector is anchored on a class this variant emits,
   so nothing here reaches any other section, and no rule in eco-clean.css is
   needed for the layout to hold.

   Contrast (computed, sRGB relative luminance, WCAG 2.1):
     --eco-green-cta #3A841F on the white card ......... 4.67:1  (numerals)
     --eco-blue-dark #12376E on the white card ........ 11.68:1  (labels)
     inherited --eco-ink #0F2038 on a white section ... 16.35:1  (sub-headline)
   The numerals deliberately use --eco-green-cta, not --eco-green: plain
   --eco-green on white is 2.81:1 and fails at any size.
   ========================================================================== */

/* ── The two columns ─────────────────────────────────────────────────────
   Core ships .wp-block-columns{display:flex} and WordPress inlines it AFTER
   the theme stylesheet, so the doubled class is what makes this a grid at
   all — a bare .eco-split-statcard would silently stay flex.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-split-statcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  align-items: start !important;
}
@media (min-width: 900px) {
  /* Proportional just past the breakpoint: a fixed photo track here left the
     copy at ~245px, wrapping every Bulgarian line three words in. */
  .wp-block-columns.eco-split-statcard {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
  }
  /* "reverse": true in the JSON puts the photograph first. Auto-placement
     makes `order` enough; no second template is needed. */
  .eco-split-statcard--reverse .eco-split-statcard__media { order: -1; }
}
@media (min-width: 1120px) {
  /* Wide enough to cap the photograph and let the copy take the slack. */
  .wp-block-columns.eco-split-statcard { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); }
}

/* Core gives every column flex-basis:100% !important below 782px and
   flex-basis:0 above it. Both are inert on a grid item, but clearing them
   keeps the column honest if the client ever removes the wrapper class in
   the editor. min-width:0 is what lets a long Bulgarian word wrap instead of
   pushing the page sideways at 375px. */
.wp-block-columns.eco-split-statcard > .wp-block-column {
  flex-basis: auto !important;
  width: auto;
  min-width: 0;
}

/* ── Copy column ─────────────────────────────────────────────────────────
   Colour is inherited, never set: this section can carry any tone, and the
   deep tone paints its own white text. Only weight and size are ours.
   ─────────────────────────────────────────────────────────────────────── */
.eco-split-statcard__copy { max-width: 34rem; }

.eco-split-statcard__title {
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}

.eco-split-statcard__subhead {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
  text-wrap: pretty;
}
.eco-split-statcard__subhead strong { font-weight: inherit; }

/* ── Media column ────────────────────────────────────────────────────────
   Photograph and card are direct children of the column, not of a group:
   WordPress wraps a group's children in .wp-block-group__inner-container,
   which would break the sibling selector the overlap depends on.
   ─────────────────────────────────────────────────────────────────────── */
.eco-split-statcard__media { position: relative; }

.wp-block-image.eco-split-statcard__photo { margin: 0; }
.eco-split-statcard__photo img {
  width: 100%;
  height: auto;
  /* Landscape on a phone, tall on the desktop layout the card was drawn for.
     A 3:4 crop at 375px would run past a thumb-length of screen. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 900px) {
  .eco-split-statcard__photo img { aspect-ratio: 3 / 4; }
}

/* ── The card ────────────────────────────────────────────────────────────
   Full width under the photograph on small screens; inset and overlapping
   above 900px. The sibling selector means a section with figures but no
   usable photograph gets a card that simply sits on its own, with no
   negative margin pulling it into the copy above.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-group.eco-split-statcard__card {
  position: relative;
  z-index: 1;
  background: white;
  border: 1px solid var(--eco-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  margin: var(--sp-5) 0 0;
}
@media (min-width: 900px) {
  .eco-split-statcard__photo + .wp-block-group.eco-split-statcard__card {
    /* Roughly half the card's height at the widest layout, so it reads as
       sitting ON the photograph rather than nudged up against it. */
    margin-top: calc(-1 * clamp(var(--sp-6), 7vw, calc(var(--sp-8) + var(--sp-6))));
    margin-inline: clamp(var(--sp-4), 2.5vw, var(--sp-5));
  }
}

/* Brand accent straddling the card's top edge. Decoration only: solid fill,
   never a gradient at this size, and out of the pointer's way. */
.eco-split-statcard__card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: clamp(var(--sp-5), 3vw, var(--sp-6));
  width: 2.75rem;
  height: 3px;
  border-radius: var(--radius-lg);
  background: var(--eco-green);
  pointer-events: none;
}

/* ── The figures ─────────────────────────────────────────────────────────
   Two columns at every width, 375px included: a 2x2 that collapses to one
   column stops being the shape the card was drawn around, and four short
   figures hold at that width.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-split-statcard__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-6)) clamp(var(--sp-4), 2.5vw, var(--sp-5));
  margin: 0;
}
.wp-block-columns.eco-split-statcard__figures > .wp-block-column {
  flex-basis: auto !important;
  width: auto;
  min-width: 0;
}

.eco-split-statcard__value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  /* AA on white; --eco-green is not. */
  color: var(--eco-green-cta);
  margin: 0 0 var(--sp-2);
}

.eco-split-statcard__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--eco-blue-dark);
  overflow-wrap: break-word;
  margin: 0;
  text-wrap: pretty;
}

/* ── Motion ──────────────────────────────────────────────────────────────
   This component ships none. The block is here so a future hover or reveal
   cannot be added without the reduced-motion case already being handled.
   ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .eco-split-statcard,
  .eco-split-statcard *,
  .eco-split-statcard *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* The CTA sat flush against the last list item. */
.eco-split-statcard__copy .wp-block-buttons { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* ── stats-split ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   Stats — "split" variant
   Heading in its own column on the left, lead paragraph and a 2x2 field of
   figures on the right. No card, no border, no tint: the figures carry the
   section on type size alone.
   Self-contained. Every selector is anchored on a class this variant emits.
   ========================================================================== */

/* ── The two columns ─────────────────────────────────────────────────────
   Core ships .wp-block-columns{display:flex} and WordPress inlines it AFTER
   the theme stylesheet, so the double class is what makes this a grid at all;
   a bare .eco-stats__layout would silently stay flex.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-stats__layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start !important;
}
@media (min-width: 900px) {
  /* Narrow enough that the heading breaks into two or three short lines,
     which is what makes the right column read as the body of the section. */
  .wp-block-columns.eco-stats__layout { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}
/* Core gives every column flex-basis:100%; under grid that would blow the
   track out, and min-width:0 is what lets a long Bulgarian label wrap
   instead of pushing the page sideways. */
.wp-block-columns.eco-stats__layout > .wp-block-column {
  flex-basis: auto !important;
  width: auto;
  min-width: 0;
}

/* A stats section with no h2 in the JSON emits no left column at all; without
   this the lone body column would sit in the narrow 22rem track. */
.wp-block-columns.eco-stats__layout > .wp-block-column:only-child { grid-column: 1 / -1; }

.eco-stats__title {
  margin-bottom: 0;
  text-wrap: balance;
}

/* ── The right column ───────────────────────────────────────────────────── */
.eco-stats__lead {
  color: var(--eco-muted);
  font-size: var(--fs-md);
  max-width: 34rem;
  margin: 0;
}

/* ── The figures ─────────────────────────────────────────────────────────
   Two columns at every width, including 375px: a "2x2" that collapses to a
   single column stops being the shape the section was designed around, and
   the values here are short enough to hold. A fifth or sixth item simply
   starts another row of two.
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-stats__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 4vw, var(--sp-7)) clamp(var(--sp-4), 3vw, var(--sp-6));
  align-items: start !important;
  margin-top: clamp(var(--sp-5), 3vw, var(--sp-7));
}
.wp-block-columns.eco-stats__figures > .wp-block-column {
  flex-basis: auto !important;
  width: auto;
  min-width: 0;
}

.eco-stats__figure {
  font-family: var(--font-display);
  font-weight: 800;
  /* Second only to the h2, deliberately: the figures are the reason the
     section exists. Derived from --fs-xl so it tracks the heading through the
     whole fluid scale and can never overtake it. */
  font-size: calc(var(--fs-xl) * 0.86);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--eco-green-cta);
  margin: 0 0 var(--sp-2);
  /* "1 200+" may wrap at the space on a narrow phone; it must never break
     mid-token and never widen the column. */
  overflow-wrap: break-word;
  hyphens: none;
}

.eco-stats__label {
  color: var(--eco-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
  margin: 0;
  text-wrap: pretty;
}

/* ── On a deep section ───────────────────────────────────────────────────
   The CTA green is an AA pairing against white, not against the deep blue
   gradient, so the figures switch to the cloud tint there. Both values are
   measured against the LIGHTEST end of --grad-deep (#1B63C4), not its
   average: cloud on that is 5.5:1, and white at 88% opacity composites to
   4.8:1. The theme's usual .82 white lands at 4.46:1 there, which is under
   AA for label-sized text, hence the higher alpha.
   ─────────────────────────────────────────────────────────────────────── */
.eco-section--deep .eco-stats__figure { color: var(--eco-cloud); }
.eco-section--deep .eco-stats__lead,
.eco-section--deep .eco-stats__label { color: rgba(255, 255, 255, 0.88); }

/* ── Motion ──────────────────────────────────────────────────────────────
   Nothing in this file animates. The only movement in the section is the
   shared count-up in eco-interactive.js, which is already gated on
   prefers-reduced-motion and leaves the real number in the HTML. This guard
   only covers the case where the scroll-reveal observer starts matching these
   elements after a future selector change.
   ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .eco-stats-split .eco-stats__item,
  .eco-stats-split .eco-stats__figure {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ── steps-aside ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   Steps — "aside" variant
   A sticky intro column on the left, the numbered steps as ROWS on the right.
   Rows, not cards: a process is one continuous thing, and eight cards in a
   grid is the sameness the client keeps objecting to. The only chrome is a
   hairline between one step and the next, and a filled disc carrying the
   number.

   Self-contained on purpose: every selector is anchored on .eco-steps-aside
   or .eco-steps-aside__*, so this file restyles nothing else and can load in
   any order relative to eco-clean.css. It deliberately does NOT reuse the
   .eco-steps class, so the row / line / cards variants are untouched.
   ========================================================================== */

/* ── Local sizing ────────────────────────────────────────────────────────
   Two local custom properties so the disc size and the row's left inset can
   never drift apart. Colour, space and type still come from the theme
   tokens; these only carry geometry.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-steps-aside__layout {
  --eco-aside-dot: clamp(2.4rem, 1.9rem + 1.6vw, 3rem);
  --eco-aside-gap: clamp(0.9rem, 0.7rem + 0.8vw, 1.35rem);
}

/* ── The two columns ─────────────────────────────────────────────────────
   Core ships .wp-block-columns{display:flex} and WordPress inlines it AFTER
   the theme stylesheet, so a single class loses on source order however late
   this file is enqueued. The pair .wp-block-columns.eco-steps-aside__layout
   scores (0,2,0) and wins on specificity instead.

   Single column first. The two-column shape starts at 900px, which is also
   where the left column starts sticking — one breakpoint for both, so the
   layout never sits in a state where a sticky element has nothing to scroll
   against.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-steps-aside__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  /* align-items stays `stretch` on purpose. `start` would shrink the left
     column to the height of its own text, and a sticky child can only travel
     as far as its parent is tall — the column has to span the full height of
     the rows beside it or nothing sticks. */
  align-items: stretch !important;
}

@media (min-width: 900px) {
  .wp-block-columns.eco-steps-aside__layout {
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

/* Core's own .wp-block-columns > .wp-block-column{flex-basis:0} ties at
   (0,2,0) and is inlined later, and its stacked-on-mobile rule
   .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
   scores (0,3,0), so these need !important to land. min-width:0 is what
   stops long Bulgarian words pushing the grid track wide and scrolling the
   page sideways at 375px. */
.wp-block-columns.eco-steps-aside__layout > .wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
  min-width: 0;
}

/* ── Left column: eyebrow, heading, lead ─────────────────────────────────
   Sticky is applied to the group INSIDE the column, not the column itself:
   the column is a grid item that stretches the full height of the row, and
   that height is exactly the distance the group needs to travel.

   The offset clears the sticky site header (topbar 38px + bar 76px = 114px)
   with room to breathe: 4rem + 3rem + 0.5rem = 7.5rem = 120px.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-group.eco-steps-aside__aside {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .wp-block-group.eco-steps-aside__aside {
    position: sticky;
    top: calc(var(--sp-8) + var(--sp-7) + var(--sp-2));
    /* A viewport shorter than the aside would strand the bottom of it out of
       reach; capping the height and letting it scroll keeps everything
       readable on a laptop in landscape. */
    max-height: calc(100vh - var(--sp-8) - var(--sp-7) - var(--sp-6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* The eyebrow: a short thick vertical bar, then the label. Solid
   --eco-green, not a gradient — a 4px by 1.15em bar is nowhere near the 4rem
   below which gradients turn to mud. inline-flex keeps the bar on the label's
   own line rather than floating beside the heading. */
.eco-steps-aside__aside .eco-steps-aside__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--eco-green-cta);
}
.eco-steps-aside__aside .eco-steps-aside__eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 1.15em;
  border-radius: 2px;
  background: var(--eco-green);
  pointer-events: none;
}

.eco-steps-aside__aside .eco-steps-aside__title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--eco-blue-dark);
  text-wrap: balance;
}

.eco-steps-aside__aside .eco-steps-aside__lead {
  margin: 0;
  max-width: 34rem;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--eco-muted);
}

/* ── Right column: the steps as rows ─────────────────────────────────────
   The counter is reset on the layout rather than the column so it survives
   the client moving the heading or the rows around in the editor.
   ──────────────────────────────────────────────────────────────────────── */
.wp-block-columns.eco-steps-aside__layout {
  counter-reset: eco-aside-step;
}

/* The number sits in an absolutely positioned pseudo-element on the row
   group, and the row is simply padded out of its way. That is deliberate:
   WordPress may wrap a group's children in .wp-block-group__inner-container,
   so any grid or flex set on the group would lay out that single wrapper
   instead of the heading and the paragraph. Padding + a pseudo-element
   behaves identically in both shapes. */
.wp-block-group.eco-steps-aside__row {
  position: relative;
  margin: 0;
  padding: clamp(1.35rem, 2.4vw, 1.9rem) 0;
  padding-inline-start: calc(var(--eco-aside-dot) + var(--eco-aside-gap));
  overflow-wrap: break-word;
  hyphens: manual;
}

/* No rule after the last row, and none before the first: an adjacent-sibling
   border draws only between rows, so nothing has to be turned off at the
   ends. */
.wp-block-group.eco-steps-aside__row + .wp-block-group.eco-steps-aside__row {
  border-top: 1px solid var(--eco-line);
}

/* First row pulled flush with the top of the aside heading. */
.wp-block-group.eco-steps-aside__row:first-child { padding-top: 0; }
.wp-block-group.eco-steps-aside__row:last-child { padding-bottom: 0; }

/* The filled disc.
   --eco-green-cta, never --eco-green: white on #3A841F measures 4.67:1,
   white on #4CAF2A only 2.81:1. Working shown at the foot of this file. */
.wp-block-group.eco-steps-aside__row::before {
  counter-increment: eco-aside-step;
  content: counter(eco-aside-step);
  position: absolute;
  inset-block-start: clamp(1.35rem, 2.4vw, 1.9rem);
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: var(--eco-aside-dot);
  height: var(--eco-aside-dot);
  border-radius: 50%;
  background: var(--eco-green-cta);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: none;
}
.wp-block-group.eco-steps-aside__row:first-child::before { inset-block-start: 0; }

.eco-steps-aside__row .eco-steps-aside__h {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--eco-blue-dark);
  transition: color .25s var(--ease);
}

.eco-steps-aside__row .eco-steps-aside__p {
  margin: 0;
  max-width: 42rem;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--eco-muted);
}

/* Both group shapes, so a stray core margin cannot open a gap under the last
   line and throw the hairline off centre. */
.eco-steps-aside__row > :last-child,
.eco-steps-aside__row > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }

.eco-steps-aside__row:hover .eco-steps-aside__h { color: var(--eco-green-cta); }

/* ── Dark section tone ───────────────────────────────────────────────────
   On `deep` the section paints --grad-deep and --eco-line all but vanishes,
   so the hairline and the body copy switch to translucent white. The
   paragraph runs at .88, not the theme's usual .82: over the LIGHTEST pixel
   of that gradient (#1B63C4) .82 measures 4.44:1 and misses AA. Working at
   the foot of this file.
   ──────────────────────────────────────────────────────────────────────── */
.eco-section--deep .eco-steps-aside__aside .eco-steps-aside__title { color: #fff; }
.eco-section--deep .eco-steps-aside__aside .eco-steps-aside__lead { color: rgba(255, 255, 255, .88); }
.eco-section--deep .eco-steps-aside__aside .eco-steps-aside__eyebrow { color: #fff; }
.eco-section--deep .wp-block-group.eco-steps-aside__row + .wp-block-group.eco-steps-aside__row {
  border-top-color: rgba(255, 255, 255, .24);
}
.eco-section--deep .eco-steps-aside__row .eco-steps-aside__h { color: #fff; }
.eco-section--deep .eco-steps-aside__row .eco-steps-aside__p { color: rgba(255, 255, 255, .88); }
.eco-section--deep .eco-steps-aside__row:hover .eco-steps-aside__h { color: #fff; }

/* On `cloud` the rows sit straight on the tint. Nothing to do: the rows have
   no fill of their own, which is exactly why they survive every tone. */

@media (prefers-reduced-motion: reduce) {
  .eco-steps-aside__row .eco-steps-aside__h { transition: none; }
  .wp-block-group.eco-steps-aside__aside { scroll-behavior: auto; }
}

/* ==========================================================================
   Contrast working
   (WCAG relative luminance, sRGB, then (L1+0.05)/(L2+0.05).)

   1. White numeral on the disc, --eco-green-cta #3A841F
      R 58/255=0.2275 -> 0.0423   G 132/255=0.5176 -> 0.2307
      B 31/255=0.1216 -> 0.0137
      L = 0.2126(0.0423) + 0.7152(0.2307) + 0.0722(0.0137) = 0.1750
      vs #fff: 1.05 / 0.2250 = 4.67:1   PASS (AA normal text)

      The same numeral on --eco-green #4CAF2A would be:
      L = 0.2126(0.0723) + 0.7152(0.4286) + 0.0722(0.0232) = 0.3236
      1.05 / 0.3736 = 2.81:1   FAIL. Hence the disc is never --eco-green.

   2. Body copy on the `deep` tone. --grad-deep runs #12376E -> #1B63C4, so
      the LIGHTEST pixel any text can land on is #1B63C4:
      R 27/255=0.1059 -> 0.0110   G 99/255=0.3882 -> 0.1251
      B 196/255=0.7686 -> 0.5520
      L = 0.2126(0.0110) + 0.7152(0.1251) + 0.0722(0.5520) = 0.1317

      rgba(#fff, .82) over it composites to #D6E3F4, L = 0.7566
      -> 0.8066 / 0.1817 = 4.44:1   FAIL, by a hair.
      rgba(#fff, .88) over it composites to #E4ECF8, L = 0.8328
      -> 0.8828 / 0.1817 = 4.86:1   PASS. That is the value used above.

      Pure white on the same pixel: 1.05 / 0.1817 = 5.78:1   PASS, so the
      headings and the eyebrow stay solid white.
   ========================================================================== */

/* ── steps-mosaic ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   Steps — "mosaic" variant
   A 3x2 chessboard: dark text cells alternating with photographs, gapless,
   clipped to one rounded plate. Text cells carry a ghost numeral behind the
   heading. Below 800px everything stacks in source order and keeps its
   numeral.

   Self-contained: every selector below is scoped to .eco-steps-mosaic.

   Specificity note — core's block CSS (.wp-block-columns{display:flex}) is
   inlined AFTER the theme stylesheet, so the grid is claimed at (0,2,0) via
   .wp-block-columns.eco-steps-mosaic, never at (0,1,0).
   ========================================================================== */

/* ── The plate ──────────────────────────────────────────────────────────── */
.wp-block-columns.eco-steps-mosaic {
  display: grid;
  grid-template-columns: 1fr;            /* mobile first: source order stack */
  gap: 0;                                /* a mosaic, not a card row */
  margin-block: 0;
  counter-reset: eco-steps-mosaic;
  border-radius: var(--radius-lg);
  overflow: hidden;                      /* clips the plate corners and the
                                            oversized ghost numerals, so the
                                            body never scrolls sideways */
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

/*
 * The column count follows the number of cells, not a fixed 3. A four-step
 * process in a three-column mosaic leaves a 3 + 1 row whose two empty cells
 * render as a white void inside the dark plate, because the plate's background
 * spans the whole grid whether or not a cell sits on it.
 *
 * One row on the widest screens, two across in between, one on a phone.
 */
@media (min-width: 700px) and (max-width: 1099px) {
  .wp-block-columns.eco-steps-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(clamp(12rem, 20vw, 16rem), auto);
  }
}
@media (min-width: 1100px) {
  .wp-block-columns.eco-steps-mosaic {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(clamp(13rem, 19vw, 17rem), auto);
  }
}

/* Core sizes columns with flex-basis; under grid that has to be neutralised
   or a column can refuse to shrink below its content. */
.wp-block-columns.eco-steps-mosaic > .wp-block-column {
  flex-basis: auto;
  width: auto;
  min-width: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}

/* ── Text cells ─────────────────────────────────────────────────────────── */
.wp-block-columns.eco-steps-mosaic > .eco-steps-mosaic__cell--text {
  counter-increment: eco-steps-mosaic;
  background: var(--eco-blue-dark);
  color: var(--eco-cloud);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
}

.eco-steps-mosaic .eco-steps-mosaic__title {
  position: relative;                    /* stacking context, so the numeral's
                                            z-index: -1 stays above the cell
                                            background and below this text */
  z-index: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.15;
  color: var(--eco-cloud);
}

/* The ghost numeral. Decorative: it repeats the order the source already
   carries, so it is CSS-generated, never clickable, and never announced as a
   control. */
.eco-steps-mosaic .eco-steps-mosaic__title::before {
  content: counter(eco-steps-mosaic, decimal-leading-zero);
  position: absolute;
  z-index: -1;
  left: -0.08em;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 3.6em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--eco-cloud);
  opacity: .12;
  pointer-events: none;
  user-select: none;
}

.eco-steps-mosaic .eco-steps-mosaic__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--eco-cloud);
  opacity: .86;
  max-width: 34ch;
}

/* The button needs room; flush against the paragraph it reads as broken. */
.eco-steps-mosaic .wp-block-buttons.eco-steps-mosaic__cta {
  margin-top: var(--sp-2);
  gap: var(--sp-3);
}

/* Solid, whatever tone the surrounding section carries. At (0,5,0) this clears
   both the theme's own button rules and core's inlined ones, in either source
   order. */
.eco-steps-mosaic .wp-block-buttons.eco-steps-mosaic__cta .wp-block-button > .wp-block-button__link {
  background: var(--eco-green-dark);   /* --eco-cloud on this clears 4.5:1;
                                          on --eco-green-cta it would not */
  color: var(--eco-cloud);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: none;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}

/* Hover keeps the fill, so the label's contrast is the same in every state. */
.eco-steps-mosaic .wp-block-buttons.eco-steps-mosaic__cta .wp-block-button > .wp-block-button__link:hover,
.eco-steps-mosaic .wp-block-buttons.eco-steps-mosaic__cta .wp-block-button > .wp-block-button__link:focus-visible {
  box-shadow: 0 0 0 2px var(--eco-cloud);
  transform: translateY(-2px);
}

/* ── Photograph cells ───────────────────────────────────────────────────── */
.wp-block-columns.eco-steps-mosaic > .eco-steps-mosaic__cell--photo {
  padding: 0;
  background: var(--eco-cloud);          /* holds the cell while the image
                                            decodes, so the plate never flashes
                                            through */
}

@media (max-width: 799px) {
  .wp-block-columns.eco-steps-mosaic > .eco-steps-mosaic__cell--photo {
    aspect-ratio: 4 / 3;                 /* stacked, the cell has no row to
                                            inherit a height from */
  }
  /* Stacked, a text cell is only as tall as its copy, so the numeral needs
     room above the heading or the cell's clip cuts its top off. */
  .wp-block-columns.eco-steps-mosaic > .eco-steps-mosaic__cell--text {
    padding: var(--sp-6) var(--sp-5);
  }
  .eco-steps-mosaic .eco-steps-mosaic__title::before {
    font-size: 2.9em;
  }
}

.eco-steps-mosaic .eco-steps-mosaic__photo {
  margin: 0;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
}

.eco-steps-mosaic .eco-steps-mosaic__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1);
  transition: transform .6s var(--ease);
}

.eco-steps-mosaic .eco-steps-mosaic__cell--photo:hover .eco-steps-mosaic__photo img {
  transform: scale(1.04);
}

/* ── Motion preferences ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .eco-steps-mosaic .eco-steps-mosaic__photo img,
  .eco-steps-mosaic .eco-steps-mosaic__cell--photo:hover .eco-steps-mosaic__photo img,
  .eco-steps-mosaic .wp-block-buttons.eco-steps-mosaic__cta .wp-block-button > .wp-block-button__link:hover,
  .eco-steps-mosaic .wp-block-buttons.eco-steps-mosaic__cta .wp-block-button > .wp-block-button__link:focus-visible {
    transform: none;
    transition: none;
  }
}

/* ── strip-dark ─────────────────────────────────────────────── */
@charset "UTF-8";
/* ==========================================================================
   Stats, "strip" variant — eco-strip-dark
   A full-bleed dark band divided by thin vertical rules, each cell led by a
   circular icon badge that straddles the top edge of the band.

   Self-contained: every rule below is scoped to .eco-strip-dark* (the two
   exceptions are scoped INSIDE it — the shared .eco-head used by the optional
   lead, and the shared eco-ico-* chip whose size and shape the badge
   overrides). Nothing outside this component is restyled.

   Not yet enqueued: inc/assets.php loads assets/css/eco-clean.css only. Add
   a wp_enqueue_style for assets/css/parts/*.css (versioned with
   eco_asset_version(), not ECO_VERSION) when the parallel batch of parts is
   wired up. Kept out of eco-clean.css on purpose: several agents are editing
   this tree at once.
   ========================================================================== */

.wp-block-group.eco-strip-dark {
	/* Locals, so the badge size is stated once and the padding follows it. */
	--eco-strip-dark-badge: 3.5rem;
	--eco-strip-dark-fg: rgb(255 255 255);
	--eco-strip-dark-fg-soft: rgb(255 255 255 / .88);   /* 4.87:1 on the band */
	--eco-strip-dark-ghost: rgb(255 255 255 / .68);     /* 3.57:1, large text  */
	--eco-strip-dark-rule: rgb(255 255 255 / .18);

	width: 100%;
	max-width: none;
	margin-inline: 0;
	/* Room for the half of each badge that hangs above the band. */
	margin-block-start: var(--sp-6);
	padding-block: 0;
	background: var(--grad-deep);
	color: var(--eco-strip-dark-fg);
	/* The badges break the top edge deliberately: never clip them. */
	overflow: visible;
}

/* The grid is inset to the page measure while the band itself runs edge to
   edge. Both group shapes handled: WordPress wraps a group's children in
   .wp-block-group__inner-container, so the width has to land on whichever of
   the two is actually rendered. */
.wp-block-group.eco-strip-dark > .wp-block-group__inner-container,
.wp-block-group.eco-strip-dark > * {
	width: min(100% - 2.5rem, var(--wrap));
	margin-inline: auto;
}
@media (min-width: 768px) {
	.wp-block-group.eco-strip-dark > .wp-block-group__inner-container,
	.wp-block-group.eco-strip-dark > * {
		width: min(100% - 4rem, var(--wrap));
	}
}

/* ── Optional heading, above the band ─────────────────────────────────────
   The badges own the top edge of the band, so a heading cannot sit inside it.
   It runs above instead, on the page background, in the shared .eco-head. */
.wp-block-group.eco-strip-dark__lead > .wp-block-group__inner-container,
.wp-block-group.eco-strip-dark__lead > * {
	width: min(100% - 2.5rem, var(--wrap));
	margin-inline: auto;
}
@media (min-width: 768px) {
	.wp-block-group.eco-strip-dark__lead > .wp-block-group__inner-container,
	.wp-block-group.eco-strip-dark__lead > * {
		width: min(100% - 4rem, var(--wrap));
	}
}
.wp-block-group.eco-strip-dark__lead {
	padding-block-start: var(--sp-8);
}
.eco-strip-dark__lead .eco-head {
	margin-bottom: 0;
	max-width: 46rem;
}

/* ── The four cells ──────────────────────────────────────────────────────
   Core ships .wp-block-columns{display:flex} and WordPress inlines it AFTER
   the theme stylesheet, so a single-class grid loses and silently falls back
   to flex. The modifier class raises this to (0,3,0), which core's (0,1,0)
   and (0,2,0) layout rules cannot beat regardless of source order. */
.wp-block-columns.eco-strip-dark__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: stretch !important;
}
.wp-block-columns.eco-strip-dark__grid.eco-strip-dark__grid--4 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}
@media (min-width: 480px) {
	.wp-block-columns.eco-strip-dark__grid,
	.wp-block-columns.eco-strip-dark__grid.eco-strip-dark__grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 800px) {
	.wp-block-columns.eco-strip-dark__grid,
	.wp-block-columns.eco-strip-dark__grid.eco-strip-dark__grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Core sizes columns with flex-basis; in a grid that has to be undone or the
   cells stop being equal. min-width:0 keeps a long numeral from widening the
   track and pushing the page sideways. */
.wp-block-columns.eco-strip-dark__grid > .wp-block-column {
	flex-basis: auto;
	width: auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-block-start: 0;
	border-inline-start: 0;
}

/* Thin rules between cells, drawn as real borders so they span the full band
   height and never need a pseudo-element. Written for any item count: the
   first cell of each row drops its left rule, later rows gain a top one. */
.wp-block-columns.eco-strip-dark__grid > .wp-block-column:nth-child(n + 2) {
	border-block-start: 1px solid var(--eco-strip-dark-rule);
}
@media (min-width: 480px) {
	.wp-block-columns.eco-strip-dark__grid > .wp-block-column {
		border-inline-start: 1px solid var(--eco-strip-dark-rule);
		border-block-start: 0;
	}
	.wp-block-columns.eco-strip-dark__grid > .wp-block-column:nth-child(2n + 1) {
		border-inline-start: 0;
	}
	.wp-block-columns.eco-strip-dark__grid > .wp-block-column:nth-child(n + 3) {
		border-block-start: 1px solid var(--eco-strip-dark-rule);
	}
}
@media (min-width: 800px) {
	.wp-block-columns.eco-strip-dark__grid > .wp-block-column:nth-child(2n + 1) {
		border-inline-start: 1px solid var(--eco-strip-dark-rule);
	}
	.wp-block-columns.eco-strip-dark__grid > .wp-block-column:nth-child(4n + 1) {
		border-inline-start: 0;
	}
	.wp-block-columns.eco-strip-dark__grid > .wp-block-column:nth-child(n + 3) {
		border-block-start: 0;
	}
	.wp-block-columns.eco-strip-dark__grid > .wp-block-column:nth-child(n + 5) {
		border-block-start: 1px solid var(--eco-strip-dark-rule);
	}
}

/* The cell. Both group shapes again: if WordPress emits an inner container,
   it becomes the flex parent instead of the group itself. */
.wp-block-group.eco-strip-dark__cell,
.wp-block-group.eco-strip-dark__cell > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	text-align: center;
	width: 100%;
	flex: 1 1 auto;
}
.wp-block-group.eco-strip-dark__cell {
	position: relative;
	/* Top padding clears the half badge that sits above this edge. */
	padding-block: calc(var(--eco-strip-dark-badge) / 2 + var(--sp-6)) var(--sp-7);
	padding-inline: var(--sp-4);
	justify-content: flex-start;
}
@media (min-width: 800px) {
	.wp-block-group.eco-strip-dark__cell {
		padding-inline: var(--sp-5);
	}
}

/* ── The badge on the top edge ───────────────────────────────────────────
   Reuses the shared eco-ico-* chip for the glyph and overrides its box: a
   circle, half in and half out of the band. The chip artwork is drawn in
   --eco-green-dark, so the disc has to stay light; flat fill, no gradient,
   at this size a gradient is decoration for its own sake. The 1px line keeps
   the upper half readable where it overlaps the page background above. */
.wp-block-group.eco-strip-dark__cell[class*="eco-ico-"]::before {
	content: '';
	position: absolute;
	top: 0;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: var(--eco-strip-dark-badge);
	height: var(--eco-strip-dark-badge);
	margin: 0;
	border-radius: 50%;
	border: 1px solid var(--eco-line);
	background-color: var(--eco-cloud);
	background-size: 45% 45%;
	box-shadow: var(--shadow-sm);
	/* Decoration must never swallow a click. */
	pointer-events: none;
	transition: transform .25s var(--ease);
}
.wp-block-group.eco-strip-dark__cell:hover::before {
	transform: translate(-50%, -50%) scale(1.05);
}

/* ── Type ────────────────────────────────────────────────────────────────
   The numeral is a ghost: large, quiet, well past the 18.66px-bold large-text
   threshold at every viewport, so 3:1 governs it and it clears that. The
   supporting line and the label are normal text and clear 4.5:1. */
.eco-strip-dark__num {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--fs-2xl);
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--eco-strip-dark-ghost);
	max-width: 100%;
	overflow-wrap: break-word;
}
@media (max-width: 799px) {
	.eco-strip-dark__num { font-size: var(--fs-3xl); }
}

.eco-strip-dark__text {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--eco-strip-dark-fg-soft);
	max-width: 22ch;
}

.eco-strip-dark__label {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-base);
	line-height: 1.3;
	color: var(--eco-strip-dark-fg);
	max-width: 20ch;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.wp-block-group.eco-strip-dark__cell[class*="eco-ico-"]::before {
		transition: none;
	}
	.wp-block-group.eco-strip-dark__cell:hover::before {
		transform: translate(-50%, -50%);
	}
}

/* ══ END generated: section variant parts ══ */