/* ═══════════════════════════════════════════════════════════
   BOHO VAN — a solar-powered stage that drives to you
   Palette and marks taken from the brand's own key art.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ink */
  --ink:      #0B0B0C;
  --ink-2:    #111113;
  --ink-3:    #17171A;
  --ink-4:    #202024;

  /* brand — straight off the wordmark and key art */
  --amber:    #E9A02C;
  --amber-hi: #FFC15E;
  --cream:    #F1E7D6;
  --teal:     #1F7A8C;
  --mint:     #A9D6CB;
  --brick:    #BE3E28;

  /* the neon the photographs are lit with */
  --magenta:  #FF3E88;
  --cyan:     #34D2E8;
  --lime:     #7BE06B;

  --line:     rgba(241,231,214,.13);
  --line-2:   rgba(241,231,214,.07);
  --mute:     rgba(241,231,214,.62);
  --mute-2:   rgba(241,231,214,.40);

  --wrap: 1320px;
  --gut: clamp(1.25rem, 5vw, 4rem);
  --sec: clamp(4.5rem, 9vw, 8rem);

  --disp: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.65,.05,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--disp);
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.62;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--amber); color:#0B0B0C; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:fixed; top:-100px; left:1rem; z-index:200;
  background:var(--amber); color:#000; padding:.75rem 1.25rem; border-radius:99px;
  font-weight:700; text-decoration:none;
}
.skip:focus{ top:1rem; }

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

/* ── film grain ─────────────────────────────────────────── */
.grain{
  position:fixed; inset:-50%; z-index:120; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)} 80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)}
}

/* ── typography ─────────────────────────────────────────── */
.h2{
  font-size:clamp(2.05rem,1rem + 4.1vw,4.1rem);
  font-variation-settings:'wdth' 110,'wght' 800;
  line-height:.92; letter-spacing:-.035em;
  margin:.15em 0 .5em; text-transform:uppercase; text-wrap:balance;
}
.h2--xl{ font-size:clamp(2.6rem,1rem + 6.2vw,6.2rem); }
/* full-width section heads can breathe wider than in-column ones */
.sec-head .h2{ font-size:clamp(2.3rem,1rem + 5.4vw,5.2rem); }
.h2--sm{ font-size:clamp(1.9rem,1rem + 3.6vw,3.5rem); }
.sec-head .h2--sm{ font-size:clamp(1.9rem,1rem + 3.6vw,3.5rem); }
.h2 em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:-.01em; color:var(--amber);
  font-variation-settings:normal;
}
.h2 em.neon{ color:var(--magenta); text-shadow:0 0 26px rgba(255,62,136,.5); }

.eyebrow{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.22em;
  font-variation-settings:'wdth' 100,'wght' 600;
  color:var(--amber); margin:0 0 1.1rem; max-width:none;
}
.eyebrow i{ opacity:.45; font-style:normal; margin-inline:.15em; }
.eyebrow--sand{ color:#E7C79B; }
.eyebrow--neon{ color:var(--magenta); }
.eyebrow--green{ color:var(--lime); }

.lede{
  font-size:clamp(1.1rem,1rem + .6vw,1.45rem);
  line-height:1.5; color:var(--cream); max-width:46ch;
  font-variation-settings:'wdth' 100,'wght' 450;
}
p{ color:var(--mute); max-width:60ch; }
.lede{ color:rgba(241,231,214,.88); }

.sec-head{ margin-bottom:clamp(2rem,4vw,3.4rem); }
.sec-head--center{ text-align:center; }
.sec-head--center p{ margin-inline:auto; }
.sec-head__note{ font-size:.78rem; text-transform:uppercase; letter-spacing:.18em; color:var(--mute-2); }

.pull{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,1rem + 2.1vw,2.6rem);
  line-height:1.22; color:var(--amber); margin:2.5rem 0 0;
  padding-left:1.4rem; border-left:2px solid var(--amber);
}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  --bg:transparent; --fg:var(--cream); --bd:var(--line);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.85rem 1.6rem; border-radius:99px; border:1px solid var(--bd);
  background:var(--bg); color:var(--fg);
  font-size:.86rem; font-variation-settings:'wdth' 100,'wght' 650;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease), border-color .35s, color .35s;
  will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:var(--amber-hi); transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:#0B0B0C; border-color:transparent; }

.btn--amber{ --bg:var(--amber); --fg:#0B0B0C; --bd:transparent; }
.btn--ghost{ --bd:rgba(241,231,214,.28); }
.btn--lg{ padding:1.05rem 2.1rem; font-size:.9rem; }

/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  padding:1.1rem 0;
  transition:background .45s var(--ease), backdrop-filter .45s, padding .45s var(--ease), border-color .45s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(11,11,12,.82);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  padding:.65rem 0; border-bottom-color:var(--line-2);
}
.nav.is-hidden{ transform:translateY(-105%); }
.nav{ transition:transform .5s var(--ease), background .45s, padding .45s, border-color .45s; }

.nav__in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; gap:1.5rem;
}
.nav__logo{ display:block; flex:none; }
.nav__logo img{ width:clamp(110px,10vw,150px); height:auto; }

.nav__links{ display:flex; gap:clamp(.9rem,1.9vw,2rem); margin-left:auto; }
.nav__links a{
  font-size:.76rem; text-transform:uppercase; letter-spacing:.12em;
  font-variation-settings:'wdth' 100,'wght' 550;
  text-decoration:none; color:rgba(241,231,214,.72); position:relative; padding:.3rem 0;
  transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--amber); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__cta{ flex:none; padding:.7rem 1.3rem; font-size:.78rem; }

.burger{
  display:none; flex:none; margin-left:auto;
  width:46px; height:46px; border:1px solid var(--line); border-radius:50%;
  background:transparent; cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:14px; width:18px; height:1.5px; background:var(--cream);
  transition:transform .4s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:20px; }
.burger span:nth-child(2){ top:26px; }
.burger.is-on span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger.is-on span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:99; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  padding:6rem var(--gut) 3rem;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.menu.is-on{ opacity:1; pointer-events:auto; }
.menu__links{ display:flex; flex-direction:column; gap:.2rem; }
.menu__links a{
  display:flex; align-items:baseline; gap:1rem; text-decoration:none;
  font-size:clamp(1.7rem,8vw,2.6rem); font-variation-settings:'wdth' 108,'wght' 750;
  text-transform:uppercase; letter-spacing:-.02em; line-height:1.24;
  border-bottom:1px solid var(--line-2); padding:.45rem 0;
}
.menu__links a em{
  font-family:var(--serif); font-style:italic; font-size:.9rem; color:var(--amber);
  font-variation-settings:normal; text-transform:none;
}
.menu__foot{ display:flex; gap:1.5rem; flex-wrap:wrap; font-size:.85rem; color:var(--mute); }
.menu__foot a{ text-decoration:none; }

