/* GENERATED FILE -- do not edit directly.
   Built from: variables.css, base.css, components.css, sections.css (in this order), by scripts/build-css-bundle.py.
   Edit the source files above, then rerun this script and bump the
   bundle.css?v= query string in every HTML page. */

/* ===== variables.css ===== */
:root {
  /* Neutrals, ported verbatim from the Dalt Vila Ibiza design system
     (D:\AntigravityDaltVilaIbiza.com\assets\css\variables.css) per
     docs/rotterdam-redesign-strategy.md section 2.1. */
  --ink: #16313f;
  --ink2: #264a5b;
  --stone: #456978;
  --mist: #9fb2bb;
  --sand: #ece5da;
  --paper: #fbfaf8;
  --line: rgba(22, 49, 63, 0.14);

  /* Accent: the one permitted deviation from Ibiza (gold -> Rotterdam red),
     regenerated at matching lightness steps, contrast-verified against
     WCAG 2.2 AA. See strategy doc section 3 for the computation. */
  --accent-300: #dd705f; /* decorative / large-text only, never body text */
  --accent-500: #d44a35; /* base, badges, large-text CTAs only */
  --accent-600: #b93b27; /* default for any text-bearing surface, 5.66:1 on white */
  --accent-700: #973020; /* hover/active on accent-600 */

  --font-serif: 'Marcellus', serif;
  --font-italic: 'Cormorant Garamond', serif;
  --font-sans: 'Jost', system-ui, sans-serif;

  --nav-height: 72px;

  /* Radius scale, ported from Ibiza (docs section 2.4) */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-3xl: 12px;
  --radius-pill: 999px;

  /* Shadow scale, ported from Ibiza */
  --shadow-sm: 0 4px 16px rgba(22, 49, 63, 0.12);
  --shadow-md: 0 8px 30px rgba(22, 49, 63, 0.14);
  --shadow-lg: 0 12px 40px rgba(22, 49, 63, 0.16);
  --shadow-xl: 0 16px 48px rgba(22, 49, 63, 0.16), 0 2px 8px rgba(22, 49, 63, 0.06);
  --shadow-2xl: 0 24px 70px rgba(22, 49, 63, 0.22);
  --shadow-drawer: -12px 0 60px rgba(22, 49, 63, 0.18);

  /* z-index scale, ported from Ibiza (docs section 2.4) */
  --z-back-top: 90;
  --z-header: 120;
  --z-lang-pill: 121;
  --z-dock: 122;
  --z-cookie-bar: 160;
  --z-lightbox: 180;
  --z-skip-link: 200;
}

/* ===== base.css ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}

/* CRITICAL: never overflow-x:hidden/clip on html or body. It breaks
   position:fixed on Chrome Android and iOS Safari (fixed elements collapse
   to 0x0). Scope it to main only. See CLAUDE.md "Mobiele websites". */
main {
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  margin: 0;
  line-height: 1.1;
}

p {
  margin: 0;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: var(--z-skip-link);
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== components.css ===== */
/* =============================================================
   Third-party Voute global ticker widget (voute-ticker.js, loaded
   from voutedigital.com, shared across the Voute Digital portfolio).
   Its own injected styles pad the controls to 0, which crams the
   region dropdown and buttons against the bar's edges. Cannot edit
   the shared script from this site, so override visually here
   instead: safe, standard practice for third-party widget styling.
   ============================================================= */
.vgt-controls {
  padding: 6px 10px !important;
  gap: 8px !important;
}

/* =============================================================
   Cookie consent bar. Direct child of <body>, closed before any
   other markup, never wraps the dock/pill/header, so hiding it
   with display:none can never take other fixed elements down
   with it. See CLAUDE.md "cookie-bar structuur altijd controleren".
   ============================================================= */
.cookie-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-cookie-bar);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  padding: 18px clamp(18px, 4vw, 40px);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 -8px 30px rgba(22, 49, 63, 0.22);
}

.cookie-bar-text {
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}

.cookie-bar-text a {
  color: #fff;
  text-decoration: underline;
}

.cookie-bar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-bar-actions button {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 10px 20px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

#cookieAccept {
  background: var(--accent-600);
  border-color: var(--accent-600);
}

#cookieAccept:hover,
#cookieAccept:focus-visible {
  background: var(--accent-700);
  border-color: var(--accent-700);
}

#cookieDecline:hover,
#cookieDecline:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

/* ===== STAY / BOOKING CTA BAR (prominent hotel-booking CTA, all pages) ===== */
.stay-cta-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  background: var(--ink);
  border-top: 1px solid var(--accent-600);
  padding: 20px clamp(18px, 4vw, 52px);
  text-align: center;
}

