/* ============================================================================
   sodicdevelopmentsegypt.com — «صالة العرض»

   THESIS: this is a direct-sales floor for SODIC homes, not a reference desk. Every
   development leads with its own photograph, its starting price and a way to call,
   and the whole portfolio is walkable in a few screens. It refuses the two failures
   on the table: the current 54,000px scroll that shows one project per screen, and
   the editorial ledger that would have made a marketing site read like an archive.
   OWN-WORLD: deep ink stage for the opening and the closing bands, a bright selling
   floor for everything in between, photography at full colour and full width inside
   its own frame, Alexandria in heavy weights as the commercial voice, Noto Sans
   Arabic for running text, and one action colour that only ever means "act".
   STORY: the visitor sees a home they want in the first screen, filters to their
   area and unit type, scans the portfolio as photographs with prices, opens one,
   and calls.
   FIRST VIEWPORT: full-bleed project photography under a real gradient scrim, the
   title, the price line, two actions, and the region/type chooser as a white desk
   beside them.
   FORM: sales showroom, pinned by the brief over the dealt editorial direction,
   seed key sodic2026.
   FINISH: unreviewed and undocumented is unfinished; this build ends with the finish
   review, the verdict, and DESIGN.md.
   ========================================================================== */

@font-face{font-family:"Alexandria";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/alex-400-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/alex-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/noto-400-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/noto-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --stage:#0E1216;--stage-2:#161C22;--floor:#FFFFFF;--floor-2:#F6F4F0;--floor-3:#ECE8E2;
  --ink:#12171C;--ink-2:#4B545D;--ink-3:#6D767F;--on-stage:#FFFFFF;--on-stage-2:#C3CCD4;
  --rule:#E3DFD8;--rule-2:#C8C2B8;--rule-stage:rgba(255,255,255,.16);
  --act:#00789e;--act-2:#005E7C;--act-wash:#E6F2F7;
  --wa:#0b6f39;--danger:#9E2A1E;
  --display:"Alexandria","Noto Sans Arabic",system-ui,sans-serif;
  --font:"Noto Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --max:1240px;--reading:66ch;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;
  --s7:2.75rem;--s8:3.75rem;--s9:5rem;
  --lift:0 1px 2px rgba(18,23,28,.06),0 10px 28px -14px rgba(18,23,28,.28);
  --lift-2:0 2px 4px rgba(18,23,28,.08),0 18px 40px -18px rgba(18,23,28,.34);
  --ease:cubic-bezier(.22,1,.36,1);
  --slate:#0E1216;--cyan:#00789e;--cyan-action:#00789e;--deep:#12171C;
  --surface:#FFFFFF;--soft:#F6F4F0;--line:#E3DFD8;--white:#FFFFFF;
  --muted:#4B545D;--light-line:rgba(255,255,255,.16);
}

html{scroll-padding-top:6.5rem}
body{background:var(--floor);color:var(--ink);font-family:var(--font);font-size:1.0625rem;
  line-height:1.85;caret-color:var(--act);-webkit-font-smoothing:antialiased}
