:root{
  --ink:#08080a; --ink-800:#0d0d10;
  --chalk:#f6f3ec; --chalk-dim:#c4bdac; --chalk-faint:#9a9281;
  --electric:#ead9b8; --electric-soft:#f4ecdb; --electric-deep:#c2a875;
  --hairline:rgba(246,243,236,.08); --hairline-strong:rgba(246,243,236,.18);
  --gutter:clamp(1.5rem,5vw,5.5rem); --max-edge:1600px;
  /* the fixed chrome's one row: wordmark, toggle and Close share a top, a
     44px height (a finger's width) and a gap, so they sit level */
  --chrome-edge:clamp(1rem,2.4vw,2rem); --chrome-size:2.75rem; --chrome-gap:.5rem;
  /* the room the sales dock takes in its corner, for what sits above it */
  --dock-clear:calc(var(--chrome-size) + .9rem);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  /* one face for all three roles; the roles stay so each can change alone */
  --font-display:Graphik,ui-sans-serif,system-ui,sans-serif;
  --font-body:Graphik,ui-sans-serif,system-ui,sans-serif;
  --font-mono:Graphik,ui-sans-serif,system-ui,sans-serif;
}
html[lang="fa"]{ --font-display:Ravi,Graphik,sans-serif; --font-body:Ravi,Graphik,sans-serif;
                 --font-mono:Ravi,Graphik,sans-serif; }

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--ink)}
/* no browser-blue flash on a tap: each control answers with its own :active */
*{-webkit-tap-highlight-color:transparent}
a,button{-webkit-touch-callout:none}
/* .gal-more is moved by gsap (transform): it gets colour feedback only */
.gal-nav-btn{transition:transform .15s,background-color .15s}
.gal-more{transition:background-color .15s}
.gal-nav-btn:active{transform:scale(.94)}
.gal-nav-btn:active,.gal-more:active{background-color:rgba(246,243,236,.22)}
.gal-tab:active{opacity:.6}
body{
  background:var(--ink); color:var(--chalk);
  font-family:var(--font-body); font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* focus rings are for the keyboard (main.js: html.kbd). Focus that script
   hands back after a tap, a click or the browser's Back — closing a space
   page — would otherwise be ringed too */
html:not(.kbd) :focus-visible{outline:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
html.is-loading{overflow:hidden}

/* ─────────── loader ─────────── */
#loader{position:fixed;inset:0;z-index:120;background:#f0f0f0;overflow:hidden}
.overture-stage{position:absolute;inset:0}
#overture-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#overture-mark{position:absolute;color:#141414;filter:drop-shadow(0 18px 34px rgba(0,0,0,.22))}
#overture-word{position:absolute;color:#141414}
/* the UA [hidden] rule is HTML-namespaced and does not reach inline SVG */
#overture-mark[hidden],#overture-word[hidden]{display:none}
.loader-inner{position:absolute;left:50%;bottom:clamp(2rem,6vh,4.5rem);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1rem;width:min(420px,70vw)}
.loader-track{position:relative;width:100%;height:1px;background:rgba(20,20,20,.14);overflow:hidden}
.loader-fill{position:absolute;inset:0 100% 0 0;background:#141414;
  transition:right .25s var(--ease-expo)}
.loader-row{display:flex;justify-content:space-between;width:100%;font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;font-weight:400;font-size:.7rem;letter-spacing:.25em;color:rgba(20,20,20,.62);text-transform:uppercase}
.loader-pct{color:rgba(20,20,20,.8)}

/* ─────────── the wall's note ─────────── */
/* No box: the mark alone at the foot of the screen, where the hint to
   scroll stands, the figure under it, and (before a room) the way round
   the wall. What is loading is said to screen readers only. */
#stage-wait{position:fixed;left:50%;bottom:clamp(1.4rem,4vh,2.6rem);transform:translate(-50%,8px);
  z-index:60;display:flex;flex-direction:column;align-items:center;gap:.6rem;width:max-content;max-width:calc(100vw - 2rem);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:400;font-size:.625rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--chalk-dim);text-shadow:0 1px 12px rgba(8,8,10,.8);pointer-events:none;opacity:0;
  transition:opacity .45s var(--ease-expo),transform .45s var(--ease-expo)}
#stage-wait.is-on{opacity:1;transform:translate(-50%,0)}
/* what sets it off from a bright room: a pool of shade with no edge, the
   hero title's own (.brand-glow), not a box */
#stage-wait{isolation:isolate}
#stage-wait::before{content:"";position:absolute;z-index:-1;inset:-2.6rem -4.5rem -1.8rem;pointer-events:none;
  background:radial-gradient(closest-side,rgba(6,8,13,.62),rgba(6,8,13,.34) 52%,rgba(6,8,13,0))}
.sw-body{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.stage-wait-row{display:flex;justify-content:center}
.stage-wait-row .sw-first,.stage-wait-row .sw-next{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
#stage-wait-pct{color:var(--chalk);text-indent:.24em}
#stage-wait.is-first .sw-next,#stage-wait:not(.is-first) .sw-first{display:none}

/* the mark: a hairline outline, a light running round it, and the fill that
   rises from its foot with the download (main.js moves .sw-rise). The mark's
   path fills with currentColor and takes its stroke from the <use>. */
.sw-mark{flex:none;width:2rem;height:auto;overflow:visible;filter:drop-shadow(0 1px 10px rgba(8,8,10,.55))}
.sw-line{color:transparent;stroke:rgba(246,243,236,.32);stroke-width:18}
.sw-run{color:transparent;stroke:var(--electric-soft);stroke-width:26;stroke-linecap:round;
  stroke-dasharray:420 3900;animation:sw-run 2.6s linear infinite}
.sw-fill{color:var(--electric)}
@keyframes sw-run{to{stroke-dashoffset:-4320}}

/* the way round the wall: the index. Not at the top, where the hero's own
   Explore the residence already says it */
/* its line is 11px; the press takes the full height of the note's foot */
.sw-hurry{display:inline-flex;align-items:center;gap:.6rem;width:fit-content;margin:-.6rem 0;padding:.6rem 0;border:0;background:none;
  font:inherit;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--electric);cursor:pointer;
  text-shadow:inherit;
  transition:color .35s var(--ease-expo)}
.sw-hurry .ix-arrow{width:.9rem}
/* the arrow leans out and back, so the line reads as something to press;
   translate, not transform, which the arrow's RTL flip already holds */
.sw-hurry{--nudge:.32rem}
html[dir="rtl"] .sw-hurry{--nudge:-.32rem}
#stage-wait.is-on .sw-hurry .ix-arrow{animation:sw-nudge 1.9s var(--ease-expo) infinite}
@keyframes sw-nudge{0%,60%,100%{translate:0 0}28%{translate:var(--nudge) 0}}
@media (hover:hover){.sw-hurry:hover .ix-arrow{animation:none;translate:var(--nudge) 0;transition:translate .35s var(--ease-expo)}}
#stage-wait.is-on .sw-hurry{pointer-events:auto}
#stage-wait.is-first .sw-hurry{display:none}
@media (hover:hover){.sw-hurry:hover{color:var(--chalk)}}
html.kbd .sw-hurry:focus-visible{outline:1px solid var(--electric);outline-offset:.3rem}
@media (prefers-reduced-motion:reduce){
  .sw-run{animation:none;stroke-dasharray:none;stroke:none}
  #stage-wait.is-on .sw-hurry .ix-arrow{animation:none}
}
/* on a phone the sales dock is a round button in the same bottom band, and
   narrowing the note to clear it breaks its label in two: it sits above it */
@media (max-width:820px){
  #stage-wait{bottom:calc(var(--chrome-edge) + var(--chrome-size) + 1rem)}
}
/* held at the top, the note stands where the hint to scroll does; the hint's
   own opacity is GSAP's (chromeIn), so this fades what is inside it */
#scroll-hint>*{transition:opacity .6s var(--ease-expo)}
html.is-assembling #scroll-hint>*{opacity:0}
/* Graphik has no Arabic, and tracking breaks letter joining */
html[lang="fa"] #stage-wait{font-family:var(--font-body);letter-spacing:0;font-size:.72rem}
html[lang="fa"] .sw-hurry{letter-spacing:0;font-size:.72rem}

/* ─────────── cursor ─────────── */
#cursor-ring,#cursor-dot{position:fixed;top:0;left:0;z-index:110;pointer-events:none;border-radius:50%;
  transform:translate3d(-100px,-100px,0);opacity:0;mix-blend-mode:difference}
