/* tokens.css */
/* Design tokens lifted from the kit's global.json (Elementor kit styles), so
   colours and type scale match the purchased template rather than approximating it.
   The one deliberate departure is the accent, retuned from the kit's #f39735 to the
   Day Trips From Marrakech brand orange. Every accent surface reads from these two
   variables, so the retheme is contained here. */
:root {
  /* Colour — kit system + DTFM brand accent */
  --c-accent: #ff6600;
  --c-accent-dark: #d24f00;
  --c-heading: #050402;
  --c-text: #1c1c1c;
  --c-muted: #6b6560;
  --c-bg: #ffffff;
  --c-bg-alt: #fff4ed;   /* "Alt bg light" */
  --c-bg-dark: #210c00;  /* "Alt bg dark"  */
  --c-border: #ffeee4;   /* "Border strock" */
  --c-border-soft: #ece5df;
  --c-white: #ffffff;
  --c-black: #000000;
  --c-star: #ffb339;

  /* Type — Inter Tight for headings, Poppins for body */
  --font-heading: "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, sans-serif;

  --fs-xxl: 100px;  /* Extra large title */
  --fs-hero: 60px;  /* Hero title */
  --fs-lg: 46px;    /* Large title */
  --fs-md: 36px;    /* Medium title */
  --fs-sm: 24px;    /* Small title */
  --fs-body: 16px;
  --fs-small: 14px;
  --lh-heading: 1.2;
  --lh-body: 1.5;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-y: 96px;

  /* Shape */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(5, 4, 2, 0.05);
  --shadow: 0 8px 30px rgba(5, 4, 2, 0.08);
  --shadow-lg: 0 20px 60px rgba(5, 4, 2, 0.12);

  --container: 1280px;
  --transition: 0.25s ease;

  /* Layering */
  --z-header: 300;
  --z-modal: 500;
}

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

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

/* typography.css */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--c-heading);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--fs-hero);
}
h2 {
  font-size: var(--fs-lg);
}
h3 {
  font-size: var(--fs-md);
}
h4 {
  font-size: var(--fs-sm);
}
h5 {
  font-size: 20px;
}
h6 {
  font-size: 18px;
}

p {
  color: var(--c-muted);
}

/* Two-tone headings: the kit wraps the coloured run in {{...}}, which the
   `accent` Nunjucks filter converts to this span. */
.accent {
  color: var(--c-accent);
}

/* Small orange eyebrow above most section headings. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--c-accent);
}

.eyebrow--center::before {
  display: none;
}

.lead {
  font-size: 17px;
  color: var(--c-muted);
}

/* buttons.css */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-white);
}
.btn--primary:hover {
  background: var(--c-accent-dark);
}

.btn--dark {
  background: var(--c-heading);
  color: var(--c-white);
}
.btn--dark:hover {
  background: var(--c-accent);
}

.btn--outline {
  border: 1px solid var(--c-border-soft);
  color: var(--c-heading);
  background: transparent;
}
.btn--outline:hover {
  background: var(--c-heading);
  border-color: var(--c-heading);
  color: var(--c-white);
}

.btn--light {
  background: var(--c-white);
  color: var(--c-heading);
}
.btn--light:hover {
  background: var(--c-accent);
  color: var(--c-white);
}

.btn--ghost-light {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--c-white);
}
.btn--ghost-light:hover {
  background: var(--c-white);
  color: var(--c-heading);
}

.btn--sm {
  padding: 10px 20px;
  font-size: var(--fs-small);
}

.btn--block {
  width: 100%;
}

/* header.css */
.topbar {
  background: var(--c-heading);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-small);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 10px 0;
}

.topbar__meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.topbar__item svg {
  width: 14px;
  height: 14px;
  color: var(--c-accent);
}

.topbar a:hover {
  color: var(--c-accent);
}

.topbar__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topbar__social svg {
  width: 15px;
  height: 15px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
}

.site-header.is-stuck {
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--c-heading);
  letter-spacing: -0.02em;
}

.logo__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-white);
}

.logo__mark svg {
  width: 20px;
  height: 20px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav a {
  font-weight: 500;
  color: var(--c-heading);
  position: relative;
  padding: var(--space-2) 0;
  transition: color var(--transition);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--c-accent);
  transition: width var(--transition);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--c-accent);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  width: 100%;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border-soft);
  place-items: center;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

/* hero.css */
.hero {
  position: relative;
  padding: var(--space-8) 0 var(--space-9);
  background: var(--c-bg-alt);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}

