/* Enfilade, the public page. One pinned scene (the phone, the mood board, the words), then the sell. */
:root {
  --bg: #ffffff; --tint: #f4f4f2; --tint-2: #ececea; --ink: #0d0d0d; --ink-2: #5b5b5b; --ink-3: #9b9b9b; --rule: #e6e6e3;
  --blue: #2d5bff; --blue-soft: rgba(45, 91, 255, .08); --ok: #4d7a5e; --change: #b5643f; --brand: #a3855a;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --mark: "Bodoni Moda", "Didot", Georgia, serif;
  --ui: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --out: cubic-bezier(.16, 1, .3, 1); --io: cubic-bezier(.7, 0, .2, 1);
  --gut: max(16px, 3.4vw);
  --s: .82;                               /* the phone's screen scale, set from the viewport */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--sans); font-optical-sizing: none; font-variation-settings: "opsz" 32;
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.heart-path { fill: none; stroke: #111; stroke-width: 2; }

/* buttons: the blue pill with its little arrow */
.pill-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 18px; border-radius: 999px; background: var(--blue); color: #fff;
  font: 500 15px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; transition: background .3s, padding .4s var(--out); }
.pill-btn i { position: relative; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .22); overflow: hidden; }
.pill-btn i::before, .pill-btn i::after { content: "→"; position: absolute; inset: 0; display: grid; place-items: center; font: 500 14px/1 var(--sans); font-style: normal;
  transition: transform .45s var(--out); }
.pill-btn i::after { transform: translateX(-120%); }
.pill-btn:hover { background: #1f49e8; padding-left: 22px; }
.pill-btn:hover i::before { transform: translateX(120%); }
.pill-btn:hover i::after { transform: none; }
.text-link { position: relative; font-weight: 500; }
.text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(.25); transform-origin: left;
  transition: transform .5s var(--out); }
.text-link:hover::after { transform: scaleX(1); }

/* ------------------------------------------------------------------ loading: the plan draws itself, then the page opens from it */
html:not(.js) .loader { display: none; }
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg); pointer-events: none; --ld: 0;
  animation: ld-auto .6s 3.4s var(--io) forwards; }
