@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/font-1.ttf) format('truetype')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/font-2.ttf) format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/font-3.ttf) format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/font-4.ttf) format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/font-5.ttf) format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/font-6.ttf) format('truetype')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/font-7.ttf) format('truetype');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/font-8.ttf) format('truetype');}
:root {
  --ink: #102c30;
  --navy: #102b38;
  --green: #0d5b4d;
  --green-dark: #083f39;
  --lime: #cedd49;
  --orange: #f35d2f;
  --paper: #f5f0e6;
  --sand: #e9dfce;
  --white: #fffdf8;
  --muted: #5e7374;
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --shadow: 0 24px 64px rgba(6, 34, 34, .18);
  --display: "Fraunces", Georgia, serif;
  --body: "DM Sans", Arial, sans-serif;
  --mono: "DM Mono", monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --gutter: clamp(1.1rem, 6vw, 6.5rem);
  --radius: 1.35rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 var(--body);
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; }
section[id] { scroll-margin-top: 5rem; }
button, a { font: inherit; }
button { color: inherit; }
button, [href] { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

.skip-link {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: 1rem;
  padding: .75rem 1rem;
  background: var(--white);
  color: var(--ink);
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

.section {
  width: min(100%, 1500px);
  margin-inline: auto;
  padding: var(--section) var(--gutter);
}
.eyebrow, .kicker {
  margin: 0;
  font: 500 .69rem/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.eyebrow { color: var(--lime); }
.kicker { color: var(--orange); }
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.8rem;
  height: 1px;
  margin-right: .55rem;
  vertical-align: middle;
  background: currentColor;
}
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--display); }
.lead { font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.45; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .8rem 1.1rem;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  transition: transform 260ms var(--ease), background-color 200ms ease;
}
.button--light { background: var(--lime); color: var(--green-dark); }
.button--dark { background: var(--navy); color: var(--white); }

.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 4.8rem;
  padding: .85rem var(--gutter);
  color: var(--white);
  background: linear-gradient(180deg, rgba(4, 27, 32, .52), transparent);
  transition: background-color 200ms ease, box-shadow 200ms ease, backdrop-filter 200ms ease;
}
.site-header.is-scrolled {
  background: rgba(9, 45, 45, .88);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}
.logo {
  display: grid;
  place-items: center;
  width: clamp(144px, 14vw, 180px);
  height: 44px;
  padding: .3rem .55rem;
  overflow: hidden;
  border-radius: .35rem;
  background: #fff;
  flex-shrink: 0;
}
.logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-header nav {
  display: flex;
  justify-self: center;
  justify-content: center;
  gap: .25rem;
  padding: .3rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(4, 27, 32, .28);
  backdrop-filter: blur(10px);
}
.site-header nav a {
  padding: .5rem .8rem;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-size: .75rem;
  font-weight: 700;
  transition: background-color 200ms ease;
}
.language-toggle {
  min-height: 2.5rem;
  padding: .45rem .7rem;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: rgba(0, 0, 0, .12);
  color: inherit;
  font: 500 .65rem var(--mono);
  letter-spacing: .08em;
  cursor: pointer;
}
.scroll-progress {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--lime);
  transform: scaleX(var(--scroll, 0));
  transform-origin: left;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
}
.hero__video, .hero__veil {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__video {
  object-fit: cover;
  opacity: 1;
  transform: scale(1.001);
  transition: opacity 420ms ease, transform 900ms var(--ease);
}
.hero__video.is-switching { opacity: .28; transform: scale(1.025); }
.hero__veil {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 27, 35, .94), rgba(5, 27, 35, .6) 52%, rgba(5, 27, 35, .2)),
    linear-gradient(0deg, rgba(5, 27, 35, .7), transparent 48%);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(22rem, .9fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 7rem);
  width: min(100%, 1500px);
  margin: auto;
  padding: clamp(8rem, 15vh, 11rem) var(--gutter) clamp(5.5rem, 8vw, 7rem);
}
.hero h1 {
  max-width: 10.5ch;
  margin: var(--space-3) 0 clamp(2.25rem, 3vw, 2.75rem);
  font-size: clamp(4rem, 8vw, 8.5rem);
  line-height: .88;
  letter-spacing: -.075em;
}
.hero h1 em { color: var(--lime); font-weight: 600; }
.hero__lead { max-width: 42ch; margin: 0 0 clamp(1rem, 1.2vw, 1.25rem); font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.35; }
.hero [data-reveal] { opacity: 1; transform: none; }
.hero-atlas {
  display: grid;
  grid-template-rows: auto minmax(23rem, 1fr) auto;
  min-height: 34rem;
}
.hero-atlas__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  font: 500 .62rem var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero-atlas__heading p { margin: 0; color: var(--lime); }
.hero-atlas__heading span { color: rgba(255, 255, 255, .58); }
.hero-atlas__stage { position: relative; min-height: 23rem; overflow: hidden; }
.hero-atlas__watermark {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 6%;
  max-width: 8ch;
  color: rgba(255, 255, 255, .07);
  font: 600 clamp(3.2rem, 6vw, 6.5rem)/.78 var(--display);
  letter-spacing: -.08em;
  text-align: right;
  pointer-events: none;
}
.hero-atlas__shape {
  position: absolute;
  z-index: 1;
  inset: .8rem 6% .4rem;
  width: 88%;
  height: calc(100% - 1.2rem);
}
.hero-atlas__land {
  fill: rgba(13, 91, 77, .46);
  stroke: rgba(255, 255, 255, .42);
  stroke-width: 1.35;
}
.hero-atlas__water {
  fill: none;
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 4;
  stroke-linecap: round;
}
.atlas-city {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: .45rem;
  min-width: 7rem;
  min-height: 2.75rem;
  padding: .55rem .35rem;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  text-align: left;
  cursor: pointer;
  transform-origin: left center;
  transition: color 200ms ease, transform 260ms var(--ease);
}
.atlas-city strong {
  position: relative;
}
.atlas-city strong::after {
  content: "";
  position: absolute;
  left: -.12rem;
  right: -.06rem;
  bottom: -.38rem;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease);
}
.atlas-city span { color: var(--lime); font: 500 .55rem var(--mono); }
.atlas-city strong { white-space: normal; font-size: .73rem; letter-spacing: .01em; }
.atlas-city.is-active { color: var(--white); }
.atlas-city.is-active span { color: var(--orange); }
.atlas-city.is-active strong::after { transform: scaleX(1); }
.hero-atlas__caption {
  display: grid;
  grid-template-columns: .45fr 1.1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 5rem;
  padding: .8rem 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.hero-atlas__caption > span { color: var(--orange); font: 500 .56rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hero-atlas__caption strong { display: block; font: 600 1.35rem/1 var(--display); }
.hero-atlas__caption p { margin: .3rem 0 0; color: rgba(255, 255, 255, .66); font-size: .72rem; line-height: 1.35; }
.hero-atlas__caption a { color: var(--lime); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 1.2rem;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  writing-mode: vertical-rl;
  font: 500 .64rem var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero__film-status {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: 1.35rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  color: rgba(255, 255, 255, .56);
  font: 500 .58rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero__film-status::before { content: ""; width: 1.8rem; height: 1px; background: var(--lime); }
.hero__film-status strong { color: var(--white); font: inherit; }

.experience {
  display: grid;
  grid-template-columns: .8fr 1.15fr;
  gap: clamp(2rem, 8vw, 8rem);
  background: var(--white);
}
.experience__portrait { align-self: center; }
.experience__portrait img {
  display: block;
  width: 100%;
  max-height: 42rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 70% center;
  border-radius: 50% 50% 1.2rem 1.2rem;
}
.experience__portrait span {
  display: block;
  width: 85%;
  margin: -2rem auto 0;
  padding: .8rem 1rem;
  position: relative;
  background: var(--lime);
  transform: rotate(-2deg);
  font: 600 1.05rem/1.15 var(--display);
}
.experience__copy h2, .section-heading h2 {
  margin: var(--space-2) 0 var(--space-4);
  font-size: clamp(2.8rem, 5.4vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.06em;
}
.experience__copy > .lead { margin: 0; }
.experience__points { margin: 2rem 0 0; padding: 0; list-style: none; }
.experience__points li { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.experience__points li::before { content: "→"; margin-right: .7rem; color: var(--orange); }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.section-heading > p { max-width: 31ch; margin: 0; color: var(--muted); }
.section-heading h2 { max-width: 12ch; margin-bottom: 0; }
.section-heading--light { color: var(--white); }
.section-heading--light > p { color: rgba(255, 255, 255, .7); }

.composer { background: var(--green); color: var(--white); }
.composer__steps {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.2rem;
  color: rgba(255, 255, 255, .58);
  font: 500 .65rem var(--mono);
  text-transform: uppercase;
}
.composer__steps span.is-active { color: var(--lime); }
.composer__steps i { width: 2rem; height: 1px; background: currentColor; }
.city-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.city-card {
  position: relative;
  min-height: 10rem;
  padding: 1.1rem;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .04);
  color: var(--white);
  text-align: left;
  cursor: pointer;
  transition: transform 260ms var(--ease), background-color 200ms ease, color 200ms ease;
}
.city-card small { display: block; font: 500 .62rem var(--mono); letter-spacing: .08em; opacity: .72; }
.city-card strong { display: block; margin-top: .65rem; font: 600 clamp(1.8rem, 3vw, 3rem)/.95 var(--display); }
.city-card > span { position: absolute; right: 1rem; bottom: .8rem; }
.city-card.is-selected { background: var(--lime); color: var(--green); transform: translateY(-.3rem); }
.route-selector { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .8rem; }
.route-chip {
  padding: .85rem 1rem;
  border: 0;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  text-align: left;
  cursor: pointer;
  transition: transform 260ms var(--ease), background-color 200ms ease;
}
.route-chip strong, .route-chip small { display: block; }
.route-chip small { opacity: .68; }
.route-chip.is-selected { background: var(--orange); }
.journey-preview {
  margin-top: 1.1rem;
  padding: clamp(1.3rem, 3vw, 2.4rem);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 26px 70px rgba(4, 35, 31, .2);
}
.journey-preview__overview {
  display: grid;
  grid-template-columns: minmax(20rem, .85fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.journey-preview__media {
  position: relative;
  isolation: isolate;
  min-height: 24rem;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) * .75);
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
}
.journey-preview__media::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(5, 27, 35, .82));
}
.journey-preview__media-frame,
.journey-preview__media-frame img,
.journey-preview__media-frame video {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.journey-preview__media-frame img,
.journey-preview__media-frame video {
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.journey-preview__media-label {
  position: absolute;
  z-index: 2;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .6rem .8rem;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: rgba(5, 27, 35, .55);
  backdrop-filter: blur(8px);
  font-size: .72rem;
  font-weight: 700;
}
.journey-preview__header {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--space-3);
}
.journey-preview .kicker { color: var(--orange); }
.journey-preview h3 {
  max-width: 16ch;
  margin: .55rem 0 .75rem;
  font-size: clamp(2.1rem, 4vw, 4.2rem);
  line-height: .9;
  letter-spacing: -.055em;
}
.journey-preview__intro > p:last-child {
  max-width: 58ch;
  margin-bottom: 0;
  color: var(--muted);
}
.journey-preview__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: end;
  gap: 1rem;
  margin: 0;
}
.journey-preview__facts > div {
  padding-top: .8rem;
  border-top: 2px solid var(--lime);
}
.journey-preview__facts dt {
  color: var(--muted);
  font: 500 .57rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.journey-preview__facts dd {
  margin: .45rem 0 0;
  font: 600 1.05rem/1.15 var(--display);
}
.journey-preview__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: clamp(1.5rem, 3vw, 2.4rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.journey-preview__steps li {
  position: relative;
  min-height: 11rem;
  padding: 1.15rem clamp(.9rem, 2vw, 1.5rem) 1.3rem;
  opacity: 0;
  transform: translateY(.55rem);
}
.journey-preview__steps li + li { border-left: 1px solid var(--line); }
.journey-preview.is-animated .journey-preview__steps li {
  opacity: 1;
  transform: none;
  transition: opacity 360ms ease, transform 480ms var(--ease);
}
.journey-preview.is-animated .journey-preview__steps li:nth-child(2) { transition-delay: 40ms; }
.journey-preview.is-animated .journey-preview__steps li:nth-child(3) { transition-delay: 80ms; }
.journey-preview__steps span { color: var(--orange); font: 500 .62rem var(--mono); }
.journey-preview__steps strong { display: block; margin-top: 1.25rem; font: 600 1.35rem/1 var(--display); }
.journey-preview__steps p { margin: .65rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.journey-preview__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.25rem;
}
.journey-preview__note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .8rem;
  max-width: 66ch;
}
.journey-preview__note span {
  color: var(--orange);
  font: 500 .56rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.journey-preview__note p { margin: 0; color: var(--muted); font-size: .76rem; }

.duration-picker {
  margin-top: 1rem;
  padding: clamp(1.3rem, 3vw, 2.4rem);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  background: rgba(4, 35, 31, .18);
}
.duration-picker__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.duration-picker__header h2 {
  margin: .5rem 0 0;
  font-size: clamp(2.2rem, 4.5vw, 4.6rem);
  line-height: .9;
  letter-spacing: -.055em;
}
.duration-picker__header > p {
  max-width: 38ch;
  margin: 0;
  color: rgba(255, 255, 255, .68);
  font-size: .84rem;
}
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.package-card {
  min-height: 17rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), background-color 200ms ease, color 200ms ease;
}
.package-card > span { color: var(--orange); font: 500 .65rem var(--mono); }
.package-card h3 { margin: 1.1rem 0 .6rem; font-size: clamp(2.1rem, 3.2vw, 3.4rem); line-height: .9; letter-spacing: -.06em; }
.package-card p { max-width: 20ch; color: var(--muted); }
.package-card > strong { display: block; margin-top: 2.5rem; font: 600 2.35rem var(--display); }
.package-card > small { color: var(--muted); }
.package-card.is-selected { background: var(--navy); color: var(--white); box-shadow: var(--shadow); transform: translateY(-.45rem); }
.package-card.is-selected > span { color: var(--lime); }
.package-card.is-selected p, .package-card.is-selected > small { color: rgba(255, 255, 255, .68); }

.destinations { background: var(--navy); }
.album-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: .85rem; }
@media (min-width: 981px) {
  .destination-media .section-heading {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .85rem;
  }
  .destination-media .section-heading > div { grid-column: 1 / 9; }
  .destination-media .section-heading > p {
    grid-column: 9 / -1;
    justify-self: start;
    width: 100%;
  }
}
.album-card {
  grid-column: span 4;
  position: relative;
  isolation: isolate;
  min-height: 24rem;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: #24464b;
  color: var(--white);
  text-align: left;
  cursor: pointer;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.album-card--wide { grid-column: span 8; }
.album-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, transparent 22%, rgba(5, 24, 31, .9) 100%);
}
.album-card img, .album-card video {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms var(--ease);
}
.album-card__badge {
  position: absolute;
  top: .85rem;
  right: .85rem;
  padding: .38rem .55rem;
  border-radius: 999px;
  background: rgba(8, 40, 43, .72);
  font: 500 .55rem var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.album-card__content { position: absolute; inset: auto 0 0; padding: 1.2rem; }
.album-card__content small, .album-card__content strong, .album-card__content em { display: block; }
.album-card__content small { color: var(--lime); font: 500 .62rem var(--mono); letter-spacing: .08em; }
.album-card__content strong { margin: .5rem 0; font: 600 clamp(1.9rem, 3.3vw, 3.5rem)/.9 var(--display); letter-spacing: -.05em; }
.album-card__content em { color: rgba(255, 255, 255, .7); font-size: .75rem; font-style: normal; }

.zaanse-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: .85rem;
}
.zaanse-feature button {
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: #24464b;
  cursor: pointer;
}
.zaanse-feature__film {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 8.4;
  min-height: 38rem;
  color: var(--white);
  text-align: left;
}
.zaanse-feature__film::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 24, 31, .08) 25%, rgba(5, 24, 31, .92));
}
.zaanse-feature__film video {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease);
}
.zaanse-feature__content {
  position: absolute;
  inset: auto 0 0;
  display: block;
  padding: clamp(1.3rem, 4vw, 3rem);
}
.zaanse-feature__content small,
.zaanse-feature__content strong,
.zaanse-feature__content em,
.zaanse-feature__content b { display: block; }
.zaanse-feature__content small { color: var(--lime); font: 500 .62rem var(--mono); letter-spacing: .08em; }
.zaanse-feature__content strong {
  max-width: 12ch;
  margin: .65rem 0 .8rem;
  font: 600 clamp(2.5rem, 5vw, 5.4rem)/.88 var(--display);
  letter-spacing: -.06em;
}
.zaanse-feature__content em { color: rgba(255, 255, 255, .72); font-size: .8rem; font-style: normal; }
.zaanse-feature__content b { margin-top: 1.3rem; font-size: .82rem; }
.journal { background: var(--sand); }
.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
  grid-template-rows: repeat(2, minmax(16rem, 1fr));
  gap: .8rem;
}
.field-card {
  position: relative;
  isolation: isolate;
  min-height: 16rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
}
.field-card--route { grid-row: 1 / 3; min-height: 34rem; }
.field-card img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.field-card--story img { object-position: center 42%; }
.field-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, transparent 24%, rgba(5, 27, 35, .9) 100%);
}
.field-card__content {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(1.15rem, 3vw, 2.25rem);
}
.field-card small {
  color: var(--lime);
  font: 500 .61rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.field-card h3 {
  max-width: 15ch;
  margin: .65rem 0 .65rem;
  font-size: clamp(1.7rem, 3vw, 3.25rem);
  line-height: .92;
  letter-spacing: -.045em;
}
.field-card p { max-width: 54ch; margin: 0; color: rgba(255, 255, 255, .78); font-size: .84rem; }

.reviews { background: var(--paper); }
.review-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1rem, 4vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
}
.review-preview > span {
  align-self: start;
  color: var(--lime);
  font: 500 .65rem var(--mono);
}
.review-preview p {
  max-width: 29ch;
  margin: 0;
  font: 600 clamp(1.8rem, 3.8vw, 3.8rem)/1 var(--display);
  letter-spacing: -.045em;
}
.review-preview small {
  color: rgba(255, 255, 255, .64);
  font: 500 .63rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pricing { background: var(--white); }
.price-summary {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 2rem;
  padding: clamp(1.3rem, 3vw, 2.4rem);
  border-radius: var(--radius);
  background: var(--sand);
}
.price-summary h3 { margin: .45rem 0 0; font-size: clamp(2.1rem, 4vw, 4rem); line-height: .9; letter-spacing: -.05em; }
.price-summary dl { margin: 0; }
.price-summary dl > div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.price-summary dt { color: var(--muted); }
.price-summary dd { margin: 0; font: 600 1.4rem var(--display); }
.practical-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: .8rem; }
.practical-grid article { padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; }
.practical-grid h3 { margin: 0 0 .35rem; }
.practical-grid p { margin: 0; color: var(--muted); font-size: .86rem; }
.impact-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.5rem;
  margin-top: .8rem;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--lime);
}
.impact-card > strong { color: var(--green); font: 600 clamp(4.5rem, 9vw, 8rem)/.75 var(--display); letter-spacing: -.1em; }
.impact-card h3 { margin: 0 0 .35rem; font-size: clamp(1.5rem, 2.5vw, 2.3rem); }
.impact-card p { max-width: 60ch; margin: 0; }

.contact { background: var(--orange); color: var(--white); }
.contact__inner { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(2rem, 7vw, 8rem); align-items: end; }
.contact h2 { margin: .8rem 0 0; font-size: clamp(4rem, 8vw, 8rem); line-height: .82; letter-spacing: -.07em; }
.contact__card { padding: 1.4rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--radius); }
.contact__card p { margin: 0; }
.contact__card p + p { margin-top: var(--space-2); }
.contact__card .button { margin-top: var(--space-4); }
.contact__card small { display: block; margin-top: var(--space-3); color: rgba(255, 255, 255, .7); }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem var(--gutter); background: var(--navy); color: rgba(255, 255, 255, .65); font: 500 .62rem var(--mono); }

.floating-builder {
  position: fixed;
  z-index: 45;
  right: 1.2rem;
  bottom: 1.2rem;
  padding: .9rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 14px 38px rgba(7, 36, 40, .28);
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(.6rem);
  transition: transform 260ms var(--ease), opacity 200ms ease;
}
.floating-builder.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.floating-builder.is-visible.is-context-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(.6rem);
}

dialog {
  position: fixed;
  z-index: 2147483647;
  width: min(94vw, 1050px);
  max-height: 92svh;
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: 1.2rem;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 36px 90px rgba(0, 0, 0, .4);
}
dialog::backdrop { background: rgba(4, 26, 32, .78); opacity: 1; animation: none; }
dialog[open] { isolation: isolate; z-index: 2147483647; opacity: 1 !important; background: var(--white) !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none; }
.has-dialog { overflow: hidden; }
.destination-dialog > article { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 34rem; }
.destination-dialog > article, .host-album-dialog > article { position: relative; }
.dialog-loader { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; background: var(--white); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, visibility 0s linear 220ms; }
.dialog.is-loading .dialog-loader, dialog.is-loading .dialog-loader { opacity: 1; visibility: visible; transition: opacity 120ms ease; }
.dialog-loader__animation { width: min(11rem, 42vw); aspect-ratio: 2 / 1; background: center / contain no-repeat; }
.dialog-loader__animation:empty::before { content: ""; display: block; width: 2.7rem; height: 2.7rem; margin: calc(50% - 1.35rem) auto; border: .45rem solid var(--sand); border-top-color: var(--orange); border-radius: 50%; animation: dialog-loader-spin .8s linear infinite; }
@keyframes dialog-loader-spin { to { transform: rotate(360deg); } }
.destination-dialog__media { position: relative; min-height: 22rem; background: var(--navy); }
.destination-dialog__media > img, .destination-dialog__media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.destination-dialog__media.has-gallery { display: grid; grid-template-rows: minmax(18rem, 1.6fr) minmax(7rem, .4fr); }
.destination-dialog__media.has-gallery > video { min-height: 0; }
.destination-dialog__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
  padding: .35rem;
  background: var(--navy);
}
.destination-dialog__gallery button {
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  opacity: 1;
}
.destination-dialog__gallery button.is-active,
.destination-dialog__gallery button:hover,
.destination-dialog__gallery button:focus-visible {
  border-color: var(--lime);
  opacity: 1;
}
.destination-dialog__gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}
.destination-dialog__media,
.destination-dialog__gallery,
.destination-dialog__copy,
.host-album-dialog__media,
.host-album-dialog__copy { opacity: 1 !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.destination-dialog__copy { padding: clamp(1.5rem, 4vw, 3.5rem); }
.destination-dialog h2, .builder-dialog h2 { margin: .6rem 0 1rem; font-size: clamp(2.7rem, 5vw, 5rem); line-height: .86; letter-spacing: -.06em; }
.destination-dialog ul { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.4rem 0; padding: 0; list-style: none; }
.destination-dialog li { padding: .45rem .6rem; border-radius: 999px; background: var(--sand); font-size: .76rem; }
.builder-dialog > article { padding: clamp(1.5rem, 5vw, 4rem); }
.builder-dialog p { max-width: 54ch; }
.dialog-close {
  position: absolute;
  z-index: 4;
  top: .8rem;
  right: .8rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sand);
  cursor: pointer;
  font-size: 1.3rem;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity 440ms cubic-bezier(.22, 1, .36, 1), transform 520ms cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(.7rem) scale(.92); }
  to { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .button:hover, .floating-builder:hover { transform: translateY(-.18rem); }
  .site-header nav a:hover { background: rgba(255, 255, 255, .12); }
  .atlas-city:hover { color: var(--white); }
  .atlas-city.is-active:hover { color: var(--white); }
  .city-card:hover, .route-chip:hover { transform: translateY(-.2rem); }
  .package-card:hover { transform: translateY(-.4rem); box-shadow: var(--shadow); }
  .package-card.is-selected:hover { transform: translateY(-.45rem); }
  .journey-preview__media:hover .journey-preview__media-frame img,
  .journey-preview__media:hover .journey-preview__media-frame video { transform: scale(1.04); }
  .album-card:hover { transform: translateY(-.45rem); box-shadow: 0 24px 50px rgba(0, 0, 0, .26); }
  .album-card:hover img, .album-card:hover video { transform: scale(1.05); }
  .zaanse-feature__film:hover video { transform: scale(1.045); }
}
/* One reading surface at a time: the caption owns the words; map stops stay
   compact, fixed icons. Expanding several projected labels made them overlap
   in dense territories such as Haarlem. */
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:hover,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:focus-visible,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.is-selected,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:hover,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:focus-visible,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi.is-selected,
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker,
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker:hover,
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker:focus-visible,
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker.is-selected {
  display: grid;
  grid-template-columns: 2.75rem;
  grid-template-areas: "icon";
  min-width: 2.75rem;
  width: 2.75rem;
  min-height: 2.75rem;
  height: 2.75rem;
  padding: .3rem;
  column-gap: 0;
  overflow: visible;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark strong,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark small,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:hover strong,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:hover small,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:focus-visible strong,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:focus-visible small,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.is-selected strong,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.is-selected small {
  display: none !important;
}
.hero-atlas.is-camera-travelling .atlas-landmark,
.hero-atlas.is-route-riding .atlas-landmark {
  /* Projected coordinates change continuously during a camera move.  Do not
     expose half-positioned labels at the edge of the canvas; they return as
     settled, compact markers once the destination framing has completed. */
  opacity: 0 !important;
  pointer-events: none !important;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark__icon {
  grid-area: icon;
  width: 2.15rem;
  height: 2.15rem;
}

@media (max-width: 820px) {
  .site-header { grid-template-columns: auto 1fr auto; min-height: 4.3rem; }
  .site-header nav { display: none; }
  .language-toggle {
    position: fixed;
    z-index: 51;
    right: var(--gutter);
    top: .9rem;
    display: block;
    width: 5.1rem;
    background: var(--navy);
  }
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(5, 27, 35, .78), rgba(5, 27, 35, .28) 42%, rgba(5, 27, 35, .9)),
      linear-gradient(90deg, rgba(5, 27, 35, .7), rgba(5, 27, 35, .16));
  }
  .hero__inner, .experience, .contact__inner, .price-summary { grid-template-columns: 1fr; }
  .hero__inner {
    align-items: start;
    gap: 1.75rem;
    padding-top: 7rem;
    padding-bottom: 4.8rem;
  }
  .hero h1 { max-width: 100%; font-size: clamp(3.2rem, 12.5vw, 5.6rem); }
  .hero__lead { width: min(100%, 36rem); max-width: 36rem; padding-right: .25rem; }
  .hero-atlas {
    grid-template-rows: auto minmax(18rem, 1fr) auto;
    min-height: 27rem;
  }
  .hero-atlas__stage { min-height: 18rem; }
  .hero-atlas__caption { grid-template-columns: .45fr 1fr auto; }
  .experience__portrait { max-width: 25rem; }
  .section-heading { display: block; }
  .section-heading > p { margin: 1rem 0 0; }
  .city-selector, .package-grid, .practical-grid { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .field-card, .field-card--route { grid-row: auto; min-height: 24rem; }
  .review-preview { grid-template-columns: 1fr; align-items: start; }
  .city-card { min-height: 7.5rem; }
  .route-selector { grid-template-columns: 1fr; }
  .journey-preview__overview { grid-template-columns: 1fr; }
  .journey-preview__media { min-height: 0; aspect-ratio: 16 / 9; }
  .journey-preview__facts { max-width: 34rem; }
  .duration-picker__header { display: block; }
  .duration-picker__header > p { margin-top: 1rem; }
  .album-grid { grid-template-columns: 1fr; }
  .album-card, .album-card--wide { grid-column: auto; min-height: 21rem; }
  .zaanse-feature { grid-template-columns: 1fr; }
  .zaanse-feature__film { min-height: 31rem; }
  .package-card { min-height: 14rem; }
  .package-card > strong { margin-top: 1.8rem; }
  .destination-dialog > article { grid-template-columns: 1fr; }
  .destination-dialog__media { max-height: 38svh; }
  .destination-dialog__media.has-gallery { max-height: none; grid-template-rows: minmax(16rem, 1fr) 7rem; }
  .floating-builder { left: 1rem; right: 1rem; bottom: .8rem; }
}

@media (max-width: 520px) {
  :root { --gutter: 1rem; }
  .hero { min-height: max(100svh, 56rem); }
  .hero__video {
    bottom: auto;
    height: min(60svh, 32rem);
    object-position: center;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  }
  .hero__inner {
    gap: 1.5rem;
    padding-top: 5.8rem;
    padding-bottom: 4.3rem;
  }
  .hero h1 {
    max-width: 100%;
    margin: var(--space-2) 0 1.75rem;
    font-size: clamp(2.15rem, 9.8vw, 3.2rem);
    line-height: .9;
  }
  .hero__lead {
    width: 100%;
    max-width: 34ch;
    margin-bottom: var(--space-3);
    font-size: .96rem;
    line-height: 1.35;
  }
  .hero .button { min-height: 2.85rem; padding: .72rem 1rem; font-size: .88rem; }
  .hero-atlas {
    grid-template-rows: auto minmax(15.5rem, 1fr) auto;
    min-height: 24.5rem;
  }
  .hero-atlas__heading { padding-bottom: .5rem; font-size: .54rem; }
  .hero-atlas__heading span { display: none; }
  .hero-atlas__stage { min-height: 15.5rem; }
  .hero-atlas__shape { inset: .25rem 3% 0; width: 94%; height: calc(100% - .25rem); }
  .hero-atlas__watermark { right: 2%; bottom: 4%; font-size: 3.2rem; }
  .builder-dialog {
    position: fixed;
    inset: auto .5rem max(.5rem, env(safe-area-inset-bottom));
    width: auto;
    max-height: min(82svh, 42rem);
    margin: 0;
    border-radius: 1.25rem;
  }
  .builder-dialog > article {
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  }
  .builder-dialog .button {
    width: 100%;
    justify-content: center;
  }
  .atlas-city {
    min-width: 5.7rem;
    min-height: 2.75rem;
    gap: .3rem;
    padding: .5rem .2rem;
  }
  .atlas-city span { font-size: .48rem; }
  .atlas-city strong { font-size: .64rem; }
  .atlas-city strong::after { left: -.1rem; right: -.04rem; bottom: -.34rem; }
  .hero-atlas__caption {
    grid-template-columns: 1fr;
    gap: .35rem;
    min-height: 0;
    padding: .7rem 0;
  }
  .hero-atlas__caption > span { font-size: .5rem; }
  .hero-atlas__caption strong { font-size: 1.15rem; }
  .hero-atlas__caption p { max-width: 38ch; margin-top: .2rem; font-size: .68rem; }
  .hero-atlas__caption a { margin-top: .2rem; font-size: .68rem; }
  .hero__film-status { bottom: 1rem; }
  .hero__film-status > span { display: none; }
  .hero__scroll { display: none; }
  .zaanse-feature__film { aspect-ratio: 4 / 5; min-height: 27rem; }
  .journey-preview { padding: 1.1rem; }
  .journey-preview__overview { gap: 1.25rem; }
  .journey-preview__media { aspect-ratio: 4 / 3; }
  .journey-preview h3 { font-size: 2.25rem; }
  .journey-preview__facts { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .journey-preview__steps { grid-template-columns: 1fr; }
  .journey-preview__steps li { min-height: 0; padding: 1rem .2rem 1.1rem; }
  .journey-preview__steps li + li { border-top: 1px solid var(--line); border-left: 0; }
  .journey-preview__steps strong { margin-top: .8rem; }
  .journey-preview__footer { display: block; }
  .journey-preview__note { grid-template-columns: 1fr; gap: .35rem; }
  .journey-preview__footer .button { width: 100%; margin-top: 1rem; }
  .duration-picker { padding: 1.1rem; }
  .duration-picker__header h2 { font-size: 2.5rem; }
  .package-card { min-height: 0; padding: 1.1rem; }
  .package-card h3 { font-size: 2.4rem; }
  .package-card > strong { margin-top: 1.4rem; }
  .impact-card { grid-template-columns: 1fr; }
  .site-footer { display: block; padding-bottom: 5rem; }
  .site-footer span { display: block; margin-top: .35rem; }
}

/* Conversion and content system */
.button--accent { background: var(--orange); color: var(--white); }
.button--ghost { border: 1px solid var(--line); background: transparent; color: var(--ink); }

.destination-select { background: var(--paper); }
.destination-carousel { position: relative; }
.destination-carousel__controls {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.destination-carousel__controls button,
.destination-dots button {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.destination-carousel__controls button {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.1rem;
}
.destination-carousel__controls p {
  margin: 0;
  font: 500 .65rem var(--mono);
  letter-spacing: .08em;
}
.destination-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.destination-choice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(11rem, .8fr) minmax(0, 1.2fr);
  min-height: 25rem;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 35px rgba(12, 48, 44, .06);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 200ms ease;
}
.destination-choice.is-selected { border-color: var(--green); box-shadow: 0 20px 48px rgba(12, 48, 44, .15); }
.destination-choice__media { position: relative; min-height: 100%; overflow: hidden; background: var(--navy); }
.destination-choice__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms var(--ease), opacity 200ms ease;
}
.destination-choice__body { display: flex; flex-direction: column; padding: clamp(1.2rem, 2.5vw, 2.1rem); }
.destination-choice__body small { color: var(--orange); font: 500 .62rem var(--mono); letter-spacing: .08em; }
.destination-choice__body > strong { margin: var(--space-2) 0; font: 600 clamp(2.2rem, 3.5vw, 3.8rem)/.9 var(--display); letter-spacing: -.055em; }
.destination-choice__body > em { color: var(--muted); font-style: normal; font-size: .88rem; line-height: 1.35; }
.destination-choice__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.destination-choice__tags b {
  padding: .4rem .55rem;
  border-radius: 999px;
  background: var(--paper);
  font-size: .65rem;
  font-weight: 600;
}
.destination-choice__action {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1.35rem;
  color: var(--green);
  font-weight: 700;
}
.destination-choice__action::after { content: "→"; }
.destination-dots { display: none; justify-content: center; gap: .4rem; margin-top: .9rem; }
.destination-dots button { width: 2.25rem; height: 2.25rem; padding: 0; }
.destination-dots button::before {
  content: "";
  display: block;
  width: .45rem;
  height: .45rem;
  margin: auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 25%, transparent);
  transition: transform 200ms var(--ease), background-color 200ms ease;
}
.destination-dots button.is-active::before { background: var(--orange); transform: scale(1.45); }

.composer-progress {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .3rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}
.composer-progress li {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: .55rem .6rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .55);
  font: 500 .58rem var(--mono);
  text-transform: uppercase;
}
.composer-progress li span {
  display: grid;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.composer-progress li.is-active { color: var(--lime); border-color: var(--lime); }
.composer-progress li.is-complete { color: var(--white); }
.composer-progress li.is-complete span { border-color: var(--lime); background: var(--lime); color: var(--green); }

.selected-destination {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border-radius: .9rem;
  background: rgba(255, 255, 255, .1);
}
.selected-destination > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--lime); color: var(--green); font-weight: 800; }
.selected-destination small, .selected-destination strong { display: block; }
.selected-destination small { color: rgba(255, 255, 255, .6); font: 500 .56rem var(--mono); text-transform: uppercase; }
.selected-destination strong { font-size: 1.15rem; }
.selected-destination a { color: var(--white); font-size: .74rem; font-weight: 700; }

