/* Patton Contractors, round 7, candidate 7: walk through one house in one day.
   Loaded after site.css on the homepage only. */

.home {
  --cream: #f3efe6;
  --cream-2: rgb(243 239 230 / .92);
  --toolbar: 0px;
  --film: #0b100f;
  background: var(--night);
}

/* ---------- Display type: light, wide, set big ---------- */

.display {
  font-weight: 300;
  font-stretch: 118%;
  letter-spacing: -0.045em;
  line-height: .93;
  text-wrap: balance;
  margin: 0;
}
.display em { font-style: italic; font-weight: 300; font-stretch: 88%; letter-spacing: -0.03em; }
h1.display { font-size: clamp(3rem, 1.2rem + 9.6vw, 11.25rem); }
@media (max-width: 767px) { h1.display { font-size: min(12.6vw, 4.4rem); } }
.display--2 { font-size: clamp(2.45rem, 1.3rem + 4.6vw, 6rem); line-height: .96; }

.eyebrow {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
  margin: 0;
  font-stretch: 100%; font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-2);
}
.eyebrow > span {
  display: inline-flex; align-items: baseline; gap: 14px;
  font-style: italic; font-weight: 300; font-stretch: 86%;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); letter-spacing: 0; text-transform: none;
  color: var(--fg);
}
.eyebrow > span::after {
  content: ''; width: 28px; height: 1px; background: var(--amber); align-self: center;
}
.walk-open .eyebrow > span::after { display: none; }

.home .body { color: var(--fg-2); max-width: 46ch; font-size: 1.0625rem; line-height: 1.55; }
.home .body strong { color: var(--fg); font-weight: 600; font-stretch: 104%; }
.home .lede { color: var(--fg-2); max-width: 44ch; }

.textlink--light { color: var(--cream); }

/* ---------- Header: a nameplate and a pill, floating ---------- */

.home .site-header {
  position: fixed; inset: 0 0 auto 0;
  background: none; border: 0;
  pointer-events: none;
}
.home .site-header > * { pointer-events: auto; }

/* Over the light planning chapter the glass pill turns more solid so it stays crisp. */
.home .site-nav { transition: background-color .5s var(--ease-out); }
@media (min-width: 1101px) { :root[data-head='light'] .home .site-nav { background: rgb(14 20 18 / .88); } }

/* ---------- Films: canvas stages ---------- */

.film-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; object-fit: cover;
  background: var(--film);
}

.scrim { position: absolute; inset: 0; pointer-events: none; }

/* Film grain: barely there, but it turns pixels into film. */
.walk-stage::after, .dusk-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .07; mix-blend-mode: overlay;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { background-position: 0 0; } 20% { background-position: -43px 29px; } 40% { background-position: 37px -51px; }
  60% { background-position: -29px -17px; } 80% { background-position: 53px 41px; } 100% { background-position: 0 0; }
}

.film-label {
  position: absolute; z-index: 4;
  right: var(--gutter); top: calc(var(--header-h) + 10px);
  margin: 0; padding: 4px 9px;
  background: rgb(9 14 13 / .72); color: var(--cream);
  font-stretch: 88%; font-size: .75rem; line-height: 1.35;
  border-radius: 4px;
}
@media (max-width: 767px) { .film-label .long { display: none; } }

/* ---------- 1. Morning: the walk-in ---------- */

.walk {
  --a: 1; --b: 0;
  position: relative;
  height: 290svh;
  background: var(--film);
  color: var(--cream);
  --fg: var(--cream); --fg-2: var(--cream-2); --rule: rgb(243 239 230 / .22);
}
.walk-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; }

/* The film waits dimmed and slightly close until it arrives, then comes up as one layer. */
.home-run .walk .film-canvas { transform: scale(1.06); }
.home-run .walk .film-canvas.is-drawn { filter: none; transform: none; animation: dawn 2.6s var(--ease-out) both; }
@keyframes dawn {
  from { transform: scale(1.06); }
  to { transform: none; }
}

.scrim--walk {
  z-index: 2;
  background:
    linear-gradient(180deg, rgb(8 12 11 / .55) 0%, rgb(8 12 11 / 0) 22%),
    linear-gradient(0deg, rgb(8 12 11 / calc(.78 * var(--a) + .5 * var(--b))) 0%, rgb(8 12 11 / 0) calc(58% + 10% * var(--b))),
    linear-gradient(90deg, rgb(8 12 11 / calc(.7 * var(--b))) 0%, rgb(8 12 11 / 0) 62%);
}

.walk-open {
  position: absolute; z-index: 3;
  left: var(--gutter); right: var(--gutter); bottom: clamp(26px, 6svh, 64px);
  display: grid; gap: clamp(14px, 2.2svh, 26px);
  opacity: var(--a);
  transform: translate3d(0, calc((1 - var(--a)) * -7svh), 0);
}
.walk-open h1 { color: var(--cream); text-shadow: 0 0 .5em rgb(8 12 11 / .35); }
.walk-open .eyebrow > span { text-shadow: 0 0 .6em rgb(8 12 11 / .5); }
.walk-open::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -12% -4% -30% calc(-1 * var(--gutter));
  background: radial-gradient(ellipse 70% 62% at 30% 62%, rgb(8 12 11 / .5), rgb(8 12 11 / .22) 55%, rgb(8 12 11 / 0) 80%);
}
.walk-open .line { display: block; overflow: hidden; padding: 0 .06em .1em 0; margin-bottom: -.1em; }
.walk-open .line > span { display: inline-block; }

.walk-foot {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-start; gap: 10px 40px;
  margin-top: clamp(4px, 1svh, 12px);
}
.walk-sub { max-width: 36ch; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.45; color: var(--cream-2); text-wrap: pretty; }

/* Arrival: the dawn comes up, then the words rise into place. */
.home-run [data-rise] { opacity: 0; }
.home-run.is-arrived [data-rise] { opacity: 1; animation: rise-in 1.25s var(--ease-out) both; }
.home-run .walk-open .eyebrow[data-rise] { animation-delay: .5s; }
.home-run .walk-open .line:nth-child(1) > [data-rise] { animation-delay: .62s; }
.home-run .walk-open .line:nth-child(2) > [data-rise] { animation-delay: .74s; }
.home-run .walk-open .line:nth-child(3) > [data-rise] { animation-delay: .86s; }
.home-run .walk-foot[data-rise] { animation-delay: .86s; }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 105%, 0); } to { opacity: 1; transform: none; } }
.home-run.is-arrived .walk-foot[data-rise] { animation-name: fade-up; }
@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
/* Failsafe: if the first frame or the script is very slow, the opening comes up anyway
   at 3.4s; a later arrival then keeps it as it is instead of replaying. */
@keyframes safe-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes safe-dawn { from { transform: scale(1.06); } to { transform: none; } }
/* The dawn's darkness is a veil that lifts (opacity only), so the film can redraw under
   it as the visitor scrolls without being filtered every frame. */
.dawn { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; will-change: opacity; }
.home-run .walk .dawn { opacity: .45; }
.home-run .walk .film-canvas.is-drawn ~ .dawn { animation: dawn-lift 2.6s var(--ease-out) both; }
.home-run .walk .film-canvas.is-drawn.is-dawned ~ .dawn { animation: none; opacity: 0; }
.home-run .walk .film-canvas:not(.is-drawn) ~ .dawn { animation: dawn-lift 2s var(--ease-out) 5s both; }
@keyframes dawn-lift { from { opacity: .45; } to { opacity: 0; } }
.no-run .dawn, html:not(.js) .dawn { display: none; }
.home-run:not(.is-arrived):not(.is-late) .walk .walk-open [data-rise] { animation: safe-rise 1s var(--ease-out) 2s both; }
.home-run .walk .film-canvas:not(.is-drawn) { animation: safe-dawn 2s var(--ease-out) 5s both; }
/* A late arrival lets a rise already under way finish (same animation, so it carries on). */
.home-run.is-late .walk .walk-open [data-rise] { animation: safe-rise 1s var(--ease-out) 2s both; }

.walk-chapter {
  position: absolute; z-index: 3;
  left: var(--gutter); bottom: clamp(32px, 9svh, 96px);
  width: min(560px, calc(100% - 2 * var(--gutter)));
  display: grid; gap: 20px; justify-items: start;
  /* --exit: fades as the stage scrolls away, before the copy reaches the header */
  opacity: calc(var(--b) * var(--exit, 1));
  transform: translate3d(0, calc((1 - var(--b)) * 6svh), 0);
}
.walk-chapter h2 { color: var(--cream); max-width: 12ch; }

