/* ══════════════════════════════════════════════════════════════
   Himalayan Kingdom Expedition — Bhutan
   ──────────────────────────────────────────────────────────────
   Palette is taken from the logo (a bird breaking out of an open
   circle, on a yellow→orange→red gradient) and from dzong
   architecture: whitewashed lime walls, the kemar ochre band
   under every roofline, blue-pine forest, gold finials.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* brand flame — straight off the logo */
  --flame-1:#F7C325;
  --flame-2:#F0873C;
  --flame-3:#E8342C;
  --flame:linear-gradient(150deg,var(--flame-1) 0%,var(--flame-2) 48%,var(--flame-3) 100%);

  /* deep, expensive relatives of the same hues */
  --kemar:#8C2F26;      /* the ochre band below a dzong roof */
  --flame-ink:#D42A22;  /* flame red, darkened to clear AA on white */
  --kemar-lo:#6E241D;
  --gold:#B08D4F;       /* roof finials, hairlines */

  /* grounds */
  --ink:#15181A;
  --pine:#1E2B24;       /* himalayan blue pine, deep shade */
  /* ONE light ground for the whole page. Earlier this alternated
     between three near-identical tones, which does not read as
     rhythm, it reads as dirt. Contrast now comes from the single
     dark band and from the white cards that sit on top. */
  --wash:#EDEFEC;       /* lime-washed dzong wall, cool not cream */

  /* type on grounds */
  --tx:#15181A;
  --tx-2:#4E565A;
  --tx-3:#5F676B;   /* AA 4.99:1 on the page ground */
  --on-dark:#EFEDE8;
  --on-dark-2:#A9AFA8;

  --line:color-mix(in srgb,var(--ink) 14%,transparent);
  --line-2:color-mix(in srgb,var(--ink) 8%,transparent);

  /* type */
  --display:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* rhythm */
  --gut:clamp(1.25rem,4vw,2.75rem);
  --sec:clamp(5rem,11vw,9.5rem);
  --max:1280px;
  --r:22px;

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

/* ── reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--wash);color:var(--tx);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  font-weight:350;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

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

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:1rem;z-index:200;background:var(--ink);color:var(--on-dark);
      padding:.7rem 1.1rem;border-radius:10px;text-decoration:none;transition:top .2s}
.skip:focus{top:1rem}

/* ── shared type ───────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.022em;
  font-variation-settings:"SOFT" 0,"WONK" 1;margin:0}
h1 em,h2 em{font-style:italic;font-weight:300;font-variation-settings:"SOFT" 8,"WONK" 1}

h1{font-size:clamp(2.9rem,7.4vw,6.1rem);line-height:.97}
h2{font-size:clamp(2.15rem,4.4vw,3.7rem);line-height:1.04}
.h3,h3{font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.22;letter-spacing:-.012em}

.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--tx-3);margin:0 0 1.4rem}
.eyebrow--rule{display:flex;align-items:center;gap:.85rem}
.eyebrow--rule::before{content:"";width:34px;height:2px;border-radius:2px;background:var(--flame);flex:none}

.lead{font-size:clamp(1.12rem,1.35vw,1.32rem);line-height:1.55;color:var(--tx-2);font-weight:350}
.lead--wide{max-width:46ch;margin:1.4rem 0 0}
.prose p{margin:0 0 1.15rem;color:var(--tx-2)}
.prose p:last-child{margin-bottom:0}

.link{display:inline-flex;align-items:center;gap:.5rem;color:var(--kemar);
  font-weight:600;font-size:.94rem;text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid color-mix(in srgb,var(--kemar) 32%,transparent);transition:.25s var(--ease)}
.link::after{content:"→";transition:transform .3s var(--ease)}
.link:hover{border-bottom-color:var(--kemar)}
.link:hover::after{transform:translateX(5px)}

.wrap{width:min(100% - (var(--gut) * 2),var(--max));margin-inline:auto}

.grid-2{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,4.5rem)}
@media(min-width:900px){.grid-2{grid-template-columns:.85fr 1fr;gap:clamp(3rem,7vw,7rem)}}

/* ── buttons ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:.005em;
  padding:.82rem 1.55rem;border-radius:999px;border:0;text-decoration:none;
  cursor:pointer;position:relative;isolation:isolate;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn--solid{color:#fff;background:var(--ink)}
.btn--solid::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--flame);
  opacity:0;transition:opacity .35s var(--ease)}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 10px 26px -10px rgba(232,52,44,.6)}
.btn--solid:hover::before{opacity:1}
.btn--wide{width:100%;padding-block:1rem}

/* ══ SIGNATURE — the flight rail ════════════════════════════ */
.rail{position:fixed;left:max(14px,1.6vw);top:50%;translate:0 -50%;z-index:90;
  display:none;pointer-events:none}
@media(min-width:1180px){.rail{display:block}}
.rail__track,.rail__fill{position:absolute;left:5px;top:0;width:2px;border-radius:2px}
.rail__track{height:100%;background:color-mix(in srgb,var(--ink) 13%,transparent)}
.rail__fill{height:0;background:var(--flame);transition:height .1s linear;
  box-shadow:0 0 14px -2px color-mix(in srgb,var(--flame-2) 70%,transparent)}
.rail__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,3.4vh,2.6rem)}
.rail__dot{pointer-events:auto;display:flex;align-items:center;gap:.85rem;
  text-decoration:none;color:var(--tx-3);font-size:.74rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase}
.rail__dot i{width:12px;height:12px;border-radius:50%;flex:none;
  border:1.5px solid color-mix(in srgb,var(--ink) 26%,transparent);background:var(--wash);
  transition:.35s var(--ease)}
.rail__dot span{opacity:0;translate:-6px 0;transition:.35s var(--ease);white-space:nowrap}
.rail:hover .rail__dot span,.rail__dot:focus-visible span{opacity:1;translate:0 0}
.rail__dot.is-on i{background:var(--flame);border-color:transparent;scale:1.25;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--flame-2) 18%,transparent)}
.rail__dot.is-on{color:var(--tx)}
.rail__dot:hover i{border-color:var(--flame-3)}
/* on dark sections the rail inverts */
.rail.on-dark .rail__track{background:rgba(255,255,255,.18)}
.rail.on-dark .rail__dot{color:var(--on-dark-2)}
.rail.on-dark .rail__dot i{background:var(--pine);border-color:rgba(255,255,255,.32)}
.rail.on-dark .rail__dot.is-on{color:var(--on-dark)}

