/* ============================================================
   HAAS GROT DISP — licensed brand typeface.
   Place the licensed .woff2 files in assets/fonts/ with these names
   and they take over automatically. Until then, Archivo (Google Fonts)
   renders as a faithful grotesk stand-in. Do NOT ship unlicensed.
   ============================================================ */
/* @font-face{font-family:"Haas Grot Disp";src:url("../fonts/HaasGrotDisp-Roman.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} */
/* @font-face{font-family:"Haas Grot Disp";src:url("../fonts/HaasGrotDisp-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} */
/* @font-face{font-family:"Haas Grot Disp";src:url("../fonts/HaasGrotDisp-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} */

/* ============================================================
   ELITE TOWN REAL ESTATE — Design System v1.0
   Elite Navy / Soft Grey / Value Gold · Haas Grot Disp (Archivo interim) + Amiri
   Built RTL-safe with CSS logical properties.
   ============================================================ */

:root{
  /* ===== Surfaces (deepened navy with spatial depth) ===== */
  --navy:#0C2340;          /* brand navy — base canvas */
  --navy-2:#102C4F;        /* raised panels / cards */
  --navy-3:#16375F;        /* elevated / hover */
  --navy-deep:#071A2F;     /* deepest — vignettes, footer, edges */

  /* ===== Text — approved porcelain, the exact white of the ET monogram ===== */
  --cream:#F3EEE3;
  --cream-soft:rgba(243,238,227,.74);
  --cream-dim:rgba(243,238,227,.70);

  /* ===== Gold — champagne / brass MATERIAL (not a flat swatch) ===== */
  --gold:#D6B25E;          /* primary refined brass-gold for text/accents */
  --gold-deep:#9C7A2E;
  --gold-hi:#F4DFA0;       /* champagne highlight */
  --gold-soft:rgba(214,178,94,.36);
  --gold-faint:rgba(214,178,94,.17);
  --gold-ghost:rgba(214,178,94,.07);
  --grad-gold:linear-gradient(135deg,#F6E2A6 0%,#D6B25E 46%,#9C7A2E 100%);
  --grad-gold-sheen:linear-gradient(115deg,transparent 0%,rgba(246,226,166,.0) 38%,rgba(246,226,166,.55) 50%,rgba(246,226,166,0) 62%,transparent 100%);

  /* ===== Layout ===== */
  --maxw:1240px;
  --nav-h:78px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-lux:cubic-bezier(.16,1,.3,1);

  /* ===== Type — heritage serif display + clean grotesk UI + mono labels =====
     Fraunces  = the heritage display voice (statements, titles, big numbers).
     Hanken Grotesk = calm UI/body. Space Mono = technical/map labels.
     Arabic: Amiri carries the serif display register; IBM Plex Sans Arabic the UI.
     (The brand's licensed Haas Grot may still be dropped in for UI later.) */
  --ff-display:"Fraunces","Amiri",Georgia,"Times New Roman",serif;
  --ff-body:"Hanken Grotesk","Neue Haas Grotesk Display Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ff-mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --ff-ar-display:"Amiri","Scheherazade New",serif;
  --ff-ar-body:"IBM Plex Sans Arabic","Hanken Grotesk","Geeza Pro",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
html:focus-within{scroll-behavior:smooth;}

body{
  background:var(--navy);
  color:var(--cream);
  font-family:var(--ff-body);
  font-weight:400;
  font-size:16.5px;
  line-height:1.75;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.ar{
  font-family:var(--ff-ar-body);
  font-weight:400;
  font-size:17.5px;
  line-height:2.0;
  letter-spacing:0;
}

/* Heritage serif display voice */
.display{font-family:var(--ff-display);font-weight:600;letter-spacing:-.012em;}
body.ar .display{font-family:var(--ff-ar-display);font-weight:700;letter-spacing:0;}

a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}
ul{list-style:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}

::selection{background:var(--gold);color:var(--navy);}

/* ---------- shared layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:28px;}
.section{padding-block:108px;}
.section--tight{padding-block:72px;}
.section--flush{padding-block:0;}

.kicker{
  display:flex;align-items:center;gap:14px;
  font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin-block-end:26px;font-weight:500;font-family:var(--ff-body),sans-serif;
}
body.ar .kicker{letter-spacing:.1em;font-size:14px;font-family:"Amiri",serif;font-weight:700;}
.kicker::before{content:"";display:block;inline-size:34px;block-size:1px;background:var(--gold-soft);}

h1,h2,h3{font-family:var(--ff-display);font-weight:600;line-height:1.1;color:var(--cream);letter-spacing:-.018em;}
body.ar h1,body.ar h2,body.ar h3{font-family:var(--ff-ar-display);font-weight:700;line-height:1.45;letter-spacing:0;}
.h-xl{font-size:clamp(38px,5.4vw,68px);line-height:1.04;letter-spacing:-.024em;}
.h-lg{font-size:clamp(29px,3.9vw,46px);letter-spacing:-.02em;}
.h-md{font-size:clamp(22px,2.6vw,29px);letter-spacing:-.012em;}
.h-sm{font-size:21px;letter-spacing:-.01em;}
body.ar .h-xl,body.ar .h-lg,body.ar .h-md,body.ar .h-sm{letter-spacing:0;line-height:1.4;}

.lede{font-family:var(--ff-body);font-size:clamp(16px,1.5vw,18px);line-height:1.62;color:var(--cream-soft);max-inline-size:62ch;letter-spacing:0;}
body.ar .lede{font-family:var(--ff-ar-body);}
.muted{color:var(--cream-dim);}
.gold{color:var(--gold);}

.hairline{border:none;block-size:1px;background:linear-gradient(to right,transparent,var(--gold-faint) 18%,var(--gold-faint) 82%,transparent);}

/* ---------- navigation ---------- */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:90;
  background:rgba(12,35,64,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-block-end:1px solid var(--gold-faint);
  transition:background .35s var(--ease);
}
.nav__in{
  max-width:var(--maxw);margin-inline:auto;padding:0 28px;
  block-size:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:22px;
}
.nav__brand{
  font-family:var(--ff-display),serif;font-weight:600;font-size:20px;
  letter-spacing:.26em;color:var(--gold);white-space:nowrap;
}
body.ar .nav__brand{font-family:"Amiri",serif;letter-spacing:.05em;font-size:22px;}
.nav__links{display:flex;align-items:center;gap:32px;}
.nav__links a{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-dim);transition:color .25s;position:relative;padding-block:6px;
  font-family:var(--ff-body),sans-serif;
}
body.ar .nav__links a{letter-spacing:.04em;text-transform:none;font-size:15.5px;font-family:"Amiri",serif;}
.nav__links a::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  inline-size:0;block-size:1px;background:var(--gold);transition:inline-size .3s var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{color:var(--cream);}
.nav__links a:hover::after,.nav__links a.is-active::after{inline-size:100%;}

.lang-btn{
  border:1px solid var(--gold-soft);color:var(--gold);
  font-size:12px;letter-spacing:.12em;padding:8px 19px;border-radius:99px;
  transition:all .3s var(--ease);font-family:var(--ff-body),sans-serif;
  white-space:nowrap;
}
body.ar .lang-btn{font-family:"Amiri",serif;font-size:14px;letter-spacing:.02em;}
.lang-btn:hover{background:var(--gold);color:var(--navy);border-color:var(--gold);}

.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px;}
.nav__burger span{display:block;inline-size:22px;block-size:1.5px;background:var(--gold);transition:transform .3s var(--ease),opacity .3s;}

/* ---------- hero ---------- */
.hero{
  min-block-size:100svh;display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding-block-start:var(--nav-h);
}
.hero--page{min-block-size:62svh;}
.hero__art{
  position:absolute;inset:0;pointer-events:none;opacity:.85;
}
.hero__art svg{position:absolute;inset-inline-end:-4%;inset-block-end:-2%;inline-size:min(62vw,860px);block-size:auto;}
.hero__content{position:relative;z-index:2;max-inline-size:880px;}
.hero__statement{margin-block:24px 26px;}
.hero__brandline{
  font-family:var(--ff-display),serif;font-style:italic;font-weight:500;
  color:var(--gold);font-size:clamp(17px,1.9vw,21px);letter-spacing:.04em;
  margin-block-start:34px;
}
body.ar .hero__brandline{font-family:"Amiri",serif;font-style:normal;}

.hero--img{align-items:flex-end;padding-block-end:0;}
.hero--img .hero__bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
}
.hero--img .hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--navy) 4%,rgba(12,35,64,.62) 42%,rgba(12,35,64,.28) 100%);
}
.hero--img .hero__content{padding-block-end:88px;}

/* video hero (Private Palace) — sits under the gradient overlay; poster bg is the fallback */
.hero__video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;}

.scroll-cue{
  position:absolute;inset-block-end:34px;inset-inline-start:28px;z-index:3;
  display:flex;align-items:center;gap:12px;
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-dim);
}
.scroll-cue::after{content:"";display:block;inline-size:46px;block-size:1px;background:var(--gold-soft);animation:cue 2.6s var(--ease) infinite;}
@keyframes cue{0%,100%{transform:scaleX(.4);opacity:.4}50%{transform:scaleX(1);opacity:1}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid var(--gold-soft);color:var(--gold);
  padding:15px 34px;border-radius:99px;
  font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
  transition:all .35s var(--ease);font-family:var(--ff-body),sans-serif;font-weight:500;
}
body.ar .btn{letter-spacing:.04em;text-transform:none;font-size:15.5px;font-family:"Amiri",serif;font-weight:700;}
.btn:hover{background:var(--gold);color:var(--navy);border-color:var(--gold);transform:translateY(-1px);}
.btn .arrow{transition:transform .35s var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}
[dir="rtl"] .btn .arrow{transform:scaleX(-1);}
[dir="rtl"] .btn:hover .arrow{transform:scaleX(-1) translateX(4px);}
.btn--ghost{border-color:rgba(243,238,227,.22);color:var(--cream-soft);}
.btn--ghost:hover{border-color:var(--gold);background:transparent;color:var(--gold);transform:none;}

/* ---------- stats ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-block:1px solid var(--gold-faint);
}
.stat{
  padding:46px 30px;position:relative;
}
.stat + .stat::before{
  content:"";position:absolute;inset-inline-start:0;inset-block:30px;
  inline-size:1px;background:var(--gold-faint);
}
.stat__num{
  font-family:var(--ff-display),serif;font-weight:600;
  font-size:clamp(30px,3vw,43px);color:var(--gold);line-height:1.05;
  font-variant-numeric:lining-nums;
}
body.ar .stat__num{font-family:"Amiri",serif;}
.stat__label{margin-block-start:10px;font-size:13.5px;color:var(--cream-dim);line-height:1.6;}
body.ar .stat__label{font-size:15px;}

/* ---------- project cards ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.card{
  position:relative;display:block;
  background:linear-gradient(160deg,var(--navy-2),var(--navy));
  border:1px solid var(--gold-faint);
  padding:46px 42px 40px;
  overflow:hidden;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.card:hover{border-color:var(--gold-soft);transform:translateY(-4px);}
.card__motif{
  position:absolute;inset-block-start:26px;inset-inline-end:26px;
  inline-size:110px;opacity:.5;transition:opacity .4s;
}
.card:hover .card__motif{opacity:.95;}
.card__status{
  display:inline-block;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-faint);border-radius:99px;
  padding:6px 14px;margin-block-end:26px;font-family:var(--ff-body),sans-serif;
}
body.ar .card__status{letter-spacing:.06em;font-size:13px;font-family:"Amiri",serif;}
.card__title{font-size:clamp(24px,2.4vw,31px);margin-block-end:6px;max-inline-size:78%;}
.card__loc{font-size:13.5px;color:var(--cream-dim);margin-block-end:30px;}
body.ar .card__loc{font-size:15px;}
.card__stats{display:flex;gap:44px;border-block-start:1px solid var(--gold-faint);padding-block-start:26px;margin-block-start:auto;}
.card__stat b{
  display:block;font-family:var(--ff-display),serif;font-weight:600;
  font-size:27px;color:var(--gold);line-height:1.1;
}
body.ar .card__stat b{font-family:"Amiri",serif;}
.card__stat span{font-size:12px;color:var(--cream-dim);letter-spacing:.04em;}
body.ar .card__stat span{font-size:14px;}
.card__go{
  margin-block-start:30px;display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--cream-soft);
  font-family:var(--ff-body),sans-serif;
}
body.ar .card__go{letter-spacing:.05em;font-size:14px;font-family:"Amiri",serif;}
.card__go .arrow{color:var(--gold);transition:transform .3s var(--ease);}
.card:hover .card__go .arrow{transform:translateX(5px);}
[dir="rtl"] .card__go .arrow{transform:scaleX(-1);}
[dir="rtl"] .card:hover .card__go .arrow{transform:scaleX(-1) translateX(5px);}

/* ---------- pillars (what we do / values) ---------- */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:0;border-block-start:1px solid var(--gold-faint);}
.pillar{
  padding:52px 46px;border-block-end:1px solid var(--gold-faint);position:relative;
}
.pillar:nth-child(odd)::after{
  content:"";position:absolute;inset-inline-end:0;inset-block:36px;inline-size:1px;background:var(--gold-faint);
}
.pillar__num{
  font-family:var(--ff-display),serif;font-size:15px;color:var(--gold);
  letter-spacing:.18em;margin-block-end:18px;display:block;
}
.pillar h3{font-size:23px;margin-block-end:14px;}
.pillar p{color:var(--cream-soft);font-size:15.5px;}
body.ar .pillar p{font-size:16.5px;}

