:root{
  --black:#111111; --white:#f7f5f0; --gold:#c9a15a; --gold-soft:#e0c48d;
  --text-dim:#8a8578; --border:#2a2a2a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font-family:'Almarai',Tahoma,sans-serif;line-height:1.7}
h1,h2,h3{font-family:'Markazi Text',serif;margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select{font-family:inherit}

.back-pill{position:fixed;inset-block-start:16px;inset-inline-start:16px;z-index:110;background:rgba(17,17,17,.88);color:var(--gold-soft);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700}

/* ---- Topbar ---- */
.topbar{position:sticky;inset-block-start:0;z-index:80;background:rgba(247,245,240,.92);backdrop-filter:blur(8px);border-block-end:1px solid #e5e0d5}
.topbar__inner{max-width:1300px;margin-inline:auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{width:36px;height:36px;border-radius:50%;background:var(--black);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Markazi Text',serif;font-weight:700;font-size:20px}
.brand__name{font-family:'Markazi Text',serif;font-weight:700;font-size:19px}
.topbar__links{display:flex;gap:26px;font-size:14.5px;font-weight:700}
.topbar__links a:hover{color:var(--gold)}

/* ---- Intro (no big hero, editorial style) ---- */
.intro{max-width:900px;margin:56px auto 30px;padding:0 24px;text-align:center}
.intro__eyebrow{color:var(--gold);font-weight:700;font-size:13.5px;letter-spacing:.5px}
.intro__title{font-size:clamp(30px,5vw,52px);line-height:1.25;margin:10px 0 14px}
.intro__title span{color:var(--gold)}
.intro__lead{color:var(--text-dim);font-size:16px}

/* ---- Filters ---- */
.gallery{max-width:1300px;margin:0 auto;padding:0 24px 60px}
.gallery__filters{display:flex;gap:10px;justify-content:center;margin-block-end:26px;flex-wrap:wrap}
.chip{border:1px solid #d8d2c2;color:var(--black);padding:9px 20px;border-radius:999px;font-size:13.5px;font-weight:700;transition:all .18s}
.chip.is-active{background:var(--black);border-color:var(--black);color:var(--gold)}

/* ---- Masonry editorial grid ---- */
.masonry{column-count:3;column-gap:16px}
.m-item{break-inside:avoid;margin-block-end:16px;position:relative;overflow:hidden;border-radius:6px;cursor:pointer}
.m-item[hidden]{display:none}
.m-item img{width:100%;display:block;transition:transform .5s ease}
.m-item:hover img{transform:scale(1.06)}
.m-item--tall img{aspect-ratio:3/4;object-fit:cover}
.m-item--wide img{aspect-ratio:4/3;object-fit:cover}
.m-item__tag{position:absolute;inset-block-start:10px;inset-inline-start:10px;background:rgba(17,17,17,.75);color:var(--gold-soft);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}

/* ---- Packages ---- */
.packages{background:var(--black);color:var(--white);padding:60px 24px}
.packages__head{max-width:1300px;margin:0 auto 30px;text-align:center}
.packages__eyebrow{color:var(--gold);font-weight:700;font-size:13.5px}
.packages__head h2{font-size:clamp(26px,4vw,36px);margin-block-start:8px}
.packages__grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.package-card{background:#1a1a1a;border:1px solid var(--border);border-radius:12px;padding:26px}
.package-card__name{font-family:'Markazi Text',serif;font-size:24px;color:var(--gold);margin-block-end:6px}
.package-card__price{font-size:22px;font-weight:800;margin-block-end:14px}
.package-card__price span{font-size:13px;color:var(--text-dim);font-weight:400}
.package-card ul{margin:0;padding-inline-start:18px;color:#cfc9ba;font-size:14px;line-height:2}

/* ---- Booking ---- */
.booking{padding:70px 24px}
.booking__inner{max-width:640px;margin:0 auto}
.booking__head{text-align:center;margin-block-end:30px}
.booking__form{display:grid;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:700;color:var(--text-dim)}
.field input,.field select{padding:12px 14px;border:1px solid #d8d2c2;border-radius:8px;font-size:14.5px;background:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;border-radius:8px;font-weight:800;font-size:15px}
.btn--primary{background:var(--black);color:var(--gold)}
.btn--block{width:100%}
.booking__success{text-align:center;background:#f1ead9;border-radius:12px;padding:30px;border:1px solid var(--gold-soft)}
.booking__success h3{font-size:22px;margin-block-end:10px}
.booking__next{color:var(--text-dim);font-size:14px}

/* ---- Footer ---- */
.site-footer{background:#0c0c0c;color:#e8e3d5;padding:44px 24px 24px}
.site-footer__grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.site-footer__grid h4{color:var(--gold);font-size:15px;margin:0 0 10px}
.site-footer__grid p{margin:0 0 6px;font-size:13px;color:#b8b2a0;line-height:1.7}
.site-footer__bottom{text-align:center;font-size:12px;color:#7a7565;margin-block-start:26px;padding-block-start:18px;border-block-start:1px solid #2a2a2a}

/* ---- WhatsApp FAB ---- */
.wa-fab{position:fixed;inset-block-end:24px;inset-inline-end:24px;width:54px;height:54px;border-radius:50%;background:#25D366;color:#0a0a0a;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:90}

/* ---- Lightbox ---- */
.lightbox{position:fixed;inset:0;background:rgba(10,10,10,.94);z-index:300;display:flex;align-items:center;justify-content:center;padding:30px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:90vh;border-radius:6px}
.lightbox__close{position:fixed;inset-block-start:20px;inset-inline-end:20px;width:40px;height:40px;background:#fff;border-radius:50%;font-size:18px}

/* ---- Responsive ---- */
@media (max-width:1024px){
  .masonry{column-count:2}
  .packages__grid{grid-template-columns:1fr;gap:16px}
  .site-footer__grid{grid-template-columns:1fr;text-align:center}
}
@media (max-width:768px){
  .topbar__links{gap:14px;font-size:12.5px}
  .brand__name{font-size:16px}
  .intro{margin-block-start:36px}
}
@media (max-width:420px){
  .masonry{column-count:1}
}