/* ============================================================================
   Lowkey Design System
   A calm, editorial "affordable-luxury" look: deep navy + warm gold on cream,
   Cormorant Garamond display serif over Inter body text.

   Requires: Bootstrap 5 (grid/utilities), Font Awesome 6, Google Fonts
   (Cormorant Garamond + Inter). Everything below is the custom layer on top.

   Recolour the whole system by overriding the CSS variables in :root.
   ==========================================================================*/
:root{
  --navy:#0f3a51;        /* primary brand colour  */
  --navy-deep:#0a2c3e;   /* darker navy for hovers */
  --cream:#f3ede1;       /* page background        */
  --sand:#ece2d2;        /* alt section background */
  --gold:#c9a24b;        /* accent / calls-to-action */
  --gold-soft:#d9bd7e;   /* accent hover           */
  --ink:#22323b;         /* body text              */
  --muted:#6b7a82;       /* secondary text         */
}
*{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,sans-serif;color:var(--ink);background:var(--cream)}

/* Typography */
h1,h2,h3,.serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;letter-spacing:.2px}
.serif-i{font-style:italic}
.eyebrow{letter-spacing:.32em;text-transform:uppercase;font-size:.72rem;font-weight:600;color:var(--gold)}
.kicker{letter-spacing:.3em;text-transform:uppercase;font-size:.72rem;color:var(--gold);font-weight:600}
.muted{color:var(--muted)}
a{color:inherit}
.display-serif{font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1.02}
.section-title{position:relative;font-weight:700;font-family:"Cormorant Garamond",serif}
.section-title::after{content:"";display:block;width:64px;height:3px;background:var(--gold);margin-top:.5rem;border-radius:2px}
.rule-gold{width:64px;height:3px;background:var(--gold);border-radius:2px}

/* Colour helpers */
.text-gold{color:var(--gold)!important}
.text-brand{color:var(--navy)!important}
.bg-navy{background:var(--navy)!important}
.bg-cream{background:var(--cream)!important}
.bg-sand{background:var(--sand)!important}
.bg-brand{background:var(--navy)!important}

