/* ---------- tokens ---------- */
:root{
  --canvas:#0B0E14;
  --panel:#131A24;
  --panel-2:#0F151E;
  --accent:#C8A253;
  --accent-hover:#E0BC6B;
  --accent-muted:rgba(200,162,83,.16);
  --line:rgba(200,162,83,.22);
  --line-cold:rgba(124,139,153,.26);
  --haze:#7C8B99;
  --text-secondary:#A3AFBA;
  --text-primary:#F2EEE6;
  --display:'Jost',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --gut:clamp(20px,5vw,80px);
  --line-height:1.62;
}
html[lang="ar"]{--display:'Reem Kufi',serif;--body:'IBM Plex Sans Arabic',system-ui,sans-serif;--mono:'IBM Plex Sans Arabic',var(--body)}
/* Bodoni-equivalent problem: our own display face (Jost) has no Arabic, Nastaliq,
   Devanagari or CJK coverage either. Each locale below gets its own editorial pairing,
   never a bare system-sans fallback. Vazirmatn and Reem Kufi are geometric like Jost;
   the Noto serif pairings carry the same "has real character" brief for their scripts. */
html[lang="ur"]{--display:'Noto Nastaliq Urdu',serif;--body:'Noto Nastaliq Urdu',serif;
  --mono:'Noto Nastaliq Urdu',serif;--line-height:2.15}
html[lang="fa"]{--display:'Vazirmatn',sans-serif;--body:'Vazirmatn',sans-serif;--mono:'Vazirmatn',sans-serif}
html[lang="zh-Hans"]{--display:'Noto Serif SC',serif;--body:'Noto Sans SC',sans-serif;--mono:'Noto Sans SC',sans-serif}
html[lang="ko"]{--display:'Noto Serif KR',serif;--body:'Noto Sans KR',sans-serif;--mono:'Noto Sans KR',sans-serif}
html[lang="hi"]{--display:'Noto Serif Devanagari',serif;--body:'Noto Sans Devanagari',sans-serif;
  --mono:'Noto Sans Devanagari',sans-serif}
/* wide Latin-style tracking reads as broken, not elegant, on these scripts; ar already
   gets this treatment rule by rule below, this covers the five newly added scripts */
html[lang="ur"] :is(.btn,.nav-links a,.langbtn,.settle .role,.settle .tel,.settle .house,.settle .house-sub,.settle .place,.kicker,.sl label,.readout .netlabel,.match-group .glabel,.mkt-services,.club-sub,.cities span,.eyebrow,.foot p,.foot .name),
html[lang="fa"] :is(.btn,.nav-links a,.langbtn,.settle .role,.settle .tel,.settle .house,.settle .house-sub,.settle .place,.kicker,.sl label,.readout .netlabel,.match-group .glabel,.mkt-services,.club-sub,.cities span,.eyebrow,.foot p,.foot .name),
html[lang="zh-Hans"] :is(.btn,.nav-links a,.langbtn,.settle .role,.settle .tel,.settle .house,.settle .house-sub,.settle .place,.kicker,.sl label,.readout .netlabel,.match-group .glabel,.mkt-services,.club-sub,.cities span,.eyebrow,.foot p,.foot .name),
html[lang="ko"] :is(.btn,.nav-links a,.langbtn,.settle .role,.settle .tel,.settle .house,.settle .house-sub,.settle .place,.kicker,.sl label,.readout .netlabel,.match-group .glabel,.mkt-services,.club-sub,.cities span,.eyebrow,.foot p,.foot .name),
html[lang="hi"] :is(.btn,.nav-links a,.langbtn,.settle .role,.settle .tel,.settle .house,.settle .house-sub,.settle .place,.kicker,.sl label,.readout .netlabel,.match-group .glabel,.mkt-services,.club-sub,.cities span,.eyebrow,.foot p,.foot .name)
{letter-spacing:0}

*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
/* No page-level fade in. A transition on the body's opacity leaves the whole site
   invisible anywhere transitions do not advance (an embedded preview pane, a tab that
   loads in the background), and a reliably visible page beats a pretty entrance.
   The easing lives in the captions, the section entrances and the drawn lines instead. */
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-weight:400;line-height:var(--line-height);
  -webkit-font-smoothing:antialiased;
}
/* height:auto or the width/height attributes stretch every image vertically */
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.06;margin:0;letter-spacing:.01em}
p{margin:0}
a{color:inherit}

/* direction-safe hiding: a left:-9999px skip link becomes 10000px of real
   sideways scroll once the document flips to rtl */
.skip{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  background:var(--accent);color:#0B0E14;font-family:var(--mono);font-size:13px}
.skip:focus{position:fixed;top:12px;inset-inline-start:12px;z-index:200;
  width:auto;height:auto;padding:12px 18px;overflow:visible;clip:auto;clip-path:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- the fixed environment layer ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env svg{position:absolute;top:50%;left:50%;width:180vmax;height:180vmax;
  transform:translate(-50%,-50%);color:var(--accent);opacity:.05;
  animation:envdrift 96s linear infinite;animation-delay:-30s}
.env::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 70% at 50% 0%,rgba(200,162,83,.07),transparent 60%),
             radial-gradient(ellipse 80% 60% at 50% 100%,rgba(124,139,153,.06),transparent 60%)}
