/* Fraunces carries the civic, institutional register */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');
/* ===========================================================================
sodicdevelopmentsegypt.com β coastal corporate. Slate + cyan.
Tokens from live CSS extraction of sodic.com (see DESIGN.md).
Geometry is PILL-AND-CARD, deliberately the opposite of the Modon site's
hairline architecture β no two sites in this fleet share a shape language.
=========================================================================== */
:root{
--ink:#1b2419; /* 17.74:1 on white */
--ink-2:#2f4a2c; /* 11.42:1 */
--ink-soft:#4a5a46; /* 7.56:1 */
--surface:#fbfaf6;
--surface-2:#f0eee6;
--line:#ddd9cc; /* NON-TEXT ONLY β 1.29:1 */
/* π MEASURED BEFORE USE, and the measurement changed the plan.
--sea #0089b4 is 4.01:1 on white: fine for large display figures (β₯24px needs 3:1),
for rules, frames and active states β but it FAILS as body text, and white text on a
--sea button fill is 4.01:1, also failing. DESIGN.md wanted cyan on prices and CTAs.
Resolution that keeps the identity: --sea stays the visible accent on non-text and
display sizes; --sea-deep (6.95:1) carries every accent that is actually read. */
--sea:#4f8f3f; /* accent: rules, frames, active states, display figures */
--sea-deep:#356b28; /* the text-safe cyan: 6.95:1 on white, 6.10 on --surface-2 */
--sea-tint:#e6f0e0;
--wa:#1a8440; /* white button text 4.75:1 */
--danger:#a8322a;
--radius:2px;
--radius-pill:4px; /* sodic.com's signature button shape */
--shadow:0 1px 2px rgba(17,24,39,.06);
--shadow-lift:0 16px 40px rgba(17,24,39,.12);
--ease:cubic-bezier(.22,1,.36,1);
--ff:"Noto Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
--ff-latin:"Fraunces","Georgia",serif;
--pad-sec:clamp(3.5rem,7vw,6rem);
--wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
/* mobile overflow belt β `clip` is unsupported on older Safari, hence both */
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);
font:400 1.0625rem/1.85 var(--ff);-webkit-font-smoothing:antialiased}
/* Arabic renders visually smaller than Latin at one size: 18px vs 17px */
[dir="rtl"] body,body[dir="rtl"]{font-size:1.135rem}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--sea-deep);outline-offset:2px}
.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, never parked at -9999px: under dir=rtl that lands the link 9999px to the RIGHT
and hands the document 10,000px of 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.15;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5.6vw,4.2rem);line-height:1.08}
h2{font-size:clamp(1.6rem,3.4vw,2.6rem)}
h3{font-size:1.2rem;font-weight:600;letter-spacing:0}
/* β ARABIC TAKES NO TRACKING β connected script, any letter-spacing breaks the joins */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0}
[dir="rtl"] h1{line-height:1.2}
[dir="rtl"] h2{line-height:1.3}
p{margin:0 0 1.1em}
.lead{font-size:1.115rem}
.eyebrow{font:600 .78rem/1.4 var(--ff-latin);letter-spacing:.14em;text-transform:uppercase;
color:var(--sea-deep);margin:0 0 .9rem}
[dir="rtl"] .eyebrow:lang(ar){text-transform:none;letter-spacing:0}
.tabnum{font-variant-numeric:tabular-nums}
/* β AD RANK line β English project name inside the Arabic page. Indexable, never hidden. */
.en-line{font:500 .95rem/1.5 var(--ff-latin);color:var(--sea-deep);margin:-.35em 0 .9em}
.card .en-line{font-size:.85rem}
.hero .en-line{color:#cfe6f2}
/* ---------- header: dark, pill CTA ---------- */
.hdr{position:sticky;top:0;z-index:900;background:var(--ink);color:#fff}
.hdr-in{display:flex;align-items:center;gap:1.25rem;min-height:70px}
.hdr a{text-decoration:none}
.logo{font-weight:700;font-size:1.05rem;color:#fff}
.logo small{display:block;font-weight:400;font-size:.7rem;color:#9fd3e8}
[dir="rtl"] .logo small{letter-spacing:0}
.nav{display:flex;gap:1.5rem;margin-inline-start:auto;font-size:.95rem}
.nav a{color:#e6edf2;padding:.45rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--sea)}
.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}
/* ---------- buttons: full pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
padding:.8rem 1.9rem;border:1px solid var(--ink);border-radius:var(--radius-pill);
background:var(--ink);color:#fff;font:600 .975rem var(--ff);text-decoration:none;cursor:pointer;
transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn:hover{background:var(--sea-deep);border-color:var(--sea-deep)}
/* the accent button fills with --sea-deep, not --sea: white on --sea is 4.01:1 and fails */
.btn-sea{background:var(--sea-deep);border-color:var(--sea-deep);color:#fff}
.btn-sea:hover{background:var(--ink);border-color:var(--ink)}
.btn-ghost{background:transparent;color:currentColor;border-color:currentColor}
.btn-wa{background:var(--wa);border-color:var(--wa);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.sec-cta{display:flex;justify-content:center;margin-top:2rem}
/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
min-height:clamp(30rem,78vh,50rem);display:flex;flex-direction:column;justify-content:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero::after{content:"";position:absolute;inset:0;background:
linear-gradient(180deg,rgba(17,24,39,.62) 0,rgba(17,24,39,.2) 28%,rgba(17,24,39,.74) 74%,rgba(17,24,39,.94) 100%)}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;
align-items:end;padding-block:clamp(3.5rem,8vw,6rem)}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(17,24,39,.55)}
.hero p{color:#e3eaef;max-width:60ch;text-shadow:0 1px 12px rgba(17,24,39,.5)}
.hero .eyebrow{color:#9fd3e8;text-shadow:0 1px 10px rgba(17,24,39,.7)}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0 1.75rem;padding:0;list-style:none;
justify-content:center}
.hero-chips li{border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-pill);
padding:.4rem 1rem;font-size:.85rem;color:#eef3f6}
.hero-price{font-size:clamp(1.45rem,2.4vw,2rem);font-weight:700;color:#9fd3e8;
padding-top:1.1rem;margin-top:1.1rem;position:relative}
.hero-price::before{content:"";position:absolute;top:0;inset-inline-start:50%;transform:translateX(50%);
width:3.5rem;height:2px;background:var(--sea);border-radius:2px}
[dir="ltr"] .hero-price::before{transform:translateX(-50%)}
.scroll-cue{position:relative;z-index:2;padding-block:1.4rem 0;font-size:.82rem;color:#9fd3e8;
text-align:center}
[dir="rtl"] .scroll-cue{letter-spacing:0}
/* developer credit lockup β β a CREDIT, never this site's primary mark */
.devmark{display:inline-flex;align-items:center;gap:.9rem;margin-bottom:1.3rem;
padding:.5rem 1.1rem;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-pill)}
.devmark .lbl{font-size:.68rem;color:#9fd3e8;white-space:nowrap}
[dir="rtl"] .devmark .lbl{letter-spacing:0}
.devmark .rule{width:1px;height:1.3rem;background:rgba(255,255,255,.28)}
.devmark img{display:block;width:96px;height:24px}
.sec .devmark{border-color:var(--line)}
.sec .devmark .lbl{color:var(--ink-soft)}
/* β¦and back to light inside a dark band. `.sec .devmark .lbl` is (0,3,0) and beat the base rule,
so the credit label went dark-on-dark. The band variant needs (0,4,0) to win it back. */
.sec.band .devmark .lbl{color:#9fd3e8}
.sec.band .devmark{border-color:rgba(255,255,255,.28)}
.ftr-dev{margin:2.25rem 0 .75rem}
/* ---------- trust stack ---------- */
.trust{background:var(--ink-2);color:#e8eef2;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.4rem 1.25rem;text-align:center}
.trust strong{display:block;font-size:.95rem;font-weight:600;color:#fff;margin-bottom:.3rem}
.trust span{display:block;font-size:.82rem;line-height:1.6;color:#a9bcc7}
.trust a{text-decoration:none;color:#9fd3e8}
/* ---------- sections: π― CENTRED, owner rule ---------- */
.sec{padding-block:var(--pad-sec);background:var(--surface)}
.sec:not(.band):nth-of-type(even){background:var(--surface-2)}
.sec-head{max-width:72ch;margin:0 auto 2.5rem;text-align:center}
.answer{font-size:1.115rem;color:var(--ink);max-width:70ch;margin-inline:auto}
.sec > p{max-width:68ch;margin-inline:auto;text-align:center}
.sec > p + p{margin-top:1.05em}
.sec > .facts,.sec > .grid,.sec > .faq,.sec > .tbl-wrap,.sec > .mp{margin-inline:auto}
.facts dt,.facts dd,.card,.faq summary,.faq details p,.mp figcaption{text-align:center}
.hero-in > div{text-align:center}
.hero p,.hero .devmark{margin-inline:auto}
/* β exempt: table cells need a shared start edge; form labels sit at their input's edge */
th{text-align:center}
td{text-align:start}
.formcard,.formcard .field label,.formcard .err{text-align:start}
.formcard .formcard-title,.formcard > .note{text-align:center}
@media (min-width:1100px){
.prose-2{columns:2;column-gap:3.5rem;max-width:none}
.prose-2 p{max-width:none;break-inside:avoid;text-align:center}
}
/* full-bleed dark band.
π COMPOUND SELECTOR, not `.band` alone. `.sec:nth-of-type(even)` is (0,2,0) and `.band` is
(0,1,0), so the striping rule above outranked it: every band that happened to land on an even
section kept its white text on a LIGHT ground β 1.02:1, caught by the contrast audit on the
first run. Same family as the footer-button bug on the Modon site: a container rule beating a
component rule. */
.sec.band,.band{position:relative;background:var(--ink);color:#eef3f6;overflow:hidden}
.sec.band{background:var(--ink)}
.band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.band::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(17,24,39,.78),rgba(17,24,39,.62) 40%,rgba(17,24,39,.86))}
.band > .wrap{position:relative;z-index:2}
.band h2,.band h3{color:#fff}
/* π THE .band TRAP HAS THREE VARIANTS β all three answered here from the start.
(1) light card inside a dark band inheriting white text
(2) a token that HARDCODES --ink landing in the band (.answer was black-on-black on the
Modon site until the contrast audit caught it)
(3) a band link rule reaching INTO a white card */
.band .answer{color:#e8eef2}
.band .eyebrow{color:#9fd3e8}
.band .note,.band .updated,.band .srclist,.band .facts dt,.band .mp figcaption{color:#b6c4cd}
.band .card,.band .formcard{color:var(--ink)}
.band .card h3,.band .card h2,.band .formcard .formcard-title{color:var(--ink)}
.band .card a,.band .formcard a{color:var(--ink)}
.band .card .tabnum,.band .card .en-line{color:var(--sea-deep)}
.band a:not(.btn):not(.card a){color:#9fd3e8}
.band .facts{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.band .facts div{border-color:rgba(255,255,255,.16)}
.band .facts dd{color:#fff}
.band table{color:#e8eef2}
.band th{background:rgba(255,255,255,.07);color:#fff}
.band th,.band td,.band .tbl-wrap{border-color:rgba(255,255,255,.16)}
/* a button owns its text colour in EVERY context that can claim it */
.ftr .btn,.band .btn,.trust .btn,.btn.btn-wa,.btn.btn-sea{color:#fff}
/* ---------- cards: soft-shadow, photo-first ---------- */
.grid{display:grid;gap:1.5rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:1.4rem;color:var(--ink);box-shadow:var(--shadow);overflow:hidden;position:relative;
transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.card h3{color:var(--ink);margin-bottom:.35em;font-size:1.25rem}
/* 3:2 image cards per DESIGN.md, bleeding to the card edge */
.card-img{aspect-ratio:3/2;object-fit:cover;display:block;width:calc(100% + 2.8rem);max-width:none;
margin:-1.4rem -1.4rem 1.15rem;transition:transform .5s var(--ease)}
.card:hover .card-img{transform:scale(1.035)}
.card-noimg{aspect-ratio:3/2;width:calc(100% + 2.8rem);margin:-1.4rem -1.4rem 1.15rem;
background:var(--sea-tint);display:grid;place-items:center}
.card-noimg span{font-size:.78rem;color:var(--ink-soft)}
[dir="rtl"] .card-noimg span{letter-spacing:0}
.card .tabnum{color:var(--sea-deep);font-weight:700}
.card p,.card h3,.trust span{overflow-wrap:anywhere}
.badge-n{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;
border-radius:var(--radius-pill);background:var(--sea-tint);color:var(--sea-deep);
font-size:.9rem;font-weight:700;position:relative;z-index:2}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;
border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.facts div{padding:1.45rem 1.4rem;border-inline-start:1px solid var(--line)}
.facts div:first-child{border-inline-start:0}
.facts dt{font-size:.78rem;color:var(--ink-soft);margin-bottom:.45rem;font-weight:600}
[dir="rtl"] .facts dt{letter-spacing:0}
.facts dd{margin:0;font-size:clamp(1.4rem,2.1vw,1.8rem);font-weight:700;line-height:1.15;
letter-spacing:-.02em;color:var(--ink)}
[dir="rtl"] .facts dd{letter-spacing:0}
/* ---------- split panel: photos and numbers read together ---------- */
.split{padding-block:clamp(2.5rem,5vw,4rem);background:var(--surface-2)}
.split-in{display:grid;gap:1.5rem}
.split-media{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.split-shot{display:block;position:relative;overflow:hidden;border-radius:var(--radius);
background:var(--sea-tint)}
.split-shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;
transition:transform .5s var(--ease)}
.split-shot:hover img{transform:scale(1.04)}
.split-shot.is-lead{grid-column:1 / -1}
.split-shot.is-lead img{aspect-ratio:16/9}
.split-shot.is-mp img{object-fit:contain;background:var(--surface)}
.split-shot.is-mp span{position:absolute;inset-inline-start:0;bottom:0;background:var(--ink);
color:#fff;font-size:.75rem;padding:.35rem .7rem}
.split-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
padding:1.5rem;text-align:center;box-shadow:var(--shadow)}
.split-title{font-size:.72rem;color:var(--ink-soft);margin:0 0 .5rem;font-weight:600}
[dir="rtl"] .split-title{letter-spacing:0}
.split-price{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:700;color:var(--sea-deep);margin:0 0 .25rem}
.split-src{font-size:.78rem;color:var(--ink-soft);margin:0 0 1.1rem}
.split-list{margin:0 0 1.25rem;display:grid;border-top:1px solid var(--line)}
.split-list > div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
padding:.65rem 0;border-bottom:1px solid var(--line);text-align:start}
.split-list dt{font-size:.82rem;color:var(--ink-soft);margin:0}
.split-list dd{margin:0;font-weight:600;font-size:.95rem;text-align:end;overflow-wrap:anywhere}
.split-card .btn{width:100%}
.split-tel{margin:.85rem 0 0;font-size:1.05rem;font-weight:700}
.split-tel a{text-decoration:none;color:var(--ink)}
@media (max-width:900px){
.split-in{grid-template-columns:1fr}
.split-data{order:-1} /* the phone user came for the price, not the carousel */
}
@media (min-width:901px){
.split-in{grid-template-columns:1.55fr .95fr;gap:2.5rem;align-items:start}
.split-data{position:sticky;top:calc(70px + 1.25rem)}
}
/* ---------- tables: stack into labelled cards, never a sideways swipe ---------- */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
overflow:hidden}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{padding:.85rem 1rem;text-align:start;border-bottom:1px solid var(--line)}
th{background:var(--sea-tint);font-weight:700;font-size:.875rem;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
@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;overflow:hidden;clip-path:inset(50%);
white-space:nowrap;border:0}
tbody tr{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
padding:.35rem .9rem;margin-bottom:.75rem;box-shadow:var(--shadow)}
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}
[dir="rtl"] td::before{letter-spacing:0}
.g4,.g3,.g2{grid-template-columns:1fr}
}
/* ---------- master plan: a searched asset, framed in the accent ---------- */
.mp{margin:0}
.mp a{display:block;border:2px solid var(--sea);border-radius:var(--radius);
background:var(--surface);padding:.85rem}
.mp a:hover{border-color:var(--sea-deep)}
.mp img{width:100%}
.mp figcaption{margin-top:.8rem;font-size:.82rem;color:var(--ink-soft)}
[dir="rtl"] .mp figcaption{letter-spacing:0}
/* ---------- forms ---------- */
.formcard{background:var(--surface);color:var(--ink);padding:1.75rem;border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow-lift)}
.formcard-title{font:700 1.15rem/1.3 var(--ff);margin:0 0 .35rem}
/* π the hero paints every 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 β hydeparkdevelopments-egypt.com Β· THE GARDEN JOURNAL Β«Ψ―ΩΨͺΨ± Ψ§ΩΨΨ―ΩΩΨ©Β»
Hyde Park's entire proposition is the park: 600,000 mΒ² in the flagship, 15-feddan central
gardens in two more, a 168,000 mΒ² sports club. So this is the field guide to that garden β
specimen labels, pressed-leaf dividers, seed-packet cards, stepping stones, paths of dotted
line. Everything is rounded the way a pebble is rounded and generous the way a park is
generous.
Where SODIC files documents (start-aligned, 2px corners, full-bleed ruled bands, dotted
leaders) this centres its heads, rounds every corner to 20β32px, and floats its bands as
INSET LAWNS β rounded rectangles on cream, never a full-width stripe. That band decision
alone separates it from both siblings before a single colour is read.
β CONTRAST NOTE, measured not assumed: the old brand green #4F8F3F carries white at 3.94:1
and fails at any size under 24px β it shipped on every pill button. It survives here only
as a GRAPHIC (leaf glyphs, dotted paths, borders). Everything read by a human uses --leaf
#2F6B33, which carries white at 6.42:1.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
:root{
--ff:"Rubik",system-ui,"Segoe UI",Tahoma,sans-serif;
--ff-latin:"Rubik",system-ui,sans-serif;
--cream:#fbfaf6;
--tint:#eef2e6; /* the lawn */
--ink:#1b2419; /* 15.31:1 on cream */
--ink-2:#1b2419;
--sage:#55614f; /* 6.27:1 on cream */
--ink-soft:var(--sage);
--leaf:#2f6b33; /* 6.15:1 on cream β every green that is READ */
--on-leaf:#ffffff; /* 6.42:1 on leaf */
--meadow:#4f8f3f; /* 3.77:1 β GRAPHIC ONLY, never text under 24px */
--clay:#a34d2f; /* 5.49:1 β prices, scarcity */
--moss:#243522; /* dark band ground */
--on-moss:#fbfaf6; /* 12.51:1 on moss */
--softline:#dde3d2;
--surface:var(--cream);
--surface-2:var(--tint);
--line:var(--softline);
--sea:var(--meadow);
--sea-deep:var(--leaf);
--sea-tint:var(--tint);
--radius:20px;
--radius-pill:9999px;
--shadow:0 10px 30px -18px rgba(27,36,25,.25);
--shadow-lift:0 22px 44px -20px rgba(27,36,25,.32);
--wrap:1180px;
}
body{background:var(--cream);color:var(--ink);font-family:var(--ff);line-height:1.85}
h1,h2,h3{letter-spacing:0}
h1{line-height:1.35;font-weight:700}
h2{line-height:1.4;font-weight:500}
h3{line-height:1.45;font-weight:500}
/* proportional figures in prose β humanist, not a ledger. Only the unit table lines them up. */
table,.tabnum{font-feature-settings:"tnum","lnum"}
/* ββ the section head is centred, and closed by a hairline broken for one leaf ββββββββββββββ */
.sec{padding-block:clamp(2.75rem,5.5vw,4.5rem)}
.sec-head{text-align:center;max-inline-size:62ch;margin-inline:auto}
.sec-head h2{color:var(--leaf);text-align:center}
.sec-head .answer{text-align:center;margin-inline:auto;max-inline-size:62ch}
/* the leaf rule: a hairline that parts in the middle for a single leaf. Appears under every
section head on every page β this is the one element that belongs to no other site. */
.sec-head::after{content:"";display:flex;align-items:center;margin:1.15rem auto 0;
inline-size:min(320px,60%);block-size:14px;
background:
linear-gradient(var(--softline),var(--softline)) left center/calc(50% - 16px) 1.5px no-repeat,
linear-gradient(var(--softline),var(--softline)) right center/calc(50% - 16px) 1.5px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234f8f3f'%3E%3Cpath d='M12 2C7 6 4 10 4 14a8 8 0 0016 0c0-4-3-8-8-12zm0 4.6c3 2.9 4.6 5.6 4.6 7.4a4.6 4.6 0 01-9.2 0c0-1.8 1.6-4.5 4.6-7.4z'/%3E%3C/svg%3E")
center/14px 14px no-repeat}
/* ββ bands are INSET LAWNS: rounded, floating on cream, never full-bleed ββββββββββββββββββββ */
.sec.band{background:var(--tint);color:var(--ink);
border-radius:32px;
margin-inline:clamp(.75rem,3vw,2.5rem);
padding-block:clamp(2.5rem,5vw,4rem);
overflow:hidden}
.sec.band .band-bg{display:none}
.sec.band .sec-head h2{color:var(--leaf)}
.sec.band p,.sec.band li,.sec.band dt,.sec.band dd,.sec.band h3{color:var(--ink)}
.sec.band a:not(.btn):not(.card a){color:var(--leaf)}
.sec.band .eyebrow{color:var(--sage)}
.sec.band .facts{background:var(--cream);border-color:var(--softline)}
.sec.band .facts div{border-color:var(--softline);background:var(--cream)}
.sec.band .facts dd{color:var(--ink)}
.sec.band table{color:var(--ink)}
.sec.band th{background:var(--leaf);color:var(--on-leaf)}
.sec.band th,.sec.band td{border-color:var(--softline)}
.sec.band .devmark{border-color:var(--softline)}
.sec.band .devmark .lbl{color:var(--sage)}
.sec.band .devmark .devname{color:var(--ink)}
.sec.band .plans-dp,.sec.band .plans-y{color:var(--leaf)}
.sec.band .plans-k,.sec.band .plans-dp i,.sec.band .plans-y i,.sec.band .plans-note{color:var(--sage)}
.sec.band .amn svg{stroke:var(--leaf)}
.sec.band .checks li::before{border-color:var(--leaf)}
.sec.band .locpts li::before,.sec.band .upd li::before{background:var(--meadow)}
.sec.band .rank-pin::before{background:var(--leaf);box-shadow:0 0 0 4px var(--tint)}
.sec.band .rank-pin b{color:var(--ink)}
.sec.band .rank figcaption{color:var(--sage)}
.sec.band .rank figcaption i{color:var(--leaf)}
.sec.band .rank-track{background:var(--softline)}
.sec.band ::selection{background:rgba(47,107,51,.2);color:var(--ink)}
.sec.band .btn{color:var(--on-leaf)}
/* ββ hero keeps its photograph; the form floats over it as a conservatory card ββββββββββββββ */
.hero{min-height:clamp(28rem,72vh,44rem)}
/* Hyde Park photographs a garden, which means bright sky behind the headline more often than
not. The scrim is authored with FIXED stops rather than tuned per image β so the h1 reads the
same on every one of the 29 pages instead of depending on what the photographer pointed at. */
.hero::after{background:linear-gradient(180deg,rgba(27,36,25,.62) 0,rgba(27,36,25,.42) 26%,
rgba(27,36,25,.5) 48%,rgba(27,36,25,.78) 76%,rgba(27,36,25,.94) 100%)}
.hero-chips li{border-radius:999px;border-color:rgba(255,255,255,.42)}
/* β OPAQUE, and the glass idea is abandoned on purpose.
The design called for a frosted card. It was built at 88% cream over blur β and the contrast
gate failed it, correctly: a gate cannot composite alpha, so it resolves a translucent surface
to the nearest opaque ancestor, which here is a dark photograph. Worse, on a real page the
TRUE contrast would depend on what the photographer shot behind each label, so the same card
would pass on one project and fail on the next at random. A card whose legibility is decided
by a photograph is not a design decision, it is a coin toss. Solid cream, deep shadow: it
still floats, and it floats identically on all 29 pages. */
.formcard{background:var(--cream);
border:0;border-radius:28px;box-shadow:0 28px 64px -24px rgba(27,36,25,.55);color:var(--ink)}
.formcard-title{color:var(--ink)}
.field input,.field select,.field textarea{border-radius:14px;border:1px solid var(--softline);
background:#fff}
.lbl{color:var(--sage)}
/* ββ buttons are pills, and every one uses a paired token βββββββββββββββββββββββββββββββββββ */
.btn,.btn-stone,.btn-ghost,.btn-wa{border-radius:999px;min-block-size:48px;font-weight:500;
transition:background .25s ease,color .25s ease,transform .25s ease}
.btn,.btn-stone,.hero .btn-stone{background:var(--leaf);color:var(--on-leaf);border:0}
.btn:hover,.btn-stone:hover,.hero .btn-stone:hover{background:#265829;color:var(--on-leaf)}
.btn-ghost{background:transparent;color:var(--leaf);border:1.5px solid var(--leaf)}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.75)}
.btn-ghost:hover{background:var(--leaf);color:var(--on-leaf);border-color:var(--leaf)}
/* ββ the facts panel is a specimen card: compartments, not rows βββββββββββββββββββββββββββββ */
.facts{background:var(--tint);border:0;border-radius:20px;padding:1rem}
.facts > div{background:var(--cream);border:0;border-radius:12px;padding:.65rem .9rem;
margin-block-end:.5rem}
.facts > div:last-child{margin-block-end:0}
.facts dt{color:var(--sage);font-size:.8125rem}
.facts dd{font-weight:500;color:var(--ink)}
/* ββ the unit matrix is a garden bed: rounded container, leaf header, zebra on light rows βββ */
.tbl-wrap{background:var(--tint);border:0;border-radius:24px;padding:.75rem;overflow:hidden}
table{border-collapse:separate;border-spacing:0;background:#fff;border-radius:16px;
overflow:hidden;inline-size:100%}
thead th{background:var(--leaf);color:var(--on-leaf);font-weight:500;text-align:start;
padding:.8rem 1rem;border:0}
tbody td{border:0;border-block-end:1px solid var(--softline);padding:.7rem 1rem}
tbody tr:last-child td{border-block-end:0}
/* β nth-child alternates WHITE and CREAM inside the table only. Band surfaces are never
derived from DOM order anywhere in this fleet β that is what repainted 55 elements white. */
tbody tr:nth-child(even){background:var(--cream)}
tbody tr:hover{background:var(--tint)}
/* ββ payment figures: ONE stone per plan, holding both figures ββββββββββββββββββββββββββββ
β Not one stone per figure. `.plans-k` is a caption, not a card β treating it as one split
every plan into four floating pieces. The base's three-column grid (figure Β· rule Β· figure)
is correct and is kept; the stone is the
around it. */
.plans{display:grid;gap:1.1rem;background:transparent;padding:0;position:relative}
.plans::before{content:none}
.plans li{background:#fff;border:0;border-radius:28px;padding:1.5rem 1.75rem;
box-shadow:0 12px 30px -16px rgba(27,36,25,.28)}
.plans li::before{background:var(--softline)}
.plans-dp,.plans-y{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.35rem);font-weight:700;color:var(--leaf)}
.plans-dp i,.plans-y i{color:var(--sage);font-weight:400}
.plans-k{font-size:.8125rem;color:var(--sage)}
.plans-note{color:var(--sage);text-align:center}
/* ββ amenities are a seed tray of chips βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.amn{display:flex;flex-wrap:wrap;gap:.6rem;columns:auto;padding:0;list-style:none}
.amn li{display:flex;align-items:center;gap:.5rem;border:0;border-radius:999px;
background:var(--tint);padding:.55rem 1.1rem;min-block-size:44px;
transition:background .25s ease}
.amn li:hover{background:#e2ead5}
.amn li svg{inline-size:16px;stroke:var(--leaf);flex:none}
/* ββ FAQ are unfolding cards, no hairlines anywhere on this site ββββββββββββββββββββββββββββ */
.faq details{background:#fff;border:0;border-radius:18px;margin-block-end:.75rem;
transition:box-shadow .3s ease;overflow:hidden}
.faq details[open]{box-shadow:0 16px 36px -18px rgba(27,36,25,.3)}
.faq summary{list-style:none;padding:1rem 1.25rem;font-weight:500;min-block-size:48px;
display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";inline-size:12px;block-size:12px;flex:none;
border-inline-end:2px solid var(--leaf);border-block-end:2px solid var(--leaf);
transform:rotate(45deg);transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{padding-inline:1.25rem}
/* ββ cards are potted plants: rounded, inset image, lifting on hover ββββββββββββββββββββββββ */
.card,.split-card,.phase-box{background:#fff;border:0;border-radius:24px;
box-shadow:var(--shadow);overflow:hidden}
.card{transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card img{border-radius:18px;margin:.5rem .5rem 0;inline-size:calc(100% - 1rem)}
.card-noimg{border-radius:18px;margin:.5rem .5rem 0;inline-size:calc(100% - 1rem);
background:var(--tint);color:var(--sage)}
.badge-n{background:var(--tint);color:var(--leaf);border-radius:999px;border:0;
font-weight:500;font-size:.75rem;padding:.2rem .8rem}
.split-card img{border-radius:20px;margin:.5rem}
/* ββ related projects as a row of seed packets that scroll ββββββββββββββββββββββββββββββββββ */
#related .grid{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
padding-block-end:.5rem}
#related .card{scroll-snap-align:start;flex:0 0 230px}
/* ββ sources are a gardener's notes: quiet, unbureaucratic ββββββββββββββββββββββββββββββββββ */
.sec-sources{border-block-start:1px solid var(--softline)}
.srclist{font-size:.8125rem;color:var(--sage)}
/* ββ the sheet rises like a potting-shed door βββββββββββββββββββββββββββββββββββββββββββββββ */
.modal-panel{border-radius:28px 28px 0 0;background:var(--cream);border:0;
box-shadow:0 -20px 50px -20px rgba(27,36,25,.4)}
.sticky{background:var(--cream);border-block-start:1px solid var(--softline)}
/* ββ motion is organic: lifts and sways, nothing mechanical βββββββββββββββββββββββββββββββββ */
@media (prefers-reduced-motion:no-preference){
.sec-head::after{animation:hp-sway 6s ease-in-out infinite alternate}
}
@keyframes hp-sway{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
@media (prefers-reduced-motion:reduce){
.sec-head::after{animation:none}
.card:hover{transform:none;box-shadow:var(--shadow-lift)}
*{transition-duration:.01ms !important}
}
/* β the base's dark band wash, painted over a light lawn β see DESIGN-SYSTEMS.md */
.sec.band::after{content:none}
.sec.band .band-bg{display:none}
/* ββ the pressed specimen: a journal presses things INTO its beds βββββββββββββββββββββββββββ
The photograph is inlaid in a tint bed with a hairline edge, under the centred head and its
leaf rule, like a plate in a herbarium. No text crosses it. */
.sec{display:flex;flex-direction:column}
.sec > .band-bg{order:-1;position:static;inset:auto;display:block;
inline-size:100%;block-size:auto;aspect-ratio:16/9;object-fit:cover;opacity:1;
border:10px solid var(--tint);outline:1px solid var(--softline);border-radius:22px;
margin-block-end:1.25rem}
.sec.band > .band-bg{display:block;border-color:var(--cream)}
@media (max-width:640px){.sec > .band-bg{aspect-ratio:4/3}}
/* ββ related projects: an empty herbarium sheet when there is no photograph βββββββββββββββ */
#related .grid,.grid.g3,.grid.g4{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
overflow:visible;scroll-snap-type:none}
@media (max-width:900px){#related .grid,.grid.g3,.grid.g4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){#related .grid,.grid.g3,.grid.g4{grid-template-columns:1fr}}
#related .card{flex:1 1 auto}
.card{display:flex;flex-direction:column;block-size:100%;overflow:clip;
background:#fff;border:1px solid var(--softline);border-radius:18px}
.card > img{inline-size:100%;margin:0;aspect-ratio:16/10;object-fit:cover;border-radius:0;
border-block-end:1px solid var(--softline)}
.card-noimg{aspect-ratio:16/10;margin:0;inline-size:100%;border-radius:0;
border-block-end:1px solid var(--softline);
background:repeating-linear-gradient(-45deg,var(--tint) 0 12px,#e7eee0 12px 24px);
display:flex;align-items:center;justify-content:center;color:var(--sage)}
.card h3,.card p{overflow-wrap:anywhere}
.card > a:last-child{margin-block-start:auto;min-block-size:44px;display:inline-flex;
align-items:center}
/* the plate shares the text's measure, so its mount is visible on both edges */
.sec > .band-bg{inline-size:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
/* ββ header credit lockup + honest empty hero βββββββββββββββββββββββββββββββββββββββββββ */
/* the lockup is a link, so it must still clear the 44px tap target */
.logo{display:flex;align-items:center;gap:.7rem;min-block-size:44px}
.logo-mark{block-size:26px;inline-size:auto;display:block}
.logo-txt small{display:block;font-size:.68rem;color:#cddcc4;white-space:nowrap}
.hero-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:var(--moss)}
.hero-noimg span{font-size:.8125rem;color:#cddcc4}
/* Chips, not a comma list β see the note in sd-aeo/site.css; the 44px floor is the reason. */
.sec-dev .dev-more{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-block-start:1.25rem}
.sec-dev .dev-more > span{font-size:.9375rem;color:var(--sage);margin-inline-end:.25rem}
.dev-chip{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:.9rem;
font-size:.9375rem;color:var(--ink);background:#fff;border:1px solid var(--rule);
border-radius:999px;text-decoration:none;transition:border-color .15s,color .15s}
.dev-chip:hover{border-color:var(--leaf);color:var(--leaf)}
/* The developer block is a CREDIT, not a second headline table. It inherits `.facts`, whose dd is
clamped up to 1.8rem for the hero fact grid β at four columns that scale wrapped "Ω
Ω 37 Ω
ΩΩΩΩ Ψ¬.Ω
"
mid-phrase and made the credit shout louder than the project's own figures. Scoped down here
rather than touching `.facts`, which is correct where it is used. */
.dev-facts{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.dev-facts div{padding:1rem 1.15rem}
.dev-facts dt{font-size:.75rem}
.dev-facts dd{font-size:1.0625rem;font-weight:600;letter-spacing:0;line-height:1.45}
/* ββ 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}
/* 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}