.ld-stage { display: grid; justify-items: center; gap: 18px; width: min(70vw, 720px); transition: transform 1s var(--out), filter .8s, opacity .8s; }
.ld-plan { width: 100%; height: auto; overflow: visible; }
.ld-plan .pl-we, .ld-plan .pl-wi, .ld-plan .pl-wef, .ld-plan .pl-wif { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--ld) / .5, 1)); }
.ld-plan .pl-wi, .ld-plan .pl-wif { stroke-dashoffset: calc(1 - clamp(0, (var(--ld) - .2) / .45, 1)); }
.ld-plan .pl-f, .ld-plan .pl-fo, .ld-plan .pl-rug, .ld-plan .pl-win, .ld-plan .pl-dr, .ld-plan .pl-sw, .ld-plan .pl-rail,
.ld-plan .pl-tile, .ld-plan .pl-deck, .ld-plan .pl-hg, .ld-plan .pl-gl, .ld-plan .pl-mat { opacity: clamp(0, (var(--ld) - .45) / .3, 1); }
.ld-plan .pl-lb, .ld-plan .pl-ar, .ld-plan .pl-dim, .ld-plan .pl-dt, .ld-plan .pl-na, .ld-plan .pl-en { opacity: clamp(0, (var(--ld) - .78) / .2, 1); }
.ld-plan .ld-z { fill: rgba(163, 133, 90, .16); stroke: #a3855a; stroke-width: 3; opacity: clamp(0, (var(--ld) - var(--at)) / .14, 1); }
.ld-cap { margin: 0; font: 400 14px/1 var(--sans); letter-spacing: -.01em; color: var(--ink-3); }
.loader .ld-mark { position: absolute; left: var(--gut); bottom: 22px; font: 450 14px/1 var(--sans); letter-spacing: -.02em; }
.loader .ld-n { position: absolute; right: var(--gut); bottom: 22px; font: 400 14px/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.loader .ld-n b { font-weight: 400; color: var(--ink); }
.loader.done { animation: ld-out .9s var(--io) forwards; }
.loader.done .ld-stage { transform: scale(1.12); filter: blur(8px); opacity: 0; }
.no-intro .loader { display: none; }
@keyframes ld-out { 0%, 30% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes ld-auto { to { opacity: 0; visibility: hidden; } }

/* ------------------------------------------------------------------ header: a black capsule */
.nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.nav-in { pointer-events: auto; display: flex; align-items: center; gap: 12px; height: 48px; padding: 4px; border-radius: 100px; background: #020109; color: #fff; }
.nav .mark { display: flex; align-items: center; gap: 8px; height: 40px; padding: 4px 14px 4px 12px; border-radius: 100px; font: 450 15px/16px var(--sans); letter-spacing: -.03em; white-space: nowrap; }
.nav .mark svg { width: 16px; height: 16px; }
.nav .links { position: relative; display: flex; height: 40px; padding: 4px; border-radius: 100px; background: rgba(255, 255, 255, .16); }
.nav .links a { position: relative; z-index: 1; height: 32px; display: grid; place-items: center; padding: 8px 12px; border-radius: 100px;
  font: 400 16px/1.1 var(--sans); letter-spacing: -.03em; color: #fff; white-space: nowrap; transition: opacity .3s; }
.nav .links a:hover { opacity: .75; }
.nav .hl { position: absolute; top: 4px; height: 32px; border-radius: 100px; background: rgba(255, 255, 255, .16); transition: left .5s var(--out), width .5s var(--out), opacity .3s; }
.nav .bar { width: 1px; height: 16px; border-radius: 100px; background: rgba(255, 255, 255, .16); }
.nav .cta { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 10px 12px 10px 16px; border-radius: 100px; background: #fff; color: #000;
  font: 400 16px/1.1 var(--sans); letter-spacing: -.03em; white-space: nowrap; transition: padding .4s var(--out); }
.nav .cta i { width: 18px; height: 18px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; transition: transform .4s var(--out); }
.nav .cta i svg { width: 11px; }
.nav .cta:hover { padding-left: 20px; }
.nav .cta:hover i { transform: rotate(-45deg); }

/* ------------------------------------------------------------------ the scene */
.scene { position: relative; height: 780vh; }
.pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg);
  --rise: 0; --head: 0; --cards: 0; --exit: 0; --mx: 0; --my: 0; --scr: 0px; }

.hero-flow { position: absolute; left: 0; right: 0; top: 75px; bottom: 64px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px, 5vh, 56px); }
.hero-head { position: relative; z-index: 2; text-align: center; padding: 0 var(--gut);
  opacity: calc(1 - var(--head)); transform: translateY(calc(var(--head) * -50px)); filter: blur(calc(var(--head) * 8px)); }
.badge { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 4px 12px 4px 4px; border-radius: 100px; background: #f2f1ef; font: 400 12px/14.4px var(--sans); letter-spacing: -.03em; color: #000; }
.badge .sw { display: flex; }
.badge .sw i { width: 24px; height: 24px; border-radius: 50%; background: center/cover; border: 1.5px solid #f2f1ef; margin-right: -7px; }
.badge .sw i:last-child { margin-right: 0; }
h1 { margin-top: 16px; font: 400 clamp(30px, min(4vw, 7vh), 64px)/1.1 var(--sans); letter-spacing: -.03em; color: #000; }
.lede { max-width: 34em; margin: 14px auto 0; font: 400 clamp(15px, min(1.4vw, 2.6vh), 18px)/1.45 var(--sans); letter-spacing: -.01em; color: var(--ink-2); }
.js h1.split-w .w { filter: blur(16px); transform: translateY(.3em); transition-duration: 1.3s, 1.3s, 1.5s; transition-delay: calc(var(--i) * 90ms); }
.js h1.split-w.in .w { filter: none; transform: none; }
h1 .ln { display: block; }

/* the rooms' boards: a full-width row the phone rises over */
.cards { position: relative; flex: 1; min-height: 0; max-height: min(400px, calc(clamp(170px, 19.6vw, 280px) * 1.42)); width: 100%; display: flex; justify-content: center; gap: 12px; list-style: none; margin: 0; padding: 0;
  opacity: calc(1 - var(--cards)); transform: translate3d(calc(var(--mx) * -10px), calc(var(--cards) * 40px), 0) scale(calc(1 - var(--cards) * .04)); }
.card { position: relative; flex: none; width: clamp(170px, 19.6vw, 280px); background: #f6f6f6; overflow: hidden; display: grid; place-items: center;
  transition: opacity 1s var(--out), transform 1.3s var(--out); }
.js .card { opacity: 0; transform: translateY(70px); }
.js .hero-in .card { opacity: 1; transform: none; }
.card:nth-child(1) { transition-delay: .55s; } .card:nth-child(2) { transition-delay: .63s; } .card:nth-child(3) { transition-delay: .71s; }
.card:nth-child(4) { transition-delay: .79s; } .card:nth-child(5) { transition-delay: .87s; }
.card b { position: absolute; top: 16px; left: 16px; font: 400 24px/1.2 var(--sans); letter-spacing: -.03em; color: #262626; }
.mbx { position: relative; width: 52%; max-height: 62%; aspect-ratio: 4 / 5; margin-top: 18px; }
.mbx span { position: absolute; background: #ddd center/cover; box-shadow: 0 24px 30px -18px rgba(0, 0, 0, .4); transition: transform .8s var(--out); }
.mbx .m1 { left: 0; top: 0; width: 82%; height: 88%; transform: rotate(-4deg); }
.mbx .m2 { right: -4%; bottom: -2%; width: 50%; aspect-ratio: 1; border: 3px solid #fff; transform: rotate(6deg); }
.mbx.pl .m1 { left: -14%; top: 16%; width: 128%; height: auto; aspect-ratio: 1020 / 720; padding: 6px; background: #fff; transform: rotate(-3deg); }
.mbx.pl .m1 svg { width: 100%; height: 100%; display: block; }
.mbx.pl .m2 { right: -10%; bottom: 4%; }
.card:hover .m1 { transform: rotate(-7deg) translate(-10px, -8px) scale(1.03); }
.card:hover .m2 { transform: rotate(11deg) translate(10px, 6px) scale(1.06); }
.card .go { position: absolute; top: 16px; right: 16px; font: 400 20px/1 var(--sans); color: var(--ink-3); transition: transform .5s var(--out), color .3s; }
.card:hover .go { transform: translate(3px, -3px); color: var(--blue); }
.card .cap { position: absolute; left: 16px; bottom: 16px; font: 400 14px/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink-3); transition: color .3s; }
.card:hover .cap { color: var(--ink); }

/* the giant line that sharpens in at the end */
html:not(.js) .statement, html:not(.js) .say, html:not(.js) .receipt { display: none; }
.statement { position: absolute; left: var(--gut); right: var(--gut); top: 11vh; z-index: 4; font: 400 clamp(36px, 5.4vw, 86px)/1.02 var(--sans); letter-spacing: -.05em;
  pointer-events: none; max-width: 15em; }
.statement .w { display: inline-block; opacity: 0; filter: blur(16px); will-change: opacity, filter; }

/* ---- the ending: every room's answer, in a row like the opening one */
.finale { position: absolute; left: 50%; bottom: max(72px, 9vh); z-index: 6; display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; transform: translateX(-50%); pointer-events: none; }
.finale li { position: relative; flex: none; width: clamp(170px, 19.6vw, 280px); height: min(46vh, 380px); padding: 16px; display: flex; flex-direction: column; gap: 12px;
  background: #f6f6f6; opacity: 0; will-change: transform, opacity; }
.finale b { font: 400 24px/1.2 var(--sans); letter-spacing: -.03em; color: #262626; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finale .st { align-self: flex-start; margin-top: -4px; display: inline-flex; align-items: center; gap: 7px; padding: 0; border-radius: 0; background: none;
  font: 600 9.5px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; }
.finale .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.finale .st.wt { color: #a3a09a; }
.finale .ph { position: relative; flex: 1; min-height: 0; border-radius: 2px; background: #e9e6e0 center/cover; }
.finale em { font: 400 14px/1.2 var(--sans); font-style: normal; letter-spacing: -.02em; color: var(--ink-3); }
.finale .stamp { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center;
  font: 600 18px/1 var(--sans); text-decoration: none; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .4); }
.finale .nb { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; border-radius: 12px 12px 12px 3px; background: #fff; color: #111;
  font: 500 13px/1.3 var(--ui); text-decoration: none; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45); }

/* ---- the mood board behind the phone */
.board { position: absolute; left: 50%; top: 50%; z-index: 3; width: 0; height: 0; pointer-events: none; }
.tile { position: absolute; left: 0; top: 0; width: var(--w, 150px); aspect-ratio: var(--ar, 4 / 5); opacity: 0; will-change: transform, opacity; }
.tile > i { position: absolute; inset: 0; border-radius: 3px; background: #e9e6e0 center/cover; box-shadow: 0 34px 50px -30px rgba(0, 0, 0, .45);
  transition: opacity .9s var(--out), filter .9s var(--out), transform 1.1s var(--out), box-shadow .8s var(--out); transition-delay: calc(var(--n, 0) * 70ms); }
.tile > i.kit { opacity: 0; filter: blur(8px); transform: scale(1.06); }
.board.k .tile > i.kit { opacity: 1; filter: none; transform: none; }
.board.k .tile > i.liv { opacity: 0; filter: blur(8px); transform: scale(.96); }
.tile.pal > i { display: flex; align-items: center; justify-content: center; gap: 7%; padding: 0 9%; background: #f1efea; }
.tile.pal s { flex: 1; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.t-heart { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4); transform: scale(0); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.t-heart svg { width: 18px; fill: #d0473b; }
.board.h:not(.k) .t-heart { transform: scale(1); }
.t-note { position: absolute; left: -34%; top: 70%; z-index: 2; display: flex; gap: 10px; width: 240px; padding: 12px 14px 13px 12px; border-radius: 14px 14px 14px 3px; background: #fff;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .45); font: 500 14px/1.35 var(--ui); color: #111; opacity: 0; transform: translateY(14px) scale(.9); transform-origin: left bottom;
  transition: opacity .5s, transform .7s var(--out); }
.t-note > b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--change); color: #fff; display: grid; place-items: center; font: 700 12px/1 var(--ui); }
.t-note em { display: block; font: 600 10px/1.4 var(--ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #9b9892; }
.board.n .t-note { opacity: 1; transform: none; }
.board.n .tile:first-child { z-index: 1; }      /* the note on the first image stays above its neighbours in the line */
.board.ln .tile > i { box-shadow: 0 16px 24px -20px rgba(0, 0, 0, .3); }      /* in line: flatter, like the photos on the phone */

/* ---- the strip (iPad only): the room's images drifting behind the phone, the kitchen's taking over later */
.strip { display: none; position: absolute; left: 0; right: 0; top: 57%; z-index: 3; height: clamp(120px, 15vh, 180px); transform: translateY(-50%);
  pointer-events: none; opacity: 0; transition: opacity .9s var(--out);
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.strip.on { opacity: 1; }
.track { position: absolute; left: 0; top: 0; height: 100%; display: flex; gap: 12px; width: max-content; animation: drift-x 56s linear infinite;
  transition: opacity .9s var(--out), filter .9s var(--out); }
.track i { flex: none; height: 100%; aspect-ratio: 4 / 5; border-radius: 3px; background: #e9e6e0 center/cover; box-shadow: 0 22px 30px -22px rgba(0, 0, 0, .45); }
.track.kit { opacity: 0; filter: blur(6px); animation-direction: reverse; }
.strip.k .track.kit { opacity: 1; filter: none; }
.strip.k .track.liv { opacity: 0; filter: blur(6px); }
@keyframes drift-x { to { transform: translateX(-50%); } }

/* ---- the phone */
.phone { --bz: 10px; position: absolute; left: 50%; top: 50%; z-index: 5; width: calc(390px * var(--s) + 2 * var(--bz)); height: calc(844px * var(--s) + 2 * var(--bz));
  padding: var(--bz); border-radius: calc(54px * var(--s) + var(--bz)); background: #0c0c0c;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .45), inset 0 0 0 1.5px #2a2a2a;
  transform: translate3d(calc(-50% + var(--mx) * 6px), calc(-50% + (1 - var(--rise)) * 105vh + var(--exit) * 40vh), 0);
  opacity: calc(1 - var(--exit)); will-change: transform; }
.phone::before, .phone::after { content: ""; position: absolute; width: 4px; border-radius: 2px; background: #0c0c0c; }
.phone::before { left: -3px; top: 22%; height: 8%; }
.phone::after { right: -3px; top: 28%; height: 12%; }
.glass { position: relative; width: calc(390px * var(--s)); height: calc(844px * var(--s)); border-radius: calc(54px * var(--s)); overflow: hidden; background: #fff;
  transform: translateZ(0); }
.island { position: absolute; top: calc(11px * var(--s)); left: 50%; z-index: 30; width: calc(122px * var(--s)); height: calc(36px * var(--s)); margin-left: calc(-61px * var(--s));
  border-radius: 99px; background: #0c0c0c; }

/* the screen, drawn at the size of a real phone (390 x 844) and scaled down */
.screen { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(var(--s)); transform-origin: 0 0; overflow: hidden; background: #fff;
  font-family: var(--ui); color: #111110; }
.sb { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 25; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 40px;
  font: 600 16px/1 -apple-system, "SF Pro Text", var(--ui); letter-spacing: -.01em; }
.sb svg { height: 12px; }
.screen .k { font: 600 10px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: #9b9892; }

.cover { position: absolute; inset: 0; z-index: 20; background: #fbfaf7; display: flex; flex-direction: column; align-items: center; padding: 92px 32px 40px;
  transition: transform 1s var(--io); }
.screen[data-st]:not([data-st="0"]) .cover { transform: translateY(-101%); }
.cover .stu { font: 500 17px/1 var(--mark); letter-spacing: .26em; }
.cover .arch { width: 300px; height: 360px; margin: 34px 0 30px; border-radius: 150px 150px 3px 3px; background: #e9dcc7 center/cover; }
.cover h4 { margin: 0; font: 300 46px/1 var(--display); letter-spacing: -.01em; }
.cover .for { margin-top: 10px; font: italic 300 20px/1.2 var(--display); color: #4b4a47; }
.cover .open { margin-top: auto; width: 100%; height: 56px; border-radius: 3px; background: #111110; color: #fff; display: grid; place-items: center;
  font: 600 11px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; }

.bk-top { position: absolute; top: 54px; left: 0; right: 0; z-index: 4; padding: 14px 24px 16px; background: #fff; border-bottom: 1px solid #ecebe7; }
.bk-top .row { display: flex; align-items: center; justify-content: space-between; }
.bk-top .stu { font: 500 14px/1 var(--mark); letter-spacing: .22em; }
.bk-top h5 { margin: 12px 0 6px; font: 400 30px/1 var(--display); }
.ring { position: relative; width: 40px; height: 40px; }
.ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .bg { stroke: #ecebe7; }
.ring .fg { stroke: var(--ok); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--ring, 0) * 100); transition: stroke-dashoffset 1.2s var(--out); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10.5px/1 var(--ui); }
.plan { position: absolute; top: 182px; left: 0; right: 0; bottom: 0; background: #f8f7f4; overflow: hidden; }   /* a zoomed plan stays in its window */
.plan svg { position: absolute; left: 12px; top: 30px; width: 366px; height: 258px; }
/* the sample plan, drawn once (#gf) and shown in the phone, the overview slide and the key plans */
.pl-we { stroke: #2f2d2a; stroke-width: 15; stroke-linecap: square; fill: none; }
.pl-wi { stroke: #2f2d2a; stroke-width: 6; stroke-linecap: square; fill: none; }
.pl-win, .pl-f, .pl-sw, .pl-dim, .pl-dr { vector-effect: non-scaling-stroke; fill: none; }
.pl-win { stroke: #2f2d2a; stroke-width: .8; }
.pl-dr { stroke: #2f2d2a; stroke-width: 1; }
.pl-sw { stroke: #9b958c; stroke-width: .7; stroke-dasharray: 2 2; }
.pl-f { stroke: #9a948a; stroke-width: .75; }
/* the drawing's finer parts (tools/demo_plan.py): grey walls under their dark edges, furniture in outline,
   tiles and decking, wardrobe hangers, shower glass, the entry mat */
.pl-wef, .pl-wif { fill: none; stroke: #bdb9b1; stroke-linecap: square; }
.pl-wef { stroke-width: 12; }
.pl-wif { stroke-width: 3.6; }
.pl-fo { fill: none; stroke: #9a948a; stroke-width: .75; vector-effect: non-scaling-stroke; }   /* line only: the floor shows through */
.pl-tile, .pl-deck { fill: none; stroke: #e6e2da; stroke-width: .6; vector-effect: non-scaling-stroke; }
.pl-hg { fill: none; stroke: #c9c3b8; stroke-width: .5; vector-effect: non-scaling-stroke; }
.pl-gl { fill: none; stroke: #8fa3ad; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.pl-mat { fill: #f1ece4; stroke: #d8d0c3; stroke-width: .6; vector-effect: non-scaling-stroke; }
.pl-en { font: 600 9px Manrope, Arial, sans-serif; letter-spacing: 1.6px; text-anchor: middle; fill: #2f2d2a; }
.pl-lb, .pl-ar, .pl-dt, .pl-en { display: var(--plan-text, inline); }     /* the phone hides the drawing's own small print */
.pl-rug { fill: #f1ece4; stroke: #ddd5c8; stroke-width: 1; }
.pl-rail { fill: none; stroke: #2f2d2a; stroke-width: 2; stroke-dasharray: 8 4; }
.pl-lb { font: 600 10px Manrope, Arial, sans-serif; letter-spacing: 1.6px; text-anchor: middle; fill: #2f2d2a; }
.pl-ar { font: 400 9px Manrope, Arial, sans-serif; text-anchor: middle; fill: #8f8a82; }
.pl-dim { stroke: #8f8a82; stroke-width: .7; }
.pl-dt { font: 500 9px Manrope, Arial, sans-serif; fill: #8f8a82; text-anchor: middle; }
.pl-na circle { fill: none; stroke: #2f2d2a; } .pl-na path { fill: #2f2d2a; } .pl-na text { font: 600 9px Manrope, Arial; text-anchor: middle; fill: #2f2d2a; }
.rlist { position: absolute; left: 16px; right: 16px; top: 318px; margin: 0; padding: 0; list-style: none; border-top: 1px solid #ecebe7; }
.rlist li { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid #ecebe7; }
.rlist .rt { flex: none; width: 46px; height: 46px; border-radius: 3px; background: center/cover; }
.rlist div { flex: 1; min-width: 0; }
.rlist b { display: block; font: 400 21px/1.1 var(--display); }
.rlist em { display: grid; font: 500 11.5px/1.4 var(--ui); font-style: normal; color: #9b9892; }
.rlist em span { grid-area: 1 / 1; transition: opacity .5s; }
.rlist .s1 { opacity: 0; }
.rlist li > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #b08d55; transition: background .6s; }
.screen.ok .rlist .liv .s0, .screen.noted .rlist .kit .s0 { opacity: 0; }
.screen.ok .rlist .liv .s1 { opacity: 1; color: var(--ok); }
.screen.noted .rlist .kit .s1 { opacity: 1; color: var(--change); }
.screen.ok .rlist .liv > i { background: var(--ok); }
.screen.noted .rlist .kit > i { background: var(--change); }
.zone { fill: rgba(163, 133, 90, .14); stroke: #a3855a; stroke-width: 3; transition: fill .8s, stroke .8s, opacity .6s; }
/* tapping a room: the plan glides in on it (the header folds to its first line to make room), then its board rises
   from the bottom, leaving the room in view above it. The plan glides back out when the board closes. */
.plan { transition: top .9s var(--out); }
/* the drawing and its room labels zoom as one layer, so a label never sits off its room */
.plan .map { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .9s var(--out); --plan-text: none; }
.screen[data-zoom] .plan { top: 104px; }
.screen[data-zoom="living"] .plan .map { transform: translate(-250px, -84px) scale(1.75); }
.screen[data-zoom="kitchen"] .plan .map { transform: translate(-435px, -327px) scale(2); }
.chipr, .rlist, .plan .hint { transition: opacity .3s .2s; }
.screen[data-zoom] .chipr, .screen[data-zoom] .rlist, .screen[data-zoom] .plan .hint { opacity: 0; transition: opacity .15s; }
/* the header's second and third lines fade first, then their space closes (and opens again before they return) */
.bk-top h5, .bk-top .k { max-height: 60px; overflow: hidden; transition: max-height .55s var(--out), margin .55s var(--out), opacity .25s .3s; }
.screen[data-zoom] .bk-top h5, .screen[data-zoom] .bk-top .k { max-height: 0; margin: 0; opacity: 0;
  transition: opacity .12s, max-height .55s var(--out) .1s, margin .55s var(--out) .1s; }
.screen[data-zoom="living"] .zone:not(.liv), .screen[data-zoom="kitchen"] .zone:not(.kit) { opacity: 0; }
.screen[data-zoom="living"] .zone.liv, .screen[data-zoom="kitchen"] .zone.kit { fill: rgba(163, 133, 90, .22); }
.screen.ok .zone.liv { fill: rgba(77, 122, 94, .18); stroke: var(--ok); }
.screen.noted .zone.kit { fill: rgba(181, 100, 63, .16); stroke: var(--change); }
/* the rooms you can open, named where the plan names them: a dot and the name, no box over the drawing */
.chipr { position: absolute; z-index: 2; display: flex; align-items: center; gap: 5px; transform: translate(-50%, -50%);
  font: 600 8.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: #2f2d2a;
  text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff; }
.chipr i { width: 6px; height: 6px; border-radius: 50%; background: #b08d55; box-shadow: 0 0 0 2px #fff; transition: background .6s; }
.screen.ok .chipr.liv i { background: var(--ok); }
.screen.noted .chipr.kit i { background: var(--change); }
.hint { position: absolute; left: 50%; bottom: 46px; z-index: 2; transform: translateX(-50%); height: 40px; padding: 0 18px; border-radius: 99px; background: #111110; color: #fff;
  display: grid; place-items: center; font: 600 10px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; transition: opacity .4s; }
.screen:not([data-st="1"]) .hint { opacity: 0; }

/* a room's sheet, its mood board first */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 520px; z-index: 10; background: #fff; border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 50px -26px rgba(0, 0, 0, .4); transform: translateY(103%); transition: transform .9s var(--out); overflow: hidden; }
.screen[data-sheet="living"] .sheet.liv, .screen[data-sheet="kitchen"] .sheet.kit { transform: none; }
.sheet .grip { width: 40px; height: 5px; border-radius: 3px; background: #e2ded6; margin: 10px auto 0; }
.sh-body { padding: 16px 22px 120px; transform: translateY(calc(var(--scr) * -1)); transition: transform .6s var(--out); }
.sheet.kit .sh-body { transform: none; }
.sh-body h6 { margin: 10px 0 0; font: 300 48px/.95 var(--display); letter-spacing: -.015em; }
.sh-body .sub { margin: 8px 0 14px; font: italic 300 19px/1.3 var(--display); color: #4b4a47; }
.sh-body .dots { display: flex; gap: 6px; margin-bottom: 22px; }
.sh-body .dots s { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.mb { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mi { position: relative; height: 170px; border-radius: 3px; background: #eee center/cover; }
.mi.big { grid-column: span 2; height: 250px; }
.hrt { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .94); display: grid; place-items: center; }
.hrt svg { width: 18px; fill: none; stroke: #111; stroke-width: 2; transition: fill .3s, stroke .3s; }
.screen.liked .hrt.first svg { fill: #d0473b; stroke: #d0473b; animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.sh-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 104px; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 22px 22px;
  background: #fff; border-top: 1px solid #ecebe7; }
.sh-bar .q b { display: block; font: 600 14px/1.3 var(--ui); }
.sh-bar .q span { font: 500 12.5px/1.3 var(--ui); color: #4b4a47; text-decoration: underline; text-underline-offset: 3px; }
.approve { position: relative; height: 52px; padding: 0 28px; border-radius: 3px; background: #111110; color: #fff; display: grid; place-items: center; overflow: hidden;
  font: 600 11px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; }
.approve .done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--ok); transform: translateY(101%);
  transition: transform .6s var(--out); }
.screen.ok .sheet.liv .approve .done { transform: none; }
.note { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 320px; padding: 24px 22px; background: #fff; border-radius: 22px 22px 0 0;
  box-shadow: 0 -24px 50px -24px rgba(0, 0, 0, .4); transform: translateY(105%); transition: transform .7s var(--out); }
.screen.noting .note { transform: none; }
.nrow { display: flex; gap: 12px; margin: 14px 0 16px; }
.nthumb { flex: none; width: 70px; height: 88px; border-radius: 3px; background: center/cover; }
.field { flex: 1; height: 88px; padding: 11px 12px; border: 1px solid #e3e0d9; border-radius: 4px; font: 500 15px/1.4 var(--ui); }
.caret { display: inline-block; width: 1.5px; height: 18px; margin-left: 1px; background: #111; vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.send { height: 54px; border-radius: 3px; background: #111110; color: #fff; display: grid; place-items: center; font: 600 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; }
.toast { position: absolute; top: 64px; left: 50%; z-index: 24; transform: translate(-50%, -16px); opacity: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 14px;
  border-radius: 99px; background: #111110; color: #fff; font: 600 13px/1 var(--ui); white-space: nowrap; transition: opacity .4s, transform .6s var(--out); }
.toast i { width: 22px; height: 22px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; font-style: normal; font-size: 12px; }
.toast.amber i { background: var(--change); }
.screen.toasting .toast { opacity: 1; transform: translate(-50%, 0); }
.touch { position: absolute; z-index: 40; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(17, 17, 16, .18); border: 2.5px solid rgba(255, 255, 255, .95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2); opacity: 0; pointer-events: none; }
.touch.go { animation: touch .75s var(--out); }
@keyframes touch { 0% { opacity: 0; transform: scale(1.5); } 30% { opacity: 1; transform: scale(.9); } 60% { opacity: 1; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.1); } }

/* ---- the words beside the phone */
.say { position: absolute; left: var(--gut); top: 50%; z-index: 6; width: min(25vw, 400px); transform: translateY(-50%);
  font: 400 clamp(26px, 2.6vw, 40px)/1.08 var(--sans); letter-spacing: -.035em; transition: opacity .5s; }
.say.off { opacity: 0; }
/* the line over the big row of a room's board (desktop): beside the phone as always, but above the pictures */
@media (min-width: 861px) and (orientation: landscape), (min-width: 1101px) {
  .say.over { top: 28vh; }
}
.say .w { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; opacity: 0; filter: blur(10px); transform: translateX(-.08em); transition: opacity .5s, filter .6s, transform .6s var(--out); }
.ch.on { opacity: 1; filter: blur(0); transform: none; }
.side-r { position: absolute; right: var(--gut); top: 50%; z-index: 6; display: flex; align-items: center; gap: 14px; transform: translateY(-50%); transition: opacity .5s, transform .6s var(--out); }
.side-r span { font: 450 15px/1 var(--sans); }
.side-r.off { opacity: 0; transform: translate(20px, -50%); pointer-events: none; }
.receipt { position: absolute; left: calc(50% + 195px * var(--s) + 4vw); top: 50%; z-index: 6; width: 260px; padding: 18px 20px; border-radius: 14px; background: #fff;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .04); font-family: var(--ui);
  opacity: 0; transform: translate3d(-60px, -45%, 0) scale(.94); transition: opacity .5s, transform .9s var(--out); }
.receipt.on { opacity: 1; transform: translate3d(calc(var(--mx) * -8px), -50%, 0); }
.receipt .k { display: flex; align-items: center; gap: 8px; font: 700 10px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ok); }
.receipt .k i { width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 10px; letter-spacing: 0; }
.receipt b { display: block; margin: 12px 0 2px; font: 400 26px/1.05 var(--display); }
.receipt p { font: 500 13px/1.5 var(--ui); color: #4b4a47; }
.receipt p em { font-style: normal; color: #9b9892; }

/* ---- step dots and the scroll hint */
.steps { position: absolute; left: var(--gut); bottom: 24px; z-index: 7; display: flex; align-items: center; gap: 14px; transition: opacity .5s; }
.steps ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.steps li { width: 16px; height: 3px; border-radius: 3px; background: rgba(13, 13, 13, .12); transition: width .6s var(--out), background .4s; }
.steps li.done { background: var(--ink); }
.steps li.now { width: 34px; background: var(--blue); }
.st-lab { display: flex; gap: 8px; font: 400 14px/1 var(--sans); letter-spacing: -.02em; color: var(--ink-2); white-space: nowrap; }
.st-lab b { font-weight: 450; color: var(--blue); font-variant-numeric: tabular-nums; }
.scroll-hint { position: absolute; left: 50%; bottom: 20px; z-index: 7; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; color: var(--ink-2);
  font: 400 14px/1 var(--sans); letter-spacing: -.02em; transition: opacity .5s; }
.mouse { position: relative; width: 18px; height: 28px; border: 1.5px solid currentColor; border-radius: 10px; opacity: .7; }
.mouse i { position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--blue); animation: wheel 1.8s var(--io) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.scroll-hint.off, .steps.off { opacity: 0; }

/* the QR in the corner: open the page on a phone */
.qr { position: fixed; right: 18px; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 7px 16px 7px 7px; border-radius: 14px; background: #fff;
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .05); transition: opacity .5s, transform .6s var(--out); }
.qr span.box { width: 56px; height: 56px; padding: 4px; border-radius: 8px; background: #fff; }
.qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.qr .qt { display: grid; gap: 4px; }
.qr b { font: 450 14px/1.1 var(--sans); letter-spacing: -.02em; }
.qr em { font: 400 12.5px/1.1 var(--sans); font-style: normal; color: var(--ink-3); }
.qr.off { opacity: 0; transform: translateY(20px); pointer-events: none; }

/* ------------------------------------------------------------------ after the scene */
section { position: relative; }
.wrap { padding-left: var(--gut); padding-right: var(--gut); }
.js .rv { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity 1s var(--out), transform 1.2s var(--out), filter 1s var(--out); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; filter: none; }
.js .split-w .w { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.25em); transition: opacity .9s var(--out), filter .9s var(--out), transform 1.1s var(--out);
  transition-delay: calc(var(--i) * 45ms); }
.js .split-w.in .w { opacity: 1; filter: none; transform: none; }

/* the thread versus the record */
.thread { height: 320vh; background: var(--tint); }
.th-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: center;
  padding: 80px var(--gut) 40px; overflow: hidden; }
.th-copy .label { margin-bottom: 22px; }
.th-h { display: grid; font: 400 clamp(36px, 4.4vw, 72px)/1.02 var(--sans); letter-spacing: -.045em; }
.th-l { display: grid; }
.th-h span, .th-p span, .th-l span { grid-area: 1 / 1; transition: opacity .7s, filter .7s, transform .9s var(--out); }
.th-p { display: grid; margin-top: 26px; max-width: 30em; font: 400 17px/1.55 var(--sans); color: var(--ink-2); }
.h-b, .p-b, .l-b { opacity: 0; filter: blur(10px); transform: translateY(18px); }
.thread.on .h-a, .thread.on .p-a, .thread.on .l-a { opacity: 0; filter: blur(10px); transform: translateY(-18px); }
.thread.on .h-b, .thread.on .p-b, .thread.on .l-b { opacity: 1; filter: none; transform: none; }
.th-stage { position: relative; height: min(76svh, 660px); display: grid; place-items: center; container-type: inline-size; }
@container (max-width: 470px) {        /* a narrow column (iPad upright, phones): status under each name, the header stacked */
  .th-stage .ledger { padding: 22px 22px 14px; }
  .th-stage .lg-top { flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 12px; }
  .th-stage .lg-top b { font-size: 28px; }
  .th-stage .lg-row { grid-template-columns: 50px minmax(0, 1fr); gap: 4px 14px; padding: 12px 0; }
  .th-stage .lg-row .pic { width: 50px; height: 50px; grid-row: span 2; }
  .th-stage .lg-t b { font-size: 20px; }
  .th-stage .lg-t em { margin-top: 2px; }
  .th-stage .lg-s { grid-column: 2; font-size: 8.5px; }
  .th-stage .lg-foot { flex-direction: column; gap: 4px; }
}
/* the chat is a phone: drawn at an iPhone's size and scaled to fit, so it always reads as one */
.chat { position: absolute; left: 50%; top: 50%; width: 375px; height: 760px; margin: -380px 0 0 -187.5px; display: flex; flex-direction: column;
  border: 6px solid #0c0c0c; border-radius: 54px; overflow: hidden; background: #f4f2ee; box-shadow: 0 60px 110px -60px rgba(0, 0, 0, .45);
  transform: scale(var(--cs, 1)); transform-origin: 50% 50%; transition: opacity .8s, transform 1s var(--out), filter .8s; }
.thread.on .chat { opacity: 0; transform: translateX(-40px) rotate(-3deg) scale(calc(var(--cs, 1) * .94)); filter: blur(6px); }
.ch-sb { flex: none; position: relative; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 4px 26px 0 34px; background: rgba(255, 255, 255, .86);
  font: 600 15px/1 -apple-system, "SF Pro Text", var(--sans); }
.ch-sb i { position: absolute; left: 50%; top: 10px; width: 112px; height: 32px; margin-left: -56px; border-radius: 99px; background: #0c0c0c; }
.ch-sb svg { height: 11px; }
.ch-top { flex: none; display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 18px 4px; background: rgba(255, 255, 255, .86); border-bottom: 1px solid #e9e6df; }
.ch-top i { width: 36px; height: 36px; border-radius: 50%; background: url(/static/hero/photo/living-arch.jpg) center/cover; }
.ch-top b { display: block; font: 450 15px/1.2 var(--sans); letter-spacing: -.02em; }
.ch-top span { font: 400 12px/1.3 var(--sans); color: var(--ink-3); }
.msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 14px 14px 18px; overflow: hidden; }
.m { max-width: 80%; padding: 9px 13px; border-radius: 16px; background: #fff; border: 1px solid #e8e4dc; color: #1b1b1b; font: 400 14px/1.4 var(--sans); letter-spacing: -.01em;
  opacity: 0; transform: translateY(12px) scale(.97); transform-origin: left bottom; transition: opacity .35s, transform .5s var(--out); }
.m.in { align-self: flex-start; border-bottom-left-radius: 5px; }
.m.out { align-self: flex-end; border-bottom-right-radius: 5px; background: #161616; border-color: #161616; color: #fff; transform-origin: right bottom; }
.m.on { opacity: 1; transform: none; animation: msg-in .5s var(--out); }
.m:not(.on) { display: none; }          /* not sent yet: takes no room, so the thread sits at the bottom like a real chat */
@keyframes msg-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.m .file { display: grid; grid-template-columns: 30px 1fr; column-gap: 11px; align-items: center; }
.m .file i { grid-row: span 2; height: 38px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; display: grid; place-items: end center; padding-bottom: 5px;
  font: 600 7.5px/1 var(--sans); font-style: normal; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.m .file b { font: 450 13px/1.25 var(--sans); }
.m .file em { font: 400 11.5px/1.3 var(--sans); font-style: normal; color: rgba(255, 255, 255, .55); }
.m.pics { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 196px; padding: 3px; }
.m.pics s { height: 78px; border-radius: 12px; background: center/cover; text-decoration: none; }
.m.pics s:nth-child(1) { border-top-left-radius: 13px; } .m.pics s:nth-child(4) { border-bottom-right-radius: 4px; }
.m.pics .more { display: grid; place-items: center; color: #fff; font: 450 18px/1 var(--sans); box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .45); }
.m.voice { display: flex; align-items: center; gap: 10px; width: 210px; color: var(--ink-3); font-size: 12px; }
.m.voice i { width: 0; height: 0; border-left: 10px solid #1b1b1b; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.m.voice s { flex: 1; height: 16px; background: repeating-linear-gradient(90deg, #b9b5ad 0 2px, transparent 2px 5px); -webkit-mask: linear-gradient(transparent 25%, #000 25% 75%, transparent 75%); }

/* the record: an architect's register rather than an app screen */
.ledger { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(480px, 100%); padding: 30px 32px 22px; border-radius: 6px; background: #fff;
  border: 1px solid #e8e5df; box-shadow: 0 50px 90px -56px rgba(0, 0, 0, .38); opacity: 0; transform: translateY(40px) scale(calc(var(--ls, 1) * .96));
  transform-origin: 50% 50%; transition: opacity .8s, transform 1s var(--out); }
.thread.on .ledger { opacity: 1; transform: scale(var(--ls, 1)); }          /* --ls: shrunk to fit its space, never cut */
.lg-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1.5px solid #111; }
.lg-top b { display: block; margin-top: 8px; font: 300 32px/1 var(--display); letter-spacing: -.01em; }
.ledger .k { font: 600 9.5px/1.2 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: #9b9892; white-space: nowrap; }
.lg-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid #eeebe5;
  opacity: 0; transform: translateY(12px); transition: opacity .6s, transform .8s var(--out); }
.lg-row:nth-of-type(2) { transition-delay: .15s; } .lg-row:nth-of-type(3) { transition-delay: .25s; } .lg-row:nth-of-type(4) { transition-delay: .35s; } .lg-row:nth-of-type(5) { transition-delay: .45s; }
.thread.on .lg-row { opacity: 1; transform: none; }
.lg-row .pic { width: 54px; height: 54px; border-radius: 2px; background: center/cover; }
.lg-t b { display: block; font: 400 22px/1.1 var(--display); color: #111; }
.lg-t em { display: block; margin-top: 4px; font: 400 12.5px/1.4 var(--sans); font-style: normal; letter-spacing: -.01em; color: var(--ink-3); }
.lg-s { display: inline-flex; align-items: center; gap: 7px; font: 600 9.5px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.lg-s i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lg-s.ok { color: var(--ok); } .lg-s.chg { color: var(--change); } .lg-s.wt { color: #a3a09a; }
.lg-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; font: 600 9px/1.3 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: #a3a09a; }

/* the wall of boards, full bleed */
.matwall { height: 100vh; height: 100dvh; min-height: 560px; overflow: hidden; background: #1c1a17; color: #fff; }
.matwall .cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.matwall .col { position: relative; overflow: hidden; }
.matwall .col div { position: absolute; left: 0; right: 0; top: -12%; bottom: -12%; background: center/cover; transform: translate3d(0, var(--py, 0px), 0) scale(1.02);
  transition: filter .8s; will-change: transform; }
.matwall .col:hover div { filter: brightness(1.12); }
.matwall .col span { position: absolute; left: 18px; bottom: 18px; z-index: 2; font: 450 13px/1 var(--sans); opacity: .85; }
.matwall::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, .4)); pointer-events: none; }
.matwall .over { position: absolute; left: 0; right: 0; top: 50%; z-index: 3; transform: translateY(-50%); text-align: center; pointer-events: none; }
.matwall .over .label { color: rgba(255, 255, 255, .85); }
.matwall h2 { margin-top: 14px; font: 400 clamp(64px, 12vw, 200px)/.9 var(--sans); letter-spacing: -.06em; }
.float-card { position: absolute; right: var(--gut); bottom: var(--gut); z-index: 4; width: 280px; padding: 20px; background: #fff; color: var(--ink); }
.float-card p { font: 400 21px/1.15 var(--sans); letter-spacing: -.03em; max-width: calc(100% - 78px); }
.float-card a { display: inline-flex; gap: 8px; margin-top: 10px; color: var(--blue); font: 450 18px/1 var(--sans); letter-spacing: -.02em; }
.float-card a span { transition: transform .5s var(--out); }
.float-card a:hover span { transform: translateX(5px); }
.float-card .ft { position: absolute; right: 18px; bottom: 18px; width: 64px; height: 80px; background: url(/static/hero/photo/living-candle.jpg) center/cover;
  transform: rotate(6deg); box-shadow: 0 18px 18px -12px rgba(0, 0, 0, .4); opacity: 1; }

/* what changes for the studio */
.why { padding: 18vh var(--gut) 12vh; }
.why .lead { display: grid; grid-template-columns: 120px minmax(0, 760px); gap: 40px; align-items: center; padding-bottom: 12vh; margin-bottom: 10vh; border-bottom: 1px solid var(--rule); }
.why .lead .lt { width: 96px; height: 120px; background: url(/static/hero/photo/kitchen-mug.jpg) center/cover; transform: rotate(-6deg); box-shadow: 0 26px 26px -16px rgba(0, 0, 0, .35); }
.why .lead p { font: 400 clamp(30px, 3.4vw, 52px)/1.08 var(--sans); letter-spacing: -.04em; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.trio .t { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 18px; padding-bottom: 34px; border-bottom: 1px solid var(--rule); }
.trio h3 { font: 450 17px/1.3 var(--sans); letter-spacing: -.02em; }
.trio .t p { font: 400 15px/1.45 var(--sans); color: var(--ink-3); }
.trio .n { padding-top: 40px; }
.trio .n b { display: block; font: 300 clamp(80px, 9vw, 150px)/.9 var(--sans); letter-spacing: -.06em; transform-origin: left bottom; transition: transform 1.4s var(--out), opacity .6s; }
.js .trio .n b { transform: scaleX(.35) scaleY(1.4); opacity: 0; }
.js .trio .n.in b { transform: none; opacity: 1; }
.trio .n span { display: block; margin-top: 14px; font: 400 clamp(18px, 1.6vw, 24px)/1.2 var(--sans); letter-spacing: -.03em; color: var(--ink-3); }

/* what Enfilade does: plain headings, one line each */
.why-head { max-width: 920px; margin-bottom: 7vh; }
.why-head h2 { margin-top: 16px; font: 400 clamp(34px, 4.2vw, 62px)/1.05 var(--sans); letter-spacing: -.04em; }
.feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.feats li { position: relative; display: grid; gap: 10px; align-content: start; padding: 32px 28px 36px 0; border-bottom: 1px solid var(--rule); transition: background .4s; }
.feats li:not(:nth-child(3n)) { border-right: 1px solid var(--rule); }
.feats li:not(:nth-child(3n + 1)) { padding-left: 28px; }
.feats li:hover { background: linear-gradient(180deg, #fafaf8, transparent); }
.feats i { width: 42px; height: 42px; margin-bottom: 8px; border-radius: 12px; background: var(--tint); color: var(--ink); display: grid; place-items: center;
  transition: transform .6s var(--out), background .3s, color .3s; }
.feats li:hover i { transform: rotate(-6deg) scale(1.06); background: var(--ink); color: #fff; }
.feats i svg { width: 21px; height: 21px; }
.feats h3 { font: 450 21px/1.2 var(--sans); letter-spacing: -.025em; }
.feats p { max-width: 24em; font: 400 15px/1.5 var(--sans); letter-spacing: -.01em; color: var(--ink-2); }
.trio.nums { margin-top: 4vh; }
.trio.nums .n { padding-top: 40px; }

/* presentations that build themselves */
.deck { height: 340vh; border-top: 1px solid var(--rule); }
.dk-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 5vw; align-items: center;
  padding: 90px var(--gut) 40px; }
.dk-copy h2 { margin: 18px 0 22px; font: 400 clamp(38px, 4.4vw, 72px)/1.02 var(--sans); letter-spacing: -.045em; }
.dk-copy > p { max-width: 28em; font: 400 17px/1.55 var(--sans); color: var(--ink-2); }
.dk-list { list-style: none; margin: 34px 0 0; padding: 0; max-width: 380px; }
.dk-list li { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); font: 400 19px/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink-3);
  transition: color .4s, padding .6s var(--out); }
.dk-list li b { font: 500 11px/1 var(--sans); color: var(--ink-3); transition: color .4s; }
.dk-list li.on { color: var(--ink); padding-left: 8px; }
.dk-list li.on b { color: var(--blue); }
.slide-frame { position: relative; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; border-radius: 10px; background: #fbfaf7;
  box-shadow: 0 60px 110px -60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .05); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; color: #111110; }
.slide.on { opacity: 1; }
.slide .a { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 24px)) scale(.97); transition: opacity .6s, transform 1s var(--out); transition-delay: calc(var(--n, 0) * 90ms); }
.slide.on .a { opacity: 1; transform: none; }
.slide .ph, .slide .g1, .slide .g2, .slide .g3 { background: #e9e6e0 center/cover; }
.slide .mk { font: 500 1.5cqw/1 var(--mark); letter-spacing: .26em; }
.slide .tt { font: 300 5cqw/1 var(--display); letter-spacing: -.01em; }
.slide .it { font: italic 300 1.9cqw/1.25 var(--display); color: #4b4a47; }
.slide .sm { font: 600 1cqw/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: #9b9892; }
.cover-s .ph { position: absolute; left: 0; top: 0; bottom: 0; width: 48%; }
.cover-s .cv { position: absolute; left: 54%; right: 6%; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 2.2cqw; }
.cover-s .sm { margin-top: 3cqw; }
.plan-s { display: grid; place-items: center; }
.plan-s .hd { position: absolute; left: 5cqw; top: 4.5cqw; }
.plan-s svg { width: 74%; margin-top: 2cqw; }
.room-s .rc { position: absolute; left: 5cqw; top: 0; bottom: 0; width: 32%; display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw; }
.room-s .dots { display: flex; gap: .8cqw; margin-top: 1cqw; }
.room-s .dots s { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.room-s .kp { margin-top: 1.6cqw; width: 70%; display: grid; gap: .8cqw; }
.room-s .kp svg { width: 100%; height: auto; max-height: 15cqw; background: #fff; box-shadow: 0 0 0 1px #ecebe7; }
.room-s .kp span { font: 600 .85cqw/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: #9b9892; }
.kz { fill: rgba(163, 133, 90, .18); stroke: #a3855a; stroke-width: 5; stroke-dasharray: 14 9; }
.room-s .rg { position: absolute; left: 42%; right: 4cqw; top: 4cqw; bottom: 4cqw; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.2cqw; }
.room-s .g1 { grid-row: span 2; }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 16px; }
.thumbs i { aspect-ratio: 16 / 9; border-radius: 4px; background: #f1efea center/cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); opacity: .55; transition: opacity .4s, box-shadow .4s, transform .5s var(--out); }
.thumbs i.tp { display: grid; place-items: center; background: #fbfaf7; }
.thumbs i.tp svg { width: 78%; }
.thumbs i.on { opacity: 1; box-shadow: 0 0 0 2px var(--blue); transform: translateY(-3px); }
.dk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font: 450 14px/1 var(--sans); color: var(--ink-2); }
.dk-meta span:first-child { margin-right: auto; }
.dk-meta .chip { height: 30px; padding: 0 12px; border-radius: 99px; background: var(--tint); display: grid; place-items: center; font-size: 13px; color: var(--ink); }

/* versions and revisions */
.versions { padding: 18vh var(--gut) 16vh; background: var(--tint); }
.vs-head { max-width: 820px; }
.vs-head h2 { margin: 18px 0 22px; font: 400 clamp(38px, 4.4vw, 72px)/1.02 var(--sans); letter-spacing: -.045em; }
.vs-head > p { max-width: 32em; font: 400 17px/1.55 var(--sans); color: var(--ink-2); }
.vs-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 5vw; align-items: center; margin-top: 9vh; }
.compare { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; cursor: ew-resize; touch-action: pan-y; user-select: none; --cut: 50%;
  box-shadow: 0 60px 110px -60px rgba(0, 0, 0, .45); }
.cmp-a, .cmp-b { position: absolute; inset: 0; background: center/cover; }
.cmp-b { clip-path: inset(0 0 0 var(--cut)); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: #fff; }
.cmp-handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; font: 500 18px/1 var(--sans); letter-spacing: .1em; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45); transition: transform .4s var(--out); }
.compare:hover .cmp-handle::after { transform: scale(1.08); }
.cmp-l, .cmp-r { position: absolute; top: 16px; z-index: 2; height: 30px; padding: 0 12px; border-radius: 99px; background: rgba(13, 13, 13, .62); color: #fff;
  display: grid; place-items: center; font: 500 12.5px/1 var(--sans); backdrop-filter: blur(8px); }
.cmp-l { left: 16px; } .cmp-r { right: 16px; }
.cmp-note { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: flex; gap: 10px; max-width: 290px; padding: 12px 14px 13px 12px; border-radius: 14px 14px 14px 3px;
  background: #fff; font: 500 14px/1.35 var(--ui); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .45); }
.cmp-note > b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--change); color: #fff; display: grid; place-items: center; font: 700 12px/1 var(--ui); }
.cmp-note em { display: block; font: 600 10px/1.4 var(--ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #9b9892; }
.rounds { position: relative; list-style: none; margin: 0; padding: 0 0 0 28px; }
.rounds::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 1.5px; background: var(--rule); }
.rounds li { position: relative; display: grid; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--rule); transition: padding .5s var(--out); }
.rounds li::before { content: ""; position: absolute; left: -27px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--ink-3); }
.rounds li.ok::before { background: var(--ok); box-shadow: none; }
.rounds li:hover { padding-left: 8px; }
.rounds em { font: 500 11px/1 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.rounds li.ok em { color: var(--ok); }
.rounds b { font: 400 24px/1.15 var(--sans); letter-spacing: -.03em; }
.rounds span { font: 400 15px/1.4 var(--sans); color: var(--ink-3); }

/* anywhere: blue on the left, the places on the right */
.anywhere { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.anywhere .blue { position: relative; background: var(--blue); color: #fff; padding: 14vh var(--gut) var(--gut); display: flex; flex-direction: column; }
.anywhere h2 { font: 400 clamp(46px, 6vw, 100px)/.98 var(--sans); letter-spacing: -.05em; }
.anywhere .blue > p { margin-top: auto; max-width: 26em; font: 400 15px/1.45 var(--sans); color: rgba(255, 255, 255, .85); }
.anywhere .mini { margin: 6vh 0 6vh 34%; width: min(280px, 70%); padding: 18px; background: rgba(255, 255, 255, .14); }
.anywhere .mini p { font: 400 19px/1.2 var(--sans); letter-spacing: -.03em; }
.anywhere .mini a { display: inline-flex; gap: 8px; margin-top: 10px; font: 450 17px/1 var(--sans); }
.anywhere .mini a span { transition: transform .5s var(--out); }
.anywhere .mini a:hover span { transform: translateX(5px); }
.places { list-style: none; margin: 0; padding: 18vh var(--gut); display: grid; align-content: center; gap: 2.4vh; }
.places li { display: flex; align-items: center; justify-content: center; gap: 16px; font: 400 clamp(28px, 3.2vw, 50px)/1.1 var(--sans); letter-spacing: -.04em; will-change: opacity, filter, transform; }
.places li:nth-child(even) { flex-direction: row-reverse; }
.places li i { flex: none; width: 1.1em; height: 1.1em; border-radius: 6px; background: var(--tint) center/cover; display: grid; place-items: center; }
.places li i svg { width: 58%; height: 58%; }

/* in every book: the dark list */
.inside { background: #0b0b0c; color: #fff; padding: 20vh 0 18vh; }
.inside h2 { font: 400 clamp(48px, 7vw, 120px)/.95 var(--sans); letter-spacing: -.055em; max-width: 12em; }
.inside .label { color: rgba(255, 255, 255, .45); }
.rows { list-style: none; margin: 12vh 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.rows li { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12); cursor: default; }
.rows li::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .04); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--out); }
.rows li:hover::before { transform: none; }
.rows em { font: 400 clamp(22px, 2.2vw, 34px)/1 var(--sans); font-style: normal; color: rgba(255, 255, 255, .35); letter-spacing: -.03em; }
.rows b { font: 400 clamp(26px, 3vw, 46px)/1.05 var(--sans); letter-spacing: -.04em; transition: transform .6s var(--out); }
.rows li:hover b { transform: translateX(14px); }
.rows p { font: 400 15px/1.5 var(--sans); color: rgba(255, 255, 255, .55); max-width: 26em; }
.peek { position: fixed; left: 0; top: 0; z-index: 30; width: 260px; height: 200px; pointer-events: none; border-radius: 6px; overflow: hidden; background: #1c1c1e;
  opacity: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(.85) rotate(-4deg); transition: opacity .35s, transform .5s var(--out); }
.peek.on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1) rotate(-2deg); }
.peek > div { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.peek > div.on { opacity: 1; }
.pk-board { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; padding: 4px; background: #fff; }
.pk-board s { background: center/cover; text-decoration: none; }
.pk-board s:first-child { grid-row: span 2; }
.pk-heart { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #d0473b; display: grid; place-items: center; font-size: 18px; }
.pk-note { position: absolute; left: 12px; right: 30px; bottom: 12px; padding: 10px 12px; border-radius: 12px 12px 12px 3px; background: #fff; color: #111; font: 500 13px/1.3 var(--ui); }
.pk-ok { position: absolute; left: 30px; right: 30px; top: 76px; height: 48px; border-radius: 3px; background: var(--ok); color: #fff; display: grid; place-items: center;
  font: 600 11px/1 var(--ui); letter-spacing: .2em; }
.pk-mark { position: absolute; inset: 0; display: grid; place-items: center; color: #111; font: 500 20px/1 var(--mark); letter-spacing: .26em; }

/* the big grey sentence that fills in as you read */
.say-big { padding: 22vh 0; background: var(--tint); }
.say-big p { font: 400 clamp(46px, 7.2vw, 120px)/.98 var(--sans); letter-spacing: -.055em; color: #c4c4c0; }
.say-big .w { transition: color .4s; }
.say-big .w.on { color: var(--ink); }

/* questions */
.faq { padding: 18vh var(--gut) 14vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 6vw; }
.faq h2 { font: 400 clamp(40px, 4.4vw, 70px)/1 var(--sans); letter-spacing: -.045em; position: sticky; top: 110px; align-self: start; }
.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0;
  font: 400 clamp(19px, 1.6vw, 24px)/1.25 var(--sans); letter-spacing: -.025em; transition: color .3s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--blue); }
.qa summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--tint); color: var(--ink); transition: background .3s, color .3s; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 11px; right: 11px; top: 16px; height: 1.5px; background: currentColor; }
.qa summary i::after { transform: rotate(90deg); transition: transform .5s var(--out); }
.qa details[open] summary i { background: var(--blue); color: #fff; }
.qa details[open] summary i::after { transform: rotate(0); }
.qa .ans { overflow: hidden; }
.qa .ans p { padding: 0 60px 28px 0; font: 400 16px/1.6 var(--sans); color: var(--ink-2); }

/* the end */
.end { padding-top: 14vh; overflow: hidden; }
.end .top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4vw; align-items: center; }
.end h2 { font: 400 clamp(40px, 4.6vw, 76px)/1.02 var(--sans); letter-spacing: -.045em; }
.end .act { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.end .act a.text-link { font-size: 15px; }
/* register interest: three soft fields and the pill, a line of thanks once it's in */
.interest { margin-top: 34px; max-width: 560px; }
.in-lead { margin: 0 0 16px; font: 400 16px/1.5 var(--sans); letter-spacing: -.01em; color: var(--ink-2); }
.in-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.in-fields .in-wide { grid-column: 1 / -1; }
.in-fields input { width: 100%; height: 50px; padding: 0 18px; border: 1px solid transparent; border-radius: 100px; background: #f4f4f2; color: var(--ink);
  font: 400 16px/1 var(--sans); letter-spacing: -.01em; outline: none; transition: background .2s, border-color .2s, box-shadow .2s; }
.in-fields input::placeholder { color: #9b9b97; }
.in-fields input:hover { background: #efefec; }
.in-fields input:focus { background: #fff; border-color: #cfcbc3; box-shadow: 0 0 0 4px rgba(13, 13, 13, .05); }
.interest .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.in-act { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 14px; }
.in-act .pill-btn { border: 0; cursor: pointer; font-family: inherit; }
.in-act .pill-btn:disabled { opacity: .6; cursor: default; }
.in-alt { font: 400 15px/1 var(--sans); color: var(--ink-3); }
.in-alt .text-link { color: var(--ink); }
.in-msg { min-height: 1.4em; margin: 12px 0 0; font: 400 14.5px/1.4 var(--sans); color: var(--ink-2); }
.in-msg.err { color: #b5643f; }
.interest.sent .in-fields, .interest.sent .in-act { display: none; }
.interest.sent .in-msg { margin-top: 4px; padding: 16px 20px; border-radius: 16px; background: #f4f4f2; color: var(--ink); font-size: 16px; }
.collage { position: relative; height: min(52vw, 560px); }
.collage div { position: absolute; background: center/cover; border-radius: 3px; box-shadow: 0 40px 50px -28px rgba(0, 0, 0, .45);
  transform: translate3d(0, var(--py, 0px), 0) rotate(var(--r)); transition: box-shadow .6s; }
.collage div:hover { box-shadow: 0 60px 60px -30px rgba(0, 0, 0, .5); }
.end .base { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 8vh; padding-bottom: 18px; }
.end .word { font: 400 clamp(72px, 15.6vw, 290px)/.78 var(--sans); letter-spacing: -.07em; margin-left: -.04em; white-space: nowrap; }
.end .small { display: grid; justify-items: end; gap: 6px; padding-bottom: 1vw; font: 400 13px/1.4 var(--sans); color: var(--ink-3); text-align: right; }
.end .legal { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.end .legal a { color: inherit; text-decoration: none; transition: color .3s; }
.end .legal a:hover { color: var(--ink); }
.end .pages { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; margin-bottom: 6px; }
.end .pages a { color: var(--ink-2); transition: color .3s; }
.end .pages a:hover, .end .pages a[aria-current] { color: var(--ink); }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 1100px) {
  .receipt { display: none; }
}
/* ---- tall screens (iPad upright, phones): the scroll scene centres the phone, the words sit above it */
@media (max-width: 860px), (orientation: portrait) and (max-width: 1100px) {
  .cards { max-height: min(470px, 58svh); }
  .hero-flow { top: 76px; gap: 32px; }
  h1 { font-size: clamp(28px, min(8vw, 5.4svh), 56px); }
  .card b { font-size: 20px; }
  /* the words sit just above the phone (its top is 57% minus half its height), not up at the top of the screen */
  .say { left: var(--gut); right: var(--gut); top: auto; bottom: calc(43% + (844px * var(--s) + 9px) / 2 + 18px); width: auto; transform: none;
    text-align: center; font-size: clamp(22px, 5vw, 38px); }
  .side-r, .receipt, .qr, .scroll-hint { display: none; }
  .phone { top: 57%; --bz: 4.5px; box-shadow: 0 50px 90px -46px rgba(0, 0, 0, .45), inset 0 0 0 1px #2a2a2a; }
  .phone::before, .phone::after { width: 2.5px; }
  .phone::before { left: -2px; } .phone::after { right: -2px; }
  .t-note { display: none; }
  .statement { top: 84px; font-size: clamp(30px, 6.4vw, 56px); max-width: none; }
  .steps { left: 50%; transform: translateX(-50%); bottom: 14px; }
  .peek { display: none; }
}
/* Narrower than the full bar (an iPad upright, a phone): the links go in a menu under the pill */
.nav .menu-btn { display: none; }
@media (max-width: 900px) {
  .nav .bar, .nav .links { display: none; }
  .nav .menu-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 13px; border: 0; border-radius: 100px;
    background: rgba(255, 255, 255, .16); color: #fff; font: 450 15px/16px var(--sans); letter-spacing: -.03em; cursor: pointer;
    transition: background .3s var(--out); -webkit-tap-highlight-color: transparent; }
  .nav .menu-btn:active { background: rgba(255, 255, 255, .26); }
  .nav .mb-ico { position: relative; width: 16px; height: 16px; }
  .nav .mb-ico i { position: absolute; left: 1px; right: 1px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .45s var(--out), top .45s var(--out); }
  .nav .mb-ico i:first-child { top: 5px; }
  .nav .mb-ico i:last-child { top: 10px; }
  .nav .menu-btn[aria-expanded=true] .mb-ico i:first-child { top: 7.5px; transform: rotate(45deg); }
  .nav .menu-btn[aria-expanded=true] .mb-ico i:last-child { top: 7.5px; transform: rotate(-45deg); }
}
@media (max-width: 480px) {                     /* a phone: the icon alone keeps the pill compact */
  .nav-in { gap: 8px; }
  .nav .menu-btn { width: 40px; padding: 0; justify-content: center; }
  .nav .mb-t { display: none; }
}
.nav-menu { position: absolute; top: 58px; left: 16px; right: 16px; margin: 0 auto; max-width: 420px; pointer-events: auto; padding: 8px;
  border-radius: 26px; background: #020109; color: #fff; box-shadow: 0 24px 60px -20px rgba(2, 1, 9, .55);
  transform-origin: 50% 0; animation: navMenu .45s var(--out) both; }
.nav-menu[hidden] { display: none; }
.nav-menu.closing { animation: navMenuOut .2s ease both; }
@keyframes navMenu { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes navMenuOut { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
.nav-menu a { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 18px; border-radius: 18px;
  font: 450 17px/1 var(--sans); letter-spacing: -.02em; color: #fff; text-decoration: none; opacity: 0; animation: navItem .45s var(--out) forwards; }
.nav-menu a:nth-child(2) { animation-delay: .03s; } .nav-menu a:nth-child(3) { animation-delay: .06s; } .nav-menu a:nth-child(4) { animation-delay: .09s; }
.nav-menu a:nth-child(5) { animation-delay: .12s; } .nav-menu a:nth-child(6) { animation-delay: .15s; }
@keyframes navItem { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nav-menu a:active, .nav-menu a:hover { background: rgba(255, 255, 255, .08); }
.nav-menu a.on { background: rgba(255, 255, 255, .14); }
.nav-menu a em { font-style: normal; color: rgba(255, 255, 255, .45); font-size: 15px; }
.nav-menu a.on em { color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .nav-menu, .nav-menu a, .nav-menu.closing { animation: none; opacity: 1; } }

/* ---- iPad upright and phones: every section in a single column, nothing side by side */
@media (max-width: 860px), (orientation: portrait) and (max-width: 1100px) {
  .thread { height: 300vh; }
  .th-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 24px; padding-top: 90px; align-items: start; }
  .th-copy { max-width: 34em; }
  .th-stage { height: 100%; align-items: start; }
  .chat { top: 0; margin-top: 0; transform-origin: 50% 0; }
  .ledger { top: 0; translate: -50% 0; transform-origin: 50% 0; }
  .why .lead { grid-template-columns: 1fr; gap: 26px; padding-bottom: 8vh; margin-bottom: 6vh; }
  .feats { grid-template-columns: 1fr; }
  .feats li, .feats li:not(:nth-child(3n + 1)) { padding: 24px 0 26px; border-right: 0 !important; grid-template-columns: 42px minmax(0, 1fr); column-gap: 18px; }
  .feats li i { grid-row: span 2; margin-bottom: 0; }
  .trio { grid-template-columns: 1fr; gap: 0; }
  .trio .t { grid-template-columns: 1fr; gap: 6px; padding-top: 22px; }
  .trio .n { padding: 26px 0 30px; }
  .deck { height: 300vh; }
  .dk-pin { grid-template-columns: 1fr; gap: 26px; padding-top: 90px; align-content: center; }
  .dk-stage { width: min(100%, calc((100svh - 380px) * 1.6)); justify-self: center; }
  .versions { padding-top: 12vh; }
  .vs-body { grid-template-columns: 1fr; margin-top: 6vh; }
  .anywhere { grid-template-columns: 1fr; min-height: 0; }
  .anywhere .blue { min-height: 0; padding: 12vh var(--gut) 8vh; }
  .anywhere .mini { margin: 5vh 0; width: min(100%, 420px); }
  .places { padding: 10vh var(--gut); gap: 2vh; }
  .inside { padding: 14vh 0 12vh; }
  .rows { margin-top: 8vh; }
  .rows li { grid-template-columns: 60px minmax(0, 1fr); padding: 26px 0; }
  .rows p { grid-column: 2; }
  .say-big { padding: 14vh 0; }
  .faq { grid-template-columns: 1fr; gap: 30px; padding-top: 12vh; }
  .faq h2 { position: static; }
  .qa .ans p { padding-right: 0; }
  .end .top { grid-template-columns: 1fr; }
  .collage { height: min(90vw, 620px); }
  .end .base { flex-direction: column-reverse; align-items: flex-start; }
  .end .small { justify-items: start; text-align: left; }
  .end .pages { justify-content: flex-start; }
}

@media (max-width: 860px) and (max-height: 900px), (orientation: portrait) and (max-width: 1100px) and (max-height: 900px) {
  .th-p { display: none; }          /* shorter screens: the headline carries it, the phone gets the room */
}

/* ---- iPad upright: one column too, but with an iPad's scale (bigger type, wider cards) */
@media (min-width: 641px) and (max-width: 860px), (orientation: portrait) and (min-width: 641px) and (max-width: 1100px) {
  .hero-flow { justify-content: center; gap: 44px; padding-bottom: 40px; }
  .cards { max-height: calc(34vw * 1.38); }
  .card { width: 34vw; }
  .card .cap { font-size: 15px; }
  .finale { gap: 10px; }
  .finale li { width: calc((100vw - 2 * var(--gut) - 30px) / 4); height: min(40svh, 380px); padding: 14px; }
  .finale b { font-size: 19px; white-space: normal; }
  .finale .nb { font-size: 12px; padding: 8px 10px; }
  .th-h { font-size: clamp(32px, 5.2vw, 54px); }
  .th-p { font-size: 17px; }
  .why { padding-top: 14vh; }
  .why .lead p { font-size: clamp(32px, 4.8vw, 50px); }
  .dk-copy h2 { margin-bottom: 14px; }
  .dk-copy > p { max-width: 36em; }
  .dk-list { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; margin-top: 22px; }
  .dk-list li { padding: 9px 14px; border: 0; border-radius: 100px; background: var(--tint); font-size: 15px; }
  .dk-list li.on { padding-left: 14px; background: var(--ink); color: #fff; }
  .dk-list li.on b { color: rgba(255, 255, 255, .6); }
  .vs-head h2, .faq h2, .end h2 { font-size: clamp(40px, 6vw, 60px); }
  .rounds { margin-top: 3vh; }
  .anywhere h2 { font-size: clamp(48px, 8vw, 80px); }
  .places li { font-size: clamp(30px, 5vw, 46px); }
  .rows b { font-size: clamp(30px, 4.6vw, 42px); }
}

@media (min-width: 641px) and (max-width: 860px) and (max-height: 900px) {
  .dk-copy > p { display: none; }
  .dk-pin { gap: 22px; padding-top: 84px; }
}

/* ---- iPad (either way up): just the phone in the scene, no images around it, for a calmer, focused stage */
@media (min-width: 641px) and (max-width: 860px), (pointer: coarse) and (min-width: 641px) {
  .board { display: none; }
  .strip { display: block; }
}

/* ---- phones: the hero's rooms become a swipeable row; the ending a 2 x 2 grid; tighter type */
@media (max-width: 640px) {
  .in-fields { grid-template-columns: 1fr; }
  .in-act .pill-btn { width: 100%; justify-content: center; }
  h1 .ln { display: inline; }
  .hero-flow { justify-content: center; padding-bottom: 36px; }
  /* sideways only: the cards rise in from below, and a row that could also scroll up and down kept that offset when swiped */
  .cards { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 var(--gut);
    scroll-padding: 0 var(--gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cards::-webkit-scrollbar { display: none; }
  .cards { flex: none; height: calc(66vw * 1.32); max-height: 56svh; }
  .card { width: 66vw; scroll-snap-align: start; }
  .mbx { width: 66%; max-height: 64%; margin-top: 22px; }
  .mbx .m2 { border-width: 2px; }
  .card .go { top: 18px; }
  .finale { left: var(--gut); right: var(--gut); bottom: 60px; transform: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .statement { top: auto; bottom: calc(60px + 2 * min(27svh, 230px) + 10px + 26px); }
  .finale li { width: auto; height: min(27svh, 230px); padding: 12px; gap: 8px; }
  .finale b { font-size: 17px; white-space: nowrap; }
  .finale .st { font-size: 8.5px; letter-spacing: .14em; }
  .finale em { font-size: 12px; }
  .finale .nb { display: none; }
  .finale .stamp { width: 28px; height: 28px; font-size: 14px; right: 8px; bottom: 8px; }
  .th-pin { gap: 20px; padding-top: 84px; }
  .th-h { font-size: clamp(28px, 7.6vw, 40px); }
  .th-p { font-size: 15px; margin-top: 12px; }
  .matwall .cols { grid-template-columns: repeat(3, 1fr); }
  .matwall .col:nth-child(n+4) { display: none; }
  .matwall h2 { font-size: 15vw; }
  .float-card { left: var(--gut); right: var(--gut); width: auto; }
  .why { padding-top: 12vh; }
  .dk-pin { gap: 24px; padding-top: 84px; }
  .dk-copy > p, .dk-list { display: none; }
  .dk-copy h2 { margin-bottom: 0; }
  .dk-meta .chip { display: none; }
  .places li { font-size: 28px; }
  .rows li { grid-template-columns: 44px minmax(0, 1fr); padding: 24px 0; }
  .collage { height: 90vw; }
}
@media (prefers-reduced-motion: reduce) {
  .ch, .js .split-w .w, .js .rv, .statement .w, .m, .lg-row, .slide .a { transition: none !important; filter: none !important; }
  .mouse i, .caret, .track { animation: none !important; }
  .loader { display: none; }
}

/* touch screens: the pinned scenes move one step at a time (a flick lands on the next moment, never races past) */
.snap-at { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
html.snap { scroll-snap-type: y mandatory; }

/* the live example under "What your client sees" */
.live-demo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; }
.live-demo p { margin: 0; max-width: 340px; font: 400 14px/1.45 var(--sans); color: rgba(255, 255, 255, .55); }

/* ---- moving between pages (home, the pilot form, the studio, the legal pages): the page eases away and the next one
   rises in, while the mark, the headline and the button pressed glide across. Browsers without cross-page view
   transitions simply navigate. Each page sets html[data-vt=nav] as it is revealed (pagereveal). */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
html[data-vt=nav]::view-transition-old(root) { animation: rbNavOut .3s cubic-bezier(.4, 0, 1, 1) both; }
html[data-vt=nav]::view-transition-new(root) { animation: rbNavIn .55s cubic-bezier(.2, .8, .2, 1) .1s both; }
html[data-vt=nav]::view-transition-group(rb-mark), html[data-vt=nav]::view-transition-group(rb-title),
html[data-vt=nav]::view-transition-group(rb-door) { animation-duration: .62s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
html[data-vt=nav]::view-transition-old(rb-door) { animation: rbNavFade .22s ease both; }               /* the button gives way to the card */
html[data-vt=nav]::view-transition-new(rb-door) { animation: rbNavFade .42s ease .14s reverse both; }
@keyframes rbNavOut { to { opacity: 0; transform: scale(.992); } }
html[data-vt=nav]::view-transition-group(rb-nav) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(rb-nav), ::view-transition-new(rb-nav) { width: 100%; height: 100%; object-fit: none; }   /* the header crossfades in place, crisp, never stretched */
html[data-vt=nav]::view-transition-old(rb-nav) { animation: rbNavFade .16s ease both; }
html[data-vt=nav]::view-transition-new(rb-nav) { animation: rbNavFade .3s ease .12s reverse both; }
@keyframes rbNavIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes rbNavFade { to { opacity: 0; } }
/* the header is its own layer across pages; what else carries across is set just before the page goes (home.js) */
.nav { view-transition-name: rb-nav; }
.vt-mark { view-transition-name: rb-mark; }
.vt-title { view-transition-name: rb-title; }
.vt-door { view-transition-name: rb-door; }