/* FullPort Media v5, direction A: "Through the O".
   One object (the gold ring) is the interface: you arrive through it, it docks as a dial, it irises between rooms.
   Without JavaScript this file lays every room out as one plain, complete page; html.js turns the rooms into
   full-screen places. On touch screens everything that moves is transform or opacity. */

:root {
  --paper: #F2EDE3; --paper-2: #E8E1D2; --ink: #14120E; --ink-2: #26221B;
  --gold: #D2A01E; --gold-ink: #7A5A0E;
  --muted: #5C574C; --muted-on-ink: #B5AE9F; --rule: rgba(20, 18, 14, .16); --rule-on-ink: rgba(242, 237, 227, .2);
  --f-d: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --f-t: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* five sizes */
  --t-xl: clamp(2.5rem, 1.35rem + 5.4vw, 5.6rem);
  --t-l: clamp(1.75rem, 1.35rem + 1.9vw, 2.9rem);
  --t-m: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  --t-b: 1.0625rem;
  --t-s: .9375rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(20px, 5vw, 72px);
  --top-h: 60px;
  --dock-h: calc(120px + env(safe-area-inset-bottom, 0px));
  --k: 1; --dial: 0px; --inset: var(--pad);
  --fg: var(--ink); --bg: var(--paper); --soft: var(--muted); --line: var(--rule); --accent: var(--gold-ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-b)/1.5 var(--f-t); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.tel { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* a room's heading takes focus when you arrive in it (so a screen reader starts there). It is never a Tab stop, and
   Safari counts that scripted focus as "visible" after a tap: it must not draw the gold box round the headline */
[data-h]:focus, [data-h]:focus-visible { outline: none; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--ink); color: var(--paper); border-radius: 8px; }
.skip:focus { top: 12px; }

.t-xl { font: 700 var(--t-xl)/.96 var(--f-d); letter-spacing: -.035em; text-wrap: balance; }
.t-l { font: 700 var(--t-l)/1.02 var(--f-d); letter-spacing: -.028em; text-wrap: balance; }
.t-m { font: 400 var(--t-m)/1.36 var(--f-t); letter-spacing: -.01em; }

/* buttons: ink pill that carries the O */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px 0 26px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 var(--t-b)/1 var(--f-t); text-decoration: none; white-space: nowrap; transition: transform .3s var(--ease); }
.btn::after { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 5px solid var(--gold); transition: transform .45s var(--ease); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold::after { border-color: var(--ink); }
.btn:active { transform: scale(.97); }
@media (hover: hover) { .btn:hover::after { transform: scale(1.35); } }
.btn[disabled] { opacity: .6; cursor: default; }
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* themes */
[data-theme="ink"] { --fg: var(--paper); --bg: var(--ink); --soft: var(--muted-on-ink); --line: var(--rule-on-ink); --accent: var(--gold); }

/* ---------- the top corners: the wordmark (home) and call or text ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--top-h); padding: 0 var(--pad); color: var(--ink); }
.top__logo { display: flex; align-items: center; min-height: 44px; }
.top__logo svg { height: 17px; width: auto; }
.top__call { display: flex; align-items: center; gap: 4px; font: 600 var(--t-s)/1 var(--f-t); }
.top__call a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: none; }
.top__lab { font-weight: 400; margin-right: .4em; }
.top__num { display: none !important; }
.top__tap + .top__tap { border-left: 1px solid currentColor; }
@media (min-width: 760px) {
  .top__num { display: inline-flex !important; }
  .top__tap { display: none !important; }
  .top__logo svg { height: 20px; }
}

/* ---------- rooms: plain page first (the page's own room leads) ---------- */
.rooms { display: flex; flex-direction: column; }
.room[data-is-first] { order: -1; }
.room { position: relative; background: var(--bg); color: var(--fg); }
.room + .room { border-top: 1px solid var(--rule); }
.scn, .start, .ty, .legal { padding: clamp(40px, 8vw, 96px) var(--pad); max-width: 1320px; margin: 0 auto; }
/* ---------- scenes: each room is one or two ideas in big type and real material, never a list ---------- */
.scn { position: relative; }
.lead__words > * + *, .lead__say > * + *, .rev__words > * + *, .sys__words > * + *, .own__words > * + *, .end > * + *, .price__say > * + * { margin-top: 18px; }
.lead__say { margin-top: 26px; }
.talk__form .lead__line { margin-bottom: 22px; }
.lead__line { max-width: 34ch; color: var(--soft); }
.rev__words p, .sys__words p, .own__words p, .end .t-m { max-width: 36ch; color: var(--soft); }
.scn .btn + .link { margin-left: 18px; }
.end { margin-top: clamp(44px, 8vw, 80px); }
/* websites: a client page at work, on a computer and a phone */
.web__stage { display: block; position: relative; margin-top: 30px; padding: 0 8% 9% 0; text-decoration: none; }
.frame { display: block; position: relative; overflow: hidden; background: var(--ink-2); }
/* the travelling picture is taken out of flow: WebKit grows an absolutely positioned aspect-ratio box to the height of
   its in-flow content (the whole tall screenshot), Chromium does not. With nothing in flow both use the ratio */
.frame img, .shot img { position: absolute; left: 0; top: 0; }
.frame img { width: 100%; height: auto; }
.frame--d { aspect-ratio: 16 / 10; border-radius: 12px; box-shadow: 0 0 0 1px var(--rule), 0 34px 60px -42px rgba(20, 18, 14, .6); }
.frame--m { position: absolute; right: 6px; bottom: 0; width: 27%; aspect-ratio: 400 / 840; border-radius: 14px; box-shadow: 0 0 0 1px var(--rule), 0 0 0 5px var(--ink), 0 24px 44px -24px rgba(20, 18, 14, .6); }
/* the live reviews: Origin Gym's own block; the ring lands on the rating */
.rev__frame { position: relative; margin-top: 26px; overflow: hidden; border-radius: 12px; background: #0A0915; }
.rev__pan { position: relative; }
.rev__pan img { width: 100%; height: auto; }
.rev__ring { position: absolute; left: 13.7%; top: 24.8%; width: 9%; aspect-ratio: 1; margin: -4.5% 0 0 -4.5%; border-radius: 50%; border: 5px solid var(--gold); }
.say__act { margin-top: 30px; }
/* the system: seven pieces, one at a time */
.turn { position: relative; margin-top: 30px; }
.turn__list > li + li { margin-top: 18px; }
.turn__name { font: 700 var(--t-l)/1.08 var(--f-d); letter-spacing: -.028em; }
.turn__say { margin-top: 4px; max-width: 40ch; color: var(--soft); }
.turn__ring { display: none; }
/* pricing: the terms, then the ownership sheet the ring seals */
.terms { font: 700 var(--t-xl)/.98 var(--f-d); letter-spacing: -.035em; }
.terms li { text-wrap: balance; }
.terms li + li { margin-top: .22em; }
.price__say { margin-top: 30px; }
.price__say .t-m { max-width: 34ch; color: var(--soft); }
.deed { position: relative; max-width: 480px; margin: 30px 14px 54px 4px; padding: 6px 22px 58px; border-radius: 6px; background: #FBF8F1; color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 30px 50px -36px rgba(20, 18, 14, .5); transform: rotate(-1.2deg); }
.deed__rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0 14px; }
.deed__rows li + li { border-top: 1px solid var(--rule); }
.deed__what { font: 400 var(--t-m)/1.2 var(--f-t); }
.deed__who { position: relative; padding: 0 .12em .14em; font: 700 var(--t-l)/1 var(--f-d); letter-spacing: -.028em; color: var(--gold-ink); }
.deed__who::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--gold); transform-origin: 0 50%; }
.deed__seal { position: absolute; right: 16px; bottom: -34px; width: 84px; height: 84px; color: var(--gold); }
/* about: two names and the ring between them */
.pair { margin-top: 34px; }
.pair__p p { margin-top: 6px; color: var(--soft); }
.pair__ring, .name__ring { display: block; width: 56px; height: 56px; border-radius: 50%; border: 14px solid var(--gold); }
.pair__ring { margin: 20px 0 16px; }
.name__t { margin-top: 22px; max-width: 24ch; }
/* contact: the number is the headline */
.direct__num { display: inline-block; font: 700 var(--t-xl)/1 var(--f-d); letter-spacing: -.035em; text-decoration: none; }
.direct__taps { display: flex; flex-wrap: wrap; gap: 10px; }
.direct__mail { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-m); text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.talk__form { margin-top: 36px; }
.foot { padding: 32px var(--pad) 48px; font-size: var(--t-s); color: var(--muted); border-top: 1px solid var(--rule); }
.foot p + p { margin-top: 8px; }
.foot a { display: inline-block; padding: 10px 2px; }

