/* Taxwise, The Paper Trail. Ground: the fascia's matte black. Objects: kraft, thermal paper, carbon blue, stamp red. */
@font-face { font-family: "Libre Caslon Display"; src: url("../fonts/LibreCaslonDisplay-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/SchibstedGrotesk-normal-400_900.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/SchibstedGrotesk-italic-400_700.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url("../fonts/FragmentMono-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url("../fonts/FragmentMono-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --black: #0c0c0d;
  --black-2: #131315;
  --line: rgba(207, 211, 216, .16);
  --line-2: rgba(207, 211, 216, .3);
  --silver: #cfd3d8;
  --silver-2: #a3a7ae;
  --white: #ededE8;
  --paper: #f6f6f2;
  --ink: #1b1b1d;
  --ink-2: #55565b;
  --blue: #2747d6;
  --blue-hi: #6d86ff;
  --red: #d23a2c;
  /* errors get their own ink: the stamp red stays on stamps, and this one holds 6.8:1 on the paper */
  --err: #962a1f;
  --serif: "Libre Caslon Display", "Big Caslon", Georgia, serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Fragment Mono", ui-monospace, "Courier New", monospace;
  --expo: cubic-bezier(.19, 1, .22, 1);
  --back: cubic-bezier(.175, .885, .32, 1.275);
  --gutter: clamp(16px, 4vw, 56px);
  /* torn receipt edges: one tooth of the zigzag, tiled along an edge; up for a top edge, down for a bottom one */
  --zig-up: conic-gradient(from 135deg at top, #000 90deg, #0000 0);
  --zig-down: conic-gradient(from -45deg at bottom, #000 90deg, #0000 0);
  /* the photographed blank paper (the same sheets the props are printed on) */
  --paper-photo: url("../photos/paper-a4.jpg");
  --receipt-photo: url("../photos/paper-receipt.jpg");
  /* the fascia's brushed grain: fine horizontal streaks, as many lighter as darker, so the black stays #0c0c0d */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .62' numOctaves='3' seed='11' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' result='l' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .075 0 0 0 -.0375'/%3E%3CfeColorMatrix in='t' result='d' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.075 0 0 0 .0375'/%3E%3CfeMerge%3E%3CfeMergeNode in='l'/%3E%3CfeMergeNode in='d'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23b)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; scrollbar-color: #3a3b3f var(--black); background: var(--black); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--black) var(--grain) 0 0 / 512px 512px; color: var(--white); font: 400 18px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--blue-hi); }
::selection { background: var(--silver); color: var(--black); }
::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--black); } ::-webkit-scrollbar-thumb { background: #2c2d31; border: 2px solid var(--black); border-radius: 6px; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .24em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; border-radius: 2px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--silver); text-wrap: balance; }
.wrap { width: min(1320px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 99; padding: 10px 14px; background: var(--paper); color: var(--ink); }
.skip:focus { left: 10px; }
.link { color: var(--silver); text-decoration: underline; text-decoration-color: var(--line-2); transition: text-decoration-color .3s var(--expo), color .3s var(--expo); }
.link:hover { color: #fff; text-decoration-color: var(--blue-hi); }
button.link { padding: 0; border: 0; background: none; font: inherit; text-underline-offset: .24em; text-decoration-thickness: 1px; cursor: pointer; }

/* ---------- the receipt slip: the page's one button, torn off a till roll */
.slip { position: relative; isolation: isolate; display: inline-flex; align-items: baseline; gap: .7em; padding: 15px 22px 17px; color: var(--ink); text-decoration: none; font: 400 17px/1 var(--mono); letter-spacing: .02em; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); transition: transform .45s var(--expo), filter .45s var(--expo); }
.slip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper) var(--paper-photo) 60% 62% / 260% auto;
  -webkit-mask: var(--zig-up) top / 12px 6px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 12px) no-repeat, var(--zig-down) bottom / 12px 6px repeat-x;
          mask: var(--zig-up) top / 12px 6px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 12px) no-repeat, var(--zig-down) bottom / 12px 6px repeat-x; }
.slip-k { color: var(--ink-2); font-size: 15px; }
.slip-v { font-size: 19px; font-variant-numeric: tabular-nums; }
.slip:hover { transform: translateY(-3px) rotate(-.6deg); filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .6)); }
.slip:active { transform: translateY(0); }
.slip:focus-visible { outline-offset: 6px; }

/* ---------- header */
.top { position: fixed; inset: 0 0 auto; z-index: 50; }
/* the header has no bar and no rule: once the page scrolls, a soft fade from the ground (no edge) lets the text
   underneath dissolve before it reaches the name and buttons, and a soft shadow keeps their words readable */
