/* Vuelto Loco Charters
   Tokens taken from the live Divi site so the port reads 1:1. Section 23. */

:root {
  --c-dark: #01193E;          /* the dominant navy, most of the page sits on this */
  --c-dark-deep: #010F26;
  --c-accent: #3AA84A;        /* brand green. 5.69:1 on navy, fine for text and borders */
  --c-accent-deep: #2E8C3B;
  --c-accent-on-light: #256E30; /* 5.79:1 on the light ground; brand green is only 2.82:1 there */
  /* White on the brand green is only 3.05:1, so it fails AA for button labels (4.5:1
     needed at our 17px/500). The live Divi site has the same failure. Buttons therefore
     use a darkened variant that clears AA while still reading as the same green. The
     brand value above is unchanged and still used everywhere it already passes. */
  --c-btn: #2E863B;           /* 4.58:1 with white */
  --c-btn-hover: #256E30;     /* 6.03:1 with white */
  --c-secondary: #2098D1;
  --c-paper: #FFFFFF;
  --c-ink: #01193E;
  --c-ink-60: rgba(1, 25, 62, .6);
  --c-on-dark: rgba(255, 255, 255, .92);
  --c-on-dark-60: rgba(255, 255, 255, .62);
  --c-on-accent: #FFFFFF;
  --c-line: rgba(255, 255, 255, .16);

  --font-head: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --nav-h: 76px;
  --radius: 6px;
  --wrap: 1180px;
  --gap: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The nav is fixed at 76px, so an anchor target (or an element the browser scrolls to
     when it receives focus) would otherwise land underneath it. Covers WCAG 2.2 2.4.11
     "focus not obscured" for keyboard users as well as plain #anchor links. */
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  padding-top: var(--nav-h);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-on-dark);
  background: var(--c-dark-deep);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; line-height: 1.15; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
p { margin: 0 0 1.1em; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--c-accent); }

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

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 999;
  background: var(--c-accent); color: var(--c-on-accent);
  padding: .7rem 1.1rem; border-radius: var(--radius); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(3rem, 7vw, 6rem) 0; }
.section-light { background: var(--c-paper); color: var(--c-ink); }
.section-light a { text-decoration-color: rgba(1, 25, 62, .3); }
.eyebrow {
  font-family: var(--font-head); font-size: .95rem; letter-spacing: .06em;
  color: var(--c-accent); margin: 0 0 .35em; text-transform: none;
}
.section-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lede { font-size: 1.12rem; color: var(--c-on-dark-60); }
.section-light .lede { color: var(--c-ink-60); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-block; font-family: var(--font-head); font-weight: 500;
  padding: .75rem 1.5rem; border-radius: var(--radius); text-decoration: none;
  transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--c-btn); color: var(--c-on-accent); }
