/* Axava Builds. Mona Sans + Source Serif 4 on plaster; ink, foam, one kiln word. */

@font-face { font-family: 'Mona Sans'; src: url(fonts/monasans-latin.woff2) format('woff2'); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url(fonts/sourceserif4-latin.woff2) format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url(fonts/sourceserif4-italic-latin.woff2) format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  --plaster: #DEDFDB; --foam: #F6F6F3; --ink: #121314; --graphite: #4D4F4E; --pencil: #8D8F8B; --kiln: #C2380A;
  --rule: rgba(18, 19, 20, .16); --rule-foam: rgba(246, 246, 243, .16);
  --g: max(24px, env(safe-area-inset-left), env(safe-area-inset-right)); --hdr: 72px; --col-gap: 16px;
  --mona: 'Mona Sans', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sec: clamp(96px, 12vw, 200px);
}
@media (min-width: 1024px) { :root { --g: clamp(40px, 4.4vw, 72px); --hdr: 88px; --col-gap: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); background: var(--plaster); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--plaster); color: var(--ink); font: 400 18px/1.55 var(--serif); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
@media (min-width: 1024px) { body { font-size: 20px; line-height: 1.55; } }
img, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, fieldset, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--kiln); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--g); top: 8px; z-index: 100; background: var(--ink); color: var(--foam); padding: 12px 18px; font: 600 16px var(--mona); transform: translateY(-160%); }
.skip:focus { transform: none; }

/* ------------------------------------------------------------ type */
.display { font-family: var(--mona); font-weight: 780; font-stretch: 100%; letter-spacing: -0.042em; line-height: .9; font-size: clamp(44px, 11.5vw, 64px); text-wrap: balance; }
.display .ln { display: inline; }
@media (min-width: 768px) {
  .display { font-size: clamp(64px, 8vw, 132px); text-wrap: initial; }
  .display .ln { display: block; white-space: nowrap; }
}
.display.is-fit .ln { font-size: var(--fs); font-stretch: var(--wd, 100%); }
.k { color: var(--kiln); }
.lead { font-size: 19px; line-height: 1.5; max-width: 34em; }
@media (min-width: 1024px) { .lead { font-size: 22px; line-height: 1.5; } }
.cap { font-style: italic; font-size: 15px; line-height: 1.45; color: var(--graphite); }
@media (min-width: 1024px) { .cap { font-size: 16px; } }

/* ------------------------------------------------------------ buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 26px; border: 0; border-radius: 0; font: 620 17px/1.1 var(--mona); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; white-space: nowrap; }
@media (min-width: 1024px) { .btn { min-height: 60px; padding: 0 30px; font-size: 18px; } }
.btn-xl { min-height: 60px; padding: 0 34px; font-size: 19px; }
@media (min-width: 1024px) { .btn-xl { min-height: 68px; padding: 0 40px; font-size: 20px; } }
.btn-ink { background: var(--ink); color: var(--foam); }
.btn-ink:hover { background: #2B2D2E; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--foam); }
.btn-foam { background: var(--foam); color: var(--ink); }
.btn-foam:hover { background: #fff; }
.btn-line-foam { background: transparent; color: var(--foam); box-shadow: inset 0 0 0 1.5px var(--foam); }
.btn-line-foam:hover { background: var(--foam); color: var(--ink); }
.tlink { font: 620 17px/1.3 var(--mona); letter-spacing: -0.01em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .28em; transition: color .2s; }
@media (min-width: 1024px) { .tlink { font-size: 18px; } }
.tlink:hover { color: var(--kiln); }
.soon { font: italic 400 17px/1.3 var(--serif); color: var(--graphite); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }

/* ------------------------------------------------------------ header: the Dock, at the top
   One ink slab floating near the top edge, inset from the sides, drawn like one of the street's model bases: its
   kiln lip fills left to right as you read. It never hides; on a laptop it tightens a little once you scroll. */
