/* ================================================================
   Ragusa Boat Charter, direct-response lander
   Brand: deep Adriatic navy #0E1F58 · ivory #F7F1E4 · sun #F4B740
   Fonts: Jost (headlines), Inter (body)
   ================================================================ */

:root {
  --navy:      #0E1F58;
  --ink:       #0A1732;
  --sun:       #F4B740;
  --sun-hover: #E9A824;
  --wa:        #25D366;
  --wa-hover:  #1DBE59;
  --ivory:     #F7F1E4;
  --paper:     #FAF7EE;
  --teal:      #2A9DAF;
  --muted:     #6B7280;
  --line:      rgba(14, 31, 88, 0.10);
  --shadow-sm: 0 1px 2px rgba(10, 23, 50, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(10, 23, 50, 0.25);
  --shadow-lg: 0 24px 60px -20px rgba(10, 23, 50, 0.35);
  --shadow-wa: 0 10px 30px -8px rgba(37, 211, 102, 0.55);
  --radius:    14px;
  --radius-lg: 22px;
  --serif:     "Jost", "Futura", "Trebuchet MS", system-ui, sans-serif;
  --sans:      "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap:      1160px;
  --wrap-narrow: 780px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
ul { margin: 0 0 1em; padding-left: 1.15rem; }
li { margin-bottom: 0.35em; }

.container { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: var(--wrap-narrow); }
.section { padding: 88px 0; }
.section.tight { padding: 64px 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  font-weight: 600;
  color: var(--sun);
  background: rgba(244, 183, 64, 0.10);
  padding: 7px 13px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.section-title { font-size: clamp(28px, 3.4vw, 42px); }
.section-lead {
  font-size: clamp(16.5px, 1.5vw, 18.5px);
  color: var(--muted);
  max-width: 78ch;
  margin: 0 auto 40px;
}

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 247, 238, 0.90);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, background .18s ease;
}
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar__wrap {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 14px 24px; max-width: var(--wrap); margin: 0 auto; gap: 16px;
}
.topbar__brand {
  font-family: var(--serif); font-weight: 700; font-size: 18px;
  letter-spacing: -0.01em; color: var(--navy);
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 0;
}
.topbar__brand::before {
  content: ""; display: inline-block;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--navy); box-shadow: inset 0 0 0 3px var(--sun);
}
.topbar__cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 22px; min-height: 44px;
  border-radius: 999px; background: var(--sun);
  color: var(--ink) !important; font-weight: 600; font-size: 14.5px;
  text-decoration: none !important; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.topbar__cta:hover { background: var(--sun-hover); transform: translateY(-1px); }