#cursor-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(246,243,236,.55)}
#cursor-dot{width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--chalk)}
/* over anything that opens something the ring shows a plus (main.js: initCursor) */
#cursor-ring::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;opacity:0;
  background:linear-gradient(var(--chalk),var(--chalk)) center/100% 1px no-repeat,
             linear-gradient(var(--chalk),var(--chalk)) center/1px 100% no-repeat;transition:opacity .3s}
#cursor-ring.is-plus::after{opacity:1}
@media (hover:none),(pointer:coarse){#cursor-ring,#cursor-dot{display:none}}

/* ─────────── wordmark · counter ─────────── */
/* Plain chalk on a shade of its own (#top-edge). It was mix-blend-mode:
   difference, which inverts to mid-grey over mid-grey frames and lost
   PROJECTS entirely on the white match cuts. */
#brand-bar{position:fixed;top:var(--chrome-edge);inset-inline-start:var(--chrome-edge);z-index:100;
  height:var(--chrome-size);display:flex;align-items:center;gap:1.1rem;color:var(--chalk)}
#wordmark{height:100%;display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit}
/* the developer's mark after a hairline, as SAM | RATA stood in the hero: on
   SAM's cap height (Graphik's .715em of 1.05rem), so the two read as one line */
.bar-divider{flex:none;width:1px;height:1.05rem;background:currentColor;opacity:.45}
#bar-partner{position:relative;display:block;flex:none;line-height:0;transition:opacity .35s var(--ease-expo)}
#bar-partner img{display:block;height:.75rem;width:auto}
@media (hover:hover){#bar-partner:hover{opacity:.7}}
#wordmark span{font-family:var(--font-display);font-weight:500;font-size:1.05rem;letter-spacing:.42em;text-indent:.42em}
#wordmark i{width:28px;height:1px;background:currentColor;opacity:.55}
#wordmark em{font-style:normal;font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.24em;opacity:.8}
#wordmark-mark{width:auto;height:1.5rem;flex:none;color:currentColor;display:block}
html[lang="fa"] #wordmark span{letter-spacing:.12em;text-indent:.12em}
html[lang="fa"] #wordmark em{letter-spacing:.1em}
/* the shade the fixed chrome stands on: the wordmark and the language toggle
   read over any frame, and copy scrolling under them fades before it meets
   them. Under #space (90), which lays its own (spaces.css: #space::before). */
#top-edge{position:fixed;left:0;right:0;top:0;z-index:89;height:clamp(5.5rem,9vw,8rem);pointer-events:none;
  background:linear-gradient(rgba(8,8,10,.6),rgba(8,8,10,.3) 50%,rgba(8,8,10,0))}
/* over the closing's copy (closing.js sets the class) the shade goes solid:
   the copy fades out under the chrome instead of running through it, and on
   the section's own ink the edge has no edge of its own to see */
#top-edge::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease-expo);
  background:linear-gradient(var(--ink),rgba(8,8,10,.92) 45%,rgba(8,8,10,0))}
html.chrome-over-copy #top-edge::after{opacity:1}
/* ─────────── lang toggle ─────────── */
/* a fixed square, not padding round its label: "فا" and "EN" set different
   line boxes, and the button changed size with the language and never
   matched Close beside it */
#lang-toggle{position:fixed;top:var(--chrome-edge);inset-inline-end:var(--chrome-edge);z-index:100;
  display:grid;place-items:center;width:var(--chrome-size);height:var(--chrome-size);padding:0;
  font-family:var(--font-mono);font-size:.6875rem;line-height:1;letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;
  color:var(--chalk-dim);background:rgba(20,18,15,.4);border:1px solid var(--hairline-strong);
  backdrop-filter:blur(10px);cursor:pointer;
  /* colours only: main.js fades the toggle in, and a transition on every
     property would chase each frame of that tween */
  transition:color .35s var(--ease-expo),background-color .35s var(--ease-expo),border-color .35s var(--ease-expo)}
/* the label is Persian while the page is English: tracking would pull its letters apart */
html:not([lang="fa"]) #lang-toggle{letter-spacing:0;text-indent:0;font-size:.8rem}
/* a tap leaves :hover on, and the toggle stayed lit after every switch */
@media (hover:hover){#lang-toggle:hover{color:var(--ink);background:var(--electric);border-color:var(--electric)}}
html.kbd #lang-toggle:focus-visible{color:var(--ink);background:var(--electric);border-color:var(--electric);outline:none}

/* ─────────── sales dock ─────────── */
/* RATA's sales line, in view wherever the visitor is: the chrome's own glass
   and height, in the corner the chrome's row leaves free. Above a space page
   (#space, 90), under its lightbox (105), the cursor and the loader. The card
   opens above the bar, out of its corner. sales-dock.js: is-open, is-aside. */
#sales-dock{position:fixed;z-index:95;inset-inline-end:var(--chrome-edge);
  bottom:calc(var(--chrome-edge) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;pointer-events:none;
  transition:opacity .5s var(--ease-expo),transform .6s var(--ease-expo),visibility 0s}
#sales-dock>*{pointer-events:auto}
/* under the loader it waits; where the number is already on screen it steps aside */
html.is-loading #sales-dock,#sales-dock.is-aside{opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s var(--ease-expo),transform .5s var(--ease-expo),visibility 0s linear .5s}

.dock-pill{display:flex;align-items:stretch;height:var(--chrome-size);color:var(--chalk);text-decoration:none;
  background:rgba(20,18,15,.55);border:1px solid var(--hairline-strong);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;
  transition:color .35s var(--ease-expo),background-color .35s var(--ease-expo),border-color .35s var(--ease-expo)}
.dock-icon{display:grid;place-items:center;flex:none;width:calc(var(--chrome-size) - 2px);color:var(--electric);
  border-inline-end:1px solid var(--hairline-strong);transition:border-color .35s var(--ease-expo),color .35s var(--ease-expo)}
.dock-icon svg{display:block;width:1.05rem;height:1.05rem;transform-origin:50% 60%;animation:dock-ring 8s var(--ease-expo) 4s infinite}
.dock-text{display:flex;align-items:center;gap:.85rem;padding:0 1.05rem 0 .95rem}
.dock-label{font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--chalk-faint);transition:color .35s var(--ease-expo)}
.dock-num{font-family:var(--font-display);font-weight:400;font-size:.95rem;letter-spacing:.03em;white-space:nowrap;
  font-variant-numeric:tabular-nums}
html[lang="fa"] .dock-label{font-size:.8rem;letter-spacing:0}
html[lang="fa"] .dock-num{letter-spacing:0}
/* lit the toggle's way; and while the card is open, as the pressed half of it */
@media (hover:hover){.dock-pill:hover{color:var(--ink);background:var(--electric);border-color:var(--electric)}}
#sales-dock.is-open .dock-pill,html.kbd .dock-pill:focus-visible{color:var(--ink);background:var(--electric);border-color:var(--electric);outline:none}
@media (hover:hover){.dock-pill:hover .dock-icon,.dock-pill:hover .dock-label{color:var(--ink);border-color:rgba(8,8,10,.18)}}
#sales-dock.is-open .dock-icon,#sales-dock.is-open .dock-label,
html.kbd .dock-pill:focus-visible .dock-icon,html.kbd .dock-pill:focus-visible .dock-label{color:var(--ink);border-color:rgba(8,8,10,.18)}
/* the handset rings, briefly, every few seconds: a nudge, not an alarm */
@keyframes dock-ring{
  0%,9%,100%{transform:rotate(0)} 1.5%{transform:rotate(-14deg)} 3%{transform:rotate(12deg)}
  4.5%{transform:rotate(-10deg)} 6%{transform:rotate(8deg)} 7.5%{transform:rotate(-4deg)}}
#sales-dock.is-open .dock-icon svg{animation:none}

.dock-card{box-sizing:border-box;width:min(23rem,calc(100vw - 2 * var(--chrome-edge)));padding:1.35rem 1.5rem 1.5rem;
  background:rgba(12,12,14,.94);border:1px solid var(--hairline-strong);box-shadow:0 34px 90px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  visibility:hidden;opacity:0;transform:translateY(12px);clip-path:inset(100% 0 0 0);
  transition:opacity .35s var(--ease-expo),transform .6s var(--ease-expo),clip-path .6s var(--ease-expo),visibility 0s linear .6s}