@keyframes envdrift{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- language gate ----------
   The dialog is itself the scroll container, and it only centres the card while there is
   room for it: place-items:start plus margin-block:auto. Centring alone clipped a card
   taller than the window at both ends with no way to reach either, and with fourteen
   locales the card came to 738px on a 1280x720 laptop — the first row and the last were
   simply gone. Every vertical measure below is clamped against vh for the same reason:
   the card has to shrink with the window, not run off it. */
.gate{position:fixed;inset:0;z-index:120;display:none;place-items:start center;
  overflow-y:auto;overscroll-behavior:contain;
  background:rgba(9,12,18,.96);backdrop-filter:blur(14px)}
.gate.on{display:grid}
.gate-in{position:relative;margin-block:auto;text-align:center;max-width:min(92vw,560px);
  padding:clamp(20px,3.4vh,48px) clamp(24px,5vw,56px)}
.gate-frame{position:absolute;inset:0;width:100%;height:100%;color:var(--accent);opacity:.35;pointer-events:none}
.gate-mark{width:clamp(38px,5vh,52px);height:clamp(38px,5vh,52px);color:var(--accent);opacity:.8;
  margin:0 auto clamp(12px,2.2vh,22px)}
.gate .g-alt{font-family:var(--body);font-size:13.5px;color:var(--text-secondary);
  margin-bottom:clamp(16px,3vh,28px);line-height:1.9}
/* Fourteen locales in one column ran off the bottom of every phone: the visitor saw nine
   names and had to guess the rest were down there. Two columns at every width now, and
   the 720px rule further down shrinks the type rather than dropping a column. Nothing
   scrolls inside the card — a list with its own scrollbar inside a dialog that also
   scrolls is two traps where one will do. */
.gate-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.gate-opts button{
  font-size:clamp(15px,2.6vw,19px);letter-spacing:.1em;text-transform:none;
  background:transparent;color:var(--text-primary);border:1px solid var(--line-cold);
  padding:clamp(10px,1.7vh,14px) 16px;cursor:pointer;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.gate-opts button:hover{border-color:var(--accent);color:var(--accent-hover);transform:translateY(-2px)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px var(--gut);
  background:linear-gradient(to bottom,rgba(9,12,18,.82),rgba(9,12,18,0));
  transition:background .5s var(--ease-soft)}
.nav.solid{background:rgba(9,12,18,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(124,139,153,.12)}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;min-width:0}
.brand b{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.brand span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--haze);text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;gap:26px;align-items:baseline}
.nav-links a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;transition:color .35s var(--ease)}
.nav-links a:hover{color:var(--accent-hover)}
.nav-right{display:flex;gap:14px;align-items:center}
.langbtn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;background:transparent;color:var(--haze);
  border:1px solid var(--line-cold);padding:7px 11px;cursor:pointer;text-transform:uppercase;
  transition:color .35s var(--ease),border-color .35s var(--ease)}
.langbtn:hover{color:var(--accent-hover);border-color:var(--line)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:13px 22px;border:1px solid var(--accent);color:var(--accent);background:transparent;cursor:pointer;
  transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.btn:hover{background:var(--accent);color:#0B0E14;transform:translateY(-2px);box-shadow:0 10px 30px rgba(200,162,83,.22)}
.btn.solid{background:var(--accent);color:#0B0E14}
.btn.solid:hover{background:var(--accent-hover)}
.btn.ghost{border-color:var(--line-cold);color:var(--text-secondary)}
.btn.ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent-hover);box-shadow:none}
html[lang="ar"] .btn,html[lang="ar"] .nav-links a,html[lang="ar"] .langbtn{letter-spacing:0}
@media (pointer:coarse){.btn{min-height:44px}.langbtn{min-height:44px}}

/* ---------- hero ---------- */
/* 1400vh, not the 1000vh a chained 18 second journey usually wants. Measured on the built
   site: at 1000vh each line held for only 810 to 1296px of scroll with 324px of dead gap
   between beats, and it read as the words vanishing too soon. */
/* How much wheel the film occupies. Shorter means the same 18.1s of video passes under
   fewer pixels, so a small trackpad nudge moves the picture further. The captions are
   positioned as fractions of this length (data-a/data-b on each band), so they keep their
   places when it changes — only the speed does. Floor is set by the caption clock: a band
   must take longer to scroll through than BAND_ASSEMBLE in app.js, or the words never
   finish landing. At 780vh a band is about 1130px, roughly 0.75s at a brisk trackpad flick. */
.hero{--hero-scroll:620vh;position:relative;height:var(--hero-scroll);z-index:1}
/* svh, not vh: a phone's address bar slides away as you scroll and vh keeps counting the
   tall version, which leaves the sticky stage taller than the screen and the caption
   drifting under the chrome. svh is the small, stable one. */
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas)}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity 1.1s var(--ease-soft)}
#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease-soft);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero{opacity:1}
.stage.video-ready .poster{opacity:0}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(9,12,18,.55) 0%,rgba(9,12,18,0) 26%,rgba(9,12,18,0) 62%,rgba(9,12,18,.5) 100%)}

.ring{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);width:44px;height:44px;
  color:var(--accent);opacity:.75;transition:opacity .5s var(--ease)}
.ring circle{transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0;pointer-events:none}

.cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--haze);
  opacity:0;transition:opacity .8s var(--ease)}
.stage.video-ready .cue,.stage.video-failed .cue{opacity:.7}

.bands{position:absolute;inset:0;pointer-events:none}
.band{position:absolute;left:0;right:0;top:0;height:100%;opacity:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:clamp(96px,15vh,170px) var(--gut) 0;text-align:center;text-shadow:var(--tshadow)}
/* The caption scrim runs the full width, because the text does too: a centred ellipse
   left the line's own corners uncovered and the worst pixel came in at 1.4 to 1 there.
   It dies out by 64% of frame so the city below stays live. Dim, never flatten. */
.band>*{position:relative;z-index:1}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:calc(.32 + .68*var(--k,1));
  background:linear-gradient(to bottom,
    rgba(5,5,10,.78) 0%,
    rgba(5,5,10,.72) 24%,
    rgba(5,5,10,.55) 38%,
    rgba(5,5,10,.20) 52%,
    rgba(5,5,10,0) 64%)}
.band[data-band="4"]{justify-content:center;padding-top:0}
/* the settle sits mid frame, so its scrim is a soft horizontal band centred on the text */
/* deeper and taller than the caption bands: this block is nine lines instead of one,
   and its name is set in the accent, which is far darker than the off-white and so is
   the tightest legibility case on the page */
.band[data-band="4"]::before{
  background:linear-gradient(to bottom,
    rgba(5,5,10,0) 8%,
    rgba(5,5,10,.46) 22%,
    rgba(5,5,10,.79) 36%,
    rgba(5,5,10,.81) 56%,
    rgba(5,5,10,.54) 72%,
    rgba(5,5,10,0) 90%)}