.walk-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 14px; width: 1px; height: 44px;
  background: rgb(243 239 230 / .25); overflow: hidden;
  opacity: calc(var(--a) * .9);
}
.walk-cue i { position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--cream); transform: translate3d(0, -100%, 0); animation: cue 2.2s var(--ease-in-out) 2s 6; }
/* Six passes, then it rests: by then the visitor has either scrolled or read the page. */
@keyframes cue { from { transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 250%, 0); } }
/* Ambient loops run only while they can be seen. */
.walk:not(.is-onscreen) .walk-stage::after, .dusk:not(.is-onscreen) .dusk-stage::after, .walk:not(.is-opening) .walk-cue i { animation-play-state: paused; }

@media (max-width: 767px) {
  .walk { height: 250svh; }
  .walk-open { bottom: max(22px, env(safe-area-inset-bottom)); }
  .walk-foot { gap: 6px 20px; }
  .walk-chapter { bottom: max(22px, env(safe-area-inset-bottom)); gap: 14px; }
  .walk-chapter .body { font-size: 1rem; }
  .scrim--walk {
    background:
      linear-gradient(180deg, rgb(8 12 11 / .5) 0%, rgb(8 12 11 / 0) 18%),
      linear-gradient(0deg, rgb(8 12 11 / calc(.82 * var(--a) + .86 * var(--b))) 0%, rgb(8 12 11 / calc(.3 * var(--a) + .62 * var(--b))) 44%, rgb(8 12 11 / calc(.12 * var(--a) + .14 * var(--b))) 60%, rgb(8 12 11 / 0) 76%);
  }
  .walk-chapter::before {
    content: ''; position: absolute; z-index: -1;
    inset: -72px calc(-1 * var(--gutter)) calc(-1 * max(22px, env(safe-area-inset-bottom)));
    background: linear-gradient(0deg, rgb(8 12 11 / .62), rgb(8 12 11 / .5) 72%, rgb(8 12 11 / 0));
  }
}

/* ---------- 2. Afternoon: try a colour on the wall ---------- */

.hall {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: var(--field);
  color: var(--field-fg);
  --fg: var(--field-fg); --fg-2: var(--field-fg-2); --rule: rgb(238 241 234 / .22);
}
.hall-film {
  grid-column: 2; grid-row: 1;
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  overflow: hidden; background: var(--film);
}
.hall-film video, .hall-paint {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%;
}
.hall-paint { display: block; opacity: 0; transition: opacity .6s var(--ease-out); }
.hall-paint.is-ready { opacity: 1; }
/* Replay shows the film at once, without fading through a stopped paint frame. */
.hall-paint.is-idle { visibility: hidden; }

.film-bar {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  padding: 12px;
  color: var(--cream);
}
.film-label--inline { position: static; margin-right: auto; background: rgb(9 14 13 / .72); }
.film-btn {
  min-height: 40px; min-width: 44px; padding: 0 14px; margin-left: 6px;
  background: rgb(9 14 13 / .78); color: var(--cream); border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-stretch: 100%; font-size: .8125rem; font-weight: 600;
}
.film-btn:hover { background: rgb(9 14 13 / .92); }
.begin .film-btn, .house-toggle { background: transparent; color: var(--fg); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.film-btn[disabled] { opacity: .45; cursor: not-allowed; text-decoration: none; }

.hall-copy {
  grid-column: 1; grid-row: 1;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: 24px; align-items: flex-start;
  padding: calc(var(--header-h) + 40px) var(--gutter) 72px;
}
.hall-copy h2 { max-width: 10ch; }

.swatches {
  display: grid; gap: 14px; width: 100%; max-width: 30rem;
  padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.swatch-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  font-weight: 600; font-stretch: 104%; font-size: 1rem;
}
.swatch-now { font-style: italic; font-weight: 300; font-stretch: 88%; font-size: 1.15rem; color: var(--fg-2); }
.swatch-row { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch {
  position: relative; width: 52px; height: 52px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 6px 14px -8px rgb(0 0 0 / .6);
  transition: transform .35s var(--ease-out);
}
.swatch::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--cream); opacity: 0; transform: scale(.85);
  transition: opacity .3s, transform .4s var(--ease-out);
}
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-checked='true']::after { opacity: 1; transform: none; }
.swatch:focus-visible { outline: 3px solid var(--amber); outline-offset: 8px; box-shadow: none; }
.swatch-note { max-width: 44ch; }

@media (max-width: 767px) {
  .hall { grid-template-columns: minmax(0, 1fr); }
  .hall-film { grid-column: 1; grid-row: 1; height: 58svh; min-height: 340px; z-index: 2; }
  .hall-copy { grid-row: 2; min-height: 0; padding: 26px var(--gutter) 64px; gap: 18px; }
  .hall-copy > .eyebrow { order: 0; }
  .hall-copy > h2 { order: 1; }
  .hall-copy > .swatches { order: 2; position: sticky; top: calc(58svh - 1px); z-index: 1; background: var(--field); padding: 14px 0; border-top: 0; }
  .hall-copy > .body { order: 3; }
  .hall-copy > .textlink { order: 4; }
  .swatch { width: 48px; height: 48px; }
  .swatch-row { gap: 10px; }
}

/* ---------- 3. Evening: the lights come on, then the words ---------- */

.dusk {
  --c: 1; --w: 0;
  position: relative;
  height: 330svh;
  background: var(--film);
  color: var(--cream);
  --fg: var(--cream); --fg-2: var(--cream-2); --rule: rgb(243 239 230 / .2);
}
.dusk-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; }
.scrim--dusk {
  z-index: 2;
  background:
    linear-gradient(90deg, rgb(8 12 11 / calc(.82 * var(--c))) 0%, rgb(8 12 11 / calc(.55 * var(--c))) 38%, rgb(8 12 11 / 0) 66%),
    radial-gradient(ellipse 60% 70% at 18% 62%, rgb(8 12 11 / calc(.45 * var(--c))), rgb(8 12 11 / 0) 70%),
    linear-gradient(0deg, rgb(8 12 11 / calc(.45 * var(--c))) 0%, rgb(8 12 11 / 0) 40%),
    rgb(6 9 9 / calc(.62 * var(--w)));
}
.dusk-chapter {
  position: absolute; z-index: 3;
  left: var(--gutter); top: 50%;
  width: min(520px, calc(100% - 2 * var(--gutter)));
  display: grid; gap: 20px; justify-items: start;
  opacity: var(--c);
  transform: translate3d(0, calc(-50% + (1 - var(--c)) * -5svh), 0);
}
.dusk-chapter h2 { max-width: 11ch; }
.dusk .details { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 26rem; }
.dusk .details li { padding: 10px 0; border-top: 1px solid var(--rule); font-size: 1rem; color: var(--cream); }
.dusk .details li:last-child { border-bottom: 1px solid var(--rule); }

.litany {
  position: absolute; z-index: 3; inset: 0;
  display: grid; place-items: center start;
  padding: var(--header-h) var(--gutter) 40px;
  pointer-events: none;
  opacity: calc(min(1, calc(var(--w) * 3)) * var(--exit, 1));
}
.litany-words {
  margin: 0; max-width: none; text-align: left;
  font-weight: 300; font-stretch: 116%; letter-spacing: -0.045em; line-height: 1.02;
  font-size: clamp(3.4rem, 1rem + 8vw, 9rem);
  line-height: .98;
}
.litany-words .sentence { display: block; }
.litany-words .phrase { white-space: nowrap; }
@media (max-width: 767px) { .litany-words { font-size: min(14vw, 4.6rem); line-height: 1.02; } }
.lw { color: rgb(243 239 230 / .16); transition: color .7s var(--ease-out), text-shadow .9s var(--ease-out); }
.lw.is-lit { color: var(--cream); }
.lw.em { font-style: italic; font-stretch: 86%; letter-spacing: -0.03em; }
.lw.em.is-lit { color: var(--amber); text-shadow: 0 0 34px rgb(234 166 64 / .45); }

@media (max-width: 767px) {
  .dusk { height: 300svh; }
  /* Phones: the words sit in the night sky so the porch and windows stay in view as they light. */
  .dusk-chapter { top: calc(var(--header-h) + 34px); transform: translate3d(0, calc((1 - var(--c)) * -4svh), 0); gap: 12px; }
  .dusk-chapter .details { display: none; }
  .scrim--dusk {
    background:
      linear-gradient(180deg, rgb(8 12 11 / calc(.86 * var(--c))) 0%, rgb(8 12 11 / calc(.55 * var(--c))) 42%, rgb(8 12 11 / 0) 62%),
      rgb(6 9 9 / calc(.62 * var(--w)));
  }
  .dusk .details li { padding: 8px 0; font-size: .95rem; }
}

/* ---------- 5. Plan (next morning) ---------- */

