/* =========================================================
   Ruboo Taiba Real Estate — ربوع طيبة العقارية
   Identity v2: navy · azure · sky · ice — Amiri (primary) + Tajawal (secondary)
   Signatures: the 52.3° roofline cut, the foundation square, the three bars, the skyline pattern.
   No warm colours. Sharp corners; 2px only on buttons, inputs and badges.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand (tokens.json v2) */
  --navy:#0D1788;--blue:#0A63C9;--sky:#5BA4F7;--night:#080C4A;--ice:#E9F1FC;
  --ink:#171A3D;--stone:#5E6178;--mist:#F4F5FB;--line:#DCDEEA;--paper:#FFFFFF;
  /* functional colours (state, not decoration) */
  --field:#7F8194;--ok:var(--navy);--err:#B42318;   /* field borders: neutral, 3.8:1 on paper, 3.5:1 on mist, 3.4:1 on ice. The identity has no green: WhatsApp and success use brand colours */
  --on-dark:#FFFFFF;--on-dark-2:rgb(255 255 255/.76);--line-dark:rgb(255 255 255/.14);
  --shade:var(--ice);                           /* the photo "shadow" (hero + band): ice multiplied — the client's "very light blue, like a shadow" */
  /* roles */
  --bg:var(--paper);--fg:var(--ink);--heading:var(--navy);--muted:var(--stone);--hair:var(--line);--accent:var(--blue);--focus:var(--blue);
  --logo-a:var(--navy);--logo-b:var(--blue);
  /* type */
  --f-head:"Amiri","Traditional Arabic","Times New Roman",serif;
  --f-ui:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
  --f-text:var(--f-ui);
  --f-num:"Tajawal","Segoe UI",Arial,sans-serif;
  --head-w:400;                                 /* display weight, Latin/Cyrillic (regular serif, as the luxury references); ar/ur/zh 700 below */
  --head-lh:1.16;--text-lh:1.7;--scale:1;--measure:60ch;--track-label:.14em;--case-label:uppercase;
  --fs-hero:calc(clamp(2.5rem,1.5rem + 2.9vw,4rem)*var(--scale));        /* 40 → 64 */
  --fs-h2:calc(clamp(2rem,1.55rem + 1.2vw,2.75rem)*var(--scale));        /* 32 → 42 @1440 → 44 */
  --fs-h3:calc(clamp(1.375rem,1.25rem + .4vw,1.625rem)*var(--scale));    /* 22 → 26 */
  --fs-title:calc(1.375rem*var(--scale));                                /* Amiri list titles, 22 */
  --fs-h4:1.125rem;--fs-lead:clamp(1.125rem,1.06rem + .25vw,1.3125rem);  /* lead 18 → 21 */
  --fs-label:.8125rem;                                                   /* 13 px labels / eyebrows (kit "label") */
  --fs-body:1.0625rem;--fs-sm:.9375rem;--fs-xs:.8125rem;
  /* space & shape */
  --section-y:clamp(4rem,2.6rem + 5.4vw,7.5rem);--gutter:clamp(1rem,.4rem + 3vw,3rem);--wrap:1240px;
  --r:2px;--shadow:0 18px 40px rgb(13 23 136/.10);--shadow-deep:0 24px 48px rgb(8 12 74/.16),0 2px 6px rgb(8 12 74/.08);   /* kit maximum */
  --ease:cubic-bezier(.16,1,.3,1);--t:.25s;
  --tan:.772;                                   /* roofline 52.3°: horizontal run per unit of height */
  /* header rows = what syncH() measures (72 + 28 + 48 = 148; solid 48; compact 64 + 40 = 104), so nothing jumps when app.js runs */
  --mast-h:72px;--strip-h:28px;--nav-h:48px;--bar-h:64px;--hdr-h:148px;--hdr-top:148px;--hdr-solid:48px;--ribbon-h:0px;
  /* skyline pattern & bars glyph (identity kit) */
  --pattern-navy:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'110'%20height%3D'150'%3E%3Cpath%20fill%3D'%23ffffff'%20fill-opacity%3D'0.07'%20d%3D'M0%200L14%2018.13L14%20150L0%20150ZM22%2028.49L36%2046.62L36%20150L22%20150ZM44%2056.98L58%2075.11L58%20150L44%20150ZM66%2085.47L80%20103.6L80%20150L66%20150ZM88%20113.96L102%20132.09L102%20150L88%20150Z'%2F%3E%3C%2Fsvg%3E");
  --pattern-night:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'110'%20height%3D'150'%3E%3Cpath%20fill%3D'%235ba4f7'%20fill-opacity%3D'0.10'%20d%3D'M0%200L14%2018.13L14%20150L0%20150ZM22%2028.49L36%2046.62L36%20150L22%20150ZM44%2056.98L58%2075.11L58%20150L44%20150ZM66%2085.47L80%20103.6L80%20150L66%20150ZM88%20113.96L102%20132.09L102%20150L88%20150Z'%2F%3E%3C%2Fsvg%3E");
  --skyline:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1200'%20height%3D'220'%3E%3Cpath%20d%3D'M0%2060L14%2078.13L14%20220L0%20220ZM22%2088.49L36%20106.62L36%20220L22%20220ZM44%20116.98L58%20135.11L58%20220L44%20220ZM88%2020L102%2038.13L102%20220L88%20220ZM110%2048.49L124%2066.62L124%20220L110%20220ZM132%2076.98L146%2095.11L146%20220L132%20220ZM176%20100L190%20118.13L190%20220L176%20220ZM198%20128.49L212%20146.62L212%20220L198%20220ZM220%20156.98L234%20175.11L234%20220L220%20220ZM264%2040L278%2058.13L278%20220L264%20220ZM286%2068.49L300%2086.62L300%20220L286%20220ZM308%2096.98L322%20115.11L322%20220L308%20220ZM352%200L366%2018.13L366%20220L352%20220ZM374%2028.49L388%2046.62L388%20220L374%20220ZM396%2056.98L410%2075.11L410%20220L396%20220ZM440%2080L454%2098.13L454%20220L440%20220ZM462%20108.49L476%20126.62L476%20220L462%20220ZM484%20136.98L498%20155.11L498%20220L484%20220ZM528%2030L542%2048.13L542%20220L528%20220ZM550%2058.49L564%2076.62L564%20220L550%20220ZM572%2086.98L586%20105.11L586%20220L572%20220ZM616%20110L630%20128.13L630%20220L616%20220ZM638%20138.49L652%20156.62L652%20220L638%20220ZM660%20166.98L674%20185.11L674%20220L660%20220ZM704%2050L718%2068.13L718%20220L704%20220ZM726%2078.49L740%2096.62L740%20220L726%20220ZM748%20106.98L762%20125.11L762%20220L748%20220ZM792%2010L806%2028.13L806%20220L792%20220ZM814%2038.49L828%2056.62L828%20220L814%20220ZM836%2066.98L850%2085.11L850%20220L836%20220ZM880%2090L894%20108.13L894%20220L880%20220ZM902%20118.49L916%20136.62L916%20220L902%20220ZM924%20146.98L938%20165.11L938%20220L924%20220ZM968%2070L982%2088.13L982%20220L968%20220ZM990%2098.49L1004%20116.62L1004%20220L990%20220ZM1012%20126.98L1026%20145.11L1026%20220L1012%20220ZM1056%2025L1070%2043.13L1070%20220L1056%20220ZM1078%2053.49L1092%2071.62L1092%20220L1078%20220ZM1100%2081.98L1114%20100.11L1114%20220L1100%20220ZM1144%2095L1158%20113.13L1158%20220L1144%20220ZM1166%20123.49L1180%20141.62L1180%20220L1166%20220ZM1188%20151.98L1202%20170.11L1202%20220L1188%20220Z'%2F%3E%3C%2Fsvg%3E");
  --bars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 100'%3E%3Cpath d='M0 0L14 18.13L14 100L0 100ZM22 28.49L36 46.62L36 100L22 100ZM44 56.98L58 75.11L58 100L44 100Z'/%3E%3C/svg%3E");
  color-scheme:light;
}
.on-dark{--bg:var(--navy);--fg:var(--on-dark);--heading:var(--on-dark);--muted:var(--on-dark-2);--hair:var(--line-dark);
  --accent:var(--sky);--focus:var(--sky);--logo-a:var(--paper);--logo-b:var(--sky);color:var(--fg);color-scheme:dark}

:root:lang(ar){--f-text:var(--f-head);--text-lh:1.9;--fs-body:1.125rem;--head-lh:1.45;--track-label:0;--case-label:none;--measure:56ch;
  --head-w:700;--fs-label:.9375rem}             /* the kit's Arabic headings stay Amiri 700; labels 15 px, never tracked or cased */
/* Urdu: Amiri's Naskh covers every Urdu letter (ٹ ڈ ڑ ں ے ۓ); Tajawal's Urdu coverage is unverified, so it is not used for Urdu words */
:root:lang(ur){--f-text:var(--f-head);--f-ui:"Amiri","Traditional Arabic",serif;--head-lh:1.6;--text-lh:2;--fs-body:1.125rem;--scale:.94;
  --track-label:0;--case-label:none;--measure:52ch;--head-w:700;--fs-label:.9375rem}
/* Chinese: Latin and digits stay in the brand faces, Han falls through to Noto SC */
:root:lang(zh){--f-head:"Amiri","Noto Serif SC","Songti SC",serif;--f-ui:"Tajawal","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;--f-text:var(--f-ui);
  --head-lh:1.35;--text-lh:1.85;--scale:.88;--track-label:.04em;--case-label:none;--measure:34em;--head-w:700}