/* the dial as a plain list (no JS) */
.dial { padding: 4px var(--pad) 16px; }
.dial__list { display: flex; flex-wrap: wrap; gap: 0 20px; font-weight: 600; }
.dial__list a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.dial__knob, .dial__face { display: none; }

/* home, plain */
.room--home { background: var(--ink); color: var(--paper); overflow: hidden; }
.wall { position: absolute; inset: 0; overflow: hidden; }
.wall__tilt { position: absolute; left: 50%; top: 50%; display: flex; gap: 12px; width: 124vw; height: 130%; transform: translate(-50%, -50%) rotate(-7deg); }
.wall__col { flex: 1 1 0; min-width: 0; }
.wall__col--4, .wall__col--5 { display: none; }
.wall__run img { width: 100%; height: auto; margin-bottom: 12px; border-radius: 8px; }
.veil { position: absolute; inset: 0; background: var(--ink); opacity: .86; }
.home__in { position: relative; padding: clamp(56px, 10vw, 120px) var(--pad); }
.home__h { font: 700 var(--t-xl)/.96 var(--f-d); letter-spacing: -.035em; }
.door { display: block; width: fit-content; max-width: 14ch; padding: 6px 0; text-decoration: none; text-wrap: balance; }
.door + .door { margin-top: .12em; }
.door__t { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 .07em no-repeat; }
.door:nth-child(2) .door__t { color: var(--gold); }
.home__line { margin-top: 18px; max-width: 38ch; font-size: var(--t-b); color: #F2EDE3; }
.home__cta { margin-top: 22px; }

/* work, plain */
.names { display: none; }
.cases { padding: clamp(40px, 8vw, 96px) var(--pad); display: grid; gap: 56px; }
.case__line { margin-top: 8px; font-weight: 600; }
.case__note { margin-top: 6px; max-width: 40ch; color: var(--soft); }
.case__act { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.case__stage { position: relative; margin-top: 24px; }
.shot { display: block; position: relative; overflow: hidden; border-radius: 12px; background: var(--paper-2); box-shadow: 0 0 0 1px var(--rule); }
.shot img { width: 100%; height: auto; }
.shot--d { aspect-ratio: 16 / 10; width: 100%; }
.shot--m { display: none; }

/* the call, plain */
.call { position: relative; padding: clamp(40px, 8vw, 96px) var(--pad) 32px; max-width: 1320px; margin: 0 auto; }
.call__line { margin-top: 18px; color: var(--soft); max-width: 30ch; }
.call__night { display: none; }
.call__beats { margin-top: 28px; display: grid; gap: 12px; max-width: 44ch; font-size: var(--t-m); line-height: 1.3; }
.call__time { display: block; font: 700 var(--t-b)/1.4 var(--f-t); letter-spacing: 0; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.call__fig { margin-top: 32px; }
.call__ctl { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 0 22px; }

/* the example phone (an iPhone Messages thread), from v4, restaged: the call is a banner that drops (transform) */
.sms { --pw: min(310px, 82vw); --sent: #207E37; width: var(--pw); margin-inline: auto; padding: calc(var(--pw) * .034); border-radius: calc(var(--pw) * .15); background: #0c0c0d; box-shadow: 0 0 0 1.5px #2b2a28, 0 0 0 3px #c9c1b1; container-type: inline-size; }
.sms__screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 9 / 18.6; border-radius: calc(var(--pw) * .12); overflow: hidden; background: #000; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; font-size: 4.1cqw; line-height: 1.3; }
.sms__status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 12cqw; padding: 1.8cqw 7.5cqw 0 9cqw; flex: none; }
.sms__clock { font-weight: 600; font-size: 4.3cqw; font-variant-numeric: tabular-nums; }
.sms__pill { position: absolute; left: 50%; top: 2.6cqw; width: 29cqw; height: 8.4cqw; margin-left: -14.5cqw; border-radius: 4.2cqw; background: #000; box-shadow: inset 0 0 0 1px #1c1c1c; }
.sms__icons { display: flex; align-items: center; gap: 1.5cqw; }
.sms__icons svg { height: 3.2cqw; width: auto; fill: currentColor; }
.sms__banner { position: absolute; z-index: 3; left: 3cqw; right: 3cqw; top: 2.6cqw; height: 17cqw; display: flex; align-items: center; gap: 2.4cqw; padding: 0 2.8cqw; border-radius: 6cqw; background: #000; box-shadow: 0 0 0 1px #2a2a2a; opacity: 0; transform: translateY(-40%) scale(.5, .6); transform-origin: 50% 0; transition: transform .5s var(--ease), opacity .25s linear; }
.call[data-beat="0"] .sms__banner { opacity: 1; transform: none; }
.isl__av { flex: none; display: grid; place-items: end center; width: 11.4cqw; height: 11.4cqw; border-radius: 50%; overflow: hidden; background: #6c6c72; }
.isl__av svg { width: 8.4cqw; height: auto; fill: #c7c7cc; }
.isl__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3cqw; line-height: 1.15; }
.isl__label { font-size: 2.9cqw; color: #8e8e93; }
.isl__num { font-size: 4cqw; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.isl__btn { flex: none; display: grid; place-items: center; width: 11.4cqw; height: 11.4cqw; border-radius: 50%; }
.isl__btn svg { width: 5.6cqw; height: 5.6cqw; fill: #fff; }
.isl__btn--no { background: #ff3b30; }
.isl__btn--no svg { transform: rotate(135deg); }
.isl__btn--yes { background: #34c759; }
@keyframes isl-ring { 0%, 40%, 100% { transform: rotate(0deg); } 5%, 15%, 25%, 35% { transform: rotate(-11deg); } 10%, 20%, 30% { transform: rotate(11deg); } }
.call[data-beat="0"] .isl__ring { animation: isl-ring .9s linear .3s infinite; }
@keyframes sms-buzz { 0%, 100% { transform: none; } 20% { transform: translateX(-1.2%) rotate(-.5deg); } 40% { transform: translateX(1.2%) rotate(.5deg); } 60% { transform: translateX(-.9%) rotate(-.3deg); } 80% { transform: translateX(.9%) rotate(.3deg); } }
.call[data-beat="0"] .sms { animation: sms-buzz .42s linear .35s 5; }
.sms__head { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; padding: 1.2cqw 4cqw 2.6cqw; background: #121212; border-bottom: 1px solid #222; }
.sms__avatar { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%; background: #6c6c72; font-size: 3.8cqw; font-weight: 600; }
.sms__name { margin-top: 1cqw; font-size: 3.3cqw; font-weight: 600; }
.sms__sub { margin-top: .3cqw; font-size: 2.8cqw; color: #8e8e93; font-variant-numeric: tabular-nums; }
.sms__thread { flex: 1; display: flex; flex-direction: column; gap: 1.4cqw; padding: 3cqw 3.6cqw 2cqw; }
.sms__sep { align-self: center; font-size: 2.8cqw; color: #8e8e93; font-weight: 500; }
.sms__event { align-self: center; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.2cqw 3cqw; border-radius: 4cqw; background: #1c1c1e; font-size: 2.9cqw; color: #c7c7cc; margin-bottom: 1.2cqw; }
.sms__event svg { width: 3cqw; height: 3cqw; color: #ff453a; }
.msg { display: flex; flex-direction: column; max-width: 80%; }
.msg--out { align-self: flex-end; align-items: flex-end; }
.msg--in { align-self: flex-start; align-items: flex-start; }
.msg__b { padding: 2cqw 3.5cqw 2.2cqw; border-radius: 5cqw; font-size: 4.1cqw; line-height: 1.26; }
.msg--out .msg__b { background: var(--sent); border-bottom-right-radius: 1.6cqw; }
.msg--in .msg__b { background: #26252a; border-bottom-left-radius: 1.6cqw; }
.msg__tag { margin-top: .7cqw; padding: 0 1.4cqw; font-size: 2.9cqw; color: #8e8e93; }

/* the form, plain: every question stacked */
.start__head > * + * { margin-top: 12px; }
.start__intro { color: var(--soft); max-width: 36ch; }
.fx { margin-top: 32px; max-width: 720px; }
.fx__top { display: none; }
.fx__step { padding: 26px 0; border-top: 1px solid var(--line); }
.fx__legend { display: block; width: 100%; }
.fx__q { font: 700 var(--t-l)/1.04 var(--f-d); letter-spacing: -.028em; }
.fx__help { margin-top: 8px; color: var(--soft); }
.fx__opts, .fx__chips, .fx__fields { margin-top: 20px; }
.fx__opts { display: grid; gap: 10px; }
.fx__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.opt, .chip { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 18px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; transition: transform .25s var(--ease); -webkit-tap-highlight-color: transparent; }
.chip { min-height: 48px; padding: 10px 18px; border-radius: 999px; }
.opt input, .chip input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.opt__mark { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--fg); transition: border-width .25s var(--ease), border-color .2s; }
.opt__mark--box { border-radius: 8px; }
.opt__t, .chip__t { font-weight: 600; }
.opt--card .opt__t { display: block; font: 700 var(--t-m)/1.15 var(--f-d); letter-spacing: -.02em; }
.opt__d { display: block; margin-top: 4px; color: var(--soft); font-size: var(--t-s); line-height: 1.4; }
.opt:has(input:checked), .chip:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); background: var(--ink); color: var(--paper); }
.opt:has(input:checked) .opt__d { color: var(--muted-on-ink); }
.opt:has(input:checked) .opt__mark { border-color: var(--gold); border-width: 7px; }
.opt:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 3px solid var(--gold-ink); outline-offset: 3px; }
.opt:active, .chip:active { transform: scale(.985); }
.field { display: grid; gap: 6px; margin-top: 14px; }
.label { font: 600 var(--t-s)/1.3 var(--f-t); }
.input, .textarea { width: 100%; min-height: 54px; padding: 14px 16px; border: 0; border-radius: 12px; background: #fff; color: var(--ink); font: 400 1.0625rem/1.3 var(--f-t); box-shadow: inset 0 0 0 1.5px var(--rule); -webkit-appearance: none; appearance: none; }
.textarea { min-height: 132px; resize: vertical; margin-top: 20px; }
.cform .textarea { margin-top: 0; }
.select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.input:focus-visible, .textarea:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 2px; }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #A1281B; }
.fx__err { min-height: 0; color: #A1281B; font: 600 var(--t-s)/1.35 var(--f-t); }
.fx__err:empty { display: none; }
.consent { margin-top: 18px; padding: 16px; border-radius: 12px; background: var(--paper-2); font-size: var(--t-s); line-height: 1.45; }
.consent__label { float: left; width: 100%; margin-bottom: 8px; }
.consent__label + .check { clear: both; }
.check { -webkit-tap-highlight-color: transparent; display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--ink); }
.form__note { margin-top: 6px; color: var(--muted); }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fx__fail { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #F6DDD6; color: #5E150D; }
.fx__nav, .fx__done { display: none; }
.fx__fine { margin-top: 12px; color: var(--soft); }
.fx__nojs { margin-top: 24px; font-weight: 600; }
html.js .fx__nojs { display: none; }
.cform { max-width: 560px; }
.cform__act { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cform__note { color: var(--soft); }
html:not(.js) .cform__act { display: none; }
html:not(.js) .room--thanks:not([data-is-first]) { display: none; }

/* thank you / 404 */
.ty > * + * { margin-top: 24px; }
.ty__ring { width: 84px; height: 84px; color: var(--gold); }
.ty__list { margin-top: 10px; display: grid; gap: 6px; color: var(--soft); counter-reset: n; }
.ty__list li { counter-increment: n; padding-left: 1.6em; position: relative; }
.ty__list li::before { content: counter(n) "."; position: absolute; left: 0; font-weight: 600; color: var(--fg); }
.room--thanks { background: var(--ink); color: var(--paper); }

/* legal: the fixed text, new typography only */
.legal { max-width: 760px; }
.legal .shead__top { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: var(--t-s); color: var(--muted); }
.legal h1 { margin-top: 10px; font: 700 var(--t-xl)/.98 var(--f-d); letter-spacing: -.035em; }
.legal h2 { margin: 36px 0 10px; font: 700 var(--t-m)/1.2 var(--f-d); letter-spacing: -.02em; }
.legal p, .legal li { margin-top: 10px; }
.legal ul { list-style: disc; padding-left: 1.2em; }
.legal a { text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* things that exist only for the live version */
.arrive, .whole { display: none; }

/* =====================================================================================================
   LIVE: html.js
   ===================================================================================================== */
html.js, html.js body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.js .foot { display: none; }
html.js .top { position: fixed; z-index: 40; left: 0; right: 0; top: 0; padding-top: env(safe-area-inset-top, 0px); height: calc(var(--top-h) + env(safe-area-inset-top, 0px)); pointer-events: none; }
html.js .top a { pointer-events: auto; }
html.js .top.on-ink { color: var(--paper); }
html.js .rooms { display: block; position: fixed; inset: 0; z-index: 1; }
html.js .room { position: absolute; inset: 0; border: 0; display: none; overflow: hidden; }
html.js.up .room, html.js:not(.up) .room[data-is-first] { display: block; }
html.js.arriving:not(.up) .room[data-is-first], html.js.opening:not(.up) .room[data-is-first] { display: none; }
/* a deep link: the room opens out of the dial's ring, from the dark, the same way it would from any other room */
html.js.opening body { background: var(--ink); }
html.js.opening:not(.up) .top { color: var(--paper); }
/* the stage: two slots a room can be shown in, and the gold rim. A slot is either the whole screen or a circle
   (a fixed 600px disc that is only ever scaled, with its room counter-scaled inside it) */
.stage { position: absolute; inset: 0; overflow: hidden; contain: strict; }
/* the rooms come in front of the arrival's paper only when the O opens: until then the wall is painted, whole, behind it */
html.js.arriving.hole .rooms { z-index: 70; }
.slot { position: absolute; inset: 0; overflow: hidden; z-index: 1; display: none; }
/* the slot itself is never "visible": it only clips. Its room is. So when the circle is handed back to a plain
   full-screen box, nothing that is drawn has moved and no layout shift is recorded (it was 0.43 on desktop) */
.slot { visibility: hidden; }
.slot.is-pre { display: block; }
.slot.is-shown { display: block; }
.slot.is-shown > .slot__in { visibility: visible; }
.slot__in { position: absolute; inset: 0; will-change: transform; }
.slot { pointer-events: none; }
.slot .room { pointer-events: auto; }
.slot.is-circle { inset: auto; width: 600px; height: 600px; border-radius: 50%; will-change: transform; isolation: isolate; }
.slot.is-circle .slot__in { right: auto; bottom: auto; will-change: transform; }
.stage.is-moving .slot .room { pointer-events: none; }
.rim { position: absolute; left: 0; top: 0; width: 600px; height: 600px; border-radius: 50%; background: var(--gold); z-index: 2; visibility: hidden; will-change: transform; pointer-events: none; }
html.js .room__scroll, html.js .cases { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--dock-h) + 24px); }

/* ----- the dial, docked: an ink face, the gold ring as its knob, the six places around it ----- */
html.js .dial { position: fixed; z-index: 30; left: 50%; bottom: 0; width: 100%; max-width: 430px; height: var(--dock-h); padding: 0; transform: translateX(-50%); pointer-events: none; color: var(--paper); -webkit-user-select: none; user-select: none; }
html.js .dial__face { display: block; position: absolute; left: 50%; top: 0; width: 720px; height: 720px; margin-left: -360px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px rgba(210, 160, 30, .5); pointer-events: auto; }
html.js .dial__list { display: block; position: absolute; inset: 0; font: 600 .9375rem/1 var(--f-t); }
html.js .dial__list li { position: absolute; left: calc(50% + var(--x)); top: var(--y); transform: translate(-50%, -50%); }
html.js .dial__list a { min-height: 44px; padding: 0 7px; white-space: nowrap; pointer-events: auto; color: #DCD5C6; transition: color .25s, transform .4s var(--ease); -webkit-tap-highlight-color: transparent; }
html.js .dial__list a[aria-current], html.js .dial__list a.is-aim { color: var(--gold); }
html.js .dial__list a.is-aim { transform: scale(1.12); }
html.js .dial__list a:focus-visible, html.js .dial__knob:focus-visible { outline-color: var(--gold); }
.dial__list li:nth-child(1) { --x: -157px; --y: 88px; }
.dial__list li:nth-child(2) { --x: -129px; --y: 48px; }
.dial__list li:nth-child(3) { --x: -36px; --y: 23px; }
.dial__list li:nth-child(4) { --x: 70px; --y: 25px; }
.dial__list li:nth-child(5) { --x: 135px; --y: 50px; }
.dial__list li:nth-child(6) { --x: 150px; --y: 88px; }
html.js .dial__knob { display: block; position: absolute; left: 50%; top: 88px; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; pointer-events: auto; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.dial__knob svg { width: 100%; height: 100%; transform: rotate(var(--turn, 0deg)); transition: transform .9s var(--ease); }
.dial.is-drag .dial__knob { cursor: grabbing; }
.dial.is-drag .dial__knob svg { transition: none; }
.knob__ring { fill: var(--gold); }
.knob__dot { fill: var(--ink); transition: opacity .3s; }
.dial[data-at="home"] .knob__dot, .dial[data-at=""] .knob__dot { opacity: 0; }
@media (max-width: 359px) {
  html.js .dial__list { font-size: .8125rem; }
  .dial__list li:nth-child(1) { --x: -128px; }
  .dial__list li:nth-child(2) { --x: -108px; }
  .dial__list li:nth-child(3) { --x: -34px; --y: 21px; }
  .dial__list li:nth-child(4) { --x: 56px; --y: 24px; }
  .dial__list li:nth-child(5) { --x: 110px; }
  .dial__list li:nth-child(6) { --x: 122px; }
  html.js .dial__list a { padding: 0 4px; }
}

/* desktop: the dial sits in the bottom-left corner, a quarter face, the places fanned around the ring */
@media (min-width: 900px) and (min-height: 560px) {
  :root { --dock-h: 0px; --top-h: 76px; --t-b: 1.125rem; --t-s: 1rem; --dial: calc(400px * var(--k)); --inset: calc(var(--dial) + 34px); --xl: clamp(2.6rem, min(5.4vw, 10vh), 5.4rem); --A: calc(97vh - 76px - 392px * var(--k)); }
  html.js .dial { left: 0; width: var(--dial); max-width: none; height: var(--dial); transform: none; }
  html.js .dial__face { left: calc(var(--dial) * -1); top: auto; bottom: calc(var(--dial) * -1); width: calc(var(--dial) * 2); height: calc(var(--dial) * 2); margin: 0; }
  html.js .dial__list { font-size: 1.0625rem; }
  html.js .dial__list li { left: calc(var(--dx) * var(--k)); top: auto; bottom: calc(var(--dy) * var(--k)); transform: translateY(50%); }
  html.js .dial__list a { padding: 0 8px; }
  html.js .dial__list a.is-aim { transform: scale(1.08); transform-origin: 0 50%; }
  .dial__list li:nth-child(1) { --dx: 26px; --dy: 236px; }
  .dial__list li:nth-child(2) { --dx: 92px; --dy: 213px; }
  .dial__list li:nth-child(3) { --dx: 142px; --dy: 178px; }
  .dial__list li:nth-child(4) { --dx: 184px; --dy: 133px; }
  .dial__list li:nth-child(5) { --dx: 212px; --dy: 80px; }
  .dial__list li:nth-child(6) { --dx: 224px; --dy: 24px; }
  html.js .dial__knob { left: calc(92px * var(--k)); top: auto; bottom: calc(92px * var(--k)); width: calc(84px * var(--k)); height: calc(84px * var(--k)); margin: 0 0 calc(-42px * var(--k)) calc(-42px * var(--k)); }
  html.js .room__scroll, html.js .cases { padding-bottom: 96px; }
}
@media (min-width: 900px) and (min-height: 560px) and (max-height: 839.98px), (min-width: 900px) and (max-width: 1179.98px) and (min-height: 560px) {
  :root { --k: .85; }
  html.js .dial__list { font-size: 1rem; }
}
@media (min-width: 900px) and (min-height: 560px) and (max-height: 679.98px) {
  :root { --k: .75; }
  html.js .dial__list { font-size: .9375rem; }
}

/* ----- the arrival: paper, the wordmark, and the O you go through ----- */
html.js.arriving .arrive { display: block; position: fixed; inset: 0; z-index: 60; background: var(--paper); color: var(--ink); overflow: hidden; }
.arrive { --mw: min(86vw, 1180px); }
.arrive__mark { position: absolute; left: 50%; top: 42%; width: var(--mw); aspect-ratio: 1062 / 152; transform: translate(-50%, -50%); }
.arrive__zoom { position: absolute; inset: 0; transform-origin: 67.412% 50%; will-change: transform; }
.am { position: absolute; left: 0; top: 0; width: 200%; height: 200%; max-width: none; transform: scale(.5); transform-origin: 0 0; overflow: visible; }
.arrive__h { position: absolute; left: var(--pad); right: var(--pad); top: calc(42% + var(--mw) * .0716 + clamp(30px, 6vh, 64px)); text-align: center; font: 700 clamp(1.5rem, 1rem + 2vw, 2.6rem)/1.12 var(--f-d); letter-spacing: -.025em; }
.arrive__h span { display: block; }
.arrive__h span + span { color: var(--gold-ink); }
html.js .dial { transition: transform 1s var(--ease); }
html.js .top { transition: opacity .6s linear; }
html.js.arriving .dial { transform: translate(-50%, 110%); }
html.js.arriving .top { opacity: 0; }
html.js .room--home .veil { opacity: 1; background: linear-gradient(to bottom, rgba(20, 18, 14, .62) 0, rgba(20, 18, 14, .04) 92px, rgba(20, 18, 14, .04) 100%); transition: opacity .7s linear; }
html.js .room--home .home__in::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to bottom, rgba(20, 18, 14, 0) 0, rgba(20, 18, 14, .88) 52px, #14120E 84px); transition: opacity .7s linear; }
html.js.pre .room--home .home__in::before { opacity: 0; }
html.js.pre .room--home .veil { opacity: 0; }
html.js.pre .room--home .home__in { visibility: hidden; }
@media (min-width: 900px) and (min-height: 560px) { html.js.arriving .dial { transform: translate(-110%, 110%); } }

/* ----- home, live ----- */
html.js .room--home .home__in { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 74px var(--pad) calc(var(--dock-h) + 18px); }
@media (max-height: 620px) and (max-width: 899.98px) {
  .home__h { font-size: 2.05rem; }
  .home__line { margin-top: 12px; font-size: .9375rem; line-height: 1.4; }
  .home__cta { margin-top: 14px; }
  html.js .room--home .home__in { padding-top: 66px; }
}
@media (max-width: 899.98px) { .home__more { display: none; } .home__line { margin-top: 14px; } .home__cta { margin-top: 18px; } }
@keyframes wall-up { to { transform: translate3d(0, -50%, 0); } }
@keyframes wall-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
html.js:not(.rm) .wall__run { animation: wall-up 70s linear infinite paused; will-change: transform; }
html.js:not(.rm) .wall__col:nth-child(even) .wall__run { animation-name: wall-down; animation-duration: 84s; }
html.js:not(.rm) .room.is-live .wall__run { animation-play-state: running; }
/* the wall stands still while you come through the O (one site is held in it), and starts to travel once you are in */
html.js.arriving .room.is-live .wall__run { animation-play-state: paused; }
.wall__col:nth-child(odd) { margin-top: -60px; }
@media (hover: hover) {
  .door__t { transition: background-size .5s var(--ease); }
  .door:hover .door__t { background-size: 100% .07em; }
}
@media (min-width: 900px) and (min-height: 560px) {
  .wall__tilt { width: 118vw; gap: 18px; }
  .wall__col--4, .wall__col--5 { display: block; }
  .wall__run img { margin-bottom: 18px; border-radius: 12px; }
  /* desktop: the wall and the dial hold the left, the words stand on ink at the right */
  html.js .room--home .home__in { left: auto; top: 0; width: 60vw; justify-content: center; padding: var(--top-h) var(--pad) 4vh 15vw; }
  html.js .room--home .home__in::before { background: linear-gradient(to right, rgba(20, 18, 14, 0) 0, rgba(20, 18, 14, .92) 9vw, #14120E 13vw); }
  html.js .room--home .home__h { font-size: clamp(3rem, 4.75vw, 5.4rem); }
  .door { max-width: none; }
  .home__line { margin-top: 30px; font-size: var(--t-m); line-height: 1.36; max-width: 30ch; }
  .home__cta { margin-top: 30px; }
}

/* ----- scenes, live ----- */
html.js .scn { max-width: none; margin: 0; padding: 10px var(--pad) 36px; }
html.js .own { overflow-x: clip; }
html.js .scn + .scn { padding-top: 30px; }
html.js .frame img { will-change: transform; }
@keyframes travel-f { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -75%, 0); } }
@keyframes travel-g { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -74%, 0); } }
html.js:not(.rm) .room.is-live .frame--d img { animation: travel-g 30s cubic-bezier(.45, 0, .55, 1) 1.6s infinite alternate; }
html.js:not(.rm) .room.is-live .frame--m img { animation: travel-f 26s cubic-bezier(.45, 0, .55, 1) 1.6s infinite alternate; }
/* things that play once, on their own clock, when their scene is first seen. They are "from" keyframes, so each ends at rest */
@keyframes ring-land { from { opacity: 0; transform: scale(3.4); } }
@keyframes pan-x { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(min(0px, calc(100vw - 100%)), 0, 0); } }
@keyframes lit { from { opacity: .16; } }
@keyframes sign { from { opacity: 0; transform: translate3d(-12px, 0, 0); } }
@keyframes stroke { from { transform: scaleX(0); } }
@keyframes seal { from { opacity: 0; transform: scale(2.8) rotate(-28deg); } }
@keyframes pop { from { opacity: 0; transform: scale(.2); } }
html.js:not(.rm) [data-see]:not(.is-in) :is(.rev__ring, .deed__who, .deed__seal, .name__ring) { opacity: 0; }
html.js:not(.rm) [data-see]:not(.is-in) .say__t span { opacity: .16; }
html.js:not(.rm) .is-in .rev__ring { animation: ring-land .8s var(--ease) .35s both; }
.say__t span:nth-child(1) { --n: 0; } .say__t span:nth-child(2) { --n: 1; } .say__t span:nth-child(3) { --n: 2; } .say__t span:nth-child(4) { --n: 3; } .say__t span:nth-child(5) { --n: 4; }
html.js:not(.rm) .is-in .say__t span { animation: lit .5s linear both; animation-delay: calc(.15s + var(--n) * .42s); }
html.js:not(.rm) .is-in .deed__who { animation: sign .5s var(--ease) both; animation-delay: calc(.35s + var(--n) * .3s); }
html.js:not(.rm) .is-in .deed__who::after { animation: stroke .55s var(--ease) both; animation-delay: calc(.5s + var(--n) * .3s); }
html.js:not(.rm) .is-in .deed__seal { animation: seal .7s cubic-bezier(.3, 1.45, .5, 1) 1.75s both; }
html.js:not(.rm) .is-in .name__ring { animation: pop .8s cubic-bezier(.3, 1.45, .5, 1) .2s both; }
html.js:not(.rm) .room.is-live .pair__ring { animation: pop .8s cubic-bezier(.3, 1.45, .5, 1) .75s both; }
/* the seven pieces as a dial of their own: one is lit, its sentence shows, the ring marks it (transform and opacity only) */
.turn.is-on { margin-top: 12px; }
.turn.is-on .turn__list > li + li { margin-top: 0; }
.turn.is-on .turn__name { font-size: min(var(--t-l), 6.6vw); }
.turn.is-on .turn__name button { display: flex; align-items: center; width: 100%; min-height: 46px; padding-left: 1.25em; text-align: left; font: inherit; letter-spacing: inherit; opacity: .5; transition: opacity .3s linear; -webkit-tap-highlight-color: transparent; }
.turn.is-on li.is-at .turn__name button { opacity: 1; }
/* the sentences share one place, which stays on screen while the list scrolls under the top bar */
.turn__says { position: sticky; z-index: 2; top: calc(var(--top-h) + env(safe-area-inset-top, 0px) - 1px); height: calc(var(--say-h, 6.4em) + 22px); margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); background: var(--bg); }
.turn.is-on .turn__say { position: absolute; left: var(--pad); right: var(--pad); top: 8px; margin: 0; max-width: 34ch; font-size: var(--t-m); line-height: 1.36; color: var(--fg); opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .18s linear, transform 0s linear .18s; pointer-events: none; }
.turn.is-on .turn__say.is-at { opacity: 1; transform: none; transition: opacity .35s linear .12s, transform .6s var(--ease) .12s; }
.turn.is-on .turn__ring { display: block; position: absolute; left: 0; top: 0; width: .8em; height: .8em; margin-top: -.4em; border-radius: 50%; border: .2em solid var(--gold); font-size: min(var(--t-l), 6.6vw); transform: translate3d(0, var(--y, 23px), 0); transition: transform .6s var(--ease); pointer-events: none; }
@media (max-width: 899.98px), (max-height: 559.98px) {
  html.js .web .lead__words .t-xl { max-width: 9.5em; }
  /* the reviews run edge to edge and travel sideways on their own, so every card can be read at phone size */
  html.js .rev__frame { margin: 24px calc(var(--pad) * -1) 0; border-radius: 0; height: min(300px, 46vh); }
  html.js .rev__pan { width: max-content; height: 100%; }
  html.js .rev__pan img { width: auto; max-width: none; height: 100%; }
  html.js:not(.rm) .room.is-live .is-in .rev__pan { animation: pan-x 16s cubic-bezier(.45, 0, .55, 1) 1.9s infinite alternate; will-change: transform; }
  html.rm .rev__frame { overflow-x: auto; }
  html.js .who .t-xl[data-h] { font-size: var(--t-l); line-height: 1.02; letter-spacing: -.028em; }
}
@media (min-width: 900px) and (min-height: 560px) {
  html.js .scn { padding: 7vh var(--pad) 7vh var(--inset); }
  html.js .scn + .scn { padding-top: 7vh; }
  html.js .scn .t-xl, .direct__num { font-size: var(--xl); }
  /* the first scene of a room: its words stand top left, above the dial, and its material holds the right */
  html.js .scn--lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 clamp(40px, 6vw, 110px); align-items: start; min-height: 100%; padding: 3vh var(--pad) 3vh; }
  .web__stage { grid-column: 2; grid-row: 1; margin: 0; padding: 0 5% 5% 0; transition: transform .6s var(--ease); }
  .lead__say { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 30px; margin: 22px 5% 0 0; }
  .lead__say > * + * { margin: 0; }
  .web .lead__words { grid-row: 1 / span 2; }
  .frame--m { right: 0; width: 23%; border-radius: 18px; box-shadow: 0 0 0 1px var(--rule), 0 0 0 6px var(--ink), 0 30px 60px -30px rgba(20, 18, 14, .6); }
  @media (hover: hover) { .web__stage:hover { transform: translateY(-6px); } }
  .rev__words { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(36px, 4vw, 70px); align-items: end; }
  .rev__words > * + * { margin-top: 0; }
  .rev__ring { border-width: 7px; }
  .say__t { max-width: 17em; }
  .turn.is-on { margin-top: 30px; }
  .turn__says { position: absolute; left: 65%; right: 0; top: 0; height: auto; margin: 0; padding: 0; background: none; transform: translate3d(0, calc(var(--y, 27px) - 1.1em), 0); transition: transform .6s var(--ease); }
  .turn.is-on .turn__name, .turn.is-on .turn__ring { font-size: min(var(--t-l), 3vw); }
  .turn.is-on .turn__name button { width: 62%; min-height: 54px; white-space: nowrap; }
  .turn.is-on .turn__say { left: 0; right: 0; top: 0; max-width: 26ch; }
  html.js .price { grid-template-rows: auto 1fr; }
  .terms { grid-column: 1 / -1; font-size: clamp(2.6rem, min(5.4vw, var(--A) / 4.95), 5.4rem); }
  .price__say { grid-column: 2; align-self: end; margin: 24px 0 3vh; }
  html.js .own { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; gap: 0 clamp(40px, 5vw, 90px); min-height: 100%; }
  .own__h { grid-area: 2 / 1; }
  .own__words { grid-area: 3 / 1; margin-top: 22px; }
  .deed { grid-area: 1 / 2 / 5 / 3; align-self: center; justify-self: end; width: calc(100% - 14px); max-width: 540px; margin: 0 14px 44px 0; padding: 10px 32px 76px; }
  .deed__rows li { padding: 20px 0 18px; }
  .deed__seal { width: 112px; height: 112px; right: 24px; bottom: -44px; }
  .pair { margin: 0; align-self: center; }
  html.js .name { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(36px, 4vw, 70px); align-content: center; min-height: 100%; }
  .name__ring { width: clamp(110px, 18vh, 180px); height: clamp(110px, 18vh, 180px); border-width: clamp(27.5px, 4.5vh, 45px); }
  .name__t { margin: 0; max-width: 21ch; font-size: var(--xl); line-height: .98; letter-spacing: -.035em; }
  .name .end { grid-column: 2; margin-top: 7vh; }
  .talk__form { margin: 4px 0 0; }
  .direct__taps { display: none; }
}

/* ----- work, live: one client per screen ----- */
html.js .cases { display: flex; gap: 0; padding-left: 0; padding-right: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0; }
html.js .cases::-webkit-scrollbar { display: none; }
html.js .case { position: relative; flex: 0 0 88vw; scroll-snap-align: start; padding: 10px 0 0 var(--pad); display: flex; flex-direction: column; min-height: 0; }
html.js .case:last-child { flex-basis: 100vw; padding-right: var(--pad); }
html.js .case__words { flex: none; }
html.js .case__note { display: none; }
html.js .case__act { margin-top: 12px; }
html.js .case__stage { flex: 1; min-height: 0; margin-top: 18px; }
html.js .shot--d { display: none; }
html.js .shot--m { display: block; width: min(100%, 300px); height: 100%; border-radius: 22px 22px 0 0; box-shadow: 0 0 0 1px var(--rule), 0 0 0 7px var(--ink); margin: 7px 0 0 7px; }
html.js .shot--m img { will-change: transform; }
@keyframes travel-m { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -62%, 0); } }
@keyframes travel-d { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -74%, 0); } }
html.js:not(.rm) .room.is-live .case.is-on .shot--m img { animation: travel-m 26s cubic-bezier(.45, 0, .55, 1) 1s infinite alternate; }
html.js:not(.rm) .room.is-live .case.is-on .shot--d img { animation: travel-d 30s cubic-bezier(.45, 0, .55, 1) 1s infinite alternate; }
@media (min-width: 900px) and (min-height: 560px) {
  html.js .names { display: block; position: absolute; z-index: 3; left: var(--pad); top: calc(var(--top-h) + 4vh); --nf: clamp(1.35rem, 2.2vw, 2.3rem); font: 700 var(--nf)/1.08 var(--f-d); letter-spacing: -.028em; }
  html.js .names a { display: block; padding: 5px 0; text-decoration: none; color: #A39C8C; transition: color .3s, transform .5s var(--ease); transform-origin: 0 50%; }
  html.js .names a[aria-current] { color: var(--ink); }
  html.js .names a::before { content: ""; display: inline-block; width: .42em; height: .42em; margin-right: .3em; border-radius: 50%; border: .12em solid var(--gold); vertical-align: .08em; transform: scale(0); transition: transform .5s var(--ease); }
  html.js .names a[aria-current]::before { transform: none; }
  @media (hover: hover) { html.js .names a:hover { color: var(--ink); } }
  html.js .cases { display: block; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; padding: 0; }
  html.js .case, html.js .case:last-child { height: 100%; padding: 0; scroll-snap-align: start; scroll-snap-stop: always; display: block; }
  html.js .case__words { position: absolute; left: var(--pad); top: calc(var(--top-h) + 4vh + 4 * (var(--nf) * 1.08 + 10px) + 26px); width: min(32vw, 440px); --nf: clamp(1.35rem, 2.2vw, 2.3rem); --t-b: 1.0625rem; --t-s: 1rem; }
  html.js .case__act { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
  html.js .case__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  html.js .case__line { margin: 0; }
  html.js .case__note { display: block; }
  html.js .case__stage { position: absolute; margin: 0; right: calc(var(--pad) + 1.6vw); top: 50%; width: min(56vw, 138vh - 150px); aspect-ratio: 16 / 10.6; transform: translateY(-47%); }
  html.js .shot--d { display: block; position: absolute; left: 0; top: 0; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--rule), 0 40px 80px -50px rgba(20, 18, 14, .55); }
  html.js .shot--m { position: absolute; right: -1.2vw; bottom: -6%; margin: 0; width: 21%; height: auto; aspect-ratio: 400 / 840; border-radius: 18px; box-shadow: 0 0 0 1px var(--rule), 0 0 0 6px var(--ink), 0 30px 60px -30px rgba(20, 18, 14, .6); }
  @keyframes travel-m { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -75%, 0); } }
  .shot { transition: transform .6s var(--ease); }
  @media (hover: hover) { .shot:hover { transform: translateY(-6px); } }
}

/* ----- the call, live ----- */
html.js .room--system .room__scroll { padding-top: 0; padding-bottom: 0; }
html.js .sys { padding-top: 34px; padding-bottom: calc(var(--dock-h) + 40px); }
html.js .call.is-live { max-width: none; margin: 0; height: 100%; min-height: 520px; padding: calc(var(--top-h) + env(safe-area-inset-top, 0px) + 6px) var(--pad) var(--dock-h); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
html.js .call.is-live .call__day, html.js .call.is-live .call__beats { grid-area: 1 / 1; height: 8.6rem; }
.call.is-live .call__day { position: relative; z-index: 1; }
.call.is-live .t-xl { font-size: clamp(2rem, 1.2rem + 4.2vw, 4.8rem); }
.call.is-live .call__beats { font-size: 1.5rem; }
.call.is-live .call__line { margin-top: 10px; }
.call.is-live .call__night { display: block; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: var(--ink); opacity: 0; transition: opacity .7s linear; }
.call.is-live.is-night .call__night { opacity: 1; }
.call.is-live .call__beats { position: relative; z-index: 3; margin: 0; display: grid; max-width: none; color: var(--paper); font: 700 var(--t-l)/1.06 var(--f-d); letter-spacing: -.028em; pointer-events: none; }
.call.is-live .call__beats li { grid-area: 1 / 1; max-width: 17ch; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .16s linear, transform 0s linear .16s; }
.call.is-live .call__beats li.is-on { opacity: 1; transform: none; transition: opacity .35s linear .18s, transform .7s var(--ease) .18s; }
.call.is-live .call__time { color: var(--gold); margin-bottom: 6px; }
/* the phone is a whole phone: it ends, rounded, a clear gap above the dial, however short the screen is */
.call.is-live .call__fig { position: relative; z-index: 3; margin: 14px 0 20px; grid-area: 2 / 1; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.call.is-live .sms { --pw: min(300px, 80vw); flex: 1; min-height: 0; display: flex; }
.call.is-live .sms__screen { aspect-ratio: auto; width: 100%; }
.call.is-live .sms__avatar { display: none; }
.call.is-live .sms__status { z-index: 2; background: #000; }
.call.is-live .sms__head { z-index: 2; }
/* the thread's header (the caller's name and number) is not there until the thread is: while the call banner is up,
   nothing shows through under it */
.call.is-live .sms__head > * { transition: opacity .25s linear .2s; }
.call.is-live:not(.has-thread) .sms__head > * { opacity: 0; transition: opacity .12s linear; }
.call.is-live .sms__banner { z-index: 4; }
.call.is-live .sms__thread { min-height: 0; will-change: transform; transition: transform .6s var(--ease); }
.call.is-live .sms [data-step] { opacity: 0; transform: translate3d(0, 12px, 0) scale(.97); transition: opacity .3s linear, transform .55s cubic-bezier(.34, 1.4, .64, 1); }
.call.is-live .sms [data-step].is-in { opacity: 1; transform: none; }
.call.is-live .sms__thread { padding-bottom: 3cqw; }
.call.is-live.is-end .call__line { display: none; }
/* one headline at a time: the room's own headline is gone before the first beat's words start, and comes back
   only after the last beat's have left */
.call.is-live .call__day { transition: opacity .4s linear .2s; }
.call.is-live.is-night .call__day, .call.is-live.is-done:not(.is-end) .call__day { opacity: 0; transition: opacity .15s linear; }
.call.is-live.is-done .call__beats { color: var(--ink); }
.call.is-live.is-done .call__time { color: var(--gold-ink); }
html.js .sys { border-top: 1px solid var(--rule); }
@media (max-width: 899.98px), (max-height: 559.98px) {
  .call.is-live .call__ctl { margin-top: 4px; }
  .call.is-live .call__beats { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.2rem); }
  .call.is-live .call__beats li { max-width: 21ch; }
}
@media (min-width: 900px) and (min-height: 560px) {
  html.js .call.is-live { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: calc(var(--top-h) + 4vh); padding-bottom: 0; gap: 0 40px; height: 100%; }
  html.js .call.is-live .call__day, html.js .call.is-live .call__beats { height: auto; }
  html.js .sys { padding-top: 7vh; padding-bottom: 96px; }
  .call.is-live .t-xl { font-size: clamp(2.6rem, min(4.8vw, 8.4vh), 4.8rem); }
  .call.is-live .sms__thread { padding-bottom: 2cqw; }
  html.js .call.is-live .call__day, html.js .call.is-live .call__beats { grid-area: 1 / 1; }
  .call.is-live .call__beats { font-size: clamp(2.4rem, min(4.2vw, 7vh), 4.2rem); line-height: 1; letter-spacing: -.035em; }
  .call.is-live .call__beats li { max-width: 15ch; }
  .call.is-live .call__fig { grid-area: 1 / 2; margin: 0; justify-content: flex-start; }
  .call.is-live .sms { --pw: min(340px, calc((100vh - var(--top-h) - 4vh - 36px) * 9 / 18.6)); flex: none; padding-bottom: calc(var(--pw) * .034); border-radius: calc(var(--pw) * .15); display: block; }
  .call.is-live .sms__screen { aspect-ratio: 9 / 18.6; border-radius: calc(var(--pw) * .12); }
  .call.is-live .call__ctl { margin-top: 18px; }
}

/* ----- the form, live: one question per screen, the O fills as you go ----- */
html.js .start { max-width: 760px; padding-top: 10px; padding-bottom: 0; }
html.js .fx { position: relative; margin-top: 18px; max-width: none; }
html.js .fx__top { display: flex; align-items: center; gap: 12px; }
.fx__prog, .fx__ring { transform: rotate(-90deg); }
.fx__prog { width: 44px; height: 44px; }
.o-track { fill: none; stroke: var(--paper-2); stroke-width: 38; }
.o-arc { fill: none; stroke: var(--gold); stroke-width: 38; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease); }
.fx__count { font: 600 var(--t-s)/1 var(--f-t); font-variant-numeric: tabular-nums; }
html.js .fx__stage { margin-top: 18px; }
html.js .fx.fx-ready .fx__step { display: none; border: 0; padding: 0; }
html.js .fx.fx-ready .fx__step.is-current { display: block; }
html.js .fx.fx-ready .fx__url[hidden] { display: none; }
html.js .fx.fx-ready .fx__nav { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.fx__gap { flex: 1; }
.fx__back, .fx__skip { min-height: 48px; padding: 0 6px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 5px; }
.fx__back.is-off { visibility: hidden; }
html.js .fx.is-sent .fx__top, html.js .fx.is-sent .fx__nav, html.js .fx.is-sent .fx__fine, html.js .fx.is-sent .fx__step { display: none !important; }
html.js .fx__done:not([hidden]) { display: grid; justify-items: center; gap: 26px; padding: 6vh 0; text-align: center; }
.fx__ring { width: min(46vw, 220px); height: auto; }
html.js .room--start.is-sent .start__head { visibility: hidden; }
@media (max-width: 899.98px), (max-height: 559.98px) {
  html.js .fx.fx-ready .fx__nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 80px; background: var(--paper); }
  html.js .fx__fine { position: relative; z-index: 3; }
  /* on a phone Back and Next stay in reach, just above the dial */
  html.js .fx.fx-ready .fx__nav { position: sticky; bottom: -18px; z-index: 2; margin: 14px calc(var(--pad) * -1) 0; padding: 10px var(--pad) 12px; background: var(--paper); box-shadow: 0 -1px 0 var(--rule); }
}
@media (min-width: 900px) and (min-height: 560px) {
  html.js .start { max-width: none; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 clamp(40px, 6vw, 110px); padding-top: 4vh; }
  html.js .start__head .t-l { font-size: clamp(2.6rem, min(4.6vw, 7.2vh), 4.8rem); line-height: .96; letter-spacing: -.035em; }
  html.js .start__intro { font-size: var(--t-m); }
  html.js .fx { margin-top: 6px; max-width: 700px; }
  .fx__prog { width: 64px; height: 64px; }
  .fx__opts--two { grid-template-columns: 1fr 1fr; }
  .fx__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .fx__fields .consent, .fx__fields .field:last-child { grid-column: 1 / -1; }
}

/* ----- thank you, live ----- */
html.js .ty { display: flex; flex-direction: column; justify-content: center; min-height: 100%; padding-top: 12px; padding-bottom: 12px; }
html.js .room--solo .ty { color: var(--ink); }
@media (min-width: 900px) and (min-height: 560px) {
  html.js .ty { max-width: none; margin: 0; padding-left: max(34vw, var(--inset)); }
  html.js .legal { margin-left: max(34vw, var(--inset)); margin-right: var(--pad); padding-left: 0; padding-top: 3vh; }
}

/* ----- the whole-page view ----- */
html.js .whole:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 80; background: var(--ink); color: var(--paper); }
.whole__bar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 16px; height: calc(60px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--pad) 0; background: var(--ink); border-bottom: 1px solid var(--rule-on-ink); }
.whole__name { flex: 1; min-width: 0; font: 700 var(--t-m)/1.1 var(--f-d); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whole__visit { flex: none; font-size: var(--t-s); }
.whole__close { flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 600; }
.whole__close:focus-visible, .whole__scroll:focus-visible { outline-color: var(--gold); outline-offset: -3px; }
.whole__scroll { position: absolute; inset: calc(60px + env(safe-area-inset-top, 0px)) 0 0 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.whole__page { width: min(100%, 1280px); margin: 0 auto; background: var(--ink-2); }
.whole__page img { width: 100%; height: auto; }
@media (min-width: 900px) { .whole__page--m { width: min(100%, 430px); } }
@media (max-width: 899.98px) { .whole__page { width: min(100%, 560px); } .whole__visit { display: none; } }

/* reveals: the "from" state exists only while JS is alive and motion is allowed; ends at transform: none */
html.js:not(.rm) .room:not(.is-seen) [data-rise] { opacity: 0; }

/* reduced motion */
html.rm *, html.rm *::before, html.rm *::after { animation: none !important; transition-duration: .01s !important; }
@media print { html.js .room { position: static; visibility: visible; } }

/* ----- the top corners keep a clean strip: nothing scrolls up under the wordmark or the number ----- */
html.js .room--text::before, html.js .room--start::before, html.js .room--thanks::before, html.js .room--system::before { content: ""; position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: calc(var(--top-h) + env(safe-area-inset-top, 0px)); background: var(--bg); pointer-events: none; }
html.js .room--system::before { opacity: 0; }
html.js .room--system.is-scrolled::before { opacity: 1; }
html.js .room--system:not(.is-away):has(.call.is-night)::before { background: var(--ink); }

@media (max-height: 720px) and (min-height: 620.02px) and (max-width: 899.98px) {
  html.js .room--home .home__h { font-size: 2.3rem; }
  html.js .room--home .home__in { padding-top: 84px; padding-bottom: calc(var(--dock-h) + 14px); }
  .home__line { margin-top: 12px; line-height: 1.42; }
  .home__cta { margin-top: 16px; }
}

/* ----- laptop-height and narrow desktops: the dial owns the bottom-left corner, so Work keeps its words in a strip clear of it ----- */
@media (min-width: 900px) and (min-height: 560px) and (max-height: 839.98px), (min-width: 900px) and (max-width: 1279.98px) and (min-height: 560px) {
  html.js .case__stage { top: calc(var(--top-h) + 1vh); transform: none; width: min(56vw, (100vh - var(--top-h) - 160px) * 1.509); }
  html.js .case__words { left: var(--inset); right: calc(var(--pad) + 1.6vw); top: auto; bottom: 22px; width: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 28px; }
  html.js .case__note { display: none; }
  html.js .case__act { margin: 0; flex-wrap: nowrap; }
}
p, li { text-wrap: pretty; }

/* ----- very short windows (200% zoom on a laptop, a phone on its side): the home headline and button must fit above the dial ----- */
@media (max-height: 470px) {
  html.js .room--home .home__in { padding-top: 60px; padding-bottom: calc(var(--dock-h) + 10px); }
  .home__h { font-size: 1.85rem; }
  .door { max-width: none; padding: 3px 0; }
  .home__line { display: none; }
  html.js .room--home .home__cta { margin-top: 12px; }
}
.ty .btn + .link { margin-left: 18px; }
/* mid-width desktops: a wall tile can sit under the wordmark, so the corner is shaded like the top edge already is */
@media (min-width: 900px) and (max-width: 1279.98px) {
  html.js .room--home .veil { background: radial-gradient(ellipse 300px 110px at 90px 38px, rgba(20, 18, 14, .86), rgba(20, 18, 14, 0)), linear-gradient(to bottom, rgba(20, 18, 14, .62) 0, rgba(20, 18, 14, .04) 92px, rgba(20, 18, 14, .04) 100%); }
}

/* ----- short phones (a small iPhone with Safari's bars showing): the call's phone and the form's answers get the room ----- */
@media (max-height: 620px) and (max-width: 899.98px) {
  html.js .call.is-live .t-xl { font-size: 1.9rem; }
  .call.is-live .call__line { margin-top: 6px; font-size: .9375rem; line-height: 1.35; }
  .call.is-live .call__beats { font-size: 1.375rem; }
  .call.is-live .call__time { margin-bottom: 4px; }
  html.js .call.is-live .call__day, html.js .call.is-live .call__beats { height: 6.7rem; }
  .call.is-live .call__fig { margin: 10px 0 12px; }
  html.js .start { padding-top: 4px; }
  html.js .start__head > * + * { margin-top: 6px; }
  html.js .start__intro { font-size: .875rem; line-height: 1.35; max-width: none; }
  html.js .fx { margin-top: 10px; }
  html.js .fx__prog { width: 30px; height: 30px; }
  html.js .fx__stage { margin-top: 10px; }
  html.js .fx__help { margin-top: 4px; }
  html.js .fx__opts, html.js .fx__chips, html.js .fx__fields { margin-top: 12px; }
  html.js .fx.fx-ready .fx__nav { margin-top: 8px; padding: 6px var(--pad) 8px; }
}

/* The header's own ground: scrolled content passes behind a solid bar that fades out at its lower edge,
   instead of showing through the logo and the Call / Text links. Not on home, where the wall is the ground. */
html.js .top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -18px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s linear;
  background: linear-gradient(to bottom, #F2EDE3 0, #F2EDE3 calc(100% - 22px), rgba(242, 237, 227, 0) 100%); }
html.js .top.on-ink::before { background: linear-gradient(to bottom, #14120E 0, #14120E calc(100% - 22px), rgba(20, 18, 14, 0) 100%); }
html.js.up .top.has-bar::before { opacity: 1; }
html.js.arriving .top::before, html.js.opening:not(.up) .top::before { opacity: 0; }