.stay-cta-bar-icon {
  color: var(--accent-500);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.stay-cta-bar-text {
  margin: 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.88);
}

.stay-cta-bar-text strong {
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: 0.02em;
}

.stay-cta-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-600);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.stay-cta-bar-btn:hover,
.stay-cta-bar-btn:focus-visible {
  background: var(--accent-700);
  transform: translateY(-2px);
}

/* ===== HEADER ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(18px, 4vw, 52px);
  height: var(--nav-height);
  background: rgba(251, 250, 248, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-logo {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}

.site-logo-top {
  font-family: var(--font-serif);
  font-size: 19px;
  letter-spacing: 0.18em;
  color: var(--ink);
}

.site-logo-bot {
  font-size: 9.5px;
  letter-spacing: 0.42em;
  color: var(--stone);
  text-transform: uppercase;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}

.header-nav a {
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink2);
  transition: color 0.18s ease;
}

.header-nav a:hover,
.header-nav a:focus-visible {
  color: var(--accent-600);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.header-nav .nav-dropdown-toggle {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.18s ease;
}

.header-nav .nav-dropdown-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
}

.header-nav .nav-dropdown-toggle:hover,
.header-nav .nav-dropdown-toggle:focus-visible,
.header-nav .nav-dropdown.is-open .nav-dropdown-toggle {
  color: var(--accent-600);
}

.header-nav .nav-dropdown.is-open .nav-dropdown-toggle::after {
  transform: rotate(225deg) translateY(2px);
}

.vr-dock .nav-dropdown {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.vr-dock .nav-dropdown-toggle {
  flex: 1 1 0;
  min-width: 0;
}

.vr-dock .nav-dropdown.is-open .nav-dropdown-toggle {
  color: var(--ink);
  background: rgba(22, 49, 63, 0.05);
}

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel,
.nav-dropdown.is-open .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Invisible hover bridge: keeps the pointer within .nav-dropdown's hover
   chain while crossing the visual gap between the toggle and the panel, so
   the panel does not close mid-transit before the cursor reaches it. Always
   hit-testable regardless of the panel's own hidden/visible state. */
.header-nav .nav-dropdown-panel::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  visibility: visible;
  pointer-events: auto;
}

.nav-dropdown-panel a {
  font-size: 13.5px;
  color: var(--ink2);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus-visible {
  background: var(--sand, rgba(0, 0, 0, 0.04));
  color: var(--accent-600);
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 30px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-primary {
  background: var(--accent-600);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--accent-700);
}

.btn-outline {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--ink);
  color: #fff;
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  background: #fff;
  color: var(--ink);
}

@media (max-width: 640px) {
  .btn {
    padding: 12px 20px;
  }
}

/* =============================================================
   Mobile navigation: top dock + floating sections pill.

   Direct children of <body>. Never nest inside a cookie bar, modal
   or overlay wrapper: hiding that wrapper with display:none would
   take the whole nav down with it.

   Do NOT put overflow-x:hidden on html or body, see base.css.
   ============================================================= */