/* ── header ────────────────────────────────────────────────── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(.85rem,1.7vw,1.4rem) var(--gut);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease)}
.hdr.is-stuck{background:color-mix(in srgb,var(--wash) 86%,transparent);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 var(--line-2);padding-block:.7rem}

.brand{display:flex;align-items:center;gap:.72rem;text-decoration:none;flex:none}
.brand__mark{width:clamp(38px,3.4vw,50px);height:auto;flex:none}
.brand__word{display:none;font-weight:700;font-size:.86rem;line-height:1.18;letter-spacing:-.01em}
.brand__word em{display:block;font-style:normal;font-weight:500;font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tx-3);margin-top:2px}
@media(min-width:560px){.brand__word{display:block}}

.pill{display:none;gap:.15rem;padding:.35rem;border-radius:999px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 6px 24px -14px rgba(21,24,26,.4)}
@media(min-width:1024px){.pill{display:flex}}
.pill a{padding:.55rem 1.05rem;border-radius:999px;font-size:.86rem;font-weight:500;
  text-decoration:none;color:var(--tx-2);transition:.28s var(--ease);white-space:nowrap}
.pill a:hover{color:var(--tx);background:rgba(255,255,255,.75)}
.pill a.is-on{color:var(--tx);background:#fff;box-shadow:0 2px 10px -4px rgba(21,24,26,.28)}

.hdr__end{display:flex;align-items:center;gap:.6rem;flex:none}

.burger{display:grid;place-content:center;gap:5px;width:42px;height:42px;padding:0;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.55);cursor:pointer}
@media(min-width:1024px){.burger{display:none}}
.burger span{display:block;width:17px;height:1.6px;background:var(--tx);border-radius:2px;transition:.3s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

.drawer[hidden]{display:none}
.drawer{position:fixed;inset:0;z-index:95;display:grid;align-content:center;gap:.4rem;
  padding:var(--gut);background:color-mix(in srgb,var(--wash) 97%,transparent);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.drawer a{font-family:var(--display);font-size:clamp(1.9rem,7vw,2.7rem);font-weight:400;
  letter-spacing:-.02em;text-decoration:none;padding:.32rem 0;border-bottom:1px solid var(--line-2)}
.drawer a:last-child{border-bottom:0}

/* ── hero ──────────────────────────────────────────────────── */
/* An inset card, not a full bleed: a little of the page shows all
   the way around the picture. The header floats on top of it rather
   than sitting above it, so the slider reads as the top of the page.
   --pad is that margin; --deck is how far the fact cards ride up
   over the bottom edge. */
.hero{--pad:clamp(5px,.55vw,10px);--deck:clamp(3rem,5vw,4.5rem);
  padding:var(--pad) var(--pad) 0;position:relative}
.hero__frame{position:relative;isolation:isolate;overflow:hidden;
  background:#16201C;
  border-radius:clamp(14px,1.5vw,22px);
  min-height:calc(100vh - var(--pad));min-height:calc(100svh - var(--pad));
  display:flex;align-items:flex-end;
  box-shadow:0 30px 80px -52px rgba(21,24,26,.55)}
/* painted underlay: reads as a hazy himalayan dawn even if the photo never loads */
.hero__art{position:absolute;inset:0;z-index:0;border-radius:inherit;
  background:
    radial-gradient(90% 60% at 78% 8%,rgba(247,195,37,.34),transparent 62%),
    radial-gradient(70% 55% at 18% 22%,rgba(240,135,60,.22),transparent 65%),
    linear-gradient(178deg,#5A6A72 0%,#3E4C52 34%,#2A3A38 68%,#1B2723 100%)}
.hero__img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease)}
.hero__img.is-in{opacity:.92}
.hero__veil{position:absolute;inset:0;z-index:2;border-radius:inherit;
  background:
    /* the headline sits bottom-left, so give that corner real ground */
    linear-gradient(105deg,rgba(12,17,19,.84) 0%,rgba(12,17,19,.58) 34%,rgba(12,17,19,.12) 62%,transparent 82%),
    linear-gradient(to top,rgba(12,17,19,.72) 0%,rgba(12,17,19,.30) 28%,rgba(12,17,19,.04) 54%,rgba(12,17,19,.26) 84%,rgba(12,17,19,.50) 100%)}

.hero__body{position:relative;z-index:3;color:var(--on-dark);
  width:min(100% - (var(--gut) * 2),var(--max));margin-inline:auto;
  padding:0 0 calc(var(--deck) + clamp(3.5rem,7vh,5.5rem))}
.hero__body .eyebrow{color:rgba(239,237,232,.72)}
.hero h1{color:#fff;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero h1 em{color:var(--flame-1)}
.hero__sub{max-width:44ch;margin:clamp(1.1rem,2vw,1.6rem) 0 0;
  font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.55;color:rgba(239,237,232,.88)}


/* floating facts — about the country, not the company */
.facts{list-style:none;margin:0;padding:0 var(--gut);display:grid;gap:.8rem;
  grid-template-columns:repeat(2,1fr);
  width:min(100%,var(--max));margin-inline:auto;
  margin-top:calc(var(--deck) * -1);position:relative;z-index:4}
@media(min-width:900px){.facts{grid-template-columns:repeat(4,1fr);gap:1rem}}
/* ── the four fact cards ──────────────────────────────────────
   These are facts, not links, so they do not lift or pretend to be
   pressable. Instead the glass clears, a flame hairline draws across
   the top, and the caption gives way to a longer one: attention is
   rewarded with more substance rather than with a shadow.
   Both captions share one grid cell, so the card cannot change
   height and the row never jumps.                                */
.fact{position:relative;isolation:isolate;overflow:hidden;
  display:grid;gap:.6rem;align-content:start;
  padding:clamp(1.1rem,2vw,1.7rem);
  border-radius:16px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 18px 44px -28px rgba(21,24,26,.5);
  transition:background .45s var(--ease),border-color .45s var(--ease),
             box-shadow .45s var(--ease)}

/* real glass catches the light along one edge */
.fact::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  pointer-events:none;opacity:.75;
  background:linear-gradient(158deg,rgba(255,255,255,.9),rgba(255,255,255,0) 46%)}