#sales-dock.is-open .dock-card{visibility:visible;opacity:1;transform:none;clip-path:inset(0 0 0 0);transition-delay:0s}
.dock-card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.dock-kicker{margin:0;font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--electric)}
html[lang="fa"] .dock-kicker{font-size:.8rem;letter-spacing:.06em}
.dock-close{display:grid;place-items:center;flex:none;width:2.1rem;height:2.1rem;padding:0;margin-inline-end:-.55rem;
  color:var(--chalk-dim);background:none;border:1px solid transparent;cursor:pointer;
  transition:color .35s var(--ease-expo),border-color .35s var(--ease-expo)}
.dock-close:hover,html.kbd .dock-close:focus-visible{color:var(--chalk);border-color:var(--hairline-strong);outline:none}
.dock-role{margin:0 0 .5rem;font-size:.9rem;line-height:1.5;color:var(--chalk-dim)}
.dock-big{display:inline-block;font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,3.4vw,3rem);line-height:1.1;
  letter-spacing:-.025em;color:var(--chalk);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:color .35s var(--ease-expo)}
html[lang="fa"] .dock-big{letter-spacing:0}
.dock-big:hover{color:var(--electric)}
html.kbd .dock-big:focus-visible{outline:1px solid var(--electric);outline-offset:.3rem}
.dock-actions{display:flex;gap:.5rem;margin-top:1.3rem}
.dock-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:2.9rem;padding:0 .9rem;
  font:inherit;font-family:var(--font-mono);font-weight:400;font-size:.6875rem;line-height:1;letter-spacing:.22em;
  text-transform:uppercase;white-space:nowrap;color:var(--chalk);text-decoration:none;background:none;
  border:1px solid var(--hairline-strong);cursor:pointer;
  transition:color .35s var(--ease-expo),background-color .35s var(--ease-expo),border-color .35s var(--ease-expo)}
html[lang="fa"] .dock-btn{font-family:var(--font-body);font-size:.85rem;letter-spacing:0}
.dock-btn:hover{border-color:var(--chalk)}
.dock-btn-solid{background:var(--chalk);border-color:var(--chalk);color:var(--ink)}
.dock-btn-solid:hover{background:var(--electric);border-color:var(--electric)}
html.kbd .dock-btn:focus-visible{outline:1px solid var(--electric);outline-offset:.2rem}
.dock-btn-icon{flex:none;width:.95rem;height:.95rem}
.dock-copy.is-done{border-color:var(--electric);color:var(--electric)}
.dock-facts{display:grid;gap:.9rem;margin:1.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--hairline)}
.dock-facts dt{margin-bottom:.3rem;font-family:var(--font-mono);font-weight:400;font-size:.625rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--chalk-faint)}
html[lang="fa"] .dock-facts dt{font-size:.75rem;letter-spacing:0}
.dock-facts dd{margin:0;font-size:.88rem;line-height:1.55;color:var(--chalk-dim)}
html[lang="fa"] .dock-facts dd{line-height:1.9}
.dock-facts a{color:inherit;text-decoration:none;transition:color .35s var(--ease-expo)}
html[dir="rtl"] .dock-facts a{display:inline-block}
.dock-facts a:hover,html.kbd .dock-facts a:focus-visible{color:var(--electric);outline:none}
@media (prefers-reduced-motion:reduce){
  #sales-dock,.dock-card{transition:visibility 0s,opacity .2s linear!important;transform:none!important;clip-path:none!important}
  .dock-icon svg{animation:none}
}

/* ─────────── progress rail ─────────── */
#hero-rail{position:fixed;inset-inline-start:clamp(1rem,2.6vw,2.4rem);top:50%;transform:translateY(-50%);
  z-index:60;display:flex;align-items:center;gap:1rem;opacity:0}
.rail-track{position:relative;width:1px;height:min(42vh,340px);
  background:repeating-linear-gradient(to bottom,var(--hairline-strong) 0 1px,transparent 1px 12.5%),var(--hairline)}
.rail-track::before{content:"";position:absolute;inset:0;background:var(--hairline-strong);opacity:.6}
.rail-fill{position:absolute;top:0;left:0;width:100%;height:0;background:var(--electric);
  box-shadow:0 0 12px rgba(234,217,184,.55)}
.rail-node{position:absolute;top:0;left:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--electric);box-shadow:0 0 14px rgba(234,217,184,.9)}
.rail-label{font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--chalk-faint);writing-mode:vertical-rl;text-orientation:mixed}
html[dir="rtl"] .rail-label{writing-mode:vertical-lr}

/* ─────────── hero ─────────── */
/* Full-bleed surfaces are 100lvh, the viewport with the phone's URL bar
   hidden. At 100svh they were sized for the bar shown, so the moment Chrome
   slid it away a band of empty page opened under them. Text anchored to the
   bottom stays inside 100svh instead, so it is never under the bar. */
#hero{position:relative;height:100vh;height:100lvh;overflow:hidden;background:var(--ink)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-veil{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top right,rgba(8,8,10,.62),rgba(8,8,10,.12) 44%,transparent 66%),
    radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(8,8,10,.5) 100%),
    linear-gradient(to bottom,rgba(8,8,10,.5),transparent 22%,transparent 58%,rgba(8,8,10,.8))}
html[dir="rtl"] .hero-veil{background:
    linear-gradient(to top left,rgba(8,8,10,.62),rgba(8,8,10,.12) 44%,transparent 66%),
    radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(8,8,10,.5) 100%),
    linear-gradient(to bottom,rgba(8,8,10,.5),transparent 22%,transparent 58%,rgba(8,8,10,.8))}

.hero-overlay{position:absolute;top:-2%;left:-2%;right:-2%;height:calc(100svh + 4%);display:grid;place-items:center;
  padding-inline:calc(var(--gutter) + 2%);pointer-events:none;will-change:transform}
.zone{grid-area:1/1;width:100%;max-width:var(--max-edge);text-align:center}

#zone-name .eyebrow{font-family:var(--font-mono);font-weight:400;font-size:clamp(.6875rem,.9vw,.78rem);
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--electric-soft);
  text-shadow:0 0 2px rgba(6,8,13,.55),0 1px 26px rgba(6,8,13,.9),0 0 34px rgba(234,217,184,.5);margin-bottom:1.6rem}
html[lang="fa"] #zone-name .eyebrow{letter-spacing:.22em;text-indent:.22em}
/* SAM alone, centred: a logo, not copy — same face and same word in either
   language. Its partner's mark sits up in the chrome (#brand-bar). */
.brand-lockup{position:relative;isolation:isolate;display:flex;align-items:flex-start;justify-content:center;
  direction:ltr;font-size:clamp(2.8rem,11vw,9rem)}
#brand-reveal{font-family:Graphik,ui-sans-serif,system-ui,sans-serif;font-weight:500;margin:0;
  font-size:1em;line-height:.92;letter-spacing:.06em;margin-inline-end:-.06em;
  text-shadow:0 0 2px rgba(6,8,13,.4),0 2px 18px rgba(6,8,13,.5),0 4px 60px rgba(6,8,13,.75)}
/* a soft pool of shade under the title so it reads on bright frames: a radial
   falloff with no edge, dark at the heart and gone well before the frame's edge */
.brand-glow{position:absolute;inset:-.55em -.9em;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(6,8,13,.55),rgba(6,8,13,.32) 50%,rgba(6,8,13,0))}
/* the overlay passes the pointer through; the link alone takes it back */
#brand-home{position:relative;display:inline-block;color:inherit;text-decoration:none;pointer-events:auto;
  transition:transform .35s var(--ease-expo)}
/* hover: a rule draws in under the baseline; press: it gives a little */
#brand-home::after{content:"";position:absolute;left:0;right:.06em;top:.9em;  /* stop under the M, not its tracking */
  height:max(1px,.014em);background:var(--chalk);box-shadow:0 1px 10px rgba(6,8,13,.5);
  transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease-expo)}
#brand-home:hover::after,#brand-home:focus-visible::after{transform:scaleX(1)}
#brand-home:active{transform:scale(.97)}
#brand-home:focus-visible{outline:1px solid var(--electric);outline-offset:.18em}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Regular in full chalk on a pool of shade, as the lockup has (.brand-glow):
   Light in chalk-dim measured 2.2:1 where the line crosses the white facade */
/* The line is set in capitals, so it is tracked open and held to Graphik in
   Persian too (it stays English there). One line on a desktop; where it has
   to wrap, balance breaks it at the comma. */
