/* ============================================================
   nxtrip — website styles
   Design language taken from the Canva mockups in /design:
   cream paper, navy serif headings, wine accent, rounded photo
   cards with a dark gradient foot and pill tags.
   ============================================================ */

/* ---------------- Design tokens ---------------- */
:root {
  --cream:      #FAF7F3;
  --cream-2:    #F3EEE7;
  --sand:       #EFE9E0;
  --line:       #E3DBD0;

  --wine:       #8C1D35;
  --wine-dark:  #6B1226;
  --wine-soft:  #F6EAED;

  --ink:        #021B3A;   /* headings */
  --ink-soft:   #143152;
  --body:       #425170;   /* everything that is read as text */
  --muted:      #6E7B93;

  --green:      #2E4A34;   /* secondary accent, used sparingly */

  --white:      #FFFFFF;

  --radius:     14px;
  --radius-lg:  22px;
  --shadow:     0 10px 30px rgba(29, 51, 70, .08);
  --shadow-lg:  0 18px 46px rgba(29, 51, 70, .13);

  /* These four are replaced at runtime by the pairing chosen in the admin
     panel (see js/fonts.js). The values here are the starting point. */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-weight: 500;
  --display-scale: 1;

  /* How much breathing room the page has. Set from the admin panel's
     "Look & feel" tab: 0.8 is compact, 1 is normal, 1.25 is roomy. */
  --space: 1;

  --wrap: 1180px;
  --nav-h: 78px;
}

/* ---------------- Reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4 {
  margin: 0; font-family: var(--display); color: var(--ink);
  font-weight: var(--display-weight, 500); line-height: 1.12;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(100% - 40px, var(--wrap)); 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;
}
/* A word the owner marked *like this*. The colour is set in the admin panel. */
.accent { color: var(--accent, var(--wine)); font-style: italic; }
/* When an icon has been removed, close up the gap it left. */
.feature.no-icon .ring, .cs-feature.no-icon .ring { display: none; }

/* ================================================
   HEADER / NAV
   ================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 243, .88);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  /* No transparent border here. Over a backdrop-filtered bar, Safari on iOS
     renders one as a dark hairline across the top of the photograph — the
     "small black line". The rule below is a real element instead, invisible
     until the page is scrolled. */
  border-bottom: 0;
  transition: box-shadow .3s;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line); opacity: 0; transition: opacity .3s; pointer-events: none;
}
.site-header.scrolled::after { opacity: 1; }
.site-header.scrolled { box-shadow: 0 4px 18px rgba(29,51,70,.05); }
.nav {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  /* room above and below the bar's contents */
  padding-top: 15px; padding-bottom: 8px;
  box-sizing: content-box;
}
.logo {
  font-family: var(--display);
  font-size: calc(1.72rem * var(--display-scale, 1)); letter-spacing: -.03em; color: var(--ink); line-height: 1; font-optical-sizing: auto;
}
.logo:hover { color: var(--wine); }
.logo-img {
  display: block; width: auto; transition: opacity .2s;
  height: var(--logo-h, 38px);
}
.logo:hover .logo-img { opacity: .78; }
.footer-left .logo-img { height: calc(var(--logo-h, 38px) * .84); }
@media (max-width: 900px) {
  .logo-img { height: calc(var(--logo-h, 38px) * .84); }
  .footer-left .logo-img { height: calc(var(--logo-h, 38px) * .74); }
}

/* 40px is how far apart the menu words sit */
.nav-links { display: flex; align-items: center; gap: 40px; }
.nav-links a {
  font-size: .875rem; color: var(--ink-soft); position: relative; padding: 6px 0;
  transition: color .2s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1.5px;
  background: var(--wine); transition: left .25s, right .25s;
}
.nav-links a:hover { color: var(--wine); }
.nav-links a:hover::after, .nav-links a.current::after { left: 0; right: 0; }
.nav-links a.current { color: var(--wine); }
/* The nav holds two copies of the call-to-action: one inside the links list
   (used by the mobile drop-down) and one beside it (used on desktop).
   Hide whichever one doesn't belong to the current layout. */
