/* ==========================================================================
   Coral Sands Tours & Transfers — "Fiji" design system
   Colours sampled from the place itself: the deep Pacific and turquoise lagoon
   off Vuda, the rainforest and sunlit hills, and the sand in between.
   ========================================================================== */

:root {
  /* Sand & light */
  --ivory: #FBF9F4;
  --sand: #F2ECE0;
  --sand-2: #E6DCC8;

  /* Ocean */
  --shallows: #E0F2F4;   /* reef-flat water */
  --foam: #9EDFE7;       /* light turquoise, used on dark backgrounds */
  --lagoon: #1FA7B8;     /* turquoise lagoon */
  --ocean: #1B54A2;      /* deep ocean blue: buttons, links */
  --abyss: #0B3150;      /* deep Pacific: headings, dark sections */
  --abyss-2: #072440;    /* footer */

  /* Greenery */
  --leaf-50: #EDF2E0;    /* light fern */
  --leaf: #93A53E;       /* sunlit hillside */
  --fern: #4C6B1F;       /* green accent text */
  --rainforest: #16301E; /* deep rainforest */
  --sun: #D9AE62;        /* sunlit sand: fine lines */

  /* Sunset — sampled from the Coral Sands logo */
  --sunset: #F4A340;       /* logo orange: primary actions (dark text) */
  --sunset-deep: #EC8F24;  /* hover */
  --sunset-light: #FDC070; /* sunset glow: highlights on dark and photos */
  --sunset-soft: #FDEBD2;  /* warm tint behind icons */
  --ember: #B5561B;        /* orange for text on light backgrounds */

  --ink: #1E3242;
  --muted: #566877;
  --line: rgba(11, 49, 80, .12);

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 22px;
  --radius-lg: 34px;
  --arch: 999px 999px 26px 26px;
  --ease: cubic-bezier(.22, .7, .12, 1);
  --shadow-soft: 0 40px 70px -40px rgba(11, 49, 80, .45);
  --shadow-card: 0 24px 50px -30px rgba(11, 49, 80, .35);
  --container: 1240px;
  --header-h: 84px;
}

/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ocean); text-underline-offset: 4px; }
h1, h2, h3 {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.012em;
  color: var(--abyss);
  text-wrap: balance;
}
h2 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); }
h3 { font-size: 1.7rem; font-weight: 600; }
h2 em, h3 em { font-style: italic; color: var(--ocean); }
p { margin: 0 0 1.1em; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; border-radius: 6px; }

.container { width: min(100% - 2.75rem, var(--container)); margin-inline: auto; }
.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: 1rem; top: -100px; z-index: 100; padding: .6rem 1rem; border-radius: 10px; background: var(--ivory); color: var(--abyss); font-weight: 700; }
.skip-link:focus { top: 1rem; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lead { font-size: 1.2rem; line-height: 1.7; color: var(--muted); }
.lead-serif { font-family: var(--font-display); font-style: italic; font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1.3; color: var(--ocean); }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.mt { margin-top: 2rem; }
.center-block { display: flex !important; justify-content: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .85rem;
  margin: 0 0 1.2rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--fern);
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--lagoon); }
.eyebrow--light { color: var(--foam); }

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .9rem 1.7rem;
  border: 1px solid transparent; border-radius: 999px;
  font: 600 .95rem/1.1 var(--font-body); letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn .icon--arrow, .link-soft .icon--arrow { transition: transform .5s var(--ease); }
