@font-face { font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 300 500; src: url('/assets/fraunces-latin.ce47a7e637.woff2') format('woff2-variations'); unicode-range: U+0020-007E, U+00A0-00FF, U+2013, U+2018-201E, U+2026, U+2192; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 300 500; src: url('/assets/fraunces-ro.99508cb04a.woff2') format('woff2-variations'); unicode-range: U+0102-0103, U+0218-021B; }
@font-face { font-family: 'Figtree'; font-style: normal; font-display: swap; font-weight: 300 900; src: url('/assets/figtree-latin.dac94835bb.woff2') format('woff2-variations'); unicode-range: U+0020-007E, U+00A0-00FF, U+2013, U+2018-201E, U+2026, U+2192; }
@font-face { font-family: 'Figtree'; font-style: normal; font-display: swap; font-weight: 300 900; src: url('/assets/figtree-ro.18c368b665.woff2') format('woff2-variations'); unicode-range: U+0102-0103, U+0218-021B; }

:root {
  /* Forest and terracotta are measured from the owner's logo. The rest is warm light and paper around them. */
  --forest: #152f26;
  --forest-2: #20433a;
  --terra: #9f4127;
  --bone: #f7f2e8;
  --paper: #fdfbf6;
  --light: #fbebd2;
  --amber: #f4c98b;
  --sand: #ece3d0;
  --sage: #dfe6d9;
  --ink-soft: #3f5249;
  --muted: #5a6a61;
  --line: rgb(21 47 38 / 13%);
  --line-light: rgb(251 235 210 / 18%);
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: clamp(22px, 2.4vw, 34px);
  --ease: cubic-bezier(.2, .75, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bone) url('/assets/grain.a247ce7169.webp'); color: var(--forest); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, pre, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
svg { display: block; }
::selection { background: var(--terra); color: var(--paper); }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, dt { font-family: var(--display); font-weight: 400; font-optical-sizing: auto; letter-spacing: -0.018em; text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
h2 { font-size: clamp(2.5rem, 5.6vw, 5.2rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 360; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(100%, 1400px); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 16px; top: -64px; z-index: 40; padding: 10px 16px; background: var(--forest); color: var(--paper); border-radius: 10px; transition: top .15s; }
.skip:focus { top: 12px; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentcolor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.logo { height: 100%; width: auto; }
.eyebrow { font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terra); margin-bottom: 18px; }
.head { max-width: 900px; }
.head-lead { margin-top: 22px; max-width: 34em; font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.5; color: var(--ink-soft); }
.tag { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--sand); color: var(--terra); font-size: .66rem; font-weight: 700; letter-spacing: .02em; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 12px 28px; border-radius: 999px; background: var(--forest); color: var(--paper); font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; transition: background .25s, color .25s, box-shadow .25s, transform .25s var(--ease); }
.btn .icon { transition: transform .3s var(--ease); }
.btn:hover { background: var(--terra); }
.btn:hover .icon { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
.btn-ghost { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--forest); }

/* Header: a pill floating over the page, so every section passes beneath it */
.top { position: fixed; inset: 14px 0 auto; z-index: 30; padding-inline: clamp(10px, 2vw, 24px); pointer-events: none; }
.top-row { pointer-events: auto; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); width: min(100%, 1160px); height: 62px; margin-inline: auto; padding: 0 10px 0 22px; border-radius: 999px; background: rgb(253 251 246 / 95%); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px var(--line), 0 16px 40px -28px rgb(21 47 38 / 55%); }
.brand { display: block; height: 30px; flex: none; }
.top-nav { display: flex; gap: clamp(14px, 2vw, 28px); margin-inline-start: auto; font-weight: 500; font-size: .95rem; }
.top-nav a { color: var(--ink-soft); text-decoration: none; padding: 8px 0; background: linear-gradient(var(--terra), var(--terra)) left bottom 4px / 0 1.5px no-repeat; transition: background-size .3s var(--ease), color .2s; }
.top-nav a:hover { color: var(--forest); background-size: 100% 1.5px; }
.lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 42px; padding-inline: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 600; font-size: .88rem; text-decoration: none; transition: box-shadow .2s, background .2s; }
.lang:hover { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--forest); }

