/* ============================================================
   DAARU SA'AADAH — DESIGN TOKENS
   Derived directly from the brand logo.
     #00BC23  logo green   — sampled from the wordmark and globe
     #F90000  logo red     — sampled from the arc and aircraft
     #FFFAFA  logo field   — the logo's own background, used as the page field
     #000000  logo black   — the script tagline
   ============================================================ */
:root{
  /* Brand, straight from the artwork */
  --green:#00BC23;
  --green-600:#00A81F;
  --green-700:#067F1A;
  --green-800:#0A6A1B;
  --green-900:#073E15;
  --green-950:#04270D;

  --red:#F90000;
  --red-600:#DE0000;
  --red-700:#C50000;

  --snow:#FFFAFA;
  --mist:#F1F5F1;
  --haze:#FDF3F3;

  --ink:#141414;
  --ink-soft:#4B4B49;
  --ink-mute:#6E7A6E;

  /* Semantic roles. --accent and --motif are re-scoped on dark
     backgrounds further down so contrast holds in both directions. */
  --accent:var(--green-700);
  --motif:var(--red);

  /* Legacy aliases retained so the base stylesheet keeps working */
  --forest:var(--green-900);
  --forest-2:var(--green-800);
  --forest-3:var(--green-700);
  --sage:var(--ink-mute);
  --cream:var(--snow);
  --cream-2:var(--mist);
  --sand:#E3EDE3;
  --sand-2:#CFE0CF;
  --charcoal:var(--ink);
  --charcoal-soft:var(--ink-soft);
  --line:rgba(20,20,20,.13);
  --line-strong:rgba(20,20,20,.26);
  --line-light:rgba(255,250,250,.20);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --arabic:"Amiri",serif;

  --wrap:1240px;
  --wrap-narrow:760px;
  --gut:clamp(20px,5vw,64px);

  --t:cubic-bezier(.22,.61,.36,1);
}

/* On dark green fields the bright logo green becomes the readable accent,
   and the red lifts so the motif stays visible. */
.section--forest,.phead,#footer,.mega--dark,.world--sacred,#actionbar,#announcement{
  --accent:var(--green);
  --motif:#FF3B3B;
}



/* ============================================================
   DAARU SAADAH — DESIGN TOKENS
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--charcoal);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- Type scale ---------- */
.d1{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,6.2vw,4.6rem);line-height:1.02;letter-spacing:-.022em;margin:0}
.d2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.08;letter-spacing:-.018em;margin:0}
.d3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.16;letter-spacing:-.012em;margin:0}
.d4{font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1.28;margin:0}
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.5;color:var(--charcoal-soft);margin:0}
.prose p{max-width:66ch;margin:0 0 1.1em}
.prose{font-family:var(--serif);font-size:1.08rem;line-height:1.78;color:var(--charcoal-soft)}
.prose h2{font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1.2;color:var(--forest);margin:2.4em 0 .6em;letter-spacing:-.01em}
.prose h3{font-family:var(--sans);font-weight:600;font-size:1.02rem;color:var(--forest);margin:2em 0 .4em}
.prose ul{max-width:66ch;padding-left:1.1em;margin:0 0 1.2em}
.prose li{margin-bottom:.45em}
.prose strong{font-weight:500;color:var(--charcoal)}
.small{font-size:.82rem;line-height:1.55}
.mono-label{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.section{padding:clamp(56px,8vw,110px) 0}
.section--tight{padding:clamp(40px,5vw,64px) 0}
.section--forest{background:var(--forest);color:var(--cream)}
.section--forest .d1,.section--forest .d2,.section--forest .d3{color:var(--cream)}
.section--forest .lead{color:rgba(251,248,241,.72)}
.section--sand{background:var(--cream-2)}
.stack>*+*{margin-top:1.1rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-size:.92rem;font-weight:600;letter-spacing:.01em;
  padding:.85em 1.5em;border:1px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;transition:background .25s var(--t),color .25s var(--t),border-color .25s var(--t);
}
.btn--primary{background:var(--forest);color:var(--cream)}
.btn--primary:hover{background:var(--forest-3)}
.btn--outline{background:transparent;color:var(--forest);border-color:var(--line-strong)}
.btn--outline:hover{border-color:var(--forest);background:rgba(16,40,31,.04)}
.btn--light{background:var(--cream);color:var(--forest)}
.btn--light:hover{background:#fff}
.btn--ghost-light{background:transparent;color:var(--cream);border-color:var(--line-light)}
.btn--ghost-light:hover{border-color:var(--cream)}
.btn--brand{background:var(--green);color:var(--ink);font-weight:700}
.btn--brand:hover{background:var(--green-600)}
.btn--wide{width:100%;justify-content:center}
.btn--caps{text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;padding:1em 1.6em}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

.textlink{font-weight:600;font-size:.9rem;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;transition:border-color .2s}
.textlink:hover{border-color:var(--forest)}

/* ---------- Announcement ---------- */
#announcement{background:var(--forest);color:rgba(251,248,241,.82);font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.08)}
#announcement .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:38px;padding-top:6px;padding-bottom:6px}
#announcement .ann-msg{display:flex;align-items:center;gap:.5rem}
#announcement .ann-meta{display:none;gap:1.2rem;align-items:center}
#announcement a{text-decoration:none;color:inherit}
#announcement a:hover{color:var(--cream)}
.ann-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
@media(min-width:900px){#announcement .ann-meta{display:flex}}

/* ---------- Header ---------- */
#header{position:sticky;top:0;z-index:60;background:rgba(251,248,241,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand__mark{width:34px;height:34px;flex:none}
.brand__text{line-height:1}
.brand__name{font-family:var(--serif);font-size:1.12rem;font-weight:400;letter-spacing:.01em;color:var(--forest);display:block}
.brand__ar{font-family:var(--arabic);font-size:.82rem;color:var(--accent);display:block;margin-top:1px}

.nav{display:none;align-items:center;gap:.15rem;flex:1;justify-content:center}
@media(min-width:1060px){.nav{display:flex}}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;cursor:pointer;
  font-size:.9rem;font-weight:500;padding:.6rem .85rem;text-decoration:none;color:var(--charcoal);
  border-radius:2px;transition:color .2s;
}
.nav__link:hover,.nav__item[data-open="true"] .nav__link{color:var(--forest);}
.nav__link[aria-current="page"]{color:var(--forest)}
.nav__link[aria-current="page"]::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.25rem;height:1px;background:var(--accent)}
.chev{width:9px;height:9px;opacity:.5;transition:transform .25s var(--t)}
.nav__item[data-open="true"] .chev{transform:rotate(180deg)}

.hdr__actions{display:none;align-items:center;gap:.6rem;flex:none}
@media(min-width:1060px){.hdr__actions{display:flex}}
.hamburger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0 10px}
@media(min-width:1060px){.hamburger{display:none}}
.hamburger span{height:1.5px;background:var(--forest);width:100%;transition:transform .3s var(--t),opacity .2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Mega menu ---------- */
.mega{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--cream);border:1px solid var(--line);border-radius:3px;
  box-shadow:0 24px 60px -24px rgba(16,40,31,.28);
  padding:2rem;opacity:0;visibility:hidden;transition:opacity .22s var(--t),transform .22s var(--t),visibility .22s;
}
.nav__item[data-open="true"] .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega--wide{width:min(920px,90vw);display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:2rem}
.mega--tall{width:280px}
.mega--dark{background:var(--forest);border-color:rgba(255,255,255,.14)}
.mega--dark .mega__head{color:var(--accent)}
.mega__col{min-width:0}
.mega__head{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .9rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.mega--dark .mega__head{border-color:rgba(255,255,255,.14)}
.mega__list{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.mega__list a{display:block;text-decoration:none;font-size:.88rem;padding:.42rem 0;color:var(--charcoal-soft);transition:color .18s,padding-left .18s}
.mega__list a:hover{color:var(--forest);padding-left:5px}
.mega--dark .mega__list a{color:rgba(251,248,241,.76)}
.mega--dark .mega__list a:hover{color:#fff}
.mega__all{margin-top:.5rem;font-weight:600;color:var(--forest) !important}
.mega--dark .mega__all{color:var(--accent) !important}
.mega__feature{background:var(--cream-2);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.mega--dark .mega__feature{background:rgba(255,255,255,.05)}
.mega__feature .frame{height:120px;border-radius:0}
.mega__feature-body{padding:1rem 1.1rem 1.15rem}
.mega__feature-body p{margin:.35rem 0 .9rem;font-size:.85rem;color:var(--charcoal-soft)}
.mega--dark .mega__feature-body p{color:rgba(251,248,241,.7)}
.mega__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;width:min(880px,90vw)}
.mega__tile{text-decoration:none;display:block}
.mega__tile .frame{height:92px;margin-bottom:.55rem}
.mega__tile b{display:block;font-family:var(--serif);font-weight:400;font-size:1rem;color:var(--forest)}
.mega__tile span{font-size:.78rem;color:var(--charcoal-soft)}

/* ---------- Mobile nav ---------- */
#mobilenav{
  position:fixed;inset:0;z-index:80;background:var(--cream);
  transform:translateX(100%);transition:transform .34s var(--t);
  display:flex;flex-direction:column;overflow-y:auto;
}
#mobilenav[data-open="true"]{transform:translateX(0)}
.mnav__top{display:flex;align-items:center;justify-content:space-between;padding:1rem var(--gut);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--cream)}
.mnav__close{background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;padding:.3rem .5rem}
.mnav__body{padding:.5rem var(--gut) 2rem;flex:1}
.macc{border-bottom:1px solid var(--line)}
.macc__btn{display:flex;width:100%;align-items:center;justify-content:space-between;background:none;border:0;padding:1.05rem 0;font-family:var(--serif);font-size:1.3rem;font-weight:400;text-align:left;cursor:pointer;color:var(--forest)}
.macc__btn .chev{width:12px;height:12px;opacity:.6}
.macc__btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.macc__panel{display:none;padding-bottom:1rem}
.macc__panel[data-open="true"]{display:block}
.macc__panel a{display:block;text-decoration:none;font-size:.95rem;padding:.5rem 0 .5rem .9rem;border-left:1px solid var(--line);color:var(--charcoal-soft)}
.macc__panel a:hover{color:var(--forest)}
.macc__group{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:1rem 0 .3rem}
.mnav__cta{padding:1.4rem var(--gut) 2.5rem;background:var(--cream-2);display:grid;gap:.6rem}

/* ---------- Mobile action bar ---------- */
#actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--forest);border-top:1px solid rgba(255,255,255,.12);
}
@media(min-width:1060px){#actionbar{display:none}}
#actionbar a,#actionbar button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:.6rem .3rem calc(.6rem + env(safe-area-inset-bottom));background:none;border:0;
  color:var(--cream);font-size:.7rem;font-weight:600;letter-spacing:.03em;text-decoration:none;cursor:pointer;
}
#actionbar a+a,#actionbar button{border-left:1px solid rgba(255,255,255,.12)}
#actionbar svg{width:18px;height:18px}
body{padding-bottom:66px}
@media(min-width:1060px){body{padding-bottom:0}}

/* ---------- Floating WhatsApp (desktop) ---------- */
#wafloat{
  position:fixed;right:24px;bottom:24px;z-index:65;display:none;align-items:center;gap:.55rem;
  background:var(--forest);color:var(--cream);border:0;border-radius:100px;padding:.85rem 1.25rem;
  font-size:.88rem;font-weight:600;cursor:pointer;box-shadow:0 14px 34px -12px rgba(16,40,31,.5);
  transition:transform .25s var(--t),background .25s;
}
#wafloat:hover{transform:translateY(-2px);background:var(--forest-3)}
@media(min-width:1060px){#wafloat{display:inline-flex}}

/* ---------- Image frames (photography placeholders) ---------- */
.frame{position:relative;overflow:hidden;border-radius:3px;background:var(--forest-2);isolation:isolate}
.frame svg.frame__tex{position:absolute;inset:0;width:100%;height:100%}
.frame__note{
  position:absolute;left:0;right:0;bottom:0;padding:.55rem .7rem;
  font-size:.66rem;line-height:1.4;letter-spacing:.02em;color:rgba(255,255,255,.7);
  background:linear-gradient(to top,rgba(9,22,17,.72),rgba(9,22,17,0));
}
.frame--safari{background:linear-gradient(150deg,#2C5A48 0%,#1C4436 45%,#3E4A2E 100%)}
.frame--sand{background:linear-gradient(150deg,#B9A278 0%,#8C7A52 60%,#4E5540 100%)}
.frame--forest{background:linear-gradient(160deg,#1C4436 0%,#10281F 100%)}
.frame--sacred{background:linear-gradient(165deg,#193B31 0%,#10281F 55%,#0B1D17 100%)}
.frame--ratio-wide{aspect-ratio:16/9}
.frame--ratio-tall{aspect-ratio:3/4}
.frame--ratio-sq{aspect-ratio:1/1}
.frame--ratio-hero{aspect-ratio:4/3}
@media(min-width:900px){.frame--ratio-hero{aspect-ratio:5/6}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-top:clamp(48px,7vw,92px)}
.hero__head{max-width:19ch}
.hero__sub{max-width:52ch;margin-top:1.4rem}
.hero__ctas{margin-top:2rem}
.hero__line{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;z-index:0}
.hero__line path{fill:none;stroke:var(--accent);stroke-width:1.1;opacity:.55;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.6s var(--t) .35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero__inner{position:relative;z-index:1}

/* Two worlds */
.worlds{display:grid;gap:1px;background:var(--line);margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line)}
@media(min-width:860px){.worlds{grid-template-columns:1fr 1fr}}
.world{background:var(--cream);padding:clamp(28px,3.4vw,46px);text-decoration:none;display:flex;flex-direction:column;transition:background .3s var(--t)}
.world:hover{background:var(--cream-2)}
.world--sacred{background:var(--forest);color:var(--cream)}
.world--sacred:hover{background:#143026}
.world--sacred .d3{color:var(--cream)}
.world--sacred p{color:rgba(251,248,241,.72)}
.world .frame{margin-bottom:1.6rem}
.world__eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.world p{margin:.7rem 0 1.4rem;color:var(--charcoal-soft);max-width:44ch;font-size:.98rem}
.world__go{margin-top:auto;font-size:.88rem;font-weight:600;display:inline-flex;align-items:center;gap:.5rem}
.world__go i{display:block;width:26px;height:1px;background:currentColor;opacity:.5}

/* ---------- Grids & cards ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr 1fr}
@media(min-width:700px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

.xcard{text-decoration:none;display:block;color:inherit}
.xcard .frame{margin-bottom:1rem;transition:transform .5s var(--t)}
.xcard:hover .frame{transform:scale(1.015)}
.xcard h3{font-family:var(--serif);font-weight:400;font-size:1.28rem;margin:0 0 .35rem;color:var(--forest);letter-spacing:-.01em}
.xcard p{margin:0 0 .7rem;font-size:.92rem;color:var(--charcoal-soft);max-width:40ch}
.xcard__meta{font-size:.78rem;color:var(--sage);display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:.5rem}
.xcard__cta{font-size:.84rem;font-weight:600;color:var(--forest);border-bottom:1px solid var(--accent);padding-bottom:2px}

/* Destination block */
.dest{text-decoration:none;color:inherit;display:block;position:relative}
.dest .frame{aspect-ratio:4/5}
.dest__body{padding:1rem 0 0}
.dest__body h3{font-family:var(--serif);font-weight:400;font-size:1.32rem;margin:0;color:var(--forest)}
.dest__body span{font-size:.85rem;color:var(--charcoal-soft)}

/* Lattice grid (differentiators) — hairline lattice, not cards */
.lattice{display:grid;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--line);gap:1px}
@media(min-width:680px){.lattice{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.lattice{grid-template-columns:repeat(3,1fr)}}
.lattice__cell{background:var(--cream);padding:clamp(22px,2.6vw,34px)}
.section--forest .lattice{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.14)}
.section--forest .lattice__cell{background:var(--forest)}
.lattice__cell h3{font-family:var(--serif);font-weight:400;font-size:1.18rem;margin:.9rem 0 .45rem;color:var(--forest)}
.section--forest .lattice__cell h3{color:var(--cream)}
.lattice__cell p{margin:0;font-size:.92rem;color:var(--charcoal-soft)}
.section--forest .lattice__cell p{color:rgba(251,248,241,.7)}
.lattice__icon{width:26px;height:26px;color:var(--accent)}

/* Ruled list rows (packages) */
.rows{border-top:1px solid var(--line)}
.row{display:grid;gap:1rem;padding:1.6rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;align-items:start;transition:padding-left .3s var(--t)}
.row:hover{padding-left:8px}
@media(min-width:760px){.row{grid-template-columns:120px 1fr auto;gap:2rem;align-items:center}}
.row__frame{display:none}
@media(min-width:760px){.row__frame{display:block}}
.row h3{font-family:var(--serif);font-weight:400;font-size:1.24rem;margin:0 0 .3rem;color:var(--forest)}
.row p{margin:0;font-size:.9rem;color:var(--charcoal-soft);max-width:56ch}
.row__meta{font-size:.78rem;color:var(--sage);margin-top:.5rem;display:flex;gap:1rem;flex-wrap:wrap}
.row__price{text-align:left;font-size:.86rem;color:var(--charcoal-soft)}
@media(min-width:760px){.row__price{text-align:right}}
.row__price b{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:400;color:var(--forest)}

/* Steps — the journey line */
.steps{position:relative;display:grid;gap:2.2rem;counter-reset:step}
@media(min-width:840px){.steps{grid-template-columns:repeat(4,1fr);gap:1.6rem}}
.step{position:relative;padding-top:2.6rem}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:0;left:0;font-family:var(--serif);font-size:.95rem;color:var(--accent);
}
.step::after{content:"";position:absolute;top:1.55rem;left:0;right:0;height:1px;background:var(--line-strong)}
.section--forest .step::after{background:rgba(255,255,255,.2)}
.step h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin:0 0 .4rem;color:var(--forest)}
.section--forest .step h3{color:var(--cream)}
.step p{margin:0;font-size:.92rem;color:var(--charcoal-soft)}
.section--forest .step p{color:rgba(251,248,241,.7)}

/* ---------- Section headers ---------- */
.shead{display:grid;gap:1rem;margin-bottom:clamp(28px,3.5vw,48px)}
@media(min-width:900px){.shead{grid-template-columns:1.2fr 1fr;align-items:end;gap:3rem}}
.shead p{margin:0;max-width:48ch}

/* ---------- Divider with path motif ---------- */
.pathrule{display:block;width:100%;height:38px;overflow:visible}
.pathrule path{fill:none;stroke:var(--accent);stroke-width:1;opacity:.4}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{display:flex;width:100%;gap:1.5rem;justify-content:space-between;align-items:flex-start;
  background:none;border:0;padding:1.25rem 0;text-align:left;cursor:pointer;
  font-family:var(--serif);font-size:1.1rem;font-weight:400;color:var(--forest);line-height:1.35}
.faq__sign{flex:none;width:16px;height:16px;margin-top:.35rem;position:relative}
.faq__sign::before,.faq__sign::after{content:"";position:absolute;background:var(--accent);transition:transform .28s var(--t)}
.faq__sign::before{top:7.5px;left:0;width:16px;height:1px}
.faq__sign::after{left:7.5px;top:0;height:16px;width:1px}
.faq__q[aria-expanded="true"] .faq__sign::after{transform:scaleY(0)}
.faq__a{display:none;padding:0 0 1.4rem;max-width:66ch;font-size:.96rem;color:var(--charcoal-soft)}
.faq__a[data-open="true"]{display:block}
.faq__a p{margin:0 0 .8rem}
.faq__a p:last-child{margin-bottom:0}

/* ---------- Forms ---------- */
.form{display:grid;gap:1.1rem}
@media(min-width:720px){.form--2col{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.field{display:grid;gap:.35rem}
.field label{font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--forest)}
.field .hint{font-size:.75rem;color:var(--sage)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.95rem;padding:.75rem .85rem;border:1px solid var(--line-strong);
  border-radius:2px;background:#fff;color:var(--charcoal);width:100%;transition:border-color .2s
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--forest);outline:none;box-shadow:0 0 0 3px rgba(168,132,63,.16)}
.field textarea{min-height:120px;resize:vertical}
.field--error input,.field--error select,.field--error textarea{border-color:#A6402F}
.err{font-size:.75rem;color:#A6402F;display:none}
.field--error .err{display:block}
.formnote{font-size:.78rem;color:var(--sage);max-width:60ch}
.formcard{background:var(--cream);border:1px solid var(--line);border-radius:3px;padding:clamp(22px,3vw,40px)}
.section--forest .formcard{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.section--forest .field label{color:var(--accent)}
.section--forest .field input,.section--forest .field select,.section--forest .field textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:var(--cream)}
.section--forest .formnote{color:rgba(251,248,241,.6)}
.formsuccess{background:var(--forest);color:var(--cream);padding:2rem;border-radius:3px;text-align:left}
.formsuccess h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:0 0 .6rem;color:var(--cream)}
.formsuccess p{margin:0 0 1.2rem;color:rgba(251,248,241,.75);max-width:52ch;font-size:.95rem}

/* ---------- Placeholder / empty states ---------- */
.empty{
  border:1px dashed var(--line-strong);border-radius:3px;padding:clamp(26px,4vw,48px);
  background:rgba(232,220,196,.28);
}
.section--forest .empty{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.04)}
.empty h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin:0 0 .5rem;color:var(--forest)}
.section--forest .empty h3{color:var(--cream)}
.empty p{margin:0 0 1.2rem;max-width:56ch;color:var(--charcoal-soft);font-size:.95rem}
.section--forest .empty p{color:rgba(251,248,241,.72)}
.needs{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--sage)}
.needs b{color:var(--accent);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;display:block;margin-bottom:.4rem}
.needs ul{margin:0;padding-left:1.1em}

/* ---------- Page header ---------- */
.phead{background:var(--forest);color:var(--cream);position:relative;overflow:hidden}
.phead__tex{position:absolute;inset:0;opacity:.5}
.phead .wrap{position:relative;padding-top:clamp(48px,7vw,86px);padding-bottom:clamp(48px,7vw,86px)}
.phead h1{color:var(--cream);max-width:20ch}
.phead p{color:rgba(251,248,241,.74);max-width:58ch;margin-top:1.1rem;font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:300;line-height:1.55}
.crumbs{display:flex;gap:.5rem;flex-wrap:wrap;font-size:.78rem;color:rgba(251,248,241,.6);margin-bottom:1.4rem}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--cream)}
.crumbs span{opacity:.5}

/* ---------- Facts strip ---------- */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
@media(min-width:640px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:var(--cream);padding:1.3rem 1.4rem}
.fact dt{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem}
.fact dd{margin:0;font-family:var(--serif);font-size:1.05rem;color:var(--forest);line-height:1.35}

/* ---------- Sticky enquiry rail ---------- */
.split{display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:980px){.split{grid-template-columns:1fr 340px;align-items:start}}
.rail{position:sticky;top:100px;border:1px solid var(--line);border-radius:3px;background:var(--cream-2);padding:1.6rem}
.rail dl{margin:0 0 1.3rem;display:grid;gap:.7rem}
.rail dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.rail dd{margin:.15rem 0 0;font-family:var(--serif);font-size:1.05rem;color:var(--forest)}

/* ---------- Testimonial ---------- */
.quote{border-left:2px solid var(--accent);padding-left:1.4rem}
.quote blockquote{margin:0;font-family:var(--serif);font-size:1.2rem;line-height:1.55;font-weight:300;color:var(--forest)}
.quote figcaption{margin-top:.9rem;font-size:.82rem;color:var(--sage)}

/* ---------- Footer ---------- */
#footer{background:var(--forest);color:rgba(251,248,241,.72);padding-top:clamp(48px,6vw,84px);position:relative;overflow:hidden}
#footer .ftex{position:absolute;inset:0;opacity:.4;pointer-events:none}
#footer .wrap{position:relative}
.fgrid{display:grid;gap:2.4rem;padding-bottom:3rem}
@media(min-width:760px){.fgrid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}}
.fgrid h4{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 1.1rem;font-weight:600}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fgrid a{text-decoration:none;font-size:.9rem;transition:color .2s}
.fgrid a:hover{color:var(--cream)}
.fbrand p{font-size:.92rem;margin:1rem 0 1.2rem;max-width:34ch;font-family:var(--serif);line-height:1.6}
.fsocial{display:flex;gap:.7rem}
.fsocial a{width:34px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;transition:border-color .2s,background .2s}
.fsocial a:hover{border-color:var(--accent);background:rgba(255,255,255,.06)}
.fsocial svg{width:15px;height:15px}
.ftrust{border-top:1px solid rgba(255,255,255,.14);padding:1.6rem 0;font-size:.78rem;color:rgba(251,248,241,.5)}
.fstatement{border-top:1px solid rgba(255,255,255,.14);padding:2.2rem 0;text-align:center}
.fstatement span{font-family:var(--serif);font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:300;color:var(--cream);letter-spacing:.01em}
.fbase{border-top:1px solid rgba(255,255,255,.14);padding:1.3rem 0 2rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.78rem}
.fbase a{text-decoration:none}
.fbase nav{display:flex;gap:1.2rem;flex-wrap:wrap}

/* ---------- Toast ---------- */
#toast{
  position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(14px);z-index:100;
  background:var(--charcoal);color:var(--cream);padding:.85rem 1.2rem;border-radius:3px;font-size:.86rem;
  max-width:min(420px,90vw);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s var(--t),visibility .3s;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.5);
}
#toast[data-show="true"]{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media(min-width:1060px){#toast{bottom:96px}}

/* ---------- Misc ---------- */
.tagcloud{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{font-size:.76rem;padding:.3rem .7rem;border:1px solid var(--line-strong);border-radius:100px;color:var(--charcoal-soft);text-decoration:none;transition:border-color .2s,color .2s}
.tag:hover,.tag[data-active="true"]{border-color:var(--forest);color:var(--forest)}
.hr{height:1px;background:var(--line);border:0;margin:0}
.center{text-align:center}
.mt2{margin-top:2rem}.mt3{margin-top:3rem}.mb1{margin-bottom:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ============================================================
   BRAND LAYER — logo lockups, the red arc motif, palette corrections
   ============================================================ */

/* ---------- Logo lockups ----------
   The supplied artwork is a stacked lockup: emblem above wordmark above a
   script tagline. At header height the tagline falls to roughly 4px and the
   wordmark to 9px, so the full lockup is used only where it can breathe —
   the footer plate, the favicon and the social share image. In the header it
   is rebuilt horizontally: the emblem at full colour beside the name typeset
   to match, which stays legible in a 74px bar. */
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand__mark{display:block;height:40px;width:auto;flex:none}
@media(min-width:1060px){.brand__mark{height:46px}}
.brand__stack{display:flex;flex-direction:column;line-height:1;gap:.22rem}
.brand__name{
  font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:.005em;
  text-transform:uppercase;color:var(--green-700);white-space:nowrap;
}
@media(min-width:1060px){.brand__name{font-size:1.12rem}}
.brand__sub{
  font-family:var(--sans);font-weight:600;font-size:.58rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--red-700);white-space:nowrap;
}
@media(max-width:359px){.brand__stack{display:none}}

/* Full artwork, used where there is room for it. On the deep green footer it
   sits on a white plate so the green wordmark keeps its contrast. */
.brand__logo{display:block;width:auto;height:96px;max-width:100%}
.brand--plate{background:var(--snow);padding:1rem 1.3rem;border-radius:4px;display:inline-flex}
@media(max-width:520px){.brand__logo{height:76px}}

.mnav__top .brand__mark{height:36px}

/* ---------- The arc motif ----------
   The logo already contains a red arc sweeping around the globe. That arc is
   the site's connective device: it replaces the generic hairline divider and
   carries the journey idea through every page. */
.pathrule path{stroke:var(--motif);opacity:.7;stroke-width:1.4}
.hero__line path{stroke:var(--motif);opacity:.62;stroke-width:1.6}
.arcmark{display:block;width:100%;max-width:180px;height:auto;margin-bottom:1.2rem}
.arcmark path{fill:none;stroke:var(--motif);stroke-width:2.2;stroke-linecap:round}
.arcmark polygon{fill:var(--motif)}

/* Motif-coloured details, kept deliberately sparse */
.faq__sign::before,.faq__sign::after{background:var(--motif)}
.quote{border-left-color:var(--motif)}
.textlink{border-bottom-color:var(--motif)}
.xcard__cta{border-bottom-color:var(--motif)}
.ann-dot{background:var(--motif)}
.step::before{color:var(--motif)}

/* ---------- Buttons ----------
   Deep green carries white text at full contrast. The bright logo green is
   reserved for the highest-emphasis action and pairs with dark ink, which is
   both accessible and unmistakably the logo. */
.btn--primary{background:var(--green-900);color:var(--snow)}
.btn--primary:hover{background:var(--green-800)}
.btn--brand{background:var(--green);color:var(--ink);font-weight:700}
.btn--brand:hover{background:var(--green-600)}
.btn--light{background:var(--snow);color:var(--green-900)}
.btn--outline{border-color:var(--line-strong);color:var(--green-900)}
.btn--outline:hover{border-color:var(--green-900);background:rgba(0,188,35,.07)}

/* ---------- Active navigation ---------- */
.nav__link[aria-current="page"]{color:var(--green-900)}
.nav__link[aria-current="page"]::after{background:var(--green)}
.nav__link:hover{color:var(--green-800)}

/* ---------- Field colours ---------- */
body{background:var(--snow)}
#header{background:rgba(255,250,250,.95)}
.section--sand{background:var(--mist)}
.section--forest{background:var(--green-900)}
.phead{background:var(--green-900)}
#footer{background:var(--green-900)}
.world--sacred{background:var(--green-900)}
.world--sacred:hover{background:var(--green-800)}
#actionbar{background:var(--green-900)}
#announcement{background:var(--green-950)}
#wafloat{background:var(--green-900)}
#wafloat:hover{background:var(--green-800)}

/* Image-placeholder gradients retuned to the logo's greens */
.frame--safari{background:linear-gradient(150deg,#0A6A1B 0%,#073E15 48%,#123A18 100%)}
.frame--sand{background:linear-gradient(150deg,#4E7A47 0%,#2F5A2C 60%,#123A18 100%)}
.frame--forest{background:linear-gradient(160deg,#0A6A1B 0%,#04270D 100%)}
.frame--sacred{background:linear-gradient(165deg,#0B4A18 0%,#073E15 55%,#04270D 100%)}

/* Errors use the brand red family rather than an unrelated warning colour */
.field--error input,.field--error select,.field--error textarea{border-color:var(--red-700)}
.err{color:var(--red-700)}

/* ---------- Tagline ---------- */
.tagline{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--ink-soft)}
.fstatement span{color:var(--snow)}
.fstatement em{font-style:italic;color:var(--green);font-weight:400}

/* ---------- Footer logo plate ---------- */
.fbrand .brand--plate{margin-bottom:1.1rem}

/* ---------- Skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green-900);color:var(--snow);padding:.8rem 1.2rem;border-radius:0 0 3px 0}
.skip:focus{left:0}

/* ---------- Print ---------- */
@media print{
  #header,#footer,#actionbar,#wafloat,#announcement,#mobilenav{display:none !important}
  body{padding-bottom:0;background:#fff}
}

/* ---------- Cookie notice (only rendered when analytics is configured) ---- */
.cookiebar{
  position:fixed;left:16px;right:16px;bottom:82px;z-index:120;
  background:var(--green-900);color:var(--snow);
  padding:1rem 1.2rem;border-radius:4px;
  display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;justify-content:space-between;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.5);
}
@media(min-width:1060px){.cookiebar{left:auto;right:24px;bottom:88px;max-width:440px}}
.cookiebar p{margin:0;font-size:.86rem;line-height:1.5;color:rgba(255,250,250,.82)}
.cookiebar a{color:var(--green)}
.cookiebar__acts{display:flex;gap:.5rem}
.cookiebar .btn{padding:.6em 1.1em;font-size:.82rem}

/* ---------- Photographs ----------
   Real photographs share the placeholder's aspect-ratio frames, so a page
   looks identical whether a shot has been supplied or is still outstanding. */
.frame--photo{background:var(--mist)}
.frame--photo img{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.xcard:hover .frame--photo img,.dest:hover .frame--photo img{transform:none}
.frame--photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(20,20,20,.07);
}
/* Cards lift the image rather than the whole frame, which keeps edges crisp */
.xcard .frame--photo,.dest .frame--photo{overflow:hidden}
.xcard .frame--photo img,.dest .frame--photo img{transition:transform .6s var(--t)}
.xcard:hover .frame--photo img,.dest:hover .frame--photo img{transform:scale(1.04)}

/* ---------- Photographic page headers (pilgrimage section) ----------
   A dark wash over the photograph keeps heading and breadcrumb contrast
   above 11:1, so the type is as readable as it is on the plain green header. */
.phead--photo{position:relative;isolation:isolate}
.phead--photo .phead__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:-2;
}
.phead--photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,39,13,.62) 0%,rgba(7,62,21,.80) 55%,rgba(4,39,13,.92) 100%);
}
.phead--photo .wrap{
  padding-top:clamp(72px,10vw,132px);
  padding-bottom:clamp(72px,10vw,132px);
}

/* ---------- Secondary contact lines in the footer ----------
   Additional phone numbers and the alternate email sit directly beneath the
   primary ones, set slightly smaller and dimmer so the main line still reads
   first. They remain full links, not decoration. */
.fgrid .fnote{margin-top:-.3rem;font-size:.82rem;opacity:.72}
.fgrid .fnote a{font-size:.82rem}
.fgrid .fnote a:hover{opacity:1}

/* ---------- Contact map ---------- */
.mapwrap{position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--mist);aspect-ratio:16/9}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:640px){.mapwrap{aspect-ratio:4/3}}

/* ---------- Editorial notes to the business ----------
   Visible while the site is a draft so outstanding items are impossible to
   miss, and switched off in one line (draftNotes: false in config.js) before
   launch. Deliberately marked so nobody mistakes one for site copy. */
.draftnote{
  display:inline;background:#FFF4D6;color:#6B4E00;
  border-bottom:1px dashed #C79A16;padding:0 .25em;border-radius:2px;
  font-size:.94em;
}
.draftnote::before{content:"\270E\00a0";opacity:.7}
html[data-hide-draft-notes] .draftnote{display:none}

/* ============================================================
   SAFARI ITINERARY PACKAGES
   ============================================================ */

/* ---------- Day-by-day plan ----------
   A single vertical rule with a numbered marker per day, echoing the journey
   line that runs through the rest of the site rather than boxing each day. */
.dayplan{list-style:none;margin:0;padding:0;position:relative}
.dayplan__item{position:relative;display:grid;gap:1rem;padding:0 0 2rem 0}
@media(min-width:640px){
  .dayplan__item{grid-template-columns:76px 1fr;gap:1.6rem}
  .dayplan__item::before{
    content:"";position:absolute;left:37px;top:52px;bottom:-6px;width:1px;
    background:var(--line-strong);
  }
  .dayplan__item:last-child::before{display:none}
}
.dayplan__marker{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:76px;height:52px;flex:none;
  border:1px solid var(--motif);border-radius:3px;background:var(--snow);
  position:relative;z-index:1;
}
.dayplan__marker span{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--motif);line-height:1}
.dayplan__marker b{font-family:var(--serif);font-weight:400;font-size:1.35rem;color:var(--green-900);line-height:1.1}
@media(max-width:639px){
  .dayplan__marker{flex-direction:row;gap:.5rem;width:auto;align-self:start;padding:.3rem .7rem;height:auto}
  .dayplan__marker b{font-size:1.05rem}
}
.dayplan__body h3{font-family:var(--serif);font-weight:400;font-size:1.22rem;margin:0 0 .4rem;color:var(--green-900)}
.dayplan__body p{margin:0 0 .7rem;font-size:.95rem;color:var(--ink-soft);max-width:62ch}
.dayplan__meta{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.8rem;color:var(--ink-mute)}
.dayplan__meta span{display:inline-flex;align-items:center;gap:.4rem}

/* ---------- Included / excluded lists ---------- */
.ticklist{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ticklist li{position:relative;padding-left:1.7rem;font-size:.93rem;color:var(--ink-soft);line-height:1.55}
.ticklist li::before{position:absolute;left:0;top:.05em;font-size:.95rem;line-height:1.5}
.ticklist--in li::before{content:"\2713";color:var(--green-700)}
.ticklist--out li::before{content:"\2013";color:var(--ink-mute)}

/* ---------- Package rows on the index ---------- */
.pkglist{border-top:1px solid var(--line)}
.pkgrow{
  display:grid;gap:1.1rem;padding:1.8rem 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;align-items:center;
  transition:background .3s var(--t);
}
.pkgrow:hover{background:var(--mist)}
@media(min-width:820px){
  .pkgrow{grid-template-columns:230px 1fr 190px;gap:2rem;padding:1.8rem 1rem}
}
.pkgrow__img .frame{border-radius:3px;overflow:hidden}
.pkgrow__img .frame--photo img{transition:transform .6s var(--t)}
.pkgrow:hover .pkgrow__img .frame--photo img{transform:scale(1.04)}
.pkgrow__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem}
.pkgrow__tags .tag{font-size:.68rem;padding:.2rem .55rem;border-color:var(--line-strong);color:var(--ink-mute)}
.pkgrow h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin:0 0 .35rem;color:var(--green-900);letter-spacing:-.01em}
.pkgrow p{margin:0 0 .7rem;font-size:.94rem;color:var(--ink-soft);max-width:56ch}
.pkgrow__meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.8rem;color:var(--ink-mute)}
.pkgrow__meta span:first-child{font-weight:600;color:var(--green-800)}
.pkgrow__price{text-align:left}
@media(min-width:820px){.pkgrow__price{text-align:right}}
.pkgrow__price b{display:block;font-family:var(--serif);font-weight:400;font-size:1.35rem;color:var(--green-900);line-height:1.2}
.pkgrow__price>span{display:block;font-size:.74rem;color:var(--ink-mute);margin-bottom:.7rem;max-width:22ch}
@media(min-width:820px){.pkgrow__price>span{margin-left:auto}}

/* ---------- Filter ---------- */
.pkgfilter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.pkgfilter .tag{background:none;cursor:pointer;font:inherit;font-size:.8rem}
.pkgfilter .tag[data-active="true"]{border-color:var(--green-900);color:var(--green-900);background:rgba(0,188,35,.08);font-weight:600}
.pkgempty{padding:2.5rem 0;color:var(--ink-mute);font-size:.95rem}

/* ---------- Price block in the sticky rail ---------- */
.rail__price{margin:.35rem 0 1.3rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.rail__price b{display:block;font-family:var(--serif);font-weight:400;font-size:1.7rem;color:var(--green-900);line-height:1.15}
.rail__price span{display:block;font-size:.78rem;color:var(--ink-mute);margin-top:.2rem}

/* ---------- Booking form ---------- */
.bookingform__pkg{
  background:var(--green-900);color:var(--snow);border-radius:3px;
  padding:1.1rem 1.3rem;display:grid;gap:.25rem;margin-bottom:.4rem;
}
.bookingform__pkg .mono-label{color:var(--green)}
.bookingform__pkg strong{font-family:var(--serif);font-weight:400;font-size:1.25rem}
.bookingform__pkg span{font-size:.82rem;color:rgba(255,250,250,.72)}

/* ============================================================
   SLIDERS
   Native horizontal scroll with snap points. Arrows are added by script and
   simply scroll the track, so swiping works on touch, the keyboard works via
   the focusable track, and with JavaScript off every card is still reachable.
   ============================================================ */
.slider{position:relative}
.slider__track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:78%;
  gap:clamp(14px,2vw,26px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-left:0;
  padding-bottom:.5rem;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.slider__track::-webkit-scrollbar{display:none}
.slider__track:focus-visible{outline:2px solid var(--motif);outline-offset:6px;border-radius:3px}
.slider__slide{scroll-snap-align:start;min-width:0}
@media(min-width:640px){.slider__track{grid-auto-columns:46%}}
@media(min-width:1000px){.slider__track{grid-auto-columns:31.2%}}
@media(min-width:1000px){.slider__track--tall{grid-auto-columns:23%}}

.slider__nav{display:flex;gap:.5rem}
.slider__btn{
  width:44px;height:44px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--line-strong);border-radius:50%;color:var(--green-900);
  transition:border-color .2s,background .2s,opacity .2s;
}
.slider__btn:hover:not(:disabled){border-color:var(--green-900);background:rgba(0,188,35,.08)}
.slider__btn:disabled{opacity:.3;cursor:default}
.section--forest .slider__btn{border-color:var(--line-light);color:var(--snow)}
.section--forest .slider__btn:hover:not(:disabled){border-color:var(--snow);background:rgba(255,250,250,.08)}

/* Itinerary card: a day count sits over the photograph */
.pkgcard{position:relative}
.pkgcard__days{
  position:absolute;top:.7rem;left:.7rem;z-index:1;
  background:var(--green);color:var(--ink);
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:2px;
}
.pkgcard .xcard__meta{margin-bottom:.55rem}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.heroslider{margin-top:clamp(32px,4.5vw,54px);position:relative}
.heroslider__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
}
.heroslider__track::-webkit-scrollbar{display:none}
.heroslider__track:focus-visible{outline:2px solid var(--motif);outline-offset:4px;border-radius:3px}
.heroslider__slide{scroll-snap-align:center;margin:0;position:relative;min-width:0}
.heroslider__slide .frame{border-radius:3px}
@media(min-width:900px){.heroslider__slide .frame{aspect-ratio:21/9}}
.heroslider__slide figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.2rem .9rem;
  font-size:.82rem;letter-spacing:.02em;color:rgba(255,250,250,.92);
  background:linear-gradient(to top,rgba(4,39,13,.78),rgba(4,39,13,0));
  border-radius:0 0 3px 3px;
}
.heroslider__dots{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}
.heroslider__dots button{
  background:none;border:0;cursor:pointer;padding:.5rem .25rem;line-height:0;
}
.heroslider__dots span{
  display:block;width:32px;height:3px;border-radius:2px;
  background:var(--line-strong);transition:background .3s var(--t);
}
.heroslider__dots button[aria-selected="true"] span{background:var(--motif)}

/* ============================================================
   SPLIT BAND — text one side, photograph the other
   ============================================================ */
.splitband{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media(min-width:900px){.splitband{grid-template-columns:1.15fr .85fr}}
.splitband__text p{color:rgba(255,250,250,.74);max-width:52ch;margin:1rem 0 0}
.splitband__text .empty{margin-top:1.8rem}
.splitband__img .frame{border-radius:3px}
@media(max-width:899px){.splitband__img .frame{aspect-ratio:16/9}}

/* ============================================================
   BUTTONS ON DARK GREEN
   The standard primary button is deep green, which disappears against a deep
   green band. On dark sections it becomes the bright logo green with dark ink
   — 7.2:1, and unmistakably the brand.
   ============================================================ */
.section--forest .btn--primary,
.phead--photo .btn--primary{background:var(--green);color:var(--ink)}
.section--forest .btn--primary:hover,
.phead--photo .btn--primary:hover{background:var(--green-600)}
.section--forest .btn--outline,
.phead--photo .btn--outline{color:var(--snow);border-color:rgba(255,250,250,.42)}
.section--forest .btn--outline:hover,
.phead--photo .btn--outline:hover{border-color:var(--snow);background:rgba(255,250,250,.10)}
.section--forest .textlink{border-bottom-color:var(--green)}

/* ============================================================
   HERO WITH BACKGROUND SLIDER
   The photographs sit behind the headline as a full-bleed layer. A deep green
   wash over them holds white text at roughly 12:1 regardless of which frame is
   showing, so the type never depends on how bright a particular photograph is.
   ============================================================ */
.hero--bg{
  position:relative;isolation:isolate;overflow:hidden;
  padding:0;
  min-height:clamp(520px,74vh,760px);
  display:flex;align-items:center;
  background:var(--green-950);
}
.hero--bg .heroslider__track{
  position:absolute;inset:0;z-index:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
  margin:0;
}
.hero--bg .heroslider__track::-webkit-scrollbar{display:none}
.hero--bg .heroslider__track:focus-visible{outline:2px solid var(--green);outline-offset:-4px}
.hero--bg .heroslider__slide{scroll-snap-align:center;position:relative;min-width:0;height:100%}
.hero--bg .frame--ratio-fill{aspect-ratio:auto;height:100%;width:100%;border-radius:0;background:none}
.hero--bg .frame--ratio-fill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero--bg .frame--photo::after{display:none}

.hero__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Lightened so the photographs read clearly, while still covering the text
     column. Worst case — a pure white pixel under the type — the headline
     holds 9.5:1 at the left and 6.8:1 at the far edge of the copy, with body
     text at 7.5:1 and 5.5:1. Past 55% no text sits, so the wash drops away and
     the image comes through almost untouched. */
  background:
    linear-gradient(100deg,rgba(4,39,13,.84) 0%,rgba(4,39,13,.74) 55%,rgba(4,39,13,.22) 100%),
    linear-gradient(to top,rgba(4,39,13,.55) 0%,rgba(4,39,13,0) 48%);
}
.hero--bg .hero__line{z-index:2}
.hero--bg .hero__line path{stroke:var(--green);opacity:.5}
.hero--bg .hero__inner{
  position:relative;z-index:3;
  padding-top:clamp(56px,9vw,96px);padding-bottom:clamp(40px,6vw,72px);
  width:100%;
}
.hero--bg .hero__head{color:var(--snow)}
.hero--bg .hero__sub{color:rgba(255,250,250,.86)}

/* Buttons on the hero follow the dark-section treatment */
.hero--bg .btn--primary{background:var(--green);color:var(--ink)}
.hero--bg .btn--primary:hover{background:var(--green-600)}
.hero--bg .btn--outline{color:var(--snow);border-color:rgba(255,250,250,.45)}
.hero--bg .btn--outline:hover{border-color:var(--snow);background:rgba(255,250,250,.10)}

/* Dots sit under the buttons, inside the text column */
.hero--bg .heroslider__dots{justify-content:flex-start;margin-top:2.2rem}
.hero--bg .heroslider__dots span{background:rgba(255,250,250,.35);width:38px}
.hero--bg .heroslider__dots button[aria-selected="true"] span{background:var(--green)}
.hero--bg .heroslider__dots button:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:2px}

/* The two journey panels now sit in their own band below the hero */
.worldsband{padding-top:0}
.worldsband .worlds{margin-top:0;border-top:0}


/* ============================================================
   FOOTER BACKGROUND
   A photograph behind the footer, held down by a green wash so every piece of
   text stays above AA: headings 11.4:1, body copy 6.7:1, the green section
   labels 4.6:1. The khatam lattice still sits on top of both.
   ============================================================ */
#footer{position:relative;isolation:isolate}
.fbg{
  position:absolute;inset:0;z-index:-3;
  width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:.20;
}
.fbg__wash{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,62,21,.94) 0%,rgba(7,62,21,.90) 45%,rgba(4,39,13,.96) 100%);
}
#footer .ftex{z-index:-1}