/* ─────────────────────────────────────────────────────────
   Blue Terra — stylesheet
   Colours and type are taken from the live design.
   Change them here and the whole page follows.
   ───────────────────────────────────────────────────────── */

:root {
  /* Brand — the three colours of the Blue Terra Expeditions logo:
     the deep blue of the wordmark, the terracotta of the inner arc and
     the grey of the subline. Everything else is mixed from those. */
  --navy:        #143e5c;   /* buttons, links, the dark cards */
  --navy-dark:   #0f3048;   /* hover, and the darker end of gradients */
  --navy-deep:   #0a2234;   /* the full-bleed dark bands and the footer */
  --sand:        #edbd94;   /* the light accent on dark: the italic headline */
  --sky-bg:      #e9eff5;   /* pale blue panels: newsletter, pills */
  --stone-bg:    #eef1f4;   /* the neutral hover grey */
  --terra:       #cc7939;   /* the call to action */
  --terra-dark:  #a8622c;

  /* Neutrals */
  --text:        #4a5159;
  --heading:     #17293a;
  --muted:       #5a6a70;   /* the grey of the logo subline */
  --cream:       #faf9f5;
  --surface:     #ffffff;
  --line:        #e7e5df;

  --radius:      20px;
  --radius-sm:   14px;
  --shadow:      0 1px 2px rgba(20, 62, 92, .04), 0 8px 24px rgba(20, 62, 92, .07);
  --shadow-lg:   0 2px 6px rgba(20, 62, 92, .06), 0 22px 50px rgba(20, 62, 92, .14);
  --wrap:        1400px;   /* header, hero and press band */
  --wrap-content:1180px;   /* every content section */
  --header-h:    76px;

  /* Jost is the typeface the logo is drawn in, EB Garamond carries the
     headings. Both come from Google Fonts — see the <link> in each page. */
  --sans:    Jost, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "EB Garamond", Georgia, "Times New Roman", serif;
  --hero:    "EB Garamond", Georgia, "Times New Roman", serif;
  --mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Headings are set semi-bold throughout — EB Garamond carries enough
   colour at 600, and bold makes it look heavy-handed. */
/* Jost sits lower than Poppins, so the whole page goes up three per cent
   to read at the same size as before. */
html { font-size: 103%; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--text);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; color: var(--heading); }
p { margin: 0 0 1rem; }
a { color: inherit; }
img, svg { max-width: 100%; }
/* A <picture> only exists to hold the phone-sized copy of a photo next to
   the full-size one. `display: contents` takes its own box out of the
   layout, so every rule written for the <img> inside keeps working exactly
   as it did before the wrapper was there.

   That also lifts the <source> next to the <img> into the layout, where it
   would take up a slot of its own — a column in a grid, an item in a flex
   row. It carries no picture, only the name of one, so it is hidden. */