.nav-links .btn { display: none; }
/* The button is also an <a>, so it needs to win against the link colours above. */
.nav-links a.btn,
.nav-links a.btn:hover { color: #fff; }
.nav-links a.btn::after { display: none; }

/* Destinations, with International and Domestic under it. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-group .caret { display: inline-flex; transition: transform .2s; opacity: .7; }
.nav-group:hover .caret { transform: rotate(180deg); }
.nav-group.current > a { color: var(--wine); }
.nav-group.current > a::after { left: 0; right: 0; }
.nav-menu {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px);
  min-width: 232px; padding: 7px; z-index: 120;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 44px rgba(2,27,58,.16), 0 2px 6px rgba(2,27,58,.06);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .22s cubic-bezier(.22,.75,.3,1), visibility .18s;
}
/* A small notch pointing back up at the word it belongs to. */
.nav-menu::before {
  content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px;
  margin-left: -5px; background: #fff; transform: rotate(45deg);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  border-radius: 2px 0 0 0;
}
/* A small invisible bridge, so the pointer can travel from the word down to
   the menu without passing over a gap and closing it. */
.nav-group::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 4px);
}
.nav-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 13px; border-radius: 10px;
  font-size: .9rem; color: var(--ink); white-space: nowrap;
  transition: background .18s, color .18s;
}
.nav-menu a::after { display: none; }
/* All three are only wanted on a phone — see the drop-down further down. */
.nav-menu .nm-ic, .nav-menu .nm-sub { display: none; }
.nav-caret { display: none; }
.nav-menu .nm-count {
  font-size: .72rem; font-weight: 600; color: var(--muted);
  background: var(--cream-2); border-radius: 999px; padding: 2px 9px;
  transition: background .18s, color .18s;
}
.nav-menu a:hover { background: var(--cream-2); color: var(--wine); }
.nav-menu a:hover .nm-count { background: #fff; color: var(--wine); }
.nav-menu a.current { color: var(--wine); background: var(--wine-soft); }
.nav-menu a.current .nm-count { background: #fff; color: var(--wine); }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 26px; border-radius: 999px;
  background: var(--wine); color: #fff; border: 0; cursor: pointer;
  font-size: .875rem; font-weight: 500; letter-spacing: .01em;
  transition: background .2s, transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.btn:hover { background: var(--wine-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(140,29,53,.28); }
.btn:active { transform: translateY(0); }
.btn .arw { transition: transform .2s; }
.btn:hover .arw { transform: translateX(4px); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #fff; color: var(--wine); box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }

/* mobile menu */
.nav-toggle {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line);
  background: #fff; border-radius: 11px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.nav-toggle span { display: block; width: 17px; height: 1.5px; background: var(--ink); transition: transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ================================================
   PLACEHOLDER ARTWORK
   Used wherever a real photo has not been added yet.
   Each style is a small hand-built gradient scene.
   ================================================ */
.ph { position: relative; overflow: hidden; background: #cfd8dd; }
.ph::before, .ph::after { content: ""; position: absolute; inset: 0; }

.ph[data-art="sea"]      { background: linear-gradient(180deg,#bfe0e8 0%,#7fc6cf 42%,#3f9fae 70%,#2b8093 100%); }
.ph[data-art="sea"]::after { background: radial-gradient(120% 60% at 50% 108%, rgba(255,255,255,.5), transparent 60%); }

.ph[data-art="beach"]    { background: linear-gradient(180deg,#f7d9b8 0%,#bfe2e0 45%,#7cc4c3 68%,#e8d5b4 100%); }
.ph[data-art="beach"]::after { background: radial-gradient(90% 50% at 50% 100%, rgba(255,255,255,.55), transparent 60%); }

.ph[data-art="island"]   { background: linear-gradient(180deg,#cfe6ea 0%,#8fd0cc 40%,#2f7f74 66%,#1d5f5c 100%); }
.ph[data-art="island"]::after { background: radial-gradient(70% 46% at 22% 76%, rgba(24,80,60,.75), transparent 62%), radial-gradient(60% 40% at 82% 82%, rgba(24,80,60,.6), transparent 60%); }

.ph[data-art="mountain"] { background: linear-gradient(180deg,#dbe7f0 0%,#a9c3d6 38%,#6f8ba3 62%,#455c74 100%); }
.ph[data-art="mountain"]::after { background: radial-gradient(58% 52% at 28% 96%, rgba(38,53,70,.8), transparent 60%), radial-gradient(64% 56% at 74% 100%, rgba(30,44,60,.85), transparent 62%); }

.ph[data-art="snow"]     { background: linear-gradient(180deg,#e8f1f7 0%,#c3d8e6 40%,#8fb0c6 68%,#5d7f9a 100%); }
.ph[data-art="snow"]::after { background: radial-gradient(56% 50% at 30% 98%, rgba(255,255,255,.85), transparent 55%), radial-gradient(60% 52% at 76% 102%, rgba(214,232,242,.9), transparent 58%); }

.ph[data-art="lake"]     { background: linear-gradient(180deg,#dfe9ee 0%,#9dbcc9 34%,#6f96a6 56%,#456d80 100%); }
.ph[data-art="lake"]::after { background: linear-gradient(180deg, transparent 56%, rgba(255,255,255,.28) 58%, transparent 64%), radial-gradient(70% 40% at 50% 52%, rgba(45,72,88,.5), transparent 70%); }

.ph[data-art="valley"]   { background: linear-gradient(180deg,#dfeadd 0%,#a8c8a6 38%,#5d8a5e 66%,#37613c 100%); }
.ph[data-art="valley"]::after { background: radial-gradient(62% 50% at 20% 92%, rgba(40,80,50,.72), transparent 60%), radial-gradient(66% 54% at 80% 100%, rgba(30,66,42,.8), transparent 62%); }

.ph[data-art="forest"]   { background: linear-gradient(180deg,#dbe8d9 0%,#9cc39a 36%,#4e8055 64%,#2c5738 100%); }
.ph[data-art="forest"]::after { background: radial-gradient(50% 60% at 50% 100%, rgba(24,58,36,.75), transparent 62%); }

.ph[data-art="city"]     { background: linear-gradient(180deg,#f2d9c4 0%,#c9b7c6 34%,#7d7f9e 62%,#3d4666 100%); }
.ph[data-art="city"]::after { background: radial-gradient(40% 70% at 50% 108%, rgba(28,34,58,.8), transparent 60%), radial-gradient(28% 84% at 26% 112%, rgba(28,34,58,.7), transparent 58%), radial-gradient(30% 78% at 76% 112%, rgba(28,34,58,.7), transparent 58%); }

.ph[data-art="heritage"] { background: linear-gradient(180deg,#f7e4c4 0%,#e9c79a 38%,#cf9d6c 66%,#a97347 100%); }
.ph[data-art="heritage"]::after { background: radial-gradient(56% 52% at 30% 100%, rgba(140,84,44,.6), transparent 58%), radial-gradient(60% 56% at 78% 104%, rgba(120,68,36,.7), transparent 60%); }

.ph[data-art="temple"]   { background: linear-gradient(180deg,#f6dcc2 0%,#e3ae8c 36%,#b9755c 64%,#7f4a3d 100%); }
.ph[data-art="temple"]::after { background: radial-gradient(34% 66% at 50% 106%, rgba(96,50,40,.75), transparent 58%); }

.ph[data-art="wildlife"] { background: linear-gradient(180deg,#efe0bd 0%,#c9bb84 36%,#8a8a4e 64%,#54602f 100%); }
.ph[data-art="wildlife"]::after { background: radial-gradient(70% 50% at 50% 102%, rgba(60,66,30,.72), transparent 62%); }

.ph[data-art="sunset"]   { background: linear-gradient(180deg,#f9dcc0 0%,#f0b189 32%,#c9807e 58%,#6c5578 100%); }
.ph[data-art="sunset"]::after { background: radial-gradient(26% 20% at 62% 34%, rgba(255,244,214,.95), transparent 60%), radial-gradient(80% 40% at 50% 104%, rgba(58,44,62,.7), transparent 62%); }

/* the tiny "no photo yet" hint, only on big blocks */
.ph-hint {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.62); font-weight: 500; text-align: center;
  pointer-events: none;
}

/* a real photo sits on top of the placeholder */
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; }

/* ================================================
   SECTION FURNITURE
   ================================================ */
section { position: relative; }
.section { padding: calc(52px * var(--space)) 0; }
.section-tight { padding: calc(34px * var(--space)) 0; }

.kicker {
  font-size: .84rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--wine); font-weight: 600; margin-bottom: 16px;
}
.rule { width: 46px; height: 2px; background: var(--wine); border-radius: 2px; margin: 22px 0; }
.rule-c { margin: 18px auto; }

.h-display { font-size: calc(clamp(2.25rem, 5.1vw, 3.65rem) * var(--display-scale, 1)); letter-spacing: -.022em; }
.h-section { font-size: calc(clamp(1.62rem, 3vw, 2.2rem) * var(--display-scale, 1)); letter-spacing: -.018em; }
.h-sub     { font-size: calc(clamp(1.25rem, 2.2vw, 1.6rem) * var(--display-scale, 1)); }
.lede { font-size: 1rem; color: var(--body); max-width: 46ch; }
.center { text-align: center; }

/* "View all international destinations", "Explore Domestic", and the rest. */
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .98rem; font-weight: 500; color: var(--wine);
}
.arrow-link .arw { transition: transform .2s; }
.arrow-link:hover .arw { transform: translateX(5px); }

/* ================================================
   HERO — split text / image, as in the mockups
   ================================================ */
.hero { padding: calc(22px * var(--space)) 0 0; }
.hero-grid {
  /* 38% words, 62% photograph. The minmax is a floor so the words are never
     crushed on a narrow desktop window. */
  display: grid; grid-template-columns: minmax(260px, 1fr) 1.632fr;
  align-items: center; gap: 0;
}
/* The writing and the photograph balance against each other: whatever is left
   over is split evenly above and below, so the two sides read as one block.

   It was anchored to the bottom of the row for a while, to keep the gap under
   the red rule the same on every page. That fixed one gap and broke the thing
   people actually notice — on About the writing overhung the photograph by
   84px, on Honeymoon it started 60px below it. Balanced is what looks right. */
.hero-copy {
  padding: calc(18px * var(--space)) 44px calc(18px * var(--space)) 0;
  align-self: center; position: relative; z-index: 2;
}
/* No picture chosen yet — the words take the full width instead of leaving a
   hole where one would have been. */
.hero-noart .hero-grid { grid-template-columns: 1fr; }
.hero-noart .hero-copy { padding-right: 0; padding-bottom: calc(30px * var(--space)); max-width: 900px; }

.hero-copy h1 { white-space: pre-line; }
/* A margin hanging off the last line made the block sit 22px low inside a
   centred row — the space below looked bigger than the space above. */
.hero-copy > *:last-child { margin-bottom: 0; }
/* The About page opens on a four-line sentence rather than a short title, so
   it is set a size smaller. That keeps the block of writing near the height of
   the photograph beside it instead of towering over it. */
[data-page="about"] .hero-copy h1 { font-size: clamp(1.85rem, 3.2vw, 2.6rem); line-height: 1.18; }
/* The line above the big heading — HONEYMOON HOLIDAYS, FAMILY HOLIDAYS,
   DESTINATIONS. Larger than the ones further down the page, because up here it
   is doing the work of a section label. */
.hero-copy .kicker { font-size: .95rem; letter-spacing: .16em; }
.hero-copy .lede { margin-top: 22px; }
.hero-copy .btn { margin-top: 30px; }
.hero-art {
  /* Same idea as the phone rule further down: the height follows the width so
     the box keeps roughly the shape of an ordinary photograph. A fixed 470px
     ceiling squeezed it to 2.18:1 on a 1920 screen and to 1.26:1 around
     1000px — both threw away a sixth to a third of the picture. */
  position: relative;
  /* The photograph stays inside the page's own column now — no bleeding out to
     the edge of the screen. It is a picture in a box, the same width as
     everything else on the page, and it cannot wander outside it.

     The height follows that column's width so the box keeps roughly the shape
     of an ordinary photograph, and stops growing once the column does. */
  /* Stretches to whatever height the row ends up being, so when the writing is
     taller than the picture — the About page, with its four-line heading — the
     two sides still start and finish together instead of the photograph
     floating in the middle of the text. */
  align-self: stretch;
  height: auto;
  min-height: clamp(260px, calc(37vw - 15px), 437px);
  overflow: hidden;
  border-radius: var(--radius);
}
.hero-art > .ph { position: absolute; inset: 0; }
/* soft cream fade so the image melts into the text, like the mockup */
.hero-art .fade {
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(90deg, var(--cream) 0%, rgba(250,247,243,.75) 16%, rgba(250,247,243,0) 46%);
}

/* Hero variant used on the Destinations index: diagonal photo strips.
   Each strip is clipped to a parallelogram, and the whole rail is a little
   wider than its box so the outer slants fall off the edges. */
/* The gap and the lean are both set from the editor — see stripGap and
   stripSlant on the Destinations page tab. The values here are only what the
   page falls back to if nothing has been chosen. */
.hero-strips {
  display: flex; gap: var(--strip-gap, 7px); height: 100%;
  width: 118%; margin-left: -9%;
}
.hero-strips .strip {
  flex: 1; position: relative; overflow: hidden;
  clip-path: polygon(
    var(--strip-slant, 17%) 0,
    100% 0,
    calc(100% - var(--strip-slant, 17%)) 100%,
    0 100%);
}
.hero-strips .strip .ph { position: absolute; inset: 0; }

/* ================================================
   STATEMENT PANEL (home)
   ================================================ */
.statement {
  background: var(--cream-2); border-radius: var(--radius-lg);
  padding: calc(34px * var(--space)) 30px; text-align: center;
}
.statement h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.35; }
.statement .note { margin-top: 8px; font-size: .92rem; color: var(--muted); }

/* ================================================
   INTRO CARD (honeymoon / family pages)
   ================================================ */
.intro-card {
  background: var(--cream-2); border-radius: var(--radius-lg);
  padding: calc(28px * var(--space)) 38px; display: grid; grid-template-columns: 150px 1fr; gap: 30px; align-items: center;
  /* Sits directly under the hero rather than riding up over it.

     It used to overlap by 54px, which looked good on the Honeymoon page and
     covered the last line of writing on the Family page — that heading is
     longer, so the text reaches almost the full height of the photograph and
     the panel landed on top of it. There is no single overlap that is safe for
     every heading length, so there is none. */
  margin-top: 0; position: relative; z-index: 5;
}
.intro-card .mark { display: flex; align-items: center; justify-content: center; color: var(--wine); opacity: .85; }
.intro-card .mark svg { width: 100%; height: auto; max-width: 118px; }
/* A photograph instead of the drawn flower. */
.intro-card .mark.has-pic { opacity: 1; }
.intro-card .mark.has-pic img {
  width: 100%; height: auto; max-height: 132px; object-fit: contain;
  border-radius: 10px;
}
.intro-card .body { border-left: 1px solid var(--line); padding-left: 34px; }
.intro-card h2 { margin-bottom: 14px; }
.intro-card p { white-space: pre-line; max-width: 62ch; }

/* ================================================
   BIG SPLIT CARDS (home: Honeymoon / Family)
   ================================================ */
.split-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.split-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  height: 300px; display: block; box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s;
}
.split-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.split-card .ph { position: absolute; inset: 0; }
.split-card .ph img { transition: transform .5s; }
.split-card:hover .ph img { transform: scale(1.05); }
/* The words sit at the TOP of the card, so the darkening runs the other way —
   heaviest where the writing is, clearing as it goes down to leave the
   photograph itself unclouded. */
.split-card .veil {
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(180deg, rgba(15,25,35,.62) 0%, rgba(15,25,35,.28) 55%, rgba(15,25,35,.05) 100%);
}
.split-card .txt { position: absolute; z-index: 5; left: 28px; right: 28px; top: 26px; color: #fff; }
.split-card .txt h3 { color: #fff; font-size: 1.6rem; margin-bottom: 6px; }
.split-card .txt p { font-size: .88rem; color: rgba(255,255,255,.88); white-space: pre-line; }
.split-card .txt .arw { margin-top: 14px; display: inline-block; transition: transform .25s; }
.split-card:hover .txt .arw { transform: translateX(6px); }

/* ================================================
   WHERE THE WRITING SITS ON A PHOTOGRAPH
   Set in the editor: Look & feel -> "Writing on photos".
   "top" is what the page starts with and needs no rules of its own — it is
   written into the three components above. These two move it, and move the
   shading with it, so the words always land on the darker part of the picture.
   ================================================ */
[data-phototext="middle"] .split-card .txt,
[data-phototext="middle"] .detail-hero .inner {
  top: 50%; bottom: auto; transform: translateY(-50%);
}
[data-phototext="middle"] .dest-card .txt { justify-content: center; }
[data-phototext="middle"] .split-card .veil,
[data-phototext="middle"] .dest-card .veil,
[data-phototext="middle"] .detail-hero .veil {
  background: linear-gradient(180deg,
    rgba(12,22,32,.10) 0%, rgba(12,22,32,.66) 50%, rgba(12,22,32,.10) 100%);
}

[data-phototext="bottom"] .split-card .txt { top: auto; bottom: 26px; transform: none; }
[data-phototext="bottom"] .detail-hero .inner { top: auto; bottom: 34px; transform: none; }
[data-phototext="bottom"] .dest-card .txt { justify-content: flex-end; }
[data-phototext="bottom"] .split-card .veil {
  background: linear-gradient(180deg, rgba(15,25,35,.05) 30%, rgba(15,25,35,.62) 100%);
}
[data-phototext="bottom"] .dest-card .veil {
  background: linear-gradient(180deg, rgba(12,22,32,0) 34%, rgba(12,22,32,.72) 88%, rgba(12,22,32,.86) 100%);
}
[data-phototext="bottom"] .detail-hero .veil {
  background: linear-gradient(180deg, rgba(12,22,32,.15) 40%, rgba(12,22,32,.78) 100%);
}

/* ================================================
   ABOUT — alternating bands, steps, figures
   ================================================ */
/* Words on one side, a photograph on the other, swapping sides down the page.
   With no photograph yet the words simply take the full width, so the page
   reads properly before anybody uploads anything. */
.band { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.band.flip .band-copy { order: 2; }
.band.flip .band-pic { order: 1; }
.band.no-pic { grid-template-columns: 1fr; }
.band.no-pic .band-copy { max-width: 74ch; }
.band-copy .kicker { margin-bottom: 12px; }
.band-copy h2 { margin-bottom: 4px; }
.band-copy .rule { margin: 14px 0 16px; }
.band-copy p { font-size: .96rem; }
.band-pic {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow);
}
.band-pic .ph { position: absolute; inset: 0; }

.stat-num {
  font-family: var(--display); font-size: 2.4rem; color: var(--wine);
  line-height: 1; margin-bottom: 8px;
}

/* "What happens when you travel with us" */
.about-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 26px;
}
.about-step { position: relative; padding-top: 18px; border-top: 1px solid var(--line); }
.about-step .n {
  display: block; font-family: var(--display); font-size: 1.5rem;
  color: var(--wine); line-height: 1; margin-bottom: 10px;
}
.about-step h3 {
  font-family: var(--sans); font-size: .98rem; font-weight: 600;
  color: var(--ink); margin-bottom: 7px;
}
.about-step p { font-size: .89rem; }

@media (max-width: 900px) {
  .band { grid-template-columns: 1fr; gap: 22px; }
  /* On a phone the picture always comes first, whichever side it was on. */
  .band.flip .band-copy, .band .band-copy { order: 2; }
  .band.flip .band-pic, .band .band-pic { order: 1; }
  .band-pic { aspect-ratio: 3 / 2; }
  .about-steps { grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .about-steps { grid-template-columns: 1fr; gap: 18px; }
}

/* ================================================
   DESTINATION CARDS
   ================================================ */
/* INTERNATIONAL / DOMESTIC, above each row of destinations. */
.dest-label {
  font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; margin-bottom: 14px;
  display: flex; align-items: center; gap: 9px;
}
.dest-label svg { color: var(--wine); flex: none; }

.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dest-grid.rows-2 { grid-template-columns: repeat(4, 1fr); }

.dest-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  display: block; box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s;
}
.dest-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.dest-card .ph { position: absolute; inset: 0; }
.dest-card .ph img { transition: transform .55s; }
.dest-card:hover .ph img { transform: scale(1.06); }
/* Name at the top of the card, with the darkening heaviest there so the
   photograph underneath stays clear. */
.dest-card .veil {
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(180deg, rgba(12,22,32,.80) 0%, rgba(12,22,32,.38) 48%, rgba(12,22,32,.10) 100%);
}
.dest-card .txt { position: relative; z-index: 5; padding: 22px; color: #fff; display: flex; flex-direction: column; justify-content: flex-start; }
.dest-card .txt h3 { color: #fff; font-size: 1.45rem; margin-bottom: 3px; }
.dest-card .txt .tl { font-size: .84rem; color: rgba(255,255,255,.85); }

/* card sizes */
.dest-card.size-tall .txt { min-height: 272px; }
.dest-card.size-short .txt { min-height: 178px; }

/* The pills drop to the foot of the card, so they line up across a row instead
   of drifting with the length of each name.

   Only while the writing is at the top, which is the normal setting. Move the
   writing to the middle or the foot and the pills travel with it — otherwise
   the name would end up sitting on top of them. */
.tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; }
[data-phototext="top"] .dest-card .tags,
html:not([data-phototext]) .dest-card .tags { margin-top: auto; }
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
  font-size: .64rem; color: #fff; backdrop-filter: blur(4px);
}
.tag svg { width: 12px; height: 12px; }
.tag svg { flex: none; }
.tag-warn { background: rgba(20,28,36,.55); border-color: rgba(255,255,255,.45); }

/* the arrow-style card used on the home / honeymoon / family rows */
.dest-card.style-arrow .txt { min-height: 178px; }
.dest-card.style-arrow .txt h3 { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 0; }
.dest-card.style-arrow .txt h3 .arw { transition: transform .25s; }
.dest-card.style-arrow:hover .txt h3 .arw { transform: translateX(6px); }

/* "more coming soon" tile */
.soon-tile {
  border-radius: var(--radius); background: var(--cream-2);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; padding: 26px; min-height: 272px;
}
.soon-tile .ring {
  width: 56px; height: 56px; border-radius: 50%; background: var(--sand);
  display: flex; align-items: center; justify-content: center; color: var(--wine);
}
.soon-tile p { font-family: var(--display); font-size: 1.22rem; color: var(--ink); white-space: pre-line; line-height: 1.35; }

/* ================================================
   WIDE BANNER (destinations index)
   ================================================ */
.banner-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 6px; }
.banner-head p { font-size: .93rem; }
.banner {
  display: block; position: relative; height: clamp(180px, 24vw, 230px);
  border-radius: var(--radius); overflow: hidden; margin-top: 16px; box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s;
}
.banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.banner .ph { position: absolute; inset: 0; }

/* International and Domestic on the Destinations page: two photographs side by
   side, each one a single link with its own writing laid over it. */
.region-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.region-panel {
  position: relative; display: block; overflow: hidden;
  min-height: clamp(220px, 19vw, 280px);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s;
}
.region-panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.region-panel .ph { position: absolute; inset: 0; }
.region-panel .ph img { transition: transform .5s; }
.region-panel:hover .ph img { transform: scale(1.04); }
/* Darkest where the writing is, clearing towards the far end. */
.region-panel .veil {
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(180deg, rgba(12,22,32,.74) 0%, rgba(12,22,32,.34) 55%, rgba(12,22,32,.10) 100%);
}
.region-panel .txt { position: absolute; z-index: 5; left: 26px; right: 26px; top: 24px; color: #fff; }
.region-panel .count {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin-bottom: 7px;
}
.region-panel .txt h2 { color: #fff; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.region-panel .txt p {
  margin-top: 8px; font-size: .88rem; line-height: 1.55;
  color: rgba(255,255,255,.9); max-width: 34ch;
}
/* The link reads as something to press, not just underlined words. */
.region-panel .arrow-link {
  margin-top: 14px; color: #fff; font-size: .86rem;
  border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
  padding: 7px 16px; transition: background .25s, border-color .25s;
}
.region-panel:hover .arrow-link { background: rgba(255,255,255,.14); border-color: #fff; }
.region-panel:hover .arrow-link .arw { transform: translateX(5px); }

/* The writing follows the same Top / Middle / Bottom setting as the cards. */
[data-phototext="middle"] .region-panel .txt { top: 50%; transform: translateY(-50%); }
[data-phototext="middle"] .region-panel .veil {
  background: linear-gradient(180deg, rgba(12,22,32,.10) 0%, rgba(12,22,32,.66) 50%, rgba(12,22,32,.10) 100%);
}
[data-phototext="bottom"] .region-panel .txt { top: auto; bottom: 28px; transform: none; }
[data-phototext="bottom"] .region-panel .veil {
  background: linear-gradient(180deg, rgba(12,22,32,.10) 0%, rgba(12,22,32,.34) 45%, rgba(12,22,32,.74) 100%);
}

@media (max-width: 760px) {
  /* Two columns would be too narrow to read on a phone. */
  .region-pair { grid-template-columns: 1fr; gap: 18px; }
  .region-panel { min-height: 190px; }
  /* On a phone the writing sits at the foot of the picture rather than filling
     it. The sentence is dropped — at this width it took up three quarters of
     the card and the photograph was hidden behind shading to keep it readable.
     The count and the heading say the same thing in a glance. */
  .region-panel .txt { left: 20px; right: 20px; top: auto; bottom: 18px; transform: none; }
  .region-panel .txt p { display: none; }
  .region-panel .count { font-size: .66rem; margin-bottom: 4px; }
  .region-panel .txt h2 { font-size: 1.45rem; }
  .region-panel .arrow-link { margin-top: 10px; padding: 6px 14px; font-size: .82rem; }
  /* shading only where the words are, so most of the photo stays clear */
  .region-panel .veil,
  [data-phototext="top"] .region-panel .veil,
  [data-phototext="middle"] .region-panel .veil,
  [data-phototext="bottom"] .region-panel .veil {
    background: linear-gradient(180deg,
      rgba(12,22,32,0) 30%, rgba(12,22,32,.35) 62%, rgba(12,22,32,.82) 100%);
  }
}

/* ================================================
   ICON FEATURE ROWS (why / promise)
   ================================================ */
.feature-row {
  display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 0; text-align: center;
}
.feature {
  padding: 8px 26px; position: relative;
}
.feature + .feature::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line);
}
.feature .ring {
  width: 52px; height: 52px; border-radius: 50%; background: var(--cream-2);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; color: var(--wine);
}
.feature h3 { font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--ink); white-space: pre-line; margin-bottom: 10px; line-height: 1.4; }
.feature p { font-size: .86rem; color: var(--body); }

.panel {
  background: var(--cream-2); border-radius: var(--radius-lg); padding: calc(34px * var(--space)) 28px;
}

/* promise cards with photos (honeymoon) */
.promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.promise-card {
  background: var(--cream-2); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.promise-card .pic { position: relative; height: 128px; }
.promise-card .pic .ph { position: absolute; inset: 0; }
.promise-card .badge {
  position: absolute; z-index: 6; left: 18px; bottom: -20px;
  width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--wine);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.promise-card .body { padding: 32px 20px 24px; }
.promise-card h3 { font-family: var(--sans); font-size: .92rem; font-weight: 600; color: var(--ink); white-space: pre-line; line-height: 1.45; margin-bottom: 9px; }
.promise-card p { font-size: .83rem; }

/* ================================================
   STEPS (home)
   ================================================ */
/* How we plan your holiday.

   Each step is a row — the words on one side, a photograph on the other,
   swapping sides down the page. Two columns at every screen size, which is
   how the design reads on a phone as well. */
.steps-sub {
  text-align: center; color: var(--muted); margin: 8px auto 0;
  max-width: 56ch; font-size: .95rem;
}
.step-rows {
  position: relative; margin-top: calc(30px * var(--space));
  display: grid; gap: calc(34px * var(--space)); color: var(--wine);
  padding: 0 2%;
}
/* The line running down behind the rows. Stretched to their height, so it
   still joins the steps up when a sentence runs long. */
.jr-thread { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.jr-thread svg { display: block; width: 100%; height: 100%; }

.step-row {
  position: relative; z-index: 1;
  /* Two equal halves and no gap, so a circle centred in its half sits at a
     quarter and three quarters of the width — which is where the line
     crosses. The breathing room is padding inside each half. */
  display: grid; grid-template-columns: 50% 50%;
  gap: 0; align-items: center;
}
.step-copy { padding: 0 5%; }
.step-row.flip .step-copy { order: 2; }
.step-row.flip .step-pic { order: 1; }
.step-row.no-pic { grid-template-columns: 1fr; }

/* The number in a filled disc, as on the wide layout. */
.step-copy .n {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--wine); color: var(--white);
  font-family: var(--sans); font-weight: 600; font-size: .72rem;
  letter-spacing: .02em; line-height: 1; margin-bottom: 10px;
}
.step-copy h3 {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: 1.18rem; white-space: pre-line;
  color: var(--ink); line-height: 1.18; margin-bottom: 10px;
}
.step-copy p { font-size: .84rem; line-height: 1.5; white-space: pre-line; color: var(--body); }

/* Round, like the wide layout — a photograph of any proportion drops into a
   circle without looking accidentally cropped. */
.step-pic {
  position: relative; width: 76%; margin: 0 auto; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; background: var(--cream-2);
  border: 4px solid var(--cream); box-shadow: 0 6px 18px rgba(2, 27, 58, .12);
}
.step-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No picture yet: the circle keeps its place and marks its middle. */
.step-pic.empty { display: grid; place-items: center; }
.jr-slot {
  display: grid; place-items: center; gap: 5px;
  color: var(--muted); opacity: .55; text-align: center; line-height: 1.3;
}
.jr-slot b { font-weight: 500; font-size: .7rem; letter-spacing: .03em; }
.jr-slot svg { width: 24px; height: 24px; }

/* How the step pictures are treated — the owner picks this in the panel,
   under "How we plan your holiday". Now that they are round, "in colour,
   edges softened" and "the photograph exactly as it is" both leave the
   picture alone: the circle does the softening a mask used to have to do.
   Only the pencil setting still changes anything, for line art. */
.steps.pic-pencil .jr-disc img, .steps.pic-pencil .step-pic img {
  filter: grayscale(1) brightness(1.1) contrast(.92);
}


/* The line that closes the row off, in its own outlined panel. */
.steps-foot {
  margin: calc(28px * var(--space)) auto 0;
  width: min(100%, 72%);
  padding: 18px 30px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream-2);
  text-align: center; font-family: var(--display);
  font-size: clamp(.98rem, 1.4vw, 1.16rem); color: var(--ink);
  line-height: 1.55;
}

@media (max-width: 620px) {
  /* Still two columns, as the design has on a phone — just tighter. */
  .step-rows { gap: calc(26px * var(--space)); padding: 0; }
  .step-copy { padding: 0 4%; }
  .jr-slot svg { width: 20px; height: 20px; }
  .jr-slot b { font-size: .64rem; }
  .step-copy .n { width: 26px; height: 26px; font-size: .66rem; margin-bottom: 8px; }
  .step-copy h3 { font-size: .98rem; margin-bottom: 7px; }
  .step-copy p { font-size: .76rem; }
  .jr-strip.narrow { padding: 15px 2px; }
  .jr-strip.narrow .jr-badge { padding: 0 5px; gap: 7px; }
  .jr-strip.narrow .jr-badge-ic svg { width: 18px; height: 18px; }
  .jr-strip.narrow .jr-badge-tx { font-size: .66rem; }
  .steps-foot { width: 100%; padding: 16px 20px; }
}


/* ---- The wide layout: five circles with the wave weaving between ----

   Built for photographs. The first version followed the owner's Canva picture
   exactly — a wave with his line drawings scattered along it — and that only
   holds together with see-through artwork. The pictures he uploaded are
   photographs, and scattered behind the writing they read as smudges.

   A circle is the one shape a photograph of any proportion drops into without
   looking accidentally cropped, and five in a row hold a rhythm no scattering
   can. Sized in cqw so the whole row scales as one piece. */
.journey {
  display: none; width: min(100% - 40px, var(--wrap)); margin-inline: auto;
  container-type: inline-size; color: var(--wine);
}
.jr-row {
  position: relative;
  /* No gap: with one, the columns are not exact fifths and the wave — which
     crosses at 10, 30, 50, 70 and 90 per cent — misses every circle by about
     10px. The breathing room is padding inside each cell instead. */
  display: grid; grid-template-columns: repeat(5, 20%); gap: 0;
  align-items: start;
}
/* The wave crosses each circle's centre and bows between them, so it reads as
   passing behind them rather than stopping at each one. Its box is exactly as
   tall as a circle and sits over the top of the row. */
.jr-curve {
  position: absolute; left: 0; right: 0; top: 0; height: 13.2cqw;
  pointer-events: none;
  /* It belongs between the circles, so it fades out before the ends rather
     than leaving a stub hanging off each side. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.jr-curve svg { display: block; width: 100%; height: 100%; }

.jr-cell { position: relative; text-align: center; padding: 0 .7cqw; }
.jr-disc {
  position: relative; z-index: 2;
  width: 13.2cqw; height: 13.2cqw; margin: 0 auto;
  border-radius: 50%; overflow: hidden; background: var(--cream-2);
  border: .35cqw solid var(--cream);
  box-shadow: 0 .5cqw 1.6cqw rgba(2, 27, 58, .12);
}
.jr-disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-disc.empty { display: grid; place-items: center; color: var(--muted); }
.jr-disc.empty svg { width: 2cqw; height: 2cqw; opacity: .5; }
/* A child of the cell, not the circle — the circle clips its photograph. */
.jr-cell .jr-num {
  position: absolute; z-index: 3; display: grid; place-items: center;
  border-radius: 50%; background: var(--wine); color: var(--white);
  box-shadow: 0 .2cqw .6cqw rgba(140, 29, 53, .28);
}
.jr-cell .jr-num {
  top: .55cqw; left: 50%; margin-left: -6.05cqw;
  width: 2.7cqw; height: 2.7cqw;
  font-family: var(--sans); font-weight: 600; letter-spacing: .02em;
  font-size: clamp(9px, .82cqw, 15px);
}

.jr-cell h3 {
  margin: 1.5cqw 0 .55cqw; white-space: pre-line;
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(15px, 1.5cqw, 26px); line-height: 1.16;
  letter-spacing: -.01em; color: var(--ink);
}
.jr-cell p {
  margin: 0; white-space: pre-line;
  font-size: clamp(11.5px, .92cqw, 16px); line-height: 1.5; color: var(--body);
}

/* The bar of four reassurances underneath. Four EQUAL columns — in the design
   its rules fall at exact quarters. */
.jr-strip {
  width: 84%; margin: 3cqw auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  background: var(--cream-2); border-radius: 1cqw;
  padding: .94cqw 0;
}
.jr-badge { display: flex; align-items: center; gap: .75cqw; padding: 0 1cqw 0 1.75cqw; }
.jr-badge + .jr-badge { border-left: 1px solid var(--line); }
.jr-badge-ic { color: var(--wine); flex: none; line-height: 0; }
.jr-badge-ic svg { width: clamp(15px, 1.4cqw, 26px); height: clamp(15px, 1.4cqw, 26px); }
.jr-badge-tx {
  max-width: max(152px, 12cqw); white-space: pre-line; color: var(--body);
  font-size: clamp(11.5px, .9375cqw, 17px); line-height: 1.42;
}

/* The same bar on a phone: four across, the icon above the words. cqw does
   not apply here — this one is outside .journey — so it is sized in px. */
.jr-strip.narrow {
  width: 100%; margin: calc(26px * var(--space)) 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: start; justify-content: stretch;
  border-radius: 16px; padding: 18px 6px;
}
.jr-strip.narrow .jr-badge {
  flex-direction: column; align-items: center; text-align: center;
  gap: 9px; padding: 0 6px;
}
.jr-strip.narrow .jr-badge + .jr-badge { border-left: 1px solid var(--line); }
.jr-strip.narrow .jr-badge-ic { padding-top: 0; }
.jr-strip.narrow .jr-badge-ic svg { width: 21px; height: 21px; }
.jr-strip.narrow .jr-badge-tx {
  max-width: none; white-space: normal; font-size: .72rem; line-height: 1.4;
}

/* The heading and its line are centred in both of the owner's designs. */
.steps.has-journey .h-section,
.steps.has-journey .steps-sub { text-align: center; }

/* The section's own heading and its line are part of the picture too — the
   design draws them much larger than the page's other section headings (58px
   and 19px against a 1600px screen) with its own gaps underneath. Sized in
   cqw like the rest of the composition, so the proportions hold at any width
   rather than the heading shrinking away from the stage below it. */
/* The wave hangs past the page column on both sides, which on a narrower
   screen reaches beyond the window. Clipped here — "clip" rather than
   "hidden" so it never turns into a scroll container. */
.steps.has-journey { overflow-x: clip; }
.steps.has-journey .wrap { container-type: inline-size; }
.steps.has-journey .h-section {
  font-size: clamp(1.7rem, 3.625cqw, 3.8rem);
  line-height: 1.15;
}
.steps.has-journey .steps-sub {
  font-size: clamp(14px, 1.1875cqw, 24px);
  line-height: 1.5; margin-top: .94cqw; max-width: none;
}

/* Wide enough for the picture to hold together. Below this the stacked rows
   take over — both are already in the page, so resizing rebuilds nothing. */
@media (min-width: 1000px) {
  .steps.has-journey .journey { display: block; margin-top: .44cqw; }
  .steps.has-journey .step-rows { display: none; }
  .steps.has-journey .jr-strip.narrow { display: none; }
}

/* ================================================
   WHAT PEOPLE SAID
   ================================================ */
/* Three at a time, paged in threes. One at a time beside a photograph that
   was never there meant eight real reviews reading as one, with half the
   width holding a placeholder. They are the strongest thing on the page. */
.st-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: calc(22px * var(--space));
}
.st-head .kicker { margin-bottom: 6px; }
.st-nav { display: flex; gap: 8px; flex: none; }
.st-arw {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  transition: background .18s, color .18s, border-color .18s;
}
.st-arw.on { background: var(--wine); border-color: var(--wine); color: #fff; }
.st-arw:hover { background: var(--wine); border-color: var(--wine); color: #fff; }

.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.st-card {
  display: flex; flex-direction: column; gap: 14px; margin: 0;
  padding: 26px 26px 24px; border-radius: var(--radius-lg);
  background: var(--cream-2); border: 1px solid var(--line);
}
.st-stars { display: flex; gap: 3px; color: var(--wine); }
.st-stars span { display: block; width: 15px; height: 15px; }
.st-stars svg { display: block; width: 100%; height: 100%; }
.st-card blockquote {
  margin: 0; flex: 1;
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(.95rem, 1.15vw, 1.06rem); line-height: 1.6; color: var(--ink);
}
.st-card figcaption {
  display: flex; align-items: center; gap: 11px;
  padding-top: 15px; border-top: 1px solid var(--line);
}
.st-av {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: 50%; background: var(--wine-soft); color: var(--wine);
  font-family: var(--display); font-size: 1rem;
}
.st-nm { display: block; font-size: .9rem; font-weight: 500; color: var(--ink); }
.st-pl { display: block; font-size: .78rem; color: var(--wine); }

.st-foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.st-foot .st-nav { display: none; }
.st-dots { display: flex; justify-content: center; gap: 7px; }
.st-dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer; transition: width .2s, background .2s;
}
.st-dots button.on { width: 20px; border-radius: 4px; background: var(--wine); }

@media (max-width: 900px) {
  .st-grid { grid-template-columns: 1fr; gap: 14px; }
  .st-card { padding: 20px 20px 18px; }
  /* Down with the dots on a phone: a row of its own holding two arrows and
     nothing else reads as a mistake. */
  .st-head .st-nav { display: none; }
  .st-foot .st-nav { display: flex; }
  .st-arw { width: 36px; height: 36px; }
  .st-dots button { width: 8px; height: 8px; }
  .st-dots button.on { width: 22px; }
}

/* ================================================
   TERMS AND PRIVACY
   ================================================ */
/* Long documents. The owner writes them as plain text and the page works out
   the headings and the lists — see legalBody() in js/site.js. */
/* The reading column stays at a comfortable measure — stretching it to fill a
   wide screen makes the lines too long to read. The space beside it holds the
   list of sections instead, which is worth more on a document this long than
   a wider paragraph would be. */
.legal-wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.legal-wrap.has-index {
  display: grid; grid-template-columns: 1fr 250px; gap: 56px; align-items: start;
}
.legal-main { max-width: 78ch; }

.legal-index { position: sticky; top: calc(var(--nav-h) + 22px); }
.legal-index .kicker { margin-bottom: 12px; }
.legal-index ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.legal-index li { margin: 0; }
.legal-index a {
  display: block; padding: 6px 0 6px 15px; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: .82rem; line-height: 1.4; color: var(--muted);
  transition: color .18s, border-color .18s;
}
.legal-index a:hover { color: var(--ink); }
.legal-index a.on { color: var(--wine); border-left-color: var(--wine); }

@media (max-width: 1040px) {
  /* Not enough room beside the writing, and a list of twenty-two links above
     it would push the document itself off the screen. */
  .legal-wrap.has-index { display: block; }
  .legal-index { display: none; }
  .legal-main { max-width: none; }
}
.legal-stamp { color: var(--muted); font-size: .86rem; margin-bottom: 4px; }
.legal-body > p { margin-bottom: 13px; line-height: 1.75; }
.legal-h {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(1.08rem, 1.7vw, 1.3rem); color: var(--ink);
  margin: calc(30px * var(--space)) 0 12px;
  padding-top: 15px; border-top: 1px solid var(--line);
}
.legal-body > .legal-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-list { margin: 0 0 14px; padding-left: 4px; list-style: none; }
.legal-list li {
  position: relative; padding-left: 20px; margin-bottom: 7px; line-height: 1.7;
}
.legal-list li::before {
  content: ""; position: absolute; left: 3px; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--wine);
}

/* A destination whose write-up is not ready. Small, centred and warm — the
   photograph above has already done the selling, so this only has to say that
   more is coming and invite the question. */
.soon-card {
  max-width: 620px; margin: 0 auto; text-align: center;
  padding: 38px 34px 34px; border-radius: var(--radius-lg);
  background: var(--cream-2); border: 1px solid var(--line);
}
.soon-mark {
  display: inline-grid; place-items: center; width: 52px; height: 52px;
  margin-bottom: 16px; border-radius: 50%;
  background: var(--wine-soft); color: var(--wine);
}
.soon-mark svg { width: 24px; height: 24px; }
.soon-card h2 {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(1.24rem, 2.2vw, 1.62rem); line-height: 1.28;
  color: var(--ink); margin-bottom: 12px;
}
.soon-card p {
  color: var(--body); font-size: .96rem; line-height: 1.72;
  max-width: 48ch; margin: 0 auto 22px;
}

@media (max-width: 620px) {
  .soon-card { padding: 28px 20px 26px; }
  .soon-mark { width: 44px; height: 44px; }
}

/* ================================================
   TRAVEL HELP
   ================================================ */
.help-head { max-width: 62ch; }
.help-head .lede { margin-top: 14px; }

/* Visa look-alike sites charge several times the real fee. Worth a warning
   that reads as one. */
.help-warn {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  margin-top: calc(24px * var(--space));
  padding: 18px 22px; border-radius: var(--radius);
  background: var(--wine-soft); border: 1px solid rgba(140, 29, 53, .16);
}
.help-warn .ico { color: var(--wine); line-height: 0; padding-top: 3px; }
.help-warn p { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }

.help-group-head { max-width: 68ch; margin-bottom: calc(18px * var(--space)); }
.help-group-head .note {
  margin-top: 9px; color: var(--muted); font-size: .92rem; line-height: 1.6;
}
.help-items {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px;
}
.help-item {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 18px 20px; border-radius: var(--radius);
  background: var(--cream-2); border: 1px solid var(--line);
}
.help-item .tick { color: var(--wine); line-height: 0; padding-top: 1px; }
.help-item .tick svg { width: 17px; height: 17px; }
.help-item h3 {
  font-family: var(--sans); font-size: .96rem; font-weight: 600;
  color: var(--ink); line-height: 1.4; margin-bottom: 5px;
}
.help-item p { font-size: .89rem; line-height: 1.62; color: var(--body); }
.help-item .arrow-link { margin-top: 9px; font-size: .85rem; }

/* Not small print. The page states what countries and airlines want, so the
   line saying it is guidance rather than the rules has to be readable. */
.help-note {
  margin-top: calc(10px * var(--space));
  padding: 24px 28px; border-radius: var(--radius);
  background: var(--cream-2); border: 1px solid var(--line);
}
.help-note h3 {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--wine);
  margin-bottom: 9px;
}
.help-note p { font-size: .89rem; line-height: 1.68; color: var(--body); max-width: 88ch; }
.help-note .arrow-link { margin-top: 11px; font-size: .85rem; }

.fact-caveat {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
  font-size: .78rem; line-height: 1.55; color: var(--muted);
}
.fact-caveat a { color: var(--wine); text-decoration: underline; }

@media (max-width: 820px) {
  .help-items { grid-template-columns: 1fr; }
  .help-item { padding: 15px 16px; }
  .help-warn { padding: 15px 16px; gap: 10px; }
}

/* ================================================
   A DESTINATION'S OWN PAGE — under the banner
   ================================================ */
/* It was two columns from the top, and the description is a sentence: the
   left column ran out after one line and left a great deal of nothing beside
   a panel that carried on. The description reads across the page now and the
   panels sit under it, so the page is balanced by what the owner has already
   written rather than by him writing more. */
.detail-intro { max-width: 72ch; }
.detail-intro h2 { margin-bottom: 12px; }
.detail-intro p { font-size: 1.04rem; line-height: 1.75; }

/* The one thing this page has that a guidebook has not. */
.why-card {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  margin-top: calc(26px * var(--space));
  padding: 24px 30px 22px; border-radius: var(--radius-lg);
  background: var(--wine-soft); border: 1px solid rgba(140, 29, 53, .14);
}
.why-card .quote-mark {
  font-family: var(--display); font-size: 3.2rem; line-height: .72;
  color: var(--wine); opacity: .38;
}
.why-card .kicker { color: var(--wine); margin-bottom: 7px; }
.why-card p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; white-space: pre-line; }
.why-card .who {
  margin-top: 10px; font-family: var(--display); font-size: .92rem; color: var(--wine);
}

.detail-panels {
  margin-top: calc(26px * var(--space));
  display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 20px;
  align-items: start;
}
.detail-panels .card-soft h3 { margin-bottom: 12px; }

.fact-list { display: grid; gap: 2px; }
.fact {
  display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.fact:last-child { border-bottom: 0; padding-bottom: 0; }
.fact .ico { color: var(--wine); line-height: 0; padding-top: 2px; }
.fact .ico svg { width: 18px; height: 18px; }
.fact .lbl {
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.fact .val { font-size: .95rem; color: var(--ink); margin-top: 2px; }

@media (max-width: 780px) {
  .detail-panels { grid-template-columns: 1fr; }
  .why-card { padding: 18px 20px; gap: 12px; }
  .why-card .quote-mark { font-size: 2.4rem; }
  .detail-intro p { font-size: .98rem; }
}

/* ================================================
   STORIES / TESTIMONIAL
   ================================================ */
.story {
  background: var(--cream-2); border-radius: var(--radius-lg); padding: calc(30px * var(--space)) 34px;
  display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: center;
}
.story blockquote { margin: 0; }
.story .quote { font-family: var(--display); font-size: clamp(1.25rem, 2.3vw, 1.62rem); color: var(--ink); line-height: 1.42; }
.story .who { display: flex; align-items: center; gap: 13px; margin-top: 26px; }
.story .who .av {
  width: 42px; height: 42px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--sand); display: flex; align-items: center; justify-content: center;
  font-family: var(--display); color: var(--wine); font-size: 1rem;
}
.story .who .nm { font-size: .88rem; font-weight: 600; color: var(--ink); }
.story .who .pl { font-size: .82rem; color: var(--wine); }
.story .pic { position: relative; height: 240px; border-radius: var(--radius); overflow: hidden; }
.story .pic .ph { position: absolute; inset: 0; }
.story-nav { position: absolute; right: 18px; bottom: 18px; z-index: 6; display: flex; gap: 9px; }
.story-nav button {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0,0,0,.16); transition: background .2s, color .2s, transform .2s;
}
.story-nav button:hover { transform: scale(1.07); }
.story-nav button.on { background: var(--wine); color: #fff; }

/* ================================================
   CTA BANDS
   ================================================ */
.cta-band {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: 240px; display: flex; align-items: center;
}
.cta-band .ph { position: absolute; inset: 0; }
.cta-band .veil {
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(90deg, rgba(18,28,38,.86) 0%, rgba(18,28,38,.62) 42%, rgba(18,28,38,.12) 78%, rgba(18,28,38,0) 100%);
}
.cta-band .inner { position: relative; z-index: 5; padding: calc(36px * var(--space)) 40px; max-width: 620px; }
.cta-band h2 { color: #fff; white-space: pre-line; font-size: clamp(1.5rem, 2.9vw, 2.1rem); }
.cta-band p { color: rgba(255,255,255,.9); margin-top: 14px; white-space: pre-line; font-size: .94rem; }
.cta-band .btn { margin-top: 26px; }

/* the light "need help deciding" strip */
.help-strip {
  background: var(--cream-2); border-radius: var(--radius-lg); overflow: hidden;
  display: grid; grid-template-columns: 84px 1fr auto 300px; align-items: center; gap: 26px;
  padding-left: 30px; position: relative;
}
.help-strip .ring {
  width: 62px; height: 62px; border-radius: 50%; background: var(--sand);
  display: flex; align-items: center; justify-content: center; color: var(--wine);
}
.help-strip .copy { padding: 30px 0; }
.help-strip h3 { font-size: 1.5rem; margin-bottom: 8px; }
.help-strip p { font-size: .88rem; max-width: 42ch; }
.help-strip .pic { position: relative; align-self: stretch; min-height: 150px; }
.help-strip .pic .ph { position: absolute; inset: 0; }
.help-strip .pic .fade {
  position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(90deg, var(--cream-2) 0%, rgba(243,238,231,0) 55%);
}

/* ================================================
   FORMS
   ================================================ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .8rem; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .92rem; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--wine); box-shadow: 0 0 0 3px var(--wine-soft);
}
.form-msg { margin-top: 14px; font-size: .88rem; }
.form-msg.err { color: var(--wine); }
.form-msg.ok { color: var(--green); }

.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: start; }
.card-soft { background: var(--cream-2); border-radius: var(--radius-lg); padding: calc(26px * var(--space)) 28px; }
.detail-row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.detail-row:last-child { border-bottom: 0; }
.detail-row .ico { color: var(--wine); flex: none; margin-top: 2px; }
.detail-row .lbl { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.detail-row .val { font-size: .95rem; color: var(--ink); }
.detail-row a.val:hover { color: var(--wine); }

.thanks { text-align: center; padding: 34px 20px; }
.thanks .ring {
  width: 62px; height: 62px; border-radius: 50%; background: var(--wine-soft); color: var(--wine);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}

/* ================================================
   EXTRA SECTIONS
   Sections the owner builds in the admin panel. They reuse the
   site's own type, spacing and colours so anything added still
   looks like it belongs here.
   ================================================ */
.cs .cs-sub { margin-top: 8px; color: var(--body); font-size: .95rem; max-width: 62ch; }
.cs.cs-centred .cs-plain > h2,
.cs.cs-centred .cs-panel > h2,
.cs.cs-centred .cs-plain > .cs-sub,
.cs.cs-centred .cs-panel > .cs-sub { text-align: center; margin-inline: auto; }

.cs-body { margin-top: 20px; display: grid; gap: 20px; align-items: start; }
.cs-body.cols-1 { grid-template-columns: 1fr; }
.cs-body.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cs-body.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cs-body.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cs-body.cols-1 .cs-block { max-width: 72ch; }

.cs-block h3 { color: var(--ink); }
.cs-block p { color: var(--body); font-size: .94rem; }

/* icon + heading + text, the same shape as "Our Promise" */
.cs-feature { text-align: center; }
.cs-feature .ring {
  width: 52px; height: 52px; border-radius: 50%; background: var(--cream-2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; color: var(--wine);
}
.cs-feature h3 { font-family: var(--sans); font-size: .95rem; font-weight: 600; margin-bottom: 9px; }
.cs-feature p { font-size: .86rem; }

.cs-photo {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow);
}
.cs-photo .ph { position: absolute; inset: 0; }
.cs-caption { margin-top: 10px; font-size: .84rem; color: var(--muted); }

.cs-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.cs-list li:last-child { border-bottom: 0; }
.cs-list .dot { color: var(--wine); flex: none; margin-top: 4px; }

.cs-panel { padding: calc(32px * var(--space)) 34px; }

/* the dark photo band reads white, so recolour what sits inside it */
.cs-band .cs-inner { max-width: none; width: 100%; }
.cs-band h2, .cs-band h3 { color: #fff; }
.cs-band p, .cs-band .cs-sub, .cs-band .cs-caption { color: rgba(255, 255, 255, .88); }
.cs-band .cs-feature .ring { background: rgba(255, 255, 255, .14); color: #fff; }
.cs-band .cs-list li { border-bottom-color: rgba(255, 255, 255, .22); }
.cs-band .cs-list .dot { color: #fff; }
.cs-band .btn { background: #fff; color: var(--ink); }
.cs-band .btn:hover { color: var(--wine); }

@media (max-width: 900px) {
  .cs-body.cols-3, .cs-body.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cs-panel { padding: 26px 20px; }
}
@media (max-width: 620px) {
  .cs-body.cols-2, .cs-body.cols-3, .cs-body.cols-4 { grid-template-columns: 1fr; }
}

/* ================================================
   ENQUIRY POPUP
   ================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(18, 28, 38, .55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .22s;
}
.modal-overlay.open { opacity: 1; }
.modal-box {
  position: relative; background: var(--cream); border-radius: var(--radius-lg);
  padding: 34px 32px 30px; width: min(100%, 480px);
  max-height: calc(100dvh - 40px); overflow-y: auto;
  box-shadow: 0 24px 60px rgba(12, 22, 32, .3);
  transform: translateY(14px) scale(.98); transition: transform .26s cubic-bezier(.22,.61,.36,1);
  text-align: center;
}
.modal-overlay.open .modal-box { transform: none; }
.modal-box .ring {
  width: 58px; height: 58px; border-radius: 50%; background: var(--wine-soft); color: var(--wine);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.modal-note { font-size: .86rem; color: var(--muted); margin-top: 6px; }
.modal-x {
  position: absolute; top: 14px; right: 16px; width: 32px; height: 32px;
  border: 0; background: transparent; color: var(--muted); font-size: 1rem;
  border-radius: 50%; cursor: pointer; transition: background .2s, color .2s;
}
.modal-x:hover { background: var(--sand); color: var(--ink); }
.modal-list {
  margin: 22px 0 26px; text-align: left;
  display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 0;
}
.modal-list dt {
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 10px 14px 10px 0;
  border-top: 1px solid var(--line);
}
.modal-list dd {
  margin: 0; font-size: .92rem; color: var(--ink); padding: 10px 0;
  border-top: 1px solid var(--line); word-break: break-word; white-space: pre-wrap;
}
.modal-list dt:first-child, .modal-list dt:first-child + dd { border-top: 0; }

@media (max-width: 480px) {
  .modal-list { grid-template-columns: 1fr; }
  .modal-list dt { padding-bottom: 0; border-top: 1px solid var(--line); }
  .modal-list dd { padding-top: 2px; border-top: 0; }
}

/* ================================================
   DESTINATION DETAIL PAGE
   ================================================ */
.detail-hero { position: relative; height: clamp(300px, 40vw, 430px); border-radius: var(--radius-lg); overflow: hidden; }
.detail-hero .ph { position: absolute; inset: 0; }
/* Name at the top of the banner, so the darkening runs from the top down and
   the photograph below it stays clear. */
.detail-hero .veil { position: absolute; inset: 0; z-index: 4; background: linear-gradient(180deg, rgba(12,22,32,.78) 0%, rgba(12,22,32,.34) 55%, rgba(12,22,32,.12) 100%); }
.detail-hero .inner { position: absolute; z-index: 5; left: 40px; right: 40px; top: 34px; color: #fff; }
.detail-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
.detail-hero .tl { color: rgba(255,255,255,.9); margin-top: 6px; }

.detail-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.hl-list li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.hl-list li:last-child { border-bottom: 0; }
.hl-list .dot { color: var(--wine); flex: none; margin-top: 3px; }

.crumbs { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--muted); margin-bottom: 18px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--wine); }
.crumbs .sep { opacity: .55; }

/* ================================================
   FOOTER
   ================================================ */
/* The registration number, under the copyright line. */
.footer-left .cr { display: block; }
.footer-left .entity,
.footer-left .gst {
  display: block; margin-top: 3px; max-width: 46ch;
  font-size: .74rem; line-height: 1.5; letter-spacing: .02em; color: var(--muted);
}

.site-footer { border-top: 1px solid var(--line); margin-top: calc(52px * var(--space)); padding: calc(22px * var(--space)) 0 calc(30px * var(--space)); }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-left { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer-left .logo { font-size: 1.55rem; }
.footer-left .cr { font-size: .8rem; color: var(--muted); }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 36px; height: 36px; border-radius: 50%; background: var(--cream-2);
  display: flex; align-items: center; justify-content: center; color: var(--ink-soft);
  transition: background .2s, color .2s, transform .2s;
}
.socials a:hover { background: var(--wine); color: #fff; transform: translateY(-2px); }
.footer-right { display: flex; align-items: center; gap: 14px; font-size: .82rem; color: var(--muted); }
.footer-right a:hover { color: var(--wine); }
.footer-right .sep { opacity: .5; }

/* ================================================
   OPENING ANIMATION
   Shown once per visit: the logo starts large in the middle of the
   screen and settles into the top bar.
   ================================================ */
/* Painted before anything else while the opening animation gets ready. */
html.nx-boot::before {
  content: ""; position: fixed; inset: 0;
  background: var(--cream); z-index: 299;
}
html.nx-boot .site-header .logo { opacity: 0; }

/* Shown while the published copy is still on its way.

   The alternative was to put the built-in copy on screen and swap it a moment
   later, which is how a visitor ended up watching the previous photograph turn
   into the new one. Better to wait behind a quiet cover than to show something
   that is about to change. It only appears if the wait passes half a second,
   so a normal load never sees it. */
html.nx-waiting::before {
  content: ""; position: fixed; inset: 0;
  background: var(--cream); z-index: 298;
}
html.nx-waiting::after {
  content: ""; position: fixed; z-index: 299;
  left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 2px solid var(--line); border-top-color: var(--wine);
  border-radius: 50%; animation: nxSpin .8s linear infinite;
}
@keyframes nxSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html.nx-waiting::after { animation: none; border-top-color: var(--line); }
}

.intro-veil {
  position: fixed; inset: 0; z-index: 300; background: var(--cream);
  opacity: 0;
  pointer-events: none;
}
.intro-veil.in { opacity: 1; }
.intro-veil.out { opacity: 0; transition: opacity .85s ease .15s; }

.intro-flyer {
  position: fixed; z-index: 301;
  display: flex; align-items: center;
  transform-origin: center center;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  will-change: transform, opacity;
}
.intro-flyer.in { opacity: 1; }
.intro-flyer.moving {
  transition: transform 1s cubic-bezier(.62,.02,.2,1), opacity .5s ease;
}
.intro-flyer.gone { opacity: 0; transition: opacity .3s ease; }
.intro-flyer img { height: 100%; width: auto; display: block; }

/* the real logo waits its turn */
.intro-running .site-header .logo { opacity: 0; }
.site-header .logo { transition: opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .intro-veil, .intro-flyer { display: none !important; }
  .intro-running .site-header .logo { opacity: 1; }
}

/* ================================================
   DESTINATION RAILS
   A row of destination cards that slides along on its own and
   can be stepped through with the arrows either side.
   Every card stays in the page, so search engines still see the
   whole collection — only the view moves.
   ================================================ */
.dest-rail { position: relative; }
.dest-rail .viewport { overflow: hidden; padding: 4px; margin: -4px; }
.dest-rail .track {
  display: flex; gap: 18px;
  transition: transform .62s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.dest-rail .track > * { flex: 0 0 calc((100% - 54px) / 4); }

.rail-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; z-index: 8;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 16px rgba(29, 51, 70, .14);
  transition: background .2s, color .2s, opacity .2s, transform .2s;
  opacity: 0;
}
.dest-rail:hover .rail-arrow, .dest-rail:focus-within .rail-arrow { opacity: 1; }
.rail-arrow:hover { background: var(--wine); color: #fff; border-color: var(--wine); }
.rail-arrow.prev { left: -14px; }
.rail-arrow.next { right: -14px; }
.rail-arrow[disabled] { opacity: 0 !important; pointer-events: none; }

.rail-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.rail-dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer; transition: background .2s, width .2s;
}
.rail-dots button.on { background: var(--wine); width: 20px; border-radius: 4px; }

@media (max-width: 1040px) {
  .dest-rail .track > * { flex-basis: calc((100% - 18px) / 2); }
  .rail-arrow.prev { left: -6px; }
  .rail-arrow.next { right: -6px; }
}
@media (max-width: 760px) {
  /* five slanted strips are too narrow to read on a phone */
  .hero-strips .strip:nth-child(n+4) { display: none; }
  .hero-strips { width: 128%; margin-left: -14%; }
}

@media (max-width: 620px) {
  /* One destination at a time on a phone. */
  .dest-rail .track > * { flex-basis: 100%; }
  .rail-arrow { opacity: 1; width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .dest-rail .track { transition: none; }
}

/* ================================================
   ROTATING DESTINATION ROWS
   A row can bring a different destination into view every few
   seconds, so more of the collection gets seen.
   ================================================ */
.dest-grid .rotating { transition: opacity .45s ease; }
.dest-grid .rotating.swapping { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .dest-grid .rotating { transition: none; }
}

/* ================================================
   SCROLL REVEAL
   ================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1040px) {
  .dest-grid, .promise-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
  .step:nth-child(3n+1)::before { display: none; }
  .help-strip { grid-template-columns: 62px 1fr; padding: 26px; gap: 20px; }
  .help-strip .pic { display: none; }
  .help-strip .btn { grid-column: 2; justify-self: start; }
  .story { grid-template-columns: 1fr; }
  .contact-grid, .detail-body { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --nav-h: 68px; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 8px 20px 20px; box-shadow: 0 18px 30px rgba(29,51,70,.09);
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: .95rem; }
  /* Nothing to hover on a phone, so the two are always shown — but as a pair
     of cards side by side rather than an indented list. Indenting them behind
     a rail left a stray hook of a border down the side and put their dividers
     out of step with the menu's own. Each says what it is and how many places
     are in it, which is the one thing worth knowing before choosing. */
  /* The word and the arrow share the first line; the two sit on a line of
     their own underneath, which is why the group wraps. */
  .nav-group { display: flex; flex-wrap: wrap; align-items: stretch; }
  .nav-group .caret { display: none; }
  .nav-group::after { display: none; }
  /* The word is only as wide as itself, so it opens the Destinations page and
     nothing else does. Everything to the right of it — the empty run across
     to the arrow, and the arrow — is one button that opens the drop-down. */
  .nav-group > a { flex: none; padding-right: 8px; border-bottom: 1px solid var(--line); }
  .nav-caret {
    display: flex; align-items: center; justify-content: flex-end; flex: 1;
    margin: 0; padding: 0 12px 0 0; border: 0; background: none;
    border-bottom: 1px solid var(--line); color: var(--ink-soft);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav-caret svg { transition: transform .24s cubic-bezier(.22,.75,.3,1); }
  .nav-group.open .nav-caret svg { transform: rotate(180deg); }
  /* Closed by default, so it costs nothing until it is asked for. */
  .nav-menu {
    flex-basis: 100%;
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; background: none; border: 0; box-shadow: none;
    /* "All destinations" is much the longest, and three across a phone left
       them three different widths. It takes the first row on its own and the
       two halves sit under it, which reads as the hierarchy it actually is. */
    display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
    margin: 0; padding: 0;
    /* the drop-down's rounded corners would curl the ends of the line below */
    border-radius: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .28s cubic-bezier(.22,.75,.3,1), padding .28s;
  }
  .nav-group.open .nav-menu {
    max-height: 180px; padding: 10px 0 12px;
    border-bottom: 1px solid var(--line);
  }
  .nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { transform: none; }
  .nav-menu::before { display: none; }
  /* One line each, so the two cost about 40px of the menu rather than 120. */
  .nav-menu a {
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 10px 8px 8px; border: 1px solid var(--line); border-radius: 999px;
    background: #fff; font-size: .84rem; color: var(--ink);
  }
  .nav-menu a:first-child { grid-column: 1 / -1; }
  .nav-menu a:hover { background: #fff; }
  .nav-menu a.current { border-color: var(--wine); background: var(--wine-soft); }
  .nav-menu .nm-sub { display: none; }
  .nav-menu .nm-ic {
    display: grid; place-items: center; flex: none; width: 24px; height: 24px;
    border-radius: 50%; background: var(--wine-soft); color: var(--wine);
  }
  .nav-menu .nm-ic svg { width: 13px; height: 13px; }
  .nav-menu .nm-label { font-weight: 500; line-height: 1.2; }
  .nav-menu .nm-count {
    display: grid; place-items: center; margin-left: auto; flex: none;
    min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px;
    background: var(--cream-2); color: var(--muted); font-size: .7rem;
  }
  .nav-links a::after { display: none; }
  .nav .btn { display: none; }
  /* centre the logo, with the menu button tucked to the right */
  .nav { position: relative; justify-content: center; }
  .nav > .logo { margin: 0 auto; }
  .nav-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .nav-links .btn { display: inline-flex; justify-content: center; margin-top: 16px; border-bottom: 0; }

  /* On a phone the photograph goes FIRST and runs edge to edge, so the page
     opens with a picture instead of a wall of words. */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art {
    order: -1;
    /* On a phone the photograph runs right across the screen, as it did
       before — only the desktop version is kept inside the page column. */
    height: auto; aspect-ratio: 3 / 2; min-height: 200px; max-height: 520px;
    border-radius: 0;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0;
  }
  .hero-art .fade {
    background: linear-gradient(180deg,
      rgba(250,247,243,0) 55%, rgba(250,247,243,.55) 82%, var(--cream) 100%);
  }
  .hero-copy { padding: 18px 0 22px; }
  .hero { padding-top: 0; }

  /* ---- the page opening, on a phone only ----
     The photograph is a quarter shorter than it was, and its lower edge melts
     away into the page. The words then rise up into that softened band, so the
     picture appears to hand the page over to them.

     The single-destination pages are left out on purpose: they use a different
     header, with the name written over the photograph. */
  :is([data-page="home"], [data-page="honeymoon"], [data-page="family"],
      [data-page="destinations"], [data-page="about"], [data-page="contact"]) {
    /* The height follows the width instead of being a fixed number, so the box
       keeps the shape of an ordinary photograph rather than letterboxing it.
       Kept inside the page column — no bleeding out to the screen edges. */
    .hero-art {
      aspect-ratio: 3 / 2;
      height: auto;
      min-height: 200px;
      max-height: 520px;
    }
    /* Reaches solid cream at 92%, not 100%, and hangs 2px below the box.
       Ending exactly on the edge left the last part-covered row blending the
       photograph with the page — a thin dark line across the bottom of every
       hero on a phone. The element clips the overhang, so nothing shows. */
    .hero-art .fade {
      inset: 0 0 -2px 0;
      /* Starts far lower and is far gentler than it was: the photograph was
         being washed out over most of its height. It still reaches solid
         cream before the bottom edge, which is what stops the thin dark line
         appearing there. */
      background: linear-gradient(180deg,
        rgba(250,247,243,0) 62%, rgba(250,247,243,.45) 84%, var(--cream) 96%);
    }
    /* sits inside the faded lower edge rather than below it */
    .hero-copy {
      padding: 0 0 6px;
      margin-top: -28px;
      position: relative; z-index: 6;
    }
    .hero-copy .lede { margin-top: 14px; }
    .hero-copy .btn  { margin-top: 18px; }
    .hero-copy .rule { margin: 12px 0; }
  }

  /* Held back until the page is really on screen — otherwise this plays behind
     the opening cover and nobody sees it. Set by heroReady() in js/site.js.
     On the Destinations page the picture is the row of slanted strips, so that
     is what settles there. */
  :is([data-page="home"], [data-page="honeymoon"], [data-page="family"],
      [data-page="destinations"], [data-page="about"], [data-page="contact"]).hero-ready {
    .hero-art > .ph,
    .hero-art > .hero-strips { animation: heroSettle 2.6s cubic-bezier(.22,.7,.3,1) both; }
    .hero-art .fade          { animation: heroMelt 1.7s ease-out .25s both; }
    .hero-copy               { animation: heroRise 1s cubic-bezier(.22,.75,.3,1) .55s both; }
  }

  @keyframes heroSettle { from { transform: scale(1.07); } to { transform: none; } }
  @keyframes heroMelt   { from { opacity: .12; }           to { opacity: 1; } }
  @keyframes heroRise   { from { opacity: 0; transform: translateY(26px); }
                          to   { opacity: 1; transform: none; } }
  .intro-card { grid-template-columns: 1fr; margin-top: 20px; padding: 22px 20px; gap: 16px; }
  .intro-card .mark { display: none; }
  .intro-card .body { border-left: 0; padding-left: 0; }
  .split-cards { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; row-gap: 30px; }
  .feature + .feature::before { display: none; }
  .feature { padding: 0 6px; }
  .cta-band .veil { background: linear-gradient(180deg, rgba(18,28,38,.55) 0%, rgba(18,28,38,.88) 100%); }
  .cta-band .inner { padding: 28px 22px; }
  .section { padding: calc(38px * var(--space)) 0; }
  .site-footer { margin-top: calc(38px * var(--space)); }
  .footer-row { justify-content: center; text-align: center; }
  .footer-left { justify-content: center; }
  .detail-hero .inner { left: 22px; right: 22px; bottom: 24px; }
}

/* Someone who has asked their phone to keep motion down gets the shorter,
   softer hero — but none of the movement. */
@media (prefers-reduced-motion: reduce) {
  .hero-ready .hero-art > .ph,
  .hero-ready .hero-art > .hero-strips,
  .hero-ready .hero-art .fade,
  .hero-ready .hero-copy { animation: none; }
}

@media (max-width: 620px) {
  .dest-grid, .promise-grid, .form-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step::before { display: none !important; }
  .statement, .panel { padding: 26px 20px; }
  .story { padding: 22px 20px; }
  .card-soft { padding: 20px; }
  .dest-card.size-tall .txt, .soon-tile { min-height: 220px; }
}

/* ================================================
   THE FLOATING HELPERS
   A WhatsApp button, and a small chat panel above it.
   Deliberately quiet: they sit out of the way and never
   cover the page content.
   ================================================ */
.helper-dock {
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

.helper-btn {
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 8px 24px rgba(12, 22, 32, .26);
  transition: transform .2s, box-shadow .2s, background .2s;
  position: relative;
}
.helper-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(12, 22, 32, .34); }
.helper-btn.whatsapp { background: #25D366; }
.helper-btn.whatsapp:hover { background: #1FB855; }
.helper-btn.chat { background: var(--wine); }
.helper-btn.chat:hover { background: var(--wine-dark); }

/* the little name that appears beside the button */
.helper-btn .tip {
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  background: var(--ink); color: #fff; font-family: var(--sans); font-size: .78rem;
  padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.helper-btn:hover .tip { opacity: 1; }

/* ---------------- the chat panel ---------------- */
.helper-panel {
  position: fixed; right: 20px; bottom: 92px; z-index: 121;
  width: min(360px, calc(100vw - 40px));
  max-height: min(560px, calc(100dvh - 140px));
  background: var(--cream); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 22px 60px rgba(12, 22, 32, .3);
  display: none; flex-direction: column; overflow: hidden;
  transform: translateY(12px) scale(.98); opacity: 0;
  transition: transform .24s cubic-bezier(.22,.61,.36,1), opacity .24s;
}
.helper-panel.show { display: flex; }
.helper-panel.open { transform: none; opacity: 1; }

.helper-head {
  background: var(--wine); color: #fff; padding: 16px 18px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.helper-head h3 { color: #fff; font-size: 1.1rem; }
.helper-head p { font-size: .8rem; color: rgba(255,255,255,.85); margin-top: 3px; }
.helper-close {
  background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 1rem;
  width: 28px; height: 28px; border-radius: 50%; flex: none; opacity: .85;
}
.helper-close:hover { background: rgba(255,255,255,.16); opacity: 1; }

.helper-body { padding: 16px; overflow-y: auto; flex: 1; }
.helper-msg {
  background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  padding: 11px 14px; font-size: .88rem; margin-bottom: 10px; color: var(--body);
}
.helper-msg.mine {
  background: var(--wine-soft); border-color: transparent; color: var(--ink);
  border-radius: 14px 14px 4px 14px; margin-left: auto; max-width: 85%;
}
.helper-msg a { color: var(--wine); text-decoration: underline; }

.helper-qs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.helper-qs button {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 8px 13px; font-size: .8rem; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.helper-qs button:hover { border-color: var(--wine); color: var(--wine); }

.helper-foot { padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.helper-foot .btn { width: 100%; justify-content: center; background: #25D366; }
.helper-foot .btn:hover { background: #1FB855; box-shadow: 0 8px 20px rgba(37,211,102,.3); }

@media (max-width: 620px) {
  .helper-dock { right: 14px; bottom: 14px; gap: 10px; }
  .helper-btn { width: 50px; height: 50px; }
  .helper-btn .tip { display: none; }
  .helper-panel { right: 14px; left: 14px; width: auto; bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .helper-panel, .helper-btn { transition: none; }
}