/*
Theme Name: SerenLanka
Theme URI: https://www.serenlanka.com/
Author: SerenLanka Studio
Author URI: https://www.serenlanka.com/
Description: A professional WordPress theme for Sri Lankan travel agencies and tour operators. Ships with Tour Packages, Success Stories (testimonials) and FAQ post types, package categories, an enquiry form and a full page set (Home, Holidays & Tours, Success Stories, About Us, FAQ, Contact Us).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: serenlanka
Tags: travel, tourism, blog, custom-menu, featured-images, threaded-comments, translation-ready, custom-logo, custom-colors, one-column, two-columns

SerenLanka WordPress Theme, Copyright 2026
SerenLanka is distributed under the terms of the GNU GPL.
*/

/* =========================================================
   0. DESIGN TOKENS
   Palette named for the island itself:
   - Ocean teal (the coastline)  - Turmeric gold (the spice trade)
   - Cinnamon (the export the island is named for in old maps)
   - Ceylon green (the hill-country tea estates)
   - Ivory (the sand)
   ========================================================= */
:root{
  --teal-900:#062f32;
  --teal-700:#0b5e63;
  --teal-600:#0f7a80;
  --teal-100:#e3f0ef;

  --gold-600:#e8a33d;
  --gold-400:#f2c476;
  --gold-100:#fbeed7;

  --cinnamon-600:#b85c38;
  --cinnamon-700:#93482c;

  --ceylon-500:#2f6e4e;
  --ceylon-700:#1f4a34;

  --ink-900:#16241f;
  --ink-700:#334339;
  --ink-500:#5c6b62;

  --ivory-000:#fbf6ec;
  --ivory-100:#f1e6d0;
  --white:#ffffff;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'Space Mono', 'Courier New', monospace;

  --radius-sm:6px;
  --radius-md:14px;
  --radius-lg:28px;

  --shadow-card: 0 1px 2px rgba(22,36,31,0.06), 0 12px 28px -12px rgba(22,36,31,0.18);
  --shadow-pop: 0 20px 44px -18px rgba(6,47,50,0.35);

  --container: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* =========================================================
   1. RESET & BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory-000);
  color:var(--ink-900);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:1rem;}
:focus-visible{outline:3px solid var(--gold-600);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--teal-900);
  line-height:1.12;
  margin:0 0 0.5em;
  font-weight:600;
}
h1{font-size:clamp(2.4rem,5vw,4.2rem); letter-spacing:-0.01em;}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem); letter-spacing:-0.01em;}
h3{font-size:1.4rem;}
p{margin:0 0 1em;color:var(--ink-700);}

.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.78rem;
  color:var(--cinnamon-600);
  display:inline-flex;
  align-items:center;
  gap:0.55em;
  margin-bottom:0.9em;
}
.eyebrow::before{
  content:"";
  width:22px;height:2px;
  background:var(--cinnamon-600);
  display:inline-block;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(1.25rem,4vw,2rem);
}
.section{padding:clamp(3.5rem,7vw,6.5rem) 0;}
.section--tight{padding:clamp(2.5rem,5vw,4rem) 0;}
.section--teal{background:var(--teal-900); color:var(--ivory-100);}
.section--teal h2, .section--teal h3{color:var(--white);}
.section--teal p{color:#cfe3e0;}
.section--sand{background:var(--ivory-100);}

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  padding:0.9em 1.7em;
  border-radius:999px;
  font-weight:600;
  font-size:0.95rem;
  border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--cinnamon-600); color:var(--white); box-shadow:var(--shadow-card);}
.btn-primary:hover{background:var(--cinnamon-700);}
.btn-outline{border-color:currentColor; color:var(--teal-900); background:transparent;}
.btn-outline:hover{background:var(--teal-900); color:var(--white);}
.btn-ghost-light{border-color:rgba(255,255,255,0.5); color:var(--white);}
.btn-ghost-light:hover{background:var(--white); color:var(--teal-900);}
.btn-gold{background:var(--gold-600); color:var(--teal-900);}
.btn-gold:hover{background:var(--gold-400);}