picture { display: contents; }
picture > source { display: none; }
ul { list-style: none; margin: 0; padding: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
/* Content sits in a narrower column than the header and hero. */
.section > .wrap, .newsletter > .wrap, .contact-wrap > .wrap { max-width: var(--wrap-content); }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.center { text-align: center; }
.center-row { display: flex; justify-content: center; }
/* A button in here carries its own display, which would otherwise beat
   the browser's own rule for a hidden element and leave it on screen. */
.center-row > [hidden] { display: none; }

/* Serif section headings */
.display { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.display.light { color: #fff; }

/* A single German word can be wider than a 320 px phone
   ("Datenschutzbestimmungen"). Without this the heading spills out and the
   whole page scrolls sideways. */
h1, h2, h3, h4 { overflow-wrap: break-word; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--navy); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; border-radius: 6px; }

/* ══ Buttons ═════════════════════════════════════════════ */
/* Softly rounded rectangles rather than full pills — the shape used
   throughout the live design, and already used in the contact panel. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none;
  padding: .78rem 1.6rem; border: 2px solid transparent; border-radius: 16px;
  white-space: nowrap; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn .ico { width: 18px; height: 18px; flex: none; }

.btn-orange { background: var(--terra); color: #fff; }
.btn-orange:hover { background: var(--terra-dark); }

.btn-dark { background: var(--navy-dark); color: #fff; }
.btn-dark:hover { background: var(--navy); }

.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: #eef3f8; }

.btn-ghost-white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.btn-ghost-white:hover { background: rgba(255, 255, 255, .14); }

.btn-ghost-dark { background: transparent; color: var(--navy-dark); border-color: rgba(20, 62, 92, .35); }
.btn-ghost-dark:hover { background: rgba(20, 62, 92, .07); }

.btn-lg { padding: 1rem 2.1rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

.round-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid #d8d5cc; color: var(--heading);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
/* The chevron is drawn, not typed: a text arrow sits a little off centre
   in most faces, and the circle makes that obvious. */
.round-btn-icon { width: 20px; height: 20px; display: block; }
.impact-prev .round-btn-icon, .impact-next .round-btn-icon { width: 22px; height: 22px; }
.round-btn:hover { background: var(--stone-bg); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 500;
  text-decoration: none; color: var(--heading);
}
.link-arrow svg { width: 20px; height: 20px; }
.link-arrow:hover { color: var(--navy); }

/* ══ Header ══════════════════════════════════════════════ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .25s ease, box-shadow .25s ease;
}
.header-inner { display: flex; align-items: center; gap: 1.25rem; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
/* Height drives the size; width follows the logo's own 3.8:1 proportions.
   The lockup carries "EXPEDITIONS" under the name in very small type, so
   it needs noticeably more height than a plain wordmark to stay readable. */
.brand-logo { display: block; height: 44px; width: auto; }
.brand .on-light { display: none; }
@media (max-width: 480px) { .brand-logo { height: 34px; } }

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav-rule { width: 3px; height: 22px; background: currentColor; border-radius: 2px; color: #fff; opacity: .9; }
.nav a, .nav-btn { text-decoration: none; font-weight: 500; font-size: 1rem; color: #fff; }
.nav a:hover, .nav-btn:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-btn { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }

/* ── The two panels the header entries open ───────────────
   Sizes and colours follow socialbnb.org: a white sheet under the
   header, countries in columns by continent with a round photo each,
   travel types as picture tiles. Both are hidden on a phone, where the
   burger menu takes over — the live site does the same. */
.nav-panel {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% - 6px);
  z-index: 90; width: min(1180px, calc(100vw - 32px)); max-height: 80vh; overflow-y: auto;
  background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(10, 34, 52, .22);
  padding: 1.25rem 1.5rem; display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.nav-panel[hidden] { display: none; }
.nav-col { flex: 1 1 190px; min-width: 170px; }
.nav-col h3 {
  font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem;
}
.nav-col a {
  display: flex; align-items: center; gap: .6rem; padding: .3rem .35rem;
  border-radius: 10px; text-decoration: none; color: var(--heading); font-size: .875rem;
}
.nav-col a:hover { background: var(--stone-bg); text-decoration: none; }
.nav-col img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }

/* The travel types sit in a narrow panel under their own entry, two
   tiles across, rather than spanning the header like the countries do. */
.nav-panel-types {
  gap: 1rem; width: min(474px, calc(100vw - 32px));
  left: auto; right: clamp(16px, 6vw, 7rem); transform: none;
}
.nav-panel-types .nav-type { flex: 1 1 190px; max-width: 205px; }
.nav-type {
  flex: 0 1 202px; text-decoration: none; color: var(--heading);
  font-size: .875rem; font-weight: 500; text-align: center;
}
.nav-type img { width: 100%; height: 114px; object-fit: cover; border-radius: 12px; display: block; }
.nav-type span { display: block; margin-top: .5rem; }
.nav-type:hover span { color: var(--navy); }

@media (max-width: 900px) { .nav-panel { display: none !important; } }

/* Long line on a wide screen, short one on a phone — as on the live site. */
.on-narrow { display: none; }
@media (max-width: 700px) {
  .on-wide { display: none; }
  .on-narrow { display: block; }
}

.header-actions { display: flex; align-items: center; gap: .75rem; }

/* EN | DE as one small pill, the language you are in filled in. */
.lang { display: inline-flex; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; overflow: hidden; }
.lang-btn {
  font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  padding: .34rem .72rem; border: 0; background: transparent; color: #fff; cursor: pointer;
}
.lang-btn[aria-pressed="true"] { background: #fff; color: var(--navy-dark); }

.burger-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: transparent; border: 0; cursor: pointer; color: #fff;
}
.burger, .burger::before, .burger::after {
  display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -7px; }
.burger::after { top: 7px; }

/* Solid state, from the first scroll onwards */
.site-header.is-solid { background: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }
.site-header.is-solid .brand .on-dark { display: none; }
.site-header.is-solid .brand .on-light { display: block; }
.site-header.is-solid .nav a,
.site-header.is-solid .nav-btn,
.site-header.is-solid .burger-btn { color: var(--heading); }
.site-header.is-solid .nav-rule { color: var(--navy-dark); }
.site-header.is-solid .lang { border-color: var(--line); }
.site-header.is-solid .lang-btn { color: var(--muted); }
.site-header.is-solid .lang-btn[aria-pressed="true"] { background: var(--navy); color: #fff; }

.mobile-nav { background: #fff; border-top: 1px solid var(--line); box-shadow: var(--shadow); }
.mobile-nav .wrap { display: flex; flex-direction: column; padding-block: .25rem .75rem; }
.mobile-nav a { text-decoration: none; padding: .8rem 0; font-weight: 500; color: var(--heading); border-bottom: 1px solid var(--line); }
.mobile-nav a:last-child { border-bottom: 0; }

/* "Reiseziele" and "Reisearten" fold open inside the burger menu, the
   same lists the header entries show — a phone has no room for a sheet
   beside them. */
.mnav-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; padding: .8rem 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; font: inherit; font-weight: 500; color: var(--heading);
  text-align: left; cursor: pointer;
}
.mnav-toggle svg { width: 18px; height: 18px; flex: none; transition: transform .18s ease; }
.mnav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.mnav-panel { max-height: 55vh; overflow-y: auto; padding: .35rem 0 .6rem; }
.mnav-panel[hidden] { display: none; }
.mnav-panel a {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .25rem; border-bottom: 0; font-size: .9375rem; font-weight: 400;
}

/* Reiseziele holds forty-four countries — more than any phone shows in
   one go. So each continent is a row that folds open on its own, and the
   panel around them is what scrolls: one scrollbar, not one inside
   another. */
.mnav-group-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; padding: .55rem .25rem; border: 0; background: none;
  font: inherit; font-size: .9375rem; font-weight: 500; color: var(--heading);
  text-align: left; cursor: pointer;
}
.mnav-group-btn svg { width: 16px; height: 16px; flex: none; transition: transform .18s ease; }
.mnav-group-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mnav-group-panel[hidden] { display: none; }
.mnav-group-panel { padding-left: .25rem; margin-bottom: .3rem; }
.mnav-group-panel img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }

.mnav-panel .nav-type { flex-direction: row; }
.mnav-panel .nav-type img { width: 56px; height: 34px; border-radius: 7px; object-fit: cover; flex: none; }
.mnav-panel .nav-type span { margin: 0; }

/* Between 700 px and the point where the header gets its own menu, the
   burger sheet still runs the full width — so the lists sit side by side
   there rather than in one very long column. */
@media (min-width: 700px) and (max-width: 767px) {
  .mnav-panel { display: flex; flex-wrap: wrap; gap: 0 1.5rem; max-height: 62vh; }
  .mnav-group { flex: 1 1 190px; min-width: 170px; align-self: flex-start; }
  .mnav-panel .nav-type { flex: 0 1 260px; }
}

/* From 768 px up the header shows "Reiseziele" and "Reisearten" itself,
   and a white sheet across the whole window beside them reads as a
   mistake. So there the menu becomes a panel hanging under the burger,
   starting at the short line to the left of "Reiseziele". Where that
   line sits moves with the logo and with the language, so site-chrome.js
   measures it and writes the two numbers below. */
@media (min-width: 768px) {
  .mobile-nav {
    position: absolute; top: calc(100% - 6px);
    left: var(--mnav-left, 0); right: var(--mnav-right, 0);
    border-top: 0; border-radius: 16px;
    box-shadow: 0 18px 50px rgba(10, 34, 52, .22);
  }
  /* Named through the header so the About page's own wider .wrap rule
     cannot stretch the panel past its card. */
  .site-header .mobile-nav .wrap { width: auto; max-width: none; padding-inline: 1.25rem; }
  /* Shorter than on a phone: the panel floats, so it has to end well
     above the bottom of the window. */
  .mnav-panel { max-height: 50vh; }
}

@media (max-width: 767px) { .nav { display: none; } }

/* ══ Hero ════════════════════════════════════════════════ */
/* Deliberately short of a full screen: the top of the next section has to
   stay visible, otherwise the hero reads as the whole page and nobody
   scrolls. It is a floor, so a long headline still pushes it taller. */
.hero { position: relative; min-height: min(78vh, 680px); display: flex; align-items: center; isolation: isolate; }

/* Hero photograph, with a navy gradient underneath so the section still
   reads correctly while the image loads (or if it is ever removed). */
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("assets/hero.webp");
  background-size: cover;
  background-position: center;
  background-color: var(--navy-deep);
}
/* On a phone the small copy is loaded instead — 68 KB rather than 276 KB,
   and it is the first thing anyone sees, so this is the single biggest
   saving on the whole page. Same breakpoint as SITE.photo() uses. */
@media (max-width: 600px) {
  .hero-bg { background-image: url("assets/small/hero.webp"); }
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  /* Two layers, as on the reference build: one sweeping in from the left
     behind the headline, one darkening the bottom edge. */
  background:
    linear-gradient(80deg, rgba(10, 34, 52, .82), rgba(10, 34, 52, .5) 34%, rgba(10, 34, 52, .05) 60%, transparent),
    linear-gradient(0deg, rgba(10, 34, 52, .85), rgba(10, 34, 52, .15) 38%, transparent 62%);
}

.hero-inner { padding-block: calc(var(--header-h) + 3rem) 5rem; }
@media (max-width: 600px) { .hero-inner { padding-block: 146px 44px; } }
@media (max-width: 360px) { .hero-inner { padding-block: 108px 44px; } }
.hero-title {
  font-family: var(--hero); font-weight: 600; color: #fff;
  font-size: clamp(54px, 4.7vw, 82px); letter-spacing: -1px; line-height: 1.03; margin-bottom: .35em;
}
/* Below the desktop breakpoint the reference swaps the hero face from the
   light display serif to a heavy Playfair. */
@media (max-width: 1023px) {
  .hero-title { font-family: var(--display); font-size: clamp(42px, 8.2vw, 76px); }
}
@media (max-width: 600px) {
  .hero-title { font-size: 48px; letter-spacing: -.8px; line-height: 1.02; }
}
.hero-title em { font-style: italic; color: var(--sand); }
.hero-title .hero-dot { color: #fff; }

/* The text breaks where content.js puts a \n. */
.hero-sub {
  max-width: 48ch; color: rgba(255, 255, 255, .93); white-space: pre-line;
  font-size: clamp(17px, 2.1vw, 21px); line-height: 1.5; margin-bottom: 2rem;
}

/* Award badge, bottom right of the hero */
.hero-award {
  position: absolute; right: max(24px, calc((100vw - var(--wrap)) / 2 + 24px)); bottom: 20px;
  width: 84px; display: block; border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}
/* The badge stays on screen on phones, pinned under the header rather than
   hidden, as on the reference. */
@media (max-width: 1023px) { .hero-award { top: 94px; bottom: auto; right: 16px; width: 106px; } }
@media (max-width: 600px)  { .hero-award { top: 70px; right: 12px; width: 80px; } }
@media (max-width: 360px)  { .hero-award { top: 68px; right: 12px; width: 70px; } }
.hero-award img { display: block; width: 100%; height: auto; border-radius: inherit; }



/* ══ Press strip ═════════════════════════════════════════ */
.press-strip { background: #fff; border-bottom: 1px solid var(--line); }
.press-inner {
  display: flex; align-items: center; gap: 1rem 2.5rem; flex-wrap: wrap;
  padding-block: 1.4rem;
}
.press-label {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.press { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.6rem; flex: 1; justify-content: space-around; }
.press li { font-size: 1rem; font-weight: 500; color: #6d6d6d; letter-spacing: .02em; font-variant: small-caps; }
/* The logo files are white-on-transparent (made for a dark backdrop).
   invert() flips them to dark for this white strip while keeping each
   wordmark's internal shading — brightness(0) would flatten them to
   solid blobs. If you swap in dark logo files, drop the invert. */
.press li img {
  display: block; height: 30px; width: auto; object-fit: contain;
  filter: invert(1) grayscale(1); opacity: .62; transition: opacity .16s ease;
}
/* Every wordmark carries a different amount of air inside its file, so one
   height for all of them makes some look tiny: National Geographic writes
   its name in small letters beside the yellow frame, The Guardian sets it
   in two lines. These heights bring them all to the same reading size. */
.press .press-natgeo img   { height: 50px; }
.press .press-guardian img { height: 38px; }
.press .press-zdf img      { height: 36px; }
.press .press-geo img      { height: 32px; }
.press .press-galileo img  { height: 30px; }
.press li:hover img { opacity: .9; }
.press-rating {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding-left: 2rem; border-left: 1px solid var(--line); font-size: .9rem;
}
.stars { color: var(--navy); letter-spacing: .16em; font-size: .9rem; }
.star-solid { color: var(--navy); }

.press-rating .short { display: none; }

/* On a phone the strip stays a single line: the last two outlets drop away,
   leaving GEO, National Geographic and ZDF, and the rating shortens to the
   traveller count with the stars beneath it. Everything shrinks to fit
   rather than wrapping to a second row. */
@media (max-width: 767px) {
  .press-inner { flex-wrap: nowrap; gap: .9rem; padding-block: .9rem; }
  .press-label { flex: none; font-size: .62rem; letter-spacing: .12em; }
  .press { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: .9rem; justify-content: space-between; }
  .press li { min-width: 0; }
  .press li:nth-child(n + 4) { display: none; }   /* Galileo, The Guardian */
  .press li img { height: 20px; }
  .press .press-natgeo img { height: 30px; }
  .press .press-guardian img { height: 25px; }
  .press .press-zdf img { height: 24px; }
  .press-rating {
    flex: none; border-left: 0; padding-left: 0; align-items: center;
    font-size: .68rem; line-height: 1.25; text-align: center; white-space: nowrap;
  }
  .press-rating .full { display: none; }
  .press-rating .short { display: block; }
  .stars { font-size: .72rem; letter-spacing: .1em; }
}

/* The label shrinks rather than disappears, so the row still reads. */
@media (max-width: 430px) {
  .press-label { font-size: .5rem; letter-spacing: .1em; }
}

/* ══ Sections ════════════════════════════════════════════ */
.section { padding: clamp(1.875rem, 6vw, 6rem) 0; scroll-margin-top: var(--header-h); }
.trips { padding-block: clamp(1.75rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem); }
.moments { padding-block: clamp(3rem, 7vw, 5rem); }

/* ── Why Blue Terra ─────────────────────────────────────── */
/* Sits straight under the advisor banner, which already carries its own
   padding below it. A full section's gap on top of that leaves a hole on a
   wide screen, so this one is deliberately smaller — on a phone, where the
   gap is small anyway, it stays as it was. */
.why { background: #fcfbf7; text-align: center; padding-top: clamp(1.875rem, 2.6vw, 2.5rem); }
.why-title { max-width: 22ch; margin-inline: auto; text-wrap: balance; color: #393838; font-size: 28px; line-height: 1.2; }
@media (min-width: 768px) { .why-title { font-size: clamp(32px, 2.8vw, 42px); max-width: 30ch; } }
/* The few lines under the heading that say what Blue Terra is, before the
   four pillars spell it out. */
.why-intro {
  max-width: 58ch; margin: 1rem auto 0; text-wrap: pretty;
  color: #555; font-size: 1rem; line-height: 1.6;
}
@media (min-width: 768px) { .why-intro { font-size: 1.125rem; } }
/* Four in a row on a wide screen, two by two on a tablet. */
.pillars {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.pillar-icon {
  width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 50%;
  background: var(--sky-bg); display: grid; place-items: center;
}
.pillar-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--navy); stroke-width: 1.6; }
.pillar h3 { font-family: var(--display); font-weight: 600; font-size: 1.1875rem; color: #26221c; margin-bottom: .5rem; }
.pillar p { max-width: 30ch; margin-inline: auto; color: #666; font-size: .9375rem; line-height: 1.45; }

@media (min-width: 768px) {
  .pillar h3 { font-size: 1.4375rem; line-height: 1.2; }
  .pillar p { color: #555; font-size: 1.0625rem; line-height: 1.6; }
}

/* On a phone each pillar becomes a row — icon left, the title with its
   text beneath it on the right — rather than four tall stacked blocks. The
   icon lines up with the title, not with the middle of the text. */
@media (max-width: 767px) {
  .pillars { display: flex; flex-direction: column; gap: 22px; max-width: 520px; margin-inline: auto; }
  .pillar { display: flex; align-items: flex-start; gap: 14px; text-align: left; }
  .pillar-body { min-width: 0; }
  .pillar-icon { flex: 0 0 48px; width: 48px; height: 48px; margin: 0; }
  .pillar-icon svg { width: 24px; height: 24px; }
  .pillar h3 { margin-bottom: 2px; }
  .pillar p { max-width: none; margin: 0; }
}

/* ── Trips ─────────────────────────────────────────────── */
.trips { background: var(--cream); }

/* All trips, or one kind of trip — the same buttons the category row
   always had. */
.pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin: 2rem 0 2.75rem;
}

/* On a phone the row does not fit one line, so it becomes one
   sideways-scrolling strip. The negative margin lets it bleed to the
   screen edge, which is the cue that there is more to swipe to. */
@media (max-width: 879px) {
  .pills {
    flex-wrap: nowrap; justify-content: flex-start; gap: 10px;
    overflow-x: auto; scroll-snap-type: x proximity;
    margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding-inline: clamp(16px, 4vw, 40px);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* Snap to the page margin, not the screen edge — otherwise the first
       button is pushed flush against the left of the screen. */
    scroll-padding-inline: clamp(16px, 4vw, 40px);
  }
  .pills::-webkit-scrollbar { display: none; }
  .pill { flex: none; scroll-snap-align: start; }
}
.pill {
  font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
  min-height: 44px; padding: 0 20px; border-radius: 12px;
  background: #fff; border: 1px solid #e2dfd6; color: #5c5c5c;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pill:hover { border-color: var(--navy); color: var(--navy); }
.pill[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* After "Travel Destinations" has narrowed the list: which country is
   showing, and the way back to all trips. It sits between the buttons and
   the cards, so it borrows from the space under the buttons. */
.trips-filter {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .25rem .9rem; margin: -1.25rem 0 1.75rem; font-weight: 600; color: #26221c;
}
.trips-filter[hidden] { display: none; }
.trips-filter-name {
  background: var(--stone-bg); color: var(--navy);
  border-radius: 999px; padding: .3rem .85rem;
}
.trips-filter-reset {
  font: inherit; font-weight: 600; color: var(--navy); cursor: pointer;
  background: none; border: 0; padding: .6rem 0;
  text-decoration: underline; text-underline-offset: 3px;
}
/* A centred wrapping row rather than a fixed three-column grid, so cards
   keep the reference's 322px cap instead of stretching to fill. */
.trip-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.trip-card { flex: 1 1 258px; max-width: 322px; }


.trip-card {
  background: #fff; border: 1px solid #eeece4; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 6px 20px rgba(54, 54, 54, .05); display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.trip-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(54, 54, 54, .15); }

/* The card is a column, and a part of a column is never squeezed below the
   size of what is inside it — so a photo that was not 16:10 pushed its own
   frame taller than the frames on the neighbouring cards. min-height lifts
   that floor, and the 16:10 frame holds for every photo. */
.trip-media { position: relative; aspect-ratio: 16 / 10; min-height: 0; background: var(--stone-bg); }
.trip-media svg, .trip-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trip-rating {
  position: absolute; top: .8rem; right: .8rem;
  background: rgba(255, 255, 255, .95); border-radius: 999px; padding: .25rem .625rem .25rem .5rem;
  font-size: .75rem; font-weight: 700; color: var(--navy);
  display: inline-flex; align-items: center; gap: .3rem; box-shadow: 0 2px 8px rgba(10, 34, 52, .18);
}
/* The star is terracotta, the number navy — as on the listing. */
.trip-rating .s { color: var(--terra); }
/* Same pill for a trip with no rating yet: compass star, then "New".
   Slightly wider padding on the left because the icon has no side
   bearing of its own the way the ★ glyph does. */
.trip-new { padding-left: .5625rem; gap: .35rem; }
/* Two parts to the selector on purpose: the rule above for the fallback
   illustration stretches every svg in .trip-media to fill the card. */
.trip-media .trip-new-icon {
  display: block; width: 13px; height: 13px; flex: none;
  color: var(--terra); object-fit: none;
}

.trip-body { padding: 1rem 1.125rem 1.125rem; display: flex; flex-direction: column; flex: 1; }
.trip-title {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem;
  line-height: 1.18; color: #26221c; margin: 0 0 .55rem;
}
.trip-title-link { text-decoration: none; }
.trip-title-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.trip-desc { font-size: .9375rem; line-height: 1.5; color: #555; margin: 0 0 1.1rem; flex: 1; }
.trip-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-top: 1px solid #f0eee6; padding-top: .75rem; margin-bottom: .8rem;
}
.trip-place { font-size: .8125rem; color: #8a8a8a; }
.trip-price { font-size: 1.0625rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.trip-more {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .875rem; color: var(--navy); text-decoration: none;
}
.trip-more:hover { color: #0f3048; }

/* ── The whole card is clickable ──────────────────────────
   "Mehr erfahren" stays the one real link; an invisible layer above it
   is stretched over the card, so a click anywhere on the card follows
   that link. This way a card carries one link, not a link inside a
   link — which is what a screen reader and the keyboard expect. */
.trip-card { position: relative; cursor: pointer; }
.trip-more::after { content: ''; position: absolute; inset: 0; }
/* The keyboard still lands on the link, so show the ring on the card. */
@supports selector(:has(*)) {
  .trip-card:has(.trip-more:focus-visible) {
    outline: 3px solid var(--terra); outline-offset: 2px; border-radius: var(--radius);
  }
  .trip-more:focus-visible { outline: none; }
}
.trip-more svg { width: 18px; height: 18px; transition: transform .16s ease; }
.trip-more:hover svg { transform: translateX(4px); }

.empty { text-align: center; padding: 2.5rem 0; color: var(--muted); }
#show-more {
  margin-top: 1.875rem; background: #fff; border-color: var(--navy); color: var(--navy);
  border-radius: 14px; min-height: 50px; padding: 0 30px; font-size: 1rem;
}
#show-more:hover { background: var(--navy); color: #fff; }

/* ── Advisor banner ────────────────────────────────────── */
.advisor-wrap { background: var(--cream); padding-top: 0; }
.advisor {
  background: var(--navy); color: #fff; border-radius: var(--radius);
  padding: 1.5rem 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.advisor-avatar {
  width: 66px; height: 66px; border-radius: 50%; flex: none; overflow: hidden;
  background: rgba(255, 255, 255, .2); display: grid; place-items: center;
}
.advisor-avatar svg { width: 100%; height: 100%; fill: rgba(255, 255, 255, .75); }
.advisor-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.advisor-copy { flex: 1; min-width: 240px; }
.advisor-copy h2 { color: #fff; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15; margin-bottom: .15rem; }
.advisor-copy p { margin: 0; color: rgba(255, 255, 255, .9); font-size: 1rem; line-height: 1.5; }
.advisor-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.advisor-actions .btn { border-radius: 13px; min-height: 48px; padding: 0 18px; font-size: .9375rem; }
/* Below the reference's breakpoint the three buttons stack full width. */
@media (max-width: 879px) {
  .advisor { gap: 14px; }
  .advisor-copy { min-width: 0; }
  .advisor-actions { flex-direction: column; width: 100%; gap: 8px; }
  .advisor-actions .btn { width: 100%; }
}

/* ── Contact tab (every page, built in site-chrome.js) ─────── */
/* Phones and tablets: a round photo in the bottom corner, lifted above the
   booking bar on a trip page (--cw-lift, set by the script). From 1280 px,
   where there is room beside the content, a tab on the right edge. */
.cw {
  --cw-lift: 0px;
  position: fixed; right: 16px; z-index: 80;
  bottom: max(calc(16px + var(--cw-lift)), calc(16px + env(safe-area-inset-bottom, 0px)));
}
.cw-tab {
  position: relative; display: block; width: 60px; height: 60px; padding: 0;
  border: 3px solid #fff; border-radius: 50%; background: var(--navy);
  box-shadow: var(--shadow-lg); cursor: pointer;
}
.cw-tab-photo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cw-tab-icon {
  position: absolute; left: -7px; bottom: -5px; width: 26px; height: 26px;
  display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%;
  background: var(--navy); color: #fff;
}
.cw-tab-icon svg { width: 13px; height: 13px; }

.cw-card {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(270px, calc(100vw - 32px));
  max-height: calc(100vh - 120px - var(--cw-lift)); overflow-y: auto;
  padding: 34px 20px 22px; text-align: center; color: #fff;
  background: var(--navy); border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .38), var(--shadow-lg);
  animation: cw-in .22s ease-out;
}
@keyframes cw-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes cw-in-side { from { opacity: 0; transform: translateX(12px); } }
.cw-x {
  position: absolute; top: 10px; left: 10px; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
}
.cw-x:hover { background: rgba(255, 255, 255, .15); }
.cw-x svg { width: 18px; height: 18px; }
.cw-photo {
  display: block; width: 104px; height: 104px; margin: 0 auto 12px;
  border: 3px solid #fff; border-radius: 50%; object-fit: cover;
}
.cw-call-us { margin: 0 0 12px; font-size: .9rem; color: #fff; }
.cw-title { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: #fff; }
.cw-phone { display: inline-block; font-size: 1.05rem; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap; }
.cw-phone:hover { text-decoration: underline; }
.cw-actions { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.cw-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; text-decoration: none; }
.cw-btn svg { width: 20px; height: 20px; }
.cw-btn-call { background: #fff; color: var(--navy); }
.cw-btn-call:hover { background: var(--sky-bg); }
.cw-btn-wa { background: var(--terra); color: #fff; }
.cw-btn-wa:hover { background: var(--terra-dark); }
.cw-btn-mail { border: 1.5px solid #fff; color: #fff; }
.cw-btn-mail:hover { background: rgba(255, 255, 255, .12); }

@media (min-width: 1280px) {
  .cw { right: 0; bottom: auto; top: 50%; translate: 0 -50%; }
  /* A hairline of white around the tab and the card. Over the cream page
     it cannot be seen; over the dark footer, which the widget sits on top
     of once the page is scrolled down, it keeps their edge visible. */
  .cw-tab {
    width: 56px; height: auto; border: 0; overflow: hidden;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .38), var(--shadow-lg);
  }
  .cw-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .38), var(--shadow-lg); }
  .cw-tab-photo { width: 56px; height: 56px; border-radius: 0; }
  .cw-tab-icon { position: static; width: 56px; height: 56px; border: 0; border-radius: 0; }
  .cw-tab-icon svg { width: 22px; height: 22px; }
  .cw-tab:hover .cw-tab-icon { background: var(--navy-dark); }
  .cw.is-open .cw-tab { visibility: hidden; }
  /* The card opens where the tab is, centred on it. */
  .cw-card {
    bottom: auto; top: 50%; translate: 0 -50%; width: 250px;
    border-radius: var(--radius) 0 0 var(--radius); animation-name: cw-in-side;
  }
}
@media (prefers-reduced-motion: reduce) { .cw-card { animation: none; } }

/* ── Testimonials ──────────────────────────────────────── */
.reviews { background: #fff; border-top: 1px solid #eeece4; border-bottom: 1px solid #eeece4; }
.reviews .display { font-size: clamp(24px, 3vw, 32px); line-height: 1.12; }
.reviews-meta { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 2.5rem; font-size: 1.125rem; }
.reviews-meta strong { font-weight: 600; color: #363636; }
.reviews-meta .muted { color: #777; }
.reviews-meta .sep { color: var(--muted); }
/* Below this width the line breaks in two and the dot would be left
   dangling at the end of the first line. */
@media (max-width: 479px) { .reviews-meta .sep { display: none; } }

.reviews-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; align-items: stretch; }

.review-feature {
  display: grid; grid-template-columns: 1fr 1.2fr; border-radius: 22px;
  overflow: hidden; box-shadow: 0 6px 20px rgba(54, 54, 54, .06); margin: 0;
}
.review-feature .review-photo svg, .review-feature .review-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.review-feature .review-body { background: var(--navy); color: #fff; padding: 1.75rem; display: flex; flex-direction: column; justify-content: center; }
/* The featured quote runs in the text face, not the heading one — it is
   somebody speaking, not a headline. */
.review-feature blockquote {
  font-family: var(--sans); font-weight: 500; font-size: clamp(16px, 1.55vw, 18.5px); line-height: 1.5;
  margin: .75rem 0 1.25rem;
}
.review-feature .review-name { font-weight: 600; margin: 0; }
.review-feature .review-role { margin: 0; font-size: .88rem; color: rgba(255, 255, 255, .82); }

.reviews-side { display: grid; gap: 18px; align-content: stretch; }
.review-card {
  display: grid; grid-template-columns: 200px 1fr; border-radius: 22px;
  overflow: hidden; border: 1px solid #eeece4; box-shadow: 0 6px 20px rgba(54, 54, 54, .06);
  background: #fff; margin: 0;
}
.review-card .review-photo svg, .review-card .review-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.review-card .review-body { padding: 1.35rem 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.review-card blockquote { margin: .55rem 0 1rem; font-size: .9375rem; line-height: 1.45; color: #3a3a3a; }
.review-card .review-name { font-weight: 600; margin: 0; color: var(--heading); }
/* A card that belongs to a trip is one big link: the anchor on the name
   grows over the whole card, so the quote, the photo and the name all
   lead to that trip. */
.review-card-link { position: relative; transition: box-shadow .18s ease, transform .18s ease; }
.review-card-link:hover { box-shadow: 0 10px 26px rgba(54, 54, 54, .12); transform: translateY(-2px); }
.review-name-link { color: inherit; text-decoration: none; }
.review-name-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.review-card-link:hover .review-name-link { text-decoration: underline; }
.review-card .review-role { margin: 0; font-size: .85rem; color: var(--muted); }

.review-stars { color: var(--terra); letter-spacing: .12em; font-size: .95rem; }
.review-feature .review-stars { color: var(--sand); }

/* Controls under a rail: arrow · dots · arrow. Shared by the reviews and
   moments carousels. Hidden until the layout actually becomes a rail. */
.rail-controls { display: none; align-items: center; justify-content: center; gap: 1.125rem; margin-top: 1.375rem; }
.rail-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.rail-dots .dot { background: #d5d5cc; }
.rail-dots .dot[aria-current="true"] { width: 26px; background: var(--navy); }

/* Phones get one card at a time, swipeable, Dirk first. `display: contents`
   lifts the two smaller reviews out of their column so all three become
   siblings in the same rail. */
@media (max-width: 879px) {
  .reviews-grid {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding: .25rem clamp(16px, 4vw, 40px) .5rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .reviews-side { display: contents; }
  .review-feature, .review-card {
    flex: 0 0 100%; max-width: 520px; margin-inline: auto;
    /* minmax(0, …) lets the column be narrower than the photo inside it —
       without it the photo sets the width and the text runs off the card. */
    grid-template-columns: minmax(0, 1fr); scroll-snap-align: center;
  }
  .review-feature .review-photo, .review-card .review-photo { width: 100%; aspect-ratio: 16 / 10; }
  .rail-controls { gap: 16px; margin-top: 16px; }
  .rail-controls .round-btn { width: 42px; height: 42px; }
  .review-card .review-body, .review-feature .review-body { justify-content: flex-start; }
  .rail-controls { display: flex; }
}

/* ── Impact carousel ───────────────────────────────────── */
.impact { position: relative; height: min(80svh, 720px); min-height: 440px; overflow: hidden; background: var(--navy-deep); }
/* On a short phone 70 % of the screen is not enough for the longest slide
   text and its button, which would then run into the heading above —
   so the section never gets shorter than 520 px. */
@media (max-width: 879px) { .impact { height: max(70svh, 520px); } }
.impact-slides { position: absolute; inset: 0; }
/* A hidden slide still lies on top of the ones before it, so it would
   swallow the click meant for a button on the visible one. Hidden slides
   therefore turn invisible to the pointer and the keyboard too — but only
   once their fade-out has finished. */
.impact-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
  display: flex; align-items: flex-end;
}
.impact-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.impact-slide .slide-bg { position: absolute; inset: 0; }
.impact-slide .slide-bg svg, .impact-slide .slide-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Two soft layers instead of one heavy one: the sideways gradient keeps
   the left edge readable, the upward one carries the text block. The
   picture stays visible through both. */
.impact-slide::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 26, 40, .62) 0 24%, rgba(7, 26, 40, .28) 55%, transparent 82%),
    linear-gradient(0deg, rgba(7, 26, 40, .68) 0 18%, rgba(7, 26, 40, .2) 46%, transparent 68%);
}
.slide-copy { position: relative; z-index: 1; width: 100%; max-width: var(--wrap-content); margin-inline: auto; padding: 0 clamp(16px, 4vw, 40px) clamp(78px, 11vh, 110px); }
.slide-place { font-family: var(--mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sand); margin-bottom: .75rem; }
/* The titles are written to run to two lines. The max-width forces the
   break and `balance` splits them evenly instead of leaving one word
   stranded on line two. */
.slide-title {
  font-family: var(--display); font-weight: 600; color: #fff;
  font-size: clamp(24px, 4.2vw, 44px); letter-spacing: -.5px; line-height: 1.06; max-width: 22ch;
  text-wrap: balance; margin-bottom: .5rem;
}
.slide-text { color: rgba(255, 255, 255, .92); max-width: 42ch; margin: 0; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.5; }
.slide-cta { margin-top: 1.25rem; }

.impact-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; padding-top: clamp(80px, 13vh, 120px); }
.impact-overlay h2 { margin: 0; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.1; }

.impact-prev, .impact-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 50px; height: 50px; background: rgba(8, 24, 38, .35); color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.impact-prev:hover, .impact-next:hover { background: rgba(8, 24, 38, .6); }
.impact-prev { left: clamp(12px, 3vw, 28px); }
.impact-next { right: clamp(12px, 3vw, 28px); }
/* On a phone the slide is barely taller than its caption, so an arrow in
   the middle lands on the place name. Down at the bottom it sits level
   with the dots instead — arrow · dots · arrow, as on the other rails. */
@media (max-width: 879px) {
  .impact-prev, .impact-next {
    top: auto; transform: none; width: 42px; height: 42px;
    bottom: calc(clamp(26px, 5vh, 40px) - 16px);
  }
}

.dots { position: absolute; left: 50%; bottom: clamp(26px, 5vh, 40px); transform: translateX(-50%); z-index: 3; display: flex; gap: .5rem; }
.dot {
  width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .45); transition: width .2s ease, background .2s ease;
}
.dot[aria-current="true"] { width: 32px; background: #fff; }

/* ── Moments ───────────────────────────────────────────── */
.moments { background: var(--cream); }
.moments-meta {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: .625rem 0 1.625rem; color: #555; font-size: 1.0625rem; font-weight: 500;
}

.rail {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .5rem max(clamp(16px, 4vw, 40px), calc((100vw - var(--wrap-content)) / 2)) .25rem;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.moment {
  flex: none; width: clamp(210px, calc(100vw - 84px), 300px); aspect-ratio: 3 / 4; scroll-snap-align: center;
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--navy-dark); text-decoration: none; color: #fff;
}
.moment svg, .moment img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A deep navy-black scrim rather than a neutral one, so the captions sit
   on the brand colour the way they do on the live site. */
.moment::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 24, 38, 0) 38%, rgba(8, 24, 38, .88) 100%);
}
/* Caption is one stacked block so a long line pushes the name up
   instead of colliding with it. */
.moment-cap { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: 1; }
.moment-name { display: block; font-family: var(--display); font-weight: 600; font-size: 1.375rem; line-height: 1.1; }
.moment-text { display: block; font-size: .9375rem; line-height: 1.45; margin-top: .375rem; color: rgba(255, 255, 255, .9); }

/* Controls sit centred under the rail — arrows either side of the dots —
   with the "explore all trips" link on its own row beneath. */
.moments-controls {
  display: flex; align-items: center; justify-content: center; gap: 1.125rem;
  margin-top: 1.375rem;
}
.moments-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.moments-dots .dot { background: #d5d5cc; }
.moments-dots .dot[aria-current="true"] { width: 26px; background: var(--navy); }

.moments-foot { display: flex; justify-content: flex-start; margin-top: .5rem; }
.moments-foot .link-arrow { color: var(--navy); font-size: 1.0625rem; font-weight: 600; }
.moments-foot .link-arrow:hover { color: #0f3048; }

/* ── Contact panel ─────────────────────────────────────────
   A navy panel with white type, matching the live site. The two
   columns are equal and collapse to one below ~640px, where the
   minmax() floor stops fitting side by side. */
.contact-wrap { background: var(--cream); padding-top: 0; }
.contact-panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  background: var(--navy); border-radius: 28px; overflow: hidden;
}
.contact-photo {
  display: block; width: 100%; height: 100%; min-height: 240px;
  object-fit: cover; background: var(--navy-dark);
}
.contact-copy {
  display: flex; flex-direction: column; gap: .875rem;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}
.contact-copy h2 { color: #fff; margin: 0; }
.contact-copy > p { color: rgba(255, 255, 255, .92); font-size: 1.0625rem; margin: 0; max-width: 44ch; }

/* Squarer corners, a taller tap target and a heavier outline than the pill
   buttons used elsewhere on the page — this is how the live panel looks. */
.contact-copy .btn { border-radius: 16px; min-height: 56px; border-width: 2px; }
.contact-copy .btn-ghost-white { border-color: rgba(255, 255, 255, .85); }
.contact-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.contact-row .btn { flex: 1 1 150px; font-size: 1.125rem; }
#contact-call { justify-content: center; font-weight: 600; font-size: 1.0625rem; }
.contact-promise {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  font-size: .9375rem; color: rgba(255, 255, 255, .8);
}
.tick { color: var(--sand); font-weight: 700; }

@media (max-width: 800px) {
  .contact-photo { min-height: 220px; }
}

/* ── Newsletter ────────────────────────────────────────── */
.newsletter { background: var(--sky-bg); padding: clamp(3rem, 6vw, 4.5rem) 0; }
.newsletter-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem 3rem; align-items: start; }
.newsletter h2 { color: #0f3048; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.newsletter > .wrap > div > p { color: #4a5c6b; font-size: 1.0625rem; max-width: 40ch; }

.nl-row { display: flex; gap: .7rem; flex-wrap: wrap; }
/* The button takes its own full-width row under the field, as on the reference. */
.nl-row .btn { flex: 1 1 100%; border-radius: 14px; min-height: 52px; font-size: 1rem; }
.nl-row input {
  flex: 1 1 180px; font: inherit; padding: 0 16px; min-height: 52px; font-size: 1rem;
  border: 1px solid #bdd0e0; border-radius: 14px; background: #fff; color: var(--heading); outline: none;
}
.nl-row input:focus { border-color: var(--navy); }
.nl-consent { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem; font-size: .8125rem; line-height: 1.45; color: #465c6b; }
.nl-consent input { margin-top: .28rem; accent-color: var(--navy); flex: none; }
.nl-consent a { color: #0f3048; text-decoration: underline; }
.nl-optin { color: #5a6a70; font-size: .75rem; line-height: 1.4; margin: .75rem 0 0; }
.nl-thanks { margin: .75rem 0 0; font-weight: 600; font-size: 1.0625rem; color: #0f3048; }

/* Mailchimp's bot trap. Off-screen rather than display:none, because a
   hidden field is exactly what a bot looks for and skips. */
.nl-trap { position: absolute; left: -5000px; overflow: hidden; }

/* ── The newsletter window that comes up by itself ────────
   Rebuilt from socialbnb.org's own pop-up — the sizes, colours and
   breakpoint below are that page's values, not guesses. The picture is
   the whale shark we already carry as the hero photograph, which is the
   same photograph the live pop-up uses. */
.nlp { padding: 18px; }
.nlp-card {
  display: flex; width: 100%; max-width: 880px; max-height: 92vh;
  background: #fff; border-radius: 24px; overflow: hidden; position: relative;
  box-shadow: 0 30px 80px rgba(8, 24, 38, .45);
  animation: nlp-rise .26s ease;
}
/* On a phone the picture goes and the words get the whole window. */
.nlp-media {
  display: none; flex: 0 0 42%;
  background: url("assets/hero.webp") 50% / cover no-repeat;
}
.nlp-body { flex: 1 1 auto; overflow: auto; padding: 30px 26px 26px; }
.nlp .ov-x {
  top: 12px; right: 12px; width: 38px; height: 38px;
  background: #fff; border: 1px solid #e0ddd3;
}

.nlp-eyebrow {
  display: inline-block; background: var(--sky-bg); color: var(--navy);
  border-radius: 999px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.nlp-title {
  font-family: var(--display); font-size: 27px; font-weight: 600; line-height: 1.15;
  color: #26221c; margin: 12px 0 0; padding-right: 34px;
}
.nlp-text { font-size: 15px; line-height: 1.5; color: #666; margin: 12px 0 0; }

.nlp-benefits-title { font-size: 14px; font-weight: 700; color: #26221c; margin: 16px 0 0; }
.nlp-benefits { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nlp-benefits li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; line-height: 1.45; color: #4a453c;
}
.nlp-benefits svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; color: var(--navy); }

.nlp-form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.nlp-form input[type="text"], .nlp-form input[type="email"] {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: #fff; border: 1px solid #ddd8cc; border-radius: 12px;
  font: 400 16px var(--sans); color: #26221c;
}
.nlp-form input[type="text"]:focus, .nlp-form input[type="email"]:focus {
  outline: none; border-color: var(--navy);
}
.nlp-consent {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 2px;
  font-size: 13px; line-height: 1.45; color: #4a453c; text-align: left;
}
.nlp-consent input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--navy); }
.nlp-consent a { color: var(--navy); text-decoration: underline; white-space: nowrap; }
.nlp-submit {
  margin-top: 4px; min-height: 54px; border: 0; border-radius: 14px;
  background: var(--terra); color: #fff; cursor: pointer;
  font: 600 17px var(--sans); transition: background .2s ease;
}
.nlp-submit:hover { background: var(--terra-dark); }
.nlp-dismiss {
  background: none; border: 0; padding: 2px; cursor: pointer;
  font: 13px var(--sans); color: #8a8172; text-decoration: underline;
}
.nlp-dismiss:hover { color: #4a453c; }
.nlp-note { font-size: 12px; line-height: 1.4; color: #5a6a70; margin: 0; }

.nlp-success { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0 6px; text-align: center; }
.nlp-success[hidden] { display: none; }
.nlp-success-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--sky-bg);
  display: grid; place-items: center; color: var(--navy);
}
.nlp-success-icon svg { width: 30px; height: 30px; }
.nlp-success-title { font-family: var(--display); font-size: 22px; font-weight: 600; color: #26221c; margin: 0; }
.nlp-success-text { font-size: 16px; line-height: 1.55; color: #666; margin: 0; }
.nlp-success-btn {
  margin-top: 6px; min-height: 50px; padding: 0 26px; border: 0; border-radius: 14px;
  background: var(--navy); color: #fff; cursor: pointer; font: 600 16px var(--sans);
}
.nlp-success-btn:hover { background: #0f3048; }

@keyframes nlp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nlp-card { animation: none; } }

@media (min-width: 760px) {
  .nlp-media { display: block; }
  .nlp-body { padding: 36px 34px 30px; }
  .nlp-title { font-size: 31px; }
}
@media (max-width: 820px) { .newsletter-inner { grid-template-columns: 1fr; } }

/* ── Footer ────────────────────────────────────────────── */
.site-footer { background: var(--navy); color: #fff; }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
}
/* The footer sits on dark navy, so it always uses the white logo — and can
   carry it a little larger than the header. */
.brand.light .brand-logo { height: 46px; }

.footer-badges { display: flex; align-items: flex-start; gap: 1.75rem; flex-wrap: wrap; margin: 1.75rem 0 0; }
.footer-badges-row { align-items: center; margin-bottom: 1.75rem; }
/* The badges are links now, so the anchors must not add inline leading. */
.footer-badges > a { display: block; }
/* Trustpilot: wordmark, the score, then the star strip — stacked, as live. */
.trustpilot { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; }
.tp-logo  { display: block; width: 90px; height: auto; }
.tp-score { font-weight: 400; font-size: 1rem; }
.footer-badges .badge { display: block; height: auto; border-radius: 3px; }

/* The live icons are orange glyphs on transparent, with no circle behind
   them, so the anchor just holds the artwork. */
.socials { display: flex; gap: .5rem; }
.socials a { display: block; width: 40px; height: 40px; transition: transform .15s ease; }
.socials a:hover { transform: scale(1.08); }
.socials img { display: block; width: 100%; height: 100%; }

.footer-col { display: flex; flex-direction: column; gap: .55rem; }
.footer-col h3 { font-family: var(--sans); font-weight: 600; font-size: .9375rem; letter-spacing: .3px; color: #fff; margin: 0 0 .5rem; }
.footer-col a { text-decoration: none; font-size: 1rem; color: rgba(255, 255, 255, .92); }
.footer-col a:hover, .footer-link:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Two entries open a form rather than a page, so they are buttons —
   they only have to look like the links around them. */
.footer-link {
  border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
  font: inherit; font-size: 1rem; color: rgba(255, 255, 255, .92);
}
.footer-col a.sub { padding-left: 1rem; position: relative; }
.footer-col a.sub::before { content: "•"; position: absolute; left: .15rem; opacity: .8; }

.footer-bottom {
  display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap;
  justify-content: center; border-top: 2px solid #fff;
  padding-block: 1rem 1.75rem; font-size: 1rem;
}
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The white uprights that separate language · legal · copyright. */
.footer-rule { width: 2px; height: 30px; background: #fff; flex: none; }

.footer-legal { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* Shows the language you are in; clicking it switches to the other one. */
.footer-lang {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: .875rem; color: inherit; background: none;
  border: 0; padding: .5rem .75rem; cursor: pointer;
}
.footer-lang:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-flag { width: 20px; height: 20px; border-radius: 2px; object-fit: cover; flex: none; }
.copyright { font-size: .875rem; color: rgba(255, 255, 255, .85); }
.footer-legal a { font-size: .9375rem; color: rgba(255, 255, 255, .88); }

@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  /* The uprights only make sense while the row is one line. */
  .footer-rule { display: none; }
  .footer-bottom { flex-direction: column; gap: .875rem; text-align: center; }
}
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

/* ═════════════════════════════════════════════════════════
   TRIP PAGE (trip.html)

   A copy of the trip-page design from the socialbnb app, so
   the two look the same. The colours, the two typefaces and
   the breakpoints below are the ones the app uses; they are
   declared here rather than at the top of the file because
   they apply to the trip pages only.

   Breakpoints, same as the app:
     768 px  = "medium"  (tablet upwards)
     1024 px = "large"   (booking panel moves to the side)
     1400 px = "x-large" (page gets a little wider)

   Everything is inside `.listing`, so the home page is
   untouched.
   ═════════════════════════════════════════════════════════ */
.listing {
  --lp-primary:  #143e5c;
  --lp-accent:   #cc7939;
  --lp-bg:       #faf9f5;
  --lp-card:     #faf8f3;
  --lp-text:     #15232e;
  --lp-dark:     #36352f;
  --lp-mid:      #46443d;
  --lp-muted:    #6e6a60;
  --lp-line:     #e7e2d9;
  --lp-line-2:   #ddd7cc;
  --lp-deep:     #0f2f45;
  --lp-r:        14px;
  --lp-r-lg:     18px;

  /* The trip page follows the same two faces as the rest of the site. */
  --lp-head: var(--display);
  --lp-body: var(--sans);

  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--lp-body);
}

/* The photo starts below the header, as it does in the app, so the header
   stays solid and readable instead of sitting on top of the picture.

   The photo runs edge to edge on a phone, which is a hair wider than the
   window once a scrollbar is showing — clipping it here stops the page
   sliding sideways. From 1024 px up the clip is dropped again, because the
   booking panel next to the text has to be able to stick as you scroll. */
.listing #main { padding-top: var(--header-h); overflow-x: hidden; }
@media (min-width: 1024px) { .listing #main { overflow-x: visible; } }

/* Only the trip content itself — the shared footer keeps its own white
   headings, so this must not reach outside #main. */
.listing #main h1, .listing #main h2, .listing #main h3 { font-family: var(--lp-head); color: var(--lp-text); }
/* The white hero title needs to beat the rule above it. */
.listing #main .lp-title { color: #fff; }
.listing #main .lp-sub { color: var(--lp-dark); }

/* `hidden` has to beat the layout rules below, otherwise a hidden row
   (the bedroom choice, the "show all reviews" button) still shows. */
.listing [hidden] { display: none !important; }

/* The page width the app uses, taken in by a few per cent: 91vw on a
   phone, 83vw from tablet, 88vw and a little wider on a very wide screen. */
.lp-wrap { width: 91vw; max-width: 1240px; margin-inline: auto; }
@media (min-width: 768px)  { .lp-wrap { width: 83vw; } }
@media (min-width: 1400px) { .lp-wrap { width: 88vw; max-width: 1340px; } }

/* On a trip page the header and the footer follow that same column,
   so the logo above and the links below line up with the content. */
.listing .site-header .wrap,
.listing .site-footer .wrap {
  width: 91vw; max-width: 1240px; padding-inline: 0;
}
@media (min-width: 768px) {
  .listing .site-header .wrap, .listing .site-footer .wrap { width: 83vw; }
}
@media (min-width: 1400px) {
  .listing .site-header .wrap, .listing .site-footer .wrap { width: 88vw; max-width: 1340px; }
}

.lp-section { margin-bottom: 32px; }
@media (min-width: 768px) { .lp-section { margin-bottom: 38px; } }

.lp-h2 {
  font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 12px;
}
@media (min-width: 768px) { .lp-h2 { font-size: 26px; margin-bottom: 16px; } }

.lp-sub { font-family: var(--lp-head); font-size: 16px; font-weight: 700; margin: 20px 0 6px; }
.lp-list { margin: 0 0 1em; padding-left: 1.2em; list-style: disc; }
.lp-list li { margin-bottom: 4px; }

/* Trip not found */
.lp-missing { padding: 180px 24px 120px; text-align: center; }
.lp-missing h1 { font-size: 1.6rem; margin-bottom: 1.5rem; }

/* ── Photo gallery ─────────────────────────────────────── */
.lp-gallery { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw) 16px; }
@media (min-width: 768px) {
  .lp-gallery { width: 100%; max-width: none; margin: 0 auto 32px; }
}

/* The hero keeps one shape at every window width: its height follows the
   column instead of being a fixed number of pixels, so widening the page no
   longer slices more off the top and bottom of the photograph. Most trip
   photos are square, so the flatter the frame the more of them is lost —
   7:3 is the flattest we go, and the cap keeps it off a short screen. */
.lp-hero {
  position: relative; width: 100%; height: 300px; overflow: hidden;
  background: var(--lp-deep); border-radius: 0; cursor: pointer;
}
@media (min-width: 768px) {
  .lp-hero {
    height: auto; aspect-ratio: 7 / 3; min-height: 380px; max-height: 600px;
    border-radius: var(--lp-r-lg);
  }
}

.lp-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-hero-gradient {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(15, 38, 43, .45) 0%, rgba(15, 38, 43, .02) 34%, rgba(13, 32, 37, .70) 100%);
}
@media (min-width: 768px) {
  .lp-hero-gradient {
    background: linear-gradient(180deg,
      rgba(15, 38, 43, .42) 0%, rgba(15, 38, 43, .05) 32%, rgba(13, 32, 37, .66) 100%);
  }
}

/* Share / save. Round icons on a phone, labelled buttons on desktop.
   On desktop they sit just below the breadcrumb, never over it. */
.lp-hero-actions { position: absolute; top: 24px; right: 24px; z-index: 5; display: flex; align-items: center; gap: 8px; }
@media (min-width: 768px) { .lp-hero-actions { top: 40px; right: 24px; gap: 9px; } }

.lp-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  color: var(--lp-dark); cursor: pointer; transition: transform .15s;
}
.lp-icon-btn:hover { transform: translateY(-1px); }
.lp-icon-btn svg { width: 18px; height: 18px; }
@media (min-width: 768px) { .lp-icon-btn { display: none; } }

.lp-action-btn {
  display: none; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .96); box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  font: inherit; font-family: var(--lp-body); font-size: 14px; font-weight: 600;
  color: var(--lp-dark); cursor: pointer; transition: transform .15s;
}
.lp-action-btn:hover { transform: translateY(-1px); }
.lp-action-btn svg { width: 16px; height: 16px; flex: none; }
@media (min-width: 768px) { .lp-action-btn { display: inline-flex; } }


/* Share menu */
.lp-share-wrap { position: relative; }
.lp-share-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 6;
  display: flex; flex-direction: column; min-width: 168px; padding: 6px;
  border-radius: 12px; background: rgba(255, 255, 255, .98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.lp-share-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--lp-dark);
  cursor: pointer; text-align: left; text-decoration: none;
}
.lp-share-item:hover { background: rgba(20, 62, 92, .08); }
.lp-share-item svg { width: 22px; height: 22px; flex: none; }

/* Title block, pinned to the bottom of the photo */
.lp-hero-overlay {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 12px 12px 16px; pointer-events: none;
}
.lp-hero-overlay > * { pointer-events: auto; }
@media (min-width: 768px) { .lp-hero-overlay { padding: 16px 24px 28px; } }

.lp-breadcrumb {
  display: none; position: absolute; top: 16px; right: 24px; z-index: 4; margin: 0;
  flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px;
  max-width: calc(100% - 48px);
  font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .82); text-align: right;
}
@media (min-width: 768px) { .lp-breadcrumb { display: flex; } }
.lp-breadcrumb a { color: rgba(255, 255, 255, .92); text-decoration: none; }
.lp-breadcrumb a:hover { text-decoration: underline; }
.lp-breadcrumb-sep { color: rgba(255, 255, 255, .55); }

.lp-hero-bottom { padding-bottom: 0; }
@media (min-width: 768px) { .lp-hero-bottom { padding-bottom: 24px; } }

.lp-badges { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
@media (min-width: 768px) { .lp-badges { margin-bottom: 12px; } }

.lp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border: 0; border-radius: 999px;
  font: inherit; font-family: var(--lp-body); font-size: 12px; font-weight: 700;
  background: rgba(204, 121, 57, .95); color: #fff;
}
@media (min-width: 768px) {
  .lp-badge { gap: 6px; padding: 7px 14px; background: var(--lp-accent); font-size: 13px; font-weight: 600; }
}
.lp-badge svg { width: 14px; height: 14px; flex: none; }

.lp-badge-rating, .lp-badge-rating-sm {
  background: rgba(255, 255, 255, .96); color: var(--lp-text); font-weight: 600;
  cursor: pointer; transition: transform .15s;
}
.lp-badge-rating:hover, .lp-badge-rating-sm:hover { transform: translateY(-1px); }
.lp-badge-rating { display: none; }
@media (min-width: 768px) {
  .lp-badge-rating { display: inline-flex; background: rgba(255, 255, 255, .96); }
  .lp-badge-rating-sm { display: none; }
}
.lp-badge-rating .lp-star, .lp-badge-rating-sm .lp-star { color: var(--lp-accent); }

.lp-badge-package {
  display: none; background: rgba(255, 255, 255, .22); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28); font-weight: 600;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
@media (min-width: 768px) { .lp-badge-package { display: inline-flex; background: rgba(255, 255, 255, .22); } }

.lp-title {
  font-size: 24px; font-weight: 600; line-height: 1.12; letter-spacing: -.02em;
  color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
  margin: 8px 0; max-width: calc(100% - 16px);
}
@media (min-width: 768px) {
  .lp-title { font-size: 38px; line-height: 1.06; margin: 12px 0; max-width: 820px; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
}
@media (min-width: 1024px) { .lp-title { font-size: 46px; } }

/* Two meta lines: a short one for phones, the full one from tablet up. */
.lp-meta-compact {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0;
  font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .94);
}
@media (min-width: 768px) { .lp-meta-compact { display: none; } }

.lp-meta {
  display: none; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0;
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .94);
}
@media (min-width: 768px) { .lp-meta { display: flex; font-size: 16px; } }
.lp-meta-item { display: inline-flex; align-items: center; gap: 7px; }
.lp-meta-item svg { width: 17px; height: 17px; flex: none; }
.lp-meta-sep { opacity: .5; }
.lp-host-btn { background: none; border: 0; padding: 0; font: inherit; color: #fff; font-weight: 500; cursor: pointer; }
.lp-host-btn:hover { text-decoration: underline; }

.lp-photo-counter {
  position: absolute; right: 12px; bottom: 16px; z-index: 4;
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .4); font-size: 12px; font-weight: 500; color: #fff;
}
@media (min-width: 768px) { .lp-photo-counter { display: none; } }

.lp-viewall {
  display: none; position: absolute; right: 16px; bottom: 16px; z-index: 3;
  align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 10px;
  background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  font: inherit; font-family: var(--lp-body); font-size: 14px; font-weight: 600;
  color: var(--lp-dark); cursor: pointer; transition: transform .2s, box-shadow .2s;
}
.lp-viewall:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, .22); }
.lp-viewall svg { width: 16px; height: 16px; flex: none; }
@media (min-width: 768px) { .lp-viewall { display: inline-flex; right: 24px; bottom: 24px; padding: 11px 18px; } }

.lp-thumbs { display: none; grid-template-columns: repeat(5, 1fr); gap: 6px; padding-top: 6px; margin-top: 6px; }
@media (min-width: 768px) { .lp-thumbs { display: grid; } }
/* The five previews keep the same shape as each other, whatever the window
   width. A flat strip showed little more than a band across the middle of
   each photo; 16:9 keeps them clearly readable while leaving the big photo
   above the main event. Flatter than this and heads start to get cut off. */
.lp-thumb {
  position: relative; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 8px;
  overflow: hidden; background: var(--lp-line); cursor: pointer; transition: transform .2s, box-shadow .2s;
}
.lp-thumb:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22, 32, 31, .15); }
.lp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lp-thumb-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(20, 40, 42, .5);
  color: #fff; font-size: 14px; font-weight: 700; pointer-events: none;
}

/* ── Experience · Support · Sustain band ───────────────── */
.lp-pillars { width: 100%; }
.lp-pillars-inner { padding: 0; }
@media (min-width: 768px) { .lp-pillars-inner { padding: 28px 0 14px; } }

.lp-tags {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: #e0e9f0; border-bottom: 1px solid #e0e9f0;
}
@media (min-width: 768px) { .lp-tags { gap: 14px; background: transparent; border-bottom: 0; } }

.lp-tag {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 7px; padding: 15px 10px 16px; background: #f4f8fb;
}
@media (min-width: 768px) {
  .lp-tag { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 0; background: transparent; }
  .lp-tag + .lp-tag { border-left: 1px solid var(--lp-line); padding-left: 14px; }
}
.lp-tag-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  color: var(--lp-primary); line-height: 0;
}
@media (min-width: 768px) {
  .lp-tag-icon { width: 44px; height: 44px; border-radius: 12px; background: #eef3f8; }
}
.lp-tag-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lp-tag-title { font-family: var(--lp-head); font-size: 14px; font-weight: 700; color: var(--lp-primary); margin: 0 0 2px; }
.lp-tag-text { font-size: 12.5px; font-weight: 500; color: #525f66; line-height: 1.4; margin: 0; }
@media (min-width: 768px) {
  .lp-tag-title { font-size: 16px; }
  .lp-tag-text { font-size: 14px; font-weight: 400; }
}

/* ── The two columns ───────────────────────────────────── */
.lp-main { display: flex; flex-direction: column; gap: 0; padding: 0 12px; }
@media (min-width: 768px) { .lp-main { padding: 24px 0 0; } }
@media (min-width: 1024px) {
  .lp-main { display: grid; grid-template-columns: 1fr 372px; gap: 48px; padding: 0 0 56px; }
}
.lp-content { min-width: 0; order: 1; }
@media (min-width: 1024px) { .lp-content { order: 0; } }

/* ── Impact card ───────────────────────────────────────── */
.lp-impact {
  position: relative; overflow: hidden; border-radius: 15px; padding: 20px;
  color: #fff; background: linear-gradient(110deg, var(--lp-primary) 0%, #1e5a80 100%);
  margin: 18px 0 14px;
}
@media (min-width: 768px) {
  .lp-impact { border-radius: var(--lp-r-lg); padding: 28px 30px; margin: 0 0 38px; }
}
.lp-orb { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; }
.lp-orb-lg { right: -24px; top: -24px; width: 110px; height: 110px; }
.lp-orb-sm { display: none; }
@media (min-width: 768px) {
  .lp-orb-lg { right: -30px; top: -30px; width: 160px; height: 160px; }
  .lp-orb-sm { display: block; right: 36px; bottom: -50px; width: 120px; height: 120px; background: rgba(255, 255, 255, .05); }
}

.lp-impact-eyebrow {
  position: relative; margin: 0 0 7px; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; opacity: .82;
}
@media (min-width: 768px) { .lp-impact-eyebrow { letter-spacing: .12em; margin-bottom: 9px; } }

.lp-impact-headline {
  position: relative; margin: 0; font-family: var(--lp-head);
  font-size: 17px; font-weight: 600; line-height: 1.36; color: #fff;
}
@media (min-width: 768px) { .lp-impact-headline { font-size: 23px; line-height: 1.34; max-width: 640px; } }

.lp-stats { position: relative; display: flex; flex-wrap: nowrap; gap: 18px; margin-top: 16px; }
@media (min-width: 768px) { .lp-stats { gap: 30px; margin-top: 22px; } }
.lp-stat { min-width: 0; }
.lp-stat-divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .22); flex: none; }
.lp-stat-value {
  margin: 0; font-family: var(--lp-head); font-size: 18px; font-weight: 700; line-height: 1.1;
  display: inline-flex; align-items: center; gap: 4px;
}
@media (min-width: 768px) { .lp-stat-value { font-size: 23px; } }
.lp-stat-label { margin: 2px 0 0; font-size: 12px; opacity: .85; }
@media (min-width: 768px) { .lp-stat-label { font-size: 13px; } }
.lp-stat-label-sm { display: block; }
.lp-stat-label-lg { display: none; }
@media (min-width: 768px) {
  .lp-stat-label-sm { display: none; }
  .lp-stat-label-lg { display: block; }
}
.lp-star { color: var(--lp-accent); }
.lp-impact .lp-star, .lp-stat-value .lp-star { color: var(--lp-accent); }

/* ── Host teaser ───────────────────────────────────────── */
.lp-host-teaser {
  display: flex; gap: 13px; align-items: center;
  background: var(--lp-card); border: 1px solid #eadfd0; border-radius: 15px;
  padding: 15px 16px; margin: 0 0 26px;
}
@media (min-width: 768px) {
  .lp-host-teaser { gap: 16px; border-radius: 16px; padding: 18px 22px; margin: 0 0 38px; }
}
.lp-avatar { position: relative; flex: none; width: 58px; height: 58px; }
@media (min-width: 768px) { .lp-avatar { width: 72px; height: 72px; } }
.lp-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.lp-avatar-tick {
  position: absolute; right: -2px; bottom: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lp-primary); border: 2px solid #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 768px) {
  .lp-avatar-tick { width: 26px; height: 26px; border: 3px solid var(--lp-card); }
}
.lp-avatar-tick svg { width: 12px; height: 12px; }
.lp-teaser-body { flex: 1; min-width: 0; }
.lp-teaser-label { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--lp-muted); }
.lp-teaser-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 4px; }
@media (min-width: 768px) { .lp-teaser-name-row { gap: 9px; } }
.lp-teaser-name { font-family: var(--lp-head); font-size: 16px; font-weight: 700; color: var(--lp-text); }
@media (min-width: 768px) { .lp-teaser-name { font-size: 19px; } }
.lp-verified-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--lp-primary); }
@media (min-width: 768px) { .lp-verified-pill { gap: 4px; font-size: 12px; } }
.lp-verified-pill svg { width: 16px; height: 16px; flex: none; }
.lp-teaser-quote { margin: 0; font-size: 13px; color: var(--lp-mid); line-height: 1.5; }
@media (min-width: 768px) { .lp-teaser-quote { font-size: 15px; line-height: 1.55; } }

/* ── Highlights ────────────────────────────────────────── */
.lp-intro { margin: 0 0 15px; font-size: 14.5px; color: #555047; line-height: 1.55; }
@media (min-width: 768px) { .lp-intro { font-size: 16px; line-height: 1.6; margin-bottom: 20px; } }

.lp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (min-width: 768px) { .lp-cards { gap: 12px; } }
.lp-card { background: var(--lp-card); border: 1px solid #eadfd0; border-radius: 12px; padding: 14px; }
@media (min-width: 768px) { .lp-card { border-radius: var(--lp-r); padding: 20px; } }
.lp-card-icon {
  width: 32px; height: 32px; border-radius: 9px; background: #e3ecf3;
  display: flex; align-items: center; justify-content: center; margin-bottom: 9px;
}
@media (min-width: 768px) { .lp-card-icon { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 12px; } }
.lp-card-icon img { width: 22px; height: 22px; object-fit: contain; filter: contrast(1.12) saturate(1.1); }
@media (min-width: 768px) { .lp-card-icon img { width: 24px; height: 24px; } }
.lp-card-title { margin: 0 0 3px; font-family: var(--lp-head); font-size: 14.5px; font-weight: 600; color: var(--lp-text); }
@media (min-width: 768px) { .lp-card-title { font-size: 16px; margin-bottom: 4px; } }
.lp-card-text { margin: 0; font-size: 13px; color: #555047; line-height: 1.45; }
@media (min-width: 768px) { .lp-card-text { font-size: 14.5px; line-height: 1.5; } }

.lp-reassurance {
  display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px;
  padding: 16px; border-radius: 14px; background: #f4f8fb; border: 1px solid #d7e1ea;
  margin-top: 14px;
}
@media (min-width: 768px) {
  .lp-reassurance { gap: 14px 28px; padding: 20px 24px; border-radius: 16px; margin-top: 18px; }
}
.lp-reassurance p {
  display: flex; gap: 9px; align-items: flex-start; margin: 0;
  font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #27303a;
}
@media (min-width: 768px) { .lp-reassurance p { gap: 11px; align-items: center; font-size: 15px; line-height: 1.35; } }
.lp-tick { flex: none; color: var(--lp-primary); width: 16px; height: 16px; margin-top: 1px; }
@media (min-width: 768px) { .lp-tick { width: 19px; height: 19px; margin-top: 0; } }


/* ── The long description ──────────────────────────────── */
.lp-lead { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--lp-text); line-height: 1.5; }
@media (min-width: 768px) { .lp-lead { font-size: 18px; margin-bottom: 13px; } }
.lp-body { font-size: 15px; color: var(--lp-mid); line-height: 1.7; }
@media (min-width: 768px) { .lp-body { font-size: 16px; } }
.lp-body p { margin: 0 0 1em; }
.lp-body p:last-child { margin-bottom: 0; }

/* The preview paragraph is cut to six lines until "Show more". */
.lp-clamped { max-height: 10.2em; overflow: hidden; }

.lp-more {
  display: inline-block; margin-top: 10px; padding: 0; border: 0; background: none;
  font: inherit; font-family: var(--lp-body); font-size: 14.5px; font-weight: 600;
  color: var(--lp-primary); cursor: pointer;
}
.lp-more:hover { text-decoration: underline; }
@media (min-width: 768px) { .lp-more { font-size: 15px; margin-top: 13px; } }

.lp-expanded { margin-top: 10px; }
@media (min-width: 768px) { .lp-expanded { margin-top: 11px; } }

/* ── Video ─────────────────────────────────────────────── */
.lp-video {
  position: relative; min-height: 200px; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: var(--lp-deep);
}
@media (min-width: 768px) { .lp-video { min-height: 300px; border-radius: 16px; } }
.lp-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.lp-video-poster { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.lp-video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.72); }
.lp-play {
  position: absolute; inset: 0; margin: auto; width: 66px; height: 66px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--lp-deep); transition: transform .2s;
}
.lp-play svg { width: 30px; height: 30px; }
.lp-video-poster:hover .lp-play { transform: scale(1.06); }

/* ── Reviews ───────────────────────────────────────────── */
.lp-reviews-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px 12px; margin-bottom: 13px; }
@media (min-width: 768px) { .lp-reviews-head { margin-bottom: 18px; } }
.lp-reviews-head .lp-h2 { margin: 0; }
.lp-reviews-score { margin: 0; font-size: 15px; font-weight: 700; color: var(--lp-primary); }
@media (min-width: 768px) { .lp-reviews-score { font-size: 16px; } }
.lp-reviews-count { font-size: 14.5px; font-weight: 400; color: var(--lp-muted); }
@media (min-width: 768px) { .lp-reviews-count { font-size: 15px; } }

/* Swipeable on a phone, two columns from tablet up. */
.lp-reviews {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.lp-reviews::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .lp-reviews { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; overflow: visible; padding-bottom: 0; }
}
.lp-review {
  flex: 0 0 calc(100% - 32px); scroll-snap-align: start;
  display: flex; flex-direction: column; min-height: 100%;
  border: 1px solid var(--lp-line); border-radius: 13px; padding: 16px;
  background: #fff; transition: box-shadow .2s ease;
}
.lp-review:hover { box-shadow: 0 8px 24px rgba(22, 32, 31, .06); }
@media (min-width: 768px) { .lp-review { flex: unset; border-radius: 14px; padding: 20px; } }
.lp-review-stars { margin: 0 0 8px; color: var(--lp-primary); font-size: 13px; letter-spacing: 1px; }
@media (min-width: 768px) { .lp-review-stars { font-size: 14px; margin-bottom: 9px; } }
/* Shortened to 160 characters in trip.js, so no clamping needed here. */
.lp-review-quote { flex: 1; margin: 0 0 12px; font-size: 14.5px; color: var(--lp-dark); line-height: 1.6; }
@media (min-width: 768px) { .lp-review-quote { font-size: 15px; margin-bottom: 15px; } }
.lp-review-author { display: flex; align-items: center; gap: 9px; margin: 0; margin-top: auto; }
@media (min-width: 768px) { .lp-review-author { gap: 11px; } }
.lp-review-avatar {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: #ead9c4; color: #7a5f3c; font-size: 13px; font-weight: 700;
}
@media (min-width: 768px) { .lp-review-avatar { width: 34px; height: 34px; font-size: 14px; } }
.lp-review-name { display: block; font-size: 13px; font-weight: 700; color: var(--lp-text); }
@media (min-width: 768px) { .lp-review-name { font-size: 14px; } }
.lp-review-date { display: block; font-size: 12.5px; color: var(--lp-muted); }

/* ── The project & the host ────────────────────────────── */
.lp-host-card { border: 1px solid var(--lp-line); border-radius: 15px; overflow: hidden; background: #fff; }
@media (min-width: 768px) { .lp-host-card { border-radius: 18px; } }
.lp-host-content { padding: 18px; }
@media (min-width: 768px) { .lp-host-content { padding: 26px; } }
.lp-host-layout { display: block; }
@media (min-width: 768px) { .lp-host-layout { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; } }

.lp-host-profile { display: flex; gap: 13px; align-items: center; margin-bottom: 13px; }
@media (min-width: 768px) { .lp-host-profile { flex-direction: column; align-items: center; text-align: center; margin-bottom: 0; } }
.lp-host-avatar { width: 56px; height: 56px; }
@media (min-width: 768px) { .lp-host-avatar { width: 96px; height: 96px; margin-bottom: 11px; } }
.lp-host-avatar .lp-avatar-tick { width: 22px; height: 22px; }
@media (min-width: 768px) { .lp-host-avatar .lp-avatar-tick { width: 30px; height: 30px; border: 3px solid #fff; } }
.lp-host-name { margin: 0; font-size: 17px; font-weight: 700; }
@media (min-width: 768px) { .lp-host-name { font-size: 19px; } }
.lp-verified-inline { display: flex; align-items: center; gap: 4px; margin: 3px 0 0; font-size: 12.5px; font-weight: 700; color: var(--lp-primary); }
@media (min-width: 768px) { .lp-verified-inline { display: none; } }
.lp-verified-inline svg { width: 12px; height: 12px; flex: none; }
.lp-verified-badge { display: none; }
@media (min-width: 768px) {
  .lp-verified-badge {
    display: inline-flex; align-items: center; gap: 7px; background: #eef3f8; color: var(--lp-primary);
    padding: 6px 13px; border-radius: 100px; font-size: 13px; font-weight: 700; margin-bottom: 13px;
  }
  .lp-verified-badge svg { width: 14px; height: 14px; flex: none; }
}
.lp-host-quote { margin: 0; font-size: 14.5px; color: var(--lp-dark); line-height: 1.6; }
@media (min-width: 768px) { .lp-host-quote { font-size: 16px; line-height: 1.65; font-style: italic; margin-bottom: 13px; } }
/* Who the guide is, in their own words from the project profile. Short
   enough to earn its place on a phone, unlike the project write-up. */
.lp-host-about { margin: 0 0 13px; font-size: 14.5px; color: var(--lp-dark); line-height: 1.6; }
@media (min-width: 768px) { .lp-host-about { font-size: 15.5px; } }

/* The project write-up is a desktop thing; its "Read more" goes with it. */
.lp-project-text { display: none; font-size: 14.5px; color: #555047; line-height: 1.6; }
#lp-project-more { display: none; }
@media (min-width: 768px) {
  .lp-project-text { display: block; }
  #lp-project-more { display: inline-block; }
}
.lp-project-text p { margin: 0 0 1em; }
.lp-project-text p:last-child { margin-bottom: 0; }

.lp-host-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
@media (min-width: 768px) { .lp-host-stats { gap: 28px; margin-top: 18px; } }
.lp-host-stats .lp-stat-value { font-size: 15px; color: var(--lp-text); }
@media (min-width: 768px) { .lp-host-stats .lp-stat-value { font-size: 18px; } }
.lp-host-stats .lp-stat-label { font-size: 12.5px; color: var(--lp-muted); opacity: 1; }
@media (min-width: 768px) { .lp-host-stats .lp-stat-label { font-size: 13px; } }

/* ── Map ───────────────────────────────────────────────── */
.lp-map { height: 150px; border-radius: 13px; overflow: hidden; margin-bottom: 11px; background: #eee; position: relative; }
@media (min-width: 768px) { .lp-map { height: 210px; border-radius: var(--lp-r); margin-bottom: 14px; } }
.lp-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.lp-arrival { margin: 0; font-size: 14.5px; color: var(--lp-mid); line-height: 1.65; white-space: pre-line; }
@media (min-width: 768px) { .lp-arrival { font-size: 16px; line-height: 1.7; } }
.lp-inline-more {
  display: inline; padding: 0; border: 0; background: none; font: inherit;
  color: var(--lp-primary); font-weight: 600; cursor: pointer;
}
.lp-inline-more:hover { text-decoration: underline; }

/* ── Onsite tabs ───────────────────────────────────────── */
.lp-tabbar { display: flex; width: 100%; border-bottom: 1px solid var(--lp-line); margin-bottom: 14px; }
@media (min-width: 768px) { .lp-tabbar { gap: 6px; margin-bottom: 18px; } }
.lp-tab {
  flex: 1 1 0; min-width: 0; text-align: center; padding: 9px 6px;
  border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: inherit; font-family: var(--lp-body); font-size: 13.5px; font-weight: 500;
  color: var(--lp-muted); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 768px) { .lp-tab { flex: none; text-align: left; padding: 11px 20px; font-size: 16px; } }
.lp-tab.is-active { font-weight: 700; color: var(--lp-primary); border-bottom-color: var(--lp-primary); }
.lp-tabpanel { min-height: 48px; font-size: 14.5px; color: var(--lp-mid); line-height: 1.65; }
@media (min-width: 768px) { .lp-tabpanel { font-size: 15px; } }
.lp-tabpanel p { margin: 0 0 1em; }
.lp-tabpanel p:last-child { margin-bottom: 0; }

.lp-pills { display: flex; gap: 9px; flex-wrap: wrap; }
@media (min-width: 768px) { .lp-pills { gap: 12px; } }
.lp-pill {
  display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--lp-dark);
  background: var(--lp-card); border: 1px solid #eadfd0; border-radius: 10px; padding: 10px 14px;
}
@media (min-width: 768px) { .lp-pill { gap: 8px; font-size: 15px; border-radius: 12px; padding: 12px 18px; } }
.lp-pill svg { width: 18px; height: 18px; flex: none; color: var(--lp-primary); }

/* ── FAQ ───────────────────────────────────────────────── */
.lp-faq { border-top: 1px solid var(--lp-line); }
.lp-faq-item { border-bottom: 1px solid var(--lp-line); }
.lp-faq-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-family: var(--lp-body); font-size: 14.5px; font-weight: 500; color: var(--lp-text);
}
@media (min-width: 768px) { .lp-faq-btn { padding: 17px 2px; font-size: 16px; } }
.lp-faq-btn:hover { color: var(--lp-primary); }
.lp-faq-icon { flex: none; width: 20px; height: 20px; color: var(--lp-primary); transition: transform .25s ease; }
@media (min-width: 768px) { .lp-faq-icon { width: 22px; height: 22px; } }
.lp-faq-btn[aria-expanded="true"] .lp-faq-icon { transform: rotate(45deg); }
.lp-faq-answer { padding: 0 0 14px; font-size: 14px; color: var(--lp-mid); line-height: 1.65; animation: lpFadeIn .25s ease; }
@media (min-width: 768px) { .lp-faq-answer { padding: 0 2px 17px; font-size: 15px; line-height: 1.7; } }
.lp-faq-answer p { margin: 0 0 1em; }
.lp-faq-answer p:last-child { margin-bottom: 0; }
@keyframes lpFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── Good to know ──────────────────────────────────────── */
.lp-gtk { border: 1px solid var(--lp-line); border-radius: 13px; overflow: hidden; background: #fff; }
@media (min-width: 768px) { .lp-gtk { border-radius: 14px; } }
.lp-gtk-item { border-top: 1px solid #ece7dd; }
.lp-gtk-item:first-child { border-top: 0; }
.lp-gtk-btn {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 14px 15px;
  border: 0; background: none; cursor: pointer; text-align: left; font: inherit;
}
@media (min-width: 768px) { .lp-gtk-btn { gap: 13px; padding: 18px 20px; } }
.lp-gtk-icon { flex: none; width: 20px; height: 20px; color: var(--lp-primary); display: flex; align-items: center; justify-content: center; }
.lp-gtk-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--lp-text); }
@media (min-width: 768px) { .lp-gtk-title { font-size: 16px; } }
.lp-chevron { flex: none; width: 20px; height: 20px; color: #9baab5; transition: transform .25s ease; }
.lp-gtk-btn[aria-expanded="true"] .lp-chevron { transform: rotate(180deg); }
.lp-gtk-panel { padding: 0 15px 14px; }
@media (min-width: 768px) { .lp-gtk-panel { padding: 0 20px 18px 53px; } }

.lp-cancel { display: grid; grid-template-columns: 1fr; gap: 0; font-size: 14px; color: var(--lp-dark); }
@media (min-width: 768px) { .lp-cancel { grid-template-columns: 1fr 1fr; gap: 10px 28px; font-size: 15px; } }
.lp-cancel-row { display: flex; justify-content: space-between; border-bottom: 1px dashed #e0dccf; padding: 8px 0; }
.lp-cancel-free { color: var(--lp-primary); }
.lp-legal-note { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid #ece7dd; font-size: 13.5px; color: #5a6a70; line-height: 1.55; }
.lp-agb-note { margin: 10px 0 0; font-size: 13.5px; color: var(--lp-mid); line-height: 1.55; }
.lp-gtk-text { margin: 0; font-size: 14px; color: var(--lp-mid); line-height: 1.6; }
@media (min-width: 768px) { .lp-gtk-text { font-size: 15px; } }
.lp-link { color: var(--lp-primary); text-decoration: none; }
.lp-link:hover { text-decoration: underline; }

/* ── Booking column ────────────────────────────────────── */
/* Below 1024 px this becomes the bar pinned to the bottom of the screen. */
.lp-booking { min-width: 0; order: 2; width: 100%; margin: 0; padding: 0; }
@media (max-width: 1023px) {
  .lp-booking { position: fixed; inset: auto 0 0 0; width: 100%; z-index: 20; pointer-events: none; }
  .lp-booking > * { pointer-events: auto; }
}
@media (min-width: 1024px) {
  .lp-booking { order: 0; width: auto; position: sticky; top: 88px; align-self: start; z-index: 5; }
}

.lp-booking-card { display: none; }
@media (min-width: 1024px) {
  .lp-booking-card {
    display: block; background: #fff; border-radius: var(--lp-r-lg); padding: 24px;
    box-shadow: 0 12px 36px rgba(40, 40, 35, .09); margin-bottom: 12px;
  }
}
.lp-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 3px; }
.lp-price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; margin: 0; }
.lp-price-amount { font-family: var(--lp-head); font-size: 28px; font-weight: 700; color: var(--lp-text); line-height: 1.1; }
.lp-per { font-size: 15px; color: var(--lp-muted); }
.lp-rating-badge { font-size: 14px; font-weight: 700; color: var(--lp-primary); white-space: nowrap; }
.lp-rating-count { color: var(--lp-muted); font-weight: 500; margin-left: 2px; }
.lp-duration { margin: 0 0 14px; font-size: 14px; color: var(--lp-muted); }

.lp-form { display: block; }
.lp-fields {
  border: 1px solid var(--lp-line-2); border-radius: 12px; margin: 8px 0 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lp-fields:focus-within { border-color: var(--lp-primary); box-shadow: 0 0 0 1px var(--lp-primary); }
.lp-dates { display: grid; grid-template-columns: 1fr 1fr; }
.lp-field { display: block; padding: 12px 15px; min-width: 0; }
.lp-field + .lp-field { border-left: 1px solid var(--lp-line-2); }
.lp-row { position: relative; border-top: 1px solid var(--lp-line-2); padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.lp-row:hover { background: rgba(20, 62, 92, .03); }
.lp-row:last-child { border-radius: 0 0 11px 11px; }
.lp-field-label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #8a847a; line-height: 1; margin-bottom: 3px;
}
.lp-field input {
  width: 100%; border: 0; background: none; padding: 0; font: inherit;
  font-size: 15px; color: var(--lp-text); line-height: 1.3;
}
.lp-field input:focus { outline: none; }
/* Safari on iPhone and iPad zooms into any field smaller than 16px when it
   is tapped. Mice keep the 15px of the original design. */
@media (pointer: coarse) { .lp-field input, .lp-row-value { font-size: 16px; } }
.lp-row-value { font-size: 15px; color: var(--lp-text); line-height: 1.3; }
.lp-row-arrow { color: #8a847a; font-size: 14px; flex: none; }
.lp-row select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; font: inherit; }

.lp-reserve {
  width: 100%; margin-top: 12px; padding: 16px; border: 0; border-radius: 12px;
  background: var(--lp-accent); color: #fff; cursor: pointer;
  font: inherit; font-family: var(--lp-body); font-size: 17px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(204, 121, 57, .34); transition: background .15s ease, box-shadow .15s ease;
}
.lp-reserve:hover { background: #a8622c; box-shadow: 0 8px 22px rgba(204, 121, 57, .44); }

.lp-trust { display: none; margin: 14px 0 0; }
@media (min-width: 1024px) { .lp-trust { display: flex; flex-direction: column; gap: 9px; } }
.lp-trust li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--lp-mid); line-height: 1.4; }
/* A button, not a link: it scrolls to the cancellation table below. */
.lp-policy {
  display: none; align-items: center; gap: 8px; margin: 0; padding: 14px 0 0;
  width: 100%; border: 0; border-top: 1px solid #ece7dd; background: none;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--lp-primary);
  text-align: left; cursor: pointer;
}
.lp-policy:hover span { text-decoration: underline; }
@media (min-width: 1024px) { .lp-policy { display: flex; } }
.lp-policy svg { width: 17px; height: 17px; flex: none; }

.lp-contact-card, .lp-trustbox { display: none; }
@media (min-width: 1024px) {
  .lp-contact-card {
    display: block; border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg);
    padding: 20px; margin-bottom: 12px; background: #fff;
  }
  .lp-trustbox {
    display: block; background: #eef3f8; border: 1px solid #d7e1ea;
    border-radius: var(--lp-r-lg); padding: 22px;
  }
}
.lp-contact-head { display: flex; gap: 14px; align-items: center; margin-bottom: 15px; }
.lp-contact-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center top; }
.lp-contact-title { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--lp-text); }
.lp-contact-sub { margin: 0; font-size: 13.5px; color: var(--lp-muted); }
.lp-contact-actions { display: flex; flex-direction: column; gap: 8px; }
.lp-contact-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 11px 14px; border: 1px solid #d7e1ea; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--lp-primary); text-decoration: none;
  background: #f5f9fc; white-space: nowrap; transition: background .15s ease;
}
.lp-contact-btn:hover { background: #eaf1f8; }
.lp-contact-btn svg { width: 18px; height: 18px; flex: none; }
.lp-contact-full { justify-content: flex-start; }
.lp-contact-row { display: flex; gap: 8px; }
.lp-contact-row .lp-contact-btn { flex: 1; min-width: 0; }

.lp-trustbox-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-family: var(--lp-head); font-size: 16px; font-weight: 700; color: var(--lp-primary);
}
.lp-trustbox-title svg { width: 20px; height: 20px; flex: none; }
.lp-trustq { padding-bottom: 13px; border-bottom: 1px solid #d8e3ec; margin-bottom: 13px; }
.lp-trustq-last { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
.lp-trustq-title { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: var(--lp-text); }
.lp-trustq-text { margin: 0; font-size: 14px; color: var(--lp-mid); line-height: 1.55; }
.lp-trustq-text strong { color: var(--lp-text); font-weight: 700; }

/* Phone-only bar at the bottom of the screen */
.lp-sticky {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid var(--lp-line);
  box-shadow: 0 -6px 22px rgba(40, 40, 35, .08);
}
@media (min-width: 1024px) { .lp-sticky { display: none; } }
.lp-sticky-trust { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--lp-primary); line-height: 1.3; }
.lp-sticky-trust svg { flex: none; width: 13px; height: 13px; }
.lp-sticky-row { display: flex; align-items: center; gap: 11px; width: 100%; }
.lp-sticky-price { flex: none; display: flex; flex-direction: column; gap: 2px; margin: 0; white-space: nowrap; }
.lp-sticky-amount { font-family: var(--lp-head); font-size: 19px; font-weight: 700; color: var(--lp-text); line-height: 1.2; }
.lp-sticky-per { font-size: 12px; font-weight: 500; color: var(--lp-muted); line-height: 1.2; }
.lp-sticky-phone {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 12px; background: #f4f8fb;
  border: 1px solid #d7e1ea; color: var(--lp-primary); text-decoration: none;
}
.lp-sticky-phone svg { width: 22px; height: 22px; }
.lp-sticky-btn { flex: 1; min-width: 0; margin: 0; padding: 15px 20px; border-radius: 11px; font-size: 16px; box-shadow: 0 4px 14px rgba(204, 121, 57, .32); }

/* The bar sits over the footer, so leave room underneath. */
@media (max-width: 1023px) { .listing .site-footer { padding-bottom: 100px; } }

/* ── Awards strip + help card ──────────────────────────── */
/* Both bands run the full width, but what is inside them is an .lp-wrap —
   the same column as the photos and the text above — so the left and right
   edges line up with the rest of the page at every screen width. */
.lp-help { width: 100%; }
.lp-trustbar { background: var(--lp-card); border-top: 1px solid #eadfd0; padding: 22px 0; }
/* On a phone the text column above has a further 12 px inside its .lp-wrap
   (.lp-main), so these two take the same step in. */
@media (max-width: 767px) {
  .lp-trustbar-inner, .lp-help-card { width: calc(91vw - 24px); }
}
.lp-trustbar-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  font-size: 13px; color: var(--lp-dark);
}
@media (min-width: 768px) { .lp-trustbar-inner { gap: 16px; font-size: 15px; } }
.lp-trustbar-label {
  width: 100%; margin-bottom: 2px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #8a847a;
}
@media (min-width: 768px) { .lp-trustbar-label { width: auto; margin-bottom: 0; letter-spacing: .14em; } }
.lp-trustbar-sep { display: none; color: #d8d2c8; }
@media (min-width: 768px) { .lp-trustbar-sep { display: inline; } }
.lp-trustbar-dot { color: #d8d2c8; }
.lp-trustbar-item { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.lp-trustpilot { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1; }
.lp-trustpilot img { height: 26px; width: auto; display: block; }
.lp-trustpilot span { font-size: 13.5px; font-weight: 600; color: #1a1a1a; }
.lp-trustbar-award { height: 44px; width: auto; display: block; }
.lp-trustbar-awardtext { display: none; color: #1a1a1a; font-weight: 600; }
@media (min-width: 768px) { .lp-trustbar-awardtext { display: inline; } }
.lp-trustbar-media { display: inline-flex; align-items: center; gap: 10px; }
/* The ZDF and National Geographic files are white-on-transparent, made for
   a dark backdrop. invert() turns them dark for this cream strip — without
   it they are there but invisible. Same trick as the press row on the
   landing page. */
.lp-trustbar-media img { height: 30px; width: auto; display: block; filter: invert(1); }
/* National Geographic writes its name in small letters beside the frame,
   so its file needs more height to read at the same size as ZDF. */
.lp-trustbar-media .lp-natgeo { height: 52px; }

.lp-help-section { border-top: 1px solid var(--lp-line); padding: 26px 0 34px; }
@media (min-width: 768px) { .lp-help-section { padding: 34px 0; } }
.lp-help-card {
  background: var(--lp-card);
  border: 1px solid #eadfd0; border-radius: 15px; padding: 18px;
}
@media (min-width: 768px) {
  .lp-help-card {
    background: transparent; border: 0; border-radius: 0; padding: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
  }
}
.lp-help-intro { display: flex; gap: 13px; align-items: center; margin-bottom: 14px; }
@media (min-width: 768px) { .lp-help-intro { gap: 16px; margin-bottom: 0; } }
.lp-help-intro .lp-contact-avatar { width: 46px; height: 46px; }
@media (min-width: 768px) { .lp-help-intro .lp-contact-avatar { width: 54px; height: 54px; } }
.lp-help-card .lp-contact-title { font-family: var(--lp-head); }
@media (min-width: 768px) {
  .lp-help-card .lp-contact-title { font-size: 19px; }
  .lp-help-card .lp-contact-sub { font-size: 14.5px; }
}
.lp-help-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 768px) { .lp-help-actions { display: flex; flex: none; align-items: stretch; flex-wrap: nowrap; gap: 10px; } }
.lp-help-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 14px; border: 1px solid #d7e1ea; border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--lp-primary);
  text-decoration: none; background: #f5f9fc; white-space: nowrap; cursor: pointer;
  transition: background .15s ease;
}
.lp-help-btn:hover { background: #eaf1f8; }
.lp-help-btn svg { width: 18px; height: 18px; flex: none; }
.lp-help-btn:first-child { grid-column: 1 / -1; }
@media (min-width: 768px) { .lp-help-btn { padding: 12px 20px; border-radius: 11px; font-size: 15px; } }


/* ── White card modals (all reviews, the project write-up) ── */
.lp-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .7); padding: 16px;
}
.lp-modal-card {
  position: relative; display: flex; flex-direction: column;
  width: 90%; max-width: 700px; max-height: 90vh;
  background: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
  padding: 1.5em 25px 2em 35px;
}
@media (min-width: 768px) { .lp-modal-card { width: 80%; padding: 2em 35px 3em 35px; } }
.lp-modal-card-wide { max-width: 800px; max-height: 83vh; }

/* The enquiry window has no header above its form, so a scrollbar inside
   the body would run right under the ✕. The body reaches the card edge
   instead and carries the inset itself, which puts the bar beside the ✕
   rather than beneath it. */
#lp-enquiry-modal .lp-modal-card { padding-right: 0; }
#lp-enquiry-modal .lp-modal-body { padding-right: 25px; }
#lp-enquiry-modal .lp-modal-x { right: 20px; }
@media (min-width: 768px) {
  #lp-enquiry-modal .lp-modal-body { padding-right: 35px; }
}

.lp-modal-body { overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; padding-right: 4px; }
.lp-modal-title { margin: 0 0 .6em; font-size: 21px; font-weight: 600; }
.listing #main .lp-modal-title { color: var(--lp-primary); }
.lp-modal-text { font-size: 15px; color: var(--lp-mid); line-height: 1.6; }
.lp-modal-text p { margin: 0 0 1em; }
.lp-modal-text p:last-child { margin-bottom: 0; }

/* The reviews modal has a bare ✕; the project one says "Close ✕". */
.lp-modal-x {
  position: absolute; top: 1em; right: 1em; z-index: 10;
  border: 0; background: transparent; color: #666; cursor: pointer;
  padding: 0; line-height: 0; transition: transform .2s ease;
}
.lp-modal-x svg { width: 24px; height: 24px; }
.lp-modal-x:hover { transform: translateY(-2px); }

/* ── Fixed dates and the no-obligation enquiry ─────────── */
/* The dropdown takes the place of the two calendar fields, so it is the
   first row of the box and needs no line above it. */
.lp-row-date { border-top: 0; }

/* The enquiry window. One column on a phone; date and travellers, and
   name and email, side by side once there is room. Every field is 16 px,
   so Safari on an iPhone does not zoom in when it is tapped. */
/* A form needs every pixel on a phone, so the card takes the full width. */
.lp-enq-card { width: 100%; max-width: 560px; padding: 1.5em 20px 1.75em; }
@media (min-width: 768px) { .lp-enq-card { padding: 2em 32px 2.25em; } }
.lp-enq-card .lp-modal-title { padding-right: 36px; }
.lp-enq-trip { margin: -.35em 0 1.1em; font-size: 14px; color: var(--lp-muted); line-height: 1.4; }
.lp-enq-form { display: flex; flex-direction: column; gap: 12px; }
.lp-enq-two { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .lp-enq-two { grid-template-columns: 1fr 1fr; } }
.lp-enq-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lp-enq-fld > span {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #8a847a;
}
.lp-enq-fld input, .lp-enq-fld select, .lp-enq-fld textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--lp-text);
  padding: 11px 12px; border: 1px solid var(--lp-line-2); border-radius: 10px; background: #fff;
}
.lp-enq-fld textarea { resize: vertical; min-height: 84px; }
.lp-enq-fld input:focus, .lp-enq-fld select:focus, .lp-enq-fld textarea:focus {
  outline: none; border-color: var(--lp-primary); box-shadow: 0 0 0 1px var(--lp-primary);
}
.lp-enq-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--lp-mid); line-height: 1.45; cursor: pointer; }
.lp-enq-check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--lp-primary); }
.lp-enq-check a { color: var(--lp-primary); }
.lp-enq-hint { display: block; font-size: 13px; color: var(--lp-muted); }
.lp-enq-form .lp-reserve { margin-top: 4px; }
.lp-enq-err { margin: 0; font-size: 14px; color: #b3261e; }
.lp-enq-done { padding: 4px 0; }
.lp-enq-done p { margin: 0 0 .3em; font-size: 15px; color: var(--lp-mid); }
.listing #main .lp-enq-done-title { font-size: 18px; font-weight: 700; color: var(--lp-primary); }

/* Phone and WhatsApp, right under the heading — anyone who would rather
   talk than fill in a form sees it before the first field. */
.lp-enq-direct {
  margin: 0 0 18px; padding: 12px 14px; border-radius: 12px;
  background: #f5f9fc; border: 1px solid #d7e1ea;
}
.lp-enq-direct-title { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--lp-text); }
/* Stacked on a phone — the phone number does not fit half the width. */
.lp-enq-direct-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 600px) { .lp-enq-direct-row { grid-template-columns: 1fr 1fr; } }
.lp-enq-direct-row .lp-help-btn { grid-column: auto; min-width: 0; background: #fff; min-height: 42px; padding: 9px 10px; }

/* "Close ✕" inside a white card, rather than over the whole screen. */
.lp-card-close {
  position: absolute; top: 1em; right: 1em; z-index: 10;
  display: flex; align-items: center; gap: 6px;
  border: 0; background: transparent; color: #666; cursor: pointer;
  font: inherit; font-family: var(--lp-body); font-size: 16px;
  transition: transform .2s ease;
}
.lp-card-close:hover { transform: translateY(-2px); }
.lp-card-close svg { width: 24px; height: 24px; }

/* Newest, best rated or most detailed — the order of the list below.
   Sits clear of the ✕ in the corner. */
.lp-reviews-sort {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6em;
  margin: 0 0 1.2em; padding-right: 2.5em;
  font-size: 15px; color: var(--lp-mid);
}
.lp-reviews-sort select {
  font: inherit; color: var(--lp-text); background: #fff; cursor: pointer;
  border: 1px solid var(--lp-line-2); border-radius: 8px; padding: .45em .7em;
}

/* One review in the modal: who on the left, what they wrote on the right. */
.lp-modal-review { display: flex; flex-direction: column; width: 100%; margin-bottom: 1em; }
@media (min-width: 1024px) { .lp-modal-review { flex-direction: row; align-items: flex-start; } }
.lp-modal-review-who { display: flex; align-items: center; gap: 1em; margin-right: .5em; }
@media (min-width: 1024px) {
  /* Stacked: the name and the stars sit centred under the round photo. */
  .lp-modal-review-who { flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 8vw; min-width: 96px; margin: 16px .5em .5em 0; }
  .lp-modal-review-rating { justify-content: center; }
}
.lp-modal-review-avatar {
  width: 50px; height: 50px; flex: none; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--lp-primary); background: #ead9c4;
}
.lp-modal-review-name { margin: 4px 0 0; font-weight: 700; color: var(--lp-text); }
.lp-modal-review-rating { display: flex; align-items: center; gap: 4px; margin: 4px 0 0; font-size: 14px; color: var(--lp-text); }
.lp-modal-review-body { flex: 1; min-width: 0; }
.lp-modal-review-text { margin: 0; font-size: 15px; color: var(--lp-mid); line-height: 30px; }
.lp-modal-review-text.is-clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.lp-modal-review-more {
  display: inline-flex; align-items: center; gap: .5em; margin-top: 2px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--lp-mid);
}
.lp-modal-review-more span:first-child { text-decoration: underline; }

/* ── All the photos, as a grid ─────────────────────────── */
.lp-lightbox {
  position: fixed; inset: 0; z-index: 2000; overflow-y: auto;
  background: rgba(1, 1, 1, .92); padding: 72px 16px 40px;
}
.lp-lightbox-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 5px; max-width: 1080px; margin-inline: auto;
}
.lp-lightbox-grid button { padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.lp-lightbox-grid img { width: 100%; display: block; border-radius: 4px; }

/* The white "Close ✕" both overlays share */
.lp-modal-close {
  position: fixed; top: 1em; right: 1em; z-index: 100;
  display: flex; align-items: center; gap: 6px;
  border: 0; background: transparent; color: #fff; cursor: pointer;
  font: inherit; font-family: var(--lp-body); font-size: 16px;
  transition: transform .2s ease;
}
.lp-modal-close:hover { transform: translateY(-2px); }
.lp-modal-close:active { transform: translateY(1px); }
.lp-modal-close svg { width: 24px; height: 24px; }
@media (min-width: 768px) { .lp-modal-close svg { width: 32px; height: 32px; } }

/* ── One photo at a time ───────────────────────────────── */
.lp-slider {
  position: fixed; inset: 0; z-index: 2001; background: rgba(1, 1, 1, .92);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
@media (min-width: 768px) { .lp-slider { padding: 60px 10vw; } }

.lp-slider-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; touch-action: pan-y; user-select: none;
}
.lp-slider-img {
  width: 100%; height: 100%; max-width: 100vw; max-height: 100vh;
  object-fit: contain; object-position: center;
}

.lp-slider-index {
  position: absolute; top: 21px; left: 20px; z-index: 2; margin: 0; color: #fff; font-size: 16px;
}
@media (max-width: 767px) {
  .lp-slider-index { top: auto; bottom: 20px; left: 50%; transform: translateX(-50%); }
}

.lp-slider-prev, .lp-slider-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .7); cursor: pointer; transition: background-color .2s;
}
.lp-slider-prev:hover, .lp-slider-next:hover { background: rgba(255, 255, 255, .9); }
.lp-slider-prev { left: 16px; }
.lp-slider-next { right: 16px; }
.lp-slider-prev::before, .lp-slider-next::before {
  content: ""; display: inline-block; padding: 4px;
  border: solid #333; border-width: 0 2px 2px 0;
}
.lp-slider-prev::before { transform: rotate(135deg); }
.lp-slider-next::before { transform: rotate(-45deg); }
@media (max-width: 767px) {
  .lp-slider-prev, .lp-slider-next { width: 32px; height: 32px; background: rgba(255, 255, 255, .5); }
}