.hero__title {
  font-size: var(--fs-hero);
  margin-bottom: var(--space-5);
}

.hero__text {
  max-width: 46ch;
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}

.hero__call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.hero__call-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-accent);
  box-shadow: var(--shadow-sm);
}

.hero__call-icon svg {
  width: 18px;
  height: 18px;
}

.hero__call-label {
  display: block;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.hero__call-num {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--c-heading);
}

/* Rating cluster under the hero copy */
.hero__rating {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.avatars {
  display: flex;
}

.avatars img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--c-white);
  margin-left: -14px;
}

.avatars img:first-child {
  margin-left: 0;
}

.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--c-star);
}

.stars svg {
  width: 16px;
  height: 16px;
}

.hero__rating-text {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.hero__rating-score {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--c-heading);
}

/* Media side */
.hero__media {
  position: relative;
}

.hero__img {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow);
}

.hero__badge {
  position: absolute;
  background: var(--c-white);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero__badge--discount {
  top: var(--space-6);
  left: calc(-1 * var(--space-6));
  background: var(--c-accent);
  color: var(--c-white);
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.hero__badge--discount strong {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1;
}

.hero__badge--discount span {
  font-size: 12px;
  opacity: 0.9;
}

.hero__badge--guides {
  bottom: var(--space-7);
  left: calc(-1 * var(--space-7));
  max-width: 260px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.hero__badge--guides strong {
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--c-heading);
}

.hero__badge--guides p {
  font-size: 13px;
  margin: 0;
}

/* Page banner used by every interior page */
.page-hero {
  position: relative;
  padding: var(--space-9) 0;
  background: var(--c-bg-dark);
  color: var(--c-white);
  text-align: center;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--page-hero-img);
  background-size: cover;
  background-position: center;
  opacity: 0.4;
}

.page-hero > * {
  position: relative;
}

.page-hero h1 {
  color: var(--c-white);
  margin-bottom: var(--space-3);
}

.breadcrumb {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb a:hover {
  color: var(--c-accent);
}

/* sections.css */
.container {
  width: min(100% - 2 * var(--space-5), var(--container));
  margin-inline: auto;
}

.section {
  padding: var(--section-y) 0;
}

.section--alt {
  background: var(--c-bg-alt);
}

.section--dark {
  background: var(--c-bg-dark);
  color: rgba(255, 255, 255, 0.8);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--c-white);
}

.section--tight {
  padding: var(--space-8) 0;
}

.section__head {
  margin-bottom: var(--space-8);
}

.section__head--center {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.section__head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}

.section__head--split p {
  max-width: 46ch;
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* About / split media sections */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.split__media {
  position: relative;
}

.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.split__media--stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.split__media--stack img:first-child {
  aspect-ratio: 3 / 4;
}

.split__media--stack img:last-child {
  aspect-ratio: 3 / 4;
  margin-top: var(--space-7);
}

.experience-badge {
  position: absolute;
  right: var(--space-5);
  top: var(--space-5);
  background: var(--c-accent);
  color: var(--c-white);
  border-radius: 50%;
  width: 110px;
  height: 110px;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: var(--shadow);
}

.experience-badge strong {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1;
}

.experience-badge span {
  font-size: 11px;
  line-height: 1.3;
  display: block;
  margin-top: 4px;
}

.checklist {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-6);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--c-text);
}

.checklist svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--c-accent);
  margin-top: 2px;
}

/* Stats strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
}

.stat {
  text-align: center;
  border-right: 1px solid var(--c-border);
}

.stat:last-child {
  border-right: 0;
}

.stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 44px;
  color: var(--c-heading);
  line-height: 1;
}

.stat span {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* Full-width CTA band */
.cta-band {
  position: relative;
  padding: var(--space-9) 0;
  text-align: center;
  color: var(--c-white);
  background: var(--c-bg-dark);
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cta-img);
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}

.cta-band > * {
  position: relative;
}

.cta-band h2 {
  color: var(--c-white);
  max-width: 20ch;
  margin: 0 auto var(--space-5);
}

/* Offer strip — three promo tiles */
.offers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.offer {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  color: var(--c-white);
}

.offer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(33, 12, 0, 0.85), rgba(33, 12, 0, 0.25));
}

.offer__body {
  position: relative;
  z-index: 1;
}

.offer__body strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--c-accent);
}

.offer__body span {
  font-size: var(--fs-small);
}

/* Gallery strip */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform var(--transition);
}

.gallery img:hover {
  transform: scale(1.03);
}