.vr-dock,
.vr-pill,
.vr-panel {
  display: none;
}

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

  main {
    overflow-x: hidden;
  }

  body {
    padding-top: max(72px, calc(62px + env(safe-area-inset-top)));
  }

  /* --- top dock (Ibiza pattern: fixed TOP, not bottom) --- */
  .vr-dock {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-dock);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 2px;
    padding: max(6px, env(safe-area-inset-top)) 4px 6px;
    background: rgba(251, 250, 248, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
  }

  .vr-dock__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 4px;
    border-radius: var(--radius-2xl);
    color: var(--stone);
    text-decoration: none;
    transition: color 0.16s ease, background-color 0.16s ease;
  }

  .vr-dock__item svg {
    width: 22px;
    height: 22px;
    flex: none;
    stroke-width: 1.75;
  }

  .vr-dock__item span {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vr-dock__item--active,
  .vr-dock__item:hover,
  .vr-dock__item:focus-visible {
    color: var(--ink);
    background: rgba(22, 49, 63, 0.05);
  }

  .vr-dock .nav-dropdown-panel {
    position: fixed;
    top: max(78px, calc(68px + env(safe-area-inset-top)));
    left: 12px;
    right: 12px;
    width: auto;
    min-width: 0;
    max-height: 65vh;
    overflow-y: auto;
    transform: translateY(-8px);
  }

  .vr-dock .nav-dropdown:hover .nav-dropdown-panel,
  .vr-dock .nav-dropdown:focus-within .nav-dropdown-panel,
  .vr-dock .nav-dropdown.is-open .nav-dropdown-panel {
    transform: translateY(0);
  }

  /* --- floating language/sections pill --- */
  .vr-pill {
    position: fixed;
    top: calc(86px + env(safe-area-inset-top));
    right: 12px;
    z-index: var(--z-lang-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: rgba(251, 250, 248, 0.9);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
  }
}

/* ===== BACK TO TOP ===== */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-back-top);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  box-shadow: var(--shadow-md);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background-color 0.18s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--accent-600);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 1024px) {
  .back-to-top {
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

.moments-lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);background:rgba(10,14,18,0.92);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);}
.moments-lightbox[hidden]{display:none;}
.moments-lightbox__close,.moments-lightbox__prev,.moments-lightbox__next{position:absolute;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.12);color:#fff;border:none;border-radius:50%;font-size:28px;line-height:1;cursor:pointer;}
.moments-lightbox__close{top:16px;right:16px;}
.moments-lightbox__prev{left:16px;top:50%;transform:translateY(-50%);}
.moments-lightbox__next{right:16px;top:50%;transform:translateY(-50%);}
.moments-lightbox__close:hover,.moments-lightbox__prev:hover,.moments-lightbox__next:hover{background:rgba(255,255,255,0.24);}
.moments-lightbox__close[hidden],.moments-lightbox__prev[hidden],.moments-lightbox__next[hidden]{display:none;}
.moments-lightbox__figure{margin:0;max-width:min(90vw,900px);max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:12px;}
.moments-lightbox__img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:var(--radius-xl,8px);}
.moments-lightbox__img-fallback{color:#fff;font-size:14px;}
.moments-lightbox__caption{max-width:60ch;text-align:center;color:#fff;}
.moments-lightbox__name{display:block;font-weight:600;font-size:14px;margin:0 0 4px;}
.moments-lightbox__caption .moments-card-caption{margin:0;color:rgba(255,255,255,0.85);font-size:14px;line-height:1.5;}
.moments-lightbox__caption .moments-card-caption a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.moments-lightbox__counter{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.8);font-size:13px;margin:0;}
@media(max-width:520px){.moments-lightbox__prev,.moments-lightbox__next{font-size:22px;}}

/* ===== sections.css ===== */
@property --glow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: #0f212b;
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(15, 33, 43, 0.5) 0%,
    rgba(15, 33, 43, 0.12) 32%,
    rgba(15, 33, 43, 0.18) 60%,
    rgba(15, 33, 43, 0.8) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(18px, 6vw, 80px) clamp(64px, 10vh, 110px);
  color: #fff;
}

.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hero-title {
  font-size: clamp(38px, 7vw, 96px);
  line-height: 0.98;
  margin-top: 12px;
}

.hero-subtitle {
  font-family: var(--font-italic);
  font-size: clamp(18px, 2vw, 26px);
  margin-top: 16px;
  max-width: 640px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

section.intro,
section.grid-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(64px, 12vh, 130px) clamp(18px, 6vw, 80px);
}

.section-eyebrow {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stone);
}

.section-title {
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.06;
  margin-top: 10px;
  max-width: 760px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.dv-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dv-card:hover,
.dv-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.dv-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.dv-card-body {
  padding: 20px;
}

.dv-card-body h3 {
  font-size: 19px;
}

.dv-card-body p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--stone);
  line-height: 1.6;
}

/* ===== INTERIOR PAGE HERO (shorter banner, not full viewport) ===== */
.page-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: #0f212b;
}

.page-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(15, 33, 43, 0.55) 0%,
    rgba(15, 33, 43, 0.15) 38%,
    rgba(15, 33, 43, 0.75) 100%
  );
}

.page-hero-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(18px, 6vw, 80px) clamp(18px, 6vw, 80px) clamp(40px, 7vh, 76px);
  color: #fff;
}

.page-hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.85;
}

.page-hero-heading {
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1.02;
  margin-top: 10px;
}

.page-hero-intro {
  font-family: var(--font-italic);
  font-size: clamp(16px, 1.8vw, 21px);
  margin-top: 14px;
  max-width: 640px;
}

/* ===== INTERIOR CONTENT SECTIONS ===== */
.content-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 90px) clamp(18px, 6vw, 80px);
}

.content-section + .content-section {
  border-top: 1px solid var(--line);
}

.content-lede {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  color: var(--ink2);
  max-width: 800px;
  margin-top: 18px;
}

.content-lede + .content-lede {
  margin-top: 14px;
}

/* ===== POI / LISTING GRID (landmarks, hotels, museums) ===== */
.poi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 36px;
}