/* =========================================================
   2. HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,246,236,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(22,36,31,0.08);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.9rem 0;
  gap:1.5rem;
}
.site-branding{display:flex; align-items:center; gap:0.7rem;}
.site-branding img{max-height:44px;width:auto;}
.site-title{
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:700; color:var(--teal-900); margin:0;
}
.site-title a{display:flex;align-items:center;gap:0.6rem;}
.site-tagline{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--cinnamon-600);
  margin:0;
}

.primary-nav ul{display:flex; align-items:center; gap:2rem;}
.primary-nav a{
  font-weight:600; font-size:0.95rem; color:var(--ink-900);
  position:relative; padding:0.3em 0;
}
.primary-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--cinnamon-600); transition:right .22s ease;
}
.primary-nav a:hover::after, .primary-nav .current-menu-item a::after{right:0;}

.header-actions{display:flex; align-items:center; gap:1rem;}
.header-phone{
  font-family:var(--font-mono); font-size:0.85rem; color:var(--teal-700);
  display:flex; align-items:center; gap:0.5em;
}
.menu-toggle{
  display:none; background:none; border:2px solid var(--teal-900); border-radius:8px;
  width:42px; height:38px; align-items:center; justify-content:center;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--teal-900);
  position:relative; transition:all .2s ease;
}
.menu-toggle span::before{position:absolute; top:-6px;}
.menu-toggle span::after{position:absolute; top:6px;}

@media (max-width:900px){
  .primary-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--ivory-000); border-bottom:1px solid rgba(22,36,31,0.1);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .primary-nav.is-open{max-height:400px;}
  .primary-nav ul{flex-direction:column; align-items:flex-start; padding:1.5rem clamp(1.25rem,4vw,2rem); gap:1.1rem;}
  .menu-toggle{display:inline-flex;}
  .header-phone{display:none;}
}

/* =========================================================
   3b. TOP BANNER (optional full-width landscape photo above hero)
   ========================================================= */
.top-banner{
  width:100%; overflow:hidden; line-height:0;
}
.top-banner img{
  width:100%; height:clamp(260px, 42vw, 560px); object-fit:cover; display:block;
}

/* =========================================================
   3. HERO (signature: coastline wave)
   ========================================================= */
.hero{
  position:relative;
  background:linear-gradient(180deg, var(--teal-900) 0%, var(--teal-700) 100%);
  color:var(--white);
  overflow:hidden;
  padding-top:clamp(3.5rem,8vw,6rem);
}
.hero.has-bg-photo{
  background-size:cover;
  background-position:center;
}
.hero.has-bg-photo .hero-grid{ grid-template-columns:1fr; }
.hero.has-bg-photo .hero-copy{ max-width:640px; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--gap);
  align-items:center; padding-bottom:clamp(5rem,10vw,8rem);
}
.hero-eyebrow{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.16em;
  font-size:0.78rem; color:var(--gold-400); margin-bottom:1rem; display:block;
}
.hero h1{color:var(--white); margin-bottom:0.5rem;}
.hero h1 em{font-style:italic; color:var(--gold-400); font-weight:400;}
.hero-sub{color:#d8e8e5; font-size:1.1rem; max-width:44ch;}
.hero-cta{display:flex; gap:1rem; margin-top:1.6rem; flex-wrap:wrap;}
.hero-stats{display:flex; gap:2.2rem; margin-top:2.6rem; flex-wrap:wrap;}
.hero-stat b{display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--gold-400);}
.hero-stat span{font-size:0.8rem; color:#bcd6d2; font-family:var(--font-mono); letter-spacing:0.04em;}

.hero-art{position:relative;}
.hero-art img{border-radius:var(--radius-lg); box-shadow:var(--shadow-pop);}
.hero-stamp{
  position:absolute; bottom:-18px; left:-18px;
  width:110px; height:110px;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{order:-1;}
}

.wave-divider{display:block; width:100%; line-height:0; margin-top:-2px;}
.wave-divider svg{width:100%; height:auto; display:block;}

/* =========================================================
   4. HOW IT WORKS (real sequence -> numbered is justified)
   ========================================================= */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem; position:relative;
}
.steps::before{
  content:""; position:absolute; top:26px; left:8%; right:8%; height:2px;
  background-image:linear-gradient(90deg, var(--cinnamon-600) 0 60%, transparent 0 100%);
  background-size:14px 2px; background-repeat:repeat-x;
}
.step{position:relative; text-align:left;}
.step-num{
  width:52px; height:52px; border-radius:50%;
  background:var(--white); border:2px solid var(--cinnamon-600);
  color:var(--cinnamon-600); font-family:var(--font-mono); font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem; position:relative; z-index:2;
}
.step h4{font-family:var(--font-display); font-size:1.15rem; margin-bottom:0.4rem; color:var(--teal-900);}
.step p{font-size:0.92rem; margin:0;}
@media (max-width:800px){
  .steps{grid-template-columns:1fr 1fr; row-gap:2.2rem;}
  .steps::before{display:none;}
}