/* Booking steps */
.steps {
  display: grid;
  gap: var(--space-5);
}

.step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-white);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.step:hover {
  box-shadow: var(--shadow);
  border-color: var(--c-accent);
}

.step__num {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 600;
  color: var(--c-accent);
  line-height: 1;
  min-width: 48px;
}

.step h4 {
  margin-bottom: var(--space-2);
  font-size: 20px;
}

.step p {
  font-size: var(--fs-small);
  margin: 0;
}

/* FAQ accordion */
.accordion {
  display: grid;
  gap: var(--space-3);
}

.accordion__item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-white);
  overflow: hidden;
}

.accordion__item[open] {
  border-color: var(--c-accent);
}

.accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--c-heading);
  cursor: pointer;
  list-style: none;
}

.accordion__q::-webkit-details-marker {
  display: none;
}

.accordion__q::after {
  content: "+";
  font-size: 24px;
  color: var(--c-accent);
  line-height: 1;
  flex-shrink: 0;
}

.accordion__item[open] .accordion__q::after {
  content: "\2212";
}

.accordion__a {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--c-muted);
  font-size: var(--fs-small);
}

/* Testimonial block */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

/* Contact form */
.form {
  display: grid;
  gap: var(--space-4);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.form label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-heading);
  margin-bottom: var(--space-2);
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  font-size: var(--fs-small);
  transition: border-color var(--transition);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--c-accent);
  outline: none;
}

.form textarea {
  min-height: 130px;
  resize: vertical;
}

.form__note {
  font-size: 13px;
  color: var(--c-muted);
}

/* cards.css */
/* Package card ------------------------------------------------------------ */
.pkg {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.pkg:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.pkg__media {
  position: relative;
}

.pkg__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.pkg__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: var(--c-white);
  color: var(--c-heading);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.pkg__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

.pkg__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 13px;
  color: var(--c-muted);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.pkg__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pkg__meta svg {
  width: 14px;
  height: 14px;
  color: var(--c-accent);
}

.pkg__title {
  font-size: 20px;
  margin-bottom: var(--space-3);
}

.pkg__title a:hover {
  color: var(--c-accent);
}

.pkg__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--c-muted);
  margin-bottom: var(--space-4);
}

.pkg__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border);
}

.pkg__price strong {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--c-accent);
}

.pkg__price span {
  display: block;
  font-size: 12px;
  color: var(--c-muted);
}

/* Destination card — circular, per the kit's layout --------------------- */
.dest {
  text-align: center;
}

.dest__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.dest__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.dest:hover .dest__media img {
  transform: scale(1.06);
}

.dest__count {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--c-white);
  color: var(--c-heading);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.dest__body {
  margin-top: calc(-1 * var(--space-7));
  position: relative;
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  width: 82%;
  margin-inline: auto;
}

.dest__body h4 {
  font-size: 20px;
  margin-bottom: 4px;
}

.dest__body span {
  font-size: 13px;
  color: var(--c-accent);
}

/* Service card ------------------------------------------------------------ */
.service {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-white);
  transition: background var(--transition), transform var(--transition);
}

.service:hover {
  transform: translateY(-4px);
  background: var(--c-bg-alt);
}

.service__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-bg-alt);
  color: var(--c-accent);
  margin-bottom: var(--space-5);
  transition: background var(--transition), color var(--transition);
}

.service:hover .service__icon {
  background: var(--c-accent);
  color: var(--c-white);
}

.service__icon svg {
  width: 24px;
  height: 24px;
}

.service__num {
  position: absolute;
  top: var(--space-5);
  right: var(--space-6);
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  color: var(--c-border);
  line-height: 1;
}

.service h4 {
  font-size: 20px;
  margin-bottom: var(--space-3);
}

.service p {
  font-size: var(--fs-small);
  margin-bottom: var(--space-4);
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-heading);
  transition: gap var(--transition), color var(--transition);
}

.link-more svg {
  width: 14px;
  height: 14px;
}

.link-more:hover {
  color: var(--c-accent);
  gap: var(--space-3);
}

/* Guide card -------------------------------------------------------------- */
.guide {
  text-align: center;
}

.guide__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1;
  margin-bottom: var(--space-4);
}

.guide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.guide:hover .guide__media img {
  transform: scale(1.05);
}

.guide__social {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  gap: var(--space-2);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition);
}

.guide:hover .guide__social {
  opacity: 1;
  transform: translateY(0);
}

.guide__social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-heading);
}