.brand-sub{position:relative;isolation:isolate;margin:1.6rem auto 0;font-weight:400;
  font-family:Graphik,ui-sans-serif,system-ui,sans-serif;letter-spacing:.12em;line-height:1.45;text-wrap:balance;
  font-size:clamp(.95rem,1.4vw,1.2rem);color:var(--chalk);
  text-shadow:0 0 2px rgba(6,8,13,.5),0 2px 24px rgba(6,8,13,.8)}
/* A soft shade under the words, not the lockup's radial pool: the line runs
   the full width on a phone, and a pool would thin out at its two ends —
   where the facade is. It hugs the words (fit-content) and peaks along their
   middle with no flat band: sized to the box and flat at .55, the eyebrow's
   ran the whole width of a desktop frame as a black stripe. The eyebrow sits
   just above the pool's reach and gets one too. */
#zone-name .eyebrow{position:relative;isolation:isolate;width:fit-content;margin-inline:auto}
.brand-sub{width:fit-content}
#zone-name .eyebrow::before,
.brand-sub::before{content:"";position:absolute;inset:-1.4em -2.6em;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(6,8,13,0),rgba(6,8,13,.46) 50%,rgba(6,8,13,0));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.6em,#000 calc(100% - 2.6em),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 2.6em,#000 calc(100% - 2.6em),transparent)}

.chapter{position:relative;max-width:min(44ch,var(--max-edge));text-align:start;justify-self:start;
  align-self:end;padding-bottom:clamp(4rem,12vh,9rem);will-change:transform,opacity}
.ch-label{font-weight:400;text-shadow:0 0 2px rgba(6,8,13,.45),0 1px 16px rgba(6,8,13,.8)}
.chapter h2{font-family:var(--font-display);font-weight:400;margin:0;
  font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.1;letter-spacing:-.012em;text-wrap:balance;
  text-shadow:0 3px 40px rgba(6,8,13,.85)}
html[lang="fa"] .chapter h2{font-weight:500;line-height:1.5}
.ch-rule{display:block;height:1px;width:min(220px,32vw);margin-top:1.6rem;
  background:linear-gradient(90deg,var(--electric),transparent);transform-origin:left center;opacity:.85}
html[dir="rtl"] .ch-rule{background:linear-gradient(270deg,var(--electric),transparent);transform-origin:right center}

/* A room's headline opens its page (spaces.js): a real button inside the h2,
   inert until spaces.js is up (html.has-spaces) and even then only while its
   chapter is on screen (main.js: .is-live). The overlay passes the pointer
   through; a live headline takes it back, as the logos do. */
.ch-open{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;
  letter-spacing:inherit;text-align:inherit;text-shadow:inherit;cursor:default;pointer-events:none}
/* no box: drawn round the button it ran through the label above it. Keyboard
   focus shows as the headline's underline and the arrow's nudge, below */
.ch-open:focus-visible{outline:none}
.ch-head{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;
  transition:background-size .6s var(--ease-expo)}
html[dir="rtl"] .ch-head{background-position:100% 100%}
.ch-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.1rem;margin-top:1.6rem}
.ch-foot .ch-rule{margin-top:0}
.ch-more{display:inline-flex;align-items:center;gap:.8em;font-family:var(--font-mono);font-weight:400;font-size:.6875rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--electric-soft);text-shadow:0 1px 18px rgba(6,8,13,.9);
  visibility:hidden;pointer-events:none}
.ch-more i{position:relative;width:1.4rem;height:1px;background:currentColor;transition:transform .5s var(--ease-expo)}
.ch-more i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
html[dir="rtl"] .ch-more i{scale:-1 1}
html[lang="fa"] .ch-more{font-family:var(--font-body);letter-spacing:0;font-size:.8rem}
html.has-spaces .ch-more{visibility:visible}
html.has-spaces .chapter.is-live .ch-open,
html.has-spaces .chapter.is-live .ch-more{pointer-events:auto;cursor:pointer}
/* the underline draws in and the arrow steps on: under a pointer that can
   hover (a tap leaves :hover stuck, and it stayed on after the page closed),
   and under keyboard focus (main.js: html.kbd) */
@media (hover:hover){
  html.has-spaces .chapter.is-live:has(.ch-open:hover,.ch-more:hover) .ch-head{background-size:100% 1px}
  html.has-spaces .chapter.is-live:has(.ch-open:hover,.ch-more:hover) .ch-more i{transform:translateX(.35rem)}
}
html.kbd.has-spaces .chapter.is-live:has(.ch-open:focus-visible) .ch-head{background-size:100% 1px}
html.kbd.has-spaces .chapter.is-live:has(.ch-open:focus-visible) .ch-more i{transform:translateX(.35rem)}

#scroll-hint{position:absolute;left:50%;bottom:calc(100lvh - 100svh + clamp(1.4rem,4vh,2.6rem));transform:translateX(-50%);
  z-index:5;display:flex;flex-direction:column;align-items:center;gap:.75rem;
  font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--chalk-faint);pointer-events:none}
html[lang="fa"] #scroll-hint{letter-spacing:.16em}
#scroll-hint i{position:relative;overflow:hidden;width:1px;height:44px;background:linear-gradient(to bottom,var(--electric),transparent)}
/* a light runs down the line and out, the space pages' cue (spaces.css:
   .sp-cue) — so the one instruction on the landing is not a still */
#scroll-hint i::after{content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;
  background:linear-gradient(transparent,var(--chalk),transparent);animation:hint-cue 2.2s var(--ease-expo) infinite}
@keyframes hint-cue{to{top:100%}}

/* ─────────── after: the closing ───────────
   Who runs it, who drew it, how to reach them — in the gallery's hand
   (ERA's): small bracketed labels, big type, lines rising out of masks.
   #after rises over the gallery's last 100lvh, so its first block is a full
   screen and covers the gallery exactly as its sticky releases — see
   #gallery. A 12-column grid on the page's own gutter; sizes in vw, as the
   gallery's are, so the composition scales with the width. */
#after{position:relative;z-index:2;margin-top:-100lvh;background:var(--ink);color:var(--chalk)}
.kicker{font-family:var(--font-mono);font-weight:400;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--chalk-faint);margin-bottom:1.6rem}
html[lang="fa"] .kicker{letter-spacing:.16em}

.cl-block{max-width:var(--max-edge);margin:0 auto;padding:clamp(6rem,16vh,11rem) var(--gutter);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem)}
.cl-block>*{grid-column:1/-1;min-width:0}
.cl-kicker{margin-bottom:clamp(1.8rem,3.2vw,3rem)}
/* one per split line, as .gal-mask */
.cl-mask{overflow:clip}
.cl-copy{margin:0;color:var(--chalk-dim);font-size:clamp(.95rem,1.05vw,1.1rem);line-height:1.75}
html[lang="fa"] .cl-copy{font-size:clamp(1rem,1.12vw,1.15rem);line-height:2.05}

/* 01 · sales & operations */
.cl-sales{position:relative;isolation:isolate;overflow:clip;min-height:100vh;min-height:100lvh;align-content:center}
/* RATA's wordmark as a line along the block's foot, under the board, cropped
   at the edge, in the same low light as 04's mark */
.cl-sales .cl-ghost{bottom:clamp(-2rem,-2vw,0rem);inset-inline-end:-18vw;width:min(104vw,96rem);height:auto;--ghost-stroke:.42}
.cl-sales::before{content:"";position:absolute;z-index:-2;pointer-events:none;
  bottom:-30%;inset-inline-end:-10%;width:min(70vw,64rem);aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(234,217,184,.07),rgba(234,217,184,.022) 55%,transparent);
  opacity:var(--glow,1)}
.cl-statement{grid-column:1/11;margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.2rem,5.6vw,6rem);line-height:1.02;letter-spacing:-.015em;text-transform:uppercase}
html[lang="fa"] .cl-statement{font-size:clamp(1.9rem,4.4vw,4.6rem);line-height:1.5;letter-spacing:0;text-transform:none}
.cl-rule{display:block;height:1px;margin:clamp(2.6rem,5.4vw,5rem) 0;background:var(--hairline-strong);
  transform-origin:left center}
html[dir="rtl"] .cl-rule{transform-origin:right center}
/* With no headline, RATA's wordmark is the statement: set at a headline's
   mass, its sales line across from it on the wordmark's foot, the rule under both.
   Then a lead and a quieter second paragraph stepped down to its foot, and
   the office's facts across the whole width. */
