/* Plot & Form: a fictional garden-design studio.
   Warm ivory paper, deep ink blue, dusty clay and butter yellow. Green lives
   in the garden drawings only. Measured-drawing details (hairlines, ticks,
   small capitals) carry the identity instead of cards and gradients. */

@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/InstrumentSerif-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/InstrumentSerif-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/InstrumentSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/InstrumentSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --ivory: #F6F0E4;
  --paper: #FBF8F1;
  --sand: #EEE4D1;
  --ink: #1F2A44;
  --ink-2: #39445E;
  --ink-3: #5A637A;
  --clay: #B8654A;
  --clay-deep: #8F4429;
  --clay-soft: #EBCDBB;
  --clay-light: #EDB497;
  --ivory-2: #E4DCCB;
  --butter: #F2CF6B;
  --butter-soft: #F8E8B7;
  --line: rgba(31, 42, 68, 0.2);
  --line-strong: rgba(31, 42, 68, 0.45);
  --error: #A3321F;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(1rem, 4vw, 3rem);
  --wide: 76rem;
  --radius: 0.9rem;
  --bar-h: 2rem;
  --header-h: 4.25rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--clay); text-decoration-thickness: 2px; }
p, ul, ol, dl, figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
button, input, select { font: inherit; color: inherit; }
sup { font-size: 0.66em; line-height: 0; vertical-align: 0.42em; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--butter); border-radius: 4px; }
.on-ink :focus-visible, .concept-bar :focus-visible { outline-color: var(--butter); box-shadow: 0 0 0 7px var(--ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  background: var(--butter); color: var(--ink); padding: 0.7rem 1rem; border-radius: 0.5rem; font-weight: 700;
}
.skip-link:focus { top: 0.6rem; }
/* Skip-link and jump targets take focus; keyboard users see it as a plain frame. */
main:focus, .planner__output:focus { outline: none; }
main:focus-visible, .planner__output:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; box-shadow: none; border-radius: 0; }
.planner__output:focus-visible { outline-offset: 0.45rem; border-radius: 1.2rem 1.2rem 1.2rem 0.35rem; }

/* ------------------------------------------------------------ type */

.display {
  font-family: var(--serif);
  font-size: clamp(2.35rem, 1.45rem + 3.9vw, 5.1rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.display em, .heading em { font-style: italic; color: var(--clay-deep); }
.heading { font-family: var(--serif); font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3.2rem); line-height: 1.04; text-wrap: balance; }
.subheading { font-family: var(--serif); font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem); line-height: 1.12; }
.lede { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem); line-height: 1.5; color: var(--ink-2); max-width: 36rem; }
.eyebrow {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay-deep);
}
.small { font-size: 0.92rem; color: var(--ink-3); }
.prose { max-width: 40rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 1.8rem; font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.4rem; }

/* ------------------------------------------------------------ layout */