.guide__social a:hover {
  background: var(--c-accent);
  color: var(--c-white);
}

.guide__social svg {
  width: 15px;
  height: 15px;
}

.guide h4 {
  font-size: 20px;
  margin-bottom: 2px;
}

.guide span {
  font-size: var(--fs-small);
  color: var(--c-accent);
}

/* Testimonial card -------------------------------------------------------- */
.testimonial {
  padding: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-white);
}

.testimonial__quote {
  color: var(--c-text);
  margin: var(--space-4) 0 var(--space-5);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial__author img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial__author strong {
  display: block;
  font-family: var(--font-heading);
  color: var(--c-heading);
}

.testimonial__author span {
  font-size: 13px;
  color: var(--c-muted);
}

/* Blog card --------------------------------------------------------------- */
.post {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.post:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.post__media {
  position: relative;
}

.post__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.post__cat {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.post__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.post__meta {
  display: flex;
  gap: var(--space-4);
  font-size: 13px;
  color: var(--c-muted);
  margin-bottom: var(--space-3);
}

.post h3 {
  font-size: 20px;
  margin-bottom: var(--space-3);
}

.post h3 a:hover {
  color: var(--c-accent);
}

.post p {
  font-size: var(--fs-small);
  margin-bottom: var(--space-4);
}

.post .link-more {
  margin-top: auto;
}

/* footer.css */
.site-footer {
  background: var(--c-bg-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-9) 0 0;
}

.site-footer h5 {
  color: var(--c-white);
  font-size: 18px;
  margin-bottom: var(--space-5);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
}

.footer__brand .logo {
  color: var(--c-white);
  margin-bottom: var(--space-4);
}

.footer__brand p {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-small);
  margin-bottom: var(--space-5);
}

.footer__links {
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-small);
}

.footer__links a:hover {
  color: var(--c-accent);
}

.footer__contact {
  display: grid;
  gap: var(--space-4);
  font-size: var(--fs-small);
}

.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.footer__contact svg {
  width: 16px;
  height: 16px;
  color: var(--c-accent);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer__social {
  display: flex;
  gap: var(--space-3);
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background var(--transition), border-color var(--transition);
}

.footer__social a:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
}

.footer__social svg {
  width: 16px;
  height: 16px;
}

.newsletter {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.newsletter input {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-white);
  font-size: var(--fs-small);
}

.newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.newsletter input:focus {
  outline: none;
  border-color: var(--c-accent);
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--space-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 13px;
  flex-wrap: wrap;
}

.footer__bottom a:hover {
  color: var(--c-accent);
}

/* Floating WhatsApp button — bottom-right, with attention pulse. */
.wa-float {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: var(--c-white);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
  animation: wa-pulse 2.4s infinite;
}

.wa-float svg {
  width: 30px;
  height: 30px;
}

@keyframes wa-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  70% {
    box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Offset upward so it never overlaps the WhatsApp button. */
.to-top {
  position: fixed;
  right: var(--space-6);
  bottom: calc(var(--space-6) + 70px);
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--c-heading);
  color: var(--c-white);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition), background var(--transition);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.to-top:hover {
  background: var(--c-accent);
}

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

/* responsive.css */
@media (max-width: 1100px) {
  :root {
    --fs-hero: 48px;
    --fs-lg: 38px;
    --fs-md: 30px;
    --section-y: 72px;
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__badge--discount,
  .hero__badge--guides {
    left: var(--space-4);
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: grid;
  }

  .nav {
    position: fixed;
    inset: 0 0 0 30%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    background: var(--c-white);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--transition);
    z-index: var(--z-modal);
    overflow-y: auto;
  }

  .nav.is-open {
    transform: translateX(0);
  }

  .header__actions .btn {
    display: none;
  }

  .hero__grid,
  .split {
    grid-template-columns: 1fr;
  }

  .hero__media {
    order: -1;
  }

  .grid--3,
  .grid--2,
  .testimonial-grid,
  .offers {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-6);
    padding: var(--space-6);
  }

  .stat:nth-child(2) {
    border-right: 0;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .section__head--split {
    flex-direction: column;
    align-items: flex-start;
  }

  .topbar__meta .topbar__item--address {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --fs-hero: 36px;
    --fs-lg: 30px;
    --fs-md: 26px;
    --fs-sm: 20px;
    --section-y: 56px;
  }

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

  .nav {
    inset: 0;
  }

  .topbar__inner {
    justify-content: center;
  }

  .topbar__social {
    display: none;
  }

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

  .split__media--stack {
    grid-template-columns: 1fr;
  }

  .split__media--stack img:last-child {
    margin-top: 0;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer__bottom {
    justify-content: center;
    text-align: center;
  }

  .hero__badge--discount {
    display: none;
  }

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

  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: var(--space-4);
  }

  .stat:last-child {
    border-bottom: 0;
  }
}

/* utilities.css */
.text-center {
  text-align: center;
}

.mt-0 {
  margin-top: 0;
}
.mt-4 {
  margin-top: var(--space-4);
}
.mt-5 {
  margin-top: var(--space-5);
}
.mt-6 {
  margin-top: var(--space-6);
}
.mb-5 {
  margin-bottom: var(--space-5);
}
.mb-6 {
  margin-bottom: var(--space-6);
}

.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.gap-4 {
  gap: var(--space-4);
}
.flex-wrap {
  flex-wrap: wrap;
}

.muted {
  color: var(--c-muted);
}

.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: var(--z-modal);
  background: var(--c-accent);
  color: var(--c-white);
  padding: var(--space-3) var(--space-5);
}

