/* opening-film-whole/assets/moments.css, opening-film-whole/assets/moments-open.css, opening-film-whole/assets/moments-film.css, services-how-finish/assets/moments-services.css, services-how-finish/assets/moments-how.css, services-how-finish/assets/moments-finish.css (moments-v2), scoped to .so */
/* The shared moments (small/site/moments.mjs writes them, moments.js plays them), dressed by the family's --m-* tokens
   (moments.mjs LOOKS) and the family rules at the end: Frame calm and elegant, Kinetic bold and punchy, Night Shift dark and glowing.
   A scene is --len screens tall with its stage pinned to the screen; without script each one is a plain, readable section. */
.so .m { --m-pad: clamp(20px, 5.4vw, 48px); --m-dock: 96px; position: relative; margin: 0; color: var(--m-ink); font-family: var(--m-body); background: var(--m-bg); -webkit-font-smoothing: antialiased; }
.so .m-sr, .so .m.is-on .m-places { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.so .m.is-scene { height: calc(var(--len) * 100vh); height: calc(var(--len) * 100svh); }
.so .m.is-scene > .m-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.so .m-pin { position: relative; }
.so .m.is-scene .m-stage { position: absolute; inset: 0; }
.so .m-stage { position: relative; min-height: 200px; touch-action: pan-y; }
.so .m:not(.is-on) .m-stage:empty { display: none; }
.so .m-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 60%; will-change: transform; }

/* the words every scene opens with */
.so .m-head { position: relative; z-index: 3; padding: 34px var(--m-pad) 18px; pointer-events: none; }
.so .m.is-scene .m-head { position: absolute; left: 0; right: 0; top: 0; padding-top: max(76px, 9svh); }
.so .m-eyebrow { margin: 0; font: 600 11px/1.2 var(--m-label); letter-spacing: .18em; text-transform: uppercase; color: var(--m-muted); }
.so .m-title { margin: 12px 0 0; max-width: 15em; font: 400 clamp(30px, 8.4vw, 64px)/1.04 var(--m-display); letter-spacing: -.015em; text-wrap: balance; }
.so .m-title em { font-style: normal; color: var(--m-muted); }
.so .m-places { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 8px var(--m-pad) 32px; list-style: none; font: 500 15px/1.3 var(--m-body); }

/* ---- the maps ---- */
.so .m-labels { position: absolute; inset: 0; pointer-events: none; transform-origin: 50% 60%; will-change: transform; }
.so .m-town { position: absolute; left: 0; top: 0; white-space: nowrap; font: 600 11.5px/1 var(--m-label); letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 0 3px var(--m-bg), 0 0 10px var(--m-bg); opacity: 0; transition: opacity .6s var(--m-ease); }
.so .m-town { --tx: 13px; --ty: -50%; translate: var(--tx) var(--ty); }
.so .m-town.l { --tx: calc(-100% - 13px); }
.so .m-town.b { --tx: -50%; --ty: 10px; }
.so .m-town.t { --tx: -50%; --ty: calc(-100% - 10px); }
.so .m-town.on { opacity: .96; }
.so .m-town.is-under { opacity: 0; }
.so .m-town em { font-style: normal; font-weight: 500; margin-right: .6em; color: rgb(var(--m-lamp)); opacity: .9; font-variant-numeric: tabular-nums; }
.so .m-town.is-base { font-size: 12.5px; }
.so .m-code { position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap; font: 600 9.5px/1 var(--m-label); letter-spacing: .04em;
  text-shadow: 0 0 3px var(--m-bg), 0 0 8px var(--m-bg); opacity: 0; transition: opacity .5s var(--m-ease); }
.so .m-code.on { opacity: .9; }
.so .m-state { position: absolute; z-index: 2; left: var(--m-pad); right: var(--m-pad); top: calc(var(--head, 28%) + 16px); margin: 0; display: flex; align-items: center; gap: 12px; overflow: hidden;
  font: 600 10.5px/1 var(--m-label); letter-spacing: .14em; text-transform: uppercase; }
.so .m-state span { position: relative; display: inline-grid; padding-left: 16px; white-space: nowrap; }
.so .m-state span::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--m-muted); opacity: .5; transition: background .5s, opacity .5s; }
.so .m-state b { grid-area: 1 / 1; font-weight: 600; transition: opacity .35s; }
.so .m-state b + b { opacity: 0; color: rgb(var(--m-lamp)); }
.so .m.is-thrown .m-state b:first-child:not(:only-child) { opacity: 0; }
.so .m.is-thrown .m-state b + b { opacity: 1; }
.so .m:is(.is-thrown, .is-full) .m-state span::before { background: rgb(var(--m-lamp)); opacity: 1; }
.so .m-state i { font-style: normal; font-weight: 500; color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so .m-tally { position: absolute; z-index: 2; right: var(--m-pad); bottom: calc(var(--m-dock) + 18px + env(safe-area-inset-bottom, 0px)); margin: 0; display: flex; align-items: baseline; gap: 6px;
  font: 500 11px/1 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: var(--m-muted); }
.so .m-tally b { font: 400 64px/.8 var(--m-display); letter-spacing: -.02em; color: var(--m-ink); font-variant-numeric: tabular-nums; }
.so .m-tally span { font-size: 13px; letter-spacing: .04em; margin-right: 4px; }
.so .m-tally em { font-style: normal; }
/* the switch: a plate and a rocker, thrown as the power goes on */
.so .m-switch { position: absolute; z-index: 2; left: var(--m-pad); bottom: calc(var(--m-dock) + 14px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
.so .m-switch::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--m-line); }
.so .m-switch i { position: absolute; left: 50%; top: 50%; width: 14px; height: 24px; margin: -12px 0 0 -7px; border-radius: 4px; background: linear-gradient(#cfc7b8, #e9e2d4 55%, #f6f1e8);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35); transform: perspective(60px) rotateX(-24deg) translateY(2px); transition: transform .32s cubic-bezier(.3, 1.4, .5, 1); }
.so .m.is-thrown .m-switch i { transform: perspective(60px) rotateX(24deg) translateY(-2px); background: linear-gradient(#f6f1e8, #e9e2d4 45%, #cfc7b8); }
.so .m-codes { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 12px var(--m-pad) 26px; font: 500 12px/1.2 var(--m-label); letter-spacing: .08em; color: var(--m-muted); }
.so .m.is-scene .m-codes { position: absolute; z-index: 2; left: 0; right: 40%; bottom: calc(var(--m-dock) + 6px + env(safe-area-inset-bottom, 0px)); padding: 0 0 0 var(--m-pad); }
.so .m-codes b { margin-right: .45em; color: rgb(var(--m-lamp)); font-weight: 600; }
.so .m-leg { margin: 0; padding: 0 var(--m-pad); font: 600 12px/1.3 var(--m-label); letter-spacing: .1em; text-transform: uppercase; color: var(--m-muted); }
.so .m.is-scene .m-leg { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(var(--m-dock) + 14px + env(safe-area-inset-bottom, 0px)); padding-right: 38%; }
.so .m-route.is-full .m-leg { color: rgb(var(--m-lamp)); }

/* ---- spotlight ---- */
.so .m-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.so .m-photo img, .so .m-photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 30%; will-change: transform; }
.so .m-who { position: relative; z-index: 2; padding: 26px var(--m-pad) 34px; }
.so .m-name { margin: 12px 0 0; font: 400 clamp(52px, 15vw, 120px)/.92 var(--m-display); letter-spacing: -.02em; }
.so .m-role { margin: 12px 0 0; font: 600 12px/1.3 var(--m-label); letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--m-lamp)); }
.so .m-bio { margin: 14px 0 0; max-width: 32em; font: 400 15px/1.55 var(--m-body); color: var(--m-muted); }
.so .m-spotlight.is-scene .m-photo { position: absolute; inset: 0; aspect-ratio: auto; }
.so .m-spotlight.is-scene .m-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 38%, var(--m-bg) 100%); opacity: .95; pointer-events: none; }
.so .m-spotlight.is-scene .m-who { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: calc(var(--m-dock) + 4px + env(safe-area-inset-bottom, 0px)); }
.so .m-spotlight.is-scene :is(.m-name, .m-role) { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .9s var(--m-ease), transform 1.1s var(--m-ease); }
.so .m-spotlight.is-scene .m-role { transition-delay: .12s; }
.so .m-spotlight.is-scene .m-bio { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .8s var(--m-ease), transform 1s var(--m-ease); }
.so .m-spotlight.is-found :is(.m-name, .m-role), .so .m-spotlight.is-clear .m-bio { opacity: 1; transform: none; }