.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.section { padding-block: clamp(3.2rem, 7vw, 6.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.section-head { display: grid; gap: 0.8rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); max-width: 46rem; }
.stack > * + * { margin-top: 1rem; }

/* A measured rule: a hairline with end ticks, used between sections. */
.rule { position: relative; height: 1px; background: var(--line-strong); border: 0; margin-block: 0; overflow: visible; color: inherit; }
.section-foot { margin-top: 1.8rem; }
.rule::before, .rule::after { content: ''; position: absolute; top: -6px; width: 1px; height: 13px; background: var(--line-strong); }
.rule::before { left: 0; }
.rule::after { right: 0; }

/* ------------------------------------------------------------ concept bar and header */

.concept-bar { background: var(--ink); color: var(--ivory); font-size: 0.8rem; line-height: 1.3; }
.concept-bar p { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; padding-block: 0.45rem; min-height: var(--bar-h); display: flex; align-items: center; gap: 0.4em; flex-wrap: wrap; container-type: inline-size; }
.concept-bar strong { color: var(--butter); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; }
.concept-bar a { color: var(--ivory); }
/* Where the full line would wrap, the bar keeps to one line: the concept label
   and the fictional studio stay, and every figure carries its own sample label. */
@container (max-width: 23rem) { .concept-bar__extra { display: none; } }

.site-header { border-bottom: 1px solid var(--line); background: var(--ivory); position: relative; z-index: 5; }
.site-header__inner {
  width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; min-height: var(--header-h);
  display: flex; align-items: center; gap: 1rem 1.6rem; flex-wrap: wrap; padding-block: 0.5rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand__mark { width: 2.2rem; height: 2.2rem; color: var(--ink); flex: none; }
.brand__name { font-family: var(--serif); font-size: 1.75rem; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.brand__name em { color: var(--clay-deep); }
.site-header__note { font-size: 0.85rem; color: var(--ink-3); }

.site-nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.35rem; }
.site-nav a { display: inline-block; padding-block: 0.35rem; text-decoration: none; font-size: 0.98rem; color: var(--ink-2); border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--clay); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--butter); }
.nav-toggle {
  display: none; align-items: center; gap: 0.5rem; border: 1px solid var(--line-strong); background: transparent;
  border-radius: 999px; padding: 0.45rem 0.95rem; font-weight: 700; font-size: 0.92rem; cursor: pointer;
}
.nav-toggle__icon { width: 1rem; height: 0.7rem; position: relative; display: inline-block; }
.nav-toggle__icon::before, .nav-toggle__icon::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle__icon::before { top: 0; }
.nav-toggle__icon::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* The planner button sits in the header only where it fits on the same row as
   the menu button or the full navigation. Phones reach the planner from the
   hero and the menu. */
@media (max-width: 33.99rem), (min-width: 52.01rem) and (max-width: 62rem) {
  .site-header .site-header__cta { display: none; }
}
@media (max-width: 52rem) {
  :root { --header-h: 3.6rem; }
  .brand__name { font-size: 1.55rem; }
  .brand__mark { width: 1.9rem; height: 1.9rem; }
  .site-nav { flex-basis: 100%; }
  .site-nav ul { gap: 0 1.1rem; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; padding-bottom: 0.6rem; }
  .js .site-nav.is-open { display: block; }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav li + li { border-top: 1px solid var(--line); }
  .js .site-nav a { display: block; padding-block: 0.75rem; font-size: 1.05rem; border-bottom: 0; }
  .js .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--butter); text-decoration-thickness: 3px; }
  .js.js-failed .nav-toggle { display: none; }
  .js.js-failed .site-nav { display: block; }
}

/* ------------------------------------------------------------ buttons */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3rem; padding: 0.7rem 1.35rem; border-radius: 999px;
  background: var(--ink); color: var(--ivory); border: 2px solid var(--ink);
  font-weight: 700; font-size: 1rem; line-height: 1.15; text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.button:hover { background: var(--clay-deep); border-color: var(--clay-deep); color: var(--ivory); }
.button:active { transform: translateY(1px); }
.button--ghost { background: transparent; color: var(--ink); }
.button--ghost:hover { background: var(--butter-soft); color: var(--ink); border-color: var(--ink); }
.button--butter { background: var(--butter); color: var(--ink); border-color: var(--butter); }
.button--butter:hover { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.button--small { min-height: 2.5rem; padding: 0.45rem 1rem; font-size: 0.92rem; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.button__arrow { width: 1.05em; height: 1.05em; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.text-link { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; }
.text-link:hover { text-decoration-color: var(--ink); }
.button-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-underline-offset: 0.2em; }

/* ------------------------------------------------------------ hero */

.hero { padding-block: clamp(1rem, 2.6vw, 2.6rem) clamp(2rem, 4vw, 3.4rem); }
/* Phones: proposition and actions, then the garden, then the small print.
   Wide screens: words on the left, the garden on the right. */
.hero__grid { display: grid; gap: clamp(1rem, 2.4vw, 2.5rem); grid-template-areas: "copy" "art" "note"; }
.hero__copy { grid-area: copy; display: grid; gap: clamp(0.7rem, 1.6vw, 1.15rem); align-content: center; container: hero-copy / inline-size; }
.hero .garden { grid-area: art; }
.hero__note { grid-area: note; font-size: 0.86rem; color: var(--ink-3); max-width: 30rem; }
.hero__label-short { display: none; }
/* Phones: slimmer buttons, so both actions share one row and the garden
   starts higher up the first screen. */
@media (max-width: 26rem) {
  .hero .lede { font-size: 1.02rem; }
}
@media (max-width: 28rem) {
  .hero .button { padding-inline: 0.9rem; font-size: 0.95rem; }
  .hero .actions { gap: 0.5rem; }
}
/* The narrowest column gives the enquiry button its short label, so the main
   action keeps its full wording and both still fit on one row. */
@container hero-copy (max-width: 21.25rem) {
  .hero .button { padding-inline: 0.75rem; font-size: 0.92rem; gap: 0.45rem; }
  .hero__label-long { display: none; }
  .hero__label-short { display: inline; }
}
/* Short phone screens: a little less air above and between, so the gardener
   is in view with the headline and both actions. */
@media (max-width: 30rem) and (max-height: 42rem) {
  .hero { padding-top: 0.75rem; }
  .hero__grid { gap: 0.75rem; }
  .hero__copy { gap: 0.6rem; }
}
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); grid-template-rows: 1fr auto; grid-template-areas: "copy art" "note art"; column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: 1rem; }
  .hero__copy { align-self: center; }
  .hero__note { align-self: end; padding-bottom: 3.2rem; }
}

