/* ============================================================
   American Realty — Premium (flagship)
   Sotheby's × modern tech · Navy + Gold · DM Serif Display + Inter
   RED USED EXACTLY 3×:  hero rule · "100%" stat · Schedule CTA
   ============================================================ */
:root{
  --navy:#041E42;
  --navy-2:#031629;
  --navy-3:#020f1c;
  --navy-4:#010a13;
  --white:#ffffff;
  --paper:#D9D6D0;
  --paper-2:#ccc9c2;
  --ink:#19202e;
  --muted:#5a6475;
  --muted-2:#828c9d;
  --red:#76232F;
  --red-deep:#5c1a23;
  --gold:#c2a26a;
  --gold-soft:#d9c69b;
  --gold-deep:#a2854f;
  --on-dark:rgba(255,255,255,.74);
  --on-dark-dim:rgba(255,255,255,.5);
  --line-d:rgba(255,255,255,.13);
  --line-gold:rgba(194,162,106,.42);
  --line-l:#e8e3d7;
  --line-l2:#ded7c8;
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --maxw:1300px;
  --shadow:0 30px 70px -34px rgba(0,12,40,.32);
  --shadow-d:0 40px 90px -45px rgba(0,6,24,.75);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--navy);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.01em}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.5rem,4.5vw,3.5rem)}
.eye{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep)}
.eye.on-dark{color:var(--gold)}
.eye.center{display:flex;justify-content:center}

