/* ==========================================================================
   ARAB ADVENTURERS — front page
   Brand colours sampled from arab_adventurers_logo_with_dunes.png
   ========================================================================== */

:root{
  /* brand — brick red, from the logo */
  --brand:        #9e1a0e;
  --brand-deep:   #6f1209;
  --brand-rule:   #c04a3a;
  --brand-hover:  #85160c;

  /* the single accent — the amber dune from the logo */
  --sand:         #edb22e;
  --sand-tint:    #f5cd6a;

  /* neutrals */
  --ink:          #333333;
  --body:         #565555;
  --white:        #ffffff;
  --surface-1:    #e2e2e2;
  --surface-2:    #666666;
  --surface-tbl:  #e7e7e8;
  --footer-text:  #f0e4e0;
  --footer-muted: #e0bcb2;
  --rule:         #dadada;
  --rule-strong:  #c5c5c5;

  /* status */
  --ok:           #83a846;
  --few:          #d9821f;
  --full:         #c02b1b;

  /* type */
  --font:         'Rosario', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-hand:    'Reenie Beanie', cursive;
  --font-ar:      'Noto Kufi Arabic', var(--font);
  --fs-body:      15px;
  --fs-body-lg:   16px;
  --lh-body:      1.5;

  /* layout */
  --container:    1300px;
  --meta-bar:     900px;

  /* scrims */
  --scrim-top:    linear-gradient(to top,   rgba(0,0,0,0),   rgba(0,0,0,.7));
  --scrim-bottom: linear-gradient(to top,   rgba(0,0,0,.9),  rgba(0,0,0,0));
  --scrim-left:   linear-gradient(to right, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 34%, rgba(0,0,0,0) 68%);

  --t-fast: .3s ease-in-out;
  --t-slow: .4s ease-in-out;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--body);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  margin:0 0 .4em;
  font-family:var(--font);
  font-weight:600;
  line-height:1.1;
  text-transform:uppercase;
  color:inherit;
}
h1{ font-size:30px; }
h2{ font-size:28px; }
h3{ font-size:35px; }
h4{ font-size:18px; }
h5{ font-size:16px; font-weight:400; }
h6{ font-size:14px; }

p{ margin:0 0 1em; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

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

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-block;
  padding:15px 30px 13px;
  min-width:139px;
  border:1px solid transparent;
  border-radius:0;
  font-size:13px;
  font-weight:700;
  letter-spacing:.6px;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  cursor:pointer;
  transition:opacity var(--t-slow), background-color var(--t-slow);
}
.btn:hover{ opacity:.9; }
.btn--primary{ background:var(--brand); border-color:var(--brand); color:var(--white); }
.btn--ghost{ background:transparent; border:2px solid var(--white); color:var(--white); }
.btn--ghost:hover{ background:rgba(255,255,255,.3); opacity:1; }
.btn--small{ padding:9px 16px 7px; min-width:80px; }

/* ----------------------------------------------------------- dune divider */
/* Signature element: the amber dune from the logo, reused as the section
   rule in place of the flat hairline. */
.dune-rule{
  display:flex;
  align-items:center;
  gap:22px;
  padding:26px 0;
}
.dune-rule::before,
.dune-rule::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--rule);
}
.dune-rule--tight{ padding:12px 0; }
.dune-rule--dark::before,
.dune-rule--dark::after{ background:rgba(255,255,255,.25); }

/* ---------------------------------------------------------------- header */
.site-header{
  position:absolute;
  inset:0 0 auto 0;
  z-index:40;
}

.meta-bar{
  width:var(--meta-bar);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px 0 10px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--white);
}
.meta-bar a{ text-decoration:none; opacity:.85; }
.meta-bar a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.meta-bar__links{ display:flex; gap:22px; }
.meta-bar__tag{ font-weight:700; }

.header-main{
  max-width:var(--container);
  margin-inline:auto;
  padding:0 24px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.logo{ display:block; flex:none; }
.logo img{ height:104px; width:auto; }

/* ------------------------------------------------------------ main nav */
.nav{ margin-top:52px; }
.nav__list{
  display:flex;
  align-items:stretch;
  gap:0;
  margin:0; padding:0;
  list-style:none;
}
.nav__list > li{ position:relative; }
.nav__list > li > a{
  display:block;
  padding:10px 14px;
  color:var(--white);
  font-size:18px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  text-decoration:none;
  transition:background-color var(--t-fast);
}
.nav__list > li > a:hover,
.nav__list > li:hover > a{ background:var(--brand); }

.nav__cta > a{
  margin-left:14px;
  border:2px solid var(--white);
  background:var(--brand);
  padding:8px 14px;
}
.nav__cta:hover > a{ background:transparent; }

/* mega menu */
.mega{
  position:absolute;
  top:100%; left:0;
  min-width:600px;
  padding:20px;
  background:var(--brand);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 32px;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--t-fast), visibility var(--t-fast);
}
.nav__list > li:hover .mega,
.nav__list > li:focus-within .mega{ opacity:1; visibility:visible; }
.mega__title{
  margin:0 0 8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--brand-rule);
  color:var(--white);
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}
.mega ul{ margin:0; padding:0; list-style:none; }
.mega li a{
  display:block;
  padding:5px 0 5px 15px;
  color:var(--footer-text);
  font-size:16px;
  text-decoration:none;
}
.mega li a:hover{ color:var(--sand-tint); }