/* Russian: neither brand face has Cyrillic */
:root:lang(ru){--f-head:"PT Serif","Amiri",Georgia,serif;--f-ui:"Tajawal","PT Sans","Segoe UI",sans-serif;--f-text:var(--f-ui);--scale:.92;--head-lh:1.18}
:root:is(:lang(fr),:lang(es)){--scale:.95}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-solid) + 16px);background:var(--paper)}   /* the ribbon scrolls away, so it is not counted */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/var(--text-lh) var(--f-text);-webkit-font-smoothing:antialiased;font-synthesis:none;transition:opacity .16s}
body.is-swapping{opacity:.001}
img,video,svg,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--f-head);font-weight:var(--head-w);line-height:var(--head-lh);color:var(--heading);text-wrap:balance}
:root:not(:lang(ar)):not(:lang(ur)):not(:lang(zh)) :is(h1,h2){letter-spacing:-.005em}
h1{font-size:var(--fs-hero)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
h4{margin:0;font:700 var(--fs-h4)/1.4 var(--f-ui);color:var(--heading)}
:is(h1,h2,h3) em{font-style:italic;color:var(--accent)}
:root:is(:lang(ar),:lang(ur),:lang(zh),:lang(ru)) :is(h1,h2,h3) em{font-style:normal}
:root:is(:lang(ar),:lang(ur)) :not(:lang(en)){letter-spacing:0!important}
:root:lang(ur) :is(h1,h2,h3){padding-block:.1em}
:root:lang(zh) body{line-break:strict}
:root:is(:lang(ru),:lang(fr),:lang(es)) p{hyphens:auto}
:root:is(:lang(ru),:lang(fr),:lang(es)) :is(.lead,.cine-tr){hyphens:manual}   /* display-size lines never break a word with a hyphen */
p{margin:0 0 1em;text-wrap:pretty}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--muted);max-width:var(--measure)}
:root:is(:lang(ar),:lang(ur)) .lead{line-height:1.9}
.muted{color:var(--muted)}
.fine{margin:0;font:400 var(--fs-xs)/1.6 var(--f-ui);color:var(--muted)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.sec{padding-block:var(--section-y);background:var(--bg)}
.sec--mist{background:var(--mist)}
.sec-navy{background:var(--night)}                 /* #lawyer is the only .sec-navy: night, the one dark tone (shared with the footer) */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:square;stroke-linejoin:miter}
.i-sm{width:16px;height:16px}
.i-lg{width:32px;height:32px}
.i-fill{fill:currentColor;stroke:none}
[dir=rtl] .i-dir{transform:scaleX(-1)}
.i-flip{transform:scaleX(-1)} [dir=rtl] .i-flip{transform:none}
.skip{position:fixed;z-index:100;inset-block-start:8px;inset-inline-start:8px;padding:.75rem 1rem;background:var(--night);color:#fff;transform:translateY(-200%)}
.skip:focus{transform:none}
.anchor-alias{position:absolute}
.mini-h{margin:0 0 .85rem;font:700 var(--fs-xs)/1.4 var(--f-ui);letter-spacing:var(--track-label);text-transform:var(--case-label);color:var(--muted)}
.icon-plain{inline-size:44px;block-size:44px;display:grid;place-items:center;background:none;border:0;color:inherit;border-radius:var(--r)}

/* ---------- 3. Brand motifs ---------- */
/* foundation square */
.sq{display:inline-block;inline-size:.5em;block-size:.5em;background:var(--accent);flex:none}
.h-sq::before{content:"";display:inline-block;inline-size:.34em;block-size:.34em;margin-inline-end:.42em;background:var(--blue);vertical-align:.08em}
.on-dark .h-sq::before{background:var(--sky)}
.sq-list{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.sq-list li{display:grid;grid-template-columns:10px 1fr;gap:.85rem;align-items:baseline}
.sq-list li::before{content:"";inline-size:10px;block-size:10px;background:var(--blue)}
.on-dark .sq-list li::before{background:var(--sky)}
/* eyebrow = the 8 px foundation square + a label (kit "label": 13 px caps .14em; ar/ur 15 px, no case, no tracking) */
/* block-level at content width: an inline box rode 6 px down on the column's line strut, so it never lined up with the label beside it */
.eyebrow{display:flex;inline-size:fit-content;align-items:flex-start;gap:.75rem;margin:0 0 1.25rem;font:700 var(--fs-label)/1.4 var(--f-ui);
  letter-spacing:var(--track-label);text-transform:var(--case-label);color:var(--accent)}
.eyebrow::before{content:"";flex:none;inline-size:8px;block-size:8px;margin-block-start:.4em;background:currentColor}
:root:is(:lang(ar),:lang(ur)) .eyebrow{font-weight:500}
:root:lang(ur) .eyebrow{font-family:var(--f-head)}
.eyebrow + .h-sq::before{display:none}            /* index H2s lose the square once an eyebrow precedes them; partners.html keeps its h1 square */
/* roofline cut — always the logo's top-right corner, never mirrored */
.cut{--cut:48px;clip-path:polygon(0 0,calc(100% - var(--cut)*var(--tan)) 0,100% var(--cut),100% 100%,0 100%)}
/* three bars as progress */
.bars{display:inline-flex;align-items:flex-end;gap:3px;block-size:28px}
.bars i{inline-size:6px;block-size:100%;background:var(--line);clip-path:polygon(0 0,100% 7.8px,100% 100%,0 100%);transition:background-color .4s}
.bars i:nth-child(2){block-size:66%} .bars i:nth-child(3){block-size:32%}
/* RTL keeps the bars stepping down to the right, like the mark (never mirrored) */
[dir=rtl] .bars i:first-child{block-size:32%} [dir=rtl] .bars i:nth-child(3){block-size:100%}
.bars i.is-on{background:var(--blue)} .bars i.is-done{background:var(--navy)}
.on-dark .bars i{background:var(--line-dark)} .on-dark .bars i:is(.is-on,.is-done){background:var(--sky)}
.note{display:flex;gap:.6rem;align-items:flex-start;margin:0;font:400 var(--fs-sm)/1.55 var(--f-ui);color:var(--muted)}
.note .i{inline-size:18px;block-size:18px;margin-top:2px;color:var(--navy)} .on-dark .note .i{color:var(--sky)}
.note:not(.cq-msg) .i,.elig-note .i{display:none}  /* static info icons go; the live condition notes keep theirs */
/* one label style everywhere */
:is(.mini-h,.journey-h,.faq h3,.foot-h,.pop-h){font:700 var(--fs-label)/1.4 var(--f-ui);letter-spacing:var(--track-label);text-transform:var(--case-label)}
:root:is(:lang(ar),:lang(ur)) :is(.mini-h,.journey-h,.faq h3,.foot-h,.pop-h,.book-steps li,.elig-head h3){font-weight:500}
:is(.journey-h,.faq h3,.glance .mini-h){color:var(--stone)}

/* ---------- 4. Buttons, links, inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-block-size:48px;padding:0 1.5rem;border:1px solid transparent;border-radius:var(--r);
  text-decoration:none;font:500 1rem/1.2 var(--f-ui);text-align:center;cursor:pointer;
  transition:background-color var(--t),border-color var(--t),color var(--t),transform .12s}
.btn:active{transform:translateY(1px)}
/* kit heights 48/56/40. Exactly one filled button per view; WhatsApp is the outline */
.btn--lg{min-block-size:56px;padding-inline:2rem;font-size:1.0625rem}
.btn--sm{min-block-size:40px;padding:0 1rem;font-size:.9375rem}
.btn--primary{background:var(--navy);color:#fff}
.btn--primary:hover{background:var(--night)}
.on-dark .btn--primary:hover{background:var(--night)}
.btn--navy{background:var(--navy);color:#fff} .btn--navy:hover{background:var(--night)}
.btn--light{background:var(--paper);color:var(--navy)} .btn--light:hover{background:var(--ice)}
.btn--ghost{background:transparent;color:var(--navy);border-color:currentColor}
.btn--ghost:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.on-dark .btn--ghost{color:var(--on-dark)} .on-dark .btn--ghost:hover{background:var(--paper);border-color:var(--paper);color:var(--navy)}
.btn--wa{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--wa:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.on-dark .btn--wa{background:transparent;color:#fff;border-color:rgb(255 255 255/.72)}
.on-dark .btn--wa:hover{background:var(--paper);border-color:var(--paper);color:var(--navy)}
/* white cards inside dark sections switch back to the light-ground outline */
.on-dark :is(.elig-result,.book) .btn--wa{background:transparent;color:var(--navy);border-color:var(--navy)}
.on-dark :is(.elig-result,.book) .btn--wa:hover{background:var(--navy);color:#fff}
/* follow-up states, where WhatsApp IS the next step: the kit's blue accent */
:is(.rq-done,.book-done) .btn--wa,.on-dark .book-done .btn--wa{background:var(--blue);border-color:var(--blue);color:#fff}
:is(.rq-done,.book-done) .btn--wa:hover,.on-dark .book-done .btn--wa:hover{background:var(--navy);border-color:var(--navy)}
.btn--block{inline-size:100%}
.btn:disabled{opacity:.6;cursor:progress}
.btn .arr{transition:transform var(--t) var(--ease)}
.btn:hover .arr{transform:translateX(3px)} [dir=rtl] .btn:hover .arr{transform:scaleX(-1) translateX(3px)}
@media (max-width:479px){.btn{white-space:normal}}
.tlink{display:inline-flex;align-items:center;gap:.5rem;min-block-size:44px;padding:0;border:0;background:none;color:var(--accent);text-decoration:none;font:500 1rem/1.35 var(--f-ui);cursor:pointer}
.tlink>span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color var(--t)}
.tlink:hover>span{text-decoration-color:currentColor}
.tlink .arr{inline-size:18px;block-size:18px;transition:transform var(--t) var(--ease)}
.tlink:hover .arr{transform:translateX(3px)} [dir=rtl] .tlink:hover .arr{transform:scaleX(-1) translateX(3px)}
.tlink:hover .arr.i-flip{transform:scaleX(-1) translateX(3px)} [dir=rtl] .tlink:hover .arr.i-flip{transform:translateX(3px)}
.tlink--muted{color:var(--muted)}
.tlink--btn{background:none}
.icon-btn{inline-size:44px;block-size:44px;display:grid;place-items:center;flex:none;border:1px solid var(--line);border-radius:var(--r);background:transparent;color:var(--navy)}
.icon-btn:hover{border-color:var(--navy)}
.field{display:grid;gap:.45rem;min-inline-size:0}
.field label,.flabel{font:500 .875rem/1.35 var(--f-ui);color:var(--navy)}   /* sentence case: long ru/fr/es questions stay readable */
:root:is(:lang(ar),:lang(ur)) :is(.field label,.flabel){font-size:.9375rem}
.field small,summary small{font-weight:400;color:var(--muted)}
.input{min-block-size:56px;inline-size:100%;padding:0 1rem;border:1px solid var(--field);border-radius:var(--r);background:var(--paper);color:var(--ink);
  font:400 1rem/1.4 var(--f-ui);transition:border-color var(--t)}
.input:hover{border-color:var(--navy)}
.input:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.input--sm{min-block-size:44px;font-size:.9375rem;padding:0 .75rem}
textarea.input{padding-block:.85rem;min-block-size:96px;resize:vertical}
select.input{appearance:none;-webkit-appearance:none;padding-inline-end:2.5rem;cursor:pointer;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D1788' stroke-width='1.75' stroke-linecap='square'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E") no-repeat right .8rem center/16px}
[dir=rtl] select.input{background-position:left .8rem center}
.input[aria-invalid=true]{border-color:var(--err)}
.input[type=tel],.input[type=email],.input.code,.num-in{direction:ltr}
[dir=rtl] :is(.input[type=tel],.input[type=email]){text-align:end}
.field .err{font:500 .8125rem/1.4 var(--f-ui);color:var(--err)}
.on-dark .field .err{color:#FFB4A8}
/* phone: country code + number, always written left-to-right */
.tel{display:grid;grid-template-columns:auto minmax(0,1fr);direction:ltr}
.cc{position:relative;display:flex;align-items:center;gap:.4rem;min-block-size:56px;padding:0 .7rem 0 .9rem;border:1px solid var(--field);border-right:0;border-radius:var(--r) 0 0 var(--r);
  background:var(--paper);color:var(--navy);font:700 1rem/1 var(--f-num);font-variant-numeric:tabular-nums}
.cc select{position:absolute;inset:0;inline-size:100%;block-size:100%;opacity:0;cursor:pointer;font-size:16px;border:0}
.cc:hover{border-color:var(--navy)}
.cc:focus-within{outline:2px solid var(--blue);outline-offset:0;z-index:1}
.cc .i{color:var(--stone)}
.tel .input,[dir=rtl] .tel .input{border-radius:0 var(--r) var(--r) 0;text-align:left}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-block-size:44px;padding:.5rem 1rem;border:1px solid var(--field);border-radius:var(--r);background:var(--paper);
  font:500 .9375rem/1.2 var(--f-ui);color:var(--ink);text-align:start;transition:background-color var(--t),border-color var(--t),color var(--t)}   /* long condition answers wrap inside the chip */
.chip:hover{border-color:var(--navy)}
.chip .i{color:var(--navy);transition:color var(--t)}
.chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.chip[aria-pressed=true] .i{color:var(--sky)}
/* property types: a 2×2 grid of 52 px rows with 24 px kit icons */
.chips--types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.chips--types .chip{flex-direction:row;justify-content:flex-start;gap:.65rem;min-block-size:52px;padding:0 1rem;font-size:.9375rem}
.chips--types .chip .i{inline-size:24px;block-size:24px}
.form-grid{display:grid;gap:1.15rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-msg{margin:0;min-block-size:1.2em;font:500 .9375rem/1.5 var(--f-ui)}
/* kept in the accessibility tree while empty, so its first message is announced */
.form-msg:empty{position:absolute;inline-size:1px;block-size:1px;margin:0;overflow:hidden;clip-path:inset(50%)}
.form-msg.ok{color:var(--ok)} .form-msg.warn{color:var(--navy)} .form-msg.err{color:var(--err)}
.on-dark .form-msg.ok,.on-dark .form-msg.warn{color:var(--on-dark)} .on-dark .form-msg.err{color:#FFB4A8}
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--field);border-radius:var(--r)}
.seg-b:focus-visible{position:relative;z-index:1}
.seg-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-block-size:48px;padding:0 1rem;border:0;background:var(--paper);font:500 .9375rem/1.2 var(--f-ui);color:var(--ink)}
.seg-b+.seg-b{border-inline-start:1px solid var(--field)}
.seg-b[aria-pressed=true]{background:var(--navy);color:#fff}
.seg-b .i{inline-size:16px;block-size:16px}
.opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-block-size:56px;padding:.75rem 1.1rem;margin-block-end:.6rem;
  border:1px solid var(--line-dark);border-radius:var(--r);cursor:pointer;font:500 1rem/1.4 var(--f-ui);transition:background-color var(--t),border-color var(--t)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .i{opacity:0;color:var(--sky);transition:opacity var(--t)}
.opt:hover{background:rgb(255 255 255/.06)}
.opt.is-checked{border-color:var(--sky);box-shadow:inset 0 0 0 1px var(--sky)}
.opt.is-checked .i{opacity:1}
.opt:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.opt--light{border-color:var(--field);color:var(--ink)}
.opt--light:hover{background:var(--paper);border-color:var(--navy)}
.opt--light.is-checked{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:var(--paper)}   /* a 2 px navy frame + the check */
.opt--light .i{color:var(--navy)}
.range{inline-size:100%;accent-color:var(--blue);min-block-size:44px}
details.more{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.more summary{display:flex;align-items:center;gap:.5rem;min-block-size:48px;cursor:pointer;list-style:none;font:500 .9375rem/1.3 var(--f-ui);color:var(--blue)}
details.more summary::-webkit-details-marker{display:none}
/* a hairline plus / minus, drawn (no boxed glyph) */
details.more summary::before{content:"";flex:none;inline-size:12px;block-size:12px;border:0;
  background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat}
details.more[open] summary::before{content:"";background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat}
.more-in{display:grid;gap:1rem;padding-block:.25rem 1.1rem}

/* ---------- 5. Header ---------- */
/* Paper in both states, with the full-colour logo (the kit's own website header): nothing dark ever sits over the Haram */
.hdr{position:fixed;inset:0 0 auto;z-index:50;color:var(--ink);--logo-a:var(--navy);--logo-b:var(--blue);--focus:var(--blue);transition:transform .55s var(--ease)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);box-shadow:inset 0 -1px 0 var(--line);opacity:1}
.hdr:not(.hdr--compact)[data-state=solid]{transform:translateY(calc(-1*(var(--mast-h) + var(--strip-h))))}
.hdr-mast-in{block-size:var(--mast-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.hdr-start{display:flex;align-items:center;gap:.75rem;justify-self:start}
.hdr-end{justify-self:end;display:flex;align-items:center;gap:.5rem}
/* language toggle: plain text; the current language is navy with a 2 px blue underline; 44 px targets */
.lang-quick{display:flex;align-items:center;gap:.25rem;border:0}
.lang-quick button{min-block-size:44px;padding:0 .6rem;border:0;background:none;color:var(--stone);font:500 .875rem/1 "Tajawal","Segoe UI",sans-serif}
.lang-quick button+button{border:0}
.lang-quick button[aria-pressed=true]{background:none;color:var(--navy);font-weight:700;box-shadow:inset 0 -2px 0 var(--blue)}
.lang-more{display:inline-flex;align-items:center;gap:.4rem;min-block-size:44px;padding:0 .5rem;background:none;border:0;color:var(--stone);font:500 .875rem/1 var(--f-ui)}
.lang-more--c{display:none}
.hdr-wa{display:inline-flex;align-items:center;gap:.5rem;min-block-size:44px;text-decoration:none;font:500 .9375rem/1 var(--f-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.hdr-wa .i{color:var(--blue)}
.hdr[data-state=solid] .hdr-wa .i{color:var(--blue)}
.lockup{display:grid;justify-items:center;gap:6px;color:inherit;text-decoration:none}
.logo-h{inline-size:190px;block-size:44px}
.lk-en{font:700 .6875rem/1 "Amiri","Times New Roman",serif;letter-spacing:.14em!important;text-transform:uppercase;white-space:nowrap;color:var(--navy)}   /* kit: the English name in Amiri 700 caps */
/* the client's bilingual line (never translated) */
.hdr-strip{display:flex;align-items:center;justify-content:center;gap:.9rem;block-size:var(--strip-h);border-block:0;color:var(--navy);font:500 .75rem/1.2 "Tajawal","Segoe UI",sans-serif;transition:opacity .3s}
.hdr-strip [lang=ar]{font-size:.8125rem}
.hdr-strip [lang=en]{color:var(--stone)}
.hdr-strip .sq{inline-size:8px;block-size:8px;background:var(--blue)}
.hdr[data-state=solid] .hdr-strip .sq{background:var(--blue)}
.hdr-nav{box-shadow:inset 0 1px 0 var(--line)}
.hdr[data-state=solid] .hdr-nav,.hdr--compact .hdr-nav{box-shadow:none}
.hdr-nav-in{position:relative;block-size:var(--nav-h);display:flex;align-items:center;justify-content:center}
.mini-mark{position:absolute;inset-inline-start:0;inline-size:33px;block-size:33px;opacity:0;transition:opacity .4s .15s;pointer-events:none}
.hdr[data-state=solid] .mini-mark{opacity:1}
#mainnav{--np:12px;display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:4px;min-width:0;max-width:calc(100% - 88px);overflow:hidden;white-space:nowrap}
#mainnav>li{display:flex;align-items:center}
#mainnav a{display:inline-flex;align-items:center;gap:.35rem;min-block-size:44px;padding-inline:var(--np);color:inherit;text-decoration:none;font:500 .9375rem/1 var(--f-ui);
  background:linear-gradient(currentColor,currentColor) no-repeat var(--np) calc(100% - 8px)/0 1px;transition:background-size var(--t) var(--ease),color var(--t)}
[dir=rtl] #mainnav a{background-position:calc(100% - var(--np)) calc(100% - 8px)}
#mainnav a:hover,#mainnav a[aria-current=true]{background-size:calc(100% - 2*var(--np)) 1px}
#mainnav a[aria-current=true]{color:var(--navy)}
.hdr[data-state=solid] #mainnav a[aria-current=true]{color:var(--navy)}
@media (max-width:1439px){#mainnav{--np:9px}#mainnav a{font-size:.875rem}}
/* French and Russian keep that sizing at every width: their full nav needs 1179 / 1147 px at .9375rem but the bar never has more
   than 1152 px (the wrap is capped), so fitNav() dropped big screens to the burger header after the first paint */
:root:is(:lang(fr),:lang(ru)) #mainnav{--np:9px} :root:is(:lang(fr),:lang(ru)) #mainnav a{font-size:.875rem}
/* the 52 px list overflows the 48 px bar by 2 px, so a ring outside the link lost its top edge in the solid header (y = −2): draw it inside */
#mainnav :is(a,button):focus-visible{outline-offset:-2px}
.hdr[data-state=solid] #mainnav .nav-fi:focus-visible,#mainnav .nav-fi:hover:focus-visible{outline-color:#fff}   /* on the navy button */
.has-mega>a{padding-inline-end:4px!important}
.mega-btn{inline-size:44px;block-size:44px;display:grid;place-items:center;background:none;border:0;color:inherit}
.mega-btn .i{transition:transform .3s}
.mega-btn[aria-expanded=true] .i{transform:rotate(180deg)}
/* WhatsApp item: quiet text at the top, the one header button once solid; the same box in both states (fitNav measures it) */
#mainnav .nav-fi{gap:.55rem;min-block-size:44px;margin-inline-start:.75rem;padding-inline:14px 16px;background:transparent;color:inherit;border-radius:var(--r);transition:background-color var(--t),color var(--t)}
#mainnav .nav-fi .i{color:var(--blue)}
#mainnav .nav-fi:hover,.hdr[data-state=solid] #mainnav .nav-fi{background:var(--navy);color:#fff}
:is(#mainnav .nav-fi:hover,.hdr[data-state=solid] #mainnav .nav-fi) .i{color:#fff}
.hdr[data-state=solid] #mainnav .nav-fi:hover{background:var(--night)}
#mainnav .nav-fi[aria-current=true]{box-shadow:inset 0 -3px 0 var(--sky)}
.nav-fi .sq{inline-size:7px;block-size:7px;background:var(--sky)}
/* "Find a property" menu: an editorial row (no tiles) */
.mega{position:absolute;inset-inline:0;top:100%;background:var(--paper);color:var(--ink);box-shadow:0 24px 48px rgb(8 12 74/.10);border-top:1px solid var(--line);
  clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path .4s var(--ease),opacity .4s;max-block-size:calc(100vh - var(--hdr-h));overflow-y:auto}
.mega.is-open{clip-path:inset(0 0 -60px 0);opacity:1}
.mega-in{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 3rem;padding-block:2rem 2.25rem}
.mega-types{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;flex:1 1 620px}
.mega-types a{display:grid;justify-items:start;gap:.6rem;padding:.5rem 1.5rem;border:0;border-inline-start:1px solid var(--line);text-decoration:none;color:var(--navy);
  font:var(--head-w) var(--fs-title)/1.25 var(--f-head);transition:border-color var(--t),background-color var(--t),color var(--t)}
.mega-types li:first-child a{border-inline-start:0;padding-inline-start:0}
.mega-types a:hover,.mega-types a:focus-visible{background:none;border-color:var(--line);color:var(--blue)}
.mega-types .i{inline-size:24px;block-size:24px;color:var(--blue)}
.mega{--focus:var(--blue)}
.mega-note{flex:0 1 16rem;margin:0;font:400 1rem/1.6 var(--f-ui);color:var(--stone)}
.burger{display:none}
/* compact / mobile header */
.hdr--compact{--mast-h:var(--bar-h);--strip-h:40px}
.hdr--compact .hdr-nav,.hdr--compact .lang-quick,.hdr--compact .hdr-wa,.hdr--compact #langBtn{display:none}
.hdr--compact .burger{display:grid}
/* phones: the language button shows the current language, so the switch is visible at a glance */
.hdr--compact .lang-more--c{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;inline-size:auto;min-inline-size:44px;padding:0 .3rem;
  font:700 .8125rem/1 "Tajawal","Segoe UI",sans-serif;letter-spacing:.04em}
.hdr--compact .hdr-mast-in{grid-template-columns:minmax(56px,auto) 1fr minmax(56px,auto);gap:.25rem}
.hdr--compact .hdr-end{justify-self:end}
.hdr--compact .lockup{gap:4px}
.hdr--compact .logo-h{inline-size:180px;block-size:41.7px}
.hdr--compact .lk-en{font-size:.625rem;letter-spacing:.12em!important}
.hdr--compact .hdr-strip{flex-direction:column;gap:3px;border-block-end:0;line-height:1.15}
.hdr--compact .hdr-strip .sq{display:none}
.hdr--compact .hdr-strip [lang=en]{font-size:.6875rem;opacity:.9}
.hdr--compact[data-state=solid] .hdr-strip{opacity:0;transform:translateY(-100%);pointer-events:none;position:absolute;inset-inline:0}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr.is-hidden:focus-within{transform:none}        /* the auto-hidden compact header comes back when Tab reaches its controls (WCAG 2.4.7 / 2.4.11) */
/* language popover */
.pop{position:fixed;z-index:70;inset-block-start:calc(var(--hdr-h) - 8px);inset-inline-start:max(var(--gutter),calc((100vw - var(--wrap))/2));inline-size:min(320px,calc(100vw - 2rem));
  padding:1.25rem;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-top:1px solid var(--line);box-shadow:var(--shadow-deep)}
.pop[data-side=end]{inset-inline-start:auto;inset-inline-end:var(--gutter)}
/* full header: "More" sits in the mast, so its menu opens right under the mast (not under the nav row, 80 px away) */
.hdr:not(.hdr--compact) ~ .pop:not([data-side=end]){inset-block-start:calc(var(--mast-h) - 6px)}
.pop-h{display:block;margin:0 0 .5rem;font:700 var(--fs-xs)/1.3 var(--f-ui);letter-spacing:var(--track-label);text-transform:var(--case-label);color:var(--stone)}
.pop-langs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pop-langs button{inline-size:100%;display:grid;text-align:start;gap:1px;padding:.55rem .7rem;min-block-size:48px;border:0;background:transparent;border-radius:var(--r)}
.pop-langs button:hover{background:var(--mist)}
.pop-langs button b{font:700 1rem/1.25 "Tajawal","Segoe UI",sans-serif;color:var(--navy)}
.pop-langs button :is(b,small){justify-self:start}               /* a name and its English gloss share one edge, whatever the script's direction */

.pop-langs button b[lang=zh]{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
.pop-langs button small{font:400 .75rem/1.2 "Tajawal","Segoe UI",sans-serif;color:var(--stone)}
.pop-langs button[aria-current=true]{background:var(--mist);box-shadow:inset 2px 0 0 var(--navy)}
[dir=rtl] .pop-langs button[aria-current=true]{box-shadow:inset -2px 0 0 var(--navy)}
.pop-note{margin:.75rem 0 0;font:400 .75rem/1.4 var(--f-ui);color:var(--stone)}
/* language suggestion ribbon: ice, right under the header; it scrolls away with the page (no fixed chrome); 44 px targets.
   Its height is written by app.js renderLangHint() as --ribbon-h: change both together */
.ribbon{position:absolute;z-index:45;inset-inline:0;inset-block-start:var(--hdr-top);background:var(--ice);color:var(--navy);box-shadow:inset 0 -1px 0 var(--line);--focus:var(--blue);transition:top .55s var(--ease)}
.ribbon-in{display:flex;align-items:center;justify-content:center;gap:1rem;block-size:44px}
.ribbon-go{display:inline-flex;align-items:center;gap:.5rem;min-block-size:44px;padding:0;border:0;background:none;color:var(--navy);
  font:500 .9375rem/1 "Tajawal","Noto Sans SC","Segoe UI",sans-serif;text-decoration:underline;text-underline-offset:.3em;text-decoration-color:var(--blue)}
.ribbon-go[lang=ur],.ribbon-go [lang=ur]{font-family:"Amiri",serif}
.ribbon .icon-plain{inline-size:44px;block-size:44px}
html.hdr-hidden .ribbon{top:var(--hdr-top)}
/* drawer: night, no pattern behind the menu, the kit's skyline at the end */
.drawer{margin:0;inset:0;inline-size:100%;max-inline-size:100%;block-size:100dvh;max-block-size:100dvh;padding:0;border:0;
  background:var(--night);color:var(--on-dark)}
.drawer::backdrop{background:rgb(8 12 74/.6)}
.drawer[open]{animation:drawerIn .55s var(--ease)}
@keyframes drawerIn{from{transform:translateX(-100%)}}
[dir=rtl] .drawer[open]{animation-name:drawerInR}
@keyframes drawerInR{from{transform:translateX(100%)}}
.drawer-in{display:grid;gap:1.25rem;padding:1rem var(--gutter) 0;max-inline-size:560px}
.drawer-in::after{content:"";display:block;block-size:120px;margin:1rem calc(-1*var(--gutter)) 0;background:rgb(91 164 247/.18);pointer-events:none;
  -webkit-mask:var(--skyline) repeat-x bottom/auto 100%;mask:var(--skyline) repeat-x bottom/auto 100%}
.drawer-top{display:flex;align-items:center;justify-content:space-between;min-block-size:64px}
.drawer-logo{inline-size:180px;block-size:41.7px}
.drawer-nav{list-style:none;margin:0;padding:0}
.drawer-nav>li{border-bottom:1px solid var(--line-dark)}
.drawer-nav a,.drawer-acc summary{display:flex;align-items:center;gap:.75rem;min-block-size:60px;padding-block:.5rem;text-decoration:none;color:inherit;
  font:var(--head-w) var(--fs-title)/1.3 var(--f-head);cursor:pointer;list-style:none}
.drawer-acc summary::-webkit-details-marker{display:none}
.drawer-acc summary .i{margin-inline-start:auto;transition:transform .3s}
.drawer-acc[open] summary .i{transform:rotate(180deg)}
.drawer-acc ul{list-style:none;margin:0 0 .75rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.25rem 1rem}
.drawer-acc ul a{min-block-size:44px;font:500 1rem/1.3 var(--f-ui);color:var(--on-dark-2)}
.drawer-acc ul a::before{content:"";inline-size:8px;block-size:8px;background:var(--sky);flex:none}
.drawer-langs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem}
.drawer-langs button{min-block-size:44px;padding:0 .25rem;border:1px solid transparent;background:none;color:var(--on-dark);font:500 .9375rem/1 "Tajawal","Segoe UI",sans-serif}
.drawer-langs button[lang=zh]{font-family:"Noto Sans SC","Microsoft YaHei",sans-serif}
.drawer-langs button[lang=ru]{font-weight:400}                     /* no Cyrillic in Tajawal: the system face at 500 reads bold */

.drawer-langs button[aria-current=true]{border-color:var(--sky);color:var(--sky)}
.drawer-mail{display:flex;align-items:center;gap:.6rem;min-block-size:44px;color:var(--on-dark-2);text-decoration:none;font:500 .9375rem/1 var(--f-ui)}
html.modal-open{overflow:hidden}

/* ---------- 6. Hero ---------- */
/* The whole view of the Haram under a very light ice shade ("a very light blue, like a shadow"). The photo starts under the
   paper header; the copy sits at the foot with a soft ink shadow sized by it: centred on phones and tablets, at the start on
   landscape laptops and desktops so the middle of the frame (the Green Dome) stays clear (§20). No full-frame dark layer. */
.hero{position:relative;isolation:isolate;overflow:clip;display:grid;align-items:end;text-align:center;
  min-block-size:max(600px,calc(100svh - 3.5rem));                     /* the top of #request peeks: the scroll cue */
  padding-block:calc(var(--hdr-top) + var(--ribbon-h) + 2rem) clamp(6.5rem,13svh,8rem);background:#8F9BB5;--focus:var(--paper)}
/* 1. the photo starts under the paper header, so the whole frame is visible (a pale daylight haze until it loads). The language
   ribbon overlays its top 44 px: it appears after load, and a photo box that made room for it moved and re-cropped the LCP image */
.hero-media{position:absolute;inset:var(--hdr-top) 0 0;z-index:-3;background:linear-gradient(#93A0BC,#BCC5D6 46%,#8790A8)}
.hero-media :is(img,video){position:absolute;inset:0;inline-size:100%;block-size:100%;max-width:none;object-fit:cover;object-position:var(--focus,50% 45%)}
/* 2. ice multiplied: the ONLY full-frame layer (white marble → #E9F1FC, the darks stay natural, the Green Dome stays green).
   For a touch more blue change only --shade (e.g. #DCE4F5) and re-measure; never add a darker full-frame layer */
.hero-media::before{content:"";position:absolute;inset:0;z-index:1;background:var(--shade);opacity:1;mix-blend-mode:multiply;pointer-events:none}
/* 3. a quiet ink fade at the foot (skyline, base line) */
.hero-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgb(23 26 61/.6),rgb(23 26 61/.22) 22%,rgb(23 26 61/0) 40%)}
.hero-frame{opacity:0;transition:opacity 1.6s ease}
.hero-frame.is-on{opacity:1}
img.hero-frame.is-on{animation:kb 18s linear both}
@keyframes kb{from{transform:scale(1.04)}to{transform:none}}
.hero-skyline{position:absolute;inset:auto 0 0;z-index:-1;block-size:clamp(48px,6vw,96px);background:rgb(255 255 255/.08);
  -webkit-mask:var(--skyline) repeat-x bottom/auto 100%;mask:var(--skyline) repeat-x bottom/auto 100%;pointer-events:none}
.hero-sentinel{position:absolute;inset:0 0 auto;block-size:80px;pointer-events:none}
.hero-body{position:relative}
/* 4. the soft shadow travels with the copy: sized by it, so it fits every language and screen (if a new frame fails, raise the .6 core to .66) */
.hero-copy{position:relative;display:grid;justify-items:center;inline-size:fit-content;max-inline-size:100%;margin-inline:auto;
  text-shadow:0 0 2px rgb(23 26 61/.75),0 1px 4px rgb(23 26 61/.6),0 2px 18px rgb(23 26 61/.5)}
.hero-copy::before{content:"";position:absolute;z-index:-1;inset:-34% -16% -26%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(23 26 61/.6),rgb(23 26 61/.52) 50%,rgb(23 26 61/.3) 74%,rgb(23 26 61/.1) 90%,rgb(23 26 61/0))}
.js .hero-copy::before{animation:shade .8s var(--ease) .1s both}
@keyframes shade{from{opacity:0}}
/* a translated page ships English HTML: the copy stays hidden until app.js has put it in the visitor's language, so the first
   paint never shows English that then reflows (CLS 0.055 in ur). Failsafe: it shows after 2.6 s whatever happens */
.i18n-pending .hero-body{visibility:hidden;animation:i18nShow 0s 2.6s forwards}
@keyframes i18nShow{to{visibility:visible}}
.hero-eyebrow{margin-bottom:1.25rem;color:var(--on-dark);text-shadow:0 0 2px rgb(23 26 61/.85),0 1px 6px rgb(23 26 61/.7),0 2px 18px rgb(23 26 61/.55)}
/* the square flows with the first line: as a flex item it stayed at the box's edge, ~80 px from a wrapped, centred label */
.hero-eyebrow{display:block;inline-size:auto}
.hero-eyebrow::before{display:inline-block;vertical-align:.1em;margin-block-start:0;margin-inline-end:.75rem;background:var(--sky)}
.hero-title{margin:0 0 1.25rem;color:var(--on-dark);max-width:21em;font-size:min(var(--fs-hero),max(9.5svh,2.375rem));line-height:1.12;
  text-shadow:0 0 2px rgb(23 26 61/.5),0 2px 8px rgb(23 26 61/.4),0 6px 36px rgb(23 26 61/.45)}
:root:lang(ar) .hero-title{line-height:1.45} :root:lang(zh) .hero-title{max-width:12em;line-height:1.3}
:root:lang(ur) .hero-title{line-height:1.45;padding-block:0}   /* set like Arabic (same Amiri): keeps the top 35 % of the photo free of text */
@media (min-width:1024px){:root:lang(zh) .hero-title{max-width:21em}}   /* one line from laptops up (13 characters); 12em still balances it into two lines below */
.hero-title em{color:inherit}
.hero .lead{margin:0 0 2rem;color:var(--on-dark);max-width:52ch;font-size:clamp(1.125rem,1.05rem + .3vw,1.25rem);line-height:1.6;text-wrap:balance}
:root:is(:lang(ar),:lang(ur)) .hero .lead{font-size:clamp(1.1875rem,1.1rem + .3vw,1.3125rem);line-height:1.8}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;text-shadow:none}
.hero-ctas .btn--light{min-inline-size:15rem}
/* WhatsApp: an outline on a night plate — 4.96:1 even over pure white; no blur (the kit forbids glass) */
.hero .btn--wa{min-inline-size:12rem;background:rgb(8 12 74/.6);border-color:rgb(255 255 255/.72);color:#fff}
.hero .btn--wa:hover{background:var(--paper);border-color:var(--paper);color:var(--navy)}
.js .hero-copy>*{animation:rise .8s var(--ease) both}
.js .hero-copy>.hero-eyebrow{animation-delay:.2s} .js .hero-copy>.hero-title{animation-delay:.3s}
.js .hero-copy>.hero-lead{animation-delay:.5s} .js .hero-copy>.hero-ctas{animation-delay:.62s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
/* 5. the base line: trust facts at the start, caption + pause at the end */
.hero-base{position:absolute;inset-inline:0;inset-block-end:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;
  min-block-size:64px;padding-block:0 1.25rem;color:var(--on-dark);
  text-shadow:0 0 2px rgb(23 26 61/.85),0 1px 6px rgb(23 26 61/.7),0 2px 18px rgb(23 26 61/.55)}
.hero-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.5rem 1.75rem;margin:0;padding:0;font:500 .8125rem/1.3 var(--f-ui);color:var(--on-dark)}
:root:is(:lang(ar),:lang(ur)) .hero-trust{font-size:.9375rem}
.hero-trust li{display:inline-flex;align-items:center;gap:.55rem}
.hero-trust li::before{content:"";inline-size:8px;block-size:8px;background:var(--sky);flex:none}
.hero-ctrl{display:flex;align-items:center;gap:.85rem;margin-inline-start:auto;color:var(--on-dark);font:500 var(--fs-xs)/1.35 var(--f-ui);text-align:end}
.hero-cap{margin:0;text-shadow:inherit} .hero-cap small{display:block;font-size:.8125rem}
.hero-pause{inline-size:44px;block-size:44px;display:grid;place-items:center;border:1px solid var(--line-dark);border-radius:var(--r);background:rgb(23 26 61/.4);color:var(--on-dark)}
.hero.is-paused .hero-frame{animation-play-state:paused}

/* ---------- 7. Find a property (lead form) ---------- */
/* mist ground; the card is paper with a hairline (no shadow, no blue bar). Phones/tablets: the form follows the headline (§20) */
.request{background:var(--mist)}
.rq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.rq-start{display:grid;align-content:start}
.rq-start .lead{margin:1.25rem 0 2rem;color:var(--ink)}                    /* stays ink: the client's words */
/* the three promises: a hairline list, not bullets */
.rq-points{display:block;margin:0 0 2.5rem;border-top:1px solid var(--line);font:500 1rem/1.5 var(--f-ui);color:var(--ink)}
.rq-points li{display:block;padding:.95rem 0;border-bottom:1px solid var(--line)}
.rq-points li::before{display:none}
/* the Quba Mosque (Tevfik Teker, CC BY 3.0 — credited in the footer): from 1100 px only, lazy */
.rq-art{--cut:56px;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--ice)}
.rq-art img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.7)}   /* calms the HDR cobalt sky next to the form (no overlay) */
.rq-card{position:relative;padding:clamp(1.5rem,3.5vw,3rem);background:var(--paper);border:1px solid var(--line);box-shadow:none}
.rq-card .fine{text-align:center}
/* one quiet WhatsApp link under the privacy line (after the button, so focus order = visual order) */
.rq-alt{margin:0;display:flex;justify-content:center}
.rq-alt .i{color:var(--blue)}
.rq-done{display:grid;justify-items:start;gap:.85rem;animation:stepIn .45s var(--ease)}
.rq-done h3{font-size:var(--fs-h3)}
.rq-done p{margin:0;color:var(--muted)}
.done-mark{display:grid;place-items:center;inline-size:60px;block-size:60px;background:var(--navy);color:var(--sky)}
.rq-card.flash{animation:flash 1.2s var(--ease)}
@keyframes flash{0%{box-shadow:0 0 0 0 rgb(10 99 201/.4)}100%{box-shadow:0 0 0 16px rgb(10 99 201/0)}}
.hp{position:absolute!important;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}
#rPhoneHint{color:var(--blue);font-weight:500}
#rPhoneHint:empty{display:none}
#rUseEmail{justify-self:start;min-block-size:44px}
.tlink--sm{font-size:.875rem;min-block-size:44px}
.rq-more{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.rq-more .tlink .i{inline-size:18px;block-size:18px}
.rq-card .fine a{color:var(--blue)}
/* the form's only route to the privacy text: a 44 px hit area around the inline link, with no change to the line */
.rq-card .fine a{display:inline-block;padding:.8rem .2rem;margin:-.8rem -.2rem}

/* ---------- 8. Foreign investors ---------- */
/* paper ground: the law at a glance is a hairline fact sheet, the steps a hairline row, the eligibility check an ice panel */
.inv-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.inv-intro .lead{margin-top:1rem}
.glance{padding:0;background:none;border-top:0}                                       /* a hairline fact sheet, no box */
.glance .mini-h{margin-bottom:0;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.glance dl{margin:0 0 1rem}
.glance dl>div{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;padding-block:1.1rem;border-bottom:1px solid var(--line)}
.glance dt{font:400 var(--fs-sm)/1.45 var(--f-ui);color:var(--muted)}
.glance dd{margin:0;font:500 1.0625rem/1.35 var(--f-ui);color:var(--navy);text-align:end}  /* Tajawal: the values carry dates and digits */
.glance .note{font-size:.875rem}
.journey{margin-block-start:clamp(4.5rem,9vw,7rem)}
.journey-h{margin-bottom:2.5rem}                                                        /* the shared label style (§3) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.steps li{position:relative;padding-top:1.5rem;border-top:1px solid var(--line)}
.sn{display:block;margin-bottom:1rem;font:400 2.5rem/1 var(--f-num);color:var(--blue);font-variant-numeric:tabular-nums}   /* numbers in Tajawal 400 */
.steps h4{margin-bottom:.5rem;font:var(--head-w) var(--fs-title)/1.3 var(--f-head);color:var(--navy)}
.steps p{margin:0;color:var(--muted);font:400 1rem/1.6 var(--f-ui)}
:root:lang(ar) .steps p{font-size:1.0625rem}                                            /* §22 keeps Amiri, lh 1.8 */
.remote-note{display:flex;align-items:center;gap:.8rem;margin:3rem 0 0;padding:1.5rem 0 0;background:none;border:0;border-top:1px solid var(--line);
  font:400 1.125rem/1.6 var(--f-head);color:var(--navy)}
.remote-note .i{inline-size:24px;block-size:24px;color:var(--blue)}
:root:lang(zh) .remote-note{font-family:var(--f-ui)}                                   /* Noto Serif SC is loaded in 700 only */
/* eligibility: an ice panel with one 64 px roofline cut and no pattern behind the text; the title is a label, the question the headline */
.elig{--cut:64px;margin-block-start:clamp(4.5rem,9vw,7rem);padding:clamp(1.5rem,4.5vw,3.5rem);background:var(--ice);color:var(--ink)}
.elig-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin-bottom:1.5rem;padding-right:3rem}   /* physical: the cut never mirrors */
.elig-head h3{font:700 var(--fs-label)/1.4 var(--f-ui);letter-spacing:var(--track-label);text-transform:var(--case-label);color:var(--navy)}   /* title → label */
.elig-progress{display:inline-flex;align-items:center;gap:.75rem;font:500 var(--fs-sm)/1 var(--f-ui);color:var(--stone)}
.elig-body{max-inline-size:760px}
.elig-step{border:0;margin:0;padding:0;display:none}
.elig-step.is-on{display:block;animation:stepIn .42s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateX(20px)}}
[dir=rtl] .elig-step.is-on{animation-name:stepInR}
@keyframes stepInR{from{opacity:0;transform:translateX(-20px)}}
.elig-step legend{margin-bottom:1.25rem;font:var(--head-w) clamp(1.5rem,1.3rem + .8vw,2rem)/1.35 var(--f-head);color:var(--navy)}   /* the question is the headline */
:root:lang(ur) .elig-step legend{line-height:2}
.elig .opt{background:var(--paper);border-color:var(--field);color:var(--ink);min-block-size:60px;max-inline-size:640px;font-size:1.0625rem}
.elig .opt:hover{background:var(--paper);border-color:var(--navy)}
.elig .opt.is-checked{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:none}   /* a fill; the sky check icon stays */
.elig-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.25rem}
.elig-note{display:flex;align-items:center;gap:.5rem;margin:0;font:400 var(--fs-sm)/1.4 var(--f-ui);color:var(--stone)}
.elig-note .i{inline-size:16px;block-size:16px}
/* the answer sits inline in the panel (not a card in a card); its square tells the kind of answer */
.elig-result{--focus:var(--blue);padding:0;background:none;color:var(--ink);animation:stepIn .42s var(--ease)}
.elig-result .tlink{color:var(--blue)}
.res-head{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.5rem}
.res-sq{inline-size:12px;block-size:12px;margin-top:.75rem;background:var(--blue);flex:none}           /* ok: a solid blue square */
.elig-result.alt .res-sq{background:var(--navy)} .elig-result.unsure .res-sq{background:var(--sky)}
/* co (a Saudi company): a route through the lawyer, not a "yes" — an open square in blue, calmer than ok's solid one */
.elig-result.co .res-sq{background:none;box-shadow:inset 0 0 0 2px var(--blue)}
.res-head h4{font:var(--head-w) var(--fs-h3)/1.3 var(--f-head);color:var(--navy)}
.res-head p{margin:.5rem 0 0;color:var(--stone)}
.res-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:.5rem}

/* ---------- 9. Cinematic band ---------- */
/* Kept as approved (composition, 115vh / 100vh sticky, the Arabic line in Amiri 700, the media); harmonised with the hero:
   the same ice "shadow", a night vignette behind the words only, a white label with a sky square, and the roofline reveal */
.cine{position:relative;block-size:115vh;background:var(--night);view-timeline-name:--cine;view-timeline-axis:block;--focus:var(--paper)}
.cine-stick{position:sticky;top:0;block-size:100vh;display:grid;place-items:center;overflow:clip}
.cine-frame{position:absolute;inset:0;overflow:clip;isolation:isolate}
.cine-frame :is(img,video){position:absolute;inset:0;inline-size:100%;block-size:100%;max-width:none;object-fit:cover}
.cine-frame video{opacity:0;transition:opacity 1.2s}
.cine-frame video.is-on{opacity:1}
.cine-frame::before{content:"";position:absolute;inset:0;z-index:1;background:var(--shade);mix-blend-mode:multiply;pointer-events:none}
.cine-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 50% 40% at 50% 54%,rgb(23 26 61/.62),rgb(23 26 61/0) 76%),linear-gradient(rgb(8 12 74/.14),rgb(8 12 74/.05) 45%,rgb(8 12 74/.62))}
/* the vignette behind the words is ink, as in the hero (about half night's saturation): night turned the gold-lit Green Dome teal
   and the sky violet. Phones show the still photo, where the dome sits right behind the words: a lighter vignette there */
@media (max-width:767px){.cine-frame::after{background:radial-gradient(ellipse 50% 40% at 50% 54%,rgb(23 26 61/.45),rgb(23 26 61/0) 76%),linear-gradient(rgb(8 12 74/.14),rgb(8 12 74/.05) 45%,rgb(8 12 74/.62))}}
.cine-copy{position:relative;z-index:1;display:grid;justify-items:center;gap:1.25rem;padding-inline:var(--gutter);text-align:center;
  text-shadow:0 1px 2px rgb(8 12 74/.5),0 0 22px rgb(8 12 74/.45)}
.cine-mark{inline-size:56px;block-size:55px;--logo-a:var(--paper);--logo-b:var(--paper)}   /* over footage: one-colour white */
.cine-quote{margin:0;max-width:16ch;font:700 clamp(2.25rem,1.5rem + 3.2vw,4.5rem)/1.45 "Amiri","Traditional Arabic",serif;color:var(--on-dark);text-wrap:balance}
.cine-tr{margin:-.25rem 0 0;max-width:34ch;font:italic 400 clamp(1.125rem,1rem + .5vw,1.375rem)/1.5 var(--f-head);color:rgb(255 255 255/.9)}
:root:is(:lang(ru),:lang(zh),:lang(ur)) .cine-tr{font-style:normal}
:root:lang(ar) .cine-tr{display:none}
/* white, not sky: sky text over the photo measured 2.3–2.8:1; the sky stays as the square */
.cine-sub{display:inline-flex;align-items:center;gap:.75rem;margin:0;font:700 var(--fs-xs)/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:rgb(255 255 255/.92)}
.cine-sub::before{content:"";flex:none;inline-size:8px;block-size:8px;background:var(--sky)}
:root:is(:lang(ar),:lang(ur),:lang(zh)) .cine-sub{letter-spacing:0;font-size:.9375rem}
.cine-skyline{position:absolute;inset:auto 0 0;block-size:clamp(70px,10vw,130px);background:rgb(255 255 255/.08);-webkit-mask:var(--skyline) repeat-x bottom/auto 100%;mask:var(--skyline) repeat-x bottom/auto 100%;pointer-events:none}
.cine-pause{position:absolute;inset-block-end:1.25rem;inset-inline-end:calc(var(--gutter) + 84px);z-index:2}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .cine-frame{animation:unclip linear both;animation-timeline:--cine;animation-range:entry 10% entry 100%}
  .cine-frame :is(img,video){animation:drift linear both;animation-timeline:--cine;animation-range:cover 0% cover 100%}}}
/* the signature reveal: the frame opens through the 52.3° roofline, "\" at the top right (physical coordinates, never mirrored) */
@keyframes unclip{from{clip-path:polygon(6% 8%,calc(94% - 22vh*.772) 8%,94% calc(8% + 22vh),94% 92%,6% 92%)}to{clip-path:polygon(0 0,100% 0,100% 0,100% 100%,0 100%)}}
@keyframes drift{from{transform:translateY(-3%) scale(1.06)}to{transform:translateY(3%) scale(1.06)}}

/* ---------- 10. Requirements ---------- */
/* a hairline list, not a spreadsheet: numeral above the title (no 3 px jitter); the key condition carries a 2 px navy rule */
.req-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:2.5rem clamp(2.5rem,6vw,6rem);align-items:start}   /* rows: the disclaimer stays near the list */
.req-start{position:sticky;top:calc(var(--hdr-h) + 2rem)}                /* the ribbon is no longer fixed */
.req-start .lead{margin-top:1rem}
.req-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:1.75rem}
.req-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.75rem clamp(2rem,4vw,3.5rem);background:none;border:0}
.req{display:block;padding:1.5rem 0 0;border-top:1px solid var(--line);background:none}
.req .rn{display:block;margin-bottom:1rem;font:500 .875rem/1 var(--f-num);letter-spacing:.08em;color:var(--blue);font-variant-numeric:tabular-nums}
.req h3{margin:0 0 .5rem;font:var(--head-w) var(--fs-title)/1.3 var(--f-head);color:var(--navy)}
.req p{margin:0;color:var(--muted);font:400 1rem/1.6 var(--f-ui)}
:root:lang(ar) .req p{font-size:1.0625rem}                                 /* as the steps: §22 keeps Amiri, lh 1.8 */
.req--key{background:none;border-top:2px solid var(--navy)}
.req--key .rn{color:var(--navy)}
.req-disc{grid-column:2;margin-top:1rem;font-size:.875rem}

/* ---------- 11. Zones ---------- */
.zones-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.zones-start .lead{margin-top:1rem}
/* the 10 official zones: name in Amiri, the kit's 24 px number box (as the map markers), a 2 px blue rule on the chosen one */
.zone-list{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid var(--line)}
.zone{border-bottom:1px solid var(--line)}
.zone>button{inline-size:100%;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.1rem;row-gap:.15rem;padding:1.1rem .75rem;text-align:start;border:0;background:none;color:inherit;transition:background-color var(--t)}
.zone .zn{grid-row:span 3;display:grid;place-items:center;inline-size:24px;block-size:24px;margin-top:.1rem;background:var(--navy);color:#fff;font:700 .8125rem/1 var(--f-num)}
.zone.is-on .zn{background:var(--blue)}
.zone b{font:var(--head-w) 1.25rem/1.3 var(--f-head);color:var(--navy)}
.zone span{color:var(--muted);font:400 var(--fs-sm)/1.5 var(--f-ui)}
.zone small{font:500 .875rem/1.3 var(--f-num);color:var(--stone)}
:root:lang(ur) .zone small{font-family:var(--f-ui)}                       /* Urdu words stay in Amiri */
.zone>button:hover{background:var(--paper)}
/* the 2 px rule marks the whole chosen item, its official-map link included. It sits on both rows: their paper ground
   covered a rule drawn on the li itself (an inset shadow paints under the children's backgrounds) */
.zone.is-on>button,.zone.is-on .zone-more{box-shadow:inset 2px 0 0 var(--blue)}
[dir=rtl] .zone.is-on>button,[dir=rtl] .zone.is-on .zone-more{box-shadow:inset -2px 0 0 var(--blue)}
.zone.is-on>button{background:var(--paper)}
/* the link under the chosen zone lines up with its name (button padding + number box + gap) */
.zone-more{display:none;padding-block:0 .75rem;padding-inline:calc(.75rem + 24px + 1.1rem) 1rem}
.zone.is-on .zone-more{display:block;background:var(--paper)}
.zone-more .tlink{font-size:.9375rem}
.map-card{position:sticky;top:calc(var(--hdr-h) + 2rem);background:var(--paper);border:0}
.zmap{inline-size:100%;block-size:auto;aspect-ratio:1;direction:ltr}
.zmap .ring{fill:none;stroke:var(--line);stroke-width:1}
.zmap .ring-l{font:500 12px "Tajawal",sans-serif;fill:var(--stone)}
.zmap .mk{cursor:pointer}
.zmap .mk rect{fill:var(--navy);transition:fill .3s}
.zmap .mk text{font:700 12px "Tajawal",sans-serif;fill:#fff;text-anchor:middle;dominant-baseline:central}
.zmap .mk .lbl{font:500 13px "Tajawal","Noto Sans SC","Noto Naskh Arabic",sans-serif;fill:var(--ink);dominant-baseline:central}
.zmap .mk.is-on rect{fill:var(--blue)}
.zmap .mk rect.fr{fill:none;stroke:none;pointer-events:none}
.zmap .mk:focus-visible{outline:none} .zmap .mk:focus-visible rect.fr{stroke:var(--blue);stroke-width:2.5}
.zmap .route{stroke:var(--blue);stroke-width:1.5;fill:none}
.zmap .haram{fill:var(--navy)} .zmap .haram.is-on{fill:var(--blue)}
.zmap .haram-l{font:700 12px "Tajawal","Noto Sans SC","Noto Naskh Arabic",sans-serif;fill:var(--navy);text-anchor:middle}
.zmap .north{fill:var(--navy)}
.map-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.5rem 1rem;border-top:0}
.map-note{font:400 var(--fs-xs)/1.4 var(--f-ui);color:var(--stone)}

/* ---------- 13. Lawyer ---------- */
/* night ground (one dark tone, shared with the footer); the mark sits small in the empty corner, never behind text */
.lawyer{position:relative;overflow:clip;isolation:isolate}
/* hung 3rem under the column's last line, from 4vw outside the section's start edge, and cropped by the section's bottom:
   the booking card changes height with each step, so a bottom-anchored mark would ride up behind the heading */
.law-start{position:relative}
.supergraphic{position:absolute;z-index:-1;inset-block-start:calc(100% + 3rem);inset-inline-start:calc(-1*max(var(--gutter),(100vw - var(--wrap))/2) - 4vw);
  inline-size:min(34vw,440px);block-size:auto;aspect-ratio:517/508;--logo-a:var(--navy);--logo-b:var(--navy);pointer-events:none}
.law-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.law-start .lead{margin-top:1rem}
.law-who{margin:1.75rem 0 0;font:400 var(--fs-sm)/1.6 var(--f-ui);color:var(--on-dark-2)}
.law-who:empty{display:none}
.law-who b{display:block;font:700 1.375rem/1.3 var(--f-head);color:var(--on-dark)}
.law-modes{margin:1.75rem 0 0;font:500 1rem/1.6 var(--f-ui);color:var(--on-dark-2)}
.book{padding:clamp(1.5rem,3.5vw,3rem);background:var(--paper);color:var(--ink);box-shadow:none;border-top:0;
  --heading:var(--navy);--hair:var(--line);--focus:var(--blue);--muted:var(--stone);--accent:var(--blue);color-scheme:light}
.book .input{background-color:var(--paper);color:var(--ink);color-scheme:light}
.book .btn--ghost{color:var(--navy)} .book .btn--ghost:hover{color:#fff}
.book .form-msg.ok{color:var(--ok)} .book .form-msg.err{color:var(--err)} .book .form-msg.warn{color:var(--navy)}
.book .field .err{color:var(--err)}
.book-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0 0 1.75rem;padding:0}
.book-steps li{position:relative;padding-top:.85rem;font:700 var(--fs-label)/1.3 var(--f-ui);letter-spacing:var(--track-label);text-transform:var(--case-label);color:var(--stone)}   /* the label style */
.book-steps li::before{content:"";position:absolute;inset:0 0 auto;block-size:2px;background:var(--line)}
.book-steps li.is-on{color:var(--navy)} .book-steps li.is-on::before{background:var(--blue)}
.book-steps li.is-done::before{background:var(--navy)}
.bstep{border:0;margin:0;padding:0;display:none;gap:.75rem}
.bstep.is-on{display:grid;animation:stepIn .42s var(--ease)}
[dir=rtl] .bstep.is-on{animation-name:stepInR}
.bstep .opt{margin:0}
.bstep .flabel{margin-top:.5rem}
.days{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 8px;margin:-4px;scroll-padding-inline:4px;scrollbar-width:thin}   /* room for the 2 px focus ring inside the scroller */
.day{flex:none;inline-size:64px;block-size:74px;display:grid;place-content:center;gap:.2rem;border:1px solid var(--field);border-radius:var(--r);background:var(--paper);scroll-snap-align:start;text-align:center}
.day small{font:700 .6875rem/1 var(--f-ui);color:var(--stone);text-transform:uppercase;letter-spacing:.06em}
:root:is(:lang(ar),:lang(ur),:lang(zh)) .day small{text-transform:none;letter-spacing:0}
.day b{font:500 1.375rem/1 var(--f-num);color:var(--navy)}
.day[aria-pressed=true]{background:var(--navy);border-color:var(--navy)}
.day[aria-pressed=true] :is(small,b){color:#fff}
.slots{display:flex;flex-wrap:wrap;gap:.5rem}
.slot{min-block-size:44px;padding:.4rem .9rem;border:1px solid var(--field);border-radius:var(--r);background:var(--paper);font:500 .875rem/1.3 var(--f-ui);color:var(--ink);font-variant-numeric:tabular-nums}
.slot[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.hint{margin:0;font:400 var(--fs-xs)/1.5 var(--f-ui);color:var(--stone)}
.book-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.5rem}
.book-nav .btn{margin-inline-start:auto}
.book-done{display:grid;justify-items:start;gap:.75rem;animation:stepIn .42s var(--ease)}
.book-done p{margin:0;color:var(--stone)}

/* ---------- 15. Inquiries & FAQ ---------- */
/* paper ground: the languages are a quiet underlined row, the WhatsApp number is the centrepiece, the FAQ an editorial hairline list (no card) */
.con-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.con-start .lead{margin-top:1rem}
.speak{margin-top:2rem}
.speak-list{display:flex;flex-wrap:wrap;gap:0 .25rem;margin-inline-start:-.6rem}     /* the first name lines up with the column */
.speak-list a{display:inline-flex;align-items:center;gap:.45rem;min-block-size:44px;padding:0 .6rem;border:0;border-radius:var(--r);background:none;color:var(--navy);
  font:500 1rem/1 "Tajawal","Segoe UI",sans-serif;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em;text-decoration-color:rgb(13 23 136/.3);
  transition:text-decoration-color var(--t)}
.speak-list a:hover{text-decoration-color:currentColor}
.speak-list [lang=zh]{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
.speak-list [lang=ru]{font-weight:400}                                             /* no Cyrillic in Tajawal: the system face at 500 reads bold */
.speak-list .i{display:none}                                                       /* seven identical glyphs gone; the JS markup is unchanged */
/* …and one glyph opens the row, so it reads as WhatsApp chats in each language, not as the page-language switcher in the footer */
.speak-list{align-items:center}
.speak-list::before{content:"";flex:none;inline-size:24px;block-size:24px;margin-inline:.6rem .1rem;background:var(--blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2A9.8 9.8 0 0 0 3.6 17l-1.4 4.8 5-1.3A9.8 9.8 0 1 0 12 2.2Zm0 17.9c-1.5 0-3-.4-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.1 8.1 0 1 1 12 20.1Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.6 6.6 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.7 11.7 0 0 0 4.5 4c1.7.7 2.3.8 3.2.7.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2l-.4-.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2A9.8 9.8 0 0 0 3.6 17l-1.4 4.8 5-1.3A9.8 9.8 0 1 0 12 2.2Zm0 17.9c-1.5 0-3-.4-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.1 8.1 0 1 1 12 20.1Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.6 6.6 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.7 11.7 0 0 0 4.5 4c1.7.7 2.3.8 3.2.7.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2l-.4-.2Z'/%3E%3C/svg%3E") center/contain no-repeat}
.direct{margin:2rem 0}
.direct-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;min-block-size:64px;padding-inline:0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);font:500 1rem/1.3 var(--f-ui)}
.direct-row:first-child{border-top:1px solid var(--line)}
.direct-row:hover{background:none}
.direct-row:hover bdi{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.direct-row bdi{color:var(--ink);font-family:var(--f-num);font-variant-numeric:tabular-nums}
#directWa bdi{font:500 1.375rem/1.2 var(--f-num);color:var(--navy)}               /* the WhatsApp number is the centrepiece */
.direct-row .i{color:var(--navy)}
.office{display:grid;gap:.25rem;margin-top:1.1rem;font:400 var(--fs-sm)/1.5 var(--f-ui);color:var(--stone)}
.office b{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);font-weight:700}
.office b::before{content:"";inline-size:8px;block-size:8px;background:var(--stone)}
.office b.open::before{background:var(--blue)}
.faq{padding:0;background:none}
.faq h3{margin-bottom:1rem}                                                        /* the shared label style (§3) */
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);interpolate-size:allow-keywords}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-block-size:64px;padding:1.15rem 0;cursor:pointer;list-style:none;
  font:var(--head-w) 1.3125rem/1.4 var(--f-head);color:var(--navy)}                 /* the questions read as titles: Amiri, as the steps and requirements */
.faq summary::-webkit-details-marker{display:none}
/* a hairline plus that turns into a cross */
.faq summary::after{content:"";flex:none;inline-size:14px;block-size:14px;transition:transform .3s;
  background:linear-gradient(var(--navy),var(--navy)) center/14px 1.5px no-repeat,linear-gradient(var(--navy),var(--navy)) center/1.5px 14px no-repeat}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq details p{max-width:64ch;margin:0;padding:0 0 1.5rem;font-size:1rem;line-height:1.7;color:var(--stone)}
:root:is(:lang(ar),:lang(ur)) .faq details p{font-size:1.0625rem}                  /* Amiri: 17 px, as the steps and requirements (§22 sets the leading) */
.faq>.tlink{margin-top:.75rem}

/* ---------- 16. Marketers ---------- */
.par-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.par-start .lead{margin-top:1rem}
.par-steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.par-steps li{display:grid;gap:.35rem;padding-block:1rem 0;padding-inline:0 1rem;font:700 1rem/1.35 var(--f-ui);color:var(--navy)}
.par-steps li+li{padding-inline-start:1rem;border-inline-start:1px solid var(--line)}
.par-steps .no{font:800 1.5rem/1 var(--f-num);color:var(--blue)}
.pcard{--cut:30px;aspect-ratio:1.586;max-inline-size:380px;padding:1.4rem;display:grid;align-content:space-between;margin-bottom:1.75rem;
  background:var(--navy) var(--pattern-navy) 0 0/110px 150px;color:var(--on-dark)}
.pcard-top{display:flex;align-items:center;justify-content:space-between}
.pcard-top .eyebrow{margin:0}
.pcard-logo{inline-size:42px;block-size:41px}
.pcard-code{margin:0;direction:ltr;text-align:start;font:800 1.5rem/1 var(--f-num);letter-spacing:.2em;font-variant-numeric:tabular-nums}
[dir=rtl] .pcard-code{text-align:end}
.pcard-who{display:flex;align-items:center;gap:.5rem;margin:.6rem 0 0;font:500 .875rem/1.3 var(--f-ui);color:var(--on-dark-2)}

.par-form{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:end}
.par-form .input{text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.par-links{margin-top:1rem;border-top:1px solid var(--line)}
.par-links:empty{display:none}
.par-who{margin:1rem 0 .5rem;font:700 1rem/1.4 var(--f-ui);color:var(--navy)}
.par-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:.5rem;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--line)}
.par-row b{display:block;font:700 .9375rem/1.4 var(--f-ui);color:var(--ink)}
.par-row code{display:block;font-size:.75rem;color:var(--stone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start}
.par-row .btn{min-block-size:40px;padding:0 .8rem;font-size:.8125rem}
.copy-fallback{margin-top:1rem}
.qr-box{display:grid;justify-items:start;gap:.5rem;margin-top:1.25rem;padding:1rem;border:1px solid var(--line);background:var(--paper);inline-size:max-content}
.par-foot{display:flex;flex-wrap:wrap;gap:.25rem 2rem;margin-top:1.5rem}

/* ---------- 17. Footer ---------- */
/* night (the one dark tone, shared with #lawyer); quiet white .76 links that turn white; every target 44 px */
.footer{position:relative;background:var(--night);padding-top:clamp(4rem,8vw,7rem);color:var(--on-dark)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem}
.foot-logo{inline-size:150px;block-size:141px;margin-bottom:.9rem}
.foot-en{margin:0 0 1rem;font:700 .6875rem/1 "Amiri","Times New Roman",serif;letter-spacing:.14em!important;text-transform:uppercase;color:var(--on-dark)}   /* kit: the English name in Amiri 700 caps */
.foot-brand p:not(.foot-en):not(.foot-tag){max-inline-size:44ch;font:400 .9375rem/1.6 var(--f-ui);color:var(--on-dark-2)}
/* fit-content: the Arabic line sits under the logo on LTR pages too (a full-width RTL block floated it to the right) */
.foot-tag{inline-size:fit-content;margin:0 0 1rem;font:700 1.625rem/1.5 "Amiri","Traditional Arabic",serif;color:var(--sky)}
.foot-links{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;margin-top:.75rem!important}
.foot-links a{font-size:.875rem;color:var(--on-dark-2);text-decoration:underline;text-underline-offset:3px}
.footer .foot-links a{font-size:.875rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}   /* cascade fix: "For marketers" keeps its style after .footer a */
.credits p{max-inline-size:70ch;margin:.5rem 0 .25rem}
.foot-lic{font-family:var(--f-num)!important}
.foot-h{margin:0 0 1rem;font:700 var(--fs-xs)/1.3 var(--f-ui);letter-spacing:var(--track-label);text-transform:var(--case-label);color:var(--sky)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.footer a{display:inline-flex;align-items:center;gap:.55rem;min-block-size:44px;color:var(--on-dark-2);text-decoration:none;font:400 .9375rem/1.3 var(--f-ui)}
.footer a:hover{color:#fff}
.footer a .i,.foot-city .i{inline-size:18px;block-size:18px;color:var(--sky)}
.foot-city{display:flex;align-items:center;gap:.55rem;min-block-size:44px;font:400 .9375rem/1.3 var(--f-ui);color:var(--on-dark-2)}
.footer bdi{font-family:var(--f-num)}
.foot-langs{grid-template-columns:repeat(4,minmax(44px,max-content));justify-content:start;gap:.15rem 1rem!important;margin-top:1rem!important}
/* «اردو» and «中文» are narrower than a target; each name is centred in its cell, so RTL and LTR names sit alike and the rows line up */
.foot-langs a{min-inline-size:44px;justify-content:center;font-size:.875rem;color:var(--on-dark-2);font-family:"Tajawal","Segoe UI",sans-serif}
.foot-langs a[lang=zh]{font-family:"Noto Sans SC","Microsoft YaHei",sans-serif}

.foot-bottom{margin-top:3rem;padding-block:1.5rem 1rem;border-top:1px solid var(--line-dark);font:400 .8125rem/1.6 var(--f-ui);color:var(--on-dark-2)}
.foot-bottom p{margin:.3rem 0}
.credits summary{cursor:pointer;min-block-size:44px;min-inline-size:44px;display:inline-flex;align-items:center;color:var(--on-dark-2)}   /* "Privacy" is 39 px wide */
.credits summary:hover{color:#fff}
.credits ul{margin:.5rem 0 0}
.credits a{display:inline;min-block-size:0;font-size:inherit;color:var(--on-dark-2);text-decoration:underline;text-underline-offset:3px}
.dates{font-variant-numeric:tabular-nums}
.foot-skyline{block-size:clamp(48px,6vw,80px);margin-top:1rem;background:var(--navy);-webkit-mask:var(--skyline) repeat-x bottom/auto 100%;mask:var(--skyline) repeat-x bottom/auto 100%}

/* ---------- 18. Floating WhatsApp, action bar, toast ---------- */
/* paper, 52 px; shown only once the header is solid AND compact: never over the hero, never beside the full header (which carries WhatsApp) */
.wa-float{position:fixed;z-index:40;inset-block-end:24px;inset-inline-end:24px;display:flex;align-items:center;gap:0;block-size:52px;min-inline-size:52px;padding:0 13px;
  background:var(--paper);color:var(--navy);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;font:500 .9375rem/1 var(--f-ui);box-shadow:0 10px 30px rgb(8 12 74/.10);
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility 0s linear var(--t),gap .4s var(--ease),background-color var(--t),color var(--t)}
.hdr[data-state=solid] ~ .wa-float{opacity:1;visibility:visible;transition-delay:0s}
.hdr:not(.hdr--compact) ~ .wa-float{display:none}
.wa-float .i{inline-size:24px;block-size:24px}
.wa-float span{max-inline-size:0;overflow:hidden;white-space:nowrap;transition:max-inline-size .4s var(--ease)}
.wa-float:hover,.wa-float:focus-visible{gap:.6rem;background:var(--navy);color:#fff}
.wa-float:hover span,.wa-float:focus-visible span{max-inline-size:12em}
.actionbar{position:fixed;z-index:60;inset:auto 0 0;display:none;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));
  background:rgb(255 255 255/.97);border-top:1px solid var(--line);box-shadow:none;transform:translateY(110%);transition:transform .32s var(--ease)}
.actionbar{visibility:hidden;transition:transform .32s var(--ease),visibility 0s .32s}
.actionbar.is-on{transform:none;visibility:visible;transition-delay:0s}
.actionbar.kbd,.actionbar.at-foot,html.modal-open .actionbar{transform:translateY(110%);visibility:hidden}
:root:lang(ur) .ab{line-height:1.6}
.ab{min-block-size:48px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 .5rem;border:1px solid var(--field);border-radius:var(--r);
  font:500 .9375rem/1.15 var(--f-ui);color:var(--navy);text-decoration:none;background:transparent;text-align:center}
.ab.wa{background:transparent;border-color:var(--navy);color:var(--navy)} .ab.wa .i{color:var(--blue)}
.ab.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.toast{position:fixed;z-index:90;inset-block-end:calc(96px + env(safe-area-inset-bottom));left:50%;translate:-50% 12px;padding:.85rem 1.25rem;background:var(--night);color:#fff;
  font:500 .875rem/1.3 var(--f-ui);opacity:0;pointer-events:none;transition:opacity .3s,translate .3s var(--ease)}
.toast.show{opacity:1;translate:-50% 0}

/* ---------- 19. Reveal ---------- */
.js [data-reveal]{opacity:0;transform:translate3d(0,12px,0);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
.js :is(#rqCard,#eligibility,#book,#faq)[data-reveal]{opacity:1;transform:none;transition:none}   /* forms never wait for an animation */
.js [data-reveal].is-in{opacity:1;transform:none}
:root:lang(ur).js [data-reveal]{transform:none}

/* ---------- 20. Responsive ---------- */
@media (max-width:1099px){
  .rq-grid,.inv-head,.req-grid,.zones-grid,.law-grid,.par-grid,.con-grid{grid-template-columns:minmax(0,1fr)}
  .req-start,.map-card{position:static}
  .req-disc{grid-column:auto}
  /* the four steps become a hairline list */
  .steps{grid-template-columns:minmax(0,1fr);gap:0}
  .steps li,[dir=rtl] .steps li{display:block;padding:1.25rem 0 1.75rem;border-inline-start:0;border-top:1px solid var(--line)}
  .steps .sn{margin:0 0 .75rem;font-size:1.75rem}
  .rq-art{display:none}
  /* #request: the form directly follows the client's headline and lead; the three promises move under it.
     Only non-focusable elements change places, so the tab order still matches what is seen */
  .rq-grid{row-gap:0}
  .rq-start{display:contents}
  .rq-start>.eyebrow{order:1} #rqTitle{order:2} .rq-start>.lead{order:3}
  .rq-card{order:4;margin-block:.5rem 2.5rem}
  .rq-points{order:5;margin-bottom:0}
  .supergraphic{display:none}
}
/* tablets: two steps a row keep the list short */
@media (min-width:600px) and (max-width:1099px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,4vw,3rem)}}
/* Laptop screens are short: a shorter header (64 + 24 + 44 = 132; the defaults match it, so nothing jumps) keeps the hero's buttons above the fold */
@media (min-width:1024px) and (max-height:820px){
  :root{--mast-h:64px;--strip-h:24px;--nav-h:44px;--hdr-h:132px;--hdr-top:132px;--hdr-solid:44px}
  .logo-h{inline-size:180px;block-size:41.7px}
  .hero{padding-block:calc(var(--hdr-top) + var(--ribbon-h) + 1rem) 5.5rem}
  .hero-eyebrow{margin-bottom:.75rem} .hero-title{margin-bottom:.9rem} .hero .lead{margin-bottom:1.5rem}
  .hero-title{font-size:min(var(--fs-hero),max(7svh,2.375rem))}   /* 54 px at 768 px tall: the copy stays in the lower 65 % of the photo */
}
@media (min-width:1024px) and (max-height:700px){.hero-trust{display:none}}
/* Laptops and desktops in landscape: the words at the start, the two actions at the end, and the middle of the photo — where the
   Green Dome sits in the drone film — under nothing but the ice shade (a centred title sat on the Dome for ~20 s of every loop).
   The copy shadow becomes a soft ink fade from the start edge, sized by the words' column, so it never reaches the middle of the
   frame; mirrored in RTL. Measured with halo, worst of 6 frames (1440×900 and 1366×768, EN and AR): eyebrow ≥ 5.26, title ≥ 5.64,
   lead ≥ 7.97, WhatsApp ≥ 8.99, trust/caption/credit ≥ 5.33. The top 36 % of the photo stays free in all 7 languages from 1280 to
   1920 px. Phones, tablets and portrait screens keep the centred copy. */
@media (min-width:1024px) and (min-aspect-ratio:501/400){
  .hero{text-align:start;padding-block-end:clamp(5rem,11svh,6.5rem)}   /* the actions sit beside the lead, clear of the pause button */
  .hero-copy{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr) auto;column-gap:2rem;
    grid-template-areas:"eb . ." "title . ." "lead lead ctas";align-items:end;justify-items:start;
    inline-size:auto;max-inline-size:none;margin-inline:0}
  .hero-eyebrow{grid-area:eb}
  .hero-title{grid-area:title;max-width:none;font-size:min(var(--fs-hero),max(9.5svh,2.375rem),4.4vw)}   /* two lines in its column */
  .hero .lead{grid-area:lead;max-width:min(38rem,100%);margin-bottom:0}   /* the lead runs below the Dome's height */
  .hero-ctas{grid-area:ctas;justify-content:flex-end;flex-wrap:nowrap}
  .hero-copy::before{position:static;grid-area:1/1/4/2;align-self:stretch;justify-self:stretch;
    margin-block:-5rem -2.5rem;margin-inline:calc(-1*max(var(--gutter),(100vw - var(--wrap))/2)) -3rem;
    background:linear-gradient(to right,rgb(23 26 61/.56),rgb(23 26 61/.52) calc(100% - 9rem),rgb(23 26 61/.28) calc(100% - 4.5rem),rgb(23 26 61/.07) calc(100% - 1.25rem),rgb(23 26 61/0));
    -webkit-mask:linear-gradient(transparent,#000 5rem,#000 calc(100% - 1.5rem),transparent);mask:linear-gradient(transparent,#000 5rem,#000 calc(100% - 1.5rem),transparent)}
  [dir=rtl] .hero-copy::before{background:linear-gradient(to left,rgb(23 26 61/.56),rgb(23 26 61/.52) calc(100% - 9rem),rgb(23 26 61/.28) calc(100% - 4.5rem),rgb(23 26 61/.07) calc(100% - 1.25rem),rgb(23 26 61/0))}
}
@media (min-width:1024px) and (min-aspect-ratio:501/400) and (max-height:820px){
  .hero{padding-block-end:5rem}                                         /* the top 35 % of the photo stays free in fr at 1366×768 */
  .hero-title{font-size:min(var(--fs-hero),max(7svh,2.375rem),4.4vw)}
  .hero .lead{margin-bottom:0}
}
/* Tablets, phones and portrait screens: a deeper ink fade at the foot; the base line keeps only the pause button */
@media (max-width:1023px),(max-aspect-ratio:5/4){
  .hero{min-block-size:max(560px,100svh);padding-block:calc(var(--hdr-top) + var(--ribbon-h) + 1.5rem) calc(44px + 2.25rem)}
  .hero-media::after{background:linear-gradient(to top,rgb(23 26 61/.78),rgb(23 26 61/.5) 38%,rgb(23 26 61/.2) 58%,rgb(23 26 61/0) 72%)}
  .hero-base{min-block-size:0;padding-block-end:1rem}
  .hero-trust,.hero-cap{display:none}
}
@media (max-width:899px){
  .actionbar{display:grid}
  .wa-float{display:none}
  html{scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .toast{inset-block-end:calc(84px + env(safe-area-inset-bottom))}
  .mega-types{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  .hero-copy::before{inset:-30% -10% -16%}
  .hero-title{font-size:calc(2.25rem*var(--scale));margin-bottom:1rem}
  .hero-eyebrow{margin-bottom:1rem}
  .hero .lead{font-size:1.0625rem;margin-bottom:1.75rem}
  :root:is(:lang(ar),:lang(ur)) .hero .lead{font-size:1.125rem}
  .hero-ctas{flex-direction:column;align-items:stretch;inline-size:100%}
  .hero-ctas .btn--lg{min-block-size:52px;min-inline-size:0}
  .row2,.par-form{grid-template-columns:1fr}
  .req-list{grid-template-columns:minmax(0,1fr)}
  .par-steps{grid-template-columns:1fr}
  .par-steps li+li{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--line);padding-top:1rem}
  .par-row{grid-template-columns:1fr auto auto auto}
  .par-row>div{grid-column:1/-1}
  .foot-grid{grid-template-columns:1fr}
  .foot-grid nav ul{grid-template-columns:1fr 1fr;column-gap:1rem}     /* the seven links in two columns */
  .faq summary{min-block-size:56px;padding:.9rem 0;font-size:1.1875rem}
  .elig-head{padding-right:2rem}
  /* keeping the page short and calm on phones */
  .journey,.elig{margin-block-start:3.5rem}
  .journey-h{margin-bottom:1.25rem}
  .steps li,[dir=rtl] .steps li{padding:1rem 0 1.25rem}
  .remote-note{margin-top:2rem;font-size:1.0625rem}
  .rq-points li{padding:.75rem 0}
  .req-list{row-gap:1.75rem} .req{padding-top:1.1rem} .req .rn{margin-bottom:.6rem}
  /* zones: one line per zone; the use, the distance and the official-map link open with the selection */
  .zone>button{padding:.9rem .5rem}
  .zone b{font-size:1.125rem}                                             /* 18 px: the longest names (zh with the Latin name) stay on one line */
  .zone:not(.is-on)>button>:is(span:not(.zn),small){display:none}
  .zone:not(.is-on) .zn{grid-row:auto}
  .zone-more{padding-inline-start:calc(.5rem + 24px + 1.1rem)}
}
/* short phones and 200 % / 400 % zoom: the lead is smaller, never hidden (hiding it lost the "in your language" promise on zoom) */
@media (max-width:767px) and (max-height:700px){
  .hero .lead{font-size:1rem;line-height:1.5;margin-bottom:1.25rem}
  :root:is(:lang(ar),:lang(ur)) .hero .lead{font-size:1.0625rem;line-height:1.7}
  .hero-copy::before{inset:-40% -10% -16%}                              /* the taller copy reaches brighter sky: the shadow reaches with it */
}
@media (max-width:419px){
  .ab{font-size:.8125rem}
}
/* property-type chips on phones: room for the longest labels («Appartement», «Apartamento»); icon above the label on small phones */
@media (max-width:479px){.chips--types .chip{gap:.5rem;padding-inline:.75rem}}
@media (max-width:374px){.chips--types .chip{flex-direction:column;justify-content:center;gap:.35rem;min-block-size:68px;padding:.6rem .5rem;text-align:center}}

/* ---------- 21. Motion pause, reduced motion & print ---------- */
html.motion-off .cine-frame :is(img,video){animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
}
@media print{
  .hero-ctrl{display:none!important}
  .hero .hero-trust,.hero .hero-eyebrow{color:var(--stone)}
  .hero-copy{text-shadow:none}
  .hdr,.ribbon,.wa-float,.actionbar,.hero-media,.hero-skyline,.cine,.toast{display:none!important}
  .hero{min-block-size:0;padding:2rem 0;background:#fff}
  .hero .hero-title,.hero .lead{color:var(--navy)}
  .js [data-reveal]{opacity:1!important;transform:none!important}
  .hero-copy::before{display:none!important}
  .hero :is(.hero-eyebrow,.hero-title){text-shadow:none}
  .hero-base{position:static;text-shadow:none}
  .hero .btn--wa{background:none;color:var(--navy);border-color:var(--navy)}   /* no night plate behind navy text when backgrounds print */
  /* the dark sections print light (with or without background graphics); the supergraphic and the skylines are left out */
  .supergraphic,.foot-skyline,.cine-skyline,.drawer-in::after{display:none!important}
  .sec-navy,.footer{background:#fff!important;color:var(--ink)}
  .on-dark{--fg:var(--ink);--heading:var(--navy);--muted:var(--stone);--logo-a:var(--navy);--logo-b:var(--blue);
    --on-dark:var(--ink);--on-dark-2:var(--stone);--accent:var(--blue);--hair:var(--line);--line-dark:var(--line)}
  .foot-tag,.foot-h{color:var(--navy)}
  .faq details::details-content{block-size:auto!important;content-visibility:visible!important}   /* every answer prints, open or not */
}

/* ---------- 22. Review fixes (v3) ---------- */
/* "Tell us your preferred area" is a conversion path, so a real (outline) button */
.zones-cta{min-block-size:48px;margin-top:1.75rem;padding:0 1.5rem;border:1px solid var(--navy);border-radius:var(--r);color:var(--navy);transition:background-color var(--t),color var(--t)}
.zones-cta>span{text-decoration:none}
.zones-cta:hover{background:var(--navy);color:#fff}
/* Arabic: Amiri for every heading and running sentence; Tajawal stays for labels, buttons and numbers */
:root:lang(ar) :is(h4,.faq summary,.req h3){font-family:var(--f-head)}
:root:lang(ar) :is(.req p,.steps p,.remote-note,.zone>button>span:not(.zn),.foot-brand [data-i18n="ft.about"],.faq details p){font-family:var(--f-head);line-height:1.8}
/* Urdu runs in Amiri everywhere, so nothing in the interface may drop below 15px */
:root:lang(ur){--fs-xs:.9375rem}
:root:lang(ur) :is(.day small,.book-steps li,.field .err,.ab,.tlink--sm,.chips--types .chip,.lang-more,.foot-bottom,.hint,.fine){font-size:.9375rem}
:root:lang(ur) :is(.hero-cap small,.cq-msg,.req-disc,.glance .note,.zone small,.footer .foot-links a){font-size:.9375rem}
:root:lang(ur) :is(.steps p,.req p,.remote-note,.law-modes,.res-head p,.zone>button>span:not(.zn),.faq details p){line-height:1.9}   /* Urdu in Amiri needs the taller leading */
/* Zones map on phones: the 600-unit SVG shrinks its labels below reading size — keep numbers, enlarge them */
@media (max-width:599px){
  .zmap .lbl{display:none}
  .zmap .mk{transform-box:fill-box;transform-origin:center;transform:scale(1.7)}
  .zmap .haram-l,.zmap .ring-l{font-size:20px}
}
/* Band pause button above the action bar on phones and tablets */
@media (max-width:899px){.cine-pause{inset-inline-end:var(--gutter);inset-block-end:calc(84px + env(safe-area-inset-bottom))}}
/* Windows High Contrast: selected states must not rely on colour alone */
@media (forced-colors:active){
  :is(.chip,.seg-b,.day,.slot,.lang-quick button,.zone>button)[aria-pressed=true],
  :is(.pop-langs,.drawer-langs) button[aria-current=true]{forced-color-adjust:none;background:Highlight!important;border-color:Highlight!important;color:HighlightText!important;box-shadow:none!important}
  :is(.chip,.seg-b,.day,.slot,.lang-quick button,.zone>button)[aria-pressed=true] *,
  :is(.pop-langs,.drawer-langs) button[aria-current=true] *{color:HighlightText!important;background:none!important}
  /* the photo shade layers go: the system colours carry the contrast */
  .hero-copy::before,.hero-media::before,.hero-media::after,.cine-frame::before,.cine-frame::after{display:none}
  .opt.is-checked{outline:2px solid Highlight;outline-offset:-2px}
  /* drawn plus / minus signs are gradients, which forced colours remove: redraw them in the text colour */
  .faq summary::after{forced-color-adjust:none;background:linear-gradient(CanvasText,CanvasText) center/14px 1.5px no-repeat,linear-gradient(CanvasText,CanvasText) center/1.5px 14px no-repeat}
  details.more summary::before{forced-color-adjust:none;background:linear-gradient(LinkText,LinkText) center/12px 1.5px no-repeat,linear-gradient(LinkText,LinkText) center/1.5px 12px no-repeat}
  details.more[open] summary::before{background:linear-gradient(LinkText,LinkText) center/12px 1.5px no-repeat}
  /* the current section and booking step were shown by colour or a drawn line only */
  #mainnav a:is(:hover,[aria-current=true]),.book-steps li.is-on{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em}
  /* SVG fills are not forced: the white footer and drawer logos vanished on a light theme. The logo takes the text colour; the watermark goes */
  :root,.hdr,.on-dark{--logo-a:CanvasText;--logo-b:CanvasText}
  .supergraphic{display:none}
  .speak-list::before{forced-color-adjust:none;background:CanvasText}   /* the masked WhatsApp glyph keeps a colour */
}

/* ---------- 23. Official content & condition questions ---------- */
/* Lead form: the one-tap condition questions (#rConds) reuse .field, .flabel, .chips and .chip; the note under a question reuses .note.
   None is required: the block reads as one quiet group between hairlines, and "optional" is said once, beside its first question */
.cq{display:grid;gap:1.15rem;padding-block:1.25rem;border-block:1px solid var(--line)}
.cq-lh{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem}
.cq-opt{font:400 var(--fs-label)/1.35 var(--f-ui);color:var(--stone)}
.cq-msg{font-size:.875rem}
/* the note is a polite live region: kept in the accessibility tree while empty, so its first message is announced */
.cq-msg:empty{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
.cq-msg>span{min-inline-size:0}
.cq-msg .tlink{display:flex;inline-size:fit-content;font-size:inherit}
/* Zones: the 10 official zones. The rule line reuses .note; the official-map link shows its government address */
.zones-rules{margin-top:1.25rem}
.zones-official{flex-wrap:wrap;row-gap:0;margin-top:.35rem}
.ext-host{font:400 var(--fs-xs)/1.4 var(--f-num);color:var(--stone)}
/* map: a pin pushed off its zone's centre keeps a thin line to a small square on that centre; text gets a paper halo over the rings */
.zmap .ldr{stroke:var(--stone);stroke-width:1}
.zmap .pt{fill:var(--navy)}
.zmap :is(.lbl,.haram-l,.ring-l){paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
/* phones show numbers only: a legend under the map names the Haram */
.map-key{display:none;align-items:center;gap:.45rem;font:500 var(--fs-xs)/1.4 var(--f-ui);color:var(--navy)}
.map-key .sq{inline-size:12px;block-size:12px;background:var(--navy)}
@media (max-width:599px){.zmap .haram-l{display:none}.map-key{display:inline-flex}}
/* Investors: "The law at a glance" has longer official values; on phones each label sits above its value */
@media (max-width:599px){.glance dl>div{grid-template-columns:minmax(0,1fr);row-gap:.1rem}.glance dd{text-align:start}}