.poi-card-photo {
  width: calc(100% + 52px);
  max-width: calc(100% + 52px);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin: -24px -26px 18px -26px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.poi-card:has(.poi-card-photo) {
  overflow: hidden;
}

.poi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--paper);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.32s ease;
}

.poi-card:hover,
.poi-card:focus-within,
.poi-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

/* Running border light: a bright arc traces around the card frame
   on hover, like a laser scanning the edge. Paused and invisible at
   rest so neighboring cards never move; only the hovered card lights
   up. Same technique as the dark glow-cards component, retuned to
   --accent-600 for the light paper surface. See
   tools/dev-previews/glow-cards.css for the full rationale
   (mask-composite: exclude carves a ring out of
   a rotating conic-gradient). */
.poi-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--glow-angle),
    transparent 0deg,
    rgba(185, 59, 39, 0.85) 18deg,
    transparent 50deg,
    transparent 310deg,
    rgba(185, 59, 39, 0.85) 342deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  animation: glow-rotate 5s linear infinite;
  animation-play-state: paused;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
}

.poi-card:hover::after,
.poi-card:focus-within::after,
.poi-card:focus-visible::after {
  opacity: 1;
  animation-play-state: running;
}

@keyframes glow-rotate {
  to {
    --glow-angle: 360deg;
  }
}

.poi-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px;
}

.poi-select-btn {
  font: inherit;
  font-size: 18px;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.poi-select-btn:hover,
.poi-select-btn:focus-visible {
  border-color: currentColor;
}

.poi-card[data-insider].is-selected {
  border-color: var(--accent-600, #b93b27);
  box-shadow: var(--shadow-md);
}

.poi-card[data-insider].is-selected .poi-select-btn {
  color: var(--accent-600, #b93b27);
}

.poi-card[data-insider].is-selected::before {
  content: "Now showing \2193";
  position: absolute;
  top: -11px;
  left: 24px;
  background: var(--accent-600, #b93b27);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}

.insider-picks[hidden] {
  display: none;
}

.insider-picks:not([hidden]) {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.insider-picks.is-visible {
  opacity: 1;
}

.poi-card h3 {
  font-size: 18px;
}

.poi-card h3 a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.poi-card h3 a:hover,
.poi-card h3 a:focus-visible {
  border-color: currentColor;
}

.poi-address {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  color: var(--stone);
  margin-top: 8px;
}

.poi-address::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  background-color: var(--stone);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.744-7-11.5a7 7 0 1 1 14 0C19 14.244 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.744-7-11.5a7 7 0 1 1 14 0C19 14.244 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.4'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.poi-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink2);
  margin-top: 10px;
}

.poi-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-600);
  text-decoration: none;
}

.poi-link::after {
  content: "\2192";
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.poi-link:hover,
.poi-link:focus-visible {
  color: var(--accent-700);
}

.poi-link:hover::after,
.poi-link:focus-visible::after {
  transform: translateX(3px);
}

.poi-link:focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: 3px;
  border-radius: 2px;
}

.poi-map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
  text-decoration: none;
}

.poi-map-link::before {
  content: "\2299";
}

.poi-card-credit {
  font-size: 11.5px;
  color: var(--stone);
  margin-top: 8px;
}

.poi-card-credit a {
  color: inherit;
  text-decoration: underline;
}

.hero-photo-credit {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}

.hero-photo-credit a {
  color: inherit;
  text-decoration: underline;
}

.poi-map-link:hover,
.poi-map-link:focus-visible {
  color: var(--accent-600);
  text-decoration: underline;
}

.poi-map-link:focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ===== PERSONA PICKER (homepage "what kind of traveller are you") =====
   Reuses .poi-card as the whole clickable surface (shadow/hover-lift/
   border-light already defined above); only the icon circle is new. */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin-top: 36px;
}

a.persona-card {
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}

.persona-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(185, 59, 39, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.persona-icon svg {
  width: 24px;
  height: 24px;
  color: var(--accent-600);
}

.persona-card h3 {
  font-size: 17px;
}

.persona-card .poi-desc {
  font-size: 13.5px;
  margin-top: 6px;
}

.tier-heading {
  font-size: clamp(22px, 2.6vw, 30px);
  margin-top: 12px;
}

.tier-heading + .poi-grid {
  margin-top: 28px;
}

.legal-section {
  margin-top: 28px;
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-top: 28px;
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.content-section > .tier-heading:not(:first-child) {
  margin-top: 56px;
}

/* ===== STREET / CATEGORY DIRECTORY (dense list, e.g. Meent street) ===== */
.street-directory h3 {
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 36px;
}

.street-directory h3:first-child {
  margin-top: 0;
}

.street-directory ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px 24px;
}

.street-directory li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.street-directory li strong {
  color: var(--ink);
  display: block;
}

/* ===== REQUEST FORM (packages / advertising requests, contact.html) ===== */
.cf-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.cf-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin: 0 0 10px;
}

.cf-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.2vw, 32px);
  font-weight: 400;
  margin: 0 0 10px;
}