/* burger */
.burger{
  display:none;
  margin-top:56px;
  width:46px; height:46px;
  padding:0;
  border:2px solid var(--white);
  background:var(--brand);
  color:var(--white);
  cursor:pointer;
}
.burger span{
  display:block;
  width:20px; height:2px;
  margin:4px auto;
  background:currentColor;
}

.mobile-nav{
  position:fixed;
  inset:0 0 0 auto;
  width:min(320px,86vw);
  z-index:60;
  padding:96px 0 40px;
  background:var(--brand);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform var(--t-slow);
}
.mobile-nav[data-open="true"]{ transform:translateX(0); }
.mobile-nav ul{ margin:0; padding:0; list-style:none; }
.mobile-nav a{
  display:block;
  padding:12px 24px;
  color:var(--white);
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  text-decoration:none;
}
.mobile-nav .sub a{
  padding-left:40px;
  font-size:16px;
  font-weight:400;
  text-transform:none;
  color:var(--footer-text);
}
.mobile-nav a:hover{ background:var(--brand-deep); }
.mobile-nav__close{
  position:absolute; top:24px; right:20px;
  width:44px; height:44px;
  border:0; background:transparent;
  color:var(--white);
  font-size:28px; line-height:1;
  cursor:pointer;
}
.scrim{
  position:fixed; inset:0; z-index:50;
  background:rgba(0,0,0,.6);
  opacity:0; visibility:hidden;
  transition:opacity var(--t-slow), visibility var(--t-slow);
}
.scrim[data-open="true"]{ opacity:1; visibility:visible; }

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;
  height:clamp(460px, 76vh, 720px);
  overflow:hidden;
  background:#12100f;
}
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 45%;
  background:#12100f;
}
.hero::after{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:250px;
  background-image:var(--scrim-top);
  z-index:2;
}

/* ------------------------------------------------------------- welcome */
.welcome{
  display:flex;
  flex-wrap:wrap;
  max-width:var(--container);
  margin-inline:auto;
  background:var(--surface-1);
}
.welcome__main{
  position:relative;
  flex:3 1 460px;
  padding:60px;
  background:var(--white);
  color:var(--body);
}
.welcome__aside{
  flex:2 1 320px;
  padding:50px 60px;
  background:var(--surface-1);
  color:var(--body);
}
.welcome__main h1{ color:var(--brand); }
.lede{
  font-size:20px;
  line-height:1.45;
  color:var(--brand);
}
.welcome__main p{ font-size:var(--fs-body-lg); }
.signoff{
  margin-top:26px;
  font-size:var(--fs-body);
  line-height:1.4;
}
.signoff strong{ color:var(--brand); }

/* the promo bubble */
.aktion{
  position:absolute;
  top:26px; right:44px;
  max-width:250px;
  padding:14px 18px;
  background:var(--brand);
  color:var(--white);
  text-align:center;
}
.aktion::after{
  content:"";
  position:absolute;
  bottom:-18px; left:20%;
  width:0; height:0;
  border-style:solid;
  border-width:18px 18px 0 18px;
  border-color:var(--brand) transparent;
}
.aktion a{
  color:var(--white);
  font-size:14px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-decoration:none;
}
.aktion a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* four ways to travel */
.ways__title{ margin-bottom:14px; color:var(--brand); letter-spacing:1px; }
.ways{ margin:0; padding:0; list-style:none; }
.ways li{ padding:14px 0; border-bottom:1px solid var(--rule-strong); }
.ways li:last-child{ border-bottom:0; }
.ways h4{
  margin:0 0 2px;
  color:var(--brand);
  letter-spacing:1px;
}
.ways p{ margin:0; }

/* -------------------------------------------------------------- why band */
.why{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  max-width:var(--container);
  margin-inline:auto;
  background:var(--ink);
}
.why__col{ padding:35px; background:var(--surface-1); }
.why__col h2{ color:var(--brand); }
.beat{ margin-bottom:22px; }
.beat h4{
  margin:0;
  font-size:26px;
  letter-spacing:1px;
  color:var(--brand);
}
.beat p{ margin:2px 0 0; font-size:var(--fs-body-lg); }
.beat strong{ color:var(--ink); font-weight:700; }

.season__img{
  height:190px;
  background-size:cover;
  background-repeat:no-repeat;
}
.season__img--winter{ background-image:url("/assets/hiking-empty-quarter.jpg"); background-position:center 62%; }
.season__img--summer{ background-image:url("/assets/hajar-mountains.jpg");      background-position:center 26%; }
.why__col--season{ display:flex; flex-direction:column; padding:0 0 25px; }
.why__col--season .season__body{ padding:20px 35px 0; }
.why__col--season h4{ color:var(--brand); letter-spacing:1px; }
.why__col--season p{ font-size:var(--fs-body-lg); }
.why__col--season .btn{ align-self:center; margin-top:auto; }

