/* =========================================================================
   AGILE — travel & stays
   Built from the approved brand identity guidelines.
   Montserrat throughout; every colour is from the brand palette.
   ========================================================================= */

/* Montserrat, self-hosted. One 38 KB variable file covers 400–700, so there is no
   third-party request, nothing to block rendering, and the site works offline. */
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/montserrat-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  /* brand */
  --ink:#071515;            /* Rich Black    */
  --deep:#0B3D57;           /* Deep Blue     */
  --gold:#F6D88B;           /* Gold Yellow   */
  --mint:#C7E0E0;           /* Soft Mint     */
  --paper:#FFFFFF;          /* Clean White   */

  /* derived — neutrals biased toward the brand teal, never a flat grey */
  --ink-lift:#0B1E21;
  --ink-deep:#050F11;
  --haze:#93ACB0;
  --haze-dim:#62797C;
  --line:rgba(199,224,224,.16);
  --line-strong:rgba(199,224,224,.34);

  --f:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(20px,5.2vw,84px);
  --maxw:1560px;
  --ease:cubic-bezier(.22,1,.36,1);
  --navh:74px;
}

*{box-sizing:border-box}
/* author display rules outrank the UA sheet, so [hidden] needs saying explicitly */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-anchor:none}
html.is-locked{overflow:hidden}
body{
  margin:0;font-family:var(--f);background:var(--ink);color:var(--paper);
  -webkit-font-smoothing:antialiased;
  /* overflow-x:hidden makes overflow-y compute to auto, which turns body into
     a scroll container — WebKit then resolves the pinned hero's position:sticky
     against body instead of the viewport. clip crops without that side effect;
     hidden stays first as the fallback for Safari 15 and older. */
  overflow-x:hidden;
  overflow-x:clip;
}
img,video{max-width:100%}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

.skip{
  position:fixed;top:8px;left:8px;z-index:300;transform:translateY(-200%);
  background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{transform:none}

/* film grain — kills gradient banding and gives the flat colour some tooth */
.grain{
  position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.04;
  background-image:url("../assets/grain.png");background-size:170px 170px;
}

/* ---------------------------------------------------------------- type -- */
.label{
  font-size:clamp(10px,.72vw,11.5px);font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--haze);margin:0;
}
.dsp{
  font-weight:700;text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(28px,4.15vw,64px);line-height:1.04;margin:0;text-wrap:balance;
}
.dsp--sm{font-size:clamp(24px,2.9vw,40px)}

/* ------------------------------------------------------------ whoTitle --
   The "a" glyph from the wordmark (leopard cutout and all), set beside its
   own heading — a small logomark + headline lockup rather than the plain
   text alone. */
.whoTitle{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}
.whoTitle__mark{width:clamp(40px,4.6vw,64px);height:clamp(40px,4.6vw,64px);flex:none}
.whoTitle .dsp{margin:0;font-size:clamp(18px,2.1vw,29px)}
.lead{
  font-size:clamp(16px,1.28vw,19px);line-height:1.62;color:var(--mint);
  margin:0;max-width:56ch;font-weight:400;
}
.body{
  font-size:clamp(14.5px,1.02vw,16px);line-height:1.68;color:var(--haze);
  margin:0;max-width:62ch;font-weight:400;
}
.body a{color:var(--mint)}

/* ------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;
  font-family:var(--f);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:var(--ink);background:var(--gold);padding:16px 28px;border-radius:999px;
  transition:transform .5s var(--ease),background .5s var(--ease);
}
.btn:hover{transform:translateY(-3px);background:var(--paper)}
.btn--ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn--sm{padding:12px 22px;font-size:10.5px;gap:10px;align-self:flex-start}
.btn--ghost:hover{background:var(--paper);color:var(--ink);box-shadow:none}

/* ----------------------------------------------------------------- nav -- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--pad);
  transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
}
.nav.is-solid{
  background:rgba(7,21,21,.82);box-shadow:inset 0 -1px 0 var(--line);
  padding-top:15px;padding-bottom:15px;
}
.nav__mark{display:block;width:clamp(78px,7vw,104px);height:auto}
.nav__left{display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2vw,32px)}
.nav__link{
  display:flex;align-items:center;
  font-size:11.5px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;opacity:.8;position:relative;padding-bottom:3px;
  transition:opacity .35s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{opacity:1}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* the mobile menu's extra content (eyebrow, number, description, photo)
   sits inert on desktop — .nav__link just shows its name as plain text */
.nav__linksEyebrow,.nav__linkNum,.nav__linkDesc,.nav__linkSwatch,.nav__linksCta{display:none}
.nav__linkSwatch--packages{background-image:url(../assets/gallery-3.jpg)}
.nav__linkSwatch--about{background-image:url(../assets/gallery-2.jpg)}
.nav__linkSwatch--journal{background-image:url(../assets/blog-1.jpg)}
.nav__linkSwatch--contact{background-image:url(../assets/gallery-4.jpg)}

/* -------------------------------------------------------- nav dropdowns -- */
/* each expandable top-level item is a <details>: click opens its submenu
   on desktop (a floating panel) and expands it inline in the mobile
   overlay — no JS. Nested <details> inside a panel give a second level. */
.nav__group{position:relative}
.nav__sub>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  color:var(--paper);opacity:.8;position:relative;padding-bottom:3px;
  transition:opacity .35s var(--ease);
}
.nav__sub>summary::-webkit-details-marker{display:none}
.nav__sub>summary::marker{content:""}
.nav__sub>summary::after{
  content:"";flex:none;width:6px;height:6px;margin-top:-3px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);opacity:.65;transition:transform .3s var(--ease);
}
.nav__sub[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.nav__sub>summary:hover,.nav__sub[open]>summary{opacity:1}
.nav__sub:has(.nav__subLink[aria-current="page"])>summary{opacity:1;color:var(--gold)}

.nav__subPanel{
  position:absolute;top:100%;left:0;margin-top:20px;min-width:230px;z-index:5;
  display:flex;flex-direction:column;gap:1px;padding:10px;
  background:rgba(7,21,21,.97);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 24px 48px rgba(0,0,0,.4);
}
.nav__subLink{
  display:block;padding:9px 11px;border-radius:6px;
  font-size:12.5px;font-weight:500;letter-spacing:.01em;
  color:var(--mint);text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.nav__subLink:hover,.nav__subLink:focus-visible{background:var(--line);color:var(--paper)}
.nav__subLink[aria-current="page"]{color:var(--gold)}

/* a second level nested inside a top-level panel — same look, a summary
   that toggles its own indented list instead of navigating */
.nav__subGroup>summary.nav__subLink{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.nav__subGroup>summary::-webkit-details-marker{display:none}
.nav__subGroup>summary::marker{content:""}
.nav__subGroup>summary::after{
  content:"";flex:none;width:5px;height:5px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);opacity:.6;transition:transform .3s var(--ease);
}
.nav__subGroup[open]>summary::after{transform:rotate(-135deg)}
.nav__subGroupPanel{
  display:flex;flex-direction:column;gap:1px;padding:2px 0 4px 14px;
}
.nav__subGroupPanel .nav__subLink{font-size:12px;color:var(--haze)}

/* the tagline, centred in the bar — the destination times it replaced now
   live on the hero's route line, where all five read at once. */
.nav__tag{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  margin:0;white-space:nowrap;
  font-size:10.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--haze);
}

.nav__toggle{
  display:none;width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;
  position:relative;
}
.nav__toggle span{
  position:absolute;left:9px;width:22px;height:1px;background:var(--paper);
  transition:transform .45s var(--ease),opacity .3s linear;
}
.nav__toggle span:nth-child(1){top:17px}
.nav__toggle span:nth-child(2){top:23px}
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* only hidden in the band where the inline links still compete for the bar —
   below 860px they collapse into the toggle, so the tagline fits again */
@media (max-width:1780px) and (min-width:861px){.nav__tag{display:none}}
@media (max-width:860px){
  .nav__toggle{display:block}
  .nav__links{
    position:fixed;inset:var(--navh) 0 0 0;flex-direction:column;align-items:stretch;
    gap:0;padding:0 var(--pad) 34px;background:rgba(7,21,21,.97);
    box-shadow:inset 0 -1px 0 var(--line);
    clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .nav.is-open .nav__links{clip-path:inset(0 0 0 0)}

  .nav__linksEyebrow{
    display:block;margin:22px 0 2px;font-size:10px;font-weight:600;letter-spacing:.28em;
    text-transform:uppercase;color:var(--haze);
  }

  .nav__link{
    display:flex;align-items:center;gap:14px;
    font-size:inherit;letter-spacing:normal;padding:16px 0;opacity:1;
    border-top:1px solid var(--line);
  }
  .nav__link::after{display:none}
  .nav__link[aria-current="page"] .nav__linkName{color:var(--gold)}

  .nav__linkNum{
    display:block;flex:none;width:20px;font-size:10px;font-weight:700;color:rgba(246,216,139,.65);
    font-variant-numeric:tabular-nums;
  }
  .nav__linkCol{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
  .nav__linkName{
    display:block;font-size:17px;font-weight:800;letter-spacing:.01em;
    text-transform:uppercase;color:var(--paper);
  }
  .nav__linkDesc{display:block;font-size:11px;color:var(--haze-dim);line-height:1.4}
  .nav__linkSwatch{
    display:block;flex:none;width:44px;height:44px;border-radius:4px;
    background-size:cover;background-position:center;
  }

  .nav__group{border-top:1px solid var(--line)}
  .nav__sub>summary{
    display:flex;align-items:center;gap:14px;
    font-size:17px;font-weight:800;letter-spacing:.01em;text-transform:uppercase;
    color:var(--paper);opacity:1;padding:16px 0;
  }
  .nav__sub>summary::after{width:7px;height:7px;margin-left:auto}
  .nav__sub[open]>summary{padding-bottom:8px}
  .nav__subPanel{
    position:static;margin:0 0 14px;min-width:0;padding:0 0 0 34px;
    background:none;border:0;box-shadow:none;
  }
  .nav__subLink{padding:10px 8px 10px 0;font-size:14px;color:var(--haze)}
  .nav__subLink:hover,.nav__subLink:focus-visible{background:none;color:var(--gold)}
  .nav__subGroup>summary.nav__subLink{padding:10px 8px 10px 0;font-size:14px;color:var(--haze)}
  .nav__subGroupPanel{padding:0 0 4px 16px}
  .nav__subGroupPanel .nav__subLink{font-size:13px}

  .nav__cta{display:none}
  .nav__linksCta{
    display:block;text-align:center;margin-top:22px;padding:16px;font-size:13px;
  }
}

/* -------------------------------------------------------------- footer -- */
.foot{background:var(--ink);padding:clamp(56px,8vh,96px) var(--pad) 0}
.foot__grid{
  max-width:var(--maxw);margin:0 auto;display:grid;gap:clamp(32px,4vw,64px);
  grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));
  padding-bottom:clamp(40px,6vh,64px);
}
@media (max-width:800px){.foot__grid{grid-template-columns:1fr}}
.foot__mark{width:clamp(96px,9vw,132px);height:auto;display:block;margin-bottom:22px}
.foot__col h3{
  font-size:10.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--haze-dim);margin:0 0 18px;
}
.foot__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot__list li{color:var(--mint);font-size:14.5px}
.foot__list a{
  color:var(--mint);text-decoration:none;font-size:14.5px;
  transition:color .35s var(--ease);
}
.foot__list a:hover{color:var(--gold)}
.foot__bar{
  max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--line);
  padding:22px 0 30px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.foot__note{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--haze-dim);margin:0;
}

