/* Sombra Garden Studio: Motion tier template. Tokens and rules from DESIGN.md, motion standard in STANDARD.md. Phone first.
   Two layouts share one page: html.scrub (motion and a window at least 540px tall: pins, scrubs, the horizontal process)
   and the still layout (reduced motion, short windows, no JS), which is designed, not degraded. */

@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-Italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --bone: #EEEDE9;
  --bone-2: #E4E3DE;
  --ink: #151714;
  --ink-2: #5C5F58;
  --green: #2E4A37;
  --green-2: #23392A;
  --err: #8C2B1B;
  --bone-a: rgba(238, 237, 233, .74);
  --rule: rgba(21, 23, 20, .22);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* seven sizes, no more */
  --fs-cap: .78125rem;
  --fs-ui: .9375rem;
  --fs-body: 1.125rem;
  --fs-lead: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
  --fs-stand: clamp(1.35rem, 2.1vw, 2rem);
  --fs-h2: clamp(1.9rem, 3.4vw, 3.25rem);
  --fs-display: clamp(2.6rem, 6.2vw, 6rem);

  --m: 20px;
  --gap: 16px;
  --ob-h: 40px;
  --dock-h: calc(56px + env(safe-area-inset-bottom, 0px));
  --sec: clamp(96px, 14vw, 200px);
  --edge: max(var(--m), calc((100vw - 1520px) / 2 + var(--m)));
  --col: calc((min(100vw, 1520px) - 2 * var(--m) - 11 * var(--gap)) / 12);
  --ease: cubic-bezier(.2, .6, .2, 1);
  --app-h: 100vh;
  --pin-h: calc(var(--app-h) - var(--ob-h));
  --pin2-h: var(--app-h);
}
@media (min-width: 768px) {
  :root { --m: 32px; --gap: 24px; --dock-h: 0px; --ob-h: 44px; }
}
@media (min-width: 1200px) {
  :root { --m: 56px; }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html {
  background: var(--ink);
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--ob-h) + 12px);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--bone);
  color: var(--ink);
  font: 400 var(--fs-body)/1.55 var(--serif);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  padding-top: var(--ob-h);
  padding-bottom: var(--dock-h);
  min-height: var(--app-h);
  overflow-x: clip;
}
[hidden] { display: none !important; }
img, canvas, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }
em { font-style: italic; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }

::selection { background: transparent; color: var(--green); }
.ob ::selection, .foot ::selection, .dock ::selection, .stage ::selection, .cmp ::selection, .walk ::selection { color: #9DBBA5; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.ob :focus-visible, .foot :focus-visible, .dock :focus-visible { outline-color: var(--bone); }

.sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip { position: fixed; z-index: 90; top: calc(var(--ob-h) + 8px); left: 8px; background: var(--bone); padding: 12px 16px; font: 500 var(--fs-ui)/1.2 var(--sans); transform: translateY(-400%); }
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: 1520px; margin: 0 auto; padding: 0 var(--m); }
.g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.g > * { grid-column: 1 / -1; }
@media (min-width: 768px) { .g { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .g { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* ---------- shared type ---------- */
.display { font: 340 var(--fs-display)/1.02 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.h2 { font: 360 var(--fs-h2)/1.08 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.stand { font: 360 var(--fs-stand)/1.32 var(--serif); text-wrap: pretty; }
/* SplitText line masks: room for ascenders, descenders and italic overhang, with no change to the layout */
[data-split] > div, #hero-h > div, .end-w > div, .step-w > div, .stand > div, .cover-w > div { padding: .1em .05em .16em; margin: -.1em -.05em -.16em; }
.lead { font: 400 var(--fs-lead)/1.3 var(--serif); }
.folio, .pn, .row-n, .step-n, .prog-n, .c-n, .season-d, .r-d, .ruler-m { font: 500 var(--fs-cap)/1.4 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
/* numerals and catalogue numbers are set in the serif, like a monograph's plate list */
.pn, .row-n, .step-n, .prog-n, .c-n { font-family: var(--serif); font-weight: 400; }
p { text-wrap: pretty; }

/* split text: lines sit in masks (SplitText mask: "lines") */
.ln-mask { padding-bottom: .06em; margin-bottom: -.06em; }

/* hairlines */
.hl { height: 1px; background: var(--ink); transform-origin: 0 50%; }
.hl-2 { height: 2px; }

/* buttons: 2px corners, never pills */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 2px; border: 1px solid transparent;
  font: 500 var(--fs-ui)/1 var(--sans); letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-go { background: var(--green); border-color: var(--green); color: var(--bone); }
.btn-go:hover { background: var(--green-2); border-color: var(--green-2); }
.btn-line { background: var(--bone); border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--bone-2); }
.btn-wide { width: 100%; }

/* ---------- owner bar (ours) ---------- */
.ob {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: var(--ob-h);
  display: flex; align-items: center; gap: 12px; padding-left: var(--m);
  background: var(--ink); color: var(--bone);
}
.ob-tag {
  display: none; flex: none; font: 600 var(--fs-cap)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 7px 4px; border: 1px solid rgba(238, 237, 233, .55); border-radius: 2px;
}
.ob-line { flex: none; font: italic 400 var(--fs-body)/1.2 var(--serif); white-space: nowrap; }
.ob-line em { font-style: italic; }
.ob-detail { display: none; min-width: 0; font: 400 var(--fs-ui)/1.3 var(--serif); color: var(--bone-a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-cta { margin-left: auto; flex: none; height: var(--ob-h); display: flex; align-items: center; padding: 0 var(--m) 0 8px; color: var(--bone); text-decoration: none; }
.ob-box { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--bone); border-radius: 2px; font: 500 var(--fs-ui)/1 var(--sans); transition: background-color .2s var(--ease), color .2s var(--ease); }
.ob-cta:hover .ob-box { background: var(--bone); color: var(--ink); }
.ob-long { display: none; }
.ob-call { display: none; font: 400 var(--fs-ui)/1 var(--sans); color: var(--bone-a); padding-right: var(--m); margin-left: -8px; white-space: nowrap; }
.ob-call a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone); }
.ob.is-swap .ob-line, .ob.is-swap .ob-detail, .ob.is-swap .ob-tag { display: none; }
.ob-msg { display: none; min-width: 0; font: 400 var(--fs-ui)/1.25 var(--sans); }
.ob.is-swap .ob-msg { display: block; }
@media (min-width: 360px) { .ob-tag { display: inline-block; } }
@media (min-width: 768px) {
  .ob-long { display: inline; }
  .ob-short { display: none; }
  .ob.has-call .ob-call { display: block; }
  .ob.has-call .ob-cta { padding-right: 16px; }
}
@media (min-width: 1320px) { .ob-detail { display: block; } }

/* ---------- loader: the wordmark only ---------- */
.loader {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--ob-h); z-index: 65;
  display: grid; place-items: center; background: var(--bone);
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.loader-w { font: 340 var(--fs-display)/1 var(--serif); letter-spacing: -.01em; opacity: 0; transition: opacity .45s var(--ease); }
html.fonts .loader-w { opacity: 1; }
html.loaded .loader { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.js) .loader, html:not(.motion) .loader { display: none; }

/* ---------- masthead ---------- */
.mast { position: relative; z-index: 30; color: var(--ink); }
.mast-row { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.mark { display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding-top: 10px; text-decoration: none; color: inherit; }
.mark-w { font: 400 var(--fs-stand)/1 var(--serif); letter-spacing: -.01em; }
.mark-s { font: italic 400 var(--fs-ui)/1 var(--serif); white-space: nowrap; }
.mast-nav { display: none; }
.mast-cta { display: none; }
.mast-line { margin-top: 2px; border-top: 1px solid var(--ink); }
.dateline { padding: 9px 0 10px; font: italic 400 var(--fs-ui)/1.4 var(--serif); }
.dl-more { display: none; }
@media (min-width: 768px) {
  .mast-row { min-height: 72px; }
  .dl-more { display: inline; }
  .mast-cta {
    display: flex; gap: 8px; position: fixed; z-index: 50;
    top: calc(var(--ob-h) + 14px); right: var(--edge);
  }
}
@media (min-width: 1100px) {
  .mast-nav { display: flex; gap: 2px; margin-left: calc(var(--col) * 1.2); }
  .mast-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font: 400 var(--fs-ui)/1 var(--sans); text-decoration: none; }
  .mast-nav a:hover { text-decoration: underline; }
}

/* ===================================================================
   HERO: the yard is built as you scroll
   =================================================================== */
.stage { position: relative; }
.stage-canvas, .stage-scrim, .stage-veil, .stage-foot, .stage-steps, .stage-end, .stage-tag, .cue { display: none; }
.stage-poster, .stage-after img { width: 100%; height: auto; }
figure { position: relative; }
.stage-media, .stage-zoom, .stage-low, .stage-say { display: contents; }

/* still version: reduced motion, short windows, no JS */
.stage-pin { width: 100%; max-width: 1520px; margin: 0 auto; padding: 32px var(--m) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.stage-pin > *, .stage-say > * { grid-column: 1 / -1; }
.stage-cover { padding: 8px 0 32px; }
.stage-cover .deck { margin-top: 16px; max-width: 34ch; font: 400 var(--fs-body)/1.45 var(--serif); }
.stage-after { order: 2; }
.stage-before { order: 3; grid-column: 2 / -1; margin-top: 16px; }
.still-cap { margin-top: 8px; font: 400 var(--fs-ui)/1.4 var(--sans); color: var(--ink-2); }
html:not(.scrub) .stage-steps { display: block; order: 4; margin-top: 40px; }
html:not(.scrub) .step { display: grid; grid-template-columns: 40px 1fr; padding: 14px 0 16px; border-top: 1px solid var(--ink); }
html:not(.scrub) .step-n { grid-row: 1 / 3; padding-top: 6px; }
html:not(.scrub) .step-w { font: 400 var(--fs-lead)/1.25 var(--serif); }
html:not(.scrub) .step-l { grid-column: 2; margin-top: 4px; font: 400 var(--fs-body)/1.45 var(--serif); color: var(--ink-2); }
html:not(.scrub) .stage-end { display: block; order: 5; margin-top: 32px; }
.end-w { font: 360 var(--fs-h2)/1.08 var(--serif); letter-spacing: -.01em; }
.end-l { margin-top: 10px; font: 400 var(--fs-body)/1.45 var(--serif); }
.end-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
@media (min-width: 768px) {
  .stage-pin { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  html:not(.scrub) .stage-cover { grid-column: 1 / 7; }
  html:not(.scrub) .stage-after { grid-column: 1 / 7; }
  html:not(.scrub) .stage-before { grid-column: 7 / 9; order: 3; align-self: end; margin-top: 0; }
  html:not(.scrub) .stage-steps { grid-column: 1 / 7; }
  html:not(.scrub) .stage-end { grid-column: 1 / 7; }
}
@media (min-width: 1024px) {
  .stage-pin { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: 48px; }
  html:not(.scrub) .stage-cover { grid-column: 1 / 9; }
  html:not(.scrub) .stage-after { grid-column: 1 / 9; grid-row: 2 / 4; }
  html:not(.scrub) .stage-before { grid-column: 10 / 13; grid-row: 2; align-self: start; }
  html:not(.scrub) .stage-steps { grid-column: 10 / 13; grid-row: 3; margin-top: 32px; align-self: start; }
  html:not(.scrub) .stage-end { grid-column: 3 / 9; grid-row: 4; margin-top: 48px; }
}

/* scrub version: 5 screens of film, then the next section slides over the held last frame */
html.scrub .stage { height: calc(5 * var(--app-h) + 2 * var(--pin-h)); background: var(--ink); }
html.scrub .stage-pin {
  position: sticky; top: var(--ob-h); display: block; max-width: none; padding: 0;
  height: var(--pin-h); overflow: hidden; color: var(--bone); isolation: isolate;
}
html.scrub .stage-media, html.scrub .stage-zoom { display: block; position: absolute; inset: 0; overflow: hidden; }
html.scrub .stage-media { transform-origin: 50% 30%; }
html.scrub .stage-zoom { transform-origin: 50% 42%; }
html.scrub .stage-before, html.scrub .stage-before picture, html.scrub .stage-poster,
html.scrub .stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
html.scrub .stage-poster { object-fit: cover; }
html.scrub .stage-canvas { display: block; opacity: 0; transition: opacity .35s linear; }
html.scrub .stage-canvas.is-on { opacity: 1; }
html.scrub .still-cap, html.scrub .stage-after { display: none; }
html.scrub .stage-scrim {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(21, 23, 20, .88) 0, rgba(21, 23, 20, .78) 30%, rgba(21, 23, 20, .6) 48%, rgba(21, 23, 20, .22) 64%, rgba(21, 23, 20, 0) 76%),
    linear-gradient(to bottom, rgba(21, 23, 20, .34) 0, rgba(21, 23, 20, 0) 120px);
}
@media (min-width: 768px) {
  html.scrub .stage-scrim {
    background:
      radial-gradient(62% 58% at 14% 88%, rgba(21, 23, 20, .5), rgba(21, 23, 20, 0) 72%),
      linear-gradient(to top, rgba(21, 23, 20, .84) 0, rgba(21, 23, 20, .64) 22%, rgba(21, 23, 20, .32) 44%, rgba(21, 23, 20, 0) 62%),
      linear-gradient(to bottom, rgba(21, 23, 20, .3) 0, rgba(21, 23, 20, 0) 120px);
  }
}
html.scrub .stage-veil { display: block; position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; }

/* the before / after tag, top left of the film */
html.scrub .stage-tag { display: block; position: absolute; z-index: 4; top: 16px; left: var(--edge); }
.tag-in { position: relative; display: block; overflow: hidden; height: 34px; border-radius: 2px; background: var(--ink); }
.tag-b, .tag-a { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; font: 400 var(--fs-ui)/1 var(--sans); color: var(--bone); white-space: nowrap; }
.tag-b b, .tag-a b, .cmp-k b { font-weight: 600; }
.tag-a { position: absolute; left: 0; top: 0; visibility: hidden; }

/* captions live bottom left, over lawn and sidewalk, never over the house */
html.scrub .stage-low { display: block; position: absolute; z-index: 3; left: var(--edge); right: var(--edge); bottom: calc(var(--dock-h) + 16px); }
html.scrub .stage-say { display: block; position: relative; height: 0; }
html.scrub .stage-cover, html.scrub .stage-steps, html.scrub .stage-end { position: absolute; left: 0; bottom: 26px; width: 100%; max-width: 44rem; padding: 0; }
html.scrub .stage-cover .display { color: var(--bone); }
html.scrub .stage-cover .deck { max-width: 34ch; margin-top: 14px; color: var(--bone); }
html.scrub .cue { display: block; margin-top: 18px; font: italic 400 var(--fs-ui)/1.4 var(--serif); color: var(--bone); }
html.scrub .stage-steps { display: block; height: 0; }
html.scrub .step { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; visibility: hidden; }
html.scrub .step-n { display: block; color: var(--bone-a); margin-bottom: 14px; font-size: var(--fs-ui); }
html.scrub .step-w { display: block; font: 340 var(--fs-h2)/1.02 var(--serif); letter-spacing: -.01em; }
html.scrub .step-l { display: block; margin-top: 10px; max-width: 36ch; font: 400 var(--fs-body)/1.45 var(--serif); color: var(--bone); }
html.scrub .stage-end { display: block; opacity: 0; visibility: hidden; }
html.scrub .end-l { color: var(--bone); }
html.scrub .end-btns .btn-line { background: transparent; border-color: var(--bone); color: var(--bone); }
html.scrub .end-btns .btn-line:hover { background: rgba(238, 237, 233, .12); }
html.scrub .stage-foot { display: block; }
.ba { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "b a" "p p"; column-gap: 12px; row-gap: 12px; align-items: end; }
.ba-before { grid-area: b; }
.ba-after { grid-area: a; text-align: right; }
.ba-mid { grid-area: p; display: flex; align-items: end; gap: 12px; }
.ba-k { display: block; font: 500 var(--fs-cap)/1.3 var(--sans); }
.ba-v { display: block; font: 400 var(--fs-ui)/1.3 var(--sans); white-space: nowrap; }
.ba-pct { flex: none; min-width: 4ch; text-align: right; font: 500 var(--fs-ui)/1 var(--sans); }
.prog { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.prog li { display: block; }
.prog-n { display: block; margin-bottom: 6px; color: inherit; opacity: .9; }
.prog-t { display: block; height: 1px; background: rgba(238, 237, 233, .32); }
.prog-t i { display: block; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; }

@media (min-width: 768px) {
  html.scrub .stage-tag { top: 20px; }
  html.scrub .stage-low { bottom: 24px; }
  html.scrub .stage-cover, html.scrub .stage-steps, html.scrub .stage-end { bottom: 40px; }
  html.scrub .stage-cover .deck { margin-top: 18px; }
  html.scrub .step-w { font-size: var(--fs-display); }
  html.scrub .end-w { font-size: var(--fs-display); line-height: 1.02; }
  .ba { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "b p a"; column-gap: 28px; }
  .ba-v { font: 400 var(--fs-body)/1.25 var(--serif); }
  .prog { gap: 12px; }
}

/* the next section slides over the held last frame */
html.scrub .studio { position: relative; z-index: 2; margin-top: calc(-1 * var(--pin-h)); background: var(--bone); }

/* ===================================================================
   SECTIONS
   =================================================================== */
.sec { padding-top: var(--sec); scroll-margin-top: var(--ob-h); }
.sec-head { align-items: start; }
.sec-head .hl { margin-bottom: 12px; }
.folio { justify-self: end; grid-column: 1 / -1; margin-bottom: 20px; }
.sec-head .h2 { grid-column: 1 / -1; }
.sec-head .intro { grid-column: 1 / -1; margin-top: 14px; max-width: 40ch; font: italic 400 var(--fs-body)/1.5 var(--serif); color: var(--ink-2); }
@media (min-width: 768px) {
  .sec-head .folio { justify-self: start; grid-column: 1 / 3; grid-row: 2; margin: 0; padding-top: 8px; }
  .sec-head .h2 { grid-column: 3 / -1; grid-row: 2; }
  .sec-head .intro { grid-column: 3 / 8; grid-row: 3; }
  .sec-head .hl { margin-bottom: 20px; }
}
@media (min-width: 1024px) {
  .sec-head .h2 { grid-column: 3 / 10; }
  .sec-head .intro { grid-column: 3 / 8; }
}

/* No. 1 studio + contents */
.studio .g { align-items: start; }
.studio-folio { justify-self: start; margin-bottom: 18px; }
.studio .stand { grid-column: 1 / -1; }
.margin-cap { grid-column: 1 / -1; margin-top: 20px; font: italic 400 var(--fs-body)/1.42 var(--serif); color: var(--ink-2); max-width: 30ch; }
.contents { margin-top: 80px; }
.contents-in { grid-column: 1 / -1; }
.contents-h { margin-top: 14px; font: 400 var(--fs-lead)/1.25 var(--serif); }
.contents-list { margin-top: 18px; }
.contents-list a { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; min-height: 52px; padding: 13px 0 12px; border-top: 1px solid var(--rule); text-decoration: none; }
.contents-list li:last-child a { border-bottom: 1px solid var(--rule); }
.c-t { font: 400 var(--fs-lead)/1.25 var(--serif); transition: transform .45s var(--ease); }
.contents-list a:hover .c-t { transform: translateX(10px); }
@media (min-width: 768px) {
  .studio-folio { grid-column: 1 / 3; padding-top: 10px; margin: 0; }
  .studio .stand { grid-column: 3 / -1; }
  .margin-cap { grid-column: 3 / 7; }
  .contents { margin-top: 112px; }
  .contents-in { grid-column: 3 / -1; }
}
@media (min-width: 1024px) {
  .studio .stand { grid-column: 3 / 10; }
  .margin-cap { grid-column: 11 / 13; margin-top: 0; padding-top: 10px; }
  .contents-in { grid-column: 5 / 12; }
  .contents-list a { grid-template-columns: 112px 1fr; }
}

/* No. 2 the work: the run of short films is at the end of this file */
.mat { position: relative; overflow: hidden; background: var(--bone-2); }
.mat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-32 { aspect-ratio: 3 / 2; }
.r-23 { aspect-ratio: 2 / 3; }
.r-45 { aspect-ratio: 4 / 5; }
.cmp-cap, .walk-cap { display: grid; grid-template-columns: 1fr; }
.pt { margin-top: 2px; font: italic 400 var(--fs-lead)/1.25 var(--serif); }
.pl { margin-top: 4px; max-width: 40ch; font: 400 var(--fs-body)/1.42 var(--serif); color: var(--ink-2); }

/* No. 3 process: a build schedule that runs sideways (scrub) or a stacked list (still) */
.proc-head { padding: 0 var(--m); max-width: 1520px; margin: 0 auto; }
.proc-head .hl { margin-bottom: 12px; }
.proc-head .folio { justify-self: start; margin-bottom: 14px; }
.proc-list { max-width: 1520px; margin: 40px auto 0; padding: 0 var(--m); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
.proc-fig { position: relative; }
.proc-tag { position: absolute; left: 12px; top: 12px; padding: 6px 9px; border-radius: 2px; background: var(--ink); color: var(--bone); font: 500 var(--fs-cap)/1 var(--sans); }
.proc-txt { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; margin-top: 16px; }
.row-n { grid-column: 1; }
.row-t { grid-column: 2; font: 400 var(--fs-lead)/1.25 var(--serif); }
.row-x { grid-column: 2; margin-top: 8px; max-width: 40ch; }
.proc-end { align-self: end; }
.proc-bar { display: none; }
.plan-mat { background: var(--bone-2); }
.plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan .d { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.plan .d-thin { stroke-width: .8; stroke: var(--ink-2); }
.plan-t text { font-family: var(--sans); font-size: var(--fs-cap); font-weight: 500; fill: var(--ink-2); }
@media (min-width: 768px) {
  .proc-head { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--m); }
  .proc-head .hl { grid-column: 1 / -1; margin-bottom: 20px; }
  .proc-head .folio { grid-column: 1 / 3; padding-top: 8px; margin: 0; }
  .proc-head .h2 { grid-column: 3 / -1; }
  .proc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; }
}
@media (min-width: 1024px) {
  .proc-head { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .proc-head .h2 { grid-column: 3 / 10; }
  .proc-list { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; }
  .proc-end { grid-column: 1 / -1; }
}

html.scrub .process {
  padding-top: var(--sec);
  --pg: clamp(28px, 4vw, 72px);
  --hw: min(78vw, 30rem);
  --cw: min(76vw, calc((var(--pin2-h) - var(--dock-h) - 300px) * .8), 440px);
  --ew: min(60vw, 18rem);
}
@media (min-width: 1024px) {
  html.scrub .process { --hw: min(34vw, 30rem); --cw: min(28vw, calc((var(--pin2-h) - 260px) * .8), 440px); }
}
/* the run is as tall as the sideways distance, so the pin is plain CSS sticky (no JS layout writes) */
html.scrub .proc-run { position: relative; height: calc(var(--pin2-h) + max(0px, 2 * var(--edge) + var(--hw) + 4 * var(--cw) + var(--ew) + 5 * var(--pg) - 100vw)); }
html.scrub .proc-pin { position: sticky; top: 0; height: var(--pin2-h); overflow: hidden; }
html.scrub .proc-track {
  position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: flex-end; gap: var(--pg);
  width: max-content; padding: 0 var(--edge) calc(var(--dock-h) + 64px);
}
html.scrub .proc-head { display: block; flex: none; align-self: stretch; width: var(--hw); padding: 56px 0 0; margin: 0; }
html.scrub .proc-head .folio { margin: 0 0 16px; padding: 0; }
html.scrub .proc-list { display: flex; align-items: flex-start; gap: var(--pg); margin: 0; padding: 0; max-width: none; }
html.scrub .proc-card { flex: none; width: var(--cw); }
html.scrub .proc-end { flex: none; width: var(--ew); align-self: center; }
html.scrub .proc-end .act { margin: 0; }
html.scrub .proc-bar { display: block; position: absolute; left: var(--edge); right: calc(var(--edge) + 72px); bottom: calc(var(--dock-h) + 28px); height: 1px; background: var(--rule); }
.proc-fill { display: block; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
@media (min-width: 1024px) {
  html.scrub .proc-head { padding-top: 48px; }
}

/* No. 4 studies: before and after on one camera, then the walk at blue hour */
.cmp, .walk { margin-top: 48px; }
.cmp-frame { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 0 var(--m); max-width: 1520px; margin: 0 auto; }
.cmp-b, .cmp-a { position: relative; overflow: hidden; background: var(--bone-2); aspect-ratio: 16 / 9; }
.cmp-b img, .cmp-a img, .walk-frame img { width: 100%; height: 100%; object-fit: cover; }
.cmp-b picture, .cmp-a picture { position: absolute; inset: 0; }
.cmp-k { position: absolute; z-index: 2; top: 12px; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 2px; background: var(--ink); color: var(--bone); font: 400 var(--fs-ui)/1 var(--sans); white-space: nowrap; }
.cmp-kb { left: 12px; }
.cmp-ka { right: 12px; }
.cmp-edge { display: none; }
.cmp-cap, .walk-cap { margin: 12px auto 0; padding: 0 var(--m); max-width: 1520px; }
.walk-frame { position: relative; overflow: hidden; background: var(--bone-2); aspect-ratio: 16 / 9; margin: 0 var(--m); }
.walk-gold { display: none; }
.walk-dusk { display: block; position: absolute; inset: 0; }
@media (min-width: 768px) {
  .cmp-frame { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .walk-frame { margin: 0 auto; max-width: calc(1520px - 2 * var(--m)); width: calc(100% - 2 * var(--m)); }
}

html.scrub .cmp, html.scrub .walk { margin-top: 64px; }
html.scrub .cmp { height: calc(var(--pin2-h) + 1.6 * var(--app-h)); }
html.scrub .walk { height: calc(var(--pin2-h) + 1.7 * var(--app-h)); }
html.scrub .cmp-pin, html.scrub .walk-pin { position: sticky; top: 0; height: var(--pin2-h); overflow: hidden; color: var(--bone); }
html.scrub .cmp-pin { background: var(--ink); }
html.scrub .cmp-frame { position: absolute; inset: 0; display: block; padding: 0; max-width: none; margin: 0; }
html.scrub .cmp-b, html.scrub .cmp-a { position: absolute; inset: 0; aspect-ratio: auto; }
html.scrub .cmp-a { z-index: 1; }
html.scrub .cmp-k { top: 16px; }
html.scrub .cmp-kb { left: var(--edge); }
html.scrub .cmp-ka { right: var(--edge); }
@media (max-width: 767.98px) { .cmp-v { display: none; } }
@media (min-width: 768px) {
  html.scrub .cmp-kb { top: 20px; }
  html.scrub .cmp-ka { top: auto; bottom: 28px; }
}
html.scrub .cmp-edge { display: block; position: absolute; z-index: 2; inset: 0; pointer-events: none; }
html.scrub .cmp-edge span { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--bone); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 80%); mask-image: linear-gradient(to bottom, #000 60%, transparent 80%); }
html.scrub .cmp-b::after, html.scrub .cmp-a::after, html.scrub .walk-frame::after {
  content: ""; position: absolute; z-index: 1; inset: auto 0 0 0; height: min(52%, 360px); pointer-events: none;
  background: linear-gradient(to top, rgba(21, 23, 20, .8) 0, rgba(21, 23, 20, .5) 42%, rgba(21, 23, 20, 0) 100%);
}
html.scrub .cmp-cap, html.scrub .walk-cap { position: absolute; z-index: 4; left: var(--edge); right: var(--edge); bottom: calc(var(--dock-h) + 28px); margin: 0; padding: 0; max-width: 34rem; }
html.scrub .cmp-cap .pn, html.scrub .walk-cap .pn { color: var(--bone-a); }
html.scrub .cmp-cap .pl, html.scrub .walk-cap .pl { color: var(--bone); }
html.scrub .walk-frame { position: absolute; inset: 0; margin: 0; max-width: none; width: auto; aspect-ratio: auto; }
html.scrub .walk-gold, html.scrub .walk-dusk { display: block; position: absolute; inset: 0; }
html.scrub .walk-dusk { opacity: 0; }

/* No. 5 care: a month ruler, then the visit list and the two seasons */
.ruler { grid-column: 1 / -1; margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap); }
.ruler-m { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.ruler-m li { text-align: left; }
.ruler-m li::before { content: attr(data-s); }
.ruler-m li.is-now { color: var(--ink); font-weight: 600; }
.r-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 12px; align-items: end; padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
.r-k { grid-column: 1; display: grid; }
.r-name { font: 400 var(--fs-lead)/1.25 var(--serif); }
.r-d { margin-top: 2px; }
.r-n { grid-column: 2; font: 400 var(--fs-ui)/1.2 var(--sans); color: var(--ink-2); text-align: right; white-space: nowrap; }
.r-n .tnum { font: 360 var(--fs-stand)/1 var(--serif); color: var(--ink); margin-right: 4px; }
.r-track {
  grid-column: 1 / -1; position: relative; height: 12px;
  background: linear-gradient(to right, var(--rule) 0 1px, transparent 1px) 0 0 / calc(100% / 12) 100% repeat-x;
}
.r-bar { position: absolute; top: 2px; bottom: 2px; left: calc(var(--a) / 12 * 100%); width: calc((var(--b) - var(--a)) / 12 * 100%); background: var(--ink); transform-origin: 0 50%; }
.r-dry .r-bar { background: var(--bone); box-shadow: inset 0 0 0 1px var(--ink); }
.r-storm .r-bar { top: 5px; bottom: 5px; }
@media (min-width: 1024px) {
  .ruler { grid-template-columns: minmax(0, 3fr) minmax(0, 1.2fr) minmax(0, 7.8fr); margin-top: 72px; }
  .ruler-m { grid-column: 3; }
  .ruler-m li::before { content: attr(data-l); }
  .r-row { align-items: center; padding: 22px 0; }
  .r-track { grid-column: 3; }
}

.care-body { margin-top: 64px; row-gap: 48px; align-items: start; }
.ticks { margin-top: 14px; }
.ticks li { padding: 10px 0 11px; border-top: 1px solid var(--rule); }
.ticks li:last-child { border-bottom: 1px solid var(--rule); }
.season .season-d { margin-top: 4px; }
.season p:last-child { margin-top: 12px; max-width: 46ch; }
.care-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
@media (min-width: 768px) {
  .every { grid-column: 3 / 9; }
  .season-wet { grid-column: 3 / 6; }
  .season-dry { grid-column: 6 / 9; }
  .care-end { grid-column: 3 / 9; }
}
@media (min-width: 1024px) {
  .care-body { row-gap: 56px; margin-top: 88px; }
  .every { grid-column: 3 / 9; }
  .season-wet { grid-column: 3 / 7; }
  .season-dry { grid-column: 7 / 11; }
  .care-end { grid-column: 3 / 11; }
}

/* service area: places set as type (lines slide in from the right, clipped at the page edge) */
.area { overflow-x: clip; }
.area-in { grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; }
.area-in > * { grid-column: 2; }
.vlabel { grid-column: 1; grid-row: 1 / 3; writing-mode: vertical-rl; transform: rotate(180deg); justify-self: start; align-self: start; font: 400 var(--fs-ui)/1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.index { font: 340 var(--fs-h2)/1.12 var(--serif); letter-spacing: -.01em; }
.area-line { margin-top: 20px; }
.area-call { display: inline-block; padding: 8px 0; text-decoration: none; }
.area-call .tnum { white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (min-width: 768px) {
  .area-in { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gap); }
  .vlabel { grid-column: 1; }
  .index { grid-column: 2 / -1; }
  .area-line { grid-column: 2 / -1; }
}
@media (min-width: 1024px) {
  .area-in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .index { grid-column: 2 / 12; }
  .area-line { grid-column: 2 / 8; }
}

/* No. 6 questions */
.faq-list { margin-top: 40px; border-bottom: 1px solid var(--ink); }
.faq-list details { border-top: 1px solid var(--ink); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.q { font: 400 var(--fs-lead)/1.25 var(--serif); }
.qi { position: relative; flex: none; width: 14px; height: 14px; }
.qi::before, .qi::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1px; background: var(--ink); transition: transform .3s var(--ease); }
.qi::after { transform: rotate(90deg); }
details[open] .qi::after { transform: rotate(0deg); }
.a { padding: 0 0 26px; }
.a p { max-width: 60ch; }
@media (min-width: 768px) { .faq-list { grid-column: 2 / 8; } }
@media (min-width: 1024px) { .faq-list { grid-column: 3 / 11; margin-top: 56px; } }

/* No. 7 estimate */
.estimate .hl-2 { margin-bottom: 20px; }
.est { row-gap: 48px; align-items: start; }
.est-folio { justify-self: start; margin-bottom: 18px; }
.est-lede { margin-top: 16px; max-width: 34ch; }
.big-phone { display: inline-flex; align-items: center; min-height: 44px; margin-top: 28px; font: 340 var(--fs-h2)/1.1 var(--serif); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.big-phone:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.est-hours { margin-top: 4px; font: 400 var(--fs-body)/1.45 var(--serif); color: var(--ink-2); }
.est-dir { margin-top: 20px; }
@media (min-width: 768px) {
  .est-intro { grid-column: 1 / 5; }
  .est-form { grid-column: 5 / 9; }
}
@media (min-width: 1024px) {
  .est-intro { grid-column: 1 / 6; }
  .est-form { grid-column: 7 / 13; }
}

/* the form (in page and in the sheet) */
.form { display: grid; row-gap: 22px; }
.fld { display: grid; row-gap: 6px; }
.fld label, .chips legend { font: 500 var(--fs-ui)/1.3 var(--sans); }
.fld input, .fld textarea {
  width: 100%; min-height: 48px; padding: 12px 14px 10px; border: 0; border-bottom: 2px solid var(--ink-2); border-radius: 2px 2px 0 0;
  background: var(--bone-2); font: 400 var(--fs-body)/1.4 var(--sans); color: var(--ink); caret-color: var(--green);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.fld textarea { resize: vertical; min-height: 104px; }
.fld input:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--green); background: #E9E8E3; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-2); opacity: 1; }
.fld input[aria-invalid="true"] { border-bottom-color: var(--err); }
.err { font: 400 var(--fs-ui)/1.3 var(--sans); color: var(--err); }
.chips { border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chips legend { padding: 0; margin-bottom: 8px; }
.chips-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chip { position: relative; display: block; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip span {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; text-align: center;
  border: 1px solid rgba(21, 23, 20, .4); border-radius: 2px; font: 400 var(--fs-ui)/1.2 var(--sans); white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--green); border-color: var(--green); color: var(--bone); }
.chip input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.fine { margin-top: -10px; font: 400 var(--fs-ui)/1.4 var(--sans); color: var(--ink-2); }
.status { font: 400 var(--fs-ui)/1.4 var(--sans); }
.status:empty { display: none; }
.status.is-bad { color: var(--err); }
.sent { padding: 28px 0 8px; border-top: 1px solid var(--ink); }
.sent:focus { outline: none; }
.sheet .sent { border-top: 0; padding-top: 4px; }
.sent-t { font: 360 var(--fs-stand)/1.28 var(--serif); max-width: 24ch; }
@media (min-width: 1200px) { .est-form .chips-job { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- the sheet ---------- */
.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 92%;
  border: 0; padding: 0; background: var(--bone); color: var(--ink);
  transform: translateY(24px); opacity: 0; transition: transform .32s var(--ease), opacity .24s var(--ease);
}
.sheet[open].is-open { transform: none; opacity: 1; }
.sheet::backdrop { background: rgba(21, 23, 20, .5); }
.sheet-in { max-height: calc(var(--app-h) * .92); overflow: auto; overscroll-behavior: contain; padding: 0 var(--m) calc(28px + env(safe-area-inset-bottom, 0px)); }
.sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 12px; margin-bottom: 18px; background: var(--bone); border-bottom: 1px solid var(--ink); }
.sheet-h { font: 400 var(--fs-lead)/1.25 var(--serif); }
.sheet-x { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px 0 12px; font: 500 var(--fs-ui)/1 var(--sans); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
html.sheet-open { overflow: hidden; }
@media (min-width: 768px) {
  .sheet { inset: 0 0 0 auto; width: min(520px, 100%); height: 100%; max-height: none; transform: translateX(32px); }
  .sheet-in { max-height: 100%; height: 100%; padding: 0 32px 32px; }
  .sheet-head { padding-top: calc(var(--ob-h) + 8px); }
}

/* ---------- footer ---------- */
.foot {
  position: relative; z-index: 2; overflow: hidden; background: var(--ink); color: var(--bone); margin-top: var(--sec);
  min-height: var(--pin-h); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 80px;
}
/* the finished garden in three plates: sky, wordmark, then the garden with its sky cut out */
.cover { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.cover-box { position: absolute; left: 50%; top: 50%; width: max(100cqw, 177.78cqh); aspect-ratio: 16 / 9; translate: -50% -50%; container-type: inline-size; }
.cover-sky, .cover-scene { position: absolute; inset: 0; }
.cover-sky { transform-origin: 50% 0; }
.cover-scene { transform-origin: 50% 64%; }
.cover-sky img, .cover-scene img { width: 100%; height: 100%; object-fit: cover; }
.cover-w { position: absolute; left: 61.5%; top: 6%; translate: -50% 0; font: 340 17cqw/1 var(--serif); letter-spacing: -.025em; color: var(--ink); white-space: nowrap; }
.cover-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(21, 23, 20, .92) 0, rgba(21, 23, 20, .78) 24%, rgba(21, 23, 20, .38) 42%, rgba(21, 23, 20, 0) 58%); }
@media (max-aspect-ratio: 3/4) {
  .cover-box { width: max(100cqw, calc(100cqh * 700 / 1080)); aspect-ratio: 700 / 1080; }
  .cover-w { left: 50%; top: 24.5%; font-size: 19cqw; }
}
.foot-in { position: relative; z-index: 2; align-items: end; row-gap: 40px; }
.colophon p { font: 400 var(--fs-body)/1.5 var(--serif); color: var(--bone-a); }
.colophon p + p { margin-top: 6px; }
.colophon a { color: var(--bone); }
.foot-call { color: var(--bone) !important; }
.foot-call a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-line { margin-top: 28px !important; }
@media (min-width: 768px) {
  .foot { padding-bottom: 56px; }
  .colophon { grid-column: 1 / 6; }
}
@media (min-width: 1024px) {
  .colophon { grid-column: 1 / 6; }
}

/* ---------- phone dock + top ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 6px var(--m) calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--ink);
}
.dock a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 2px; font: 500 var(--fs-ui)/1 var(--sans); text-decoration: none; }
.dock-call { color: var(--bone); border: 1px solid rgba(238, 237, 233, .6); }
.dock-go { background: var(--green); color: var(--bone); }
@media (min-width: 768px) { .dock { display: none; } }
.totop {
  position: fixed; z-index: 55; right: var(--m); bottom: calc(var(--dock-h) + 12px);
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 0 12px;
  background: var(--bone); color: var(--ink); border: 1px solid var(--ink); border-radius: 2px;
  font: 500 var(--fs-ui)/1 var(--sans); text-decoration: none;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.totop.is-on { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
.totop.is-on.is-held { opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility 0s linear .2s; }
@media (min-width: 768px) { .totop { right: var(--edge); bottom: 24px; } }
/* phones: the dock holds the screen's edge; a floating Top there sat on care lines and the job chips in the form */
@media (max-width: 767px) { .totop { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------- the sample bar folds into a pill once the film is behind you ---------- */
.ob { transition: transform .45s var(--ease); }
html.ob-mini-on .ob { transform: translateY(-110%); }
/* past the film the two header buttons sit on one bone plate, so pinned sections slide under them cleanly */
html.ob-mini-on .mast-cta { background: var(--bone); }
.ob-mini {
  position: fixed; z-index: 71; top: 10px; left: 50%; height: 28px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-radius: 14px; background: var(--ink); color: var(--bone); white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
  transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
html.ob-mini-on .ob-mini { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s; }
.obm-tag { font: 600 var(--fs-cap)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.obm-cta { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; font: 500 var(--fs-cap)/1 var(--sans); color: var(--bone); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.ob-mini ::selection { color: #9DBBA5; }
.ob-mini :focus-visible { outline-color: var(--bone); }

/* ---------- No. 2: six short films from one garden ---------- */
.work-run, .work-pin { position: relative; }
.work-view { margin-top: 40px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--m); }
.work-view::-webkit-scrollbar { display: none; }
.work-track { display: flex; gap: 16px; width: max-content; padding: 0 var(--m); list-style: none; }
.wcard { width: min(76vw, 340px); scroll-snap-align: start; }
.wframe { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bone-2); }
.wframe img, .wfilm { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wframe img { transform: scale(1.06); }
.wfilm { display: block; opacity: 0; transition: opacity .5s linear; }
.wfilm.is-on { opacity: 1; }
.wt { margin-top: 16px; font: 400 var(--fs-lead)/1.25 var(--serif); }
.wt .pn { margin-right: 8px; }
.wx { margin-top: 6px; max-width: 34ch; color: var(--ink-2); }
.work-bar { display: none; }
@media (min-width: 1024px) {
  .work-view { overflow: visible; margin-top: 56px; }
  .work-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px var(--gap); width: auto; max-width: 1520px; margin: 0 auto; padding: 0 var(--m); }
  .wcard { width: auto; }
  .wframe { aspect-ratio: 3 / 2; }
  html.scrub .work { padding-top: 0; }
  html.scrub .work-run { height: calc(var(--app-h) + var(--wdist, 2400px)); }
  html.scrub .work-pin { position: sticky; top: 0; height: var(--app-h); overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-bottom: 40px; }
  html.scrub .work-view { margin-top: 40px; }
  html.scrub .work-track { display: flex; width: max-content; gap: var(--gap); padding: 0 var(--edge); max-width: none; margin: 0; }
  html.scrub .wcard { width: min(26vw, calc((var(--app-h) - 380px) * .8), 400px); }
  html.scrub .wframe { aspect-ratio: 4 / 5; }
  html.scrub .work-bar { display: block; position: absolute; left: var(--edge); right: var(--edge); bottom: 28px; height: 1px; background: var(--rule); }
  .work-fill { display: block; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
}

/* ---------- No. 5: the needle ---------- */
.ruler { position: relative; }
.r-needle { display: none; }
.ruler.has-needle .r-needle { display: block; position: absolute; z-index: 2; top: 34px; bottom: 0; left: 0; width: 1px; background: var(--green); pointer-events: none; will-change: transform; }
.r-needle-l { position: absolute; bottom: -22px; left: 6px; font: 600 var(--fs-cap)/1 var(--sans); color: var(--green); white-space: nowrap; }
.r-needle-l.is-flip { left: auto; right: 6px; }
.ruler.has-needle { margin-bottom: 28px; }
.ruler-m li.is-on { color: var(--green); font-weight: 600; }

/* ---------- service area: the map ---------- */
.area { padding-bottom: 24px; }
.area-copy { display: grid; align-content: start; }
.area-map { margin-top: 40px; }
.map { display: block; width: 100%; height: auto; max-height: 72vh; }
.map-land { fill: var(--bone-2); }
.map-shore { fill: none; stroke: var(--rule); stroke-width: 1; }
.map-isle { fill: var(--bone-2); stroke: var(--rule); stroke-width: 1; }
.map-w { font: italic 400 15px var(--serif); fill: var(--ink-2); }
.map-route-base { fill: none; stroke: var(--rule); stroke-width: 1.4; stroke-dasharray: 2 5; }
.map-route { fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; }
.mp-d { fill: var(--bone); stroke: var(--ink-2); stroke-width: 1.5; transition: fill .3s var(--ease), stroke .3s var(--ease); }
.mp-t { font: 500 14px var(--sans); fill: var(--ink-2); transition: fill .3s var(--ease); }
.mp.is-on .mp-d { fill: var(--green); stroke: var(--green); }
.mp.is-on .mp-t { fill: var(--ink); }
.area.is-live .ix { color: var(--ink-2); transition: color .35s var(--ease); }
.area.is-live .ix.is-on { color: var(--ink); }
@media (min-width: 1024px) {
  .area-copy { grid-column: 2 / 8; align-self: center; }
  .area-map { grid-column: 8 / 13; grid-row: 1 / 3; margin-top: 0; align-self: center; }
  .area-in .index { grid-column: auto; }
  .area-in .area-line { grid-column: auto; }
  html.scrub .area { padding-top: 0; }
  html.scrub .area-run { height: calc(var(--app-h) * 2.4); }
  html.scrub .area-pin { position: sticky; top: 0; height: var(--app-h); display: grid; align-content: center; }
}

/* ---------- reviews: rating by Free estimate, the customer's words under the study, a work clip by the form,
   the newest three before the estimate. Samples are tagged and carry no names or faces. ---------- */
.rate { font: 400 var(--fs-ui)/1.4 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.rate-a, .rate-b { white-space: nowrap; }
.end-rate { margin-top: 12px; }
html.scrub .end-rate { color: var(--bone-a); }
.rv-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid currentColor; border-radius: 2px; font: 600 var(--fs-cap)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.rv-by { font: 400 var(--fs-ui)/1.4 var(--sans); color: var(--ink-2); }

.cmp-rev { margin-top: 28px; }
.cmp-rev-in { display: grid; gap: 10px; justify-items: start; }
.cmp-rev-in q { max-width: 36ch; font: italic 400 var(--fs-lead)/1.35 var(--serif); text-wrap: pretty; }
@media (min-width: 768px) { .cmp-rev-in { grid-column: 3 / -1; } }
@media (min-width: 1024px) { .cmp-rev-in { grid-column: 3 / 9; } }

.said .sec-head .intro.rate { font: 400 var(--fs-ui)/1.4 var(--sans); }
.said-list { display: grid; gap: 0; margin-top: 36px; border-top: 1px solid var(--ink); }
.said-i { display: grid; gap: 10px; justify-items: start; padding: 22px 0 24px; border-bottom: 1px solid var(--rule, rgba(0, 0, 0, .16)); }
.said-q { max-width: 40ch; font: 400 var(--fs-lead)/1.35 var(--serif); text-wrap: pretty; }
.said-note { margin-top: 18px; max-width: 60ch; font: 400 var(--fs-ui)/1.5 var(--sans); color: var(--ink-2); }
@media (min-width: 1024px) {
  .said-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); border-top: 0; }
  .said-i { border-top: 1px solid var(--ink); border-bottom: 0; padding-right: 8px; }
  .said-list, .said-note { grid-column: 3 / -1; }
}

.est-rate { margin-top: 10px; }
.clip { margin: 32px 0 0; display: grid; gap: 12px; justify-items: start; }
.clip-frame { position: relative; width: min(100%, 300px); aspect-ratio: 540 / 958; overflow: hidden; background: var(--ink); border-radius: 2px; }
.clip-v { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip-tag { position: absolute; left: 10px; top: 10px; padding: 5px 8px; border-radius: 2px; background: var(--bone); color: var(--ink); font: 600 var(--fs-cap)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.clip-cap { display: grid; gap: 4px; max-width: 300px; }
.clip-t { font: italic 400 var(--fs-body)/1.35 var(--serif); }
.clip-n { font: 400 var(--fs-ui)/1.45 var(--sans); color: var(--ink-2); }

.dock { grid-template-rows: auto auto; }
.dock-rate { grid-column: 1 / -1; margin: 0 0 -2px; color: var(--bone-a); text-align: center; font-size: var(--fs-cap); }
@media (max-width: 767px) { :root { --dock-h: calc(76px + env(safe-area-inset-bottom, 0px)); } }