/* ------------------------------------------------------------ tour band */
.band-dark{ background:var(--ink); color:var(--white); }
.band-dark h2{ color:var(--white); }
.band-heading{
  padding:38px 0 26px;
  text-align:center;
  letter-spacing:1px;
}
.band-heading .eyebrow{
  display:block;
  margin-bottom:10px;
  color:var(--sand);
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}

/* teaser grid */
.teasers{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:var(--container);
  margin-inline:auto;
}
.teaser{
  position:relative;
  display:block;
  height:325px;
  overflow:hidden;
  color:var(--white);
  text-decoration:none;
}
.teaser__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transition:transform var(--t-fast);
}
.teaser:hover .teaser__bg,
.teaser:focus-visible .teaser__bg{ transform:scale(1.02); }
.teaser::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:180px;
  background-image:linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,0));
}
.teaser__wrap{
  position:absolute; bottom:0; left:50%;
  transform:translateX(-50%);
  z-index:2;
  width:100%; max-width:400px;
  padding:0 15px 18px;
  text-align:center;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.teaser h5{ margin:0; letter-spacing:1px; color:var(--sand-tint); }
.teaser h4{ margin:2px 0 0; font-size:20px; font-weight:700; letter-spacing:1px; }
.teaser p{ margin:5px 0 0; font-size:var(--fs-body); letter-spacing:1px; }

.teaser--biking  .teaser__bg{ background-image:url("/assets/mountain-biking.jpg"); }
.teaser--omanis  .teaser__bg{ background-image:url("/assets/live-with-omanis.jpg"); background-position:center 40%; }
.teaser--camping .teaser__bg{ background-image:url("/assets/camping-night.jpg"); background-position:center 68%; }

/* -------------------------------------------- featured tour (.reiseart) */
.featured-wrap{ padding:50px 24px; background:var(--ink); }
.featured{
  position:relative;
  max-width:var(--container);
  margin-inline:auto;
  padding:0 35px;
  color:var(--white);
  /* zoomed and anchored right so the copy panel sits on open desert */
  background:url("/assets/hiking-empty-quarter.jpg") right 60% / 165% auto no-repeat;
  min-height:330px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.featured::before{
  content:"";
  position:absolute; inset:0;
  background-image:var(--scrim-left);
}
.featured__inner{
  position:relative;
  z-index:2;
  width:min(560px,100%);
  padding:34px 0;
}
.featured h4{ margin:0 0 4px; letter-spacing:1px; color:var(--sand-tint); }
.featured h1{ margin:0 0 12px; font-weight:400; font-size:30px; }
.featured p{ line-height:1.35; }
.featured__actions{ margin:0; padding:15px 0 0; list-style:none; display:flex; flex-wrap:wrap; gap:14px; }
.flag{
  position:absolute;
  top:0; right:10%;
  z-index:3;
  padding:5px 20px;
  background:var(--brand);
  color:var(--white);
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}
.flag::after{
  content:"";
  position:absolute; top:100%; left:20%;
  width:0; height:0;
  border-style:solid;
  border-width:10px 10px 0 10px;
  border-color:var(--brand) transparent;
}

/* profile + departures */
.detail-wrap{
  display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:40px;
  max-width:var(--container);
  margin-inline:auto;
  padding:40px 24px 60px;
  background:var(--white);
}
.profile h4{ color:var(--brand); }
.profile ul{
  margin:10px 0 0;
  padding:20px;
  list-style:none;
  background:var(--brand);
  color:var(--white);
  font-size:14px;
}
.profile li{ display:flex; align-items:center; gap:6px; padding:3px 0; line-height:1.6; }
.profile .label{
  min-width:120px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.dots{ display:flex; gap:5px; }
.dot{ width:11px; height:11px; border:1px solid var(--sand); border-radius:50%; }
.dot--on{ background:var(--sand); }

.departures h4{ color:var(--brand); }
.departures__scroll{ margin-top:12px; overflow-x:auto; }
.departures table{ width:100%; min-width:340px; border-collapse:collapse; }
.departures td{
  padding:9px 10px;
  background:var(--surface-tbl);
  border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);
  color:var(--body);
  font-size:var(--fs-body);
  vertical-align:middle;
}
.departures tr td:last-child{ text-align:right; }
.status{
  display:inline-block;
  width:12px; height:12px;
  border-radius:50%;
}
.status--ok{ background:var(--ok); }
.status--few{ background:var(--few); }
.status--full{ background:var(--full); }
.book-link{
  display:inline-block;
  min-width:76px;
  padding:5px 10px;
  background:var(--brand);
  color:var(--white);
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-decoration:none;
}
.book-link:hover{ background:var(--brand-hover); }
.chip-full{
  display:inline-block;
  min-width:76px;
  padding:5px 10px;
  background:var(--ink);
  color:#ff8f80;
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.legend{ margin:14px 0 0; padding:0; list-style:none; font-size:13px; }
.legend li{ display:flex; align-items:center; gap:8px; padding:2px 0; }

/* ------------------------------------------------------------ testimonial */
.voices{
  padding:50px 24px 56px;
  background:var(--surface-1);
  text-align:center;
}
.voices__intro{
  max-width:640px;
  margin:0 auto 6px;
  font-size:var(--fs-body-lg);
}
.quote{ max-width:820px; margin:0 auto; }
.quote__mark{
  display:block;
  margin:0 0 4px;
  text-align:left;
  color:var(--brand);
  font-family:var(--font-hand);
  font-size:64px;
  line-height:.6;
}
.quote blockquote{
  margin:0;
  color:var(--brand);
  font-family:var(--font-hand);
  font-size:34px;
  line-height:1.05;
  text-align:left;
}
.quote figcaption{
  margin-top:10px;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  text-align:right;
  color:var(--body);
}

/* -------------------------------------------------------------- longform */
.longform{
  padding:56px 24px 64px;
  background:var(--ink);
  color:#dedbd9;
}
.longform__inner{ max-width:900px; margin-inline:auto; }
.longform h2{ color:var(--white); }
.longform p{ font-size:var(--fs-body-lg); }
.longform strong{ color:var(--sand-tint); font-weight:700; }

/* ---------------------------------------------------------------- footer */
.site-footer{
  padding:48px 24px 20px;
  background:var(--brand);
  color:var(--footer-text);
  font-size:var(--fs-body);
}
.site-footer__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  max-width:var(--container);
  margin-inline:auto;
}
.site-footer h5{
  margin:0 0 12px;
  color:var(--white);
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
}
.site-footer ul{ margin:0; padding:0; list-style:none; }
.site-footer li a{
  display:inline-block;
  padding:4px 0;
  color:var(--footer-text);
  text-decoration:none;
}
.site-footer li a:hover{ color:var(--sand-tint); text-decoration:underline; text-underline-offset:3px; }
.socials{ display:flex; gap:16px; margin-top:18px; }
.socials a{
  display:grid; place-items:center;
  width:44px; height:44px;
  color:var(--white);
}
.socials svg{ width:22px; height:22px; fill:currentColor; }
.socials a:hover{ color:var(--sand); }
.brand-block__ar{
  text-align:left;
  font-family:var(--font-ar);
  font-size:19px;
  line-height:1.9;
  color:var(--white);
}
.brand-block__en{
  margin:0;
  color:var(--white);
  font-size:15px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}
.brand-block__tag{
  margin:6px 0 14px;
  color:var(--sand-tint);
  font-size:14px;
  letter-spacing:1px;
}
.colophon{
  max-width:var(--container);
  margin:32px auto 0;
  padding-top:16px;
  border-top:1px solid var(--brand-rule);
  color:var(--footer-muted);
  font-size:13px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  justify-content:space-between;
}

.to-top{
  opacity:0;
  visibility:hidden;
  transition:opacity var(--t-slow), visibility var(--t-slow), background-color var(--t-slow);
  position:fixed;
  right:16px; bottom:16px;
  z-index:30;
  display:grid; place-items:center;
  width:46px; height:46px;
  background:var(--brand);
  color:var(--white);
  text-decoration:none;
  font-size:20px;
}
.to-top[data-visible="true"]{ opacity:1; visibility:visible; }
.to-top:hover{ background:var(--brand-hover); }

/* ------------------------------------------------------------ responsive */
@media (max-width:1100px){
  .why{ grid-template-columns:1fr; }
  .teasers{ grid-template-columns:1fr 1fr; }
  .detail-wrap{ grid-template-columns:1fr; }
  .featured::before{ background-image:linear-gradient(to right, rgba(0,0,0,.85), rgba(0,0,0,.5)); }
}
@media (max-width:900px){
  .meta-bar{ width:auto; padding-inline:24px; }
  .nav, .mega{ display:none; }
  .burger{ display:block; }
  .welcome__main{ padding:40px 28px; }
  .welcome__aside{ padding:32px 28px; }
  .aktion{ position:static; max-width:none; margin-bottom:24px; }
  .aktion::after{ display:none; }
  .featured-wrap{ padding:28px 0; }
  .featured{ padding:0 28px; }
  .featured__inner{ padding:28px 0; }
}
@media (max-width:768px){
  .meta-bar{ display:none; }
  .site-header{ background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)); }
  .header-main{ align-items:center; padding-block:12px; }
  .logo img{ height:64px; }
  .burger{ margin-top:0; }
  .teasers{ grid-template-columns:1fr; }
  .hero{ height:clamp(360px,58vh,520px); }
  .hero__video{ object-position:center center; }
  .hero::after{ height:150px; }
  .site-footer__cols{ grid-template-columns:1fr; gap:28px; }
  .departures td{ padding:6px 8px; font-size:13px; }
  .departures td:nth-child(2){ white-space:nowrap; }
  .aktion{ padding:11px 14px; }
  h3{ font-size:28px; }
  .quote blockquote{ font-size:30px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
}

/* ------------------------------------------------- interior page additions */
/* the meta bar now carries only the tagline */
.meta-bar{ justify-content:center; }

/* in-page scrolling is handled in JS so the URL never picks up a #hash */
[id]{ scroll-margin-top:120px; }

.page-hero{ position:relative; min-height:clamp(280px,42vh,420px); display:flex;
  align-items:flex-end; background-size:cover; background-position:center 55%;
  background-color:var(--ink); }
.page-hero::after{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.15) 55%, rgba(0,0,0,.55)); }
.page-hero__inner{ position:relative; z-index:2; padding:0 24px 34px; color:var(--white); }
.page-hero h1{ margin:0; font-size:clamp(26px,4vw,38px); }
.page-hero .eyebrow{ margin:0 0 6px; color:var(--sand-tint); font-size:13px;
  font-weight:700; letter-spacing:2px; text-transform:uppercase; }

