/* =============================================================================
   PATTERNS WEST — BROKERS LANDING PAGE
   Kulture Developments  ·  self-contained, no build step
   ============================================================================= */

:root{
  /* Brand */
  --pw:        #FCD800;          /* Patterns West yellow */
  --pw-deep:   #D9B900;
  --pw-glow:   rgba(252,216,0,.28);
  --kulture:   #DA8936;
  --east:      #58C0F0;
  --maliv:     #6E8A72;

  /* Surface */
  --ink:       #07080A;
  --ink-2:     #0C0E12;
  --ink-3:     #131720;
  --paper:     #F3F1EC;
  --paper-2:   #E7E3DA;

  /* Text */
  --tx:        #FFFFFF;
  --tx-dim:    rgba(255,255,255,.62);
  --tx-faint:  rgba(255,255,255,.38);
  --tx-dark:   #14161A;
  --tx-dark-d: rgba(20,22,26,.66);

  /* Glass */
  --glass:     rgba(255,255,255,.055);
  --glass-2:   rgba(255,255,255,.085);
  --glass-brd: rgba(255,255,255,.13);
  --glass-lo:  rgba(255,255,255,.07);

  /* Rhythm */
  --r-sm: 14px;
  --r:    22px;
  --r-lg: 32px;
  --sec:  clamp(80px, 11vw, 168px);
  --gut:  clamp(20px, 5vw, 64px);
  --maxw: 1280px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------- RESET --- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  background:var(--ink);
  color:var(--tx);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
picture{ display:block; }
/* these wrap absolutely-positioned images, so give them a real box */
.proj-card picture,.port-hero picture,.port-card picture{ position:absolute; inset:0; }
.contact-bg picture{ position:absolute; inset:0; }
/* fixed nav clearance for in-page anchors */
section[id],header[id]{ scroll-margin-top:96px; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--pw); color:#000; }

/* Arabic */
html[dir="rtl"] body{ font-family:'Cairo','Inter',system-ui,sans-serif; }
html[dir="rtl"] .display{ font-family:'Cairo',sans-serif; letter-spacing:0; }

/* ------------------------------------------------------------ TYPOGRAPHY --- */
/* Mundial Narrow is licensed — swap the @font-face in here and change
   --font-display below when you have the webfont file.                        */
.display{
  font-family:'Archivo','Inter',sans-serif;
  font-weight:700;
  line-height:.98;
  letter-spacing:-.028em;
}
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--pw); margin-bottom:22px; display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--pw); flex:none; }
html[dir="rtl"] .eyebrow{ letter-spacing:0; }

.h1{ font-size:clamp(42px,8.4vw,116px); }
.h2{ font-size:clamp(30px,4.6vw,62px); font-weight:500; letter-spacing:-.022em; }
.h3{ font-size:clamp(21px,2.3vw,30px); }
.lead{ font-size:clamp(15px,1.35vw,19px); color:var(--tx-dim); line-height:1.72; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }

/* ------------------------------------------------------------- PRELOADER --- */
#preload{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:grid; place-items:center; transition:opacity .7s var(--ease), visibility .7s;
}
#preload.done{ opacity:0; visibility:hidden; }
.pl-mark{ width:min(360px,68vw); opacity:0; animation:plIn 1s var(--ease-out) .1s forwards; }
.pl-mark img{ width:100%; filter:brightness(0) invert(1); }
.pl-bar{
  width:min(360px,68vw); height:2px; margin-top:32px;
  background:rgba(255,255,255,.12); overflow:hidden; border-radius:2px;
}
.pl-bar i{ display:block; height:100%; width:0%; background:var(--pw); transition:width .35s var(--ease); }
@keyframes plIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

/* -------------------------------------------------------------------- NAV --- */
.nav{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:900; width:calc(100% - 32px); max-width:1160px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:11px 12px 11px 22px; border-radius:100px;
  background:rgba(10,12,16,.55); border:1px solid var(--glass-brd);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  transition:transform .5s var(--ease), opacity .4s, background .4s;
}
.nav.hide{ transform:translateX(-50%) translateY(-140%); opacity:0; }
.nav-logo{ height:32px; flex:none; }
.nav-logo img{ height:100%; width:auto; filter:brightness(0) invert(1); }
.nav-links{ display:flex; gap:30px; font-size:13px; color:var(--tx-dim); }
.nav-links a{ transition:color .25s; white-space:nowrap; }
.nav-links a:hover{ color:var(--pw); }
.nav-right{ display:flex; align-items:center; gap:10px; flex:none; }
.lang-btn{
  font-size:12px; font-weight:600; padding:8px 15px; border-radius:100px;
  border:1px solid var(--glass-brd); color:var(--tx-dim); transition:.25s;
}
.lang-btn:hover{ color:var(--pw); border-color:var(--pw); }
.nav-cta{
  font-size:12.5px; font-weight:650; padding:10px 20px; border-radius:100px;
  background:var(--pw); color:#000; transition:.28s var(--ease); white-space:nowrap;
}
.nav-cta:hover{ box-shadow:0 8px 24px var(--pw-glow); }
@media(max-width:900px){ .nav-links{ display:none; } }
@media(max-width:520px){ .nav{ padding:9px 9px 9px 16px; } .nav-cta{ display:none; } .nav-logo{ height:26px; } }

/* --- sales office ---------------------------------------------------------
   The nav pin and the footer map card. Both SVGs also carry width/height
   attributes in the markup: a viewBox-only SVG has no intrinsic size, so if
   this stylesheet is ever stale or blocked the icon fills its parent box. */
.office-btn{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  font-size:12px; font-weight:600; padding:8px 14px; border-radius:100px;
  border:1px solid var(--glass-brd); color:var(--tx-dim); transition:.25s;
  white-space:nowrap; line-height:1;
}
.office-btn svg{ width:15px; height:15px; flex:none; }
.office-btn:hover{ color:var(--pw); border-color:var(--pw); }
@media(max-width:760px){ .office-btn span{ display:none; } .office-btn{ padding:8px 11px; } }