.fact__edge{position:absolute;top:0;left:0;width:0;height:2px;
  background:var(--flame);border-radius:0 2px 2px 0;
  transition:width .6s var(--ease)}

.fact__n{font-family:var(--display);font-weight:400;
  font-size:clamp(1.8rem,3.2vw,2.55rem);line-height:1;letter-spacing:-.03em;
  font-variation-settings:"SOFT" 0,"WONK" 1;
  transition:transform .45s var(--ease)}
.fact__n i{font-style:normal;font-size:.44em;margin-left:.12em;color:var(--kemar);
  transition:color .45s var(--ease)}

.fact__text{display:grid}
.fact__k,.fact__more{grid-area:1/1;font-size:.79rem;line-height:1.4;text-wrap:balance;
  transition:opacity .42s var(--ease),transform .42s var(--ease)}
.fact__k{color:var(--tx-3)}
.fact__more{color:var(--tx-2);opacity:0;transform:translateY(7px)}

@media(hover:hover){
  .fact:hover{background:rgba(255,255,255,.95);border-color:#fff;
    box-shadow:0 28px 62px -32px rgba(21,24,26,.55)}
  .fact:hover .fact__edge{width:100%}
  .fact:hover .fact__n{transform:translateY(-2px)}
  .fact:hover .fact__n i{color:var(--flame-ink)}
  .fact:hover .fact__k{opacity:0;transform:translateY(-7px)}
  .fact:hover .fact__more{opacity:1;transform:none}
}

/* Touch has no hover, so the longer caption would never be reachable.
   Drop it there and keep the short one, which suits a narrow card. */
@media(hover:none){
  .fact__more{display:none}
}

/* ── sections ──────────────────────────────────────────────── */
.s{padding-block:var(--sec);position:relative}
/* The light sections all sit on the body ground, so no section
   paints its own. A hairline marks each seam instead: quieter than
   a tonal block, and it never looks like a mismatch. */
.s + .s{border-top:1px solid var(--line-2)}
.s.s--fire,.s--fire + .s{border-top:0}

.s--fire{background:var(--pine);color:var(--on-dark)}
.s--fire h2{color:#fff}
.s--fire h2 em{color:var(--flame-1)}
.s--fire .eyebrow{color:var(--on-dark-2)}
.s--fire .lead,.s--fire .prose p{color:rgba(239,237,232,.8)}

/* the kingdom */
.band{margin-top:clamp(3rem,6vw,5.5rem)}
.band__fig{margin:0}
.band__fig img{width:100%;border-radius:var(--r);aspect-ratio:16/8;object-fit:cover}
.band__fig figcaption{margin-top:.9rem;font-size:.82rem;color:var(--tx-3)}

/* ── journeys, as bespoke editorial package cards ────────────
   Enhanced design: Duration badge, altitude accent, route,
   handcrafted traveler perception micro-quote, and glass panel. */
.pk__head{display:grid;gap:clamp(1rem,2.5vw,2rem)}
@media(min-width:860px){
  .pk__head{grid-template-columns:1.2fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:end}
}
.pk__head .lead{margin:0;max-width:52ch}

.pks{list-style:none;margin:clamp(2.4rem,4.5vw,3.6rem) 0 0;padding:0;
  display:grid;gap:clamp(1.2rem,2vw,1.8rem);grid-template-columns:1fr}
@media(min-width:640px){.pks{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.pks{grid-template-columns:repeat(3,1fr)}}
.pks > li{min-width:0}

.pk{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;isolation:isolate;
  border-radius:22px;background:#141D1A;text-decoration:none;
  aspect-ratio:3/4.2;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 48px -24px rgba(18,24,22,.6);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease)}
.pk__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;
  transition:transform 1.2s var(--ease);z-index:0}
.pk__grad{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(14,20,18,.94) 0%,rgba(14,20,18,.62) 38%,
    rgba(14,20,18,.12) 68%,rgba(14,20,18,.45) 100%);
  opacity:.92;transition:opacity .5s var(--ease)}

/* badges top row */
.pk__topbar{position:absolute;top:clamp(.8rem,1.4vw,1.2rem);left:clamp(.8rem,1.4vw,1.2rem);
  right:clamp(.8rem,1.4vw,1.2rem);z-index:3;display:flex;justify-content:space-between;align-items:center}