/* ── hero ───────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:9rem 0 clamp(4rem,9vw,7rem); overflow:hidden;
}
.hero__stage{ position:absolute; inset:0; z-index:0; background:#000; }
.hero__slide{
  position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity 1.6s var(--ease);
}
.hero__slide.is-on{ opacity:1; }
.hero__slide img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.06);
}
.hero__slide.is-on img{ animation:kb 11s linear forwards; }
@keyframes kb{ from{transform:scale(1.06)} to{transform:scale(1.16)} }

.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(11,11,12,.97) 2%, rgba(11,11,12,.74) 34%, rgba(11,11,12,.2) 64%, rgba(11,11,12,.55) 100%),
    radial-gradient(95% 80% at 8% 78%, rgba(11,11,12,.9), transparent 62%);
}

.hero__in{ position:relative; z-index:2; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
/* the background photograph changes, so the words carry their own contrast */
.hero__in .eyebrow,
.hero__h1,
.hero__sub{ text-shadow:0 2px 20px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35); }

.hero__h1{
  margin:0 0 1.6rem;
  font-size:clamp(2.6rem,1rem + 7vw,6.6rem);
  font-variation-settings:'wdth' 106,'wght' 740;
  line-height:.94; letter-spacing:-.038em; text-transform:uppercase;
}
.hero__h1 .line{ display:block; overflow:hidden; }
.hero__h1 .line > span{ display:block; }
.hero__h1 em{
  font-family:var(--serif); font-style:italic; font-weight:400; font-variation-settings:normal;
  text-transform:none; letter-spacing:-.015em; color:var(--amber);
}
.hero__sub{ max-width:46ch; font-size:clamp(1.02rem,.95rem + .5vw,1.28rem); color:rgba(241,231,214,.86); line-height:1.5; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem; }

.hero__meta{
  position:absolute; right:var(--gut); bottom:clamp(4rem,9vw,7rem); z-index:3;
  display:flex; align-items:center; gap:1rem;
}
.hero__place{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:rgba(241,231,214,.75);
  transition:opacity .5s;
}
.hero__dots{ display:flex; gap:.45rem; }
.hero__dots button{
  width:26px; height:2px; border:0; padding:0; cursor:pointer;
  background:rgba(241,231,214,.25); transition:background .4s;
}
.hero__dots button.is-on{ background:var(--amber); }

.hero__scroll{
  position:absolute; left:50%; bottom:1.6rem; z-index:3; transform:translateX(-50%);
  width:24px; height:38px; border:1px solid rgba(241,231,214,.3); border-radius:99px;
}
.hero__scroll span{
  position:absolute; left:50%; top:8px; width:2px; height:7px; border-radius:2px;
  background:var(--amber); animation:sc 1.9s var(--ease) infinite;
}
@keyframes sc{ 0%{transform:translate(-50%,0);opacity:0} 25%{opacity:1} 75%{transform:translate(-50%,15px);opacity:0} 100%{opacity:0} }

/* ── marquee ────────────────────────────────────────────── */
.marquee{
  overflow:hidden; border-block:1px solid var(--line-2);
  background:var(--ink-2); padding:.9rem 0;
}
.marquee__track{
  display:flex; align-items:center; gap:1.6rem; width:max-content;
  animation:mq 46s linear infinite;
}
.marquee__track--rev{ animation-direction:reverse; animation-duration:60s; }
@keyframes mq{ to{ transform:translateX(-50%); } }
.marquee span{
  font-size:clamp(1.1rem,3.6vw,2.1rem); text-transform:uppercase;
  font-variation-settings:'wdth' 108,'wght' 720; letter-spacing:-.01em;
  color:rgba(241,231,214,.9); white-space:nowrap;
}
.marquee b{ color:var(--amber); font-size:.85rem; }
.marquee--foot{ background:transparent; border-bottom:0; }
.marquee--foot span{ color:var(--amber); opacity:.5; }

/* ── stats ──────────────────────────────────────────────── */
.stats{ padding:clamp(3rem,6vw,5.5rem) 0; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,3vw,2.5rem); }
.stat{ border-top:1px solid var(--line); padding-top:1.2rem; }
.stat b{
  display:block; font-size:clamp(1.9rem,1rem + 3.4vw,4rem);
  font-variation-settings:'wdth' 108,'wght' 800; letter-spacing:-.035em; line-height:1;
  color:var(--amber); font-feature-settings:'tnum';
}
.stat--word{ font-family:var(--serif); font-style:italic; font-variation-settings:normal !important; text-transform:none; }
.stat span{
  display:block; margin-top:.5rem; font-size:.74rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--mute-2);
}

/* ── story ──────────────────────────────────────────────── */
.story{ padding:var(--sec) 0; }
.story__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.story__copy p{ margin:0 0 1.15rem; }

.story__art{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.6rem,1.4vw,1.1rem); }
.story__img{ margin:0; overflow:hidden; background:var(--ink-3); }
.story__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.story__img:hover img{ transform:scale(1.05); }
.story__img--a{ grid-column:1/7; aspect-ratio:16/10; }
.story__img--b{ grid-column:1/4; aspect-ratio:3/4; }
.story__img--c{ grid-column:4/7; aspect-ratio:3/4; margin-top:clamp(1rem,4vw,3rem); }

/* ── the unfold ─────────────────────────────────────────── */
.unfold{ padding:var(--sec) 0; background:var(--ink-2); border-block:1px solid var(--line-2); }
.unfold__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }

.unfold__stage{ position:relative; overflow:hidden; background:#000; border-radius:14px; }
.unfold__stage img{ width:100%; aspect-ratio:3/2; object-fit:cover; opacity:.94; }
.hotspots{ position:absolute; inset:0; }
.hot{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:transparent; display:grid; place-items:center;
}
.hot i{
  width:12px; height:12px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 5px rgba(233,160,44,.22), 0 0 20px rgba(233,160,44,.55);
  transition:transform .4s var(--ease), box-shadow .4s;
}
.hot::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(233,160,44,.55); animation:ping 2.6s var(--ease) infinite;
}
@keyframes ping{ 0%{transform:scale(.5);opacity:.9} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} }
.hot.is-on i{ transform:scale(1.5); box-shadow:0 0 0 7px rgba(233,160,44,.3), 0 0 30px rgba(233,160,44,.8); }
.hot:hover i{ transform:scale(1.35); }