.btn-primary:hover { background: var(--c-btn-hover); transform: translateY(-1px); }
.btn-ghost { border: 1px solid rgba(255, 255, 255, .55); color: #fff; letter-spacing: .08em; }
.btn-ghost:hover { border-color: var(--c-accent); background: rgba(58, 168, 74, .12); }
.btn-whatsapp { background: #25D366; color: #04231a; font-weight: 600; }
.btn-whatsapp:hover { background: #1eb356; }

/* ---------------------------------------------------------------- nav
   The logo overhangs the bar and carries a higher z-index. On the Divi site the
   wordmark was clipped by the viewport edge and the boat mark sat behind the bar. */

.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  background: linear-gradient(to bottom, rgba(1, 15, 38, .92), rgba(1, 15, 38, .72));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
}
.nav-inner {
  width: min(100% - 2rem, 1440px); margin-inline: auto; height: 100%;
  display: flex; align-items: center; gap: 1rem;
}
.nav-logo {
  position: relative; z-index: 110;   /* in FRONT of the bar, the bug fix */
  flex: 0 0 auto; display: block; margin-right: auto;
}
.nav-logo img { width: clamp(120px, 13vw, 190px); height: auto; }

/* Scoped to the DIRECT child list. ".nav-links ul" also matches .sub-menu, which is a ul
   nested inside .nav-links, and at 0,1,1 it outranks ".sub-menu" at 0,1,0. That made
   display:flex win over display:none and left the Charters dropdown permanently open. */
.nav-links ul { list-style: none; margin: 0; padding: 0; }
.nav-links > ul { display: flex; align-items: center; gap: 1.4rem; }
.nav-links a { font-family: var(--font-head); font-size: .98rem; text-decoration: none; color: var(--c-on-dark);
  display: inline-block; padding-block: 3px; min-height: 24px; }
.nav-links a:hover { color: var(--c-accent); }
.nav-links .has-sub { position: relative; display: flex; align-items: center; gap: .2rem; }
.sub-toggle {
  background: none; border: 0; color: inherit; cursor: pointer; padding: .3rem; line-height: 0;
}
.sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 270px; display: none;
  flex-direction: column; gap: 0; padding: .5rem 0;
  background: var(--c-dark-deep); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.sub-menu li { width: 100%; }
.sub-menu a { display: block; padding: .55rem 1rem; font-size: .92rem; min-height: 24px; }
.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu,
.sub-toggle[aria-expanded="true"] + .sub-menu { display: flex; }

.nav-cta { flex: 0 0 auto; padding: .6rem 1.2rem; font-size: .95rem; }

.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: .6rem; z-index: 110;
}
.nav-hamburger span { display: block; width: 26px; height: 2px; background: #fff; transition: transform .25s ease, opacity .2s ease; }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0; display: none;
    background: var(--c-dark-deep); border-bottom: 1px solid var(--c-line);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.is-open { display: block; }
  .nav-links > ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0; }
  .nav-links > ul > li > a { display: block; padding: .85rem 1.5rem; }
  .nav-links .has-sub { flex-wrap: wrap; }
  .nav-links .has-sub > a { flex: 1; }
  .sub-menu { position: static; width: 100%; border: 0; border-radius: 0; background: rgba(0, 0, 0, .25); }
  .has-sub:hover .sub-menu { display: none; }
  .sub-toggle[aria-expanded="true"] + .sub-menu { display: flex; }
  .nav-hamburger { display: flex; }
  .nav-cta { display: none; }
}

/* ---------------------------------------------------------------- hero
   SIGNATURE 1. The image dissolves into the section below rather than stopping at a
   hard edge, and the navy carries on down the page. Built as CSS gradient layers over
   the photo, never baked into the image, so it stays sharp and re-themes for free.
   The top stop also keeps the nav legible over a bright sky. */

.hero { position: relative; min-height: min(88vh, 780px); display: grid; align-items: end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    /* top: darken behind the fixed nav */
    linear-gradient(to bottom, rgba(1, 25, 62, .78) 0, rgba(1, 25, 62, .12) 22%, transparent 38%),
    /* bottom: the fade that carries into the next section, no hard edge */
    linear-gradient(to bottom, transparent 45%, rgba(1, 15, 38, .55) 74%, var(--c-dark-deep) 100%);
}
.hero-content { position: relative; z-index: 2; padding-bottom: clamp(3rem, 8vh, 6rem); text-align: center; }
.hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.hero-sub { font-size: clamp(1rem, 2vw, 1.3rem); color: var(--c-on-dark); margin-bottom: 1.6rem; }

/* Slide carousel: the Slider Revolution replacement. CSS-driven, JS only swaps a class. */
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: .35rem; }
/* Target size 2.5.8: the dot reads as 11px but the button is a full 24x24 hit area,
   built from padding plus background-clip so the visible dot does not grow. */
.hero-dots button {
  width: 24px; height: 24px; padding: 6px; border: 0; background: transparent;
  cursor: pointer; border-radius: 50%; display: grid; place-items: center;
}
.hero-dots button::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .85); background: transparent;
}
.hero-dots button[aria-current="true"]::before { background: var(--c-accent); border-color: var(--c-accent); }