/* ---------------------------------------------------- light page theme --
   Opt-in via body.theme-light (packages, about, contact): recolors
   everything below the mast photo to sit on the hero's own ground colour
   instead of the site's default dark theme. Same recipe as index.html's
   post-hero section (hero.css .stack__rest), but keyed to the hero's
   #E1EDED rather than plain white, and hung off <body> rather than a
   wrapper div — .foot sits outside <main>, so a div-scoped class can't
   reach it. */
body.theme-light{background:#E1EDED;color:var(--ink)}
body.theme-light .label{color:#4E6669}
body.theme-light .lead{color:var(--deep)}
body.theme-light .body{color:#4E6669}
body.theme-light .body a{color:var(--deep)}
body.theme-light .head{border-bottom-color:rgba(11,61,87,.12)}
body.theme-light .btn--ghost{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(11,61,87,.22)}
body.theme-light .btn--ghost:hover{background:var(--ink);color:var(--paper);box-shadow:none}
body.theme-light .card__frame,
body.theme-light .media{background:#EEF3F3}
body.theme-light .card__price,
body.theme-light .card__arrow{color:#7A5819}
body.theme-light .card__meta{color:#546669}
body.theme-light .card__desc{color:#4E6669}
body.theme-light .ticks li{color:var(--deep)}
body.theme-light .ticks a:hover{color:#7A5819}
body.theme-light .ticks--muted li{color:#546669}
body.theme-light .ticks--muted li::before{background:#546669}
body.theme-light .ph p,body.theme-light .ph span{color:#7A5819}
body.theme-light .itin li{border-top-color:rgba(11,61,87,.12)}
body.theme-light .itin__day{color:#7A5819}
body.theme-light .svc__item{border-color:rgba(11,61,87,.12)}
body.theme-light .ruleHead::before,body.theme-light .ruleHead::after{background:rgba(11,61,87,.16)}
body.theme-light .svc__item:hover{border-color:rgba(11,61,87,.26);box-shadow:0 20px 44px rgba(11,61,87,.08)}
body.theme-light .svc__num{color:rgba(11,61,87,.28)}
body.theme-light .svc__icon{background:rgba(122,88,25,.09);color:#7A5819}
body.theme-light .svc__t{color:var(--ink)}
body.theme-light .svc__desc{color:#4E6669}
body.theme-light .marquee{background:#EEF3F3;border-color:rgba(11,61,87,.12)}
body.theme-light .marquee__item{color:var(--ink)}
body.theme-light .stats{border-color:rgba(11,61,87,.12)}
body.theme-light .stat{border-left-color:rgba(11,61,87,.12)}
@media (max-width:760px){body.theme-light .stat:nth-child(n+3){border-top-color:rgba(11,61,87,.12)}}
body.theme-light .stat__num{color:var(--ink)}
body.theme-light .stat__label{color:#546669}
body.theme-light .quote{border-color:rgba(11,61,87,.12)}
body.theme-light .quote:hover{border-color:rgba(11,61,87,.26)}
body.theme-light .quote__text{color:#4E6669}
body.theme-light .quote__name{color:var(--ink)}
body.theme-light .quote__trip{color:#546669}
body.theme-light .quote__avatar{background:rgba(122,88,25,.1);color:#7A5819}
body.theme-light .spot__quote{color:var(--paper)}
body.theme-light .spot__name{color:var(--paper)}
body.theme-light .spot__trip{color:var(--mint)}
/* .facts is no longer themed here — it's a plain white floating card now
   (see the base rule), which only ever appears on theme-light pages */
body.theme-light .filter{color:#546669;border-color:rgba(11,61,87,.18)}
body.theme-light .filter:hover{color:var(--ink);border-color:rgba(11,61,87,.32)}
body.theme-light .filter[aria-pressed="true"]{color:var(--ink)}
body.theme-light .grid__empty{color:#546669}
body.theme-light .field label{color:#4E6669}
body.theme-light .field input,
body.theme-light .field select,
body.theme-light .field textarea{color:var(--ink);border-bottom-color:rgba(11,61,87,.22)}
body.theme-light .field select option{background:#E1EDED;color:var(--ink)}
body.theme-light .field input::placeholder,
body.theme-light .field textarea::placeholder{color:#546669}
body.theme-light .field input:focus,
body.theme-light .field select:focus,
body.theme-light .field textarea:focus{border-bottom-color:var(--gold)}
/* the veil's bottom edge blends into whatever sits below the mast photo —
   was solid ink to hand off to the old dark section, now the same #E1EDED
   so the seam stays invisible; the darker upper stops are untouched, since
   the nav's white text still needs them for contrast over the photo */
body.theme-light .mast__veil{
  background:linear-gradient(to top,#E1EDED 2%,rgba(7,21,21,.55) 46%,rgba(7,21,21,.78));
}
/* .mast__title sets no colour of its own — it inherited body's ink from the
   rule two lines up, which is correct for the page but wrong here: the
   veil above it is still dark, same as it always was, for exactly this
   reason. Only the title needed it; .label and .crumb already carry their
   own explicit colours and were never affected. */
body.theme-light .mast__title{color:var(--paper)}
body.theme-light .foot{background:#E1EDED;color:var(--ink)}
body.theme-light .foot__col h3{color:#546669}
body.theme-light .foot__list li{color:var(--deep)}
body.theme-light .foot__list a{color:var(--deep)}
body.theme-light .foot__list a:hover{color:#7A5819}
body.theme-light .foot__bar{border-top-color:rgba(11,61,87,.12)}
body.theme-light .foot__note{color:#546669}

/* ------------------------------------------------------------ sections -- */
.sec{position:relative;padding:clamp(76px,11vh,150px) var(--pad)}
.sec--tight{padding-top:clamp(48px,6vh,80px)}
.wrap{max-width:var(--maxw);margin:0 auto;width:100%}

.head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding-bottom:clamp(28px,3.5vw,52px);border-bottom:1px solid var(--line);
}
.head__side{display:flex;flex-direction:column;gap:14px;max-width:44ch}

/* "Three ways in." sits directly above the offerTabs pill nav, which is
   itself centered — a left/right split header there read off-balance, so
   this variant centers the title instead. */
.head--waysIn{flex-direction:column;align-items:center;text-align:center;gap:14px}

/* reveal system */
.rv{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .95s var(--ease) var(--d,0s),transform 1.15s var(--ease) var(--d,0s);
}
.is-in .rv{opacity:1;transform:none}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block;transform:translate3d(0,110%,0);transition:transform 1.1s var(--ease) var(--d,0s)}
.is-in .ln>span{transform:none}

/* ------------------------------------------------------- page masthead -- */
.mast{
  position:relative;padding:calc(var(--navh) + clamp(72px,13vh,150px)) var(--pad) clamp(56px,8vh,110px);
  overflow:hidden;
}
.mast__bg{position:absolute;inset:0;z-index:0}
.mast__bg img{width:100%;height:100%;object-fit:cover;display:block}
.mast__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,var(--ink) 2%,rgba(7,21,21,.6) 46%,rgba(7,21,21,.78));
}
.mast__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  display:flex;flex-direction:column;gap:20px}
.mast__title{
  font-weight:700;text-transform:uppercase;letter-spacing:-.008em;margin:0;
  font-size:clamp(34px,6.4vw,96px);line-height:.98;text-wrap:balance;
}
.crumb{display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--haze-dim)}
.crumb a{color:var(--haze);text-decoration:none}
.crumb a:hover{color:var(--gold)}

/* --------------------------------------------------------------- aboutHero --
   About's own hero, in place of the shared .mast banner every other inner
   page uses — one full-bleed photo with the headline centred over it.
   Text colour is set directly rather than inherited, since this sits over
   a photo veil in both the dark site and about.html's own theme-light
   body. */
.aboutHero{position:relative;overflow:hidden;min-height:calc(90vh - 3px)}
.aboutHero__img{position:absolute;inset:0;z-index:0;overflow:hidden}
.aboutHero__img img{width:100%;height:100%;object-fit:cover;display:block}
.aboutHero__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(5,15,17,.62),rgba(5,15,17,.15) 55%,rgba(5,15,17,.32));
}
.aboutHero__inner{
  position:relative;z-index:2;min-height:calc(90vh - 3px);max-width:var(--maxw);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;
  padding:calc(var(--navh) + clamp(40px,6vh,64px)) var(--pad) clamp(40px,6vh,56px);
}
.aboutHero__kicker{margin:0;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.aboutHero__title{
  margin:0;color:var(--paper);font-weight:700;text-transform:uppercase;letter-spacing:-.008em;
  font-size:clamp(26px,4.2vw,40px);line-height:1.04;text-wrap:balance;
  text-shadow:0 4px 28px rgba(0,0,0,.3);
}

@media (max-width:640px){
  .aboutHero{min-height:calc(94vh - 3px)}
  .aboutHero__inner{min-height:calc(94vh - 3px)}
}

/* -------------------------------------------------------------- stackCards --
   About's "who we are" story as four panels that pin and stack while you
   scroll past them, each shrinking slightly as the next covers it — a
   vanilla recreation (position:sticky + a scroll-progress rAF loop in
   agile.js) of a React/Framer-Motion stacking-cards component, since this
   site has no build step or component framework to run that in. */
.stackCards__cue{
  margin:0;padding:clamp(28px,4vh,44px) var(--pad) 0;text-align:center;
  font-size:clamp(15px,1.6vw,20px);font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  /* the pale brand gold reads fine on a dark photo veil but washes out
     against about.html's light theme-light ground this sits on directly —
     the same darker gold the rest of the site substitutes in that case */
  color:#8A6420;
}
.stackCards{position:relative}
.stackCard{height:82vh;min-height:460px;position:sticky;top:0;display:flex;align-items:stretch;padding:14px var(--pad)}
/* the last card has nothing scrolling over it to cover its exit, so it
   isn't pinned at all — it scrolls past like a normal block and hands
   straight off to the next section instead of leaving a blank stretch
   of its own background scrolling by underneath it */
.stackCard:last-child{position:static;height:82vh}
.stackCard__panel{
  position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:stretch;gap:clamp(24px,3.6vw,56px);
  border-radius:24px;overflow:hidden;padding:clamp(28px,4vw,56px);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  transform-origin:top center;will-change:transform;
}
.stackCard__panel--a{background:linear-gradient(155deg,var(--ink-lift),var(--ink-deep))}
.stackCard__panel--b{background:linear-gradient(155deg,var(--deep),var(--ink-deep))}
.stackCard__body{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.stackCard__num{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:15px;color:var(--gold)}
.stackCard__t{margin:0;font-size:clamp(22px,2.6vw,34px);font-weight:800;letter-spacing:-.01em;color:var(--paper)}
.stackCard__d{margin:0;font-size:14.5px;line-height:1.7;color:var(--mint);max-width:46ch}
.stackCard__media{
  flex:1 1 0;min-width:0;border-radius:16px;overflow:hidden;background:var(--ink-deep);
}
.stackCard__media img{width:100%;height:100%;object-fit:cover;display:block}
.stackCard__readMore{display:none}

@media (max-width:820px){
  /* the pin-and-shrink stack runs on mobile too now — just a narrower
     card (text stacked over the photo instead of side by side) and a
     shorter pin height so it doesn't eat the whole screen per card. The
     description clamps to three lines behind a Read more button instead
     of the fixed-height card scrolling internally, which read as a
     stray scrollbar sitting inside each card. */
  .stackCard{height:74vh;padding:10px var(--pad)}
  .stackCard:last-child{height:74vh}
  .stackCard__panel{flex-direction:column;overflow:hidden}
  .stackCard__panel[data-readmore].is-open{overflow-y:auto}
  .stackCard__media{aspect-ratio:16/10;flex:none}
  .stackCard__d{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  }
  .stackCard__panel.is-open .stackCard__d{display:block;-webkit-line-clamp:unset;overflow:visible}
  .stackCard__readMore{
    display:block;align-self:flex-start;margin-top:2px;padding:0;
    border:0;background:none;cursor:pointer;font-family:var(--f);
    font-size:13px;font-weight:700;color:var(--gold);
  }
}

/* ------------------------------------------------------------ packages -- */
.grid{display:grid;gap:clamp(16px,2.2vw,34px)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.grid--3,.grid--2{grid-template-columns:1fr}}

.card{display:flex;flex-direction:column;gap:18px;text-decoration:none;color:inherit}
.card__frame{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--ink-lift)}
.card__img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform 1.4s var(--ease);
}
.card:hover .card__img{transform:scale(1.07)}
.card__tag{
  position:absolute;top:14px;left:14px;padding:7px 12px;border-radius:999px;
  background:rgba(7,21,21,.72);color:var(--paper);
  font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
}
.card__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.card__title{font-size:clamp(18px,1.5vw,22px);font-weight:600;margin:0}
.card__price{font-size:12.5px;font-weight:600;color:var(--gold);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.card__meta{
  display:flex;gap:14px;flex-wrap:wrap;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--haze-dim);
}
.card__desc{font-size:14.5px;line-height:1.6;color:var(--haze);margin:0}
.card__arrow{color:var(--gold);transition:transform .55s var(--ease);display:inline-block}
.card:hover .card__arrow{transform:translateX(6px)}

/* ---------------------------------------------------- destination picker --
   Five tall photo cards linking straight to a package. Always dark-veiled
   over its own photo regardless of the section's colour theme — the same
   self-contained treatment .card__tag already uses — so this works
   equally on index's light post-hero section or a dark one. Entrance is
   the site's existing .rv scroll-reveal (staggered via --d); hover reuses
   the same slow, soft easing as .card__img rather than inventing new
   motion. */
.picker{
  display:flex;gap:clamp(10px,1.4vw,18px);justify-content:center;
  overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;
}
.picker__card{
  position:relative;flex:1 1 0;min-width:130px;max-width:280px;aspect-ratio:4/5;
  overflow:hidden;display:block;text-decoration:none;scroll-snap-align:start;
  background:var(--ink-lift);border-radius:22px;
}
.picker__img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);transition:transform 1.4s var(--ease);
}
.picker__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,21,21,0) 40%,rgba(7,21,21,.82) 100%);
  transition:background .6s var(--ease);
}
.picker__name{
  position:absolute;left:16px;right:16px;bottom:16px;
  font-size:clamp(14px,1.15vw,17px);font-weight:700;color:var(--paper);
  letter-spacing:-.005em;text-wrap:balance;
  transition:transform .6s var(--ease);
}
.picker__go{
  position:absolute;right:14px;top:14px;width:30px;height:30px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;color:var(--paper);
  background:rgba(7,21,21,.4);opacity:0;transform:translate3d(0,-6px,0) scale(.9);
  transition:opacity .5s var(--ease),transform .5s var(--ease),background .4s var(--ease);
}
.picker__go svg{width:15px;height:15px}
.picker__card:hover .picker__img{transform:scale(1.14)}
.picker__card:hover .picker__veil{background:linear-gradient(180deg,rgba(7,21,21,.08) 30%,rgba(7,21,21,.88) 100%)}
.picker__card:hover .picker__name{transform:translateY(-4px)}
.picker__card:hover .picker__go{opacity:1;transform:none;background:var(--gold);color:var(--ink)}
.picker__card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* A group that has one or two entries keeps the three-up card width and
   centers in the row, rather than stretching a single photo across the
   whole row or leaving it stranded on one side — every group then reads
   at the same scale down the page. */
.picker--few{justify-content:center}
.picker--few .picker__card{flex:0 1 calc((100% - clamp(10px,1.4vw,18px) * 2) / 3)}

@media (max-width:640px){
  /* Below 640px the horizontal-scroll rail gives way to a two-up grid —
     cards sit beside each other instead of one swipe at a time. A lone
     odd-one-out spans the full row width but keeps the same height as
     the paired cards above it — doubling the aspect-ratio's width term
     to match, rather than stretching tall at 4/5. */
  .picker{
    display:grid;grid-template-columns:repeat(2,1fr);
    overflow-x:visible;scroll-snap-type:none;padding-bottom:0;
  }
  .picker__card{min-width:0;max-width:none;flex:none}
  .picker__card:last-child:nth-child(odd){grid-column:1 / -1;aspect-ratio:8/5}

  /* Holidays' three ways in stack one above another full-width, rather
     than pairing up with a spanning odd-one-out — matching the width
     the lone Tailormade card already reads at. */
  .picker--stack{grid-template-columns:1fr}
  .picker--stack .picker__card{aspect-ratio:8/5}
  .picker--stack .picker__card:last-child:nth-child(odd){grid-column:auto}
}

/* ------------------------------------------------------------- gateGrid --
   Poster-style direction cards: full-bleed photo, gradient veil, a round
   gold arrow anchoring title + one-line description over the image. Two
   sit centered as a pair; .gate--wide spans both in a feature row below. */
.gateGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:720px;margin:0 auto}
/* visit-egypt.html's four regions read as one row of choices rather than
   a 2x2 block — same card, just four columns and room to breathe. */
.gateGrid--quad{grid-template-columns:repeat(4,minmax(0,1fr));max-width:var(--maxw)}
@media (max-width:900px){.gateGrid--quad{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}}
.gate{
  position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  display:block;text-decoration:none;isolation:isolate;background:var(--ink-lift);
  transition:transform .35s var(--ease);
}
.gate:hover{transform:translateY(-4px)}
.gate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gate__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,21,21,0) 38%,rgba(7,21,21,.55) 72%,rgba(7,21,21,.92) 100%);
  transition:background .35s var(--ease);
}
.gate:hover .gate__veil{background:linear-gradient(180deg,rgba(7,21,21,.08) 20%,rgba(7,21,21,.6) 68%,rgba(7,21,21,.94) 100%)}
.gate__body{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:22px 22px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.gate__title{display:block;color:var(--paper);font-size:18px;font-weight:800;letter-spacing:-.005em;margin:0 0 6px}
.gate__desc{display:block;color:var(--mint);font-size:12px;line-height:1.5;margin:0;max-width:24ch}
.gate__go{
  width:40px;height:40px;border-radius:999px;background:var(--gold);color:var(--ink);flex:none;
  display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease);
}
.gate:hover .gate__go{transform:scale(1.12) rotate(45deg)}
.gate__go svg{width:16px;height:16px}
.gate:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.gate--wide{grid-column:1/-1;aspect-ratio:auto;height:280px}
.gate--wide .gate__title{font-size:22px}
.gate--wide .gate__desc{font-size:13px;max-width:34ch}
.gate--wide .gate__body{padding:clamp(24px,3vw,34px)}

@media (max-width:640px){
  .gateGrid{grid-template-columns:1fr}
  .gate,.gate--wide{aspect-ratio:4/3;height:auto}
  .gate--wide .gate__title{font-size:18px}
  .gate--wide .gate__desc{font-size:12px;max-width:24ch}
  .gate--wide .gate__body{padding:22px 22px 24px}

  /* visit-egypt.html's four regions stay a two-up grid on mobile — two
     cards, then two more below — rather than stacking one per row. At
     that width the card is small enough that the description line just
     crowds the title, so it drops and the title itself runs smaller. */
  .gateGrid--quad{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .gateGrid--quad .gate{aspect-ratio:4/5}
  .gateGrid--quad .gate__title{font-size:14.5px}
  .gateGrid--quad .gate__desc{display:none}
}

/* --------------------------------------------------------------- geo --- */
/* An eight-point-star lattice — two overlapping squares tiled edge to
   edge, a classic Islamic geometric motif — standing in for licensed
   photography on the Religious pages until real imagery is supplied, so
   an empty media slot reads as a deliberate design choice rather than a
   missing asset. Drop-in for any <img> the surrounding component already
   sizes (.mast__bg, .band__figure, .media, .card__frame); add .geo--abs
   where the component positions the image itself (.gate). .geo--mint is
   the light colourway for smaller frames sitting on theme-light's own
   pale ground. */
.geo{
  width:100%;height:100%;display:block;background-color:var(--deep);
  background-image:
    radial-gradient(ellipse at 26% 18%,rgba(246,216,139,.18),transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23F6D88B' stroke-width='1' stroke-opacity='.4'%3E%3Crect x='18' y='18' width='60' height='60'/%3E%3Crect x='18' y='18' width='60' height='60' transform='rotate(45 48 48)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover,96px 96px;
}
.geo--abs{position:absolute;inset:0}
.geo--mint{
  background-color:#EEF3F3;
  background-image:
    radial-gradient(ellipse at 26% 18%,rgba(11,61,87,.07),transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%230B3D57' stroke-width='1' stroke-opacity='.16'%3E%3Crect x='18' y='18' width='60' height='60'/%3E%3Crect x='18' y='18' width='60' height='60' transform='rotate(45 48 48)'/%3E%3C/g%3E%3C/svg%3E");
}

/* -------------------------------------------------------------- ruleHead --
   A minimal section intro — just the question, flanked by thin rules —
   for sections (like the gate cards) that are themselves centered, so a
   wide left-label/right-heading .split above them reads mismatched. */
.ruleHead{display:flex;align-items:center;gap:20px;max-width:720px;margin:0 auto}
.ruleHead::before,.ruleHead::after{content:"";flex:1;height:1px;background:var(--line)}
.ruleHead h2{flex:none;font-size:clamp(18px,2vw,22px);font-weight:700;letter-spacing:.005em;margin:0;text-align:center;color:inherit}
@media (max-width:560px){
  .ruleHead{gap:12px}
  .ruleHead h2{font-size:16px}
}

/* filter rail */
.filters{display:flex;gap:10px;flex-wrap:wrap;padding:clamp(28px,3.5vw,44px) 0}
.filter{
  font-family:var(--f);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--haze);background:none;border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;cursor:pointer;transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.filter:hover{color:var(--paper);border-color:var(--line-strong)}
.filter[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.grid__empty{color:var(--haze-dim);font-size:14.5px;padding:40px 0}

/* ------------------------------------------------------------ two-cols -- */
.split{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:clamp(24px,4vw,72px)}
@media (max-width:880px){.split{grid-template-columns:minmax(0,1fr);gap:26px}}
.stackcol{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px);min-width:0}

.media{position:relative;overflow:hidden;background:var(--ink-lift)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media--tall{aspect-ratio:3/4}
.media--wide{aspect-ratio:16/10}

/* ---------------------------------------------------- split-media -------
   Copy in a wider left column (using .stackcol, so label/heading/lead/body
   share its already-tuned gap instead of relying on <p> margins), a single
   contained portrait photo in a narrower right column. */
.split-media{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(18px,2.2vw,32px);align-items:center}
.split-media__img{border-radius:10px;aspect-ratio:3/4;max-width:540px;justify-self:end}
@media (max-width:820px){.split-media{grid-template-columns:1fr}.split-media__img{justify-self:center}}

/* ------------------------------------------------------- about-wide -----
   A photo column plus a reading column that's given real room to breathe:
   generous padding, tall line-height, a thin rule instead of boxed stats.
   Framed edge-to-edge (own bg/radius) rather than sitting inside .sec's
   plain padding, so the photo can run flush to the card's own edge. */
.about-wide{
  display:grid;grid-template-columns:.9fr 1.1fr;
  border-radius:18px;overflow:hidden;background:var(--paper);
}
.about-wide__img{background-size:cover;background-position:center 34%;min-height:560px}
.about-wide__text{
  padding:clamp(56px,7vw,64px) clamp(40px,6vw,96px);
  display:flex;flex-direction:column;justify-content:center;
}
.about-wide__text .label{margin-bottom:26px}
.about-wide__text h2{max-width:18ch;margin-bottom:34px}
.about-wide__text .lead,.about-wide__text .body{line-height:1.9;max-width:53ch}
.about-wide__text .lead{margin-bottom:0px}
.about-wide__rule{width:44px;height:2px;background:var(--gold);margin:36px 0 30px}
.about-wide__stats{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}
.about-wide__stats li{display:flex;align-items:baseline;gap:14px;font-size:13.5px;color:var(--haze)}
.about-wide__stats b{font-size:15px;font-weight:800;color:var(--paper);min-width:56px}
body.theme-light .about-wide{background:#EEF3F3}
body.theme-light .about-wide__stats li{color:#4E6669}
body.theme-light .about-wide__stats b{color:var(--ink)}
@media (max-width:820px){
  .about-wide{grid-template-columns:minmax(0,1fr)}
  /* the photo swapped in here (the Cairo Tower) is a tall, narrow subject —
     the short/wide box min-height gave on a phone screen cropped it down
     to a sliver of sky with the tower's tip barely in frame. A portrait
     aspect-ratio close to the source photo's own keeps the whole tower
     in view instead of guessing a fixed height per device. */
  .about-wide__img{min-height:0;aspect-ratio:4/5;background-position:center 12%}
}

/* --------------------------------------------- about-wide, as a post ----
   Phone only, and only where .about-wide--post is set: the same section
   restacked the way a feed post reads — a header with the wordmark, the
   copy cut off after four lines behind "Read more", then the photo, then
   a bar through to the About page. Everything past the fold waits until
   the reader asks for it. The desktop two-column layout is untouched:
   both extra elements are display:none until the media query picks
   them up. */
.about-wide__postHead,
.about-wide__readMore,
.about-wide__cta{display:none}

@media (max-width:820px){
  .about-wide--post .about-wide__postHead{display:flex;align-items:center;gap:11px;order:1;padding:16px 18px 12px}
  .about-wide--post .about-wide__text{order:2;padding:0 18px 4px;justify-content:flex-start}
  .about-wide--post .about-wide__img{order:3}
  .about-wide--post .about-wide__cta{order:4}

  .about-wide__avatar{
    width:40px;height:40px;border-radius:50%;flex:none;
    display:grid;place-items:center;background:var(--gold);
  }
  .about-wide__avatar img{display:block;width:26px;height:26px}
  .about-wide__who{display:flex;flex-direction:column;gap:1px;min-width:0}
  .about-wide__who b{font-size:14px;font-weight:800;letter-spacing:-.005em;color:var(--paper)}
  .about-wide__who span{font-size:11.5px;color:var(--haze)}
  body.theme-light .about-wide__who b{color:var(--ink)}
  body.theme-light .about-wide__who span{color:#546669}

  /* the desktop column's airy leading reads as a brochure; a post is denser */
  .about-wide--post .about-wide__text .label{margin-bottom:9px}
  .about-wide--post .about-wide__text h2{max-width:none;margin-bottom:12px}
  .about-wide--post .about-wide__text .lead{line-height:1.7;margin-bottom:0;max-width:none}

  /* collapsed: two lines and an ellipsis, the way the fold works in a feed */
  .about-wide--post .about-wide__text .lead{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  }
  .about-wide--post.is-open .about-wide__text .lead{display:block;overflow:visible}

  .about-wide__readMore{
    display:block;align-self:flex-start;margin-top:9px;padding:0;
    border:0;background:none;cursor:pointer;font-family:var(--f);
    font-size:13.5px;font-weight:700;color:var(--haze);
  }
  body.theme-light .about-wide__readMore{color:#546669}

  .about-wide--post.is-open .about-wide__cta{
    display:flex;align-items:center;justify-content:center;gap:10px;
    padding:17px 18px;border-top:1px solid var(--line);text-decoration:none;
    font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink);background:var(--gold);
  }
  body.theme-light .about-wide--post.is-open .about-wide__cta{border-top-color:rgba(11,61,87,.12)}
  .about-wide__cta svg{width:15px;height:15px;flex:none}
}

/* ---------------------------------------------------- aboutCarousel -----
   Like .about-wide, but the photo and the description both advance
   together — every slide's text is written about that slide's image,
   not a shared caption. The section heading stays put; only the photo
   and the paragraph beneath it change. */
.aboutCarousel{
  display:grid;grid-template-columns:.9fr 1.1fr;
  border-radius:18px;overflow:hidden;background:var(--paper);
}
body.theme-light .aboutCarousel{background:#EEF3F3}
.aboutCarousel__stage{position:relative;min-height:560px}
.aboutCarousel__slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.1s var(--ease);
}
.aboutCarousel__slide.is-active{opacity:1}
.aboutCarousel__text{
  padding:clamp(56px,7vw,104px) clamp(40px,6vw,96px);
  display:flex;flex-direction:column;justify-content:center;
}
.aboutCarousel__text .label{margin-bottom:26px}
.aboutCarousel__text h2{max-width:16ch;margin-bottom:30px}
.aboutCarousel__panels{position:relative;min-height:9.5em}
.aboutCarousel__panel{
  position:absolute;inset:0;opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.aboutCarousel__panel.is-active{opacity:1;transform:none;pointer-events:auto;position:relative}
.aboutCarousel__panel .lead{line-height:1.9;max-width:42ch;margin:0}
.aboutCarousel__dots{display:flex;gap:10px;margin-top:32px}
.aboutCarousel__dots button{
  width:28px;height:3px;border-radius:2px;border:0;padding:0;cursor:pointer;
  background:var(--line);transition:background .3s var(--ease);
}
body.theme-light .aboutCarousel__dots button{background:rgba(11,61,87,.18)}
.aboutCarousel__dots button.is-active{background:var(--gold)}
body.theme-light .aboutCarousel__dots button.is-active{background:#8A6420}
@media (max-width:820px){
  .aboutCarousel{grid-template-columns:minmax(0,1fr)}
  .aboutCarousel__stage{min-height:0;aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  .aboutCarousel__slide{transition:none}
  .aboutCarousel__panel{transition:none;position:relative;opacity:1;transform:none;pointer-events:auto;display:none}
  .aboutCarousel__panel.is-active{display:block}
}

/* auto-advancing photo set on the trip lead — .media already provides the
   aspect-ratio and position:relative, so the images just need to stack */
.carousel__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity 1.6s var(--ease);
}
.carousel__img.is-active{opacity:1}
.carousel__dots{position:absolute;left:16px;bottom:14px;z-index:2;display:flex;gap:6px}
.carousel__dots span{
  width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.45);
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.carousel__dots span.is-active{background:var(--paper);transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){.carousel__img{transition:none}}

/* -------------------------------------------------------------- detail -- */
/* floats up over the mast photo's bottom edge instead of sitting flush
   beneath it — only ever appears on the (always theme-light) package
   pages, so this is a plain white card rather than a themed component */
.facts{
  position:relative;z-index:3;margin:-46px var(--pad) 0;
  background:var(--paper);border-radius:10px;
  box-shadow:0 18px 40px rgba(11,61,87,.16);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;
}
.fact{padding:22px 20px;text-align:center;border-right:1px solid rgba(11,61,87,.1)}
.fact:last-child{border-right:0}
.fact dt{margin:0 0 6px;font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#546669}
.fact dd{margin:0;font-size:clamp(15px,1.3vw,17px);font-weight:800;color:var(--ink)}
@media (max-width:760px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));margin:-30px 16px 0}
  .fact:nth-child(2){border-right:0}
  .fact:nth-child(1),.fact:nth-child(2){border-bottom:1px solid rgba(11,61,87,.1)}
}

.itin{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.itin li{
  display:grid;grid-template-columns:minmax(0,6.5rem) minmax(0,1fr);gap:clamp(16px,3vw,44px);
  padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--line);
}
.itin li:last-child{border-bottom:1px solid var(--line)}
@media (max-width:640px){.itin li{grid-template-columns:1fr;gap:10px}}
.itin__day{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding-top:.35em}
.itin__t{font-size:clamp(17px,1.5vw,21px);font-weight:600;margin:0 0 10px}

/* ----------------------------------------------------------- services -- */
/* a grid of icon tiles — the numbered-list look (.itin) reads flat once a
   list runs past four or five rows, so a longer service breakdown gets its
   own card per item instead: an icon and a ghost number to scan by, title
   and description below. */
.svc{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2vw,20px);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.svc{grid-template-columns:1fr}}
.svc__item{
  position:relative;padding:clamp(26px,2.8vw,34px) clamp(20px,2.4vw,26px) clamp(24px,2.6vw,30px);
  border:1px solid var(--line);border-radius:14px;
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.svc__item:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.svc__num{
  position:absolute;top:20px;right:22px;font-size:11px;font-weight:700;
  letter-spacing:.06em;color:var(--line-strong);font-variant-numeric:tabular-nums;
}
.svc__icon{
  width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(246,216,139,.1);color:var(--gold);margin-bottom:20px;
}
.svc__icon svg{width:22px;height:22px}
.svc__t{font-size:17px;font-weight:700;margin:0 0 8px;letter-spacing:-.005em;color:var(--paper)}
.svc__desc{font-size:13.5px;line-height:1.62;color:var(--haze);margin:0}

.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.ticks{grid-template-columns:1fr}}
.ticks li{
  position:relative;padding-left:24px;font-size:14.5px;line-height:1.6;color:var(--mint);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--gold);
}
.ticks--muted li{color:var(--haze-dim)}
.ticks--muted li::before{background:var(--haze-dim)}
/* one item per row — for short lists like contact details, where the
   two-column default would strand a lone item on its own row */
.ticks--stack{grid-template-columns:1fr}
.ticks a{color:inherit;text-decoration:none;transition:color .35s var(--ease)}
.ticks a:hover{color:var(--gold)}

.incl{
  display:grid;grid-template-columns:1fr minmax(220px,340px);
  gap:clamp(28px,4.4vw,64px);align-items:center;
}
.incl__ledger{list-style:none;counter-reset:incl;margin:0;padding:0}
.incl__ledger li{
  counter-increment:incl;display:flex;align-items:baseline;gap:16px;
  padding:15px 0;border-top:1px solid var(--stack-line);
}
.incl__ledger li:last-child{border-bottom:1px solid var(--stack-line)}
.incl__ledger li::before{
  content:counter(incl,decimal-leading-zero);flex:none;
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--stack-gold);
  font-variant-numeric:tabular-nums;
}
.incl__txt{
  font-size:clamp(14.5px,1.05vw,16px);font-weight:600;color:var(--ink);letter-spacing:-.005em;
}
.incl__check{margin-left:auto;flex:none;width:16px;height:16px;color:var(--deep);opacity:.55}
.incl__photo{border-radius:8px;overflow:hidden;aspect-ratio:4/5}
.incl__photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){
  .incl{grid-template-columns:1fr;gap:24px}
  .incl__photo{order:-1;aspect-ratio:16/9}
}

/* --------------------------------------------------------------- band --- */
.band{position:relative;height:clamp(440px,82vh,820px);overflow:hidden}
.band__figure{position:absolute;inset:-12% 0;will-change:transform}
.band__figure picture{display:block;width:100%;height:100%}
.band__figure img,.band__figure video{width:100%;height:100%;object-fit:cover;display:block}
.band__veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,21,21,.9),rgba(7,21,21,.4) 55%,rgba(7,21,21,.66))}
.band__inner{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;text-align:center;padding:0 var(--pad);
}
.band__kicker{
  font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin:0;
}
.band__dsp{
  font-weight:700;text-transform:uppercase;letter-spacing:-.01em;margin:0;
  font-size:clamp(26px,7vw,52px);line-height:1.3;color:var(--paper);
}
.band__sub{
  color:var(--mint);max-width:38ch;margin:4px 0 0;
  font-size:clamp(14.5px,1.05vw,17px);line-height:1.6;
}

/* full-viewport variant — the arrival moment for a single-place landing
   page (Cairo, a future destination page, …), not the shorter mid-page
   band used elsewhere. Same .band__figure parallax hook, just taller. */
.band--hero{height:100vh;min-height:560px}
.band--hero .band__veil{
  background:
    radial-gradient(ellipse 70% 55% at 50% 46%,rgba(7,21,21,.6),rgba(7,21,21,0) 72%),
    linear-gradient(to top,rgba(7,21,21,.92),rgba(7,21,21,.4) 45%,rgba(7,21,21,.58));
}
.band--hero .band__kicker{letter-spacing:.4em;font-size:11.5px}
.band__inner--left{align-items:center;text-align:center}
.band__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.band__actions .btn--ghost{background:var(--paper);color:var(--ink);box-shadow:none}
.band__actions .btn--ghost:hover{background:var(--gold);color:var(--ink)}
@media (max-width:640px){
  .band__actions{flex-direction:column;align-items:center;width:auto}
  .band__actions .btn{padding:12px 22px;font-size:10.5px}
}
/* A long place name ("Alexandria") overran the band at every width — the
   clamp floor alone knows nothing about how many letters it is sizing.
   --chars (set per heading in the markup) caps the size at whatever still
   fits the padded band; short names like "Cairo" stay on the clamp. */
.band--hero .band__dsp{
  font-size:min(clamp(64px,15vw,134px),calc((100vw - 2 * var(--pad)) / var(--chars,6) / .7));
  letter-spacing:-.02em;
}

/* the hero is on screen the instant the page loads, so its entrance can't
   wait on the scroll-triggered .rv/is-in system — it animates in on its
   own, unconditionally, the moment the page paints. */
.band--hero .band__kicker,
.band--hero .band__dsp,
.band--hero .band__sub,
.band--hero .band__actions{animation:heroIn 1.1s var(--ease) both}
.band--hero .band__kicker{animation-delay:.1s}
.band--hero .band__dsp{animation-delay:.24s}
.band--hero .band__sub{animation-delay:.6s}
.band--hero .band__actions{animation-delay:.75s}
@keyframes heroIn{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}

.band--split{
  height:auto;min-height:clamp(440px,62vh,660px);
  background:var(--ink);display:grid;grid-template-columns:1.15fr 1fr;
}
.band--split .band__photo{position:relative;overflow:hidden}
.band--split .band__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,var(--ink) 100%);
}
.band--split .band__copy{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:20px;padding:56px var(--pad);text-align:left;
}
.band--split .band__dsp{font-size:clamp(34px,3.7vw,58px);line-height:.98}
.band--split .band__sub{max-width:32ch;margin:0}
@media (max-width:760px){
  .band--split{grid-template-columns:1fr;grid-template-rows:220px auto}
  .band--split .band__photo::after{background:linear-gradient(180deg,transparent 30%,var(--ink) 100%)}
  .band--split .band__copy{padding:32px var(--pad) 52px}
}

/* -------------------------------------------------------------- forms --- */
.form{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(2,minmax(0,1fr))}
/* minmax(0,…) rather than a bare 1fr: a plain 1fr track keeps min-width:auto
   and can still be forced wider than the screen by a stubborn child */
@media (max-width:680px){.form{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:9px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--haze)}
.field__optional{opacity:.6;text-transform:none;letter-spacing:normal}
.field input,.field select,.field textarea{
  font-family:var(--f);font-size:15px;color:var(--paper);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:12px 0;transition:border-color .4s var(--ease);
  /* without these a <select> sizes to its longest option, which can drag
     the whole page wider than a phone screen */
  width:100%;min-width:0;
}
.field select option{background:var(--ink)}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--gold);
}
.field input::placeholder,.field textarea::placeholder{color:var(--haze-dim)}

/* form__wa — the WhatsApp alternative offered next to a form's submit
   button, shared across contact.html and any other plain (non-modal)
   enquiry form. align-self overrides .field's flex-column stretch so it
   stays a compact pill rather than matching the submit button's width. */
.form__wa{background:#25D366;color:#fff;align-self:flex-start}
.form__wa:hover{background:#20BD5C}
.form__wa svg{width:18px;height:18px;flex:none}

/* --------------------------------------------------------- placeholder -- */
.ph{
  background:rgba(246,216,139,.09);border:1px solid rgba(246,216,139,.3);
  border-radius:4px;padding:clamp(18px,2.4vw,26px);
  display:flex;flex-direction:column;gap:8px;
}
.ph p,.ph span{margin:0;font-size:13.5px;line-height:1.6;color:var(--gold)}
.ph strong{font-weight:600}
.ph-sent{border-color:var(--gold)}

/* --------------------------------------------------------- routeStrip -- */
/* a divider between two city sections on the same page (Cairo → Alexandria):
   a soft gold glow behind a dashed arc, with a small pulsing dot tracing the
   route on a loop — a compact echo of the homepage's .route5 distance line,
   given some motion instead of sitting still. */
.routeStrip{
  position:relative;overflow:hidden;height:118px;
  background:#EEF3F3;border-top:1px solid rgba(11,61,87,.12);border-bottom:1px solid rgba(11,61,87,.12);
}
.routeStrip__glow{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:420px;height:200px;
  background:radial-gradient(ellipse at center,rgba(138,100,32,.10),transparent 70%);pointer-events:none;
}
.routeStrip__row{
  position:relative;z-index:1;height:100%;
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,30px);padding:0 var(--pad);
}
.routeStrip__city{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;flex:none;color:var(--ink)}
.routeStrip__city.dim{color:rgba(11,61,87,.42)}
/* fixed pixel size, matching the SVG's own viewBox 1:1 — offset-path's
   coordinates are raw CSS pixels against this box, so any mismatch between
   this width and the viewBox (a responsive clamp() here, previously) throws
   the dot off the drawn arc. */
.routeStrip__track{position:relative;width:250px;height:30px;flex:none}
.routeStrip__svg{width:100%;height:100%;overflow:visible}
.routeStrip__dots{fill:none;stroke:rgba(11,61,87,.26);stroke-width:1.1;stroke-dasharray:.5 6;stroke-linecap:round}
.routeStrip__pin{r:3.2;fill:#8A6420}
.routeStrip__pin.end{fill:#EEF3F3;stroke:rgba(11,61,87,.4);stroke-width:1.3}
.routeStrip__dot{
  offset-path:path('M 6 22 Q 100 2 244 22');offset-rotate:0deg;offset-distance:0%;
  position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:#8A6420;
  box-shadow:0 0 8px 1px rgba(138,100,32,.5);
  animation:routeStripFly 2.2s ease-in-out 1 forwards;
}
@keyframes routeStripFly{from{offset-distance:0%}to{offset-distance:100%}}
.routeStrip__mid{
  position:absolute;left:50%;bottom:-16px;translate:-50% 0;
  font-size:9px;font-weight:800;letter-spacing:.14em;color:#8A6420;text-align:center;white-space:nowrap;
}

/* The arc must stay geometrically 250px — offset-path reads raw pixels, so
   the dot only rides the drawn path at 1:1. On a phone the track is therefore
   scaled down uniformly (--s) rather than resized, and the layout space it no
   longer fills is pulled back with margins derived from --s, so the two can
   never drift apart the way two hand-tuned numbers would.
   The label is the exception: it sits inside the scaled box, so at --s:.58 a
   9px label renders at 5px. It counter-scales by 1/--s to come back to its
   true size, and drops a couple of points because a full-size label under a
   145px arc reads much heavier than the same label under the 250px one.
   Nothing here applies above 620px — desktop is left exactly as it was. */
@media (max-width:620px){
  .routeStrip__row{gap:12px}
  .routeStrip__city{font-size:11px;letter-spacing:.07em}
  .routeStrip__track{--s:.74;scale:var(--s);margin:0 calc(250px * (var(--s) - 1) / 2)}
  .routeStrip__mid{scale:calc(1 / var(--s));font-size:8px;bottom:-20px}
}
@media (max-width:430px){
  .routeStrip{height:104px}
  .routeStrip__row{gap:8px}
  .routeStrip__city{font-size:10px;letter-spacing:.05em}
  .routeStrip__track{--s:.58}
  .routeStrip__mid{font-size:7.5px;bottom:-26px}
}


/* the hero photograph is licensed, and a full-bleed band has no caption to
   hang the credit on — so it sits quietly in the corner over the veil */
.band__credit{
  position:absolute;right:var(--pad);bottom:14px;margin:0;z-index:2;
  font-size:9.5px;letter-spacing:.04em;color:rgba(255,255,255,.5);
}


/* --------------------------------------------------------- nileFlow --
   The Nile itinerary between the Alexandria handover and the closing CTA.
   A full-bleed band on warm paper rather than the page's teal: the reader
   has left the coast and gone up the river, and the change of ground says
   so before any of the copy does.
   Five steps alternate text/photograph, and one thread ties them together —
   it runs down the left edge of whichever column holds the text, turns with
   a wide radius, and crosses to the next. The path is built from measured
   positions in agile.js, so longer copy or a new stop just works. */
.nileFlow{
  position:relative;background:#FBF8F2;color:#3A3128;
  padding:clamp(56px,7vw,108px) 0 clamp(52px,7vw,100px);
  border-top:1px solid rgba(11,61,87,.10);border-bottom:1px solid rgba(11,61,87,.10);
  --nf-gold:#8A6420;--nf-gold-lit:#C9A87C;--nf-gold-pale:#E7DCC8;
  --nf-warm-2:#6B6053;--nf-warm-3:#948673;--nf-chip:#F0E7D6;
  --nf-serif:Georgia,'Times New Roman',serif;
}
.nileFlow__wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}

.nileFlow__pill{
  display:inline-block;margin:0 0 22px;padding:7px 16px;border-radius:999px;
  background:var(--nf-chip);color:var(--nf-warm-2);
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.nileFlow__title{
  margin:0;max-width:16ch;font-family:var(--nf-serif);font-weight:400;
  font-size:clamp(36px,5.6vw,74px);line-height:1.05;letter-spacing:-.015em;color:#3A3128;
}
.nileFlow__sub{margin:20px 0 0;max-width:56ch;font-size:14.5px;line-height:1.72;color:var(--nf-warm-2)}

.nfSteps{position:relative;list-style:none;margin:clamp(44px,6vw,86px) 0 0;padding:0}
.nfThread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.nfThread path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.nfThread__base{stroke:var(--nf-gold-pale)}
.nfThread__fill{stroke:var(--nf-gold-lit)}
.nfThread__dot{fill:var(--nf-gold-lit)}

.nfStep{position:relative;z-index:1;display:grid;gap:clamp(24px,4vw,64px);align-items:center}
.nfStep + .nfStep{margin-top:clamp(46px,6vw,104px)}
@media (min-width:900px){
  .nfStep{grid-template-columns:1fr 1fr}
  .nfStep--a .nfStep__text{grid-column:1;order:0}
  .nfStep--a .nfStep__media{grid-column:2;order:1}
  .nfStep--b .nfStep__text{grid-column:2;order:1}
  .nfStep--b .nfStep__media{grid-column:1;order:0}
}
.nfStep__text{padding-left:clamp(30px,4vw,58px)}

.nfNum{
  display:flex;font-family:var(--nf-serif);font-weight:400;
  font-size:clamp(52px,7vw,92px);line-height:1;color:var(--nf-gold-lit);
  margin-bottom:clamp(14px,2vw,26px);
}
/* each digit is a 0-9 column clipped to one glyph and rolled into place */
.nfNum__d{display:block;height:1.2em;overflow:hidden}
.nfNum__roll{
  display:flex;flex-direction:column;transform:translateY(0);
  transition:transform 1.2s var(--ease);transition-delay:var(--nd,0s);
}
.nfNum__roll span{height:1.2em;line-height:1.2em;display:block}
.nfStep.is-in .nfNum__roll{transform:translateY(calc(var(--d) * -1.2em))}

.nfStep__name{
  margin:0;font-family:var(--nf-serif);font-weight:400;
  font-size:clamp(24px,3.2vw,34px);line-height:1.15;color:#3A3128;letter-spacing:-.01em;
}
.nfStep__km{
  margin:10px 0 0;display:inline-block;padding:4px 11px;border-radius:999px;
  background:var(--nf-chip);color:var(--nf-gold);
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.nfStep__copy{margin:14px 0 0;max-width:46ch;font-size:14px;line-height:1.72;color:var(--nf-warm-2)}

.nfStep__media{margin:0}
.nfStep__media img{
  /* 16:10 rather than 4:3 — a 4:3 frame ran to ~420px in a 560px column and
     made the section far taller than it needed to be. The source files are
     encoded at the same ratio, so nothing is cropped away at display time. */
  /* height:auto matters: the width/height attributes on the <img> are
     presentational hints that set an explicit height, and an explicit
     height beats aspect-ratio — without this the frame was ignored and
     every photo rendered at its full intrinsic height. */
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:16px;
  box-shadow:0 2px 4px rgba(58,49,40,.06),0 22px 44px rgba(58,49,40,.13);
}
.nfStep__media figcaption{margin-top:9px;font-size:9.5px;color:var(--nf-warm-3);letter-spacing:.02em}

.nfNote{
  max-width:520px;margin:clamp(44px,6vw,84px) auto 0;text-align:center;
  border-top:1px solid rgba(138,100,32,.28);padding-top:20px;
}
.nfNote h3{margin:0 0 7px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--nf-gold)}
.nfNote p{margin:0;font-size:13px;line-height:1.65;color:var(--nf-warm-2)}

/* the section runs its own reveal so the numerals can roll on arrival */
.nfStep{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease),transform .95s var(--ease)}
.nfStep.is-in{opacity:1;transform:none}

@media (max-width:899px){
  /* Two real columns cannot work at phone widths — 170px each is about twenty
     characters to a line. So the alternation moves onto the thread instead:
     it snakes from one edge to the other between steps, exactly as on desktop,
     while each step keeps the full width with a gutter only on the side the
     thread happens to be running down. Same weave, readable measure. */
  .nfStep--a .nfStep__text,.nfStep--a .nfStep__media{padding-left:44px;padding-right:0}
  .nfStep--b .nfStep__text,.nfStep--b .nfStep__media{padding-right:44px;padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  .nfStep{opacity:1;transform:none;transition:none}
  .nfNum__roll{transition:none}
}


/* -------------------------------------------------------- checkpoint -- */
/* the second divider on the Cairo page: Alexandria handing over to Luxor &
   Aswan. .routeStrip above it draws a route being flown — an arc with a dot
   tracing it. This draws a checkpoint being passed: two steel rails running
   in to a set of gold stones, with the distance engraved underneath. Same
   fixed light band as .routeStrip so the two read as a pair of dividers
   rather than two unrelated ideas. */
.checkpoint{
  position:relative;overflow:hidden;
  padding:40px var(--pad);
  background:#EEF3F3;border-top:1px solid rgba(11,61,87,.12);border-bottom:1px solid rgba(11,61,87,.12);
  /* the metal, kept local to the component */
  --au-lit:#E0BE6B;--au:#A87C28;--au-deep:#7A5719;
  --steel-dark:#61777D;--steel:#9DB0B6;--steel-lit:#EDF3F4;
}
.checkpoint__glow{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:460px;height:210px;
  background:radial-gradient(ellipse at center,rgba(138,100,32,.10),transparent 70%);pointer-events:none;
}
/* 1fr auto 1fr rather than a centred flex row: the two names are different
   lengths, and a flex row would push the stones off-centre by the difference.
   A checkpoint that is not in the middle is not a checkpoint. */
.checkpoint__row{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;
}
.checkpoint__side{display:flex;align-items:center;gap:26px;min-width:0}
.checkpoint__side:last-child{justify-content:flex-end}
.checkpoint__city{
  flex:none;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;color:var(--ink);
}
.checkpoint__city--dim{color:rgba(11,61,87,.42)}

/* one machined rail rather than a run of dots — steel reads from the specular
   band along its length, and a dotted line has no length to put one on. Each
   rail is dark at the outer end and brightens as it runs in toward the stones,
   so the light has somewhere to go. The white hairline under it is the milled
   bottom edge. */
.checkpoint__rail{flex:1 1 auto;min-width:20px;height:1px;border-radius:2px}
.checkpoint__side:first-child .checkpoint__rail{
  background:linear-gradient(90deg,rgba(97,119,125,0) 0%,var(--steel-dark) 20%,var(--steel) 58%,var(--steel-lit) 100%);
}
.checkpoint__side:last-child .checkpoint__rail{
  background:linear-gradient(270deg,rgba(97,119,125,0) 0%,var(--steel-dark) 20%,var(--steel) 58%,var(--steel-lit) 100%);
}

.checkpoint__mark{position:relative;flex:none;display:flex;align-items:center;justify-content:center;gap:13px;height:84px}

/* A stone is a square turned 45°, not a drawn path: rotating the box keeps
   the metal ramp aligned to the facet, so the light reads as falling across
   the stone rather than being painted on it. */
.checkpoint__gem{
  position:relative;flex:none;rotate:45deg;overflow:hidden;
  background:linear-gradient(135deg,var(--au-lit) 0%,var(--au) 48%,var(--au-deep) 100%);
}
.checkpoint__gem--core{width:13px;height:13px;box-shadow:0 0 7px rgba(224,190,107,.55)}
.checkpoint__gem--side{width:6px;height:6px;opacity:.8}
/* the fixed specular, so the stone has a lit side even between glints */
.checkpoint__gem::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.14) 32%,rgba(255,255,255,0) 54%);
}
/* and the travelling one — across in under a second, then five seconds of
   nothing. A stone catching the light now and then, not a blinking light. */
.checkpoint__gem--core::after{
  content:"";position:absolute;inset:-60%;
  background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%);
  translate:-130% -130%;
  animation:checkpointGlint 5.6s cubic-bezier(.3,0,.2,1) infinite;
}
@keyframes checkpointGlint{
  0%,68%{translate:-130% -130%}
  86%,100%{translate:130% 130%}
}

/* the distance, set in the serif the brand marks already use — small and
   wide-tracked, the way an engraved plate is lettered */
.checkpoint__dist{
  position:absolute;left:50%;translate:-50% 0;top:calc(50% + 26px);white-space:nowrap;
  font-family:Georgia,'Times New Roman',serif;font-size:10.5px;font-style:italic;
  letter-spacing:.26em;text-transform:uppercase;color:var(--au);
}

@media (max-width:620px){
  .checkpoint{padding:30px var(--pad)}
  .checkpoint__row,.checkpoint__side{gap:11px}
  .checkpoint__city{font-size:10px;letter-spacing:.05em}
  .checkpoint__mark{height:70px;gap:10px}
  .checkpoint__dist{font-size:9px;letter-spacing:.18em;top:calc(50% + 22px)}
}
/* ------------------------------------------------------------ marquee -- */
/* an infinite strip of short pull-quotes. The track's content is duplicated
   once in the HTML; translating exactly -50% loops it seamlessly since
   each half is identical width. */
.marquee{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(16px,2vw,22px) 0;background:var(--ink-lift);
}
.marquee__track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  display:flex;align-items:center;flex:none;white-space:nowrap;
  font-size:clamp(14.5px,1.25vw,18px);font-weight:600;letter-spacing:-.005em;
  color:var(--paper);padding:0 clamp(24px,2.8vw,40px);
}
.marquee__item::after{
  content:"";width:5px;height:5px;border-radius:999px;background:var(--gold);
  margin-left:clamp(24px,2.8vw,40px);flex:none;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* -------------------------------------------------------------- stats -- */
.stats{
  list-style:none;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{padding:clamp(28px,3.4vw,44px) clamp(16px,2vw,28px);border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
@media (max-width:760px){
  .stat:nth-child(2n+1){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
}
.stat__num{
  margin:0;font-size:clamp(32px,4.2vw,56px);font-weight:700;letter-spacing:-.01em;
  color:var(--paper);font-variant-numeric:tabular-nums;line-height:1;
}
.stat__label{
  margin:10px 0 0;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--haze);
}

/* --------------------------------------------------------------- quotes -- */
.quotes{list-style:none;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,26px)}
@media (max-width:980px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.quotes{grid-template-columns:1fr}}
.quote{
  position:relative;padding:clamp(28px,3vw,34px) clamp(24px,2.6vw,28px);
  border:1px solid var(--line);border-radius:16px;
  display:flex;flex-direction:column;gap:16px;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.quote:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.quote__stars{display:flex;gap:3px;color:var(--gold)}
.quote__stars svg{width:13px;height:13px}
.quote__text{font-size:14.5px;line-height:1.68;color:var(--mint);margin:0}
.quote__who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.quote__avatar{
  width:38px;height:38px;border-radius:999px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(246,216,139,.14);color:var(--gold);font-size:12.5px;font-weight:700;
}
.quote__name{font-size:13px;font-weight:700;color:var(--paper);margin:0}
.quote__trip{font-size:11px;color:var(--haze-dim);margin:2px 0 0}

/* --------------------------------------------------------- spotlight --- */
/* dropped into .band--split's photo/copy layout — just the type inside
   .band__copy, sized for a full sentence instead of .band__dsp's short
   all-caps headline word. */
.spot__mark{font-family:Georgia,'Times New Roman',serif;font-size:64px;line-height:.4;color:var(--gold);opacity:.55;margin:0}
.spot__quote{
  font-size:clamp(22px,2.4vw,32px);font-weight:600;line-height:1.38;
  color:var(--paper);margin:0;text-wrap:balance;letter-spacing:-.005em;
}
.spot__by{display:flex;align-items:center;gap:12px;margin-top:6px}
.spot__stars{display:flex;gap:3px;color:var(--gold)}
.spot__stars svg{width:14px;height:14px}
.spot__name{font-size:13.5px;font-weight:700;color:var(--paper);margin:0}
.spot__trip{font-size:11.5px;color:var(--haze-dim);margin:2px 0 0}

/* ------------------------------------------------------------ groupHead --
   A real subhead for a named subgroup (West/East Cairo, …) rather than a
   small uppercase eyebrow — a mark, a name, a one-word sense of place, and
   a rule running out to the edge so the split reads at a glance. */
.groupHead{display:flex;align-items:center;gap:18px;margin:0 0 30px}
.groupHead + .groupHead,
.siteList + .groupHead,
.siteCards + .groupHead,
.picker + .groupHead{margin-top:56px}
.groupHead__mark{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--gold);font-family:Georgia,'Times New Roman',serif;font-size:14px;
}
/* the Reels mark — Facebook's rounded-square frame with a play triangle,
   used where the group is a strip of reels rather than a lettered list */
.groupHead__mark--reel{border-radius:11px}
.groupHead__mark--reel::before{
  content:"";width:0;height:0;margin-left:3px;
  border-left:11px solid currentColor;
  border-top:7px solid transparent;border-bottom:7px solid transparent;
}
.groupHead h3{margin:0;font-size:clamp(19px,2vw,24px);font-weight:800;letter-spacing:-.005em;white-space:nowrap}
.groupHead h3 a{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
.groupHead h3 a:hover{color:var(--gold)}
body.theme-light .groupHead h3 a:hover{color:#8A6420}
.groupHead__sub{font-size:12px;color:var(--haze);white-space:nowrap}
.groupHead__rule{height:1px;background:var(--line);flex:1}
body.theme-light .groupHead__sub{color:#546669}
body.theme-light .groupHead__rule{background:rgba(11,61,87,.12)}

/* on a narrow phone the mark + name + sense-of-place ran past the wrap and
   squeezed the rule out of existence; tighten them so the rule survives */
@media (max-width:520px){
  .groupHead{gap:12px}
  .groupHead__mark{width:34px;height:34px}
  .groupHead__sub{font-size:11px}
}

/* ------------------------------------------------------ offerTabs (home) --
   The homepage's "Three ways in" reuses religious.html's Best Offers /
   Hajj / Umrah switcher: one continuous pill nav with a gold panel that
   slides behind whichever tab is active (JS sets --thumbX), swapping
   Holidays / MICE / Religious as full panels rather than an accordion.
   Kept in the shared stylesheet (religious.html carries its own inline
   copy for pkgCard) so any page can drop the same tab group in. */
.offerTabs__nav{
  position:relative;display:flex;
  background:var(--ink-lift);border-radius:999px;padding:5px;
  max-width:560px;margin:0 auto clamp(28px,3.4vw,40px);
}
.offerTabs__group{position:relative;display:flex;flex:1;min-width:0}
.offerTabs__thumb{
  position:absolute;top:5px;bottom:5px;left:5px;
  width:calc((100% - 10px) / 3);border-radius:999px;background:var(--gold);
  transform:translateX(calc(var(--thumbX,0) * 100%));
  transition:transform .4s cubic-bezier(.65,0,.35,1);
}
.offerTabs__btn{
  position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 10px;border:0;border-radius:999px;
  background:none;color:var(--haze);cursor:pointer;
  font-family:var(--f);font-size:12.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  transition:color .3s var(--ease);
}
.offerTabs__btn svg{width:17px;height:17px;flex:none}
.offerTabs__btn.is-active{color:var(--ink)}
body.theme-light .offerTabs__btn{color:#546669}
body.theme-light .offerTabs__btn.is-active{color:var(--ink)}
@media (max-width:480px){
  .offerTabs__btn{padding:11px 4px;font-size:10.5px;gap:5px}
  .offerTabs__btn svg{width:15px;height:15px}
}
@media (max-width:360px){
  .offerTabs__btn svg{display:none}
}

.offerTabs__panel{display:none}
.offerTabs__panel.is-active{display:block;animation:offerTabsIn .45s var(--ease)}
@keyframes offerTabsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.offerTabs__more{margin-top:22px;text-align:center}
.offerTabs__more a{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--gold);font-size:13px;font-weight:700;text-decoration:none;
}
.offerTabs__more a svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.offerTabs__more a:hover svg{transform:translateX(4px)}
body.theme-light .offerTabs__more a{color:#8A6420}

/* -------------------------------------------------------------- siteList -
   Option-A "index" layout for the most-famous-sites section: quiet rows,
   no button styling — the site itself carries no link, only the circular
   photo (.storyRing) is interactive. */
.siteList{list-style:none;margin:0;padding:0}
.siteRow{display:flex;align-items:center;gap:26px;padding:20px 0;border-top:1px solid var(--line)}
.siteList > .siteRow:first-child{border-top:1px solid var(--line)}
body.theme-light .siteRow{border-top-color:rgba(11,61,87,.12)}
.siteRow__num{font-family:Georgia,'Times New Roman',serif;font-size:15px;color:var(--haze-dim);width:24px;flex:none}
/* holds the column even where a site has no photo yet — .siteRow__body
   still lines up under the ones that do rather than jumping left */
.siteRow__spacer{width:76px;flex:none}
.siteRow__body{flex:1;min-width:0}
.siteRow__body h3{margin:0 0 4px;font-size:17px;font-weight:800;letter-spacing:-.005em;color:var(--paper)}
.siteRow__body p{margin:0;font-size:13.5px;color:var(--haze);line-height:1.55}
body.theme-light .siteRow__body h3{color:var(--ink)}
body.theme-light .siteRow__body p{color:#4E6669}

/* ------------------------------------------------------------ storyRing --
   An Instagram-style "unwatched story" ring around the circular photo —
   the one interactive element in an otherwise static info row. Watching
   marks it seen, so the ring fades to a plain border on return visits. */
.storyRing{
  position:relative;flex:none;width:76px;height:76px;border-radius:50%;padding:3px;
  background:conic-gradient(from 218deg,var(--gold),#E7A75E,var(--deep),var(--gold));
  border:0;cursor:pointer;display:block;transition:transform .3s var(--ease);
}
.storyRing:hover{transform:scale(1.06)}
.storyRing:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.storyRing.is-seen{background:var(--line)}
body.theme-light .storyRing.is-seen{background:rgba(11,61,87,.22)}
.storyRing__img{
  display:block;width:100%;height:100%;border-radius:50%;background-size:cover;background-position:center;
  border:3px solid var(--ink);box-sizing:border-box;
}
body.theme-light .storyRing__img{border-color:#E1EDED}
.storyRing__vid{
  display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:3px solid var(--ink);box-sizing:border-box;
}
body.theme-light .storyRing__vid{border-color:#E1EDED}
.storyRing__play{
  position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;
  background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);
}
body.theme-light .storyRing__play{border-color:#E1EDED}
.storyRing__play svg{width:9px;height:9px;margin-left:1px}

/* -------------------------------------------------------------- siteCards -
   The same .storyRing button (so the story-viewer JS needs no changes),
   restyled from a small circle into a small vertical card — Reels-style:
   a narrow strip of tall thumbnails sitting side by side, title burned
   into the bottom of each one, rather than a grid of bigger tiles. */
.siteCards{
  list-style:none;margin:0;padding:0 0 8px;
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.siteCards::-webkit-scrollbar{height:5px}
.siteCards::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
body.theme-light .siteCards::-webkit-scrollbar-thumb{background:rgba(11,61,87,.18)}
.siteCards li{flex:none;scroll-snap-align:start}
.siteCards .storyRing{
  width:232px;height:auto;aspect-ratio:2/3;border-radius:14px;padding:0;
  background:var(--ink-lift);overflow:hidden;isolation:isolate;cursor:pointer;
  transition:transform .3s var(--ease);
}
.siteCards .storyRing:hover{transform:translateY(-4px) scale(1)}
.siteCards .storyRing__img{border-radius:0;border:0;position:absolute;inset:0}
.siteCards .storyRing__vid{border-radius:0;border:0;position:absolute;inset:0}
.siteCards .storyRing__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,21,21,0) 46%,rgba(7,21,21,.62) 76%,rgba(7,21,21,.94) 100%);
}
.siteCards .storyRing__body{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:2;text-align:left;
}
.siteCards .storyRing__title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-size:16px;font-weight:800;color:var(--paper);letter-spacing:-.005em;line-height:1.3;margin:0;
}
.siteCards .storyRing__desc{display:none}
.siteCards .storyRing.is-seen{background:var(--ink-lift)}
@media (max-width:480px){
  .siteCards .storyRing{width:150px}
  .siteCards .storyRing__title{font-size:13.5px}
  .siteCards .storyRing__body{left:10px;right:10px;bottom:10px}
}

/* ------------------------------------------------------------- storyView -
   The full-screen "watch the reel" overlay a storyRing opens. Segmented
   progress bar across the top (one per site, site-wide — West Cairo's
   rings and East Cairo's rings are one continuous reel), a slow Ken-Burns
   zoom on the still photo standing in for real video, tap zones to move
   between sites, caption pinned to the bottom. */
.storyView{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.storyView.is-open{opacity:1;pointer-events:auto}
.storyView__backdrop{position:absolute;inset:0;background:rgba(4,10,10,.94)}
.storyView__stage{
  position:relative;z-index:1;width:min(420px,100vw);height:min(100vh,760px);
  overflow:hidden;background:var(--ink);
  transition:transform .3s var(--ease);touch-action:none;
}
.storyView__stage.is-dragging{transition:none}
@media (min-width:640px){.storyView__stage{border-radius:18px}}
.storyView__bars{position:absolute;top:14px;left:14px;right:14px;z-index:4;display:flex;gap:5px}
.storyView__bar{flex:1;height:2.5px;border-radius:999px;background:rgba(255,255,255,.28);overflow:hidden}
.storyView__bar em{display:block;height:100%;width:0;background:var(--paper);font-style:normal}
.storyView__bar.is-done em{width:100%!important}
.storyView__close{
  position:absolute;top:30px;right:14px;z-index:4;width:32px;height:32px;border-radius:50%;
  border:0;background:rgba(7,21,21,.4);color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.storyView__close svg{width:15px;height:15px}
.storyView__mute{
  position:absolute;top:30px;right:56px;z-index:4;width:32px;height:32px;border-radius:50%;
  border:0;background:rgba(7,21,21,.4);color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.storyView__mute[hidden]{display:none}
.storyView__mute svg{width:16px;height:16px}
.storyView__mute .storyView__muteOff{display:none}
.storyView__mute[aria-pressed="true"] .storyView__muteOn{display:none}
.storyView__mute[aria-pressed="true"] .storyView__muteOff{display:block}
.storyView__media{position:absolute;inset:0;overflow:hidden}
.storyView__zoom{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.05)}
.storyView__zoom.is-playing{animation:storyZoom linear forwards}
#storyVideo{transform:none}
@keyframes storyZoom{from{transform:scale(1.05)}to{transform:scale(1.18)}}
.storyView__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,21,21,.92),rgba(7,21,21,.05) 42%)}
.storyView__cap{position:absolute;left:22px;right:22px;bottom:28px;z-index:2}
.storyView__cap p:first-child{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.storyView__cap h3{font-size:21px;font-weight:800;color:var(--paper);margin:0 0 8px;letter-spacing:-.005em}
.storyView__cap p:last-child{font-size:13.5px;line-height:1.55;color:var(--mint);margin:0}
.storyView__tap{position:absolute;top:0;bottom:0;width:34%;z-index:3;border:0;background:none;padding:0;cursor:pointer}
.storyView__tap--prev{left:0}
.storyView__tap--next{right:0}
/* Each tap zone is a full-height button a third of the screen wide, so the
   browser's default tap highlight paints a huge translucent slab over the
   media on every press — a dark wash on iOS. The reel changing is the only
   feedback a press needs here, so the highlight goes. */
.storyRing,.storyView__tap,.storyView__side,.storyView__close,.storyView__mute{-webkit-tap-highlight-color:transparent}
/* the tap zones drive the viewer at every width, phones included: press the
   right third for the next reel, the left third for the previous one. That
   leaves the middle third for press-and-hold to pause, and a downward drag
   (see agile.js) for dismissing. */
.storyView__side{
  position:absolute;top:50%;translate:0 -50%;z-index:4;width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(7,21,21,.4);color:var(--paper);display:none;align-items:center;justify-content:center;cursor:pointer;
}
.storyView__side svg{width:16px;height:16px}
.storyView__side--prev{left:-56px}
.storyView__side--next{right:-56px}
@media (min-width:640px){.storyView__side{display:flex}}
@media (min-width:900px){.storyView__side--prev{left:calc(50% - 266px)}.storyView__side--next{right:calc(50% - 266px)}}

/* -------------------------------------------------------- comingSoon --
   A brief toast for nav destinations that aren't built yet — clicking
   one of those links (see [data-coming-soon] handling in agile.js)
   surfaces this instead of navigating. */
.comingSoon{
  position:fixed;left:50%;bottom:28px;z-index:500;
  transform:translate(-50%,16px);
  max-width:calc(100vw - 32px);
  background:var(--paper);color:var(--ink);
  padding:14px 24px;border-radius:999px;
  font-size:13px;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 24px 48px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.comingSoon.is-visible{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.ln>span{transition:none!important;opacity:1!important;transform:none!important}
  .card__img,.picker__img{transition:none}
  .marquee__track{animation:none!important}
  .band--hero .band__kicker,.band--hero .band__dsp,.band--hero .band__sub,.band--hero .band__actions{animation:none!important;opacity:1!important;transform:none!important}
  .storyView__zoom{animation:none!important;transform:none!important}
  .routeStrip__dot{animation:none!important;offset-distance:100%!important}
  .checkpoint__gem--core::after{animation:none!important;translate:-130% -130%!important}
  .comingSoon{transition:none!important}
}