.btn:hover .icon--arrow, .link-soft:hover .icon--arrow, a:hover .link-soft .icon--arrow { transform: translateX(4px); }
.btn--solid { background: var(--ocean); color: var(--ivory); }
.btn--solid:hover { background: var(--abyss); color: #fff; box-shadow: 0 16px 30px -18px rgba(11, 49, 80, .7); }
.btn--light { background: var(--ivory); color: var(--abyss); }
.btn--light:hover { background: #fff; color: var(--abyss); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .5); }
.btn--glass { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--glass:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.btn--line { background: transparent; border-color: rgba(27, 84, 162, .35); color: var(--ocean); }
.btn--line:hover { background: var(--ocean); border-color: var(--ocean); color: var(--ivory); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.link-soft { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .95rem; color: var(--ocean); text-decoration: none; }

/* Announcement bar ------------------------------------------------------ */
.announce { background: var(--rainforest); color: #CFE5E2; font-size: .82rem; }
.announce__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .5rem; min-height: 40px; margin: 0 auto; padding: .45rem 0; text-align: center; }
.announce__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 0 rgba(147, 165, 62, .6); animation: pulse 2.8s ease-out infinite; }
.announce strong { color: #fff; }
.announce s { opacity: .6; }
.announce a { display: inline-flex; align-items: center; gap: .3rem; margin-left: .4rem; color: var(--foam); font-weight: 600; text-decoration: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(147, 165, 62, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(147, 165, 62, 0); } }

/* Header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h); margin-bottom: calc(-1 * var(--header-h));
  color: #fff;
  transition: background-color .6s var(--ease), color .6s var(--ease), box-shadow .6s var(--ease);
}
.site-header[data-theme="light"] { color: var(--abyss); }
.site-header.is-scrolled {
  background: rgba(251, 249, 244, .86);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  color: var(--abyss);
  box-shadow: 0 12px 30px -24px rgba(11, 49, 80, .5);
}
.site-header__inner { display: flex; align-items: center; gap: 2rem; height: 100%; }
.brand { position: relative; z-index: 70; display: flex; align-items: center; gap: .8rem; margin-right: auto; color: inherit; text-decoration: none; }
.brand img { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), 0 8px 18px -8px rgba(0, 0, 0, .45); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; }
.brand__sub { margin-top: .3rem; font-size: .62rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; opacity: .8; }
.nav__list { display: flex; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.nav__list a { position: relative; display: block; padding: .5rem 1rem; color: inherit; font-size: .95rem; font-weight: 500; text-decoration: none; }
.nav__list a::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .25rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav__extra { display: none; }
.header-actions { display: flex; align-items: center; gap: 1.2rem; }
.header-call { display: inline-flex; align-items: center; gap: .5rem; color: inherit; font-size: .92rem; font-weight: 600; text-decoration: none; }
.btn--header { min-height: 46px; padding: .7rem 1.4rem; background: var(--ivory); color: var(--abyss); }
.btn--header:hover { background: #fff; color: var(--abyss); }
.site-header.is-scrolled .btn--header, .site-header[data-theme="light"] .btn--header { background: var(--ocean); color: var(--ivory); }
.nav-toggle { display: none; }
.icon--close { display: none; }

@media (max-width: 1080px) { .header-call span { display: none; } }
@media (max-width: 960px) {
  .nav-toggle { position: relative; z-index: 70; display: inline-grid; place-items: center; width: 50px; height: 50px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
  .nav-toggle .icon { width: 22px; height: 22px; }
  .nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
  .nav-toggle[aria-expanded="true"] .icon--close { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: 60;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem;
    background: radial-gradient(900px 600px at 80% 0%, rgba(31, 167, 184, .35), transparent 60%), var(--abyss);
    color: #fff; opacity: 0; visibility: hidden;
    transition: opacity .6s var(--ease), visibility .6s var(--ease);
  }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; align-items: center; gap: .3rem; }
  .nav__list a { font-family: var(--font-display); font-size: clamp(2.6rem, 10vw, 3.6rem); font-weight: 500; line-height: 1.15; }
  .nav__list a::after { bottom: .4rem; }
  .nav__extra { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
  .nav__extra a { color: var(--foam); text-decoration: none; }
  body.nav-open .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  body.nav-open .brand, body.nav-open .nav-toggle { color: #fff; }
  body.nav-open { overflow: hidden; }
  .header-call, .btn--header { display: none; }
}

/* Hero ------------------------------------------------------------------ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100svh;
  padding: calc(var(--header-h) + 3rem) 0 clamp(7.5rem, 13vw, 10rem);
  color: #fff;
}
.hero--page { min-height: clamp(580px, 86svh, 880px); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--abyss); }
.hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media video { opacity: 0; transition: opacity 2s var(--ease); }
.hero__media video.is-playing { opacity: 1; }
.kenburns { animation: kenburns 34s ease-in-out infinite alternate; transform-origin: 55% 45%; }
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.15) translate3d(-1.2%, -.8%, 0); } }
.hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 30, 52, .55) 0%, rgba(6, 30, 52, .08) 30%, rgba(6, 30, 52, .12) 50%, rgba(6, 30, 52, .72) 100%); }
.hero__content { position: relative; z-index: 2; }
.hero__eyebrow { margin: 0 0 1.3rem; font-size: .75rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }
.hero__title { max-width: 21ch; margin: 0 0 1.8rem; color: #fff; font-size: clamp(3.1rem, 7vw, 6.2rem); font-weight: 500; line-height: .98; letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(0, 0, 0, .22); }
.hero--page .hero__title { font-size: clamp(3.4rem, 8vw, 7rem); margin-bottom: .6rem; }
.hero__title em { font-style: italic; color: var(--foam); }
.hero__lead { max-width: 38rem; margin-bottom: 2rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: rgba(255, 255, 255, .9); }
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line > span { display: block; }
.js .line > span { animation: rise 1.4s var(--ease) both; animation-delay: calc(var(--i, 0) * 140ms + 150ms); }
.js .fade-in { animation: fadeUp 1.4s var(--ease) both; animation-delay: var(--d, .6s); }
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.glassbar {
  display: grid; grid-template-columns: 1.1fr 1fr .7fr 1.5fr auto; align-items: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: .5rem;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  background: rgba(6, 30, 52, .3);
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
}
.glassbar__field { display: flex; flex-direction: column; min-width: 0; padding: .35rem 1.4rem; border-right: 1px solid rgba(255, 255, 255, .18); }
.glassbar__field:nth-child(4) { border-right: 0; }
.glassbar label { font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.glassbar input, .glassbar select { width: 100%; padding: .15rem 0; border: 0; border-radius: 0; background: transparent; color: #fff; font: 500 1rem/1.5 var(--font-body); appearance: none; }
.glassbar input:focus, .glassbar select:focus { outline: none; }
.glassbar__field:focus-within { border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.glassbar select option { color: var(--ink); }
.glassbar input::placeholder { color: rgba(255, 255, 255, .6); }
.glassbar input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .75; }
.glassbar .btn { min-height: 58px; padding-inline: 1.9rem; }
@media (max-width: 1000px) {
  .glassbar { grid-template-columns: 1fr 1fr; gap: 0; padding: .6rem; border-radius: 28px; }
  .glassbar__field { padding: .7rem 1rem; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .glassbar__field--wide { grid-column: 1 / -1; }
  .glassbar__field:focus-within { border-radius: 16px; }
  .glassbar .btn { grid-column: 1 / -1; margin-top: .6rem; }
}

/* Phones: calmer hero — the floating bottom bar already offers Book Now */
@media (max-width: 640px) {
  .announce { font-size: .78rem; }
  .announce__long { display: none; }
  .hero .glassbar { display: none; }
  .hero.hero--home { min-height: 92svh; }
}

.scroll-cue { position: absolute; left: 50%; bottom: clamp(4.5rem, 8vw, 6.5rem); z-index: 2; width: 1px; height: 56px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.scroll-cue::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: drip 2.6s var(--ease) infinite; }
@keyframes drip { to { top: 110%; } }
@media (max-width: 1000px) { .scroll-cue { display: none; } }

.waves { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; width: 100%; height: clamp(46px, 7vw, 100px); pointer-events: none; }
.waves use { animation: waveMove 20s cubic-bezier(.55, .5, .45, .5) infinite; }
.waves use:nth-child(1) { fill: rgba(251, 249, 244, .28); animation-delay: -2s; animation-duration: 12s; }
.waves use:nth-child(2) { fill: rgba(251, 249, 244, .45); animation-delay: -3s; animation-duration: 16s; }
.waves use:nth-child(3) { fill: rgba(251, 249, 244, .65); animation-delay: -4s; animation-duration: 20s; }
.waves use:nth-child(4) { fill: var(--ivory); animation-delay: -5s; animation-duration: 28s; }
@keyframes waveMove { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }

/* Intro hero (About) ---------------------------------------------------- */
.intro-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(3rem, 6vw, 5rem); background: linear-gradient(180deg, var(--shallows) 0%, var(--ivory) 100%); }
.intro-hero::before { content: ""; position: absolute; top: -180px; right: -140px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(147, 165, 62, .3), transparent 65%); pointer-events: none; }
.intro-hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.intro-hero__title { font-size: clamp(3.2rem, 7vw, 6rem); line-height: .98; letter-spacing: -.02em; }
.intro-hero__title em { font-style: italic; color: var(--ocean); }
.intro-hero .lead { max-width: 32rem; margin-bottom: 2rem; }
.intro-hero__visual { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: end; }
.intro-hero__visual img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--arch); box-shadow: var(--shadow-soft); }
.intro-hero__visual img:nth-child(2) { aspect-ratio: 3 / 4.6; transform: translateY(-2.5rem); }
@media (max-width: 900px) { .intro-hero__grid { grid-template-columns: 1fr; } .intro-hero__visual { max-width: 520px; } }