.foot-office{
  display:flex; align-items:stretch; gap:0; margin-top:26px;
  max-width:430px; border:1px solid var(--glass-brd); border-radius:var(--r-sm);
  overflow:hidden; background:var(--glass); transition:border-color .3s, background .3s;
}
.foot-office:hover{ border-color:rgba(252,216,0,.45); background:var(--glass-2); }
.fo-map{
  width:118px; flex:none; background:var(--ink-3); position:relative;
  filter:saturate(.55); pointer-events:none;      /* the whole card is the link */
}
.fo-map .leaflet-control-container,
.fo-map .leaflet-control-attribution{ display:none; }
.fo-body{ padding:14px 16px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.fo-k{
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pw);
}
html[dir="rtl"] .fo-k{ letter-spacing:0; }
.foot-office b{ font-size:14px; font-weight:650; color:var(--tx); line-height:1.4; }
.foot-office i{ font-style:normal; font-size:12.5px; color:var(--tx-dim); line-height:1.5; }
.fo-go{
  display:inline-flex; align-items:center; gap:6px; margin-top:7px;
  font-size:11.5px; font-weight:650; color:var(--pw);
}
.fo-go svg{ width:13px; height:13px; flex:none; }
html[dir="rtl"] .fo-go svg{ transform:scaleX(-1); }
@media(max-width:520px){
  .foot-office{ max-width:100%; }
  .fo-map{ width:92px; }
}

/* --- asset manager ---------------------------------------------------------
   [hidden] needs an explicit rule: `display:flex/grid` on a section would
   otherwise beat the UA stylesheet and the block would render anyway. */
.amgr[hidden]{ display:none !important; }
.amgr{ background:var(--ink-2); overflow:hidden; }
.amgr-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px;
}
.amgr-card{
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-sm);
  padding:22px 22px 24px; transition:border-color .3s, background .3s;
}
.amgr-card:hover{ border-color:rgba(252,216,0,.35); background:var(--glass-2); }
.amgr-card b{
  display:block; font-size:16px; font-weight:700; letter-spacing:-.012em;
  color:var(--pw); line-height:1.35; margin-bottom:9px;
}
.amgr-card p{ font-size:13.5px; line-height:1.65; color:var(--tx-dim); }
.amgr-by{
  display:flex; align-items:center; gap:16px; margin-top:34px;
  padding-top:24px; border-top:1px solid var(--glass-brd);
}
.amgr-by span{
  font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tx-faint); flex:none;
}
html[dir="rtl"] .amgr-by span{ letter-spacing:0; }
.amgr-by img{ height:34px; width:auto; opacity:.95; }
@media(max-width:860px){
  .amgr-grid{ grid-template-columns:1fr; gap:14px; }
  .amgr-by{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ------------------------------------------------------------------- HERO --- */
.hero{
  position:relative; height:100svh; min-height:600px; overflow:hidden;
  display:grid; place-items:center; background:var(--ink);
}
.hero-stage{ position:absolute; inset:-6%; will-change:transform; }
.hero-layer{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; will-change:transform; pointer-events:none;
}
.hero-layer.base{ transform:scale(1.06); }
.hero-bloom{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  mix-blend-mode:screen; pointer-events:none;  /* opacity + pulse start on body.ready */
}
@keyframes bloomPulse{ 0%,100%{opacity:.45} 50%{opacity:.7} }

/* darkening + colour grade over the plate */
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:
    radial-gradient(120% 80% at 50% 42%, transparent 30%, rgba(4,5,7,.62) 100%),
    linear-gradient(to bottom, rgba(4,5,7,.72) 0%, transparent 26%, transparent 52%, rgba(4,5,7,.9) 100%);
}
.hero-grain{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-inner{
  position:relative; z-index:6; width:100%; text-align:center; padding-inline:var(--gut);
  opacity:0; transform:translateY(26px);
}
body.ready .hero-inner{
  opacity:1; transform:none;
  transition:opacity 1.1s var(--ease-out) .12s, transform 1.1s var(--ease-out) .12s;
}
/* opacity only — the JS parallax owns `transform` on these layers, and a CSS
   animation touching transform would override it and snap on completion. */
.hero-layer.mid,.hero-layer.front,.hero-bloom{ opacity:0; }
body.ready .hero-layer.mid{ transition:opacity 1.2s var(--ease-out) .1s; opacity:1; }
body.ready .hero-layer.front{ transition:opacity 1.2s var(--ease-out) .22s; opacity:1; }
body.ready .hero-bloom{ animation:bloomPulse 7s ease-in-out .6s infinite; opacity:.55; }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  padding:8px 17px 8px 13px; border-radius:100px; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.hero-badge i{ width:6px; height:6px; border-radius:50%; background:var(--pw); box-shadow:0 0 0 0 var(--pw-glow); animation:ping 2.4s infinite; }
@keyframes ping{ 0%{box-shadow:0 0 0 0 rgba(252,216,0,.6)} 70%{box-shadow:0 0 0 11px rgba(252,216,0,0)} 100%{box-shadow:0 0 0 0 rgba(252,216,0,0)} }
html[dir="rtl"] .hero-badge{ letter-spacing:0; }

.hero-eyebrow{
  font-size:clamp(10px,1.1vw,12.5px); font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--tx-faint); margin-bottom:22px;
}
html[dir="rtl"] .hero-eyebrow{ letter-spacing:.04em; }

/* Hero uses the thin cut — large, light and airy rather than heavy display */
.hero-title{
  margin-bottom:30px;
  font-weight:250;
  letter-spacing:-.012em;
  line-height:1.02;
  font-size:clamp(46px,9vw,128px);
}
.hero-title span{ display:block; }
.hero-title .l2{ color:var(--pw); font-weight:300; }
html[dir="rtl"] .hero-title{ font-weight:300; line-height:1.22; }

.hero-sub{
  max-width:610px; margin:0 auto 40px; font-size:clamp(14.5px,1.5vw,19px);
  color:rgba(255,255,255,.78); line-height:1.66;
}
.hero-cta{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 30px;
  border-radius:100px; font-size:14px; font-weight:650; letter-spacing:.01em;
  transition:.32s var(--ease); border:1px solid transparent; white-space:nowrap;
}
.btn-primary{ background:var(--pw); color:#000; }
.btn-primary:hover{ box-shadow:0 14px 40px var(--pw-glow); }
.btn-ghost{
  background:var(--glass); border-color:var(--glass-brd); color:#fff;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.btn-ghost:hover{ background:var(--glass-2); border-color:rgba(255,255,255,.3); transform:translateY(-2px); }
.btn svg{ width:15px; height:15px; flex:none; }
html[dir="rtl"] .btn svg{ transform:scaleX(-1); }

.hero-scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--tx-faint);
}
.hero-scroll i{ display:block; width:1px; height:38px; background:linear-gradient(var(--pw),transparent); animation:sc 2.1s ease-in-out infinite; }
@keyframes sc{ 0%,100%{transform:scaleY(.3); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} }
@media(max-width:640px){ .hero-scroll{ display:none; } }

/* -------------------------------------------------------------- PROOF BAR --- */
.proof{ position:relative; z-index:20; margin-top:-64px; }
.proof-in{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--glass-brd); border:1px solid var(--glass-brd);
  border-radius:var(--r); overflow:hidden;
  backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px) saturate(160%);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.proof-cell{ background:rgba(12,14,18,.82); padding:30px 22px; text-align:center; }