/* ══ Motion ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ══ Windows (write to us / personal offer) ══════════════
   Two separate looks, because the live site has two: the contact
   window is cream with soft borders, the offer window is white with
   navy outlines. Sizes and colours are taken from the live pages. */
.ov {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 20px;
  background: rgba(8, 24, 38, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  overflow-y: auto;
}
.ov[hidden] { display: none; }

.ov-box {
  position: relative; width: 100%; max-height: calc(100vh - 40px);
  overflow-y: auto; background: #fff;
  /* The scrollbar gets a lane of its own, so it never sits on the
     fields or on the ✕ in the corner. */
  scrollbar-gutter: stable;
}
.ov-x { right: 22px; }
.ov-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: #26221c;
  display: grid; place-items: center; cursor: pointer;
}
.ov-x:hover { background: #f0ede6; }
.ov-x svg { width: 18px; height: 18px; }

/* What a contact window says once the request is on its way. */
.ov-done { text-align: center; padding: 10px 0 6px; }
.ov-done[hidden], .ov-err[hidden] { display: none; }
.ov-done-title { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--heading); margin: 0 0 6px; }
.ov-done p:last-child { color: var(--muted); margin: 0; }
.ov-err {
  margin-top: 12px; padding: 10px 14px; border-radius: 12px;
  background: #fdeceb; color: #c0392b; font-size: 14px;
}
.ov-err p { margin: 0; }