/* ---------- cinematic photo placeholders ---------- */
.cine{position:relative;overflow:hidden;background:
  radial-gradient(130% 100% at 50% 6%,rgba(255,255,255,.06),transparent 44%),
  linear-gradient(180deg,#021a45 0%,#063063 30%,#0e5285 48%,#caa46a 58%,#6f5232 63%,#04152f 100%)}
.cine::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 38%,transparent 42%,rgba(0,8,28,.5) 100%)}
.cine .cap{position:absolute;left:.95rem;bottom:.95rem;z-index:3;font-family:var(--sans);font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.22);padding:.32rem .6rem;background:rgba(0,12,34,.36)}
.cine.night{background:linear-gradient(180deg,#02152f,#04203f 42%,#063055 72%,#021126)}
.cine.dawn{background:radial-gradient(120% 90% at 72% 10%,rgba(216,198,155,.24),transparent 46%),linear-gradient(180deg,#04183a,#0a3a66 46%,#caa46a 66%,#3c2d1c 72%,#03142e)}
.cine.dusk{background:linear-gradient(180deg,#0a2452 0%,#16467e 36%,#caa274 56%,#b8612f 66%,#3a1d24 80%,#050f24 100%)}
.cine.aqua{background:linear-gradient(180deg,#0a3a66 0%,#127fae 38%,#3fb4c4 56%,#bfe2d0 72%,#e7dcc0 100%)}
.cine.palm{background:radial-gradient(90% 70% at 30% 20%,rgba(20,90,80,.5),transparent 50%),linear-gradient(180deg,#063b54,#0a5a6e 45%,#1f7a5e 64%,#0a3247 100%)}
.cine.jungle{background:radial-gradient(80% 60% at 70% 30%,rgba(30,110,80,.55),transparent 55%),linear-gradient(180deg,#053a4a,#0c5f55 50%,#177a4a 70%,#062b34 100%)}
.cine.marina{background:linear-gradient(180deg,#062a5c,#0c4f86 42%,#2f93b8 60%,#cdd9e0 78%,#e7dcc0 100%)}
.cine.sand{background:linear-gradient(180deg,#0e4f86 0%,#3fa0c0 34%,#a9d6cf 52%,#e3d4ad 66%,#caa66f 100%)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:1rem 1.9rem;border:1px solid transparent;cursor:pointer;transition:.38s cubic-bezier(.2,.7,.3,1);white-space:nowrap}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}            /* the ONE red button */
.btn-red:hover{background:var(--red-deep);border-color:var(--red-deep);transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-soft);border-color:var(--gold-soft);transform:translateY(-2px)}
.btn-goldline{background:transparent;color:var(--gold-deep);border-color:var(--gold)}
.btn-goldline:hover{background:var(--gold);color:var(--navy)}
.btn-goldline.on-dark{color:var(--gold-soft)}
.btn-goldline.on-dark:hover{color:var(--navy)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-ink{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-ink:hover{background:var(--navy-2);transform:translateY(-2px)}
.btn-lg{padding:1.15rem 2.2rem;font-size:.8rem}
.tlink{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep);transition:gap .3s,color .3s}
.tlink:hover{gap:.85rem;color:var(--navy)}
.tlink.on-dark{color:var(--gold-soft)}
.tlink.on-dark:hover{color:#fff}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:.4s ease}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:1.35rem clamp(1.5rem,4.5vw,3.5rem);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;transition:padding .4s ease}
.nav.stuck{background:rgba(0,18,44,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-d)}
.nav.stuck .nav-in{padding-top:.9rem;padding-bottom:.9rem}
.nav-logo-main{font-family:var(--serif);font-size:1.5rem;color:#fff;line-height:1;white-space:nowrap;letter-spacing:0}
.nav-logo-main span{color:var(--gold)}
.nav-logo-sub{font-family:var(--sans);font-size:.55rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--on-dark-dim);margin-top:.42rem}
.nav-menu{display:flex;align-items:center;gap:.2rem}
.nav-i{position:relative}
.nav-i>a,.nav-i>button{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.04em;color:var(--on-dark);background:none;border:none;cursor:pointer;padding:.6rem .72rem;transition:color .25s;white-space:nowrap}
.nav-i>a:hover,.nav-i>button:hover,.nav-i.open>button{color:#fff}
.nav-i .caret{width:8px;height:8px;transition:transform .25s;opacity:.7}
.nav-i .caret *{stroke:currentColor;fill:none;stroke-width:1.8}
.nav-i.open .caret{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 12px);left:0;min-width:250px;background:#fff;border:1px solid var(--line-l);box-shadow:var(--shadow);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:.24s cubic-bezier(.2,.7,.3,1);z-index:50}
.dd::before{content:"";position:absolute;top:-1px;left:.72rem;width:34px;height:2px;background:var(--gold)}
.nav-i:hover .dd,.nav-i.open .dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd a{display:flex;align-items:center;gap:.7rem;padding:.62rem .7rem;font-size:.85rem;font-weight:500;color:var(--ink);transition:.16s}
.dd a:hover{background:var(--paper);color:var(--navy)}
.dd a .di{width:30px;height:30px;background:var(--paper-2);display:inline-flex;align-items:center;justify-content:center;flex:none;font-family:var(--serif);font-size:.82rem;color:var(--gold-deep);transition:.18s}
.dd a:hover .di{background:var(--navy);color:#fff}
.dd .sub{display:block;font-size:.7rem;color:var(--muted-2);font-weight:400;margin-top:.1rem}
.dd-right{left:auto;right:0}
.dd-right::before{left:auto;right:.72rem}
.nav-right{display:flex;align-items:center;gap:1.2rem}
.nav-phone{font-family:var(--sans);font-size:.8rem;font-weight:700;color:#fff;letter-spacing:.02em;white-space:nowrap;transition:color .25s}
.nav-phone:hover{color:var(--gold-soft)}
.nav-cta{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-soft);border:1px solid var(--gold);padding:.7rem 1.3rem;white-space:nowrap;transition:.38s}
.nav-cta:hover{background:var(--gold);color:var(--navy)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.4rem;z-index:120}
.nav-toggle span{width:25px;height:1.6px;background:#fff;transition:.35s;display:block}
.nav-backdrop{display:none}

/* mobile menu */
.mobile-menu{position:fixed;inset:0 0 0 auto;width:min(87vw,400px);background:var(--navy-3);z-index:110;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.3,1);overflow-y:auto;padding:5.5rem 1.8rem 2.5rem;display:none;flex-direction:column;gap:.1rem;border-left:1px solid var(--line-gold)}
.mobile-menu.show{display:flex}
.mobile-menu.open{transform:none}
.mm-sec{border-bottom:1px solid var(--line-d)}
.mm-sec>a,.mm-acc{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark);background:none;border:none;cursor:pointer;padding:1.05rem .3rem;text-align:left}
.mm-acc .caret{width:10px;height:10px;transition:transform .25s}
.mm-acc .caret *{stroke:#fff;fill:none;stroke-width:2}
.mm-acc.open .caret{transform:rotate(180deg)}
.mm-panel{max-height:0;overflow:hidden;transition:max-height .3s ease}
.mm-panel a{display:block;padding:.55rem .8rem;font-size:.82rem;font-weight:400;color:var(--on-dark-dim)}
.mm-cta{margin-top:1.6rem;display:flex;flex-direction:column;gap:.8rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:auto;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;padding-top:72px}
.hero-photo{position:absolute;inset:0;z-index:0}
.hero-photo .cine{width:100%;height:100%}
.hero-veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(0,16,42,.72) 0%,rgba(0,18,46,.28) 32%,rgba(0,16,42,.5) 68%,rgba(0,12,32,.94) 100%),
  linear-gradient(90deg,rgba(0,14,38,.82) 0%,rgba(0,18,46,.3) 56%,transparent 100%)}
.hero-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 clamp(1.5rem,4.5vw,3.5rem) clamp(2.5rem,5vw,4rem);color:#fff}
.hero-copy{max-width:50rem}
.hero-eyewrap{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.9rem}
.red-rule{width:54px;height:2px;background:var(--red);flex:none}            /* RED #1 — decorative hero line */
.hero h1{font-size:clamp(2.9rem,6.4vw,5.6rem);color:#fff;letter-spacing:-.02em;margin-bottom:1.5rem;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero-sub{font-size:clamp(1.04rem,1.5vw,1.26rem);font-weight:300;line-height:1.6;color:var(--on-dark);max-width:40rem;margin-bottom:2.2rem}
.hero-sub strong{font-weight:500;color:#fff}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:2rem}
.hero-phone{font-size:.86rem;color:var(--on-dark-dim);display:flex;flex-wrap:wrap;gap:.25rem .7rem;align-items:center}
.hero-phone span{font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem}
.hero-phone a{color:#fff;font-weight:500;transition:color .3s}
.hero-phone a:hover{color:var(--gold-soft)}

/* search bar */
.searchbar{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.5rem,4.5vw,3.5rem)}
.searchbar-card{background:#fff;box-shadow:var(--shadow-d);transform:translateY(50%)}
.sb-top{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;padding:1.3rem 1.5rem .2rem}
.sb-title{font-family:var(--serif);font-size:1.3rem;color:var(--navy)}
.sb-sub{font-size:.82rem;color:var(--muted)}
.sb-grid{display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:stretch;padding:1rem 1.5rem 1.5rem;gap:0}
.sf{padding:0 1.1rem;border-right:1px solid var(--line-l)}
.sf:first-child{padding-left:0}
.sf label{display:block;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.45rem}
.sf select{width:100%;padding:.35rem 0;border:none;background:transparent;font-family:var(--sans);font-size:.92rem;font-weight:500;color:var(--ink);appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a2854f' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center}
.sf select:focus{outline:none;color:var(--navy)}
.btn-search{margin-left:1.3rem;background:var(--gold);color:var(--navy);border:none;font-family:var(--sans);font-weight:700;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;padding:0 2rem;cursor:pointer;transition:.35s;white-space:nowrap}
.btn-search:hover{background:var(--gold-soft)}
.sb-foot{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;padding:0 1.5rem 1.4rem}
.sb-or{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.sb-wa{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);transition:color .3s}
.sb-wa:hover{color:var(--navy)}
.sb-wa svg{width:15px;height:15px}.sb-wa svg *{fill:currentColor}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.sec{padding:clamp(4.5rem,9vw,7.5rem) 0}
.sec.paper{background:var(--paper);color:var(--ink)}
.sec.white{background:#fff;color:var(--ink)}
.sec.navy{background:var(--navy);color:#fff}
.sec-head{max-width:46rem;margin-bottom:3.4rem}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.sec-head .eye{display:block;margin-bottom:1.1rem}
.sec-tit{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.sec.navy .sec-tit{color:#fff}
.sec-tit em{font-style:italic;color:var(--gold-deep)}
.sec.navy .sec-tit em{color:var(--gold-soft)}
.sec-intro{font-family:var(--sans);font-size:1.02rem;font-weight:300;line-height:1.64;margin-top:1.05rem;max-width:36rem;color:var(--muted)}
.sec.navy .sec-intro{color:var(--on-dark)}
.sec-head.center .sec-intro{margin-left:auto;margin-right:auto}

/* ---------- FEATURED LISTINGS ---------- */
.listings{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.listing{background:#fff;border:1px solid var(--line-l);display:flex;flex-direction:column;transition:.3s ease;overflow:hidden}
.sec.paper .listing{background:#fff}
.listing:hover{box-shadow:var(--shadow);transform:translateY(-5px);border-color:var(--line-l2)}
.listing-media{position:relative;height:250px;overflow:hidden}
.listing-media .cine{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.listing:hover .listing-media .cine{transform:scale(1.06)}
.listing-badge{position:absolute;top:1rem;left:1rem;z-index:3;font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--gold);padding:.42rem .8rem}
.listing-badge.ghost{background:rgba(0,18,48,.6);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px)}
.listing-fav{position:absolute;top:1rem;right:1rem;z-index:3;width:34px;height:34px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}
.listing-fav svg{width:16px;height:16px}.listing-fav svg *{stroke:var(--navy);fill:none;stroke-width:1.7}
.listing-body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.listing-price{font-family:var(--serif);font-size:1.7rem;color:var(--navy);line-height:1}
.listing-price .usd{font-family:var(--sans);font-size:.68rem;font-weight:600;color:var(--muted-2);letter-spacing:.06em;margin-left:.4rem}
.listing-name{font-family:var(--serif);font-size:1.2rem;color:var(--ink);margin-top:.6rem}
.listing-loc{display:flex;align-items:center;gap:.4rem;font-size:.84rem;color:var(--muted);margin-top:.45rem}
.listing-loc svg{width:13px;height:13px;flex:none}.listing-loc svg *{stroke:var(--gold-deep);fill:none;stroke-width:1.7}
.listing-meta{display:flex;gap:1.3rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line-l);flex-wrap:wrap}
.lm{display:flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;color:var(--ink)}
.lm svg{width:16px;height:16px;flex:none;opacity:.7}.lm svg *{stroke:var(--navy);fill:none;stroke-width:1.6}
.lm .lab{color:var(--muted);font-weight:400}
.listing-cta{margin-top:1.4rem}
.listing-cta .btn{width:100%}

/* ---------- AREAS (photo-first) ---------- */
.areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.area{position:relative;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;color:#fff;transition:.3s}
.area .cine{position:absolute;inset:0;z-index:0;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.area:hover .cine{transform:scale(1.07)}
.area-grad{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,16,42,.9) 0%,rgba(0,20,52,.32) 52%,rgba(0,22,55,.06) 100%);transition:.3s}
.area:hover .area-grad{background:linear-gradient(0deg,rgba(0,16,42,.92) 0%,rgba(0,40,104,.5) 52%,rgba(0,40,104,.14) 100%)}
.area-body{position:relative;z-index:2;padding:1.6rem;width:100%}
.area-eye{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:.5rem}
.area-name{font-family:var(--serif);font-size:1.7rem;line-height:1}
.area-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.7rem}
.area-desc{font-size:.82rem;color:rgba(255,255,255,.78);font-weight:300}
.area-go{width:34px;height:34px;border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:.3s;flex:none}
.area:hover .area-go{background:var(--gold);border-color:var(--gold)}
.area-go svg{width:15px;height:15px}.area-go svg *{stroke:#fff;fill:none;stroke-width:1.8}
.area:hover .area-go svg *{stroke:var(--navy)}

/* ---------- TRUST BAR ---------- */
.trust{background:var(--navy-4)}
.trust-in{max-width:var(--maxw);margin:0 auto;padding:1.5rem clamp(1.5rem,4.5vw,3.5rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2.4rem}
.ti{display:inline-flex;align-items:center;gap:.7rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark)}
.ti-dot{width:4px;height:4px;background:var(--gold);transform:rotate(45deg);flex:none}

/* ---------- WHY US ---------- */
.why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.why-photo{position:relative;aspect-ratio:4/5;overflow:hidden}
.why-photo .cine{position:absolute;inset:0}
.why-photo .pin{position:absolute;left:1.4rem;bottom:1.4rem;z-index:3;background:rgba(0,18,48,.7);backdrop-filter:blur(6px);border:1px solid var(--line-gold);padding:1rem 1.3rem;color:#fff}
.why-photo .pin .t{font-family:var(--serif);font-size:1.3rem}
.why-photo .pin .s{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft);margin-top:.2rem}
.why-copy .sec-head{margin-bottom:2.2rem}
.why-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.wstat{background:var(--navy);padding:1.7rem 1.6rem}
.wstat .n{font-family:var(--serif);font-size:clamp(2.2rem,3.4vw,2.9rem);color:#fff;line-height:1}
.wstat .n em{font-style:normal;color:var(--gold);font-size:.6em}
.wstat .n.is-red{color:var(--red)}                                          /* RED #2 — credential highlight */
.wstat .l{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-dim);margin-top:.7rem}
.why-note{font-size:.78rem;color:var(--on-dark-dim);margin-top:1.4rem;display:flex;align-items:center;gap:.6rem}
.why-note::before{content:"";width:24px;height:1px;background:var(--gold)}

/* ---------- TESTIMONIALS ---------- */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.tst{background:#fff;border:1px solid var(--line-l);padding:2rem;display:flex;flex-direction:column}
.tst-stars{display:flex;gap:.22rem;margin-bottom:1.1rem}
.tst-stars svg{width:16px;height:16px}.tst-stars svg *{fill:var(--gold)}
.tst-q{font-family:var(--serif);font-size:1.14rem;line-height:1.42;color:var(--ink);flex:1;letter-spacing:-.01em}
.tst-by{display:flex;align-items:center;gap:.85rem;margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line-l)}
.tst-av{width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold-soft);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1rem;flex:none}
.tst-name{font-size:.9rem;font-weight:700;color:var(--navy)}
.tst-loc{font-size:.78rem;color:var(--muted);margin-top:.1rem}
.tst-note{text-align:center;font-size:.74rem;color:var(--muted-2);margin-top:1.8rem}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{position:relative;background:var(--navy);overflow:hidden}
.cta-photo{position:absolute;inset:0;z-index:0;opacity:.34}
.cta-photo .cine{width:100%;height:100%}
.cta-veil{position:absolute;inset:0;z-index:1;background:radial-gradient(110% 100% at 50% 28%,rgba(0,40,104,.42),rgba(0,12,32,.92))}
.cta-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(5rem,9vw,7.5rem) clamp(1.5rem,4.5vw,3.5rem);text-align:center}
.cta-in .eyewrap{display:flex;justify-content:center;align-items:center;gap:1.1rem;margin-bottom:1.7rem}
.cta-in h2{font-size:clamp(2.4rem,5.2vw,4.2rem);color:#fff;margin:0 auto 1.4rem;max-width:18ch;text-wrap:balance}
.cta-in h2 em{font-style:italic;color:var(--gold-soft)}
.cta-in>p{font-family:var(--sans);font-size:1.06rem;font-weight:300;color:var(--on-dark);max-width:44rem;margin:0 auto 2.6rem;line-height:1.64}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:3.8rem}
.cta-contacts{display:grid;grid-template-columns:repeat(4,1fr);max-width:62rem;margin:0 auto;border-top:1px solid var(--line-d)}
.cc{padding:2rem 1.2rem;border-right:1px solid var(--line-d)}
.cc:last-child{border-right:none}
.cc .lab{font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.cc a{font-family:var(--serif);font-size:1.16rem;color:#fff;transition:color .3s}
.cc a:hover{color:var(--gold-soft)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--navy-4);color:var(--on-dark-dim)}
.fi{max-width:var(--maxw);margin:0 auto;padding:clamp(3.5rem,7vw,5.5rem) clamp(1.5rem,4.5vw,3.5rem) 3.5rem;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:3rem}
.fb{font-family:var(--serif);font-size:1.6rem;color:#fff;margin-bottom:1rem}
.fb span{color:var(--gold)}
.ft{font-family:var(--sans);font-size:.88rem;font-weight:300;line-height:1.64;margin-bottom:1.5rem;max-width:30rem;color:var(--on-dark)}
.fb-badges{display:flex;flex-wrap:wrap;gap:.5rem}
.fb-b{font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft);border:1px solid var(--line-gold);padding:.42rem .7rem}
.fc h4{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:1.2rem}
.fc ul{list-style:none}
.fc li{margin-bottom:.72rem}
.fc a{font-family:var(--sans);font-size:.89rem;font-weight:300;color:var(--on-dark);transition:color .3s}
.fc a:hover{color:var(--gold-soft)}
.fbot{max-width:var(--maxw);margin:0 auto;padding:1.7rem clamp(1.5rem,4.5vw,3.5rem);border-top:1px solid var(--line-d);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.7rem;font-size:.76rem;font-weight:300;color:var(--on-dark-dim)}

/* floating WA (gold) */
.wa{position:fixed;right:1.5rem;bottom:1.5rem;z-index:90;width:56px;height:56px;border-radius:50%;background:var(--navy-2);border:1px solid var(--gold);color:var(--gold-soft);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-d);transition:.35s}
.wa svg{width:25px;height:25px}.wa svg *{fill:currentColor}
.wa:hover{background:var(--gold);color:var(--navy);transform:translateY(-3px)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.vis{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .searchbar-card{transform:translateY(40%)}
  .sb-grid{grid-template-columns:1fr 1fr;gap:1.2rem 0}
  .sf:nth-child(2){border-right:none}
  .btn-search{grid-column:1/-1;margin-left:0;padding:1.05rem;width:100%;margin-top:.4rem}
  .listings,.areas-grid,.tst-grid{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:1fr;gap:2.5rem}
  .why-photo{aspect-ratio:16/10;max-height:420px}
  .cta-contacts{grid-template-columns:1fr 1fr}
  .cc:nth-child(2){border-right:none}
  .cc:nth-child(1),.cc:nth-child(2){border-bottom:1px solid var(--line-d)}
  .fi{grid-template-columns:1fr 1fr;gap:2.2rem}
}
@media(max-width:1000px){
  .nav-menu,.nav-phone{display:none}
  .nav-toggle{display:flex}
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(0,8,28,.6);opacity:0;pointer-events:none;transition:opacity .4s;z-index:105}
  .nav-backdrop.show{opacity:1;pointer-events:auto}
}
@media(max-width:620px){
  .sb-grid{grid-template-columns:1fr}
  .sf{border-right:none;border-bottom:1px solid var(--line-l);padding:0 0 1rem;margin-bottom:1rem}
  .sf:first-child{padding-left:0}
  .listings,.areas-grid,.tst-grid{grid-template-columns:1fr}
  .why-stats{grid-template-columns:1fr 1fr}
  .cta-contacts{grid-template-columns:1fr}
  .cc{border-right:none;border-bottom:1px solid var(--line-d)}
  .cc:last-child{border-bottom:none}
  .fi{grid-template-columns:1fr;gap:2.2rem}
  .trust-in{justify-content:flex-start}
  .searchbar-card{transform:none;margin-top:1.5rem}
}

/* ---- Language toggle pill ---- */
.nav-lang {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--on-dark);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  padding: .38rem .72rem;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
  white-space: nowrap;
}
.nav-lang:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}

/* ============================================================
   PROPERTIES + LISTING PAGE STYLES
   ============================================================ */

/* ---- CSS vars bridge (premium design tokens) ---- */
:root {
  --pr-navy:#041E42; --pr-navy-2:#031629; --pr-navy-3:#020f1c; --pr-navy-4:#010a13;
  --pr-paper:#D9D6D0; --pr-paper-2:#ccc9c2;
  --pr-ink:#19202e; --pr-muted:#5a6475; --pr-muted-2:#828c9d;
  --pr-red:#76232F; --pr-red-deep:#5c1a23;
  --pr-gold:#b8860b; --pr-gold-2:#c9a84c; --pr-gold-soft:#d9c69b; --pr-gold-deep:#a2854f;
  --pr-mint:#4fc3a1;
  --pr-on-dark:rgba(255,255,255,.74); --pr-on-dark-dim:rgba(255,255,255,.5);
  --pr-line-d:rgba(255,255,255,.13); --pr-line-gold:rgba(194,162,106,.42);
  --pr-line-l:#e8e3d7; --pr-line-l2:#ded7c8;
  --pr-serif:'DM Serif Display',Georgia,serif;
  --pr-sans:'Inter',-apple-system,sans-serif;
  --pr-maxw:1240px;
  --pr-shadow:0 30px 70px -34px rgba(0,12,40,.30);
  --pr-shadow-d:0 40px 90px -45px rgba(0,6,24,.6);
  --off:#f8f6f2; --gold2:#c9a84c;
}

/* ---- Page hero ---- */
.page-hero {
  background: var(--pr-navy);
  color: #fff;
  padding: clamp(3.5rem,7vw,5.5rem) clamp(1.25rem,4.5vw,3rem) clamp(3rem,6vw,4.5rem);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 20% 100%, rgba(194,162,106,.08), transparent 60%);
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; max-width: var(--pr-maxw); margin: 0 auto; }
.page-hero .stag {
  display: inline-flex; align-items: center; gap: .85rem;
  font-family: var(--pr-sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--pr-gold-soft); margin-bottom: 1.2rem;
}
.page-hero .stag::before { content: ""; width: 46px; height: 2px; background: var(--pr-red); }
.page-hero h1 {
  font-family: var(--pr-serif); font-weight: 400;
  font-size: clamp(2.6rem,5.6vw,4.4rem); line-height: 1.04;
  letter-spacing: -.015em; color: #fff; margin: 0;
}
.page-hero h1 em { font-style: italic; color: var(--pr-gold-soft); }
.page-hero p {
  font-family: var(--pr-sans); font-size: clamp(1rem,1.4vw,1.18rem);
  font-weight: 300; color: var(--pr-on-dark); max-width: 42rem; margin: 1.1rem 0 0; line-height: 1.6;
}

/* ---- Section typography ---- */
.stag { display:inline-flex;align-items:center;gap:.8rem;font-family:var(--pr-sans);font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--pr-gold-deep);margin-bottom:1rem }
.stit { font-family:var(--pr-serif);font-weight:400;font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.06;letter-spacing:-.02em;color:var(--pr-navy);margin:0 }
.stit em { font-style:italic;color:var(--pr-gold-deep) }
.sintro { font-family:var(--pr-sans);font-size:1.02rem;font-weight:300;color:var(--pr-muted);margin:.9rem 0 0;max-width:38rem;line-height:1.64 }

/* ---- Lifestyle cards ---- */
.life-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.6rem }
.life-card { background:#fff;border:1px solid var(--pr-line-l);border-radius:14px;padding:1.9rem 1.7rem;display:flex;flex-direction:column;transition:.28s ease;text-decoration:none;color:var(--pr-ink) }
.life-card:hover { box-shadow:var(--pr-shadow);transform:translateY(-4px);border-color:var(--pr-line-l2) }
.life-card.land-card { border-left:3px solid var(--pr-gold-2) }
.life-ico { width:46px;height:46px;border-radius:11px;background:var(--pr-navy);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem }
.land-card .life-ico { background:var(--pr-gold-2) }
.life-ico svg { width:22px;height:22px }
.life-ico svg * { stroke:#fff;fill:none;stroke-width:1.7 }
.land-card .life-ico svg * { stroke:var(--pr-navy) }
.life-card h3 { font-family:var(--pr-serif);font-weight:400;font-size:1.4rem;color:var(--pr-navy);margin:0 0 .6rem;line-height:1.12 }
.life-card p { font-family:var(--pr-sans);font-size:.92rem;font-weight:300;color:var(--pr-muted);line-height:1.6;margin:0;flex:1 }
.life-count { margin-top:1.4rem;font-family:var(--pr-sans);font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--pr-gold-deep);display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;transition:gap .25s }
.life-card:hover .life-count { gap:.7rem }

/* ---- Dev section (dark grid) ---- */
.dev-section { background:var(--pr-navy-3);padding:clamp(4rem,8vw,6rem) 0 }
.listings-layout { display:flex;gap:2rem;align-items:flex-start;margin-top:2.6rem }
.filter-mobile-toggle { display:none;width:100%;background:var(--pr-navy-2);border:1px solid var(--pr-line-d);color:var(--pr-on-dark);font-family:var(--pr-sans);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:1rem 1.2rem;cursor:pointer;text-align:left;align-items:center;justify-content:space-between;margin-bottom:1rem }
.filter-panel { min-width:236px;max-width:236px;background:var(--pr-navy-2);border:1px solid var(--pr-line-d);border-radius:14px;padding:1.5rem;flex-shrink:0;position:sticky;top:1.5rem }
.filter-hdr { display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;padding-bottom:1.1rem;border-bottom:1px solid var(--pr-line-d) }
.filter-hdr-title { font-family:var(--pr-sans);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--pr-gold-soft) }
.filter-clear-btn { display:none;background:none;border:none;color:var(--pr-mint);font-size:.7rem;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;padding:0;transition:color .2s }
.filter-clear-btn:hover { color:#fff }
.filter-group { margin-bottom:1.2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--pr-line-d) }
.filter-group:last-child { border-bottom:none;margin-bottom:0;padding-bottom:0 }
.filter-group-lbl { font-family:var(--pr-sans);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--pr-on-dark-dim);margin-bottom:.7rem }
.filter-checks { display:flex;flex-direction:column;gap:.45rem;max-height:200px;overflow-y:auto }
.filter-chk { display:flex;align-items:center;gap:.55rem;font-family:var(--pr-sans);font-size:.84rem;color:var(--pr-on-dark);cursor:pointer;line-height:1.3 }
.filter-chk input { accent-color:var(--pr-mint);cursor:pointer;margin:0;width:15px;height:15px;flex-shrink:0 }
.filter-chk:hover { color:#fff }
.filter-price-input { width:100%;padding:.6rem .75rem;background:rgba(255,255,255,.06);border:1px solid var(--pr-line-d);border-radius:8px;color:#fff;font-size:.88rem;font-family:var(--pr-sans);outline:none;transition:border-color .2s }
.filter-price-input::placeholder { color:rgba(255,255,255,.35) }
.filter-price-input:focus { border-color:var(--pr-gold-2) }
.filter-result-count { font-family:var(--pr-sans);font-size:.74rem;color:var(--pr-on-dark-dim);margin-top:.9rem;font-style:italic }
.dev-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.4rem;flex:1;min-width:0 }
.dev-card { position:relative;background:var(--pr-navy-2);border:1px solid var(--pr-line-d);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:.28s ease }
.dev-card:hover { transform:translateY(-5px);box-shadow:var(--pr-shadow-d);border-color:var(--pr-line-gold) }
.dev-card img { width:100%;height:210px;object-fit:cover;display:block }
.dev-badge { position:absolute;top:1rem;left:1rem;z-index:2;font-family:var(--pr-sans);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.42rem .8rem;border-radius:50px;color:#fff;background:rgba(0,18,48,.62);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px) }
.dev-badge.land { background:var(--pr-gold-2);border-color:var(--pr-gold-2);color:var(--pr-navy) }
.dev-body { padding:1.5rem;display:flex;flex-direction:column;flex:1 }
.dev-name { font-family:var(--pr-serif);font-weight:400;font-size:1.32rem;color:#fff;line-height:1.12;margin-bottom:.4rem }
.dev-sub { font-family:var(--pr-sans);font-size:.82rem;color:var(--pr-on-dark-dim);letter-spacing:.02em;margin-bottom:.7rem;display:flex;align-items:center;gap:.4rem }
.dev-price { font-family:var(--pr-serif);font-size:1.5rem;color:var(--pr-gold-2);line-height:1;margin-bottom:.85rem }
.dev-feats { list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-direction:column;gap:.42rem }
.dev-feats li { position:relative;padding-left:1.5rem;font-family:var(--pr-sans);font-size:.83rem;font-weight:300;color:var(--pr-on-dark);line-height:1.35 }
.dev-feats li::before { content:"";position:absolute;left:0;top:.28rem;width:13px;height:8px;border-left:2px solid var(--pr-mint);border-bottom:2px solid var(--pr-mint);transform:rotate(-45deg) }
.dev-cta { margin-top:auto;font-family:var(--pr-sans);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pr-gold-soft);border:1px solid var(--pr-gold-2);padding:.85rem 1rem;border-radius:9px;transition:.28s ease;text-align:center }
.dev-card:hover .dev-cta { background:var(--pr-gold-2);color:var(--pr-navy) }
.props-empty { text-align:center;color:var(--pr-on-dark-dim);padding:3rem 0;font-family:var(--pr-sans);font-size:.9rem;grid-column:1/-1 }
.btn-teal { display:inline-flex;align-items:center;justify-content:center;font-family:var(--pr-sans);font-weight:600;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--pr-navy);background:var(--pr-gold-2);border:1px solid var(--pr-gold-2);padding:1rem 2rem;border-radius:10px;text-decoration:none;transition:.3s }
.btn-teal:hover { background:var(--pr-gold-soft);transform:translateY(-2px) }

/* ---- CTA Final ---- */
.cta-final { position:relative;background:var(--pr-navy);color:#fff;overflow:hidden;text-align:center;padding:clamp(4rem,8vw,6.5rem) clamp(1.25rem,4.5vw,3rem) }
.cta-final::before { content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 100%,rgba(194,162,106,.07),transparent 65%);pointer-events:none }
.cta-final > * { position:relative;z-index:1 }
.cta-final h2 { font-family:var(--pr-serif);font-weight:400;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.06;color:#fff;margin:0 auto 1.2rem;max-width:20ch }
.cta-final h2 em { font-style:italic;color:var(--pr-gold-soft) }
.cta-final p { font-family:var(--pr-sans);font-size:1.04rem;font-weight:300;color:var(--pr-on-dark);max-width:44rem;margin:0 auto 2.3rem;line-height:1.62 }
.cta-btns { display:flex;gap:1rem;justify-content:center;flex-wrap:wrap }
.btn-white { display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--pr-sans);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;padding:1.1rem 2.1rem;border-radius:10px;background:var(--pr-red);color:#fff;border:1px solid var(--pr-red);transition:.32s;text-decoration:none }
.btn-white:hover { background:var(--pr-red-deep);border-color:var(--pr-red-deep);transform:translateY(-2px) }
.btn-ow { display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--pr-sans);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;padding:1.1rem 2.1rem;border-radius:10px;background:transparent;color:var(--pr-gold-soft);border:1px solid var(--pr-gold-2);transition:.32s;text-decoration:none }
.btn-ow:hover { background:var(--pr-gold-2);color:var(--pr-navy) }

/* ---- Listing detail ---- */
.listing-gallery { margin-bottom:clamp(2rem,4vw,3rem) }
.gallery-main { position:relative;height:clamp(360px,58vh,640px);background:#02152f;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:var(--pr-shadow) }
.gallery-main-img { max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block }
.gallery-main-img.img-fit { width:100%;height:100%;object-fit:cover }
.gallery-thumbs { display:flex;gap:.7rem;margin-top:.85rem;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:thin }
.gallery-thumb { width:104px;height:74px;flex:none;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent;opacity:.62;transition:.28s }
.gallery-thumb:hover { opacity:.9 }
.gallery-thumb.active { opacity:1;border-color:var(--pr-navy);transform:scale(1.04) }
.listing-header { position:relative;margin-bottom:clamp(2rem,4vw,3rem);padding-bottom:2rem;border-bottom:1px solid var(--pr-line-l) }
.listing-section-pill { display:inline-flex;align-items:center;gap:.85rem;font-family:var(--pr-sans);font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--pr-gold-deep) }
.listing-section-pill::before { content:"";width:46px;height:2px;background:var(--pr-red) }
.listing-title { font-family:var(--pr-serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.04;letter-spacing:-.015em;color:var(--pr-navy);margin:1.1rem 0 0 }
.listing-features { font-family:var(--pr-sans);font-size:1.04rem;font-weight:300;color:var(--pr-muted);margin:1rem 0 0;max-width:46rem;line-height:1.6 }
.listing-prices { display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem;padding-left:1.1rem;position:relative }
.listing-prices::before { content:"";position:absolute;left:0;top:.15rem;bottom:.15rem;width:3px;background:var(--pr-red);border-radius:2px }
.prop-price-pill { display:inline-flex;align-items:center;font-family:var(--pr-sans);font-size:1rem;font-weight:700;color:#5a4407;background:linear-gradient(180deg,#f3e4bf,#e7cf95);border:1px solid #d8bd7e;padding:.62rem 1.15rem;border-radius:50px;box-shadow:0 1px 2px rgba(120,90,20,.12) }
.prop-price-pill:first-child { color:#3f2f05;background:linear-gradient(180deg,#e8c879,#cda33f);border-color:#c2962f }
.listing-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start }
.listing-card { background:#fff;border:1px solid var(--pr-line-l);border-radius:14px;padding:1.7rem;transition:.28s ease }
.listing-card:hover { box-shadow:var(--pr-shadow);border-color:var(--pr-line-l2) }
.listing-card--wide { grid-column:1 / -1 }
.listing-card-icon { width:44px;height:44px;border-radius:11px;background:var(--pr-navy);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem }
.listing-card-icon svg { width:21px;height:21px }
.listing-card-icon svg * { stroke:#fff;fill:none;stroke-width:1.7 }
.listing-card h4 { font-family:var(--pr-sans);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pr-gold-deep);margin:0 0 .7rem }
.listing-card-value { font-family:var(--pr-serif);font-size:1.5rem;color:var(--pr-navy);line-height:1.1;margin:0 }
.listing-tags { display:flex;flex-wrap:wrap;gap:.5rem }
.prop-tag { display:inline-flex;font-family:var(--pr-sans);font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--pr-navy);background:var(--pr-paper);border:1px solid var(--pr-line-l2);padding:.45rem .85rem;border-radius:50px }
.listing-desc { font-family:var(--pr-sans);font-size:.98rem;font-weight:300;line-height:1.72;color:var(--pr-ink) }
.listing-desc p { margin:0 0 1rem }
.listing-desc p:last-child { margin-bottom:0 }
.listing-desc h2,.listing-desc h3 { font-family:var(--pr-serif);font-weight:400;color:var(--pr-navy);margin:1.4rem 0 .7rem;line-height:1.15 }
.listing-desc ul,.listing-desc ol { margin:0 0 1rem;padding-left:1.3rem }
.listing-desc li { margin-bottom:.4rem }
.listing-contact { display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.2rem }
.arm-cta { display:inline-flex;align-items:center;gap:.55rem;font-family:var(--pr-sans);font-size:.86rem;font-weight:600;letter-spacing:.01em;padding:.85rem 1.5rem;border-radius:10px;transition:.28s;text-decoration:none }
.arm-cta-mail { background:var(--pr-navy);color:#fff;border:1px solid var(--pr-navy) }
.arm-cta-mail:hover { background:var(--pr-navy-2);transform:translateY(-2px) }
.arm-cta-wa { background:transparent;color:var(--pr-gold-deep);border:1px solid var(--pr-gold-2) }
.arm-cta-wa:hover { background:var(--pr-gold-2);color:var(--pr-navy) }
.listing-breadcrumb { font-family:var(--pr-sans);font-size:.85rem }
.listing-breadcrumb a { color:var(--pr-gold-deep);text-decoration:none }
.listing-breadcrumb a:hover { text-decoration:underline }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .life-grid { grid-template-columns:repeat(2,1fr) }
  .listing-cards { grid-template-columns:1fr }
  .listing-card--wide { grid-column:1 }
  .listings-layout { flex-direction:column }
  .filter-panel { min-width:unset;max-width:unset;width:100%;position:static;display:none }
  .filter-panel.open { display:block }
  .filter-mobile-toggle { display:flex }
}
@media (max-width: 600px) {
  .life-grid { grid-template-columns:1fr }
  .listing-prices { flex-direction:column }
  .cta-btns { flex-direction:column;align-items:center }
}

/* ============================================================
   COLOR CONSISTENCY FIXES + LISTING NAV OVERLAP FIX
   ============================================================ */

/* Ensure all section backgrounds use paper (not inherit navy from body) */
.sec.paper,
section[style*="background:var(--off)"],
section[style*="background:var(--pr-paper)"] {
  background: var(--paper) !important;
  color: var(--ink);
}

/* Listing detail: push content below sticky nav */
.listing-detail {
  padding-top: clamp(3rem,5vw,4rem);
  background: var(--white);
  min-height: 100vh;
}

/* Listing header section pill on white bg needs correct color */
.listing-section-pill {
  color: var(--gold-deep);
}

/* Page hero consistent background across all pages */
.page-hero {
  background: var(--navy) !important;
}

/* Dev section consistent with global navy */
.dev-section {
  background: var(--navy-3) !important;
}

/* Life grid section bg */
.life-grid-section {
  background: var(--paper);
}

/* Ensure listings/properties section uses paper not lighter blue */
section[style*="background:var(--off)"] {
  background: var(--paper) !important;
}

/* ============================================================
   HERO STATS FIX + SIMPLIFIED SEARCHBAR
   ============================================================ */

/* Hero stats — horizontal row */
.hero-stats {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(255,255,255,.12);
  flex-wrap: wrap;
}
.hstat { display: flex; flex-direction: column; gap: .2rem; }
.hstat-num {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}
.hstat-num em {
  font-style: normal;
  font-size: .65em;
  color: var(--gold);
}
.hstat-num.is-red em,
.is-red { color: var(--red) !important; }
.hstat-label {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
}

/* ---- Simplified search bar ---- */
.searchbar {
  position: relative;
  z-index: 10;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1.5rem,4.5vw,3.5rem);
}
.searchbar-card {
  background: #fff;
  box-shadow: 0 24px 60px -20px rgba(0,10,30,.35);
  transform: translateY(-50%);
  border-radius: 4px;
}
.sb-top {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  flex-wrap: wrap;
  padding: 1.4rem 1.6rem .3rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.sb-title {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
  color: var(--navy);
  white-space: nowrap;
}
.sb-sub {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--muted);
  font-weight: 300;
}
.sb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: stretch;
  padding: 1rem 1.6rem 1.3rem;
  gap: 0;
}
.sb-grid .sf {
  border-right: 1px solid rgba(0,0,0,.08);
  padding: 0 1rem;
}
.sb-grid .sf:first-child { padding-left: 0; }
.sb-grid label {
  display: block;
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .38rem;
}
.sb-grid select {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  padding: .2rem 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a2854f' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .3rem center;
  padding-right: 1.4rem;
}
.btn-search {
  margin-left: 1.2rem;
  background: var(--gold);
  color: var(--navy);
  border: none;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 0 1.8rem;
  cursor: pointer;
  transition: .3s;
  white-space: nowrap;
  border-radius: 2px;
}
.btn-search:hover { background: var(--gold-soft); }
.sb-foot {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: .8rem 1.6rem 1.2rem;
}
.sb-or {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .06em;
}
.sb-wa {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  transition: color .2s;
}
.sb-wa:hover { color: var(--navy); }
.sb-wa svg { width: 16px; height: 16px; fill: currentColor; }

/* Responsive searchbar */
@media (max-width: 900px) {
  .searchbar-card { transform: translateY(-30%); }
  .sb-grid { grid-template-columns: 1fr 1fr; gap: 1rem 0; }
  .btn-search { grid-column: 1/-1; margin-left: 0; padding: 1rem; width: 100%; margin-top: .4rem; }
  .sb-grid .sf { border-right: none; border-bottom: 1px solid rgba(0,0,0,.06); padding: .5rem 0; }
}
@media (max-width: 600px) {
  .searchbar-card { transform: none; margin-top: 1.5rem; border-radius: 0; }
  .sb-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO SPLIT LAYOUT + ACCORDION SEARCH WIDGET
   ============================================================ */

/* Hero: reduce H1 so full hero fits in viewport */
.hero-h1 {
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  line-height: 1.08 !important;
}

/* Split layout: copy left, widget right */
.hero--split .hero-in { align-items: flex-start; }
.hero-in--split {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 3rem;
  align-items: start;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2rem,3vw,2.5rem) clamp(1.5rem,4.5vw,3.5rem) clamp(2rem,4vw,3rem);
}

/* ── Accordion widget ── */
.hero-widget {
  background: #041E42;
  border: 1px solid rgba(194,162,106,.25);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: flex-start;
  width: 360px;
}

.hw-eye {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: .25rem;
  line-height: 1.1;
}

.hw-sub {
  font-family: var(--sans);
  font-size: .75rem;
  color: rgba(255,255,255,.42);
  letter-spacing: .04em;
  margin-bottom: 1.4rem;
}

.hw-accordion {
  border-top: 1px solid rgba(194,162,106,.2);
}

.hw-item {
  border-bottom: 1px solid rgba(194,162,106,.2);
  cursor: pointer;
}

.hw-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem .25rem;
  transition: background .2s;
}
.hw-item:hover .hw-row { background: rgba(194,162,106,.04); }

.hw-lbl {
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.hw-val-wrap {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.hw-val {
  font-family: var(--sans);
  font-size: .88rem;
  color: rgba(255,255,255,.65);
  transition: color .2s;
}
.hw-item.open .hw-val { color: #fff; }

.hw-plus {
  font-size: 1.1rem;
  color: var(--gold);
  line-height: 1;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
  display: inline-block;
  font-weight: 300;
}
.hw-item.open .hw-plus { transform: rotate(45deg); }

.hw-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.2,.7,.3,1);
}
.hw-item.open .hw-panel { max-height: 320px; }

.hw-opt {
  padding: .75rem .6rem;
  font-family: var(--sans);
  font-size: .88rem;
  color: rgba(255,255,255,.7);
  transition: background .18s, color .18s;
  cursor: pointer;
}
.hw-opt:hover {
  background: var(--gold);
  color: #041E42;
}

.hw-btn {
  margin-top: 1.4rem;
  width: 100%;
  background: var(--red);
  color: #fff;
  border: none;
  padding: .95rem 1rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s;
}
.hw-btn:hover { background: var(--red-deep); }

.hw-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: .9rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(194,162,106,.35);
  color: var(--gold);
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  transition: background .22s, border-color .22s, color .22s;
}
.hw-wa:hover {
  background: rgba(194,162,106,.1);
  border-color: var(--gold);
  color: #fff;
}
.hw-wa svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Remove old standalone searchbar (now inside hero) */
.searchbar { display: none; }

/* Responsive */
@media (max-width: 960px) {
  .hero-in--split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hero-widget { width: 100%; }
  .hero-h1 { font-size: clamp(2rem, 5.5vw, 2.8rem) !important; }
}

/* ── Trust bar — infinite marquee ── */
.trust-marquee {
  background: var(--navy-3);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  padding: .75rem 0;
}
.trust-track {
  display: flex;
  width: max-content;
  animation: trustScroll 28s linear infinite;
}

.trust-slide {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 3rem;
  white-space: nowrap;
}
.trust-slide span:not(.ti-dot) {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.ti-dot {
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
@keyframes trustScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* ============================================================
   PROPERTY SLIDER
   ============================================================ */
.prop-slider-wrap {
  position: relative;
  overflow: hidden;
  padding: 2rem 0 .5rem;
}
.prop-slider {
  display: flex;
  gap: 24px;
  transition: transform .55s cubic-bezier(.25,.1,.25,1);
  padding: 0 clamp(1.5rem,4.5vw,3.5rem);
  cursor: grab;
}
.prop-slider:active { cursor: grabbing; }

.ps-card {
  min-width: calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
  background: #fff;
  border: 0.5px solid var(--pr-line-l);
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
  transition: transform .28s ease, box-shadow .28s ease;
}
.ps-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.ps-img {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--navy-2);
}
.ps-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.ps-card:hover .ps-img img { transform: scale(1.04); }

.ps-badge {
  position: absolute;
  top: .8rem; left: .8rem;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .7rem;
}

.ps-body { padding: 1.2rem 1.3rem 1.4rem; }

.ps-price {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--navy);
  line-height: 1;
  margin-bottom: .4rem;
}
.ps-price span { font-family: var(--sans); font-size: .65rem; font-weight: 700; color: var(--muted); letter-spacing: .1em; margin-left: .3rem; }

.ps-name {
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .35rem;
  line-height: 1.3;
}

.ps-loc {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: .8rem;
}
.ps-loc svg { width: 12px; height: 12px; fill: none; stroke: var(--gold-deep); stroke-width: 2; flex-shrink: 0; }

.ps-cta {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border: 1px solid var(--gold);
  padding: .6rem 1rem;
  text-align: center;
  transition: background .22s, color .22s;
}
.ps-card:hover .ps-cta { background: var(--gold); color: var(--navy); }

/* Arrows */
.ps-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  background: #fff;
  border: 1px solid var(--pr-line-l);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .22s, border-color .22s;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
}
.ps-arrow:hover { background: var(--navy); border-color: var(--navy); }
.ps-arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--navy); stroke-width: 2; }
.ps-arrow:hover svg { stroke: #fff; }
.ps-prev { left: .5rem; }
.ps-next { right: .5rem; }

/* Dots */
.ps-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  padding: 1.2rem 0 .5rem;
}
.ps-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pr-line-l2);
  border: none; cursor: pointer;
  transition: background .22s, transform .22s;
  padding: 0;
}
.ps-dot.active { background: var(--gold); transform: scale(1.3); }

/* Responsive */
@media (max-width: 960px) {
  .ps-card { min-width: calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width: 600px) {
  .ps-card { min-width: calc(85% - 12px); max-width: calc(85% - 12px); }
  .ps-arrow { display: none; }
}

/* ============================================================
   FLOATING SHOWCASE SLIDER
   ============================================================ */
.showcase-section {
  background: var(--navy-3);
  padding: clamp(3rem,6vw,5rem) 0;
  overflow: hidden;
}
.showcase-section .sec-head { color: #fff; }
.showcase-section .sec-tit  { color: #fff; }
.showcase-section .eye      { color: var(--gold); }
.showcase-section .btn-goldline { color: var(--gold-soft); border-color: rgba(194,162,106,.4); }
.showcase-section .btn-goldline:hover { background: var(--gold); color: var(--navy); }

/* Stage */
.sc-stage {
  position: relative;
  height: clamp(380px, 56vh, 600px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  margin: 0 0 2rem;
}

/* Track */
.sc-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cards */
.sc-card {
  position: absolute;
  cursor: pointer;
  transition: all .55s cubic-bezier(.25,.1,.25,1);
}
.sc-img-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(194,162,106,.15);
}
.sc-img-wrap img, .sc-img-wrap > div {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.sc-card:hover .sc-img-wrap img { transform: scale(1.04); }

/* Active card */
.sc-card.is-active {
  width: clamp(280px,40vw,520px);
  z-index: 10;
  opacity: 1;
  transform: translateX(0) scale(1);
  border-bottom: 2px solid var(--gold);
}
.sc-card.is-active .sc-img-wrap {
  height: clamp(340px,52vh,560px);
  box-shadow: 0 24px 60px -15px rgba(194,162,106,.15);
}

/* Prev card (left) */
.sc-card.is-prev {
  width: clamp(160px,22vw,300px);
  z-index: 5;
  opacity: .35;
  transform: translateX(clamp(-280px,-32vw,-200px)) scale(.88);
  filter: grayscale(30%);
}
.sc-card.is-prev .sc-img-wrap { height: clamp(260px,40vh,420px); }

/* Next card (right) */
.sc-card.is-next {
  width: clamp(160px,22vw,300px);
  z-index: 5;
  opacity: .35;
  transform: translateX(clamp(200px,32vw,280px)) scale(.88);
  filter: grayscale(30%);
}
.sc-card.is-next .sc-img-wrap { height: clamp(260px,40vh,420px); }

/* Far cards — hidden */
.sc-card.is-far {
  opacity: 0;
  pointer-events: none;
  transform: translateX(0) scale(.7);
  z-index: 1;
}

/* Available badge */
.sc-avail {
  position: absolute;
  top: .9rem; right: .9rem;
  background: rgba(4,30,66,.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(194,162,106,.35);
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  padding: .35rem .75rem;
}

/* Arrows */
.sc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gold);
  padding: .5rem;
  transition: color .22s, transform .22s;
}
.sc-arrow svg {
  width: 28px; height: 28px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
.sc-prev { left: clamp(1rem,4vw,3rem); }
.sc-prev:hover { transform: translateY(-50%) translateX(-4px); color: #fff; }
.sc-next { right: clamp(1rem,4vw,3rem); }
.sc-next:hover { transform: translateY(-50%) translateX(4px); color: #fff; }

/* Info panel */
.sc-info {
  position: relative;
  text-align: center;
  padding: 1.4rem 1rem .5rem;
  min-height: 90px;
}
.sc-info-item {
  position: absolute;
  left: 0; right: 0;
  top: 1.4rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.sc-info-item.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
  top: auto;
}
.sc-name {
  font-family: var(--serif);
  font-size: clamp(1.4rem,2.6vw,2rem);
  font-weight: 400;
  color: #fff;
  margin-bottom: .5rem;
  line-height: 1.1;
}
.sc-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem .8rem;
  font-family: var(--sans);
  font-size: .84rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 1rem;
}
.sc-dot {
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.sc-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(194,162,106,.3);
  padding-bottom: .25rem;
  text-decoration: none;
  transition: color .22s, border-color .22s;
}
.sc-link:hover { color: #fff; border-color: rgba(255,255,255,.5); }

/* Indicator lines (like Stitch) */
.sc-indicators {
  display: flex;
  justify-content: center;
  gap: .75rem;
  padding: 1.2rem 0 0;
}
.sc-ind {
  width: 36px; height: 2px;
  background: rgba(194,162,106,.25);
  border: none; cursor: pointer;
  padding: 0;
  transition: background .3s, width .3s, box-shadow .3s;
}
.sc-ind.active {
  width: 52px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(194,162,106,.4);
}

/* Mobile */
@media (max-width: 700px) {
  .sc-card.is-prev, .sc-card.is-next { display: none; }
  .sc-card.is-active { width: 82vw; }
  .sc-arrow { display: none; }
}

/* ============================================================
   STRIP SLIDER — center always open, image fixed width
   ============================================================ */
.strip-section {
  background: var(--navy-3);
  padding: clamp(3rem,6vw,5rem) 0 2rem;
}
.strip-section .sec-head { color: #fff; }
.strip-section .sec-tit  { color: #fff; }
.strip-section .eye      { color: var(--gold); }
.strip-section .btn-goldline { color: var(--gold-soft); border-color: rgba(194,162,106,.4); }
.strip-section .btn-goldline:hover { background: var(--gold); color: var(--navy); }

.strip-outer {
  position: relative;
  padding: 1.5rem 0;
  overflow: hidden;
}

/* Coverflow stage — cards absolutely centered → simétrico siempre */
.strip-stage {
  position: relative;
  height: clamp(300px, 46vh, 460px);
}

/* ── Card (footprint fijo; el JS lo desplaza/escala por offset) ── */
.strip-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(190px, 23vw, 300px);
  height: 94%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid transparent;
  opacity: 0;
  pointer-events: none;
  transition: transform .6s cubic-bezier(.16,1,.3,1),
              opacity .5s ease, filter .5s ease,
              box-shadow .4s ease, border-color .3s ease;
  will-change: transform, opacity, filter;
}

.strip-img { position: absolute; inset: 0; }
.strip-img img, .strip-img > div {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Active: marco dorado + sombra */
.strip-card.is-active {
  border-color: rgba(194,162,106,.4);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.85);
}

/* Info — overlay SOLO en la activa (no cambia el footprint) */
.strip-info {
  position: absolute;
  inset: 0 0 0 auto;
  width: 60%;
  padding: 1.5rem 1.4rem;
  background: linear-gradient(90deg, transparent 0%, rgba(4,30,66,.55) 24%, rgba(4,30,66,.96) 60%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease .12s;
}
.strip-card.is-active .strip-info { opacity: 1; pointer-events: auto; }

/* Info content */
.strip-loc {
  font-family: var(--sans); font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  display: block; white-space: nowrap;
}
.strip-name {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 400;
  color: #fff; line-height: 1.2; white-space: normal;
}
.strip-feat {
  font-family: var(--sans); font-size: .74rem; color: rgba(255,255,255,.45);
  line-height: 1.5; font-weight: 300; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.strip-price {
  font-family: var(--serif); font-size: 1rem; color: var(--gold-soft);
}
.strip-link {
  display: inline-block; font-family: var(--sans); font-size: .64rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid rgba(194,162,106,.3);
  padding-bottom: .2rem; text-decoration: none; white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.strip-link:hover { color: #fff; border-color: rgba(255,255,255,.5); }

/* Arrows */
.strip-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(4,30,66,.8); border: 1px solid rgba(194,162,106,.25);
  color: var(--gold); width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10;
  transition: background .22s, color .22s;
}
.strip-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.strip-arrow:hover { background: var(--gold); color: var(--navy); }
.strip-prev { left: .5rem; }
.strip-next { right: .5rem; }

/* Footer */
.strip-footer {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(194,162,106,.15);
  padding-top: 1.2rem; margin-top: 1.8rem;
}
.strip-counter {
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; color: rgba(255,255,255,.4);
}
.strip-explore {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; transition: color .2s;
}
.strip-explore:hover { color: #fff; }

/* Responsive (el JS recalcula cuántas caben por lado en cada resize) */
@media (max-width: 960px) {
  .strip-card { width: clamp(170px, 40vw, 260px); }
  .strip-info { width: 66%; padding: 1.2rem 1rem; }
}
@media (max-width: 600px) {
  .strip-stage { height: clamp(280px, 52vh, 380px); }
  .strip-card { width: min(74vw, 300px); }
  .strip-info { width: 72%; padding: 1.1rem .95rem; }
  .strip-name { font-size: .95rem; }
  .strip-arrow { width: 34px; height: 34px; }
}

/* ============================================================
   SUBPAGE COMPONENTS — land-build · below-market · why-us · areas · contact · about
   Built on the base :root tokens (navy/gold/red/serif/sans), consistent with home.
   Red kept to its intentional minimum — marks use navy/gold, never red.
   ============================================================ */

/* ---- Narrow wrap + prose ---- */
.wrap--narrow { max-width: 880px; }
.prose p { font-size: 1.02rem; font-weight: 300; line-height: 1.85; color: var(--muted); margin-bottom: 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose .lede { font-size: 1.14rem; color: var(--ink); font-weight: 400; }
.prose strong { color: var(--navy); font-weight: 600; }
.prose em { font-style: italic; }
.prose h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--navy); margin: 1.8rem 0 .8rem; line-height: 1.15; }
.prose .btn { margin-top: 1.2rem; }
.prose .prose-lead { font-family: var(--serif); font-size: 1.24rem; color: var(--navy); font-weight: 400; line-height: 1.4; }
.prose .prose-strong { color: var(--navy); font-weight: 500; }
.prose .prose-sign { margin-top: 1.4rem; padding-top: 1.25rem; border-top: 1px solid var(--line-l); font-weight: 600; color: var(--navy); }
.prose .prose-sign span { display: block; font-weight: 400; color: var(--muted); font-size: .9rem; margin-top: .2rem; }
.sec.navy .prose p { color: var(--on-dark); }
.sec.navy .prose strong { color: #fff; }

/* ---- Generic 2-col split ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,5vw,4rem); align-items: start; }
.split--wide { grid-template-columns: 1.12fr .88fr; }

/* ---- Numbered steps ---- */
.steps { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.7rem 2.6rem; }
.step { display: flex; gap: 1.1rem; align-items: flex-start; }
.step-num { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: var(--gold-soft); font-family: var(--serif); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.step-body h4 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--navy); margin-bottom: .35rem; line-height: 1.15; }
.step-body p { font-size: .92rem; font-weight: 300; color: var(--muted); line-height: 1.6; }

/* ---- Package card (on .sec navy) ---- */
.pkg { background: rgba(255,255,255,.04); border: 1px solid var(--line-d); padding: clamp(1.5rem,3vw,2.2rem); margin-top: 1rem; }
.pkg-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pkg-table td { padding: .65rem 0; border-bottom: 1px solid var(--line-d); color: var(--on-dark); }
.pkg-val { text-align: right; color: var(--gold-soft); font-weight: 600; white-space: nowrap; }
.pkg-total td { border-bottom: none; border-top: 1px solid var(--line-gold); padding-top: .9rem; color: #fff; font-weight: 700; }
.pkg-total .pkg-val { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-soft); font-weight: 400; }
.pkg-specs { font-size: .78rem; color: var(--on-dark-dim); font-style: italic; margin-top: .6rem; }
.pkg-box { margin-top: 1.2rem; padding: 1.2rem 1.3rem; background: rgba(255,255,255,.05); border: 1px solid var(--line-d); }
.pkg-box-lbl { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-soft); margin-bottom: .6rem; }
.pkg-box p { font-size: .82rem; color: var(--on-dark); line-height: 1.65; margin-bottom: .6rem; }
.pkg-box p:last-child { margin-bottom: 0; }
.pkg-box strong { color: #fff; }
.pkg-box a { color: var(--gold-soft); font-weight: 600; }
.pkg-savings { margin-top: 1.5rem; text-align: center; }
.pkg-savings-num { font-family: var(--serif); font-size: 2.6rem; color: var(--gold-soft); line-height: 1; }
.pkg-savings-lbl { font-size: .84rem; color: var(--on-dark); margin-top: .4rem; }
.pkg-savings p { font-size: .78rem; color: var(--on-dark-dim); margin-top: .5rem; line-height: 1.6; }

/* ---- Offer cards (lots) ---- */
.offer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.offer-card { background: #fff; border: 1px solid var(--line-l); border-top: 3px solid var(--gold); padding: 1.8rem 1.6rem; display: flex; flex-direction: column; transition: .3s; }
.offer-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.offer-loc { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-deep); margin-bottom: .5rem; }
.offer-name { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--navy); margin-bottom: .3rem; }
.offer-price { font-family: var(--serif); font-size: 1.4rem; color: var(--navy); margin-bottom: .7rem; }
.offer-desc { font-size: .86rem; font-weight: 300; color: var(--muted); line-height: 1.6; flex: 1; margin-bottom: 1.3rem; }
.offer-btn { width: 100%; }

/* ---- Figure band (stats, light) ---- */
.figs { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line-l); border: 1px solid var(--line-l); margin-top: 2rem; }
.fig { background: #fff; padding: 1.5rem 1.2rem; text-align: center; }
.sec.paper .fig { background: var(--paper); }
.fig-num { font-family: var(--serif); font-size: clamp(1.8rem,3vw,2.4rem); color: var(--navy); line-height: 1; }
.fig-lab { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .6rem; line-height: 1.4; }

/* ---- Pull quote + quote card ---- */
.quote-card { background: var(--paper); border: 1px solid var(--line-l2); border-left: 4px solid var(--gold); padding: clamp(1.6rem,3vw,2.2rem); }
.pull { font-family: var(--serif); font-size: 1.4rem; line-height: 1.4; color: var(--navy); font-style: italic; margin-bottom: 1.1rem; }
.quote-card p { font-size: .92rem; font-weight: 300; color: var(--muted); line-height: 1.75; margin-bottom: .9rem; }
.quote-card p:last-child { margin-bottom: 0; }
.quote-card strong { color: var(--navy); font-weight: 600; }
.pull--lg { font-size: clamp(1.3rem,2.4vw,1.7rem); text-align: center; max-width: 46rem; margin: 1.5rem auto 0; color: var(--navy); }
.pull-by { display: block; margin-top: 1.1rem; font-family: var(--sans); font-style: normal; font-size: .82rem; font-weight: 600; color: var(--muted); }

/* ---- Callout box (gold-tint, works on white or paper) ---- */
.callout { padding: 1.2rem 1.4rem; background: rgba(194,162,106,.10); border: 1px solid var(--line-gold); border-left: 3px solid var(--gold); }
.callout-lbl { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-deep); margin-bottom: .5rem; }
.callout p { font-size: .9rem; font-weight: 300; color: var(--muted); line-height: 1.7; margin: 0; }
.callout strong { color: var(--navy); font-weight: 600; }
.callout em { color: var(--navy); font-style: italic; }
.callout--tight { padding: 1rem 1.2rem; }
.callout--wide { margin-top: 2.5rem; }
.callout-title { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--navy); margin: .3rem 0 .6rem; }

/* ---- Risk list (navy marks, not red) ---- */
.risks { list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.risks li { display: flex; align-items: flex-start; gap: .85rem; font-size: .92rem; font-weight: 300; color: var(--muted); line-height: 1.65; }
.risks strong { color: var(--navy); font-weight: 600; }
.risk-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; margin-top: .1rem; }

/* ---- Comparison table (✓ gold / × muted, emoji-free) ---- */
.compare { width: 100%; border-collapse: collapse; font-size: .86rem; }
.compare th { text-align: left; font-family: var(--sans); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); padding: .7rem .55rem; border-bottom: 2px solid var(--line-l2); }
.compare td { padding: .7rem .55rem; border-bottom: 1px solid var(--line-l); vertical-align: top; }
.compare-lbl { font-weight: 600; color: var(--navy); }
.compare .no, .compare .yes { position: relative; padding-left: 1.5rem; color: var(--muted); }
.compare .no::before, .compare .yes::before { position: absolute; left: .35rem; font-weight: 700; }
.compare .no::before { content: "\00d7"; color: var(--muted-2); }
.compare .yes::before { content: "\2713"; color: var(--gold-deep); }
.compare .yes { color: var(--navy); font-weight: 500; }
.compare-title { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--navy); margin-bottom: 1rem; }

/* ---- Team card ---- */
.team-card { display: flex; gap: 2.5rem; align-items: center; background: #fff; border: 1px solid var(--line-l); padding: 2.2rem; flex-wrap: wrap; }
.team-photo { flex: 0 0 220px; max-width: 220px; aspect-ratio: 1; position: relative; overflow: hidden; }
.team-photo .cine { position: absolute; inset: 0; }
.team-body { flex: 1; min-width: 260px; }
.team-name { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--navy); margin-bottom: .1rem; }
.team-role { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-deep); margin-bottom: 1rem; }
.team-body p { font-size: .92rem; font-weight: 300; color: var(--muted); line-height: 1.75; margin-bottom: .9rem; }
.team-body .team-philosophy { color: var(--navy); font-weight: 500; }
.team-body .btn { margin-top: .5rem; }

/* ---- Credentials grid ---- */
.cred-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.1rem; }
.cred { background: #fff; border: 1px solid var(--line-l); padding: 1.3rem; }
.cred.gold { border-top: 3px solid var(--gold); }
.cred-icon { width: 38px; height: 38px; border-radius: 9px; background: var(--navy); color: var(--gold-soft); display: flex; align-items: center; justify-content: center; margin-bottom: .8rem; }
.cred.gold .cred-icon { background: var(--gold); color: var(--navy); }
.cred-icon svg { width: 19px; height: 19px; }
.cred h4 { font-family: var(--sans); font-size: .92rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; }
.cred p { font-size: .83rem; font-weight: 300; color: var(--muted); line-height: 1.6; }

/* ---- Tulum warning ---- */
.tulum-warn { background: var(--navy); padding: 1.8rem; border: 1px solid var(--line-gold); }
.tulum-warn h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: #fff; margin-bottom: .8rem; }
.tulum-warn p { font-size: .88rem; font-weight: 300; color: var(--on-dark); line-height: 1.7; margin-bottom: .8rem; }
.tulum-highlight { margin-top: .4rem; padding: 1rem 1.2rem; background: rgba(194,162,106,.12); border-left: 3px solid var(--gold); font-size: .9rem; color: #fff; line-height: 1.6; }
.tulum-highlight strong { color: var(--gold-soft); }

/* ---- Delivery claim (on navy) ---- */
.delivery-claim { font-family: var(--serif); font-size: clamp(1.2rem,2.2vw,1.6rem); color: #fff; line-height: 1.5; margin: 1.4rem auto; max-width: 44rem; }
.delivery-claim em { font-style: italic; color: var(--gold-soft); }
.delivery-note { font-size: .85rem; font-weight: 300; color: var(--on-dark-dim); line-height: 1.7; max-width: 40rem; margin: 0 auto; }

/* ---- Testimonials 2-up ---- */
.tst-grid--2 { grid-template-columns: repeat(2,1fr); }

/* ---- Neighborhood cards (areas) ---- */
.hood-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.hood-card { background: #fff; border: 1px solid var(--line-l); display: flex; flex-direction: column; overflow: hidden; transition: .3s; color: var(--ink); }
.hood-card:hover { box-shadow: var(--shadow); transform: translateY(-5px); }
.hood-media { height: 170px; position: relative; overflow: hidden; }
.hood-media .cine, .hood-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.hood-card:hover .hood-media .cine, .hood-card:hover .hood-media img { transform: scale(1.06); }
.hood-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.hood-name { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--navy); margin-bottom: .5rem; }
.hood-desc { font-size: .88rem; font-weight: 300; color: var(--muted); line-height: 1.65; flex: 1; margin-bottom: 1rem; }
.hood-link { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-deep); }
.hood-card:hover .hood-link { color: var(--navy); }

/* ---- Area guide table ---- */
.guide { background: #fff; border: 1px solid var(--line-l); padding: 1.8rem; }
.guide-lbl { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-deep); margin-bottom: 1rem; }
.kv-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.kv-table td { padding: .65rem 0; border-bottom: 1px solid var(--line-l); color: var(--muted); vertical-align: top; }
.kv-table tr:last-child td { border-bottom: none; }
.kv-v { text-align: right; font-weight: 600; color: var(--navy); }

/* ---- Contact channels ---- */
.channels { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.5rem; }
.channel { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem; color: #fff; transition: transform .25s; }
.channel:hover { transform: translateX(4px); }
.channel-ico { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.channel-ico svg { width: 22px; height: 22px; }
.channel-wa { background: #1FA855; }
.channel-navy { background: var(--navy); }
.channel-gold { background: var(--gold-deep); }
.channel-title { font-weight: 700; font-size: .9rem; }
.channel-label { font-size: .78rem; font-weight: 300; opacity: .85; margin-top: .1rem; }

/* ---- Contact form ---- */
.form-card { background: #fff; border: 1px solid var(--line-l); padding: clamp(1.6rem,3vw,2.2rem); box-shadow: var(--shadow); }
.form-card-title { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--navy); margin-bottom: .2rem; }
.form-card-sub { font-size: .78rem; color: var(--muted); margin-bottom: 1.3rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-l); }
.cform .field { margin-bottom: 1rem; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cform label { display: block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-deep); margin-bottom: .45rem; }
.cform input, .cform select { width: 100%; padding: .7rem .85rem; border: 1px solid var(--line-l2); background: #fff; font-family: var(--sans); font-size: .92rem; color: var(--ink); outline: none; transition: border-color .2s; }
.cform input:focus, .cform select:focus { border-color: var(--gold); }
.cform select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a2854f' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2rem; }
.cform-submit { width: 100%; margin-top: .5rem; }
.cform-note { font-size: .7rem; color: var(--muted); text-align: center; margin-top: .6rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- About extras ---- */
.why-stats--center { max-width: 560px; margin: 0 auto; }
.about-badges { justify-content: center; margin-top: 1.5rem; }

/* ---- Subpage responsive ---- */
@media (max-width: 1000px) {
  .split, .split--wide { grid-template-columns: 1fr; gap: 2.5rem; }
  .offer-grid, .hood-grid { grid-template-columns: repeat(2,1fr); }
  .cred-grid { grid-template-columns: 1fr; }
  .tst-grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
  .offer-grid, .hood-grid { grid-template-columns: 1fr; }
  .cform-row { grid-template-columns: 1fr; }
  .team-card { gap: 1.5rem; padding: 1.6rem; }
  .pull { font-size: 1.2rem; }
}
@media (max-width: 560px) {
  .compare { font-size: .8rem; }
  .compare th, .compare td { padding: .55rem .4rem; }
}

/* ============================================================
   STITCH COMPOSITION KIT (piloto: below-market) — paleta/tokens de home
   Hero cinematográfico, media + nota flotante, stats "ledger", cita con
   marca de agua, tabla comparativa editorial, lista de riesgos con iconos.
   Todo sobre los tokens base (sin tema oscuro, sin rojo brillante).
   ============================================================ */

/* ---- Cinematic sub-page hero (reutiliza las primitivas .hero de home) ---- */
.sub-hero { height: clamp(560px,64vh,640px); min-height: 0; justify-content: center; }
.sub-hero .hero-in { padding-top: clamp(1.5rem,4vw,2.5rem); padding-bottom: clamp(2.5rem,5vw,4rem); }
@media (max-width: 720px) { .sub-hero { height: auto; min-height: 480px; } }
.gold-rule { width: 54px; height: 2px; background: var(--gold); flex: none; }   /* contraparte dorada de .red-rule — respeta la disciplina del rojo */

/* ---- Media block (imagen .cine o foto real con aspect-ratio) ---- */
.media-wrap { position: relative; }
.media { position: relative; aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--line-l); }
.media .cine, .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--tall { aspect-ratio: 3/4; }
.media--mono img { filter: grayscale(.85) contrast(1.03); }
.sec.navy .media { border-color: var(--line-gold); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Floating note card (sobre la media) ---- */
.note-float { position: absolute; right: -1.4rem; bottom: 2.2rem; max-width: 17rem; background: var(--navy); border: 1px solid var(--line-gold); padding: 1.4rem 1.5rem; color: #fff; box-shadow: var(--shadow-d); }
.note-ico { color: var(--gold-soft); display: block; margin-bottom: .7rem; }
.note-ico svg { width: 28px; height: 28px; }
.note-lbl { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: #fff; margin-bottom: .4rem; }
.note-float p { font-family: var(--sans); font-size: .9rem; font-weight: 300; color: var(--on-dark); line-height: 1.6; margin: 0; }

/* ---- Inline pull quote (regla de oro a la izquierda) ---- */
.pull--inline { text-align: left; max-width: none; margin: 1.6rem 0 0; padding-left: 1.4rem; border-left: 3px solid var(--gold); font-size: 1.1rem; font-style: italic; color: var(--navy); }
.pull--inline strong { font-style: normal; font-weight: 600; color: var(--navy); }

/* ---- Stats ledger (en .sec navy) ---- */
.figs--ledger { background: transparent; border: 1px solid var(--line-gold); grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 0; }
.figs--ledger .fig { background: transparent; border-right: 1px solid var(--line-gold); padding: clamp(1.8rem,4vw,2.8rem) 1rem; }
.figs--ledger .fig:last-child { border-right: none; }
.figs--ledger .fig-num { color: var(--gold); font-size: clamp(2.4rem,4.5vw,3.4rem); }
.figs--ledger .fig-lab { color: var(--on-dark-dim); }

/* ---- Watermark quote block ---- */
.quote-block { position: relative; overflow: hidden; }
.quote-watermark { position: absolute; top: -2.5rem; left: 50%; transform: translateX(-50%); font-family: var(--serif); font-size: 16rem; line-height: 1; color: var(--gold); opacity: .08; pointer-events: none; z-index: 0; }
.quote-block .sec-head, .quote-block .pull { position: relative; z-index: 1; }

/* ---- Editorial comparison table ---- */
.compare-wrap { overflow-x: auto; margin-top: 2.5rem; border: 1px solid var(--line-l); }
.compare--editorial { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
.compare--editorial th { text-align: left; font-family: var(--sans); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); padding: 1.2rem 1.3rem; border-bottom: 2px solid var(--line-l2); background: var(--paper); }
.compare--editorial th.compare-us { color: var(--gold-deep); }
.compare--editorial td { padding: 1.15rem 1.3rem; border-bottom: 1px solid var(--line-l); color: var(--muted); font-weight: 300; vertical-align: top; }
.compare--editorial tr:last-child td { border-bottom: none; }
.compare--editorial tbody tr { transition: background .2s; }
.compare--editorial tbody tr:hover { background: rgba(194,162,106,.05); }
.compare--editorial .compare-lbl { font-weight: 600; color: var(--navy); }
.compare--editorial td.compare-us { color: var(--gold-deep); font-weight: 500; }

/* ---- Icon risk list ---- */
.risks--icon li { gap: 1rem; }
.risk-ico { flex: none; width: 40px; height: 40px; border: 1px solid var(--line-gold); display: flex; align-items: center; justify-content: center; color: var(--gold-deep); }
.risk-ico svg { width: 20px; height: 20px; }
.sec.navy .risks li { color: var(--on-dark); }
.sec.navy .risks strong { color: #fff; }
.sec.navy .risk-ico { color: var(--gold-soft); }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .quote-watermark { font-size: 11rem; top: -1.5rem; }
  .note-float { position: static; right: auto; bottom: auto; max-width: none; margin-top: 1rem; box-shadow: none; }
  .media, .media--tall { aspect-ratio: 16/9; }
}
@media (max-width: 620px) {
  .figs--ledger { grid-template-columns: 1fr 1fr; }
  .figs--ledger .fig:nth-child(2) { border-right: none; }
  .figs--ledger .fig:nth-child(1), .figs--ledger .fig:nth-child(2) { border-bottom: 1px solid var(--line-gold); }
}

/* ---- Service cards (numbered, dark on light section) ---- */
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.svc-card { background: var(--navy); border: 1px solid var(--line-gold); padding: 2.2rem 2rem; display: flex; flex-direction: column; min-height: 320px; color: #fff; transition: transform .3s, border-color .3s; }
.svc-card:hover { transform: translateY(-5px); border-color: var(--gold); }
.svc-num { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .2em; color: var(--gold-soft); margin-bottom: auto; }
.svc-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: #fff; margin: 1.4rem 0 .7rem; line-height: 1.14; }
.svc-card p { font-family: var(--sans); font-size: .9rem; font-weight: 300; color: var(--on-dark); line-height: 1.6; margin: 0; }
.svc-go { margin-top: 1.4rem; font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-soft); }
.svc-card:hover .svc-go { color: #fff; }
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card { min-height: auto; }
}

/* ============================================================
   DARK SUB-PAGE THEME — secciones white/paper → navy, solo en .subpage
   (home queda excluida). Capas tonales + acentos de oro, como los mockups.
   ============================================================ */
.subpage .sec.white { background: var(--navy) !important; color: #fff; }
.subpage .sec.paper { background: var(--navy-2) !important; color: #fff; }
.subpage .sec.white + .sec.white, .subpage .sec.navy + .sec.navy { border-top: 1px solid var(--line-d); }

/* eyebrows / titles / intros */
.subpage .sec.white .eye, .subpage .sec.paper .eye { color: var(--gold); }
.subpage .sec.white .sec-tit, .subpage .sec.paper .sec-tit { color: #fff; }
.subpage .sec-tit em { color: var(--gold-soft); }
.subpage .sec-intro { color: var(--on-dark); }

/* prose */
.subpage .prose p { color: var(--on-dark); }
.subpage .prose .lede { color: #fff; }
.subpage .prose strong, .subpage .prose .prose-strong { color: #fff; }
.subpage .prose h3 { color: #fff; }
.subpage .prose .prose-lead { color: var(--gold-soft); }
.subpage .prose .prose-sign { color: #fff; border-top-color: var(--line-d); }
.subpage .prose .prose-sign span { color: var(--on-dark-dim); }
.subpage .tlink { color: var(--gold-soft); }
.subpage .tlink:hover { color: #fff; }

/* pull quotes */
.subpage .pull, .subpage .pull--inline { color: #fff; }
.subpage .pull-by { color: var(--on-dark-dim); }
.subpage .quote-card { background: rgba(255,255,255,.04); border-color: var(--line-gold); }
.subpage .quote-card p { color: var(--on-dark); }
.subpage .quote-card strong { color: #fff; }
.subpage .quote-watermark { opacity: .06; }

/* callout */
.subpage .callout p { color: var(--on-dark); }
.subpage .callout strong, .subpage .callout em, .subpage .callout-title { color: #fff; }
.subpage .callout-lbl { color: var(--gold-soft); }

/* comparison table */
.subpage .compare-wrap { border-color: var(--line-d); }
.subpage .compare--editorial th { background: var(--navy-2); color: var(--gold-soft); border-bottom-color: var(--line-gold); }
.subpage .compare--editorial td { color: var(--on-dark); border-bottom-color: var(--line-d); }
.subpage .compare--editorial .compare-lbl { color: #fff; }
.subpage .compare--editorial td.compare-us { color: var(--gold-soft); }
.subpage .compare--editorial tbody tr:hover { background: rgba(255,255,255,.04); }
.subpage .compare-title { color: #fff; }

/* offer cards (land-build) */
.subpage .offer-card { background: var(--navy-2); border-color: var(--line-gold); }
.subpage .offer-name, .subpage .offer-price { color: #fff; }
.subpage .offer-desc { color: var(--on-dark); }
.subpage .offer-loc { color: var(--gold-soft); }

/* neighborhood cards (areas) */
.subpage .hood-card { background: var(--navy-2); border-color: var(--line-gold); color: #fff; }
.subpage .hood-name { color: #fff; }
.subpage .hood-desc { color: var(--on-dark); }
.subpage .hood-link { color: var(--gold-soft); }

/* guide / kv-table (areas) */
.subpage .guide { background: var(--navy-2); border-color: var(--line-gold); }
.subpage .guide-lbl { color: var(--gold-soft); }
.subpage .kv-table td { color: var(--on-dark); border-bottom-color: var(--line-d); }
.subpage .kv-v { color: #fff; }

/* team card (why-us) */
.subpage .team-card { background: var(--navy-2); border-color: var(--line-gold); }
.subpage .team-name { color: #fff; }
.subpage .team-body p { color: var(--on-dark); }
.subpage .team-philosophy { color: #fff; }

/* credentials cards (why-us) */
.subpage .cred { background: var(--navy-2); border-color: var(--line-d); }
.subpage .cred h4 { color: #fff; }
.subpage .cred p { color: var(--on-dark); }

/* numbered steps */
.subpage .step-body h4 { color: #fff; }
.subpage .step-body p { color: var(--on-dark); }

/* testimonials */
.subpage .tst { background: var(--navy-2); border-color: var(--line-d); }
.subpage .tst-q { color: #fff; }
.subpage .tst-name { color: #fff; }
.subpage .tst-loc { color: var(--on-dark-dim); }
.subpage .tst-av { background: var(--gold); color: var(--navy); }

/* credential badges (about) */
.subpage .prop-tag { background: rgba(255,255,255,.05); border-color: var(--line-gold); color: #fff; }

/* media border on dark */
.subpage .media { border-color: var(--line-gold); }

/* contact form card → dark (inputs stay light, like the mockup) */
.subpage .form-card { background: var(--navy-2); border-color: var(--line-gold); box-shadow: none; }
.subpage .form-card-title { color: #fff; }
.subpage .form-card-sub { color: var(--on-dark-dim); border-bottom-color: var(--line-d); }
.subpage .cform label { color: var(--gold-soft); }
.subpage .cform-note { color: var(--on-dark-dim); }

/* ============================================================
   GLOBAL SUB-PAGE FOUNDATIONS (Parte 0) — escala premium, ritmo
   tonal de 3 niveles y CTA fotográfico. Scoped a .subpage; home intacta.
   ============================================================ */

/* ---- 0.2 Tipografía / espaciado premium (solo subpáginas) ---- */
.subpage .sec { padding: clamp(5.5rem,10vw,8.5rem) 0; }
.subpage .sec-tit { font-size: clamp(2.4rem,5vw,3.9rem); letter-spacing: -.015em; }
.subpage .sec-head { margin-bottom: clamp(3rem,5vw,4.2rem); }
.subpage .sec-head .eye { margin-bottom: 1.3rem; letter-spacing: .32em; }
.subpage .sec-intro { font-size: 1.08rem; line-height: 1.7; max-width: 38rem; }
.subpage .prose p { font-size: 1.04rem; line-height: 1.78; }
.subpage .prose .lede { font-size: 1.2rem; line-height: 1.65; }

/* ---- 0.3 Ritmo tonal de 3 niveles (navy / navy-2 / casi-negro) ---- */
.sec.ink { background: var(--navy-3); color: #fff; }
.subpage .sec.ink { background: var(--navy-3) !important; color: #fff; }
.subpage .sec.ink .eye { color: var(--gold); }
.subpage .sec.ink .sec-tit { color: #fff; }
.subpage .sec.ink .sec-tit em { color: var(--gold-soft); }
.subpage .sec.ink .sec-intro { color: var(--on-dark); }

/* ---- 0.4 CTA fotográfico (reusa el patrón .cta de home) ---- */
.cta-photo img { width: 100%; height: 100%; object-fit: cover; }
.subpage .cta { border-top: 1px solid var(--line-d); }

/* ---- Editorial photo bands (below-market template) ---- */
.quote-band { position: relative; background: var(--navy); overflow: hidden; }
.quote-band .cta-in { padding-top: clamp(5rem,9vw,7rem); padding-bottom: clamp(5rem,9vw,7rem); }
.quote-band .cta-in h2 { font-style: italic; max-width: 22ch; }
.quote-band .quote-by { display: block; margin-top: 1.8rem; font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); }
.subpage .sec.ink .figs--ledger { border-color: var(--line-gold); }
.ledger-head { text-align: center; margin-bottom: clamp(2.2rem,4vw,3.2rem); }
/* framed photo with floating pin (reuses home .why-photo/.pin) */
.why-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-photo--mono img { filter: grayscale(.85) contrast(1.03); }

/* ============================================================
   STITCH DECORATION KIT (rollout) — adornos por sección tomados de
   los mockups, en el sistema unificado. Stat-rings, regla centrada,
   founder enmarcado, credentials strip, knowledge guide, split contacto.
   ============================================================ */

/* ---- centered gold rule (under centered titles) ---- */
.rule-center { width: 60px; height: 2px; background: var(--gold); margin: 1.5rem auto 0; }

/* ---- stat rings (about) ---- */
.stat-rings { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.stat-ring { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 clamp(1.6rem,4vw,3.4rem); }
.stat-ring + .stat-ring { border-left: 1px solid var(--line-gold); }
.stat-ring-circle { position: relative; width: clamp(120px,16vw,160px); height: clamp(120px,16vw,160px); border-radius: 50%; border: 2px solid rgba(194,162,106,.22); display: flex; align-items: center; justify-content: center; margin-bottom: 1.4rem; }
.stat-ring-circle::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold); clip-path: polygon(50% 0, 100% 0, 100% 55%, 50% 55%); }
.stat-ring-num { font-family: var(--serif); font-size: clamp(2.2rem,4vw,3rem); color: #fff; line-height: 1; }
.stat-ring-lab { font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-dim); max-width: 9rem; }
@media (max-width: 720px) {
  .stat-rings { gap: 2.5rem; }
  .stat-ring { padding: 0; flex: 0 0 40%; }
  .stat-ring + .stat-ring { border-left: none; }
}

/* ---- credentials strip (about) ---- */
.cred-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.5rem,5vw,4rem); margin-top: 1rem; }
.cred-strip-item { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--serif); font-size: 1.4rem; color: #fff; opacity: .85; transition: opacity .3s; }
.cred-strip-item:hover { opacity: 1; }
.cred-strip-item svg { width: 26px; height: 26px; color: var(--gold); flex: none; }

/* ---- framed portrait + gold L-corner (why-us founder) ---- */
.framed { position: relative; display: inline-block; width: 100%; }
.framed .why-photo { position: relative; z-index: 1; }
.framed .frame-corner { position: absolute; bottom: -1.4rem; left: -1.4rem; width: clamp(5rem,9vw,8rem); height: clamp(5rem,9vw,8rem); border-left: 1px solid var(--gold); border-bottom: 1px solid var(--gold); z-index: 0; pointer-events: none; }
.why-photo--portrait { aspect-ratio: 4/5; }
.why-photo--portrait img { filter: grayscale(1) contrast(1.02); transition: filter .5s ease; }
.why-photo--portrait:hover img { filter: grayscale(0); }

/* ---- areas: overlay image cards (reuse home .area, real photos) ---- */
.area-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.area:hover .area-img { transform: scale(1.07); }
.areas-grid--tall .area { min-height: clamp(360px,42vw,460px); }
.area-go--gold { border-color: rgba(255,255,255,.4); }

/* ---- form card gold corner accents (contact) ---- */
.form-card--accents { position: relative; }
.fc-corner { position: absolute; width: 12px; height: 12px; z-index: 2; pointer-events: none; }
.fc-tl { top: 0; left: 0; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.fc-tr { top: 0; right: 0; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.fc-bl { bottom: 0; left: 0; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.fc-br { bottom: 0; right: 0; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

/* ============================================================
   PROPERTY DETAIL (dark, cohesivo, nav global) — galería + panel
   info + acordeones + precio/CTA. Reemplaza la vista blanca.
   ============================================================ */
.lst { background: var(--navy); color: #fff; padding: clamp(1.6rem,4vw,2.8rem) 0 clamp(3.5rem,7vw,5.5rem); }
.lst-crumb { font-family: var(--sans); font-size: .8rem; color: var(--on-dark-dim); margin-bottom: clamp(1.4rem,3vw,2.2rem); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.lst-crumb a { color: var(--gold-soft); }
.lst-crumb a:hover { color: #fff; }
.lst-crumb .sep { opacity: .5; }
.lst-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(1.5rem,3.5vw,3rem); align-items: start; }
.lst-gallery { position: sticky; top: 96px; }
.lst-main { position: relative; aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--line-gold); background: var(--navy-2); }
.lst-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.3,1); }
.lst-main:hover img { transform: scale(1.04); }
.lst-badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; background: rgba(4,30,66,.55); backdrop-filter: blur(8px); border: 1px solid var(--line-gold); color: var(--gold-soft); font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: .5rem .9rem; }
.lst-thumbs { display: flex; gap: .7rem; margin-top: .7rem; overflow-x: auto; padding-bottom: .3rem; }
.lst-thumb { width: 96px; height: 70px; object-fit: cover; flex: none; border: 1px solid var(--line-d); opacity: .5; cursor: pointer; transition: .25s; }
.lst-thumb:hover { opacity: .85; }
.lst-thumb.active { opacity: 1; border-color: var(--gold); }
.lst-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem,3.6vw,3rem); line-height: 1.04; letter-spacing: -.015em; color: #fff; }
.lst-loc { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; font-family: var(--sans); font-weight: 300; color: var(--on-dark); }
.lst-loc svg { width: 18px; height: 18px; color: var(--gold-soft); flex: none; }
.lst-metrics { display: flex; flex-wrap: wrap; margin: 1.7rem 0; border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold); }
.lst-metric { padding: 1.1rem 1.4rem 1.1rem 0; }
.lst-metric + .lst-metric { padding-left: 1.4rem; border-left: 1px solid var(--line-gold); }
.lst-metric-lbl { font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-dim); margin-bottom: .45rem; }
.lst-metric-val { font-family: var(--serif); font-size: 1.25rem; color: var(--gold-soft); line-height: 1.1; }
.lst-acc { border-top: 1px solid var(--line-d); margin-top: .4rem; }
.lst-acc-item { border-bottom: 1px solid var(--line-d); }
.lst-acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 0; background: none; border: 0; cursor: pointer; text-align: left; color: #fff; font-family: var(--serif); font-size: 1.25rem; }
.lst-acc-ico { color: var(--gold-soft); transition: transform .3s; flex: none; width: 20px; height: 20px; }
.lst-acc-item.open .lst-acc-ico { transform: rotate(180deg); }
.lst-acc-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .4s ease; }
.lst-acc-item.open .lst-acc-body { max-height: 1800px; opacity: 1; }
.lst-acc-inner { padding: 0 0 1.4rem; }
.lst-desc, .lst-desc p { font-family: var(--sans); font-weight: 300; color: var(--on-dark); line-height: 1.78; }
.lst-desc p + p { margin-top: 1rem; }
.lst-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.lst-map { height: 320px; border: 1px solid var(--line-gold); }
.lst-cta { margin-top: 1.8rem; border: 1px solid var(--line-gold); background: var(--navy-2); padding: 1.4rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.lst-cta-price { font-family: var(--serif); font-size: 1.7rem; color: #fff; line-height: 1; }
.lst-cta-price small { font-family: var(--sans); font-size: .72rem; color: var(--on-dark-dim); letter-spacing: .1em; }
.lst-cta-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
@media (max-width: 900px) {
  .lst-grid { grid-template-columns: 1fr; }
  .lst-gallery { position: static; }
}

/* ============================================================
   BLOG — indice (/blog) y articulo (/blog/:slug)
   Tema claro (el blog no lleva .subpage). Tokens base, esquinas rectas.
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(1.4rem,3vw,2.4rem); }
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-l); transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--paper-2); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.3,1); }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.6rem 1.4rem; }
.blog-card-cat { font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.blog-card-title { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.14; color: var(--ink); margin: .7rem 0 .6rem; }
.blog-card-excerpt { font-weight: 300; font-size: .93rem; line-height: 1.7; color: var(--muted); flex: 1; }
.blog-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line-l); font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.blog-card-foot span:last-child { color: var(--gold-deep); font-weight: 600; }

.blog-post-wrap { background: var(--paper); padding-bottom: clamp(3.5rem,7vw,6rem); }
.blog-post-meta { margin-top: 1.1rem; font-family: var(--sans); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.blog-post-hero-img { max-width: var(--maxw); margin: 0 auto clamp(2rem,4vw,3rem); padding: 0 clamp(1.5rem,4.5vw,3.5rem); }
.blog-post-hero-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--line-l2); }
.blog-post-body { max-width: 74ch; margin: 0 auto; font-weight: 300; font-size: 1.02rem; line-height: 1.82; color: var(--ink); }
.blog-post-body > :first-child { margin-top: 0; }
.blog-post-body h2 { font-size: clamp(1.6rem,2.6vw,2.05rem); line-height: 1.12; margin: 2.8rem 0 .5rem; }
.blog-post-body h2::after { content: ''; display: block; width: 46px; height: 2px; background: var(--gold); margin-top: .9rem; }
.blog-post-body h3 { font-size: clamp(1.18rem,1.8vw,1.35rem); line-height: 1.2; color: var(--navy); margin: 2rem 0 .5rem; }
.blog-post-body p { margin: 1rem 0; }
.blog-post-body ul, .blog-post-body ol { margin: 1.1rem 0; padding-left: 1.3rem; }
.blog-post-body li { margin: .5rem 0; padding-left: .25rem; }
.blog-post-body li::marker { color: var(--gold-deep); }
.blog-post-body strong { font-weight: 600; }
.blog-post-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.blog-post-body .table-scroll { overflow-x: auto; margin: 1.8rem 0; border: 1px solid var(--line-l2); background: #fff; }
.blog-post-body table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 520px; }
.blog-post-body th { background: var(--navy); color: #fff; font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: left; padding: .95rem 1.1rem; }
.blog-post-body td { padding: .95rem 1.1rem; border-top: 1px solid var(--line-l); vertical-align: top; font-weight: 300; line-height: 1.65; }
.blog-post-body tbody tr:hover { background: rgba(194,162,106,.07); }
.blog-post-back { max-width: 74ch; margin: clamp(2.5rem,5vw,3.5rem) auto 0; padding-top: 2rem; border-top: 1px solid var(--line-l2); }
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-post-body { font-size: .98rem; }
}