.proof-num{ font-family:'Archivo',sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,46px); line-height:1; color:var(--pw); letter-spacing:-.03em; }
.proof-lbl{ margin-top:9px; font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--tx-faint); }
html[dir="rtl"] .proof-lbl{ letter-spacing:0; }
@media(max-width:720px){
  .proof{ margin-top:-40px; }
  .proof-in{ grid-template-columns:repeat(2,1fr); }
  .proof-cell{ padding:22px 12px; }
}

/* ------------------------------------------------------------- SECTIONS --- */
.sec{ padding-block:var(--sec); }
.sec-head{ max-width:760px; margin-bottom:clamp(44px,5vw,76px); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow{ justify-content:center; }
.sec-head .h2{ margin-bottom:20px; }

/* -------------------------------------------------------- WHY IT SELLS --- */
.sells{ background:var(--ink); overflow:hidden; }
.sells-bg{
  position:absolute; inset:0; z-index:0;
  background:url('../img/street-retail.webp') center/cover no-repeat;
  opacity:.15; filter:grayscale(.4);
}
.sells-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(var(--ink),rgba(7,8,10,.55) 40%,var(--ink)); }
.sells .wrap{ position:relative; z-index:2; }
.sells-title strong{ display:block; color:var(--pw); font-weight:700; }

.catch{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:980px){ .catch{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .catch{ grid-template-columns:1fr; } }

.cat-card{
  position:relative; padding:30px 26px 28px; border-radius:var(--r);
  background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  transition:transform .5s var(--ease), border-color .4s, background .4s;
  overflow:hidden;
}
.cat-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--pw),transparent);
  opacity:0; transition:opacity .45s;
}
.cat-card:hover{ background:var(--glass-2); border-color:rgba(252,216,0,.34); }
.cat-card:hover::before{ opacity:1; }
.cat-idx{
  font-family:'Archivo',sans-serif; font-size:12px; font-weight:700; letter-spacing:.1em;
  color:var(--pw); opacity:.7; margin-bottom:16px;
}
.cat-name{ font-family:'Archivo',sans-serif; font-weight:650; font-size:19px; line-height:1.25; margin-bottom:20px; letter-spacing:-.01em; }
html[dir="rtl"] .cat-name{ font-family:'Cairo',sans-serif; }
.cat-row{ padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
.cat-row + .cat-row{ margin-top:12px; }
.cat-k{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-faint); margin-bottom:5px; }
html[dir="rtl"] .cat-k{ letter-spacing:0; }
.cat-v{ font-size:13.5px; color:rgba(255,255,255,.8); line-height:1.6; }
.cat-row.hi .cat-v{ color:var(--pw); }

/* ------------------------------------------------------------ DEVELOPER --- */
.dev{ background:var(--paper); color:var(--tx-dark); overflow:hidden; }
.dev .eyebrow{ color:var(--kulture); }
.dev .eyebrow::before{ background:var(--kulture); }
.dev .lead{ color:var(--tx-dark-d); }
.dev-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,84px); align-items:center; }
@media(max-width:900px){ .dev-grid{ grid-template-columns:1fr; } }
.dev-copy p{ font-size:clamp(14.5px,1.3vw,16.5px); color:var(--tx-dark-d); line-height:1.78; margin-bottom:19px; }
.dev-quote{
  margin-top:34px; padding:26px 30px; border-radius:var(--r);
  background:#fff; border:1px solid rgba(0,0,0,.07);
  box-shadow:0 18px 48px rgba(0,0,0,.07);
  font-family:'Archivo',sans-serif; font-weight:650; font-size:clamp(17px,1.9vw,23px);
  line-height:1.35; letter-spacing:-.015em; color:var(--tx-dark);
  border-left:3px solid var(--kulture);
}
html[dir="rtl"] .dev-quote{ border-left:none; border-right:3px solid var(--kulture); font-family:'Cairo',sans-serif; }
.dev-visual{ position:relative; }
.dev-img{ border-radius:var(--r-lg); overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.24); }
.dev-img img{ width:100%; height:clamp(320px,44vw,520px); object-fit:cover; }
.dev-stats{ display:grid; gap:12px; margin-top:18px; }
.dev-stat{
  padding:20px 24px; border-radius:var(--r-sm); background:#fff;
  border:1px solid rgba(0,0,0,.07); box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.dev-stat b{ display:block; font-family:'Archivo',sans-serif; font-size:20px; letter-spacing:-.02em; margin-bottom:4px; }
html[dir="rtl"] .dev-stat b{ font-family:'Cairo',sans-serif; }
.dev-stat span{ font-size:12.5px; color:var(--tx-dark-d); }
.dev-note{ margin-top:26px; font-size:12.5px; color:rgba(20,22,26,.5); line-height:1.6; }

/* -------------------------------------------------------------- PROJECT --- */
.proj{ background:var(--ink-2); }
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:860px){ .proj-grid{ grid-template-columns:1fr; } }
.proj-card{
  position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:440px;
  display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid var(--glass-brd); transition:transform .55s var(--ease);
}
.proj-card:hover{ transform:translateY(-9px); }
.proj-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.proj-card:hover img{ transform:scale(1.07); }
.proj-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(transparent 22%, rgba(5,6,8,.82) 72%, rgba(5,6,8,.96)); }
.proj-body{ position:relative; z-index:2; padding:30px 28px; }
.proj-body h3{ font-family:'Archivo',sans-serif; font-weight:650; font-size:24px; letter-spacing:-.02em; margin-bottom:12px; }
html[dir="rtl"] .proj-body h3{ font-family:'Cairo',sans-serif; }
.proj-body p{ font-size:14px; color:rgba(255,255,255,.72); line-height:1.68; }
.proj-tag{
  position:absolute; top:22px; inset-inline-start:24px; z-index:2;
  font-size:10px; font-weight:650; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 13px; border-radius:100px; background:rgba(252,216,0,.14);
  border:1px solid rgba(252,216,0,.4); color:var(--pw);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
html[dir="rtl"] .proj-tag{ letter-spacing:0; }

/* Facilities strip */
.fac{ margin-top:22px; padding:34px 30px; border-radius:var(--r-lg);
  background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.fac-t{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-faint); margin-bottom:22px; }
html[dir="rtl"] .fac-t{ letter-spacing:0; }
.fac-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px 30px; }
@media(max-width:760px){ .fac-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .fac-grid{ grid-template-columns:1fr; } }
.fac-i{ display:flex; align-items:center; gap:12px; font-size:14px; color:rgba(255,255,255,.82); }
.fac-i::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--pw); flex:none; }

