/* Skyline Estates — bespoke real-estate template.
   Architectural, editorial-light. Distinct from every other template:
   Cormorant Garamond display + Outfit body, forest/amber palette, a
   sticky filter rail, listing detail modal, live mortgage calculator. */
*{box-sizing:border-box}
:root{
  --accent:#0f766e; --accent-2:#b45309;
  --ink:#14201d; --muted:#5c6b66; --line:#e2e6e2;
  --paper:#f6f5f0; --card:#ffffff; --deep:#0f2420;
  --shadow:0 24px 60px -30px rgba(15,36,32,.5);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Outfit",system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.55; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{width:min(1200px,92vw); margin-inline:auto}
.eyebrow{font-size:.74rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent);
  font-weight:600}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.03; margin:0; letter-spacing:-.01em}
.serif-i{font-style:italic; color:var(--accent-2)}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.95rem;
  padding:.85em 1.5em; border-radius:100px; cursor:pointer; border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, box-shadow .25s;
  font-family:var(--sans)}
.btn:hover{transform:translateY(-2px)}
.btn-fill{background:var(--deep); color:#f4efe6; box-shadow:var(--shadow)}
.btn-fill:hover{background:var(--accent)}
.btn-line{border-color:var(--ink); color:var(--ink)}
.btn-line:hover{background:var(--ink); color:var(--paper)}
.btn-light{background:#f4efe6; color:var(--deep)}

/* ---- nav ---- */
.nav{position:fixed; inset:0 0 auto; z-index:50; transition:background .3s, box-shadow .3s, padding .3s;
  padding:20px 0}
.nav.stuck{background:rgba(246,245,240,.85); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line); padding:12px 0}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:.55em; font-family:var(--serif); font-size:1.4rem;
  font-weight:600; letter-spacing:-.01em}
.brand .mk{display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--deep); color:#f4efe6; font-family:var(--sans); font-weight:700; font-size:.95rem;
  transform:rotate(-6deg)}
.nav-links{display:flex; gap:30px; font-weight:500; font-size:.94rem}
.nav-links a{position:relative; padding:4px 0; color:var(--muted)}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--accent); transition:width .3s}
.nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:14px}
.burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); cursor:pointer; padding:11px}
.burger svg{width:100%; height:100%; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round}

/* ---- hero ---- */
.hero{padding:150px 0 70px; position:relative}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(2.9rem,6.4vw,5rem); margin:18px 0 0}
.lede{font-size:1.13rem; color:var(--muted); max-width:44ch; margin:22px 0 30px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-note{display:flex; gap:34px; margin-top:36px; flex-wrap:wrap}
.hero-note span{font-size:.9rem; color:var(--muted)}
.hero-note b{display:block; font-family:var(--serif); font-size:1.9rem; color:var(--ink); font-weight:600}
.dhero-art{position:relative; aspect-ratio:1/1; border-radius:26px; overflow:hidden;
  background:linear-gradient(155deg,#123a33,#0c1f1c 70%); box-shadow:var(--shadow)}
.dhero-art .art-emoji{position:absolute; inset:0; display:grid; place-items:center;
  font-size:clamp(5rem,12vw,8rem); transition:opacity .6s ease}
.dhero-art .gl-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1;
  border-radius:inherit}
.dhero-art.gl-fallback .art-emoji{animation:floaty 5s ease-in-out infinite}
.art-frame{position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.art-tag{position:absolute; left:18px; bottom:18px; z-index:3; background:rgba(15,36,32,.72);
  backdrop-filter:blur(6px); color:#e9f2ee; padding:8px 14px; border-radius:100px; font-size:.8rem;
  letter-spacing:.02em}
@keyframes floaty{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}

/* ---- filter rail + listings ---- */
.sec{padding:76px 0}
.sec-head{max-width:60ch}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.1rem); margin:12px 0}
.sec-head p{color:var(--muted); margin:0}
.filterbar{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin:34px 0 28px; padding:14px 16px; background:var(--card); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); position:sticky; top:74px; z-index:20}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background:transparent; color:var(--muted); font-weight:600;
  font-size:.88rem; padding:.5em 1.05em; border-radius:100px; cursor:pointer; font-family:var(--sans);
  transition:all .2s}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.on{background:var(--deep); color:#f4efe6; border-color:var(--deep)}
.price-ctl{display:flex; align-items:center; gap:12px; font-size:.88rem; color:var(--muted)}
.price-ctl b{color:var(--ink); font-variant-numeric:tabular-nums; min-width:8ch; text-align:right;
  font-weight:600}
.price-ctl input[type=range]{-webkit-appearance:none; appearance:none; width:150px; height:4px;
  border-radius:4px; background:var(--line); outline:none}
.price-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px;
  border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.25)}
.price-ctl input[type=range]::-moz-range-thumb{width:18px; height:18px; border:0; border-radius:50%;
  background:var(--accent); cursor:pointer}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.card{background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  cursor:pointer; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
  opacity:0; transform:translateY(20px)}
