@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Tajawal:wght@400;500;700&family=Reem+Kufi:wght@400;500;600&display=swap');

/* ===========================================================================
   modonraselhikmaa.com — Coastal Film Atlas (build cfa.2, seed eed4698c)
   A monochrome cinematic atlas of Ras El Hekma: full-bleed film frames, a
   horizon/progress line, an atlas index instead of cards, ledger data surfaces.
   Palette evidence: modon.com (see DESIGN.md) — neutral black, warm off-white,
   one measured warm-stone accent. No gold, no glass, no card grid.
   =========================================================================== */
:root{
  --ink:#0c0c0d; --ink-2:#1a1a1c; --ink-soft:#4a4a4e;
  --surface:#f4f2f0; --surface-2:#ffffff; --line:#dedad5;
  --stone:#b2aa98;          /* light accent — dark grounds only (8.4:1 on --ink) */
  --stone-deep:#726c5f;     /* text-safe stone: 5.19:1 on #fff, 4.65:1 on --surface */
  --stone-tint:#e6e2da;
  --wa:#12672f;             /* 6.7:1 with white; AA-safe for compact CTA labels */
  --danger:#b3261e;
  --radius:0px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ff:"Vazirmatn",system-ui,"Segoe UI",Tahoma,sans-serif;
  --pad-sec:clamp(4rem,9vw,7.5rem);
  --wrap:1200px;
  --hdr-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
/* 🔑 Mobile overflow belt. `clip` is unsupported on older Safari/webviews, hence both. */
html,body{overflow-x:hidden;overflow-x:clip}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Anchor targets must clear the sticky header (and the mobile chapter strip). */
  scroll-padding-top:calc(var(--hdr-h) + 1.5rem);
  scrollbar-width:thin;
  scrollbar-color:var(--stone-deep) var(--surface);
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--stone);border:2px solid var(--surface)}
::-webkit-scrollbar-thumb:hover{background:var(--stone-deep)}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font:400 1.0625rem/1.85 var(--ff);
  -webkit-font-smoothing:antialiased;
}
body[dir="ltr"]{line-height:1.75}
img,svg,video{max-width:100%;max-inline-size:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
/* Selection, caret and focus are drawn surfaces — theme them from the palette. */
::selection{background:var(--stone);color:var(--ink)}
input,textarea,select{caret-color:var(--stone-deep)}
::placeholder{color:#6f6f73;opacity:1}
:focus-visible{outline:3px solid var(--stone-deep);outline-offset:2px}
.hdr :focus-visible,.hero :focus-visible,.band :focus-visible,.close :focus-visible,
.ftr :focus-visible,.sticky :focus-visible,.trust :focus-visible{outline-color:var(--stone)}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 🔑 Clipped, NOT parked at -9999px: under dir=rtl an inline-start offset lands the link 9999px
   to the RIGHT and the whole document gains sideways scroll. */
.skip{position:absolute;top:0;inset-inline-start:0;z-index:1200;background:var(--ink);color:#fff;
  padding:.75rem 1.25rem;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0 0 .6em;font-weight:700;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:clamp(2.4rem,6.4vw,4.9rem);line-height:1.04;max-width:16ch}
h2{font-size:clamp(1.7rem,3.6vw,2.75rem);letter-spacing:-.022em;max-width:26ch}
h3{font-size:1.2rem;font-weight:600;letter-spacing:0}
/* ⛔ ARABIC TAKES NO TRACKING — EVER. Arabic is a connected script: any letter-spacing breaks
   the joins. Latin keeps its optical tightening. */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0}
[dir="rtl"] h1{line-height:1.2;max-width:20ch}
[dir="rtl"] h2{line-height:1.3;max-width:30ch}
[dir="rtl"] h3,[dir="rtl"] h4{line-height:1.45}
/* Arabic glyphs render visually smaller than Latin at the same point size. */
[dir="rtl"] body,body[dir="rtl"]{font-size:1.135rem}
/* The zero-tracking rule extends to every Arabic-bearing chrome line: the Arabic price line
   and the «مبيعات معتمدة» header credit are Arabic script, so they take no letter-spacing. */
[dir="rtl"] .hero-price,[dir="rtl"] .logo small{letter-spacing:0}
p{margin:0 0 1.1em;text-wrap:pretty}
.lead{font-size:1.15rem;max-width:56ch}
.eyebrow{
  font:500 .8rem/1.4 var(--ff);letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);margin:0 0 .9rem;
}
/* Arabic must never be uppercased — it has no case and the property breaks shaping */
[dir="rtl"] .eyebrow:lang(ar){text-transform:none;letter-spacing:0}
.tabnum{font-variant-numeric:tabular-nums}
/* ⭐ AD RANK line — the English project name inside the Arabic page. Real indexable text. */
.en-line{
  font:500 .95rem/1.5 var(--ff);letter-spacing:.01em;color:var(--stone);
  margin:-.35em 0 .9em;
}
.note{font-size:.85rem;color:var(--ink-soft)}

/* ---------- header + horizon progress ---------- */
.hdr{position:sticky;top:0;z-index:900;background:var(--ink);color:#fff;
  border-bottom:1px solid rgba(178,170,152,.28)}