/* ---- before/after: the after's left edge travels with transforms; without script the after simply shows ---- */
.so .m-pair { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--m-bg); }
.so :is(.m-sweep, .m-peel, .m-rise).is-scene .m-pair { position: absolute; inset: 0; aspect-ratio: auto; will-change: transform; }
.so .m-before, .so .m-after, .so .m-after > div { position: absolute; inset: 0; overflow: hidden; }
.so :is(.m-sweep, .m-peel, .m-rise).is-scene .m-after, .so :is(.m-sweep, .m-peel, .m-rise).is-scene .m-after > div { will-change: transform; }
.so .m-before img { transform-origin: 30% 50%; will-change: transform; }
.so .m-pair::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 26%, transparent 58%, rgba(0, 0, 0, .7)); pointer-events: none; }
.so .m-edge { position: absolute; z-index: 3; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--m-ink); opacity: 0; box-shadow: 0 0 24px rgba(0, 0, 0, .4); will-change: transform; }
.so .m-cap { position: absolute; z-index: 4; left: var(--m-pad); right: var(--m-pad); bottom: calc(var(--m-dock) + 6px + env(safe-area-inset-bottom, 0px)); margin: 0; color: #fff; font: 400 clamp(22px, 6vw, 40px)/1.1 var(--m-display); }
.so .m-cap span { display: block; margin-bottom: 10px; font: 600 11px/1 var(--m-label); letter-spacing: .16em; color: rgba(255, 255, 255, .75); }
.so :is(.m-sweep, .m-peel, .m-rise):not(.is-scene) .m-cap { position: absolute; bottom: 20px; }
.so .m-tag { position: absolute; z-index: 4; top: calc(max(76px, 9svh) + 36px); margin: 0; padding: .55em .85em; font: 600 10.5px/1 var(--m-label); letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(10, 10, 10, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.so .m-tag.is-before { left: var(--m-pad); }
.so .m-tag.is-after { right: var(--m-pad); opacity: 0; }
.so :is(.m-sweep, .m-peel, .m-rise):not(.is-scene) .m-tag { display: none; }
.so :is(.m-sweep, .m-peel, .m-rise) .m-head { color: #fff; }
.so :is(.m-sweep, .m-peel, .m-rise) .m-head .m-eyebrow { color: rgba(255, 255, 255, .8); }

/* peel: the canvas draws the pages; the pairs keep only their captions. rise: the after is a sheet with its own edge */
.so .m-peel.is-on :is(.m-before, .m-after, .m-edge) { visibility: hidden; }
.so .m-peel.is-on .m-pair { background: none; }
.so .m-sheet { z-index: 1; }
.so .m-peel.is-on .m-pair { z-index: 2; }
.so .m-rise.is-scene .m-before { will-change: transform, opacity; transform-origin: 50% 30%; overflow: hidden; border-radius: 0; }
.so .m-rise.is-scene .m-after { border-radius: 22px 22px 0 0; box-shadow: 0 -30px 70px rgba(0, 0, 0, .55); }
.so .m-rise .m-after::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2px; background: var(--m-ink); opacity: .9; }
.so .m-rise .m-after > div { will-change: transform; }
.so .m-rise .m-edge { display: none; }

/* ---- numbers: one figure a screen, an odometer over its picture (stars, a dot per review, a tape of years); the real figure underneath ---- */
.so .m-nums { margin: 0; padding: 0 var(--m-pad) 32px; display: grid; gap: 4px; }
.so .m-counts.is-scene .m-nums { position: absolute; inset: 0; padding: 0; display: block; }
.so .m-count { position: relative; display: flex; flex-direction: column-reverse; gap: 8px; padding-bottom: 14px; }
.so .m-counts.is-scene .m-count { position: absolute; inset: calc(max(76px, 9svh) + 34px) var(--m-pad) calc(var(--m-dock) + env(safe-area-inset-bottom, 0px)); flex-direction: column; justify-content: flex-start; gap: 10px; padding: 0; will-change: transform, opacity; }
.so .m-count dt { font: 600 11px/1.3 var(--m-label); letter-spacing: .16em; text-transform: uppercase; color: var(--m-muted); }
.so .m-count dd { margin: 0; display: flex; align-items: baseline; font: 400 clamp(64px, 19vw, 150px)/1 var(--m-display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.so .m-counts.is-scene .m-count dd { font-size: clamp(110px, 34vw, 240px); line-height: .9; }
.so .m-count small, .so .m-score small { margin-left: .12em; font-size: .3em; letter-spacing: 0; color: var(--m-muted); }
.so .m-odo { display: inline-flex; height: 1em; line-height: 1; overflow: hidden; }
.so .m-col { display: inline-block; height: 1em; overflow: hidden; }
.so .m-strip { display: block; line-height: 1; will-change: transform; }
.so .m-vis { display: none; }
.so .m-counts.is-scene .m-vis { display: block; position: relative; flex: 1; min-height: 0; margin-top: 14px; }
.so .m-dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.so .m-key { position: absolute; left: 0; bottom: -4px; margin: 0; font: 600 10px/1 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: var(--m-muted); }
.so .m-counts.is-scene .m-vis.is-stars { display: flex; gap: 2.5%; align-items: flex-start; }
.so .m-vis.is-stars i { position: relative; flex: 1; aspect-ratio: 1; background: var(--m-line); clip-path: polygon(50% 2%, 62% 36%, 98% 37%, 69% 59%, 80% 94%, 50% 73%, 20% 94%, 31% 59%, 2% 37%, 38% 36%); }
.so .m-vis.is-stars b { position: absolute; inset: 0; background: rgb(var(--m-lamp)); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.so .m-vis.is-tape { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.so .m-vis.is-tape::after { content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 150px; margin-left: -1px; background: rgb(var(--m-lamp)); }
.so .m-tape { position: absolute; left: 50%; top: 18px; display: flex; height: 124px; will-change: transform; }
.so .m-tape i { position: relative; flex: none; width: var(--step); height: 100%; box-shadow: inset 1px 0 0 var(--m-line); background: linear-gradient(var(--m-ink), var(--m-ink)) 0 0 / 1px 34% no-repeat; }
.so .m-tape i.is-major { background-size: 2px 62%; }
.so .m-tape i[data-after] { opacity: .3; }
.so .m-tape em { position: absolute; left: 6px; bottom: 0; font: 600 15px/1 var(--m-label); font-style: normal; letter-spacing: .04em; color: var(--m-muted); }

/* ---- round the clock ---- */
.so .m-clock .m-head { text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
.so .m-time { margin: 6px 0 0; font: 300 clamp(76px, 25vw, 180px)/.9 var(--m-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.so .m-sun { margin: 8px 0 0; font: 500 13px/1.4 var(--m-label); letter-spacing: .06em; color: var(--m-ink); opacity: .85; }
.so .m-end { position: relative; z-index: 3; padding: 0 var(--m-pad) 30px; }
.so .m-clock.is-scene .m-end { position: absolute; left: 0; right: 0; top: 37%; opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .8s var(--m-ease), transform 1s var(--m-ease); }
.so .m-clock.is-end .m-end { opacity: 1; transform: none; }
.so .m-end .m-title { margin: 0 0 16px; max-width: 12em; }
.so .m-call { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 99px; background: rgb(var(--m-lamp)); color: var(--m-bg); font: 700 16px/1 var(--m-body); text-decoration: none; }

/* ---- lights on: a dark room, a lamp on its cord, the pool of light it opens ---- */
.so .m-room { position: relative; isolation: isolate; overflow: hidden; }
.so .m-veil { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: #04060a; }
.so .m-lamp { position: absolute; z-index: 31; left: 50%; top: 0; width: 64px; height: 120px; pointer-events: none; transform-origin: 50% 0; will-change: transform; }
.so .m-lamp b { position: absolute; left: 50%; display: block; }
.so .m-cord { top: 0; width: 1.5px; height: 58px; margin-left: -.75px; background: rgba(var(--m-ash), .55); }
.so .m-shade { top: 54px; width: 44px; height: 22px; margin-left: -22px; border-radius: 22px 22px 3px 3px; background: linear-gradient(90deg, #6f5a3a, #d9b680 35%, #f3dcae 50%, #a8885a 80%, #5e4a2e); }
.so .m-bulb { top: 70px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff 0 30%, rgb(var(--m-core)) 45%, rgba(var(--m-lamp), 0) 72%); box-shadow: 0 0 22px 8px rgba(var(--m-lamp), .55), 0 0 70px 24px rgba(var(--m-lamp), .25); }
.so .m-beam { top: 72px; width: 520px; height: 640px; margin-left: -260px; opacity: 0; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); background: linear-gradient(rgba(var(--m-lamp), .42), rgba(var(--m-lamp), .1) 55%, transparent); mix-blend-mode: screen; }

/* ---- their van ---- */
.so .m-van .m-stage { overflow: hidden; }
.so .m-van:not(.is-on) .m-shot { position: relative; aspect-ratio: 16 / 9; margin: 0; }
.so .m-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.so .m-shot { margin: 0; overflow: hidden; }
.so .m-cam .m-shot { position: absolute; inset: 0; }
.so .m-mirror { top: 100% !important; bottom: -100% !important; transform: scaleY(-1); opacity: 0; -webkit-mask: linear-gradient(transparent 55%, #000); mask: linear-gradient(transparent 55%, #000); }
.so .m-night { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 400%; pointer-events: none; background: linear-gradient(90deg, transparent, var(--m-bg) 7%); opacity: .93; will-change: transform; }
.so .m-glint { position: absolute; z-index: 1; top: -10%; bottom: -10%; left: 0; width: 14%; pointer-events: none; opacity: 0; will-change: transform;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5) 45%, rgba(var(--m-core), .75) 50%, rgba(255, 255, 255, .5) 55%, transparent); mix-blend-mode: soft-light; }
.so .m-glint + .m-glint { width: 22%; mix-blend-mode: overlay; }
.so .m-van .m-end { position: relative; z-index: 3; padding: 0 var(--m-pad) 30px; }
.so .m-van.is-scene .m-end { position: absolute; left: 0; right: 0; bottom: calc(var(--m-dock) + env(safe-area-inset-bottom, 0px)); opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .8s var(--m-ease), transform 1s var(--m-ease); }
.so .m-van.is-end .m-end { opacity: 1; transform: none; }
.so .m-van .m-title { margin: 10px 0 18px; }

/* ---- credentials ---- */
.so .m-seals { --m-seal: min(66vw, 320px); list-style: none; margin: 0; padding: 10px var(--m-pad) 34px; display: grid; gap: 34px; justify-items: center; }
.so .m-stamps.is-scene .m-seals { position: absolute; left: 0; right: 0; top: calc(max(76px, 9svh) + 150px); bottom: calc(var(--m-dock) + env(safe-area-inset-bottom, 0px)); align-content: space-evenly; padding-top: 0; padding-bottom: 0; }
.so .m-seal { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.so .m-press { position: relative; z-index: 2; width: var(--m-seal); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fbf8f1; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .06), inset 0 -10px 24px rgba(0, 0, 0, .08); will-change: transform, opacity; }
.so .m-seals:has(> :nth-child(2)) { --m-seal: min(40vw, 220px); }
.so .m-press img { position: relative; z-index: 1; width: 52%; height: 52%; object-fit: contain; }
.so .m-ring { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform, opacity; }
.so .m-ring text { font: 600 10.4px/1 var(--m-label); letter-spacing: .2em; fill: #2a2722; }
.so .m-shadow { position: absolute; z-index: 1; top: 0; width: var(--m-seal); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); transform-origin: 50% 50%; translate: 0 14px; opacity: 0; will-change: transform, opacity; }
.so .m-splash { position: absolute; inset: -6%; border-radius: 50%; box-shadow: 0 0 0 3px rgb(var(--m-lamp)); opacity: 0; will-change: transform, opacity; }
.so .m-chip { position: absolute; z-index: 1; left: 50%; top: calc(var(--m-seal) / 2); width: 7px; height: 7px; margin: -3.5px; background: rgb(var(--m-lamp)); opacity: 0; will-change: transform, opacity; }
.so .m-proof { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font: 500 15px/1.3 var(--m-body); color: var(--m-muted); }
.so .m-proof > span { font: 400 clamp(22px, 6vw, 34px)/1.1 var(--m-display); color: var(--m-ink); }
.so .m-proof b { display: inline-flex; font-weight: inherit; font-variant-numeric: tabular-nums; }
.so .m-proof a { font: 600 12px/1 var(--m-label); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--m-lamp)); text-decoration: none; padding: 12px 4px; }

/* ---- blueprint: the sheet's lines over each section, a hatched wash over each photo until it fills ---- */
.so .m-drawn { position: relative; isolation: isolate; }
.so .m-plan { position: absolute; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.so .m-plan path { fill: none; stroke: rgb(var(--m-lamp)); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.so .m-plan text { font: 600 9px/1 var(--m-label); letter-spacing: .12em; text-transform: uppercase; fill: rgb(var(--m-lamp)); }
.so .m-wash { position: absolute; z-index: 19; pointer-events: none; transform-origin: 50% 0; will-change: transform;
  background: repeating-linear-gradient(-45deg, rgba(var(--m-lamp), .2) 0 1px, transparent 1px 9px), var(--m-bg); }
.so .is-plan .m-outline { color: transparent; -webkit-text-stroke: 1px var(--pen); transition: color .7s var(--m-ease), -webkit-text-stroke-color .7s; }
.so .is-plan .m-outline.is-inked { color: var(--pen); }
.so .is-plan .m-pencil { opacity: .2; transition: opacity .8s var(--m-ease); }
.so .is-plan .m-pencil.is-inked { opacity: 1; }

/* ================= the families ================= */
/* Frame: forest and ivory, Bodoni with italic accents, hairlines, an arch round the face */
[data-family="frame"] .so .m-title { font-weight: 400; }
[data-family="frame"] .so .m-title em { font-style: italic; color: rgb(var(--m-lamp)); }
[data-family="frame"] .so .m-eyebrow { letter-spacing: .26em; color: rgb(var(--m-lamp)); font-weight: 500; }
[data-family="frame"] .so .m-town { font-weight: 500; letter-spacing: .14em; }
[data-family="frame"] .so .m-town em { font: italic 400 13px/1 var(--m-display); letter-spacing: 0; }
[data-family="frame"] .so .m-tally b, [data-family="frame"] .so .m-cap { font-style: italic; }
[data-family="frame"] .so .m-state span::before { border-radius: 50%; }
[data-family="frame"] .so .m-spotlight.is-scene .m-photo { inset: calc(max(76px, 9svh) + 4px) 11vw auto; height: 52svh; border-radius: 999px 999px 0 0; }
[data-family="frame"] .so .m-spotlight.is-scene .m-photo::after { display: none; }
[data-family="frame"] .so .m-spotlight .m-who { text-align: center; }
[data-family="frame"] .so .m-name { font-style: italic; font-size: clamp(48px, 14vw, 104px); }
[data-family="frame"] .so .m-bio { margin-inline: auto; }
[data-family="frame"] .so .m-edge { width: 1px; }
[data-family="frame"] .so .m-tag { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: italic 400 18px/1 var(--m-display); letter-spacing: 0; text-transform: none; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
[data-family="frame"] .so .m-count dd, [data-family="frame"] .so .m-score b { font-style: italic; }
[data-family="frame"] .so .m-time { font-weight: 400; font-style: italic; }
[data-family="frame"] .so .m-call { border-radius: 99px; background: none; color: var(--m-ink); box-shadow: inset 0 0 0 1px var(--m-ink); font-weight: 500; letter-spacing: .04em; }
[data-family="frame"] .so .m-rise.is-scene .m-after { border-radius: 50% 50% 0 0 / 24% 24% 0 0; }
[data-family="frame"] .so .m-rise .m-after::before { display: none; }
[data-family="frame"] .so .m-press { background: #f2ede4; box-shadow: inset 0 0 0 1px rgba(16, 36, 27, .25), inset 0 0 0 9px #f2ede4, inset 0 0 0 10px rgba(16, 36, 27, .25), 0 1px 0 rgba(255, 255, 255, .5); }
[data-family="frame"] .so .m-ring text { font: italic 400 13px/1 var(--m-display); letter-spacing: .12em; fill: #10241b; }
[data-family="frame"] .so .m-splash { box-shadow: 0 0 0 1px rgb(var(--m-lamp)); }
[data-family="frame"] .so .m-chip { display: none; }
[data-family="frame"] .so .m-proof > span { font-style: italic; }
[data-family="frame"] .so .m-tape em { font: italic 400 15px/1 var(--m-display); }
[data-family="frame"] .so .m-plan text { font: italic 400 11px/1 var(--m-display); letter-spacing: .04em; text-transform: none; }

/* Kinetic: ink and paper, the client's colour as the light, condensed black capitals, hard edges */
[data-family="kinetic"] .so .m-title { font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; line-height: .86; letter-spacing: -.01em; font-size: clamp(40px, 12vw, 104px); }
[data-family="kinetic"] .so .m-title em { color: rgb(var(--m-lamp)); }
[data-family="kinetic"] .so .m-eyebrow { display: inline-block; padding: .6em 1em; border: 2px solid currentColor; border-radius: 99px; color: var(--m-ink); font-weight: 800; letter-spacing: .08em; }
[data-family="kinetic"] .so .m-town, [data-family="kinetic"] .so .m-state, [data-family="kinetic"] .so .m-leg { font-weight: 800; font-variation-settings: "wdth" 88; }
[data-family="kinetic"] .so .m-town { font-size: 13px; letter-spacing: .04em; }
[data-family="kinetic"] .so .m-town.is-base { font-size: 15px; }
[data-family="kinetic"] .so :is(.m-tally b, .m-count dd, .m-score b, .m-time, .m-name) { font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; letter-spacing: -.02em; }
[data-family="kinetic"] .so .m-tally b { font-size: 84px; color: rgb(var(--m-lamp)); }
[data-family="kinetic"] .so .m-name { line-height: .82; font-size: clamp(76px, 24vw, 170px); }
[data-family="kinetic"] .so .m-role { background: rgb(var(--m-lamp)); color: var(--m-bg); display: inline-block; padding: .45em .65em; font-weight: 800; }
[data-family="kinetic"] .so .m-edge { width: 6px; left: -3px; background: rgb(var(--m-lamp)); box-shadow: none; }
[data-family="kinetic"] .so .m-tag { background: var(--m-ink); color: var(--m-bg); font-weight: 800; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-family="kinetic"] .so .m-cap { font-weight: 900; font-variation-settings: "wdth" 72; text-transform: uppercase; line-height: .9; }
[data-family="kinetic"] .so .m-count dd { color: rgb(var(--m-lamp)); font-size: clamp(86px, 27vw, 190px); line-height: .86; }
[data-family="kinetic"] .so .m-count dt { color: var(--m-ink); font-weight: 800; letter-spacing: .08em; }
[data-family="kinetic"] .so .m-count::after { height: 4px; background: rgb(var(--m-lamp)); opacity: 1; }
[data-family="kinetic"] .so .m-time { font-size: clamp(96px, 32vw, 220px); line-height: .8; }
[data-family="kinetic"] .so .m-call { border-radius: 6px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
[data-family="kinetic"] .so .m-score b { color: rgb(var(--m-lamp)); }
[data-family="kinetic"] .so .m-rise.is-scene .m-after { border-radius: 0; }
[data-family="kinetic"] .so .m-rise .m-after::before { height: 8px; background: rgb(var(--m-lamp)); }
[data-family="kinetic"] .so .m-press { border-radius: 10px; transform-origin: 50% 50%; }
[data-family="kinetic"] .so .m-shadow { border-radius: 10px; background: rgba(0, 0, 0, .5); filter: none; }
[data-family="kinetic"] .so .m-splash { border-radius: 14px; box-shadow: 0 0 0 6px rgb(var(--m-lamp)); }
[data-family="kinetic"] .so .m-ring { display: none; }
[data-family="kinetic"] .so .m-proof > span { font-weight: 900; font-variation-settings: "wdth" 72; text-transform: uppercase; }
[data-family="kinetic"] .so .m-tape i { background-size: 3px 34%; }
[data-family="kinetic"] .so .m-tape i.is-major { background-size: 4px 70%; }
[data-family="kinetic"] .so .m-tape em { font-weight: 900; font-size: 16px; }
[data-family="kinetic"] .so .m-plan path { stroke-width: 2; }
[data-family="kinetic"] .so .m-wash { background: repeating-linear-gradient(-45deg, rgba(var(--m-lamp), .55) 0 3px, transparent 3px 14px), var(--m-bg); }
[data-family="kinetic"] .so .m-shade { background: rgb(var(--m-lamp)); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); border-radius: 0; height: 26px; width: 54px; margin-left: -27px; }

/* Night Shift: night and tungsten, Geist and its mono, light that glows */
[data-family="night-shift"] .so .m-title { font-weight: 600; letter-spacing: -.035em; }
[data-family="night-shift"] .so .m-title em { color: rgba(244, 239, 230, .5); }
[data-family="night-shift"] .so .m-eyebrow { font-weight: 500; }
[data-family="night-shift"] .so :is(.m-tally b, .m-count dd, .m-score b, .m-time) { font-weight: 300; text-shadow: 0 0 26px rgba(var(--m-lamp), .5); }
[data-family="night-shift"] .so .m-count dd { color: rgb(var(--m-core)); }
[data-family="night-shift"] .so .m-count::after { background: rgb(var(--m-lamp)); box-shadow: 0 0 10px rgba(var(--m-lamp), .8); opacity: 1; }
[data-family="night-shift"] .so .m-name { font-weight: 600; letter-spacing: -.04em; }
[data-family="night-shift"] .so .m-town.on { text-shadow: 0 0 3px var(--m-bg), 0 0 10px var(--m-bg), 0 0 18px rgba(var(--m-lamp), .35); }
[data-family="night-shift"] .so .m-edge { background: rgb(var(--m-core)); box-shadow: 0 0 18px 2px rgba(var(--m-lamp), .8); }

[data-family="night-shift"] .so .m-call { box-shadow: 0 0 30px rgba(var(--m-lamp), .45); }
[data-family="night-shift"] .so .m-rise .m-after::before { background: rgb(var(--m-core)); box-shadow: 0 0 18px 3px rgba(var(--m-lamp), .8); }
[data-family="night-shift"] .so .m-press { background: #f6f2ea; box-shadow: 0 0 0 1px rgba(var(--m-lamp), .5), 0 0 60px rgba(var(--m-lamp), .25); }
[data-family="night-shift"] .so .m-splash { box-shadow: 0 0 0 2px rgb(var(--m-core)), 0 0 40px 10px rgba(var(--m-lamp), .6); }
[data-family="night-shift"] .so .m-chip { border-radius: 50%; box-shadow: 0 0 10px rgba(var(--m-lamp), .9); }
[data-family="night-shift"] .so .m-vis.is-stars { filter: drop-shadow(0 0 14px rgba(var(--m-lamp), .55)); }
[data-family="night-shift"] .so .m-plan path { filter: drop-shadow(0 0 3px rgba(var(--m-lamp), .7)); }
[data-family="night-shift"] .so .m-shade { width: 6px; height: 14px; margin-left: -3px; border-radius: 2px; background: #3a3631; }
[data-family="night-shift"] .so .m-bulb { top: 66px; width: 20px; height: 24px; margin-left: -10px; border-radius: 50% 50% 46% 46%; }

@media (prefers-reduced-motion: reduce) { .so .m *, .so .m *::before, .so .m *::after { transition: none !important; } }

/* Bodoni Moda's automatic optical size thins its hairlines to nothing at display sizes (an em dash and the A's bar vanish); the font shorthand resets it, hence every element */
[data-family="frame"] .so, [data-family="frame"] .so * { font-optical-sizing: none !important; }

/* The openers (moments-open.js): the hero they hand over to (film, words, bar, call dock) and the cover they draw on, in each family's dress.
   Without script, or with reduced motion, this is the finished hero. Nothing here transitions: the opener's clock moves every part. */
.so .m-open { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--m-bg); color: #fff; isolation: isolate; }
.so .o-film, .so .o-film :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.so .o-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 55%), rgb(0 0 0 / 8%) 18%, rgb(0 0 0 / 14%) 28%, rgb(0 0 0 / 62%) 46%, rgb(0 0 0 / 84%) 72%, rgb(0 0 0 / 90%)); }
.so .o-stage { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.so .o-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.so .o-bar { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 18px 14px; }
.so .o-bar b { font: 600 15px/1.1 var(--m-body); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so .o-bar a { flex: none; font: 600 13px/1 var(--m-body); color: #fff; text-decoration: none; padding: 10px 14px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 99px; font-variant-numeric: tabular-nums; }
.so .o-copy { position: absolute; z-index: 2; left: var(--m-pad, 20px); right: var(--m-pad, 20px); bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
.so .o-copy > * { margin: 0; }
.so .o-kick { font: 600 11px/1.3 var(--m-label); letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--m-lamp)); }
.so .o-copy h1 { margin-top: 12px; font: 400 clamp(46px, 13vw, 96px)/.98 var(--m-display); letter-spacing: -.02em; text-wrap: balance; }
.so .o-sub { margin-top: 14px; max-width: 30em; font: 400 15px/1.45 var(--m-body); color: rgb(255 255 255 / 84%); }
.so .o-read { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 22%); font: 500 10.5px/1.6 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / 78%); }
.so .o-read span { white-space: nowrap; }
.so .o-read i { font-style: normal; margin: 0 .2em; color: rgb(var(--m-lamp)); }
.so .o-dock { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: center; height: 56px;
  border-radius: 14px; background: rgb(var(--m-lamp)); color: var(--m-bg); font: 700 16px/1 var(--m-body); text-decoration: none; font-variant-numeric: tabular-nums; }
.so .o-replay { position: absolute; z-index: 5; right: 14px; top: 64px; font: 600 10px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgb(0 0 0 / 45%);
  border: 0; border-radius: 99px; padding: 8px 11px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.is-cap .so .o-replay { display: none; }
/* until the opener's first frame the cover is the family's ground and the bar and dock wait (with script, and motion allowed) */
@media (prefers-reduced-motion: no-preference) { .js .so .m-open:not([data-opener="late"]) .o-stage { background: var(--m-bg); } .js .so .m-open:not([data-opener="late"]) :is(.o-bar, .o-dock, .o-copy) { opacity: 0; } }
/* the opener's labels are canvas, but its name lands as type (fly-in) */
.so .o-name { position: absolute; z-index: 4; left: 0; top: 0; margin: 0; white-space: nowrap; transform-origin: 0 0; pointer-events: none; opacity: 0; font: 400 44px/1 var(--m-display); color: #fff; }

/* Frame: calm, Bodoni italic, a pill dock */
[data-family="frame"] .so .o-copy h1 { font-style: italic; }
[data-family="frame"] .so .o-kick { font-weight: 500; letter-spacing: .26em; }
[data-family="frame"] .so .o-bar b { font: italic 500 18px/1 var(--m-display); }
[data-family="frame"] .so .o-dock { border-radius: 99px; font-weight: 600; letter-spacing: .01em; }
[data-family="frame"] .so .o-name { font-style: italic; }
/* Kinetic: condensed, upper case, square corners, the client's own colour */
[data-family="kinetic"] .so .o-copy h1 { font-weight: 900; font-variation-settings: "wdth" 70; font-stretch: 70%; text-transform: uppercase; line-height: .84; letter-spacing: -.01em; font-size: clamp(60px, 18vw, 140px); }
[data-family="kinetic"] .so .o-kick, [data-family="kinetic"] .so .o-read { font-weight: 800; font-variation-settings: "wdth" 88; letter-spacing: .06em; }
[data-family="kinetic"] .so .o-bar b { font-weight: 900; font-variation-settings: "wdth" 75; text-transform: uppercase; letter-spacing: .01em; font-size: 16px; }
[data-family="kinetic"] .so .o-bar a { border-radius: 4px; border-width: 2px; }
[data-family="kinetic"] .so .o-dock { border-radius: 4px; background: rgb(var(--m-lamp)); text-transform: uppercase; font-weight: 900; font-variation-settings: "wdth" 80; letter-spacing: .04em; font-size: 18px; }
[data-family="kinetic"] .so .o-name { font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; }
/* Night Shift: Geist tight, mono readouts, a glowing dock */
[data-family="night-shift"] .so .o-copy h1 { font-weight: 600; letter-spacing: -.045em; line-height: .96; }
[data-family="night-shift"] .so .o-dock { box-shadow: 0 0 34px rgba(var(--m-lamp), .38); }
[data-family="night-shift"] .so .o-name { font-weight: 600; letter-spacing: -.04em; }

/* Film moment (Word, Number, Name). Without .is-live (no JS, reduced motion) it is its last frame: the film's last shot, the last line,
   the call and the readout. Live: a pinned stage --len screens long; moments-film.js sets every moving value per frame. */
.so .m-film { --mf-dock: calc(22px + env(safe-area-inset-bottom, 0px)); position: relative; background: var(--m-bg); color: var(--m-ink); font-family: var(--m-body); -webkit-font-smoothing: antialiased; }
.so .m-film.is-live { height: calc(var(--len, 3) * 100vh); height: calc(var(--len, 3) * 100svh); }
.so .m-film p { margin: 0; }
.so .mf-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.so .m-film.is-live .mf-pin { position: sticky; top: 0; }
.so .mf-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the film: its last shot (still), then live the loop's first frame, the loop and the film; a scrim under the words, never a blur */
.so .mf-media { position: absolute; inset: 0; z-index: 0; background: var(--m-bg); }
.so .mf-media > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.so .mf-media > :is(.mf-start, video) { display: none; }
.so .m-film.is-live .mf-media > :is(.mf-start, video) { display: block; }
.so .m-film.is-live .mf-end { display: none; }
.so .m-film.is-live video { opacity: 0; }
.so .mf-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-bg) 74%, transparent) 0, transparent 20%, transparent 34%, color-mix(in srgb, var(--m-bg) 58%, transparent) 58%, color-mix(in srgb, var(--m-bg) 90%, transparent) 100%); }
.so .mf-plane { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }

/* the fixed type block: the label line on top, the reel line at the foot, both on hairlines */
.so .mf-top { position: absolute; z-index: 3; left: var(--m-pad); right: var(--m-pad); top: 0; display: flex; justify-content: space-between; gap: 14px; padding: max(22px, env(safe-area-inset-top, 0px)) 0 11px; border-bottom: 1px solid var(--m-line);
  font: 500 10px/1.3 var(--m-label); letter-spacing: .15em; text-transform: uppercase; color: var(--m-muted); }
.so .mf-top span { white-space: nowrap; }
.so .mf-top span:last-child { text-align: right; color: var(--m-ink); }
.so .mf-reel .mf-clock { margin-left: auto; }
.so .mf-reel { position: absolute; z-index: 3; left: var(--m-pad); right: var(--m-pad); bottom: var(--mf-dock); display: flex; align-items: center; gap: 9px; padding-top: 11px; border-top: 1px solid var(--m-line);
  font: 500 10px/1 var(--m-label); letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--m-muted); white-space: nowrap; }
.so .mf-reel .mf-chap { color: var(--m-ink); }
.so .mf-bar { display: flex; gap: 3px; }
.so .mf-bar i { position: relative; width: 16px; height: 3px; background: var(--m-line); overflow: hidden; }
.so .mf-bar b { position: absolute; inset: 0; background: rgb(var(--m-lamp)); transform-origin: 0 50%; transform: scaleX(1); }
.so .m-film.is-live .mf-bar b { transform: scaleX(0); }
.so .mf-rate { position: absolute; z-index: 3; left: var(--m-pad); bottom: calc(var(--mf-dock) + 36px); font: 600 10px/1 var(--m-label); letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--m-ink); white-space: nowrap; will-change: transform; }
.so .mf-under { position: absolute; z-index: 3; left: 0; top: 0; display: none; padding-right: var(--m-pad); font: 500 10px/1.5 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: var(--m-muted); }
.so .m-film.is-live .mf-under { display: block; }

/* the lines: the last one is the still; live, each sits over the film's foot and is moved by the script */
.so .mf-beats { position: absolute; z-index: 3; left: var(--m-pad); right: var(--m-pad); bottom: calc(var(--mf-dock) + 70px); margin: 0; padding: 0; list-style: none; }
.so .mf-beat { position: absolute; left: 0; right: 0; bottom: 0; }
.so .mf-beat:not(:last-child) { display: none; }
.so .m-film.is-live .mf-beat { display: block; visibility: hidden; }
/* the small type keeps its edge over a light shot (a white sofa, a window): a soft shadow, never a box */
.so .mf-k, .so .mf-s { text-shadow: 0 0 12px rgb(0 0 0 / 50%), 0 1px 2px rgb(0 0 0 / 35%); }
.so .mf-k { margin-bottom: 14px !important; font: 500 10px/1.4 var(--m-label); letter-spacing: .15em; text-transform: uppercase; color: var(--m-muted); }
.so .mf-k b { font-weight: inherit; color: rgb(var(--m-lamp)); margin-right: .6em; }
.so .mf-l { font-family: var(--m-display); color: var(--m-ink); text-wrap: balance; }
.so .mf-w { display: inline-block; vertical-align: top; }
.so .mf-w > span { display: inline-block; }
.so .m-film.is-live .mf-k, .so .m-film.is-live .mf-s, .so .m-film.is-live .mf-call { opacity: 0; }
.so .mf-s { margin-top: 14px !important; max-width: 30ch; font: 400 15px/1.45 var(--m-body); color: var(--m-muted); }
.so .mf-call { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; min-height: 50px; padding: 0 22px; text-decoration: none; font-variant-numeric: tabular-nums; }

/* Frame: Bodoni Moda italic over Jost, a cream pill */
[data-family="frame"] .so .mf-l { font-style: italic; font-weight: 500; font-size: clamp(36px, 10.4vw, 64px); line-height: 1.02; letter-spacing: -.01em; }
[data-family="frame"] .so :is(.mf-top, .mf-reel, .mf-rate, .mf-under, .mf-k) { letter-spacing: .2em; font-size: 10.5px; }
[data-family="frame"] .so .mf-call { border-radius: 999px; background: var(--m-ink); color: var(--m-bg); font: 500 12px/1 var(--m-body); letter-spacing: .18em; text-transform: uppercase; }
[data-family="frame"] .so .mf-call b { font: italic 600 19px/1 "Bodoni Moda", Georgia, serif; letter-spacing: 0; text-transform: none; }
/* Kinetic: Archivo 900 condensed capitals, words rising out of their own line, a square block in the brand colour */
[data-family="kinetic"] .so .mf-l { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(50px, 15.4vw, 96px); line-height: .9; letter-spacing: -.005em; }
/* a long line steps down a size so it never climbs past the middle of the screen */
[data-family="kinetic"] .so .mf-l.is-long { font-size: clamp(42px, 12vw, 80px); }
[data-family="kinetic"] .so .mf-w { overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
[data-family="kinetic"] .so :is(.mf-top, .mf-reel, .mf-rate, .mf-under, .mf-k) { font-weight: 700; font-stretch: 85%; letter-spacing: .1em; font-size: 11px; }
[data-family="kinetic"] .so .mf-k b, [data-family="kinetic"] .so .mf-bar b { color: var(--m-brand); background: var(--m-brand); }
[data-family="kinetic"] .so .mf-k b { background: none; }
[data-family="kinetic"] .so .mf-bar i { height: 4px; }
[data-family="kinetic"] .so .mf-call { border-radius: 0; background: var(--m-brand); color: #0d0c0a; font: 900 20px/1 var(--m-display); font-stretch: 70%; letter-spacing: .02em; text-transform: uppercase; padding: 0 20px; min-height: 54px; }
/* Night Shift: Geist tight over Geist Mono, a lit outline */
[data-family="night-shift"] .so .mf-l { font-weight: 600; font-size: clamp(34px, 9.6vw, 60px); line-height: 1.04; letter-spacing: -.035em; }
[data-family="night-shift"] .so .mf-call { border-radius: 3px; border: 1px solid rgba(var(--m-lamp), .75); color: rgb(var(--m-core)); background: rgba(var(--m-lamp), .1); box-shadow: 0 0 22px rgba(var(--m-lamp), .22), inset 0 0 12px rgba(var(--m-lamp), .12);
  font: 500 12px/1 var(--m-label); letter-spacing: .14em; text-transform: uppercase; }
[data-family="night-shift"] .so .mf-call b { font: 600 17px/1 var(--m-body); letter-spacing: -.01em; }

/* The services moments (moments-v2): problem to fix, service deck, called for; dressed by the family's --m-* tokens. Without script
   each is its plain list of facts; with it the list goes to the screen reader and the stage draws it. */
.so .m-svc.is-still > .m-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.so .m-svc.is-still .m-head { position: absolute; left: 0; right: 0; top: 0; padding-top: max(76px, 9svh); }
.so .m-svc.is-still .m-stage { position: absolute; inset: 0; }
.so .sv-facts { margin: 0; padding: 6px var(--m-pad) 30px; list-style: none; display: grid; gap: 16px; font: 400 16px/1.45 var(--m-body); }
.so .sv-facts li > * { display: block; }
.so .sv-facts b { font: 400 26px/1.1 var(--m-display); }
.so .sv-facts cite { font: 600 11px/1.3 var(--m-label); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--m-muted); }
.so .sv-facts img { width: 100%; height: auto; margin-bottom: 8px; }
.so p.sv-facts { padding-top: 0; font: 600 12px/1.4 var(--m-label); letter-spacing: .12em; text-transform: uppercase; color: var(--m-muted); }
.so .m-svc.is-on .sv-facts { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.so .m-svc .m-cv { transform: none; will-change: auto; }
/* the readout: the moment's mono plane, above the dock like the maps' legend */
.so .sv-read { position: absolute; z-index: 3; left: var(--m-pad); right: var(--m-pad); bottom: calc(var(--m-dock) + 14px + env(safe-area-inset-bottom, 0px)); margin: 0;
  font: 600 10.5px/1.4 var(--m-label); letter-spacing: .13em; text-transform: uppercase; color: var(--m-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so .sv-read b { font-weight: 600; color: rgb(var(--m-lamp)); }
.so .sv-read.is-end { color: var(--m-ink); }

/* ---- problem to fix ---- */
.so .pf-rows { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.so .pf-line { z-index: 2; }
.so .pf-row { position: absolute; left: var(--m-pad); right: var(--m-pad); top: 0; }
.so .pf-src { margin: 0; height: 14px; font: 600 9.5px/14px var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.so .pf-say, .so .pf-cap { position: absolute; left: 0; right: 0; top: 18px; margin: 0; font: 400 var(--pf-big, 36px)/1.12 var(--m-body); letter-spacing: -.015em; color: var(--m-ink); }
.so .pf-cap { font-size: 15px; visibility: hidden; }
.so .pf-nb { white-space: nowrap; }
.so .pf-w { display: inline-block; transform-origin: 0 0; }
.so .pf-q { color: rgb(var(--m-lamp)); }
.so .pf-name { position: absolute; left: 0; top: 0; margin: -.08em 0 0; padding: .08em .14em .16em 0; font: 400 var(--pf-name, 44px)/1 var(--m-display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; color: var(--m-ink); }
.so .pf-name > span { display: inline-block; }
.so .pf-name i { display: inline-block; font-style: normal; transform: translate3d(0, 150%, 0); }
[data-family="kinetic"] .so :is(.pf-say, .pf-cap) { font-weight: 800; font-variation-settings: "wdth" 82; text-transform: uppercase; letter-spacing: 0; line-height: 1.02; }
[data-family="kinetic"] .so .pf-cap { font-size: 13px; }
[data-family="kinetic"] .so .pf-name { font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; letter-spacing: -.01em; line-height: .88; }
[data-family="kinetic"] .so .pf-src { font-weight: 800; letter-spacing: .08em; font-variation-settings: "wdth" 88; }
[data-family="frame"] .so :is(.pf-say, .pf-cap) { font-weight: 300; letter-spacing: -.01em; }
[data-family="frame"] .so :is(.pf-name, .pf-name i) { font-style: italic; letter-spacing: -.01em; }
[data-family="night-shift"] .so :is(.pf-say, .pf-cap) { letter-spacing: -.03em; }
[data-family="night-shift"] .so .pf-name { font-weight: 600; letter-spacing: -.045em; }
[data-family="night-shift"] .so .pf-src, [data-family="night-shift"] .so .sv-read { font-weight: 500; letter-spacing: .08em; }

/* ---- service deck ---- */
.so .sd-names { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.so .sd-name { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; opacity: 0; color: #fff; font: 400 clamp(26px, 7.6vw, 34px)/1 var(--m-display); letter-spacing: -.015em; text-wrap: balance; }
.so .sd-list { position: absolute; z-index: 1; left: var(--m-pad); right: var(--m-pad); top: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.so .sd-list li { display: flex; align-items: baseline; gap: 12px; overflow: hidden; padding: .04em 0 .12em; }
.so .sd-list em { flex: none; width: 2.2em; font: 600 10px/1 var(--m-label); letter-spacing: .1em; font-style: normal; color: rgb(var(--m-lamp)); opacity: 0; font-variant-numeric: tabular-nums; }
.so .sd-list span { font: 400 clamp(24px, 7vw, 31px)/1.08 var(--m-display); letter-spacing: -.015em; text-wrap: balance; /* a long service name ("Grass cutting and lawn maintenance") takes two lines, never a cut */ transform: translate3d(0, 150%, 0); }
.so .sd-read { white-space: normal; }
.so .sd-read > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so .sd-read > span + span { margin-top: 3px; font: 400 14px/1.3 var(--m-body); letter-spacing: 0; text-transform: none; color: var(--m-ink); }
.so .sd-read i { font-style: normal; }
.so .sd-read.is-end > span:first-child { color: var(--m-ink); }
[data-family="kinetic"] .so :is(.sd-name, .sd-list span) { font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; letter-spacing: -.005em; line-height: .92; }
[data-family="kinetic"] .so .sd-name { font-size: clamp(30px, 9vw, 40px); }
[data-family="kinetic"] .so .sd-read > span + span { font-weight: 600; }
[data-family="frame"] .so :is(.sd-name, .sd-list span) { font-style: italic; }
[data-family="frame"] .so .sd-read > span + span { font: italic 400 16px/1.3 var(--m-display); }
[data-family="night-shift"] .so :is(.sd-name, .sd-list span) { font-weight: 600; letter-spacing: -.04em; }

/* ---- called for ---- */
.so .cf-rows { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.so .cf-job { position: absolute; left: var(--m-pad); top: 0; margin: 0; white-space: nowrap; font: 400 var(--cf-job, 18px)/1 var(--m-display); letter-spacing: -.01em; color: var(--m-muted); transition: color .5s var(--m-ease); }
.so .cf-job.is-full { color: var(--m-ink); }
.so .cf-n { position: absolute; left: 0; top: 0; opacity: 0; font: 400 24px/1 var(--m-display); color: rgb(var(--m-lamp)); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.so .cf-read { white-space: normal; }
.so .cf-read > span { display: block; }
.so .cf-read > span:first-child { margin-bottom: 4px; font: 400 15px/1.3 var(--m-body); letter-spacing: 0; text-transform: none; color: var(--m-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; height: 2.6em; }
.so .cf-read.is-end > span:last-child { color: rgb(var(--m-lamp)); }
[data-family="kinetic"] .so :is(.cf-job, .cf-n) { font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; }
[data-family="kinetic"] .so .cf-n { font-size: 30px; }
[data-family="kinetic"] .so .cf-read > span:first-child { font-weight: 600; }
[data-family="frame"] .so .cf-job { font-style: italic; }
[data-family="frame"] .so .cf-n { font-weight: 500; font-size: 27px; }
[data-family="frame"] .so .cf-read.is-quote > span:first-child { font: italic 400 17px/1.3 var(--m-display); }
[data-family="frame"] .so .cf-read > span:first-child { height: calc(2.6 * 17px); }
[data-family="night-shift"] .so .cf-job { font-weight: 600; letter-spacing: -.035em; }
[data-family="night-shift"] .so .cf-n { font-weight: 300; text-shadow: 0 0 18px rgba(var(--m-lamp), .55); }

/* How it works (moments-how.js): the phone to the doorstep, the promise ledger, the ring times. Without script each is a plain section:
   the number and the review, the list of promises with their source lines, the week's hours. */
.so .mh.is-still > .m-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.so .mh:is(.is-scene, .is-still) .m-stage { position: absolute; inset: 0; }
.so .mh.is-still .m-head { position: absolute; left: 0; right: 0; top: 0; padding-top: max(76px, 9svh); }
.so .mh:is(.is-scene, .is-still) .mh-foot { position: absolute; z-index: 3; left: var(--m-pad); right: var(--m-pad); bottom: calc(var(--m-dock) + 14px + env(safe-area-inset-bottom, 0px)); }
.so .mh-foot { padding: 0 var(--m-pad) 26px; }
.so .mh:is(.is-scene, .is-still) .mh-foot { padding: 0; }
.so .mh-read, .so .mh-count, .so .mh-quote { margin: 0; font: 600 11px/1.5 var(--m-label); letter-spacing: .12em; text-transform: uppercase; color: var(--m-muted); font-variant-numeric: tabular-nums; }
.so .mh-read { min-height: 3em; }
.so .mh-read span { display: block; }
.so .mh-read span + span { color: var(--m-muted); }
.so .mh.is-full .mh-read span:first-child { color: rgb(var(--m-lamp)); }
.so .mh-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .1em; margin: 0 -.06em -.1em; }
.so .mh-w i { display: inline-block; font-style: inherit; will-change: transform; }

/* ---- phone to doorstep ---- */
.so .mh-dial { margin: 10px 0 0; }
.so .mh-num { position: relative; display: inline-block; pointer-events: auto; color: var(--m-ink); text-decoration: none; white-space: nowrap;
  font: 400 clamp(36px, 10.4vw, 64px)/1.05 var(--m-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.so .mh-lit { position: absolute; inset: 0; color: rgb(var(--m-lamp)); opacity: 0; }
.so .mh-ul { position: absolute; left: 0; right: 0; bottom: -.04em; height: 2px; background: rgb(var(--m-lamp)); transform: scaleX(0); transform-origin: 0 50%; }
.so .mh-sub { margin: 12px 0 0; max-width: 15.5em; font: 400 15px/1.45 var(--m-body); color: var(--m-muted); }
.so .mh-said { margin: 0 0 14px; }
.so .mh-said blockquote { margin: 0; max-width: 13em; font: 400 clamp(24px, 6.6vw, 40px)/1.12 var(--m-display); letter-spacing: -.015em; text-wrap: balance; }
.so .mh-said figcaption { margin-top: 8px; font: 500 13px/1.4 var(--m-body); color: var(--m-muted); }
.so .mh:is(.is-scene, .is-still) .mh-said figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.so .m-phone-door .m-state i { color: var(--m-muted); }

/* ---- the promise ledger ---- */
.so .mh-ledger { margin: 0; padding: 4px var(--m-pad) 10px; list-style: none; }
.so .m-promises:is(.is-scene, .is-still) .m-head { position: relative; }
/* the ledger sits in the room between the headline and the readout */
.so .m-promises:is(.is-scene, .is-still) > .m-pin { display: flex; flex-direction: column; padding-bottom: calc(var(--m-dock) + 172px + env(safe-area-inset-bottom, 0px)); }
.so .m-promises:is(.is-scene, .is-still) .mh-ledger { margin-block: auto; }
.so .mh:is(.is-scene, .is-still) .mh-ledger { position: relative; z-index: 2; padding-top: 0; padding-bottom: 0; }
.so .mh-row { display: grid; grid-template-columns: 2.2em 1fr; align-items: baseline; padding: 15px 52px 12px 0; border-bottom: 1px solid var(--m-line); }
.so .mh:is(.is-scene, .is-still) .mh-row { border-bottom-color: transparent; }
.so .mh-no { font: 600 11px/1 var(--m-label); letter-spacing: .1em; color: rgb(var(--m-lamp)); font-variant-numeric: tabular-nums; }
.so .mh-what { font: 400 clamp(23px, 6.4vw, 38px)/1.06 var(--m-display); letter-spacing: -.01em; }
.so .mh-src { grid-column: 2; margin-top: 6px; font: 400 13px/1.4 var(--m-body); color: var(--m-muted); quotes: "\201C" "\201D"; }
.so .mh:is(.is-scene, .is-still) .mh-src { display: none; }
.so .mh-quote { display: flex; align-items: flex-end; min-height: 4.5em; margin-bottom: 10px; letter-spacing: .04em; text-transform: none; font-weight: 500; color: var(--m-ink); opacity: .82; }
.so .mh-count b { display: inline-block; min-width: 4.4em; margin-right: .3em; font-weight: 700; color: rgb(var(--m-lamp)); }
.so .mh-end { margin: 16px 0 0; }
.so .mh:is(.is-scene, .is-still) .mh-end { opacity: 0; will-change: transform, opacity; }

/* ---- ring times ---- */
.so .mh-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 18px; margin: 0; padding: 6px var(--m-pad) 12px; font: 500 14px/1.3 var(--m-label); font-variant-numeric: tabular-nums; }
.so .mh-week div { display: flex; gap: 10px; } .so .mh-week dt { width: 2.6em; color: rgb(var(--m-lamp)); } .so .mh-week dd { margin: 0; }
.so .mh:is(.is-scene, .is-still) .mh-week { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.so .mh-total { margin: 0; padding: 4px var(--m-pad) 14px; display: flex; align-items: baseline; gap: 10px; }
.so .mh-total b { font: 400 clamp(44px, 12vw, 72px)/1 var(--m-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.so .mh-total > span:not(.mh-mask) { font: 600 11px/1.3 var(--m-label); letter-spacing: .12em; text-transform: uppercase; color: var(--m-muted); }
.so .mh:is(.is-scene, .is-still) .mh-total { position: absolute; z-index: 3; left: 0; top: 0; translate: -50% -50%; flex-direction: column; align-items: center; gap: 4px; padding: 0; opacity: 0; text-align: center; }
.so .mh-mask { display: block; overflow: hidden; padding: 26px 34px 14px; margin: -26px 0 -14px; }
.so .mh:is(.is-scene, .is-still) .mh-total b { display: block; font-size: clamp(40px, 11vw, 60px); line-height: .95; will-change: transform; }
.so .mh:is(.is-scene, .is-still) .mh-total > span:not(.mh-mask) { max-width: 8.5em; font-size: 9.5px; letter-spacing: .12em; }
.so .mh-face { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.so .mh-dn, .so .mh-hr { position: absolute; left: 0; top: 0; font: 600 8.5px/1 var(--m-label); letter-spacing: .08em; text-transform: uppercase; color: var(--m-muted); translate: -100% -50%; white-space: nowrap; }
.so .mh-dn.on { color: rgb(var(--m-lamp)); }
.so .mh-face.is-flip .mh-dn { translate: 14px -50%; }
.so .mh-hr { font-size: 10px; translate: -50% -50%; font-variant-numeric: tabular-nums; }
.so .mh-day { position: absolute; left: 0; top: 0; margin: 0; translate: -50% -50%; }
.so .mh-day b { display: block; font: 400 clamp(26px, 7.4vw, 40px)/1 var(--m-display); letter-spacing: -.01em; }
.so .mh-story { margin: 10px 0 0; max-width: 26em; font: 400 14.5px/1.45 var(--m-body); color: var(--m-ink); opacity: .9; }
.so .mh:is(.is-scene, .is-still) .mh-story { opacity: 0; will-change: transform, opacity; }
.so .m-ring-times .mh-read { color: rgb(var(--m-lamp)); }
.so .m-ring-times .mh-end { margin-top: 14px; }

/* ---- the families: Frame Bodoni with italic accents, hairlines; Kinetic Archivo condensed caps, hard; Night Shift Geist, glowing ---- */
[data-family="frame"] .so :is(.mh-num, .mh-said blockquote, .mh-day b, .mh-total b) { font-style: italic; }
[data-family="frame"] .so .mh-what { font-weight: 400; }
[data-family="frame"] .so .mh-ul { height: 1px; }
[data-family="frame"] .so :is(.mh-read, .mh-count, .mh-dn, .mh-hr) { letter-spacing: .16em; font-weight: 500; }
[data-family="frame"] .so .mh-quote { font: italic 400 15px/1.4 var(--m-display); letter-spacing: 0; }
[data-family="frame"] .so .mh-no { font: italic 400 15px/1 var(--m-display); letter-spacing: 0; }
[data-family="kinetic"] .so :is(.mh-num, .mh-what, .mh-said blockquote, .mh-day b, .mh-total b) { font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; letter-spacing: -.01em; }
[data-family="kinetic"] .so .mh-num { font-size: clamp(46px, 13.4vw, 84px); line-height: .9; color: var(--m-ink); }
[data-family="kinetic"] .so .mh-what { font-size: clamp(27px, 7.6vw, 46px); line-height: .95; }
[data-family="kinetic"] .so .mh-row { padding: 11px 52px 9px 0; }
[data-family="kinetic"] .so .mh-said blockquote { font-size: clamp(27px, 7.8vw, 46px); line-height: .94; max-width: 11em; }
[data-family="kinetic"] .so .mh-ul { height: 5px; bottom: -.1em; }
[data-family="kinetic"] .so :is(.mh-read, .mh-count, .mh-no, .mh-dn, .mh-hr) { font-weight: 800; font-variation-settings: "wdth" 88; }
[data-family="kinetic"] .so .mh-quote { font-weight: 700; font-variation-settings: "wdth" 88; font-size: 12px; }
[data-family="kinetic"] .so .mh-day b { color: rgb(var(--m-lamp)); font-size: clamp(34px, 10vw, 52px); }
[data-family="kinetic"] .so .mh-total b { color: rgb(var(--m-lamp)); font-size: clamp(50px, 14vw, 76px); line-height: .86; }
[data-family="night-shift"] .so :is(.mh-num, .mh-day b, .mh-total b) { font-weight: 300; letter-spacing: -.03em; }
[data-family="night-shift"] .so .mh-lit, [data-family="night-shift"] .so .mh-total b { text-shadow: 0 0 26px rgba(var(--m-lamp), .55); }
[data-family="night-shift"] .so :is(.mh-what, .mh-said blockquote) { font-weight: 500; letter-spacing: -.025em; }
[data-family="night-shift"] .so .mh-ul { box-shadow: 0 0 12px rgba(var(--m-lamp), .8); height: 1.5px; }
[data-family="night-shift"] .so .mh-dn.on { text-shadow: 0 0 10px rgba(var(--m-lamp), .7); }

/* The finish (moments-v2): the big call, the last word, the lit map's end. Without the script each reads as its words and its call. */
/* ---------- the big call ---------- */
.so .m-big-call .bc-film { display: none; }
.so .m-big-call .bc-num { margin: 0; padding: 0 var(--m-pad) 18px; font: 400 clamp(54px, 17vw, 120px)/.9 var(--m-display); letter-spacing: -.02em; }
.so .m-big-call .bc-num a { color: inherit; text-decoration: none; }
.so .m-big-call .bc-beats { margin: 0; padding: 0 var(--m-pad) 10px; list-style: none; }
.so .m-big-call .bc-beat { margin: 0 0 14px; }
.so .m-big-call .bc-beat .k { display: block; margin-bottom: 4px; font: 600 11px/1.3 var(--m-label); letter-spacing: .16em; text-transform: uppercase; color: var(--m-muted); }
.so .m-big-call .bc-beat .l { display: block; font: 400 22px/1.15 var(--m-display); }
.so .m-big-call .bc-foot { padding: 6px var(--m-pad) 40px; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
.so .m-big-call .bc-read { margin: 0; font: 600 11px/1.4 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: var(--m-muted); }
.so .m-big-call .bc-note { display: none; }
/* live (the engine marks the scene before this file arrives, so the layout never moves when it does): the film under a plane with their number cut through it */
.so .m-big-call:is(.is-scene, .is-still) .m-pin { height: 100vh; height: 100svh; overflow: hidden; }
.so .m-big-call:is(.is-scene, .is-still) .bc-film { display: block; position: absolute; inset: 0; z-index: 0; background: #000; }
.so .m-big-call:is(.is-scene, .is-still) .bc-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.so .m-big-call:is(.is-scene, .is-still) .m-stage { position: absolute; inset: 0; z-index: 1; background: var(--m-bg); }
.so .m-big-call.is-on .m-stage { background: none; }
.so .m-big-call .bc-cv { transform-origin: 0 0; will-change: transform; }
.so .m-big-call:is(.is-scene, .is-still) .bc-num { visibility: hidden; position: absolute; }
.so .m-big-call:is(.is-scene, .is-still) .bc-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .78)); }
.so .m-big-call:is(.is-scene, .is-still) .bc-beats { position: absolute; z-index: 3; left: var(--m-pad); right: var(--m-pad); bottom: calc(var(--m-dock) + 58px + env(safe-area-inset-bottom, 0px)); padding: 0; pointer-events: none; }
.so .m-big-call:is(.is-scene, .is-still) .bc-beat { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; visibility: hidden; }
.so .m-big-call:is(.is-scene, .is-still) .bc-beat .k { color: rgba(255, 255, 255, .82); margin-bottom: 12px; }
.so .m-big-call:is(.is-scene, .is-still) .bc-beat .l { color: #fff; font-size: clamp(36px, 10.6vw, 76px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.so .m-big-call:is(.is-scene, .is-still) .bc-beat .l > span { display: inline-block; will-change: transform, opacity; }
.so .m-big-call:is(.is-scene, .is-still) .bc-foot { position: absolute; z-index: 3; left: var(--m-pad); right: var(--m-pad); bottom: calc(var(--m-dock) + 14px + env(safe-area-inset-bottom, 0px)); padding: 0; gap: 16px; }
.so .m-big-call.is-scene .bc-call { opacity: 0; will-change: transform, opacity; }
.so .m-big-call:is(.is-scene, .is-still) .bc-note { display: block; position: absolute; z-index: 3; top: max(76px, 9svh); left: var(--m-pad); margin: 0; opacity: 0; font: 600 10px/1 var(--m-label); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .88); background: rgba(0, 0, 0, .5); padding: 6px 9px; border-radius: 99px; }
.so .m-big-call.is-scene .m-head, .so .m-big-call.is-scene .bc-read { will-change: transform, opacity; }
[data-family="kinetic"] .so .m-big-call .bc-beat .l { font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; line-height: .9; }
[data-family="kinetic"] .so .m-big-call:is(.is-scene, .is-still) .bc-beat .l { font-size: clamp(46px, 14vw, 96px); line-height: .88; letter-spacing: -.005em; }
[data-family="kinetic"] .so .m-big-call .bc-read { font-weight: 800; font-variation-settings: "wdth" 88; letter-spacing: .06em; color: var(--m-ink); }
[data-family="frame"] .so .m-big-call .bc-beat .l { font-style: italic; }
[data-family="frame"] .so .m-big-call .bc-read { letter-spacing: .22em; font-weight: 500; }
[data-family="night-shift"] .so .m-big-call .bc-read { font-weight: 500; letter-spacing: .1em; }
[data-family="night-shift"] .so .m-big-call .bc-beat .l { font-weight: 600; letter-spacing: -.035em; }
/* the readout's text changes with the scene: it keeps two lines' room, so the call above it never moves */
.so .m-big-call:is(.is-scene, .is-still) .bc-read { min-height: 2.8em; display: flex; align-items: flex-end; }
/* ---------- the last word ---------- */
.so .m-last-word .lw-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.so .m-last-word .lw-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.so .m-last-word .lw-photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.so .m-last-word .lw-said { padding: 18px var(--m-pad) 40px; }
.so .m-last-word .lw-kick { margin: 0 0 14px; }
.so .m-last-word .lw-quote { margin: 0; max-width: 17em; font: 400 clamp(26px, 7.4vw, 44px)/1.12 var(--m-display); letter-spacing: -.01em; text-wrap: balance; }
.so .m-last-word .lw-quote > span { display: inline-block; }
.so .m-last-word .lw-line { position: relative; height: 12px; margin: 18px 0 10px; }
.so .m-last-word .lw-rule { position: absolute; left: 0; right: 30%; top: 5px; height: 1px; background: rgb(var(--m-lamp)); transform-origin: 0 50%; }
.so .m-last-word .lw-rule::after { content: ""; position: absolute; right: -4px; top: -3.5px; width: 8px; height: 8px; background: rgb(var(--m-lamp)); }
.so .m-last-word .lw-read { margin: 0 0 16px; min-height: 2.8em; font: 600 11px/1.4 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: var(--m-muted); }
.so .m-last-word:is(.is-scene, .is-still) .m-pin { height: 100vh; height: 100svh; overflow: hidden; }
.so .m-last-word:is(.is-scene, .is-still) .lw-photo { position: absolute; inset: 0; aspect-ratio: auto; z-index: 0; }
.so .m-last-word:is(.is-scene, .is-still) .lw-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 40%, rgb(from var(--m-bg) r g b / .82) 62%, var(--m-bg) 92%); }
.so .m-last-word:is(.is-scene, .is-still) .lw-said { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(var(--m-dock) + 14px + env(safe-area-inset-bottom, 0px)); padding: 0 var(--m-pad); }
.so .m-last-word.is-scene .lw-quote > span { opacity: 0; will-change: transform, opacity; }
.so .m-last-word.is-scene .lw-kick { opacity: 0; will-change: transform, opacity; }
.so .m-last-word.is-scene .lw-rule { transform: scaleX(0); will-change: transform; }
.so .m-last-word.is-scene .lw-call { opacity: 0; will-change: transform, opacity; }
[data-family="frame"] .so .m-last-word:is(.is-scene, .is-still) .lw-photo { inset: max(64px, 7.5svh) 11vw auto; height: 43svh; border-radius: 999px 999px 0 0; }
[data-family="frame"] .so .m-last-word .lw-photo::after { display: none; }
[data-family="frame"] .so .m-last-word .lw-quote { font-style: italic; }
[data-family="frame"] .so .m-last-word .lw-rule::after { border-radius: 50%; }
[data-family="frame"] .so .m-last-word .lw-read { letter-spacing: .22em; font-weight: 500; }
[data-family="kinetic"] .so .m-last-word .lw-quote { font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; line-height: .94; font-size: clamp(34px, 10vw, 62px); letter-spacing: -.005em; }
[data-family="kinetic"] .so .m-last-word .lw-rule { height: 4px; top: 4px; background: var(--m-brand); }
[data-family="kinetic"] .so .m-last-word .lw-rule::after { display: none; }
[data-family="kinetic"] .so .m-last-word .lw-read { font-weight: 800; font-variation-settings: "wdth" 88; letter-spacing: .06em; color: var(--m-ink); }
[data-family="night-shift"] .so .m-last-word .lw-quote { font-weight: 500; letter-spacing: -.03em; }
[data-family="night-shift"] .so .m-last-word .lw-rule { background: rgb(var(--m-core)); box-shadow: 0 0 10px rgba(var(--m-lamp), .8); }
[data-family="night-shift"] .so .m-last-word .lw-rule::after { width: 5px; height: 5px; top: -2px; right: -2px; background: rgb(var(--m-core)); box-shadow: 0 0 8px rgba(var(--m-lamp), .9); }
[data-family="night-shift"] .so .m-last-word .lw-read { font-weight: 500; letter-spacing: .1em; }
/* ---------- the lit map's end ---------- */
.so .m-lit-end .le-foot { padding: 6px var(--m-pad) 40px; }
.so .m-lit-end .le-read { margin: 0 0 10px; min-height: 2.8em; font: 600 11px/1.4 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: var(--m-muted); }
.so .m-lit-end .le-num { margin: 0 0 16px; white-space: nowrap; font: 400 12.4vw/1 var(--m-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.so .m-lit-end .le-num > span, .so .m-lit-end .le-num > i { display: inline-block; font-style: normal; }
.so .m-lit-end .m-town em { display: none; }
.so .m-lit-end .m-town { text-shadow: 0 0 3px var(--m-bg), 0 0 8px var(--m-bg), 0 0 14px var(--m-bg); }
.so .m-lit-end:is(.is-scene, .is-still) .m-pin { height: 100vh; height: 100svh; overflow: hidden; }
.so .m-lit-end:is(.is-scene, .is-still) .le-list { display: none; }
.so .m-lit-end:is(.is-scene, .is-still) .le-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(var(--m-dock) + 14px + env(safe-area-inset-bottom, 0px)); padding: 0 var(--m-pad); }
.so .m-lit-end.is-scene .le-num > span { opacity: 0; will-change: transform, opacity; }
.so .m-lit-end.is-scene .le-call { opacity: 0; will-change: transform, opacity; }
[data-family="kinetic"] .so .m-lit-end .le-num { font-weight: 900; font-variation-settings: "wdth" 70; font-size: 16vw; line-height: .9; color: rgb(var(--m-lamp)); }
[data-family="kinetic"] .so .m-lit-end .le-read { font-weight: 800; font-variation-settings: "wdth" 88; letter-spacing: .06em; color: var(--m-ink); }
[data-family="frame"] .so .m-lit-end .le-num { font-style: italic; font-size: 12.6vw; }
[data-family="frame"] .so .m-lit-end .le-read { letter-spacing: .22em; font-weight: 500; }
[data-family="night-shift"] .so .m-lit-end .le-num { font-weight: 300; text-shadow: 0 0 26px rgba(var(--m-lamp), .5); color: rgb(var(--m-core)); }
[data-family="night-shift"] .so .m-lit-end .le-read { font-weight: 500; letter-spacing: .1em; }


/* people-work-proof/assets/moments.css (moments-v2), scoped to .sp */
/* People, the work and proof: the shared moments dressed by the family's --m-* tokens (Frame calm and elegant, Kinetic bold and
   punchy, Night Shift dark and glowing). A scene is --len screens tall with its stage pinned; without script each one is its photo and
   its written readout. Three planes in every scene: light (canvas, pre-rendered falloff), line (hairlines), readout (the family's label face). */
.sp .m { --m-pad: clamp(20px, 5.4vw, 48px); --m-dock: 96px; --m-top: max(70px, 8.5svh); position: relative; margin: 0; color: var(--m-ink); font-family: var(--m-body); background: var(--m-bg); -webkit-font-smoothing: antialiased; }
.sp .m-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sp .m.is-scene { height: calc(var(--len) * 100vh); height: calc(var(--len) * 100svh); }
.sp .m.is-scene > .m-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.sp .m-pin { position: relative; }
.sp .m-stage { position: relative; }
.sp .m.is-scene .m-stage { position: absolute; inset: 0; }
.sp .m-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.sp .m-stage > :not(.m-cv):not(.m-leadsvg) { position: relative; z-index: 1; }
.sp .m-eyebrow { margin: 0; font: 600 11px/1.25 var(--m-label); letter-spacing: .18em; text-transform: uppercase; color: var(--m-muted); }
.sp .m-title { margin: 10px 0 0; font: 400 clamp(30px, 8.6vw, 60px)/1.04 var(--m-display); letter-spacing: -.015em; text-wrap: balance; }
/* a word on its own: it rises out of its own slot */
.sp .m-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .16em .16em; margin: -.06em -.16em -.16em; }
.sp .m-w > span { display: inline-block; will-change: transform; }
/* the readout: each line's rule draws, then its words set along it */
.sp .m-read { list-style: none; margin: 14px 0 0; padding: 0; font: 600 11.5px/1.35 var(--m-label); letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.sp .m-read li { position: relative; padding: 9px 0 7px; opacity: var(--k, 1); transform: translate3d(0, calc((1 - var(--k, 1)) * 6px), 0); }
.sp .m-read li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--m-line); transform-origin: 0 50%; transform: scaleX(var(--k, 1)); }
.sp .m-read b { font-weight: 600; color: rgb(var(--m-lamp)); }
.sp .m-read em { font-style: normal; color: var(--m-muted); }

/* ---- people: the photo and its light ---- */
.sp .m-photo { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--m-bg); }
.sp .m.is-scene .m-photo { position: absolute; inset: 0; aspect-ratio: auto; }
.sp .m-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.sp .m-photo > img.is-drawn, .sp .m-photo > img[hidden] { visibility: hidden; }
.sp .m-reticle { position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: var(--k, 0); }
.sp .m-reticle i { position: absolute; width: 16px; height: 16px; border: 0 solid rgb(var(--m-lamp)); --o: calc(34px + (1 - var(--k, 0)) * 26px); }
.sp .m-reticle i:nth-child(1) { left: calc(-1 * var(--o)); top: calc(-1 * var(--o)); border-width: 1.5px 0 0 1.5px; }
.sp .m-reticle i:nth-child(2) { right: calc(-1 * var(--o)); top: calc(-1 * var(--o)); border-width: 1.5px 1.5px 0 0; }
.sp .m-reticle i:nth-child(3) { left: calc(-1 * var(--o)); bottom: calc(-1 * var(--o)); border-width: 0 0 1.5px 1.5px; }
.sp .m-reticle i:nth-child(4) { right: calc(-1 * var(--o)); bottom: calc(-1 * var(--o)); border-width: 0 1.5px 1.5px 0; }
.sp .m-reticle span { position: absolute; left: calc(var(--o, 34px) + 44px); top: -6px; white-space: nowrap; font: 600 10.5px/1 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: var(--m-ink); text-shadow: 0 0 6px var(--m-bg); }
.sp .m-reticle span::before { content: ""; position: absolute; right: calc(100% + 6px); top: 50%; width: 34px; height: 1px; background: rgb(var(--m-lamp)); transform-origin: 100% 50%; transform: scaleX(var(--k, 0)); }
.sp .m-who, .sp .m-copy { position: relative; z-index: 3; padding: 22px var(--m-pad) 30px; }
.sp .m.is-scene :is(.m-who, .m-copy) { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: calc(var(--m-dock) + 6px + env(safe-area-inset-bottom, 0px)); }
.sp .m-name { margin: 8px 0 0; font: 400 clamp(64px, 19vw, 132px)/.9 var(--m-display); letter-spacing: -.025em; }
.sp .m-top { position: absolute; z-index: 3; left: var(--m-pad); right: var(--m-pad); top: var(--m-top); }
.sp :is(.m-who, .m-copy) > .m-eyebrow { margin-bottom: 4px; color: var(--m-ink); }
.sp .m-arch { display: none; }
/* the sentence */
.sp .m-said { margin: 12px 0 0; font: 400 clamp(30px, 8.8vw, 62px)/1.08 var(--m-display); letter-spacing: -.02em; text-wrap: pretty; }
.sp .m-said .m-w.is-key > span { color: rgb(var(--m-lamp)); transition: color .5s var(--m-ease); }
.sp .m-track { display: block; margin-top: 16px; background: var(--m-line); }
.sp .m-rule { display: block; height: 1px; background: rgb(var(--m-lamp)); transform-origin: 0 50%; }
.sp .m:not(.is-on) .m-rule { transform: none !important; }
/* by name: their name, the quote, the field of their reviews, the tally */
.sp .m-byname .m-stage { display: grid; grid-template-rows: auto auto 1fr auto; padding: var(--m-top) var(--m-pad) calc(var(--m-dock) + env(safe-area-inset-bottom, 0px)); }
.sp .m-byname:not(.is-scene) .m-stage { min-height: 100svh; }
.sp .m-byname .m-name { font-size: clamp(60px, 17vw, 120px); margin: 6px 0 0; }
.sp .m-byname .m-sub { margin: 10px 0 0; font: 600 11px/1.3 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: var(--m-muted); }
.sp .m-quotes { position: relative; min-height: 158px; margin-top: 22px; }
.sp .m-quote { margin: 0; }
.sp .m.is-on .m-quote { position: absolute; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden; }
.sp .m:not(.is-on) .m-quote + .m-quote { margin-top: 18px; }
.sp .m-q { display: block; font: 400 clamp(25px, 7.2vw, 46px)/1.1 var(--m-display); letter-spacing: -.015em; text-wrap: balance; }
.sp .m-quote cite { display: block; margin-top: 12px; font: 600 10.5px/1.2 var(--m-label); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--m-muted); }
.sp .m-field { position: relative; min-height: 150px; margin: 14px 0 6px; }
.sp .m-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sp .m-end { margin: 0; font: 600 10px/1.6 var(--m-label); letter-spacing: .12em; text-transform: uppercase; color: var(--m-muted); opacity: var(--k, 1); transform: translate3d(0, calc((1 - var(--k, 1)) * 8px), 0); white-space: nowrap; }
.sp .m-end b { color: var(--m-ink); font-weight: 600; }
.sp .m-tally { margin: 0; display: flex; align-items: baseline; gap: 6px; font: 600 10.5px/1 var(--m-label); letter-spacing: .12em; text-transform: uppercase; color: var(--m-muted); white-space: nowrap; }
.sp .m-tally b { position: relative; display: inline-block; font: 400 60px/.8 var(--m-display); letter-spacing: -.02em; color: var(--m-ink); font-variant-numeric: tabular-nums; }
.sp .m-tally .m-ghost { color: rgba(var(--m-ash), .26); text-shadow: none; }
.sp .m-tally > span { font-size: 13px; letter-spacing: .04em; }
.sp .m-leadsvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sp .m-lead { fill: none; stroke: rgb(var(--m-lamp)); stroke-width: 1; opacity: 0; }
.sp .m-byname.is-full .m-tally b { color: rgb(var(--m-lamp)); }

/* ---- the work ---- */
.sp .m-pair { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--m-bg); }
.sp .m.is-scene .m-pair { position: absolute; inset: 0; aspect-ratio: auto; will-change: transform; }
.sp .m-before, .sp .m-after, .sp .m-after > div { position: absolute; inset: 0; overflow: hidden; }
.sp .m-pair img, .sp .m-shot img, .sp .m-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sp .m-before img { transform-origin: 50% 60%; will-change: transform; }
.sp .m:not(.is-on) .m-pair .m-before { display: none; }
.sp .m.is-on .m-after, .sp .m.is-on .m-after > div { will-change: transform; }
.sp .m-wipe .m-pin::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent 24%, transparent 52%, rgba(0, 0, 0, .78)); }
.sp .m-edge { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--m-brand); opacity: 0; will-change: transform, opacity; pointer-events: none; }
.sp .m-leak { position: absolute; top: 0; bottom: 0; left: 1px; width: 16vw; background: linear-gradient(90deg, color-mix(in srgb, var(--m-brand) 18%, transparent), transparent); mix-blend-mode: screen; }
.sp .m-edge-tag { position: absolute; left: 50%; top: 46%; }
.sp .m-edge-tag em { position: absolute; top: 0; transform: translateY(-50%); white-space: nowrap; padding: 7px 9px; font: 600 10.5px/1 var(--m-label); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: #fff; background: rgba(0, 0, 0, .5); }
.sp .m-edge-tag em:first-child { right: 7px; }
.sp .m-edge-tag em + em { left: 7px; }
.sp .m-wipe .m-head, .sp .m-drag .m-head { position: absolute; z-index: 4; left: var(--m-pad); right: var(--m-pad); top: var(--m-top); display: flex; justify-content: space-between; align-items: center; color: #fff; }
.sp .m-wipe .m-head .m-eyebrow { color: rgba(255, 255, 255, .86); }
.sp .m-state { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 10.5px/1 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.sp .m-state i { font-style: normal; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.sp .m:not(.is-on) .m-state { display: none; }
.sp .m-caps { position: relative; z-index: 4; }
.sp .m.is-scene .m-caps { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--m-pad) calc(var(--m-dock) + 4px + env(safe-area-inset-bottom, 0px)); }
.sp .m-wipe.is-on .m-cap { position: absolute; left: var(--m-pad); right: var(--m-pad); bottom: calc(var(--m-dock) + 4px + env(safe-area-inset-bottom, 0px)); opacity: 0; }
.sp .m-wipe:not(.is-on) .m-cap { padding: 14px var(--m-pad) 22px; }
.sp .m-cap { margin: 0; color: #fff; }
.sp .m-cap-t { display: block; font: 400 clamp(30px, 8.6vw, 58px)/1.02 var(--m-display); letter-spacing: -.015em; }
.sp .m-cap .m-read { margin-top: 10px; color: rgba(255, 255, 255, .86); }
.sp .m-cap .m-read li::before { background: rgba(255, 255, 255, .3); }
/* held after */
.sp .m-shot { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.sp .m.is-scene .m-shot { position: absolute; left: 0; right: 0; top: 0; height: 60svh; aspect-ratio: auto; }
.sp .m-shot img { transform-origin: 50% 55%; will-change: transform; }
.sp .m-veil { position: absolute; inset: -50%; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 38%, var(--m-bg) 100%); will-change: transform, opacity; }
.sp .m-crop { position: absolute; width: 24px; height: 24px; border: 0 solid rgb(var(--m-lamp)); pointer-events: none; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .55)); }
.sp .m-crop.tl { left: 14px; top: 14px; border-width: 2px 0 0 2px; }
.sp .m-crop.tr { right: 14px; top: 14px; border-width: 2px 2px 0 0; }
.sp .m-crop.bl { left: 14px; bottom: 14px; border-width: 0 0 2px 2px; }
.sp .m-crop.br { right: 14px; bottom: 14px; border-width: 0 2px 2px 0; }
.sp .m-sheet { position: relative; z-index: 2; padding: 22px var(--m-pad) 30px; }
.sp .m.is-scene .m-sheet { position: absolute; left: 0; right: 0; top: 60svh; bottom: 0; padding-top: 20px; padding-bottom: calc(var(--m-dock) + env(safe-area-inset-bottom, 0px)); }
.sp .m-held .m-title { font-size: clamp(30px, 8.4vw, 56px); }
.sp .m-print { float: right; width: 74px; height: 46px; object-fit: cover; margin: -2px 0 0 12px; outline: 1px solid var(--m-line); }
/* drag */
.sp .m-frame { position: relative; overflow: hidden; aspect-ratio: 3 / 4; touch-action: pan-y; cursor: ew-resize; background: var(--m-bg); }
.sp .m-frame img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.sp .m.is-scene .m-frame { position: absolute; left: var(--m-pad); right: var(--m-pad); top: calc(var(--m-top) + 34px); height: 54svh; aspect-ratio: auto; }
.sp .m-a, .sp .m-a > div { position: absolute; inset: 0; overflow: hidden; }
.sp .m:not(.is-on) .m-a { display: none; }
.sp .m-divider { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 0; will-change: transform; pointer-events: none; }
.sp .m-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--m-brand); }
.sp .m-divider::after { content: ""; position: absolute; top: 0; bottom: 0; left: 1px; width: 26vw; background: linear-gradient(90deg, color-mix(in srgb, var(--m-brand) 14%, transparent), transparent); mix-blend-mode: screen; }
.sp .m-grip { position: absolute; z-index: 1; left: -22px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: var(--m-bg); box-shadow: inset 0 0 0 1.5px var(--m-brand); display: grid; place-items: center; color: var(--m-brand); font: 600 15px/1 var(--m-label); letter-spacing: -.1em; }
.sp .m-tag { position: absolute; z-index: 4; top: calc(var(--m-top) + 34px + 12px); margin: 0; padding: .55em .8em; font: 600 10.5px/1 var(--m-label); letter-spacing: .16em; text-transform: uppercase; color: var(--m-ink); background: var(--m-bg); }
.sp .m-tag.is-before { left: calc(var(--m-pad) + 12px); }
.sp .m-tag.is-after { right: calc(var(--m-pad) + 12px); }
.sp .m:not(.is-on) .m-tag, .sp .m:not(.is-on) .m-hint { display: none; }
.sp .m-drag .m-head { color: var(--m-ink); }
.sp .m-drag .m-cap { position: relative; z-index: 3; padding: 18px var(--m-pad) 26px; color: var(--m-ink); }
.sp .m.is-scene.m-drag .m-cap { position: absolute; left: 0; right: 0; top: calc(var(--m-top) + 34px + 54svh + 6px); padding-top: 14px; }
.sp .m-drag .m-cap-t { font-size: clamp(28px, 8vw, 52px); }
.sp .m-drag .m-cap .m-read { color: var(--m-muted); }
.sp .m-drag .m-cap .m-read li::before { background: var(--m-line); }
.sp .m-hint { position: absolute; z-index: 4; left: 50%; top: calc(var(--m-top) + 34px + 54svh - 40px); transform: translateX(-50%); margin: 0; font: 600 10px/1 var(--m-label); letter-spacing: .2em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; }

/* ---- proof ---- */
.sp .m-numbers .m-stage, .sp .m-licence .m-stage { padding: var(--m-top) var(--m-pad) calc(var(--m-dock) + env(safe-area-inset-bottom, 0px)); }
.sp .m-numbers .m-stage { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0; }
.sp .m-numbers header { margin-bottom: 10px; }
.sp :is(.m-numbers, .m-licence):not(.is-scene) .m-stage { min-height: 100svh; }
.sp .m-fig { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 14px; }
.sp .m-figure { position: relative; display: inline-block; font: 400 clamp(80px, 25vw, 180px)/.86 var(--m-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp .m-fig.is-mid .m-figure { font-size: clamp(54px, 15vw, 110px); }
.sp .m-ghost { color: rgba(var(--m-ash), .3); }
/* the window is half an em larger than the figure on every side, so a family's glow is never cut into a box */
.sp .m-mask { position: absolute; inset: -.5em; overflow: hidden; transform: translate3d(0, calc((1 - var(--k, 1)) * 100%), 0); }
.sp .m-mask > span { display: block; padding: .5em; transform: translate3d(0, calc((var(--k, 1) - 1) * 100%), 0); }
.sp .m-mask::before { content: ""; position: absolute; z-index: 1; left: .4em; right: .4em; top: 0; height: 2px; background: rgb(var(--m-lamp)); box-shadow: 0 0 14px rgba(var(--m-lamp), .7); --e: calc(var(--k, 1) * (1 - var(--k, 1)) * 4); opacity: calc(var(--e) * var(--e) * var(--e)); }
.sp .m-lab { margin: 0 0 .45em; font: 600 11px/1.35 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: var(--m-ink); opacity: var(--k, 1); }
.sp .m-lab span { display: block; color: var(--m-muted); font-weight: 500; }
.sp .m-numbers .m-lab { opacity: calc(.4 + .6 * var(--k, 1)); }
.sp .m-numbers .m-fig + .m-fig { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--m-line); }
.sp .m-numbers .m-field { margin: 10px 0 0; min-height: 0; height: 100%; }
.sp .m-numbers .m-revs { grid-template-rows: auto 1fr; }
.sp .m-numbers .m-revs .m-field { grid-column: 1 / -1; }
.sp .m-line { grid-column: 1 / -1; height: 20px; margin-top: 12px; }
.sp .m-numbers .m-revs { display: grid; align-content: start; }
/* quotes: one review at a time, its words large enough to read on a phone, who said it under them */
.sp .m-saying .m-stage { display: grid; grid-template-rows: auto 1fr auto; padding: var(--m-top) var(--m-pad) calc(var(--m-dock) + env(safe-area-inset-bottom, 0px)); }
.sp .m-saying:not(.is-scene) .m-stage { min-height: 100svh; }
.sp .m-saying .m-quotes { min-height: 0; margin: 18px 0; }
.sp .m-saying.is-on .m-quote { top: 50%; translate: 0 -50%; }
.sp .m-saying .m-q { font-size: clamp(24px, 6.4vw, 40px); line-height: 1.18; text-wrap: pretty; }
.sp .m-saying .m-q::before { content: "\201C"; display: block; height: .5em; font-size: 2.4em; line-height: 1; color: rgb(var(--m-lamp)); opacity: var(--q, 1); }
.sp .m-saying cite { margin-top: 20px; opacity: var(--k, 1); }
.sp .m-saying cite b { display: block; font: 400 clamp(22px, 6vw, 34px)/1.1 var(--m-display); letter-spacing: -.01em; text-transform: none; color: var(--m-ink); }
.sp .m-saying cite span { display: block; margin-top: 8px; }
.sp .m-saying cite i { font-style: normal; color: rgb(var(--m-lamp)); }
.sp .m-of { margin: 0; font: 600 10.5px/1 var(--m-label); letter-spacing: .14em; color: var(--m-muted); }
.sp .m-of b { color: var(--m-ink); font-weight: 600; }
.sp .m:not(.is-on) .m-of { display: none; }
.sp .m-sub { margin: 8px 0 0; font: 600 11px/1.35 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: var(--m-ink); }
.sp .m-sub em { font-style: normal; color: var(--m-muted); }
/* licence */
.sp .m-licence .m-stage { display: flex; flex-direction: column; }
.sp .m-licence .m-title { font-size: clamp(30px, 8.4vw, 58px); }
.sp .m-plate { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: auto; padding-top: 18px; }
.sp .m-badge { margin: 0; width: 34vw; max-width: 190px; }
.sp .m-badge img { display: block; width: 100%; height: auto; }
.sp .m-plate .m-lab { margin: 58px 0 0; }
.sp .m-num { margin: 8px 0 0; display: flex; justify-content: center; font: 500 clamp(44px, 13.5vw, 88px)/1 var(--m-label); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sp .m-digit { display: inline-block; color: rgba(var(--m-ash), .32); transition: color .45s var(--m-ease), text-shadow .45s var(--m-ease); }
.sp .m-digit.is-on, .sp .m:not(.is-on) .m-digit { color: var(--m-ink); }
.sp .m-reg { margin: 26px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 11px/1.35 var(--m-label); letter-spacing: .14em; text-transform: uppercase; opacity: var(--k, 1); }
.sp .m-tick { flex: none; width: 22px; height: 22px; }
.sp .m-tick path { fill: none; stroke: rgb(var(--m-lamp)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sp .m-check { display: block; margin: 6px auto 0; padding: 12px 0; text-align: center; font: 600 11.5px/1 var(--m-label); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--m-lamp)); text-decoration: none; opacity: var(--k, 1); }
.sp .m-licence .m-read { margin-top: auto; }

/* ================= the families ================= */
/* Frame: forest and ivory, Bodoni with italic accents, hairlines, an arch round the face, round dots, a slower tempo */
[data-family="frame"] .sp .m-eyebrow { letter-spacing: .26em; color: rgb(var(--m-lamp)); font-weight: 500; }
[data-family="frame"] .sp :is(.m-name, .m-title em, .m-cap-t, .m-q, .m-figure, .m-tally b) { font-style: italic; }
[data-family="frame"] .sp .m-read { font-weight: 500; letter-spacing: .18em; }
[data-family="frame"] .sp .m-spot .m-photo, [data-family="frame"] .sp .m-sent .m-photo { inset: calc(var(--m-top) + 22px) 12vw auto; height: 50svh; border-radius: 999px 999px 0 0; }
[data-family="frame"] .sp .m-sent .m-photo { height: 38svh; inset-inline: 20vw; }
[data-family="frame"] .sp .m-arch { display: block; position: absolute; z-index: 3; left: calc(12vw - 9px); width: calc(76vw + 18px); top: calc(var(--m-top) + 13px); height: calc(50svh + 9px); pointer-events: none; overflow: visible; }
[data-family="frame"] .sp .m-sent .m-arch { left: calc(20vw - 9px); width: calc(60vw + 18px); height: calc(38svh + 9px); }
[data-family="frame"] .sp .m-arch path { fill: none; stroke: rgb(var(--m-lamp)); stroke-width: 1; }
[data-family="frame"] .sp .m-spot .m-top, [data-family="frame"] .sp .m-sent .m-top { top: calc(var(--m-top) - 22px); text-align: center; }
[data-family="frame"] .sp :is(.m-who, .m-copy) { text-align: center; }
[data-family="frame"] .sp .m-who .m-read li::before, [data-family="frame"] .sp .m-copy .m-read li::before { transform-origin: 50% 50%; }
[data-family="frame"] .sp .m-spot .m-name { font-size: clamp(56px, 16vw, 110px); }
[data-family="frame"] .sp .m-said { font-style: italic; font-size: clamp(28px, 7.8vw, 54px); line-height: 1.12; }
[data-family="frame"] .sp .m-reticle i { border-radius: 50%; }
[data-family="frame"] .sp .m-reticle i:nth-child(n) { width: 64px; height: 64px; border-width: 1px; border-color: rgba(var(--m-lamp), .9); left: -32px; top: -32px; right: auto; bottom: auto; transform: scale(calc(1.5 - .5 * var(--k, 0))); }
[data-family="frame"] .sp .m-reticle i:nth-child(n+2) { display: none; }
[data-family="frame"] .sp .m-reticle span { display: none; }
[data-family="frame"] .sp .m-edge { width: 1.5px; margin-left: -.75px; }
[data-family="frame"] .sp .m-edge-tag em { padding: 0; background: none; font: italic 400 19px/1 var(--m-display); letter-spacing: 0; text-transform: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .75); }
[data-family="frame"] .sp .m-edge-tag em:first-child { right: 12px; } [data-family="frame"] .sp .m-edge-tag em + em { left: 12px; }
[data-family="frame"] .sp .m-state { font-weight: 500; }
[data-family="frame"] .sp .m-crop { border-color: rgb(var(--m-lamp)); }
[data-family="frame"] .sp .m-crop.tl { border-width: 1.5px 0 0 1.5px; } [data-family="frame"] .sp .m-crop.tr { border-width: 1.5px 1.5px 0 0; } [data-family="frame"] .sp .m-crop.bl { border-width: 0 0 1.5px 1.5px; } [data-family="frame"] .sp .m-crop.br { border-width: 0 1.5px 1.5px 0; }
[data-family="frame"] .sp .m-grip { box-shadow: inset 0 0 0 1px var(--m-brand); font-family: var(--m-display); font-style: italic; }
[data-family="frame"] .sp .m-tag { background: none; font: italic 400 18px/1 var(--m-display); letter-spacing: 0; text-transform: none; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
[data-family="frame"] .sp .m-divider::before { width: 1.5px; left: -.75px; }
[data-family="frame"] .sp .m-num { font-family: var(--m-display); font-style: italic; font-weight: 400; letter-spacing: .02em; }
[data-family="frame"] .sp .m-figure .m-ghost { color: rgba(var(--m-ash), .26); }

/* Kinetic: ink and paper, the client's colour as the light, condensed black capitals, hard square edges, a quicker tempo */
[data-family="kinetic"] .sp .m-top { right: auto; }
[data-family="kinetic"] .sp .m-eyebrow { display: inline-block; padding: .55em .95em; border: 2px solid currentColor; border-radius: 99px; color: var(--m-ink); font-weight: 800; letter-spacing: .08em; }
[data-family="kinetic"] .sp :is(.m-name, .m-title, .m-said, .m-q, .m-cap-t, .m-figure, .m-tally b) { font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; letter-spacing: -.01em; }
[data-family="kinetic"] .sp .m-name { font-size: clamp(88px, 27vw, 190px); line-height: .8; }
[data-family="kinetic"] .sp .m-said { font-size: clamp(34px, 10.4vw, 72px); line-height: .9; }
[data-family="kinetic"] .sp .m-q { font-size: clamp(30px, 9.2vw, 60px); line-height: .9; }
[data-family="kinetic"] .sp .m-cap-t { line-height: .88; font-size: clamp(36px, 10.6vw, 70px); }
[data-family="kinetic"] .sp .m-title { line-height: .88; font-size: clamp(36px, 10.6vw, 72px); }
[data-family="kinetic"] .sp .m-read { font-weight: 800; letter-spacing: .06em; font-variation-settings: "wdth" 86; font-size: 12.5px; }
[data-family="kinetic"] .sp .m-read li::before { height: 3px; background: rgb(var(--m-lamp)); }
[data-family="kinetic"] .sp .m-rule { height: 6px; }
[data-family="kinetic"] .sp .m-reticle i { border-color: rgb(var(--m-lamp)); border-width: 0; width: 22px; height: 22px; }
[data-family="kinetic"] .sp .m-reticle i:nth-child(1) { border-width: 5px 0 0 5px; } [data-family="kinetic"] .sp .m-reticle i:nth-child(2) { border-width: 5px 5px 0 0; }
[data-family="kinetic"] .sp .m-reticle i:nth-child(3) { border-width: 0 0 5px 5px; } [data-family="kinetic"] .sp .m-reticle i:nth-child(4) { border-width: 0 5px 5px 0; }
[data-family="kinetic"] .sp .m-reticle span { background: rgb(var(--m-lamp)); color: var(--m-bg); padding: 5px 7px; font-weight: 900; letter-spacing: .06em; text-shadow: none; top: -11px; }
[data-family="kinetic"] .sp .m-edge { width: 3px; margin-left: -1.5px; }
[data-family="kinetic"] .sp .m-edge-tag em { font-weight: 900; letter-spacing: .08em; background: var(--m-ink); color: var(--m-bg); }
[data-family="kinetic"] .sp .m-edge-tag em + em { background: var(--m-brand); }
[data-family="kinetic"] .sp .m-leak { display: none; }
[data-family="kinetic"] .sp .m-state { font-weight: 900; letter-spacing: .06em; }
[data-family="kinetic"] .sp .m-tally b { font-size: 84px; color: rgb(var(--m-lamp)); }
[data-family="kinetic"] .sp .m-figure { color: rgb(var(--m-lamp)); }
[data-family="kinetic"] .sp .m-figure .m-ghost { color: rgba(var(--m-ash), .2); }
[data-family="kinetic"] .sp .m-crop { border-color: rgb(var(--m-lamp)); border-width: 0; width: 28px; height: 28px; }
[data-family="kinetic"] .sp .m-crop.tl { border-width: 5px 0 0 5px; } [data-family="kinetic"] .sp .m-crop.tr { border-width: 5px 5px 0 0; }
[data-family="kinetic"] .sp .m-crop.bl { border-width: 0 0 5px 5px; } [data-family="kinetic"] .sp .m-crop.br { border-width: 0 5px 5px 0; }
[data-family="kinetic"] .sp .m-frame { border-radius: 6px; }
[data-family="kinetic"] .sp .m-divider::before { width: 3px; left: -1.5px; }
[data-family="kinetic"] .sp .m-divider::after { display: none; }
[data-family="kinetic"] .sp .m-grip { border-radius: 6px; background: var(--m-brand); color: var(--m-bg); box-shadow: none; font-weight: 900; }
[data-family="kinetic"] .sp .m-tag { background: var(--m-ink); color: var(--m-bg); font-weight: 900; letter-spacing: .08em; }
[data-family="kinetic"] .sp .m-num { font-weight: 900; font-variation-settings: "wdth" 70; font-family: var(--m-display); font-size: clamp(48px, 15vw, 96px); }
[data-family="kinetic"] .sp .m-digit.is-on { color: rgb(var(--m-lamp)); }
[data-family="kinetic"] .sp .m-check { font-weight: 900; }

/* Night Shift: night and tungsten, Geist and its mono, light that glows, small square dots */
[data-family="night-shift"] .sp :is(.m-name, .m-title, .m-said, .m-q, .m-cap-t) { font-weight: 600; letter-spacing: -.04em; }
[data-family="night-shift"] .sp .m-said { font-weight: 500; letter-spacing: -.03em; }
[data-family="night-shift"] .sp :is(.m-figure, .m-tally b) { font-weight: 300; }
[data-family="night-shift"] .sp .m-figure .m-mask { text-shadow: 0 0 28px rgba(var(--m-lamp), .55); color: rgb(var(--m-core)); }
[data-family="night-shift"] .sp .m-said .m-w.is-key > span { text-shadow: 0 0 22px rgba(var(--m-lamp), .55); }
[data-family="night-shift"] .sp .m-rule { box-shadow: 0 0 10px rgba(var(--m-lamp), .8); }
[data-family="night-shift"] .sp .m-reticle i { border-color: rgba(var(--m-lamp), .95); filter: drop-shadow(0 0 4px rgba(var(--m-lamp), .8)); }
[data-family="night-shift"] .sp .m-edge { box-shadow: 0 0 16px 1px color-mix(in srgb, var(--m-brand) 85%, transparent); }
[data-family="night-shift"] .sp .m-edge-tag em { background: rgba(6, 8, 13, .62); }
[data-family="night-shift"] .sp .m-edge-tag em + em { color: var(--m-brand); text-shadow: 0 0 10px color-mix(in srgb, var(--m-brand) 70%, transparent); }
[data-family="night-shift"] .sp .m-frame { border-radius: 14px; }
[data-family="night-shift"] .sp .m-divider::before { box-shadow: 0 0 16px 1px color-mix(in srgb, var(--m-brand) 80%, transparent); }
[data-family="night-shift"] .sp .m-grip { box-shadow: inset 0 0 0 1.5px var(--m-brand), 0 0 24px color-mix(in srgb, var(--m-brand) 55%, transparent); }
[data-family="night-shift"] .sp .m-digit.is-on { color: rgb(var(--m-core)); text-shadow: 0 0 18px rgba(var(--m-lamp), .7); }
[data-family="night-shift"] .sp .m-tally b { text-shadow: 0 0 22px rgba(var(--m-lamp), .45); }
[data-family="night-shift"] .sp .m-crop { border-color: rgba(var(--m-lamp), .9); }

@media (prefers-reduced-motion: reduce) { .sp .m *, .sp .m *::before, .sp .m *::after { transition: none !important; } }

/* Bodoni Moda's automatic optical size thins its hairlines to nothing at display sizes (an em dash and the A's bar vanish); the font shorthand resets it, hence every element */
[data-family="frame"] .sp, [data-family="frame"] .sp * { font-optical-sizing: none !important; }


/* areas/assets/moments.css (moments-v2), scoped to .sa */
/* The shared moments, areas copy: the scene frame, the four map scenes and the family rules they use. Dressed by the family's --m-* tokens:
   Frame calm and elegant, Kinetic bold and punchy, Night Shift dark and glowing. A scene is --len screens tall with its stage pinned to
   the screen; without script each one is a plain, readable section (its list of places, or its list of districts and dates). */
.sa .m { --m-pad: clamp(20px, 5.4vw, 48px); --m-dock: 96px; position: relative; margin: 0; color: var(--m-ink); font-family: var(--m-body); background: var(--m-bg); -webkit-font-smoothing: antialiased; }
.sa .m-sr, .sa .m.is-on .m-places { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sa .m.is-scene { height: calc(var(--len) * 100vh); height: calc(var(--len) * 100svh); }
.sa .m:is(.is-scene, .is-still) > .m-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
/* reduced motion: the scene's last frame, one screen tall and not pinned */
.sa .m.is-still > .m-pin { position: relative; }
.sa .m-pin { position: relative; }
.sa .m:is(.is-scene, .is-still) .m-stage { position: absolute; inset: 0; }
.sa .m-stage { position: relative; min-height: 200px; touch-action: pan-y; }
.sa .m:not(.is-on) .m-stage:empty { display: none; }
.sa .m-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 60%; will-change: transform; }

/* the words every scene opens with */
.sa .m-head { position: relative; z-index: 3; padding: 34px var(--m-pad) 18px; pointer-events: none; }
.sa .m:is(.is-scene, .is-still) .m-head { position: absolute; left: 0; right: 0; top: 0; padding-top: max(76px, 9svh); }
.sa .m-eyebrow { margin: 0; font: 600 11px/1.2 var(--m-label); letter-spacing: .18em; text-transform: uppercase; color: var(--m-muted); }
.sa .m-title { margin: 12px 0 0; max-width: 15em; font: 400 clamp(30px, 8.4vw, 64px)/1.04 var(--m-display); letter-spacing: -.015em; text-wrap: balance; }
.sa .m-title em { font-style: normal; color: var(--m-muted); }
.sa .m-places { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 8px var(--m-pad) 32px; list-style: none; font: 500 15px/1.3 var(--m-body); }
.sa .m-places small { margin-left: .5em; font: 500 12px/1 var(--m-label); letter-spacing: .06em; color: var(--m-muted); }

/* ---- the maps: labels sit at the top-left corner the placer gives them (clear of the edges, the words, the wires and each other) ---- */
.sa .m-labels { position: absolute; inset: 0; pointer-events: none; transform-origin: 50% 60%; will-change: transform; }
.sa .m-town { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 2px 0; font: 600 11.5px/1 var(--m-label); letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 0 3px var(--m-bg), 0 0 10px var(--m-bg); opacity: 0; transition: opacity .6s var(--m-ease); }
.sa .m-town.on { opacity: .96; }
.sa .m-town em { font-style: normal; font-weight: 500; margin-right: .6em; color: rgb(var(--m-lamp)); opacity: .9; font-variant-numeric: tabular-nums; }
.sa .m-town.is-base { font-size: 12.5px; }
.sa .m-town.m-pc { font-size: 12px; letter-spacing: .06em; }
.sa .m-town.m-pc em { margin: 0 0 0 .4em; }
/* a region lit as its districts carries the big label; their towns' labels go small under it */
.sa .m-labels .m-town.is-small { font-size: 10px; }
.sa .m-labels .m-town.is-small.is-base { font-size: 11px; }
.sa .m-labels .m-town.m-area { font-size: 13px; line-height: 1.2; letter-spacing: .14em; text-align: center; }
.sa .m-code { position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap; font: 600 9.5px/1 var(--m-label); letter-spacing: .04em;
  text-shadow: 0 0 3px var(--m-bg), 0 0 8px var(--m-bg); opacity: 0; transition: opacity .5s var(--m-ease); }
.sa .m-code.on { opacity: .9; }
.sa .m-state { position: absolute; z-index: 2; left: var(--m-pad); right: var(--m-pad); top: calc(var(--head, 28%) + 16px); margin: 0; display: flex; align-items: center; gap: 12px;
  font: 600 10.5px/1 var(--m-label); letter-spacing: .14em; text-transform: uppercase; }
.sa .m-state span { position: relative; display: inline-grid; padding-left: 16px; white-space: nowrap; }
.sa .m-state span::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--m-muted); opacity: .5; transition: background .5s, opacity .5s; }
.sa .m-state b { grid-area: 1 / 1; font-weight: 600; transition: opacity .35s; font-variant-numeric: tabular-nums; }
.sa .m-state b + b { opacity: 0; color: rgb(var(--m-lamp)); }
.sa .m.is-thrown .m-state b:first-child:not(:only-child) { opacity: 0; }
.sa .m.is-thrown .m-state b + b { opacity: 1; }
.sa .m:is(.is-thrown, .is-full) .m-state span::before, .sa .m-recent-map .m-state span::before { background: rgb(var(--m-lamp)); opacity: 1; }
.sa .m-state i { font-style: normal; font-weight: 500; color: var(--m-muted); white-space: nowrap; }
.sa .m-tally { position: absolute; z-index: 2; right: var(--m-pad); bottom: calc(var(--m-dock) + 18px + env(safe-area-inset-bottom, 0px)); margin: 0; display: flex; align-items: baseline; gap: 6px;
  font: 500 11px/1 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: var(--m-muted); }
.sa .m-tally b { font: 400 64px/.8 var(--m-display); letter-spacing: -.02em; color: var(--m-ink); font-variant-numeric: tabular-nums; }
.sa .m-tally span { font-size: 13px; letter-spacing: .04em; margin-right: 4px; }
.sa .m-tally em { font-style: normal; line-height: 1.25; }
/* a total that is true from the first frame: drawn dim, then filled by the scene (transforms only) */
.sa .m-fill b { position: relative; display: inline-block; overflow: hidden; padding: .06em 0; }
.sa .m-fill b span { font: inherit; letter-spacing: inherit; margin: 0; }
.sa .m-fill .m-dim { color: var(--m-ink); opacity: .3; }
.sa .m-fill .m-lit { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.sa .m-fill .m-lit > span { position: absolute; inset: .06em 0 auto 0; will-change: transform; }
/* the switch: a plate and a rocker, thrown as the power goes on (expo out, never a bounce) */
.sa .m-switch { position: absolute; z-index: 2; left: var(--m-pad); bottom: calc(var(--m-dock) + 14px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
.sa .m-switch::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--m-line); }
.sa .m-switch i { position: absolute; left: 50%; top: 50%; width: 14px; height: 24px; margin: -12px 0 0 -7px; border-radius: 4px; background: linear-gradient(#cfc7b8, #e9e2d4 55%, #f6f1e8);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35); transform: perspective(60px) rotateX(-24deg) translateY(2px); transition: transform .32s cubic-bezier(.16, 1, .3, 1); }
.sa .m.is-thrown .m-switch i { transform: perspective(60px) rotateX(24deg) translateY(-2px); background: linear-gradient(#f6f1e8, #e9e2d4 45%, #cfc7b8); }
.sa .m-codes { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 12px var(--m-pad) 26px; font: 500 12px/1.2 var(--m-label); letter-spacing: .08em; color: var(--m-muted); }
.sa .m:is(.is-scene, .is-still) .m-codes { position: absolute; z-index: 2; left: 0; right: 40%; bottom: calc(var(--m-dock) + 6px + env(safe-area-inset-bottom, 0px)); padding: 0 0 0 var(--m-pad); }
.sa .m-codes b { margin-right: .45em; color: rgb(var(--m-lamp)); font-weight: 600; }
.sa .m-leg { margin: 0; padding: 0 var(--m-pad); font: 600 12px/1.3 var(--m-label); letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink); }
/* a fixed box with its lines sat on the bottom: a reading that wraps to another line never moves the box (no layout shift) */
.sa .m:is(.is-scene, .is-still) .m-leg { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(var(--m-dock) + 14px + env(safe-area-inset-bottom, 0px)); padding-right: 46%;
  height: 4.3em; display: flex; flex-direction: column; justify-content: flex-end; }
.sa .m-leg span { display: block; margin-top: .35em; font-weight: 500; letter-spacing: .08em; color: var(--m-muted); }
.sa .m-route.is-full .m-leg, .sa .m-recent-map.is-full .m-leg { color: rgb(var(--m-lamp)); }
/* the road's readouts sit on a fade of the night, so the road can pass under them and they still read */
.sa .m-route .m-pin::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: calc(var(--m-dock) + 170px); background: linear-gradient(transparent, var(--m-bg) 30%); pointer-events: none; }
.sa .m-route .m-labels { z-index: 2; }
.sa .m-route :is(.m-tally, .m-leg), .sa .m-recent-map :is(.m-tally, .m-leg, .m-axis) { z-index: 2; }
/* the recent-enquiries timeline: month names under a hairline the scene draws */
.sa .m-axis { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 12px; pointer-events: none; font: 600 9.5px/1 var(--m-label); letter-spacing: .14em; text-transform: uppercase; color: var(--m-muted); }
.sa .m-axis span { position: absolute; top: 0; padding-left: 4px; }
.sa .m-recent-map .m-tally em { max-width: 7.5em; }

/* ================= the families: different type, dot and tempo, not only colour ================= */
/* Frame: forest and ivory, Bodoni with italic accents, round dots, hairlines, a calm follow */
[data-family="frame"] .sa .m-title { font-weight: 400; }
[data-family="frame"] .sa .m-title em { font-style: italic; color: rgb(var(--m-lamp)); }
[data-family="frame"] .sa .m-eyebrow { letter-spacing: .26em; color: rgb(var(--m-lamp)); font-weight: 500; }
[data-family="frame"] .sa .m-town { font-weight: 500; letter-spacing: .14em; }
[data-family="frame"] .sa .m-town em { font: italic 400 13px/1 var(--m-display); letter-spacing: 0; }
[data-family="frame"] .sa .m-tally b { font-style: italic; font-weight: 560; }
[data-family="frame"] .sa .m-state span::before { border-radius: 50%; }
[data-family="frame"] .sa .m-axis { letter-spacing: .2em; font-weight: 500; }

/* Kinetic: ink and paper, the client's colour as the light, condensed black capitals, square dots, hard edges, a snappy follow */
[data-family="kinetic"] .sa .m-title { font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; line-height: .86; letter-spacing: -.01em; font-size: clamp(40px, 12vw, 104px); }
[data-family="kinetic"] .sa .m-title em { color: rgb(var(--m-lamp)); }
[data-family="kinetic"] .sa .m-eyebrow { display: inline-block; padding: .6em 1em; border: 2px solid currentColor; border-radius: 99px; color: var(--m-ink); font-weight: 800; letter-spacing: .08em; }
[data-family="kinetic"] .sa :is(.m-town, .m-state, .m-leg, .m-axis) { font-weight: 800; font-variation-settings: "wdth" 88; }
[data-family="kinetic"] .sa .m-town { font-size: 13px; letter-spacing: .04em; }
[data-family="kinetic"] .sa .m-town.is-base { font-size: 15px; }
[data-family="kinetic"] .sa .m-tally b { font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; letter-spacing: -.02em; font-size: 84px; color: rgb(var(--m-lamp)); }
[data-family="kinetic"] .sa .m-fill .m-dim { color: var(--m-ink); opacity: .26; }

/* Night Shift: night and tungsten, Geist and its mono, fine square dots and light that glows */
[data-family="night-shift"] .sa .m-title { font-weight: 600; letter-spacing: -.035em; }
[data-family="night-shift"] .sa .m-title em { color: rgba(244, 239, 230, .5); }
[data-family="night-shift"] .sa .m-eyebrow { font-weight: 500; }
[data-family="night-shift"] .sa .m-tally b { font-weight: 300; }
[data-family="night-shift"] .sa .m-tally:not(.m-fill) b { text-shadow: 0 0 26px rgba(var(--m-lamp), .5); }
[data-family="night-shift"] .sa .m-town.on { text-shadow: 0 0 3px var(--m-bg), 0 0 10px var(--m-bg), 0 0 18px rgba(var(--m-lamp), .35); }

@media (prefers-reduced-motion: reduce) { .sa .m *, .sa .m *::before, .sa .m *::after { transition: none !important; } }

/* Bodoni Moda's automatic optical size thins its hairlines to nothing at display sizes (an em dash and the A's bar vanish); the font shorthand resets it, hence every element */
[data-family="frame"] .sa, [data-family="frame"] .sa * { font-optical-sizing: none !important; }