.fld { display: block; margin-bottom: 14px; }
.fld > span, .radios legend { display: block; margin-bottom: 6px; }
.fld input, .fld textarea {
  width: 100%; font: inherit; font-size: 1rem; background: #fff;
}
.fld textarea { resize: vertical; min-height: 96px; }
.fld input:focus, .fld textarea:focus { outline: 2px solid var(--terra); outline-offset: 1px; }

.consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; font-size: .8125rem; line-height: 1.45; color: #6b6459; }
.consent input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--navy); }
.consent a { color: var(--navy); }

/* ── Write to us ──────────────────────────────────────── */
#write-ov .ov-box { max-width: 480px; border-radius: 24px; background: var(--cream); padding: 26px; }
#write-ov .ov-h { font-size: 1.5rem; margin: 0 0 6px; }
#write-ov .ov-sub { color: #6b6459; font-size: .9375rem; margin: 0 0 20px; }
#write-ov .fld > span { color: #4a453c; font-size: .875rem; font-weight: 600; }
#write-ov .fld input, #write-ov .fld textarea {
  border: 1px solid #ddd8cc; border-radius: 12px; padding: 12px 14px;
}
#write-ov .fld input { height: 48px; }

/* ── The two footer windows: gift card, offer an expedition ──
   Same shape as "Write to us"; site-chrome.js builds the markup. */