/* Hero: the logo's arch, standing on a floor, with the door opening onto warm light */
.stage { --h: min(80svh, 52vw, 720px); --w: calc(var(--h) * 1.179); --r: max(2vw, calc((100vw - 1480px) / 2)); --shift: calc(var(--r) + .424 * var(--w) - 50vw); --zoom: 16; position: relative; }
.stage-pin { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: clip; }
.stage-text { position: relative; z-index: 2; width: min(100%, 1480px); margin-inline: auto; padding: 100px var(--gutter) 64px; }
.status { display: inline-flex; align-items: center; gap: 10px; padding: 7px 15px 7px 12px; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--terra); animation: pulse 2.6s ease-in-out infinite; }
h1 { margin-top: 26px; font-size: clamp(3.3rem, min(8.6vw, 16.4vh), 7.6rem); line-height: .95; letter-spacing: -0.035em; font-weight: 350; }
h1 .line { display: block; overflow: clip; padding-block: .14em .04em; margin-block: -.14em -.04em; }
h1 .line > span { display: block; animation: line-up 1s var(--ease) both; }
h1 .line:nth-child(2) > span { animation-delay: .07s; }
h1 .line:nth-child(3) > span { animation-delay: .14s; }
h1 .accent { color: var(--terra); }
.lead { margin-top: 26px; max-width: min(30em, 42vw); font-size: clamp(1.1rem, 1.45vw, 1.28rem); line-height: 1.5; color: var(--ink-soft); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.note { margin-top: 20px; max-width: min(30em, 42vw); font-size: .94rem; color: var(--muted); }

.scene-box { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scene-zoom { position: absolute; right: var(--r); bottom: 0; width: var(--w); height: var(--h); transform-origin: 57.6% 48.3%; }
.scene { width: 100%; height: 100%; overflow: visible; }
.floor { fill: var(--sand); }
.door { transform-box: fill-box; transform-origin: 100% 50%; animation: door-open 1.9s .35s var(--ease) both; }
.spill { animation: glow-in 1.6s .7s ease-out both; }
.inside { animation: glow-in 1.2s .45s ease-out both; }
.cue { position: absolute; left: 50%; bottom: 22px; z-index: 3; display: none; align-items: center; gap: 8px; translate: -50% 0; font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--ink-soft); }
.cue .icon { animation: nudge 2.2s ease-in-out infinite; }
.wash { position: absolute; inset: 0; z-index: 2; background: var(--light); opacity: 0; pointer-events: none; }

/* What we believe */
.creed { padding-block: clamp(90px, 18vh, 200px) clamp(90px, 18vh, 200px); background: linear-gradient(var(--light) 72%, var(--bone)); }
.fill { max-width: 19em; font: 350 clamp(2.05rem, 5.3vw, 5.1rem)/1.1 var(--display); letter-spacing: -0.028em; }
.creed-note { margin-top: 34px; max-width: 32em; font-size: clamp(1.06rem, 1.4vw, 1.22rem); color: var(--ink-soft); }

/* From the start: on a phone or without scroll effects, each step carries its own screen */
.story { padding-block: clamp(70px, 10vw, 140px); }
.story-grid { margin-top: clamp(30px, 5vw, 64px); }
.steps { display: grid; gap: clamp(36px, 6vw, 72px); }
.step-no { display: inline-grid; place-items: center; width: 42px; height: 52px; border-radius: 21px 21px 5px 5px; background: var(--forest); color: var(--light); font: 400 1.2rem/1 var(--display); padding-top: 4px; }
.step h3 { margin-top: 18px; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.04; letter-spacing: -0.025em; font-weight: 360; }
.step p { margin-top: 12px; max-width: 27em; font-size: clamp(1.06rem, 1.35vw, 1.2rem); line-height: 1.55; color: var(--ink-soft); }
.mini { margin-top: 22px; padding: 18px; border-radius: 26px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 26px 50px -36px rgb(21 47 38 / 55%); }
.phone-col { display: none; }

.screen { display: flex; flex-direction: column; gap: 11px; font-size: .86rem; line-height: 1.3; }
.ph-top, .ph-head { display: flex; align-items: center; gap: 10px; }
.ph-head { justify-content: space-between; }
.ph-head strong { font: 400 1.32rem/1.1 var(--display); letter-spacing: -0.015em; }
.ph-face { flex: none; display: grid; place-items: center; width: 46px; height: 54px; border-radius: 23px 23px 6px 6px; background: var(--light); color: var(--terra); }
.cat-face { height: 38px; width: auto; margin-top: 4px; }
.ph-who { flex: 1; display: grid; }
.ph-who strong { font: 400 1.3rem/1.1 var(--display); }
.ph-who small, .ph-rows small, .ph-foot, .ph-paper small { color: var(--muted); font-size: .76rem; }
.ph-next { display: grid; gap: 1px; padding: 14px 15px; border-radius: 18px; background: var(--forest); color: var(--paper); }
.ph-next small { color: var(--amber); font-weight: 600; font-size: .74rem; }
.ph-next strong { font: 400 1.3rem/1.2 var(--display); }
.ph-next span { font-size: .8rem; opacity: .82; }
.ph-facts { display: grid; gap: 7px; }
.ph-facts div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 13px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.ph-facts dt { font: 500 .78rem/1.3 var(--body); letter-spacing: 0; color: var(--muted); }
.ph-facts dd { font-weight: 600; font-size: .8rem; text-align: right; }
.ph-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ph-days span, .ph-slots span { padding: 10px 4px; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); text-align: center; font-weight: 600; font-size: .8rem; }
.ph-days .on { background: var(--forest); color: var(--paper); box-shadow: none; }
.ph-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.ph-slots .on { background: var(--terra); color: var(--paper); box-shadow: none; }
.ph-btn { padding: 13px; border-radius: 999px; background: var(--forest); color: var(--paper); font-weight: 600; text-align: center; }
.ph-foot { text-align: center; }
.ph-paper { position: relative; display: grid; gap: 10px; padding: 16px 16px 58px; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 16px 26px -22px rgb(21 47 38 / 60%); }
.ph-paper i { height: 7px; border-radius: 4px; background: var(--sand); }
.ph-paper .short { width: 62%; }
.mini .ph-paper i:nth-of-type(n + 7) { display: none; }
.ph-seal { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: var(--forest); color: var(--light); font-size: .72rem; font-weight: 600; }
.ph-rows { display: grid; gap: 8px; }
.ph-rows li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.ph-rows li > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--forest); }
.ph-rows .mine { background: var(--light); box-shadow: none; }
.ph-rows .mine > i { background: var(--terra); }
.ph-rows span { display: grid; }
.ph-rows strong { font-weight: 600; }
.ph-add { padding: 12px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-soft); font-weight: 600; text-align: center; }
.ph-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: auto; padding: 10px 6px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .64rem; font-weight: 600; text-align: center; }
.ph-tabs span { display: grid; justify-items: center; gap: 2px; }
.ph-tabs .on { color: var(--terra); }