.cf-sub {
  font-size: 15px;
  color: var(--stone);
  line-height: 1.6;
  max-width: 48ch;
  margin: 0 0 34px;
}

.cf-plan-box {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  background: var(--sand);
  border-radius: var(--radius-2xl);
  padding: 30px 30px 28px;
  margin-bottom: 32px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.cf-plan-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cf-plan-box { transition: none; }
}

.cf-plan-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 6px;
}

.cf-plan-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.cf-plan-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

.cf-plan-price {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--ink);
  white-space: nowrap;
}

.cf-plan-subhead {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 10px;
}

.cf-plan-section + .cf-plan-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
}

.cf-plan-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cf-plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}

.cf-plan-list--yes li { color: #1b4d3e; }
.cf-plan-list--no li { color: #7a221e; }

.cf-buy-micro {
  font-size: 14px;
  color: var(--stone);
  line-height: 1.55;
  margin: 0 0 12px;
}

.cf-buy-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.cf-renew-note {
  font-size: 14px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
}

.cf-form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 22px;
}

.cf-label {
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}

.cf-input,
.cf-textarea {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-md);
  padding: 13px 15px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cf-input::placeholder,
.cf-textarea::placeholder { color: var(--mist); }

.cf-input:hover,
.cf-textarea:hover { border-color: rgba(22, 49, 63, 0.32); }

.cf-input:focus,
.cf-textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(185, 59, 39, 0.22);
}

.cf-textarea { resize: vertical; min-height: 120px; }

.cf-upload-group { display: none; }

.cf-file-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #fff;
  border: 1px dashed rgba(22, 49, 63, 0.38);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  cursor: pointer;
  text-align: center;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.cf-file-label:hover { border-color: var(--ink); background: var(--paper); }

.cf-file-hint {
  font-size: 13px;
  color: var(--stone);
  line-height: 1.55;
  margin: 0 0 4px;
}

.cf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--accent-600);
  color: #fff;
  border: none;
  padding: 16px 30px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease;
}

.cf-submit:hover { background: var(--accent-700); }
.cf-submit:active { transform: translateY(1px) scale(0.98); }
.cf-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.cf-error {
  font-size: 13px;
  color: #b91c1c;
  margin-top: 12px;
  text-align: center;
  display: none;
}

.cf-error.show { display: block; }

.cf-success {
  font-size: 14.5px;
  color: #1b4d3e;
  background: var(--sand);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-top: 16px;
  text-align: center;
}

/* ===== LEGAL PROSE (privacy/cookies/disclaimer) ===== */
.legal-prose {
  max-width: 760px;
}

.legal-section + .legal-section {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.legal-section h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

/* Deep-linked cards/sections (id anchors): keep the heading clear of the
   fixed .site-header on scroll, and give the jump target a visible,
   keyboard-reachable focus state (anchor-focus.js sets tabindex + .focus()). */
.poi-card,
.legal-section {
  scroll-margin-top: calc(var(--nav-height) + 20px);
}

.poi-card:focus-visible,
.legal-section:focus-visible,
.poi-card:target,
.legal-section:target {
  outline: 2px solid var(--accent-600);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.legal-section p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink2);
}

.legal-section p + p {
  margin-top: 12px;
}

.legal-section ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.legal-section ul li {
  margin-bottom: 8px;
  line-height: 1.65;
  color: var(--ink2);
  font-size: 15px;
}

.legal-section ul li strong {
  color: var(--ink);
}

.legal-section a {
  color: var(--accent-600);
  text-decoration: underline;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary h2 {
  margin-bottom: 0;
}

.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--accent-600);
}

.faq-item[open] summary::after {
  content: '\2212';
}

.faq-item p {
  margin-top: 12px;
}

.legal-meta {
  font-size: 13px;
  color: var(--stone);
  margin-bottom: 30px;
}

/* ===== CONTACT ===== */
.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--paper);
  padding: clamp(28px, 4vw, 44px);
  max-width: 560px;
}

.contact-card h2 {
  font-size: clamp(22px, 2.6vw, 28px);
}

.contact-line {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink2);
}

.contact-line a {
  color: var(--accent-600);
  text-decoration: underline;
}

.contact-line a:hover,
.contact-line a:focus-visible {
  color: var(--accent-700);
}

