/* Chala-Kigi — Version 1.0 — 19 Oct 2026 */
:root{
  --sand:#f6f0e6; --sand-2:#ece2d0; --dune:#c98a4b; --dune-d:#a56a30;
  --ocean:#12303f; --ocean-2:#1c4659; --ink:#1d2428; --muted:#5d6a70;
  --white:#fff; --line:#e3d9c6; --ok:#2f7a5b;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --r:14px; --shadow:0 10px 30px rgba(18,48,63,.12); --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ocean-2)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;color:var(--ocean)}
h1{font-size:clamp(2.6rem,6vw,4.6rem)} h2{font-size:clamp(2rem,4vw,3rem)} h3{font-size:1.7rem}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;font-weight:600;color:var(--dune-d);margin-bottom:12px;display:block}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch}
section{padding:84px 0}
.alt{background:var(--sand)}
.center{text-align:center}.center .lead{margin:14px auto 0}
.sec-head{margin-bottom:44px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:999px;font-weight:600;font-size:.98rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:.2s;font-family:var(--sans)}
.btn-primary{background:var(--dune);color:#fff}.btn-primary:hover{background:var(--dune-d);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}.btn-ghost:hover{background:#fff;color:var(--ocean)}
.btn-outline{border-color:var(--ocean);color:var(--ocean)}.btn-outline:hover{background:var(--ocean);color:#fff}
.btn-wa{background:#1f9d57;color:#fff}.btn-wa:hover{background:#17804a}
.btn-sm{padding:10px 20px;font-size:.9rem}

/* header */
.topbar{background:var(--ocean);color:#d9e6ec;font-size:.84rem;padding:8px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{font-family:var(--serif);font-size:1.9rem;font-weight:700;color:var(--ocean);text-decoration:none;letter-spacing:.02em}
.logo small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dune-d);font-weight:600;margin-top:-4px}
nav.main{display:flex;align-items:center;gap:26px}
nav.main a{text-decoration:none;color:var(--ink);font-weight:500;font-size:.95rem}
nav.main a:hover,nav.main a.on{color:var(--dune-d)}
.menu-btn{display:none;background:none;border:0;font-size:1.8rem;color:var(--ocean);cursor:pointer}

/* hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;color:#fff;padding:90px 0 120px;
  background:linear-gradient(180deg,rgba(18,48,63,.55),rgba(18,48,63,.75)),url(../images/hero.jpg) center/cover,linear-gradient(135deg,#c98a4b 0%,#8a5a2b 45%,#12303f 100%)}
.hero.sm{min-height:46vh;padding:70px 0}
.hero h1{color:#fff;max-width:14ch}
.hero p.sub{font-size:1.25rem;max-width:56ch;margin:20px 0 30px;color:#f1e9dc}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:8px 16px;border-radius:999px;font-size:.85rem;backdrop-filter:blur(4px)}

/* availability bar */
.avail{margin-top:-62px;position:relative;z-index:5}
.avail form{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:22px;display:grid;grid-template-columns:repeat(4,1fr) auto;gap:14px;align-items:end;border:1px solid var(--line)}
label{font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:6px}
input,select,textarea{width:100%;padding:13px 14px;border:1px solid #d6ccb8;border-radius:10px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--dune);border-color:var(--dune)}

/* trust strip */
.trust{padding:46px 0 0}
.trust ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.trust li{text-align:center;padding:6px 10px}
.trust strong{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--ocean)}
.trust span{font-size:.9rem;color:var(--muted)}

/* cards */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.apt{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);display:flex;flex-direction:column}
.apt .ph{height:290px;background-size:cover;background-position:center;position:relative}
.ph.garden{background-image:url(../images/garden-view-1.jpg),linear-gradient(135deg,#6f8f5a,#c9b27a)}
.ph.dune{background-image:url(../images/dune-view-1.jpg),linear-gradient(135deg,#d9a35f,#12303f)}
.tag{position:absolute;top:16px;left:16px;background:var(--ocean);color:#fff;padding:6px 14px;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.04em}
.apt .body{padding:28px;display:flex;flex-direction:column;gap:14px;flex:1}
.apt ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:.93rem;color:var(--muted)}
.apt li:before{content:"✓";color:var(--ok);font-weight:700;margin-right:8px}
.price{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.price b{font-family:var(--serif);font-size:2.2rem;color:var(--ocean)}
.price span{color:var(--muted);font-size:.88rem}
.apt .row{display:flex;gap:10px;flex-wrap:wrap}
.feat{padding:28px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.feat .ic{font-size:1.8rem;margin-bottom:10px}
.feat h3{font-size:1.45rem;margin-bottom:8px}.feat p{color:var(--muted);font-size:.96rem}

/* split */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.split .pic{min-height:420px;border-radius:var(--r);box-shadow:var(--shadow);background:url(../images/dunes.jpg) center/cover,linear-gradient(160deg,#e0b27a,#12303f)}
table.dist{width:100%;border-collapse:collapse;margin-top:18px}
table.dist td{padding:12px 0;border-bottom:1px solid var(--line)}table.dist td:last-child{text-align:right;font-weight:600;color:var(--ocean)}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.acts span{background:var(--sand);padding:9px 16px;border-radius:999px;font-size:.9rem;border:1px solid var(--line)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.step{padding:30px;background:#fff;border-radius:var(--r);border:1px solid var(--line);position:relative}
.step:before{counter-increment:s;content:counter(s);font-family:var(--serif);font-size:3.2rem;color:var(--dune);line-height:1;display:block;margin-bottom:6px}
.step p{color:var(--muted);font-size:.96rem}

/* award */
.award{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--ocean);color:#fff;padding:30px;border-radius:var(--r)}
.award h3{color:#fff}.award p{color:#cfe0e8}
.medal{font-size:2.6rem}

/* faq */
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font-weight:600;font-size:1.05rem;color:var(--ocean);list-style:none;display:flex;justify-content:space-between;gap:20px}
summary:after{content:"+";font-size:1.5rem;color:var(--dune);line-height:1}
details[open] summary:after{content:"–"}
details p{margin-top:12px;color:var(--muted);max-width:75ch}
.faq{max-width:820px;margin:0 auto}

/* cta band */
.band{background:linear-gradient(120deg,var(--ocean),var(--ocean-2));color:#fff;text-align:center;padding:84px 0}
.band h2{color:#fff}.band p{color:#cfe0e8;margin:14px auto 28px;max-width:56ch}
.band .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* compare */
table.cmp{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
table.cmp th,table.cmp td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:.96rem}
table.cmp th{background:var(--ocean);color:#fff;font-weight:600}
table.cmp td:first-child{font-weight:600;color:var(--ocean);background:var(--sand)}

/* gallery */
.gallery{columns:3;column-gap:18px}
.gallery figure{break-inside:avoid;margin-bottom:18px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.gallery img{width:100%}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:46px}
.cbox{background:var(--sand);padding:34px;border-radius:var(--r);height:fit-content}
.cbox p{margin:10px 0}.cbox a{font-weight:600}
form.enq{display:grid;gap:16px;background:#fff;padding:34px;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--line)}
form.enq .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.note{font-size:.84rem;color:var(--muted)}
.policy{background:var(--sand);padding:22px 26px;border-radius:var(--r);border-left:4px solid var(--dune)}

/* footer */
footer{background:#0c2029;color:#a9bcc5;padding:64px 0 100px;font-size:.93rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
footer h4{color:#fff;font-family:var(--serif);font-size:1.3rem;margin-bottom:12px}
footer a{color:#a9bcc5;text-decoration:none;display:block;margin:6px 0}footer a:hover{color:#fff}
footer .legal{border-top:1px solid #1f3844;margin-top:40px;padding-top:20px;font-size:.82rem}

/* sticky mobile bar */
.sticky{display:none}
@media(max-width:920px){
  section{padding:60px 0}
  nav.main{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;flex-direction:column;padding:22px;border-bottom:1px solid var(--line);align-items:flex-start}
  nav.main.open{display:flex}.menu-btn{display:block}
  .grid2,.grid3,.split,.steps,.contact-grid,footer .cols,.trust ul{grid-template-columns:1fr 1fr}
  .split,.contact-grid,.grid2{grid-template-columns:1fr}
  .grid3,.steps{grid-template-columns:1fr}
  .avail form{grid-template-columns:1fr 1fr}.avail form .btn{grid-column:1/-1}
  .gallery{columns:2}
  .topbar .wrap span:last-child{display:none}
  .sticky{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;box-shadow:0 -6px 20px rgba(0,0,0,.14)}
  .sticky a{padding:15px 4px;text-align:center;font-weight:600;font-size:.88rem;text-decoration:none;color:var(--ocean)}
  .sticky a.b{background:var(--dune);color:#fff}
}
@media(max-width:560px){.trust ul,.avail form,form.enq .two,footer .cols{grid-template-columns:1fr}.gallery{columns:1}.hero{padding-bottom:100px}}

/* logo + badges */
.logo{display:flex;align-items:center}
.logo img{height:56px;width:auto;display:block}
footer .badges{background:#fff;border-radius:12px;padding:14px 18px;margin-top:36px}
footer .badges img{width:100%;max-width:760px;height:auto;margin:0 auto}
@media(max-width:560px){.logo img{height:46px}}