/* Sections -------------------------------------------------------------- */
.section { padding: clamp(5rem, 10vw, 8.5rem) 0; }
.section--intro { padding-top: clamp(3rem, 6vw, 5rem); }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--flush-top { padding-top: 0; }
.section--sand { background: var(--sand); }
.section--shallows, .section--mist { background: var(--shallows); }
.section--leaf { background: var(--leaf-50); }
.section--deep { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 15% 0%, rgba(31, 167, 184, .28), transparent 60%), radial-gradient(700px 500px at 100% 100%, rgba(147, 165, 62, .14), transparent 60%), var(--abyss); color: rgba(255, 255, 255, .8); }
.section--deep h2 { color: #fff; }
.section-head { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head > p:not(.eyebrow):not(.lead-serif) { font-size: 1.12rem; color: var(--muted); }
.section-head p:last-child { margin-bottom: 0; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.section-head--split h2 { max-width: 18ch; margin: 0; }
.section-head__note { max-width: 26rem; margin: 0; color: var(--muted); }

/* Statement & stats ----------------------------------------------------- */
.statement { max-width: 1000px; text-align: center; }
.statement__text { margin: 0 auto; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 500; line-height: 1.22; color: var(--abyss); text-wrap: balance; }
.statement__text em { color: var(--ocean); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); text-align: center; }
.stats--band { margin-top: 0; padding: clamp(2rem, 4vw, 3rem) 0; border-bottom: 1px solid var(--line); }
.stat__num { margin: 0; font-family: var(--font-display); font-size: clamp(2.8rem, 5.5vw, 4.4rem); font-weight: 500; line-height: 1; color: var(--ocean); font-variant-numeric: lining-nums tabular-nums; }
.stat__label { margin: .7rem 0 0; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; } }

/* Arches (services) ----------------------------------------------------- */
.arches { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); }
.arch { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.arch:nth-child(2) { margin-top: 4rem; }
.arch__media { overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--arch); background: var(--sand-2); box-shadow: var(--shadow-soft); }
.arch__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.arch:hover .arch__media img { transform: scale(1.07); }
.arch__body { padding: 1.8rem .5rem 0; text-align: center; }
.arch__body h3 { margin-bottom: .35rem; font-size: 2.1rem; font-weight: 500; }
.arch__body p { max-width: 28ch; margin: 0 auto 1rem; color: var(--muted); }
@media (max-width: 1000px) { .arches { gap: 1.25rem; } .arch:nth-child(2) { margin-top: 2rem; } .arch__body h3 { font-size: 1.7rem; } }

/* Experience cards ------------------------------------------------------ */
.experiences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.exp { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card); transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.exp:hover { transform: translateY(-8px); box-shadow: var(--shadow-soft); }
.exp__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--shallows); }
.exp__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.exp:hover .exp__media img { transform: scale(1.07); }
.exp__price { position: absolute; top: 1rem; right: 1rem; padding: .45rem .95rem; border-radius: 999px; background: rgba(251, 249, 244, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--abyss); font-size: .92rem; font-weight: 700; }
.exp__price s { margin-left: .3rem; font-weight: 500; opacity: .55; }
.exp__body { display: flex; flex: 1; flex-direction: column; padding: 1.7rem 1.8rem 1.9rem; }
.exp__sub { margin: 0 0 .4rem; font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--fern); }
.exp__title { margin-bottom: .6rem; font-size: 1.85rem; font-weight: 500; line-height: 1.1; }
.exp__title a { color: inherit; text-decoration: none; }
.exp__body > p:not(.exp__sub) { color: var(--muted); font-size: .96rem; }
.exp .link-soft { margin-top: auto; }
@media (max-width: 1000px) { .experiences { gap: 1.1rem; } .exp__body { padding: 1.3rem 1.3rem 1.5rem; } .exp__title { font-size: 1.55rem; } }

/* Village tours --------------------------------------------------------- */
.villages-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 6rem); align-items: center; }
.villages-visual { position: relative; aspect-ratio: 1 / 1.05; }
.villages-visual img { position: absolute; object-fit: cover; box-shadow: var(--shadow-soft); }
.villages-visual img:first-child { top: 0; left: 0; width: 78%; height: 84%; border-radius: var(--arch); }
.villages-visual img:last-child { right: 0; bottom: 0; width: 44%; aspect-ratio: 3 / 4; height: auto; border: 8px solid var(--leaf-50); border-radius: 28px; }
.village-list { margin: 2.2rem 0 2.6rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.village-list a { display: grid; grid-template-columns: 3rem 1fr auto; align-items: baseline; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: padding .7s var(--ease), background-color .7s var(--ease); }
.village-list a:hover { padding-left: 1rem; background: linear-gradient(90deg, var(--shallows), transparent); }
.village-list .num { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--fern); }
.village-list .name { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; color: var(--abyss); }
.village-list .what { font-size: .9rem; color: var(--muted); text-align: right; }
@media (max-width: 900px) { .villages-split { grid-template-columns: 1fr; } .villages-visual { max-width: 520px; } }
@media (max-width: 520px) { .village-list a { grid-template-columns: 2.4rem 1fr; } .village-list .what { grid-column: 2; margin-top: -.3rem; text-align: left; } }