.band .line{font-family:var(--display);font-weight:300;
  font-size:clamp(30px,5.6vw,72px);line-height:1.08;max-width:19ch;letter-spacing:-.005em}
/* Phrase four is the one that runs over the broker himself, so it is split: the first
   sentence sits along the top of frame, the second along the bottom, and he stands in the
   clear band between them. The lower half sharpens on --k2, a delayed clock, so the two
   arrive in reading order and the eye is walked down the frame instead of scanning for
   where the sentence went. */
.band[data-band="3"]{justify-content:space-between;
  padding:clamp(72px,10vh,132px) var(--gut) clamp(72px,10vh,132px)}
.band[data-band="3"] .line{font-size:clamp(21px,3.2vw,42px);max-width:30ch;line-height:1.16}
.band[data-band="3"] .line-bot .sharp{opacity:var(--k2,0)}
.band[data-band="3"] .line-bot .soft{opacity:calc(1 - var(--k2,0))}
/* scrim mirrored top and bottom: it has to carry text at both edges and leave the middle
   of frame open, which is the opposite of the single top-weighted wash the others use */
.band[data-band="3"]::before{
  background:linear-gradient(to bottom,
    rgba(5,5,10,.80) 0%,
    rgba(5,5,10,.66) 16%,
    rgba(5,5,10,0) 36%,
    rgba(5,5,10,0) 64%,
    rgba(5,5,10,.66) 84%,
    rgba(5,5,10,.80) 100%)}
/* the name at rest is the one place the accent carries a headline, matching the house block */
.settle .line{color:var(--accent);font-size:clamp(34px,6.4vw,76px)}
.band .btn{text-shadow:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* entrance primitives: transform + opacity only */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}
.band[data-e="drift"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px))}
.band[data-e="punch"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.band[data-e="punch"] .w.em{--ov:.24;--sd:.16;--ss:2.6}
.band[data-e="grid"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
/* Arabic, Urdu and Persian cannot be cut into letters without breaking the joins, so they
   arrive word by word here. Same threshold clock, one unit up. */
.band[data-e="grid"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc)}
.band[data-e="blur"] .soft{position:absolute;inset-inline:0;filter:blur(11px);opacity:calc(1 - var(--k,0));pointer-events:none}
.band[data-e="blur"] .sharp{opacity:var(--k,0)}
.band[data-e="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px))}
.settle{display:flex;flex-direction:column;align-items:center;gap:14px}
/* stage 1, with the name: the house line and its subtitle */
.settle .house{font-family:var(--display);font-size:clamp(11px,1.7vw,14px);letter-spacing:.42em;
  text-transform:uppercase;color:var(--accent);opacity:var(--k,0);
  transform:translateY(calc((1 - var(--k,0))*10px));padding-inline-start:.42em}
.settle .house-sub{font-family:var(--mono);font-size:clamp(9px,1.3vw,11px);letter-spacing:.3em;
  text-transform:uppercase;color:var(--text-secondary);opacity:var(--k,0);
  transform:translateY(calc((1 - var(--k,0))*10px));padding-inline-start:.3em;margin-top:-6px}
.settle .s-rule{display:block;width:clamp(90px,14vw,150px);height:1px;background:var(--accent);
  opacity:calc(.55*var(--k,0));transform:scaleX(var(--k,0));margin:4px 0}
.settle .s-rule-2{opacity:calc(.55*var(--ks2,0));transform:scaleX(var(--ks2,0))}
/* stage 2, the role line */
.settle .role{font-family:var(--mono);font-size:clamp(10px,1.5vw,12px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-secondary);opacity:var(--ks2,0);transform:translateY(calc((1 - var(--ks2,0))*14px))}
/* stage 3, the platform, the place, the number */
.settle .platform{font-size:clamp(12px,1.6vw,15px);color:var(--text-secondary);max-width:34ch;line-height:1.5;
  opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0))*14px))}
.settle .place{font-family:var(--mono);font-size:clamp(10px,1.4vw,12px);letter-spacing:.16em;color:var(--haze);
  opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0))*14px))}
.settle .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;
  opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0))*16px));pointer-events:auto}
.settle .tel{font-family:var(--mono);font-size:clamp(13px,1.8vw,16px);letter-spacing:.1em;color:var(--accent);text-decoration:none;
  padding:11px 8px;transition:color .35s var(--ease)}
.settle .tel:hover{color:var(--accent-hover)}
html[lang="ar"] :is(.settle .role,.settle .tel,.settle .house,.settle .house-sub,.settle .place){letter-spacing:0}

/* static hero (the five gates) */
.static-hero{display:none;position:relative;min-height:100svh;z-index:1;
  background-size:cover;background-position:center;
  align-items:center;justify-content:center;padding:clamp(80px,14vh,120px) var(--gut) clamp(48px,10vh,90px)}
.static-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(9,12,18,.74) 0%,rgba(9,12,18,.5) 40%,rgba(9,12,18,.86) 100%)}
.static-hero .sh-in{position:relative;max-width:30ch;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:13px;text-shadow:var(--tshadow)}
.static-hero .sh-house{font-family:var(--display);font-size:clamp(11px,3vw,14px);letter-spacing:.42em;
  text-transform:uppercase;color:var(--accent);padding-inline-start:.42em}
.static-hero .sh-house-sub{font-family:var(--mono);font-size:clamp(9px,2.4vw,11px);letter-spacing:.3em;
  text-transform:uppercase;color:var(--text-secondary);padding-inline-start:.3em;margin-top:-7px}
.static-hero .sh-rule{display:block;width:clamp(90px,26vw,150px);height:1px;background:var(--accent);opacity:.55;margin:3px 0}
.static-hero .sh-h{font-family:var(--display);font-weight:300;line-height:1.04;
  font-size:clamp(38px,11vw,60px);color:var(--accent);margin:0}