/* =========================================================
   5. PACKAGE CARDS / GRID
   ========================================================= */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap);}
@media (max-width:960px){ .grid-3{grid-template-columns:1fr 1fr;} }
@media (max-width:680px){ .grid-3, .grid-2{grid-template-columns:1fr;} }

.package-card{
  background:var(--white); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-card); transition:transform .22s ease, box-shadow .22s ease;
  display:flex; flex-direction:column;
}
.package-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-pop);}
.package-thumb{position:relative; aspect-ratio:4/3; overflow:hidden;}
.package-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.package-card:hover .package-thumb img{transform:scale(1.06);}
.package-tag{
  position:absolute; top:14px; left:14px;
  background:var(--gold-600); color:var(--teal-900);
  font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em;
  padding:0.35em 0.8em; border-radius:999px; font-weight:700;
}
.package-body{padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:0.6rem; flex:1;}
.package-body h3{font-size:1.2rem; margin-bottom:0;}
.package-meta{
  display:flex; gap:1rem; font-family:var(--font-mono); font-size:0.78rem;
  color:var(--teal-700); flex-wrap:wrap;
}
.package-meta span{display:flex; align-items:center; gap:0.35em;}
.package-excerpt{font-size:0.92rem; color:var(--ink-500); flex:1;}
.package-footer{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px dashed rgba(22,36,31,0.15); padding-top:0.9rem; margin-top:0.4rem;
}
.package-price{font-family:var(--font-display); color:var(--cinnamon-600); font-size:1.25rem; font-weight:700;}
.package-price small{font-family:var(--font-body); font-size:0.7rem; color:var(--ink-500); font-weight:400;}

.filter-bar{display:flex; flex-wrap:wrap; gap:0.7rem; margin-bottom:2.5rem;}
.filter-bar a{
  padding:0.5em 1.1em; border-radius:999px; border:1.5px solid rgba(22,36,31,0.15);
  font-size:0.85rem; font-weight:600; color:var(--ink-700);
}
.filter-bar a.is-active, .filter-bar a:hover{
  background:var(--teal-900); border-color:var(--teal-900); color:var(--white);
}

/* =========================================================
   6. DESTINATION TILES
   ========================================================= */
.dest-tile{
  position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:3/4;
  box-shadow:var(--shadow-card);
}
.dest-tile img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.dest-tile:hover img{transform:scale(1.08);}
.dest-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(6,47,50,0.88) 100%);
}
.dest-label{
  position:absolute; left:1.1rem; bottom:1.1rem; right:1.1rem; z-index:2; color:var(--white);
}
.dest-label span{font-family:var(--font-mono); font-size:0.72rem; color:var(--gold-400); text-transform:uppercase; letter-spacing:0.1em;}
.dest-label h4{color:var(--white); margin:0.2em 0 0;}

/* =========================================================
   7. TRUST / STAMPS
   ========================================================= */
.trust-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center;}
@media (max-width:800px){ .trust-row{grid-template-columns:1fr 1fr;} }
.trust-item{padding:1.5rem 1rem;}
.trust-item .stamp{
  width:70px; height:70px; margin:0 auto 0.8rem; border-radius:50%;
  border:2px dashed var(--cinnamon-600); display:flex; align-items:center; justify-content:center;
  transform:rotate(-6deg); color:var(--cinnamon-600);
}
.trust-item h4{font-size:1rem; margin-bottom:0.3rem;}
.trust-item p{font-size:0.85rem; margin:0;}

/* =========================================================
   8. TESTIMONIALS / SUCCESS STORIES
   ========================================================= */
.testimonial-card{
  background:var(--white); border-radius:var(--radius-md); padding:2rem;
  box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:1rem; height:100%;
}
.testimonial-quote{
  font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--teal-900);
  line-height:1.5;
}
.testimonial-rating{color:var(--gold-600); letter-spacing:0.2em; font-size:0.9rem;}
.testimonial-person{display:flex; align-items:center; gap:0.9rem; margin-top:auto;}
.testimonial-avatar{
  width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid var(--gold-400);
}
.testimonial-avatar img{width:100%; height:100%; object-fit:cover;}
.testimonial-person strong{display:block; font-size:0.95rem; color:var(--ink-900);}
.testimonial-person span{font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-500);}

/* =========================================================
   9. CTA BANNER
   ========================================================= */