/* Page hero, the shorter variant on interior pages. Same fade, less height. */
.page-hero { min-height: min(58vh, 520px); }

/* ---------------------------------------------------------------- charter cards
   SIGNATURE 2. On the Divi site the description sits at opacity 0, translated 100px
   down, and slides up on hover. Recreated here in CSS. It is NOT a 3D flip, despite
   the name: matching what is actually on the site mattered more than the label.
   Touch devices get the description permanently visible, because there is no hover. */

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }

.charter-card {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border: 6px solid #fff; border-radius: 2px; text-decoration: none; color: #fff;
  background: var(--c-dark-deep);
}
.charter-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.charter-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(1, 15, 38, .9) 0, rgba(1, 15, 38, .35) 45%, transparent 70%);
}
.charter-card-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.2rem; }
.charter-card-title {
  font-family: var(--font-head); font-size: 1.05rem; letter-spacing: .04em;
  text-transform: uppercase; margin: 0;
}
.charter-card-desc {
  margin: .6rem 0 0; font-size: .93rem; color: var(--c-on-dark);
  opacity: 0; transform: translateY(100px); visibility: hidden;
  transition: opacity .9s ease, transform .5s ease, visibility .9s;
}
.charter-card:hover .charter-card-desc,
.charter-card:focus-visible .charter-card-desc,
.charter-card:focus-within .charter-card-desc {
  opacity: 1; transform: translateY(0); visibility: visible;
}
.charter-card:hover img { transform: scale(1.04); }
.charter-card img { transition: transform .6s ease; }

/* No hover on touch: never hide content behind an interaction the device cannot do. */
@media (hover: none) {
  .charter-card-desc { opacity: 1; transform: none; visibility: visible; }
}

/* ---------------------------------------------------------------- before/after
   SIGNATURE 3. The Nella fish kiss. Draggable, keyboard operable via the range input,
   and touch-friendly. The range input IS the control, not a decoration: that is what
   makes it accessible for free. Sized to fit one viewport on desktop. */

/* Height drives this box, not width. The source photos are portrait (1099x1600), so sizing
   by width and clamping the height just crops the subject out of frame. Driving from the
   viewport height instead keeps the whole photo visible AND satisfies the brief that it fit
   one viewport on desktop. Width follows from the aspect ratio. */
.compare {
  position: relative; margin-inline: auto; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 1099 / 1600;
  height: min(76vh, 780px);
  width: auto; max-width: 100%;
  background: var(--c-dark-deep); touch-action: pan-y;
}
/* On a narrow screen there is no height to spare, so fall back to width-driven. */
@media (max-width: 700px) {
  .compare { height: auto; width: min(100%, 460px); }
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The "after" (kiss) image grows from the left edge as the handle moves right, so the
   default view is mostly the "before" (holding) shot and dragging right reveals the kiss. */
.compare-after { clip-path: inset(0 calc(100% - var(--pos, 15%)) 0 0); }
.compare-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 15%); width: 2px;
  background: #fff; transform: translateX(-1px); pointer-events: none; z-index: 3;
}
.compare-handle {
  position: absolute; top: 50%; left: var(--pos, 15%); z-index: 4;
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); border: 2px solid #fff;
  backdrop-filter: blur(4px); pointer-events: none;
  display: grid; place-items: center; color: #fff;
}
.compare-label {
  position: absolute; top: 1rem; z-index: 3; padding: .3rem .7rem; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase; border-radius: 3px;
  background: rgba(1, 15, 38, .6); color: #fff;
}
.compare-label-after { left: 1rem; }
.compare-label-before { right: 1rem; }
/* The real control. Transparent, full-bleed, and on top: drag, click or arrow-key it. */
.compare-range {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
}
.compare-range:focus-visible ~ .compare-handle { outline: 3px solid var(--c-accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- charter detail */

.charter-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); margin: 2.5rem 0; }
.fact { border-left: 2px solid var(--c-accent); padding-left: 1rem; }
.fact h3 { font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-accent); margin-bottom: .3rem; }
.fact p { margin: 0; font-size: .97rem; }