.hdr-in{display:flex;align-items:center;gap:1.25rem;min-height:var(--hdr-h)}
.hdr a{text-decoration:none}
.logo{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:#fff;line-height:1.25}
.logo small{display:block;font-weight:400;font-size:.7rem;letter-spacing:.1em;color:var(--stone)}
.nav{display:flex;gap:1.5rem;margin-inline-start:auto;font-size:.95rem}
.nav a{color:#e8e6e3;padding:.5rem 0;border-bottom:1px solid transparent;min-height:44px;
  display:inline-flex;align-items:center;transition:border-color .2s var(--ease),color .2s var(--ease)}
.nav a:hover{color:#fff;border-bottom-color:var(--stone)}
.nav a[aria-current="page"]{border-bottom-color:var(--stone)}
.hdr .btn{margin-inline-start:1rem}
.burger{display:none;margin-inline-start:auto;background:none;border:0;color:#fff;padding:.6rem;
  min-width:44px;min-height:44px;cursor:pointer;place-items:center}
.burger-ic{display:grid;gap:5px;width:22px}
.burger-ic i{display:block;height:1.5px;background:currentColor;
  transition:transform .25s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] .burger-ic i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-ic i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-ic i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* The site-wide horizon/progress line, pinned to the header's bottom edge. The fill is driven
   by JS through transform only; without JS the hairline simply rests. */
.horizon-progress{position:absolute;inset-inline:0;bottom:-1px;height:2px;
  background:rgba(178,170,152,.16)}
.horizon-progress i{display:block;height:100%;background:var(--stone);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}
[dir="rtl"] .horizon-progress i{transform-origin:100% 50%}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.8rem 1.6rem;border:1px solid var(--ink);border-radius:var(--radius);
  background:var(--ink);color:#fff;font:600 .975rem var(--ff);text-decoration:none;cursor:pointer;
  transition:background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.btn:hover{background:var(--stone-deep);border-color:var(--stone-deep);color:#fff}
.btn:active{transform:translateY(1px)}
.btn-stone{background:var(--stone);border-color:var(--stone);color:var(--ink)}
.btn-stone:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:currentColor;border-color:currentColor}
.btn-ghost:hover{background:var(--stone);border-color:var(--stone);color:var(--ink)}
.btn-wa{background:var(--wa);border-color:var(--wa);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.sec-cta{display:flex;margin-top:2rem}
.hero-ctas{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.75rem 0 0}

/* ---------- hero: the film frame ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  min-height:32rem;min-height:calc(100svh - var(--hdr-h));
  display:flex;flex-direction:column;justify-content:flex-end}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* A bottom-anchored ink gradient for legibility — never a flat tint wash. */
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,12,13,.58) 0,rgba(12,12,13,.12) 30%,rgba(12,12,13,.66) 74%,rgba(12,12,13,.94) 100%)}
/* Designed no-image state: the frame holds on ink alone — plate hairlines and a mid-frame
   horizon rule, never a broken-image glyph. */