/* ---------- media bands ---------- */
.band{position:relative;block-size:min(64vh,560px);overflow:hidden;}
.band img{inline-size:100%;block-size:100%;object-fit:cover;}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,35,64,.62),rgba(12,35,64,.18) 42%,transparent 60%,rgba(12,35,64,.22));pointer-events:none;}
.band__caption{
  position:absolute;inset-block-end:26px;inset-inline-start:28px;z-index:2;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--cream-soft);
  text-shadow:0 1px 14px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.6);
}
body.ar .band__caption{letter-spacing:.05em;font-size:13.5px;}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.gallery figure{position:relative;overflow:hidden;background:var(--navy-2);}
.gallery img{aspect-ratio:4/5;object-fit:cover;inline-size:100%;transition:transform .8s var(--ease);}
.gallery figure:hover img{transform:scale(1.035);}
.gallery figure.wide{grid-column:span 3;}
.gallery figure.wide img{aspect-ratio:21/8;}

/* ---------- detail fact list ---------- */
.facts{border-block-start:1px solid var(--gold-faint);}
.facts li{
  display:grid;grid-template-columns:240px 1fr;gap:30px;
  padding:22px 4px;border-block-end:1px solid var(--gold-faint);
  font-size:15.5px;
}
body.ar .facts li{font-size:16.5px;}
.facts b{font-weight:500;color:var(--gold);font-family:var(--ff-body),sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;padding-block-start:3px;}
body.ar .facts b{font-family:"Amiri",serif;font-size:15.5px;letter-spacing:.03em;font-weight:700;}
.facts span{color:var(--cream-soft);}

/* ---------- split layouts ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.split--text{grid-template-columns:0.92fr 1.08fr;align-items:start;}

/* ---------- partner band ---------- */
.partner{
  text-align:center;padding-block:84px;
  border-block:1px solid var(--gold-faint);
  background:var(--gold-ghost);
}
.partner__name{
  font-family:var(--ff-display),serif;font-weight:600;font-size:clamp(26px,3vw,38px);
  color:var(--cream);letter-spacing:.1em;margin-block:14px 8px;
}
body.ar .partner__name{font-family:"Amiri",serif;letter-spacing:.02em;}

/* ---------- quote / manifesto strip ---------- */
.manifesto{
  text-align:center;max-inline-size:880px;margin-inline:auto;
}
.manifesto p{
  font-family:var(--ff-display),serif;font-weight:500;
  font-size:clamp(21px,2.7vw,32px);line-height:1.45;color:var(--cream);
}
body.ar .manifesto p{font-family:"Amiri",serif;line-height:1.8;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:80px;align-items:start;}
.field{margin-block-end:26px;}
.field label{
  display:block;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-block-end:10px;font-family:var(--ff-body),sans-serif;
}
body.ar .field label{letter-spacing:.05em;font-size:13.5px;font-family:"Amiri",serif;}
.field input,.field textarea{
  inline-size:100%;background:transparent;border:none;
  border-block-end:1px solid rgba(243,238,227,.22);
  color:var(--cream);font:inherit;padding-block:12px;
  transition:border-color .3s;border-radius:0;
}
.field input:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);}
.field textarea{min-block-size:120px;resize:vertical;}
.form-note{font-size:13px;color:var(--cream-dim);margin-block-start:18px;}
body.ar .form-note{font-size:14.5px;}
.form-status{margin-block-start:20px;font-size:14.5px;color:var(--gold);min-block-size:24px;}

/* ---------- footer ---------- */
.footer{
  border-block-start:1px solid var(--gold-faint);
  padding-block:72px 44px;background:var(--navy-2);
}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;margin-block-end:64px;}
.footer__brand{
  font-family:var(--ff-display),serif;font-weight:600;font-size:22px;
  letter-spacing:.24em;color:var(--gold);margin-block-end:18px;
}
body.ar .footer__brand{font-family:"Amiri",serif;letter-spacing:.04em;}
.footer__tag{font-family:var(--ff-display),serif;font-style:italic;color:var(--cream-dim);font-size:17px;max-inline-size:34ch;}
body.ar .footer__tag{font-family:"Amiri",serif;font-style:normal;}
.footer h4{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  margin-block-end:22px;font-family:var(--ff-body),sans-serif;font-weight:500;
}
body.ar .footer h4{letter-spacing:.06em;font-size:13.5px;font-family:"Amiri",serif;}
.footer li{margin-block-end:12px;}
.footer li a{color:var(--cream-dim);font-size:14px;transition:color .25s;}
body.ar .footer li a{font-size:15.5px;}
.footer li a:hover{color:var(--gold);}
.footer__base{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-block-start:1px solid var(--gold-faint);padding-block-start:30px;
  font-size:12.5px;color:var(--cream-dim);
}
body.ar .footer__base{font-size:14px;}

/* ---------- reveal animations ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal-d1{transition-delay:.12s;}
.reveal-d2{transition-delay:.24s;}
.reveal-d3{transition-delay:.36s;}

.motif path,.motif line,.motif rect,.motif circle,.motif polyline{
  fill:none;stroke:var(--gold);stroke-width:1.4;vector-effect:non-scaling-stroke;
}
.motif .thin{stroke-width:.8;opacity:.55;}
.motif .dash{stroke-dasharray:3 5;opacity:.6;}
.motif.draw path,.motif.draw line,.motif.draw rect,.motif.draw circle,.motif.draw polyline{
  stroke-dasharray:1200;stroke-dashoffset:1200;
}
.motif.draw.in path,.motif.draw.in line,.motif.draw.in rect,.motif.draw.in circle,.motif.draw.in polyline{
  animation:draw 2.8s var(--ease) forwards;
}
@keyframes draw{to{stroke-dashoffset:0;}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .motif.draw path,.motif.draw line,.motif.draw rect,.motif.draw circle,.motif.draw polyline{stroke-dasharray:none;stroke-dashoffset:0;animation:none;}
  .scroll-cue::after{animation:none;}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .split,.split--text{grid-template-columns:1fr;gap:48px;}
  .contact-grid{grid-template-columns:1fr;gap:56px;}
  .stats{grid-template-columns:1fr 1fr;}
  .stat:nth-child(3)::before{display:none;}
  .stat{padding:36px 24px;border-block-end:1px solid var(--gold-faint);}
  .stat:nth-child(3),.stat:nth-child(4){border-block-end:none;}
}
@media (max-width:860px){
  .section{padding-block:80px;}
  .cards{grid-template-columns:1fr;}
  .pillars{grid-template-columns:1fr;}
  .pillar:nth-child(odd)::after{display:none;}
  .pillar{padding:40px 6px;}
  .gallery{grid-template-columns:1fr 1fr;}
  .gallery figure.wide{grid-column:span 2;}
  .facts li{grid-template-columns:1fr;gap:8px;padding-block:18px;}
  .footer__grid{grid-template-columns:1fr;gap:40px;}
  .hero:not(.hero--img):not(.hero--page){align-items:flex-start;}
  .hero:not(.hero--img):not(.hero--page) .hero__content{padding-block-start:10px;}
  .hero:not(.hero--img):not(.hero--page) .btn{background:var(--navy);}
  .hero__art svg{inline-size:72vw;opacity:.3;inset-inline-end:-14%;inset-block-end:-2%;}
  .scroll-cue{display:none;}
  .hero--img .hero__content{padding-block-end:64px;}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr;}
  .hero__art svg{inline-size:62vw;opacity:.22;}
  .stat::before{display:none !important;}
  .stat{border-block-end:1px solid var(--gold-faint) !important;}
  .stat:last-child{border-block-end:none !important;}
  .gallery{grid-template-columns:1fr;}
  .gallery figure.wide{grid-column:span 1;}
  .card{padding:36px 28px 32px;}
  .card__stats{gap:30px;}
}

/* ---------- ecosystem / partner grid ---------- */
.partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-inline-size:920px;margin-inline:auto;align-items:start;}
.partner-grid > div + div{border-inline-start:1px solid var(--gold-faint);padding-inline-start:48px;}
@media (max-width:760px){
  .partner-grid{grid-template-columns:1fr;gap:40px;}
  .partner-grid > div + div{border-inline-start:none;padding-inline-start:0;border-block-start:1px solid var(--gold-faint);padding-block-start:40px;}
}

/* ---- Partner / anchor tenant logos (official files) ---- */
.partner__logo{display:block;margin-inline:auto;margin-block-end:18px;}
.partner__logo--samaco{inline-size:184px;max-inline-size:64%;block-size:auto;}
.partner__logo--lamborghini{inline-size:118px;max-inline-size:46%;block-size:auto;}
.partner__logo--alnahla{inline-size:112px;max-inline-size:40%;block-size:auto;}
/* Homepage side-by-side band: optically center Samaco against the taller Al Nahla stack so both paragraphs start on the same line */
@media (min-width:761px){
  .partner-grid .partner__logo--samaco{margin-block:41px 59px;}
}

/* ---------- brand lockup (official Cyan mark + live wordmark) ----------
   Mark = official "e" (white + gold corner), sized independently.
   Wordmark = live text in brand grotesk (Archivo now, auto-upgrades to Haas).
   This lets the wordmark scale separately from the mark, and keeps the
   letterforms perfect at any size (no extraction artefacts). */
.nav__brand{display:inline-flex;align-items:center;gap:11px;font-size:0;text-decoration:none;}
.nav__mark{block-size:38px;inline-size:auto;display:block;}
.nav__wordmark{
  display:flex;flex-direction:column;justify-content:center;
  font-family:var(--ff-display),sans-serif;font-weight:700;
  font-size:14px;line-height:1.08;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream);white-space:nowrap;
}
body.ar .nav__wordmark{font-family:var(--ff-display),sans-serif;letter-spacing:.16em;}

.footer__brand{display:inline-flex;align-items:center;gap:13px;font-size:0;}
.footer__mark{block-size:46px;inline-size:auto;display:block;}
.footer__wordmark{
  display:flex;flex-direction:column;justify-content:center;
  font-family:var(--ff-display),sans-serif;font-weight:700;
  font-size:16px;line-height:1.08;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream);white-space:nowrap;
}
body.ar .footer__wordmark{font-family:var(--ff-display),sans-serif;letter-spacing:.16em;}

@media(max-width:860px){.nav__mark{block-size:34px;}.nav__wordmark{font-size:13px;}}
@media(max-width:560px){.nav__mark{block-size:30px;}.nav__wordmark{font-size:12px;}}

/* ============================================================
   v14 UPGRADE — investor & luxury layer (June 2026)
   Additive only. Reuses existing tokens. RTL- + reduced-motion-safe.
   ============================================================ */

/* subtle film grain — material depth over flat navy (barely perceptible) */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("../img/noise.png");background-size:160px;opacity:.04;
}
@media (prefers-reduced-motion:reduce){body::after{opacity:.03;}}

/* hero: dual action row (View Projects + Partner with us) */
.hero__actions{display:flex;flex-wrap:wrap;gap:15px 16px;align-items:center;margin-block-start:42px;}
.cta-row{display:flex;flex-wrap:wrap;gap:15px 16px;align-items:center;}

/* primary nav CTA accent (Invest) */

/* heritage band — the 75-year differentiator only Elite Town owns */
.heritage{border-block:1px solid var(--gold-faint);background:linear-gradient(180deg,var(--navy-2),var(--navy));}
.heritage__in{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;}
.heritage__year{
  font-family:var(--ff-display),serif;font-weight:700;color:var(--gold);
  font-size:clamp(46px,6.4vw,80px);line-height:.86;letter-spacing:-.02em;white-space:nowrap;
}
body.ar .heritage__year{font-family:"Amiri",serif;letter-spacing:0;}
.heritage__text{max-inline-size:62ch;}
.heritage__text h2{font-size:clamp(22px,2.6vw,33px);margin-block-end:14px;}
.heritage__text p{color:var(--cream-soft);font-size:16px;}
@media (max-width:760px){.heritage__in{grid-template-columns:1fr;gap:22px;}}