.price-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: 1.4rem; }
.price-amount { font-family: var(--font-head); font-size: clamp(2rem, 5vw, 2.8rem); color: #fff; line-height: 1; }
.price-tax { font-size: .95rem; color: var(--c-on-dark-60); }
.price-basis { flex-basis: 100%; font-size: .92rem; color: var(--c-on-dark-60); margin: 0; }

/* ---------------------------------------------------------------- carousel strip */

.charter-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: var(--gap); overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; }
.charter-strip > * { scroll-snap-align: start; }
.strip-card { text-decoration: none; color: #fff; }
.strip-card img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.strip-card h3 { font-size: 1.05rem; margin: .7rem 0 0; }

/* ---------------------------------------------------------------- gallery */

.gallery-grid { columns: 3 260px; column-gap: var(--gap); }
.gallery-grid figure { margin: 0 0 var(--gap); break-inside: avoid; }
.gallery-grid img { border-radius: var(--radius); width: 100%; }

/* ---------------------------------------------------------------- testimonials */

.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.quote { background: rgba(255, 255, 255, .05); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.6rem; }
.quote blockquote { margin: 0 0 1rem; font-size: 1.02rem; }
.quote cite { font-style: normal; font-size: .9rem; color: var(--c-on-dark-60); }
.quote-stars { color: var(--c-accent); letter-spacing: .1em; margin-bottom: .6rem; }

/* ---------------------------------------------------------------- FAQ */

.faq-list { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item summary {
  cursor: pointer; padding: 1.1rem 0; font-family: var(--font-head); font-size: 1.1rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--c-accent); font-size: 1.5rem; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding-bottom: 1.2rem; color: var(--c-on-dark); }

/* ---------------------------------------------------------------- forms */

.form-wrap { max-width: 760px; margin-inline: auto; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 1.2rem; }
.form-field { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .35rem; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { font-family: var(--font-head); font-size: .95rem; }
.req { color: var(--c-accent); }
.form-field input, .form-field select, .form-field textarea {
  font: inherit; font-size: 1rem; padding: .7rem .8rem; border-radius: 10px;
  border: 1px solid transparent; background: #EEEEEE; color: var(--c-ink);
}
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible { border-color: var(--c-accent); }
.form-field [aria-invalid="true"] { border-color: #E4572E; background: #fdeeea; }
.form-hint { font-size: .84rem; color: var(--c-on-dark-60); }
.section-light .form-hint { color: var(--c-ink-60); }
.form-error { font-size: .84rem; color: #FFB4A2; min-height: 1em; }
.section-light .form-error { color: #C0392B; }
.form-gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit { margin-top: .5rem; border: 0; font-size: 1rem; cursor: pointer; }
.form-trust { font-size: .88rem; color: var(--c-on-dark-60); margin-top: .8rem; }
.section-light .form-trust { color: var(--c-ink-60); }
.form-status-error { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--radius); background: rgba(228, 87, 46, .15); border: 1px solid rgba(228, 87, 46, .5); }
.form-success { text-align: center; padding: 2rem 1rem; }

/* ---------------------------------------------------------------- WhatsApp FAB */

.whatsapp-fab {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.whatsapp-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #25D366; opacity: .55; animation: fab-pulse 2.4s ease-out infinite; z-index: -1;
}
@keyframes fab-pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.7); opacity: 0; } }

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--c-dark-deep); padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem; border-top: 1px solid var(--c-line); }
.footer-partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; padding-bottom: 2.5rem; }
.partner-logo img { max-height: 74px; width: auto; opacity: .85; }
.partner-logo:hover img { opacity: 1; }
.footer-grid { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.footer-col h2 { font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-accent); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.footer-col a, .footer-contact a { font-size: .94rem; text-decoration: none; color: var(--c-on-dark);
  display: inline-block; padding-block: 3px; min-height: 24px; }
.footer-col a:hover, .footer-contact a:hover { color: var(--c-accent); }
.footer-brand img { max-width: 200px; }
.footer-tagline { font-size: .92rem; color: var(--c-on-dark-60); margin-top: .8rem; }
.footer-contact address { font-style: normal; font-size: .94rem; line-height: 1.9; margin-bottom: 1rem; }
.footer-org { font-weight: 600; }
.footer-social { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; gap: 1rem; }
.footer-legal {
  width: min(100% - 2.5rem, var(--wrap)); margin: 2.5rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .5rem; font-size: .86rem; color: var(--c-on-dark-60);
}
.footer-legal p { margin: 0; }
.footer-legal a { display: inline-block; padding-block: 4px; min-height: 24px; }

/* ---------------------------------------------------------------- prose + misc */

.prose { max-width: 760px; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }
.video-block { width: min(100%, 900px); margin-inline: auto; }
.video-block video { width: 100%; border-radius: var(--radius); display: block; }
.breadcrumbs { font-size: .86rem; color: var(--c-on-dark-60); padding: 1rem 0 0; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-accent); }