/* ---------- BUTTONS ---------- */
.btn-wa {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 13px 22px; min-height: 48px;
  border-radius: 999px; background: var(--wa); color: #fff !important;
  font-weight: 700; font-size: 15.5px; letter-spacing: 0.005em;
  text-decoration: none !important; border: none;
  box-shadow: var(--shadow-wa);
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
}
.btn-wa:hover { background: var(--wa-hover); transform: translateY(-1px); box-shadow: 0 14px 32px -8px rgba(37, 211, 102, 0.65); }
.btn-wa svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }
.btn-wa--lg { padding: 18px 32px; min-height: 56px; font-size: 17px; }
.btn-wa--lg svg { width: 22px; height: 22px; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 24px; min-height: 48px;
  border-radius: 999px; background: transparent;
  color: var(--sun) !important; font-weight: 700; font-size: 15.5px;
  border: 2px solid var(--sun); text-decoration: none !important;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.btn-secondary:hover { background: var(--sun); color: var(--ink) !important; transform: translateY(-1px); }
.btn-secondary--lg { padding: 16px 30px; min-height: 56px; font-size: 17px; }

.cta-row {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.cta-row--center { display: flex; justify-content: center; }
@media (max-width: 520px) {
  .cta-row { flex-direction: column; align-items: stretch; width: 100%; }
  .btn-wa, .btn-secondary { width: 100%; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative; color: var(--ivory);
  background: var(--navy); overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background-image: url("../assets/img/hero.jpg");
  background-size: cover;
  background-position: center center;
  filter: saturate(1.05);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(10,23,50,0.35) 0%, rgba(10,23,50,0.72) 100%),
    linear-gradient(180deg, rgba(10,23,50,0.35) 0%, rgba(10,23,50,0.25) 40%, rgba(10,23,50,0.72) 100%);
}
/* Hero background loop. hero.jpg still paints instantly underneath, so this is
   purely additive: the video fades in once it can play, and never on mobile or
   reduced-motion, where the still stays. */
.hero__bg .hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1000ms ease;
  pointer-events: none;
}
.hero__bg .hero__video.is-ready { opacity: 1; }
/* The still needs a heavy scrim (bright, hazy photo); the graded footage does not.
   Lift it only once the video is actually playing, so the sea keeps its colour. */
.hero__bg.is-video::after {
  background:
    radial-gradient(ellipse at center, rgba(10,23,50,0.24) 0%, rgba(10,23,50,0.58) 100%),
    linear-gradient(180deg, rgba(10,23,50,0.30) 0%, rgba(10,23,50,0.15) 40%, rgba(10,23,50,0.66) 100%);
}
@media (max-width: 860px) {
  .hero__bg .hero__video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg .hero__video { display: none; }
}
.hero__wrap {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin: 0 auto;
  padding: 80px 24px 96px;
}
.hero--centered .hero__wrap {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 78vh; padding: 96px 24px 112px;
}
.hero--centered .hero__inner { max-width: 820px; }
.hero__eyebrow {
  display: inline-block; color: var(--sun);
  font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; font-size: 13px;
  margin-bottom: 18px;
}
.hero__title {
  font-size: clamp(34px, 5.6vw, 62px);
  color: var(--ivory); line-height: 1.06;
  margin-bottom: 22px; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero__sub {
  font-size: clamp(16.5px, 1.65vw, 19.5px);
  color: rgba(247, 241, 228, 0.94);
  max-width: 60ch; margin: 0 auto 30px;
  text-wrap: pretty;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
}
.hero__ctas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-bottom: 24px;
}
.hero__trust {
  margin-top: 18px; font-size: 13.5px;
  color: rgba(247, 241, 228, 0.80);
  letter-spacing: 0.01em;
}
@media (max-width: 520px) {
  .hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__ctas .btn-wa, .hero__ctas .btn-secondary { width: 100%; }
}

/* ---------- 10% OFF promo sticker (hero) ----------
   Sits in the hero's top-right dead space, over the sea. Absolutely positioned
   so it never pushes the centered headline column around. Scales down and hugs
   the corner on small screens so it stays clear of the title. */
.hero__sticker {
  position: absolute; z-index: 3;
  top: 34px; right: 40px;
  width: 128px; height: 128px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--serif); font-weight: 700;
  text-align: center; line-height: 1;
  transform: rotate(-13deg);
  box-shadow: 0 14px 34px -10px rgba(10, 23, 50, 0.55);
  pointer-events: none;
  text-decoration: none !important;
}
.hero__sticker::before {
  content: ""; position: absolute; inset: 9px;
  border-radius: 50%;
  border: 1.5px dashed rgba(14, 31, 88, 0.35);
}
.hero__sticker b {
  display: block; font-size: 40px; font-weight: 700;
  letter-spacing: -0.02em;
}
.hero__sticker span {
  display: block; margin-top: 4px;
  font-size: 17px; font-weight: 600;
  letter-spacing: 0.16em; text-indent: 0.08em;
}
@media (max-width: 980px) {
  .hero__sticker { width: 104px; height: 104px; top: 22px; right: 20px; }
  .hero__sticker b { font-size: 32px; }
  .hero__sticker span { font-size: 14px; }
  .hero__sticker::before { inset: 7px; }
}
@media (max-width: 520px) {
  .hero__sticker { width: 86px; height: 86px; top: 16px; right: 14px; }
  .hero__sticker b { font-size: 27px; }
  .hero__sticker span { font-size: 12px; }
  .hero__sticker::before { inset: 6px; }
}

/* ---------- generic section headers ---------- */
.sec-head { text-align: center; margin-bottom: 44px; }

/* ---------- PAIN + SOLUTION (2-col with photo) ---------- */
.pain-solution { background: var(--ivory); }
.pain-solution__grid {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .pain-solution__grid { grid-template-columns: 1.05fr 1fr; gap: 60px; }
}
.pain-solution__text .section-title {
  font-size: clamp(26px, 3vw, 38px);
  margin-bottom: 18px;
}
.pain-solution__text p {
  font-size: 16.5px; color: var(--ink); line-height: 1.7;
}
.pain-solution__text .eyebrow { margin-bottom: 14px; }
.pain-solution__photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-md);
}