.top::before { content: ""; position: absolute; inset: 0 0 -60px; z-index: -1; background: linear-gradient(rgba(12, 12, 13, .97), rgba(12, 12, 13, .93) 50%, rgba(12, 12, 13, 0)); opacity: 0; transition: opacity .5s var(--expo); pointer-events: none; }
.top.scrolled::before { opacity: 1; }
.top .name, .top nav a, .top-book { text-shadow: 0 1px 2px rgba(12, 12, 13, .6), 0 0 14px rgba(12, 12, 13, .7); }
.top-in { display: flex; align-items: center; gap: 32px; height: 68px; padding-inline: var(--gutter); }
.name { display: grid; gap: 2px; text-decoration: none; font: 700 26px/1 var(--sans); letter-spacing: -.005em; color: #fff; }
.name-sub { font: 400 13.5px/1.3 var(--sans); letter-spacing: 0; color: var(--silver-2); white-space: nowrap; }
.top nav { display: flex; gap: 28px; margin-left: auto; font-size: 15px; }
.top nav a { position: relative; text-decoration: none; color: var(--silver-2); padding: 6px 0; transition: color .3s var(--expo); }
.top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--silver); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--expo); }
.top nav a:hover { color: #fff; } .top nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.top-call { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; white-space: nowrap; font: 400 14.5px/1 var(--mono); transition: border-color .3s var(--expo), background-color .3s var(--expo); }
.top-call svg { width: 15px; height: 15px; }
.top-call:hover { background: #fff; }
.top-book { display: inline-flex; align-items: center; min-height: 44px; margin-left: -14px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: #fff; font: 600 14.5px/1 var(--sans); cursor: pointer; transition: border-color .3s var(--expo), background-color .3s var(--expo); }
.top-book:hover { border-color: var(--silver); background: rgba(255, 255, 255, .06); }
.top-book .short { display: none; }
@media (max-width: 1120px) { .top-book .long { display: none; } .top-book .short { display: inline; } }
@media (max-width: 1000px) { .top nav { display: none; } .top-book { margin-left: auto; } }
@media (max-width: 520px) { .top-call span { display: none; } .top-call { width: 44px; padding: 0; } }
@media (max-width: 420px) { .name-sub { display: none; } }

/* ---------- the stage */
.stage { position: relative; }
.js .stage { height: 1570vh; }
.stage-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s var(--expo) .1s; }
.stage.ready .scene { opacity: 1; }
.stage-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(12, 12, 13, .86) 0%, rgba(12, 12, 13, .62) 22%, rgba(12, 12, 13, 0) 38%),
  linear-gradient(0deg, rgba(12, 12, 13, .75), rgba(12, 12, 13, 0) 16%),
  linear-gradient(180deg, rgba(12, 12, 13, .5), rgba(12, 12, 13, 0) 14%); transition: opacity .6s var(--expo); }
