/* 
  Property Sale Page — mobile-friendly, clean, and light.
  Optional hero background image: /Images/background.jpg
*/
:root{
  --ink:#0f172a; --muted:rgba(15,23,42,.72); --line:rgba(15,23,42,.12);
  --paper:#fff; --shadow:0 14px 40px rgba(15,23,42,.12); --radius:16px; --max:980px;
  --accent:#0f766e; --accent2:#166534;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; color:var(--ink);
  background:radial-gradient(1200px 800px at 12% 0%, rgba(22,101,52,.10), transparent 55%),
             radial-gradient(1200px 800px at 90% 10%, rgba(15,118,110,.10), transparent 55%), #f7fafc;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:.92em; background:rgba(15,23,42,.06); padding:.1rem .35rem; border-radius:10px;
}
hr.sep{border:0;border-top:1px solid var(--line); margin:18px 0;}
.skip{position:absolute;left:-999px;top:12px;background:var(--paper);padding:.6rem .8rem;border-radius:12px;
  box-shadow:var(--shadow);border:1px solid var(--line);}
.skip:focus{left:12px;}
.wrap{width:min(var(--max), calc(100% - 2rem)); margin:0 auto;}

.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden;}
.hero__wrap{padding:28px 0 22px;}
.bg{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(247,250,252,.82), rgba(247,250,252,.92) 50%, rgba(247,250,252,1)),
            url("../Images/background.jpg");
  background-size:cover; background-position:center;
  filter:saturate(1.02) contrast(1.02);
}
.bg::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(900px 520px at 20% 18%, rgba(255,255,255,.55), transparent 65%);
}
.hero__top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.pill{display:inline-flex;align-items:center;padding:.28rem .6rem;border-radius:999px;border:1px solid rgba(15,118,110,.24);
  background:rgba(15,118,110,.08);color:var(--accent);font-weight:650;letter-spacing:.2px;font-size:.92rem;}
.meta{color:var(--muted);font-size:.95rem;}
.title{position:relative;z-index:1;margin:12px 0 8px;font-size:clamp(1.7rem, 1.15rem + 2vw, 2.6rem);letter-spacing:-0.2px;}
.lead{position:relative;z-index:1;margin:0 0 14px;max-width:82ch;color:rgba(15,23,42,.86);}
.hero__actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}

.hero__card{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:14px;background:rgba(255,255,255,.72);
  border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);padding:14px;box-shadow:var(--shadow);backdrop-filter:blur(6px);}
@media (max-width:880px){.hero__card{grid-template-columns:1fr;}}
.hero__media img{width:100%;height:clamp(240px, 40vw, 340px);object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);
  background:#eef2f7;display:block;}
.hint{margin-top:10px;padding:10px 12px;border-radius:14px;border:1px dashed rgba(15,118,110,.25);background:rgba(15,118,110,.05);}

.hero__facts{display:grid;gap:10px;align-content:start;}
.fact{border:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.75);border-radius:var(--radius);padding:12px;}
.fact .k{color:var(--muted);font-size:.95rem;}
.fact .v{font-weight:720;font-size:1.1rem;margin-top:2px;}

.nav{position:relative;z-index:1;margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;}
.nav a{color:rgba(15,23,42,.82);border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.65);padding:.42rem .65rem;border-radius:999px;}
.nav a:hover{text-decoration:none;border-color:rgba(15,118,110,.35);}

.section{padding:34px 0;}
h2{margin:0 0 8px;font-size:1.35rem;letter-spacing:.1px;}
h3{margin:0 0 10px;font-size:1.05rem;}
.muted{color:var(--muted);}
.small{font-size:.95rem;}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px;}
@media (max-width:880px){.grid2{grid-template-columns:1fr;}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);padding:14px;box-shadow:0 10px 28px rgba(15,23,42,.08);}

.list{margin:0;padding-left:1.1rem;}
.list li{margin:.42rem 0;}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.chip{display:inline-flex;align-items:center;padding:.28rem .55rem;border-radius:999px;border:1px solid rgba(15,118,110,.18);
  background:rgba(15,118,110,.06);color:rgba(15,23,42,.82);font-size:.93rem;}

.note{margin-top:12px;padding:12px;border:1px solid rgba(15,118,110,.18);background:rgba(15,118,110,.06);border-radius:calc(var(--radius) + 2px);color:rgba(15,23,42,.82);}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.78rem 1rem;border-radius:999px;border:1px solid rgba(15,118,110,.26);
  background:rgba(15,118,110,.10);color:var(--accent);font-weight:700;letter-spacing:.15px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.btn:hover{background:rgba(15,118,110,.14);text-decoration:none;}
.btn--ghost{border-color:rgba(15,23,42,.14);background:rgba(255,255,255,.65);color:rgba(15,23,42,.82);}
.btn--small{padding:.55rem .8rem;font-size:.95rem;}