@media (max-width: 620px) {
  .gallery-grid { columns: 2 150px; }
  .compare { width: 100%; }
}

/* ---------------------------------------------------------------- reduced motion
   Section 5. Everything above degrades to a static, fully readable page. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  /* Never leave the card description hidden behind an animation that no longer runs. */
  .charter-card-desc { opacity: 1; transform: none; visibility: visible; }
  .hero-slide { transition: none; }
  .whatsapp-fab::before { display: none; }
}

/* ---------------------------------------------------------------- lightbox
   Native <dialog>. ::backdrop is the browser's own overlay, so no z-index war. */

.gallery-item {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: var(--radius); overflow: hidden;
}
.gallery-item img { transition: transform .4s ease, opacity .3s ease; }
.gallery-item:hover img { transform: scale(1.03); opacity: .92; }

.lightbox {
  /* Viewport units, not percentages: a <dialog> is positioned by the browser and
     height:100% does not resolve against the viewport, which let tall portrait photos
     overflow and pushed the caption off screen. dvh so mobile browser chrome is handled. */
  border: 0; padding: 0; background: transparent; overflow: hidden;
  width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
}
.lightbox::backdrop { background: rgba(1, 15, 38, .93); backdrop-filter: blur(6px); }
.lightbox-figure {
  margin: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  place-items: center; padding: 3.5rem 4.5rem 1.5rem;
}
/* min-height:0 so the 1fr row is allowed to shrink below the image's intrinsic height.
   Without it a grid track refuses to go under its content and the photo overflows. */
.lightbox-figure img {
  max-width: 100%; max-height: 100%; min-height: 0; width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius);
}
.lightbox-figure figcaption {
  color: var(--c-on-dark-60); font-size: .88rem; padding-top: .9rem; text-align: center;
  max-width: 60ch;
}
.lightbox-close, .lightbox-nav {
  position: fixed; z-index: 2; background: rgba(255, 255, 255, .1); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; cursor: pointer;
  width: 46px; height: 46px; font-size: 1.6rem; line-height: 1; display: grid; place-items: center;
}
.lightbox-close:hover, .lightbox-nav:hover { background: var(--c-btn); border-color: var(--c-btn); }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

@media (max-width: 620px) {
  .lightbox-figure { padding: 3.5rem .75rem 1.25rem; }
  .lightbox-nav { top: auto; bottom: 1rem; transform: none; }
}

/* Breadcrumbs as a real ordered list, matching the BreadcrumbList schema. */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .4rem; opacity: .5; }
.breadcrumbs [aria-current="page"] { color: var(--c-on-dark); }

/* Sunset strip on the home page. */
.sunset-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.sunset-strip img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); width: 100%; }
.quote-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: .6rem; }

/* Footer social: icon plus label. Section 14 says use an SVG icon set, never a bare
   text link and never an emoji. Label kept alongside for clarity and for screen readers. */