.garden {
  margin: 0; display: grid; gap: 0.6rem; align-content: start;
}
/* Preserve the complete film at every width, including both measured edges. */
.garden__frame {
  position: relative; overflow: hidden; border-radius: 1.4rem 1.4rem 1.4rem 0.35rem;
  background: var(--ivory); aspect-ratio: 16 / 9; border: 1px solid var(--line);
  width: 100%; margin-inline: auto;
}
.garden__poster, .garden__video { display: block; width: 100%; height: 100%; object-fit: contain; }
.garden__video { position: absolute; inset: 0; opacity: 0; }
.garden__frame.is-ready .garden__video { opacity: 1; }
.garden__frame.is-ready .garden__poster { visibility: hidden; }
.garden__message { font-size: 0.88rem; color: var(--ink-3); }
.garden__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.garden__controls { display: flex; gap: 0.45rem; }
.garden__caption { font-size: 0.88rem; color: var(--ink-3); flex: 1 1 14rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0.3rem 0.85rem;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
  font-weight: 700; font-size: 0.86rem; cursor: pointer;
}
.chip:hover { background: var(--butter-soft); }
.chip svg { width: 0.85rem; height: 0.85rem; flex: none; }
.chip[hidden] { display: none; }
.no-js .garden__controls { display: none; }
/* ------------------------------------------------------------ home: services index */

.index { list-style: none; padding: 0; border-top: 1px solid var(--line-strong); }
.index__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 1.2rem; align-items: start;
  padding-block: clamp(1.2rem, 2.4vw, 1.8rem); border-bottom: 1px solid var(--line-strong);
}
.index__num { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--clay-deep); line-height: 1.1; min-width: 2ch; }
.index__body { display: grid; gap: 0.35rem; }
.index__title { font-family: var(--serif); font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.3rem); line-height: 1.05; }
.index__icon { width: 4.6rem; height: 3.2rem; color: var(--ink); grid-column: 1; grid-row: 2; display: none; }
.index__link { font-weight: 700; font-size: 0.95rem; grid-column: 2; }
@media (min-width: 46rem) {
  .index__item { grid-template-columns: 3.2rem 5.4rem minmax(0, 1fr) auto; align-items: center; }
  .index__icon { display: block; grid-column: 2; grid-row: 1; }
  .index__body { grid-column: 3; }
  .index__link { grid-column: 4; justify-self: end; white-space: nowrap; }
}

/* ------------------------------------------------------------ approach: stepping stones */

