/* Astana Real Estate — editorial theme for project pages (matches the homepage).
   The project pages keep their own inline <style> (the old teal Montserrat/Playfair
   template). This file is linked AFTER that block and overrides the shared template
   classes: palette, fonts, header, hero, stats, cards, tables, callouts, form, footer.
   Page-specific layout rules (aspect ratios of .plans, .g169, .wide …) are left alone.
   Add to a page:  <link rel="stylesheet" href="/assets/theme.css">  just before <body>.
   Fonts it expects: Cormorant Garamond + Manrope (both cover Cyrillic). */

:root{
  --paper:#f6f2ea; --sand:#ece5d8; --card:#fffdf9;
  --ink:#11191e; --soft:#5e6870; --soft-d:#a8b0b4;
  --teal:#9a7442; --teal-deep:#7d5c30;          /* old accent names → brass */
  --brass:#9a7442; --brass-l:#c8a36a; --cream:#efe3cc;
  --line:rgba(17,25,30,.14); --line-d:rgba(246,242,234,.18);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1240px;
}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-variant-numeric:lining-nums}
a{color:var(--teal-deep)}
.wrap{max-width:var(--maxw);padding-left:clamp(16px,4vw,48px);padding-right:clamp(16px,4vw,48px)}
.display,h1.display,h2.display{font-family:var(--serif);font-weight:500;letter-spacing:-.005em;line-height:1.08}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.28em;color:var(--brass)}
.eyebrow::before{content:"";flex:none;width:34px;height:1px;background:currentColor;opacity:.7}
.lede{color:var(--soft)}
:focus-visible{outline-color:var(--brass-l)}

/* header — solid ivory bar, serif wordmark, underline language switch, square button */
header{background:rgba(246,242,234,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav{height:68px}
.brand-mark{filter:brightness(0) saturate(100%)}
.brand b{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:.06em;color:var(--ink)}
.brand span{font-family:var(--sans);font-weight:600;letter-spacing:.3em;color:var(--soft)}
.lang{border:0;border-radius:0;background:none;gap:2px}
.lang button,.lang a{font-family:var(--sans);color:var(--ink);background:none;padding:6px 7px;opacity:.55}
.lang button.on,.lang a.on{background:none;color:var(--ink);opacity:1;box-shadow:inset 0 -1px 0 currentColor}

/* buttons — square, uppercase */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:0;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.16em;padding:18px 30px;transition:background .25s,color .25s,border-color .25s}
.btn:hover{opacity:1;transform:none}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--brass)}
.btn-ghost{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-nav{padding:12px 18px;font-size:11px}

/* hero — the template's text block + photo become one full-bleed photo hero */
.hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100svh - 68px);background:var(--ink);color:var(--paper);overflow:hidden}
.hero .hero-photo{position:absolute;inset:0}
.hero .hero-photo img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(10,15,19,.62) 0%,rgba(10,15,19,.2) 55%,rgba(10,15,19,0) 80%),linear-gradient(180deg,rgba(10,15,19,.45) 0%,rgba(10,15,19,.1) 28%,rgba(10,15,19,.35) 55%,rgba(10,15,19,.92) 100%)}
.hero .hero-in{position:relative;z-index:2;width:100%;text-align:left;padding-top:110px;padding-bottom:clamp(36px,6vw,64px);display:flex;flex-direction:column}
.hero .eyebrow{color:#e6c995}
.hero h1{color:var(--paper);font-size:clamp(46px,7.4vw,104px);margin:22px 0 10px;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero .sub{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(24px,3vw,40px);color:var(--cream)}
.hero .status{display:inline-block;align-self:flex-start;margin:18px 0 0;padding:7px 14px;border:1px solid rgba(230,201,149,.6);border-radius:0;background:rgba(10,15,19,.35);color:#e6c995;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.hero .lede{color:rgba(246,242,234,.86);margin:22px 0 0;max-width:60ch;font-size:clamp(15px,1.4vw,17px)}
.hero .lede a{color:#e6c995;text-decoration:underline;text-underline-offset:3px}
.hero .hero-cta{justify-content:flex-start;margin-top:32px;order:5}
.hero .btn-solid{background:var(--paper);color:var(--ink)}
.hero .btn-solid:hover{background:var(--brass-l)}
.hero .btn-ghost{border-color:rgba(246,242,234,.55);color:var(--paper)}
.hero .btn-ghost:hover{background:rgba(246,242,234,.08);border-color:var(--paper)}
.hero .laurels{order:6;display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;justify-content:stretch;max-width:none;margin:clamp(40px,6vw,72px) 0 0;border-top:1px solid var(--line-d)}
.hero .laurels span{padding:16px 20px 0 0;font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--soft-d)}
.hero .laurels span+span{padding-left:20px;border-left:1px solid var(--line-d)}
.hero .laurels span+span::before{display:none}

/* stats strip — dark ink, serif numbers */
.stats{background:var(--ink);color:var(--paper);border:0;border-top:1px solid var(--line-d)}
.stat{text-align:left;border-color:var(--line-d) !important;padding:28px 18px 32px}
.stat b{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.2vw,44px);line-height:1;color:var(--paper)}
.stat b i{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;margin-left:4px;color:var(--brass-l);vertical-align:.9em}
.stat small{color:var(--soft-d);font-size:10.5px;letter-spacing:.2em}

section{padding:clamp(80px,10vw,130px) 0}
.sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,60px)}
.sec-head h2{font-size:clamp(36px,4.8vw,62px);margin:20px 0 20px;color:var(--ink)}
.res,.about{background:var(--sand)}