.static-hero .sh-role{font-family:var(--mono);font-size:clamp(10px,2.6vw,12px);letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-secondary);margin:0}
.static-hero .sh-platform{font-size:clamp(13px,3.4vw,15px);color:var(--text-secondary);line-height:1.5;margin:0}
.static-hero .sh-place{font-family:var(--mono);font-size:clamp(10px,2.6vw,12px);letter-spacing:.16em;color:var(--haze);margin:0}
.static-hero .sh-tel{font-family:var(--mono);font-size:clamp(15px,4vw,18px);letter-spacing:.1em;
  color:var(--accent);text-decoration:none;margin-top:6px;padding:12px 10px}
html[lang="ar"] :is(.sh-house,.sh-house-sub,.sh-role,.sh-place,.sh-tel){letter-spacing:0}

/* ---------- sections ---------- */
main{position:relative;z-index:2;background:var(--canvas)}
section.blk{position:relative;padding:clamp(70px,11vh,140px) var(--gut)}
.wrap{max-width:1180px;margin:0 auto}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:12px;margin-bottom:18px}
.kicker::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.6;flex:none}
html[lang="ar"] .kicker{letter-spacing:0}
h2.big{font-size:clamp(30px,5.4vw,62px);max-width:16ch;margin-bottom:26px}
.lede{color:var(--text-secondary);font-size:clamp(15px,1.7vw,18px);max-width:60ch}

/* self-drawing lattice divider */
.divider{width:100%;height:44px;color:var(--accent);opacity:.5;overflow:visible}
.divider path,.divider line{stroke:currentColor;fill:none;stroke-width:1;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.6s var(--ease)}
.divider.in path,.divider.in line{stroke-dashoffset:0}

/* the man */
.man{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.man-img{position:relative}
.man-img img{width:100%;filter:saturate(.86) contrast(1.04)}
.man-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,14,20,.55),transparent 45%),
             linear-gradient(to right,rgba(11,14,20,.35),transparent 35%);pointer-events:none}
.man-img .frame{position:absolute;inset:-14px;border:1px solid var(--line);pointer-events:none}
.quote{margin-top:30px;padding-inline-start:22px;border-inline-start:1px solid var(--accent);
  font-family:var(--display);font-weight:300;font-size:clamp(19px,2.5vw,28px);line-height:1.3;max-width:24ch}

/* calculator */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:start;margin-top:34px}
.sliders{display:flex;flex-direction:column;gap:26px}
.sl label{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px}
html[lang="ar"] .sl label{letter-spacing:0}
.sl label b{font-family:var(--mono);font-weight:400;font-size:16px;color:var(--text-primary);letter-spacing:0}
/* the money rows are steps in their own right, so they carry the same numeral and plain
   white keyword as the group heads above them rather than reading as muted sub-labels */
.sl label .lab{display:flex;align-items:baseline;gap:12px;min-width:0}
.sl label .lab-t{font-family:var(--ui);font-size:15px;letter-spacing:0;text-transform:none;
  color:var(--text-primary);white-space:nowrap}
html[lang="ar"] .sl label .lab-t,html[lang="ur"] .sl label .lab-t,html[lang="fa"] .sl label .lab-t{letter-spacing:0}
/* touch-action:pan-y is not a nicety. The handle strip is 44px tall and the full width of
   the column on a phone, so a thumb swiping down the page lands on one almost every time,
   and with the default the slider takes the gesture and drags. A visitor scrolling past
   the calculator arrived at the bottom with numbers they never chose — and the cue above
   it, which reads the same drag as "understood, you can stop explaining", had gone. pan-y
   hands vertical panning back to the browser and leaves the horizontal drag, which is the
   only one this control wants, with the slider. */
.sl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;touch-action:pan-y}
.sl input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(124,139,153,.3)}
.sl input[type=range]::-moz-range-track{height:2px;background:rgba(124,139,153,.3)}
.sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;
  margin-top:-7px;background:var(--accent);transform:rotate(45deg);border:0;
  transition:box-shadow .35s var(--ease)}
.sl input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--accent);border:0;transform:rotate(45deg)}
.sl input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 8px var(--accent-muted)}
.sl .ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--haze);opacity:.85;margin-top:4px}
.readout{position:relative;overflow:hidden;border:1px solid var(--line);padding:clamp(26px,4vw,40px);background:var(--panel-2)}
.readout .lat{position:absolute;inset:0;width:100%;height:100%;color:var(--accent);opacity:.07;pointer-events:none}
.readout .net{font-family:var(--mono);font-size:clamp(48px,9vw,88px);line-height:1;color:var(--accent);letter-spacing:-.02em}
.readout .netlabel{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:10px}
.readout .eaten{color:var(--text-secondary);font-size:14px;margin-top:16px;line-height:1.6}
.readout .eaten b{color:var(--text-primary);font-family:var(--mono);font-weight:400;margin:0 .3em}
.readout .btn{margin-top:24px;width:100%}
html[lang="ar"] .readout .netlabel{letter-spacing:0}

/* the match tool: property type, budget, monthly capacity */
.match-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:start;margin-top:34px}
.match-groups{display:flex;flex-direction:column;gap:28px}
.match-group .glabel{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:14px}
html[lang="ar"] .match-group .glabel{letter-spacing:0}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{font-family:var(--body);font-size:14px;color:var(--text-secondary);background:transparent;
  border:1px solid var(--line-cold);padding:12px 18px;cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.pill:hover{border-color:var(--line);color:var(--text-primary)}
.pill.sel{border-color:var(--accent);color:var(--accent-hover);background:var(--accent-muted)}
.pill:active{transform:scale(.97)}
@media (pointer:coarse){.pill{min-height:44px;display:inline-flex;align-items:center}}
.match-summary{color:var(--text-secondary);font-size:14.5px;line-height:1.75;margin-bottom:22px;min-height:3.5em}

/* ---------- the configurator ---------- */
.cfg-step{margin-top:clamp(30px,5vh,52px)}
.cfg-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.cfg-num{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.16em}
.cfg-clear{margin-inline-start:auto;background:transparent;border:0;cursor:pointer;padding:6px 2px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--haze);
  transition:color .3s var(--ease)}
