/* ==========================================================================
   GREEN & GRAVEL
   pages.css — section layouts. Composition changes from section to section on
   purpose: nothing here repeats the same left-right rhythm twice in a row.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Home — intro
   -------------------------------------------------------------------------- */

.intro { position: relative; }
.intro__head { grid-column: 1 / 6; }
.intro__body { grid-column: 7 / 12; padding-top: clamp(8px, 3vw, 60px); }
.intro__aside {
  grid-column: 2 / 6;
  margin-top: clamp(48px, 7vw, 110px);
}
.intro__tall {
  grid-column: 8 / 13;
  margin-top: clamp(-60px, -4vw, 0px);
}

@media (max-width: 860px) {
  .intro__head, .intro__body, .intro__aside, .intro__tall { grid-column: 1 / -1; }
  .intro__aside { margin-top: 40px; }
  .intro__tall { margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   2. Home — services

   Left: a list of four services. Right: one sticky frame whose image changes
   with the active service. On narrow screens the sticky frame is dropped and
   each service carries its own image instead.
   -------------------------------------------------------------------------- */

.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); }

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

.svc__row {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 24px;
  padding-block: clamp(28px, 3vw, 42px);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: padding-left 0.6s var(--ease-out);
}
/* The indent is a hover response. On touch every row is equal, and the
   default active row must not sit out of line with the rest. */
@media (hover: hover) and (pointer: fine) {
  .svc__row:hover, .svc__row.is-on { padding-left: 12px; }
}

.svc__ico { grid-row: span 2; color: var(--muted); transition: color 0.4s var(--ease); }
.svc__row.is-on .svc__ico { color: var(--olive); }

.svc__name {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.1;
}
.svc__txt {
  grid-column: 2;
  margin-top: 10px;
  max-width: 40ch;
  font-size: 0.9375rem;
  color: var(--muted);
}
.svc__go {
  align-self: center;
  grid-row: span 2;
  width: 42px; height: 42px;
  display: grid;
  place-content: center;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: transform 0.35s var(--ease-out), background-color 0.3s var(--ease),
              border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.svc__row:hover .svc__go, .svc__row.is-on .svc__go {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  transform: translateX(4px);
}

.svc__stage {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  height: min(78vh, 720px);
}
.svc__stage .media {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.75s var(--ease-out), transform 1.1s var(--ease-out);
}
.svc__stage .media.is-on { opacity: 1; transform: none; }

.svc__inline { display: none; margin-top: 20px; grid-column: 1 / -1; }

@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr; }
  .svc__stage { display: none; }
  .svc__inline { display: block; }
  .svc__row { grid-template-columns: 40px minmax(0, 1fr) auto; }
}

/* --------------------------------------------------------------------------
   3. Home — featured projects, asymmetric
   -------------------------------------------------------------------------- */

.feat__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.feat__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(52px, 8vw, 120px);
}
.feat__grid > :nth-child(1) { grid-column: 1 / 9; }
.feat__grid > :nth-child(2) { grid-column: 9 / 13; align-self: end; }
.feat__grid > :nth-child(3) { grid-column: 3 / 10; }
.feat__grid > :nth-child(4) { grid-column: 10 / 13; align-self: center; }

@media (max-width: 860px) {
  .feat__grid > * { grid-column: 1 / -1 !important; }
}

/* --------------------------------------------------------------------------
   4. Home — comparison feature
   -------------------------------------------------------------------------- */

.compare { background: var(--night); color: var(--on-night); }
.compare__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.compare__head > :first-child { grid-column: 1 / 7; }
.compare__head > :last-child { grid-column: 8 / 13; }
@media (max-width: 860px) {
  .compare__head > * { grid-column: 1 / -1 !important; }
  .compare__head { gap: 24px; }
}

/* --------------------------------------------------------------------------
   5. Landscaping — sticky service scroller
   -------------------------------------------------------------------------- */

.scroller { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--gutter); }

.scroller__rail {
  position: sticky;
  top: calc(var(--nav-h) + 48px);
  align-self: start;
  padding-block: 12px;
}
.scroller__rail li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 9px;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--muted);
  opacity: 0.45;
  transition: opacity 0.5s var(--ease), color 0.5s var(--ease),
              transform 0.6s var(--ease-out);
}
.scroller__rail li.is-on {
  opacity: 1;
  color: var(--ink);
  transform: translateX(10px);
}
.scroller__rail .num { transition: opacity 0.4s var(--ease); opacity: 0; }
.scroller__rail li.is-on .num { opacity: 1; }

.scroller__panels { display: grid; gap: clamp(64px, 10vw, 150px); }
.scroller__panel { display: grid; gap: 24px; }
.scroller__panel h3 { display: none; }

@media (max-width: 900px) {
  .scroller { grid-template-columns: 1fr; }
  .scroller__rail { display: none; }
  .scroller__panel h3 {
    display: block;
    font-size: clamp(1.4rem, 5vw, 1.9rem);
    font-weight: 500;
    letter-spacing: -0.026em;
  }
  .scroller__panels { gap: 56px; }
}

/* --------------------------------------------------------------------------
   6. Landscaping — pinned before / during / after sequence

   The section is tall; inside it a sticky viewport holds three frames that
   travel sideways as the page scrolls. Driven by --seq (0 to 1).
   -------------------------------------------------------------------------- */

.seq { --seq: 0; position: relative; height: 320vh; }
.seq__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--night);
  color: var(--on-night);
}
.seq__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: clamp(20px, 3vw, 34px);
}
.seq__track {
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
  padding-inline: var(--gutter);
  transform: translate3d(calc(var(--seq) * -66.6%), 0, 0);
  will-change: transform;
}
.seq__item { flex: 0 0 min(58vw, 900px); }
.seq__item .media { background: var(--night-2); }
.seq__bar {
  margin-top: clamp(18px, 2.6vw, 30px);
  height: 1px;
  background: var(--night-line);
  position: relative;
}
.seq__bar i {
  position: absolute;
  inset: 0;
  background: var(--on-night);
  transform: scaleX(calc(0.333 + var(--seq) * 0.667));
  transform-origin: left center;
}

@media (max-width: 860px) {
  .seq { height: auto; }
  .seq__pin { position: static; height: auto; padding-block: var(--sp-section); }
  .seq__track { transform: none; flex-direction: column; }
  .seq__item { flex: none; }
}

/* Nothing is pinned and nothing travels sideways if movement is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .seq { height: auto; }
  .seq__pin { position: static; height: auto; padding-block: var(--sp-section); }
  .seq__track { transform: none !important; flex-direction: column; }
  .seq__item { flex: none; }
  .seq__bar i { transform: scaleX(1) !important; }
  .seasons__stage { position: static; height: 62svh; }
  .seasons__flow { margin-top: 0; }
  .season { min-height: 0; padding-block: var(--sp-block); color: var(--ink); }
  .seasons__stage .media { opacity: 1; }
  .seasons__stage .media ~ .media { display: none; }
}

/* --------------------------------------------------------------------------
   7. Garden Care — seasons

   One frame stays put while four blocks of text scroll past it. The frame
   cross-fades between seasons as each block takes over.
   -------------------------------------------------------------------------- */

.seasons { position: relative; }
.seasons__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--night);
}
.seasons__stage .media {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.seasons__stage .media.is-on { opacity: 1; }
/* Tinted to the active season rather than a flat black. With photography
   behind it this reads as a wash over the picture; with a placeholder it is
   the season itself. */
.seasons__scrim {
  position: absolute;
  inset: 0;
  background: var(--s-scrim, rgba(12, 14, 9, 0.44));
  transition: background-color 0.9s var(--ease);
}

.seasons__flow { position: relative; margin-top: -100svh; }
.season {
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--s-scrim-ink, var(--on-night));
  transition: color 0.9s var(--ease);
}
.season .lede,
.season .label {
  color: var(--s-scrim-mu, var(--on-night-mu));
  transition: color 0.9s var(--ease);
}
.season .season__n { color: var(--s-scrim-ink, var(--on-night)); transition: color 0.9s var(--ease); }
.season__box { max-width: 34rem; }
.season:nth-child(even) .season__box { margin-left: auto; }
.season__n {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.8rem, 6.4vw, 5rem);
  line-height: 1;
  letter-spacing: -0.036em;
}

@media (max-width: 700px) {
  .season__box { max-width: none; }
  .season:nth-child(even) .season__box { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   8. Garden Care — care list with icons
   -------------------------------------------------------------------------- */

/* Rows, not a grid of boxes. Seven services never divide evenly into an
   auto-fit grid, and a row list reads faster anyway. */
.care { border-top: 1px solid var(--line); }

.care__item {
  display: grid;
  grid-template-columns: 62px minmax(170px, 1fr) minmax(0, 1.9fr);
  align-items: center;
  gap: 6px 32px;
  padding-block: clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.55s var(--ease-out);
}
.care__item:hover { padding-left: 14px; }
.care__item .ricon { color: var(--stone); transition: color 0.45s var(--ease); }
.care__item:hover .ricon { color: var(--olive); }
.care__item h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.022em;
}
.care__item p { font-size: 0.9375rem; color: var(--muted); max-width: 46ch; }

@media (max-width: 700px) {
  .care__item { grid-template-columns: 46px minmax(0, 1fr); gap: 4px 20px; align-items: start; }
  .care__item .ricon { grid-row: span 2; width: 38px; height: 38px; }
  .care__item p { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   9. Seasonal
   -------------------------------------------------------------------------- */

/* Warm light that follows the pointer. Kept low opacity so it reads as
   lighting rather than a novelty effect. */
.glow {
  position: relative;
  isolation: isolate;
}
.glow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 214, 150, 0.16),
    rgba(255, 214, 150, 0) 70%
  );
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.glow.is-on::after { opacity: 1; }
/* Lift only the content. A blanket `.glow > *` would also catch the video
   layer and the scrim, which are absolutely positioned behind it. */
.glow > .vsec__inner,
.glow > .glow__content { position: relative; z-index: 1; }

/* Full-bleed bands, each carrying its own season's ground. They tile with no
   gap between them, so the page reads as a year passing rather than a stack
   of coloured boxes. */
.season-band { padding-block: clamp(56px, 7vw, 104px); }

.season-band__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 28px;
  align-items: center;
}
.season-band__media { grid-column: 1 / 6; }
.season-band__body { grid-column: 7 / 12; }
.season-band--flip .season-band__media { grid-column: 8 / 13; order: 2; }
.season-band--flip .season-band__body { grid-column: 2 / 7; order: 1; }

/* The fact rows inside a band follow the season, not the page. */
.season-band .split-media__list,
.season-band .split-media__list li { border-color: var(--s-line); }
.season-band .split-media__list span:last-child { color: var(--s-muted); }

@media (max-width: 860px) {
  .season-band__media, .season-band__body,
  .season-band--flip .season-band__media,
  .season-band--flip .season-band__body {
    grid-column: 1 / -1;
    order: initial;
  }
}

/* --------------------------------------------------------------------------
   10. Projects index
   -------------------------------------------------------------------------- */

.pbar {
  position: sticky;
  top: var(--nav-h);
  z-index: 300;
  padding-block: 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.pbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.pbar__count { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   11. Project detail
   -------------------------------------------------------------------------- */

.pmeta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px var(--gutter);
  padding-block: clamp(28px, 3vw, 40px);
  border-block: 1px solid var(--line);
}
.pmeta__k { display: block; margin-bottom: 8px; }
.pmeta__v { font-size: 1.0625rem; letter-spacing: -0.012em; }

.pgallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--gutter);
}
.pgallery > * { grid-column: span 6; }
.pgallery > :nth-child(3n + 1) { grid-column: span 12; }
@media (max-width: 700px) { .pgallery > * { grid-column: span 12 !important; } }

.pnext {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.pnext__body { grid-column: 1 / 7; }
.pnext__media { grid-column: 8 / 13; }
@media (max-width: 860px) {
  .pnext__body, .pnext__media { grid-column: 1 / -1; }
  .pnext__media { margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   12. About
   -------------------------------------------------------------------------- */

.story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(36px, 5vw, 64px);
}
.story__lead { grid-column: 1 / 7; }
.story__text { grid-column: 8 / 13; align-self: end; }
.story__wide { grid-column: 1 / 13; }
.story__off { grid-column: 4 / 10; }
@media (max-width: 860px) { .story > * { grid-column: 1 / -1 !important; } }

.traits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--line);
}
.trait {
  padding-block: clamp(26px, 3vw, 38px);
  padding-right: 20px;
  border-bottom: 1px solid var(--line);
}
.trait__n { display: block; margin-bottom: 14px; }
.trait__t { font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   13. Quote flow
   -------------------------------------------------------------------------- */

.quote {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.qrail { position: sticky; top: calc(var(--nav-h) + 40px); }
.qrail__steps { margin-top: 32px; border-top: 1px solid var(--line); }
.qrail__steps li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--muted);
  opacity: 0.5;
  transition: opacity 0.4s var(--ease), color 0.4s var(--ease);
}
.qrail__steps li.is-on { opacity: 1; color: var(--ink); }
.qrail__steps li.is-done { opacity: 1; }
.qrail__tick {
  width: 14px; height: 14px;
  flex: none;
  border: 1px solid var(--line);
  position: relative;
}
.qrail__steps li.is-done .qrail__tick { background: var(--olive); border-color: var(--olive); }
.qrail__steps li.is-done .qrail__tick::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 6px; height: 3px;
  border-left: 1.4px solid var(--paper);
  border-bottom: 1.4px solid var(--paper);
  transform: rotate(-45deg);
}

.qbar { height: 2px; background: var(--line); margin-top: 22px; }
.qbar i {
  display: block;
  height: 100%;
  background: var(--olive);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform 0.6s var(--ease-out);
}

.qstage { position: relative; min-height: 60svh; }