.spec{ list-style:none; margin:0; padding:0; }
.spec__i{
  border-top:1px solid var(--line); padding:1.15rem 3rem 1.15rem .6rem;
  margin-left:-.6rem;
  opacity:.5; transition:opacity .45s var(--ease), background .35s;
  cursor:pointer; position:relative; border-radius:8px;
}
.spec__i::after{
  content:''; position:absolute; right:.9rem; top:1.55rem;
  width:13px; height:13px; opacity:.5; transition:opacity .3s;
  background:
    linear-gradient(var(--amber),var(--amber)) center/13px 1.6px no-repeat,
    linear-gradient(var(--amber),var(--amber)) center/1.6px 13px no-repeat;
  transition:transform .45s var(--ease), opacity .3s;
}
.spec__i.is-on::after{
  background:linear-gradient(var(--amber),var(--amber)) center/13px 1.6px no-repeat;
  opacity:1;
}
.spec__i:hover{ background:rgba(241,231,214,.035); opacity:.8; }
.spec__i:hover::after{ opacity:1; }
.spec__i:last-child{ border-bottom:1px solid var(--line); }
.spec__i.is-on{ opacity:1; background:rgba(233,160,44,.05); }
.spec__i h3{
  margin:0; display:flex; align-items:baseline; gap:.8rem;
  font-size:clamp(1.05rem,.95rem + .7vw,1.5rem);
  font-variation-settings:'wdth' 106,'wght' 720; letter-spacing:-.02em; text-transform:uppercase;
}
.spec__i h3 span{ font-family:var(--serif); font-style:italic; font-size:.8em; color:var(--amber); font-variation-settings:normal; text-transform:none; }
.spec__i p{
  margin:0; max-height:0; overflow:hidden; opacity:0;
  transition:max-height .55s var(--ease), opacity .4s, margin .55s var(--ease);
  font-size:.97rem;
}
.spec__i.is-on p{ max-height:14rem; opacity:1; margin-top:.6rem; }

/* ── petra ──────────────────────────────────────────────── */
.petra{ position:relative; padding:clamp(5rem,10vw,8.5rem) 0; overflow:hidden; }
.petra__bg{ position:absolute; inset:0; z-index:0; }
.petra__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; opacity:.62; }
.petra::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgba(11,11,12,.35) 26%, rgba(11,11,12,.5) 68%, var(--ink) 100%),
    linear-gradient(to right, rgba(11,11,12,.82) 0%, rgba(11,11,12,.35) 52%, rgba(11,11,12,.1) 100%);
}
.petra__in{ position:relative; z-index:2; }
.petra__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3.5rem); max-width:900px; margin-top:1.5rem; }
.petra__cols p{ margin:0; color:rgba(241,231,214,.78); }

.petra__strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.8vw,1.5rem);
  margin-top:clamp(2rem,4.5vw,3.6rem); align-items:start;
}
.petra__strip figure{ margin:0; }
.petra__strip figure > img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  background:var(--ink-3); border-radius:4px;
}

.petra__strip figcaption{
  margin-top:.85rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
  line-height:1.5; color:rgba(231,199,155,.75);
}

/* ── played with: a quiet line of marks, early ───────────── */
.proof{ padding:clamp(1.6rem,3vw,2.4rem) 0; border-block:1px solid var(--line-2); background:var(--ink-2); }
.proof__in{ display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem); flex-wrap:wrap; justify-content:center; }
.proof__label{
  margin:0; font-size:.68rem; text-transform:uppercase; letter-spacing:.2em; color:var(--mute-2);
  white-space:nowrap;
}
.proof__marks{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:clamp(1.1rem,3vw,2.6rem); flex-wrap:wrap; justify-content:center;
}
.pm{
  color:rgba(241,231,214,.45); transition:color .35s var(--ease);
  font-size:.86rem; text-transform:uppercase; letter-spacing:.1em;
  font-variation-settings:'wdth' 102,'wght' 620; white-space:nowrap;
}
.pm:hover{ color:var(--cream); }
.pm--logo{ display:flex; align-items:center; }
.pm--logo svg{ width:104px; height:auto; display:block; }
.pm--vans svg{ width:72px; }

/* ── the journey map ────────────────────────────────────── */
.journey{ padding:var(--sec) 0; }
.journey .sec-head .h2{ font-size:clamp(2rem,1rem + 4.1vw,4rem); }
.journey__grid{
  display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}

.journey__map{ position:relative; }
.jmap{ width:100%; height:auto; overflow:hidden; display:block; }

.jmap__land .ct{
  fill:rgba(241,231,214,.028);
  stroke:rgba(241,231,214,.14); stroke-width:1.1; stroke-linejoin:round;
}
.jmap__land .ct.is-played{
  fill:rgba(233,160,44,.075);
  stroke:rgba(233,160,44,.45); stroke-width:1.5;
}

.jmap__guide{
  fill:none; stroke:rgba(241,231,214,.22); stroke-width:2.4;
  stroke-dasharray:2 12; stroke-linecap:round;
}
.jmap__trail{
  fill:none; stroke:var(--amber); stroke-width:3.4; stroke-linecap:round;
  filter:drop-shadow(0 0 9px rgba(233,160,44,.55));
}

.pin{ cursor:pointer; }
.pin__halo{ fill:rgba(233,160,44,.14); opacity:0; transition:opacity .5s var(--ease); }
.pin__dot{
  fill:var(--ink); stroke:rgba(241,231,214,.45); stroke-width:2.5;
  transition:fill .45s var(--ease), stroke .45s var(--ease);
}
.pin__label{
  fill:rgba(241,231,214,.55); font-size:20px; letter-spacing:.06em;
  font-family:var(--disp); font-variation-settings:'wdth' 100,'wght' 600;
  text-transform:uppercase; transition:fill .45s var(--ease);
  paint-order:stroke; stroke:var(--ink); stroke-width:5px; stroke-linejoin:round;
}
.pin:hover .pin__dot{ stroke:var(--amber); }
.pin:hover .pin__label{ fill:var(--cream); }
.pin.is-on .pin__halo{ opacity:1; }
.pin.is-on .pin__dot{ fill:var(--amber); stroke:var(--amber); }
.pin.is-on .pin__label{ fill:var(--cream); }

.jmap__van{ filter:drop-shadow(0 6px 16px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(233,160,44,.3)); }
.jmap__van [data-wheel]{ transform-box:fill-box; transform-origin:center; }
.jmap__van.is-driving [data-wheel]{ animation:roll .55s linear infinite; }
@keyframes roll{ to{ transform:rotate(360deg); } }

.jmap__hint{
  margin:.8rem 0 0; font-size:.72rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--mute-2); text-align:center;
}

