@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700;800&display=swap');

:root{
  --slate:#111827;--cyan:#0089b4;--cyan-action:#00789e;--deep:#1e3d50;
  --ink:#111827;--muted:#52606d;--surface:#ffffff;--soft:#eef3f5;
  --line:#cbd5dc;--light-line:rgba(255,255,255,.24);--white:#ffffff;
  --wa:#0b6f39;--danger:#b42318;--max:1240px;--reading:72ch;
  --ease:cubic-bezier(.22,1,.36,1);--font:"Noto Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:8.5rem}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.75;overflow-x:hidden;overflow-x:clip;caret-color:var(--cyan);text-rendering:optimizeLegibility}
[dir="rtl"]{letter-spacing:0}
[lang="en"],.tabnum{font-variant-numeric:tabular-nums}
[lang="en"]{font-family:"Montserrat",system-ui,sans-serif;letter-spacing:-.015em}
::selection{background:var(--cyan);color:var(--white)}
*{scrollbar-color:var(--cyan) var(--soft);scrollbar-width:thin}
::-webkit-scrollbar{inline-size:10px;block-size:10px}
::-webkit-scrollbar-track{background:var(--soft)}
::-webkit-scrollbar-thumb{background:var(--cyan);border:2px solid var(--soft)}
img{display:block;max-inline-size:100%;block-size:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button,input,textarea,select{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer}
p{max-inline-size:var(--reading)}
h1,h2,h3,p{margin-block-start:0}
h1,h2,h3{line-height:1.08;text-wrap:balance;overflow-wrap:anywhere}
[lang="en"] h1,[lang="en"] h2,[lang="en"] h3{hyphens:auto}
h1{font-size:clamp(3.1rem,8.4vw,6rem);letter-spacing:-.035em;margin-block-end:1.35rem}
h2{font-size:clamp(2rem,4.4vw,4.35rem);letter-spacing:-.03em;margin-block-end:1.25rem}
h3{font-size:clamp(1.3rem,2.1vw,2rem);letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
[hidden]{display:none!important}
.wrap{inline-size:min(calc(100% - 3rem),var(--max));margin-inline:auto}
.sr{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;inset-block-start:.75rem;inset-inline-start:.75rem;z-index:999;background:var(--white);color:var(--slate);padding:.65rem 1rem;transform:translateY(-180%);transition:transform .2s var(--ease)}
.skip:focus{transform:translateY(0)}

/* Header */
.hdr{position:sticky;inset-block-start:0;z-index:80;background:var(--slate);color:var(--white);border-block-end:1px solid var(--light-line)}
.hdr-in{min-block-size:74px;display:flex;align-items:center;gap:1.25rem}
.logo{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;min-block-size:44px;flex:0 0 auto}
.logo-mark{inline-size:112px;block-size:auto}
.logo-txt small,.logo>small{display:block;color:#d5eef5;font-size:.72rem;font-weight:600;white-space:nowrap}
.nav{display:flex;align-items:center;justify-content:center;gap:clamp(.65rem,1.4vw,1.4rem);margin-inline:auto}
.nav a{min-block-size:44px;display:grid;place-items:center;text-decoration:none;color:#e7f0f3;font-size:.88rem;font-weight:600;border-block-end:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--white);border-color:var(--cyan)}
.header-cta{min-block-size:44px;display:grid;place-items:center;padding-inline:1rem;background:var(--cyan-action);color:var(--white);font-weight:700;text-decoration:none}
.burger{display:none;inline-size:44px;block-size:44px;border:0;background:transparent;color:var(--white);padding:10px}
.burger svg,.modal-x svg{inline-size:100%;block-size:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* Actions */
.btn,.text-action,.navigator-go,.chapter-link{min-block-size:44px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;text-decoration:none}
.btn{border:1px solid var(--cyan-action);background:var(--cyan-action);color:var(--white);padding:.75rem 1.15rem;border-radius:2px;transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--deep);border-color:var(--deep);transform:translateY(-2px)}
.btn-stone{background:var(--deep);border-color:var(--deep)}
.btn-wa{background:var(--wa);border-color:var(--wa)}
.btn-ghost{background:transparent;color:var(--deep)}
.text-action{padding-inline:.25rem;color:inherit;border-block-end:1px solid currentColor}
.hero-actions{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-block-start:2rem}

/* First viewports */
.first-viewport{position:relative;min-block-size:calc(100svh - 74px);overflow:hidden}
.home-intro{background:var(--slate);color:var(--white)}
.home-intro-bg{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;filter:saturate(.84) contrast(1.05)}
.home-intro::after{content:"";position:absolute;inset:0;background:rgba(17,24,39,.74)}
.home-intro-grid{position:relative;z-index:1;min-block-size:calc(100svh - 74px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:clamp(3rem,7vw,8rem);align-items:center;padding-block:clamp(4rem,8vw,7rem)}
.home-thesis{max-inline-size:720px}
.home-thesis .lead{font-size:clamp(1.05rem,1.8vw,1.35rem);color:#dce9ed}
.thesis-price{margin-block:2rem 0;color:#b9dfe9;font-weight:600}
.devmark{display:inline-flex;align-items:center;gap:.7rem;margin-block-end:2.4rem;font-size:.72rem;text-transform:uppercase;color:#b8d5de}
.devmark .rule{inline-size:2.25rem;block-size:1px;background:currentColor}
.devmark img{max-inline-size:104px;max-block-size:24px;object-fit:contain}
.first-viewport .devmark img{filter:brightness(0) invert(1)}
.portfolio-navigator{border-inline-start:1px solid var(--light-line);padding-inline-start:clamp(1.5rem,4vw,3.75rem)}
.portfolio-navigator h2{font-size:clamp(1.75rem,3vw,3rem)}
.navigator-axis{padding-block:1.15rem;border-block-start:1px solid var(--light-line)}
.navigator-axis>span{display:block;margin-block-end:.65rem;color:#a9ccd6;font-size:.76rem;font-weight:700}
.navigator-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--light-line)}
.navigator-controls button{min-block-size:50px;border:0;background:var(--slate);color:#e4eef1;padding:.65rem .8rem;text-align:start}
.navigator-controls button:hover{background:var(--deep)}
.navigator-controls button[aria-pressed="true"]{background:var(--cyan-action);color:var(--white);font-weight:700}
.navigator-go{inline-size:100%;margin-block-start:1.1rem;background:var(--white);color:var(--slate);padding:.75rem 1rem}
.navigator-summary{margin-block:.85rem 0;color:#bbdce5;font-size:.86rem}
.navigator-summary.is-updated{animation:navigator-pulse .42s var(--ease)}

@keyframes navigator-pulse{0%{opacity:.45;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}

.proof-line{background:var(--deep);color:var(--white);border-block:1px solid var(--light-line)}
.proof-line-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.proof-line p{margin:0;padding:1.35rem clamp(1rem,2.4vw,2rem);border-inline-end:1px solid var(--light-line)}
.proof-line p:last-child{border:0}
.proof-line strong,.proof-line span{display:block}
.proof-line strong{color:#b9e5f0;font-size:.83rem;margin-block-end:.25rem}
.proof-line span{font-size:.92rem}
.proof-line .tabnum a{min-block-size:44px;display:inline-flex;align-items:center}

/* Shared editorial sections */
.sec{position:relative;padding-block:clamp(4.75rem,9vw,8.5rem);background:var(--surface)}
.sec.band{background:var(--deep);color:var(--white)}
.sec-head{margin-block-end:clamp(2.5rem,5vw,4.5rem);max-inline-size:940px}
.sec-head .answer{font-size:clamp(1.05rem,1.65vw,1.3rem);line-height:1.8;color:var(--muted);margin:0}
.band .sec-head .answer{color:#d5e6eb}
/* Page-specific sub-heading under the fixed spine H2 (owner spine 2026-08-30). The line a
   writer used to put in the H2 now sits here, one level down, keeping its keyword phrasing. */
.sec-head .sec-sub{font-size:clamp(1.15rem,2vw,1.7rem);line-height:1.3;letter-spacing:-.01em;font-weight:600;color:var(--ink);margin:0 0 1.1rem;max-inline-size:36ch}
.band .sec-head .sec-sub{color:#fff}
@media (max-width:640px){.sec-head .sec-sub{font-size:1.15rem;max-inline-size:none}}
.sec>.wrap>p,.sec>.wrap>.prose-columns{max-inline-size:var(--reading)}
.sec>.wrap>p{color:var(--muted)}
.band>.wrap>p{color:#d8e7ea}
.prose-columns{columns:2 28ch;column-gap:clamp(2rem,5vw,5rem)}
.prose-columns p{break-inside:avoid;margin-block-end:1.5rem}
.band-bg{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:.12}
.band>.wrap{position:relative}
.home-about{background:var(--soft)}
.developer-story .devmark{color:#b9dfe9}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(1.5rem,3vw,3rem)}
.grid>.card{padding-block:1.35rem;border-block-start:1px solid currentColor}
.card-img{inline-size:100%;aspect-ratio:3/2;object-fit:cover;margin-block-end:1.25rem}
.card-noimg{min-block-size:180px;display:grid;place-items:center;background:var(--soft);color:var(--muted);margin-block-end:1.25rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));margin:clamp(2rem,5vw,4rem) 0 0;padding:0;border-block-start:1px solid var(--line)}
.facts div{padding:1.1rem 0;border-block-end:1px solid var(--line)}
.facts dt{color:var(--muted);font-size:.78rem;font-weight:700}
.facts dd{margin:0;font-weight:700}
.sec-cta{margin-block-start:2rem}

/* Portfolio story */
.portfolio-story{background:var(--slate);color:var(--white);padding-block-start:clamp(5rem,9vw,8rem)}
.portfolio-story-head{padding-block-end:clamp(3rem,6vw,6rem)}
.portfolio-story-head p{color:#cfdee3;font-size:1.1rem}
.project-chapter{min-block-size:clamp(560px,72vh,820px);position:relative;display:grid;align-items:end;border-block-start:1px solid var(--light-line);overflow:hidden}
.project-visual{position:absolute;inset:0}
.project-visual img{inline-size:100%;block-size:100%;object-fit:cover;filter:saturate(.82) contrast(1.05)}
.project-visual::after{content:"";position:absolute;inset:0;background:rgba(17,24,39,.62)}
.project-noimg{inline-size:100%;block-size:100%;display:grid;place-items:center;background:var(--deep);color:rgba(255,255,255,.11);overflow:hidden}
.project-chapter:nth-child(even) .project-noimg{background:var(--cyan)}
.project-noimg span{font-family:"Montserrat",system-ui,sans-serif;font-size:clamp(4rem,14vw,12rem);font-weight:700;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap}
.project-chapter-copy{position:relative;z-index:1;display:grid;grid-template-columns:minmax(110px,.35fr) minmax(0,1.45fr) minmax(180px,.55fr) auto;gap:clamp(1.25rem,4vw,4rem);align-items:end;padding-block:clamp(3rem,7vw,6rem)}
.chapter-region{align-self:start;color:#bbe6f0;font-weight:700}
.project-chapter h3{font-size:clamp(2.4rem,6.4vw,5.8rem);margin-block-end:.75rem}
.project-chapter h3 a{text-decoration:none}
.project-chapter-copy>div>p{color:#dbe7ea}
.chapter-price{font-size:clamp(1rem,1.8vw,1.35rem);font-weight:700;color:#d7f5fb}
.chapter-link{min-inline-size:44px;padding:.65rem 0;border-block-end:1px solid currentColor;color:var(--white)}
.navigator-empty{padding-block:2rem;color:var(--white)}

/* Region directory and comparison */
.region-links{display:grid;grid-template-columns:repeat(2,1fr);border-block-start:1px solid var(--light-line)}
.region-links a{display:block;padding:1.4rem 0;border-block-end:1px solid var(--light-line);text-decoration:none}
.region-links a:nth-child(odd){padding-inline-end:2rem;border-inline-end:1px solid var(--light-line)}
.region-links a:nth-child(even){padding-inline-start:2rem}
.region-links strong,.region-links span{display:block}
.region-links strong{font-size:1.15rem;color:var(--white)}
.region-links span{color:#c8dce2;font-size:.9rem}
.property-type-directory{background:var(--surface)}
.property-type-directory .region-links{border-color:var(--line)}
.property-type-directory .region-links a{border-color:var(--line)}
.property-type-directory .region-links strong{color:var(--slate)}
.property-type-directory .region-links span{color:var(--muted)}
.tbl-wrap{inline-size:100%;overflow:visible}
table{inline-size:100%;border-collapse:collapse;font-size:.96rem}
th,td{text-align:start;padding:1rem .8rem;border-block-end:1px solid var(--line);vertical-align:top}
th{background:var(--slate);color:var(--white);font-size:.8rem;letter-spacing:.01em}
td:first-child{font-weight:700}
td:first-child a{min-block-size:44px;display:flex;align-items:center}
.comparison-section tbody tr:hover{background:var(--soft)}

/* Project */
.project-intro{background:var(--slate);color:var(--white);display:grid;align-items:end}
.project-intro-bg{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;filter:saturate(.8)}
.project-intro::after{content:"";position:absolute;inset:0;background:rgba(17,24,39,.66)}
.project-intro-noimg{position:absolute;inset:0;display:grid;place-items:center;background:var(--deep);color:rgba(255,255,255,.12);overflow:hidden}
.project-intro-noimg span{font-family:"Montserrat",system-ui,sans-serif;font-size:clamp(5rem,17vw,15rem);font-weight:700;letter-spacing:-.04em;white-space:nowrap;text-transform:uppercase}
.project-intro-noimg small{position:absolute;inset-block-end:2rem;inset-inline-end:2rem;color:#d7eaf0;font-size:.8rem}
.project-intro-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:clamp(3rem,7vw,8rem);align-items:end;padding-block:clamp(5rem,10vw,8rem)}
.project-intro-copy .lead{font-size:clamp(1.05rem,1.8vw,1.4rem);color:#dce9ed}
.project-intro-price{font-size:clamp(1.25rem,2vw,1.7rem);font-weight:700;color:#c5f0fa;margin-block:1.5rem 0}
.project-intro-facts{margin:0;border-block-start:1px solid var(--light-line)}
.project-intro-facts div{display:flex;justify-content:space-between;gap:1.5rem;padding-block:.85rem;border-block-end:1px solid var(--light-line)}
.project-intro-facts dt{color:#b8d7df}
.project-intro-facts dd{margin:0;text-align:end;font-weight:700}
.chapter-nav{position:sticky;inset-block-start:74px;z-index:60;background:var(--white);border-block-end:1px solid var(--line)}
.chapter-nav-in{display:flex;gap:1.5rem;overflow-x:auto;scrollbar-width:none}
.chapter-nav-in::-webkit-scrollbar{display:none}
.chapter-nav a{position:relative;flex:0 0 auto;min-inline-size:44px;min-block-size:54px;display:grid;place-items:center;text-decoration:none;color:var(--muted);font-size:.86rem;font-weight:700}
.chapter-nav a::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:3px;background:var(--cyan);transform:scaleX(0);transition:transform .3s var(--ease);transform-origin:center}
.chapter-nav a.is-active{color:var(--slate)}
.chapter-nav a.is-active::after{transform:scaleX(1)}
.split{padding-block:clamp(4rem,8vw,7rem);background:var(--soft)}
.split-in{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.split-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.split-shot{position:relative;display:block;background:var(--deep);overflow:hidden}
.split-shot.is-lead{grid-column:1/-1}
.split-shot img{inline-size:100%;aspect-ratio:4/3;object-fit:cover}
.split-shot.is-lead img{aspect-ratio:16/9}
.split-shot span{position:absolute;inset-block-end:0;inset-inline:0;padding:.7rem;background:var(--slate);color:var(--white)}
.split-data{position:sticky;inset-block-start:9.25rem}
.split-card{border-block-start:4px solid var(--cyan);padding-block-start:1.25rem}
.split-title{font-weight:700;color:var(--muted)}
.split-price{font-size:1.45rem;font-weight:800;color:var(--deep)}
.split-list{margin:0}
.split-list div{display:flex;justify-content:space-between;gap:1.5rem;padding-block:.65rem;border-block-end:1px solid var(--line)}
.split-list dt{color:var(--muted)}
.split-list dd{margin:0;text-align:end;font-weight:700}
.split-tel{font-weight:800;font-size:1.1rem}
.split-tel a{min-block-size:44px;display:inline-flex;align-items:center}
.orientation-chapter{background:var(--soft)}
.masterplan-noimg{min-block-size:240px;display:grid;place-items:center;padding:2rem;background:var(--deep);color:var(--white);text-align:center}
.mp{margin:0 0 2rem;background:var(--slate)}
.mp img{inline-size:100%;aspect-ratio:16/10;object-fit:contain;background:var(--soft)}
.mp figcaption{padding:.8rem 1rem;color:var(--white);font-size:.85rem}
.amn{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));border-block-start:1px solid var(--line)}
.amn li{display:flex;align-items:center;gap:.75rem;min-block-size:64px;border-block-end:1px solid var(--line)}
.amn svg{inline-size:24px;block-size:24px;fill:none;stroke:var(--cyan);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.plans{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-block-start:1px solid var(--line)}
.plans li{display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem;padding:1.4rem 0;border-block-end:1px solid var(--line)}
.plans-dp,.plans-y{font-size:1.6rem;font-weight:800;color:var(--deep)}
.plans i{font-style:normal;font-size:.85rem}
.plans-k{font-size:.78rem;color:var(--muted)}
.plans-note{color:var(--muted);font-size:.88rem}
.locpts,.dist{list-style:none;padding:0;margin:2rem 0;border-block-start:1px solid var(--line)}
.locpts li,.dist li{padding-block:1rem;border-block-end:1px solid var(--line)}
.dist li{display:flex;justify-content:space-between;gap:1rem}
.dist-km{font-size:1.3rem;font-weight:800;color:var(--deep)}
.dist-km i{font-size:.75rem;font-style:normal;margin-inline-start:.3rem}
.relation-list{border-block-start:1px solid currentColor}
.relation-entry{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) minmax(160px,.3fr);gap:clamp(1rem,3vw,3rem);align-items:center;padding-block:1.3rem;border-block-end:1px solid currentColor}
.relation-entry img{inline-size:100%;aspect-ratio:3/2;object-fit:cover}
.relation-entry h3{margin-block-end:.5rem}
.relation-entry p{margin-block-end:0}
.relation-price{font-weight:800;text-align:end}
.dev-more{display:flex;gap:.7rem 1rem;flex-wrap:wrap;align-items:center;margin-block-start:2rem}
.dev-more span{font-weight:700}
.dev-chip{min-inline-size:44px;min-block-size:44px;display:inline-flex;align-items:center;text-underline-offset:.3em}
.rank{margin:2rem 0}
.rank-track{position:relative;block-size:6px;background:var(--line);margin-block:4rem 2rem}
.rank-fill{position:absolute;inset-block:0;inset-inline-start:0;background:var(--cyan)}
.rank-pin{position:absolute;inset-block-start:-2.5rem;transform:translateX(-50%)}
[dir="rtl"] .rank-pin{transform:translateX(50%)}
.rank figcaption{display:flex;justify-content:space-between;gap:1rem;color:var(--muted)}

/* Hubs */
.hub-intro{display:grid;align-items:end;background:var(--deep);color:var(--white)}
.hub-intro-bg{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;filter:saturate(.86) contrast(1.04)}
.hub-intro::after{content:"";position:absolute;inset:0;background:rgba(17,24,39,.68)}
.hub-intro-noimg{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.1);overflow:hidden}
.hub-intro-noimg span{font-family:"Montserrat",system-ui,sans-serif;font-size:clamp(4rem,13vw,12rem);font-weight:700;white-space:nowrap}
.hub-intro-in{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr .7fr;gap:4rem;align-items:end;padding-block:clamp(5rem,10vw,8rem)}
.hub-intro-in .lead{font-size:clamp(1.05rem,1.8vw,1.35rem);color:#dce9ed}
.hub-intro-decision{border-block-start:1px solid var(--light-line);padding-block-start:1.25rem}
.hub-intro-decision p span,.hub-intro-decision p strong{display:block}
.hub-intro-decision p strong{font-size:1.4rem}
.hub-intro-decision .text-action{margin-inline-start:1rem}
.portfolio-index{border-block-start:1px solid var(--line)}
.portfolio-entry{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);padding-block:clamp(2rem,5vw,4.5rem);border-block-end:1px solid var(--line)}
.portfolio-entry:nth-child(even){grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr)}
.portfolio-entry:nth-child(even) .portfolio-entry-media{order:2}
.portfolio-entry-media img,.portfolio-entry-noimg{inline-size:100%;aspect-ratio:16/10;object-fit:cover}
.portfolio-entry-noimg{display:grid;place-items:center;background:var(--deep);color:rgba(255,255,255,.15);overflow:hidden}
.portfolio-entry-noimg span{font-size:clamp(2rem,6vw,5rem);font-weight:700;white-space:nowrap}
.portfolio-entry-copy{display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-content:center}
.portfolio-entry-copy>div{grid-column:1/-1}
.portfolio-entry-price{font-weight:800;color:var(--deep)}
.portfolio-entry .chapter-link{color:var(--deep)}

/* Sales and thank-you */
.sales-intro{display:grid;align-items:end;background:var(--slate);color:var(--white)}
.sales-intro-bg{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;filter:saturate(.84) contrast(1.05)}
.sales-intro::after{content:"";position:absolute;inset:0;background:rgba(17,24,39,.7)}
.sales-intro-noimg{position:absolute;inset:0;display:grid;place-items:center;background:var(--deep);color:rgba(255,255,255,.1);font-size:clamp(7rem,25vw,22rem);font-weight:800}
.sales-intro-in{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:4rem;align-items:end;padding-block:clamp(5rem,10vw,8rem)}

/* The source photographs are unusually wide. Explicit crops keep the subject in frame on both
   page and hub heroes rather than letting a generic centre crop choose by accident. */
.hero-key-june .project-intro-bg,.hero-key-june .hub-intro-bg{object-position:50% 52%}
.hero-key-sodic-east-camellia .project-intro-bg,.hero-key-sodic-east-camellia .hub-intro-bg{object-position:48% 52%}
.hero-key-sky-condos .project-intro-bg,.hero-key-sky-condos .hub-intro-bg{object-position:52% 48%}
.hero-key-sky-condos-phase-3 .project-intro-bg,.hero-key-sky-condos-phase-3 .hub-intro-bg{object-position:54% 48%}
.sales-intro .lead{color:#dce9ed;font-size:clamp(1.05rem,1.8vw,1.35rem)}
.sales-direct{border-block-start:1px solid var(--light-line);padding-block-start:1.25rem}
.sales-call{display:block;text-decoration:none;margin-block-end:1rem}
.sales-call span,.sales-call strong{display:block}
.sales-call span{color:#b9dfe9}
.sales-call strong{font-size:clamp(1.5rem,3vw,2.5rem)}
.sales-whatsapp{min-block-size:44px;display:inline-flex;align-items:center;color:#bff0d2;font-weight:700;margin-inline-end:1.25rem}
.sales-journey{padding-block:clamp(4.5rem,8vw,7.5rem);background:var(--soft)}
.sales-journey-grid{display:grid;grid-template-columns:1fr minmax(320px,.8fr);gap:clamp(3rem,8vw,8rem);align-items:start}
.sales-journey-copy h2{font-size:clamp(2.2rem,4vw,4rem)}
.contact-lines{border-block-start:1px solid var(--line);margin-block-start:2rem}
.contact-lines p{display:grid;grid-template-columns:minmax(110px,.4fr) 1fr;gap:.4rem 1rem;padding-block:1rem;border-block-end:1px solid var(--line);margin:0}
.contact-lines p>span{color:var(--muted);font-weight:700}
.contact-lines p>a,.contact-lines p>strong{min-block-size:44px;display:flex;align-items:center;font-size:1.15rem;font-weight:800}
.contact-lines small{grid-column:2;color:var(--muted)}
.decision-steps{list-style:decimal;padding-inline-start:1.5rem;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 4rem}
.decision-steps li{padding:1.5rem 0;border-block-start:1px solid var(--light-line)}
.decision-steps li::marker{color:#9edbea;font-weight:800}
.thanks-intro{display:grid;place-items:center;background:var(--slate);color:var(--white)}
.thanks-layout{display:grid;grid-template-columns:180px minmax(0,760px);gap:clamp(2rem,6vw,6rem);align-items:center;padding-block:6rem}
.thanks-mark{inline-size:150px;block-size:150px;display:grid;place-items:center;border:1px solid var(--cyan);color:var(--cyan)}
.thanks-mark svg{inline-size:70%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.thanks-intro .lead{color:#dbe8ec}
.thanks-next{display:flex;gap:1rem 1.4rem;flex-wrap:wrap;align-items:center;margin-block-start:2rem}

/* Forms */
.formcard{background:var(--white);color:var(--slate);border-block-start:4px solid var(--cyan);padding:clamp(1.4rem,3vw,2.25rem)}
.formcard-title{font-size:1.35rem;font-weight:800;margin-block-end:.35rem}
.formcard .note{color:var(--muted);font-size:.88rem}
.lead-form{display:grid;gap:1rem}
.field label{display:block;font-weight:700;font-size:.86rem;margin-block-end:.35rem}
.field input{inline-size:100%;min-block-size:50px;border:1px solid #9baab3;background:var(--white);color:var(--slate);padding:.65rem .75rem;border-radius:0}
.field input:focus{border-color:var(--cyan);outline:3px solid rgba(0,137,180,.2)}
.field input[aria-invalid="true"]{border-color:var(--danger)}
.err{display:block;min-block-size:1.2em;color:var(--danger);font-size:.78rem}
.errsum{border:1px solid var(--danger);padding:.75rem;color:var(--danger);margin-block:1rem}
.errsum-title{font-weight:800;margin-block-end:.25rem}
.errsum ul{margin:0;padding-inline-start:1.2rem}
.hp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0,0,0,0)}
.lead-form .btn{inline-size:100%}
.lead-form .btn:disabled{opacity:.55;cursor:not-allowed}

/* FAQ */
.faq{border-block-start:1px solid var(--line)}
.faq details{border-block-end:1px solid var(--line)}
.faq summary{min-block-size:60px;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Montserrat",system-ui,sans-serif;font-size:1.4rem;color:var(--cyan)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-block-end:1.25rem;color:var(--muted)}

/* Footer, sticky actions and modal */
.sticky{display:none}
.ftr{background:#0a1019;color:#dbe7ea;padding-block:clamp(4rem,7vw,6rem)}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:clamp(2rem,6vw,6rem)}
.ftr h3{color:var(--white);font-size:1.05rem}
.ftr ul{list-style:none;padding:0;margin:0;columns:2;column-gap:2rem}
.ftr li{break-inside:avoid;margin-block-end:.35rem}
.ftr a{color:inherit}
.ftr li a{min-inline-size:44px;min-block-size:44px;display:inline-flex;align-items:center}
.ftr .btn{color:var(--white)}
.footer-phone{font-size:1.2rem;font-weight:700;color:var(--white)}
.footer-phone a{min-block-size:44px;display:inline-flex;align-items:center}
.ftr-dev{margin-block:3rem 1rem;border-block-start:1px solid var(--light-line);padding-block-start:2rem}
.disclaimer{color:#9fb1b8;font-size:.82rem}
.modal{position:fixed;inset:0;display:none;place-items:center;z-index:200;padding:1rem}
.modal.open{display:grid}
.modal-backdrop{position:absolute;inset:0;background:rgba(10,16,25,.82)}
.modal-panel{position:relative;z-index:1;inline-size:min(100%,520px);max-block-size:calc(100svh - 2rem);overflow:auto;background:var(--white)}
.modal-x{position:absolute;inset-block-start:.75rem;inset-inline-end:.75rem;z-index:2;inline-size:44px;block-size:44px;border:0;background:var(--slate);color:var(--white);padding:11px}

@media (max-width:980px){
  .hdr-in>.header-cta{display:none}
  .burger{display:block;margin-inline-start:auto}
  .nav{position:fixed;inset-block-start:74px;inset-inline:0;display:grid;justify-items:stretch;gap:0;margin:0;padding:1rem 1.5rem 2rem;background:var(--slate);border-block-end:1px solid var(--light-line);transform:translateY(-120%);opacity:0;visibility:hidden;transition:transform .28s var(--ease),opacity .2s var(--ease),visibility .2s}
  .nav.open{transform:translateY(0);opacity:1;visibility:visible}
  .nav a{justify-content:start;border-block-end:1px solid var(--light-line)}
  .home-intro-grid,.project-intro-in,.hub-intro-in,.sales-intro-in{grid-template-columns:minmax(0,1fr)}
  .home-intro-grid{gap:3.5rem}
  .portfolio-navigator{border-inline-start:0;border-block-start:1px solid var(--light-line);padding-inline-start:0;padding-block-start:2rem}
  .proof-line-grid{grid-template-columns:1fr}
  .proof-line p{border-inline-end:0;border-block-end:1px solid var(--light-line)}
  .project-chapter-copy{grid-template-columns:1fr 1fr}
  .chapter-region{grid-column:1/-1}
  .project-chapter-copy>div{grid-column:1/-1}
  .split-in{grid-template-columns:1fr}
  .split-data{position:static;order:-1}
  .portfolio-entry,.portfolio-entry:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .portfolio-entry:nth-child(even) .portfolio-entry-media{order:0}
  .sales-journey-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
}

@media (max-width:700px){
  .wrap{inline-size:min(calc(100% - 2rem),var(--max))}
  h1{font-size:clamp(2.75rem,15vw,4.8rem)}
  h2{font-size:clamp(2rem,10vw,3.2rem)}
  .first-viewport{min-block-size:auto}
  .home-intro-bg{object-position:58% center}
  .hero-key-june .project-intro-bg,.hero-key-june .hub-intro-bg{object-position:50% center}
  .hero-key-sodic-east-camellia .project-intro-bg,.hero-key-sodic-east-camellia .hub-intro-bg{object-position:48% center}
  .hero-key-sky-condos .project-intro-bg,.hero-key-sky-condos .hub-intro-bg{object-position:52% center}
  .hero-key-sky-condos-phase-3 .project-intro-bg,.hero-key-sky-condos-phase-3 .hub-intro-bg{object-position:54% center}
  .home-intro-grid,.project-intro-in,.hub-intro-in,.sales-intro-in{min-block-size:calc(100svh - 74px);padding-block:3.5rem}
  .navigator-controls{grid-template-columns:1fr}
  .prose-columns{columns:1}
  .project-chapter{min-block-size:560px}
  .project-chapter-copy{grid-template-columns:1fr;padding-block:3rem}
  .chapter-price,.relation-price{text-align:start}
  .project-intro-facts{display:grid;grid-template-columns:1fr 1fr}
  .project-intro-facts div{display:block}
  .project-intro-facts dd{text-align:start}
  .chapter-nav{inset-block-start:74px}
  .chapter-nav-in{gap:1.1rem}
  .split-media{grid-template-columns:1fr}
  .split-shot.is-lead{grid-column:auto}
  .relation-entry{grid-template-columns:1fr}
  .region-links{grid-template-columns:1fr}
  .region-links a:nth-child(odd),.region-links a:nth-child(even){padding-inline:0;border-inline-end:0}
  .portfolio-entry-copy{grid-template-columns:1fr}
  .portfolio-entry-copy>div{grid-column:auto}
  .decision-steps{grid-template-columns:1fr}
  .thanks-layout{grid-template-columns:1fr}
  .thanks-mark{inline-size:100px;block-size:100px}
  .footer-grid,.footer-grid>div:first-child{grid-template-columns:1fr;grid-column:auto}
  .sticky{position:fixed;z-index:75;inset-inline:0;inset-block-end:0;display:grid;grid-template-columns:repeat(3,1fr);background:var(--slate);border-block-start:1px solid var(--light-line);padding:max(.45rem,env(safe-area-inset-bottom)) .45rem .45rem}
  .sticky .btn{min-inline-size:0;padding:.55rem .35rem;font-size:.76rem;border-color:transparent}
  .ftr{padding-block-end:7rem}
}

@media (max-width:640px){
  .tbl-wrap table,.tbl-wrap thead,.tbl-wrap tbody,.tbl-wrap tr,.tbl-wrap td{display:block;inline-size:100%}
  .tbl-wrap thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tbl-wrap tr{padding-block:.6rem;border-block-end:1px solid var(--line)}
  .tbl-wrap td{display:grid;grid-template-columns:minmax(105px,.44fr) 1fr;gap:1rem;padding:.55rem 0;border:0}
  .tbl-wrap td::before{content:attr(data-label);color:var(--muted);font-size:.75rem;font-weight:700}
  .facts{grid-template-columns:1fr 1fr}
}

@media (max-width:420px){
  .logo-mark{inline-size:94px}
  .logo-txt small{font-size:.64rem}
  .project-intro-facts,.facts{grid-template-columns:1fr}
  .contact-lines p{grid-template-columns:1fr}
  .contact-lines small{grid-column:1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}