/* ---------- REVIEWS (marquee) ---------- */
.reviews-section { background: var(--paper); }
.marquee {
  overflow-x: clip; /* LEARNED_RULES [mobile]: kill sideways scroll */
  padding: 8px 0 24px;
  position: relative;
}
.marquee__row {
  display: flex; overflow: hidden;
  padding: 12px 0;
  /* NO mask-image: LEARNED_RULES [mobile] — an unprefixed mask on marquee renders as blank on iOS Safari */
}
.marquee__track {
  display: flex; flex-shrink: 0; gap: 22px;
  padding-right: 22px; /* keeps last card off the next duplicate */
  will-change: transform;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.marquee__row--left .marquee__track {
  animation-name: marquee-left;
}
.marquee__row--right .marquee__track {
  animation-name: marquee-right;
}
@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
/* pause on hover (desktop) */
.marquee:hover .marquee__track { animation-play-state: paused; }
/* pause on touch (mobile, class toggled by JS on touchstart) */
.marquee.is-paused .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__row { overflow-x: auto; }
}

.review {
  flex-shrink: 0; width: 320px;
  background: #fff; border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--sun);
  display: flex; flex-direction: column;
}
.review__stars { color: var(--sun); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.review__text { font-size: 14.5px; line-height: 1.55; color: var(--ink); flex-grow: 1; margin-bottom: 14px; }
.review__who { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.review__who strong { color: var(--navy); font-weight: 600; }
.review__source { display: inline-block; margin-left: 6px; font-size: 13px; color: var(--muted); }

/* ---------- FULL-WIDTH PHOTO BAND ---------- */
.photo-band {
  height: 42vh; min-height: 320px; max-height: 520px;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.photo-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,23,50,0.10) 0%, rgba(10,23,50,0.35) 100%);
}
@media (max-width: 720px) { .photo-band { height: 34vh; min-height: 240px; } }

/* ---------- BENEFITS (2-col: text left, slideshow right) ---------- */
.benefits { background: var(--paper); }
.benefits__grid {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .benefits__grid { grid-template-columns: 1.05fr 1fr; gap: 60px; }
}
.benefits__text .eyebrow { margin-bottom: 14px; }
.benefits__text .section-title {
  font-size: clamp(26px, 3vw, 38px); margin-bottom: 22px;
}
.benefits__list {
  list-style: none; padding: 0; margin: 0 0 8px;
  display: grid; gap: 18px;
}
.benefits__list li {
  display: grid; grid-template-columns: 48px 1fr;
  gap: 16px; align-items: start;
  margin: 0; padding: 0;
}
.benefits__list h3 { font-size: 17px; margin: 0 0 4px; color: var(--navy); }
.benefits__list p { font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.55; }
.benefit__icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(244, 183, 64, 0.18);
  color: var(--sun); display: grid; place-items: center;
  font-size: 20px;
}
.benefits__slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--ivory);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.benefits__slideshow .slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* NO cropping, per Maja: preserve full aspect */
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity .25s ease;
  background: var(--ivory);
}
.benefits__slideshow .slide.is-active { opacity: 1; }
@media (max-width: 720px) {
  .benefits__slideshow { aspect-ratio: 4 / 3; }
}

/* ---------- DIFFERENTIATORS + comparison ---------- */
.diffs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; margin-bottom: 44px;
}
.diff {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 14px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.diff__mark {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--navy); display: grid; place-items: center;
  color: var(--sun); font-size: 13px; font-weight: 700;
}
.diff strong { display: block; color: var(--navy); font-size: 15.5px; margin-bottom: 4px; }
.diff p { font-size: 14px; color: var(--muted); margin: 0; }

.compare {
  background: #fff; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line);
  overflow-x: auto;
}
.compare table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td {
  padding: 14px 18px; text-align: left; font-size: 14.5px;
  border-bottom: 1px solid var(--line);
}
.compare th {
  font-family: var(--serif); background: var(--ivory);
  color: var(--navy); font-weight: 600; font-size: 15px;
}
.compare th:first-child { background: transparent; }
.compare tbody th { background: transparent; font-family: var(--sans); font-weight: 600; color: var(--ink); }
.compare td { color: var(--muted); }
.compare td.win { color: var(--navy); font-weight: 500; background: rgba(244, 183, 64, 0.06); }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: none; }