/* Parallax escape band -------------------------------------------------- */
.escape { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: clamp(560px, 96vh, 940px); color: #fff; text-align: center; }
.escape__bg { position: absolute; inset: -14% 0; z-index: -2; }
.escape__bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.escape::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(6, 30, 52, .25) 0%, rgba(6, 30, 52, .7) 100%); }
.escape__content { display: flex; flex-direction: column; align-items: center; }
.escape__title { max-width: 15ch; margin: 0 auto .35em; color: #fff; font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: 1; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.escape__title em { color: var(--foam); }
.escape__line { margin-bottom: 2.2rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 2rem); color: rgba(255, 255, 255, .92); }

/* Marquee & trips ------------------------------------------------------- */
.marquee { overflow: hidden; margin: calc(-1 * clamp(1rem, 3vw, 2.5rem)) 0 clamp(3.5rem, 7vw, 5.5rem); padding: clamp(1.3rem, 2.5vw, 2rem) 0; border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 90s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem; }
.marquee__item { font-family: var(--font-display); font-style: italic; font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.2; color: var(--abyss); white-space: nowrap; }
.marquee__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }
@keyframes marquee { to { transform: translateX(-50%); } }

.trips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 3rem; margin: 0; padding: 0; list-style: none; }
.trips a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; padding: 1.2rem 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; text-decoration: none; transition: color .5s var(--ease), padding .7s var(--ease); }
.trips a:hover { padding-left: .6rem; color: var(--ocean); }
.trips small { display: block; margin-top: .15rem; font-size: .84rem; font-weight: 400; line-height: 1.45; color: var(--muted); }
.trips .icon { color: var(--lagoon); transition: transform .5s var(--ease); }
.trips a:hover .icon { transform: translateX(4px); }
@media (max-width: 900px) { .trips { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .trips { grid-template-columns: 1fr; } }

/* Rides ----------------------------------------------------------------- */
.rides { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 6rem); align-items: center; }
.rides__visual { position: relative; padding-bottom: 12%; }
.rides__visual img:first-child { width: 64%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--arch); box-shadow: var(--shadow-soft); }
.rides__visual img:last-child { position: absolute; right: 0; bottom: 0; width: 60%; aspect-ratio: 4 / 3; object-fit: contain; padding: 1rem; border-radius: 28px; background: #fff; box-shadow: var(--shadow-soft); }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.8rem; margin: 2.2rem 0; }
.feature { display: flex; align-items: flex-start; gap: .95rem; }
.feature__icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--ocean); box-shadow: 0 10px 24px -16px rgba(11, 49, 80, .5); }
.feature__icon .icon { width: 22px; height: 22px; }
.feature strong { display: block; font-weight: 600; line-height: 1.35; color: var(--abyss); }
.feature span { font-size: .88rem; line-height: 1.5; color: var(--muted); }
.pills-label { margin-bottom: .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.2rem; padding: 0; list-style: none; }
.pills li { padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: .88rem; color: var(--ink); }
.flyer { position: relative; display: block; max-width: 440px; justify-self: center; overflow: hidden; border-radius: 28px; box-shadow: var(--shadow-soft); transform: rotate(1.5deg); transition: transform 1s var(--ease); }
.flyer:hover { transform: rotate(0) translateY(-6px); }
.flyer__hint { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px; background: rgba(251, 249, 244, .94); color: var(--abyss); font-size: .85rem; font-weight: 600; }
@media (max-width: 900px) { .rides { grid-template-columns: 1fr; } .rides__visual { max-width: 540px; } .rides--reverse .flyer { order: -1; } }
@media (max-width: 520px) { .features { gap: 1.1rem .9rem; } .feature { flex-direction: column; gap: .6rem; } }

/* Horizontal photo strip ------------------------------------------------ */
.hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 31vw, 460px); gap: 1.25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: .5rem max(1.375rem, calc((100% - var(--container)) / 2)) 1.5rem; scroll-padding-inline: max(1.375rem, calc((100% - var(--container)) / 2)); scrollbar-width: thin; scrollbar-color: var(--foam) transparent; cursor: grab; }
.hscroll.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.hscroll__item { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); scroll-snap-align: start; }
.hscroll__item:nth-child(even) { transform: translateY(2rem); }
.hscroll__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); -webkit-user-drag: none; user-select: none; }
.hscroll__item:hover img { transform: scale(1.07); }
.section--views { padding-bottom: clamp(6rem, 11vw, 9rem); }

