/* Kavalsia Inc. page for Kurdify Real Estate Technology. Dark espresso world, bronze accent, ivory ink. Borderless. */
/* Kurdish (Sorani) face: Vazirmatn variable, self-hosted. Arabic-script ranges only, so Latin
   inside Kurdish copy stays on Inter Tight and EN never touches this face. */
@font-face { font-family: 'Vazirmatn'; src: url('../assets/fonts/Vazirmatn-wght.woff2') format('woff2-variations'), url('../assets/fonts/Vazirmatn-wght.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011, U+204F, U+2E41; }
:root {
  --bg: #16100B; --ivory: #F4EDDC; --paper: #211811; --sand: #2B2118; --sand-2: #362A1E; --sand-3: #4A3823;
  --panel: #261C14;
  --bronze: #D2AB55; --bronze-ink: #E3C477; --espresso: #0A0706; --ink: #F4EDDC; --ink-2: #B9A98A; --ink-3: #98876D;
  --st-available: #3F8A63; --st-onHold: #6F82A8; --st-reserved: #D9962F; --st-sold: #B4483B; --st-blocked: #8E8379; --st-available-ink: #367554;
  --font: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-ku: 'Vazirmatn', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --fs-display: clamp(2.3rem, 1.3rem + 4vw, 5.2rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 3.2rem);
  --fs-h3: clamp(1.2rem, 1.02rem + .7vw, 1.6rem);
  --fs-lead: clamp(1.05rem, .98rem + .35vw, 1.27rem);
  --fs-small: .875rem;
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6rem;
  --sec: clamp(5.5rem, 3rem + 8vw, 11rem);
  --r-lg: 28px; --r-md: 20px; --r-sm: 12px;
  --lift: 0 1px 2px rgba(0,0,0,.32), 0 12px 32px -12px rgba(0,0,0,.5);
  --lift-hi: 0 2px 4px rgba(0,0,0,.38), 0 26px 60px -20px rgba(0,0,0,.62);
  --ease: cubic-bezier(.22,.8,.2,1);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23A8863A' stroke-width='.9'%3E%3Crect x='29' y='29' width='38' height='38'/%3E%3Crect x='29' y='29' width='38' height='38' transform='rotate(45 48 48)'/%3E%3Cpath d='M0 48h21M75 48h21M48 0v21M48 75v21'/%3E%3C/g%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.55;
  background: linear-gradient(180deg, var(--bg) 0%, #1B140F 40%, var(--bg) 70%, #191209 100%);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
[dir=rtl] body { font-family: var(--font-ku); line-height: 1.7; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: none; background-color: rgba(201,164,76,.22); border-radius: 8px; }
.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.display { font-weight: 600; line-height: .98; letter-spacing: -.035em; text-wrap: balance; position: relative; }
[dir=rtl] { --fs-display: clamp(2rem, 1.2rem + 3.3vw, 4.4rem); --fs-h2: clamp(1.55rem, 1.1rem + 1.8vw, 2.7rem); }
[dir=rtl] .display { letter-spacing: 0; line-height: 1.24; font-weight: 750; }
[dir=rtl] h3:not(.display, .cine *) { letter-spacing: 0; line-height: 1.3; font-weight: 700; }
/* Launch Hero headline: top-down gradient clipped to the text, per word so the reveal can move words.
   Every .gw shares the heading's gradient box (--bh, --by set in main.js). --g drifts slowly. */
@property --g { syntax: '<percentage>'; inherits: true; initial-value: 45%; }
.display { --gt: var(--ink); --gb: var(--bronze-ink); animation: gdrift 11s ease-in-out infinite alternate; }
.foot .display, .cine .display { --gt: var(--ivory); --gb: #E3C987; }
.gw { display: inline-block; padding-block: .2em; margin-block: -.2em; color: transparent; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, var(--gt) 0%, var(--gt) var(--g), var(--gb) 100%);
  background-size: 100% var(--bh, 100%); background-position: 0 var(--by, 0); background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; }
[dir=rtl] .gw { padding-block: .3em; margin-block: -.3em; }
@keyframes gdrift { from { --g: 28%; } to { --g: 64%; } }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 40rem; text-wrap: pretty; }
[dir=rtl] .lead, [dir=rtl] .hero__sub { line-height: 1.7; }
.fine { font-size: var(--fs-small); color: var(--ink-3); max-width: 46rem; line-height: 1.55; }
.sec-head { display: grid; gap: var(--s3); margin-bottom: var(--s5); max-width: 52rem; }
.band { position: relative; isolation: isolate; }
.band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,15,11,0) 0%, rgba(20,15,11,.55) 18%, rgba(20,15,11,.55) 82%, rgba(20,15,11,0) 100%); }
.band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pattern); opacity: .09; mask-image: radial-gradient(70% 60% at 85% 20%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(70% 60% at 85% 20%, #000 0%, transparent 70%); }
section[id] { scroll-margin-top: 4.5rem; }
.skip { position: fixed; inset-inline-start: 1rem; top: -4rem; z-index: 100; background: var(--espresso); color: var(--ivory); padding: .6rem 1rem; border-radius: 999px; }
.skip:focus-visible { top: 1rem; background: var(--espresso); }
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Buttons: they fill. The ring is a lit edge (light on top, fading round the pill), not a stroke. */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .9rem; min-height: 3.25rem; padding: .9rem 1.65rem; border-radius: 999px; background: linear-gradient(180deg, #E4C478 0%, #CDAC56 38%, #A88230 100%); color: #180F08; font-weight: 500; letter-spacing: -.005em; box-shadow: 0 18px 32px -20px rgba(0,0,0,.6); transition: transform .25s ease, box-shadow .25s ease; }
/* borderless-keep: lit edge, Siavash asked for it on every button (QUEUED Q3) */
.btn::before, .nav__lang::before { content: ''; position: absolute; inset: 0; z-index: -1; padding: 1.25px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,250,235,.95) 0%, rgba(255,246,222,.4) 30%, rgba(255,240,210,0) 58%, rgba(255,240,210,.14) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); transition: opacity .3s; }
.btn::before { z-index: 1; }
.btn:hover { transform: scale(1.06); box-shadow: 0 22px 40px -22px rgba(0,0,0,.7); }
.btn:active { transform: scale(.96); }
.btn:focus-visible { background: linear-gradient(180deg, #EED48A, #CDAC56); border-radius: 999px; }
.btn--light { background: linear-gradient(180deg, #F1DFAE 0%, #DDBE6E 38%, var(--bronze) 100%); color: var(--espresso); }
.btn--light:focus-visible { background: linear-gradient(180deg, #F6E8C2, #D7B45E); }
.btn__mail { font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Header: a floating blue glass pill, inset from the top and sides, always on screen */
.nav { --nav-gap: clamp(.6rem, 1.4vw, 1rem); position: fixed; top: var(--nav-gap); inset-inline: clamp(.75rem, 2.4vw, 2rem); z-index: 50; display: flex; align-items: center; gap: var(--s4);
  padding: .55rem .55rem .55rem 1.25rem; border-radius: 999px; isolation: isolate;
  background: linear-gradient(180deg, rgba(54,42,30,.38) 0%, rgba(10,7,6,.46) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.65), 0 2px 8px -4px rgba(0,0,0,.4);
  transition: background .4s, box-shadow .4s, transform .55s var(--ease), opacity .4s var(--ease); }
[dir=rtl] .nav { padding: .55rem 1.25rem .55rem .55rem; }
/* tucked: the explorer owns the viewport, the nav steps out of its chrome */
.nav.is-tucked { transform: translateY(calc(-100% - var(--nav-gap) - 1rem)); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .nav.is-tucked { transform: none; } }
/* inner highlight: a top gloss inside the glass, a fill, not a rim */
.nav::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 140% at 50% -40%, rgba(244,237,220,.14), rgba(227,196,119,.04) 45%, rgba(227,196,119,0) 70%); }
.nav.is-solid { background: linear-gradient(180deg, rgba(54,42,30,.6) 0%, rgba(10,7,6,.72) 100%); box-shadow: 0 22px 48px -24px rgba(0,0,0,.75), 0 2px 8px -4px rgba(0,0,0,.45); }
.nav__brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; letter-spacing: -.01em; font-family: var(--font); white-space: nowrap; }
.nav__brand svg { width: 22px; height: 22px; color: var(--bronze-ink); }
.nav__links { display: flex; align-items: center; margin-inline-start: auto; font-size: .92rem; color: var(--ink-2); }
.nav__links a { position: relative; padding: .45rem clamp(.55rem, .9vw, .95rem); transition: color .3s; white-space: nowrap; }
/* borderless-keep: divider, a short soft rule between menu items */
.nav__links a + a::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; width: 1px; height: .9em; transform: translateY(-50%); background: linear-gradient(180deg, rgba(244,237,220,0), rgba(244,237,220,.28), rgba(244,237,220,0)); }
.nav__links a::after { content: ''; position: absolute; inset-inline: clamp(.55rem, .9vw, .95rem); bottom: .15rem; height: 1px; background: var(--bronze); transform: scaleX(0); transition: transform .4s var(--ease); }
.nav__links a:hover, .nav__links a.is-on { color: var(--ivory); }
.nav__links a:hover::after, .nav__links a.is-on::after { transform: scaleX(1); }
.nav__lang { position: relative; min-height: 2.6rem; padding: .45rem 1.1rem; border-radius: 999px; background: rgba(210,171,85,.14); font-weight: 500; font-size: .95rem; transition: background-color .3s; }
.nav__lang::before { opacity: .55; }
.nav__lang:hover { background: rgba(210,171,85,.26); }
.nav__lang:hover::before { opacity: .85; }
.nav__lang[lang=ckb], .nav__lang:lang(ckb) { font-family: var(--font-ku); }
/* Menu toggle: bare glyph (Law 16), hit area from padding */
.nav__menu { display: none; padding: .7rem; margin-inline-end: -.2rem; color: var(--ivory); transition: color .3s; }
.nav__menu svg { display: block; width: 24px; height: 24px; }
.nav__menu path { transition: d .45s var(--ease); }
.nav__menu[aria-expanded=true] path { d: path("M6 6l12 12M18 6L6 18"); }
.nav__menu:hover, .nav__menu:focus-visible { color: var(--bronze-ink); background: none; }
.nav__sheet { position: absolute; top: calc(100% + .5rem); inset-inline: 0; display: grid; padding: .6rem; border-radius: var(--r-lg);
  background: #0f1d22; box-shadow: var(--lift-hi); transform-origin: top center;
  opacity: 0; transform: translateY(-.5rem) scale(.97); clip-path: inset(0 0 100% 0 round var(--r-lg)); transition: opacity .35s var(--ease), transform .45s var(--ease), clip-path .5s var(--ease); }
.nav__sheet[hidden] { display: none; }
.nav.is-open .nav__sheet { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--r-lg)); }
.nav__sheet a { position: relative; padding: .95rem 1.1rem; font-size: 1.05rem; color: #a9bdb9; border-radius: var(--r-sm); opacity: 0; transform: translateY(-.35rem); transition: color .3s, background-color .3s, opacity .4s var(--ease), transform .45s var(--ease); }
.nav.is-open .nav__sheet a { opacity: 1; transform: none; }
.nav.is-open .nav__sheet a:nth-child(2) { transition-delay: 0s, 0s, .03s, .03s; } .nav.is-open .nav__sheet a:nth-child(3) { transition-delay: 0s, 0s, .06s, .06s; }
.nav.is-open .nav__sheet a:nth-child(4) { transition-delay: 0s, 0s, .09s, .09s; } .nav.is-open .nav__sheet a:nth-child(5) { transition-delay: 0s, 0s, .12s, .12s; }
.nav.is-open .nav__sheet a:nth-child(6) { transition-delay: 0s, 0s, .15s, .15s; } .nav.is-open .nav__sheet a:nth-child(7) { transition-delay: 0s, 0s, .18s, .18s; }
/* borderless-keep: divider between sheet rows */
.nav__sheet a + a::before { content: ''; position: absolute; top: 0; inset-inline: 1.1rem; height: 1px; background: #1b2f36; }
.nav__sheet a:hover, .nav__sheet a:focus-visible { color: #e0b64a; background-color: #12252b; }
@media (max-width: 1020px) { .nav__links { display: none; } .nav__lang { margin-inline-start: auto; } .nav__menu { display: inline-flex; } }
@media (max-width: 420px) { .nav__brand span { font-size: .9rem; } .nav { gap: .5rem; } }
@media (prefers-reduced-motion: reduce) { .nav__sheet, .nav__sheet a, .nav__menu path { transition: none; } }

/* 0. Preloader. A held ground with the bare mark (Law 16, no plate), on the page ground, above the
   nav (50), grain (90) and skip link (100). main.js lifts it once the hero shader has painted a
   frame AND copy/copy.json has landed, so a cold load never shows an empty hero. One fade, no
   spinner, no counter, no scroll cue (Law 17). It is inline SVG and CSS ground only, so first paint
   is CSS (Law 14). Under reduced motion the house rule at the foot of this file drops the
   transition, so it lifts instantly instead of fading. */
.pre { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: var(--bg); transition: opacity .55s var(--ease), visibility .55s; }
.pre__mark { width: 44px; height: 44px; color: var(--bronze-ink); }
.pre.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

/* 1. Hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; isolation: isolate; overflow: hidden; padding-block: 7rem 4rem; }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; background: radial-gradient(120% 90% at 20% 10%, #2B231A, #1B140F 70%, #120C08); }
.hero__pattern { position: absolute; inset: 0; z-index: -1; background: var(--pattern); opacity: .1; mask-image: linear-gradient(110deg, transparent 30%, #000 75%); -webkit-mask-image: linear-gradient(110deg, transparent 30%, #000 75%); }
[dir=rtl] .hero__pattern { mask-image: linear-gradient(-110deg, transparent 30%, #000 75%); -webkit-mask-image: linear-gradient(-110deg, transparent 30%, #000 75%); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.hero__for { font-size: .92rem; color: var(--bronze-ink); font-weight: 500; letter-spacing: .01em; margin-bottom: var(--s3); }
.hero__title { font-size: var(--fs-display); max-width: 13ch; }
[dir=rtl] .hero__title { max-width: 15ch; }
.hero__sub { margin-top: var(--s4); font-size: var(--fs-lead); color: var(--ink-2); max-width: 36rem; line-height: 1.5; }
.hero__actions { margin-top: var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
/* The arch keeps its 3 / 3.6 ratio and the video's trim; only its size moved. Width is capped by the
   column, a 560px ceiling, and the viewport height (ratio 1.2 tall per 1 wide, so the hero never
   overflows a short laptop). 16rem covers the hero's 7rem + 4rem padding plus breathing room. */
.hero__arch { position: relative; aspect-ratio: 3 / 3.6; border-radius: 999px 999px var(--r-lg) var(--r-lg); overflow: hidden; box-shadow: var(--lift-hi); background: var(--sand); justify-self: end; width: min(100%, 560px, calc((100svh - 16rem) / 1.2)); }
/* The inner is scroll-drifted, so the arch video keeps its own composited layer: a playing video
   inside a transformed, radius-clipped ancestor re-rasters every frame otherwise, which is the jitter
   that reads as the video fighting lenis' smooth scroll. */
.hero__arch video { width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); backface-visibility: hidden; }
.hero__arch::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(42,33,28,.28)); }
@media (max-width: 860px) {
  .hero { padding-block: 6.5rem 3.5rem; align-items: start; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__arch { justify-self: center; width: min(100%, 520px); aspect-ratio: 4 / 3.6; margin-top: var(--s2); }
}

/* 2. Film: one device morphs phone > desktop > full screen > desktop. JS writes the screen rect
   (--t --r --b --l insets from the .dev box, --rad, --bz bezel, --notch, --stand); frame, poster,
   canvas clip, notch and stand all read the same vars so they move as one object (Law 14). */
.film { position: relative; }
.film__pin { --t: 0px; --r: 0px; --b: 0px; --l: 0px; --rad: 0px; --bz: 0px; --notch: 0; --stand: 0;
  position: relative; height: 100svh; overflow: hidden; }
.dev { position: absolute; inset: 0; pointer-events: none; }
.dev__frame { position: absolute; top: calc(var(--t) - var(--bz)); right: calc(var(--r) - var(--bz)); bottom: calc(var(--b) - var(--bz)); left: calc(var(--l) - var(--bz));
  border-radius: calc(var(--rad) + var(--bz)); background: linear-gradient(145deg, #3A2E27, #1E1713); box-shadow: var(--lift-hi); }
.dev__poster { position: absolute; top: var(--t); left: var(--l); width: calc(100% - var(--l) - var(--r)); height: calc(100% - var(--t) - var(--b)); max-width: none;
  border-radius: var(--rad); object-fit: cover; background: #1E1713; }
.dev__screen { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(var(--t) var(--r) var(--b) var(--l) round var(--rad)); }
.dev__notch { position: absolute; top: calc(var(--t) + var(--bz) * 1.4); left: calc(var(--l) + (100% - var(--l) - var(--r)) / 2);
  width: calc((100% - var(--l) - var(--r)) * .3); aspect-ratio: 30 / 7;
  border-radius: 99px; background: #120D0A; transform: translateX(-50%); opacity: var(--notch); }
.dev__stand { position: absolute; top: calc(100% - var(--b) + var(--bz)); left: calc(var(--l) + (100% - var(--l) - var(--r)) / 2);
  width: calc((100% - var(--l) - var(--r)) * .26); height: calc((100% - var(--t) - var(--b)) * .11);
  transform: translateX(-50%); opacity: var(--stand); display: flex; flex-direction: column; align-items: center; }
.dev__stand i { flex: 1; width: 36%; background: linear-gradient(180deg, #120D0A, #3A2E27); clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
.dev__stand b { width: 100%; height: 7px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #3A2E27, #1E1713); box-shadow: var(--lift); }
.film__scrim { position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden;
  background: linear-gradient(270deg, rgba(42,33,28,.8) 0%, rgba(42,33,28,.55) 36%, rgba(42,33,28,0) 64%); }
[dir=rtl] .film__scrim { background: linear-gradient(90deg, rgba(42,33,28,.8) 0%, rgba(42,33,28,.55) 36%, rgba(42,33,28,0) 64%); }
.film__side { --fi: var(--ink); --fm: var(--ink-3); --fa: var(--bronze-ink); --ft: rgba(244,237,220,.14);
  position: absolute; top: 0; bottom: 0; inset-inline-end: calc(max(0px, (100% - 1320px) / 2) + clamp(1.25rem, 4vw, 3rem));
  width: min(34vw, 30rem); padding-top: 4.5rem; display: flex; flex-direction: column; justify-content: center; gap: var(--s4); }
.film__head { display: grid; gap: var(--s3); }
.film__head .h2 { transform-origin: top left; }
[dir=rtl] .film__head .h2 { transform-origin: top right; }
.film__head .lead { color: var(--fm); }
/* The film scrub rides the headline low on the phone hold: the h2 drops 10px (SY.phone) and every .gw word
   another 26px (WY.phone, main.js), while this sibling lead stays on its layout top. With the .gw block
   padding (.2em / .3em in ku) the last word's box lands ~22px (en) to ~25px (ku) past the lead's top, and the
   lead is only visible on that same hold (lead autoAlpha = phone). So the lead clears it: one --s4 rung on top
   of the --s3 grid gap. Scoped off the reduced-motion state, which runs no word drop and keeps the tight gap. */
.film:not(.is-static) .film__head .lead { margin-top: var(--s4); }
.film__idx { position: relative; padding-inline-start: 1.4rem; }
/* borderless-keep: progress */
.film__rail { position: absolute; inset-block: .3rem; inset-inline-start: 0; width: 2px; border-radius: 2px; background: var(--ft); overflow: hidden; }
.film__rail i { display: block; height: 100%; background: linear-gradient(180deg, var(--bronze), var(--bronze-ink)); transform-origin: top; transform: scaleY(0); }
.film__list { display: grid; gap: .2rem; }
/* Each row is its own well, not a bordered card: the active row carries a soft tint of the stage accent
   (fill, no rim, radius matched) and its glyph steps up a size, while the rest recede. The tint and the
   stroke both read --fa, so they flip to ivory with the rest of the column on the full-bleed state. */
.fitem { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .85rem; align-items: start;
  padding-block: .6rem; padding-inline: .85rem; margin-inline-start: -.85rem; border-radius: 14px;
  background-color: transparent; transition: background-color .7s var(--ease), opacity .7s var(--ease); }
.fitem.is-on { background-color: color-mix(in srgb, var(--fa) 9%, transparent); }
.fitem:not(.is-on) { opacity: .8; }
.fitem__ic { width: 1.4rem; height: 1.4rem; margin-top: .18rem; fill: none; stroke: var(--fa); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .5;
  transform-origin: 50% 50%; transition: opacity .5s var(--ease), transform .7s var(--ease); }
.fitem h3 { font-size: 1.12rem; line-height: 1.28; font-weight: 600; letter-spacing: -.01em; color: var(--fi); opacity: .6; transition: opacity .5s var(--ease); }
[dir=rtl] .fitem h3 { letter-spacing: 0; line-height: 1.45; font-weight: 700; }
.fitem.is-on .fitem__ic, .fitem.is-on h3 { opacity: 1; }
.fitem.is-on .fitem__ic { transform: scale(1.14) translateY(-1px); }
.fitem__b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease), margin .6s var(--ease); }
.fitem.is-on .fitem__b { grid-template-rows: 1fr; margin-top: .35rem; }
.fitem__b > p { overflow: hidden; min-height: 0; color: var(--fm); font-size: .95rem; line-height: 1.5; text-wrap: pretty; }
[dir=rtl] .fitem__b > p { line-height: 1.7; }
@media (max-width: 1020px) {
  .film__side { inset: 4.75rem clamp(1.25rem, 4vw, 3rem) 18px; width: auto; padding-top: 0; justify-content: flex-start; gap: 0; }
  .film__head { text-align: center; justify-items: center; }
  /* layout() parks the device 18px under the head box, but the phone hold drops the words ~36px (SY + WY)
     and the bezel sits outside the screen rect: this padding is counted in offsetHeight, so it moves the device. */
  .film:not(.is-static) .film__head { padding-bottom: 2.5rem; }
  .film__head .h2 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.4rem); max-width: 20ch; transform-origin: top center; }
  .film__head .lead { display: none; }
  .film__idx { margin-top: auto; padding-inline-end: .6rem; }
  .film__list { gap: .6rem; }
  .fitem { padding-block: .4rem; padding-inline: .6rem; margin-inline-start: -.6rem; border-radius: 12px; }
  .fitem h3 { font-size: 1rem; }
  .fitem__b > p { font-size: .9rem; line-height: 1.45; }
  .fitem.is-on .fitem__b { margin-top: .2rem; }
  .dev__stand { height: calc((100% - var(--t) - var(--b)) * .1); }
  .film__scrim, [dir=rtl] .film__scrim { background: linear-gradient(180deg, rgba(42,33,28,.72) 0%, rgba(42,33,28,0) 32%, rgba(42,33,28,0) 48%, rgba(42,33,28,.85) 100%); }
}
/* Static final state (reduced motion or no GSAP): a desktop beside the opened list, no pin. */
.film.is-static .film__pin { height: auto; overflow: visible; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: center; max-width: 1320px; margin-inline: auto; padding: var(--sec) clamp(1.25rem, 4vw, 3rem); }
.film.is-static .dev { grid-area: 1 / 1; position: relative; inset: auto; aspect-ratio: 16 / 10; margin-bottom: 9%; }
.film.is-static .dev__screen, .film.is-static .film__scrim { display: none; }
.film.is-static .film__side { grid-area: 1 / 2; position: static; inset: auto; width: auto; padding: 0; transform: none; }
.film.is-static .film__idx { margin-top: 0; }
@media (max-width: 1020px) { .film.is-static .film__pin { grid-template-columns: 1fr; } .film.is-static .film__side { grid-area: 2 / 1; } .film.is-static .film__head { margin-bottom: var(--s3); } }

/* 3. Story / laptop */
.story__pin { min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-block: 5.5rem 2rem; }
.story__head { display: grid; gap: var(--s2); margin-bottom: clamp(1.5rem, 3vw, 3rem); max-width: 50rem; }
.story__stage { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); gap: clamp(2rem, 4.5vw, 5rem); align-items: center; perspective: 1800px; padding-inline-start: 2.5rem; }
.laptop { position: relative; transform-style: preserve-3d; transform-origin: 50% 100%; }
@media (min-width: 961px) { .laptop { width: min(100%, calc((100svh - 19rem) * 1.6)); justify-self: center; } }
.laptop__lid { padding: 1.4%; border-radius: 18px 18px 6px 6px; background: linear-gradient(160deg, #3B2F28, #1C1511); box-shadow: var(--lift-hi); }
.laptop__screen { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #16100B; }
.laptop__base { height: clamp(10px, 1.3vw, 18px); margin-inline: -7%; border-radius: 2px 2px 16px 16px; background: linear-gradient(180deg, #E4D6BC, #BFA67C); box-shadow: 0 30px 40px -24px rgba(42,33,28,.5); position: relative; }
.laptop__base::after { content: ''; position: absolute; top: 0; left: 50%; width: 16%; height: 40%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: rgba(42,33,28,.16); }
.story__beats { position: relative; min-height: 24rem; }
.beat { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(20px); transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none; }
.beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.beat__k { font-size: clamp(2.6rem, 2rem + 2vw, 4rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--bronze-ink); font-variant-numeric: tabular-nums; }
.beat h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.015em; font-weight: 600; margin-block: var(--s2) .75rem; }
[dir=rtl] .beat h3 { letter-spacing: 0; line-height: 1.3; font-weight: 700; }
.beat p { color: var(--ink-2); line-height: 1.6; }
.beat ul { margin-top: var(--s3); display: grid; gap: .55rem; }
.beat li { position: relative; padding-inline-start: 1.4rem; font-size: .92rem; color: var(--ink-2); line-height: 1.45; }
.beat li::before { content: ''; position: absolute; inset-inline-start: 0; top: .7em; width: .7rem; height: 1px; background: var(--bronze); }
.rail { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); display: grid; gap: .5rem; }
.rail li { width: 3px; height: 1.9rem; border-radius: 3px; background: rgba(244,237,220,.12); overflow: hidden; position: relative; }
.rail li span { position: absolute; inset: 0; background: var(--bronze); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.rail li.is-done span, .rail li.is-on span { transform: scaleY(1); }
.rail li.is-on { background: rgba(201,164,76,.3); }
@media (max-width: 960px) {
  .story__pin { padding-block: 4.6rem 1rem; align-items: start; }
  .story__head { margin-bottom: 1rem; }
  .story__head .h2 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.4rem); }
  .story__head .lead { display: none; }
  .story__stage { grid-template-columns: 1fr; gap: 1.6rem; padding-inline-start: 0; padding-top: 1.2rem; }
  .rail { top: 0; transform: none; inset-inline: 0; display: flex; gap: .35rem; }
  .rail li { flex: 1; width: auto; height: 3px; }
  .rail li span { transform: scaleX(0); transform-origin: left; }
  [dir=rtl] .rail li span { transform-origin: right; }
  .rail li.is-done span, .rail li.is-on span { transform: scaleX(1); }
  .story__beats { min-height: 15rem; }
  .beat__k { font-size: 2rem; }
  .beat h3 { margin-block: .4rem .5rem; font-size: 1.2rem; }
  .beat p { font-size: .95rem; line-height: 1.5; }
  .beat ul { display: none; }
}

/* Mini UI inside the laptop: designed at 960x600, scaled to fit */
.ui { position: absolute; top: 0; left: 0; width: 960px; height: 600px; transform-origin: 0 0; transform: scale(var(--s, 1)); font-size: 14px; line-height: 1.4; color: var(--ink); background: linear-gradient(180deg, #211811, #16100B); }
/* Dark app mock: inherits the root dark palette so the whole page reads as one theme. */
[dir=rtl] .ui { left: auto; right: 0; transform-origin: 100% 0; }
.ui__bar { height: 52px; display: flex; align-items: center; gap: 18px; padding: 0 22px; background: rgba(22,16,11,.55); box-shadow: 0 1px 0 rgba(244,237,220,.06); }
.ui__logo { font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.ui__logo svg { width: 18px; height: 18px; color: var(--bronze-ink); }
.ui__search { flex: 1; max-width: 380px; height: 32px; border-radius: 99px; background: rgba(244,237,220,.06); display: flex; align-items: center; padding: 0 14px; color: var(--ink-3); font-size: 13px; }
.ui__live { margin-inline-start: auto; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--st-available); font-weight: 600; }
.ui__live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.ui__st { position: absolute; inset: 52px 0 0 0; padding: 22px; opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .5s; }
.ui__st.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.ui h4 { margin: 0; font-size: 22px; letter-spacing: -.02em; font-weight: 650; }
.ui small { color: var(--ink-3); font-size: 12px; }
.chip { display: inline-flex; padding: 6px 12px; border-radius: 99px; background: rgba(244,237,220,.06); font-size: 12px; font-weight: 500; }
.chip.on { background: var(--espresso); color: var(--ivory); }
.panel { background: var(--sand); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.5); padding: 16px; }
.ui .chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* state 1 map */
.map { position: absolute; inset: 70px 22px 22px 22px; border-radius: 16px; overflow: hidden; background: #1E1712; }
.map svg { width: 100%; height: 100%; }
.pin { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 4px; }
.pin b { padding: 6px 11px; border-radius: 10px; background: var(--espresso); color: var(--ivory); font-size: 12px; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(42,33,28,.6); }
.pin b em { font-style: normal; color: var(--bronze); margin-inline-start: 6px; }
.pin i { width: 10px; height: 10px; border-radius: 50%; background: var(--bronze); box-shadow: 0 0 0 6px rgba(201,164,76,.25); }
.pin--hot b { background: var(--bronze); color: var(--espresso); }
.pin--hot b em { color: var(--espresso); }
/* state 2 project */
.proj { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; height: 100%; }
.proj__img { border-radius: 16px; overflow: hidden; position: relative; }
.proj__img img { width: 100%; height: 100%; object-fit: cover; }
.proj__info { display: grid; align-content: start; gap: 14px; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.kv span { color: var(--ink-3); }
.bar { height: 6px; border-radius: 6px; background: rgba(244,237,220,.08); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; border-radius: 6px; background: var(--bronze); }
.ui .mini-btn { display: inline-flex; justify-content: center; padding: 11px 16px; border-radius: 99px; background: var(--espresso); color: var(--ivory); font-weight: 600; font-size: 13px; }
/* state 3 orbit / 5 status: building facade */
.bld { position: absolute; inset: 22px; border-radius: 16px; overflow: hidden; }
.bld__sky { position: absolute; inset: 0; transition: background 1.2s; background: linear-gradient(180deg, #2E2A3A, #4A3B2E 70%, #5A4626); }
.bld.is-dusk .bld__sky { background: linear-gradient(180deg, #3C3A55, #B9776A 62%, #E7B27C); }
.towers { position: absolute; inset: 40px 0 34px 0; display: flex; justify-content: center; align-items: flex-end; gap: 34px; }
.tower { position: relative; display: grid; gap: 3px; padding: 8px 7px; background: linear-gradient(90deg, #3A2E22, #4A3A2A 45%, #2E241A); border-radius: 4px 4px 0 0; box-shadow: 0 30px 40px -24px rgba(0,0,0,.6); }
.tower::before { content: ''; position: absolute; top: -10px; inset-inline: 10%; height: 10px; background: var(--bronze); border-radius: 3px 3px 0 0; }
.tower .row { display: grid; grid-template-columns: repeat(4, 22px); gap: 3px; }
.tower .u { height: 13px; border-radius: 2px; background: rgba(78,98,112,.5); transition: background-color .5s, box-shadow .5s; }
.bld.is-dusk .tower .u { background: rgba(255,214,140,.75); }
.bld--status .tower .u { background: var(--c); }
.bld--status .tower .u[data-st=reserved] { background: repeating-linear-gradient(135deg, var(--st-reserved) 0 3px, #E9B562 3px 5px); }
.bld--status .tower .u[data-st=onHold] { background: repeating-linear-gradient(90deg, var(--st-onHold) 0 3px, #8E9DBB 3px 5px); }
.bld--status .tower .u.flash { box-shadow: 0 0 0 2px #fff, 0 0 14px 2px var(--c); }
.tower .u.hover { box-shadow: 0 0 0 2px var(--bronze), 0 0 16px 3px rgba(201,164,76,.9); }
.tag { position: absolute; padding: 7px 11px; border-radius: 10px; background: rgba(42,33,28,.88); color: var(--ivory); font-size: 12px; white-space: nowrap; }
.tag b { color: var(--bronze); }
.compass { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 22px; padding: 7px 16px; border-radius: 99px; background: rgba(22,16,11,.6); font-size: 12px; font-weight: 600; color: var(--ink-3); }
.compass .on { color: var(--ivory); }
.tod { position: absolute; top: 14px; inset-inline-end: 14px; display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(22,16,11,.6); }
.tod span { padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 500; }
.tod span.on { background: var(--espresso); color: var(--ivory); }
.legend { position: absolute; top: 14px; inset-inline-start: 14px; display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: rgba(22,16,11,.72); font-size: 12px; }
.legend span { display: flex; align-items: center; gap: 8px; }
.legend i { width: 14px; height: 10px; border-radius: 2px; background: var(--c); }
/* state 4 floor plan */
.plan { display: grid; grid-template-columns: 1fr 230px; gap: 18px; height: 100%; }
.plan svg { width: 100%; height: 100%; }
.plan .panel { display: grid; align-content: start; gap: 10px; }
/* state 6 unit */
.unit { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; height: 100%; }
.unit .panel { display: grid; align-content: start; gap: 12px; }
.sched { display: flex; align-items: flex-end; gap: 5px; height: 90px; margin-top: 6px; }
.sched i { flex: 1; border-radius: 3px 3px 0 0; background: var(--sand-2); }
.sched i:first-child { background: var(--bronze); }
.sched i:last-child { background: var(--espresso); }
.big { font-size: 28px; font-weight: 650; letter-spacing: -.02em; }
/* state 7 reserve */
.resv { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; height: 100%; align-items: center; }
.timer { font-size: 76px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--bronze); line-height: 1; }
.pay { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pay span { padding: 11px; border-radius: 10px; background: rgba(244,237,220,.05); font-weight: 600; font-size: 13px; text-align: center; }
.pay span.on { background: var(--espresso); color: var(--ivory); }
/* state 8 control */
.ctrl { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr; gap: 14px; height: 100%; }
.ctrl .panel { display: grid; align-content: start; gap: 6px; }
.ctrl .wide { grid-column: span 2; }
.funnel { display: grid; gap: 8px; margin-top: 4px; }
.funnel div { display: grid; grid-template-columns: 120px 1fr 50px; align-items: center; gap: 10px; font-size: 12px; }
.funnel i { height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--bronze), var(--sand-3)); }
.log { display: grid; gap: 7px; font-size: 12px; font-family: ui-monospace, Menlo, monospace; color: var(--ink-2); }
.up { color: var(--st-available); font-size: 12px; font-weight: 600; }

/* 4. Explorer */
.explore { padding-top: clamp(2.5rem, 1.6rem + 3vw, 5.5rem); }
.explore__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s4); align-items: end; margin-bottom: var(--s4); }
.explore__head > div { display: grid; gap: var(--s3); }
.voice { display: flex; gap: 1.2rem; align-items: center; padding: 1.4rem 1.6rem; border-radius: var(--r-md); background: var(--espresso); color: var(--ivory); box-shadow: var(--lift-hi); }
.voice h3 { font-size: 1.05rem; font-weight: 600; }
.voice p { font-size: .9rem; color: rgba(246,241,231,.72); line-height: 1.5; margin-top: .3rem; }
.voice .voice__say { color: var(--bronze); font-weight: 600; font-size: 1rem; }
.voice__wave { display: flex; align-items: center; gap: 4px; height: 36px; flex: none; }
.voice__wave i { width: 3px; height: 30%; border-radius: 3px; background: var(--bronze); animation: wave 1.2s ease-in-out infinite; }
.voice__wave i:nth-child(2) { animation-delay: .15s; } .voice__wave i:nth-child(3) { animation-delay: .3s; } .voice__wave i:nth-child(4) { animation-delay: .45s; } .voice__wave i:nth-child(5) { animation-delay: .6s; }
@keyframes wave { 50% { height: 100%; } }
#explorerMount, #explorerMount.xp { position: relative; height: min(92svh, 900px); min-height: 560px; background: var(--sand); overflow: hidden; }
#explorerMount .xp-map.maplibregl-map { position: absolute; inset: 0; } /* maplibre-gl.css loads after explorer.css and resets it to relative */
/* Embedded: the section head and the nav language toggle already do this job */
#explorerMount .xp-brand, #explorerMount .xp-lang { display: none; }
#explorerMount .xp-search { margin-inline-end: auto; }
#explorerMount .xp-ask { background: var(--xp-bronze); } /* explorer.css `.xp button` reset outranks its own .xp-ask fill */
#explorerMount .xp-ask:hover, #explorerMount .xp-ask:focus-visible { background: var(--xp-bronze-deep); }
.explore__fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.explore__fallback img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.explore__fallback p { position: relative; max-width: 26rem; padding: 1.2rem 1.5rem; border-radius: var(--r-md); background: rgba(24,18,13,.9); box-shadow: var(--lift); text-align: center; color: var(--ink-2); }
@media (max-width: 860px) { .explore__head { grid-template-columns: 1fr; } #explorerMount, #explorerMount.xp { height: 88svh; } }

/* 5. Roles */
.roles { padding-block: var(--sec); }
.roles__grid { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
/* colour field the glass cards sit on */
.roles__grid::before { content: ''; position: absolute; inset: -4rem 0; z-index: -1; pointer-events: none; filter: blur(34px);
  background:
    radial-gradient(36% 50% at 12% 26%, color-mix(in srgb, var(--bronze) 40%, transparent), transparent 72%),
    radial-gradient(32% 46% at 46% 80%, color-mix(in srgb, var(--st-onHold) 28%, transparent), transparent 72%),
    radial-gradient(28% 44% at 38% 16%, color-mix(in srgb, var(--st-available) 18%, transparent), transparent 72%),
    radial-gradient(30% 62% at 90% 48%, color-mix(in srgb, var(--st-reserved) 34%, transparent), transparent 72%); }
.role { --tint: var(--sand); position: relative; display: flex; flex-direction: column; padding: 1.7rem 1.6rem 1.8rem; border-radius: var(--r-md);
  background: linear-gradient(155deg, color-mix(in srgb, var(--paper) 70%, transparent), color-mix(in srgb, var(--tint) 26%, transparent));
  -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: var(--lift); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.role:nth-child(4n+2) { --tint: var(--st-onHold); }
.role:nth-child(4n+3) { --tint: var(--sand-3); }
.role:nth-child(4n) { --tint: var(--st-available); }
.role:hover { transform: translateY(-4px); box-shadow: var(--lift-hi); }
.role__ic { width: 1.6rem; height: 1.6rem; margin-bottom: 1.1rem; fill: none; stroke: var(--bronze-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.role h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; margin-block: 0 .55rem; }
.role p { font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
/* the control role: dark glass feature, spans both rows */
.role--lead { grid-column: 4; grid-row: 1 / span 2; padding: 2rem 1.8rem 2.1rem; color: var(--ivory);
  background:
    radial-gradient(90% 55% at 100% 0%, color-mix(in srgb, var(--bronze) 34%, transparent), transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--espresso) 86%, transparent), color-mix(in srgb, var(--espresso) 70%, transparent)); }
.role--lead .role__ic { width: 2.4rem; height: 2.4rem; stroke: var(--bronze); margin-bottom: auto; padding-bottom: 1.6rem; box-sizing: content-box; }
.role--lead h3 { font-size: var(--fs-h3); letter-spacing: -.015em; }
.role--lead p { color: color-mix(in srgb, var(--ivory) 80%, transparent); }
@media (max-width: 1180px) {
  .roles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role--lead { grid-column: 1 / -1; grid-row: auto; }
  .role--lead .role__ic { margin-bottom: 0; }
}
@media (max-width: 640px) { .roles__grid { grid-template-columns: minmax(0, 1fr); } }
.controls { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s3); margin-top: var(--s5); }
.ctl { padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--lift); display: grid; gap: .8rem; align-content: start; }
.ctl h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.015em; }
.ctl > p { color: var(--ink-2); }
.dual { margin-top: var(--s2); display: grid; gap: .5rem; }
.dual__req { font-size: .85rem; color: var(--ink-3); margin-bottom: .3rem; }
.dual__row { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.1rem; border-radius: var(--r-sm); background: var(--panel); font-size: .95rem; }
.dual__st { font-weight: 600; font-size: .85rem; color: var(--ink-3); transition: color .4s; }
.dual__st.is-ok { color: #5BB788; }
.audit { margin-top: var(--s2); display: grid; gap: .45rem; font-size: .84rem; }
.audit li { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; padding: .75rem 1rem; border-radius: var(--r-sm); background: var(--panel); }
.audit time { font-family: ui-monospace, Menlo, monospace; color: var(--ink-3); font-size: .78rem; padding-top: .1rem; }
.audit code { grid-column: 2; font-family: ui-monospace, Menlo, monospace; font-size: .76rem; color: var(--bronze-ink); }
@media (max-width: 860px) { .controls { grid-template-columns: 1fr; } }

/* 6. Stack */
.stack { padding-block: var(--sec); position: relative; }
.stack__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.tool { position: relative; padding: 1.9rem 1.7rem; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--lift); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.tool:hover { transform: translateY(-4px); box-shadow: var(--lift-hi); }
.tool:nth-child(3n+2) { margin-top: 4.5rem; }
.tool:nth-child(3n) { margin-top: 2.25rem; }
.tool__n { position: absolute; inset-inline-end: 1.2rem; top: .6rem; font-size: 4.5rem; font-weight: 700; letter-spacing: -.05em; line-height: 1; color: rgba(201,164,76,.16); font-family: var(--font); }
.tool h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; max-width: 80%; }
.tool__tools { margin-block: .55rem .9rem; font-size: .84rem; font-weight: 600; color: var(--bronze-ink); line-height: 1.45; }
.tool p { font-size: .94rem; color: var(--ink-2); line-height: 1.6; }
/* 10 groups on 3 columns: the last one takes the whole row instead of sitting alone */
@media (min-width: 1021px) {
  .tool:last-child:nth-child(3n+1) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: var(--s5); align-items: center; }
  .tool:last-child:nth-child(3n+1) > :not(.tool__n):not(:last-child) { grid-column: 1; }
  .tool:last-child:nth-child(3n+1) > p:last-child { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 1020px) { .stack__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tool:nth-child(n) { margin-top: 0; } .tool:nth-child(2n) { margin-top: 2.5rem; } }
@media (max-width: 640px) { .stack__grid { grid-template-columns: 1fr; } .tool:nth-child(n) { margin-top: 0; } }

/* 7. Roadmap */
.roadmap { padding-block: var(--sec); }
.timeline { display: flex; gap: 4px; height: 3.2rem; margin-bottom: var(--s4); border-radius: 999px; overflow: hidden; }
.timeline div { display: flex; align-items: center; padding-inline: 1.2rem; font-size: .85rem; font-weight: 600; white-space: nowrap; transform-origin: left; }
[dir=rtl] .timeline div { transform-origin: right; }
.timeline div:nth-child(1) { flex: 6; background: var(--espresso); color: var(--ivory); }
.timeline div:nth-child(2) { flex: 7; background: var(--bronze); color: #180F08; }
.timeline div:nth-child(3) { flex: 8; background: var(--sand-3); color: var(--ivory); }
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); align-items: start; }
.phase { padding: 2.25rem 2rem 2rem; border-radius: 14px; background: var(--paper); box-shadow: var(--lift); display: grid; gap: .75rem; align-content: start; }
.phase:nth-child(2) { margin-top: var(--s5); box-shadow: var(--lift-hi); }
.phase__w { font-size: .85rem; color: var(--bronze-ink); font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.phase h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
.phase__goal { color: var(--ink-2); font-size: .98rem; }
.phase ul { display: grid; gap: .7rem; margin-block: .9rem .5rem; }
.phase li { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); gap: .75rem; align-items: start; font-size: .92rem; color: var(--ink-2); line-height: 1.45; }
.phase__ic { width: 1.15rem; height: 1.15rem; margin-top: .08em; fill: none; stroke: var(--bronze-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.phase__gate { font-size: .85rem; font-weight: 600; padding: .6rem .9rem; border-radius: 8px; background: var(--panel); }
.phase__price { margin-top: .6rem; padding-top: 1.1rem; font-size: 2.2rem; font-weight: 600; letter-spacing: -.03em; font-family: var(--font); font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, rgba(227,196,119,.3), rgba(227,196,119,0)) top / 100% 1px no-repeat; } /* borderless-keep: divider */
[dir=rtl] .phase__price { background-image: linear-gradient(270deg, rgba(227,196,119,.3), rgba(227,196,119,0)); }
.roadmap__lib { display: flex; gap: .85rem; align-items: flex-start; max-width: 64ch; margin-bottom: var(--s2); font-size: 1.05rem; font-weight: 500; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.roadmap__lib svg { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .1em; fill: none; stroke: var(--bronze-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.invest { margin-top: var(--s5); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s5); align-items: start; }
.invest__head { display: grid; gap: var(--s2); }
.invest__head p { color: var(--ink-2); }
.invest__table { display: grid; gap: 4px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift); }
.irow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.5rem; align-items: baseline; padding: 1.15rem 1.5rem; background: var(--paper); }
.irow:nth-child(even):not(.irow--total) { background: var(--panel); }
.irow b { font-family: var(--font); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-align: end; }
.irow span:nth-child(2) { color: var(--ink-3); font-size: .9rem; }
.irow--total { background: var(--espresso); color: var(--ivory); padding-block: 1.5rem; }
.irow--total b { font-size: 1.8rem; color: var(--bronze); }
.irow--total span:nth-child(2) { color: rgba(246,241,231,.65); }
.irow small { display: block; font-size: .82rem; color: rgba(246,241,231,.65); margin-top: .2rem; }
@media (max-width: 960px) { .phases { grid-template-columns: 1fr; } .phase:nth-child(2) { margin-top: 0; } .invest { grid-template-columns: 1fr; gap: var(--s4); } }
@media (max-width: 560px) { .irow { grid-template-columns: 1fr auto; } .irow span:nth-child(2) { grid-row: 2; } .timeline div { font-size: .72rem; padding-inline: .6rem; } }

/* 8. Beyond */
.beyond { padding-block: var(--sec); background: linear-gradient(180deg, rgba(22,16,11,0), #1E1610 70%, #19130C); position: relative; isolation: isolate; }
.beyond::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pattern); opacity: .1; mask-image: linear-gradient(transparent, #000); -webkit-mask-image: linear-gradient(transparent, #000); }
.beyond__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.beyond__copy { display: grid; gap: var(--s3); }
.beyond__list { display: grid; gap: var(--s3); margin-top: var(--s2); }
.beyond__list li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .2rem 1rem; }
.beyond__list li > span { grid-row: span 2; font-weight: 600; color: var(--bronze-ink); font-variant-numeric: tabular-nums; padding-top: .1rem; }
.beyond__list h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.beyond__list p { color: var(--ink-2); font-size: .97rem; }
.beyond .fine { color: var(--ink-2); }
.beyond__price { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; padding: 1.1rem 1.4rem; border-radius: var(--r-md); background: rgba(26,20,14,.55); box-shadow: var(--lift); }
.beyond__price b { font-family: var(--font); font-weight: 600; }
.beyond__media { position: relative; height: clamp(520px, 52vw, 720px); }
.reel { position: absolute; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--lift-hi); background: var(--sand-2); }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel--main { width: 52%; aspect-ratio: 9 / 16; inset-inline-start: 24%; top: 0; z-index: 2; }
.reel--side { width: 34%; aspect-ratio: 9 / 16; inset-inline-start: 0; top: 22%; }
.reel--side2 { width: 30%; aspect-ratio: 9 / 16; inset-inline-end: 0; top: 34%; }
.reel figcaption { position: absolute; inset-inline: 1rem; bottom: 1rem; font-size: .8rem; color: var(--ivory); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
@media (max-width: 860px) { .beyond__inner { grid-template-columns: 1fr; } .beyond__media { height: 128vw; max-height: 640px; } }

/* 9. Footer */
.foot { background: var(--espresso); color: var(--ivory); padding-block: var(--sec) 2.5rem; overflow: hidden; position: relative; }
.foot .lead { color: rgba(246,241,231,.72); }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s4); }
.foot__top > div { display: grid; gap: var(--s3); }
.foot__mark { font-family: var(--font); font-weight: 800; font-size: clamp(3.4rem, 19vw, 19rem); letter-spacing: -.02em; line-height: .85; margin-block: var(--s5) var(--s4); color: color-mix(in srgb, var(--ivory) 7%, transparent); text-transform: uppercase; white-space: nowrap; direction: ltr; text-align: center; user-select: none; }
.foot__base { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 1rem 2rem; font-size: .85rem; color: rgba(246,241,231,.6); }
.foot__base b { color: var(--ivory); font-weight: 600; }
/* Map tile attributions, off the map (its credit pill is disabled). Bare copy, ink-3, no plate (Law 16).
   Latin runs stay LTR so bidi does not move their trailing punctuation; in RTL they align to the footer edge. */
.foot__credit { grid-column: 1 / -1; color: var(--ink-3); direction: ltr; }
[dir=rtl] .foot__credit { text-align: right; }
@media (max-width: 860px) { .foot__base { grid-template-columns: 1fr; } .btn__mail { display: none; } }

/* !important kept: a reduced-motion kill switch has to beat every state rule on the page, whatever its specificity. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 3b. Cinematic estate film (scroll-scrubbed video, text in screen zones) ---------- */
.cine { position: relative; background: var(--bg); }
.cine__pin { position: relative; height: 100svh; overflow: hidden; color: var(--ivory); will-change: clip-path; }
.cine__media { position: absolute; inset: 0; background: var(--espresso); }
.cine__media video { width: 100%; height: 100%; object-fit: cover; }
.cine__shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(24,18,14,.62) 0%, rgba(24,18,14,.12) 30%, rgba(24,18,14,.1) 62%, rgba(24,18,14,.72) 100%),
  radial-gradient(70% 60% at 50% 50%, rgba(24,18,14,.28), transparent 70%); }
.cine__b { position: absolute; max-width: 23rem; opacity: 0; visibility: hidden; text-shadow: 0 1px 18px rgba(24,18,14,.45); scale: var(--cs, 1); }
.cine__b[data-z=mid] { inset-inline: 0; margin-inline: auto; top: 50%; transform: translateY(-50%); max-width: 46rem; padding-inline: 1.5rem; text-align: center; }
.cine__b[data-z=end] { inset-inline-end: clamp(1.5rem, 6vw, 6rem); top: 50%; transform: translateY(-50%); }
.cine__b[data-z=start] { inset-inline-start: clamp(1.5rem, 6vw, 6rem); top: 50%; transform: translateY(-50%); }
.cine__b[data-z=top] { inset-inline: 0; margin-inline: auto; top: clamp(5.5rem, 13vh, 9rem); text-align: center; max-width: 30rem; }
.cine__b[data-z=bottom] { inset-inline: 0; margin-inline: auto; bottom: clamp(5rem, 14vh, 9rem); text-align: center; max-width: 32rem; }
.cine__b[data-z=top] .cine__ic, .cine__b[data-z=bottom] .cine__ic { margin-inline: auto; }
.cine__title { font-size: var(--fs-h2); }
.cine__lead { margin-top: var(--s3); font-size: var(--fs-lead); line-height: 1.5; color: rgba(246,241,231,.86); max-width: 34rem; margin-inline: auto; }
[dir=rtl] .cine__lead, [dir=rtl] .cine__b p { line-height: 1.8; }
.cine__ic { width: 2.1rem; height: 2.1rem; margin-bottom: var(--s2); fill: none; stroke: #E3C987; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cine__ic * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.cine__b h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
[dir=rtl] .cine__b h3 { letter-spacing: 0; line-height: 1.5; }
.cine__b p { margin-top: .6rem; font-size: 1rem; line-height: 1.5; color: rgba(246,241,231,.84); }
.cine__cta { margin-top: var(--s3); }
.cine__idx { position: absolute; inset-inline: 0; bottom: clamp(1.4rem, 4vh, 2.4rem); margin-inline: auto; width: min(22rem, 70vw); display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.cine__idx li { height: 2px; background: rgba(246,241,231,.24); border-radius: 2px; overflow: hidden; }
.cine__idx i { display: block; height: 100%; background: #E3C987; transform: scaleX(0); transform-origin: 0 50%; }
[dir=rtl] .cine__idx i { transform-origin: 100% 50%; }
@media (max-width: 760px) {
  .cine__b, .cine__b[data-z] { inset-inline: 1.25rem; top: auto; bottom: clamp(4.5rem, 12vh, 7rem); transform: none; max-width: none; margin-inline: 0; text-align: start; padding-inline: 0; }
  .cine__b[data-z] .cine__ic { margin-inline: 0; }
  .cine__lead { margin-inline: 0; }
  .cine__b p { font-size: .95rem; }
}
/* Reduced motion (or no GSAP): no pin, no scrub, the poster with every chapter listed */
.cine.is-static .cine__pin { height: auto; min-height: 100svh; display: grid; align-content: center; gap: var(--s4); padding: var(--sec) clamp(1.25rem, 4vw, 3rem); }
.cine.is-static .cine__b { position: relative; inset: auto; transform: none; opacity: 1; visibility: visible; margin-inline: auto; max-width: 40rem; text-align: center; }
.cine.is-static .cine__ic { margin-inline: auto; }
.cine.is-static .cine__idx { display: none; }
@media (prefers-reduced-motion: reduce) { .display { animation: none; } }

/* ---------- 3c. Depth corridor gallery: two mirrored rails of project stills rush out of a vanishing point.
   CSS 3D only. Perspective 30cqw, 9 cards per rail, 15s linear loop, negative delays so the corridor is full on frame
   one. Depth is spaced geometrically in apparent size: scale = (2.6/25)*(46/2.6)^u, z = 30*(1-1/scale);
   rail x = 44-(44+11)*(1-u)^3.3, rotateY 6 -> 28deg, 24 sampled stops. Paused offscreen (IO), paused mid-flight
   under reduced motion. ---------- */
.corr { position: relative; padding-top: var(--sec); background: var(--bg); }
.corr__head { display: grid; gap: var(--s3); justify-items: center; text-align: center; margin-bottom: var(--s4); }
.corr__head .lead { max-width: 38rem; }
/* 2026-10-16: band shortened, tiles enlarged, 5 per rail at 26s (was 9 at 15s), and the section pad
   pulled in, so the head sits close under the corridor instead of a screen-height below it. */
.corr__view { position: relative; height: clamp(18rem, 34vw, 30rem); overflow: hidden; background: radial-gradient(ellipse 60% 55% at 50% 50%, #241C14 0%, #1A130C 70%, #100B08 100%); }
.corr__space { position: absolute; top: 0; bottom: 0; left: 50%; width: max(100%, 40rem); transform: translateX(-50%); container-type: inline-size; }
.corr__rig { position: absolute; inset: 0; perspective: 30cqw; perspective-origin: 50% 50%; transform-style: preserve-3d; }
.corr__card {
  position: absolute; left: 50%; top: 50%; width: 24cqw; height: 33cqw; margin: -16.5cqw 0 0 -12cqw;
  border-radius: 1.4cqw; overflow: hidden; background: var(--sand-2); box-shadow: var(--lift);
  backface-visibility: hidden; will-change: transform, opacity;
  animation: corrR 26s linear infinite both; animation-delay: calc(var(--d) * -26s / 5); animation-play-state: paused;
}
.corr__card--l { animation-name: corrL; }
.corr__card img { width: 100%; height: 100%; object-fit: cover; }
.corr.is-on .corr__card { animation-play-state: running; }
/* Edge vignette: every edge melts into the band's own ground, so births and exits never show a cut. */
.corr__view::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(11,8,6,0) 14%, rgba(11,8,6,0) 86%, var(--bg) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(11,8,6,0) 16%, rgba(11,8,6,0) 84%, var(--bg) 100%),
    radial-gradient(ellipse 75% 70% at 50% 50%, rgba(11,8,6,0) 55%, rgba(11,8,6,.55) 100%);
}
/* Reduced motion: frozen mid-flight, never reset. !important kept: only an !important beats the global .01ms rule above. */
@media (prefers-reduced-motion: reduce) {
  .corr__card, .corr.is-on .corr__card { animation-duration: 26s !important; animation-iteration-count: infinite !important; animation-play-state: paused !important; }
}
@keyframes corrR {
  0% { transform: translate3d(-11cqw, 0, -258.462cqw) rotateY(-6deg); opacity: 0; }
  4.348% { transform: translate3d(-3.496cqw, 0, -224.587cqw) rotateY(-6.957deg); opacity: 1; }
  8.696% { transform: translate3d(3.263cqw, 0, -194.691cqw) rotateY(-7.913deg); }
  13.043% { transform: translate3d(9.322cqw, 0, -168.305cqw) rotateY(-8.87deg); }
  17.391% { transform: translate3d(14.722cqw, 0, -145.018cqw) rotateY(-9.826deg); }
  21.739% { transform: translate3d(19.506cqw, 0, -124.465cqw) rotateY(-10.783deg); }
  26.087% { transform: translate3d(23.717cqw, 0, -106.326cqw) rotateY(-11.739deg); }
  30.435% { transform: translate3d(27.394cqw, 0, -90.317cqw) rotateY(-12.696deg); }
  34.783% { transform: translate3d(30.58cqw, 0, -76.188cqw) rotateY(-13.652deg); }
  39.13% { transform: translate3d(33.312cqw, 0, -63.718cqw) rotateY(-14.609deg); }
  43.478% { transform: translate3d(35.631cqw, 0, -52.713cqw) rotateY(-15.565deg); }
  47.826% { transform: translate3d(37.574cqw, 0, -43cqw) rotateY(-16.522deg); }
  52.174% { transform: translate3d(39.178cqw, 0, -34.427cqw) rotateY(-17.478deg); }
  56.522% { transform: translate3d(40.479cqw, 0, -26.862cqw) rotateY(-18.435deg); }
  60.87% { transform: translate3d(41.513cqw, 0, -20.184cqw) rotateY(-19.391deg); }
  65.217% { transform: translate3d(42.314cqw, 0, -14.291cqw) rotateY(-20.348deg); }
  69.565% { transform: translate3d(42.915cqw, 0, -9.09cqw) rotateY(-21.304deg); }
  73.913% { transform: translate3d(43.348cqw, 0, -4.499cqw) rotateY(-22.261deg); }
  78.261% { transform: translate3d(43.643cqw, 0, -0.448cqw) rotateY(-23.217deg); }
  82.609% { transform: translate3d(43.829cqw, 0, 3.127cqw) rotateY(-24.174deg); }
  86.957% { transform: translate3d(43.934cqw, 0, 6.283cqw) rotateY(-25.13deg); }
  91.304% { transform: translate3d(43.983cqw, 0, 9.068cqw) rotateY(-26.087deg); }
  95.652% { transform: translate3d(43.998cqw, 0, 11.526cqw) rotateY(-27.043deg); }
  100% { transform: translate3d(44cqw, 0, 13.696cqw) rotateY(-28deg); }
}
@keyframes corrL {
  0% { transform: translate3d(11cqw, 0, -258.462cqw) rotateY(6deg); opacity: 0; }
  4.348% { transform: translate3d(3.496cqw, 0, -224.587cqw) rotateY(6.957deg); opacity: 1; }
  8.696% { transform: translate3d(-3.263cqw, 0, -194.691cqw) rotateY(7.913deg); }
  13.043% { transform: translate3d(-9.322cqw, 0, -168.305cqw) rotateY(8.87deg); }
  17.391% { transform: translate3d(-14.722cqw, 0, -145.018cqw) rotateY(9.826deg); }
  21.739% { transform: translate3d(-19.506cqw, 0, -124.465cqw) rotateY(10.783deg); }
  26.087% { transform: translate3d(-23.717cqw, 0, -106.326cqw) rotateY(11.739deg); }
  30.435% { transform: translate3d(-27.394cqw, 0, -90.317cqw) rotateY(12.696deg); }
  34.783% { transform: translate3d(-30.58cqw, 0, -76.188cqw) rotateY(13.652deg); }
  39.13% { transform: translate3d(-33.312cqw, 0, -63.718cqw) rotateY(14.609deg); }
  43.478% { transform: translate3d(-35.631cqw, 0, -52.713cqw) rotateY(15.565deg); }
  47.826% { transform: translate3d(-37.574cqw, 0, -43cqw) rotateY(16.522deg); }
  52.174% { transform: translate3d(-39.178cqw, 0, -34.427cqw) rotateY(17.478deg); }
  56.522% { transform: translate3d(-40.479cqw, 0, -26.862cqw) rotateY(18.435deg); }
  60.87% { transform: translate3d(-41.513cqw, 0, -20.184cqw) rotateY(19.391deg); }
  65.217% { transform: translate3d(-42.314cqw, 0, -14.291cqw) rotateY(20.348deg); }
  69.565% { transform: translate3d(-42.915cqw, 0, -9.09cqw) rotateY(21.304deg); }
  73.913% { transform: translate3d(-43.348cqw, 0, -4.499cqw) rotateY(22.261deg); }
  78.261% { transform: translate3d(-43.643cqw, 0, -0.448cqw) rotateY(23.217deg); }
  82.609% { transform: translate3d(-43.829cqw, 0, 3.127cqw) rotateY(24.174deg); }
  86.957% { transform: translate3d(-43.934cqw, 0, 6.283cqw) rotateY(25.13deg); }
  91.304% { transform: translate3d(-43.983cqw, 0, 9.068cqw) rotateY(26.087deg); }
  95.652% { transform: translate3d(-43.998cqw, 0, 11.526cqw) rotateY(27.043deg); }
  100% { transform: translate3d(-44cqw, 0, 13.696cqw) rotateY(28deg); }
}

/* ---------- 4b. Buying journey: Orbital Timeline over a halftone pulse field.
   Five nodes turn one ring at 7.2 deg/s (JS, site/main.js, orbit()). A node's opacity and z-index come from
   its ring position, so the top of the ring reads as the front. A node click stops the ring on that step,
   spins it to the top and drops its panel below; the core releases it. Ring position -> the node spins to the
   top, opacity/z-index follow, the two neighbours pulse, the two core rings ping every 2.6 s.
   The dot field is the section's own ground texture: a halftone whose radii ride one slow diagonal wave.
   Reduced motion: the ring never turns on its own and the field is a frozen still. ---------- */
.journey { padding-block: var(--sec); overflow: clip; }
.journey .sec-head { justify-items: center; text-align: center; margin-inline: auto; }
.journey .sec-head .lead { margin-inline: auto; }
.journey__dots { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .6; pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 20%, #000 80%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 20%, #000 80%, rgba(0,0,0,0) 100%); }
.journey__inner { position: relative; z-index: 1; }
.orb { display: grid; justify-items: center; gap: var(--s5); }
.orb__stage { position: relative; width: clamp(19rem, 44vw, 29rem); aspect-ratio: 1 / 1; --orb-r: 8rem; }
/* The orbit itself, and the core's radar rings: painted as fills, never a stroke (Law 1: no border draws this). */
.orb__guide { position: absolute; left: 50%; top: 50%; width: calc(var(--orb-r) * 2); height: calc(var(--orb-r) * 2);
  margin: calc(var(--orb-r) * -1) 0 0 calc(var(--orb-r) * -1); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(210,171,85,0) 99.2%, rgba(210,171,85,.22) 100%); }
/* borderless-keep: the ping rings draw the radar picture the reference asks for (Core with two expanding ping rings) */
.orb__ping { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1 / 1; margin: -11% 0 0 -11%; border-radius: 50%;
  pointer-events: none; background: radial-gradient(closest-side, rgba(210,171,85,0) 74%, rgba(210,171,85,.32) 88%, rgba(210,171,85,0) 100%);
  animation: orbPing 2.6s var(--ease) infinite; }
.orb__ping + .orb__ping { animation-delay: 1.3s; }
@keyframes orbPing { from { transform: scale(.72); opacity: .9; } to { transform: scale(2.35); opacity: 0; } }
.orb__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22%; aspect-ratio: 1 / 1;
  border-radius: 50%; display: grid; place-items: center; padding: 0; text-align: center;
  font-size: .76rem; font-weight: 600; letter-spacing: .01em; line-height: 1.15; color: #180F08;
  background: linear-gradient(180deg, #E4C478 0%, #CDAC56 46%, #A88230 100%);
  box-shadow: var(--lift-hi); transition: filter .25s var(--ease); }
.orb__core:hover { filter: brightness(1.08); }
.orb__core:focus-visible { background-color: #E4C478; border-radius: 50%; filter: brightness(1.12); }
.orb__core[disabled] { filter: saturate(.5) brightness(.82); cursor: default; }
.orb__core.is-hold { background: linear-gradient(180deg, #F0E0BC 0%, #DCCB9C 46%, #B9A97D 100%); }
.orb__ring { position: absolute; inset: 0; pointer-events: none; }
.orb__node { position: absolute; left: 50%; top: 50%; padding: .4rem .88rem; border-radius: 999px;
  pointer-events: auto;
  font-size: .82rem; font-weight: 600; white-space: nowrap; color: var(--ink-2); background-color: var(--panel);
  box-shadow: var(--lift); will-change: transform, opacity;
  transition: background-color .3s var(--ease), color .3s var(--ease); }
.orb__node:hover { background-color: var(--sand-3); color: var(--ink); }
.orb__node.is-on { background-color: var(--bronze-ink); color: #180F08; }
.orb__node.is-pulse { animation: orbPulse 1.25s var(--ease) 2; }
@keyframes orbPulse { 50% { background-color: var(--sand-3); color: var(--ink); } }
.orb__node:focus-visible { background-color: var(--sand-3); color: var(--ink); border-radius: 999px; }
.orb__panel { max-width: 42rem; min-height: 8.5rem; padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--panel); box-shadow: var(--lift); display: grid; align-content: start; gap: .4rem; text-align: center;
  opacity: 0; transform: translateY(-14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.orb__panel.is-in { opacity: 1; transform: none; }
.orb__panel h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.01em; }
.orb__panel p { color: var(--ink-2); font-size: .98rem; text-wrap: pretty; }
@media (max-width: 560px) {
  .orb__stage { width: min(21rem, 82vw); }
  .orb__node { font-size: .74rem; padding: .35rem .7rem; }
  .orb__core { font-size: .66rem; }
  .orb__panel { min-height: 0; padding: var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  .orb__ping { animation: none; opacity: .34; transform: scale(1.35); }
  .orb__panel { transition: none; }
  .journey__dots { opacity: .34; }
}