/* ==========================================================================
   Melly's Compliance 2.0: THE HOMEPAGE SCENE (js/scene.js) and the plain page under it.
   Map on the wall → the cut (red pin to red leather) → the desk: papers, the brief, the stamp, the folder.
   Loaded on the homepage only. The frame and pad boxes come from site/assets/scene/scene.json (stamped into
   the page by the build as a small <style>). One layout switch, shared with the <picture> sources and
   js/scene.js: (max-width: 760px), (max-aspect-ratio: 4/5) = phone (portrait art, card as a bottom sheet).
   ========================================================================== */
.scene {
  --arw: 1672; --arh: 941; --ax: 1; --ay: 0.5;            /* the art's aspect and where the cover crop is anchored (the desk) */
  /* (2.1) the landing layout (desktop): headline on top; the card (left third) and the framed map (right two thirds)
     under it. The frame's box and the art's placement (--bw, --sx, --sy, --ft, --fb) are computed from scene.json in
     the page's own <style> (scripts/lib/home.mjs layoutCss). Used by the scene's children (cq units = the scene). */
  --g: max(3.4cqw, var(--gutter));                       /* side gutter */
  --hh: var(--header-h);                                 /* the floating header */
  --h1: clamp(56px, min((100cqw - 2 * var(--g)) * 0.072, 11.5cqh), 112px);   /* one line: the H1 is 11.6em wide */
  --sub: 20px;
  --head-top: calc(var(--hh) + 2px);
  --head-h: calc(var(--h1) * 0.92 + 10px + var(--sub) * 1.35);
  --A: calc(var(--head-top) + var(--head-h) + clamp(14px, 3cqh, 32px));   /* the frame's outer top, at the earliest */
  --B: calc(100cqh - clamp(18px, 4cqh, 40px));                             /* the frame's outer bottom, at the latest */
  --cw: clamp(320px, 32cqw, 420px);                                         /* the card column */
  --X0: calc(var(--g) + var(--cw) + clamp(24px, 3cqw, 48px));
  --X1: calc(100cqw - var(--g));
  --legend-h: 150px;
  --film: cubic-bezier(0.65, 0, 0.35, 1);
  --leather: #8f2016;
  --muted: color-mix(in srgb, var(--ink) 68%, var(--cream));
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;   /* clip: never a scroll container */
  height: 100svh; min-height: 640px;
  background: #2a160c;
  container-type: size;
}
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .scene { --arw: 941; --arh: 1672; --ax: 0.5; --ay: 0; min-height: 640px; }
}
/* (2.1) the homepage header floats over the scene: no bar; a soft cream backing only once the scene has shrunk away
   (js/home.js adds .is-solid); cream words while it sits over the dark desk (.is-on-dark) */