.cfg-clear:hover{color:var(--accent-hover)}
.cfg-note{color:var(--text-secondary);font-size:14.5px;max-width:52ch}
.cfg-warn{color:var(--accent-hover);font-size:13.5px;margin-top:14px;max-width:56ch;
  padding-inline-start:14px;border-inline-start:1px solid var(--accent)}
html[lang="ar"] .cfg-num,html[lang="ar"] .cfg-clear{letter-spacing:0}

/* the seal: one clear moment, 520ms, transform and opacity only */
.seals .pill{position:relative;overflow:hidden;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),
             opacity .45s var(--ease),filter .45s var(--ease),transform .3s var(--ease)}
.seals.has-pick .pill:not(.sel){opacity:.34;filter:saturate(.25)}
.seals .pill.sel{border-color:var(--accent);color:var(--accent-hover);background:var(--accent-muted);
  animation:sealPress .52s var(--ease)}
/* the stamp ring: expands once out of the centre, then is gone */
.seals .pill.sel::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;
  border:1px solid var(--accent);transform:rotate(45deg) scale(.2);opacity:0;
  animation:sealRing .52s var(--ease)}
@keyframes sealPress{0%{transform:scale(1)}34%{transform:scale(.955)}100%{transform:scale(1)}}
@keyframes sealRing{0%{transform:rotate(45deg) scale(.2);opacity:.9}
  70%{opacity:.32}100%{transform:rotate(45deg) scale(9);opacity:0}}

/* a sub-answer inside a step: the seven emirates under the UAE, the typed country under
   "another country". A rule down the inline start — the same mark .cfg-warn carries —
   says it belongs to the step above instead of being a step of its own. Logical
   properties, so it flips with Arabic, Urdu and Persian on its own. */
.cfg-sub{margin-top:22px;padding-inline-start:16px;border-inline-start:1px solid var(--line-cold)}
.cfg-sublabel{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:14px}
html[lang="ar"] .cfg-sublabel{letter-spacing:0}
.cfg-sub .cfg-note{margin-top:12px}
/* 16px is not a taste call: iOS Safari zooms the whole page in on any field it reads as
   smaller, and the visitor lands back on a page they now have to pinch out of. The focus
   ring is deliberately left alone — the underline alone is not enough for a keyboard. */
.cfg-text{width:min(340px,100%);background:transparent;border:0;
  border-bottom:1px solid var(--line-cold);font-family:var(--body);font-size:16px;
  color:var(--text-primary);padding:9px 0;transition:border-color .3s var(--ease)}
.cfg-text::placeholder{color:var(--haze)}
.cfg-text:focus{border-bottom-color:var(--accent)}
@media (pointer:coarse){.cfg-text{min-height:44px}}

/* money sliders: the typed fallback sits under the live label */
.sl.money label b{display:inline-flex;align-items:baseline;gap:8px}
.money-in{width:9ch;background:transparent;border:0;border-bottom:1px solid var(--line-cold);
  font-family:var(--mono);font-size:14px;color:var(--text-primary);padding:2px 0;text-align:end}
.money-in:focus{outline:none;border-bottom-color:var(--accent)}
.sl .sub{font-family:var(--mono);font-size:11px;color:var(--haze);margin-top:8px;min-height:1.4em}
.cfg-money{display:flex;flex-direction:column;gap:26px}
.cfg-cur{margin-inline-start:auto;display:flex;gap:0;border:1px solid var(--line-cold)}
.cur-btn{background:transparent;border:0;cursor:pointer;padding:7px 13px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;color:var(--haze);transition:background .3s var(--ease),color .3s var(--ease)}
.cur-btn.is-on{background:var(--accent-muted);color:var(--accent-hover)}
@media (pointer:coarse){.cur-btn{min-height:44px}.cfg-clear{min-height:44px}
  /* A 16px diamond is a hard thing to catch with a thumb. The strip grows to the 44px
     touch target so the whole row is grabbable, and the handle grows with it; the track
     stays 2px, so this costs nothing visually. */
  .sl input[type=range]{height:44px}
  .sl input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-10px}
  .sl input[type=range]::-moz-range-thumb{width:22px;height:22px}
  .sl .ticks{margin-top:0}
}

/* the pinned summary bar. The step above it gets bottom room so the sticky bar never
   parks on top of the last slider. */
#cfg-step-budget{padding-bottom:clamp(90px,14vh,130px)}
.cfg-bar{position:sticky;bottom:0;z-index:40;margin-top:clamp(34px,6vh,60px);
  border:1px solid var(--line);background:rgba(15,21,30,.94);backdrop-filter:blur(12px);overflow:hidden}
.cfg-bar .lat{position:absolute;inset:0;width:100%;height:100%;color:var(--accent);opacity:.05;pointer-events:none}
.cfg-bar-in{position:relative;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding:clamp(14px,2.4vw,20px)}
.cfg-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:32px}
.cfg-chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-primary);
  border:1px solid var(--line);background:var(--accent-muted);padding:7px 12px;white-space:nowrap}
.cfg-chip b{color:var(--accent-hover);font-weight:400}
.cfg-empty{font-family:var(--mono);font-size:11.5px;color:var(--haze);letter-spacing:.06em}
.cfg-actions{display:flex;gap:12px;align-items:center;margin-inline-start:auto}
.cfg-reset{background:transparent;border:0;cursor:pointer;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--haze);padding:10px 4px;transition:color .3s var(--ease)}
.cfg-reset:hover{color:var(--accent-hover)}
html[lang="ar"] :is(.cfg-chip,.cfg-empty,.cfg-reset,.cur-btn){letter-spacing:0}

/* ---------- interaction cues ----------
   Two blocks on this page ask the visitor to do something rather than read: the
   calculator's three handles and the configurator's first pair of pills. Shown the site
   cold, the first reader touched neither, because nothing on screen said they were
   controls. Each now carries two signals: a line of type naming the gesture, and the
   control itself breathing until it is used. Both stop for good the moment the visitor
   acts, so the page falls quiet for anyone who has understood it. Reduced motion strips
   the movement and leaves the words, which is the half that carries the meaning. */
.cue-hint{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-hover);margin:0;padding:6px 11px;
  border:1px solid var(--line);background:var(--accent-muted);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