/* trust / investor credibility band */
.trust__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-block-start:1px solid var(--gold-faint);margin-block-start:54px;}
.trust__item{padding:42px 34px;position:relative;}
.trust__item + .trust__item::before{content:"";position:absolute;inset-inline-start:0;inset-block:30px;inline-size:1px;background:var(--gold-faint);}
.trust__num{font-family:var(--ff-display),serif;font-weight:600;font-size:15px;letter-spacing:.18em;color:var(--gold);display:block;margin-block-end:18px;}
.trust__item h3{font-size:20px;margin-block-end:12px;color:var(--cream);}
.trust__item p{color:var(--cream-soft);font-size:15px;}
@media (max-width:760px){
  .trust__grid{grid-template-columns:1fr;}
  .trust__item + .trust__item::before{inset-inline:34px auto;inset-block-start:0;inline-size:auto;block-size:1px;}
  .trust__item{padding:34px 6px;}
}

/* Vision 2030 pill */
.vision-line{
  display:inline-flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-soft);
  border:1px solid var(--gold-faint);border-radius:99px;padding:13px 26px;background:var(--gold-ghost);
}
body.ar .vision-line{letter-spacing:.03em;font-size:15px;text-transform:none;}
.vision-line b{color:var(--gold);font-weight:600;}

/* private-client enquiry note */
.enquiry-note{font-size:13.5px;color:var(--cream-dim);margin-block-start:18px;max-inline-size:54ch;}
body.ar .enquiry-note{font-size:15px;}

/* video inside a media band (reuses .band) */
.band video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;}

/* landscape work gallery (16:10 — for the Tahlia showcase) */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.work-grid figure{position:relative;overflow:hidden;background:var(--navy-2);border:1px solid var(--gold-faint);}
.work-grid img{aspect-ratio:16/10;object-fit:cover;inline-size:100%;transition:transform .9s var(--ease);}
.work-grid figure:hover img{transform:scale(1.045);}
@media (max-width:760px){.work-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.work-grid{grid-template-columns:1fr;}}

/* ============================================================
   v25 UPGRADE — native cross-page transitions, smooth scroll, a11y
   ============================================================ */

/* Native cross-document View Transitions: a soft cinematic fade between
   pages on browsers that support it; degrades to instant nav elsewhere. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
}
::view-transition-old(root){ animation-duration:.5s; animation-timing-function:var(--ease-lux); }
::view-transition-new(root){ animation-duration:.5s; animation-timing-function:var(--ease-lux); }

/* Lenis smooth-scroll recommended base (engine loaded + gated in site.js) */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-smooth iframe{pointer-events:none;}

/* Accessibility: honour reduced-motion across the whole site.
   Reveals snap to their final visible state; transitions/animations neutralised. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.reveal-d1,.reveal-d2{opacity:1 !important;transform:none !important;clip-path:none !important;}
}


/* v28 — global keyboard focus visibility (a11y) */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px;}


/* a11y: visually-hidden + skip link */
.visually-hidden,.skip-link{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.skip-link{inset-block-start:0;inset-inline-start:0;z-index:1000;}
.skip-link:focus,.skip-link:focus-visible{position:fixed;inline-size:auto;block-size:auto;margin:12px;padding:12px 20px;overflow:visible;clip:auto;clip-path:none;white-space:normal;background:var(--gold);color:var(--navy);font-weight:600;font-size:15px;text-decoration:none;border-radius:4px;outline:2px solid var(--gold);outline-offset:2px;box-shadow:0 6px 24px rgba(4,9,18,.45);}


/* Insights article + news cards */
.article{padding-block:84px 104px;}
.article__col{max-inline-size:68ch;margin-inline:auto;}
body.ar .article__col{max-inline-size:62ch;}
.article__col p{margin-block:0 1.35em;color:var(--cream-soft);font-size:17px;}
.article-ar{display:none;}
body.ar .article-en{display:none;}
body.ar .article-ar{display:block;direction:rtl;text-align:right;}
.article__back{margin-block-start:54px;text-align:center;}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-block-start:42px;}
@media(max-width:860px){.news-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.news-grid{grid-template-columns:1fr;}}
.ncard{display:block;background:var(--navy-2);border:1px solid var(--gold-faint);border-radius:14px;padding:24px 24px 26px;transition:border-color .3s var(--ease),transform .3s var(--ease);}
.ncard:hover{border-color:var(--gold-soft);transform:translateY(-3px);}
.ncard__cat{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}
.ncard__title{font-family:var(--ff-display),serif;font-weight:600;font-size:20px;color:var(--cream);margin-block:10px 8px;line-height:1.25;}
body.ar .ncard__title{font-family:"Amiri",serif;}
.ncard__dek{color:var(--cream-soft);font-size:14px;line-height:1.55;}
.ncard__go{display:inline-block;margin-block-start:16px;color:var(--gold);font-size:12.5px;letter-spacing:.04em;}
.ncard__title{font-family:var(--ff-display);}

/* ============================================================
   BLEND REDESIGN LAYER (v30) — dark base (A) + heritage serif (B) + two-cities map (C)
   Champagne-gold material · graded imagery · image-led cards · composed motion.
   Additive; RTL- and prefers-reduced-motion-safe.
   ============================================================ */

/* ---- wordmark/brand stay grotesk caps (logo lockup); headings carry the serif ---- */
.nav__wordmark,.footer__wordmark,.nav__brand,.footer__brand{font-family:var(--ff-body)!important;}

/* Brand law (Oct 2026): the company name is set in Latin in every language.
   In Arabic the wordmark stays ELITE TOWN, styled exactly as in English, and
   the lockup keeps its own left-to-right order (mark, then name) instead of
   mirroring with the page: a logo is a fixed drawing, not running text. */
body.ar .nav__brand,body.ar .footer__brand{direction:ltr;unicode-bidi:isolate;}
body.ar .nav__wordmark,body.ar .footer__wordmark,body.ar .footer__name{
  font-family:var(--ff-body)!important;letter-spacing:.16em;text-transform:uppercase;
}

/* ---- mono technical labels (kickers, map coords, units) ---- */
.mono{font-family:var(--ff-mono);}
.eyebrow{font-family:var(--ff-mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);}
body.ar .eyebrow{font-family:var(--ff-ar-body);letter-spacing:.06em;font-size:13.5px;}

/* Hero brand crest — gold diamond tick + heritage label (home hero only; base .eyebrow untouched, it's reused 6× on the page) */
.hero .eyebrow--crest{display:inline-flex;align-items:center;gap:10px;color:var(--gold);}
.hero .eyebrow--crest{--crest:16px;}
.hero .crest__tick{inline-size:var(--crest);block-size:var(--crest);flex:0 0 auto;display:block;opacity:.92;
  /* Optical: the diamond path spans 2..22 of a 24 viewBox, so the glyph sits 1/12 of the
     box inside its own edge. Pull it back by exactly that, or the kicker reads indented
     against the headline, lede and buttons. Logical property, so RTL mirrors for free. */
  margin-inline-start:calc(var(--crest) / -12);}
.hero .crest__label{margin-inline-end:-.34em;} /* trim the trailing letter-space */
body.ar .hero .crest__label{margin-inline-end:-.04em;}
body.ar .hero .eyebrow--crest{letter-spacing:.04em;}
@media (max-width:560px){.hero .eyebrow--crest{gap:8px;--crest:14px;}}
/* The kicker is a single line by design. At 360px the three beats sit flush to the
   content edge with no slack, so a wider font fallback would wrap it. Ease the
   tracking just below that point to buy margin without changing the look. */
@media (max-width:420px){.hero .crest__label{letter-spacing:.26em;margin-inline-end:-.26em;}}
/* Below 380px the three beats leave ~1.4% slack, which a Space Mono fallback would
   overrun and wrap. Step the kicker down so it can never break onto two lines. */
@media (max-width:380px){.hero .crest__label{font-size:10px;letter-spacing:.24em;margin-inline-end:-.24em;}}

/* ---- GOLD AS MATERIAL: gradient-clipped text ---- */
.gold-grad{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.gold-grad{color:var(--gold);-webkit-text-fill-color:currentColor;}}
.rule-gold{block-size:1px;border:0;background:linear-gradient(90deg,transparent,var(--gold-soft) 18%,var(--gold-soft) 82%,transparent);}

/* ---- refined, architectural buttons with a specular sheen ---- */
.btn{position:relative;overflow:hidden;border-radius:3px;border-color:var(--gold-soft);}
.btn>*{position:relative;z-index:1;}
.btn::after{content:"";position:absolute;inset:0;z-index:0;background:var(--grad-gold-sheen);background-size:240% 100%;background-position:150% 0;opacity:0;pointer-events:none;}
.btn:hover::after{opacity:.7;animation:btnsheen 1s var(--ease-lux) forwards;}
@keyframes btnsheen{from{background-position:150% 0;}to{background-position:-50% 0;}}
.btn--primary{background:var(--grad-gold);color:var(--navy-deep)!important;border-color:transparent;font-weight:600;}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(214,178,94,.24);}
.btn--primary .arrow{color:var(--navy-deep);}
.lang-btn{border-radius:3px;}
.card__status{border-radius:2px;}

/* ---- spatial depth on the flat navy (subtle radial light from top) ---- */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(214,178,94,.06),transparent 55%),
             radial-gradient(140% 100% at 50% 120%,rgba(7,26,47,.7),transparent 60%);}
/* keep content above the fixed grain/light pseudo-layers — but NOT .nav (it must stay
   position:fixed z-index:90 from base, or the sticky nav + About dropdown break) */
main,.footer{position:relative;z-index:2;}

/* ---- SIGNATURE IMAGE GRADE: art-direct every render (no flat black scrim) ---- */
.figure-grade{position:relative;overflow:hidden;background:var(--navy-2);}
.figure-grade>img,.figure-grade>video{display:block;inline-size:100%;block-size:100%;object-fit:cover;
  filter:contrast(1.06) saturate(1.05) brightness(1.02);}
.figure-grade::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,35,64,.06),rgba(12,35,64,.34) 70%,rgba(12,35,64,.72)),
            radial-gradient(120% 80% at 75% 18%,rgba(214,178,94,.10),transparent 55%);
  mix-blend-mode:normal;}
.figure-grade.duotone>img{filter:contrast(1.1) saturate(.55) brightness(.96);}
.figure-grade.duotone::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(150deg,rgba(12,35,64,.55),rgba(156,122,46,.22));mix-blend-mode:soft-light;}

/* ---- HERO refinements: stronger composed gradient + soft vignette ---- */
.hero--img .hero__bg::after{background:
  linear-gradient(95deg,rgba(5,11,22,.86) 0%,rgba(6,13,26,.55) 34%,rgba(7,15,28,.12) 66%,rgba(7,15,28,0) 100%),
  linear-gradient(0deg,var(--navy) 2%,rgba(12,35,64,.30) 30%,rgba(12,35,64,0) 62%);}
.hero__brandline{font-style:italic;}
body.ar .hero__brandline{font-style:normal;}

/* ---- MASKED line reveal (heroes & statements) ---- */
.rv-line{display:block;overflow:hidden;}
.rv-line>*{display:block;}
.js .rv-line>*{transform:translateY(110%);transition:transform 1.05s var(--ease-lux);}
.rv-line.in>*{transform:translateY(0);}
.rv-line.d1>*{transition-delay:.08s}.rv-line.d2>*{transition-delay:.16s}.rv-line.d3>*{transition-delay:.24s}.rv-line.d4>*{transition-delay:.32s}
.parallax{will-change:transform;}

/* ---- IMAGE-LED PROJECT CARDS (.pcard) — the render IS the card ---- */
.pcard{position:relative;display:block;overflow:hidden;border:1px solid var(--gold-faint);border-radius:4px;
  background:var(--navy-2);min-block-size:380px;isolation:isolate;
  transition:border-color .45s var(--ease),transform .55s var(--ease-lux),box-shadow .55s var(--ease);}
.pcard:hover{border-color:var(--gold-soft);transform:translateY(-5px);box-shadow:0 26px 60px rgba(4,9,18,.5);}
.pcard__media{position:absolute;inset:0;z-index:0;}
.pcard__media img,.pcard__media video{inline-size:100%;block-size:100%;object-fit:cover;
  filter:contrast(1.08) saturate(.62) brightness(.78);transition:transform 1.1s var(--ease-lux),filter .6s var(--ease);transform:scale(1.02);}