/* the stop list */
.stops{ display:flex; flex-direction:column; }
.stop{
  display:grid; grid-template-columns:auto 1fr; gap:.15rem .9rem; width:100%; text-align:left;
  background:transparent; border:0; border-top:1px solid var(--line);
  padding:.95rem .6rem .95rem .2rem; cursor:pointer; color:rgba(241,231,214,.5);
  transition:color .35s, background .35s, padding-left .4s var(--ease);
  position:relative;
}
.stop:last-child{ border-bottom:1px solid var(--line); }
.stop::after{
  content:'→'; position:absolute; right:.5rem; top:50%; transform:translate(-6px,-50%);
  color:var(--amber); opacity:0; transition:opacity .3s, transform .4s var(--ease);
}
.stop:hover,.stop:focus-visible{ color:rgba(241,231,214,.85); background:rgba(241,231,214,.03); padding-left:.7rem; }
.stop:hover::after{ opacity:.75; transform:translate(0,-50%); }
.stop.is-on{ color:var(--cream); padding-left:.7rem; background:rgba(233,160,44,.06); }
.stop.is-on::after{ opacity:1; transform:translate(0,-50%); }
.stop__n{
  grid-row:1/3; align-self:center; font-family:var(--serif); font-style:italic;
  font-size:1.15rem; color:var(--amber); opacity:.55; transition:opacity .35s;
}
.stop.is-on .stop__n{ opacity:1; }
.stop__place{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.stop__place b{
  font-size:clamp(1rem,.95rem + .35vw,1.22rem); text-transform:uppercase; letter-spacing:-.01em;
  font-variation-settings:'wdth' 104,'wght' 700;
}
.stop__place i{ font-style:normal; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute-2); }
.stop__note{ font-size:.82rem; color:var(--mute-2); }

/* the panel under the map: what happened in that place */
.journey__detail{
  display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:start; margin-top:clamp(2rem,4vw,3.2rem);
}
.journey__hint{
  margin-top:1rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.18em; color:var(--mute-2);
}
.journey__shots{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.5rem,1.2vw,.85rem);
  transition:opacity .3s var(--ease);
}
.journey__shots.is-swap{ opacity:0; }
.jshot{
  padding:0; border:0; background:var(--ink-3); overflow:hidden; border-radius:12px;
  cursor:zoom-in; display:block; position:relative; aspect-ratio:4/3;
}
.jshot img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease), filter .4s; filter:saturate(.94);
}
.jshot:hover img{ transform:scale(1.06); filter:saturate(1.12); }
.jshot::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(241,231,214,.08); pointer-events:none;
}
.journey__copy h3{
  margin:0 0 .5rem; font-size:clamp(1.2rem,1rem + 1vw,1.9rem);
  font-variation-settings:'wdth' 106,'wght' 720; text-transform:uppercase; letter-spacing:-.02em;
}
.journey__copy p{ margin:0; }

/* ── services ───────────────────────────────────────────── */
.serv{ padding:var(--sec) 0; background:var(--ink-2); border-block:1px solid var(--line-2); }
.serv__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,2rem); }
.card{
  background:var(--ink-3); border:1px solid var(--line-2); border-radius:18px;
  padding:1.35rem; transition:transform .55s var(--ease), border-color .45s, background .45s;
}
.card:hover{ transform:translateY(-6px); border-color:rgba(233,160,44,.35); background:var(--ink-4); }
.card__img{ overflow:hidden; border-radius:12px; margin-bottom:1.15rem; background:#000; }
.card__img img{ width:100%; aspect-ratio:16/10; object-fit:cover; opacity:.9; transition:transform 1s var(--ease), opacity .45s; }
.card:hover .card__img img{ transform:scale(1.07); opacity:1; }
.card h3{
  margin:0 0 .55rem; font-size:1.12rem; text-transform:uppercase;
  font-variation-settings:'wdth' 104,'wght' 700; letter-spacing:-.015em;
}
.card p{ margin:0; font-size:.95rem; }

/* ── boho art ───────────────────────────────────────────── */
.art{
  padding:var(--sec) 0; position:relative;
  background:
    radial-gradient(70% 55% at 12% 0%, rgba(255,62,136,.16), transparent 62%),
    radial-gradient(60% 50% at 92% 32%, rgba(52,210,232,.13), transparent 60%),
    #08080A;
}
.lede--art{ color:rgba(241,231,214,.8); }
.art__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.4vw,1.8rem); }
.art__i{ position:relative; }
.art__img{
  overflow:hidden; border-radius:14px; margin-bottom:1.1rem; background:#000;
  border:1px solid rgba(255,62,136,.18);
  box-shadow:0 0 0 rgba(255,62,136,0);
  transition:box-shadow .5s, border-color .5s;
}
.art__i:hover .art__img{ box-shadow:0 12px 50px rgba(255,62,136,.22); border-color:rgba(255,62,136,.5); }
.art__img img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform 1s var(--ease); }
.art__i:hover .art__img img{ transform:scale(1.06); }
.art__i h3{
  margin:0 0 .45rem; font-size:1.05rem; text-transform:uppercase; letter-spacing:.06em;
  font-variation-settings:'wdth' 104,'wght' 700; color:var(--cyan);
}
.art__i p{ margin:0; font-size:.92rem; }

/* ── shade of sahara ────────────────────────────────────── */
.sahara{ position:relative; padding:clamp(5rem,12vw,11rem) 0; overflow:hidden; }
.sahara__bg{ position:absolute; inset:0; z-index:0; }
.sahara__bg img{ width:100%; height:100%; object-fit:cover; opacity:.4; filter:saturate(1.2); }
.sahara::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to right, var(--ink) 12%, rgba(11,11,12,.72) 55%, rgba(11,11,12,.9) 100%),
             linear-gradient(to bottom, var(--ink), transparent 22%, transparent 78%, var(--ink));
}
.sahara__in{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.sahara__copy p{ margin:0 0 1.1rem; }
.sahara__art{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.7rem,1.6vw,1.2rem); }
.sahara__art figure{ margin:0; overflow:hidden; background:var(--ink-3); }
.sahara__art figure:first-child{ grid-column:1/3; }
.sahara__art img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; transition:transform 1.1s var(--ease); }
.sahara__art figure:hover img{ transform:scale(1.06); }