.stones { list-style: none; padding: 0; display: grid; gap: 1rem; counter-reset: stone; }
.stone { position: relative; padding: 1.3rem 1.3rem 1.3rem 4.6rem; min-height: 6rem; }
.stone::before {
  counter-increment: stone; content: counter(stone);
  position: absolute; left: 0; top: 0.6rem; width: 3.4rem; height: 3rem;
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.6rem; color: var(--ink);
  background: var(--clay-soft); border-radius: 46% 54% 50% 50% / 58% 48% 52% 42%;
}
.stone:nth-child(2)::before { background: var(--butter-soft); border-radius: 55% 45% 48% 52% / 46% 56% 44% 54%; }
.stone:nth-child(3)::before { background: var(--sand); border-radius: 48% 52% 58% 42% / 52% 46% 54% 48%; }
.stone:nth-child(4)::before { background: var(--clay-soft); border-radius: 52% 48% 44% 56% / 50% 58% 42% 50%; }
.stone h3 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; margin-bottom: 0.35rem; }
.stone p { color: var(--ink-2); }
@media (min-width: 52rem) {
  .stones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
  .stone { padding: 4.4rem 0 0; }
  .stone::before { top: 0; }
  .stone:not(:last-child)::after {
    content: ''; position: absolute; top: 1.5rem; left: 4.1rem; right: -1rem; height: 0;
    border-top: 2px dotted var(--line-strong);
  }
}

/* ------------------------------------------------------------ split blocks */

.split { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 56rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split--flip > :first-child { order: 0; }
@media (min-width: 56rem) { .split--flip > :first-child { order: 2; } }
.ticks { list-style: none; padding: 0; display: grid; gap: 0.65rem; }
.ticks li { position: relative; padding-left: 1.8rem; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 0.45em; width: 0.95rem; height: 0.55rem;
  border-left: 2px solid var(--clay-deep); border-bottom: 2px solid var(--clay-deep); transform: rotate(-45deg);
}
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.8rem); }
.plan-figure { margin: 0; display: grid; gap: 0.6rem; }
.plan-figure svg { display: block; width: 100%; height: auto; }
.plan-figure figcaption { font-size: 0.88rem; color: var(--ink-3); }

/* ------------------------------------------------------------ ink band */

.band { background: var(--ink); color: var(--ivory); }
.band .heading, .band .lede { color: var(--ivory); }
.band .lede { color: var(--ivory-2); }
/* On ink the accent words use the light clay; deep clay stays on paper. */
.on-ink .heading em, .on-ink .display em { color: var(--clay-light); }
.band .eyebrow { color: var(--butter); }
.band a:not(.button) { color: var(--ivory); }
.band .button--ghost { color: var(--ivory); border-color: var(--ivory); }
.band .button--ghost:hover { background: var(--ivory); color: var(--ink); }
.band__inner { display: grid; gap: 1.2rem; }
@media (min-width: 56rem) { .band__inner { grid-template-columns: minmax(0, 1.3fr) auto; align-items: end; } }

/* ------------------------------------------------------------ page heads */

.page-head { padding-block: clamp(1.6rem, 4vw, 3.6rem) clamp(1.4rem, 3vw, 2.6rem); }
.page-head__inner { display: grid; gap: 0.9rem; max-width: 50rem; }

/* ------------------------------------------------------------ services page */

.service { display: grid; gap: clamp(1.2rem, 3vw, 2.6rem); padding-block: clamp(2.2rem, 5vw, 4rem); border-top: 1px solid var(--line-strong); }
.service:last-of-type { border-bottom: 1px solid var(--line-strong); }
.service__head { display: grid; gap: 0.5rem; }
.service__art { margin: 0; }
.service__art svg { display: block; width: 100%; height: auto; border-radius: 1rem 1rem 1rem 0.3rem; background: var(--ivory); border: 1px solid var(--line); }
.service__art figcaption { font-size: 0.85rem; color: var(--ink-3); margin-top: 0.4rem; }
.service__body { display: grid; gap: 1rem; align-content: start; }
.facts { display: grid; gap: 0.8rem; }
.facts div { border-left: 2px solid var(--clay); padding-left: 0.9rem; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0.15rem 0 0; color: var(--ink-2); }
@media (min-width: 56rem) {
  .service { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; }
  .service:nth-of-type(even) .service__art { order: 2; }
}

/* ------------------------------------------------------------ approach page */