.pk__days{padding:.32rem .8rem;border-radius:999px;
  font-size:.72rem;font-weight:700;color:#fff;letter-spacing:.04em;
  background:rgba(20,28,25,.65);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
.pk__alt-tag{font-size:.68rem;font-weight:600;color:var(--flame-1);
  padding:.32rem .75rem;border-radius:999px;background:rgba(20,28,25,.65);
  border:1px solid rgba(247,195,37,.25);backdrop-filter:blur(16px)}

/* the bespoke glass editorial panel */
.pk__panel{position:relative;z-index:3;margin:clamp(.75rem,1.4vw,1.1rem);
  display:grid;gap:.5rem;padding:clamp(1rem,1.6vw,1.35rem);border-radius:16px;
  background:rgba(20,28,25,.75);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 12px 32px -16px rgba(0,0,0,.5);
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)}
.pk__where{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--flame-1);display:flex;align-items:center;gap:.4rem}
.pk__where::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--flame-1)}
.pk__row{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.pk__n{font-family:var(--display);font-weight:400;color:#fff;
  font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.15;letter-spacing:-.015em;
  font-variation-settings:"SOFT" 0,"WONK" 1}
.pk__kind{flex:none;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(239,237,232,.75)}

/* editorial perception quote from travellers */
.pk__quote{margin:0;font-size:.84rem;line-height:1.55;color:rgba(239,237,232,.88);
  font-family:var(--sans);font-style:italic;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;border-top:1px solid rgba(255,255,255,.1);
  padding-top:.5rem;transition:color .3s var(--ease)}

.pk:hover,.pk:focus-visible{transform:translateY(-6px);
  border-color:rgba(247,195,37,.45);
  box-shadow:0 32px 70px -28px rgba(18,24,22,.75)}
.pk:hover .pk__img,.pk:focus-visible .pk__img{transform:scale(1.06)}
.pk:hover .pk__grad,.pk:focus-visible .pk__grad{opacity:.98}
.pk:hover .pk__panel,.pk:focus-visible .pk__panel{background:rgba(20,28,25,.88);
  border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
.pk:hover .pk__quote{color:#fff}

.pk__more{margin:clamp(2.4rem,4.5vw,3.6rem) 0 0;text-align:center}

@media(prefers-reduced-motion:reduce){
  .pk:hover,.pk:focus-visible{transform:none}
  .pk:hover .pk__img,.pk:focus-visible .pk__img{transform:none}
}

/* festivals */
.cal{margin-top:clamp(3rem,6vw,5rem);padding:clamp(1.6rem,3.4vw,3rem);
  border-radius:var(--r);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11)}
.cal__h{margin:0 0 1.8rem;color:#fff}
.cal__list{margin:0;display:grid;gap:0}
.cal__list > div{display:grid;gap:.35rem;padding:1.05rem 0;border-top:1px solid rgba(255,255,255,.12)}
@media(min-width:760px){.cal__list > div{grid-template-columns:minmax(0,15rem) 1fr;gap:2rem;align-items:baseline}}
.cal__list > div:first-child{border-top:0;padding-top:0}
.cal__list dt{font-family:var(--display);font-size:1.14rem;font-weight:400;color:#fff;
  font-variation-settings:"SOFT" 0,"WONK" 1}
.cal__list dd{margin:0;color:rgba(239,237,232,.72);font-size:.94rem;
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:baseline}
.cal__list dd span{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--flame-1);flex:none;min-width:5.4rem}
.cal__note{margin:1.6rem 0 0;font-size:.79rem;color:var(--on-dark-2)}

/* where you stay */
.stays{list-style:none;margin:clamp(2.6rem,5vw,4rem) 0 0;padding:0;display:grid}
.stay{display:grid;gap:.4rem;padding:1.5rem 0;border-top:1px solid var(--line-2);
  transition:.3s var(--ease)}
@media(min-width:860px){.stay{grid-template-columns:minmax(0,16rem) minmax(0,14rem) 1fr;
  gap:2rem;align-items:baseline;padding:1.6rem .9rem}}
.stay:last-child{border-bottom:1px solid var(--line-2)}
.stay:hover{background:rgba(255,255,255,.6)}
.stay__n{font-family:var(--display);font-size:1.24rem;letter-spacing:-.015em;
  font-variation-settings:"SOFT" 0,"WONK" 1}
.stay__w{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-3)}
.stay__d{color:var(--tx-2);font-size:.95rem}
.stay--alt .stay__n{color:var(--kemar);font-style:italic}

/* plan */
.plan{display:grid;gap:clamp(2.5rem,5vw,4rem);margin-top:clamp(2.8rem,5vw,4rem)}
@media(min-width:980px){.plan{grid-template-columns:1fr minmax(0,26rem);gap:clamp(3rem,6vw,5.5rem);align-items:start}}
.plan__col .h3{margin:0 0 1.1rem}
.plan__col .h3 + .h3,.seasons + .h3{margin-top:2.8rem}

.seasons{width:100%;border-collapse:collapse;font-size:.94rem}
.seasons th,.seasons td{text-align:left;padding:.85rem .8rem .85rem 0;border-top:1px solid var(--line-2);
  vertical-align:top}
.seasons thead th{border-top:0;padding-top:0;font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx-3)}
.seasons tbody th{font-weight:600;white-space:nowrap;padding-right:1.6rem;color:var(--kemar)}
.seasons td{color:var(--tx-2)}

.faq{display:grid}
.faq details{border-top:1px solid var(--line-2)}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:1.05rem 2rem 1.05rem 0;position:relative;
  font-weight:600;font-size:.99rem;transition:color .25s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.35rem;top:1.42rem;width:11px;height:11px;
  border-right:1.8px solid var(--tx-3);border-bottom:1.8px solid var(--tx-3);
  transform:rotate(45deg);transition:.3s var(--ease)}
.faq details[open] summary{color:var(--kemar)}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--kemar)}
.faq p{margin:0 0 1.2rem;color:var(--tx-2);font-size:.94rem;max-width:60ch}

/* form */
.form{padding:clamp(1.5rem,3vw,2.2rem);border-radius:var(--r);
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 26px 60px -40px rgba(21,24,26,.55);display:grid;gap:1rem;
  position:sticky;top:6.5rem}
@media(max-width:979px){.form{position:static}}
.form .h3{margin:0}
.form__row{display:grid;gap:1rem}
@media(min-width:460px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.34rem}
.field label{font-size:.71rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.field input,.field select,.field textarea{width:100%;padding:.72rem .9rem;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.85);font-size:.94rem;
  transition:.25s var(--ease);resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--kemar);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--kemar) 12%,transparent)}
.field input::placeholder,.field textarea::placeholder{color:var(--tx-3)}
.field input[aria-invalid="true"]{border-color:var(--flame-3);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--flame-3) 13%,transparent)}
.form__fine{margin:0;font-size:.78rem;color:var(--tx-3);line-height:1.45}
.form__msg{margin:0;font-size:.88rem;font-weight:600;color:var(--kemar);min-height:1.2em}

/* ── footer ────────────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--on-dark);padding-block:0 clamp(2rem,4vw,3rem)}
/* the one place the five prayer-flag colours appear, in the order
   they are strung on a darchen: blue, white, red, green, yellow */