.hdr { position: fixed; z-index: 50; top: 14px; left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: calc(100vw - 2 * var(--g)); height: 64px; display: flex; align-items: center; padding: 0 8px 0 22px; background: var(--ink); color: var(--foam); border-radius: 6px; box-shadow: 0 22px 40px -24px rgba(18, 19, 20, .62), 0 2px 8px rgba(18, 19, 20, .12); transition: top .35s cubic-bezier(.2, .7, .2, 1), height .35s cubic-bezier(.2, .7, .2, 1), background-color .3s, color .3s; }
.hdr :focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.hdr-brand { position: relative; flex: none; display: block; width: 132px; height: 22px; margin-right: 18px; }
.hdr-brand img { position: absolute; left: 0; top: 0; height: 22px; width: auto; transition: opacity .3s; }
.hdr-brand .hb-lt, .hdr-brand .hb-mk { opacity: 0; }
.hdr-sep { flex: none; width: 1px; height: 28px; background: rgba(246, 246, 243, .18); margin: 0 8px; transition: background-color .3s; }
.nav { display: flex; align-items: stretch; height: 100%; }
.nav a { position: relative; display: flex; align-items: center; padding: 0 13px; font: 620 17px/1 var(--mona); letter-spacing: -0.01em; color: rgba(246, 246, 243, .68); text-decoration: none; transition: color .2s; }
.nav a:hover, .nav a[aria-current], .nav a.is-here { color: var(--foam); }
/* the current page wears the logo's orange stripe */
.nav a::before { content: ''; position: absolute; left: 1px; top: 50%; width: 6px; height: 14px; margin-top: -7px; background: linear-gradient(200deg, #F07010, #E04010); clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%); opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.nav a[aria-current]::before, .nav a.is-here::before { opacity: 1; transform: none; }
.hdr-tel { display: flex; align-items: center; height: 100%; padding: 0 16px 0 12px; font: 620 17px/1 var(--mona); letter-spacing: -0.01em; color: rgba(246, 246, 243, .68); text-decoration: none; white-space: nowrap; transition: color .2s; }
.hdr-tel:hover { color: var(--foam); }
.hdr-cta { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; background: var(--foam); color: var(--ink); font: 620 17px/1 var(--mona); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; border-radius: 3px; transition: background-color .2s, color .2s, height .35s; }
.hdr-cta:hover { background: #fff; }
.hdr-lip { position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; background: rgba(246, 246, 243, .12); overflow: hidden; pointer-events: none; transition: background-color .3s; }
.hdr-lip i { position: absolute; inset: 0; background: var(--kiln); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.menu-b, .hdr-call { display: none; }
.is-scrolled .hdr { top: 10px; height: 56px; }
.is-scrolled .hdr-cta { height: 42px; }
@media (min-width: 1024px) and (max-width: 1180px) { .nav a { padding: 0 9px; } .hdr-tel { padding: 0 12px 0 8px; } .hdr { padding-left: 18px; } .hdr-brand { margin-right: 12px; } }
/* over an ink section (the closing band, the footer, a dark build's moves) it turns to foam, so it never sinks */
.hdr.on-ink { background: var(--foam); color: var(--ink); box-shadow: 0 22px 40px -24px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .2); }
.hdr.on-ink .hb-dk { opacity: 0; }
.hdr.on-ink .hb-lt { opacity: 1; }
.hdr.on-ink .hdr-sep { background: rgba(18, 19, 20, .16); }
.hdr.on-ink .hdr-lip { background: rgba(18, 19, 20, .12); }
.hdr.on-ink .nav a, .hdr.on-ink .hdr-tel { color: rgba(18, 19, 20, .62); }
.hdr.on-ink .nav a:hover, .hdr.on-ink .nav a[aria-current], .hdr.on-ink .nav a.is-here, .hdr.on-ink .hdr-tel:hover { color: var(--ink); }
.hdr.on-ink .hdr-cta { background: var(--ink); color: var(--foam); }
.hdr.on-ink .menu-b, .hdr.on-ink .hdr-call { color: var(--ink); }
.hdr.on-ink .hdr-call { border-color: rgba(18, 19, 20, .16); }
/* phone and tablet: the same slab, nearly full width, with the mark, Menu, Call and Start a project */
@media (max-width: 1023px) {
  .hdr { top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; width: auto; max-width: 560px; height: 56px; padding: 0 4px 0 0; }
  .is-scrolled .hdr { top: calc(8px + env(safe-area-inset-top)); height: 56px; }
  .hdr-brand { width: 52px; height: 48px; margin: 0; display: flex; align-items: center; justify-content: center; }
  .hdr-brand .hb-dk, .hdr-brand .hb-lt { display: none; }
  .hdr-brand .hb-mk { position: static; opacity: 1; width: 27px; height: 22px; }
  .nav, .hdr-tel, .hdr-sep { display: none; }
  .menu-b { display: flex; align-items: center; height: 48px; padding: 0 14px 0 6px; margin-right: auto; background: none; border: 0; color: var(--foam); font: 620 16px/1 var(--mona); letter-spacing: -0.01em; cursor: pointer; }
  .hdr-call { display: flex; align-items: center; height: 48px; padding: 0 16px; border-left: 1px solid rgba(246, 246, 243, .18); color: var(--foam); font: 620 16px/1 var(--mona); letter-spacing: -0.01em; text-decoration: none; }
  .hdr-cta, .is-scrolled .hdr-cta { height: 48px; padding: 0 16px; margin-left: 4px; font-size: 16px; }
  .hdr-lip { left: 4px; right: 4px; }
}
@media (max-width: 359px) { .hdr-call { display: none; } }
/* the phone menu: full screen under the slab, large links, page scroll held */
.menu { position: fixed; inset: 0; z-index: 49; background: var(--plaster); padding: calc(var(--hdr) + 24px) var(--g) calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; opacity: 0; transition: opacity .25s; overflow-y: auto; overscroll-behavior: contain; }
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu-nav { display: flex; flex-direction: column; }
.ln-i { font: 780 clamp(44px, 12vw, 56px)/1.12 var(--mona); letter-spacing: -0.04em; text-decoration: none; padding: 6px 0; opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .45s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 40ms); }
.menu.is-open .ln-i { opacity: 1; transform: none; }
.ln-i[aria-current] { color: var(--kiln); }
.menu-act { display: flex; flex-wrap: wrap; gap: 4px 28px; padding-top: 18px; border-top: 1px solid var(--rule); }
.menu-act .tlink { padding: 12px 0; font-size: 19px; }
.menu-open { overflow: hidden; }
@media (min-width: 1024px) { .menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .hdr, .hdr-brand img, .hdr-cta, .nav a::before, .menu, .ln-i { transition: none; } }

/* ------------------------------------------------------------ shared section frames */
main { display: block; }
.page-head { padding: calc(var(--hdr) + clamp(44px, 8vh, 104px)) var(--g) clamp(40px, 5vw, 80px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; }
.page-head .display { grid-column: 1 / -1; }
.page-head > .lead, .page-head > .about-facts { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .page-head .display { grid-column: 1 / 11; }
  .page-head > .lead, .page-head > .about-facts { grid-column: 7 / 13; }
}
.about-facts { display: grid; gap: 18px; }

.still { display: none; }
.no-webgl .still, .rm .still { display: block; }
.no-webgl .stage, .rm .stage { display: none; }
.still img { width: 100%; }

/* ------------------------------------------------------------ the stage (sticky WebGL) */
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 0; pointer-events: none; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
.gl-live .stage canvas { opacity: 1; }
.anchor { pointer-events: none; }

/* ------------------------------------------------------------ home: On Spec */
.spec { position: relative; }
.spec-hero { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr) + 20px) var(--g) 28px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; row-gap: 22px; }
.rm .spec-hero, .no-webgl .spec-hero { margin-top: 0; }
.h-hero { grid-row: 1; }
@media (max-width: 767px) { .h-hero { font-size: min(14.4vw, 64px); } }
.hero-low { grid-row: 2; display: grid; gap: 22px; }
.spec-hero .anchor { grid-row: 3; grid-column: 1 / -1; min-height: 34svh; }
.spec-hero .still-hero { grid-row: 3; grid-column: 1 / -1; align-self: center; }
.hero-cap { grid-row: 4; text-align: right; display: none; }
@media (min-width: 1024px) {
  .spec-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: var(--col-gap); row-gap: 0; padding-top: calc(var(--hdr) + clamp(28px, 6vh, 72px)); padding-bottom: clamp(24px, 5vh, 56px); }
  .h-hero { grid-column: 1 / 12; grid-row: 1; }
  .hero-low { grid-column: 1 / 6; grid-row: 2 / 4; align-self: end; gap: 32px; padding-bottom: 8px; }
  .spec-hero .anchor { grid-column: 6 / 13; grid-row: 2; margin-top: 40px; min-height: 0; } /* a little air under "order" */
  .spec-hero .still-hero { grid-column: 6 / 13; grid-row: 2; }
  .hero-cap { grid-column: 7 / 13; grid-row: 3; padding-top: 10px; display: block; }
}
.hold { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr) + 24px) var(--g) 24px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.hold-txt { display: grid; gap: 18px; max-width: 40em; }
.hold-name { font: 780 clamp(44px, 12vw, 64px)/1 var(--mona); letter-spacing: -0.045em; padding-bottom: 4px; }
.hold-line { font-size: 18px; line-height: 1.5; }
.hold .acts { margin-top: 6px; }
.hold-intro .hold-txt { max-width: none; gap: 24px; }
.rm .hold, .no-webgl .hold { min-height: 0; padding-block: 48px; gap: 24px; }
.rm .hold .still, .no-webgl .hold .still { order: 2; }
@media (min-width: 1024px) {
  .hold { min-height: 100vh; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-content: center; padding-block: 12vh; }
  .hold[data-side="r"] .hold-txt { grid-column: 8 / 13; }
  .hold[data-side="l"] .hold-txt { grid-column: 1 / 6; }
  .hold-name { font-size: clamp(56px, 6vw, 104px); }
  .hold-line { font-size: 21px; }
  .hold-intro { align-content: start; padding-top: calc(var(--hdr) + 9vh); min-height: 110vh; }
  .hold-intro .hold-txt { grid-column: 1 / 12; }
  .hold-intro .lead { max-width: 30em; }
  .rm .hold[data-side="r"] .still, .no-webgl .hold[data-side="r"] .still { grid-column: 1 / 8; grid-row: 1; order: 0; }
  .rm .hold[data-side="l"] .still, .no-webgl .hold[data-side="l"] .still { grid-column: 6 / 13; grid-row: 1; order: 0; }
  .rm .hold, .no-webgl .hold { align-items: center; padding-block: 8vh; }
}

/* ------------------------------------------------------------ home: offers, how, tease, who */
.offers { padding: var(--sec) var(--g); display: grid; gap: clamp(72px, 9vw, 140px); }
.offer { display: grid; gap: 22px; }
.offer-h { font: 780 clamp(76px, 22vw, 120px)/.84 var(--mona); letter-spacing: -0.055em; padding-bottom: 10px; }
.offer-txt { display: grid; gap: 18px; }
.offer-more { display: flex; flex-wrap: wrap; gap: 12px 28px; }
@media (min-width: 1024px) {
  .offer { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .offer-h { font-size: clamp(120px, 12.4vw, 220px); }
  .offer-web .offer-h { grid-column: 1 / 8; }
  .offer-web .offer-txt { grid-column: 8 / 13; padding-bottom: .6em; }
  .offer-app .offer-h { grid-column: 6 / 13; grid-row: 1; text-align: right; }
  .offer-app .offer-txt { grid-column: 1 / 6; grid-row: 1; padding-bottom: .6em; }
}
.how { padding: var(--sec) var(--g); display: grid; justify-items: center; text-align: center; gap: clamp(48px, 6vw, 88px); background: var(--foam); }
.how .display { justify-self: center; }
.steps { width: 100%; max-width: 980px; text-align: left; border-top: 1.5px solid var(--ink); }
.steps li { display: grid; gap: 8px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.steps h3 { font: 700 22px/1.2 var(--mona); letter-spacing: -0.02em; }
@media (min-width: 768px) { .steps li { grid-template-columns: 5fr 7fr; gap: 32px; padding: 32px 0; } .steps h3 { font-size: 26px; } }
.tease { padding: var(--sec) var(--g); display: grid; gap: 40px; }
.tease-rows { display: grid; border-top: 1.5px solid var(--ink); }
.tease-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--rule); text-decoration: none; transition: color .2s; }
.tease-row:hover { color: var(--kiln); }
.tease-n { font: 720 clamp(24px, 2.4vw, 36px)/1.1 var(--mona); letter-spacing: -0.03em; }
.tease-p { font: 720 clamp(22px, 2.2vw, 34px)/1.1 var(--mona); letter-spacing: -0.02em; text-align: right; }
.tbc { font: italic 400 17px/1.3 var(--serif); color: var(--graphite); letter-spacing: 0; }
.tease-rows p { padding-top: 24px; }
@media (min-width: 1024px) {
  .tease { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .tease .display { grid-column: 1 / 6; }
  .tease-rows { grid-column: 7 / 13; margin-top: 10px; }
}
.who { padding: var(--sec) var(--g); display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .who { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .who .display { grid-column: 2 / 13; justify-self: end; text-align: right; }
  .who-txt { grid-column: 7 / 13; }
}
.who-txt { display: grid; gap: 22px; }

/* ------------------------------------------------------------ closing band + footer */
.band { background: var(--ink); color: var(--foam); padding: clamp(88px, 10vw, 168px) var(--g) clamp(72px, 8vw, 128px); display: grid; gap: 40px; }
.band-line { font: 780 clamp(44px, 11vw, 64px)/.92 var(--mona); letter-spacing: -0.045em; max-width: 12em; }
.band-act { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.band-act .btn { flex: 1 1 220px; }
.band-tel { flex-basis: 100%; font-size: 17px; color: rgba(246, 246, 243, .72); padding-top: 6px; }
.band-tel a { color: var(--foam); text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (min-width: 1024px) {
  .band { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .band-line { grid-column: 1 / 8; font-size: clamp(64px, 6.6vw, 112px); }
  .band-act { grid-column: 8 / 13; }
  .band-act .btn { flex: 1 1 100%; }
}
.foot { background: var(--ink); color: rgba(246, 246, 243, .72); padding: 0 var(--g) calc(32px + env(safe-area-inset-bottom)); font-size: 16px; }
@media (min-width: 1024px) { .foot { padding-bottom: 40px; } }
.foot-top { display: grid; gap: 36px; padding: 56px 0 48px; border-top: 1px solid var(--rule-foam); }
.band + * .foot-top { border-top: 0; }
.foot-logo img { height: 26px; width: auto; }
.foot-id { display: grid; gap: 18px; max-width: 26em; }
.foot-nav, .foot-contact { display: grid; gap: 4px; align-content: start; }
.foot-nav a, .foot-contact a { color: var(--foam); text-decoration: none; font: 600 17px/1.2 var(--mona); padding: 9px 0; letter-spacing: -0.01em; }
.foot-nav a:hover, .foot-contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.foot-contact p { padding-top: 6px; }
.foot-note { max-width: 46em; font-size: 15px; font-style: italic; padding: 24px 0 10px; border-top: 1px solid var(--rule-foam); }
.foot-legal { font-size: 14px; }
@media (min-width: 1024px) {
  .foot-top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .foot-id { grid-column: 1 / 6; }
  .foot-nav { grid-column: 7 / 9; }
  .foot-contact { grid-column: 9 / 13; }
}

/* ------------------------------------------------------------ work: rooms */
.rooms { overflow: clip; background: var(--cur, var(--plaster)); transition: background-color .7s cubic-bezier(.3, .6, .3, 1); }
.room { min-height: 100vh; min-height: 100svh; padding: clamp(80px, 12vh, 140px) var(--g); display: grid; gap: 36px; align-content: center; color: var(--rp); }
.room-txt { display: grid; gap: 20px; max-width: 34em; }
.room-name { font-size: clamp(52px, 13vw, 84px); line-height: .96; padding-bottom: 18px; }
.room-line { font: 650 21px/1.3 var(--mona); letter-spacing: -0.015em; }
.room-more { font-size: 18px; line-height: 1.55; opacity: .86; }
.btn-room { background: var(--ra); color: var(--ro); }
.btn-room:hover { filter: brightness(1.08); }
.tlink-room { color: var(--rp); }
.tlink-room:hover { color: var(--ra); }
.room-shot { display: block; box-shadow: 0 0 0 1px rgba(127, 127, 127, .22), 0 40px 80px -30px rgba(0, 0, 0, .5); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.room-shot:hover { transform: translateY(-6px); }
.room-shot img { width: 100%; }
.room .soon { color: var(--rp); opacity: .8; }
@media (min-width: 1024px) {
  .room { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
  .room-txt { grid-column: 1 / 5; }
  .room-shot { grid-column: 6 / 13; }
  .room-l .room-txt { grid-column: 9 / 13; grid-row: 1; }
  .room-l .room-shot { grid-column: 1 / 8; grid-row: 1; }
  .room-name { font-size: clamp(64px, 6.4vw, 112px); }
}
.note { padding: clamp(72px, 9vw, 140px) var(--g); }
.note p { max-width: 38em; font-size: 19px; color: var(--graphite); font-style: italic; }
@media (min-width: 1024px) { .note p { margin-left: calc((100% - 0px) * 6 / 12); font-size: 20px; } }

/* ------------------------------------------------------------ case study */
.case-open { position: relative; }
.case-head { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr) + 24px) var(--g) 32px; display: grid; grid-template-rows: auto 1fr; gap: 24px; }
.rm .case-head, .no-webgl .case-head { margin-top: 0; min-height: 0; }
.case-txt { display: grid; gap: 20px; align-content: start; }
.h-case { line-height: .88; }
.case-txt .cap { margin-top: -6px; }
.case-head .anchor { grid-row: 2; grid-column: 1 / -1; min-height: 36svh; }
.case-head .still-case { grid-row: 2; grid-column: 1 / -1; align-self: center; }
@media (min-width: 1024px) {
  .case-head { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap: var(--col-gap); align-items: center; padding-bottom: 48px; }
  .case-txt { grid-column: 1 / 6; gap: 26px; }
  .case-head .anchor { grid-column: 6 / 13; grid-row: 1; align-self: stretch; margin-block: 6vh; }
  .case-head .still-case { grid-column: 6 / 13; grid-row: 1; }
}
.inside { position: relative; z-index: 1; padding: 38vh var(--g) 0; }
.rm .inside, .no-webgl .inside { padding-top: 56px; }
.inside-shot { max-width: 1320px; margin: 0 auto; display: grid; gap: 14px; }
.inside-shot img { width: 100%; box-shadow: 0 0 0 1px rgba(18, 19, 20, .12), 0 40px 90px -40px rgba(18, 19, 20, .55); }
.gl-live .inside-shot img { opacity: var(--shot-o, 0); }
.inside-shot figcaption { font-style: italic; font-size: 15px; color: var(--graphite); }
.biz { padding: var(--sec) var(--g); display: grid; gap: 48px; }
.biz-txt { display: grid; gap: 22px; align-content: start; }
.biz-txt p { max-width: 34em; }
.spec-card { background: var(--sg); color: var(--sp); padding: clamp(32px, 4vw, 64px); display: grid; gap: 28px; align-content: space-between; min-height: 360px; box-shadow: 0 40px 80px -40px rgba(18, 19, 20, .5); }
.spec-type { font-size: clamp(42px, 10vw, 64px); line-height: .96; display: grid; }
.spec-type em { font-style: normal; color: var(--sa); }
.spec-note { font-size: 16px; line-height: 1.55; opacity: .82; max-width: 32em; }
@media (min-width: 1024px) {
  .biz { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .biz-txt { grid-column: 1 / 6; }
  .spec-card { grid-column: 7 / 13; min-height: 560px; }
  .spec-type { font-size: clamp(56px, 5.6vw, 100px); }
}
.moves { padding: var(--sec) var(--g); display: grid; gap: clamp(64px, 8vw, 120px); background: var(--mg); color: var(--mp); }
.moves-h { font-size: clamp(48px, 13vw, 80px); line-height: .95; display: grid; }
.moves-h em, .move-txt h3 em { font-style: normal; color: var(--ma); }
.move { display: grid; gap: 24px; }
.move-txt { display: grid; gap: 14px; align-content: center; }
.move-txt h3 { font-size: clamp(30px, 3vw, 48px); line-height: 1; }
.move-txt p { max-width: 30em; opacity: .88; }
.move-fig { position: relative; background: #000; box-shadow: 0 0 0 1px rgba(127, 127, 127, .25), 0 40px 80px -40px rgba(0, 0, 0, .6); aspect-ratio: 16 / 10; overflow: hidden; }
.move-fig img, .move-fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.move-fig canvas { opacity: 0; }
.move-fig.is-live canvas { opacity: 1; }
@media (min-width: 1024px) {
  .moves-h { font-size: clamp(72px, 6.4vw, 120px); max-width: 12em; }
  .move { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
  .move-txt { grid-column: 1 / 5; }
  .move-fig { grid-column: 5 / 13; }
  .move-l .move-txt { grid-column: 9 / 13; grid-row: 1; }
  .move-l .move-fig { grid-column: 1 / 9; grid-row: 1; }
}
.win { position: relative; padding: var(--sec) var(--g) 0; }
.win-txt { display: grid; gap: 22px; padding-bottom: 24px; }
/* the run is as long as the screen's travel (case.js sets it); the stage pins inside it */
.win-stage { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr)); padding: 8px 0 calc(16px + env(safe-area-inset-bottom)); display: grid; place-items: center; }
.win-dev { position: relative; }
.win-cut { position: relative; width: var(--hole-w, 300px); height: var(--hole-h, 650px); overflow: hidden; background: var(--win-bg, var(--ink)); border-radius: 2px; box-shadow: 0 0 0 1px rgba(18, 19, 20, .14), 0 2px 0 rgba(255, 255, 255, .5); }
.win-cut::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 12px 16px -8px rgba(0, 0, 0, .5), inset 8px 0 12px -8px rgba(0, 0, 0, .32), inset -4px 0 8px -6px rgba(0, 0, 0, .22); }
.win-strip { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.win-strip img { width: 100%; height: auto; display: block; }
/* a layered strip's sticky stage, held in the screen behind the sliding page (case.js scrubs its frames) */
.win-bg { position: absolute; left: 0; top: 0; width: 100%; background-size: cover !important; will-change: transform; }
/* soft fades inside the screen, each gone once there is nothing more past its edge. The fade is a 1x32 image, not
   a CSS gradient: a gradient's first draw compiled a new GPU pipeline mid-scroll and cost phones one 150ms frame */
.win-fade::before, .win-fade::after { content: ''; position: absolute; left: 0; right: 0; height: 44px; pointer-events: none; transition: opacity .25s; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAUElEQVR4nD3EQQfCAAAG0G9rUyYzMzEjJiJihxEdosPo//+jvMve4SXJL0k2ffXRWy+tWvTUQ3fdNOuqSaMuGtSrU6uzGp10VK1KB5UqsvsDjiMDee7IjZYAAAAASUVORK5CYII=) 0 0 / 100% 100% no-repeat; }
.win-fade::before { top: 0; opacity: 0; }
.win-fade::after { bottom: 0; transform: scaleY(-1); }
.win[data-edge="mid"] .win-fade::before, .win[data-edge="end"] .win-fade::before { opacity: 1; }
.win[data-edge="end"] .win-fade::after { opacity: 0; }
.win-tick { position: absolute; z-index: 2; top: 6px; bottom: 6px; right: 3px; width: 3px; pointer-events: none; opacity: 0; transition: opacity .3s; }
/* a phone's own scroll indicator, inside the screen, only while the screen is the thing scrolling */
.win[data-edge="mid"] .win-tick { opacity: 1; }
.win-tick i { position: absolute; left: 0; top: 0; width: 3px; height: 40px; border-radius: 2px; background: rgba(18, 19, 20, .5); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); will-change: transform; }
.win-still { display: none; }
/* reduced motion, or a strip that can't load: the still, in the flow */
.rm .win-stage, .no-strip .win-stage { position: static; height: auto; padding: 0; }
.rm .win-dev, .no-strip .win-dev { display: none; }
.rm .win-still, .no-strip .win-still { display: block; width: min(340px, 80vw); margin: 0 auto; box-shadow: 0 30px 60px -30px rgba(18, 19, 20, .5); }
@media (min-width: 1024px) {
  .win { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  /* the words pin with the phone: same top and same height, so both hold and both let go together */
  .win-txt { grid-column: 1 / 6; grid-row: 1; position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); align-content: center; padding-bottom: 0; }
  .win-run { grid-column: 6 / 13; grid-row: 1; }
  .win-stage { height: calc(100vh - var(--hdr)); padding: 24px 0; }
  .rm .win-txt, .no-strip .win-txt { position: static; height: auto; }
  .rm .win, .no-strip .win { padding-bottom: var(--sec); }
}
/* pinned moves: case.js sets each run's length and its article's top */
.move-run .move { position: sticky; }
.pages { padding: var(--sec) 0; overflow: clip; display: grid; gap: 48px; }
.pages .display { padding: 0 var(--g); max-width: 980px; }
.pg-row { display: flex; gap: clamp(16px, 2vw, 32px); padding: 0 var(--g); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pg-row::-webkit-scrollbar { display: none; }
.pg { flex: none; width: min(78vw, 640px); display: grid; gap: 12px; }
.pg img { width: 100%; box-shadow: 0 0 0 1px rgba(18, 19, 20, .12), 0 24px 48px -28px rgba(18, 19, 20, .5); }
.pg figcaption { font: 620 17px var(--mona); letter-spacing: -0.01em; }
.pg figcaption a { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1.5px; }
@media (min-width: 1024px) { .pg { width: clamp(420px, 38vw, 700px); } }
.next { display: grid; gap: 10px; overflow: clip; padding: clamp(80px, 12vw, 180px) var(--g); background: var(--ng); color: var(--np); text-decoration: none; }
.next-k { font: 620 max(18px, .2em) var(--mona); letter-spacing: -0.01em; opacity: .75; margin-right: .15em; }
.next-n { font-size: clamp(56px, 11vw, 180px); line-height: .92; letter-spacing: -0.02em; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.next:hover .next-n { transform: translateX(14px); }

/* ------------------------------------------------------------ websites: tilt-up */
.tilt { position: relative; }
.tilt .stage + .tilt-ch { margin-top: -100vh; margin-top: -100svh; }
.tilt-ch { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr) + 24px) var(--g) 24px; display: grid; gap: 18px; align-content: start; }
.tilt-ch h2 { font: 780 clamp(36px, 9vw, 56px)/.95 var(--mona); letter-spacing: -0.04em; max-width: 11em; }
.tilt-ch p { max-width: 30em; }
.tilt-url { margin-top: 14px; max-width: none !important; color: var(--ink); }
.tilt-ch[data-ch="3"] h2 { font-size: clamp(30px, 7vw, 44px); }
.rm .tilt-ch, .no-webgl .tilt-ch { min-height: 0; padding-block: 40px; margin-top: 0 !important; }
.still-tilt { padding: 0 var(--g); }
@media (min-width: 1024px) {
  .tilt-ch { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-content: center; min-height: 96vh; }
  .tilt-ch > * { grid-column: 1 / 6; }
  .tilt-ch h2 { font-size: clamp(48px, 4.8vw, 84px); }
  .tilt-ch[data-ch="3"] h2 { font-size: clamp(36px, 3.2vw, 52px); }
}
.incl { padding: var(--sec) var(--g); display: grid; gap: 48px; }
.incl-list { display: grid; border-top: 1.5px solid var(--ink); }
.incl-list li { display: grid; gap: 8px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.incl-list h3 { font: 720 24px/1.15 var(--mona); letter-spacing: -0.025em; }
@media (min-width: 1024px) {
  .incl { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .incl .display { grid-column: 4 / 13; justify-self: end; text-align: right; }
  .incl-list { grid-column: 5 / 13; }
  .incl-list li { grid-template-columns: 5fr 7fr; gap: 32px; padding: 32px 0; }
  .incl-list h3 { font-size: 28px; }
}
.care { padding: var(--sec) var(--g); display: grid; gap: 36px; background: var(--foam); }
.care-txt { display: grid; gap: 20px; max-width: 34em; }
@media (min-width: 1024px) { .care { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .care .display { grid-column: 1 / 7; } .care-txt { grid-column: 7 / 13; padding-top: 12px; } }
.qa { padding: var(--sec) var(--g); display: grid; gap: 40px; justify-items: center; }
.acc { width: 100%; max-width: 980px; border-top: 1.5px solid var(--ink); }
.acc details { border-bottom: 1px solid var(--rule); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 76px; padding: 18px 0; font: 700 clamp(20px, 2vw, 26px)/1.25 var(--mona); letter-spacing: -0.02em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ''; flex: none; width: 16px; height: 16px; background: linear-gradient(currentColor 0 0) center / 16px 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 16px no-repeat; transition: transform .25s; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc details p { padding: 0 0 26px; max-width: 40em; }
.acc a { text-underline-offset: .2em; }

/* ------------------------------------------------------------ apps */
.kinds { padding: 0 var(--g) var(--sec); display: grid; gap: clamp(48px, 6vw, 96px); }
.kind { display: grid; gap: 12px; max-width: 760px; }
.kind h2 { font: 780 clamp(38px, 9vw, 56px)/1 var(--mona); letter-spacing: -0.042em; padding-bottom: 6px; }
.kind p { max-width: 30em; }
@media (min-width: 1024px) { .kind h2 { font-size: clamp(56px, 5.4vw, 96px); } .kind-r { justify-self: end; text-align: right; } .kind-r p { margin-left: auto; } }
.flow { position: relative; padding: var(--sec) var(--g); background: var(--foam); display: grid; gap: 32px; }
.flow-txt { display: grid; gap: 22px; align-content: start; }
.flow-steps { display: grid; border-top: 1.5px solid var(--ink); }
.flow-steps li { font: 700 clamp(22px, 2vw, 28px)/1.2 var(--mona); letter-spacing: -0.025em; padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--pencil); transition: color .3s; counter-increment: none; }
.flow-steps li.is-on { color: var(--ink); }
.rm .flow-steps li, .no-webgl .flow-steps li { color: var(--ink); }
.flow-stage { position: relative; height: 64svh; min-height: 340px; }
.flow-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
.gl-live .flow-stage canvas { opacity: 1; }
.no-webgl .flow-stage, .rm .flow-stage { display: none; }
.still-flow img { width: 100%; }
@media (min-width: 1024px) {
  .flow { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); height: 260vh; padding-block: 0; align-items: start; }
  .flow-txt { grid-column: 1 / 5; position: sticky; top: calc(var(--hdr) + 8vh); padding-top: 4vh; }
  .flow-stage { grid-column: 5 / 13; grid-row: 1; position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); }
  .still-flow { grid-column: 5 / 13; grid-row: 1; align-self: center; }
  .rm .flow, .no-webgl .flow { height: auto; padding-block: var(--sec); align-items: center; }
}
.kind h2 { font-size: clamp(42px, 10vw, 64px) !important; }
@media (min-width: 1024px) { .kind h2 { font-size: clamp(64px, 6.4vw, 116px) !important; } .kind { max-width: 1100px; } }
.fit-where { padding: var(--sec) var(--g); display: grid; gap: 36px; }
.fw-txt { display: grid; gap: 20px; max-width: 34em; }
@media (min-width: 1024px) { .fit-where { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .fit-where .display { grid-column: 2 / 13; justify-self: end; text-align: right; } .fw-txt { grid-column: 7 / 13; } }

/* ------------------------------------------------------------ pricing */
.price-jump { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 0 var(--g) 8px; }
.price-jump a { font: 620 17px var(--mona); letter-spacing: -0.01em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .28em; padding: 12px 0; }
.price-jump a:hover { color: var(--kiln); }
.tiers { padding: clamp(56px, 7vw, 120px) var(--g); display: grid; gap: 36px; }
.tiers + .tiers { border-top: 1px solid var(--rule); }
.tiers-head { display: grid; gap: 18px; }
.tiers .display { font-size: clamp(52px, 14vw, 76px); }
.tiers-body { display: grid; gap: 32px; }
.tier-list { display: grid; border-top: 1.5px solid var(--ink); }
.tier { display: grid; gap: 16px; padding: 32px 0 40px; border-bottom: 1px solid var(--rule); }
.tier-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 18px 24px; }
.tier-n { font: 780 clamp(34px, 8vw, 56px)/1 var(--mona); letter-spacing: -0.04em; }
.tier-p { font: 780 clamp(38px, 9vw, 72px)/1 var(--mona); letter-spacing: -0.045em; }
.tier-p .from, .tease-p .from { font: italic 400 .36em var(--serif); letter-spacing: 0; color: var(--graphite); vertical-align: .35em; }
.tier-p .unit { font: italic 400 .32em var(--serif); letter-spacing: 0; color: var(--graphite); }
.tier-f { font-size: 17px; color: var(--graphite); max-width: 40em; }
.tier-f strong { font: 720 19px var(--mona); color: var(--kiln); letter-spacing: -0.01em; }
.tier-for { font-size: 19px; max-width: 38em; }
.tier-i { display: grid; max-width: 46em; border-top: 1px solid var(--rule); }
.tier-i li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--rule); position: relative; font-size: 17px; line-height: 1.45; }
.tier-i li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 9px; height: 1.5px; background: var(--ink); }
.tier-t { font: 650 17px/1.45 var(--mona); letter-spacing: -0.01em; max-width: 40em; }
.tier-m, .tier-proof { font-size: 16px; color: var(--graphite); max-width: 42em; }
.tier-proof { font-style: italic; }
.tier-go { justify-self: start; margin-top: 6px; }
.tier-s { gap: 14px; }
.tier-model { display: none; }
.addons { border-bottom: 1px solid var(--rule); }
.addons summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 72px; font: 720 clamp(22px, 2vw, 28px) var(--mona); letter-spacing: -0.02em; }
.addons summary::-webkit-details-marker { display: none; }
.addons summary::after { content: ''; flex: none; width: 16px; height: 16px; background: linear-gradient(currentColor 0 0) center / 16px 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 16px no-repeat; transition: transform .25s; }
.addons[open] summary::after { transform: rotate(45deg); }
.addons ul { display: grid; padding-bottom: 24px; }
.addons li { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 17px; }
.addons li span:last-child { font: 680 17px var(--mona); text-align: right; }
.terms { padding: clamp(64px, 8vw, 128px) var(--g); background: var(--foam); display: grid; gap: 40px; }
.terms-col { display: grid; gap: 18px; align-content: start; max-width: 40em; }
.terms h2 { font: 760 clamp(26px, 2.6vw, 36px)/1.1 var(--mona); letter-spacing: -0.03em; }
.terms-col h2:not(:first-child) { margin-top: 20px; }
.terms ul { display: grid; border-top: 1px solid var(--rule); }
.terms li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
@media (min-width: 1024px) {
  .tiers { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .tiers-head { grid-column: 1 / 13; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .tiers-head .display { grid-column: 1 / 7; font-size: clamp(76px, 7vw, 124px); }
  .tiers-head .lead { grid-column: 7 / 13; }
  .tiers > .tier-list, .tiers > .addons { grid-column: 1 / 9; }
  .tiers-body { grid-column: 1 / 13; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .tiers-body .tier-list { grid-column: 1 / 9; grid-row: 1; }
  .tier-model { display: block; grid-column: 9 / 13; grid-row: 1; position: sticky; top: calc(var(--hdr) + 14vh); height: 320px; perspective: 1200px; align-self: start; }
  .tier-p { font-size: clamp(56px, 4.6vw, 80px); }
  .tier-n { font-size: clamp(44px, 3.6vw, 60px); }
  .terms { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .terms-col:first-child { grid-column: 1 / 7; }
  .terms-col:last-child { grid-column: 8 / 13; }
}
.tm-base { position: absolute; left: 6%; right: 6%; top: 36%; height: 40%; transform: rotateX(60deg) rotateZ(-30deg); transform-style: preserve-3d; background: #E4E5E1; box-shadow: 0 0 0 1px rgba(18, 19, 20, .1), 24px 34px 44px rgba(18, 19, 20, .16); }
.tm-base i { position: absolute; left: 10%; width: 80%; height: 52%; bottom: calc(10% + var(--n) * 10%); transform-origin: 50% 100%; transform: rotateX(calc(-90deg * var(--t, 0))); background: var(--foam); box-shadow: 0 0 0 1px rgba(18, 19, 20, .18); opacity: calc(.15 + var(--t, 0) * .85); transition: transform .7s cubic-bezier(.3, .7, .2, 1), opacity .4s; transition-delay: calc(var(--n) * 60ms); }
.tm-cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: italic 400 17px var(--serif); color: var(--graphite); }
.tm-n { font: 780 22px var(--mona); color: var(--ink); font-style: normal; }
.as-care { max-width: 36em; margin: 0; }
.app-start { padding: var(--sec) var(--g); display: grid; justify-items: center; text-align: center; gap: clamp(40px, 5vw, 72px); border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------ about */
.credits { position: relative; height: 240vh; }
.cr-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cr-name { position: absolute; right: var(--g); top: calc(var(--hdr) + 28px); text-align: right; font: 780 clamp(44px, 12vw, 72px)/.94 var(--mona); letter-spacing: -0.045em; max-width: 6em; }
.cr-win { position: absolute; left: 0; right: 0; top: calc(var(--hdr) + 200px); bottom: calc(96px + env(safe-area-inset-bottom)); overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.cr-roles { position: absolute; left: var(--g); right: var(--g); top: 50%; display: grid; gap: 6px; will-change: transform; }
.cr-roles li { font: 760 clamp(26px, 6.6vw, 40px)/1.32 var(--mona); letter-spacing: -0.035em; color: var(--ink); opacity: .38; transition: opacity .25s; }
.cr-roles li.cr-last { opacity: .75; }
.cr-roles li.is-on { opacity: 1; }
.cr-roles a { text-decoration: none; color: var(--kiln); }
@media (min-width: 1024px) {
  .cr-name { top: 50%; transform: translateY(-50%); font-size: clamp(88px, 8.8vw, 156px); max-width: 5em; }
  .cr-win { top: var(--hdr); bottom: 0; right: 50%; }
  .cr-roles li { font-size: clamp(36px, 3.4vw, 56px); }
}
.rm .credits { height: auto; }
.rm .cr-pin { position: static; height: auto; padding: 80px var(--g); display: grid; gap: 32px; }
.rm .cr-name, .rm .cr-win, .rm .cr-roles { position: static; transform: none; -webkit-mask: none; mask: none; }
.rm .cr-name { text-align: left; }
.rm .cr-roles li { opacity: 1; }
.call { padding: var(--sec) var(--g); display: grid; gap: 36px; background: var(--foam); }
.call-txt { display: grid; gap: 20px; max-width: 34em; }
@media (min-width: 1024px) { .call { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .call .display { grid-column: 1 / 9; } .call-txt { grid-column: 7 / 13; } }
.art { padding: var(--sec) 0; display: grid; gap: 48px; overflow: clip; }
.art-txt { padding: 0 var(--g); display: grid; gap: 22px; }
@media (min-width: 1024px) { .art-txt { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .art-txt .display { grid-column: 1 / 8; } .art-txt .lead { grid-column: 8 / 13; align-self: end; } }
.art-row { display: flex; gap: 20px; padding: 0 var(--g); overflow-x: auto; scrollbar-width: none; }
.art-row::-webkit-scrollbar { display: none; }
.art-row img { flex: none; width: clamp(180px, 18vw, 300px); box-shadow: 0 24px 48px -24px rgba(18, 19, 20, .5); }

/* ------------------------------------------------------------ start */
.start-head { padding: calc(var(--hdr) + clamp(40px, 8vh, 112px)) var(--g) clamp(56px, 7vw, 104px); display: grid; gap: 40px; }
.start-call { display: grid; gap: 20px; align-content: start; }
.start-tel { font: 780 clamp(40px, 11vw, 64px)/1 var(--mona); letter-spacing: -0.04em; text-decoration: none; }
.start-tel:hover { color: var(--kiln); }
.start-call .acts .btn { flex: 1 1 auto; }
.start-call .acts .btn + .btn { margin-left: 0; }
.start-call p { color: var(--graphite); font-size: 17px; }
@media (min-width: 1024px) {
  .start-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .start-head .display { grid-column: 1 / 8; }
  .start-call { grid-column: 9 / 13; }
  .start-tel { font-size: clamp(44px, 3.9vw, 68px); }
}
.composer { padding: 0 var(--g) var(--sec); display: grid; gap: 48px; }
.comp { display: grid; gap: 22px; max-width: 760px; }
.need { border: 0; display: grid; gap: 10px; }
.need legend { font: 700 22px/1.2 var(--mona); letter-spacing: -0.02em; padding: 0 0 14px; }
.need label { position: relative; display: flex; align-items: center; min-height: 60px; padding: 0 20px; background: var(--foam); box-shadow: inset 0 0 0 1.5px rgba(18, 19, 20, .2); font: 650 19px var(--mona); letter-spacing: -0.015em; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.need input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.need label:has(input:checked) { background: var(--ink); color: var(--foam); box-shadow: none; }
.need label:has(input:focus-visible) { outline: 2px solid var(--kiln); outline-offset: 3px; }
.need label span::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 14px; box-shadow: inset 0 0 0 1.5px currentColor; vertical-align: -1px; }
.need label:has(input:checked) span::before { background: var(--kiln); box-shadow: none; }
.fld { display: grid; gap: 8px; }
.fld label { font: 650 16px var(--mona); letter-spacing: -0.01em; }
.opt { font-weight: 450; color: var(--graphite); }
.fld input, .fld textarea, .fld select { width: 100%; min-height: 60px; padding: 14px 16px; background: var(--foam); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1.5px rgba(18, 19, 20, .2); font: 400 19px/1.4 var(--serif); transition: box-shadow .2s; -webkit-appearance: none; appearance: none; }
.fld textarea { resize: vertical; min-height: 132px; }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.fld input:focus-visible, .fld textarea:focus-visible, .fld select:focus-visible { outline: 2px solid var(--kiln); outline-offset: 2px; }
.fld textarea::placeholder { color: var(--graphite); font-style: italic; }
.comp-out { display: grid; gap: 10px; padding: 22px 0 6px; border-top: 1.5px solid var(--ink); }
.comp-k { font: 650 16px var(--mona); }
.comp-msg { white-space: pre-wrap; font-size: 18px; line-height: 1.55; color: var(--graphite); min-height: 3em; }
.comp-err { color: var(--kiln); font: 700 19px/1.35 var(--mona); }
.comp-send { display: grid; gap: 12px; }
@media (min-width: 768px) { .comp-send { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .comp-send .btn:first-child { grid-column: span 2; } }
.comp-send .btn { padding: 0 18px; }
.comp-note { font-size: 15px; font-style: italic; color: var(--graphite); }
.lot { display: none; }
@media (min-width: 1024px) {
  .composer { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .comp { grid-column: 1 / 8; }
  .lot { display: block; grid-column: 9 / 13; position: sticky; top: calc(var(--hdr) + 8vh); height: 420px; perspective: 1400px; }
}
.lot-model { position: absolute; inset: 0; transform-style: preserve-3d; }
.lot-base { position: absolute; left: 6%; right: 6%; top: 52%; height: 34%; background: #E4E5E1; transform: rotateX(64deg) rotateZ(-26deg); box-shadow: 0 0 0 1px rgba(18, 19, 20, .1), 24px 36px 50px rgba(18, 19, 20, .16); }
.lot-wall { position: absolute; left: 14%; right: 14%; top: 18%; height: 44%; background: var(--foam); box-shadow: 0 0 0 1px rgba(18, 19, 20, .14), 0 30px 40px -20px rgba(18, 19, 20, .35); transform: rotateY(-18deg); display: grid; place-items: center; padding: 8%; transition: opacity .35s, transform .5s cubic-bezier(.3, .7, .2, 1); }
.lot-name { font: 780 clamp(22px, 2.2vw, 36px)/1 var(--mona); letter-spacing: -0.035em; text-align: center; overflow-wrap: anywhere; }
.lot-screens { position: absolute; left: 22%; right: 22%; top: 14%; height: 50%; display: flex; gap: 8%; transform: rotateY(-18deg); opacity: 0; transition: opacity .35s; }
.lot-screens i { flex: 1; background: var(--foam); box-shadow: 0 0 0 1px rgba(18, 19, 20, .14), 0 24px 30px -18px rgba(18, 19, 20, .35); }
.lot-model[data-need="app"] .lot-wall { opacity: 0; transform: rotateY(-18deg) translateY(20px); }
.lot-model[data-need="app"] .lot-screens { opacity: 1; }
.after { padding: var(--sec) var(--g); background: var(--foam); display: grid; gap: 48px; justify-items: center; text-align: center; }

/* ------------------------------------------------------------ reveals */
.js [data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); }
.js [data-rv].is-in { opacity: 1; transform: none; }
.rm [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; } }

/* rooms, live: the container carries the ground and each room's copy waits for its own colour */
.room { background: var(--rg); }
.rooms[data-live] .room { background: transparent; }
.rooms[data-live] .room-txt { opacity: 0; transform: translateY(18px); transition: opacity .6s .2s, transform .8s .2s cubic-bezier(.2, .7, .2, 1); }
.rooms[data-live] .room.is-cur .room-txt { opacity: 1; transform: none; }
.js:not(.gl-live):not(.rm):not(.no-webgl) .still-hero, .js:not(.gl-live):not(.rm):not(.no-webgl) .still-case { display: block; }

/* fitted headlines measure their column, never their own unwrapped lines */
.display { min-width: 0; }
.hold-txt, .case-txt, .biz-txt, .win-txt, .start-call, .offer-txt, .who-txt, .care-txt, .call-txt, .fw-txt, .flow-txt, .room-txt, .hero-low, .about-facts, .move-txt { grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (max-width: 1023px) { .tilt-ch, .art-txt { grid-template-columns: minmax(0, 1fr); } }
.tier-proof a { text-underline-offset: .2em; }

/* pricing: the decision sits on one line (name, price, button); the full list waits behind one disclosure */
.tier-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 14px 24px; }
.tier-top .tier-go { grid-column: 1 / -1; justify-self: start; margin: 4px 0 0; }
@media (min-width: 768px) {
  .tier-top { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  .tier-top .tier-go { grid-column: auto; margin: 0; }
}
.tier-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font: 650 17px var(--mona); letter-spacing: -0.01em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .28em; }
.tier-more summary::-webkit-details-marker { display: none; }
.tier-more summary::after { content: ''; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .25s; }
.tier-more[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.tier-more[open] { display: grid; gap: 14px; padding-bottom: 6px; }
.tier-more .tier-i { border-top: 0; }
.tier-i + .tier-more { margin-top: -8px; }

/* a link that closes a section is a full-width row, not a stranded line of text */
.row-link { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; max-width: 980px; min-height: 76px; padding: 0 2px; border-bottom: 1.5px solid var(--ink); font: 720 clamp(22px, 2vw, 28px)/1.2 var(--mona); letter-spacing: -0.025em; text-decoration: none; text-align: left; transition: color .2s; }
.row-link i { flex: none; width: 34px; height: 2px; background: currentColor; position: relative; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.row-link i::after { content: ''; position: absolute; right: 0; top: -5px; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transform-origin: 100% 0; }
.row-link:hover { color: var(--kiln); }
.row-link:hover i { transform: translateX(6px); }
.tease-rows .row-link { margin-top: 18px; border-bottom: 0; }

/* start: what happens next sits beside the form */
.composer .after { display: grid; gap: 28px; align-content: start; }
.composer .after h2 { font: 760 clamp(28px, 2.6vw, 40px)/1.05 var(--mona); letter-spacing: -0.035em; }
.composer .after .steps li { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
.composer .after .steps h3 { font-size: 21px; }
@media (min-width: 1024px) { .composer .after { grid-column: 9 / 13; position: sticky; top: calc(var(--hdr) + 6vh); } }
.composer .after { padding: 0; background: none; text-align: left; justify-items: stretch; }

/* touch targets: every standalone link is at least 44px tall */
.tlink, .pg figcaption a, .foot-nav a, .foot-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-nav a, .foot-contact a { padding: 0; }
.logo { padding: 11px 0; margin: -11px 0; }
.price-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.tier-proof a, .hero-price a { display: inline-block; padding: 10px 0; margin: -10px 0; }

/* the price, in one line under the hero buttons */
.hero-price { font-size: 16px; color: var(--graphite); }
.hero-price a { color: var(--ink); text-underline-offset: .22em; text-decoration-thickness: 1px; }
@media (min-width: 1024px) { .hero-price { font-size: 17px; } }
.tease-n small { display: block; font: italic 400 16px/1.35 var(--serif); color: var(--graphite); letter-spacing: 0; margin-top: 6px; }
.tease-row:hover .tease-n small { color: var(--graphite); }

/* shorter stretches between the street's holds */
.hold-intro { margin-top: -28svh; }
@media (min-width: 1024px) { .hold { min-height: 88vh; } .hold-intro { margin-top: -32vh; min-height: 100vh; } }
/* phones: the street's copy keeps the 88px top it was fitted against (street.js), under the 72px slab */
@media (max-width: 1023px) { .hold { min-height: 88svh; padding-top: calc(var(--hdr) + 16px); } }
.rm .hold-intro, .no-webgl .hold-intro { margin-top: 0; }

/* grids whose only column must never grow to fit a long word (the shrink-to-fit measures against it) */
.spec-card, .moves, .next, .spec-type, .moves-h { grid-template-columns: minmax(0, 1fr); }
.spec-type, .moves-h, .next-n, .room-name { min-width: 0; max-width: 100%; }
.kind h2 { padding-bottom: 14px; }
@media (max-width: 767px) { .tilt-url { font-size: min(8.2vw, 40px); } }
/* street blocks overlap one another by design; only their copy takes clicks */
.spec .hold { pointer-events: none; }
.spec .hold-txt { pointer-events: auto; }
/* reduced motion and no WebGL: the hero still is capped so the buttons stay in the first screen */
@media (min-width: 1024px) { .rm .still-hero img, .no-webgl .still-hero img { max-height: calc(100vh - var(--hdr) - 360px); width: auto; margin-left: auto; } }
/* phones: a build's name outranks its section headings */
@media (max-width: 767px) { .h-case { font-size: min(15vw, 66px); } .biz .display, .win .display, .pages .display { font-size: min(10.5vw, 46px); } }
/* phones: a build's copy stays pinned under the header while the camera travels to the next build */
@media (max-width: 1023px) { .js:not(.rm):not(.no-webgl) .spec .hold-txt { position: sticky; top: calc(var(--hdr) + 8px); } }
.tier-big { max-width: none; margin-top: 8px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3; padding: 18px 2px; min-height: 0; }
.tier-big span { max-width: 46em; }
.tier-big em { font-style: normal; color: var(--kiln); }
@media (min-width: 1024px) { .tiers > .tier-big { grid-column: 1 / 9; } }

/* horizontal strips are real scrollers, free (no snapping, which pulled short swipes back): trackpad and touch swipes both ways, drag with a mouse, arrow keys when
   focused; vertical scrolling passes straight through to the page */
.hscroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; outline-offset: -4px; padding-bottom: 6px; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll.is-dragging { cursor: grabbing; user-select: none; }
.hscroll.is-dragging img { pointer-events: none; }
.hscroll img { -webkit-user-drag: none; }