/* You choose: real switches, and the card answers them with CSS alone */
.try { padding-block: clamp(70px, 10vw, 140px); background: var(--sage); counter-reset: shared; }
.try-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 6vw, 96px); align-items: center; }
.try-play { display: grid; gap: 18px; padding: clamp(18px, 2.4vw, 30px); border-radius: var(--radius); background: var(--paper); box-shadow: 0 40px 80px -60px rgb(21 47 38 / 70%), 0 0 0 1px var(--line); }
.switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.switches legend { margin-bottom: 12px; font-weight: 600; }
.switch { position: relative; display: flex; align-items: center; gap: 11px; min-height: 54px; padding: 8px 12px; border-radius: 14px; background: var(--bone); font-weight: 500; cursor: pointer; transition: background .2s; }
.switch:hover { background: var(--sand); }
.switch input { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 42px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
.switch input:checked { counter-increment: shared; }
.track { position: relative; flex: none; width: 42px; height: 26px; border-radius: 999px; background: rgb(21 47 38 / 22%); transition: background .25s; }
.track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); box-shadow: 0 2px 5px rgb(21 47 38 / 35%); transition: translate .28s var(--ease); }
input:checked + .track { background: var(--forest); }
input:checked + .track::after { translate: 16px 0; }
input:focus-visible + .track { outline: 3px solid var(--terra); outline-offset: 3px; }
.seen { padding: 14px; border-radius: 18px; background: var(--forest); color: var(--paper); }
.seen-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.seen-head strong { flex: 1; font: 400 1.1rem/1.2 var(--display); }
.seen-head .ph-face { width: 38px; height: 44px; border-radius: 19px 19px 5px 5px; }
.seen-head .cat-face { height: 30px; }
.count { flex: none; color: var(--amber); font-size: .84rem; font-weight: 600; }
.count b::before { content: counter(shared); font-weight: 700; }
.seen-row { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .32s var(--ease), opacity .25s; }
.seen-row > div { overflow: hidden; min-height: 0; }
.seen-row span { display: flex; align-items: center; gap: 9px; padding: 9px 2px; border-top: 1px solid var(--line-light); font-size: .95rem; }
.seen-row .icon { color: var(--amber); }
.try:has(#t-v:checked) .r-v, .try:has(#t-t:checked) .r-t, .try:has(#t-d:checked) .r-d, .try:has(#t-p:checked) .r-p { grid-template-rows: 1fr; opacity: 1; }
.seen-empty { display: none; padding: 12px 2px 6px; border-top: 1px solid var(--line-light); color: var(--light); }
.try:not(:has(.switch input:checked)) .seen-empty { display: block; }
.try-note { font-size: .92rem; color: var(--muted); }

/* What's next: a row of doors, one for each room to come */
.next { padding-block: clamp(70px, 10vw, 140px); }
.rail { --c: clamp(270px, 25vw, 340px); display: grid; grid-auto-flow: column; grid-auto-columns: var(--c); gap: 16px; margin-top: clamp(30px, 5vw, 60px); padding: 2px max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))) 18px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.room { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 480px; padding: calc(var(--c) * .16) 26px 28px; border-radius: calc(var(--c) / 2) calc(var(--c) / 2) 20px 20px; scroll-snap-align: start; transition: translate .4s var(--ease); }
.room:hover { translate: 0 -6px; }
.room-icon { align-self: center; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 1.3rem; background: rgb(255 255 255 / 12%); }
.room-tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .92; }
.room h3 { margin-top: 8px; font-size: clamp(1.7rem, 2.3vw, 2.1rem); line-height: 1.06; letter-spacing: -0.02em; font-weight: 370; }
.room p { margin-top: 10px; font-size: .98rem; line-height: 1.5; opacity: .9; }
.room-1 { background: var(--forest); color: var(--paper); }
.room-2 { background: var(--terra); color: var(--paper); }
.room-3 { background: var(--amber); }
.room-4 { background: var(--sage); }
.room-5 { background: var(--sand); }
.room-6 { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.room-3 .room-icon, .room-4 .room-icon, .room-5 .room-icon, .room-6 .room-icon { background: rgb(21 47 38 / 8%); }

/* The promise */
.promise { padding-block: clamp(80px, 11vw, 160px); background: var(--forest); color: var(--paper); }
.promise .eyebrow { color: var(--amber); }
.promise .head-lead { color: rgb(253 251 246 / 76%); }
.promise-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.promise-head { position: sticky; top: 120px; }
.promises > div { padding-block: clamp(20px, 2.4vw, 30px); border-top: 1px solid var(--line-light); }
.promises > div:first-child { border-top: 0; padding-top: 0; }
.promises dt { font-size: clamp(1.55rem, 2.6vw, 2.2rem); line-height: 1.1; color: var(--light); font-weight: 360; }
.promises dd { margin-top: 10px; max-width: 38em; color: rgb(253 251 246 / 78%); }
.proof { margin-top: 28px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-light); }
.proof h3 { font-size: 1.4rem; }
.proof ul { display: grid; gap: 8px; margin-top: 14px; }
.proof li { position: relative; padding-inline-start: 24px; color: rgb(253 251 246 / 84%); }
.proof li::before { content: ''; position: absolute; left: 0; top: .42em; width: 12px; height: 15px; border-radius: 6px 6px 1px 1px; background: var(--amber); }

