/* Ecology-Care — shared page scaffolding on the re-themed token sheet (_ds/…/styles.css).
   28px leading rhythm, 14px half-step. Navy #0b2545 / blue #1b6ce8 / teal #0e9f8a on white.
   Review pass: icons only where functional, one boxed moment per screen, numbered service
   index instead of card grid, quiet uppercase trust row, motion on a few blocks only. */
:root { --leading: 28px; --half: 14px; --edge: clamp(20px, 5vw, 72px); --measure: 58ch; --shell: 1200px; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-size: 17px; line-height: var(--leading); text-wrap: pretty; overflow-x: clip; }
a:hover { color: var(--color-accent-600); }
.btn-primary, .btn-primary:hover, .btn-primary:active,
.nav .btn-primary, .nav .btn-primary:hover, .nav .btn-primary:active { color: #fff; }
.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 var(--edge); }
.ic { width: 22px; height: 22px; flex: none; }

/* — [REQUIRED INPUT] marker — annotation chrome, not part of the design — */
.req { display: inline-flex; align-items: center; vertical-align: middle;
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700; line-height: 1.4;
  letter-spacing: 0.05em; text-transform: uppercase; max-width: 100%; box-sizing: border-box;
  padding: 4px 9px; border-radius: 12px;
  border: 1.5px dashed var(--color-accent-400);
  color: var(--color-accent-700); background: var(--color-accent-100); }
.dark-patch .req { background: transparent; border-color: var(--color-accent-400); color: var(--color-accent-300); }

/* — sticky header — */
/* above .mobile-bar (60): on a short phone the open menu needs the bar's strip of
   screen, and whatever the bar covers is untappable */
.sitehead { position: sticky; top: 0; z-index: 70;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent); }
.nav { padding-inline: max(var(--edge), calc((100% - var(--shell)) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; color: inherit; }
.brand-logo { height: 44px; width: auto; display: block; }
.brand-name { font-family: var(--font-heading); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; line-height: 1.1; }
.brand-sub { display: block; font-family: var(--font-body); font-weight: 600; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px !important; color: inherit; padding-block: 12px; }
.nav-phone .ic { width: 17px; height: 17px; color: var(--color-accent); }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .ic { width: 14px; height: 14px; transition: rotate 0.15s; }
.menu[open] > summary .ic { rotate: 180deg; }
.menu > summary:hover { color: var(--color-accent); }
.menu-panel { position: absolute; top: calc(100% + 12px); left: -14px; min-width: 280px;
  background: var(--color-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  padding: var(--space-2); display: grid; }
.menu-panel a { display: flex; align-items: center; padding: 10px 14px; border-radius: 999px; font-size: 14px; min-height: 40px; box-sizing: border-box; }
.menu-panel a:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.mnav { display: none; }
.mnav > summary { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-neutral-100); }
.mnav > summary:hover { background: var(--color-accent-100); }
/* The panel hangs from the header and is clipped by max-height, so anything past the
   clip is visible-but-untappable. Budget it against the real viewport: dvh (so iOS's
   shrinking toolbars count), less the header above and the fixed call bar below. */
.mnav .menu-panel { left: auto; right: 0; min-width: 264px;
  max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px);
  overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* set by site.js while there is more list below the fold — a cut-off row on its own
   reads as a rendering fault, not as something you can scroll */
.mnav .menu-panel.has-more { box-shadow: var(--shadow-lg),
  inset 0 -26px 20px -20px color-mix(in srgb, var(--color-text) 34%, transparent); }
@media (max-width: 720px) {
  .mnav .menu-panel { max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); padding: 6px; }
  .mnav .menu-panel a { min-height: 44px; padding: 8px 14px; }
}

/* — hero — */
.hero { position: relative; padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.hero::before { content: ""; position: absolute; right: -160px; top: -240px; width: 460px; height: 460px;
  border-radius: 50%; background: var(--color-accent-2-200); pointer-events: none; z-index: -1; }
@media (max-width: 1420px) { .hero::before { right: -60px; } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--leading) clamp(24px, 5vw, 88px); align-items: center; }
.display { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.12; letter-spacing: -0.025em; margin: 0;
  max-width: 21ch; text-wrap: balance; }
.display .eco { color: var(--color-accent-2-600); }
.hero .sub { font-size: 18px; line-height: var(--leading); max-width: var(--measure);
  margin: var(--leading) 0 0; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--leading); }
