/* ==========================================================================
   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; }



/* ---- hero loading ---------------------------------------------------------
   Hero media is served from admin.arab-adventures.com, a second origin, so its
   first byte costs a DNS lookup and a TLS handshake. Measured cold, the poster
   landed ~4s after the page had already painted its text, leaving a black
   band. Three things fix that: a ~1KB blurred placeholder carried inline so
   the band is never empty, a preconnect so the real poster starts sooner, and
   fading the video in only once it can actually play. */
.hero__lqip, .page-hero__lqip{ position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 55%; filter:blur(6px);
  transform:scale(1.06); }
.hero__video, .page-hero__vid{ opacity:0; transition:opacity .55s ease; }
.hero__video.is-ready, .page-hero__vid.is-ready{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .hero__video, .page-hero__vid{ transition:none; }
}

/* ---- hero text cues -------------------------------------------------------
   Titles that appear over a hero video, timed to its shot changes. Set in the
   site's own voice - Rosario, uppercase, the amber eyebrow from the logo - not
   a borrowed editorial serif. Sizes are in cqw so the type scales with the
   hero rather than the viewport, which keeps the line breaks identical at
   every width. */
.hero, .page-hero{ container-type:inline-size; }

.hero__cues, .page-hero__cues{ position:absolute; inset:0; z-index:2;
  display:grid; place-items:center; text-align:center; padding:0 6%;
  color:var(--white); text-shadow:0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
  pointer-events:none; }
/* Bright footage - a sunlit dune - leaves white type unreadable, and the home
   hero has no gradient of its own because nothing ever sat on it before. This
   dims the middle of the frame, and only while a cue is actually on screen. */
.hero__cues::before, .page-hero__cues::before{ content:""; position:absolute; inset:0;
  z-index:-1; opacity:0; transition:opacity .9s ease;
  background:radial-gradient(ellipse 80% 65% at 50% 50%,
    rgba(0,0,0,.55) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,0) 78%); }
.hero__cues.is-lit::before, .page-hero__cues.is-lit::before{ opacity:1; }
.cue{ grid-area:1/1; max-width:1600px; opacity:0; transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.32,0,.67,0), transform .8s cubic-bezier(.32,0,.67,0); }
.cue.is-in{ opacity:1; transform:translateY(0);
  transition:opacity 1s cubic-bezier(.33,1,.68,1), transform 1s cubic-bezier(.33,1,.68,1); }
.cue__eyebrow{ font-weight:700; text-transform:uppercase; color:var(--sand-tint);
  letter-spacing:.26em; margin:0 0 24px; font-size:clamp(11px, calc(21 / 1920 * 100cqw), 21px); }
.cue__head{ font-weight:600; text-transform:uppercase; line-height:1.08;
  letter-spacing:.012em; margin:0; font-size:clamp(24px, calc(78 / 1920 * 100cqw), 78px); }
.cue__head--sm{ font-size:clamp(20px, calc(62 / 1920 * 100cqw), 62px); }
.cue__mark{ font-weight:700; text-transform:uppercase; letter-spacing:.40em; margin:0;
  font-size:clamp(17px, calc(58 / 1920 * 100cqw), 58px);
  transition:letter-spacing 1s cubic-bezier(.33,1,.68,1); }
.cue.is-in .cue__mark{ letter-spacing:.26em; }
.cue__rule{ height:1px; background:var(--sand); opacity:.85; margin:30px auto 0;
  width:clamp(34px, calc(64 / 1920 * 100cqw), 64px);
  transform:scaleX(0); transform-origin:center;
  transition:transform 1s cubic-bezier(.33,1,.68,1); }
.cue.is-in .cue__rule{ transform:scaleX(1); }

/* A hero carrying cues becomes the page's title: taller, and the static
   heading steps aside so there is only ever one headline on the band. */
.page-hero:has(.page-hero__cues){ min-height:clamp(380px, 62vh, 620px); }
.page-hero:has(.page-hero__cues) .page-hero__inner{ display:none; }

@media (prefers-reduced-motion:reduce){
  .cue, .cue__mark, .cue__rule{ transition:none; }
}

/* ---- hero media -----------------------------------------------------------
   A hero is one photograph, a crossfading slideshow, or a silent looping video.
   The media sits under the existing gradient overlay, so nothing about the
   headline treatment changes. */
.page-hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden;
  background-color:var(--ink); }
.hero__media{ position:absolute; inset:0; overflow:hidden; background:#12100f; }
.hero__slide{ position:absolute; inset:0; background-size:cover;
  background-position:center 45%; opacity:0; transition:opacity 1.6s ease; }
.hero__slide.is-on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .hero__slide{ transition:none; } }
.page-hero::after{ z-index:1; }
.page-hero__slide{ position:absolute; inset:0; background-size:cover;
  background-position:center 55%; opacity:0; transition:opacity 1.6s ease; }
.page-hero__slide.is-on{ opacity:1; }
/* Match the still-image framing on the same component. A 3.4:1 hero keeps only
   the middle ~53% of a 16:9 frame, and subjects usually sit below the midline,
   so bias the window downward exactly as background-position does for stills. */
.page-hero__vid{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 60%; display:block; }
@media (prefers-reduced-motion:reduce){ .page-hero__slide{ transition:none; } }

/* ------------------------------------------------------------- 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:.85; margin:0 !important; }

/* ---- hero film ----
   A sand veil over the footage rather than a dark one: it keeps the hero's
   brown ink and the brown logo legible while the page holds its own palette,
   so nothing here needs a light-on-dark variant. */
.q-hero{ position:relative; overflow:hidden; }
.q-hero__media{ position:absolute; inset:0; z-index:0;
  background:var(--q-sand) center/cover no-repeat; }
.q-hero__vid{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
  opacity:0; transition:opacity 1s ease; }
.q-hero__vid.is-ready{ opacity:1; }
.q-hero__veil{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 66% 56% at 50% 54%, rgba(235,194,140,.72) 0%,
      rgba(235,194,140,.46) 58%, rgba(235,194,140,0) 100%),
    linear-gradient(180deg, rgba(235,194,140,.62) 0%, rgba(235,194,140,.30) 26%,
      rgba(235,194,140,.30) 68%, rgba(235,194,140,.58) 100%); }
.q-hero__inner{ position:relative; z-index:1; }

/* ---- the first-load hold ----
   The curtain is built by script, never shipped in the HTML, so a visitor
   with JavaScript off gets the page rather than a cover nothing will lift. */
.q-boot{ position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--q-sand); transition:opacity .7s ease; }
.q-boot img{ width:clamp(150px,17vw,206px); animation:q-breathe 1.9s ease-in-out infinite; }
.q-boot.is-done{ opacity:0; pointer-events:none; }
body.q-booting{ overflow:hidden; }
@keyframes q-breathe{ 0%,100%{ opacity:.42 } 50%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .q-boot img{ animation:none; opacity:.92 } }

/* --- 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; } }