.pcard:hover .pcard__media img{transform:scale(1.07);filter:contrast(1.06) saturate(.85) brightness(.9);}
.pcard__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,11,22,.18) 0%,rgba(5,11,22,.1) 38%,rgba(5,11,22,.72) 78%,rgba(5,11,22,.92) 100%),
            linear-gradient(120deg,rgba(12,35,64,.5),transparent 55%);}
.pcard__media::before{content:"";position:absolute;inset:0;z-index:2;opacity:0;background:var(--grad-gold-sheen);
  background-size:240% 100%;background-position:150% 0;pointer-events:none;}
.pcard:hover .pcard__media::before{opacity:.5;animation:btnsheen 1.1s var(--ease-lux) forwards;}
.pcard__body{position:relative;z-index:3;display:flex;flex-direction:column;block-size:100%;min-block-size:inherit;padding:30px 30px 28px;}
.pcard__status{align-self:flex-start;font-family:var(--ff-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-soft);border-radius:2px;padding:5px 11px;background:rgba(5,11,22,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
body.ar .pcard__status{font-family:var(--ff-ar-body);letter-spacing:.04em;font-size:12px;}
.pcard__motif{position:absolute;inset-block-start:26px;inset-inline-end:26px;inline-size:78px;opacity:.55;z-index:3;transition:opacity .5s;}
.pcard:hover .pcard__motif{opacity:.95;}
.pcard__spacer{flex:1 1 auto;}
.pcard__title{font-family:var(--ff-display);font-weight:600;font-size:clamp(25px,2.4vw,33px);line-height:1.05;letter-spacing:-.02em;color:var(--cream);margin:0 0 4px;}
body.ar .pcard__title{font-family:var(--ff-ar-display);letter-spacing:0;}
.pcard__loc{font-family:var(--ff-mono);font-size:12px;letter-spacing:.04em;color:var(--cream-soft);margin-block-end:20px;}
body.ar .pcard__loc{font-family:var(--ff-ar-body);}
.pcard__stats{display:flex;gap:34px;border-block-start:1px solid var(--gold-faint);padding-block-start:18px;}
.pcard__stat b{display:block;font-family:var(--ff-display);font-weight:600;font-size:23px;line-height:1.1;color:var(--gold);font-variant-numeric:lining-nums tabular-nums;}
.pcard__stat span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;color:var(--cream-dim);text-transform:uppercase;}
body.ar .pcard__stat span{font-family:var(--ff-ar-body);text-transform:none;font-size:12.5px;}
.pcard__go{margin-block-start:22px;display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);}
.pcard__go .arrow{color:var(--gold);transition:transform .35s var(--ease);}
.pcard:hover .pcard__go .arrow{transform:translateX(5px);}
[dir="rtl"] .pcard__go .arrow{transform:scaleX(-1);}
[dir="rtl"] .pcard:hover .pcard__go .arrow{transform:scaleX(-1) translateX(5px);}
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.pcards .pcard--feature{grid-column:1 / -1;min-block-size:460px;}
.pcards .pcard--feature .pcard__title{font-size:clamp(26px,2.9vw,38px);}
@media(max-width:760px){.pcards{grid-template-columns:1fr;}.pcards .pcard--feature{grid-column:auto;min-block-size:400px;}}

/* nowrap stat number+unit (fixes the 1,000,000 m² wrap) */
.stat__num,.stat__num *{font-variant-numeric:lining-nums tabular-nums;}
.statwrap{display:inline-flex;align-items:baseline;gap:.18em;white-space:nowrap;}
.stat__unit{font-size:.46em;color:var(--gold-deep);font-family:var(--ff-mono);}
body.ar .stat__unit{font-family:var(--ff-ar-body);}

/* heritage year as gold material */
.heritage__year{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.heritage__year{color:var(--gold);-webkit-text-fill-color:currentColor;}}

/* ============================================================
   SIGNATURE SET-PIECE — "TWO CITIES" ATLAS MAP
   ============================================================ */
.atlas{position:relative;padding-block:96px 110px;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);border-block:1px solid var(--gold-faint);overflow:hidden;}
.atlas__head{text-align:center;max-inline-size:760px;margin-inline:auto;margin-block-end:18px;}
.atlas__stage{position:relative;max-inline-size:1100px;margin-inline:auto;aspect-ratio:16/8;}
.atlas svg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;}
.atlas .land{fill:none;stroke:var(--gold-soft);stroke-width:1.1;vector-effect:non-scaling-stroke;}
.atlas .grid{fill:none;stroke:var(--gold-faint);stroke-width:.6;vector-effect:non-scaling-stroke;}
.atlas .route{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:4 6;vector-effect:non-scaling-stroke;opacity:.5;}
.atlas .draw{stroke-dasharray:1600;stroke-dashoffset:1600;transition:stroke-dashoffset 2.4s var(--ease-lux);}
.atlas.in .draw{stroke-dashoffset:0;}
.atlas__pin{position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:3;}
.atlas__pin:hover,.atlas__pin:focus-within,.atlas__pin.is-active{z-index:30;}
[dir="rtl"] .atlas__pin{transform:translate(50%,-50%);}
.atlas__dot{inline-size:14px;block-size:14px;border-radius:50%;background:var(--grad-gold);box-shadow:0 0 0 5px rgba(214,178,94,.16),0 0 26px 4px rgba(214,178,94,.5);position:relative;}
.atlas__dot::after{content:"";position:absolute;inset:-9px;border:1px solid var(--gold-soft);border-radius:50%;animation:pulse 3s var(--ease) infinite;}
@keyframes pulse{0%{transform:scale(.8);opacity:.8}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.atlas__label{position:absolute;inset-block-start:22px;inset-inline-start:-4px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-soft);white-space:nowrap;}
body.ar .atlas__label{font-family:var(--ff-ar-body);letter-spacing:0;font-size:13px;}
.atlas__city{position:absolute;font-family:var(--ff-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);opacity:.8;}
/* card opens UPWARD from the dot, centered, fully opaque, above sibling pins —
   so it never collides with the CTA below or let other labels bleed through */
.atlas__card{position:absolute;z-index:5;inline-size:max-content;min-inline-size:210px;max-inline-size:min(280px,82vw);
  inset-block-end:calc(100% + 14px);inset-inline-start:50%;
  padding:18px 20px;text-align:start;
  background:#0a1730;border:1px solid var(--gold-soft);border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;pointer-events:none;}
.atlas__card.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
/* small downward-pointing connector */
.atlas__card::after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;transform:translateX(-50%);
  border:7px solid transparent;border-block-start-color:var(--gold-soft);}
/* horizontal edge-flip (JS adds card-left/right when a card would clip the stage edge) */
.atlas__card.card-left{inset-inline-start:auto;inset-inline-end:-6px;transform:translateX(0) translateY(8px);}
.atlas__card.card-left.show{transform:translateX(0) translateY(0);}
.atlas__card.card-left::after{inset-inline-start:auto;inset-inline-end:20px;transform:none;}
.atlas__card.card-right{inset-inline-start:-6px;inset-inline-end:auto;transform:translateX(0) translateY(8px);}
.atlas__card.card-right.show{transform:translateX(0) translateY(0);}
.atlas__card.card-right::after{inset-inline-start:20px;transform:none;}
/* mobile: present the card as a fixed bottom sheet, independent of pin x/y */
@media (max-width:760px){
  .atlas__card{position:fixed;inset-inline:14px;inset-block-end:14px;inset-block-start:auto;
    inline-size:auto;min-inline-size:0;max-inline-size:none;transform:translateY(14px);}
  .atlas__card.show{transform:translateY(0);}
  .atlas__card.card-left,.atlas__card.card-right{inset-inline:14px;transform:translateY(14px);}
  .atlas__card.card-left.show,.atlas__card.card-right.show{transform:translateY(0);}
  .atlas__card::after{display:none;}
}
.atlas__card h3,.atlas__card-h{font-family:var(--ff-display);font-weight:600;font-size:19px;line-height:1.15;margin:0 0 4px;color:var(--cream);}
.atlas__card .meta{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;color:var(--gold);text-transform:uppercase;margin-block-end:10px;}
.atlas__card .row{display:flex;justify-content:space-between;gap:18px;font-size:13px;color:var(--cream-soft);padding-block:3px;}
.atlas__card .row b{color:var(--cream);font-variant-numeric:tabular-nums;}
@media(max-width:760px){.atlas__stage{aspect-ratio:3/4;}.atlas__label{font-size:9px;}}

@media (prefers-reduced-motion:reduce){
  .rv-line>*{transform:none!important;transition:none!important;}
  .atlas .draw{stroke-dashoffset:0!important;transition:none!important;}
  .atlas__dot::after{animation:none!important;}
  .btn:hover::after,.pcard:hover .pcard__media::before{animation:none!important;}
  [data-parallax]{transform:none!important;}
}

/* ---- shared hero video (home/palace etc.) — replaces per-page inline blocks ---- */
.hero--img{position:relative;overflow:hidden;}
.hero--img .hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero--img .hero__video{position:absolute;inset:0;inline-size:100%;block-size:100%;width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.05) saturate(1.05) brightness(1.04);}
.hero--img .hero__content,.hero--img .scroll-cue{position:relative;z-index:2;}
.hero--img .hero__content{text-shadow:0 2px 26px rgba(4,9,18,.5);}
/* still-image hero: gentle ken-burns for life without a dark video */
.hero--still .hero__bg{background-size:114%;background-position:48% 50%;animation:kenburns 26s var(--ease) infinite alternate;}
@keyframes kenburns{from{background-position:46% 52%;}to{background-position:54% 46%;}}
@media (prefers-reduced-motion:reduce){.hero--still .hero__bg{animation:none;background-size:cover;}}
/* home video hero — gentle, cinematic grade (not over-bright/cartoonish); a deeper
   scrim lets the headline pop. */
.hero--bright .hero__video{filter:brightness(1.04) contrast(1.07) saturate(0.92) !important;}
.hero--bright .hero__bg::after{background:
  linear-gradient(95deg,rgba(5,11,22,.92) 0%,rgba(6,13,26,.66) 36%,rgba(7,15,28,.24) 66%,rgba(7,15,28,.06) 100%),
  linear-gradient(0deg,var(--navy) 3%,rgba(12,35,64,.42) 34%,rgba(12,35,64,0) 64%) !important;}
.hero--bright .hero__content{text-shadow:0 2px 30px rgba(4,9,18,.62);}

/* ---- manifesto over an image (shared) ---- */
.section--banner{position:relative;overflow:hidden;}
.section--banner .banner__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;}
.section--banner .banner__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--navy) 0%,rgba(7,15,31,.62) 28%,rgba(7,15,31,.62) 72%,var(--navy) 100%),
            radial-gradient(120% 80% at 50% 0%,rgba(214,178,94,.08),transparent 55%);}
.section--banner .wrap{position:relative;z-index:2;}
.manifesto p{font-style:italic;}
body.ar .manifesto p{font-style:normal;}

/* responsive safety net — inline grid-template-columns must still collapse on small screens
   (prevents pages that set e.g. repeat(3,1fr)/repeat(5,1fr) inline from overflowing on mobile) */
@media (max-width:1020px){ .stats{grid-template-columns:1fr 1fr !important;} }
@media (max-width:860px){ .pillars{grid-template-columns:1fr !important;} }
@media (max-width:560px){ .stats,.pillars{grid-template-columns:1fr !important;} }
/* keep CTA blocks left-aligned once a .split collapses to one column on mobile */
@media (max-width:1020px){ .split>[style*="justify-self"]{justify-self:start !important;} }