.qstep { display: none; }
.qstep.is-live { display: block; }
.qstep.is-live > * {
  animation: qin 0.6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.qstep.is-back > * { animation-name: qin-back; }
@keyframes qin { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes qin-back { from { opacity: 0; transform: translate3d(0, -18px, 0); } }

.qstep__head { margin-bottom: 32px; }
.qstep__title { margin-top: 12px; }

.qnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.qnav__hint { font-size: 0.8125rem; color: var(--muted); }

/* Photo upload */
.drop {
  position: relative;
  display: grid;
  place-items: center;
  gap: 12px;
  padding: clamp(36px, 6vw, 64px) 24px;
  border: 1px dashed var(--stone);
  background: var(--paper-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.drop:hover, .drop.is-over { border-color: var(--olive); background: #fff; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop__t { font-size: 1rem; font-weight: 500; }

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.shot { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-3); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot button {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  display: grid;
  place-content: center;
  background: rgba(18, 20, 14, 0.72);
  color: var(--paper);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  transition: background-color 0.3s var(--ease);
}
.shot button:hover { background: var(--ink); }

/* Review list on the final step */
.review { border-top: 1px solid var(--line); }
.review__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.5fr) minmax(0, 1fr) auto;
  gap: 12px 24px;
  padding-block: 15px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.review__v { font-size: 0.9375rem; }
.review__v.is-empty { color: var(--stone); }
.review__edit {
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.review__edit:hover { color: var(--ink); border-color: var(--ink); }

.qdone { display: none; }
.qdone.is-live { display: block; }

.form-note {
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  font-size: 0.875rem;
  color: var(--muted);
}
.form-note.is-bad { border-color: var(--timber); color: var(--ink); }

.qrail__foot { margin-top: 26px; }

@media (max-width: 900px) {
  /* The rail dissolves so its parts can be reordered around the step: title
     and progress above, the reset controls below. */
  /* gap: 0, or the column gap lands between every unwrapped rail child */
  .quote { display: flex; flex-direction: column; gap: 0; }
  .qrail { display: contents; }
  .qrail > * { order: 1; }
  .qrail__steps { display: none; }
  .qstage { order: 2; margin-top: 30px; }
  .qrail__foot { order: 3; margin-top: 36px; }
  .qnav {
    position: sticky;
    bottom: 0;
    background: var(--paper);
    padding-bottom: 16px;
    margin-top: 32px;
  }
}

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */

.cta__inner { max-width: 44rem; }
.cta__title { max-width: 14ch; }

/* ==========================================================================
   PAGE IDENTITIES

   Every page used to open with the same video hero and close with the same
   dark CTA band, which made clicking between them feel like changing the copy
   rather than changing the page. Each page now has its own opening, its own
   closing, and one section that exists nowhere else on the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Split hero — Landscaping
   Type on paper at the left, full-height image at the right. No scrim, no
   overlay: this page is about what is under the surface, so the opening is
   drawn rather than filmed.
   -------------------------------------------------------------------------- */

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  min-height: 90svh;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.hero-split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + clamp(40px, 5vw, 72px))
           clamp(32px, 4vw, 72px)
           clamp(40px, 5vw, 72px)
           max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.hero-split__title { max-width: 13ch; }
.hero-split__lede { margin-top: 26px; max-width: 44ch; }
.hero-split .btn-row { margin-top: 38px; }

.hero-split__media { position: relative; overflow: hidden; }
.hero-split__media .media { position: absolute; inset: 0; height: 100%; }
/* Pinned to the top. The photograph is already cropped to end below his head,
   so whatever the frame's shape does, everything above it stays in view. */
.hero-split__media .media > img { object-position: 50% 0%; }

/* Measured strip under the copy: the page states its own numbers up front. */
.hero-split__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(28px, 3vw, 52px);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.hero-split__fact { display: grid; gap: 5px; }
.hero-split__fact b {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__body { padding: calc(var(--nav-h) + 36px) var(--gutter) 44px; }
  /* Same reasoning as the band hero: the picture sets the scene, but the
     promise and the way to reply have to be on the first screen. */
  .hero-split__media { height: clamp(300px, 46svh, 420px); order: -1; }
}

/* Kicker over the home hero: the two halves never break mid-phrase, only at
   the slash, which is what a 390px screen needs. */
.hero__kicker span { white-space: nowrap; }
.hero__kicker i { font-style: normal; margin: 0 0.6em; opacity: 0.6; }
@media (max-width: 620px) {
  .hero__kicker { flex-direction: column; gap: 5px; text-align: center; }
  .hero__kicker::before, .hero__kicker i { display: none; }
}

/* --------------------------------------------------------------------------
   B. Band hero — Garden Care
   A wide horizontal strip of image with the heading sitting underneath it on
   paper. Lighter and calmer than a full-bleed video, which is the point of
   this page.
   -------------------------------------------------------------------------- */

.hero-band { padding-top: var(--nav-h); }
.hero-band__media {
  position: relative;
  height: clamp(300px, 46svh, 540px);
  overflow: hidden;
}
.hero-band__media .media { position: absolute; inset: -8% 0; height: 116%; }

/* Three panels rather than one photograph. A hairline between them and a
   different parallax rate on each, so the strip reads as a set of shots taken
   on the same day rather than one wide picture cut into thirds. */
.hero-band__media--trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.hero-band__media--trio .media {
  position: relative;
  inset: auto;
  height: 100%;
}
/* The overscan moves to the image, since the panel itself now has to hold its
   place in the grid. */
.hero-band__media--trio .media > img {
  position: absolute;
  inset: -9% 0;
  width: 100%;
  height: 118%;
}

/* On a phone the lead shot takes the full width and the other two share the
   row beneath it. */
@media (max-width: 860px) {
  /* Short enough that the headline and the first action are both above the
     fold on a phone. Somebody arriving from a search has to see what this is
     and how to reply without scrolling. */
  .hero-band__media { height: clamp(240px, 34svh, 360px); }
  .hero-band__media--trio {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.15fr 0.85fr;
  }
  .hero-band__media--trio .media:first-child { grid-column: 1 / -1; }
  /* The mower sits right of centre in the second shot; keep it in the crop. */
  .hero-band__media--trio .media:nth-child(2) > img { object-position: 62% 50%; }
}

/* Two photographs, half the strip each, shown at their own scale: no overscan
   and no parallax, so the crop is only what the strip's height forces. */
.hero-band__media--duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
.hero-band__media--duo .media { position: relative; inset: auto; height: 100%; }
.hero-band__media--duo .media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: 50% 50%; }
@media (max-width: 860px) {
  .hero-band__media--duo { height: clamp(360px, 52svh, 520px); }
  .hero-band__media--duo { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  /* The squatter phone rows crop top and bottom; keep the head in the first. */
  .hero-band__media--duo .media:first-child > img { object-position: 50% 22%; }
}

.hero-band__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  padding-block: clamp(40px, 5vw, 72px);
}
.hero-band__body > :first-child { grid-column: 1 / 8; }
.hero-band__body > :last-child { grid-column: 9 / 13; }

@media (max-width: 860px) {
  .hero-band__body > * { grid-column: 1 / -1 !important; }
  .hero-band__body { gap: 26px; }
}

/* ---- The garden care booking form --------------------------------------

   The list of jobs is the form. Ticking one is the first half of the enquiry,
   so there is no separate step between deciding and asking. */

.book {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
.book__set { border: 0; padding: 0; margin: 0; }
.book__set .opts { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
/* Seven tiles never fill the last row cleanly, so the last one takes what is
   left rather than leaving a hole in the grid. */
.book__set .opt:last-child { grid-column: 1 / -1; }
.book__phone {
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--muted);
}
.book__phone a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* The thank-you takes the whole width once the fields are out of the way. */
.book__done { grid-column: 1 / -1; max-width: 46ch; }
.book__done a { text-decoration: underline; text-underline-offset: 3px; }

/* On the pages where the form stands on its own it runs as one column with a
   reading measure, rather than a two-column grid with nothing in the other half. */
.book--solo { grid-template-columns: minmax(0, 760px); }

@media (max-width: 860px) {
  .book { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   C. Night page — Seasonal
   The whole page runs dark, not just one band. Landing on it should feel like
   walking outside after dark rather than reading another paper page.
   -------------------------------------------------------------------------- */

.night-page { background: var(--night); color: var(--on-night); }
.night-page .lede,
.night-page .body,
.night-page .label,
.night-page .media-cap,
.night-page .step__d { color: var(--on-night-mu); }
.night-page .step__n { color: var(--stone); }
.night-page .rule,
.night-page .steps,
.night-page .step,
.night-page .linelist,
.night-page .linelist li,
.night-page .season-band { border-color: var(--night-line); }
.night-page .section--sand { background: var(--night-2); }
.night-page .h-1,
.night-page .h-2,
.night-page .display { color: var(--on-night); }
.night-page .arrow-link { color: var(--on-night); }
.night-page .btn { border-color: rgba(244, 241, 233, 0.4); color: var(--on-night); }
.night-page .btn::before { background: var(--on-night); }
.night-page .btn:hover { color: var(--ink); border-color: var(--on-night); }
.night-page .btn--fill { background: var(--moss); border-color: var(--moss); color: var(--night); }
.night-page .btn--fill::before { background: var(--on-night); }
.night-page .btn--fill:hover { color: var(--night); }

/* Tall type-led opening for the night page */
.hero-night {
  position: relative;
  min-height: 86svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-night__inner {
  position: relative;
  width: 100%;
  padding-top: calc(var(--nav-h) + 100px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.hero-night__title { max-width: 18ch; }
.hero-night__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  margin-top: clamp(36px, 4vw, 60px);
  padding-top: 24px;
  border-top: 1px solid var(--night-line);
}
.hero-night__grid > :first-child { grid-column: 1 / 6; }
.hero-night__grid > :last-child { grid-column: 7 / 13; }
@media (max-width: 860px) {
  .hero-night__grid > * { grid-column: 1 / -1 !important; }
  .hero-night__grid { gap: 20px; }
}

/* --------------------------------------------------------------------------
   D. Index head — Projects
   No hero at all. The page states what it is and gets straight to the work,
   with a figure row instead of a picture.
   -------------------------------------------------------------------------- */

.index-head { padding-top: calc(var(--nav-h) + clamp(56px, 7vw, 104px)); }
.index-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px var(--gutter);
  margin-top: clamp(40px, 5vw, 68px);
  padding-top: 26px;
  border-top: 1px solid var(--ink);
}
.index-figure b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1;
}
.index-figure span { display: block; margin-top: 8px; }

/* --------------------------------------------------------------------------
   E. Reading page — About
   One column at a comfortable measure. Everywhere else on this site is
   asymmetric and multi-column, so a plain centred read is the distinct move.
   -------------------------------------------------------------------------- */

.read { max-width: 46rem; margin-inline: auto; }
.read > * + * { margin-top: 26px; }
.read .body { max-width: none; font-size: 1.125rem; line-height: 1.66; }
.read__lead {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.32;
  letter-spacing: -0.026em;
  color: var(--ink);
}
.read__rule { margin-block: clamp(36px, 4vw, 56px); }
.read h2 { margin-top: clamp(40px, 5vw, 60px); }
.read ul.body { padding-left: 1.2em; list-style: disc; }
.read ul.body li + li { margin-top: 10px; }
.read figure { margin-block: clamp(36px, 4vw, 56px); }
.read figcaption { margin-top: 12px; }

/* --------------------------------------------------------------------------
   F. Build-up — Landscaping only
   A cross-section through a finished surface. This is the page's technical
   drawing, and it is the argument the whole page is making: the layers you
   cannot see are the ones that decide how long it lasts.
   -------------------------------------------------------------------------- */

.buildup { display: grid; gap: 0; border-top: 1px solid var(--ink); }

.buildup__layer {
  display: grid;
  grid-template-columns: minmax(200px, 0.9fr) 48px minmax(120px, 0.7fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 10px clamp(20px, 2.4vw, 36px);
  padding-block: 9px;
  border-bottom: 1px solid var(--line);
}
.buildup__layer + .buildup__layer .buildup__band { margin-top: -9px; }

.buildup__band {
  position: relative;
  height: var(--h, 40px);
  background: var(--tone, var(--paper-3));
  overflow: hidden;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out) var(--d, 0ms);
}
.buildup.is-in .buildup__band { transform: scaleX(1); }
.buildup__band::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background-image: var(--hatch);
}

/* Each layer is hatched the way it would be on a section drawing. */
.buildup__band[data-fill='surface'] {
  --hatch: radial-gradient(circle at 30% 40%, rgba(22,24,15,.85) 0 1.4px, transparent 1.5px),
           radial-gradient(circle at 72% 68%, rgba(22,24,15,.85) 0 1.9px, transparent 2px),
           radial-gradient(circle at 12% 80%, rgba(22,24,15,.7) 0 1.1px, transparent 1.2px);
  background-size: 10px 10px, 14px 14px, 7px 7px;
}
.buildup__band[data-fill='surface']::after { opacity: 0.55; }
.buildup__band[data-fill='membrane'] {
  --hatch: repeating-linear-gradient(0deg, rgba(244,241,233,.7) 0 1px, transparent 1px 4px);
}
.buildup__band[data-fill='base'] {
  --hatch: repeating-linear-gradient(-38deg, rgba(22,24,15,.45) 0 1px, transparent 1px 7px);
}
.buildup__band[data-fill='formation'] {
  --hatch: repeating-linear-gradient(38deg, rgba(244,241,233,.35) 0 1px, transparent 1px 9px);
}

.buildup__t { font-family: var(--display); font-weight: 600; letter-spacing: -0.024em; }
.buildup__d { font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.buildup__depth {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .buildup__layer {
    grid-template-columns: minmax(0, 1fr) 52px;
    padding-block: 14px;
  }
  .buildup__band { grid-column: 1 / -1; }
  .buildup__d { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   G. Year strip — Garden Care only
   Twelve months across, with the work marked against them. Cyclical, which is
   what this page is about, and unlike anything else on the site.
   -------------------------------------------------------------------------- */

.year {
  --cols: 12;
  display: grid;
  grid-template-columns: minmax(196px, 1.05fr) repeat(var(--cols), minmax(0, 1fr));
  column-gap: 3px;
  border-top: 1px solid var(--ink);
}

.year__head { display: contents; }
.year__month {
  padding-block: 12px 14px;
  text-align: center;
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.year__corner { border-bottom: 1px solid var(--line); }
.year__month abbr { text-decoration: none; border: 0; cursor: help; }

.year__row { display: contents; }
.year__label {
  padding: 14px 24px 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.year__label .ricon { width: 32px; height: 32px; flex: none; color: var(--stone); }
.year__cell {
  border-bottom: 1px solid var(--line);
  padding-block: 14px;
  display: flex;
  align-items: center;
}
.year__bar {
  width: 100%;
  height: 10px;
  background: var(--paper-3);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out) var(--d, 0ms);
}
.year.is-in .year__bar { transform: scaleX(1); }
.year__cell[data-on='full'] .year__bar { background: var(--olive); }
.year__cell[data-on='light'] .year__bar { background: var(--moss); opacity: 0.5; }
.year__row:hover .year__label { color: var(--ink); }

.year__key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 20px;
}
.year__key span { display: inline-flex; align-items: center; gap: 9px; }
.year__key i { width: 22px; height: 10px; display: block; }

/* On a phone the twelve-column grid stops being readable, so each service
   becomes a row with its months named instead. */
.year--mobile { display: none; border-top: 1px solid var(--ink); }
.year--mobile li {
  display: grid;
  gap: 4px;
  padding-block: 15px;
  border-bottom: 1px solid var(--line);
}
.year--mobile b { font-family: var(--display); font-weight: 600; font-size: 0.9375rem; }
.year--mobile span { font-size: 0.875rem; color: var(--muted); }

@media (max-width: 900px) {
  .year, .year__key { display: none; }
  .year--mobile { display: block; }
}

/* --------------------------------------------------------------------------
   H. Closing blocks

   Five variants so no two pages end the same way.
   -------------------------------------------------------------------------- */

/* Split close: heading left, contact details set large at the right. */
.close-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 40px;
  align-items: start;
  padding-block: clamp(72px, 9vw, 128px);
}
.close-split__body { grid-column: 1 / 7; }
.close-split__contact { grid-column: 8 / 13; }
.close-split__contact a {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  padding-block: 14px;
  border-bottom: 1px solid var(--night-line);
  transition: padding-left 0.4s var(--ease-out);
}
.close-split__contact a:hover { padding-left: 12px; }
@media (max-width: 860px) {
  .close-split__body, .close-split__contact { grid-column: 1 / -1; }
}

/* Paper close: light, so not every page ends on a dark band. */
.close-paper {
  background: var(--paper-2);
  padding-block: clamp(72px, 9vw, 124px);
  border-top: 1px solid var(--line);
}
.close-paper__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 32px;
  align-items: end;
}
.close-paper__body { grid-column: 1 / 8; }
.close-paper__act { grid-column: 9 / 13; justify-self: end; text-align: right; }
@media (max-width: 860px) {
  .close-paper__body, .close-paper__act { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

/* Ruled close: an outlined block, used on the night page. */
.close-ruled {
  margin-block: clamp(48px, 6vw, 88px);
  padding: clamp(36px, 5vw, 72px);
  border: 1px solid var(--night-line);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 32px;
  align-items: center;
}
.close-ruled__body { grid-column: 1 / 8; }
.close-ruled__act { grid-column: 9 / 13; justify-self: end; }
.close-ruled__note { margin-top: 16px; font-size: 0.875rem; color: var(--on-night-mu); }
@media (max-width: 860px) {
  .close-ruled__body, .close-ruled__act { grid-column: 1 / -1; justify-self: start; }
}

/* Rule close: a single hairline and a large link. The quietest ending. */
.close-line {
  padding-block: clamp(64px, 8vw, 110px);
  border-top: 1px solid var(--ink);
}
.close-line__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.036em;
  line-height: 1.05;
  transition: padding-left 0.45s var(--ease-out);
}
.close-line__link:hover { padding-left: 14px; }
.close-line__t { font: inherit; letter-spacing: inherit; margin: 0; }
.close-line__link span:last-child { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* Reading-page head and close — About only. Centred on the measure, which is
   the opposite of every other page on the site. */
.read-head {
  padding-top: calc(var(--nav-h) + clamp(56px, 7vw, 100px));
  padding-bottom: clamp(32px, 4vw, 52px);
  text-align: center;
}
.read-head h1 { max-width: 20ch; margin-inline: auto; }

.close-centre {
  padding-block: clamp(72px, 9vw, 124px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.close-centre__inner { max-width: 40rem; margin-inline: auto; }
.close-centre__tel {
  display: inline-block;
  margin-top: clamp(28px, 3.4vw, 44px);
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.036em;
  border-bottom: 2px solid var(--line);
  padding-bottom: 6px;
  transition: border-color 0.3s var(--ease);
}
.close-centre__tel:hover { border-color: var(--ink); }

/* --------------------------------------------------------------------------
   I. About me — home page

   One block, and only one. The personal history belongs here and on the About
   page, not threaded through every service description.
   -------------------------------------------------------------------------- */

.meet { row-gap: 32px; align-items: center; }
.meet__media { grid-column: 1 / 5; }
.meet__body  { grid-column: 6 / 12; }

@media (max-width: 860px) {
  .meet__media, .meet__body { grid-column: 1 / -1; }
  .meet__media { max-width: 320px; }
}

/* --------------------------------------------------------------------------
   K. Work — home page

   The portfolio strip and the before/after used to be two separate sections.
   They are one now, on a dark ground, because they are both doing the same
   job: showing the work. The grid is deliberately regular here rather than
   the editorial offsets used on the projects page — a portfolio wants to look
   ordered, not art-directed.
   -------------------------------------------------------------------------- */

.work { background: var(--night); color: var(--on-night); }

.work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.work__compare { margin-bottom: clamp(48px, 6vw, 88px); }
.work .ba-tools .label,
.work .media-cap { color: var(--on-night-mu); }
.work .arrow-link { color: var(--on-night); }

/* Regular two-column grid. No spans, no drops. */
.work__grid.feat__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: clamp(36px, 4.5vw, 60px);
}
.work__grid.feat__grid > * { grid-column: auto !important; align-self: start !important; }
.work__grid .pcard { margin-top: 0 !important; }

/* Card chrome has to flip for the dark ground */
.work__grid .pcard__body { border-top-color: var(--night-line); }
.work__grid .pcard__title { color: var(--on-night); }
.work__grid .pcard__meta,
.work__grid .pcard__go { color: var(--on-night-mu); }
.work__grid .media { background: var(--night-2); }

@media (max-width: 760px) {
  .work__grid.feat__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   L. Review scroller — home page, high up

   Reviews are what people look for first, so this sits directly under the
   hero. It never moves on its own: the visitor drags, swipes, or uses the
   arrows. Autoplaying testimonials are unreadable and everyone ignores them.
   -------------------------------------------------------------------------- */

.rscroll { position: relative; }

.rscroll__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(84vw, 340px), 25rem);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.rscroll__track::-webkit-scrollbar { display: none; }
.rscroll__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rscroll__track:focus-visible { outline: 2px solid var(--olive); outline-offset: 6px; }

.rcard {
  scroll-snap-align: start;
  display: grid;
  align-content: space-between;
  gap: 26px;
  padding: 28px 26px;
  background: var(--paper-2);
  min-height: 15rem;
}
.rcard__q {
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}
.rcard__by { display: grid; gap: 3px; }
.rcard__name { font-family: var(--display); font-weight: 600; font-size: 0.9375rem; }
.rcard__meta { font-size: 0.8125rem; color: var(--muted); }
.rcard__src { margin-top: 6px; }

.rscroll__nav { display: flex; gap: 8px; margin-top: 22px; }

@media (hover: none) {
  .rscroll__nav { display: none; }   /* swiping is the control on touch */
}

/* --------------------------------------------------------------------------
   M. Reviews page
   -------------------------------------------------------------------------- */

.rgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.rfull {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px);
  background: var(--paper);
}
.rfull__q { font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }
.rfull__by { display: grid; gap: 3px; margin-top: auto; }
.rfull__name { font-family: var(--display); font-weight: 600; font-size: 0.9375rem; }
.rfull__meta { font-size: 0.8125rem; color: var(--muted); }
.rfull__src { margin-top: 8px; }

/* --------------------------------------------------------------------------
   N. Halloween and Christmas

   Both restrained on purpose. A glow and a slow drift read as expensive; a
   bouncing pumpkin does not. Everything here stops under reduced motion.
   -------------------------------------------------------------------------- */

.season-feature {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 132px);
  border-top: 1px solid var(--night-line);
}
.season-feature__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 36px;
  align-items: center;
}
.season-feature__body { grid-column: 1 / 7; }
.season-feature__media { grid-column: 8 / 13; }
.season-feature__inner--flip .season-feature__body { grid-column: 7 / 13; order: 2; }
.season-feature__inner--flip .season-feature__media { grid-column: 1 / 6; order: 1; }

@media (max-width: 860px) {
  .season-feature__body, .season-feature__media,
  .season-feature__inner--flip .season-feature__body,
  .season-feature__inner--flip .season-feature__media { grid-column: 1 / -1; order: initial; }
}

/* --------------------------------------------------------------------------
   The seasonal pages

   These two are allowed more voice than the rest of the site. Everything is
   driven by custom properties set on the page, so Halloween and Christmas are
   the same build in different paint.
   -------------------------------------------------------------------------- */

.hallo-page {
  --season: #f2913a;          /* the lit accent */
  --season-2: #b4500f;        /* its deeper partner */
  --season-ink: #140a04;      /* type that sits on the accent */
  --season-ground: #0e0b08;
}
.xmas-page {
  --season: #e8675b;
  --season-2: #57a866;
  --season-ink: #10100c;
  --season-ground: #0a0d0b;
}

/* The wordmark is the page. Christmas has a picture doing that job, so this
   brings Halloween's type up to the same presence. */
.hallo-page .display.d-1 { font-size: clamp(3.4rem, 9.5vw, 8.4rem); line-height: 0.92; }
.xmas-hero__img { width: min(100%, 1040px); }

/* Both heroes start higher up the page than the rest of the site: the claims
   underneath have to be on the first screen. */
.hallo-page .hero-night__inner,
.xmas-page .hero-night__inner { padding-top: calc(var(--nav-h) + 52px); }

/* A lamp that is not quite steady. */
.spook.spook {
  color: #f2913a;
  text-shadow:
    0 0 30px rgba(242, 145, 58, 0.5),
    0 0 80px rgba(226, 106, 20, 0.32),
    0 0 150px rgba(226, 106, 20, 0.18);
  animation: spook-flicker 7s ease-in-out infinite;
}
@keyframes spook-flicker {
  0%, 38%, 44%, 58%, 100% { opacity: 1; }
  41% { opacity: 0.86; }
  55% { opacity: 0.92; }
}
@media (prefers-reduced-motion: reduce) {
  .spook.spook { animation: none; }
}

/* ---- The claims, straight under the wordmark --------------------------- */

.sclaims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: clamp(30px, 3.6vw, 48px);
  border-top: 1px solid var(--night-line);
}
.sclaim {
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px);
  border-left: 1px solid var(--night-line);
  display: grid;
  gap: 6px;
  align-content: start;
}
.sclaim:first-child { border-left: 0; padding-left: 0; }
.sclaim b {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--season);
}
.sclaim span { font-size: 0.875rem; line-height: 1.5; color: var(--on-night-mu); }
@media (max-width: 700px) {
  .sclaim { border-left: 0; padding-left: 0; border-top: 1px solid var(--night-line); }
  .sclaim:first-child { border-top: 0; }
}

/* ---- The band: a moving line of everything the job involves ------------ */

.sband {
  background: var(--season);
  color: var(--season-ink);
  overflow: hidden;
  padding-block: clamp(12px, 1.4vw, 18px);
}
.sband__track {
  display: flex;
  width: max-content;
  animation: sband 38s linear infinite;
}
.sband__track span {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.6vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  padding-right: 0.55em;
  white-space: nowrap;
}
.sband__track i { font-style: normal; padding-right: 0.55em; opacity: 0.5; }
@keyframes sband { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sband__track { animation: none; }
}

/* Christmas alternates: red, green, red, green, the way a string of lights
   does. The claims, the step numerals and the stressed words in the headings
   all take turns. */
.xmas-page .sclaim:nth-child(odd) b,
.xmas-page .scard:nth-child(odd) .scard__n { color: #e8675b; }
.xmas-page .sclaim:nth-child(even) b,
.xmas-page .scard:nth-child(even) .scard__n { color: #57a866; }
.xmas-page .sstate__h em.is-green { color: #57a866; }

/* And the band is blocks of colour rather than one strip: green, white, red,
   white, repeating. The tones are deeper than the accents so the type on
   them still reads. */
.xmas-page .sband { background: var(--season-ground); padding-block: 0; }
.xmas-page .sband__track span {
  padding: clamp(12px, 1.4vw, 18px) 0.55em;
  margin: 0;
}
.sb--green { background: #2b6a3c; color: #f4f1e9; }
.sb--white { background: #f4f1e9; color: #10100c; }
.sb--red   { background: #b8382d; color: #f4f1e9; }

/* ---- Three steps as panels, not a long list ---------------------------- */

.sgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--night-line);
  border: 1px solid var(--night-line);
}
.scard {
  background: var(--season-ground);
  padding: clamp(26px, 3vw, 40px);
  display: grid;
  gap: 12px;
  align-content: start;
  transition: background-color 0.4s var(--ease);
}
.hallo-page .scard:hover { background: #16110c; }
.xmas-page .scard:hover { background: #101510; }
.scard__n {
  font-family: var(--display);
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--season);
}
.scard__t {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.026em;
}
.scard__d { font-size: 0.9375rem; line-height: 1.55; color: var(--on-night-mu); }

/* ---- The statement: type doing the work -------------------------------- */

.sstate {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: end;
}
.sstate__h {
  font-family: var(--display);
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.sstate__h em {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--season);
}
@media (max-width: 860px) {
  .sstate { grid-template-columns: 1fr; align-items: start; }
}

/* ---- Where the job stops ----------------------------------------------- */

.sterms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--night-line);
  border: 1px solid var(--night-line);
}
.sterm {
  background: var(--season-ground);
  padding: clamp(22px, 2.4vw, 32px);
  display: grid;
  gap: 10px;
  align-content: start;
}
.sterm b {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.024em;
}
.sterm span { font-size: 0.9375rem; line-height: 1.55; color: var(--on-night-mu); }

/* These pages sit closer together than the rest of the site: there is not
   much to say and it should not take four screens to say it. */
.season-tight { padding-block: clamp(44px, 5.2vw, 78px); }


/* ---- Halloween ---------------------------------------------------------- */

.hallo { background: #0e0b08; position: relative; --tier-bg: #0e0b08; }

/* Doubled so it beats .night-page .display, which would otherwise force this
   back to the page's off-white. */
.spook.spook {
  color: #f2913a;
  text-shadow: 0 0 26px rgba(242, 145, 58, 0.45), 0 0 68px rgba(226, 106, 20, 0.26);
}

/* The colony. Two layers, so the nearest bats can pass in front of the
   wordmark while the rest cross behind it. Positions, rotation and the
   wingbeat are all written by js/components/bats.js; everything here is the
   silhouette and the stage it flies across. */
.bats {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bats--back  { z-index: 1; }
.bats--front { z-index: 6; }
/* In the masthead they pass behind the row rather than over it. */
.masthead__inner { z-index: 2; }

.bat {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 48px;
  will-change: transform;
}
.bat svg { display: block; width: 120px; height: 48px; overflow: visible; }

/* Black, with the membrane a hair off the body so the wing still reads as a
   separate thing. The faint warm rim is there for the near-black sections:
   without it a black bat on a black ground is nothing at all. */
.bat__body { fill: #050506; }
.bat__wing path { fill: #0d0c10; }
.bat__body,
.bat__wing path { stroke: rgba(255, 176, 92, 0.15); stroke-width: 0.7; }
.bat__wing .bat__strut { fill: none; stroke: #241c14; stroke-width: 1.1; opacity: 0.55; }

/* Hinged at the shoulder, so the wing sweeps instead of the whole bat
   squashing. view-box lets the origin be given in the same units as the path. */
.bat__wing {
  transform-box: view-box;
  transform-origin: 62px 17px;
}

/* The seasonal heroes carry one paragraph rather than a grid, so it needs a
   measure of its own. */
.hero-night__lede {
  max-width: 46ch;
  margin-top: clamp(20px, 2.6vw, 32px);
}

/* ---- Store tiles -------------------------------------------------------

   A photograph, a name, a line, a price and a way to add it to the message.
   Hairline rule under the picture rather than a card: the site does not do
   floating boxes. */

.ptiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(28px, 3vw, 46px) var(--gutter);
}
.ptile__body { padding-top: 16px; border-top: 1px solid var(--line); margin-top: 16px; }
.ptile__t {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.024em;
}
.ptile__d { margin-top: 8px; font-size: 0.9375rem; color: var(--muted); }
.ptile__foot {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ptile__price { font-family: var(--display); font-weight: 600; }
/* An unset price is marked as unset rather than guessed at. */
.ptile__price--tbc {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-3);
  padding: 4px 8px;
}

/* The stressed word in "Personalised to YOUR house". Upright and in capitals,
   not italic: Archivo's italic is too soft for a heading this size, and the
   page's own accent colour does the emphasis better. The tracking is opened a
   touch because capitals set at display weight sit tight otherwise. */
.hallo .h-1 em,
.xmas-sec .h-1 em {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.hallo .h-1 em { color: #f2913a; }
.xmas-sec .h-1 em { color: #e8675b; }

/* ---- Seasonal packages --------------------------------------------------

   Three panels on a hairline grid, same construction as the option tiles but
   read-only. The cell background comes from a variable so the block sits on
   whichever night the page is using. */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 1px;
  background: var(--night-line);
  border: 1px solid var(--night-line);
}
.tier {
  background: var(--tier-bg, var(--night));
  padding: clamp(26px, 3vw, 38px);
  display: grid;
  align-content: start;
  gap: 14px;
}
.tier__t {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  letter-spacing: -0.026em;
}
.tier ul { display: grid; gap: 10px; font-size: 0.9375rem; color: var(--on-night-mu); }
.tier li { position: relative; padding-left: 18px; }
.tier li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.ulink { text-decoration: underline; text-underline-offset: 3px; }

.tiers-note { margin-top: 22px; color: var(--on-night-mu); }

/* A paper block at the foot of a night page has to put the ink back, and the
   night-page heading and button rules have to be undone with it. */
.night-page .close-paper { color: var(--ink); }
.night-page .close-paper .h-1,
.night-page .close-paper .h-2,
.night-page .close-paper .display { color: var(--ink); }
.night-page .close-paper .btn--fill { border-color: var(--olive); color: var(--paper); }
.night-page .close-paper .btn--fill::before { background: var(--olive); }
.night-page .close-paper .label,
.night-page .close-paper .body,
.night-page .close-paper .lede,
.night-page .close-paper .hint,
.night-page .close-paper .field .hint { color: var(--muted); }
.night-page .close-paper .book__phone { color: var(--muted); }
.night-page .close-paper .book__phone a { color: var(--ink); }

/* ---- The room: Christmas happens indoors --------------------------------

   One fixed layer behind the whole page: dark oak panelling, lit evenly
   edge to edge so the ground reads as one solid surface. The firelight and
   embers that used to play across it are kept in the markup but switched
   off below; the panels on the page go slightly transparent so the grain
   shows through them, like dark furniture against a dark wall. */

.xmas-page { background: #0c0906; }
.xmas-page .hero-night { background: transparent; }

.hearth {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hearth__wood {
  position: absolute;
  inset: -2%;
  background: #0c0906 url("../img/seasons/christmas-room.jpg") center / cover no-repeat;
}
/* The fire. Two glows at different rates so the flicker never repeats. */
.hearth__fire {
  position: absolute;
  left: -12%;
  bottom: -18%;
  width: 78vmax;
  height: 78vmax;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 70%,
    rgba(255, 150, 60, 0.42) 0%,
    rgba(232, 96, 40, 0.24) 26%,
    rgba(140, 50, 20, 0.10) 50%,
    transparent 70%);
  mix-blend-mode: screen;
  animation: fire-a 4.6s ease-in-out infinite;
  transform-origin: 30% 70%;
}
.hearth__fire--2 {
  width: 56vmax;
  height: 56vmax;
  background: radial-gradient(circle at 30% 70%,
    rgba(255, 190, 110, 0.30) 0%,
    rgba(240, 120, 50, 0.16) 30%,
    transparent 64%);
  animation: fire-b 2.9s ease-in-out infinite;
}
@keyframes fire-a {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  23%      { opacity: 1;    transform: scale(1.04); }
  41%      { opacity: 0.78; transform: scale(0.98); }
  67%      { opacity: 0.95; transform: scale(1.02); }
  82%      { opacity: 0.8;  transform: scale(0.99); }
}
@keyframes fire-b {
  0%, 100% { opacity: 0.7;  transform: scale(1); }
  31%      { opacity: 1;    transform: scale(1.06); }
  58%      { opacity: 0.6;  transform: scale(0.96); }
  77%      { opacity: 0.9;  transform: scale(1.03); }
}

/* Off: a solid, evenly lit wall, no glow moving across it. */
.hearth__fire, .hearth__embers { display: none; }

/* Embers: the snow component turned upside down and turned orange. */
.hearth__embers { position: absolute; inset: 0; }
.hearth__embers i {
  position: absolute;
  bottom: -2vh;
  width: var(--sz, 3px);
  height: var(--sz, 3px);
  border-radius: 50%;
  background: #ffb066;
  box-shadow: 0 0 6px 1px rgba(255, 150, 60, 0.7);
  opacity: 0;
  animation-name: ember;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes ember {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(1); }
  8%   { opacity: 0.9; }
  70%  { opacity: 0.5; }
  100% { opacity: 0;   transform: translate3d(var(--drift, 0px), -72vh, 0) scale(0.4); }
}

/* No veil: the photograph is dark enough on its own, and the firelight is
   the point of it. The trade is that small copy crossing the lit corner drops
   to 2.6:1 at 62% white, so on this page the secondary copy runs at full
   white and lets the smaller size do the quietening instead. */
.hearth__veil { display: none; }
.xmas-page .sclaim span,
.xmas-page .scard__d,
.xmas-page .sterm span,
.xmas-page .sstate .body,
.xmas-page .close-ruled__note { color: rgba(244, 241, 233, 0.9); }

/* Everything on the page sits above the room. */
.xmas-page > section,
.xmas-page > .sband { position: relative; z-index: 1; }

/* Panels let the grain show through, like furniture against the wall. */
.xmas-page .scard,
.xmas-page .sterm { background: rgba(12, 9, 6, 0.74); backdrop-filter: blur(2px); }
.xmas-page .scard:hover { background: rgba(20, 14, 9, 0.84); }
.xmas-page .sgrid,
.xmas-page .sterms { background: rgba(244, 241, 233, 0.12); border-color: rgba(244, 241, 233, 0.14); }
.xmas-page .sclaims, .xmas-page .sclaim { border-color: rgba(244, 241, 233, 0.16); }
.xmas-page .close-ruled { background: rgba(12, 9, 6, 0.55); }

/* The hero's film is still to come. Until it is, the placeholder panel would
   sit as a grey slab over the room, so it steps aside. */
.xmas-page .hero-night .vsec__media.is-pending { opacity: 0; }
.xmas-page .hero-night .vsec__scrim { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .hearth__fire { animation: none; }
  .hearth__embers { display: none; }
}

/* ---- Christmas ---------------------------------------------------------- */

.xmas-sec { background: transparent; --tier-bg: rgba(12, 9, 6, 0.74); }

/* The wordmark is artwork now: the word wrapped in lights, keyed off its
   white ground. It carries its own bulbs, so all the page adds is the glow
   they would throw. */
.xmas-hero {
  margin-top: clamp(26px, 3.2vw, 44px);
  line-height: 0;
}
.xmas-hero__img {
  display: block;
  width: min(100%, 940px);
  height: auto;
  filter:
    drop-shadow(0 0 5px rgba(255, 246, 224, 0.3))
    drop-shadow(0 0 18px rgba(226, 86, 74, 0.34))
    drop-shadow(0 0 30px rgba(87, 168, 102, 0.28));
  animation: xmas-glow 5s ease-in-out infinite;
}

@keyframes xmas-glow {
  0%, 100% {
    filter:
      drop-shadow(0 0 5px rgba(255, 246, 224, 0.3))
      drop-shadow(0 0 18px rgba(226, 86, 74, 0.34))
      drop-shadow(0 0 30px rgba(87, 168, 102, 0.28));
  }
  50% {
    filter:
      drop-shadow(0 0 8px rgba(255, 246, 224, 0.5))
      drop-shadow(0 0 26px rgba(226, 86, 74, 0.5))
      drop-shadow(0 0 44px rgba(87, 168, 102, 0.4));
  }
}

@media (prefers-reduced-motion: reduce) {
  .xmas-hero__img { animation: none; }
}

/* Snow only while the pointer is over the section. */
.snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  overflow: hidden;
  z-index: 1;
}
.xmas-sec:hover .snow { opacity: 1; }
.snow i {
  position: absolute;
  top: -12px;
  width: var(--sz, 3px);
  height: var(--sz, 3px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  animation-name: snowfall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes snowfall {
  to { transform: translate3d(var(--drift, 0px), 105vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bats { display: none; }
  .snow { display: none; }
}


/* In the two-column season layout the list sits in six columns, which is not
   enough for a title and a note side by side. Titles get the room instead. */
.season-feature .linelist li { gap: 22px; }
.season-feature /* A list whose titles are phrases rather than two words needs the room. */
.linelist--wide li { grid-template-columns: 44px minmax(190px, 0.8fr) minmax(0, 1.8fr); }

.linelist__t { flex: 1 1 auto; min-width: 0; }
.season-feature .linelist__d { flex: 0 1 auto; text-align: right; white-space: nowrap; }
@media (max-width: 620px) {
  .season-feature .linelist li { flex-wrap: wrap; }
  .season-feature .linelist__d { white-space: normal; text-align: left; }
}

/* A linelist row with no note should give its width to the title. Otherwise
   the grid keeps a third column for a note that is not there and the title
   wraps at 180px. */
.linelist li:not(:has(.linelist__d)) { grid-template-columns: 44px minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   P. Quick booking — home page

   The short path. Calendar on the left, three fields on the right, no page
   change. The nine step form is still there for anyone who needs it.
   -------------------------------------------------------------------------- */

.qb {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.qb__cal .cal { margin-top: 22px; }
.qb__form { display: block; }
.qb__note {
  margin-top: 18px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}
.qb__note.is-bad { color: var(--timber); }
.qb__note a { border-bottom: 1px solid var(--line); }
.qb__alt {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}
.qb__alt .arrow-link { font-size: 0.875rem; margin-left: 4px; }
.qb__done { max-width: 34rem; }

/* The calendar carries its own note; inside the booking block it would say
   the same thing twice. */
.qb__cal .cal__note { display: none; }

@media (max-width: 900px) {
  .qb { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Q. Halloween and Christmas as their own pages

   The styled wordmark is the h1 on each, so it carries the page rather than
   sitting inside it.
   -------------------------------------------------------------------------- */

.hallo-page, .hallo-page .hero-night { background: #0e0b08; }
.xmas-page { background: #0c0906; }
.xmas-page .hero-night { background: transparent; }

/* Snow sits behind the copy, never over it */
.hero-night .snow { z-index: 0; }
.hero-night__inner { position: relative; z-index: 2; }
.xmas-sec .season-feature__inner { position: relative; z-index: 2; }



/* --------------------------------------------------------------------------
   R. Halloween and Christmas in the navigation

   The two seasonal buttons carry their own treatment so they read as
   something different before you click them. Halloween is type, lit orange
   over a dark hero, and hovering it sends a flight of bats across the bar.
   Christmas is a picture of the word itself.
   -------------------------------------------------------------------------- */

.mainnav a[href="halloween.html"],
.mainnav a[href="christmas.html"] { position: relative; overflow: visible; }

/* ---- Halloween: orange, with a glow that only shows on a dark ground ----- */

.mainnav a[href="halloween.html"] {
  color: #f2913a;
  text-shadow: 0 0 14px rgba(242, 145, 58, 0.55);
}
/* Over the paper of an open drawer the lit orange goes muddy, so it drops to
   the darker one with no glow. */
.masthead.is-menu .mainnav a[href="halloween.html"] {
  color: #b4500f;
  text-shadow: none;
}

/* ---- Christmas: the word itself, wound in lights ------------------------

   Artwork, not type: the word wrapped in bulbs, keyed off its white ground.
   The lettering is black, which reads on the cream bar but disappears over a
   dark hero, so there are two keys of the same picture and the bar's own state
   decides which one is showing. No plate either way. */

.mainnav a[href="christmas.html"] {
  flex: none;                 /* the sign is a picture: it must not be squeezed */
}

.nav-xmas {
  display: block;
  width: auto;
  max-width: none;
  /* The lettering is 83% of the picture's height, so this puts the word a
     shade above the cap height of the links either side of it. */
  height: 1.35em;
  filter:
    drop-shadow(0 0 4px rgba(226, 86, 74, 0.34))
    drop-shadow(0 0 8px rgba(87, 168, 102, 0.26));
  animation: xmas-sign-paper 4.4s ease-in-out infinite;
}
.nav-xmas--dark { display: none; }
.masthead.is-menu .nav-xmas--dark { display: block; }
.masthead.is-menu .nav-xmas--light { display: none; }
/* Lifted off a dark ground the lights also throw a little warm light. */
.masthead .nav-xmas {
  filter:
    drop-shadow(0 0 3px rgba(255, 246, 224, 0.5))
    drop-shadow(0 0 7px rgba(226, 86, 74, 0.48))
    drop-shadow(0 0 13px rgba(87, 168, 102, 0.36));
  animation-name: xmas-sign-night;
}
.masthead.is-menu .nav-xmas {
  filter:
    drop-shadow(0 0 4px rgba(226, 86, 74, 0.34))
    drop-shadow(0 0 8px rgba(87, 168, 102, 0.26));
  animation-name: xmas-sign-paper;
}
.mainnav a[href="christmas.html"]:hover .nav-xmas,
.mainnav a[href="christmas.html"]:focus-visible .nav-xmas { animation-duration: 1.8s; }

/* The glow breathes rather than blinks: a shop sign, not a fairground. One
   pair of keyframes per ground, because an animated filter would otherwise
   overwrite whichever one the bar's state had set. */
@keyframes xmas-sign-paper {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px rgba(226, 86, 74, 0.34))
      drop-shadow(0 0 8px rgba(87, 168, 102, 0.26));
  }
  50% {
    filter:
      drop-shadow(0 0 7px rgba(226, 86, 74, 0.5))
      drop-shadow(0 0 13px rgba(87, 168, 102, 0.38));
  }
}
@keyframes xmas-sign-night {
  0%, 100% {
    filter:
      drop-shadow(0 0 3px rgba(255, 246, 224, 0.5))
      drop-shadow(0 0 7px rgba(226, 86, 74, 0.48))
      drop-shadow(0 0 13px rgba(87, 168, 102, 0.36));
  }
  50% {
    filter:
      drop-shadow(0 0 5px rgba(255, 246, 224, 0.7))
      drop-shadow(0 0 11px rgba(226, 86, 74, 0.62))
      drop-shadow(0 0 20px rgba(87, 168, 102, 0.48));
  }
}

/* The drawer sits on paper, so it always shows the dark key. */
.nav-xmas__wrap .nav-xmas { height: 1.05em; }

/* A couple of flakes on hover, kept inside the button */
.mainnav a[href="christmas.html"]::after {
  content: '';
  position: absolute;
  left: 18%; top: -2px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fffdf7;
  opacity: 0;
  pointer-events: none;
}
.mainnav a[href="christmas.html"]:hover::after {
  animation: nav-flake 1.6s linear infinite;
}
@keyframes nav-flake {
  0%   { opacity: 0; transform: translate(0, 0); }
  20%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate(7px, 26px); }
}

@media (prefers-reduced-motion: reduce) {
  .mainnav a[href="christmas.html"]::after { display: none; }
  .nav-xmas { animation: none; }
}

/* The line that answers "will you do mine, then". It sits on its own under
   the list, centred in the space the two columns leave, and a size up from
   body copy because it is the only sentence in that half of the page. */
.ask {
  max-width: 44ch;
  margin: clamp(48px, 6vw, 88px) auto 0;
  text-align: center;
  text-wrap: pretty;
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  line-height: 1.46;
  letter-spacing: -0.016em;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Service pages

   Two pages, two jobs. Garden Care closes a small repeating sale on the page,
   so it leads with proof and price and ends in a form. Landscaping earns a
   site visit for a job worth thousands, so it leads with the argument and
   ends with evidence. The parts below are shared; the order they appear in is
   what makes the pages feel different.
   -------------------------------------------------------------------------- */

/* ---- Proof strip: the answer to "why you", two seconds after landing ---- */

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.proof__i {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: clamp(20px, 2.4vw, 30px) 0;
  padding-right: var(--gutter);
  border-left: 1px solid var(--line);
  padding-left: clamp(18px, 2vw, 28px);
}
.proof__i:first-child { border-left: 0; padding-left: 0; }
.proof__t {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  letter-spacing: -0.02em;
}
.proof__d { font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.is-dark .proof, .night-page .proof { border-color: var(--night-line); }
.is-dark .proof__i, .night-page .proof__i { border-left-color: var(--night-line); }
.night-page .proof__d { color: var(--on-night-mu); }

@media (max-width: 760px) {
  .proof { grid-template-columns: 1fr 1fr; }
  .proof__i:nth-child(odd) { border-left: 0; padding-left: 0; }
  .proof__i:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ---- The same tier grid, on paper -------------------------------------- */

.tiers--paper {
  background: var(--line);
  border-color: var(--line);
  --tier-bg: var(--paper);
}
.tiers--paper .tier ul { color: var(--muted); }
.tier__price {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.tier__price small {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
/* A price nobody has set yet is marked, never invented. */
.tier__price--tbc {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-3);
  padding: 5px 9px;
  justify-self: start;
}

/* ---- Two reviews, pulled onto the page --------------------------------- */

.pulls { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gutter); }
.pull { display: grid; gap: 16px; align-content: start; border-top: 1px solid var(--ink); padding-top: 22px; }
.pull__q {
  font-family: var(--display);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.018em;
}
.pull__w { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ---- Evidence: three finished jobs, dark band -------------------------- */

.evid-band { background: var(--night); color: var(--on-night); padding-block: clamp(60px, 7vw, 104px); }
.evid-band .label { color: var(--on-night-mu); }
.evid-band .arrow-link { color: var(--on-night); }
.evid-band .body--sm { color: var(--on-night-mu); }
.evid-band .h-1, .evid-band .display { color: var(--on-night); }
.evid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.evid .jtile { width: 100%; }

/* ---- Fault and fix: the groundwork argument, made scannable ------------ */

.fx { border-top: 1px solid var(--line); }
.fx__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 10px var(--gutter);
  padding-block: clamp(22px, 2.6vw, 32px);
  border-bottom: 1px solid var(--line);
}
.fx__bad {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  letter-spacing: -0.022em;
  color: var(--timber-ink);
}
.fx__good { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 700px) {
  .fx__row { grid-template-columns: 1fr; }
}

/* ---- A CTA that is a whole line, not a button in a corner -------------- */

.cta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
}
.cta-line__phone {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  /* a comfortable thumb target on a phone */
  padding-block: 10px;
}
.cta-line__note { font-size: 0.875rem; color: var(--muted); }
.night-page .cta-line__note, .evid-band .cta-line__note { color: var(--on-night-mu); }

/* --------------------------------------------------------------------------
   The gallery

   A wall of jobs on a dark page. The tile is the photograph; the writing sits
   under it and only comes up on hover, so the grid reads as pictures rather
   than as a list with pictures attached.
   -------------------------------------------------------------------------- */

.gallery-page { background: var(--night); color: var(--on-night); }
.gallery-page .close-line { border-top-color: var(--night-line); }
.gallery-page .close-line__link span:last-child { color: var(--on-night-mu); }

.jgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

.jtile {
  position: relative;
  display: block;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: transform 0.5s var(--ease-out), z-index 0s;
  transform: translateZ(0);
}
.jtile .media { transition: box-shadow 0.5s var(--ease); }

/* The lift. Scaling the tile lets it climb over its neighbours, which is the
   point: the one under the pointer is the one you are looking at. */
@media (hover: hover) and (pointer: fine) {
  .jtile:hover,
  .jtile:focus-visible {
    transform: scale(1.075);
    z-index: 3;
  }
  .jtile:hover .media,
  .jtile:focus-visible .media {
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  }
  .jtile:hover .jtile__meta,
  .jtile:focus-visible .jtile__meta { opacity: 1; transform: none; }
}
.jtile:focus-visible { outline: 2px solid var(--on-night); outline-offset: 6px; }

.jtile__meta {
  display: grid;
  gap: 3px;
  padding-top: 12px;
}
/* The writing only steps back where there is a pointer to bring it forward
   again. On a touch screen it stays legible. */
@media (hover: hover) and (pointer: fine) {
  .jtile__meta {
    opacity: 0.62;
    transform: translateY(-4px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease-out);
  }
}
.jtile__t {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
}
.jtile__l {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-night-mu);
}

/* ---- One job's set, over the top of the grid --------------------------- */

.jview {
  position: fixed;
  inset: 0;
  z-index: 520;
  background: var(--night);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: clamp(60px, 8vw, 110px);
  opacity: 0;
  transition: opacity 0.36s var(--ease);
}
.jview.is-open { opacity: 1; }

.jview__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gutter);
  padding-top: clamp(26px, 3.4vw, 46px);
  padding-bottom: clamp(22px, 2.6vw, 34px);
  background: var(--night);
  border-bottom: 1px solid var(--night-line);
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.jview__head .label { color: var(--on-night-mu); }
.jview__head .h-1 { margin-top: 10px; }
.jview__more { margin-top: clamp(30px, 3.4vw, 44px); }
.jview__more .arrow-link { color: var(--on-night); }

/* Finished / Before. A job that has both leads with the finished work, and the
   before shots sit one press away rather than mixed in with them. */
.jswitch {
  display: flex;
  align-self: center;
  margin-left: auto;
  margin-right: 18px;
  border: 1px solid var(--night-line);
}
.jswitch__b {
  padding: 11px 18px;
  color: var(--on-night-mu);
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.jswitch__b + .jswitch__b { border-left: 1px solid var(--night-line); }
.jswitch__b:hover { color: var(--on-night); }
.jswitch__b.is-on { background: var(--on-night); color: var(--night); }
.jswitch__b:focus-visible { outline: 2px solid var(--on-night); outline-offset: -3px; }

/* The back arrow, top right. */
.jback {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--night-line);
  color: var(--on-night);
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.jback:hover { border-color: var(--on-night); background: rgba(244, 241, 233, 0.06); }
.jback__arrow { display: block; transition: transform 0.4s var(--ease-out); }
.jback:hover .jback__arrow { transform: translateX(-4px); }

/* One photograph at a time. The track is a scroll container with snap points,
   so the arrows, the keyboard and a swipe all drive the same thing. */
.jstage { padding-inline: var(--gutter); }
.jtrack {
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jtrack::-webkit-scrollbar { display: none; }
.jtrack:focus-visible { outline: 2px solid var(--on-night); outline-offset: 4px; }

.jslide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.jslide .media {
  height: min(62svh, 720px);
  background: rgba(244, 241, 233, 0.04);
}
/* Contain, not cover: a gallery shows the whole photograph, whatever shape it
   was shot in. */
.jslide .media > img { object-fit: contain; }

.jview__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px var(--gutter);
  padding-top: clamp(20px, 2.4vw, 30px);
}
.jcap { font-size: 0.9375rem; color: var(--on-night-mu); }

.jnav { display: flex; align-items: center; gap: 14px; }
.jcount {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--on-night-mu);
  min-width: 6ch;
  text-align: center;
}
.jarrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 46px;
  border: 1px solid var(--night-line);
  color: var(--on-night);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.jarrow:hover:not(:disabled) { border-color: var(--on-night); background: rgba(244, 241, 233, 0.06); }
.jarrow:disabled { opacity: 0.28; cursor: default; }
.jarrow:focus-visible { outline: 2px solid var(--on-night); outline-offset: 3px; }

.jview__more { grid-column: 1 / -1; margin-top: clamp(18px, 2vw, 26px); }

@media (max-width: 700px) {
  .jgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .jtile__t { font-size: 0.875rem; }
  .jtile__l { font-size: 0.6875rem; letter-spacing: 0.06em; }
  .jview__bar { flex-direction: column; align-items: flex-start; gap: 18px; }
  .jswitch { margin: 0; align-self: flex-start; }
  .jslide .media { height: min(52svh, 460px); }
  .jview__foot { grid-template-columns: 1fr; }
  .jnav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .jtile, .jview, .jback__arrow { transition: none; }
}

/* --------------------------------------------------------------------------
   S. How it works

   Dark, so it separates from the paper sections on either side. The numerals
   are the graphic element rather than decoration bolted on, a rail threads
   them together, and the free steps are tagged so the offer is visible at a
   glance instead of buried in a sentence.
   -------------------------------------------------------------------------- */

.howto { background: var(--night); color: var(--on-night); }

.howto__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 26px var(--gutter);
  align-items: end;
  margin-bottom: clamp(44px, 5.5vw, 76px);
}
.howto__head .body { max-width: 36ch; color: var(--on-night-mu); }

.howto__body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.7fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

.howto__list { position: relative; }
/* the rail the numbers sit on */
.howto__list::before {
  content: '';
  position: absolute;
  left: clamp(30px, 3vw, 42px);
  top: 18px; bottom: 42px;
  width: 1px;
  background: var(--night-line);
}

.howto__row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(74px, 7vw, 100px) minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px clamp(18px, 2.4vw, 32px);
  padding-block: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--night-line);
}
.howto__row--last { border-bottom: 0; }

.howto__n {
  display: block;
  overflow: hidden;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--moss);
  /* sit the numeral on the rail rather than beside it */
  background: var(--night);
  padding-right: 14px;
}
.howto__n span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.howto__row.is-in .howto__n span { transform: none; }
.howto__row--last .howto__n { color: var(--on-night); }

.howto__t {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.2;
}
.howto__d {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--on-night-mu);
  max-width: 46ch;
}

.howto__tag {
  align-self: center;
  padding: 6px 12px;
  border: 1px solid var(--moss);
  color: var(--moss);
  font-family: var(--display);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.howto__aside .media { background: var(--night-2); }
.howto__phone {
  margin-top: 16px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--on-night-mu);
}
.howto__phone a { border-bottom: 1px solid var(--night-line); padding-bottom: 2px; }
.howto__phone a:hover { border-color: var(--on-night); }

@media (max-width: 960px) {
  .howto__head, .howto__body { grid-template-columns: 1fr; }
  .howto__aside { max-width: 24rem; }
}
@media (max-width: 620px) {
  .howto__row { grid-template-columns: 58px minmax(0, 1fr); }
  .howto__tag { grid-row: 1; grid-column: 2; justify-self: end; }
  .howto__txt { grid-column: 2; }
  .howto__list::before { left: 26px; }
}

/* Time choice, shown once a day is picked. Chunks rather than ten hourly
   buttons: the exact time gets settled on the confirmation call anyway. */
.qb__times { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.qb__slots { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 16px; background: var(--line); border: 1px solid var(--line); }
.qb__slot {
  flex: 1 1 auto;
  min-width: 96px;
  padding: 14px 18px;
  background: var(--paper);
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.qb__slot:hover { background: var(--paper-2); }
.qb__slot.is-on { background: var(--olive); color: var(--paper); }
.qb__slot:focus-visible { outline: 2px solid var(--olive); outline-offset: -2px; }

/* --------------------------------------------------------------------------
   Garden Care: the jobs, and pictures of them
   List on the left, the clip on the right at its own 16:9, never cropped:
   the frame is the video's frame. The list drops its numbers here, since
   seven jobs are a set, not a sequence.
   -------------------------------------------------------------------------- */

.jobs {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.jobs__list  { grid-column: 1 / 6; }
.jobs__media { grid-column: 7 / 13; }
.jobs .linelist li { grid-template-columns: minmax(0, 1fr); }
.jobs__clip > video { object-fit: contain; }

/* The photo under the pricing label, in the left column the heading leaves
   empty. Hidden on narrow screens where it would push the heading down. */
.tiers__pic { margin-top: clamp(22px, 2.6vw, 36px); max-width: 520px; }

@media (max-width: 900px) {
  .jobs__list, .jobs__media { grid-column: 1 / -1; }
  .jobs__media { margin-top: clamp(28px, 5vw, 44px); }
  .tiers__pic { display: none; }
}

/* --------------------------------------------------------------------------
   Home, reordered: about / four ways in / four jobs / get in touch
   -------------------------------------------------------------------------- */

/* The about split is read top-aligned, not centred: the heading should sit
   level with the top of the photograph. */
.split-media--top { align-items: start; }
.split-media--top .split-media__body .body + .body { margin-top: 16px; }

/* Four ways in. A photo, a name, a line. No box round any of it: the photo
   is the edge. */
.ways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(14px, 1.8vw, 26px);
}
.way { display: block; color: inherit; text-decoration: none; }
.way__t {
  display: block;
  margin-top: 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  letter-spacing: -0.024em;
}
.way__d {
  display: block;
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 34ch;
}
.way:focus-visible { outline: 2px solid var(--olive); outline-offset: 6px; }
@media (max-width: 1000px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .ways { grid-template-columns: 1fr; } }

/* Four recent jobs in one even row. The featured grid is asymmetric by
   default; here every job gets the same frame. */
.works4.feat__grid {
  /* As many even columns as there are jobs, up to four. Two real jobs today
     sit side by side rather than leaving half a row empty. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  column-gap: clamp(14px, 1.8vw, 26px);
  row-gap: clamp(36px, 4.5vw, 60px);
}
.works4.feat__grid > * { grid-column: auto !important; align-self: start !important; }
.works4 .pcard { margin-top: 0 !important; }
.works4 .media { aspect-ratio: 4 / 3; }
@media (max-width: 1000px) { .works4.feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .works4.feat__grid { grid-template-columns: 1fr; } }

/* Get in touch. The ask on the left, the three ways to answer it on the
   right, each big enough to tap. */
.touch {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.touch__ask  { grid-column: 1 / 7; }
.touch__ways { grid-column: 8 / 13; display: grid; border-top: 1px solid var(--line); }
.touch__way {
  display: grid;
  gap: 8px;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
}
.touch__big {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.touch__big--sm { font-size: clamp(1.15rem, 1.7vw, 1.6rem); }
.touch__big:hover { color: var(--olive); }
.touch__social { display: flex; gap: 14px; }
.touch__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  color: var(--ink);
}
.touch__social a:hover { border-color: var(--olive); color: var(--olive); }
.touch__social svg { width: 22px; height: 22px; }
@media (max-width: 860px) {
  .touch__ask, .touch__ways { grid-column: 1 / -1; }
  .touch__ways { margin-top: clamp(32px, 6vw, 48px); }
}

/* --------------------------------------------------------------------------
   Christmas, cosier
   Everything here is flat: warmth comes from colour temperature, not from
   light moving across the page. A uniform amber cast on the wood, candle
   cream for the type, berry and holly for the accents, gold for the one
   button that matters, and a string of lights under the nav that stays
   with you down the page.
   -------------------------------------------------------------------------- */

.xmas-page {
  --xm-cream:    #f4e6cd;
  --xm-cream-mu: rgba(244, 230, 205, 0.82);
  --xm-berry:    #d9584a;
  --xm-holly:    #6faa66;
  --xm-gold:     #e3b86e;
  --xm-panel:    rgba(44, 27, 13, 0.80);
  --xm-panel-hi: rgba(54, 34, 17, 0.88);
  --xm-line:     rgba(227, 184, 110, 0.24);
  --xm-r:        5px;
  background: #1d120a;
  color: var(--xm-cream);
}

/* One even tint over the whole wall. */
.hearth__wood::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 138, 48, 0.09);
}
.xmas-page .hero-night .vsec__scrim { background: rgba(36, 18, 6, 0.5); }

/* Type: candle cream, never stark white. */
.xmas-page .h-1, .xmas-page .h-2, .xmas-page .display,
.xmas-page .scard__t, .xmas-page .sterm b, .xmas-page .sclaim b,
.xmas-page .sstate__h, .xmas-page .arrow-link { color: var(--xm-cream); }
.xmas-page .lede, .xmas-page .body, .xmas-page .label, .xmas-page .media-cap,
.xmas-page .sclaim span, .xmas-page .scard__d, .xmas-page .sterm span,
.xmas-page .sstate .body, .xmas-page .close-ruled__note { color: var(--xm-cream-mu); }
.xmas-page .label--rule::before { background: var(--xm-line); }

/* Accents: berry and holly take turns, as before, but deeper. */
.xmas-page .sclaim:nth-child(odd) b,
.xmas-page .scard:nth-child(odd) .scard__n,
.xmas-page .xmas-sec .h-1 em { color: var(--xm-berry); }
.xmas-page .sclaim:nth-child(even) b,
.xmas-page .scard:nth-child(even) .scard__n,
.xmas-page .sstate__h em.is-green { color: var(--xm-holly); }

/* Panels: warm brown glass with a soft edge, sitting on the wall. */
.xmas-page .sgrid, .xmas-page .sterms {
  gap: 12px;
  background: transparent;
  border: 0;
}
.xmas-page .scard, .xmas-page .sterm {
  background: var(--xm-panel);
  border: 1px solid var(--xm-line);
  border-radius: var(--xm-r);
  backdrop-filter: blur(3px);
}
.xmas-page .scard:hover { background: var(--xm-panel-hi); }
.xmas-page .close-ruled {
  background: var(--xm-panel);
  border: 1px solid var(--xm-line);
  border-radius: var(--xm-r);
}
.xmas-page .sclaims, .xmas-page .sclaim { border-color: var(--xm-line); }

/* Buttons: gold for the ask, cream outline for the rest. */
.xmas-page .btn {
  border-radius: var(--xm-r);
  border-color: rgba(244, 230, 205, 0.45);
  color: var(--xm-cream);
}
.xmas-page .btn::before { background: var(--xm-cream); }
.xmas-page .btn:hover { color: #2a1a0c; border-color: var(--xm-cream); }
.xmas-page .btn--fill { background: var(--xm-gold); border-color: var(--xm-gold); color: #2a1a0c; }
.xmas-page .btn--fill::before { background: var(--xm-cream); }
.xmas-page .btn--fill:hover { color: #2a1a0c; }

/* The band: berry, cream, holly, cream. Deeper than before, so it belongs
   to the room rather than shouting over it. */
.xmas-page .sband { background: transparent; }
.xmas-page .sb--red   { background: #8e2f26; color: var(--xm-cream); }
.xmas-page .sb--green { background: #2f5e39; color: var(--xm-cream); }
.xmas-page .sb--white { background: #e9d9b8; color: #2a1a0c; }

/* The wordmark's glow warms to match. */
.xmas-page .xmas-hero__img {
  filter:
    drop-shadow(0 0 5px rgba(255, 236, 200, 0.35))
    drop-shadow(0 0 18px rgba(217, 88, 74, 0.34))
    drop-shadow(0 0 30px rgba(227, 184, 110, 0.26));
}

/* A string of lights under the nav. Fixed with the room, so it hangs there
   the whole way down. Each bulb glows on its own small clock. */
.hearth__lights {
  position: absolute;
  top: calc(var(--nav-h) - 3px);
  left: -1%;
  right: -1%;
  height: 34px;
  border-top: 1.5px solid rgba(18, 10, 4, 0.9);
}
.hearth__lights i {
  --c: #ffd9a0;
  position: absolute;
  top: 5px;
  left: calc((var(--i) + 0.5) * (100% / 40));
  width: 7px;
  height: 13px;
  border-radius: 45% 45% 55% 55% / 35% 35% 65% 65%;
  background: var(--c);
  box-shadow: 0 0 8px 2px var(--c), 0 0 22px 4px color-mix(in srgb, var(--c) 45%, transparent);
  animation: bulb 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.53s);
  transform-origin: 50% 0;
}
.hearth__lights i::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 1.5px;
  width: 4px;
  height: 6px;
  background: #1a0f06;
  border-radius: 1px;
  box-shadow: none;
}
.hearth__lights i:nth-child(4n + 2) { --c: #ff6f5a; }
.hearth__lights i:nth-child(4n + 3) { --c: #ffc65c; }
.hearth__lights i:nth-child(4n + 4) { --c: #7ee07a; }
@keyframes bulb {
  0%, 100% { opacity: 0.86; }
  50%      { opacity: 1; }
  72%      { opacity: 0.78; }
}
@media (prefers-reduced-motion: reduce) {
  .hearth__lights i { animation: none; opacity: 0.95; }
}
@media (max-width: 700px) {
  .hearth__lights i:nth-child(odd) { display: none; }
  .hearth__lights i { left: calc((var(--i) + 0.5) * (100% / 40)); }
}

/* --------------------------------------------------------------------------
   Booking page: photos inside the short form
   -------------------------------------------------------------------------- */

.drop--tight { padding: clamp(22px, 3vw, 30px) 20px; gap: 6px; margin-top: 8px; }
.drop__s { font-size: 0.8125rem; color: var(--muted); }
.qb__snap { width: 100%; margin-top: 10px; }
.qb__shots-note { margin-top: 8px; font-size: 0.8125rem; color: var(--muted); min-height: 1em; }
.qb .shots { margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.qb .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .qb .field-row { grid-template-columns: 1fr; } }
.qb__what .qb__slots { margin-top: 0; }
.qb__what .field__err { display: none; margin-top: 8px; }
.qb__what.is-bad .field__err { display: block; }
.qb__what.is-bad .qb__slots { border-color: var(--timber); }


/* --------------------------------------------------------------------------
   Booking page: the confirmation
   The form and the page header go; this takes the whole page. A receipt of
   what was booked on the left, what happens next on the right.
   -------------------------------------------------------------------------- */

.qb__done { max-width: none; padding-top: var(--nav-h); }
.qb__done-head { max-width: 62rem; }
.qb__done-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(36px, 5vw, 64px);
  margin-top: clamp(44px, 6vw, 88px);
  align-items: start;
}
.qb__receipt { grid-column: 1 / 6; }
.qb__next    { grid-column: 7 / 13; }
.qb__facts { margin-top: 22px; border-top: 1px solid var(--line); }
.qb__facts > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1.4fr);
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}
.qb__facts dt { font-size: 0.875rem; color: var(--muted); }
.qb__facts dd { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.qb__steps { margin-top: 22px; border-top: 1px solid var(--line); }
.qb__steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.qb__steps .num { padding-top: 3px; }
.qb__steps b { display: block; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }
.qb__steps span:not(.num) { display: block; margin-top: 4px; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 860px) {
  .qb__receipt, .qb__next { grid-column: 1 / -1; }
}


/* --------------------------------------------------------------------------
   Christmas: the quote funnel
   The flyer's QR lands here. The page walks down in the order someone
   deciding would ask: what does it look like, what does it cost, how does it
   work, what goes up, what about power, then a form that prices it as they
   pick. Same room, same warm panels, same cream type as the rest of the page.
   -------------------------------------------------------------------------- */

.xnote { margin-top: 14px; font-size: 0.8125rem; color: var(--xm-cream-mu); }

/* ---- Examples: one big picture, four beside it ---- */
.xwork {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.xwork__item { margin: 0; }
.xwork__item--big { grid-column: span 2; grid-row: span 2; }
.xwork__item--big .media { aspect-ratio: auto; height: calc(100% - 44px); min-height: 280px; }
.xwork .media { border-radius: var(--xm-r); overflow: hidden; border: 1px solid var(--xm-line); }
.xwork figcaption { margin-top: 10px; font-size: 0.875rem; line-height: 1.4; color: var(--xm-cream-mu); }
.xwork figcaption b { font-family: var(--display); font-weight: 600; color: var(--xm-gold); margin-right: 6px; }
@media (max-width: 860px) {
  .xwork { grid-template-columns: 1fr 1fr; }
  .xwork__item--big { grid-column: 1 / -1; grid-row: auto; }
  .xwork__item--big .media { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
}

/* ---- Packages ---- */
.xpk { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.xpk__card {
  display: grid; align-content: start; gap: 16px;
  padding: clamp(24px, 2.8vw, 36px);
  background: var(--xm-panel); border: 1px solid var(--xm-line); border-radius: var(--xm-r);
  backdrop-filter: blur(3px);
}
.xpk__name {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  letter-spacing: -0.03em; color: var(--xm-cream);
}
.xpk__chip { width: 12px; height: 12px; border-radius: 50%; }
.xpk__chip--b { background: #b87545; } .xpk__chip--s { background: #b9bec4; } .xpk__chip--g { background: var(--xm-gold); }
.xpk__what { font-size: 0.9375rem; line-height: 1.55; color: var(--xm-cream-mu); min-height: 4.65em; }
.xpk__prices { margin: 0; border-top: 1px solid var(--xm-line); }
.xpk__prices div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--xm-line);
}
.xpk__prices dt { font-size: 0.875rem; color: var(--xm-cream-mu); }
.xpk__prices dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--xm-cream); }
.xpk__card .btn { justify-self: start; }

.xsizes { margin-top: 18px; font-size: 0.875rem; line-height: 1.6; color: var(--xm-cream-mu); max-width: 90ch; }
.xsizes b { color: var(--xm-cream); font-weight: 600; }

/* ---- Extras ---- */
.xextras {
  margin-top: clamp(28px, 3vw, 44px);
  padding: clamp(24px, 2.8vw, 36px);
  background: var(--xm-panel); border: 1px solid var(--xm-line); border-radius: var(--xm-r);
  backdrop-filter: blur(3px);
}
.xextras__t { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 1.8vw, 1.6rem); letter-spacing: -0.03em; color: var(--xm-cream); }
.xextras__head p { margin-top: 6px; font-size: 0.9375rem; color: var(--xm-cream-mu); }
.xextras__head b { color: var(--xm-gold); font-weight: 600; }
.xextras__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 64px); margin-top: 20px; }
.xextras li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--xm-line);
  font-size: 0.9375rem; color: var(--xm-cream);
}
.xextras li b { font-family: var(--display); font-weight: 600; color: var(--xm-gold); white-space: nowrap; }
.xextras li.xextras__grp {
  padding-top: 0; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--xm-holly); border-bottom-color: rgba(111, 170, 102, 0.45);
}
@media (max-width: 700px) {
  .xextras__cols { grid-template-columns: 1fr; }
  .xextras__cols ul + ul { margin-top: 18px; }
}

/* Four steps sit in a row on a wide screen, two by two below that. */
.xsteps { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---- Kit: eight short panels ---- */
.xkit { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---- Next year ---- */
.xnext {
  padding: clamp(30px, 4vw, 56px);
  border-radius: var(--xm-r);
  background: #2f5e39;
  border: 1px solid rgba(244, 230, 205, 0.18);
}
.xnext__h {
  margin-top: 16px;
  font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.02; letter-spacing: -0.04em; color: var(--xm-cream); text-wrap: balance;
}
.xnext__h em { font-style: normal; color: var(--xm-gold); }
.xnext__b { margin-top: 16px; max-width: 58ch; font-size: 1.0625rem; line-height: 1.55; color: var(--xm-cream-mu); }
.xnext__b b { color: var(--xm-gold); font-weight: 600; }
.xmas-page .xnext .label { color: var(--xm-cream-mu); }

/* ---- Power: what to buy if there is no outdoor socket ---- */
.xpower {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding: clamp(24px, 2.8vw, 36px);
  background: var(--xm-panel); border: 1px solid var(--xm-line); border-radius: var(--xm-r);
  backdrop-filter: blur(3px);
}
.xpower__h { margin-top: 12px; font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 1.8vw, 1.6rem); letter-spacing: -0.03em; color: var(--xm-cream); }
.xpower__copy > p:last-child { margin-top: 10px; font-size: 0.9375rem; line-height: 1.6; color: var(--xm-cream-mu); max-width: 60ch; }
.xpower__buy {
  display: grid; gap: 6px;
  padding: 22px 24px;
  border-radius: var(--xm-r);
  background: var(--xm-cream); color: #2a1a0c;
  transition: transform 0.35s var(--ease-out), background-color 0.3s var(--ease);
}
.xpower__buy:hover { transform: translateY(-2px); background: #fbf1de; }
.xpower__buy-t { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em; }
.xpower__buy-s { font-size: 0.875rem; color: rgba(42, 26, 12, 0.72); }
.xpower__buy-go { margin-top: 6px; font-weight: 600; font-size: 0.9375rem; color: #8e2f26; }
@media (max-width: 860px) { .xpower { grid-template-columns: 1fr; } }

/* ---- The quote form, on paper ---- */
.xq {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.xq__step { border: 0; padding: 0; margin: 0 0 clamp(30px, 3.4vw, 44px); min-width: 0; }
.xq__step legend {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 0; margin-bottom: 16px;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 1.6vw, 1.45rem); letter-spacing: -0.026em;
}
.xq__step legend .num { font-size: 0.875rem; color: var(--muted); }
.xq__step legend .hint { font-family: var(--sans); font-weight: 400; font-size: 0.8125rem; letter-spacing: 0; color: var(--muted); }
.xq__step .field__err { margin-top: 8px; }
.xq__step.is-bad .field__err { display: block; }
.xq__step.is-bad .opts { border-color: var(--timber); }
.xq__opts { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.xq__opts .opt { padding: 18px; }
.xq__opts .opt__t small { display: block; margin-top: 2px; font-size: 0.8125rem; opacity: 0.72; }
.xq__q { margin: 20px 0 10px; font-size: 0.9375rem; font-weight: 500; }
.xq__q:first-of-type { margin-top: 0; }

.xq__extras { border-top: 1px solid var(--line); }
.xq__extras li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; align-items: center; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.xq__extras label { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 0.9375rem; }
.xq__extras label small { color: var(--muted); font-size: 0.8125rem; }
.xq__extras input[type='checkbox'], .xq__tick input { width: 18px; height: 18px; accent-color: var(--olive); flex: none; }
.xq__extras b { font-family: var(--display); font-weight: 600; font-size: 0.9375rem; }
.xq__extras select {
  grid-column: 3; width: 72px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--r-input); background: var(--paper); color: var(--ink); font-size: 0.9375rem;
}
.xq__extras li:not(:has(input:checked)) select { opacity: 0.35; }
.xq__tick { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 0.9375rem; cursor: pointer; }
.xq__file { font-size: 0.875rem; }

/* The running estimate follows you down the form on a wide screen. */
.xq__side { position: sticky; top: calc(var(--nav-h) + 28px); }
.xest { padding: clamp(22px, 2.4vw, 30px); background: var(--paper-2); border: 1px solid var(--line); }
.xest__lines { margin-top: 14px; border-top: 1px solid var(--line); }
.xest__lines li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.875rem;
}
.xest__lines li span:last-child { font-weight: 600; white-space: nowrap; }
.xest__lines li.is-off span:last-child { color: var(--olive); }
.xest__empty { color: var(--muted); }
.xest__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  margin-top: 16px; font-size: 0.9375rem;
}
.xest__total b { font-family: var(--display); font-weight: 600; font-size: 2rem; letter-spacing: -0.03em; }
.xest__fine { margin-top: 10px; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.xest .btn { margin-top: 20px; }
.xest .form-note { margin-top: 12px; }
.xest__phone { margin-top: 14px; font-size: 0.875rem; color: var(--muted); }
.xest__phone a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.xq__done { grid-column: 1 / -1; }
.xq.is-sent .xq__main, .xq.is-sent .xq__side { display: none; }

@media (max-width: 960px) {
  .xq { grid-template-columns: 1fr; }
  .xq__side { position: static; }
}

/* ---- Phone: a bar that keeps the form in reach ---- */
.xbar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px 12px 18px;
  border-radius: var(--xm-r);
  background: rgba(29, 18, 10, 0.94); border: 1px solid var(--xm-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  color: var(--xm-cream); font-size: 0.875rem;
  transform: translateY(0); transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease);
}
.xbar b { padding: 10px 16px; border-radius: var(--xm-r); background: var(--xm-gold); color: #2a1a0c; font-weight: 600; white-space: nowrap; }
.xbar.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (min-width: 861px) { .xbar { display: none; } }
/* An odd tile out takes the whole last row rather than leaving a hole. */
.xq__opts .opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 700px) { .xq__opts .opt:last-child:nth-child(odd) { grid-column: auto; } }
/* The gold button keeps dark type on the paper block too. */
.xmas-page .close-paper .btn--fill { background: var(--xm-gold); border-color: var(--xm-gold); color: #2a1a0c; }
.xmas-page .close-paper .btn--fill::before { background: var(--xm-cream); }


/* --------------------------------------------------------------------------
   Christmas: snow and pine
   Snow-white ground, deep pine green, amber C9 bulbs (the same ones as the
   flyer) and Fraunces for the headings. No wood. The artwork is drawn by
   _tools/make-christmas-art.py into assets/img/christmas/. The page reads its
   colours from the --xm-* variables, so the pine blocks (hero, packages,
   estimate) just set them back to cream-on-dark inside themselves.
   -------------------------------------------------------------------------- */

.xsnow {
  --xm-snow:  #f7f6f2;
  --xm-pine:  #1f3a2b;
  --xm-pine-2:#28483a;
  --xm-pine-deep: #132a1e;
  --xm-amber: #f2a531;
  --xm-red:   #a8352b;
  --xm-holly: #2f6a45;
  --xm-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  --xm-cream:    #1b2a20;
  --xm-cream-mu: rgba(27, 42, 32, 0.74);
  --xm-gold:     var(--xm-holly);
  --xm-panel:    #ffffff;
  --xm-panel-hi: #ffffff;
  --xm-line:     rgba(31, 58, 43, 0.14);
  background: var(--xm-snow);
  color: var(--xm-cream);
}
.xsnow .xhero, .xsnow .xpk__card, .xsnow .xnext, .xsnow .xest, .xsnow .xpower__buy, .xsnow .xbar {
  --xm-cream:    #f5efe2;
  --xm-cream-mu: rgba(245, 239, 226, 0.8);
  --xm-gold:     var(--xm-amber);
  --xm-line:     rgba(245, 239, 226, 0.18);
}

/* The old room, its fairy lights and the band are gone. */
.xsnow .hearth { display: none; }
body:has(.xsnow) .masthead::before { background: #1f3a2b; border-bottom-color: rgba(245, 239, 226, 0.12); }

/* A string of amber C9s hangs under the bar the whole way down. */
body:has(.xsnow)::after {
  content: '';
  position: fixed; left: 0; right: 0; top: calc(var(--nav-h) - 20px); height: 50px; z-index: 499;
  pointer-events: none;
  background: url("../img/christmas/c9-string.svg") 0 0 / auto 50px repeat-x;
}

/* ---- Hero ---------------------------------------------------------------- */
.xsnow .xhero {
  position: relative; overflow: hidden;
  min-height: 0;
  padding: calc(var(--nav-h) + clamp(96px, 12vw, 170px)) 0 clamp(150px, 16vw, 230px);
  background:
    radial-gradient(120% 70% at 70% 10%, rgba(242, 165, 49, 0.12), transparent 60%),
    linear-gradient(180deg, var(--xm-pine-deep), var(--xm-pine) 70%);
  color: var(--xm-cream);
}
.xhero__swag {
  position: absolute; top: calc(var(--nav-h) + 20px); left: 50%; transform: translateX(-50%);
  width: max(1400px, 104vw); max-width: none; pointer-events: none;
}
.xhero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 80px); align-items: center;
}
.xhero__kicker { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--xm-cream-mu); }
.xhero__h {
  margin-top: 18px;
  font-family: var(--xm-serif); font-weight: 600; font-optical-sizing: auto;
  font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: 0.98; letter-spacing: -0.03em;
  color: var(--xm-cream); text-wrap: balance;
}
.xhero__h em {
  display: block; font-style: italic; font-weight: 500; color: var(--xm-amber);
  text-shadow: 0 0 28px rgba(242, 165, 49, 0.35);
}
.xhero__lede { margin-top: 22px; max-width: 44ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; color: var(--xm-cream-mu); }
.xhero__photo { margin: 0; position: relative; transform: rotate(1.5deg); }
.xhero__photo img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 10px solid #fff; border-bottom-width: 44px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
}
.xhero__photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 11px; text-align: center;
  font-family: var(--xm-serif); font-style: italic; font-size: 1rem; color: var(--xm-pine);
}
.xhero__claims { position: relative; z-index: 2; margin-top: clamp(40px, 5vw, 64px); }
.xsnow .xhero .sclaims, .xsnow .xhero .sclaim { border-color: rgba(245, 239, 226, 0.16); }
.xsnow .xhero .sclaim b { color: var(--xm-amber); font-family: var(--xm-serif); font-weight: 600; letter-spacing: -0.01em; }
.xsnow .xhero .sclaim span { color: var(--xm-cream-mu); }
.xhero__trees {
  position: absolute; left: 0; bottom: -1px; z-index: 1;
  width: 100%; height: clamp(120px, 15vw, 220px); object-fit: cover; object-position: bottom;
  pointer-events: none;
}
@media (max-width: 900px) {
  .xhero__inner { grid-template-columns: 1fr; }
  .xhero__photo { max-width: 520px; }
  .xhero__swag { width: 900px; top: calc(var(--nav-h) + 10px); }
}

/* ---- Type: Fraunces for the headings, italic for the stressed words ---- */
.xsnow .sstate__h, .xsnow .h-1, .xsnow .xnext__h, .xsnow .xextras__t, .xsnow .xpower__h, .xsnow .xpk__name, .xsnow .scard__t {
  font-family: var(--xm-serif); letter-spacing: -0.02em;
}
.xsnow .sstate__h { font-weight: 600; color: var(--xm-cream); }
.xsnow .sstate__h em, .xsnow .xmas-sec .h-1 em, .xsnow .close-paper .h-1 em {
  font-style: italic; text-transform: none; letter-spacing: -0.02em; font-weight: 500; color: var(--xm-red);
}
.xsnow .sstate__h em.is-green { color: var(--xm-holly); }
.xsnow .lede, .xsnow .body, .xsnow .label { color: var(--xm-cream-mu); }
.xsnow .label--rule::before { background: rgba(31, 58, 43, 0.3); }
.xsnow .scard__n { font-family: var(--xm-serif); font-style: italic; font-weight: 500; }
.xsnow .scard:nth-child(odd) .scard__n { color: var(--xm-red); }
.xsnow .scard:nth-child(even) .scard__n { color: var(--xm-holly); }
.xsnow .scard__t, .xsnow .sterm b { color: var(--xm-cream); }
.xsnow .scard__d, .xsnow .sterm span { color: var(--xm-cream-mu); }

/* ---- White cards on snow --------------------------------------------- */
.xsnow .scard, .xsnow .sterm, .xsnow .xextras, .xsnow .xpower {
  background: #fff; border: 1px solid var(--xm-line); border-radius: 10px;
  box-shadow: 0 14px 34px -24px rgba(31, 58, 43, 0.35);
  backdrop-filter: none;
}
.xsnow .scard:hover { background: #fff; }

/* ---- Buttons ---------------------------------------------------------- */
.xsnow .btn { border-radius: 999px; border-color: rgba(31, 58, 43, 0.4); color: var(--xm-pine); }
.xsnow .btn::before { background: var(--xm-pine); }
.xsnow .btn:hover { color: #f5efe2; border-color: var(--xm-pine); }
.xsnow .btn--fill, .xsnow .close-paper .btn--fill { background: var(--xm-pine); border-color: var(--xm-pine); color: #f5efe2; }
.xsnow .btn--fill::before, .xsnow .close-paper .btn--fill::before { background: var(--xm-holly); }
.xsnow .btn--fill:hover, .xsnow .close-paper .btn--fill:hover { color: #f5efe2; border-color: var(--xm-holly); }
/* on pine: amber for the ask, cream outline for the rest */
.xsnow .xhero .btn, .xsnow .xpk__card .btn { border-color: rgba(245, 239, 226, 0.45); color: #f5efe2; }
.xsnow .xhero .btn::before, .xsnow .xpk__card .btn::before { background: #f5efe2; }
.xsnow .xhero .btn:hover, .xsnow .xpk__card .btn:hover { color: var(--xm-pine); border-color: #f5efe2; }
.xsnow .xhero .btn--fill, .xsnow .xest .btn--fill { background: var(--xm-amber); border-color: var(--xm-amber); color: #1d1206; }
.xsnow .xhero .btn--fill::before, .xsnow .xest .btn--fill::before { background: #ffd28a; }
.xsnow .xhero .btn--fill:hover, .xsnow .xest .btn--fill:hover { color: #1d1206; border-color: #ffd28a; }

/* ---- Examples: prints on a white wall --------------------------------- */
.xsnow .xwork .media { border: 8px solid #fff; border-radius: 2px; box-shadow: 0 16px 34px -20px rgba(31, 58, 43, 0.5); }
.xsnow .xwork figcaption b { color: var(--xm-holly); font-family: var(--xm-serif); font-style: italic; }
.xsnow .xnote { color: var(--xm-cream-mu); }

/* ---- Packages: pine cards --------------------------------------------- */
.xsnow .xpk__card { background: var(--xm-pine); border-color: var(--xm-pine); border-radius: 10px; box-shadow: 0 20px 40px -26px rgba(19, 42, 30, 0.8); backdrop-filter: none; }
.xsnow .xpk__card:nth-child(3) { background: var(--xm-pine-deep); }
.xsnow .xpk__card:nth-child(3) .xpk__name::after {
  content: 'Most complete'; margin-left: auto;
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.06em; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; background: var(--xm-amber); color: #1d1206;
}
.xsnow .xpk__prices dd { font-family: var(--xm-serif); }
.xsnow .xsizes b { color: var(--xm-cream); }
.xsnow .xextras li b { color: var(--xm-holly); }
.xsnow .xextras li.xextras__grp { color: var(--xm-red); border-bottom-color: rgba(168, 53, 43, 0.3); }
.xsnow .xextras__head b { color: var(--xm-holly); }

/* ---- Next year: pine with snowflakes ---------------------------------- */
.xsnow .xnext {
  background: var(--xm-pine) url("../img/christmas/flakes.svg") 0 0 / 180px repeat;
  border: 0; border-radius: 14px; text-align: center;
  box-shadow: 0 24px 50px -30px rgba(19, 42, 30, 0.9);
}
.xsnow .xnext .label { color: var(--xm-cream-mu); justify-content: center; }
.xsnow .xnext__h em { font-style: italic; font-weight: 500; color: var(--xm-amber); }
.xsnow .xnext__b { margin-inline: auto; }
.xsnow .xnext__b b { color: var(--xm-amber); }

/* ---- Power ------------------------------------------------------------- */
.xsnow .xpower__buy { background: var(--xm-pine); border-radius: 10px; }
.xsnow .xpower__buy:hover { background: var(--xm-pine-2); }
.xsnow .xpower__buy-t { color: #f5efe2; }
.xsnow .xpower__buy-s { color: rgba(245, 239, 226, 0.78); }
.xsnow .xpower__buy-go { color: var(--xm-amber); }

/* ---- Form -------------------------------------------------------------- */
.xsnow .close-paper { background: #fff; border-top: 1px solid var(--xm-line); }
.xsnow .close-paper .h-1 { font-family: var(--xm-serif); }
.xsnow .xest { background: var(--xm-pine); border: 0; border-radius: 12px; color: #f5efe2; }
.xsnow .xest .label, .xsnow .xest__fine, .xsnow .xest__phone, .xsnow .xest__empty { color: rgba(245, 239, 226, 0.78); }
.xsnow .xest__lines, .xsnow .xest__lines li { border-color: rgba(245, 239, 226, 0.16); }
.xsnow .xest__lines li.is-off span:last-child { color: #9fd3a4; }
.xsnow .xest__total b { font-family: var(--xm-serif); color: var(--xm-amber); }
.xsnow .xest__phone a { color: #f5efe2; }
.xsnow .xest .form-note { color: #f5efe2; }
.xsnow .opts { border-radius: 10px; overflow: hidden; }
.xsnow .opt:has(input:checked) { background: var(--xm-pine); }
.xsnow .xq__extras input[type='checkbox'], .xsnow .xq__tick input { accent-color: var(--xm-pine); }

/* ---- Phone bar --------------------------------------------------------- */
.xsnow .xbar { background: rgba(31, 58, 43, 0.97); border-color: rgba(245, 239, 226, 0.14); border-radius: 999px; }
.xsnow .xbar b { background: var(--xm-amber); color: #1d1206; border-radius: 999px; }

/* ---- Snow falling over the page ---------------------------------------- */
.snowfall { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.snowfall i {
  position: absolute; top: -12px;
  width: var(--sz, 5px); height: var(--sz, 5px); border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 1px 0.5px rgba(110, 130, 140, 0.35), 0 0 6px rgba(255, 255, 255, 0.9);
  opacity: var(--o, 0.9);
  animation: snowfall-drift linear infinite;
}
@keyframes snowfall-drift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(var(--drift, 20px), 52vh, 0); }
  100% { transform: translate3d(0, 106vh, 0); }
}
@media (prefers-reduced-motion: reduce) { .snowfall { display: none; } }
@media (max-width: 700px) { .snowfall i:nth-child(3n) { display: none; } }
/* The shared night hero is a flex row; this one stacks, and starts below the swag. */
.xsnow .xhero { display: block; padding-top: calc(var(--nav-h) + clamp(190px, 17vw, 250px)); }
@media (max-width: 900px) { .xsnow .xhero { padding-top: calc(var(--nav-h) + 150px); } }
/* Over the hero the swag is the lights; the string under the bar joins once you scroll past. */
body:has(.xsnow)::after { transition: opacity 0.4s var(--ease); }
body:has(.xsnow .masthead.is-over)::after, body:has(.masthead.is-over):has(.xsnow)::after { opacity: 0; }
/* The swag hangs from just under the bar (its wire tucked behind it), and the
   hero copy always starts below the lowest bulb, whatever the width. The swag
   is a fixed 1400px wide down to 900px, so its drop is fixed too. */
.xsnow .xhero__swag { top: calc(var(--nav-h) - 34px); width: 1400px; }
.xsnow .xhero { padding-top: calc(var(--nav-h) + 215px); }
@media (min-width: 1440px) { .xsnow .xhero__swag { width: 104vw; } .xsnow .xhero { padding-top: calc(var(--nav-h) - 34px + 15.6vw); } }
@media (max-width: 900px) {
  .xsnow .xhero__swag { width: 900px; top: calc(var(--nav-h) - 24px); }
  .xsnow .xhero { padding-top: calc(var(--nav-h) + 130px); }
}

/* ---- Christmas funnel, simplified (28 Sep) --------------------------------
   Hero → three steps → examples → packages → form → questions. Each section
   is a heading and one block, so the page reads as a straight line down. */
.xsnow .xhead { margin-bottom: clamp(22px, 2.6vw, 34px); max-width: 22ch; }
.xsnow .xsub { margin: calc(-1 * clamp(8px, 1vw, 14px)) 0 clamp(22px, 2.6vw, 32px); max-width: 60ch; }
.xsnow .xsteps { list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.xsnow .xhero__call { align-self: center; margin-left: 6px; font-size: 0.9375rem; color: var(--xm-cream-mu); text-decoration: underline; text-underline-offset: 3px; }
.xsnow .xhero__call:hover { color: var(--xm-cream); }

.xwork--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .xwork--three { grid-template-columns: 1fr; } }

/* Extras fold away so the form looks as short as it is. */
.xq__more { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.xq__more > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; cursor: pointer; list-style: none; font-size: 0.9375rem; font-weight: 500;
}
.xq__more > summary::-webkit-details-marker { display: none; }
.xq__more > summary::after { content: '+'; font-size: 1.25rem; line-height: 1; color: var(--xm-pine, var(--olive)); }
.xq__more[open] > summary::after { content: '–'; }
.xq__more > summary span { margin-left: auto; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.xq__more .xq__extras { margin: 0 18px 8px; }

/* Questions: one line each until opened. */
.xfaq { display: grid; gap: 10px; max-width: 860px; }
.xfaq details {
  background: #fff; border: 1px solid var(--xm-line); border-radius: 10px;
  box-shadow: 0 10px 26px -22px rgba(31, 58, 43, 0.35);
}
.xfaq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-family: var(--xm-serif); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--xm-cream);
}
.xfaq summary::-webkit-details-marker { display: none; }
.xfaq summary::after { content: '+'; font-family: var(--sans); font-weight: 400; font-size: 1.4rem; color: var(--xm-holly); }
.xfaq details[open] summary::after { content: '–'; }
.xfaq details p { padding: 0 22px 20px; font-size: 0.9375rem; line-height: 1.6; color: var(--xm-cream-mu); max-width: 70ch; }
.xfaq .ulink { color: var(--xm-holly); }

.xlast {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: clamp(28px, 3vw, 44px); padding: 22px 26px;
  border-radius: 12px; background: var(--xm-pine); color: #f5efe2;
}
.xlast p { font-size: 1.0625rem; }
.xlast a:not(.btn) { color: #f5efe2; text-decoration: underline; text-underline-offset: 3px; }
.xsnow .xlast .btn--fill { background: var(--xm-amber); border-color: var(--xm-amber); color: #1d1206; }
.xsnow .xlast .btn--fill::before { background: #ffd28a; }
/* Fraunces hangs lower than Archivo: give the word mask room for g, y and p. */
.xsnow [data-reveal='text'] .w { padding-bottom: 0.26em; margin-bottom: -0.26em; }

/* ---- Christmas booking: suitability, photos ---- */
.xsuit { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.xsuit__item {
  padding: clamp(22px, 2.6vw, 32px); background: #fff; border: 1px solid var(--xm-line); border-radius: 10px;
  box-shadow: 0 14px 34px -24px rgba(31, 58, 43, 0.35);
}
.xsuit__item svg { width: 40px; height: 40px; color: var(--xm-holly); }
.xsuit__item h3 { margin-top: 14px; font-family: var(--xm-serif); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--xm-cream); }
.xsuit__item p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--xm-cream-mu); }
.xsuit__item .ulink { color: var(--xm-holly); }

.xq__opts--wide { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.xq__inperson {
  margin-top: 14px; padding: 12px 16px; border-radius: 8px;
  background: #fbf3e2; border: 1px solid #ecd6a8; font-size: 0.9375rem; color: #5a3f14;
}
.xq__shotlist { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 6px; font-size: 0.9375rem; color: var(--muted); list-style: disc; }
.xq__drop {
  display: grid; justify-items: center; gap: 4px; padding: 26px 18px; cursor: pointer; text-align: center;
  border: 2px dashed rgba(31, 58, 43, 0.3); border-radius: 12px; background: #f7f9f6;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.xq__drop:hover { border-color: var(--xm-pine, var(--olive)); background: #eef3ee; }
.xq__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.xq__drop b { font-weight: 600; font-size: 1rem; color: var(--xm-pine, var(--olive)); }
.xq__drop span { font-size: 0.8125rem; color: var(--muted); }
.xq__photos [data-photos-note] { margin-top: 10px; }
.xq__step input[type='date'] {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-input);
  background: var(--paper); color: var(--ink); font: inherit;
}
.xq__step .field.is-bad input[type='date'] { border-color: var(--timber); }


/* --------------------------------------------------------------------------
   Christmas: the booking form
   One white card, five short steps, a progress row across the top and the
   Back / Continue bar across the bottom (pinned to the screen on a phone,
   carrying the running estimate). The full estimate sits in the pine panel
   to the right on a wide screen.
   -------------------------------------------------------------------------- */

.bk-sec { background: linear-gradient(180deg, #fff, var(--xm-snow, #f7f6f2)) !important; }
.bk-head { max-width: 640px; margin: 0 auto clamp(28px, 3.4vw, 44px); text-align: center; }
.bk-head .label { justify-content: center; }
.bk-head .h-1 { margin-top: 14px; }
.bk-head .body { margin-top: 14px; }

.bk {
  --bk-pine: #1f3a2b; --bk-pine-2: #2a4d39; --bk-holly: #2f6a45; --bk-amber: #f2a531;
  --bk-ink: #1b2a20; --bk-mu: rgba(27, 42, 32, 0.66); --bk-line: rgba(31, 58, 43, 0.14); --bk-soft: #f3f5f1;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(20px, 2.4vw, 32px);
  align-items: start; max-width: 1180px; margin-inline: auto;
}
.bk__card {
  position: relative; background: #fff; border: 1px solid var(--bk-line); border-radius: 20px;
  box-shadow: 0 30px 60px -40px rgba(31, 58, 43, 0.45), 0 2px 0 rgba(31, 58, 43, 0.03);
  scroll-margin-top: calc(var(--nav-h) + 50px);
}
.bk__side { position: sticky; top: calc(var(--nav-h) + 50px); }
.bk__side .xest { border-radius: 20px; }

/* Progress */
.bk__progress {
  display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0;
  padding: 18px clamp(16px, 2.4vw, 28px); border-bottom: 1px solid var(--bk-line);
  counter-reset: none;
}
.bk__progress li { position: relative; }
.bk__progress li + li::before {
  content: ''; position: absolute; top: 15px; right: calc(50% + 20px); left: calc(-50% + 20px);
  height: 2px; background: var(--bk-line); border-radius: 2px; transition: background-color 0.3s var(--ease);
}
.bk__progress li.is-done::before, .bk__progress li.is-on::before { background: var(--bk-holly); }
.bk__progress button {
  display: grid; justify-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; color: var(--bk-mu); font: inherit;
}
.bk__progress button:disabled { cursor: default; }
.bk__progress i {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--bk-line); background: #fff; font-style: normal; font-weight: 600; font-size: 0.875rem;
  transition: all 0.3s var(--ease);
}
.bk__progress span { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; }
.bk__progress .is-on i { border-color: var(--bk-pine); background: var(--bk-pine); color: #fff; box-shadow: 0 0 0 5px rgba(31, 58, 43, 0.1); }
.bk__progress .is-on span { color: var(--bk-ink); font-weight: 600; }
.bk__progress .is-done i { border-color: var(--bk-holly); background: var(--bk-holly); color: transparent; position: relative; }
.bk__progress .is-done i::after {
  content: ''; position: absolute; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
.bk__progress .is-done button:hover span { color: var(--bk-ink); }
@media (max-width: 520px) { .bk__progress span { display: none; } .bk__progress li.is-on span { display: block; position: absolute; top: 38px; white-space: nowrap; } .bk__progress { padding-bottom: 30px; } }

/* Steps */
.bk__step { padding: clamp(22px, 3vw, 38px) clamp(18px, 3vw, 40px) clamp(20px, 2.4vw, 30px); animation: bk-in 0.45s var(--ease-out) both; }
@keyframes bk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bk__step { animation: none; } }
.bk__h {
  font-family: var(--xm-serif, Georgia, serif); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em; line-height: 1.1; color: var(--bk-ink); outline: none;
}
.bk__h2 { margin: 0 0 12px; font-family: var(--xm-serif, Georgia, serif); font-weight: 600; font-size: 1.2rem; color: var(--bk-ink); }
.bk__h2 span { margin-left: 8px; font-family: var(--sans); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--bk-holly); background: #e8f1ea; padding: 3px 8px; border-radius: 999px; vertical-align: 3px; }
.bk__sub { margin-top: 6px; font-size: 0.9375rem; line-height: 1.5; color: var(--bk-mu); }
.bk__sub b { color: var(--bk-holly); font-weight: 600; }
.bk__step > .bk__sub { margin-bottom: 20px; }
.bk__step > .bk__h + .bk__pkgs { margin-top: 20px; }
.bk__block { margin-top: clamp(26px, 3vw, 36px); transition: opacity 0.3s var(--ease); }
.bk__block.is-muted { opacity: 0.35; pointer-events: none; }

/* Hidden native inputs everywhere in the card; the label is the control. */
.bk__pkg input, .bk__size input, .bk__pill input, .bk__seg input, .bk__opt input, .bk__switch input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}

/* Package cards */
.bk__pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bk__pkg {
  position: relative; display: grid; gap: 8px; align-content: start; padding: 18px; cursor: pointer;
  border: 2px solid var(--bk-line); border-radius: 14px; background: #fff;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.bk__pkg:hover { border-color: rgba(31, 58, 43, 0.35); transform: translateY(-2px); }
.bk__pkg-top { display: flex; align-items: center; gap: 10px; }
.bk__pkg-top b { font-family: var(--xm-serif, Georgia, serif); font-size: 1.3rem; font-weight: 600; color: var(--bk-ink); }
.bk__dot { width: 12px; height: 12px; border-radius: 50%; }
.bk__dot--b { background: #b87545; } .bk__dot--s { background: #aab0b6; } .bk__dot--g { background: #e3b86e; }
.bk__tick {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bk-line);
  position: relative; transition: all 0.25s var(--ease);
}
.bk__pkg-d { font-size: 0.875rem; line-height: 1.45; color: var(--bk-mu); }
.bk__pkg-p { margin-top: 4px; font-size: 0.8125rem; color: var(--bk-mu); }
.bk__pkg-p b { font-family: var(--xm-serif, Georgia, serif); font-size: 1.15rem; color: var(--bk-ink); }
.bk__pkg:has(input:checked) { border-color: var(--bk-pine); background: #f6faf6; box-shadow: 0 12px 26px -18px rgba(31, 58, 43, 0.6); }
.bk__pkg:has(input:checked) .bk__tick, .bk__size:has(input:checked) .bk__tick { background: var(--bk-pine); border-color: var(--bk-pine); }
.bk__tick::after {
  content: ''; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) scale(0); transition: transform 0.25s var(--ease-out);
}
.bk__pkg:has(input:checked) .bk__tick::after { transform: rotate(45deg) scale(1); }
.bk__pkg:has(input:focus-visible), .bk__size:has(input:focus-visible), .bk__pill:has(input:focus-visible),
.bk__seg label:has(input:focus-visible), .bk__opt:has(input:focus-visible), .bk__switch:has(input:focus-visible) {
  outline: 3px solid rgba(47, 106, 69, 0.35); outline-offset: 2px;
}

/* Small secondary choices as pills */
.bk__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bk__pill span {
  display: inline-block; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--bk-line); font-size: 0.875rem; color: var(--bk-mu); background: #fff;
  transition: all 0.2s var(--ease);
}
.bk__pill:hover span { border-color: rgba(31, 58, 43, 0.35); color: var(--bk-ink); }
.bk__pill:has(input:checked) span { background: var(--bk-pine); border-color: var(--bk-pine); color: #fff; }
.bk__block > .bk__pill { display: inline-block; margin-top: 12px; }

/* House sizes */
.bk__sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bk__size {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px 12px 14px; text-align: center; cursor: pointer;
  border: 2px solid var(--bk-line); border-radius: 14px; background: #fff; transition: all 0.25s var(--ease);
}
.bk__size:hover { border-color: rgba(31, 58, 43, 0.35); }
.bk__size svg { width: 64px; height: 48px; fill: #e8efe9; stroke: var(--bk-holly); stroke-width: 2; stroke-linejoin: round; transition: fill 0.25s var(--ease); }
.bk__size b { font-weight: 600; font-size: 0.9375rem; color: var(--bk-ink); }
.bk__size span { font-size: 0.75rem; line-height: 1.35; color: var(--bk-mu); }
.bk__size em { min-height: 1.3em; font-style: normal; font-family: var(--xm-serif, Georgia, serif); font-weight: 600; font-size: 1.1rem; color: var(--bk-pine); }
.bk__size:has(input:checked) { border-color: var(--bk-pine); background: #f6faf6; }
.bk__size:has(input:checked) svg { fill: #ffd98f; stroke: var(--bk-pine); }

/* Extras */
.bk__xgroups { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 40px); }
.bk__grp { margin: 0 0 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #a8352b; }
.bk__xlist { list-style: none; margin: 0 0 18px; padding: 0; }
.bk__xlist li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 0 -12px; border-radius: 10px; transition: background-color 0.2s var(--ease);
}
.bk__xlist li + li { border-top: 1px solid var(--bk-line); }
.bk__xlist li.is-on { background: #f1f7f2; border-top-color: transparent; }
.bk__xlist li.is-on + li { border-top-color: transparent; }
.bk__xn { display: grid; font-size: 0.9375rem; font-weight: 500; color: var(--bk-ink); }
.bk__xn small { font-size: 0.75rem; font-weight: 400; color: var(--bk-mu); }
.bk__xp { font-family: var(--xm-serif, Georgia, serif); font-weight: 600; color: var(--bk-holly); }
.bk__step-ctl { display: inline-flex; align-items: center; border: 1.5px solid var(--bk-line); border-radius: 999px; background: #fff; }
.bk__step-ctl button {
  width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--bk-pine); transition: background-color 0.2s var(--ease);
}
.bk__step-ctl button:hover:not(:disabled) { background: #e8f1ea; }
.bk__step-ctl button:disabled { color: rgba(27, 42, 32, 0.22); cursor: default; }
.bk__step-ctl output { min-width: 18px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.bk__xlist li.is-on .bk__step-ctl { border-color: var(--bk-pine); }

/* The house: questions */
.bk__q { margin-top: 22px; }
.bk__qt { margin-bottom: 10px; font-weight: 600; font-size: 1rem; color: var(--bk-ink); }
.bk__q.is-bad .bk__qt { color: #a8352b; }
.bk__seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); padding: 4px; gap: 4px; border-radius: 999px; background: var(--bk-soft); border: 1px solid var(--bk-line); }
.bk__seg span { display: block; padding: 10px 18px; border-radius: 999px; text-align: center; cursor: pointer; font-size: 0.9375rem; font-weight: 500; color: var(--bk-mu); transition: all 0.2s var(--ease); }
.bk__seg label:hover span { color: var(--bk-ink); }
.bk__seg input:checked + span { background: var(--bk-pine); color: #fff; box-shadow: 0 6px 14px -8px rgba(31, 58, 43, 0.7); }
.bk__q.is-bad .bk__seg, .bk__q.is-bad .bk__opt span { border-color: #d98a80; }
.bk__opts { display: grid; gap: 8px; }
.bk__opt span {
  position: relative; display: grid; gap: 2px; padding: 14px 16px 14px 48px; cursor: pointer;
  border: 2px solid var(--bk-line); border-radius: 12px; background: #fff; transition: all 0.2s var(--ease);
}
.bk__opt span::before {
  content: ''; position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(31, 58, 43, 0.3); background: #fff; transition: all 0.2s var(--ease);
}
.bk__opt b { font-weight: 600; font-size: 0.9375rem; color: var(--bk-ink); }
.bk__opt small { font-size: 0.8125rem; color: var(--bk-mu); }
.bk__opt small .ulink { color: var(--bk-holly); }
.bk__opt:hover span { border-color: rgba(31, 58, 43, 0.35); }
.bk__opt input:checked + span { border-color: var(--bk-pine); background: #f6faf6; }
.bk__opt input:checked + span::before { border-color: var(--bk-pine); background: var(--bk-pine); box-shadow: inset 0 0 0 3px #fff; }
.bk__visit {
  display: flex; gap: 10px; margin-top: 14px; padding: 12px 16px; border-radius: 12px;
  background: #fff6e4; border: 1px solid #f0d9a6; font-size: 0.9rem; line-height: 1.45; color: #5a3f14;
}
.bk__visit::before { content: '!'; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f2a531; color: #fff; font-weight: 700; font-size: 0.8rem; }

/* Switches */
.bk__switch { display: flex; align-items: center; gap: 12px; margin-top: 20px; cursor: pointer; font-size: 0.9375rem; color: var(--bk-ink); }
.bk__switch i { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: #d9ded9; transition: background-color 0.25s var(--ease); }
.bk__switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.25s var(--ease-out); }
.bk__switch input:checked + i { background: var(--bk-holly); }
.bk__switch input:checked + i::after { transform: translateX(18px); }

/* Photos */
.bk__shots { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 12px 0 14px; padding: 0; }
.bk__shots li { padding: 6px 12px 6px 28px; position: relative; border-radius: 999px; background: var(--bk-soft); font-size: 0.8125rem; color: var(--bk-ink); }
.bk__shots li::before { content: ''; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--bk-amber); }
.bk__drop {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 26px 16px; cursor: pointer; text-align: center;
  border: 2px dashed rgba(31, 58, 43, 0.28); border-radius: 16px; background: #f7faf7; transition: all 0.25s var(--ease);
}
.bk__drop:hover { border-color: var(--bk-pine); background: #eef5ef; }
.bk__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bk__drop svg { width: 36px; height: 36px; fill: none; stroke: var(--bk-holly); stroke-width: 2.4; stroke-linejoin: round; }
.bk__drop b { font-size: 1rem; color: var(--bk-pine); }
.bk__drop span { font-size: 0.8125rem; color: var(--bk-mu); }
.bk__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-top: 12px; }
.bk__thumbs:empty { display: none; }
.bk__thumbs figure { position: relative; margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.5); animation: bk-in 0.3s var(--ease-out) both; }
.bk__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk__thumbs button {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgba(20, 30, 24, 0.75); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer;
}
.bk__hint { margin-top: 8px; font-size: 0.8125rem; color: var(--bk-mu); min-height: 1em; }

/* Date */
.bk__date {
  display: flex; align-items: center; gap: 12px; max-width: 360px; padding: 6px 6px 6px 16px;
  border: 2px solid var(--bk-line); border-radius: 14px; background: #fff; transition: border-color 0.2s var(--ease);
}
.bk__date:focus-within { border-color: var(--bk-pine); }
.bk__date svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--bk-holly); stroke-width: 2; }
.bk__date input { flex: 1; min-width: 0; padding: 12px 4px; border: 0; background: none; font: inherit; font-size: 1.05rem; color: var(--bk-ink); outline: none; }
.bk__datesay { margin-top: 10px; min-height: 1.4em; font-family: var(--xm-serif, Georgia, serif); font-style: italic; font-size: 1.15rem; color: var(--bk-holly); }

/* Details */
.bk__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.bk__fields .bk__wide { grid-column: 1 / -1; }
.bk .field > label { color: var(--bk-ink); font-weight: 600; font-size: 0.875rem; letter-spacing: 0; }
.bk .field input, .bk .field textarea {
  border: 2px solid var(--bk-line); border-radius: 12px; background: #fff; padding: 13px 14px; font-size: 1rem;
}
.bk .field textarea { min-height: 96px; }
.bk .field input:focus, .bk .field textarea:focus { border-color: var(--bk-pine); box-shadow: 0 0 0 4px rgba(47, 106, 69, 0.12); }
.bk .field.is-bad input { border-color: #d98a80; background: #fff8f7; }
@media (max-width: 600px) { .bk__fields { grid-template-columns: 1fr; } }

.bk__review { margin-top: 24px; padding: 18px 20px; border-radius: 14px; background: var(--bk-soft); border: 1px solid var(--bk-line); }
.bk__review:empty { display: none; }
.bk__review-h { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bk-holly); }
.bk__review dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px 18px; margin: 12px 0 0; }
.bk__review dt { font-size: 0.75rem; color: var(--bk-mu); }
.bk__review dd { margin: 2px 0 0; font-weight: 600; color: var(--bk-ink); }
.bk__review-visit { margin-top: 12px; font-size: 0.875rem; color: #5a3f14; }

/* Errors */
.bk__err { margin-top: 16px; padding: 10px 14px; border-radius: 10px; background: #fdf0ee; color: #8e2f26; font-size: 0.875rem; }
.bk__note { margin: 0 clamp(18px, 3vw, 40px) 16px; }

/* Bottom bar */
.bk__nav {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 14px clamp(16px, 3vw, 40px); border-top: 1px solid var(--bk-line);
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px);
  border-radius: 0 0 20px 20px;
}
.bk__back {
  padding: 12px 18px; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 500; color: var(--bk-mu);
  border-radius: 999px; transition: background-color 0.2s var(--ease);
}
.bk__back::before { content: '← '; }
.bk__back:hover { background: var(--bk-soft); color: var(--bk-ink); }
.bk__mini { margin-left: auto; display: grid; text-align: right; line-height: 1.15; }
.bk__mini span { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bk-mu); }
.bk__mini b { font-family: var(--xm-serif, Georgia, serif); font-size: 1.25rem; color: var(--bk-pine); }
.bk__next {
  padding: 14px 26px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; font-size: 1rem;
  background: var(--bk-pine); color: #fff; box-shadow: 0 10px 20px -12px rgba(31, 58, 43, 0.8);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.bk__next:hover { background: var(--bk-pine-2); transform: translateY(-1px); }
.bk__next::after { content: ' →'; }
.bk__book { background: var(--bk-amber); color: #1d1206; }
.bk__book:hover { background: #f6b855; }
.bk__book::after { content: ''; }
.bk__next:disabled { opacity: 0.7; cursor: wait; transform: none; }
@media (min-width: 961px) { .bk__mini { display: none; } .bk__back + .bk__mini + .bk__next, .bk__next { margin-left: auto; } }

/* Done */
.bk__done {
  grid-column: 1 / -1; max-width: 560px; margin: 0 auto; padding: clamp(30px, 4vw, 48px); text-align: center;
  background: #fff; border: 1px solid var(--bk-line); border-radius: 20px; box-shadow: 0 30px 60px -40px rgba(31, 58, 43, 0.45);
}
.bk__done svg { width: 56px; height: 56px; fill: #e8f1ea; stroke: var(--bk-holly); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bk__done .bk__h { margin-top: 14px; }
.bk__done p { margin-top: 12px; color: var(--bk-mu); line-height: 1.55; }
.bk__done a { color: var(--bk-ink); text-decoration: underline; text-underline-offset: 3px; }
.bk.is-sent .bk__card, .bk.is-sent .bk__side { display: none; }

@media (max-width: 960px) {
  .bk { grid-template-columns: 1fr; }
  .bk__side { position: static; }
}
@media (max-width: 640px) {
  .bk__pkgs, .bk__sizes { grid-template-columns: 1fr; }
  .bk__size { grid-template-columns: 56px 1fr auto; justify-items: start; text-align: left; align-items: center; column-gap: 12px; padding: 12px 14px; }
  .bk__size svg { grid-row: span 2; width: 52px; height: 40px; }
  .bk__size em { grid-row: span 2; grid-column: 3; align-self: center; }
  .bk__xgroups { grid-template-columns: 1fr; }
  .bk__seg { display: grid; width: 100%; }
  .bk__seg span { padding: 10px 8px; }
  .bk__nav { padding: 12px 14px; }
  .bk__next { padding: 13px 20px; }
}
/* Phone fixes for the booking card */
.bk__h2 span, .bk__back, .bk__next { white-space: nowrap; }
@media (max-width: 960px) { .bk__side { display: none; } }
@media (max-width: 640px) {
  .bk__size { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 0; }
  .bk__size svg { grid-column: 1; grid-row: 1 / 3; }
  .bk__size b { grid-column: 2; grid-row: 1; }
  .bk__size span { grid-column: 2; grid-row: 2; text-align: left; }
  .bk__size em { grid-column: 3; grid-row: 1 / 3; }
  .bk__back { padding: 12px 8px; }
  .bk__next { padding: 13px 18px; font-size: 0.9375rem; }
}
/* Booking: contact line, cancellation tick box and note */
.bk-ask { margin-top: 12px; font-size: 0.9375rem; color: var(--bk-mu, rgba(27, 42, 32, 0.66)); }
.bk-ask a { color: #1f3a2b; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bk__agree { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--bk-line); background: #fff; cursor: pointer; font-size: 0.875rem; line-height: 1.5; color: var(--bk-ink); }
.bk__agree input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--bk-pine); }
.bk__agree.is-bad { border-color: #d98a80; background: #fff8f7; }
.bk__legal { margin-top: 14px; font-size: 0.8125rem; color: var(--bk-mu); }
.bk__legal .ulink { color: var(--bk-holly); }
/* Booking: help lines under the choices, and the minimum tag on "Just some extras" */
.bk__help { margin-top: 12px; font-size: 0.875rem; line-height: 1.5; color: var(--bk-mu); }
.bk__help a { color: var(--bk-pine); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bk__pill small { margin-left: 6px; font-size: 0.75rem; opacity: 0.7; }

/* Booking: the install calendar (one install a day) */
.bk-cal { max-width: 440px; margin-top: 4px; padding: 16px; border: 2px solid var(--bk-line); border-radius: 16px; background: #fff; }
.bk-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bk-cal__head p { font-family: var(--xm-serif, Georgia, serif); font-weight: 600; font-size: 1.15rem; color: var(--bk-ink); }
.bk-cal__head button {
  width: 38px; height: 38px; border: 1.5px solid var(--bk-line); border-radius: 50%; background: #fff; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: var(--bk-pine); transition: background-color 0.2s var(--ease);
}
.bk-cal__head button:hover:not(:disabled) { background: #e8f1ea; }
.bk-cal__head button:disabled { opacity: 0.3; cursor: default; }
.bk-cal__dow, .bk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-cal__dow span { padding: 4px 0; text-align: center; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bk-mu); }
.bk-cal__grid button {
  aspect-ratio: 1; border: 0; border-radius: 10px; background: #f1f6f2; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 0.9375rem; color: var(--bk-ink); transition: all 0.15s var(--ease);
}
.bk-cal__grid button:hover:not(:disabled) { background: #dcebdf; }
.bk-cal__grid button:disabled { background: none; color: rgba(27, 42, 32, 0.22); font-weight: 400; cursor: default; }
.bk-cal__grid button.is-taken { background: repeating-linear-gradient(135deg, #f1efe9 0 4px, #e7e4dc 4px 8px); color: rgba(27, 42, 32, 0.3); text-decoration: line-through; }
.bk-cal__grid button.is-on { background: var(--bk-pine); color: #fff; box-shadow: 0 8px 16px -8px rgba(31, 58, 43, 0.8); }
.bk-cal__grid button:focus-visible { outline: 3px solid rgba(47, 106, 69, 0.4); outline-offset: 1px; }
.bk-cal__key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 0.75rem; color: var(--bk-mu); }
.bk-cal__key span { display: inline-flex; align-items: center; gap: 6px; }
.bk-cal__key i { width: 12px; height: 12px; border-radius: 3px; }
.bk-cal__key .is-free { background: #f1f6f2; border: 1px solid #cfe0d3; }
.bk-cal__key .is-taken { background: repeating-linear-gradient(135deg, #f1efe9 0 3px, #e1ddd3 3px 6px); }
.bk-cal__key [data-cal-loading][hidden] { display: none; }

/* Booking: nothing to pay today */
.xsnow .xest__pay { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(245, 239, 226, 0.08); font-size: 0.8125rem; line-height: 1.5; color: rgba(245, 239, 226, 0.85); }
.xsnow .xest__pay b { color: #f5efe2; }
.bk__pay { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: #eef5ef; font-size: 0.875rem; line-height: 1.5; color: var(--bk-ink); }

/* Package cards: the whole card selects, and the chosen one glows. */
.xsnow .xpk__card { cursor: pointer; position: relative; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease), outline-color 0.3s var(--ease); outline: 3px solid transparent; outline-offset: 3px; }
.xsnow .xpk__card:hover { transform: translateY(-3px); }
.xsnow .xpk__card:focus-visible { outline-color: rgba(242, 165, 49, 0.6); }
.xsnow .xpk__card.is-picked {
  transform: translateY(-4px);
  outline-color: #f2a531;
  box-shadow: 0 0 0 1px #f2a531, 0 0 40px -6px rgba(242, 165, 49, 0.55), 0 26px 50px -24px rgba(19, 42, 30, 0.85);
}
.xsnow .xpk__card.is-picked::before {
  content: 'Selected'; position: absolute; top: -13px; left: 22px;
  padding: 4px 12px; border-radius: 999px; background: #f2a531; color: #1d1206;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  box-shadow: 0 6px 14px -6px rgba(242, 165, 49, 0.8);
}
.xsnow .xpk__card.is-picked .btn { background: #f2a531; border-color: #f2a531; color: #1d1206; }
.xsnow .xpk__card.is-picked .btn::before { background: #ffd28a; }

/* Same in the form's step 1. */
.bk__pkg:has(input:checked) {
  transform: translateY(-3px);
  border-color: var(--bk-pine);
  background: linear-gradient(180deg, #fffaf0, #f6faf6);
  box-shadow: 0 0 0 3px rgba(242, 165, 49, 0.55), 0 16px 30px -18px rgba(31, 58, 43, 0.6);
}
.bk__pkg:has(input:checked) .bk__tick { background: #f2a531; border-color: #f2a531; }
.xsnow .xest__save { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(159, 211, 164, 0.14); color: #b9e2bd; font-size: 0.8125rem; font-weight: 600; }
.xextras li span small { display: block; font-size: 0.8125rem; color: var(--xm-cream-mu); }

/* ---- See your house lit up ------------------------------------------------ */
.xpv {
  display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.4fr); gap: clamp(18px, 2.4vw, 32px);
  padding: clamp(18px, 2.4vw, 28px); background: #fff; border: 1px solid var(--xm-line); border-radius: 20px;
  box-shadow: 0 30px 60px -40px rgba(31, 58, 43, 0.45);
}
.xpv__drop {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer;
  border: 2px dashed rgba(31, 58, 43, 0.28); border-radius: 16px; background: #f7faf7; text-align: center;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.xpv__drop:hover { border-color: #1f3a2b; background: #eef5ef; }
.xpv__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.xpv__drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xpv__drop-inner { display: grid; justify-items: center; gap: 6px; padding: 16px; }
.xpv__drop svg { width: 40px; height: 40px; fill: none; stroke: #2f6a45; stroke-width: 2.4; stroke-linejoin: round; }
.xpv__drop b { color: #1f3a2b; font-size: 1rem; }
.xpv__drop-inner > span { font-size: 0.8125rem; color: var(--xm-cream-mu); }
.xpv__q { margin: 18px 0 8px; font-weight: 600; color: var(--xm-cream); }
.xpv__pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.xpv__pkgs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xpv__pkgs span {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; cursor: pointer;
  border: 2px solid var(--xm-line); border-radius: 12px; font-weight: 600; color: var(--xm-cream); transition: all 0.2s var(--ease);
}
.xpv__pkgs input:checked + span { border-color: #1f3a2b; background: #f6faf6; box-shadow: 0 0 0 3px rgba(242, 165, 49, 0.5); }
.xpv__pkgs input:focus-visible + span { outline: 3px solid rgba(47, 106, 69, 0.4); outline-offset: 2px; }
.xpv__go { width: 100%; margin-top: 18px; justify-content: center; }
.xsnow .xpv__go:disabled { opacity: 0.45; cursor: not-allowed; }
.xpv__note { margin-top: 10px; min-height: 1.2em; font-size: 0.875rem; color: var(--xm-cream-mu); }
.xpv__note.is-bad { color: #8e2f26; }

.xpv__stage { position: relative; min-height: 320px; border-radius: 16px; overflow: hidden; background: #132a1e; }
.xpv__empty, .xpv__wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; color: #f5efe2; }
.xpv__empty img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; filter: blur(2px); }
.xpv__empty p { position: relative; font-family: var(--xm-serif, Georgia, serif); font-style: italic; font-size: 1.3rem; }
.xpv__wait p { font-family: var(--xm-serif, Georgia, serif); font-size: 1.4rem; }
.xpv__wait small { color: rgba(245, 239, 226, 0.7); }
.xpv__bulbs { display: flex; gap: 14px; margin-bottom: 6px; }
.xpv__bulbs i {
  width: 14px; height: 22px; border-radius: 45% 45% 55% 55% / 35% 35% 65% 65%; background: #f2a531;
  box-shadow: 0 0 14px 3px rgba(242, 165, 49, 0.6); opacity: 0.25; animation: xpv-bulb 1.6s ease-in-out infinite;
}
.xpv__bulbs i:nth-child(2) { animation-delay: 0.2s; } .xpv__bulbs i:nth-child(3) { animation-delay: 0.4s; }
.xpv__bulbs i:nth-child(4) { animation-delay: 0.6s; } .xpv__bulbs i:nth-child(5) { animation-delay: 0.8s; }
@keyframes xpv-bulb { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .xpv__bulbs i { animation: none; opacity: 1; } }

.xpv__result { position: relative; background: #fff; }
.xpv__ba { --x: 50%; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: #000; }
.xpv__ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xpv__beforewrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.xpv__beforewrap::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }
.xpv__tag { position: absolute; top: 12px; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: rgba(0, 0, 0, 0.55); color: #fff; pointer-events: none; }
.xpv__tag--b { left: 12px; } .xpv__tag--a { right: 12px; background: rgba(242, 165, 49, 0.9); color: #1d1206; }
.xpv__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.xpv__label { margin: 10px 4px 0; font-size: 0.8125rem; color: var(--xm-cream-mu); }
.xpv__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

@media (max-width: 860px) {
  .xpv { grid-template-columns: 1fr; }
  .xpv__stage { min-height: 260px; }
}