/* image bands and highlight cards — no boxes, editorial spacing */
.band-img{border:0;background:none}
.grid{gap:clamp(36px,4vw,56px) clamp(20px,2.4vw,32px);background:none;border:0}
.grid>div{background:none}
.card-img{background:var(--sand)}
.card-img img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.card-body{padding:20px 0 0}
.card-body h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.2vw,29px);line-height:1.15;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:10px}
.card-body p{color:var(--soft)}

/* residence rows, feature lists, KPI tiles — hairlines instead of white boxes */
.res-row,.feat,.tiles2{background:none;border:0;border-top:1px solid var(--line);gap:0}
.res-row>div,.feat>div,.tiles2>div{background:none;border-bottom:1px solid var(--line)}
.res-row .display{font-size:clamp(24px,2.2vw,29px);color:var(--ink)}
.res-row p,.feat span{color:var(--soft)}
.feat b{font-family:var(--serif);font-weight:500;font-size:22px}
.tiles2>div{text-align:left;padding:22px 18px 22px 0}
.tiles2 b{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.8vw,36px);color:var(--ink)}
.tiles2 small{color:var(--soft)}
@media(min-width:700px){
  .res-row>div+div,.feat>div+div,.tiles2>div+div{border-left:1px solid var(--line);padding-left:22px}
}

/* collections, tables, plans, callouts */
.colls{background:none;border:0;gap:clamp(20px,2.4vw,32px)}
.colls>div{background:var(--card);border:1px solid var(--line)}
.colls h3{font-family:var(--serif);font-weight:500;font-size:clamp(28px,2.6vw,36px)}
.colls .cw{color:var(--brass)}
.colls li{border-top-color:var(--line)}
.colls li b{color:var(--ink)}
.tw{border:1px solid var(--line);background:var(--card)}
.tw th{font-family:var(--sans);background:var(--sand);color:var(--soft)}
.tw th,.tw td{border-bottom-color:var(--line)}
.plans figure{border:1px solid var(--line);background:var(--card)}
.callout{background:var(--card);border-left:2px solid var(--brass);border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.callout.warn{border-left-color:#a23b2a}
.callout h3{font-family:var(--sans);color:var(--brass)}
.callout.warn h3{color:#a23b2a}
.rel-badge{border:1px solid var(--brass);color:var(--brass);border-radius:0;font-family:var(--sans)}

/* investment-case list */
.why-item{border-color:var(--line) !important}
.why-item h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.3vw,30px);letter-spacing:0;text-transform:none;color:var(--ink)}

/* gallery */
.gallery{gap:clamp(12px,1.6vw,22px)}
.gallery figure{border:0;background:var(--sand)}
.gallery img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}