/* ---- a11y / polish pass (luxury QA) ---- */
.stat__unit{color:var(--gold);}                              /* was --gold-deep (low contrast) */
.scroll-cue{text-shadow:0 1px 12px rgba(4,9,18,.7);}         /* legible over bright hero images */
/* contact form: non-colour-only invalid cue */
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#ff9b8a;}
.field-error{display:block;color:#ff9b8a;font-size:12px;letter-spacing:.02em;margin-block-start:7px;min-block-size:1em;}
.field-error:not(:empty)::before{content:"⚠ ";}
/* primary (gold) button needs a focus ring that isn't gold-on-gold */
.btn--primary:focus-visible{outline:2px solid var(--navy-deep);outline-offset:2px;box-shadow:0 0 0 4px var(--gold);}
/* consistent image grade token across pcards / figures / video */
:root{--grade:contrast(1.07) saturate(.9) brightness(.97);}
.figure-grade>img,.figure-grade>video{filter:var(--grade);}
.hero--img .hero__video{filter:var(--grade);}

/* ============================================================
   v31 — THE KEYLINE LAYER (July 2026)
   One governing idea, not scattered decoration.
   The new mark is an ET monogram held inside a thin gold keyline.
   Here that keyline is promoted from a logo detail into the house
   detail: the same hairline frames the mark, the imagery, the cards,
   the numbers and the calls to action. Repeated with discipline.
   Additive only. Logical properties throughout (RTL-safe).
   Everything motion-based is neutralised under prefers-reduced-motion.
   ============================================================ */

/* ---- keyline tokens (new only; palette, type scale and spacing untouched) ---- */
:root{
  --kl-inset:6px;          /* how far the hairline sits inside the edge */
  --kl-tick:13px;          /* corner tick length */
  --kl-line:var(--gold-faint);
  --kl-corner:var(--gold-soft);
  --kl-dur:700ms;          /* the confident curve, paired with var(--ease) */
}

/* ============================================================
   1 · BRAND LOCKUP — mark, wordmark, hairline, house line
   ============================================================ */

/* the signature rule under the wordmark; aligned to the wordmark's
   inline start (mark block-size 46px + lockup gap 13px) when it follows
   the lockup, and flush to the mark when it is nested elsewhere. */
.footer__rule{
  display:block;border:0;
  inline-size:108px;max-inline-size:100%;block-size:1px;
  background:rgba(214,178,94,.55);
  margin-block:9px;margin-inline-start:0;margin-inline-end:0;
}
.footer__brand ~ .footer__rule{margin-inline-start:59px;}

.footer__house{
  display:block;
  font-family:var(--ff-body);font-weight:500;
  font-size:10.5px;line-height:1.45;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;
}
body.ar .footer__house{
  font-family:var(--ff-ar-body);font-weight:700;
  font-size:12.5px;letter-spacing:.06em;text-transform:none;
  white-space:normal;
}
.footer__brand ~ .footer__house{margin-inline-start:59px;}

/* the mark: a soft champagne glow on hover. It never scales, never bounces. */
.nav__mark,.footer__mark{transition:filter 240ms var(--ease);}
@media (prefers-reduced-motion:no-preference){
  .nav__brand:hover .nav__mark,
  .nav__brand:focus-visible .nav__mark,
  .footer__brand:hover .footer__mark{
    filter:drop-shadow(0 0 9px rgba(244,223,160,.42)) drop-shadow(0 0 2px rgba(214,178,94,.55));
  }
}

/* ============================================================
   2 · THE KEYLINE FRAME — one hairline, inset, with engraved corners.
   Drawn on a pseudo-element so it costs no layout and never shifts a grid.
   Applied to the image blocks (.figure-grade, .band — the gallery and
   work-grid figures carry .figure-grade), the project cards (.pcard,
   .ncard, legacy .card) and, in its most restrained form, the stat blocks.
   ============================================================ */
/* .ncard is the one card in the list whose base rule sets no positioning,
   so its keyline would resolve against <main> and frame the whole page.
   Additive, so the base .ncard block stays untouched. */
.ncard{position:relative;}

.pcard::before,
.ncard::before,
.card::before,
.figure-grade::before,
.band::before{
  content:"";position:absolute;inset:var(--kl-inset);z-index:4;
  pointer-events:none;border:1px solid var(--kl-line);border-radius:2px;
  background-origin:border-box;background-clip:border-box;background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--kl-corner),var(--kl-corner)),linear-gradient(var(--kl-corner),var(--kl-corner)),
    linear-gradient(var(--kl-corner),var(--kl-corner)),linear-gradient(var(--kl-corner),var(--kl-corner)),
    linear-gradient(var(--kl-corner),var(--kl-corner)),linear-gradient(var(--kl-corner),var(--kl-corner)),
    linear-gradient(var(--kl-corner),var(--kl-corner)),linear-gradient(var(--kl-corner),var(--kl-corner));
  background-size:
    1px var(--kl-tick),var(--kl-tick) 1px,
    1px var(--kl-tick),var(--kl-tick) 1px,
    1px var(--kl-tick),var(--kl-tick) 1px,
    1px var(--kl-tick),var(--kl-tick) 1px;
  background-position:
    0 0,0 0,
    100% 0,100% 0,
    0 100%,0 100%,
    100% 100%,100% 100%;
  transition:border-color 420ms var(--ease),opacity 420ms var(--ease);
}
.pcard:hover::before,
.ncard:hover::before,
.card:hover::before,
.figure-grade:hover::before{border-color:var(--kl-corner);}
/* the band is a full-bleed plate: sit its keyline further in */
.band::before{inset:14px;}
/* .ncard carries a 14px corner, so its keyline runs concentric with the card
   edge rather than reading as a square hairline inside a rounded plate. */
.ncard::before{border-radius:calc(14px - var(--kl-inset));}

/* stat blocks sit inside an already-ruled grid, so they take the keyline
   as corners only. Same signature, quieter register. */
.stat::after{
  content:"";position:absolute;inset:16px;z-index:1;pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--gold-faint),var(--gold-faint)),linear-gradient(var(--gold-faint),var(--gold-faint)),
    linear-gradient(var(--gold-faint),var(--gold-faint)),linear-gradient(var(--gold-faint),var(--gold-faint)),
    linear-gradient(var(--gold-faint),var(--gold-faint)),linear-gradient(var(--gold-faint),var(--gold-faint)),
    linear-gradient(var(--gold-faint),var(--gold-faint)),linear-gradient(var(--gold-faint),var(--gold-faint));
  background-size:1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
}
.stat>*{position:relative;z-index:2;}

/* opt-in keyline for any block the markup adds later */
.keyline{position:relative;}
.keyline::before{
  content:"";position:absolute;inset:var(--kl-inset);z-index:4;
  pointer-events:none;border:1px solid var(--kl-line);border-radius:2px;
}

/* ============================================================
   3 · NUMBERS AS ARCHITECTURE — the figures are engraved, not printed.
   Champagne gradient (same material as .gold-grad), generous tracking,
   a hairline drawn beneath each figure as the block reveals.
   ============================================================ */