/* A slider cue never stands down — the client asked for it plainly, after three rounds
   of it retiring too early. The sentence stays true for ever anyway: a handle dragged
   once is still a handle you can drag. The pill cue above the first step is the one
   exception and still folds away, because the question it asks does get answered and its
   words go stale the moment it is. */
.cue-hint[hidden]{display:none}
.cue-hint.gone{opacity:0;transform:translateY(-5px);pointer-events:none}
.cfg-head .cue-hint{align-self:center}
html[lang="ar"] .cue-hint,html[lang="ur"] .cue-hint,html[lang="fa"] .cue-hint{letter-spacing:0}
.cue-ico{flex:0 0 auto;color:var(--accent-hover)}
/* the grip travels its own rail: the gesture drawn rather than described. The 45deg sits
   inside the keyframes because a CSS transform would otherwise drop the attribute one. */
.cue-grip{transform-box:fill-box;transform-origin:50% 50%;animation:cueDrag 2.6s var(--ease-soft) infinite}
@keyframes cueDrag{0%,100%{transform:translateX(-11px) rotate(45deg)}
  50%{transform:translateX(11px) rotate(45deg)}}
.cue-ico-tap{animation:cueTap 1.9s var(--ease-soft) infinite}
@keyframes cueTap{0%,100%{transform:translateY(-2px);opacity:.5}50%{transform:translateY(2px);opacity:1}}
/* Every handle on the page glows until it is dragged — the calculator's three, the
   bedroom slider, the three money sliders. .handles marks the block, and it never comes
   off: the glow runs for as long as the page is open.

   The animation is on the input, not on ::-webkit-slider-thumb. A box-shadow keyframe on
   the thumb was the obvious way to write this and it does not run: static styling of that
   pseudo-element applies (the handles are gold diamonds because of it) but an animation
   there never started on a real phone. It could not be caught before shipping either —
   the thumb lives in the input's UA shadow tree, where getComputedStyle reports the host
   element's own box, animation events do not escape, and getAnimations() lists nothing,
   so from script there is no way to tell a running animation from a dead rule.

   filter on the input paints over everything the input renders, its shadow tree included,
   so the diamond glows without anyone having to know where the diamond is. The property
   sits on an ordinary element: getAnimations() lists it and getComputedStyle reads the
   interpolated value back, which is what makes it checkable. It is also the only version
   of this that needs no thumb geometry, so it survives the 22px touch handle and mirrors
   with RTL for free. */
.handles input[type=range]{animation:cueGlow 2.6s var(--ease-soft) infinite}
.handles input[type=range]:hover{animation:none}
@keyframes cueGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(200,162,83,0))}
  50%{filter:drop-shadow(0 0 7px rgba(200,162,83,.85))}}
/* The live figure warms on the same beat. It says what the handle is for — this is the
   number that moves — which a glow on its own does not. */
.handles .sl label b{animation:cueNum 2.6s var(--ease-soft) infinite}
@keyframes cueNum{0%,100%{color:var(--text-primary)}50%{color:var(--accent-hover)}}
/* The same idea on the pills, and on every step's row rather than only the first: a row
   the visitor has not answered yet is a row that still wants a press. Deliberately
   fainter than the first pass — gold at 45% instead of full, a 4px halo instead of 5, a
   slower cycle — because four rows at the old strength read as an alarm rather than an
   invitation. Ended by .has-pick, which renderCfg already sets on each group the instant
   its answer lands, so none of this needs state of its own. */
.pills.beckon:not(.has-pick) .pill{animation:cuePill 3.4s var(--ease-soft) infinite}
/* a ripple along the row rather than eleven pills blinking in lockstep */
.pills.beckon:not(.has-pick) .pill:nth-child(2){animation-delay:.11s}
.pills.beckon:not(.has-pick) .pill:nth-child(3){animation-delay:.22s}
.pills.beckon:not(.has-pick) .pill:nth-child(4){animation-delay:.33s}
.pills.beckon:not(.has-pick) .pill:nth-child(5){animation-delay:.44s}
.pills.beckon:not(.has-pick) .pill:nth-child(6){animation-delay:.55s}
.pills.beckon:not(.has-pick) .pill:nth-child(7){animation-delay:.66s}
.pills.beckon:not(.has-pick) .pill:nth-child(8){animation-delay:.77s}
.pills.beckon:not(.has-pick) .pill:nth-child(9){animation-delay:.88s}
.pills.beckon:not(.has-pick) .pill:nth-child(10){animation-delay:.99s}
.pills.beckon:not(.has-pick) .pill:nth-child(11){animation-delay:1.1s}
.pills.beckon .pill:hover{animation:none}
@keyframes cuePill{0%,100%{border-color:var(--line-cold);box-shadow:0 0 0 0 rgba(200,162,83,0)}
  50%{border-color:rgba(200,162,83,.45);box-shadow:0 0 0 4px rgba(200,162,83,.06)}}
@media (max-width:720px){
  /* nowrap matters here: in a wrapping column the flex line takes its width from the
     widest item, so align-items:stretch stretched the chips to their own 903px instead of
     the bar's 349px and the row was simply clipped. */
  .cfg-bar-in{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:12px}
  .cfg-actions{margin-inline-start:0;justify-content:space-between}
  .cfg-actions .btn{flex:1}
  /* five stacked chips would eat half a phone screen, so the summary scrolls sideways
     inside its own row instead of growing the bar. min-width:0 is what makes that work:
     a flex item refuses to shrink below its content without it, so the row grew to 903px
     on a 390px phone and the sideways scroll never engaged. */
  .cfg-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;padding-bottom:2px;min-width:0}
  .cfg-chips::-webkit-scrollbar{display:none}
  .cfg-actions{min-width:0}
  .cfg-actions .btn{flex:1;min-width:0;text-align:center;padding-inline:12px}
}
@media (prefers-reduced-motion:reduce){
  .seals .pill.sel{animation:none}
  .seals .pill.sel::after{animation:none;opacity:0}
}