.builder-step {
  margin: 1rem 0 0;
  padding: clamp(1.1rem, 2.5vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius);
  background: rgba(4, 35, 31, .18);
}
.builder-step__header { display: flex; align-items: start; gap: .8rem; }
.builder-step__header > span,
.builder-step legend > span {
  color: var(--lime);
  font: 500 .65rem var(--mono);
}
.builder-step__header h3 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.builder-step__header p { margin: .3rem 0 0; color: rgba(255, 255, 255, .68); }
.builder-step legend {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 0 .25rem;
  font: 600 clamp(1.5rem, 3vw, 2.4rem)/1 var(--display);
}
.builder-step > p { color: rgba(255, 255, 255, .68); }
.builder-step .route-selector { margin-top: 1rem; }
.route-chip { min-height: 5rem; padding: 1rem 1.1rem; }
.route-chip strong { font-size: 1rem; }
.route-chip small { margin-top: .25rem; font-size: .72rem; }

.journey-preview__badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.journey-preview__badges span {
  padding: .4rem .55rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: .64rem;
  font-weight: 600;
}
.journey-preview__facts { grid-template-columns: repeat(3, 1fr); }
.discover-strip { margin-top: clamp(1.5rem, 3vw, 2.4rem); }
.discover-strip > header { padding-bottom: .8rem; border-bottom: 1px solid var(--line); color: var(--orange); font: 500 .62rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.discover-strip .journey-preview__steps { margin-top: 0; border-top: 0; }

.tour-builder-form { margin-top: 1rem; }
.tour-builder-form fieldset { min-width: 0; }
.package-card { position: relative; display: block; }
.package-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.package-card:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 4px; }
.package-card:has(input:checked) { background: var(--navy); color: var(--white); box-shadow: var(--shadow); transform: translateY(-.35rem); }
.package-card:has(input:checked) > span { color: var(--lime); }
.package-card:has(input:checked) p,
.package-card:has(input:checked) > small { color: rgba(255, 255, 255, .68); }
.package-card.is-disabled { opacity: .45; cursor: not-allowed; transform: none; }

.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.choice-grid--four { grid-template-columns: repeat(4, 1fr); }
.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 9rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: transform 240ms var(--ease), background-color 200ms ease, color 200ms ease;
}
.choice-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-card > span { color: var(--lime); font: 600 1.4rem var(--display); }
.choice-card strong { margin-top: auto; }
.choice-card small { color: rgba(255, 255, 255, .62); }
.choice-grid--four .choice-card:not(:has(small))::after {
  content: "";
  display: block;
  min-height: 1.5em;
}
.choice-card:has(input:checked) { background: var(--lime); color: var(--green-dark); }
.choice-card:has(input:checked) > span { color: var(--orange); }
.choice-card:has(input:checked) small { color: color-mix(in srgb, var(--green-dark) 70%, transparent); }
.choice-card:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 4px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.form-grid label { display: flex; flex-direction: column; gap: .4rem; }
.form-grid label > span { font-size: .72rem; font-weight: 700; }
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: .75rem .85rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: .7rem;
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  font: inherit;
}
.form-grid textarea { resize: vertical; }
.form-grid select option { color: var(--ink); }
.form-grid input::placeholder,
.form-grid textarea::placeholder { color: rgba(255, 255, 255, .55); }
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus { border-color: var(--lime); outline: 2px solid var(--lime); outline-offset: 1px; }
.form-grid__wide { grid-column: 1 / -1; }
.form-grid label small { color: rgba(255, 255, 255, .62); }
.form-error { padding: .8rem 1rem; border-radius: .7rem; background: #a52222; color: var(--white) !important; }
.builder-details > .button { margin-top: 1.2rem; }

.album-card__content b { display: block; margin-top: .9rem; font-size: .72rem; }

.formats { background: var(--paper); }
.format-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.format-details article {
  display: flex;
  flex-direction: column;
  min-height: 30rem;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 16px 45px rgba(12, 48, 44, .08);
}
.format-details article:nth-child(2) { background: var(--navy); color: var(--white); }
.format-details article > span { color: var(--orange); font: 500 .62rem var(--mono); }
.format-details h3 { margin: 2rem 0 .4rem; font-size: clamp(2.5rem, 4vw, 4rem); line-height: .9; }
.format-details strong { font: 600 1.4rem var(--display); }
.format-details p { color: var(--muted); }
.format-details article:nth-child(2) p { color: rgba(255, 255, 255, .68); }
.format-details button { align-self: start; margin-top: auto; padding: .7rem 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; font-weight: 700; cursor: pointer; }

.price-table-wrap { overflow-x: auto; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.price-table { width: 100%; min-width: 42rem; border-collapse: collapse; }
.price-table th, .price-table td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); text-align: left; }
.price-table thead th { background: var(--navy); color: var(--white); font: 500 .65rem var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.price-table tbody th { font: 600 1.35rem var(--display); }
.price-table-wrap > p { margin: 0; padding: 1rem 1.2rem; color: var(--muted); font-size: .8rem; }

.practical { background: var(--sand); }
.practical-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.practical-card { padding: clamp(1.2rem, 3vw, 2.3rem); border-radius: var(--radius); background: var(--white); }
.practical-card--picnic { background: var(--green); color: var(--white); }
.practical-card--days { background: var(--navy); color: var(--white); }
.practical-card > small { color: var(--orange); font: 500 .62rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.practical-card h3 { margin: .8rem 0; font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: .95; }
.practical-card ul { padding-left: 1.1rem; }
.practical-card dl { margin: 1.2rem 0; }
.practical-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.practical-card dd { margin: 0; font-weight: 700; }
.practical-card__note { padding-top: .8rem; border-top: 1px solid currentColor; opacity: .68; font-size: .75rem; }

.slow { background: var(--green-dark); color: var(--white); }
.slow .section-heading > p { color: rgba(255, 255, 255, .68); }
.slow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.slow-grid article { padding: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .28); }
.slow-grid span { color: var(--lime); font: 500 .62rem var(--mono); }
.slow-grid h3 { margin: 2rem 0 .5rem; font-size: 2rem; }
.slow-grid p { margin: 0; color: rgba(255, 255, 255, .68); }

.review-dialog > article { position: relative; padding: clamp(1.4rem, 4vw, 3.2rem); }
.review-dialog h2, .confirmation-dialog h2 { margin: .6rem 0 1.4rem; font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: .9; }
.review-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.review-summary__group { padding: 1rem; border-radius: .85rem; background: var(--paper); }
.review-summary__group h3 { margin: 0 0 .7rem; font-size: 1.2rem; }
.review-summary dl { margin: 0; }
.review-summary dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.review-summary dt { color: var(--muted); }
.review-summary dd { margin: 0; text-align: right; font-weight: 700; }
.review-summary__group--total { grid-column: 1 / -1; background: var(--navy); color: var(--white); }
.review-summary__group--total dt { color: rgba(255, 255, 255, .68); }
.review-summary__group--total .total-line { font-size: 1.15rem; }
.review-summary__group--total .total-line dd { color: var(--lime); font: 600 1.45rem var(--display); }
.review-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.2rem; }
.review-dialog__note { color: var(--muted); font-size: .76rem; }
.confirmation-dialog { width: min(92vw, 650px); }
.confirmation-dialog > article { padding: clamp(1.5rem, 5vw, 4rem); text-align: center; }
.confirmation-dialog__mark { display: grid; width: 4rem; height: 4rem; margin: 0 auto 1.3rem; place-items: center; border-radius: 50%; background: var(--lime); color: var(--green); font-size: 2rem; font-weight: 800; }

/* Scroll chapter narration */
.chapter-rail {
  position: fixed; z-index: 38; top: 0; bottom: 0; left: 1rem; display: grid; gap: .35rem;
  align-content: center; pointer-events: none;
}
.chapter-rail a { display: flex; align-items: center; gap: .55rem; color: white; text-decoration: none; opacity: .48; pointer-events: auto; transition: opacity 180ms ease; -webkit-font-smoothing: antialiased; }
.chapter-rail a span { font: 600 .625rem var(--mono); }
.chapter-rail a b { max-width: 0; overflow: hidden; font: 650 .625rem var(--mono); letter-spacing: .045em; white-space: nowrap; text-transform: uppercase; transition: max-width 220ms var(--ease); }
.chapter-rail a::after { order: -1; width: 1.4rem; height: 1px; background: currentColor; content: ""; transition: width 220ms var(--ease); }
.chapter-rail a.is-active { opacity: 1; }
.chapter-rail a.is-active::after { width: 2.8rem; }
.chapter-rail a.is-active b, .chapter-rail a:hover b, .chapter-rail a:focus-visible b { max-width: 8rem; }