.stat__num{position:relative;letter-spacing:.02em;}
body.ar .stat__num{letter-spacing:0;}
.stat__num,.stat__num .statwrap{
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* the unit stays solid gold: contrast first */
.stat__num .stat__unit{
  background:none;-webkit-text-fill-color:var(--gold);color:var(--gold);
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .stat__num,.stat__num .statwrap{color:var(--gold);-webkit-text-fill-color:currentColor;background:none;}
}
.stat__num::after{
  content:"";position:absolute;inset-block-start:100%;inset-inline-start:0;
  block-size:1px;inline-size:0;margin-block-start:5px;
  background:var(--gold-soft);
  transition:inline-size var(--kl-dur) var(--ease) .18s;
}
.stats.in .stat__num::after,
.stats:not(.reveal) .stat__num::after{inline-size:38px;}

/* ============================================================
   4 · MATERIAL DEPTH — panels read as polished stone, not plastic.
   A very subtle navy gradient, a 1px top highlight, a wider softer shadow.
   ============================================================ */
.pcard,.ncard,.card{
  background-image:
    linear-gradient(180deg,rgba(244,223,160,.035),rgba(244,223,160,0) 38%),
    linear-gradient(178deg,var(--navy-2) 0%,var(--navy) 58%,var(--navy-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(244,223,160,.09),0 22px 54px -30px rgba(3,8,16,.8);
}
.pcard:hover{box-shadow:inset 0 1px 0 rgba(244,223,160,.14),0 34px 74px -30px rgba(3,8,16,.86);}
.ncard:hover,.card:hover{box-shadow:inset 0 1px 0 rgba(244,223,160,.14),0 26px 60px -30px rgba(3,8,16,.82);}
.pillar,.trust__item{background-image:linear-gradient(180deg,rgba(244,223,160,.018),rgba(244,223,160,0) 46%);}

/* ============================================================
   5 · MOTION WITH MANNERS — slower, shorter, more certain.
   ============================================================ */
.reveal{
  transform:translateY(18px);
  transition:opacity var(--kl-dur) var(--ease),transform var(--kl-dur) var(--ease);
}

/* the hairline that draws in beside every section label as it reveals.
   Mirrors the existing .kicker::before convention, costs no vertical space. */
.eyebrow:not(.eyebrow--crest)::after{
  content:"";display:inline-block;vertical-align:middle;align-self:center;flex:0 0 auto;
  inline-size:56px;block-size:1px;margin-inline-start:14px;
  background:linear-gradient(to right,var(--gold-soft),rgba(214,178,94,.05));
  transition:inline-size var(--kl-dur) var(--ease) .14s;
}
/* Ten eyebrows carry an inline display:flex + justify-content:center. There the
   pseudo becomes a flex item: vertical-align is ignored (align-self carries it
   instead), and the rule would otherwise be counted into the centred group and
   push the label off the section's true centre axis. The negative inline-end
   margin cancels the rule's own width plus its gap, so the label centres on the
   text alone and the hairline hangs off the end. Logical properties, so RTL
   mirrors it. */
.eyebrow[style*="justify-content:center"]:not(.eyebrow--crest)::after{
  margin-inline-end:-70px;
}
[dir="rtl"] .eyebrow:not(.eyebrow--crest)::after{
  background:linear-gradient(to left,var(--gold-soft),rgba(214,178,94,.05));
}
.eyebrow.reveal:not(.in):not(.eyebrow--crest)::after{inline-size:0;}

/* ============================================================
   6 · BUTTONS — pressed brass. Hairline gold edge, a slow gradient
   shift on hover, no harsh colour flips.
   ============================================================ */
.btn{
  border-color:var(--gold-soft);
  background-image:linear-gradient(180deg,rgba(244,223,160,.055),rgba(214,178,94,.015));
  transition:border-color 420ms var(--ease),color 420ms var(--ease),
             background-color 420ms var(--ease),background-position 900ms var(--ease),
             box-shadow 420ms var(--ease),transform 420ms var(--ease);
}
.btn:not(.btn--primary):hover{
  background-color:transparent;color:var(--gold);border-color:var(--gold);
  background-image:linear-gradient(180deg,rgba(214,178,94,.20),rgba(214,178,94,.05));
}
.btn--ghost{border-color:rgba(214,178,94,.28);}
.btn--ghost:hover{border-color:var(--gold-soft);color:var(--gold);}
.btn--primary{
  border-color:rgba(156,122,46,.6);
  background-image:var(--grad-gold);
  background-size:190% 100%;background-position:0% 0;
}
.btn--primary:hover{background-position:100% 0;box-shadow:0 18px 40px -18px rgba(214,178,94,.42);}

/* ============================================================
   7 · MOBILE — checked at 375px. Hairlines must not stack into noise,
   so treatments are reduced here rather than dropped.
   ============================================================ */
@media (max-width:860px){
  :root{--kl-inset:5px;--kl-tick:11px;}
  .band::before{inset:10px;}
  /* Touch targets: the phone is the chairman's surface, so the burger and the
     language toggle both clear the 44px minimum without gaining visual weight.
     English was the failing case (12px type, 1.75 line-height, 8px padding). */
  .lang-btn{
    display:inline-flex;align-items:center;justify-content:center;
    min-block-size:44px;
  }
}
@media (max-width:560px){
  :root{--kl-inset:4px;}
  /* corner ticks read as clutter at phone width: keep the frame, drop the ticks */
  .pcard::before,.ncard::before,.card::before,.figure-grade::before,.band::before{background-image:none;}
  .band::before{inset:8px;}
  /* stacked stats already carry divider rules on a phone: the corner ticks
     would read as noise, so the engraved figure carries the keyline alone */
  .stat::after{display:none;}
  .stats.in .stat__num::after,.stats:not(.reveal) .stat__num::after{inline-size:30px;}
  .eyebrow:not(.eyebrow--crest)::after{inline-size:34px;margin-inline-start:11px;}
  .eyebrow[style*="justify-content:center"]:not(.eyebrow--crest)::after{margin-inline-end:-45px;}
  .footer__house{font-size:9.5px;letter-spacing:.26em;white-space:normal;text-wrap:balance;}
  .footer__rule{inline-size:84px;}
  .footer__brand ~ .footer__rule,.footer__brand ~ .footer__house{margin-inline-start:0;}
}

/* ============================================================
   REDUCED MOTION — the detail stays, the movement goes.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .nav__mark,.footer__mark{transition:none !important;filter:none !important;}
  .eyebrow:not(.eyebrow--crest)::after,
  .eyebrow.reveal:not(.in):not(.eyebrow--crest)::after{inline-size:56px;transition:none !important;}
  .stat__num::after{inline-size:38px !important;transition:none !important;}
  .pcard::before,.ncard::before,.card::before,.figure-grade::before,.band::before{transition:none !important;}
  .btn,.btn--primary:hover{transition:none !important;}
}
/* the reduced-motion rule above pins the label hairline to its desktop 56px,
   which would otherwise undo the phone width and desync the centred variant's
   compensating margin. Restore the phone measure. */
@media (prefers-reduced-motion:reduce) and (max-width:560px){
  .eyebrow:not(.eyebrow--crest)::after,
  .eyebrow.reveal:not(.in):not(.eyebrow--crest)::after{inline-size:34px;}
}

/* v31 · RTL correction — background-position percentages are direction-blind,
   so the brass sweep on the primary button must be mirrored for Arabic. */
[dir="rtl"] .btn--primary{background-position:100% 0;}
[dir="rtl"] .btn--primary:hover{background-position:0% 0;}

/* the wordmark's two name lines are swapped as one i18n block, so the wrapper
   must not become a flex item itself */
.footer__name{display:contents;}

/* NAV-V32:start  generated from _nav-redesign/nav.css, do not edit here */
/* ============================================================
   ELITE TOWN · NAV v32 — FOUR DOORS, ONE ASK
   ------------------------------------------------------------
   This block is appended to assets/css/styles.css between the
   NAV-V32 markers. APPLY.sh also deletes five superseded blocks
   from the file above it:

     1. styles.css 448-463  the @media (max-width:860px) nav block
                            (the unbounded, unscrollable panel and the
                            three-line burger)
     2. styles.css 554-556  the three .nav__cta rules that set Invest in gold
                            TEXT. Deleted, or there are two golds on one face
                            the moment the pill arrives, against house law
                            section 2.
     3. styles.css 640-668  the v27 "About" dropdown, including
                            the mobile override that forced .nav__menu
                            visible and so kept Leadership and Our Vision
                            focusable while the menu was closed, and its 12px
                            radius and drop shadow, forbidden by section 4.
     4. styles.css 772      .nav__menu{z-index:120}
     5. styles.css 1201-1204 the .nav__burger touch-target block

   THREE DEFECTS, FIXED STRUCTURALLY, NOT PATCHED
   ------------------------------------------------------------
   a) THE UNSCROLLABLE PANEL. .nav has backdrop-filter, which establishes a
      containing block for fixed-position descendants, so `inset:0` inside it
      resolves against the 78px bar, NOT the viewport. That is precisely why
      the old panel had no height bound. The bound therefore has to be
      arithmetic here: max-block-size:calc(100svh - var(--nav-h)) with a vh
      fallback, overflow-y:auto and overscroll-behavior:contain.
   b) THE 861-1023px CRUSH. The inline row is switched off at 1023.98px, not
      860px. URW hands over at exactly 1024, as do Tishman Speyer, ROSHN and
      Red Sea Global. Nobody at this tier renders a bar at 900px. And the row
      is four short words, so it cannot collide even at the widths it does
      render in. flex-wrap:nowrap plus min-inline-size:0 make growth collapse
      to the disclosure rather than wrap.
   c) THE TAB-ORDER LEAK. The panel is the content of a native <details>, so a
      closed panel is out of the tab order and out of the accessibility tree
      from the first paint, with no script. visibility:hidden is carried as a
      second guard for engines that render non-open details children, and the
      old forced visibility is neutralised to inherit, so a stale
      dropdown left in any file cannot leak focus either.

   ONE GOLD PER FACE. The filled pill is the only gold object in the bar. In
   the panel the repeated ask is the only gold object. Door names, notes, the
   language control and the ENQUIRIES eyebrow are all cream.

   Radii are 3px, matching .btn and .lang-btn as they actually ship
   (styles.css:754, 762). No 99px capsules: section 4 forbids the rounded-card
   read, and the house flattened its own buttons to 3px for that reason.
   ============================================================ */

/* ---------- 1 · the bar ---------- */
.nav__in{flex-wrap:nowrap;justify-content:flex-start;}
.nav__links{margin-inline-start:auto;min-inline-size:0;flex-wrap:nowrap;gap:30px;}
.nav__actions{display:flex;align-items:center;gap:14px;flex:0 0 auto;}
.nav__rule{display:block;inline-size:1px;block-size:20px;background:var(--gold-faint);flex:0 0 auto;}

/* the four doors keep the base .nav__links a treatment: 12px Hanken caps at
   .2em in cream-dim, with the 1px gold underline growing on hover and on the
   active page. Nothing in the row is gold, and nothing in it opens. */
.nav__links a{white-space:nowrap;}

/* ---------- 2 · language: a real link, and it gives up its gold ---------- */
.lang-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-color:var(--gold-faint);color:var(--cream-dim);
  min-block-size:38px;padding:8px 17px;
}
.lang-btn:hover,.lang-btn:focus-visible{
  background:transparent;color:var(--cream);border-color:var(--cream-soft);
}

/* ---------- 3 · the one filled object ---------- */
.nav__enquire{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 22px;border-radius:3px;border:1px solid rgba(156,122,46,.6);
  background-image:var(--grad-gold);background-size:190% 100%;background-position:0% 0;
  color:var(--navy-deep);
  font-family:var(--ff-body),sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  white-space:nowrap;min-block-size:38px;
  transition:background-position 900ms var(--ease),box-shadow 420ms var(--ease),transform 420ms var(--ease);
}
.nav__enquire:hover{background-position:100% 0;box-shadow:0 18px 40px -18px rgba(214,178,94,.42);transform:translateY(-1px);}
.nav__enquire:focus-visible{outline:2px solid var(--navy-deep);outline-offset:2px;box-shadow:0 0 0 4px var(--gold);}
[dir="rtl"] .nav__enquire{background-position:100% 0;}
[dir="rtl"] .nav__enquire:hover{background-position:0% 0;}

/* ---------- 4 · the disclosure: one control, no script needed ---------- */
.nav__disclosure{position:relative;flex:0 0 auto;}
.nav__menubtn{
  display:inline-flex;align-items:center;gap:11px;
  min-block-size:44px;min-inline-size:44px;padding:8px 10px;
  cursor:pointer;color:var(--cream-dim);
  list-style:none;                       /* Firefox marker */
  transition:color .25s var(--ease);
}
.nav__menubtn::-webkit-details-marker{display:none;}   /* Safari / iOS marker */
.nav__menubtn::marker{content:"";}
.nav__menubtn:hover{color:var(--cream);}
.nav__menubtn-label{
  font-family:var(--ff-body),sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;line-height:1;
}
.nav__mb-close{display:none;}
.nav__disclosure[open] .nav__mb-open{display:none;}
.nav__disclosure[open] .nav__mb-close{display:inline;}
.nav__menubtn-glyph{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  inline-size:22px;block-size:11px;flex:0 0 auto;
}
.nav__menubtn-glyph span{
  display:block;inline-size:22px;block-size:1.5px;background:var(--cream-soft);
  transition:transform .3s var(--ease),opacity .3s;
}
.nav__disclosure[open] .nav__menubtn-glyph span:nth-child(1){transform:translateY(3.25px) rotate(45deg);}
.nav__disclosure[open] .nav__menubtn-glyph span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg);}

/* ---------- 5 · the panel ---------- */
.nav__panel{
  position:fixed;inset-block-start:var(--nav-h);inset-inline:0;z-index:120;
  max-block-size:calc(100vh - var(--nav-h));
  max-block-size:calc(100svh - var(--nav-h));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
  background:var(--navy);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-block-end:1px solid var(--gold-faint);
  padding:22px 28px max(30px,env(safe-area-inset-bottom));
}
/* second guard: engines that render a closed <details>' children must still
   keep every link out of the tab order and out of the accessibility tree. */
.nav__disclosure:not([open]) .nav__panel{visibility:hidden;pointer-events:none;}
/* the open panel appears on translateY and opacity only, never translateX, so
   RTL needs no mirrored keyframe. The bar above it does not move: that
   stillness is most of the expensive feeling, and here it is free. */
@keyframes navpanelin{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
.nav__disclosure[open] .nav__panel{animation:navpanelin .34s var(--ease-lux) both;}
/* The page is held still behind the open panel. Added by JS, so with
   JavaScript off the panel simply scrolls the document instead, which is
   correct rather than broken.
   The lock is scoped to the widths the panel exists at. A visitor who opens
   the panel on a phone and then widens past 1024px gets the inline bar back,
   and a scroll lock must not be able to survive that resize even if the
   matchMedia handler below never fires. Measured: it did not fire under
   viewport emulation, and the page stayed locked. This rule removes the
   failure rather than relying on the script. */
@media (max-width:1023.98px){
  body.nav-open{overflow:hidden;}
}

/* the repeated ask, first not last: whatever sits at the foot of this panel is
   what a 553px Arabic viewport loses, and the ask is the one thing that must
   not be lost. */
.nav__panel-ask{
  display:flex;align-items:center;justify-content:center;
  padding:15px 24px;border-radius:3px;border:1px solid rgba(156,122,46,.6);
  background-image:var(--grad-gold);background-size:190% 100%;background-position:0% 0;
  color:var(--navy-deep);
  font-family:var(--ff-body),sans-serif;font-weight:600;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;
  text-align:center;min-block-size:52px;
  transition:background-position 900ms var(--ease);
}
.nav__panel-ask:hover{background-position:100% 0;}
[dir="rtl"] .nav__panel-ask{background-position:100% 0;}
[dir="rtl"] .nav__panel-ask:hover{background-position:0% 0;}

/* the four doors, as type. No chevrons anywhere, because no row has children,
   so nothing lies to the thumb. */
.nav__doors{display:flex;flex-direction:column;margin-block-start:10px;}
.nav__door{
  display:flex;flex-direction:column;gap:5px;
  padding-block:16px;min-block-size:56px;
  border-block-end:1px solid rgba(243,238,227,.14);
}
.nav__door-name{
  font-family:var(--ff-display),serif;font-weight:600;
  font-size:34px;line-height:1.12;letter-spacing:-.018em;color:var(--cream);
  transition:color .25s var(--ease);
}
.nav__door-note{
  font-family:var(--ff-mono);font-size:12px;line-height:1.5;
  letter-spacing:.02em;color:var(--cream-dim);
}
.nav__door:hover .nav__door-name,.nav__door:focus-visible .nav__door-name{color:var(--gold-hi);}
.nav__door.is-active .nav__door-name{color:var(--cream);}
.nav__door.is-active{border-block-end-color:var(--gold-soft);}

/* what the bar no longer carries. Nothing is deleted from the site: every one
   of these pages is still live at its own URL, in the panel and in the footer. */
.nav__more{display:flex;flex-direction:column;padding-block-start:8px;}
.nav__more a{
  display:flex;align-items:center;min-block-size:46px;padding-block:11px;
  font-family:var(--ff-body),sans-serif;font-size:14px;letter-spacing:.02em;
  color:var(--cream-soft);transition:color .25s var(--ease);
}
.nav__more a:hover{color:var(--cream);}
.nav__more a.is-active{color:var(--gold-hi);}

/* enquiries, set as type rather than crammed into a strip */
.nav__enq{margin-block-start:18px;padding-block-start:20px;border-block-start:1px solid rgba(243,238,227,.14);}
.nav__enq-eyebrow{
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--cream-dim);margin-block-end:12px;
}
.nav__enq-line{font-family:var(--ff-body),sans-serif;font-size:14px;line-height:1.6;color:var(--cream-soft);}
.nav__enq-link{
  display:inline-flex;align-items:center;min-block-size:44px;
  font-family:var(--ff-body),sans-serif;font-size:14px;color:var(--cream);
  margin-inline-end:22px;
}
.nav__enq-link:hover{color:var(--gold-hi);}