.cl-rata{grid-column:1/8;grid-row:2;justify-self:start;display:block;width:clamp(14rem,38vw,38rem);line-height:0;
  transition:opacity .45s var(--ease-expo)}
.cl-rata img{display:block;width:100%;height:auto}
.cl-rata:hover{opacity:.78}
.cl-rata:focus-visible{outline:1px solid var(--electric);outline-offset:.6rem}
.cl-sales-line{grid-column:8/13;grid-row:2;justify-self:end;align-self:end;display:flex;flex-direction:column;
  align-items:flex-end;gap:.9rem}
.cl-sales-line-label{font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--electric)}
html[lang="fa"] .cl-sales-line-label{font-size:.8rem;letter-spacing:.06em}
/* on the wordmark's foot, a size under its cap height, so the two read as one row */
.cl-sales-num{display:block;margin-bottom:-.08em;font-family:var(--font-display);font-weight:500;font-size:clamp(2.1rem,4.4vw,4.6rem);
  line-height:.9;letter-spacing:-.03em;white-space:nowrap;color:var(--chalk);text-decoration:none;
  font-variant-numeric:tabular-nums;transition:color .45s var(--ease-expo)}
html[lang="fa"] .cl-sales-num{letter-spacing:0}
.cl-sales-num:hover{color:var(--electric)}
html.kbd .cl-sales-num:focus-visible{outline:1px solid var(--electric);outline-offset:.4rem}
.cl-sales .cl-rule{grid-row:3}
.cl-sales-body,.cl-dev-body{grid-row:4;display:grid;grid-template-columns:subgrid;row-gap:2rem;align-items:start}
.cl-sales-lead,.cl-dev-lead{grid-column:1/8;color:var(--chalk);font-weight:300;font-size:clamp(1.15rem,1.7vw,1.75rem);line-height:1.5}
html[lang="fa"] .cl-sales-lead,html[lang="fa"] .cl-dev-lead{font-size:clamp(1.1rem,1.55vw,1.6rem);line-height:1.95}
.cl-sales-body .cl-copy:not(.cl-sales-lead){grid-column:9/13;align-self:end}
/* 04: SAM Projects in two paragraphs, under their lockup, as RATA's at 01 */
.cl-dev-body{grid-row:3;margin-top:clamp(2.6rem,5vw,4.5rem)}
.cl-dev-body .cl-copy:not(.cl-dev-lead){grid-column:9/13;align-self:end}
/* RATA's office, line and email: across the width, under both paragraphs */
.cl-facts.cl-sales-facts{grid-column:1/13;max-width:none;margin-top:clamp(2.6rem,5vw,4.5rem)}

/* 02 · architect */
.cl-name{grid-column:1/9;grid-row:2;margin:0 0 clamp(3rem,6vw,5.5rem);font-family:var(--font-display);font-weight:500;
  font-size:clamp(2.8rem,9vw,10rem);line-height:.9;letter-spacing:-.025em;text-transform:uppercase}
html[lang="fa"] .cl-name{font-size:clamp(2.6rem,7.6vw,8.6rem);line-height:1.35;letter-spacing:0;text-transform:none}
/* the name opens the architect's own site, as RATA's line rings it */
.cl-name-link{color:inherit;text-decoration:none;transition:color .45s var(--ease-expo)}
.cl-name-link:hover{color:var(--electric)}
html.kbd .cl-name-link:focus-visible{outline:1px solid var(--electric);outline-offset:.4rem}
.cl-arch-body{grid-column:1/9;grid-row:3;display:grid;grid-template-columns:subgrid;row-gap:2rem;align-items:start}
.cl-lead{grid-column:1/7;margin:0;font-size:clamp(1.3rem,2.05vw,2.1rem);line-height:1.3;color:var(--chalk)}
html[lang="fa"] .cl-lead{line-height:1.75}
.cl-arch-body .cl-copy{grid-column:1/6}
.cl-arch-actions{grid-column:1/7;margin-top:.6rem;display:flex}
.cl-arch-coda{grid-column:8/13}
/* the portrait is a cut-out on pure white: laid on a chalk card and
   multiplied, its white becomes the card and its greys stay as shot, so the
   figure stands on paper with no halo — keying the white out against the
   ink would fringe every hair */
.cl-portrait{grid-column:9/13;grid-row:2/4;align-self:start;margin:0}
.cl-portrait-frame{overflow:hidden;background:var(--chalk)}
.cl-portrait img{display:block;width:100%;height:auto;mix-blend-mode:multiply;transform-origin:50% 70%}
.cl-quote{grid-column:2/12;margin:clamp(4.5rem,11vw,10rem) 0;padding-inline-start:clamp(1.2rem,2.4vw,2.6rem);
  border-inline-start:1px solid var(--electric)}
.cl-quote p{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(1.6rem,3.7vw,4rem);
  line-height:1.14;letter-spacing:-.01em;color:var(--electric-soft)}
html[lang="fa"] .cl-quote p{font-size:clamp(1.5rem,3.1vw,3.3rem);line-height:1.65;letter-spacing:0}

/* 03 · catalogue */
.cl-cat-title{grid-column:1/9}
.cl-cat-copy{grid-column:1/6;grid-row:3;margin-top:clamp(1.6rem,3vw,2.6rem)}
.cl-cat-actions{grid-column:7/13;grid-row:3;align-self:end;justify-self:end;display:flex;flex-wrap:wrap;gap:.8rem}
.cl-btn{display:inline-flex;align-items:center;gap:.75rem;min-height:3.3rem;padding:0 1.5rem;
  border:1px solid var(--hairline-strong);color:var(--chalk);text-decoration:none;
  font-family:var(--font-mono);font-weight:500;font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;
  transition:background-color .45s var(--ease-expo),color .45s var(--ease-expo),border-color .45s var(--ease-expo)}
.cl-btn:hover{border-color:var(--chalk)}
.cl-btn:focus-visible{outline:1px solid var(--electric);outline-offset:.3rem}
.cl-btn-solid{background:var(--chalk);border-color:var(--chalk);color:var(--ink)}
.cl-btn-solid:hover{background:var(--electric);border-color:var(--electric)}
.cl-btn-meta{padding-inline-start:.75rem;border-inline-start:1px solid;opacity:.55;letter-spacing:.16em;white-space:nowrap}
.cl-btn-icon{flex:none;width:.95rem;height:.95rem;transition:transform .45s var(--ease-expo)}
.cl-btn-solid:hover .cl-btn-icon{transform:translateY(2px)}
.cl-btn:not(.cl-btn-solid):hover .cl-btn-icon{transform:translate(2px,-2px)}
html[dir="rtl"] .cl-btn:not(.cl-btn-solid) .cl-btn-icon{transform:scaleX(-1)}
html[dir="rtl"] .cl-btn:not(.cl-btn-solid):hover .cl-btn-icon{transform:scaleX(-1) translate(2px,-2px)}
html[lang="fa"] .cl-btn{font-family:var(--font-body);font-size:.88rem;letter-spacing:0;text-transform:none}
html[lang="fa"] .cl-btn-meta{letter-spacing:0}
/* the brochure laid flat, edge to edge of the screen. Native horizontal
   scroll without the script (or with reduced motion); closing.js drives it
   from the page scroll instead (.is-driven) */
.cl-strip{grid-column:1/-1;margin:clamp(3.5rem,7vw,6rem) calc(50% - 50vw) 0;padding:1.2rem 0 .4rem;
  overflow-x:auto;scrollbar-width:none;direction:ltr}   /* the brochure opens left to right in either language */
.cl-strip::-webkit-scrollbar{display:none}
.cl-strip.is-driven{overflow:hidden}
.cl-strip-track{display:flex;gap:clamp(.8rem,1.4vw,1.4rem);width:max-content;margin:0;padding:0 var(--gutter);list-style:none}
.cl-page{flex:none;width:clamp(9rem,17vw,17rem)}
.cl-page a{display:block;color:var(--chalk-faint);text-decoration:none}
.cl-page img{display:block;width:100%;height:auto;box-shadow:0 18px 44px rgba(0,0,0,.5);
  transition:transform .6s var(--ease-expo)}
.cl-page-no{display:block;margin-top:.9rem;font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.22em;
  transition:color .4s}
html[lang="fa"] .cl-page-no{font-family:var(--font-body);font-size:.8rem;letter-spacing:0}
.cl-page a:hover img,.cl-page a:focus-visible img{transform:translateY(-.7rem)}
.cl-page a:hover .cl-page-no,.cl-page a:focus-visible .cl-page-no{color:var(--electric)}
.cl-page a:focus-visible{outline:none}