.plan-section {
  background: var(--limestone); color: var(--ink); --ground: var(--limestone);
  --fg: var(--ink); --fg-2: var(--ink-2); --rule: rgb(18 27 25 / .18);
}
@media (prefers-color-scheme: dark) { .plan-section { --rule: rgb(230 235 229 / .18); } }
.plan-section .eyebrow > span { color: var(--fg); }
.plan-intro { gap: 24px; }
.plan-figure img { border-radius: 6px; }
.questions-note { margin-top: 22px; max-width: 60ch; }

/* ---------- 6. Begin and footer ---------- */

.begin {
  background: var(--night); color: var(--night-fg); --ground: var(--night);
  --fg: var(--night-fg); --fg-2: var(--night-fg-2); --rule: rgb(238 237 230 / .16);
}
.begin .close-copy h2 { max-width: none; }
.home .choice { font-weight: 400; font-stretch: 112%; letter-spacing: -0.02em; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem); }
.home .choice small { font-stretch: 100%; letter-spacing: 0; }

.home .site-footer {
  background: var(--night); color: var(--night-fg); --ground: var(--night);
  --fg: var(--night-fg); --fg-2: var(--night-fg-2); --rule: rgb(238 237 230 / .16);
}

/* ---------- Short screens (landscape phones) ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .walk-stage, .dusk-stage, .hall-film { min-height: 0; }
  h1.display { font-size: min(8.4vw, 15svh); }
  .walk-chapter .display--2, .dusk-chapter .display--2 { font-size: min(5.4vw, 11svh); }
  .walk-open { bottom: 14px; gap: 8px; }
  .walk-open .eyebrow { display: none; }
  .walk-chapter { bottom: 14px; gap: 10px; width: min(620px, 60%); }
  .walk-chapter .body, .dusk-chapter .body { font-size: .95rem; line-height: 1.4; }
  .dusk-chapter { top: auto; bottom: 14px; transform: translate3d(0, calc((1 - var(--c)) * 4svh), 0); gap: 10px; }
  .dusk .details { display: none; }
  .film-label { top: calc(var(--header-h) - 4px); }
}

/* ---------- Motion preferences ---------- */
/* Motion plays for everyone by Jace's instruction. The scroll films only move when
   the visitor scrolls; the afternoon film has Pause and Replay. Grain stops for
   reduced-motion visitors because it is texture, not content. */
@media (prefers-reduced-motion: reduce) {
  .walk-stage::after, .dusk-stage::after { animation: none; }
  .walk-cue i { animation: none; }
}

/* ---------- Candidate 8 ---------- */

/* Stages fill the large viewport, so no strip shows when a mobile toolbar collapses;
   copy at the bottom keeps clear of the toolbar while it is showing. */
@supports (height: 100lvh) {
  .home { --toolbar: calc(100lvh - 100svh); }
  .walk-stage, .dusk-stage { height: 100lvh; }
  .walk-open, .walk-chapter { margin-bottom: var(--toolbar); }
  @media (max-width: 767px) { .dusk-chapter { margin-bottom: var(--toolbar); } }
}

/* The dusk stage shows its first still until the frames have drawn. */


.chapter-links { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.chapter-links .textlink:last-child { font-weight: 500; }

/* Before you decide: who fits the job, and two estimates side by side */
.fit {
  background: var(--field); color: var(--field-fg); --ground: var(--field);
  --fg: var(--field-fg); --fg-2: var(--field-fg-2); --rule: rgb(238 241 234 / .22);
  padding-bottom: clamp(56px, 7vw, 110px);
  overflow-x: hidden; overflow-x: clip;
}
.fit-head { display: grid; gap: 22px; max-width: 820px; }
.fit h3 { font-weight: 400; font-stretch: 112%; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); letter-spacing: -0.02em; margin: 0 0 18px; }
.fit + .plan-section { padding-top: clamp(56px, 7vw, 96px); }

/* ---------- Is it a job for a contractor? (run 3: plain for everyone) ---------- */

.fit-who { margin-top: clamp(40px, 5vw, 72px); }
.fit .fit-who h3, .fit .price-copy h3 { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.7rem); margin: 0 0 12px; letter-spacing: -0.025em; }
.fit-lede { margin: 0 0 clamp(30px, 3.6vw, 48px); max-width: 50ch; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }

/* Who should do the job: a ladder from the biggest jobs to the smallest. Each rung has a
   dot sized to the job, what the job is like, who suits it and why, in full sentences.
   When the ladder arrives, light runs down the rail and fills each dot as it reaches it. */
.ladder { --dot: 30px; --gap: clamp(24px, 3vw, 48px); list-style: none; margin: 0; padding: 0; display: grid; }
.rung { position: relative; display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); align-content: start; column-gap: 20px; padding-bottom: 36px; }
.rung:last-child { padding-bottom: 0; }
.rung:nth-child(1) { --d: 30px; }
.rung:nth-child(2) { --d: 22px; }
.rung:nth-child(3) { --d: 15px; }
.rung:nth-child(4) { --d: 9px; }
/* The rail: one segment from each dot to the next; its light fills it top to bottom. */
.rung:not(:last-child)::before, .rung:not(:last-child)::after {
  content: ''; position: absolute; left: calc(var(--dot) / 2 - 1px); width: 2px;
  top: calc(var(--dot) / 2); bottom: calc(var(--dot) / -2);
  background: var(--rule);
}
.rung:not(:last-child)::after { background: var(--amber); transform-origin: 50% 0; }
.rung-dot {
  grid-row: 1 / span 4; justify-self: center; align-self: start; position: relative; z-index: 1;
  width: var(--d); height: var(--d); margin-top: calc((var(--dot) - var(--d)) / 2);
  border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px var(--field);
}
.rung-job { margin: 0; min-height: var(--dot); display: flex; align-items: center; font-size: 1rem; font-weight: 600; font-stretch: 104%; color: var(--fg-2); }
.rung-who { margin: 4px 0 10px; font-weight: 300; font-stretch: 112%; letter-spacing: -0.025em; line-height: 1.08; font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.15rem); color: var(--fg); text-wrap: balance; }
.rung-why { margin: 0; max-width: 44ch; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.55; word-spacing: .03em; text-wrap: pretty; }
/* Where Patton fits, on every rung: a plain line and a link to the form, service chosen. */
.rung-patton { grid-column: 2; display: grid; justify-items: start; gap: 2px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); max-width: 44ch; color: var(--fg); font-size: 1rem; line-height: 1.5; }
.rung-patton b { font-weight: 650; }
.rung-patton .lamp { display: inline-block; margin: 0 9px 2px 1px; vertical-align: middle; }
.rung-patton .textlink { color: var(--fg); }
.fit-next { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: clamp(30px, 3.6vw, 44px) 0 0; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.5; }
.fit-next .textlink { color: var(--fg); }
/* Arrival: the words rise rung by rung; the light runs down the rail and each dot fills. */
.home-ready .rung > p { opacity: 0; transform: translate3d(0, 14px, 0); }
.home-ready .rung.is-in > p { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.home-ready .rung.is-in > .rung-who { transition-delay: .08s; }
.home-ready .rung.is-in > .rung-why { transition-delay: .16s; }
.home-ready .rung.is-in > .rung-patton { transition-delay: .26s; }
.home-ready .ladder .rung-dot { background: var(--field); box-shadow: 0 0 0 5px var(--field), inset 0 0 0 2px var(--amber); }
.home-ready .ladder .rung:not(:last-child)::after { transform: scaleY(0); }
.home-ready .ladder .rung.is-in .rung-dot { background: var(--amber); animation: dot-fill .55s var(--ease-out) .1s both; transition: background-color .25s .1s; }
.home-ready .ladder .rung.is-in:not(:last-child)::after { transform: none; transition: transform .8s var(--ease-in-out) .35s; }
@keyframes dot-fill { 0% { transform: scale(1); } 45% { transform: scale(1.2); } 100% { transform: scale(1); } }
/* Wide screens: the ladder runs left to right, biggest job first. */
@media (min-width: 1200px) {
  .ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: var(--gap); }
  .rung { grid-template-columns: minmax(0, 1fr); grid-row: span 5; grid-template-rows: subgrid; padding: 0; }
  .rung-patton { align-self: stretch; align-content: start; grid-template-rows: auto 1fr; }
  .rung-patton .textlink { align-self: end; }
  .rung-patton { grid-column: auto; }
  .rung-dot { grid-row: auto; justify-self: start; margin: calc((var(--dot) - var(--d)) / 2) 0 calc((var(--dot) - var(--d)) / 2 + 16px) calc((var(--dot) - var(--d)) / 2); }
  .rung:not(:last-child)::before, .rung:not(:last-child)::after {
    top: calc(var(--dot) / 2 - 1px); bottom: auto; height: 2px; width: auto;
    left: calc(var(--dot) / 2); right: calc(-1 * (var(--gap) + var(--dot) / 2));
  }
  .rung:not(:last-child)::after { transform-origin: 0 50%; }
  .home-ready .ladder .rung:not(:last-child)::after { transform: scaleX(0); }
  .home-ready .ladder .rung.is-in:not(:last-child)::after { transform: none; transition-delay: calc(.35s + var(--i) * .25s); }
  .home-ready .ladder .rung.is-in .rung-dot { animation-delay: calc(.1s + var(--i) * .25s); transition-delay: calc(.1s + var(--i) * .25s); }
  .home-ready .rung.is-in > p { transition-delay: calc(var(--i) * .25s); }
  .home-ready .rung.is-in > .rung-who { transition-delay: calc(var(--i) * .25s + .08s); }
  .home-ready .rung.is-in > .rung-why { transition-delay: calc(var(--i) * .25s + .16s); }
  .home-ready .rung.is-in > .rung-patton { transition-delay: calc(var(--i) * .25s + .26s); }
  .rung-job { min-height: 0; }
  .rung-who { font-size: clamp(1.5rem, .95rem + 1vw, 2.05rem); }
  .rung-why { font-size: 1rem; }
}