/* ---------- 6 · the 1024px switch ---------- */
@media (min-width:1024px){
  /* the disclosure and everything inside it leaves the document entirely, so
     an `open` attribute left behind by a resize cannot hang a panel under the
     desktop bar. JS clears the attribute as well. */
  .nav__disclosure{display:none;}
}
@media (max-width:1023.98px){
  .nav__links{display:none;}
  .nav__actions{margin-inline-start:auto;}
}
@media (max-width:860px){
  .nav__actions{gap:11px;}
  .nav__enquire{padding:11px 18px;}
}
@media (max-width:560px){
  /* Oct 2026: the wordmark is back on phones. It was hidden because the
     Arabic wordmark was wide enough to collide; the name is now Latin in every
     language (brand law), narrow at 12px, and leaves clear room before the
     language button down to 320px. The name is the brand; the mark alone
     does not say Elite Town. */
  .nav__brand{gap:9px;}
  .nav__in{padding:0 20px;}
  .nav__actions{gap:8px;}
  .nav__rule{display:none;}
  .lang-btn{padding:8px 11px;min-block-size:44px;}
  .nav__enquire{padding:11px 14px;font-size:11.5px;letter-spacing:.12em;min-block-size:44px;}
  .nav__panel{padding-inline:20px;}
  .nav__menubtn{padding:8px 4px;}
}
@media (max-width:479.98px){
  /* the word MENU stops being drawn but keeps its accessible name */
  .nav__menubtn-label{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
  .nav__menubtn{gap:0;}
}
/* landscape phones: 812x375 leaves about 297px of panel, so the ladder steps
   down a rung and the rows shorten. Nothing is lost, and nothing is clipped. */
@media (max-height:520px){
  .nav__door-name{font-size:26px;}
  .nav__door{padding-block:11px;min-block-size:44px;}
  .nav__more a{min-block-size:38px;padding-block:8px;}
  .nav__panel-ask{min-block-size:46px;padding-block:13px;}
  .nav__enq{margin-block-start:12px;padding-block-start:14px;}
}

/* ---------- 7 · Arabic ---------- */
/* Two live house-law breaches are corrected here rather than carried forward.
   styles.css:145 set the nav in Amiri at 15.5px with letter-spacing:.04em, and
   styles.css:159 set the language control in Amiri at 14px with .02em. Section
   2 never letterspaces Arabic, and puts Amiri's floor at 24px. Both take IBM
   Plex Sans Arabic, already loaded in every head, so the correction is free.
   Body compensation is x1.07: 14px becomes 15px. */
body.ar .nav__links a{
  font-family:var(--ff-ar-body);font-weight:500;font-size:15px;
  letter-spacing:normal;text-transform:none;
}
body.ar .lang-btn{
  font-family:var(--ff-ar-body);font-weight:500;font-size:15px;letter-spacing:normal;
}
body.ar .nav__enquire{
  font-family:var(--ff-ar-body);font-weight:600;font-size:15px;
  letter-spacing:normal;text-transform:none;
}
body.ar .nav__menubtn-label{
  font-family:var(--ff-ar-body);font-weight:500;font-size:15px;
  letter-spacing:normal;text-transform:none;
}
/* display compensation is x1.17: the 34px ladder step becomes 40px, and the
   26px landscape step becomes 30px. Both clear Amiri's 24px floor. */
body.ar .nav__door-name{
  font-family:var(--ff-ar-display),serif;font-weight:700;
  font-size:40px;line-height:1.35;letter-spacing:0;
}
@media (max-height:520px){body.ar .nav__door-name{font-size:30px;}}
/* Space Mono has no Arabic. The notes take Plex at 13px, the section 2 body
   floor, and the eyebrow with them. */
body.ar .nav__door-note,body.ar .nav__enq-eyebrow{
  font-family:var(--ff-ar-body);font-weight:400;font-size:13px;letter-spacing:normal;
}
body.ar .nav__enq-eyebrow{font-weight:600;text-transform:none;}
body.ar .nav__panel-ask{
  font-family:var(--ff-ar-body);font-weight:600;font-size:15px;
  letter-spacing:normal;text-transform:none;
}
body.ar .nav__more a,body.ar .nav__enq-line,body.ar .nav__enq-link{
  font-family:var(--ff-ar-body);font-size:15px;letter-spacing:normal;
}

/* ---------- 8 · no JavaScript ---------- */
/* <details> is why there is almost nothing to do here. The panel opens, the
   four doors and all eleven other destinations are reachable, the gold pill is
   an <a href="/contact?type=leasing"> and works, and the hero needs no
   compensating padding because the panel is fixed rather than in flow.
   The one honest gap is Arabic: translation is a runtime pass over data-i18n,
   so with JavaScript off the page stays English whatever ?lang= says. A
   control that promises عربية and delivers English is worse than none, so it
   is withdrawn and the panel's <noscript> line carries an Arabic route to a
   human instead. The real fix is static /ar/ pages, which is a site
   architecture job, not a nav job. */
html:not(.js) .lang-btn{display:none;}

/* ---------- 9 · legacy neutralisers ---------- */
/* The v27 dropdown is deleted from the markup and from the stylesheet above.
   These two rules are the belt to that braces: if a stale .nav__menu survives
   in any file, it inherits the closed panel's visibility instead of forcing
   itself visible, so it cannot put Leadership and Our Vision back into the tab
   order. Do not "tidy" them away. */
.nav__menu{visibility:inherit;}
.nav__caret,.nav__group{display:none;}
/* NAV-V32:end */

/* ============================================================
   v33 — THE DOOR ROW. Ruled rows under the hero. Homepage only.
   The pages demoted out of the bar in v32 become visible here,
   with one line each saying what is behind them. Precedent:
   Battersea Power Station. Uses only house tokens.
   ============================================================ */
.et-doors-sec{padding-block:clamp(48px,7vw,84px) clamp(40px,6vw,68px);}
.et-doors-h{font-family:var(--ff-display,"Fraunces",Georgia,serif);font-weight:600;
  font-size:clamp(22px,3.4vw,30px);line-height:1.15;letter-spacing:-.012em;
  margin:0 0 clamp(20px,3vw,30px);color:var(--cream);text-wrap:balance;}
.et-doors{display:grid;grid-template-columns:1fr;border-block-start:1px solid var(--gold-faint,rgba(214,178,94,.22));}
.et-door{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  column-gap:18px;row-gap:5px;
  padding-block:clamp(18px,2.6vw,26px);
  border-block-end:1px solid var(--gold-faint,rgba(214,178,94,.22));
  text-decoration:none;color:inherit;
  transition:padding-inline-start .4s var(--ease-lux,cubic-bezier(.22,1,.36,1)),
             background-color .4s var(--ease,ease);}
.et-door__name{grid-column:1;font-family:var(--ff-display,"Fraunces",Georgia,serif);font-weight:600;
  font-size:clamp(21px,3.2vw,29px);line-height:1.12;letter-spacing:-.012em;color:var(--cream);
  transition:color .35s var(--ease,ease);}
.et-door__note{grid-column:1;font-family:var(--ff-body,"Hanken Grotesk",system-ui,sans-serif);
  font-size:clamp(13.5px,1.5vw,15px);line-height:1.45;color:var(--cream-soft,rgba(243,238,227,.62));
  max-inline-size:52ch;}
.et-door__go{grid-column:2;grid-row:1 / span 2;align-self:center;
  font-family:var(--ff-mono,"Space Mono",monospace);font-size:17px;color:var(--gold);
  transition:transform .4s var(--ease-lux,cubic-bezier(.22,1,.36,1));}
[dir="rtl"] .et-door__go{transform:scaleX(-1);}

@media (hover:hover){
  .et-door:hover{padding-inline-start:14px;background-color:rgba(214,178,94,.045);}
  .et-door:hover .et-door__name{color:var(--gold);}
  .et-door:hover .et-door__go{transform:translateX(6px);}
  [dir="rtl"] .et-door:hover .et-door__go{transform:scaleX(-1) translateX(6px);}
}
.et-door:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  .et-door,.et-door__name,.et-door__go{transition:none;}
  .et-door:hover{padding-inline-start:0;}
  .et-door:hover .et-door__go{transform:none;}
  [dir="rtl"] .et-door:hover .et-door__go{transform:scaleX(-1);}
}

/* ============================================================
   v34 — MOBILE SWEEP. Four fixes found by rendering every page
   at 390 px rather than by reading the stylesheet.
   ============================================================ */

/* 1 · Footer links were 18 px tall. Apple and Google both put the
   floor at 44 px. The padding grows the target without moving the
   text, and the negative margin keeps the list rhythm unchanged. */
@media (max-width:860px){
  .footer li{margin-block-end:2px;}
  .footer li a{
    display:inline-block;
    padding-block:11px;
    padding-inline-end:12px;
    min-block-size:44px;
    line-height:22px;
  }
}

/* 2 · The wordmark link was a 30 x 30 target. It is the home link on
   a phone, where the wordmark itself is hidden, so it has to be
   reachable. The mark stays 30 px; only the hit area grows. */
@media (max-width:560px){
  .nav__brand{position:relative;}
  .nav__brand::after{
    content:"";position:absolute;
    inset-block:-8px;inset-inline:-10px;
    min-inline-size:44px;min-block-size:44px;
  }
}

/* 3 · The map labels dropped to 9 px on a phone, below anything
   readable at arm's length. 11 px is the floor used everywhere
   else on the site. */
@media (max-width:760px){
  .atlas__label{font-size:11px;}
}

/* 4 · Tap targets inside the atlas: the pins carry their own
   invisible 44 px circle so a thumb can find them. The pin is already
   position:absolute, which anchors the circle. (Oct 2026: this rule used to
   set position:relative, which on every touch screen pulled the pins off
   their map coordinates into one row of overlapping labels.) */
@media (hover:none){
  .atlas__pin::before{
    content:"";position:absolute;
    inset:-22px;border-radius:50%;
  }
}

/* ============================================================
   HERO FILM — invisible until it is ACTUALLY playing (Oct 2026)
   iOS Low Power Mode refuses autoplay by Apple policy and then draws its
   big native play glyph over any paused video that has a loaded src.
   So the film starts fully transparent and only fades in once the
   'playing' event has fired (site.js adds .is-playing). Until then the
   graded poster on .hero__bg carries the hero, so the glyph can never
   be seen. Fade uses the house easing; .8s keeps it gentle.
   ============================================================ */
.hero__video{opacity:0;transition:opacity .8s var(--ease);will-change:opacity;}
.hero__video.is-playing{opacity:1;}

/* belt and braces: never let WebKit paint its own controls on the film.
   One selector per rule on purpose — a browser that does not know a
   -webkit- pseudo-element would otherwise drop the whole list. */
.hero__video::-webkit-media-controls{display:none !important;-webkit-appearance:none;}
.hero__video::-webkit-media-controls-start-playback-button{display:none !important;-webkit-appearance:none;}
.hero__video::-webkit-media-controls-overlay-play-button{display:none !important;-webkit-appearance:none;}
.hero__video::-webkit-media-controls-panel{display:none !important;-webkit-appearance:none;}

/* The poster (background-image on .hero__bg, set inline in the HTML) must
   look exactly like the film so the fade-in is seamless. The film carries a
   filter; .hero__bg does not. A filter on .hero__bg itself would also grade
   the <video> child twice, so the grade lives on a ::before that inherits
   the parent's background-image and sits between the plain background and
   the film. Scoped to heroes that actually contain a film so the ken-burns
   stills on the other pages are untouched. */
.hero--img:has(.hero__video) .hero__bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:inherit;background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:var(--grade);                                   /* mirrors .hero--img .hero__video */
}
.hero--bright:has(.hero__video) .hero__bg::before{
  filter:brightness(.85) contrast(1.05) saturate(.95);   /* mirrors the inline rule in index.html (head <style>) */
}

/* ============================================================
   THREE-COLUMN PILLARS — one hairline grammar (Oct 2026)
   The base .pillar draws an inset ::after divider for the two-column
   layout. Pages that forced three columns with inline borders ended up
   with a doubled line after column 1, a clean one after column 2 and a
   stray half-height line on the outer edge. Here every divider is one
   full-height hairline between columns, and nothing on the outer edges.
   ============================================================ */
.pillars--3{grid-template-columns:repeat(3,1fr);}
.pillars--3 > .pillar::after{display:none;}
.pillars--3 > .pillar + .pillar{border-inline-start:1px solid var(--gold-faint);}
@media (max-width:860px){
  .pillars--3{grid-template-columns:1fr;}
  .pillars--3 > .pillar + .pillar{border-inline-start:0;}
}

/* Hero eyebrow: one line on wide screens; on a phone it breaks on purpose
   after the house name, so "Jeddah · 1949" sits together on line two instead
   of a dangling middot and an orphaned year. */
.hero .crest__br{display:none;}
@media (max-width:560px){
  .hero .crest__dot{display:none;}
  .hero .crest__br{display:inline;}
}

/* The only width where the phone wordmark meets the language button (320px,
   first-generation iPhone SE: 4px clear). Below 340px the mark carries the
   home link alone, as before. */
@media (max-width:340px){ .nav__wordmark{display:none;} }

/* ============================================================
   FOOTER, DESKTOP — rows, not columns (Oct 2026)
   Two tall stacked lists beside a mostly empty brand column read as a
   template. On desktop each group becomes one row: gold label, then its
   links in a line, beside the brand lockup. Phones keep the stacked,
   44px-tap lists (v34 mobile sweep, max-width:860px).
   ============================================================ */