/* about */
.about-points h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.2vw,28px);letter-spacing:0;text-transform:none;color:var(--ink)}
.about-points p{color:var(--soft)}

/* enquiry — dark ink band, ivory form card */
.enquiry{background:var(--ink);color:var(--paper)}
.enquiry .eyebrow{color:var(--brass-l)}
.enquiry .sec-head h2{color:var(--paper)}
.enquiry .lede{color:var(--soft-d)}
.form-card{background:var(--paper);color:var(--ink);border:0;box-shadow:none;padding:clamp(26px,3.6vw,48px)}
.field label{font-family:var(--sans);color:var(--soft)}
.field input,.field select{background:transparent;border:0;border-bottom:1px solid rgba(17,25,30,.3);border-radius:0;padding:10px 0;font-family:var(--sans);color:var(--ink)}
.field select{-webkit-appearance:none;appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2311191e' fill='none'/%3E%3C/svg%3E") no-repeat right 4px center;padding-right:24px}
.field input:focus,.field select:focus{border-color:var(--brass)}
.form-note{color:var(--soft)}
.form-note a{color:var(--teal-deep)}
.form-ok{color:var(--brass)}

/* generated "related analysis" block (inline styles live in <body>, so raise specificity) */
html body .rel-analysis{background:var(--paper);color:var(--ink);border-top:1px solid var(--line);font-family:var(--sans)}
html body .rel-analysis .ra-wrap{max-width:var(--maxw);padding:0 clamp(16px,4vw,48px)}
html body .rel-analysis .ra-eyebrow,html body .rel-analysis .ra-k{color:var(--brass)}
html body .rel-analysis h2{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:clamp(30px,3.6vw,44px)}
html body .rel-analysis .ra-lede,html body .rel-analysis .ra-note{color:var(--soft)}
html body .rel-analysis .ra-grid{background:none;border:0;border-top:1px solid var(--line);gap:0}
html body .rel-analysis .ra-grid a{background:none;border-bottom:1px solid var(--line);padding:22px 22px 26px 0}
html body .rel-analysis .ra-grid a:hover{background:none}
html body .rel-analysis .ra-grid a:hover .ra-t{color:var(--teal-deep)}
html body .rel-analysis .ra-t{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2vw,26px);color:var(--ink)}
html body .rel-analysis a,html body .rel-analysis .ra-note a{color:var(--teal-deep)}
@media(min-width:700px){html body .rel-analysis .ra-grid a+a{border-left:1px solid var(--line);padding-left:22px}}