/* --------------------------------------------------------- ARCHITECTURE --- */
.arch{ background:var(--ink); overflow:hidden; }
.arch-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,80px); align-items:center; }
@media(max-width:900px){ .arch-grid{ grid-template-columns:1fr; } }
.arch-imgs{ position:relative; height:clamp(400px,52vw,600px); }
.arch-imgs img{ position:absolute; border-radius:var(--r-lg); object-fit:cover; box-shadow:0 40px 90px rgba(0,0,0,.62); }
.arch-a{ width:74%; height:72%; top:0; inset-inline-start:0; }
.arch-b{ width:56%; height:52%; bottom:0; inset-inline-end:0; border:5px solid var(--ink); }
.arch-credit{ margin-top:26px; font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--pw); }
html[dir="rtl"] .arch-credit{ letter-spacing:0; }

/* ------------------------------------------------------------ MASTERPLAN --- */
.mast{ background:linear-gradient(var(--ink-2),var(--ink)); overflow:hidden; }
.mast-stage{
  position:relative; width:100%; display:grid; place-items:center;
  padding-block:clamp(10px,2vw,26px);
}
/* --- WebGL canvas --- */
.mast-3d{
  position:relative; z-index:2;
  width:min(1120px,100%);
  height:clamp(340px,58vh,620px);
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  background:var(--ink);
  box-shadow:0 60px 130px rgba(0,0,0,.72);
  cursor:grab;
  touch-action:pan-y;          /* vertical drags still scroll the page */
}
.mast-3d.grabbing{ cursor:grabbing; }
.mast-3d canvas{ display:block; width:100%; height:100%; }
/* vignette so the fogged edges read as intentional */
.mast-3d::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(78% 70% at 50% 46%, transparent 46%, rgba(3,4,6,.62));
}

/* --- loading --- */
.mast-load{
  position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column;
  align-items:center; gap:14px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tx-faint);
  transition:opacity .6s var(--ease), visibility .6s;
}
html[dir="rtl"] .mast-load{ letter-spacing:0; }
.mast-load.gone{ opacity:0; visibility:hidden; }
.mast-load.failed{ opacity:0; visibility:hidden; }
.mast-load-bar{ width:180px; height:2px; background:rgba(255,255,255,.13); border-radius:2px; overflow:hidden; }
.mast-load-bar i{ display:block; height:100%; width:0%; background:var(--pw); transition:width .3s var(--ease); }