.skip-link:focus {
  left: 0;
}

/* Reveal-on-scroll, toggled by main.js via IntersectionObserver. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* dtfm.css */
/* dtfm.css — the pieces this site needs that the TripX kit does not ship.
   Everything here is built from the kit's own tokens so it stays part of the design
   rather than sitting on top of it. */

/* Multi-level primary nav ------------------------------------------------- */
/* The day-trip menu is two levels deep. On desktop it opens as a hover panel; on
   mobile the nav collapses into a drawer and the panel becomes a plain indented list. */
.nav__group { position: relative; }

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  gap: var(--space-6);
  min-width: 460px;
  padding: var(--space-5);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: var(--z-header);
}

.nav__group:hover .nav__dropdown,
.nav__group:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 200px; }

.nav__col a {
  font-size: var(--fs-small);
  color: var(--c-muted);
  white-space: nowrap;
}

.nav__col a:hover { color: var(--c-accent); }

.nav__col-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--c-heading) !important;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--c-border-soft);
  margin-bottom: var(--space-1);
}

.logo img { display: block; height: 46px; width: auto; }

/* Prose ------------------------------------------------------------------- */
/* Blog posts and the legal pages are long-form copy, so they get a measure and
   vertical rhythm rather than the kit's marketing-section spacing. */
.container--prose { max-width: 860px; }

.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); font-size: var(--fs-md); }
.prose h3 { margin-top: var(--space-6); font-size: var(--fs-sm); }
.prose h4 { margin-top: var(--space-5); }
.prose ul,
.prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: var(--space-2); }
.prose li { list-style: inherit; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--c-accent-dark); text-decoration: underline; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose blockquote {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--c-accent);
  background: var(--c-bg-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.section__intro { margin-bottom: var(--space-6); }
.section__intro > * + * { margin-top: var(--space-4); }

/* Price table ------------------------------------------------------------- */
/* Wide on desktop, horizontally scrollable on phones — the table must never force
   the page body to scroll sideways. */
.price-table-wrap {
  overflow-x: auto;
  margin: var(--space-5) 0;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.price-table th,
.price-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--c-border-soft);
}

.price-table thead th {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--c-heading);
  background: var(--c-bg-alt);
  white-space: nowrap;
}

.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:hover { background: var(--c-bg-alt); }
.price-table td:first-child { font-weight: 600; color: var(--c-heading); }

/* Tour page --------------------------------------------------------------- */
.split--sidebar { align-items: start; }

/* A grid track defaults to `min-width: auto`, so a wide child — the gallery's flex
   strip, a price table — stretches its column past the viewport and the whole page
   scrolls sideways on a phone. Letting tracks shrink below their content keeps the
   overflow inside the scroll containers that are built to handle it. */
.split > *,
.grid > * { min-width: 0; }

.tour__body > * + * { margin-top: var(--space-5); }
/* The source copy labels short lists ("Includes :", "Highlights :") with <h2>, which
   at the kit's default 36px overpowers the three bullets underneath. */
.tour__body h2 { margin-top: var(--space-7); font-size: var(--fs-sm); }
.tour__body h3 { margin-top: var(--space-6); font-size: 20px; }

.tour__aside { position: sticky; top: 100px; }

.tour__price-card {
  padding: var(--space-6);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.tour__price-card .pkg__price strong { font-size: 34px; }
.tour__cats { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--c-muted); }
.tour__cats a { color: var(--c-muted); }
.tour__cats a:hover { color: var(--c-accent); }