/* footer */
footer{background:#0b1114;border-top:0}
footer .brand-sub{color:#7d878c}
.fine{color:#7d878c}
.fine a{color:var(--soft-d)}

/* floating WhatsApp */
.wa{background:#1f8f5f;box-shadow:0 10px 30px rgba(0,0,0,.25)}

@media(max-width:600px){
  .hero .laurels{grid-template-columns:1fr;grid-auto-flow:row}
  .hero .laurels span,.hero .laurels span+span{padding:12px 0;border-left:0;border-bottom:1px solid var(--line-d)}
  .hero .hero-cta .btn{width:100%}
  .stat{padding:22px 12px 24px}
}
@media(max-width:560px){
  .brand b{font-size:15px;letter-spacing:.02em}
  .nav-right{gap:6px}
  .lang button,.lang a{padding:6px 5px}
  .nav-right .btn{padding:10px 12px;font-size:10px}
}

/* ---- catalogue pages (Oman / Dubai / Abu Dhabi generators) ---- */
.hero{padding:0;gap:0}
.hero .hero-photo{border-radius:0;box-shadow:none}
/* text-only heroes (no photo, e.g. the market report): compact dark band, not a full screen */
.hero:not(:has(.hero-photo)){min-height:0}
.hero:not(:has(.hero-photo))::after{display:none}
.hero:not(:has(.hero-photo)) .hero-in{padding-top:clamp(70px,9vw,120px)}
.hero:not(:has(.hero-photo)) .eyebrow{color:var(--brass-l)}
section.district{padding-top:0}
.eyebrow.light{color:#e6c995}
.filters{background:rgba(246,242,234,.97);border-bottom:1px solid var(--line);top:68px}
.chips-row button{border:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.04em;transition:border-color .2s,background .2s}
.chips-row button:hover{border-color:var(--ink)}
.chips-row button i{color:var(--brass)}
.chips-row button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips-row button.on i{color:var(--brass-l)}
.selects select{border:0;border-bottom:1px solid rgba(17,25,30,.3);border-radius:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2311191e' fill='none'/%3E%3C/svg%3E") no-repeat right 2px center;padding:6px 22px 6px 0;font-family:var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none}
.selects .count{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.banner{color:var(--paper);background-color:var(--ink)}
.banner::before{background:linear-gradient(90deg,rgba(10,15,19,.82),rgba(10,15,19,.35) 65%,rgba(10,15,19,.15))}
.banner h2{font-size:clamp(36px,5.4vw,64px);margin:14px 0 8px}
.banner p{color:rgba(246,242,234,.85);opacity:1}
.list{gap:clamp(24px,3vw,36px)}
.proj{background:var(--card);border:1px solid var(--line);border-radius:0;box-shadow:none}
.media{background:none;gap:8px}
.main,.th{border-radius:0;background:var(--sand)}
.main img,.th img{height:auto}
.th.on{outline:2px solid var(--brass);outline-offset:-2px}
.chips{gap:6px 16px;font-family:var(--sans)}
.chips span{background:none;border-radius:0;padding:0;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.chips .loc{background:none;color:var(--brass)}
.proj h3{font-size:clamp(30px,3.2vw,42px)}
.type{color:var(--soft)}
.prices{padding:14px 0;margin:12px 0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:6px 30px}
.price{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.6vw,32px);line-height:1.2;color:var(--ink)}
.price small{font-family:var(--sans);font-size:10px;letter-spacing:.2em;color:var(--soft)}
.desc{color:var(--soft)}
.amen{color:var(--soft)}
.amen li::before{content:"";display:inline-block;width:5px;height:5px;background:var(--brass);transform:rotate(45deg);margin-right:8px;vertical-align:2px;font-size:0}
.contact-card{background:var(--ink);color:var(--paper);border:0;border-radius:0;padding:clamp(28px,3.4vw,44px)}
.contact-card b{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.1}
.contact-card .role{color:var(--brass-l);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin:8px 0 18px}
.contact-card div{color:var(--soft-d)}
.contact-card a{color:var(--paper)}
.contact-card .muted{color:#7d878c}
.contact-card a.btn{background:var(--paper);color:var(--ink);margin-top:22px}
.contact-card a.btn:hover{background:var(--brass-l)}
section.plain{padding:clamp(80px,10vw,130px) 0}
.about h2{font-size:clamp(36px,4.6vw,60px)}
.wa-float{background:#1f8f5f;box-shadow:0 10px 30px rgba(0,0,0,.25)}
footer p{color:#7d878c}
footer a{color:var(--soft-d)}

/* ---- Insights & area guides (generated by build.mjs) ---- */
.nav-links a{font-family:var(--sans);font-weight:500;letter-spacing:.14em;color:var(--ink)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--teal-deep)}
.crumb{font-family:var(--sans);color:var(--soft)}
.crumb a{color:var(--soft)}
.idx-head h1,.art-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.6vw,72px);line-height:1.04}
.cats a{border-radius:0;background:transparent;font-family:var(--sans);color:var(--ink)}
.cats a:hover{border-color:var(--ink);color:var(--ink)}
.cats a.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cards{background:none;border:0;gap:clamp(36px,4vw,56px) clamp(20px,2.4vw,32px)}
.cards>article{background:none}
.cards .c-img{background:var(--sand)}
.cards .c-img img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.c-body{padding:20px 0 0}
.c-cat{font-family:var(--sans);color:var(--brass)}
.c-body h2,.c-body h3{font-family:var(--serif);font-weight:500;font-size:clamp(25px,2.2vw,30px);line-height:1.15}
.c-body h2 a,.c-body h3 a{color:var(--ink)}
.c-meta{border-top-color:var(--line)}
.deck{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2vw,25px);line-height:1.4;color:var(--soft)}
.art-hero img{background:var(--sand)}
.art-body{font-size:17px;line-height:1.75}
.art-body h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.6vw,42px);line-height:1.12}
.art-body h3{font-family:var(--sans);color:var(--brass)}
.art-body blockquote{border-left-color:var(--brass);font-family:var(--serif);font-style:italic;font-size:clamp(23px,2.2vw,28px)}
.art-body a{color:var(--teal-deep);text-decoration-color:rgba(154,116,66,.5)}
.art-body code{background:var(--sand);border-radius:0}
.table-scroll{border:1px solid var(--line);background:var(--card)}
.art-body th{background:var(--sand);font-family:var(--sans);color:var(--soft)}
.callout{background:var(--card);border-left-color:var(--brass)}
.callout-t{color:var(--brass)}
.callout--warning{background:var(--card);border-left-color:#a23b2a}
.callout--warning .callout-t{color:#a23b2a}
.callout--source{background:var(--card)}
.opinion{border-color:var(--line)}
.srcs h2,.rel h2{font-family:var(--sans);color:var(--soft)}
.author{background:var(--sand);border:0}
.author b{font-family:var(--serif);font-weight:500;font-size:24px}
.author .prof{font-family:var(--sans);color:var(--brass)}
.rel-grid{background:none;border:0;border-top:1px solid var(--line);gap:0}
.rel-grid a{background:none;border-bottom:1px solid var(--line);padding:22px 22px 26px 0}
.rel-grid .k{font-family:var(--sans);color:var(--brass)}
.rel-grid .t{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2vw,26px)}
@media(min-width:700px){.rel-grid a+a{border-left:1px solid var(--line);padding-left:22px}}
.cta{background:var(--ink);color:var(--paper);border-top:0}
.cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.4vw,56px);color:var(--paper)}
.cta p,.cta .lede{color:var(--soft-d)}
.cta .btn-solid{background:var(--paper);color:var(--ink)}
.cta .btn-solid:hover{background:var(--brass-l)}
.cta .btn-ghost{border-color:rgba(246,242,234,.55);color:var(--paper)}
.cta .btn-ghost:hover{background:rgba(246,242,234,.08)}
.fact-grid{background:none;border:0;border-top:1px solid var(--line);gap:0}
.fact-grid div{background:none;border-bottom:1px solid var(--line);padding:22px 20px 22px 0}
.fact-grid b{font-family:var(--sans);color:var(--brass)}
.fact-grid span{font-family:var(--serif);font-size:21px;line-height:1.3}
@media(min-width:620px){.fact-grid div+div{border-left:1px solid var(--line);padding-left:20px}}
.faq summary{font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.8vw,24px)}
.faq summary::after{color:var(--brass)}
.ft-links a{font-family:var(--sans);color:var(--soft-d)}
.ft-links a:hover{color:var(--paper)}

/* Cormorant defaults to old-style figures, and the template's `font:` shorthands reset
   font-variant — force lining figures everywhere so prices and dates read cleanly. */
*{font-variant-numeric:lining-nums !important}
.tw td.num,.tw td{font-variant-numeric:lining-nums tabular-nums !important}
/* very narrow phones: drop the header button — the hero CTA and floating WhatsApp cover it */
@media(max-width:379px){.nav-right .btn-nav,.nav-right .btn{display:none}}