.sheet{ max-width:var(--container); margin-inline:auto; background:var(--white);
  padding:46px clamp(24px,4vw,60px); }
.sheet h2{ color:var(--brand); margin-top:34px; }
.sheet h2:first-child{ margin-top:0; }
.sheet .lede{ font-size:19px; line-height:1.45; color:var(--brand); }
.sheet p, .sheet li{ font-size:var(--fs-body-lg); }

.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:40px; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }

.itinerary{ list-style:none; margin:0; padding:0; }
.itinerary li{ display:flex; gap:18px; padding:14px 0; border-bottom:1px solid var(--rule); }
.itinerary li:last-child{ border-bottom:0; }
.itinerary__day{ flex:none; min-width:74px; color:var(--brand); font-weight:700;
  font-size:13px; letter-spacing:1px; text-transform:uppercase; padding-top:2px; }
.itinerary h4{ margin:0 0 2px; color:var(--ink); text-transform:none; font-size:17px; }
.itinerary .meals{ margin:0; font-size:14px; color:var(--body); }

.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{ position:relative; padding:5px 0 5px 26px; }
.ticks li::before{ content:""; position:absolute; left:2px; top:12px; width:9px; height:9px;
  border-radius:50%; background:var(--sand); }
.ticks--no li::before{ background:var(--rule-strong); }