.site-footer {
  background: var(--ink);
  color: #fff;
  padding: clamp(56px, 9vh, 96px) clamp(18px, 6vw, 80px) 40px;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.footer-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 3vw, 48px);
}

.footer-top {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 40px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-brand-top {
  font-family: var(--font-serif);
  font-size: 24px;
  letter-spacing: 0.18em;
}

.footer-brand-bot {
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--mist);
}

.footer-tagline {
  max-width: 42ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

.footer-col-title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0 0 16px;
  font-weight: 400;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14px;
}

.footer-links a,
.footer-links li {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.footer-links li.address {
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.footer-bottom {
  max-width: 1320px;
  margin: clamp(36px, 6vh, 56px) auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
}

.footer-meta {
  display: flex;
  gap: 18px;
  align-items: center;
}

.footer-meta button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 0;
  font-family: inherit;
}

.footer-meta a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-top {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-top {
    flex-direction: column;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .footer-meta {
    flex-wrap: wrap;
    gap: 10px 16px;
  }
}

/* ===== PERSONA FILTER (things-to-do-in-rotterdam.html pilot) ===== */
.poi-card[hidden] {
  display: none;
}

.persona-filter {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(251, 250, 248, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.persona-filter-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px clamp(18px, 6vw, 80px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* .persona-filter is position:fixed (out of flow), so it doesn't push
   <main> down on its own -- it was overlapping the top of .page-hero.
   Push main down by the filter bar's own rendered height instead. */
.persona-filter + main {
  padding-top: 64px;
}

@media (max-width: 1024px) {
  .persona-filter + main {
    padding-top: 54px;
  }

  .persona-filter-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 16px;
    gap: 8px;
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }

  .persona-filter-inner::-webkit-scrollbar {
    display: none;
  }

  .persona-filter-label {
    flex: none;
    white-space: nowrap;
    font-size: 12.5px;
  }

  .persona-chip {
    flex: none;
    white-space: nowrap;
    font-size: 12.5px;
    padding: 7px 14px;
  }

  .persona-filter-scroll-hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-600, var(--accent));
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
  }

  .persona-filter-scroll-hint--right {
    right: 4px;
    animation: persona-hint-nudge-right 1.4s ease-in-out infinite;
  }

  .persona-filter-scroll-hint--left {
    left: 4px;
    animation: persona-hint-nudge-left 1.4s ease-in-out infinite;
  }

  .persona-filter-scroll-hint svg {
    width: 15px;
    height: 15px;
  }

  .persona-filter-scroll-hint[hidden] {
    display: none;
  }
}

@keyframes persona-hint-nudge-right {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(4px); }
}

@keyframes persona-hint-nudge-left {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(-4px); }
}

@media (min-width: 1025px) {
  .persona-filter-scroll-hint {
    display: none;
  }
}

.persona-filter-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink2);
  margin: 0 6px 0 0;
}

.persona-chip {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.persona-chip:hover,
.persona-chip:focus-visible {
  border-color: var(--ink);
}

.persona-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.persona-chip--reset {
  color: var(--accent-600);
  border-color: var(--accent-300);
  background: transparent;
  font-weight: 600;
}

.persona-chip--reset:hover,
.persona-chip--reset:focus-visible {
  background: var(--accent-600);
  border-color: var(--accent-600);
  color: #fff;
}

.persona-chip--reset[hidden] {
  display: none;
}

.persona-intro {
  margin: 16px 0 0 0;
  padding: 16px 20px;
  background: var(--sand);
  border-left: 3px solid var(--accent-600);
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink2);
}

.persona-intro a {
  color: var(--ink);
}

.persona-intro[hidden] {
  display: none;
}