.stages { list-style: none; padding: 0; counter-reset: stage; }
.stage { display: grid; gap: 0.6rem 2rem; padding-block: clamp(1.8rem, 4vw, 3rem); border-top: 1px solid var(--line-strong); }
.stage:last-child { border-bottom: 1px solid var(--line-strong); }
.stage__num { font-family: var(--serif); font-style: italic; font-size: clamp(2.6rem, 2rem + 2vw, 4rem); line-height: 0.9; color: var(--clay-deep); }
.stage__title { font-family: var(--serif); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); line-height: 1.08; }
.stage__body { display: grid; gap: 0.8rem; max-width: 40rem; }
.stage__note { font-size: 0.92rem; color: var(--ink-3); border-left: 2px solid var(--butter); padding-left: 0.8rem; }
@media (min-width: 52rem) { .stage { grid-template-columns: 7rem minmax(0, 1fr); } }

/* ------------------------------------------------------------ forms */

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.field { display: grid; gap: 0.5rem; }
/* Questions are spaced by their containers' gaps, never by margins. */
.plan-fields { display: grid; gap: 1.6rem; }
.field__label, .field legend { font-weight: 700; font-size: 1rem; }
.field__hint { font-size: 0.9rem; color: var(--ink-3); }
.field__error { color: var(--error); font-weight: 700; font-size: 0.92rem; display: flex; gap: 0.4rem; align-items: flex-start; }
.field__error::before { content: '!'; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--error); color: var(--paper); font-size: 0.8rem; display: grid; place-items: center; margin-top: 0.1rem; }
.field__error[hidden] { display: none; }

.choices { display: grid; gap: 0.5rem; }
.choices--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.choice { position: relative; display: block; }
.choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__label {
  display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.75rem 0.9rem; min-height: 3rem;
  border: 1.5px solid var(--line-strong); border-radius: 0.75rem; background: var(--paper); cursor: pointer;
  line-height: 1.3;
}
.choice__label::before {
  content: ''; flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.08rem; border-radius: 50%;
  border: 2px solid var(--ink-2); background: var(--paper);
}
.choice--check .choice__label::before { border-radius: 0.3rem; }
.choice__input:checked + .choice__label { border-color: var(--ink); background: var(--butter-soft); box-shadow: inset 0 0 0 1px var(--ink); }
.choice__input:checked + .choice__label::before { background: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); }
.choice--check .choice__input:checked + .choice__label::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FBF8F1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.85rem no-repeat; box-shadow: none; }
.choice__input:focus-visible + .choice__label { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--butter); }
.choice__input:disabled + .choice__label { opacity: 0.5; cursor: not-allowed; }
.choice__input[aria-invalid="true"] + .choice__label { border-color: var(--error); }
.choice__text { display: grid; gap: 0.1rem; }
.choice__sub { font-size: 0.86rem; color: var(--ink-3); }