/* Vets and partners */
.open { padding-block: clamp(70px, 10vw, 140px); }
.open-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-top: clamp(30px, 5vw, 60px); }
.vets, .api { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3.4vw, 48px); border-radius: var(--radius); }
.vets { background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.api { background: var(--forest); color: var(--paper); }
.vets h3, .api h3 { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 360; }
.vets-points { display: grid; gap: 16px; margin-block: 24px 28px; width: 100%; }
.vets-points li { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.vets-points strong { font: 400 1.26rem/1.2 var(--display); letter-spacing: -0.01em; }
.vets-points span { color: var(--ink-soft); }
.api .room-tag { margin-bottom: 14px; color: var(--amber); opacity: 1; }
.api > p { margin-top: 14px; color: rgb(253 251 246 / 80%); }
.code { width: 100%; margin-block: 22px 18px; padding: 16px 18px; border-radius: 16px; background: rgb(0 0 0 / 26%); font: 400 .84rem/1.6 ui-monospace, 'Cascadia Code', Consolas, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.code b { color: var(--amber); font-weight: 600; }
.code em { color: var(--amber); font-style: normal; font-weight: 600; }
.api .api-cta { margin-top: auto; padding-top: 6px; }
.api-cta a { color: var(--light); text-underline-offset: 3px; font-weight: 600; }

/* Close */
.close { position: relative; overflow: clip; padding-top: clamp(80px, 11vw, 150px); background: linear-gradient(var(--bone), var(--light)); text-align: center; }
.close-text p { margin: 16px auto 0; max-width: 27em; font-size: clamp(1.06rem, 1.4vw, 1.22rem); color: var(--ink-soft); }
.close-scene { width: min(100%, 680px); margin: clamp(30px, 4vw, 56px) auto 0; }
.close-scene .scene { height: auto; display: block; }
.close-scene .door, .close-scene .inside, .close-scene .spill { animation: none; }

/* Footer: paper, so the logo keeps its own colours */
.foot { position: relative; background: var(--paper); box-shadow: 0 -1px 0 var(--line); font-size: .95rem; color: var(--ink-soft); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(24px, 4vw, 56px); padding-block: 38px; }
.foot .brand { height: 36px; }
.foot p { flex: 1 1 320px; }
.foot p a { color: var(--forest); text-underline-offset: 3px; font-weight: 500; }

/* 404 */
.lost { min-height: 100svh; display: grid; place-items: center; padding: 24px; }
.lost-door { display: grid; justify-items: center; gap: 14px; width: min(100%, 520px); padding: clamp(64px, 12vw, 110px) 28px 56px; border-radius: 260px 260px 24px 24px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); text-align: center; }
.lost-door .mark { width: 74px; height: auto; }
.lost-door h1 { margin: 6px 0 0; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.08; letter-spacing: -0.02em; }
.lost-door p { color: var(--muted); margin-bottom: 14px; }

@keyframes line-up { from { transform: translateY(102%); } to { transform: none; } }
@keyframes door-open { from { transform: scaleX(3.62); } to { transform: none; } }
@keyframes glow-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(159 65 39 / 40%); } 60% { box-shadow: 0 0 0 7px rgb(159 65 39 / 0%); } }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
@keyframes text-away { to { opacity: 0; transform: translateY(-46px); } }
@keyframes door-zoom { to { transform: translateX(var(--shift)) scale(var(--zoom)); } }
@keyframes wash-in { to { opacity: 1; } }
@keyframes word-on { from { opacity: .16; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes screen-in { 0% { opacity: 0; transform: translateY(16px); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes step-focus { 0%, 100% { opacity: .28; } 30%, 70% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Scroll effects, only where the browser has them and the visitor has not asked for less motion. Everything above stands without them. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
    /* The inset matters: left to itself the timeline subtracts the page's scroll padding, and every effect would begin before the visitor scrolls. */
    .creed { view-timeline: --creed block; view-timeline-inset: 0; }
    .fill .w { animation: word-on linear both; animation-timeline: --creed; }
    .creed-note { animation: glow-in linear both; animation-timeline: --creed; animation-range: contain 74% contain 86%; }
  }
}

/* Walking through the door needs a screen tall enough to hold the whole hero while it is pinned. */
@media (prefers-reduced-motion: no-preference) and (min-height: 640px) and (min-width: 721px), (prefers-reduced-motion: no-preference) and (min-height: 600px) and (max-width: 720px) {
  @supports (animation-timeline: view()) {
    .stage { height: 230vh; view-timeline: --door block; view-timeline-inset: 0; }
    .stage-pin { position: sticky; top: 0; height: 100svh; min-height: 0; }
    /* What we believe stays on screen while its words light up, one after another. */
    .creed { height: 270vh; padding-block: 0; background: linear-gradient(var(--light) 90%, var(--bone)); }
    .creed-pin { position: sticky; top: 0; display: flex; align-items: center; height: 100svh; }
    .creed-pin .wrap { width: 100%; }
    .stage-text { animation: text-away linear both; animation-timeline: --door; animation-range: contain 0% contain 26%; }
    .scene-zoom { animation: door-zoom cubic-bezier(.55, .02, .75, .3) both; animation-timeline: --door; animation-range: contain 0% contain 94%; }
    .wash { animation: wash-in linear both; animation-timeline: --door; animation-range: contain 58% contain 90%; }
    .cue { animation: text-away linear both; animation-timeline: --door; animation-range: contain 0% contain 12%; }
  }
}

/* The phone that stays while the steps go by */
@media (prefers-reduced-motion: no-preference) and (min-width: 961px) and (min-height: 760px) {
  @supports (animation-timeline: view()) {
    .story { timeline-scope: --s1, --s2, --s3, --s4; }
    .story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); margin-top: 0; }
    .steps { gap: 0; }
    .step { display: flex !important; align-items: center; min-height: 84vh; }
    .step { view-timeline-inset: 0; }
    .step:nth-child(1) { view-timeline-name: --s1; }
    .step:nth-child(2) { view-timeline-name: --s2; }
    .step:nth-child(3) { view-timeline-name: --s3; }
    .step:nth-child(4) { view-timeline-name: --s4; }
    .step-text { animation: step-focus linear both; animation-timeline: view(block 0px); animation-range: cover 8% cover 92%; }
    .mini { display: none; }
    .phone-col { display: block; position: sticky; top: calc(50svh - 340px); height: 680px; }
    .phone { position: relative; width: 330px; height: 680px; margin-inline: auto; padding: 11px; border-radius: 54px; background: var(--forest); box-shadow: 0 60px 90px -50px rgb(21 47 38 / 65%), 0 0 0 1px rgb(255 255 255 / 6%) inset; }
    .phone-screen { position: relative; display: flex; flex-direction: column; height: 100%; padding: 56px 16px 0; border-radius: 44px; background: var(--bone); overflow: hidden; }
    .island { position: absolute; left: 50%; top: 13px; width: 92px; height: 26px; translate: -50% 0; border-radius: 999px; background: var(--forest); }
    .phone .screen { position: absolute; inset: 56px 16px 80px; opacity: 0; animation: screen-in linear both; animation-range: cover 6% cover 94%; }
    .phone .screen-1 { animation-timeline: --s1; }
    .phone .screen-2 { animation-timeline: --s2; }
    .phone .screen-3 { animation-timeline: --s3; }
    .phone .screen-4 { animation-timeline: --s4; }
    /* Inside the tall phone, each screen uses the whole height. */
    .phone .ph-next { padding: 20px 18px; }
    .phone .ph-facts { gap: 9px; }
    .phone .ph-facts div { padding: 15px 14px; }
    .phone .ph-slots { flex: 1; grid-auto-rows: 1fr; }
    .phone .ph-slots span, .phone .ph-days span { display: grid; place-items: center; }
    .phone .ph-paper { flex: 1; align-content: start; }
    .phone .ph-rows { gap: 10px; }
    .phone .ph-rows li { padding: 16px 14px; }
    .phone .ph-add { margin-top: auto; padding: 15px; }
  }
}

/* Layouts */
@media (min-width: 721px) {
  .cue { display: inline-flex; }
}
@media (min-width: 961px) {
  /* Without the pinned phone, each step sits beside its own screen, at the width of a phone. */
  .step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
  .mini { width: min(100%, 360px); margin: 0 auto; }
}
@media (max-width: 1240px) {
  /* Words and arch side by side need the arch to give way first. */
  .stage { --h: min(74svh, 46vw); }
  .actions .btn { padding-inline: 22px; }
}
@media (max-width: 1100px) {
  .top-nav { display: none; }
  .lang { margin-inline-start: auto; }
  .foot .lang { margin-inline-start: 0; }
}
@media (max-width: 960px) {
  .stage { --h: min(58svh, 78vw); --r: calc((100vw - var(--w)) / 2); --shift: 0px; --zoom: 12; }
  .stage-pin { display: block; }
  .stage-text { padding-block: 104px 0; }
  .lead, .note { max-width: 34em; }
  .scene-box { position: relative; inset: auto; height: var(--h); margin-top: 18px; }
  .cue { display: none; }
  .try-grid, .promise-grid, .open-grid { grid-template-columns: minmax(0, 1fr); }
  .promise-head { position: static; }
}
/* While pinned on a narrow screen the arch stands at the foot of the screen, in whatever height the words leave it. A phone's real height is far less than its
   screen once the browser's bars are counted, so this has to fit in about 650 pixels, or the walk through the door would never run on a real phone. */
@media (prefers-reduced-motion: no-preference) and (min-height: 640px) and (min-width: 721px) and (max-width: 960px), (prefers-reduced-motion: no-preference) and (min-height: 600px) and (max-width: 720px) {
  @supports (animation-timeline: view()) {
    .stage { --h2: min(calc(100svh - 620px), 72vw); }
    .scene-box { position: absolute; inset: 0; height: auto; margin: 0; }
    .scene-zoom { height: var(--h2); width: calc(var(--h2) * 1.179); right: calc((100vw - var(--h2) * 1.179) / 2); }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 600px) and (max-width: 720px) {
  @supports (animation-timeline: view()) {
    .stage { --h2: min(calc(100svh - 570px), 72vw); }
    .stage-text { padding-block: 84px 0; }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 600px) and (max-height: 759px) and (max-width: 720px) {
  @supports (animation-timeline: view()) {
    /* The status above the title already says the app is not ready; on a short phone the arch needs this line's room. */
    .note { display: none; }
    .stage { --h2: min(calc(100svh - 500px), 72vw); }
  }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 84px; }
  .top { top: 10px; }
  .top-row { height: 56px; padding-inline: 16px 8px; }
  .brand { height: 26px; }
  .status { padding-block: 5px; font-size: .82rem; }
  h1 { margin-top: 14px; font-size: clamp(2.7rem, min(15vw, 7.6svh), 4.4rem); }
  .lead { margin-top: 12px; font-size: 1.02rem; line-height: 1.42; }
  .actions { gap: 2px 12px; margin-top: 14px; }
  .btn { min-height: 50px; padding-inline: 22px; }
  .actions .btn-ghost { background: transparent; box-shadow: none; padding-inline: 4px; min-height: 40px; font-size: .95rem; text-decoration: underline; text-underline-offset: 4px; }
  .actions .btn-ghost:hover { background: transparent; }
  .note { margin-top: 8px; font-size: .86rem; line-height: 1.4; }
  .switches { grid-template-columns: minmax(0, 1fr); }
  .room { min-height: 440px; }
  .foot-row { flex-direction: column; align-items: flex-start; }
}
@media print {
  .top, .wash, .cue { display: none; }
  .fill .w, .reveal { animation: none; opacity: 1; }
}

.fill .w:nth-child(1) { animation-range: contain 4.0% contain 11.0%; }
.fill .w:nth-child(2) { animation-range: contain 6.4% contain 13.4%; }
.fill .w:nth-child(3) { animation-range: contain 8.7% contain 15.7%; }
.fill .w:nth-child(4) { animation-range: contain 11.1% contain 18.1%; }
.fill .w:nth-child(5) { animation-range: contain 13.4% contain 20.4%; }
.fill .w:nth-child(6) { animation-range: contain 15.8% contain 22.8%; }
.fill .w:nth-child(7) { animation-range: contain 18.1% contain 25.1%; }
.fill .w:nth-child(8) { animation-range: contain 20.5% contain 27.5%; }
.fill .w:nth-child(9) { animation-range: contain 22.9% contain 29.9%; }
.fill .w:nth-child(10) { animation-range: contain 25.2% contain 32.2%; }
.fill .w:nth-child(11) { animation-range: contain 27.6% contain 34.6%; }
.fill .w:nth-child(12) { animation-range: contain 29.9% contain 36.9%; }
.fill .w:nth-child(13) { animation-range: contain 32.3% contain 39.3%; }
.fill .w:nth-child(14) { animation-range: contain 34.6% contain 41.6%; }
.fill .w:nth-child(15) { animation-range: contain 37.0% contain 44.0%; }
.fill .w:nth-child(16) { animation-range: contain 39.4% contain 46.4%; }
.fill .w:nth-child(17) { animation-range: contain 41.7% contain 48.7%; }
.fill .w:nth-child(18) { animation-range: contain 44.1% contain 51.1%; }
.fill .w:nth-child(19) { animation-range: contain 46.4% contain 53.4%; }
.fill .w:nth-child(20) { animation-range: contain 48.8% contain 55.8%; }
.fill .w:nth-child(21) { animation-range: contain 51.1% contain 58.1%; }
.fill .w:nth-child(22) { animation-range: contain 53.5% contain 60.5%; }
.fill .w:nth-child(23) { animation-range: contain 55.9% contain 62.9%; }
.fill .w:nth-child(24) { animation-range: contain 58.2% contain 65.2%; }
.fill .w:nth-child(25) { animation-range: contain 60.6% contain 67.6%; }
.fill .w:nth-child(26) { animation-range: contain 62.9% contain 69.9%; }
.fill .w:nth-child(27) { animation-range: contain 65.3% contain 72.3%; }
.fill .w:nth-child(28) { animation-range: contain 67.6% contain 74.6%; }