.btn-lg { font-size: 15px; padding: 13px 24px; min-height: 48px; }
.hero-note { display: inline-flex; align-items: center; gap: 8px; margin-top: calc(1.25 * var(--half));
  font-size: 14.5px; font-weight: 600; color: var(--color-accent-2-700); }
a.hero-note { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--color-accent-2-600) 45%, transparent); }
a.hero-note:hover { color: var(--color-accent-2-800); text-decoration-color: currentColor; }
.hero-figure { position: relative; margin: 0; width: min(440px, 100%); justify-self: end; }
.hero-photo { border-radius: 999px 999px calc(1.6 * var(--radius-lg)) calc(1.6 * var(--radius-lg));
  overflow: hidden; box-shadow: var(--shadow-md); }
.hero-photo image-slot { display: block; width: 100%; aspect-ratio: 4 / 4.9; }
.hero-rosette { position: absolute; top: 2px; right: -14px; width: 96px; height: 96px; border-radius: 50%;
  background: var(--color-text); color: #fff; display: grid; place-content: center; text-align: center;
  rotate: 7deg; box-shadow: var(--shadow-md); }
.hero-rosette strong { font-family: var(--font-heading); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.hero-rosette span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px; opacity: 0.85; }

/* — trust row: quiet, text-only — */
.trust { border-block: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px calc(1.5 * var(--leading));
  padding: calc(0.6 * var(--leading)) 0; align-items: center; }
.trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 72%, transparent); }

/* — section chrome — */
section.block { padding: calc(2.5 * var(--leading)) 0 calc(1.5 * var(--leading)); }
.kicker { display: block; font-size: 13px; line-height: var(--half); letter-spacing: 0.07em;
  text-transform: uppercase; font-weight: 700; color: var(--color-accent-700);
  margin: 0 0 calc(var(--leading) - var(--half)); }
.h-section { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; margin: 0; max-width: 24ch; text-wrap: balance; }
.lede { font-size: 17px; max-width: var(--measure); margin: var(--half) 0 0;
  color: color-mix(in srgb, var(--color-text) 76%, transparent); }

/* — services index — */
.svc-list { margin-top: calc(1.25 * var(--leading)); border-top: 1px solid var(--color-divider); }
.svc-row { display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 6fr) 26px;
  gap: 2px 20px; align-items: baseline; padding: 19px 2px;
  border-bottom: 1px solid var(--color-divider); text-decoration: none; color: inherit; }
.svc-num { font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; color: var(--color-accent-600); }
.svc-name { font-family: var(--font-heading); font-weight: 700; font-size: 18px;
  letter-spacing: -0.015em; line-height: 1.25; transition: color 0.15s; }
.svc-desc { font-size: 14.5px; line-height: 22px; color: color-mix(in srgb, var(--color-text) 68%, transparent); }
.svc-arrow { align-self: center; color: var(--color-accent); }
.svc-arrow .ic { width: 18px; height: 18px; transition: translate 0.15s; }
.svc-row:hover .svc-name, .svc-row:hover { color: var(--color-accent-600); }
.svc-row:hover .svc-desc { color: color-mix(in srgb, var(--color-text) 68%, transparent); }
.svc-row:hover .svc-arrow .ic { translate: 4px 0; }
.svc-row:active .svc-name { color: var(--color-accent-700); }
.svc-more { margin: var(--leading) 0 0; font-size: 14.5px; line-height: 22px;
  color: color-mix(in srgb, var(--color-text) 66%, transparent); max-width: 58ch; }

/* — eco difference patch — */
.eco-patch { position: relative; overflow: hidden; background: var(--color-accent-2-100);
  border-radius: calc(1.6 * var(--radius-lg));
  padding: calc(1.75 * var(--leading)) clamp(24px, 4vw, 64px); }