/* diamond bullet lists: mandate, access, kosova. The mark echoes Ahmed's own material,
   the same ◆ his source material used, and the lattice motif's own diamond shape. */
.dlist{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:15px}
.dlist li{display:flex;gap:14px;align-items:baseline;color:var(--text-secondary);font-size:15.5px;line-height:1.6}
.dlist li::before{content:"◆";color:var(--accent);font-size:9px;flex:none;transform:translateY(-2px)}

/* the "capital is positioned" manifesto */
.principles{display:flex;flex-direction:column;margin-top:8px;border-top:1px solid rgba(124,139,153,.16)}
.principle{display:flex;align-items:baseline;gap:24px;padding:22px 0;border-bottom:1px solid rgba(124,139,153,.16)}
.principle .pn{font-family:var(--mono);font-size:13px;color:var(--accent);flex:none;width:2.2em}
.principle .pt{font-family:var(--display);font-weight:300;font-size:clamp(18px,2.4vw,25px)}
.accent-line{color:var(--accent-hover)}

/* Kosova and Capital Academy: a picture in the right column of a taller text column.
   Both keep their own ratio instead of being cropped to a box. The Kosova frame is a wide
   aerial whose whole value is width — the bay, the run of the terraces — and cropping it
   upright to match the bullets would throw away the thing it is there to say. */
.kos{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,5vw,64px);align-items:center}
.cap{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,64px);align-items:center}
.cap .lede+.lede{margin-top:16px}
.kos-img,.cap-img{position:relative}
.kos-img img,.cap-img img{width:100%;filter:saturate(.87) contrast(1.04)}
/* the wash comes off the bottom only: .man-img also darkens its left edge, which works
   under a picture on the left and fights the text column under one on the right */
.kos-img::after,.cap-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,14,20,.5),transparent 44%)}
.kos-img .frame,.cap-img .frame{position:absolute;inset:-14px;border:1px solid var(--line);
  pointer-events:none}

/* the three pillars are a numbered ledger in the shape of #principles rather than a row of
   three: the middle one carries the certificate list and would leave the others short */
.cap-k{margin-top:clamp(38px,6vw,64px)}
.cap-pillars{display:flex;flex-direction:column;margin-top:8px;border-top:1px solid rgba(124,139,153,.16)}
.cap-pillar{display:flex;align-items:baseline;gap:24px;padding:22px 0;
  border-bottom:1px solid rgba(124,139,153,.16)}
.cap-pillar .pn{font-family:var(--mono);font-size:13px;color:var(--accent);flex:none;width:2.2em}
.cap-pt h4{font-family:var(--display);font-weight:300;font-size:clamp(17px,2.2vw,23px);
  line-height:1.15;letter-spacing:.01em;margin:0 0 9px}
.cap-pt p{color:var(--text-secondary);font-size:15px;line-height:1.6;max-width:64ch}
.cap-certs{margin-top:16px;gap:11px}
.cap-certs li{font-size:14.5px}

/* the marketing arm: two feature pairs, a services row, a closing couplet */
.mkt-pairs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,40px);margin-top:32px}
.mkt-pair h3{font-family:var(--display);font-weight:300;font-size:clamp(16px,2vw,20px);margin-bottom:9px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary)}
.mkt-pair p{color:var(--text-secondary);font-size:14.5px;line-height:1.6}
.mkt-services{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--haze);margin-top:28px;display:flex;flex-wrap:wrap}
.mkt-services span{padding-inline-end:16px;margin-inline-end:16px;border-inline-end:1px solid var(--line-cold)}
.mkt-services span:last-child{border:0;padding:0;margin:0}
.mkt-note{font-size:13.5px;color:var(--text-secondary);margin-top:20px}
/* the marketing arm now carries his own brand shot beside the service list */
.mkt-body{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,54px);align-items:start;margin-top:34px}
.mkt-img{position:relative;overflow:hidden;aspect-ratio:3/4}
.mkt-img img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:saturate(.82) contrast(1.05)}
.mkt-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,14,20,.5),transparent 42%)}
html[lang="ar"] .mkt-services{letter-spacing:0}

/* accolades: a plain medal list, matching the source's own badge line */
.medals{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;
  border-top:1px solid rgba(124,139,153,.16)}
.medals li{display:flex;gap:16px;align-items:baseline;padding:17px 0;border-bottom:1px solid rgba(124,139,153,.16);
  font-family:var(--display);font-weight:300;font-size:clamp(16px,2vw,20px);color:var(--text-primary)}
.medals li .medal-ic{flex:none;font-size:.85em}

/* proof */
.proof{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:34px}
.pf{position:relative;overflow:hidden;background:var(--panel-2)}
.pf img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.05);
  transition:transform 1.2s var(--ease)}
.pf:hover img{transform:scale(1.035)}
.pf figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.55;color:var(--text-primary);
  background:linear-gradient(to top,rgba(9,12,18,.94),rgba(9,12,18,0))}
.pf-a{grid-column:span 4;aspect-ratio:.62}
.pf-b{grid-column:span 4;aspect-ratio:.62}
.pf-c{grid-column:span 4;aspect-ratio:.62}
.pf-d{grid-column:span 12;aspect-ratio:2.1}
/* Снимок за рулём убран 26 сентября 2026, и .pf-right остался в своём ряду один. Шесть
   колонок из двенадцати он занимает по-прежнему — кадр 1290x1159 во всю ширину пришлось бы
   резать вдвое сильнее, — но встаёт с четвёртой, то есть по центру. Прижатый к левому краю,
   с шестью пустыми колонками справа, он читался бы как недогрузившаяся картинка. */
.pf-right{grid-column:4 / span 6;aspect-ratio:1.35}
/* the source is a portrait frame; centre-crop lands on ceiling, so bias down the frame */
.pf-d img{object-position:center 62%}

/* global */
.glob{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center}
.glob img{filter:saturate(.8) contrast(1.05)}
.cities{display:flex;flex-wrap:wrap;gap:8px 0;margin-top:24px}
.cities span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--haze);
  padding-inline-end:16px;margin-inline-end:16px;border-inline-end:1px solid var(--line-cold)}