::selection{background:var(--act);color:#fff}
*{scrollbar-color:var(--rule-2) var(--floor-2)}
::-webkit-scrollbar-track{background:var(--floor-2)}
::-webkit-scrollbar-thumb{background:var(--rule-2);border:2px solid var(--floor-2)}
:focus-visible{outline:2px solid var(--act);outline-offset:3px}
a{text-underline-offset:.22em;text-decoration-thickness:1px}
p{max-inline-size:var(--reading)}
.tabnum,[lang="en"],table,dd,.chapter-price,.thesis-price{font-variant-numeric:tabular-nums lining-nums}

h1,h2,h3{font-family:var(--display);line-height:1.22;letter-spacing:-.01em;text-wrap:balance}
h1{font-weight:800;font-size:clamp(2.35rem,5vw,4rem);margin-block-end:var(--s3)}
h2{font-weight:700;font-size:clamp(1.7rem,3vw,2.5rem);margin-block-end:var(--s3)}
h3{font-weight:700;font-size:clamp(1.15rem,1.7vw,1.5rem)}
[lang="en"]{font-family:var(--font)}
[lang="en"] h1,[lang="en"] h2,[lang="en"] h3{font-family:var(--display)}

/* ---- header --------------------------------------------------------------- */
.hdr{background:var(--stage);color:var(--on-stage);border-block-end:1px solid var(--rule-stage)}
.hdr-in{min-block-size:66px}
.nav a{color:#D5DDE4;font-size:.9rem;font-weight:600}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;border-color:var(--act)}
.header-cta{background:var(--act);color:#fff;border-radius:3px;font-weight:700}
.header-cta:hover{background:var(--act-2)}

/* ---- opening stage -------------------------------------------------------
   The photograph is the product, so it keeps its colour and its full frame; the
   flat 74% wash that used to bury it is replaced by a scrim that only darkens
   where the type actually sits.                                               */
.first-viewport{min-block-size:0}
.home-intro{background:var(--stage);color:var(--on-stage)}
.home-intro-bg{filter:none;object-position:center 42%}
.home-intro::after{background:linear-gradient(to top,rgba(9,12,15,.94) 0%,rgba(9,12,15,.78) 42%,rgba(9,12,15,.34) 100%)}
.home-intro-grid{min-block-size:0;padding-block:clamp(2.5rem,5vw,4.25rem);
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
  gap:clamp(1.75rem,4vw,4rem);align-items:center}
.home-thesis{position:relative;padding-inline:clamp(1rem,2vw,1.75rem);padding-block:var(--s5)}
.home-thesis::before{content:"";position:absolute;inset:-1.25rem -1.5rem;z-index:-1;
  background:radial-gradient(120% 100% at 100% 50%,rgba(9,12,15,.72) 0%,rgba(9,12,15,.46) 55%,rgba(9,12,15,0) 100%)}
[dir="ltr"] .home-thesis::before{background:radial-gradient(120% 100% at 0% 50%,rgba(9,12,15,.72) 0%,rgba(9,12,15,.46) 55%,rgba(9,12,15,0) 100%)}
.home-thesis h1{color:#fff;margin-block:var(--s3) var(--s2)}
.en-line{font-size:.9375rem;color:#DCE3E9;letter-spacing:.01em;margin-block:0}
.home-thesis .lead{color:#DDE4EA;font-size:1.125rem;margin-block:var(--s3) 0}
.thesis-price{display:inline-block;font-weight:800;font-size:1.0625rem;color:#fff;
  background:rgba(255,255,255,.10);border:1px solid var(--rule-stage);border-radius:3px;
  padding:.55rem .9rem;margin-block:var(--s4) 0;max-inline-size:none}
.hero-actions{margin-block-start:var(--s5);gap:var(--s4);display:flex;flex-wrap:wrap;align-items:center}
.hero-actions .btn{padding:.9rem 1.6rem;font-size:1.0625rem}
.text-action{color:#fff;border-block-end:1px solid rgba(255,255,255,.5);padding-block:.35rem}
.text-action:hover{border-color:#fff}

/* ---- the chooser desk ----------------------------------------------------- */
.portfolio-navigator{background:var(--floor);color:var(--ink);border:0;border-radius:4px;
  padding:var(--s5);box-shadow:var(--lift-2);border-inline-start:0}
.portfolio-navigator h2{font-size:1.3rem;color:var(--ink);margin-block-end:var(--s4)}
.navigator-axis{border-block-start:1px solid var(--rule);padding-block:var(--s4)}
.navigator-axis:first-of-type{border-block-start:0;padding-block-start:0}
.navigator-axis>span{color:var(--ink-3);font-size:.75rem;font-weight:700;letter-spacing:.06em;
  margin-block-end:var(--s2)}
.navigator-controls{gap:var(--s2);background:transparent;grid-template-columns:repeat(2,minmax(0,1fr))}
.navigator-controls button{min-block-size:46px;background:var(--floor-2);color:var(--ink-2);
  border:1px solid var(--rule);border-radius:3px;font-size:.9375rem;font-weight:600;
  transition:background-color .14s var(--ease),color .14s var(--ease),border-color .14s var(--ease)}
.navigator-controls button:hover{background:var(--floor-3);color:var(--ink)}
.navigator-controls button[aria-pressed="true"]{background:var(--act);border-color:var(--act);
  color:#fff;font-weight:700}
.navigator-go{inline-size:100%;background:var(--ink);color:#fff;border-radius:3px;font-weight:700;
  margin-block-start:var(--s4)}
.navigator-go:hover{background:var(--act-2)}
.navigator-summary{color:var(--ink-3);font-size:.875rem;margin-block-start:var(--s3)}

/* ---- proof line ----------------------------------------------------------- */
.proof-line{background:var(--floor-2);border-block:1px solid var(--rule)}
.proof-line-grid strong{font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.1rem}
.proof-line-grid span{color:var(--ink-2)}
.proof-line-grid a{color:var(--act-2);font-weight:800}

/* ---- sections ------------------------------------------------------------- */
.sec.chapter{background:var(--floor);color:var(--ink);padding-block:var(--s8)}
.sec.chapter.band{background:var(--stage);color:var(--on-stage)}
.sec.chapter.band h2,.sec.chapter.band h3{color:#fff}
.sec.chapter.band p,.sec.chapter.band li{color:#CDD5DC}
/* the lead form is a white plate wherever it lands, so the band must not reach into it */
.sec.chapter.band .formcard p,.sec.chapter.band .formcard li,
.sec.chapter.band .formcard label{color:var(--ink-2)}
.formcard{background:var(--floor);color:var(--ink)}
.formcard-title,.sec.chapter.band .formcard .formcard-title{color:var(--ink)}
.formcard .note,.sec.chapter.band .formcard .note{color:var(--ink-2)}
.sec.chapter.band .answer{color:#E8EDF1}
.band-bg{opacity:.22;filter:grayscale(.2)}
.sec-head{margin-block-end:var(--s5)}
.sec-head h2{margin-block:0 var(--s3)}
.sec-sub{font-family:var(--font);font-weight:700;font-size:1.0625rem;color:var(--ink-2);
  margin-block:0 var(--s2)}
.sec .answer{font-size:1.1875rem;line-height:1.8;color:var(--ink);max-inline-size:var(--reading);
  margin-block:0}
.sec p{color:var(--ink-2)}

/* ---- the portfolio floor -------------------------------------------------
   62 developments as photograph-led cards, three across, instead of 62 full
   screens. The picture still sells; the scroll stops costing an hour.          */
.portfolio-story{background:var(--floor-2);color:var(--ink);padding-block:var(--s8)}
.portfolio-story-head{margin-block-end:var(--s6)}
.portfolio-story-head h2{color:var(--ink)}
.portfolio-story-head p{color:var(--ink-2);max-inline-size:var(--reading)}
.portfolio-chapters{inline-size:min(calc(100% - 3rem),var(--max));margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:clamp(1rem,2vw,1.75rem);align-items:stretch}
.project-chapter{min-block-size:0;display:flex;flex-direction:column;border:0;border-radius:4px;
  background:var(--floor);box-shadow:var(--lift);overflow:hidden;
  transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.project-chapter:hover{box-shadow:var(--lift-2);transform:translateY(-3px)}
.project-visual{position:relative;inset:auto;inline-size:100%;aspect-ratio:16/11;overflow:hidden}
.project-visual::after{display:none}
.project-visual img{inline-size:100%;block-size:100%;object-fit:cover;filter:none;
  transition:transform .5s var(--ease)}
.project-chapter:hover .project-visual img{transform:scale(1.035)}
.project-noimg{background:var(--floor-3);color:var(--ink-2);display:grid;place-items:center;
  inline-size:100%;block-size:100%}
.project-chapter:nth-child(even) .project-noimg{background:var(--floor-3)}
.project-noimg span{font-family:var(--display);font-size:.875rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;white-space:normal;text-align:center;
  padding:0 var(--s4);line-height:1.4}
/* the incumbent sheet lays this out as four side-by-side columns for the old band;
   the card needs one column, so the columns are re-declared, not just the rows */
.project-chapter-copy{inline-size:100%;margin-inline:0;position:static;flex:1;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;
  gap:var(--s1);padding:var(--s4) var(--s4) var(--s4)}
.project-chapter-copy>*{grid-column:1}
.chapter-region{color:var(--act-2);font-size:.8125rem;font-weight:700;letter-spacing:.02em}
.project-chapter h3{font-size:1.2rem;margin-block:0;line-height:1.3}
.project-chapter h3 a{text-decoration:none;color:var(--ink)}
.project-chapter h3 a:hover{color:var(--act-2)}
.project-chapter .en-line{font-size:.8125rem;color:var(--ink-3);margin-block:2px 0}
.project-chapter-copy>div>p{color:var(--ink-2);font-size:.9375rem;line-height:1.65;
  margin-block:var(--s2) 0;max-inline-size:none;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.chapter-price{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--ink);
  margin-block:0;padding-block-start:var(--s3);border-block-start:1px solid var(--rule);max-inline-size:none}
.chapter-link{justify-self:start;color:#fff;background:var(--act);border-radius:3px;
  padding:.55rem 1rem;font-size:.9375rem;font-weight:700;min-block-size:44px;margin-block-start:var(--s3);
  border-block-end:0;transition:background-color .14s var(--ease)}
.chapter-link:hover{background:var(--act-2)}
.navigator-empty{padding-block:var(--s7);color:var(--ink-2);text-align:center}


/* ---- area and unit-type pages ---------------------------------------------
   The hub pages carry their own component family, so the same card is built for
   them rather than leaving those routes in the world this one replaced.        */
.portfolio-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:clamp(1rem,2vw,1.75rem);align-items:stretch}
.portfolio-entry,.portfolio-entry:nth-child(even){display:flex;flex-direction:column;
  grid-template-columns:none;gap:0;padding-block:0;border-block-end:0;border-radius:4px;
  background:var(--floor);box-shadow:var(--lift);overflow:hidden;
  transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.portfolio-entry:hover{box-shadow:var(--lift-2);transform:translateY(-3px)}
.portfolio-entry.is-lowest{outline:2px solid var(--act);outline-offset:-2px}
.portfolio-entry-media,.portfolio-entry:nth-child(even) .portfolio-entry-media{order:0;
  inline-size:100%;overflow:hidden}
.portfolio-entry-media img,.portfolio-entry-noimg{inline-size:100%;aspect-ratio:16/11;
  object-fit:cover;transition:transform .5s var(--ease)}
.portfolio-entry:hover .portfolio-entry-media img{transform:scale(1.035)}
.portfolio-entry-noimg{background:var(--floor-3);color:var(--ink-2);display:grid;place-items:center}
.portfolio-entry-noimg span{font-family:var(--display);font-size:.875rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;white-space:normal;text-align:center;
  padding:0 var(--s4);line-height:1.4}
.portfolio-entry-copy{display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr auto auto;gap:var(--s1);padding:var(--s4);flex:1;align-content:start}
.portfolio-entry-copy>*{grid-column:1}
.portfolio-entry-copy h3{font-size:1.2rem;margin-block:0;line-height:1.3}
.portfolio-entry-copy h3 a{color:var(--ink);text-decoration:none}
.portfolio-entry-copy h3 a:hover{color:var(--act-2)}
.portfolio-entry-copy .en-line{font-size:.8125rem;color:var(--ink-3)}
.portfolio-entry-copy>div>p{color:var(--ink-2);font-size:.9375rem;line-height:1.65;
  max-inline-size:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-block:var(--s2) 0}
.portfolio-entry-price{font-family:var(--display);font-weight:800;font-size:1.15rem;
  color:var(--ink);max-inline-size:none;margin-block:0;padding-block-start:var(--s3);
  border-block-start:1px solid var(--rule)}
/* the incumbent sheet paints this link ink-on-ink once it sits on the action colour */
.chapter-link,.portfolio-entry .chapter-link,.project-chapter .chapter-link{color:#fff}
.portfolio-entry .chapter-link{justify-self:start;background:var(--act);border-radius:3px;
  padding:.55rem 1rem;font-size:.9375rem;font-weight:700;border-block-end:0;
  margin-block-start:var(--s3);transition:background-color .14s var(--ease)}
.portfolio-entry .chapter-link:hover{background:var(--act-2);color:#fff}
@media (max-width:560px){
  .portfolio-index{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .portfolio-entry,.portfolio-entry:nth-child(even){flex-direction:row;align-items:stretch}
  .portfolio-entry-media{inline-size:38%;flex:0 0 38%}
  .portfolio-entry-media img,.portfolio-entry-noimg{aspect-ratio:auto;block-size:100%;
    min-block-size:120px}
  .portfolio-entry-copy{padding:var(--s3) var(--s4)}
  .portfolio-entry-copy h3{font-size:1.0625rem}
  .portfolio-entry-copy .en-line{display:none}
  .portfolio-entry .chapter-link{background:transparent;color:var(--act-2);padding:.35rem 0;
    min-block-size:0;border-block-end:1px solid currentColor;margin-block-start:var(--s1)}
  .portfolio-entry .chapter-link:hover{background:transparent;color:var(--ink)}
}

/* ---- data plates ---------------------------------------------------------- */
.facts,dl.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  margin-block:var(--s5) 0}
.facts>div{background:var(--floor);padding:var(--s4)}
.band .facts>div{background:var(--stage-2)}
.facts dt{color:var(--ink-3);font-size:.75rem;font-weight:700;letter-spacing:.06em;margin-block-end:2px}
.band .facts dt{color:#96A2AC}
.facts dd{margin:0;color:var(--ink);font-weight:800;font-size:1.0625rem;font-family:var(--display)}
.band .facts dd{color:#fff}

/* ---- tables --------------------------------------------------------------- */
.tbl-wrap{border:1px solid var(--rule);border-radius:4px;background:var(--floor);overflow-x:auto}
table{inline-size:100%;border-collapse:collapse;font-size:.9375rem}
thead th{background:var(--floor-2);color:var(--ink);font-weight:700;text-align:start;
  padding:var(--s3) var(--s4);border-block-end:1px solid var(--rule-2);white-space:nowrap}
tbody td{padding:var(--s3) var(--s4);border-block-start:1px solid var(--rule);
  color:var(--ink-2);background:var(--floor)}
tbody tr:hover{background:var(--act-wash)}
tbody td:first-child a{color:var(--ink);font-weight:700;text-decoration:none}
tbody td:first-child a:hover{color:var(--act-2);text-decoration:underline}
tbody td.tabnum{color:var(--ink);font-weight:800;white-space:nowrap;font-family:var(--display)}

/* ---- project page opening ------------------------------------------------- */
.project-intro,.hub-intro,.sales-intro{background:var(--stage);color:var(--on-stage)}
.project-intro::after,.hub-intro::after,.sales-intro::after{
  background:linear-gradient(to top,rgba(9,12,15,.93) 0%,rgba(9,12,15,.76) 45%,rgba(9,12,15,.36) 100%)}
.project-intro-bg,.hub-intro-bg,.sales-intro-bg{filter:none;object-position:center 45%}
.project-intro-in,.hub-intro-in,.sales-intro-in{min-block-size:0;
  padding-block:clamp(2.5rem,5vw,4.25rem);align-items:center}
.project-intro h1,.hub-intro h1,.sales-intro h1{color:#fff}
.project-intro .lead,.sales-intro .lead,.hub-intro .lead{color:#DDE4EA;font-size:1.125rem}
.project-intro-price{display:inline-block;font-family:var(--display);font-weight:800;
  font-size:1.3rem;color:#fff;background:rgba(255,255,255,.10);
  border:1px solid var(--rule-stage);border-radius:3px;padding:.6rem 1rem;margin-block:var(--s4)}
.project-intro-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;max-inline-size:32rem;
  background:var(--rule-stage);border:1px solid var(--rule-stage);border-radius:4px;
  overflow:hidden;margin-block-start:var(--s4)}
.project-intro-facts>div{background:rgba(255,255,255,.07);padding:var(--s3) var(--s4);
  display:flex;flex-direction:column;gap:2px;min-block-size:76px;justify-content:center}
.project-intro-facts dt{color:#9FAAB4;font-size:.72rem;font-weight:700;letter-spacing:.06em}
.project-intro-facts dd{margin:0;color:#fff;font-weight:700;font-family:var(--display);
  font-size:.875rem;line-height:1.4}

/* ---- chapter rail --------------------------------------------------------- */
.chapter-nav,.chapters,.route-chapters{background:var(--floor);border-block-end:1px solid var(--rule);
  position:sticky;inset-block-start:66px;z-index:60;box-shadow:0 1px 2px rgba(18,23,28,.05)}
.chapter-nav a,.chapters a,.route-chapters a{color:var(--ink-2);font-size:.875rem;font-weight:600;
  padding-block:var(--s3);border-block-end:2px solid transparent;text-decoration:none}
.chapter-nav a:hover,.chapters a:hover{color:var(--ink)}
.chapter-nav a[aria-current],.chapters a[aria-current],.chapter-nav a.is-active{color:var(--act-2);
  border-block-end-color:var(--act)}

/* ---- aside card ----------------------------------------------------------- */
.split-card,.split-data{background:var(--floor);border:0;border-radius:4px;padding:var(--s5);
  box-shadow:var(--lift)}
.split-title{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--ink)}
.split-price{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--ink);
  border-block-end:1px solid var(--rule);padding-block-end:var(--s3);margin-block-end:var(--s3)}
.split-list>div{display:flex;justify-content:space-between;gap:var(--s4);padding-block:var(--s2);
  border-block-start:1px solid var(--rule)}
.split-list dt{color:var(--ink-3);font-size:.875rem}
.split-list dd{margin:0;color:var(--ink);font-weight:700;font-size:.9375rem}
.split-tel a{color:var(--act-2);font-weight:800}

/* ---- figures and galleries ------------------------------------------------ */
figure,.figure{margin:0;background:var(--floor);border-radius:4px;overflow:hidden;
  box-shadow:var(--lift)}
figure img,.figure img,.mp-img{inline-size:100%;block-size:auto;display:block}
figcaption,.map-note{color:var(--ink-3);font-size:.875rem;padding:var(--s3) var(--s4)}
.gallery,.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s3)}
.gallery a,.gal a{border-radius:4px;overflow:hidden;display:block;box-shadow:var(--lift)}
.gallery img,.gal img{inline-size:100%;block-size:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .5s var(--ease)}
.gallery a:hover img,.gal a:hover img{transform:scale(1.04)}

/* ---- FAQ ------------------------------------------------------------------ */
details.qa,.faq details{background:var(--floor);border:1px solid var(--rule);border-radius:4px;
  margin-block-end:var(--s3);padding:0}
details.qa summary,.faq summary{padding:var(--s4);font-family:var(--display);font-weight:700;
  font-size:1.0625rem;color:var(--ink);cursor:pointer}
details.qa[open] summary,.faq details[open] summary{color:var(--act-2);
  border-block-end:1px solid var(--rule)}
.qa-a,.faq details>div,.faq details>p{padding:var(--s4);color:var(--ink-2)}

/* ---- buttons and forms ---------------------------------------------------- */
.btn{background:var(--act);border:1px solid var(--act);color:#fff;border-radius:3px;
  padding:.85rem 1.4rem;font-weight:700;
  transition:background-color .14s var(--ease),border-color .14s var(--ease),transform .14s var(--ease)}
.btn:hover{background:var(--act-2);border-color:var(--act-2);transform:translateY(-1px)}
.btn-stone{background:var(--ink);border-color:var(--ink)}
.btn-stone:hover{background:var(--act-2);border-color:var(--act-2)}
.btn-ghost{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.42)}
.btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff}
.btn-wa{background:var(--wa);border-color:var(--wa)}
input,textarea,select{background:var(--floor);border:1px solid var(--rule-2);color:var(--ink);
  border-radius:3px;padding:.75rem .9rem}
input:focus,textarea:focus,select:focus{border-color:var(--act);outline:2px solid var(--act-wash);
  outline-offset:0}
label{color:var(--ink-2);font-size:.9375rem;font-weight:600}
::placeholder{color:var(--ink-3);opacity:1}

/* ---- sticky call bar ------------------------------------------------------ */
.callbar,.mobile-cta,.sticky-cta{background:var(--floor);border-block-start:1px solid var(--rule-2);
  box-shadow:0 -2px 14px rgba(18,23,28,.12)}

/* ---- footer --------------------------------------------------------------- */
.ftr,footer{background:var(--stage);color:#DDE4EA}
.ftr a,footer a{color:#fff}
.ftr small,footer small{color:#8F9AA4}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:1080px){
  .home-intro-grid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .portfolio-navigator{border-inline-start:0;padding-block-start:var(--s5)}
}
@media (max-width:820px){
  .home-intro-grid,.project-intro-in{padding-block:var(--s7) var(--s6)}
  .home-intro::after{background:linear-gradient(to top,rgba(9,12,15,.95) 0%,rgba(9,12,15,.82) 55%,rgba(9,12,15,.5) 100%)}
  h1{font-size:clamp(1.9rem,7.5vw,2.6rem)}
  h2{font-size:clamp(1.45rem,5.6vw,1.95rem)}
  .home-thesis .lead,.sec .answer{font-size:1.0625rem}
  .sec.chapter{padding-block:var(--s7)}
  .portfolio-chapters{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s4)}
  .project-chapter-copy{grid-template-columns:minmax(0,1fr)}
  .project-chapter-copy>*{grid-column:1}
  .hero-actions .btn{inline-size:100%;justify-content:center}
}
@media (max-width:560px){
  .navigator-controls{grid-template-columns:minmax(0,1fr)}
  .facts,.project-intro-facts{grid-template-columns:minmax(0,1fr)}
  /* 61 developments cannot each own a phone screen: the card folds into a row that
     still leads with its photograph but costs a sixth of the scroll */
  .portfolio-chapters{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .project-chapter{flex-direction:row;align-items:stretch}
  .project-visual{inline-size:38%;flex:0 0 38%;aspect-ratio:auto;min-block-size:132px}
  .project-chapter-copy{padding:var(--s3) var(--s4);gap:var(--s1);
    grid-template-rows:auto auto 1fr auto}
  .project-chapter h3{font-size:1.0625rem}
  .project-chapter .en-line{display:none}
  .project-chapter-copy>div>p{-webkit-line-clamp:2;font-size:.875rem;line-height:1.55}
  .chapter-price{font-size:1rem;padding-block-start:var(--s2)}
  .chapter-link{background:transparent;color:var(--act-2);padding:.35rem 0;font-size:.875rem;
    min-block-size:0;margin-block-start:var(--s1);border-block-end:1px solid currentColor}
  .chapter-link:hover{background:transparent;color:var(--ink)}
  .project-visual{min-block-size:120px}
}

/* Contact modal — the plate that carries the ask, so it gets the strongest lift on the site
   and the action colour as its top rule. The close control is a glyph, not a filled block:
   the only filled thing in this panel should be the button that submits. */
.modal{padding:var(--s4)}
.modal-backdrop{background:rgba(9,13,17,.74);backdrop-filter:saturate(.9) blur(2px)}
.modal-panel{border-radius:4px;border-block-start:3px solid var(--act);
  box-shadow:0 24px 70px -24px rgba(9,13,17,.66),0 2px 6px rgba(9,13,17,.2)}
.modal-panel .formcard{border-block-start:0;box-shadow:none}
.modal-x{inline-size:40px;block-size:40px;padding:11px;border-radius:3px;
  background:transparent;color:var(--ink-3);
  transition:color .16s ease,background-color .16s ease}
.modal-x:hover{background:var(--floor-3);color:var(--ink)}
.modal-x:focus-visible{outline:2px solid var(--act);outline-offset:2px}