#difference .eco-patch::after { content: ""; position: absolute; right: -150px; bottom: -210px;
  width: 420px; height: 420px; border-radius: 50%; background: var(--color-accent-2-200); }
.eco-patch > * { position: relative; z-index: 1; }
.eco-patch .kicker { color: var(--color-accent-2-700); }
.eco-check { list-style: none; margin: calc(1.25 * var(--leading)) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--leading) clamp(24px, 5vw, 72px); max-width: 1000px; }
.eco-check li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.eco-check .tick { width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent-2-600);
  color: #fff; display: grid; place-items: center; margin-top: 2px; }
.eco-check .tick .ic { width: 15px; height: 15px; }
.eco-check strong { display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: 16.5px; letter-spacing: -0.015em; line-height: 24px; }
.eco-check span { font-size: 15px; line-height: 23px; color: color-mix(in srgb, var(--color-text) 74%, transparent); }
.eco-note { margin: calc(1.25 * var(--leading)) 0 0; font-size: 15.5px; font-weight: 600;
  color: var(--color-accent-2-800); max-width: 52ch; }

/* — urgent band — */
.urgent-patch { background: var(--color-accent-100); border-radius: calc(1.6 * var(--radius-lg));
  padding: calc(1.5 * var(--leading)) clamp(24px, 4vw, 64px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--leading) clamp(24px, 4vw, 72px);
  align-items: center; }
.urgent-patch h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0; }
.urgent-patch .lede { font-size: 16px; }
.urgent-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.urgent-form .input { background: var(--color-bg); border-color: color-mix(in srgb, var(--color-text) 12%, transparent); min-height: 46px; }
.urgent-form .btn { grid-column: 1 / -1; }
.form-fine { grid-column: 1 / -1; font-size: 13px; margin: 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent); }

/* — steps: ghost numerals — */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--leading) calc(1.25 * var(--leading)); margin-top: calc(1.25 * var(--leading)); }
.step-num { display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: 44px; line-height: 1; letter-spacing: -0.02em;
  color: var(--color-accent-500); margin-bottom: 12px; }
.step h3 { font-size: 18px; margin: 0 0 6px; }
.step p { font-size: 14.5px; line-height: 22px; margin: 0; color: color-mix(in srgb, var(--color-text) 72%, transparent); }