.flags{display:flex;height:4px}
.flags i{flex:1}
.flags i:nth-child(1){background:#2E5C9A}
.flags i:nth-child(2){background:#F2F0EA}
.flags i:nth-child(3){background:#C0392B}
.flags i:nth-child(4){background:#3F7A4E}
.flags i:nth-child(5){background:#E8B22C}

.foot__grid{display:grid;gap:2.4rem;padding-top:clamp(3rem,6vw,4.5rem)}
@media(min-width:720px){.foot__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.foot__grid{grid-template-columns:1.6fr repeat(3,1fr);gap:3rem}}
.foot__word{font-family:var(--display);font-size:1.35rem;margin:0 0 .7rem;color:#fff;
  font-variation-settings:"SOFT" 0,"WONK" 1}
.foot__blurb{margin:0;color:var(--on-dark-2);font-size:.92rem;max-width:34ch}
.foot__h{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-dark-2);margin:0 0 1.05rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.foot li{font-size:.9rem;color:var(--on-dark-2);word-break:break-word}
.foot a{text-decoration:none;color:var(--on-dark-2);transition:color .25s var(--ease)}
.foot a:hover{color:var(--flame-1)}
.tbd{opacity:.55}
.foot__end{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,3.8rem);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1)}
.foot__end p{margin:0;font-size:.79rem;color:var(--on-dark-2)}
.foot__end p:last-child{display:flex;gap:1.4rem}

/* ── reveal ────────────────────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(20px)}
.js .rv.is-in{opacity:1;transform:none;
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:calc(var(--d,0) * 75ms)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  .hero__img{opacity:.92}
  html{scroll-behavior:auto}
}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ══════════════════════════════════════════════════════════════
   MULTI-PAGE NAVIGATION
   The pill keeps the glass look; dropdown panels hang beneath it.
   ══════════════════════════════════════════════════════════════ */
.pill{position:relative}
.pill__link,.nav-top{padding:.55rem .95rem;border-radius:999px;font-size:.85rem;font-weight:500;
  text-decoration:none;color:var(--tx-2);background:none;border:0;cursor:pointer;
  transition:.25s var(--ease);white-space:nowrap;font-family:var(--sans)}
.pill__link:hover,.nav-top:hover{color:var(--tx);background:rgba(255,255,255,.75)}
.pill__link.is-on{color:var(--tx);background:#fff;box-shadow:0 2px 10px -4px rgba(21,24,26,.28)}

.nav-item{position:relative}
.nav-top{display:inline-flex;align-items:center;gap:.34rem}
.nav-top::after{content:"";width:5px;height:5px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-1px);
  transition:transform .28s var(--ease);opacity:.65}
.nav-top[aria-expanded="true"]{color:var(--tx);background:#fff;
  box-shadow:0 2px 10px -4px rgba(21,24,26,.28)}
.nav-top[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-1px);opacity:1}

.panel[hidden]{display:none}
.panel{position:absolute;top:calc(100% + .7rem);z-index:60;
  max-width:calc(100vw - 1.5rem);
  padding:1.6rem 1.75rem;border-radius:18px;
  /* nearly opaque: a menu that lets the hero headline read
     through it is a menu nobody can scan */
  background:rgba(252,252,251,.985);border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
  box-shadow:0 26px 60px -30px rgba(21,24,26,.45);
  animation:panelIn .26s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.panel{animation:none}}
.panel--one{left:50%;translate:-50% 0;min-width:13rem}
.panel--two{left:50%;translate:-50% 0;width:min(28rem,calc(100vw - 3rem))}
/* `columns` is ignored on a grid container, so opt this list out */
.panel--two .panel__list{display:block;columns:2;column-gap:2rem}
/* The four-column panels use the same vertical anchor as every other
   dropdown, so they can never drift out of line. They are wider than
   the button that opens them, so only their horizontal offset is
   computed in script, to centre them on the page. */
.panel--wide{left:0;width:min(64rem,calc(100vw - 3rem))}
.panel__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem 2.4rem}
.panel__col{min-width:0}
.panel__h{display:block;font-family:var(--display);font-size:1.02rem;letter-spacing:-.01em;
  text-decoration:none;color:var(--tx);padding-bottom:.6rem;margin-bottom:.55rem;
  border-bottom:1px solid var(--line-2);font-variation-settings:"SOFT" 0,"WONK" 1}
.panel__h:hover{color:var(--kemar)}
.panel__list{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.panel__list li{break-inside:avoid}
.panel__list a{display:block;padding:.4rem .55rem;margin-left:-.55rem;border-radius:8px;
  font-size:.87rem;color:var(--tx-2);text-decoration:none;transition:.2s var(--ease)}
.panel__list a:hover{color:var(--kemar);background:rgba(140,47,38,.06)}
.panel__note{margin:0;font-size:.82rem;line-height:1.5;color:var(--tx-3)}

/* ── mobile drawer, now an accordion ─────────────────────────── */
.drawer{align-content:start;overflow-y:auto;padding-top:5.5rem;padding-bottom:3rem}
.drawer__nav{display:grid;gap:.1rem;width:min(100%,34rem);margin-inline:auto}
.drawer__top{font-family:var(--display);font-size:1.5rem;text-decoration:none;
  padding:.75rem 0;border-bottom:1px solid var(--line-2);
  font-variation-settings:"SOFT" 0,"WONK" 1}
.acc{border-bottom:1px solid var(--line-2)}
.acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:1.5rem;letter-spacing:-.02em;color:var(--tx);
  font-variation-settings:"SOFT" 0,"WONK" 1}
.acc__btn::after{content:"";width:9px;height:9px;flex:none;
  border-right:1.6px solid var(--tx-3);border-bottom:1.6px solid var(--tx-3);
  transform:rotate(45deg);transition:transform .28s var(--ease)}
.acc__btn[aria-expanded="true"]{color:var(--kemar)}
.acc__btn[aria-expanded="true"]::after{transform:rotate(-135deg);border-color:var(--kemar)}
.acc__panel[hidden]{display:none}
.acc__panel{display:grid;gap:.05rem;padding:0 0 .9rem}
.acc__panel a{padding:.42rem 0;font-size:.97rem;color:var(--tx-2);text-decoration:none}
.acc__panel a:hover{color:var(--kemar)}
.acc__h{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tx-3);margin-top:.85rem}
.acc__h:first-child{margin-top:.2rem}
.drawer__cta{margin-top:1.6rem}

/* ══════════════════════════════════════════════════════════════
   HERO SLIDER
   ══════════════════════════════════════════════════════════════ */
.slides{position:absolute;inset:0;z-index:1;
  border-radius:inherit;overflow:hidden}
.slide{position:absolute;inset:0;margin:0;opacity:0;border-radius:inherit;
  overflow:hidden;transition:opacity 1.2s var(--ease);pointer-events:none}
.slide.is-on{opacity:.94;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:cover;border-radius:inherit;
  /* a slow drift keeps a still photograph from feeling dead */
  animation:drift 15s linear both;transform-origin:center}
.slide.is-on img{animation-play-state:running}
@keyframes drift{from{scale:1.005}to{scale:1.075}}