/* Comparing estimates: one chart on paper. Six things an estimate should cover, and two
   made-up estimates side by side: a tick, or an amber "Not listed". */
.fit-price {
  margin-top: clamp(72px, 9vw, 132px); display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "copy chart" "take chart";
  grid-template-rows: auto 1fr; gap: 30px clamp(32px, 6vw, 96px); align-items: start;
}
.price-copy { grid-area: copy; display: grid; gap: 14px; justify-items: start; }
.price-copy h3 { margin: 0; }
.price-copy .body { margin: 0; color: var(--fg-2); max-width: 40ch; font-size: 1.0625rem; line-height: 1.55; }
.price-copy .body strong { display: block; margin-bottom: 6px; color: var(--fg); font-weight: 600; font-size: 1.2rem; line-height: 1.35; }
.est-caption { margin: 0; }
.compare {
  grid-area: chart; position: relative;
  background: #f3f4ef; color: #121b19; border-radius: 6px;
  padding: clamp(16px, 2.4vw, 30px) clamp(16px, 2.6vw, 34px) clamp(6px, 1.2vw, 14px);
  box-shadow: 0 1px 0 rgb(0 0 0 / .05), 0 24px 48px -24px rgb(4 10 9 / .7), 0 2px 6px -2px rgb(4 10 9 / .25);
  transform: none;
}
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table thead th {
  width: 6.4rem; padding: 0 4px 12px; border-bottom: 2px solid #121b19; vertical-align: bottom; text-align: center;
  font-weight: 650; font-stretch: 112%; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #121b19;
}
.compare-table thead th:first-child { width: auto; text-align: left; }
.compare-table thead th .est-long { display: block; margin-bottom: 2px; font-size: .75rem; }
.compare-table thead th b { display: block; font-size: 1.25rem; letter-spacing: 0; font-weight: 700; line-height: 1; }
.compare-h { font-style: italic; font-weight: 300; font-stretch: 88%; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: #3d4b47; }
.compare-table tbody th { padding: 13px 14px 13px 0; text-align: left; font-weight: 400; font-size: .9375rem; line-height: 1.42; color: #3d4b47; border-bottom: 1px solid rgb(18 27 25 / .14); }
.compare-table tbody th b { display: block; margin-bottom: 2px; font-weight: 650; font-size: 1rem; color: #121b19; }
.compare-table tbody th span { display: block; text-wrap: pretty; }
.compare-table td { padding: 8px 4px; text-align: center; vertical-align: middle; border-bottom: 1px solid rgb(18 27 25 / .14); }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table td.is-missing { background: rgb(234 166 64 / .1); }
.tick { position: relative; display: inline-block; width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #3e5c59; }
.tick::after {
  content: ''; position: absolute; left: 4px; top: 3px; width: 9px; height: 5px;
  border-left: 2px solid #121b19; border-bottom: 2px solid #121b19; transform: rotate(-45deg) scale(1);
  transform-origin: 30% 70%;
}
.not-listed {
  display: inline-block; padding: 1px 9px 2px; border-radius: 999px;
  font-style: italic; font-weight: 600; font-stretch: 92%; font-size: .875rem;
  color: #5c3806; background: rgb(234 166 64 / .3); box-shadow: inset 0 0 0 1.5px #d18a22;
}
.compare .tick { display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin: 0; border-radius: 5px; }
.compare .tick::after { left: 6px; top: 6px; width: 11px; height: 6px; border-width: 0 0 2.2px 2.2px; }
.compare .not-listed { margin: 0; padding: 3px 9px 4px; font-size: .8125rem; line-height: 1.15; white-space: normal; }
/* Arrival: Estimate A's ticks ink top to bottom, then Estimate B's, and its gaps are flagged. */
.home-ready .compare-table tbody tr:not(.is-in) .tick::after { transform: rotate(-45deg) scale(0); }
.home-ready .compare-table tbody tr.is-in td:nth-child(2) .tick::after { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) .15s; }
.home-ready .compare-table tbody tr.is-in td:nth-child(3) .tick::after { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) .5s; }
.home-ready .compare-table tbody tr:not(.is-in) .not-listed { opacity: 0; }
.home-ready .compare-table tbody tr.is-in .not-listed { animation: flag-in .55s var(--ease-out) .5s both; }
@keyframes flag-in { 0% { opacity: 0; transform: scale(1.5) rotate(-6deg); } 60% { opacity: 1; transform: scale(.94) rotate(-2deg); } 100% { opacity: 1; transform: rotate(-2deg); } }
.compare-take { grid-area: take; display: grid; gap: 20px; justify-items: start; }
.compare-sum { margin: 0; max-width: 42ch; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.compare-sum strong { color: var(--fg); font-weight: 600; }
.compare-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.btn-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
@media (max-width: 860px) {
  .fit-price { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "chart" "take"; gap: 26px; }
  .compare { transform: rotate(-.4deg); }
  .fit-price { grid-template-rows: none; }
}
@media (max-width: 767px) {
  .compare-table thead th { width: 5.4rem; letter-spacing: .06em; }
  .compare-table tbody th { padding: 12px 10px 12px 0; font-size: .9rem; }
  .compare-table tbody th b { font-size: .975rem; }
}
/* The narrowest phones: the columns are headed just "A" and "B". */
@media (max-width: 400px) {
  .compare-table thead th { width: 3.3rem; }
  .compare-table thead th .est-long { display: none; }
  .compare .not-listed { padding: 3px 6px 4px; font-size: .75rem; }
}

/* The blank checklist only exists on paper. */
.print-sheet { display: none; }
@media print {
  html.print-checklist body > :not(main), html.print-checklist main > :not(#fit), html.print-checklist #fit .wrap > :not(.print-sheet) { display: none !important; }
  html.print-checklist body, html.print-checklist #fit { background: #fff !important; color: #111 !important; padding: 0 !important; margin: 0; }
  html.print-checklist .print-sheet { display: block; font-size: 11pt; line-height: 1.4; }
  @page { margin: 16mm; }
  .print-logo { display: block; height: 26pt; width: auto; margin: 0 0 14pt; }
  .print-sheet h2 { margin: 0 0 6pt; font-size: 20pt; font-weight: 400; font-stretch: 112%; letter-spacing: -0.01em; }
  .print-sheet > p { margin: 0 0 14pt; }
  .print-sheet table { width: 100%; border-collapse: collapse; }
  .print-sheet th, .print-sheet td { border: .75pt solid #888; padding: 7pt 8pt; text-align: left; vertical-align: top; }
  .print-sheet thead th { font-size: 9pt; letter-spacing: .08em; text-transform: uppercase; }
  .print-sheet td { width: 15%; }
  .print-sheet tbody th b { display: block; }
  .print-sheet tbody th span { display: block; font-size: 9.5pt; color: #444; }
  .print-sheet .print-total th, .print-sheet .print-total td { height: 28pt; }
  .print-notes { margin-top: 18pt !important; padding-bottom: 90pt; border-bottom: .75pt solid #888; font-weight: 600; }
  .print-foot { margin-top: 12pt !important; font-size: 9pt; color: #555; }
}

/* One quiet label style on every film */
.film-label { padding: 3px 8px; background: rgb(9 14 13 / .72); font-size: .75rem; }

/* ---------- Candidate 9 ---------- */

.walk-cue { display: none; }
@media (min-width: 600px) { .walk-cue { display: block; } }

/* Phones: the dusk copy carries its own dark backdrop, and the film label moves to the bottom. */
@media (max-width: 767px) {
  .dusk-chapter::before {
    content: ''; position: absolute; z-index: -1;
    inset: calc(-1 * var(--header-h) - 40px) calc(-1 * var(--gutter)) -44px;
    background: linear-gradient(180deg, rgb(8 12 11 / .7), rgb(8 12 11 / .6) 75%, rgb(8 12 11 / 0));
  }
  .dusk .film-label { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
  .dusk-chapter .display--2 { font-size: min(10.4vw, 2.6rem); }
  .dusk-chapter .body { font-size: .95rem; line-height: 1.45; }
}

/* Narrow or short phones: the morning chapter tightens so it stays clear of the header. */
@media (max-width: 767px) and (max-height: 760px), (max-width: 380px) {
  .walk-chapter { gap: 10px; }
  .walk-chapter .display--2 { font-size: min(9.6vw, 2.3rem); }
  .walk-chapter .body { font-size: .95rem; line-height: 1.42; }
}

/* Short landscape: a firmer scrim under the chapter copy. */
@media (max-height: 560px) and (orientation: landscape) {
  .scrim--walk { background: linear-gradient(90deg, rgb(8 12 11 / calc(.55 * var(--a) + .8 * var(--b))) 0%, rgb(8 12 11 / 0) 70%), linear-gradient(0deg, rgb(8 12 11 / .55), rgb(8 12 11 / 0) 60%); }
}

/* Phones: the hall's service line reads before the colours; the link travels with them. */
@media (max-width: 767px) {
  .hall-copy > .body { order: 2; }
  .hall-copy > .swatches { order: 3; }
  .swatches .textlink { margin-top: 2px; }
}
.swatches .textlink { justify-self: start; }

/* Faded-out copy stays in the reading order but stops catching taps. */
/* Faded copy takes no taps; in stills mode (no-run) every block stays tappable. */
html.js:not(.no-run) .walk:not(.is-chapter) .walk-chapter, .home-ready .walk:not(.is-opening) .walk-open, .home-ready .dusk.is-night .dusk-chapter { pointer-events: none; }


/* Phones: a link focused in the hall copy scrolls clear of the sticky film above it. */
@media (max-width: 767px) { .hall-copy a, .hall-copy button { scroll-margin-top: calc(58svh + 96px); } }

/* ---------- Candidate 10 ---------- */

/* Phones: while the opening shows, the scrim sits only behind the words; the room stays lit. */
@media (max-width: 767px) {
  .scrim--walk {
    background:
      linear-gradient(180deg, rgb(8 12 11 / .32) 0%, rgb(8 12 11 / 0) 14%),
      linear-gradient(0deg, rgb(8 12 11 / calc(.8 * var(--a))) 0%, rgb(8 12 11 / calc(.5 * var(--a))) 30%, rgb(8 12 11 / 0) 50%),
      linear-gradient(0deg, rgb(8 12 11 / calc(.86 * var(--b))) 0%, rgb(8 12 11 / calc(.7 * var(--b))) 60%, rgb(8 12 11 / calc(.45 * var(--b))) 85%, rgb(8 12 11 / 0) 100%);
  }
}

/* "See real work" sits under the service line, on the gutter. */
.walk-foot { flex-direction: column; align-items: flex-start; gap: 8px; }

/* The hall: copy and colours share the left column on wide screens; on phones the
   colours pin directly under the film for as long as the film is pinned. */
.hall { grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); }
.hall-film { grid-row: 1 / -1; }
.hall-copy { grid-row: 2; min-height: 0; justify-content: flex-end; padding-bottom: 24px; }
.hall > .swatches { grid-column: 1; grid-row: 3; margin: 0 var(--gutter) 72px; width: auto; max-width: 30rem; }
@media (min-width: 768px) {
  .hall { min-height: 100svh; }
  .hall-copy { padding-top: calc(var(--header-h) + 40px); }
}
@media (max-width: 767px) {
  .hall { grid-template-rows: auto auto auto; }
  .hall-film { grid-row: 1; }
  .hall > .swatches {
    grid-row: 2; position: sticky; top: calc(58svh - 1px); z-index: 1;
    margin: 0; padding: 12px var(--gutter) 14px; max-width: none;
    background: var(--field); border-top: 0; box-shadow: 0 12px 18px -14px rgb(0 0 0 / .5);
  }
  .hall-copy { grid-row: 3; padding: 22px var(--gutter) 64px; }
  .hall-copy > .body { order: 2; }
  .film-bar { justify-content: flex-start; }
  .swatches .swatch-note { font-size: .8125rem; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .hall-copy h2 { max-width: none; }
}

/* The drawn house at night: windows glow like light, a warm spill under the porch, finer lines. */
.house .ln { stroke-width: 1.15; }
.house .ln.thin { stroke-width: .8; }
.house.is-lit .h-windows .glass { fill: url(#win-glow); opacity: 1; }
.house .spill { opacity: 0; transition: opacity 1.2s var(--ease-out) .6s; }
.house.is-lit .spill { opacity: 1; }

/* Wide screens: the opening headline gets a deeper, wider band where it crosses the
   pale tiles and the window (measured: >=3:1 under every glyph). */
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .walk-open::before {
    inset: -18% -6% -30% calc(-1 * var(--gutter));
    background:
      radial-gradient(ellipse 85% 80% at 40% 45%, rgb(8 12 11 / .56), rgb(8 12 11 / .34) 58%, rgb(8 12 11 / 0) 82%),
      linear-gradient(90deg, rgb(8 12 11 / .3) 0%, rgb(8 12 11 / .22) 60%, rgb(8 12 11 / 0) 85%);
  }
}
/* Body text over film never drops under 16px. */
@media (max-width: 767px) {
  .walk-chapter .body, .dusk-chapter .body { font-size: 1rem; }
}

/* ---------- Candidate 10: placeholders and the no-script fallback ---------- */

/* A 1KB blurred placeholder of each film's first frame sits on its canvas until the
   first real frame is drawn; it is positioned exactly as the frames are. */
.walk .film-canvas { background: var(--film) url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAASACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDkLCJpd6IMsVOK2LeB/MWMyx7j0XvWTphZXcpndsOMVLdQXkcjSLDMoPIJFYyNYnVWtmYpoDKA3zA8U3xACdOiBAHznj8a5+w1W7RBFOZHQHqPvLW5qc1rcaOskMjMyEZBPP4ilbsF+5zGj/8AHx+BrZuHYo2Wbr60UVNTcunsZSkic4JqOdjvXk8nnnrRRTiKR//Z') 58% 50% / cover no-repeat; }
.dusk .film-canvas { background: var(--film) url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAASACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDh4LeSadY0G4npVwaZKm55kYRrnJxRpGpJp915jw71YcjuKml1ia6R0kDElsrjsPSmpJIlxbZOL6UMqRMFwAApGRV+wuDcl0kTLKCcgcfSsVrgRkh2Oc5GOwqOa/ZV2xMwyPmOeuKqFeSerFKlFq1ivHVyLjpxRRWLNkSbVPVR+VIY08v7i/lRRUobP//Z') 60% 50% / cover no-repeat; }
@media (max-aspect-ratio: 4/5) {
  .walk .film-canvas { background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAgABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDlOmnOR/z0H8jVmOdVCKVckjqBUmmW63FrOHKgK275jirElzDbbRt3n0FYSNolG2Ypp87gDKsDUF+FW4DKcB0VuvcirWnoJbSVCCQXGQPStNrDSdoVlk3Y5PFEpJBGLZ//2Q=='); background-position: 50% 50%; }
  .dusk .film-canvas { background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAgABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDIm1FhIfL2bB+OfxpBrEUkDFIXEoHAK5BrOxPn5VYD2Wp5EnaJQobPHt2rX6xMz9jAggk3QMJJWLF8AbscVJCUS5idpDtWQA/NVWaOaZ9xI46AEVF9nmUYGcZz1rmubn//2Q=='); background-position: 50% 50%; }
}

/* If the page script never runs (blocked or failed), the page lays itself out as a
   plain, readable sequence of stills: nothing waits for an animation that won't come. */
:is(.no-run, html:not(.js)) .walk, :is(.no-run, html:not(.js)) .dusk { height: auto; }
:is(.no-run, html:not(.js)) .walk-stage, :is(.no-run, html:not(.js)) .dusk-stage { position: relative; height: auto; min-height: 0; overflow: visible; display: grid; gap: 40px; padding: calc(var(--header-h) + 40vh) 0 48px; }
:is(.no-run, html:not(.js)) .walk-stage { background: var(--film) url('/assets/media/morning-kitchen-last.webp') 58% 0 / 100% auto no-repeat; }
:is(.no-run, html:not(.js)) .dusk-stage { background: var(--film) url('/assets/media/dusk-house-lit.webp') 60% 0 / 100% auto no-repeat; }
:is(.no-run, html:not(.js)) .film-canvas, :is(.no-run, html:not(.js)) .walk-cue { display: none; }
:is(.no-run, html:not(.js)) .walk-open, :is(.no-run, html:not(.js)) .walk-chapter, :is(.no-run, html:not(.js)) .dusk-chapter, :is(.no-run, html:not(.js)) .litany {
  position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto;
  opacity: 1; transform: none; width: auto; margin: 0; padding: 0 var(--gutter); pointer-events: auto;
}
:is(.no-run, html:not(.js)) .lw { color: var(--cream); }
:is(.no-run, html:not(.js)) .lw.em { color: var(--amber); }
:is(.no-run, html:not(.js)) .swatches { display: none; }
.no-run .hall-film, html:not(.js) .hall-film { background: var(--film) url('/assets/media/afternoon-paint-last.webp') 45% 50% / cover no-repeat; }
:is(.no-run, html:not(.js)) .film-bar { display: none; }

/* The planning column is narrower than the other chapters: its heading steps down a size
   so "the kitchen table." stays whole without crossing into the tools beside it. */
.plan-intro .display--2 { font-size: clamp(2.3rem, 1rem + 3.3vw, 4.4rem); }

/* The narrowest phones: section headings step down so whole phrases still fit. */
@media (max-width: 360px) { .display--2 { font-size: 1.95rem; } }

/* ======================================================================
   Candidate 11
   ====================================================================== */

/* Wide screens: the band behind the opening headline fades out at its top and bottom,
   so no edge of it ever reads as a line across the room. */
.walk-open::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}

/* The film controls sit at the bottom right, clear of the paint tray and the can. */
.film-bar { justify-content: flex-end; }

/* Phones, afternoon: the chapter reads first on the green ground; then the film and the
   colour row arrive together and fit on one screen, so nothing hides under a pinned film. */
@media (max-width: 767px) {
  .hall { grid-template-rows: auto auto auto; }
  .hall-copy { grid-row: 1; padding: calc(var(--header-h) + 34px) var(--gutter) 26px; gap: 16px; }
  .hall-film { grid-row: 2; position: relative; top: auto; height: min(60svh, 600px); min-height: 330px; z-index: auto; }
  .hall > .swatches { grid-row: 3; position: static; padding: 16px var(--gutter) 60px; box-shadow: none; }
  .hall-copy a, .hall-copy button { scroll-margin-top: calc(var(--header-h) + 16px); }
  /* Six colours always share one row; each keeps a 48px touch area. */
  .swatch-row { --swatch-gap: 10px; flex-wrap: nowrap; gap: var(--swatch-gap); }
  .swatch { --s: clamp(38px, calc((100vw - 2 * var(--gutter) - 5 * var(--swatch-gap)) / 6), 48px); width: var(--s); height: var(--s); flex: none; }
  .swatch::before { content: ''; position: absolute; inset: calc((var(--s) - 48px) / 2); border-radius: 50%; }
}

/* Phones, evening: the copy's dark backdrop reaches well past the links, so they keep
   their contrast once the windows are lit behind them. */
@media (max-width: 767px) {
  .dusk-chapter::before {
    inset: calc(-1 * var(--header-h) - 40px) calc(-1 * var(--gutter)) -110px;
    background: linear-gradient(0deg, rgb(8 12 11 / 0) 0, rgb(8 12 11 / .66) 90px, rgb(8 12 11 / .72) 100%);
  }
}

/* Short landscape screens: body text over film stays at 16px. */
@media (max-height: 560px) and (orientation: landscape) {
  .walk-chapter .body, .dusk-chapter .body { font-size: 1rem; line-height: 1.4; }
}

/* The day dial: a small glass clock between the nameplate and the menu. The sun (or,
   at night, the moon) rides the arc; the time runs with the scroll. */
.daydial {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 12px;
  border-radius: 999px; color: #f3efe6; pointer-events: none;
  background: rgb(12 18 17 / .62);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 10px 30px -18px rgb(0 0 0 / .6);
  transition: background-color .5s var(--ease-out), opacity .6s var(--ease-in-out), transform .6s var(--ease-in-out);
  margin-right: auto; margin-left: 14px;
  will-change: transform; contain: layout paint;
}
:root[data-head='light'] .daydial { background: rgb(14 20 18 / .88); }
.dd-sky { width: 44px; height: 26px; overflow: visible; }
.dd-arc { fill: none; stroke: rgb(243 239 230 / .3); stroke-width: 1; stroke-dasharray: 1.5 2.5; }
.dd-hz { fill: none; stroke: rgb(243 239 230 / .55); stroke-width: 1.2; stroke-linecap: round; }
.dd-sun circle { fill: var(--amber); }
.dd-sun .dd-halo { fill: rgb(234 166 64 / .28); transition: fill .6s; }
.daydial[data-phase='dawn'] .dd-sun circle:not(.dd-halo), .daydial[data-phase='dusk'] .dd-sun circle:not(.dd-halo) { fill: #f0b457; }
.daydial[data-phase='dusk'] .dd-halo { fill: rgb(240 140 64 / .4); }
.dd-moon path { fill: #e9e6da; }
.dd-time { display: inline-flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; font-stretch: 100%; font-weight: 600; font-size: .94rem; letter-spacing: .01em; min-width: 4.6em; }
.dd-time small { font-size: .75rem; font-weight: 500; opacity: .8; letter-spacing: .04em; }
@media (max-width: 767px) {
  /* Phones: nameplate, dial and button sit at equal gaps (the header spaces them). */
  .daydial { height: 40px; gap: 7px; padding: 0 11px 0 9px; margin: 0; }
  .dd-sky { width: 36px; height: 21px; }
  .dd-time { font-size: .875rem; min-width: 4.1em; }
}
/* The narrowest phones keep the dial and drop the digits, so the main button always fits. */
@media (max-width: 374px) { .dd-time small { display: none; } .dd-time { min-width: 2.7em; } .dd-sky { width: 30px; } .daydial { gap: 6px; padding: 0 10px 0 8px; } }
@media (max-width: 359px) { .daydial { display: none; } }
.no-run .daydial, html:not(.js) .daydial { display: none; }

/* The lamp on the main button is a porch light: low by day, on at dusk. */
.home .lamp { transition: background-color .8s, box-shadow 1.2s var(--ease-out); }
:root[data-time='morning'] .home .lamp, :root[data-time='afternoon'] .home .lamp { background: #c9944a; box-shadow: 0 0 0 3px rgb(234 166 64 / .14); }
@keyframes lamp-on { 0% { opacity: .5; } 12% { opacity: 1; } 18% { opacity: .55; } 30% { opacity: 1; } 100% { opacity: 1; } }
:root[data-time='evening'] .home .lamp { animation: lamp-on 1.1s steps(1, end) both; box-shadow: 0 0 0 3px rgb(234 166 64 / .3), 0 0 16px 3px rgb(234 166 64 / .85); }

/* A chosen colour spills out of its chip. */
.swatch-ripple { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 0 var(--c); animation: swatch-spill .8s var(--ease-out) forwards; }
@keyframes swatch-spill { from { box-shadow: 0 0 0 0 var(--c); opacity: .9; } to { box-shadow: 0 0 0 22px var(--c); opacity: 0; } }

/* ======================================================================
   Smoothness (candidate 11)
   ====================================================================== */

/* The scrims no longer recompute their gradients on every scroll frame. Each one is a
   fixed gradient on its own layer, and the scroll only fades that layer (opacity is
   composited, never repainted). Same look as before at every end state. */
.scrim--walk, .scrim--dusk { background: none; }
.scrim--walk::before, .scrim--walk::after, .scrim--dusk::before, .scrim--dusk::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; will-change: opacity;
}
.scrim--walk { background: linear-gradient(180deg, rgb(8 12 11 / .55) 0%, rgb(8 12 11 / 0) 22%); }
.scrim--walk::before { opacity: var(--a); background: linear-gradient(0deg, rgb(8 12 11 / .78) 0%, rgb(8 12 11 / 0) 58%); }
.scrim--walk::after {
  opacity: var(--b);
  background: linear-gradient(0deg, rgb(8 12 11 / .5) 0%, rgb(8 12 11 / 0) 68%), linear-gradient(90deg, rgb(8 12 11 / .7) 0%, rgb(8 12 11 / 0) 62%);
}
.scrim--dusk::before {
  opacity: var(--c);
  background:
    linear-gradient(90deg, rgb(8 12 11 / .82) 0%, rgb(8 12 11 / .55) 38%, rgb(8 12 11 / 0) 66%),
    radial-gradient(ellipse 60% 70% at 18% 62%, rgb(8 12 11 / .45), rgb(8 12 11 / 0) 70%),
    linear-gradient(0deg, rgb(8 12 11 / .45) 0%, rgb(8 12 11 / 0) 40%);
}
.scrim--dusk::after { opacity: var(--w); background: rgb(6 9 9 / .62); }
@media (max-width: 767px) {
  .scrim--walk { background: linear-gradient(180deg, rgb(8 12 11 / .32) 0%, rgb(8 12 11 / 0) 14%); }
  .scrim--walk::before { background: linear-gradient(0deg, rgb(8 12 11 / .8) 0%, rgb(8 12 11 / .5) 30%, rgb(8 12 11 / 0) 50%); }
  .scrim--walk::after { background: linear-gradient(0deg, rgb(8 12 11 / .86) 0%, rgb(8 12 11 / .6) 34%, rgb(8 12 11 / .22) 50%, rgb(8 12 11 / 0) 62%); }
  .scrim--dusk::before { background: linear-gradient(180deg, rgb(8 12 11 / .86) 0%, rgb(8 12 11 / .55) 42%, rgb(8 12 11 / 0) 62%); }
}
@media (max-height: 560px) and (orientation: landscape) {
  .scrim--walk { background: linear-gradient(0deg, rgb(8 12 11 / .55), rgb(8 12 11 / 0) 60%); }
  .scrim--walk::before { background: linear-gradient(90deg, rgb(8 12 11 / .55) 0%, rgb(8 12 11 / 0) 70%); }
  .scrim--walk::after { background: linear-gradient(90deg, rgb(8 12 11 / .8) 0%, rgb(8 12 11 / 0) 70%); }
}

/* Copy that fades and drifts with the scroll gets its own layer up front. */
.walk-open, .walk-chapter, .dusk-chapter, .litany { will-change: opacity, transform; }

/* Phones and tablets: no film grain (at this size it was barely visible, and blending
   a full-screen layer over a moving film cost frames); glass chips are solid. */
@media (pointer: coarse), (max-width: 767px) {
  .walk-stage::after, .dusk-stage::after { display: none; }
  .daydial { background: rgb(12 18 17 / .84); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ======================================================================
   Arrivals and evening life (candidate 11)
   ====================================================================== */

/* Section headings: whole phrases rise from behind a mask, one after another. The mask
   keeps room for italic descenders. */
.home-ready [data-reveal] .rise-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .12em 0; margin-bottom: -.12em; }
.home-ready [data-reveal] .rise { display: inline-block; transform: translate3d(0, 135%, 0); }
.home-ready [data-reveal] h2.is-in .rise { transform: none; transition: transform 1.15s var(--ease-out) calc(.08s + var(--k) * .12s); }
/* ...and the amber hairline after each time word draws itself out. */
.home-ready [data-reveal] .eyebrow > span::after { transform: scaleX(0); transform-origin: left; }
.home-ready [data-reveal] .eyebrow.is-in > span::after { transform: none; transition: transform 1s var(--ease-in-out) .2s; }

/* The planning illustration develops like a print: soft and grey, then sharp and warm. */
@keyframes print-develop {
  0% { opacity: 0; filter: grayscale(1) brightness(1.5) contrast(.6) blur(4px); }
  30% { opacity: 1; }
  100% { opacity: 1; filter: none; }
}
.home-ready .plan-figure img { opacity: 0; }
.home-ready .plan-figure.is-in img { animation: print-develop 1.9s var(--ease-in-out) .1s both; }

/* The evening house: chimney smoke and fireflies, once the windows are lit. */
.house .h-smoke path { fill: none; stroke: rgb(238 237 230 / .5); stroke-width: 1.5; stroke-linecap: round; opacity: 0; }
@media (max-width: 767px) { .house .h-smoke path { stroke-width: 2.2; } }
.house .h-flies circle { opacity: 0; }
@keyframes smoke-rise {
  0% { opacity: 0; transform: translate(0, 4px) scaleY(.8); }
  25% { opacity: .55; }
  100% { opacity: 0; transform: translate(6px, -16px) scaleY(1.15); }
}
@keyframes firefly {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .95; }
  30% { opacity: .25; }
  48% { transform: translate(var(--x), var(--y)); opacity: .9; }
  70% { opacity: .2; }
  86% { transform: translate(calc(var(--x) * -.5), calc(var(--y) * .4)); opacity: .8; }
}
.house.is-lit .h-smoke path { transform-box: fill-box; transform-origin: 50% 100%; animation: smoke-rise 5.2s ease-out infinite; }
.house.is-lit .h-smoke path:nth-child(2) { animation-delay: -2.6s; }
.house.is-lit .h-flies circle { animation: firefly var(--d) ease-in-out var(--o) infinite; }
.house:not(.is-awake) .h-smoke path, .house:not(.is-awake) .h-flies circle { animation-play-state: paused; }

/* Nothing that drifts or develops may widen the page. */
.begin, .plan-section { overflow-x: hidden; overflow-x: clip; }

/* Touch targets: every control at least 44px on phones (the films' chips, the header). */
@media (pointer: coarse), (max-width: 767px) {
  .film-btn { min-height: 44px; }
  .home .site-nav .btn { min-height: 44px; }
  .home .nameplate { height: 44px; }
  .daydial { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .house.is-lit .h-smoke path { animation: none; opacity: 0; }
  .house.is-lit .h-flies circle { animation: none; opacity: .7; }
}

/* ======================================================================
   Candidate 12
   ====================================================================== */

/* The header carries a soft fade of whatever ground is under it, so copy scrolling up
   never shows between or through its pills. Films get a light veil; flat grounds their
   own colour. */
.home .site-header::before {
  content: ''; position: absolute; z-index: -1; inset: 0 0 auto 0; height: calc(var(--header-h) + 14px);
  pointer-events: none;
  background: linear-gradient(180deg, var(--head-c) 0, var(--head-c) calc(var(--header-h) - 8px), rgb(0 0 0 / 0) 100%);
}
.home .site-header { --head-c: rgb(8 12 11 / .34); }
:root[data-head='field'] .home .site-header { --head-c: #2c4643; }
:root[data-head='light'] .home .site-header { --head-c: #e4e8e2; }
:root[data-head='night'] .home .site-header { --head-c: #0e1b1e; }
@media (prefers-color-scheme: dark) { :root[data-head='light'] .home .site-header { --head-c: #172120; } }
/* The homepage's own canvas (seen only past either end on a phone's rubber-band scroll). */
html:has(> body.home) { background: #0b100f; }
.home { background: #0b100f; }
@media (pointer: coarse), (max-width: 767px) { .daydial, :root[data-head='light'] .daydial { background: #0c1211; } }

/* Phones: the opening's words sit on a slightly deeper band. */
@media (max-width: 767px) {
  .scrim--walk::before { background: linear-gradient(0deg, rgb(8 12 11 / .84) 0%, rgb(8 12 11 / .56) 30%, rgb(8 12 11 / 0) 52%); }
}

/* Swatches carry a light rim, so even Ink and Slate stand off the green (3:1). */
.swatch { box-shadow: inset 0 0 0 1.5px rgb(243 239 230 / .5), 0 6px 14px -8px rgb(0 0 0 / .6); }

/* The planning heading steps down with the others on the narrowest phones. */
.plan-intro { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 360px) { .plan-intro .display--2 { font-size: 1.95rem; } }

/* Short landscape: the afternoon heading keeps clear of the film's edge. */
@media (max-height: 560px) and (orientation: landscape) { .hall-copy { padding-right: calc(var(--gutter) + 16px); } }

/* The estimates lead on to the form. */
.price-copy .textlink { margin-top: 2px; }

/* The evening house: the chimney's smoke fades as it rises (a gradient stroke). */
.house .h-smoke path { stroke: url(#smoke-fade); stroke-width: 2.4; }
@media (max-width: 767px) { .house .h-smoke path { stroke-width: 3.4; } }
.home-run .walk .film-canvas.is-drawn.is-dawned { animation: none; filter: none; transform: none; }

/* ======================================================================
   Candidate 13
   ====================================================================== */

/* A page opened in a background tab keeps its arrival for when it is looked at. */
:root.is-hidden-start .walk .film-canvas:not(.is-drawn), :root.is-hidden-start .walk .walk-open [data-rise] { animation: none !important; }

/* Short landscape: the afternoon heading fits beside the film. */
@media (max-height: 560px) and (orientation: landscape) { .hall-copy .display--2 { font-size: min(5.2vw, 11svh); } }



/* Running text breathes a little more (Archivo is set tight). */
.home .body, .walk-sub, .home .lede, .fit-list li, .checklist span, .questions li { word-spacing: .03em; }


/* ---------- Candidate 14 ---------- */
/* The cream button over a light ground keeps a 1px ink edge, so it never dissolves into the band. */
:root[data-head='light'] .home .site-header .btn { box-shadow: inset 0 0 0 1px rgb(18 27 25 / .24), 0 8px 22px -12px rgb(0 0 0 / .45); }
@media (prefers-color-scheme: dark) { :root[data-head='light'] .home .site-header .btn { box-shadow: none; } }

/* Phones: the swatches spread across the row; the fit eyebrow wraps, so its hairline
   (which would dangle at the end of the first line) steps aside. */
@media (max-width: 767px) {
  .swatch-row { justify-content: space-between; gap: var(--swatch-gap); }
}
@media (max-width: 560px) {
  .fit .eyebrow > span::after { display: none; }
}

/* ---------- Run 3 ---------- */
/* The day dial tells the day story; once the evening chapter is over it rests, and
   returns if the visitor scrolls back into the story. */
.dial-rest .daydial { opacity: 0; transform: translate3d(0, -8px, 0) scale(.94); }
.dial-instant .daydial { transition: none; }
/* At the page's end the footer shows the logo, so the header's plate steps aside. */
.home .site-header .nameplate { transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }

/* Focus over film: the two-tone ring (cream, with near-black inside), as in the header. */
.walk, .dusk, .hall-film { --ground: var(--film); }
.hall { --ground: var(--field); }
.hall-film { --fg: var(--cream); }
/* Narrow phones: any eyebrow that wraps drops its hairline. */
@media (max-width: 400px) { .plan-section .eyebrow > span::after { display: none; } }

/* The homepage's light-ground edge rule is more specific: the two-tone focus ring again. */
:root[data-head='light'] .home .site-header .btn:focus-visible { outline: 2px solid #f3efe6; outline-offset: 3px; box-shadow: 0 0 0 5px #0b100f; }
@media (min-width: 768px) and (max-width: 900px) {
  .hall-copy h2.display--2 { font-size: min(clamp(2.45rem, 1.3rem + 4.6vw, 6rem), 6.1vw); }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .hall .swatch-row { display: grid; grid-template-columns: repeat(3, max-content); gap: 12px 14px; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  .hall-copy h2.display--2 { font-size: min(clamp(2.45rem, 1.3rem + 4.6vw, 6rem), 5.6vw); }
}

/* The plan becomes two columns above 900px; its longest phrase needs its own cap. */
@media (min-width: 901px) and (max-width: 1100px) {
  .plan-intro h2.display--2 { font-size: min(clamp(2.3rem, 1rem + 3.3vw, 4.4rem), 4.2vw); }
}

/* ---------- Phones: cheaper paints ---------- */
@media (pointer: coarse), (max-width: 767px) {
  .home-ready .plan-figure.is-in img { animation: develop-lite 1.1s var(--ease-out) .1s both; }
  .house.is-lit .h-smoke path { animation: none; opacity: 0; }
  .house.is-lit .h-flies circle { animation: none; opacity: .75; }
}
@keyframes develop-lite { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(1.015); } to { opacity: 1; transform: none; } }
.walk-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; }
.walk-go { font-weight: 650; }
@media (max-width: 767px) { .walk-links { gap: 0 18px; } }

/* ---------- Phones: the opening lands before the first swipe ---------- */
/* The words are in place about 1.3s after they start (not 2.1s), and the dawn takes
   1.5s, so the film is not still zooming by itself under a visitor's first scroll. */
@media (pointer: coarse), (max-width: 767px) {
  .home-run.is-arrived [data-rise] { animation-duration: .9s; }
  .home-run .walk-open .eyebrow[data-rise] { animation-delay: .12s; }
  .home-run .walk-open .line:nth-child(1) > [data-rise] { animation-delay: .2s; }
  .home-run .walk-open .line:nth-child(2) > [data-rise] { animation-delay: .28s; }
  .home-run .walk-open .line:nth-child(3) > [data-rise] { animation-delay: .36s; }
  .home-run .walk-foot[data-rise] { animation-delay: .4s; }
  .home-run .walk .film-canvas.is-drawn, .home-run .walk .film-canvas.is-drawn ~ .dawn { animation-duration: 1.5s; }
}

/* ======================================================================
   Phones: the films play, the words scroll (mobile pass 7)
   ====================================================================== */
/* Nothing on the film stages follows the scroll on a phone. Each film is pinned and
   plays by itself (a video, home.js); the words scroll over it natively, with the
   finger. The section is as tall as its words: the opening fills the first screen,
   the film shows between the blocks, and the stage lets go when the words run out.
   Same query as home.js. Stills mode (no-run) keeps its own layout. */
@media (max-width: 767px), (pointer: coarse) and (max-height: 560px) {
  html.js:not(.no-run) .walk, html.js:not(.no-run) .dusk { height: auto; }
  html.js:not(.no-run) .walk-stage, html.js:not(.no-run) .dusk-stage {
    position: relative; height: auto; min-height: 0;
    overflow: hidden; overflow: clip;
    display: grid; grid-template-columns: minmax(0, 1fr);
  }
  html.js:not(.no-run) .walk-stage { grid-template-rows: minmax(100svh, auto) auto; }
  html.js:not(.no-run) .dusk-stage { grid-template-rows: auto auto; }

  /* The film and its veils: pinned for the whole chapter. */
  html.js:not(.no-run) :is(.walk-stage, .dusk-stage) > :is(.film-canvas, .dawn, .scrim) {
    grid-row: 1 / 3; grid-column: 1; align-self: start;
    position: sticky; inset: auto; top: 0;
    width: 100%; height: 100vh; height: 100lvh;
  }
  /* The label travels with its film (generated media is always labelled). */
  html.js:not(.no-run) :is(.walk-stage, .dusk-stage) > .film-label {
    grid-row: 1 / 3; grid-column: 1; align-self: start; justify-self: end;
    position: sticky; inset: auto; top: calc(var(--header-h) + 10px);
    margin: calc(var(--header-h) + 10px) var(--gutter) 0 0;
  }
  html.js:not(.no-run) .dusk-stage > .film-label {
    align-self: end; top: auto; bottom: max(12px, env(safe-area-inset-bottom));
    margin: 0 var(--gutter) max(12px, env(safe-area-inset-bottom)) 0;
  }
  html.js:not(.no-run) .walk-cue { display: none; }

  /* The words: in the flow, full strength, moving only with the page. */
  html.js:not(.no-run) :is(.walk-open, .walk-chapter, .dusk-chapter, .litany) {
    position: relative; inset: auto; z-index: 3;
    opacity: 1; transform: none; will-change: auto;
  }
  /* Night lighting never disables copy that is still visible in the native flow. */
  html.js:not(.no-run) .dusk.is-night .dusk-chapter { pointer-events: auto; }
  html.js:not(.no-run) .walk-open {
    grid-row: 1; grid-column: 1; align-self: end;
    margin: 0 var(--gutter) max(26px, env(safe-area-inset-bottom));
  }
  html.js:not(.no-run) .walk-chapter {
    grid-row: 2; grid-column: 1;
    margin: 42svh var(--gutter) max(22svh, 120px);
  }
  html.js:not(.no-run) .dusk-chapter {
    grid-row: 1; grid-column: 1;
    margin: calc(var(--header-h) + 34px) var(--gutter) 0;
  }
  html.js:not(.no-run) .litany {
    grid-row: 2; grid-column: 1;
    margin-top: 46svh; min-height: 88svh;
    padding: 0 var(--gutter);
  }
  /* Night falls (and the words light) when the line is on screen: timed, not scrolled. */
  html.js:not(.no-run) .dusk .scrim--dusk::after { opacity: 0; transition: opacity 1.2s var(--ease-out); }
  html.js:not(.no-run) .dusk.is-night .scrim--dusk::after { opacity: 1; }
}
/* Each text unit fades only at the header. The opening's arrival stays on its inner
   spans; the exit uses their wrappers, so neither animation replaces the other.
   Where scroll timelines are unsupported the words simply scroll on. */
@supports (animation-timeline: view()) {
  @media (max-width: 767px), (pointer: coarse) and (max-height: 560px) {
    html.js:not(.no-run) :is(.walk-open .eyebrow > span, .walk-open h1 > .line,
      .walk-sub, .walk-links > a, .walk-chapter > .eyebrow, .dusk-chapter > .eyebrow,
      .walk-chapter h2 > .nowrap, .dusk-chapter h2 > .nowrap,
      .walk-chapter > .body, .dusk-chapter > .body, .dusk-chapter .details > li,
      .walk-chapter > a, .chapter-links > a, .litany-words .phrase) {
      animation: copy-exit linear both;
      /* Plain lengths and percentages only: a value Safari rejected here would leave the
         animation on the document timeline, i.e. the words stuck at their end state. */
      animation-timeline: view(block 64px 0px);
      animation-range: exit 20% exit 100%;
    }
    html.js:not(.no-run) :is(.walk-chapter h2 > .nowrap, .dusk-chapter h2 > .nowrap, .litany-words .phrase) { display: inline-block; }
    html.js:not(.no-run) :is(.walk-open, .walk-chapter, .dusk-chapter, .litany) :is(a:focus-within, a:focus-visible) {
      animation: none; opacity: 1;
    }
    html.js:not(.no-run) :is(.walk-open, .walk-chapter, .dusk-chapter, .litany):focus-within { opacity: 1; }
  }
}
@keyframes copy-exit { to { opacity: 0; } }