/* ── collabs ────────────────────────────────────────────── */
.collab{ padding:var(--sec) 0; }
/* the marks of the people they have worked with */
.marks{
  list-style:none; margin:0 0 clamp(2.5rem,5vw,4rem); padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(.6rem,1.4vw,1rem);
}
.mark{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
  min-height:140px; padding:1.4rem 1rem; text-align:center;
  border:1px solid var(--line-2); border-radius:14px; background:rgba(241,231,214,.018);
  color:rgba(241,231,214,.5);
  transition:color .4s var(--ease), border-color .4s, background .4s, transform .5s var(--ease);
}
.mark:hover{ color:var(--cream); border-color:rgba(233,160,44,.35); background:rgba(233,160,44,.05); transform:translateY(-4px); }
.mark__logo{ display:block; width:min(150px,72%); }
.mark__logo svg{ width:100%; height:auto; display:block; }
.mark__word{
  font-size:clamp(1rem,.9rem + .5vw,1.3rem); line-height:1.06; text-transform:uppercase;
  font-variation-settings:'wdth' 108,'wght' 760; letter-spacing:-.02em;
}
.mark__cap{
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-2);
  transition:color .4s;
}
.mark:hover .mark__cap{ color:var(--amber); }
.collab__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,1.8rem); }
.collab__grid figure{ margin:0; }
.collab__grid figure > img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--ink-3); transition:transform 1s var(--ease); }
.collab__grid figure{ overflow:hidden; }
.collab__grid figcaption{
  margin-top:.8rem; font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; color:var(--mute-2);
}
.collab__note{ text-align:center; margin:clamp(2.5rem,5vw,4rem) auto 0; }
.collab__note a{ color:var(--amber); }

/* ── film: the clips are all 9:16, so the frames are too ── */
.films{ padding:var(--sec) 0; background:var(--ink-2); border-block:1px solid var(--line-2); }
.reels{
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding-inline:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  padding-bottom:.5rem;
}
.reels::-webkit-scrollbar{ display:none; }
.reels__rail{ display:flex; gap:clamp(.8rem,1.8vw,1.4rem); width:max-content; }

.reel{ margin:0; flex:0 0 clamp(210px,22vw,286px); scroll-snap-align:start; }
.reel__btn{
  display:block; width:100%; padding:0; border:0; background:var(--ink-3);
  border-radius:16px; overflow:hidden; cursor:pointer; position:relative;
  aspect-ratio:9/16;
}
.reel__btn img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.92) brightness(.8); transition:filter .5s, transform 1.1s var(--ease);
}
.reel__btn:hover img{ filter:saturate(1.05) brightness(.95); transform:scale(1.05); }
.reel__btn::after{
  content:''; position:absolute; inset:auto 0 0 0; height:45%; pointer-events:none;
  background:linear-gradient(to top, rgba(11,11,12,.75), transparent);
}
.reel__play{
  position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); z-index:2;
  width:56px; height:56px; border-radius:50%;
  background:rgba(11,11,12,.5); border:1px solid rgba(241,231,214,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .35s, border-color .35s, transform .45s var(--ease);
}
.reel__play::after{
  content:''; position:absolute; inset:50% auto auto 54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--cream);
}
.reel__btn:hover .reel__play{ background:var(--amber); border-color:var(--amber); transform:translate(-50%,-50%) scale(1.09); }
.reel__btn:hover .reel__play::after{ border-left-color:#0B0B0C; }
.reel__dur{
  position:absolute; right:.7rem; bottom:.7rem; z-index:2;
  background:rgba(11,11,12,.62); color:var(--cream); border-radius:99px;
  padding:.18rem .55rem; font-size:.66rem; letter-spacing:.08em;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.reel iframe{ width:100%; aspect-ratio:9/16; border:0; border-radius:16px; display:block; background:#000; }
.reel h3{
  margin:.95rem 0 .3rem; font-size:.98rem; text-transform:uppercase;
  font-variation-settings:'wdth' 104,'wght' 700; letter-spacing:-.01em;
}
.reel p{ margin:0; font-size:.86rem; line-height:1.55; }

/* ── open invitation ────────────────────────────────────── */
.invite{
  padding:var(--sec) 0;
  background:
    radial-gradient(65% 60% at 8% 50%, rgba(233,160,44,.10), transparent 62%),
    var(--ink-2);
  border-block:1px solid var(--line-2);
}
.invite__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.invite__art{ margin:0; overflow:hidden; border-radius:16px; background:var(--ink-3); }
.invite__art img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1.2s var(--ease); }
.invite__art:hover img{ transform:scale(1.05); }
.invite__copy p{ margin:0 0 1.1rem; }
.invite__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }

/* ── gallery ────────────────────────────────────────────── */
.gal{ padding:var(--sec) 0 clamp(3rem,6vw,5rem); }
/* A uniform grid, deliberately. The old multi-column masonry with per-image
   aspect ratios left ragged holes wherever a column ran short. */
/* collapsed, the grid is cut through the middle of the next row and faded out,
   so it reads as "there is more behind this" rather than "this is all of it" */
.gal__wrap{ position:relative; }
.gal__wrap.is-teased::after{
  content:''; position:absolute; left:0; right:0; bottom:0; z-index:2;
  height:clamp(110px,15vw,210px); pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--ink) 86%);
}
.gal__grid{ overflow:hidden; transition:max-height .7s var(--ease); }

.gal__grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(.35rem,.9vw,.7rem);
  padding-inline:clamp(.35rem,.9vw,.7rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.gal__grid figure{
  margin:0; overflow:hidden; background:var(--ink-3); cursor:zoom-in; position:relative;
  aspect-ratio:4/3; border-radius:6px;
}
.gal__grid img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s var(--ease), filter .5s; filter:saturate(.92);
}
.gal__grid figure:hover img{ transform:scale(1.06); filter:saturate(1.12); }
.gal__grid figure.is-hidden{ display:none; }
.gal__more{ text-align:center; margin-top:clamp(1rem,2.5vw,1.8rem); position:relative; z-index:3; }

/* lightbox */
/* `hidden` must win over `display:grid`, or this sits invisibly over the whole
   page at z-index 150 and eats every click. */
.lb[hidden],
.menu[hidden]{ display:none !important; }