.atlas-landmark { position: absolute; z-index: 4; display: grid; place-items: center; width: 2.35rem; height: 2.35rem; padding: 0; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: var(--orange); color: white; box-shadow: 0 10px 24px rgba(0,0,0,.28); cursor: pointer; }
.atlas-landmark span { font-size: .85rem; }
.atlas-landmark strong { position: absolute; top: calc(100% + .35rem); left: 50%; padding: .3rem .45rem; border-radius: .25rem; background: rgba(7,36,40,.9); font: 500 .52rem var(--mono); white-space: normal; max-width: 14rem; text-align: center; transform: translateX(-50%); }
.atlas-landmark--mill { top: 18%; right: 12%; }
.atlas-landmark--water { top: 39%; left: 16%; background: #218b9b; animation-delay: -1.2s; }
.atlas-story { position: absolute; z-index: 8; right: 1rem; bottom: 1rem; left: 1rem; display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: 1rem; border: 1px solid rgba(255,255,255,.28); border-radius: .8rem; background: rgba(7,36,40,.94); color: white; box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.atlas-story[hidden] { display: none; }
.atlas-story > button { position: absolute; top: .35rem; right: .45rem; border: 0; background: none; color: white; font-size: 1.2rem; cursor: pointer; }
.atlas-story > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: var(--orange); }
.atlas-story small { color: var(--lime); font: 500 .56rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.atlas-story strong { display: block; margin: .25rem 1.2rem .3rem 0; font: 600 1.25rem var(--display); }
.atlas-story p { margin: 0; color: rgba(255,255,255,.76); font-size: .72rem; line-height: 1.45; }
.atlas-story a { display: inline-block; margin-top: .6rem; color: white; font-size: .7rem; font-weight: 700; }

.price-validity { margin: 1.2rem 0; padding: 1rem 1.15rem; border-left: .3rem solid var(--orange); background: rgba(243,93,47,.08); }
.price-validity strong { font: 600 1.15rem var(--display); }
.price-validity p { margin: .35rem 0 0; color: var(--muted); font-size: .8rem; }
.encounter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.encounter-grid h3 { margin: 3rem 0 .7rem; font-size: clamp(1.8rem, 3vw, 3rem); line-height: .92; }
.encounters { background: var(--green); color: white; }
.encounter-grid { grid-template-columns: 1fr 1fr; }
.encounter-grid article { min-height: 22rem; padding: clamp(1.3rem, 3vw, 2.4rem); border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.08), transparent); }
.encounter-grid small { color: var(--lime); font: 500 .62rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.encounter-grid h3 { margin-top: 5rem; }
.encounter-grid p, .encounters__note { color: rgba(255,255,255,.72); }
.encounters__note { max-width: 70ch; margin: 1rem 0 0; font-size: .75rem; }
.contact-links { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: 1rem; }
.contact-links a { padding: .7rem .8rem; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; color: white; font-size: .72rem; font-weight: 700; text-align: center; text-decoration: none; }
.contact-links a:hover, .contact-links a:focus-visible { background: white; color: var(--orange); }

/* Cycling-tour editorial content */
.cycling-manifesto { background: var(--paper); }
.cycling-manifesto .section-heading h2 { max-width: 13ch; }
.cycling-manifesto__grid { display: grid; grid-template-columns: 1.15fr .9fr .95fr; gap: 1px; margin-top: clamp(2rem, 5vw, 5rem); background: var(--line); border: 1px solid var(--line); }
.cycling-manifesto__grid article { min-height: 17rem; padding: clamp(1.25rem, 3vw, 2.3rem); background: var(--white); }
.cycling-manifesto__grid article:first-child { background: var(--green); color: white; }
.cycling-manifesto__grid span { color: var(--orange); font: 500 .62rem var(--mono); }
.cycling-manifesto__grid h3 { max-width: 14ch; margin: 4rem 0 .8rem; font-size: clamp(1.65rem, 2.8vw, 2.8rem); line-height: .98; }
.cycling-manifesto__grid p { max-width: 42ch; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.cycling-manifesto__grid article:first-child p { color: rgba(255,255,255,.7); }
.editorial-sources { margin: 1.3rem 0 0; color: var(--muted); font-size: .66rem; line-height: 1.55; }
.editorial-sources a { color: inherit; text-underline-offset: .18em; }
.faq { background: #efe9dd; }
.faq__list { margin-top: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 1.35rem 3.5rem 1.35rem 0; list-style: none; cursor: pointer; font: 600 clamp(1.15rem, 2vw, 1.65rem)/1.15 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { position: absolute; top: 50%; right: .25rem; width: 1.8rem; height: 1.8rem; border: 1px solid currentColor; border-radius: 50%; content: "+"; font: 400 1.1rem/1.65rem var(--body); text-align: center; transform: translateY(-50%); transition: transform 220ms var(--ease), background-color 200ms ease, color 200ms ease; }
.faq details[open] summary::after { background: var(--orange); color: white; transform: translateY(-50%) rotate(45deg); }
.faq details p { max-width: 70ch; margin: -.25rem 0 1.4rem; color: var(--muted); line-height: 1.65; }
.contact-links a { font-size: clamp(.72rem, 1.1vw, .9rem); }

/* Shared spatial anchors between Three.js and the interface */
.hero-atlas { isolation: isolate; overflow: hidden; }
.hero-atlas__stage { position: relative; min-height: clamp(25rem, 34vw, 31rem); overflow: hidden; }
.atlas-webgl, .atlas-fallback, .atlas-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlas-webgl { z-index: 1; }
.atlas-webgl canvas { display: block; width: 100%; height: 100%; }
.atlas-fallback { z-index: 1; padding: 5%; fill: rgba(13,81,72,.82); stroke: rgba(169,216,193,.55); stroke-width: 1.5; }
.atlas-fallback__regions { fill: rgba(194,190,169,.68); stroke: rgba(67,94,76,.62); stroke-width: 1.25; }
.atlas-fallback__regions text { fill: rgba(37,65,57,.52); stroke: none; font: 600 7px ui-monospace, monospace; letter-spacing: .12em; text-anchor: middle; }
.is-webgl-ready .atlas-fallback { opacity: 0; }
.atlas-overlay { z-index: 3; pointer-events: none; }
.hero-atlas__watermark { z-index: 2; right: 4%; bottom: 3%; opacity: .1; font-size: clamp(3.4rem, 6vw, 6.8rem); }

.atlas-city, .atlas-landmark {
  position: absolute; top: 0; left: 0; z-index: 2; margin: 0; pointer-events: auto;
  transform: translate3d(calc(var(--map-x, -100px) + var(--collision-x, 0px)), calc(var(--map-y, -100px) + var(--collision-y, 0px)), 0) translate(var(--marker-anchor-x, 0%), var(--marker-anchor-y, -50%));
  transition: opacity 200ms ease, background-color 200ms ease, color 200ms ease, box-shadow 220ms cubic-bezier(.22,1,.36,1);
}
.atlas-city {
  display: grid; grid-template-columns: .58rem auto; grid-template-areas: "pin number" "pin label"; column-gap: .42rem;
  width: max-content; padding: .38rem .55rem .4rem .42rem; border: 1px solid rgba(255,255,255,.2); border-radius: .45rem;
  background: rgba(5,31,37,.78); color: rgba(255,255,255,.74); box-shadow: 0 8px 20px rgba(0,0,0,.16); backdrop-filter: blur(9px);
}
.atlas-city i { grid-area: pin; align-self: center; display: block; width: .52rem; height: .52rem; border: 2px solid currentColor; border-radius: 50%; box-shadow: 0 0 0 .2rem rgba(255,255,255,.08); }
.atlas-city span { grid-area: number; color: var(--lime); font: 500 .48rem/1 var(--mono); }
.atlas-city strong { grid-area: label; color: inherit; font: 700 .68rem/1.12 var(--body); max-width: 14rem; }
.atlas-city strong::after { display: none; }
.atlas-city.is-active { background: var(--paper); color: var(--navy); box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.atlas-city.is-active i { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 .22rem rgba(243,93,47,.16); }
.atlas-city.is-active span { color: var(--orange); }
.atlas-landmark {
  display: grid; grid-template-columns: 2.35rem auto; grid-template-areas: "icon title" "icon meta"; align-items: center; column-gap: .45rem;
  width: max-content; height: auto; padding: .28rem .5rem .28rem .28rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  background: rgba(5,31,37,.84); color: white; animation: none; box-shadow: 0 10px 26px rgba(0,0,0,.2); backdrop-filter: blur(9px);
}
.atlas-landmark__icon { grid-area: icon; display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 50%; background: var(--orange); color: white; }
.atlas-landmark__icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.atlas-landmark strong { position: static; grid-area: title; align-self: end; padding: 0; background: none; font: 700 .59rem/1.1 var(--body); max-width: 14rem; transform: none; }
.atlas-landmark small { grid-area: meta; align-self: start; color: rgba(255,255,255,.58); font: 500 .45rem/1.2 var(--mono); max-width: 14rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.atlas-landmark--water .atlas-landmark__icon { background: #218b9b; }
.atlas-landmark--farm .atlas-landmark__icon { background: #4f8c57; }
.atlas-landmark--heritage .atlas-landmark__icon { background: #c77b28; }
.atlas-landmark.is-selected { border-color: var(--lime); background: var(--paper); color: var(--navy); box-shadow: 0 0 0 .18rem rgba(217,235,52,.15), 0 14px 32px rgba(0,0,0,.3); }
.atlas-landmark[data-direction="left"] { grid-template-columns: auto 2.35rem; grid-template-areas: "title icon" "meta icon"; padding: .28rem .28rem .28rem .5rem; }
.atlas-landmark.is-selected small { color: var(--muted); }
.atlas-city[data-map-hidden], .atlas-landmark[data-map-hidden] { opacity: 0; pointer-events: none; }
.atlas-webgl-status { position: absolute; z-index: 4; right: .75rem; bottom: .55rem; margin: 0; color: rgba(255,255,255,.42); font: 500 .46rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.atlas-webgl-status::before { display: inline-block; width: .38rem; height: .38rem; margin-right: .35rem; border-radius: 50%; background: rgba(255,255,255,.35); content: ""; }
.atlas-webgl-status[data-ready="true"]::before { background: var(--lime); box-shadow: 0 0 0 .18rem rgba(217,235,52,.1); }

@media (hover: hover) and (pointer: fine) {
  .atlas-city:hover { background: var(--paper); color: var(--navy); }
  .atlas-landmark:hover { border-color: rgba(217,235,52,.8); background: rgba(8,46,49,.96); }
}

@media (hover: hover) and (pointer: fine) {
  .destination-choice:hover { transform: translateY(-.35rem); box-shadow: var(--shadow); }
  .destination-choice:hover .destination-choice__media img { transform: scale(1.045); }
  .choice-card:hover { transform: translateY(-.2rem); }
}

@media (max-width: 900px) {
  .cycling-manifesto__grid { grid-template-columns: 1fr; }
  .cycling-manifesto__grid article { min-height: 0; }
  .cycling-manifesto__grid h3 { margin-top: 2.5rem; }
  .chapter-rail { display: none; }
  .composer-progress { grid-template-columns: repeat(3, 1fr); }
  .choice-grid--four { grid-template-columns: repeat(2, 1fr); }
  .format-details { grid-template-columns: 1fr; }
  .format-details article { min-height: 22rem; }
  .practical-cards { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hero .eyebrow { width: 100%; max-width: none; font-size: .5rem; line-height: 1.45; white-space: normal; }
  .hero-atlas__stage { min-height: 25rem; }
  .atlas-city { padding: .3rem .42rem .32rem .34rem; }
  .atlas-city strong { font-size: .58rem; }
  .atlas-city span { font-size: .42rem; }
  .atlas-landmark { grid-template-columns: 1.9rem auto; padding: .22rem .4rem .22rem .22rem; column-gap: .35rem; }
  .atlas-landmark__icon { width: 1.9rem; height: 1.9rem; }
  .atlas-landmark__icon svg { width: 1.15rem; height: 1.15rem; }
  .atlas-landmark strong { font-size: .51rem; }
  .atlas-landmark small { display: none; }
  .atlas-webgl-status { font-size: 0; }
  .encounter-grid { grid-template-columns: 1fr; }
  .encounter-grid article { min-height: 15rem; }
  .destination-carousel__controls, .destination-dots { display: flex; }
  .destination-track {
    display: flex;
    gap: .8rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    padding: .2rem max(var(--gutter), calc((100vw - min(86vw, 23rem)) / 2));
    margin-inline: calc(var(--gutter) * -1);
  }
  .destination-track::-webkit-scrollbar { display: none; }
  .destination-choice { flex: 0 0 min(86vw, 23rem); grid-template-columns: 1fr; grid-template-rows: 14rem 1fr; min-height: 35rem; scroll-snap-align: center; }
  .destination-choice__media { min-height: 14rem; }
  .destination-choice__body { padding: 1.15rem; }
  .destination-choice__body > strong { font-size: 2.5rem; }
  .composer-progress { display: flex; overflow-x: auto; padding-bottom: .3rem; }
  .composer-progress li { flex: 0 0 auto; min-width: 7.6rem; }
  .journey-preview__facts { grid-template-columns: 1fr; }
  .choice-grid, .choice-grid--four { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid__wide { grid-column: auto; }
  .slow-grid { grid-template-columns: 1fr; }
  .review-summary { grid-template-columns: 1fr; }
  .review-summary__group--total { grid-column: auto; }
  .review-actions { flex-direction: column-reverse; }
  .review-actions .button { width: 100%; }
}

@media (max-width: 520px) {
  .destination-choice { flex-basis: 84vw; }
  .selected-destination { grid-template-columns: auto 1fr; }
  .selected-destination a { grid-column: 2; }
  .choice-grid, .choice-grid--four { grid-template-columns: 1fr; }
  .choice-card { min-height: 7.5rem; }
  .tour-builder-form .package-grid { gap: .7rem; }
  .review-dialog {
    position: fixed;
    inset: auto .5rem max(.5rem, env(safe-area-inset-bottom));
    width: auto;
    max-height: 88svh;
    margin: 0;
    border-radius: 1.25rem;
  }
  .review-dialog > article { padding: 1.35rem 1rem calc(1.35rem + env(safe-area-inset-bottom)); }
  .review-dialog h2 { padding-right: 2rem; font-size: 2.5rem; }
}

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

/* Art direction, navigation and shared components */
body { background: #f4efe5; }
html.has-mobile-menu, html.has-mobile-menu body, html.has-dialog, html.has-dialog body { overflow: hidden; }

.site-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 5.25rem;
  padding-block: .75rem;
  background: linear-gradient(180deg, rgba(4, 27, 32, .64), transparent);
  transition: min-height 420ms var(--ease), padding 420ms var(--ease), background-color 300ms ease, box-shadow 300ms ease;
}
.site-header.is-scrolled { min-height: 4.15rem; padding-block: .45rem; background: rgba(7, 42, 42, .88); backdrop-filter: blur(18px) saturate(120%); }
.site-header__nav { justify-self: center; }
.site-header__actions { display: flex; justify-self: end; align-items: center; gap: .55rem; }
.header-cta {
  display: inline-flex; min-height: 2.55rem; align-items: center; padding: .55rem .95rem; border-radius: 999px;
  background: var(--lime); color: var(--green-dark); font-size: .74rem; font-weight: 750; text-decoration: none;
}
.menu-toggle { display: none; }
.mobile-menu { position: fixed; z-index: 80; inset: 0; }
.mobile-menu__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(3, 22, 26, .56); opacity: 0; transition: opacity 260ms ease; }
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: min(90vw, 27rem); height: 100%;
  padding: max(1rem, env(safe-area-inset-top)) 1.25rem max(1.25rem, env(safe-area-inset-bottom)); background: var(--paper); color: var(--ink);
  box-shadow: -24px 0 60px rgba(0,0,0,.24); transform: translateX(102%); transition: transform 320ms var(--ease);
}
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }
.mobile-menu.is-open .mobile-menu__panel { transform: none; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); font: 600 1.15rem var(--display); }
.mobile-menu__top button { width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 1.5rem; cursor: pointer; }
.mobile-menu nav { display: grid; margin-top: 1.4rem; }
.mobile-menu nav a { padding: .85rem 0; border-bottom: 1px solid var(--line); color: inherit; font: 600 clamp(1.8rem, 9vw, 2.7rem)/1 var(--display); text-decoration: none; }
.mobile-menu__footer { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: center; margin-top: auto; }
.mobile-menu .language-toggle { position: static; width: auto; border-color: var(--line); background: transparent; color: var(--ink); }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; }
.hero__secondary { padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.5); color: white; font-size: .82rem; font-weight: 700; text-decoration: none; }
.hero-atlas__heading { padding: .8rem 1rem .7rem; }
.hero-atlas__caption { padding-inline: 1rem; }
.atlas-fallback { transition: opacity 400ms ease; }
.atlas-landmark { right: auto; bottom: auto; }

@media (min-width: 721px) {
  .destination-choice:last-child { grid-column: 1 / -1; grid-template-columns: minmax(15rem, .55fr) minmax(0, 1.45fr); }
}

.guide-intro {
  display: grid; grid-template-columns: minmax(10rem, .58fr) minmax(0, 1.42fr); gap: clamp(1.4rem, 5vw, 4rem);
  align-items: center; margin-top: clamp(2rem, 5vw, 4.5rem); padding: clamp(1rem, 2.5vw, 1.6rem); border-radius: var(--radius); background: var(--sand);
}
.guide-intro img { width: 100%; height: clamp(15rem, 28vw, 24rem); border-radius: calc(var(--radius) - .45rem); object-fit: cover; object-position: center 36%; }
.guide-intro h3 { max-width: 14ch; margin: .65rem 0; font-size: clamp(2rem, 4vw, 4rem); line-height: .92; letter-spacing: -.045em; }
.guide-intro p:not(.kicker) { max-width: 52ch; color: var(--muted); }
.guide-intro a { display: inline-block; margin-top: .6rem; color: var(--green); font-weight: 750; text-underline-offset: .25em; }

.package-card__prices { display: grid !important; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 1rem; color: inherit !important; }
.package-card__prices b { display: grid; gap: .1rem; padding: .7rem; border: 1px solid currentColor; border-radius: .75rem; font: 600 1.4rem var(--display); }
.package-card__prices small { color: inherit; font: 500 .58rem/1.3 var(--mono); opacity: .68; }

.practical-cards { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.practical-card { grid-column: span 5; }
.practical-card--picnic, .practical-card--days { grid-column: span 7; }

.local-contribution {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 4vw, 3.2rem); align-items: start;
  margin-top: clamp(2rem, 5vw, 4rem); padding: clamp(1.3rem, 3vw, 2.3rem); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius); background: rgba(255,255,255,.06);
}
.local-contribution > strong { color: var(--lime); font: 600 clamp(3.3rem, 7vw, 7rem)/.8 var(--display); letter-spacing: -.06em; }
.local-contribution h3 { max-width: 20ch; margin: 0 0 .6rem; font-size: clamp(1.5rem, 3vw, 2.7rem); line-height: 1; }
.local-contribution p { max-width: 68ch; margin: 0; color: rgba(255,255,255,.68); }

.moments { background: var(--paper); }
.moments-layout { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: auto auto; gap: 1rem; }
.moment-card { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--white); }
.moment-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.moment-card--route { grid-row: span 2; min-height: 42rem; color: white; }
.moment-card--route::after, .moment-card--pause::after { position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, rgba(4,28,31,.9)); content: ""; }
.moment-card--route > div, .moment-card--pause > div { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; padding: clamp(1.25rem, 3vw, 2.4rem); }
.moment-card small { color: var(--orange); font: 500 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.moment-card--route small, .moment-card--pause small { color: var(--lime); }
.moment-card h3 { max-width: 17ch; margin: .65rem 0; font-size: clamp(2rem, 4vw, 4rem); line-height: .92; }
.moment-card p { max-width: 46ch; margin-bottom: 0; color: rgba(255,255,255,.72); }
.moment-card--list { min-height: 19rem; padding: clamp(1.25rem, 3vw, 2.3rem); background: var(--lime); }
.moment-card--list ul { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.moment-card--list li { padding: .65rem 0; border-top: 1px solid rgba(16,44,48,.24); font-weight: 700; }
.moment-card--pause { min-height: 22rem; color: white; }

.encounters { background: #15584d; }
.encounter-grid { gap: 1rem; }
.encounter-grid article { min-height: 19rem; }
.encounter-grid h3 { margin-top: 3rem; }

.experience { gap: clamp(2rem, 7vw, 7rem); }
.experience__copy .kicker { color: var(--orange); }
.contact { position: relative; overflow: hidden; background: var(--orange); }
.contact::before { position: absolute; top: -35%; right: -10%; width: 45vw; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; content: ""; box-shadow: 0 0 0 6vw rgba(255,255,255,.035), 0 0 0 13vw rgba(255,255,255,.025); }
.contact__inner { position: relative; }
.contact__card { backdrop-filter: blur(8px); }

.site-footer {
  display: grid; grid-template-columns: 1.55fr repeat(3, 1fr); gap: clamp(2rem, 5vw, 5rem); padding: clamp(3rem, 7vw, 6rem) var(--gutter) 2rem;
  background: #092d34; color: rgba(255,255,255,.7); font: 400 .78rem/1.45 var(--body);
}
.site-footer > div { display: flex; flex-direction: column; align-items: flex-start; gap: .48rem; }
.site-footer strong { margin-bottom: .55rem; color: white; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.site-footer__brand > strong { margin: 0; font: 600 clamp(2.4rem, 5vw, 5rem)/.9 var(--display); letter-spacing: -.05em; text-transform: none; }
.site-footer__brand p { margin: .45rem 0 0; color: var(--lime); font: 600 1.2rem var(--display); }
.site-footer__brand span { max-width: 32ch; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--lime); }
.site-footer__legal { grid-column: 1 / -1; margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); font: 500 .62rem var(--mono); }
.button--whatsapp { background: #166b50; color: white; }
.review-actions { flex-wrap: wrap; }

@media (hover: hover) and (pointer: fine) {
  .header-cta:hover, .hero__secondary:hover { transform: translateY(-2px); }
  .moment-card:hover img { transform: scale(1.035); }
}

@media (max-width: 1024px) {
  .site-header__nav a { padding-inline: .62rem; }
  .header-cta { display: none; }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(20rem, .9fr); gap: 2rem; }
  .practical-card, .practical-card--picnic, .practical-card--days { grid-column: span 6; }
  .site-footer { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
}

@media (max-width: 820px) {
  .site-header { grid-template-columns: auto 1fr auto; padding-inline: max(1rem, env(safe-area-inset-left)); }
  .site-header__nav, .site-header__actions { display: none !important; }
  .menu-toggle { justify-self: end; display: grid; width: 2.8rem; height: 2.8rem; place-content: center; gap: .34rem; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; background: rgba(5,31,37,.3); cursor: pointer; }
  .menu-toggle span { display: block; width: 1rem; height: 1px; background: white; }
  .hero__inner { grid-template-columns: 1fr; align-items: start; padding-top: 7.5rem; }
  .hero__copy { max-width: 46rem; }
  .hero h1 { font-size: clamp(3.8rem, 12vw, 6.5rem); }
  .hero-atlas { width: 100%; min-height: 32rem; }
  .guide-intro { grid-template-columns: .65fr 1.35fr; }
  .moments-layout { grid-template-columns: 1fr 1fr; }
  .moment-card--route { grid-column: 1 / -1; grid-row: auto; min-height: 32rem; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  :root { --gutter: 1rem; --section: 4.75rem; }
  .logo { width: 142px; height: 38px; }
  .hero { min-height: auto; }
  .hero__inner { padding-bottom: 4rem; }
  .hero h1 { margin-block: .8rem 1.4rem; font-size: clamp(3.25rem, 16vw, 5rem); line-height: .91; }
  .hero__lead { font-size: 1rem; }
  .hero__actions { align-items: stretch; }
  .hero__actions .button { width: 100%; }
  .hero__secondary { width: 100%; text-align: center; }
  .hero-atlas { min-height: 30rem; }
  .hero-atlas__stage { min-height: 22rem; }
  .atlas-landmark { grid-template-columns: 2rem; grid-template-areas: "icon"; padding: .2rem; }
  .atlas-landmark__icon { width: 2rem; height: 2rem; }
  .atlas-landmark strong, .atlas-landmark small { display: none; }
  .atlas-city { padding: .28rem .38rem; }
  .atlas-city strong { font-size: .52rem; }
  .atlas-story { right: .55rem; bottom: .55rem; left: .55rem; }
  .atlas-story p { font-size: .68rem; }
  .guide-intro { grid-template-columns: 1fr; }
  .guide-intro img { height: 18rem; }
  .guide-intro h3 { font-size: 2.5rem; }
  .package-card__prices { grid-template-columns: 1fr; }
  .practical-cards { grid-template-columns: 1fr; }
  .practical-card, .practical-card--picnic, .practical-card--days { grid-column: auto; }
  .local-contribution { grid-template-columns: 1fr; }
  .local-contribution > strong { font-size: 4.2rem; }
  .moments-layout { grid-template-columns: 1fr; }
  .moment-card--route { min-height: 28rem; }
  .moment-card--pause { min-height: 18rem; }
  .encounter-grid { grid-template-columns: 1fr; }
  .contact-links { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr 1fr; padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
  .site-footer__brand, .site-footer__legal { grid-column: 1 / -1; }
  .site-footer > div:last-of-type { grid-column: 1 / -1; }
  .review-dialog { max-height: calc(100svh - 1rem); }
}

  
/* LivingAtlas integration with the hero narrative */
:root {
  --living-ease: cubic-bezier(.22, 1, .36, 1);
  --living-move: cubic-bezier(.25, 1, .5, 1);
}

.hero {
  --atlas-exit: 0;
  min-height: max(100svh, 52rem);
  overflow: clip;
  isolation: isolate;
}

.hero__video {
  transform: scale(1.035);
  filter: saturate(.72) contrast(.92);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(20rem, .64fr) minmax(37rem, 1fr);
  align-items: center;
  gap: 0;
  width: min(100% - clamp(2rem, 5vw, 6.5rem), 112rem);
  min-height: max(100svh, 52rem);
  margin: 0 auto;
  padding: clamp(6.5rem, 10vh, 9rem) 0 clamp(3rem, 6vh, 5rem);
}

.hero__copy {
  position: relative;
  z-index: 7;
  max-width: 43rem;
  padding-right: clamp(0rem, 2vw, 2rem);
  text-shadow: 0 2px 32px rgba(1, 17, 19, .32);
  transform: translate3d(0, 0, 1px);
  isolation: isolate;
}

.hero h1 {
  max-width: 10.6ch;
  font-size: clamp(4.15rem, 6.6vw, 8.5rem);
  line-height: .81;
}

.hero__lead {
  max-width: 38ch;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
}

.hero__actions .button,
.hero__secondary {
  position: relative;
  z-index: 20;
  isolation: isolate;
  contain: paint;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 2px);
}

.hero-atlas {
  position: relative;
  z-index: 2;
  display: block;
  width: calc(100% + clamp(2rem, 8vw, 10rem));
  height: clamp(42rem, 78svh, 58rem);
  min-height: 0;
  margin-left: clamp(-4rem, -3vw, -1.25rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
  opacity: calc(1 - var(--atlas-exit) * .82);
  transform: translate3d(0, calc(var(--atlas-exit) * -1.25rem), 0) scale(calc(1 - var(--atlas-exit) * .035));
  transform-origin: 55% 50%;
  transition: opacity 100ms linear;
}

.hero-atlas::before {
  position: absolute;
  z-index: -1;
  inset: -7% -4% -8% -11%;
  background:
    radial-gradient(ellipse at 48% 45%, rgba(73, 128, 105, .22), transparent 55%),
    radial-gradient(ellipse at 62% 36%, rgba(245, 247, 227, .28), transparent 31%);
  content: "";
  pointer-events: none;
}

.hero-atlas::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(90deg, rgba(55, 86, 72, .16), transparent 16%, transparent 77%, rgba(55, 86, 72, .12));
  content: "";
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.hero-atlas__heading {
  position: absolute;
  z-index: 9;
  top: 1rem;
  left: clamp(4rem, 8vw, 9rem);
  display: flex;
  align-items: center;
  gap: .75rem 1rem;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}

.hero-atlas__heading p {
  color: var(--navy);
  font: 600 .65rem/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.hero-atlas__heading span {
  color: rgba(25, 58, 53, .7);
  font-size: .63rem;
  text-align: left;
}

.atlas-overview {
  padding: .48rem .65rem;
  border: 1px solid rgba(25, 58, 53, .22);
  border-radius: 999px;
  background: rgba(247, 239, 225, .72);
  color: var(--navy);
  font: 600 .55rem/1 var(--mono);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}

.hero-atlas__stage {
  height: 100%;
  min-height: 0;
  overflow: visible;
  background: transparent;
}

/* The atlas is measured and its markers are positioned after the opening
   overlay closes. Keep that single preparation frame invisible so visitors
   never see an intermediate, unpopulated version of the map. */
.hero-atlas[data-atlas-ready="false"] {
  opacity: 0;
  visibility: hidden;
}
.hero-atlas[data-atlas-ready="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease;
}

/* The numbers identify starting points on the national overview. Once a
   territory is selected they add no navigational value and read as a stray
   badge over the active city, so keep the selected marker name-only. */
.hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-active > span,
.hero-atlas:not([data-active-destination="overview"]) [data-mobile-map-city].is-active > span {
  display: none !important;
}

.atlas-webgl,
.atlas-fallback,
.atlas-overlay {
  inset: 0;
}

.atlas-webgl {
  filter: drop-shadow(0 34px 32px rgba(0, 10, 11, .3));
  mask-image: radial-gradient(ellipse 82% 82% at 53% 49%, #000 59%, rgba(0, 0, 0, .72) 76%, transparent 100%);
  pointer-events: none;
}

.atlas-webgl canvas {
  width: 100%;
  height: 100%;
}
.hero-atlas__stage.is-webgl-fallback .atlas-webgl { opacity: 0; }
.hero-atlas__stage.is-webgl-fallback .atlas-fallback { opacity: 1; }

.atlas-overlay {
  z-index: 5;
  opacity: var(--atlas-label-opacity, 1);
  transition: opacity 160ms linear;
}

.atlas-fallback {
  padding: 7% 13% 4%;
  fill: rgba(47, 107, 89, .84);
  stroke: none;
  opacity: .82;
  transition: opacity 500ms ease;
  filter: drop-shadow(0 30px 26px rgba(0, 0, 0, .28));
  pointer-events: none;
}

.hero-atlas__watermark,
.atlas-webgl-status,
.hero__film-status,
.hero__scroll {
  display: none !important;
}

.atlas-city,
.atlas-landmark {
  right: auto;
  bottom: auto;
  opacity: calc(var(--map-depth, 1) * .92);
  will-change: transform, opacity;
  transition:
    opacity 260ms ease,
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 260ms ease;
}

.atlas-city {
  grid-template-columns: .55rem auto;
  grid-template-areas: "pin label" "number label";
  column-gap: .42rem;
  padding: .4rem .58rem .42rem .42rem;
  border-color: transparent;
  background: rgba(4, 29, 32, .3);
  color: rgba(255, 255, 255, .72);
  box-shadow: none;
  backdrop-filter: blur(7px);
}

.atlas-city i {
  width: .48rem;
  height: .48rem;
  border-color: currentColor;
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .045);
}

.atlas-city span {
  color: rgba(226, 238, 88, .7);
  font-size: .43rem;
}

.atlas-city strong {
  font-size: .65rem;
  letter-spacing: .01em;
}

.atlas-city.is-active,
.atlas-city.is-scene-active {
  border-color: rgba(255, 255, 255, .19);
  background: rgba(247, 239, 225, .94);
  color: var(--navy);
  box-shadow: 0 15px 34px rgba(0, 0, 0, .25), 0 0 0 .2rem rgba(227, 237, 79, .06);
}

.atlas-city.is-active i,
.atlas-city.is-scene-active i {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 0 .26rem rgba(243, 105, 61, .17);
}

.atlas-landmark {
  grid-template-columns: 2rem auto;
  grid-template-areas: "icon title" "icon meta";
  column-gap: .4rem;
  padding: .2rem .48rem .2rem .2rem;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(4, 29, 32, .69);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
  backdrop-filter: blur(9px);
  animation: none;
}

.atlas-landmark__icon {
  width: 2rem;
  height: 2rem;
}

.atlas-landmark strong {
  font-size: .55rem;
}

.atlas-landmark small {
  color: rgba(255, 255, 255, .53);
  font-size: .42rem;
}

.atlas-city[data-map-hidden],
.atlas-landmark[data-map-hidden] {
  opacity: 0;
  pointer-events: none;
}

.atlas-landmark.is-context-muted {
  opacity: 0;
  pointer-events: none;
}

.hero-atlas__caption {
  position: absolute;
  z-index: 10;
  right: clamp(2rem, 5vw, 6rem);
  bottom: 1.3rem;
  left: clamp(4rem, 8vw, 9rem);
  grid-template-columns: auto minmax(14rem, 27rem) auto;
  gap: 1rem;
  width: auto;
  padding: .9rem 1rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .75rem;
  background: rgba(4, 29, 32, .55);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
  backdrop-filter: blur(15px);
}

.hero-atlas__caption > span {
  color: var(--orange);
}

.hero-atlas__caption strong {
  font-size: clamp(1.2rem, 1.55vw, 1.65rem);
}

.hero-atlas__caption p {
  max-width: 46ch;
  color: rgba(255, 255, 255, .66);
  font-size: .7rem;
}

.atlas-story {
  z-index: 14;
  right: clamp(2rem, 5vw, 6rem);
  bottom: 6rem;
  left: auto;
  width: min(27rem, calc(100% - 4rem));
  border-color: rgba(255, 255, 255, .17);
  background: rgba(5, 34, 37, .89);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .32);
}

.is-camera-travelling .atlas-city,
.is-camera-travelling .atlas-landmark {
  opacity: .2;
}

.is-camera-travelling .hero-atlas__caption {
  opacity: .74;
}

.atlas-city.is-scene-active {
  opacity: 1;
  pointer-events: auto;
}

/* Le territoire se prolonge graphiquement jusque dans la section suivante. */
.destination-select {
  position: relative;
  z-index: 3;
  box-shadow: 0 -70px 90px rgba(246, 241, 231, .28);
}

.destination-choice {
  min-height: clamp(34rem, 54vw, 47rem);
  grid-template-columns: minmax(0, 1.18fr) minmax(20rem, .82fr);
  overflow: hidden;
  border-color: rgba(9, 49, 45, .1);
  box-shadow: 0 26px 64px rgba(12, 48, 44, .08);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.destination-choice__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 58%, rgba(7, 39, 41, .2));
  content: "";
  pointer-events: none;
}

.destination-choice__media img {
  transform: scale(1.015);
  transition: transform 900ms var(--living-ease);
}

.destination-choice__body {
  position: relative;
  justify-content: center;
  padding: clamp(1.6rem, 4.2vw, 4.6rem);
}

.destination-choice__body::before {
  position: absolute;
  top: clamp(1.4rem, 3vw, 2.6rem);
  right: clamp(1.4rem, 3vw, 2.6rem);
  width: 3.4rem;
  border-top: 1px solid var(--orange);
  content: "";
}

.destination-choice__body > strong {
  max-width: 8ch;
  font-size: clamp(2.7rem, 3.8vw, 4.7rem);
}

section[id] {
  scroll-margin-top: 5.4rem;
}

/* Un fragment de route du LivingAtlas accompagne le manifeste du tourisme à vélo. */
.living-route-motif {
  position: relative;
  height: clamp(6rem, 11vw, 10rem);
  margin: clamp(1rem, 3vw, 2.5rem) 0 -1rem;
  overflow: hidden;
}

.living-route-motif svg {
  width: 100%;
  height: 100%;
}

.living-route-motif path {
  fill: none;
  stroke: rgba(15, 83, 73, .19);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.living-route-motif path:last-of-type {
  stroke: var(--orange);
  stroke-width: 2;
  stroke-dasharray: 7 10;
}

.living-route-motif circle {
  fill: var(--orange);
  filter: drop-shadow(0 5px 7px rgba(239, 105, 61, .28));
  offset-path: path("M8 88 C170 8 312 120 474 52 S780 12 992 74");
  offset-distance: var(--route-progress, 18%);
}

.cycling-manifesto__grid {
  margin-top: 0;
}

/* Composition magazine : ample, légèrement superposée, sans transformer les cartes en gadgets. */
.moments {
  overflow: clip;
}

.moments-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .55fr);
  grid-template-rows: minmax(20rem, 1fr) minmax(17rem, .75fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  padding-bottom: clamp(2rem, 6vw, 6rem);
}

.moments-layout::before {
  position: absolute;
  z-index: 3;
  right: 2rem;
  bottom: 1rem;
  color: rgba(8, 54, 48, .42);
  font: 500 .55rem var(--mono);
  letter-spacing: .1em;
  content: "52.3676° N · 4.9041° E · PRENDRE LE TEMPS";
}

.moment-card {
  min-height: 0;
  border-radius: clamp(.8rem, 1.5vw, 1.4rem);
  box-shadow: 0 26px 60px rgba(10, 47, 42, .1);
  transform: translate3d(var(--moment-x, 0), var(--moment-y, 0), 0);
  transition: transform 420ms var(--living-ease);
}

.moment-card--route {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 44rem;
}

.moment-card--list {
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  min-height: 21rem;
  margin: 2.8rem 0 -1.2rem -3.2rem;
  background: var(--paper);
  box-shadow: 0 30px 70px rgba(7, 38, 35, .17);
}

.moment-card--pause {
  grid-column: 2;
  grid-row: 2;
  min-height: 19rem;
  margin-left: 1.5rem;
}

.moment-card img {
  transform: scale(1.01);
  transition: transform 1s var(--living-ease);
}

.moment-card--route > div {
  padding: clamp(1.5rem, 4vw, 4rem);
}

/* Les rencontres ralentissent volontairement après la composition magazine. */
.encounters {
  padding-top: clamp(7rem, 13vw, 13rem);
  padding-bottom: clamp(7rem, 13vw, 13rem);
}

.encounters .section-heading {
  grid-template-columns: 1.25fr .75fr;
  margin-bottom: clamp(4rem, 8vw, 8rem);
}

.encounters .section-heading h2 {
  max-width: 9ch;
  font-size: clamp(4.2rem, 8vw, 9rem);
}

.encounter-grid {
  gap: clamp(1.5rem, 5vw, 5rem);
}

.encounter-grid article {
  min-height: 26rem;
  padding: clamp(1.6rem, 4vw, 4rem);
  border-width: 0 0 0 1px;
  border-radius: 0;
  background: transparent;
}

.encounter-grid article:nth-child(2) {
  margin-top: clamp(3rem, 8vw, 8rem);
}

.encounter-grid h3 {
  max-width: 12ch;
  margin-top: clamp(5rem, 10vw, 9rem);
}

.encounters__note {
  margin-top: 3rem;
}

/* Toutes les routes mènent finalement à une personne réelle. */
.experience {
  position: relative;
  overflow: hidden;
  padding-top: clamp(7rem, 12vw, 12rem);
  padding-bottom: clamp(7rem, 12vw, 12rem);
}

.experience::before {
  position: absolute;
  top: 4rem;
  left: 0;
  width: 46%;
  height: 13rem;
  border-right: 1px solid rgba(239, 105, 61, .4);
  border-bottom: 1px solid rgba(239, 105, 61, .4);
  border-bottom-right-radius: 80% 100%;
  content: "";
  pointer-events: none;
}

.experience::after {
  position: absolute;
  top: calc(17rem - .28rem);
  left: calc(46% - .28rem);
  width: .56rem;
  height: .56rem;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 .35rem rgba(239, 105, 61, .12);
  content: none;
}

.experience__portrait img {
  min-height: clamp(36rem, 58vw, 52rem);
  border-radius: .25rem;
}

.experience__copy {
  position: relative;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .atlas-overview:hover {
    border-color: rgba(229, 238, 81, .6);
    background: rgba(5, 34, 37, .62);
    color: white;
  }

  .destination-choice:hover .destination-choice__media img,
  .destination-choice:focus-visible .destination-choice__media img {
    transform: scale(1.032) translate3d(.25%, -.2%, 0);
  }

  .moment-card:hover img {
    transform: scale(1.026);
  }

  .atlas-city:hover,
  .atlas-city[data-map-city="haarlem"]:hover,
  .atlas-city[data-map-city="rotterdam"]:hover {
    opacity: 1;
  }
}

@media (min-width: 1600px) {
  .hero__inner {
    grid-template-columns: minmax(26rem, .62fr) minmax(48rem, 1.08fr);
  }

  .hero-atlas__stage {
    min-height: min(82svh, 62rem);
  }
}

@media (max-width: 1100px) {
  .hero {
    min-height: auto;
  }

  .hero__veil {
    background: linear-gradient(180deg, rgba(4, 29, 32, .9) 0%, rgba(4, 29, 32, .66) 42%, rgba(4, 29, 32, .88) 100%);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    width: min(100% - 2rem, 58rem);
    min-height: auto;
    padding-top: 8rem;
  }

  .hero__copy {
    max-width: 46rem;
    padding-right: 0;
  }

  .hero h1 {
    max-width: 11ch;
    font-size: clamp(4.3rem, 10vw, 7.2rem);
  }

  .hero-atlas {
    width: calc(100% + 4rem);
    height: clamp(34rem, 62svh, 47rem);
    margin: 1.2rem -2rem 0;
  }

  .hero-atlas__stage {
    height: 100%;
    min-height: 0;
  }

  .hero-atlas__heading,
  .hero-atlas__caption {
    left: 3rem;
  }

  .hero-atlas__caption {
    right: 3rem;
  }

  .destination-choice {
    min-height: 38rem;
    grid-template-columns: 1.08fr .92fr;
  }
}

@media (max-width: 820px) {
  .hero-atlas__heading {
    top: .75rem;
  }

  .hero-atlas__heading span {
    display: inline;
  }

  .hero-atlas__caption {
    grid-template-columns: auto 1fr;
  }

  .hero-atlas__caption a {
    grid-column: 2;
  }

  .destination-choice {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(24rem, 56vw) auto;
  }

  .destination-choice__body > strong {
    max-width: 11ch;
  }

  .moments-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(32rem, auto) minmax(18rem, auto);
  }

  .moment-card--route {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 34rem;
  }

  .moment-card--list,
  .moment-card--pause {
    grid-column: auto;
    grid-row: 2;
    min-height: 20rem;
    margin: 0;
  }

  .encounters .section-heading {
    grid-template-columns: 1fr;
  }

  .encounter-grid article:nth-child(2) {
    margin-top: 3rem;
  }
}

@media (max-width: 600px) {
  .hero__inner {
    width: calc(100% - 1.25rem);
    padding-top: 6.7rem;
    padding-bottom: 0;
  }

  .hero h1 {
    max-width: 10.4ch;
    font-size: clamp(3.6rem, 15.5vw, 5.5rem);
  }

  .hero__lead {
    max-width: 35ch;
    font-size: .92rem;
  }

  .hero-atlas {
    width: calc(100% + 1.25rem);
    height: max(55svh, 31rem);
    margin: .7rem -.625rem 0;
  }

  .hero-atlas::after {
    background: linear-gradient(180deg, rgba(5, 34, 37, .16), transparent 22%, transparent 74%, rgba(5, 34, 37, .42));
  }

  .hero-atlas__stage {
    height: 100%;
    min-height: 0;
  }

  .atlas-webgl {
    mask-image: radial-gradient(ellipse 92% 80% at 52% 47%, #000 58%, transparent 100%);
  }

  .hero-atlas__heading {
    top: .25rem;
    left: 1rem;
    right: 1rem;
    flex-wrap: wrap;
    gap: .45rem .65rem;
  }

  .hero-atlas__heading span {
    order: 3;
    width: 100%;
    font-size: .56rem;
  }

  .atlas-overview {
    margin-left: auto;
  }

  .hero-atlas__caption {
    right: .75rem;
    bottom: .4rem;
    left: .75rem;
    grid-template-columns: 1fr auto;
    gap: .35rem .7rem;
    padding: .72rem .78rem;
  }

  .hero-atlas__caption > span {
    grid-column: 1 / -1;
  }

  .hero-atlas__caption p {
    max-width: 30ch;
    font-size: .62rem;
  }

  .hero-atlas__caption a {
    grid-column: 2;
    grid-row: 2;
    white-space: normal;
    text-align: right;
  }

  .atlas-story {
    right: .75rem;
    bottom: 6.7rem;
    left: .75rem;
    width: auto;
  }

  .atlas-city {
    padding: .3rem .4rem;
  }

  .atlas-city strong {
    font-size: .54rem;
  }

  .atlas-landmark {
    grid-template-columns: 1.9rem;
    grid-template-areas: "icon";
    padding: .16rem;
  }

  .atlas-landmark__icon {
    width: 1.9rem;
    height: 1.9rem;
  }

  .atlas-landmark strong,
  .atlas-landmark small {
    display: none;
  }

  .destination-choice {
    min-height: 0;
    grid-template-rows: 20rem auto;
  }

  .destination-choice__body {
    padding: 1.35rem;
  }

  .destination-choice__body > strong {
    font-size: clamp(2.7rem, 13vw, 4rem);
  }

  .living-route-motif {
    height: 5rem;
  }

  .moments-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .moment-card--route,
  .moment-card--list,
  .moment-card--pause {
    grid-column: 1;
    grid-row: auto;
    min-height: 24rem;
    margin: 0;
  }

  .moment-card--route {
    min-height: 31rem;
  }

  .moments-layout::before {
    right: 0;
    bottom: 0;
    font-size: .46rem;
  }

  .encounters {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .encounters .section-heading h2 {
    font-size: clamp(3.6rem, 17vw, 5.7rem);
  }

  .encounter-grid {
    grid-template-columns: 1fr;
  }

  .encounter-grid article,
  .encounter-grid article:nth-child(2) {
    min-height: 20rem;
    margin-top: 0;
  }

  .experience::before {
    width: 33%;
  }

  .experience::after {
    left: calc(33% - .28rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-atlas,
  .atlas-city,
  .atlas-landmark,
  .destination-choice__media img,
  .moment-card img {
    transform: none;
    transition: none;
  }

  .hero__copy {
    transform: none;
  }

  .moment-card {
    transform: none;
    transition: none;
  }

  .hero-atlas {
    opacity: 1;
  }

  .living-route-motif circle {
    offset-distance: 18%;
  }
}


/* LivingAtlas performance styles */
.hero__video {
  opacity: .19;
  filter: none !important;
}

.hero__veil {
  background:
    linear-gradient(90deg, rgba(4, 29, 32, .97) 0%, rgba(4, 29, 32, .88) 27%, rgba(7, 46, 48, .34) 58%, rgba(4, 29, 32, .56) 100%),
    linear-gradient(0deg, rgba(4, 29, 32, .88), transparent 36%);
}

.hero-atlas__stage {
  contain: layout paint;
}

.atlas-webgl {
  filter: none !important;
}

.atlas-city,
.atlas-landmark {
  will-change: auto;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.atlas-city {
  background: rgba(4, 29, 32, .78);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px rgba(0, 12, 13, .16);
}

.atlas-city.is-active,
.atlas-city.is-scene-active {
  background: rgba(247, 239, 225, .97);
}

.atlas-landmark {
  background: rgba(4, 29, 32, .91);
  border-color: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 12px 28px rgba(0, 10, 11, .22);
}

.atlas-overview {
  background: rgba(4, 29, 32, .8);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.hero-atlas__caption {
  background: rgba(4, 29, 32, .91);
  border-color: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 20px 48px rgba(0, 9, 10, .22);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 520ms var(--living-ease) 150ms, transform 520ms var(--living-ease) 150ms;
}

.atlas-story {
  background: rgba(5, 34, 37, .97);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 28px 64px rgba(0, 8, 9, .3);
}

.is-camera-travelling .hero-atlas__caption {
  opacity: .58;
  transform: translate3d(0, .25rem, 0);
  transition-delay: 0ms;
}

@media (max-width: 700px) {
  .hero__video {
    opacity: .16;
  }

  .hero-atlas__caption,
  .atlas-landmark,
  .atlas-city {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 8px 20px rgba(0, 9, 10, .16);
  }
}

/* Flex is used for the desktop card so a long action label can never steal
   the title column and collapse it to one character per line. */
@media (min-width: 701px) {
  .hero-atlas__caption {
    display: flex !important;
    align-items: center;
  }
  .hero-atlas__caption-image { flex: 0 0 4.6rem; }
  .hero-atlas__caption > span { flex: 0 0 7rem; }
  .hero-atlas__caption > div:not(.hero-atlas__caption-actions) {
    flex: 1 1 auto;
    min-width: 0;
  }
  .hero-atlas__caption-actions {
    flex: 0 0 9rem;
  }
}

/* A selected city is already named by the map caption. Do not leave the
   legacy numbered pin floating above its now-visible local POIs. */
.hero-atlas[data-atlas-state="territory"] .atlas-city.is-active,
.hero-atlas[data-atlas-state="territory"] .atlas-city.is-scene-active {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-atlas__caption {
    transition: none;
  }
}


/* LivingAtlas premium art direction */
@media (min-width: 1101px) {
  .hero__inner {
    grid-template-columns: minmax(22rem, .78fr) minmax(30rem, .88fr);
  }

  .hero__copy {
    padding-right: 0;
  }

  .hero__copy::before {
    position: absolute;
    z-index: -1;
    inset: -5rem -8rem -5rem -5rem;
    background: radial-gradient(ellipse at 25% 48%, rgba(3, 25, 28, .92) 0%, rgba(3, 25, 28, .68) 44%, transparent 76%);
    content: "";
    pointer-events: none;
  }

  .hero-atlas {
    width: calc(100% + clamp(2.5rem, 5vw, 6rem));
    height: clamp(32rem, 58svh, 42rem);
    margin-left: clamp(-2.5rem, -2vw, -1.5rem);
    transform: translate3d(0, calc(var(--atlas-exit) * -1.25rem), 0) scale(calc(1.045 - var(--atlas-exit) * .035));
    transform-origin: 48% 49%;
  }
}

.hero-atlas {
  min-width: 0;
  max-width: none;
}

.hero-atlas::before {
  inset: -11% -9% -12% -16%;
  background:
    radial-gradient(ellipse at 51% 47%, rgba(50, 124, 103, .3), transparent 58%),
    radial-gradient(ellipse at 66% 28%, rgba(222, 235, 197, .075), transparent 33%),
    radial-gradient(ellipse at 36% 69%, rgba(9, 61, 65, .28), transparent 42%);
}

.hero-atlas::after {
  inset: -2%;
  background: linear-gradient(90deg, rgba(5, 34, 37, .6), transparent 13%, transparent 84%, rgba(5, 34, 37, .2));
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
}

.atlas-webgl {
  -webkit-mask-image: radial-gradient(ellipse 84% 89% at 55% 49%, #000 54%, rgba(0, 0, 0, .76) 73%, transparent 100%);
  mask-image: radial-gradient(ellipse 84% 89% at 55% 49%, #000 54%, rgba(0, 0, 0, .76) 73%, transparent 100%);
}

.hero[data-atlas-quality="medium"] .hero__video {
  opacity: .14;
}

.hero[data-atlas-quality="low"] .hero__video {
  opacity: .11;
}

.atlas-city {
  grid-template-columns: .48rem auto;
  padding: .3rem .34rem .32rem .3rem;
  border: 0;
  border-radius: .35rem;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, .56);
  text-shadow: 0 1px 12px rgba(0, 19, 21, .75);
}

.atlas-city i {
  width: .38rem;
  height: .38rem;
  box-shadow: 0 0 0 .16rem rgba(255, 255, 255, .035);
}

.atlas-city span {
  color: rgba(225, 234, 112, .56);
  font-size: .4rem;
}

.atlas-city strong {
  font-size: .61rem;
  font-weight: 650;
}

.atlas-city.is-scene-related {
  opacity: calc(var(--map-depth, 1) * .66);
}

.atlas-city.is-active,
.atlas-city.is-scene-active {
  padding: .42rem .58rem .44rem .42rem;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(245, 237, 223, .95);
  color: var(--navy);
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 16px 36px rgba(0, 12, 13, .2);
  opacity: calc(var(--map-depth, 1) * .98) !important;
  pointer-events: auto;
}

.atlas-city.is-scene-active strong {
  font-size: .72rem;
}

.atlas-city.is-scene-active span {
  color: rgba(206, 93, 50, .82);
}

.atlas-landmark {
  padding-right: .56rem;
  background: rgba(4, 29, 32, .88);
}

.is-camera-travelling .atlas-city,
.is-camera-travelling .atlas-landmark {
  opacity: .12 !important;
}

.is-camera-travelling .hero-atlas__caption {
  opacity: .5;
  transform: translate3d(0, .3rem, 0);
}

@media (min-width: 701px) and (max-width: 1100px) {
  .hero-atlas {
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    transform: translate3d(0, calc(var(--atlas-exit) * -1rem), 0) scale(calc(1.035 - var(--atlas-exit) * .03));
  }

  .atlas-webgl {
    -webkit-mask-image: radial-gradient(ellipse 92% 90% at 51% 50%, #000 59%, rgba(0, 0, 0, .76) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 92% 90% at 51% 50%, #000 59%, rgba(0, 0, 0, .76) 80%, transparent 100%);
  }
}

@media (max-width: 700px) {
  .hero-atlas {
    transform: translate3d(0, calc(var(--atlas-exit) * -.75rem), 0) scale(calc(1.02 - var(--atlas-exit) * .02));
    transform-origin: 50% 48%;
  }

  .atlas-city {
    background: rgba(4, 29, 32, .48);
  }

  .atlas-city.is-scene-related:not(.is-scene-active) {
    opacity: .34;
  }

  .atlas-city.is-scene-active {
    padding: .36rem .48rem .38rem .36rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-atlas {
    transform: none;
  }
}


/* Light editorial header */
.site-header {
  --header-paper: 248, 244, 234;
  --header-sage: 218, 229, 213;
  --header-ink: #123f3a;
  color: var(--header-ink);
  background:
    linear-gradient(180deg,
      rgba(var(--header-paper), .98) 0%,
      rgba(var(--header-paper), .91) 68%,
      rgba(var(--header-paper), 0) 100%);
  box-shadow: none;
}

.site-header.is-scrolled {
  color: var(--header-ink);
  background: rgba(var(--header-paper), .965);
  border-bottom: 1px solid rgba(18, 63, 58, .1);
  box-shadow: 0 12px 34px rgba(7, 42, 42, .1);
  backdrop-filter: blur(12px) saturate(108%);
  -webkit-backdrop-filter: blur(12px) saturate(108%);
}

.site-header .logo {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Keep the navigation on its existing central axis while giving the brand
   mark enough presence to remain legible on wide screens. */
@media (min-width: 1025px) {
  .site-header .logo {
    width: clamp(195px, 16vw, 230px);
    height: 54px;
  }
}

.site-header__nav,
.site-header nav {
  padding: .25rem;
  border-color: rgba(18, 63, 58, .13);
  border-radius: .9rem;
  background: rgba(255, 253, 247, .76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84), 0 8px 24px rgba(11, 54, 49, .055);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-header__nav a,
.site-header nav a {
  color: var(--header-ink);
  border-radius: .65rem;
}

.site-header__nav a:hover,
.site-header nav a:hover {
  background: rgba(218, 231, 81, .24);
}

.site-header .language-toggle {
  border-color: rgba(18, 63, 58, .28);
  background: rgba(255, 253, 247, .72);
  color: var(--header-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}

.site-header .language-toggle:hover {
  border-color: rgba(18, 63, 58, .52);
  background: rgba(var(--header-sage), .72);
}

.site-header .header-cta {
  background: var(--lime);
  color: var(--green-dark);
  box-shadow: 0 9px 22px rgba(83, 104, 28, .16);
}

.site-header .header-cta:hover {
  background: #e5ed63;
  box-shadow: 0 12px 26px rgba(83, 104, 28, .2);
}

.site-header :is(a, button):focus-visible {
  outline: 3px solid rgba(243, 105, 61, .72);
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .site-header {
    background:
      linear-gradient(180deg,
        rgba(var(--header-paper), .99) 0%,
        rgba(var(--header-paper), .94) 74%,
        rgba(var(--header-paper), .08) 100%);
  }

  .site-header .menu-toggle {
    border-color: rgba(18, 63, 58, .22);
    background: rgba(255, 253, 247, .9);
    box-shadow: 0 8px 22px rgba(9, 51, 47, .08);
  }

  .site-header .menu-toggle span {
    background: var(--header-ink);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .site-header.is-scrolled,
  .site-header__nav,
  .site-header nav,
  .site-header .language-toggle {
    background: rgb(var(--header-paper));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}


/* Light hero and brand-calibrated LivingAtlas */
.hero {
  --hero-paper: #f5f0e6;
  --hero-warm-white: #fffdf8;
  --hero-mist: #5e7374;
  --hero-canal: #0d5b4d;
  --hero-deep-polder: #083f39;
  color: var(--ink);
}

.hero__copy {
  text-shadow: none;
}

@media (min-width: 1101px) {
  .hero__copy::before {
    inset: -5rem -9rem -5rem -5rem;
    background: radial-gradient(ellipse at 24% 48%, rgba(255, 253, 248, .97) 0%, rgba(245, 240, 230, .82) 48%, transparent 77%);
  }
}

.hero .eyebrow {
  color: var(--hero-canal);
}

.hero h1 {
  color: var(--ink);
}

.hero h1 em {
  color: var(--hero-deep-polder);
}

.hero-break-mobile {
  display: none;
}

.hero__lead {
  color: rgba(16, 44, 48, .78);
}

.hero__actions .button--light {
  background: var(--hero-canal);
  color: var(--hero-warm-white);
  box-shadow: 0 13px 30px rgba(8, 63, 57, .2);
}

.hero__actions .button--light:hover {
  background: var(--hero-deep-polder);
  box-shadow: 0 16px 34px rgba(8, 63, 57, .24);
}

.hero__secondary {
  color: var(--ink);
  text-shadow: none;
}

.hero__secondary::after {
  background: var(--orange);
}

.atlas-webgl {
  -webkit-mask-image: radial-gradient(ellipse 63% 50% at 55% 50%, #000 47%, rgba(0, 0, 0, .72) 69%, transparent 100%);
  mask-image: radial-gradient(ellipse 63% 50% at 55% 50%, #000 47%, rgba(0, 0, 0, .72) 69%, transparent 100%);
}

.hero-atlas__heading {
  border-color: rgba(16, 44, 48, .18);
}

.hero-atlas__heading p {
  color: var(--hero-deep-polder);
}

.hero-atlas__heading span {
  color: rgba(16, 44, 48, .6);
}

.atlas-overview {
  border-color: rgba(16, 44, 48, .14);
  background: rgba(255, 253, 248, .82);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 8px 20px rgba(16, 44, 48, .08);
}

.atlas-overview:hover,
.atlas-overview:focus-visible {
  background: var(--white);
  border-color: rgba(13, 91, 77, .32);
}

.atlas-city {
  color: rgba(16, 44, 48, .64);
  text-shadow: 0 1px 10px rgba(255, 253, 248, .96), 0 0 2px rgba(255, 253, 248, .96);
}

.atlas-city i {
  background: var(--hero-deep-polder);
  box-shadow: 0 0 0 .16rem rgba(255, 253, 248, .48);
}

.atlas-city span {
  color: rgba(8, 63, 57, .68);
}

.atlas-city.is-active,
.atlas-city.is-scene-active {
  border-color: rgba(16, 44, 48, .12);
  background: rgba(255, 253, 248, .97);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 34px rgba(16, 44, 48, .14);
}

.atlas-landmark {
  border-color: rgba(16, 44, 48, .12);
  background: rgba(255, 253, 248, .94);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 28px rgba(16, 44, 48, .13);
}

.atlas-landmark small {
  color: rgba(16, 44, 48, .58);
}

.atlas-landmark__icon {
  background: var(--hero-deep-polder);
  color: var(--lime);
}

.hero-atlas__caption {
  border-color: rgba(16, 44, 48, .12);
  background: rgba(255, 253, 248, .95);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 20px 48px rgba(16, 44, 48, .13);
}

.hero-atlas__caption > span {
  color: var(--orange);
}

.hero-atlas__caption p {
  color: rgba(16, 44, 48, .66);
}

.hero-atlas__caption a {
  color: var(--hero-canal);
}

.atlas-story {
  border-color: rgba(16, 44, 48, .14);
  background: rgba(255, 253, 248, .98);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 28px 64px rgba(16, 44, 48, .18);
}

.atlas-story p,
.atlas-story small {
  color: rgba(16, 44, 48, .68);
}

.atlas-story [data-atlas-story-close] {
  color: var(--ink);
}

.hero-atlas__watermark {
  color: rgba(8, 63, 57, .075);
}

.atlas-webgl-status,
.hero__film-status,
.hero__scroll {
  color: rgba(16, 44, 48, .62);
  text-shadow: none;
}

.hero__film-status strong {
  color: var(--hero-deep-polder);
}

.chapter-rail a {
  color: rgb(16, 44, 48);
  text-shadow: 0 1px 0 rgba(255, 253, 248, .9);
}

.chapter-rail a.is-active {
  color: var(--hero-deep-polder);
}

.atlas-fallback path:first-child {
  fill: #82a77e;
  stroke: rgba(8, 63, 57, .42);
}

@media (max-width: 1100px) {
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(245, 240, 230, .985) 0%, rgba(245, 240, 230, .93) 36%, rgba(213, 231, 221, .56) 61%, rgba(165, 203, 193, .43) 100%),
      linear-gradient(0deg, rgba(245, 240, 230, .5), transparent 44%);
  }

  .atlas-webgl {
    -webkit-mask-image: radial-gradient(ellipse 67% 51% at 52% 49%, #000 49%, rgba(0, 0, 0, .7) 72%, transparent 100%);
    mask-image: radial-gradient(ellipse 67% 51% at 52% 49%, #000 49%, rgba(0, 0, 0, .7) 72%, transparent 100%);
  }
}

@media (max-width: 700px) {
  .hero__video {
    opacity: .045;
  }

  .hero h1 {
    max-width: none;
    font-size: clamp(2.45rem, 10.5vw, 3.45rem);
  }

  .hero-break-mobile {
    display: initial;
  }

  .atlas-webgl {
    -webkit-mask-image: radial-gradient(ellipse 69% 51% at 52% 48%, #000 50%, rgba(0, 0, 0, .68) 73%, transparent 100%);
    mask-image: radial-gradient(ellipse 69% 51% at 52% 48%, #000 50%, rgba(0, 0, 0, .68) 73%, transparent 100%);
  }

  .hero-atlas__heading {
    border-color: rgba(16, 44, 48, .14);
  }

  .atlas-city {
    background: rgba(255, 253, 248, .56);
  }

  .hero-atlas__caption {
    background: rgba(255, 253, 248, .97);
  }
}

@media (prefers-contrast: more) {
  .hero__lead,
  .hero-atlas__heading span,
  .hero-atlas__caption p {
    color: var(--ink);
  }

  .atlas-city,
  .chapter-rail a {
    color: var(--ink);
  }
}


/* Primary logo and stable atlas framing */
.site-header .logo {
  width: clamp(5.9rem, 7.8vw, 7.6rem);
  height: auto;
  aspect-ratio: 1.4 / 1;
  padding: .34rem;
  border-radius: .82rem;
  transition: width 320ms var(--living-ease), box-shadow 240ms ease;
}

.site-header .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Commandes explicites : le LivingAtlas reste narratif, mais son zoom n'est plus caché. */
.atlas-zoom {
  position: absolute;
  top: 4.15rem;
  right: .8rem;
  z-index: 18;
  display: grid;
  grid-template-columns: auto 2.75rem 3.7rem 2.75rem;
  align-items: center;
  min-height: 2.75rem;
  overflow: hidden;
  color: #0b4f49;
  background: rgba(250, 248, 239, .94);
  border: 1px solid rgba(11, 79, 73, .16);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(8, 58, 55, .13), inset 0 1px rgba(255, 255, 255, .72);
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-.25rem);
  transition: opacity 220ms ease, transform 220ms ease;
}

.hero-atlas__stage.is-webgl-ready .atlas-zoom {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.atlas-zoom__hint {
  padding: 0 .7rem 0 .9rem;
  font: 700 .62rem/1 var(--font-sans, sans-serif);
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.atlas-zoom button {
  display: grid;
  min-width: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(11, 79, 73, .12);
  font: 700 1.22rem/1 var(--font-sans, sans-serif);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, opacity 180ms ease;
}

.atlas-zoom button:hover,
.atlas-zoom button:focus-visible {
  color: #fff;
  background: #08756b;
  outline: none;
}

.atlas-zoom button:focus-visible {
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #08756b;
}

.atlas-zoom button:disabled {
  opacity: .35;
  cursor: default;
}

.atlas-zoom button:disabled:hover {
  color: inherit;
  background: transparent;
}

.atlas-zoom__reset {
  min-width: 3.7rem !important;
  font-size: .66rem !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.atlas-zoom__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 821px) {
  .site-header {
    min-height: 6.35rem;
  }

  .site-header.is-scrolled .logo {
    width: 5.65rem;
  }

  .hero__copy {
    margin-top: clamp(1.25rem, 3vh, 2.4rem);
  }
}

@media (min-width: 1101px) {
  .hero-atlas {
    width: min(calc(100% + 1rem), calc(100vw - var(--gutter) - 1rem));
    max-width: none;
    margin-left: -1rem;
  }

  .hero-atlas__heading {
    padding-right: .65rem;
  }

  .atlas-overview {
    flex: 0 0 auto;
  }
}

@media (max-width: 820px) {
  .site-header .logo {
    width: 5.75rem;
    aspect-ratio: 1.4 / 1;
  }

  .hero__inner {
    padding-top: 7.25rem;
  }

  .atlas-zoom {
    top: 4.1rem;
    right: .6rem;
    grid-template-columns: 2.75rem 3.45rem 2.75rem;
  }

  .atlas-zoom__hint {
    display: none;
  }
}

@media (max-width: 430px) {
  .site-header .logo {
    width: 5.35rem;
  }

  .atlas-zoom {
    right: .45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-zoom button {
    transition: none;
  }
}

/* Editorial finish and LivingAtlas integration */

.hero {
  background:
    radial-gradient(ellipse 54% 66% at 77% 44%, rgba(161, 205, 192, .34), transparent 72%),
    linear-gradient(112deg, #f7f2e8 0%, #f2f2e8 48%, #d8e8df 100%);
}

.hero__veil {
  background:
    linear-gradient(90deg, rgba(247, 242, 232, .99) 0%, rgba(247, 242, 232, .94) 31%, rgba(244, 243, 232, .58) 49%, rgba(220, 235, 227, .12) 72%, transparent 100%),
    linear-gradient(0deg, rgba(247, 242, 232, .3), transparent 42%);
}

.hero-atlas,
.hero-atlas__stage {
  background: transparent !important;
  box-shadow: none !important;
}

.hero-atlas::before,
.hero-atlas::after {
  content: none;
}

.atlas-webgl {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}

.hero-atlas__heading {
  background: transparent;
}

.atlas-city {
  min-height: 2.75rem;
  padding: .35rem .46rem;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.atlas-city:not(.is-active):not(.is-scene-active) strong {
  font-size: .68rem;
  font-weight: 650;
}

.atlas-city:not(.is-active):not(.is-scene-active) span {
  opacity: .68;
}

.atlas-city.is-active,
.atlas-city.is-scene-active {
  padding-inline: .65rem;
  border-color: rgba(11, 74, 64, .12);
  background: rgba(255, 253, 248, .95);
  box-shadow: 0 10px 26px rgba(16, 44, 48, .11);
}

.atlas-landmark {
  border-color: rgba(11, 74, 64, .12);
  background: rgba(255, 253, 248, .96);
  box-shadow: 0 9px 24px rgba(16, 44, 48, .12);
}

.atlas-landmark--tulip .atlas-landmark__icon {
  background: #a75f65;
  color: #fff8e9;
}

.atlas-landmark--architecture .atlas-landmark__icon {
  background: #426d72;
  color: #f7f2e8;
}

.atlas-zoom {
  grid-template-columns: 2.75rem 3.75rem 2.75rem;
  gap: .18rem;
  padding: .24rem;
  border-color: rgba(11, 74, 64, .12);
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 10px 25px rgba(16, 44, 48, .11);
}

.atlas-zoom__hint {
  display: none;
}

.atlas-zoom button {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.hero-atlas__stage.is-webgl-fallback .atlas-zoom {
  display: none;
}

.hero-atlas__caption,
.atlas-story {
  background: rgba(255, 253, 248, .97);
  box-shadow: 0 18px 46px rgba(16, 44, 48, .12);
}

.tailored-equation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto minmax(8rem, 1.1fr);
  align-items: stretch;
  gap: .45rem;
  margin: 1rem 0;
}

.tailored-equation > span {
  display: grid;
  align-content: center;
  min-height: 5rem;
  padding: .7rem;
  border: 1px solid rgba(16, 44, 48, .12);
  border-radius: .55rem;
  background: rgba(255, 255, 255, .5);
}

.tailored-equation > span:last-child {
  background: var(--navy);
  color: var(--paper);
}

.tailored-equation small {
  display: block;
  margin-bottom: .22rem;
  color: var(--orange);
  font: 600 .56rem/1.2 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.tailored-equation strong {
  font-size: .78rem;
  line-height: 1.25;
}

.tailored-equation > b {
  align-self: center;
  color: var(--orange);
  font: 500 1rem var(--mono);
}

@media (max-width: 1100px) {
  .hero__veil {
    background: linear-gradient(180deg, rgba(247, 242, 232, .98) 0%, rgba(243, 244, 232, .86) 42%, rgba(218, 235, 226, .2) 72%, transparent 100%);
  }

  .atlas-webgl {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-composite: intersect;
  }
}

@media (max-width: 700px) {
  .atlas-zoom {
    right: max(.7rem, env(safe-area-inset-right));
    max-width: calc(100vw - 1.4rem);
  }

  .atlas-landmark {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .atlas-landmark strong,
  .atlas-landmark small {
    display: none;
  }

  .atlas-zoom {
    grid-template-columns: 2.75rem 3.45rem 2.75rem;
  }

  .tailored-equation {
    grid-template-columns: 1fr auto 1fr;
  }

  .tailored-equation > span:last-child {
    grid-column: 1 / -1;
  }

  .tailored-equation > b:nth-of-type(2) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-landmark,
  .atlas-city {
    transition-duration: .01ms !important;
  }
}

/* Simplified hierarchy, readable atlas and editorial motion */

/* La vidéo n'est plus la seconde scène concurrente du LivingAtlas. */
.hero {
  background:
    radial-gradient(ellipse 62% 76% at 79% 45%, rgba(137, 190, 176, .43), transparent 72%),
    radial-gradient(circle at 64% 14%, rgba(255, 255, 255, .64), transparent 32%),
    linear-gradient(112deg, #f9f4ea 0%, #f3f3e9 47%, #d4e7dd 100%);
}

.hero__veil {
  background:
    linear-gradient(90deg, rgba(249, 244, 234, .995) 0%, rgba(249, 244, 234, .94) 31%, rgba(244, 245, 234, .56) 50%, rgba(218, 236, 226, .1) 74%, transparent 100%),
    linear-gradient(0deg, rgba(247, 242, 232, .28), transparent 46%);
}

/* Les repères appartiennent à la maquette, mais restent immédiatement lisibles. */
.atlas-city {
  min-height: 2.55rem;
  padding: .32rem .54rem .34rem .4rem;
  border-color: rgba(10, 69, 61, .13);
  background: rgba(255, 253, 248, .88);
  color: #123f3a;
  box-shadow: 0 7px 18px rgba(23, 62, 58, .1), inset 0 1px rgba(255, 255, 255, .78);
}

.atlas-city:not(.is-active):not(.is-scene-active) strong {
  color: #123f3a;
  font-size: .72rem;
  font-weight: 740;
}

.atlas-city:not(.is-active):not(.is-scene-active) span {
  color: #b94e32;
  opacity: .9;
}

.atlas-city i {
  color: #0b6457;
  box-shadow: 0 0 0 .2rem rgba(11, 100, 87, .1);
}

.atlas-city:not([data-map-hidden]) {
  opacity: .84;
}

.atlas-city.is-scene-related:not([data-map-hidden]) {
  opacity: .88;
}

.atlas-city.is-active,
.atlas-city.is-scene-active {
  border-color: rgba(11, 100, 87, .23);
  background: #fffdf8;
  box-shadow: 0 12px 28px rgba(18, 64, 59, .17), inset 0 1px rgba(255, 255, 255, .9);
  opacity: 1 !important;
  pointer-events: auto;
}

.atlas-landmark {
  border-color: rgba(10, 69, 61, .14);
  background: rgba(255, 253, 248, .96);
  color: #123f3a;
  box-shadow: 0 9px 22px rgba(23, 62, 58, .14), inset 0 1px rgba(255, 255, 255, .84);
}

.atlas-landmark strong {
  color: #123f3a;
  font-size: .59rem;
  font-weight: 760;
}

.atlas-landmark small {
  color: #58726e;
  font-size: .44rem;
}

.atlas-landmark.is-selected {
  border-color: rgba(11, 100, 87, .28);
  background: #fffdf8;
}

.atlas-landmark:not([data-map-hidden]):not(.is-context-muted) {
  opacity: .94;
}

.atlas-landmark.is-context-muted {
  opacity: 0 !important;
}

.is-camera-travelling .atlas-city:not([data-map-hidden]),
.is-camera-travelling .atlas-landmark:not([data-map-hidden]) {
  opacity: .34 !important;
}

@media (hover: hover) and (pointer: fine) {
  .atlas-city:hover {
    border-color: rgba(11, 100, 87, .25);
    background: #fffdf8;
    color: #123f3a;
    box-shadow: 0 12px 28px rgba(18, 64, 59, .16);
  }

  .atlas-landmark:hover {
    border-color: rgba(11, 100, 87, .25);
    background: #fffdf8;
    color: #123f3a;
  }
}

/* Cinq territoires deviennent un récit horizontal, pas cinq écrans successifs. */
.destination-select {
  overflow-x: hidden;
  padding-top: clamp(4.5rem, 7vw, 7rem);
  padding-bottom: clamp(4.5rem, 7vw, 7rem);
}

.destination-select .section-heading {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.destination-carousel__controls,
.destination-dots {
  display: flex;
}

.destination-carousel__controls {
  justify-content: flex-end;
  gap: .45rem;
  margin-bottom: .8rem;
}

.destination-carousel__controls p {
  order: -1;
  align-self: center;
  margin-right: auto;
  color: var(--muted);
}

.destination-track {
  display: flex;
  grid-template-columns: none;
  gap: 1rem;
  margin-inline: calc(var(--gutter) * -1);
  padding: .35rem var(--gutter) 1.2rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.destination-track::-webkit-scrollbar {
  display: none;
}

.destination-choice,
.destination-choice:last-child {
  flex: 0 0 min(74vw, 58rem);
  grid-column: auto;
  grid-template-columns: minmax(18rem, .9fr) minmax(0, 1.1fr);
  grid-template-rows: 1fr;
  min-height: 27rem;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.destination-choice__body {
  padding: clamp(1.4rem, 3vw, 2.7rem);
}

.destination-choice__body::before {
  top: 1.45rem;
  right: 1.45rem;
  width: 2.3rem;
}

.destination-choice__body > strong {
  max-width: 11ch;
  margin: .75rem 0;
  font-size: clamp(2.25rem, 3.15vw, 3.65rem);
  line-height: .94;
}

.destination-choice__body > em {
  max-width: 47ch;
  font-size: .86rem;
  line-height: 1.48;
}

.destination-choice__tags {
  margin-top: .85rem;
}

.destination-choice__action {
  padding-top: 1rem;
}

.destination-dots {
  margin-top: .1rem;
}

/* Goulven intervient avant les principes : la personne précède la méthode. */
.cycling-manifesto > .guide-intro {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: clamp(1.3rem, 3vw, 2.5rem);
  grid-template-columns: minmax(9rem, .42fr) minmax(0, 1.58fr);
  padding: clamp(.85rem, 1.8vw, 1.25rem);
  background: color-mix(in srgb, var(--sand) 72%, white);
}

.cycling-manifesto > .guide-intro img {
  height: clamp(12rem, 20vw, 17rem);
}

.cycling-manifesto > .guide-intro h3 {
  max-width: 18ch;
  font-size: clamp(2rem, 3.4vw, 3.35rem);
}

/* Une seule grammaire de mouvement : la route du LivingAtlas réapparaît par touches. */
.route-echo {
  --route-reveal: 0;
  --route-progress: 0%;
  width: min(28rem, 58vw);
  height: 3.5rem;
  margin: clamp(1rem, 2.5vw, 1.8rem) 0 clamp(.5rem, 1.5vw, 1rem);
  overflow: visible;
  opacity: calc(.35 + var(--route-reveal) * .65);
}

.route-echo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.route-echo__base,
.route-echo__draw {
  fill: none;
  stroke-linecap: round;
}

.route-echo__base {
  stroke: rgba(15, 83, 73, .15);
  stroke-width: 1.15;
}

.route-echo__draw {
  stroke: var(--orange);
  stroke-width: 1.8;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--route-reveal));
}

.route-echo circle {
  fill: var(--orange);
  filter: drop-shadow(0 4px 5px rgba(239, 105, 61, .22));
  offset-path: path("M4 38 C72 4 118 48 181 22 S284 8 356 30");
  offset-distance: var(--route-progress);
}

#moments .route-echo {
  margin-left: auto;
}

#goulven .route-echo {
  width: min(23rem, 100%);
  margin-top: .4rem;
}

/* Le portrait de Goulven reste volontairement sans tracé orange décoratif. */
#goulven::before,
#goulven::after {
  content: none;
}

@media (min-width: 701px) and (max-width: 1100px) {
  .hero-atlas {
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
  }
}

@media (max-width: 900px) {
  .tailored-equation {
    grid-template-columns: 1fr auto 1fr;
  }

  .tailored-equation > span:last-child {
    grid-column: 1 / -1;
  }

  .tailored-equation > b:nth-of-type(2) {
    display: none;
  }

  .destination-choice,
  .destination-choice:last-child {
    flex-basis: min(86vw, 38rem);
    grid-template-columns: 1fr;
    grid-template-rows: 13rem auto;
    min-height: 29rem;
  }

  .destination-choice__media {
    min-height: 0;
  }

  .destination-choice__body > strong {
    font-size: clamp(2.25rem, 7vw, 3.3rem);
  }

  .cycling-manifesto > .guide-intro {
    grid-template-columns: minmax(9rem, .6fr) minmax(0, 1.4fr);
  }
}

@media (max-width: 600px) {
  .hero__veil {
    background: linear-gradient(180deg, rgba(249, 244, 234, .99) 0%, rgba(245, 245, 235, .88) 42%, rgba(216, 234, 225, .18) 73%, transparent 100%);
  }

  .atlas-city {
    min-height: 2.35rem;
    padding: .28rem .38rem;
    background: rgba(255, 253, 248, .93);
  }

  .atlas-city strong {
    font-size: .57rem;
  }

  .atlas-city span {
    font-size: .42rem;
  }

  .atlas-landmark {
    background: rgba(255, 253, 248, .96);
  }

  .destination-select {
    padding-block: 4rem;
  }

  .destination-choice,
  .destination-choice:last-child {
    flex-basis: 87vw;
    grid-template-rows: 12.5rem auto;
    min-height: 29rem;
  }

  .destination-choice__body {
    padding: 1.15rem;
  }

  .destination-choice__body > strong {
    margin-block: .6rem;
    font-size: clamp(2.15rem, 11vw, 3rem);
  }

  .destination-choice__body > em {
    font-size: .8rem;
    line-height: 1.42;
  }

  .destination-choice__tags b {
    padding: .32rem .46rem;
    font-size: .58rem;
  }

  .cycling-manifesto > .guide-intro {
    grid-template-columns: 1fr;
  }

  .cycling-manifesto > .guide-intro img {
    height: 13rem;
  }

  .route-echo {
    width: min(19rem, 82vw);
    height: 2.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-echo {
    --route-reveal: .72;
    --route-progress: 72%;
    opacity: .82;
  }
}

/* Labels behave like map annotations rather than floating interface cards */
.atlas-city:not(.is-active):not(.is-scene-active) {
  min-height: 1.65rem;
  padding: .14rem .22rem;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: .48;
}
.atlas-city.is-scene-related:not(.is-scene-active) { opacity: .68; }
.atlas-city:not(.is-active):not(.is-scene-active) i {
  width: .4rem;
  height: .4rem;
  border-width: 1px;
  background: #fffdf8;
  box-shadow: 0 0 0 .14rem rgba(11,100,87,.08);
}
.atlas-city:not(.is-active):not(.is-scene-active) strong { font-size: .62rem; }
.atlas-city:not(.is-active):not(.is-scene-active) span { font-size: .39rem; }
.atlas-city.is-active,
.atlas-city.is-scene-active {
  min-height: 2.35rem;
  padding: .28rem .46rem .3rem .36rem;
  box-shadow: 0 10px 24px rgba(18,64,59,.14), inset 0 1px rgba(255,255,255,.9);
}
.atlas-landmark {
  min-width: 2.7rem;
  min-height: 2.7rem;
  grid-template-columns: 2.15rem 0;
  grid-template-areas: "icon title" "icon meta";
  column-gap: 0;
  padding: .22rem;
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transition: opacity .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease, column-gap .32s ease, padding .32s ease;
}
.atlas-landmark__icon { width: 2.15rem; height: 2.15rem; }
.atlas-landmark strong,
.atlas-landmark small {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(.18rem);
  transition: max-width .36s ease, opacity .24s ease, transform .32s ease;
}
.atlas-landmark:hover,
.atlas-landmark:focus-visible,
.atlas-landmark.is-selected {
  grid-template-columns: 2.15rem auto;
  column-gap: .42rem;
  padding: .22rem .5rem .22rem .22rem;
  border-color: rgba(11,100,87,.2);
  background: #fffdf8;
  box-shadow: 0 9px 22px rgba(23,62,58,.13), inset 0 1px rgba(255,255,255,.86);
}
.atlas-landmark:hover strong,
.atlas-landmark:hover small,
.atlas-landmark:focus-visible strong,
.atlas-landmark:focus-visible small,
.atlas-landmark.is-selected strong,
.atlas-landmark.is-selected small {
  max-width: 11rem;
  opacity: 1;
  transform: translateY(0);
}
.is-camera-travelling .atlas-city:not(.is-scene-active):not([data-map-hidden]) { opacity: .16 !important; }
.is-camera-travelling .atlas-landmark:not(.is-selected):not([data-map-hidden]) { opacity: .2 !important; }
@media (max-width: 767px) {
  .atlas-city:not(.is-active):not(.is-scene-active) { padding: .1rem .16rem; }
  .atlas-city:not(.is-active):not(.is-scene-active) strong { font-size: .52rem; }
  .atlas-landmark,
  .atlas-landmark:hover,
  .atlas-landmark:focus-visible,
  .atlas-landmark.is-selected {
    grid-template-columns: 2.2rem;
    grid-template-areas: "icon";
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: .275rem;
    column-gap: 0;
  }
  .atlas-landmark__icon { width: 2.2rem; height: 2.2rem; }
  .atlas-landmark strong,
  .atlas-landmark small { display: none; }
}
.atlas-zoom {
  grid-template-columns: 2.35rem 3rem 2.35rem;
  min-height: 2.35rem;
  padding: .12rem;
  background: rgba(255,253,248,.82);
  box-shadow: 0 7px 18px rgba(16,44,48,.09);
  opacity: .82;
}
.hero-atlas__stage.is-webgl-ready .atlas-zoom:focus-within,
.hero-atlas__stage.is-webgl-ready .atlas-zoom:hover { opacity: 1; }
.atlas-zoom button { min-width: 2.35rem; min-height: 2.35rem; }
.atlas-zoom__reset { min-width: 3rem !important; font-size: .61rem !important; }
@media (max-width: 820px) {
  .atlas-zoom {
    grid-template-columns: 2.75rem 2.75rem 2.75rem;
    top: 3.9rem;
    padding: .1rem;
  }
  .atlas-zoom button { min-width: 2.75rem; min-height: 2.75rem; }
  .atlas-zoom__reset { min-width: 2.75rem !important; }
}

/* Conversion hierarchy and editorial compression */
.destination-select { padding-bottom: clamp(2.75rem, 4vw, 3.5rem); }
.destination-choice { min-height: clamp(25rem, 40vw, 32rem); }
.destination-choice__body { padding: clamp(1.25rem, 2.5vw, 2rem); }
.destination-choice__body > strong { font-size: clamp(2rem, 4vw, 4.1rem); }
.destination-choice__body > em { max-width: 35rem; font-size: clamp(.92rem, 1.25vw, 1.08rem); }
.travel-step-note { max-width: 68rem; margin: .35rem 0 1rem; color: rgba(255,255,255,.7); font-size: .82rem; line-height: 1.55; }

.composer > .section { padding-block: clamp(4rem, 7vw, 7rem); }
.composer .section-heading { margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.composer .builder-step { padding: clamp(1rem, 2vw, 1.65rem); }
.composer .choice-card { min-height: 6.2rem; }
.composer .journey-preview__badges,
.composer .package-card > p,
.composer .builder-details > p:not(.form-error) { display: none; }
.discover-strip-v84 { padding: .9rem 0 0; border-top: 1px solid var(--line); }
.discover-strip-v84 > summary { color: var(--green); font: 700 .72rem var(--mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.discover-strip-v84[open] > summary { margin-bottom: .5rem; }
.discover-strip-v84 .journey-preview__steps p { font-size: .74rem; }

.pricing-v84 { background: var(--paper); }
/* The destination carousel already ends with its own navigation. Keep the
   next section close enough to read as the next decision, not a new chapter. */
.destination-select + .pricing-v84 { padding-top: clamp(2.75rem, 4vw, 3.5rem); }
.pricing-v84__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.price-card-v84 {
  display: flex;
  flex-direction: column;
  min-height: 26rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 16px 45px rgba(12, 48, 44, .06);
}
.price-card-v84--featured { border-color: color-mix(in srgb, var(--orange) 48%, var(--line)); transform: translateY(-.35rem); }
.price-card-v84 > span { color: var(--orange); font: 500 .62rem var(--mono); }
.price-card-v84 h3 { margin: .8rem 0 0; font-size: clamp(2rem, 3vw, 3.3rem); }
.price-card-v84 > strong { margin-top: .35rem; color: var(--green); font: 600 1rem var(--mono); }
.price-card-v84 > p { min-height: 3.2em; color: var(--muted); }
.price-card-v84 dl { margin: auto 0 1.2rem; }
.price-card-v84 dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.price-card-v84 dt { color: var(--muted); font-size: .76rem; }
.price-card-v84 dd { margin: 0; font: 600 1.65rem var(--display); }
.price-card-v84 button { display: inline-flex; align-items: center; align-self: flex-start; min-height: 2.75rem; padding: .45rem 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--green); font: 600 .78rem/1 var(--mono); letter-spacing: .025em; cursor: pointer; }
.price-card-v84 button::after { margin-left: .68em; content: "→"; font-size: 1.15em; line-height: 1; }
.price-assurances { display: grid; grid-template-columns: 1fr 1.35fr; gap: .65rem 1.5rem; margin-top: 1rem; padding: 1.2rem 1.35rem; border-radius: 1rem; background: var(--green); color: var(--white); }
.price-assurances p { margin: 0; }
.price-assurances p:last-child { grid-column: 1 / -1; color: rgba(255,255,255,.7); font-size: .76rem; }
.pricing-v84__essentials { display: grid; grid-template-columns: .78fr 1.22fr; gap: 1rem; margin-top: 1rem; }
.included-v84, .options-v84 { padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.included-v84 ul { display: grid; gap: .65rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.included-v84 li { position: relative; padding-left: 1.2rem; }
.included-v84 li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 800; }
.options-v84 dl { margin: 1rem 0 0; }
.options-v84 dl div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.options-v84 dd { margin: 0; color: var(--muted); text-align: right; }
.options-v84 details, .moment-v84 details { margin-top: .9rem; color: var(--muted); font-size: .75rem; }
.options-v84 summary, .moment-v84 summary { color: var(--green); font-weight: 800; cursor: pointer; }
.multiday-v84 { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center; margin-top: 1rem; padding: clamp(1.4rem, 3vw, 2.7rem); border-radius: var(--radius); background: var(--aqua); }
.multiday-v84 h3 { margin: .45rem 0 .7rem; font-size: clamp(2rem, 4vw, 4.2rem); }
.multiday-v84 p { margin: 0; color: var(--muted); }
.multiday-v84 > div:last-child > strong { display: block; margin-bottom: .55rem; color: var(--orange); font: 600 1.35rem var(--display); }
.multiday-v84 .button { margin-top: 1rem; }
.stay-advice-v84 { margin-top: 1rem; padding: clamp(1.4rem, 3vw, 2.7rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.stay-advice-v84 h3 { max-width: 24ch; margin: .45rem 0 .7rem; font-size: clamp(2rem, 4vw, 4.2rem); }
.stay-advice-v84 > p:last-child { max-width: 74ch; margin: 0; color: var(--muted); }

/* The pricing carousel ends immediately above this section: keep its title
   close enough to read as the next beat, rather than starting a blank panel. */
.pricing-v84 { padding-top: clamp(3.25rem, 5vw, 5.25rem); }
.pricing-v84 .section-heading { margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem); }

.moments-v84 {
  background: var(--white);
  /* The editorial title should feel generous, not leave a poster-sized void
     before the first experience card. */
  padding-top: clamp(3.25rem, 5vw, 5.25rem);
}
.moments-v84 .section-heading { margin-bottom: clamp(1.4rem, 2.5vw, 2.4rem); }
.moments-v84 .section-heading h2 { max-width: 18ch; }
.moments-v84 .route-echo { margin-top: .25rem; margin-bottom: .8rem; }
.moments-v84__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 1rem; }
.moments-v84__side { display: grid; gap: 1rem; }
.moment-v84 { min-height: 18rem; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.moment-v84 > span, .moment-v84 > div > span { color: var(--orange); font: 500 .62rem var(--mono); }
.moment-v84 h3 { margin: 1.1rem 0 .75rem; font-size: clamp(1.8rem, 3vw, 3rem); }
.moment-v84 p { margin: 0; color: var(--muted); }
.moment-v84--image { grid-row: span 2; display: grid; grid-template-rows: minmax(15rem, 1fr) auto; min-height: 37rem; padding: 0; overflow: hidden; }
.moment-v84--image img { width: 100%; height: 100%; object-fit: cover; }
.moment-v84--image > div { padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--green); color: var(--white); }
.moment-v84--image > div > span { color: var(--lime); }
.moment-v84--image > div h3 { color: var(--white); }
.moment-v84--image > div p { color: rgba(255, 255, 255, .86); }
.moment-v84--encounter { grid-column: 1 / -1; min-height: 0; background: var(--green); color: var(--white); }
.moment-v84--encounter p, .moment-v84--encounter details { color: rgba(255,255,255,.72); }
.moment-v84--encounter summary { color: var(--lime); }
.moment-v84--goulven { display: grid; grid-template-columns: minmax(7rem, .75fr) 1fr; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); min-height: 0; background: var(--green); color: var(--white); }
.moment-v84--goulven img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 28% 31%; border: 4px solid var(--lime); border-radius: 50%; }
.moment-v84--goulven > div > span { color: var(--lime); }
.moment-v84--goulven h3 { margin-top: .7rem; color: var(--white); font-size: clamp(1.55rem, 2.5vw, 2.55rem); line-height: .95; }
.moment-v84--goulven p { color: rgba(255,255,255,.78); }
.builder-option-note { max-width: 66rem; margin: .35rem 0 1rem; color: rgba(255,255,255,.72); font-size: .8rem; line-height: 1.5; }
.host-encounters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.host-encounters__intro { grid-column: 1 / -1; max-width: 52rem; padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: var(--radius); background: var(--aqua); }
.host-encounters__intro h3 { max-width: 25ch; margin: .6rem 0 .8rem; font-size: clamp(1.7rem, 3.4vw, 3.2rem); line-height: 1; }
.host-encounters__intro p:last-child { max-width: 72ch; margin: 0; color: var(--muted); }
.host-encounter { display: grid; grid-template-columns: minmax(8rem, .72fr) 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.host-encounter { padding: 0; color: inherit; text-align: left; cursor: pointer; }
.host-encounter:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.host-encounter img { width: 100%; height: 100%; min-height: 15rem; object-fit: cover; }
.host-encounter > div { padding: clamp(1.1rem, 2vw, 1.6rem); }
.host-encounter h3 { margin: .65rem 0; font-size: clamp(1.5rem, 2.4vw, 2.25rem); }
.host-encounter p { margin: 0; color: var(--muted); }
.host-encounter__action { display: inline-block; margin-top: .9rem; color: var(--green); font: 700 .72rem var(--body); }
.host-album-dialog > article { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(18rem, .88fr); min-height: 34rem; }
.host-album-dialog__media { position: relative; min-height: 28rem; background: var(--navy); }
.host-album-dialog__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.host-album-dialog__media button { position: absolute; top: 50%; width: 2.6rem; height: 2.6rem; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(7,36,40,.72); color: white; cursor: pointer; transform: translateY(-50%); }
.host-album-dialog__media [data-host-album-prev] { left: 1rem; }.host-album-dialog__media [data-host-album-next] { right: 1rem; }
.host-album-dialog__copy { padding: clamp(1.5rem, 4vw, 3rem); }.host-album-dialog__copy h2 { margin: .6rem 0 1rem; font-size: clamp(2.4rem, 4vw, 4.5rem); line-height: .9; }.host-album-dialog__copy > p { color: var(--muted); }.host-album-dialog__count { color: var(--orange) !important; font: 600 .68rem var(--mono); }.host-album-dialog__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }.host-album-dialog__thumbs button { padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: .4rem; background: none; cursor: pointer; aspect-ratio: 1; }.host-album-dialog__thumbs button.is-active { border-color: var(--orange); }.host-album-dialog__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.contribution-v84 { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; margin-top: 1rem; padding: clamp(1.25rem, 3vw, 2.2rem); border-radius: var(--radius); background: var(--aqua); }
.contribution-v84 > strong { color: var(--orange); font: 600 clamp(3.5rem, 7vw, 7rem)/.8 var(--display); }
.contribution-v84 h3 { margin: 0 0 .4rem; font-size: clamp(1.5rem, 3vw, 2.5rem); }
.contribution-v84 p { margin: 0; color: var(--muted); }

.experience-v84 { padding-block: clamp(4.5rem, 8vw, 8rem); }
.experience-v84 .experience__portrait img {
  /* This portrait supports the copy; it must not make the right column end
     with an empty poster-sized area. */
  height: clamp(29rem, 34vw, 34rem);
  min-height: 0;
  max-height: none;
}
.experience-v84 .experience__points { margin-top: 1.3rem; }
.experience-v84 .experience__points li { padding-block: .75rem; }
.faq-v84 { background: var(--paper); }
.faq-v84 .faq__list { max-width: 62rem; margin-inline: auto; }
.contact-v84 .contact__card > p { font-size: clamp(1.1rem, 2vw, 1.45rem); }
.contact-v84__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.3rem 0; }

@media (max-width: 900px) {
  .multiday-v84 { grid-template-columns: 1fr; }
  .pricing-v84__cards {
    display: flex;
    gap: .75rem;
    margin-inline: calc(var(--gutter) * -1);
    padding: .25rem var(--gutter) .85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--orange) transparent;
  }
  .price-card-v84 { flex: 0 0 min(82vw, 23rem); min-height: 25rem; scroll-snap-align: center; }
  .price-card-v84 > p { min-height: 0; }
  .price-card-v84--featured { transform: none; }
  .pricing-v84__essentials { grid-template-columns: 1fr; }
  .moments-v84__grid { grid-template-columns: 1fr 1fr; }
  .moments-v84__side { min-height: 28rem; }
  .moment-v84--image { grid-row: auto; min-height: 28rem; }
  .moment-v84--encounter { grid-column: 1 / -1; }
  .host-encounters { grid-template-columns: 1fr; }
  .composer .tour-builder-form .package-grid { display: flex; gap: .7rem; overflow-x: auto; padding: .25rem .15rem .65rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .composer .tour-builder-form .package-card { flex: 0 0 min(78vw, 21rem); scroll-snap-align: start; }
}

@media (max-width: 640px) {
  .destination-select { padding-block: 3.8rem; }
  .destination-choice { min-height: 22rem; }
  .destination-choice__media { min-height: 10.5rem; }
  .destination-choice__body { padding: 1.05rem; }
  .destination-choice__body > strong { font-size: 1.8rem; }
  .destination-choice__body > em { font-size: .84rem; }
  .destination-choice__action { padding-top: .75rem; }
  .composer > .section { padding-block: 3.8rem; }
  .composer .journey-preview__media { aspect-ratio: 16 / 9; }
  .composer .choice-grid, .composer .choice-grid--four { grid-template-columns: 1fr 1fr; }
  .composer .choice-card { min-height: 5.5rem; padding: .8rem; }
  .composer .choice-card strong { font-size: .78rem; }
  .composer .choice-card small { font-size: .62rem; }
  .pricing-v84__cards { gap: .7rem; }
  .price-card-v84 { padding: 1.1rem; }
  .price-card-v84 h3 { font-size: 2rem; }
  .price-card-v84 > p { margin: .55rem 0 1rem; }
  .price-card-v84 dl { margin-bottom: .8rem; }
  .price-card-v84 dl div { padding: .55rem 0; }
  .price-card-v84 dd { font-size: 1.4rem; }
  .price-assurances { grid-template-columns: 1fr; padding: 1rem; }
  .price-assurances p:last-child { grid-column: auto; }
  .pricing-v84__essentials { gap: .7rem; }
  .included-v84, .options-v84 { padding: 1.1rem; }
  .options-v84 dl div { grid-template-columns: 1fr; gap: .15rem; }
  .options-v84 dd { text-align: left; }
  .multiday-v84 { padding: 1.15rem; gap: 1.1rem; }
  .multiday-v84 h3 { font-size: 2.15rem; }
  .moments-v84__grid { grid-template-columns: 1fr; gap: .7rem; }
  .moments-v84__side { gap: .7rem; min-height: 0; }
  .moment-v84 { min-height: 0; padding: 1.1rem; }
  .moment-v84--image { min-height: 23rem; padding: 0; }
  .moment-v84--image > div { padding: 1.1rem; }
  .moment-v84--encounter { grid-column: auto; }
  .host-encounter { grid-template-columns: 8.5rem 1fr; }
  .host-encounter img { min-height: 11rem; }
  .host-album-dialog > article { grid-template-columns: 1fr; }.host-album-dialog__media { min-height: min(58svh, 28rem); }.host-album-dialog__copy { padding: 1.25rem; }
  .contribution-v84 { grid-template-columns: 1fr; padding: 1.1rem; }
  .contribution-v84 > strong { font-size: 4rem; }
  .experience-v84 { padding-block: 4rem; }
  .experience-v84 .experience__portrait img { min-height: 0; max-height: 29rem; aspect-ratio: 4 / 5; }
  .contact-v84__actions { flex-direction: column; }
  .contact-v84__actions .button { width: 100%; }
  .floating-builder { display: none; }
}

/* On wide screens the first two moments form one compact editorial block.
   The former spanning image forced an empty right-hand column below it. */
@media (min-width: 901px) {
  .moments-v84__grid { grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr); align-items: start; }
  .moment-v84--image { grid-row: auto; grid-template-rows: minmax(20rem, 1fr) auto; min-height: 0; }
  .moments-v84__side { align-self: stretch; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
  .moment-v84:not(.moment-v84--image):not(.moment-v84--encounter) { min-height: 0; }
  .moment-v84--goulven { min-height: 100%; }
  .moment-v84--encounter { grid-column: 1 / -1; min-height: 0; }
  .moment-v84--encounter {
    display: grid;
    grid-template-columns: minmax(16rem, .78fr) minmax(0, 1.22fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
  }
  .moment-v84--encounter > span { grid-column: 1; grid-row: 1; }
  .moment-v84--encounter h3 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .moment-v84--encounter p { grid-column: 2; grid-row: 1 / span 2; max-width: 54ch; }
}

/* Mobile albums: keep the photograph, thumbnails and copy in three distinct
   blocks.  This avoids a tall gallery bleeding over the destination copy. */
@media (max-width: 700px) {
  .destination-dialog,
  .host-album-dialog {
    width: calc(100vw - 1.5rem);
    max-width: 42rem;
    max-height: calc(100svh - 1.5rem);
    margin: .75rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .destination-dialog > article,
  .host-album-dialog > article {
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  .destination-dialog__media,
  .host-album-dialog__media {
    min-height: 0;
    height: auto;
    overflow: hidden;
  }

  .destination-dialog__media > img,
  .destination-dialog__media > video {
    width: 100%;
    height: min(42svh, 22rem);
    min-height: 0;
    object-fit: cover;
  }

  .destination-dialog__media.has-gallery {
    display: block;
    max-height: none;
  }

  .destination-dialog__media.has-gallery > img,
  .destination-dialog__media.has-gallery > video {
    height: min(38svh, 19rem);
  }

  .destination-dialog__gallery {
    height: 6.25rem;
    grid-auto-rows: 1fr;
  }

  .destination-dialog__gallery button,
  .destination-dialog__gallery img {
    min-height: 0;
    height: 100%;
  }

  .host-album-dialog__media img {
    width: 100%;
    height: min(50svh, 28rem);
    min-height: 0;
    object-fit: cover;
  }

  .destination-dialog__copy,
  .host-album-dialog__copy {
    position: relative;
    z-index: 1;
    min-height: 0;
    padding: 1.2rem;
    background: var(--white);
  }

  .destination-dialog h2,
  .host-album-dialog__copy h2 {
    font-size: clamp(2.35rem, 12vw, 3.4rem);
  }

  .dialog-close { z-index: 20; }
}

/* Clear actions, shareable tours and purposeful motion */
.journey-preview__footer-actions,
.review-actions--share {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: .65rem;
}

.share-tour-button {
  min-height: 2.75rem;
  padding: .55rem .85rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 750 .72rem/1 var(--sans);
  cursor: pointer;
}

.share-tour-button:hover { border-color: currentColor; }

.pricing-v85__controls {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  margin: -.25rem 0 .7rem;
}

.pricing-v85__controls p {
  min-width: 3.6rem;
  margin: 0;
  color: var(--muted);
  text-align: center;
  font: 700 .7rem var(--mono);
}

.pricing-v85__controls button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--green);
  cursor: pointer;
}

.pricing-v85__dots { display: flex; gap: .32rem; margin-right: auto; }
.pricing-v85__dots i {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 22%, transparent);
  transition: transform 200ms ease, background-color 200ms ease;
}
.pricing-v85__dots i.is-active { transform: scale(1.4); background: var(--orange); }
.pricing-v85__controls button:disabled,
.destination-carousel__controls button:disabled { opacity: .35; cursor: default; }

.request-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.1rem 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .9rem;
  list-style: none;
}
.request-process li { position: relative; padding: .85rem 1rem; }
.request-process li + li { border-left: 1px solid var(--line); }
.request-process span { color: var(--orange); font: 700 .6rem var(--mono); }
.request-process strong { display: block; margin-top: .25rem; font-size: .8rem; }
.request-process small { display: block; margin-top: .25rem; color: var(--muted); font-size: .68rem; line-height: 1.35; }

.selection-toast {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 120;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: .85rem 1rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: .9rem;
  background: var(--green);
  color: var(--white);
  box-shadow: 0 18px 45px rgba(8, 49, 44, .22);
  opacity: 0;
  transform: translate3d(0, .45rem, 0);
  transition: transform 220ms cubic-bezier(.22,1,.36,1), opacity 220ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.selection-toast.is-visible { opacity: 1; transform: translate3d(0,0,0); }
.selection-toast strong { display: block; font-size: .82rem; }
.selection-toast span { display: block; margin-top: .2rem; color: rgba(255,255,255,.72); font-size: .7rem; }

@media (max-width: 900px) {
  .pricing-v85__controls { display: flex; }
  .journey-preview__footer-actions { width: 100%; flex-wrap: wrap; justify-content: stretch; }
  .journey-preview__footer-actions > * { flex: 1 1 12rem; }
}

@media (max-width: 640px) {
  .request-process { grid-template-columns: 1fr; }
  .request-process li + li { border-top: 1px solid var(--line); border-left: 0; }
  .review-actions--share { justify-content: stretch; }
  .review-actions--share > * { width: 100%; }
  .selection-toast { right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); left: .75rem; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .selection-toast,
  .pricing-v85__dots i { transform: none; transition: none; }
}

/* Conversion polish & Design Spells */
.composer .builder-details > p.details-required-note {
  display: block;
  margin: -.2rem 0 1rem;
  color: rgba(255,255,255,.72);
  font-size: .78rem;
}

@keyframes shake-error {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.form-error:not([hidden]) {
  animation: shake-error 400ms cubic-bezier(.36,.07,.19,.97) both;
}

.details-essentials { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.details-essentials label:nth-child(1) { grid-column: span 2; }
.details-essentials label:nth-child(2),
.details-essentials label:nth-child(3) { grid-column: span 1; }
.details-essentials label:nth-child(4),
.details-essentials label:nth-child(5) { grid-column: span 3; }
.details-essentials label:nth-child(6) { grid-column: 1 / -1; }
.details-essentials label:nth-child(7) { grid-column: 1 / -1; }

.optional-details-v86 {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.18);
}
.optional-details-v86 > summary {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .55rem;
  color: var(--lime);
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}
.optional-details-v86 > summary::marker { color: var(--lime); }
.optional-details-v86[open] > summary { margin-bottom: .9rem; }

.food-field-v86 {
  display: grid;
  gap: .45rem;
  margin-top: 1rem;
}
.food-field-v86[hidden] { display: none; }
.food-field-v86 > span { font-size: .72rem; font-weight: 700; }
.food-field-v86 textarea {
  width: 100%;
  min-height: 5.3rem;
  padding: .75rem .85rem;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: .7rem;
  outline-offset: 1px;
  background: rgba(255,255,255,.1);
  color: var(--white);
  font: inherit;
}
.food-field-v86 textarea:focus { border-color: var(--lime); outline: 2px solid var(--lime); }
.food-field-v86 small { color: rgba(255,255,255,.62); }

.price-assurances--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: .9rem 1.1rem;
}
.price-assurances--compact p {
  display: grid;
  gap: .2rem;
  padding-inline: 1rem;
}
.price-assurances--compact p:first-child { padding-left: 0; }
.price-assurances--compact p + p { border-left: 1px solid rgba(255,255,255,.2); }
.price-assurances--compact p:last-child { grid-column: auto; color: inherit; font-size: inherit; }
.price-assurances--compact span { color: rgba(255,255,255,.7); font-size: .72rem; }

.pricing-v86__overview { display: none; }
.pricing-v85__controls p { display: grid; min-width: 4.6rem; gap: .05rem; }
.pricing-v85__controls p strong { color: var(--green); font: 800 .78rem var(--mono); }
.pricing-v85__controls p small { font: 650 .55rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }

.price-card-v84 button.is-selected { color: var(--orange); }
.price-card-v84 button.is-selected::after { content: "✓"; }

.review-actions--primary { justify-content: flex-end; }
.review-actions--primary .button--accent { min-width: 13rem; }
.review-actions--secondary { margin-top: .65rem; }
.review-actions--secondary .share-tour-button { color: var(--muted); }

@media (max-width: 900px) {
  .details-essentials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .details-essentials label:nth-child(n) { grid-column: span 1; }
  .details-essentials label:nth-child(4),
  .details-essentials label:nth-child(5),
  .details-essentials label:nth-child(6),
  .details-essentials label:nth-child(7) { grid-column: 1 / -1; }
  .pricing-v86__overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
    margin: 0 0 .65rem;
  }
  .pricing-v86__overview button {
    display: grid;
    min-width: 0;
    min-height: 3.45rem;
    place-content: center;
    gap: .15rem;
    padding: .45rem .25rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--white);
    color: var(--green);
    cursor: pointer;
  }
  .pricing-v86__overview button strong { font: 800 .78rem var(--mono); }
  .pricing-v86__overview button small { color: var(--muted); font-size: .62rem; }
  .pricing-v86__overview button.is-active { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
  .pricing-v86__overview button.is-active strong { color: var(--orange); }
}

@media (max-width: 640px) {
  .details-essentials { grid-template-columns: 1fr 1fr; }
  .details-essentials label:first-child,
  .details-essentials label:nth-child(4),
  .details-essentials label:nth-child(5),
  .details-essentials label:nth-child(6),
  .details-essentials label:nth-child(7) { grid-column: 1 / -1; }
  .price-assurances--compact { grid-template-columns: 1fr; padding: .8rem 1rem; }
  .price-assurances--compact p { padding: .1rem 0 .65rem; }
  .price-assurances--compact p + p { padding: .65rem 0 .1rem; border-top: 1px solid rgba(255,255,255,.2); border-left: 0; }
  .review-actions--primary,
  .review-actions--secondary { flex-direction: column; }
  .review-actions--primary .button,
  .review-actions--secondary .share-tour-button { width: 100%; }
}

/* V8.7 · national atlas, tactile model controls and reliable request flow */
.hero-atlas__stage { cursor: grab; touch-action: pan-y; }
.hero-atlas__stage.is-map-dragging { cursor: grabbing; user-select: none; }
.hero-atlas__stage.is-map-dragging .atlas-overlay { pointer-events: none; }
.atlas-overview {
  letter-spacing: .16em;
  text-transform: uppercase;
}
.atlas-overview.is-active {
  color: var(--green);
  background: rgba(255,252,244,.96);
  border-color: rgba(3,43,107,.18);
  box-shadow: 0 8px 24px rgba(29,69,62,.1);
}
.atlas-overview.is-active::before {
  content: "";
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(243,93,47,.12);
}
.hero-atlas__caption {
  transition: opacity .24s ease, transform .28s ease;
}
.hero-atlas[data-active-destination="overview"] .hero-atlas__caption,
.hero-atlas.is-caption-dismissed .hero-atlas__caption,
.hero-atlas.is-story-open .hero-atlas__caption {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.hero-atlas.is-story-open .atlas-story { max-width: min(25rem, calc(100% - 2rem)); }
.hero-atlas.is-story-open .atlas-story a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.atlas-destination-close {
  position: absolute;
  top: .7rem;
  right: .75rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(3,43,107,.13);
  border-radius: 50%;
  background: rgba(255,252,244,.84);
  color: var(--green);
  font: 400 1.15rem/1 sans-serif;
  cursor: pointer;
}
.builder-date-note,
.builder-trust,
.response-time-label,
.draft-restored {
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.45;
}
.builder-date-note { display: block; margin-top: .4rem; }
.builder-details__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1rem; }
.builder-details__actions .button { margin: 0; }
.builder-reset {
  appearance: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: .25rem 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
}
.draft-restored { margin: .65rem 0 0; color: var(--green); }
.honeypot-field {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.review-dialog__intro { margin: -1rem 0 1.2rem; color: var(--muted); }
.submission-status { min-height: 1.4em; margin: .85rem 0 0; color: var(--muted); font-size: .78rem; }
.submission-status[data-state="error"] { color: #8d3326; }
.submission-status[data-state="success"] { color: var(--green); }
[data-send-request][aria-busy="true"] { cursor: progress; opacity: .72; }
@media (max-width: 700px) {
  .atlas-overview { max-width: 13rem; font-size: .58rem; letter-spacing: .11em; }
  .builder-details__actions { align-items: stretch; flex-direction: column; }
  .builder-details__actions .button { width: 100%; }
  .builder-reset { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-atlas__stage { cursor: default; }
}

/* National atlas hierarchy: destinations first, experiences on demand. */
.hero-atlas[data-active-destination="overview"] .atlas-city:not([data-map-hidden]) {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .42rem .56rem .42rem .44rem;
  border: 1px solid transparent;
  background: transparent;
  color: #123f3a;
  box-shadow: none;
  opacity: .94;
  cursor: pointer;
}
.hero-atlas[data-active-destination="overview"] .atlas-city i {
  width: .48rem;
  height: .48rem;
  border-width: 1.5px;
  border-color: #0b6457;
  background: #fffdf8;
  box-shadow: 0 0 0 .2rem rgba(11,100,87,.1), 0 3px 10px rgba(18,64,59,.12);
}
.hero-atlas[data-active-destination="overview"] .atlas-city strong {
  color: #123f3a;
  font-size: .7rem;
  font-weight: 760;
  transition: transform .22s ease, color .22s ease;
}
.hero-atlas[data-active-destination="overview"] .atlas-city strong::after {
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: .38rem;
  border: 0;
  background: none;
  color: #b94e32;
  content: "\2192";
  font: 700 .68rem/1 var(--body);
  opacity: .62;
  transform: translateX(0);
  transition: opacity .22s ease, transform .22s ease;
}
.hero-atlas[data-active-destination="overview"] .atlas-city span {
  color: #9f6657;
  font-size: .39rem;
  opacity: .7;
}
.hero-atlas[data-active-destination="overview"] .atlas-landmark {
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
  scale: .92;
}
.hero-atlas:not([data-active-destination="overview"]) .atlas-landmark:not([data-map-hidden]) {
  visibility: visible;
  opacity: .94;
  scale: 1;
  transition: opacity .28s ease, scale .32s cubic-bezier(.2,.75,.25,1), background .28s ease, border-color .28s ease, box-shadow .28s ease, column-gap .32s ease, padding .32s ease;
}
.destination-choice__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.002);
  transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .destination-choice:hover .destination-choice__media video,
  .destination-choice:focus-visible .destination-choice__media video {
    transform: scale(1.035);
  }
}
@media (hover: hover) and (pointer: fine) {
  .hero-atlas[data-active-destination="overview"] .atlas-city:hover,
  .hero-atlas[data-active-destination="overview"] .atlas-city:focus-visible {
    border-color: rgba(11,100,87,.18);
    background: rgba(255,253,248,.88);
    box-shadow: 0 9px 22px rgba(18,64,59,.13), inset 0 1px rgba(255,255,255,.86);
    opacity: 1;
  }
  .hero-atlas[data-active-destination="overview"] .atlas-city:hover strong,
  .hero-atlas[data-active-destination="overview"] .atlas-city:focus-visible strong {
    color: #0b6457;
    transform: translateX(.08rem);
  }
  .hero-atlas[data-active-destination="overview"] .atlas-city:hover strong::after,
  .hero-atlas[data-active-destination="overview"] .atlas-city:focus-visible strong::after {
    opacity: 1;
    transform: translateX(.12rem);
  }
}
@media (max-width: 700px) {
  .hero-atlas[data-active-destination="overview"] .atlas-city:not([data-map-hidden]) {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: .34rem .42rem;
  }
  .hero-atlas[data-active-destination="overview"] .atlas-city strong { font-size: .56rem; }
  .hero-atlas[data-active-destination="overview"] .atlas-city strong::after { margin-left: .2rem; font-size: .54rem; }
  .hero-atlas[data-active-destination="overview"] .atlas-city span { font-size: .34rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-atlas[data-active-destination="overview"] .atlas-city strong,
  .hero-atlas[data-active-destination="overview"] .atlas-city strong::after,
  .hero-atlas:not([data-active-destination="overview"]) .atlas-landmark:not([data-map-hidden]) {
    transition: none;
  }
}

/* V8.7 · three explicit atlas states: overview, focus and selected. */
.atlas-zoom { display: none !important; }
.hero-atlas__heading [data-map-heading-instruction]:empty { display: none; }
.hero-atlas:not([data-active-destination="overview"]) .atlas-overview {
  cursor: pointer;
  letter-spacing: .08em;
  text-transform: none;
}
.hero-atlas:not([data-active-destination="overview"]) .atlas-overview::before {
  display: none;
}
.hero-atlas[data-active-destination="overview"] .atlas-overview {
  cursor: default;
  box-shadow: none;
}

/* A selected destination remains a marker; its story lives only in the caption. */
.hero-atlas:not([data-active-destination="overview"]) .atlas-city,
.hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-active,
.hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-scene-active {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .32rem .42rem;
  border: 1px solid transparent;
  border-radius: .7rem;
  background: transparent;
  color: #173f3a;
  box-shadow: none;
  opacity: .32;
  scale: .94;
  cursor: pointer;
  transition: opacity .2s ease, scale .2s ease, background .2s ease, border-color .2s ease;
}
.hero-atlas:not([data-active-destination="overview"]) .atlas-city i {
  width: .44rem;
  height: .44rem;
  border: 1.5px solid rgba(11,100,87,.62);
  background: #fffdf8;
  box-shadow: 0 0 0 .16rem rgba(11,100,87,.07);
}
.hero-atlas:not([data-active-destination="overview"]) .atlas-city strong {
  color: #173f3a;
  font-size: .61rem;
  font-weight: 720;
}
.hero-atlas:not([data-active-destination="overview"]) .atlas-city strong::after { display: none; }
.hero-atlas:not([data-active-destination="overview"]) .atlas-city span {
  color: #9c6557;
  font-size: .35rem;
  opacity: .62;
}
.hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-active,
.hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-scene-active {
  border-color: rgba(243,93,47,.16);
  background: rgba(255,253,248,.94);
  box-shadow: 0 8px 18px rgba(18,64,59,.11), inset 0 1px rgba(255,255,255,.86);
  opacity: 1;
  scale: 1;
}
.hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-active i,
.hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-scene-active i {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 0 .22rem rgba(243,93,47,.13);
}
.hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-active strong,
.hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-scene-active strong {
  color: var(--green);
  font-size: .66rem;
}
.atlas-city small {
  display: none;
  grid-area: note;
  color: #7b6258;
  font: 500 .56rem/1.34 var(--body);
  letter-spacing: .01em;
  white-space: normal;
}
.hero-atlas:not([data-active-destination="overview"]):not(.is-camera-travelling) .atlas-city.is-active,
.hero-atlas:not([data-active-destination="overview"]):not(.is-camera-travelling) .atlas-city.is-scene-active {
  grid-template-columns: .58rem minmax(0, 1fr);
  grid-template-areas: "pin label" "number note";
  min-width: 12rem;
  max-width: 13.5rem;
  padding: .48rem .66rem .5rem .5rem;
}
.hero-atlas:not([data-active-destination="overview"]):not(.is-camera-travelling) .atlas-city.is-active strong,
.hero-atlas:not([data-active-destination="overview"]):not(.is-camera-travelling) .atlas-city.is-scene-active strong {
  font-size: .78rem;
  line-height: 1.1;
}
.hero-atlas:not([data-active-destination="overview"]):not(.is-camera-travelling) .atlas-city.is-active small,
.hero-atlas:not([data-active-destination="overview"]):not(.is-camera-travelling) .atlas-city.is-scene-active small {
  display: block;
  animation: atlas-city-note-in 280ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes atlas-city-note-in {
  from { opacity: 0; transform: translateY(.16rem); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-atlas:not([data-active-destination="overview"]) .atlas-city small { animation: none; }
}
@media (max-width: 700px) {
  .hero-atlas:not([data-active-destination="overview"]):not(.is-camera-travelling) .atlas-city.is-active,
  .hero-atlas:not([data-active-destination="overview"]):not(.is-camera-travelling) .atlas-city.is-scene-active {
    min-width: 10.6rem;
    max-width: min(12rem, calc(100vw - 3.25rem));
    padding: .42rem .54rem .44rem .44rem;
  }
  .hero-atlas:not([data-active-destination="overview"]):not(.is-camera-travelling) .atlas-city.is-active strong,
  .hero-atlas:not([data-active-destination="overview"]):not(.is-camera-travelling) .atlas-city.is-scene-active strong { font-size: .72rem; }
  .atlas-city small { font-size: .5rem; }
}
@media (hover: hover) and (pointer: fine) {
  .hero-atlas:not([data-active-destination="overview"]) .atlas-city:hover,
  .hero-atlas:not([data-active-destination="overview"]) .atlas-city:focus-visible {
    border-color: rgba(11,100,87,.15);
    background: rgba(255,253,248,.78);
    opacity: .78;
    scale: 1;
  }
.hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-active:hover,
.hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-scene-active:hover {
  opacity: 1;
}
}

/* City labels sit over varied 3D materials in the national view. Give every
   starting point the same quiet paper backing before hover. */
.hero-atlas[data-active-destination="overview"] .atlas-city {
  border-color: rgba(13, 91, 77, .18);
  background: rgba(255, 253, 248, .92);
  color: #0d5b4d;
  opacity: .98;
  box-shadow: 0 8px 20px rgba(18, 64, 59, .12), inset 0 1px rgba(255, 255, 255, .86);
}
.hero-atlas[data-active-destination="overview"] .atlas-city strong { color: #0d5b4d; font-weight: 760; }
.hero-atlas[data-active-destination="overview"] .atlas-city i { border-color: var(--orange); background: var(--orange); }
.hero-atlas[data-active-destination="overview"] .atlas-city:not([data-map-hidden]) {
  grid-template-columns: .54rem minmax(0, 1fr);
  grid-template-areas: "pin label" "number note";
  min-width: 10.65rem;
  min-height: 2.58rem;
  padding: .44rem .62rem .46rem .48rem;
}
.hero-atlas[data-active-destination="overview"] .atlas-city small {
  display: block;
  grid-area: note;
  color: rgba(18, 75, 68, .72);
  font-size: .52rem;
  line-height: 1.18;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .hero-atlas[data-active-destination="overview"] .atlas-city:not([data-map-hidden]) {
    min-width: 9.55rem;
    min-height: 2.38rem;
    padding: .38rem .48rem .4rem .4rem;
  }
  .hero-atlas[data-active-destination="overview"] .atlas-city small { font-size: .45rem; }
}

/* Landmarks are a second-level interaction, revealed only after camera arrival. */
.hero-atlas[data-landmarks-ready="false"] .atlas-landmark,
.hero-atlas.is-camera-travelling .atlas-landmark {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  scale: .92;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not([data-map-hidden]) {
  min-width: 2.75rem;
  min-height: 2.75rem;
  grid-template-columns: 1.72rem 0;
  padding: .38rem;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark__icon {
  width: 1.72rem;
  height: 1.72rem;
  flex: 0 0 1.72rem;
}
/* Every landmark keeps its measured footprint while hovered. Previously the
   tulip, water and mill annotations expanded from an icon into a card, which
   made the collision solver relocate the element beneath the pointer and
   caused an enter/leave loop. The second line is merely revealed, never laid
   out later. */
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi) {
  display: grid;
  grid-template-columns: 1.72rem minmax(7.4rem, auto);
  grid-template-areas: "icon title" "icon meta";
  min-width: 10.15rem;
  min-height: 2.42rem;
  column-gap: .36rem;
  padding: .34rem .52rem .34rem .34rem;
  overflow: visible;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .2s ease;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi) .atlas-landmark__icon { grid-area: icon; }
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi) strong,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi) small {
  display: block;
  min-width: 0;
  max-width: none;
  overflow: visible;
  transform: none;
  white-space: normal;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi) strong { grid-area: title; opacity: 1; }
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi) small {
  grid-area: meta;
  opacity: 1;
  color: rgba(18, 75, 68, .7);
  transition: none;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi):not(.atlas-route-marker) {
  border-color: rgba(13, 91, 77, .2);
  background: rgba(255, 253, 248, .93);
  color: #124b44;
  box-shadow: 0 8px 20px rgba(18, 64, 59, .12), inset 0 1px rgba(255, 255, 255, .84);
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:hover,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:focus-visible,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.is-selected {
  border-color: rgba(229, 238, 109, .76);
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark__label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: normal;
  width: max-content;
  transition: max-width .24s ease, opacity .18s ease;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:hover .atlas-landmark__label,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:focus-visible .atlas-landmark__label,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.is-selected .atlas-landmark__label {
  max-width: 20rem;
  opacity: 1;
}

/* Rotterdam POIs keep one stable footprint. Growing a projected marker under
   the cursor was making the collision solver move it, which in turn retriggered
   pointerleave/pointerenter. Their fixed label also separates a place to
   inspect from the route CTA kept in the caption. */
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:hover,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:focus-visible,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi.is-selected {
  grid-template-columns: 1.72rem minmax(5.9rem, auto);
  grid-template-areas: "icon title" "icon meta";
  min-width: 8.25rem;
  min-height: 2.42rem;
  position: relative;
  padding: .34rem .48rem .34rem .34rem;
  border-color: rgba(7, 74, 66, .34);
  background: rgba(7, 57, 53, .92);
  box-shadow: 0 10px 23px rgba(5, 42, 39, .2);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .2s ease;
}
.hero-atlas[data-poi-focus="true"] .atlas-landmark.atlas-poi:not(.is-selected) { opacity: .32; }
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi.is-selected .atlas-landmark__icon {
  background: var(--orange);
  color: white;
  box-shadow: 0 0 0 .22rem rgba(243, 105, 61, .16);
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi strong,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi small {
  display: block;
  max-width: none;
  opacity: 1;
  overflow: visible;
  white-space: normal;
  color: rgba(255, 255, 255, .96) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .24);
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi small {
  opacity: 0;
  transition: opacity .16s ease;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:hover small,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:focus-visible small,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi.is-selected small { opacity: 1; }
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi strong::after {
  content: none;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:hover,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:focus-visible,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi.is-selected {
  border-color: rgba(229, 238, 109, .76);
  background: rgba(5, 67, 61, .97);
  box-shadow: 0 0 0 .18rem rgba(229, 238, 109, .12), 0 12px 27px rgba(5, 42, 39, .26);
}
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker,
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker:hover,
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker:focus-visible,
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker.is-selected {
  display: grid;
  grid-template-columns: 1.72rem minmax(7.4rem, auto);
  grid-template-areas: "icon title" "icon meta";
  min-width: 10.15rem;
  padding: .34rem .52rem .34rem .34rem;
  border-color: rgba(243, 105, 61, .54);
  background: rgba(255, 251, 241, .95);
  color: #124b44;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker .atlas-landmark__icon {
  grid-area: icon;
  background: var(--orange);
  color: white;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker strong,
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker small {
  display: block;
  min-width: 0;
  max-width: none;
  opacity: 1;
  overflow: visible;
  white-space: normal;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker strong { grid-area: title; }
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker small { grid-area: meta; }
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker small { color: rgba(18, 75, 68, .78) !important; }

/* Territory origin: deliberately small, never a second large city card. */
.hero-atlas:not([data-active-destination="overview"]) .atlas-city[data-map-city="rotterdam"].is-active,
.hero-atlas:not([data-active-destination="overview"]) .atlas-city[data-map-city="rotterdam"].is-scene-active {
  grid-template-columns: 1.32rem auto;
  grid-template-areas: "pin label" "pin note";
  min-width: 7.6rem;
  min-height: 2.1rem;
  padding: .26rem .42rem .26rem .26rem;
  border-color: rgba(243, 105, 61, .42);
  background: rgba(255, 251, 241, .88);
}
.hero-atlas:not([data-active-destination="overview"]) .atlas-city[data-map-city="rotterdam"].is-active i,
.hero-atlas:not([data-active-destination="overview"]) .atlas-city[data-map-city="rotterdam"].is-scene-active i {
  display: grid;
  width: 1.32rem;
  height: 1.32rem;
  place-items: center;
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 0 .16rem rgba(243, 105, 61, .14);
}
.hero-atlas:not([data-active-destination="overview"]) .atlas-city[data-map-city="rotterdam"].is-active i::after,
.hero-atlas:not([data-active-destination="overview"]) .atlas-city[data-map-city="rotterdam"].is-scene-active i::after {
  content: "↗";
  color: white;
  font: 700 .65rem/1 var(--mono);
}
.hero-atlas:not([data-active-destination="overview"]) .atlas-city[data-map-city="rotterdam"].is-active strong,
.hero-atlas:not([data-active-destination="overview"]) .atlas-city[data-map-city="rotterdam"].is-scene-active strong { font-size: .63rem; }
.hero-atlas:not([data-active-destination="overview"]) .atlas-city[data-map-city="rotterdam"].is-active small,
.hero-atlas:not([data-active-destination="overview"]) .atlas-city[data-map-city="rotterdam"].is-scene-active small {
  display: block;
  font-size: .43rem;
  white-space: nowrap;
}

/* A selected POI uses the caption as its sole long-form information surface. */
.hero-atlas[data-poi-focus="true"] .atlas-poi-card { display: none !important; }
.hero-atlas[data-poi-focus="true"] .atlas-landmark.atlas-poi:not(.is-selected),
.hero-atlas[data-poi-focus="true"] .atlas-route-marker { opacity: .14; pointer-events: none; }

/* Small attached POI sheet: a place description, never a booking card. */
.atlas-poi-card {
  position: absolute;
  z-index: 13;
  width: min(17rem, calc(100% - 2rem));
  padding: .78rem .9rem .82rem;
  border: 1px solid rgba(11, 91, 77, .18);
  border-radius: .72rem;
  background: rgba(255, 253, 248, .97);
  box-shadow: 0 16px 34px rgba(17, 65, 57, .18);
  color: var(--ink);
  pointer-events: auto;
  transform: translate3d(var(--poi-card-x, -999px), var(--poi-card-y, -999px), 0);
  transition: opacity .22s ease, transform .22s var(--living-ease);
}
.atlas-poi-card[hidden] { display: none; }
.atlas-poi-card small { display: block; color: var(--orange); font: 600 .49rem/1.25 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.atlas-poi-card strong { display: block; margin-top: .25rem; font: 600 1.16rem/1.05 var(--display); }
.atlas-poi-card p { margin: .38rem 0 0; color: rgba(16, 44, 48, .72); font-size: .68rem; line-height: 1.42; }
.atlas-poi-card button { margin: .58rem 0 0; padding: 0; border: 0; background: none; color: var(--green); font: 700 .64rem var(--body); text-decoration: underline; text-underline-offset: .17em; cursor: pointer; }

/* One compact destination card, anchored away from the miniature. */
.hero-atlas__caption {
  right: 1rem;
  bottom: 1rem;
  left: auto;
  width: min(35rem, calc(100% - 2rem));
  padding: .85rem 3.35rem .85rem 1rem;
  border-color: rgba(3,43,107,.12);
  background: rgba(255,253,248,.95);
  box-shadow: 0 14px 38px rgba(29,69,62,.13), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: none;
}
.hero-atlas__caption .atlas-destination-close {
  top: .5rem;
  right: .5rem;
  width: 2.75rem;
  height: 2.75rem;
}
.hero-atlas__caption > span {
  color: var(--orange);
  font-size: .5rem;
  letter-spacing: .11em;
}
.hero-atlas__caption strong { font-size: clamp(1.02rem, 1.5vw, 1.3rem); }
.hero-atlas__caption p { max-width: 47ch; font-size: .67rem; line-height: 1.38; }
.hero-atlas__caption-actions { display: grid; gap: .25rem; justify-items: start; }
.hero-atlas__caption a { font-size: .67rem; }
.hero-atlas__caption [data-atlas-destination-link] { color: rgba(13, 91, 77, .78); font-size: .58rem; font-weight: 600; }
.hero-atlas.is-camera-travelling > .hero-atlas__caption {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(.55rem);
}

/* Atlas marker placement is solved from the projected anchor. Legacy left/top
   positions remain inert; all live placement flows through map and collision vars. */
.atlas-city,
.atlas-landmark,
.atlas-city.is-active,
.atlas-city.is-scene-active,
.atlas-city[data-map-city="haarlem"],
.atlas-city[data-map-city="rotterdam"],
.atlas-landmark--mill,
.atlas-landmark--farm,
.atlas-landmark--haarlem,
.atlas-city[data-map-hidden],
.atlas-landmark[data-map-hidden] {
  --collision-x: 0px;
  --collision-y: 0px;
}
/* Geographic anchors are separate from editorial labels.  A label may take a
   nearby lane, but this quiet dot always stays at the projected place. */
.atlas-geo-anchor {
  position: absolute;
  z-index: 3;
  width: .42rem;
  height: .42rem;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 .18rem rgba(243,93,47,.16), 0 3px 8px rgba(4,29,32,.2);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--anchor-x, -100px), var(--anchor-y, -100px), 0) translate(-50%, -50%);
  transition: opacity 180ms ease;
}
.atlas-geo-anchor[data-anchor-visible="true"] { opacity: .9; }
.atlas-geo-anchor[data-anchor-hidden="true"] { opacity: 0; }
[data-atlas-debug="true"] [data-map-point] { outline: 1px dashed rgba(243,93,47,.75); outline-offset: 3px; }
[data-atlas-debug="true"] .atlas-geo-anchor { opacity: .95; }
@media (prefers-reduced-motion: reduce) { .atlas-geo-anchor { transition: none; } }
@media (max-width: 700px) {
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:hover,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:focus-visible,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi.is-selected {
    grid-template-columns: 1.72rem;
    grid-template-areas: "icon";
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: .38rem;
  }
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi strong,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi small { display: none; }
  .hero-atlas[data-landmarks-ready="true"] .atlas-route-marker,
  .hero-atlas[data-landmarks-ready="true"] .atlas-route-marker:hover,
  .hero-atlas[data-landmarks-ready="true"] .atlas-route-marker:focus-visible,
  .hero-atlas[data-landmarks-ready="true"] .atlas-route-marker.is-selected {
    grid-template-columns: 1.72rem;
    grid-template-areas: "icon";
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: .38rem;
  }
  .hero-atlas[data-landmarks-ready="true"] .atlas-route-marker strong,
  .hero-atlas[data-landmarks-ready="true"] .atlas-route-marker small { display: none; }
  .atlas-poi-card { display: none !important; }
}
.atlas-city[data-collision-hidden],
.atlas-landmark[data-collision-hidden] {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 700px) {
  .hero-atlas:not([data-active-destination="overview"]) .atlas-city,
  .hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-active,
  .hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-scene-active {
    padding: .28rem .34rem;
  }
  .hero-atlas:not([data-active-destination="overview"]) .atlas-city[data-map-city="rotterdam"].is-active strong,
  .hero-atlas:not([data-active-destination="overview"]) .atlas-city[data-map-city="rotterdam"].is-scene-active strong {
    display: none;
  }
  .hero-atlas__caption {
    right: .65rem;
    bottom: .65rem;
    left: .65rem;
    width: auto;
    max-height: 10.75rem;
    padding: .72rem 3.2rem .72rem .8rem;
    overflow: auto;
    border-radius: .9rem;
  }
  .hero-atlas__caption strong { font-size: 1rem; }
  .hero-atlas__caption p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .63rem;
  }
  .hero-atlas__caption a { font-size: .65rem; }
  .hero-atlas__caption [data-atlas-destination-link] { font-size: .58rem; }
  .atlas-destination-close { top: .4rem; right: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-atlas:not([data-active-destination="overview"]) .atlas-city,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark__label,
  .hero-atlas__caption { transition: none; }
}

/* LivingAtlas brand alignment: utility labels and official interaction accents. */
.hero-atlas__heading,
.atlas-city strong,
.atlas-city span,
.atlas-landmark strong,
.atlas-landmark small,
.hero-atlas__caption > span,
.atlas-story small {
  font-family: "DM Mono", monospace;
  font-weight: 500 !important;
}
.atlas-city.is-active i,
.atlas-city.is-scene-active i,
.atlas-landmark--mill .atlas-landmark__icon,
.atlas-landmark--architecture .atlas-landmark__icon,
.atlas-landmark--tulip .atlas-landmark__icon {
  background: #f35d2f;
  color: #fffdf8;
}
.atlas-landmark--water .atlas-landmark__icon,
.atlas-landmark--farm .atlas-landmark__icon,
.atlas-landmark--heritage .atlas-landmark__icon {
  background: #cedd49;
  color: #0d5b4d;
}
.atlas-landmark:hover,
.atlas-landmark:focus-visible,
.atlas-landmark.is-selected {
  border-color: color-mix(in srgb, #cedd49 72%, #0d5b4d);
}

/* Opening ride: one responsive WebGL moment, then the LivingAtlas takes over. */
body.is-intro-playing { overflow: hidden; }
.toucholland-intro {
  position: fixed;
  z-index: 10000;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 22%, rgba(174, 215, 189, .34), transparent 32%),
    linear-gradient(145deg, #fffdf8 0%, #f5f0e6 58%, #edf2e6 100%);
  color: #0d5b4d;
  transform: translate3d(0, 0, 0);
  transition: transform 620ms cubic-bezier(.76, 0, .24, 1);
  isolation: isolate;
}
.toucholland-intro[hidden] { display: none; }
.toucholland-intro.is-leaving { transform: translate3d(0, -102%, 0); }
.toucholland-intro__route,
.toucholland-intro__canvas,
.toucholland-intro__grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.toucholland-intro__route { z-index: 1; overflow: visible; }
.toucholland-intro__route path {
  fill: none;
  stroke: #dc673b;
  stroke-width: clamp(3px, .35vw, 6px);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  vector-effect: non-scaling-stroke;
}
.toucholland-intro__canvas { z-index: 2; }
.toucholland-intro__canvas canvas { display: block; width: 100%; height: 100%; }
.toucholland-intro__couple { position: absolute; z-index: 2; left: 50%; bottom: 22.5%; width: clamp(12rem, 17vw, 17rem); height: clamp(12rem, 17vw, 17rem); opacity: .86; pointer-events: none; transform: translateX(-50%); }
.toucholland-intro__couple svg { display: block; width: 100%; height: 100%; }
.toucholland-intro__couple svg path { stroke: var(--orange) !important; }
.toucholland-intro__grain {
  z-index: 3;
  pointer-events: none;
  opacity: .035;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.toucholland-intro__brand {
  position: absolute;
  z-index: 4;
  top: clamp(2rem, 7vh, 5rem);
  left: 50%;
  width: min(88vw, 50rem);
  margin: 0;
  text-align: center;
  transform: translate3d(-50%, 12px, 0);
  opacity: 0;
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1), opacity 420ms ease;
}
.toucholland-intro.is-brand-visible .toucholland-intro__brand { transform: translate3d(-50%, 0, 0); opacity: 1; }
.toucholland-intro__brand img {
  display: block;
  width: clamp(12rem, 25vw, 20rem);
  height: auto;
  margin: 0 auto;
}
.toucholland-intro__brand span {
  display: none;
}
.toucholland-intro__tagline {
  position: absolute;
  z-index: 1;
  /* The master V4 mark is tall (1400 × 1000). Keep the line visibly below
     its footprint, while the canvas bike can still pass in front of it. */
  top: calc(clamp(2rem, 7vh, 5rem) + clamp(8.6rem, 17.86vw, 14.3rem) + .95rem);
  left: 50%;
  width: min(88vw, 50rem);
  display: block;
  margin: 0;
  color: #0d5b4d;
  font: 500 clamp(.58rem, 1vw, .72rem)/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  transform: translate3d(-50%, 12px, 0);
  opacity: 0;
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1), opacity 420ms ease;
}
.toucholland-intro__tagline span { display: block; }
.toucholland-intro__tagline span + span { margin-top: .46rem; letter-spacing: .12em; opacity: .76; }
.toucholland-intro.is-brand-visible .toucholland-intro__tagline { transform: translate3d(-50%, 0, 0); opacity: 1; }
.toucholland-intro__skip {
  position: absolute;
  z-index: 5;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  min-width: 5rem;
  min-height: 2.6rem;
  padding: .65rem .9rem;
  border: 1px solid rgba(13, 91, 77, .28);
  border-radius: 999px;
  background: rgba(255, 253, 248, .82);
  color: #0d5b4d;
  font: 500 .62rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color 200ms ease, background-color 200ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.toucholland-intro__skip:focus-visible { outline: 2px solid #dc673b; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .toucholland-intro__skip:hover { color: #fffdf8; background: #0d5b4d; transform: translateY(-2px); }
}
@media (max-width: 700px) {
  .toucholland-intro__brand { top: max(2.2rem, calc(env(safe-area-inset-top) + 1.1rem)); width: 92vw; }
  .toucholland-intro__brand img { width: min(72vw, 17rem); }
  .toucholland-intro__tagline { top: calc(max(2.2rem, env(safe-area-inset-top) + 1.1rem) + min(51.43vw, 12.15rem) + .65rem); width: 92vw; font-size: .56rem; line-height: 1.5; }
  .toucholland-intro__skip { min-width: 4.6rem; min-height: 2.5rem; font-size: .56rem; }
  .toucholland-intro__couple { left: 50%; bottom: 25.5%; width: 12rem; height: 12rem; opacity: .82; }
  .choice-grid--options .choice-card strong { margin-top: .82rem; }
  .choice-grid--options .choice-card small { margin-top: .28rem; }
}
@media (prefers-reduced-motion: reduce) {
  .toucholland-intro { display: none !important; transition: none; }
}

/* Final editorial type rhythm: Fraunces carries the story, DM Mono only the
   map/data cues. This keeps French apostrophes and long headings evenly set. */
h1, h2, h3 {
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}
.section-heading > p {
  line-height: 1.55;
  letter-spacing: 0;
}
.moment-v84 h3 {
  max-width: 15ch;
  margin: .9rem 0 .65rem;
  font-size: clamp(1.65rem, 2.35vw, 2.45rem);
  line-height: .98;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.moment-v84 p {
  max-width: 48ch;
  line-height: 1.55;
  letter-spacing: 0;
}
.moment-v84 > span,
.moment-v84 > div > span {
  letter-spacing: .06em;
}
.price-card-v84 h3,
.multiday-v84 h3,
.contribution-v84 h3 {
  line-height: 1;
  letter-spacing: -.025em;
}
@media (max-width: 640px) {
  .moment-v84 h3 { font-size: 1.75rem; line-height: 1; }
}

/* Every projected city is a stable paper label, not transparent text over a
   building. Hover only changes the accent; it never creates the backing. */
.hero-atlas .atlas-city,
.hero-atlas .atlas-city:not(.is-active):not(.is-scene-active),
.hero-atlas[data-active-destination="overview"] .atlas-city:not([data-map-hidden]),
.hero-atlas:not([data-active-destination="overview"]) .atlas-city,
.hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-active,
.hero-atlas:not([data-active-destination="overview"]) .atlas-city.is-scene-active {
  border-color: rgba(13, 91, 77, .18);
  background-color: rgba(255, 253, 248, .94);
  color: #0d5b4d;
  box-shadow: 0 8px 20px rgba(18, 64, 59, .12), inset 0 1px rgba(255, 255, 255, .86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (hover: hover) and (pointer: fine) {
  .hero-atlas .atlas-city:hover,
  .hero-atlas .atlas-city:focus-visible {
    background-color: #fffdf8;
  }
}
.hero-atlas :is(.atlas-city, .atlas-landmark).is-pressed {
  box-shadow: 0 0 0 .16rem rgba(243, 93, 47, .2), 0 8px 20px rgba(18, 64, 59, .16);
}
.hero-atlas :is(.atlas-city, .atlas-landmark).is-activating {
  border-color: rgba(243, 93, 47, .72) !important;
  box-shadow: 0 0 0 .2rem rgba(243, 93, 47, .16), 0 12px 28px rgba(18, 64, 59, .18) !important;
  opacity: 1 !important;
}
.hero-atlas :is(.atlas-city, .atlas-landmark).is-activating :is(i, .atlas-landmark__icon) {
  background: #f35d2f !important;
  color: #fffdf8 !important;
}
.hero-atlas.is-camera-travelling :is(.atlas-city, .atlas-landmark).is-activating {
  visibility: visible !important;
  pointer-events: none !important;
}
.hero-atlas [data-map-inert] {
  pointer-events: none !important;
}
/* Interaction grammar: orange is reserved for a route/origin. Green marks a
   real place or stop that can be explored inside that route. */
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-route-marker) .atlas-landmark__icon {
  background: #0d5b4d;
  color: #cedd49;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker .atlas-landmark__icon {
  background: #f35d2f;
  color: #fffdf8;
}
/* The projected marker footprint is immutable across rest, hover, focus and
   selection. Only paint changes under the pointer, so the collision solver no
   longer chases a resizing target and creates a hover flicker loop. */
@media (hover: hover) and (pointer: fine) {
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi),
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi):hover,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi):focus-visible,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi).is-selected {
    grid-template-columns: 1.72rem minmax(7.4rem, auto);
    grid-template-areas: "icon title" "icon meta";
    min-width: 10.15rem;
    min-height: 2.42rem;
    column-gap: .36rem;
    padding: .34rem .52rem .34rem .34rem;
  }
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi) strong,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi) small,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi):hover strong,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi):hover small,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi):focus-visible strong,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:not(.atlas-poi):focus-visible small {
    max-width: none;
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 820px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) 2.8rem;
    width: 100%;
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .site-header .menu-toggle {
    position: relative;
    z-index: 2;
    display: grid;
    grid-column: 3;
    justify-self: end;
    visibility: visible;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-atlas :is(.atlas-city, .atlas-landmark).is-pressed,
  .hero-atlas :is(.atlas-city, .atlas-landmark).is-activating {
    transition: none;
  }
}



/* Launch pass: the offer and the request take precedence over decorative navigation. */
html { scroll-padding-top: 7rem; }
section[id] { scroll-margin-top: 7rem; }
.chapter-rail { display: none !important; }
/* The opening ride owns the screen. Map sheets must never compete with it. */
body.is-intro-playing [data-hero-map] { pointer-events: none; }
body.is-intro-playing [data-hero-map] aside,
body.is-intro-playing [data-atlas-poi-card] { display: none !important; }
/* Let the route bicycle finish its crossing before the explanatory caption enters. */
.hero-atlas.is-route-riding > .hero-atlas__caption {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(.55rem);
}
.hero__lead { max-width: 33rem; }
/* The introduction to Goulven is a body paragraph, not a second headline.
   Match the calm, compact reading rhythm of the hero lead. */
.experience__copy > .lead {
  max-width: 33rem;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.35;
}
/* Host-table choices contain two useful lines of information. Keep them
   together instead of distributing them across the height of the card. */
.choice-card:has(input[name="alette"]),
.choice-card:has(input[name="ellen"]) {
  min-height: 7.25rem;
  justify-content: flex-start;
  gap: .26rem;
}
.choice-card:has(input[name="alette"]) strong,
.choice-card:has(input[name="ellen"]) strong {
  margin-top: .08rem;
  line-height: 1.12;
}
.choice-card:has(input[name="alette"]) small,
.choice-card:has(input[name="ellen"]) small {
  margin-top: 0;
  line-height: 1.28;
}
/* The two encounter cards read as a short invitation: keep their label,
   title and supporting sentence in one tight visual breath. */
.host-encounters { row-gap: .7rem; }
.host-encounter h3 {
  margin: .35rem 0 .4rem;
  line-height: .98;
}
.host-encounter p { line-height: 1.38; }
.host-encounter__action { margin-top: .58rem; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.selected-destination [data-builder-city] {
  display: block;
  width: auto;
  min-width: 9.75rem;
  margin-top: .38rem;
  padding: .32rem 1.55rem .32rem .48rem;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: .38rem;
  background: rgba(255,255,255,.1);
  color: var(--white);
  font: 600 .68rem var(--mono);
}
.selected-destination [data-builder-city] option { color: var(--ink); }
.selected-destination strong,
.route-chip strong {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.025em;
}
.route-chip strong { font-size: 1.08rem; line-height: 1.04; }
.hero__actions { align-items: center; }
.launch-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  margin: 0 var(--gutter) var(--section);
  padding: 1.25rem 1.45rem;
  border: 1px solid rgba(13, 91, 77, .18);
  border-radius: 1rem;
  background: #fffdf8;
  box-shadow: 0 12px 32px rgba(16, 44, 48, .06);
}
.launch-proof p { margin: 0; color: rgba(16, 44, 48, .78); }
.launch-proof strong { color: var(--ink); }
.launch-proof__label { color: var(--orange); font: 600 .62rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.form-privacy { max-width: 46rem; margin: 1rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.form-privacy a { color: var(--green); text-underline-offset: .18em; }
.site-footer__legal { max-width: 42rem; line-height: 1.5; }

/* Legal pages: kept deliberately editorial, so practical information reads as
   part of Toucholland rather than as a detached compliance template. */
.legal-page { min-height: 100vh; background: var(--paper); color: var(--ink); }
.legal-page a { color: inherit; text-underline-offset: .2em; }
.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem var(--gutter); border-bottom: 1px solid var(--line); background: rgba(255,253,248,.88); }
.legal-brand { display: block; width: clamp(8.6rem, 15vw, 11rem); }
.legal-brand img { display: block; width: 100%; height: auto; }
.legal-header nav, .legal-footer > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1rem; }
.legal-header nav a, .legal-header nav button { border: 0; background: transparent; color: var(--green); font: 600 .68rem var(--mono); letter-spacing: .035em; text-decoration: none; cursor: pointer; }
.legal-header nav a:hover, .legal-header nav a:focus-visible, .legal-header nav button:hover, .legal-header nav button:focus-visible { color: var(--orange); outline: none; }
.legal-main { width: min(100%, 88rem); margin: 0 auto; padding: clamp(3rem, 9vw, 8rem) var(--gutter) clamp(4rem, 10vw, 9rem); }
.legal-hero { max-width: 56rem; padding-bottom: clamp(3rem, 7vw, 6rem); }
.legal-hero h1 { max-width: 13ch; margin: .65rem 0 1.4rem; color: var(--ink); font-size: clamp(4.15rem, 6.6vw, 8.5rem); line-height: .81; letter-spacing: -.075em; }
.legal-hero h1 em { color: var(--green-dark); font-style: italic; }
.legal-hero > p:last-child { max-width: 46ch; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.55; }
.legal-layout { display: grid; grid-template-columns: minmax(11rem, .37fr) minmax(0, 1fr); gap: clamp(2rem, 8vw, 9rem); align-items: start; }
.legal-aside { position: sticky; top: 2rem; display: grid; gap: .65rem; padding-top: .35rem; }
.legal-aside p { margin: 0; color: var(--muted); font: 500 .62rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.legal-aside strong { color: var(--green); font: 600 .92rem var(--display); }
.legal-aside a { width: fit-content; margin-top: .8rem; color: var(--orange); font: 600 .7rem var(--mono); text-decoration: none; }
.legal-aside a:hover, .legal-aside a:focus-visible { text-decoration: underline; outline: none; }
.legal-content { display: grid; gap: 0; border-top: 1px solid var(--line); }
.legal-content section { position: relative; padding: clamp(1.6rem, 3vw, 2.75rem) 0 clamp(1.8rem, 4vw, 3.5rem) clamp(3.2rem, 7vw, 6.5rem); border-bottom: 1px solid var(--line); }
.legal-index { position: absolute; top: clamp(1.8rem, 3vw, 2.9rem); left: 0; margin: 0; color: var(--orange); font: 500 .65rem var(--mono); letter-spacing: .08em; }
.legal-content h2 { max-width: 22ch; margin: 0 0 1rem; color: var(--green); font-size: clamp(1.8rem, 3.5vw, 3.4rem); line-height: .95; letter-spacing: -.045em; }
.legal-content p:not(.legal-index) { max-width: 66ch; margin: 0; color: var(--muted); font-size: clamp(.94rem, 1.2vw, 1.06rem); line-height: 1.7; }
.legal-content p + p { margin-top: .85rem; }
.legal-content a { color: var(--green); font-weight: 700; }
.photo-credits { display: grid; gap: .85rem; max-width: 66ch; margin: 1.35rem 0 0; padding: 0; list-style: none; }
.photo-credits li { color: var(--muted); font-size: .9rem; line-height: 1.7; }
.photo-credits span { display: block; margin-bottom: .2rem; color: var(--orange); font: 600 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.legal-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.35rem var(--gutter); background: var(--navy); color: rgba(255,255,255,.68); font: 500 .64rem var(--mono); }
.legal-footer a { color: var(--white); text-decoration: none; }
.legal-footer a:hover, .legal-footer a:focus-visible { color: var(--lime); outline: none; }
@media (min-width: 1101px) { .hero__copy { align-self: start; padding-top: 1rem; } }
@media (max-width: 680px) { .legal-header { align-items: flex-start; } .legal-header nav { justify-content: flex-end; max-width: 15rem; } .legal-layout { grid-template-columns: 1fr; gap: 2rem; } .legal-aside { position: static; grid-template-columns: auto 1fr; align-items: baseline; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .legal-aside a { grid-column: 1 / -1; } .legal-content section { padding-left: 2.65rem; } .legal-index { top: 1.95rem; } .legal-footer { flex-direction: column; } .legal-footer > div { justify-content: flex-start; } }
@media (max-width: 720px) {
  html { scroll-padding-top: 6.4rem; }
  section[id] { scroll-margin-top: 6.4rem; }
  .launch-proof { grid-template-columns: 1fr; margin: 0 1rem 3.5rem; padding: 1.15rem; }
  .hero__actions { align-items: stretch; }
  /* Keep the mobile hero quiet and wholly inside its safe reading width. */
  .hero .eyebrow {
    font-size: .48rem;
    letter-spacing: .075em;
    overflow-wrap: anywhere;
  }
  .hero .eyebrow::before { width: 1.2rem; margin-right: .45rem; }
  .hero__copy,
  .hero__lead {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .hero__lead { overflow-wrap: break-word; }
  .hero-atlas__heading {
    right: .7rem;
    left: .7rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .45rem;
  }
  .hero-atlas__heading p {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hero-atlas__heading span { display: none; }
  .atlas-overview {
    max-width: none;
    margin-left: 0;
    white-space: nowrap;
  }
  .hero-atlas[data-active-destination="overview"] .atlas-city:not([data-map-hidden]) {
    min-height: 2.75rem;
  }
}
/* Safari can invalidate a masked, transformed WebGL layer while scrolling.
   On phones the atlas keeps its 3D model but avoids those compositor paths. */
@media (max-width: 700px) {
  .hero-atlas {
    transform: none !important;
  }
  .atlas-webgl {
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask-composite: initial !important;
    mask-composite: initial !important;
  }
  .hero-atlas__stage.is-webgl-fallback .atlas-fallback {
    padding: 8% 12%;
    fill: #94b48d;
    stroke: #447c6b;
    stroke-width: 1.2;
    opacity: 1;
  }
  .hero-atlas__stage.is-webgl-fallback .atlas-landmark :is(strong, small) {
    display: none !important;
  }
  .hero-atlas__stage.is-webgl-fallback .atlas-city {
    pointer-events: auto !important;
  }

  /* The destination sheet is editorial copy, not a two-column toolbar. */
  .hero-atlas__caption {
    display: block;
    right: .65rem;
    bottom: .65rem;
    left: .65rem;
    width: auto;
    max-height: none;
    min-height: 0;
    padding: .78rem 3.25rem .85rem .85rem;
    overflow: visible;
  }
  .hero-atlas__caption > span { display: block; margin-bottom: .38rem; }
  .hero-atlas__caption > div { min-width: 0; }
  .hero-atlas__caption strong { font-size: clamp(1.3rem, 6.6vw, 1.7rem); line-height: .95; }
  .hero-atlas__caption p {
    display: block;
    max-width: 26ch;
    margin-top: .38rem;
    overflow: visible;
    -webkit-line-clamp: unset;
    font-size: .72rem;
    line-height: 1.36;
  }
  .hero-atlas__caption-actions {
    display: grid;
    gap: .38rem;
    margin-top: .68rem;
    justify-items: start;
  }
  .hero-atlas__caption a {
    grid-column: auto;
    grid-row: auto;
    max-width: 100%;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Stable illustrated atlas -------------------------------------------------
   Labels are deliberately separated from their geographic anchors. City names
   remain visible for orientation; POIs are compact, tappable pins that open
   their full story instead of competing for the same few centimetres. */
.hero-atlas__stage.is-webgl-fallback {
  overflow: hidden;
}
.hero-atlas__stage.is-webgl-fallback .atlas-fallback {
  padding: 2.5rem 13% 1.4rem;
  fill: #78a789;
  stroke: rgba(28, 92, 76, .7);
  stroke-width: 1.25;
  opacity: 1;
  filter: drop-shadow(0 16px 17px rgba(22, 67, 58, .20));
}
.hero-atlas__stage.is-webgl-fallback .atlas-overlay { overflow: hidden; }
.hero-atlas__stage.is-webgl-fallback .atlas-city {
  z-index: 4;
  min-width: 8.5rem;
  padding: .48rem .65rem .5rem .5rem;
  border: 1px solid rgba(18, 74, 65, .24);
  border-radius: .8rem;
  background: rgba(255, 253, 246, .94);
  color: var(--green-dark);
  box-shadow: 0 8px 20px rgba(27, 73, 61, .16);
  backdrop-filter: blur(8px);
}
.hero-atlas__stage.is-webgl-fallback .atlas-city i { border-color: rgba(18, 74, 65, .48); }
.hero-atlas__stage.is-webgl-fallback .atlas-city span { color: var(--orange); }
.hero-atlas__stage.is-webgl-fallback .atlas-city strong { color: var(--green-dark); font-size: .68rem; }
.hero-atlas__stage.is-webgl-fallback .atlas-city small {
  grid-column: 2;
  grid-row: 3;
  margin-top: .18rem;
  color: var(--muted);
  font: 600 .43rem/1.25 var(--mono);
  white-space: nowrap;
}
.hero-atlas__stage.is-webgl-fallback .atlas-landmark {
  z-index: 3;
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  padding: .16rem;
  border: 2px solid rgba(255, 253, 246, .95);
  border-radius: 50%;
  background: rgba(7, 52, 48, .88);
  box-shadow: 0 6px 14px rgba(25, 68, 57, .2);
}
.hero-atlas__stage.is-webgl-fallback .atlas-landmark .atlas-landmark__icon {
  width: 100%; height: 100%;
  background: transparent;
  color: var(--lime);
}
.hero-atlas__stage.is-webgl-fallback .atlas-landmark--water .atlas-landmark__icon { color: #a8e0e0; }
.hero-atlas__stage.is-webgl-fallback .atlas-landmark--heritage .atlas-landmark__icon { color: #ffd29d; }
.hero-atlas__stage.is-webgl-fallback .atlas-landmark :is(strong, small) { display: none !important; }
.hero-atlas__stage.is-webgl-fallback .atlas-landmark.is-selected {
  border-color: var(--lime);
  background: var(--green-dark);
  box-shadow: 0 0 0 .22rem rgba(217, 235, 52, .25), 0 9px 18px rgba(25, 68, 57, .28);
}

@media (max-width: 700px) {
  .hero-atlas { width: calc(100vw - 2rem) !important; max-width: calc(100vw - 2rem); margin-inline: 0 !important; }
  .hero-atlas__stage { min-height: 30rem; }
  .hero-atlas__stage.is-webgl-fallback .atlas-fallback { padding: 2.7rem 10% 1.25rem; }
  .hero-atlas__stage.is-webgl-fallback .atlas-city {
    min-width: 7.2rem;
    padding: .38rem .45rem .4rem .38rem;
    border-radius: .7rem;
  }
  .hero-atlas__stage.is-webgl-fallback .atlas-city strong { font-size: .59rem; }
  .hero-atlas__stage.is-webgl-fallback .atlas-city small { font-size: .38rem; }
  .hero-atlas__stage.is-webgl-fallback .atlas-landmark { width: 2rem; height: 2rem; }
}
/* Projected labels must never change size under a cursor: a size change feeds
   the collision observer and makes neighbouring markers chase one another. */
@media (hover: hover) and (pointer: fine) {
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:hover,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:focus-visible,
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark.is-selected {
    grid-template-columns: 1.72rem minmax(7.4rem, auto);
    grid-template-areas: "icon title" "icon meta";
    min-width: 10.15rem;
    min-height: 2.42rem;
    column-gap: .36rem;
    padding: .34rem .52rem .34rem .34rem;
    overflow: visible;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  }
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark :is(strong, small),
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:hover :is(strong, small),
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark:focus-visible :is(strong, small),
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark.is-selected :is(strong, small) {
    display: block;
    max-width: none;
    opacity: 1;
    overflow: visible;
    transform: none;
    transition: none;
  }
}

/* Stable atlas labels: every stop stays readable, with a fixed footprint.
   The map must never solve a collision by hiding the name of a real place. */
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:hover,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:focus-visible,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.is-selected,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:hover,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:focus-visible,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi.is-selected,
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker,
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker:hover,
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker:focus-visible,
.hero-atlas[data-landmarks-ready="true"] .atlas-route-marker.is-selected {
  display: grid !important;
  grid-template-columns: 2.15rem minmax(7.25rem, 12.4rem) !important;
  grid-template-areas: "icon title" "icon meta" !important;
  min-width: 10.15rem !important;
  width: auto !important;
  min-height: 2.72rem !important;
  height: auto !important;
  padding: .3rem .55rem .3rem .3rem !important;
  column-gap: .42rem !important;
  overflow: visible;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark :is(strong, small),
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:hover :is(strong, small),
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark:focus-visible :is(strong, small),
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.is-selected :is(strong, small) {
  display: block !important;
  max-width: 12.4rem !important;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark__icon {
  grid-area: icon;
  width: 2.15rem;
  height: 2.15rem;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark strong { grid-area: title !important; }
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark small { grid-area: meta !important; }

/* In a selected territory, one city card and the route stops are enough.
   Nearby cities and unselected POIs remain discoverable as icons, but never
   create a second layer of text over the diorama. A POI gets its full name
   again when it is selected, together with its editorial card. */
.hero-atlas:not([data-active-destination="overview"]) .atlas-city:not(.is-active):not(.is-scene-active) {
  grid-template-columns: .62rem !important;
  grid-template-areas: "pin" !important;
  min-width: .62rem !important;
  width: .62rem !important;
  min-height: .62rem !important;
  height: .62rem !important;
  padding: 0 !important;
  overflow: visible !important;
}
.hero-atlas:not([data-active-destination="overview"]) .atlas-city:not(.is-active):not(.is-scene-active) :is(span, strong, small) {
  display: none !important;
}
.hero-atlas:not([data-active-destination="overview"]) .atlas-city:not(.is-active):not(.is-scene-active) i {
  width: .62rem !important;
  height: .62rem !important;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:not(.is-selected),
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:not(.is-selected):hover,
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:not(.is-selected):focus-visible {
  grid-template-columns: 2.15rem !important;
  grid-template-areas: "icon" !important;
  min-width: 2.75rem !important;
  width: 2.75rem !important;
  min-height: 2.75rem !important;
  height: 2.75rem !important;
  padding: .3rem !important;
  column-gap: 0 !important;
}
.hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi:not(.is-selected) :is(strong, small) {
  display: none !important;
}

/* One fallback interaction contract.  Visibility is owned by the shared
   context state, never by a broad CSS rule that re-enables every landmark. */
.hero-atlas__stage.is-webgl-fallback [data-map-point][data-map-hidden] {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.hero-atlas__stage.is-webgl-fallback [data-map-point]:not([data-map-hidden]) {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.hero-atlas__stage.is-webgl-fallback .atlas-landmark,
.hero-atlas[data-landmarks-ready="true"] .hero-atlas__stage.is-webgl-fallback .atlas-landmark,
.hero-atlas[data-landmarks-ready="true"] .hero-atlas__stage.is-webgl-fallback .atlas-landmark:hover,
.hero-atlas[data-landmarks-ready="true"] .hero-atlas__stage.is-webgl-fallback .atlas-landmark:focus-visible,
.hero-atlas[data-landmarks-ready="true"] .hero-atlas__stage.is-webgl-fallback .atlas-landmark.is-selected {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas: "icon" !important;
  min-width: 1.85rem !important;
  width: 1.85rem !important;
  min-height: 1.85rem !important;
  height: 1.85rem !important;
  padding: .16rem !important;
  column-gap: 0 !important;
}
.hero-atlas__stage.is-webgl-fallback .atlas-landmark :is(strong, small),
.hero-atlas[data-landmarks-ready="true"] .hero-atlas__stage.is-webgl-fallback .atlas-landmark :is(strong, small) {
  display: none !important;
}
.hero-atlas__stage.is-webgl-fallback .atlas-landmark__icon svg {
  display: block;
  width: 1.24rem !important;
  height: 1.24rem !important;
  stroke: var(--lime) !important;
  stroke-width: 1.9 !important;
}
.hero-atlas__stage.is-webgl-fallback .atlas-landmark--water .atlas-landmark__icon svg { stroke: #a8e0e0 !important; }
.hero-atlas__stage.is-webgl-fallback .atlas-landmark--heritage .atlas-landmark__icon svg { stroke: #ffd29d !important; }
/* City names use the empty margin around their real point; the POIs themselves
   stay on the mainland and are compact enough to read as a local cluster. */
.hero-atlas__stage.is-webgl-fallback .atlas-landmark,
.hero-atlas[data-landmarks-ready="true"] .hero-atlas__stage.is-webgl-fallback .atlas-landmark {
  min-width: 1.55rem !important;
  width: 1.55rem !important;
  min-height: 1.55rem !important;
  height: 1.55rem !important;
}
.hero-atlas__stage.is-webgl-fallback .atlas-landmark__icon svg { width: 1rem !important; height: 1rem !important; }
@media (max-width: 700px) {
  .hero-atlas__stage { min-height: 36rem; }
  .hero-atlas__stage.is-webgl-fallback .atlas-landmark,
  .hero-atlas[data-landmarks-ready="true"] .hero-atlas__stage.is-webgl-fallback .atlas-landmark {
    /* The former 1.45rem rule produced roughly 21px targets: too small to
       tap reliably while scrolling. Keep the visual language compact while
       giving each mobile pin a comfortable touch target. */
    min-width: 3rem !important;
    width: 3rem !important;
    min-height: 3rem !important;
    height: 3rem !important;
    padding: .52rem !important;
  }
  .hero-atlas__stage.is-webgl-fallback .atlas-landmark__icon svg { width: 1.35rem !important; height: 1.35rem !important; }
  /* Amsterdam sits east of Haarlem. Its compact label uses the clear east
     lane, leaving the cluster of map pins visible underneath. */
  .hero-atlas__stage.is-webgl-fallback .atlas-city[data-map-city="amsterdam"] {
    min-width: 6.1rem !important;
  }
  .hero-atlas__stage.is-webgl-fallback .atlas-city[data-map-city="amsterdam"] small { display: none; }
}
/* Desktop uses one cartographic surface only: the Three.js atlas.  The
   illustrated Netherlands silhouette belongs exclusively to the mobile
   fallback; keeping both visible made two incompatible maps overlap. */
@media (min-width: 701px) {
  /* Never flash the illustrated fallback beneath WebGL on desktop. It is
     revealed only when the runtime explicitly enters fallback mode. */
  .hero-atlas__stage:not(.is-webgl-fallback) .atlas-fallback {
    opacity: 0;
    visibility: hidden;
  }
  .hero-atlas__stage.is-webgl-fallback .atlas-fallback {
    opacity: 1;
    visibility: visible;
  }
  .hero-atlas__stage.is-webgl-ready .atlas-fallback {
    opacity: 0;
    visibility: hidden;
  }
  .hero-atlas__stage.is-webgl-ready .atlas-webgl { mix-blend-mode: normal; }
  /* The destination card is the map's reading surface.  Stops stay as
     compact, stable icons; their full title and copy are revealed in the
     detail panel on click instead of being clipped at the canvas edge. */
  .hero-atlas__stage.is-webgl-ready .atlas-landmark,
  .hero-atlas__stage.is-webgl-ready .atlas-landmark:hover,
  .hero-atlas__stage.is-webgl-ready .atlas-landmark:focus-visible,
  .hero-atlas__stage.is-webgl-ready .atlas-landmark.is-selected {
    width: 2.55rem !important;
    min-width: 2.55rem !important;
    height: 2.55rem !important;
    padding: .2rem !important;
    grid-template-columns: 2.15rem !important;
    grid-template-areas: "icon" !important;
    column-gap: 0 !important;
  }
  .hero-atlas__stage.is-webgl-ready .atlas-landmark :is(strong, small),
  .hero-atlas__stage.is-webgl-ready .atlas-landmark:hover :is(strong, small),
  .hero-atlas__stage.is-webgl-ready .atlas-landmark:focus-visible :is(strong, small),
  .hero-atlas__stage.is-webgl-ready .atlas-landmark.is-selected :is(strong, small) {
    display: none !important;
  }
  /* Fallback state and selected POIs must obey the same compact grammar.
     This also removes legacy empty label pills behind a POI detail panel. */
  .hero-atlas .atlas-landmark,
  .hero-atlas .atlas-landmark:hover,
  .hero-atlas .atlas-landmark:focus-visible,
  .hero-atlas .atlas-landmark.is-selected {
    width: 2.55rem !important;
    min-width: 2.55rem !important;
    height: 2.55rem !important;
    padding: .2rem !important;
    grid-template-columns: 2.15rem !important;
    grid-template-areas: "icon" !important;
    column-gap: 0 !important;
  }
  .hero-atlas .atlas-landmark :is(strong, small),
  .hero-atlas .atlas-landmark:hover :is(strong, small),
  .hero-atlas .atlas-landmark:focus-visible :is(strong, small),
  .hero-atlas .atlas-landmark.is-selected :is(strong, small) {
    display: none !important;
  }
  /* This matches the older selected-POI selector's specificity exactly, so
     its wide two-column footprint cannot win back during a detail view. */
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi.is-selected,
  .hero-atlas[data-landmarks-ready="true"] .atlas-route-marker.is-selected {
    width: 2.55rem !important;
    min-width: 2.55rem !important;
    height: 2.55rem !important;
    padding: .2rem !important;
    grid-template-columns: 2.15rem !important;
    grid-template-areas: "icon" !important;
    column-gap: 0 !important;
  }
  .hero-atlas[data-landmarks-ready="true"] .atlas-landmark.atlas-poi.is-selected :is(strong, small),
  .hero-atlas[data-landmarks-ready="true"] .atlas-route-marker.is-selected :is(strong, small) {
    display: none !important;
  }
}
.atlas-story__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1rem;
  margin-top: .8rem;
}
.atlas-story__actions a,
.hero-atlas.is-story-open .atlas-story .atlas-story__actions a {
  margin-top: 0;
}
.atlas-story__credit {
  display: inline-block;
  margin-top: .5rem;
  color: rgba(16, 44, 48, .62);
  font: 500 .48rem/1.35 var(--mono);
  text-decoration: underline;
  text-underline-offset: .16em;
}
.atlas-story__credit[hidden] { display: none; }

/* Overview is the calm cartographic index. Detailed clay scenes belong to a
   territory view, not the national chooser. */
.hero-atlas[data-active-destination="overview"] .hero-atlas__stage {
  background:
    radial-gradient(ellipse at 50% 43%, rgba(255,255,255,.36), transparent 62%),
    linear-gradient(145deg, #e8f0e8 0%, #d7e5dc 52%, #eef1e8 100%);
}
.hero-atlas[data-active-destination="overview"] .atlas-city {
  min-width: 10.8rem;
  border: 1px solid rgba(19, 72, 63, .16);
  background: rgba(255, 252, 244, .92);
  color: #124b44;
  box-shadow: 0 10px 24px rgba(24, 68, 58, .14);
  backdrop-filter: blur(8px);
}
.hero-atlas[data-active-destination="overview"] .atlas-city strong { font-size: .72rem; }
.hero-atlas[data-active-destination="overview"] .atlas-city small { color: rgba(18, 75, 68, .68); }
.hero-atlas[data-active-destination="overview"] .atlas-webgl { filter: drop-shadow(0 24px 28px rgba(33, 73, 61, .16)); }
/* At national scale the illustrated map is the clearest geographic index.
   WebGL returns for every territory view, where the diorama is useful. */
.hero-atlas.is-atlas-overview-fallback .atlas-webgl {
  opacity: 0 !important;
  visibility: hidden !important;
}
.hero-atlas__stage [data-atlas-webgl],
.hero-atlas__stage .atlas-fallback {
  transition: opacity .26s ease;
}
.hero-atlas__stage.is-atlas-territory-transitioning .atlas-fallback {
  pointer-events: none;
}
.hero-atlas__stage.is-atlas-territory-transitioning .atlas-fallback,
.hero-atlas__stage.is-atlas-territory-transitioning .atlas-overlay {
  transform: scale(var(--overview-focus-scale, 1.3));
  transform-origin: var(--overview-focus-x, 50%) var(--overview-focus-y, 50%);
  transition: transform .82s cubic-bezier(.2,.78,.2,1), opacity .3s ease;
}
.hero-atlas__stage.is-atlas-territory-transitioning .atlas-city {
  transition: opacity .22s ease, transform .82s cubic-bezier(.2,.78,.2,1), box-shadow .22s ease;
}
.hero-atlas__stage.is-atlas-territory-transitioning .atlas-city:not(.is-transition-target) {
  opacity: .16 !important;
}
.hero-atlas__stage.is-atlas-territory-transitioning .atlas-city.is-transition-target {
  opacity: 1 !important;
  z-index: 20;
  box-shadow: 0 14px 32px rgba(18,64,59,.22);
}
.hero-atlas.is-atlas-overview-fallback .atlas-fallback {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none;
  padding: 0;
}
.hero-atlas.is-atlas-overview-fallback .hero-atlas__stage {
  background: #dcece8;
  box-shadow: inset 0 0 0 1px rgba(18, 75, 68, .08), inset 0 0 80px rgba(73, 111, 91, .10);
}
.hero-atlas.is-atlas-overview-fallback .atlas-fallback__regions {
  fill: rgba(226, 228, 215, .72);
  stroke: rgba(101, 119, 108, .42);
  stroke-width: 1.15;
}
.hero-atlas.is-atlas-overview-fallback .atlas-fallback__regions path {
  fill: rgba(226, 228, 215, .72) !important;
  stroke: rgba(101, 119, 108, .42) !important;
}
.hero-atlas.is-atlas-overview-fallback .atlas-fallback__regions text {
  fill: rgba(37, 65, 57, .58);
}
.hero-atlas.is-atlas-overview-fallback .atlas-fallback > *:not(.atlas-map-reference) {
  display: none !important;
}
.hero-atlas.is-atlas-overview-fallback .atlas-fallback > .atlas-map-reference {
  display: block !important;
}
.hero-atlas.is-atlas-overview-fallback .atlas-map-reference__neighbour {
  fill: #e7e5d8;
  stroke: rgba(78, 101, 91, .36);
  stroke-width: 1;
  stroke-linejoin: round;
}
.hero-atlas.is-atlas-overview-fallback .atlas-map-reference__france { fill: #ede9dc; }
.hero-atlas.is-atlas-overview-fallback .atlas-map-reference__belgium { fill: #c9d9bf; }
.hero-atlas.is-atlas-overview-fallback .atlas-map-reference__germany { fill: #d9dfd2; }
.hero-atlas.is-atlas-overview-fallback .atlas-map-reference__luxembourg { fill: #d0ddc2; }
.hero-atlas.is-atlas-overview-fallback .atlas-map-reference__belgium,
.hero-atlas.is-atlas-overview-fallback .atlas-map-reference__luxembourg {
  stroke: rgba(86, 105, 95, .34);
  stroke-width: 1;
}
.hero-atlas.is-atlas-overview-fallback .atlas-map-reference__netherlands {
  fill: #a5bf91;
  stroke: #285f52;
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.hero-atlas.is-atlas-overview-fallback .atlas-map-reference__germany,
.hero-atlas.is-desktop-atlas-2d[data-active-destination="overview"] .atlas-map-reference__germany {
  clip-path: url("#atlas-overview-map-clip");
}
  .hero-atlas.is-atlas-overview-fallback .atlas-map-reference__border {
  fill: none;
  stroke: rgba(53,90,78,.72);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-atlas.is-atlas-overview-fallback .atlas-map-reference__border-france,
.hero-atlas.is-atlas-overview-fallback .atlas-map-reference__border-luxembourg {
  stroke: rgba(78,101,91,.42);
  stroke-width: .8;
}
.hero-atlas.is-atlas-overview-fallback .atlas-map-reference__label {
  fill: rgba(42, 70, 61, .66);
  stroke: none;
  font: 600 6.5px ui-monospace, monospace;
  letter-spacing: .1em;
  text-anchor: middle;
}
.hero-atlas.is-atlas-overview-fallback .atlas-map-reference__label-calais,
.hero-atlas.is-desktop-atlas-2d .atlas-map-reference__label-calais {
  text-anchor: start;
  font-size: 5.8px;
  letter-spacing: .06em;
}
.hero-atlas.is-atlas-overview-fallback .atlas-geo-anchor[data-anchor-for="amsterdam"],
.hero-atlas.is-atlas-overview-fallback .atlas-geo-anchor[data-anchor-for="haarlem"],
.hero-atlas.is-atlas-overview-fallback .atlas-geo-anchor[data-anchor-for="rotterdam"],
.hero-atlas.is-atlas-overview-fallback .atlas-geo-anchor[data-anchor-for="zaanse"] {
  opacity: .95 !important;
  width: .62rem;
  height: .62rem;
  background: #f35d2f;
  border: 2px solid #fffaf0;
  box-shadow: 0 0 0 .22rem rgba(243, 93, 47, .14), 0 4px 10px rgba(25, 68, 57, .18);
}

/* Desktop atlas mode: one continuous 2D representation for overview and
   territory focus. WebGL is not part of this navigation path. The SVG is
   transformed as geography; HTML cards stay screen-sized and are reprojected
   from the same anchors by positionFallbackMarkers(). */
@media (min-width: 701px) {
  .hero-atlas.is-desktop-atlas-2d .hero-atlas__stage {
    background: #dcece8;
    box-shadow: inset 0 0 0 1px rgba(18,75,68,.08), inset 0 0 80px rgba(73,111,91,.10);
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-webgl {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  .hero-atlas.is-atlas-overview-fallback .atlas-map-reference__water {
    fill: #b9d9d2;
    stroke: rgba(40,95,82,.28);
    stroke-width: .8;
  }
  .hero-atlas.is-atlas-overview-fallback .atlas-map-reference__route,
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__route {
    fill: none;
    stroke: #f35d2f;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-dasharray: 3 3;
    opacity: 0;
    transition: opacity .35s ease;
  }
  .hero-atlas.is-atlas-overview-fallback[data-active-destination="amsterdam"] .atlas-map-reference__route--amsterdam,
  .hero-atlas.is-atlas-overview-fallback[data-active-destination="zaanse"] .atlas-map-reference__route--zaanse,
  .hero-atlas.is-atlas-overview-fallback[data-active-destination="haarlem"] .atlas-map-reference__route--haarlem,
  .hero-atlas.is-atlas-overview-fallback[data-active-destination="rotterdam"] .atlas-map-reference__route--rotterdam,
  .hero-atlas.is-desktop-atlas-2d[data-active-destination="amsterdam"] .atlas-map-reference__route--amsterdam,
  .hero-atlas.is-desktop-atlas-2d[data-active-destination="zaanse"] .atlas-map-reference__route--zaanse,
  .hero-atlas.is-desktop-atlas-2d[data-active-destination="haarlem"] .atlas-map-reference__route--haarlem,
  .hero-atlas.is-desktop-atlas-2d[data-active-destination="rotterdam"] .atlas-map-reference__route--rotterdam {
    opacity: .72;
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-fallback {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0;
    transform: translate(var(--desktop-map-pan-x, 0px), var(--desktop-map-pan-y, 0px)) scale(var(--desktop-map-scale, 1));
    transform-origin: 50% 50%;
    transition: transform .78s cubic-bezier(.22,.75,.25,1);
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-fallback > *:not(.atlas-map-reference) {
    display: none !important;
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-fallback > .atlas-map-reference {
    display: block !important;
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__neighbour {
    fill: #e7e5d8;
    stroke: rgba(78,101,91,.36);
    stroke-width: 1;
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__france { fill: #ede9dc; }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__belgium { fill: #c9d9bf; }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__germany { fill: #d9dfd2; }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__luxembourg { fill: #d0ddc2; }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__belgium,
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__luxembourg {
    stroke: rgba(86,105,95,.34);
    stroke-width: 1;
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__netherlands {
    fill: #a5bf91;
    stroke: #285f52;
    stroke-width: 2.5;
    stroke-linejoin: round;
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__border {
    fill: none;
    stroke: rgba(53,90,78,.72);
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__border-france,
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__border-luxembourg {
    stroke: rgba(78,101,91,.42);
    stroke-width: .8;
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__water {
    fill: #b9d9d2;
    stroke: rgba(40,95,82,.28);
    stroke-width: .8;
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__label {
    fill: rgba(42,70,61,.66);
    stroke: none;
    font: 600 6.5px ui-monospace, monospace;
    letter-spacing: .1em;
    text-anchor: middle;
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-overlay {
    pointer-events: auto;
  }
  .hero-atlas.is-desktop-atlas-2d[data-active-destination="overview"] .atlas-city {
    opacity: 1;
  }
  .hero-atlas.is-desktop-atlas-2d[data-active-destination]:not([data-active-destination="overview"]) .atlas-city:not(.is-active):not(.is-scene-active) {
    opacity: .18;
  }
  .hero-atlas.is-desktop-atlas-2d[data-atlas-state="focusing"] .atlas-city:not(.is-active):not(.is-scene-active) {
    opacity: .26;
  }
  /* Desktop editorial cards remain readable, but the map is the primary
     object. Keep labels compact enough to leave a clear central corridor. */
  .hero-atlas.is-desktop-atlas-2d .atlas-city:not([data-map-hidden]) {
    min-width: 9.5rem;
    max-width: 11.8rem;
    padding: .36rem .5rem .38rem .42rem;
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-city strong { font-size: .68rem; }
  .hero-atlas.is-desktop-atlas-2d .atlas-city small {
    max-width: 10.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .48rem;
  }
  .hero-atlas.is-desktop-atlas-2d:not([data-active-destination="overview"]) .atlas-city.is-active,
  .hero-atlas.is-desktop-atlas-2d:not([data-active-destination="overview"]) .atlas-city.is-scene-active {
    min-width: 10.7rem;
    max-width: 11.8rem;
    padding: .4rem .56rem .42rem .44rem;
  }
  .hero-atlas.is-desktop-atlas-2d:not([data-active-destination="overview"]) .atlas-city.is-active strong,
  .hero-atlas.is-desktop-atlas-2d:not([data-active-destination="overview"]) .atlas-city.is-scene-active strong { font-size: .72rem; }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__label-sea { x: 51px; y: 119px; }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__label-sea { display: none !important; }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__label-germany { x: 327px; y: 180px; }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__label-belgium { x: 247px; y: 267px; }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__label-france { x: 145px; y: 375px; }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__label-calais { x: 178px; y: 246px; }
  .hero-atlas.is-desktop-atlas-2d .atlas-map-reference__label-luxembourg { x: 246px; y: 348px; }
}

/* ============================================================
   CONSOLIDATION FINALE — header, bulles de ville et carte
   Ce bloc est volontairement placé en tout dernier : il prime
   sur toutes les retouches précédentes (Codex/Gemini) sans les
   supprimer, pour garantir un rendu stable et non tronqué.
   ============================================================ */

/* --- Header : plus d'overlap, hauteurs stables, z-index clair --- */
.site-header {
  z-index: 60 !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 1rem !important;
}
.site-header .logo { min-width: 0; flex: none; }
.site-header .logo img { display: block; height: clamp(2.1rem, 3.4vw, 2.6rem); width: auto; }
.site-header__nav { display: flex !important; align-items: center; gap: .2rem; min-width: 0; }
.site-header__nav a {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.site-header__actions { min-width: 0; flex: none; gap: .6rem !important; }
.header-cta { white-space: nowrap; }
@media (max-width: 820px) {
  .site-header { grid-template-columns: auto 1fr auto !important; }
  .site-header__nav, .site-header__actions { display: none !important; }
  .menu-toggle { display: grid !important; }
}
@media (min-width: 821px) {
  .menu-toggle { display: none !important; }
}

/* --- Bulles de ville sur la carte (atlas-city) : zéro troncature --- */
.atlas-city {
  width: max-content !important;
  min-width: 8.5rem;
  max-width: min(15.5rem, 42vw) !important;
  height: auto !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  box-sizing: border-box;
  z-index: 40;
}
.atlas-city strong {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.15 !important;
}
.atlas-city small,
.atlas-city span:not(:first-child) {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: break-word;
  max-width: 100% !important;
  line-height: 1.3 !important;
}
@media (max-width: 720px) {
  .atlas-city { max-width: min(13rem, 58vw) !important; }
}

/* --- Bulle de détail au clic (hero-atlas__caption) : lisible, non tronquée --- */
.hero-atlas__caption {
  width: min(26rem, 92%) !important;
  max-width: 92% !important;
  height: auto !important;
  max-height: 80% !important;
  overflow-y: auto !important;
  box-sizing: border-box;
  z-index: 55;
}
.hero-atlas__caption strong {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: break-word;
  line-height: 1.15 !important;
}
.hero-atlas__caption p {
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: break-word;
}
.hero-atlas__caption-actions a {
  white-space: normal !important;
  text-align: left;
}
.atlas-destination-close {
  z-index: 2;
}

/* --- Boutons zoom +/- de la carte 2D --- */
.atlas-fallback-zoom {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .5rem;
  padding: .15rem .3rem;
  border: 1px solid rgba(11,79,73,.18);
  border-radius: 999px;
  background: rgba(250,248,239,.9);
  color: #0b4f49;
  vertical-align: middle;
}
.atlas-fallback-zoom button {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: 700 1rem/1 var(--font-sans, sans-serif);
  cursor: pointer;
}
.atlas-fallback-zoom button:hover:not(:disabled),
.atlas-fallback-zoom button:focus-visible { background: #08756b; color: #fff; outline: none; }
.atlas-fallback-zoom button:disabled { opacity: .35; cursor: default; }
.atlas-fallback-zoom span {
  min-width: 2.6rem;
  text-align: center;
  font: 600 .62rem var(--mono, monospace);
  letter-spacing: .02em;
}

/* --- Carte : le tracé des Pays-Bas et voisins reste net et proportionné --- */
.hero-atlas__stage { overflow: visible !important; }
.atlas-fallback { overflow: visible; }
.atlas-map-reference__netherlands,
.hero-atlas.is-desktop-atlas-2d .atlas-map-reference__netherlands {
  vector-effect: non-scaling-stroke;
}
.atlas-map-reference__neighbour,
.hero-atlas.is-desktop-atlas-2d .atlas-map-reference__neighbour {
  vector-effect: non-scaling-stroke;
}
.atlas-map-reference__border,
.hero-atlas.is-desktop-atlas-2d .atlas-map-reference__border {
  vector-effect: non-scaling-stroke;
}

/* --- Repères de villes / lieux : jamais hors cadre de la carte --- */
.hero-atlas__stage { position: relative; }
.atlas-city[data-map-hidden],
.atlas-landmark[data-map-hidden] { display: none !important; }
.atlas-city,
.atlas-landmark {
  max-inline-size: min(15.5rem, 42vw);
}


/* Header atlas contract: SVG 2D only. The legacy WebGL implementation stays
   unreachable for compatibility with the source application, but it cannot
   create a canvas, occupy the atlas, or replace the geographic map. */
.hero-atlas [data-atlas-webgl],
.hero-atlas .atlas-webgl,
.hero-atlas .atlas-webgl canvas,
.hero-atlas canvas[data-atlas-canvas] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.hero-atlas .atlas-fallback {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
.hero-atlas .atlas-overlay {
  pointer-events: none !important;
  z-index: 5 !important;
}
.hero-atlas .atlas-overlay > .atlas-city,
.hero-atlas .atlas-overlay > .atlas-landmark {
  pointer-events: auto !important;
  position: absolute !important;
  z-index: 10 !important;
}

/* Mobile keeps the geography calm: compact numbered map pins show position,
   while the four named controls below provide generous, unambiguous targets. */
.atlas-mobile-cities { display: none; }
@media (max-width: 700px) {
  /* The map stage is 36rem tall at this breakpoint and the named city grid
     follows it. Reserve that space in the hero: without it the following
     section painted over the last two controls and swallowed their taps. */
  .hero-atlas {
    height: auto !important;
    min-height: 0 !important;
  }
  .hero-atlas__stage { overflow: hidden !important; }
  /* The named city controls immediately below the map are the mobile
     interaction surface.  Do not leave the projected desktop pins in the
     tab order when their renderer has no mobile coordinates: they otherwise
     sit off-canvas and create invisible focus stops. */
  .hero-atlas .atlas-overlay > .atlas-city {
    display: none !important;
  }
  .hero-atlas .atlas-overlay > .atlas-city {
    display: grid !important;
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    padding: 0 !important;
    place-items: center;
    grid-template-columns: 1fr;
    grid-template-areas: "number";
    border: 2px solid #fffdf8;
    border-radius: 50%;
    background: #0b6457;
    color: #fffdf8;
    box-shadow: 0 4px 13px rgba(15, 65, 57, .28);
  }
  .hero-atlas .atlas-overlay > .atlas-city i,
  .hero-atlas .atlas-overlay > .atlas-city strong,
  .hero-atlas .atlas-overlay > .atlas-city small { display: none !important; }
  .hero-atlas .atlas-overlay > .atlas-city span {
    display: block !important;
    grid-area: number;
    color: inherit !important;
    font: 700 .62rem/1 var(--mono);
  }
  .hero-atlas .atlas-overlay > .atlas-city.is-active,
  .hero-atlas .atlas-overlay > .atlas-city.is-scene-active {
    border-color: #0b6457;
    background: var(--orange);
    color: #fff;
  }
  .hero-atlas .atlas-overlay > .atlas-landmark {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
  .atlas-mobile-cities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    padding: .85rem 1rem 1rem;
    border-top: 1px solid rgba(11, 100, 87, .16);
  }
  .atlas-mobile-cities button {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    gap: .48rem;
    padding: .5rem .65rem;
    border: 1px solid rgba(11, 100, 87, .2);
    border-radius: .6rem;
    background: #fffdf8;
    color: #123f3a;
    font: 700 .72rem/1.1 var(--body);
    text-align: left;
    cursor: pointer;
  }
  .atlas-mobile-cities button span { color: var(--orange); font: 600 .55rem/1 var(--mono); }
  .atlas-mobile-cities button.is-active { border-color: #0b6457; background: #0b6457; color: #fff; }
  .atlas-mobile-cities button.is-active span { color: var(--lime); }
  .atlas-mobile-cities button:focus-visible,
  .hero-atlas .atlas-overlay > .atlas-city:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
  }
}

/* Final hero surface: the map is part of the editorial background, not a
   separate green panel. A single paper tone also prevents the geographic SVG
   from appearing stretched against a second rectangle. */
.hero,
.hero__inner,
.hero-atlas,
.hero-atlas__stage {
  background: #f7f2e8 !important;
}
.hero__video,
.hero__veil,
.hero-atlas::before,
.hero-atlas::after {
  display: none !important;
  background: none !important;
}
.hero-atlas .atlas-fallback {
  padding: 0 !important;
  filter: drop-shadow(0 18px 22px rgba(38, 67, 57, .12));
}

.hero-atlas.is-desktop-atlas-2d .hero-atlas__stage {
  background: transparent !important;
  box-shadow: none !important;
}
.hero-atlas.is-desktop-atlas-2d .atlas-map-reference__route {
  stroke: #dc673b;
  stroke-width: 1.7;
  stroke-dasharray: 2.4 2.4;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}
.hero-atlas.is-desktop-atlas-2d[data-active-destination="amsterdam"] .atlas-map-reference__route--amsterdam,
.hero-atlas.is-desktop-atlas-2d[data-active-destination^="zaanse"] .atlas-map-reference__route--zaanse,
.hero-atlas.is-desktop-atlas-2d[data-active-destination^="haarlem"] .atlas-map-reference__route--haarlem,
.hero-atlas.is-desktop-atlas-2d[data-active-destination^="rotterdam"] .atlas-map-reference__route--rotterdam {
  opacity: .95;
}

/* Local city outlines: derived from OSM/Nominatim administrative geometries.
   They appear only after a destination click and transform with the same
   geographic layer as the country map. */
.atlas-city-detail {
  display: none;
  pointer-events: none;
}
.atlas-city-detail__boundary {
  display: none;
  fill: none !important;
  stroke: rgba(18, 74, 65, .72);
  stroke-width: .72;
  stroke-dasharray: 1.4 1.5;
  vector-effect: non-scaling-stroke;
}
.atlas-city-detail__center {
  fill: #f35d2f;
  stroke: #fffaf0;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.atlas-city-detail[data-city-detail="amsterdam"] { transform: translate(74.4px, -61.4px); }
.atlas-city-detail[data-city-detail="haarlem"] { transform: translate(67.1px, -62px); }
.atlas-city-detail[data-city-detail="rotterdam"] { transform: translate(63.7px, -33px); }
.atlas-city-detail[data-city-detail="zaanse"] { transform: translate(72.5px, -67.9px); }
.atlas-city-detail[data-city-detail="waterland"] { transform: translate(78.1px, -66px); }
.atlas-city-detail[data-city-detail="kinderdijk"] { transform: translate(68.6px, -30.4px); }
.hero-atlas.is-desktop-atlas-2d[data-active-destination="amsterdam"] [data-city-detail="amsterdam"],
.hero-atlas.is-desktop-atlas-2d[data-active-destination="waterland"] [data-city-detail="waterland"],
.hero-atlas.is-desktop-atlas-2d[data-active-destination^="zaanse"] [data-city-detail="zaanse"],
.hero-atlas.is-desktop-atlas-2d[data-active-destination^="haarlem"] [data-city-detail="haarlem"],
.hero-atlas.is-desktop-atlas-2d[data-active-destination^="rotterdam"] [data-city-detail="rotterdam"],
.hero-atlas.is-desktop-atlas-2d[data-active-destination="kinderdijk"] [data-city-detail="kinderdijk"] {
  display: block !important;
}

/* The old atlas cleanup hid every direct SVG child except the country layer.
   City outlines are intentional geographic layers and must survive that
   cleanup when a destination is selected. */
.hero-atlas.is-desktop-atlas-2d .atlas-fallback > .atlas-city-detail {
  pointer-events: none;
}

/* Compact local urban frame, aligned to the real city anchor. */
.atlas-urban-detail {
  display: none;
  pointer-events: none;
}
.atlas-urban-detail__boundary {
  fill: rgba(255, 253, 248, .08);
  stroke: rgba(18, 74, 65, .9);
  stroke-width: .75;
  stroke-dasharray: 1.2 1.2;
  vector-effect: non-scaling-stroke;
}
.atlas-urban-detail__street {
  fill: none;
  stroke: rgba(255, 253, 248, .8);
  stroke-width: .55;
  vector-effect: non-scaling-stroke;
}
.atlas-urban-detail__center {
  fill: #f35d2f;
  stroke: #fffaf0;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.hero-atlas.is-desktop-atlas-2d .atlas-fallback > .atlas-urban-detail {
  display: none !important;
}
.hero-atlas.is-desktop-atlas-2d[data-active-destination="amsterdam"] .atlas-urban-detail[data-urban-detail="amsterdam"],
.hero-atlas.is-desktop-atlas-2d[data-active-destination="waterland"] .atlas-urban-detail[data-urban-detail="amsterdam"],
.hero-atlas.is-desktop-atlas-2d[data-active-destination^="haarlem"] .atlas-urban-detail[data-urban-detail="haarlem"],
.hero-atlas.is-desktop-atlas-2d[data-active-destination^="rotterdam"] .atlas-urban-detail[data-urban-detail="rotterdam"],
.hero-atlas.is-desktop-atlas-2d[data-active-destination^="zaanse"] .atlas-urban-detail[data-urban-detail="zaanse"],
.hero-atlas.is-desktop-atlas-2d[data-active-destination="industrial-mill"] .atlas-urban-detail[data-urban-detail="zaanse"],
.hero-atlas.is-desktop-atlas-2d[data-active-destination="kinderdijk"] .atlas-urban-detail[data-urban-detail="rotterdam"] {
  display: block !important;
}
.atlas-city-detail { display: none !important; }

/* Editorial image inside every selected city/place card. The image is a
   small visual anchor, never a second content panel. */
.hero-atlas__caption {
  grid-template-columns: 4.6rem minmax(0, 1fr) minmax(7rem, 9rem) !important;
  align-items: center;
  gap: .8rem;
}
.hero-atlas__caption-image {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 4.6rem;
  height: 4.6rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(13, 91, 77, .16);
  border-radius: .55rem;
  background: #d9e1d5;
}
.hero-atlas__caption-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-atlas__caption-loader { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: rgba(255, 253, 248, .88); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.hero-atlas__caption-loader::before { width: 1.35rem; height: 1.35rem; border: 2px solid rgba(13, 79, 69, .18); border-top-color: var(--orange); border-radius: 50%; content: ""; animation: atlas-image-spin 700ms linear infinite; }
.hero-atlas__caption.is-image-loading .hero-atlas__caption-loader { opacity: 1; }
.hero-atlas__caption > span { grid-column: 2; }
.hero-atlas__caption > div:not(.hero-atlas__caption-actions) { grid-column: 2; }
.hero-atlas__caption-actions { grid-column: 3; grid-row: 1 / span 3; }
.hero-atlas__caption-actions a { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .hero-atlas__caption {
    grid-template-columns: 3.8rem minmax(0, 1fr) !important;
    gap: .65rem;
  }
  .hero-atlas__caption-image {
    width: 3.8rem;
    height: 3.8rem;
  }
  .hero-atlas__caption-actions {
    grid-column: 2;
    grid-row: auto;
  }
}

@media (min-width: 701px) {
  .hero-atlas__caption {
    display: grid !important;
    align-items: center;
    left: auto !important;
    right: 1rem !important;
    width: min(48rem, calc(100% - 2rem)) !important;
    max-width: calc(100% - 2rem) !important;
    grid-template-columns: 5rem minmax(18rem, 1fr) 10rem !important;
  }
  .hero-atlas__caption-image { display: block !important; grid-column: 1; grid-row: 1 / span 3; width: 4.6rem; }
  .hero-atlas__caption > span { grid-column: 2; grid-row: 1; min-width: 0; }
  .hero-atlas__caption > div:not(.hero-atlas__caption-actions) { grid-column: 2; grid-row: 2; min-width: 18rem !important; width: auto !important; }
  .hero-atlas__caption > div:not(.hero-atlas__caption-actions) strong,
  .hero-atlas__caption > div:not(.hero-atlas__caption-actions) p { width: auto !important; min-width: 0; }
  .hero-atlas__caption-actions { grid-column: 3; grid-row: 1 / span 3; min-width: 0; width: auto !important; }
}

/* A place story carries its own small photographic cue, just like the city
   caption. The icon remains visible beside the image and the copy keeps a
   readable measure. */
.atlas-story {
  grid-template-columns: 4.4rem auto minmax(0, 1fr) !important;
  align-items: start;
}
.atlas-story__image {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 4.4rem;
  height: 4.4rem;
  margin: 0;
  overflow: hidden;
  border-radius: .55rem;
  background: #d9e1d5;
}
.atlas-story__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.atlas-story__loader { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: rgba(255, 253, 248, .88); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.atlas-story__loader::before { width: 1.35rem; height: 1.35rem; border: 2px solid rgba(13, 79, 69, .18); border-top-color: var(--orange); border-radius: 50%; content: ""; animation: atlas-image-spin 700ms linear infinite; }
.atlas-story.is-image-loading .atlas-story__loader { opacity: 1; }
@keyframes atlas-image-spin { to { transform: rotate(1turn); } }
.atlas-story > span { grid-column: 2; grid-row: 1; }
.atlas-story > div { grid-column: 3; grid-row: 1 / span 2; min-width: 0; }
@media (max-width: 700px) {
  .atlas-story { grid-template-columns: 3.6rem auto minmax(0, 1fr) !important; }
  .atlas-story__image { width: 3.6rem; height: 3.6rem; }
}

/* A place sheet stays inside the mobile atlas, below the fixed header. */
@media (max-width: 700px) {
  .hero-atlas .atlas-story {
    top: auto !important;
    right: .75rem !important;
    bottom: .75rem !important;
    left: .75rem !important;
    width: auto !important;
    max-height: calc(100% - 1.5rem);
    overflow-y: auto;
  }
}

/* Desktop territory focus: the destination is already named by the caption.
   Keep its map marker as a compact, non-interactive location pin, so it
   cannot sit over the nearby places or steal their clicks. The landmarks are
   the next intended action and therefore always paint above the city pin. */
@media (min-width: 701px) {
  .hero-atlas.is-desktop-atlas-2d:not([data-active-destination="overview"]) .atlas-city.is-active,
  .hero-atlas.is-desktop-atlas-2d:not([data-active-destination="overview"]) .atlas-city.is-scene-active {
    display: grid !important;
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    height: 2.75rem !important;
    padding: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "number" !important;
    place-items: center;
    border: 2px solid #fffdf8;
    border-radius: 50%;
    background: var(--orange);
    color: #fffdf8;
    box-shadow: 0 5px 15px rgba(168, 63, 25, .27);
    pointer-events: none !important;
  }
  .hero-atlas.is-desktop-atlas-2d:not([data-active-destination="overview"]) .atlas-city.is-active :is(i, strong, small),
  .hero-atlas.is-desktop-atlas-2d:not([data-active-destination="overview"]) .atlas-city.is-scene-active :is(i, strong, small) {
    display: none !important;
  }
  .hero-atlas.is-desktop-atlas-2d:not([data-active-destination="overview"]) .atlas-city.is-active span,
  .hero-atlas.is-desktop-atlas-2d:not([data-active-destination="overview"]) .atlas-city.is-scene-active span {
    display: block !important;
    grid-area: number;
    color: inherit !important;
    font: 700 .62rem/1 var(--mono);
  }
  .hero-atlas.is-desktop-atlas-2d .atlas-overlay > .atlas-landmark {
    z-index: 12 !important;
  }
}

/* Collision-hidden markers must remain inert. A previous broad fallback rule
   restored their opacity and hit area, producing visible but unclickable
   bubbles underneath a city label. */
.hero-atlas__stage.is-webgl-fallback [data-map-point][data-collision-hidden] {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Map interaction hierarchy: the national view is a choice of starting
   points. Once a territory is chosen, only its relevant stops invite the
   next click. This keeps the map readable before it becomes exploratory. */
.hero-atlas[data-atlas-state="overview"] .atlas-overlay > :is(.atlas-landmark, .atlas-poi) {
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-atlas[data-atlas-state="overview"] .atlas-overlay > .atlas-city {
  min-height: 3rem;
  border-color: rgba(255, 253, 248, .66);
  box-shadow: 0 10px 24px rgba(5, 42, 39, .2);
}

.hero-atlas:is([data-atlas-state="selected"], [data-atlas-state="territory"]) .atlas-overlay > :is(.atlas-landmark, .atlas-poi):not(.is-associated):not(.is-selected) {
  opacity: .16 !important;
  pointer-events: none !important;
}

.hero-atlas:is([data-atlas-state="selected"], [data-atlas-state="territory"]) .atlas-overlay > :is(.atlas-landmark, .atlas-poi).is-associated,
.hero-atlas:is([data-atlas-state="selected"], [data-atlas-state="territory"]) .atlas-overlay > :is(.atlas-landmark, .atlas-poi).is-selected {
  box-shadow: 0 0 0 .18rem rgba(226, 238, 88, .14), 0 12px 26px rgba(5, 42, 39, .22);
}

.hero-atlas .atlas-overlay > :is(.atlas-city, .atlas-landmark, .atlas-poi):focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}

/* On a wide screen, the origin cards also name the kind of journey they
   unlock. This removes the need to guess what a city pin will do. */
@media (min-width: 701px) {
  .hero-atlas[data-atlas-state="overview"] .atlas-overlay > .atlas-city {
    grid-template-columns: .62rem auto;
    grid-template-areas: "pin number" "pin label" "pin meta";
    min-width: 9.8rem;
    padding: .48rem .68rem .5rem .46rem;
  }
  .hero-atlas[data-atlas-state="overview"] .atlas-overlay > .atlas-city small {
    display: block;
    grid-area: meta;
    margin-top: .08rem;
    color: rgba(255, 253, 248, .64);
    font: 500 .43rem/1.2 var(--mono);
  }
}

/* The selected territory is named in the caption; the orange numbered badge
   was an obsolete duplicate once its local POIs became visible. */
.hero-atlas[data-atlas-state="territory"] .atlas-overlay > .atlas-city.is-active,
.hero-atlas[data-atlas-state="territory"] .atlas-overlay > .atlas-city.is-scene-active {
  display: none !important;
}

/* On desktop, a place story deserves a proper photographic window: it helps
   distinguish a mill, a cheese farm or a pumping station at a glance while
   leaving the copy and two route actions in one compact panel. */
@media (min-width: 701px) {
  .hero-atlas .atlas-story {
    grid-template-columns: clamp(8.5rem, 13vw, 11rem) 2.15rem minmax(0, 1fr) !important;
    width: min(38rem, calc(100% - 4rem));
    max-width: min(38rem, calc(100% - 4rem)) !important;
    gap: 1rem;
    padding: 1rem;
  }
  .hero-atlas .atlas-story__image {
    width: clamp(8.5rem, 13vw, 11rem);
    height: clamp(8.5rem, 13vw, 11rem);
    border-radius: .7rem;
  }
}

/* The territory map is a desktop exploration tool. On a phone it leaves too
   little room for reliable markers, so the mobile hero stays focused on the
   invitation and the destination section remains the clear next step. */
@media (max-width: 700px) {
  .hero-atlas[data-hero-map] {
    display: none !important;
  }
}