.stepper { display: inline-grid; grid-template-columns: 3rem minmax(0, 6.5rem) 3rem; align-items: stretch; border: 1.5px solid var(--line-strong); border-radius: 0.8rem; background: var(--paper); overflow: hidden; max-width: 100%; }
.stepper input {
  border: 0; border-inline: 1.5px solid var(--line); background: transparent; text-align: center; font-weight: 700; font-size: 1.15rem;
  padding: 0.55rem 0.3rem; min-width: 0; width: 100%;
}
.stepper input:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--butter); border-radius: 0; }
.stepper button { border: 0; background: transparent; font-size: 1.35rem; font-weight: 700; cursor: pointer; min-height: 3rem; }
.stepper button:hover { background: var(--butter-soft); }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; }
.stepper button:focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--butter); border-radius: 0; }
.stepper[data-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.stepper__unit { font-size: 0.9rem; color: var(--ink-3); margin-left: 0.5rem; align-self: center; }
.dims { display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; }

.error-summary { border: 2px solid var(--error); border-radius: var(--radius); padding: 1rem 1.2rem; background: #FBEDE6; }
.error-summary h2, .error-summary p:first-child { font-weight: 700; font-family: var(--sans); font-size: 1rem; }
.error-summary ul { margin-top: 0.4rem; padding-left: 1.2rem; }
.error-summary a { color: var(--error); font-weight: 700; }
.error-summary[hidden] { display: none; }

.notice { border-left: 3px solid var(--butter); background: var(--paper); padding: 0.85rem 1rem; border-radius: 0 0.6rem 0.6rem 0; font-size: 0.95rem; }
.notice--clay { border-left-color: var(--clay); }
.notice--error { border-left-color: var(--error); background: #FBEDE6; }
.notice[hidden] { display: none; }
.notice strong { display: block; margin-bottom: 0.15rem; }

/* ------------------------------------------------------------ planner */

.planner { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; }
/* A flex column, so the live summary inside can stay in view over the whole form. */
.planner__controls { display: flex; flex-direction: column; gap: 1.7rem; }
.planner__group { display: grid; gap: 0.9rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.planner__group:last-child { border-bottom: 0; }
.planner__group > legend, .planner__group-title { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; margin-bottom: 0.2rem; }
.planner__output { display: grid; gap: 1.2rem; }
.planner__drawing { margin: 0; background: var(--ivory); border: 1px solid var(--line); border-radius: 1.2rem 1.2rem 1.2rem 0.35rem; overflow: hidden; }
.planner__drawing svg { display: block; width: 100%; height: auto; }
.planner__drawing figcaption { padding: 0.7rem 1rem 0.9rem; font-size: 0.88rem; color: var(--ink-3); border-top: 1px solid var(--line); background: var(--paper); }
.planner__stale { opacity: 0.45; filter: grayscale(0.4); transition: opacity 0.2s ease; }
.planner__output { scroll-margin-top: 1rem; }
/* Below the two-column layout the drawing and sums come after the form, so a
   compact summary rides along the bottom of the screen while the form is in
   view, with a link down to the updated plan. It settles above the actions. */
.planner__live {
  position: sticky; bottom: 0.6rem; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.5rem 0.55rem 0.5rem 0.95rem; border-radius: 0.9rem 0.9rem 0.9rem 0.3rem;
  background: var(--ink); color: var(--ivory); box-shadow: 0 0.5rem 1.4rem rgba(31, 42, 68, 0.28);
}
.planner__live-text { display: grid; gap: 0.05rem; min-width: 0; }
.planner__live-label { font-size: 0.76rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--butter); }
.planner__live-value { font-family: var(--serif); font-size: 1.25rem; line-height: 1.15; }
.planner__live-link {
  flex: none; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.3rem 0.85rem;
  border-radius: 999px; background: var(--butter); color: var(--ink); font-weight: 700; font-size: 0.86rem; text-decoration: none;
}
.planner__live-link:hover { background: var(--ivory); color: var(--ink); }
/* Keyboard focus scrolls fields clear of the summary. */
html:has(.planner__live) { scroll-padding-bottom: 5rem; }
@media (min-width: 62rem) {
  .planner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .planner__live { display: none; }
  html:has(.planner__live) { scroll-padding-bottom: 0; }
}
/* Keep the drawing beside the controls only where the screen is tall enough
   to show the whole output column. */
@media (min-width: 62rem) and (min-height: 56rem) {
  .planner__output { position: sticky; top: 1rem; }
}

.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-strong); }
.areas div { padding: 0.7rem 0.2rem 0.7rem 0; border-bottom: 1px solid var(--line); }
.areas dt { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.areas dd { margin: 0.1rem 0 0; font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
.areas__swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 0.2rem; margin-right: 0.4rem; vertical-align: 0.05em; border: 1px solid rgba(31, 42, 68, 0.35); }
.swatch--patio { background: #E6CFB4; }
.swatch--lawn { background: #9BB074; }
.swatch--border { background: #6C4F3F; }
.swatch--total { background: transparent; border-style: dashed; }
@media (min-width: 30rem) { .areas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.formula { font-size: 0.9rem; color: var(--ink-3); }

.calc { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.calc caption { text-align: left; font-family: var(--serif); font-size: 1.5rem; padding-bottom: 0.5rem; }
.calc th, .calc td { padding: 0.6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.calc th { text-align: left; font-weight: 400; }
.calc td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 1rem; }
.calc__detail { display: block; font-size: 0.86rem; color: var(--ink-3); }
.calc tfoot th, .calc tfoot td { border-bottom: 0; }
.calc__total th, .calc__total td { font-weight: 700; border-top: 2px solid var(--ink); }
.calc__range th, .calc__range td { font-family: var(--serif); font-size: 1.45rem; padding-top: 0.4rem; }
.calc__range td { color: var(--clay-deep); }

.assess { border: 2px dashed var(--clay); border-radius: var(--radius); padding: 1rem 1.2rem; background: var(--paper); }
.assess__title { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; margin-bottom: 0.4rem; }
.assess__reasons { padding-left: 1.1rem; display: grid; gap: 0.4rem; }

.brief-list { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.brief-list__row { display: grid; grid-template-columns: minmax(7.5rem, 0.8fr) minmax(0, 1.2fr); gap: 0.2rem 1rem; padding-block: 0.6rem; border-bottom: 1px solid var(--line); }
.brief-list dt { font-weight: 700; font-size: 0.92rem; }
.brief-list dd { margin: 0; color: var(--ink-2); }
.brief-list__row.is-missing dd { color: var(--ink-3); font-style: italic; }
.tag { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--butter-soft); color: var(--ink); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; font-style: normal; white-space: nowrap; }
.brief-notes { padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--ink-3); }
@media (max-width: 26rem) { .brief-list__row { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ enquiry */

.enquiry { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
@media (min-width: 62rem) { .enquiry { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
@media (min-width: 62rem) and (min-height: 56rem) { .enquiry__aside { position: sticky; top: 1rem; } }
.steps { list-style: none; padding: 0; display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.steps li { flex: 1 1 8rem; }
.steps button {
  width: 100%; text-align: left; border: 0; border-top: 3px solid var(--line); background: transparent; padding: 0.55rem 0.2rem 0.3rem;
  font-size: 0.86rem; font-weight: 700; color: var(--ink-3); cursor: pointer; display: grid; gap: 0.1rem;
}
.steps button span { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; }
.steps li[aria-current="step"] button { border-top-color: var(--ink); color: var(--ink); }
.steps li.is-done button { border-top-color: var(--clay); color: var(--ink-2); }
.steps button:disabled { cursor: default; }
.js .step { display: none; }
.step, .js .step.is-current { display: grid; gap: 1.4rem; }
.step__title { font-family: var(--serif); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); line-height: 1.08; }
.step__title:focus { outline: none; }
.step__title:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; box-shadow: none; }
.form-nav { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: space-between; align-items: center; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.form-nav__end { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-left: auto; }
.form-status { min-height: 1.4em; font-size: 0.95rem; color: var(--ink-2); }
.form-status--error { color: var(--error); font-weight: 700; }
.test-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--butter); color: var(--ink); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; }
.contact-card { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--paper); display: grid; gap: 0.6rem; }
.contact-card dl { display: grid; gap: 0.35rem; }
.contact-card div { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; }
.contact-card dt { font-weight: 700; min-width: 4rem; }
.contact-card dd { margin: 0; overflow-wrap: anywhere; }
.consent { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; border: 1.5px solid var(--line-strong); border-radius: 0.75rem; background: var(--paper); }
.consent input { width: 1.3rem; height: 1.3rem; margin: 0.12rem 0 0; flex: none; accent-color: var(--ink); }
.consent[data-invalid="true"] { border-color: var(--error); }

.progress-art { margin: 0; display: grid; gap: 0.5rem; }
.progress-art svg { display: block; width: 100%; height: auto; border-radius: 1rem 1rem 1rem 0.3rem; background: var(--paper); border: 1px solid var(--line); }
.progress-art figcaption { font-size: 0.88rem; color: var(--ink-3); }
.pa-zone, .pa-plant, .pa-stamp, .pa-dash, .pa-pulse { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.3, 1.4, .5, 1); transform-box: fill-box; transform-origin: 50% 100%; }
.pa-zone, .pa-plant, .pa-stamp { opacity: 0; }
.pa-plant { transform: scale(0.2); }
.pa-stamp { transform: scale(0.7) rotate(-14deg); transform-origin: 50% 50%; }
[data-stage="1"] .pa-zone--garden, [data-stage="2"] .pa-zone--garden, [data-stage="3"] .pa-zone--garden { opacity: 1; }
[data-stage="2"] .pa-zone--project, [data-stage="3"] .pa-zone--project { opacity: 1; }
[data-celebrate="true"] .pa-plant { opacity: 1; transform: scale(1); }
[data-celebrate="true"] .pa-stamp { opacity: 1; transform: scale(1) rotate(-8deg); }
[data-saving="true"] .pa-pulse { animation: pa-pulse 1.2s ease-in-out infinite; }
@keyframes pa-pulse { 50% { opacity: 0.35; } }

.receipt { display: grid; gap: 1.2rem; }
.receipt__head { display: grid; gap: 0.6rem; padding: clamp(1.1rem, 3vw, 1.8rem); border-radius: 1.2rem 1.2rem 1.2rem 0.35rem; background: var(--ink); color: var(--ivory); }
.receipt__head .eyebrow { color: var(--butter); }
.receipt__ref { font-family: var(--serif); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.receipt__title:focus { outline: none; }
.receipt__title:focus-visible { outline: 3px solid var(--butter); outline-offset: 4px; box-shadow: none; }
.receipt[hidden], [data-receipt][hidden] { display: none; }

/* ------------------------------------------------------------ privacy and tables */

.data-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.data-table caption { text-align: left; font-weight: 700; padding-bottom: 0.5rem; }
.data-table th, .data-table td { text-align: left; padding: 0.55rem 0.8rem 0.55rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1.5px solid var(--line-strong); }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.do-dont { display: grid; gap: 1.2rem; }
@media (min-width: 52rem) { .do-dont { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ 404 */

.lost { display: grid; gap: 1.6rem; align-items: center; padding-block: clamp(2rem, 6vw, 5rem); }
@media (min-width: 52rem) { .lost { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } }
.lost svg { width: 100%; height: auto; }
.lost__links { list-style: none; padding: 0; display: grid; gap: 0.5rem; }

/* ------------------------------------------------------------ owner inbox */

.owner { width: min(100% - 2 * var(--gutter), 60rem); margin-inline: auto; padding-block: clamp(1.6rem, 4vw, 3rem); display: grid; gap: 2rem; }
.owner__intro { display: grid; gap: 0.8rem; }
.owner__status { font-size: 0.95rem; }
.owner__records { display: grid; gap: 1.4rem; }
.inbox-record { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.6rem); display: grid; gap: 1rem; }
.inbox-record__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem; align-items: baseline; }
.inbox-record__ref { font-family: var(--serif); font-size: 1.6rem; display: grid; gap: 0.1rem; }
.inbox-record__time { color: var(--ink-3); font-size: 0.92rem; }
.inbox-record__headline { font-weight: 700; }
.inbox-record__contact { font-size: 0.9rem; color: var(--ink-3); overflow-wrap: anywhere; }
.inbox-empty, .inbox-skipped { color: var(--ink-3); }

/* ------------------------------------------------------------ footer */

.site-footer { background: var(--sand); border-top: 1px solid var(--line); margin-top: 0; }
.site-footer__inner { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; padding-block: clamp(2.2rem, 5vw, 3.6rem); display: grid; gap: 1.6rem; }
.site-footer__brand { display: grid; gap: 0.3rem; }
.site-footer__brand .brand__name { font-size: 2rem; }
.site-footer nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.site-footer__small { display: grid; gap: 0.5rem; font-size: 0.86rem; color: var(--ink-3); max-width: 46rem; }
.site-footer__small a { color: var(--ink-2); }
@media (min-width: 56rem) { .site-footer__inner { grid-template-columns: minmax(0, 1fr) auto; } .site-footer__small { grid-column: 1 / -1; } }

/* ------------------------------------------------------------ states */

/* <html> starts as .no-js; a tiny early script swaps it for .js. If the page
   modules then fail to start, .js-failed brings the no-script content back. */
.no-js .js-only, .js-failed .js-only { display: none !important; }
.js:not(.js-failed) .no-js-only { display: none !important; }
.js-failed .step { display: grid !important; }
[hidden] { display: none !important; }

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

@media print {
  .concept-bar, .site-nav, .nav-toggle, .garden__controls, .site-header__cta, .form-nav, .skip-link, .planner__live { display: none !important; }
  body { background: #fff; }
}