/* ==========================================================================
   Medini Properties — shared design system  v2  "Aurelia"  2026-09-02
   Dark cinematic heroes, gold accent, serif display type, squared controls.
   Content stays light and readable. Copy and structure untouched.
   Every header/footer variant on the site is unified here:
     headers  .top / .site-header / .bodaiju-header / .guide-header
     footers  .bodaiju-footer / .guide-footer / .ft / bare footer element
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap');

:root{
  --ink:#0a0e1a;
  --ink-2:#101728;
  --ink-3:#18203a;

  --gold:#c8a26a;
  --gold-2:#e2c491;
  --gold-dk:#8a6a3a;

  --blue:#245fd0;
  --blue-dark:#1b57c4;
  --blue-soft:#eef4fe;
  --navy:#111b36;

  --text:#4a556d;
  --muted:#5d6982;
  --line:#e4ebf6;
  --surface:#fff;
  --page:#f7f9fc;

  --display:"Playfair Display", "Songti SC", "Noto Serif SC", Georgia, serif;

  --r:4px;          /* squared, editorial */
  --r-lg:8px;

  --sh-1:0 1px 2px rgba(10,14,26,.04), 0 6px 18px rgba(10,14,26,.05);
  --sh-2:0 18px 44px rgba(10,14,26,.10);
  --sh-hero:0 40px 90px -40px rgba(0,0,0,.8);

  --ease:cubic-bezier(.22,.61,.36,1);
  --art:url('/img/cine-township.jpg');
}

html{scroll-behavior:smooth}
body{background:var(--page);color:var(--text);-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:#1a1206}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- 1. Display type --------------------------------------------- */

h1, h2,
.section-heading h2, .why-copy h2,
section.hero h1, [class$="-hero"] h1{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.08;
  /* no colour here on purpose: each section keeps its own, so a heading
     inside a dark band never ends up navy-on-navy */
}
h3,h4{letter-spacing:-.015em}

/* small uppercase eyebrow, gold, with a hairline rule */
.kicker, .section-heading > span:first-child, .why-copy > span:first-child,
p.kicker, .eyebrow{
  font-family:inherit;
  font-size:11.5px !important;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-dk);
}

/* ---------- 2. Controls: squared, gold primary -------------------------- */

.btn, .cta, a.cta, .primary-button, .secondary-button,
.btn-primary, .btn-secondary, .btn-p, .btn-o, .btn-g,
.hero-buttons a, .bodaiju-hero-buttons a, .final-cta a{
  border-radius:var(--r) !important;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12.5px !important;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.primary-button, .btn-primary, .btn-p, .hero-buttons a:first-child,
.bodaiju-hero-buttons a:first-child{
  background:var(--gold) !important;
  color:#1a1206 !important;
  border:1px solid var(--gold) !important;
  box-shadow:none !important;
}
.primary-button:hover, .btn-primary:hover, .btn-p:hover,
.hero-buttons a:first-child:hover, .bodaiju-hero-buttons a:first-child:hover{
  background:var(--gold-2) !important;
  border-color:var(--gold-2) !important;
  transform:none;
}
.secondary-button, .btn-o, .btn-secondary{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.34) !important;
}

/* ---------- 3. Header — every variant, one look ------------------------- */