/* --- explanatory note when 3D can't run --- */
.mast-note{
  position:absolute; z-index:5; left:50%; bottom:22px; transform:translateX(-50%);
  display:none; max-width:min(560px,88%); text-align:center;
  padding:12px 20px; border-radius:100px; font-size:12.5px; line-height:1.5;
  background:rgba(10,12,16,.82); border:1px solid var(--glass-brd); color:var(--tx-dim);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.mast-note.show{ display:block; }

/* --- fallback still (no WebGL) --- */
.mast-fallback{
  position:absolute; inset:0; z-index:3; display:none; place-items:center; padding-inline:var(--gut);
}
.mast-fallback.show{ display:grid; }
.mast-fallback img{ width:min(1120px,100%); border-radius:var(--r-lg); box-shadow:0 50px 110px rgba(0,0,0,.7); }
.mast-glow{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:70%; height:56%; border-radius:50%; filter:blur(90px);
  background:var(--pw); opacity:.13; pointer-events:none; z-index:0;
}
.mast-hint{
  margin-top:34px; text-align:center; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tx-faint);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
html[dir="rtl"] .mast-hint{ letter-spacing:0; }
.mast-hint svg{ width:16px; height:16px; opacity:.6; }
.mast-legend{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px; }
.mast-chip{
  padding:9px 18px; border-radius:100px; font-size:12.5px; font-weight:600;
  background:var(--glass); border:1px solid var(--glass-brd); color:rgba(255,255,255,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:.28s;
}
.mast-chip:hover{ border-color:var(--pw); color:var(--pw); }
@media(max-width:760px){ .mast-3d{ height:clamp(300px,52vh,440px); border-radius:var(--r); } }

/* ------------------------------------------------------------- LOCATION --- */
.loc{ background:var(--ink); }
.map-shell{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 50px 110px rgba(0,0,0,.6);
  background:#0a0c10;
}
.map{ width:100%; height:clamp(360px,56vh,560px); background:#0a0c10; }
.map-note{ padding:26px; color:var(--tx-dim); font-size:14px; text-align:center; }

/* Fallback basemap: OSM tiles are light, so invert + tone them to match the
   dark treatment. Only applied when CARTO fails (see map.js). */
.map.osm-fallback .leaflet-tile-pane{
  filter:invert(1) hue-rotate(185deg) brightness(.78) contrast(1.08) saturate(.5);
}

/* Leaflet chrome, restyled for the dark brand */
.leaflet-container{ background:#0a0c10; font-family:inherit; }
.leaflet-control-attribution{
  background:rgba(8,10,14,.78) !important; color:rgba(255,255,255,.42) !important;
  font-size:10px !important; backdrop-filter:blur(8px);
}
.leaflet-control-attribution a{ color:rgba(255,255,255,.6) !important; }
.leaflet-bar a{
  background:rgba(14,17,22,.9) !important; color:#fff !important;
  border-color:rgba(255,255,255,.14) !important;
}
.leaflet-bar a:hover{ background:rgba(252,216,0,.18) !important; color:var(--pw) !important; }

/* markers */
.pw-pin{ position:relative; }
.pw-pin .dot{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; display:block;
}
.pw-pin-site .dot{ width:15px; height:15px; background:var(--pw); box-shadow:0 0 16px 3px rgba(252,216,0,.75); }
.pw-pin-site .ring{
  position:absolute; left:50%; top:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px;
  border-radius:50%; border:2px solid var(--pw); animation:pinPulse 2.6s ease-out infinite;
}
@keyframes pinPulse{
  0%{ transform:scale(1); opacity:.85 }
  100%{ transform:scale(3.6); opacity:0 }
}
.pw-pin-lm .dot{ width:8px; height:8px; background:rgba(255,255,255,.82); box-shadow:0 0 0 3px rgba(255,255,255,.12); }
.pw-pin .tag{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  margin-top:-19px; white-space:nowrap;
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
  padding:4px 9px; border-radius:100px; color:#fff;
  background:rgba(8,10,14,.82); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.pw-pin-site .tag{
  margin-top:-24px; color:#000; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:var(--pw); border-color:var(--pw);
}
html[dir="rtl"] .pw-pin-site .tag{ letter-spacing:0; }

/* ?pins mode — unverified pins flagged, plus a coordinate readout */
.pw-pin-lm.unverified .dot{
  background:#FF6B4A; box-shadow:0 0 0 3px rgba(255,107,74,.22);
}
.pw-pin-lm.unverified .tag{
  color:#FF9C86; border-color:rgba(255,107,74,.45); border-style:dashed;
}
.map-hud{
  position:absolute; left:16px; top:16px; z-index:500;
  display:flex; flex-direction:column; gap:3px;
  padding:11px 16px; border-radius:12px;
  background:rgba(8,10,14,.86); border:1px solid var(--glass-brd);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  pointer-events:none;
}
.map-hud b{ font-size:13px; font-weight:700; color:var(--pw); font-variant-numeric:tabular-nums; }
.map-hud span{ font-size:11px; color:var(--tx-dim); }

.map-actions{
  margin-top:22px; display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap;
}
.map-coords{ font-size:12.5px; color:var(--tx-faint); letter-spacing:.06em; }

/* legend — names and real distances, always readable regardless of screen size */
.map-legend{
  list-style:none; margin:18px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:var(--glass-brd); border:1px solid var(--glass-brd);
  border-radius:var(--r); overflow:hidden;
}
.map-legend li{
  background:rgba(12,14,18,.86); padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.map-legend .nm{ font-size:13.5px; color:rgba(255,255,255,.86); }
.map-legend .km{
  font-size:12.5px; font-weight:700; color:var(--pw); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

@media(max-width:600px){
  .map{ height:clamp(320px,52vh,420px); }
  /* Keep the pin names — a map of unlabelled dots tells a broker nothing.
     Shrink them instead, and let the legend below carry the full list. */
  .pw-pin-lm .tag{ font-size:9px; padding:3px 6px; margin-top:-15px; }
  .pw-pin-site .tag{ font-size:9.5px; padding:3px 7px; margin-top:-19px; }
  .map-legend{ grid-template-columns:1fr; }
  .map-legend li{ padding:12px 16px; }
}

/* -------------------------------------------------------- UNITS & PAY --- */
.units{ background:var(--paper); color:var(--tx-dark); }
.units .eyebrow{ color:var(--pw-deep); } .units .eyebrow::before{ background:var(--pw-deep); }
.units .lead{ color:var(--tx-dark-d); }
.unit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
@media(max-width:820px){ .unit-grid{ grid-template-columns:1fr; } }
.unit-card{
  background:#fff; border:1px solid rgba(0,0,0,.075); border-radius:var(--r-lg);
  padding:34px 30px; box-shadow:0 14px 40px rgba(0,0,0,.055);
  transition:transform .45s var(--ease), box-shadow .45s;
}
.unit-card:hover{ box-shadow:0 26px 64px rgba(0,0,0,.1); }
.unit-ic{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:rgba(252,216,0,.16); margin-bottom:22px;
}
.unit-ic svg{ width:21px; height:21px; stroke:var(--pw-deep); }
.unit-card h3{ font-family:'Archivo',sans-serif; font-weight:650; font-size:22px; letter-spacing:-.02em; margin-bottom:6px; }
html[dir="rtl"] .unit-card h3{ font-family:'Cairo',sans-serif; }
.unit-area{ font-size:13.5px; color:var(--tx-dark-d); margin-bottom:24px; }
.unit-area b{ color:var(--tx-dark); font-weight:650; }
.unit-price{ padding-top:20px; border-top:1px solid rgba(0,0,0,.08); }
.unit-price .k{ font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:rgba(20,22,26,.45); margin-bottom:6px; }
html[dir="rtl"] .unit-price .k{ letter-spacing:0; }
.unit-price .v{ font-family:'Archivo',sans-serif; font-weight:700; font-size:26px; letter-spacing:-.03em; }
html[dir="rtl"] .unit-price .v{ font-family:'Cairo',sans-serif; }
.unit-price .v.tba{ font-size:15px; font-weight:600; color:rgba(20,22,26,.42); font-family:'Inter',sans-serif; letter-spacing:0; }

.pay{
  background:var(--tx-dark); color:#fff; border-radius:var(--r-lg);
  padding:clamp(32px,4vw,52px); box-shadow:0 30px 70px rgba(0,0,0,.2);
}
.pay-t{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--pw); margin-bottom:32px; }
html[dir="rtl"] .pay-t{ letter-spacing:0; }
.pay-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
@media(max-width:820px){ .pay-steps{ grid-template-columns:repeat(2,1fr); gap:28px 20px; } }
@media(max-width:440px){ .pay-steps{ grid-template-columns:1fr; } }
.pay-step{ position:relative; padding-inline-start:20px; }
.pay-step::before{
  content:''; position:absolute; inset-inline-start:0; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--pw),rgba(252,216,0,.1));
}
.pay-v{ font-family:'Archivo',sans-serif; font-weight:700; font-size:clamp(30px,3.6vw,44px); line-height:1; color:var(--pw); letter-spacing:-.04em; }
.pay-v small{ font-size:.46em; letter-spacing:0; margin-inline-start:2px; }
.pay-k{ margin-top:10px; font-size:14px; font-weight:650; }
.pay-d{ margin-top:4px; font-size:12.5px; color:rgba(255,255,255,.52); }
.pay-note{ margin-top:34px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.7; }

/* ------------------------------------------------------------ BROKER KIT --- */
.kit{ background:var(--ink); }
.kit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:960px){ .kit-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .kit-grid{ grid-template-columns:1fr; } }
.kit-card{
  position:relative; display:flex; flex-direction:column; padding:30px 28px 26px;
  border-radius:var(--r); background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:transform .45s var(--ease), border-color .35s, background .35s;
  min-height:236px; overflow:hidden;
}
.kit-card:not(.disabled):hover{ border-color:rgba(252,216,0,.4); background:var(--glass-2); }
.kit-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:rgba(252,216,0,.13); border:1px solid rgba(252,216,0,.24); margin-bottom:22px; }
.kit-ic svg{ width:21px; height:21px; stroke:var(--pw); fill:none; stroke-width:1.6; }
.kit-card h3{ font-family:'Archivo',sans-serif; font-weight:650; font-size:19px; letter-spacing:-.015em; margin-bottom:10px; }
html[dir="rtl"] .kit-card h3{ font-family:'Cairo',sans-serif; }
.kit-card p{ font-size:13.5px; color:var(--tx-dim); line-height:1.62; margin-bottom:22px; flex:1; }
.kit-go{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:650; color:var(--pw); }
.kit-go svg{ width:14px; height:14px; transition:transform .3s; }
.kit-card:hover .kit-go svg{ transform:translateX(4px); }
html[dir="rtl"] .kit-card:hover .kit-go svg{ transform:translateX(-4px); }
html[dir="rtl"] .kit-go svg{ transform:scaleX(-1); }
.kit-card.disabled{ opacity:.5; }
.kit-card.disabled .kit-go{ color:var(--tx-faint); }
.kit-card.disabled .kit-go svg{ display:none; }

/* ------------------------------------------------------------ PORTFOLIO --- */
.port{ background:var(--ink-2); }
.port-hero{
  position:relative; border-radius:var(--r-lg); overflow:hidden; margin-bottom:16px;
  min-height:400px; display:flex; align-items:flex-end;
  border:1px solid var(--glass-brd);
}
.port-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.port-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(5,6,8,.94) 12%, rgba(5,6,8,.66) 52%, transparent); }
html[dir="rtl"] .port-hero::after{ background:linear-gradient(260deg, rgba(5,6,8,.94) 12%, rgba(5,6,8,.66) 52%, transparent); }
.port-hero-body{ position:relative; z-index:2; padding:clamp(30px,4vw,52px); max-width:600px; }
.port-kicker{
  display:inline-block; font-size:10px; font-weight:650; letter-spacing:.18em; text-transform:uppercase;
  padding:7px 14px; border-radius:100px; margin-bottom:20px;
  background:rgba(88,192,240,.14); border:1px solid rgba(88,192,240,.42); color:var(--east);
}
html[dir="rtl"] .port-kicker{ letter-spacing:0; }
.port-hero-body h3{ font-family:'Archivo',sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,44px); letter-spacing:-.03em; margin-bottom:8px; }
html[dir="rtl"] .port-hero-body h3{ font-family:'Cairo',sans-serif; }
.port-loc{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--east); margin-bottom:18px; }
html[dir="rtl"] .port-loc{ letter-spacing:0; }
.port-hero-body p{ font-size:14.5px; color:rgba(255,255,255,.74); line-height:1.72; }

