/* ===================================================================
   White Desert Camping Tours — Design System
   Palette: desert night, chalk, dune gold, burnt clay
   Type: Fraunces (display) + Work Sans (body)
=================================================================== */

:root{
  --night:      #11151d;   /* deep desert-night navy, hero/footer bg */
  --night-2:    #1b2130;   /* lighter panel on night */
  --bone:       #f3efe4;   /* chalk / page background */
  --bone-2:     #ece5d4;   /* slightly deeper bone for panels */
  --ink:        #221f19;   /* body text, warm near-black */
  --dune:       #c99a4e;   /* sand gold accent */
  --dune-dark:  #a87c34;
  --clay:       #9a3f24;   /* burnt clay accent, CTAs */
  --clay-dark:  #7e321c;
  --line:       rgba(34,31,25,0.14);
  --line-dark:  rgba(243,239,228,0.16);
  --max: 1180px;
  --radius: 3px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:'Work Sans',-apple-system,Segoe UI,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{font-size:clamp(2.4rem,5.5vw,4.4rem);font-weight:500;letter-spacing:-.01em;}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);}
h3{font-size:1.35rem;}
p{margin:0 0 1.1em;max-width:66ch;}
.container{max-width:var(--max);margin:0 auto;padding:0 24px;}
.section{padding:88px 0;}
.section--tight{padding:56px 0;}
.section--night{background:var(--night);color:var(--bone);}
.section--night h2,.section--night h3{color:var(--bone);}
.section--panel{background:var(--bone-2);}
:focus-visible{outline:3px solid var(--clay);outline-offset:2px;}

/* -------- buttons -------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;
  font-family:'Work Sans',sans-serif;
  font-weight:600;font-size:.98rem;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn--clay{background:var(--clay);color:#fdf8ee;}
.btn--clay:hover{background:var(--clay-dark);}
.btn--outline{border-color:currentColor;background:transparent;}
.section--night .btn--outline{color:var(--bone);}
.btn--outline:hover{background:rgba(0,0,0,.06);}
.section--night .btn--outline:hover{background:rgba(243,239,228,.1);}
.btn svg{width:18px;height:18px;flex:none;}

/* -------- header / nav -------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(17,21,29,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-dark);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--bone);}
.brand-mark{
  width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--dune);display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;color:var(--dune);font-size:1.1rem;
}
.brand-name{font-family:'Fraunces',serif;font-size:1.08rem;color:var(--bone);line-height:1.1;}
.brand-name span{display:block;font-family:'Work Sans',sans-serif;font-size:.68rem;letter-spacing:.04em;color:var(--dune);margin-top:2px;}
.nav{display:flex;align-items:center;gap:30px;}
.nav a{color:var(--bone);font-size:.96rem;font-weight:500;position:relative;padding:4px 0;}
.nav a.active,.nav a:hover{color:var(--dune);}
.nav-cta{
  background:var(--clay);color:#fdf8ee!important;
  padding:11px 20px;border-radius:var(--radius);font-weight:600;
}
.nav-cta:hover{background:var(--clay-dark);color:#fdf8ee!important;}
.nav-toggle{display:none;background:none;border:none;color:var(--bone);font-size:1.6rem;cursor:pointer;}

@media (max-width:900px){
  .nav-toggle{display:block;}
  .nav{
    position:fixed;inset:76px 0 0 0;background:var(--night);
    flex-direction:column;align-items:flex-start;padding:30px 24px;
    gap:22px;display:none;overflow-y:auto;
  }
  .nav.is-open{display:flex;}
  .nav a{font-size:1.2rem;}
  .nav-cta{width:100%;text-align:center;}
}

/* -------- hero -------- */
.hero{
  position:relative;color:var(--bone);
  min-height:82vh;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(9,11,16,.88) 0%,rgba(9,11,16,.35) 55%,rgba(9,11,16,.18) 100%);
}
.hero-inner{position:relative;z-index:1;padding:70px 0 60px;width:100%;}
.hero-eyebrow{color:var(--dune);font-weight:600;margin-bottom:14px;font-size:1rem;}
.hero p.lede{color:#e8e2d2;font-size:1.15rem;max-width:52ch;}
.hero-cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px;}
.hero-small{min-height:46vh;}

/* -------- itinerary / destination cards -------- */
.dest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--ink);}
.dest-card{position:relative;aspect-ratio:4/5;background-size:cover;background-position:center;color:#fff;display:flex;align-items:flex-end;}
.dest-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.82),rgba(10,10,10,.05) 60%);}
.dest-card-inner{position:relative;z-index:1;padding:26px;width:100%;}
.dest-card-inner .tag{color:var(--dune);font-size:.85rem;font-weight:600;display:block;margin-bottom:6px;}
.dest-card-inner h3{color:#fff;margin-bottom:4px;}
.dest-card-inner a{display:inline-block;margin-top:10px;font-weight:600;font-size:.9rem;border-bottom:1px solid var(--dune);color:var(--dune);}
@media (max-width:820px){.dest-grid{grid-template-columns:1fr;}}

/* -------- two column feature -------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split.reverse .split-media{order:2;}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:28px;}.split.reverse .split-media{order:0;}}
.split-media img{border-radius:var(--radius);}

/* -------- highlight list -------- */
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.check-list li{display:flex;gap:12px;align-items:flex-start;}
.check-list li svg{flex:none;width:20px;height:20px;margin-top:3px;color:var(--clay);}
.section--night .check-list li svg{color:var(--dune);}

/* -------- trust strip -------- */
.trust-strip{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0;}
.trust-item{flex:1;min-width:160px;}
.trust-item .num{font-family:'Fraunces',serif;font-size:2.1rem;color:var(--clay);display:block;}
.trust-item .lbl{font-size:.92rem;color:#57503f;}

/* -------- reviews -------- */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:860px){.review-grid{grid-template-columns:1fr;}}
.review-card{background:var(--bone-2);padding:26px;border-radius:var(--radius);border:1px solid var(--line);}
.review-card .stars{color:var(--clay);letter-spacing:2px;margin-bottom:10px;display:block;}
.review-card p{font-size:.98rem;margin-bottom:14px;}
.review-card .who{font-weight:600;font-size:.9rem;color:#57503f;}

/* -------- itinerary days -------- */
.day-list{display:grid;gap:0;border-top:1px solid var(--line);}
.day{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);}
.day .day-num{font-family:'Fraunces',serif;font-size:1.4rem;color:var(--clay);}
.day .day-num small{display:block;font-family:'Work Sans',sans-serif;font-size:.72rem;color:#6b6350;font-weight:600;margin-top:4px;}
@media (max-width:600px){.day{grid-template-columns:70px 1fr;}}

/* -------- FAQ -------- */
.faq-item{border-bottom:1px solid var(--line);padding:20px 0;}
.faq-item summary{cursor:pointer;font-family:'Fraunces',serif;font-size:1.12rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-size:1.5rem;color:var(--clay);}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin-top:12px;}

/* -------- practical info table -------- */
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media (max-width:760px){.info-grid{grid-template-columns:repeat(2,1fr);}}
.info-item .lbl{font-size:.8rem;color:var(--clay);font-weight:600;margin-bottom:6px;}
.info-item .val{font-family:'Fraunces',serif;font-size:1.15rem;}
.section--night .info-item .lbl{color:var(--dune);}

/* -------- form -------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-grid .full{grid-column:1/-1;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;}
input,select,textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--radius);
  font-family:'Work Sans',sans-serif;font-size:1rem;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{border-color:var(--clay);}

/* -------- footer -------- */
.site-footer{background:var(--night);color:#cfc7b3;padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
.site-footer h4{color:var(--bone);font-size:.95rem;margin-bottom:14px;}
.site-footer a{display:block;color:#cfc7b3;margin-bottom:9px;font-size:.94rem;}
.site-footer a:hover{color:var(--dune);}
.site-footer a.icon-link{display:flex;align-items:center;gap:10px;}
.site-footer a.icon-link svg{width:19px;height:19px;flex:none;color:var(--dune);}
.footer-bottom{border-top:1px solid var(--line-dark);margin-top:48px;padding-top:22px;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8b8570;}

/* -------- whatsapp float -------- */
.wa-float{
  position:fixed;bottom:22px;right:22px;z-index:60;
  background:#25d366;color:#fff;width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.wa-float svg{width:28px;height:28px;}

/* -------- misc -------- */
.tag-pill{display:inline-block;background:var(--bone-2);border:1px solid var(--line);padding:6px 14px;border-radius:20px;font-size:.82rem;font-weight:600;margin:0 8px 8px 0;}
.section--night .tag-pill{background:var(--night-2);border-color:var(--line-dark);color:var(--bone);}
.center{text-align:center;}
.center p{margin-left:auto;margin-right:auto;}
.kicker{color:var(--clay);font-weight:600;font-size:.95rem;margin-bottom:10px;display:block;}
.section--night .kicker{color:var(--dune);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
@media (max-width:820px){.grid-3{grid-template-columns:1fr;}}

/* -------- logo & language switch -------- */
.brand-logo{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid var(--dune);background:var(--night-2);}
.footer-logo{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1.5px solid var(--dune);margin-bottom:14px;}
.lang-switch{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--bone);}
.lang-switch a{color:var(--dune);}
.lang-switch .is-current{color:var(--bone);opacity:.55;}
.lang-switch span, .lang-switch a{padding:2px 4px;}
@media (max-width:900px){.lang-switch{margin:6px 0;}}

/* -------- real review gallery -------- */
.review-photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px;}
.review-photo-grid img{border-radius:3px;aspect-ratio:4/3;object-fit:cover;}
@media (max-width:820px){.review-photo-grid{grid-template-columns:repeat(2,1fr);}}

/* -------- gallery grid -------- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.gallery-grid img{border-radius:3px;aspect-ratio:1/1;object-fit:cover;width:100%;}
@media (max-width:820px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}

/* -------- pricing table -------- */
.price-table{width:100%;border-collapse:collapse;margin-top:20px;}
.price-table th,.price-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);}
.price-table th{font-family:'Fraunces',serif;font-weight:600;color:var(--clay);}
.price-table td.price{font-family:'Fraunces',serif;font-size:1.2rem;}

/* -------- FAQ group heading -------- */
.faq-group-title{font-family:'Fraunces',serif;font-size:1.15rem;color:var(--clay);margin:34px 0 6px;}