.lb{
  position:fixed; inset:0; z-index:150; background:rgba(6,6,7,.96);
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  opacity:0; transition:opacity .35s;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lb.is-on{ opacity:1; }
.lb__fig{ margin:0; max-width:100%; max-height:100%; }
.lb__fig img{ max-width:100%; max-height:82svh; width:auto; object-fit:contain; }
.lb__x,.lb__nav{
  position:absolute; background:rgba(241,231,214,.07); border:1px solid var(--line);
  color:var(--cream); width:52px; height:52px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:1.3rem; transition:background .3s, transform .3s;
}
.lb__x:hover,.lb__nav:hover{ background:var(--amber); color:#000; }
.lb__x{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.lb__nav{ top:50%; transform:translateY(-50%); font-size:2rem; line-height:0; }
.lb__nav--p{ left:clamp(.6rem,2.5vw,2rem); }
.lb__nav--n{ right:clamp(.6rem,2.5vw,2rem); }
.lb__count{
  position:absolute; bottom:clamp(1rem,3vw,2rem); left:50%; transform:translateX(-50%);
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-2);
}

/* ── crew ───────────────────────────────────────────────── */
.crew{ padding:var(--sec) 0; background:var(--ink-2); border-block:1px solid var(--line-2); }
.crew__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.4vw,2rem); }
.mem{ margin:0; }
.mem__img{ overflow:hidden; background:var(--ink-3); border-radius:14px; }
.mem__img img{ width:100%; aspect-ratio:1; object-fit:cover; filter:grayscale(.55) contrast(1.03); transition:filter .6s var(--ease), transform 1s var(--ease); }
.mem:hover .mem__img img{ filter:none; transform:scale(1.05); }
.mem h3{
  margin:1rem 0 .35rem; font-size:1.08rem; text-transform:uppercase;
  font-variation-settings:'wdth' 104,'wght' 720; letter-spacing:-.01em;
}
.mem h3 i{ font-family:var(--serif); font-style:italic; text-transform:none; color:var(--amber); font-size:.95em; font-variation-settings:normal; }
.mem__role{ margin:0 0 .4rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.13em; color:var(--mute-2); }
.mem__joke{ margin:0; font-size:.93rem; color:rgba(241,231,214,.7); font-family:var(--serif); font-style:italic; font-size:1.02rem; }

/* ── faq ────────────────────────────────────────────────── */
.faq{ padding:var(--sec) 0; }
.faq__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.faq__mail{ margin-top:1.5rem; font-size:.9rem; }
.faq__mail a{ color:var(--amber); }
.q{ border-top:1px solid var(--line); }
.q:last-child{ border-bottom:1px solid var(--line); }
.q summary{
  list-style:none; cursor:pointer; padding:1.25rem 0; display:flex; align-items:center; gap:1.5rem;
  font-size:clamp(1rem,.95rem + .55vw,1.35rem);
  font-variation-settings:'wdth' 104,'wght' 620; letter-spacing:-.015em;
  transition:color .3s;
}
.q summary::-webkit-details-marker{ display:none; }
.q summary:hover{ color:var(--amber); }
.q summary span{ flex:1; }
.q summary i{
  flex:none; width:22px; height:22px; position:relative;
}
.q summary i::before,.q summary i::after{
  content:''; position:absolute; inset:50% 0 auto 0; height:1.5px; background:var(--amber);
  transition:transform .4s var(--ease);
}
.q summary i::after{ transform:rotate(90deg); }
.q[open] summary i::after{ transform:rotate(0); }
.q p{ margin:0 0 1.4rem; padding-right:2rem; }

/* ── book ───────────────────────────────────────────────── */
.book{
  padding:var(--sec) 0;
  background:
    radial-gradient(75% 60% at 85% 8%, rgba(233,160,44,.13), transparent 62%),
    var(--ink-2);
  border-top:1px solid var(--line-2);
}
.book__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:start; }

.book__direct{ list-style:none; margin:2.5rem 0 0; padding:0; }
.book__direct li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  border-top:1px solid var(--line); padding:.9rem 0;
}
.book__direct li:last-child{ border-bottom:1px solid var(--line); }
.book__direct span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--mute-2); }
.book__direct a,.book__direct b{
  text-decoration:none; font-variation-settings:'wdth' 102,'wght' 600; font-size:1rem;
  text-align:right; transition:color .3s;
}
.book__direct a:hover{ color:var(--amber); }

.form{ display:flex; flex-direction:column; gap:1.1rem; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.fld{ display:flex; flex-direction:column; gap:.45rem; }
.fld > span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--mute-2); }
.fld input,.fld select,.fld textarea{
  width:100%; background:var(--ink); color:var(--cream);
  border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem;
  font-family:inherit; font-size:.98rem; transition:border-color .3s, background .3s;
}
.fld input::placeholder,.fld textarea::placeholder{ color:rgba(241,231,214,.28); }
.fld input:focus,.fld select:focus,.fld textarea:focus{ border-color:var(--amber); outline:none; background:var(--ink-3); }
.fld textarea{ resize:vertical; min-height:110px; }
.fld select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--amber) 50%),linear-gradient(135deg,var(--amber) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.fld input.is-bad,.fld textarea.is-bad{ border-color:var(--brick); }

.chips{ border:0; margin:.3rem 0 0; padding:0; }
.chips legend{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--mute-2); padding:0; margin-bottom:.7rem; }
.chips label{ display:inline-block; margin:0 .5rem .5rem 0; cursor:pointer; }
.chips input{ position:absolute; opacity:0; width:0; height:0; }
.chips span{
  display:inline-block; padding:.55rem 1.1rem; border:1px solid var(--line); border-radius:99px;
  font-size:.84rem; color:rgba(241,231,214,.7); transition:all .3s;
}
.chips label:hover span{ border-color:rgba(233,160,44,.5); color:var(--cream); }
.chips input:checked + span{ background:var(--amber); border-color:var(--amber); color:#0B0B0C; font-variation-settings:'wght' 640; }
.chips input:focus-visible + span{ outline:2px solid var(--amber); outline-offset:3px; }

.form__go{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.6rem; }
.form__note{ font-size:.8rem; color:var(--mute-2); margin:0; max-width:none; }
.form__note.is-bad{ color:#F09A8A; }

/* ── footer ─────────────────────────────────────────────── */
.foot{ padding-top:clamp(2rem,5vw,3.5rem); background:var(--ink); }
.foot__in{
  display:grid; grid-template-columns:1.1fr 1.4fr .9fr; gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(3rem,7vw,5.5rem);
}
.foot__brand img{ width:clamp(160px,16vw,220px); height:auto; margin-bottom:1.2rem; }
.foot__brand p{ font-size:.92rem; margin:0; }
.foot__nav{ display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); gap:.55rem 3rem; align-content:start; }
.foot__nav a{
  text-decoration:none; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--mute); transition:color .3s;
}
.foot__nav a:hover{ color:var(--amber); }
.foot__contact{ display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; }
.foot__contact a{ text-decoration:none; font-size:.95rem; color:var(--mute); transition:color .3s; }
.foot__contact a:hover{ color:var(--amber); }

.foot__base{
  display:flex; align-items:center; gap:1rem;
  border-top:1px solid var(--line-2); padding-block:1.5rem 2rem;
}
.foot__bear{ width:40px; height:40px; opacity:.85; }
.foot__base small{ font-size:.75rem; color:var(--mute-2); letter-spacing:.06em; }

