:root {
  --ink: #173f2b;
  --ink-soft: #345945;
  --green: #2fa84f;
  --green-dark: #0f3523;
  --green-deep: #092b1b;
  --mint: #edf7ed;
  --mint-strong: #dff1df;
  --paper: #fbfcf7;
  --white: #ffffff;
  --line: rgba(23, 63, 43, 0.14);
  --muted: #6c7e71;
  --shadow-soft:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 16px 44px rgba(19, 73, 39, 0.08);
  --shadow-hover:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 22px 54px rgba(19, 73, 39, 0.13);
  --content: 1180px;
  --header-height: 72px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Homepage V12: reference-led, tap-first multi-step request wizard. */
dialog.request-dialog.request-wizard {
  --wizard-accent: #28aa44;
  width: min(1180px, calc(100% - 28px));
  max-height: min(944px, calc(100dvh - 28px));
  border-radius: 34px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.82),
    0 30px 90px rgba(13, 42, 28, 0.26),
    0 60px 150px rgba(18, 47, 36, 0.16);
  transition:
    width 480ms var(--ease-apple),
    max-height 480ms var(--ease-apple);
}

/* The box travels to its new size before the next step is revealed. Duration is
   set per transition in JS so a small change does not take as long as a big one. */
dialog.request-dialog.request-wizard.is-resizing-box {
  overflow: hidden;
  transition:
    width 480ms var(--ease-apple),
    max-height 480ms var(--ease-apple),
    height var(--box-resize-active-ms, 320ms) var(--box-resize-ease, cubic-bezier(0.32, 0.72, 0, 1));
}

dialog.request-dialog.request-wizard.is-resizing-box .dialog-shell {
  height: 100%;
  max-height: none;
}

/* Content is already in place so the target height can be measured, but stays
   invisible until the box has finished travelling. */
.wizard-stage.is-resizing [data-wizard-step],
.wizard-stage.is-resizing .wizard-start {
  opacity: 0;
}

dialog.request-dialog.request-wizard[data-wizard-view="choose"] {
  width: min(850px, calc(100% - 28px));
}

dialog.request-dialog.request-wizard::backdrop {
  background: rgba(28, 48, 40, 0.5);
  backdrop-filter: blur(14px) saturate(0.78);
  -webkit-backdrop-filter: blur(14px) saturate(0.78);
}

.request-wizard .dialog-shell {
  display: flex;
  max-height: min(944px, calc(100dvh - 28px));
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 34px;
  background:
    radial-gradient(circle at 9% 6%, rgba(222, 249, 229, 0.52), transparent 24rem),
    radial-gradient(circle at 92% 22%, rgba(229, 240, 255, 0.44), transparent 22rem),
    rgba(255, 255, 255, 0.975);
}

.request-wizard .dialog-header {
  position: relative;
  z-index: 4;
  display: block;
  flex: 0 0 auto;
  padding: 34px 40px 16px;
  border: 0;
  background: transparent;
}

.request-wizard .dialog-heading {
  max-width: 700px;
  padding-right: 70px;
}

.request-wizard .dialog-kicker {
  margin-bottom: 8px;
  color: #1b7a32;
  font-size: 11.5px;
  font-weight: 860;
  letter-spacing: 0.16em;
}

.request-wizard .dialog-header h2 {
  max-width: 720px;
  color: #173e34;
  font-size: clamp(34px, 3.4vw, 47px);
  line-height: 1.03;
  letter-spacing: -0.052em;
}

.request-wizard .dialog-header h2 em {
  color: #25a93f;
  font-style: normal;
}

.request-wizard .dialog-subtitle {
  max-width: 720px;
  margin: 11px 0 0;
  color: #5e6e66;
  font-size: 15.5px;
  line-height: 1.55;
}

.request-wizard .dialog-close {
  position: absolute;
  top: 28px;
  right: 32px;
  z-index: 3;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid rgba(28, 91, 52, 0.08);
  background: rgba(248, 252, 247, 0.94);
  box-shadow:
    0 8px 22px rgba(19, 62, 38, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.request-wizard .dialog-close:hover {
  background: #eff8ee;
  box-shadow:
    0 10px 26px rgba(19, 62, 38, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}

.request-wizard .wizard-progress[hidden],
.request-wizard .wizard-footer[hidden] {
  display: none !important;
}

.wizard-progress {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin: 0 40px 18px;
  padding: 3px 18px 0;
}

.wizard-progress-line {
  position: absolute;
  top: 22px;
  left: calc(12.5% + 10px);
  right: calc(12.5% + 10px);
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(46, 83, 68, 0.14) 0 6px, transparent 6px 11px);
}

.wizard-progress-line > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #28a944, #6ecf5d);
  transition: width 520ms var(--ease-apple);
}

.wizard-progress ol {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-progress li {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #5e6e66;
  font-size: 12px;
  font-weight: 720;
  line-height: 1;
  transition: color 260ms ease;
}

.wizard-progress li > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(31, 75, 55, 0.08);
  border-radius: 50%;
  background: #f4f6f4;
  color: #7d8d85;
  font-size: 12px;
  font-weight: 840;
  box-shadow:
    0 5px 16px rgba(21, 61, 39, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition:
    color 300ms ease,
    background 300ms ease,
    box-shadow 300ms ease,
    transform 380ms var(--ease-apple);
}

.wizard-progress li.is-active,
.wizard-progress li.is-complete {
  color: #1b7a32;
}

.wizard-progress li.is-active > span {
  border-color: rgba(40, 169, 68, 0.22);
  background: linear-gradient(145deg, #43c656, #149b35);
  color: #fff;
  box-shadow:
    0 0 0 9px rgba(46, 179, 73, 0.1),
    0 9px 20px rgba(33, 156, 61, 0.2);
  transform: scale(1.06);
}

.wizard-progress li.is-complete > span {
  border-color: rgba(40, 169, 68, 0.12);
  background: #eaf8e9;
  color: #1b7a32;
}

.request-wizard .dialog-status {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  margin-inline: 40px;
}

.request-wizard .dialog-status:not(:empty) {
  min-height: 42px;
  margin-top: 0;
  margin-bottom: 12px;
  border: 1px solid rgba(36, 143, 62, 0.09);
  border-radius: 14px;
}

.wizard-resume {
  position: relative;
  z-index: 5;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 11px;
  margin: 0 40px 14px;
  padding: 11px 14px;
  border: 1px solid rgba(36, 143, 62, 0.16);
  border-radius: 14px;
  background: #f2faf1;
  color: #245c39;
}

.wizard-resume[hidden] {
  display: none;
}

.wizard-resume-mark {
  display: grid;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #2aa846;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.wizard-resume p {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13px;
  font-weight: 620;
  line-height: 1.4;
}

.wizard-resume button {
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 1px solid rgba(36, 143, 62, 0.28);
  border-radius: 999px;
  background: #fff;
  color: #1d7a37;
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  transition: background 200ms ease, border-color 200ms ease;
}

.wizard-resume button:hover {
  border-color: rgba(36, 143, 62, 0.55);
  background: #eaf6ea;
}

.wizard-stage {
  min-height: 0;
  flex: 1 1 auto;
  padding: 0 40px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.request-wizard[data-wizard-view="choose"] .wizard-stage {
  padding-bottom: 26px;
}

.request-wizard .request-view.is-active {
  display: block;
}

.request-wizard .mode-list {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.request-wizard .mode-list button {
  --mode-tone: #2cae49;
  --mode-wash: #edf8ec;
  display: grid;
  min-height: 112px;
  grid-template-columns: 112px minmax(0, 1fr) 52px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 18px;
  padding: 8px 18px 8px 10px;
  border: 1px solid rgba(33, 78, 56, 0.075);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 1px 2px rgba(22, 65, 40, 0.03),
    0 13px 34px rgba(21, 65, 42, 0.065);
  transition:
    transform 320ms var(--ease-apple),
    border-color 260ms ease,
    box-shadow 320ms var(--ease-apple),
    background 260ms ease;
}

.request-wizard .mode-list button[data-mode-tone="blue"] {
  --mode-tone: #3478ee;
  --mode-wash: #edf4ff;
}

.request-wizard .mode-list button[data-mode-tone="violet"] {
  --mode-tone: #8443d6;
  --mode-wash: #f4edff;
}

.request-wizard .mode-list button[data-mode-tone="orange"] {
  --mode-tone: #f18a19;
  --mode-wash: #fff3e7;
}

.request-wizard .mode-list button:hover {
  border-color: color-mix(in srgb, var(--mode-tone) 24%, transparent);
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 18px 42px color-mix(in srgb, var(--mode-tone) 11%, transparent);
  transform: translateY(-2px);
}

.request-wizard .mode-list button:focus-visible,
.wizard-service-card:focus-visible,
.wizard-choice:focus-visible,
.wizard-slot:focus-visible,
.wizard-back:focus-visible,
.wizard-next:focus-visible,
.wizard-empty button:focus-visible,
.wizard-note-prompts button:focus-visible {
  outline: 3px solid rgba(42, 174, 70, 0.3);
  outline-offset: 3px;
}

.mode-art {
  position: relative;
  display: grid;
  width: 98px;
  height: 98px;
  place-items: stretch;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.9), transparent 35%),
    var(--mode-wash);
}

.mode-art picture {
  display: block;
  min-height: 0;
}

.mode-art picture,
.mode-art img {
  width: 100%;
  height: 100%;
}

.mode-art img {
  display: block;
  object-fit: contain;
  transform: scale(1.08);
}

.mode-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
  text-align: left;
}

.request-wizard .mode-list .mode-copy strong {
  color: #173e34;
  font-size: 17px;
  font-weight: 820;
  letter-spacing: -0.022em;
}

.request-wizard .mode-list .mode-copy small {
  max-width: 520px;
  color: #74837d;
  font-size: 13px;
  line-height: 1.5;
}

.mode-arrow {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--mode-tone) 17%, transparent);
  border-radius: 50%;
  background: var(--mode-wash);
  color: var(--mode-tone);
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--mode-tone) 10%, transparent);
  transition: transform 340ms var(--ease-apple);
}

.mode-list button:hover .mode-arrow {
  transform: translateX(3px);
}

.wizard-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(39, 130, 60, 0.06);
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(238, 248, 236, 0.78), rgba(248, 251, 247, 0.84));
}

.wizard-trust > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4b5c53;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.35;
}

.wizard-trust i {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #ddf4db;
  color: #2aa646;
  font-size: 13px;
  font-style: normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.wizard-step-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 1px 0 18px;
}

.wizard-step-meta > span {
  padding: 7px 12px;
  border-radius: 999px;
  background: #edf7eb;
  color: #1b7a32;
  font-size: 12.5px;
  font-weight: 820;
}

.wizard-step-meta > strong {
  color: #5e6e66;
  font-size: 12.5px;
  font-weight: 690;
}

.wizard-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.wizard-service-card {
  position: relative;
  display: grid;
  min-height: 226px;
  grid-template-rows: 142px auto;
  padding: 9px 13px 14px;
  overflow: hidden;
  border: 1px solid rgba(31, 74, 52, 0.075);
  border-radius: 21px;
  background:
    radial-gradient(circle at 50% 22%, rgba(230, 248, 223, 0.52), transparent 46%),
    rgba(255, 255, 255, 0.9);
  color: #183f34;
  cursor: pointer;
  text-align: left;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 10px 30px rgba(22, 66, 42, 0.055);
  transition:
    transform 320ms var(--ease-apple),
    border-color 250ms ease,
    box-shadow 320ms var(--ease-apple),
    background 250ms ease;
}

.wizard-service-card:nth-child(2),
.wizard-service-card:nth-child(6) {
  background:
    radial-gradient(circle at 50% 22%, rgba(224, 239, 255, 0.58), transparent 46%),
    rgba(255, 255, 255, 0.9);
}

.wizard-service-card:nth-child(3),
.wizard-service-card:nth-child(7) {
  background:
    radial-gradient(circle at 50% 22%, rgba(242, 232, 255, 0.55), transparent 46%),
    rgba(255, 255, 255, 0.9);
}

.wizard-service-card:hover {
  border-color: rgba(39, 166, 66, 0.2);
  box-shadow: 0 16px 38px rgba(26, 95, 51, 0.1);
  transform: translateY(-3px);
}

.wizard-service-card.is-selected {
  border-color: rgba(34, 164, 62, 0.54);
  background:
    radial-gradient(circle at 50% 22%, rgba(223, 249, 217, 0.78), transparent 48%),
    #f9fff8;
  box-shadow:
    0 0 0 2px rgba(38, 170, 66, 0.16),
    0 16px 38px rgba(27, 126, 52, 0.12);
}

.wizard-service-check {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(31, 77, 54, 0.13);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.88);
  color: transparent;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(21, 64, 39, 0.06);
  transition: color 200ms ease, background 200ms ease, transform 300ms var(--ease-apple);
}

.wizard-service-card.is-selected .wizard-service-check {
  border-color: #2cab49;
  background: #2cab49;
  color: #fff;
  transform: scale(1.04);
}

.wizard-service-art {
  display: grid;
  min-height: 0;
  place-items: stretch;
  overflow: hidden;
}

/* picture is inline by default, which breaks the height chain and lets square
   artwork render at its own size straight over the card title. */
.wizard-service-art picture {
  display: block;
  min-height: 0;
}

.wizard-service-art picture,
.wizard-service-art img {
  width: 100%;
  height: 100%;
}

.wizard-service-art img {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 11px 12px rgba(45, 97, 47, 0.08));
  transition: transform 420ms var(--ease-apple);
}

.wizard-service-card:hover .wizard-service-art img,
.wizard-service-card.is-selected .wizard-service-art img {
  transform: scale(1.035);
}

.wizard-service-copy {
  display: grid;
  align-content: end;
  gap: 5px;
}

.wizard-service-copy strong {
  font-size: 14px;
  font-weight: 820;
  letter-spacing: -0.018em;
}

.wizard-service-copy small {
  color: #5e6e66;
  font-size: 12.5px;
  line-height: 1.45;
}

.wizard-inline-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 11px 15px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f1f9ee, #fbfdfb);
}

.wizard-inline-note > span {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #def3da;
  color: #2aa447;
  font-size: 12px;
  font-weight: 900;
}

.wizard-inline-note p {
  display: grid;
  gap: 1px;
  margin: 0;
  color: #5e6e66;
  font-size: 12.5px;
  line-height: 1.4;
}

.wizard-inline-note strong {
  color: #284b3c;
  font-size: 13px;
}

.wizard-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  padding-block: 4px 18px;
}

.wizard-choice {
  position: relative;
  display: grid;
  min-height: 168px;
  align-content: start;
  justify-items: start;
  gap: 17px;
  padding: 20px;
  border: 1px solid rgba(32, 76, 54, 0.08);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.88);
  color: #173e34;
  cursor: pointer;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 14px 34px rgba(23, 66, 43, 0.06);
  transition:
    transform 320ms var(--ease-apple),
    border-color 250ms ease,
    box-shadow 320ms var(--ease-apple),
    background 250ms ease;
}

.wizard-choice:hover {
  border-color: rgba(42, 169, 68, 0.2);
  box-shadow: 0 18px 42px rgba(24, 96, 48, 0.1);
  transform: translateY(-3px);
}

.wizard-choice.is-selected {
  border-color: rgba(41, 169, 68, 0.5);
  background: linear-gradient(145deg, #fbfffa, #eff9ed);
  box-shadow:
    0 0 0 2px rgba(42, 170, 68, 0.14),
    0 18px 42px rgba(24, 105, 49, 0.11);
}

.wizard-choice-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, #eff8ec, #e1f3df);
  color: #2aa646;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 8px 18px rgba(38, 122, 57, 0.08);
}

.wizard-choice-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wizard-choice-copy {
  display: grid;
  gap: 7px;
}

.wizard-choice-copy strong {
  font-size: 15px;
  font-weight: 820;
  letter-spacing: -0.018em;
}

.wizard-choice-copy small {
  color: #5e6e66;
  font-size: 12.5px;
  line-height: 1.5;
}

.wizard-choice-mark {
  position: absolute;
  top: 17px;
  right: 17px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(34, 82, 57, 0.1);
  border-radius: 50%;
  color: transparent;
  font-size: 12px;
  font-weight: 900;
}

.wizard-choice.is-selected .wizard-choice-mark {
  border-color: #2aa846;
  background: #2aa846;
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Per-service measurements. One screen with a panel per chosen service, so the
   flow keeps its length whether somebody picks one service or five.
   --------------------------------------------------------------------------- */

.wizard-details {
  display: grid;
  gap: 10px;
  max-width: 850px;
  margin: 2px auto 0;
}

.wizard-detail {
  overflow: hidden;
  border: 1px solid rgba(31, 75, 54, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.wizard-detail[open] {
  border-color: rgba(42, 169, 68, 0.28);
  box-shadow: 0 10px 30px rgba(24, 96, 48, 0.07);
}

.wizard-detail > summary {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.wizard-detail > summary::-webkit-details-marker {
  display: none;
}

.wizard-detail > summary:focus-visible {
  outline: 2px solid #1b7a32;
  outline-offset: -3px;
}

.wizard-detail-art {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: stretch;
  overflow: hidden;
  border-radius: 12px;
  background: #f2f8f1;
}

.wizard-detail-art picture {
  display: block;
  min-height: 0;
}

.wizard-detail-art picture,
.wizard-detail-art img {
  width: 100%;
  height: 100%;
}

.wizard-detail-art img {
  display: block;
  object-fit: contain;
}

.wizard-detail-name {
  flex: 1 1 auto;
  color: #173e34;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.wizard-detail-count {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef6ec;
  color: #1b7a32;
  font-size: 11.5px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.wizard-detail-caret {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-right: 2px solid #5e6e66;
  border-bottom: 2px solid #5e6e66;
  border-radius: 1px;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 240ms var(--ease-apple);
}

.wizard-detail[open] .wizard-detail-caret {
  transform: rotate(225deg) translate(-3px, -3px);
}

.wizard-detail-body {
  display: grid;
  gap: 14px 18px;
  padding: 4px 16px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Short numeric answers pair up; chip rows need the full width to stay on one line.
   A lone number field would leave an odd gap, so it spans too. */
.wizard-detail-field:has(.wizard-chips),
.wizard-detail-field:has(input[type="text"]),
.wizard-detail-field:only-child {
  grid-column: 1 / -1;
}

.wizard-detail-body:not(:has(.wizard-detail-field + .wizard-detail-field:has(input[type="number"]))) .wizard-detail-field:has(input[type="number"]) {
  grid-column: 1 / -1;
}

.wizard-detail-field {
  display: grid;
  gap: 7px;
}

.wizard-detail-label {
  color: #294d3e;
  font-size: 12.5px;
  font-weight: 790;
}

.wizard-detail-label small {
  color: #5e6e66;
  font-weight: 620;
}

.wizard-detail-hint {
  margin-top: -3px;
  color: #5e6e66;
  font-size: 12px;
  line-height: 1.4;
}

.wizard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.wizard-chip {
  padding: 8px 14px;
  border: 1px solid rgba(31, 77, 54, 0.16);
  border-radius: 999px;
  background: #fff;
  color: #294d3e;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    transform 200ms var(--ease-apple);
}

.wizard-chip:hover {
  border-color: rgba(42, 169, 68, 0.42);
  transform: translateY(-1px);
}

.wizard-chip.is-on {
  border-color: #1b7a32;
  background: #1b7a32;
  color: #fff;
}

.wizard-detail-input {
  position: relative;
  display: block;
}

.wizard-detail-input input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid rgba(31, 77, 54, 0.14);
  border-radius: 14px;
  background: #fff;
  color: #173e34;
  outline: 0;
  font: inherit;
  font-size: 14.5px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.wizard-detail-input.has-unit input {
  padding-right: 52px;
}

.wizard-detail-input input:focus {
  border-color: #2eae4c;
  box-shadow: 0 0 0 4px rgba(44, 173, 74, 0.12);
}

.wizard-detail-input input::-webkit-outer-spin-button,
.wizard-detail-input input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.wizard-detail-unit {
  position: absolute;
  top: 50%;
  right: 14px;
  color: #5e6e66;
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
  transform: translateY(-50%);
}

.wizard-detail-note {
  max-width: 850px;
  margin: 14px auto 8px;
  color: #5e6e66;
  font-size: 12.5px;
  text-align: center;
}

@media (min-width: 961px) and (max-height: 900px) {
  .wizard-detail > summary {
    gap: 11px;
    padding: 9px 14px;
  }

  .wizard-detail-art {
    width: 40px;
    height: 40px;
  }

  .wizard-detail-body {
    gap: 12px 16px;
    padding: 2px 14px 15px;
  }

  .wizard-detail-note {
    margin: 10px auto 4px;
  }
}

@media (max-width: 700px) {
  .wizard-detail-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .wizard-detail > summary {
    gap: 10px;
    padding: 10px 12px;
  }

  .wizard-detail-art {
    width: 38px;
    height: 38px;
  }

  .wizard-detail-name {
    font-size: 13.5px;
  }

  .wizard-detail-body {
    padding: 4px 12px 15px;
  }
}

/* Photo attachments. Hidden unless an upload endpoint is configured, so nobody
   is ever shown a control that quietly does nothing. Lives on its own step: as a
   footnote under the measurements it sat below the fold and went unnoticed. */

.wizard-photo-step {
  display: grid;
  place-items: center;
  min-height: 0;
  padding-block: 4px;
}

.wizard-photos {
  display: grid;
  gap: 13px;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 26px 26px 24px;
  border: 1px dashed rgba(31, 75, 54, 0.24);
  border-radius: 22px;
  background: rgba(247, 251, 246, 0.7);
  text-align: center;
}

.wizard-photo-step .wizard-photos-head {
  justify-items: center;
}

.wizard-photo-step .wizard-photos-head strong {
  font-size: 15px;
}

.wizard-photo-step .wizard-photo-grid {
  justify-content: center;
}

.wizard-photo-step .wizard-photo-add {
  justify-self: center;
  padding: 12px 24px;
  font-size: 13.5px;
}

.wizard-photos-head {
  display: grid;
  gap: 3px;
}

.wizard-photos-head strong {
  color: #173e34;
  font-size: 13.5px;
  font-weight: 800;
}

.wizard-photos-head strong small {
  color: #5e6e66;
  font-weight: 620;
}

.wizard-photos-head span {
  color: #5e6e66;
  font-size: 12.5px;
  line-height: 1.4;
}

.wizard-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.wizard-photo-grid:empty {
  display: none;
}

.wizard-photo {
  position: relative;
  width: 92px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(31, 75, 54, 0.12);
  border-radius: 13px;
  background: #fff;
}

.wizard-photo img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
}

.wizard-photo figcaption {
  padding: 4px 7px 5px;
  color: #5e6e66;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.wizard-photo button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 40, 24, 0.72);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.wizard-photo button svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.wizard-photo button:hover {
  background: #9e1c26;
}

.wizard-photo-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: 10px 18px;
  border: 1px solid rgba(27, 122, 50, 0.32);
  border-radius: 999px;
  background: #fff;
  color: #1b7a32;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 780;
  transition: background 200ms ease, border-color 200ms ease;
}

.wizard-photo-add:hover {
  border-color: rgba(27, 122, 50, 0.6);
  background: #eef8ed;
}

.wizard-photo-add.is-disabled {
  border-color: rgba(31, 75, 54, 0.14);
  background: #f3f5f2;
  color: #5e6e66;
  cursor: not-allowed;
}

.wizard-photo-add input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wizard-photo-add:focus-within {
  outline: 2px solid #1b7a32;
  outline-offset: 2px;
}

.wizard-photo-note {
  margin: 0;
  color: #5e6e66;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .wizard-photos {
    padding: 13px 13px 14px;
  }

  .wizard-photo {
    width: calc(33.333% - 6px);
  }
}

.wizard-field-wrap {
  max-width: 790px;
  margin: 4px auto 24px;
  padding: 26px;
  border: 1px solid rgba(32, 77, 54, 0.07);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 18px 48px rgba(21, 65, 41, 0.06);
}

.wizard-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.wizard-field {
  display: grid;
  gap: 8px;
}

.wizard-field--full {
  grid-column: 1 / -1;
}

.wizard-field > span {
  color: #294d3e;
  font-size: 12px;
  font-weight: 790;
}

.wizard-field > span small {
  color: #85928c;
  font-weight: 620;
}

.wizard-field input,
.wizard-field textarea {
  width: 100%;
  min-height: 54px;
  padding: 13px 15px;
  border: 1px solid rgba(31, 77, 54, 0.14);
  border-radius: 15px;
  background: #fff;
  color: #173e34;
  outline: 0;
  box-shadow: inset 0 1px 2px rgba(22, 68, 42, 0.025);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.wizard-field textarea {
  min-height: 132px;
  resize: vertical;
}

.wizard-field input:focus,
.wizard-field textarea:focus {
  border-color: #2eae4c;
  box-shadow: 0 0 0 4px rgba(44, 173, 74, 0.12);
}

.wizard-field input::placeholder,
.wizard-field textarea::placeholder {
  color: #9aa69f;
}

.wizard-field input.has-error {
  border-color: #c0392f;
  box-shadow: 0 0 0 3px rgba(192, 57, 47, 0.1);
}

.wizard-field input.has-error:focus {
  border-color: #a82f26;
  box-shadow: 0 0 0 4px rgba(192, 57, 47, 0.16);
}

.wizard-field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -2px;
  color: #a82f26;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 640;
  line-height: 1.4;
}

.wizard-field-error[hidden] {
  display: none;
}

.wizard-field-error::before {
  content: "!";
  display: grid;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: #c0392f;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.wizard-consent.has-error {
  border-color: rgba(192, 57, 47, 0.45);
  background: #fdf4f3;
}

.wizard-privacy-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 17px 0 0;
  color: #5e6e66;
  font-size: 12.5px;
  line-height: 1.45;
}

.wizard-privacy-note > span {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #e5f5e2;
  color: #2aa546;
  font-size: 10px;
  font-weight: 900;
}

.wizard-note-wrap {
  max-width: 820px;
}

.wizard-note-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.wizard-note-prompts button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(33, 81, 55, 0.1);
  border-radius: 999px;
  background: #f5f9f4;
  color: #415a4d;
  cursor: pointer;
  font-size: 12px;
  font-weight: 740;
}

.wizard-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  padding-block: 4px;
}

.wizard-slot {
  position: relative;
  display: grid;
  min-height: 105px;
  align-content: center;
  gap: 7px;
  padding: 16px;
  border: 1px solid rgba(34, 80, 56, 0.09);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.9);
  color: #173e34;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 11px 28px rgba(22, 66, 42, 0.055);
  transition:
    transform 300ms var(--ease-apple),
    border-color 200ms ease,
    box-shadow 300ms var(--ease-apple),
    background 200ms ease;
}

.wizard-slot:hover {
  border-color: rgba(40, 168, 68, 0.22);
  transform: translateY(-2px);
}

.wizard-slot.is-selected {
  border-color: rgba(40, 168, 68, 0.5);
  background: linear-gradient(145deg, #fbfffa, #eef9ec);
  box-shadow:
    0 0 0 2px rgba(40, 168, 68, 0.13),
    0 14px 34px rgba(25, 110, 50, 0.1);
}

.wizard-slot-date {
  padding-right: 23px;
  font-size: 13px;
  font-weight: 820;
}

.wizard-slot-time {
  color: #5e6e66;
  font-size: 12.5px;
  line-height: 1.4;
}

.wizard-slot i {
  position: absolute;
  top: 13px;
  right: 13px;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: #2baa48;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 180ms ease, transform 260ms var(--ease-apple);
}

.wizard-slot.is-selected i {
  opacity: 1;
  transform: scale(1);
}

.wizard-schedule-note {
  margin: 15px 0 8px;
  color: #5e6e66;
  font-size: 12.5px;
  text-align: center;
}

.wizard-loading,
.wizard-empty {
  display: grid;
  min-height: 260px;
  align-content: center;
  justify-items: center;
  gap: 10px;
  max-width: 680px;
  margin: 0 auto 22px;
  padding: 34px;
  border-radius: 26px;
  background: linear-gradient(145deg, #f9fcf8, #f2f8f1);
  text-align: center;
}

.wizard-loading > span {
  width: 38px;
  height: 38px;
  margin-bottom: 7px;
  border: 3px solid rgba(40, 168, 68, 0.16);
  border-top-color: #2aa848;
  border-radius: 50%;
  animation: wizard-spin 800ms linear infinite;
}

.wizard-loading strong,
.wizard-empty strong {
  color: #1c4638;
  font-size: 17px;
}

.wizard-loading small,
.wizard-empty p {
  margin: 0;
  color: #78877f;
  font-size: 12px;
}

.wizard-empty button {
  min-height: 42px;
  margin-top: 8px;
  padding: 0 17px;
  border: 0;
  border-radius: 999px;
  background: #21913a;
  color: #fff;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 790;
}

.wizard-empty button.wizard-retry {
  margin-top: 0;
  background: transparent;
  color: #2b9e45;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wizard-review {
  max-width: 850px;
  margin: 3px auto 22px;
}

.wizard-review dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(31, 75, 54, 0.07);
  border-radius: 23px;
  background: rgba(33, 88, 56, 0.06);
  box-shadow: 0 16px 42px rgba(22, 66, 42, 0.06);
}

.wizard-review dl > div {
  display: grid;
  gap: 4px;
  min-height: 80px;
  align-content: center;
  padding: 15px 18px;
  background: rgba(255, 255, 255, 0.94);
}

.wizard-review dt {
  color: #5e6e66;
  font-size: 11.5px;
  font-weight: 770;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wizard-review dd {
  margin: 0;
  color: #1c3f31;
  font-size: 14.5px;
  font-weight: 740;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.wizard-consent {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin-top: 15px;
  padding: 16px 18px;
  border: 1px solid rgba(35, 81, 57, 0.07);
  border-radius: 17px;
  background: #f5faf4;
  color: #4b5c53;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 620;
  line-height: 1.55;
}

.wizard-consent input {
  width: 21px;
  height: 21px;
  margin: 1px 0 0;
  accent-color: #2aa847;
}

.wizard-consent a {
  color: #1b7a32;
}

.wizard-review-info {
  margin: 15px 0 0;
  padding: 14px 17px;
  border-radius: 16px;
  background: #f2f0fb;
  color: #514d63;
  font-size: 12.5px;
  line-height: 1.55;
}

.wizard-footer {
  position: relative;
  z-index: 6;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 16px 40px 20px;
  border-top: 1px solid rgba(31, 74, 53, 0.07);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 -18px 38px rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.wizard-footer p {
  display: flex;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #5e6e66;
  font-size: 12px;
  text-align: center;
}

/* Says what is still missing, right next to the button that will not move on. */
.wizard-footer p[data-tone="blocked"] {
  gap: 7px;
  color: #a82f26;
  font-size: 12.5px;
  font-weight: 660;
}

.wizard-footer p[data-tone="blocked"]::before {
  content: "!";
  display: grid;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: #c0392f;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.wizard-back,
.wizard-next {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 810;
  transition:
    transform 280ms var(--ease-apple),
    box-shadow 280ms var(--ease-apple),
    background 220ms ease,
    opacity 220ms ease;
}

.wizard-back {
  min-width: 132px;
  padding: 0 21px;
  border: 1px solid rgba(30, 73, 53, 0.12);
  background: #fff;
  color: #335d4c;
  box-shadow: 0 7px 18px rgba(24, 69, 43, 0.05);
}

.wizard-next {
  min-width: 210px;
  padding: 0 24px;
  border: 0;
  background: linear-gradient(135deg, #28b23f, #139e32);
  color: #fff;
  box-shadow:
    0 12px 25px rgba(30, 160, 56, 0.21),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.wizard-back:hover,
.wizard-next:hover:not(:disabled) {
  transform: translateY(-2px);
}

.wizard-next:hover:not(:disabled) {
  box-shadow:
    0 16px 30px rgba(30, 160, 56, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.wizard-next:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  box-shadow: none;
}

.wizard-back svg,
.wizard-next svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.request-wizard .request-done {
  max-width: 760px;
  margin: auto;
  padding: 34px 10px 24px;
}

.request-wizard .request-done .done-mark {
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  border: 8px solid #e9f8e7;
  background: linear-gradient(145deg, #43c65a, #169d37);
  color: #fff;
  font-size: 26px;
  box-shadow: 0 16px 35px rgba(34, 161, 60, 0.2);
}

.request-wizard .request-done h3 {
  margin-bottom: 12px;
  color: #173e34;
  font-size: 35px;
}

.request-wizard .request-done > p:not(.dialog-kicker) {
  max-width: 560px;
  margin-inline: auto;
  color: #708079;
}

.done-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 22px 0;
}

.done-features span {
  padding: 7px 11px;
  border-radius: 999px;
  background: #eff8ed;
  color: #438056;
  font-size: 9.5px;
  font-weight: 740;
}

.request-done .button {
  margin: 5px 4px 0;
}

/* ---------------------------------------------------------------------------
   Step transitions.

   The old version only animated the incoming step: the outgoing one was cut
   away instantly, which read as a stutter. Now a step leaves before the next
   one arrives, and every preset is just a different set of these variables.
   --------------------------------------------------------------------------- */

.request-wizard {
  --step-exit-ms: 170ms;
  --step-enter-ms: 420ms;
  --step-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --step-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --step-shift: 0px;
  --step-lift: 16px;
  --step-scale-in: 0.975;
  --step-scale-out: 0.99;
  --step-blur-in: 0px;
  --card-stagger-ms: 38ms;
  --card-stagger-shift: 14px;
  --box-resize-ms: 460ms;
  --box-resize-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Apple-like: a short horizontal glide on a decelerating curve. */
.request-wizard[data-wizard-anim="glide"] {
  --step-exit-ms: 150ms;
  --step-enter-ms: 340ms;
  --step-ease-enter: cubic-bezier(0.32, 0.72, 0, 1);
  --step-shift: 26px;
  --step-lift: 0px;
  --step-scale-in: 0.99;
  --step-scale-out: 0.985;
  --card-stagger-ms: 26ms;
  --card-stagger-shift: 10px;
  --box-resize-ms: 400ms;
  --box-resize-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Soft UI: no sideways travel, everything breathes up and settles. */
.request-wizard[data-wizard-anim="soft"] {
  --step-exit-ms: 170ms;
  --step-enter-ms: 420ms;
  --step-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --step-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --step-shift: 0px;
  --step-lift: 16px;
  --step-scale-in: 0.975;
  --step-scale-out: 0.99;
  --card-stagger-ms: 38ms;
  --card-stagger-shift: 14px;
  --box-resize-ms: 460ms;
  --box-resize-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Crisp: minimal, fast, almost no travel. */
.request-wizard[data-wizard-anim="crisp"] {
  --step-exit-ms: 90ms;
  --step-enter-ms: 190ms;
  --step-ease-exit: linear;
  --step-ease-enter: cubic-bezier(0.2, 0, 0, 1);
  --step-shift: 0px;
  --step-lift: 7px;
  --step-scale-in: 1;
  --step-scale-out: 1;
  --card-stagger-ms: 0ms;
  --card-stagger-shift: 0px;
  --box-resize-ms: 240ms;
  --box-resize-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Depth: the old step falls back, the new one comes forward. */
.request-wizard[data-wizard-anim="depth"] {
  --step-exit-ms: 180ms;
  --step-enter-ms: 400ms;
  --step-ease-exit: cubic-bezier(0.55, 0, 1, 0.45);
  --step-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --step-shift: 0px;
  --step-lift: 0px;
  --step-scale-in: 1.04;
  --step-scale-out: 0.94;
  --step-blur-in: 5px;
  --card-stagger-ms: 30ms;
  --card-stagger-shift: 0px;
  --box-resize-ms: 430ms;
  --box-resize-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Pager: a pronounced native-style swipe. */
.request-wizard[data-wizard-anim="pager"] {
  --step-exit-ms: 200ms;
  --step-enter-ms: 380ms;
  --step-ease-exit: cubic-bezier(0.5, 0, 0.9, 0.4);
  --step-ease-enter: cubic-bezier(0.25, 1.02, 0.35, 1);
  --step-shift: 72px;
  --step-lift: 0px;
  --step-scale-in: 1;
  --step-scale-out: 1;
  --card-stagger-ms: 20ms;
  --card-stagger-shift: 0px;
  --box-resize-ms: 380ms;
  --box-resize-ease: cubic-bezier(0.3, 0.9, 0.2, 1);
}

.wizard-stage.is-entering-forward [data-wizard-step],
.wizard-stage.is-entering-forward .wizard-start {
  animation: wizard-step-in-forward var(--step-enter-ms) var(--step-ease-enter) both;
}

.wizard-stage.is-entering-backward [data-wizard-step],
.wizard-stage.is-entering-backward .wizard-start {
  animation: wizard-step-in-backward var(--step-enter-ms) var(--step-ease-enter) both;
}

.wizard-stage.is-leaving-forward [data-wizard-step],
.wizard-stage.is-leaving-forward .wizard-start {
  animation: wizard-step-out-forward var(--step-exit-ms) var(--step-ease-exit) both;
}

.wizard-stage.is-leaving-backward [data-wizard-step],
.wizard-stage.is-leaving-backward .wizard-start {
  animation: wizard-step-out-backward var(--step-exit-ms) var(--step-ease-exit) both;
}

@keyframes wizard-step-in-forward {
  from {
    opacity: 0;
    filter: blur(var(--step-blur-in));
    transform: translate3d(var(--step-shift), var(--step-lift), 0) scale(var(--step-scale-in));
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes wizard-step-in-backward {
  from {
    opacity: 0;
    filter: blur(var(--step-blur-in));
    transform: translate3d(calc(var(--step-shift) * -1), var(--step-lift), 0) scale(var(--step-scale-in));
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes wizard-step-out-forward {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(calc(var(--step-shift) * -0.5), calc(var(--step-lift) * -0.4), 0) scale(var(--step-scale-out));
  }
}

@keyframes wizard-step-out-backward {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(calc(var(--step-shift) * 0.5), calc(var(--step-lift) * -0.4), 0) scale(var(--step-scale-out));
  }
}

/* Option cards arrive just behind their container, which makes a grid of eight
   read as one movement instead of a single block appearing at once. */
.wizard-stage[data-stagger="on"].is-entering-forward .wizard-service-card,
.wizard-stage[data-stagger="on"].is-entering-forward .wizard-choice,
.wizard-stage[data-stagger="on"].is-entering-forward .wizard-slot,
.wizard-stage[data-stagger="on"].is-entering-forward .mode-list button,
.wizard-stage[data-stagger="on"].is-entering-backward .wizard-service-card,
.wizard-stage[data-stagger="on"].is-entering-backward .wizard-choice,
.wizard-stage[data-stagger="on"].is-entering-backward .wizard-slot,
.wizard-stage[data-stagger="on"].is-entering-backward .mode-list button {
  animation: wizard-card-in var(--step-enter-ms) var(--step-ease-enter) both;
  animation-delay: calc(var(--card-index, 0) * var(--card-stagger-ms));
}

@keyframes wizard-card-in {
  from {
    opacity: 0;
    transform: translate3d(0, var(--card-stagger-shift), 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* ---------------------------------------------------------------------------
   Animation lab — development tool, hidden unless explicitly enabled.
   --------------------------------------------------------------------------- */

/* The dialog clips its own overflow, so the lab has to live inside it.
   Parked next to the close button, where the header keeps space free anyway. */
.anim-lab {
  position: absolute;
  z-index: 21;
  top: 33px;
  right: 88px;
  font-family: inherit;
}

.anim-lab[hidden] {
  display: none;
}

.anim-lab-toggle {
  padding: 8px 14px;
  border: 1px solid rgba(23, 63, 43, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #24503a;
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  box-shadow: 0 6px 20px rgba(16, 52, 32, 0.16);
  backdrop-filter: blur(10px);
}

.anim-lab-toggle::before {
  content: "◐ ";
}

.anim-lab-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  max-height: 74vh;
  width: 264px;
  overflow-y: auto;
  flex-direction: column;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(23, 63, 43, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 48px rgba(16, 52, 32, 0.2);
  backdrop-filter: blur(14px);
}

.anim-lab-panel[hidden] {
  display: none;
}

.anim-lab-title {
  margin: 0;
  color: #1c3f31;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.anim-lab-presets {
  display: grid;
  gap: 5px;
}

.anim-lab-presets button {
  display: grid;
  gap: 2px;
  padding: 8px 11px;
  border: 1px solid rgba(23, 63, 43, 0.12);
  border-radius: 10px;
  background: #fff;
  color: #24503a;
  cursor: pointer;
  text-align: left;
}

.anim-lab-presets button strong {
  font-size: 12.5px;
  font-weight: 780;
}

.anim-lab-presets button small {
  color: #5e6e66;
  font-size: 11px;
  line-height: 1.35;
}

.anim-lab-presets button[aria-checked="true"] {
  border-color: #1b7a32;
  background: #f0f9ef;
  box-shadow: 0 0 0 2px rgba(27, 122, 50, 0.14);
}

.anim-lab-range {
  display: grid;
  gap: 6px;
  color: #24503a;
  font-size: 11.5px;
  font-weight: 700;
}

.anim-lab-range b {
  color: #1b7a32;
  font-variant-numeric: tabular-nums;
}

.anim-lab-range input {
  width: 100%;
  accent-color: #1b7a32;
}

.anim-lab-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #24503a;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
}

.anim-lab-check input {
  width: 16px;
  height: 16px;
  accent-color: #1b7a32;
}

.anim-lab-curve {
  margin: 0;
  color: #5e6e66;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.anim-lab-wide {
  padding: 9px 12px;
  border: 1px solid rgba(27, 122, 50, 0.3);
  border-radius: 999px;
  background: #1b7a32;
  color: #fff;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 760;
}

.anim-lab-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.anim-lab-actions button {
  padding: 8px 10px;
  border: 1px solid rgba(27, 122, 50, 0.3);
  border-radius: 999px;
  background: #1b7a32;
  color: #fff;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 760;
}

.anim-lab-actions button:last-child {
  background: #fff;
  color: #1b7a32;
}

@media (max-width: 700px) {
  .anim-lab {
    top: 22px;
    right: 76px;
  }

  /* Icon only, so the test tool never covers the dialog kicker on a phone. */
  .anim-lab-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 0;
  }

  .anim-lab-toggle::before {
    content: "◐";
    font-size: 15px;
  }

  .anim-lab-panel {
    width: min(264px, calc(100vw - 32px));
  }
}

/* The moment a single-choice card is tapped it confirms itself, so the short
   wait before the step changes is filled with feedback instead of nothing. */
.wizard-choice.is-committing,
.wizard-service-card.is-committing {
  animation: wizard-commit 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes wizard-commit {
  0% { transform: scale(1); }
  38% { transform: scale(0.975); }
  100% { transform: scale(1); }
}

@keyframes wizard-spin {
  to { transform: rotate(360deg); }
}

/* Laptop screens are wide but short. Without this the second row of service cards
   sits below the fold, so the choice looks smaller than it is. */
@media (min-width: 961px) and (max-height: 900px) {
  .request-wizard .dialog-header {
    padding: 22px 40px 12px;
  }

  .request-wizard .dialog-header h2 {
    font-size: clamp(28px, 2.5vw, 36px);
  }

  .request-wizard .dialog-kicker {
    margin-bottom: 5px;
  }

  .request-wizard .dialog-subtitle {
    margin-top: 7px;
  }

  .wizard-progress {
    margin-bottom: 12px;
  }

  .wizard-progress li > span {
    width: 32px;
    height: 32px;
  }

  .wizard-step-meta {
    margin-bottom: 12px;
  }

  .wizard-stage {
    padding-bottom: 18px;
  }

  .wizard-service-grid {
    gap: 12px;
  }

  .wizard-service-card {
    min-height: 0;
    grid-template-rows: 96px auto;
  }

  .wizard-choice {
    min-height: 0;
    gap: 12px;
    padding: 16px;
  }

  .wizard-choice-icon {
    width: 42px;
    height: 42px;
  }

  .wizard-review {
    margin-bottom: 12px;
  }

  .wizard-review dl > div {
    min-height: 66px;
    padding: 11px 16px;
  }

  .wizard-consent {
    margin-top: 11px;
    padding: 12px 15px;
  }
}

@media (max-width: 960px) {
  .wizard-service-grid,
  .wizard-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wizard-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wizard-service-card {
    min-height: 218px;
  }
}

@media (max-width: 700px) {
  dialog.request-dialog.request-wizard,
  dialog.request-dialog.request-wizard[data-wizard-view="choose"] {
    width: calc(100% - 8px);
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    margin: 4px auto;
    border-radius: 28px;
  }

  .request-wizard .dialog-shell {
    height: 100%;
    max-height: none;
    border-radius: 28px;
  }

  .request-wizard .dialog-header {
    position: relative;
    top: auto;
    margin: 0;
    padding: 19px 18px 10px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .request-wizard .dialog-heading {
    padding-right: 49px;
  }

  .request-wizard .dialog-kicker {
    margin-bottom: 6px;
    font-size: 11px;
  }

  .request-wizard .dialog-header h2 {
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.02;
  }

  .request-wizard .dialog-subtitle {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.45;
  }

  .request-wizard .dialog-close {
    top: 16px;
    right: 15px;
    width: 43px;
    height: 43px;
    min-width: 43px;
    min-height: 43px;
  }

  .wizard-progress {
    margin: 0 14px 11px;
    padding-inline: 7px;
  }

  .wizard-progress-line {
    top: 16px;
    left: calc(12.5% + 7px);
    right: calc(12.5% + 7px);
  }

  .wizard-progress li {
    gap: 5px;
    font-size: 11px;
  }

  .wizard-progress li > span {
    width: 29px;
    height: 29px;
    font-size: 12px;
  }

  .wizard-progress li.is-active > span {
    box-shadow:
      0 0 0 5px rgba(46, 179, 73, 0.09),
      0 6px 14px rgba(33, 156, 61, 0.16);
  }

  .request-wizard .dialog-status {
    margin-inline: 16px;
  }

  .request-wizard .dialog-status:not(:empty) {
    margin-bottom: 9px;
    font-size: 12px;
  }

  .wizard-stage,
  .request-wizard[data-wizard-view="choose"] .wizard-stage {
    padding: 0 14px 18px;
    scrollbar-gutter: auto;
  }

  .wizard-resume {
    gap: 9px;
    margin: 0 14px 10px;
    padding: 9px 11px;
  }

  .wizard-resume p {
    font-size: 12px;
  }

  .wizard-resume button {
    padding: 6px 11px;
    font-size: 11.5px;
  }

  .request-wizard .mode-list {
    gap: 9px;
    margin-top: 5px;
  }

  .request-wizard .mode-list button {
    min-height: 88px;
    grid-template-columns: 74px minmax(0, 1fr) 36px;
    gap: 11px;
    padding: 6px 10px 6px 7px;
    border-radius: 20px;
  }

  .mode-art {
    width: 70px;
    height: 70px;
  }

  .request-wizard .mode-list .mode-copy {
    gap: 3px;
  }

  .request-wizard .mode-list .mode-copy strong {
    font-size: 13px;
    line-height: 1.2;
  }

  .request-wizard .mode-list .mode-copy small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .mode-arrow {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .wizard-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 10px;
    padding: 10px;
    border-radius: 18px;
  }

  .wizard-trust > span {
    font-size: 11.5px;
  }

  .wizard-trust i {
    width: 23px;
    height: 23px;
    font-size: 10px;
  }

  .wizard-step-meta {
    margin-bottom: 12px;
  }

  .wizard-step-meta > span {
    padding: 5px 9px;
    font-size: 12px;
  }

  .wizard-step-meta > strong {
    font-size: 12px;
  }

  .wizard-service-grid {
    gap: 9px;
  }

  .wizard-service-card {
    min-height: 176px;
    grid-template-rows: 104px auto;
    padding: 6px 9px 11px;
    border-radius: 17px;
  }

  .wizard-service-check {
    top: 8px;
    right: 8px;
    width: 21px;
    height: 21px;
  }

  .wizard-service-copy {
    gap: 3px;
  }

  .wizard-service-copy strong {
    font-size: 13px;
    line-height: 1.18;
  }

  .wizard-service-copy small {
    font-size: 12px;
    line-height: 1.35;
  }

  .wizard-inline-note {
    margin-top: 10px;
    padding: 9px 11px;
  }

  .wizard-inline-note p {
    font-size: 12px;
  }

  .wizard-inline-note strong {
    font-size: 12.5px;
  }

  .wizard-choice-grid {
    gap: 9px;
    padding-bottom: 8px;
  }

  .wizard-choice {
    min-height: 133px;
    gap: 11px;
    padding: 14px;
    border-radius: 18px;
  }

  .wizard-choice-icon {
    width: 41px;
    height: 41px;
    border-radius: 14px;
  }

  .wizard-choice-icon svg {
    width: 21px;
    height: 21px;
  }

  .wizard-choice-copy {
    gap: 4px;
  }

  .wizard-choice-copy strong {
    font-size: 12px;
    line-height: 1.22;
  }

  .wizard-choice-copy small {
    font-size: 12px;
    line-height: 1.38;
  }

  .wizard-choice-mark {
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
  }

  .wizard-field-wrap {
    margin-bottom: 8px;
    padding: 17px;
    border-radius: 21px;
  }

  .wizard-field-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .wizard-field--full {
    grid-column: auto;
  }

  .wizard-field input,
  .wizard-field textarea {
    min-height: 51px;
    border-radius: 13px;
  }

  .wizard-field textarea {
    min-height: 118px;
  }

  .wizard-note-prompts {
    gap: 6px;
  }

  .wizard-note-prompts button {
    min-height: 34px;
    padding-inline: 11px;
    font-size: 12px;
  }

  .wizard-slots {
    gap: 9px;
  }

  .wizard-slot {
    min-height: 91px;
    padding: 12px;
    border-radius: 16px;
  }

  .wizard-slot-date {
    font-size: 12.5px;
  }

  .wizard-slot-time {
    font-size: 12px;
  }

  .wizard-loading,
  .wizard-empty {
    min-height: 220px;
    padding: 24px 18px;
  }

  .wizard-review dl {
    grid-template-columns: 1fr;
    border-radius: 19px;
  }

  .wizard-review dl > div {
    min-height: 66px;
    padding: 12px 14px;
  }

  .wizard-consent {
    padding: 13px 14px;
    font-size: 12px;
  }

  .wizard-footer {
    grid-template-columns: auto auto;
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }

  .wizard-footer p {
    display: none;
  }

  /* The blocking reason is the one hint that must survive on small screens. */
  .wizard-footer p[data-tone="blocked"] {
    display: flex;
    order: -1;
    grid-column: 1 / -1;
    padding-bottom: 2px;
    font-size: 12px;
    text-align: center;
  }

  .wizard-back,
  .wizard-next {
    min-height: 47px;
  }

  .wizard-back {
    min-width: 112px;
    padding-inline: 16px;
  }

  .wizard-next {
    min-width: 0;
    padding-inline: 20px;
  }

  .request-wizard .request-done {
    padding-top: 26px;
  }

  .request-wizard .request-done h3 {
    font-size: 30px;
  }
}

@media (max-width: 370px) {
  .request-wizard .mode-list button {
    grid-template-columns: 66px minmax(0, 1fr) 30px;
  }

  .mode-art {
    width: 63px;
    height: 63px;
  }

  .wizard-service-card {
    min-height: 164px;
    grid-template-rows: 94px auto;
  }

  .wizard-back {
    min-width: 101px;
  }
}

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
  /* Reserve the scrollbar track permanently. Without this, locking the body when
     the dialog opens removes the scrollbar and the whole page jumps sideways. */
  scrollbar-gutter: stable;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--paper);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(circle at 0 18%, rgba(111, 211, 128, 0.12), transparent 28rem),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

body.menu-open,
body.dialog-open {
  overflow: hidden;
}

img,
picture,
svg {
  display: block;
}

img {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  color: inherit;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
dl,
dd,
figure,
ol,
ul {
  margin-top: 0;
}

h1,
h2,
h3 {
  margin-bottom: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.05;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

p,
li,
dd,
figcaption {
  text-wrap: pretty;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 160ms ease-out;
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid rgba(47, 168, 79, 0.38);
  outline-offset: 3px;
}

.section {
  width: min(var(--content), calc(100% - 48px));
  margin-inline: auto;
  padding-block: clamp(88px, 10vw, 148px);
}

.eyebrow {
  margin-bottom: 18px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow-light {
  color: #9fe3aa;
}

.site-header {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 1000;
  display: grid;
  width: min(calc(100% - 32px), 1220px);
  min-height: var(--header-height);
  grid-template-columns: 220px 1fr 220px;
  align-items: center;
  padding: 10px 12px 10px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 1px rgba(23, 63, 43, 0.06),
    0 12px 40px rgba(18, 70, 37, 0.08);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition-property: box-shadow, background-color, transform;
  transition-duration: 220ms;
  transition-timing-function: var(--ease);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow:
    0 0 0 1px rgba(23, 63, 43, 0.08),
    0 16px 42px rgba(18, 70, 37, 0.14);
}

.brand {
  width: fit-content;
  text-decoration: none;
}

.brand img {
  width: 188px;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 32px);
}

.desktop-nav a {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #2a4a38;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 180ms var(--ease);
}

.desktop-nav a:hover::after,
.desktop-nav a[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.phone-action,
.menu-button,
.dialog-close {
  display: inline-grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f4f8f2;
  color: var(--green);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(23, 63, 43, 0.09);
  transition-property: transform, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.phone-action svg,
.dialog-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phone-action:hover,
.menu-button:hover,
.dialog-close:hover {
  background: #e9f5e9;
  box-shadow: 0 0 0 1px rgba(23, 63, 43, 0.13);
}

.phone-action:active,
.menu-button:active,
.dialog-close:active,
.header-cta:active,
.button:active,
.text-button:active,
.mode-list button:active {
  transform: scale(0.96);
}

.header-cta {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(47, 168, 79, 0.24);
  transition-property: transform, background-color, box-shadow;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

.header-cta:hover {
  background: #258e40;
  box-shadow: 0 13px 30px rgba(47, 168, 79, 0.3);
}

.cta-label-short {
  display: none;
}

.menu-button {
  display: none;
}

.menu-button span:not(.sr-only) {
  position: absolute;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition-property: transform;
  transition-duration: 180ms;
  transition-timing-function: var(--ease);
}

.menu-button span:nth-child(2) { transform: translateY(-4px); }
.menu-button span:nth-child(3) { transform: translateY(4px); }
.menu-button[aria-expanded="true"] span:nth-child(2) { transform: rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 84px;
  left: 16px;
  right: 16px;
  z-index: 990;
  display: grid;
  max-height: calc(100dvh - 104px);
  gap: 2px;
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(12, 53, 30, 0.22);
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition-property: transform, opacity;
  transition-duration: 180ms;
  transition-timing-function: var(--ease);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu a {
  display: flex;
  min-height: 52px;
  align-items: center;
  padding-inline: 15px;
  border-radius: 14px;
  color: var(--ink);
  font-weight: 760;
  text-decoration: none;
}

.mobile-menu a:hover {
  background: var(--mint);
}

.hero {
  position: relative;
  min-height: 780px;
  padding: 110px 0 46px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(251, 252, 247, 1) 0%, rgba(251, 252, 247, 0.94) 43%, rgba(237, 247, 237, 0.5) 100%);
}

.hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -120px;
  top: -120px;
  border-radius: 50%;
  background: rgba(105, 218, 124, 0.16);
  filter: blur(45px);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  width: min(var(--content), calc(100% - 48px));
  min-height: 620px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 0.83fr) minmax(540px, 1.17fr);
  align-items: center;
  gap: clamp(24px, 4vw, 68px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 610px;
}

.hero h1 {
  max-width: 14ch;
  font-size: clamp(52px, 4.7vw, 72px);
  letter-spacing: -0.058em;
}

.hero-lead {
  max-width: 590px;
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.65;
}

.hero-actions,
.final-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  transition-property: transform, background-color, color, box-shadow;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

.button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 12px 30px rgba(47, 168, 79, 0.24);
}

.button-primary:hover {
  background: #258e40;
  box-shadow: 0 15px 34px rgba(47, 168, 79, 0.3);
}

.button-secondary {
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(23, 63, 43, 0.14);
}

.button-secondary:hover {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(23, 63, 43, 0.22);
}

.button-light {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.button-light:hover {
  background: var(--mint);
}

.hero-proof {
  display: flex;
  gap: clamp(18px, 2.6vw, 34px);
  margin: 42px 0 0;
}

.hero-proof div {
  position: relative;
}

.hero-proof div + div::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: calc(clamp(18px, 2.6vw, 34px) / -2);
  width: 1px;
  background: var(--line);
}

.hero-proof dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hero-proof dd {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.hero-proof dd span {
  color: #f6a914;
  letter-spacing: 0.02em;
}

.hero-media {
  position: relative;
  width: min(760px, 58vw);
  justify-self: end;
  transform: translateX(5%);
}

.hero-media picture {
  display: block;
}

.hero-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hero-hours {
  position: absolute;
  left: 18%;
  bottom: 8%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-hours > span {
  color: var(--green);
  font-size: 12px;
}

.hero-hours p {
  margin: 0;
  line-height: 1.25;
}

.hero-hours strong,
.hero-hours small {
  display: block;
}

.hero-hours strong {
  font-size: 13px;
}

.hero-hours small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.html-loaded [data-hero-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  animation: hero-enter 560ms var(--ease) forwards;
}

.html-loaded [data-hero-stagger] > *:nth-child(1) { animation-delay: 40ms; }
.html-loaded [data-hero-stagger] > *:nth-child(2) { animation-delay: 120ms; }
.html-loaded [data-hero-stagger] > *:nth-child(3) { animation-delay: 200ms; }
.html-loaded [data-hero-stagger] > *:nth-child(4) { animation-delay: 280ms; }
.html-loaded [data-hero-stagger] > *:nth-child(5) { animation-delay: 360ms; }

@keyframes hero-enter {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.section-heading {
  display: grid;
  max-width: 820px;
  margin-bottom: 54px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: 24px 64px;
  align-items: end;
}

.section-heading .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -4px;
}

.section-heading h2,
.services-intro h2,
.process-copy h2,
.ai-copy h2,
.faq-intro h2,
.final-copy h2 {
  font-size: clamp(40px, 4.5vw, 66px);
}

.section-heading > p:last-child,
.services-intro > p,
.faq-intro > p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}

.project-section {
  padding-top: 124px;
}

.project-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  grid-template-rows: repeat(2, minmax(260px, 1fr));
  gap: 16px;
}

.project {
  position: relative;
  min-height: 290px;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #dcebd9;
  box-shadow: var(--shadow-soft);
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

.project-large {
  grid-row: 1 / 3;
}

.project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms var(--ease), filter 300ms ease-out;
}

.project::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(5, 34, 20, 0.76) 100%);
  pointer-events: none;
}

.project:hover img {
  transform: scale(1.035);
  filter: saturate(1.04);
}

.project figcaption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 2;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 2px 10px;
  color: #fff;
}

.project figcaption span {
  grid-row: 1 / 3;
  color: #a8e5b1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.project figcaption strong {
  font-size: 20px;
  line-height: 1.2;
}

.project figcaption small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
}

.services-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(54px, 9vw, 130px);
  border-top: 1px solid var(--line);
}

.services-intro {
  align-self: start;
  position: sticky;
  top: calc(var(--header-height) + 36px);
}

.services-intro > p {
  margin-top: 24px;
}

.text-button,
.dialog-back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(47, 168, 79, 0.35);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition-property: color, transform, text-decoration-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.text-button:hover,
.dialog-back:hover {
  color: var(--green);
  text-decoration-color: var(--green);
}

.service-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-list li {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 24px;
  padding: 30px 0 34px;
  border-top: 1px solid var(--line);
}

.service-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.service-list > li > span {
  padding-top: 5px;
  color: var(--green);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.service-list h3 {
  font-size: clamp(25px, 2.5vw, 34px);
}

.service-list p {
  max-width: 640px;
  margin: 12px 0 0;
  color: var(--muted);
}

.process-section {
  position: relative;
  overflow: hidden;
  background: var(--green-dark);
  color: #fff;
}

.process-section::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -120px;
  bottom: -260px;
  border-radius: 50%;
  background: rgba(89, 197, 105, 0.18);
  filter: blur(50px);
}

.process-inner {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(var(--content), calc(100% - 48px));
  min-height: 680px;
  margin-inline: auto;
  padding-block: 94px;
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
  align-items: center;
  gap: 60px;
}

.process-copy h2 {
  max-width: 11ch;
}

.process-steps {
  display: grid;
  gap: 0;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.process-steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.process-steps li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.process-steps > li > span {
  color: #9fe3aa;
  font-size: 12px;
  font-weight: 850;
}

.process-steps h3 {
  font-size: 21px;
  letter-spacing: -0.025em;
}

.process-steps p {
  max-width: 470px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
}

.process-media {
  position: relative;
  align-self: end;
}

.process-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.2));
}

.ai-section {
  display: grid;
  grid-template-columns: minmax(360px, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(48px, 9vw, 130px);
}

.ai-visual {
  min-height: 560px;
  display: grid;
  place-items: center;
  border-radius: 38px;
  background:
    radial-gradient(circle at 60% 28%, rgba(102, 211, 117, 0.28), transparent 42%),
    var(--mint);
  overflow: hidden;
}

.ai-visual img {
  width: min(72%, 390px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 34px rgba(20, 70, 39, 0.16));
  transition: transform 500ms var(--ease);
}

.ai-visual:hover img {
  transform: rotate(-1.5deg) translateY(-4px);
}

.ai-copy > p:not(.eyebrow):not(.ai-note) {
  max-width: 660px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  color: var(--ink-soft);
  font-weight: 720;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--mint-strong);
  color: var(--green);
  font-size: 12px;
}

.ai-copy .button {
  margin-top: 34px;
}

.ai-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.assurance-section {
  border-top: 1px solid var(--line);
}

.assurance-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.assurance-list div {
  padding: 34px clamp(22px, 3vw, 44px);
}

.assurance-list div + div {
  border-left: 1px solid var(--line);
}

.assurance-list dt {
  font-size: 19px;
  font-weight: 840;
}

.assurance-list dd {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.faq-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(54px, 9vw, 130px);
}

.faq-intro {
  align-self: start;
  position: sticky;
  top: calc(var(--header-height) + 36px);
}

.faq-intro > p {
  max-width: 360px;
  margin-top: 22px;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  min-height: 84px;
  display: flex;
  align-items: center;
  padding: 20px 54px 20px 4px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 790;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  transition: transform 180ms var(--ease);
}

.faq-list summary::after {
  transform: rotate(90deg);
}

.faq-list details[open] summary::after {
  transform: rotate(0);
}

.faq-list details p {
  max-width: 650px;
  margin: -4px 0 0;
  padding: 0 54px 26px 4px;
  color: var(--muted);
}

.final-cta {
  position: relative;
  display: grid;
  min-height: 430px;
  margin-bottom: 72px;
  padding: 52px clamp(36px, 6vw, 80px);
  grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(36px, 6vw, 80px);
  overflow: hidden;
  border-radius: 38px;
  background: var(--green-dark);
  color: #fff;
}

.final-cta::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -160px;
  top: -210px;
  border-radius: 50%;
  background: rgba(108, 217, 124, 0.2);
  filter: blur(35px);
}

.final-art,
.final-copy {
  position: relative;
  z-index: 1;
}

.final-art img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.2));
}

.final-copy h2 {
  max-width: 13ch;
}

.final-copy > p:not(.eyebrow) {
  max-width: 600px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 17px;
}

.final-actions a:not(.button) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.site-footer {
  display: grid;
  width: min(var(--content), calc(100% - 48px));
  margin-inline: auto;
  padding: 44px 0 calc(72px + env(safe-area-inset-bottom));
  grid-template-columns: 1.2fr 0.8fr 0.6fr;
  gap: 48px;
  border-top: 1px solid var(--line);
}

.footer-brand {
  display: inline-block;
}

.footer-brand img {
  width: 188px;
  height: auto;
}

.site-footer p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.site-footer a {
  text-decoration-color: rgba(23, 63, 43, 0.25);
  text-underline-offset: 4px;
}

.html-loaded [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(3px);
  transition-property: opacity, transform, filter;
  transition-duration: 520ms;
  transition-timing-function: var(--ease);
}

.html-loaded [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.request-dialog {
  width: min(720px, calc(100% - 28px));
  max-height: min(820px, calc(100dvh - 28px));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 30px;
  background: transparent;
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(5, 40, 21, 0.28);
}

.request-dialog::backdrop {
  background: rgba(6, 34, 19, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.request-dialog[open] {
  animation: dialog-in 220ms var(--ease) both;
}

/* ---------------------------------------------------------------------------
   Opening animation.

   The dialog and its backdrop arrive together: the backdrop settles first and
   the panel rides in on top of it. Each preset is a different set of variables
   plus one keyframe, selectable in the animation lab.
   --------------------------------------------------------------------------- */

dialog.request-dialog.request-wizard {
  --open-ms: 700ms;
  --open-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --open-name: wizard-open-reveal;
  --backdrop-ms: 380ms;
  --backdrop-blur: 14px;
}

/* Rise — an iOS sheet: lifts from below, settles without bouncing. */
dialog.request-dialog.request-wizard[data-wizard-open="rise"] {
  --open-ms: 520ms;
  --open-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --open-name: wizard-open-rise;
  --backdrop-ms: 420ms;
}

/* Bloom — grows from the centre with a whisper of overshoot. */
dialog.request-dialog.request-wizard[data-wizard-open="bloom"] {
  --open-ms: 620ms;
  --open-ease: cubic-bezier(0.16, 1.14, 0.3, 1);
  --open-name: wizard-open-bloom;
  --backdrop-ms: 460ms;
}

/* Unfold — tips forward out of depth, like a card being laid down. */
dialog.request-dialog.request-wizard[data-wizard-open="unfold"] {
  --open-ms: 660ms;
  --open-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --open-name: wizard-open-unfold;
  --backdrop-ms: 500ms;
}

/* Reveal — the panel is already in place and wipes open from its centre line. */
dialog.request-dialog.request-wizard[data-wizard-open="reveal"] {
  --open-ms: 700ms;
  --open-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --open-name: wizard-open-reveal;
  --backdrop-ms: 380ms;
}

/* Drift — barely moves. Long, calm fade for a quiet entrance. */
dialog.request-dialog.request-wizard[data-wizard-open="drift"] {
  --open-ms: 760ms;
  --open-ease: cubic-bezier(0.33, 0.9, 0.2, 1);
  --open-name: wizard-open-drift;
  --backdrop-ms: 620ms;
  --backdrop-blur: 18px;
}

dialog.request-dialog.request-wizard[open] {
  animation: var(--open-name) var(--open-ms) var(--open-ease) both;
}

dialog.request-dialog.request-wizard[open]::backdrop {
  animation: wizard-backdrop-in var(--backdrop-ms) cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes wizard-backdrop-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0) saturate(1);
    -webkit-backdrop-filter: blur(0) saturate(1);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(var(--backdrop-blur)) saturate(0.78);
    -webkit-backdrop-filter: blur(var(--backdrop-blur)) saturate(0.78);
  }
}

@keyframes wizard-open-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.972);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes wizard-open-bloom {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wizard-open-unfold {
  from {
    opacity: 0;
    transform: perspective(1400px) translate3d(0, 22px, -90px) rotateX(9deg);
  }
  to {
    opacity: 1;
    transform: perspective(1400px) translate3d(0, 0, 0) rotateX(0deg);
  }
}

@keyframes wizard-open-reveal {
  from {
    opacity: 0.35;
    clip-path: inset(46% 0 46% 0 round 34px);
    transform: scale(0.985);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 34px);
    transform: scale(1);
  }
}

@keyframes wizard-open-drift {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(1.012);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

/* The header and the first block of content follow the panel in, which is what
   makes an opening read as composed rather than as one flat fade. */
dialog.request-dialog.request-wizard[open] .dialog-heading > *,
dialog.request-dialog.request-wizard[open] .wizard-start.is-active > * {
  animation: wizard-open-content calc(var(--open-ms) * 0.62) var(--open-ease) both;
}

dialog.request-dialog.request-wizard[open] .dialog-kicker {
  animation-delay: calc(var(--open-ms) * 0.22);
}

dialog.request-dialog.request-wizard[open] .dialog-header h2 {
  animation-delay: calc(var(--open-ms) * 0.28);
}

dialog.request-dialog.request-wizard[open] .dialog-subtitle {
  animation-delay: calc(var(--open-ms) * 0.34);
}

dialog.request-dialog.request-wizard[open] .wizard-start.is-active > * {
  animation-delay: calc(var(--open-ms) * 0.4);
}

@keyframes wizard-open-content {
  from {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Once a step transition takes over, the opening choreography must not fight it. */
dialog.request-dialog.request-wizard.is-open-settled[open] .dialog-heading > *,
dialog.request-dialog.request-wizard.is-open-settled[open] .wizard-start.is-active > * {
  animation: none;
}


@keyframes dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dialog-shell {
  max-height: min(820px, calc(100dvh - 28px));
  padding: 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 30px;
  background: #fbfcf9;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.dialog-kicker {
  margin: 0 0 7px;
  color: var(--green);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.dialog-header h2 {
  font-size: clamp(28px, 5vw, 40px);
}

.dialog-status {
  min-height: 0;
  margin-top: 0;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
}

.dialog-status:not(:empty) {
  min-height: 44px;
  display: flex;
  align-items: center;
  margin-top: 18px;
  padding: 10px 14px;
  background: var(--mint);
  color: var(--ink-soft);
}

.dialog-status[data-tone="error"] {
  background: #fff0ec;
  color: #9b2f21;
}

.dialog-status[data-tone="success"] {
  background: #eaf8eb;
  color: #216b36;
}

.request-view {
  display: none;
}

.request-view.is-active {
  display: block;
}

.mode-list {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.mode-list button {
  display: grid;
  min-height: 88px;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 14px;
  padding: 16px 18px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-soft);
  transition-property: transform, box-shadow, background-color;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

.mode-list button:hover {
  background: var(--mint);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.mode-list button > span {
  grid-row: 1 / 3;
  color: var(--green);
  font-size: 12px;
  font-weight: 850;
}

.mode-list strong {
  font-size: 17px;
}

.mode-list small {
  color: var(--muted);
}

.request-form {
  margin-top: 18px;
}

.dialog-back {
  margin-top: 0;
}

.form-lead {
  margin: 14px 0 18px;
  font-size: 22px;
  font-weight: 830;
  letter-spacing: -0.025em;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.request-form > label,
.form-grid label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.form-grid label {
  margin-top: 0;
}

.request-form label > span,
.slot-fieldset legend {
  font-size: 12px;
  font-weight: 800;
}

.request-form label small {
  color: var(--muted);
  font-weight: 600;
}

.request-form input,
.request-form select,
.request-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid rgba(23, 63, 43, 0.17);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  outline: 0;
  transition-property: border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.request-form textarea {
  resize: vertical;
}

.request-form input:focus,
.request-form select:focus,
.request-form textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(47, 168, 79, 0.13);
}

.request-form input::placeholder,
.request-form textarea::placeholder {
  color: #97a69c;
}

.form-disclaimer {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.form-submit {
  width: 100%;
  margin-top: 20px;
}

.form-submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

.slot-fieldset {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.slot-fieldset legend {
  margin-bottom: 9px;
}

.slot-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.slot-list p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}

.slot-option {
  position: relative;
}

.slot-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.slot-option span {
  display: grid;
  min-height: 62px;
  align-content: center;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(23, 63, 43, 0.13);
  cursor: pointer;
  transition-property: background-color, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.slot-option span small {
  color: var(--muted);
}

.slot-option input:checked + span {
  background: var(--mint);
  box-shadow: 0 0 0 2px var(--green);
}

.slot-option input:focus-visible + span {
  outline: 3px solid rgba(47, 168, 79, 0.32);
  outline-offset: 3px;
}

.slot-option:active span {
  transform: scale(0.96);
}

.consent {
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px !important;
  cursor: pointer;
}

.consent input {
  width: 20px;
  min-height: 20px;
  margin-top: 2px;
}

.consent span {
  color: var(--muted);
  font-size: 12px !important;
  font-weight: 600 !important;
}

.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
}

.request-done {
  padding: 42px 6px 18px;
  text-align: center;
}

.done-mark {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--mint-strong);
  color: var(--green);
  font-size: 28px;
  font-weight: 850;
}

.request-done h3 {
  font-size: 30px;
}

.request-done p {
  max-width: 480px;
  margin: 14px auto 24px;
  color: var(--muted);
}

.request-done .button {
  margin: 6px;
}

@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: 190px 1fr 190px;
  }

  .brand img {
    width: 172px;
  }

  .desktop-nav {
    gap: 17px;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
  }

  .hero-media {
    width: min(700px, 59vw);
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: 64px;
  }

  .site-header {
    grid-template-columns: 1fr auto;
    min-height: 64px;
    padding: 8px 8px 8px 16px;
  }

  .brand img {
    width: 160px;
  }

  .desktop-nav,
  .phone-action {
    display: none;
  }

  .header-actions {
    grid-column: 2;
  }

  .menu-button {
    display: inline-grid;
  }

  .hero {
    min-height: 0;
    padding-top: 102px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero-copy {
    max-width: 700px;
  }

  .hero h1 {
    max-width: 13ch;
  }

  .hero-media {
    width: min(720px, 100%);
    justify-self: center;
    transform: none;
  }

  .project-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 440px 280px;
  }

  .project-large {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  .services-section,
  .faq-section {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .services-intro,
  .faq-intro {
    position: static;
  }

  .process-inner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .process-media {
    width: min(720px, 100%);
    margin-inline: auto;
  }

  .ai-section {
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
    gap: 44px;
  }

  .final-cta {
    grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);
  }
}

@media (max-width: 700px) {
  :root {
    --header-height: 60px;
  }

  .section {
    width: min(100% - 28px, 620px);
    padding-block: 80px;
  }

  .site-header {
    top: 8px;
    width: calc(100% - 16px);
    min-height: 60px;
  }

  .brand img {
    width: 148px;
  }

  .header-cta {
    min-height: 42px;
    padding-inline: 14px;
    font-size: 11px;
  }

  .cta-label-short {
    display: inline;
  }

  .cta-label-long {
    display: none;
  }

  .menu-button {
    min-width: 42px;
    min-height: 42px;
  }

  .hero {
    padding: 94px 0 32px;
  }

  .hero-inner {
    width: min(100% - 28px, 620px);
    gap: 24px;
  }

  .hero h1 {
    max-width: 12.5ch;
    font-size: clamp(42px, 11.5vw, 56px);
    letter-spacing: -0.055em;
  }

  .hero-lead {
    margin-top: 22px;
    font-size: 16px;
  }

  .hero-actions {
    display: grid;
    margin-top: 26px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 28px;
  }

  .hero-proof div {
    min-width: 0;
  }

  .hero-proof div + div::before {
    display: none;
  }

  .hero-proof dt {
    font-size: 9px;
  }

  .hero-proof dd {
    font-size: 10px;
    white-space: normal;
  }

  .hero-proof dd span {
    display: block;
    white-space: nowrap;
  }

  .hero-media {
    width: calc(100% + 10px);
    margin-left: -5px;
  }

  .hero-hours {
    left: 50%;
    bottom: 3%;
    width: max-content;
    max-width: calc(100% - 28px);
    transform: translateX(-50%);
  }

  .section-heading {
    display: block;
    margin-bottom: 36px;
  }

  .section-heading h2,
  .services-intro h2,
  .process-copy h2,
  .ai-copy h2,
  .faq-intro h2,
  .final-copy h2 {
    font-size: clamp(36px, 10vw, 48px);
  }

  .section-heading > p:last-child {
    margin-top: 20px;
  }

  .project-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 360px repeat(2, 250px);
  }

  .project-large {
    grid-column: auto;
  }

  .project {
    border-radius: 22px;
  }

  .project figcaption {
    left: 18px;
    right: 18px;
    bottom: 17px;
  }

  .services-section {
    gap: 34px;
  }

  .service-list li {
    grid-template-columns: 38px 1fr;
    gap: 12px;
    padding-block: 24px;
  }

  .service-list h3 {
    font-size: 25px;
  }

  .process-inner {
    width: min(100% - 28px, 620px);
    padding-block: 78px;
  }

  .process-steps {
    margin-top: 34px;
  }

  .process-media {
    width: calc(100% + 20px);
    margin-left: -10px;
  }

  .ai-section {
    display: flex;
    flex-direction: column;
    gap: 42px;
  }

  .ai-visual {
    width: 100%;
    min-height: 420px;
    order: 2;
    border-radius: 28px;
  }

  .ai-copy {
    order: 1;
  }

  .ai-copy > p:not(.eyebrow):not(.ai-note) {
    font-size: 16px;
  }

  .assurance-list {
    grid-template-columns: 1fr;
  }

  .assurance-list div {
    padding: 26px 4px;
  }

  .assurance-list div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .faq-section {
    gap: 34px;
  }

  .faq-list summary {
    min-height: 76px;
    padding-right: 44px;
  }

  .final-cta {
    width: calc(100% - 28px);
    min-height: 0;
    margin-bottom: 40px;
    padding: 40px 24px;
    grid-template-columns: 1fr;
    gap: 24px;
    border-radius: 28px;
  }

  .final-art {
    width: min(360px, 100%);
    margin-inline: auto;
  }

  .final-actions {
    display: grid;
  }

  .final-actions .button,
  .final-actions a {
    width: 100%;
    justify-content: center;
  }

  .site-footer {
    width: calc(100% - 28px);
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .site-footer > div:first-child {
    grid-column: 1 / -1;
  }

  .request-dialog {
    width: calc(100% - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 24px;
  }

  .dialog-shell {
    max-height: calc(100dvh - 12px);
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 24px;
  }

  .dialog-header {
    position: sticky;
    top: -20px;
    z-index: 2;
    margin: -20px -16px 0;
    padding: 20px 16px 16px;
    background: rgba(251, 252, 249, 0.96);
    backdrop-filter: blur(12px);
  }

  .mode-list button {
    min-height: 82px;
  }

  .form-grid,
  .slot-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .header-cta {
    padding-inline: 12px;
  }

  .brand img {
    width: 138px;
  }

  .hero-proof {
    grid-template-columns: 1fr 1fr;
  }

  .hero-proof div:last-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .html-loaded [data-reveal],
  .html-loaded [data-hero-stagger] > * {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Homepage direction V5: reference-led garden illustration hero */

body[data-site-version="new"] {
  background:
    linear-gradient(180deg, rgba(224, 233, 236, 0.42) 0, rgba(243, 247, 247, 0.2) 108px, rgba(255, 255, 255, 0) 235px),
    radial-gradient(circle at 82% 3%, rgba(207, 231, 252, 0.28), transparent 28rem),
    #ffffff;
  color: #071c1f;
}

body[data-site-version="new"] .site-header {
  top: 17px;
  width: min(calc(100% - 40px), 1340px);
  min-height: 74px;
  grid-template-columns: 260px minmax(470px, 1fr) auto;
  padding: 11px 14px 11px 42px;
  border-radius: 20px;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.965);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 0 0 1px rgba(12, 41, 33, 0.035),
    0 5px 14px rgba(18, 52, 44, 0.06),
    0 22px 58px rgba(18, 52, 44, 0.13);
}

/* The reference header closes with a quiet mint rim: it is a lower outline, not a divider
   across the content, so the white bar retains its light, floating character. */
body[data-site-version="new"] .site-header::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -1px;
  bottom: -1px;
  left: -1px;
  height: 22px;
  border: 2px solid rgba(79, 183, 132, 0.62);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 2px 7px rgba(68, 174, 122, 0.12);
  pointer-events: none;
}

body[data-site-version="new"] .site-header > * {
  position: relative;
  z-index: 1;
}

body[data-site-version="new"] .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.985);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 1px rgba(12, 41, 33, 0.05),
    0 7px 18px rgba(18, 52, 44, 0.08),
    0 26px 64px rgba(18, 52, 44, 0.16);
}

body[data-site-version="new"] .brand img {
  width: 188px;
}

body[data-site-version="new"] .desktop-nav {
  gap: clamp(25px, 2.35vw, 42px);
}

body[data-site-version="new"] .desktop-nav a {
  color: #101f21;
  font-size: 13px;
  font-weight: 700;
}

body[data-site-version="new"] .desktop-nav a::after {
  bottom: 5px;
  height: 2px;
  background: #12a943;
}

body[data-site-version="new"] .header-actions {
  gap: 14px;
}

body[data-site-version="new"] .phone-action {
  display: inline-flex;
  width: auto;
  min-height: 48px;
  gap: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #102326;
  box-shadow: none;
  font-size: 13px;
  font-weight: 780;
}

body[data-site-version="new"] .phone-action svg {
  width: 38px;
  height: 38px;
  padding: 10px;
  border-radius: 50%;
  background: #ffffff;
  color: #12a943;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05),
    0 5px 15px rgba(23, 66, 48, 0.13);
}

body[data-site-version="new"] .phone-action:hover {
  background: transparent;
  box-shadow: none;
}

body[data-site-version="new"] .phone-action:hover svg {
  background: #eff9f0;
}

.header-phone-label {
  white-space: nowrap;
}

body[data-site-version="new"] .header-cta {
  min-height: 42px;
  gap: 18px;
  padding: 0 15px 0 22px;
  background: linear-gradient(135deg, #19b64b, #109c3c);
  font-size: 13px;
  box-shadow: 0 9px 24px rgba(17, 164, 64, 0.25);
}

body[data-site-version="new"] .header-cta:hover {
  background: linear-gradient(135deg, #16aa45, #0c8f35);
}

.header-cta-arrow {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

body[data-site-version="new"] .hero {
  min-height: 640px;
  padding: 128px 0 34px;
  overflow: hidden;
  isolation: isolate;
  background: #ffffff;
}

body[data-site-version="new"] .hero::before {
  display: block;
  position: absolute;
  z-index: 0;
  inset: -16% -8% -20%;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    radial-gradient(ellipse 48% 58% at 62% 68%, rgba(255, 238, 139, 0.66) 0%, rgba(255, 242, 168, 0.4) 37%, transparent 72%),
    radial-gradient(ellipse 46% 66% at 69% 21%, rgba(142, 231, 239, 0.54) 0%, rgba(193, 244, 238, 0.3) 43%, transparent 75%),
    radial-gradient(ellipse 39% 60% at 94% 22%, rgba(192, 184, 255, 0.42) 0%, rgba(220, 215, 255, 0.2) 45%, transparent 75%),
    radial-gradient(ellipse 43% 56% at 94% 76%, rgba(196, 239, 174, 0.44) 0%, rgba(231, 249, 190, 0.22) 44%, transparent 74%),
    linear-gradient(110deg, #ffffff 4%, #fcfdf9 39%, #f5fbf7 100%);
  background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  background-size: 112% 116%, 118% 120%, 115% 118%, 118% 118%, 100% 100%;
  filter: blur(18px) saturate(1.04);
  opacity: 0.92;
  transform: translate3d(0, 0, 0) scale(1.02);
  pointer-events: none;
}

body[data-site-version="new"] .hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -20% -10%;
  background:
    radial-gradient(ellipse 36% 48% at 82% 47%, rgba(96, 231, 222, 0.25), transparent 72%),
    radial-gradient(ellipse 34% 47% at 54% 25%, rgba(224, 248, 190, 0.28), transparent 73%),
    radial-gradient(ellipse 31% 48% at 85% 10%, rgba(207, 199, 255, 0.2), transparent 74%);
  filter: blur(32px);
  opacity: 0.78;
  transform: translate3d(0, 0, 0) scale(1.04);
  pointer-events: none;
}

body[data-site-version="new"] .hero-inner {
  z-index: 1;
  width: min(1260px, calc(100% - 56px));
  min-height: 484px;
  grid-template-columns: minmax(510px, 0.93fr) minmax(590px, 1.07fr);
  gap: 18px;
}

body[data-site-version="new"] .hero-copy {
  max-width: 610px;
  padding-left: 5px;
}

.hero-location {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0 15px 0 12px;
  border: 1px solid rgba(27, 139, 60, 0.08);
  border-radius: 999px;
  background: rgba(240, 249, 241, 0.9);
  color: #0c9137;
  box-shadow: 0 5px 14px rgba(27, 98, 46, 0.09);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.hero-location svg {
  width: 17px;
  height: 17px;
  fill: #12a943;
  stroke: #ffffff;
  stroke-width: 1.6;
}

body[data-site-version="new"] .hero h1 {
  max-width: none;
  color: #061c1f;
  font-size: clamp(49px, 4.15vw, 64px);
  font-weight: 850;
  letter-spacing: -0.057em;
  line-height: 1.03;
  text-wrap: nowrap;
}

body[data-site-version="new"] .hero .hero-title-line-green {
  color: #16aa42;
}

body[data-site-version="new"] .hero-lead {
  max-width: 570px;
  margin-top: 22px;
  color: #596269;
  font-size: clamp(16px, 1.22vw, 19px);
  line-height: 1.62;
}

body[data-site-version="new"] .hero-actions {
  flex-wrap: nowrap;
  gap: 26px;
  margin-top: 29px;
}

body[data-site-version="new"] .hero .button-primary {
  min-height: 52px;
  gap: 18px;
  padding: 0 11px 0 26px;
  background: linear-gradient(135deg, #18b448, #10a33f);
  font-size: 14px;
  box-shadow: 0 11px 25px rgba(17, 162, 62, 0.24);
  white-space: nowrap;
}

body[data-site-version="new"] .hero .button-primary:hover {
  background: linear-gradient(135deg, #15aa43, #0b9235);
  transform: translateY(-2px);
}

.button-arrow {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ffffff;
  color: #10a33f;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
}

.hero-phone {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  gap: 13px;
  color: #122326;
  text-decoration: none;
}

.hero-phone-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ffffff;
  color: #13a842;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 7px 18px rgba(22, 73, 47, 0.13);
  transition: transform 180ms var(--ease), background-color 180ms ease;
}

.hero-phone:hover .hero-phone-icon {
  background: #eff9f0;
  transform: translateY(-2px);
}

.hero-phone svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-phone strong,
.hero-phone small {
  display: block;
}

.hero-phone strong {
  font-size: 14px;
  font-weight: 820;
  line-height: 1.2;
  white-space: nowrap;
}

.hero-phone small {
  margin-top: 4px;
  color: #687076;
  font-size: 11px;
}

body[data-site-version="new"] .hero-proof {
  display: block;
  width: fit-content;
  min-width: 365px;
  margin: 31px 0 0;
  padding: 13px 20px 12px;
  border: 1px solid rgba(21, 74, 40, 0.035);
  border-radius: 20px;
  background: linear-gradient(105deg, rgba(249, 251, 245, 0.98), rgba(244, 249, 246, 0.72));
  box-shadow: 0 9px 24px rgba(27, 77, 51, 0.05);
}

.hero-proof p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #465057;
  font-size: 11.5px;
  line-height: 1.4;
  white-space: nowrap;
}

.hero-proof p strong {
  color: #19282a;
  font-weight: 760;
}

.hero-stars {
  color: #f7a400;
  font-size: 15px;
  letter-spacing: 1px;
}

.hero-proof i {
  width: 3px;
  height: 3px;
  margin-inline: 7px;
  border-radius: 50%;
  background: #8b9295;
}

.hero-proof small {
  display: block;
  margin-top: 6px;
  color: #6d767a;
  font-size: 10.5px;
}

body[data-site-version="new"] .hero-media {
  position: relative;
  width: min(710px, 56vw);
  height: 500px;
  justify-self: end;
  transform: none;
  animation: hero-media-enter 760ms 120ms var(--ease) both;
}

.hero-visual-backdrop {
  position: absolute;
  top: 3px;
  left: -3%;
  width: 103%;
  height: calc(100% - 13px);
  overflow: visible;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}

body[data-site-version="new"] .hero-media picture {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  overflow: visible;
}

body[data-site-version="new"] .hero-media img.hero-garden-art {
  width: 108%;
  max-width: none;
  height: auto;
  margin: 0 0 -7px -8%;
  object-fit: contain;
  filter: drop-shadow(0 24px 19px rgba(18, 73, 40, 0.13));
  transform: translate3d(var(--depth-x, 0), var(--depth-y, 0), 0);
  transition: transform 420ms var(--ease);
  will-change: transform;
}

.hero-float {
  position: absolute;
  z-index: 3;
  display: flex;
  width: 280px;
  min-height: 122px;
  align-items: center;
  gap: 14px;
  padding: 16px 18px 16px 15px;
  border: 1px solid rgba(27, 66, 47, 0.035);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  color: #172428;
  box-shadow: 0 16px 38px rgba(30, 61, 52, 0.13);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: hero-float-enter 560ms 470ms var(--ease) both;
}

.hero-float p {
  margin: 0;
  line-height: 1.35;
}

.hero-float strong,
.hero-float small {
  display: block;
}

.hero-float strong {
  font-size: 12.5px;
  font-weight: 810;
}

.hero-float small {
  margin-top: 7px;
  color: #4f5b60;
  font-size: 10px;
  line-height: 1.55;
}

.hero-float-schedule {
  top: 66px;
  right: 47px;
}

.hero-float-care {
  top: 213px;
  right: 47px;
  min-height: 136px;
}

.hero-float-icon {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #fbfff9 0, #edf9ef 64%, #e4f5e8 100%);
  box-shadow: inset 0 0 0 1px rgba(18, 132, 62, 0.025);
}

.hero-float-icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 6px 7px rgba(14, 97, 43, 0.13));
}

@keyframes hero-media-enter {
  from { opacity: 0; transform: translate3d(18px, 14px, 0) scale(0.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes hero-float-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.top-benefits {
  position: relative;
  padding: 36px 0 40px;
  overflow: hidden;
  border-radius: 34px 34px 0 0;
  background:
    radial-gradient(circle at 7% 28%, rgba(224, 241, 218, 0.72), transparent 22rem),
    radial-gradient(circle at 90% 0%, rgba(233, 241, 255, 0.56), transparent 25rem),
    linear-gradient(120deg, #f8fbf4, #f8faf8 58%, #f5f8ee);
}

.top-benefits-inner {
  display: grid;
  width: min(1260px, calc(100% - 56px));
  margin-inline: auto;
  grid-template-columns: minmax(250px, 1.45fr) repeat(4, minmax(172px, 1fr));
  gap: 19px;
  align-items: stretch;
}

.benefits-intro {
  align-self: center;
  padding: 6px 27px 6px 6px;
}

.benefits-intro .eyebrow {
  margin-bottom: 18px;
  color: #0d9739;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.benefits-intro h2 {
  max-width: 13ch;
  color: #0c2225;
  font-size: clamp(25px, 2.05vw, 31px);
  font-weight: 820;
  letter-spacing: -0.045em;
  line-height: 1.18;
}

.benefits-intro > p:not(.eyebrow) {
  max-width: 285px;
  margin: 18px 0 0;
  color: #5f6a6e;
  font-size: 12.5px;
  line-height: 1.65;
}

.benefits-signature {
  position: relative;
  display: inline-block;
  margin-top: 15px;
  color: #138a38;
  font-family: "Bradley Hand", "Segoe Print", cursive;
  font-size: 19px;
  font-style: italic;
  transform: rotate(-3deg);
}

.benefits-signature::after {
  content: "";
  position: absolute;
  left: 3px;
  right: -8px;
  bottom: -4px;
  height: 1.5px;
  border-radius: 2px;
  background: #36a850;
  transform: rotate(-4deg);
  transform-origin: left center;
}

.benefits-scroll-cue {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  color: #3f5d4d;
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: 0.015em;
  text-decoration: none;
}

.benefits-scroll-arrow {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(24, 115, 55, 0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: #11a33d;
  box-shadow: 0 8px 20px rgba(24, 89, 49, 0.09);
}

.benefits-scroll-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit-card {
  position: relative;
  isolation: isolate;
  min-height: 290px;
  padding: 26px 19px 22px;
  overflow: hidden;
  border: 1px solid rgba(13, 67, 42, 0.035);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  text-align: center;
  box-shadow: 0 14px 31px rgba(21, 70, 46, 0.07);
  transition: transform 240ms var(--ease), box-shadow 240ms ease, background-color 240ms ease;
}

.benefit-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 2px 5px rgba(21, 70, 46, 0.035),
    0 23px 48px rgba(21, 70, 46, 0.13);
  opacity: 0;
  pointer-events: none;
}

.benefit-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -32%;
  bottom: -32%;
  left: -56%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0) skewX(-14deg);
}

.benefit-card > * {
  position: relative;
  z-index: 1;
}

.benefit-card:nth-of-type(1) { --benefit-wave-delay: 2.2s; }
.benefit-card:nth-of-type(2) { --benefit-wave-delay: 3.35s; }
.benefit-card:nth-of-type(3) { --benefit-wave-delay: 4.5s; }
.benefit-card:nth-of-type(4) { --benefit-wave-delay: 5.65s; }

.benefit-card:hover {
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(21, 70, 46, 0.11);
  transform: translateY(-4px);
}

.benefit-icon {
  display: grid;
  width: 102px;
  height: 102px;
  margin-inline: auto;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(36, 65, 51, 0.025);
}

.benefit-icon picture {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.benefit-icon img {
  width: 84px;
  height: 84px;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(40, 67, 52, 0.1));
}

.benefit-icon-leaves,
.benefit-icon-shield {
  background: radial-gradient(circle at 42% 35%, #fbfff6, #eef7e6 72%, #e8f2df);
}

.benefit-icon-calendar,
.benefit-icon-care {
  background: radial-gradient(circle at 42% 35%, #fbfaff, #f0efff 72%, #e9e8fb);
}

.benefit-icon-calendar img,
.benefit-icon-care img {
  width: 88px;
  height: 88px;
}

.benefit-icon-shield img {
  width: 80px;
  height: 80px;
}

.benefit-card h3 {
  margin-top: 18px;
  color: #101f22;
  font-size: 14.5px;
  font-weight: 820;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.benefit-card p {
  margin: 15px 0 0;
  color: #626c71;
  font-size: 12px;
  line-height: 1.6;
}

body[data-site-version="new"] .project-section {
  padding-top: 112px;
}

@media (max-width: 1220px) {
  body[data-site-version="new"] .site-header {
    grid-template-columns: 210px minmax(420px, 1fr) auto;
    padding-left: 25px;
  }

  body[data-site-version="new"] .desktop-nav {
    gap: 22px;
  }

  body[data-site-version="new"] .hero-inner {
    grid-template-columns: minmax(450px, 0.9fr) minmax(520px, 1.1fr);
  }

  body[data-site-version="new"] .hero h1 {
    font-size: clamp(46px, 4.65vw, 58px);
  }

  body[data-site-version="new"] .hero-media {
    width: min(650px, 55vw);
  }

  .top-benefits-inner {
    grid-template-columns: minmax(230px, 1.3fr) repeat(4, minmax(160px, 1fr));
    gap: 14px;
  }

  .benefits-intro {
    padding-right: 14px;
  }
}

@media (max-width: 1080px) {
  body[data-site-version="new"] .site-header {
    grid-template-columns: 185px minmax(380px, 1fr) auto;
  }

  body[data-site-version="new"] .brand img {
    width: 168px;
  }

  body[data-site-version="new"] .desktop-nav {
    gap: 17px;
  }

  .header-phone-label {
    display: none;
  }

  body[data-site-version="new"] .hero-inner {
    grid-template-columns: minmax(420px, 0.88fr) minmax(480px, 1.12fr);
  }

  body[data-site-version="new"] .hero h1 {
    font-size: 50px;
  }

  body[data-site-version="new"] .hero-actions {
    gap: 15px;
  }

  body[data-site-version="new"] .hero .button-primary {
    padding-left: 20px;
    font-size: 12.5px;
  }

  .hero-phone strong {
    font-size: 12.5px;
  }

  .top-benefits-inner {
    grid-template-columns: repeat(4, 1fr);
  }

  .benefits-intro {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 0.85fr 1.2fr 1.1fr;
    gap: 22px;
    align-items: center;
    padding: 0 4px 10px;
  }

  .benefits-intro .eyebrow,
  .benefits-intro > p:not(.eyebrow) {
    margin: 0;
  }

  .benefits-signature {
    display: none;
  }
}

@media (max-width: 900px) {
  body[data-site-version="new"] .site-header {
    grid-template-columns: 1fr auto;
    min-height: 64px;
    padding: 8px 8px 8px 18px;
    border-radius: 18px;
  }

  body[data-site-version="new"] .site-header::after {
    height: 16px;
    border-width: 1.5px;
    border-radius: 0 0 18px 18px;
  }

  body[data-site-version="new"] .brand img {
    width: 160px;
  }

  body[data-site-version="new"] .desktop-nav,
  body[data-site-version="new"] .phone-action {
    display: none;
  }

  body[data-site-version="new"] .menu-button {
    display: inline-grid;
  }

  body[data-site-version="new"] .hero {
    min-height: 0;
    padding: 112px 0 34px;
  }

  body[data-site-version="new"] .hero-inner {
    width: min(760px, calc(100% - 42px));
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 26px;
  }

  body[data-site-version="new"] .hero-copy {
    max-width: 670px;
    padding-left: 0;
  }

  body[data-site-version="new"] .hero h1 {
    font-size: clamp(49px, 7vw, 62px);
  }

  body[data-site-version="new"] .hero-media {
    width: min(720px, 100%);
    height: 510px;
    justify-self: center;
  }

  .hero-float-schedule {
    right: 10px;
  }

  .hero-float-care {
    right: 10px;
    min-height: 122px;
  }

  .top-benefits-inner {
    width: min(760px, calc(100% - 42px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .benefits-intro {
    grid-column: 1 / -1;
    grid-template-columns: 0.8fr 1.25fr;
    padding-bottom: 16px;
  }

  .benefits-intro > p:not(.eyebrow) {
    grid-column: 1 / -1;
    max-width: 610px;
  }
}

@media (max-width: 700px) {
  body[data-site-version="new"] .site-header {
    top: 8px;
    width: calc(100% - 16px);
    min-height: 60px;
  }

  body[data-site-version="new"] .brand img {
    width: 148px;
  }

  body[data-site-version="new"] .header-cta {
    min-height: 42px;
    gap: 8px;
    padding: 0 11px 0 14px;
  }

  body[data-site-version="new"] .hero {
    padding: 97px 0 28px;
  }

  body[data-site-version="new"] .hero-inner {
    width: min(100% - 28px, 620px);
    gap: 20px;
  }

  .hero-location {
    min-height: 33px;
    margin-bottom: 20px;
    padding-inline: 10px 12px;
    font-size: 11px;
  }

  body[data-site-version="new"] .hero h1 {
    font-size: clamp(38px, 11.5vw, 53px);
    line-height: 1.06;
    text-wrap: balance;
  }

  body[data-site-version="new"] .hero-lead {
    margin-top: 20px;
    font-size: 15px;
  }

  body[data-site-version="new"] .hero-actions {
    display: grid;
    gap: 14px;
    margin-top: 24px;
  }

  body[data-site-version="new"] .hero .button-primary {
    width: 100%;
    min-height: 52px;
    justify-content: space-between;
    padding-left: 22px;
    font-size: 13px;
  }

  .hero-phone {
    width: fit-content;
  }

  body[data-site-version="new"] .hero-proof {
    width: 100%;
    min-width: 0;
    margin-top: 23px;
    padding-inline: 15px;
  }

  .hero-proof p {
    gap: 5px;
    font-size: 10px;
  }

  .hero-stars {
    font-size: 12px;
  }

  .hero-proof i {
    margin-inline: 3px;
  }

  body[data-site-version="new"] .hero-media {
    width: calc(100% + 8px);
    height: 390px;
    margin-left: -4px;
  }

  .hero-visual-backdrop {
    top: 8px;
    left: -10%;
    width: 110%;
    height: calc(100% - 22px);
  }

  body[data-site-version="new"] .hero-media img.hero-garden-art {
    width: 119%;
    margin: 0 0 5px -15%;
  }

  .hero-float {
    width: 184px;
    min-height: 82px;
    gap: 8px;
    padding: 10px;
    border-radius: 17px;
  }

  .hero-float-schedule {
    top: 15px;
    right: -3px;
  }

  .hero-float-icon {
    width: 48px;
    height: 48px;
  }

  .hero-float-icon img {
    width: 41px;
    height: 41px;
  }

  .hero-float strong {
    font-size: 9.5px;
  }

  .hero-float small {
    margin-top: 4px;
    font-size: 7.5px;
    line-height: 1.45;
  }

  .hero-float-care {
    top: 107px;
    right: -3px;
    bottom: auto;
    left: auto;
    min-height: 82px;
  }

  .top-benefits {
    padding: 31px 0 35px;
    border-radius: 28px 28px 0 0;
  }

  .top-benefits-inner {
    width: min(100% - 28px, 620px);
    gap: 13px;
  }

  .benefits-intro {
    display: block;
    padding: 2px 3px 15px;
  }

  .benefits-intro h2 {
    max-width: 16ch;
    font-size: 28px;
  }

  .benefits-intro > p:not(.eyebrow) {
    margin-top: 15px;
  }

  .benefit-card {
    min-height: 272px;
    padding-inline: 14px;
  }
}

@media (max-width: 520px) {
  .header-cta-arrow {
    display: none;
  }

  .top-benefits-inner {
    grid-template-columns: 1fr;
  }

  .benefit-card {
    display: grid;
    min-height: 0;
    grid-template-columns: 78px 1fr;
    grid-template-rows: auto auto;
    column-gap: 17px;
    align-items: center;
    padding: 17px;
    text-align: left;
  }

  .benefit-icon {
    width: 78px;
    height: 78px;
    grid-row: 1 / 3;
  }

  .benefit-icon img,
  .benefit-icon-calendar img,
  .benefit-icon-care img,
  .benefit-icon-shield img {
    width: 68px;
    height: 68px;
  }

  .benefit-card h3 {
    align-self: end;
    margin-top: 0;
    font-size: 14px;
  }

  .benefit-card p {
    align-self: start;
    margin-top: 6px;
    font-size: 11px;
  }
}

@media (max-width: 390px) {
  body[data-site-version="new"] .brand img {
    width: 136px;
  }

  body[data-site-version="new"] .header-cta {
    padding-inline: 11px;
    font-size: 10px;
  }

  body[data-site-version="new"] .hero h1 {
    font-size: 39px;
  }

  .hero-location {
    font-size: 10px;
  }

  body[data-site-version="new"] .hero-media {
    height: 350px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-site-version="new"] .hero-media,
  body[data-site-version="new"] .hero-float {
    animation: none;
  }

  body[data-site-version="new"] .hero-media img.hero-garden-art {
    transform: none;
  }
}

@media (min-width: 1400px) {
  :root {
    --content: clamp(1180px, 78vw, 1580px);
  }

  body[data-site-version="new"] .site-header {
    width: min(1900px, 87.5vw);
    min-height: clamp(74px, 4vw, 82px);
    grid-template-columns: clamp(240px, 14vw, 320px) minmax(520px, 1fr) auto;
    padding-inline: clamp(42px, 2.75vw, 56px);
  }

  body[data-site-version="new"] .brand img {
    width: clamp(190px, 10.5vw, 214px);
  }

  body[data-site-version="new"] .desktop-nav {
    justify-content: flex-start;
    gap: clamp(39px, 2.75vw, 52px);
    padding-left: clamp(70px, 4.8vw, 88px);
  }

  body[data-site-version="new"] .desktop-nav a,
  body[data-site-version="new"] .phone-action {
    font-size: clamp(12.5px, 0.7vw, 14px);
  }

  body[data-site-version="new"] .header-cta {
    display: inline-flex;
    min-width: 190px;
    align-items: center;
    justify-content: space-between;
    font-size: clamp(13px, 0.72vw, 14px);
  }

  body[data-site-version="new"] .hero {
    padding: 128px 0 clamp(19px, calc(5vw - 59px), 55px);
  }

  .top-benefits {
    min-height: calc(100vh - 628px - clamp(19px, calc(5vw - 59px), 55px));
    min-height: calc(100svh - 628px - clamp(19px, calc(5vw - 59px), 55px));
    display: grid;
    align-items: center;
  }

  body[data-site-version="new"] .hero-inner {
    width: min(1900px, 87.5vw);
    padding-left: clamp(36px, 2.35vw, 56px);
    grid-template-columns: minmax(520px, 0.92fr) minmax(620px, 1.08fr);
    gap: clamp(22px, 1.5vw, 38px);
  }

  body[data-site-version="new"] .hero-copy {
    top: 4px;
    max-width: 720px;
  }

  .hero-location {
    margin-bottom: 20px;
  }

  body[data-site-version="new"] .hero h1 {
    font-size: clamp(62px, 4.08vw, 80px);
    letter-spacing: -0.018em;
  }

  body[data-site-version="new"] .hero .hero-title-line-green {
    letter-spacing: -0.012em;
  }

  body[data-site-version="new"] .hero-lead {
    max-width: 620px;
    margin-top: 14px;
    font-size: clamp(18px, 1.21vw, 22px);
    line-height: 1.52;
  }

  body[data-site-version="new"] .hero-actions {
    gap: 34px;
    margin-top: 33px;
  }

  body[data-site-version="new"] .hero .button-primary {
    min-width: 330px;
    justify-content: space-between;
  }

  body[data-site-version="new"] .hero-proof {
    margin-top: 36px;
    padding-bottom: 14px;
  }

  body[data-site-version="new"] .hero-media {
    width: min(880px, 44.3vw);
  }

  body[data-site-version="new"] .hero-media img.hero-garden-art {
    width: min(108%, 800px);
    transform: translate3d(var(--depth-x, 0), var(--depth-y, 0), 0) scaleX(1.045);
    transform-origin: right bottom;
  }

  .top-benefits-inner {
    width: min(1780px, calc(61.7vw + 214px));
    margin-right: auto;
    margin-left: calc((100vw - min(1900px, 87.5vw)) / 2 + clamp(42px, 2.75vw, 56px));
    grid-template-columns: minmax(0, 1.41fr) repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 1.4vw, 30px);
    align-items: start;
  }

  .benefits-intro {
    position: relative;
    top: -4px;
    padding-right: clamp(24px, 1.7vw, 36px);
  }

  .benefits-intro .eyebrow {
    font-size: 13px;
  }

  .benefits-intro h2 {
    max-width: 14ch;
    font-size: 27px;
    line-height: 1.12;
    letter-spacing: 0;
  }

  .benefits-intro > p:not(.eyebrow) {
    max-width: 360px;
    margin-top: 14px;
    font-size: clamp(12.5px, 0.72vw, 14px);
  }

  .benefits-signature {
    margin-top: 12px;
  }

  .benefit-card {
    min-height: 290px;
    padding-inline: 16px;
  }

  .benefit-card h3 {
    font-size: 14px;
  }

  .benefit-card p {
    font-size: clamp(12px, 0.68vw, 13px);
  }
}

@media (min-width: 2050px) {
  body[data-site-version="new"] .hero-inner {
    grid-template-columns: minmax(800px, 0.8fr) minmax(900px, 1.2fr);
    gap: 28px;
  }

  body[data-site-version="new"] .hero-copy {
    top: 18px;
    max-width: 800px;
  }

  body[data-site-version="new"] .hero-media {
    width: 100%;
  }

  body[data-site-version="new"] .hero-media img.hero-garden-art {
    transform: translate3d(var(--depth-x, 0), var(--depth-y, 0), 0) scaleX(1.08);
  }
}

/* The selected homepage direction is intentionally motion-free. */
html[data-motion="off"] {
  scroll-behavior: auto !important;
}

html[data-motion="off"] body *,
html[data-motion="off"] body *::before,
html[data-motion="off"] body *::after,
html[data-motion="off"] dialog::backdrop {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html[data-motion="off"].html-loaded [data-reveal],
html[data-motion="off"].html-loaded [data-hero-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

html[data-motion="off"] body .hero-media img.hero-garden-art {
  will-change: auto;
}

html[data-motion="off"] body .project:hover img,
html[data-motion="off"] body .ai-visual:hover img,
html[data-motion="off"] body .benefit-card:hover,
html[data-motion="off"] body .button:hover,
html[data-motion="off"] body .hero-phone:hover .hero-phone-icon,
html[data-motion="off"] body .mode-list button:hover,
html[data-motion="off"] body .version-switch summary:hover,
html[data-motion="off"] body .seo-service-links a:hover {
  transform: none !important;
}

/* Motion direction: quiet, spatial and deliberately slow. */
:root {
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-apple-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"] body[data-site-version="new"] .hero::before {
    animation: hero-ambient-gradient-drift 30s var(--ease-apple-soft) infinite alternate;
    will-change: background-position, transform;
  }

  html[data-motion="soft"] body[data-site-version="new"] .hero::after {
    animation: hero-ambient-color-bloom 38s var(--ease-apple-soft) infinite alternate;
    will-change: transform, opacity;
  }

  html[data-motion="soft"].html-loaded .site-header {
    animation: soft-header-enter 860ms 40ms var(--ease-apple) both;
  }

  html[data-motion="soft"].html-loaded [data-hero-stagger] > * {
    animation: soft-hero-enter 900ms var(--ease-apple) both;
  }

  html[data-motion="soft"].html-loaded [data-hero-stagger] > *:nth-child(1) { animation-delay: 100ms; }
  html[data-motion="soft"].html-loaded [data-hero-stagger] > *:nth-child(2) { animation-delay: 190ms; }
  html[data-motion="soft"].html-loaded [data-hero-stagger] > *:nth-child(3) { animation-delay: 300ms; }
  html[data-motion="soft"].html-loaded [data-hero-stagger] > *:nth-child(4) { animation-delay: 410ms; }
  html[data-motion="soft"].html-loaded [data-hero-stagger] > *:nth-child(5) { animation-delay: 520ms; }

  html[data-motion="soft"] body[data-site-version="new"] .hero-media {
    animation: soft-media-enter 1120ms 150ms var(--ease-apple) both;
  }

  html[data-motion="soft"] .hero-float {
    animation: soft-float-enter 860ms var(--ease-apple) both;
  }

  html[data-motion="soft"] .hero-float-schedule { animation-delay: 610ms; }
  html[data-motion="soft"] .hero-float-care { animation-delay: 740ms; }

  html[data-motion="soft"] .hero-visual-backdrop {
    animation: soft-backdrop-breathe 13s 1400ms ease-in-out infinite alternate;
    transform-origin: 62% 48%;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .benefit-card.is-visible {
    animation: soft-benefit-card-wave 14s var(--benefit-wave-delay) var(--ease-apple-soft) infinite;
    will-change: translate;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .benefit-card.is-visible::before {
    animation: soft-benefit-card-aura 14s var(--benefit-wave-delay) var(--ease-apple-soft) infinite;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .benefit-card.is-visible::after {
    animation: soft-benefit-card-sheen 14s var(--benefit-wave-delay) ease-in-out infinite;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .benefit-card.is-visible .benefit-icon {
    animation: soft-benefit-icon-wave 14s var(--benefit-wave-delay) var(--ease-apple-soft) infinite;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .benefits-scroll-arrow svg {
    animation: soft-scroll-cue 2.8s 1.8s var(--ease-apple-soft) infinite;
  }

  html[data-motion="soft"].html-loaded [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.994);
    filter: none;
    transition-property: opacity, transform;
    transition-duration: 880ms;
    transition-timing-function: var(--ease-apple);
  }

  html[data-motion="soft"].html-loaded [data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }

  html[data-motion="soft"] body[data-site-version="new"] .hero-media img.hero-garden-art {
    transition-duration: 620ms;
    transition-timing-function: var(--ease-apple-soft);
  }

  html[data-motion="soft"] .site-header,
  html[data-motion="soft"] .button,
  html[data-motion="soft"] .header-cta,
  html[data-motion="soft"] .hero-phone-icon,
  html[data-motion="soft"] .benefit-card,
  html[data-motion="soft"] .mobile-menu,
  html[data-motion="soft"] .version-switch summary,
  html[data-motion="soft"] .version-switch-menu {
    transition-duration: 340ms;
    transition-timing-function: var(--ease-apple-soft);
  }

  html[data-motion="soft"] .benefit-card:hover {
    transform: translateY(-3px);
  }

  html[data-motion="soft"] .request-dialog[open]:not(.request-wizard) {
    animation: soft-dialog-enter 440ms var(--ease-apple) both;
  }
}

@keyframes soft-header-enter {
  from {
    opacity: 0;
    transform: translate3d(-50%, -12px, 0) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@keyframes soft-hero-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.992);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes soft-media-enter {
  from {
    opacity: 0;
    transform: translate3d(20px, 14px, 0) scale(0.985);
    filter: blur(5px) saturate(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) saturate(1);
  }
}

@keyframes soft-float-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.975);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes soft-backdrop-breathe {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-2.5px, 2px, 0) scale(1.006); }
}

@keyframes hero-ambient-gradient-drift {
  0% {
    background-position: 42% 58%, 46% 45%, 52% 43%, 49% 54%, 50% 50%;
    transform: translate3d(-0.8%, -0.25%, 0) scale(1.025);
  }
  48% {
    background-position: 55% 44%, 59% 58%, 45% 54%, 54% 42%, 50% 50%;
    transform: translate3d(0.45%, 0.55%, 0) scale(1.045);
  }
  100% {
    background-position: 48% 52%, 43% 56%, 58% 48%, 47% 58%, 50% 50%;
    transform: translate3d(0.95%, -0.45%, 0) scale(1.03);
  }
}

@keyframes hero-ambient-color-bloom {
  0% {
    opacity: 0.52;
    transform: translate3d(-1.4%, 0.8%, 0) scale(1.045) rotate(-1deg);
  }
  52% {
    opacity: 0.82;
    transform: translate3d(1.25%, -0.9%, 0) scale(1.09) rotate(0.8deg);
  }
  100% {
    opacity: 0.6;
    transform: translate3d(0.35%, 1.25%, 0) scale(1.06) rotate(-0.35deg);
  }
}

@keyframes soft-benefit-card-wave {
  0%, 18%, 100% {
    translate: 0 0;
  }
  7% {
    translate: 0 -3px;
  }
}

@keyframes soft-benefit-card-aura {
  0%, 18%, 100% { opacity: 0; }
  7% { opacity: 1; }
}

@keyframes soft-benefit-icon-wave {
  0%, 18%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  7% { transform: translate3d(0, -1px, 0) scale(1.045); }
}

@keyframes soft-benefit-card-sheen {
  0%, 2% {
    opacity: 0;
    transform: translate3d(0, 0, 0) skewX(-14deg);
  }
  7% { opacity: 0.34; }
  15% {
    opacity: 0;
    transform: translate3d(390%, 0, 0) skewX(-14deg);
  }
  18%, 100% {
    opacity: 0;
    transform: translate3d(390%, 0, 0) skewX(-14deg);
  }
}

@keyframes soft-scroll-cue {
  0%, 18%, 100% { transform: translate3d(0, 0, 0); opacity: 0.72; }
  45% { transform: translate3d(0, 3px, 0); opacity: 1; }
}

@keyframes soft-dialog-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-motion="soft"] *,
  html[data-motion="soft"] *::before,
  html[data-motion="soft"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  html[data-motion="soft"].html-loaded [data-reveal],
  html[data-motion="soft"].html-loaded [data-hero-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Homepage V6: one continuous illustrated garden stage below the fold. */
body[data-site-version="new"] .project-section {
  padding-top: clamp(104px, 8vw, 148px);
  padding-bottom: clamp(108px, 8vw, 150px);
}

.project-section-heading {
  display: grid;
  margin-bottom: clamp(40px, 3.5vw, 58px);
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.56fr);
  gap: 36px clamp(52px, 6vw, 106px);
  align-items: end;
}

.project-section-heading .eyebrow {
  margin-bottom: 15px;
  letter-spacing: 0;
  text-transform: none;
}

.project-section-heading h2 {
  max-width: 12ch;
  color: #092023;
  font-size: clamp(48px, 4.1vw, 78px);
  font-weight: 830;
  letter-spacing: -0.048em;
  line-height: 0.99;
  text-wrap: balance;
}

.project-section-heading > p {
  max-width: 500px;
  margin: 0 0 4px;
  color: #58666a;
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.68;
}

.project-showcase {
  position: relative;
  min-height: clamp(550px, 38vw, 680px);
  overflow: hidden;
  border: 1px solid rgba(18, 77, 46, 0.06);
  border-radius: clamp(32px, 3vw, 48px);
  background:
    radial-gradient(circle at 16% 12%, rgba(218, 243, 207, 0.72), transparent 29%),
    radial-gradient(circle at 84% 8%, rgba(218, 238, 255, 0.72), transparent 31%),
    radial-gradient(circle at 61% 100%, rgba(239, 245, 210, 0.82), transparent 34%),
    linear-gradient(122deg, #f7fbf2 0%, #f8fbf8 52%, #f4f8f6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 24px 70px rgba(30, 78, 53, 0.07);
}

.project-showcase::before,
.project-showcase::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.project-showcase::before {
  top: -43%;
  left: 13%;
  width: 58%;
  aspect-ratio: 1.45;
  border-radius: 44% 56% 48% 52% / 58% 42% 58% 42%;
  background: rgba(255, 255, 255, 0.46);
  transform: rotate(-7deg);
}

.project-showcase::after {
  right: -8%;
  bottom: -48%;
  width: 50%;
  aspect-ratio: 1.5;
  border: 1px solid rgba(61, 127, 84, 0.035);
  border-radius: 50%;
  background: rgba(228, 243, 222, 0.28);
  transform: rotate(8deg);
}

.project-scenes {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: inherit;
  grid-template-columns: 1.08fr 0.93fr 1.02fr;
}

.project-scene {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: minmax(330px, 1fr) auto;
  padding: clamp(24px, 2.1vw, 38px) clamp(22px, 2.25vw, 42px) clamp(32px, 2.8vw, 50px);
}

.project-scene + .project-scene::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(45, 101, 65, 0.1) 20%, rgba(45, 101, 65, 0.1) 80%, transparent);
}

.project-art {
  position: relative;
  display: grid;
  min-height: 330px;
  place-items: center;
}

.project-art::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 9%;
  bottom: 11%;
  left: 9%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(27, 82, 46, 0.18), rgba(27, 82, 46, 0) 69%);
  pointer-events: none;
}

.project-art picture {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.project-art img {
  display: block;
  max-width: none;
  height: auto;
}

.project-scene-form .project-art img {
  width: 128%;
}

.project-scene-lawn .project-art img {
  width: 145%;
}

.project-scene-tree .project-art img {
  width: 120%;
}

.project-scene-copy {
  position: relative;
  z-index: 2;
  padding-top: 22px;
  border-top: 1px solid rgba(34, 86, 53, 0.09);
}

.project-scene-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #238944;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.project-scene-kicker span {
  color: #79a887;
  font-variant-numeric: tabular-nums;
}

.project-scene-copy h3 {
  margin-top: 12px;
  color: #0b2527;
  font-size: clamp(22px, 1.7vw, 30px);
  font-weight: 820;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.project-scene-copy > p:last-child {
  max-width: 36ch;
  margin: 12px 0 0;
  color: #5a686b;
  font-size: clamp(12.5px, 0.9vw, 15px);
  line-height: 1.58;
}

html.is-section-scrolling {
  scroll-behavior: auto !important;
  will-change: scroll-position;
}

html.is-section-scrolling body[data-site-version="new"] .site-header {
  transition: none !important;
}

html.is-section-scrolling .hero-visual-backdrop,
html.is-section-scrolling .top-benefits .benefit-card,
html.is-section-scrolling .top-benefits .benefit-card::before,
html.is-section-scrolling .top-benefits .benefit-card::after,
html.is-section-scrolling .top-benefits .benefit-icon,
html.is-section-scrolling .top-benefits .benefits-scroll-arrow svg {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"].html-loaded .project-section-heading[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 72px, 0) scale(0.982);
    transition-duration: 1080ms;
    transition-timing-function: cubic-bezier(0.16, 1.08, 0.3, 1);
  }

  html[data-motion="soft"].html-loaded .project-showcase[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 106px, 0) scale(0.965);
    transform-origin: center 18%;
    transition-duration: 1220ms;
    transition-timing-function: cubic-bezier(0.16, 1.06, 0.3, 1);
  }

  html[data-motion="soft"].html-loaded .project-section-heading[data-reveal].is-visible,
  html[data-motion="soft"].html-loaded .project-showcase[data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  html[data-motion="soft"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner {
    animation: stage-opening-exit 1280ms cubic-bezier(0.28, 0.58, 0.24, 1) both;
    will-change: transform, opacity;
  }

  html[data-motion="soft"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner {
    animation: stage-opening-return 1240ms cubic-bezier(0.24, 0.62, 0.24, 1) both;
    will-change: transform, opacity;
  }

  html[data-motion="soft"] .project-showcase .project-art img {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.965);
    transition:
      opacity 760ms var(--ease-apple),
      transform 1040ms var(--ease-apple);
  }

  html[data-motion="soft"] .project-showcase.is-visible .project-art img {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  html[data-motion="soft"] .project-showcase.is-visible .project-scene-form .project-art img {
    transition-delay: 80ms;
  }

  html[data-motion="soft"] .project-showcase.is-visible .project-scene-lawn .project-art img {
    transition-delay: 180ms;
  }

  html[data-motion="soft"] .project-showcase.is-visible .project-scene-tree .project-art img {
    transition-delay: 280ms;
  }
}

@keyframes stage-opening-exit {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0.46;
    transform: translate3d(0, -34px, 0) scale(0.988);
  }
}

@keyframes stage-opening-return {
  from {
    opacity: 0.46;
    transform: translate3d(0, -34px, 0) scale(0.988);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (min-width: 1400px) {
  body[data-site-version="new"] .project-section {
    width: min(1900px, 87.5vw);
    padding-inline: clamp(36px, 2.35vw, 56px);
  }
}

@media (max-width: 1180px) {
  .project-section-heading {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
    gap: 32px 48px;
  }

  .project-showcase {
    min-height: 530px;
  }

  .project-scene {
    grid-template-rows: minmax(285px, 1fr) auto;
    padding-inline: 22px;
  }

  .project-art {
    min-height: 285px;
  }
}

@media (max-width: 900px) {
  body[data-site-version="new"] .project-section {
    width: min(100% - 32px, 760px);
    padding-top: 92px;
  }

  .project-section-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .project-section-heading h2 {
    max-width: 11ch;
  }

  .project-section-heading > p {
    max-width: 610px;
  }

  .project-showcase {
    min-height: 0;
  }

  .project-scenes {
    display: block;
  }

  .project-scene {
    min-height: 390px;
    grid-template-columns: minmax(0, 1.12fr) minmax(245px, 0.88fr);
    grid-template-rows: 1fr;
    gap: 24px;
    align-items: center;
    padding: 28px 30px;
  }

  .project-scene + .project-scene::before {
    top: 0;
    right: 30px;
    bottom: auto;
    left: 30px;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(45, 101, 65, 0.11) 16%, rgba(45, 101, 65, 0.11) 84%, transparent);
  }

  .project-art {
    min-height: 310px;
  }

  .project-scene-form .project-art img {
    width: 122%;
  }

  .project-scene-lawn .project-art img {
    width: 135%;
  }

  .project-scene-tree .project-art img {
    width: 112%;
  }

  .project-scene-copy {
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 620px) {
  body[data-site-version="new"] .project-section {
    width: calc(100% - 24px);
    padding-top: 78px;
    padding-bottom: 96px;
  }

  .project-section-heading {
    margin-bottom: 32px;
    padding-inline: 6px;
  }

  .project-section-heading h2 {
    font-size: clamp(39px, 11.8vw, 52px);
    line-height: 1.02;
  }

  .project-section-heading > p {
    font-size: 15px;
    line-height: 1.62;
  }

  .project-showcase {
    border-radius: 28px;
  }

  .project-scene {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(245px, auto) auto;
    gap: 5px;
    padding: 22px 18px 32px;
  }

  .project-scene + .project-scene::before {
    right: 18px;
    left: 18px;
  }

  .project-art {
    min-height: 245px;
  }

  .project-scene-form .project-art img {
    width: 130%;
  }

  .project-scene-lawn .project-art img {
    width: 145%;
  }

  .project-scene-tree .project-art img {
    width: 112%;
  }

  .project-scene-copy {
    padding: 18px 4px 0;
    border-top: 1px solid rgba(34, 86, 53, 0.09);
  }

  .project-scene-copy h3 {
    font-size: 25px;
  }

  .project-scene-copy > p:last-child {
    font-size: 13px;
  }
}

/* Homepage V7: larger conversion group and three connected illustrated stages. */
.project-stage-inner {
  width: 100%;
}

body[data-site-version="new"] .garden-stage {
  position: relative;
  isolation: isolate;
}

body[data-site-version="new"] {
  overflow-x: clip;
}

html:has(body[data-site-version="new"]) {
  overflow-x: clip;
}

body[data-site-version="new"] .services-section {
  display: block;
  width: min(1900px, 87.5vw);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(108px, 10vh, 132px) clamp(36px, 2.35vw, 56px) clamp(52px, 5vh, 72px);
  border-top: 0;
}

.services-stage-shell {
  display: grid;
  min-height: calc(100svh - clamp(176px, 15vh, 204px));
  grid-template-rows: auto minmax(340px, 1fr) auto;
  gap: clamp(18px, 2.2vh, 28px);
}

.services-stage-heading,
.process-stage-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.5fr);
  gap: clamp(54px, 8vw, 138px);
  align-items: end;
}

.services-stage-heading h2,
.process-stage-heading h2 {
  max-width: 12ch;
  color: #092023;
  font-size: clamp(52px, 4.15vw, 78px);
  font-weight: 840;
  letter-spacing: -0.05em;
  line-height: 0.99;
}

.services-stage-summary {
  align-self: end;
  padding-bottom: 4px;
}

.services-stage-summary > p,
.process-stage-heading > p {
  max-width: 500px;
  margin: 0;
  color: #5a686b;
  font-size: clamp(16px, 1.08vw, 19px);
  line-height: 1.68;
}

.services-stage-summary .text-button {
  margin-top: 18px;
}

.services-stage-visual {
  position: relative;
  display: grid;
  min-height: 340px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(35, 112, 60, 0.055);
  border-radius: clamp(34px, 3vw, 50px);
  background:
    radial-gradient(circle at 18% 15%, rgba(223, 245, 210, 0.8), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(218, 238, 255, 0.76), transparent 34%),
    linear-gradient(125deg, #f7fbf2 0%, #f9fbf8 48%, #f2f8f4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 22px 62px rgba(28, 81, 51, 0.065);
}

.garden-stage-halo {
  position: absolute;
  width: 68%;
  height: 54%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(85, 166, 86, 0.16), rgba(85, 166, 86, 0) 70%);
  transform: translateY(28%);
}

.services-stage-visual picture,
.services-stage-visual img {
  position: relative;
  z-index: 1;
  display: block;
}

.services-stage-visual picture {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.services-stage-visual img {
  width: min(980px, 68%);
  max-width: none;
  height: auto;
  margin-top: clamp(-62px, -5vh, -34px);
  filter: drop-shadow(0 25px 22px rgba(24, 82, 44, 0.13));
}

.services-stage-note {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 3vw, 48px);
  bottom: clamp(20px, 2.5vw, 36px);
  margin: 0;
  padding: 13px 18px;
  border: 1px solid rgba(31, 104, 55, 0.06);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 30px rgba(31, 84, 53, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.services-stage-note strong,
.services-stage-note span {
  display: block;
}

.services-stage-note strong {
  color: #102c22;
  font-size: 13px;
}

.services-stage-note span {
  margin-top: 3px;
  color: #67736d;
  font-size: 10.5px;
}

body[data-site-version="new"] .services-stage-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(22, 75, 44, 0.11);
  border-bottom: 1px solid rgba(22, 75, 44, 0.11);
  list-style: none;
}

body[data-site-version="new"] .services-stage-list li,
body[data-site-version="new"] .services-stage-list li:last-child {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
}

body[data-site-version="new"] .services-stage-list li + li {
  border-left: 1px solid rgba(22, 75, 44, 0.09);
}

.services-stage-list a {
  position: relative;
  display: grid;
  min-height: 112px;
  align-content: center;
  padding: 17px clamp(13px, 1.25vw, 24px);
  color: #132c25;
  text-decoration: none;
  transition: background-color 320ms var(--ease-apple-soft), color 320ms var(--ease-apple-soft);
}

.services-stage-list a:hover,
.services-stage-list a:focus-visible {
  background: rgba(233, 246, 229, 0.72);
  color: #0b9437;
}

.services-stage-list a > span {
  color: #6fa47d;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.services-stage-list strong {
  margin-top: 7px;
  font-size: clamp(14px, 1.05vw, 18px);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.services-stage-list small {
  margin-top: 5px;
  color: #6b7871;
  font-size: 10.5px;
}

.services-stage-list i {
  position: absolute;
  top: 17px;
  right: 16px;
  color: #18a242;
  font-size: 13px;
  font-style: normal;
}

body[data-site-version="new"] .home-seo-locations {
  display: grid;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  place-items: center;
  padding: clamp(98px, 9vh, 124px) 0 clamp(62px, 6vh, 84px);
  overflow: hidden;
  border-radius: clamp(44px, 4vw, 68px);
  background:
    radial-gradient(circle at 6% 20%, rgba(222, 242, 211, 0.88), transparent 31rem),
    radial-gradient(circle at 92% 4%, rgba(216, 238, 255, 0.78), transparent 34rem),
    linear-gradient(120deg, #f6faf0, #f7fbf8 55%, #f1f7f5);
}

body[data-site-version="new"] .home-seo-locations > .locations-stage-inner {
  display: grid;
  width: min(1900px, 87.5vw);
  max-width: none;
  min-height: calc(100svh - clamp(180px, 15vh, 208px));
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.52fr);
  gap: clamp(58px, 6vw, 118px);
  align-items: center;
  padding-inline: clamp(36px, 2.35vw, 56px);
}

.locations-stage-main {
  display: grid;
  min-width: 0;
  align-self: stretch;
  grid-template-rows: auto minmax(360px, 1fr);
}

.locations-stage-heading {
  position: relative;
  z-index: 2;
}

body[data-site-version="new"] .home-seo-locations h2 {
  max-width: 11ch;
  margin: 0;
  color: #092023;
  font-size: clamp(52px, 4.15vw, 78px);
  font-weight: 840;
  letter-spacing: -0.05em;
  line-height: 0.99;
}

body[data-site-version="new"] .locations-stage-heading > p:last-child {
  max-width: 570px;
  margin: 22px 0 0;
  color: #5a686b;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.68;
}

.locations-stage-visual {
  position: relative;
  display: grid;
  min-height: 360px;
  place-items: center;
}

.locations-stage-visual picture {
  display: grid;
  width: 100%;
  place-items: center;
}

.locations-stage-visual img {
  width: min(920px, 112%);
  max-width: none;
  height: auto;
  margin: -20px 0 -42px -7%;
  filter: drop-shadow(0 28px 24px rgba(27, 78, 48, 0.13));
}

.locations-radius {
  position: absolute;
  z-index: 2;
  right: 3%;
  bottom: 11%;
  display: flex;
  width: 106px;
  height: 106px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  border: 1px solid rgba(23, 101, 51, 0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 34px rgba(27, 77, 50, 0.11);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.locations-radius strong {
  color: #13983b;
  font-size: 34px;
  letter-spacing: -0.055em;
  line-height: 1;
}

.locations-radius span {
  color: #53655c;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.15;
}

.locations-stage-routes {
  align-self: center;
  padding-left: clamp(30px, 3vw, 54px);
  border-left: 1px solid rgba(24, 85, 48, 0.11);
}

.locations-stage-routes > p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: #456054;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.locations-stage-routes > p span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20aa48;
  box-shadow: 0 0 0 5px rgba(32, 170, 72, 0.1);
}

body[data-site-version="new"] .locations-stage-routes nav {
  display: grid;
  border-top: 1px solid rgba(22, 75, 44, 0.12);
}

body[data-site-version="new"] .locations-stage-routes nav a {
  display: grid;
  min-height: 66px;
  grid-template-columns: 34px 1fr 22px;
  gap: 10px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(22, 75, 44, 0.11);
  color: #142d25;
  font-size: clamp(15px, 1.1vw, 19px);
  font-weight: 760;
  text-decoration: none;
  transition: color 280ms var(--ease-apple-soft), padding 280ms var(--ease-apple-soft);
}

body[data-site-version="new"] .locations-stage-routes nav a:hover,
body[data-site-version="new"] .locations-stage-routes nav a:focus-visible {
  padding-inline: 10px 0;
  color: #0a9636;
}

.locations-stage-routes nav a span {
  color: #7aa286;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.locations-stage-routes nav a i {
  color: #1ba546;
  font-size: 13px;
  font-style: normal;
  text-align: right;
}

.locations-stage-routes > small {
  display: block;
  max-width: 34ch;
  margin-top: 18px;
  color: #718078;
  font-size: 10.5px;
  line-height: 1.55;
}

body[data-site-version="new"] .process-section {
  display: block;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #ffffff;
  color: #092023;
}

body[data-site-version="new"] .process-section::after {
  display: none;
}

body[data-site-version="new"] .process-inner {
  display: grid;
  width: min(1900px, 87.5vw);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(106px, 9vh, 130px) clamp(36px, 2.35vw, 56px) clamp(48px, 4.5vh, 68px);
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(340px, 1fr) auto;
  gap: clamp(18px, 2.2vh, 28px);
  align-items: stretch;
}

.process-stage-heading > p {
  align-self: end;
  padding-bottom: 4px;
}

.process-stage-visual {
  position: relative;
  display: grid;
  min-height: 340px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(28, 100, 51, 0.05);
  border-radius: clamp(34px, 3vw, 50px);
  background:
    radial-gradient(circle at 20% 18%, rgba(225, 245, 212, 0.76), transparent 31%),
    radial-gradient(circle at 85% 10%, rgba(220, 239, 255, 0.72), transparent 32%),
    linear-gradient(125deg, #f6faf1, #fafcf8 53%, #f3f8f4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 22px 62px rgba(28, 81, 51, 0.06);
}

.process-stage-visual picture {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.process-stage-visual img {
  width: min(1030px, 78%);
  max-width: none;
  height: auto;
  margin: -28px 0 -88px;
  filter: drop-shadow(0 24px 22px rgba(25, 78, 45, 0.13));
}

body[data-site-version="new"] .process-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(22, 75, 44, 0.11);
  border-bottom: 1px solid rgba(22, 75, 44, 0.11);
  list-style: none;
}

body[data-site-version="new"] .process-steps li,
body[data-site-version="new"] .process-steps li:last-child {
  display: grid;
  min-width: 0;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 22px clamp(18px, 2vw, 34px);
  border: 0;
}

body[data-site-version="new"] .process-steps li + li {
  border-left: 1px solid rgba(22, 75, 44, 0.09);
}

body[data-site-version="new"] .process-steps > li > span {
  padding-top: 3px;
  color: #5e9a70;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

body[data-site-version="new"] .process-steps h3 {
  color: #102a22;
  font-size: clamp(18px, 1.35vw, 24px);
  letter-spacing: -0.035em;
}

body[data-site-version="new"] .process-steps p {
  max-width: 34ch;
  margin: 8px 0 0;
  color: #66746d;
  font-size: clamp(11px, 0.82vw, 13.5px);
  line-height: 1.55;
}

@media (min-width: 1200px) {
  body[data-site-version="new"] .hero .button-primary {
    min-width: 360px;
    min-height: 60px;
    padding-left: 30px;
    font-size: 15px;
  }

  body[data-site-version="new"] .button-arrow {
    width: 38px;
    height: 38px;
    font-size: 21px;
  }

  body[data-site-version="new"] .hero-phone {
    min-height: 60px;
    gap: 15px;
  }

  body[data-site-version="new"] .hero-phone-icon {
    width: 56px;
    height: 56px;
  }

  body[data-site-version="new"] .hero-phone svg {
    width: 21px;
    height: 21px;
  }

  body[data-site-version="new"] .hero-phone strong {
    font-size: 15.5px;
  }

  body[data-site-version="new"] .hero-phone small {
    margin-top: 5px;
    font-size: 11.5px;
  }

  body[data-site-version="new"] .hero-proof {
    min-width: 420px;
    padding: 16px 22px 15px;
    border-radius: 22px;
  }

  body[data-site-version="new"] .hero-proof p {
    gap: 9px;
    font-size: 12.5px;
  }

  body[data-site-version="new"] .hero-stars {
    font-size: 17px;
  }

  body[data-site-version="new"] .hero-proof small {
    margin-top: 7px;
    font-size: 11px;
  }
}

@media (min-width: 901px) {
  body[data-site-version="new"] [data-scroll-stage] {
    min-height: 100vh;
    min-height: 100svh;
    scroll-margin-top: 0;
  }

  body[data-site-version="new"] .project-section {
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
  }

  body[data-site-version="new"] .ai-section,
  body[data-site-version="new"] .assurance-section,
  body[data-site-version="new"] .faq-section,
  body[data-site-version="new"] .final-cta {
    align-content: center;
  }
}

/* Homepage V8 motion lab: three restrained, selectable stage-transition systems. */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"] [data-scroll-stage].is-stage-leaving [data-stage-content],
  html[data-motion="soft"] [data-scroll-stage].is-stage-arriving [data-stage-content] {
    transform-origin: center 48%;
    will-change: transform, opacity;
  }

  /* Flow: the old section leads the scroll while the new section softly catches up. */
  html[data-motion="soft"][data-scroll-effect="flow"] [data-scroll-stage].is-stage-leaving [data-stage-content] {
    animation: v8-flow-leave-forward 1080ms cubic-bezier(0.34, 0.08, 0.2, 1) both;
  }

  html[data-motion="soft"][data-scroll-effect="flow"] [data-scroll-stage].is-stage-arriving [data-stage-content] {
    animation: v8-flow-arrive-forward 1080ms cubic-bezier(0.16, 0.82, 0.24, 1) both;
  }

  html[data-motion="soft"][data-scroll-effect="flow"][data-stage-direction="backward"] [data-scroll-stage].is-stage-leaving [data-stage-content] {
    animation-name: v8-flow-leave-backward;
  }

  html[data-motion="soft"][data-scroll-effect="flow"][data-stage-direction="backward"] [data-scroll-stage].is-stage-arriving [data-stage-content] {
    animation-name: v8-flow-arrive-backward;
  }

  html[data-motion="soft"][data-scroll-effect="flow"] [data-scroll-stage].is-stage-arriving [data-stage-art] img {
    animation: v8-flow-art-forward 1080ms cubic-bezier(0.16, 0.9, 0.24, 1) both;
    transform-origin: center 60%;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-scroll-effect="flow"][data-stage-direction="backward"] [data-scroll-stage].is-stage-arriving [data-stage-art] img {
    animation-name: v8-flow-art-backward;
  }

  html[data-motion="soft"][data-scroll-effect="flow"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner {
    animation: v8-flow-leave-forward 1080ms cubic-bezier(0.34, 0.08, 0.2, 1) both;
  }

  html[data-motion="soft"][data-scroll-effect="flow"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner {
    animation: v8-flow-arrive-backward 1080ms cubic-bezier(0.16, 0.82, 0.24, 1) both;
  }

  /* Depth: the current stage recedes before the next plane settles into focus. */
  html[data-motion="soft"][data-scroll-effect="depth"] [data-scroll-stage].is-stage-leaving [data-stage-content] {
    animation: v8-depth-leave-forward 1320ms cubic-bezier(0.62, 0, 0.24, 1) both;
  }

  html[data-motion="soft"][data-scroll-effect="depth"] [data-scroll-stage].is-stage-arriving [data-stage-content] {
    animation: v8-depth-arrive-forward 1320ms cubic-bezier(0.5, 0, 0.5, 1) both;
  }

  html[data-motion="soft"][data-scroll-effect="depth"][data-stage-direction="backward"] [data-scroll-stage].is-stage-leaving [data-stage-content] {
    animation-name: v8-depth-leave-backward;
  }

  html[data-motion="soft"][data-scroll-effect="depth"][data-stage-direction="backward"] [data-scroll-stage].is-stage-arriving [data-stage-content] {
    animation-name: v8-depth-arrive-backward;
  }

  html[data-motion="soft"][data-scroll-effect="depth"] [data-scroll-stage].is-stage-arriving [data-stage-art] img {
    animation: v8-depth-art-arrive 1320ms cubic-bezier(0.5, 0, 0.5, 1) both;
    transform-origin: center 58%;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner {
    animation: v8-depth-leave-forward 1320ms cubic-bezier(0.62, 0, 0.24, 1) both;
  }

  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner {
    animation: v8-depth-arrive-backward 1320ms cubic-bezier(0.5, 0, 0.5, 1) both;
  }

  /* The refined Staffel variants are defined in the V10 motion block below. */
}

@keyframes v8-flow-leave-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0.24; transform: translate3d(0, -58px, 0) scale(0.982); }
}

@keyframes v8-flow-arrive-forward {
  from { opacity: 0.34; transform: translate3d(0, 64px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v8-flow-leave-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0.24; transform: translate3d(0, 58px, 0) scale(0.982); }
}

@keyframes v8-flow-arrive-backward {
  from { opacity: 0.34; transform: translate3d(0, -64px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v8-flow-art-forward {
  from { opacity: 0.48; transform: translate3d(0, 26px, 0) scale(0.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v8-flow-art-backward {
  from { opacity: 0.48; transform: translate3d(0, -26px, 0) scale(0.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v8-depth-leave-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0.16; transform: translate3d(0, -18px, 0) scale(0.945); }
}

@keyframes v8-depth-arrive-forward {
  from { opacity: 0.18; transform: translate3d(0, 28px, 0) scale(0.958); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v8-depth-leave-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0.16; transform: translate3d(0, 18px, 0) scale(0.945); }
}

@keyframes v8-depth-arrive-backward {
  from { opacity: 0.18; transform: translate3d(0, -28px, 0) scale(0.958); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v8-depth-art-arrive {
  from { opacity: 0.42; transform: translate3d(0, 0, 0) scale(1.035); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v8-cascade-shell {
  from, to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes v8-cascade-leave-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, -44px, 0) scale(0.982); }
}

@keyframes v8-cascade-arrive-forward {
  from { opacity: 0; transform: translate3d(0, 48px, 0) scale(0.978); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v8-cascade-leave-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 44px, 0) scale(0.982); }
}

@keyframes v8-cascade-arrive-backward {
  from { opacity: 0; transform: translate3d(0, -48px, 0) scale(0.978); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 1100px) {
  .services-stage-heading,
  .process-stage-heading {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
    gap: 46px;
  }

  .services-stage-visual img {
    width: min(900px, 78%);
  }

  body[data-site-version="new"] .services-stage-list {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    overflow-x: auto;
  }

  body[data-site-version="new"] .home-seo-locations > .locations-stage-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.62fr);
    gap: 42px;
  }
}

@media (max-width: 900px) {
  body[data-site-version="new"] [data-scroll-stage],
  body[data-site-version="new"] .services-section,
  body[data-site-version="new"] .home-seo-locations,
  body[data-site-version="new"] .process-section,
  body[data-site-version="new"] .process-inner {
    min-height: 0;
  }

  body[data-site-version="new"] .services-section {
    width: min(100% - 32px, 760px);
    padding: 94px 0;
  }

  .services-stage-shell {
    min-height: 0;
    grid-template-rows: auto auto auto;
    gap: 32px;
  }

  .services-stage-heading,
  .process-stage-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .services-stage-heading h2,
  .process-stage-heading h2,
  body[data-site-version="new"] .home-seo-locations h2 {
    font-size: clamp(43px, 7.7vw, 62px);
  }

  .services-stage-summary {
    max-width: 590px;
  }

  .services-stage-visual {
    min-height: 390px;
  }

  .services-stage-visual img {
    width: 105%;
    max-width: none;
    margin-top: -34px;
  }

  body[data-site-version="new"] .services-stage-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  body[data-site-version="new"] .services-stage-list li + li {
    border-left: 0;
  }

  body[data-site-version="new"] .services-stage-list li:nth-child(even) {
    border-left: 1px solid rgba(22, 75, 44, 0.09);
  }

  body[data-site-version="new"] .services-stage-list li:nth-child(n + 3) {
    border-top: 1px solid rgba(22, 75, 44, 0.09);
  }

  body[data-site-version="new"] .services-stage-list li:last-child {
    grid-column: 1 / -1;
  }

  body[data-site-version="new"] .home-seo-locations {
    width: 100%;
    padding: 88px 0;
    border-radius: 42px;
  }

  body[data-site-version="new"] .home-seo-locations > .locations-stage-inner {
    display: block;
    width: min(100% - 32px, 760px);
    min-height: 0;
    padding-inline: 0;
  }

  .locations-stage-main {
    display: block;
  }

  .locations-stage-visual {
    min-height: 430px;
    margin-top: 20px;
  }

  .locations-stage-visual img {
    width: 116%;
    margin: -10px 0 -32px -8%;
  }

  .locations-stage-routes {
    margin-top: 18px;
    padding: 32px 0 0;
    border-top: 1px solid rgba(24, 85, 48, 0.11);
    border-left: 0;
  }

  body[data-site-version="new"] .process-inner {
    width: min(100% - 32px, 760px);
    padding: 92px 0;
    grid-template-rows: auto auto auto;
    gap: 32px;
  }

  .process-stage-visual {
    min-height: 390px;
  }

  .process-stage-visual img {
    width: 112%;
    margin: -10px 0 -70px;
  }

  body[data-site-version="new"] .process-steps {
    grid-template-columns: 1fr;
  }

  body[data-site-version="new"] .process-steps li + li {
    border-top: 1px solid rgba(22, 75, 44, 0.09);
    border-left: 0;
  }
}

@media (max-width: 620px) {
  body[data-site-version="new"] .hero .button-primary {
    min-height: 58px;
    font-size: 14px;
  }

  body[data-site-version="new"] .hero-phone-icon {
    width: 54px;
    height: 54px;
  }

  body[data-site-version="new"] .hero-proof {
    width: 100%;
    min-width: 0;
    padding: 15px 17px 14px;
  }

  body[data-site-version="new"] .services-section {
    width: calc(100% - 24px);
    padding-block: 78px 88px;
  }

  .services-stage-heading h2,
  .process-stage-heading h2,
  body[data-site-version="new"] .home-seo-locations h2 {
    font-size: clamp(39px, 11.8vw, 52px);
  }

  .services-stage-summary > p,
  .process-stage-heading > p,
  body[data-site-version="new"] .locations-stage-heading > p:last-child {
    font-size: 15px;
    line-height: 1.62;
  }

  .services-stage-visual {
    min-height: 300px;
    border-radius: 28px;
  }

  .services-stage-visual img {
    width: 135%;
    margin-top: -24px;
  }

  .services-stage-note {
    right: 14px;
    bottom: 14px;
    padding: 10px 13px;
  }

  body[data-site-version="new"] .services-stage-list {
    grid-template-columns: 1fr;
  }

  body[data-site-version="new"] .services-stage-list li,
  body[data-site-version="new"] .services-stage-list li:nth-child(even),
  body[data-site-version="new"] .services-stage-list li:nth-child(n + 3),
  body[data-site-version="new"] .services-stage-list li:last-child {
    grid-column: auto;
    border-top: 1px solid rgba(22, 75, 44, 0.09);
    border-left: 0;
  }

  body[data-site-version="new"] .services-stage-list li:first-child {
    border-top: 0;
  }

  .services-stage-list a {
    min-height: 92px;
  }

  body[data-site-version="new"] .home-seo-locations {
    padding-block: 76px 88px;
    border-radius: 32px;
  }

  body[data-site-version="new"] .home-seo-locations > .locations-stage-inner,
  body[data-site-version="new"] .process-inner {
    width: calc(100% - 24px);
  }

  .locations-stage-visual {
    min-height: 300px;
    margin-top: 16px;
  }

  .locations-stage-visual img {
    width: 138%;
    margin-left: -19%;
  }

  .locations-radius {
    right: 0;
    bottom: 5%;
    width: 88px;
    height: 88px;
  }

  .locations-radius strong {
    font-size: 29px;
  }

  body[data-site-version="new"] .locations-stage-routes nav a {
    min-height: 60px;
    font-size: 16px;
  }

  body[data-site-version="new"] .process-inner {
    padding-block: 78px 88px;
  }

  .process-stage-visual {
    min-height: 290px;
    border-radius: 28px;
  }

  .process-stage-visual img {
    width: 142%;
    margin: -6px 0 -62px;
  }

  body[data-site-version="new"] .process-steps li,
  body[data-site-version="new"] .process-steps li:last-child {
    padding: 21px 4px;
  }
}

/* Homepage V9: selectable living headline and a quiet stage-position rail. */
body[data-site-version="new"] [data-title-motion] {
  overflow: visible;
}

body[data-site-version="new"] .hero-title-motion {
  display: block;
  width: max-content;
  transform-origin: 8% 58%;
}

body[data-site-version="new"] .hero-title-line {
  position: relative;
  display: block;
  width: max-content;
  transform: translate3d(0, 0, 0);
  transform-origin: left center;
}

body[data-site-version="new"] .hero-title-line-dark {
  color: #061c1f;
}

body[data-site-version="new"] .hero-title-text {
  position: relative;
  z-index: 1;
  display: block;
}

body[data-site-version="new"] .hero-title-line-green {
  isolation: isolate;
}

body[data-site-version="new"] .hero-title-line-green::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 16% -2% 2%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(80, 210, 111, 0.35), rgba(80, 210, 111, 0) 72%);
  filter: blur(15px);
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

body[data-site-version="new"] .hero-title-shine {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  color: transparent;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-rail {
  display: none;
}

/* Minimal section rail: a column of ticks with one gliding indicator. Every state change is
   a transform or an opacity, and no rule moves the rail itself, so it cannot shift or resize. */
@media (min-width: 1280px) and (pointer: fine) {
  .section-rail {
    --rail-item: 30px;
    --rail-thumb-y: 0px;
    position: fixed;
    top: 50%;
    right: clamp(16px, 1.15vw, 28px);
    z-index: 920;
    display: block;
    width: 26px;
    opacity: 0;
    transform: translate3d(6px, -50%, 0);
    pointer-events: none;
    transition:
      opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .section-rail.is-ready {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
  }

  .section-rail ol {
    position: relative;
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: auto;
  }

  .section-rail li {
    margin: 0;
    padding: 0;
  }

  .section-rail a {
    position: relative;
    display: grid;
    height: var(--rail-item);
    place-items: center;
    text-decoration: none;
    pointer-events: auto;
  }

  .section-rail a > i {
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: rgba(43, 79, 57, 0.24);
    transform-origin: right center;
    transition:
      background-color 300ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .section-rail a:hover > i,
  .section-rail a:focus-visible > i {
    background: rgba(20, 118, 56, 0.46);
    transform: scaleX(1.3);
  }

  /* The active tick hands its role to the gliding indicator instead of restyling itself. */
  .section-rail a[aria-current="location"] > i {
    opacity: 0;
  }

  .section-rail-thumb {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 2px;
    margin-top: calc(var(--rail-item) / 2 - 1px);
    border-radius: 999px;
    background: linear-gradient(90deg, #3ac765, #11983b);
    box-shadow: 0 1px 6px rgba(17, 152, 59, 0.34);
    opacity: 0;
    transform: translate3d(0, var(--rail-thumb-y), 0);
    pointer-events: none;
    transition:
      transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .section-rail.is-ready .section-rail-thumb {
    opacity: 1;
  }

  /* Bare wording, no container. A soft light halo carries legibility over page content
     instead of a chip, so neighbouring labels can never look like overlapping boxes. */
  .section-rail a > span {
    position: absolute;
    top: 50%;
    right: calc(100% + 11px);
    opacity: 0;
    transform: translate3d(7px, -50%, 0);
    white-space: nowrap;
    color: #3f5a4c;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: -0.01em;
    text-shadow:
      0 1px 2px rgba(255, 255, 255, 0.95),
      0 0 9px rgba(255, 255, 255, 0.9),
      0 0 18px rgba(255, 255, 255, 0.75);
    pointer-events: none;
    transition:
      opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Hovering the rail reveals the whole map at once, with a short cascade. */
  .section-rail:hover a > span,
  .section-rail a:focus-visible > span,
  .section-rail[data-rail-reveal="active"] a[aria-current="location"] > span {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
  }

  /* The freshly reached section announces itself, then withdraws again. */
  .section-rail[data-rail-reveal="active"] a[aria-current="location"] > span {
    transition:
      opacity 340ms cubic-bezier(0.16, 0.9, 0.22, 1),
      transform 520ms cubic-bezier(0.16, 0.9, 0.22, 1);
  }

  .section-rail:hover li:nth-child(1) a > span { transition-delay: 0ms; }
  .section-rail:hover li:nth-child(2) a > span { transition-delay: 18ms; }
  .section-rail:hover li:nth-child(3) a > span { transition-delay: 36ms; }
  .section-rail:hover li:nth-child(4) a > span { transition-delay: 54ms; }
  .section-rail:hover li:nth-child(5) a > span { transition-delay: 72ms; }
  .section-rail:hover li:nth-child(6) a > span { transition-delay: 90ms; }
  .section-rail:hover li:nth-child(7) a > span { transition-delay: 108ms; }
  .section-rail:hover li:nth-child(8) a > span { transition-delay: 126ms; }
  .section-rail:hover li:nth-child(9) a > span { transition-delay: 144ms; }

  .section-rail a[aria-current="location"] > span {
    color: #11803c;
    font-weight: 800;
  }

  .section-rail a:focus-visible {
    outline: none;
  }

  body.dialog-open .section-rail,
  body.menu-open .section-rail {
    opacity: 0;
    transform: translate3d(6px, -50%, 0);
    pointer-events: none;
  }
}

.mobile-menu a[aria-current="true"] {
  color: #13a342;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"][data-title-effect="light"] .hero-title-shine {
    background-image: linear-gradient(
      102deg,
      transparent 34%,
      rgba(93, 211, 119, 0.08) 43%,
      rgba(214, 255, 221, 0.96) 50%,
      rgba(80, 207, 108, 0.18) 57%,
      transparent 66%
    );
    background-size: 245% 100%;
    animation: title-light-pass 8.4s -1.2s cubic-bezier(0.34, 0, 0.18, 1) infinite;
  }

  html[data-motion="soft"][data-title-effect="breathe"] .hero-title-line-green::before {
    animation: title-breathe-halo 7.2s -1.4s ease-in-out infinite;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-title-effect="breathe"] .hero-title-line-green {
    animation: title-breathe-green 7.2s -1.4s ease-in-out infinite;
  }

  html[data-motion="soft"][data-title-effect="offset"] .hero-title-line-dark {
    animation: title-offset-dark 8.8s -1.3s var(--ease-apple-soft) infinite;
    will-change: transform;
  }

  html[data-motion="soft"][data-title-effect="offset"] .hero-title-line-green {
    animation: title-offset-green 8.8s -1.3s var(--ease-apple-soft) infinite;
    will-change: transform;
  }

  html:not(.is-title-motion-active) [data-title-motion] *,
  html:not(.is-title-motion-active) [data-title-motion] *::before,
  html.is-section-scrolling [data-title-motion] *,
  html.is-section-scrolling [data-title-motion] *::before {
    animation-play-state: paused !important;
  }
}

@keyframes title-light-pass {
  0%, 12% { background-position: 155% 50%; }
  46%, 100% { background-position: -58% 50%; }
}

@keyframes title-breathe-halo {
  0%, 100% { opacity: 0.02; transform: scale(0.9); }
  48% { opacity: 0.34; transform: scale(1.06); }
}

@keyframes title-breathe-green {
  0%, 100% { color: #16aa42; }
  48% { color: #22b84d; }
}

@keyframes title-offset-dark {
  0%, 100% { transform: translate3d(0, 0, 0); }
  46% { transform: translate3d(3px, -0.6px, 0); }
  68% { transform: translate3d(1px, 0, 0); }
}

@keyframes title-offset-green {
  0%, 100% { transform: translate3d(0, 0, 0); }
  46% { transform: translate3d(-4px, 0.8px, 0); }
  68% { transform: translate3d(-1.2px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-site-version="new"] [data-title-motion] *,
  .section-rail,
  .section-rail * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  body[data-site-version="new"] .hero-title-shine {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"].is-intro-settled.html-loaded [data-hero-stagger] > *,
  html[data-motion="soft"].is-intro-settled body[data-site-version="new"] .hero-media {
    animation: none;
    filter: none;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Homepage V10: repeatable, directional Staffel choreography. */
@media (prefers-reduced-motion: no-preference) {
  html[data-cascade-style="wave"][data-stage-direction="forward"] {
    --staffel-leave-name: v10-wave-leave-forward;
    --staffel-arrive-name: v10-wave-arrive-forward;
  }

  html[data-cascade-style="wave"][data-stage-direction="backward"] {
    --staffel-leave-name: v10-wave-leave-backward;
    --staffel-arrive-name: v10-wave-arrive-backward;
  }

  html[data-cascade-style="glide"][data-stage-direction="forward"] {
    --staffel-leave-name: v10-glide-leave-forward;
    --staffel-arrive-name: v10-glide-arrive-forward;
  }

  html[data-cascade-style="glide"][data-stage-direction="backward"] {
    --staffel-leave-name: v10-glide-leave-backward;
    --staffel-arrive-name: v10-glide-arrive-backward;
  }

  html[data-cascade-style="focus"][data-stage-direction="forward"] {
    --staffel-leave-name: v10-focus-leave-forward;
    --staffel-arrive-name: v10-focus-arrive-forward;
  }

  html[data-cascade-style="focus"][data-stage-direction="backward"] {
    --staffel-leave-name: v10-focus-leave-backward;
    --staffel-arrive-name: v10-focus-arrive-backward;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-arriving [data-stage-content] {
    animation: none;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-arriving [data-reveal] {
    transition: none !important;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-leaving [data-stage-item],
  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-arriving [data-stage-item] {
    animation-fill-mode: both;
    animation-play-state: running !important;
    backface-visibility: hidden;
    transform-origin: center 52%;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-leaving [data-stage-item] {
    animation-name: var(--staffel-leave-name);
    animation-duration: 460ms;
    animation-delay: var(--stage-exit-delay, 0ms);
    animation-timing-function: cubic-bezier(0.32, 0, 0.24, 1);
  }

  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-arriving [data-stage-item] {
    animation-name: var(--staffel-arrive-name);
    animation-duration: 640ms;
    animation-delay: calc(190ms + var(--stage-enter-delay, 0ms));
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner {
    animation: none !important;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-copy > *,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-media,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > * {
    animation-name: var(--staffel-leave-name);
    animation-duration: 460ms;
    animation-timing-function: cubic-bezier(0.32, 0, 0.24, 1);
    animation-fill-mode: both;
    animation-play-state: running !important;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(2) { animation-delay: 24ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(3) { animation-delay: 48ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(4) { animation-delay: 72ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(5) { animation-delay: 96ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-media { animation-delay: 36ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(1) { animation-delay: 90ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(2) { animation-delay: 116ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(3) { animation-delay: 142ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(4) { animation-delay: 168ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(5) { animation-delay: 194ms; }

  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-copy > *,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-media,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > * {
    animation-name: var(--staffel-arrive-name);
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
    animation-play-state: running !important;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(1) { animation-delay: 60ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(2) { animation-delay: 96ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(3) { animation-delay: 132ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(4) { animation-delay: 168ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(5) { animation-delay: 204ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(1) { animation-delay: 500ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(2) { animation-delay: 542ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(3) { animation-delay: 584ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(4) { animation-delay: 626ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(5) { animation-delay: 668ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-media { animation-delay: 580ms; }
}

@keyframes v10-wave-leave-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, -26px, 0) scale(0.988); }
}

@keyframes v10-wave-arrive-forward {
  from { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v10-wave-leave-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.988); }
}

@keyframes v10-wave-arrive-backward {
  from { opacity: 0; transform: translate3d(0, -34px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v10-glide-leave-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(-18px, -18px, 0) scale(0.99); }
}

@keyframes v10-glide-arrive-forward {
  from { opacity: 0; transform: translate3d(22px, 28px, 0) scale(0.988); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v10-glide-leave-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(18px, 18px, 0) scale(0.99); }
}

@keyframes v10-glide-arrive-backward {
  from { opacity: 0; transform: translate3d(-22px, -28px, 0) scale(0.988); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v10-focus-leave-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.962); }
}

@keyframes v10-focus-arrive-forward {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.955); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v10-focus-leave-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.962); }
}

@keyframes v10-focus-arrive-backward {
  from { opacity: 0; transform: translate3d(0, -16px, 0) scale(0.955); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Homepage V11: single-run Staffel motion with independent art and ambient layers. */
@media (prefers-reduced-motion: no-preference) {
  html[data-cascade-style="wave"][data-stage-direction="forward"] {
    --staffel-leave-name: v11-wave-leave-forward;
    --staffel-arrive-name: v11-wave-arrive-forward;
    --staffel-art-x: 0px;
    --staffel-art-y: 18px;
    --staffel-art-scale: 0.978;
  }

  html[data-cascade-style="wave"][data-stage-direction="backward"] {
    --staffel-leave-name: v11-wave-leave-backward;
    --staffel-arrive-name: v11-wave-arrive-backward;
    --staffel-art-x: 0px;
    --staffel-art-y: -18px;
    --staffel-art-scale: 0.978;
  }

  html[data-cascade-style="glide"][data-stage-direction="forward"] {
    --staffel-leave-name: v11-glide-leave-forward;
    --staffel-arrive-name: v11-glide-arrive-forward;
    --staffel-art-x: 20px;
    --staffel-art-y: 12px;
    --staffel-art-scale: 0.982;
  }

  html[data-cascade-style="glide"][data-stage-direction="backward"] {
    --staffel-leave-name: v11-glide-leave-backward;
    --staffel-arrive-name: v11-glide-arrive-backward;
    --staffel-art-x: -20px;
    --staffel-art-y: -12px;
    --staffel-art-scale: 0.982;
  }

  html[data-cascade-style="focus"][data-stage-direction="forward"] {
    --staffel-leave-name: v11-focus-leave-forward;
    --staffel-arrive-name: v11-focus-arrive-forward;
    --staffel-art-x: 0px;
    --staffel-art-y: 5px;
    --staffel-art-scale: 1.035;
  }

  html[data-cascade-style="focus"][data-stage-direction="backward"] {
    --staffel-leave-name: v11-focus-leave-backward;
    --staffel-arrive-name: v11-focus-arrive-backward;
    --staffel-art-x: 0px;
    --staffel-art-y: -5px;
    --staffel-art-scale: 1.035;
  }

  html[data-cascade-style="curtain"][data-stage-direction="forward"] {
    --staffel-leave-name: v11-curtain-leave-forward;
    --staffel-arrive-name: v11-curtain-arrive-forward;
    --staffel-art-x: 0px;
    --staffel-art-y: 10px;
    --staffel-art-scale: 1.025;
  }

  html[data-cascade-style="curtain"][data-stage-direction="backward"] {
    --staffel-leave-name: v11-curtain-leave-backward;
    --staffel-arrive-name: v11-curtain-arrive-backward;
    --staffel-art-x: 0px;
    --staffel-art-y: -10px;
    --staffel-art-scale: 1.025;
  }

  html[data-cascade-style="spring"][data-stage-direction="forward"] {
    --staffel-leave-name: v11-spring-leave-forward;
    --staffel-arrive-name: v11-spring-arrive-forward;
    --staffel-art-x: 0px;
    --staffel-art-y: 24px;
    --staffel-art-scale: 0.974;
  }

  html[data-cascade-style="spring"][data-stage-direction="backward"] {
    --staffel-leave-name: v11-spring-leave-backward;
    --staffel-arrive-name: v11-spring-arrive-backward;
    --staffel-art-x: 0px;
    --staffel-art-y: -24px;
    --staffel-art-scale: 0.974;
  }

  html[data-cascade-style="fan"][data-stage-direction="forward"] {
    --staffel-leave-name: v11-fan-leave-forward;
    --staffel-arrive-name: v11-fan-arrive-forward;
    --staffel-art-x: 0px;
    --staffel-art-y: 18px;
    --staffel-art-scale: 0.982;
  }

  html[data-cascade-style="fan"][data-stage-direction="backward"] {
    --staffel-leave-name: v11-fan-leave-backward;
    --staffel-arrive-name: v11-fan-arrive-backward;
    --staffel-art-x: 0px;
    --staffel-art-y: -18px;
    --staffel-art-scale: 0.982;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-arriving [data-stage-content] {
    animation: none !important;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-arriving [data-reveal],
  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-arriving [data-stage-art-media] {
    transition: none !important;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-leaving [data-stage-item],
  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-arriving [data-stage-item] {
    animation-iteration-count: 1 !important;
    animation-direction: normal !important;
    animation-fill-mode: both;
    animation-play-state: running !important;
    backface-visibility: hidden;
    translate: none;
    transform-origin: center 52%;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-leaving [data-stage-item] {
    animation-name: var(--staffel-leave-name);
    animation-duration: 680ms;
    animation-delay: var(--stage-exit-delay, 0ms);
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }

  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-arriving [data-stage-item] {
    animation-name: var(--staffel-arrive-name);
    animation-duration: 700ms;
    animation-delay: calc(300ms + var(--stage-enter-delay, 0ms));
    animation-timing-function: cubic-bezier(0.22, 0.72, 0.28, 1);
  }

  html[data-motion="soft"][data-scroll-effect="cascade"] [data-scroll-stage].is-stage-arriving [data-stage-art-media] {
    animation-name: v11-art-settle;
    animation-duration: 760ms;
    animation-delay: calc(340ms + var(--stage-art-delay, 0ms));
    animation-timing-function: cubic-bezier(0.22, 0.72, 0.28, 1);
    animation-iteration-count: 1 !important;
    animation-direction: normal !important;
    animation-fill-mode: both;
    animation-play-state: running !important;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"][data-cascade-style="curtain"] [data-scroll-stage].is-stage-leaving [data-stage-item],
  html[data-motion="soft"][data-scroll-effect="cascade"][data-cascade-style="curtain"] [data-scroll-stage].is-stage-arriving [data-stage-item] {
    will-change: transform, opacity, clip-path;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner {
    animation: none !important;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning .top-benefits .benefit-card::before,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning .top-benefits .benefit-card::after,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning .top-benefits .benefit-icon,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning .top-benefits .benefits-scroll-arrow svg {
    animation: none !important;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning .top-benefits .benefit-icon,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning .top-benefits .benefits-scroll-arrow svg {
    transform: translate3d(0, 0, 0) scale(1);
  }

  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-copy > *,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-media,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > *,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-copy > *,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-media,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > * {
    animation-iteration-count: 1 !important;
    animation-direction: normal !important;
    animation-fill-mode: both;
    animation-play-state: running !important;
    animation-delay: 0ms;
    backface-visibility: hidden;
    translate: none !important;
    transition: none !important;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-copy > *,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-media,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > * {
    animation-name: var(--staffel-leave-name);
    animation-duration: 700ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }

  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(1) { animation-delay: 0ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(2) { animation-delay: 32ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(3) { animation-delay: 64ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(4) { animation-delay: 96ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(5) { animation-delay: 128ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .hero-media { animation-delay: 40ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(1) { animation-delay: 80ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(2) { animation-delay: 112ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(3) { animation-delay: 144ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(4) { animation-delay: 176ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(5) { animation-delay: 208ms; }

  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-copy > *,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-media,
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > * {
    animation-name: var(--staffel-arrive-name);
    animation-duration: 680ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(1) { animation-delay: 210ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(2) { animation-delay: 250ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(3) { animation-delay: 290ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(4) { animation-delay: 330ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(5) { animation-delay: 370ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(1) { animation-delay: 410ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(2) { animation-delay: 455ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(3) { animation-delay: 500ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(4) { animation-delay: 545ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(5) { animation-delay: 590ms; }
  html[data-motion="soft"][data-scroll-effect="cascade"].is-stage-transitioning[data-stage-to="top"] .hero-media { animation-delay: 450ms; }
}

@keyframes v11-art-settle {
  0% {
    opacity: 0.48;
    transform: translate3d(var(--staffel-art-x, 0px), var(--staffel-art-y, 16px), 0) scale(var(--staffel-art-scale, 0.98));
  }
  76% {
    opacity: 1;
    transform: translate3d(0, -1px, 0) scale(1.003);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes v11-wave-leave-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, -18px, 0) scale(0.994); }
}

@keyframes v11-wave-arrive-forward {
  from { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v11-wave-leave-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.994); }
}

@keyframes v11-wave-arrive-backward {
  from { opacity: 0; transform: translate3d(0, -28px, 0) scale(0.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v11-glide-leave-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(-14px, -10px, 0) scale(0.995); }
}

@keyframes v11-glide-arrive-forward {
  from { opacity: 0; transform: translate3d(26px, 20px, 0) scale(0.99); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v11-glide-leave-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(14px, 10px, 0) scale(0.995); }
}

@keyframes v11-glide-arrive-backward {
  from { opacity: 0; transform: translate3d(-26px, -20px, 0) scale(0.99); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v11-focus-leave-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, -6px, 0) scale(0.978); }
}

@keyframes v11-focus-arrive-forward {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(1.028); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v11-focus-leave-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.978); }
}

@keyframes v11-focus-arrive-backward {
  from { opacity: 0; transform: translate3d(0, -8px, 0) scale(1.028); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v11-curtain-leave-forward {
  from { opacity: 1; clip-path: inset(0 0 0 0 round 18px); transform: translate3d(0, 0, 0); }
  to { opacity: 0; clip-path: inset(0 0 100% 0 round 18px); transform: translate3d(0, -8px, 0); }
}

@keyframes v11-curtain-arrive-forward {
  from { opacity: 0.16; clip-path: inset(100% 0 0 0 round 18px); transform: translate3d(0, 10px, 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 18px); transform: translate3d(0, 0, 0); }
}

@keyframes v11-curtain-leave-backward {
  from { opacity: 1; clip-path: inset(0 0 0 0 round 18px); transform: translate3d(0, 0, 0); }
  to { opacity: 0; clip-path: inset(100% 0 0 0 round 18px); transform: translate3d(0, 8px, 0); }
}

@keyframes v11-curtain-arrive-backward {
  from { opacity: 0.16; clip-path: inset(0 0 100% 0 round 18px); transform: translate3d(0, -10px, 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 18px); transform: translate3d(0, 0, 0); }
}

@keyframes v11-spring-leave-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.992); }
}

@keyframes v11-spring-arrive-forward {
  0% { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.985); }
  62% { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.005); }
  82% { opacity: 1; transform: translate3d(0, 1.5px, 0) scale(0.999); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v11-spring-leave-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.992); }
}

@keyframes v11-spring-arrive-backward {
  0% { opacity: 0; transform: translate3d(0, -34px, 0) scale(0.985); }
  62% { opacity: 1; transform: translate3d(0, 4px, 0) scale(1.005); }
  82% { opacity: 1; transform: translate3d(0, -1.5px, 0) scale(0.999); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v11-fan-leave-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to { opacity: 0; transform: translate3d(var(--stage-lane-exit, 0px), -12px, 0) rotate(var(--stage-lane-angle-reverse, 0deg)) scale(0.994); }
}

@keyframes v11-fan-arrive-forward {
  from { opacity: 0; transform: translate3d(var(--stage-lane-x, 0px), 26px, 0) rotate(var(--stage-lane-angle, 0deg)) scale(0.988); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

@keyframes v11-fan-leave-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to { opacity: 0; transform: translate3d(var(--stage-lane-exit-reverse, 0px), 12px, 0) rotate(var(--stage-lane-angle, 0deg)) scale(0.994); }
}

@keyframes v11-fan-arrive-backward {
  from { opacity: 0; transform: translate3d(var(--stage-lane-x-reverse, 0px), -26px, 0) rotate(var(--stage-lane-angle-reverse, 0deg)) scale(0.988); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

/* Homepage V12: selectable Tiefe curves with separate content and illustration planes. */
@media (prefers-reduced-motion: no-preference) {
  html[data-depth-style="calm"] {
    --depth-leave-duration: 780ms;
    --depth-arrive-duration: 720ms;
    --depth-art-duration: 760ms;
    --depth-enter-base: 240ms;
    --depth-art-base: 260ms;
    --depth-top-benefits-base: 180ms;
    --depth-top-hero-base: 400ms;
    --depth-leave-opacity: 0.06;
    --depth-enter-opacity: 0.08;
    --depth-leave-scale: 0.95;
    --depth-enter-scale: 0.965;
    --depth-art-scale: 1.04;
    --depth-leave-ease: cubic-bezier(0.5, 0, 0.25, 1);
    --depth-arrive-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  }

  html[data-depth-style="quick"] {
    --depth-leave-duration: 360ms;
    --depth-arrive-duration: 420ms;
    --depth-art-duration: 470ms;
    --depth-enter-base: 120ms;
    --depth-art-base: 140ms;
    --depth-top-benefits-base: 90ms;
    --depth-top-hero-base: 220ms;
    --depth-leave-opacity: 0.04;
    --depth-enter-opacity: 0.04;
    --depth-leave-scale: 0.985;
    --depth-enter-scale: 0.985;
    --depth-art-scale: 0.99;
    --depth-leave-ease: cubic-bezier(0.35, 0, 0.25, 1);
    --depth-arrive-ease: cubic-bezier(0.18, 0.85, 0.22, 1);
  }

  html[data-depth-style="lens"] {
    --depth-leave-duration: 580ms;
    --depth-arrive-duration: 660ms;
    --depth-art-duration: 700ms;
    --depth-enter-base: 190ms;
    --depth-art-base: 200ms;
    --depth-top-benefits-base: 140ms;
    --depth-top-hero-base: 300ms;
    --depth-leave-opacity: 0.03;
    --depth-enter-opacity: 0.05;
    --depth-leave-scale: 0.94;
    --depth-enter-scale: 1.055;
    --depth-art-scale: 1.075;
    --depth-leave-ease: cubic-bezier(0.42, 0, 0.3, 1);
    --depth-arrive-ease: cubic-bezier(0.18, 0.78, 0.22, 1);
  }

  html[data-depth-style="layers"] {
    --depth-leave-duration: 680ms;
    --depth-arrive-duration: 680ms;
    --depth-art-duration: 720ms;
    --depth-enter-base: 230ms;
    --depth-art-base: 250ms;
    --depth-top-benefits-base: 170ms;
    --depth-top-hero-base: 350ms;
    --depth-leave-opacity: 0.05;
    --depth-enter-opacity: 0.05;
    --depth-leave-scale: 0.968;
    --depth-enter-scale: 0.965;
    --depth-art-scale: 1.045;
    --depth-leave-ease: cubic-bezier(0.46, 0, 0.28, 1);
    --depth-arrive-ease: cubic-bezier(0.2, 0.76, 0.24, 1);
  }

  html[data-depth-style="calm"][data-stage-direction="forward"] {
    --depth-leave-x: 0px;
    --depth-leave-y: -14px;
    --depth-enter-x: 0px;
    --depth-enter-y: 24px;
    --depth-enter-rotate: 0deg;
    --depth-art-x: 0px;
    --depth-art-y: 16px;
  }

  html[data-depth-style="calm"][data-stage-direction="backward"] {
    --depth-leave-x: 0px;
    --depth-leave-y: 14px;
    --depth-enter-x: 0px;
    --depth-enter-y: -24px;
    --depth-enter-rotate: 0deg;
    --depth-art-x: 0px;
    --depth-art-y: -16px;
  }

  html[data-depth-style="quick"][data-stage-direction="forward"] {
    --depth-leave-x: 0px;
    --depth-leave-y: -18px;
    --depth-enter-x: 0px;
    --depth-enter-y: 22px;
    --depth-enter-rotate: 0deg;
    --depth-art-x: 0px;
    --depth-art-y: 14px;
  }

  html[data-depth-style="quick"][data-stage-direction="backward"] {
    --depth-leave-x: 0px;
    --depth-leave-y: 18px;
    --depth-enter-x: 0px;
    --depth-enter-y: -22px;
    --depth-enter-rotate: 0deg;
    --depth-art-x: 0px;
    --depth-art-y: -14px;
  }

  html[data-depth-style="lens"][data-stage-direction="forward"] {
    --depth-leave-x: 0px;
    --depth-leave-y: -5px;
    --depth-enter-x: 0px;
    --depth-enter-y: 11px;
    --depth-enter-rotate: 0deg;
    --depth-art-x: 0px;
    --depth-art-y: 7px;
  }

  html[data-depth-style="lens"][data-stage-direction="backward"] {
    --depth-leave-x: 0px;
    --depth-leave-y: 5px;
    --depth-enter-x: 0px;
    --depth-enter-y: -11px;
    --depth-enter-rotate: 0deg;
    --depth-art-x: 0px;
    --depth-art-y: -7px;
  }

  html[data-depth-style="layers"][data-stage-direction="forward"] {
    --depth-leave-x: var(--stage-lane-exit, 0px);
    --depth-leave-y: -16px;
    --depth-enter-x: var(--stage-lane-x, 0px);
    --depth-enter-y: 24px;
    --depth-enter-rotate: var(--stage-lane-angle, 0deg);
    --depth-art-x: var(--stage-lane-x, 0px);
    --depth-art-y: 16px;
  }

  html[data-depth-style="layers"][data-stage-direction="backward"] {
    --depth-leave-x: var(--stage-lane-exit-reverse, 0px);
    --depth-leave-y: 16px;
    --depth-enter-x: var(--stage-lane-x-reverse, 0px);
    --depth-enter-y: -24px;
    --depth-enter-rotate: var(--stage-lane-angle-reverse, 0deg);
    --depth-art-x: var(--stage-lane-x-reverse, 0px);
    --depth-art-y: -16px;
  }

  /* Resolve the lane variables on each item itself. Defining these only on
     <html> would resolve the item-specific fallback before it can inherit. */
  html[data-depth-style="layers"][data-stage-direction="forward"] [data-stage-item] {
    --depth-leave-x: var(--stage-lane-exit, 0px);
    --depth-enter-x: var(--stage-lane-x, 0px);
    --depth-enter-rotate: var(--stage-lane-angle, 0deg);
  }

  html[data-depth-style="layers"][data-stage-direction="backward"] [data-stage-item] {
    --depth-leave-x: var(--stage-lane-exit-reverse, 0px);
    --depth-enter-x: var(--stage-lane-x-reverse, 0px);
    --depth-enter-rotate: var(--stage-lane-angle-reverse, 0deg);
  }

  html[data-depth-style="layers"][data-stage-direction="forward"] [data-stage-art-media] {
    --depth-art-x: var(--stage-lane-x, 0px);
  }

  html[data-depth-style="layers"][data-stage-direction="backward"] [data-stage-art-media] {
    --depth-art-x: var(--stage-lane-x-reverse, 0px);
  }

  html[data-motion="soft"][data-scroll-effect="depth"] [data-scroll-stage].is-stage-leaving [data-stage-content],
  html[data-motion="soft"][data-scroll-effect="depth"] [data-scroll-stage].is-stage-arriving [data-stage-content] {
    animation: none !important;
  }

  html[data-motion="soft"][data-scroll-effect="depth"] [data-scroll-stage].is-stage-arriving [data-reveal],
  html[data-motion="soft"][data-scroll-effect="depth"] [data-scroll-stage].is-stage-arriving [data-stage-art-media] {
    transition: none !important;
  }

  html[data-motion="soft"][data-scroll-effect="depth"] [data-scroll-stage].is-stage-leaving [data-stage-item],
  html[data-motion="soft"][data-scroll-effect="depth"] [data-scroll-stage].is-stage-arriving [data-stage-item] {
    animation-iteration-count: 1 !important;
    animation-direction: normal !important;
    animation-fill-mode: both;
    animation-play-state: running !important;
    backface-visibility: hidden;
    translate: none;
    transform-origin: center 52%;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-scroll-effect="depth"] [data-scroll-stage].is-stage-leaving [data-stage-item] {
    animation-name: v12-depth-item-leave;
    animation-duration: var(--depth-leave-duration);
    animation-delay: var(--depth-exit-delay, 0ms);
    animation-timing-function: var(--depth-leave-ease);
  }

  html[data-motion="soft"][data-scroll-effect="depth"] [data-scroll-stage].is-stage-arriving [data-stage-item] {
    animation-name: v12-depth-item-arrive;
    animation-duration: var(--depth-arrive-duration);
    animation-delay: calc(var(--depth-enter-base) + var(--depth-enter-delay, 0ms));
    animation-timing-function: var(--depth-arrive-ease);
  }

  html[data-motion="soft"][data-scroll-effect="depth"] [data-scroll-stage].is-stage-arriving [data-stage-art-media] {
    animation: v12-depth-art-arrive var(--depth-art-duration) var(--depth-arrive-ease) calc(var(--depth-art-base) + var(--stage-art-delay, 0ms)) 1 normal both !important;
    animation-play-state: running !important;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner {
    animation: none !important;
  }

  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning .top-benefits .benefit-card::before,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning .top-benefits .benefit-card::after,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning .top-benefits .benefit-icon,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning .top-benefits .benefits-scroll-arrow svg {
    animation: none !important;
  }

  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning .top-benefits .benefit-icon,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning .top-benefits .benefits-scroll-arrow svg {
    transform: translate3d(0, 0, 0) scale(1);
  }

  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .hero-copy > *,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .hero-media,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > *,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .hero-copy > *,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .hero-media,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > * {
    animation-iteration-count: 1 !important;
    animation-direction: normal !important;
    animation-fill-mode: both;
    animation-play-state: running !important;
    animation-delay: 0ms;
    backface-visibility: hidden;
    translate: none !important;
    transition: none !important;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .hero-copy > *,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .hero-media,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > * {
    animation-name: v12-depth-item-leave;
    animation-duration: var(--depth-leave-duration);
    animation-timing-function: var(--depth-leave-ease);
  }

  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(1) { animation-delay: 0ms; }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(2) { animation-delay: 20ms; }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(3) { animation-delay: 40ms; }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(4) { animation-delay: 60ms; }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(5) { animation-delay: 80ms; }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .hero-media { animation-delay: 28ms; }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(1) { animation-delay: 50ms; }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(2) { animation-delay: 70ms; }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(3) { animation-delay: 90ms; }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(4) { animation-delay: 110ms; }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(5) { animation-delay: 130ms; }

  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .hero-copy > *,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .hero-media,
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > * {
    animation-name: v12-depth-item-arrive;
    animation-duration: var(--depth-arrive-duration);
    animation-timing-function: var(--depth-arrive-ease);
  }

  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(1) { animation-delay: var(--depth-top-benefits-base); }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(2) { animation-delay: calc(var(--depth-top-benefits-base) + 28ms); }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(3) { animation-delay: calc(var(--depth-top-benefits-base) + 56ms); }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(4) { animation-delay: calc(var(--depth-top-benefits-base) + 84ms); }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(5) { animation-delay: calc(var(--depth-top-benefits-base) + 112ms); }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(1) { animation-delay: var(--depth-top-hero-base); }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(2) { animation-delay: calc(var(--depth-top-hero-base) + 32ms); }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(3) { animation-delay: calc(var(--depth-top-hero-base) + 64ms); }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(4) { animation-delay: calc(var(--depth-top-hero-base) + 96ms); }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(5) { animation-delay: calc(var(--depth-top-hero-base) + 128ms); }
  html[data-motion="soft"][data-scroll-effect="depth"].is-stage-transitioning[data-stage-to="top"] .hero-media {
    animation-name: v12-depth-art-arrive;
    animation-duration: var(--depth-art-duration);
    animation-delay: var(--depth-top-hero-base);
  }
}

@keyframes v12-depth-item-leave {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  to {
    opacity: var(--depth-leave-opacity, 0.05);
    transform: translate3d(var(--depth-leave-x, 0px), var(--depth-leave-y, -12px), 0) rotate(0deg) scale(var(--depth-leave-scale, 0.96));
  }
}

@keyframes v12-depth-item-arrive {
  from {
    opacity: var(--depth-enter-opacity, 0.05);
    transform: translate3d(var(--depth-enter-x, 0px), var(--depth-enter-y, 20px), 0) rotate(var(--depth-enter-rotate, 0deg)) scale(var(--depth-enter-scale, 0.97));
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes v12-depth-art-arrive {
  0% {
    opacity: 0.42;
    transform: translate3d(var(--depth-art-x, 0px), var(--depth-art-y, 12px), 0) scale(var(--depth-art-scale, 1.04));
  }
  74% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0.997);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Homepage V8: reference-matched second section with individually composed garden cards. */
body[data-site-version="new"] .project-section {
  position: relative;
  display: block;
  width: min(1900px, 87.5vw);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding: 0;
  overflow: visible;
  border-top: 0;
  background: transparent;
  isolation: isolate;
}

.project-stage-inner {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(156px, 17.95vh, 166px) 0 50px;
  isolation: isolate;
}

.project-ambient {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.project-ambient-shape,
.project-ambient-plant,
.project-floating-leaf {
  position: absolute;
  display: block;
}

.project-ambient-shape {
  border-radius: 50%;
}

.project-ambient-shape-green {
  top: 155px;
  right: -180px;
  width: 560px;
  height: 390px;
  background:
    radial-gradient(circle at 36% 35%, rgba(246, 255, 241, 0.92), rgba(230, 248, 223, 0.7) 48%, rgba(215, 240, 221, 0.42) 100%);
  transform: rotate(8deg);
}

.project-ambient-shape-blue {
  top: 314px;
  right: -205px;
  width: 760px;
  height: 415px;
  background:
    radial-gradient(circle at 36% 28%, rgba(239, 249, 255, 0.98), rgba(213, 237, 255, 0.78) 55%, rgba(207, 232, 252, 0.54) 100%);
  transform: rotate(7deg);
}

.project-ambient-plant {
  z-index: 1;
  top: 219px;
  right: -300px;
  width: 620px;
  pointer-events: none;
  filter: drop-shadow(0 20px 22px rgba(35, 89, 48, 0.11));
}

.project-ambient-plant img {
  display: block;
  width: 100%;
  height: auto;
}

.project-floating-leaf {
  z-index: 2;
  width: 42px;
  height: 20px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(145deg, #b7dd4b 0%, #65a51f 72%, #3e8118 100%);
  box-shadow: 0 7px 9px rgba(43, 106, 40, 0.18);
}

.project-floating-leaf::after {
  content: "";
  position: absolute;
  top: 48%;
  right: 5px;
  left: 6px;
  height: 1px;
  background: rgba(49, 111, 27, 0.48);
  transform: rotate(8deg);
  transform-origin: right;
}

.project-floating-leaf-one {
  top: 236px;
  right: 230px;
  transform: rotate(20deg) scale(0.92);
}

.project-floating-leaf-two {
  top: 386px;
  right: 330px;
  transform: rotate(-22deg) scale(1.08);
}

.project-section-heading {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 560px 380px;
  justify-content: start;
  align-items: start;
  gap: 0 101px;
  margin: 0 0 61px;
  padding-inline: 50px;
}

.project-heading-primary,
.project-heading-aside {
  min-width: 0;
}

.project-section-heading .project-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: #169635;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0.015em;
  line-height: 20px;
  text-transform: none;
}

.project-eyebrow svg {
  width: 21px;
  height: 21px;
  overflow: visible;
  fill: #45ba45;
  filter: drop-shadow(0 3px 5px rgba(47, 154, 52, 0.18));
}

.project-section-heading h2 {
  max-width: none;
  margin: 0;
  color: #082124;
  font-size: clamp(60px, 3.93vw, 66px);
  font-weight: 830;
  letter-spacing: -0.055em;
  line-height: 1.02;
  text-wrap: initial;
}

.project-section-heading h2 > span {
  position: relative;
  display: block;
  width: max-content;
  white-space: nowrap;
  transform: scaleX(1.075);
  transform-origin: left center;
}

.project-section-heading h2 em {
  color: #20a33d;
  font-style: normal;
}

.project-title-leaf {
  position: absolute;
  top: 9px;
  right: -35px;
  width: 27px;
  height: 17px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(145deg, #7bcb37, #2da83c 76%);
  box-shadow: 0 5px 10px rgba(37, 150, 60, 0.17);
  transform: rotate(-18deg);
}

.project-title-leaf::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 4px;
  left: 6px;
  height: 1px;
  background: rgba(28, 123, 46, 0.42);
  transform: rotate(-8deg);
}

.project-proof-list {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.project-proof {
  display: flex;
  width: 168px;
  height: 68px;
  min-height: 68px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(30, 82, 54, 0.035);
  border-radius: 35px;
  background: rgba(255, 255, 255, 0.87);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 7px 24px rgba(28, 70, 47, 0.065);
}

.project-proof-icon {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  border-radius: 50%;
  place-items: center;
}

.project-proof-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.project-proof-green .project-proof-icon {
  color: #27b23f;
  background: #eefaf0;
  box-shadow: 0 5px 12px rgba(53, 174, 70, 0.12);
}

.project-proof-blue .project-proof-icon {
  color: #347df1;
  background: #eef5ff;
  box-shadow: 0 5px 12px rgba(52, 125, 241, 0.13);
}

.project-proof-violet .project-proof-icon {
  color: #8d55e6;
  background: #f5efff;
  box-shadow: 0 5px 12px rgba(141, 85, 230, 0.13);
}

.project-proof > span:last-child {
  display: block;
  min-width: 0;
}

.project-proof strong,
.project-proof small {
  display: block;
}

.project-proof strong {
  color: #102327;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.project-proof small {
  margin-top: 4px;
  color: #5d6b6f;
  font-size: 10px;
  line-height: 1.38;
}

.project-heading-aside {
  position: absolute;
  top: 136px;
  right: 0;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.project-advice-link {
  display: inline-flex;
  min-width: 190px;
  min-height: 47px;
  align-items: center;
  gap: 13px;
  margin-top: 0;
  padding: 8px 20px 8px 14px;
  border: 1px solid rgba(26, 80, 51, 0.035);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.9);
  color: #102327;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 7px 22px rgba(24, 69, 45, 0.075);
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
}

.project-advice-link svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #1bab42;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.project-showcase {
  position: relative;
  z-index: 4;
  min-height: 0;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.project-showcase::before,
.project-showcase::after {
  display: none;
}

.project-scenes {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 0;
  grid-template-columns: 1.02fr 1fr 1.02fr;
  gap: 21px;
}

.project-scene {
  --scene-accent: #25a846;
  --scene-glow: rgba(37, 168, 70, 0.17);
  position: relative;
  display: block;
  min-width: 0;
  height: 386px;
  min-height: 0;
  overflow: hidden;
  padding: 32px 29px;
  border: 1px solid rgba(31, 71, 47, 0.045);
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 78%, rgba(224, 243, 219, 0.3), rgba(224, 243, 219, 0) 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(250, 253, 249, 0.965));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 13px 38px rgba(34, 72, 52, 0.075);
}

.project-scene-lawn {
  --scene-accent: #347ef3;
  --scene-glow: rgba(52, 126, 243, 0.18);
  background:
    radial-gradient(circle at 87% 76%, rgba(216, 237, 255, 0.42), rgba(216, 237, 255, 0) 51%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.995), rgba(247, 251, 255, 0.97));
}

.project-scene-tree {
  --scene-accent: #9459e9;
  --scene-glow: rgba(148, 89, 233, 0.18);
  background:
    radial-gradient(circle at 84% 74%, rgba(235, 226, 255, 0.39), rgba(235, 226, 255, 0) 52%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.995), rgba(251, 248, 255, 0.97));
}

.project-scene-lawn::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 55%;
  background: linear-gradient(
    90deg,
    rgba(254, 255, 255, 0.995) 0%,
    rgba(253, 254, 255, 0.985) 52%,
    rgba(252, 254, 255, 0.84) 72%,
    rgba(252, 254, 255, 0) 100%
  );
  pointer-events: none;
}

.project-scene + .project-scene::before {
  display: none;
}

.project-scene-copy {
  position: relative;
  z-index: 3;
  width: 205px;
  padding: 0;
  border: 0;
}

.project-scene-kicker {
  display: flex;
  align-items: center;
  gap: 19px;
  margin: 0;
  color: var(--scene-accent);
  font-size: 11.5px;
  font-weight: 820;
  letter-spacing: 0.13em;
  line-height: 20px;
  text-transform: uppercase;
}

.project-scene-kicker span {
  color: var(--scene-accent);
  font-size: 18px;
  font-weight: 740;
  letter-spacing: 0;
  line-height: 20px;
}

.project-scene-copy h3 {
  margin: 21px 0 0;
  color: #082226;
  font-size: 28px;
  font-weight: 820;
  letter-spacing: -0.042em;
  line-height: 1.08;
}

.project-scene-copy > p:last-child {
  max-width: 185px;
  margin: 17px 0 0;
  color: #5b696d;
  font-size: 13px;
  line-height: 1.63;
}

.project-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  min-height: 0;
  pointer-events: none;
}

.project-art::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 8%;
  bottom: 8px;
  left: 32%;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(30, 76, 46, 0.16), rgba(30, 76, 46, 0) 70%);
  pointer-events: none;
}

.project-art picture {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
}

.project-art img {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 17px 15px rgba(31, 78, 47, 0.13));
  transform-origin: 68% 72%;
}

.project-scene-form .project-art img {
  right: -353px;
  bottom: 13px;
  width: 675px;
}

.project-scene-lawn .project-art img {
  right: -105px;
  bottom: -10px;
  width: 570px;
}

.project-scene-lawn .project-scene-copy > p:last-child {
  max-width: 172px;
}

.project-scene-tree .project-art img {
  right: -139px;
  bottom: -14px;
  width: 650px;
}

.project-card-arrow {
  position: absolute;
  z-index: 5;
  bottom: 46px;
  left: 29px;
  display: grid;
  width: 54px;
  height: 54px;
  border: 9px solid color-mix(in srgb, var(--scene-accent) 10%, white);
  border-radius: 50%;
  background: var(--scene-accent);
  color: #ffffff;
  box-shadow: 0 8px 18px var(--scene-glow);
  place-items: center;
  text-decoration: none;
}

.project-card-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

@media (hover: hover) and (pointer: fine) {
  .project-card-arrow,
  .project-advice-link {
    transition:
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .project-card-arrow:hover {
    box-shadow: 0 11px 24px var(--scene-glow);
    transform: translate3d(2px, -2px, 0) scale(1.035);
  }

  .project-advice-link:hover {
    box-shadow: 0 10px 28px rgba(24, 69, 45, 0.11);
    transform: translate3d(0, -2px, 0);
  }

  html[data-motion="soft"] .project-showcase.is-visible .project-scene:hover .project-art img {
    transform: translate3d(0, -2px, 0) scale(1.012);
  }
}

@media (max-width: 1399px) and (min-width: 901px) {
  body[data-site-version="new"] .project-section {
    width: min(calc(100% - 40px), 1340px);
  }

  .project-stage-inner {
    padding-top: 142px;
  }

  .project-section-heading {
    grid-template-columns: minmax(450px, 520px) minmax(300px, 350px);
    gap: 0 clamp(55px, 7vw, 92px);
    margin-bottom: 45px;
    padding-inline: 32px;
  }

  .project-section-heading h2 {
    font-size: clamp(53px, 4.35vw, 61px);
  }

  .project-proof {
    width: 158px;
  }

  .project-proof-list {
    gap: 8px;
  }

  .project-scenes {
    gap: 16px;
  }

  .project-scene {
    height: 374px;
    padding-inline: 27px;
  }

  .project-scene-copy h3 {
    font-size: 25px;
  }

  .project-card-arrow {
    left: 27px;
  }

  .project-ambient-shape-green {
    right: -240px;
  }

  .project-ambient-shape-blue {
    right: -260px;
  }

  .project-ambient-plant {
    right: -350px;
  }
}

@media (max-width: 1650px) and (min-width: 1400px) {
  .project-scene-form .project-art img {
    right: -385px;
  }

  .project-scene-lawn .project-art img {
    right: -105px;
  }
}

@media (max-width: 1080px) and (min-width: 901px) {
  .project-section-heading {
    grid-template-columns: minmax(430px, 500px) minmax(270px, 320px);
    gap: 0 40px;
    padding-inline: 24px;
  }

  .project-proof-list {
    flex-wrap: wrap;
  }

  .project-proof {
    width: 154px;
  }

  .project-scene {
    height: 365px;
    padding: 30px 23px;
  }

  .project-scene-copy {
    width: 165px;
  }

  .project-scene-kicker {
    gap: 10px;
    font-size: 9.5px;
  }

  .project-scene-copy h3 {
    margin-top: 19px;
    font-size: 23px;
  }

  .project-scene-copy > p:last-child {
    max-width: 155px;
    font-size: 11.5px;
  }

  .project-card-arrow {
    left: 23px;
  }
}

@media (max-width: 900px) {
  body[data-site-version="new"] .project-section {
    width: min(100% - 32px, 760px);
    min-height: 0;
    overflow: hidden;
  }

  .project-stage-inner {
    min-height: 0;
    padding: 96px 0 82px;
  }

  .project-section-heading {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 38px;
    padding-inline: 8px;
  }

  .project-section-heading h2 {
    font-size: clamp(45px, 8.6vw, 62px);
  }

  .project-proof-list {
    flex-wrap: wrap;
  }

  .project-heading-aside {
    position: static;
    display: block;
    margin-top: 0;
  }

  .project-ambient-shape-green {
    top: 255px;
    right: -330px;
  }

  .project-ambient-shape-blue {
    top: 410px;
    right: -380px;
  }

  .project-ambient-plant,
  .project-floating-leaf {
    display: none;
  }

  .project-scenes {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .project-scene {
    height: 410px;
    padding: 34px 30px;
  }

  .project-scene + .project-scene::before {
    display: none;
  }

  .project-scene-copy {
    width: min(210px, 48%);
  }

  .project-scene-form .project-art img {
    right: -115px;
    width: 550px;
  }

  .project-scene-lawn .project-art img {
    right: -100px;
    width: 570px;
  }

  .project-scene-tree .project-art img {
    right: -35px;
    width: 610px;
  }
}

@media (max-width: 620px) {
  body[data-site-version="new"] .project-section {
    width: calc(100% - 24px);
  }

  .project-stage-inner {
    padding-top: 78px;
  }

  .project-section-heading {
    margin-bottom: 30px;
    padding-inline: 4px;
  }

  .project-section-heading h2 {
    font-size: clamp(39px, 11.7vw, 51px);
    line-height: 1.03;
  }

  .project-title-leaf {
    top: 6px;
    right: -27px;
    width: 22px;
    height: 14px;
  }

  .project-proof-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .project-proof {
    width: min(100%, 220px);
  }

  .project-scene {
    height: 470px;
    padding: 28px 22px;
    border-radius: 18px;
  }

  .project-scene-copy {
    width: 170px;
  }

  .project-scene-kicker {
    gap: 10px;
    font-size: 9px;
  }

  .project-scene-copy h3 {
    margin-top: 19px;
    font-size: 24px;
  }

  .project-scene-copy > p:last-child {
    max-width: 158px;
    font-size: 11.5px;
  }

  .project-card-arrow {
    bottom: 27px;
    left: 22px;
  }

  .project-scene-form .project-art img {
    right: -184px;
    bottom: 17px;
    width: 500px;
  }

  .project-scene-lawn .project-art img {
    right: -173px;
    bottom: 20px;
    width: 520px;
  }

  .project-scene-tree .project-art img {
    right: -145px;
    width: 550px;
  }
}

@media (max-height: 850px) and (min-width: 901px) {
  .project-stage-inner {
    padding-top: 126px;
    padding-bottom: 30px;
  }

  .project-section-heading {
    margin-bottom: 34px;
  }

  .project-section-heading h2 {
    font-size: clamp(51px, 3.55vw, 59px);
  }

  .project-proof-list {
    margin-top: 18px;
  }

  .project-proof {
    min-height: 62px;
  }

  .project-scene {
    height: 350px;
  }
}

/* The opening composition is a hero plus its benefit row. On full-width desktops both
   together occupy exactly one viewport, leaving the same protected cue band as every
   later stage. The hero gives up surplus height first; the cards compact only when the
   window is too short to retain their 290px reference height. */
@media (min-width: 1181px) {
  body[data-site-version="new"] {
    --opening-hero-height: clamp(425px, calc(10svh + 335px), 435px);
    --opening-hero-bottom: clamp(19px, calc(5vw - 59px), 55px);
  }

  body[data-site-version="new"] .hero {
    min-height: 0;
    padding-bottom: var(--opening-hero-bottom);
  }

  body[data-site-version="new"] .hero-inner {
    height: var(--opening-hero-height);
    min-height: var(--opening-hero-height);
  }

  .top-benefits {
    height: calc(100svh - 128px - var(--opening-hero-height) - var(--opening-hero-bottom));
    min-height: 0;
    padding: 36px 0 0;
    align-items: start;
  }

  .top-benefits-inner {
    height: min(290px, calc(100svh - var(--cue-viewport-reserve) - 164px - var(--opening-hero-height) - var(--opening-hero-bottom)));
  }
}

@media (max-height: 1065px) and (min-width: 1181px) {
  body[data-site-version="new"] .hero-media {
    height: 100%;
  }

  body[data-site-version="new"] .hero-location {
    margin-bottom: 14px;
  }

  body[data-site-version="new"] .hero-lead {
    margin-top: 10px;
  }

  body[data-site-version="new"] .hero-actions {
    margin-top: 24px;
  }

  body[data-site-version="new"] .hero-proof {
    margin-top: 20px;
  }

  .benefits-intro {
    top: 0;
    align-self: start;
    padding: 0 22px 0 4px;
  }

  .benefits-intro .eyebrow {
    margin-bottom: 12px;
    font-size: 11px;
  }

  .benefits-intro h2 {
    font-size: 25px;
    line-height: 1.09;
  }

  .benefits-intro > p:not(.eyebrow) {
    margin-top: 12px;
    font-size: 11.5px;
    line-height: 1.5;
  }

  .benefits-signature {
    margin-top: 10px;
    font-size: 17px;
  }

  .benefit-card {
    height: 100%;
    min-height: 0;
    padding: 18px 14px 14px;
  }

  .benefit-icon {
    width: 88px;
    height: 88px;
  }

  .benefit-icon img,
  .benefit-icon-calendar img,
  .benefit-icon-care img,
  .benefit-icon-shield img {
    width: 78px;
    height: 78px;
  }

  .benefit-card h3 {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.22;
  }

  .benefit-card p {
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.45;
  }
}

@media (max-height: 940px) and (min-width: 1181px) {
  .benefits-intro {
    padding-right: 18px;
  }

  .benefits-intro .eyebrow {
    margin-bottom: 8px;
    font-size: 10px;
  }

  .benefits-intro h2 {
    font-size: 22px;
    line-height: 1.06;
  }

  .benefits-intro > p:not(.eyebrow) {
    margin-top: 8px;
    font-size: 10.5px;
    line-height: 1.42;
  }

  .benefits-signature {
    margin-top: 6px;
    font-size: 15px;
  }

  .benefit-card {
    padding: 8px 12px 7px;
  }

  .benefit-icon {
    width: 60px;
    height: 60px;
  }

  .benefit-icon img,
  .benefit-icon-calendar img,
  .benefit-icon-care img,
  .benefit-icon-shield img {
    width: 54px;
    height: 54px;
  }

  .benefit-card h3 {
    margin-top: 8px;
    font-size: 11.75px;
    line-height: 1.18;
  }

  .benefit-card p {
    margin-top: 5px;
    font-size: 9.75px;
    line-height: 1.3;
  }
}

/* Homepage V9: reference-led illustrated services catalogue. */
body[data-site-version="new"] .services-section {
  position: relative;
  display: block;
  width: min(1900px, calc(100% - 80px));
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding: 119px 0 23px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.services-stage-shell {
  display: grid;
  min-height: 0;
  grid-template-rows: 202px 472px 116px;
  gap: 27px;
}

.services-stage-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 720px) auto;
  align-items: end;
  justify-content: space-between;
  gap: 70px;
  padding: 0 26px 0 40px;
}

.services-stage-heading .eyebrow {
  margin: 0 0 17px;
  color: #159834;
  font-size: 13px;
  font-weight: 820;
  letter-spacing: 0.22em;
  line-height: 18px;
  text-transform: uppercase;
}

.services-stage-heading h2 {
  max-width: none;
  margin: 0;
  color: #082124;
  font-size: clamp(50px, 3.52vw, 56px);
  font-weight: 840;
  letter-spacing: -0.052em;
  line-height: 1.03;
}

.services-stage-heading h2 span {
  display: block;
  width: max-content;
  white-space: nowrap;
}

.services-stage-heading h2 span:last-child {
  color: #22a842;
}

.services-all-link {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  align-self: end;
  gap: 17px;
  margin-bottom: 3px;
  padding: 0 2px 9px 0;
  border-bottom: 1px solid rgba(25, 161, 60, 0.72);
  color: #10962f;
  font-size: 15px;
  font-weight: 780;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.services-all-link span {
  font-size: 23px;
  font-weight: 500;
  line-height: 12px;
}

body[data-site-version="new"] .services-stage-list {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  height: 472px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 13px;
  margin: 0 4px 0 8px;
  padding: 0;
  overflow: visible;
  border: 0;
  list-style: none;
}

body[data-site-version="new"] .services-stage-list li,
body[data-site-version="new"] .services-stage-list li:last-child,
body[data-site-version="new"] .services-stage-list li + li {
  display: block;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(31, 88, 48, 0.035);
  border-radius: 36px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 7px rgba(255, 255, 255, 0.91),
    0 14px 34px rgba(42, 71, 53, 0.085);
  scroll-snap-align: center;
}

.service-card {
  --service-accent: #26b33d;
  --service-glow: rgba(38, 179, 61, 0.18);
  background:
    radial-gradient(circle at 52% 29%, rgba(255, 255, 255, 0.6), transparent 44%),
    linear-gradient(155deg, #f4f9e9 0%, #ecf6e2 58%, #f6faef 100%);
}

.service-card-hedge {
  --service-accent: #1789e8;
  --service-glow: rgba(23, 137, 232, 0.19);
  background:
    radial-gradient(circle at 54% 27%, rgba(255, 255, 255, 0.65), transparent 44%),
    linear-gradient(155deg, #ecf6fe 0%, #e6f2fb 58%, #f3f8fe 100%);
}

.service-card-tree {
  --service-accent: #f5a009;
  --service-glow: rgba(245, 160, 9, 0.19);
  background:
    radial-gradient(circle at 52% 28%, rgba(255, 255, 255, 0.64), transparent 45%),
    linear-gradient(155deg, #fdf6e4 0%, #fdeed5 58%, #fdf7e9 100%);
}

.service-card-stump {
  --service-accent: #8e45e9;
  --service-glow: rgba(142, 69, 233, 0.18);
  background:
    radial-gradient(circle at 52% 27%, rgba(255, 255, 255, 0.65), transparent 44%),
    linear-gradient(155deg, #f6effe 0%, #eee5fa 58%, #f8f3fe 100%);
}

.service-card-turf {
  --service-accent: #f04b4f;
  --service-glow: rgba(240, 75, 79, 0.18);
  background:
    radial-gradient(circle at 52% 27%, rgba(255, 255, 255, 0.63), transparent 44%),
    linear-gradient(155deg, #fcf0ee 0%, #fce7e4 58%, #fdf4f2 100%);
}

.services-stage-list .service-card > a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: #0a2326;
  text-decoration: none;
}

.services-stage-list .service-card > a:hover,
.services-stage-list .service-card > a:focus-visible {
  background: transparent;
  color: #0a2326;
}

.services-stage-list .service-card-number {
  position: absolute;
  z-index: 4;
  top: 19px;
  left: 23px;
  display: grid;
  width: 55px;
  height: 55px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--service-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 8px 15px var(--service-glow);
  font-size: 24px;
  font-weight: 790;
  letter-spacing: -0.045em;
  line-height: 1;
  place-items: center;
}

.service-card-art {
  position: absolute;
  z-index: 1;
  top: 31px;
  left: 50%;
  display: grid;
  width: 140%;
  height: 265px;
  pointer-events: none;
  place-items: center;
  transform: translateX(-50%);
}

.service-card-lawn .service-card-art {
  left: 56%;
}

.service-card-art img {
  --service-art-scale-x: 1;
  --service-art-scale: 1;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 17px 13px rgba(28, 66, 40, 0.14));
  transform: scaleX(var(--service-art-scale-x)) scale(var(--service-art-scale));
  transform-origin: 50% 74%;
}

.service-card-lawn .service-card-art img {
  --service-art-scale-x: 0.86;
}

.service-card-hedge .service-card-art img {
  --service-art-scale: 1.07;
}

.service-card-hedge .service-card-art {
  top: 17px;
  left: 58%;
  width: 142%;
}

.service-card-tree .service-card-art {
  top: 12px;
  left: 50%;
  width: 135%;
}

.service-card-stump .service-card-art {
  top: 42px;
  left: 53%;
  width: 135%;
}

.service-card-stump .service-card-art img {
  --service-art-scale-x: 0.9;
}

.service-card-turf .service-card-art {
  top: 28px;
  left: 56%;
  width: 138%;
}

.service-card-turf .service-card-art img {
  --service-art-scale-x: 0.92;
}

.service-card-copy {
  position: absolute;
  z-index: 3;
  top: 300px;
  right: 22px;
  left: 23px;
  display: block;
  font-weight: 400;
  letter-spacing: normal;
}

.service-card-copy strong,
.service-card-copy small {
  display: block;
}

.services-stage-list .service-card-copy strong {
  margin: 0;
  color: #0a2326;
  font-size: clamp(20px, 1.42vw, 23px);
  font-weight: 830;
  letter-spacing: -0.045em;
  line-height: 1.12;
}

.services-stage-list .service-card-copy small {
  max-width: 230px;
  margin-top: 12px;
  color: #263b3e;
  font-size: clamp(12px, 0.86vw, 14px);
  font-weight: 430;
  letter-spacing: -0.005em;
  line-height: 1.68;
}

.services-stage-list .service-card-arrow {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 21px;
  top: auto;
  display: grid;
  width: 55px;
  height: 55px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--service-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 8px 15px var(--service-glow);
  font-size: 0;
  font-style: normal;
  place-items: center;
}

.service-card-arrow svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.services-contact-bar {
  display: grid;
  min-width: 0;
  min-height: 116px;
  grid-template-columns: 72px minmax(0, 1fr) 330px;
  align-items: center;
  gap: 40px;
  margin: 0 6px 0 8px;
  padding: 14px 148px 14px 92px;
  overflow: hidden;
  border: 7px solid rgba(255, 255, 255, 0.82);
  border-radius: 37px;
  background:
    radial-gradient(circle at 10% 50%, rgba(239, 249, 225, 0.96), transparent 31%),
    radial-gradient(circle at 88% 50%, rgba(232, 247, 245, 0.9), transparent 35%),
    linear-gradient(100deg, #f4f9eb 0%, #f8fbf5 50%, #eef8f5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 14px 34px rgba(38, 81, 51, 0.06);
}

.services-contact-icon {
  display: grid;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(29, 114, 56, 0.045);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #12ad43;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 9px 18px rgba(28, 111, 50, 0.13);
  place-items: center;
}

.services-contact-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.services-contact-copy,
.services-contact-copy strong,
.services-contact-copy small {
  display: block;
}

.services-contact-copy strong {
  color: #0a2225;
  font-size: 17px;
  font-weight: 810;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.services-contact-copy small {
  max-width: 520px;
  margin-top: 7px;
  color: #3f5154;
  font-size: 13.5px;
  line-height: 1.55;
}

.services-contact-cta {
  display: inline-flex;
  width: 330px;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  gap: 23px;
  padding: 0 26px;
  border: 0;
  border-radius: 33px;
  background: linear-gradient(135deg, #27bd4b 0%, #0e9c31 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 24px rgba(17, 152, 50, 0.24);
  font: inherit;
  font-size: 16px;
  font-weight: 760;
  cursor: pointer;
}

.services-contact-cta svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

@media (hover: hover) and (pointer: fine) {
  .services-all-link,
  .service-card,
  .service-card-art img,
  .service-card-arrow,
  .services-contact-cta {
    transition:
      transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1),
      filter 520ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .services-all-link:hover {
    transform: translate3d(4px, 0, 0);
  }

  .service-card:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 0 0 7px rgba(255, 255, 255, 0.95),
      0 18px 40px rgba(42, 71, 53, 0.1);
    transform: translate3d(0, -4px, 0);
  }

  .service-card:hover .service-card-art img {
    filter: drop-shadow(0 20px 15px rgba(28, 66, 40, 0.17));
    transform: scaleX(var(--service-art-scale-x)) scale(var(--service-art-scale)) scale(1.018);
  }

  .service-card:hover .service-card-arrow {
    box-shadow: 0 10px 19px var(--service-glow);
    transform: translate3d(2px, -1px, 0);
  }

  .services-contact-cta:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 16px 30px rgba(17, 152, 50, 0.29);
    transform: translate3d(0, -2px, 0);
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  body[data-site-version="new"] .services-section {
    width: calc(100% - 40px);
    padding: 110px 0 18px;
  }

  .services-stage-shell {
    grid-template-rows: 175px 430px 104px;
    gap: 18px;
  }

  .services-stage-heading {
    grid-template-columns: minmax(0, 560px) auto;
    gap: 35px;
    padding-inline: 24px;
  }

  .services-stage-heading h2 {
    font-size: 44px;
  }

  .services-stage-heading .eyebrow {
    margin-bottom: 12px;
    font-size: 11px;
  }

  body[data-site-version="new"] .services-stage-list {
    height: 430px;
    gap: 9px;
    margin-right: 58px;
  }

  body[data-site-version="new"] .services-stage-list li,
  body[data-site-version="new"] .services-stage-list li:last-child,
  body[data-site-version="new"] .services-stage-list li + li {
    border-radius: 29px;
  }

  .services-stage-list .service-card-number {
    top: 16px;
    left: 16px;
    width: 47px;
    height: 47px;
    border-radius: 16px;
    font-size: 20px;
  }

  .service-card-art {
    top: 24px;
    width: 148%;
    height: 236px;
  }

  .service-card-hedge .service-card-art,
  .service-card-tree .service-card-art {
    top: 10px;
  }

  .service-card-stump .service-card-art {
    top: 47px;
    width: 155%;
  }

  .service-card-turf .service-card-art {
    top: 35px;
    width: 153%;
  }

  .service-card-copy {
    top: 267px;
    right: 15px;
    left: 16px;
  }

  .services-stage-list .service-card-copy strong {
    font-size: 19px;
  }

  .services-stage-list .service-card-copy small {
    margin-top: 9px;
    font-size: 11.5px;
    line-height: 1.55;
  }

  .services-stage-list .service-card-arrow {
    right: 15px;
    bottom: 15px;
    width: 47px;
    height: 47px;
    border-radius: 16px;
  }

  .services-contact-bar {
    min-height: 104px;
    grid-template-columns: 62px minmax(0, 1fr) 275px;
    gap: 25px;
    padding: 12px 60px;
    border-width: 5px;
    border-radius: 31px;
  }

  .services-contact-icon {
    width: 62px;
    height: 62px;
  }

  .services-contact-copy small {
    max-width: 420px;
    font-size: 12px;
  }

  .services-contact-cta {
    width: 275px;
    min-height: 58px;
    font-size: 14px;
  }
}

@media (max-height: 940px) and (min-width: 1181px) {
  body[data-site-version="new"] .services-section {
    padding: 111px 0 18px;
  }

  .services-stage-shell {
    grid-template-rows: 172px 420px 102px;
    gap: 18px;
  }

  .services-stage-heading {
    padding-inline: 34px;
  }

  .services-stage-heading h2 {
    font-size: 46px;
  }

  .services-stage-heading .eyebrow {
    margin-bottom: 12px;
  }

  body[data-site-version="new"] .services-stage-list {
    height: 420px;
  }

  .service-card-art {
    top: 18px;
    height: 242px;
  }

  .service-card-hedge .service-card-art,
  .service-card-tree .service-card-art {
    top: 5px;
  }

  .service-card-stump .service-card-art {
    top: 32px;
  }

  .service-card-turf .service-card-art {
    top: 17px;
  }

  .service-card-copy {
    top: 268px;
  }

  .services-stage-list .service-card-copy strong {
    font-size: 20px;
  }

  .services-stage-list .service-card-copy small {
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.55;
  }

  .services-stage-list .service-card-arrow {
    bottom: 15px;
    width: 50px;
    height: 50px;
  }

  .services-contact-bar {
    min-height: 102px;
    grid-template-columns: 62px minmax(0, 1fr) 300px;
    gap: 30px;
    padding: 11px 120px 11px 82px;
    border-width: 5px;
    border-radius: 32px;
  }

  .services-contact-icon {
    width: 62px;
    height: 62px;
  }

  .services-contact-cta {
    width: 300px;
    min-height: 58px;
    font-size: 14px;
  }
}

@media (max-width: 900px) {
  body[data-site-version="new"] .services-section {
    width: calc(100% - 24px);
    min-height: 0;
    padding: 88px 0 92px;
    overflow: hidden;
  }

  .services-stage-shell {
    display: block;
    min-height: 0;
  }

  .services-stage-heading {
    display: grid;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 31px;
    padding-inline: 4px;
  }

  .services-stage-heading h2 {
    font-size: clamp(42px, 8.7vw, 58px);
  }

  .services-stage-heading h2 span {
    width: auto;
    white-space: normal;
  }

  .services-all-link {
    justify-self: start;
    margin: 0;
  }

  body[data-site-version="new"] .services-stage-list {
    display: grid;
    width: calc(100% + 12px);
    height: auto;
    grid-auto-columns: minmax(280px, 82vw);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 15px;
    margin: 0 0 0 -4px;
    padding: 8px 8px 20px;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-padding-inline: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  body[data-site-version="new"] .services-stage-list::-webkit-scrollbar {
    display: none;
  }

  body[data-site-version="new"] .services-stage-list li,
  body[data-site-version="new"] .services-stage-list li:last-child,
  body[data-site-version="new"] .services-stage-list li + li {
    height: 456px;
    border-radius: 32px;
  }

  .service-card-art {
    top: 24px;
    width: 138%;
  }

  .service-card-hedge .service-card-art {
    top: 10px;
  }

  .service-card-tree .service-card-art {
    top: 4px;
    width: 132%;
  }

  .service-card-stump .service-card-art {
    top: 51px;
    width: 144%;
  }

  .service-card-turf .service-card-art {
    top: 36px;
    width: 143%;
  }

  .service-card-copy {
    top: 280px;
  }

  .services-stage-list .service-card-copy strong {
    font-size: 22px;
  }

  .services-stage-list .service-card-copy small {
    font-size: 13px;
  }

  .services-contact-bar {
    display: grid;
    min-height: 0;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
    margin-top: 20px;
    padding: 21px;
    border-width: 5px;
    border-radius: 31px;
  }

  .services-contact-icon {
    width: 64px;
    height: 64px;
  }

  .services-contact-cta {
    width: 100%;
    min-height: 58px;
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  body[data-site-version="new"] .services-section {
    padding-top: 78px;
  }

  .services-stage-heading h2 {
    font-size: clamp(39px, 11.7vw, 49px);
    line-height: 1.04;
  }

  .services-stage-heading .eyebrow {
    margin-bottom: 12px;
    font-size: 11px;
  }

  body[data-site-version="new"] .services-stage-list {
    grid-auto-columns: minmax(276px, 84vw);
  }

  .services-contact-bar {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 15px;
    padding: 18px;
  }

  .services-contact-icon {
    width: 56px;
    height: 56px;
  }

  .services-contact-copy strong {
    font-size: 15px;
  }

  .services-contact-copy small {
    font-size: 11.5px;
  }

  .services-contact-cta {
    font-size: 14px;
  }
}

/* Keep the hand-tuned V9 diorama proportions independent from stage motion.
   The service cards animate as wrappers; their inner artwork stays geometrically stable. */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"] #leistungen.is-stage-leaving .service-card-art img,
  html[data-motion="soft"] #leistungen.is-stage-arriving .service-card-art img {
    animation: none !important;
    transform: scaleX(var(--service-art-scale-x)) scale(var(--service-art-scale));
    will-change: auto;
  }
}

/* Persistent section cue: a calm, unobtrusive hand-off to the next chapter. */
/* Free space the next-section navigator claims around itself. Nothing may be laid out
   inside this band; the runtime clearance guard enforces it on every section. */
:root {
  --cue-clearance: 18px;
}

.section-next-cue {
  position: fixed;
  z-index: 92;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  gap: 11px;
  padding: 5px 7px 5px 19px;
  border: 1px solid var(--cue-border, rgba(21, 105, 54, 0.1));
  border-radius: 999px;
  background: var(--cue-surface, rgba(255, 255, 255, 0.78));
  color: var(--cue-ink, #17472d);
  box-shadow: var(--cue-shadow,
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 28px rgba(23, 78, 47, 0.12),
    0 2px 7px rgba(23, 78, 47, 0.05));
  -webkit-backdrop-filter: var(--cue-blur, blur(18px) saturate(1.12));
  backdrop-filter: var(--cue-blur, blur(18px) saturate(1.12));
  font-size: 13px;
  font-weight: 780;
  letter-spacing: -0.012em;
  line-height: 1;
  text-decoration: none;
  transform: translate3d(-50%, 0, 0);
  translate: 0 0;
  transition:
    background-color 320ms var(--ease-apple-soft),
    border-color 320ms var(--ease-apple-soft),
    box-shadow 320ms var(--ease-apple-soft),
    color 320ms var(--ease-apple-soft),
    translate 460ms var(--ease-apple-soft),
    opacity 300ms var(--ease-apple-soft);
}

.section-next-cue[hidden] {
  display: none;
}

/* The navigator is present on every section. When content sits inside its band it does not
   hide; it strengthens its own surface so the wording stays legible over whatever is behind. */
.section-next-cue[data-cue-over="content"] {
  --cue-surface: var(--cue-surface-over, rgba(255, 255, 255, 0.95));
  --cue-border: var(--cue-border-over, rgba(21, 105, 54, 0.16));
  --cue-shadow: var(--cue-shadow-over,
    inset 0 1px 0 #ffffff,
    0 18px 38px rgba(23, 78, 47, 0.2),
    0 3px 10px rgba(23, 78, 47, 0.1));
}

/* Resolved from the measured backdrop instead of a hand-maintained section list. */
.section-next-cue[data-cue-backdrop="dark"] {
  --cue-surface: var(--cue-surface-dark, rgba(18, 62, 39, 0.62));
  --cue-border: var(--cue-border-dark, rgba(255, 255, 255, 0.3));
  --cue-ink: var(--cue-ink-dark, #ffffff);
  --cue-shadow: var(--cue-shadow-dark,
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 16px 34px rgba(4, 35, 18, 0.24));
}

.section-next-cue[data-cue-backdrop="dark"] .section-next-cue-arrow {
  background: var(--cue-arrow-bg-dark, rgba(255, 255, 255, 0.94));
  color: var(--cue-arrow-ink-dark, #159a3b);
}

/* Selectable surface designs. Each one only restates the tokens it changes. */
html[data-cue-design="glas"] .section-next-cue {
  --cue-surface: rgba(255, 255, 255, 0.4);
  --cue-surface-over: rgba(255, 255, 255, 0.62);
  --cue-border: rgba(255, 255, 255, 0.62);
  --cue-border-over: rgba(255, 255, 255, 0.78);
  --cue-ink: #123c27;
  --cue-blur: blur(26px) saturate(1.55);
  --cue-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 40px rgba(23, 78, 47, 0.16);
  --cue-shadow-over:
    inset 0 1px 0 #ffffff,
    0 20px 46px rgba(23, 78, 47, 0.24);
}

html[data-cue-design="glas"] .section-next-cue-arrow {
  background: linear-gradient(145deg, rgba(56, 200, 96, 0.94), rgba(16, 155, 57, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 7px 16px rgba(15, 149, 55, 0.22);
}

html[data-cue-design="solid"] .section-next-cue {
  --cue-surface: #ffffff;
  --cue-surface-over: #ffffff;
  --cue-border: rgba(18, 64, 42, 0.09);
  --cue-border-over: rgba(18, 64, 42, 0.14);
  --cue-ink: #123a26;
  --cue-blur: none;
  --cue-shadow:
    0 10px 26px rgba(20, 70, 44, 0.16),
    0 1px 2px rgba(0, 0, 0, 0.05);
  --cue-shadow-over:
    0 16px 36px rgba(20, 70, 44, 0.24),
    0 2px 4px rgba(0, 0, 0, 0.07);
}

html[data-cue-design="dunkel"] .section-next-cue {
  --cue-surface: rgba(17, 60, 38, 0.9);
  --cue-surface-over: rgba(17, 60, 38, 0.97);
  --cue-border: rgba(255, 255, 255, 0.16);
  --cue-border-over: rgba(255, 255, 255, 0.24);
  --cue-ink: #ffffff;
  --cue-blur: blur(16px) saturate(1.2);
  --cue-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 16px 34px rgba(6, 32, 18, 0.26);
  --cue-shadow-over:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 20px 42px rgba(6, 32, 18, 0.34);
  --cue-surface-dark: rgba(17, 60, 38, 0.94);
  --cue-ink-dark: #ffffff;
}

html[data-cue-design="dunkel"] .section-next-cue-arrow {
  background: #ffffff;
  color: #12923a;
  box-shadow: 0 7px 15px rgba(4, 35, 18, 0.24);
}

/* The label is a mask: the outgoing wording leaves through it while the new one arrives. */
.section-next-cue-label {
  position: relative;
  display: block;
  min-height: 1.5em;
  overflow: hidden;
  line-height: 1.5;
}

.section-next-cue-text {
  display: block;
  white-space: nowrap;
}

/* Fixed-width variants keep the surface at one size, so a handover never touches layout. */
html[data-cue-motion="float"] .section-next-cue-text,
html[data-cue-motion="lift"] .section-next-cue-text {
  text-align: center;
}

.section-next-cue-text[data-cue-outgoing] {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.section-next-cue-arrow {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #32c158, #109b39);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 7px 15px rgba(15, 149, 55, 0.25);
}

/* On the last section the control points back to the top instead of leaving the screen. */
.section-next-cue[data-cue-direction="up"] .section-next-cue-arrow svg {
  rotate: 180deg;
}

.section-next-cue-arrow svg {
  width: 18px;
  height: 18px;
  transition: rotate 320ms var(--ease-apple-soft);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

@media (hover: hover) and (pointer: fine) {
  .section-next-cue:hover {
    --cue-surface: var(--cue-surface-over, rgba(255, 255, 255, 0.96));
    --cue-border: var(--cue-border-over, rgba(18, 154, 57, 0.22));
    --cue-shadow: var(--cue-shadow-over,
      inset 0 1px 0 #ffffff,
      0 17px 34px rgba(23, 78, 47, 0.15),
      0 3px 8px rgba(23, 78, 47, 0.05));
  }

  .section-next-cue:hover .section-next-cue-arrow {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      0 10px 19px rgba(15, 149, 55, 0.3);
  }
}

/* The resting glow lives on its own layer. Animating its opacity keeps the pill's own
   box-shadow untouched, so a design token can never be overridden by the idle keyframes. */
.section-next-cue::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 16px 38px rgba(21, 154, 57, 0.3);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"][data-cue-idle="atem"] .section-next-cue:not([hidden]) {
    animation: section-next-cue-breathe 6.4s var(--ease-apple-soft) infinite;
  }

  html[data-motion="soft"][data-cue-idle="atem"] .section-next-cue:not([hidden]) .section-next-cue-arrow svg,
  html[data-motion="soft"][data-cue-idle="senke"] .section-next-cue:not([hidden]) .section-next-cue-arrow svg {
    animation: section-next-cue-arrow 2.8s var(--ease-apple-soft) infinite;
  }

  html[data-motion="soft"][data-cue-idle="glanz"] .section-next-cue:not([hidden])::after {
    animation: section-next-cue-glow 5.2s var(--ease-apple-soft) infinite;
  }
}

/* Transform only: no paint-heavy property is animated for the life of the page. */
@keyframes section-next-cue-breathe {
  0%, 18%, 100% { transform: translate3d(-50%, 0, 0); }
  8% { transform: translate3d(-50%, -2px, 0); }
}

@keyframes section-next-cue-arrow {
  0%, 22%, 100% { transform: translate3d(0, 0, 0); }
  48% { transform: translate3d(0, 3px, 0); }
}

@keyframes section-next-cue-glow {
  0%, 68%, 100% { opacity: 0; }
  24% { opacity: 1; }
}

/* Resting motion never competes with a handover or with a section change. */
html.is-section-scrolling .section-next-cue,
html.is-stage-transitioning .section-next-cue,
html .section-next-cue.is-cue-morphing,
html.is-section-scrolling .section-next-cue::after,
html.is-stage-transitioning .section-next-cue::after,
html .section-next-cue.is-cue-morphing::after,
html.is-section-scrolling .section-next-cue .section-next-cue-arrow svg,
html.is-stage-transitioning .section-next-cue .section-next-cue-arrow svg,
html .section-next-cue.is-cue-morphing .section-next-cue-arrow svg {
  animation-play-state: paused !important;
}

/* The clearance retract stays instant when motion is reduced or switched off. */
@media (prefers-reduced-motion: reduce) {
  .section-next-cue {
    transition-duration: 0.01ms;
  }
}

html[data-motion="off"] .section-next-cue {
  transition-duration: 0.01ms;
}

@media (max-width: 700px) {
  .section-next-cue {
    bottom: max(12px, env(safe-area-inset-bottom));
    min-height: 48px;
    gap: 9px;
    padding: 4px 5px 4px 16px;
    font-size: 12px;
  }

  .section-next-cue-arrow {
    width: 38px;
    height: 38px;
  }
}

/* Homepage V12: reference-led regional service map. */
body[data-site-version="new"] .home-seo-locations {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  padding: 159px 0 22px;
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(circle at 87% 6%, rgba(222, 239, 255, 0.42), transparent 30rem),
    radial-gradient(circle at 11% 82%, rgba(233, 246, 218, 0.44), transparent 28rem),
    #ffffff;
  isolation: isolate;
}

.locations-v10-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1560px, calc(100% - 64px));
  max-width: none;
  min-height: calc(100svh - 181px);
  margin-inline: auto;
  grid-template-rows: minmax(540px, 1fr) 168px;
  gap: 36px;
}

body[data-site-version="new"] .home-seo-locations > .locations-v10-shell {
  max-width: none;
}

.locations-v10-main {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(490px, 0.54fr) minmax(0, 1fr);
  gap: clamp(42px, 3.2vw, 56px);
  align-items: center;
}

.locations-v10-copy {
  min-width: 0;
  align-self: stretch;
  padding: 10px 0 0 13px;
}

.locations-v10-eyebrow {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(23, 132, 55, 0.04);
  border-radius: 999px;
  background: rgba(234, 247, 234, 0.92);
  color: #188f39;
  box-shadow: 0 6px 16px rgba(30, 102, 52, 0.06);
  font-size: 12px;
  font-weight: 810;
  letter-spacing: 0.065em;
  line-height: 1;
  text-transform: uppercase;
}

.locations-v10-eyebrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body[data-site-version="new"] .home-seo-locations .locations-v10-copy h2 {
  max-width: none;
  margin: 39px 0 0;
  color: #071f23;
  font-size: clamp(76px, 5.82vw, 98px);
  font-weight: 850;
  letter-spacing: -0.06em;
  line-height: 0.82;
}

.locations-v10-copy h2 span {
  display: block;
  width: max-content;
}

.locations-v10-copy h2 .locations-v10-title-green {
  margin-block: 5px 4px;
  color: #18ad41;
}

.locations-v10-lead {
  margin: 27px 0 0;
  color: #53606c;
  font-size: clamp(16px, 1.18vw, 19px);
  line-height: 1.72;
}

.locations-v10-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
}

.locations-v10-primary,
.locations-v10-phone {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 790;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.locations-v10-primary {
  min-width: 312px;
  padding: 0 19px 0 26px;
  border: 0;
  background: linear-gradient(135deg, #20bb4b, #0aa33a);
  color: #ffffff;
  box-shadow: 0 13px 28px rgba(15, 157, 54, 0.22);
}

.locations-v10-primary svg,
.locations-v10-phone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.locations-v10-phone {
  min-width: 190px;
  padding-inline: 24px;
  border: 1px solid rgba(17, 63, 35, 0.04);
  background: rgba(255, 255, 255, 0.88);
  color: #14232a;
  box-shadow: 0 12px 28px rgba(27, 67, 48, 0.09);
}

.locations-v10-phone svg {
  color: #12a440;
}

.locations-v10-map {
  position: relative;
  height: 536px;
  min-width: 0;
  overflow: hidden;
  border: 8px solid rgba(255, 255, 255, 0.94);
  border-radius: 44px;
  background: #f8faef;
  box-shadow:
    inset 0 0 0 1px rgba(43, 88, 50, 0.035),
    0 20px 47px rgba(34, 70, 51, 0.08);
}

.locations-v10-map::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 51% 40%, rgba(139, 229, 90, 0.27), rgba(214, 247, 177, 0.12) 17%, transparent 34%),
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.13));
  pointer-events: none;
}

.locations-v10-map picture,
.locations-v10-map picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.locations-v10-map picture img {
  object-fit: cover;
  object-position: center;
}

.locations-v10-routes {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.locations-v10-routes path {
  fill: none;
  stroke: rgba(13, 157, 55, 0.77);
  stroke-width: 1.6;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}

.locations-v10-hub {
  position: absolute;
  z-index: 4;
  top: 40.4%;
  left: 51%;
  display: grid;
  width: 88px;
  height: 105px;
  place-items: center;
  transform: translate3d(-50%, -50%, 0);
}

.locations-v10-hub-glow {
  position: absolute;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(142, 230, 78, 0.44), rgba(172, 235, 102, 0.15) 48%, transparent 72%);
  filter: blur(3px);
}

.locations-v10-hub::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 90px;
  height: 90px;
  border: 9px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 11px 22px rgba(49, 107, 57, 0.18);
}

.locations-v10-hub > svg {
  position: relative;
  z-index: 1;
  width: 77px;
  height: 92px;
  overflow: visible;
  filter: drop-shadow(0 10px 7px rgba(26, 111, 44, 0.24));
}

.locations-v10-hub > svg path {
  fill: #15ad40;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 2.5;
}

.locations-v10-hub > svg circle {
  fill: #ffffff;
}

body[data-site-version="new"] .home-seo-locations nav.locations-v10-map-labels {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  border: 0;
  pointer-events: none;
}

body[data-site-version="new"] .home-seo-locations nav.locations-v10-map-labels > a.locations-v10-label {
  position: absolute;
  display: inline-flex;
  min-height: 45px;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 20px;
  border: 1px solid rgba(29, 60, 42, 0.045);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #17272c;
  box-shadow: 0 11px 24px rgba(27, 60, 43, 0.13);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 790;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
}

.locations-v10-label i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #0a9d37;
  box-shadow: 0 0 0 4px rgba(16, 164, 60, 0.06);
}

.locations-v10-label-berlin { top: 7.5%; left: 8%; }
.locations-v10-label-schoenefeld { top: 14%; right: 17%; }
.locations-v10-label-teltow { top: 33%; left: 7%; }
.locations-v10-label-grossbeeren { top: 59%; left: 20%; }
.locations-v10-label-mahlow { top: 51%; right: 9%; }
.locations-v10-label-ludwigsfelde { bottom: 6%; left: 40%; }

.locations-v10-benefits {
  display: grid;
  min-height: 168px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid rgba(30, 78, 48, 0.035);
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 38px rgba(28, 69, 47, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.locations-v10-benefits article {
  display: grid;
  min-width: 0;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 23px;
  align-items: center;
  padding-inline: 20px;
}

.locations-v10-benefit-icon {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border-radius: 26px;
}

.locations-v10-benefit-icon svg {
  width: 39px;
  height: 39px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.locations-v10-benefit-icon-green {
  background: linear-gradient(145deg, #f0faed, #e5f4e2);
  color: #0fa03a;
}

.locations-v10-benefit-icon-coral {
  background: linear-gradient(145deg, #fff4ef, #ffebe4);
  color: #ff583b;
}

.locations-v10-benefit-icon-violet {
  background: linear-gradient(145deg, #f3f1ff, #e9e6ff);
  color: #5e4dff;
}

.locations-v10-benefits strong,
.locations-v10-benefits small {
  display: block;
}

.locations-v10-benefits strong {
  color: #102329;
  font-size: 15px;
  font-weight: 810;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.locations-v10-benefits small {
  margin-top: 10px;
  color: #596771;
  font-size: 13.5px;
  line-height: 1.85;
}

@media (hover: hover) and (pointer: fine) {
  .locations-v10-primary,
  .locations-v10-phone,
  .locations-v10-label {
    transition:
      transform 420ms var(--ease-apple-soft),
      box-shadow 420ms var(--ease-apple-soft),
      background-color 420ms var(--ease-apple-soft);
  }

  .locations-v10-primary:hover,
  .locations-v10-phone:hover {
    transform: translate3d(0, -2px, 0);
  }

  body[data-site-version="new"] .home-seo-locations nav.locations-v10-map-labels > a.locations-v10-label:hover {
    background: #ffffff;
    box-shadow: 0 14px 29px rgba(27, 60, 43, 0.17);
    transform: translate3d(0, -2px, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"] .home-seo-locations.is-motion-active .locations-v10-hub-glow {
    animation: locations-v10-hub-pulse 5.6s var(--ease-apple-soft) infinite;
  }

  html[data-motion="soft"] .home-seo-locations.is-motion-active .locations-v10-routes path {
    animation: locations-v10-route-drift 18s linear infinite;
  }
}

@keyframes locations-v10-hub-pulse {
  0%, 22%, 100% { opacity: 0.72; transform: scale(0.92); }
  11% { opacity: 1; transform: scale(1.08); }
}

@keyframes locations-v10-route-drift {
  to { stroke-dashoffset: -120; }
}

html.is-section-scrolling .locations-v10-hub-glow,
html.is-section-scrolling .locations-v10-routes path,
html.is-stage-transitioning .locations-v10-hub-glow,
html.is-stage-transitioning .locations-v10-routes path {
  animation-play-state: paused !important;
}

@media (max-width: 1180px) and (min-width: 901px) {
  body[data-site-version="new"] .home-seo-locations {
    padding-top: 124px;
  }

  .locations-v10-shell {
    width: calc(100% - 40px);
    grid-template-rows: minmax(500px, 1fr) 144px;
  }

  .locations-v10-main {
    grid-template-columns: minmax(390px, 0.65fr) minmax(0, 1fr);
    gap: 28px;
  }

  .locations-v10-copy {
    padding-left: 8px;
  }

  body[data-site-version="new"] .home-seo-locations .locations-v10-copy h2 {
    font-size: 60px;
  }

  .locations-v10-actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  .locations-v10-primary {
    min-width: 286px;
  }

  .locations-v10-map {
    height: 500px;
  }

  .locations-v10-benefits {
    padding-inline: 16px;
  }

  .locations-v10-benefits article {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding-inline: 8px;
  }

  .locations-v10-benefit-icon {
    width: 62px;
    height: 62px;
    border-radius: 21px;
  }
}

@media (max-width: 900px) {
  body[data-site-version="new"] .home-seo-locations {
    min-height: 0;
    padding: 94px 0 84px;
  }

  .locations-v10-shell {
    display: block;
    width: min(760px, calc(100% - 32px));
    min-height: 0;
  }

  .locations-v10-main {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .locations-v10-copy {
    padding: 0 4px;
  }

  body[data-site-version="new"] .home-seo-locations .locations-v10-copy h2 {
    font-size: clamp(54px, 8vw, 68px);
  }

  .locations-v10-map {
    height: 500px;
  }

  .locations-v10-benefits {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 28px;
    padding: 16px;
  }

  .locations-v10-benefits article {
    min-height: 120px;
    padding: 16px;
  }
}

@media (max-width: 620px) {
  body[data-site-version="new"] .home-seo-locations {
    padding: 82px 0 78px;
  }

  .locations-v10-shell {
    width: calc(100% - 24px);
  }

  .locations-v10-eyebrow {
    min-height: 36px;
    padding-inline: 12px 14px;
    font-size: 10px;
    letter-spacing: 0.045em;
  }

  .locations-v10-eyebrow svg {
    width: 19px;
    height: 19px;
  }

  body[data-site-version="new"] .home-seo-locations .locations-v10-copy h2 {
    margin-top: 27px;
    font-size: clamp(49px, 15vw, 64px);
  }

  .locations-v10-copy h2 .locations-v10-title-green {
    margin-block: 8px;
  }

  .locations-v10-lead {
    margin-top: 24px;
    font-size: 15px;
    line-height: 1.65;
  }

  .locations-v10-actions {
    display: grid;
    gap: 12px;
    margin-top: 26px;
  }

  .locations-v10-primary,
  .locations-v10-phone {
    width: 100%;
    min-width: 0;
    min-height: 54px;
  }

  .locations-v10-map {
    height: 370px;
    border-width: 6px;
    border-radius: 30px;
  }

  body[data-site-version="new"] .home-seo-locations nav.locations-v10-map-labels > a.locations-v10-label {
    min-height: 34px;
    gap: 7px;
    padding-inline: 10px;
    font-size: 9px;
  }

  .locations-v10-label i {
    width: 7px;
    height: 7px;
  }

  .locations-v10-label-berlin { top: 6%; left: 4%; }
  .locations-v10-label-schoenefeld { top: 16%; right: 3%; }
  .locations-v10-label-teltow { top: 34%; left: 3%; }
  .locations-v10-label-grossbeeren { top: 59%; left: 9%; }
  .locations-v10-label-mahlow { top: 48%; right: 2%; }
  .locations-v10-label-ludwigsfelde { bottom: 5%; left: 34%; }

  .locations-v10-hub {
    width: 65px;
    height: 78px;
  }

  .locations-v10-hub > svg {
    width: 58px;
    height: 70px;
  }

  .locations-v10-hub-glow {
    width: 88px;
    height: 88px;
  }

  .locations-v10-hub::before {
    width: 66px;
    height: 66px;
    border-width: 6px;
  }

  .locations-v10-benefits {
    grid-template-columns: 1fr;
    margin-top: 22px;
    padding: 10px 14px;
    border-radius: 28px;
  }

  .locations-v10-benefits article {
    min-height: 108px;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 6px;
  }

  .locations-v10-benefits article + article {
    border-top: 1px solid rgba(24, 80, 45, 0.07);
  }

  .locations-v10-benefit-icon {
    width: 62px;
    height: 62px;
    border-radius: 21px;
  }

  .locations-v10-benefit-icon svg {
    width: 32px;
    height: 32px;
  }

  .locations-v10-benefits small {
    margin-top: 7px;
    line-height: 1.55;
  }
}

/* Homepage V13 motion lab: three item-level stage systems sharing one direction-aware engine.
   Blende opens a mask edge, Sog orders items by weight, Kante hinges them in on their leading edge. */
@media (prefers-reduced-motion: no-preference) {
  /* Blende: the content barely travels; a sweeping mask edge does the reveal. */
  html[data-scroll-effect="aperture"] {
    --v13-leave-duration: 540ms;
    --v13-arrive-duration: 800ms;
    --v13-leave-ease: cubic-bezier(0.5, 0, 0.82, 0.38);
    --v13-arrive-ease: cubic-bezier(0.16, 0.86, 0.22, 1);
    --v13-leave-lead: 0ms;
    --v13-arrive-lead: 200ms;
    --v13-exit-scale: 0.85;
    --v13-enter-scale: 0.9;
    --v13-art-scale: 1.026;
  }

  html[data-scroll-effect="aperture"][data-stage-direction="forward"] {
    --v13-leave-name: v13-aperture-leave-forward;
    --v13-arrive-name: v13-aperture-arrive-forward;
    --v13-art-y: 22px;
  }

  html[data-scroll-effect="aperture"][data-stage-direction="backward"] {
    --v13-leave-name: v13-aperture-leave-backward;
    --v13-arrive-name: v13-aperture-arrive-backward;
    --v13-art-y: -22px;
  }

  /* Sog: light copy is pulled clear first, heavier cards and artwork trail behind it. */
  html[data-scroll-effect="undertow"] {
    --v13-leave-duration: 560ms;
    --v13-arrive-duration: 760ms;
    --v13-leave-ease: cubic-bezier(0.42, 0, 0.72, 0.24);
    --v13-arrive-ease: cubic-bezier(0.14, 0.78, 0.2, 1);
    --v13-leave-lead: 90ms;
    --v13-arrive-lead: 280ms;
    --v13-exit-scale: 0.5;
    --v13-enter-scale: 0.42;
    --v13-travel: 18px;
    --v13-art-scale: 0.968;
  }

  html[data-scroll-effect="undertow"][data-stage-direction="forward"] {
    --v13-leave-name: v13-undertow-leave-forward;
    --v13-arrive-name: v13-undertow-arrive-forward;
    --v13-art-y: 30px;
  }

  html[data-scroll-effect="undertow"][data-stage-direction="backward"] {
    --v13-leave-name: v13-undertow-leave-backward;
    --v13-arrive-name: v13-undertow-arrive-backward;
    --v13-art-y: -30px;
  }

  /* Each item carries a mass that drives its travel, its delay and how long it takes to settle. */
  html[data-motion="soft"][data-stage-system="v13"][data-scroll-effect="undertow"] [data-scroll-stage] [data-stage-item] {
    --v13-mass: 1;
    --v13-travel: calc(15px * var(--v13-mass));
    --v13-arrive-duration: calc(520ms + 230ms * var(--v13-mass));
    --v13-leave-duration: calc(420ms + 190ms * var(--v13-mass));
    --v13-arrive-lead: calc(170ms + 110ms * var(--v13-mass));
    --v13-leave-lead: calc(150ms * (1.55 - var(--v13-mass)));
  }

  html[data-motion="soft"][data-stage-system="v13"][data-scroll-effect="undertow"] [data-scroll-stage] [data-stage-item][data-stage-kind="copy"] {
    --v13-mass: 0.58;
  }

  html[data-motion="soft"][data-stage-system="v13"][data-scroll-effect="undertow"] [data-scroll-stage] [data-stage-item][data-stage-kind="card"] {
    --v13-mass: 1.08;
  }

  html[data-motion="soft"][data-stage-system="v13"][data-scroll-effect="undertow"] [data-scroll-stage] [data-stage-item][data-stage-kind="art"] {
    --v13-mass: 1.5;
  }

  /* Kante: items pivot in on the edge that faces the direction of travel. */
  html[data-scroll-effect="hinge"] {
    --v13-leave-duration: 480ms;
    --v13-arrive-duration: 620ms;
    --v13-leave-ease: cubic-bezier(0.55, 0, 0.78, 0.3);
    --v13-arrive-ease: cubic-bezier(0.2, 0.84, 0.26, 1);
    --v13-leave-lead: 0ms;
    --v13-arrive-lead: 180ms;
    --v13-exit-scale: 0.7;
    --v13-enter-scale: 0.62;
    --v13-art-scale: 0.985;
  }

  html[data-scroll-effect="hinge"][data-stage-direction="forward"] {
    --v13-leave-name: v13-hinge-leave-forward;
    --v13-arrive-name: v13-hinge-arrive-forward;
    --v13-leave-origin: center top;
    --v13-arrive-origin: center bottom;
    --v13-art-y: 16px;
  }

  html[data-scroll-effect="hinge"][data-stage-direction="backward"] {
    --v13-leave-name: v13-hinge-leave-backward;
    --v13-arrive-name: v13-hinge-arrive-backward;
    --v13-leave-origin: center bottom;
    --v13-arrive-origin: center top;
    --v13-art-y: -16px;
  }

  /* The shared engine: V13 choreographs single items, so the block-level stage motion stands down. */
  html[data-motion="soft"][data-stage-system="v13"] [data-scroll-stage].is-stage-leaving [data-stage-content],
  html[data-motion="soft"][data-stage-system="v13"] [data-scroll-stage].is-stage-arriving [data-stage-content] {
    animation: none !important;
  }

  html[data-motion="soft"][data-stage-system="v13"] [data-scroll-stage].is-stage-arriving [data-reveal],
  html[data-motion="soft"][data-stage-system="v13"] [data-scroll-stage].is-stage-arriving [data-stage-art-media] {
    transition: none !important;
  }

  html[data-motion="soft"][data-stage-system="v13"] [data-scroll-stage].is-stage-leaving [data-stage-item],
  html[data-motion="soft"][data-stage-system="v13"] [data-scroll-stage].is-stage-arriving [data-stage-item] {
    animation-iteration-count: 1 !important;
    animation-direction: normal !important;
    animation-fill-mode: both;
    animation-play-state: running !important;
    backface-visibility: hidden;
    translate: none;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-stage-system="v13"] [data-scroll-stage].is-stage-leaving [data-stage-item] {
    animation-name: var(--v13-leave-name);
    animation-duration: var(--v13-leave-duration, 540ms);
    animation-delay: calc(var(--v13-leave-lead, 0ms) + var(--stage-exit-delay, 0ms) * var(--v13-exit-scale, 1));
    animation-timing-function: var(--v13-leave-ease, cubic-bezier(0.4, 0, 0.3, 1));
    transform-origin: var(--v13-leave-origin, center 52%);
  }

  html[data-motion="soft"][data-stage-system="v13"] [data-scroll-stage].is-stage-arriving [data-stage-item] {
    animation-name: var(--v13-arrive-name);
    animation-duration: var(--v13-arrive-duration, 760ms);
    animation-delay: calc(var(--v13-arrive-lead, 220ms) + var(--stage-enter-delay, 0ms) * var(--v13-enter-scale, 1));
    animation-timing-function: var(--v13-arrive-ease, cubic-bezier(0.22, 0.72, 0.28, 1));
    transform-origin: var(--v13-arrive-origin, center 52%);
  }

  html[data-motion="soft"][data-stage-system="v13"][data-scroll-effect="aperture"] [data-scroll-stage].is-stage-leaving [data-stage-item],
  html[data-motion="soft"][data-stage-system="v13"][data-scroll-effect="aperture"] [data-scroll-stage].is-stage-arriving [data-stage-item] {
    will-change: transform, opacity, clip-path;
  }

  html[data-motion="soft"][data-stage-system="v13"] [data-scroll-stage].is-stage-arriving [data-stage-art-media] {
    animation-name: v13-art-settle;
    animation-duration: 600ms;
    animation-delay: calc(220ms + var(--stage-art-delay, 0ms));
    animation-timing-function: cubic-bezier(0.18, 0.82, 0.24, 1);
    animation-iteration-count: 1 !important;
    animation-direction: normal !important;
    animation-fill-mode: both;
    animation-play-state: running !important;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }

  /* The opening stage is not a registered stage item, so it keeps its own tuned sequence. */
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner {
    animation: none !important;
  }

  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning .top-benefits .benefit-card::before,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning .top-benefits .benefit-card::after,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning .top-benefits .benefit-icon,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning .top-benefits .benefits-scroll-arrow svg {
    animation: none !important;
  }

  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning .top-benefits .benefit-icon,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning .top-benefits .benefits-scroll-arrow svg {
    transform: translate3d(0, 0, 0) scale(1);
  }

  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .hero-copy > *,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .hero-media,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > *,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .hero-copy > *,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .hero-media,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > * {
    animation-iteration-count: 1 !important;
    animation-direction: normal !important;
    animation-fill-mode: both;
    animation-play-state: running !important;
    animation-duration: 560ms;
    backface-visibility: hidden;
    translate: none !important;
    transition: none !important;
    will-change: transform, opacity;
  }

  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .hero-copy > *,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .hero-media,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > * {
    animation-name: var(--v13-leave-name);
    animation-timing-function: var(--v13-leave-ease, cubic-bezier(0.4, 0, 0.3, 1));
    transform-origin: var(--v13-leave-origin, center 52%);
  }

  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(1) { animation-delay: 0ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(2) { animation-delay: 28ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(3) { animation-delay: 56ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(4) { animation-delay: 84ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .hero-copy > :nth-child(5) { animation-delay: 112ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .hero-media { animation-delay: 36ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(1) { animation-delay: 70ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(2) { animation-delay: 98ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(3) { animation-delay: 126ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(4) { animation-delay: 154ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-from="top"] .top-benefits-inner > :nth-child(5) { animation-delay: 182ms; }

  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .hero-copy > *,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .hero-media,
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > * {
    animation-name: var(--v13-arrive-name);
    animation-timing-function: var(--v13-arrive-ease, cubic-bezier(0.16, 1, 0.3, 1));
    transform-origin: var(--v13-arrive-origin, center 52%);
  }

  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(1) { animation-delay: 120ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(2) { animation-delay: 152ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(3) { animation-delay: 184ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(4) { animation-delay: 216ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .top-benefits-inner > :nth-child(5) { animation-delay: 248ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(1) { animation-delay: 250ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(2) { animation-delay: 282ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(3) { animation-delay: 314ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(4) { animation-delay: 346ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .hero-copy > :nth-child(5) { animation-delay: 378ms; }
  html[data-motion="soft"][data-stage-system="v13"].is-stage-transitioning[data-stage-to="top"] .hero-media { animation-delay: 280ms; }
}

@keyframes v13-art-settle {
  0% {
    opacity: 0.5;
    transform: translate3d(0, var(--v13-art-y, 18px), 0) scale(var(--v13-art-scale, 0.98));
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Blende keeps the box generously unclipped at rest so shadows never get cut mid-transition. */
@keyframes v13-aperture-arrive-forward {
  from {
    opacity: 0;
    clip-path: inset(94% -14% -40% -14%);
    transform: translate3d(0, 20px, 0) scale(1.018);
  }
  to {
    opacity: 1;
    clip-path: inset(-40% -14% -40% -14%);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes v13-aperture-leave-forward {
  from {
    opacity: 1;
    clip-path: inset(-40% -14% -40% -14%);
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    clip-path: inset(-40% -14% 94% -14%);
    transform: translate3d(0, -14px, 0) scale(0.995);
  }
}

@keyframes v13-aperture-arrive-backward {
  from {
    opacity: 0;
    clip-path: inset(-40% -14% 94% -14%);
    transform: translate3d(0, -20px, 0) scale(1.018);
  }
  to {
    opacity: 1;
    clip-path: inset(-40% -14% -40% -14%);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes v13-aperture-leave-backward {
  from {
    opacity: 1;
    clip-path: inset(-40% -14% -40% -14%);
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    clip-path: inset(94% -14% -40% -14%);
    transform: translate3d(0, 14px, 0) scale(0.995);
  }
}

@keyframes v13-undertow-arrive-forward {
  from { opacity: 0; transform: translate3d(0, var(--v13-travel, 16px), 0) scale(0.993); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v13-undertow-leave-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, calc(var(--v13-travel, 16px) * -0.75), 0) scale(0.996); }
}

@keyframes v13-undertow-arrive-backward {
  from { opacity: 0; transform: translate3d(0, calc(var(--v13-travel, 16px) * -1), 0) scale(0.993); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes v13-undertow-leave-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, calc(var(--v13-travel, 16px) * 0.75), 0) scale(0.996); }
}

@keyframes v13-hinge-arrive-forward {
  from { opacity: 0; transform: perspective(1500px) translate3d(0, 24px, 0) rotateX(5deg) scale(0.988); }
  to { opacity: 1; transform: perspective(1500px) translate3d(0, 0, 0) rotateX(0deg) scale(1); }
}

@keyframes v13-hinge-leave-forward {
  from { opacity: 1; transform: perspective(1500px) translate3d(0, 0, 0) rotateX(0deg) scale(1); }
  to { opacity: 0; transform: perspective(1500px) translate3d(0, -16px, 0) rotateX(-4deg) scale(0.992); }
}

@keyframes v13-hinge-arrive-backward {
  from { opacity: 0; transform: perspective(1500px) translate3d(0, -24px, 0) rotateX(-5deg) scale(0.988); }
  to { opacity: 1; transform: perspective(1500px) translate3d(0, 0, 0) rotateX(0deg) scale(1); }
}

@keyframes v13-hinge-leave-backward {
  from { opacity: 1; transform: perspective(1500px) translate3d(0, 0, 0) rotateX(0deg) scale(1); }
  to { opacity: 0; transform: perspective(1500px) translate3d(0, 16px, 0) rotateX(4deg) scale(0.992); }
}

/* Desktop cue-safe layout: the fixed next-section control owns the final 92px of the
   viewport (20px edge inset + 54px control + 18px breathing room). The stage grids
   finish above that band instead of relying on a stronger translucent cue surface. */
:root {
  --cue-viewport-reserve: calc(54px + max(20px, env(safe-area-inset-bottom)) + var(--cue-clearance) + 1px);
}

@media (min-width: 901px) {
  /* Native hash restoration used the global header offset although every fullscreen
     stage already carries its own top padding. A stage now lands at the same y=0 used
     by the Lenis section controller, including after a reload on a section hash. */
  html:has(body[data-site-version="new"]) {
    scroll-padding-top: 0;
  }

  body[data-site-version="new"] .services-section {
    --services-stage-top: 119px;
  }

  .services-stage-shell {
    height: calc(100svh - var(--services-stage-top) - var(--cue-viewport-reserve));
    min-height: 0;
    grid-template-rows: 202px minmax(340px, 472px) 116px;
    align-content: start;
  }

  body[data-site-version="new"] .services-stage-list {
    height: 100%;
  }

  body[data-site-version="new"] .process-inner {
    padding-bottom: max(clamp(48px, 4.5vh, 68px), var(--cue-viewport-reserve));
  }

  body[data-site-version="new"] .home-seo-locations {
    --locations-stage-top: 159px;
    padding-top: var(--locations-stage-top);
  }

  .locations-v10-shell {
    height: calc(100svh - var(--locations-stage-top) - var(--cue-viewport-reserve));
    min-height: 0;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  body[data-site-version="new"] .services-section {
    --services-stage-top: 110px;
  }

  .services-stage-shell {
    grid-template-rows: 175px minmax(340px, 430px) 104px;
    gap: 18px;
  }

  body[data-site-version="new"] .home-seo-locations {
    --locations-stage-top: 124px;
  }
}

/* Short fullscreen desktops need a denser middle plane as well as the reserved cue band.
   Copy and controls keep their size; only the illustration rows and surplus whitespace
   contract, which avoids introducing a second miniature breakpoint design. */
@media (max-height: 940px) and (min-width: 1181px) {
  body[data-site-version="new"] .services-section {
    --services-stage-top: 111px;
  }

  .services-stage-shell {
    grid-template-rows: 165px minmax(350px, 400px) 102px;
    gap: 15px;
  }

  body[data-site-version="new"] .services-stage-list {
    height: 100%;
  }

  body[data-site-version="new"] .home-seo-locations {
    --locations-stage-top: 128px;
  }

  .locations-v10-shell {
    grid-template-rows: minmax(500px, 1fr) 150px;
    gap: 24px;
  }

  .locations-v10-map {
    height: 496px;
  }

  .locations-v10-benefits {
    min-height: 150px;
    padding-block: 10px;
  }
}

@media (max-height: 940px) and (min-width: 901px) {
  .project-stage-inner {
    padding-top: 140px;
  }

  .project-section-heading {
    margin-bottom: 42px;
  }

  .project-scene {
    height: 372px;
  }
}

@media (max-height: 940px) and (max-width: 1180px) and (min-width: 901px) {
  .services-stage-shell {
    grid-template-rows: 165px minmax(340px, 399px) 104px;
    gap: 15px;
  }
}

@media (max-height: 870px) and (min-width: 1181px) {
  body[data-site-version="new"] .home-seo-locations {
    --locations-stage-top: 112px;
  }

  .locations-v10-shell {
    grid-template-rows: minmax(470px, 1fr) 150px;
    gap: 20px;
  }

  .locations-v10-map {
    height: 466px;
  }

  body[data-site-version="new"] .home-seo-locations .locations-v10-copy h2 {
    margin-top: 32px;
  }

  .locations-v10-actions {
    margin-top: 30px;
  }
}

@media (max-height: 850px) and (min-width: 901px) {
  .project-stage-inner {
    padding-top: 126px;
  }

  .project-section-heading {
    margin-bottom: 34px;
  }

  .project-scene {
    height: 350px;
  }

  body[data-site-version="new"] .process-inner {
    grid-template-rows: auto minmax(300px, 1fr) auto;
  }
}

/* Homepage V14: five quieter, editorial lower chapters. The illustrations act as
   wayfinding objects; structure, rhythm and type carry the sections. */
.lower-stage-v14 {
  --v14-stage-width: min(1900px, 87.5vw);
  --v14-cue-reserve: calc(var(--cue-viewport-reserve) + 2px);
  --v14-ink: #071f20;
  --v14-muted: #66746e;
  --v14-line: rgba(20, 77, 45, 0.11);
  --v14-green: #18aa43;
  --v14-soft-ease: cubic-bezier(0.22, 0.72, 0.28, 1);
}

.lower-stage-v14 h2,
.lower-stage-v14 h3,
.lower-stage-v14 p {
  text-wrap: pretty;
}

.lower-stage-v14 h2 span {
  color: var(--v14-green);
}

/* Process: one continuous route instead of one oversized hero illustration. */
body[data-site-version="new"] .process-section.lower-stage-v14 {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 78%, rgba(220, 244, 208, 0.6), transparent 25%),
    radial-gradient(circle at 92% 18%, rgba(222, 241, 255, 0.55), transparent 24%),
    #fff;
  color: var(--v14-ink);
}

body[data-site-version="new"] .process-section.lower-stage-v14::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(19, 88, 47, 0.065) 0.7px, transparent 0.7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  opacity: 0.34;
  pointer-events: none;
}

body[data-site-version="new"] .process-inner.process-v14-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: var(--v14-stage-width);
  height: 100svh;
  min-height: 0;
  margin-inline: auto;
  padding: clamp(116px, 12vh, 142px) 0 var(--v14-cue-reserve);
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(22px, 3vh, 34px);
  align-items: stretch;
}

.process-v14-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.52fr);
  gap: clamp(44px, 8vw, 124px);
  align-items: end;
}

.process-v14-heading .eyebrow {
  margin-bottom: 12px;
}

.process-v14-heading h2 {
  max-width: 13ch;
  margin: 0;
  color: var(--v14-ink);
  font-size: clamp(52px, 4.55vw, 76px);
  line-height: 0.97;
  letter-spacing: -0.058em;
}

.process-v14-heading > p {
  max-width: 33ch;
  margin: 0 0 8px;
  color: var(--v14-muted);
  font-size: clamp(15px, 1.18vw, 19px);
  line-height: 1.58;
}

.process-v14-route {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(26, 103, 54, 0.07);
  border-radius: clamp(32px, 3vw, 48px);
  background:
    radial-gradient(circle at 14% 30%, rgba(225, 247, 211, 0.86), transparent 30%),
    radial-gradient(circle at 52% 15%, rgba(226, 244, 255, 0.9), transparent 31%),
    radial-gradient(circle at 88% 78%, rgba(236, 230, 255, 0.7), transparent 28%),
    linear-gradient(125deg, #f9fcf6, #fbfdfb 55%, #f7fbfb);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 24px 70px rgba(27, 83, 49, 0.075);
}

.process-v14-route::after {
  content: "";
  position: absolute;
  inset: auto 4% 0;
  height: 34%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.82));
  pointer-events: none;
}

.process-v14-line {
  position: absolute;
  z-index: 0;
  top: clamp(118px, 14vh, 154px);
  left: 4%;
  width: 92%;
  height: 116px;
  overflow: visible;
  fill: none;
  stroke: rgba(28, 167, 68, 0.34);
  stroke-dasharray: 7 10;
  stroke-linecap: round;
  stroke-width: 2;
}

.process-v14-steps {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  margin: 0;
  padding: 18px clamp(24px, 3vw, 50px) 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.7vw, 54px);
  list-style: none;
}

.process-v14-steps > li {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: minmax(190px, 1fr) auto;
  align-items: end;
}

.process-v14-art {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
}

.process-v14-art::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 12px;
  height: 12px;
  border: 4px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  background: #18a943;
  box-shadow: 0 5px 14px rgba(22, 143, 57, 0.24);
  transform: translateX(-50%);
}

.process-v14-art img {
  --v14-station-y: 0%;
  display: block;
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(27, 77, 47, 0.14));
  translate: 0 var(--v14-station-y);
}

.process-v14-art-call img {
  --v14-station-y: 4%;
  width: clamp(176px, 15.5vw, 254px);
}

.process-v14-art-visit img {
  --v14-station-y: 7%;
  width: clamp(270px, 23vw, 385px);
}

.process-v14-art-result img {
  --v14-station-y: 13%;
  width: clamp(340px, 29vw, 485px);
}

.process-v14-copy {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 104px;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 20px 6px 2px;
  border-top: 1px solid rgba(20, 77, 45, 0.12);
}

.process-v14-number {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.84);
  color: #159b3d;
  box-shadow: 0 8px 20px rgba(20, 92, 44, 0.1);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.05em;
}

.process-v14-copy h3 {
  margin: 0;
  color: #0c2922;
  font-size: clamp(18px, 1.42vw, 23px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.process-v14-copy p {
  max-width: 33ch;
  margin: 8px 0 0;
  color: #68766f;
  font-size: clamp(11px, 0.82vw, 13.5px);
  line-height: 1.5;
}

/* Guided digital check. */
body[data-site-version="new"] .ai-section.lower-stage-v14 {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(220, 223, 255, 0.58), transparent 29%),
    radial-gradient(circle at 8% 80%, rgba(219, 247, 218, 0.64), transparent 26%),
    #fafbfa;
}

.ai-v14-shell {
  display: grid;
  width: var(--v14-stage-width);
  height: 100svh;
  min-height: 0;
  margin-inline: auto;
  padding: clamp(116px, 12vh, 142px) 0 var(--v14-cue-reserve);
  grid-template-columns: minmax(360px, 0.78fr) minmax(560px, 1.22fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}

.ai-v14-copy h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--v14-ink);
  font-size: clamp(50px, 4.45vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.058em;
}

.ai-v14-copy > p:not(.eyebrow) {
  max-width: 41ch;
  margin: 26px 0 0;
  color: var(--v14-muted);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.62;
}

.ai-v14-actions {
  display: grid;
  justify-items: start;
  margin-top: 32px;
}

.ai-v14-actions .button {
  min-width: min(100%, 292px);
  min-height: 58px;
  justify-content: space-between;
  margin: 0;
  padding-inline: 24px 18px;
}

.ai-v14-actions .button span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #12983a;
  font-size: 19px;
}

.ai-v14-actions small {
  margin-top: 13px;
  color: #7b8781;
  font-size: 10.5px;
}

.ai-v14-canvas {
  position: relative;
  height: min(650px, calc(100svh - 226px));
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(65, 62, 136, 0.07);
  border-radius: clamp(34px, 3vw, 50px);
  background:
    radial-gradient(circle at 88% 12%, rgba(205, 194, 255, 0.62), transparent 34%),
    radial-gradient(circle at 20% 86%, rgba(205, 244, 213, 0.84), transparent 35%),
    linear-gradient(135deg, #f8f8ff, #f3f8f5 58%, #f9fcf8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 28px 80px rgba(31, 62, 48, 0.085);
}

.ai-v14-canvas::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -16%;
  width: 58%;
  aspect-ratio: 1;
  border: 1px solid rgba(118, 92, 222, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 46px rgba(255, 255, 255, 0.12), 0 0 0 92px rgba(255, 255, 255, 0.08);
}

.ai-v14-live {
  position: absolute;
  z-index: 3;
  top: clamp(28px, 4vh, 46px);
  left: clamp(28px, 3.5vw, 54px);
  display: flex;
  align-items: center;
  gap: 9px;
  color: #426051;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.015em;
}

.ai-v14-live span {
  width: 9px;
  height: 9px;
  border: 2px solid #d9f5df;
  border-radius: 50%;
  background: #18ac43;
  box-shadow: 0 0 0 4px rgba(24, 172, 67, 0.08);
}

.ai-v14-prompts {
  position: absolute;
  z-index: 3;
  top: 18%;
  left: clamp(24px, 3.5vw, 54px);
  width: min(68%, 520px);
  margin: 0;
  padding: 0 22px;
  overflow: hidden;
  border: 1px solid rgba(57, 79, 67, 0.075);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 46px rgba(42, 69, 53, 0.08), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  list-style: none;
}

.ai-v14-prompts li {
  display: grid;
  min-height: 92px;
  grid-template-columns: 34px 1fr 30px;
  gap: 12px;
  align-items: center;
}

.ai-v14-prompts li + li {
  border-top: 1px solid rgba(44, 81, 59, 0.09);
}

.ai-v14-prompts li > span {
  color: #8b7dd5;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.ai-v14-prompts strong,
.ai-v14-prompts small {
  display: block;
}

.ai-v14-prompts strong {
  color: #17302a;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.25;
}

.ai-v14-prompts small {
  margin-top: 4px;
  color: #75817b;
  font-size: clamp(9.5px, 0.74vw, 11px);
}

.ai-v14-prompts i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #e9f7e8;
  color: #17a741;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.ai-v14-prompts li:last-child i {
  background: #eeeaff;
  color: #7655de;
}

.ai-v14-duration {
  position: absolute;
  z-index: 3;
  left: clamp(30px, 3.8vw, 58px);
  bottom: clamp(30px, 4.5vh, 52px);
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-v14-duration strong {
  color: #159e3e;
  font-size: clamp(26px, 2.1vw, 35px);
  line-height: 1;
  letter-spacing: -0.05em;
}

.ai-v14-duration span {
  color: #718078;
  font-size: 10.5px;
  line-height: 1.35;
}

.ai-v14-robot {
  position: absolute;
  z-index: 2;
  right: clamp(-74px, -3.7vw, -34px);
  bottom: clamp(-108px, -8vh, -64px);
  width: clamp(280px, 23vw, 410px);
  max-width: none;
  height: auto;
  filter: drop-shadow(0 26px 24px rgba(75, 54, 128, 0.17));
}

/* Quality: a darker proof chapter with open rows, not boxed feature cards. */
body[data-site-version="new"] .assurance-section.lower-stage-v14 {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 10% 80%, rgba(61, 177, 91, 0.18), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(107, 197, 131, 0.11), transparent 28%),
    linear-gradient(135deg, #0d3827, #0a2f22 58%, #0b3423);
  color: #fff;
}

body[data-site-version="new"] .assurance-section.lower-stage-v14::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 25% 55%, #000, transparent 65%);
}

.quality-v14-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: var(--v14-stage-width);
  height: 100svh;
  min-height: 0;
  margin-inline: auto;
  padding: clamp(116px, 12vh, 142px) 0 var(--v14-cue-reserve);
  grid-template-columns: minmax(390px, 0.88fr) minmax(520px, 1.12fr);
  gap: clamp(64px, 9vw, 148px);
  align-items: center;
}

.quality-v14-intro h2 {
  max-width: 13ch;
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 4.25vw, 70px);
  line-height: 0.99;
  letter-spacing: -0.055em;
}

.quality-v14-intro h2 span {
  color: #7dde8f;
}

.quality-v14-intro > div:first-child > p:last-child {
  max-width: 39ch;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(14px, 1.08vw, 17px);
  line-height: 1.62;
}

.quality-v14-seal {
  position: relative;
  display: flex;
  width: min(100%, 420px);
  min-height: 148px;
  align-items: center;
  gap: 24px;
  margin-top: clamp(30px, 5vh, 48px);
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.quality-v14-seal img {
  position: relative;
  z-index: 2;
  width: clamp(92px, 8vw, 126px);
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.2));
}

.quality-v14-rings {
  position: absolute;
  left: -15px;
  width: 144px;
  aspect-ratio: 1;
  border: 1px solid rgba(132, 231, 149, 0.17);
  border-radius: 50%;
  box-shadow: 0 0 0 17px rgba(132, 231, 149, 0.035), 0 0 0 34px rgba(132, 231, 149, 0.02);
}

.quality-v14-seal > span:last-child strong,
.quality-v14-seal > span:last-child small {
  display: block;
}

.quality-v14-seal > span:last-child strong {
  font-size: 16px;
}

.quality-v14-seal > span:last-child small {
  max-width: 20ch;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  line-height: 1.45;
}

.quality-v14-standards {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
}

.quality-v14-standards li {
  display: grid;
  min-height: 152px;
  grid-template-columns: 42px 64px 1fr;
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
  padding: clamp(22px, 3vh, 34px) 4px;
}

.quality-v14-standards li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.quality-v14-index {
  align-self: start;
  padding-top: 9px;
  color: rgba(157, 226, 170, 0.58);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.quality-v14-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.quality-v14-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #80e394;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.quality-v14-standards h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 1.65vw, 27px);
  letter-spacing: -0.035em;
}

.quality-v14-standards p {
  max-width: 39ch;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(12px, 0.92vw, 14px);
  line-height: 1.55;
}

/* FAQ: numbered editorial rows with a single calm open answer. */
body[data-site-version="new"] .faq-section.lower-stage-v14 {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 4% 92%, rgba(225, 246, 214, 0.65), transparent 27%),
    radial-gradient(circle at 94% 8%, rgba(229, 239, 255, 0.58), transparent 27%),
    #fcfdfb;
}

.faq-v14-shell {
  display: grid;
  width: var(--v14-stage-width);
  height: 100svh;
  min-height: 0;
  margin-inline: auto;
  padding: clamp(116px, 12vh, 142px) 0 var(--v14-cue-reserve);
  grid-template-columns: minmax(330px, 0.72fr) minmax(580px, 1.28fr);
  gap: clamp(64px, 9vw, 148px);
  align-items: center;
}

.faq-v14-intro {
  position: static;
  align-self: center;
}

.faq-v14-intro h2 {
  max-width: 10ch;
  margin: 0;
  color: var(--v14-ink);
  font-size: clamp(50px, 4.45vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.058em;
}

.faq-v14-intro > p:not(.eyebrow) {
  max-width: 34ch;
  margin: 25px 0 0;
  color: var(--v14-muted);
  font-size: clamp(14px, 1.03vw, 17px);
  line-height: 1.6;
}

.faq-v14-call {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  color: #118f36;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.faq-v14-call span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #e9f6e7;
  transition: transform 320ms var(--v14-soft-ease);
}

.faq-v14-call:hover span {
  transform: translate3d(2px, -2px, 0);
}

.faq-list.faq-v14-list {
  border-top: 1px solid var(--v14-line);
}

.faq-v14-list details {
  border-bottom: 1px solid var(--v14-line);
}

.faq-v14-list summary {
  position: relative;
  display: grid;
  min-height: 82px;
  grid-template-columns: 42px 1fr 40px;
  gap: 18px;
  align-items: center;
  padding: 13px 0;
  color: #143028;
  cursor: pointer;
  list-style: none;
}

.faq-v14-list summary::-webkit-details-marker {
  display: none;
}

.faq-v14-list summary::before,
.faq-v14-list summary::after {
  display: none;
}

.faq-v14-list summary > span {
  color: #75a382;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  transition: color 320ms var(--v14-soft-ease);
}

.faq-v14-list summary strong {
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 790;
  letter-spacing: -0.027em;
}

.faq-v14-list summary i {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(24, 117, 52, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 7px 18px rgba(27, 77, 47, 0.07);
  transition: background-color 320ms var(--v14-soft-ease), transform 420ms var(--v14-soft-ease);
}

.faq-v14-list summary i::before,
.faq-v14-list summary i::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 1.5px;
  border-radius: 2px;
  background: #16a33f;
}

.faq-v14-list summary i::after {
  transform: rotate(90deg);
}

.faq-v14-list details[open] summary > span {
  color: #16a33f;
}

.faq-v14-list details[open] summary i {
  background: #e9f7e8;
  transform: rotate(45deg);
}

.faq-v14-answer {
  display: grid;
  grid-template-rows: 1fr;
}

.faq-v14-answer p {
  max-width: 67ch;
  margin: -2px 0 0;
  padding: 0 58px 25px 60px;
  color: #68766f;
  font-size: clamp(12px, 0.92vw, 14px);
  line-height: 1.62;
}

/* Contact: a single confident closing poster with a human anchor. */
body[data-site-version="new"] .final-cta.lower-stage-v14 {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: clamp(112px, 11.5vh, 136px) 0 var(--v14-cue-reserve);
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(circle at 10% 18%, rgba(220, 245, 211, 0.62), transparent 23%),
    #f7faf6;
  color: #fff;
}

body[data-site-version="new"] .final-cta.lower-stage-v14::after {
  display: none;
}

.contact-v14-shell {
  position: relative;
  display: grid;
  width: var(--v14-stage-width);
  height: calc(100svh - clamp(112px, 11.5vh, 136px) - var(--v14-cue-reserve));
  min-height: 590px;
  margin-inline: auto;
  padding: clamp(44px, 5vw, 76px) clamp(42px, 5vw, 78px) 28px;
  grid-template-columns: minmax(410px, 0.86fr) minmax(520px, 1.14fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(44px, 6vw, 96px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: clamp(36px, 3.2vw, 52px);
  background:
    radial-gradient(circle at 87% 17%, rgba(97, 211, 123, 0.22), transparent 30%),
    radial-gradient(circle at 43% 120%, rgba(60, 167, 88, 0.18), transparent 38%),
    linear-gradient(135deg, #0e472e, #0a3726 56%, #082e21);
  box-shadow: 0 28px 80px rgba(23, 73, 42, 0.15);
}

.contact-v14-shell::before {
  content: "";
  position: absolute;
  right: -9%;
  bottom: -34%;
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid rgba(142, 226, 158, 0.11);
  border-radius: 50%;
  box-shadow: 0 0 0 58px rgba(142, 226, 158, 0.025), 0 0 0 116px rgba(142, 226, 158, 0.015);
}

.contact-v14-copy {
  position: relative;
  z-index: 3;
  align-self: center;
}

.contact-v14-copy h2 {
  max-width: 12.5ch;
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 4.3vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.058em;
}

.contact-v14-copy h2 span {
  color: #82e493;
}

.contact-v14-copy > p:not(.eyebrow) {
  max-width: 42ch;
  margin: 25px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(14px, 1.06vw, 17px);
  line-height: 1.6;
}

.contact-v14-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}

.contact-v14-actions .button {
  min-height: 58px;
  gap: 30px;
  padding-inline: 24px 18px;
}

.contact-v14-actions .button span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #e9f7e8;
  color: #159b3d;
  font-size: 18px;
}

.contact-v14-actions a:not(.button) {
  gap: 9px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
}

.contact-v14-actions a:not(.button) span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: #8de29c;
  font-size: 13px;
}

.contact-v14-art {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-height: 0;
}

.contact-v14-art img {
  position: absolute;
  z-index: 2;
  right: -2%;
  bottom: -2%;
  width: min(760px, 112%);
  max-width: none;
  height: auto;
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.24));
}

.contact-v14-ground {
  position: absolute;
  z-index: 1;
  right: -8%;
  bottom: 1%;
  width: 116%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(99, 205, 118, 0.22), transparent 66%);
  filter: blur(8px);
}

.contact-v14-response {
  position: absolute;
  z-index: 4;
  top: 5%;
  right: 0;
  display: grid;
  min-width: 210px;
  grid-template-columns: 12px 1fr;
  gap: 2px 10px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 16px 36px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.contact-v14-response > span {
  grid-row: 1 / 3;
  width: 9px;
  height: 9px;
  align-self: center;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: #74e18a;
}

.contact-v14-response strong,
.contact-v14-response small {
  display: block;
}

.contact-v14-response strong {
  color: #fff;
  font-size: 11px;
}

.contact-v14-response small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 9.5px;
}

.contact-v14-meta {
  position: relative;
  z-index: 4;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.contact-v14-meta span {
  position: relative;
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 14px 24px 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10.5px;
  font-weight: 730;
  letter-spacing: 0.015em;
}

.contact-v14-meta span::before {
  content: "✓";
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  margin-right: 10px;
  border-radius: 50%;
  background: rgba(132, 228, 148, 0.12);
  color: #83e596;
  font-size: 10px;
}

.contact-v14-meta span + span {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Resting motion is deliberately sparse: the page transition remains the primary gesture. */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"] .process-section.is-stage-current .process-v14-art img {
    animation: v14-station-breathe 8s ease-in-out infinite;
  }

  html[data-motion="soft"] .process-section.is-stage-current .process-v14-steps li:nth-child(2) img {
    animation-delay: -2.7s;
  }

  html[data-motion="soft"] .process-section.is-stage-current .process-v14-steps li:nth-child(3) img {
    animation-delay: -5.4s;
  }

  html[data-motion="soft"] .ai-section.is-stage-current .ai-v14-robot {
    animation: v14-robot-breathe 7.5s ease-in-out infinite;
  }

  html[data-motion="soft"] .ai-section.is-stage-current .ai-v14-live span,
  html[data-motion="soft"] .final-cta.is-stage-current .contact-v14-response > span {
    animation: v14-status-pulse 3.8s ease-out infinite;
  }
}

@keyframes v14-station-breathe {
  0%, 100% { translate: 0 var(--v14-station-y); }
  50% { translate: 0 calc(var(--v14-station-y) - 5px); }
}

@keyframes v14-robot-breathe {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -6px; rotate: -0.45deg; }
}

@keyframes v14-status-pulse {
  0%, 58%, 100% { box-shadow: 0 0 0 4px rgba(24, 172, 67, 0.08); }
  76% { box-shadow: 0 0 0 10px rgba(24, 172, 67, 0); }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .lower-stage-v14 {
    --v14-stage-width: calc(100% - 48px);
  }

  body[data-site-version="new"] .process-inner.process-v14-shell,
  .ai-v14-shell,
  .quality-v14-shell,
  .faq-v14-shell {
    padding-top: 112px;
  }

  .process-v14-heading,
  .ai-v14-shell,
  .quality-v14-shell,
  .faq-v14-shell {
    gap: 44px;
  }

  .process-v14-heading h2,
  .ai-v14-copy h2,
  .faq-v14-intro h2 {
    font-size: 54px;
  }

  .quality-v14-intro h2,
  .contact-v14-copy h2 {
    font-size: 52px;
  }

  .ai-v14-shell {
    grid-template-columns: minmax(310px, 0.72fr) minmax(500px, 1.28fr);
  }

  .quality-v14-shell {
    grid-template-columns: minmax(340px, 0.8fr) minmax(480px, 1.2fr);
  }

  .faq-v14-shell {
    grid-template-columns: minmax(300px, 0.68fr) minmax(500px, 1.32fr);
  }

  .contact-v14-shell {
    grid-template-columns: minmax(360px, 0.82fr) minmax(450px, 1.18fr);
    column-gap: 34px;
  }

  .contact-v14-art img {
    right: -8%;
    width: 118%;
  }
}

@media (max-height: 940px) and (min-width: 901px) {
  body[data-site-version="new"] .process-inner.process-v14-shell,
  .ai-v14-shell,
  .quality-v14-shell,
  .faq-v14-shell {
    padding-top: 108px;
  }

  .process-v14-heading h2,
  .ai-v14-copy h2,
  .faq-v14-intro h2 {
    font-size: clamp(48px, 4vw, 62px);
  }

  .quality-v14-intro h2,
  .contact-v14-copy h2 {
    font-size: clamp(46px, 3.8vw, 59px);
  }

  .process-v14-route {
    min-height: 390px;
  }

  .process-v14-steps > li {
    grid-template-rows: minmax(174px, 1fr) auto;
  }

  .process-v14-copy {
    min-height: 94px;
    padding-top: 16px;
  }

  .ai-v14-canvas {
    height: calc(100svh - 220px);
    min-height: 510px;
  }

  .quality-v14-standards li {
    min-height: 132px;
    padding-block: 20px;
  }

  .faq-v14-list summary {
    min-height: 72px;
  }

  .faq-v14-answer p {
    padding-bottom: 17px;
  }

  body[data-site-version="new"] .final-cta.lower-stage-v14 {
    padding-top: 108px;
  }

  .contact-v14-shell {
    height: calc(100svh - 108px - var(--v14-cue-reserve));
    min-height: 570px;
  }
}

@media (max-width: 900px) {
  .lower-stage-v14 {
    --v14-stage-width: min(760px, calc(100% - 32px));
  }

  body[data-site-version="new"] .process-section.lower-stage-v14,
  body[data-site-version="new"] .ai-section.lower-stage-v14,
  body[data-site-version="new"] .assurance-section.lower-stage-v14,
  body[data-site-version="new"] .faq-section.lower-stage-v14,
  body[data-site-version="new"] .final-cta.lower-stage-v14 {
    min-height: 0;
  }

  body[data-site-version="new"] .process-inner.process-v14-shell,
  .ai-v14-shell,
  .quality-v14-shell,
  .faq-v14-shell {
    width: var(--v14-stage-width);
    height: auto;
    min-height: 0;
    padding: 94px 0 104px;
  }

  .process-v14-heading,
  .ai-v14-shell,
  .quality-v14-shell,
  .faq-v14-shell {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .process-v14-heading > p {
    max-width: 46ch;
  }

  .process-v14-route {
    min-height: 0;
  }

  .process-v14-line {
    display: none;
  }

  .process-v14-steps {
    height: auto;
    padding: 12px 28px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .process-v14-steps > li {
    min-height: 250px;
    grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: 1fr;
    align-items: center;
  }

  .process-v14-steps > li + li {
    border-top: 1px solid rgba(20, 77, 45, 0.1);
  }

  .process-v14-art {
    height: 240px;
  }

  .process-v14-art::after {
    display: none;
  }

  .process-v14-art-call img {
    width: 205px;
  }

  .process-v14-art-visit img {
    width: 320px;
  }

  .process-v14-art-result img {
    width: 390px;
  }

  .process-v14-copy {
    min-height: 0;
    padding: 22px 6px 22px 26px;
    border-top: 0;
    border-left: 1px solid rgba(20, 77, 45, 0.1);
  }

  .ai-v14-copy {
    max-width: 650px;
    order: 0;
  }

  .ai-v14-canvas {
    height: 620px;
    min-height: 0;
    order: 1;
  }

  .quality-v14-seal {
    margin-top: 32px;
  }

  .quality-v14-standards {
    width: 100%;
  }

  .faq-v14-intro > p:not(.eyebrow) {
    max-width: 46ch;
  }

  body[data-site-version="new"] .final-cta.lower-stage-v14 {
    min-height: 0;
    padding: 92px 0 104px;
  }

  .contact-v14-shell {
    width: var(--v14-stage-width);
    height: auto;
    min-height: 0;
    padding: 54px 48px 28px;
    grid-template-columns: 1fr;
    grid-template-rows: auto 470px auto;
    gap: 28px;
  }

  .contact-v14-copy {
    max-width: 660px;
  }

  .contact-v14-art img {
    right: 50%;
    width: min(690px, 104%);
    translate: 50% 0;
  }

  .contact-v14-response {
    top: 2%;
    right: 4%;
  }
}

@media (max-width: 620px) {
  .lower-stage-v14 {
    --v14-stage-width: calc(100% - 24px);
  }

  body[data-site-version="new"] .process-inner.process-v14-shell,
  .ai-v14-shell,
  .quality-v14-shell,
  .faq-v14-shell {
    padding: 78px 0 92px;
  }

  .process-v14-heading h2,
  .ai-v14-copy h2,
  .quality-v14-intro h2,
  .faq-v14-intro h2,
  .contact-v14-copy h2 {
    font-size: clamp(39px, 11.7vw, 52px);
  }

  .process-v14-heading,
  .ai-v14-shell,
  .quality-v14-shell,
  .faq-v14-shell {
    gap: 30px;
  }

  .process-v14-route {
    border-radius: 28px;
  }

  .process-v14-steps {
    padding: 8px 18px;
  }

  .process-v14-steps > li {
    min-height: 220px;
    grid-template-columns: 42% 58%;
  }

  .process-v14-art {
    height: 205px;
  }

  .process-v14-art-call img {
    width: 148px;
  }

  .process-v14-art-visit img {
    width: 194px;
  }

  .process-v14-art-result img {
    width: 238px;
  }

  .process-v14-copy {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-left: 18px;
  }

  .process-v14-number {
    width: 30px;
    height: 30px;
  }

  .process-v14-copy h3 {
    font-size: 19px;
  }

  .ai-v14-actions .button {
    width: 100%;
  }

  .ai-v14-canvas {
    height: 560px;
    border-radius: 28px;
  }

  .ai-v14-live {
    top: 24px;
    left: 22px;
  }

  .ai-v14-prompts {
    top: 15%;
    left: 18px;
    width: calc(100% - 36px);
    padding-inline: 16px;
    border-radius: 22px;
  }

  .ai-v14-prompts li {
    min-height: 78px;
    grid-template-columns: 28px 1fr 28px;
    gap: 9px;
  }

  .ai-v14-duration {
    left: 22px;
    bottom: 26px;
  }

  .ai-v14-robot {
    right: -70px;
    bottom: -62px;
    width: 250px;
    opacity: 0.88;
  }

  .quality-v14-standards li {
    min-height: 0;
    grid-template-columns: 30px 52px 1fr;
    gap: 12px;
    padding-block: 22px;
  }

  .quality-v14-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .quality-v14-icon svg {
    width: 24px;
    height: 24px;
  }

  .quality-v14-seal {
    min-height: 126px;
  }

  .quality-v14-seal img {
    width: 94px;
  }

  .quality-v14-rings {
    width: 118px;
  }

  .faq-v14-list summary {
    min-height: 74px;
    grid-template-columns: 30px 1fr 36px;
    gap: 10px;
  }

  .faq-v14-list summary strong {
    font-size: 16px;
  }

  .faq-v14-answer p {
    padding: 0 10px 21px 40px;
    font-size: 12.5px;
  }

  body[data-site-version="new"] .final-cta.lower-stage-v14 {
    padding: 78px 0 92px;
  }

  .contact-v14-shell {
    padding: 40px 24px 22px;
    grid-template-rows: auto 330px auto;
    border-radius: 30px;
  }

  .contact-v14-actions {
    display: grid;
    gap: 12px;
  }

  .contact-v14-actions .button,
  .contact-v14-actions a:not(.button) {
    width: 100%;
    justify-content: center;
  }

  .contact-v14-art img {
    width: 520px;
  }

  .contact-v14-response {
    right: 0;
    min-width: 188px;
    padding: 13px 15px;
  }

  .contact-v14-meta {
    grid-template-columns: 1fr;
  }

  .contact-v14-meta span {
    min-height: 46px;
    padding: 10px 4px 0;
  }

  .contact-v14-meta span + span {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-v14-art img,
  .ai-v14-robot,
  .ai-v14-live span,
  .contact-v14-response > span {
    animation: none !important;
    translate: none !important;
    rotate: none !important;
  }
}

/* V34 opening composition: visible 10-second crosswind, clipped leaf weather and static UI. */
body[data-site-version="new"] .hero {
  background: #ffffff;
}

body[data-site-version="new"] .hero::before,
body[data-site-version="new"] .hero::after {
  content: none;
  display: none;
  animation: none !important;
}

.hero-weather-layer {
  position: absolute;
  top: 3px;
  left: -3%;
  z-index: 2;
  width: 103%;
  height: calc(100% - 13px);
  overflow: hidden;
  clip-path: polygon(15% 0, 95% 0, 100% 10%, 100% 54%, 98% 74%, 93% 83%, 82% 96%, 64% 100%, 39% 100%, 18% 98%, 4% 91%, 1% 75%, 3% 58%, 9% 37%, 11% 24%, 11% 8%);
  clip-path: url("#hero-weather-clip");
  contain: paint;
  isolation: isolate;
  pointer-events: none;
}

.hero-weather-field {
  position: absolute;
  inset: 0;
  --leaf-y-one: 112px;
  --leaf-y-two: 228px;
  --leaf-y-three: 352px;
  --leaf-y-four: 505px;
}

.hero-weather-field::after {
  position: absolute;
  top: 10%;
  bottom: 8%;
  right: -34%;
  z-index: 0;
  width: 34%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2) 48%, transparent);
  content: "";
  filter: blur(10px);
  opacity: 0;
  transform: skewX(-12deg);
}

body[data-site-version="new"] .hero-media img.hero-garden-art {
  --depth-x: 0px;
  --depth-y: 0px;
  will-change: auto;
}

body[data-site-version="new"] .hero-media {
  z-index: 3;
}

.hero-float {
  z-index: 5;
}

.hero-wind-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hero-wind-trace {
  fill: none;
  stroke: url("#hero-wind-gradient");
  stroke-dasharray: var(--wind-dash, 24) calc(100 - var(--wind-dash, 24));
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--wind-width, 1.7px);
  filter: drop-shadow(0 0 7px rgba(82, 167, 121, 0.27));
  opacity: 0;
  vector-effect: non-scaling-stroke;
}

.hero-wind-trace-upper {
  --wind-dash: 24;
  --wind-peak: 0.62;
  --wind-width: 1.75px;
}

.hero-wind-trace-main {
  --wind-dash: 31;
  --wind-peak: 0.88;
  --wind-width: 2.65px;
}

.hero-wind-trace-lower {
  --wind-dash: 22;
  --wind-peak: 0.55;
  --wind-width: 1.55px;
}

.hero-motion-leaf {
  position: absolute;
  top: -46px;
  left: var(--leaf-left);
  z-index: 1;
  display: block;
  width: var(--leaf-size, 26px);
  color: var(--leaf-color, #54b946);
  filter: drop-shadow(0 6px 6px rgba(42, 111, 43, 0.13));
  opacity: 0;
  pointer-events: none;
  transform-origin: 52% 55%;
}

.hero-motion-leaf svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero-motion-leaf svg path:first-child {
  fill: currentColor;
  stroke: none;
}

.hero-motion-leaf svg path:last-child {
  fill: none;
  stroke: rgba(244, 255, 235, 0.9);
  stroke-linecap: round;
  stroke-width: 1.2;
}

.hero-motion-leaf-one {
  --leaf-left: 15%;
  --leaf-size: 31px;
  --leaf-color: #4aa83f;
  --leaf-opacity: 0.66;
  --leaf-duration: 13.8s;
  --leaf-delay: -2.1s;
  --leaf-flutter: 2.7s;
  --leaf-angle: -22deg;
  --leaf-x-one: 12px;
  --leaf-x-two: -5px;
  --leaf-x-three: 34px;
  --leaf-x-four: 24px;
}

.hero-motion-leaf-two {
  --leaf-left: 31%;
  --leaf-size: 22px;
  --leaf-color: #91c844;
  --leaf-opacity: 0.58;
  --leaf-duration: 16.2s;
  --leaf-delay: -10.8s;
  --leaf-flutter: 3.1s;
  --leaf-angle: 32deg;
  --leaf-x-one: -12px;
  --leaf-x-two: 8px;
  --leaf-x-three: -20px;
  --leaf-x-four: 14px;
}

.hero-motion-leaf-three {
  --leaf-left: 47%;
  --leaf-size: 27px;
  --leaf-color: #69b94a;
  --leaf-opacity: 0.62;
  --leaf-duration: 14.7s;
  --leaf-delay: -6.2s;
  --leaf-flutter: 2.4s;
  --leaf-angle: -8deg;
  --leaf-x-one: 16px;
  --leaf-x-two: 2px;
  --leaf-x-three: 38px;
  --leaf-x-four: 25px;
}

.hero-motion-leaf-four {
  --leaf-left: 65%;
  --leaf-size: 19px;
  --leaf-color: #acd34d;
  --leaf-opacity: 0.53;
  --leaf-duration: 17.6s;
  --leaf-delay: -13.7s;
  --leaf-flutter: 3.4s;
  --leaf-angle: 48deg;
  --leaf-x-one: -10px;
  --leaf-x-two: 14px;
  --leaf-x-three: -5px;
  --leaf-x-four: 28px;
}

.hero-motion-leaf-five {
  --leaf-left: 81%;
  --leaf-size: 24px;
  --leaf-color: #4fa34a;
  --leaf-opacity: 0.57;
  --leaf-duration: 15.5s;
  --leaf-delay: -4.8s;
  --leaf-flutter: 2.9s;
  --leaf-angle: -34deg;
  --leaf-x-one: 12px;
  --leaf-x-two: -8px;
  --leaf-x-three: 20px;
  --leaf-x-four: -2px;
}

@media (min-width: 1800px) {
  body[data-site-version="new"] {
    --opening-hero-height: clamp(458px, calc(16svh + 320px), 493px);
  }
}

@media (min-width: 1800px) and (max-height: 940px) {
  .top-benefits {
    height: 270px;
    min-height: 270px;
    padding-bottom: 28px;
  }

  .top-benefits-inner {
    height: 220px;
    min-height: 220px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"] .hero-visual-backdrop {
    animation: none;
    transform: none;
  }

  html[data-motion="soft"].is-intro-settled .hero-weather-field {
    animation: hero-weather-gust 10s 0.9s linear infinite;
    will-change: translate, rotate;
  }

  html[data-motion="soft"].is-intro-settled .hero-weather-field::after {
    animation: hero-weather-sheen 10s 0.9s linear infinite;
  }

  html[data-motion="soft"].is-intro-settled .hero-motion-leaf {
    animation: hero-leaf-fall var(--leaf-duration) var(--leaf-delay) linear infinite;
    will-change: transform, opacity;
  }

  html[data-motion="soft"].is-intro-settled .hero-motion-leaf svg {
    animation: hero-leaf-flutter var(--leaf-flutter) ease-in-out infinite alternate;
  }

  html[data-motion="soft"].is-intro-settled .hero-wind-trace-upper {
    animation: hero-wind-travel 10s 0.76s linear infinite;
  }

  html[data-motion="soft"].is-intro-settled .hero-wind-trace-main {
    animation: hero-wind-travel 10s 0.9s linear infinite;
  }

  html[data-motion="soft"].is-intro-settled .hero-wind-trace-lower {
    animation: hero-wind-travel 10s 1.06s linear infinite;
  }
}

@keyframes hero-weather-gust {
  0%, 38%, 79%, 100% { translate: 0 0; rotate: 0deg; }
  44% { translate: -7px -1px; rotate: -0.1deg; }
  51% { translate: -31px -3px; rotate: -0.35deg; }
  59% { translate: -76px -8px; rotate: -1.1deg; }
  67% { translate: -43px -3px; rotate: -0.5deg; }
  74% { translate: -12px 0; rotate: -0.1deg; }
}

@keyframes hero-weather-sheen {
  0%, 38%, 78%, 100% { opacity: 0; transform: translate3d(0, 0, 0) skewX(12deg); }
  45% { opacity: 0.06; }
  57% { opacity: 0.24; transform: translate3d(-275%, 0, 0) skewX(12deg); }
  68% { opacity: 0.07; transform: translate3d(-410%, 0, 0) skewX(12deg); }
  75% { opacity: 0; transform: translate3d(-440%, 0, 0) skewX(12deg); }
}

@keyframes hero-wind-travel {
  0%, 32% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  38% {
    opacity: 0.08;
    stroke-dashoffset: -7;
  }
  48% {
    opacity: var(--wind-peak);
    stroke-dashoffset: -31;
  }
  62% {
    opacity: var(--wind-peak);
    stroke-dashoffset: -67;
  }
  74% {
    opacity: 0.24;
    stroke-dashoffset: -103;
  }
  80%, 100% {
    opacity: 0;
    stroke-dashoffset: -116;
  }
}

@keyframes hero-leaf-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -18px, 0) rotate(var(--leaf-angle));
  }
  8% { opacity: 0; }
  15% { opacity: var(--leaf-opacity); }
  35% {
    opacity: var(--leaf-opacity);
    transform: translate3d(var(--leaf-x-one), var(--leaf-y-one), 0) rotate(calc(var(--leaf-angle) + 94deg));
  }
  58% {
    transform: translate3d(var(--leaf-x-two), var(--leaf-y-two), 0) rotate(calc(var(--leaf-angle) + 196deg));
  }
  78% {
    opacity: var(--leaf-opacity);
    transform: translate3d(var(--leaf-x-three), var(--leaf-y-three), 0) rotate(calc(var(--leaf-angle) + 308deg));
  }
  92% { opacity: 0.38; }
  100% {
    opacity: 0;
    transform: translate3d(var(--leaf-x-four), var(--leaf-y-four), 0) rotate(calc(var(--leaf-angle) + 432deg));
  }
}

@keyframes hero-leaf-flutter {
  from { transform: rotate(-7deg) scale(0.96); }
  to { transform: rotate(8deg) scale(1.02); }
}

html.is-section-scrolling .hero-weather-field,
html.is-section-scrolling .hero-weather-field::after,
html.is-section-scrolling .hero-motion-leaf,
html.is-section-scrolling .hero-motion-leaf svg,
html.is-section-scrolling .hero-wind-trace,
html.is-stage-transitioning .hero-weather-field,
html.is-stage-transitioning .hero-weather-field::after,
html.is-stage-transitioning .hero-motion-leaf,
html.is-stage-transitioning .hero-motion-leaf svg,
html.is-stage-transitioning .hero-wind-trace {
  animation-play-state: paused !important;
}

@media (max-width: 900px) {
  .hero-wind-canvas {
    display: none;
  }
}

@media (max-width: 700px) {
  .hero-weather-layer {
    top: 8px;
    left: -10%;
    width: 110%;
    height: calc(100% - 22px);
  }

  .hero-weather-field {
    --leaf-y-one: 82px;
    --leaf-y-two: 164px;
    --leaf-y-three: 252px;
    --leaf-y-four: 372px;
  }

  .hero-motion-leaf {
    width: min(var(--leaf-size, 24px), 24px);
  }

  .hero-motion-leaf-five {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-weather-layer,
  .hero-wind-canvas {
    display: none;
  }
}

/* V39 hero wind lab: three physical wind characters and leaves that escape behind the copy. */
.hero-wind-set {
  display: none;
}

html[data-wind-effect="sweep"] .hero-wind-set-sweep,
html[data-wind-effect="vortex"] .hero-wind-set-vortex,
html[data-wind-effect="burst"] .hero-wind-set-burst {
  display: inline;
}

html[data-wind-effect="sweep"] :is(.hero-wind-set-vortex, .hero-wind-set-burst) .hero-wind-trace,
html[data-wind-effect="vortex"] :is(.hero-wind-set-sweep, .hero-wind-set-burst) .hero-wind-trace,
html[data-wind-effect="burst"] :is(.hero-wind-set-sweep, .hero-wind-set-vortex) .hero-wind-trace {
  animation: none;
}

.hero-wind-trace-upper {
  --wind-delay: 0.32s;
}

.hero-wind-trace-main {
  --wind-delay: 0.45s;
}

.hero-wind-trace-lower {
  --wind-delay: 0.58s;
}

.hero-wind-set-vortex .hero-wind-trace-upper {
  --wind-peak: 0.68;
  --wind-width: 1.9px;
}

.hero-wind-set-vortex .hero-wind-trace-main {
  --wind-peak: 0.92;
  --wind-width: 2.8px;
}

.hero-wind-set-vortex .hero-wind-trace-lower {
  --wind-peak: 0.61;
  --wind-width: 1.7px;
}

.hero-wind-trace-rush {
  --wind-dash: 16;
  --wind-peak: 0.52;
  --wind-width: 1.45px;
}

.hero-wind-trace-rush-one { --wind-delay: 0.23s; }
.hero-wind-trace-rush-two { --wind-delay: 0.29s; }
.hero-wind-trace-rush-main {
  --wind-delay: 0.34s;
  --wind-dash: 23;
  --wind-peak: 0.9;
  --wind-width: 2.45px;
}
.hero-wind-trace-rush-four { --wind-delay: 0.4s; }
.hero-wind-trace-rush-five { --wind-delay: 0.46s; }

.hero-escape-leaves {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.hero-escape-leaf {
  position: absolute;
  top: var(--escape-top);
  left: var(--escape-left);
  display: block;
  width: var(--escape-size);
  color: var(--escape-color);
  filter: drop-shadow(0 7px 7px rgba(36, 104, 43, 0.15));
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(var(--escape-angle));
  transform-origin: 52% 55%;
}

.hero-escape-leaf svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero-escape-leaf svg path:first-child {
  fill: currentColor;
  stroke: none;
}

.hero-escape-leaf svg path:last-child {
  fill: none;
  stroke: rgba(246, 255, 238, 0.9);
  stroke-linecap: round;
  stroke-width: 1.15;
}

.hero-escape-leaf-one {
  --escape-top: 25%;
  --escape-left: 66%;
  --escape-size: 26px;
  --escape-color: #57ad3f;
  --escape-angle: -24deg;
  --escape-delay: 0.42s;
  --escape-x-one: -112px;
  --escape-y-one: -26px;
  --escape-x-two: -318px;
  --escape-y-two: -52px;
  --escape-x-three: -568px;
  --escape-y-three: 44px;
  --escape-x-four: -760px;
  --escape-y-four: 178px;
}

.hero-escape-leaf-two {
  --escape-top: 43%;
  --escape-left: 72%;
  --escape-size: 19px;
  --escape-color: #8cc440;
  --escape-angle: 31deg;
  --escape-delay: 0.54s;
  --escape-x-one: -98px;
  --escape-y-one: 8px;
  --escape-x-two: -296px;
  --escape-y-two: 29px;
  --escape-x-three: -526px;
  --escape-y-three: 112px;
  --escape-x-four: -704px;
  --escape-y-four: 244px;
}

.hero-escape-leaf-three {
  --escape-top: 34%;
  --escape-left: 77%;
  --escape-size: 23px;
  --escape-color: #67b647;
  --escape-angle: -9deg;
  --escape-delay: 0.63s;
  --escape-x-one: -142px;
  --escape-y-one: -7px;
  --escape-x-two: -365px;
  --escape-y-two: 57px;
  --escape-x-three: -604px;
  --escape-y-three: 27px;
  --escape-x-four: -790px;
  --escape-y-four: 196px;
}

.hero-escape-leaf-four {
  --escape-top: 61%;
  --escape-left: 69%;
  --escape-size: 21px;
  --escape-color: #a9cf48;
  --escape-angle: 47deg;
  --escape-delay: 0.72s;
  --escape-x-one: -124px;
  --escape-y-one: -13px;
  --escape-x-two: -402px;
  --escape-y-two: -39px;
  --escape-x-three: -682px;
  --escape-y-three: 62px;
  --escape-x-four: -876px;
  --escape-y-four: 222px;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"].is-intro-settled[data-wind-effect="sweep"] .hero-weather-field {
    animation: hero-weather-sweep 10s 0.45s linear infinite;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="vortex"] .hero-weather-field {
    animation: hero-weather-vortex 10s 0.45s linear infinite;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="burst"] .hero-weather-field {
    animation: hero-weather-burst 10s 0.45s linear infinite;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="sweep"] .hero-weather-field::after {
    animation: hero-weather-sheen-sweep 10s 0.45s linear infinite;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="vortex"] .hero-weather-field::after {
    animation: hero-weather-sheen-vortex 10s 0.45s linear infinite;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="burst"] .hero-weather-field::after {
    animation: hero-weather-sheen-burst 10s 0.45s linear infinite;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="sweep"] .hero-wind-set-sweep .hero-wind-trace {
    animation: hero-wind-sweep 10s var(--wind-delay) linear infinite;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="vortex"] .hero-wind-set-vortex .hero-wind-trace {
    animation: hero-wind-vortex 10s var(--wind-delay) linear infinite;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="burst"] .hero-wind-set-burst .hero-wind-trace {
    animation: hero-wind-burst 10s var(--wind-delay) cubic-bezier(0.3, 0.05, 0.25, 1) infinite;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="sweep"] .hero-escape-leaf-one,
  html[data-motion="soft"].is-intro-settled[data-wind-effect="sweep"] .hero-escape-leaf-two {
    animation: hero-escape-sweep 10s var(--escape-delay) linear infinite;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="vortex"] .hero-escape-leaf-one,
  html[data-motion="soft"].is-intro-settled[data-wind-effect="vortex"] .hero-escape-leaf-two,
  html[data-motion="soft"].is-intro-settled[data-wind-effect="vortex"] .hero-escape-leaf-three {
    animation: hero-escape-vortex 10s var(--escape-delay) linear infinite;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="burst"] .hero-escape-leaf {
    animation: hero-escape-burst 10s var(--escape-delay) cubic-bezier(0.28, 0.03, 0.26, 1) infinite;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="sweep"] .hero-escape-leaf:nth-child(-n + 2) svg,
  html[data-motion="soft"].is-intro-settled[data-wind-effect="vortex"] .hero-escape-leaf:nth-child(-n + 3) svg,
  html[data-motion="soft"].is-intro-settled[data-wind-effect="burst"] .hero-escape-leaf svg {
    animation: hero-escape-flutter 560ms ease-in-out infinite alternate;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="burst"] .hero-escape-leaf svg {
    animation-duration: 360ms;
  }

  html[data-motion="soft"].is-intro-settled.is-wind-preview .hero-weather-field,
  html[data-motion="soft"].is-intro-settled.is-wind-preview .hero-weather-field::after {
    animation-delay: -1.6s;
  }

  html[data-motion="soft"].is-intro-settled.is-wind-preview .hero-wind-trace {
    animation-delay: calc(var(--wind-delay) - 1.6s);
  }

  html[data-motion="soft"].is-intro-settled.is-wind-preview .hero-escape-leaf {
    animation-delay: calc(var(--escape-delay) - 1.6s);
  }
}

@keyframes hero-weather-sweep {
  0%, 20%, 76%, 100% { translate: 0 0; rotate: 0deg; }
  29% { translate: -9px -1px; rotate: -0.12deg; }
  42% { translate: -39px -4px; rotate: -0.48deg; }
  53% { translate: -82px -9px; rotate: -1.1deg; }
  64% { translate: -26px -2px; rotate: -0.28deg; }
  72% { translate: -6px 0; rotate: 0deg; }
}

@keyframes hero-weather-vortex {
  0%, 18%, 77%, 100% { translate: 0 0; rotate: 0deg; }
  29% { translate: -15px -3px; rotate: -0.18deg; }
  39% { translate: -49px -10px; rotate: -0.78deg; }
  48% { translate: -64px 3px; rotate: -1.18deg; }
  57% { translate: -45px -8px; rotate: -0.5deg; }
  66% { translate: -18px 2px; rotate: 0.12deg; }
  73% { translate: -4px 0; rotate: 0deg; }
}

@keyframes hero-weather-burst {
  0%, 20%, 58%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: -18px -2px; rotate: -0.15deg; }
  32% { translate: -70px -7px; rotate: -0.72deg; }
  38% { translate: -108px -12px; rotate: -1.35deg; }
  45% { translate: -58px -4px; rotate: -0.48deg; }
  53% { translate: -7px 0; rotate: 0deg; }
}

@keyframes hero-weather-sheen-sweep {
  0%, 20%, 72%, 100% { opacity: 0; transform: translate3d(0, 0, 0) skewX(12deg); }
  30% { opacity: 0.08; }
  48% { opacity: 0.26; transform: translate3d(-275%, 0, 0) skewX(12deg); }
  64% { opacity: 0.06; transform: translate3d(-420%, 0, 0) skewX(12deg); }
  70% { opacity: 0; transform: translate3d(-445%, 0, 0) skewX(12deg); }
}

@keyframes hero-weather-sheen-vortex {
  0%, 18%, 74%, 100% { opacity: 0; transform: translate3d(0, -3%, 0) skewX(9deg) rotate(1deg); }
  29% { opacity: 0.08; }
  45% { opacity: 0.22; transform: translate3d(-242%, 4%, 0) skewX(15deg) rotate(-2deg); }
  60% { opacity: 0.1; transform: translate3d(-382%, -3%, 0) skewX(8deg) rotate(1deg); }
  71% { opacity: 0; transform: translate3d(-448%, 1%, 0) skewX(12deg) rotate(0deg); }
}

@keyframes hero-weather-sheen-burst {
  0%, 19%, 55%, 100% { opacity: 0; transform: translate3d(0, 0, 0) skewX(7deg); }
  24% { opacity: 0.1; }
  35% { opacity: 0.31; transform: translate3d(-292%, 0, 0) skewX(7deg); }
  47% { opacity: 0.04; transform: translate3d(-438%, 0, 0) skewX(7deg); }
  53% { opacity: 0; transform: translate3d(-465%, 0, 0) skewX(7deg); }
}

@keyframes hero-wind-sweep {
  0%, 16% { opacity: 0; stroke-dashoffset: 0; }
  23% { opacity: 0.08; stroke-dashoffset: -6; }
  35% { opacity: var(--wind-peak); stroke-dashoffset: -31; }
  52% { opacity: var(--wind-peak); stroke-dashoffset: -67; }
  65% { opacity: 0.21; stroke-dashoffset: -102; }
  72%, 100% { opacity: 0; stroke-dashoffset: -116; }
}

@keyframes hero-wind-vortex {
  0%, 17% { opacity: 0; stroke-dashoffset: 0; }
  25% { opacity: 0.1; stroke-dashoffset: -7; }
  39% { opacity: var(--wind-peak); stroke-dashoffset: -34; }
  59% { opacity: var(--wind-peak); stroke-dashoffset: -74; }
  71% { opacity: 0.24; stroke-dashoffset: -103; }
  78%, 100% { opacity: 0; stroke-dashoffset: -116; }
}

@keyframes hero-wind-burst {
  0%, 18% { opacity: 0; stroke-dashoffset: 0; }
  23% { opacity: 0.14; stroke-dashoffset: -5; }
  31% { opacity: var(--wind-peak); stroke-dashoffset: -31; }
  41% { opacity: var(--wind-peak); stroke-dashoffset: -79; }
  49% { opacity: 0.17; stroke-dashoffset: -109; }
  55%, 100% { opacity: 0; stroke-dashoffset: -119; }
}

@keyframes hero-escape-sweep {
  0%, 25%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--escape-angle)) scale(0.9); }
  31% { opacity: 0.06; transform: translate3d(-22px, -3px, 0) rotate(calc(var(--escape-angle) + 18deg)) scale(0.94); }
  39% { opacity: 0.72; transform: translate3d(var(--escape-x-one), var(--escape-y-one), 0) rotate(calc(var(--escape-angle) + 116deg)) scale(1); }
  52% { opacity: 0.76; transform: translate3d(var(--escape-x-two), var(--escape-y-two), 0) rotate(calc(var(--escape-angle) + 258deg)) scale(0.96); }
  66% { opacity: 0.42; transform: translate3d(var(--escape-x-three), var(--escape-y-three), 0) rotate(calc(var(--escape-angle) + 421deg)) scale(0.86); }
  79% { opacity: 0; transform: translate3d(var(--escape-x-four), var(--escape-y-four), 0) rotate(calc(var(--escape-angle) + 566deg)) scale(0.68); }
}

@keyframes hero-escape-vortex {
  0%, 23%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--escape-angle)) scale(0.88); }
  30% { opacity: 0.08; transform: translate3d(-28px, -8px, 0) rotate(calc(var(--escape-angle) + 24deg)) scale(0.94); }
  38% { opacity: 0.7; transform: translate3d(var(--escape-x-one), calc(var(--escape-y-one) - 16px), 0) rotate(calc(var(--escape-angle) + 138deg)) scale(1); }
  49% { opacity: 0.78; transform: translate3d(var(--escape-x-two), calc(var(--escape-y-two) + 44px), 0) rotate(calc(var(--escape-angle) + 315deg)) scale(0.97); }
  61% { opacity: 0.55; transform: translate3d(var(--escape-x-three), calc(var(--escape-y-three) - 48px), 0) rotate(calc(var(--escape-angle) + 512deg)) scale(0.88); }
  76% { opacity: 0; transform: translate3d(var(--escape-x-four), calc(var(--escape-y-four) + 22px), 0) rotate(calc(var(--escape-angle) + 690deg)) scale(0.65); }
}

@keyframes hero-escape-burst {
  0%, 19%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--escape-angle)) scale(0.86); }
  24% { opacity: 0.1; transform: translate3d(-34px, -5px, 0) rotate(calc(var(--escape-angle) + 30deg)) scale(0.94); }
  30% { opacity: 0.84; transform: translate3d(var(--escape-x-one), calc(var(--escape-y-one) - 18px), 0) rotate(calc(var(--escape-angle) + 158deg)) scale(1.03); }
  39% { opacity: 0.78; transform: translate3d(var(--escape-x-two), calc(var(--escape-y-two) - 30px), 0) rotate(calc(var(--escape-angle) + 352deg)) scale(0.98); }
  49% { opacity: 0.47; transform: translate3d(var(--escape-x-three), calc(var(--escape-y-three) + 9px), 0) rotate(calc(var(--escape-angle) + 548deg)) scale(0.84); }
  63% { opacity: 0; transform: translate3d(var(--escape-x-four), calc(var(--escape-y-four) + 48px), 0) rotate(calc(var(--escape-angle) + 735deg)) scale(0.6); }
}

/* V56: enter the garden with one visible crosswind about two seconds after load.
   This shifts the existing ten-second choreography instead of layering a second loop. */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"].is-intro-settled.is-hero-wind-intro:not(.is-wind-preview)[data-wind-effect="sweep"] .hero-weather-field,
  html[data-motion="soft"].is-intro-settled.is-hero-wind-intro:not(.is-wind-preview)[data-wind-effect="sweep"] .hero-weather-field::after,
  html[data-motion="soft"].is-intro-settled.is-hero-wind-intro:not(.is-wind-preview)[data-wind-effect="burst"] .hero-weather-field,
  html[data-motion="soft"].is-intro-settled.is-hero-wind-intro:not(.is-wind-preview)[data-wind-effect="burst"] .hero-weather-field::after {
    animation-delay: -1.78s;
  }

  html[data-motion="soft"].is-intro-settled.is-hero-wind-intro:not(.is-wind-preview)[data-wind-effect="vortex"] .hero-weather-field,
  html[data-motion="soft"].is-intro-settled.is-hero-wind-intro:not(.is-wind-preview)[data-wind-effect="vortex"] .hero-weather-field::after {
    animation-delay: -1.58s;
  }

  html[data-motion="soft"].is-intro-settled.is-hero-wind-intro:not(.is-wind-preview) .hero-wind-trace {
    animation-delay: calc(var(--wind-delay) - 1.78s);
  }

  html[data-motion="soft"].is-intro-settled.is-hero-wind-intro:not(.is-wind-preview) .hero-escape-leaf {
    animation-delay: calc(var(--escape-delay) - 1.8s);
  }
}

/* Homepage V57: the customer voice is deliberately reduced to identity, quote and
   progress. Removing the label stack gives the actual review enough scale to become
   the first-column focal point while keeping the surrounding benefit cards untouched. */
.reviews-showcase {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 20px 20px 17px;
}

.reviews-showcase-heading,
.reviews-showcase > h2 {
  display: none;
}

.review-card-stage {
  width: 100%;
  min-height: 205px;
}

.review-card {
  justify-content: center;
  gap: 18px;
  padding: 15px 4px 8px;
}

.review-card-meta {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
}

.review-avatar {
  width: 48px;
  height: 48px;
  font-size: 12px;
}

.review-avatar::before {
  top: 1px;
  right: auto;
  bottom: auto;
  left: 1px;
  width: 46px;
  height: 46px;
}

.review-avatar::after {
  right: 0;
  bottom: 1px;
  width: 10px;
  height: 10px;
}

.review-person {
  gap: 0;
}

.review-person strong {
  color: #14292c;
  font-size: clamp(15px, 0.9vw, 17px);
  font-weight: 850;
  letter-spacing: -0.025em;
}

.review-person small,
.review-score,
.review-card-footer {
  display: none;
}

.review-card blockquote {
  display: block;
  max-width: 25ch;
  min-height: 0;
  margin: 0;
  overflow: visible;
  color: #284145;
  font-size: clamp(16px, 0.98vw, 19px);
  font-weight: 650;
  letter-spacing: -0.026em;
  line-height: 1.35;
  -webkit-box-orient: initial;
  -webkit-line-clamp: initial;
}

.review-progress {
  justify-content: center;
  gap: 7px;
  margin-top: 0;
}

.review-progress i {
  width: 5px;
  height: 5px;
}

.review-progress i.is-active {
  width: 36px;
}

/* Focus softly resolves the whole voice from depth; Lines lets the identity and
   quotation arrive as two calm, editorial beats. */
html[data-review-motion="focus"] .review-card.is-entering {
  animation: review-focus-in 680ms var(--ease-apple-soft) both;
}

html[data-review-motion="focus"] .review-card.is-leaving {
  animation: review-focus-out 360ms cubic-bezier(0.4, 0, 0.7, 0.2) both;
}

html[data-review-motion="lines"] .review-card.is-entering {
  animation: review-lines-shell-in 620ms var(--ease-apple-soft) both;
}

html[data-review-motion="lines"] .review-card.is-leaving {
  animation: review-lines-shell-out 350ms cubic-bezier(0.4, 0, 0.68, 0.2) both;
}

html[data-review-motion="lines"] .review-card.is-entering .review-card-meta {
  animation: review-lines-name-in 500ms 40ms var(--ease-apple-soft) both;
}

html[data-review-motion="lines"] .review-card.is-entering blockquote {
  animation: review-lines-quote-in 650ms 115ms var(--ease-apple-soft) both;
}

@keyframes review-focus-in {
  from {
    opacity: 0;
    filter: blur(7px);
    transform: scale(0.965);
  }
  68% { opacity: 1; }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes review-focus-out {
  from {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  to {
    opacity: 0;
    filter: blur(4px);
    transform: scale(1.018);
  }
}

@keyframes review-lines-shell-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes review-lines-shell-out {
  from {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, -5px, 0);
  }
}

@keyframes review-lines-name-in {
  from {
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes review-lines-quote-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 9px, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

@media (max-height: 1065px) and (min-width: 1181px) {
  .reviews-showcase {
    height: 100%;
    min-height: 0;
    gap: 8px;
    padding: 9px 14px 8px;
  }

  .review-card-stage { min-height: 176px; }
  .review-card { gap: 11px; padding: 8px 2px 4px; }
  .review-avatar { width: 41px; height: 41px; font-size: 10.5px; }
  .review-avatar::before { width: 39px; height: 39px; }
  .review-avatar::after { width: 9px; height: 9px; }
  .review-person strong { font-size: 14px; }
  .review-card blockquote { font-size: clamp(14px, 0.84vw, 16px); line-height: 1.34; }
  .review-progress { gap: 6px; }
  .review-progress i { width: 4px; height: 4px; }
  .review-progress i.is-active { width: 30px; }
}

@media (max-height: 940px) and (min-width: 1181px) {
  .reviews-showcase { padding: 8px 12px 7px; }
  .review-card-stage { min-height: 170px; }
  .review-card { gap: 10px; padding-block: 7px 3px; }
  .review-card-meta { grid-template-columns: 39px minmax(0, 1fr); gap: 11px; }
  .review-avatar { width: 39px; height: 39px; font-size: 10px; }
  .review-avatar::before { width: 37px; height: 37px; }
  .review-person strong { font-size: 13.5px; }
  .review-card blockquote { max-width: 27ch; margin: 0; font-size: clamp(13.5px, 0.8vw, 15px); line-height: 1.32; }
  .review-progress { gap: 5px; }
  .review-progress i { width: 4px; height: 4px; }
  .review-progress i.is-active { width: 27px; }
}

@media (max-width: 1080px) {
  .reviews-showcase {
    min-height: 245px;
    padding: 20px 24px 17px;
  }

  .review-card-stage { min-height: 185px; }
  .review-card blockquote { max-width: 38ch; }
}

@media (max-width: 760px) {
  .reviews-showcase {
    min-height: 260px;
    gap: 12px;
    padding: 17px 15px 15px;
  }

  .review-card-stage { min-height: 200px; }
  .review-card { gap: 15px; padding: 13px 2px 7px; }
  .review-card-meta { grid-template-columns: 45px minmax(0, 1fr); gap: 13px; }
  .review-avatar { width: 45px; height: 45px; font-size: 11px; }
  .review-avatar::before { width: 43px; height: 43px; }
  .review-person strong { font-size: 15px; }
  .review-card blockquote { max-width: none; margin: 0; font-size: 17px; line-height: 1.36; }
}
/* Homepage V63: reference-matched testimonial stage. The first column now mirrors
   the supplied wide glass panel while the rotating placeholder data stays isolated
   in script.js for a later replacement with verified customer reviews. */
.reviews-showcase {
  --review-duration: 6500ms;
  position: relative;
  isolation: isolate;
  display: block;
  height: 100%;
  min-height: 290px;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.94);
  border-radius: 30px 104px 29px 29px / 30px 92px 29px 29px;
  background:
    radial-gradient(circle at 68% 84%, rgba(255, 241, 212, 0.28), transparent 42%),
    radial-gradient(circle at 18% 76%, rgba(222, 251, 216, 0.48), transparent 47%),
    linear-gradient(132deg, rgba(255, 255, 255, 0.96), rgba(252, 254, 247, 0.9) 62%, rgba(255, 253, 245, 0.88));
  box-shadow:
    0 24px 52px rgba(32, 88, 55, 0.1),
    0 3px 8px rgba(31, 87, 53, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transition: border-color 380ms ease, box-shadow 500ms var(--ease-apple-soft);
}

.reviews-showcase:hover {
  border-color: rgba(255, 255, 255, 1);
  box-shadow:
    0 28px 62px rgba(32, 88, 55, 0.13),
    0 4px 10px rgba(31, 87, 53, 0.04),
    inset 0 1px 0 #fff;
}

.reviews-showcase::before,
.reviews-showcase::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.reviews-showcase::before {
  top: -52px;
  right: auto;
  bottom: auto;
  left: -30px;
  width: 48%;
  height: 49%;
  border: 0;
  border-radius: 0 0 86% 0 / 0 0 100% 0;
  background:
    radial-gradient(circle at 71% 69%, rgba(165, 255, 195, 0.94), rgba(70, 218, 142, 0.84) 45%, rgba(37, 186, 117, 0.56) 68%, transparent 71%);
  box-shadow: none;
  filter: blur(0.2px);
  opacity: 0.94;
  transform: rotate(-4deg);
  transform-origin: 18% 18%;
}

.reviews-showcase::after {
  top: auto;
  right: -44px;
  bottom: -58px;
  left: auto;
  width: 47%;
  height: 53%;
  border: 0;
  border-radius: 92% 0 0 0 / 100% 0 0 0;
  background:
    radial-gradient(circle at 44% 37%, rgba(246, 211, 255, 0.96), rgba(216, 185, 255, 0.82) 46%, rgba(161, 126, 250, 0.43) 69%, transparent 72%);
  box-shadow: none;
  filter: blur(0.15px);
  opacity: 0.83;
  transform: rotate(-5deg);
  transform-origin: 100% 100%;
}

.review-card-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  min-height: 0;
}

.review-card-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 11px;
  right: 13px;
  width: 78px;
  height: 58px;
  background-image: radial-gradient(circle, rgba(73, 205, 116, 0.22) 0 1.35px, transparent 1.6px);
  background-position: center;
  background-size: 12px 12px;
  opacity: 0.7;
  pointer-events: none;
}

.review-card-stage::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(40, 160, 81, 0.025);
  pointer-events: none;
}

.review-card {
  --review-primary: #28b850;
  --review-soft: #dff7e4;
  --review-shadow: rgba(42, 167, 76, 0.2);
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  transform: translate3d(0, 0, 0);
}

.review-card[data-review-tone="blue"] {
  --review-primary: #638ff1;
  --review-soft: #e9efff;
  --review-shadow: rgba(84, 126, 226, 0.22);
}

.review-card[data-review-tone="violet"] {
  --review-primary: #8a69ec;
  --review-soft: #eee8ff;
  --review-shadow: rgba(126, 91, 226, 0.24);
}

.review-card[data-review-tone="coral"] {
  --review-primary: #de7764;
  --review-soft: #fff0eb;
  --review-shadow: rgba(210, 103, 82, 0.2);
}

.review-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -22%;
  right: auto;
  bottom: -22%;
  left: -42%;
  width: 28%;
  height: auto;
  background: linear-gradient(96deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  opacity: 0;
  pointer-events: none;
  transform: skewX(-13deg);
}

.review-rating {
  position: absolute;
  z-index: 2;
  top: 18%;
  left: 33.5%;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ffb700;
  font-size: clamp(16px, 1.02vw, 20px);
  line-height: 1;
  filter: drop-shadow(0 3px 7px rgba(244, 170, 0, 0.13));
}

.review-rating span {
  display: inline-block;
  transform-origin: 50% 70%;
}

.review-quote-mark {
  position: absolute;
  z-index: 2;
  top: 30.5%;
  left: 8.7%;
  color: #35bf52;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(61px, 4.15vw, 78px);
  font-weight: 800;
  letter-spacing: -0.14em;
  line-height: 0.72;
  text-shadow: 0 7px 16px rgba(40, 177, 75, 0.14);
}

.review-card blockquote {
  position: absolute;
  z-index: 2;
  top: 33%;
  left: 33.5%;
  display: block;
  width: 61.5%;
  max-width: none;
  min-height: 0;
  margin: 0;
  overflow: visible;
  color: #193338;
  font-size: clamp(17px, 1.03vw, 20px);
  font-weight: 760;
  letter-spacing: -0.033em;
  line-height: 1.28;
  text-wrap: balance;
  -webkit-box-orient: initial;
  -webkit-line-clamp: initial;
}

.review-quote-line {
  display: block;
  white-space: nowrap;
}

.review-author {
  position: absolute;
  z-index: 2;
  bottom: 6.5%;
  left: 6.7%;
  display: grid;
  max-width: 24%;
  justify-items: start;
  gap: 9px;
}

.review-avatar {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: #fff;
  font-size: 13px;
  font-weight: 830;
  letter-spacing: -0.025em;
}

.review-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 46% 54% 49% 51% / 53% 47% 53% 47%;
  background:
    radial-gradient(circle at 27% 23%, rgba(255, 255, 255, 0.93) 0 7%, transparent 17%),
    linear-gradient(145deg, color-mix(in srgb, var(--review-primary) 26%, white), var(--review-primary) 62%, color-mix(in srgb, var(--review-primary) 72%, #543dcc));
  box-shadow:
    0 8px 18px var(--review-shadow),
    inset 0 1px 3px rgba(255, 255, 255, 0.72);
  transform: rotate(-8deg);
}

.review-avatar::after {
  content: "";
  position: absolute;
  top: 5px;
  right: -4px;
  bottom: auto;
  width: 13px;
  height: 13px;
  border: 2.5px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  background: #34c857;
  box-shadow: 0 4px 9px rgba(39, 168, 70, 0.25);
}

.review-avatar span {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 1px 5px rgba(40, 48, 89, 0.18);
}

.review-person {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.review-person strong,
.review-person small {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.review-person strong {
  color: #12272b;
  font-size: clamp(12.5px, 0.73vw, 14px);
  font-weight: 850;
  letter-spacing: -0.026em;
  line-height: 1.1;
}

.review-person small {
  color: #607377;
  font-size: clamp(9.5px, 0.55vw, 10.5px);
  font-weight: 560;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.review-accent,
.review-progress {
  position: absolute;
  z-index: 3;
  bottom: 17.2%;
  left: 33.5%;
  width: 94px;
  height: 3px;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
}

.review-accent {
  display: block;
  background: linear-gradient(90deg, rgba(40, 190, 90, 0.23), rgba(139, 100, 241, 0.2));
}

.review-progress {
  display: block;
  background: transparent;
}

.review-progress i {
  display: none;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
}

.review-progress i.is-active {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

.review-progress i.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #38c267 0%, #58cfa0 45%, #9b74f1 100%);
  box-shadow: 0 0 8px rgba(75, 195, 127, 0.18);
  transform: scaleX(0);
  transform-origin: left center;
}

.review-progress i.is-complete {
  display: none;
}

@media (min-width: 1181px) {
  .top-benefits-inner {
    grid-template-columns: minmax(0, 1.78fr) repeat(4, minmax(0, 1fr));
  }

  .reviews-showcase {
    height: 100%;
  }
}

@media (min-width: 1400px) {
  .top-benefits-inner {
    width: min(1780px, calc(65.5vw + 214px));
    grid-template-columns: minmax(0, 1.88fr) repeat(4, minmax(0, 1fr));
  }
}

@media (max-height: 1065px) and (min-width: 1181px) {
  .reviews-showcase {
    min-height: 0;
    padding: 0;
  }

  .review-rating {
    top: 15%;
    gap: 3px;
    font-size: clamp(14px, 0.87vw, 17px);
  }

  .review-quote-mark {
    top: 28%;
    font-size: clamp(53px, 3.55vw, 67px);
  }

  .review-card blockquote {
    top: 30%;
    font-size: clamp(15px, 0.88vw, 17px);
    line-height: 1.26;
  }

  .review-author {
    bottom: 5.5%;
    gap: 7px;
  }

  .review-avatar {
    width: 44px;
    height: 44px;
    font-size: 11px;
  }

  .review-avatar::after {
    top: 4px;
    width: 11px;
    height: 11px;
    border-width: 2px;
  }

  .review-person strong { font-size: 12.5px; }
  .review-person small { font-size: 9px; }
  .review-accent,
  .review-progress { bottom: 15%; width: 82px; }
}

@media (max-height: 940px) and (min-width: 1181px) {
  .review-card-stage { min-height: 0; }

  .review-card-stage::before {
    top: 5px;
    right: 7px;
    width: 64px;
    height: 42px;
    background-size: 10px 10px;
  }

  .review-rating {
    top: 12%;
    gap: 2px;
    font-size: clamp(11.5px, 0.72vw, 14px);
  }

  .review-quote-mark {
    top: 26%;
    font-size: clamp(43px, 2.95vw, 56px);
  }

  .review-card blockquote {
    top: 27%;
    font-size: clamp(12px, 0.74vw, 14px);
    line-height: 1.23;
  }

  .review-author {
    bottom: 4.5%;
    gap: 5px;
  }

  .review-avatar {
    width: 36px;
    height: 36px;
    font-size: 9px;
  }

  .review-avatar::after {
    top: 3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-width: 1.5px;
  }

  .review-person { gap: 2px; }
  .review-person strong { font-size: 10.5px; }
  .review-person small { font-size: 7.8px; }
  .review-accent,
  .review-progress { bottom: 13.5%; width: 66px; height: 2px; }
}

@media (max-width: 1080px) {
  .reviews-showcase {
    grid-column: 1 / -1;
    min-height: 285px;
    padding: 0;
  }
}

@media (max-width: 760px) {
  .reviews-showcase {
    min-height: 286px;
    gap: 0;
    padding: 0;
    border-radius: 25px 78px 25px 25px / 25px 70px 25px 25px;
  }

  .reviews-showcase::before {
    top: -38px;
    left: -25px;
    width: 51%;
    height: 45%;
  }

  .reviews-showcase::after {
    right: -38px;
    bottom: -52px;
    width: 52%;
    height: 49%;
  }

  .review-card-stage { min-height: 0; }
  .review-rating { top: 16%; left: 34%; gap: 3px; font-size: 16px; }
  .review-quote-mark { top: 29%; left: 8%; font-size: 62px; }
  .review-card blockquote {
    top: 32%;
    left: 34%;
    width: 62%;
    max-width: none;
    margin: 0;
    font-size: 16px;
    line-height: 1.29;
  }

  .review-author {
    bottom: 6%;
    left: 7%;
    gap: 7px;
  }

  .review-avatar {
    width: 46px;
    height: 46px;
    font-size: 11.5px;
  }

  .review-avatar::after {
    width: 11px;
    height: 11px;
    border-width: 2px;
  }

  .review-person strong { font-size: 12.5px; }
  .review-person small { font-size: 9px; }
  .review-accent,
  .review-progress { bottom: 16%; left: 34%; width: 80px; }
}

@media (max-width: 390px) {
  .review-rating { font-size: 15px; }
  .review-card blockquote { font-size: 15px; }
  .review-quote-mark { font-size: 58px; }
  .review-person strong { font-size: 12px; }
  .review-person small { font-size: 8.5px; }
}

/* Release guard for common 1280×720-class laptop viewports. The hero action row
   stays inside its grid column, and the testimonial/benefit row may continue below
   the fold instead of compressing readable content into an impossible height. */
@media (min-width: 901px) and (max-width: 1320px) {
  body[data-site-version="new"] .hero-actions {
    gap: 14px;
  }

  body[data-site-version="new"] .hero-phone > span:last-child {
    display: none;
  }
}

@media (min-width: 1181px) and (max-height: 900px) {
  .top-benefits {
    height: auto;
    min-height: 286px;
    padding: 28px 0 38px;
  }

  .top-benefits-inner {
    height: 220px;
    min-height: 220px;
  }

  .benefits-scroll-arrow,
  .section-next-cue {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"] .top-benefits.is-motion-active .reviews-showcase::before {
    animation: review-reference-green-drift 12s var(--ease-apple-soft) infinite alternate;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .reviews-showcase::after {
    animation: review-reference-violet-drift 14s var(--ease-apple-soft) infinite alternate;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .review-card-stage::before {
    animation: review-reference-dots 9s ease-in-out infinite alternate;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .review-progress i.is-active::after {
    animation: review-reference-progress var(--review-duration) linear forwards;
  }

  html[data-motion="soft"][data-review-motion="story"] .review-card.is-entering {
    animation: review-reference-story-in 780ms var(--ease-apple-soft) both;
  }

  html[data-motion="soft"][data-review-motion="story"] .review-card.is-leaving {
    animation: review-reference-story-out 440ms cubic-bezier(0.4, 0, 0.68, 0.2) both;
  }

  html[data-motion="soft"][data-review-motion="glide"] .review-card.is-entering {
    animation: review-reference-glide-in 680ms var(--ease-apple-soft) both;
  }

  html[data-motion="soft"][data-review-motion="glide"] .review-card.is-leaving {
    animation: review-reference-glide-out 390ms cubic-bezier(0.4, 0, 0.7, 0.2) both;
  }

  html[data-motion="soft"][data-review-motion="lift"] .review-card.is-entering {
    animation: review-reference-lift-in 720ms var(--ease-apple-soft) both;
  }

  html[data-motion="soft"][data-review-motion="lift"] .review-card.is-leaving {
    animation: review-reference-lift-out 410ms cubic-bezier(0.4, 0, 0.68, 0.2) both;
  }

  html[data-motion="soft"][data-review-motion="shimmer"] .review-card.is-entering {
    animation: review-reference-shimmer-in 720ms var(--ease-apple-soft) both;
  }

  html[data-motion="soft"][data-review-motion="shimmer"] .review-card.is-leaving {
    animation: review-reference-shimmer-out 400ms ease-in both;
  }

  html[data-motion="soft"][data-review-motion="focus"] .review-card.is-entering {
    animation: review-reference-focus-in 760ms var(--ease-apple-soft) both;
  }

  html[data-motion="soft"][data-review-motion="focus"] .review-card.is-leaving {
    animation: review-reference-focus-out 420ms cubic-bezier(0.4, 0, 0.7, 0.2) both;
  }

  html[data-motion="soft"][data-review-motion="lines"] .review-card.is-entering {
    animation: review-reference-shell-in 620ms ease-out both;
  }

  html[data-motion="soft"][data-review-motion="lines"] .review-card.is-leaving {
    animation: review-reference-story-out 410ms cubic-bezier(0.4, 0, 0.68, 0.2) both;
  }

  html[data-motion="soft"] .review-card.is-entering .review-rating span {
    animation: review-reference-star-in 520ms var(--ease-apple-soft) both;
  }

  html[data-motion="soft"] .review-card.is-entering .review-rating span:nth-child(1) { animation-delay: 70ms; }
  html[data-motion="soft"] .review-card.is-entering .review-rating span:nth-child(2) { animation-delay: 105ms; }
  html[data-motion="soft"] .review-card.is-entering .review-rating span:nth-child(3) { animation-delay: 140ms; }
  html[data-motion="soft"] .review-card.is-entering .review-rating span:nth-child(4) { animation-delay: 175ms; }
  html[data-motion="soft"] .review-card.is-entering .review-rating span:nth-child(5) { animation-delay: 210ms; }

  html[data-motion="soft"] .review-card.is-entering .review-quote-mark {
    animation: review-reference-mark-in 650ms 80ms var(--ease-apple-soft) both;
  }

  html[data-motion="soft"] .review-card.is-entering .review-quote-line {
    animation: review-reference-line-in 620ms var(--ease-apple-soft) both;
  }

  html[data-motion="soft"] .review-card.is-entering .review-quote-line:nth-child(1) { animation-delay: 135ms; }
  html[data-motion="soft"] .review-card.is-entering .review-quote-line:nth-child(2) { animation-delay: 185ms; }
  html[data-motion="soft"] .review-card.is-entering .review-quote-line:nth-child(3) { animation-delay: 235ms; }
  html[data-motion="soft"] .review-card.is-entering .review-quote-line:nth-child(4) { animation-delay: 285ms; }

  html[data-motion="soft"] .review-card.is-entering .review-avatar {
    animation: review-reference-avatar-in 700ms 150ms var(--ease-apple-soft) both;
  }

  html[data-motion="soft"] .review-card.is-entering .review-avatar::after {
    animation: review-reference-status-in 560ms 360ms var(--ease-apple-soft) both;
  }

  html[data-motion="soft"] .review-card.is-entering .review-person {
    animation: review-reference-author-in 560ms 225ms var(--ease-apple-soft) both;
  }

  html[data-motion="soft"] .review-card.is-entering::after {
    animation: review-reference-sheen 980ms 120ms ease-out both;
  }
}

@keyframes review-reference-green-drift {
  from { opacity: 0.9; transform: translate3d(-4px, -2px, 0) rotate(-5deg) scale(0.98); }
  to { opacity: 1; transform: translate3d(7px, 6px, 0) rotate(-1deg) scale(1.04); }
}

@keyframes review-reference-violet-drift {
  from { opacity: 0.75; transform: translate3d(3px, 5px, 0) rotate(-7deg) scale(0.97); }
  to { opacity: 0.9; transform: translate3d(-8px, -5px, 0) rotate(-2deg) scale(1.05); }
}

@keyframes review-reference-dots {
  from { opacity: 0.4; transform: translate3d(0, -2px, 0); }
  to { opacity: 0.78; transform: translate3d(-5px, 5px, 0); }
}

@keyframes review-reference-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes review-reference-story-in {
  from { opacity: 0; clip-path: inset(7% 0 4% 10% round 26px); transform: translate3d(18px, 4px, 0) scale(0.985); filter: blur(5px); }
  62% { opacity: 1; }
  to { opacity: 1; clip-path: inset(0 round 0); transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes review-reference-story-out {
  from { opacity: 1; clip-path: inset(0 round 0); transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  to { opacity: 0; clip-path: inset(3% 9% 8% 0 round 24px); transform: translate3d(-15px, -3px, 0) scale(0.992); filter: blur(3px); }
}

@keyframes review-reference-glide-in {
  from { opacity: 0; transform: translate3d(28px, 0, 0); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes review-reference-glide-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(-21px, 0, 0); }
}

@keyframes review-reference-lift-in {
  from { opacity: 0; transform: translate3d(0, 19px, 0) scale(0.975); filter: blur(4px); }
  70% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.006); filter: blur(0); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes review-reference-lift-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.99); filter: blur(2px); }
}

@keyframes review-reference-shimmer-in {
  from { opacity: 0; filter: brightness(1.16) saturate(0.86); transform: scale(0.99); }
  to { opacity: 1; filter: brightness(1) saturate(1); transform: scale(1); }
}

@keyframes review-reference-shimmer-out {
  from { opacity: 1; filter: brightness(1); }
  to { opacity: 0; filter: brightness(1.13); }
}

@keyframes review-reference-focus-in {
  from { opacity: 0; transform: scale(0.955); filter: blur(9px); }
  65% { opacity: 1; }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes review-reference-focus-out {
  from { opacity: 1; transform: scale(1); filter: blur(0); }
  to { opacity: 0; transform: scale(1.018); filter: blur(6px); }
}

@keyframes review-reference-shell-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes review-reference-star-in {
  from { opacity: 0; transform: translate3d(0, 7px, 0) rotate(-13deg) scale(0.45); }
  72% { opacity: 1; transform: translate3d(0, -1px, 0) rotate(2deg) scale(1.08); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes review-reference-mark-in {
  from { opacity: 0; transform: translate3d(-8px, 7px, 0) rotate(-8deg) scale(0.66); }
  72% { opacity: 1; transform: translate3d(1px, -1px, 0) rotate(1deg) scale(1.04); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes review-reference-line-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(0, 8px, 0); }
  to { opacity: 1; clip-path: inset(0); transform: translate3d(0, 0, 0); }
}

@keyframes review-reference-avatar-in {
  from { opacity: 0; transform: translate3d(-8px, 12px, 0) rotate(-12deg) scale(0.72); filter: blur(3px); }
  72% { opacity: 1; transform: translate3d(1px, -1px, 0) rotate(2deg) scale(1.035); filter: blur(0); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes review-reference-status-in {
  from { opacity: 0; transform: scale(0); }
  68% { opacity: 1; transform: scale(1.24); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes review-reference-author-in {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes review-reference-sheen {
  from { opacity: 0; transform: translate3d(0, 0, 0) skewX(-13deg); }
  28% { opacity: 0.58; }
  to { opacity: 0; transform: translate3d(590%, 0, 0) skewX(-13deg); }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-showcase,
  .reviews-showcase::before,
  .reviews-showcase::after,
  .review-card-stage::before,
  .review-card,
  .review-card::after,
  .review-rating span,
  .review-quote-mark,
  .review-quote-line,
  .review-avatar,
  .review-avatar::after,
  .review-person,
  .review-progress i::after {
    animation: none !important;
    transition: none !important;
  }

  .review-progress i.is-active::after {
    transform: scaleX(1);
  }
}


/* Homepage V62: load-stable hero. The scene now reserves its final geometry from the
   first frame; only opacity is animated. Local leaves keep their existing paths but
   receive a separate nested staggered veil, so their permanent flutter timeline can
   never skip the entrance fade on slower or smaller devices. */
.hero-motion-leaf-veil {
  display: block;
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"] body[data-site-version="new"] .hero-media {
    animation: hero-media-stable-reveal 820ms 90ms var(--ease-apple-soft) both;
  }

  .hero-motion-leaf-veil {
    opacity: 0;
    translate: 0 -14px;
  }

  html.is-intro-settled .hero-motion-leaf-veil {
    animation: hero-leaf-intro-veil 1040ms var(--leaf-intro-delay, 0ms) var(--ease-apple-soft) both;
  }

  .hero-motion-leaf:nth-child(1) { --leaf-intro-delay: 0ms; }
  .hero-motion-leaf:nth-child(2) { --leaf-intro-delay: 55ms; }
  .hero-motion-leaf:nth-child(3) { --leaf-intro-delay: 110ms; }
  .hero-motion-leaf:nth-child(4) { --leaf-intro-delay: 165ms; }
  .hero-motion-leaf:nth-child(5) { --leaf-intro-delay: 220ms; }
  .hero-motion-leaf:nth-child(6) { --leaf-intro-delay: 275ms; }
  .hero-motion-leaf:nth-child(7) { --leaf-intro-delay: 330ms; }
  .hero-motion-leaf:nth-child(8) { --leaf-intro-delay: 385ms; }
  .hero-motion-leaf:nth-child(9) { --leaf-intro-delay: 440ms; }
}

@keyframes hero-media-stable-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-leaf-intro-veil {
  from { opacity: 0; translate: 0 -14px; }
  to { opacity: 1; translate: 0 0; }
}

html[data-hero-art="pending"] body[data-site-version="new"] .hero-media img.hero-garden-art {
  opacity: 0;
}

html[data-hero-art="ready"] body[data-site-version="new"] .hero-media img.hero-garden-art {
  opacity: 1;
}

body[data-site-version="new"] .hero-media img.hero-garden-art {
  aspect-ratio: 1568 / 1003;
  transition-property: transform, opacity;
  transition-duration: 620ms, 720ms;
  transition-timing-function: var(--ease-apple-soft), var(--ease-apple-soft);
}

@media (prefers-reduced-motion: reduce) {
  html[data-review-motion="focus"] .review-card,
  html[data-review-motion="lines"] .review-card,
  html[data-review-motion="lines"] .review-card-meta,
  html[data-review-motion="lines"] .review-card blockquote {
    animation: none !important;
  }
}

/* Homepage V54: an editorial customer-voice stage replaces the former benefits intro.
   The cards to the right stay intentionally untouched; this surface gives the first
   column a living, human counterpoint without turning the section into another grid. */
.reviews-showcase {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 290px;
  align-content: center;
  gap: 10px;
  padding: 22px 24px 19px;
  overflow: hidden;
  border: 1px solid rgba(25, 107, 59, 0.08);
  border-radius: 27px 58px 27px 27px;
  background:
    radial-gradient(circle at 7% 90%, rgba(161, 230, 142, 0.26), transparent 42%),
    radial-gradient(circle at 93% 5%, rgba(209, 236, 255, 0.72), transparent 44%),
    linear-gradient(142deg, rgba(255, 255, 255, 0.9), rgba(248, 253, 247, 0.72));
  box-shadow: 0 17px 42px rgba(33, 89, 57, 0.09), inset 0 1px rgba(255, 255, 255, 0.9);
}

.reviews-showcase::before,
.reviews-showcase::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.reviews-showcase::before {
  width: 176px;
  height: 176px;
  right: -72px;
  bottom: -92px;
  border: 1px solid rgba(55, 168, 79, 0.12);
  border-radius: 46% 54% 61% 39% / 44% 45% 55% 56%;
  background: radial-gradient(circle at 36% 34%, rgba(209, 251, 202, 0.68), rgba(161, 224, 191, 0.08) 64%, transparent 66%);
  filter: blur(0.1px);
  transform: rotate(-14deg);
}

.reviews-showcase::after {
  top: 20px;
  right: 26px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(38, 152, 73, 0.1);
  border-radius: 12px 17px 13px 17px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: -18px 33px 0 -14px rgba(37, 166, 72, 0.26);
  transform: rotate(26deg);
}

.reviews-showcase > * {
  position: relative;
  z-index: 1;
}

.reviews-showcase-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reviews-showcase-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #168e3e;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.reviews-showcase-kicker svg {
  width: 14px;
  height: 14px;
  fill: #1cac49;
}

.reviews-showcase-count {
  min-width: 39px;
  color: #789083;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 740;
  letter-spacing: 0.03em;
  text-align: right;
}

.reviews-showcase h2 {
  max-width: 15ch;
  margin: 0;
  color: #102529;
  font-size: clamp(18px, 1.45vw, 23px);
  font-weight: 830;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.review-card-stage {
  position: relative;
  min-height: 133px;
}

.review-card {
  --review-primary: #149a42;
  --review-soft: #e9f8e9;
  --review-shadow: rgba(33, 138, 65, 0.16);
  position: absolute;
  inset: 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: 13px 14px 11px;
  overflow: hidden;
  border: 1px solid rgba(25, 76, 51, 0.07);
  border-radius: 18px 18px 22px 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 24px rgba(28, 84, 53, 0.07), inset 0 1px rgba(255, 255, 255, 0.94);
  transform: translate3d(0, 0, 0);
}

.review-card[data-review-tone="blue"] {
  --review-primary: #487ce9;
  --review-soft: #edf3ff;
  --review-shadow: rgba(65, 116, 223, 0.15);
}

.review-card[data-review-tone="violet"] {
  --review-primary: #8b61dc;
  --review-soft: #f3edff;
  --review-shadow: rgba(132, 88, 214, 0.16);
}

.review-card[data-review-tone="coral"] {
  --review-primary: #d36d55;
  --review-soft: #fff0eb;
  --review-shadow: rgba(211, 109, 85, 0.16);
}

.review-card::after {
  content: "";
  position: absolute;
  inset: -34% auto -34% -45%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82), transparent);
  opacity: 0;
  pointer-events: none;
  transform: skewX(-16deg);
}

.review-card-meta {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.review-avatar {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--review-primary) 13%, white);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 25%, #ffffff, var(--review-soft) 59%, color-mix(in srgb, var(--review-primary) 23%, white));
  color: var(--review-primary);
  box-shadow: 0 5px 12px var(--review-shadow);
  font-size: 9.5px;
  font-weight: 880;
  letter-spacing: -0.04em;
}

.review-avatar::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  bottom: -4px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: var(--review-primary);
}

.review-avatar i {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 8px;
  height: 8px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: #25b754;
}

.review-avatar span {
  position: relative;
  z-index: 1;
}

.review-person {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.review-person strong,
.review-person small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-person strong {
  color: #162a2d;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.review-person small {
  color: #7a898c;
  font-size: 8.5px;
  font-weight: 670;
}

.review-score {
  display: grid;
  gap: 1px;
  color: #f1a107;
  font-size: 8px;
  line-height: 1;
  text-align: right;
}

.review-score span { letter-spacing: -0.08em; }

.review-score b {
  color: #2c4143;
  font-size: 8.5px;
  font-weight: 850;
}

.review-card blockquote {
  display: -webkit-box;
  max-width: 35ch;
  margin: 9px 0 7px;
  overflow: hidden;
  color: #42575a;
  font-size: clamp(10px, 0.62vw, 11.5px);
  font-weight: 610;
  letter-spacing: -0.012em;
  line-height: 1.47;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.review-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #90a099;
  font-size: 8px;
  font-weight: 730;
}

.review-recommendation {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--review-primary);
}

.review-recommendation svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.35;
}

.review-progress {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-top: 1px;
}

.review-progress i {
  position: relative;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(42, 112, 69, 0.13);
}

.review-progress i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #1db54c, #72d37d);
  transform: translateX(-102%);
}

.review-progress i.is-complete::after { transform: translateX(0); }

html[data-motion="soft"] .top-benefits.is-motion-active .review-progress i.is-active::after {
  animation: reviews-progress-fill 5.8s linear forwards;
}

html[data-motion="soft"] .top-benefits.is-motion-active .reviews-showcase::before {
  animation: reviews-orbit-drift 9s var(--ease-apple-soft) infinite alternate;
}

.review-card.is-entering { animation: review-glide-in 680ms var(--ease-apple-soft) both; }
.review-card.is-leaving { animation: review-glide-out 420ms cubic-bezier(0.4, 0, 0.72, 0.2) both; }

html[data-review-motion="lift"] .review-card.is-entering { animation-name: review-lift-in; }
html[data-review-motion="lift"] .review-card.is-leaving { animation-name: review-lift-out; }
html[data-review-motion="shimmer"] .review-card.is-entering { animation-name: review-shimmer-in; }
html[data-review-motion="shimmer"] .review-card.is-leaving { animation-name: review-shimmer-out; }
html[data-review-motion="shimmer"] .review-card.is-entering::after { animation: review-card-sheen 780ms 120ms ease-out both; }

@keyframes reviews-progress-fill {
  from { transform: translateX(-102%); }
  to { transform: translateX(0); }
}

@keyframes reviews-orbit-drift {
  from { transform: translate3d(-3px, 5px, 0) rotate(-14deg) scale(0.98); }
  to { transform: translate3d(8px, -7px, 0) rotate(15deg) scale(1.03); }
}

@keyframes review-glide-in {
  from { opacity: 0; transform: translate3d(20px, 6px, 0) scale(0.975); filter: blur(2px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes review-glide-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(-16px, -3px, 0) scale(0.98); }
}

@keyframes review-lift-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.94); filter: blur(3px); }
  62% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.012); filter: blur(0); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes review-lift-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, -13px, 0) scale(0.97); filter: blur(1px); }
}

@keyframes review-shimmer-in {
  from { opacity: 0; transform: scale(0.992); filter: brightness(1.18) blur(1px); }
  to { opacity: 1; transform: scale(1); filter: brightness(1) blur(0); }
}

@keyframes review-shimmer-out {
  from { opacity: 1; filter: brightness(1); }
  to { opacity: 0; filter: brightness(1.15); }
}

@keyframes review-card-sheen {
  from { opacity: 0; transform: translate3d(0, 0, 0) skewX(-16deg); }
  24% { opacity: 0.68; }
  to { opacity: 0; transform: translate3d(520%, 0, 0) skewX(-16deg); }
}

@media (max-height: 1065px) and (min-width: 1181px) {
  .reviews-showcase {
    height: 100%;
    min-height: 0;
    padding: 16px 18px 14px;
  }

  .reviews-showcase h2 { font-size: 18px; }
  .review-card-stage { min-height: 105px; }
  .review-card { padding: 10px 11px 9px; }
  .review-card blockquote { margin: 6px 0 5px; font-size: 10px; line-height: 1.38; }
}

@media (max-height: 940px) and (min-width: 1181px) {
  .reviews-showcase { padding: 11px 14px 10px; }
  .reviews-showcase-kicker { font-size: 8.5px; }
  .reviews-showcase h2 { font-size: 16px; }
  .review-card-stage { min-height: 92px; }
  .review-card-meta { grid-template-columns: 27px minmax(0, 1fr) auto; gap: 6px; }
  .review-avatar { width: 27px; height: 27px; font-size: 8px; }
  .review-person strong { font-size: 9px; }
  .review-person small, .review-card-footer, .review-score { font-size: 7px; }
  .review-card blockquote { margin: 4px 0; font-size: 9px; -webkit-line-clamp: 2; }
}

@media (max-width: 1080px) {
  .reviews-showcase {
    grid-column: 1 / -1;
    min-height: 214px;
    padding: 18px 22px;
  }

  .reviews-showcase h2 { max-width: none; }
  .review-card-stage { min-height: 118px; }
}

@media (max-width: 760px) {
  .reviews-showcase {
    min-height: 224px;
    padding: 18px;
    border-radius: 24px 42px 24px 24px;
  }

  .reviews-showcase h2 { font-size: 21px; }
  .review-card-stage { min-height: 127px; }
  .review-card { padding: 13px 13px 11px; }
}

@media (max-width: 440px) {
  .review-card-footer > :last-child { display: none; }
  .review-card blockquote { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-showcase::before,
  .review-card,
  .review-card::after,
  .review-progress i::after { animation: none !important; }
}

/* Homepage V55: open, Google-inspired customer voices. The proof point is now a
   lightweight editorial strip rather than a card nested inside another card. */
.reviews-showcase {
  align-content: center;
  gap: 9px;
  padding: 20px 22px 17px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.reviews-showcase::before {
  width: 226px;
  height: 218px;
  right: auto;
  bottom: -82px;
  left: -76px;
  border: 0;
  border-radius: 57% 43% 54% 46% / 44% 54% 46% 56%;
  background: radial-gradient(circle at 56% 38%, rgba(228, 250, 220, 0.88), rgba(194, 235, 206, 0.23) 53%, transparent 71%);
  box-shadow: none;
  opacity: 0.82;
}

.reviews-showcase::after {
  top: 33px;
  right: 5px;
  width: 46px;
  height: 1px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(34, 171, 78, 0), rgba(34, 171, 78, 0.48));
  box-shadow: 9px 8px 0 -0.2px rgba(88, 159, 229, 0.3);
  transform: none;
}

.reviews-showcase h2 {
  max-width: 14ch;
  color: #112629;
  font-size: clamp(19px, 1.56vw, 24px);
  line-height: 1.04;
}

.review-card-stage { min-height: 138px; }

.review-card {
  padding: 4px 5px 6px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.review-card::after {
  top: 41px;
  right: auto;
  bottom: auto;
  left: -46%;
  width: 40%;
  height: 58px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82), transparent);
}

.review-card-meta {
  grid-template-columns: 37px minmax(0, 1fr) auto;
  gap: 9px;
}

.review-avatar {
  width: 37px;
  height: 37px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--review-primary);
  font-size: 10px;
}

.review-avatar::before {
  width: 35px;
  height: 35px;
  top: 1px;
  right: auto;
  bottom: auto;
  left: 1px;
  border: 0;
  border-radius: 47% 53% 43% 57% / 51% 44% 56% 49%;
  background:
    radial-gradient(circle at 26% 25%, rgba(255, 255, 255, 0.97) 0 10%, transparent 11%),
    conic-gradient(from 214deg, color-mix(in srgb, var(--review-primary) 25%, white), var(--review-soft), color-mix(in srgb, var(--review-primary) 60%, white), var(--review-soft), color-mix(in srgb, var(--review-primary) 22%, white));
  box-shadow: 0 6px 13px var(--review-shadow);
  transform: rotate(-10deg);
}

.review-avatar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--review-primary) 78%, white);
  box-shadow: 0 2px 6px var(--review-shadow);
}

.review-avatar span { color: #315342; }
.review-avatar i { display: none; }

.review-person strong { font-size: 11px; }
.review-person small { color: #7b8b8b; font-size: 8.5px; }

.review-score {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #f5a300;
  font-size: 9px;
}

.review-score span { letter-spacing: -0.12em; }
.review-score b { color: #506064; font-size: 9px; }

.review-card blockquote {
  display: block;
  max-width: 31ch;
  min-height: 43px;
  margin: 10px 0 9px;
  overflow: visible;
  color: #40565a;
  font-size: clamp(10.6px, 0.68vw, 12px);
  font-weight: 610;
  letter-spacing: -0.017em;
  line-height: 1.46;
}

.review-card-footer {
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--review-primary) 10%, transparent);
  color: #94a29c;
}

.review-progress {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin-top: 1px;
}

.review-progress i {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  transition: width 420ms var(--ease-apple-soft), background-color 250ms ease;
  background: rgba(37, 119, 72, 0.17);
}

.review-progress i.is-active {
  width: 28px;
  background: rgba(37, 159, 74, 0.12);
}

.review-progress i.is-complete { background: rgba(31, 176, 72, 0.5); }
.review-progress i.is-complete::after { display: none; }

.review-card.is-entering { animation: review-open-glide-in 600ms var(--ease-apple-soft) both; }
.review-card.is-leaving { animation: review-open-glide-out 330ms cubic-bezier(0.4, 0, 0.72, 0.2) both; }
html[data-review-motion="lift"] .review-card.is-entering { animation-name: review-open-lift-in; }
html[data-review-motion="lift"] .review-card.is-leaving { animation-name: review-open-lift-out; }
html[data-review-motion="shimmer"] .review-card.is-entering { animation-name: review-open-shimmer-in; }
html[data-review-motion="shimmer"] .review-card.is-leaving { animation-name: review-open-shimmer-out; }

.review-card.is-entering .review-card-meta { animation: review-content-in 430ms 70ms var(--ease-apple-soft) both; }
.review-card.is-entering blockquote { animation: review-content-in 460ms 130ms var(--ease-apple-soft) both; }
.review-card.is-entering .review-card-footer { animation: review-content-in 430ms 175ms var(--ease-apple-soft) both; }

@keyframes review-open-glide-in {
  from { opacity: 0; transform: translate3d(14px, 4px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes review-open-glide-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(-10px, -2px, 0); }
}

@keyframes review-open-lift-in {
  from { opacity: 0; transform: translate3d(0, 13px, 0) scale(0.985); }
  65% { opacity: 1; transform: translate3d(0, -1px, 0) scale(1.005); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes review-open-lift-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -8px, 0); }
}

@keyframes review-open-shimmer-in {
  from { opacity: 0; filter: brightness(1.12); transform: translate3d(0, 1px, 0); }
  to { opacity: 1; filter: brightness(1); transform: translate3d(0, 0, 0); }
}

@keyframes review-open-shimmer-out {
  from { opacity: 1; filter: brightness(1); }
  to { opacity: 0; filter: brightness(1.08); }
}

@keyframes review-content-in {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-height: 1065px) and (min-width: 1181px) {
  .reviews-showcase { padding: 13px 17px 12px; }
  .reviews-showcase h2 { font-size: 18px; }
  .review-card-stage { min-height: 102px; }
  .review-card { padding: 1px 3px 3px; }
  .review-card blockquote { min-height: 0; margin: 6px 0; font-size: 9.7px; line-height: 1.36; }
  .review-card-footer { padding-top: 5px; }
}

@media (max-height: 940px) and (min-width: 1181px) {
  .reviews-showcase { padding: 9px 12px 7px; }
  .reviews-showcase h2 { font-size: 15px; }
  .review-card-stage { min-height: 85px; }
  .review-card blockquote { margin: 4px 0; font-size: 8.8px; }
  .review-progress { gap: 4px; }
  .review-progress i { width: 3px; height: 3px; }
  .review-progress i.is-active { width: 19px; }
}

@media (max-width: 1080px) {
  .reviews-showcase { padding: 18px 22px 16px; }
  .reviews-showcase h2 { max-width: none; }
}

@media (max-width: 760px) {
  .reviews-showcase { padding: 18px 14px 15px; }
  .reviews-showcase::before { left: -96px; bottom: -106px; }
  .review-card-stage { min-height: 125px; }
  .review-card { padding-inline: 1px; }
  .review-card blockquote { max-width: 34ch; }
}

@keyframes hero-escape-flutter {
  from { transform: rotate(-9deg) scaleY(0.88); }
  to { transform: rotate(10deg) scaleY(1.03); }
}

@keyframes hero-weather-mobile-gust {
  0%, 22%, 68%, 100% { translate: 0 0; rotate: 0deg; }
  34% { translate: -7px -1px; rotate: -0.12deg; }
  46% { translate: -38px -4px; rotate: -0.68deg; }
  58% { translate: -14px -1px; rotate: -0.18deg; }
}

html.is-section-scrolling .hero-escape-leaf,
html.is-section-scrolling .hero-escape-leaf svg,
html.is-stage-transitioning .hero-escape-leaf,
html.is-stage-transitioning .hero-escape-leaf svg {
  animation-play-state: paused !important;
}

@media (max-width: 900px) {
  .hero-escape-leaves {
    display: none;
  }
}

/* Performance guard: the weather sandbox remains visually unchanged while the opening stage
   is nearby, but its many continuous compositor loops stop once the hero is offscreen. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-hero-motion-active) .hero-weather-field,
  html:not(.is-hero-motion-active) .hero-weather-field::after,
  html:not(.is-hero-motion-active) .hero-motion-leaf,
  html:not(.is-hero-motion-active) .hero-motion-leaf svg,
  html:not(.is-hero-motion-active) .hero-wind-trace,
  html:not(.is-hero-motion-active) .hero-escape-leaf,
  html:not(.is-hero-motion-active) .hero-escape-leaf svg {
    animation-play-state: paused !important;
  }

  html:not(.is-hero-motion-active) .hero-weather-field,
  html:not(.is-hero-motion-active) .hero-motion-leaf,
  html:not(.is-hero-motion-active) .hero-wind-trace,
  html:not(.is-hero-motion-active) .hero-escape-leaf {
    will-change: auto !important;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"].is-intro-settled[data-wind-effect] .hero-weather-field {
    animation-name: hero-weather-mobile-gust;
  }

  .hero-wind-trace,
  .hero-escape-leaf,
  .hero-escape-leaf svg {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-escape-leaves {
    display: none;
  }
}

/* V41 leaf lab: selectable silhouettes, density and fall character without moving hero content. */
.hero-leaf-shape {
  display: none;
}

html[data-leaf-style="garden"] .hero-leaf-shape-garden,
html[data-leaf-style="slender"] .hero-leaf-shape-slender,
html[data-leaf-style="maple"] .hero-leaf-shape-maple {
  display: inline;
}

html[data-leaf-style="slender"] :is(.hero-motion-leaf, .hero-escape-leaf) {
  filter: drop-shadow(0 6px 7px rgba(49, 111, 41, 0.12)) saturate(0.94);
}

html[data-leaf-style="maple"] :is(.hero-motion-leaf, .hero-escape-leaf) {
  filter: drop-shadow(0 7px 8px rgba(45, 106, 43, 0.14)) saturate(0.9) hue-rotate(-6deg);
}

.hero-motion-leaf-six {
  --leaf-left: 8%;
  --leaf-size: 18px;
  --leaf-color: #79bd45;
  --leaf-opacity: 0.5;
  --leaf-duration: 18.4s;
  --leaf-delay: -15.1s;
  --leaf-flutter: 3.6s;
  --leaf-angle: 18deg;
  --leaf-x-one: 7px;
  --leaf-x-two: -17px;
  --leaf-x-three: 9px;
  --leaf-x-four: -7px;
}

.hero-motion-leaf-seven {
  --leaf-left: 38%;
  --leaf-size: 21px;
  --leaf-color: #43a442;
  --leaf-opacity: 0.57;
  --leaf-duration: 12.9s;
  --leaf-delay: -8.4s;
  --leaf-flutter: 2.2s;
  --leaf-angle: -43deg;
  --leaf-x-one: -9px;
  --leaf-x-two: 17px;
  --leaf-x-three: 4px;
  --leaf-x-four: 29px;
}

.hero-motion-leaf-eight {
  --leaf-left: 57%;
  --leaf-size: 29px;
  --leaf-color: #9dcc46;
  --leaf-opacity: 0.52;
  --leaf-duration: 19.1s;
  --leaf-delay: -1.3s;
  --leaf-flutter: 3.8s;
  --leaf-angle: 57deg;
  --leaf-x-one: 19px;
  --leaf-x-two: -2px;
  --leaf-x-three: 31px;
  --leaf-x-four: 13px;
}

.hero-motion-leaf-nine {
  --leaf-left: 92%;
  --leaf-size: 20px;
  --leaf-color: #5cb34a;
  --leaf-opacity: 0.54;
  --leaf-duration: 14.1s;
  --leaf-delay: -11.9s;
  --leaf-flutter: 2.6s;
  --leaf-angle: -17deg;
  --leaf-x-one: -13px;
  --leaf-x-two: 3px;
  --leaf-x-three: -28px;
  --leaf-x-four: -11px;
}

.hero-escape-leaf-five {
  --escape-top: 19%;
  --escape-left: 83%;
  --escape-size: 17px;
  --escape-color: #75bc42;
  --escape-angle: 17deg;
  --escape-delay: 0.79s;
  --escape-x-one: -162px;
  --escape-y-one: -32px;
  --escape-x-two: -438px;
  --escape-y-two: 18px;
  --escape-x-three: -716px;
  --escape-y-three: 74px;
  --escape-x-four: -940px;
  --escape-y-four: 168px;
}

.hero-escape-leaf-six {
  --escape-top: 52%;
  --escape-left: 79%;
  --escape-size: 28px;
  --escape-color: #4ba641;
  --escape-angle: -52deg;
  --escape-delay: 0.86s;
  --escape-x-one: -148px;
  --escape-y-one: 18px;
  --escape-x-two: -472px;
  --escape-y-two: -18px;
  --escape-x-three: -772px;
  --escape-y-three: 118px;
  --escape-x-four: -1010px;
  --escape-y-four: 278px;
}

html[data-leaf-density="light"] .hero-motion-leaf {
  display: none;
}

html[data-leaf-density="light"] :is(.hero-motion-leaf-one, .hero-motion-leaf-three, .hero-motion-leaf-five),
html[data-leaf-density="lush"] .hero-motion-leaf {
  display: block;
}

html[data-leaf-density="balanced"] :is(
  .hero-motion-leaf-six,
  .hero-motion-leaf-seven,
  .hero-motion-leaf-eight,
  .hero-motion-leaf-nine
) {
  display: none;
}

.hero-escape-leaf {
  display: none;
}

html[data-leaf-density="light"][data-wind-effect] .hero-escape-leaf:first-child,
html[data-leaf-density="balanced"][data-wind-effect="sweep"] .hero-escape-leaf:nth-child(-n + 2),
html[data-leaf-density="balanced"][data-wind-effect="vortex"] .hero-escape-leaf:nth-child(-n + 3),
html[data-leaf-density="balanced"][data-wind-effect="burst"] .hero-escape-leaf:nth-child(-n + 4),
html[data-leaf-density="lush"][data-wind-effect="sweep"] .hero-escape-leaf:nth-child(-n + 4),
html[data-leaf-density="lush"][data-wind-effect="vortex"] .hero-escape-leaf:nth-child(-n + 5),
html[data-leaf-density="lush"][data-wind-effect="burst"] .hero-escape-leaf {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"].is-intro-settled[data-leaf-motion="fall"] .hero-motion-leaf {
    animation-name: hero-leaf-fall;
    animation-timing-function: linear;
  }

  html[data-motion="soft"].is-intro-settled[data-leaf-motion="dance"] .hero-motion-leaf {
    animation-name: hero-leaf-dance;
    animation-timing-function: cubic-bezier(0.44, 0.08, 0.56, 0.96);
  }

  html[data-motion="soft"].is-intro-settled[data-leaf-motion="glide"] .hero-motion-leaf {
    animation-name: hero-leaf-glide;
    animation-timing-function: cubic-bezier(0.34, 0.04, 0.42, 0.98);
  }

  html[data-motion="soft"].is-intro-settled[data-leaf-motion="fall"] .hero-motion-leaf svg {
    animation-name: hero-leaf-flutter;
  }

  html[data-motion="soft"].is-intro-settled[data-leaf-motion="dance"] .hero-motion-leaf svg {
    animation-name: hero-leaf-flutter-dance;
    animation-duration: 980ms;
  }

  html[data-motion="soft"].is-intro-settled[data-leaf-motion="glide"] .hero-motion-leaf svg {
    animation-name: hero-leaf-flutter-glide;
    animation-duration: 3.2s;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="sweep"] .hero-escape-leaf,
  html[data-motion="soft"].is-intro-settled[data-wind-effect="vortex"] .hero-escape-leaf,
  html[data-motion="soft"].is-intro-settled[data-wind-effect="burst"] .hero-escape-leaf {
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="sweep"] .hero-escape-leaf {
    animation-name: hero-escape-sweep;
    animation-timing-function: linear;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="vortex"] .hero-escape-leaf {
    animation-name: hero-escape-vortex;
    animation-timing-function: linear;
  }

  html[data-motion="soft"].is-intro-settled[data-wind-effect="burst"] .hero-escape-leaf {
    animation-name: hero-escape-burst;
    animation-timing-function: cubic-bezier(0.28, 0.03, 0.26, 1);
  }

  html[data-motion="soft"].is-intro-settled[data-leaf-motion="fall"] .hero-escape-leaf svg {
    animation: hero-escape-flutter 560ms ease-in-out infinite alternate;
  }

  html[data-motion="soft"].is-intro-settled[data-leaf-motion="dance"] .hero-escape-leaf svg {
    animation: hero-escape-flutter-dance 340ms ease-in-out infinite alternate;
  }

  html[data-motion="soft"].is-intro-settled[data-leaf-motion="glide"] .hero-escape-leaf svg {
    animation: hero-escape-flutter-glide 1.25s ease-in-out infinite alternate;
  }

  html[data-motion="soft"].is-intro-settled.is-leaf-preview .hero-motion-leaf {
    animation-delay: calc(var(--leaf-delay) - 1.8s);
  }

  html[data-motion="soft"].is-intro-settled.is-leaf-preview .hero-escape-leaf {
    animation-delay: calc(var(--escape-delay) - 1.6s);
  }
}

@keyframes hero-leaf-dance {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0) rotate(var(--leaf-angle)) scale(0.94);
  }
  9% { opacity: 0; }
  16% { opacity: var(--leaf-opacity); }
  31% {
    opacity: var(--leaf-opacity);
    transform: translate3d(calc(var(--leaf-x-one) + 34px), var(--leaf-y-one), 0) rotate(calc(var(--leaf-angle) + 124deg)) scale(1);
  }
  52% {
    transform: translate3d(calc(var(--leaf-x-two) - 36px), var(--leaf-y-two), 0) rotate(calc(var(--leaf-angle) + 254deg)) scale(0.96);
  }
  74% {
    opacity: var(--leaf-opacity);
    transform: translate3d(calc(var(--leaf-x-three) + 30px), var(--leaf-y-three), 0) rotate(calc(var(--leaf-angle) + 397deg)) scale(1.02);
  }
  91% { opacity: 0.32; }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--leaf-x-four) - 18px), var(--leaf-y-four), 0) rotate(calc(var(--leaf-angle) + 548deg)) scale(0.9);
  }
}

@keyframes hero-leaf-glide {
  0% {
    opacity: 0;
    transform: translate3d(44px, -22px, 0) rotate(calc(var(--leaf-angle) - 16deg)) scale(0.92);
  }
  10% { opacity: 0; }
  18% { opacity: var(--leaf-opacity); }
  34% {
    opacity: var(--leaf-opacity);
    transform: translate3d(calc(var(--leaf-x-one) + 20px), var(--leaf-y-one), 0) rotate(calc(var(--leaf-angle) + 32deg)) scale(1);
  }
  58% {
    transform: translate3d(calc(var(--leaf-x-two) - 22px), var(--leaf-y-two), 0) rotate(calc(var(--leaf-angle) + 72deg)) scale(0.98);
  }
  79% {
    opacity: var(--leaf-opacity);
    transform: translate3d(calc(var(--leaf-x-three) - 54px), var(--leaf-y-three), 0) rotate(calc(var(--leaf-angle) + 118deg)) scale(0.95);
  }
  93% { opacity: 0.3; }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--leaf-x-four) - 86px), var(--leaf-y-four), 0) rotate(calc(var(--leaf-angle) + 158deg)) scale(0.86);
  }
}

@keyframes hero-leaf-flutter-dance {
  from { transform: rotate(-15deg) scaleX(0.76) scaleY(0.98); }
  to { transform: rotate(17deg) scaleX(1.06) scaleY(0.94); }
}

@keyframes hero-leaf-flutter-glide {
  from { transform: rotate(-3deg) scale(0.98); }
  to { transform: rotate(5deg) scale(1.01); }
}

@keyframes hero-escape-flutter-dance {
  from { transform: rotate(-17deg) scaleX(0.68) scaleY(0.97); }
  to { transform: rotate(18deg) scaleX(1.07) scaleY(0.9); }
}

@keyframes hero-escape-flutter-glide {
  from { transform: rotate(-4deg) scaleX(0.9); }
  to { transform: rotate(6deg) scaleX(1.02); }
}

@media (max-width: 700px) {
  .hero-motion-leaf-five,
  .hero-motion-leaf-six,
  .hero-motion-leaf-seven,
  .hero-motion-leaf-eight,
  .hero-motion-leaf-nine {
    display: none !important;
  }
}

/* V48 full-span wind leaves: viewport-wide travel with selectable fade timing. */
.hero-escape-leaves {
  inset-block: 0;
  right: auto;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}

.hero-escape-leaf {
  --escape-alpha-near: 0.76;
  --escape-alpha-mid: 0.7;
  --escape-alpha-edge: 0.34;
  --escape-alpha-tail: 0.02;
}

html[data-leaf-fade="early"] .hero-escape-leaf {
  --escape-alpha-near: 0.7;
  --escape-alpha-mid: 0.4;
  --escape-alpha-edge: 0.02;
  --escape-alpha-tail: 0;
}

html[data-leaf-fade="late"] .hero-escape-leaf {
  --escape-alpha-near: 0.82;
  --escape-alpha-mid: 0.78;
  --escape-alpha-edge: 0.72;
  --escape-alpha-tail: 0.28;
}

.hero-escape-leaf-one {
  --escape-x-one: -18vw;
  --escape-x-two: -45vw;
  --escape-x-three: -72vw;
  --escape-x-four: -105vw;
}

.hero-escape-leaf-two {
  --escape-x-one: -22vw;
  --escape-x-two: -51vw;
  --escape-x-three: -80vw;
  --escape-x-four: -113vw;
}

.hero-escape-leaf-three {
  --escape-x-one: -27vw;
  --escape-x-two: -56vw;
  --escape-x-three: -86vw;
  --escape-x-four: -119vw;
}

.hero-escape-leaf-four {
  --escape-x-one: -20vw;
  --escape-x-two: -49vw;
  --escape-x-three: -77vw;
  --escape-x-four: -110vw;
}

.hero-escape-leaf-five {
  --escape-x-one: -31vw;
  --escape-x-two: -62vw;
  --escape-x-three: -93vw;
  --escape-x-four: -126vw;
}

.hero-escape-leaf-six {
  --escape-x-one: -27vw;
  --escape-x-two: -58vw;
  --escape-x-three: -89vw;
  --escape-x-four: -122vw;
}

@keyframes hero-escape-sweep {
  0%, 24%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--escape-angle)) scale(0.9);
  }
  30% {
    opacity: 0.08;
    transform: translate3d(-24px, -3px, 0) rotate(calc(var(--escape-angle) + 18deg)) scale(0.94);
  }
  40% {
    opacity: var(--escape-alpha-near);
    transform: translate3d(var(--escape-x-one), var(--escape-y-one), 0) rotate(calc(var(--escape-angle) + 116deg)) scale(1);
  }
  56% {
    opacity: var(--escape-alpha-mid);
    transform: translate3d(var(--escape-x-two), var(--escape-y-two), 0) rotate(calc(var(--escape-angle) + 258deg)) scale(0.96);
  }
  73% {
    opacity: var(--escape-alpha-edge);
    transform: translate3d(var(--escape-x-three), var(--escape-y-three), 0) rotate(calc(var(--escape-angle) + 421deg)) scale(0.86);
  }
  88% {
    opacity: var(--escape-alpha-tail);
    transform: translate3d(var(--escape-x-four), var(--escape-y-four), 0) rotate(calc(var(--escape-angle) + 566deg)) scale(0.68);
  }
  96% {
    opacity: 0;
    transform: translate3d(calc(var(--escape-x-four) - 14vw), calc(var(--escape-y-four) + 38px), 0) rotate(calc(var(--escape-angle) + 640deg)) scale(0.58);
  }
}

@keyframes hero-escape-vortex {
  0%, 22%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--escape-angle)) scale(0.88);
  }
  29% {
    opacity: 0.09;
    transform: translate3d(-30px, -8px, 0) rotate(calc(var(--escape-angle) + 24deg)) scale(0.94);
  }
  39% {
    opacity: var(--escape-alpha-near);
    transform: translate3d(var(--escape-x-one), calc(var(--escape-y-one) - 16px), 0) rotate(calc(var(--escape-angle) + 138deg)) scale(1);
  }
  54% {
    opacity: var(--escape-alpha-mid);
    transform: translate3d(var(--escape-x-two), calc(var(--escape-y-two) + 44px), 0) rotate(calc(var(--escape-angle) + 315deg)) scale(0.97);
  }
  72% {
    opacity: var(--escape-alpha-edge);
    transform: translate3d(var(--escape-x-three), calc(var(--escape-y-three) - 48px), 0) rotate(calc(var(--escape-angle) + 512deg)) scale(0.88);
  }
  88% {
    opacity: var(--escape-alpha-tail);
    transform: translate3d(var(--escape-x-four), calc(var(--escape-y-four) + 22px), 0) rotate(calc(var(--escape-angle) + 690deg)) scale(0.65);
  }
  96% {
    opacity: 0;
    transform: translate3d(calc(var(--escape-x-four) - 14vw), calc(var(--escape-y-four) + 58px), 0) rotate(calc(var(--escape-angle) + 782deg)) scale(0.55);
  }
}

@keyframes hero-escape-burst {
  0%, 18%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--escape-angle)) scale(0.86);
  }
  23% {
    opacity: 0.1;
    transform: translate3d(-36px, -5px, 0) rotate(calc(var(--escape-angle) + 30deg)) scale(0.94);
  }
  31% {
    opacity: var(--escape-alpha-near);
    transform: translate3d(var(--escape-x-one), calc(var(--escape-y-one) - 18px), 0) rotate(calc(var(--escape-angle) + 158deg)) scale(1.03);
  }
  45% {
    opacity: var(--escape-alpha-mid);
    transform: translate3d(var(--escape-x-two), calc(var(--escape-y-two) - 30px), 0) rotate(calc(var(--escape-angle) + 352deg)) scale(0.98);
  }
  61% {
    opacity: var(--escape-alpha-edge);
    transform: translate3d(var(--escape-x-three), calc(var(--escape-y-three) + 9px), 0) rotate(calc(var(--escape-angle) + 548deg)) scale(0.84);
  }
  77% {
    opacity: var(--escape-alpha-tail);
    transform: translate3d(var(--escape-x-four), calc(var(--escape-y-four) + 48px), 0) rotate(calc(var(--escape-angle) + 735deg)) scale(0.6);
  }
  86% {
    opacity: 0;
    transform: translate3d(calc(var(--escape-x-four) - 14vw), calc(var(--escape-y-four) + 82px), 0) rotate(calc(var(--escape-angle) + 824deg)) scale(0.5);
  }
}

/* Homepage V58: final cascade placement for the enlarged, stripped-back customer
   voice. This intentionally follows every historic benefits override. */
.reviews-showcase {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 20px 20px 17px;
}

.review-card-stage {
  width: 100%;
  min-height: 205px;
}

.review-card {
  justify-content: center;
  gap: 18px;
  padding: 15px 4px 8px;
}

.review-card-meta {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
}

.review-avatar {
  width: 48px;
  height: 48px;
  font-size: 12px;
}

.review-avatar::before {
  top: 1px;
  right: auto;
  bottom: auto;
  left: 1px;
  width: 46px;
  height: 46px;
}

.review-avatar::after {
  right: 0;
  bottom: 1px;
  width: 10px;
  height: 10px;
}

.review-person { gap: 0; }

.review-person strong {
  color: #14292c;
  font-size: clamp(15px, 0.9vw, 17px);
  font-weight: 850;
  letter-spacing: -0.025em;
}

.review-person small,
.review-score,
.review-card-footer {
  display: none;
}

.review-card blockquote {
  display: block;
  max-width: 25ch;
  min-height: 0;
  margin: 0;
  overflow: visible;
  color: #284145;
  font-size: clamp(16px, 0.98vw, 19px);
  font-weight: 650;
  letter-spacing: -0.026em;
  line-height: 1.35;
  -webkit-box-orient: initial;
  -webkit-line-clamp: initial;
}

.review-progress {
  justify-content: center;
  gap: 7px;
  margin-top: 0;
}

.review-progress i {
  width: 5px;
  height: 5px;
}

.review-progress i.is-active { width: 36px; }

@media (max-height: 1065px) and (min-width: 1181px) {
  .reviews-showcase {
    height: 100%;
    min-height: 0;
    gap: 8px;
    padding: 9px 14px 8px;
  }

  .review-card-stage { min-height: 176px; }
  .review-card { gap: 11px; padding: 8px 2px 4px; }
  .review-avatar { width: 41px; height: 41px; font-size: 10.5px; }
  .review-avatar::before { width: 39px; height: 39px; }
  .review-avatar::after { width: 9px; height: 9px; }
  .review-person strong { font-size: 14px; }
  .review-card blockquote { font-size: clamp(14px, 0.84vw, 16px); line-height: 1.34; }
  .review-progress { gap: 6px; }
  .review-progress i { width: 4px; height: 4px; }
  .review-progress i.is-active { width: 30px; }
}

@media (max-height: 940px) and (min-width: 1181px) {
  .reviews-showcase { padding: 8px 12px 7px; }
  .review-card-stage { min-height: 170px; }
  .review-card { gap: 10px; padding-block: 7px 3px; }
  .review-card-meta { grid-template-columns: 39px minmax(0, 1fr); gap: 11px; }
  .review-avatar { width: 39px; height: 39px; font-size: 10px; }
  .review-avatar::before { width: 37px; height: 37px; }
  .review-person strong { font-size: 13.5px; }
  .review-card blockquote { max-width: 27ch; margin: 0; font-size: clamp(13.5px, 0.8vw, 15px); line-height: 1.32; }
  .review-progress { gap: 5px; }
  .review-progress i { width: 4px; height: 4px; }
  .review-progress i.is-active { width: 27px; }
}

@media (max-width: 1080px) {
  .reviews-showcase {
    min-height: 245px;
    padding: 20px 24px 17px;
  }

  .review-card-stage { min-height: 185px; }
  .review-card blockquote { max-width: 38ch; }
}

@media (max-width: 760px) {
  .reviews-showcase {
    min-height: 260px;
    gap: 12px;
    padding: 17px 15px 15px;
  }

  .review-card-stage { min-height: 200px; }
  .review-card { gap: 15px; padding: 13px 2px 7px; }
  .review-card-meta { grid-template-columns: 45px minmax(0, 1fr); gap: 13px; }
  .review-avatar { width: 45px; height: 45px; font-size: 11px; }
  .review-avatar::before { width: 43px; height: 43px; }
  .review-person strong { font-size: 15px; }
  .review-card blockquote { max-width: none; margin: 0; font-size: 17px; line-height: 1.36; }
}

/* V63 final cascade placement: the historic benefits experiments below the main
   component block still target the same class names, so the approved reference
   treatment is repeated here once, after every legacy override. */
.reviews-showcase {
  position: relative;
  isolation: isolate;
  display: block;
  height: 100%;
  min-height: 290px;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.94);
  border-radius: 30px 104px 29px 29px / 30px 92px 29px 29px;
  background:
    radial-gradient(circle at 68% 84%, rgba(255, 241, 212, 0.28), transparent 42%),
    radial-gradient(circle at 18% 76%, rgba(222, 251, 216, 0.48), transparent 47%),
    linear-gradient(132deg, rgba(255, 255, 255, 0.96), rgba(252, 254, 247, 0.9) 62%, rgba(255, 253, 245, 0.88));
  box-shadow:
    0 24px 52px rgba(32, 88, 55, 0.1),
    0 3px 8px rgba(31, 87, 53, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.reviews-showcase::before {
  top: -52px;
  right: auto;
  bottom: auto;
  left: -30px;
  width: 48%;
  height: 49%;
  border: 0;
  border-radius: 0 0 86% 0 / 0 0 100% 0;
  background: radial-gradient(circle at 71% 69%, rgba(165, 255, 195, 0.94), rgba(70, 218, 142, 0.84) 45%, rgba(37, 186, 117, 0.56) 68%, transparent 71%);
  box-shadow: none;
  filter: blur(0.2px);
  opacity: 0.94;
  transform: rotate(-4deg);
  transform-origin: 18% 18%;
}

.reviews-showcase::after {
  top: auto;
  right: -44px;
  bottom: -58px;
  left: auto;
  width: 47%;
  height: 53%;
  border: 0;
  border-radius: 92% 0 0 0 / 100% 0 0 0;
  background: radial-gradient(circle at 44% 37%, rgba(246, 211, 255, 0.96), rgba(216, 185, 255, 0.82) 46%, rgba(161, 126, 250, 0.43) 69%, transparent 72%);
  box-shadow: none;
  filter: blur(0.15px);
  opacity: 0.83;
  transform: rotate(-5deg);
  transform-origin: 100% 100%;
}

.review-card-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  min-height: 0;
}

.review-card-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 11px;
  right: 13px;
  width: 78px;
  height: 58px;
  background-image: radial-gradient(circle, rgba(73, 205, 116, 0.22) 0 1.35px, transparent 1.6px);
  background-position: center;
  background-size: 12px 12px;
  opacity: 0.7;
  pointer-events: none;
}

.review-card {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  min-width: 0;
  justify-content: normal;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.review-card::after {
  top: -22%;
  right: auto;
  bottom: -22%;
  left: -42%;
  width: 28%;
  height: auto;
  background: linear-gradient(96deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  opacity: 0;
  transform: skewX(-13deg);
}

.review-rating {
  top: 18%;
  left: 33.5%;
  gap: 4px;
  font-size: clamp(16px, 1.02vw, 20px);
}

.review-quote-mark {
  top: 30.5%;
  left: 8.7%;
  font-size: clamp(61px, 4.15vw, 78px);
}

.review-card blockquote {
  position: absolute;
  top: 33%;
  left: 33.5%;
  display: block;
  width: 61.5%;
  max-width: none;
  min-height: 0;
  margin: 0;
  overflow: visible;
  color: #193338;
  font-size: clamp(17px, 1.03vw, 20px);
  font-weight: 760;
  letter-spacing: -0.033em;
  line-height: 1.28;
  -webkit-box-orient: initial;
  -webkit-line-clamp: initial;
}

.review-author {
  bottom: 6.5%;
  left: 6.7%;
  max-width: 24%;
  gap: 9px;
}

.review-avatar {
  width: 52px;
  height: 52px;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: #fff;
  font-size: 13px;
}

.review-avatar::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 46% 54% 49% 51% / 53% 47% 53% 47%;
  background:
    radial-gradient(circle at 27% 23%, rgba(255, 255, 255, 0.93) 0 7%, transparent 17%),
    linear-gradient(145deg, color-mix(in srgb, var(--review-primary) 26%, white), var(--review-primary) 62%, color-mix(in srgb, var(--review-primary) 72%, #543dcc));
  box-shadow:
    0 8px 18px var(--review-shadow),
    inset 0 1px 3px rgba(255, 255, 255, 0.72);
}

.review-avatar::after {
  top: 5px;
  right: -4px;
  bottom: auto;
  width: 13px;
  height: 13px;
  border: 2.5px solid rgba(255, 255, 255, 0.96);
  background: #34c857;
}

.review-avatar span { color: #fff; }

.review-person {
  display: grid;
  gap: 3px;
}

.review-person strong,
.review-person small {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.review-person strong {
  color: #12272b;
  font-size: clamp(12.5px, 0.73vw, 14px);
  line-height: 1.1;
}

.review-person small {
  color: #607377;
  font-size: clamp(9.5px, 0.55vw, 10.5px);
  font-weight: 560;
  line-height: 1.2;
}

.review-accent,
.review-progress {
  position: absolute;
  z-index: 3;
  bottom: 17.2%;
  left: 33.5%;
  display: block;
  width: 94px;
  height: 3px;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
}

.review-progress {
  justify-content: normal;
  gap: 0;
  background: transparent;
}

.review-progress i,
.review-progress i.is-complete {
  display: none;
}

.review-progress i.is-active {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

.review-progress i.is-active::after {
  display: block;
  background: linear-gradient(90deg, #38c267 0%, #58cfa0 45%, #9b74f1 100%);
  transform: scaleX(0);
  transform-origin: left center;
}

@media (min-width: 1181px) {
  .top-benefits-inner {
    grid-template-columns: minmax(0, 1.78fr) repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .top-benefits-inner {
    width: min(1780px, calc(65.5vw + 214px));
    grid-template-columns: minmax(0, 1.88fr) repeat(4, minmax(0, 1fr));
  }
}

@media (max-height: 1065px) and (min-width: 1181px) {
  .reviews-showcase { min-height: 0; padding: 0; }
  .review-rating { top: 15%; gap: 3px; font-size: clamp(14px, 0.87vw, 17px); }
  .review-quote-mark { top: 28%; font-size: clamp(53px, 3.55vw, 67px); }
  .review-card blockquote { top: 30%; font-size: clamp(15px, 0.88vw, 17px); line-height: 1.26; }
  .review-author { bottom: 5.5%; gap: 7px; }
  .review-avatar { width: 44px; height: 44px; font-size: 11px; }
  .review-avatar::after { top: 4px; width: 11px; height: 11px; border-width: 2px; }
  .review-person strong { font-size: 12.5px; }
  .review-person small { font-size: 9px; }
  .review-accent,
  .review-progress { bottom: 15%; width: 82px; }
}

@media (max-height: 940px) and (min-width: 1181px) {
  .review-card-stage { min-height: 0; }
  .review-card-stage::before { top: 5px; right: 7px; width: 64px; height: 42px; background-size: 10px 10px; }
  .review-rating { top: 12%; gap: 2px; font-size: clamp(11.5px, 0.72vw, 14px); }
  .review-quote-mark { top: 26%; font-size: clamp(43px, 2.95vw, 56px); }
  .review-card blockquote { top: 27%; font-size: clamp(12px, 0.74vw, 14px); line-height: 1.23; }
  .review-author { bottom: 4.5%; gap: 5px; }
  .review-avatar { width: 36px; height: 36px; font-size: 9px; }
  .review-avatar::after { top: 3px; right: -3px; width: 9px; height: 9px; border-width: 1.5px; }
  .review-person { gap: 2px; }
  .review-person strong { font-size: 10.5px; }
  .review-person small { font-size: 7.8px; }
  .review-accent,
  .review-progress { bottom: 13.5%; width: 66px; height: 2px; }
}

@media (max-width: 1080px) {
  .reviews-showcase { grid-column: 1 / -1; min-height: 285px; padding: 0; }
  .review-card-stage { min-height: 0; }
}

@media (max-width: 760px) {
  .reviews-showcase {
    min-height: 286px;
    gap: 0;
    padding: 0;
    border-radius: 25px 78px 25px 25px / 25px 70px 25px 25px;
  }

  .reviews-showcase::before { top: -38px; left: -25px; width: 51%; height: 45%; }
  .reviews-showcase::after { right: -38px; bottom: -52px; width: 52%; height: 49%; }
  .review-rating { top: 16%; left: 34%; gap: 3px; font-size: 16px; }
  .review-quote-mark { top: 29%; left: 8%; font-size: 62px; }
  .review-card blockquote { top: 32%; left: 34%; width: 62%; max-width: none; margin: 0; font-size: 16px; line-height: 1.29; }
  .review-author { bottom: 6%; left: 7%; gap: 7px; }
  .review-avatar { width: 46px; height: 46px; font-size: 11.5px; }
  .review-avatar::after { width: 11px; height: 11px; border-width: 2px; }
  .review-person strong { font-size: 12.5px; }
  .review-person small { font-size: 9px; }
  .review-accent,
  .review-progress { bottom: 16%; left: 34%; width: 80px; }
}

@media (max-width: 390px) {
  .review-rating { font-size: 15px; }
  .review-card blockquote { font-size: 15px; }
  .review-quote-mark { font-size: 58px; }
  .review-person strong { font-size: 12px; }
  .review-person small { font-size: 8.5px; }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"] .top-benefits.is-motion-active .reviews-showcase::before {
    animation: review-reference-green-drift 12s var(--ease-apple-soft) infinite alternate;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .reviews-showcase::after {
    animation: review-reference-violet-drift 14s var(--ease-apple-soft) infinite alternate;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .review-card-stage::before {
    animation: review-reference-dots 9s ease-in-out infinite alternate;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .review-progress i.is-active::after {
    animation: review-reference-progress var(--review-duration) linear forwards;
  }

  html[data-motion="soft"][data-review-motion="story"] .review-card.is-entering { animation: review-reference-story-in 780ms var(--ease-apple-soft) both; }
  html[data-motion="soft"][data-review-motion="story"] .review-card.is-leaving { animation: review-reference-story-out 440ms cubic-bezier(0.4, 0, 0.68, 0.2) both; }
  html[data-motion="soft"][data-review-motion="glide"] .review-card.is-entering { animation: review-reference-glide-in 680ms var(--ease-apple-soft) both; }
  html[data-motion="soft"][data-review-motion="glide"] .review-card.is-leaving { animation: review-reference-glide-out 390ms cubic-bezier(0.4, 0, 0.7, 0.2) both; }
  html[data-motion="soft"][data-review-motion="lift"] .review-card.is-entering { animation: review-reference-lift-in 720ms var(--ease-apple-soft) both; }
  html[data-motion="soft"][data-review-motion="lift"] .review-card.is-leaving { animation: review-reference-lift-out 410ms cubic-bezier(0.4, 0, 0.68, 0.2) both; }
  html[data-motion="soft"][data-review-motion="shimmer"] .review-card.is-entering { animation: review-reference-shimmer-in 720ms var(--ease-apple-soft) both; }
  html[data-motion="soft"][data-review-motion="shimmer"] .review-card.is-leaving { animation: review-reference-shimmer-out 400ms ease-in both; }
  html[data-motion="soft"][data-review-motion="focus"] .review-card.is-entering { animation: review-reference-focus-in 760ms var(--ease-apple-soft) both; }
  html[data-motion="soft"][data-review-motion="focus"] .review-card.is-leaving { animation: review-reference-focus-out 420ms cubic-bezier(0.4, 0, 0.7, 0.2) both; }
  html[data-motion="soft"][data-review-motion="lines"] .review-card.is-entering { animation: review-reference-shell-in 620ms ease-out both; }
  html[data-motion="soft"][data-review-motion="lines"] .review-card.is-leaving { animation: review-reference-story-out 410ms cubic-bezier(0.4, 0, 0.68, 0.2) both; }
  html[data-motion="soft"] .review-card.is-entering blockquote { animation: none; }
  html[data-motion="soft"] .review-card.is-entering::after { animation: review-reference-sheen 980ms 120ms ease-out both; }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-showcase,
  .reviews-showcase::before,
  .reviews-showcase::after,
  .review-card-stage::before,
  .review-card,
  .review-card::after,
  .review-rating span,
  .review-quote-mark,
  .review-quote-line,
  .review-avatar,
  .review-avatar::after,
  .review-person,
  .review-progress i::after {
    animation: none !important;
    transition: none !important;
  }

  .review-progress i.is-active::after { transform: scaleX(1); }
}

/* Homepage V65: customer-review-only correction.
   The four existing benefit cards deliberately fall back to their pre-V64
   visual rules. Only short-height row geometry is compacted to clear the fixed
   cue; all new decorative treatment stays on the left customer review. */
.top-benefits {
  isolation: isolate;
}

.top-benefits-inner {
  position: relative;
  z-index: 2;
}

@media (min-width: 1800px) and (max-height: 940px) {
  .top-benefits {
    height: calc(100svh - 128px - var(--opening-hero-height) - var(--opening-hero-bottom));
    min-height: 0;
    padding: 18px 0 0;
  }

  .top-benefits-inner {
    height: min(130px, calc(100svh - var(--opening-hero-height) - var(--opening-hero-bottom) - 234px));
    min-height: 0;
  }
}

.review-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.review-atmosphere-dots {
  position: absolute;
  top: 24px;
  left: -5px;
  width: 96px;
  height: 82px;
  background-image: radial-gradient(circle, rgba(91, 211, 127, 0.28) 0 1.65px, transparent 2px);
  background-position: center;
  background-size: 17px 17px;
  opacity: 0.58;
  -webkit-mask-image: linear-gradient(90deg, #000 0 70%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 70%, transparent 100%);
}

.review-atmosphere-orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.review-atmosphere-orb-left {
  top: 42%;
  left: -126px;
  width: 255px;
  height: 255px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(circle at 64% 24%, rgba(229, 255, 201, 0.86), transparent 37%),
    radial-gradient(circle at 66% 73%, rgba(192, 218, 255, 0.66), transparent 55%),
    linear-gradient(153deg, rgba(229, 255, 208, 0.68), rgba(226, 239, 255, 0.68));
  box-shadow:
    inset -18px -18px 36px rgba(186, 201, 255, 0.14),
    0 24px 62px rgba(115, 168, 175, 0.06);
  opacity: 0.78;
}

.review-atmosphere-orb-violet {
  top: 56%;
  left: 19%;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  background:
    radial-gradient(circle at 45% 19%, rgba(220, 220, 255, 0.72), transparent 44%),
    radial-gradient(circle at 71% 44%, rgba(216, 205, 255, 0.5), transparent 54%),
    linear-gradient(143deg, rgba(240, 244, 255, 0.66), rgba(225, 216, 255, 0.5));
  box-shadow: inset 24px 7px 56px rgba(255, 255, 255, 0.42);
  opacity: 0.67;
}

.review-atmosphere-plant {
  position: absolute;
  z-index: 1;
  top: 45%;
  left: 34px;
  width: 104px;
  height: 122px;
  overflow: visible;
  filter: drop-shadow(0 10px 12px rgba(41, 161, 96, 0.07));
  opacity: 0.36;
  transform-origin: 42% 94%;
  will-change: transform;
}

.review-plant-stem {
  fill: none;
  stroke: url("#review-plant-stem");
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.review-plant-leaf {
  fill: url("#review-plant-leaf");
  transform-box: fill-box;
  transform-origin: 50% 90%;
}

.review-plant-leaf-two,
.review-plant-leaf-four {
  opacity: 0.72;
}

.review-atmosphere-spark {
  position: absolute;
  display: block;
  width: 27px;
  height: 27px;
  clip-path: polygon(50% 0, 60% 39%, 100% 50%, 60% 61%, 50% 100%, 40% 61%, 0 50%, 40% 39%);
  transform: translate3d(0, 0, 0) rotate(0.001deg);
  transform-origin: center;
  will-change: transform, opacity;
}

.review-atmosphere-spark-green {
  top: 24%;
  left: 28.2%;
  background: linear-gradient(145deg, rgba(176, 240, 190, 0.3), rgba(103, 218, 143, 0.8));
  filter: drop-shadow(0 4px 10px rgba(89, 198, 130, 0.1));
  opacity: 0.65;
}

.review-atmosphere-spark-green-small {
  top: calc(24% - 11px);
  left: calc(28.2% + 19px);
  width: 20px;
  height: 20px;
  background: linear-gradient(145deg, rgba(213, 248, 199, 0.54), rgba(112, 215, 118, 0.68));
  opacity: 0.58;
}

.review-atmosphere-spark-violet {
  top: 68%;
  left: 29.1%;
  width: 23px;
  height: 23px;
  background: linear-gradient(145deg, rgba(220, 210, 255, 0.66), rgba(139, 115, 244, 0.52));
  filter: drop-shadow(0 4px 10px rgba(135, 111, 232, 0.08));
  opacity: 0.56;
}

.reviews-showcase {
  --review-duration: 6500ms;
  position: relative;
  isolation: isolate;
  display: block;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}

.reviews-showcase:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.reviews-showcase::before,
.reviews-showcase::after,
.review-card-stage::before,
.review-card-stage::after {
  content: none;
}

.review-card-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  min-height: 0;
  overflow: visible;
  border-radius: 0;
}

.review-card {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translate3d(0, 0, 0);
}

.review-card::before,
.review-card::after {
  content: none;
}

.review-rating {
  display: none;
}

.review-quote-mark {
  position: absolute;
  z-index: 2;
  top: 2%;
  left: 26%;
  display: block;
  width: clamp(38px, calc(8svh - 25px), 54px);
  aspect-ratio: 1.31;
  margin: 0;
  background: none;
  color: transparent;
  font-size: 0;
  line-height: 1;
  filter: drop-shadow(0 5px 9px rgba(83, 143, 196, 0.09));
  transform-origin: 35% 50%;
}

.review-quote-mark::before,
.review-quote-mark::after {
  content: "";
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  border-radius: 48% 48% 38% 38%;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 82% 86%, 61% 100%, 27% 100%, 48% 64%, 0 64%);
}

.review-quote-mark::before {
  left: 0;
  background: linear-gradient(155deg, #45c996 0%, #32bd78 100%);
}

.review-quote-mark::after {
  right: 0;
  background: linear-gradient(155deg, #6d9eea 0%, #7868ec 100%);
}

.review-card blockquote {
  position: absolute;
  z-index: 2;
  top: 24%;
  left: 26%;
  display: block;
  width: 73%;
  max-width: none;
  min-height: 0;
  margin: 0;
  overflow: visible;
  color: #102f35;
  font-size: clamp(14px, calc(5svh - 28px), 22px);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 1.3;
  text-wrap: balance;
  -webkit-box-orient: initial;
  -webkit-line-clamp: initial;
}

.review-quote-line {
  display: block;
  width: fit-content;
  color: #102f35;
  white-space: nowrap;
}

.review-quote-line:nth-child(n + 3) {
  background: linear-gradient(92deg, #2abf58 0%, #32bf7b 28%, #4aacdd 63%, #7275ee 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.review-author {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 26%;
  display: flex;
  max-width: 73%;
  align-items: center;
  justify-items: initial;
  gap: 11px;
}

.review-avatar {
  position: relative;
  display: grid;
  width: clamp(36px, calc(4svh + 6px), 46px);
  height: clamp(36px, calc(4svh + 6px), 46px);
  place-items: center;
  flex: 0 0 clamp(36px, calc(4svh + 6px), 46px);
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: #fff;
  font-size: clamp(9px, 0.64vw, 12px);
  font-weight: 820;
  letter-spacing: -0.02em;
}

.review-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 47% 53% 49% 51% / 54% 46% 54% 46%;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.96) 0 7%, transparent 18%),
    linear-gradient(145deg, color-mix(in srgb, var(--review-primary) 27%, white), var(--review-primary) 61%, color-mix(in srgb, var(--review-primary) 73%, #503bc4));
  box-shadow:
    0 8px 17px var(--review-shadow),
    inset 0 1px 4px rgba(255, 255, 255, 0.76);
  transform: rotate(-8deg);
}

.review-avatar::after {
  content: "";
  position: absolute;
  top: 3px;
  right: -4px;
  bottom: auto;
  width: clamp(9px, 0.68vw, 12px);
  height: clamp(9px, 0.68vw, 12px);
  border: 2px solid rgba(255, 255, 255, 0.97);
  border-radius: 50%;
  background: #37c85d;
  box-shadow: 0 3px 8px rgba(39, 168, 70, 0.18);
}

.review-avatar span {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(40, 48, 89, 0.14);
}

.review-person {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.review-person strong,
.review-person small {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.review-person strong {
  color: #10282d;
  font-size: clamp(11.5px, 0.72vw, 14px);
  font-weight: 830;
  letter-spacing: -0.026em;
  line-height: 1.05;
}

.review-person small {
  color: #60777e;
  font-size: clamp(9px, 0.58vw, 11px);
  font-weight: 560;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.review-accent,
.review-progress {
  position: absolute;
  z-index: 3;
  bottom: clamp(48px, 22%, 64px);
  left: 26%;
  display: block;
  width: clamp(72px, 6vw, 98px);
  height: 2px;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
}

.review-accent {
  background: linear-gradient(90deg, rgba(57, 201, 104, 0.33), rgba(98, 202, 165, 0.28) 48%, rgba(139, 111, 241, 0.28));
}

.review-progress {
  justify-content: normal;
  gap: 0;
  background: transparent;
}

.review-progress i,
.review-progress i.is-complete {
  display: none;
}

.review-progress i.is-active {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

.review-progress i.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #44ca77 0%, #66cdae 49%, #9b82f1 100%);
  box-shadow: none;
  transform: scaleX(0);
  transform-origin: left center;
}

@media (max-height: 1000px) and (min-width: 1181px) {
  .review-quote-mark {
    top: 0;
    width: 38px;
  }

  .review-card blockquote {
    top: 20%;
    font-size: 17px;
    line-height: 1.2;
  }

  .review-author {
    bottom: 2px;
    gap: 8px;
  }

  .review-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 9px;
  }

  .review-person strong { font-size: 11px; }
  .review-person small { font-size: 8.5px; }

  .review-accent,
  .review-progress {
    bottom: 40px;
    width: 72px;
  }
}

@media (max-height: 900px) and (min-width: 1181px) {
  .review-card blockquote {
    top: 20%;
    font-size: 13px;
    line-height: 1.2;
  }

  .review-quote-mark {
    width: 36px;
  }

  .review-author {
    gap: 8px;
  }

  .review-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 8.5px;
  }

  .review-person strong { font-size: 10.5px; }
  .review-person small { font-size: 8px; }

  .review-accent,
  .review-progress {
    bottom: 36px;
    width: 68px;
  }
}

@media (max-width: 1080px) {
  .reviews-showcase {
    grid-column: 1 / -1;
    height: auto;
    min-height: 285px;
  }

  .review-quote-mark,
  .review-card blockquote,
  .review-author,
  .review-accent,
  .review-progress {
    left: 18%;
  }

  .review-card blockquote {
    top: 24%;
    width: 72%;
    font-size: clamp(22px, 3.2vw, 28px);
  }

  .review-author {
    bottom: 7px;
  }

  .review-accent,
  .review-progress {
    bottom: 25%;
  }

  .review-atmosphere-orb-left {
    top: 15%;
  }

  .review-atmosphere-plant {
    top: 19%;
  }

  .review-atmosphere-orb-violet {
    top: 23%;
    left: 28%;
  }

  .review-atmosphere-spark-green {
    top: 7%;
    left: 72%;
  }

  .review-atmosphere-spark-green-small {
    top: calc(7% - 9px);
    left: calc(72% + 17px);
  }

  .review-atmosphere-spark-violet {
    top: 27%;
    left: 60%;
  }
}

@media (max-width: 760px) {
  .reviews-showcase {
    min-height: 286px;
    padding: 0;
    border-radius: 0;
  }

  .review-quote-mark,
  .review-card blockquote,
  .review-author,
  .review-accent,
  .review-progress {
    left: 15%;
  }

  .review-quote-mark {
    top: 1%;
    width: 44px;
  }

  .review-card blockquote {
    top: 23%;
    width: 82%;
    font-size: clamp(18px, 5.15vw, 23px);
    line-height: 1.34;
  }

  .review-author {
    bottom: 6px;
    gap: 10px;
  }

  .review-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 10px;
  }

  .review-person strong { font-size: 13px; }
  .review-person small { font-size: 10px; }

  .review-accent,
  .review-progress {
    bottom: 23%;
    width: 82px;
  }

  .review-atmosphere-dots {
    top: 12px;
    left: -22px;
  }

  .review-atmosphere-orb-left {
    top: 10%;
    left: -160px;
  }

  .review-atmosphere-plant {
    top: 14%;
    left: 4px;
    width: 88px;
  }

  .review-atmosphere-orb-violet {
    top: 20%;
    left: 37%;
    width: 340px;
    height: 340px;
  }

  .review-atmosphere-spark-green,
  .review-atmosphere-spark-green-small {
    display: none;
  }

  .review-atmosphere-spark-violet {
    top: 29%;
    left: 68%;
  }
}

@media (max-width: 390px) {
  .review-card blockquote {
    font-size: 18px;
  }

  .review-person strong { font-size: 12.5px; }
  .review-person small { font-size: 9.5px; }
}

@keyframes review-focus-left-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3px, -2px, 0) scale(1.008); }
  100% { transform: translate3d(5px, 2px, 0) scale(1.014); }
}

@keyframes review-focus-violet-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-4px, -3px, 0) scale(1.01); }
  100% { transform: translate3d(4px, -6px, 0) scale(1.016); }
}

@keyframes review-focus-plant-sway {
  0%, 100% { transform: rotate(-1deg) translate3d(0, 1px, 0); }
  50% { transform: rotate(2deg) translate3d(1px, -1px, 0); }
}

@keyframes review-focus-leaf-breathe {
  0%, 100% { transform: scale(0.99) rotate(-0.5deg); }
  50% { transform: scale(1.025) rotate(0.9deg); }
}

@keyframes review-focus-spark {
  0%, 100% { opacity: 0.4; transform: scale(0.88) rotate(-4deg); }
  45% { opacity: 0.82; transform: scale(1.06) rotate(3deg); }
  68% { opacity: 0.58; transform: scale(0.97) rotate(1deg); }
}

@keyframes review-focus-dots {
  0%, 100% { opacity: 0.4; transform: translate3d(0, 0, 0); }
  50% { opacity: 0.66; transform: translate3d(0, -2px, 0); }
}

@keyframes review-focus-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes review-focus-card-in {
  from { opacity: 0; transform: translate3d(0, 11px, 0); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes review-focus-card-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  to { opacity: 0; transform: translate3d(0, -8px, 0); filter: blur(4px); }
}

@keyframes review-focus-mark-in {
  from { opacity: 0; transform: translate3d(-6px, 5px, 0) scale(0.82) rotate(-5deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}

@keyframes review-focus-line-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(4px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes review-focus-author-in {
  from { opacity: 0; transform: translate3d(0, 7px, 0) scale(0.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"] .top-benefits.is-motion-active .review-atmosphere-orb-left {
    animation: review-focus-left-drift 17s cubic-bezier(0.42, 0, 0.25, 1) infinite alternate;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .review-atmosphere-orb-violet {
    animation: review-focus-violet-drift 20s cubic-bezier(0.42, 0, 0.25, 1) infinite alternate;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .review-atmosphere-plant {
    animation: review-focus-plant-sway 8s ease-in-out infinite;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .review-plant-leaf {
    animation: review-focus-leaf-breathe 6.8s ease-in-out infinite;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .review-plant-leaf-two { animation-delay: -1.8s; }
  html[data-motion="soft"] .top-benefits.is-motion-active .review-plant-leaf-three { animation-delay: -3.2s; }
  html[data-motion="soft"] .top-benefits.is-motion-active .review-plant-leaf-four { animation-delay: -4.7s; }

  html[data-motion="soft"] .top-benefits.is-motion-active .review-atmosphere-spark {
    animation: review-focus-spark 6s ease-in-out infinite;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .review-atmosphere-spark-green-small { animation-delay: -2.2s; }
  html[data-motion="soft"] .top-benefits.is-motion-active .review-atmosphere-spark-violet { animation-delay: -3.9s; }

  html[data-motion="soft"] .top-benefits.is-motion-active .review-atmosphere-dots {
    animation: review-focus-dots 8.5s ease-in-out infinite;
  }

  html[data-motion="soft"] .top-benefits.is-motion-active .review-progress i.is-active::after {
    animation: review-focus-progress var(--review-duration) linear forwards;
  }

  html[data-motion="soft"][data-review-motion] .top-benefits .review-card.is-entering {
    animation: review-focus-card-in 680ms cubic-bezier(0.2, 0.75, 0.25, 1) both !important;
  }

  html[data-motion="soft"][data-review-motion] .top-benefits .review-card.is-leaving {
    animation: review-focus-card-out 390ms cubic-bezier(0.4, 0, 0.65, 1) both !important;
  }

  html[data-motion="soft"] .top-benefits .review-card.is-entering .review-quote-mark {
    animation: review-focus-mark-in 600ms 30ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
  }

  html[data-motion="soft"] .top-benefits .review-card.is-entering .review-quote-line {
    animation: review-focus-line-in 570ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
  }

  html[data-motion="soft"] .top-benefits .review-card.is-entering .review-quote-line:nth-child(1) { animation-delay: 80ms; }
  html[data-motion="soft"] .top-benefits .review-card.is-entering .review-quote-line:nth-child(2) { animation-delay: 125ms; }
  html[data-motion="soft"] .top-benefits .review-card.is-entering .review-quote-line:nth-child(3) { animation-delay: 170ms; }
  html[data-motion="soft"] .top-benefits .review-card.is-entering .review-quote-line:nth-child(4) { animation-delay: 215ms; }

  html[data-motion="soft"] .top-benefits .review-card.is-entering .review-author,
  html[data-motion="soft"] .top-benefits .review-card.is-entering .review-accent {
    animation: review-focus-author-in 540ms 265ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-benefits .review-atmosphere *,
  .top-benefits .review-card,
  .top-benefits .review-card *,
  .top-benefits .review-progress i::after {
    animation: none !important;
    transition: none !important;
  }

  .top-benefits .review-progress i.is-active::after {
    transform: scaleX(1);
  }
}
/* ---------------------------------------------------------------------------
   Ablauf (process) — v16.

   Same card language as "Unsere Leistungen": one tint per position, a white
   number badge, an accent-coloured arc. The steps sit on a rail that fills as
   the flow advances, so everything moves forward — nothing hovers or bobs.
   --------------------------------------------------------------------------- */

.process-v16 {
  --p16-line: 4px;
  --p16-marker: 88px;
  --p16-dwell: 4300ms;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  align-content: center;
  padding:
    clamp(78px, 8.5vh, 122px)
    clamp(24px, 2.4vw, 56px)
    max(clamp(56px, 5vh, 78px), calc(var(--cue-viewport-reserve) + 34px));
}

.p16-shell {
  display: grid;
  width: min(var(--content), 100%);
  margin-inline: auto;
  gap: clamp(26px, 3.4vh, 48px);
}

.p16-head {
  display: grid;
  max-width: 660px;
  gap: 12px;
}

.p16-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 840;
  letter-spacing: -0.045em;
  line-height: 1.03;
  text-wrap: balance;
}

.p16-head h2 span {
  color: var(--green);
}

.p16-lead {
  max-width: 54ch;
  margin: 0;
  color: #4b5c53;
  font-size: clamp(15.5px, 1.2vw, 18px);
  line-height: 1.6;
}

/* ---- rail ---------------------------------------------------------------- */

.p16-track-wrap {
  position: relative;
}

.p16-rail {
  position: absolute;
  top: calc(var(--p16-line) / -2);
  right: calc(100% / 6);
  left: calc(100% / 6);
  height: var(--p16-line);
  border-radius: 999px;
}

.p16-rail-base {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(31, 77, 54, 0.1);
}

/* Carries all three accents, so the line itself shows the journey. */
.p16-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--p16-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #26b33d 0%, #1789e8 52%, #f5a009 100%);
  background-size: calc(100% * 2) 100%;
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.process-v16[data-process-active="1"] { --p16-progress: 0%; }
.process-v16[data-process-active="2"] { --p16-progress: 50%; }
.process-v16[data-process-active="3"] { --p16-progress: 100%; }

.p16-rail-pulse {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 600ms ease;
}

.p16-rail-pulse::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
}

.process-v16.is-process-live .p16-rail-pulse {
  opacity: 1;
}

/* ---- steps --------------------------------------------------------------- */

.p16-track {
  display: grid;
  margin: calc(var(--p16-marker) / 2) 0 0;
  padding: 0;
  gap: clamp(16px, 1.8vw, 26px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.p16-step {
  position: relative;
}

.p16-step:nth-child(1) {
  --p16-accent: #26b33d;
  --p16-glow: rgba(38, 179, 61, 0.2);
  --p16-tint: linear-gradient(155deg, #f4f9e9 0%, #ecf6e2 58%, #f6faef 100%);
}

.p16-step:nth-child(2) {
  --p16-accent: #1789e8;
  --p16-glow: rgba(23, 137, 232, 0.19);
  --p16-tint: linear-gradient(155deg, #ecf6fe 0%, #e6f2fb 58%, #f3f8fe 100%);
}

.p16-step:nth-child(3) {
  --p16-accent: #f5a009;
  --p16-glow: rgba(245, 160, 9, 0.2);
  --p16-tint: linear-gradient(155deg, #fdf6e4 0%, #fdeed5 58%, #fdf7e9 100%);
}

.p16-step > button {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 14px;
  padding: calc(var(--p16-marker) / 2 + 24px) clamp(20px, 1.9vw, 30px) clamp(24px, 2.6vh, 32px);
  border: 1px solid rgba(31, 88, 48, 0.05);
  border-radius: 30px;
  background:
    radial-gradient(circle at 52% 12%, rgba(255, 255, 255, 0.72), transparent 46%),
    var(--p16-tint);
  color: inherit;
  cursor: pointer;
  font: inherit;
  align-content: start;
  justify-items: center;
  text-align: center;
  box-shadow: 0 16px 42px rgba(21, 65, 41, 0.06);
  transition:
    box-shadow 520ms var(--ease-apple),
    transform 520ms var(--ease-apple),
    border-color 480ms ease;
}

.p16-step.is-active > button {
  border-color: color-mix(in srgb, var(--p16-accent) 30%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--p16-accent) 22%, transparent),
    0 26px 62px var(--p16-glow);
  transform: translateY(-6px);
}

/* ---- marker -------------------------------------------------------------- */

.p16-marker {
  position: absolute;
  top: calc(var(--p16-marker) / -2);
  left: 50%;
  display: grid;
  width: var(--p16-marker);
  height: var(--p16-marker);
  margin-left: calc(var(--p16-marker) / -2);
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  box-shadow:
    0 0 0 1px rgba(31, 77, 54, 0.07),
    0 14px 32px rgba(21, 65, 41, 0.1);
  transition:
    box-shadow 520ms var(--ease-apple),
    transform 520ms var(--ease-apple);
}

.p16-step.is-active .p16-marker {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--p16-accent) 30%, transparent),
    0 18px 44px var(--p16-glow);
  transform: scale(1.05);
}

.p16-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.p16-ring circle {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
}

.p16-ring-track {
  stroke: transparent;
}

/* Fills over exactly one dwell, so the rotation has a visible reason. */
.p16-ring-fill {
  stroke: var(--p16-accent);
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
  opacity: 0;
}

.process-v16.is-process-live .p16-step.is-active .p16-ring-fill {
  opacity: 1;
  animation: p16-ring var(--p16-dwell) linear both;
}

.p16-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: color-mix(in srgb, var(--p16-accent) 52%, #8a9a91);
  transition: color 420ms ease, transform 520ms var(--ease-apple);
}

.p16-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.p16-step.is-active .p16-icon {
  color: var(--p16-accent);
  transform: scale(1.05);
}

.process-v16.is-process-live .p16-step.is-active .p16-icon svg path {
  animation: p16-draw 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
  stroke-dasharray: 92;
}

/* ---- copy ---------------------------------------------------------------- */

.p16-body {
  display: grid;
  gap: 9px;
  justify-items: center;
}

.p16-num {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--p16-accent);
  font-size: 12.5px;
  font-weight: 880;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.p16-body strong {
  color: var(--ink);
  font-size: clamp(19px, 1.65vw, 24px);
  font-weight: 840;
  letter-spacing: -0.03em;
  line-height: 1.16;
  text-wrap: balance;
}

.p16-body small {
  max-width: 30ch;
  color: #46574e;
  font-size: 14.5px;
  line-height: 1.58;
}

.p16-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: color-mix(in srgb, var(--p16-accent) 74%, #14301f);
  font-size: 12.5px;
  font-weight: 760;
  transition: background 420ms ease;
}

.p16-hint::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--p16-accent);
}

.p16-step.is-active .p16-hint {
  background: rgba(255, 255, 255, 0.9);
}

.p16-step > button:focus-visible {
  outline: 2px solid var(--p16-accent);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .p16-step:not(.is-active) > button:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 50px rgba(21, 65, 41, 0.1);
  }

  .p16-step:not(.is-active) > button:hover .p16-icon {
    color: var(--p16-accent);
  }
}

/* ---- closing bar --------------------------------------------------------- */

.p16-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 26px;
  padding: clamp(16px, 2vh, 22px) clamp(20px, 2vw, 30px);
  border: 1px solid rgba(31, 88, 48, 0.06);
  border-radius: 26px;
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.8), transparent 42%),
    linear-gradient(120deg, #eef8ec 0%, #f6fbf4 62%, #ffffff 100%);
}

.p16-close p {
  margin: 0;
  color: #23422f;
  font-size: clamp(15px, 1.25vw, 17.5px);
  font-weight: 760;
}

@keyframes p16-ring {
  from { stroke-dashoffset: 132; }
  to { stroke-dashoffset: 0; }
}

@keyframes p16-draw {
  from { stroke-dashoffset: 92; }
  to { stroke-dashoffset: 0; }
}

@keyframes p16-pulse-run {
  from { transform: translate3d(-120%, 0, 0); }
  to { transform: translate3d(600%, 0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .process-v16.is-process-live .p16-rail-pulse::after {
    animation: p16-pulse-run 5.4s cubic-bezier(0.55, 0, 0.45, 1) infinite;
  }
}

/* ---- narrow screens ------------------------------------------------------ */

@media (max-width: 980px) {
  .process-v16 {
    --p16-marker: 66px;
    align-content: start;
  }

  .p16-track {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  /* The rail turns vertical and threads down through the markers. */
  .p16-rail {
    top: calc(var(--p16-marker) / 2);
    right: auto;
    bottom: calc(var(--p16-marker) / 2);
    left: calc(var(--p16-marker) / 2 - var(--p16-line) / 2);
    width: var(--p16-line);
    height: auto;
  }

  .p16-rail-fill {
    width: 100%;
    height: var(--p16-progress, 0%);
    background: linear-gradient(180deg, #26b33d 0%, #1789e8 52%, #f5a009 100%);
    transition: height 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .p16-rail-pulse::after {
    width: 100%;
    height: 20%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  }

  @keyframes p16-pulse-run {
    from { transform: translate3d(0, -120%, 0); }
    to { transform: translate3d(0, 600%, 0); }
  }

  .p16-marker {
    top: calc(var(--p16-marker) / -2);
    left: 0;
    margin-left: 0;
  }

  .p16-step > button {
    gap: 11px;
    padding: calc(var(--p16-marker) / 2 + 18px) 22px 24px;
    justify-items: start;
    text-align: left;
  }

  .p16-body {
    justify-items: start;
  }

  .p16-body small {
    max-width: none;
  }

  .p16-step.is-active > button {
    transform: none;
  }

  .p16-close {
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-v16 .p16-rail-fill,
  .process-v16 .p16-marker,
  .process-v16 .p16-icon,
  .process-v16 .p16-hint,
  .process-v16 .p16-step > button {
    transition: none;
  }

  .process-v16 .p16-rail-pulse {
    display: none;
  }

  .process-v16 .p16-ring-fill {
    animation: none;
    opacity: 0;
  }
}

/* Homepage V67: lock the review row to its approved geometry while making the
   customer quote the typographic focal point. The delayed curled wind echo is
   SVG-only and never changes the garden or leaf physics. */
@media (min-width: 1400px) {
  .top-benefits-inner {
    width: calc(min(1900px, 87.5vw) - clamp(56px, 3.4vw, 72px));
    grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  }

  .review-quote-mark,
  .review-card blockquote,
  .review-author,
  .review-accent,
  .review-progress {
    left: 0;
  }

  .review-card blockquote {
    width: 100%;
  }

  .review-author {
    max-width: 100%;
  }
}

@media (min-width: 1400px) and (min-height: 1001px) {
  .review-card blockquote {
    font-size: clamp(22px, 1.3vw, 25px);
    line-height: 1.2;
  }
}

@media (min-width: 1400px) and (min-height: 901px) and (max-height: 1000px) {
  .review-card blockquote {
    top: 14%;
    font-size: clamp(21px, 1.15vw, 23px);
    line-height: 1.12;
  }
}

@media (min-width: 1400px) and (max-height: 900px) {
  .review-card blockquote {
    top: 14%;
    font-size: 15.5px;
    line-height: 1.12;
  }
}

.hero-wind-set-burst-echo {
  display: none;
}

html[data-wind-effect="burst"] .hero-wind-set-burst-echo {
  display: inline;
}

.hero-wind-trace-echo {
  --wind-dash: 19;
  --wind-peak: 0.52;
  --wind-width: 1.45px;
  --wind-delay: 0.54s;
  filter: drop-shadow(0 0 8px rgba(77, 166, 127, 0.25));
}

.hero-wind-trace-echo-main {
  --wind-dash: 27;
  --wind-peak: 0.82;
  --wind-width: 2.35px;
  --wind-delay: 0.61s;
}

.hero-wind-trace-echo-lower {
  --wind-dash: 17;
  --wind-peak: 0.46;
  --wind-width: 1.35px;
  --wind-delay: 0.68s;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="soft"].is-intro-settled[data-wind-effect="burst"] .hero-wind-set-burst-echo .hero-wind-trace {
    animation: hero-wind-burst-echo 10s var(--wind-delay) cubic-bezier(0.34, 0.04, 0.28, 1) infinite;
  }
}

@keyframes hero-wind-burst-echo {
  0%, 59.5% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  62% {
    opacity: 0.1;
    stroke-dashoffset: -5;
  }
  69% {
    opacity: var(--wind-peak);
    stroke-dashoffset: -28;
  }
  81% {
    opacity: var(--wind-peak);
    stroke-dashoffset: -72;
  }
  91% {
    opacity: 0.16;
    stroke-dashoffset: -108;
  }
  96%, 100% {
    opacity: 0;
    stroke-dashoffset: -123;
  }
}

/* Homepage V76: the AI price check stays inside the request wizard. The result
   is one calm working surface, not a second chat window or a stack of bubbles. */
.request-wizard[data-wizard-view="ai-result"] {
  width: min(1120px, calc(100vw - 36px));
  --wizard-accent: #5f5ae7;
}

.request-wizard[data-wizard-view="ai-result"] .dialog-shell {
  max-height: min(900px, calc(100svh - 36px));
}

.request-wizard[data-wizard-view="ai-result"] .dialog-header {
  padding-bottom: 20px;
}

.request-wizard[data-wizard-view="ai-result"] .wizard-stage {
  padding-top: 4px;
}

.ai-price-view {
  width: 100%;
}

.ai-price-view > [data-ai-price-root] {
  width: 100%;
}

.ai-price-loading {
  position: relative;
  min-height: 430px;
  display: grid;
  grid-template-columns: 210px minmax(0, 420px);
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 6vw, 76px);
  padding: 44px clamp(24px, 6vw, 72px) 60px;
  overflow: hidden;
  border-radius: 32px;
  background: #f7fbf7;
  box-shadow: inset 0 0 0 1px rgba(39, 113, 67, 0.08);
}

.ai-price-loading::before,
.ai-price-loading::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ai-price-loading::before {
  width: 250px;
  height: 250px;
  left: -110px;
  bottom: -155px;
  background: rgba(139, 209, 170, 0.28);
}

.ai-price-loading::after {
  width: 190px;
  height: 190px;
  right: -80px;
  top: -105px;
  background: rgba(170, 164, 242, 0.22);
}

.ai-price-orbit {
  position: relative;
  width: 196px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #eef8f0;
  box-shadow:
    inset 0 0 0 1px rgba(48, 132, 77, 0.08),
    0 24px 70px rgba(30, 91, 53, 0.11);
}

.ai-price-orbit::before,
.ai-price-orbit::after,
.ai-price-orbit span,
.ai-price-orbit i,
.ai-price-orbit b {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.ai-price-orbit::before {
  inset: 20px;
  border: 1px solid rgba(51, 148, 83, 0.22);
  border-left-color: #5d5ae8;
  animation: ai-price-orbit 2.8s linear infinite;
}

.ai-price-orbit::after {
  inset: 52px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(33, 101, 59, 0.12);
}

.ai-price-orbit span {
  z-index: 1;
  width: 42px;
  height: 42px;
  left: 77px;
  top: 77px;
  background: #35ab55;
  box-shadow: inset -7px -8px 14px rgba(13, 84, 37, 0.16);
}

.ai-price-orbit span::before,
.ai-price-orbit span::after {
  content: "";
  position: absolute;
  background: #f8fff9;
  border-radius: 80% 0 80% 0;
}

.ai-price-orbit span::before {
  width: 13px;
  height: 22px;
  left: 12px;
  top: 6px;
  transform: rotate(-28deg);
}

.ai-price-orbit span::after {
  width: 10px;
  height: 17px;
  left: 23px;
  top: 16px;
  transform: rotate(38deg);
}

.ai-price-orbit i,
.ai-price-orbit b {
  width: 12px;
  height: 12px;
  background: #5f5ae7;
  box-shadow: 0 0 0 8px rgba(95, 90, 231, 0.09);
}

.ai-price-orbit i {
  left: 18px;
  top: 90px;
  animation: ai-price-pulse 1.8s ease-in-out infinite;
}

.ai-price-orbit b {
  right: 23px;
  top: 33px;
  width: 9px;
  height: 9px;
  background: #38a95a;
  box-shadow: 0 0 0 7px rgba(56, 169, 90, 0.09);
  animation: ai-price-pulse 1.8s 0.6s ease-in-out infinite;
}

.ai-price-loading-copy {
  position: relative;
  z-index: 1;
}

.ai-price-loading-copy > p,
.ai-price-error > p {
  margin: 0 0 8px;
  color: #4e49d1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ai-price-loading-copy h3,
.ai-price-error h3 {
  margin: 0;
  color: #183b27;
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.ai-price-loading-copy ol {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.ai-price-loading-copy li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #476352;
  font-size: 14px;
  opacity: 0.38;
  animation: ai-price-check-step 3s ease-in-out infinite;
}

.ai-price-loading-copy li:nth-child(2) { animation-delay: 0.72s; }
.ai-price-loading-copy li:nth-child(3) { animation-delay: 1.44s; }

.ai-price-loading-copy li i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: #36aa56;
  font-size: 11px;
  font-style: normal;
}

.ai-price-loading-line {
  position: absolute;
  left: clamp(24px, 6vw, 72px);
  right: clamp(24px, 6vw, 72px);
  bottom: 25px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(30, 99, 56, 0.08);
}

.ai-price-loading-line span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: #41ac60;
  animation: ai-price-scan-line 1.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ai-price-sheet {
  position: relative;
  padding: 3px 2px 8px;
  color: #183b27;
}

.ai-price-sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
  margin-bottom: 24px;
}

.ai-price-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #36764b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.ai-price-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #36ae59;
  box-shadow: 0 0 0 5px rgba(54, 174, 89, 0.1);
}

.ai-price-sheet-head h3 {
  margin: 0;
  color: #173a26;
  font-size: clamp(27px, 3.3vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.048em;
}

.ai-price-sheet-head p {
  max-width: 680px;
  margin: 11px 0 0;
  color: #5a6d60;
  font-size: 15px;
  line-height: 1.5;
}

.ai-price-sheet-head > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 0;
  border-radius: 12px;
  color: #3b5b47;
  background: #edf5ef;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.ai-price-sheet-head > button:hover {
  color: #234431;
  background: #e4f0e7;
}

.ai-price-sheet-head > button svg {
  width: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-price-main {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: stretch;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 30px;
  background: #f5faf6;
  box-shadow: inset 0 0 0 1px rgba(39, 113, 67, 0.08);
}

.ai-price-total {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 240px;
  padding: clamp(24px, 3vw, 34px);
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  background: #247b42;
  box-shadow: 0 20px 45px rgba(24, 94, 51, 0.18);
}

.ai-price-total::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -98px;
  bottom: -102px;
  border: 32px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.ai-price-total > p {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-price-total > div {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: clamp(5px, 0.8vw, 10px);
  white-space: nowrap;
}

.ai-price-total strong {
  font-size: clamp(37px, 4.6vw, 62px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.065em;
}

.ai-price-total em {
  color: rgba(255, 255, 255, 0.55);
  font-size: clamp(25px, 3vw, 40px);
  font-style: normal;
  font-weight: 400;
}

.ai-price-total > div span {
  margin-left: 1px;
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 750;
}

.ai-price-total > small {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}

.ai-price-total--inspection {
  background: #5753c5;
}

.ai-price-total--question {
  background: linear-gradient(145deg, #625dde, #514bc0);
}

.ai-price-total--inspection strong {
  letter-spacing: -0.045em;
}

.ai-price-total--question strong {
  letter-spacing: -0.045em;
}

.ai-price-detail {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 22px;
}

.ai-price-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
}

.ai-price-lines h4,
.ai-price-factors h4,
.ai-price-question h4 {
  margin: 0;
  color: #1c432c;
  font-size: 14px;
  line-height: 1.3;
}

.ai-price-section-head > span {
  color: #718278;
  font-size: 11px;
}

.ai-price-lines ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ai-price-lines li {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(37, 103, 59, 0.1);
  animation: ai-price-line-in 420ms calc(var(--ai-line-index) * 70ms) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ai-price-line-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #37aa58;
  box-shadow: 0 0 0 4px rgba(55, 170, 88, 0.09);
}

.ai-price-lines li[data-ai-line-status="inspection"] .ai-price-line-mark {
  background: #5f5ae7;
  box-shadow: 0 0 0 4px rgba(95, 90, 231, 0.09);
}

.ai-price-lines li[data-ai-line-status="missing"] .ai-price-line-mark {
  background: #d99b32;
  box-shadow: 0 0 0 4px rgba(217, 155, 50, 0.1);
}

.ai-price-lines li > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ai-price-lines li b {
  color: #244a32;
  font-size: 13px;
}

.ai-price-lines li small {
  overflow: hidden;
  color: #718078;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-price-lines li > strong {
  color: #244a32;
  font-size: 13px;
  white-space: nowrap;
}

.ai-price-factors {
  padding-top: 2px;
}

.ai-price-factors ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
}

.ai-price-factors li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #5a6d60;
  font-size: 11px;
  line-height: 1.35;
}

.ai-price-factors li i {
  color: #2e9f4e;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.ai-price-question {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 20px;
  background: #f2f0ff;
  box-shadow: inset 0 0 0 1px rgba(95, 90, 231, 0.08);
}

.ai-price-question.is-required {
  background: #eef8f0;
  box-shadow: inset 0 0 0 1px rgba(44, 147, 75, 0.1);
}

.ai-price-question > p {
  margin: 0 0 5px;
  color: #615bd1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-price-question.is-required > p {
  color: #368151;
}

.ai-price-question > h4 {
  font-size: 15px;
}

.ai-price-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ai-price-replies button {
  padding: 8px 11px;
  border: 1px solid rgba(45, 126, 70, 0.14);
  border-radius: 10px;
  color: #315b40;
  background: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.ai-price-question form {
  margin-top: 12px;
}

.ai-price-question form > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 5px 5px 5px 15px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(45, 98, 61, 0.11);
}

.ai-price-question input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: #23452f;
  background: transparent;
  font: inherit;
  font-size: 13px;
}

.ai-price-question input::placeholder {
  color: #90a096;
}

.ai-price-question form button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #5753c9;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.ai-price-question form button svg {
  width: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-price-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, 0.58fr);
  align-items: center;
  gap: 24px;
  margin-top: 18px;
  padding: 22px 24px;
  overflow: hidden;
  border-radius: 22px;
  background: #eaf7ed;
  box-shadow: inset 0 0 0 1px rgba(39, 126, 67, 0.1);
  animation: ai-price-offer-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ai-price-offer-copy > p,
.ai-price-offer-form-head > p {
  margin: 0 0 5px;
  color: #34814e;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ai-price-offer h4 {
  margin: 0;
  color: #183e29;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.ai-price-offer-copy > span,
.ai-price-offer-form-head > span {
  display: block;
  max-width: 660px;
  margin-top: 7px;
  color: #5b7062;
  font-size: 12px;
  line-height: 1.48;
}

.ai-price-offer-action {
  display: grid;
  justify-items: stretch;
  gap: 8px;
}

.ai-price-offer-action > button,
.ai-price-offer-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: #20a846;
  box-shadow: 0 12px 26px rgba(30, 145, 63, 0.2);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms ease, box-shadow 180ms ease;
}

.ai-price-offer-action > button:hover,
.ai-price-offer-submit:hover:not(:disabled) {
  background: #19963b;
  box-shadow: 0 15px 30px rgba(30, 145, 63, 0.25);
  transform: translateY(-2px);
}

.ai-price-offer-action svg,
.ai-price-offer-submit svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.ai-price-offer-action > button:hover svg,
.ai-price-offer-submit:hover:not(:disabled) svg {
  transform: translateX(3px);
}

.ai-price-offer-action > small {
  color: #698073;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

.ai-price-offer.is-open {
  display: block;
  padding: 24px;
  background: #f1f8f3;
}

.ai-price-offer-form-head {
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(39, 107, 61, 0.1);
}

.ai-price-offer form {
  margin-top: 18px;
}

.ai-price-offer-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.ai-price-offer-fields label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.ai-price-offer-fields label > span {
  color: #385945;
  font-size: 11px;
  font-weight: 800;
}

.ai-price-offer-fields label > span small {
  margin-left: 4px;
  color: #819087;
  font-size: 9px;
  font-weight: 700;
}

.ai-price-offer-fields input {
  width: 100%;
  min-width: 0;
  min-height: 47px;
  padding: 0 13px;
  border: 1px solid rgba(45, 101, 62, 0.14);
  border-radius: 12px;
  outline: 0;
  color: #1f422c;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(45, 94, 60, 0.04);
  font: inherit;
  font-size: 13px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.ai-price-offer-fields input:focus {
  border-color: rgba(42, 159, 73, 0.55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(42, 159, 73, 0.09);
}

.ai-price-offer-fields input::placeholder {
  color: #98a69d;
}

.ai-price-offer-contact-hint {
  margin: 9px 0 0;
  color: #73847a;
  font-size: 10px;
}

.ai-price-offer-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  color: #617368;
  font-size: 10px;
  line-height: 1.45;
  cursor: pointer;
}

.ai-price-offer-consent input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #239e45;
}

.ai-price-offer-consent a {
  color: #287f43;
  font-weight: 800;
  text-underline-offset: 2px;
}

.ai-price-offer-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  color: #853b33;
  background: #fff0ee;
  font-size: 11px;
}

.ai-price-offer-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.ai-price-offer-form-actions > button:first-child {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  color: #567063;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.ai-price-offer-submit {
  min-height: 46px;
  padding-inline: 20px;
}

.ai-price-offer-submit:disabled,
.ai-price-offer-form-actions > button:disabled {
  cursor: wait;
  opacity: 0.65;
  transform: none;
}

.ai-price-offer-fineprint {
  display: block;
  margin-top: 9px;
  color: #7b8b82;
  font-size: 9px;
  line-height: 1.4;
  text-align: right;
}

.ai-price-recent {
  margin: 13px 3px 0;
  color: #6c7b72;
  font-size: 11px;
}

.ai-price-recent span {
  margin-right: 5px;
  color: #3d6b4c;
  font-weight: 800;
}

.ai-price-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 13px;
  padding: 0 3px;
  color: #7a8880;
}

.ai-price-note i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(80, 108, 90, 0.25);
  border-radius: 50%;
  font-size: 10px;
  font-style: normal;
}

.ai-price-note p {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
}

.ai-price-refining {
  position: absolute;
  z-index: 5;
  top: -9px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #31573e;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(30, 90, 50, 0.14);
  font-size: 11px;
  font-weight: 800;
  transform: translateX(-50%);
}

.ai-price-refining i {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(47, 153, 77, 0.22);
  border-top-color: #35a956;
  border-radius: 50%;
  animation: wizard-spin 800ms linear infinite;
}

.ai-price-sheet.is-refining .ai-price-main,
.ai-price-sheet.is-refining .ai-price-question,
.ai-price-sheet.is-refining .ai-price-sheet-head {
  opacity: 0.58;
  pointer-events: none;
}

.ai-price-inline-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 12px;
  color: #8b352f;
  background: #fff0ee;
  font-size: 11px;
}

.ai-price-inline-error button {
  flex: 0 0 auto;
  border: 0;
  color: #7a2f2a;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.ai-price-error {
  min-height: 360px;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 46px 24px;
  text-align: center;
}

.ai-price-error-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #5652c9;
  background: #efedff;
  font-size: 26px;
}

.ai-price-error > span:not(.ai-price-error-mark) {
  max-width: 520px;
  margin-top: 12px;
  color: #65756b;
  font-size: 13px;
  line-height: 1.5;
}

.ai-price-error > div {
  display: flex;
  gap: 9px;
  margin-top: 22px;
}

.ai-price-error button {
  min-height: 42px;
  padding: 0 15px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #5753c9;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ai-price-error button + button {
  color: #34503e;
  background: #edf4ef;
}

.ai-price-sheet button:focus-visible,
.ai-price-sheet input:focus-visible,
.ai-price-sheet a:focus-visible,
.ai-price-error button:focus-visible {
  outline: 3px solid rgba(95, 90, 231, 0.24);
  outline-offset: 2px;
}

@keyframes ai-price-orbit {
  to { transform: rotate(360deg); }
}

@keyframes ai-price-pulse {
  0%, 100% { transform: scale(0.82); opacity: 0.42; }
  50% { transform: scale(1); opacity: 1; }
}

@keyframes ai-price-check-step {
  0%, 100% { opacity: 0.35; transform: translateX(0); }
  28%, 58% { opacity: 1; transform: translateX(4px); }
}

@keyframes ai-price-scan-line {
  0% { transform: translateX(-115%); }
  100% { transform: translateX(345%); }
}

@keyframes ai-price-line-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ai-price-offer-in {
  from { opacity: 0; transform: translateY(10px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .request-wizard[data-wizard-view="ai-result"] {
    width: calc(100vw - 16px);
  }

  .request-wizard[data-wizard-view="ai-result"] .dialog-header {
    padding-bottom: 14px;
  }

  .ai-price-loading {
    min-height: 490px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 28px;
    padding: 28px 22px 50px;
    text-align: center;
  }

  .ai-price-orbit {
    width: 154px;
  }

  .ai-price-orbit span {
    left: 59px;
    top: 59px;
    width: 36px;
    height: 36px;
  }

  .ai-price-orbit span::before {
    left: 10px;
    top: 5px;
  }

  .ai-price-orbit span::after {
    left: 20px;
    top: 14px;
  }

  .ai-price-orbit i { left: 13px; top: 69px; }
  .ai-price-orbit b { right: 17px; top: 27px; }

  .ai-price-loading-copy h3,
  .ai-price-error h3 {
    font-size: 29px;
  }

  .ai-price-loading-copy ol {
    width: max-content;
    max-width: 100%;
    margin: 22px auto 0;
    text-align: left;
  }

  .ai-price-sheet-head {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 18px;
  }

  .ai-price-sheet-head h3 {
    font-size: 29px;
  }

  .ai-price-sheet-head p {
    margin-top: 8px;
    font-size: 13px;
  }

  .ai-price-sheet-head > button {
    width: max-content;
  }

  .ai-price-main {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 14px;
    border-radius: 22px;
  }

  .ai-price-total {
    min-height: 190px;
    padding: 26px 23px;
    border-radius: 19px;
  }

  .ai-price-total strong {
    font-size: clamp(39px, 12vw, 52px);
  }

  .ai-price-detail {
    padding: 0 5px 5px;
  }

  .ai-price-lines li {
    grid-template-columns: 8px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }

  .ai-price-lines li > strong {
    grid-column: 2;
    margin-top: -1px;
  }

  .ai-price-lines li small {
    white-space: normal;
  }

  .ai-price-factors ul {
    grid-template-columns: 1fr;
  }

  .ai-price-question {
    margin-top: 14px;
    padding: 16px 14px;
  }

  .ai-price-question form > div {
    align-items: stretch;
  }

  .ai-price-question form button span {
    display: none;
  }

  .ai-price-question form button {
    width: 40px;
    justify-content: center;
    padding: 0;
  }

  .ai-price-replies {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ai-price-replies button {
    text-align: left;
  }

  .ai-price-offer {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 14px;
    padding: 19px 17px;
    border-radius: 18px;
  }

  .ai-price-offer h4 {
    font-size: 21px;
  }

  .ai-price-offer-action > button {
    width: 100%;
  }

  .ai-price-offer.is-open {
    padding: 19px 16px;
  }

  .ai-price-offer-fields {
    grid-template-columns: 1fr;
  }

  .ai-price-offer-form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ai-price-offer-submit,
  .ai-price-offer-form-actions > button:first-child {
    width: 100%;
  }

  .ai-price-offer-submit {
    grid-row: 1;
  }

  .ai-price-offer-fineprint {
    text-align: left;
  }
}

@media (max-width: 420px) {
  .request-wizard[data-wizard-view="ai-result"] .wizard-stage {
    padding-inline: 12px;
  }

  .ai-price-total strong {
    font-size: 39px;
  }

  .ai-price-total > div {
    gap: 5px;
  }

  .ai-price-refining {
    width: max-content;
    max-width: calc(100% - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-price-orbit::before,
  .ai-price-orbit i,
  .ai-price-orbit b,
  .ai-price-loading-copy li,
  .ai-price-loading-line span,
  .ai-price-lines li,
  .ai-price-offer,
  .ai-price-refining i {
    animation: none;
  }

  .ai-price-loading-copy li {
    opacity: 1;
    transform: none;
  }

  .ai-price-loading-line span {
    width: 72%;
  }
}