.port-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:760px){ .port-pair{ grid-template-columns:1fr; } }
.port-card{
  position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:330px;
  display:flex; align-items:flex-end; border:1px solid var(--glass-brd);
  transition:transform .5s var(--ease);
}
.port-card:hover{ transform:translateY(-7px); }
.port-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.port-card:hover img{ transform:scale(1.06); }
.port-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(transparent 25%, rgba(5,6,8,.9) 78%); }
.port-card-body{ position:relative; z-index:2; padding:30px 28px; }
.port-card-body h3{ font-family:'Archivo',sans-serif; font-weight:650; font-size:26px; letter-spacing:-.02em; margin-bottom:5px; }
html[dir="rtl"] .port-card-body h3{ font-family:'Cairo',sans-serif; }
.port-card-body .loc{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--maliv); margin-bottom:14px; }
html[dir="rtl"] .port-card-body .loc{ letter-spacing:0; }
.port-card-body p{ font-size:13.5px; color:rgba(255,255,255,.7); line-height:1.65; }

/* -------------------------------------------------------------- CONTACT --- */
.contact{ position:relative; overflow:hidden; background:var(--ink); }
.contact-bg{ position:absolute; inset:0; }
.contact-bg img{ width:100%; height:100%; object-fit:cover; opacity:.3; }
.contact-bg::after{ content:''; position:absolute; inset:0; background:radial-gradient(90% 70% at 50% 50%, rgba(7,8,10,.6), var(--ink) 85%); }
.contact .wrap{ position:relative; z-index:2; text-align:center; }
.contact .h2{ margin-bottom:18px; }
.contact-cta{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
.socials{ display:flex; gap:11px; justify-content:center; margin-top:44px; }
.soc{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--glass-brd); transition:.3s;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.soc:hover{ border-color:var(--pw); background:rgba(252,216,0,.12); transform:translateY(-3px); }
.soc svg{ width:18px; height:18px; fill:rgba(255,255,255,.8); }
.soc:hover svg{ fill:var(--pw); }

/* --------------------------------------------------------------- FOOTER --- */
.foot{ background:#040507; padding:52px 0 42px; border-top:1px solid rgba(255,255,255,.07); }
.foot-in{ display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
.foot-logos{ display:flex; align-items:center; gap:26px; }
.foot-logos img{ height:30px; width:auto; filter:brightness(0) invert(1); opacity:.75; }
.foot-tag{ font-size:13px; color:var(--tx-faint); }
.foot-legal{ margin-top:34px; padding-top:24px; border-top:1px solid rgba(255,255,255,.06); font-size:11.5px; color:rgba(255,255,255,.3); line-height:1.7; }

/* --------------------------------------------------------- PRESS STATE ---
   apple-design §1: feedback belongs on pointer-DOWN, not on release. Waiting
   for the click to acknowledge a tap reads as dead, especially on a phone.
   Fast in, slower out, so the press feels immediate and the release relaxes. */
.btn,.kit-card,.cat-card,.unit-card,.mast-chip,.soc,.nav-cta,.lang-btn,.material-button{
  transition:transform .34s var(--ease), background .34s, border-color .34s,
             box-shadow .34s, color .25s, opacity .25s;
  -webkit-tap-highlight-color:transparent;
}
.btn-ghost:active,.lang-btn:active,.mast-chip:active,.soc:active{
  transform:scale(.965); transition-duration:90ms;
}

/* keyboard parity — never ship a press state without a focus state */
.btn:focus-visible,.nav-cta:focus-visible,.lang-btn:focus-visible,
.kit-card:focus-visible,.soc:focus-visible,.map-shell a:focus-visible{
  outline:2px solid var(--pw); outline-offset:3px;
}

/* ------------------------------------------------------- SCROLL REVEAL --- */
.rv{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.07s } .rv-d2{ transition-delay:.14s } .rv-d3{ transition-delay:.21s }
.rv-d4{ transition-delay:.28s } .rv-d5{ transition-delay:.35s } .rv-d6{ transition-delay:.42s }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* =============================================================== THE OFFER ===
   Moved up the page: brokers need the commercial terms early, not at position 9.
   Numbers carry the section — big, tabular, and measured on one unit so they
   compare directly. Type follows apple-design §15: negative tracking at display
   size, positive on the small-caps labels.
   ============================================================================ */
.offer-sec{ background:linear-gradient(180deg,var(--ink) 0%,var(--ink-3) 48%,var(--ink) 100%); }
.off-title strong{ display:block; color:var(--pw); font-weight:700; }

/* --- three USP cards --- */
.usp{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:34px; }
@media(max-width:760px){ .usp{ grid-template-columns:1fr; } }
.usp-c{
  border-radius:var(--r-lg); padding:34px 32px;
  background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  transition:transform .5s var(--ease), border-color .4s;
}
.usp-c:hover{ border-color:rgba(252,216,0,.4); }
.usp-c.gold{ background:var(--pw); border-color:var(--pw); }
.usp-c .k{
  display:block; font-size:11px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--tx-faint);
}
.usp-c.gold .k{ color:rgba(0,0,0,.58); }
html[dir="rtl"] .usp-c .k{ letter-spacing:0; }
.usp-c b{
  display:block; margin:14px 0 12px; font-family:'Archivo',sans-serif; font-weight:700;
  font-size:clamp(56px,7vw,86px); line-height:.9; letter-spacing:-.045em; color:var(--pw);
  font-variant-numeric:tabular-nums;
}
html[dir="rtl"] .usp-c b{ font-family:'Cairo',sans-serif; }
.usp-c.gold b{ color:#000; }
.usp-c .l{ display:block; font-size:15.5px; font-weight:650; color:#fff; }
.usp-c.gold .l{ color:#000; }
.usp-c .n{ display:block; margin-top:5px; font-size:13.5px; color:var(--tx-dim); }
.usp-c.gold .n{ color:rgba(0,0,0,.66); }

/* --- the six plans --- */
.plans{ border:1px solid var(--glass-brd); border-radius:var(--r-lg); overflow:hidden; }
.plans-head,.plan-row{
  display:grid; grid-template-columns:1fr 200px; align-items:center;
  gap:16px; padding:16px 26px;
}
.plans-head{
  background:rgba(255,255,255,.035); font-size:10.5px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tx-faint);
}
.plans-head span:not(:first-child),.plan-row .p-b{ text-align:right; }
html[dir="rtl"] .plans-head{ letter-spacing:0; }
.plan-row{
  background:rgba(12,14,18,.6); border-top:1px solid var(--glass-brd);
  transition:background .3s;
}
.plan-row:hover{ background:rgba(255,255,255,.05); }
.plan-row.best{ background:var(--pw); }
.plan-row.best:hover{ background:var(--pw); }
.plan-row.value{ background:rgba(252,216,0,.10); }
.p-l b{ display:block; font-size:16.5px; font-weight:750; letter-spacing:-.012em; color:#fff; }
.p-l i{ display:block; margin-top:4px; font-style:normal; font-size:12.5px; color:var(--tx-faint); }
.plan-row.best .p-l b{ color:#000; }
.plan-row.best .p-l i{ color:rgba(0,0,0,.62); }
.p-b{ font-family:'Archivo',sans-serif; font-weight:700; font-size:16px;
      letter-spacing:-.01em; color:var(--pw); font-variant-numeric:tabular-nums; }
html[dir="rtl"] .p-b{ font-family:'Cairo',sans-serif; }
.plan-row.best .p-b{ color:#000; }
.tagx{
  display:inline-block; margin-inline-start:10px; font-size:9.5px; font-weight:900;
  letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:6px;
  background:rgba(0,0,0,.16); color:#000; vertical-align:2px;
}
.tagx.alt{ background:rgba(252,216,0,.22); color:var(--pw); }
html[dir="rtl"] .tagx{ letter-spacing:0; }
@media(max-width:760px){
  .plans-head{ display:none; }
  .plan-row{ grid-template-columns:1fr auto; gap:6px 14px; padding:18px 20px; }
  .plan-row .p-l{ grid-column:1 / -1; }
  .plan-row .p-b{ text-align:right; font-size:15px; }
}
.off-note{ margin-top:20px; font-size:12.5px; line-height:1.65; color:var(--tx-faint); }

/* ------------------------------------------------------------ HERO BAND ---
   The launch terms, pinned under the hero. Present on first paint without
   competing with the project name above it. */
.hero-band{
  position:absolute; left:0; right:0; bottom:0; z-index:7;
  background:var(--pw); color:#000; text-align:center;
  padding:15px 20px; font-size:clamp(13px,1.5vw,17px); font-weight:800;
  letter-spacing:-.01em;
}
@media(max-width:640px){ .hero-band{ font-size:12.5px; padding:13px 14px; } }

/* -------------------------------------------------------- STICKY OFFER ---
   Appears once the hero scrolls away, so the terms follow the broker down the
   page. Hidden again at the footer to avoid covering the contact details. */
.sticky-offer{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(160%);
  z-index:880; display:flex; align-items:center; gap:16px;
  width:calc(100% - 24px); max-width:620px;
  padding:12px 12px 12px 22px; border-radius:100px;
  background:rgba(10,12,16,.86); border:1px solid rgba(252,216,0,.30);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  transition:transform .55s var(--ease-out), opacity .4s;
  opacity:0;
}
.sticky-offer.show{ transform:translateX(-50%) translateY(0); opacity:1; }
.so-t{ flex:1; font-size:13px; font-weight:750; color:#fff; letter-spacing:-.01em; }
.so-c{
  flex:none; background:var(--pw); color:#000; font-size:12.5px; font-weight:800;
  padding:10px 18px; border-radius:100px; white-space:nowrap; transition:.3s var(--ease);
}
.so-c:active{ transform:scale(.96); }
@media(max-width:520px){ .so-t{ font-size:11.5px; } .so-c{ padding:9px 14px; font-size:11.5px; } }
@media (prefers-reduced-motion:reduce){ .sticky-offer{ transition:opacity .2s; } }

/* ============================================================== MOTION ===
   Companion styles for assets/js/motion.js. Compositor-only properties.
   ======================================================================== */

/* --- scroll progress --- */
.scroll-prog{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:1000;
  background:var(--pw); transform:scaleX(0); transform-origin:0 50%;
  will-change:transform; pointer-events:none;
}
html[dir="rtl"] .scroll-prog{ transform-origin:100% 50%; }

/* --- masked line reveal --- */
.lr-mask{ display:block; overflow:hidden; padding-bottom:.06em; }
.lr-move{
  display:block; transform:translateY(105%);
  transition:transform 1s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.lr-move.in{ transform:translateY(0); }

/* --- pointer tilt + magnetic: JS supplies --rx/--ry/--mx/--my, CSS composes.
   That way the hover lift and the :active press still apply instead of being
   clobbered by an inline transform. --- */
.usp-c,.cat-card,.kit-card,.unit-card{
  transform-style:preserve-3d; will-change:transform;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1));
}
.usp-c:hover,.cat-card:hover,.unit-card:hover,.kit-card:not(.disabled):hover{ --ty:-7px; }
.usp-c:active,.cat-card:active,.unit-card:active,.kit-card:not(.disabled):active{ --sc:.988; --ty:-2px; }

.btn-primary,.nav-cta,.so-c{
  transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--sc,1));
}
.btn-primary:active,.nav-cta:active,.so-c:active{ --sc:.965; }

/* --- brand pattern drift --- */
/* Sections carrying a pattern must clip it, or the bleed overlaps the next
   section (and body{overflow-x:hidden} only masks the symptom). */
.offer-sec,.kit,.units{ overflow:hidden; }

/* The brand contour artwork, shipped as NEUTRAL WHITE so one asset set covers
   both treatments:
     · dark sections — white at low opacity, screen blend -> reads grey
     · light section — inverted to black, multiply blend -> reads charcoal
   Keeping the texture neutral also stops it competing with the yellow, which
   now only ever means "the offer". */
.pat{
  position:absolute; pointer-events:none; z-index:0;
  opacity:.16; mix-blend-mode:screen; will-change:transform;
}
.pat img{ width:100%; height:auto; display:block; }
/* .units and .dev are LIGHT sections — screen on near-white renders as nothing.
   Invert the white artwork to black, then multiply. */
.units .pat,.dev .pat{ filter:invert(1); mix-blend-mode:multiply; opacity:.14; }
.pat-tr{ top:-8%;  inset-inline-end:-10%; width:min(760px,58vw); }
.pat-bl{ bottom:-12%; inset-inline-start:-12%; width:min(820px,64vw); }
.pat-c { top:12%;  inset-inline-start:38%; width:min(520px,44vw); opacity:.12; }
.offer-sec .wrap,.sells .wrap,.kit .wrap,.port .wrap,.units .wrap{ position:relative; z-index:2; }

/* --- image wipe --- */
.wipe{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s cubic-bezier(.16,1,.3,1); }
.wipe.in{ clip-path:inset(0 0 0 0); }

/* --- hero slogan: two lines, second in brand yellow --- */
.hero-title .ln{ display:block; }
.hero-title .l2{ color:var(--pw); font-weight:300; }

@media (prefers-reduced-motion:reduce){
  .lr-move{ transform:none; transition:opacity .3s; }
  .wipe{ clip-path:none; transition:opacity .3s; }
  .pat{ transform:none !important; }
  .scroll-prog{ display:none; }
}

/* ================================================= "PATHS YOU TAKE" ===
   Hand-authored SVG. Vector, so it can never pixelate, and drawable — which
   a raster brush fundamentally cannot be.
   ==================================================================== */

/* --- 1. the thread: a path drawn in proportion to scroll --- */
.thread{
  position:fixed; top:0; bottom:0; inset-inline-end:0;
  width:clamp(46px,5vw,86px); z-index:70; pointer-events:none;
}
.thread-svg{ width:100%; height:100%; display:block; overflow:visible; }
.thread-rail{ fill:none; stroke:rgba(255,255,255,.09); stroke-width:1.25; }
.thread-line{
  fill:none; stroke:var(--pw); stroke-width:1.75; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(252,216,0,.45));
}
.thread-dot{
  fill:var(--pw); filter:drop-shadow(0 0 7px rgba(252,216,0,.85));
  transition:opacity .3s;
}
/* the thread lives on the trailing edge, so it mirrors in RTL automatically
   via inset-inline-end — but the drawing needs flipping too */
html[dir="rtl"] .thread-svg{ transform:scaleX(-1); }
@media(max-width:900px){ .thread{ width:30px; } .thread-line{ stroke-width:1.5; } }
/* Below this the gutter is only ~20px and the thread would run through the
   copy. The scroll-progress hairline already answers "how far am I" on a
   phone, so the thread stands down rather than competing with the text. */
@media(max-width:600px){ .thread{ display:none; } }

/* --- 2. contour rings behind the offer numbers --- */
.usp-c{ position:relative; overflow:hidden; }
.ring-svg{
  position:absolute; top:-16px; inset-inline-end:-18px;
  width:150px; height:150px; pointer-events:none; z-index:0;
}
.ring-p{
  fill:none; stroke:var(--pw); stroke-width:1.1; opacity:.34;
  transition:stroke-dashoffset 1.25s cubic-bezier(.16,1,.3,1);
}
.usp-c.gold .ring-p{ stroke:#000; opacity:.20; }
.usp-c > *:not(.ring-svg){ position:relative; z-index:1; }

/* --- 3. the hero stroke: the real brand brush, masked and painted yellow ---
   Using the PNG as a mask (not an <img>) means the colour is still var(--pw),
   so it follows the brand token instead of being baked into the file. The clip
   wipe keeps it a *drawn* gesture rather than an image that simply appears. */
.hero-stroke{
  width:min(520px,74vw); aspect-ratio:20/1;      /* matches the trimmed brush */
  margin:18px auto 6px; pointer-events:none;
  background:var(--pw);
  -webkit-mask:url('../img/brush-hero.webp') center/100% 100% no-repeat;
          mask:url('../img/brush-hero.webp') center/100% 100% no-repeat;
  filter:drop-shadow(0 0 12px rgba(252,216,0,.34));
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.35s cubic-bezier(.16,1,.3,1);
}
.hero-stroke.in{ clip-path:inset(0 0 0 0); }
/* Arabic reads right to left, so the brush must be drawn that way too */
html[dir="rtl"] .hero-stroke{ clip-path:inset(0 0 0 100%); }
html[dir="rtl"] .hero-stroke.in{ clip-path:inset(0 0 0 0); }

@media (prefers-reduced-motion:reduce){
  .thread{ display:none; }
  .ring-p{ transition:none; }
  .hero-stroke{ clip-path:none !important; transition:none; }
}