/* the headline swaps with its slide */
.lines{position:relative;display:grid}
.line{grid-area:1/1;margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(2.9rem,7.4vw,6.1rem);line-height:.97;letter-spacing:-.022em;
  color:#fff;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.32);
  font-variation-settings:"SOFT" 0,"WONK" 1;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.line em{font-style:italic;font-weight:300;color:var(--flame-1);
  font-variation-settings:"SOFT" 8,"WONK" 1}
.line.is-on{opacity:1;transform:none;pointer-events:auto}

/* named slide controls */
.dots{position:absolute;right:clamp(1.2rem,3vw,2.6rem);bottom:calc(var(--deck) + clamp(1.4rem,3vh,2.2rem));
  z-index:5;display:none;flex-direction:column;align-items:flex-end;gap:.15rem}
@media(min-width:900px){.dots{display:flex}}
.dot{display:flex;align-items:center;gap:.75rem;padding:.4rem .1rem;background:none;border:0;
  cursor:pointer;color:rgba(239,237,232,.6);font-family:var(--sans);font-size:.74rem;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;transition:.3s var(--ease);
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
.dot span{opacity:0;translate:8px 0;transition:.35s var(--ease)}
.dots:hover .dot span,.dot:focus-visible span,.dot[aria-selected="true"] span{opacity:1;translate:0 0}
.dot i{position:relative;display:block;width:30px;height:2px;border-radius:2px;flex:none;
  background:rgba(255,255,255,.42);overflow:hidden;
  box-shadow:0 1px 6px rgba(0,0,0,.45)}
.dot i::after{content:"";position:absolute;inset:0;width:0;background:var(--flame);
  border-radius:2px;transition:none}
.dot:hover{color:#fff}
.dot[aria-selected="true"]{color:#fff}
.dot[aria-selected="true"] i{width:52px}
.dot[aria-selected="true"] i::after{width:100%;transition:width 7s linear}
/* a paused slider must not look like it is still counting down */
.slider-paused .dot[aria-selected="true"] i::after{width:0;transition:none}

.hero__pause{position:absolute;left:clamp(1.2rem,3vw,2.6rem);bottom:calc(var(--deck) + clamp(1.4rem,3vh,2.2rem));
  z-index:5;display:none;width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  align-items:center;justify-content:center;transition:.25s var(--ease)}
@media(min-width:900px){.hero__pause{display:flex}}
.hero__pause:hover{background:rgba(255,255,255,.22)}
.hero__pause span{display:block;width:8px;height:9px;
  border-left:2.5px solid #fff;border-right:2.5px solid #fff}
.hero__pause[aria-pressed="true"] span{width:0;height:0;border:0;
  border-left:9px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;
  margin-left:2px}

@media(prefers-reduced-motion:reduce){
  .slide img{animation:none}
  .dot[aria-selected="true"] i::after{transition:none;width:100%}
  .line{transition:none}
}


/* ══════════════════════════════════════════════════════════════
   HEADER OVER THE HERO
   On a page that opens with a full-bleed image the header floats
   on the photograph: no bar, just the glass pill and the mark.
   `has-hero` is set in the markup, not by script, so the light
   treatment is right on the very first paint and never flashes.
   Once you scroll past the image, `is-stuck` restores the light
   header with dark type.
   ══════════════════════════════════════════════════════════════ */
body.has-hero .hdr:not(.is-stuck){background:none;box-shadow:none}

/* wordmark */
body.has-hero .hdr:not(.is-stuck) .brand__word{color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.45)}
body.has-hero .hdr:not(.is-stuck) .brand__word em{color:rgba(255,255,255,.72)}

/* the pill, now smoked glass rather than frosted white */
body.has-hero .hdr:not(.is-stuck) .pill{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);
  box-shadow:0 8px 30px -16px rgba(0,0,0,.6)}
body.has-hero .hdr:not(.is-stuck) .pill__link,
body.has-hero .hdr:not(.is-stuck) .nav-top{color:rgba(255,255,255,.86)}
body.has-hero .hdr:not(.is-stuck) .pill__link:hover,
body.has-hero .hdr:not(.is-stuck) .nav-top:hover{color:#fff;background:rgba(255,255,255,.16)}
/* an open menu keeps the white chip: the panel below it is light,
   so the trigger has to belong to the panel, not to the photo */
body.has-hero .hdr:not(.is-stuck) .nav-top[aria-expanded="true"]{color:var(--tx);background:#fff}


/* Enquire inverts: white on the photograph reads as the one thing to press */
body.has-hero .hdr:not(.is-stuck) .btn--solid{background:#fff;color:var(--ink)}
body.has-hero .hdr:not(.is-stuck) .btn--solid:hover{color:#1A1206}

body.has-hero .hdr:not(.is-stuck) .burger{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
body.has-hero .hdr:not(.is-stuck) .burger span{background:#fff}

/* The rail guides you through the sections, so it has no job while
   the picture is still on screen. It fades in once you leave it. */
body.has-hero .rail{opacity:0;pointer-events:none;transition:opacity .55s var(--ease)}
body.has-hero.is-scrolled .rail{opacity:1;pointer-events:auto}

/* short screens: let the hero grow rather than crushing the strip */
@media(max-height:640px){
  .hero__frame{min-height:auto;padding-top:7rem}
  .hero__body{padding-top:2rem}
}


/* ══════════════════════════════════════════════════════════════
   HERO BUTTONS
   Ghost first, solid second: the browsing action leads, and the
   white chip is the one that looks pressable at a glance.
   ══════════════════════════════════════════════════════════════ */
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;
  margin-top:clamp(1.7rem,3.2vw,2.5rem)}
.hero__cta .btn{padding:.92rem 1.75rem}

.btn--ghost{color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%)}
.btn--ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;
  transform:translateY(-2px);box-shadow:0 12px 30px -16px rgba(0,0,0,.7)}

.btn--light{color:var(--ink);background:#fff;border:1px solid #fff}
.btn--light:hover{color:#fff;background:transparent;
  transform:translateY(-2px);box-shadow:0 12px 30px -16px rgba(0,0,0,.7)}

@media(max-width:420px){
  .hero__cta{gap:.55rem}
  .hero__cta .btn{flex:1 1 100%;padding-inline:1.2rem}
}


/* ══════════════════════════════════════════════════════════════
   WHO WE ARE
   Film left, argument right, promises as a strip underneath. The
   signature is the play control: a ring of type turning slowly
   around a glass disc, the only moving thing in the section.
   ══════════════════════════════════════════════════════════════ */
.about{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center}
@media(min-width:940px){
  .about{grid-template-columns:1.15fr 1fr;gap:clamp(2.5rem,5vw,4.5rem)}
}
.about__body{display:grid;gap:1rem;align-content:center}
.about__body h2{margin:0;text-wrap:balance}
.about__body .lead{margin:0;max-width:44ch}
.about__p{margin:0;color:var(--tx-2);font-size:.97rem;max-width:46ch}
.about__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin-top:.6rem}

/* ── the film ─────────────────────────────────────────────── */
.film{position:relative;isolation:isolate;overflow:hidden;margin:0;
  border-radius:clamp(14px,1.5vw,22px);background:#16201C;
  box-shadow:0 30px 70px -46px rgba(21,24,26,.58)}
.film__img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:inherit;transition:transform 1.2s var(--ease)}
.film__veil{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(42% 62% at 50% 50%,rgba(10,14,16,.44),transparent 72%),
    linear-gradient(to top,rgba(10,14,16,.6),rgba(10,14,16,.04) 58%,rgba(10,14,16,.2));
  transition:opacity .6s var(--ease)}
.film:hover .film__img{transform:scale(1.03)}

/* ── the play control ─────────────────────────────────────── */
.play{position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:3;
  width:clamp(98px,11vw,132px);aspect-ratio:1;padding:0;border:0;background:none;
  cursor:pointer;display:grid;place-items:center;border-radius:50%;
  transition:transform .5s var(--ease)}
.play:hover{transform:scale(1.06)}
.play:active{transform:scale(.98)}
.play__ring{position:absolute;inset:0;width:100%;height:100%;
  animation:playSpin 26s linear infinite}
.play__ring text{fill:#fff;font-family:var(--sans);
  font-size:10.5px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;
  paint-order:stroke;stroke:rgba(0,0,0,.42);stroke-width:2.4px;stroke-linejoin:round}
@keyframes playSpin{to{rotate:360deg}}
.play:hover .play__ring{animation-duration:11s}
.play__disc{position:relative;display:grid;place-items:center;
  width:47%;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 10px 34px -14px rgba(0,0,0,.65);
  transition:background .45s var(--ease),border-color .45s var(--ease)}
.play:hover .play__disc{background:rgba(255,255,255,.94);border-color:#fff}
.play__tri{width:0;height:0;margin-left:3px;
  border-left:14px solid #fff;
  border-top:9px solid transparent;border-bottom:9px solid transparent;
  transition:border-left-color .45s var(--ease)}
.play:hover .play__tri{border-left-color:var(--ink)}

/* the licence, on dark glass because it lands on snow and cloud */
.film__badge{position:absolute;left:clamp(.8rem,1.8vw,1.3rem);bottom:clamp(.8rem,1.8vw,1.3rem);
  z-index:3;margin:0;display:grid;gap:.1rem;padding:.62rem .95rem;border-radius:11px;
  background:rgba(14,19,21,.6);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.film__badge span{font-size:.6rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:#fff}
.film__badge b{font-family:var(--display);font-weight:400;font-size:.96rem;color:#fff;
  letter-spacing:-.01em;font-variation-settings:"SOFT" 0,"WONK" 1}
.film__frame{position:absolute;inset:0;width:100%;height:100%;border:0;
  border-radius:inherit;z-index:6}
.film.is-playing .play,
.film.is-playing .film__veil,
.film.is-playing .film__badge{opacity:0;pointer-events:none}

/* ── eight promises, as a strip ───────────────────────────── */
.promise{margin-top:clamp(2.4rem,5vw,3.6rem);
  padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--line-2)}
.promise__h{margin:0 0 1.3rem;font-family:var(--sans);font-size:.68rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--tx-3)}
.promise__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem 2rem;
  grid-template-columns:1fr 1fr}
@media(min-width:760px){.promise__list{grid-template-columns:repeat(4,1fr)}}
.promise__list li{position:relative;padding-left:1.5rem;font-size:.86rem;line-height:1.45;
  color:var(--tx-2);text-wrap:balance}
.promise__list li::before{content:"";position:absolute;left:0;top:.62em;
  width:12px;height:2px;border-radius:2px;background:var(--flame)}

@media(prefers-reduced-motion:reduce){
  .play__ring{animation:none}
  .film:hover .film__img{transform:none}
}

/* ══════════════════════════════════════════════════════════════
   WHAT YOU CAN DO — six tiles
   A twelve-column grid where the wide column swaps sides each row:
   7+5, then 5+7, then 7+5. Rows have a fixed height, so the wide
   tile is a long landscape and the narrow one nearly square, both
   from the same source image. That alternation is what stops the
   block reading as a table.
   ══════════════════════════════════════════════════════════════ */
.exp__head{display:grid;gap:clamp(1rem,2.5vw,2rem)}
@media(min-width:860px){
  .exp__head{grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:end}
}
.exp__head .lead{margin:0;max-width:46ch}

.tiles{list-style:none;margin:clamp(2.2rem,4.5vw,3.4rem) 0 0;padding:0;
  display:grid;gap:clamp(.8rem,1.4vw,1.1rem);grid-template-columns:1fr}
.tiles > li{min-width:0}

@media(min-width:620px){.tiles{grid-template-columns:1fr 1fr}}
@media(min-width:940px){
  .tiles{grid-template-columns:repeat(12,1fr);
    grid-auto-rows:clamp(230px,23vw,330px)}
  .tiles > li:nth-child(1),
  .tiles > li:nth-child(4),
  .tiles > li:nth-child(5){grid-column:span 7}
  .tiles > li:nth-child(2),
  .tiles > li:nth-child(3),
  .tiles > li:nth-child(6){grid-column:span 5}
}

.tile{position:relative;display:block;height:100%;overflow:hidden;isolation:isolate;
  border-radius:16px;background:#16201C;text-decoration:none;
  box-shadow:0 16px 40px -26px rgba(21,24,26,.5);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;
  transition:transform 1.1s var(--ease)}
/* below the twelve-column grid the rows have no fixed height, so the
   image supplies one */
@media(max-width:939px){.tile img{aspect-ratio:4/3}}
@media(max-width:619px){.tile img{aspect-ratio:5/4}}

.tile__grad{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to top,rgba(10,14,16,.88) 0%,rgba(10,14,16,.44) 30%,
    rgba(10,14,16,.04) 58%,rgba(10,14,16,.14) 100%);
  opacity:.9;transition:opacity .5s var(--ease)}

.tile__body{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:.18rem;
  padding:clamp(1rem,1.8vw,1.4rem)}
.tile__where{font-size:.79rem;line-height:1.3;color:rgba(255,255,255,.85)}
.tile__n{font-family:var(--display);font-weight:400;color:#fff;
  font-size:clamp(1.18rem,1.6vw,1.42rem);line-height:1.15;letter-spacing:-.015em;
  font-variation-settings:"SOFT" 0,"WONK" 1;text-wrap:balance}
/* the brand mark appears on hover, so the resting card stays quiet */
.tile__n::after{content:"";display:block;width:0;height:2px;border-radius:2px;
  background:var(--flame);margin-top:.55rem;
  transition:width .5s var(--ease)}

.tile:hover,.tile:focus-visible{transform:translateY(-4px);
  box-shadow:0 26px 56px -28px rgba(21,24,26,.6)}
.tile:hover img,.tile:focus-visible img{transform:scale(1.05)}
.tile:hover .tile__grad,.tile:focus-visible .tile__grad{opacity:1}
.tile:hover .tile__n::after,.tile:focus-visible .tile__n::after{width:38px}

@media(prefers-reduced-motion:reduce){
  .tile:hover,.tile:focus-visible{transform:none}
  .tile:hover img,.tile:focus-visible img{transform:none}
}

/* ══════════════════════════════════════════════════════════════
   INNER PAGE HERO & COMPONENTS (Enterprise Subpages)
   ══════════════════════════════════════════════════════════════ */

/* Inner Page Hero Header */
.hero--sub {
  --pad: clamp(5px, .55vw, 10px);
  padding: calc(6.5rem + var(--pad)) var(--pad) clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
  background: var(--pine);
  color: var(--on-dark);
  overflow: hidden;
  border-radius: 0 0 clamp(16px, 2vw, 26px) clamp(16px, 2vw, 26px);
}
.hero--sub::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(70% 60% at 85% 20%, rgba(247, 195, 37, 0.18), transparent 60%),
    radial-gradient(60% 50% at 15% 80%, rgba(140, 47, 38, 0.25), transparent 70%);
  pointer-events: none;
}
.hero--sub .wrap {
  position: relative;
  z-index: 2;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  margin-bottom: 1.2rem;
}
.breadcrumb a {
  color: var(--on-dark-2);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.breadcrumb a:hover {
  color: var(--flame-1);
}
.breadcrumb span {
  opacity: 0.4;
}
.hero--sub h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}
.hero--sub h1 em {
  color: var(--flame-1);
}
.hero--sub .lead {
  color: rgba(239, 237, 232, 0.88);
  max-width: 54ch;
}

/* Timeline / Milestones (Our Story) */
.timeline {
  position: relative;
  margin-top: 3rem;
  padding-left: 2rem;
  border-left: 2px solid var(--line);
}
.timeline__item {
  position: relative;
  margin-bottom: 2.5rem;
}
.timeline__item:last-child {
  margin-bottom: 0;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-2rem - 5px);
  top: 0.3rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--flame-1);
  box-shadow: 0 0 0 4px var(--wash), 0 0 0 6px var(--flame-3);
}
.timeline__year {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--kemar);
  margin-bottom: 0.3rem;
}