/* — reviews: plain columns — */
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--leading) calc(1.25 * var(--leading)); margin-top: calc(1.25 * var(--leading)); }
.stars { display: flex; gap: 2px; color: var(--color-accent); }
.stars .ic { width: 14px; height: 14px; }
.review .card-body { font-size: 15.5px; line-height: 24px; margin: 10px 0 12px;
  color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.review .card-meta { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* — commercial (dark band) — */
.dark-patch { position: relative; overflow: hidden; background: var(--color-text); color: #fff;
  border-radius: calc(1.6 * var(--radius-lg));
  padding: calc(1.75 * var(--leading)) clamp(24px, 4vw, 64px); }
.dark-patch::before { content: ""; position: absolute; right: -150px; top: -190px; width: 430px; height: 430px;
  border-radius: 50%; background: color-mix(in srgb, var(--color-accent-2-400) 14%, transparent); }
.dark-grid { position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--leading) clamp(24px, 4vw, 72px); }
.dark-patch .kicker { color: var(--color-accent-2-300); }
.dark-patch h2 { color: #fff; }
.dark-patch .lede { color: color-mix(in srgb, #fff 76%, transparent); }
.dark-patch a { color: var(--color-accent-300); }
.com-list { list-style: none; margin: var(--leading) 0 0; padding: 0; display: grid; gap: var(--half); }
.com-list li { display: flex; gap: 12px; align-items: baseline; font-size: 16px;
  color: color-mix(in srgb, #fff 86%, transparent); }
.com-list .ic { width: 17px; height: 17px; color: var(--color-accent-2-400); translate: 0 3px; }
.sectors { display: flex; flex-wrap: wrap; gap: var(--space-2); align-content: center; }
.sector { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px;
  background: color-mix(in srgb, #fff 8%, transparent); border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  font-size: 14px; font-weight: 600; }

/* — service areas: ruled columns, no boxes — */
.area-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--leading) calc(1.25 * var(--leading)); margin-top: calc(1.25 * var(--leading)); }
.area { border-top: 2px solid var(--color-accent-2-300); padding-top: 16px; }
.area h3 { font-size: 17px; margin: 0 0 var(--half); }
.area ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--space-4); }
.area li { font-size: 14.5px; line-height: 26px; color: color-mix(in srgb, var(--color-text) 72%, transparent);
  break-inside: avoid; }

/* — FAQ: ruled list, no boxes — */
.faq { max-width: none; margin-top: calc(1.25 * var(--leading));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 5vw, 72px); align-items: start; }
.faq details { border-bottom: 1px solid var(--color-divider); }
.faq details:nth-child(1), .faq details:nth-child(2) { border-top: 1px solid var(--color-divider); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 17px 2px; font-weight: 600; font-size: 16px; min-height: 44px; box-sizing: border-box; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { margin-left: auto; width: 18px; height: 18px; color: var(--color-accent);
  transition: rotate 0.15s; }
.faq details[open] summary .ic { rotate: 180deg; }
.faq summary:hover { color: var(--color-accent-600); }
.faq .a { padding: 0 2px 20px; font-size: 15px; line-height: 24px; max-width: 62ch;
  color: color-mix(in srgb, var(--color-text) 76%, transparent); }
.faq .a p { margin: 0 0 10px; } .faq .a p:last-child { margin: 0; }

/* — footer — */
.foot { background: var(--color-text); color: color-mix(in srgb, #fff 78%, transparent);
  margin-top: calc(2 * var(--leading)); font-size: 14px; line-height: 24px; }
.foot .wrap { padding-block: calc(1.75 * var(--leading)) var(--leading); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr)); gap: var(--leading); }
.foot h3 { color: #fff; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  font-family: var(--font-body); font-weight: 700; margin: 0 0 var(--half); }
.foot a { color: color-mix(in srgb, #fff 78%, transparent); text-decoration: none; }
.foot a:hover { color: #fff; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot .brand-logo { background: #fff; border-radius: 10px; padding: 4px 8px; height: 48px; }
.foot .brand-name { color: #fff; }
.foot .brand-sub { color: color-mix(in srgb, #fff 55%, transparent); }
.foot-phone { font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: #fff !important;
  letter-spacing: -0.01em; }
.foot-legal { border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
  margin-top: calc(1.25 * var(--leading)); padding-top: var(--leading);
  display: flex; flex-wrap: wrap; gap: var(--half) var(--leading); font-size: 12.5px;
  color: color-mix(in srgb, #fff 65%, transparent); align-items: center; }
.foot-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--leading) clamp(24px, 4vw, 64px);
  padding-bottom: calc(1.25 * var(--leading)); margin-bottom: calc(1.25 * var(--leading));
  border-bottom: 1px solid color-mix(in srgb, #fff 14%, transparent); }
.foot-cta h2 { color: #fff; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; margin: 0; }
.foot-cta p { margin: 8px 0 0; max-width: 46ch; font-size: 15px; color: color-mix(in srgb, #fff 68%, transparent); }
.foot-cta .cta-row { margin: 0; }
.btn-outline-light { background: transparent; border: 1.5px solid color-mix(in srgb, #fff 34%, transparent); }
.dark-patch .btn-outline-light, .foot .btn-outline-light { color: #fff; }
.btn-outline-light:hover { background: color-mix(in srgb, #fff 10%, transparent);
  border-color: color-mix(in srgb, #fff 55%, transparent); }

/* — misc — */
[id] { scroll-margin-top: 96px; }
.reveal { opacity: 0; translate: 0 16px; transition: opacity 0.55s ease, translate 0.55s ease; transition-delay: var(--rd, 0s); }
.reveal.in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: 0 0; transition: none; }
  .svc-arrow .ic, .menu > summary .ic, .faq summary .ic { transition: none; }
}
.foot :focus-visible, .dark-patch :focus-visible, .rail-call :focus-visible { outline-color: #fff; }
.mobile-bar { display: none; }

/* — responsive — */
@media (max-width: 1080px) {
  .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco-check { grid-template-columns: 1fr; max-width: 62ch; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .nav > a:not(.brand):not(.nav-phone):not(.btn), .nav .menu:not(.mnav) { display: none; }
  .mnav { display: block; }
  .nav { gap: var(--space-3); }
  .hero-grid, .dark-grid { grid-template-columns: 1fr; }
  .hero-figure { justify-self: start; width: min(400px, 100%); }
  .hero-photo image-slot { aspect-ratio: 4 / 4.4; }
  .urgent-patch { grid-template-columns: 1fr; }
  .area-cols { grid-template-columns: 1fr; }
  .area ul { columns: 3; }
}
@media (max-width: 720px) {
  body { padding-bottom: 84px; }
  .faq { grid-template-columns: 1fr; }
  .faq details:nth-child(2) { border-top: none; }
  section.block { padding: calc(1.75 * var(--leading)) 0 var(--leading); }
  .foot-grid { grid-template-columns: 1fr; }
  .hero { padding-top: calc(1.5 * var(--leading)); }
  .hero::before { width: 280px; height: 280px; top: -150px; }
  .hero-rosette { right: 2px; }
  .mobile-bar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    padding: 10px max(12px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-bg) 96%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
  .mobile-bar .btn { min-height: 48px; font-size: 15px; }
  .steps, .review-grid { grid-template-columns: 1fr; }
  .svc-row { grid-template-columns: 44px minmax(0, 1fr) 26px; row-gap: 3px; }
  .svc-name { grid-row: 1; grid-column: 2; }
  .svc-desc { grid-row: 2; grid-column: 2; }
  .svc-arrow { grid-row: 1; grid-column: 3; }
  .area ul { columns: 2; }
  .nav-phone span { display: none; }
  .nav-phone .ic { width: 20px; height: 20px; }
}
@media (max-width: 480px) {
  .nav > .btn { display: none; }
  .nav { gap: var(--space-2); }
}
@media (max-width: 400px) {
  .brand-sub { display: none; }
}
@media (max-width: 460px) {
  .urgent-form { grid-template-columns: 1fr; }
}

/* — detail-page chrome (service / about / areas pages) — */
.crumb { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 72%, transparent); margin-bottom: var(--half); }
.crumb a { color: inherit; text-decoration: none; display: inline-block; padding-block: 10px; margin-block: -10px; }
.crumb a:hover { color: var(--color-accent-600); }
.crumb .here { color: var(--color-accent-700); }
.minihero { position: relative; padding: calc(2 * var(--leading)) 0 calc(2 * var(--leading)); }
.minihero::before { content: ""; position: absolute; right: -120px; top: -260px; width: 420px; height: 420px;
  border-radius: 50%; background: var(--color-accent-200); pointer-events: none; z-index: -1; }
.minihero.sage::before { background: var(--color-accent-2-200); }
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--leading) clamp(24px, 5vw, 88px); align-items: center; }
.split-figure { margin: 0; width: min(460px, 100%); justify-self: end;
  border-radius: calc(1.6 * var(--radius-lg)); overflow: hidden; box-shadow: var(--shadow-md); }
.split-figure image-slot { width: 100%; aspect-ratio: 3 / 2.4; }
.covered { list-style: none; margin: calc(1.25 * var(--leading)) 0 0; padding: 0; display: grid; gap: var(--half); max-width: 58ch; }
.covered li { display: flex; gap: 12px; align-items: baseline; font-size: 16px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.covered .ic { width: 17px; height: 17px; color: var(--color-accent-2-600); translate: 0 3px; flex: none; }
.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(0.75 * var(--leading)); margin-top: calc(1.25 * var(--leading)); max-width: 980px; }
.opt .card-title { font-size: 18px; }
.opt .card-body { font-size: 15px; line-height: 23px; opacity: 1; color: color-mix(in srgb, var(--color-text) 74%, transparent); }
.eco-strip { display: flex; gap: 14px; align-items: flex-start; margin-top: calc(1.25 * var(--leading));
  background: var(--color-accent-2-100); border-radius: var(--radius-md); padding: 18px 22px; max-width: 980px; }
.eco-strip .ic { width: 22px; height: 22px; color: var(--color-accent-2-700); flex: none; margin-top: 3px; }
.eco-strip p { margin: 0; font-size: 15px; line-height: 24px; }
.cta-patch { background: var(--color-accent-100); border-radius: calc(1.6 * var(--radius-lg));
  padding: calc(1.5 * var(--leading)) clamp(24px, 4vw, 64px);
  display: flex; flex-wrap: wrap; gap: var(--leading); align-items: center; justify-content: space-between; }
.cta-patch h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); max-width: 22ch; }
.cta-patch .lede { margin-top: 6px; font-size: 16px; }
.area p { margin: 0; font-size: 14.5px; line-height: 22px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; }
  .split-figure { justify-self: start; width: min(560px, 100%); }
}
@media (max-width: 720px) {
  .opt-grid { grid-template-columns: 1fr; }
  .minihero::before { width: 280px; height: 280px; top: -170px; }
}

/* — large screens: wider shell from 1600px, then proportional upscale so 1440p/4K/ultrawide
   never see a narrow stamp. Zoom steps keep the effective layout viewport in the 1600–2000px
   sweet spot; media queries below 1600px are min-width-gated so mobile/tablet are untouched. — */
@media (min-width: 1600px) {
  :root { --shell: 1320px; }
  .display { font-size: 61px; }
  .h-section { font-size: 38px; }
  .hero-figure { width: min(470px, 100%); }
  .split-figure { width: min(500px, 100%); }
  .eco-check { max-width: 1120px; }
  .opt-grid, .eco-strip { max-width: 1080px; }
}
@media (min-width: 1920px) { body { zoom: 1.1; } }
@media (min-width: 2200px) { body { zoom: 1.25; } }
@media (min-width: 2480px) { body { zoom: 1.4; } }
@media (min-width: 2800px) { body { zoom: 1.6; } }
@media (min-width: 3200px) { body { zoom: 1.85; } }

/* — audit pass: current-page nav state, skip link, form states, minihero type — */
.nav > a[aria-current="page"] { color: var(--color-accent-700); font-weight: 700; }
.menu-panel a[aria-current="page"] { background: var(--color-accent-100); color: var(--color-accent-700); font-weight: 700; }
.skip { position: fixed; top: 12px; left: 12px; z-index: 100; background: var(--color-accent-700); color: #fff;
  padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none;
  translate: 0 -200%; }
.skip:focus { translate: 0 0; }
.skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.minihero .display { font-size: clamp(32px, 4vw, 50px); }
.minihero .sub { font-size: 18px; line-height: var(--leading); max-width: var(--measure); margin: var(--leading) 0 0;
  color: color-mix(in srgb, var(--color-text) 82%, transparent); }
textarea.input { resize: vertical; }
.btn-on-patch { background: var(--color-bg); }
.show-errors .input:invalid { border-color: var(--color-accent-500); }
.show-errors .field:has(.input:invalid)::after { content: attr(data-err); font-size: 12.5px; font-weight: 600;
  color: var(--color-accent-700); margin-top: 5px; }
.send-error { font-size: 14px; font-weight: 600; color: var(--color-accent-700); margin: 12px 0 0; }
.send-error a { font-weight: 700; }
.urgent-form { position: relative; }
.urgent-form.is-done > *:not(.urgent-done) { display: none; }
.urgent-done:not([hidden]) { grid-column: 1 / -1; display: grid; gap: 4px; font-size: 16px; justify-items: start; }
.urgent-done strong { font-family: var(--font-heading); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; }
.urgent-done a { font-weight: 700; }