light for legibility over the photo; .formcard-title IS a
on a white card, and `.hero p` (0,1,1) outranks `.formcard-title` (0,1,0) */
.hero .formcard,.hero .formcard p,.hero .formcard .formcard-title,
.hero .formcard label,.hero .formcard span{color:var(--ink);text-shadow:none;max-width:none}
.hero .formcard .note{color:var(--ink-soft)}
.formcard .note{font-size:.85rem;color:var(--ink-soft);margin-bottom:1.1rem}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.85rem;font-weight:600;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)}
.field input:focus{border-color:var(--sea-deep);outline:2px solid var(--sea-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)}
/* honeypot: clipped, not parked off-canvas — same RTL overflow reason as .skip */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.errsum{border:1px solid var(--danger);border-radius:var(--radius);padding:.9rem 1.1rem;
margin-bottom:1rem;background:#fdf2f1}
.errsum a{color:var(--danger)}
.formcard .btn{width:100%}
/* ---------- faq ---------- */
.faq details{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
padding:1rem 1.25rem;margin-bottom:.75rem}
.faq summary{cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{color:var(--sea-deep)}
/* ---------- contact channel cards ---------- */
.chan{display:grid;gap:1rem}
.chan .card{display:flex;flex-direction:column;gap:.4rem;align-items:center}
.chan .card.primary{border-color:var(--sea-deep);border-width:2px}
.chan .tag{font-size:.78rem;color:var(--ink-soft);font-weight:600}
[dir="rtl"] .chan .tag{letter-spacing:0}
.chan .val{font-size:1.15rem;font-weight:700}
.chan .best{font-size:.82rem;color:var(--ink-soft)}
/* ---------- sticky mobile bar ---------- */
.sticky{position:fixed;inset-inline:0;bottom:0;z-index:950;display:none;
grid-template-columns:repeat(3,1fr);background:var(--ink);border-top:1px solid rgba(255,255,255,.14)}
.sticky a{min-height:48px;font-size:.9rem;padding:.6rem .5rem;display:flex;align-items:center;
justify-content:center;color:#fff;text-decoration:none}
/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#c3ced6;padding-block:3.5rem 2rem;font-size:.925rem}
.ftr a{color:#e6edf2;text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr h3{color:#fff;font-size:.95rem;margin-bottom:.9rem}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.5rem}
.ftr .disclaimer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #26323d;
font-size:.85rem;color:#8c9aa5}
.updated{font-size:.85rem;color:var(--ink-soft)}
.srclist{font-size:.9rem;color:var(--ink-soft)}
/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:1000;display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(17,24,39,.6)}
.modal-panel{position:absolute;inset-inline:50%;top:50%;transform:translate(50%,-50%);
width:min(92vw,30rem);max-height:90vh;overflow:auto;background:var(--surface);
border-radius:var(--radius);padding:1.75rem}
[dir="ltr"] .modal-panel{transform:translate(-50%,-50%)}
.modal-x{position:absolute;top:.5rem;inset-inline-end:.5rem;background:none;border:0;
font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink-soft);min-width:44px;min-height:44px}
@media (max-width:1024px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
.hero-in{grid-template-columns:1fr;gap:2rem}
.nav{display:none}
.burger{display:block}
.nav.open{display:flex;position:absolute;inset-inline:0;top:70px;flex-direction:column;
background:var(--ink);padding:1rem 1.25rem;gap:.25rem}
.sticky{display:grid}
body{padding-bottom:56px}
.g3{grid-template-columns:1fr}
.modal-panel{inset-inline:0;top:auto;bottom:0;transform:none;width:100%;
border-radius:var(--radius) var(--radius) 0 0}
[dir="ltr"] .modal-panel{transform:none}
}
@media (max-width:640px){.g4{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
.card,.card-img,.split-shot img,.btn{transition:none}
.card:hover{transform:none}
.card:hover .card-img,.split-shot:hover img{transform:none}
}
/* ---------- phase summary box: a parent page carries its phases in full ---------- */
.phase-box{display:flex;flex-direction:column}
.phase-facts{margin:.9rem 0 .5rem;display:grid;gap:0;border-top:1px solid var(--line);text-align:start}
.phase-facts > div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
padding:.5rem 0;border-bottom:1px solid var(--line)}
.phase-facts dt{margin:0;font-size:.8rem;color:var(--ink-soft)}
.phase-facts dd{margin:0;font-size:.92rem;font-weight:600;text-align:end;overflow-wrap:anywhere}
.phase-src{font-size:.75rem;color:var(--ink-soft);margin:.25rem 0 .9rem}
.phase-cta{margin:auto 0 0}
.phase-cta .btn{width:100%;min-height:44px;padding:.6rem 1.2rem;font-size:.9rem}
.band .phase-facts > div,.band .phase-facts{border-color:var(--line)}
/* ══════════════════════════════════════════════════════════════════════════════════════════
DRAWN SECTIONS — amenities · payment plans · distances · price position
One elevation declaration per element (a hairline OR a shadow, never both). Every figure is
.tabnum so digits align down a column. Icons are 1.5-stroke drawn paths inheriting colour.
══════════════════════════════════════════════════════════════════════════════════════════ */
/* ---------- amenities: an icon list on a hairline grid, not a card wall ---------- */
.amn{list-style:none;margin:2rem auto 0;padding:0;display:grid;gap:0 2.5rem;
grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));border-block-start:1px solid var(--line);
max-inline-size:60rem;text-align:start}
.amn li{display:flex;align-items:center;gap:.85rem;padding:1rem .1rem;
border-block-end:1px solid var(--line);font-size:.95rem;line-height:1.45}
.amn svg{inline-size:24px;block-size:24px;flex:0 0 24px;fill:none;stroke:var(--sea-deep);
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.band .amn{border-block-start-color:rgba(255,255,255,.16)}
.band .amn li{border-block-end-color:rgba(255,255,255,.16)}
.band .amn svg{stroke:#9fd3e8}
/* ---------- payment plans: the down payment is the figure, the term is the axis ---------- */
/* A plan is two facts that belong side by side, split by a hairline — the down payment and the
term. The first cut put them in a two-column grid with the labels on 1fr, which parked both
figures against one edge and left two thirds of the card empty. */
.plans{list-style:none;margin:2rem auto 0;padding:0;display:grid;gap:1.1rem;
grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));max-inline-size:52rem}
.plans li{display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;
padding:1.5rem 1.25rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);
text-align:center;gap:0 1.25rem}
.plans li::before{content:"";grid-row:1;grid-column:2;inline-size:1px;block-size:2.9rem;
background:var(--line);justify-self:center}
.plans-dp{grid-column:1;grid-row:1}
.plans-y{grid-column:3;grid-row:1}
/* ⛔ Not :nth-of-type — every child here is a , so it counts the figures too and the two
labels land under the wrong figures. Explicit classes, checked in the render. */
.plans .k-dp{grid-column:1;grid-row:2}
.plans .k-y{grid-column:3;grid-row:2}
.plans-dp,.plans-y{font-family:var(--ff-latin);font-weight:700;color:var(--sea-deep);
letter-spacing:-.02em;line-height:1;font-size:2.2rem}
.plans-dp i,.plans-y i{font-style:normal;font-size:.42em;font-weight:600;
margin-inline-start:.15em;font-family:var(--ff);color:var(--ink-soft)}
.plans-k{font-size:.8rem;color:var(--ink-soft);margin-block-start:.55rem}
.band .plans li{background:transparent;border-color:rgba(255,255,255,.2)}
.band .plans-dp,.band .plans-y{color:#9fd3e8}
.band .plans-k{color:#c9d3da}
/* ⛔ The unit label inside a plan figure inherits --ink-soft, which is 7.56:1 on the
light card and 2.35:1 on the dark band. The band override coloured the NUMBER and left
its unit behind — «5 سنوات» rendered legibly followed by an illegible «سنوات». */
.band .plans-dp i,.band .plans-y i{color:#c9d3da}
/* ---------- distances: the figure leads, because the figure is the answer ---------- */
.dist{list-style:none;margin:2rem auto 0;padding:0;max-inline-size:40rem;
border-block-start:1px solid var(--line);text-align:start}
.dist li{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
padding:.9rem .25rem;border-block-end:1px solid var(--line)}
.dist-to{font-size:.98rem}
.dist-km{font-family:var(--ff-latin);font-weight:700;font-size:1.35rem;color:var(--sea-deep);
letter-spacing:-.02em;white-space:nowrap}
.dist-km i{font-style:normal;font-size:.6em;font-weight:600;margin-inline-start:.25em;
color:var(--ink-soft);font-family:var(--ff)}
/* ---------- price position: a real scale with this page pinned on it ---------- */
.rank{margin:2.75rem auto 0;padding:0;max-inline-size:46rem;text-align:start}
/* ⛔ The track's unfilled half was --surface-2 (#f0f0f0) sitting on a section whose ground is the
same value — so the scale looked like it stopped at the marker and the caption's two ends had
nothing to sit under. A track has to be visible where it is EMPTY; that is the part carrying
the information "there is more range beyond this point". */
.rank-track{position:relative;block-size:6px;border-radius:var(--radius-pill);
background:var(--line);margin-block-end:3.1rem}
.rank-fill{position:absolute;inset-block:0;inset-inline-start:0;border-radius:var(--radius-pill);
background:linear-gradient(to right,var(--sea-tint),var(--sea))}
[dir=rtl] .rank-fill{background:linear-gradient(to left,var(--sea-tint),var(--sea))}
.rank-pin{position:absolute;inset-block-start:50%;translate:0 -50%;inline-size:0}
.rank-pin::before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:0;
translate:-50% -50%;inline-size:16px;block-size:16px;border-radius:50%;
background:var(--sea-deep);box-shadow:0 0 0 4px var(--surface)}
[dir=rtl] .rank-pin::before{translate:50% -50%}
.rank-pin b{position:absolute;inset-block-start:1.15rem;inset-inline-start:0;translate:-50% 0;
font-family:var(--ff-latin);font-weight:700;font-size:1.05rem;color:var(--ink);
white-space:nowrap;letter-spacing:-.02em}
[dir=rtl] .rank-pin b{translate:50% 0}
.rank figcaption{display:flex;justify-content:space-between;gap:1rem;font-size:.82rem;
color:var(--ink-soft);line-height:1.5}
.rank figcaption i{display:block;font-style:normal;font-weight:700;font-size:.95rem;
color:var(--ink-2);font-family:var(--ff-latin);letter-spacing:-.02em}
.rank figcaption span:last-child{text-align:end}
.band .rank-track{background:rgba(255,255,255,.16)}
.band .rank-pin::before{background:#9fd3e8;box-shadow:0 0 0 4px var(--ink)}
.band .rank-pin b{color:#fff}
.band .rank figcaption{color:#c9d3da}
.band .rank figcaption i{color:#9fd3e8}
@media (max-width:600px){
.plans-dp{font-size:2rem}
.plans-y{font-size:1.3rem}
.rank-pin b{font-size:.95rem}
.rank figcaption{font-size:.78rem}
}
/* ---------- browser surfaces: the parts we did not draw still carry the design ---------- */
::selection{background:var(--sea-tint);color:var(--ink)}
.band ::selection{background:rgba(159,211,232,.35);color:#fff}
input,textarea,select{caret-color:var(--sea-deep)}
html{scrollbar-color:var(--sea-deep) var(--surface-2);scrollbar-width:thin}
::-webkit-scrollbar{inline-size:10px;block-size:10px}
::-webkit-scrollbar-track{background:var(--surface-2)}
::-webkit-scrollbar-thumb{background:var(--sea-deep);border-radius:var(--radius-pill);
border:2px solid var(--surface-2)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-2)}
a{text-underline-offset:.22em;text-decoration-thickness:from-font}
/* ---------- tap targets ----------
Padding a short link out to 44px is the wrong fix: «جون» is 37px wide because the word is
37px wide, and stretching it leaves a target that does not match what the eye sees. The card
IS the target — so the title link covers it, and the visible hit area equals the visible card.
Cards carrying their own elements opt out via .card-links so the stretch cannot swallow
them. */
.card,.phase-box{position:relative}
.card h3 a::after,.phase-box h3 a::after{content:"";position:absolute;inset:0;z-index:1}
/* ⛔ Do NOT blanket position:relative onto card descendants. Doing so makes the the nearest
positioned ancestor, so the stretched ::after covers the heading (303×23px) instead of the card
— the visual gate measured exactly that and was right to fail it. Only the elements that must
stay clickable ABOVE the overlay get a stacking context. */
.card .btn,.phase-box .btn,.phase-cta,.card .card-img,.phase-box dl{position:relative;z-index:2}
.card p,.phase-box p{position:relative;z-index:2;pointer-events:none}
/* On a touch viewport every link that stands alone — in a table cell, a list item, or as a phone
number — carries its own 44px box. Links inside a paragraph are exempt by WCAG 2.5.8 and stay
typographic; these are not in a paragraph, they ARE the row. */
@media (max-width:899px){
a[href^="tel:"],a[href^="https://wa.me"],
td > a,li > a,dd > a{display:inline-flex;align-items:center;min-block-size:44px}
/* «كازا» is 19px wide because the word is 19px wide. The box, not the text, has to reach 44 —
so the link keeps its typographic alignment and grows its hit area outwards instead. */
li > a{min-inline-size:44px}
}
@media (hover:hover){.card:hover h3 a{color:var(--sea-deep)}}
.plans-note{max-inline-size:52rem;margin:.9rem auto 0;font-size:.82rem;color:var(--ink-soft);
text-align:center}
.band .plans-note{color:#c9d3da}
/* ---------- pre-contract checklist: chrome, styled as a list of checks not as content ---------- */
.checks{list-style:none;margin:1.75rem auto 0;padding:0;max-inline-size:46rem;display:grid;gap:0;
border-block-start:1px solid var(--line);text-align:start}
.checks li{position:relative;padding:.85rem 2rem .85rem 0;border-block-end:1px solid var(--line);
font-size:.95rem}
[dir=rtl] .checks li{padding:.85rem 2rem .85rem 0}
[dir=ltr] .checks li{padding:.85rem 0 .85rem 2rem}
.checks li::before{content:"";position:absolute;inset-block-start:1.15rem;inset-inline-start:0;
inline-size:14px;block-size:8px;border-inline-start:2px solid var(--sea-deep);
border-block-end:2px solid var(--sea-deep);rotate:-45deg}
.band .checks{border-block-start-color:rgba(255,255,255,.16)}
.band .checks li{border-block-end-color:rgba(255,255,255,.16)}
.band .checks li::before{border-color:#9fd3e8}
/* ---------- location points + the dated update log ---------- */
.locpts,.upd{list-style:none;margin:1.5rem auto 0;padding:0;max-inline-size:46rem;
border-block-start:1px solid var(--line);text-align:start}
.locpts li,.upd li{position:relative;padding:.8rem 1.6rem .8rem 0;
border-block-end:1px solid var(--line);font-size:.95rem;line-height:1.55}
[dir=ltr] .locpts li,[dir=ltr] .upd li{padding:.8rem 0 .8rem 1.6rem}
.locpts li::before,.upd li::before{content:"";position:absolute;inset-block-start:1.25rem;
inset-inline-start:.25rem;inline-size:6px;block-size:6px;border-radius:50%;
background:var(--sea-deep)}
.upd li{font-variant-numeric:tabular-nums}
.band .locpts,.band .upd{border-block-start-color:rgba(255,255,255,.16)}
.band .locpts li,.band .upd li{border-block-end-color:rgba(255,255,255,.16)}
.band .locpts li::before,.band .upd li::before{background:#9fd3e8}
.devmark .devname{font-family:var(--ff-latin);font-weight:700;font-size:.95rem;
letter-spacing:.02em;color:#fff}
.sec .devmark .devname{color:var(--ink)}
.band .devmark .devname{color:#fff}
/* ═══════════════════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════════════════════════════════
IDENTITY — sodicdevelopmentsegypt.com · THE HORIZON «الأفق»
SODIC builds where two grounds meet: sea against sand on the North Coast, planting against
stone in Sheikh Zayed and New Cairo. This layer is built on that line. A light field, a deep
field, and a horizon between them — and on every page, the same horizon rule opens every
section.
── THE ONE THING ──────────────────────────────────────────────────────────────────────────
The STATEMENT BLOCK. Every
on this site is a real Arabic search query and every one is
followed by a 40–60 word answer; that pairing is why these pages exist. So it is given the
page's most deliberate piece of layout: a hairline drawn across the full measure, the question
set large in a narrow leading column, and the answer set beside it in a wider one, separated
by air. It repeats on every section of all 63 pages and nothing else on the fleet looks like
it. The design states the content contract rather than decorating around it.
── WHAT CHANGED FROM THE REGISTRY, AND WHY ────────────────────────────────────────────────
· Clause numbers, docket strip, dotted leaders, ledger row numbers, the stamp — all removed.
Every one of them was a filing-cabinet signal. A developer does not number its own rooms.
· Boxes and rules mostly removed. Separation is now tone and air. The Registry drew a line
around everything because a record must delimit its fields; a developer's site does not.
· Sections breathe: padding-block goes from 3–5rem to 4–7.5rem. Long dense Arabic pages
(median 831 words) need the rest more than they need the density.
· Photographs get bigger and lose their mount. They are the product, not exhibits.
· Geometry softens to 4px, with pills on buttons only — sodic.com's own shape language,
which the Registry had explicitly overridden to 2px.
── ARCHITECTURE RULES CARRIED FORWARD (each written after a live failure) ──────────────────
1. Band surface is an explicit class (.band), never :nth-of-type. Deriving colour from DOM
order meant reordering a section repainted the page — that is how 55 white-on-white
contrast failures shipped.
2. A button only ever consumes a PAIRED token (--accent + --on-accent). The invisible hero
CTA happened because a button reached for a raw palette value and landed ink on ink.
3. No measured text over a photograph, ever, unless an authored opaque plate sits between.
The contrast gate cannot composite alpha — it resolves a translucent surface to its
nearest opaque ancestor — so a scrim it cannot see is a failure it cannot catch.
4. Any numbering is a CSS counter, never text inside the
. The h2 is a search query.
═══════════════════════════════════════════════════════════════════════════════════════════ */
:root{
/* Readex Pro carries the headings — it is a genuine Arabic-first design (not a Latin face with
Arabic bolted on), geometric enough to feel architectural and open enough to hold a long
Egyptian project name at display size. IBM Plex Sans Arabic stays on body: at 831 words a
page, long-form legibility beats display personality, and the two share a humanist skeleton
so the switch reads as one voice at two volumes. */
--ff:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
--ff-display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
--ff-latin:"IBM Plex Sans Arabic",system-ui,sans-serif;
/* 🔑 EVERY PAIR BELOW WAS MEASURED BEFORE IT WAS USED. Ratios are against the surface named.
The one that changed the plan is --sea: SODIC's own cyan is 4.01:1 on white and 3.40:1 on
the answer field. It is a real brand asset and it is NOT a text colour. It carries rules,
frames, active states and display figures ≥24px, where the floor is 3:1. --marine carries
every accent that is actually read. */
--white:#ffffff;
--mist:#eef3f6; /* the alternating field */
--answer:#e4eef3; /* the statement block's ground */
--deep:#0e1a24; /* the far field: footer, trust strip */
--marine:#0a5a72; /* 7.73 white · 6.91 mist · 6.56 answer — the readable accent */
--sea:#0089b4; /* 4.01 white — DISPLAY + NON-TEXT ONLY · 4.39 on --deep, ≥24px */
--ink:#0e1a24; /* 17.62 white · 15.76 mist · 14.95 answer */
--ink-2:#1f3b4d; /* 11.73 white */
--ink-soft:#4a6072; /* 6.55 white · 5.86 mist · 5.56 answer */
--on-deep:#c8dae4; /* 12.25 on --deep */
--sand:#f2ede3; /* 15.10 on --deep — warm text on the far field */
--accent:var(--marine);
--on-accent:#ffffff; /* 7.73 on --marine */
--seal:#a12b22; /* 6.55 on white — published source conflicts */
--hair:#d7e1e8; /* hairline, NON-TEXT (1.4:1) */
--surface:var(--white);
--surface-2:var(--mist);
--line:var(--hair);
--sea-deep:var(--marine);
--sea-tint:var(--answer);
--ink-band:var(--deep);
--on-band:var(--sand);
--radius:4px;
--radius-pill:9999px; /* buttons and chips only — sodic.com's own shape */
--shadow:none;
--shadow-lift:0 18px 44px rgba(14,26,36,.10);
--ease:cubic-bezier(.22,1,.36,1);
--pad-sec:clamp(3.25rem,6vw,5.5rem);
--wrap:1240px;
}
body{background:var(--white);color:var(--ink);font-family:var(--ff);line-height:1.85}
h1,h2,h3{font-family:var(--ff-display);letter-spacing:0;font-weight:500}
h1{line-height:1.28;font-size:clamp(2rem,1.4rem + 3vw,3.5rem)}
h2{line-height:1.32;font-size:clamp(1.5rem,1.15rem + 1.6vw,2.25rem)}
h3{line-height:1.4;font-weight:500}
.tabnum,table,.plans,.facts dd,.hero-price,.split-price{font-feature-settings:"tnum","lnum"}
/* ── header: a thin white shelf. No docket, no double rule ───────────────────────────────── */
.hdr{background:var(--white);border-block-end:1px solid var(--hair);box-shadow:none}
.hdr-in::after{content:none} /* ⛔ the docket strip belonged to the Registry */
.hdr .logo,.hdr .nav a,.hdr .burger{color:var(--ink)}
.hdr .logo small,.hdr .logo-txt small{color:var(--ink-soft)}
.hdr .nav a{border-block-end:2px solid transparent;padding-block-end:.2rem}
.hdr .nav a:hover,.hdr .nav a[aria-current="page"]{border-block-end-color:var(--sea);
color:var(--marine)}
/* ── THE STATEMENT BLOCK — the signature ─────────────────────────────────────────────────────
A hairline across the measure, the question in a narrow leading column, the answer beside it.
Stacks under 900px, where two columns would leave the Arabic answer at ~28 characters. */
main{counter-reset:none}
.sec{padding-block:var(--pad-sec)}
.sec-head{text-align:start;max-inline-size:none;margin-inline:0;
border-block-start:1px solid var(--hair);padding-block-start:clamp(1.5rem,3vw,2.25rem);
margin-block-end:clamp(2rem,4vw,3rem)}
.sec-head::before{content:none} /* ⛔ no clause numbers */
.sec-head h2{text-align:start;margin:0}
.sec-head .answer{text-align:start;margin:0;max-inline-size:none;
font-size:1.0625rem;line-height:1.85;color:var(--ink-2);
background:var(--answer);border-radius:var(--radius);
border-inline-start:3px solid var(--sea);
padding:1.15rem 1.35rem}
[dir="rtl"] .sec-head .answer{font-size:1.09rem}
@media (min-width:900px){
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,10fr);
gap:clamp(2rem,5vw,4rem);align-items:start}
.sec-head h2{padding-block-start:.15rem}
}
/* ── bands are a tonal shift, not a slide. No border, no wash, no photograph underneath ──── */
.sec.band{background:var(--mist);color:var(--ink);border:0}
.sec.band .sec-head{border-block-start-color:#dbe5eb}
.sec.band .sec-head h2,.sec.band p,.sec.band li,.sec.band dt,.sec.band dd{color:var(--ink)}
.sec.band .sec-head .answer{background:var(--white);border-inline-start-color:var(--sea)}
.sec.band::after{content:none}
.sec.band .band-bg{display:none}
/* ── hero: headline on white, then the photograph wide and unmounted ─────────────────────── */
.hero{background:var(--white);color:var(--ink);min-height:0;overflow:visible;
padding-block:clamp(2rem,4vw,3.25rem) clamp(2.5rem,5vw,4rem);
border-block-end:0;justify-content:flex-start}
.hero::after{display:none}
.hero-in{align-items:start;padding-block:0}
.hero h1,.hero p,.hero-chips li,.hero-price{color:var(--ink);text-shadow:none}
.hero .eyebrow{color:var(--marine);letter-spacing:.06em;font-size:.8125rem;font-weight:500;
text-shadow:none}
.hero .en-line{color:var(--ink-soft)}
.hero-chips li,.hero-chips span{background:var(--mist);color:var(--ink-2);border:0;
border-radius:var(--radius-pill);font-weight:500;padding:.4rem 1rem}
/* one class, two jobs: a short figure on a project page («من 37 مليون ج.م») and a full
sentence on a hub. At the base's 2rem the sentence read as a second headline. */
.hero-price{font-family:var(--ff);font-weight:600;color:var(--ink);
font-size:clamp(1.2rem,1.05rem + .9vw,1.6rem);line-height:1.45}
.hero-price::before{background:var(--sea)}
.scroll-cue{color:var(--ink-soft)}
.hero .devmark{border-color:var(--hair)}
.hero .devmark .lbl{color:var(--ink-soft)}
.hero .devmark .devname{color:var(--ink)}
/* the photograph is the product: full measure, no frame, soft corner */
.hero-bg{position:relative;inset:auto;order:9;inline-size:100%;
block-size:clamp(220px,32vw,440px);object-fit:cover;border:0;border-radius:var(--radius);
margin-block-start:clamp(1.5rem,3vw,2.25rem)}
/* ── buttons: paired tokens, pill, quiet lift ────────────────────────────────────────────── */
.btn,.btn-stone,.btn-ghost,.btn-wa{border-radius:var(--radius-pill);box-shadow:none;
font-weight:500;min-block-size:48px;padding-inline:1.6rem;
transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn,.btn-stone,.hero .btn-stone{background:var(--marine);color:var(--on-accent);border:0}
.btn:hover,.btn-stone:hover,.hero .btn-stone:hover{background:#084a5e;color:var(--on-accent)}
.btn-ghost{background:transparent;color:var(--marine);border:1px solid var(--hair)}
.btn-ghost:hover{background:var(--mist);border-color:var(--marine);color:var(--marine)}
/* ── the lead form: a plain card, not a coupon ───────────────────────────────────────────── */
.formcard{background:var(--white);border:1px solid var(--hair);border-radius:8px;
box-shadow:var(--shadow-lift);position:relative}
.formcard::before{content:none} /* ⛔ the double-ruled coupon edge was Registry */
.formcard-title{border-block-end:1px solid var(--hair);padding-block-end:.7rem}
.field input,.field select,.field textarea{border-radius:var(--radius);
border:1px solid #c4d2db;background:var(--white)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--marine)}
.lbl{color:var(--ink-soft);font-size:.8125rem}
/* ── media: soft-cornered, unframed ──────────────────────────────────────────────────────── */
.split-card,.phase-box{border-radius:8px;box-shadow:none;background:var(--white);
border:1px solid var(--hair)}
.split-card img{border-radius:0}
.split-in{gap:clamp(2rem,4vw,3.5rem)}
/* ── facts: statements in air. No panel, no rules, no leaders ────────────────────────────────
The Registry ran these on dotted leaders — a table-of-contents device, and the single clearest
filing signal on the page. Here the label is small and quiet above a large value, and nothing
is drawn around either; the grid alone carries the reading order. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,3rem);
background:transparent;border:0;border-radius:0;padding:0;overflow:visible}
.facts > div{display:block;padding:0;border:0;background:transparent}
.facts > div::after{content:none} /* ⛔ the dotted leader */
.facts dt{order:0;color:var(--ink-soft);font-size:.8125rem;font-weight:500;
margin:0 0 .35rem;letter-spacing:0}
/* ⛔ FIGURES STAY ON PLEX. Measured in headless Chrome at 40px: Readex Pro renders "111" at
60.00px, "888" at 69.48px and "000" at 72.84px — a 21% spread, and it ships no `tnum` feature,
so `font-feature-settings:"tnum"` is inert on it. IBM Plex Sans Arabic renders all three at
exactly 72.00px. Readex carries the headings, where there are no columns of digits to keep
straight; every element that states a price, an area or a percentage stays on Plex. */
.facts dd{order:0;margin:0;font-family:var(--ff);font-weight:600;
font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);line-height:1.35;color:var(--ink)}
/* ── the unit matrix: a specification sheet. Horizontal hairlines, real air, no row numbers ─ */
.tbl-wrap{border:0;background:transparent}
table{border-collapse:collapse;inline-size:100%;border:0;counter-reset:none}
thead th{background:transparent;color:var(--marine);font-weight:500;font-size:.8125rem;
text-align:start;padding:.75rem 1rem;border-block-end:1px solid var(--marine);
letter-spacing:.02em}
tbody td{border-block-end:1px solid var(--hair);border-inline:0;padding:1rem;color:var(--ink)}
tbody tr:last-child td{border-block-end:0}
tbody td:first-child::before{content:none} /* ⛔ ledger row numbers */
tbody tr:hover td{background:var(--mist)}
/* ── payment: three figures on the mist field, nothing drawn around them ─────────────────────
⛔ The base grid is `figure · 1px rule · figure` with the caption UNDER each figure, and it is
correct. `.plans-k` are those captions — LABELS, not containers. A previous pass made
`.plans` a flex of `.plans-k` and detached every figure from its label. */
.plans{display:grid;gap:0;background:var(--mist);padding:clamp(1.5rem,3vw,2.25rem);
border-radius:8px;border:0}
.plans li{background:transparent;border:0;border-radius:0;padding:1rem 1.25rem}
.plans li::before{background:var(--hair)}
.plans-dp,.plans-y{font-family:var(--ff);font-weight:600;color:var(--marine);
font-size:clamp(2rem,1.5rem + 2vw,3rem);line-height:1.1}
.plans-dp i,.plans-y i{color:var(--ink-soft);font-weight:400;font-size:.4em}
.plans-k{font-size:.8125rem;color:var(--ink-soft);margin-block-start:.3rem}
.plans-note{color:var(--ink-soft)}
/* ── amenities: two quiet columns, a sea tick, no numbering ──────────────────────────────── */
.amn{padding:0;list-style:none;counter-reset:none;gap:0 clamp(2rem,4vw,3.5rem)}
.amn li{display:flex;gap:.75rem;align-items:center;background:transparent;
border:0;border-radius:0;padding:.65rem .1rem}
.amn li::before{content:none} /* ⛔ the numbered index */
/* ⛔ block-size too, not just inline-size. The base ships a 24×24 icon; overriding only the
width left a 24px-tall box on a 16px-tall line, and the mark floated above its own label. */
.amn li svg{inline-size:16px;block-size:16px;flex:0 0 16px;color:var(--sea);stroke:var(--sea)}
/* ── FAQ: hairline rows, a plus that becomes a cross ─────────────────────────────────────── */
.faq details{border:0;border-block-end:1px solid var(--hair);border-radius:0;background:transparent}
.faq summary{list-style:none;padding-block:1.15rem;font-weight:500;min-block-size:48px;
display:flex;justify-content:space-between;align-items:center;gap:1rem;
font-family:var(--ff-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--marine)}
.faq summary::after{content:"+";font-size:1.5rem;font-weight:300;color:var(--sea);
transition:transform .2s var(--ease);flex:none;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{border:0;padding-inline-start:0;margin-block-end:1.25rem;color:var(--ink-2)}
/* ── cards: photograph, name, one line. No border, no stamp ──────────────────────────────── */
.grid.g3,.grid.g4,#related .grid{display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(1.25rem,2.5vw,2rem);overflow:visible}
@media (max-width:900px){.grid.g3,.grid.g4,#related .grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid.g3,.grid.g4,#related .grid{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;block-size:100%;overflow:clip;
background:transparent;border:0;border-radius:8px;box-shadow:none;
transition:transform .25s var(--ease)}
.card:hover{transform:translateY(-3px)}
.card > img,.card img{inline-size:100%;aspect-ratio:16/10;object-fit:cover;border:0;
border-radius:var(--radius);border-block-end:0}
.card h3{margin-block:.85rem .25rem;font-size:1.125rem}
.card:hover h3{color:var(--marine)}
.card h3,.card p{overflow-wrap:anywhere}
.card p{color:var(--ink-soft);font-size:.9375rem}
.card > a:last-child{margin-block-start:auto;min-block-size:44px;display:inline-flex;
align-items:center;color:var(--marine)}
/* most cards have NO photograph — the designed state, not a degraded one */
.card-noimg{aspect-ratio:16/10;border:0;border-radius:var(--radius);color:var(--ink-soft);
background:var(--mist);display:flex;align-items:center;justify-content:center;font-size:.8125rem}
.badge-n{background:var(--white);color:var(--marine);border:1px solid var(--hair);
border-radius:var(--radius-pill);font-weight:500;font-size:.75rem;padding:.2rem .7rem;
transform:none;box-shadow:none}
#related.band{background:var(--mist)}
#related .card{background:transparent;border:0}
#related .card img,#related .card .card-noimg{display:block}
#related .card-noimg{background:var(--white)}
/* ── the section photograph: wide, unmounted, above its text ─────────────────────────────────
The Registry mounted these in paper and ruled them like exhibits. They are the product.
⛔ It stays ABOVE the text and is never a background: no measured text may cross a photograph,
because the contrast gate resolves alpha to the nearest opaque ancestor and cannot see a
scrim at all. */
.sec{display:flex;flex-direction:column}
.sec > .band-bg{order:-1;position:static;inset:auto;display:block;
inline-size:min(100% - 2.5rem,var(--wrap));margin-inline:auto;
block-size:auto;aspect-ratio:21/9;object-fit:cover;opacity:1;
border:0;outline:0;border-radius:var(--radius);
margin-block-end:clamp(2rem,4vw,3rem)}
.sec.band > .band-bg{display:block}
@media (max-width:640px){.sec > .band-bg{aspect-ratio:4/3}}
/* ── sources, and the published conflict ─────────────────────────────────────────────────────
Two sources disagreeing is printed rather than hidden. That is the site's strongest claim to
being worth reading, so it is set as a considered note, not an error state. */
.sec-sources{border-block-start:1px solid var(--hair);background:var(--mist)}
.srclist{font-size:.8125rem;color:var(--ink-soft)}
.srclist li{padding-inline-start:2rem;text-indent:-2rem}
.srclist a{color:var(--marine)}
/* ── the far field: trust strip and footer ───────────────────────────────────────────────── */
.trust{background:var(--deep);color:var(--sand);border:0}
.trust-in{gap:1px;background:rgba(200,218,228,.16)}
.trust-in > div{background:var(--deep)}
.trust strong{color:var(--white);font-family:var(--ff);font-weight:600}
.trust span{color:var(--on-deep)}
.trust a:not(.btn){color:var(--white);text-decoration:underline;text-underline-offset:3px}
.trust .btn{background:var(--white);color:var(--deep)}
.trust .btn:hover{background:var(--on-deep);color:var(--deep)}
.ftr{background:var(--deep);color:var(--on-deep)}
.ftr a{color:var(--on-deep)}
.ftr a:hover{color:var(--white)}
.ftr strong,.ftr h3,.ftr h4{color:var(--white)}
/* ── sticky slip + modal ─────────────────────────────────────────────────────────────────── */
.sticky{background:rgba(255,255,255,.97);border-block-start:1px solid var(--hair);
box-shadow:0 -8px 28px rgba(14,26,36,.08)}
.modal-panel{background:var(--white);border:0;border-radius:12px;box-shadow:var(--shadow-lift)}
/* ── remaining band assumptions from the base, restated for a LIGHT band ─────────────────────
⛔ The base was written for a dark header, dark hero and dark band. Surface and the text on it
must always change together, in ONE place — the first build of a light layer here shipped
108 contrast failures because `.nav a{color:#e6edf2}` and eleven siblings survived
underneath a repainted background. */
.band h2,.band h3,.band .facts dd,.band .rank-pin b{color:var(--ink)}
.band .eyebrow,.band .plans-k,.band .plans-dp i,.band .plans-y i,
.band .plans-note,.band .rank figcaption,.band .srclist{color:var(--ink-soft)}
.band a:not(.btn),.band .rank figcaption i{color:var(--marine)}
.band .plans-dp,.band .plans-y{color:var(--marine)}
.band th{background:transparent;color:var(--marine)}
.band th,.band td{border-color:var(--hair)}
.band .amn svg{stroke:var(--sea);color:var(--sea)}
.band .checks li::before{border-color:var(--sea)}
.band .rank-pin::before{background:var(--sea);box-shadow:0 0 0 4px var(--mist)}
.band .rank-track{background:var(--hair)}
.band .btn{color:var(--on-accent)}
.band .btn-ghost{color:var(--marine)}
/* ⛔ `.sec.band` is TWO classes — the base's `.sec.band .devmark .lbl{color:#9fd3e8}` is (0,4,0)
and a `.band …` rule at (0,3,0) loses to it no matter how late it is declared. Light-on-light,
1.45:1, and the only two failures the whole layer produced. */
.sec.band .devmark{border-color:var(--hair)}
.sec.band .devmark .lbl{color:var(--ink-soft)}
.sec.band .devmark .devname{color:var(--ink)}
.band .locpts li::before,.band .upd li::before{background:var(--sea)}
.band ::selection{background:rgba(0,137,180,.20);color:var(--ink)}
.sec.band .facts{background:transparent;border:0}
.sec.band .facts div{border:0;background:transparent}
.sec.band .facts dd{color:var(--ink)}
.sec.band table{color:var(--ink)}
.sec.band .plans{background:var(--white)}
.sec.band .eyebrow{color:var(--ink-soft)}
/* ── the header credit lockup ────────────────────────────────────────────────────────────────
⛔ .logo-txt is NOT decorative. It carries «مبيعات معتمدة» beside the developer's mark, and
that label is the whole difference between an authorised agent's header and an
impersonation of the developer's own site. Never display:none it, at any width.
The lockup is a link, so it must also clear the 44px tap target on its own. */
.logo{display:flex;align-items:center;gap:.75rem;min-block-size:44px}
.logo-mark{block-size:28px;inline-size:auto;display:block}
.logo-txt small{display:block;font-size:.6875rem;color:var(--ink-soft);white-space:nowrap;
letter-spacing:.02em}
.hero-noimg{display:flex;align-items:center;justify-content:center;
min-block-size:clamp(200px,28vw,360px);margin-block-start:clamp(1.5rem,3vw,2.25rem);
background:var(--mist);border:0;border-radius:var(--radius)}
.hero-noimg span{font-size:.875rem;color:var(--ink-soft)}
/* ── the developer credit ────────────────────────────────────────────────────────────────────
A CREDIT, not a second headline table: `.facts` values clamp up to 1.6rem for the project's
own figures, and at that scale the credit shouted over them. Chips rather than a comma list
because an inline link inside a sentence cannot reach the 44×44 target the gate enforces. */
.dev-facts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:clamp(1.25rem,2.5vw,2rem)}
.dev-facts div{padding:0}
.dev-facts dt{font-size:.75rem}
.dev-facts dd{font-size:1.0625rem;font-weight:500;line-height:1.5}
.sec-dev .dev-more{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
border-block-start:1px solid var(--hair);padding-block-start:1.25rem;
margin-block-start:clamp(1.5rem,3vw,2rem)}
.sec-dev .dev-more > span{font-size:.9375rem;color:var(--ink-soft);margin-inline-end:.25rem}
.dev-chip{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:1.1rem;
font-size:.9375rem;color:var(--ink-2);background:var(--mist);border:0;
border-radius:var(--radius-pill);text-decoration:none;
transition:background .18s var(--ease),color .18s var(--ease)}
.dev-chip:hover{background:var(--marine);color:var(--white)}
.sec.band .dev-chip{background:var(--white)}
.sec.band .dev-chip:hover{background:var(--marine);color:var(--white)}
/* ── alignment: a developer's page is set, not centred ───────────────────────────────────────
The base centres almost everything — `.sec > p`, `.facts` cells, `.card`, `.faq summary`, the
hero column. Centring is fine for a short marketing block; these pages carry a median of 831
Arabic words, and a centred ragged-both-edges paragraph gives the eye no return edge to find
on the next line. Start-aligned throughout is the single biggest readability gain available
here, and it is also what a property developer's own site looks like. */
.sec > p,.sec > .prose p,.prose-2 p{text-align:start;margin-inline:0;max-inline-size:68ch}
.facts dt,.facts dd,.faq summary,.faq details p,.mp figcaption{text-align:start}
.card{text-align:start}
.hero-in > div{text-align:start}
.hero p,.hero .devmark{margin-inline:0}
.hero-chips{justify-content:flex-start}
th{text-align:start}
.sec > .facts,.sec > .grid,.sec > .faq,.sec > .tbl-wrap,.sec > .mp{margin-inline:0}
@media (min-width:1100px){.prose-2 p{text-align:start}}
/* ── the key-data panel when the project has no gallery ──────────────────────────────────────
`.split-in` is a two-column grid: gallery beside key data. Roughly half these projects have no
photography yet, and the panel then sat in one column with the other left blank — a hole, not
a layout. Alone, it takes the full measure and its own list opens into columns, which reads as
a key-facts strip rather than a card missing its partner. */
.split-in > :only-child{grid-column:1/-1}
.split-in > .split-data:only-child .split-card{padding:clamp(1.5rem,3vw,2.25rem)}
.split-in > .split-data:only-child .split-list{display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 clamp(1.5rem,3vw,2.5rem)}
.split-title,.split-price,.split-src{text-align:start}
.split-price{font-family:var(--ff);font-weight:600;color:var(--ink)}
.split-src{color:var(--ink-soft);font-size:.8125rem}
/* ── the honest empty hero ───────────────────────────────────────────────────────────────────
⛔ `order:9` is what puts it BELOW the headline — `.hero-bg` carries it and `.hero-noimg` did
not, so the placeholder rendered first and pushed the h1 and the price under the fold on a
page whose photography simply has not been announced yet. A missing photograph is a
designed state here, not a degraded one, but it is never the first thing read. */
.hero-noimg{order:9;min-block-size:clamp(140px,16vw,200px)}
/* ── motion: a developer's site is calm. One entrance, hover only, and nothing on scroll ──────
No scroll-linked animation: `animation-timeline:view()` is Chrome-only, and an entrance that
starts at opacity 0 leaves the content invisible in every browser that does not support it. */
@media (prefers-reduced-motion:no-preference){
.hero-in{animation:sd-rise .5s var(--ease) both}
.hero-bg,.hero-noimg{animation:sd-rise .5s var(--ease) .08s both}
}
@keyframes sd-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.hero-in,.hero-bg,.hero-noimg{animation:none}
*{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
/* ── the measure ─────────────────────────────────────────────────────────────────────────────
⛔ The base caps prose at 68ch with `.sec > p`, and that selector has NEVER matched: the
markup is `.sec > .wrap > p`, so every paragraph on this site has been running the full
1200px of the wrap. At 18px Arabic that is ~125 characters a line — nearly double the
comfortable measure, on pages that carry a median of 831 words. `.sec .wrap > p` is the
selector that actually reaches them. */
.sec .wrap > p,.sec .wrap > .prose > p{max-inline-size:70ch;margin-inline:0}
/* the distance list carries a note when the figures are the developer's own drive minutes rather
than kilometres, or when a km value is derived rather than published */
.dist-note{font-size:.8125rem;color:var(--ink-soft);margin-block-start:.75rem}