@media (min-width:861px){
  .footer{padding-block:60px 38px;}
  .footer__grid{
    grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    column-gap:clamp(56px,7vw,112px);row-gap:26px;align-items:center;
    margin-block-end:48px;
  }
  .footer__grid > div:first-child{grid-row:1 / span 2;}
  .footer__grid > div:not(:first-child){display:flex;align-items:baseline;gap:28px;}
  .footer__grid h4{margin:0;flex:0 0 92px;}
  .footer__grid ul{display:flex;flex-wrap:wrap;column-gap:30px;row-gap:12px;}
  .footer__grid li{margin:0;}
  .footer__brand{margin-block-end:14px;}
}
/* Small laptops and tablets in landscape: the brand sits above, so each
   link group keeps one clean line instead of wrapping beside it. */
@media (min-width:861px) and (max-width:1199px){
  .footer__grid{grid-template-columns:1fr;grid-template-rows:none;row-gap:22px;}
  .footer__grid > div:first-child{grid-row:auto;display:flex;align-items:center;gap:28px;margin-block-end:10px;}
  .footer__grid > div:first-child .footer__brand{margin-block-end:0;}
}
@media (min-width:861px) and (max-width:979px){
  .footer__grid ul{column-gap:20px;}
  .footer__grid > div:not(:first-child){gap:20px;}
}

/* ============================================================
   FOOTER, PHONE — tighter and fuller (Oct 2026)
   The stacked lists read sparse: 14px text on a 46px step. Company's
   eight short links now sit in two columns (four rows); Projects keeps
   one column because its names are long. Text goes to 15px. Every link
   keeps the 44px tap target from the v34 mobile sweep.
   ============================================================ */
@media (max-width:860px){
  .footer__grid > div:nth-child(2) ul{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;}
  .footer li a{font-size:15px;}
  .footer h4{margin-block-end:10px;}
  .footer__grid{gap:34px;}
}


/* ============================================================
   ATLAS — dots that show, and a phone layout that reads (Oct 2026)
   1. The gold dots were inline spans, so their size never applied: the
      map never showed a single dot, on any screen. They are blocks now.
   2. On a phone the stage takes the map's own 2:1 shape, so every dot sits
      on its city exactly as on desktop; the four long names move off the
      map into a tidy list beneath it (tapping a dot still opens its card).
   ============================================================ */
.atlas__dot{display:block;}
.atlas__legend{display:none;}
@media (max-width:760px){
  .atlas__stage{aspect-ratio:2/1;}
  .atlas__label{display:none;}
  .atlas__city{white-space:nowrap;transform:translateX(-50%);font-size:11px;}
  .atlas__legend{display:grid;gap:2px;max-inline-size:340px;margin:30px auto 0;padding:0;list-style:none;}
  .atlas__legend a{display:flex;align-items:center;gap:14px;min-block-size:44px;
    font-family:var(--ff-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-soft);
    border-block-end:1px solid var(--gold-faint);}
  body.ar .atlas__legend a{font-family:var(--ff-ar-body);letter-spacing:0;font-size:14px;}
  .atlas__legend li:last-child a{border-block-end:0;}
  .atlas__legend-dot{flex:0 0 8px;inline-size:8px;block-size:8px;border-radius:50%;background:var(--grad-gold);box-shadow:0 0 10px 2px rgba(214,178,94,.35);}
}
/* The map is geography and never mirrors: Jeddah stays west in Arabic too.
   The stage lays out left to right; Arabic text inside it still reads right
   to left (plaintext bidi takes each label's direction from its words). */
.atlas__stage{direction:ltr;}
[dir="rtl"] .atlas__stage .atlas__pin{transform:translate(-50%,-50%);}
.atlas__label,.atlas__city,.atlas__card{unicode-bidi:plaintext;text-align:start;}
/* Arabic letters join; tracking pulls them apart. City names in Arabic take
   the Arabic text face with no letter-spacing. */
body.ar .atlas__city{font-family:var(--ff-ar-body);letter-spacing:0;font-size:14px;}

/* Page heroes (Oct 2026): the photo starts below the top bar instead of
   behind it, so the top of every picture shows. On the palace pages the
   roofline was hidden under the bar; now it sits clear with sky above. */
.hero--page.hero--img .hero__bg{inset-block-start:var(--nav-h);background-position:50% 0;}

/* ============================================================
   ATLAS SPEC SHEET (Oct 2026) — the project card behind each map dot.
   One element at body level (#atlas-sheet) that site.js fills from the
   tapped pin, so no transformed ancestor can trap it. It reads like a sheet
   from an architect's drawing set: the photo in the house gold hairline
   frame, the name in Fraunces, a two-column spec table with Space Mono
   labels and tabular figures, a plate number ET·01 to ET·04, and a quiet
   "View project" line. Desktop (>760px): anchored beside the dot with a
   leader line, flipped when it would clip the stage. Phone (<=760px):
   a bottom sheet over a scrim; swipe down, tap the scrim or Esc to close.
   Physical left/top for placement (the map is geography and never
   mirrors); logical properties inside so Arabic reads right to left.
   ============================================================ */
.atlas-scrim{position:fixed;inset:0;z-index:200;background:rgba(7,26,47,.66);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .36s var(--ease);}
.atlas-scrim.is-on{opacity:1;}
.atlas-scrim[hidden]{display:none;}

.atlas-sheet{position:absolute;z-index:201;inline-size:304px;
  background:var(--navy-deep);border:1px solid var(--gold-soft);border-radius:4px;
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.35);
  color:var(--cream);text-align:start;outline:none;
  opacity:0;transform:translateY(6px);
  transition:opacity .28s var(--ease),transform .28s var(--ease);}
.atlas-sheet[hidden]{display:none;}
.atlas-sheet.is-on{opacity:1;transform:none;}
/* leader line from the card edge back to the dot (desktop only) */
.atlas-sheet::before{content:"";position:absolute;top:var(--leader-y,44px);left:-28px;inline-size:28px;block-size:1px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-soft) 100%);pointer-events:none;}
.atlas-sheet.is-left::before{left:auto;right:-28px;background:linear-gradient(270deg,var(--gold) 0%,var(--gold-soft) 100%);}
.atlas-sheet::after{content:"";position:absolute;top:calc(var(--leader-y,44px) - 2px);left:-2px;inline-size:5px;block-size:5px;border-radius:50%;background:var(--gold);pointer-events:none;}
.atlas-sheet.is-left::after{left:auto;right:-2px;}

.atlas-sheet__grab{display:none;}
.atlas-sheet__bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 0;}
/* plate number in the house pillar style (.pillar__num): Fraunces, gold, tracked */
.atlas-sheet__plate{font-family:var(--ff-display),serif;font-size:15px;letter-spacing:.18em;color:var(--gold);
  direction:ltr;unicode-bidi:isolate;line-height:1;}
.atlas-sheet__close{inline-size:36px;block-size:36px;margin-inline-end:-8px;display:grid;place-items:center;
  border:1px solid var(--gold-faint);border-radius:50%;background:transparent;color:var(--cream-soft);cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease);}
.atlas-sheet__close:hover{border-color:var(--gold-soft);color:var(--cream);}

.atlas-sheet__fig{position:relative;margin:10px 16px 0;aspect-ratio:16/9;background:var(--navy-2);overflow:hidden;border-radius:2px;}
.atlas-sheet__fig::before{content:"";position:absolute;inset:6px;z-index:4;pointer-events:none;
  border:1px solid var(--gold-soft);border-radius:1px;}
.atlas-sheet__img{display:block;inline-size:100%;block-size:100%;object-fit:cover;filter:var(--grade);
  opacity:0;transition:opacity .5s var(--ease);}
.atlas-sheet__img.is-loaded{opacity:1;}

.atlas-sheet__body{padding:14px 16px 4px;}
.atlas-sheet__title{font-family:var(--ff-display);font-weight:600;font-size:21px;line-height:1.15;letter-spacing:-.012em;color:var(--cream);margin:0 0 6px;}
.atlas-sheet__meta{display:flex;flex-wrap:wrap;align-items:baseline;font-family:var(--ff-body);font-size:12.5px;letter-spacing:.01em;color:var(--cream-soft);line-height:1.6;margin:0 0 12px;}
.atlas-sheet__sep{color:var(--gold);margin-inline:7px;}
/* the open pin's own map label fades: its name now heads the sheet, and the
   card edge would otherwise cut through the letters */
.atlas__label{transition:opacity .25s var(--ease);}
.atlas__pin[aria-expanded="true"] .atlas__label,.atlas__label.is-under{opacity:0;}
.atlas-sheet__spec{margin:0;border-block-start:1px solid var(--gold-faint);}
.atlas-sheet__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:16px;padding:9px 0;border-block-end:1px solid var(--gold-faint);}
.atlas-sheet__row dt{font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim);line-height:1.5;}
/* the figures carry the row: Fraunces, lining tabular numerals (grafted from the brochure card, kept to table scale) */
.atlas-sheet__row dd{margin:0;font-family:var(--ff-display),serif;font-size:18px;font-weight:500;color:var(--cream);line-height:1.2;
  font-variant-numeric:lining-nums tabular-nums;text-align:end;white-space:nowrap;letter-spacing:-.005em;}
.atlas-sheet__go{display:flex;align-items:center;justify-content:space-between;gap:12px;min-block-size:44px;
  font-family:var(--ff-body);font-size:13.5px;font-weight:500;letter-spacing:.02em;color:var(--cream);text-decoration:none;
  transition:color .25s var(--ease);}
.atlas-sheet__go .arrow{color:var(--gold);font-size:16px;line-height:1;transition:transform .3s var(--ease);}
.atlas-sheet__go:hover{color:var(--gold);}
.atlas-sheet__go:hover .arrow{transform:translateX(4px);}
[dir="rtl"] .atlas-sheet__go .arrow{transform:scaleX(-1);}
[dir="rtl"] .atlas-sheet__go:hover .arrow{transform:scaleX(-1) translateX(4px);}
.atlas-sheet :focus-visible{outline:1px solid var(--gold);outline-offset:3px;}
.atlas-sheet:focus{outline:none;}
/* the open pin keeps a stronger ring while its sheet is up */
.atlas__pin.is-active .atlas__dot{box-shadow:0 0 0 5px rgba(214,178,94,.3),0 0 30px 6px rgba(214,178,94,.6);}

/* Arabic: the site's Arabic faces, no tracking, no uppercase */
body.ar .atlas-sheet__title{font-family:var(--ff-ar-display);font-weight:700;font-size:23px;line-height:1.4;letter-spacing:0;}
body.ar .atlas-sheet__meta,body.ar .atlas-sheet__row dt,body.ar .atlas-sheet__go{font-family:var(--ff-ar-body);letter-spacing:0;text-transform:none;}
body.ar .atlas-sheet__meta{font-size:13px;line-height:1.8;}
body.ar .atlas-sheet__row dt{font-size:12.5px;}
body.ar .atlas-sheet__row dd{font-family:var(--ff-ar-body);font-size:17px;font-weight:600;letter-spacing:0;}
body.ar .atlas-sheet__go{font-size:14.5px;}

/* Phone: bottom sheet */
@media (max-width:760px){
  .atlas-sheet{position:fixed;left:0;right:0;top:auto;bottom:0;inline-size:auto;
    max-block-size:calc(100dvh - 56px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    border-radius:18px 18px 0 0;border-block-end:0;
    padding-block-end:max(14px,env(safe-area-inset-bottom));
    opacity:1;transform:translateY(100%);
    transition:transform .46s var(--ease-lux);}
  .atlas-sheet.is-on{transform:none;}
  .atlas-sheet.is-dragging{transition:none;}
  .atlas-sheet::before,.atlas-sheet::after{display:none;}
  .atlas-sheet__grab{display:block;inline-size:36px;block-size:4px;border-radius:2px;background:rgba(243,238,227,.28);margin:10px auto 0;}
  .atlas-sheet__bar{padding:4px 20px 0;}
  .atlas-sheet__close{inline-size:44px;block-size:44px;margin-inline-end:-12px;}
  .atlas-sheet__fig{margin:2px 20px 0;aspect-ratio:2/1;}
  .atlas-sheet__body{padding:16px 20px 6px;}
  .atlas-sheet__title{font-size:24px;}
  .atlas-sheet__meta{font-size:13.5px;}
  body.ar .atlas-sheet__meta{font-size:14px;}
  .atlas-sheet__row{padding:11px 0;}
  .atlas-sheet__row dd{font-size:20px;}
  body.ar .atlas-sheet__row dd{font-size:18px;}
  .atlas-sheet__go{min-block-size:50px;font-size:14.5px;}
  html.atlas-lock,html.atlas-lock body{overflow:hidden;}
}
@media (prefers-reduced-motion:reduce){
  .atlas-sheet,.atlas-scrim,.atlas-sheet__img,.atlas-sheet__go .arrow,.atlas-sheet__close{transition:none!important;}
}