.card.in{opacity:1; transform:none}
.card.hide{display:none}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.card-img{position:relative; aspect-ratio:4/3; overflow:hidden; background:#dfe4df}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-img img{transform:scale(1.06)}
.tag-row{position:absolute; top:12px; left:12px; display:flex; gap:6px}
.pill{background:rgba(255,255,255,.92); backdrop-filter:blur(4px); font-size:.72rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--deep); padding:5px 10px; border-radius:100px}
.pill.new{background:var(--accent-2); color:#fff}
.card-body{padding:18px 18px 20px}
.card-body h3{font-size:1.45rem}
.addr{color:var(--muted); font-size:.9rem; margin:3px 0 12px}
.meta{display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line);
  padding-top:12px}
.meta .price{font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--accent)}
.specs{display:flex; gap:12px; font-size:.84rem; color:var(--muted)}
.specs span{display:inline-flex; align-items:center; gap:4px}
.empty{grid-column:1/-1; text-align:center; padding:50px 0; color:var(--muted); display:none}
.empty.show{display:block}

/* ---- mortgage calculator ---- */
.calc-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;
  background:var(--deep); color:#eaf1ee; border-radius:28px; padding:clamp(28px,5vw,52px);
  box-shadow:var(--shadow)}
.calc-wrap .eyebrow{color:#7ecbb9}
.calc-wrap h2{color:#f3f7f5; font-size:clamp(1.9rem,3.6vw,2.7rem); margin:10px 0 8px}
.calc-wrap p.sub{color:#a9c3bc; margin:0 0 6px}
.calc-field{margin-top:22px}
.calc-field .lab{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.calc-field .lab span{font-size:.9rem; color:#a9c3bc}
.calc-field .lab b{font-family:var(--serif); font-size:1.35rem; font-weight:600; color:#fff;
  font-variant-numeric:tabular-nums}
.calc-field input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:5px;
  border-radius:5px; background:rgba(255,255,255,.16); outline:none}
.calc-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px;
  border-radius:50%; background:#f4a259; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.4)}
.calc-field input[type=range]::-moz-range-thumb{width:22px; height:22px; border:0; border-radius:50%;
  background:#f4a259; cursor:pointer}
.calc-out{background:linear-gradient(160deg,#14322c,#0c211d); border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:30px; text-align:center}
.calc-out .k{font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:#7ecbb9}
.calc-out .big{font-family:var(--serif); font-size:clamp(2.6rem,6vw,3.7rem); font-weight:600; color:#fff;
  margin:6px 0; font-variant-numeric:tabular-nums; line-height:1}
.calc-out .per{color:#a9c3bc; font-size:.92rem}
.calc-rows{margin-top:22px; text-align:left; font-size:.9rem; border-top:1px solid rgba(255,255,255,.1);
  padding-top:16px}
.calc-rows div{display:flex; justify-content:space-between; padding:5px 0; color:#c6d8d2}
.calc-rows b{color:#fff; font-variant-numeric:tabular-nums}

/* ---- areas ---- */
.areas .grid{grid-template-columns:repeat(4,1fr); gap:16px}
.area{position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden; cursor:pointer}
.area img{width:100%; height:100%; object-fit:cover; transition:transform .7s}
.area:hover img{transform:scale(1.07)}
.area .cap{position:absolute; inset:auto 0 0; padding:16px; color:#fff;
  background:linear-gradient(transparent,rgba(6,20,17,.85)); font-family:var(--serif);
  font-size:1.3rem; font-weight:600}
.area .cap small{display:block; font-family:var(--sans); font-size:.78rem; opacity:.85;
  font-weight:400; letter-spacing:.02em}

/* ---- reveal ---- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}

/* ---- listing modal ---- */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  padding:24px}
.modal.open{display:flex}
.modal-bg{position:absolute; inset:0; background:rgba(11,24,21,.6); backdrop-filter:blur(6px)}
.modal-card{position:relative; z-index:1; width:min(920px,100%); max-height:90vh; overflow:auto;
  background:var(--card); border-radius:24px; box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  display:grid; grid-template-columns:1.1fr .9fr}
.modal-close{position:absolute; top:14px; right:14px; z-index:3; width:40px; height:40px; border:0;
  border-radius:50%; background:rgba(255,255,255,.9); cursor:pointer; font-size:1.1rem; color:var(--ink);
  box-shadow:0 4px 14px rgba(0,0,0,.2)}
.modal-img{position:relative; min-height:280px; background:#dfe4df}
.modal-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.modal-body{padding:30px}
.modal-body h3{font-size:2rem; margin-bottom:2px}
.modal-body .maddr{color:var(--muted); font-size:.94rem}
.modal-body .mprice{font-family:var(--serif); font-size:2.2rem; color:var(--accent); font-weight:600;
  margin:14px 0 6px}
.mspecs{display:flex; gap:18px; flex-wrap:wrap; padding:14px 0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); margin:10px 0 18px; color:var(--muted); font-size:.9rem}
.mspecs b{color:var(--ink)}
.mdesc{color:var(--muted); font-size:.94rem; margin-bottom:18px}
.book-form{display:grid; gap:12px}
.book-form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.book-form label{font-size:.8rem; font-weight:600; color:var(--muted); display:block; margin-bottom:5px}
.book-form input, .book-form select{width:100%; padding:.7em .85em; border:1px solid var(--line);
  border-radius:11px; font-family:var(--sans); font-size:.92rem; background:var(--paper); color:var(--ink)}
.book-form input:focus, .book-form select:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(15,118,110,.14)}
.book-ok{display:none; text-align:center; padding:20px 0}
.book-ok.show{display:block}
.book-ok .tick{width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:var(--accent);
  color:#fff; display:grid; place-items:center; font-size:1.5rem}
.book-ok h4{font-size:1.5rem; margin-bottom:6px}
.book-ok p{color:var(--muted); font-size:.94rem}

/* ---- CTA + footer ---- */
.cta{padding:80px 0}
.cta-in{background:linear-gradient(140deg,var(--accent),#0c463d); color:#eef6f3; border-radius:28px;
  padding:clamp(34px,6vw,64px); text-align:center; box-shadow:var(--shadow)}
.cta-in h2{color:#fff; font-size:clamp(2rem,4.5vw,3.2rem)}
.cta-in p{color:#cfe6df; max-width:52ch; margin:14px auto 26px}
.foot{background:var(--deep); color:#b9cbc5; padding:60px 0 34px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:34px}
.foot .brand{color:#f4efe6} .foot .brand .mk{background:var(--accent)}
.foot p{color:#8fa8a1; font-size:.92rem; max-width:34ch; margin-top:10px}
.foot h5{color:#e5efeb; font-family:var(--sans); font-weight:600; margin:0 0 12px; font-size:.86rem;
  letter-spacing:.08em; text-transform:uppercase}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.92rem}
.foot a:hover{color:#fff}
.foot-base{margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.09);
  font-size:.84rem; color:#7f948e}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:36px} .dhero-art{max-width:440px; margin-inline:auto; order:-1}
  .grid, .areas .grid{grid-template-columns:repeat(2,1fr)}
  .calc-wrap{grid-template-columns:1fr; gap:28px}
  .modal-card{grid-template-columns:1fr} .modal-img{min-height:220px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none} .burger{display:block}
  .nav-links.open{display:flex; position:absolute; top:100%; right:4vw; flex-direction:column;
    background:var(--card); padding:18px 22px; border-radius:16px; box-shadow:var(--shadow);
    border:1px solid var(--line)}
  .filterbar{position:static}
}
@media (max-width:560px){
  .grid, .areas .grid{grid-template-columns:1fr}
  .hero-note{gap:22px} .book-form .row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none} *{scroll-behavior:auto}
}

/* ============================================================
   Ultra-luxury accent — brushed sheen on the hero highlight
   (light → base → deep, in this template's own accent colour)
   ============================================================ */
h1 .serif-i{
  background-image:linear-gradient(176deg,
    color-mix(in srgb, var(--accent-2) 60%, #ffffff) 0%,
    var(--accent-2) 48%,
    color-mix(in srgb, var(--accent-2) 72%, #000000) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.20));
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  h1 .serif-i{ -webkit-text-fill-color:currentColor; background-image:none; }
}

/* ---------- 3D virtual tour ---------- */
.tour-head{max-width:640px;margin:0 auto 30px;text-align:center}
.tour-head h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-top:10px}
.tour-lead{margin-top:12px;color:var(--muted);font-size:1.05rem;line-height:1.55}
.tour-stage{position:relative;border-radius:20px;overflow:hidden;background:#0e1116;
  aspect-ratio:16/10;box-shadow:0 34px 74px -34px rgba(15,36,32,.55);border:1px solid var(--line);touch-action:none}
#tourGL{width:100%;height:100%;display:block;cursor:grab}
#tourGL:active{cursor:grabbing}
.tour-rooms{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:8px;
  background:rgba(14,17,22,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px;z-index:2}
.tour-rooms button{border:0;background:transparent;color:#e7ede9;font:600 .84rem/1 var(--sans);
  padding:11px 17px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.tour-rooms button.on{background:var(--accent);color:#fff}
.tour-rooms button:hover:not(.on){background:rgba(255,255,255,.10)}
.tour-hint{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:7px;
  background:rgba(14,17,22,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);color:#cfd8d3;font-size:.76rem;padding:8px 13px;border-radius:999px;z-index:2}
@media(max-width:640px){
  .tour-stage{aspect-ratio:4/5}
  .tour-hint{font-size:.68rem;left:10px;top:10px;padding:6px 10px}
  .tour-rooms{bottom:12px}
  .tour-rooms button{padding:10px 13px;font-size:.78rem}
}