/* ── sticky mobile cta ──────────────────────────────────── */
.sticky{
  position:fixed; left:50%; bottom:1rem; z-index:98; transform:translate(-50%,150%);
  background:var(--amber); color:#0B0B0C; text-decoration:none;
  padding:.95rem 2.1rem; border-radius:99px; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.06em; font-variation-settings:'wdth' 100,'wght' 700;
  box-shadow:0 10px 40px rgba(0,0,0,.55);
  transition:transform .55s var(--ease);
  display:none;
}
.sticky.is-on{ transform:translate(-50%,0); }

/* ── reveal ─────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.hero__h1 .line > span{ transform:translateY(105%); transition:transform 1.05s var(--ease); }
.hero__h1 .line.is-in > span{ transform:none; }

/* ═══ responsive ═══════════════════════════════════════════ */
@media (max-width:1180px){
  .gal__grid{ grid-template-columns:repeat(4,1fr); }
  .art__grid{ grid-template-columns:repeat(2,1fr); }
  .crew__grid{ grid-template-columns:repeat(3,1fr); }
  .nav__links{ gap:1rem; }
  .nav__links a{ font-size:.7rem; }
}

@media (max-width:980px){
  .nav__links,.nav__cta{ display:none; }
  .burger{ display:block; }
  .story__grid,.unfold__grid,.sahara__in,.faq__grid,.book__grid,.invite__grid,.journey__grid,.journey__detail{ grid-template-columns:1fr; }
  .serv__grid{ grid-template-columns:repeat(2,1fr); }
  .collab__grid{ grid-template-columns:1fr 1fr; }
  .marks{ grid-template-columns:repeat(3,1fr); }
  .collab__grid figure:last-child{ grid-column:1/3; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); row-gap:2rem; }
  .foot__in{ grid-template-columns:1fr 1fr; }
  .sticky{ display:block; }
  .hero__meta{ left:var(--gut); right:auto; }
}

@media (max-width:720px){
  html{ scroll-padding-top:4.5rem; }
  .gal__grid{ grid-template-columns:repeat(3,1fr); }
  .serv__grid,.art__grid,.crew__grid{ grid-template-columns:1fr 1fr; }
  .petra__cols{ grid-template-columns:1fr; }
  .petra__strip{ grid-template-columns:1fr 1fr; }
  .f2{ grid-template-columns:1fr; }
  .foot__in{ grid-template-columns:1fr; }
  .hero{ padding-bottom:7rem; }
  .hero__scroll{ display:none; }
  .hero__meta{ bottom:5.5rem; }
  .story__art{ margin-top:2rem; }
  .lb__nav{ width:44px; height:44px; }
}

@media (max-width:520px){
  .book__direct li{ flex-direction:column; align-items:flex-start; gap:.3rem; }
  .book__direct a,.book__direct b{ text-align:left; }
  .hero{ padding-top:7rem; }
  .hero__sub{ font-size:1rem; }

  .collab__grid{ grid-template-columns:1fr; }
  .journey__shots{ grid-template-columns:repeat(2,1fr); }
  .collab__grid figure:last-child{ grid-column:auto; }
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .sahara__art{ grid-template-columns:1fr; }
  .sahara__art figure:first-child{ grid-column:auto; }
  .hero__cta .btn{ flex:1 1 100%; }
}

/* ── motion off ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .hero__h1 .line > span{ transform:none; }
  .hero__slide.is-on img{ animation:none; transform:none; }
  .grain{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   العربية — RTL
   Two things matter most here: Arabic must never be letter-spaced
   (it breaks the joins between letters), and uppercase does nothing
   for it, so both are switched off wherever English relies on them.
   ═══════════════════════════════════════════════════════════ */

.lang{
  flex:none; display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .8rem; border:1px solid var(--line); border-radius:99px;
  background:transparent; cursor:pointer; color:rgba(241,231,214,.75);
  transition:border-color .35s, color .35s, background .35s;
}
.lang:hover{ border-color:var(--amber); color:var(--cream); background:rgba(233,160,44,.08); }
.lang__now{ font-size:.72rem; letter-spacing:.08em; font-variation-settings:'wght' 700; }
.lang__next{
  font-size:.9rem; color:var(--amber); line-height:1;
  font-family:'IBM Plex Sans Arabic','Archivo',sans-serif;
}
.lang--menu{ align-self:flex-start; margin-bottom:.4rem; }
@media (max-width:980px){ .nav .lang{ display:none; } }

[dir="rtl"] body,
[dir="rtl"] .h2,
[dir="rtl"] .hero__h1,
[dir="rtl"] .btn,
[dir="rtl"] .eyebrow,
[dir="rtl"] .lede,
[dir="rtl"] .nav__links a,
[dir="rtl"] .menu__links a,
[dir="rtl"] .stop__place b,
[dir="rtl"] .spec__i h3,
[dir="rtl"] .card h3,
[dir="rtl"] .art__i h3,
[dir="rtl"] .mem h3,
[dir="rtl"] .film h3,
[dir="rtl"] .journey__copy h3,
[dir="rtl"] .q summary,
[dir="rtl"] .fld > span,
[dir="rtl"] .chips span,
[dir="rtl"] .book__direct span,
[dir="rtl"] .pm,
[dir="rtl"] .proof__label,
[dir="rtl"] .foot__nav a,
[dir="rtl"] .marquee span{
  font-family:'IBM Plex Sans Arabic','Archivo',sans-serif;
  letter-spacing:normal;
  font-variation-settings:normal;
}

/* Arabic caps do not exist — stop shouting */
[dir="rtl"] .h2,[dir="rtl"] .hero__h1,[dir="rtl"] .eyebrow,[dir="rtl"] .btn,
[dir="rtl"] .nav__links a,[dir="rtl"] .menu__links a,[dir="rtl"] .spec__i h3,
[dir="rtl"] .card h3,[dir="rtl"] .art__i h3,[dir="rtl"] .mem h3,[dir="rtl"] .film h3,
[dir="rtl"] .journey__copy h3,[dir="rtl"] .stat span,[dir="rtl"] .stop__place b,
[dir="rtl"] .stop__place i,[dir="rtl"] .mem__role,[dir="rtl"] .sec-head__note,
[dir="rtl"] .book__direct span,[dir="rtl"] .fld > span,[dir="rtl"] .chips legend,
[dir="rtl"] .foot__nav a,[dir="rtl"] .pm,[dir="rtl"] .proof__label,
[dir="rtl"] .films__gifs figcaption,[dir="rtl"] .petra__strip figcaption,
[dir="rtl"] .collab__grid figcaption,[dir="rtl"] .journey__hint,[dir="rtl"] .jmap__hint,
[dir="rtl"] .film__dur,[dir="rtl"] .marquee span{
  text-transform:none;
  letter-spacing:normal;
}