/* 04 · developer: the maker's signature. SAM Projects' lockup and title down
   the start side; behind them its mark as an architect's line, drawn in on
   arrival and cropped at the edge, in a low warm light; then the board. */
.cl-contact{position:relative;isolation:isolate;overflow:clip;padding-bottom:var(--dock-clear)}   /* the footer clears the sales dock */
.cl-contact::before{content:"";position:absolute;z-index:-2;pointer-events:none;
  top:-6%;inset-inline-end:-14%;width:min(62vw,58rem);aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(234,217,184,.075),rgba(234,217,184,.025) 55%,transparent);
  opacity:var(--glow,1)}
/* a maker's mark as an architect's line (01 and 04): drawn in by closing.js
   (--ghost-draw), then faintly filled; the stroke is in the mark's own units */
.cl-ghost{position:absolute;z-index:-1;pointer-events:none;overflow:visible}
.cl-ghost path{fill:rgba(246,243,236,var(--ghost-fill,.022));stroke:rgba(234,217,184,.34);stroke-width:var(--ghost-stroke,1.15);
  stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:var(--ghost-draw,0)}
.cl-contact .cl-ghost{top:clamp(2rem,6vh,5rem);inset-inline-end:-9vw;height:min(40vw,44rem);width:auto}

.cl-dev-lockup{grid-column:1/9;grid-row:2;justify-self:start;display:flex;align-items:center;gap:.32em;
  font-family:Graphik,ui-sans-serif,sans-serif;font-size:clamp(2.4rem,6vw,6.2rem);line-height:1;color:var(--chalk)}
.cl-dev-mark{flex:none;width:auto;height:1.12em;margin-inline-end:.12em;color:currentColor}
.cl-dev-sam{font-weight:500;letter-spacing:.3em;margin-inline-end:-.3em;padding-inline-end:.14em}
.cl-dev-lockup i{flex:none;width:.9em;height:max(1px,.018em);background:currentColor;opacity:.5}
.cl-dev-projects{align-self:center;font-weight:400;font-size:.19em;letter-spacing:.34em;opacity:.8}

/* the board (01 and 04): three numbered tiles on one rule, each the whole of
   its link, frosted over the drawn mark. A lamp follows the pointer across it
   (--mx, --my: closing.js). The space pages' sales office clones 04's list
   (spaces.js), so it is their board too. */
@counter-style tile-fa{system:extends persian;pad:2 "۰"}
.cl-contact .cl-facts.cl-board{grid-row:4;margin-top:clamp(4.5rem,9vw,8rem)}
.cl-facts.cl-board{counter-reset:tile;max-width:none;gap:0;padding-top:0;
  border-bottom:1px solid var(--hairline);background:rgba(8,8,10,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cl-board::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(22rem circle at var(--mx,50%) var(--my,50%),rgba(234,217,184,.1),transparent 70%);
  transition:opacity .6s var(--ease-expo)}
.cl-board:hover::after{opacity:1}
.cl-board .cl-fact{position:relative;z-index:1;counter-increment:tile;display:flex;flex-direction:column;
  justify-content:space-between;gap:2.4rem;min-height:clamp(11rem,15vw,14.5rem);
  padding:clamp(1.4rem,2vw,2rem) clamp(1.4rem,2.2vw,2.2rem);transition:background-color .6s var(--ease-expo)}
.cl-board .cl-fact+.cl-fact{border-inline-start:1px solid var(--hairline)}
.cl-board .cl-fact dt{margin:0}
.cl-board dt::before{content:counter(tile,decimal-leading-zero);margin-inline-end:1.1em;color:var(--electric)}
html[lang="fa"] .cl-board dt::before{content:counter(tile,tile-fa)}
.cl-board .cl-fact dd{font-family:var(--font-display);font-weight:400;font-size:clamp(1.35rem,2.3vw,2.4rem);line-height:1.2;
  letter-spacing:-.01em}
.cl-board .cl-fact:first-child dd{font-size:clamp(1.05rem,1.35vw,1.4rem);line-height:1.4}   /* the address: a line, not a figure */
html[lang="fa"] .cl-board .cl-fact dd{font-family:var(--font-body);line-height:1.75;letter-spacing:0}
/* the link covers its tile; the tile lifts, the arrow leans out, the value warms */
.cl-board .cl-fact a{background:none;transition:color .45s var(--ease-expo)}
.cl-board .cl-fact a::after{content:"";position:absolute;inset:0}
.cl-board .cl-fact:hover{background:rgba(246,243,236,.03)}
.cl-board .cl-fact:hover a,.cl-board .cl-fact a:focus-visible{color:var(--electric)}
html.kbd .cl-board .cl-fact:focus-within{outline:1px solid var(--electric);outline-offset:-1px}
.cl-board .cl-fact a:focus-visible{outline:none}
.cl-board-arrow{display:none}
.cl-board .cl-board-arrow{display:block;position:absolute;top:clamp(1.4rem,2vw,2rem);inset-inline-end:clamp(1.2rem,2vw,2rem);
  width:1rem;height:1rem;color:var(--chalk-faint);transition:transform .5s var(--ease-expo),color .45s var(--ease-expo)}
.cl-board .cl-fact:hover .cl-board-arrow{color:var(--electric);transform:translate(3px,-3px)}
html[dir="rtl"] .cl-board .cl-board-arrow{transform:scaleX(-1)}
html[dir="rtl"] .cl-board .cl-fact:hover .cl-board-arrow{transform:scaleX(-1) translate(3px,-3px)}
.cl-facts{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3vw,3rem);
  width:100%;max-width:64rem;margin:0;padding-top:clamp(1.6rem,3vw,2.4rem);text-align:start}
/* the rule over the facts is a line of its own, not a border, so closing.js
   can draw it across (--draw); drawn by default, as the space pages' copy is */
.cl-facts::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hairline-strong);
  transform:scaleX(var(--draw,1));transform-origin:left center}
html[dir="rtl"] .cl-facts::before{transform-origin:right center}
.cl-fact dt{margin-bottom:.8rem;font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--chalk-faint)}
html[lang="fa"] .cl-fact dt{font-size:.8rem;letter-spacing:0}
.cl-fact dd{margin:0;font-size:clamp(.95rem,1.1vw,1.12rem);line-height:1.6;color:var(--chalk)}
html[lang="fa"] .cl-fact dd{line-height:1.95}
html[dir="rtl"] .cl-fact a{display:inline-block}   /* dir=ltr runs keep their own order */
/* a rule that draws in under the link, the hero's hover in small */
.cl-fact a{color:inherit;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;
  transition:background-size .55s var(--ease-expo),color .3s}
.cl-fact a:hover,.cl-fact a:focus-visible{background-size:100% 1px;color:var(--electric)}
.cl-foot{display:flex;justify-content:space-between;gap:1rem;width:100%;
  margin-top:clamp(5rem,13vh,9rem);padding:1.6rem 0 clamp(1.6rem,4vh,2.6rem);border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-faint)}
html[lang="fa"] .cl-foot{font-family:var(--font-body);font-size:.78rem;letter-spacing:0}
.cl-foot{align-items:center}
.cl-social{display:flex;gap:.8rem;margin:0;padding:0;list-style:none}
/* the footer's one lit thing: a mark in a hairline ring, 44px to the finger */
.cl-social a{position:relative;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid var(--hairline-strong);color:var(--chalk-dim);
  transition:color .35s,border-color .35s,background-color .45s var(--ease-expo),transform .45s var(--ease-expo)}
.cl-social a:hover,.cl-social a:focus-visible{color:var(--ink);background:var(--electric);border-color:var(--electric);
  transform:translateY(-2px);outline:none}
.cl-social a:active{transform:scale(.94)}
.cl-social svg{width:1.1rem;height:1.1rem}

/* ─────────── gallery ───────────
   ERA Residence's amenities section, adapted
   (docs/superpowers/specs/2026-09-14-gallery-design.md). Sizes are in vw
   because theirs are: the composition scales with the width.

   300lvh of scroll area around a 100lvh sticky screen: a full screen of
   hold with the gallery still, then #after rises over the last 100lvh while
   the screen zooms and fades. The hold was 50svh with the zoom already
   running, and the gallery read as gone the moment it arrived. */