.stage-shade::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 52% 34% at 30% 22%, rgba(12, 12, 13, .88), rgba(12, 12, 13, 0) 78%); opacity: 0; transition: opacity .9s var(--expo); }
.stage.chapter-on .stage-shade::after { opacity: 1; }
.stage-copy { position: absolute; left: var(--gutter); top: 0; bottom: 0; width: min(540px, 30vw); pointer-events: none; z-index: 3; }
/* the film's papers can pass behind the copy; a soft local shadow keeps every word clear of them */
.stage-copy h1, .stage-copy h2, .stage-copy .sum, .stage-copy .step-p, .stage-copy .status, .stage-copy .tally, .stage-copy .toast { text-shadow: 0 1px 2px rgba(12, 12, 13, .55), 0 0 26px rgba(12, 12, 13, .75); }
.step { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-46%); opacity: 0; visibility: hidden; filter: blur(6px); transition: opacity .7s var(--expo), transform .9s var(--expo), filter .7s var(--expo), visibility 0s .7s; }
.step.is-on { opacity: 1; visibility: visible; filter: none; transform: translateY(-50%); transition: opacity .7s var(--expo), transform .9s var(--expo), filter .7s var(--expo), visibility 0s; pointer-events: auto; }
.step.is-past { transform: translateY(-56%); }
.step.chapter { top: clamp(92px, 13.5vh, 150px); left: clamp(0px, 6vw, 112px); right: auto; width: fit-content; max-width: min(58vw, 1020px); transform: translateY(16px); }
.step.chapter.is-on { transform: none; }
.step.chapter.is-past { transform: translateY(-20px); }
/* a soft dark halo the size of the chapter itself: wherever the papers fly behind its words, they pass into shadow */
.step.chapter::before { content: ""; position: absolute; inset: -22px -40px -30px -40px; z-index: -1; background: rgba(12, 12, 13, .88); filter: blur(34px); pointer-events: none; }
.chapter .step-h, .chapter .svc-name { font-size: clamp(56px, 7.4vw, 136px); line-height: .95; letter-spacing: -.016em; color: #fff; }
.chapter .step-h .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .14em; margin: 0 -.02em -.14em; }
.chapter .step-h .w > span { display: inline-block; }
.chapter .step-p { margin-top: 24px; max-width: 40ch; font-size: clamp(18px, 1.42vw, 23px); line-height: 1.5; color: #fff; }
.stage-copy .chapter h2 { text-shadow: 0 2px 4px rgba(12, 12, 13, .55), 0 0 44px rgba(12, 12, 13, .85); }
h1 { font-size: clamp(48px, 6vw, 104px); line-height: .96; letter-spacing: -.012em; }
h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .14em; margin: 0 -.02em -.14em; }
h1 .w > span { display: inline-block; }
.sum { margin-top: 26px; max-width: 34ch; color: var(--white); font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 34px; }
.status { margin-top: 30px; font: 400 14px/1.4 var(--mono); color: var(--silver-2); }
.status.open { color: #fff; }
.step-h { font-size: clamp(44px, 4.6vw, 76px); line-height: 1; letter-spacing: -.01em; }
.step-p { margin-top: 20px; max-width: 36ch; color: var(--white); font-size: clamp(17px, 1.25vw, 20px); }
.svc-name { overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; font-size: clamp(46px, 5.2vw, 88px); line-height: .98; letter-spacing: -.012em; }
.svc-roll { display: block; }
/* filing: each paper held up to the visitor (main.js placeCard) is its tray's photograph, printed edge to edge
   on the sheet; the tray's name and service roll through the chapter at the side, as in the first build */
.step-svc { max-width: min(30vw, 560px) !important; }
.chapter .svc-name { font-size: clamp(48px, 4.6vw, 88px); }
.file-dim { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 50% 70% at 56% 54%, rgba(12, 12, 13, .66), rgba(12, 12, 13, .34)); opacity: 0; pointer-events: none; }
.file-card { position: absolute; left: 0; top: 0; z-index: 2; width: min(38vw, calc((100svh - 130px) / 1.5)); visibility: hidden; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; }
.file-card.on { visibility: visible; }
.fc-paper { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #f3f3ef var(--paper-photo) 50% 70% / cover; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 44px 60px -28px rgba(0, 0, 0, .9); }
.fc-paper img { display: block; width: 100%; height: 100%; object-fit: cover; }
.file-card.no-photo img { display: none; }
.tally { margin-top: 26px; font: 400 15px/1 var(--mono); color: #fff; }
.tally span { display: inline-block; min-width: 1ch; }
.toast { min-height: 1.5em; max-width: 40ch; margin-top: 12px; font: 400 15px/1.45 var(--sans); color: var(--silver-2); }
.toast[data-kind=ok] { color: #fff; }
.toast[data-kind=no] { color: var(--silver); }
[data-done] { margin-top: 18px; }

/* ---------- the tray labels: printed in ink on the silver strips in the photograph */
/* Skewed rather than turned, so the lettering lies on its strip: its baseline falls to the right with
   the strip's long edges, its uprights lean with the strip's ends. Multiplied, so the brushed metal
   shows through the ink. Each box is the strip itself, and nothing is drawn outside it. */
.tlabs { position: absolute; inset: 0; pointer-events: none; }
.tlab { position: absolute; display: grid; place-items: center; overflow: hidden; padding: 0; border: 0; border-radius: 1px; background: transparent; color: #26272b; font: 700 12px/1 var(--sans); letter-spacing: .005em; white-space: nowrap; mix-blend-mode: multiply; transform: translate(-50%, -50%) skew(calc(-1 * var(--lean, 5deg)), var(--slope, 0deg)); }
.tlab span { line-height: 1; text-align: center; opacity: .88; transition: opacity .5s var(--expo), color .4s var(--expo), text-shadow .5s var(--expo); }
/* as each service is named, the lamp finds its label and the others dim; a tray being aimed at warms the same way */
.tlabs.svc .tlab span { opacity: .26; }
.tlabs.svc .tlab.lit span, .playing .tlab:hover span, .tlab.target span { opacity: 1; text-shadow: 0 0 1px rgba(255, 190, 110, .9), 0 0 6px rgba(255, 186, 104, .95); }
.tlab.target span { color: var(--blue); }
.playing .tlab { pointer-events: auto; cursor: pointer; }
.tlab:focus-visible { mix-blend-mode: normal; outline: 2px solid var(--blue-hi); outline-offset: 4px; }
.tlab:focus-visible span { opacity: 1; }
.tlabs.ready .tlab span { animation: ready 1.8s ease-in-out infinite; }
@keyframes ready { 50% { opacity: 1; text-shadow: 0 0 6px rgba(255, 186, 104, .8); } }
.tlab.flash span { animation: flash 1.4s var(--expo); }
@keyframes flash { 0% { opacity: 1; text-shadow: 0 0 2px rgba(255, 200, 120, 1), 0 0 12px rgba(255, 190, 110, 1); } }
.tlab.nope span { animation: nope .5s ease-in-out; }
@keyframes nope { 20%, 60% { translate: -3px 0; } 40%, 80% { translate: 3px 0; } }
.tlabs.tiny .tlab span { opacity: 0; }
/* on a phone the strips are too small to letter, so the lamp lights the plate itself while its paper files */
.tlabs.tiny .tlab { transition: background-color .5s var(--expo), box-shadow .5s var(--expo); }
.tlabs.tiny .tlab.lit { mix-blend-mode: screen; background: rgba(255, 190, 110, .55); box-shadow: 0 0 12px 2px rgba(255, 180, 90, .5); }

/* ---------- your turn: three papers on the desk, cut out over the photograph */
/* Each sheet lies in the photograph's perspective: tipped back by the desk's lean, its far edge drawn
   towards a vanishing point off to the right (--vx, --vy from the sheet's centre), so its sides converge
   up and to the right as the desk's do. It is as bright
   as the lamp leaves the desk where it lies (--lit), and its contact shadow falls down and to the
   left, away from the lamp. Picked up, it rises towards the light: brighter, its shadow softer and
   further off. */
.desk { --vx: 200px; --vy: 0px; --tip: 0deg; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.desk.lifting { z-index: 3; }
.desk.tracking .pp { transition: none; }
.pp { --lift: 0; --ar: 1.414; position: absolute; left: 0; top: 0; z-index: var(--z, 0); width: 0; height: 0; transform: translate(var(--x, 0), var(--y, 0)); visibility: hidden; transition: transform .55s var(--expo), visibility 0s .55s; }
.pp.in { visibility: visible; transition: transform .55s var(--expo), visibility 0s; }
.pp.held { transition: none; }
.paper { position: absolute; left: 0; top: 0; width: var(--w); padding: 0; border: 0; background: none; cursor: grab; pointer-events: none; filter: brightness(calc(var(--lit, .85) + var(--lift) * .22));
  transform: translate(-50%, -50%) translateY(calc(var(--lift) * -30px)) translate(var(--vx), var(--vy)) perspective(1700px) translate(calc(-1 * var(--vx)), calc(-1 * var(--vy))) rotateZ(var(--yaw, 0deg)) rotateX(calc(var(--desk) - var(--lift) * var(--tip, 22deg))) rotateZ(var(--r, 0deg)) scale(calc(1 + var(--lift) * .1));
  transition: transform .5s var(--expo), filter .5s var(--expo); }
.playing .pp.in .paper { pointer-events: auto; }
.pp.held .paper { cursor: grabbing; transition: transform .25s var(--expo); }
.paper:focus-visible { outline: none; }
.paper:focus-visible .face { outline: 2px solid var(--blue-hi); outline-offset: 4px; }
.face { display: block; width: 100%; height: auto; }
.paper::before { content: ""; position: absolute; inset: -8px; }
.pp:has(.paper-receipts) { --ar: 3; }
/* the shadow lies on the desk in the same perspective as the sheet: tight along its edges at rest */
.pp-shadow { position: absolute; left: 0; top: 0; width: var(--w); height: calc(var(--w) * var(--ar));
  transform: translate(-50%, -50%) translate(calc(var(--lift) * -16px - 1px), calc(var(--lift) * 36px + 2px)) translate(var(--vx), var(--vy)) perspective(1700px) translate(calc(-1 * var(--vx)), calc(-1 * var(--vy))) rotateZ(var(--yaw, 0deg)) rotateX(var(--desk)) rotateZ(var(--r, 0deg));
  filter: blur(calc(1.2px + var(--lift) * 16px)) drop-shadow(0 0 8px rgba(0, 0, 0, .35)); opacity: calc(.92 - var(--lift) * .5);
  transition: transform .5s var(--expo), filter .5s var(--expo), opacity .5s var(--expo); }
/* the shadow takes the sheet's own outline (a curled corner, a clip), and is softened outside it */
.pp-shadow::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .85); -webkit-mask: var(--shape, none) center / 100% 100% no-repeat; mask: var(--shape, none) center / 100% 100% no-repeat; }
.pp.up { --lift: .55; }
.pp.up, .pp.held, .pp.stamped { z-index: 200; }
.pp.up .paper { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -5px; } }
.pp.stamped .paper { --lift: .3; }

/* the tray picker, for phones: the trays by name */
.picker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--black); border-top: 1px solid var(--line); }
.picker button { min-height: 46px; padding: 10px 12px; border: 0; background: var(--paper); color: var(--ink); text-align: left; font: 600 14.5px/1.15 var(--sans); cursor: pointer; transition: background-color .35s var(--expo), color .35s var(--expo), box-shadow .35s var(--expo); }
.picker.idle button { background: transparent; color: var(--silver-2); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.picker button:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.picker .back { background: transparent; color: var(--silver); box-shadow: inset 0 0 0 1px var(--line-2); }
/* the status line, moved here from the copy while the key is up (main.js pickerState) */
.picker .toast { grid-column: 1 / -1; max-width: none; min-height: 1.45em; margin: 0 0 4px; font-size: 14.5px; text-shadow: none; }
.picker .toast:empty::before { content: "Pick up a paper, then choose its tray."; }
.cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font: 400 14px/1 var(--sans); color: var(--silver-2); transition: opacity .5s var(--expo); }
.cue::after { content: ""; width: 1px; height: 38px; background: linear-gradient(var(--silver), transparent); transform-origin: top; animation: drip 2.2s var(--expo) infinite; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.stage.moved .cue { opacity: 0; }
/* without the film (or without scripts) the stage is plain copy, every step in turn */
.js.no-film .stage { height: auto; }
.no-film .stage-pin, html:not(.js) .stage-pin { position: relative; height: auto; padding: 140px var(--gutter) 80px; }
.no-film .scene, .no-film .stage-shade, .no-film .cue, html:not(.js) .scene, html:not(.js) .stage-shade, html:not(.js) .cue { display: none; }
.no-film .stage-copy, html:not(.js) .stage-copy { position: static; width: auto; }
.no-film .step, html:not(.js) .step { position: static; transform: none; opacity: 1; visibility: visible; filter: none; margin-bottom: 64px; }
.no-film .step-play, html:not(.js) .step-play, html:not(.js) .step-svc { display: none; }
html:not(.js) .stage > .sr { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; padding: 0 var(--gutter) 80px; color: var(--white); }
/* without scripts nothing prints on the till, so its empty roll is left out */
html:not(.js) .receipt-out { display: none; }
/* the keyboard's way into "Your turn": out of sight until it has focus */
.skip-play { position: absolute; left: -9999px; }
.skip-play:focus-visible { position: static; display: inline-block; margin-top: 18px; color: #fff; }
.svc-list { display: grid; gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; max-width: 60ch; }
.svc-list li { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.svc-list b { font: 400 30px/1.1 var(--serif); color: var(--silver); }

/* ---------- sections */
.sec { position: relative; padding-block: clamp(96px, 11vw, 168px); }
.sec + .sec::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 11px); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px 72px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.sec-head h2, .mg-grid h2, .vs-grid h2 { font-size: clamp(46px, 5.4vw, 88px); line-height: .98; letter-spacing: -.012em; }
.lead { max-width: 48ch; color: var(--white); font-size: clamp(17px, 1.3vw, 20px); }
@media (max-width: 880px) { .sec-head { grid-template-columns: minmax(0, 1fr); } }

/* ---------- deadlines: tear-off sheets */
.dl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
.sheets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
/* each sheet is torn off a pad along its perforations; the pair cast one shadow */
.sheets { filter: drop-shadow(0 22px 20px rgba(0, 0, 0, .55)); }
.sheet { position: relative; margin: 0; padding: 34px clamp(18px, 2vw, 28px) 26px; background: var(--paper) var(--paper-photo) center / cover; color: var(--ink); transform: rotate(-1.6deg); transition: transform .6s var(--expo);
  -webkit-mask: radial-gradient(circle 3.5px at 50% 0, #0000 97%, #000) -1px 0 / 11px 100% repeat-x;
          mask: radial-gradient(circle 3.5px at 50% 0, #0000 97%, #000) -1px 0 / 11px 100% repeat-x; }
.sheet + .sheet { transform: rotate(1.2deg) translateY(28px); }
.sheet:hover { transform: rotate(0) translateY(-4px); }
.sheet-m { font: 600 15px/1 var(--sans); color: var(--red); }
.sheet-d { margin-top: 6px; font: 400 clamp(96px, 10vw, 152px)/.86 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.sheet figcaption { margin-top: 14px; font-size: 15.5px; line-height: 1.3; font-weight: 600; }
.sheet-left { margin-top: 18px; padding-top: 12px; border-top: 1px dashed rgba(27, 27, 29, .3); font: 400 14px/1.4 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sheet-left b { color: var(--ink); font-weight: 400; }

/* ---------- the penalty till */
.till { position: relative; }
.till-h { font-size: clamp(32px, 2.8vw, 44px); line-height: 1.05; }
.till-ctl { display: grid; gap: 10px; margin-top: 26px; max-width: 520px; }
.f { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 15px; color: var(--white); }
.f output { font: 400 15px/1 var(--mono); color: #fff; font-variant-numeric: tabular-nums; }
/* tick labels sit where those dates really fall on the slider (the thumb is 22px wide) */
.ticks { position: relative; height: 26px; margin: -2px 0 12px; font: 400 11.5px/1 var(--mono); color: var(--silver-2); letter-spacing: .02em; }
.ticks span { position: absolute; top: 9px; left: calc(11px + (100% - 22px) * var(--f)); transform: translateX(-50%); white-space: nowrap; }
.ticks span::before { content: ""; position: absolute; left: 50%; top: -9px; width: 1px; height: 5px; background: var(--line-2); }
.ticks span:first-child { transform: translateX(-11px); }
.ticks span:first-child::before { left: 11px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; --fill: 0%; --on: var(--blue-hi); --off: var(--line-2); }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--on) var(--fill), var(--off) var(--fill)); }
input[type=range]::-moz-range-track { height: 2px; background: var(--off); }
input[type=range]::-moz-range-progress { height: 2px; background: var(--on); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--blue); border: 0; box-shadow: 0 0 0 2px var(--paper), 0 4px 10px rgba(0, 0, 0, .5); transition: box-shadow .3s var(--expo); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); border: 0; box-shadow: 0 0 0 2px var(--paper); }
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--paper), 0 0 0 7px rgba(109, 134, 255, .35), 0 4px 10px rgba(0, 0, 0, .5); }
input[type=range]:focus-visible { outline: none; }
.money { display: flex; align-items: center; gap: 8px; width: 220px; padding: 0 0 6px; border-bottom: 1px solid var(--line-2); font: 400 20px/1 var(--mono); }
.money input { width: 100%; padding: 4px 0; border: 0; background: transparent; color: #fff; font: inherit; font-variant-numeric: tabular-nums; }
.money input:focus-visible { outline: none; } .money:focus-within { border-color: var(--blue-hi); }
.receipt-out { position: relative; max-width: 420px; margin-top: 34px; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .6)); }
.receipt { position: relative; margin: 0; padding: 22px 20px 30px; list-style: none; background: var(--paper) var(--receipt-photo) top / 100% auto; color: #38383c; font: 400 13.5px/1.6 var(--mono); font-variant-numeric: tabular-nums;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, var(--zig-down) bottom / 12px 8px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, var(--zig-down) bottom / 12px 8px repeat-x; }
.receipt li { display: flex; justify-content: space-between; gap: 16px; }
.receipt li.c { justify-content: center; text-align: center; }
.receipt li.hr { height: 1px; margin: 9px 0; background: repeating-linear-gradient(90deg, #3b3b3f 0 4px, transparent 4px 7px); }
.receipt li.tot { margin-top: 2px; color: var(--ink); font-size: 16px; }
.receipt li.dim { color: var(--ink-2); font-size: 12px; }
.receipt li.stamp { justify-content: center; margin-top: 14px; color: var(--red); }
.receipt li.stamp span { display: inline-block; padding: 4px 12px; border: 2px solid currentColor; border-radius: 6px; font: 400 18px/1.2 var(--serif); letter-spacing: .06em; transform: rotate(-4deg); animation: thump .55s var(--back) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes thump { from { opacity: 0; transform: rotate(-4deg) scale(1.9); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
.receipt li { animation: print .32s steps(3) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes print { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.till .fine { margin-top: 20px; max-width: 52ch; font-size: 13.5px; color: var(--silver-2); }
@media (max-width: 960px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .sheets { grid-template-columns: minmax(0, 1fr); } .sheet + .sheet { transform: rotate(1.2deg); } }
@media (max-width: 760px) { .ticks span:nth-child(2) { color: transparent; } }

/* ---------- mortgages: the illustration on paper */
.mg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: center; }
.mg-grid .lead { margin-top: 24px; }
.quote { margin: clamp(34px, 4vw, 52px) 0 0; }
.quote blockquote { margin: 0; }
.quote p { font: 400 clamp(24px, 2.1vw, 32px)/1.3 var(--serif); color: var(--silver); }
.quote figcaption { margin-top: 16px; font: 400 15px/1 var(--sans); color: var(--silver-2); }
.doc { position: relative; padding: clamp(28px, 3.4vw, 44px); background: var(--paper) var(--paper-photo) center / cover; color: var(--ink); transform: rotate(1.4deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .04), 0 50px 60px -40px rgba(0, 0, 0, .9); transition: transform .8s var(--expo); }
.doc:focus-within, .doc:hover { transform: rotate(0); }
.doc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.doc-head h3 { color: var(--ink); font-size: clamp(30px, 2.6vw, 40px); line-height: 1; }
.doc-head p { font: 500 14px/1 var(--sans); color: var(--ink-2); }
.row { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline; padding: 18px 0 6px; border-bottom: 1px dashed rgba(27, 27, 29, .25); }
.row label { font-size: 15.5px; font-weight: 600; }
.row output { font: 400 17px/1 var(--mono); font-variant-numeric: tabular-nums; }
.row input { grid-column: 1 / -1; }
.doc input[type=range] { --on: var(--blue); --off: rgba(27, 27, 29, .22); }
.doc input[type=range]::-webkit-slider-thumb { background: var(--blue); box-shadow: 0 2px 6px rgba(39, 71, 214, .4); }
.doc input[type=range]::-moz-range-thumb { background: var(--blue); box-shadow: none; }
.doc input[type=range]:hover::-webkit-slider-thumb, .doc input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(39, 71, 214, .2); }
.total { display: grid; gap: 6px; padding: 24px 0 4px; }
.total span { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.total output { font: 400 clamp(56px, 6vw, 84px)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.total p { font-size: 15px; color: var(--ink-2); }
.total b { font: 400 16px/1 var(--mono); color: var(--ink); }
.warn { margin-top: 22px; padding: 14px 16px; border: 2px solid var(--ink); font-size: 15px; font-weight: 700; line-height: 1.4; }
.doc .fine { margin-top: 12px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 960px) { .mg-grid { grid-template-columns: minmax(0, 1fr); } .doc { transform: none; } }

/* ---------- reviews: each one on a slip torn off the office pad, filed in a loose pile */
.rv-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding: 8px 0 clamp(24px, 4vw, 56px); }
/* the paper is on ::before, so the perforated edge cuts real holes in it; the shadow is cast by an inset layer
   (::after) that starts below the torn edge, so where one slip lies on another its holes show the slip beneath */
.rv { position: relative; z-index: 0; margin: 0; padding: clamp(30px, 2.6vw, 38px) clamp(22px, 2.4vw, 34px) clamp(22px, 2vw, 28px); color: var(--ink); rotate: var(--r, 0deg); transition: translate .55s var(--expo), rotate .55s var(--expo); }
.rv::after { content: ""; position: absolute; inset: 16px 6px 2px; z-index: -2; box-shadow: 0 24px 30px -8px rgba(0, 0, 0, .62), 0 2px 4px rgba(0, 0, 0, .28); pointer-events: none; transition: box-shadow .55s var(--expo); }
.rv::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper) var(--paper-photo) 50% var(--py, 75%) / cover;
  -webkit-mask: radial-gradient(circle 3.5px at 50% 0, #0000 97%, #000) -1px 0 / 11px 100% repeat-x;
          mask: radial-gradient(circle 3.5px at 50% 0, #0000 97%, #000) -1px 0 / 11px 100% repeat-x; }
.rv blockquote { margin: 0; }
.rv p { font: 400 clamp(21px, 1.7vw, 27px)/1.32 var(--serif); color: var(--ink); text-wrap: pretty; }
.rv.big p { font-size: clamp(30px, 3.1vw, 48px); line-height: 1.12; letter-spacing: -.01em; max-width: 21ch; }
.rv figcaption { margin-top: 18px; padding-top: 12px; border-top: 1px dashed rgba(27, 27, 29, .3); font: 500 14px/1.2 var(--sans); color: var(--ink-2); }
/* the pile: the lead slip, then three overlapping its edges, each turned a little */
.rv:nth-child(1) { grid-column: 1 / span 7; --r: -1.4deg; --py: 66%; }
.rv:nth-child(2) { grid-column: 8 / span 5; margin: 64px 0 0 -44px; --r: 1.7deg; --py: 82%; }
.rv:nth-child(3) { grid-column: 2 / span 5; margin-top: -26px; --r: .8deg; --py: 74%; }
.rv:nth-child(4) { grid-column: 7 / span 5; margin: 30px 0 0 -10px; --r: -1.9deg; --py: 94%; }
@media (hover: hover) and (pointer: fine) {
  .rv:hover { z-index: 2; translate: 0 -8px; rotate: calc(var(--r, 0deg) * .3); }
  .rv:hover::after { box-shadow: 0 34px 38px -8px rgba(0, 0, 0, .7), 0 2px 4px rgba(0, 0, 0, .2); }
}
@media (max-width: 760px) {
  .rv-list { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
  .rv:nth-child(n) { grid-column: 1; margin: -6px 0 0; }
  .rv:nth-child(1) { margin-top: 0; }
  .rv:nth-child(even) { --r: 1.1deg; }
  .rv:nth-child(odd) { --r: -1.1deg; }
}

/* ---------- visit: the desk at the end of the film, then where and when */
.close-scene { position: relative; margin: 0 0 clamp(56px, 7vw, 104px); overflow: hidden; background: var(--black); }
.close-frame { position: relative; transform: scale(1.04); transform-origin: 62% 58%; will-change: transform; }
.close-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; }
.close-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12, 12, 13, .35), rgba(12, 12, 13, 0) 22%, rgba(12, 12, 13, 0) 70%, var(--black)); }
.close-copy { position: absolute; z-index: 2; left: var(--gutter); top: clamp(56px, 8vw, 132px); max-width: min(46vw, 760px); }
.close-h { font: 400 clamp(52px, 6.6vw, 122px)/.95 var(--serif); letter-spacing: -.016em; text-wrap: balance; color: var(--silver); text-shadow: 0 2px 4px rgba(12, 12, 13, .5), 0 0 44px rgba(12, 12, 13, .85); }
.close-copy .acts { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: clamp(24px, 3vw, 40px); }
.close-copy .link { color: #fff; text-shadow: 0 1px 3px rgba(12, 12, 13, .7), 0 0 24px rgba(12, 12, 13, .85); }
.vs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
.vs-grid address { margin-top: 28px; font: 400 clamp(22px, 1.9vw, 28px)/1.35 var(--serif); font-style: normal; color: var(--white); }
.tel-big { display: inline-block; margin-top: 22px; font: 400 clamp(30px, 2.8vw, 42px)/1 var(--mono); letter-spacing: -.01em; color: #fff; text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 6px; transition: border-color .3s var(--expo); font-variant-numeric: tabular-nums; }
.tel-big:hover { border-color: var(--silver); }
.notes { margin: 22px 0 0; padding: 0; list-style: none; color: var(--white); font-size: 16px; }
.notes li { position: relative; padding-left: 20px; }
.notes li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--silver); }
.vs-grid .acts { margin-top: 30px; }
.hours-card { padding-bottom: 6px; background: var(--paper) var(--paper-photo) center / cover; box-shadow: 0 30px 40px -28px rgba(0, 0, 0, .9); }
.hours { width: 100%; border-collapse: collapse; color: var(--ink); font-size: 15.5px; }
.hours caption { padding: 16px 20px 10px; text-align: left; font: 600 15px/1 var(--sans); color: var(--ink); }
.hours th, .hours td { padding: 10px 20px; border-top: 1px dashed rgba(27, 27, 29, .2); text-align: left; font-weight: 500; }
.hours td { text-align: right; font: 400 14.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hours tr.today th, .hours tr.today td { color: var(--ink); font-weight: 700; }
.hours tr.today th::after { content: "today"; display: inline-block; margin-left: 12px; padding: 3px 8px 2px; border: 2px solid var(--red); border-radius: 5px; color: var(--red); font: 400 17px/1 var(--serif); -webkit-text-stroke: .35px var(--red); transform: rotate(-6deg); mix-blend-mode: multiply; vertical-align: 1px; }
/* the map: a street plan drawn from OpenStreetMap (assets/map.svg, built by .impeccable/sites/accountant-taxwise/map/
   build-map.mjs) with the names, the pin and its tag in HTML, so they stay crisp; the whole plan opens Google Maps */
.map { position: relative; display: block; margin-top: 28px; aspect-ratio: 4 / 3; border: 1px solid var(--line); overflow: hidden; background: var(--black-2); color: inherit; text-decoration: none; }
.map img { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1.2s var(--expo); }
.map:hover img { transform: scale(1.025); }
.map:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 4px; }
.map-road { position: absolute; transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(var(--dy, 0)); font: 600 clamp(10px, .9vw, 12.5px)/1 var(--sans); color: var(--silver-2); white-space: nowrap; text-shadow: 0 0 3px #131315, 0 0 7px #131315; pointer-events: none; }
.map-road.main { --dy: -1.3em; font-size: clamp(11px, 1.05vw, 14px); color: var(--silver); }
.map-pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px #131315, 0 0 0 4.5px var(--paper), 0 0 22px 6px rgba(237, 237, 232, .28); }
.map-tag { position: absolute; left: 14px; bottom: 14px; padding: 9px 13px 10px; font-size: 13px; gap: .55em; white-space: nowrap; transform: rotate(-2deg); }
.map-tag .slip-k { font-size: 12px; }
.map-tag .slip-v { font-size: 14px; }
.map:hover .map-tag { transform: rotate(-2deg) translateY(-2px); }
.map-open { position: absolute; right: 12px; bottom: 10px; font: 500 12.5px/1 var(--sans); color: var(--silver-2); text-shadow: 0 0 4px #131315; }
.map:hover .map-open { color: var(--white); }
.map-credit { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--silver-2); }
@media (max-width: 900px) { .vs-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer */
.foot { border-top: 1px solid var(--line); }
.foot-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 56px; align-items: end; padding-block: 48px 40px; font-size: 15px; color: var(--silver-2); }
.foot-name { font: 400 34px/1 var(--serif); color: var(--silver); }
.foot a { color: #fff; }
@media (max-width: 760px) { .foot-in { grid-template-columns: minmax(0, 1fr); padding-bottom: 110px; } }

/* ---------- phone call bar */
.mbar { position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: none; transform: translateY(140%); transition: transform .5s var(--expo); }
.mbar.show { transform: none; }
.mbar .slip { flex: 1; justify-content: center; }
.mbar-book { padding: 0 18px; border: 0; border-radius: 3px; background: var(--black); color: #fff; font: 600 15px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; }

/* ---------- narrow screens: copy on top, scene below */
@media (max-width: 600px), (max-aspect-ratio: 9/10) {
  .js .stage { height: 1490vh; }
  .stage-copy { left: var(--gutter); right: var(--gutter); width: auto; top: 84px; bottom: auto; height: 46%; }
  .step { top: 0; transform: translateY(8px); }
  .step.is-on { transform: none; }
  .step.is-past { transform: translateY(-10px); }
  .stage-shade { background: linear-gradient(180deg, rgba(12, 12, 13, .96) 0%, rgba(12, 12, 13, .82) 38%, rgba(12, 12, 13, 0) 62%); }
  h1 { font-size: clamp(46px, 12.5vw, 72px); }
  .sum { margin-top: 16px; font-size: 17px; }
  .acts { margin-top: 22px; }
  .status { margin-top: 18px; }
  .step-h { font-size: clamp(38px, 10vw, 56px); }
  .svc-name { font-size: clamp(40px, 11vw, 64px); }
  .step-svc { max-width: none !important; }
  .file-card { width: min(86vw, 420px); }
  .file-dim { background: rgba(12, 12, 13, .5); }
  .step.chapter { top: 0; left: 0; right: 0; width: auto; max-width: none; transform: translateY(8px); }
  .step.chapter.is-on { transform: none; }
  .step.chapter.is-past { transform: translateY(-10px); }
  .chapter .step-h, .chapter .svc-name { font-size: clamp(42px, 11.6vw, 64px); }
  .chapter .step-p { margin-top: 16px; font-size: 17px; }
  .stage-shade::after { display: none; }
  .close-scene { display: flex; flex-direction: column; }
  .close-copy { order: -1; position: static; max-width: none; padding: 8px var(--gutter) 32px; }
  .close-frame img { aspect-ratio: 9 / 17; object-position: 89% 50%; }
  .close-h { font-size: clamp(40px, 11vw, 60px); }
  /* the tray key says how to play on phones, so the copy keeps only its first sentence (still read aloud) */
  .play-how { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

}
@media (max-width: 760px) { .mbar { display: flex; gap: 10px; } }

/* ---------- book an appointment: a card of paper over the dimmed page */
.book-card { width: min(640px, calc(100% - 28px)); max-height: calc(100% - 28px); margin: auto; padding: 0; border: 0; background: var(--paper) var(--paper-photo) center / cover; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); overflow: auto; overscroll-behavior: contain; }
.book-card::backdrop { background: rgba(8, 8, 9, .78); }
.book-card[open] { animation: deal .7s var(--expo); }
@keyframes deal { from { opacity: 0; transform: translateY(40px) rotate(-1.6deg); } to { opacity: 1; transform: none; } }
.book-form, .book-done { position: relative; padding: clamp(26px, 4vw, 44px); }
.book-card h2 { color: var(--ink); font-size: clamp(34px, 4vw, 48px); line-height: 1; padding-right: 40px; }
.book-lead { margin-top: 12px; max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.book-x { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.book-x svg { width: 22px; height: 22px; }
.book-x:hover { background: rgba(29, 29, 32, .06); }
.book-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.fld { display: grid; gap: 6px; margin-top: 18px; font: 600 14px/1.2 var(--sans); }
.book-two .fld { margin-top: 0; }
.fld i { font-weight: 400; color: var(--ink-2); }
.fld input, .fld textarea { width: 100%; padding: 8px 0; border: 0; border-bottom: 1.5px solid rgba(29, 29, 32, .35); border-radius: 0; background: transparent; color: var(--ink); font: 400 17px/1.4 var(--sans); resize: vertical; }
.fld input:focus-visible, .fld textarea:focus-visible { outline: none; border-bottom-color: var(--blue); box-shadow: 0 1.5px 0 var(--blue); }
.chips { margin: 22px 0 0; padding: 0; border: 0; }
.chips legend { padding: 0; font: 600 14px/1.2 var(--sans); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; margin-bottom: 4px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(29, 29, 32, .3); font: 500 14.5px/1 var(--sans); transition: background-color .25s var(--expo), color .25s var(--expo), box-shadow .25s var(--expo); }
.chips label:hover span { box-shadow: inset 0 0 0 1px rgba(29, 29, 32, .6); }
.chips input:checked + span { background: var(--blue); color: #fff; box-shadow: none; }
.chips input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.book-err { flex-basis: 100%; min-height: 1.4em; font: 600 14.5px/1.4 var(--sans); color: var(--err); }
.book-err:empty { min-height: 0; margin-bottom: -14px; }
.book-note { flex-basis: 100%; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.book-slip { margin-top: 22px; max-width: 360px; }
.book-done .book-honest { margin-top: 20px; max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.fld [aria-invalid=true], .fld [aria-invalid=true]:focus-visible { border-bottom-color: var(--err); box-shadow: 0 1.5px 0 var(--err); }
.chips:has([aria-invalid=true]) legend { color: var(--err); }
.chips:has([aria-invalid=true]) span { box-shadow: inset 0 0 0 1px rgba(150, 42, 31, .6); }
.book-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 8px; }
.book-card .link { color: var(--ink); text-decoration-color: rgba(29, 29, 32, .35); }
.book-card .link:hover { color: var(--blue); text-decoration-color: var(--blue); }
button.slip { border: 0; background: none; cursor: pointer; }
.book-done p { margin-top: 14px; font-size: 18px; line-height: 1.5; }
.book-done .slip { margin-top: 26px; }
.book-done:focus { outline: none; }
@media (max-width: 520px) {
  .book-two { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
  .book-form, .book-done { padding: 22px 20px 0; }
  .book-lead .lead-more { display: none; }
  .fld { margin-top: 14px; }
  .chips { margin-top: 16px; gap: 6px; }
  .chips span { padding: 0 11px; }
  /* Send stays in reach at the foot of the card while the fields scroll under it */
  .book-acts { position: sticky; bottom: 0; margin: 0 -20px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: #eceeee; }
  /* the fields fade out above the bar, never under its text, however tall a two-line error makes it */
  .book-acts::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; background: linear-gradient(rgba(236, 238, 238, 0), #eceeee); pointer-events: none; }
  .book-done { padding-bottom: 24px; }
}

/* hidden until revealed by main.js, which only adds this class when it will also take it away */
.pre { opacity: 0; translate: 0 46px; }

@media (prefers-reduced-motion: reduce) {
  .close-frame { transform: none; }
  .scene { transition: none; }
  .receipt li.stamp span { animation: none; }
  .step, .step.is-on { transition: none; filter: none; }
  .cue::after, .pp.up .paper, .tlabs.ready .tlab span, .tlab.flash span, .tlab.nope span, .receipt li.stamp span { animation: none; }
  .receipt li { animation: none; }
  .slip, .doc, .sheet, .rv, .map img { transition: none; }
  .map:hover img { transform: none; }
  .book-card[open] { animation: none; }
}

/* a short phone (375x667 and the like): the hero copy tightens so it ends above the trays; the header keeps
   its Book button and the hours are listed under Visit */
@media (max-width: 600px) and (max-height: 700px) {
  .stage-copy h1 { font-size: 40px; }
  .stage-copy .sum { margin-top: 10px; font-size: 15.5px; line-height: 1.45; }
  .stage-copy .acts { margin-top: 14px; }
  .stage-copy .book-link, .stage-copy .status { display: none; }
}