/* Stepover — garden design and building for steep Hills blocks */
@font-face { font-family: "Solway"; src: url("/assets/fonts/specimen/solway-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Rosario"; src: url("/assets/fonts/specimen/rosario-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

.spec-stepover {
  --sv-sand: #D5CAB0; --sv-court: #CBBFA3; --sv-ink: #1D1A14; --sv-salvia: #632DAA; --sv-gum: #3F5A3A;
  --sv-stone-1: #E3DAC4; --sv-stone-2: #C4B593; --sv-stone-3: #B8A782; --sv-stone-4: #A99673; --sv-soil: #4A3A2A;
  --sv-display: "Solway", Rockwell, "Roboto Slab", Georgia, serif;
  --sv-text: "Rosario", "Segoe UI", system-ui, sans-serif;
  --sv-t-poster: clamp(7rem, 30vw, 27.5rem);
  --sv-t-court: clamp(3.25rem, 9.6vw, 9.25rem);
  --sv-t-h2: clamp(2.5rem, 6.4vw, 6rem);
  --sv-t-h2s: clamp(2rem, 4.2vw, 4rem);
  --sv-t-slab-s: clamp(1.5rem, 2.7vw, 2.5rem);
  --sv-t-sentence: clamp(1.3125rem, 1rem + 1.05vw, 1.75rem);
  --sv-t-lead: clamp(1.1875rem, 1rem + .6vw, 1.5rem);
  --sv-t-body: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --sv-t-small: .9375rem;
  --sv-m: clamp(16px, 4vw, 60px);
  --sv-nav-h: 60px;
  --sv-lay: cubic-bezier(.3, 0, .2, 1);
}
body.spec-stepover { margin: 0; background: var(--sv-sand); }
.sv-page { overflow-x: clip; background: var(--sv-sand); color: var(--sv-ink); font-family: var(--sv-text); font-size: var(--sv-t-body); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; }
.sv-page *, .sv-page *::before, .sv-page *::after { box-sizing: border-box; }
.sv-page :where(h1, h2, h3, p, ul, figure) { margin: 0; }
.sv-page :where(ul) { padding: 0; list-style: none; }
.sv-page a { color: var(--sv-salvia); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.sv-page :focus-visible { outline: 2px solid var(--sv-salvia); outline-offset: 3px; }
.sv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sv-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- nav ---------- */
.sv-nav { position: sticky; top: var(--bar-h, 40px); z-index: 60; height: var(--sv-nav-h); display: flex; align-items: center; gap: clamp(12px, 2.4vw, 36px); padding: 0 var(--sv-m); background: var(--sv-sand); border-bottom: 2px solid var(--sv-ink); }
.sv-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--sv-ink) !important; text-decoration: none; margin-right: auto; }
.sv-mark { width: 34px; height: 34px; flex: none; }
.sv-brand__name { font-family: var(--sv-display); font-weight: 800; font-size: 22px; letter-spacing: -.015em; line-height: 1; }
.sv-links { display: flex; gap: clamp(14px, 2vw, 32px); }
.sv-links a, .sv-menu a { color: var(--sv-ink); font-weight: 600; font-size: 1rem; text-decoration: none; }
.sv-links a:hover { color: var(--sv-salvia); text-decoration: underline; }
.sv-cta { font-weight: 700; font-size: 1rem; color: var(--sv-salvia); text-decoration: underline; }
.sv-menu { display: none; position: relative; }
.sv-menu summary { list-style: none; cursor: pointer; font-weight: 600; padding: 8px 2px; border-bottom: 2px solid var(--sv-salvia); }
.sv-menu summary::-webkit-details-marker { display: none; }
.sv-menu ul { position: absolute; right: 0; top: calc(100% + 13px); min-width: 220px; background: var(--sv-sand); border: 2px solid var(--sv-ink); border-top: 0; padding: 10px 18px 14px; }
.sv-menu li + li { margin-top: 6px; }
@media (max-width: 820px) {
  .sv-links, .sv-cta { display: none; }
  .sv-menu { display: block; }
}
@media (max-width: 700px) { .spec-stepover { --sv-nav-h: 52px; } .sv-mark { width: 30px; height: 30px; } .sv-brand__name { font-size: 20px; } }
@media (max-width: 340px) { .sv-brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* ---------- hero: the block, pegged ---------- */
.sv-slope {
  position: relative; overflow: hidden; container-type: size;
  height: max(560px, calc(100svh - var(--bar-h, 40px) - var(--sv-nav-h)));
  background: #cfcfcb; color: var(--sv-ink);
  --sv-fw: max(100cqw, 100cqh * 16 / 9);
  --sv-fh: calc(var(--sv-fw) * 9 / 16);
  /* clear sky above the ridge: the top fifth of the photograph, less what the crop takes */
  --sv-sky: calc(var(--sv-fh) * .2 - (var(--sv-fh) - 100cqh) * .4);
  --sv-h1w: clamp(250px, 33vw, 500px);
}
.sv-pic, .sv-lines { position: absolute; left: 50%; top: 40%; width: var(--sv-fw); aspect-ratio: 16 / 9; translate: -50% -40%; }
.sv-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.sv-lines { z-index: 2; pointer-events: none; }
.sv-strings { display: block; width: 100%; height: 100%; overflow: visible; }
.sv-str path { fill: none; stroke: var(--sv-salvia); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.sv-str.is-down { visibility: hidden; }
.sv-rope { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; display: none; }
.sv-rope__line { fill: none; stroke: var(--sv-salvia); stroke-width: 2.25px; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgba(29, 26, 20, .35)); }
.sv-build { position: absolute; inset: 0; z-index: 4; cursor: grab; display: none; touch-action: pan-y; }
.sv-build:active { cursor: grabbing; }
.sv-build:focus-visible { outline: 2px solid var(--sv-salvia); outline-offset: -8px; }
.sv-rail { display: none; }

.sv-sky { position: absolute; z-index: 5; top: clamp(12px, calc(var(--sv-sky) * .16), 30px); right: max(var(--sv-m), 4.5vw); width: var(--sv-h1w); pointer-events: none; }
.sv-h1 { font-family: var(--sv-display); font-weight: 800; letter-spacing: -.015em; line-height: 1; color: var(--sv-ink); text-wrap: balance;
  font-size: clamp(1.375rem, min(1.15rem + 1.55vw, (var(--sv-sky) - 36px) / 2.15), 2.75rem); }

/* the live line sits in the sky, left of the headline, clear of the tree */
.sv-foot { position: absolute; z-index: 5; right: calc(max(var(--sv-m), 4.5vw) + var(--sv-h1w) + 5vw); top: clamp(14px, calc(var(--sv-sky) * .18), 34px); width: min(30ch, 26vw); display: grid; justify-items: start; gap: 4px; pointer-events: none; }
.sv-live { font-size: clamp(.9375rem, .8rem + .3vw, 1.0625rem); line-height: 1.38; font-weight: 460; }
.sv-live .sv-stage { display: block; font-family: var(--sv-display); font-weight: 800; font-size: clamp(1.125rem, .95rem + .45vw, 1.375rem); line-height: 1.1; color: var(--sv-salvia); letter-spacing: -.01em; margin-bottom: 2px; }
.sv-prompt { font-size: var(--sv-t-small); font-style: italic; font-weight: 500; }
@media (min-width: 701px) and (pointer: fine) { .sv-prompt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
/* a flagging tag tied to the string */
.sv-tag { position: absolute; left: 0; top: 0; z-index: 4; display: none; pointer-events: none; will-change: transform; }
.sv-tag__tie { position: absolute; left: -1px; top: 0; width: 1.5px; height: 18px; background: var(--sv-ink); }
.sv-tag__label { position: absolute; left: -14px; top: 17px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 10px 6px 11px; background: var(--sv-sand); color: var(--sv-ink); border: 1.5px solid var(--sv-ink); border-radius: 3px; font: 600 .875rem/1 var(--sv-text); box-shadow: 0 2px 0 rgba(29, 26, 20, .25); }
.sv-tag__label svg { width: 14px; height: 14px; fill: none; stroke: var(--sv-salvia); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-tag.is-up .sv-tag__label svg { rotate: 180deg; }
@media (pointer: fine) and (min-width: 701px) { .sv-slope.is-live .sv-tag { display: block; } }
.sv-prompt__touch { display: none; }
.sv-step { display: none; pointer-events: auto; font: 600 1rem/1 var(--sv-text); color: var(--sv-ink); background: none; border: 0; padding: 10px 0; border-bottom: 2px solid var(--sv-salvia); cursor: pointer; }

/* the poster (no JavaScript, or no WebGL2): the finished garden, the bare block as an inset, one honest sentence */
.sv-pic--built { z-index: 0; }
.sv-pic--bare { z-index: 1; left: var(--sv-m); top: auto; bottom: 24px; width: min(30%, 440px); translate: none; border: 2px solid var(--sv-ink); }
.sv-then { position: absolute; z-index: 5; left: calc(var(--sv-m) + min(30%, 440px) + 16px); bottom: 24px; max-width: 34ch; padding: 12px 16px; font-size: var(--sv-t-small); font-weight: 500; line-height: 1.4;
  background: radial-gradient(closest-side, rgba(213, 202, 176, .95) 60%, rgba(213, 202, 176, .75)); border-radius: 4px; }
.sv-foot { display: none; }

@media (scripting: enabled) {
  .sv-slope:not(.sv-poster) .sv-pic--bare { left: 50%; top: 40%; bottom: auto; width: var(--sv-fw); translate: -50% -40%; border: 0; }
  .sv-slope:not(.sv-poster) .sv-pic--built { display: none; }
  .sv-slope:not(.sv-poster) .sv-then { display: none; }
  .sv-slope:not(.sv-poster) .sv-foot { display: grid; }
  .sv-slope:not(.sv-poster) .sv-build { display: block; }
  .sv-slope.is-live .sv-gl { opacity: 1; }
  .sv-slope.is-live .sv-pic { visibility: hidden; }
  .sv-slope.is-live .sv-rope { display: block; }
}
.sv-slope.sv-poster .sv-lines, .sv-slope.sv-poster .sv-foot { display: none; }
@media (scripting: none) { .sv-lines { display: none; } }
@media (prefers-reduced-motion: reduce) { .sv-slope .sv-tag, .sv-slope .sv-rope { display: none !important; } }

@media (prefers-reduced-motion: reduce) and (scripting: enabled) {
  .sv-slope:not(.sv-poster) .sv-pic--built { display: block; left: 50%; top: 40%; bottom: auto; }
  .sv-slope:not(.sv-poster) .sv-pic--bare { display: none; }
  .sv-slope:not(.sv-poster) .sv-lines { display: none; }
}

/* phones: a 3:4 crop, the right peg on a rail */
@media (max-width: 700px) {
  .sv-slope { height: max(420px, calc(86svh - var(--bar-h, 40px) - var(--sv-nav-h)));
    --sv-fw: max(100cqw, 100cqh * 3 / 4); --sv-fh: calc(var(--sv-fw) * 4 / 3); }
  .sv-pic, .sv-lines { aspect-ratio: 3 / 4; }
  .sv-sky { width: 64vw; right: 16px; top: 12px; }
  .sv-slope { --sv-h1w: 64vw; }
  .sv-h1 { font-size: clamp(1.25rem, min(6.6vw, (var(--sv-sky) - 26px) / 3.4), 1.75rem); }

  .sv-live { font-size: var(--sv-t-small); grid-column: 1; }
  .sv-live .sv-stage { font-size: 17px; }
  .sv-prompt { grid-column: 1; }
  .sv-pic--bare { width: 46%; }
  .sv-then { left: 16px; right: 16px; bottom: auto; top: calc(var(--sv-sky) + 8px); max-width: none; }
}
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .sv-foot { top: auto; left: 0; right: auto; bottom: 0; padding: 44px 64px 14px 16px; max-width: 100%; width: 100%; grid-template-columns: 1fr auto; align-items: end; column-gap: 14px;
    background: linear-gradient(to top, rgba(213, 202, 176, .94) 0%, rgba(213, 202, 176, .86) 50%, rgba(213, 202, 176, 0) 100%); }
  .sv-live .sv-stage { display: inline; margin-right: .25em; }
  .sv-live { font-size: var(--sv-t-small); }
}
@media (hover: none) and (pointer: coarse) {
  .sv-prompt__fine { display: none; }
  .sv-prompt__touch { display: inline; }
  .sv-slope:not(.sv-poster) .sv-step { display: inline-block; grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .sv-build { touch-action: pan-y; }
  .sv-slope.is-live .sv-rail { display: block; position: absolute; z-index: 6; top: 0; right: 0; bottom: 0; width: 56px; touch-action: none; }
  .sv-rail__peg { position: absolute; right: 6px; width: 44px; height: 56px; top: var(--sv-peg-y, 30%); translate: 0 -50%; display: grid; place-items: center; background: var(--sv-sand); border: 2px solid var(--sv-ink); border-radius: 6px; }
  .sv-rail__peg svg { width: 20px; height: 20px; fill: none; stroke: var(--sv-salvia); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
}
@media (max-width: 400px) and (max-height: 600px) { .sv-prompt { display: none; } }

.sv-rope__peg { display: none; }
.sv-slope.sv-used .sv-prompt { display: none; }

/* ---------- terraces ---------- */
.sv-terrace { position: relative; padding: var(--sv-pt, 96px) var(--sv-m) var(--sv-pb, 96px); }
.sv-col { position: relative; max-width: 1320px; margin: 0 auto; --sv-from: 0px; }
.sv-col > * + * { margin-top: 1em; }
.sv-col p { max-width: 62ch; }
.sv-col--l > * { max-width: 44rem; }
.sv-col--c { max-width: 1320px; }
.sv-h2, .sv-h2s, .sv-court-h, .sv-slab-s, .sv-stay__h { font-family: var(--sv-display); font-weight: 800; color: var(--sv-ink); text-wrap: balance; }
.sv-h2 { font-size: var(--sv-t-h2); line-height: .92; letter-spacing: -.02em; }
.sv-h2s { font-size: var(--sv-t-h2s); line-height: .95; letter-spacing: -.015em; }
.sv-court-h { font-size: var(--sv-t-court); line-height: .86; letter-spacing: -.025em; }
.sv-slab-s { font-size: var(--sv-t-slab-s); line-height: 1.02; letter-spacing: -.01em; }
.sv-col h2 + * { margin-top: .9em; }
.sv-intro, .sv-lead { font-size: var(--sv-t-lead); line-height: 1.42; font-weight: 320; }
.sv-intro { max-width: 36ch !important; }
.sv-intro__go { margin-bottom: clamp(56px, 7vw, 112px); }
.sv-link { font-weight: 600; }
.sv-stage { font-family: var(--sv-display); font-weight: 800; color: var(--sv-salvia); letter-spacing: -.005em; }

/* the earthworks between terraces */
.sv-seam { position: relative; line-height: 0; }
.sv-seam svg { display: block; width: 100%; overflow: visible; }
.sv-seam--w1 svg, .sv-seam--w5 svg { height: calc(var(--n) * clamp(26px, 3vw, 44px)); }
.sv-seam--foot svg { height: clamp(40px, 4.4vw, 64px); }
.sv-jt { fill: #5E4E3A; }
.sv-a, .sv-b, .sv-c, .sv-d, .sv-e, .sv-sx-st, .sv-sx-th, .sv-sx-foot { stroke: rgba(29, 26, 20, .55); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sv-a { fill: var(--sv-stone-2); } .sv-b { fill: var(--sv-stone-3); } .sv-c { fill: var(--sv-stone-4); }
.sv-d { fill: color-mix(in srgb, var(--sv-stone-4) 84%, var(--sv-soil)); } .sv-e { fill: color-mix(in srgb, var(--sv-stone-2) 55%, var(--sv-stone-1)); }
.sv-hl { fill: none; stroke: var(--sv-stone-1); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: .85; }
.sv-spike ellipse { fill: var(--sv-salvia); }
.sv-stem { fill: none; stroke: var(--sv-gum); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
/* the batter: a raked, planted bank whose crest is the ground FALL stands on */
.sv-seam--batter { margin-top: calc(var(--sv-t-poster) * -.3); z-index: 1; }
.sv-seam--batter svg { height: 180px; }
.sv-bankbg { fill: var(--sv-court); }
.sv-rake { fill: url(#sv-rakep); }
.sv-bline, .sv-toe { fill: none; stroke: var(--sv-ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.sv-tf { color: var(--sv-ink); }
.sv-tf .sv-g, .sv-g { color: var(--sv-gum); }
/* the path edge */
.sv-seam--path svg { height: 36px; }
.sv-gv0 { fill: #BBAE8E; }
.sv-gv1 { fill: var(--sv-stone-1); } .sv-gv2 { fill: var(--sv-stone-3); } .sv-gv3 { fill: var(--sv-stone-4); } .sv-gv4 { fill: rgba(29, 26, 20, .3); }
.sv-steel { fill: none; stroke: var(--sv-ink); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.sv-steel-hl { fill: none; stroke: #8C6F52; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sv-tick { fill: none; stroke: var(--sv-ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }

/* 2 · steep is the brief: the broad lawn terrace */
.sv-fall { --sv-pt: clamp(56px, 7vw, 112px); --sv-pb: 0px; }
.sv-fall__poster { font-family: var(--sv-display); font-weight: 800; font-size: var(--sv-t-poster); line-height: .78; letter-spacing: -.03em; color: var(--sv-ink); margin: clamp(40px, 6vw, 96px) auto 0; max-width: 1320px; text-align: right; user-select: none; }

/* 3 · stone the colour of the hill: the narrow planted step */
.sv-stone { --sv-pt: clamp(40px, 4.4vw, 64px); --sv-pb: clamp(64px, 6.6vw, 96px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px; align-items: start; padding-left: 0; }
.sv-stone__photo { position: sticky; top: calc(var(--bar-h, 40px) + var(--sv-nav-h)); margin: 0; }
.sv-stone__photo img { display: block; width: 100%; height: min(calc(100vh - 120px), 820px); object-fit: cover; object-position: 50% 40%; }
.sv-stone .sv-col--r { margin: 0; padding: clamp(24px, 4vw, 72px) 0 0 clamp(8px, 5vw, 96px); max-width: 640px; }
.sv-tufts { display: inline-block; width: .9em; height: .42em; margin-left: .12em; vertical-align: baseline; color: var(--sv-gum); }
.sv-sect-fig { margin-top: clamp(32px, 4vw, 56px) !important; max-width: 520px; }
.sv-sect { display: block; width: 100%; height: auto; overflow: visible; }
.sv-sx-hatch { fill: none; stroke: rgba(74, 58, 42, .28); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sv-sx-gv circle { fill: var(--sv-stone-4); stroke: rgba(29, 26, 20, .45); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.sv-sx-ground { fill: none; stroke: var(--sv-ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.sv-sx-foot { fill: var(--sv-stone-4); }
.sv-sx-st { fill: var(--sv-stone-2); } .sv-sx-th { fill: var(--sv-stone-3); }
.sv-sx-heart circle { fill: #B8A782; stroke: rgba(29, 26, 20, .5); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.sv-sx-pipe { fill: var(--sv-sand); stroke: var(--sv-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sv-sx-slot { stroke: var(--sv-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sv-sx-str { stroke: var(--sv-salvia); stroke-width: 1.5px; vector-effect: non-scaling-stroke; fill: none; }
.sv-sx-lead { fill: none; stroke: var(--sv-ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sv-sx-dot { fill: var(--sv-ink); }
.sv-sx-lab text { font: italic 500 14px var(--sv-text); fill: var(--sv-ink); }

/* 4 · string line to first mow: the tallest wall carries the order of work */
.sv-order { --sv-pt: clamp(72px, 8vw, 128px); --sv-pb: 0px; padding-left: 0; padding-right: 0; }
.sv-order .sv-col { padding: 0 var(--sv-m); }
.sv-taut { display: flex; align-items: center; margin: clamp(20px, 2.4vw, 36px) 0 clamp(20px, 2.4vw, 32px) !important; max-width: none !important; }
.sv-taut__peg { width: 9px; height: 50px; flex: none; }
.sv-taut__line { flex: 1; height: 1.5px; background: var(--sv-salvia); margin: 0 -4px; translate: 0 -12px; }
.sv-sentence { font-size: var(--sv-t-sentence); line-height: 1.45; max-width: 1180px !important; padding-bottom: clamp(16px, 2vw, 28px); }
.sv-w3wrap { padding: 0; }
.sv-w3box { position: relative; margin: 0 auto; aspect-ratio: 1600 / 396; max-height: 460px; max-width: calc(460px * 1600 / 396); }
.sv-w3 { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(-60px 0 0 0); }
.sv-w3--m { display: none; }
.sv-ps { position: absolute; margin: 0; border-radius: 5px; overflow: hidden; background: #5E4E3A; left: calc(var(--x) + 2px); top: calc(var(--y) + 2px); width: calc(var(--w) - 4px); height: calc(var(--h) - 4px); transition: translate .26s var(--sv-lay), outline-color .2s; outline: 2px solid transparent; outline-offset: 2px; }
.sv-ps picture, .sv-ps img { display: block; width: 100%; height: 100%; }
.sv-ps img { object-fit: cover; }
.sv-ps--lay { --x: 56.25%; --y: 33.33%; --w: 18.75%; --h: 33.33%; translate: 0 -3px; box-shadow: 0 6px 0 -2px rgba(29, 26, 20, .18), 0 1px 0 rgba(29, 26, 20, .4); }
.sv-ps--lay img { object-position: 50% 30%; }
.sv-ps--light { --x: 10.75%; --y: 77.78%; --w: 7.5%; --h: 11.11%; }
.sv-ps--light img { object-position: 30% 55%; }
.sv-ps--plant { --x: 85.625%; --y: 11.11%; --w: 6.875%; --h: 11.11%; }
.sv-ps--plant img { object-position: 62% 35%; scale: .96; border-radius: 4px; }
.sv-ps--plant::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 3px 6px rgba(29, 26, 20, .55), inset 0 0 0 2px rgba(29, 26, 20, .35); border-radius: 5px; }
.sv-order:has(.sv-stage--lay:hover) .sv-ps--lay, .sv-order:has(.sv-stage--light:hover) .sv-ps--light, .sv-order:has(.sv-stage--plant:hover) .sv-ps--plant { translate: 0 -6px; outline-color: var(--sv-salvia); }
.sv-order:has(.sv-stage--light:hover) .sv-ps--light, .sv-order:has(.sv-stage--plant:hover) .sv-ps--plant { translate: 0 -3px; }
@media (max-width: 760px) {
  .sv-w3box { aspect-ratio: 400 / 528; max-width: none; max-height: none; }
  .sv-w3--d { display: none; } .sv-w3--m { display: block; }
  .sv-ps--lay { --x: 20%; --y: 41.67%; --w: 60%; --h: 25%; }
  .sv-ps--light { --x: 6%; --y: 83.33%; --w: 25%; --h: 8.33%; }
  .sv-ps--plant { --x: 69%; --y: 16.67%; --w: 25%; --h: 8.33%; }
}

/* 5 · planted, not placed: the deep court */
.sv-plan { --sv-pt: clamp(96px, 11vw, 160px); --sv-pb: clamp(80px, 9vw, 128px); background: var(--sv-court); }
.sv-plan .sv-col--l > .sv-court-h { max-width: 11ch; }
.sv-plan .sv-lead { max-width: 46ch; }
.sv-planner { max-width: 1320px; margin: clamp(40px, 5vw, 72px) auto 0; display: grid; grid-template-columns: minmax(0, 9fr) minmax(220px, 3fr); gap: 20px clamp(24px, 3vw, 48px); align-items: start; }
.sv-bed { position: relative; grid-column: 1; grid-row: 1; border-radius: 2px; outline-offset: 6px; }
.sv-bed__c { display: none; width: 100%; touch-action: pan-y; cursor: crosshair; }
.sv-bed.is-stroking .sv-bed__c { touch-action: none; }
.sv-bed-svg { display: block; width: 100%; height: auto; }
.sv-plantlist { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; font-size: var(--sv-t-small); }
.sv-tools { grid-column: 2; grid-row: 1; display: none; gap: 20px; align-content: start; }
.sv-tools__how { font-size: var(--sv-t-small); font-style: italic; font-weight: 500; }
.sv-chips { display: grid; gap: 8px; }
.sv-chip { display: flex; align-items: center; gap: 10px; width: 100%; font: 600 .9375rem/1.1 var(--sv-text); color: var(--sv-ink); background: var(--sv-sand); border: 1.5px solid var(--sv-ink); border-radius: 4px; padding: 6px 12px 6px 6px; cursor: pointer; text-align: left; }
.sv-chip svg { width: 30px; height: 30px; flex: none; overflow: visible; }
.sv-chip[aria-pressed="true"] { border-color: var(--sv-salvia); box-shadow: 0 0 0 2px var(--sv-salvia); }
.sv-chip:hover { border-color: var(--sv-salvia); }
.sv-seasons { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.sv-season { position: relative; cursor: pointer; font-weight: 600; font-size: .9375rem; }
.sv-season input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sv-season span { display: inline-block; padding: 6px 0; border-bottom: 2px dotted rgba(29, 26, 20, .45); }
.sv-season input:checked + span { color: var(--sv-salvia); border-bottom: 2px solid var(--sv-salvia); }
.sv-season input:focus-visible + span { outline: 2px solid var(--sv-salvia); outline-offset: 3px; }
.sv-tools__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.sv-tbtn { font: 700 .9375rem/1 var(--sv-text); color: var(--sv-sand); background: var(--sv-ink); border: 1.5px solid var(--sv-ink); border-radius: 4px; padding: 12px 16px; cursor: pointer; }
.sv-tbtn--q { background: transparent; color: var(--sv-ink); }
.sv-count { grid-column: 1; font-size: var(--sv-t-small); font-weight: 500; font-variant-numeric: tabular-nums; max-width: 70ch; }
.sv-plan-live .sv-bed__c { display: block; }
.sv-plan-live .sv-bed-svg, .sv-plan-live .sv-plantlist { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sv-plan-live .sv-tools { display: grid; }
.sv-mass { margin: clamp(64px, 8vw, 112px) calc(-1 * var(--sv-m)) 0 calc(max(0px, (100% - 1320px) / 2) + 16%); }
.sv-mass img { display: block; width: 100%; height: max(280px, 42vh); object-fit: cover; object-position: 50% 60%; }
.sv-plan__close { max-width: 1320px; margin: 28px auto 0; font-size: var(--sv-t-lead); font-weight: 320; line-height: 1.42; }
.sv-plan__close { padding-left: calc(16%); max-width: calc(1320px); }
@media (max-width: 1100px) {
  .sv-planner { grid-template-columns: 1fr; }
  .sv-tools { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; }
  .sv-chips { display: flex; flex-wrap: wrap; }
  .sv-chip { width: auto; }
  .sv-mass { margin-left: 8%; }
  .sv-plan__close { padding-left: 8%; }
}
@media (max-width: 700px) {
  .sv-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--sv-m)); padding: 4px var(--sv-m) 6px; scrollbar-width: none; }
  .sv-chip { flex: none; }
  .sv-tools { order: -1; }
  .sv-mass { margin-left: 0; }
  .sv-mass img { height: 300px; }
  .sv-plan__close { padding-left: 0; }
}
@media (max-width: 519px) { .sv-planner { display: flex; flex-direction: column; } }

/* 6 · lights for the steps: the thin path ledge */
.sv-light { --sv-pt: clamp(40px, 4vw, 56px); --sv-pb: clamp(40px, 4vw, 56px); }
.sv-light .sv-col { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.sv-light .sv-col > * + * { margin-top: 0; }
.sv-light__text { grid-column: 4 / 9; }
.sv-light__text > * + * { margin-top: 1em; }
.sv-light__photo { grid-column: 9 / 13; margin: 0; justify-self: end; width: min(100%, 420px); }
.sv-light__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* 7 · we stay: under the fifth wall, open type */
.sv-stay { --sv-pt: clamp(64px, 6.6vw, 96px); --sv-pb: clamp(48px, 4.4vw, 64px); }
.sv-stay__h { display: block; }
.sv-stay__h .sv-h2, .sv-stay__h .sv-slab-s { display: block; }
.sv-stay__h .sv-slab-s { margin-top: .25em; padding-left: clamp(0px, 7vw, 120px); }
.sv-stay__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(24px, 4vw, 64px); max-width: 52rem !important; margin-top: clamp(32px, 4vw, 56px) !important; }
.sv-stay__body p { position: relative; padding-top: 30px; }
.sv-tick { position: absolute; left: -4px; top: 0; width: 22px; height: 24px; color: var(--sv-gum); }

/* 8 · where we build: the flight */
.sv-where { --sv-pt: clamp(64px, 6.6vw, 96px); --sv-pb: clamp(64px, 6.6vw, 96px); }
.sv-where__in { max-width: 1320px; margin: 0 auto; }
.sv-flightbox { position: relative; margin-top: clamp(20px, 3vw, 40px); --sv-tr: min(9%, 118px); }
.sv-flight { position: relative; }
.sv-flight li { position: relative; font-family: var(--sv-display); font-weight: 800; line-height: 1; letter-spacing: -.015em;
  font-size: calc(var(--sv-t-h2) * (1 - var(--i) * .075)); padding: .12em 0 calc(14px + .16em) calc(var(--i) * var(--sv-tr) + 10px); }
.sv-flight li::after { content: ""; position: absolute; left: calc(var(--i) * var(--sv-tr)); right: 0; bottom: 0; height: 12px; background: var(--sv-stone-2); border-top: 2px solid var(--sv-ink); }
.sv-flight li.sv-flight__land, .sv-flight li.sv-flight__land ~ li { padding-left: calc(var(--i) * var(--sv-tr) + 120px + 10px); }
.sv-flight li.sv-flight__land::after, .sv-flight li.sv-flight__land ~ li::after { left: calc(var(--i) * var(--sv-tr) + 120px); }
.sv-flight__land { margin-top: 0; }
.sv-flight__home .sv-mark { width: .5em; height: .5em; margin-left: .3em; vertical-align: .05em; }
.sv-flight em { font-family: var(--sv-text); font-weight: 500; font-style: italic; font-size: var(--sv-t-small); letter-spacing: 0; color: var(--sv-salvia); margin-left: .5em; vertical-align: .6em; }
.sv-flight__string { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
.sv-flight__string.is-set { display: block; }
.sv-flight__string path { fill: none; stroke: var(--sv-salvia); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sv-where__note { margin-top: clamp(24px, 3vw, 40px); max-width: 44ch; margin-left: auto; font-size: var(--sv-t-lead); font-weight: 320; line-height: 1.42; }
@media (max-width: 700px) {
  .sv-flightbox { --sv-tr: 18px; }
  .sv-flight li.sv-flight__land, .sv-flight li.sv-flight__land ~ li { padding-left: calc(var(--i) * var(--sv-tr) + 40px + 10px); }
  .sv-flight li.sv-flight__land::after, .sv-flight li.sv-flight__land ~ li::after { left: calc(var(--i) * var(--sv-tr) + 40px); }
  .sv-flight em { display: block; margin: .3em 0 0; vertical-align: 0; }
  .sv-where__note { margin-left: 0; }
}

/* 9 · walk the block with us: the landing */
.sv-walk { --sv-pt: clamp(80px, 9vw, 128px); --sv-pb: clamp(48px, 4.4vw, 64px); }
.sv-form { margin-top: clamp(28px, 3vw, 44px) !important; max-width: 50rem !important; }
.sv-form__sentence { font-size: var(--sv-t-sentence); line-height: 1.95; max-width: 50rem !important; }
.sv-w { white-space: nowrap; }
.sv-in { font: 500 1em/1.2 var(--sv-text); color: var(--sv-ink); background: transparent; border: 0; border-bottom: 2px solid var(--sv-ink); padding: 0 4px; width: 10em; max-width: 100%; border-radius: 0; }
.sv-in--s { width: 6.5em; }
.sv-in--t { display: block; width: 100%; resize: vertical; margin: 2px 0 6px; line-height: 1.5; }
.sv-in::placeholder { color: rgba(29, 26, 20, .55); }
.sv-in:focus-visible { outline: none; border-bottom-color: var(--sv-salvia); box-shadow: 0 2px 0 var(--sv-salvia); }
.sv-opts { display: inline; }
.sv-opt { position: relative; cursor: pointer; }
.sv-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sv-opt span { font-weight: 500; border-bottom: 2px dotted rgba(29, 26, 20, .5); }
.sv-opt input:checked + span { border-bottom: 2px solid var(--sv-salvia); color: var(--sv-salvia); }
.sv-opt input:focus-visible + span { outline: 2px solid var(--sv-salvia); outline-offset: 3px; }
.sv-btn { font: 700 1.0625rem/1 var(--sv-text); color: var(--sv-sand); background: var(--sv-ink); border: 0; border-radius: 4px; padding: 16px 26px; cursor: pointer; margin-top: 1.4em; }
.sv-btn:hover { background: #000; }
.sv-form__status { min-height: 1.6em; font-weight: 600; }
@media (max-width: 700px) { .sv-in { width: 8.5em; } .sv-in--s { width: 6.5em; } .sv-in--t { width: 100%; } }

/* the footing and the foot */
.sv-footer { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; padding: 40px var(--sv-m) 56px; }
.sv-footer .sv-brand { margin-right: 0; }
.sv-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-left: auto !important; }
.sv-footer__links a { color: var(--sv-ink); font-weight: 600; }

@media (max-width: 900px) {
  .sv-stone { grid-template-columns: 1fr; padding-left: var(--sv-m); }
  .sv-stone__photo { position: static; }
  .sv-stone__photo img { height: auto; aspect-ratio: 4 / 5; object-position: 50% 40%; }
  .sv-stone .sv-col--r { padding: 0; }
  .sv-light .sv-col { grid-template-columns: 1fr; }
  .sv-light__text, .sv-light__photo { grid-column: 1; }
  .sv-light__photo { order: -1; justify-self: start; }
  .sv-stay__body { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sv-seam--batter svg { height: 110px; }
  .sv-seam--path svg { height: 24px; }
  .sv-stone__photo { margin: 0 calc(-1 * var(--sv-m)); }
}

/* ---------- the block is built as you arrive (scroll-driven, with a one-shot fallback) ---------- */
@keyframes sv-lay { 0% { transform: translateY(-18px); opacity: 0; } 12% { opacity: 1; } 72% { transform: translateY(1.5px); } 100% { transform: none; opacity: 1; } }
@keyframes sv-cap { 0% { transform: translateY(-24px); opacity: 0; } 12% { opacity: 1; } 72% { transform: translateY(1.5px); } 100% { transform: none; opacity: 1; } }
@keyframes sv-rise { from { transform: scale(1, 0); } to { transform: none; } }
@keyframes sv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sv-settle { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sv-tread { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sv-step { from { translate: calc(var(--sv-from) * var(--sv-k, 1)) 0; } to { translate: 0 0; } }
@media (max-width: 700px) { .sv-page { --sv-k: .3; } }
.sv-course, .sv-tf use, .sv-gravel, .sv-spike { transform-box: fill-box; transform-origin: 50% 100%; }
.sv-steel { stroke-dasharray: 1; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sv-seam, .sv-w3box, .sv-flightbox { view-timeline: --sv-seam block; }
    .sv-course, .sv-ps { animation: sv-lay linear both; animation-timeline: --sv-seam; animation-range: cover calc(var(--i) * 3.6%) cover calc(var(--i) * 3.6% + 14%); }
    .sv-cap { animation-name: sv-cap; }
    .sv-seam--foot .sv-course { animation-range: cover 0% cover 22%; }
    .sv-tf use { animation: sv-rise linear both; animation-timeline: --sv-seam; animation-range: cover calc(var(--x) * 16%) cover calc(var(--x) * 16% + 18%); }
    .sv-tf--crest use { animation-range: cover calc(12% + var(--x) * 12%) cover calc(30% + var(--x) * 12%); }
    .sv-spike { animation: sv-rise linear both; animation-timeline: --sv-seam; animation-range: cover 26% cover 40%; }
    .sv-steel { animation: sv-draw linear both; animation-timeline: --sv-seam; animation-range: cover 4% cover 36%; }
    .sv-gravel { animation: sv-settle linear both; animation-timeline: --sv-seam; animation-range: cover 0% cover 20%; }
    .sv-flight li { animation: sv-tread linear both; animation-timeline: --sv-seam; animation-range: entry calc(var(--i) * 8%) entry calc(var(--i) * 8% + 26%); }
    .sv-col { animation: sv-step linear both; animation-timeline: view(); animation-range: cover 0% cover 38vh; }
  }
  .sv-io .sv-seam:not(.sv-play) :is(.sv-course, .sv-tf use, .sv-spike, .sv-gravel), .sv-io .sv-w3box:not(.sv-play) :is(.sv-course, .sv-ps), .sv-io .sv-flightbox:not(.sv-play) li { opacity: 0; }
  .sv-io .sv-seam:not(.sv-play) .sv-steel { stroke-dashoffset: 1; }
  .sv-io .sv-col:not(.sv-play) { translate: calc(var(--sv-from) * var(--sv-k, 1)) 0; }
  .sv-io .sv-play :is(.sv-course, .sv-ps) { animation: sv-lay .52s var(--sv-lay) calc(var(--i) * 90ms) both; }
  .sv-io .sv-play .sv-cap { animation-name: sv-cap; }
  .sv-io .sv-play .sv-tf use { animation: sv-rise .52s var(--sv-lay) calc(var(--x) * 600ms) both; }
  .sv-io .sv-play .sv-spike { animation: sv-rise .52s var(--sv-lay) .5s both; }
  .sv-io .sv-play .sv-steel { animation: sv-draw .7s var(--sv-lay) both; }
  .sv-io .sv-play .sv-gravel { animation: sv-settle .52s var(--sv-lay) both; }
  .sv-io .sv-play.sv-flightbox li { animation: sv-tread .52s var(--sv-lay) calc(var(--i) * 90ms) both; }
  .sv-io .sv-col.sv-play { transition: translate .7s var(--sv-lay); translate: 0 0; }
}