/* Photo-share community feature (visitor-submitted photos per page) */
.psa-cta{box-sizing:border-box;max-width:1180px;margin:32px auto;padding:clamp(40px,6vh,64px) clamp(18px,6vw,64px);border-radius:var(--radius-xl,16px);background:linear-gradient(135deg, var(--ink) 0%, #2b4a5a 100%);color:#fff;}
.psa-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;}
.psa-cta-photo{width:100%;height:100%;min-height:260px;object-fit:cover;border-radius:var(--radius-lg,12px);}
.psa-cta-photo-placeholder{width:100%;min-height:260px;border-radius:var(--radius-lg,12px);border:1px dashed rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.55);font-size:13px;text-align:center;padding:20px;}
.psa-cta-photo-caption{margin:6px 0 0;font-size:11px;color:rgba(255,255,255,0.6);text-align:right;}
.psa-cta h2{color:#fff;margin:0 0 10px;}
.psa-cta p{color:rgba(255,255,255,0.85);margin:0 0 20px;}
.psa-cta .btn-primary{background:#b93b27;color:#fff;border-color:#fff;}
.psa-cta .btn-primary:hover{opacity:.9;}
.psa-panel .btn-primary{background:var(--accent-600);color:#fff;border-color:var(--accent-600);}
.psa-panel .btn-primary:hover{background:var(--accent-700);opacity:1;}
.psa-panel input[type="file"].psa-input::file-selector-button,
.psa-panel input[type="file"].psa-input::-webkit-file-upload-button{background:var(--accent-600);color:#fff;border:1px solid var(--accent-600);border-radius:var(--radius-xs);padding:8px 14px;margin-right:10px;font-family:inherit;font-size:13px;cursor:pointer;}
.psa-panel input[type="file"].psa-input::file-selector-button:hover,
.psa-panel input[type="file"].psa-input::-webkit-file-upload-button:hover{background:var(--accent-700);}
.psa-gallery-link{display:inline-block;margin:12px 0 0 14px;color:#fff;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;}
@media(max-width:760px){.psa-cta-grid{grid-template-columns:1fr;}.psa-cta-photo,.psa-cta-photo-placeholder{min-height:200px;order:-1;}}
.psa-gallery{margin:24px 0 0;padding:24px;border:1px dashed rgba(255,255,255,0.3);border-radius:var(--radius-lg,12px);text-align:center;}
.psa-gallery-empty{color:rgba(255,255,255,0.75);font-size:14.5px;margin:0;}
.psa-gallery-filled{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;border:none;padding:0;text-align:left;}
.psa-gallery-card{position:relative;margin:0;background:rgba(255,255,255,0.08);border-radius:var(--radius-lg,12px);overflow:hidden;}
.psa-gallery-card img{width:100%;height:auto;display:block;}
.psa-gallery-card figcaption{padding:8px 10px;font-size:12px;color:rgba(255,255,255,0.85);line-height:1.4;}
.psa-panel{margin:20px auto 0;padding:24px;border:1px solid var(--line);border-radius:var(--radius-lg,12px);background:var(--paper);max-width:480px;text-align:left;color:var(--ink);}
.psa-label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:14px 0 6px;}
.psa-label:first-child{margin-top:0;}
.psa-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:14px;font-family:inherit;color:var(--ink);}
.psa-gate-row{display:flex;gap:10px;}
.psa-gate-row .psa-input{flex:1;}
.psa-panel .psa-gate-hint{color:#a3302a;font-size:13px;margin:10px 0 0;}
.psa-panel .psa-code-hint{color:var(--ink2);font-size:12.5px;margin:2px 0 12px;}
.psa-check{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink2);line-height:1.5;margin:14px 0;}
.psa-check input{margin-top:3px;}
.psa-rules{background:rgba(0,0,0,0.04);border-radius:6px;padding:12px 14px;margin:0 0 14px;}
.psa-panel .psa-rules-title{font-size:12.5px;font-weight:600;margin:0 0 6px;color:var(--ink);}
.psa-rules-list{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink2);line-height:1.6;}
.psa-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.psa-panel .psa-note{font-size:12px;color:var(--stone);margin:12px 0 0;}
.psa-status{font-size:13.5px;margin:12px 0 0;padding:10px 12px;border-radius:6px;}
.psa-status.psa-ok{background:#e7f5ec;color:#1a5c34;}
.psa-status.psa-error{background:#fbeaea;color:#a3302a;}

.moments-hero{box-sizing:border-box;padding:calc(var(--nav-height) + clamp(48px,8vh,80px)) clamp(18px,6vw,64px) clamp(48px,8vh,80px);text-align:center;background:linear-gradient(135deg, var(--accent-600) 0%, var(--accent-700) 55%, var(--ink) 100%);color:#fff;}
.moments-hero h1{color:#fff;margin:0 0 12px;}
.moments-hero p{color:rgba(255,255,255,0.9);max-width:640px;margin:0 auto;}
.moments-grid{max-width:1180px;margin:40px auto;padding:0 clamp(18px,6vw,64px);columns:3 260px;column-gap:28px;}
.moments-grid--sparse{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px;columns:unset;}
.moments-grid--sparse .moments-card,.moments-grid--sparse .moments-invite-card{flex:1 1 320px;max-width:480px;}
.moments-card{position:relative;margin:0 0 28px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-xl,8px);box-shadow:var(--shadow-md);overflow:hidden;break-inside:avoid;transform:rotate(var(--tilt, -1.2deg));transition:transform .2s ease, box-shadow .2s ease;}
.moments-badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--accent-600);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-pill);box-shadow:0 2px 8px rgba(0,0,0,.28);}
.moments-card:nth-child(3n+1){--tilt:-1.4deg;}
.moments-card:nth-child(3n+2){--tilt:1deg;}
.moments-card:nth-child(3n){--tilt:-0.6deg;}
.moments-card:hover{transform:rotate(0deg) translateY(-4px);box-shadow:var(--shadow-lg);}
.moments-card img{width:100%;height:auto;display:block;}
.moments-card-meta{padding:14px 16px 18px;}
.moments-card-name{display:block;font-weight:600;color:var(--accent-600);font-size:13.5px;margin:0 0 4px;}
.moments-card-caption{margin:0;color:var(--ink2);font-size:14px;line-height:1.5;}
.moments-card-caption a{color:var(--accent-600);text-decoration:underline;text-underline-offset:2px;}
.moments-card-caption a:hover{color:var(--accent-700);}
.moments-invite-card{position:relative;margin:0 0 28px;break-inside:avoid;background:linear-gradient(150deg, var(--accent-600) 0%, var(--accent-700) 100%);color:#fff;border-radius:var(--radius-xl,8px);box-shadow:var(--shadow-md);padding:28px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:220px;transform:rotate(-0.8deg);transition:transform .2s ease, box-shadow .2s ease;}
.moments-invite-card:hover{transform:rotate(0deg) translateY(-4px);box-shadow:var(--shadow-lg);}
.moments-invite-card h3{color:#fff;font-size:19px;margin:0;}
.moments-invite-card p{color:rgba(255,255,255,0.9);font-size:14px;line-height:1.5;margin:0;}
.moments-invite-card .btn-primary{background:#fff;color:var(--accent-600);border-color:#fff;}
.moments-invite-card .btn-primary:hover{opacity:.9;}
@media(max-width:520px){.moments-grid{columns:1;column-gap:16px;}}
@media(max-width:640px){.moments-grid--sparse{flex-direction:column;}.moments-grid--sparse .moments-card,.moments-grid--sparse .moments-invite-card{max-width:100%;}}

/* ===== FAMILY / KIDS-PAGE COMPONENTS (rotterdam-with-kids.html) ===== */
.verify-note{display:flex;gap:10px;align-items:flex-start;background:rgba(185,59,39,0.06);border-left:3px solid var(--accent-600);border-radius:6px;padding:14px 18px;margin-top:24px;font-size:14px;line-height:1.6;color:var(--ink2);max-width:800px;}

.quick-answers{border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--paper);box-shadow:var(--shadow-sm);padding:24px 26px;margin-top:32px;}
.quick-answers dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;}
.quick-answers dt{font-weight:600;color:var(--ink);font-size:14px;white-space:nowrap;}
.quick-answers dd{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.55;}
@media(max-width:640px){.quick-answers dl{grid-template-columns:1fr;}.quick-answers dt{margin-top:10px;}}

.age-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:28px;}
.age-card{border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--paper);padding:22px 24px;box-shadow:var(--shadow-sm);}
.age-card h3{font-size:17px;margin-bottom:4px;}
.age-card .age-range{font-size:12.5px;color:var(--stone);text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;display:block;}
.age-card ul{margin:0;padding-left:18px;}
.age-card ul li{font-size:14px;line-height:1.6;color:var(--ink2);margin-bottom:6px;}

.route-card{border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--paper);padding:26px 28px;box-shadow:var(--shadow-sm);margin-top:28px;}
.route-card h3{font-size:19px;}
.route-meta{font-size:13px;color:var(--stone);margin-top:4px;}
.route-timeline{list-style:none;margin:20px 0 0;padding:0;border-left:2px solid var(--line);}
.route-timeline li{position:relative;padding:0 0 18px 22px;}
.route-timeline li:last-child{padding-bottom:0;}
.route-timeline li::before{content:"";position:absolute;left:-5px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--accent-600);}
.route-time{display:block;font-weight:600;color:var(--ink);font-size:13.5px;}
.route-activity{display:block;color:var(--ink2);font-size:14.5px;line-height:1.55;margin-top:2px;}

.poi-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--stone);margin-top:8px;}
.poi-meta span:not(:last-child)::after{content:"\2022";margin-left:10px;color:var(--line);}

.data-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:14px;}
.data-table caption{text-align:left;font-size:13px;color:var(--stone);margin-bottom:10px;caption-side:top;}
.data-table th,.data-table td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;}
.data-table th{background:rgba(22,49,63,0.04);color:var(--ink);font-weight:600;}
.data-table td{color:var(--ink2);}
.data-table-wrap{overflow-x:auto;max-width:100%;}