.hero-plate{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,12,13,.88),rgba(12,12,13,.7)),
  linear-gradient(165deg,#17171a 0%,var(--ink) 55%)}
.hero-plate::after{content:"";position:absolute;inset-inline:0;top:46%;height:1px;
  background:rgba(178,170,152,.22)}
.hero-in{position:relative;z-index:2;padding-block:clamp(6rem,14vh,10rem) clamp(2.5rem,6vh,4rem)}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(12,12,13,.55)}
.hero .lead{color:#e8e6e3;text-shadow:0 1px 12px rgba(12,12,13,.5)}
.hero .en-line{color:#d3cfc8}
/* The Latin ad-rank line tucks under the title as a plate subtitle, never floats across the frame */
[dir="rtl"] .hero .en-line{text-align:right}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 0;padding:0;list-style:none}
.hero-chips li{border:1px solid rgba(255,255,255,.34);padding:.4rem .85rem;font-size:.85rem;
  font-weight:500;color:#e8e6e3}
/* The price is the second-loudest thing in the frame after the name. */
.hero-price{font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:700;color:var(--stone);
  letter-spacing:-.01em;margin:1.5rem 0 0;padding-top:1.15rem;position:relative;max-width:none}
.hero-price::before{content:"";position:absolute;top:0;inset-inline-start:0;
  width:3.5rem;height:1px;background:var(--stone)}
/* The horizon: a hairline at the frame's lower edge, flanked by location plates. */
.horizon{position:relative;z-index:2;display:flex;align-items:center;gap:1.1rem;
  padding-block:0 1.4rem;width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.horizon-tag{font-size:.72rem;letter-spacing:.12em;color:var(--stone);white-space:nowrap}
[dir="rtl"] .horizon-tag{letter-spacing:0}
.horizon-en{text-transform:uppercase}
[dir="rtl"] .horizon-en{letter-spacing:.14em}   /* Latin plate inside the Arabic page */
.horizon-track{flex:1;height:1px;background:rgba(178,170,152,.32);position:relative;overflow:hidden}
.horizon-fill{position:absolute;inset:0;background:var(--stone);
  transform:scaleX(1);transform-origin:0 50%}
[dir="rtl"] .horizon-fill{transform-origin:100% 50%}

/* ⭐ The one authored motion moment: a slow cinematic settle of the frame, connected to the
   horizon line drawing itself across. It begins from VISIBLE content (opacity never reaches 0),
   uses transform/opacity/clip-path only, and is fully static under reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .hero-bg{animation:frame-settle 2.1s var(--ease) backwards}
  .hero-plate{animation:frame-settle 2.1s var(--ease) backwards}
  .hero-in{animation:frame-rise .9s var(--ease) .15s backwards}
  .horizon-fill{animation:horizon-draw 1.8s var(--ease) .35s backwards}
}
@keyframes frame-settle{from{opacity:.55;transform:scale(1.045);clip-path:inset(0 0 8% 0)}}
@keyframes frame-rise{from{opacity:0;transform:translateY(1.1rem)}}
@keyframes horizon-draw{from{transform:scaleX(0)}}

/* Developer credit lockup. ⛔ A CREDIT, never the site's primary mark. */
.devmark{display:inline-flex;align-items:center;gap:.9rem;margin-bottom:1.3rem;
  padding:.5rem .95rem;border:1px solid rgba(255,255,255,.26)}
.devmark .lbl{font-size:.68rem;letter-spacing:.14em;color:var(--stone);white-space:nowrap}
[dir="rtl"] .devmark .lbl{letter-spacing:0}
.devmark .rule{width:1px;height:1.4rem;background:rgba(255,255,255,.26)}
.devmark img{display:block;width:104px;height:19px}
.band .devmark{border-color:rgba(255,255,255,.26)}

/* ---------- trust strip: proof on ink, flush under the frame ---------- */
.trust{background:var(--ink-2);color:#e8e6e3;border-block:1px solid rgba(255,255,255,.1)}
.trust-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:rgba(255,255,255,.1)}
.trust-in > div{background:var(--ink-2);padding:1.5rem 1.35rem}
.trust strong{display:block;font-size:.95rem;font-weight:600;color:#fff;margin-bottom:.3rem}
.trust span{display:block;font-size:.84rem;line-height:1.65;color:#a9a5a0}
.trust a{text-decoration:none;color:var(--stone);display:inline-flex;align-items:center;min-height:44px}
.trust a:hover{text-decoration:underline}

/* ---------- sections: hairline architecture, start-aligned ---------- */
.sec{padding-block:var(--pad-sec);border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.sec-head{margin:0 0 clamp(2rem,4.5vw,3.5rem);max-width:var(--wrap)}
.sec-head h2{margin-bottom:.35em}
.answer{font-size:1.15rem;color:var(--ink-2);max-width:70ch}
.sec .wrap > p,.sec .sec-body > p{max-width:70ch}
.prose-2 p{max-width:70ch}
@media (min-width:1100px){
  .prose-2{columns:2;column-gap:3.5rem}
  .prose-2 p{max-width:none;break-inside:avoid}
  .prose-2 p:first-child{margin-top:0}
}

/* full-bleed dark band. 🔑 .band whitens ALL descendants — light surfaces inside MUST reset. */
.band{position:relative;background:var(--ink);color:#f0eeec;border-top:0;overflow:hidden}
.band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38;
  object-position:50% 45%}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,13,.82),rgba(12,12,13,.64) 40%,rgba(12,12,13,.88))}
.band > .wrap{position:relative;z-index:2}
.band .answer{color:#e8e6e3}
.band .note{color:#b8b4ae}
.band a:not(.btn){color:var(--stone)}
.band h2,.band h3{color:#fff}
.band p{color:#dcd9d4}
.band .ledger{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.band .ledger div{border-color:rgba(255,255,255,.16)}

/* ---------- ledger: facts as a ruled data surface ---------- */
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;
  border:1px solid var(--line);background:var(--surface-2);margin:2.5rem 0 0}
.ledger div{padding:1.45rem 1.4rem;border-inline-start:1px solid var(--line)}
.ledger div:first-child{border-inline-start:0}
.ledger dt{font-size:.78rem;letter-spacing:.08em;color:var(--stone-deep);font-weight:600;margin-bottom:.45rem}
[dir="rtl"] .ledger dt{letter-spacing:0}
.ledger dd{margin:0;font-weight:700;line-height:1.2;letter-spacing:-.02em;
  font-size:clamp(1.25rem,1.9vw,1.7rem);overflow-wrap:anywhere}
[dir="rtl"] .ledger dd{letter-spacing:0}

/* keybar: the project's essential data, flush under the frame */
.keybar{background:var(--surface-2);border-bottom:1px solid var(--line);
  padding-block:clamp(1.75rem,3.5vw,2.75rem)}
.keybar .ledger{margin:0;border:0;background:transparent}

/* ---------- the atlas index ---------- */
.atlas{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.atlas-row{display:flex;align-items:baseline;gap:1.25rem;min-height:44px;
  padding:1.3rem .25rem;border-bottom:1px solid var(--line);text-decoration:none;
  transition:background-color .25s var(--ease)}
.atlas-row:hover{background:var(--surface-2)}
.atlas-num{flex:none;width:2.2rem;font-size:.82rem;font-weight:600;color:var(--stone-deep)}
.atlas-name{font-size:clamp(1.25rem,2.3vw,1.75rem);font-weight:700;line-height:1.3;letter-spacing:-.01em}
[dir="rtl"] .atlas-name{letter-spacing:0}
.atlas-en{display:block;font:500 .8rem/1.6 var(--ff);letter-spacing:.02em;color:var(--stone-deep)}
.atlas-note{display:block;font-size:.9rem;font-weight:400;color:var(--ink-soft);max-width:52ch;margin-top:.2rem}
.atlas-price{margin-inline-start:auto;font-weight:700;color:var(--stone-deep);
  white-space:nowrap;padding-inline-start:1rem;font-size:.98rem}
.badge-low{display:inline-block;vertical-align:middle;margin-inline-start:.6rem;
  border:1px solid var(--stone-deep);padding:.12rem .55rem;font-size:.7rem;font-weight:600;
  color:var(--stone-deep);white-space:nowrap}
.atlas-mini .atlas-name{font-size:1.15rem}
.atlas-types .atlas-row{align-items:first baseline}

/* ---------- plates: image-led project chapters, varied rhythm ---------- */
.plates{display:grid;gap:clamp(3rem,7vw,5.5rem);margin-top:clamp(2.5rem,5vw,4rem)}
.plate{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem 2.5rem;align-items:end}
.plate-media{grid-column:1/9;display:block;overflow:hidden;background:var(--ink);text-decoration:none}
.plate-media img{aspect-ratio:16/10;object-fit:cover;width:100%;height:100%;
  transition:transform .6s var(--ease)}
.plate:hover .plate-media img{transform:scale(1.03)}
.plate-body{grid-column:9/13;padding-bottom:.35rem}
.plate:nth-of-type(even) .plate-media{grid-column:5/13;grid-row:1}
.plate:nth-of-type(even) .plate-body{grid-column:1/5;grid-row:1}
.plate:nth-of-type(3n) .plate-media{grid-column:1/13;grid-row:auto}
.plate:nth-of-type(3n) .plate-media img{aspect-ratio:21/9}
.plate:nth-of-type(3n) .plate-body{grid-column:1/13;grid-row:auto;max-width:44rem}
.plate-num{display:block;font-size:.85rem;font-weight:600;color:var(--stone-deep);margin-bottom:.6rem}
.plate h3{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.015em;margin-bottom:.15em}
[dir="rtl"] .plate h3{letter-spacing:0}
.plate h3 a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.plate h3 a:hover{text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px;text-decoration-color:var(--stone-deep)}
.plate .en-line{color:var(--stone-deep);margin:0 0 .8rem}
.plate-line{color:var(--ink-soft);font-size:.98rem;max-width:44ch}
.plate-price{font-weight:700;color:var(--stone-deep);font-size:1.1rem;margin:.9rem 0 1.1rem}
.plate-cta{margin:0}
.plate-link{font-weight:600;text-decoration:none;border-bottom:1px solid var(--stone-deep);
  padding-bottom:.15rem;display:inline-flex;align-items:center;min-height:44px}
.plate-link:hover{color:var(--stone-deep)}
/* A plate with no photograph still holds the rhythm — an ink title card, not a gap. */
.plate-noimg{display:grid;place-items:center;aspect-ratio:16/10;width:100%;height:100%;
  background-color:var(--ink);background-image:linear-gradient(160deg,#17171a,var(--ink))}
.plate-noimg span{font-size:.8rem;letter-spacing:.12em;color:var(--stone)}
[dir="rtl"] .plate-noimg span{letter-spacing:0}

/* ---------- story grid + chapter rail ---------- */
.story{display:grid;grid-template-columns:210px minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4.5rem);padding-top:clamp(2.5rem,5vw,4rem)}
.rail{align-self:start;position:sticky;top:calc(var(--hdr-h) + 2rem)}
.rail ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rail-link{display:flex;gap:.7rem;align-items:baseline;padding:.6rem .25rem;min-height:44px;
  font-size:.92rem;text-decoration:none;color:var(--ink-soft);border-bottom:1px solid var(--line);
  transition:color .2s var(--ease)}
.rail-num{font-size:.72rem;font-weight:600;color:var(--stone-deep)}
.rail-link:hover{color:var(--ink)}
.rail-link[aria-current="true"]{color:var(--ink);font-weight:600}
.rail-link[aria-current="true"] .rail-num{color:var(--stone-deep)}
.story-main{min-width:0}
.story-main .sec{padding-block:clamp(2.75rem,5vw,4.25rem)}
.story-main .sec:first-child{padding-top:0;border-top:0}

/* ---------- frames: the gallery as film frames ---------- */
.frames{margin-top:1rem;width:100%;margin-inline:0;padding-inline:0}
.frame{margin:0 0 clamp(1.25rem,3vw,2rem);position:relative}
.frame img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--ink)}
.frame figcaption{position:absolute;inset-inline-end:0;bottom:0;background:var(--ink);color:var(--stone);
  font-size:.75rem;padding:.35rem .7rem;letter-spacing:.1em}

/* ---------- sequences: amenities and steps as a lived order ---------- */
.seq{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);counter-reset:seq}
.seq li{display:flex;gap:clamp(1.25rem,3vw,2.5rem);padding:1.6rem .25rem;border-bottom:1px solid var(--line)}
.seq-num{flex:none;width:2.4rem;padding-top:.45rem;font-size:.82rem;font-weight:600;color:var(--stone-deep)}
.seq h3{font-size:1.3rem;margin-bottom:.3rem}
.seq p{max-width:65ch;color:var(--ink-2)}
.seq p:last-child{margin-bottom:0}
.seq-dark{border-color:rgba(255,255,255,.16)}
.seq-dark li{border-color:rgba(255,255,255,.16)}
.seq-dark .seq-num{color:var(--stone)}
.seq-dark p{color:#dcd9d4}

/* ---------- tables: the comparison ledger ---------- */
.tbl-wrap{border:1px solid var(--line);background:var(--surface-2);margin-block:1.5rem}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{padding:.9rem 1.1rem;text-align:start;border-bottom:1px solid var(--line)}
th{background:var(--stone-tint);font-weight:600;font-size:.875rem}
tbody tr:last-child td{border-bottom:0}
td a{font-weight:600;text-decoration:none}
td a:hover{text-decoration:underline}
@media (hover:hover){
  tbody tr:hover td{background:#faf8f6}
}
/* Narrow screens: every row becomes a labelled block — never a sideways swipe. */
@media (max-width:640px){
  .tbl-wrap{border:0;background:transparent}
  table,tbody,tr,td{display:block;width:auto}
  thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  tbody tr{border:1px solid var(--line);background:var(--surface-2);
    padding:.35rem .9rem;margin-bottom:.75rem}
  tbody tr:last-child{margin-bottom:0}
  td{display:grid;grid-template-columns:minmax(5.5rem,auto) 1fr;gap:.25rem 1rem;
    align-items:start;padding:.6rem 0;border-bottom:1px dashed var(--line)}
  tr td:last-child{border-bottom:0}
  td::before{content:attr(data-label);font-size:.8rem;font-weight:600;
    color:var(--ink-soft);line-height:1.55}
}

/* ---------- master plan: an atlas plate ---------- */
.mp{margin:1.5rem 0}
.mp a{display:block;border:1px solid var(--stone);background:var(--surface-2);padding:.85rem;
  transition:border-color .25s var(--ease)}
.mp a:hover{border-color:var(--stone-deep)}
.mp img{width:100%}
.mp figcaption{padding-top:.85rem;font-size:.82rem;letter-spacing:.06em;color:var(--ink-soft);text-align:center}
[dir="rtl"] .mp figcaption{letter-spacing:0}
.band .mp figcaption{color:#b8b4ae}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:1.15rem 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;display:flex;
  justify-content:space-between;gap:1rem;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.875rem;height:.875rem;background:
  linear-gradient(var(--stone-deep),var(--stone-deep)) 50% 50%/100% 1.5px no-repeat,
  linear-gradient(var(--stone-deep),var(--stone-deep)) 50% 50%/1.5px 100% no-repeat}
.faq details[open] summary::after{background:
  linear-gradient(var(--stone-deep),var(--stone-deep)) 50% 50%/100% 1.5px no-repeat}
.faq p{margin:.85rem 0 0;color:var(--ink-2);max-width:70ch}

/* ---------- phases (phase_box markup lives in data.php — de-carded here) ---------- */
.phases{display:grid;gap:2.75rem}
.phases .card{background:none;border:0;padding:0;position:relative;transition:none}
.phases .card:hover{border-color:transparent}
.phases .card-img{width:100%;max-width:100%;margin:0 0 1.1rem;aspect-ratio:21/9;object-fit:cover;background:var(--ink)}
.phases .card-noimg{width:100%;max-width:100%;margin:0 0 1.1rem;aspect-ratio:21/9;
  display:grid;place-items:center;background-color:var(--ink);
  background-image:linear-gradient(160deg,#17171a,var(--ink))}
.phases .card-noimg span{font-size:.8rem;letter-spacing:.12em;color:var(--stone)}
[dir="rtl"] .phases .card-noimg span{letter-spacing:0}
.phases .badge-n{display:block;width:auto;height:auto;border:0;border-radius:0;
  font-size:.82rem;font-weight:600;color:var(--stone-deep);margin-bottom:.4rem;text-align:start}
.phases .card h3{font-size:1.6rem;margin-bottom:.2em}
.phases .card h3 a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.phases .card h3 a:hover{text-decoration:underline;text-decoration-color:var(--stone-deep)}
.phases .card .en-line{color:var(--stone-deep);margin:0 0 .8rem}
.phases .phase-facts{margin:.9rem 0 1.2rem;display:grid;gap:0;border-top:1px solid var(--line)}
.phases .phase-facts > div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid var(--line)}
.phases .phase-facts dt{margin:0;font-size:.82rem;color:var(--ink-soft)}
.phases .phase-facts dd{margin:0;font-size:.92rem;font-weight:600;text-align:end;overflow-wrap:anywhere}
.phases .phase-cta{margin:0}
.phases .phase-cta .btn{min-height:44px;padding:.6rem 1.2rem;font-size:.9rem}

/* ---------- the close: authored enquiry chapter ---------- */
.close{background:var(--ink);color:#f0eeec;padding-block:var(--pad-sec);border-top:1px solid var(--ink)}
.close-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.close h2{color:#fff}
.close .answer{color:#dcd9d4;margin-bottom:2.25rem}
.reach{display:grid;border-top:1px solid rgba(255,255,255,.18)}
.reach-row{display:grid;grid-template-columns:1fr;gap:.15rem;padding:1.35rem .25rem;
  border-bottom:1px solid rgba(255,255,255,.18);text-decoration:none;color:#fff;min-height:44px}
.reach-tag{font-size:.78rem;letter-spacing:.1em;color:var(--stone)}
[dir="rtl"] .reach-tag{letter-spacing:0}
.reach-val{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:700;text-align:start}
.reach-best{font-size:.85rem;color:#b8b4ae}
a.reach-row:hover .reach-val{color:var(--stone)}
.reach-light{border-color:var(--line)}
.reach-light .reach-row{border-color:var(--line);color:var(--ink)}
.reach-light .reach-tag{color:var(--stone-deep)}
.reach-light .reach-best{color:var(--ink-soft)}
a.reach-light.reach-row:hover,a.reach-row.reach-light:hover{background:var(--surface-2)}
.reach-light .reach-row:hover .reach-val{color:var(--stone-deep)}
.reach-row.primary{background:rgba(178,170,152,.07)}
.reach-light .reach-row.primary{background:var(--surface-2)}

/* ---------- lead form ---------- */
.formcard{background:var(--surface-2);color:var(--ink);padding:1.75rem;
  border:1px solid var(--line);border-top:2px solid var(--stone)}
.formcard-title{font:700 1.15rem/1.3 var(--ff);margin:0 0 .35rem;letter-spacing:-.01em}
[dir="rtl"] .formcard-title{letter-spacing:0}
.formcard .note{font-size:.85rem;color:var(--ink-soft);margin-bottom:1.1rem}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.35rem}
.field input{
  width:100%;min-height:48px;padding:.7rem .9rem;font:400 1rem var(--ff);
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);
  transition:border-color .2s var(--ease);
}
.field input:focus{border-color:var(--ink);outline:2px solid var(--stone-deep);outline-offset:1px}
.field input[aria-invalid="true"]{border-color:var(--danger)}
.field .err{display:block;margin-top:.3rem;font-size:.82rem;color:var(--danger)}
.errsum{border:1px solid var(--danger);padding:.9rem 1.1rem;margin-bottom:1rem;background:#fdf2f1}
.errsum-title{font:600 .95rem/1.3 var(--ff);color:var(--danger);margin:0 0 .4rem}
.errsum a{color:var(--danger)}
/* honeypot — clipped, never parked off-canvas (RTL overflow), never display:none */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.formcard .btn{width:100%}
.request{max-width:34rem}
.sales .request,.request .formcard{margin-inline:0}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#c9c6c2;padding-block:3.5rem 2rem;font-size:.925rem}
.ftr-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2.5rem}
.ftr a{color:#e8e6e3;text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr h3{color:#fff;font-size:.95rem;margin-bottom:.9rem}
.ftr-index{list-style:none;margin:0;padding:0}
.ftr-index li{margin-bottom:.15rem}
.ftr-index a{display:flex;gap:.7rem;align-items:baseline;padding:.3rem 0;min-height:44px}
.ftr-num{font-size:.7rem;color:var(--stone);width:1.6rem;flex:none}
.ftr-tel{font-size:1.2rem;font-weight:700}
.ftr-tel a{color:#fff;display:inline-flex;align-items:center;min-height:44px}
.ftr .btn-wa{margin-top:.5rem}
.ftr-dev{margin:2.5rem 0 .75rem}
.ftr .disclaimer{margin-top:1.25rem;padding-top:1.5rem;border-top:1px solid #26262a;
  font-size:.85rem;color:#8f8c88;max-width:90ch}

/* ---------- sticky mobile bar ---------- */
.sticky{
  display:none;position:fixed;inset-inline:0;bottom:0;z-index:950;
  background:var(--ink);border-top:1px solid #26262a;
  padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
  grid-template-columns:repeat(3,1fr);gap:.5rem;
}
.sticky a{min-height:48px;font-size:.9rem;padding:.6rem .5rem;text-align:center}

/* ---------- modal (JS toggles .open — never [hidden]) ---------- */
.modal{position:fixed;inset:0;z-index:1100;display:none}
.modal.open{display:grid;place-items:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(12,12,13,.72)}
.modal-panel{position:relative;width:min(100% - 2rem,480px);max-height:90dvh;overflow:auto;
  background:var(--surface);border:1px solid var(--line);padding:1.75rem}
@media (prefers-reduced-motion:no-preference){
  .modal.open .modal-backdrop{animation:modal-fade .18s var(--ease)}
  .modal.open .modal-panel{animation:modal-in .22s var(--ease)}
}
@keyframes modal-fade{from{opacity:0}}
@keyframes modal-in{from{opacity:0;transform:translateY(.6rem)}}
.modal-x{position:absolute;inset-inline-end:.5rem;top:.5rem;min-width:44px;min-height:44px;
  background:none;border:0;cursor:pointer;color:var(--ink);display:grid;place-items:center}
.modal-x .x{position:relative;width:16px;height:16px;display:block}
.modal-x .x::before,.modal-x .x::after{content:"";position:absolute;top:50%;left:0;
  width:100%;height:1.5px;background:currentColor}
.modal-x .x::before{transform:translateY(-50%) rotate(45deg)}
.modal-x .x::after{transform:translateY(-50%) rotate(-45deg)}

/* ---------- thank-you ---------- */
.hero-thanks .hero-in{padding-block:clamp(7rem,18vh,11rem) clamp(3rem,8vh,5rem)}
.thanks-back{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:2.25rem}
.thanks-back a{color:var(--stone);min-height:44px;display:inline-flex;align-items:center}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .story{grid-template-columns:minmax(0,1fr);padding-top:0}
  /* The rail becomes a compact chapter strip pinned under the header. */
  .rail{position:sticky;top:var(--hdr-h);z-index:800;background:var(--surface);
    margin-inline:calc(50% - 50vw);padding-inline:max(1.25rem,calc(50vw - var(--wrap)/2));
    border-bottom:1px solid var(--line)}
  .rail ol{display:flex;overflow-x:auto;border-top:0;scrollbar-width:none}
  .rail ol::-webkit-scrollbar{display:none}
  .rail-link{border-bottom:0;border-inline-end:1px solid var(--line);
    padding:.65rem 1rem;white-space:nowrap;min-height:48px;align-items:center}
  .rail-link[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--stone)}
  html{scroll-padding-top:calc(var(--hdr-h) + 3.5rem)}
  .plate,.plate:nth-of-type(even),.plate:nth-of-type(3n){grid-template-columns:1fr}
  .plate-media,.plate:nth-of-type(even) .plate-media,.plate:nth-of-type(3n) .plate-media{grid-column:1/-1;grid-row:auto}
  .plate-body,.plate:nth-of-type(even) .plate-body,.plate:nth-of-type(3n) .plate-body{grid-column:1/-1;grid-row:auto}
  .close-in{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:grid}
  .nav.open{display:flex;position:absolute;inset-inline:0;top:var(--hdr-h);flex-direction:column;
    background:var(--ink);padding:.5rem 1.25rem 1rem;gap:0;border-top:1px solid #26262a}
  .nav.open a{min-height:48px;border-bottom:1px solid #26262a}
  .nav.open a:last-child{border-bottom:0}
  .hdr .btn{display:none}
  .sticky{display:grid}
  body{padding-bottom:76px}      /* reserve space so the bar never obscures focus */
  .ledger div{border-inline-start:0;border-top:1px solid var(--line)}
  .ledger div:first-child{border-top:0}
  .ftr-grid{grid-template-columns:1fr}
  .logo,.ftr-index a,.ftr-tel a,.trust a,td a,.atlas-row,.plate-link{
    min-height:44px
  }
  .horizon{flex-wrap:wrap;row-gap:.4rem;
    padding-block-end:calc(76px + 1.4rem)}   /* clear the fixed sticky bar */
  .horizon-track{flex:1 1 100%;order:3}
}
@media (max-width:640px){
  .atlas-price{white-space:normal;text-align:end}
  .seq li{gap:1rem}
}

/* ---------- reduced motion: everything rests ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  html{scroll-behavior:auto}
  /* The signature reveal and the horizon never move; content is simply there. */
  .horizon-fill,.horizon-progress i{transition:none;animation:none}
  .plate:hover .plate-media img{transform:none}
}

/* Reference: the approved Qatari Diar / Starfall presentation, adapted to Modon photography. */
:root {
  --surface:#151310; --surface-2:#211e19; --ink:#100f0d; --ink-2:#1b1814;
  --ink-soft:#c4b9aa; --line:rgba(227,211,187,.18); --stone:#d1b994;
  --stone-deep:#d1b994; --stone-tint:#302a23; --radius:14px;
  --copy:#f1e9dc; --copy-soft:#d6ccbd; --ff:"Inter","Segoe UI",sans-serif;
  --wrap:1280px; --hdr-h:80px;
}
html[lang="ar"] { --ff:"Tajawal","Segoe UI",sans-serif; }
body { color:var(--copy); font-size:1.02rem; padding-bottom:100px; }
body[dir="rtl"] { font-size:1.1rem; line-height:1.9; }
h1,h2,h3 { font-weight:600; letter-spacing:-.018em; }
html[lang="ar"] h1,html[lang="ar"] h2 { font-family:"Reem Kufi","Tajawal",sans-serif; font-weight:500; }
h1 { font-size:clamp(2.3rem,4.8vw,4.5rem); line-height:1.12; max-width:19ch; }
html[lang="ar"] h1 { line-height:1.4; }
h2 { font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.25; }
.wrap { width:min(100% - 3rem,var(--wrap)); }
.answer,.seq p,.faq p { color:var(--copy-soft); }
.note { color:var(--ink-soft); }
::selection { background:var(--stone); color:var(--ink); }
:focus-visible { outline:2px solid var(--stone); outline-offset:4px; }

.hdr { position:fixed; inset-inline:0; background:rgba(16,15,13,.94); border-bottom:1px solid var(--line); }
.hdr-in { gap:1.5rem; }
.logo { font-size:1rem; font-weight:600; }
.logo small { margin-top:.3rem; }
.nav { gap:1.8rem; font-size:.78rem; }
html[lang="en"] .nav a { letter-spacing:.09em; text-transform:uppercase; }
html[lang="ar"] .nav { font-size:.96rem; }
.hdr .btn { min-height:44px; padding:.65rem 1.3rem; font-size:.83rem; }
.burger { border:1px solid var(--line); border-radius:50%; }
@supports (animation-timeline:scroll()) {
  .hdr { animation:header-shade linear both; animation-timeline:scroll(); animation-range:0px 280px; }
  @keyframes header-shade {
    from { background:rgba(16,15,13,.12); border-bottom-color:transparent; backdrop-filter:blur(0px); }
    to { background:rgba(16,15,13,.94); border-bottom-color:var(--line); backdrop-filter:blur(14px); }
  }
}
.btn { min-height:52px; border-radius:999px; padding:.85rem 1.75rem; background:var(--stone); border-color:var(--stone); color:var(--ink); }
.btn:hover,.btn-stone:hover { background:#e6d4ba; color:var(--ink); border-color:#e6d4ba; }
.btn-ghost { background:rgba(255,255,255,.02); border-color:rgba(241,233,220,.35); color:var(--copy); }
.btn-wa { background:transparent; color:var(--copy); border-color:var(--line); }
.hero { min-height:min(100svh,60rem); }
.hero-in { padding-block:clamp(9rem,21vh,14rem) 3.5rem; }
.hero::after { background:linear-gradient(90deg,rgba(16,15,13,.85),rgba(16,15,13,.48) 57%,rgba(16,15,13,.16)),linear-gradient(0deg,rgba(16,15,13,.85),transparent 70%); }
html[lang="ar"] .hero::after { background:linear-gradient(270deg,rgba(16,15,13,.85),rgba(16,15,13,.48) 57%,rgba(16,15,13,.16)),linear-gradient(0deg,rgba(16,15,13,.85),transparent 70%); }
.hero h1,.hero .lead { text-shadow:none; }
.hero .lead { max-width:58ch; color:var(--copy); }
.hero .eyebrow,.hero .devmark .lbl { color:var(--copy); }
.hero-chips li { border-radius:999px; background:rgba(16,15,13,.25); border-color:rgba(241,233,220,.25); }
.hero-price { color:#e6d4ba; font-size:clamp(1.2rem,2vw,1.6rem); }
.hero .devmark { border:0; padding:0; }
.hero-in { animation:none; }
.hero-bg { animation:modon-arrive 1.6s var(--ease) both; }
@keyframes modon-arrive { from { transform:scale(1.04); } to { transform:none; } }
.horizon { padding-bottom:1.5rem; }
.trust { background:var(--ink-2); }
.trust-in { background:var(--line); }
.trust span { color:var(--ink-soft); }
.sec { border-color:var(--line); }
.sec-head { margin-bottom:2rem; }
.sec-head h2 { color:var(--copy); }
.ledger,.tbl-wrap,.mp a { border-radius:14px; overflow:hidden; }
.ledger dd { color:var(--copy); }
.keybar { background:var(--ink-2); }
th { color:var(--copy); }
tbody tr:hover td { background:rgba(209,185,148,.06); }
.mp a { background:#e9e5dd; }
.mp figcaption { color:var(--ink-soft); }
.frame { overflow:hidden; border-radius:14px; }
.rail-link:hover,.rail-link[aria-current="true"] { color:var(--copy); }
.atlas { border-top:0; }
.atlas-row { padding:1.25rem .8rem; border-radius:10px; }
.atlas-name { font-size:clamp(1.15rem,1.9vw,1.45rem); }
.atlas-row:hover { background:rgba(209,185,148,.07); }

/* Each project uses its own photograph. Copy remains normal document content. */
.plates { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.plates .plate,.plates .plate:nth-of-type(even),.plates .plate:nth-of-type(3n) {
  display:flex; flex-direction:column; justify-content:flex-end; position:relative;
  min-height:480px; overflow:hidden; border-radius:14px; background:var(--ink-2); isolation:isolate;
}
.plates .plate .plate-media { position:absolute; inset:0; margin:0; z-index:0; }
.plates .plate .plate-media img { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; }
.plates .plate::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(16,15,13,.12),rgba(16,15,13,.68) 30%,rgba(16,15,13,.97) 85%); }
.plates .plate .plate-body { position:relative; z-index:1; padding:2rem; width:100%; color:var(--copy); }
.plate h3 { font-size:1.7rem; line-height:1.4; }
.plate .plate-line,.plate .en-line { color:var(--copy-soft); }
.plate .plate-price,.plate .plate-num,.plate-link { color:#e6d4ba; }
.plate-link { min-height:44px; display:inline-flex; align-items:center; }
.plate-noimg { position:absolute; inset:0; background:var(--ink-2); }
.plate-noimg span { align-self:start; padding:1rem; }

.phases { gap:1.5rem; }
.phases .card { isolation:isolate; border-radius:14px; overflow:hidden; padding:2rem;
  background:var(--ink-2); color:var(--copy); }
.phases .card-img { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; margin:0; z-index:-2; object-fit:cover; }
.phases .card::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(16,15,13,.82); }
.phases .card .card-noimg { aspect-ratio:auto; background:none; margin:0 0 1rem; }
.phases .card .en-line,.phases .phase-facts dt { color:var(--copy-soft); }
.phases .phase-facts dd { color:var(--copy); }
.phases .phase-facts,.phases .phase-facts > div { border-color:rgba(241,233,220,.25); }

.sec-photo { position:relative; overflow:hidden; isolation:isolate; background:var(--ink-2); color:var(--copy); }
.sec-photo > .band-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; z-index:-2; }
.sec-photo::after { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,rgba(16,15,13,.90),rgba(16,15,13,.80)); }
.sec-photo > .wrap,.sec-photo > .sec-body { position:relative; }
.sec-photo .answer,.sec-photo p,.sec-photo .seq p { color:var(--copy); }
.sec-photo .ledger { background:rgba(16,15,13,.68); }
.story-main .sec.sec-photo { border:1px solid var(--line); border-radius:14px; padding:clamp(1.25rem,3vw,2.5rem); margin-block:1.5rem; }
.story-main .sec.sec-photo:first-child { padding-top:clamp(1.25rem,3vw,2.5rem); }
.sec-photo .seq-num { color:#e6d4ba; }
.formcard,.modal-panel { background:var(--surface-2); color:var(--copy); border:1px solid var(--line); border-radius:18px; }
.field input { min-height:54px; border-radius:10px; background:var(--ink-2); color:var(--copy); border-color:rgba(241,233,220,.3); }
.field input:focus { border-color:var(--stone); }
.field input::placeholder { color:var(--ink-soft); }
.modal-x { color:var(--copy); }
.modal-panel .formcard { border:0; padding:1.25rem 0 0; }
.field .err { color:#ffaba2; }
.errsum { background:#fdf2f1; color:#8a201b; }
.close { background:var(--ink); }
.reach-light .reach-row { color:var(--copy); }
.reach-light .reach-row.primary { background:var(--surface-2); }
.reach-light .reach-row:hover .reach-val { color:var(--stone); }
.ftr { padding-bottom:3rem; }
.sticky { display:grid; inset-inline:0; bottom:1.5rem; width:min(100% - 3rem,460px); margin-inline:auto;
  border:1px solid var(--line); border-radius:999px; padding:.3rem; gap:0; background:rgba(16,15,13,.97); }
.sticky .btn { border:0; min-height:48px; font-size:.84rem; padding:.7rem .65rem; }
.sticky .btn-wa { background:none; }
.sticky .btn-ghost { background:none; color:var(--copy); }
@media (max-width:1024px) {
  .story { gap:1rem; }
  .rail { background:var(--surface); }
  .plates { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px) {
  :root { --hdr-h:72px; }
  .hdr-in { gap:.7rem; }
  .hdr .btn { display:inline-flex; margin:0; font-size:.75rem; padding:.55rem .8rem; min-height:44px; white-space:nowrap; }
  .logo { font-size:.85rem; max-width:12rem; }
  .logo small { font-size:.65rem; letter-spacing:0; }
  .burger { margin-inline-start:auto; }
  .nav.open { background:var(--ink); max-height:calc(100svh - var(--hdr-h) - 80px); overflow:auto; }
  .nav.open a { min-height:52px; }
  .hero-in { padding-block:9rem 2.5rem; }
  .hero,.hero-thanks { min-height:100svh; }
  .hero::after,html[lang="ar"] .hero::after { background:linear-gradient(180deg,rgba(16,15,13,.55),rgba(16,15,13,.82) 32%,rgba(16,15,13,.94)); }
  .horizon { padding-bottom:1.5rem; }
  .horizon-en { white-space:normal; letter-spacing:.05em; }
  .sticky { bottom:0; width:100%; border-radius:0; border-inline:0; padding:.4rem .6rem calc(.4rem + env(safe-area-inset-bottom)); }
  .sticky .btn { font-size:.82rem; }
  body { padding-bottom:76px; }
}
@media (max-width:640px) {
  .wrap { width:calc(100% - 2rem); }
  h1 { font-size:2.35rem; }
  .hero .lead { font-size:1.1rem; }
  .hero-ctas { flex-direction:column; }
  .hero-ctas .btn { width:100%; }
  .hero-chips { gap:.4rem; }
  .hero-chips li { font-size:.8rem; }
  .plates { grid-template-columns:1fr; }
  .plates .plate,.plates .plate:nth-of-type(even),.plates .plate:nth-of-type(3n) { min-height:460px; }
  .plates .plate .plate-body { padding:1.5rem; }
  .phases .card { padding:1.5rem; }
  .atlas-row { flex-wrap:wrap; gap:.5rem .75rem; }
  .atlas-price { width:100%; padding:0; font-size:.95rem; text-align:start; }
  .atlas-types .atlas-name { width:100%; }
  tbody tr { border-radius:12px; }
  .trust-in { grid-template-columns:1fr 1fr; }
  .trust-in > div { padding:1.1rem .9rem; }
  .trust-in a { overflow-wrap:anywhere; }
  .formcard { padding:1.25rem; }
}
@media (prefers-reduced-motion:reduce) { .hero-bg,.hdr { animation:none; } }

/* Recognizable contact actions in the bottom bar. */
.sticky a.dd-contact-action{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;min-width:0}
.sticky a.dd-contact-action::before{content:none;display:none}
.sticky .dd-contact-icon{display:block;width:22px;height:22px;flex:0 0 22px;fill:currentColor;stroke:none;pointer-events:none}
.sticky a.dd-contact-action[href*="wa.me"],.sticky a.dd-contact-action.sb-wa{background:#086a40;color:#fff}
.sticky a.dd-contact-action:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
@media(max-width:400px){.sticky a.dd-contact-action{flex-direction:column;gap:3px;padding:6px 4px;min-height:54px;font-size:12px;line-height:1.4}}