.book-card{ background:var(--brand); color:var(--white); padding:26px; position:sticky; top:20px; }
.book-card h4{ color:var(--white); margin:0 0 8px; }
.book-card p{ font-size:15px; margin-bottom:18px; color:var(--footer-text); }
.book-card .btn{ width:100%; background:var(--white); color:var(--brand); border-color:var(--white); }

.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:2px; }
.gallery-grid a{ display:block; aspect-ratio:4/3; overflow:hidden; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-fast); }
.gallery-grid a:hover img{ transform:scale(1.03); }

.tour-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.notice{ background:var(--surface-1); border-left:4px solid var(--sand);
  padding:18px 22px; margin:26px 0; font-size:15px; }
.field{ display:block; margin-bottom:16px; }
.field span{ display:block; margin-bottom:5px; font-size:13px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:var(--brand); }
.field input, .field textarea, .field select{ width:100%; padding:11px 13px;
  border:1px solid var(--rule-strong); border-radius:0; background:var(--white);
  font-family:var(--font); font-size:16px; color:var(--body); }
.field textarea{ min-height:150px; resize:vertical; }
.team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:28px; }
.team-card img{ width:100%; aspect-ratio:1; object-fit:cover; margin-bottom:10px; }
.team-card h4{ margin:0; color:var(--brand); text-transform:none; font-size:17px; }
.team-card .role{ margin:0; font-size:13px; letter-spacing:1px; text-transform:uppercase; }
.team-card .bio{ margin:8px 0 0; font-size:15px; }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:200; display:none; place-items:center;
  background:rgba(0,0,0,.92); padding:24px; }