header.top, header.site-header, header.bodaiju-header, header.guide-header{
  background:var(--ink) !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
header.top .in, header.site-header > div, header.bodaiju-header > div,
header.guide-header > div{max-width:1240px}

header.top a, header.site-header a, header.bodaiju-header a, header.guide-header a,
header.top span, header.site-header span, header.bodaiju-header span,
header.guide-header span, header.site-header button, header.bodaiju-header summary{
  color:#e8ecf6;
}
header .brand, header a.brand{color:#fff !important;font-weight:700;letter-spacing:-.01em}
header nav a{
  font-size:13px !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:#c3ccdf !important;
}
header nav a:hover{color:var(--gold-2) !important}

/* the one CTA in each header goes gold and square */
header.top nav a.cta,
header.site-header .header-actions a:last-child,
header.bodaiju-header a[class*="check"], header.bodaiju-header .header-actions a,
header.guide-header a[class*="cta"], header nav a.cta{
  background:var(--gold) !important;
  color:#1a1206 !important;
  border-radius:var(--r) !important;
  box-shadow:none !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px !important;
  font-weight:700;
}
header.top nav a.cta:hover, header.site-header .header-actions a:last-child:hover{
  background:var(--gold-2) !important;
}
/* language switcher inside a dark header */
header .language-switcher a, header .language-switcher .lang, header .langs button{color:#9aa6bf !important}
header .language-switcher a[aria-current], header .langs button[aria-pressed="true"]{
  color:var(--gold-2) !important;background:rgba(200,162,106,.14) !important;
}

/* ---------- 4. Hero — full-bleed, cinematic, every page ----------------- */

section.hero:has(> .in),
html[data-mf="home"] section.hero,
section.hero:has(> .hero-overlay),
section[class$="-hero"]{
  position:relative;
  overflow:hidden;
  background-color:var(--ink) !important;
  background-image:
    linear-gradient(90deg, rgba(10,14,26,.95) 0%, rgba(10,14,26,.86) 28%, rgba(10,14,26,.55) 52%, rgba(10,14,26,.28) 74%, rgba(10,14,26,.38) 100%),
    var(--art) !important;
  background-size:cover !important;
  background-position:center right !important;
  background-repeat:no-repeat !important;
  border:0 !important;
}
section.hero:has(> .in)::after{content:none !important}

/* white type inside every hero */
section.hero:has(> .in) h1, html[data-mf="home"] section.hero h1,
section[class$="-hero"] h1{
  color:#fff !important;
  font-size:clamp(38px,5.4vw,72px) !important;
  letter-spacing:-.015em;
  line-height:1.04;
  max-width:15ch;
}
section.hero:has(> .in) p, html[data-mf="home"] section.hero p,
section[class$="-hero"] p:not(.kicker){
  color:#b9c4da !important;
}
section.hero:has(> .in) .crumb, section.hero:has(> .in) .crumb a{color:#8593ae !important}
section.hero:has(> .in) .kicker, section[class$="-hero"] .kicker,
html[data-mf="home"] section.hero .kicker{color:var(--gold-2) !important}
section.hero:has(> .in) .kicker::before, section[class$="-hero"] .kicker::before{
  content:"";display:inline-block;width:28px;height:1px;
  background:var(--gold);margin-right:12px;vertical-align:middle;
}
section[class$="-hero"] .back-link{color:#93a1bb !important}
section[class$="-hero"] .back-link:hover{color:var(--gold-2) !important}

/* the thin vertical rail on the right edge of a hero */
section.hero:has(> .in)::before,
section[class$="-hero"]::before{
  content:"";
  position:absolute;
  right:46px; top:18%; bottom:18%;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.28) 22%, rgba(255,255,255,.28) 78%, transparent);
  pointer-events:none;
  z-index:2;
}
@media(max-width:1100px){
  section.hero:has(> .in)::before, section[class$="-hero"]::before{display:none}
}

/* per-page hero art */
body.mf-towers   { --art:url('/img/cine-towers.jpg') }
body.mf-township { --art:url('/img/cine-township.jpg') }
body.mf-landed   { --art:url('/img/cine-landed.jpg') }
body.mf-shops    { --art:url('/img/cine-shops.jpg') }
body.mf-interior { --art:url('/img/cine-towers.jpg') }
html[data-mf="home"]{ --art:url('/img/cine-towers.jpg') }
:is(html[data-mf="ascent-park"],html:has(main.ascent-page)), :is(html[data-mf="wawari"],html:has(main.wawari-page)){ --art:url('/img/cine-landed.jpg') }
:is(html[data-mf="ascent-hub"],html:has(main.commercial-page:not(.wawari-commercial))), :is(html[data-mf="wawari-commercial"],html:has(main.wawari-commercial)){ --art:url('/img/cine-shops.jpg') }
:is(html[data-mf="privacy"],html:has(main.privacy-page)){ --art:url('/img/cine-township.jpg') }

/* homepage overlay + search card sitting on the dark hero */
/* the overlay treatment now lives in section 14, independent of data-mf */
html[data-mf="home"] .hero-search{
  background:rgba(255,255,255,.97) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-hero) !important;
}

/* project-page hero art keeps the developer render, framed not floating */
[class$="-hero-media"] img{
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-hero) !important;
  transition:transform .6s var(--ease);
}
[class$="-hero-media"]:hover img{transform:translateY(-4px)}

/* ---------- 5. Content sections ----------------------------------------- */

section.why-section, section.projects-section, section.property-paths,
section.home-faq, section.medini-map, section.usp-section,
section.bodaiju-section, section.gallery-section, section.faq-section,
section.views-section, section.bodaiju-location{
  padding-top:clamp(60px,7.5vw,96px);
  padding-bottom:clamp(60px,7.5vw,96px);
}
.section-heading h2, .why-copy h2{font-size:clamp(28px,3.6vw,44px)}

main article h2{margin-top:1.9em;font-size:clamp(24px,3vw,34px)}
main article h2::after{
  content:"";display:block;width:44px;height:2px;
  background:var(--gold);margin-top:.55em;
}
main article p{max-width:70ch}
main article ul li{margin-bottom:.45em}

main article table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);font-size:15px;
}
main article table th{
  background:var(--ink);color:#f0d9b4;font-weight:600;text-align:left;
  padding:13px 16px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
}
main article table td{padding:13px 16px;border-top:1px solid var(--line)}
main .tw{overflow-x:auto}

/* ---------- 6. Cards ---------------------------------------------------- */