.footer-social a { display: inline-flex; align-items: center; gap: .5rem; min-height: 24px; }
.footer-social svg { flex: 0 0 auto; }
.footer-social a:hover svg { color: var(--c-accent); }

/* ------------------------------------------------------------- cookie consent
   Native banner, s.24. Sits above the WhatsApp FAB, never covers focused content
   (it is the last element in the tab order and position:fixed at the bottom edge). */
.consent-bar {
  position: fixed; inset: auto 0 0 0; z-index: 95;
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center;
  justify-content: center; padding: .9rem 1.2rem;
  background: var(--c-dark-deep); border-top: 1px solid var(--c-line);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
}
.consent-bar p { margin: 0; font-size: .92rem; max-width: 60ch; }
.consent-actions { display: flex; gap: .7rem; }
.consent-actions .btn { padding: .55rem 1.1rem; font-size: .92rem; border: 0; cursor: pointer; }
.consent-actions .btn-ghost { border: 1px solid rgba(255, 255, 255, .55); }

/* Blog table of contents (s.25: TOC on long pages and posts). */
.toc { margin: 2rem 0 2.5rem; padding: 1.2rem 1.5rem; background: rgba(255,255,255,.04);
  border: 1px solid var(--c-line); border-radius: var(--radius); }
.toc h2 { font-size: 1rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: .6rem; }
.toc ol { margin: 0; padding-left: 1.2rem; columns: 2 240px; column-gap: 2rem; }
.toc li { margin-bottom: .35rem; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { color: var(--c-accent); text-decoration: underline; }
.prose figure { margin: 2rem 0; }
.prose figure img { border-radius: var(--radius); width: 100%; height: auto; }
.prose figcaption { font-size: .86rem; color: var(--c-on-dark-60); padding-top: .6rem; }

/* Language toggle (s.6): border pill, flag + text, never flag alone. */
.lang-toggle {
  background: transparent; border: 1px solid rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .75); padding: .3rem .8rem; border-radius: 2px;
  font-size: .78rem; text-decoration: none; white-space: nowrap;
}
.lang-toggle:hover { border-color: var(--c-accent); color: var(--c-accent); }
/* ONE language switcher, in the bar itself at every width: after the CTA on desktop
   (s.6 position), beside the hamburger on mobile, never inside the hamburger menu. */
.nav-lang { display: inline-block; flex: 0 0 auto; }

/* ---------------------------------------------- deep charter sections (bespoke) */

.section-jump { margin-block: 2rem; }
.section-jump ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.section-jump a {
  display: inline-block; padding: .45rem .85rem;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  font-size: .9rem; color: var(--c-on-dark); text-decoration: none;
}
.section-jump a:hover, .section-jump a:focus-visible {
  border-color: var(--c-accent); color: var(--c-accent);
}

.section-photo {
  display: block; width: 100%; height: auto; max-width: 560px;
  border-radius: var(--radius); margin-top: 2rem;
}

/* ------------------------------------------------------ multi-day package cards */

.package-grid {
  /* 400px min so four cards land as a clean 2x2 on desktop rather than 3 plus an orphan.
     min(400px, 100%) so a phone narrower than 400px collapses to one column instead of
     forcing a 400px track and scrolling the page sideways. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: var(--gap);
}
.package {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
}
.package h3 { margin-bottom: .35rem; font-size: 1.25rem; }
.package-meta {
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: 1rem;
}
.package p { font-size: .96rem; }
.package-for { margin-bottom: 0; color: var(--c-on-dark-60); font-size: .92rem; }
.section-light .package { background: rgba(1, 25, 62, .04); border-color: rgba(1, 25, 62, .12); }
/* Brand green on the light ground is 2.82:1 and fails AA for text this size. These two
   land on light sections (package meta, and fact headings inside the bespoke sections,
   which alternate light), so they take the darker green. */
.section-light .package-meta,
.section-light .fact h3 { color: var(--c-accent-on-light); }
.section-light .package-for { color: var(--c-ink-60); }