/* ---------- HOW IT WORKS ---------- */
.how { background: var(--ivory); }
.how-steps { display: grid; gap: 22px; max-width: 820px; margin: 0 auto; }
.how-step {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 22px; align-items: start;
  background: #fff; padding: 24px;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.how-step__num {
  grid-row: 1 / 3;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--navy); color: var(--sun);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 20px;
}
.how-step h3 { margin: 0 0 4px; font-size: 17px; color: var(--navy); }
.how-step p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* ---------- OFFER ---------- */
.offer { background: var(--paper); }
.offer-cards {
  display: grid; grid-template-columns: 1fr; gap: 22px;
  max-width: 900px; margin: 0 auto 32px;
}
@media (min-width: 720px) { .offer-cards { grid-template-columns: 1fr 1fr; } }
.offer-card {
  background: #fff; border-radius: var(--radius-lg);
  padding: 30px 28px; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.offer-card__name {
  font-family: var(--serif); color: var(--navy);
  font-size: 22px; margin: 0 0 6px; font-weight: 700;
}
.offer-card__cap { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
/* 10% OFF pill, sits under the capacity line so the discount reads with the prices */
.offer-card__badge {
  align-self: flex-start;
  margin: -12px 0 18px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--sun); color: var(--ink);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow: var(--shadow-sm);
}
.offer-card__badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--navy); flex: none;
}
.offer-card__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--line); font-size: 15.5px;
}
.offer-card__row strong {
  font-family: var(--serif); color: var(--navy);
  font-size: 22px; font-weight: 700;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.price-from {
  font-family: var(--sans);
  font-size: 13px; font-weight: 500;
  color: var(--muted); text-transform: lowercase;
  letter-spacing: 0.02em;
}
.offer-includes {
  max-width: 820px; margin: 0 auto 30px; text-align: center;
  padding: 22px; background: var(--navy); color: var(--ivory);
  border-radius: var(--radius); font-size: 15.5px; line-height: 1.55;
}
.offer-includes strong { color: var(--sun); }
.offer-fine {
  text-align: center; color: var(--muted); font-size: 13.5px;
  max-width: 640px; margin: 0 auto; line-height: 1.55;
}

/* ---------- TEAM ---------- */
.team { background: var(--ivory); }
.team__wrap {
  display: grid; grid-template-columns: 1fr; gap: 34px;
  max-width: 960px; margin: 0 auto;
}
@media (min-width: 800px) { .team__wrap { grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; } }
.team__photo {
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  background-image: url("../assets/img/scene1.jpg");
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-md);
}
.team__body h2 { font-size: clamp(26px, 3vw, 34px); }
.team__body p { color: var(--ink); font-size: 16.5px; line-height: 1.7; margin-bottom: 12px; }
.team__body p:last-child { color: var(--muted); font-size: 14.5px; }

/* ---------- ARCHETYPES ---------- */
.archetypes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.arch {
  background: #fff; border-radius: var(--radius);
  padding: 26px 24px; border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.arch__label {
  font-family: var(--serif); color: var(--navy);
  font-size: 17px; font-weight: 700; margin: 0 0 10px;
}
.arch__body {
  color: var(--ink); font-size: 14.5px; line-height: 1.6;
  margin: 0 0 16px; flex-grow: 1;
}
.arch__quote {
  padding: 12px 14px;
  background: var(--ivory); border-left: 3px solid var(--sun);
  border-radius: 8px;
  font-style: italic; font-size: 13.5px; color: var(--ink); line-height: 1.55;
}
.arch__quote span {
  display: block; font-style: normal;
  margin-top: 6px; font-size: 13px; color: var(--muted);
}

/* ---------- FAQ ---------- */
.faq { background: var(--paper); }
.faq-list { max-width: 820px; margin: 0 auto; }
details.faq-item {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--line); padding: 0;
  margin-bottom: 12px; overflow: hidden;
}
details.faq-item[open] { box-shadow: var(--shadow-md); border-color: transparent; }
details.faq-item summary {
  list-style: none; padding: 18px 22px; cursor: pointer;
  font-family: var(--serif); font-weight: 600; color: var(--navy);
  font-size: 16.5px; display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "+"; color: var(--sun);
  font-size: 22px; font-weight: 700; flex-shrink: 0;
  transition: transform .18s ease;
}
details.faq-item[open] summary::after { content: "−"; }
details.faq-item p {
  padding: 0 22px 20px; margin: 0;
  color: var(--ink); font-size: 15px; line-height: 1.65;
}