.cta-banner{
  background:var(--cinnamon-600); color:var(--white); border-radius:var(--radius-lg);
  padding:clamp(2.5rem,5vw,4rem); display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
}
.cta-banner h2{color:var(--white); margin-bottom:0.3rem;}
.cta-banner p{color:#ffe3d3; margin:0;}

/* =========================================================
   10. FOOTER
   ========================================================= */
.site-footer{background:var(--teal-900); color:#c9dedb; margin-top:4rem;}
.footer-top{
  padding:clamp(3rem,6vw,4.5rem) 0 2.5rem;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem;
}
@media (max-width:900px){ .footer-top{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer-top{grid-template-columns:1fr;} }
.footer-top h4{color:var(--gold-400); font-family:var(--font-mono); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:1.1rem;}
.footer-top a{opacity:0.85;}
.footer-top a:hover{opacity:1; color:var(--gold-400);}
.footer-top li{margin-bottom:0.6rem; font-size:0.92rem;}
.footer-brand p{color:#a9c6c1; font-size:0.9rem; max-width:32ch;}
.footer-social{display:flex; gap:0.7rem; margin-top:1.2rem;}
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center; font-size:0.85rem;
}
.footer-social a:hover{background:var(--gold-600); border-color:var(--gold-600); color:var(--teal-900);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12); padding:1.4rem 0;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem;
  font-size:0.8rem; color:#9cbab5;
}

/* =========================================================
   11. INNER PAGE HERO (About / FAQ / Contact / Packages / Success Stories)
   ========================================================= */
.page-hero{
  background:var(--teal-900); color:var(--white); padding:clamp(3rem,6vw,4.5rem) 0 clamp(4rem,7vw,5.5rem);
  position:relative;
}
.page-hero h1{color:var(--white); margin-bottom:0.4rem;}
.page-hero p{color:#cfe3e0; max-width:60ch;}
.breadcrumbs{font-family:var(--font-mono); font-size:0.75rem; color:var(--gold-400); text-transform:uppercase; letter-spacing:0.08em;}

/* =========================================================
   12. FAQ ACCORDION
   ========================================================= */
.faq-list{max-width:820px; margin:0 auto;}
.faq-item{border-bottom:1px solid rgba(22,36,31,0.12);}
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.4rem 0; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; font-family:var(--font-display); font-size:1.1rem; color:var(--teal-900);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+"; font-family:var(--font-mono); font-size:1.4rem; color:var(--cinnamon-600); flex-shrink:0; transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-answer{padding:0 0 1.5rem; color:var(--ink-500); max-width:70ch;}

/* =========================================================
   13. CONTACT PAGE
   ========================================================= */
.contact-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:var(--gap); align-items:start;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.contact-card{
  background:var(--white); border-radius:var(--radius-md); padding:2rem; box-shadow:var(--shadow-card);
  margin-bottom:1.2rem;
}
.contact-card .eyebrow{margin-bottom:0.5rem;}
.contact-card h4{margin-bottom:0.3rem;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
@media (max-width:560px){ .form-row{grid-template-columns:1fr;} }
.form-field{margin-bottom:1.1rem;}
.form-field label{display:block; font-size:0.85rem; font-weight:600; margin-bottom:0.4rem; color:var(--teal-900);}
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:0.85em 1em; border:1.5px solid rgba(22,36,31,0.18); border-radius:var(--radius-sm);
  background:var(--ivory-000);
}
.form-field input:focus, .form-field textarea:focus{border-color:var(--teal-700); background:var(--white);}
.form-note{font-size:0.8rem; color:var(--ink-500); margin-top:0.6rem;}
.form-success{background:var(--ceylon-500); color:var(--white); padding:1em 1.3em; border-radius:var(--radius-sm); margin-bottom:1.5rem;}
.form-error{background:#8f3b2b; color:var(--white); padding:1em 1.3em; border-radius:var(--radius-sm); margin-bottom:1.5rem;}

/* =========================================================
   14. SINGLE PACKAGE
   ========================================================= */
.package-hero-img{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); aspect-ratio:16/7; margin-bottom:2.5rem;}
.package-hero-img img{width:100%; height:100%; object-fit:cover;}
.package-single-layout{display:grid; grid-template-columns:1fr 340px; gap:var(--gap); align-items:start;}
@media (max-width:960px){ .package-single-layout{grid-template-columns:1fr;} }
.package-content h2{margin-top:2rem;}
.package-facts{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0 2rem;}
.fact-box{background:var(--white); border-radius:var(--radius-sm); padding:1rem 1.2rem; box-shadow:var(--shadow-card);}
.fact-box span{display:block; font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--cinnamon-600); margin-bottom:0.3em;}
.fact-box strong{font-family:var(--font-display); font-size:1.15rem; color:var(--teal-900);}
.gallery-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:0.7rem; margin:1.5rem 0 2rem;}
@media (max-width:640px){ .gallery-strip{grid-template-columns:1fr 1fr;} }
.gallery-strip img{border-radius:var(--radius-sm); aspect-ratio:1/1; object-fit:cover;}
.itinerary-day{
  border-left:2px solid var(--cinnamon-600); padding:0.2rem 0 1.5rem 1.4rem; position:relative; margin-left:0.4rem;
}
.itinerary-day::before{
  content:""; position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--cinnamon-600);
}
.itinerary-day h4{font-size:1.05rem; margin-bottom:0.3rem;}
.inc-exc{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin:1.5rem 0;}
@media (max-width:640px){ .inc-exc{grid-template-columns:1fr;} }
.inc-exc ul li{padding:0.35em 0; font-size:0.92rem; padding-left:1.4em; position:relative;}
.inc-list li::before{content:"✓"; position:absolute; left:0; color:var(--ceylon-500); font-weight:700;}
.exc-list li::before{content:"✕"; position:absolute; left:0; color:var(--cinnamon-700); font-weight:700;}

.booking-box{
  background:var(--white); border-radius:var(--radius-md); padding:1.8rem; box-shadow:var(--shadow-pop);
  position:sticky; top:100px;
}
.booking-box .package-price{font-size:2rem; display:block; margin-bottom:0.2rem;}
.booking-box .btn{width:100%; justify-content:center; margin-top:0.8rem;}

/* =========================================================
   15. ABOUT PAGE
   ========================================================= */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; margin-top:2.5rem;}
@media (max-width:800px){ .stat-row{grid-template-columns:1fr 1fr;} }
.stat-row b{display:block; font-family:var(--font-display); font-size:2.6rem; color:var(--cinnamon-600);}
.stat-row span{font-family:var(--font-mono); font-size:0.78rem; color:var(--teal-700); text-transform:uppercase; letter-spacing:0.06em;}
.about-split{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center;}
@media (max-width:860px){ .about-split{grid-template-columns:1fr;} }
.about-split img{border-radius:var(--radius-lg); box-shadow:var(--shadow-card);}

/* =========================================================
   16b. PHOTO GALLERY + LIGHTBOX
   ========================================================= */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
}
@media (max-width:900px){ .gallery-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:600px){ .gallery-grid{grid-template-columns:repeat(2,1fr); gap:0.7rem;} }
.gallery-grid-item{
  position:relative; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-card);
  aspect-ratio:4/3;
}
.gallery-grid-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;}
.gallery-grid-item:hover img{transform:scale(1.04);}
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0; padding:0.6em 0.8em;
  background:linear-gradient(0deg, rgba(6,47,50,0.85), transparent);
  color:var(--white); font-size:0.78rem; font-family:var(--font-mono);
}

.lightbox-overlay{
  position:fixed; inset:0; background:rgba(6,20,20,0.94); z-index:200;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.lightbox-overlay.is-open{opacity:1; pointer-events:auto;}
.lightbox-img{max-width:88vw; max-height:80vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.lightbox-caption{
  position:absolute; bottom:6%; left:0; right:0; text-align:center;
  color:var(--ivory-100); font-family:var(--font-mono); font-size:0.85rem;
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.3);
  color:var(--white); border-radius:50%; width:44px; height:44px; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{background:var(--gold-600); color:var(--teal-900); border-color:var(--gold-600);}
.lightbox-close{top:24px; right:24px;}
.lightbox-prev{left:24px; top:50%; transform:translateY(-50%);}
.lightbox-next{right:24px; top:50%; transform:translateY(-50%);}
@media (max-width:640px){
  .lightbox-prev, .lightbox-next{width:38px; height:38px; font-size:1.1rem;}
  .lightbox-close{top:12px; right:12px;}
}

/* =========================================================
   16. MISC / BLOG / PAGINATION / WIDGETS
   ========================================================= */
.pagination{display:flex; gap:0.6rem; justify-content:center; margin-top:3rem;}
.pagination a, .pagination span{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1.5px solid rgba(22,36,31,0.15); font-family:var(--font-mono); font-size:0.85rem;
}
.pagination .current{background:var(--teal-900); color:var(--white); border-color:var(--teal-900);}
.empty-state{text-align:center; padding:4rem 1rem; color:var(--ink-500);}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--teal-900); color:var(--white); padding:0.8em 1.2em; z-index:100;}
.skip-link:focus{left:1rem; top:1rem;}