/* Tour gallery ------------------------------------------------------------ */
.tour-gallery__main {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: var(--space-3);
  border-radius: var(--radius-lg);
}

.tour-gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
}

.tour-gallery__slide img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.tour-gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  margin-top: var(--space-3);
  padding-bottom: var(--space-2);
}

.tour-gallery__thumb {
  flex: 0 0 96px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0.65;
  transition: opacity var(--transition);
}

.tour-gallery__thumb:hover { opacity: 1; }

.tour-gallery__thumb img {
  width: 96px;
  height: 64px;
  object-fit: cover;
  display: block;
}

/* Cards ------------------------------------------------------------------- */
.pkg__excerpt {
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* A homepage teaser card carries its inclusion lists in place of an excerpt, so the
   footer needs its own separation from the last bullet. */
.pkg__body .checklist { margin-bottom: var(--space-4); }
.pkg__body .checklist li { font-size: var(--fs-small); }

.checklist__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  margin-bottom: var(--space-2);
}

/* The card footer holds a price block that is itself a paragraph of copy on the
   homepage teasers ("From 35€ Per Person"), so it must not be forced onto one line. */
.pkg__foot .pkg__price p { margin: 0; font-size: var(--fs-small); }
.pkg__foot .pkg__price strong { color: var(--c-accent-dark); font-size: 18px; }

/* "Was" prices: present, but visibly superseded by the one underneath. The selector
   has to out-specify `.pkg__foot .pkg__price strong`, which paints prices orange. */
del,
del strong,
.pkg__foot .pkg__price del,
.pkg__foot .pkg__price del strong {
  color: var(--c-muted);
  font-weight: 400;
  font-size: var(--fs-small);
  text-decoration: line-through;
}

/* Hero trust line — the kit's rating cluster, carrying a fact the site actually
   states rather than a review score it does not have. */
.hero__rating-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-accent);
  box-shadow: var(--shadow-sm);
  flex: none;
}

.hero__rating-icon svg { width: 20px; height: 20px; }
.hero__rating-score { display: block; }
.hero__rating-text { display: block; font-size: var(--fs-small); color: var(--c-muted); }
.hero__badge--discount strong { font-size: 28px; line-height: 1; }

/* Section furniture ------------------------------------------------------- */
.section__intro--center { max-width: 62ch; margin-inline: auto; text-align: center; }

.embed {
  overflow: hidden;
  border-radius: var(--radius-lg);
  line-height: 0;
}

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

/* Reviews ----------------------------------------------------------------- */
.reviews__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.reviews__score {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-heading);
}

.reviews__summary-text { color: var(--c-muted); font-size: var(--fs-small); }

.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-lg);
}

.review--featured { border-color: var(--c-accent); }
.review__title { font-size: var(--fs-sm); }
.review__body { color: var(--c-muted); font-size: var(--fs-small); }
.review__body > * + * { margin-top: var(--space-3); }

.review__meta {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.stars { color: var(--c-star); letter-spacing: 2px; }

/* Booking / contact form -------------------------------------------------- */
/* The class names are fixed by booking-form.js and the PHP endpoints; only the
   styling is ours. */
.dtfm-booking__title { font-size: var(--fs-sm); }
.dtfm-booking__sub { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--c-muted); }

.dtfm-booking__form { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.dtfm-booking__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.dtfm-booking__form label {
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-heading);
}

.dtfm-booking__form input,
.dtfm-booking__form textarea,
.dtfm-booking__form select {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}

.dtfm-booking__form input:focus,
.dtfm-booking__form textarea:focus {
  outline: none;
  border-color: var(--c-accent);
}

.dtfm-booking__form textarea { resize: vertical; }

/* Honeypot: present for bots, invisible and unreachable for people. */
.dtfm-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.dtfm-booking__status { font-size: var(--fs-small); }
.dtfm-booking__status.is-success { color: #1a7f4b; }
.dtfm-booking__status.is-error { color: #b3261e; }
.dtfm-booking__wa { justify-content: center; }
.dtfm-booking__wa svg { width: 18px; height: 18px; }

/* Gallery grid ------------------------------------------------------------ */
.gallery a { display: block; overflow: hidden; border-radius: var(--radius); }
.gallery a img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1024px) {
  .nav__dropdown {
    position: static;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-3) 0 var(--space-3) var(--space-4);
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .tour__aside { position: static; }
}

@media (max-width: 768px) {
  .dtfm-booking__row { grid-template-columns: 1fr; }
}