/* ---------- FULL STOP + book form ---------- */
.full-stop {
  background: var(--navy); color: var(--ivory);
  position: relative; overflow: hidden;
}
.full-stop::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/img/scene2.jpg");
  background-size: cover; background-position: center;
  opacity: 0.14;
}
.full-stop .container { position: relative; }
.full-stop__grid {
  display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center;
}
@media (min-width: 900px) {
  .full-stop__grid { grid-template-columns: 1.15fr 1fr; gap: 60px; }
  .full-stop__grid--book { grid-template-columns: 1fr 1fr; gap: 50px; }
}
/* :not() keeps this off the lead-form title. The form card sits INSIDE .full-stop but has a
   light background, so the ivory colour here made it invisible (and overrode its 22px size),
   because `.full-stop h2` outranks the single-class `.card-form__title` below. */
.full-stop h2:not(.card-form__title) { color: var(--ivory); font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 20px; }
.full-stop ul { list-style: none; padding: 0; margin: 0 0 24px; }
.full-stop li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  color: rgba(247, 241, 228, 0.92); font-size: 15.5px; padding: 6px 0;
}
.full-stop li::before {
  content: ""; width: 18px; height: 18px; margin-top: 3px;
  background: var(--sun);
  clip-path: polygon(43% 62%, 20% 40%, 10% 50%, 43% 82%, 92% 30%, 82% 20%);
}

/* ---------- LEAD FORM CARD ---------- */
.card-form {
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-lg); padding: 28px 28px 24px;
  box-shadow: var(--shadow-lg); border-top: 4px solid var(--sun);
  position: relative;
}
.card-form__title { font-size: 22px; color: var(--navy); margin: 0 0 16px; }

/* ---------- MULTI-STEP FORM ---------- */
.step-progress {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.step-progress__bar {
  flex: 1; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden;
}
.step-progress__fill {
  height: 100%; background: var(--sun);
  border-radius: 999px; transition: width .35s ease;
}
.step-progress__label {
  font-size: 13px; color: var(--muted); font-weight: 500;
  white-space: nowrap;
}
.step-progress__label .step-current { color: var(--navy); font-weight: 700; }

.form-step { display: none; }
.form-step.active { display: block; animation: step-in .28s ease; }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.form-step__label {
  display: block; font-family: var(--serif); font-weight: 600;
  color: var(--navy); font-size: 18px; margin-bottom: 14px;
}
.step-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 20px;
}
.step-nav .btn-primary { margin-left: auto; }
.btn-back {
  background: transparent; border: none;
  color: var(--muted); font-weight: 500; font-size: 14px;
  padding: 10px 4px; cursor: pointer;
  transition: color .12s ease;
}
.btn-back:hover { color: var(--navy); }