.ov-box-form { max-width: 520px; border-radius: 24px; background: var(--cream); padding: 26px; }
.ov-box-form .ov-h { font-size: 1.5rem; margin: 0 0 6px; }
.ov-box-form .ov-sub { color: #6b6459; font-size: .9375rem; margin: 0 0 20px; }
.ov-box-form .fld > span { color: #4a453c; font-size: .875rem; font-weight: 600; }
.ov-box-form .fld input, .ov-box-form .fld textarea {
  border: 1px solid #ddd8cc; border-radius: 12px; padding: 12px 14px;
}
.ov-box-form .fld input { height: 48px; }

/* ── Personal offer ───────────────────────────────────── */
#offer-ov .ov-box { max-width: 576px; border-radius: 15px; padding: 26px; }
#offer-ov .fld > span, #offer-ov .radios legend {
  color: var(--navy); font-size: 1.0625rem; font-weight: 800;
}
#offer-ov .fld input {
  height: 40px; border: 1px solid var(--navy); border-radius: 10px; padding: 7px 16px;
}
#offer-ov .radios { border: 0; padding: 0; margin: 0 0 14px; }
.radio { display: inline-flex; align-items: center; gap: 7px; margin-right: 22px; font-size: .9375rem; }
.radio input { width: 17px; height: 17px; accent-color: var(--navy); }
#offer-ov .fld-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
#offer-ov button[type="submit"] { border-radius: 10px; padding: 10px 30px; }

/* One column once the pair no longer fits side by side. */
@media (max-width: 520px) {
  #offer-ov .fld-two { grid-template-columns: 1fr; }
  .ov { padding: 12px; }
  #write-ov .ov-box, #offer-ov .ov-box, .ov-box-form { padding: 20px; }
}