.cities span:last-child{border:0}
html[lang="ar"] .cities span{letter-spacing:0}

/* the eyebrow label: mono, wide tracking, muted. Reuses the same treatment as the
   hero settle's role line and the small dossier-style labels elsewhere on the page. */
.eyebrow{font-family:var(--mono);font-size:clamp(11px,1.5vw,13px);letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-secondary)}
html[lang="ar"] .eyebrow{letter-spacing:0}

/* talk */
#talk{text-align:center}
#talk .wrap{display:flex;flex-direction:column;align-items:center}
#talk .kicker{justify-content:center}
#talk h2.big{max-width:14ch}
#talk .lede{margin-bottom:34px}
.talk-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.talk-tel{font-family:var(--mono);font-size:clamp(17px,3vw,26px);letter-spacing:.06em;color:var(--text-primary);
  text-decoration:none;margin-top:28px;display:inline-block;transition:color .35s var(--ease)}
.talk-tel:hover{color:var(--accent-hover)}
.talk-tel.talk-email{font-size:clamp(14px,2vw,17px);margin-top:10px;opacity:.85}
/* digits are bidi-weak: inside an RTL paragraph a bare phone number reorders into
   nonsense ("6380 920 50 971+"). Every tel: link stays pinned to LTR reading order. */
a[href^="tel:"]{direction:ltr;unicode-bidi:isolate}

/* Частный клуб. Кнопка в шапке ведёт сюда, поэтому блок стоит последним в секции
   контактов и отделён золотой волосяной линией: это не ещё одна кнопка «написать»,
   а отдельное предложение. */
/* Кнопка в шапке ведёт сюда якорем, а шапка position:fixed и высотой около 78px. Без
   scroll-margin-top якорь ставит верх блока в самый верх окна, то есть под шапку, и
   заголовок «Join our Private Club» оказывается ровно за ней — человек приезжает на
   середину собственного блока. Остальным пунктам меню это не нужно: они ведут на
   section.blk с большим верхним отступом, который сам отодвигает заголовок. */
.club{margin-top:clamp(40px,6vw,66px);padding-top:clamp(28px,4vw,40px);
  border-top:1px solid var(--line);width:min(560px,100%);text-align:center;
  scroll-margin-top:clamp(96px,12vh,124px)}
.club-h{font-family:var(--display);font-weight:300;font-size:clamp(20px,3vw,30px);
  line-height:1.15;letter-spacing:.01em}
.club-sub{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-top:10px}
.club-form{margin-top:26px}
.club-label{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:10px}
.club-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.club-tel{width:min(240px,100%);text-align:center}
/* Пока номер не набран, ссылка вести некуда. Гасим и выключаем, но не прячем: кнопка,
   которая появляется из ниоткуда после ввода, читается хуже, чем заранее видимая
   неактивная — по ней сразу понятно, что будет дальше. */
.club-send.off{opacity:.38;pointer-events:none}
.club-note{font-size:12.5px;color:var(--haze);margin-top:18px;line-height:1.6;
  max-width:44ch;margin-inline:auto}
html[lang="ar"] .club-sub{letter-spacing:0}

/* footer */
footer{position:relative;z-index:2;background:var(--panel-2);border-top:1px solid rgba(124,139,153,.14);
  padding:clamp(40px,6vh,64px) var(--gut)}
.foot{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.foot p{font-family:var(--mono);font-size:11.5px;line-height:1.9;color:var(--haze);letter-spacing:.04em}
.foot .name{color:var(--text-primary);font-family:var(--display);font-size:15px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px}
.foot-langs{display:flex;flex-wrap:wrap;gap:8px}
html[lang="ar"] .foot p,html[lang="ar"] .foot .name{letter-spacing:0}

/* entrances */
.rise{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.in .rise,.rise.in{opacity:1;transform:none}
.stag>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:0s}
.stag.in>*:nth-child(2){transition-delay:.09s}
.stag.in>*:nth-child(3){transition-delay:.18s}
.stag.in>*:nth-child(4){transition-delay:.27s}
.stag.done>*:nth-child(1),.stag.done>*:nth-child(2),.stag.done>*:nth-child(3),.stag.done>*:nth-child(4){transition-delay:0s}

/* living elements, whisper level */
.pulse{position:relative}
.pulse::after{content:"";position:absolute;inset:-30%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(200,162,83,.16),transparent 62%);
  opacity:0;animation:breathe 7s var(--ease-soft) infinite;animation-delay:-2.4s}
.live .pulse::after{opacity:1}
@keyframes breathe{0%,100%{opacity:.18}50%{opacity:.5}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .man,.calc,.glob,.match-grid,.mkt-pairs,.mkt-body,.kos,.cap{grid-template-columns:1fr}
  .pf-a,.pf-b,.pf-c,.pf-right{grid-column:span 12;aspect-ratio:1.2}
  .pf-d{aspect-ratio:1.6}
  .nav-links{display:none}
}
@media (max-width:720px){
  .nav .btn{display:none}
  .brand span{display:none}
  /* the card tightens rather than losing its second column: seven rows of two at these
     sizes come to about 320px, and the whole card to about 520px, which clears the fold
     on a 568px phone */
  .gate-in{padding:22px 20px}
  .gate .g-alt{font-size:12.5px;line-height:1.75}
  .gate-opts{gap:7px}
  .gate-opts button{font-size:14px;padding:11px 8px;letter-spacing:.06em}
}
@media (max-height:560px){.cue,.ring{display:none}}

/* The static-hero gates, identical strings in JS. Phones and tablets used to be excluded
   here; the film now runs for them too and #hero already carries object-fit:cover, so a
   portrait screen crops the 16:9 frame to its middle rather than letterboxing it. Only a
   stated preference for less motion, or a viewport too short to hold a caption, still
   falls back to the still frame. */
@media (prefers-reduced-motion:reduce),
       (max-height:400px){
  .hero{display:none}
  .static-hero{display:flex}
}

/* reduced motion, completely */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rise,.stag>*{opacity:1;transform:none}
  .divider path,.divider line{stroke-dashoffset:0}
  .env svg{opacity:.04}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}