/* the elegant accent: Amiri stands in for the serif italic */
[dir="rtl"] .h2 em,
[dir="rtl"] .hero__h1 em,
[dir="rtl"] .pull,
[dir="rtl"] .stat--word,
[dir="rtl"] .mem h3 i,
[dir="rtl"] .mem__joke,
[dir="rtl"] .spec__i h3 span,
[dir="rtl"] .stop__n,
[dir="rtl"] .menu__links a em,
[dir="rtl"] .road__n{
  font-family:'Amiri',serif;
  font-style:normal;
  letter-spacing:normal;
  font-variation-settings:normal;
}

/* Arabic reads better a touch larger and looser */
[dir="rtl"] body{ line-height:1.85; font-size:clamp(1.02rem,.97rem + .25vw,1.1rem); }
[dir="rtl"] p{ line-height:1.9; }
[dir="rtl"] .h2{ line-height:1.16; }
[dir="rtl"] .hero__h1{ line-height:1.18; }
[dir="rtl"] .pull{ line-height:1.6; }

/* things pinned to an edge have to change edges */
[dir="rtl"] .skip{ left:auto; right:1rem; }
[dir="rtl"] .hero__meta{ right:auto; left:var(--gut); }
[dir="rtl"] .pull{ padding-left:0; padding-right:1.4rem; border-left:0; border-right:2px solid var(--amber); }
[dir="rtl"] .spec__i{ padding:1.15rem .6rem 1.15rem 3rem; margin-left:0; margin-right:-.6rem; }
[dir="rtl"] .spec__i::after{ right:auto; left:.9rem; }
[dir="rtl"] .stop{ padding:.95rem .2rem .95rem .6rem; }
[dir="rtl"] .stop::after{ content:'←'; right:auto; left:.5rem; transform:translate(6px,-50%); }
[dir="rtl"] .stop:hover::after,[dir="rtl"] .stop.is-on::after{ transform:translate(0,-50%); }
[dir="rtl"] .stop:hover,[dir="rtl"] .stop:focus-visible,[dir="rtl"] .stop.is-on{ padding-left:.6rem; padding-right:.7rem; }
[dir="rtl"] .stop__n{ grid-row:1/3; }
[dir="rtl"] .lb__nav--p{ left:auto; right:clamp(.6rem,2.5vw,2rem); }
[dir="rtl"] .lb__nav--n{ right:auto; left:clamp(.6rem,2.5vw,2rem); }
[dir="rtl"] .film__dur{ right:auto; left:.7rem; }
[dir="rtl"] .film__play::after{ inset:50% auto auto 46%; border-width:9px 15px 9px 0;
  border-color:transparent var(--cream) transparent transparent; }
[dir="rtl"] .film__btn:hover .film__play::after{ border-right-color:#0B0B0C; border-left-color:transparent; }
[dir="rtl"] .fld select{
  background-position:20px 50%, 25px 50%;
  padding:.85rem 1rem;
}

/* the map is geography — it must not mirror */
[dir="rtl"] .jmap{ direction:ltr; }
[dir="rtl"] .pin__label{ font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:normal; }

/* latin runs inside Arabic (emails, handles, XP Music Futures) stay LTR */
[dir="rtl"] .book__direct a,
[dir="rtl"] .foot__contact a,
[dir="rtl"] .menu__foot a{ direction:ltr; unicode-bidi:embed; }

[dir="rtl"] .reels{ direction:rtl; }
[dir="rtl"] .reel__dur{ right:auto; left:.7rem; }
[dir="rtl"] .reel__play::after{ inset:50% auto auto 46%;
  border-width:8px 13px 8px 0; border-color:transparent var(--cream) transparent transparent; }
[dir="rtl"] .reel__btn:hover .reel__play::after{ border-right-color:#0B0B0C; border-left-color:transparent; }

/* the marquee keeps travelling the same way; the words simply change */
[dir="rtl"] .marquee__track{ direction:rtl; }

/* ═══ performance ═══════════════════════════════════════════
   Sections below the fold are skipped for layout and paint until
   they are near the viewport. contain-intrinsic-size keeps the
   scrollbar honest so nothing jumps.
   ═══════════════════════════════════════════════════════════ */
.story,.unfold,.petra,.journey,.serv,.art,.sahara,.invite,.gal,.crew,.faq,.films{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}
.gal{ contain-intrinsic-size:auto 1600px; }
.journey{ contain-intrinsic-size:auto 1400px; }

@media (max-width:980px){
  /* the grain overlay is a fixed, animated, blended layer — the most
     expensive thing on the page and the least visible on a phone */
  .grain{ display:none; }
}

/* ═══ phones: fewer long stacks, more horizontal ═══════════ */
@media (max-width:720px){
  :root{ --sec:clamp(3.2rem,9vw,4.5rem); }

  /* services and Boho Art become swipe rails instead of tall stacks */
  .serv__grid,.art__grid{
    display:flex; width:auto; gap:.8rem;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut); padding-bottom:.4rem;
  }
  .serv__grid::-webkit-scrollbar,.art__grid::-webkit-scrollbar{ display:none; }
  .serv__grid > *,.art__grid > *{ flex:0 0 78%; scroll-snap-align:start; }
  .card__img img{ aspect-ratio:16/9; }
  .art__img img{ aspect-ratio:4/3; }

  /* the crew reads fine two-up */
  .crew__grid{ grid-template-columns:1fr 1fr; gap:.9rem; }
  .mem h3{ font-size:.95rem; margin-top:.7rem; }
  .mem__role{ font-size:.62rem; letter-spacing:.1em; }
  .mem__joke{ font-size:.88rem; }

  /* the collaborations row and the stats sit side by side */
  .stats{ padding:2.2rem 0; }
  .stats__grid{ gap:1.1rem 1rem; }

  /* trim the deepest stacks */
  .story__grid{ gap:1.6rem; }
  .journey__detail{ gap:1.2rem; }
  .sec-head{ margin-bottom:1.6rem; }
  .petra__strip{ gap:.6rem; }
  .films__gifs{ gap:.8rem; }
}

@media (max-width:520px){
  .crew__grid,.art__grid{ }
  .serv__grid > *,.art__grid > *{ flex:0 0 84%; }
  .gal__grid{ grid-template-columns:repeat(3,1fr); gap:.25rem; padding-inline:.25rem; }
  .reel{ flex:0 0 62vw; }
  .hero__cta{ gap:.6rem; }
  .hero__cta .btn{ flex:1 1 100%; }
}