/* ---------- form fields ---------- */
.field { display: block; margin-bottom: 14px; }
.field > label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink); margin-bottom: 6px; letter-spacing: 0.01em;
}
.field input, .field select {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff;
  font: inherit; color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(14, 31, 88, 0.12);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- pills (form choices) ---------- */
.pills { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.pills--stack { grid-template-columns: 1fr; gap: 10px; }
.pill {
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center;
  padding: 14px 12px; min-height: 56px;
  border-radius: 12px; border: 1.5px solid var(--line);
  background: #fff; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--ink);
  transition: all .12s;
  line-height: 1.25;
}
.pill:hover { border-color: var(--navy); }
.pill.active {
  border-color: var(--navy); background: var(--navy); color: var(--ivory);
}
.pill small { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.pill.active small { color: rgba(247, 241, 228, 0.80); }
.pills--stack .pill { padding: 16px 18px; min-height: 60px; flex-direction: row; justify-content: space-between; text-align: left; }
.pills--stack .pill small { margin-top: 0; margin-left: auto; }

/* ---------- primary submit ---------- */
.btn-primary {
  display: block; width: 100%;
  padding: 15px 20px; border-radius: 12px;
  background: var(--sun); color: var(--ink);
  border: none; font-weight: 700; font-size: 16.5px;
  letter-spacing: 0.005em; box-shadow: var(--shadow-md);
  transition: background .12s, transform .12s, box-shadow .12s;
}
.btn-primary:hover { background: var(--sun-hover); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-primary:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-primary--sm { width: auto; padding: 12px 22px; font-size: 15px; min-height: 44px; }

.form-error {
  color: #B23A2A; font-size: 13.5px; margin: 12px 0 0;
  display: none;
}
.form-error.show { display: block; }

/* ---------- consent (GDPR) ---------- */
.consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 2px;
}
.consent input[type="checkbox"] {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--navy); cursor: pointer;
}
.consent label {
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
  cursor: pointer; letter-spacing: 0;
}
.consent a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- legal / prose pages (privacy policy) ---------- */
.legal { max-width: var(--wrap-narrow); margin: 0 auto; padding: 110px 24px 72px; }
.legal .legal-back { display: inline-block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 22px; }
.legal h1 { font-size: clamp(30px, 5vw, 42px); margin-bottom: 8px; }
.legal .legal-meta { font-size: 13.5px; color: var(--muted); margin-bottom: 26px; }
.legal h2 { font-size: 20px; margin: 34px 0 10px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.7; color: #33405C; }
.legal a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal .legal-box {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--sun);
  border-radius: var(--radius); padding: 18px 22px; margin: 22px 0;
}
.legal .legal-box p { margin-bottom: 4px; }
.legal .legal-box p:last-child { margin-bottom: 0; }
@media (max-width: 720px) { .legal { padding: 96px 20px 56px; } }
.footer__legal { font-weight: 600; }

/* ---------- WhatsApp float (sticky) ---------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px;
  background: var(--wa); color: #fff !important;
  font-family: var(--sans); font-weight: 600; font-size: 14.5px;
  text-decoration: none !important;
  box-shadow: var(--shadow-wa);
  transition: transform .12s ease, box-shadow .12s ease;
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(37, 211, 102, 0.65); }
.wa-float svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }
@media (max-width: 480px) {
  .wa-float { right: 14px; bottom: 14px; padding: 14px; }
  .wa-float__label { display: none; }
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--ink); color: rgba(247, 241, 228, 0.7);
  padding: 40px 24px; text-align: center;
  font-size: 13.5px; line-height: 1.7;
}
.footer strong { color: var(--sun); font-weight: 600; }
.footer a { color: rgba(247, 241, 228, 0.85); text-decoration: none; }
.footer a:hover { color: var(--sun); text-decoration: underline; }
.footer__sep { color: rgba(247, 241, 228, 0.3); margin: 0 8px; }

/* ---------- reveal (progressive enhancement) ---------- */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- MOBILE tweaks ---------- */
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .container { padding: 0 20px; }
  .hero__wrap { padding: 64px 20px 72px; }
  .hero--centered .hero__wrap { min-height: 88vh; padding: 72px 20px 80px; }
  .hero__title { font-size: clamp(30px, 8vw, 40px); }
  .card-form { padding: 22px 20px 20px; }
  .card-form__title { font-size: 19px; }
  .section-title { font-size: clamp(24px, 6.4vw, 32px); }
  .section-lead { font-size: 15.5px; }
  .review { width: 280px; padding: 20px; }
  .review__text { font-size: 14px; }
  .offer-card { padding: 24px 22px; }
  .offer-card__row strong { font-size: 20px; }
  .full-stop h2:not(.card-form__title) { font-size: clamp(26px, 7vw, 34px); }
  .team__body h2 { font-size: 26px; }
  .pill { padding: 14px 10px; font-size: 14px; min-height: 60px; }
  .pill small { font-size: 12.5px; }
  .pills--stack .pill { padding: 16px 16px; }
  .topbar__cta { padding: 12px 16px; min-height: 44px; font-size: 14px; }
  .topbar__brand { font-size: 16px; padding: 8px 0; }
  .marquee__track { animation-duration: 45s; }

  /* comparison table converts to stacked cards on mobile */
  .compare { border: none; background: transparent; overflow: visible; }
  .compare table, .compare thead, .compare tbody, .compare tr, .compare th, .compare td {
    display: block; width: auto; min-width: 0; border: none;
  }
  .compare thead { display: none; }
  .compare tbody tr {
    display: grid; grid-template-columns: 1fr;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); margin-bottom: 14px; padding: 16px 18px;
  }
  .compare tbody tr th {
    background: transparent; color: var(--navy);
    font-family: var(--serif); font-weight: 700;
    font-size: 15.5px; padding: 0 0 10px;
    border-bottom: 1px solid var(--line);
  }
  .compare tbody tr td {
    padding: 8px 0 0; font-size: 14px; line-height: 1.45;
  }
  .compare tbody tr td:first-of-type {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: rgba(107, 114, 128, 0.4);
  }
  .compare tbody tr td:first-of-type::before { content: "Group tour: "; color: var(--muted); text-decoration: none; font-weight: 500; }
  .compare tbody tr td.win { background: transparent; color: var(--navy); font-weight: 600; }
  .compare tbody tr td.win::before { content: "With Ragusa: "; color: var(--sun); font-weight: 600; }
}

@media (max-width: 380px) {
  .field-row { grid-template-columns: 1fr; }
  .hero__title { font-size: 28px; }
  .review { width: 260px; }
}