/* Testimonials ---------------------------------------------------------- */
.quotes { max-width: 940px; margin: 0 auto; text-align: center; }
.quote { margin: 0 0 3rem; }
.js .quotes__stack { display: grid; }
.js .quote { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease), visibility 1.3s; }
.js .quote.is-active { opacity: 1; visibility: visible; transform: none; }
.stars { display: flex; justify-content: center; gap: 5px; margin-bottom: 1.6rem; color: var(--sun); }
.quote blockquote { margin: 0 0 1.6rem; font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 500; line-height: 1.25; color: #fff; text-wrap: balance; }
.quote figcaption { font-size: .78rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--foam); }
.dots { display: none; justify-content: center; gap: .5rem; margin-top: 2.8rem; }
.js .dots { display: flex; }
.dots button { width: 44px; height: 24px; padding: 0; border: 0; cursor: pointer; background: linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)) center / 100% 2px no-repeat; transition: background-size .6s var(--ease); }
.dots button[aria-current="true"] { background-image: linear-gradient(#fff, #fff); }

/* Location -------------------------------------------------------------- */
.location { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: stretch; }
.loc-cards { display: grid; gap: .9rem; margin-top: 2rem; }
.loc-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .75); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.loc-card:hover { transform: translateX(6px); box-shadow: var(--shadow-card); }
.loc-card small { font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.loc-card strong { display: block; font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; line-height: 1.15; color: var(--abyss); }
.loc-card__hours { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 600; color: var(--ocean); white-space: nowrap; }
.map-wrap { overflow: hidden; min-height: 460px; border-radius: var(--radius-lg); background: var(--sand-2); box-shadow: var(--shadow-card); }
.map { display: block; width: 100%; height: 100%; min-height: 460px; border: 0; filter: saturate(.95); }
@media (max-width: 900px) { .location { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .loc-card { flex-direction: column; align-items: flex-start; } }

/* About extras ---------------------------------------------------------- */
.banner-frame { margin: 0 0 clamp(2.5rem, 5vw, 4rem); overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.banner-frame img { width: 100%; }
.story-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem clamp(2rem, 5vw, 4rem); max-width: 1000px; margin: 0 auto; font-size: 1.1rem; color: var(--muted); }
.story-cols p:first-child::first-letter { float: left; margin: .12em .12em 0 0; font-family: var(--font-display); font-size: 4.2em; line-height: .8; color: var(--ocean); }
@media (max-width: 760px) { .story-cols { grid-template-columns: 1fr; } }

/* Destinations ---------------------------------------------------------- */
.masonry { columns: 3 280px; column-gap: 1.25rem; }
.masonry__item { position: relative; display: block; margin-bottom: 1.25rem; overflow: hidden; border-radius: var(--radius); break-inside: avoid; }
.masonry__item img { width: 100%; transition: transform 1.6s var(--ease); }
.masonry__item::after { content: ""; position: absolute; inset: 0; background: rgba(11, 49, 80, 0); transition: background-color .6s var(--ease); }
.masonry__item:hover img { transform: scale(1.05); }
.masonry__item:hover::after { background: rgba(11, 49, 80, .14); }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.trio__item { padding: clamp(2rem, 3.5vw, 2.8rem); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .75); transition: transform .8s var(--ease), box-shadow .8s var(--ease), background-color .8s var(--ease); }
.trio__item:hover { transform: translateY(-8px); background: #fff; box-shadow: var(--shadow-card); }
.trio__icon { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 1.6rem; border-radius: 50%; background: var(--shallows); color: var(--ocean); }
.trio__icon .icon { width: 28px; height: 28px; }
.trio__item h3 { font-size: 2rem; font-weight: 500; }
.trio__item p { margin: 0; color: var(--muted); }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 3rem; }
.chip { padding: .8rem 1.5rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 500 .95rem var(--font-body); cursor: pointer; transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.chip:hover { border-color: var(--ocean); }
.chip[aria-pressed="true"] { border-color: var(--ocean); background: var(--ocean); color: var(--ivory); }
.chip__count { margin-left: .35rem; font-size: .85em; opacity: .6; }

.tours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.tour { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 1px 0 var(--line); scroll-margin-top: calc(var(--header-h) + 24px); transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.tour:hover { transform: translateY(-8px); box-shadow: var(--shadow-card); }
.tour:target { box-shadow: 0 0 0 2px var(--sun), var(--shadow-card); }
.tour__media { position: relative; overflow: hidden; aspect-ratio: 5 / 4; background: var(--shallows); }
.tour__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.tour:hover .tour__media img { transform: scale(1.07); }
.tour__pattern {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--ocean);
  background-color: var(--shallows);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .7) 0 22%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%231B54A2' stroke-opacity='.13' stroke-width='1.2'%3E%3Cpath d='M0 14 14 0l14 14L42 0l14 14M0 42l14-14 14 14 14-14 14 14'/%3E%3Cpath d='M14 28 28 14l14 14-14 14z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-cat="village"] .tour__pattern { background-color: var(--leaf-50); color: var(--fern); }
.tour__pattern .icon { width: 58px; height: 58px; stroke-width: 1.2; transition: transform 1.2s var(--ease); }
.tour:hover .tour__pattern .icon { transform: scale(1.12) rotate(-4deg); }
.tour__tag, .tour__deal { position: absolute; top: 1rem; padding: .4rem .85rem; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.tour__tag { left: 1rem; background: rgba(251, 249, 244, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--abyss); }
.tour__deal { right: 1rem; background: var(--sun); color: var(--abyss); }
.tour__credit { position: absolute; right: .6rem; bottom: .55rem; max-width: calc(100% - 1.2rem); overflow: hidden; padding: .2rem .55rem; border-radius: 999px; background: rgba(6, 30, 52, .55); color: rgba(255, 255, 255, .88); font-size: .62rem; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.tour__credit:hover { background: rgba(6, 30, 52, .8); color: #fff; }
.tour__body { display: flex; flex: 1; flex-direction: column; padding: 1.7rem 1.8rem 1.8rem; }
.tour__title { margin-bottom: .45rem; font-size: 1.85rem; font-weight: 500; }
.tour__body > p { margin-bottom: 1.5rem; font-size: .95rem; color: var(--muted); }
.tour__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.price { margin: 0; line-height: 1.15; }
.price small { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.price strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; color: var(--abyss); }
.price s { margin-left: .35rem; font-size: .95rem; color: var(--muted); }
.price--quote { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; color: var(--muted); }
@media (max-width: 1000px) { .tours { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tours { grid-template-columns: 1fr; } }

.routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.route { display: flex; flex-direction: column; gap: .35rem; padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s var(--ease); }
.route:hover { transform: translateY(-6px); border-color: var(--foam); box-shadow: var(--shadow-card); color: var(--ink); }
.route__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--abyss); }
.route__meta { display: flex; align-items: center; gap: .45rem; font-size: .86rem; color: var(--muted); }
.route__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; font-size: .88rem; font-weight: 600; color: var(--ocean); }
.route:hover .icon--arrow { transform: translateX(4px); }
.route .icon--arrow { transition: transform .5s var(--ease); }
@media (max-width: 1000px) { .routes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .routes { grid-template-columns: 1fr; } }

/* Bookings -------------------------------------------------------------- */
.offers { max-width: 1120px; margin: 0 auto; }
.offer { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2.5rem, 7vw, 6rem); align-items: center; padding: clamp(3rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 20px); }
.offer:first-child { padding-top: 0; }
.offer:last-child { border-bottom: 0; }
.offer:nth-child(even) .offer__media { order: 2; }
.offer__media { position: relative; display: block; justify-self: center; width: 100%; max-width: 440px; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--arch); box-shadow: var(--shadow-soft); }
.offer__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.offer__media:hover img { transform: scale(1.06); }
.offer__zoom { position: absolute; right: 1.2rem; bottom: 1.2rem; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(251, 249, 244, .92); color: var(--abyss); opacity: 0; transform: scale(.8); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.offer__media:hover .offer__zoom, .offer__media:focus-visible .offer__zoom { opacity: 1; transform: none; }
.offer__num { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--fern); }
.offer__title { margin: .2rem 0 .3rem; font-size: clamp(2.3rem, 4vw, 3.4rem); font-weight: 500; }
.offer__sub { margin-bottom: 1.4rem; font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--ocean); }
.offer__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin-bottom: 1.4rem; }
.offer__price strong { order: -1; font-family: var(--font-display); font-size: 3rem; font-weight: 600; line-height: 1; color: var(--abyss); }
.offer__price s { font-size: 1.2rem; color: var(--muted); }
.offer__price small { font-size: .9rem; color: var(--muted); }
.offer__body > p:not([class]) { color: var(--ink); }
.ticks { display: grid; gap: .6rem; margin: 1.4rem 0 2.2rem; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: flex-start; gap: .7rem; color: var(--muted); }
.ticks .icon { flex: none; margin-top: .3em; padding: 3px; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--shallows); color: var(--ocean); stroke-width: 2.4; }
@media (max-width: 900px) { .offer { gap: 2rem; } .offer__title { font-size: 2.2rem; } }