/* Team Grid (Our Team) */
.team-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(1, 1fr);
  margin-top: 3rem;
}
@media(min-width: 600px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(min-width: 980px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

.team-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px -24px rgba(21, 24, 26, 0.4);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -20px rgba(21, 24, 26, 0.5);
}
.team-card__img {
  width: 100%;
  aspect-ratio: 4/4;
  object-fit: cover;
}
.team-card__body {
  padding: 1.5rem;
}
.team-card__role {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kemar);
  margin-bottom: 0.4rem;
}
.team-card__name {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--tx);
  margin-bottom: 0.6rem;
}
.team-card__bio {
  font-size: 0.92rem;
  color: var(--tx-2);
  line-height: 1.5;
}

/* Interactive Filter Bar (Tour Listing) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  border: 1px solid var(--line-2);
  width: fit-content;
}
.filter-btn {
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--tx-2);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.filter-btn:hover {
  color: var(--tx);
  background: rgba(255, 255, 255, 0.8);
}
.filter-btn.is-active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(21, 24, 26, 0.4);
}

/* Tour Overview Stats Bar (Tour Details) */
.tour-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 1.6rem 2rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  box-shadow: 0 16px 40px -26px rgba(21, 24, 26, 0.4);
  margin-top: -2.5rem;
  position: relative;
  z-index: 10;
}
@media(min-width: 768px) {
  .tour-stats { grid-template-columns: repeat(4, 1fr); }
}
.tour-stat__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: 0.2rem;
}
.tour-stat__val {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--tx);
}

/* Day-by-day Itinerary Accordion */
.itinerary-list {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
.itinerary-day {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: background 0.3s var(--ease);
}
.itinerary-day summary {
  padding: 1.25rem 1.6rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1.05rem;
}
.itinerary-day summary::-webkit-details-marker { display: none; }
.itinerary-day summary span.day-num {
  color: var(--kemar);
  font-family: var(--display);
  font-size: 1.15rem;
  margin-right: 0.8rem;
}
.itinerary-day__content {
  padding: 0 1.6rem 1.4rem;
  color: var(--tx-2);
  line-height: 1.6;
}

/* Contact Details & Info Cards (Contact Us) */
.contact-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
@media(min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.1fr; }
}
.contact-card {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 44px -28px rgba(21, 24, 26, 0.4);
}
.contact-item {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}
.contact-item:last-child { margin-bottom: 0; }
.contact-item__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--kemar) 10%, transparent);
  color: var(--kemar);
  display: grid;
  place-content: center;
  font-weight: 700;
  flex: none;
}
.contact-item__title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: 0.2rem;
}
.contact-item__val {
  font-size: 1.02rem;
  color: var(--tx);
  font-weight: 500;
}