.input{width:100%;padding:.72rem .85rem;border-radius:12px;border:1px solid rgba(15,23,42,.14);background:rgba(255,255,255,.9);outline:none;}
.input:focus{border-color:rgba(15,118,110,.45);box-shadow:0 0 0 4px rgba(15,118,110,.10);}

.table{display:grid;gap:10px;}
.row{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:10px 12px;border-radius:var(--radius);border:1px solid rgba(15,23,42,.10);background:rgba(247,250,252,.75);}
.row .k{color:var(--muted);font-size:.95rem;}
.row .v{font-weight:650;color:rgba(15,23,42,.90);}
@media (max-width:520px){.row{grid-template-columns:1fr;}}

.map{width:100%;height:360px;border-radius:calc(var(--radius) + 2px);border:1px solid rgba(15,23,42,.12);overflow:hidden;}
.dir{margin-top:12px;}
.dir label{display:block;color:var(--muted);font-size:.95rem;margin-bottom:8px;}
.dir__row{display:flex;gap:10px;align-items:center;}
@media (max-width:520px){.dir__row{flex-direction:column;align-items:stretch;}}

.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;}
@media (max-width:880px){.plans{grid-template-columns:1fr;}}
.plan{margin:0;padding:10px;border:1px solid rgba(15,23,42,.10);background:rgba(247,250,252,.75);border-radius:calc(var(--radius) + 2px);}
.plan img{width:100%;height:240px;object-fit:contain;border-radius:var(--radius);border:1px solid rgba(15,23,42,.10);background:#fff;}
.plan figcaption{margin-top:8px;color:var(--muted);font-size:.95rem;}

.slider__stage{width:100%;height:clamp(300px, 55vw, 460px);border-radius:calc(var(--radius) + 2px);border:1px solid rgba(15,23,42,.12);overflow:hidden;background:#eef2f7;position:relative;}
.slide{position:absolute;inset:0;transform:translateX(100%);opacity:0;transition:transform 520ms ease, opacity 360ms ease;}
.slide.is-active{transform:translateX(0);opacity:1;}
.slide.is-exit{transform:translateX(-100%);opacity:0;}
.slide img{width:100%;height:100%;object-fit:cover;}
.slider__controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-start;padding-top:12px;}

.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px;}
@media (max-width:880px){.thumbs{grid-template-columns:repeat(2,minmax(0,1fr));}}
.thumb{border-radius:var(--radius);border:1px solid rgba(15,23,42,.12);overflow:hidden;background:#eef2f7;cursor:pointer;padding:0;}
.thumb img{width:100%;height:140px;object-fit:cover;display:block;}
.thumb:hover{border-color:rgba(15,118,110,.35);}

/* Videos */
.video{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:start;}
@media (max-width:880px){.video{grid-template-columns:1fr;}}
.video__player{width:100%;aspect-ratio:16/9;background:#0b1220;border-radius:calc(var(--radius) + 2px);border:1px solid rgba(15,23,42,.12);}
.video__buttons{display:flex;flex-direction:column;gap:10px;}
.video__buttons .btn{justify-content:flex-start;}

.footer{border-top:1px solid var(--line);padding:22px 0 28px;}

/* Modal */
.modal[hidden]{display:none;}
.modal{position:fixed;inset:0;z-index:50;}
.modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);}
.modal__panel{position:relative;width:min(980px, calc(100% - 2rem));margin:7vh auto 0;background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.55);border-radius:calc(var(--radius) + 8px);box-shadow:0 24px 70px rgba(15,23,42,.25);padding:12px;}
.modal__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 10px;}
.modal__title{font-weight:750;color:rgba(15,23,42,.90);}
.modal img,.modal video{width:100%;height:70vh;object-fit:contain;border-radius:calc(var(--radius) + 2px);border:1px solid rgba(15,23,42,.10);background:#fff;}
.modal video{background:#0b1220;}
.modal__hint{padding:10px 6px 4px;}


/* Video button rows: Play + Full screen side by side */
.video__buttons{
  display:grid;
  gap:10px;
}
.video__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width:520px){
  .video__row{ grid-template-columns: 1fr; }
}
.video__row .btn{ justify-content:center; }


/* Layout helpers */
.span2{ grid-column: 1 / -1; }

/* Embedded charts / PDFs */
.embed{
  margin-top:12px;
  border:1px solid rgba(15,23,42,.12);
  border-radius: calc(var(--radius) + 2px);
  overflow:hidden;
  background:#fff;
}
.embed iframe{
  width:100%;
  height: 420px;
  border:0;
}
@media (max-width:520px){
  .embed iframe{ height: 360px; }
}
.embed--pdf iframe{ height: 520px; }
@media (max-width:520px){
  .embed--pdf iframe{ height: 460px; }
}

/* Market charts */
.chartLink{display:block; text-decoration:none;}
.chartImg{
  width:100%;
  height:auto;
  border-radius: calc(var(--radius) + 2px);
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
}