.page--home .site-header { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom: 0; transition: background-color 300ms ease, box-shadow 300ms ease; }
.page--home .site-header__inner { max-width: none; padding-inline: max(3.4vw, var(--gutter)); }
.page--home .site-header.is-solid { background: rgb(246 222 185 / 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgb(200 160 78 / 0.5); }
.page--home .site-header.is-on-dark:not(.is-solid) .brand__name { color: var(--cream); }
.scene__pic { position: absolute; inset: 0; z-index: 0; overflow: hidden; overflow: clip; }
.plane { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
.plane[hidden] { display: none; }
/* a cover-fitted stage: the background art plus boxes placed in % of the art (pure CSS, no layout shift) */
.stage {
  --sw: max(100cqw, 100cqh * var(--arw) / var(--arh));
  --sh: max(100cqh, 100cqw * var(--arh) / var(--arw));
  position: absolute; width: var(--sw); height: var(--sh);
  left: calc((100cqw - var(--sw)) * var(--ax)); top: calc((100cqh - var(--sh)) * var(--ay));
}
.stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* (2.1) the wall: placed so the frame's inner box lands in the map's space (numbers from the page's <style>) */
.stage--wall { left: var(--sx); top: var(--sy); width: var(--SW); height: var(--SH); }
/* clear wall above the picture when the frame sits lower than the picture's own wall: its top-edge colours, a touch darker upward */
.stage--wall::before { content: ""; position: absolute; left: 0; width: 100%; bottom: calc(100% - 48px); height: calc(var(--sy) + 108px); background-color: #b4703e; pointer-events: none; }
.stage--wall .stage__bg { -webkit-mask: linear-gradient(to bottom, transparent, #000 44px); mask: linear-gradient(to bottom, transparent, #000 44px); }
picture { display: contents; }
.frame, .pad { position: absolute; }
.frame { overflow: hidden; overflow: clip; }

/* ---------- the map: cut card stock on the wall ---------- */
.map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.map:not(.map--pins) { filter: drop-shadow(1px 1px 0 rgb(26 26 26 / 0.25)); }
.map a { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.map .st { stroke: #3b2a19; stroke-width: 0.7px; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: opacity 600ms var(--film); }
.map.is-zoomed .st { opacity: 0.35; }
.map.is-zoomed .st.is-in { opacity: 1; }
.map__sel, .map__hov { stroke: #3b2a19; stroke-width: 0.7px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map__sel { fill: var(--red); mix-blend-mode: multiply; opacity: 0; pointer-events: none; transition: opacity 500ms var(--film); }
.map__sel.is-on { opacity: 0.86; }
.map__hov { pointer-events: none; opacity: 0; transition: opacity 150ms ease-out, filter 150ms ease-out; }
.map__hov.is-on { opacity: 1; }
.map__hov.is-focus { stroke: var(--red); stroke-width: 2.6px; }
.map--pins { pointer-events: none; overflow: visible; }
.pin { pointer-events: auto; cursor: pointer; }
.pin-leads { pointer-events: none; }
.pin-leads line { stroke: var(--ink); stroke-width: 1.1px; vector-effect: non-scaling-stroke; opacity: 0.75; }
.pin-leads circle { fill: var(--ink); }
.pin__drop { animation: pin-drop 620ms cubic-bezier(0.2, 0.8, 0.3, 1.25) both; animation-delay: var(--d, 0ms); }
@keyframes pin-drop { 0% { transform: translateY(-0.9px); opacity: 0; } 35% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.pin__img { transition: opacity 220ms ease-out; }
.pin.is-sel .pin__pop { animation: pin-pop 420ms cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes pin-pop { 0% { transform: scale(0.82); } 100% { transform: none; } }
.pin__pop { transform-box: fill-box; transform-origin: 30% 100%; }

/* ---------- the desk: papers, the brief, the stamp, the folder ---------- */
.props { position: absolute; inset: 0; }
.prop { position: absolute; left: 0; top: 0; will-change: transform, filter, opacity; }
.paper {
  width: var(--pw); height: calc(var(--pw) * 1.308); padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink);
  filter: blur(0px) drop-shadow(0px var(--sy, 8px) var(--sb, 10px) rgba(30, 10, 0, 0.5));
  transition: translate 300ms var(--film); -webkit-tap-highlight-color: transparent;
}
/* picked: a red edge that follows the sheet's shape (the curled corner too) */
.paper__edge {
  position: absolute; inset: -3px; background: var(--red); opacity: 0; transition: opacity 200ms;
  -webkit-mask: url("/assets/scene/brief-sheet.webp") center / 100% 100% no-repeat; mask: url("/assets/scene/brief-sheet.webp") center / 100% 100% no-repeat;
}
.paper.is-on .paper__edge { opacity: 1; }
.scene:not([data-step="2"]) .paper .paper__edge, .scene:not([data-step="2"]) .paper .paper__mine { opacity: 0; }
.paper:focus-visible { outline: none; }
.paper:focus-visible .paper__sheet { outline: 3px solid var(--cream); outline-offset: 3px; }
.paper__sheet, .brief-sheet__bg, .folder img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.paper__prop { position: absolute; left: 14%; right: 14%; top: 9%; height: 50%; width: 72%; object-fit: contain; rotate: var(--tilt, -3deg); filter: drop-shadow(0 calc(var(--pw) * 0.015) calc(var(--pw) * 0.02) rgb(0 0 0 / 0.35)); }
.paper__name { position: absolute; left: 8%; right: 8%; top: 64%; font: 400 calc(var(--pw) * 0.125)/1 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; text-align: center; font-synthesis: none; }
.paper__mine {
  position: absolute; right: 9%; bottom: 9%; padding: 0.28em 0.5em 0.16em; font: 400 calc(var(--pw) * 0.08)/1 var(--font-display); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--red); border: max(1.5px, calc(var(--pw) * 0.012)) solid var(--red); rotate: -8deg; mix-blend-mode: multiply;
  opacity: 0; scale: 1.5; transition: opacity 200ms, scale 260ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.paper.is-on { translate: 0 -7px; }
.paper.is-on .paper__mine { opacity: 1; scale: 1; }
@media (hover: hover) { .paper:not(.is-on):hover { translate: 0 -4px; } }
.paper[aria-disabled="true"] { cursor: default; }

.brief-sheet {
  width: var(--bw); height: calc(var(--bw) * 1.308); opacity: 0; pointer-events: none; container-type: inline-size;
  filter: blur(0px) drop-shadow(0px calc(var(--bw) * 0.04) calc(var(--bw) * 0.05) rgba(30, 10, 0, 0.5));
}
.brief-sheet__in { position: absolute; inset: 6.5% 9% 6% 11%; display: flex; flex-direction: column; gap: 2.2cqw; color: var(--ink); font: 400 3.45cqw/1.38 var(--font-body); }
.brief-sheet__head { display: flex; align-items: center; gap: 3cqw; padding-bottom: 2.2cqw; border-bottom: max(1.5px, 0.5cqw) solid var(--ink); }
.brief-sheet__head img { width: 10cqw; height: auto; flex: none; }
.brief-sheet__place { display: block; font: 400 6.4cqw/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; font-synthesis: none; }
.brief-sheet__for { display: block; margin-top: 1cqw; font: 700 2.7cqw/1.2 var(--font-type); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.brief-sheet__st { align-self: start; padding: 1cqw 2cqw 0.6cqw; font: 400 3.6cqw/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); border: max(1.5px, 0.55cqw) solid var(--red); rotate: -2deg; mix-blend-mode: multiply; font-synthesis: none; }
.brief-sheet dl { margin: 0; display: grid; gap: 0.6cqw; }
.brief-sheet dt { margin-top: 1.6cqw; font: 700 2.65cqw/1.3 var(--font-type); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.brief-sheet dd { margin: 0; }
.brief-sheet__mark { margin-top: auto; font: 700 2.55cqw/1.2 var(--font-type); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.brief-sheet .w { opacity: 0; translate: 0 1.6cqw; filter: blur(2px); transition: opacity 520ms ease-out, translate 620ms var(--film), filter 520ms ease-out; transition-delay: var(--wd, 0ms); }
.brief-sheet.is-writing .w { opacity: 1; translate: 0 0; filter: none; }
.brief-sheet__ink { position: absolute; left: 10%; width: 80%; top: 10%;   /* (2.1) near the top: it shows above the closed folder */ opacity: 0; mix-blend-mode: multiply; pointer-events: none; }
.brief-sheet__ink img { display: block; width: 100%; height: auto; }
.brief-sheet__ink b {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: var(--ink-angle, -6deg);
  font: 400 15.5cqw/1 var(--font-display); letter-spacing: 0.08em; color: #D3271B; text-transform: uppercase; white-space: nowrap; font-synthesis: none; opacity: 0.94;
}
.stamp { width: var(--sw); height: auto; opacity: 0; pointer-events: none; }
.stamp img { display: block; width: 100%; height: auto; }
.folder { width: var(--fw); height: calc(var(--fw) * var(--fh, 0.972)); opacity: 0; pointer-events: none; }
.folder--front .folder__flap { position: absolute; inset: 0; filter: drop-shadow(0 calc(var(--fw) * -0.006) calc(var(--fw) * 0.01) rgb(40 20 0 / 0.35)); }
.folder--front img { clip-path: inset(42% 0 0 0); }
.folder--back { filter: drop-shadow(0 calc(var(--fw) * 0.04) calc(var(--fw) * 0.05) rgb(30 10 0 / 0.5)); }
.folder__tab {
  position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
  font: 700 calc(var(--fw) * 0.026)/1 var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream);
}

/* ---------- the cut: red pin to red leather ---------- */
.bloom {
  --x: 50%; --y: 50%; --r: 0px;
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background:
    radial-gradient(ellipse 70% 60% at 52% 42%, rgb(255 190 120 / 0.3), transparent 70%),
    radial-gradient(ellipse 90% 85% at 50% 50%, transparent 52%, rgb(40 6 2 / 0.5)),
    url("/assets/scene/leather-tile.webp") 0 0 / 460px 460px repeat,
    var(--leather);
  -webkit-mask-image: radial-gradient(circle at var(--x) var(--y), #000 var(--r), transparent calc(var(--r) + 180px));
  mask-image: radial-gradient(circle at var(--x) var(--y), #000 var(--r), transparent calc(var(--r) + 180px));
}
.bloom.is-full { -webkit-mask-image: none; mask-image: none; }
/* the leather is only fetched once the desk art loads (on idle), never on first paint */
.scene .bloom { background-image: none; }
.scene.is-desk-ready .bloom { background-image: radial-gradient(ellipse 70% 60% at 52% 42%, rgb(255 190 120 / 0.3), transparent 70%), radial-gradient(ellipse 90% 85% at 50% 50%, transparent 52%, rgb(40 6 2 / 0.5)), url("/assets/scene/leather-tile.webp"); }

/* ---------- film finish over the picture only: a fine grain and a soft vignette ---------- */
.grade { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse 88% 82% at 60% 46%, transparent 55%, rgb(20 8 2 / 0.4)); }
.grain {
  position: absolute; inset: -50%; z-index: 4; pointer-events: none; opacity: 0.09; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); } }
.scene.is-shake .props { animation: desk-shake 260ms linear; }
@keyframes desk-shake { 20% { translate: 3px 2px; } 45% { translate: -3px 1px; } 70% { translate: 2px -2px; } 100% { translate: 0 0; } }

/* ---------- (2.1) the headline: top centre, on clear wall; lifts away with the cut (fade + 24px up) ---------- */
.scene__head { position: absolute; z-index: 5; left: var(--g); right: var(--g); top: var(--head-top); text-align: center; color: var(--ink); pointer-events: none; }
.scene__head.is-up { opacity: 0; visibility: hidden; transform: translateY(-24px); }
.scene__h1 { margin: 0; font: 400 var(--h1)/0.92 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; font-synthesis: none; outline: none; }
.scene__sub { margin: 10px auto 0; max-width: 40em; font: 400 var(--sub)/1.35 var(--font-body); text-wrap: balance; }

/* ---------- the card: every word and action ---------- */
/* the side column holds the card and (step 1, desktop) the map key under it. Placed with translate only, so a change
   of step or of the card's height is never a layout shift: step 1 under the headline, beside the frame; from step 2
   centred in the height under the header, as in 2.0. */
.scene__side {
  position: absolute; z-index: 6; left: var(--g); top: 0; width: var(--cw);
  translate: 0 var(--ft); transition: translate 420ms var(--film);
}
.scene:not([data-step="1"]) .scene__side { translate: 0 calc(var(--hh) + (100cqh - var(--hh)) / 2 - 50%); }
.scene__card {
  position: relative; max-height: max(220px, var(--B) - var(--ft) - var(--legend-h) - 14px); overflow: auto; overscroll-behavior: contain;
  padding: 18px 22px 20px; background: var(--paper); color: var(--ink);
  border: var(--line) solid var(--ink); border-radius: 3px; box-shadow: 7px 7px 0 var(--ink);
}
.scene:not([data-step="1"]) .scene__card { max-height: calc(100cqh - var(--hh) - 40px); }
/* the map key (step 1): four swatches in the map's own paper + tint, one line each */
.legend--wide {
  position: absolute; left: 0; right: 0; top: calc(100% + 14px);
  padding: 12px 16px 12px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 3px; box-shadow: 4px 4px 0 rgb(26 26 26 / 0.85);
  transition: opacity 300ms ease, visibility 0s;
}
.scene:not([data-step="1"]) .legend--wide { opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s 300ms; }
/* with JS it hangs under the card by translate (js/scene.js keeps --card-h), so the card's growth never shifts it */
.legend--wide.is-set { top: 0; translate: 0 calc(var(--card-h, 0px) + 14px); }
.legend--wide.is-ready { transition: opacity 300ms ease, visibility 0s, translate 380ms var(--film); }
.scene:not([data-step="1"]) .legend--wide.is-ready { transition: opacity 300ms ease, visibility 0s 300ms, translate 380ms var(--film); }
/* phones: the suggestions take the key's place while they are open */
.scene-find:has(.scene-find__options:not([hidden])) ~ .legend--row { display: none !important; }
.legend__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.legend__list li { display: flex; align-items: center; gap: 10px; font: 700 12px/1.25 var(--font-type); letter-spacing: 0.06em; text-transform: uppercase; }
.legend__sw { width: 30px; height: 20px; flex: none; overflow: visible; filter: drop-shadow(1px 1px 0 rgb(26 26 26 / 0.25)); }
.legend__sw rect { stroke: #3b2a19; stroke-width: 1.2px; }
.legend__line { margin: 8px 0 0; padding-top: 7px; border-top: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent); font: 400 13.5px/1.3 var(--font-body); font-style: italic; }
.legend--row { display: none; }
.scene__steps { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; min-width: 0; }
.scene__steps li { min-width: 0; flex: 0 1 auto; }
.scene__steps[hidden] { display: none; }
.js .scene__steps[hidden] { display: flex; }   /* shown from the first paint with JS (no shift when scene.js starts) */
.chip-step {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; padding: 5px 10px 4px;
  background: #fffdf8; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 20px; cursor: pointer;
  font: 700 11px/1.2 var(--font-type); letter-spacing: 0.08em; text-transform: uppercase;
}
.chip-step span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15em; min-width: 0; }
.chip-step i { flex: none; }
.chip-step i { font-style: normal; color: var(--red); }
.chip-step[disabled] { opacity: 0.45; cursor: default; }
.chip-step[aria-current="step"] { background: var(--ink); color: var(--cream); opacity: 1; }
.chip-step[aria-current="step"] i { color: var(--gold); }
.chip-step:not([disabled]):not([aria-current]):hover { background: var(--cream-shade); }
.scene__body { position: relative; }
.scene-step[hidden] { display: none; }
.scene-step.is-in { animation: card-in 640ms var(--film) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.scene-step.is-out { animation: card-out 200ms ease-in both; }
.scene-ghost { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; }
.scene-ghost .scene-step.is-out { animation: card-out 230ms 70ms ease-in both; }   /* held a moment: ~150ms with both words on the card */
@keyframes card-out { to { opacity: 0; transform: translateY(-6px); filter: blur(2px); } }
.scene__eyebrow { margin: 0 0 8px; font: 700 12px/1.3 var(--font-type); letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); }
.scene__h2 { margin: 0 0 8px; font: 400 clamp(28px, 2.5vw, 38px)/0.98 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; font-synthesis: none; outline: none; }
.scene__line { margin: 0 0 14px; font-size: 16.5px; line-height: 1.45; }
.scene__label { display: block; margin: 0 0 6px; font: 700 11.5px/1.2 var(--font-type); letter-spacing: 0.14em; text-transform: uppercase; }
.scene-find { position: relative; margin: 0; }
.scene-find__row { display: flex; gap: 8px; }
.scene-find__input { flex: 1; min-width: 0; min-height: 48px; padding: 11px 13px; font: 17px/1.3 var(--font-body); color: var(--ink); background: #fffdf8; border: var(--line) solid var(--ink); border-radius: 3px; }
.scene-find__input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.scene-find__go { flex: none; min-height: 48px; padding: 0 14px; font: 400 15px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); background: var(--ink); border: var(--line) solid var(--ink); border-radius: 3px; cursor: pointer; }
.js .scene-find__go { display: none; }
/* the suggestions sit in the card's flow (the card scrolls; nothing hangs outside it) */
.scene-find__options { position: static; margin-top: 6px; max-height: 264px; box-shadow: 3px 3px 0 var(--ink); }
.scene-find__options .fyl__opt, .scene-find__options .fyl__miss { min-height: 44px; padding: 7px 14px; font-size: 17px; }
.scene-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink); text-decoration: none; font: 700 12.5px/1.3 var(--font-type); letter-spacing: 0.12em; text-transform: uppercase; }
.scene-link span { border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.scene-link:hover { color: var(--red); }
.scene-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 4px; }
.scene .btn--primary { font-size: 18px; min-height: 50px; padding-inline: 18px; box-shadow: 4px 4px 0 var(--ink); }
.scene .btn--primary[disabled] { opacity: 0.4; cursor: not-allowed; box-shadow: 4px 4px 0 var(--ink); transform: none; }
.scene .btn--primary[aria-busy="true"] { cursor: progress; }

/* the place block (step 1) */
.scene-place:empty { display: none; }
.scene-place { margin-top: 14px; padding: 14px 14px 10px; background: #fffdf8; border: var(--line) solid var(--ink); }
.scene-place.is-in { animation: card-in 520ms var(--film) both; }
.scene-place__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; font: 400 26px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; font-synthesis: none; }
.scene-st { display: inline-block; padding: 4px 7px 2px; font: 400 12px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); border: 2px solid var(--red); rotate: -3deg; font-synthesis: none; }
.scene-st--none { color: var(--ink); border-color: var(--ink); }
.scene-st--city { color: #82170A; border-color: #82170A; }
.scene-st--pale { color: #7a5f22; border-color: #A8873F; border-style: dashed; }
.scene-place__rule { margin: 12px 0; border: 0; border-top: 1.5px dashed color-mix(in srgb, var(--ink) 45%, transparent); }
.scene-place__via { margin: 0 0 4px; font-style: italic; font-size: 15px; }
.scene-place__mark { margin: 0 0 10px; font: 700 10.5px/1.3 var(--font-type); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.scene-place__none { margin: 0 0 10px; font-size: 15.5px; line-height: 1.4; }
.scene-place__cities { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; padding: 0; list-style: none; }
.scene-city { min-height: 40px; padding: 8px 12px 6px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 30px; cursor: pointer; font: 400 15px/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); font-synthesis: none; }
.scene-city:hover, .scene-city[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.scene-miami { display: flex; gap: 10px; align-items: center; margin: 10px -14px -10px; padding: 10px 14px; background: var(--green); color: var(--cream); text-decoration: none; font-size: 15px; line-height: 1.35; }
.scene-miami:hover { background: color-mix(in srgb, var(--green) 85%, var(--ink)); }
.scene-miami svg { width: 22px; height: 22px; flex: none; }

/* step 2: "Something else" chips */
.scene-else { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.scene-else[hidden] { display: none; }
.scene-chip { min-height: 40px; padding: 8px 14px 6px; background: #fffdf8; border: var(--line) solid var(--ink); border-radius: 30px; cursor: pointer; font: 400 15px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); font-synthesis: none; }
.scene-chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.scene-chip[aria-pressed="true"]::before { content: "✓ "; color: var(--gold); }

/* step 4: the plan form */
.scene-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 4px 0 14px; padding: 0; list-style: none; }
.scene-jobs li { display: flex; gap: 7px; align-items: baseline; font: 400 15px/1.15 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; font-synthesis: none; }
.scene-jobs li::before { content: "✓"; color: var(--red); font-family: var(--font-body); }
.scene-form { display: grid; gap: 12px; }
.scene-form .field > label, .scene-form .field legend { font: 700 11.5px/1.2 var(--font-type); letter-spacing: 0.14em; }
.scene-form .field input, .scene-form .field select { min-height: 44px; padding: 9px 12px; font-size: 16.5px; background: #fffdf8; }
.scene-form .field__error { font-size: 14px; }
.scene-form__g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
@container (max-width: 330px) { .scene-form__g2 { grid-template-columns: 1fr; } }
.scene__card { container-type: inline-size; }
.scene-locs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.scene-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 7px 9px; background: #fffdf8; border: 1.5px solid var(--ink); }
.scene-loc__name { font: 400 15px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; font-synthesis: none; }
.scene-loc__st { font: 700 10px/1 var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.scene-form .scene-loc select { width: auto; max-width: 48%; margin-left: auto; min-height: 32px; padding: 3px 26px 3px 7px; font: 14px var(--font-body); border: 1.5px solid var(--ink); border-radius: 2px; background-color: var(--paper); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 13px) 52%, calc(100% - 8px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.scene-loc__x { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 0; background: var(--ink); color: var(--cream); cursor: pointer; font-size: 15px; line-height: 1; }
.scene-loc__x:only-child, .scene-loc select + .scene-loc__x { margin-left: 0; }
.scene-loc__name + .scene-loc__st + .scene-loc__x { margin-left: auto; }
.scene-add { position: relative; }
.scene-add__row { display: flex; gap: 8px; }
.scene-add__row input { flex: 1; min-width: 0; }
.scene-add .fyl__options { position: static; margin-top: 6px; max-height: 220px; box-shadow: 3px 3px 0 var(--ink); }
.scene-summary { display: none; padding: 10px 12px; border: 2px solid var(--red); background: #fffdf8; }
.scene-summary.is-visible { display: block; }
.scene-summary h3 { margin: 0 0 4px; font: 400 15px/1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.scene-summary ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.scene-summary a { color: var(--ink); }
.scene-note { margin: 0; font-size: 13.5px; color: var(--muted); }
.scene-status { margin: 0; font-weight: 700; font-size: 14.5px; }
.scene-status:empty { display: none; }

/* step 5 */
.scene-seal { display: inline-block; margin: 0 0 12px; padding: 8px 14px 6px; font: 400 26px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); border: 4px solid var(--red); outline: 2px solid var(--red); outline-offset: 3px; rotate: -6deg; font-synthesis: none; }

/* no JS: the card is step 1 with a plain list of states and the form link */
.scene-nojs ul { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 15px; }
.scene-nojs a:not(.btn) { color: var(--ink); }
.js .scene-nojs { display: none; }
.no-js .scene__pic .plane--desk, .no-js .bloom { display: none; }

/* ---------- phones: the picture on top, the card a bottom sheet ---------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  /* a bottom sheet held by its top edge + a translate, so a height change is never a layout shift */
  .scene {
    --g: 16px; --sub: 16px;
    --h1: clamp(34px, (100cqw - 32px) / 8, 44px);   /* "WASTE COMPLIANCE," on the first line */
    --head-top: calc(var(--hh) + 2px);
    --head-h: calc(var(--h1) * 0.95 * 2 + 8px + var(--sub) * 1.35 * 2);
    --A: calc(var(--head-top) + var(--head-h) + 14px);
  }
  .scene__h1 { white-space: normal; max-width: 8.3em; margin-inline: auto; line-height: 0.95; text-wrap: balance; }
  .scene__sub { margin-top: 8px; max-width: 17em; }
  .scene__side, .scene:not([data-step="1"]) .scene__side { left: 10px; right: 10px; width: auto; top: 100%; translate: 0 calc(-100% - 10px); }
  /* step 1: the sheet stays below the framed map; later steps can grow it */
  .scene__card { max-height: max(200px, 100cqh - var(--fb) - 22px); padding: 14px 16px 16px; box-shadow: 4px 4px 0 var(--ink); }
  .scene:not([data-step="1"]) .scene__card { max-height: 58cqh; }
  .legend--wide { display: none; }
  .legend--row { display: block; margin: 10px 0 0; }
  .scene:not([data-step="1"]) .legend--row { display: none; }
  .legend--row .legend__list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 8px; }
  .legend--row .legend__list li { gap: 5px; font-size: 10px; letter-spacing: 0.03em; }
  .legend--row .legend__sw { width: 18px; height: 12px; }
  .legend--row .legend__line { margin-top: 6px; padding-top: 0; border-top: 0; font-size: 13px; }
  .scene__h2 { font-size: 26px; }
  .scene__line { font-size: 15px; margin-bottom: 10px; }
  .scene__steps { margin-bottom: 10px; }
  .chip-step span { max-width: 9em; }
  .scene__steps { gap: 4px; }
  .chip-step { gap: 4px; padding: 5px 8px 4px; letter-spacing: 0.05em; }
}
@media (max-width: 380px) { .scene-jobs { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .scene-step.is-in, .scene-step.is-out, .scene-place.is-in { animation: none; }
  .pin__drop, .pin.is-sel .pin__pop { animation: none; }
  .brief-sheet .w { transition: opacity 200ms linear; translate: none; filter: none; }
  .scene.is-shake .props { animation: none; }
  .paper, .paper__mine { transition: none; }
}

/* ==========================================================================
   (2.2) THE SCROLL: only the map travels. js/home.js drives it from one rAF-throttled scroll handler (native
   scrolling; only transform, opacity and clip-path move). Pinned for one screen of scroll: the words and boxes leave
   (0 to 30%), the wall fades to the page cream (15 to 50%: .veil in each stage, .scene__cream behind the picture,
   the light and grain fade), and the picture is reframed so the framed map (or the leather pad on steps 2 to 5)
   shrinks and glides to the centre (30 to 100%); then it scrolls away with the page. Without JS or with reduced
   motion: none of it, the scene is a normal block and the loop is the link only.
   ========================================================================== */
.scene-wrap { position: relative; }
.scene-sticky { position: relative; }
.scene__cream { position: absolute; inset: 0; z-index: 0; background: var(--cream); opacity: 0; pointer-events: none; }
/* the veil: page cream everywhere but a hole the size of the framed map (inner box + moulding) or the pad (boxes from
   the page's <style>); a soft shadow so the frame floats on the cream */
.veil {
  position: absolute; pointer-events: none; opacity: 0;
  box-shadow: 0 28px 56px -18px rgb(60 25 0 / 0.42), 0 8px 18px -6px rgb(60 25 0 / 0.22), 0 0 0 300vmax var(--cream);
}
.stage--desk .veil { border-radius: 1.2% / 1.6%; }
/* (2.4) THE SEAM FIX: while the veil is up (js/home.js .is-veiled), the picture and its planes do not clip. Clipped,
   the scaled picture's own box ended on screen at big windows (about 75% of the width and 77% of the height at the
   end of the scroll-out) and its edge showed as a straight line with a slightly different cream past it: the GPU
   antialiases that edge for each layer in it (the art and the veil) separately, so a little of the dark art leaks
   through, and beyond it only .scene__cream was left. Unclipped, the veil's cream (spread 300vmax) runs past every
   edge of the screen and the art's edges stay under it. The scene (and the loop's sticky box) still clip. */
.scene.is-veiled .scene__pic, .scene.is-veiled .plane { overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  /* pinned for one screen of scroll, then it scrolls away with the page */
  .js .scene-wrap { height: calc(max(100svh, 640px) * 2); }
  .js .scene-sticky { position: sticky; top: 0; height: max(100svh, 640px); }
  .js .scene__pic { transform-origin: 0 0; will-change: transform; }
  .js .veil, .js .scene__cream { will-change: opacity; }
}

/* the plain page: flat cream, ink, red. Thin gold rules between the sections (the inner pages keep their torn edges) */
.page--home main > .home-sec, .page--home main > .home-loop { background: var(--cream); }
.page--home main > :is(section, div) + :is(section, div)::before { display: none; }
.page--home main > .home-sec + .home-sec::before {
  display: block; content: ""; position: absolute; z-index: 1; top: 0; height: 2px; background: var(--gold); -webkit-mask: none; mask: none; transform: none;
  left: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter)); right: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter));
}
.home-sec { position: relative; padding-block: clamp(56px, 8vw, 104px); }
.home-sec__title { margin: 0 0 10px; font: 400 clamp(36px, 4.6vw, 60px)/0.96 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; font-synthesis: none; }
.home-sec__lede { margin: 0 0 34px; max-width: 58ch; font-size: 19px; line-height: 1.5; }
.home-sec__more { margin: 30px 0 0; }
.home-sec .arrow-link { font: 400 17px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 3px; }
.home-sec .arrow-link:hover { color: var(--red); }
[data-drift] { will-change: translate; }

/* (2.2) How it works: the How it works page's flip cards (css/style.css .hw-*, js/how.js); homepage-only parts */
.home-cards { padding-block: 0; }
.home-cards .hw-step__title { font-size: clamp(26px, 2.4vw, 32px); }
/* card 1's back: up to the map's own search */
.hw-find--map { display: grid; gap: 10px; justify-items: start; }
.hw-find__map { font-size: 18px; }
/* card 3's back: the four jobs, ticked, under the HANDLED stamp */
.hw-jobs { display: grid; gap: 7px; margin: 16px 0 30px; padding: 0; list-style: none; }
.hw-jobs li { display: flex; gap: 9px; align-items: baseline; font: 400 19px/1.1 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; font-synthesis: none; }
.hw-jobs li::before { content: "✓"; flex: none; color: var(--red); font: 700 18px/1 var(--font-body); }
.hw-stamp--back { top: auto; bottom: 20px; right: 14px; width: min(150px, 40%); rotate: -7deg; }

/* (2.2) the laws: number filters, state tiles, one detail card (docs/laws-mock.html, approved). Flat fills only. */
.home-sec--laws {
  --l-card: #FBF0DD; --l-paper: #F3E3C4; --l-mute: #5b4f42;
  --l-law: color-mix(in srgb, var(--l-paper) 62%, var(--red)); --l-city: color-mix(in srgb, var(--l-paper) 50%, var(--gold));
  --l-pale: color-mix(in srgb, var(--l-paper) 82%, var(--gold)); --l-plain: var(--l-paper);
}
.home-sec--laws .home-sec__lede { margin-bottom: 0; }
/* the three numbers are filters */
.lf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 40px 0 36px; border-top: 2px solid var(--ink); }
.lf__b { all: unset; cursor: pointer; box-sizing: border-box; display: grid; align-content: start; gap: 6px; padding: 18px 20px; border-left: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.lf__b:first-child { border-left: 0; padding-left: 0; }
.lf__b b { font: 400 clamp(52px, 8vw, 92px)/0.9 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); transition: color 150ms; font-synthesis: none; }
.lf__b span { font: 700 12px/1.35 var(--font-type); letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.lf__b span::after { content: "→"; font-family: var(--font-body); letter-spacing: 0; transition: transform 150ms; }
.lf__b:hover b, .lf__b:focus-visible b, .lf__b[aria-pressed="true"] b { color: var(--red); }
.lf__b:hover span::after { transform: translateX(4px); }
.lf__b[aria-pressed="true"] { border-bottom: 4px solid var(--red); }
.lf__b[aria-pressed="true"] span::after { content: "✦"; color: var(--red); }
.lf__b:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.no-js .lf__b { cursor: default; }
/* the board: tiles (left two thirds), the card (right third, sticky while the tiles scroll) */
.lb { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 40px; align-items: start; }
.lt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.lt[hidden] { display: none; }
.lt { transition: opacity 160ms ease; }
.lt.is-out { opacity: 0; }
.lt__a { box-sizing: border-box; display: grid; gap: 6px; width: 100%; height: 100%; padding: 12px 10px 10px; border: 1px solid transparent; color: var(--ink); text-decoration: none; transition: border-color 150ms, background-color 150ms; -webkit-tap-highlight-color: transparent; }
.lt__a svg { display: block; width: 100%; height: 70px; overflow: visible; filter: drop-shadow(1.5px 2px 0 rgb(26 26 26 / 0.16)); transition: transform 200ms ease; }
.lt-shape { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lt-shape--law { fill: var(--l-law); } .lt-shape--city { fill: var(--l-city); } .lt-shape--pale { fill: var(--l-pale); } .lt-shape--plain { fill: var(--l-plain); }
.lt__a b { font: 400 16px/1.05 var(--font-display); text-transform: uppercase; font-synthesis: none; }
.lt__a small { font: 400 10.5px/1.2 var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; color: var(--l-mute); min-height: 1.2em; }
.lt__a:hover, .lt__a:focus-visible { background: var(--l-card); border-color: var(--gold); }
.lt__a:hover svg, .lt__a:focus-visible svg { transform: translateY(-3px); }
.lt.is-sel .lt__a { background: var(--l-card); border-color: var(--ink); }
.lt__a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.lt-pin circle { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transition: transform 150ms ease; }
.lt-pin line { stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lt-pin--on circle { fill: var(--red); }
.lt-pin--soon circle { fill: var(--cream); }
.lt-pin.is-hot circle { transform: scale(1.7); }
/* the detail card: always a state */
.lc { position: sticky; top: calc(var(--header-h, 80px) + 20px); min-width: 0; }
.lc__state { display: grid; gap: 14px; padding: 22px 22px 24px; background: var(--l-card); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.lc__state[hidden] { display: none; }
.lc__tag { justify-self: start; font: 700 11px/1.2 var(--font-type); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); border: 1.5px solid currentColor; padding: 4px 6px 3px; rotate: -2deg; }
.lc__tag--soft { color: var(--l-mute); }
.lc__name { margin: 0; font: 400 34px/1 var(--font-display); text-transform: uppercase; font-synthesis: none; }
.lc__answer { margin: 0; font-size: 18px; line-height: 1.45; }
.lc__layers { display: grid; border-top: 1px solid var(--gold); }
.lc__layer { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--gold); color: inherit; text-decoration: none; }
.lc__dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--ink); display: inline-block; align-self: center; }
.lc__dot--law { background: var(--l-law); } .lc__dot--city { background: var(--l-city); } .lc__dot--pale { background: var(--l-pale); } .lc__dot--plain { background: var(--l-plain); }
.lc__dot--on { background: var(--red); } .lc__dot--soon { background: var(--cream); }
.lc__what { display: block; font: 700 11px/1.3 var(--font-type); letter-spacing: 0.1em; text-transform: uppercase; color: var(--l-mute); }
.lc__nm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.lc__st { font: 400 11px/1.4 var(--font-type); letter-spacing: 0.06em; text-transform: uppercase; color: var(--l-mute); white-space: nowrap; }
a.lc__layer:hover .lc__nm, a.lc__layer:focus-visible .lc__nm { color: var(--red); }
.lc__layer:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.lc__go { justify-self: start; font: 700 13px/1 var(--font-type); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 4px; }
.lc__go:hover { color: var(--red); }
/* phones: the card opens under the tapped tile's row (js/laws.js moves it into the grid) */
.lt-open { grid-column: 1 / -1; list-style: none; }
.lt-open .lc { position: static; margin: 4px 0 10px; }
.lr { margin-top: 44px; padding-top: 18px; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; }
.lr p { margin: 0; max-width: 60ch; }
.lr a { font: 700 13px/1 var(--font-type); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 4px; }
.lr a:hover { color: var(--red); }
@media (max-width: 860px) {
  .lb { grid-template-columns: minmax(0, 1fr); }
  .lc { position: static; }
}
@media (max-width: 560px) {
  .lf { margin: 28px 0 24px; }
  .lf__b { padding: 14px 8px; }
  .lf__b span { font-size: 10px; letter-spacing: 0.06em; }
  .lt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .lt__a { padding: 10px 6px 8px; }
  .lt__a b { font-size: 13px; }
  .lt__a svg { height: 56px; }
  .lc__state { padding: 18px 16px 20px; box-shadow: 4px 4px 0 var(--ink); }
  .lc__name { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .lt, .lt__a, .lt__a svg, .lt-pin circle { transition: none; } }

/* the questions: the red HANDLED ink mark beside the heading (live text, as in step 5) */
.home-sec__headrow { max-width: 920px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.home-stamp { position: relative; flex: none; width: clamp(150px, 20vw, 250px); rotate: -4deg; margin-right: clamp(0px, 4vw, 60px); mix-blend-mode: multiply; container-type: inline-size; }
.home-stamp img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity 400ms ease; }
.home-stamp img.is-in { opacity: 1; }
.home-stamp b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: var(--ink-angle, -6deg); font: 400 19cqw/1 var(--font-display); letter-spacing: 0.08em; color: #D3271B; text-transform: uppercase; white-space: nowrap; font-synthesis: none; opacity: 0.94; }
.home-faq { max-width: 860px; }

/* the red band: flat brand red, it ends the content */
.home-end { text-align: center; }
.home-end__in { display: grid; justify-items: center; gap: 22px; }
.home-end .h2 { color: var(--cream); }
.home-end .contact-line { margin: 0; }

/* THE LOOP (2.2): the small framed map once more; js/home.js copies the scene in, then the frame grows and glides back
   to its place while the wall fades in behind it (the copy never shows the words) */
.home-loop { position: relative; }
.loop__sticky { position: relative; }
.loop__pic { display: none; }
.loop__back { margin: 0; padding: 28px var(--gutter) 40px; text-align: center; }
.loop__back a { font: 700 13px/1 var(--font-type); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 4px; }
.loop__back a:hover { color: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .js .home-loop { height: calc(max(100svh, 640px) * 2); }
  .js .loop__sticky { position: sticky; top: 0; height: max(100svh, 640px); overflow: hidden; overflow: clip; }
  .js .loop__pic { display: block; position: absolute; inset: 0; }
  .js .loop__pic > .scene { position: absolute; inset: 0; }
  .js .loop__back { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: var(--loop-gap, 10vh); padding: 0; display: grid; place-items: center; }
  .js .loop__pic { z-index: 2; }
  .scene--copy .scene__head, .scene--copy .scene__side { visibility: hidden; }
}

@media (max-width: 860px) {
  .home-sec__headrow { align-items: flex-end; }
}
@media (max-width: 480px) {
  .home-stamp { width: 120px; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { [data-drift] { translate: none !important; } }

/* ==========================================================================
   (2.3, 2.4) THE INTRO (js/intro.js): the first visit opens on cream with the old hero film playing CENTRED in the
   brass frame (2.4: its own copy of the wall stage, .scene--intro, the art clipped to the frame by the page's <style>)
   and the captions as centred headlines above it, in the headline's band; then the hand-off to the live landing.
   The stage is fixed, under the header (the logo and MENU stay live). html.intro-on is set in the page's <head> before
   the first paint (scripts/lib/home.mjs), so there is no flash of the landing; html.intro-ok = the Watch the intro
   links show (JS and full motion).
   ========================================================================== */
html.intro-on .scene { background: var(--cream); }
html.intro-on .scene__pic { transition: opacity 400ms ease; }
html.intro-on:not(.intro-ready) :is(.scene__pic, .scene__head, .scene__side) { opacity: 0; }
.intro {
  --mute: #5b4f42;
  position: fixed; inset: 0; z-index: 59;   /* under the header (60): the logo and MENU stay clickable */
  pointer-events: auto; -webkit-tap-highlight-color: transparent; cursor: default; overflow: hidden; overflow: clip;
}
/* the page cream, one layer over the whole viewport (never a scaled box with edges) */
.intro__cream { position: absolute; inset: 0; background: var(--cream); }
/* the intro picture: the brass frame alone (its veil keeps only the shadow), the film in the frame's inner box */
.scene--intro { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
html.intro-on .intro .scene--intro { background: none; }
.scene--intro .scene__pic { overflow: visible; transform-origin: 0 0; will-change: transform; opacity: 0; transition: opacity 400ms ease; }
.intro.is-ready .scene--intro .scene__pic { opacity: 1; }
.scene--intro .plane { overflow: visible; }
.scene--intro .stage--wall::before { display: none; }
.scene--intro .veil { opacity: 1; box-shadow: 0 28px 56px -18px rgb(60 25 0 / 0.42), 0 8px 18px -6px rgb(60 25 0 / 0.22); }
/* (2.5) the shot: the film and its last-frame still, in the frame's inner box (the frame clips); the hand-off grows
   the film's map board inside our frame with one transform on it (js/intro.js lineUp) */
.intro-shot { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform, opacity; }
.intro-film, .intro-still {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none;
}
.intro-film { z-index: 3; background: #2a1a10; }
.intro-still { z-index: 4; opacity: 0; }
.intro-still.is-on { opacity: 1; }
/* (2.6) phones: the TALL brass frame (js/intro.js makeTall): the art's own moulding in pieces over the intro stage
   (bands = top and bottom moulding with the corners, strips = the sides), the film in a clip box that is the tall inner
   box; the art itself is not shown (at the end of the morph the pieces ARE it) */
.intro--tall .scene--intro .stage__bg { opacity: 0; }
.scene--intro .frame.is-tall { overflow: visible; }
.intro-clip { position: absolute; left: 0; overflow: hidden; overflow: clip; }
.intro-tf, .intro-tf__band, .intro-tf__col, .intro-tf__strip { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.intro-tf__band, .intro-tf__strip { will-change: transform; }
.intro-tf__low, .intro-tf__up { position: absolute; pointer-events: none; }
.intro-tf__p { position: absolute; background-repeat: no-repeat; transform-origin: 50% 50%; }
/* the captions: medium headlines in one reserved box (js/intro.js sizes it), no boxes, no shadows */
.intro__caps { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
.intro__cap {
  position: absolute; left: 0; right: 0; top: 0; display: grid; justify-items: center; gap: 10px; text-align: center; color: var(--ink);
  opacity: 0; translate: 0 12px; transition: opacity 350ms ease, translate 350ms ease;
}
.intro__cap.is-on { opacity: 1; translate: 0 0; }
.intro__title { display: block; max-width: 20em; font: 400 clamp(40px, 3.5vw, 56px)/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.005em; text-wrap: balance; font-synthesis: none; }
.intro__line { margin: 0; max-width: 34em; font: 400 17px/1.45 var(--font-body); color: var(--mute); text-wrap: balance; }
.intro__kicker { font: 700 13px/1.3 var(--font-type); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.intro__stamp {
  display: inline-block; margin-top: 4px; padding: 0.08em 0.28em 0; color: var(--red); border: 4px solid var(--red);
  font: 400 clamp(40px, 3.5vw, 56px)/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; font-synthesis: none;
  transform: rotate(-3deg) scale(1.6); opacity: 0; transition: transform 160ms cubic-bezier(0.2, 1.6, 0.4, 1), opacity 80ms;
}
.intro__stamp.is-hit { transform: rotate(-3deg) scale(1); opacity: 1; animation: intro-stamp 240ms ease-out 140ms; }
/* the stamp word itself shakes a little as it lands (translate: the transform holds the turn and the overshoot) */
@keyframes intro-stamp { 0% { translate: 0 0; } 30% { translate: 1.5px 2px; } 60% { translate: -1.5px -1px; } 100% { translate: 0 0; } }
.intro__skip {
  position: absolute; left: 0; top: 0; z-index: 3; display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 0; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--red);
  text-decoration-thickness: 2px; text-underline-offset: 0.45em;
  font: 700 12px/1 var(--font-type); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; transition: opacity 300ms;
}
.intro__skip:hover { color: var(--red); }
.intro__skip:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.intro__dots { position: absolute; left: 0; top: 0; z-index: 3; display: flex; gap: 8px; transition: opacity 300ms; }
.intro__dots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ink); }
.intro__dots i.is-on { background: var(--red); border-color: var(--red); }
.intro.is-leaving :is(.intro__skip, .intro__dots) { opacity: 0; pointer-events: none; }
/* the Watch the intro links: under the map key (desktop), under the search row (phones), beside How it works' heading */
.intro-again {
  display: none; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; color: var(--ink);
  font: 700 12px/1.3 var(--font-type); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: underline;
  text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 0.35em;
}
.intro-again:hover { color: var(--red); }
.intro-again:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
html.intro-ok .intro-again--wide, html.intro-ok .intro-again--how { display: inline-flex; align-items: center; min-height: 32px; }
.intro-again--wide { position: absolute; left: 2px; top: calc(100% + 8px); }
.how-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.how-head .home-sec__title { margin-bottom: 10px; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  html.intro-ok .intro-again--wide { display: none; }
  html.intro-ok .intro-again--row { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; font-size: 11px; }
  .intro__title, .intro__stamp { font-size: clamp(26px, 7.4vw, 32px); }
  .intro__stamp { border-width: 3px; }
  .intro__line { font-size: 15px; }
  .intro__kicker { font-size: 11px; }
  .intro__cap { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-again { display: none !important; }
  .intro__cap, .intro__stamp, .intro__skip { transition: none; }
  .intro__stamp.is-hit { animation: none; }
}