.booking-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 2.5rem; align-items: start; }
@media (max-width: 1040px) { .booking-wrap { grid-template-columns: 1fr; } }
.booking { padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-soft); }
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.stepper li { display: flex; align-items: center; gap: .7rem; padding-bottom: 1rem; border-bottom: 2px solid var(--line); font-size: .85rem; font-weight: 600; color: var(--muted); transition: color .6s var(--ease), border-color .6s var(--ease); }
.stepper span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--font-display); font-size: 1.1rem; transition: all .6s var(--ease); }
.stepper .is-active { border-color: var(--ocean); color: var(--abyss); }
.stepper .is-active span { border-color: var(--ocean); background: var(--ocean); color: #fff; }
.stepper .is-done { border-color: var(--foam); color: var(--ocean); }
.stepper .is-done span { border-color: var(--foam); background: var(--shallows); color: var(--ocean); }
@media (max-width: 560px) { .stepper li { flex-direction: column; align-items: flex-start; gap: .4rem; font-size: .78rem; } }
.bk-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.bk-step__title { margin-bottom: 1.6rem; padding: 0; font-family: var(--font-display); font-size: 2.2rem; font-weight: 500; line-height: 1.1; color: var(--abyss); }
.bk-step__title:focus { outline: none; }
.bk-step__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.8rem; }
@media (max-width: 760px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice__box { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: 1.15rem; border: 1px solid var(--line); border-radius: 18px; background: var(--ivory); transition: border-color .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease); }
.choice__box .icon { width: 26px; height: 26px; margin-bottom: .45rem; color: var(--ocean); }
.choice__box strong { font-size: .95rem; font-weight: 600; line-height: 1.25; color: var(--abyss); }
.choice__box small { font-size: .8rem; line-height: 1.35; color: var(--muted); }
.choice:hover .choice__box { border-color: var(--foam); }
.choice input:checked + .choice__box { border-color: var(--ocean); background: var(--shallows); box-shadow: 0 0 0 3px rgba(27, 84, 162, .1); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--sun); outline-offset: 3px; }

.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; margin-bottom: 1.1rem; }
.field label { font-size: .8rem; font-weight: 600; letter-spacing: .03em; color: var(--abyss); }
.optional { font-weight: 400; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: .8rem 1rem;
  border: 1px solid rgba(11, 49, 80, .16); border-radius: 14px;
  background-color: var(--ivory); color: var(--ink);
  font: inherit; font-size: 1rem;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background-color .4s var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--lagoon); background-color: #fff; box-shadow: 0 0 0 4px rgba(31, 167, 184, .16); }