.lb[data-open="true"]{ display:grid; }
.lb img{ max-width:100%; max-height:90vh; object-fit:contain; }
.lb__close{ position:absolute; top:16px; right:20px; width:46px; height:46px;
  border:0; background:transparent; color:#fff; font-size:32px; cursor:pointer; }
.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px;
  border:0; background:rgba(0,0,0,.4); color:#fff; font-size:26px; cursor:pointer; }
.lb__nav--prev{ left:12px; } .lb__nav--next{ right:12px; }

/* ---------------------------------------------------- tours index sections */
.tour-jump{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  padding:22px 24px; background:var(--ink); }
.tour-jump a{ display:inline-flex; align-items:center; gap:9px; padding:11px 22px;
  border:1px solid rgba(255,255,255,.28); color:var(--white); font-size:13px;
  font-weight:700; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none;
  transition:background-color var(--t-fast), border-color var(--t-fast); }
.tour-jump a:hover{ background:var(--brand); border-color:var(--brand); }
.tour-jump span{ color:var(--sand); font-size:12px; }
.tour-section{ padding-bottom:46px; }
.band-heading{ text-align:center; }
.band-blurb{ max-width:560px; margin:10px auto 0; color:#cfcfcf; font-size:16px; }

/* ------------------------------------------------------- per-tour enquiry */
.enquire{ background:var(--surface-1); padding:52px 24px; }
.enquire__inner{ max-width:760px; margin-inline:auto; text-align:center; }
.enquire__inner h2{ color:var(--brand); margin-bottom:8px; }
.enquire__inner > p{ color:var(--body); font-size:16px; margin-bottom:26px; }
.enquire .eyebrow{ display:block; margin-bottom:6px; color:var(--brand); font-size:13px;
  font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.enquire__form{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; text-align:left; }
.enquire__form .field--wide, .enquire__form button, .enquire__note{ grid-column:1 / -1; }
.enquire__form button{ justify-self:center; min-width:220px; margin-top:6px; }
.enquire__note{ margin:12px 0 0; font-size:13px; color:var(--body); text-align:center; }
@media (max-width:700px){ .enquire__form{ grid-template-columns:1fr; } }

/* header over a light page - the default white treatment is unreadable there */
.logo__dark{ display:none; }
.page-light .logo__light{ display:none; }
.page-light .logo__dark{ display:block; }
.page-light .meta-bar,
.page-light .meta-bar a,
.page-light .nav__list > li > a{ color:#4A2C17; }
.page-light .nav__list > li > a:hover,
.page-light .nav__list > li:hover > a{ background:#3A2210; color:#EBC28C; }
.page-light .nav__cta > a{ border-color:#3A2210; background:#3A2210; color:#EBC28C; }
.page-light .nav__cta:hover > a{ background:transparent; color:#3A2210; }
.page-light .burger{ border-color:#3A2210; background:#3A2210; color:#EBC28C; }

/* ------------------------------------------------------------- Al-Kasbah
   Design language taken from the client's reference (wajmah.om). Measured off
   the rendered reference, not guessed: one typeface (Raleway) at light weights,
   centred body copy at 19px / 2px tracking / 1.5 on a ~350px measure, headings
   in wide-tracked caps, plain chevron text links instead of filled buttons,
   portrait images, a wavy rule and a flat accent band between sections, and
   grounds that alternate between two near-white tints.

   Their khaki accent maps onto the client's mandated sand (#EBC28C); their
   off-white and cream grounds become pale sand tints; their warm grey-brown
   text and footer become warm brown. */
.page-qasbah{
  --q-sand:#EBC28C;      /* the accent, used in bands and the hero only */
  --q-paper:#FAF5EC;     /* ground A - the reference's #F8F8F8 */
  --q-cream:#FDF9F2;     /* ground B - the reference's #FEFAF1 */
  --q-plain:#FFFFFF;     /* ground C */
  --q-ink:#6E5F52;       /* body text - the reference's #68605C, warmed */
  --q-head:#59493C;      /* headings */
  --q-deep:#3A2A1E;      /* footer and the booking block */
  --q-line:rgba(110,95,82,.28);
  background:var(--q-paper);
}
.page-qasbah main{ color:var(--q-ink); font-family:'Raleway',system-ui,sans-serif; }

/* ---- rhythm ---- */
.q-sec{ padding:clamp(64px,9vw,124px) clamp(20px,4vw,40px); }
.q-sec--paper{ background:var(--q-paper); }
.q-sec--cream{ background:var(--q-cream); }
.q-sec--plain{ background:var(--q-plain); }
.q-sec--sand { background:var(--q-sand); --q-ink:#4A3323; --q-head:#3A2A1E;
               --q-line:rgba(58,42,30,.32); }
.q-sec--deep { background:var(--q-deep); --q-ink:#E8D5BE; --q-head:#EBC28C;
               --q-line:rgba(235,194,140,.3); }

/* the reference's flat accent band and hand-drawn rule */
.q-band{ height:22px; background:var(--q-sand); }
.q-rule{ color:var(--q-line); background:var(--q-paper); padding:0 clamp(20px,4vw,40px); }
.q-rule svg{ display:block; width:100%; height:14px; }

/* ---- type ---- */
.page-qasbah h1,
.page-qasbah h2,
.page-qasbah h3,
.page-qasbah h4{ font-family:'Raleway',system-ui,sans-serif; color:var(--q-head);
  font-weight:300; text-transform:uppercase; }
.page-qasbah h2{ font-size:clamp(20px,2.4vw,27px); font-weight:400; letter-spacing:.075em;
  line-height:1.3; margin:0 0 26px; }
.page-qasbah h3{ font-size:clamp(15px,1.5vw,17px); font-weight:400; letter-spacing:.13em;
  margin:0 0 10px; }
.page-qasbah p{ font-size:clamp(15px,1.35vw,19px); font-weight:400; letter-spacing:.07em;
  line-height:1.62; margin:0 0 20px; }
.q-eyebrow{ font-size:11px !important; font-weight:500; letter-spacing:.26em !important;
  text-transform:uppercase; color:var(--q-head); opacity:.62; margin:0 0 16px !important; }

/* the reference centres everything and keeps the measure very narrow */
.q-copy{ text-align:center; max-width:390px; margin-inline:auto; }
.q-copy--wide{ max-width:640px; }

/* calls to action are plain uppercase links with a chevron, never buttons */
.q-link{ display:inline-block; font-size:12px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--q-head); text-decoration:none;
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:border-color var(--t-slow), opacity var(--t-slow); }
.q-link::after{ content:" »"; }
.q-link:hover{ border-bottom-color:currentColor; }
.q-link-wrap{ margin:30px 0 0 !important; }

/* ---- image / text pairs ---- */
.q-split{ max-width:1180px; margin-inline:auto; display:grid;
  grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:center; }
.q-split--flip .q-fig{ order:2; }
.q-fig{ margin:0; }
@media (max-width:880px){
  .q-split{ grid-template-columns:1fr; gap:34px; }
  .q-split--flip .q-fig{ order:0; }
}

/* portrait crops, matching the reference's 0.81 ratio */
.q-plate{ display:grid; place-content:center; gap:7px; text-align:center;
  background:linear-gradient(150deg,#E9D6BC,#DCC49F);
  border:1px solid rgba(110,95,82,.16); color:#7A6248; }
.q-plate--portrait{ aspect-ratio:81/100; }
.q-plate--wide{ aspect-ratio:4/3; }
.q-plate span{ font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; }
.q-plate em{ font-size:12px; letter-spacing:.08em; opacity:.7; }

/* the reference's full-width triple image band */
.q-strip{ margin:clamp(40px,6vw,72px) auto 0; max-width:1320px; display:grid;
  grid-template-columns:repeat(3,1fr); gap:0; }
@media (max-width:760px){ .q-strip{ grid-template-columns:1fr; } }

/* ---- grids ---- */
.q-grid{ max-width:1180px; margin:clamp(44px,6vw,74px) auto 0; display:grid;
  gap:clamp(30px,4vw,50px); }
.q-grid--rooms{ display:flex; flex-wrap:wrap; justify-content:center; max-width:1080px; }
.q-grid--rooms .q-card{ flex:0 1 300px; max-width:330px; }
.q-grid--exps { display:flex; flex-wrap:wrap; justify-content:center;
  max-width:1000px; gap:clamp(28px,3.5vw,44px); }
.q-grid--exps .q-exp{ flex:0 1 260px; max-width:300px; }
.q-card{ text-align:center; }
.q-card h3{ margin-top:22px; }
.q-card p{ font-size:15px !important; }
.q-card__meta{ font-size:11px !important; letter-spacing:.18em !important;
  text-transform:uppercase; opacity:.6; margin:0 0 10px !important; }
.q-exp{ text-align:center; padding-top:22px; border-top:1px solid var(--q-line); }
.q-exp p{ font-size:15px !important; margin:0; }

/* ---- lists ---- */
.q-list{ list-style:none; margin:0 0 22px; padding:0; }
.q-list li{ font-size:clamp(15px,1.35vw,19px); letter-spacing:.07em; line-height:1.62;
  padding:3px 0; }
.q-list--inline{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0;
  margin-top:8px; }
.q-list--inline li{ padding:0; }
.q-list--inline li:not(:last-child)::after{ content:"·"; margin:0 12px; opacity:.5; }

/* ---- booking form ---- */
.q-form{ max-width:720px; margin:clamp(38px,5vw,58px) auto 0; display:grid;
  grid-template-columns:1fr 1fr; gap:0 26px; text-align:left; }
.q-field{ display:block; margin-bottom:22px; }
.q-field--wide, .q-form button, .q-note{ grid-column:1 / -1; }
.q-field span{ display:block; margin-bottom:7px; font-size:10px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--q-head); opacity:.75; }
/* underlines rather than boxes - the reference's restraint */
.q-field input, .q-field select, .q-field textarea{ width:100%; padding:9px 2px;
  border:0; border-bottom:1px solid var(--q-line); border-radius:0; background:transparent;
  color:var(--q-ink); font-family:'Raleway',system-ui,sans-serif; font-size:16px;
  letter-spacing:.04em; transition:border-color var(--t-slow); }
.q-field textarea{ border:1px solid var(--q-line); padding:12px; resize:vertical; }
.q-field input:focus, .q-field select:focus, .q-field textarea:focus{
  outline:none; border-color:var(--q-head); }
.q-field select option{ color:#222; }
.q-form button{ justify-self:center; margin-top:10px; background:transparent;
  border:1px solid var(--q-line); color:var(--q-head); padding:15px 44px;
  font-family:'Raleway',system-ui,sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; cursor:pointer;
  transition:background-color var(--t-slow), color var(--t-slow), border-color var(--t-slow); }
.q-form button:hover{ background:var(--q-sand); border-color:var(--q-sand); color:var(--q-deep); }
.q-note{ text-align:center; margin:16px 0 0 !important; font-size:13px !important;
  opacity:.62; }
@media (max-width:700px){ .q-form{ grid-template-columns:1fr; } }

/* ---- hero ---- */
.q-hero{ background:var(--q-sand); min-height:96vh; display:grid; place-content:center;
  text-align:center; padding:150px 24px 84px; --q-head:#3A2A1E; --q-ink:#4A3323; }
.q-hero__logo{ width:clamp(180px,20vw,258px); margin:0 auto 34px; display:block; }
.page-qasbah .q-hero h1{ font-size:clamp(38px,7.4vw,82px); font-weight:300;
  letter-spacing:.03em; line-height:1.05; margin:0 0 18px; color:#3A2A1E; }
.q-hero__sub{ font-size:clamp(13px,1.9vw,26px) !important; font-weight:300;
  letter-spacing:.09em !important; text-transform:uppercase; color:#3A2A1E;
  margin:0 0 20px !important; }
.q-hero__place{ font-size:12px !important; letter-spacing:.24em !important;
  text-transform:uppercase; opacity:.68; margin:0 !important; }

/* --- standalone chrome ---------------------------------------------------
   Al-Kasbah is presented as its own property: no Arab Adventurers header,
   logo or footer, only a small link back to the parent site. */
.q-head{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex;
  align-items:center; gap:24px; padding:22px clamp(20px,4vw,54px);
  font-family:'Raleway',system-ui,sans-serif;
  transition:background-color var(--t-slow), padding var(--t-slow), box-shadow var(--t-slow); }
.q-head[data-stuck="true"]{ background:rgba(235,194,140,.95);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  padding-top:13px; padding-bottom:13px; box-shadow:0 1px 0 rgba(58,42,30,.14); }
.q-head__mark{ font-size:clamp(15px,1.7vw,19px); font-weight:300; letter-spacing:.34em;
  text-transform:uppercase; color:#3A2A1E; text-decoration:none; margin-right:auto;
  white-space:nowrap; }
.q-head__nav{ display:flex; gap:clamp(18px,2.4vw,36px); }
.q-head__nav a{ font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:#3A2A1E; text-decoration:none; opacity:.78; transition:opacity var(--t-slow); }
.q-head__nav a:hover{ opacity:1; }
.q-back{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:'Raleway',system-ui,sans-serif;
  border:1px solid rgba(58,42,30,.34); border-radius:999px; padding:8px 15px;
  font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:#3A2A1E; text-decoration:none;
  transition:background-color var(--t-slow), color var(--t-slow), border-color var(--t-slow); }
.q-back:hover{ background:#3A2A1E; border-color:#3A2A1E; color:var(--q-sand); }
.page-qasbah .to-top{ background:var(--q-deep); color:var(--q-sand); border-color:var(--q-deep); }
@media (max-width:860px){
  .q-head{ flex-wrap:wrap; gap:11px 18px; padding:14px 18px; }
  .q-head[data-stuck="true"]{ padding-top:10px; padding-bottom:10px; }
  .q-head__mark{ font-size:14px; letter-spacing:.26em; }
  .q-head__nav{ order:3; width:100%; justify-content:space-between; gap:8px; }
  .q-head__nav a{ font-size:10px; letter-spacing:.11em; }
}

.q-foot{ background:var(--q-deep); color:#E8D5BE; border-top:22px solid var(--q-sand);
  font-family:'Raleway',system-ui,sans-serif;
  padding:clamp(46px,6vw,76px) clamp(20px,4vw,40px) 0; }
.q-foot__inner{ max-width:1180px; margin-inline:auto; display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:34px clamp(24px,3vw,44px); }
.q-foot__mark{ font-size:18px; font-weight:300; letter-spacing:.3em; text-transform:uppercase;
  color:var(--q-sand); margin:0 0 16px; }
.q-foot h4{ font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:#E8D5BE; opacity:.58; margin:0 0 15px; }
.q-foot p{ color:#E8D5BE; font-size:15px; letter-spacing:.05em; line-height:1.65;
  margin:0 0 10px; }
.q-foot a{ color:#E8D5BE; text-decoration:none; opacity:.84; transition:opacity var(--t-slow); }
.q-foot a:hover{ opacity:1; text-decoration:underline; }
.q-foot ul{ list-style:none; margin:0; padding:0; }
.q-foot li{ margin-bottom:9px; font-size:15px; letter-spacing:.05em; }
.q-foot__bar{ max-width:1180px; margin:44px auto 0; padding:20px 0 26px;
  border-top:1px solid rgba(235,194,140,.22); display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:14px; }
.q-foot__bar p{ margin:0; font-size:12px; letter-spacing:.1em; opacity:.6; }
.q-foot__bar .q-back{ border-color:rgba(235,194,140,.4); color:#E8D5BE; }
.q-foot__bar .q-back:hover{ background:var(--q-sand); color:var(--q-deep);
  border-color:var(--q-sand); }
@media (max-width:860px){ .q-foot__inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .q-foot__inner{ grid-template-columns:1fr; } }

/* coming soon */
.soon{ min-height:78vh; display:grid; place-items:center; text-align:center;
  padding:60px 24px; background:var(--ink); color:var(--white); }
.soon__inner{ max-width:620px; }
.soon img{ width:120px; margin:0 auto 26px; }
.soon h1{ font-size:clamp(28px,5vw,42px); margin-bottom:10px; }
.soon--qasbah{ background:#1a1512;
  background-image:linear-gradient(rgba(20,16,13,.84),rgba(20,16,13,.94)),
    url('/assets/hajar-mountains.jpg');
  background-size:cover; background-position:center; }
.soon--qasbah h1{ font-size:clamp(24px,3.4vw,34px); text-transform:none;
  font-weight:400; color:#f3ece4; letter-spacing:.5px; }
.soon--qasbah .eyebrow{ color:#edb22e; }
.soon__logo{ width:clamp(200px,26vw,290px); margin:0 auto 30px; }
.soon .eyebrow{ color:var(--sand-tint); font-size:13px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
.soon p{ color:#ddd; font-size:17px; }

/* 404 */
/* dark, because the header is white and sits over this page */
.err{ min-height:70vh; display:grid; place-items:center; text-align:center;
  padding:220px 24px 90px; background:var(--ink); color:var(--white); }
.err h1{ font-size:clamp(64px,12vw,110px); color:var(--sand); margin-bottom:2px; line-height:1; }
.err .lede{ font-size:20px; color:#ddd; margin-bottom:26px; }
.err .btn{ margin:4px; }
@media (max-width:768px){ .err{ padding:150px 24px 70px; } }