:root {
  --ink: #162823;
  --ink-soft: #344840;
  --cream: #f4f0e6;
  --sand: #d7af77;
  --terracotta: #b95f3f;
  --gold: #e5b66b;
  --line: rgba(22, 40, 35, 0.2);
  --display: "Instrument Serif", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --pad: clamp(1.25rem, 4vw, 5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { color: inherit; font: inherit; }
::selection { color: var(--cream); background: var(--terracotta); }

.skip-link { position: fixed; z-index: 200; top: -5rem; left: 1rem; padding: .7rem 1rem; color: #fff; background: var(--ink); transition: top .2s; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: fixed; z-index: 100; inset: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: clamp(.75rem, 1.6vw, 1.8rem);
  height: 5.5rem; padding: 0 var(--pad); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.22);
  transition: color .3s, background .3s, height .3s, border .3s;
}
.site-header.scrolled { height: 4.5rem; color: var(--ink); background: rgba(244,240,230,.93); border-color: var(--line); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; justify-self: start; gap: .7rem; }
.brand-mark { width: 2.15rem; fill: currentColor; }
.brand-name { font-family: var(--display); font-size: 1.45rem; letter-spacing: .01em; }
.desktop-nav { display: flex; gap: clamp(1.5rem, 3vw, 3.2rem); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.desktop-nav a, .footer-links a { position: relative; }
.desktop-nav a::after, .footer-links a::after { position: absolute; content: ""; inset: auto 100% -.25rem 0; height: 1px; background: currentColor; transition: right .25s; }
.desktop-nav a:hover::after, .footer-links a:hover::after { right: 0; }
.header-cta { justify-self: end; padding-bottom: .2rem; font-size: .77rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid currentColor; }
.language-picker { position: relative; justify-self: end; }
.language-picker select { min-width: 4.1rem; height: 2.25rem; padding: 0 1.7rem 0 .7rem; color: currentColor; background: transparent; border: 1px solid currentColor; border-radius: 2rem; cursor: pointer; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; appearance: none; }
.language-picker::after { position: absolute; content: ""; top: calc(50% - .2rem); right: .7rem; width: .35rem; height: .35rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.language-picker select option { color: var(--ink); background: var(--cream); }
.language-picker select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.menu-toggle, .mobile-menu { display: none; }

.hero { position: relative; min-height: max(46rem, 100svh); overflow: hidden; color: #fff; background: #994f38; }
.hero-art, .plan-art { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(155deg, #bc7252 0%, #9b4e38 48%, #68372e 100%); }
.sun { position: absolute; top: 17%; left: 66%; width: clamp(8rem, 16vw, 15rem); aspect-ratio: 1; border-radius: 50%; background: #e9bc72; box-shadow: 0 0 4rem rgba(235,184,103,.24); }
.dune { position: absolute; width: 120%; height: 48%; left: -10%; border-radius: 50% 50% 0 0 / 35% 35% 0 0; transform-origin: center bottom; }
.dune-back { bottom: 0; left: 12%; background: #b96c49; transform: rotate(-9deg); box-shadow: inset 0 4rem 8rem rgba(255,218,159,.08); }
.dune-front { bottom: -21%; left: -30%; height: 64%; background: linear-gradient(165deg, #d49c62 0%, #a8583c 58%, #754033 100%); transform: rotate(7deg); box-shadow: inset 1rem 3rem 7rem rgba(244,197,124,.14); }
.hero-grain { position: absolute; inset: 0; opacity: .15; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.hero-content { position: relative; z-index: 2; display: grid; align-content: center; min-height: max(46rem, 100svh); padding: 8rem var(--pad) 5rem; }
.eyebrow { margin: 0; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow.light { color: rgba(255,255,255,.73); }
.hero h1, h2 { margin: 1.2rem 0; font-family: var(--display); font-weight: 400; line-height: .84; letter-spacing: -.035em; }
.hero h1 { max-width: 10ch; font-size: clamp(5rem, 11vw, 10.5rem); }
h1 em, h2 em, h3 em { font-weight: 400; }
.hero-copy { max-width: 25rem; margin: 1rem 0 0 33%; font-size: clamp(.95rem, 1.3vw, 1.15rem); color: rgba(255,255,255,.83); }
.circle-link { position: absolute; z-index: 3; right: var(--pad); bottom: clamp(5rem, 10vh, 8rem); display: flex; flex-direction: column; justify-content: space-between; width: 9.5rem; aspect-ratio: 1; padding: 1.5rem; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; transition: color .3s, background .3s, transform .3s; }
.circle-link:hover { color: var(--ink); background: #fff; transform: rotate(4deg); }
.circle-arrow { align-self: flex-end; font-size: 1.2rem; }
.hero-meta { position: absolute; z-index: 3; bottom: 2rem; left: var(--pad); right: var(--pad); display: flex; align-items: center; gap: 1rem; font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.64); }
.hero-meta-line { width: 4rem; height: 1px; background: rgba(255,255,255,.35); }

.section-pad { padding: clamp(6rem, 11vw, 10rem) var(--pad); }
.section-number { display: block; margin-bottom: 1.6rem; font-family: var(--display); font-style: italic; font-size: 1.1rem; }
.intro { display: grid; grid-template-columns: 23% 1fr; border-bottom: 1px solid var(--line); }
.intro-main h2, .section-heading h2, .destinations h2, .process h2, .faq h2 { font-size: clamp(3.7rem, 7.8vw, 8.5rem); }
.intro-main h2 { margin-top: 0; }
.intro-copy { display: grid; grid-template-columns: minmax(15rem, 32rem) auto; align-items: end; gap: 3rem; margin: 4rem 0 0 28%; }
.intro-copy p { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink-soft); }
.text-link { justify-self: start; padding-bottom: .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid; white-space: nowrap; }

.journeys { background: #efe9dc; }
.section-heading { display: grid; grid-template-columns: 22% 1fr 22%; align-items: end; gap: 2rem; margin-bottom: 5rem; }
.section-heading h2 { margin: 0; }
.section-heading > p { max-width: 19rem; margin: 0 0 1rem; color: var(--ink-soft); }
.journey-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1rem, 2.5vw, 2.5rem); }
.journey-card { position: relative; min-height: 32rem; overflow: hidden; color: #fff; background: #745544; }
.journey-card-large { grid-row: span 2; min-height: 66.5rem; }
.journey-card > a { position: absolute; inset: 0; }
.media-placeholder { position: relative; overflow: hidden; background-color: #aa6a49; }
.media-placeholder::after { position: absolute; content: ""; inset: 0; background: linear-gradient(180deg, rgba(7,22,17,.02) 25%, rgba(7,22,17,.62) 100%); }
.journey-card .media-placeholder { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s; }
.journey-card:hover .media-placeholder { transform: scale(1.035); filter: saturate(1.08); }
.desert-scene { background: url("assets/images/site/home-sahara.jpg") center / cover no-repeat; }
.city-scene { background: url("assets/images/site/home-medina.jpg") center / cover no-repeat; }
.mountain-scene { background: url("assets/images/site/home-atlas.jpg") center / cover no-repeat; }
.card-topline { position: absolute; z-index: 2; top: 1.5rem; left: 1.5rem; right: 1.5rem; display: flex; justify-content: space-between; font-size: .63rem; letter-spacing: .14em; text-transform: uppercase; }
.card-content { position: absolute; z-index: 2; inset: auto 1.7rem 1.7rem; }
.card-content h3 { margin: .8rem 0 0; font-family: var(--display); font-size: clamp(3.2rem, 5vw, 6rem); font-weight: 400; line-height: .82; }
.journey-card:not(.journey-card-large) .card-content h3 { font-size: clamp(2.8rem, 4vw, 4.5rem); }
.card-arrow { position: absolute; right: .2rem; bottom: .2rem; display: grid; place-items: center; width: 3.2rem; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-size: 1.2rem; transition: color .3s, background .3s; }
.journey-card:hover .card-arrow { color: var(--ink); background: #fff; }

.quote-section { position: relative; display: grid; place-items: center; min-height: 42rem; padding: 8rem var(--pad); text-align: center; background: var(--sand); overflow: hidden; }
.quote-section blockquote { position: relative; z-index: 2; max-width: 55rem; margin: 0; }
.quote-section blockquote p { margin: 0; font-family: var(--display); font-size: clamp(2.6rem, 5vw, 5.3rem); line-height: 1; }
.quote-orbit { position: absolute; display: grid; place-items: center; width: clamp(25rem, 48vw, 42rem); aspect-ratio: 1; border: 1px solid rgba(22,40,35,.26); border-radius: 50%; }
.quote-orbit::before, .quote-orbit::after { position: absolute; content: ""; width: .5rem; aspect-ratio: 1; background: var(--ink); border-radius: 50%; }
.quote-orbit::before { top: -.25rem; }.quote-orbit::after { bottom: -.25rem; }
.quote-orbit span { position: absolute; top: -1rem; padding: 0 1rem; background: var(--sand); font-size: .6rem; letter-spacing: .25em; }

.destinations-heading { display: grid; grid-template-columns: 24% 1fr; align-items: end; margin-bottom: 5rem; }
.destinations-heading h2 { margin: 0; }
.place-list { border-top: 1px solid var(--ink); }
.place-row { display: grid; grid-template-columns: 6% 1fr 32% 3rem; align-items: center; gap: 1rem; min-height: 8rem; border-bottom: 1px solid var(--line); transition: padding .3s, background .3s; }
.place-row:hover { padding: 0 1.25rem; background: #ebe3d4; }
.place-index { font-family: var(--display); font-style: italic; font-size: .9rem; }
.place-row h3 { margin: 0; font-family: var(--display); font-size: clamp(2.2rem, 4vw, 4.2rem); font-weight: 400; }
.place-row p { margin: 0; color: var(--ink-soft); }
.place-arrow { font-size: 1.3rem; }

.values { display: grid; grid-template-columns: 1fr 1fr; min-height: 55rem; color: #fff; background: var(--ink); }
.values-visual { min-height: 44rem; }
.values-scene { background: url("assets/images/site/home-hospitality.jpg") center / cover no-repeat; }
.values-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 8vw, 8rem); }
.values-content h2 { font-size: clamp(3.8rem, 6vw, 6.5rem); }
.value-list { margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.24); }
.value { display: grid; grid-template-columns: 2rem 1fr; gap: 1.5rem; padding: 1.8rem 0; border-bottom: 1px solid rgba(255,255,255,.24); }
.value > span { font-family: var(--display); font-style: italic; color: var(--gold); }
.value h3 { margin: 0 0 .35rem; font-family: var(--display); font-size: 1.7rem; font-weight: 400; }
.value p { max-width: 26rem; margin: 0; color: rgba(255,255,255,.64); }

.process { background: #d9b480; }
.process-heading { display: grid; grid-template-columns: 25% 1fr; align-items: start; }
.process-heading h2 { margin: 0 0 5rem; }
.process-list { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(2rem, 4vw, 5rem); margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.process-list li { padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.process-list span { font-family: var(--display); font-style: italic; }
.process-list h3 { margin: 3rem 0 .7rem; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 400; }
.process-list p { max-width: 22rem; margin: 0; color: var(--ink-soft); }

.faq { display: grid; grid-template-columns: 36% 1fr; gap: 7%; }
.faq-heading h2 { margin-top: 3rem; }
.accordion { border-top: 1px solid var(--ink); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem 0; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.8rem); cursor: pointer; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary span { font-family: var(--sans); font-size: 1.3rem; font-weight: 300; transition: transform .25s; }
.accordion details[open] summary span { transform: rotate(45deg); }
.accordion details p { max-width: 40rem; margin: -1rem 3rem 2rem 0; color: var(--ink-soft); }

.plan { position: relative; display: grid; place-items: center; min-height: 48rem; padding: 6rem var(--pad); color: #fff; text-align: center; overflow: hidden; }
.plan-art { background: linear-gradient(155deg, #934936, #562f2b); }
.plan-sun { position: absolute; top: 20%; left: 50%; width: 13rem; aspect-ratio: 1; background: #dca75d; border-radius: 50%; transform: translateX(-50%); }
.plan-dune { position: absolute; bottom: -28%; left: -10%; width: 120%; height: 65%; background: linear-gradient(160deg, #b86c49, #704035); border-radius: 50% 50% 0 0 / 30% 30% 0 0; transform: rotate(-4deg); }
.plan-content { position: relative; z-index: 2; }
.plan h2 { font-size: clamp(4.3rem, 9vw, 9rem); }
.plan-content > p:not(.eyebrow) { max-width: 28rem; margin: 2rem auto; color: rgba(255,255,255,.76); }
.button-light { display: inline-flex; align-items: center; gap: 3rem; margin-top: 1rem; padding: 1rem 1.2rem; color: var(--ink); background: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: gap .3s, background .3s; }
.button-light:hover { gap: 4rem; background: var(--gold); }

.site-footer { padding: 5rem var(--pad) 2rem; color: #fff; background: #101e1a; }
.footer-top { display: flex; justify-content: space-between; align-items: start; padding-bottom: 5rem; border-bottom: 1px solid rgba(255,255,255,.2); }
.footer-brand .brand-name { font-size: clamp(2rem, 4vw, 4rem); }
.footer-brand .brand-mark { width: 3.5rem; }
.footer-top > p { margin: .5rem 0 0; color: rgba(255,255,255,.55); }
.footer-links { display: grid; grid-template-columns: repeat(3,1fr); margin: 4rem 0 6rem 42%; }
.footer-links > div { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.footer-label { margin: 0 0 1rem; color: rgba(255,255,255,.4); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }
.footer-links a, .footer-links span { font-family: var(--display); font-size: 1.25rem; }
.footer-language { padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; font-family: var(--display); font-size: 1.25rem; opacity: .72; }
.footer-language:hover, .footer-language.is-active { opacity: 1; text-decoration: underline; text-underline-offset: .25rem; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.48); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto auto; }
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: grid; gap: 6px; width: 2.8rem; padding: .7rem; background: transparent; border: 0; cursor: pointer; }
  .menu-toggle span { display: block; width: 100%; height: 1px; background: currentColor; transition: transform .25s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-menu { position: fixed; z-index: -1; inset: 0; display: grid; align-items: center; padding: 7rem var(--pad) 3rem; color: #fff; background: var(--ink); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .mobile-menu.open { opacity: 1; visibility: visible; }
  .mobile-menu nav { display: flex; flex-direction: column; }
  .mobile-menu a { padding: .4rem 0; font-family: var(--display); font-size: clamp(2.7rem, 9vw, 5rem); line-height: 1.1; }
  .site-header:has(.mobile-menu.open) { color: #fff; background: var(--ink); border-color: rgba(255,255,255,.2); }
  .hero-copy { margin-left: 12%; }
  .intro, .faq { grid-template-columns: 1fr; gap: 4rem; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading > p { margin-left: 30%; }
  .journey-card-large { min-height: 55rem; }
  .values { grid-template-columns: 1fr; }
  .values-visual { min-height: 70vw; }
  .process-heading { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: 1fr; }
  .process-list h3 { margin-top: 1.5rem; }
  .footer-links { margin-left: 25%; }
}

@media (max-width: 640px) {
  :root { --pad: 1.25rem; }
  .site-header { height: 4.5rem; }
  .brand-name { font-size: 1.25rem; }
  .brand-mark { width: 1.8rem; }
  .hero { min-height: 48rem; }
  .hero-content { display: block; min-height: 48rem; padding-top: 9rem; }
  .hero h1 { margin-top: 1.4rem; font-size: clamp(4.6rem, 24vw, 7rem); }
  .hero-copy { max-width: 18rem; margin: 3rem 0 0; }
  .circle-link { right: 1.25rem; bottom: 5rem; width: 7.5rem; padding: 1.2rem; }
  .hero-meta span:last-child { display: none; }
  .hero-meta-line { flex: 1; }
  .sun { top: 20%; left: 72%; width: 8rem; }
  .section-pad { padding-top: 5.5rem; padding-bottom: 5.5rem; }
  .intro-main h2, .section-heading h2, .destinations h2, .process h2, .faq h2 { font-size: clamp(3.3rem, 17vw, 5rem); }
  .intro { gap: 3rem; }
  .intro-copy { grid-template-columns: 1fr; margin: 2.5rem 0 0; }
  .section-heading { margin-bottom: 3rem; }
  .section-heading > p { margin-left: 0; }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-card, .journey-card-large { grid-row: auto; min-height: 32rem; }
  .journey-card-large { min-height: 38rem; }
  .quote-section { min-height: 34rem; }
  .destinations-heading { grid-template-columns: 1fr; gap: 2rem; }
  .place-row { grid-template-columns: 2rem 1fr 2rem; min-height: 7rem; }
  .place-row p { display: none; }
  .values-content { padding: 5rem 1.25rem; }
  .values-content h2 { font-size: 4rem; }
  .process-heading h2 { margin-bottom: 3rem; }
  .plan { min-height: 42rem; }
  .footer-top { display: block; }
  .footer-top > p { margin-top: 2rem; }
  .footer-links { grid-template-columns: 1fr 1fr; gap: 3rem; margin: 4rem 0; }
  .footer-links > div:last-child { display: none; }
  .footer-bottom { flex-wrap: wrap; gap: 1rem; }
  .footer-bottom span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Journey detail pages */
.tour-hero {
  position: relative;
  min-height: 48rem;
  padding: 10rem var(--pad) 4rem;
  color: #fff;
  background: var(--ink);
  overflow: hidden;
}
.tour-hero-art { position: absolute; inset: 0; overflow: hidden; }
.tour-hero-art::before { position: absolute; content: ""; width: 22rem; aspect-ratio: 1; top: 13%; right: 12%; border-radius: 50%; background: var(--gold); }
.tour-hero-art::after { position: absolute; content: ""; width: 120%; height: 58%; left: -10%; bottom: -31%; border-radius: 50% 50% 0 0 / 45% 45% 0 0; transform: rotate(-4deg); background: #b96b48; }
.tour-hero-art.sahara { background: linear-gradient(145deg, #b76546, #71392f); }
.tour-hero-art.cities { background: linear-gradient(145deg, #385549, #162823); }
.tour-hero-art.cities::before { border-radius: 50% 50% 0 0; top: 24%; width: 17rem; height: 26rem; background: #bd7c53; }
.tour-hero-art.cities::after { background: #263c34; }
.tour-hero-art.atlas { background: linear-gradient(145deg, #75887a, #263e35); }
.tour-hero-art.atlas::before { background: #e2b66d; }
.tour-hero-art.atlas::after { bottom: -22%; height: 65%; border-radius: 0; clip-path: polygon(0 100%, 0 65%, 25% 29%, 39% 59%, 61% 10%, 75% 44%, 100% 20%, 100% 100%); background: #40584e; transform: none; }
.tour-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 28%; align-items: end; gap: 4rem; max-width: 90rem; min-height: 33rem; margin: 0 auto; }
.breadcrumbs { position: absolute; z-index: 2; top: 8rem; left: var(--pad); display: flex; gap: .6rem; align-items: center; color: rgba(255,255,255,.68); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.breadcrumbs a:hover { color: #fff; }
.tour-hero h1 { max-width: 9ch; margin: 1.2rem 0 2rem; font-family: var(--display); font-size: clamp(5rem, 10vw, 9.5rem); font-weight: 400; line-height: .82; letter-spacing: -.035em; }
.tour-hero h1 em { display: block; }
.tour-lede { max-width: 34rem; margin: 0; color: rgba(255,255,255,.78); font-size: clamp(1rem, 1.4vw, 1.2rem); }
.tour-facts { align-self: end; margin: 0; border-top: 1px solid rgba(255,255,255,.35); }
.tour-facts div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.24); }
.tour-facts dt { color: rgba(255,255,255,.5); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.tour-facts dd { margin: 0; font-family: var(--display); font-size: 1.1rem; }
.tour-intro { display: grid; grid-template-columns: 25% minmax(0, 1fr); gap: 4rem; }
.tour-intro-body { max-width: 55rem; }
.tour-intro-body h2, .itinerary-heading h2, .tour-inclusions h2, .related-heading h2 { margin-top: 0; font-size: clamp(3.5rem, 7vw, 7rem); }
.tour-intro-body > p { max-width: 48rem; font-size: clamp(1.1rem, 1.7vw, 1.4rem); color: var(--ink-soft); }
.tour-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3rem; margin-top: 4rem; padding: 0; border-top: 1px solid var(--ink); list-style: none; }
.tour-highlights li { position: relative; padding: 1.2rem 0 1.2rem 1.5rem; border-bottom: 1px solid var(--line); }
.tour-highlights li::before { position: absolute; content: "✦"; left: 0; color: var(--terracotta); font-size: .7rem; }
.tour-photo-break { min-height: clamp(28rem, 52vw, 50rem); }
.tour-photo-sahara { background: url("assets/images/site/journey-sahara-wide.jpg") center / cover no-repeat; }
.tour-photo-cities { background: url("assets/images/site/journey-ancient-wide.jpg") center / cover no-repeat; }
.tour-photo-atlas { background: url("assets/images/site/journey-atlas-wide.jpg") center / cover no-repeat; }
.itinerary-section { background: #ede6d8; }
.itinerary-heading { display: grid; grid-template-columns: 25% 1fr; align-items: start; margin-bottom: 4rem; }
.itinerary-heading h2 { margin-bottom: 0; }
.itinerary { margin-left: 25%; border-top: 1px solid var(--ink); }
.itinerary details { border-bottom: 1px solid var(--line); }
.itinerary summary { display: grid; grid-template-columns: 5rem 1fr 2rem; gap: 1.5rem; align-items: center; padding: 2rem 0; cursor: pointer; list-style: none; }
.itinerary summary::-webkit-details-marker { display: none; }
.itinerary-day { color: var(--terracotta); font-family: var(--display); font-style: italic; }
.itinerary-title { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.05; }
.itinerary-plus { font-size: 1.3rem; transition: transform .25s; }
.itinerary details[open] .itinerary-plus { transform: rotate(45deg); }
.itinerary details > p { max-width: 49rem; margin: -1rem 2rem 2.5rem 6.5rem; color: var(--ink-soft); }
.route-note { margin: 3rem 0 0 25%; padding: 1.5rem; border-left: 2px solid var(--terracotta); background: rgba(255,255,255,.35); color: var(--ink-soft); }
.itinerary-view-switch { display: inline-flex; gap: .35rem; margin: -1rem 0 2.2rem 25%; padding: .35rem; background: rgba(22,40,35,.07); border-radius: 2rem; }
.itinerary-view-switch button { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.65rem; padding: .65rem 1.15rem; color: var(--ink-soft); background: transparent; border: 0; border-radius: 2rem; cursor: pointer; font-size: .63rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; transition: color .25s, background .25s, box-shadow .25s; }
.itinerary-view-switch button:hover { color: var(--ink); }
.itinerary-view-switch button.is-active { color: #fff; background: var(--ink); box-shadow: 0 .45rem 1rem rgba(22,40,35,.16); }
.itinerary-view-switch button:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.view-icon { position: relative; display: block; width: 1rem; height: .8rem; }
.view-icon-map { border: 1px solid currentColor; border-radius: 50% 50% 45% 55%; transform: rotate(-8deg); }
.view-icon-map::after { position: absolute; content: ""; width: .22rem; aspect-ratio: 1; top: .2rem; left: .33rem; background: currentColor; border-radius: 50%; }
.view-icon-list, .view-icon-list::before, .view-icon-list::after { border-top: 1px solid currentColor; }
.view-icon-list::before, .view-icon-list::after { position: absolute; content: ""; left: 0; width: 100%; }
.view-icon-list::before { top: .3rem; }
.view-icon-list::after { top: .65rem; }
.itinerary-view-panel[hidden] { display: none !important; }
.route-map { position: relative; }
.route-map-head { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 1rem; color: var(--ink-soft); font-size: .66rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.route-map-head p { margin: 0; }
.route-key-line { display: inline-block; width: 2.8rem; height: 2px; margin: 0 .6rem .2rem 0; background: var(--terracotta); vertical-align: middle; }
.route-instruction { opacity: .7; }
.mobile-instruction { display: none; }
.route-canvas { position: relative; min-width: 58rem; height: 45rem; overflow: hidden; color: var(--ink); background-color: #e5dac8; background-position: center; background-size: cover; border: 1px solid rgba(22,40,35,.18); }
.route-canvas-imperial { height: auto; aspect-ratio: 35 / 18; background-color: #cdded8; background-image: url("assets/images/journeys/morocco-route-map.svg"); background-size: 100% 100%; }
.route-canvas-sahara-geo { height: auto; aspect-ratio: 35 / 18; background-color: #e8d9bb; background-image: url("assets/images/journeys/morocco-sahara-route-map.svg"); background-size: 100% 100%; }
.route-canvas-atlas { height: auto; aspect-ratio: 35 / 18; background-color: #d9dfce; background-image: url("assets/images/journeys/morocco-atlas-route-map.svg"); background-size: 100% 100%; }
.route-canvas::after { position: absolute; content: ""; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(244,240,230,.12), transparent 18% 82%, rgba(244,240,230,.12)); box-shadow: inset 0 0 8rem rgba(102,74,51,.12); }
.route-line { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route-track { fill: none; stroke: #a94f37; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 13; filter: drop-shadow(0 1px 0 rgba(255,255,255,.8)); }
.route-line marker path { fill: var(--terracotta); }
.contour { display: none; }
.map-region { position: absolute; z-index: 1; color: rgba(22,40,35,.14); font-family: var(--display); font-size: clamp(3rem, 5vw, 5.5rem); font-style: italic; pointer-events: none; }
.map-region-atlas { left: 25%; bottom: 15%; transform: rotate(-9deg); }
.map-region-sahara { right: 6%; bottom: 8%; transform: rotate(5deg); }
.map-region-atlantic { left: 3%; top: 8%; transform: rotate(-8deg); }
.map-region-imperial { right: 7%; bottom: 7%; transform: rotate(4deg); }
.map-region-ourika { left: 7%; bottom: 8%; transform: rotate(-6deg); }
.map-region-mountains { right: 4%; top: 8%; transform: rotate(5deg); }
.map-feature { position: absolute; z-index: 2; left: var(--x); top: var(--y); max-width: 9.5rem; padding: .38rem .55rem; color: rgba(22,40,35,.76); background: rgba(247,243,233,.78); border: 1px solid rgba(22,40,35,.16); border-radius: .2rem; box-shadow: 0 .35rem 1rem rgba(55,39,28,.08); font-size: .52rem; line-height: 1.25; letter-spacing: .05em; pointer-events: none; transform: translate(-50%, -50%); backdrop-filter: blur(3px); }
.map-feature strong { display: block; margin-bottom: .08rem; color: var(--terracotta); font-family: var(--sans); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }
.route-stop { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 7.5rem; outline: none; text-align: center; transform: translate(-50%, -50%); }
.stop-photo { position: relative; display: grid; place-items: center; width: 5.75rem; aspect-ratio: 1; margin: 0 auto; overflow: hidden; color: #fff; border: .35rem solid #f4f0e6; border-radius: 50%; box-shadow: 0 .7rem 1.7rem rgba(55,39,28,.22); cursor: pointer; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.stop-photo::before { position: absolute; content: ""; inset: 0; background: linear-gradient(160deg, transparent 46%, rgba(16,30,26,.52)); }
.stop-photo > span { position: absolute; z-index: 1; right: .45rem; bottom: .35rem; display: grid; place-items: center; width: 1.25rem; aspect-ratio: 1; color: #fff; background: rgba(16,30,26,.72); border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-size: .47rem; font-weight: 600; letter-spacing: .05em; backdrop-filter: blur(4px); }
.route-stop:hover, .route-stop:focus, .route-stop.is-active { z-index: 10; }
.route-stop:hover .stop-photo, .route-stop:focus .stop-photo, .route-stop.is-active .stop-photo { transform: scale(1.12); box-shadow: 0 1rem 2.3rem rgba(55,39,28,.3); }
.stop-photo-marrakech { background: url("assets/images/journeys/marrakech.jpg") center / cover no-repeat; }
.stop-photo-kasbah { background: url("assets/images/journeys/ait-ben-haddou.jpg") center / cover no-repeat; }
.stop-photo-dades { background: url("assets/images/journeys/dades-valley.jpg") center / cover no-repeat; }
.stop-photo-todgha { background: url("assets/images/journeys/todgha-gorge.jpg") center / cover no-repeat; }
.stop-photo-ramlia { background: url("assets/images/journeys/ramlia.jpg") center / cover no-repeat; }
.stop-photo-merzouga { background: url("assets/images/journeys/merzouga.jpg") center / cover no-repeat; }
.stop-photo-midelt { background: url("assets/images/journeys/ziz-valley.jpg") center / cover no-repeat; }
.stop-photo-fes { background: url("assets/images/journeys/fes.jpg") center / cover no-repeat; }
.stop-photo-casablanca { background: url("assets/images/journeys/casablanca.jpg") center / cover no-repeat; }
.stop-photo-rabat { background: url("assets/images/journeys/rabat.jpg") center / cover no-repeat; }
.stop-photo-meknes { background: url("assets/images/journeys/meknes.jpg") center / cover no-repeat; }
.stop-photo-ouzoud { background: url("assets/images/journeys/ouzoud.jpg") center / cover no-repeat; }
.stop-photo-ourika { background: url("assets/images/journeys/ourika-valley.jpg") center / cover no-repeat; }
.stop-photo-setti { background: url("assets/images/journeys/setti-fatma.jpg") center / cover no-repeat; }
.stop-photo-lunch { background: url("assets/images/journeys/ourika-lunch.jpg") center / cover no-repeat; }
.stop-name { margin: .45rem -.8rem 0; font-family: var(--display); font-size: 1.05rem; line-height: 1; }
.stop-badge { position: absolute; z-index: 4; top: -.6rem; left: 50%; padding: .28rem .6rem; color: #fff; background: var(--ink); border-radius: 1rem; font-size: .5rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; transform: translateX(-50%); }
.stop-card { position: absolute; left: 50%; bottom: calc(100% + 1rem); width: 18rem; padding: 1.15rem; visibility: hidden; opacity: 0; color: #fff; background: var(--ink); box-shadow: 0 1.2rem 2.8rem rgba(35,31,25,.28); text-align: left; transform: translate(-50%, .6rem); transition: opacity .25s, transform .25s, visibility .25s; pointer-events: none; }
.stop-card::after { position: absolute; content: ""; left: calc(50% - .45rem); top: 100%; border: .5rem solid transparent; border-top-color: var(--ink); }
.stop-card > span { color: var(--gold); font-size: .56rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.stop-card h3 { margin: .35rem 0; font-family: var(--display); font-size: 1.65rem; font-weight: 400; line-height: 1; }
.stop-card p { margin: 0; color: rgba(255,255,255,.66); font-size: .78rem; line-height: 1.5; }
.card-below .stop-card { top: calc(100% + 1rem); bottom: auto; transform: translate(-50%, -.6rem); }
.card-below .stop-card::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }
.card-edge-left .stop-card { left: 0; transform: translate(0, .6rem); }
.card-below.card-edge-left .stop-card { transform: translate(0, -.6rem); }
.card-edge-left .stop-card::after { left: 2.3rem; }
.card-edge-right .stop-card { right: 0; left: auto; transform: translate(0, .6rem); }
.card-below.card-edge-right .stop-card { transform: translate(0, -.6rem); }
.card-edge-right .stop-card::after { right: 2.3rem; left: auto; }
.route-stop:hover .stop-card, .route-stop:focus .stop-card, .route-stop.is-active .stop-card { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.route-stop.card-edge-left:hover .stop-card, .route-stop.card-edge-left:focus .stop-card, .route-stop.card-edge-left.is-active .stop-card, .route-stop.card-edge-right:hover .stop-card, .route-stop.card-edge-right:focus .stop-card, .route-stop.card-edge-right.is-active .stop-card { transform: translate(0, 0); }
.geo-stop .stop-photo { z-index: 2; transform: translate(var(--photo-shift-x, var(--photo-shift, 0)), var(--photo-shift-y, 0)); }
.geo-stop .stop-name { position: relative; z-index: 2; transform: translate(var(--photo-shift-x, var(--photo-shift, 0)), var(--photo-shift-y, 0)); }
.geo-stop:hover .stop-photo, .geo-stop:focus .stop-photo, .geo-stop.is-active .stop-photo { transform: translate(var(--photo-shift-x, var(--photo-shift, 0)), var(--photo-shift-y, 0)) scale(1.12); }
.geo-stop.has-shift::before { position: absolute; z-index: 1; content: ""; left: 50%; top: 50%; width: var(--leader-length, 2.65rem); border-top: 1px solid rgba(22,40,35,.55); transform: rotate(var(--leader-angle)); transform-origin: left center; }
.geo-stop.has-shift::after { position: absolute; z-index: 3; content: ""; left: calc(50% - .27rem); top: calc(50% - .27rem); width: .54rem; aspect-ratio: 1; background: var(--terracotta); border: 2px solid var(--cream); border-radius: 50%; box-shadow: 0 .2rem .5rem rgba(22,40,35,.28); }
.tour-inclusions { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 9rem); }
.inclusion-list { margin: 0; padding: 0; border-top: 1px solid var(--ink); list-style: none; }
.inclusion-list li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.inclusion-list li span { color: var(--terracotta); }
.inclusion-note { align-self: end; max-width: 31rem; padding: 2rem; background: #e8dfcf; }
.inclusion-note h3 { margin: 0 0 .7rem; font-family: var(--display); font-size: 2rem; font-weight: 400; }
.inclusion-note p { margin: 0; color: var(--ink-soft); }
.tour-cta { position: relative; min-height: 35rem; display: grid; place-items: center; padding: 6rem var(--pad); color: #fff; text-align: center; background: var(--ink); overflow: hidden; }
.tour-cta::before { position: absolute; content: ""; width: 35rem; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.tour-cta-inner { position: relative; z-index: 1; }
.tour-cta h2 { margin: 1rem 0 2rem; font-size: clamp(3.8rem, 8vw, 7.5rem); }
.tour-cta p { max-width: 32rem; margin: 0 auto 2rem; color: rgba(255,255,255,.65); }
.back-link { display: inline-block; margin-top: 2rem; font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; border-bottom: 1px solid; }

/* Complete journey catalog */
.journey-more { display: flex; justify-content: center; margin-top: 3rem; }
.journey-more .button-dark { min-width: 13rem; justify-content: center; }
.catalog-hero { position: relative; min-height: 42rem; display: grid; align-items: end; padding: 11rem var(--pad) 6rem; overflow: hidden; color: #fff; background: linear-gradient(110deg, rgba(17,39,32,.92), rgba(17,39,32,.38)), url("assets/images/site/journey-sahara-wide.jpg") center 57% / cover no-repeat; }
.catalog-hero::after { position: absolute; content: ""; width: 36rem; aspect-ratio: 1; right: -10rem; bottom: -20rem; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; }
.catalog-hero-inner { position: relative; z-index: 1; max-width: 82rem; }
.catalog-hero h1 { max-width: 12ch; margin: 1rem 0 2rem; font-size: clamp(4.5rem, 9vw, 9rem); }
.catalog-hero p:last-child { max-width: 44rem; color: rgba(255,255,255,.74); font-size: clamp(1rem, 1.5vw, 1.25rem); }
.catalog-page { background: var(--cream); }
.catalog-group + .catalog-group { margin-top: clamp(6rem, 10vw, 10rem); }
.catalog-group-head { display: grid; grid-template-columns: 22% 1fr; align-items: end; gap: 2rem; margin-bottom: 2.5rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--ink); }
.catalog-group-head h2 { margin: 0; font-size: clamp(3.4rem, 6vw, 6.5rem); }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2vw, 2rem); }
.catalog-card { position: relative; min-height: 34rem; overflow: hidden; color: #fff; background: var(--ink); }
.catalog-card > a { position: absolute; inset: 0; display: block; }
.catalog-card-image { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; }
.catalog-card-image::after { position: absolute; content: ""; inset: 0; background: linear-gradient(180deg, rgba(9,27,21,.05) 25%, rgba(9,27,21,.82) 100%); }
.catalog-card:hover .catalog-card-image { transform: scale(1.045); filter: saturate(1.08); }
.catalog-desert { background: url("assets/images/site/journey-sahara-wide.jpg") center / cover no-repeat; }
.catalog-city { background: url("assets/images/site/journey-ancient-wide.jpg") center / cover no-repeat; }
.catalog-atlas { background: url("assets/images/site/journey-atlas-wide.jpg") center / cover no-repeat; }
.catalog-coast { background: url("assets/images/site/home-hospitality.jpg") center / cover no-repeat; }
.catalog-card-top { position: absolute; z-index: 2; top: 1.25rem; right: 1.25rem; left: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.catalog-card-copy { position: absolute; z-index: 2; right: 1.4rem; bottom: 1.4rem; left: 1.4rem; padding-right: 3.5rem; }
.catalog-card-copy h3 { margin: 0 0 .7rem; font-family: var(--display); font-size: clamp(2.4rem, 3.4vw, 4rem); font-weight: 400; line-height: .9; }
.catalog-card-copy p { margin: 0; color: rgba(255,255,255,.68); font-size: .76rem; line-height: 1.5; }
.catalog-card-copy .card-arrow { right: 0; bottom: 0; }

/* Generated journey detail template */
.catalog-detail-hero { position: relative; min-height: 49rem; display: grid; align-items: end; padding: 12rem var(--pad) 5rem; overflow: hidden; color: #fff; background-position: center; background-size: cover; }
.catalog-detail-hero::before { position: absolute; content: ""; inset: 0; background: linear-gradient(100deg, rgba(11,31,25,.92) 15%, rgba(11,31,25,.54) 62%, rgba(11,31,25,.25)); }
.catalog-detail-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) 28%; align-items: end; gap: 1.5rem 4rem; width: 100%; max-width: 90rem; margin: 0 auto; }
.catalog-detail-hero-inner > .eyebrow, .catalog-detail-hero-inner > h1, .catalog-detail-hero-inner > .tour-lede { grid-column: 1; }
.catalog-detail-hero h1 { max-width: 11ch; margin: .8rem 0; font-size: clamp(4rem, 8vw, 8rem); }
.catalog-detail-hero .tour-lede { max-width: 45rem; margin-bottom: 0; color: rgba(255,255,255,.72); }
.catalog-detail-hero .tour-facts { grid-column: 2; grid-row: 1 / span 3; }
.catalog-detail-overview .tour-intro { grid-template-columns: 20% minmax(0,1fr) 30%; align-items: end; }
.catalog-detail-overview .tour-intro h2 { margin: 0; font-size: clamp(3.5rem, 6.5vw, 7rem); }
.catalog-detail-overview .tour-intro > p { margin: 0 0 .5rem; color: var(--ink-soft); }
.highlight-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 4rem; border-top: 1px solid var(--ink); }
.highlight-grid article { min-height: 11rem; padding: 1.25rem 1.25rem 1.25rem 0; border-bottom: 1px solid var(--line); }
.highlight-grid article + article { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.highlight-grid span { color: var(--terracotta); font-size: .62rem; letter-spacing: .13em; }
.highlight-grid h3 { margin: 2rem 0 0; font-family: var(--display); font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 400; line-height: 1.05; }
.catalog-route-canvas { height: auto; aspect-ratio: 35 / 18; background-color: #d7dfd6; background-image: var(--map-image); background-size: 100% 100%; }
.catalog-route-canvas .catalog-map-stop { width: 6rem; }
.catalog-route-canvas .stop-photo { width: 4.15rem; border-width: .27rem; }
.catalog-route-canvas .stop-name { margin-top: .3rem; font-size: .8rem; text-shadow: 0 1px rgba(255,255,255,.9); }
.catalog-route-canvas .stop-card { width: 16rem; }
.catalog-route-canvas .stop-card h3 { font-size: 1.45rem; }
.catalog-route-canvas .map-feature { max-width: 8.5rem; }
.catalog-route-canvas .stop-badge { top: -.45rem; font-size: .44rem; }
.catalog-route-canvas.route-density-medium .catalog-map-stop { width: 5.35rem; }
.catalog-route-canvas.route-density-medium .stop-photo { width: 3.75rem; }
.catalog-route-canvas.route-density-high .catalog-map-stop { width: 4.8rem; }
.catalog-route-canvas.route-density-high .stop-photo { width: 3.3rem; border-width: .23rem; }
.catalog-route-canvas.route-density-high .stop-name { font-size: .68rem; }
.catalog-route-canvas.route-density-high .stop-card { width: 14rem; }

@media (max-width: 900px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .catalog-detail-hero-inner { grid-template-columns: 1fr; }
  .catalog-detail-hero .tour-facts { grid-column: 1; grid-row: auto; margin-top: 2rem; }
  .catalog-detail-overview .tour-intro { grid-template-columns: 1fr; }
  .highlight-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tour-hero-inner { grid-template-columns: 1fr; }
  .tour-facts { max-width: 35rem; }
  .tour-intro, .itinerary-heading { grid-template-columns: 1fr; }
  .itinerary, .route-note { margin-left: 0; }
  .itinerary-view-switch { margin-left: 0; }
  .route-map { overflow: visible; padding-bottom: 0; }
  .route-map-head { width: auto; }
  .route-canvas { min-width: 0; height: 39rem; }
  .route-stop { width: 6rem; }
  .stop-photo { width: 4.65rem; }
  .stop-name { font-size: .88rem; }
  .stop-card { width: 15rem; }
  .route-map-geographic { margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--terracotta) rgba(22,40,35,.1); scrollbar-width: thin; }
  .route-map-geographic .route-map-head { position: sticky; z-index: 12; left: 0; width: calc(100vw - (2 * var(--pad))); }
  .route-canvas.route-canvas-geographic { min-width: 60rem; height: auto; }
  .route-canvas.route-canvas-geographic.route-density-high { min-width: 75rem; }
}

@media (max-width: 640px) {
  .catalog-hero { min-height: 36rem; padding-top: 9rem; }
  .catalog-hero h1 { font-size: clamp(4rem, 19vw, 6rem); }
  .catalog-group-head { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-card { min-height: 30rem; }
  .catalog-detail-hero { min-height: 52rem; padding-top: 10rem; }
  .catalog-detail-hero h1 { font-size: clamp(3.8rem, 17vw, 5.8rem); }
  .highlight-grid { grid-template-columns: 1fr; }
  .highlight-grid article + article { padding-left: 0; border-left: 0; }
  .tour-hero { min-height: 50rem; padding-top: 9rem; }
  .breadcrumbs { top: 6rem; }
  .tour-hero-inner { gap: 3rem; }
  .tour-hero h1 { font-size: clamp(4.4rem, 22vw, 6.5rem); }
  .tour-highlights, .tour-inclusions { grid-template-columns: 1fr; }
  .itinerary summary { grid-template-columns: 3.5rem 1fr 1rem; gap: .7rem; }
  .itinerary details > p { margin-left: 4.2rem; margin-right: 0; }
  .tour-photo-break { min-height: 30rem; }
  .itinerary-view-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .itinerary-view-switch button { justify-content: center; }
  .route-map { margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); padding-bottom: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--terracotta) rgba(22,40,35,.1); scrollbar-width: thin; }
  .route-map-head { position: sticky; z-index: 12; left: 0; width: calc(100vw - (2 * var(--pad))); margin-bottom: 1rem; }
  .desktop-instruction { display: none; }
  .mobile-instruction { display: inline; }
  .route-canvas { display: block; min-width: 60rem; height: 32rem; padding: 0; overflow: hidden; background-position: center; background-size: cover; }
  .route-canvas::before { content: none; }
  .route-line, .map-region { display: block; }
  .map-feature { display: block; }
  .route-stop { position: absolute; left: var(--x) !important; top: var(--y) !important; display: block; width: 5.5rem; text-align: center; transform: translate(-50%, -50%); }
  .stop-photo { width: 4.3rem; margin: 0 auto; border-width: .25rem; }
  .stop-name { margin: .35rem -.6rem 0; font-size: .8rem; }
  .stop-badge { top: -.5rem; left: 50%; }
  .stop-card { width: 14rem; }
}