#gallery{position:relative;height:300vh;height:300lvh;background:var(--ink)}
.gal-screen{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;color:var(--chalk)}
.gal-w,.gal-slides{position:absolute;inset:0}
.gal-slide{position:absolute;inset:0;display:none}
.gal-slide.is-active{display:block;z-index:1}
.gal-slide.is-leaving{display:block;z-index:0}
/* laid out but unpainted for the one synchronous moment lines are measured */
.gal-slide.is-measuring{display:block;visibility:hidden}
/* one per split line; clip, not hidden — hidden would make a block formatting
   context and push the first line clear of the paragraph's indent float */
.gal-mask{overflow:clip}

/* three wrappers, three transforms: clip (wipe) > zoom (switch) > img (parallax) */
.gal-media{position:absolute;inset:0;overflow:hidden;background:var(--ink-800)}
.gal-zoom{position:absolute;inset:0}
.gal-img{position:absolute;left:0;top:-20%;width:100%;height:140%;object-fit:cover;display:block}
.gal-grad{position:absolute;left:0;right:0;pointer-events:none}
.gal-grad--top{top:0;height:100%;background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,0))}
.gal-grad--bot{bottom:0;height:73%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.3))}

.gal-grid{position:absolute;left:3vw;right:3vw;display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));column-gap:1vw}

/* the copy and the Discover ring stand clear of the sales dock in the corner */
.gal-copy{bottom:calc(100lvh - 100svh + 3.33vw + var(--dock-clear));align-items:end}
.gal-label{grid-column:3/6;grid-row:1;margin:0 0 2vw;font-family:var(--font-mono);font-weight:500;
  font-size:max(.69vw,11px);line-height:1.45;letter-spacing:.2em;text-transform:uppercase}
.gal-desc-w{grid-column:2/6;grid-row:2}
/* one column + one gap: the paragraph's first line starts under the label */
.gal-indent{float:left;width:calc((100% - 3vw) / 4 + 1vw);height:1px}
html[dir="rtl"] .gal-indent{float:right}
.gal-desc{margin:0;font-family:var(--font-display);font-weight:400;font-size:2.5vw;line-height:1;
  letter-spacing:-.01em;text-transform:uppercase}

.gal-tabs-w{top:10vw}
.gal-tabs{grid-column:8/10;position:relative;display:flex;flex-direction:column;align-items:flex-start}
.gal-tab{appearance:none;background:none;border:0;border-radius:0;margin:0;padding:0;color:inherit;font:inherit;
  text-align:start;cursor:pointer;opacity:.55;position:relative;transition:opacity .4s cubic-bezier(.25,1,.5,1)}
.gal-tab:hover{opacity:1}
.gal-tab.is-active{opacity:1}
/* a titles list reads as a caption; an arrow leaning out of the title says it is a control */
.gal-tab::after{content:"→";position:absolute;inset-inline-start:100%;top:50%;transform:translate(-.6em,-50%);
  margin-inline-start:.5em;font-family:var(--font-mono);font-size:1.3vw;line-height:1;opacity:0;
  transition:opacity .4s cubic-bezier(.25,1,.5,1),transform .4s cubic-bezier(.25,1,.5,1)}
html[dir="rtl"] .gal-tab::after{content:"←";transform:translate(.6em,-50%)}
.gal-tab:not(.is-active):hover::after,.gal-tab:not(.is-active):focus-visible::after{opacity:1;transform:translate(0,-50%)}
.gal-tab:focus-visible{outline:1px solid var(--electric);outline-offset:.35em}
/* nowrap: Graphik is far wider than ERA's condensed face, and a title
   broken over two lines reads as two titles */
