@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-italic-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}

:root {
  --bg: #F3F0E8;
  --bg-warm: #EBE6DB;
  --paper: #FFFCF7;
  --text: #1A1916;
  --muted: #534E4A;
  --line: #D9D3C6;
  --green: #165A40;
  --green-deep: #0C2E22;
  --ochre: #D4B584;
  --ochre-ink: #8A5A1F;
  --on-dark: #F3F0E8;
  --font: "Archivo", system-ui, sans-serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

html { font-synthesis: none; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--green) 22%, transparent); }

.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 32px;
  padding: 0 clamp(20px, 4vw, 48px);
  height: 52px;
  background: var(--green-deep);
  color: var(--on-dark);
  border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 28%, transparent);
}
.nav-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.nav-brand img {
  height: 34px;
  width: auto;
}
.brand-wordmark {
  display: inline-flex;
  gap: 0.42em;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-brand .brand-wordmark { font-size: 13px; }
.nav-brand .brand-the { color: var(--ochre); }
.nav-brand .brand-foreland { color: var(--on-dark); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: color-mix(in srgb, var(--on-dark) 58%, transparent); }
.nav-links a:hover { color: var(--on-dark); }
.nav-cta {
  font-size: 13px; font-weight: 600; color: var(--green-deep);
  background: var(--paper);
  padding: 7px 14px; border-radius: 980px;
  white-space: nowrap;
}
.nav-cta:hover { background: #fff; }
.nav :focus-visible { outline-color: var(--on-dark); }
@media (max-width: 640px) {
  .nav-links { display: none; }
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 0 96px;
  text-align: center;
  min-height: calc(100svh - 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hero::before,
.chapter.alt::before,
.chapter.sheet::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: url("contours.svg") no-repeat;
  pointer-events: none;
  z-index: 0;
  animation: contour-drift 96s ease-in-out infinite alternate;
}
@keyframes contour-drift {
  from { transform: translate3d(-1.6%, -1.1%, 0); }
  to { transform: translate3d(1.8%, 1.4%, 0); }
}
.hero::before {
  background-size: min(1600px, 130vw) auto;
  background-position: 72% -8%;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(#000 0%, #000 42%, transparent 78%);
  mask-image: linear-gradient(#000 0%, #000 42%, transparent 78%);
}
.hero > * { position: relative; z-index: 1; }

.chapter.alt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-warm);
}
.chapter.alt::before {
  background-size: min(1700px, 140vw) auto;
  background-position: 8% 70%;
  opacity: 0.7;
  animation-delay: -32s;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 18%, #000 58%, transparent 92%);
  mask-image: linear-gradient(transparent 0%, #000 18%, #000 58%, transparent 92%);
}
.chapter.alt > * { position: relative; z-index: 1; }

.chapter.sheet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
}
.chapter.sheet::before {
  background-size: min(1700px, 140vw) auto;
  background-position: 108% 12%;
  opacity: 0.62;
  animation-delay: -48s;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 16%, #000 62%, transparent 100%);
  mask-image: linear-gradient(transparent 0%, #000 16%, #000 62%, transparent 100%);
}
.chapter.sheet > * { position: relative; z-index: 1; }
.hero h1 {
  margin: 0 auto;
  max-width: 16ch;
  padding: 0 24px;
  font-size: clamp(40px, 7.2vw, 80px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.038em;
}
.hero .lede {
  margin: 22px auto 0;
  max-width: 46ch;
  padding: 0 24px;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.015em;
}
.hero-cta { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-text {
  display: inline-flex; align-items: center;
  font-weight: 600; font-size: 17px;
  padding: 12px 8px;
  color: var(--green);
}
.btn-text:hover { color: var(--green-deep); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-weight: 600; font-size: 17px;
  padding: 12px 22px; border-radius: 980px;
  background: var(--green); color: #fff;
}
.btn:hover { background: #124A35; }
.btn-light { background: var(--paper); color: var(--green-deep); }
.btn-light:hover { background: #fff; }
.btn, .btn-text, .nav-cta {
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.chapter {
  padding: 28px 0 96px;
}

.chapter-head {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 36px;
  text-align: center;
}
.chapter-head h2 {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.08;
}
.chapter-head p {
  margin: 14px auto 0;
  max-width: 38ch;
  font-size: 19px;
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: -0.01em;
}

.full-shot {
  position: relative;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 20px;
}
/* The screen is cut off by the band below: a 16:10 shot inside a 2:1 window
   shows the top 80% and hides the bottom 20%. Only the top corners round —
   the bottom is a hard edge, so it reads as running on underneath. */
.shot-crop {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  border-radius: 20px 20px 0 0;
}
.full-shot img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.also {
  text-align: center;
  padding: 20px 24px 0;
  font-size: 15px;
  color: var(--muted);
}

.how {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 24px 80px;
}
.how-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
.how-flourish {
  display: block;
  width: 88px;
  height: 22px;
  margin: 0 auto 22px;
  color: var(--green);
}
.how-flourish svg {
  display: block;
  width: 100%;
  height: 100%;
}
.how-flourish path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.how-flourish.is-visible path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms var(--ease);
}
.how-flourish.is-visible path:nth-child(2) {
  transition-delay: 120ms;
}
.how h2 {
  margin: 0 0 48px;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.1;
  text-align: center;
}
.how-steps {
  position: relative;
}
.how-steps::before {
  content: "";
  position: absolute;
  left: 25.5px;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: color-mix(in srgb, var(--green) 38%, var(--line));
  z-index: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.25s var(--ease);
}
.how-steps:has(.is-visible)::before {
  transform: scaleY(1);
}
.step {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 26px 0;
}
.step-mark {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  color: var(--green);
}
.step-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.step-mark ellipse {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.step.is-visible .step-mark ellipse {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 800ms var(--ease);
}
.step.is-visible .step-mark ellipse:nth-last-of-type(1) { transition-delay: 40ms; }
.step.is-visible .step-mark ellipse:nth-last-of-type(2) { transition-delay: 130ms; }
.step.is-visible .step-mark ellipse:nth-last-of-type(3) { transition-delay: 220ms; }
.step.is-visible .step-mark ellipse:nth-last-of-type(4) { transition-delay: 310ms; }
.step-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: var(--green);
  line-height: 1;
  opacity: 0;
}
.step.is-visible .step-num {
  opacity: 1;
  transition: opacity 400ms var(--ease) 180ms;
}
.step h2,
.step h3 {
  margin: 0;
  padding-top: 12px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.022em;
  /* The section heading above is centred; step headings are not. */
  text-align: left;
}
.step p {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--muted);
}
@media (max-width: 520px) {
  .how-steps::before { left: 23.5px; }
  .step { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .step-mark { width: 48px; height: 48px; }
  .step h2,
  .step h3 { padding-top: 10px; }
}

.why {
  background: var(--green-deep);
  color: var(--on-dark);
  padding: 96px 24px 100px;
  text-align: center;
}
.why h2 {
  margin: 0 auto;
  max-width: 16ch;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.1;
}
.why .body {
  margin: 20px auto 0;
  max-width: 46ch;
  font-size: 18px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--on-dark) 68%, transparent);
}
.why .body p + p { margin-top: 14px; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 920px;
  margin: 56px auto 0;
  text-align: left;
}
.why-item .t {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.why-item .d {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--on-dark) 62%, transparent);
}
@media (max-width: 700px) {
  .why-grid { grid-template-columns: 1fr; gap: 28px; }
}

.price {
  background: var(--bg-warm);
  padding: 96px 24px 100px;
  text-align: center;
}
.price h2 {
  margin: 0 auto;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.price.page > h2 {
  margin: 0 auto 40px;
}
.price-lead {
  margin: 16px auto 48px;
  max-width: 42ch;
  font-size: 18px;
  line-height: 1.45;
  color: var(--muted);
}
.price-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 920px;
  margin: 0 auto;
}
.price-row h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}
.price-row p.cost {
  margin: 10px 0 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.price-row p.note {
  margin: 8px auto 0;
  max-width: 28ch;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
}
@media (max-width: 700px) {
  .price-row { grid-template-columns: 1fr; gap: 40px; }
}

.cta {
  background: var(--green-deep);
  color: var(--on-dark);
  text-align: center;
  padding: 120px 24px 128px;
}
.cta h2 {
  margin: 0 auto;
  max-width: 22ch;
  font-size: clamp(36px, 5.4vw, 64px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.cta p {
  margin: 18px auto 0;
  max-width: 34ch;
  font-size: 19px;
  color: color-mix(in srgb, var(--on-dark) 64%, transparent);
}
.cta .hero-cta { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mail {
  display: inline-flex; align-items: center;
  padding: 12px 8px;
  font-size: 17px; font-weight: 500;
  color: color-mix(in srgb, var(--on-dark) 80%, transparent);
}
.mail:hover { color: var(--on-dark); }

.look {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  margin: auto;
  padding: 32px 28px 28px;
  border: 0;
  border-radius: 18px;
  background: var(--paper);
  color: var(--text);
  box-shadow: 0 28px 64px -12px rgb(0 0 0 / 0.28);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.look[open].is-open {
  opacity: 1;
  transform: none;
}
.look::backdrop {
  background: color-mix(in srgb, var(--green-deep) 72%, transparent);
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.look[open].is-open::backdrop {
  opacity: 1;
}
.look-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.look-close svg {
  display: block;
  width: 16px;
  height: 16px;
}
.look-close:hover { color: var(--text); }
.look h2 {
  margin: 0 40px 0 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.look .look-lead {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--muted);
}
.look-form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  text-align: left;
}
.look-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.look-form input,
.look-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}
.look-form textarea { min-height: 96px; resize: vertical; }
.look-form input:focus-visible,
.look-form textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.look-hp {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}
.look-form .btn { width: 100%; margin-top: 4px; cursor: pointer; border: 0; }
.look-form .btn[disabled] { opacity: 0.6; cursor: wait; }
.look-err {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #8A2F2F;
}
.look-err a { text-decoration: underline; }
.look[data-state="done"] .look-form { display: none; }
.look[data-state="done"] .look-lead { display: none; }
.look-thanks { display: none; margin: 14px 0 0; font-size: 16px; line-height: 1.45; color: var(--muted); }
.look[data-state="done"] .look-thanks { display: block; }

footer {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  padding: 28px clamp(20px, 4vw, 48px) 36px;
  font-size: 13px; color: var(--muted);
}
footer .brand { display: flex; align-items: center; gap: 8px; color: var(--text); }
footer .brand img {
  height: 28px;
  width: auto;
}
footer .brand .brand-wordmark { font-size: 12px; }
footer .brand .brand-the { color: var(--ochre-ink); }
footer .brand .brand-foreland { color: var(--text); }

.reveal { opacity: 1; transform: none; }
.reveal.is-visible { opacity: 1; transform: none; }
.step:nth-child(1).reveal { transition-delay: 0ms; }
.step:nth-child(2).reveal { transition-delay: 70ms; }
.step:nth-child(3).reveal { transition-delay: 140ms; }
.step:nth-child(4).reveal { transition-delay: 210ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.hero h1 { animation: rise 700ms var(--ease) both; }
.hero .lede { animation: rise 700ms var(--ease) 80ms both; }
.hero .hero-cta { animation: rise 700ms var(--ease) 160ms both; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero h1, .hero .lede, .hero .hero-cta { animation: none; }
  .how-flourish path,
  .step-mark ellipse { stroke-dashoffset: 0; transition: none; }
  .how-steps::before { transform: none; transition: none; }
  .step-num { opacity: 1; transition: none; }
  .look, .look::backdrop { opacity: 1; transform: none; transition: none; }
  .hero::before,
  .chapter.alt::before,
  .chapter.sheet::before { animation: none; inset: 0; }
  html { scroll-behavior: auto; }
}


/* Multi-page additions */
input, textarea { caret-color: var(--green); }
a { text-underline-offset: 0.18em; }
html { scrollbar-color: var(--green) var(--bg-warm); }
.nav-links a[aria-current="page"] { color: var(--on-dark); }
.nav-menu {
  display: none;
  margin-left: auto;
}
/* The disclosure reads as a control, not stray text: the same stadium pill the
   rest of the site uses for actions, on the nav's own cream hairline. */
.nav-menu summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 5px 11px;
  border-radius: 980px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 28%, transparent);
  color: color-mix(in srgb, var(--on-dark) 78%, transparent);
  white-space: nowrap;
  transition: background 180ms var(--ease), color 180ms var(--ease),
              border-color 180ms var(--ease);
}
.nav-menu summary::-webkit-details-marker { display: none; }
/* Drawn, not imported — a stroked chevron in the step-mark idiom. */
.nav-menu summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 240ms var(--ease);
}
.nav-menu[open] summary {
  background: color-mix(in srgb, var(--on-dark) 12%, transparent);
  border-color: color-mix(in srgb, var(--on-dark) 44%, transparent);
  color: var(--on-dark);
}
.nav-menu[open] summary::after { transform: translateY(1px) rotate(-135deg); }

.nav-menu .nav-drop {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  top: 58px;
  background: var(--green-deep);
  border: 1px solid color-mix(in srgb, var(--on-dark) 22%, transparent);
  border-radius: 14px;
  padding: 6px;
  display: grid;
  gap: 2px;
  min-width: 210px;
  animation: navDrop 220ms var(--ease) both;
}
@keyframes navDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.nav-menu .nav-drop a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in srgb, var(--on-dark) 72%, transparent);
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.nav-menu .nav-drop a[aria-current="page"],
.nav-menu .nav-drop a:hover {
  background: color-mix(in srgb, var(--on-dark) 10%, transparent);
  color: var(--on-dark);
}
@media (max-width: 640px) {
  .nav-menu { display: block; }
  .nav { gap: 10px; }
}
/* Brand, menu and the CTA all have to share one 52px row. Below 420px they
   stop fitting at full size, so the chrome tightens a step. */
@media (max-width: 420px) {
  .nav { padding: 0 14px; gap: 8px; }
  .nav-brand { gap: 8px; }
  .nav-cta { font-size: 12px; padding: 6px 11px; }
  .nav-menu summary { font-size: 12px; padding: 5px 9px; }
}
/* Narrower still and the wordmark has to go; the stone mark carries the brand
   on its own and the accessible name stays on the image. */
@media (max-width: 380px) {
  .nav-brand .brand-wordmark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu .nav-drop { animation: none; }
  .nav-menu summary,
  .nav-menu summary::after { transition: none; }
}

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px 24px 8px;
  text-align: center;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: url("contours.svg") no-repeat;
  background-size: min(1600px, 130vw) auto;
  background-position: 70% -10%;
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
  animation: contour-drift 96s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(#000 0%, #000 48%, transparent 82%);
  mask-image: linear-gradient(#000 0%, #000 48%, transparent 82%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 {
  margin: 0 auto;
  max-width: 18ch;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.036em;
}
.page-hero .lede {
  margin: 18px auto 0;
  max-width: 48ch;
  font-size: 19px;
  line-height: 1.45;
  color: var(--text);
}
.page-hero h1 { animation: rise 700ms var(--ease) both; }
.page-hero .lede { animation: rise 700ms var(--ease) 80ms both; }

.how.tight { padding-top: 24px; }
.also.follow { padding-top: 28px; }
.price .also.follow { padding-top: 36px; }

.process {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 32px 72px;
}
.process + .process { border-top: 1px solid var(--line); }
.process h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.process .copy p { margin: 12px 0 0; font-size: 18px; line-height: 1.45; color: var(--muted); }
.process .copy p:first-of-type { color: var(--text); }
.process-shot {
  margin-top: 28px;
}
.process-shot img {
  width: 100%;
  border-radius: 18px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
@media (max-width: 860px) {
  .process { padding: 16px 20px 56px; }
}

.teasers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 32px 80px;
}
.teaser {
  display: block;
  color: inherit;
}
.teaser img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-radius: 18px;
}
.teaser h3 {
  margin: 14px 0 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.teaser p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
}
.teaser:hover h3 { color: var(--green); }
@media (max-width: 800px) {
  .teasers { grid-template-columns: 1fr; padding: 8px 20px 64px; }
}

.price-row { align-items: start; }
.price-row p.note { max-width: 32ch; }
.price-extra {
  margin: 48px auto 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
}
.price.page { padding-top: 40px; }

.read {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}
.read h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.read p { margin: 0 0 16px; font-size: 18px; line-height: 1.5; color: var(--muted); }
.read p.lead { color: var(--text); }

footer {
  align-items: flex-start;
}
footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer a:hover { text-decoration: underline; }
.foot-note { max-width: 42ch; }

@media (prefers-reduced-motion: reduce) {
  .page-hero::before { animation: none; inset: 0; }
  .page-hero h1, .page-hero .lede { animation: none; }
}


/* ============================================================
   Merged-in design: emphasis, drawn frame, step panels, demos
   ============================================================ */

/* Inline emphasis. `.accent` is the forest highlight the new copy leans on;
   `.accent-strong` is the heavier weight used in the home lede. */
.accent { color: var(--green); font-weight: 600; }
.accent-strong { color: var(--green); font-weight: 800; }
.accent-plain { color: var(--green); }
.accent-em { color: var(--green); font-style: italic; }

/* The example screen on the home page gets a contour-green outline that draws
   itself once, clockwise from the bottom-left corner where it meets the band
   below. The path is measured in JS because a rounded rectangle cannot keep
   both a constant stroke width and true circular corners under a stretched
   viewBox. Without JS the frame is simply absent and the image stands alone. */
.shot-frame {
  /* The figure carries 20px of side padding, so 12px here leaves the stroke
     8px clear of the image. The box runs past the cut so the two side strokes
     are clipped by the band rather than ending on the bottom edge. */
  position: absolute;
  inset: -8px 12px -12px;
  pointer-events: none;
}
.shot-frame svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.shot-frame path {
  fill: none;
  stroke: var(--green);
  stroke-width: 5;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.full-shot.has-frame {
  opacity: 0;
  transform: translateY(90px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.full-shot.has-frame.is-drawn {
  opacity: 1;
  transform: none;
}

/* ---- Step panels -------------------------------------------------------- */

/* On the How it works page each step heading is forest; on the home page's
   short version they stay ink, so this is scoped to the page that expands. */
.how.detail .step h2 { color: var(--green); }
.step p + p { margin-top: 10px; }

.step-toggle {
  margin-top: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 18px;
  border: 0;
  border-radius: 6px;
  background: var(--green);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms var(--ease);
}
.step-toggle:hover { background: #124A35; }
.step-toggle svg {
  display: block;
  width: 16px;
  height: 9px;
  transition: transform 320ms var(--ease);
}
.step-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.step-panel { display: none; margin-top: 16px; text-align: left; }
.step-panel.is-open { display: block; }

/* ---- Step 01: what we can build ---------------------------------------- */

.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
}
.offer-grid > * { padding: 0 18px; }
.offer-grid > :first-child { padding-left: 0; }
.offer-grid > :last-child { padding-right: 0; }
.offer-grid > * + * { border-left: 1px solid var(--green); }
.offer-grid h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--green);
}
.offer-grid p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.offer-sub { display: flex; flex-direction: column; gap: 10px; }
.offer-sub .t {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
@media (max-width: 760px) {
  .offer-grid { grid-template-columns: 1fr; }
  .offer-grid > * { padding: 18px 0 0; }
  .offer-grid > :first-child { padding-top: 0; }
  .offer-grid > * + * { border-left: 0; border-top: 1px solid var(--green); }
}

/* The one handwritten-feeling aside on the site. Archivo italic, not a second
   family — the design system allows exactly one typeface. */
.step-panel .aside-script {
  margin: 22px 0 0;
  text-align: center;
  font-size: clamp(19px, 2.6vw, 25px);
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--green);
}
.step-panel .aside-script a { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Step 02: the prototype -------------------------------------------- */

.panel-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 28px;
  align-items: center;
}
.panel-split p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.panel-split p + p { margin-top: 12px; }
.step-panel .panel-note { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.demo { display: block; width: 100%; height: auto; }

/* ---- Step 03: what you can change -------------------------------------- */

.change-demo {
  display: grid;
  grid-template-columns: minmax(96px, 0.8fr) minmax(280px, 2.7fr) minmax(96px, 0.8fr);
  gap: 12px;
  align-items: center;
}
.change-notes {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  height: 100%;
  padding: 12px 0;
}
.change-notes.right { text-align: left; }
.change-notes:not(.right) { text-align: right; }
.change-notes .t {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.3;
}
.change-notes .d { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (max-width: 860px) {
  .change-demo { grid-template-columns: 1fr; }
  /* Stacked, the notes no longer sit either side of the screen, so the leader
     lines and their dots would point at empty space. */
  .change-demo .leaders { display: none; }
  .change-notes { flex-direction: row; gap: 20px; padding: 0; }
  .change-demo .change-notes:not(.right),
  .change-demo .change-notes.right { text-align: left; }
  .change-demo > .demo { order: -1; }
}

/* ---- Step 04: going live ----------------------------------------------- */

.host-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}
.host-switch .t {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}
.host-switch button {
  position: relative;
  width: 44px;
  height: 26px;
  flex: none;
  padding: 0;
  border: 1px solid var(--green);
  border-radius: 980px;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  cursor: pointer;
  transition: background 220ms var(--ease);
}
.host-switch button::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  transition: left 220ms var(--ease), background 220ms var(--ease);
}
.host-switch button[aria-checked="true"] { background: var(--green); }
.host-switch button[aria-checked="true"]::after { left: 20px; background: var(--paper); }

/* Two mutually exclusive tellings of the same diagram: ours or theirs. */
.host-a, .host-b { display: none; }
.host-ours .host-a, .host-own .host-b { display: revert; }
.host-maint { display: none; }
.host-own .host-maint { display: revert; }

.assure-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px;
}
.assure-grid .t {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.assure-grid .d { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* The "we meet here" flag sits against the spine, and slides down when step 02
   is expanded so it keeps pointing at the meeting rather than at the panel. */
.step.meet { position: relative; }
.meet-dot, .meet-label {
  position: absolute;
  top: 128px;
  color: var(--green);
  transition: top 420ms var(--ease);
}
.meet-dot {
  left: 26px;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  z-index: 2;
}
.meet-label {
  left: 24px;
  transform: translate(calc(-100% - 14px), -50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.step.meet.is-open .meet-dot,
.step.meet.is-open .meet-label { top: calc(50% + 52px); }
/* There is no room for the flag beside a narrow spine, so it is dropped
   rather than overlapped. The step numbers still carry the sequence. */
@media (max-width: 900px) {
  .meet-dot, .meet-label { display: none; }
}

/* ---- Pricing ------------------------------------------------------------ */

.price-row p.cost .star { color: var(--green); }
.price-tag {
  margin: 24px auto 0;
  font-size: clamp(22px, 3.4vw, 33px);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--green);
}
.price-tag .type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  padding-right: 0.14em;
  animation: typeLine 2600ms steps(47, end) 400ms both;
}
.price-tag .caret {
  display: inline-block;
  font-style: italic;
  animation: caretBlink 760ms step-end 400ms 6 both, caretOff 1ms linear 5000ms forwards;
}

/* ---- Headline lines that rise one after another ------------------------- */

.page-hero h1 .line,
.hero h1 .line { display: block; }
.page-hero h1.stagger { animation: none; }
.page-hero h1.stagger .line { animation: rise 700ms var(--ease) both; }
.page-hero h1.stagger .line:nth-child(2) { animation-delay: 240ms; }
.page-hero h1.stagger .line:nth-child(3) { animation-delay: 480ms; }
.page-hero h1.stagger + .lede { animation-delay: 760ms; }

/* A left-aligned headline block that is itself centred in the band. */
.page-hero .block {
  display: inline-block;
  text-align: left;
  max-width: 100%;
}

/* ---- Keyframes used by the step panels ---------------------------------- */

@keyframes revealIn {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}
@keyframes sketchIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sketchFrame {
  from { opacity: 0; transform: scaleY(0.06); }
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes sketchPanel {
  from { opacity: 0; transform: scaleX(0.02); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.72); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes typeSweep {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes drawIn {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes appearStep {
  from { opacity: 0; }
  to { opacity: 0.85; }
}
@keyframes fadeOutSwap {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes swapIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
@keyframes typeLine {
  from { max-width: 0; }
  to { max-width: 100%; }
}
@keyframes caretBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@keyframes caretOff {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .step-panel .swap-out { opacity: 0; }
  .step-panel *,
  .price-tag .type,
  .price-tag .caret,
  .page-hero h1.stagger .line { animation: none !important; }
  .price-tag .type { max-width: none; }
  .price-tag .caret { display: none; }
  .step-toggle svg { transition: none; }
  .meet-dot, .meet-label { transition: none; }
  .host-switch button,
  .host-switch button::after { transition: none; }
  .full-shot.has-frame { opacity: 1; transform: none; transition: none; }
  .shot-frame path { transition: none; }
}

/* The example screen hangs out of the bottom of its band and over the section
   below. That needs the band itself unclipped, so the contour wash moves into
   a child that does the clipping instead of the band's own ::before. */
/* The cut lands exactly on the band boundary, so the band keeps no bottom gap. */
.chapter.sheet.bleed { padding-bottom: 0; }

/* Pricing opens on a full screen, the way the home page does. */
.page-hero.tall {
  min-height: calc(100svh - 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 64px;
}

/* The two tellings of the hosting diagram cross-fade when the switch flips.
   Re-showing a hidden element restarts the animation, so no JS is involved. */
.host-a, .host-b, .host-maint { animation: swapIn 420ms var(--ease) both; }
.how.detail { padding-top: 40px; }

/* The typed line needs a single unbroken row to sweep across, which does not
   fit a phone. Below tablet it simply wraps and arrives whole. */
@media (max-width: 760px) {
  .price-tag .type {
    display: block;
    white-space: normal;
    overflow: visible;
    max-width: none;
    padding-right: 0;
    animation: none;
  }
  .price-tag .caret { display: none; }
}

/* Homepage service explanation. Keep these rules scoped to the landing. */
.home #services { scroll-margin-top: 72px; }
.home .hero { min-height: auto; padding: 96px 20px 88px; }
.home .hero h1 { max-width: 20ch; }
.home .hero .lede { max-width: 65ch; }
.home .hero-promise {
  max-width: 54ch;
  margin: 22px auto 0;
  padding: 0 24px;
  color: var(--muted);
  font-size: 16px;
}
.home .services {
  padding: 32px clamp(24px, 4vw, 48px) 88px;
  background: var(--bg-warm);
  border-block: 1px solid var(--line);
}
.home .services .chapter-head { padding: 40px 0 52px; }
.home .services-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1160px;
  margin: 0 auto;
}
.home .service {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px 28px 0;
  border-left: 1px solid var(--line);
}
.home .service:first-child { padding-left: 0; border-left: 0; }
.home .service:last-child { padding-right: 0; }
.home .service-label {
  display: flex;
  gap: 12px;
  margin: 0 0 20px;
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home .service-label span { opacity: 0.65; }
.home .service h3 {
  min-height: 58px;
  margin: 0 0 16px;
  font-size: 25px;
  line-height: 1.16;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.home .service-description { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
@media (max-width: 800px) {
  .home .services-list { grid-template-columns: 1fr; max-width: 540px; }
  .home .service,
  .home .service:first-child,
  .home .service:last-child { padding: 30px 0; border-left: 0; border-top: 1px solid var(--line); }
  .home .service:last-child { padding-bottom: 0; }
  .home .service h3 { min-height: auto; }
  .home .service-label { margin-bottom: 14px; }
}
.home .example .chapter-head { max-width: 820px; }
.home .example .chapter-head p { max-width: 54ch; }
.home .example figcaption { margin: 20px auto 0; max-width: 64ch; text-align: center; color: var(--muted); font-size: 14px; }
.home .price-lead { max-width: 58ch; }
.home .cta p { max-width: 48ch; }
@media (max-width: 640px) {
  .home .hero { padding: 64px 0; }
  .home .hero-promise { font-size: 15px; }
  .home .services { padding-block: 24px 56px; }
  .home .services .chapter-head { padding: 24px 0 36px; }
  .home .service h3 { font-size: 23px; }
}

.home .nav-enquiry-short { display: none; }
@media (max-width: 640px) {
  .home .nav { gap: 8px; padding-inline: 12px; }
  .home .nav-brand { flex-shrink: 0; gap: 6px; padding-inline: 4px 6px; }
  .home .nav-brand .brand-wordmark { font-size: 10px; letter-spacing: 0.1em; }
  .home .nav-brand img { height: 24px; }
  .home .nav-cta { padding-inline: 9px; font-size: 12px; }
  .home .nav-enquiry-full { display: none; }
  .home .nav-enquiry-short { display: inline; }
}

/* A compact comparison of the three pricing stages on the homepage. */
.home #price {
  padding: 64px clamp(24px, 4vw, 48px) 48px;
  scroll-margin-top: 72px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.home #price .price-lead { margin: 16px auto 32px; }
.home .pricing-table {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  border-collapse: collapse;
  text-align: left;
  font-size: 16px;
  line-height: 1.5;
}
.home .pricing-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.home .pricing-table thead { background: var(--green-deep); color: var(--on-dark); }
.home .pricing-table thead th { padding: 14px 24px; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.home .pricing-table th:first-child { width: 26%; }
.home .pricing-table th:nth-child(2) { width: 45%; }
.home .pricing-table tbody th,
.home .pricing-table td { padding: 24px; vertical-align: top; border: 1px solid var(--line); }
.home .pricing-table tbody th { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.home .pricing-table tbody { background: var(--bg); }
.home .pricing-table tbody tr:nth-child(2) { background: var(--bg-warm); }
.home .pricing-table td { color: var(--muted); }
.home .pricing-stage-number { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--green); }
.home .pricing-table strong { display: block; font-size: 18px; font-weight: 600; color: var(--green); }
.home .pricing-detail { display: block; margin-top: 6px; font-size: 14px; }
.home .pricing-mobile-label { display: none; }
.home #price .also { margin: 12px 0 0; padding-top: 12px; }
@media (max-width: 640px) {
  .home #price { padding-block: 48px 32px; }
  .home .pricing-table,
  .home .pricing-table tbody,
  .home .pricing-table tr,
  .home .pricing-table tbody th,
  .home .pricing-table td { display: block; width: 100%; }
  .home .pricing-table thead { display: none; }
  .home .pricing-table tbody { border: 1px solid var(--line); }
  .home .pricing-table tbody th:first-child { width: 100%; padding: 20px 20px 12px; border: 0; }
  .home .pricing-table td { padding: 0 20px 20px; border: 0; }
  .home .pricing-table tbody tr + tr { border-top: 1px solid var(--line); }
  .home .pricing-stage-number { display: inline; margin-right: 10px; }
  .home .pricing-mobile-label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
}

/* Fine paper grain and a restrained warm wash on two alternating chapters. */
.home #services,
.home #how {
  background-image:
    url("paper-fibres.svg"),
    radial-gradient(ellipse at 8% 12%, rgb(166 122 64 / 0.055), transparent 62%),
    radial-gradient(ellipse at 92% 88%, rgb(166 122 64 / 0.045), transparent 58%);
  background-size: 600px 600px, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat;
}
.home #how { background-position: 87px 43px, center, center; }

/* Three chapter backgrounds: contour cream, parchment, and deep forest. */
.home .example,
.home #price {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--bg);
}
.home #price > * { position: relative; z-index: 1; }
.home .hero::before,
.home .example::before,
.home #price::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  background: url("contours.svg") no-repeat 72% -8%;
  background-size: min(1600px, 130vw) auto;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(#000 0%, #000 42%, transparent 78%);
  mask-image: linear-gradient(#000 0%, #000 42%, transparent 78%);
  animation: contour-drift 96s ease-in-out infinite alternate;
}
.home #services,
.home #how {
  background-color: var(--bg-warm);
  background-position: 0 0, center, center;
}
@media (prefers-reduced-motion: reduce) {
  .home .hero::before,
  .home .example::before,
  .home #price::before { animation: none; inset: 0; }
}