/* Buttons */
.btn-gold{background:var(--gold);border:1px solid var(--gold);color:var(--navy-deep);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;padding:.7rem 1.4rem;border-radius:2px;display:inline-block;text-decoration:none;cursor:pointer}
.btn-gold:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--navy-deep)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;padding:.6rem 1.2rem;border-radius:2px;display:inline-block;text-decoration:none;cursor:pointer}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-navy,.btn-brand{background:var(--navy);border:1px solid var(--navy);color:#fff;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;padding:.7rem 1.4rem;border-radius:2px;display:inline-block;text-decoration:none;cursor:pointer}
.btn-navy:hover,.btn-brand:hover{background:var(--navy-deep);color:#fff}

/* Nav */
.lk-nav{position:sticky;top:0;z-index:1030;padding:.6rem 0;background:var(--navy);box-shadow:0 6px 24px rgba(10,44,62,.18)}
.lk-nav .brand-logo{height:42px}
.lk-nav .nav-link{color:#e7eef2;font-size:.9rem;font-weight:500;padding:.4rem .9rem}
.lk-nav .nav-link:hover,.lk-nav .nav-link.active{color:var(--gold)}
.lk-nav .dropdown-menu{--bs-dropdown-min-width:12rem}

/* Hero */
.hero{position:relative;min-height:100vh;color:#fff;overflow:hidden;display:flex;align-items:center}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,44,62,.85),rgba(10,44,62,.35) 60%,rgba(10,44,62,.55))}
.hero__content{position:relative;z-index:2}
.hero h1{font-size:clamp(3rem,7vw,6rem);line-height:.98}
.hero__stats{position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:1px solid rgba(255,255,255,.15);background:rgba(10,44,62,.35);backdrop-filter:blur(4px)}
.hero__stats .item{font-size:.82rem;color:#dfe8ec}

/* Cards */
.card-hover{transition:transform .25s,box-shadow .25s}
.card-hover:hover{transform:translateY(-5px)}
.tour-card{background:#fff;border:1px solid #e7dfce;border-radius:6px;overflow:hidden;height:100%;display:flex;flex-direction:column}
.tour-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.tour-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tour-card:hover .tour-media img{transform:scale(1.06)}
.tour-media .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,44,62,.15),rgba(10,44,62,.75))}
.badge-cat{position:absolute;top:.7rem;left:.7rem;background:var(--gold);color:var(--navy-deep);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .6rem;border-radius:2px}
.badge-avail{position:absolute;top:.7rem;right:.7rem;background:rgba(10,44,62,.85);color:#fff;font-size:.68rem;padding:.3rem .6rem;border-radius:2px;border:1px solid rgba(255,255,255,.25)}
.bracket{position:absolute;left:.9rem;bottom:.7rem;color:rgba(255,255,255,.85);font-size:.72rem;letter-spacing:.05em}
.bracket::before{content:"[ "} .bracket::after{content:" ]"}
.meta-line{font-size:.72rem;letter-spacing:.06em}
.meta-line .k{color:var(--gold);text-transform:uppercase;font-weight:700;letter-spacing:.12em;font-size:.66rem}
.price-pill{color:var(--gold);font-weight:700}

/* Image mosaic tile */
.dest-tile{position:relative;border-radius:6px;overflow:hidden;min-height:230px;display:flex;align-items:flex-end;color:#fff;background:var(--navy)}
.dest-tile.tall{min-height:360px}
.dest-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.dest-tile:hover img{transform:scale(1.07)}
.dest-tile .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,44,62,.15),rgba(10,44,62,.82))}
.dest-tile .body{position:relative;padding:1.1rem 1.2rem}

/* Filter pills */
.pill{border:1px solid #c9bfa8;background:transparent;color:var(--ink);border-radius:40px;padding:.4rem 1.1rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.2s}
.pill:hover{border-color:var(--navy)}
.pill.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* Forms */
.lk-input{width:100%;border:1px solid #d7cbb4;background:#fff;border-radius:4px;padding:.7rem .85rem;font-size:.92rem;color:var(--ink)}
.lk-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.18)}
.lk-label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.3rem;display:block}

/* FAQ accordion */
.faq{border-bottom:1px solid #d9cfb9}
.faq button{width:100%;text-align:left;background:none;border:none;padding:1.1rem 0;font-family:"Cormorant Garamond",serif;font-size:1.4rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.faq .ans{max-height:0;overflow:hidden;transition:max-height .3s;color:var(--muted)}
.faq.open .ans{max-height:300px;padding-bottom:1.1rem}
.faq .plus{color:var(--gold);font-size:1.4rem}

/* Photo gallery + lightbox */
.lk-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.lk-gallery__item{position:relative;border-radius:6px;overflow:hidden;cursor:pointer;background:var(--navy);aspect-ratio:4/3}
.lk-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.lk-gallery__item:hover img{transform:scale(1.06)}
.lk-gallery__item figcaption{position:absolute;left:0;right:0;bottom:0;padding:.5rem .6rem;font-size:.72rem;color:#fff;background:linear-gradient(180deg,transparent,rgba(10,44,62,.85))}
#lkLightbox{position:fixed;inset:0;z-index:3500;background:rgba(6,24,34,.92);display:none;align-items:center;justify-content:center;flex-direction:column;padding:2rem}
#lkLightbox.open{display:flex}
#lkLightbox img{max-width:92vw;max-height:82vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#lkLightbox .cap{color:#e7eef2;margin-top:1rem;font-size:.9rem;letter-spacing:.04em}
#lkLightbox .close{position:absolute;top:1.2rem;right:1.4rem;color:#fff;font-size:1.8rem;cursor:pointer;background:none;border:none}

/* Page loader */
#lk-loader{position:fixed;inset:0;z-index:3000;background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s ease}
#lk-loader.done{opacity:0;visibility:hidden}
#lk-loader .mark{font-family:"Cormorant Garamond",serif;color:#fff;font-size:2rem;animation:lkpulse 1.8s ease-in-out infinite}
#lk-loader .track{width:170px;height:2px;margin-top:26px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
#lk-loader .track span{display:block;height:100%;width:40%;background:var(--gold);border-radius:2px;animation:lkslide 1.15s ease-in-out infinite}
@keyframes lkpulse{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1)}}
@keyframes lkslide{0%{transform:translateX(-130%)}100%{transform:translateX(330%)}}

/* Floating action button (e.g. WhatsApp / help / chat) */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:1040;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.28);font-size:1.75rem;text-decoration:none}
.wa-float:hover{color:#fff;transform:scale(1.08);box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;animation:wapulse 2.2s ease-out infinite}
@keyframes wapulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}
@media (max-width:575px){.wa-float{right:16px;bottom:16px;width:52px;height:52px;font-size:1.55rem}}

@media (prefers-reduced-motion:reduce){
  #lk-loader .mark,#lk-loader .track span,.wa-float::before{animation:none}
}