aside .card, .benefit-card, .path-card, .usp-card, .info-card{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
aside .card:hover, .benefit-card:hover, .path-card:hover, .usp-card:hover{
  border-color:var(--gold) !important;
  box-shadow:var(--sh-1);
}
aside .card h3, .benefit-card h3{font-size:17px;margin-top:0}

.project-grid > a, .project-grid > article, .project-grid > div{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.project-grid > a:hover, .project-grid > article:hover, .project-grid > div:hover{
  border-color:var(--gold);
  box-shadow:var(--sh-2);
}
.card-image{overflow:hidden}
.card-image img{transition:transform .6s var(--ease)}
.project-grid > *:hover .card-image img{transform:scale(1.05)}
.card-meta{border-top:1px solid var(--line);padding-top:14px;margin-top:14px;
  color:var(--muted);font-size:13px;letter-spacing:.02em}

main article details, main aside details, .faq-section details{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 18px;margin-bottom:10px;
}
main article details summary, main aside details summary, .faq-section details summary{
  font-weight:700;color:var(--navy);cursor:pointer;list-style:none;
}
main article details summary::-webkit-details-marker,
main aside details summary::-webkit-details-marker,
.faq-section details summary::-webkit-details-marker{display:none}

main article blockquote{
  border-left:2px solid var(--gold);
  background:#fbf7f0;
  border-radius:0;
  padding:16px 22px;margin:1.6em 0;color:var(--navy);
}
hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* ---------- 7. Dark bands ----------------------------------------------- */

section.bodaiju-final, section[class$="-final"], section.buyer-guide-callout{
  background:var(--ink) !important;
  color:#b9c4da !important;
  border-radius:0 !important;
}
section.bodaiju-final h2, section[class$="-final"] h2, section.buyer-guide-callout h2{
  color:#fff !important;font-family:var(--display);
}
section.buyer-guide-callout a, section[class$="-final"] a{
  background:var(--gold) !important;color:#1a1206 !important;border-radius:var(--r) !important;
}

/* ---------- 8. Footer — every variant, one look ------------------------- */

footer, footer.bodaiju-footer, footer.guide-footer, footer.site-footer, footer.ft{
  background:var(--ink) !important;
  color:#8593ae !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  border-radius:0 !important;
}
footer a{color:#aeb9d0 !important;text-decoration:none}
footer a:hover{color:var(--gold-2) !important}
footer h4, footer strong, footer .brand{color:#fff !important}
footer .in{max-width:1240px}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ---------- 9. Corrections pass ----------------------------------------- */

/* homepage hero is .hero  .hero-overlay: give it the same treatment */
section.hero:has(> .hero-overlay){ --art:url('/img/cine-towers.jpg') }
section.hero:has(> .hero-overlay) h1,
section.hero:has(> .hero-overlay) .hero-content h1{ color:#fff !important }
section.hero:has(> .hero-overlay) .hero-content p{ color:#b9c4da !important }
section.hero:has(> .hero-overlay) .hero-content .kicker,
section.hero:has(> .hero-overlay) .hero-content > span:first-child{ color:var(--gold-2) !important }

/* a hero headline is one colour — kill the inline accent spans */
section.hero h1 em, section.hero h1 span, section.hero h1 strong, section.hero h1 b,
section[class$="-hero"] h1 em, section[class$="-hero"] h1 span,
section[class$="-hero"] h1 strong, section[class$="-hero"] h1 b{
  color:#fff !important;
  font-style:normal;
}

/* condo project pages get the tower render */
:is(html[data-mf="bodaiju"],html:has(main.bodaiju-page[class="bodaiju-page"])), :is(html[data-mf="elysia"],html:has(main.elysia-page)), :is(html[data-mf="iskandar-residences"],html:has(main.iskandar-page)),
:is(html[data-mf="verte"],html:has(main.verte-page)), :is(html[data-mf="grand-medini"],html:has(main.grand-medini-page)), :is(html[data-mf="macrolink"],html:has(main.macrolink-page)),
html[data-mf="medini-condo-for-rent"], html[data-mf="new-launch-medini"]{
  --art:url('/img/cine-towers.jpg');
}

/* every header's action button, whatever it is called */
.nav-cta, header .nav-cta, header .header-actions a, header [class*="-actions"] a{
  background:var(--gold) !important;
  color:#1a1206 !important;
  border:1px solid var(--gold) !important;
  border-radius:var(--r) !important;
  box-shadow:none !important;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px !important;
}
.nav-cta:hover, header .header-actions a:hover, header [class*="-actions"] a:hover{
  background:var(--gold-2) !important; color:#1a1206 !important;
}
/* but not the language switcher, which also lives in the actions row */
header .language-switcher a, header .language-switcher button,
header [class*="-actions"] .language-switcher a{
  background:transparent !important;
  border:0 !important;
  color:#9aa6bf !important;
  font-size:12px !important;
  letter-spacing:.04em;
  text-transform:none;
}

/* ghost buttons sitting on a dark hero must be readable */
section.hero .secondary-button, section[class$="-hero"] .secondary-button,
section.hero .btn-o, .hero-buttons a:last-child, .bodaiju-hero-buttons a:last-child{
  color:#fff !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.42) !important;
}
section.hero .secondary-button:hover, section[class$="-hero"] .secondary-button:hover,
.hero-buttons a:last-child:hover, .bodaiju-hero-buttons a:last-child:hover{
  border-color:var(--gold) !important;
  color:var(--gold-2) !important;
}

/* primary actions inside light content also go gold */
.hero-search button, .hero-search [type=submit],
aside .card a[href*="wa.me"], .final-cta a, section[class$="-final"] a[href*="wa.me"]{
  background:var(--gold) !important;
  color:#1a1206 !important;
  border-radius:var(--r) !important;
  border:1px solid var(--gold) !important;
  box-shadow:none !important;
}
aside .card a:not([href*="wa.me"]){
  background:transparent !important;
  border:1px solid var(--line) !important;
  color:var(--navy) !important;
  border-radius:var(--r) !important;
}

/* the CTA label spans must not inherit the muted nav colour */
.nav-cta, .nav-cta *, header .header-actions > a:not(.language-switcher) *,
header [class*="-actions"] > a *, header nav a.cta *{
  color:#1a1206 !important;
}
header nav a .lang, header nav a span{color:inherit !important}

/* ---------- 10. Legibility pass ----------------------------------------- */

/* nav dropdown labels are summary elements, not links - they were 2.6:1 on the dark bar */
header summary, header details > summary, header .nav-menu > summary{
  color:#c3ccdf !important;
  font-size:13px !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  list-style:none;
}
header summary::-webkit-details-marker{display:none}
header summary:hover{color:var(--gold-2) !important}

/* headings and eyebrows sitting on a dark band */
section.bodaiju-final h2, section[class$="-final"] h2, section.buyer-guide-callout h2,
section.bodaiju-final h3, section[class$="-final"] h3,
[class*="-final"] .section-label, .buyer-guide-callout .section-label{
  color:#fff !important;
}
[class*="-final"] .section-label, .buyer-guide-callout .section-label,
[class*="-final"] .kicker, .buyer-guide-callout .kicker{
  color:var(--gold-2) !important;
}
[class*="-final"] p, .buyer-guide-callout p{color:#b9c4da !important}

/* small print was 3.3-3.6:1 - lift it to AA */
.stat-label, .card-meta, .meta, small,
[class*="-stats"] span, [class*="-stats"] p{
  color:var(--muted) !important;
}

/* ---------- 11. Button fills, resolved literally ------------------------ */
/* var() inside the background shorthand was not landing on these, so the
   gold fill is written out longhand with literal values. */

a.primary-button, a.nav-cta, .primary-button, .nav-cta,
.btn-primary, .btn-p, button.primary-button,
.hero-buttons a:first-child, .bodaiju-hero-buttons a:first-child,
header .header-actions a, header .bodaiju-actions a.nav-cta,
.hero-search button, .hero-search [type=submit],
aside .card a[href*="wa.me"], .final-cta a, .buyer-guide-callout a{
  background-color:#c8a26a !important;
  background-image:none !important;
  color:#1a1206 !important;
  border:1px solid #c8a26a !important;
  border-radius:4px !important;
  box-shadow:none !important;
}
a.primary-button:hover, a.nav-cta:hover, .primary-button:hover, .nav-cta:hover,
.hero-buttons a:first-child:hover, .bodaiju-hero-buttons a:first-child:hover,
header .header-actions a:hover, .hero-search button:hover{
  background-color:#e2c491 !important;
  border-color:#e2c491 !important;
  color:#1a1206 !important;
}
a.primary-button *, a.nav-cta *, .primary-button *, .nav-cta *,
.hero-search button *, aside .card a[href*="wa.me"] *{color:#1a1206 !important}

/* language switcher must never be painted as a button */
header .language-switcher, header .language-switcher a, header .language-switcher button{
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  color:#9aa6bf !important;
}
header .language-switcher a[aria-current], header .language-switcher .active{
  color:#e2c491 !important;
}

/* ghost buttons keep their outline and stay legible on the dark hero */
.secondary-button, a.secondary-button, .btn-o,
.hero-buttons a:last-child, .bodaiju-hero-buttons a:last-child{
  background-color:transparent !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.42) !important;
  color:#ffffff !important;
  border-radius:4px !important;
}
.secondary-button *, a.secondary-button *,
.hero-buttons a:last-child *, .bodaiju-hero-buttons a:last-child *{color:#ffffff !important}
.secondary-button:hover, a.secondary-button:hover{
  border-color:#c8a26a !important; color:#e2c491 !important;
}
.secondary-button:hover *, a.secondary-button:hover *{color:#e2c491 !important}

/* ===== 12. Resale availability table (Iskandar) ===== */
section.resale-section{background:#0a0e1a;color:#e8ecf5;padding:76px 0 84px}
section.resale-section .bodaiju-heading h2{color:#fff}
section.resale-section .bodaiju-heading p{color:#b9c2d4;max-width:760px;margin-left:auto;margin-right:auto}
section.resale-section .section-label{color:#c8a26a;letter-spacing:.18em}

.rs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(200,162,106,.28);
  border:1px solid rgba(200,162,106,.28);max-width:1080px;margin:36px auto 30px}
.rs-stat{background:#0d1322;padding:22px 18px;text-align:center}
.rs-stat strong{display:block;font-family:"Playfair Display","Noto Serif SC",Georgia,serif;
  font-size:1.7rem;line-height:1.15;color:#e2c491;margin-bottom:6px}
.rs-stat .lang{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#94a1ba}

.rs-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:1080px;margin:0 auto 22px}
.rs-filter{background:transparent;border:1px solid rgba(200,162,106,.38);color:#cfd7e6;
  border-radius:4px;padding:8px 16px;font-size:.82rem;letter-spacing:.06em;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.rs-filter:hover{border-color:#c8a26a;color:#fff}
.rs-filter.is-on{background:#c8a26a;border-color:#c8a26a;color:#1a1206;font-weight:600}

.rs-tablewrap{max-width:1080px;margin:0 auto;overflow-x:auto;
  border:1px solid rgba(200,162,106,.24);background:#0d1322}
.rs-table{width:100%;border-collapse:collapse;min-width:760px}
.rs-table thead th{text-align:left;padding:14px 16px;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:#c8a26a;font-weight:600;background:#111829;
  border-bottom:1px solid rgba(200,162,106,.3)}
.rs-table tbody tr{border-bottom:1px solid rgba(255,255,255,.07)}
.rs-table tbody tr:last-child{border-bottom:0}
.rs-table tbody tr:hover{background:rgba(200,162,106,.07)}
.rs-table td{padding:15px 16px;vertical-align:middle;font-size:.92rem;color:#dbe2ef}

.rt-code{font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.02rem;color:#fff;letter-spacing:.04em}
.rt-code em{font-style:normal;color:#c8a26a;font-size:.86em}
.rt-band,.rt-sub,.rt-sub2{display:block}
.rt-band{font-size:.74rem;color:#94a1ba;margin-top:3px}
.rt-type strong{display:block;color:#fff;font-weight:600;font-size:.95rem}
.rt-type .rt-sub{font-size:.76rem;color:#94a1ba;margin-top:3px}
.rt-size{font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff}
.rt-size .rt-sub{font-size:.72rem;color:#94a1ba;letter-spacing:.1em;text-transform:uppercase}
.rt-cond{font-size:.86rem}
.rt-cond .rt-sub{font-size:.76rem;color:#94a1ba;margin-top:3px}
.rt-price{font-family:"Playfair Display","Noto Serif SC",Georgia,serif;font-size:1.12rem;
  color:#e2c491;white-space:nowrap}
.rt-cta a{display:inline-block;background-color:#c8a26a;background-image:none;color:#1a1206;
  border:1px solid #c8a26a;border-radius:4px;padding:8px 15px;font-size:.8rem;font-weight:600;
  letter-spacing:.05em;text-decoration:none;white-space:nowrap}
.rt-cta a:hover{background-color:#e2c491;border-color:#e2c491;color:#1a1206}

.rs-note{max-width:1080px;margin:18px auto 0;font-size:.78rem;line-height:1.7;color:#8e9bb4;text-align:center}

.rs-facts{max-width:1080px;margin:52px auto 0;border-top:1px solid rgba(200,162,106,.24);padding-top:34px}
.rs-facts h3{font-family:"Playfair Display","Noto Serif SC",Georgia,serif;font-size:1.35rem;
  color:#fff;text-align:center;margin:0 0 24px}
.rs-facts dl{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 26px;margin:0}
.rs-fact dt{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:#c8a26a;margin-bottom:5px}
.rs-fact dd{margin:0;font-size:.92rem;color:#e8ecf5;line-height:1.45}

@media (max-width:900px){
  .rs-stats{grid-template-columns:repeat(2,1fr)}
  .rs-facts dl{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .rs-stat strong{font-size:1.35rem}
  .rs-facts dl{grid-template-columns:1fr}
  section.resale-section{padding:56px 0 62px}
}

/* ===== 13. Unit walkthrough videos ===== */
section.video-tour{background:#0d1322;color:#e8ecf5}
section.video-tour .bodaiju-heading h2{color:#fff}
section.video-tour .bodaiju-heading p{color:#b9c2d4;max-width:720px;margin-left:auto;margin-right:auto}
section.video-tour .section-label{color:#c8a26a;letter-spacing:.18em}

.vt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,330px));justify-content:center;
  gap:40px;max-width:760px;margin:40px auto 0}
.vt-card{background:#0a0e1a;border:1px solid rgba(200,162,106,.26);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column}
.vt-frame{position:relative;width:100%;padding-top:177.78%;background:#05070d}
.vt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vt-meta{padding:20px 22px 24px}
.vt-size{display:block;font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.5rem;color:#e2c491;line-height:1.1}
.vt-size small{font-size:.62em;letter-spacing:.12em;text-transform:uppercase;color:#94a1ba;margin-left:5px}
.vt-meta h3{font-family:"Playfair Display","Noto Serif SC",Georgia,serif;font-size:1.3rem;
  font-weight:500;color:#fff;margin:8px 0 10px}
.vt-meta p{font-size:.9rem;line-height:1.65;color:#aab4c9;margin:0 0 16px}
.vt-meta a{display:inline-block;color:#c8a26a;font-size:.82rem;letter-spacing:.05em;
  text-decoration:none;border-bottom:1px solid rgba(200,162,106,.45);padding-bottom:2px}
.vt-meta a:hover{color:#e2c491;border-bottom-color:#e2c491}
.vt-note{max-width:760px;margin:26px auto 0;text-align:center;font-size:.78rem;
  line-height:1.7;color:#8e9bb4}

@media (max-width:760px){
  .vt-grid{grid-template-columns:minmax(0,330px);gap:26px;max-width:340px}
}

/* ===== 14. Hero legibility, header fit, mobile project nav ===== */
/* the original light wash was still painting on top of the dark hero art */
section.hero > .hero-overlay,
html[data-mf] section.hero > .hero-overlay{
  background-image:linear-gradient(90deg,
    rgba(8,12,22,.93) 0%,
    rgba(8,12,22,.85) 34%,
    rgba(8,12,22,.60) 58%,
    rgba(8,12,22,.36) 78%,
    rgba(8,12,22,.46) 100%) !important;
}
section.hero h1{text-shadow:0 2px 22px rgba(4,7,14,.55)}
section.hero p.hero-copy, section.hero .hero-copy{color:#c9d3e6 !important}
section.hero .kicker, section.hero p.kicker{color:#e2c491 !important}
section[class$="-hero"] .kicker::before{display:none !important}

/* header grid was overflowing its own bar and clipping the CTA */
header.site-header{
  grid-template-columns:auto minmax(0,1fr) auto !important;
  column-gap:clamp(12px,1.5vw,26px) !important;
}
header.site-header nav{min-width:0 !important;gap:clamp(11px,1.6vw,26px) !important}
header.site-header .header-actions{gap:10px !important}

@media (max-width:1240px){
  header.site-header nav a, header.site-header nav summary{
    font-size:12px !important; letter-spacing:.02em !important;
  }
}

/* project-page header overflowed the viewport at laptop widths */
header.bodaiju-header{
  grid-template-columns:auto minmax(0,1fr) auto !important;
  column-gap:clamp(12px,1.5vw,26px) !important;
}
header.bodaiju-header > nav.bodaiju-nav{
  min-width:0 !important;
  gap:clamp(11px,1.5vw,24px) !important;
}
@media (max-width:1240px){
  header.bodaiju-header nav.bodaiju-nav a,
  header.bodaiju-header nav.bodaiju-nav button{
    font-size:12px !important; letter-spacing:.03em !important;
  }
}

@media (max-width:900px){
  section.hero:has(> .hero-overlay){
    background-image:linear-gradient(180deg,
      rgba(8,12,22,.93) 0%,
      rgba(8,12,22,.85) 36%,
      rgba(8,12,22,.50) 66%,
      rgba(8,12,22,.70) 100%),
      url("/img/cine-towers.jpg") !important;
    background-position:50% 26% !important;
    background-size:cover !important;
  }
  section.hero > .hero-overlay,
html[data-mf] section.hero > .hero-overlay{
    background-image:none !important;
    background-color:transparent !important;
  }

  /* project pages lost their entire section nav on phones */
  header.bodaiju-header{
    grid-template-columns:1fr auto !important;
    row-gap:0 !important;
    padding-bottom:0 !important;
  }
  header.bodaiju-header > .brand{grid-column:1 !important;grid-row:1 !important}
  header.bodaiju-header > .bodaiju-actions{grid-column:2 !important;grid-row:1 !important}
  header.bodaiju-header > nav.bodaiju-nav{
    display:flex !important;
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    gap:15px !important;
    overflow-x:auto !important;
    scrollbar-width:none;
    padding:0 0 9px !important;
    margin:4px 0 0 !important;
    white-space:nowrap;
    max-width:100%;
  }
  header.bodaiju-header nav.bodaiju-nav::-webkit-scrollbar{display:none}
  header.bodaiju-header nav.bodaiju-nav > *{flex:0 0 auto}
  header.bodaiju-header nav.bodaiju-nav a,
  header.bodaiju-header nav.bodaiju-nav button{
    font-size:11.5px !important;
    letter-spacing:.05em !important;
  }
}

/* ===== 15. Brand mark and wordmark ===== */
header .brand-mark, header .brand span.brand-mark{
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  border:1px solid rgba(200,162,106,.48) !important;
  padding:4px !important;
  width:40px !important; height:40px !important;
  display:flex !important; align-items:center; justify-content:center;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciI+PHBhdGggZD0iTTkuNiAzMC4yVjExTTMxLjQgMTFWMzAuMiIgc3Ryb2tlPSIjYzhhMjZhIiBzdHJva2Utd2lkdGg9IjEuNSIvPjxwYXRoIGQ9Ik05LjYgMTFMMjAuNSAyNi40IiBzdHJva2U9IiNjOGEyNmEiIHN0cm9rZS13aWR0aD0iMy40Ii8+PHBhdGggZD0iTTIwLjUgMjYuNEwzMS40IDExIiBzdHJva2U9IiNjOGEyNmEiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZD0iTTUuOCAzMC45SDEzLjRNMjcuNiAzMC45SDM1LjIiIHN0cm9rZT0iI2M4YTI2YSIgc3Ryb2tlLXdpZHRoPSIxLjQiLz48cGF0aCBkPSJNNi40IDEwLjJIMTIuOE0yOC4yIDEwLjJIMzQuNiIgc3Ryb2tlPSIjYzhhMjZhIiBzdHJva2Utd2lkdGg9IjEuNCIvPjwvc3ZnPg==") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
}
header .brand-mark img{opacity:0 !important; width:100% !important; height:100% !important}

header .brand{gap:13px !important; align-items:center !important}
header .brand strong{
  font-family:"Playfair Display","Noto Serif SC",Georgia,serif !important;
  font-weight:500 !important;
  font-size:19.5px !important;
  letter-spacing:.006em !important;
  line-height:1.05 !important;
  color:#ffffff !important;
}
header .brand small{
  display:block !important;
  font-size:9px !important;
  letter-spacing:.24em !important;
  text-transform:uppercase !important;
  color:#94a3bf !important;
  margin-top:4px !important;
  font-weight:500 !important;
}
header.bodaiju-header .brand small, header.guide-header .brand small{color:#94a3bf !important}

@media (max-width:900px){
  header .brand-mark, header .brand span.brand-mark{width:34px !important;height:34px !important}
  header .brand strong{font-size:17px !important}
  header .brand small{font-size:8px !important;letter-spacing:.2em !important}
}

header .brand:hover .brand-mark{border-color:rgba(226,196,145,.85) !important}

/* ===== 16. Craft pass: display figures, hairlines, card restraint ===== */
/* stat figures were set in the UI sans; the display face carries them better */
section.bodaiju-stats div strong,
section.bodaiju-stats strong,
.mp-stats strong, .rs-stat strong{
  font-family:"Playfair Display","Noto Serif SC",Georgia,serif !important;
  font-weight:500 !important;
  letter-spacing:-.005em !important;
}
section.bodaiju-stats div span{
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-size:.7rem !important;
}

/* one consistent treatment for every section label */
body .section-label{
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
  font-size:.71rem !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
  font-weight:600 !important;
}
/* no lead-in rule here: the markup already carries its own dash */

/* display headings: optical tracking, tighter leading */
.bodaiju-heading h2, .section-heading h2, .why-copy h2, section.faq-section h2,
section.gallery-section h2, section.bodaiju-location h2{
  letter-spacing:-.012em !important;
  line-height:1.14 !important;
}

/* cards: hairline instead of soft drop shadow, one radius everywhere */
article.unit-card, .unit-card{
  border:1px solid rgba(10,14,26,.10) !important;
  box-shadow:none !important;
  border-radius:4px !important;
  overflow:hidden !important;
  transition:border-color .2s ease, transform .2s ease;
}
article.unit-card:hover, .unit-card:hover{
  border-color:rgba(200,162,106,.55) !important;
  transform:translateY(-2px);
}
.unit-card .plan-wrap, .unit-card .plan-wrap img{border-radius:0 !important}
.unit-card .plan-wrap{border-bottom:1px solid rgba(10,14,26,.08) !important}
.unit-card .unit-type{
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  font-size:.68rem !important;
  color:#8a6a3a !important;
}

/* hairline seam between stacked light sections */
section.bodaiju-stats{border-bottom:1px solid rgba(10,14,26,.08)}

/* ===== 17. Homepage conversion and responsive polish — v3 ===== */
html[data-mf="home"] .hero{
  min-height:clamp(720px,82vh,860px);
  grid-template-columns:minmax(0,1fr) minmax(340px,420px);
  gap:clamp(44px,6vw,96px);
}
html[data-mf="home"] .hero-content{max-width:700px}
html[data-mf="home"] .hero-copy{max-width:590px;font-size:17px !important}
html[data-mf="home"] .property-search{
  position:relative;
  padding:30px !important;
  border:1px solid rgba(226,196,145,.58) !important;
  border-top:3px solid var(--gold) !important;
  background:rgba(255,255,255,.965) !important;
  box-shadow:0 30px 80px -36px rgba(0,0,0,.72) !important;
}
html[data-mf="home"] .property-search h2{
  font-family:var(--display);
  font-size:25px;
  letter-spacing:-.01em;
}
html[data-mf="home"] .property-search select{
  min-height:50px;
  border-radius:4px;
  background-color:#fbfcfe;
  font-size:14px;
}
html[data-mf="home"] .property-search button{min-height:52px}

html[data-mf="home"] .category-strip{
  position:relative;
  z-index:5;
  max-width:1180px;
  margin:-34px auto 0;
  border:1px solid rgba(10,14,26,.10);
  border-top:2px solid var(--gold);
  border-radius:4px;
  box-shadow:0 24px 55px -38px rgba(10,14,26,.55);
}
html[data-mf="home"] .category-strip a{
  min-height:72px;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
html[data-mf="home"] .category-strip a:hover{
  color:var(--gold-dk);
  background:#fbf7f0;
}

html[data-mf="home"] .projects-section{
  background:linear-gradient(180deg,#f7f9fc 0%,#fff 44%,#f7f9fc 100%);
  overflow:hidden;
}
html[data-mf="home"] .project-grid{gap:24px}
html[data-mf="home"] .property-card{
  border-radius:4px !important;
  box-shadow:0 16px 42px -34px rgba(10,14,26,.65) !important;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
html[data-mf="home"] .property-card:hover{
  border-color:rgba(200,162,106,.7) !important;
  box-shadow:0 28px 62px -34px rgba(10,14,26,.62) !important;
  transform:translateY(-3px);
}
html[data-mf="home"] .card-image{height:255px}
html[data-mf="home"] .card-content h3{
  font-family:var(--display);
  font-size:24px;
  font-weight:600;
}
html[data-mf="home"] .card-content>a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:46px;
  border-top:1px solid var(--line);
  color:var(--navy);
}
html[data-mf="home"] .property-card:hover .card-content>a{color:var(--gold-dk)}

html[data-mf="home"] .why-section{
  color:#fff;
  background:linear-gradient(135deg,var(--ink),var(--ink-3)) !important;
  border:1px solid rgba(200,162,106,.22);
  border-radius:4px !important;
  box-shadow:0 34px 80px -52px rgba(0,0,0,.9);
}
html[data-mf="home"] .why-copy h2,
html[data-mf="home"] .why-section h3{color:#fff !important}
html[data-mf="home"] .why-copy p,
html[data-mf="home"] .why-section article p{color:#b9c4da !important}
html[data-mf="home"] .why-section article{
  border-color:rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.035) !important;
}
html[data-mf="home"] .why-section article:hover{border-color:rgba(200,162,106,.55) !important}
html[data-mf="home"] .why-section article>span{color:var(--gold-2) !important}
html[data-mf="home"] .why-disclaimer{color:#97a4bc !important}

html[data-mf="home"] .property-paths .path-card{
  min-height:320px;
  border-top:2px solid rgba(200,162,106,.55) !important;
}
html[data-mf="home"] .property-paths .path-card>span{
  color:var(--gold-dk) !important;
  background:#fbf7f0 !important;
}
html[data-mf="home"] .home-faq details{
  border-radius:4px !important;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
html[data-mf="home"] .home-faq details:hover{border-color:rgba(200,162,106,.62)}

html[data-mf="home"] #mp-guides a{
  border-radius:4px !important;
  border-left:2px solid rgba(200,162,106,.55) !important;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease);
}
html[data-mf="home"] #mp-guides a:hover{
  border-color:var(--gold) !important;
  background:#fbf7f0 !important;
  transform:translateY(-2px);
}

@media(max-width:900px){
  html[data-mf="home"] .hero{min-height:auto;display:block}
  html[data-mf="home"] .category-strip{margin:-18px 16px 0}
  html[data-mf="home"] .why-section{margin-left:16px;margin-right:16px}
}

@media(max-width:520px){
  html[data-mf="home"] body{padding-bottom:76px}
  html[data-mf="home"] .hero{padding-bottom:62px}
  html[data-mf="home"] .hero h1{font-size:44px !important;line-height:1.04}
  html[data-mf="home"] .hero-copy{font-size:16px !important}
  html[data-mf="home"] .property-search{padding:22px !important}

  html[data-mf="home"] .site-header .nav-cta{
    display:flex !important;
    position:fixed !important;
    left:16px !important;
    right:16px !important;
    bottom:12px !important;
    z-index:70 !important;
    width:auto !important;
    min-height:52px !important;
    justify-content:center !important;
    box-shadow:0 14px 38px rgba(10,14,26,.30) !important;
  }

  html[data-mf="home"] .projects-section{padding-left:0 !important;padding-right:0 !important}
  html[data-mf="home"] .projects-section .section-heading{padding:0 20px}
  html[data-mf="home"] .project-grid{
    display:flex !important;
    grid-template-columns:none !important;
    gap:14px !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 20px 18px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    scroll-padding-left:20px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  html[data-mf="home"] .project-grid::-webkit-scrollbar{display:none}
  html[data-mf="home"] .property-card{
    flex:0 0 min(84vw,330px);
    scroll-snap-align:start;
  }
  html[data-mf="home"] .card-image{height:245px}
  html[data-mf="home"] .property-paths .path-card{min-height:260px}
}

/* Older editorial templates: use the same dark surfaces and brand as the main site. */
body:has(>header.top){--page:#06101c;--bg:#06101c;--surface:#0b1c2b;--text:#aebbc8;--body:#aebbc8;--muted:#9aaab9;--navy:#eef4f8;--ink:#eef4f8;--line:#263c4d;--soft:#102536;background:#06101c!important;color:#aebbc8!important}
body:has(>header.top) :is(main,section.pad,.mapsec){background:#06101c!important;color:#aebbc8!important}
body:has(>header.top) :is(h2,h3,h4,strong,summary){color:#eef4f8!important}
body:has(>header.top) :is(.card,.grid>a,.faq details,.zh,table,.panel,.p4,.pill4,.ctaband,.min,.filters button){background:#0b1c2b!important;border-color:#263c4d!important;color:#aebbc8!important;box-shadow:none!important}
body:has(>header.top) .filters button[aria-pressed="true"]{background:#e3ad4f!important;color:#171107!important}
body:has(>header.top) :is(th,thead){background:#102536!important;color:#eef4f8!important}
body:has(>header.top) :is(td,tr){background:transparent!important;color:#aebbc8!important;border-color:#263c4d!important}
body:has(>header.top) :is(article a,.grid>a,.kicker,.eyebrow){color:#e3ad4f!important}
body:has(>header.top) :is(.btn,.cta){background:#e3ad4f!important;color:#171107!important;border-color:#e3ad4f!important}
body:has(>header.top) :is(.btn.ghost,.btn-o){background:transparent!important;color:#eef4f8!important;border-color:#52677a!important}
body:has(>header.top) :is(footer,.ft,header.top){background:#040d16!important;border-color:#263c4d!important}
header.top .brand{font-size:0!important;flex:none;width:180px;height:42px;gap:0!important}
header.top .brand img{display:none!important}
header.top .brand::before{content:"";width:180px;height:42px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 48'%3E%3Cg fill='none' stroke='%23e3ad4f' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 41V17l11-6v30M19 41V6l12 7v28M31 41V20l9 5v16M5 41h38'/%3E%3C/g%3E%3Ctext x='60' y='25' fill='%23f4f7f9' font-family='Arial,sans-serif' font-size='21' letter-spacing='5'%3EMEDINI%3C/text%3E%3Ctext x='60' y='42' fill='%23e3ad4f' font-family='Arial,sans-serif' font-size='8' letter-spacing='3.2'%3EPROPERTIES%3C/text%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:560px){header.top .brand{width:140px;height:36px}header.top .brand::before{width:140px;height:36px}header.top .in{gap:8px!important;padding-inline:16px!important}header.top nav a.cta{font-size:10px!important;padding:10px!important;margin-left:0!important}}