.gal-tab-text{display:block;font-family:var(--font-display);font-weight:400;font-size:2.5vw;line-height:1;
  letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.gal-track{position:absolute;top:0;bottom:0;inset-inline-start:-1vw;width:1px;background:rgba(246,243,236,.2)}
.gal-hilight{position:absolute;top:0;left:0;width:100%;height:0;background:var(--chalk)}

.gal-cta-w{bottom:calc(3vw + var(--dock-clear));pointer-events:none}
.gal-cta{grid-column:8/10;pointer-events:auto;position:relative;width:13vw;aspect-ratio:1;
  display:grid;place-items:center;color:var(--chalk);text-decoration:none}
.gal-cta:focus-visible{outline:1px solid var(--electric);outline-offset:.5em;border-radius:50%}
.gal-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gal-ring circle{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.gal-ring .gal-ring-base{stroke:rgba(246,243,236,.55);animation:gal-breathe 2.8s ease-in-out infinite}
/* the ring breathes at rest: something that moves on its own is something to press */
@keyframes gal-breathe{0%,100%{stroke-opacity:.45}50%{stroke-opacity:1}}
@media (prefers-reduced-motion:reduce){.gal-ring .gal-ring-base{animation:none}}
.gal-cta-label{position:relative;display:grid;font-family:var(--font-mono);font-weight:500;
  font-size:max(.69vw,11px);line-height:1.45;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.gal-cta-text{grid-area:1/1}

/* the picture opens its space (spaces.js); the copy and the tab column lie
   over it and must not swallow that click */
.gal-media{cursor:pointer}
.gal-copy,.gal-tabs-w{pointer-events:none}
.gal-tabs{pointer-events:auto}
.gal-more{display:none}
.gal-nav{display:none}   /* phones only (below) */

/* Persian: no tracking (it breaks letter joining), the body face (the mono
   has no Arabic script), and room above/below for the marks inside masks */
html[lang="fa"] .gal-label,html[lang="fa"] .gal-cta-label{letter-spacing:0;font-family:var(--font-body);
  font-size:max(.9vw,11px)}
html[lang="fa"] .gal-desc,html[lang="fa"] .gal-tab-text{font-size:2.1vw;line-height:1.45}

@media (prefers-reduced-motion:reduce){
  #scroll-hint,#hero-rail{display:none}
  .zone{opacity:1!important;transform:none!important}
}

/* ─────────── mobile ───────────
   The portrait crop leaves far less horizontal room, and the display type was
   tuned for a 16:9 frame. Two things break outright at 375px: the eyebrow's
   .6em tracking overflows the line and wraps into the rail, and the rail's
   vertical label sits on top of it. */
/* the header's scrim over the closing: phones only (below; closing.js) */
#chrome-scrim{display:none}

@media (max-width: 820px){
  #chrome-scrim{display:block;position:fixed;left:0;right:0;top:0;z-index:89;pointer-events:none;visibility:hidden;
    height:calc(var(--chrome-edge) * 2 + var(--chrome-size) + .5rem);
    background:linear-gradient(rgba(8,8,10,.6),rgba(8,8,10,.36) 55%,rgba(8,8,10,0))}
  html.chrome-scrim #chrome-scrim{visibility:visible}
  html.space-open #chrome-scrim{visibility:hidden}   /* a page has its own */
  /* a finger's reach: controls drawn smaller than 44 x 44 get an invisible
     hit area that size, centred on them — the look is unchanged */
  #bar-partner::before,#brand-home::before,.cl-sales-num::before{content:"";position:absolute;
    left:50%;top:50%;width:max(100%,2.75rem);height:max(100%,2.75rem);transform:translate(-50%,-50%)}
  .cl-sales-num{position:relative}
  /* the room the round call button takes in its corner (below: .dock-pill) */
  :root{--dock-clear:calc(3rem + .9rem)}
  /* 29 characters at .6em tracking is ~350px before padding — it cannot fit */
  #zone-name .eyebrow{letter-spacing:.18em;text-indent:.18em;font-size:.6875rem;
    margin-bottom:1.1rem;padding-inline:.5rem}
  html[lang="fa"] #zone-name .eyebrow{letter-spacing:.14em;text-indent:.14em}

  /* decorative, and it collides with the copy at this width */
  #hero-rail{display:none}

  .brand-sub{font-size:.95rem;margin-top:1.1rem;padding-inline:.5rem}
  /* clear of the sales dock, which spans the foot of the frame at this width */
  .chapter{padding-bottom:calc(clamp(3rem,9vh,6rem) + var(--dock-clear))}
  /* On a phone the copy spans the frame, past the reach of the veil's corner
     shade, and sat on white pebbles and facades at under 2:1. Each chapter
     brings its own band: it fades in and out with the chapter's opacity, so
     between chapters the film is as clear as it was. */
  /* runs 40vh past the chapter's box: the overlay ends at 100svh, and with
     the URL bar away a band of unshaded frame showed under it */
  .chapter::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-50vw;right:-50vw;top:-5rem;bottom:-40vh;
    background:linear-gradient(rgba(8,8,10,0),rgba(8,8,10,.58) 4.5rem,rgba(8,8,10,.74) calc(100% - 40vh))}

  /* a space page pins Book a visit along the foot: the dock rides above it */
  html.space-open #sales-dock{bottom:calc(5.4rem + env(safe-area-inset-bottom))}
  /* a round call button: the pill's number and label spanned a third of the
     frame's foot and sat on whatever reached the corner (the catalogue's
     Download half under it). The text stays for screen readers — it is the
     link's name */
  .dock-pill{width:3rem;height:3rem;border-radius:50%;overflow:hidden}
  .dock-icon{width:100%;border-inline-end:0}
  .dock-icon svg{width:1.2rem;height:1.2rem}
  .dock-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* the closing: one column, the reading order the grid had */
  .cl-block{grid-template-columns:minmax(0,1fr);padding:clamp(4.5rem,12vh,7rem) 1.25rem}
  .cl-block>*,.cl-sales-body>*,.cl-dev-body>*,.cl-arch-body>*{grid-column:1/-1!important;grid-row:auto!important}
  .cl-portrait{width:min(100%,24rem);margin-bottom:2.6rem}
  .cl-sales-body,.cl-dev-body,.cl-arch-body{grid-template-columns:minmax(0,1fr);row-gap:1.4rem}
  .cl-statement{font-size:9.4vw}
  html[lang="fa"] .cl-statement{font-size:7.6vw}
  .cl-rata{width:min(62vw,17rem)}
  .cl-sales-line{justify-self:start;align-items:flex-start;margin-top:2rem;gap:.7rem}
  .cl-sales-num{font-size:11.5vw}
  .cl-dev-lockup{font-size:12.4vw}
  .cl-contact::before{top:-4%;inset-inline-end:-40%;width:120vw}
  .cl-contact .cl-ghost{top:2.5rem;inset-inline-end:-22vw;height:24rem}
  .cl-sales .cl-ghost{bottom:0;inset-inline-end:-30vw;width:170vw;--ghost-stroke:.5}
  .cl-contact .cl-facts.cl-board{margin-top:3.6rem}
  .cl-board .cl-fact{min-height:0;gap:.8rem;padding:1.4rem 1.1rem}
  .cl-board .cl-fact+.cl-fact{border-inline-start:0;border-top:1px solid var(--hairline)}
  .cl-board .cl-board-arrow{top:1.5rem;inset-inline-end:1.1rem}
  .cl-board .cl-fact dd{font-size:1.3rem}
  .cl-board .cl-fact:first-child dd{font-size:1.05rem}
  .cl-sales-lead,.cl-dev-lead{font-size:1.2rem}
  .cl-sales .cl-rule{margin:2.2rem 0}
  .cl-facts.cl-sales-facts{margin-top:1.4rem}
  .cl-name{font-size:14.5vw;margin-bottom:2.4rem}
  html[lang="fa"] .cl-name{font-size:12vw}
  .cl-lead{font-size:1.3rem}
  .cl-quote{margin:3.6rem 0;padding-inline-start:1.1rem}
  .cl-quote p{font-size:1.6rem}
  html[lang="fa"] .cl-quote p{font-size:1.45rem}
  .cl-cat-actions{justify-self:stretch;flex-direction:column;margin-top:.6rem}
  .cl-btn{justify-content:center;padding:0 1rem;letter-spacing:.16em;white-space:nowrap}
  .cl-strip{margin-top:3rem}
  .cl-page{width:42vw}
  .cl-contact{min-height:0;padding-bottom:var(--dock-clear)}   /* over the dock, and no taller: the footer would float */
  .cl-facts{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .cl-foot{flex-direction:column;align-items:center;gap:.6rem;margin-top:4rem;text-align:center}
  .chapter h2{font-size:1.55rem;line-height:1.15}
  .ch-rule{width:min(160px,40vw);margin-top:1.1rem}
  .ch-foot{margin-top:1.1rem}

  /* with RATA on the row it has to clear a space page's Close beside the
     toggle (spaces.css: .sp-bar), on a 360px phone too — hence the tight gaps */
  #brand-bar{gap:.6rem}
  #wordmark{gap:.5rem}
  .bar-divider{height:.92rem}
  #bar-partner img{height:.66rem}
  #wordmark span{font-size:.92rem;letter-spacing:.3em;text-indent:.3em}
  #wordmark-mark{height:1.25rem}
  #wordmark em{font-size:.6875rem;letter-spacing:.18em}
  #wordmark i{width:12px}
  /* a 360px phone is 10px short even so; the dash is the one part that says nothing */
  @media (max-width: 370px){ #wordmark i{display:none} }

  /* gallery: ERA's phone layout — titles top, copy bottom, no button */
  .gal-grid{left:6vw;right:6vw;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:3vw}
  /* ERA's .3 shades were made for a landscape frame with the copy in a
     corner. Here white caps run the full width of a portrait crop (the sky
     terrace's lit tables all but swallowed them), so both ends go deeper. */
  .gal-grad--top{background:linear-gradient(rgba(8,8,10,.55),rgba(8,8,10,.4) 35%,rgba(8,8,10,0) 60%)}
  .gal-grad--bot{background:linear-gradient(rgba(8,8,10,0),rgba(8,8,10,.56) 40%,rgba(8,8,10,.84))}
  /* story bars: the six tabs as thin bars under the header, sharing its
     width, the lit one the space on screen. Each keeps a 44px hit area and
     stays its tab — its title visually hidden, still its name. Swipe and the
     arrows (.gal-nav) step between them (gallery.js). */
  .gal-tabs-w{top:calc(var(--chrome-edge) + var(--chrome-size) + .6rem)}
  .gal-tabs{grid-column:1/-1;flex-direction:row;gap:4px}
  .gal-track{display:none}
  .gal-tab{flex:1;position:relative;min-height:2.75rem;opacity:1}
  .gal-tab::after{display:none}
  .gal-tab::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;
    background:rgba(246,243,236,.5);transition:background-color .4s cubic-bezier(.25,1,.5,1)}
  .gal-tab.is-active::before{background:var(--chalk)}
  .gal-tab:hover{opacity:1}
  .gal-tab:focus-visible{outline-offset:-2px}
  .gal-tab-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .gal-screen{touch-action:pan-y}
  /* back and forth, at the end of the row Discover this space sits on */
  .gal-nav{display:flex;position:absolute;z-index:2;inset-inline-end:6vw;gap:.5rem;
    bottom:calc(100lvh - 100svh + 6svh + var(--dock-clear) - .35rem)}
  .gal-nav-btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border-radius:50%;cursor:pointer;
    color:var(--chalk);background:rgba(8,8,10,.3);border:1px solid rgba(246,243,236,.4);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .gal-nav-btn svg{width:1rem;height:1rem}
  html[dir="rtl"] .gal-nav-btn svg{transform:scaleX(-1)}
  .gal-nav-btn:focus-visible{outline:1px solid var(--electric);outline-offset:3px}
  .gal-desc{font-size:6.7vw}
  .gal-copy{bottom:calc(100lvh - 100svh + 6svh + var(--dock-clear))}   /* and over the sales dock */
  .gal-label{grid-column:2/5;margin-bottom:4vw;font-size:max(2.6vw,11px)}
  .gal-desc-w{grid-column:1/5}
  .gal-indent{width:calc((100% - 9vw) / 4 + 3vw)}
  .gal-cta-w{display:none}
  /* a pill with an arrow, not an underlined caption: it must read as a button */
  .gal-more{grid-column:1/5;grid-row:3;justify-self:start;display:inline-flex;align-items:center;gap:.7em;margin-top:5vw;
    min-height:2.75rem;padding:0 1.1em;border:1px solid rgba(246,243,236,.7);border-radius:999px;
    background:rgba(8,8,10,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    pointer-events:auto;font-family:var(--font-mono);font-weight:500;font-size:max(2.6vw,11px);letter-spacing:.2em;
    text-transform:uppercase;color:var(--chalk);text-decoration:none}
  .gal-more::after{content:"→";letter-spacing:0;font-size:1.3em;line-height:1}
  html[dir="rtl"] .gal-more::after{content:"←"}
  html[lang="fa"] .gal-more{font-family:var(--font-body);letter-spacing:0;font-size:3.2vw}
  html[lang="fa"] .gal-desc{font-size:5.6vw}
  html[lang="fa"] .gal-label{font-size:3.2vw}
}