.field input::placeholder, .field textarea::placeholder { color: #8A9B9C; }
.field input:user-invalid { border-color: var(--fern); }
.field select { appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B54A2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 18px; }

.summary { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.4rem; margin: 0 0 1.3rem; padding: 1.4rem 1.5rem; border-radius: 18px; background: var(--shallows); }
.summary dt { font-size: .88rem; font-weight: 600; color: var(--abyss); }
.summary dd { margin: 0; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 480px) { .summary { grid-template-columns: 1fr; gap: .1rem; } .summary dd { margin-bottom: .6rem; } }
.price-hint { margin: 0 0 1rem; padding: .9rem 1.1rem; border-radius: 14px; background: var(--sand); color: var(--abyss); font-weight: 600; }
.assure { display: flex; align-items: flex-start; gap: .55rem; font-size: .92rem; color: var(--muted); }
.assure .icon { margin-top: .25em; color: var(--ocean); }
.send-options { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 520px) { .send-options { grid-template-columns: 1fr; } }
.notice { margin: 1.3rem 0 0; padding: 1rem 1.2rem; border-radius: 14px; background: var(--shallows); color: var(--abyss); }

.aside-card { margin-bottom: 1rem; padding: 1.7rem; border-radius: var(--radius); background: rgba(255, 255, 255, .8); }
.aside-card h3 { margin-bottom: 1rem; font-size: 1.6rem; font-weight: 500; }
.price-list { margin: 0 0 .8rem; padding: 0; list-style: none; }
.price-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.price-list strong { color: var(--abyss); white-space: nowrap; }
.price-list s { font-weight: 400; color: var(--muted); }
.mini-steps { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.mini-steps li + li { margin-top: .5rem; }
.aside-quote { margin: 0; padding: 1.9rem; border-radius: var(--radius); background: var(--abyss); color: rgba(255, 255, 255, .8); }
.aside-quote .stars { justify-content: flex-start; margin-bottom: 1rem; }
.aside-quote blockquote { margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.35; color: #fff; }
.aside-quote figcaption { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--foam); }

.faq { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.6rem 0; list-style: none; font-family: var(--font-display); font-size: clamp(1.4rem, 2.3vw, 1.75rem); font-weight: 500; line-height: 1.25; color: var(--abyss); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B54A2' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .6s var(--ease), background-color .6s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--shallows); }
.faq details p { max-width: 68ch; margin: 0 0 1.7rem; color: var(--muted); }

/* Contact --------------------------------------------------------------- */
.contact { position: relative; isolation: isolate; overflow: hidden; padding: clamp(5rem, 10vw, 8rem) 0; background: linear-gradient(165deg, #1F4A2E 0%, var(--rainforest) 72%); color: rgba(255, 255, 255, .8); }
.contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 480px at 85% 15%, rgba(31, 167, 184, .35), transparent 70%), radial-gradient(600px 460px at 5% 95%, rgba(147, 165, 62, .16), transparent 70%); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 6rem); align-items: center; }
.contact h2 { max-width: 14ch; color: #fff; }
.contact-links { display: grid; gap: 1.5rem; margin: 2.8rem 0 0; padding: 0; list-style: none; }
.contact-links a { display: flex; align-items: center; gap: 1.2rem; color: #fff; text-decoration: none; }
.contact-links small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--foam); }
.contact-links__value { display: block; font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.2; overflow-wrap: anywhere; }
.contact-links__icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.contact-links__icon .icon { width: 22px; height: 22px; }
.contact-links a:hover .contact-links__icon { border-color: #fff; background: #fff; color: var(--abyss); }
.contact-card { padding: clamp(1.8rem, 4vw, 3rem); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.contact-card h3 { margin-bottom: .3rem; color: #fff; font-size: 2.3rem; font-weight: 500; }
.contact-card > p { margin-bottom: 1.8rem; color: rgba(255, 255, 255, .72); }
.contact-card .field label { color: rgba(255, 255, 255, .78); }
.contact-card .field input { border-color: rgba(255, 255, 255, .2); background-color: rgba(255, 255, 255, .07); color: #fff; }
.contact-card .field input::placeholder { color: rgba(255, 255, 255, .45); }
.contact-card .field input:focus { border-color: var(--foam); background-color: rgba(255, 255, 255, .12); box-shadow: 0 0 0 4px rgba(158, 223, 231, .16); }
.contact-card .btn { margin-top: .6rem; }
.contact-card__done { margin: 1rem 0 0; color: var(--foam); }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

/* Footer ---------------------------------------------------------------- */
.site-footer { padding: 3rem 0 2rem; background: var(--abyss-2); color: rgba(255, 255, 255, .55); font-size: .88rem; }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.site-footer .brand { margin-right: 0; color: #fff; }
.footer__nav { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin: 0; padding: 0; list-style: none; }
.footer__nav a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.footer__nav a:hover { color: #fff; }
.socials { display: flex; gap: .5rem; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; color: #fff; transition: background-color .5s var(--ease), color .5s var(--ease); }
.socials a:hover { background: #fff; color: var(--abyss); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-top: 1.5rem; }
.footer__bottom p { margin: 0; }

/* Lightbox -------------------------------------------------------------- */
.lightbox { max-width: min(92vw, 1100px); max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgba(6, 30, 52, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox[open] { animation: fadeUp .7s var(--ease); }
.lightbox img { max-width: 100%; max-height: 88vh; margin: auto; border-radius: 18px; }
.lightbox__close { position: fixed; top: 1.2rem; right: 1.2rem; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }

/* Mobile action bar ----------------------------------------------------- */
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .mobile-bar {
    position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 55;
    display: grid; grid-template-columns: auto auto 1fr; gap: .5rem; padding: .45rem;
    border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px;
    background: rgba(251, 249, 244, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 20px 40px -18px rgba(11, 49, 80, .5);
    transition: transform .6s var(--ease), opacity .6s var(--ease);
  }
  .mobile-bar__round { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ocean); }
  .mobile-bar__round--wa { color: #128C4B; }
  .mobile-bar .btn { min-height: 48px; padding: .7rem 1rem; }
  .mobile-bar .btn:hover { transform: none; }
  body.nav-open .mobile-bar { opacity: 0; transform: translateY(120%); pointer-events: none; }
  body { padding-bottom: 5.5rem; }
}

/* Scroll reveal --------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: var(--delay, 0s); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .tour[data-reveal].is-visible:hover, .js .exp[data-reveal].is-visible:hover, .js .trio__item[data-reveal].is-visible:hover { transform: translateY(-8px); }
.js .route[data-reveal].is-visible:hover { transform: translateY(-6px); }
.js .flyer[data-reveal].is-visible { transform: rotate(1.5deg); }
.js .flyer[data-reveal].is-visible:hover { transform: rotate(0) translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .kenburns, .waves use, .marquee__track { animation: none !important; }
}

/* Phones: long stacks become swipeable rows ------------------------------ */
.swipe-progress { display: none; }
@media (max-width: 760px) {
  .swipe, .swipe-rows {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: var(--swipe-w, 84%);
    gap: 1rem;
    max-width: none !important;
    margin-inline: -1.375rem !important;
    padding: .4rem 1.375rem 1.8rem !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.375rem;
    scrollbar-width: none;
    columns: auto;
    border-top: 0;
    contain: paint;
  }
  .swipe::-webkit-scrollbar, .swipe-rows::-webkit-scrollbar { display: none; }
  .swipe > *, .swipe-rows > * { min-width: 0; margin: 0 !important; scroll-snap-align: start; }
  .swipe-rows { grid-template-rows: repeat(var(--rows, 3), auto); column-gap: 1.6rem; row-gap: 0; }
  .js .swipe > [data-reveal] { opacity: 1; transform: none; }

  .swipe-progress { position: relative; display: block; width: 32%; min-width: 96px; height: 3px; margin: .2rem auto 1.4rem; overflow: hidden; border-radius: 3px; background: var(--line); }
  .swipe-progress span { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 3px; background: var(--ocean); }

  .arches { --swipe-w: 74%; }
  .arch__media { aspect-ratio: 4 / 5; }
  .arch__body h3 { font-size: 1.8rem; }
  .experiences, .tours { --swipe-w: 84%; }
  .trio { --swipe-w: 80%; }
  .routes { --swipe-w: 70%; }
  .loc-cards { --swipe-w: 76%; }
  .loc-card { flex-direction: column; align-items: flex-start; height: 100%; }
  .masonry { --swipe-w: 74%; }
  .masonry__item { aspect-ratio: 4 / 5; }
  .masonry__item img { height: 100%; object-fit: cover; }
  .offers { --swipe-w: 88%; align-items: stretch; }
  .offer { grid-template-columns: 1fr !important; align-content: start; gap: 1.2rem; padding: 1.1rem 1.1rem 1.5rem !important; border: 0 !important; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card); }
  .offer__media { order: 0 !important; max-width: none; aspect-ratio: 4 / 3; border-radius: 22px; }
  .offer__title { font-size: 2rem; }
  .offer__price strong { font-size: 2.3rem; }
  .offer .btn-row { flex-direction: column; }
  .offer .btn { width: 100%; }
  .booking-aside { --swipe-w: 86%; margin-top: 1.5rem; }
  .aside-card, .aside-quote { height: 100%; }
  .village-list { --swipe-w: 84%; --rows: 3; margin-bottom: .6rem !important; }
  .trips { --swipe-w: 82%; --rows: 4; }
}

/* Tablets: sidebar cards sit side by side under the form */
@media (min-width: 761px) and (max-width: 1040px) {
  .booking-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
  .booking-aside .aside-card { margin: 0; }
}

/* Phones: tighter rhythm so pages feel shorter, readable labels, easy taps */
@media (max-width: 760px) {
  .section { padding: clamp(3.5rem, 13vw, 4.5rem) 0; }
  .section--intro { padding-top: 2.5rem; }
  .section--views { padding-bottom: 4.5rem; }
  .contact { padding: 4rem 0; }
  .section-head { margin-bottom: 2rem; }
  .escape { min-height: 480px; }
  .statement__text { font-size: 1.75rem; }
  .stats { margin-top: 2.2rem; padding-top: 1.8rem; }
  .map-wrap, .map { min-height: 300px; }
  .villages-visual { max-width: 380px; }
  .rides__visual { max-width: 400px; }
  .contact-links { gap: 1rem; margin-top: 2rem; }
  .contact-links__icon { width: 48px; height: 48px; }
  .eyebrow, .stat__label, .quote figcaption, .aside-quote figcaption { font-size: .75rem; }
  .tour__tag, .tour__deal { font-size: .75rem; }
  .tour__credit { font-size: .7rem; }
  .link-soft { min-height: 44px; }
  .exp__sub, .pills-label, .contact-links small, .loc-card small, .price small { font-size: .75rem; }
  .site-header__inner { gap: 1rem; }
  .brand__sub { font-size: .62rem; letter-spacing: .16em; white-space: nowrap; }
  .dots button { height: 44px; }
}
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; }
}

@media (max-width: 359px) {
  .brand__sub { white-space: normal; }
}

/* ==========================================================================
   Sunset accent — the orange from the Coral Sands logo
   Orange = take action / highlight. Ocean blue = links and secondary actions.
   ========================================================================== */
.btn--solid, .btn--header,
.site-header.is-scrolled .btn--header, .site-header[data-theme="light"] .btn--header { background: var(--sunset); color: var(--abyss); }
.btn--solid:hover, .btn--header:hover,
.site-header.is-scrolled .btn--header:hover, .site-header[data-theme="light"] .btn--header:hover { background: var(--sunset-deep); color: var(--abyss); box-shadow: 0 16px 30px -14px rgba(244, 163, 64, .7); }
:focus-visible { outline-color: var(--sunset); }

.eyebrow::before { height: 2px; background: var(--sunset); }
.eyebrow--light, .hero__eyebrow { color: var(--sunset-light); }
.hero__title em, .escape__title em { color: var(--sunset-light); }
h2 em, h3 em, .statement__text em, .intro-hero__title em { color: var(--ember); }
.stat__num, .village-list .num, .offer__num, .exp__sub, .loc-card__hours { color: var(--ember); }
.link-soft .icon--arrow, .route__cta .icon--arrow, .trips .icon { color: var(--ember); }
.nav__list a::after { height: 2px; background: var(--sunset); }

.announce strong, .announce a { color: var(--sunset-light); }
.announce__dot { background: var(--sunset); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(244, 163, 64, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(244, 163, 64, 0); } }

.stars { color: var(--sunset); }
.tour__deal, .exp__price { background: var(--sunset); color: var(--abyss); }
.exp__price s { opacity: .6; }
.tour:target { box-shadow: 0 0 0 2px var(--sunset), var(--shadow-card); }
[data-cat="trip"] .tour__pattern { background-color: var(--sunset-soft); color: var(--ember); }

.feature__icon, .trio__icon { background: var(--sunset-soft); color: var(--ember); }
.stepper .is-active { border-color: var(--sunset); }
.stepper .is-active span { border-color: var(--sunset); background: var(--sunset); color: var(--abyss); }
.price-hint { background: var(--sunset-soft); }
.marquee__dot { background: var(--sunset); }
.swipe-progress span { background: var(--sunset); }
.dots button[aria-current="true"] { background-image: linear-gradient(var(--sunset), var(--sunset)); }
.scroll-cue::after { background: var(--sunset-light); }

.contact-links__icon { border-color: rgba(253, 192, 112, .45); color: var(--sunset-light); }
.contact-links a:hover .contact-links__icon, .socials a:hover { border-color: var(--sunset); background: var(--sunset); color: var(--abyss); }

/* warm sunset glows */
.hero__veil { background: radial-gradient(900px 520px at 0% 100%, rgba(244, 163, 64, .3), transparent 62%), linear-gradient(180deg, rgba(6, 30, 52, .52) 0%, rgba(6, 30, 52, .08) 30%, rgba(6, 30, 52, .14) 52%, rgba(6, 30, 52, .74) 100%); }
.escape::before { background: linear-gradient(0deg, rgba(244, 163, 64, .3), transparent 50%), radial-gradient(ellipse at center, rgba(6, 30, 52, .2) 0%, rgba(6, 30, 52, .62) 100%); }
.section--sand { background: linear-gradient(180deg, #FDF0DC 0%, var(--sand) 100%); }
.section--deep { background: radial-gradient(800px 460px at 12% 0%, rgba(31, 167, 184, .3), transparent 60%), radial-gradient(760px 520px at 100% 100%, rgba(244, 163, 64, .3), transparent 62%), var(--abyss); }
.contact::before { background: radial-gradient(700px 480px at 88% 10%, rgba(244, 163, 64, .26), transparent 70%), radial-gradient(600px 460px at 5% 95%, rgba(31, 167, 184, .22), transparent 70%); }
.intro-hero::before { background: radial-gradient(circle, rgba(244, 163, 64, .34), transparent 65%); }

/* Photo credits page ------------------------------------------------------ */
.credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1.25rem; }
.credit { display: flex; gap: 1rem; align-items: center; padding: .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.credit img { flex: none; width: 88px; height: 66px; object-fit: cover; border-radius: 12px; }
.credit__title { margin: 0 0 .2rem; font-weight: 600; color: var(--abyss); line-height: 1.3; }
.credit__meta { margin: 0; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }