/* OCALLY · platform.css: /platform as one story. Tokens and components come from base.css. A poster (giant type,
   Kai on its baseline); then the town beneath the town, pinned: one cutaway panorama of the street and its workshop,
   panned room by room while Kai walks through and the words change on a paper card; the four stores as an index on
   navy; how it's built, set large; people first; questions. The footer closes the page. */
html, body { background: var(--paper); }
.px { color: var(--navy); }
.px-h2 { margin: 0; max-width: 15em; font: var(--t-h2); letter-spacing: var(--ls-h2); text-wrap: balance; }
.px-h2 span { color: var(--orange); }
.px-p { margin: var(--gap-lede) 0 0; max-width: 32em; font: var(--t-body); color: var(--body); }
.px-ctas { margin-top: clamp(22px, 3.6vh, 36px); }

/* ── the poster ── */
.px-hero { position: relative; min-height: calc(100svh - var(--bar) - var(--mbar)); padding: clamp(28px, 5vh, 64px) var(--edge) clamp(36px, 6vh, 72px); display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--sky); }
.px-h1 { position: relative; z-index: 2; margin: 0; font: var(--t-display); letter-spacing: var(--ls-display); color: var(--navy); }
.px-h1 span { display: block; }
.px-h1 span + span { color: var(--orange); }
.px-hero__foot { position: relative; z-index: 2; align-self: end; max-width: min(34em, 46vw); }
.px-lead { margin: 0; font: var(--t-lead); color: var(--body); }
.px-lead b { display: block; margin-bottom: 8px; font: var(--t-h4); letter-spacing: var(--ls-h4); color: var(--navy); }
.px-hero__kai { position: absolute; z-index: 1; right: max(2vw, (100vw - 1700px) / 2); bottom: 0; width: min(46vw, 760px); height: min(74%, 680px); }
.px-hero__sun { position: absolute; left: 50%; top: 4%; width: min(84%, 90vh); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--amber); }
.px-hero__sun::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--navy); transform: translate(12px, -9px); opacity: .5; }
.px-hero__gl { position: absolute; inset: 0; }
.px-hero__gl canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.px-hero__gl.is-flat { display: grid; place-items: end center; }
.px-hero__gl.is-flat ocally-kai { --kai-size: 46%; }

/* ── the town beneath the town ── */
.px-loop { position: relative; background: var(--night); }
.px-loop__track { height: 760vh; }
.px-loop__stage { position: sticky; top: var(--bar); height: calc(100svh - var(--bar) - var(--mbar)); overflow: hidden; }
.px-pan { position: absolute; inset: 0; overflow: hidden; }
/* the world is the panorama at stage height; the camera (a transform on it) frames the street, then each room */
.px-pan__world { position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 4096 / 1755; transform-origin: 0 0; will-change: transform; transition: transform 1.5s cubic-bezier(.65, 0, .25, 1); }
.px-pan__img { display: block; width: 100%; height: 100%; }
.px-pan__kai { position: absolute; z-index: 2; left: var(--kx, 10%); top: var(--ky, 80%); --kai-size: 4.6%; width: var(--kai-size); translate: -50% -100%; transition: left 1.5s cubic-bezier(.65, 0, .25, 1), top 1.5s cubic-bezier(.65, 0, .25, 1); }
.px-pan__kai.is-walking { animation: px-walk .38s ease-in-out infinite; }
@keyframes px-walk { 50% { translate: -50% calc(-100% - 7%); } }
/* the paper card with the words */
.px-card { position: absolute; z-index: 3; left: var(--edge); bottom: clamp(20px, 5vh, 56px); width: min(500px, 40vw); padding: var(--card-pad); background: var(--paper); border: var(--rule); box-shadow: var(--lift-l) var(--navy); }
.px-rail { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-bottom: clamp(16px, 2.4vh, 24px); }
.px-rail a { position: relative; display: inline-flex; padding: 6px 8px; font: var(--t-tag); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--muted); text-decoration: none; background: var(--sky); transition: background-color .3s linear, color .3s linear; }
.px-rail a.is-past { color: var(--navy); }
.px-rail a.is-on { background: var(--orange); color: #fff; }
.px-blocks { position: relative; display: grid; }
.px-block { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .35s linear, transform .6s var(--ease-out); pointer-events: none; }
.px-block.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .2s; }
.px-block .px-h2 { font: var(--t-h4); letter-spacing: var(--ls-h4); }
.px-block .px-p { margin-top: 12px; font: var(--t-card); }
.px-pts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.px-pts li { position: relative; padding-left: 22px; font: var(--t-small); font-weight: 500; color: var(--navy); }
.px-pts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 12px; height: 2px; background: var(--orange); }

/* ── the four stores, as an index on navy ── */
.px-stores { padding: var(--sec-y) var(--edge); background: var(--navy); color: var(--on-navy); }
.px-stores .px-h2 { color: var(--on-navy); }
.px-stores .px-p { color: var(--on-navy-body); }
.px-index { list-style: none; margin: var(--gap-head) 0 0; padding: 0; }
.px-index li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: baseline; gap: 16px 48px; padding: clamp(20px, 3.4vh, 34px) 0; border-top: 1px solid var(--on-navy-line); }
.px-index li:last-child { border-bottom: 1px solid var(--on-navy-line); }
.px-index h3 { margin: 0; font: var(--t-h3); letter-spacing: var(--ls-h3); color: var(--on-navy); transition: color .3s linear, transform .5s var(--ease-out); }
.px-index p { margin: 0; max-width: 28em; font: var(--t-body); color: var(--on-navy-body); }
.px-index li:hover h3 { color: var(--amber); transform: translateX(10px); }

/* ── how it's built, set large ── */
.px-built { padding: var(--sec-y) var(--edge); }
.px-built__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--gap-head); border-top: var(--rule); }
.px-built__grid article { padding: clamp(28px, 4vh, 48px) clamp(0px, 3vw, 48px) clamp(32px, 5vh, 56px) 0; border-bottom: var(--rule); }
.px-built__grid article:nth-child(odd) { border-right: var(--rule); }
.px-built__grid article:nth-child(even) { padding-left: clamp(24px, 3vw, 48px); }
.px-built__big { margin: 0 0 clamp(18px, 3vh, 28px); display: grid; font: var(--t-h3); letter-spacing: var(--ls-h3); color: var(--orange); }
.is-team .px-built__big span:nth-child(1) { color: var(--navy); } .is-team .px-built__big span:nth-child(2) { color: var(--amber-ink); }
.px-built__grid h3 { margin: 0; font: var(--t-h5); letter-spacing: var(--ls-h5); }
.px-built__grid p:not(.px-built__big) { margin: 10px 0 0; max-width: 30em; font: var(--t-card); color: var(--body); }

/* ── people first ── */
.px-people { padding: var(--sec-y) var(--edge); background: var(--orange); color: #fff; }
.px-people__h { margin: 0; max-width: 12em; font: var(--t-display); letter-spacing: var(--ls-display); }
.px-people__h span { color: var(--navy); }
.px-people p { margin: var(--gap-lede) 0 0; max-width: 34em; font: var(--t-lead); color: #fff; }
.px-people .tlink { display: inline-block; margin-top: 28px; }

@media (max-width: 1100px) { .px-hero__foot { max-width: 52vw; } }
@media (max-width: 860px) {
  .px-hero { grid-template-rows: auto auto 1fr; min-height: 0; }
  .px-hero__foot { max-width: none; align-self: start; margin-top: 24px; }
  .px-hero__kai { position: relative; right: auto; width: 100%; height: 56vh; margin-top: 12px; }
  /* the pan sits on top, the card below it */
  .px-pan { bottom: auto; height: 56%; }
  .px-card { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 18px; box-shadow: var(--lift) var(--navy); }
  .px-pts { display: none; }
  .px-index li { grid-template-columns: 1fr; gap: 10px; }
  .px-built__grid { grid-template-columns: 1fr; }
  .px-built__grid article { padding: 28px 0 32px !important; border-right: 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .px-pan__world, .px-pan__kai { transition: none; } .px-pan__kai.is-walking { animation: none; } }