/* ==========================================================================
   Truvela — Stylesheet
   Fonts: Cormorant Garamond (headlines), Manrope (body/labels)
   Palette: Truvela Blue #1C3F58 · Slate #506777 · Ink #0C161A
            Mist #BCC3C6 · Warm White #F6F1E9 · White #FFFFFF
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-300.woff2") format("woff2"),
       url("../assets/fonts/cormorant-garamond-300.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-300-italic.woff2") format("woff2"),
       url("../assets/fonts/cormorant-garamond-300-italic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-400.woff2") format("woff2"),
       url("../assets/fonts/cormorant-garamond-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-500.woff2") format("woff2"),
       url("../assets/fonts/cormorant-garamond-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-400.woff2") format("woff2"),
       url("../assets/fonts/manrope-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-500.woff2") format("woff2"),
       url("../assets/fonts/manrope-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-700.woff2") format("woff2"),
       url("../assets/fonts/manrope-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root{
  --blue:  #1C3F58;
  --slate: #506777;
  --ink:   #0C161A;
  --mist:  #BCC3C6;
  --warm:  #F6F1E9;
  --white: #FFFFFF;

  --font-head: "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 400ms;
  --dur-med: 800ms;
  --dur-slow: 1400ms;

  --gutter: clamp(24px, 6vw, 96px);
  --section-pad: clamp(72px, 12vw, 160px);

  --rule: 1px solid rgba(12, 22, 26, 0.12);
  --rule-on-blue: 1px solid rgba(188, 195, 198, 0.3);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select { font: inherit; }

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

/* ---------- Base ---------- */
body{
  background: var(--warm);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .font-head {
  font-family: var(--font-head);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--blue);
}
em, .italic { font-style: italic; font-weight: 300; }

p.lede {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--slate);
  max-width: 46ch;
}

.eyebrow{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}

.container{
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.visually-hidden{
  position: absolute !important;
  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: var(--gutter);
  top: -60px;
  background: var(--blue);
  color: var(--warm);
  padding: 12px 20px;
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top: 16px; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid var(--blue);
  color: var(--blue);
  position: relative;
  overflow: hidden;
  isolation: isolate; /* keeps the hover fill above the button's own background, so the text never vanishes */
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: translateX(-101%);
  transition: transform var(--dur-fast) var(--ease);
  z-index: -1;
}
.btn:hover::before, .btn:focus-visible::before{ transform: translateX(0); }
.btn:hover, .btn:focus-visible{ color: var(--warm); }

.btn-primary{
  background: var(--blue);
  color: var(--warm);
}
.btn-primary::before{ background: var(--warm); }
.btn-primary:hover, .btn-primary:focus-visible{ color: var(--blue); }

.btn-ghost-light{
  border-color: rgba(246, 241, 233, 0.55);
  color: var(--warm);
}
.btn-ghost-light::before{ background: var(--warm); }
.btn-ghost-light:hover, .btn-ghost-light:focus-visible{ color: var(--blue); }

.text-link{
  position: relative;
  padding-bottom: 2px;
  font-weight: 500;
}
.text-link::after{
  content:"";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-fast) var(--ease);
}
.text-link:hover::after, .text-link:focus-visible::after{ right: 0; }

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--gutter);
  color: var(--warm);
  transition: background var(--dur-med) var(--ease), padding var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.site-header.is-scrolled{
  background: rgba(246, 241, 233, 0.92);
  backdrop-filter: blur(10px);
  color: var(--blue);
  padding-top: 16px;
  padding-bottom: 16px;
  box-shadow: 0 1px 0 rgba(12,22,26,0.08);
}
.site-header.is-scrolled .nav-link,
.site-header.is-scrolled .wordmark { color: var(--blue); }
.site-header.is-scrolled .btn-ghost-light{
  border-color: var(--blue);
  color: var(--blue);
}
.site-header.is-scrolled .btn-ghost-light::before{ background: var(--blue); }
.site-header.is-scrolled .btn-ghost-light:hover{ color: var(--warm); }

.wordmark{
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 0.14em;
  color: var(--warm);
  transition: color var(--dur-med) var(--ease);
}

.main-nav{ display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); }
.main-nav ul{ display: flex; gap: clamp(20px, 2.6vw, 40px); }
.nav-link{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm);
  position: relative;
  padding-bottom: 4px;
  transition: color var(--dur-med) var(--ease);
}
.nav-link::after{
  content:"";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor;
  transition: right var(--dur-fast) var(--ease);
}
.nav-link:hover::after, .nav-link:focus-visible::after{ right: 0; }

.nav-toggle{
  display: none;
  width: 28px; height: 20px;
  position: relative;
  z-index: 110;
}
.nav-toggle span{
  position: absolute; left: 0; right: 0; height: 1px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
}
.nav-toggle span:nth-child(1){ top: 0; }
.nav-toggle span:nth-child(2){ top: 9px; }
.nav-toggle span:nth-child(3){ top: 18px; }
.nav-open .nav-toggle span:nth-child(1){ top: 9px; transform: rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
.nav-open .nav-toggle span:nth-child(3){ top: 9px; transform: rotate(-45deg); }

/* Mobile nav panel — always fixed/out-of-flow and hidden by default,
   regardless of viewport width. Only .nav-open (toggled below 1180px,
   see nav-toggle visibility) reveals it. Kept outside the media query
   on purpose: a rule scoped only to narrow widths would leave this
   panel as a normal in-flow block at wider widths, pushing the whole
   page down. */
.mobile-panel{
  position: fixed; inset: 0;
  background: var(--blue);
  color: var(--warm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  z-index: 95;
}
.nav-open .mobile-panel{ transform: translateY(0); opacity: 1; pointer-events: auto; }

/* ---------- Media frame (image placeholder system) ---------- */
.media-frame{
  position: relative;
  overflow: hidden;
  background: #E7E0D2;
}
.media-frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.media-frame .media-placeholder{
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 24px;
  background:
    repeating-linear-gradient(135deg, rgba(28,63,88,0.05) 0 2px, transparent 2px 14px),
    #E9E3D6;
  border: 1px dashed rgba(28,63,88,0.3);
}
.media-frame.is-empty .media-placeholder{ display: flex; }
.media-frame.is-empty img{ display: none; }
.media-placeholder .ph-name{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--blue);
}
.media-placeholder .ph-spec{
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--slate);
}

/* reveal-on-scroll images get a slow scale-in */
.media-frame img{
  transform: scale(1.08);
  transition: transform 1.6s var(--ease);
}
.reveal.is-visible .media-frame img{ transform: scale(1); }

/* ---------- Reveal-on-scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: 100ms; }
.reveal-delay-2{ transition-delay: 220ms; }
.reveal-delay-3{ transition-delay: 340ms; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--warm);
  overflow: hidden;
}
.hero .media-frame{
  position: absolute;
  top: -15%; left: 0; right: 0;
  height: 130%;
  z-index: 0;
  will-change: transform;
}
.hero .media-frame img{ transform: scale(1.12); transition: transform 2.4s var(--ease); }
.hero.is-revealed .media-frame img{ transform: scale(1); }
/* home: the signature line, kept modest so the photo leads */
.hero h1.hero-signature{ font-size: clamp(38px, 4.6vw, 76px); }

.hero::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,22,26,0.62) 0px, rgba(12,22,26,0.32) 120px, rgba(12,22,26,0) 230px),
    radial-gradient(ellipse 78% 64% at 12% 74%, rgba(12,22,26,0.55), rgba(12,22,26,0) 74%),
    linear-gradient(0deg, rgba(12,22,26,0.62) 0%, rgba(12,22,26,0.16) 48%, rgba(12,22,26,0.28) 100%);
  z-index: 1;
}
/* home, phones: the opening line sits low over the photo, so the lower shade is a little deeper */
@media (max-width: 700px){
  .hero:not(.hero-dest)::after{
    background:
      linear-gradient(180deg, rgba(12,22,26,0.62) 0px, rgba(12,22,26,0.32) 120px, rgba(12,22,26,0) 230px),
      radial-gradient(ellipse 90% 52% at 18% 70%, rgba(12,22,26,0.62), rgba(12,22,26,0) 76%),
      linear-gradient(0deg, rgba(12,22,26,0.66) 0%, rgba(12,22,26,0.2) 48%, rgba(12,22,26,0.28) 100%);
  }
}
/* extra darkening on scroll: a plain layer whose opacity changes, which the
   browser can do without repainting the gradient every frame */
.hero-shade{
  position: absolute; inset: 0;
  background: rgb(12,22,26);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  will-change: opacity;
}
.hero-content{
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) clamp(64px, 9vw, 120px);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}
.hero h1{
  font-size: clamp(42px, 7vw, 108px);
  font-weight: 300;
  color: var(--warm);
  max-width: 16ch;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease) 500ms, transform var(--dur-slow) var(--ease) 500ms;
}
.hero.is-revealed h1{ opacity: 1; transform: translateY(0); }

.hero-actions{
  margin-top: clamp(32px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-med) var(--ease) 950ms, transform var(--dur-med) var(--ease) 950ms;
}
.hero.is-revealed .hero-actions{ opacity: 1; transform: translateY(0); }

.scroll-cue{
  position: absolute;
  left: var(--gutter);
  bottom: 28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--warm);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease) 1500ms;
}
.hero.is-revealed .scroll-cue{ opacity: 0.8; }
.scroll-cue .eyebrow{ color: inherit; }
.scroll-cue .line{
  width: 1px; height: 34px;
  background: currentColor;
  position: relative;
  overflow: hidden;
}
.scroll-cue .line::after{
  content: "";
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: currentColor;
  animation: scrollline 2.2s var(--ease) infinite;
}
@keyframes scrollline{
  0%{ top: -100%; }
  60%{ top: 100%; }
  100%{ top: 100%; }
}

/* ---------- Section rhythm ---------- */
section{ position: relative; }
.section-pad{ padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.section-rule{ border-top: var(--rule); }

.section-head{
  max-width: 760px;
}
.section-head h2{
  font-size: clamp(32px, 4.2vw, 56px);
  margin-top: 16px;
}
.section-head .eyebrow{ display: block; }

/* ---------- Positioning ---------- */
.positioning{
  background: var(--warm);
  text-align: center;
}
.positioning .container{ display: flex; flex-direction: column; align-items: center; }
.positioning h2{
  font-size: clamp(30px, 4.4vw, 54px);
  max-width: 34ch;
}
.positioning .sub{
  margin-top: 22px;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--slate);
}

/* ---------- The limit ---------- */
.limit{
  background: var(--blue);
  color: var(--warm);
}
.section-pad-top{ padding-top: var(--section-pad); }

.limit .container{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr; /* the constellation gets the larger share */
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  padding-bottom: clamp(56px, 8vw, 100px);
}
.limit .eyebrow{ color: var(--mist); }

/* Note: the wrapping .reveal div already fades the whole block in
   (opacity + translateY, no delay). Everything below layers an
   additional, slightly-delayed settle motion on top of that — transform
   only, deliberately no opacity here, so the two animations don't
   compete over the same property. */
.limit p.lede{
  color: var(--mist);
  margin-top: 24px;
  transform: translateY(14px);
  transition: transform var(--dur-slow) var(--ease) 650ms;
}
.reveal.is-visible p.lede{ transform: translateY(0); }

/* ---------- Oversized digits ---------- */
.limit-headline{ display: flex; flex-direction: column; gap: 0; }
.limit-line{ display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.limit-digit{
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(76px, 8.6vw, 136px);
  line-height: 0.84;
  color: var(--warm);
  display: inline-block;
  /* Cormorant Garamond's default "1" is an old-style figure that reads as
     a capital "I" at this display size. Lining figures restore the full-height
     digit with its flag and foot, so it can't be misread as a letter. */
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
  transform: translateY(22px) scale(0.95);
  transition: transform 1000ms var(--ease);
}
.limit-word{
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 40px);
  color: var(--warm);
  display: inline-block;
  transform: translateY(14px);
  transition: transform var(--dur-slow) var(--ease) 300ms;
}
.reveal.is-visible .limit-digit{ transform: translateY(0) scale(1); }
.reveal.is-visible .limit-word{ transform: translateY(0); }
.limit-line:nth-child(2) .limit-digit{ transition-delay: 160ms; }
.limit-line:nth-child(2) .limit-word{ transition-delay: 460ms; }

/* ---------- Constellation ----------
   Lines draw themselves in (stroke-dashoffset), nodes appear in path
   order as each connecting line arrives, hub gets a slow ambient pulse.
   Triggered once by JS adding .is-drawn when scrolled into view. */
.limit-constellation{ width: 100%; }
.constellation-svg{ width: 100%; height: auto; display: block; }

.const-lines line{
  stroke: rgba(188, 195, 198, 0.6);
  stroke-width: 1.2;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 750ms var(--ease);
}
.is-drawn .cl-1{ stroke-dashoffset: 0; transition-delay: 150ms; }
.is-drawn .cl-2{ stroke-dashoffset: 0; transition-delay: 550ms; transition-duration: 900ms; }
.is-drawn .cl-3{ stroke-dashoffset: 0; transition-delay: 1450ms; transition-duration: 650ms; }
.is-drawn .cl-4{ stroke-dashoffset: 0; transition-delay: 1450ms; transition-duration: 650ms; }
.is-drawn .cl-5{ stroke-dashoffset: 0; transition-delay: 2150ms; transition-duration: 550ms; }

.const-node{ cursor: pointer; }
.const-node circle:not(.const-hit){
  fill: var(--blue);
  stroke: var(--mist);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 5px rgba(246, 241, 233, 0.45));
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.4);
  transition: fill var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease), r var(--dur-fast) var(--ease),
              opacity 480ms var(--ease), transform 480ms var(--ease);
}
.const-node text{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  fill: var(--warm);
  opacity: 0;
  transition: fill var(--dur-fast) var(--ease), opacity 480ms var(--ease);
}
.const-node-hub circle:not(.const-hit){ fill: var(--warm); stroke: var(--warm); filter: drop-shadow(0 0 8px rgba(246, 241, 233, 0.6)); }
/* Pointing at one destination quietly dims the others */
.constellation-svg:has(.const-node:hover) .const-node:not(:hover) text,
.constellation-svg:has(.const-node:focus-visible) .const-node:not(:focus-visible) text{ fill: var(--mist); opacity: 0.55; }

.is-drawn .cn-1 circle:not(.const-hit), .is-drawn .cn-1 text{ opacity: 1; transform: scale(1); transition-delay: 0ms; }
.is-drawn .cn-2 circle:not(.const-hit), .is-drawn .cn-2 text{ opacity: 1; transform: scale(1); transition-delay: 820ms; }
.is-drawn .cn-3 circle:not(.const-hit), .is-drawn .cn-3 text{ opacity: 1; transform: scale(1); transition-delay: 1420ms; }
.is-drawn .cn-4 circle:not(.const-hit), .is-drawn .cn-4 text{ opacity: 1; transform: scale(1); transition-delay: 2050ms; }
.is-drawn .cn-5 circle:not(.const-hit), .is-drawn .cn-5 text{ opacity: 1; transform: scale(1); transition-delay: 2050ms; }
.is-drawn .cn-6 circle:not(.const-hit), .is-drawn .cn-6 text{ opacity: 1; transform: scale(1); transition-delay: 2650ms; }

.const-hit{ fill: transparent !important; }
.is-settled .const-node circle:not(.const-hit), .is-settled .const-node text{ transition-delay: 0ms !important; }

.const-node:hover circle:not(.const-hit), .const-node:focus-visible circle:not(.const-hit){
  fill: var(--warm);
  stroke: var(--warm);
  r: 7;
}
.const-node:hover text, .const-node:focus-visible text{
  fill: var(--warm);
  text-decoration: underline;
}
.const-node:focus-visible{ outline: none; }

/* Slow ambient pulse on the Sri Lanka hub — a quiet ring expanding and
   fading, starts once the hub node has appeared, loops gently after. */
.const-pulse{
  fill: none;
  stroke: var(--mist);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: const-pulse-ring 3.4s var(--ease) infinite;
  animation-play-state: paused;
}
.is-drawn .cn-3 .const-pulse{ animation-play-state: running; animation-delay: 1500ms; }
@keyframes const-pulse-ring{
  0%{ opacity: 0.45; transform: scale(1); }
  75%{ opacity: 0; transform: scale(2.6); }
  100%{ opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce){
  .const-pulse{ animation: none; opacity: 0; }
}

/* ---------- Marquee strip ----------
   A slow, pausable, hover-interruptible scroll — not a flashy ticker.
   Fully static under prefers-reduced-motion. */
.marquee-strip{
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px) 0 clamp(48px, 6vw, 80px);
}
.marquee-track{
  display: flex;
  width: max-content;
  animation: marquee-scroll 42s linear infinite;
}
.marquee-strip:hover .marquee-track{ animation-play-state: paused; }
.marquee-group{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee-group span{
  white-space: nowrap;
  padding: 0 22px;
}
.marquee-group span:not(.dot){
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.7vw, 21px);
  color: var(--mist);
}
.marquee-group .dot{
  color: rgba(188, 195, 198, 0.4);
  font-size: 15px;
  padding: 0 4px;
}
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}


/* ---------- Approach: a line that draws through four steps ---------- */
.approach{ background: var(--white); }
.approach-steps{
  position: relative;
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.approach-line{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(28, 63, 88, 0.3);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 2000ms linear;
}
.approach-steps.is-drawn .approach-line{ transform: scaleX(1); }
.approach-step{
  position: relative;
  padding-top: 28px;
}
.approach-step::before{
  content: "";
  position: absolute;
  top: -4px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  transition: transform 600ms var(--ease);
}
.approach-steps.is-drawn .approach-step:nth-of-type(1)::before{ transform: scale(1); transition-delay: 100ms; }
.approach-steps.is-drawn .approach-step:nth-of-type(2)::before{ transform: scale(1); transition-delay: 550ms; }
.approach-steps.is-drawn .approach-step:nth-of-type(3)::before{ transform: scale(1); transition-delay: 1050ms; }
.approach-steps.is-drawn .approach-step:nth-of-type(4)::before{ transform: scale(1); transition-delay: 1550ms; }
.approach-step .step-num{
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  color: var(--slate);
}
.approach-step h3{
  margin-top: 14px;
  font-size: clamp(22px, 1.8vw, 28px);
}
.approach-step p{
  margin-top: 12px;
  color: var(--slate);
  font-size: 15px;
  max-width: 32ch;
}

/* ---------- Team ---------- */
.team-story{ background: var(--warm); }
.team-story.section-pad{ padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.team-story .container{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.team-story .media-frame{ aspect-ratio: 4 / 3; }
/* the seal, standing in for the team photo (home and About) */
.seal-panel{
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  color: var(--warm);
  background:
    radial-gradient(ellipse 70% 80% at 22% 18%, rgba(246,241,233,0.07), rgba(246,241,233,0) 70%),
    radial-gradient(ellipse 60% 70% at 85% 95%, rgba(12,22,26,0.35), rgba(12,22,26,0) 70%),
    var(--blue);
}
.seal-panel .seal-svg{ width: 30%; height: auto; }
.team-copy .eyebrow{ display: block; }
.team-copy h2{
  margin-top: 14px;
  font-size: clamp(28px, 2.8vw, 40px);
  text-wrap: balance;
}
.team-copy p.lede{
  margin-top: 20px;
  color: var(--slate);
  max-width: 54ch;
}
/* same text style as the About story */
.team-copy .team-text{ margin-top: 18px; font-family: var(--font-body); font-weight: 400; font-size: clamp(16px, 1.1vw, 17px); line-height: 1.7; color: var(--slate); max-width: 50ch; text-wrap: pretty; }
.team-copy .team-link{ display: inline-block; margin-top: 22px; color: var(--blue); }

/* ---------- Close CTA ---------- */
.close-cta{
  background: var(--blue);
  color: var(--warm);
  text-align: center;
}
.close-cta .eyebrow{ color: var(--mist); }
.close-cta h2{
  color: var(--warm);
  font-size: clamp(34px, 5vw, 64px);
  max-width: 18ch;
  margin: 16px auto 0;
  text-wrap: balance;
}
/* on blue, the filled button turns to an outline on hover rather than vanishing into the background */
.close-cta .btn-light::before{ background: var(--blue); }
.close-cta .btn-light:hover, .close-cta .btn-light:focus-visible{ color: var(--warm); border-color: var(--warm); }
.close-cta .cta-note{ margin-top: 22px; font-size: 14px; color: var(--mist); }
.close-cta .cta-actions{
  margin-top: clamp(32px, 4vw, 48px);
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--ink);
  color: var(--mist);
  padding: clamp(56px, 6vw, 88px) 0 32px;
}
.footer-top{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(188,195,198,0.18);
}
.footer-brand .wordmark{ color: var(--warm); font-size: 22px; }
.footer-brand p{
  margin-top: 18px;
  font-size: 14px;
  color: var(--mist);
  max-width: 32ch;
}
.footer-brand .footer-contact{ margin-top: 12px; }
.footer-contact a{ color: var(--warm); border-bottom: 1px solid rgba(246,241,233,0.3); transition: border-color var(--dur-fast, 200ms) var(--ease); }
.footer-contact a:hover, .footer-contact a:focus-visible{ border-color: var(--warm); }
.footer-col .eyebrow{ color: rgba(188,195,198,0.6); }
.footer-col ul{ margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.footer-col a{
  font-size: 14.5px;
  color: var(--mist);
  transition: color var(--dur-fast) var(--ease);
}
.footer-col a:hover{ color: var(--warm); }
.footer-bottom{
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(188,195,198,0.55);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .limit .container{ grid-template-columns: 1fr; }
  .team-story .container{ grid-template-columns: 1fr; }
  .team-story .media-frame{ max-width: 480px; }
  .team-story .seal-panel{ max-width: 480px; width: 100%; }
  .footer-top{ grid-template-columns: 1.2fr 1fr 1fr; }
}

/* the full menu needs about 1180px; below that it would wrap onto two lines, so the compact menu takes over */
@media (max-width: 1180px){
  .main-nav ul{ display: none; }
  .main-nav .btn{ display: none; }
  .nav-toggle{ display: block; }

  .mobile-panel ul{ display: flex; flex-direction: column; gap: 22px; }
  .mobile-panel .nav-link{ font-size: 22px; color: var(--warm); font-family: var(--font-head); font-weight: 300; text-transform: none; letter-spacing: 0.01em; }
  .mobile-panel .btn{ margin-top: 36px; align-self: flex-start; }
}

@media (max-width: 860px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }

  /* approach turns vertical: the line runs down the left edge */
  .approach-steps{ grid-template-columns: 1fr; gap: 0; }
  .approach-line{
    top: 4px; bottom: 40px; left: 4px; right: auto;
    width: 1px; height: auto;
    transform: scaleY(0);
    transform-origin: top center;
  }
  .approach-steps.is-drawn .approach-line{ transform: scaleY(1); }
  .approach-step{ padding: 0 0 40px 40px; }
  .approach-step::before{ top: 8px; }
}

@media (max-width: 680px){
  .footer-top{ grid-template-columns: 1fr; }
  body{ font-size: 16px; }
  .hero-actions{ gap: 18px; }
}

@media (max-width: 420px){
  :root{ --gutter: 20px; }
  .hero h1{ max-width: 13ch; }
}

/* ==========================================================================
   Destination pages
   ========================================================================== */
.nav-link[aria-current="page"]::after{ right: 0; }

/* hero */
.hero-dest h1{
  font-size: clamp(54px, 8.6vw, 138px);
  line-height: 0.95;
  max-width: none;
}
.hero-kicker{
  display: block;
  margin-bottom: 20px;
  color: var(--mist);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-med) var(--ease) 300ms, transform var(--dur-med) var(--ease) 300ms;
}
.hero.is-revealed .hero-kicker{ opacity: 1; transform: translateY(0); }
.hero-line{
  margin-top: 24px;
  max-width: 34ch;
  text-wrap: pretty;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.32;
  color: var(--warm);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-med) var(--ease) 800ms, transform var(--dur-med) var(--ease) 800ms;
}
.hero.is-revealed .hero-line{ opacity: 1; transform: translateY(0); }
.hero-dest .hero-actions{ transition-delay: 1100ms; }

/* at a glance */
.facts{ background: var(--warm); }
.facts-grid{ display: grid; grid-template-columns: repeat(4, 1fr); }
.fact{
  padding: clamp(28px, 3vw, 44px) 28px clamp(28px, 3vw, 44px) 0;
  border-right: var(--rule);
}
.fact + .fact{ padding-left: 28px; }
.fact:last-child{ border-right: 0; }
.fact .eyebrow{ display: block; }
.fact p{
  margin-top: 12px;
  font-family: var(--font-head);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.15;
  color: var(--blue);
}
.fact small{
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate);
  max-width: 28ch;
}
.page-index{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 20px 0 clamp(20px, 2.4vw, 32px);
  border-top: var(--rule);
}
.page-index a{
  position: relative;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  padding-bottom: 3px;
}
.page-index a::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor;
  transition: right var(--dur-fast) var(--ease);
}
.page-index a:hover::after, .page-index a:focus-visible::after{ right: 0; }

/* overview */
.dest-intro{ background: var(--warm); }
.dest-intro .container{
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.dest-intro h2{ font-size: clamp(34px, 4.8vw, 68px); max-width: 17ch; }
.intro-copy p{ color: var(--slate); max-width: 34ch; }
.intro-copy p + p{ margin-top: 14px; }

/* best time */
.seasons{ background: var(--white); }
.seasons .section-head{ max-width: 640px; }
.seasons .lede{ margin-top: 20px; }
.season-chart{ margin-top: clamp(40px, 5vw, 72px); }
.season-row{
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) 3fr;
  align-items: center;
  gap: 24px;
  padding: 8px 0;
}
.season-cells{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}
.season-head{ padding-bottom: 10px; }
.season-head .season-cells span{
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.season-region{
  font-family: var(--font-head);
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.2;
  color: var(--blue);
}
.season-region small{
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--slate);
}
.cell{
  height: 42px;
  background: rgba(28, 63, 88, 0.08);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 800ms var(--ease);
  transition-delay: calc(var(--r, 0) * 160ms + var(--c, 0) * 50ms);
}
.cell.good{ background: rgba(28, 63, 88, 0.4); }
.cell.best{ background: var(--blue); }
.season-chart.is-drawn .cell{ transform: scaleX(1); }
.season-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 28px;
  font-size: 13px;
  color: var(--slate);
}
.season-legend span{ display: inline-flex; align-items: center; gap: 10px; }
.season-legend .sw{ width: 22px; height: 10px; background: rgba(28, 63, 88, 0.08); }
.season-legend .sw.good{ background: rgba(28, 63, 88, 0.4); }
.season-legend .sw.best{ background: var(--blue); }
.season-note{ margin-top: 14px; font-size: 13.5px; color: var(--slate); max-width: 60ch; }

/* what to expect */
.expect{ background: var(--warm); }
.expect-grid{
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(32px, 6vw, 96px);
}
.expect-item{ padding: 30px 0 38px; border-top: var(--rule); }
.expect-item h3{ font-size: clamp(24px, 2.2vw, 32px); }
.expect-item p{ margin-top: 12px; color: var(--slate); max-width: 46ch; }

/* before you go */
.consider{ background: var(--white); }
.consider .container{
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.consider .section-head{ position: sticky; top: 120px; }
.consider .lede{ margin-top: 20px; }
.consider-checked{ margin-top: 14px; font-size: 13px; letter-spacing: 0.02em; color: var(--slate); }
.consider-list{ border-top: var(--rule); }
.consider-row{
  display: grid;
  grid-template-columns: minmax(130px, 0.5fr) 1.5fr;
  gap: 12px 40px;
  padding: 28px 0;
  border-bottom: var(--rule);
}
.consider-row h3{ font-size: clamp(22px, 1.9vw, 28px); }
.consider-row p{ color: var(--slate); max-width: 56ch; }

/* stays */
.stays{ background: var(--warm); }
.stays .section-head{ max-width: 640px; }
.stays .lede{ margin-top: 20px; }
.stays-grid{
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
.stay-card.reveal{ opacity: 1; }
.stay-card .media-frame{
  aspect-ratio: 4 / 5;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1500ms var(--ease);
}
.stay-card.is-visible .media-frame{ clip-path: inset(0 0 0 0); }
.stay-meta{ padding-top: 22px; }
.stay-meta h3{ margin-top: 10px; font-size: clamp(24px, 2.2vw, 32px); }

/* the journey, on blue */
.dest-journey{ background: var(--blue); color: var(--warm); }
.dest-journey .eyebrow{ color: var(--mist); }
.dest-journey .container{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.dest-journey h2{
  margin-top: 16px;
  color: var(--warm);
  font-size: clamp(36px, 5vw, 72px);
  max-width: 14ch;
}
.dest-journey p.lede{ margin-top: 20px; color: var(--mist); max-width: 38ch; }
.dest-journey .cta-actions{ margin-top: clamp(28px, 3vw, 40px); display: flex; gap: 20px; flex-wrap: wrap; }
.moments{ border-top: var(--rule-on-blue); }
.moments li{
  padding: 22px 0;
  border-bottom: var(--rule-on-blue);
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 32px);
  color: var(--warm);
}

/* next destination */
.next-dest{ background: var(--warm); }
.next-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(56px, 8vw, 112px) 0 clamp(32px, 4vw, 48px);
}
.nd-text .eyebrow{ display: block; }
.nd-name{
  display: block;
  margin-top: 14px;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(48px, 8.5vw, 136px);
  line-height: 1;
  color: var(--blue);
  transition: transform var(--dur-med) var(--ease);
}
.nd-arrow{
  font-family: var(--font-head);
  font-size: clamp(40px, 6vw, 88px);
  color: var(--blue);
  transition: transform var(--dur-med) var(--ease);
}
.next-link:hover .nd-name{ transform: translateX(14px); }
.next-link:hover .nd-arrow{ transform: translateX(10px); }
.nd-all{ padding-bottom: clamp(40px, 5vw, 72px); }

/* destination pages, responsive */
@media (max-width: 1080px){
  .facts-grid{ grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(2){ border-right: 0; }
  .fact:nth-child(3){ padding-left: 0; border-top: var(--rule); }
  .fact:nth-child(4){ border-top: var(--rule); }
  .dest-intro .container, .dest-journey .container{ grid-template-columns: 1fr; align-items: start; }
  .consider .container{ grid-template-columns: 1fr; }
  .consider .section-head{ position: static; }
  .stays-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px){
  .facts-grid{ grid-template-columns: 1fr; }
  .fact, .fact + .fact{ padding: 24px 0; border-right: 0; border-top: var(--rule); }
  .fact:first-child{ border-top: 0; }
  .expect-grid{ grid-template-columns: 1fr; }
  .stays-grid{ grid-template-columns: 1fr; }
  .consider-row{ grid-template-columns: 1fr; }
  .season-row{ grid-template-columns: 1fr; gap: 10px; padding: 12px 0; }
  .season-head .season-region{ display: none; }
  .season-head{ padding-bottom: 4px; }
  .season-head .season-cells span{ font-size: 8.5px; letter-spacing: 0; }
  .cell{ height: 30px; }
  .nd-arrow{ display: none; }
}

.dest-intro h2, .seasons h2, .expect h2, .consider h2, .stays h2, .dest-journey h2{ text-wrap: balance; }
.nd-all .text-link{ color: var(--blue); }

/* Live local time + optional hero video */
.fact-clock .clock-time{ font-feature-settings: "lnum" 1; font-variant-numeric: lining-nums tabular-nums; }
.hero-video{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1600ms var(--ease);
}
.hero-video.is-playing{ opacity: 1; }
.fact p{ font-feature-settings: "lnum" 1; font-variant-numeric: lining-nums; }
[id]{ scroll-margin-top: 76px; }

/* Destination intro: three image slots */
.dest-intro .intro-gallery{
  grid-column: 1 / -1;
  margin-top: clamp(48px, 6vw, 88px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter);
  align-items: start;
}
.intro-shot{ margin: 0; }
.intro-shot.reveal{ opacity: 1; transform: none; }
.intro-shot:nth-child(2){ margin-top: clamp(32px, 5vw, 80px); }
.intro-shot .media-frame{
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  clip-path: inset(100% 0 0 0); transition: clip-path 1500ms var(--ease);
}
.intro-shot.is-visible .media-frame{ clip-path: inset(0 0 0 0); }
@media (max-width: 680px){
  .dest-intro .intro-gallery{ grid-template-columns: 1fr 1fr; }
  .intro-shot:nth-child(2){ margin-top: 40px; }
  .intro-shot:nth-child(3){ grid-column: 1 / -1; }
  .intro-shot:nth-child(3) .media-frame{ aspect-ratio: 16 / 10; }
}

/* =========================================================
   Journey pages
   Dark typographic opening, warm route with a sticky map,
   white sample day, dark care, warm close.
   ========================================================= */
.btn-light{ background: var(--warm); border-color: var(--warm); color: var(--ink); }
.btn-light::before{ background: var(--blue); }
.btn-light:hover, .btn-light:focus-visible{ color: var(--warm); border-color: var(--blue); }
.text-link-light{ color: var(--warm); }
.sample-tag{
  display: inline-block; margin-top: 22px; padding: 6px 12px; border: 1px solid var(--rule-color, rgba(80,103,119,.35));
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate);
}

/* Opening */
.jr-hero{
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; background: var(--ink); color: var(--warm);
}
.jr-hero::before{
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 45% at 72% 32%, rgba(28, 63, 88, 0.85), transparent 70%),
    radial-gradient(35% 40% at 18% 85%, rgba(80, 103, 119, 0.28), transparent 70%);
  animation: jr-drift 22s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes jr-drift{ from{ transform: translate3d(-2%, 0, 0) scale(1); } to{ transform: translate3d(3%, -3%, 0) scale(1.08); } }
.jr-hero > .container{
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: clamp(140px, 20vh, 220px); padding-bottom: clamp(40px, 6vh, 64px);
}
.jr-hero .hero-content{ padding: 0; margin: 0; max-width: none; }
.jr-kicker{ display: block; color: var(--mist); opacity: 0; transition: opacity 1200ms var(--ease) 150ms; }
.jr-title{
  margin-top: clamp(20px, 3vw, 34px);
  font-family: var(--font-head); font-style: italic; font-weight: 300;
  font-size: clamp(46px, 7.6vw, 124px); line-height: 1.02; letter-spacing: -0.01em;
  color: var(--warm); max-width: 13ch;
}
.jr-title .w{
  display: inline-block; opacity: 0; filter: blur(10px);
  transform: translate3d(0, 0.35em, 0);
  transition: opacity 1300ms var(--ease), transform 1300ms var(--ease), filter 1300ms var(--ease);
  transition-delay: calc(300ms + var(--i) * 110ms);
}
.jr-hero-sub{
  margin-top: clamp(22px, 3vw, 32px); font-size: clamp(16px, 1.3vw, 19px); color: var(--mist);
  opacity: 0; transform: translateY(14px); transition: opacity 1000ms var(--ease) 1200ms, transform 1000ms var(--ease) 1200ms;
}
.jr-hero-actions{
  margin-top: clamp(28px, 3.5vw, 44px); display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  opacity: 0; transform: translateY(14px); transition: opacity 1000ms var(--ease) 1400ms, transform 1000ms var(--ease) 1400ms;
}
.jr-stats{
  margin-top: clamp(56px, 8vh, 96px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: var(--rule-on-blue);
  opacity: 0; transition: opacity 1200ms var(--ease) 1700ms;
}
.jr-stat{ padding: 22px 24px 0 0; display: flex; flex-direction: column; gap: 6px; }
.jr-stat + .jr-stat{ padding-left: 24px; border-left: var(--rule-on-blue); }
.jr-stat-v{
  font-family: var(--font-head); font-weight: 300; font-size: clamp(28px, 2.6vw, 40px); line-height: 1;
  font-feature-settings: "lnum" 1; font-variant-numeric: lining-nums;
}
.jr-stat-l{ font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); }
.jr-stats-note{ grid-column: 1 / -1; margin-top: clamp(14px, 2.4vh, 22px); text-align: center; font-family: var(--font-head); font-style: italic; font-size: clamp(15px, 1.2vw, 18px); color: var(--mist); }
.jr-close-mail{ margin-top: 20px; font-size: 14px; color: var(--slate); }
.jr-close-mail a{ color: var(--blue); border-bottom: 1px solid rgba(28,63,88,0.3); }
.jr-close-mail a:hover, .jr-close-mail a:focus-visible{ border-color: var(--blue); }
.jr-hero.is-revealed .jr-kicker{ opacity: 1; }
.jr-hero.is-revealed .jr-title .w{ opacity: 1; filter: blur(0); transform: none; }
.jr-hero.is-revealed .jr-hero-sub,
.jr-hero.is-revealed .jr-hero-actions{ opacity: 1; transform: none; }
.jr-hero.is-revealed .jr-stats{ opacity: 1; }
.jr-hero.is-revealed .scroll-cue{ opacity: 0.6; }
.jr-hero .scroll-cue{ left: auto; right: var(--gutter); }

/* Route */
.jr-route{ background: var(--warm); }
.jr-route .section-head{ max-width: 660px; }
.jr-route-grid{
  margin-top: clamp(48px, 6vw, 88px);
  display: grid; grid-template-columns: 6fr 5fr; column-gap: clamp(32px, 6vw, 96px); align-items: start;
}
.jr-map-col{ position: sticky; top: 92px; }
.jr-map{ margin: 0; display: flex; flex-direction: column; height: calc(100vh - 124px); max-height: 900px; }
.jr-map-svg{ flex: 1; min-height: 0; width: 100%; height: 100%; display: block; }
.jr-map .sea{ fill: #E2E6E7; }
.jr-map .land{ fill: #FBF8F3; stroke: rgba(80, 103, 119, 0.55); stroke-width: 1; stroke-linejoin: round; }
.jr-map .land-other{ fill: #EFEAE2; stroke: rgba(80, 103, 119, 0.3); }
.jr-map .seg{
  fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1200ms var(--ease);
}
.jr-map .seg.on{ stroke-dashoffset: 0; }
.jr-map .seg-return{ stroke: var(--slate); stroke-width: 1.3; stroke-dasharray: 3 6; stroke-dashoffset: 0; opacity: 0; transition: opacity 900ms var(--ease) 600ms; }
.jr-map .seg-return.on{ opacity: 1; }
.jr-map .seg-ties{ fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: 0; transition: opacity 600ms var(--ease) 700ms; }
.jr-map .seg-ties.on{ opacity: 1; }
.jr-map .stop{ opacity: 0; transition: opacity 700ms var(--ease) 500ms; }
.jr-map .stop.on{ opacity: 1; }
.jr-map .dot{ fill: var(--blue); stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transition: transform 600ms var(--ease); }
.jr-map .stop-visit .dot{ fill: #fff; stroke: var(--blue); stroke-width: 1.8; }
.jr-map .halo{ fill: var(--blue); opacity: 0; transform-box: fill-box; transform-origin: center; }
.jr-map .stop.current .halo{ animation: jr-pulse 2.6s var(--ease) infinite; }
.jr-map .stop.current .dot{ transform: scale(1.15); }
@keyframes jr-pulse{ 0%{ opacity: 0.22; transform: scale(0.6); } 100%{ opacity: 0; transform: scale(1.6); } }
.jr-map .lbl{ font-family: var(--font-body); font-size: 15px; font-weight: 500; fill: var(--ink); transition: fill 400ms var(--ease); }
.jr-map .stop-visit .lbl{ font-size: 13px; font-weight: 400; fill: var(--slate); }
.jr-map .lbl .sub{ font-size: 12.5px; font-weight: 400; fill: var(--slate); }
.jr-map .stop.current .lbl{ fill: var(--blue); font-weight: 700; }
.jr-map figcaption{ padding-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 12.5px; color: var(--slate); }
.jr-key{ display: inline-flex; align-items: center; gap: 8px; }
.jr-key i{ display: inline-block; }
.k-road{ width: 22px; height: 0; border-top: 1.8px solid var(--ink); }
.k-train{ width: 22px; height: 9px; background:
  linear-gradient(var(--ink), var(--ink)) center / 100% 1.6px no-repeat,
  repeating-linear-gradient(90deg, var(--ink) 0 1.4px, transparent 1.4px 5px) center / 100% 9px no-repeat; }
.k-stay{ width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.k-visit{ width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid var(--blue); background: #fff; }
.jr-map-note{ flex-basis: 100%; font-size: 12px; }

.jr-stages{ display: flex; flex-direction: column; }
.jr-stage{ padding: clamp(40px, 6vh, 72px) 0; border-top: var(--rule); transition: opacity 700ms var(--ease); }
.jr-stage:first-child{ border-top: 0; padding-top: 0; }
.jr-route.is-live .jr-stage{ opacity: 0.32; }
.jr-route.is-live .jr-stage.is-current{ opacity: 1; }
.jr-stage-head{ display: flex; align-items: baseline; gap: 16px; }
.jr-stage-num{
  font-family: var(--font-head); font-style: italic; font-weight: 300; font-size: 22px; color: var(--slate);
  font-feature-settings: "lnum" 1; font-variant-numeric: lining-nums;
}
.jr-stage h3{ margin-top: 14px; font-size: clamp(30px, 3vw, 46px); line-height: 1.1; text-wrap: balance; }
.jr-stage p{ margin-top: 16px; max-width: 42ch; }
.jr-stage .jr-stage-detail{ color: var(--slate); font-size: 15.5px; }
.jr-stage .jr-stage-move{
  font-family: var(--font-head); font-style: italic; font-size: 19px; color: var(--blue); padding-left: 26px; position: relative;
  font-feature-settings: "lnum" 1;
}
.jr-stage .jr-stage-move::before{ content: ""; position: absolute; left: 0; top: 0.75em; width: 16px; border-top: 1px solid currentColor; }
.jr-stage .media-frame{
  position: relative; margin-top: 28px; aspect-ratio: 4 / 3; overflow: hidden;
  clip-path: inset(0 0 100% 0); transition: clip-path 1500ms var(--ease);
}
.jr-stage.is-in .media-frame{ clip-path: inset(0 0 0 0); }

/* Sample day */
.jr-day{ background: var(--white); }
.jr-day .container{ display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 6vw, 96px); align-items: start; }
.jr-day .section-head{ position: sticky; top: 120px; max-width: 460px; }
.jr-timeline{ position: relative; padding-left: 40px; }
.jr-timeline::before{
  content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--blue);
  transform: scaleY(0); transform-origin: top; transition: transform 2600ms var(--ease);
}
.jr-timeline.is-drawn::before{ transform: scaleY(1); }
.jr-step{ position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 20px; padding: 0 0 clamp(32px, 4vw, 48px); }
.jr-step::before{
  content: ""; position: absolute; left: -40px; top: 12px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--blue);
}
.jr-time{
  font-family: var(--font-head); font-style: italic; font-weight: 300; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1;
  color: var(--blue); font-feature-settings: "lnum" 1; font-variant-numeric: lining-nums;
}
.jr-step h3{ font-size: clamp(22px, 1.9vw, 28px); }
.jr-step p{ margin-top: 8px; color: var(--slate); max-width: 44ch; }

/* What we look after */
.jr-care{ background: var(--ink); color: var(--warm); }
.jr-care .section-head{ max-width: 640px; }
.jr-care .eyebrow{ color: var(--mist); }
.jr-care h2{ color: var(--warm); text-wrap: balance; }
.jr-care-grid{ margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); }
.jr-care-item{ padding: 28px 0 44px; border-top: var(--rule-on-blue); }
.jr-care-num{ font-family: var(--font-head); font-style: italic; font-size: 18px; color: var(--mist); font-feature-settings: "lnum" 1; }
.jr-care-item h3{ margin-top: 14px; font-size: clamp(24px, 2.1vw, 30px); color: var(--warm); }
.jr-care-item p{ margin-top: 10px; color: var(--mist); max-width: 34ch; }

/* Close */
.jr-close{ background: var(--warm); text-align: center; }
.jr-close .container{ max-width: 980px; }
.jr-close .eyebrow{ display: block; }
.jr-close h2{ text-wrap: balance; margin-top: 18px; font-style: italic; font-weight: 300; font-size: clamp(44px, 6.4vw, 96px); line-height: 1.04; }
.jr-close .lede{ margin: 22px auto 0; max-width: 46ch; color: var(--slate); text-wrap: balance; }
.jr-close-actions{ margin-top: 36px; display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.jr-close-actions .text-link{ color: var(--blue); }
.jr-close-links{ margin-top: clamp(64px, 9vw, 120px); display: grid; grid-template-columns: 1fr 1fr; border-top: var(--rule); text-align: left; }
.jr-close-links a{ padding: 28px 0 8px; display: flex; flex-direction: column; gap: 8px; transition: color 400ms var(--ease); }
.jr-close-links a + a{ padding-left: 28px; border-left: var(--rule); text-align: right; }
.jr-cl-name{ font-family: var(--font-head); font-size: clamp(26px, 2.6vw, 38px); color: var(--blue); transition: color 400ms var(--ease); }
.jr-close-links a:hover .jr-cl-name{ color: var(--slate); }

@media (max-width: 1080px){
  .jr-route-grid{ grid-template-columns: 1fr; }
  .jr-map-col{ position: static; }
  .jr-map{ height: auto; max-height: none; max-width: 560px; margin: 0 auto clamp(40px, 6vw, 64px); }
  .jr-map-svg{ height: auto; }
  .jr-route.is-live .jr-stage{ opacity: 1; }
  .jr-day .container{ grid-template-columns: 1fr; }
  .jr-day .section-head{ position: static; margin-bottom: 40px; }
  .jr-care-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px){
  .jr-stats{ grid-template-columns: 1fr 1fr; }
  .jr-stat:nth-child(3){ padding-left: 0; border-left: 0; }
  .jr-stat:nth-child(n+3){ padding-top: 18px; }
  .jr-step{ grid-template-columns: 1fr; gap: 4px; }
  .jr-care-grid{ grid-template-columns: 1fr; }
  .jr-close-links{ grid-template-columns: 1fr; }
  .jr-close-links a + a{ padding-left: 0; border-left: 0; border-top: var(--rule); text-align: left; }
  .jr-hero .scroll-cue{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .jr-hero::before, .jr-map .stop.current .halo{ animation: none; }
}
.jr-map-svg{ overflow: hidden; }

/* Journey opening: always fits one screen */
.jr-hero{ height: 100vh; height: 100svh; min-height: 560px; }
.jr-hero > .container{ padding-top: clamp(92px, 14vh, 200px); padding-bottom: clamp(20px, 4vh, 56px); }
.jr-title{ margin-top: clamp(12px, 2.4vh, 34px); font-size: clamp(40px, min(7.6vw, 11.5vh), 124px); }
.jr-hero-sub{ margin-top: clamp(12px, 2.6vh, 32px); }
.jr-hero-actions{ margin-top: clamp(16px, 3.6vh, 44px); }
.jr-stats{ margin-top: clamp(20px, 4vh, 96px); }
.jr-stat{ padding-top: clamp(12px, 2.2vh, 22px); }
.jr-stat-v{ font-size: clamp(24px, min(2.6vw, 4.6vh), 40px); }
@media (max-width: 680px){ .jr-hero{ height: auto; min-height: 100svh; } }

/* Journey opening: centred, smaller, more air */
.jr-hero .hero-content{ text-align: center; display: flex; flex-direction: column; align-items: center; }
.jr-hero > .container{ justify-content: center; gap: clamp(40px, 9vh, 120px); padding-top: clamp(96px, 15vh, 180px); }
.jr-title{ font-size: clamp(36px, min(5.2vw, 8.4vh), 84px); line-height: 1.08; max-width: 18ch; margin-left: auto; margin-right: auto; }
.jr-hero-sub{ font-size: clamp(15px, 1.15vw, 17px); }
.jr-hero-actions{ justify-content: center; }
.jr-stats{ margin: 0 auto; width: 100%; max-width: 920px; }
.jr-stat, .jr-stat + .jr-stat{ padding-left: 16px; padding-right: 16px; align-items: center; text-align: center; }
.jr-stat-v{ font-size: clamp(22px, min(2vw, 3.8vh), 32px); }
.jr-hero .scroll-cue{ left: 50%; right: auto; transform: translateX(-50%); bottom: 18px; flex-direction: column; gap: 8px; }
@media (max-width: 680px){
  .jr-stat:nth-child(3){ padding-left: 16px; }
}

/* What we look after: compact, two columns */
.jr-care .container{ display: grid; grid-template-columns: 4fr 8fr; column-gap: clamp(40px, 7vw, 120px); align-items: start; }
.jr-care .section-head{ max-width: 340px; }
.jr-care h2{ font-size: clamp(28px, 2.6vw, 40px); line-height: 1.15; }
.jr-care-grid{ margin-top: 0; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 64px); }
.jr-care-item{ padding: 22px 0 30px; display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; align-items: baseline; }
.jr-care-num{ font-size: 15px; grid-row: 1; }
.jr-care-item h3{ margin-top: 0; font-size: clamp(19px, 1.5vw, 22px); grid-column: 2; }
.jr-care-item p{ grid-column: 2; margin-top: 8px; font-size: 14.5px; line-height: 1.6; max-width: 36ch; }
@media (max-width: 1080px){
  .jr-care .container{ grid-template-columns: 1fr; }
  .jr-care .section-head{ max-width: 520px; margin-bottom: 40px; }
}
@media (max-width: 680px){ .jr-care-grid{ grid-template-columns: 1fr; } }
/* scroll-scrubbed route: the scroll is the animation, so no easing on the line */
.jr-route.is-scrub .jr-map .seg,
.jr-route.is-scrub .jr-map .seg-return,
.jr-route.is-scrub .jr-map .seg-ties{ transition: none; }
.jr-route.is-scrub .jr-map .stop{ transition: opacity 350ms var(--ease); }

/* Who is travelling */
.jr-styles{ background: var(--warm); }
.jr-styles .container{ display: grid; grid-template-columns: 4fr 8fr; column-gap: clamp(40px, 7vw, 120px); align-items: start; }
.jr-styles .section-head{ max-width: 360px; }
.jr-styles h2{ font-size: clamp(28px, 2.6vw, 40px); line-height: 1.15; text-wrap: balance; }
.jr-tabs{ display: flex; gap: clamp(20px, 3vw, 44px); border-bottom: var(--rule); }
.jr-tab{
  appearance: none; background: none; border: 0; cursor: pointer; position: relative;
  padding: 0 0 16px; font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); transition: color 400ms var(--ease);
}
.jr-tab::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--blue);
  transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease);
}
.jr-tab[aria-selected="true"]{ color: var(--blue); }
.jr-tab[aria-selected="true"]::after{ transform: scaleX(1); }
.jr-tab:hover{ color: var(--blue); }
.jr-tab:focus-visible{ outline: 1px solid var(--blue); outline-offset: 6px; }
.jr-panels{ padding-top: clamp(28px, 3.5vw, 44px); }
.jr-panel-title{ display: none; }
.jr-panel-lead{ font-family: var(--font-head); font-style: italic; font-weight: 300; font-size: clamp(24px, 2.2vw, 32px); color: var(--blue); line-height: 1.2; text-wrap: balance; }
.jr-panel ul{ margin-top: 22px; list-style: none; padding: 0; border-top: var(--rule); }
.jr-panel li{ padding: 16px 0 16px 28px; border-bottom: var(--rule); position: relative; color: var(--ink); max-width: 60ch; }
.jr-panel li::before{ content: ""; position: absolute; left: 0; top: 1.45em; width: 14px; border-top: 1px solid var(--slate); }
.jr-styles.is-tabbed .jr-panel[data-hidden]{ display: none; }
.jr-styles.is-tabbed .jr-panel{ animation: jr-panel-in 700ms var(--ease); }
@keyframes jr-panel-in{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
/* without script: every party shown, one after another */
.jr-styles:not(.is-tabbed) .jr-tabs{ display: none; }
.jr-styles:not(.is-tabbed) .jr-panel-title{ display: block; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--font-body); color: var(--slate); margin-bottom: 12px; }
.jr-styles:not(.is-tabbed) .jr-panel + .jr-panel{ margin-top: 48px; }
@media (max-width: 1080px){
  .jr-styles .container{ grid-template-columns: 1fr; }
  .jr-styles .section-head{ max-width: 520px; margin-bottom: 36px; }
}
@media (max-width: 420px){ .jr-tab{ font-size: 11px; letter-spacing: 0.12em; } .jr-tabs{ gap: 18px; } }
.jr-tab .t-short{ display: none; }
@media (max-width: 560px){ .jr-tab .t-long{ display: none; } .jr-tab .t-short{ display: inline; } .jr-tabs{ justify-content: space-between; } }
/* atolls and seaplane legs */
.jr-map .atoll{ fill: #EDF1F1; stroke: rgba(80, 103, 119, 0.35); stroke-width: 1; }
.jr-map .atoll-lbl{ font-family: var(--font-body); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; fill: rgba(80, 103, 119, 0.75); }
.jr-map .seg-mask{ stroke: #fff; stroke-width: 10; }
.jr-map .seg-flight{ fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 5; stroke-linecap: round; }
.k-flight{ width: 22px; height: 0; border-top: 1.6px dashed var(--ink); }
.jr-panel li{ max-width: none; }
.jr-styles .section-head .lede{ margin-top: 16px; }
.consider-links{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.consider-links .text-link{ color: var(--blue); font-size: 14px; }
.consider-links .text-link::after{ right: 0; opacity: 0.35; }
.consider-links .text-link:hover::after{ opacity: 1; }
.jr-map .seg-boat{ stroke-dasharray: 1.5 4.5; stroke-width: 2; }
.k-boat{ width: 22px; height: 0; border-top: 2px dotted var(--ink); }
.jr-map .parallel{ stroke: var(--slate); stroke-width: 1; stroke-dasharray: 2 6; opacity: 0.7; }
.jr-map .parallel-lbl{ fill: var(--slate); }
.jr-route.is-live .jr-stages{ padding-bottom: 12vh; }

/* =========================================================
   Navigation dropdowns
   ========================================================= */
.has-menu{ position: relative; }
.nav-trigger{
  appearance: none; background: none; border: 0; cursor: pointer; padding: 0 0 4px;
  font-family: var(--font-body); display: inline-flex; align-items: center; gap: 8px;
}
.caret{
  display: inline-block; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease), margin var(--dur-fast) var(--ease);
}
.is-open > .nav-trigger .caret, .m-trigger[aria-expanded="true"] .caret{ transform: rotate(-135deg); margin-top: 3px; }
.nav-trigger[data-current="true"]::after{ right: 0; }
.nav-trigger::after{ right: 100%; }
.nav-trigger:hover::after, .is-open > .nav-trigger::after{ right: 0; }

.main-nav .nav-menu ul{ display: flex; flex-direction: column; gap: 0; }
.nav-menu{
  position: absolute; top: calc(100% + 24px); left: -28px; width: 380px;
  background: var(--white); color: var(--ink);
  padding: 26px 28px 22px;
  box-shadow: 0 30px 70px rgba(12, 22, 26, 0.14), 0 1px 0 rgba(12, 22, 26, 0.05);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 350ms var(--ease), transform 450ms var(--ease), visibility 0s linear 450ms;
  z-index: 120;
}
.nav-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; }
.has-menu.is-open .nav-menu{ opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nm-head{ display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); padding-bottom: 12px; border-bottom: var(--rule); }
.nav-menu li a{
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-bottom: var(--rule); transition: padding var(--dur-fast) var(--ease);
}
.nav-menu li a:hover, .nav-menu li a:focus-visible{ padding-left: 8px; }
.nm-name{ font-family: var(--font-head); font-size: 21px; color: var(--blue); line-height: 1.2; }
.nm-meta{ font-size: 12px; color: var(--slate); text-align: right; font-feature-settings: "lnum" 1; }
.nav-menu a[aria-current="page"] .nm-name{ font-style: italic; }
.nav-menu a[aria-current="page"] .nm-name::after{ content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); margin-left: 8px; vertical-align: middle; }
.nm-all{
  display: inline-flex; gap: 8px; margin-top: 18px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue);
}
.nm-all:hover{ color: var(--slate); }

/* mobile menu groups */
.mobile-panel{ justify-content: flex-start; overflow-y: auto; padding-top: 110px; padding-bottom: 48px; }
.m-trigger{ appearance: none; background: none; border: 0; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 12px; }
.mobile-panel .m-sub{
  display: flex; flex-direction: column; gap: 12px; overflow: hidden; max-height: 0;
  transition: max-height 500ms var(--ease), margin 500ms var(--ease); margin-top: 0;
}
.mobile-panel .m-group.is-open .m-sub{ margin-top: 16px; }
.mobile-panel .m-sub a{ font-size: 15px; color: var(--mist); display: flex; justify-content: space-between; gap: 16px; max-width: 320px; }
.mobile-panel .m-sub a span{ font-size: 13px; color: rgba(188,195,198,0.65); }
.mobile-panel .m-sub a.m-all{ color: var(--warm); font-weight: 500; }
.mobile-panel .m-sub a[aria-current="page"]{ color: var(--warm); }

/* footer: five columns */
.footer-top{ grid-template-columns: 1.3fr 1fr 1fr 0.9fr 0.9fr; }
.footer-col a.footer-strong{ color: var(--warm); }
.footer-col a[aria-current="page"]{ color: var(--warm); }
@media (max-width: 1080px){
  .footer-top{ grid-template-columns: repeat(4, 1fr); }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 860px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px){ .footer-top{ grid-template-columns: 1fr; } }

/* =========================================================
   Where to go when (destinations.html)
   ========================================================= */
.page-where .site-header:not(.is-scrolled){ color: var(--blue); }
.page-where .site-header:not(.is-scrolled) .nav-link,
.page-where .site-header:not(.is-scrolled) .wordmark{ color: var(--blue); }
.page-where .site-header:not(.is-scrolled) .btn-ghost-light{ border-color: var(--blue); color: var(--blue); }
.page-where .site-header:not(.is-scrolled) .btn-ghost-light::before{ background: var(--blue); }
.page-where .site-header:not(.is-scrolled) .btn-ghost-light:hover{ color: var(--warm); }

.wt-hero{ background: var(--warm); padding: clamp(150px, 20vh, 210px) 0 clamp(48px, 6vw, 72px); }
.wt-hero .eyebrow{ display: block; }
.wt-title{
  margin-top: 22px; font-family: var(--font-head); font-style: italic; font-weight: 300;
  font-size: clamp(40px, 5.4vw, 80px); line-height: 1.06; color: var(--blue); max-width: 15ch;
}
.wt-title .w{
  display: inline-block; opacity: 0; filter: blur(8px); transform: translate3d(0, 0.3em, 0);
  transition: opacity 1200ms var(--ease), transform 1200ms var(--ease), filter 1200ms var(--ease);
  transition-delay: calc(150ms + var(--i) * 80ms);
}
.wt-hero.is-revealed .wt-title .w{ opacity: 1; filter: blur(0); transform: none; }
.wt-hero .lede{ margin-top: 24px; max-width: 52ch; color: var(--slate); }
.wt-picker{
  margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(12, 1fr);
  border-top: var(--rule); border-bottom: var(--rule);
}
.wt-month{
  appearance: none; background: none; border: 0; cursor: pointer; position: relative;
  padding: 18px 0; font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); transition: color 300ms var(--ease);
}
.wt-month::after{
  content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 2px; background: var(--blue);
  transform: scaleX(0); transition: transform 500ms var(--ease);
}
.wt-month:hover{ color: var(--blue); }
.wt-month[aria-pressed="true"]{ color: var(--blue); }
.wt-month[aria-pressed="true"]::after{ transform: scaleX(1); }
.wt-month:focus-visible{ outline: 1px solid var(--blue); outline-offset: -4px; }
.wt-summary{ margin-top: 22px; min-height: 1.4em; font-family: var(--font-head); font-style: italic; font-size: clamp(21px, 1.8vw, 26px); color: var(--blue); }

.wt-results{ background: var(--white); }
.wt-list{ display: flex; flex-direction: column; transition: opacity 260ms var(--ease); }
.wt-list.is-shuffling{ opacity: 0; }
.wt-card{
  display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(28px, 5vw, 80px); align-items: center;
  padding: clamp(32px, 4vw, 48px) 0; border-top: var(--rule);
}
.wt-card:first-child{ border-top: 0; padding-top: 0; }
.wt-media .media-frame{ aspect-ratio: 4 / 3; transition: filter 600ms var(--ease), opacity 600ms var(--ease); }
.wt-card.is-off .wt-media .media-frame{ filter: grayscale(0.6); opacity: 0.6; }
.wt-status{
  display: inline-block; padding: 6px 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; border: 1px solid transparent; color: var(--slate);
}
.wt-card.is-best .wt-status{ background: var(--blue); color: var(--warm); }
.wt-card.is-good .wt-status{ border-color: var(--blue); color: var(--blue); }
.wt-card.is-off .wt-status{ border-color: var(--rule-color, rgba(12,22,26,0.15)); }
.wt-name{ margin-top: 16px; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.08; }
.wt-name a:hover{ color: var(--slate); }
.wt-line{ margin-top: 12px; max-width: 46ch; }
.wt-also{ margin-top: 10px; font-family: var(--font-head); font-style: italic; font-size: 18px; color: var(--slate); max-width: 46ch; }
.wt-meta{ margin-top: 20px; display: flex; gap: 40px; }
.wt-meta dt{ font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.wt-meta dd{ margin: 4px 0 0; font-family: var(--font-head); font-size: 22px; color: var(--blue); font-feature-settings: "lnum" 1; }
.wt-links{ margin-top: 22px; display: flex; gap: 28px; flex-wrap: wrap; }
.wt-links .text-link{ color: var(--blue); }

.wt-year{ background: var(--warm); }
.wt-year .section-head{ max-width: 640px; }
.wt-matrix{ margin-top: clamp(40px, 5vw, 64px); }
.wt-row{ display: grid; grid-template-columns: 200px 1fr; align-items: center; column-gap: 24px; padding: 10px 0; }
.wt-row-name{ font-family: var(--font-head); font-size: 21px; color: var(--blue); }
.wt-row-name:hover{ color: var(--slate); }
.wt-cells{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.wt-cell{ height: 30px; background: #E9ECED; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.wt-cell.best{ background: var(--blue); }
.wt-cell.good{ background: #A9B5BC; }
.wt-cell.is-sel{ box-shadow: 0 0 0 2px var(--warm), 0 0 0 3px var(--blue); }
.wt-col{
  appearance: none; background: none; border: 0; cursor: pointer; padding: 4px 0 8px;
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate);
}
.wt-col .wt-col-full{ display: none; }
@media (min-width: 900px){ .wt-col{ font-size: 0; } .wt-col .wt-col-full{ display: inline; font-size: 11px; } }
.wt-col.is-sel{ color: var(--blue); font-weight: 700; }
.wt-matrix .season-legend{ margin-top: 24px; }

.wt-close{ background: var(--ink); color: var(--warm); text-align: center; }
.wt-close .eyebrow{ display: block; color: var(--mist); }
.wt-close h2{ margin: 18px auto 0; max-width: 18ch; font-style: italic; font-weight: 300; font-size: clamp(36px, 4.6vw, 68px); line-height: 1.08; color: var(--warm); }
.wt-close .jr-close-actions{ margin-top: 36px; }

@media (max-width: 860px){
  .wt-card{ grid-template-columns: 1fr; row-gap: 24px; }
  .wt-row{ grid-template-columns: 1fr; row-gap: 8px; }
  .wt-row-head .wt-row-name{ display: none; }
}
@media (max-width: 680px){
  .wt-picker{ grid-template-columns: repeat(6, 1fr); }
  .wt-month{ padding: 14px 0; }
  .wt-cell{ height: 22px; }
  .wt-meta{ gap: 28px; }
}
.wt-results{ padding-top: clamp(28px, 4vw, 48px); }
.wt-list{ overflow: hidden; margin-bottom: -1px; }
.wt-card, .wt-card:first-child{ border-top: 0; border-bottom: var(--rule); padding: clamp(32px, 4vw, 48px) 0; }
.mobile-panel .btn-primary{ border-color: rgba(246, 241, 233, 0.55); }

/* Journey openings: one colour per country, with a fine grain */
.jr-hero{
  --tone: #0C161A; --glow-1: rgba(28, 63, 88, 0.85); --glow-2: rgba(80, 103, 119, 0.28);
  background: var(--tone);
}
.jr-hero::before{
  background:
    radial-gradient(42% 48% at 72% 30%, var(--glow-1), transparent 70%),
    radial-gradient(38% 44% at 16% 86%, var(--glow-2), transparent 70%);
}
.jr-hero::after{
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
.tone-sri-lanka{ --tone: #173328; --glow-1: rgba(176, 122, 58, 0.42); --glow-2: rgba(70, 120, 88, 0.55); }
.tone-maldives { --tone: #0B3138; --glow-1: rgba(46, 146, 146, 0.58); --glow-2: rgba(206, 230, 218, 0.14); }
.tone-vietnam  { --tone: #3E1715; --glow-1: rgba(184, 128, 52, 0.42); --glow-2: rgba(130, 40, 32, 0.45); }
.tone-thailand { --tone: #241C3A; --glow-1: rgba(200, 144, 54, 0.40); --glow-2: rgba(104, 78, 160, 0.48); }
.tone-estonia  { --tone: #1C2E4A; --glow-1: rgba(160, 188, 226, 0.34); --glow-2: rgba(232, 214, 170, 0.18); }
.tone-lapland  { --tone: #08161D; --glow-1: rgba(64, 196, 146, 0.36); --glow-2: rgba(126, 94, 196, 0.34); }

/* Destination page journey block: the same opening as its journey (colour, two glows, grain) */
.dest-journey[class*="tone-"]{ position: relative; overflow: hidden; isolation: isolate; background: var(--tone); }
.dest-journey[class*="tone-"]::before{
  content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(42% 48% at 72% 30%, var(--glow-1), transparent 70%),
    radial-gradient(38% 44% at 16% 86%, var(--glow-2), transparent 70%);
  animation: jr-drift 22s ease-in-out infinite alternate;
}
.dest-journey[class*="tone-"]::after{
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
.dest-journey[class*="tone-"] > .container{ position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce){ .dest-journey[class*="tone-"]::before{ animation: none; } }

/* On a coloured opening, buttons fill with that colour on hover, not Truvela Blue */
[class*="tone-"] .btn-ghost-light:hover, [class*="tone-"] .btn-ghost-light:focus-visible{ color: var(--tone); }
[class*="tone-"] .btn-light::before{ background: var(--tone); }
[class*="tone-"] .btn-light:hover, [class*="tone-"] .btn-light:focus-visible{ border-color: rgba(246, 241, 233, 0.55); }

/* =========================================================
   Home: the six destinations, as one cinematic strip
   ========================================================= */
.dest-strip{ background: var(--warm); }
.ds-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.ds-head .eyebrow{ display: block; }
.ds-head h2{ margin-top: 14px; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.08; }
.ds-aside{ max-width: 320px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ds-aside p{ color: var(--slate); }
.ds-aside .text-link{ color: var(--blue); }

.ds-panels{
  margin-top: clamp(36px, 4.5vw, 56px);
  display: flex; gap: 10px;
  height: clamp(420px, 62vh, 620px);
}
.ds-panel{
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; display: block;
  color: var(--warm); background: #2a3a44;
  transition: flex 900ms var(--ease);
  clip-path: inset(100% 0 0 0);
}
.ds-panels.is-drawn .ds-panel{
  clip-path: inset(0 0 0 0);
  transition: flex 900ms var(--ease), clip-path 1300ms var(--ease) calc(var(--i) * 110ms);
}
.ds-panel .media-frame{ position: absolute; inset: 0; background: #3b4a52; }
.ds-panel .media-frame img{ transform: scale(1.14); transition: transform 2200ms var(--ease) calc(var(--i) * 110ms); }
.ds-panels.is-drawn .ds-panel .media-frame img{ transform: scale(1); }
.ds-panel:hover .media-frame img{ transform: scale(1.05); transition-delay: 0s; transition-duration: 1600ms; }
.ds-panel .media-placeholder{ background: repeating-linear-gradient(135deg, #3b4a52 0 14px, #41515a 14px 15px); }
.ds-panel .media-placeholder .ph-name{ color: rgba(246, 241, 233, 0.55); font-size: 11px; }
.ds-shade{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(12, 22, 26, 0.78) 0%, rgba(12, 22, 26, 0.25) 45%, rgba(12, 22, 26, 0.05) 70%);
  transition: opacity 600ms var(--ease);
}
.ds-index{
  position: absolute; top: 20px; left: 22px;
  font-family: var(--font-head); font-style: italic; font-size: 18px; color: rgba(246, 241, 233, 0.8);
  font-feature-settings: "lnum" 1;
}
.ds-text{ position: absolute; left: 22px; right: 22px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
.ds-name{ font-family: var(--font-head); font-weight: 400; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.1; }
.ds-line, .ds-meta, .ds-more{
  max-height: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: opacity 500ms var(--ease), max-height 500ms var(--ease);
}
.ds-line{ font-size: 15px; color: rgba(246, 241, 233, 0.9); }
.ds-meta{ font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(188, 195, 198, 0.95); }
.ds-more{ font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 6px; }
.ds-more span{ display: inline-block; transition: transform 400ms var(--ease); }
.ds-panel:hover .ds-more span{ transform: translateX(6px); }

/* the panel you point at opens up; the rest make room */
@media (hover: hover) and (min-width: 1081px){
  .ds-panels:hover .ds-panel, .ds-panels:focus-within .ds-panel{ flex-grow: 0.85; }
  .ds-panels .ds-panel:hover, .ds-panels .ds-panel:focus-visible{ flex-grow: 2.6; }
  .ds-panel:hover .ds-line, .ds-panel:hover .ds-meta, .ds-panel:hover .ds-more,
  .ds-panel:focus-visible .ds-line, .ds-panel:focus-visible .ds-meta, .ds-panel:focus-visible .ds-more{
    max-height: 3em; opacity: 1; transition-delay: 300ms;
  }
}
.ds-panel:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; }

/* touch screens and smaller widths: a tidy grid, everything readable */
@media (hover: none), (max-width: 1080px){
  .ds-line, .ds-more{ max-height: 3em; opacity: 1; white-space: normal; }
}
@media (max-width: 1080px){
  .ds-panels{ height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .ds-panel{ aspect-ratio: 4 / 5; }
  .ds-more{ display: none; }
}
@media (max-width: 680px){
  .ds-panels{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .ds-panel{ aspect-ratio: 3 / 4; }
  .ds-text{ left: 14px; right: 14px; bottom: 16px; gap: 4px; }
  .ds-index{ top: 12px; left: 14px; font-size: 15px; }
  .ds-name{ font-size: 21px; }
  .ds-line{ font-size: 12.5px; line-height: 1.4; }
}

/* Light-topped pages share the dark header text */
.page-light .site-header:not(.is-scrolled){ color: var(--blue); }
.page-light .site-header:not(.is-scrolled) .nav-link,
.page-light .site-header:not(.is-scrolled) .wordmark{ color: var(--blue); }
.page-light .site-header:not(.is-scrolled) .btn-ghost-light{ border-color: var(--blue); color: var(--blue); }
.page-light .site-header:not(.is-scrolled) .btn-ghost-light::before{ background: var(--blue); }
.page-light .site-header:not(.is-scrolled) .btn-ghost-light:hover{ color: var(--warm); }

/* =========================================================
   Request a journey
   ========================================================= */
.rq-ways{ margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: 1fr 1fr; border-top: var(--rule); }
.rq-ways a{ display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 4px; padding: 24px 24px 24px 0; transition: background 400ms var(--ease); }
.rq-ways a + a{ padding-left: 24px; border-left: var(--rule); }
.rq-way-n{ grid-row: span 2; font-family: var(--font-head); font-style: italic; font-size: 20px; color: var(--slate); font-feature-settings: "lnum" 1; }
.rq-way-t{ font-family: var(--font-head); font-size: clamp(24px, 2.2vw, 32px); color: var(--blue); transition: color 300ms var(--ease); }
.rq-way-d{ font-size: 14px; color: var(--slate); }
.rq-ways a:hover .rq-way-t{ color: var(--slate); }

.rq-main{ background: var(--white); }
.rq-grid{ display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.rq-card{ scroll-margin-top: 100px; }
.rq-form-head h2{ margin-top: 12px; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; text-wrap: balance; }
.rq-req-note{ margin-top: 12px; font-size: 14px; color: var(--slate); }
.rq-form fieldset{ border: 0; margin: 0; padding: 0; margin-top: clamp(32px, 4vw, 44px); display: flex; flex-direction: column; gap: 20px; }
.rq-form legend{ padding: 0 0 14px; margin-bottom: 4px; width: 100%; border-bottom: var(--rule); font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); }
.rq-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rq-row-3{ grid-template-columns: 1fr 1fr 1.6fr; }
.field{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > span:first-child{ font-size: 13px; font-weight: 500; color: var(--ink); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="number"], .field select, .field textarea{
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--warm); border: 1px solid transparent; border-bottom: 1px solid rgba(12, 22, 26, 0.25);
  padding: 13px 14px; border-radius: 0; transition: border-color 300ms var(--ease), background 300ms var(--ease);
  appearance: none;
}
.field select{
  background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%), linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px;
}
.field textarea{ resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--blue); background: #fff; }
.field input::placeholder, .field textarea::placeholder{ color: rgba(80, 103, 119, 0.65); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea,
.rq-form.was-submitted .field input:invalid, .rq-form.was-submitted .field select:invalid{ border-color: #9b3b2f; }
.field-error{ font-size: 13px; color: #9b3b2f; }

.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.chips-months{ display: grid; grid-template-columns: repeat(6, 1fr); }
.chips-months .chip-wide{ grid-column: 1 / -1; }
.chip{ position: relative; cursor: pointer; }
.chip input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span{
  display: block; text-align: center; padding: 11px 14px; font-size: 13.5px; color: var(--ink);
  border: 1px solid rgba(12, 22, 26, 0.18); background: #fff; transition: all 300ms var(--ease);
}
.chip:hover span{ border-color: var(--blue); }
.chip input:checked + span{ background: var(--blue); border-color: var(--blue); color: var(--warm); }
.chip input:focus-visible + span{ outline: 2px solid var(--blue); outline-offset: 2px; }

.rq-submit{ margin-top: 36px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rq-submit .btn[disabled]{ opacity: 0.6; pointer-events: none; }
.rq-privacy{ font-size: 13.5px; color: var(--slate); }
.rq-privacy .text-link{ color: var(--blue); }
.rq-error{ margin-top: 18px; font-size: 14px; color: #9b3b2f; }
.rq-trap{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rq-done{ padding: clamp(32px, 4vw, 48px) 0; outline: none; }
.rq-done h2{ margin-top: 14px; font-style: italic; font-weight: 300; font-size: clamp(30px, 3vw, 44px); line-height: 1.12; }
.rq-done p{ margin-top: 14px; color: var(--slate); max-width: 46ch; }
.rq-done .text-link{ display: inline-block; margin-top: 22px; color: var(--blue); }
.rq-preview{ font-size: 13px; font-style: italic; }

.rq-call-card{
  position: sticky; top: 100px; background: var(--ink); color: var(--warm); padding: clamp(28px, 3vw, 40px);
}
.rq-call-card .eyebrow{ color: var(--mist); }
.rq-call-card h2{ margin-top: 12px; color: var(--warm); font-size: clamp(26px, 2.3vw, 34px); }
.rq-call-lede{ margin-top: 8px; color: var(--mist); }
.rq-call-card .rq-form{ display: flex; flex-direction: column; gap: 18px; }
.rq-call-card .field > span:first-child{ color: var(--warm); }
.rq-call-card .field input, .rq-call-card .field select{ background: rgba(246, 241, 233, 0.06); color: var(--warm); border-bottom-color: rgba(188, 195, 198, 0.35); }
.rq-call-card .field input:focus, .rq-call-card .field select:focus{ background: rgba(246, 241, 233, 0.1); border-color: var(--warm); }
.rq-call-card .field select option{ color: var(--ink); }
.rq-call-card .field input::placeholder{ color: rgba(188, 195, 198, 0.6); }
.rq-call-card .chip span{ background: transparent; color: var(--warm); border-color: rgba(188, 195, 198, 0.35); }
.rq-call-card .chip input:checked + span{ background: var(--warm); color: var(--ink); border-color: var(--warm); }
.rq-call-card .rq-submit{ margin-top: 8px; }
.rq-call-card .rq-done h2{ color: var(--warm); }
.rq-call-card .rq-done p{ color: var(--mist); }
.rq-call-card .rq-error{ color: #f0b4a8; }
.rq-direct{ margin-top: 32px; padding-top: 24px; border-top: var(--rule-on-blue); display: flex; flex-direction: column; gap: 10px; }
.rq-direct p{ display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; }
.rq-direct-l{ color: var(--mist); }
.rq-direct-v{ color: var(--warm); user-select: all; text-align: right; }

.rq-next{ background: var(--warm); }
.rq-next .section-head{ max-width: 640px; }
.rq-steps{ margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); list-style: none; padding: 0; }
.rq-steps li{ border-top: var(--rule); padding-top: 22px; }
.rq-step-n{ font-family: var(--font-head); font-style: italic; font-size: 18px; color: var(--slate); font-feature-settings: "lnum" 1; }
.rq-steps h3{ margin-top: 10px; font-size: clamp(24px, 2.1vw, 30px); }
.rq-steps p{ margin-top: 8px; color: var(--slate); max-width: 32ch; }

@media (max-width: 1080px){
  .rq-grid{ grid-template-columns: 1fr; }
  .rq-call-card{ position: static; }
}
@media (max-width: 680px){
  .rq-ways{ grid-template-columns: 1fr; }
  .rq-ways a + a{ padding-left: 0; border-left: 0; border-top: var(--rule); }
  .rq-row, .rq-row-3{ grid-template-columns: 1fr; }
  .rq-row-3{ grid-template-columns: 1fr 1fr; }
  .rq-row-3 .field:last-child{ grid-column: 1 / -1; }
  .chips-months{ grid-template-columns: repeat(4, 1fr); }
  .rq-steps{ grid-template-columns: 1fr; gap: 0; }
  .rq-steps li{ padding-bottom: 24px; }
}
.rq-hero .wt-title{ max-width: 19ch; }

/* =========================================================
   Our Approach, About, Legal
   ========================================================= */
.pg-hero{ padding-bottom: clamp(56px, 7vw, 96px); }
.pg-hero .wt-title{ max-width: 17ch; }

/* approach: four steps with a drawn line */
.ap-main{ background: var(--white); }
.ap-steps{ list-style: none; padding: 0 0 0 56px; margin: 0; position: relative; max-width: 980px; }
.ap-steps::before{
  content: ""; position: absolute; left: 12px; top: 14px; bottom: 40px; width: 1px; background: var(--blue);
  transform: scaleY(0); transform-origin: top; transition: transform 2400ms var(--ease);
}
.ap-steps.is-drawn::before{ transform: scaleY(1); }
.ap-step{ position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding-bottom: clamp(48px, 6vw, 80px); }
.ap-step::before{
  content: ""; position: absolute; left: -49px; top: 12px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--blue);
}
.ap-num{ font-family: var(--font-head); font-style: italic; font-weight: 300; font-size: clamp(36px, 3.6vw, 52px); line-height: 1; color: var(--blue); font-feature-settings: "lnum" 1; }
.ap-body .eyebrow{ display: block; }
.ap-body h3{ margin-top: 10px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; }
.ap-body > p{ margin-top: 14px; max-width: 56ch; color: var(--ink); }
.ap-split{ margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: var(--rule); padding-top: 18px; }
.ap-who{ font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); }
.ap-split ul{ margin-top: 10px; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ap-split li{ padding-left: 22px; position: relative; color: var(--slate); font-size: 15px; }
.ap-split li::before{ content: ""; position: absolute; left: 0; top: 0.75em; width: 12px; border-top: 1px solid var(--slate); }

.ap-not{ background: var(--ink); color: var(--warm); }
.ap-not .eyebrow{ color: var(--mist); }
.ap-not h2{ color: var(--warm); text-wrap: balance; }
.ap-not .section-head{ max-width: 640px; }
.ap-not-list{ margin-top: clamp(40px, 5vw, 64px); list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(32px, 5vw, 80px); }
.ap-not-list li{ display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 24px 0; border-top: var(--rule-on-blue); }
.ap-x{ position: relative; width: 16px; height: 16px; margin-top: 8px; }
.ap-x::before, .ap-x::after{ content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--mist); transform: rotate(45deg); }
.ap-x::after{ transform: rotate(-45deg); }
.ap-not-list h3{ font-size: clamp(22px, 1.9vw, 28px); color: var(--warm); }
.ap-not-list p{ margin-top: 6px; color: var(--mist); max-width: 40ch; }

.ap-faq{ background: var(--warm); }
.ap-faq .container{ display: grid; grid-template-columns: 4fr 8fr; column-gap: clamp(40px, 7vw, 120px); align-items: start; }
.faq{ border-top: var(--rule); }
.faq-item{ border-bottom: var(--rule); }
.faq-item summary{ list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-family: var(--font-head); font-size: clamp(21px, 1.8vw, 26px); color: var(--blue); }
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-sign{ position: relative; width: 14px; height: 14px; flex: none; }
.faq-sign::before, .faq-sign::after{ content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--blue); transition: transform 400ms var(--ease); }
.faq-sign::after{ transform: rotate(90deg); }
.faq-item[open] .faq-sign::after{ transform: rotate(0deg); }
.faq-item p{ padding: 0 0 24px; max-width: 60ch; color: var(--slate); }
.faq-item summary:focus-visible{ outline: 1px solid var(--blue); outline-offset: 4px; }

/* about */
.ab-story{ background: var(--white); }
.ab-story-grid{ display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.page-compact .ab-story.section-pad{ padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(48px, 5vw, 80px); }
.ab-story .media-frame{ aspect-ratio: 4 / 3; }
.ab-copy{ display: flex; flex-direction: column; gap: 18px; }
.ab-lead{ font-family: var(--font-head); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.3; color: var(--blue); }
.ab-copy p:not(.ab-lead){ color: var(--slate); max-width: 52ch; }
.ab-story .ab-copy p.ab-story-text:not(.ab-lead){ font-family: var(--font-body); font-weight: 400; font-size: clamp(16px, 1.1vw, 17px); line-height: 1.7; color: var(--slate); max-width: 60ch; text-wrap: pretty; }
.ab-range{ background: var(--warm); }
.ab-range .section-head{ max-width: 640px; }
.ab-range .lede{ margin-top: 16px; }
.ab-range-grid{ margin-top: clamp(40px, 5vw, 64px); list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); }
.ab-range-grid li{ padding: 24px 0 32px; border-top: var(--rule); }
.ab-range-grid h3{ font-size: clamp(22px, 1.9vw, 28px); }
.ab-range-grid p{ margin-top: 8px; color: var(--slate); }
.ab-partners{ background: var(--white); }
.ab-partners .section-head{ max-width: 640px; }
.ab-partner-list{ margin-top: clamp(40px, 5vw, 64px); list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.ab-partner-list li{ border-top: 1px solid var(--blue); padding-top: 20px; }
.ab-partner-list .ap-num{ font-size: 28px; }
.ab-partner-list h3{ margin-top: 14px; font-size: clamp(21px, 1.7vw, 26px); }
.ab-partner-list p{ margin-top: 8px; color: var(--slate); font-size: 15px; }

/* legal */
.lg-main{ background: var(--white); }
.lg-grid{ display: grid; grid-template-columns: 3fr 9fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.lg-toc{ position: sticky; top: 110px; }
.lg-toc .eyebrow{ display: block; }
.lg-toc ol{ margin-top: 14px; list-style: none; padding: 0; border-top: var(--rule); }
.lg-toc li a{ display: block; padding: 12px 0; border-bottom: var(--rule); color: var(--blue); font-size: 15px; transition: padding 300ms var(--ease); }
.lg-toc li a:hover{ padding-left: 6px; }
.lg-body{ max-width: 720px; }
.lg-section + .lg-section{ margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(40px, 5vw, 56px); border-top: var(--rule); }
.lg-section h2{ font-size: clamp(28px, 2.6vw, 38px); }
.lg-section h3{ margin-top: 28px; font-size: 21px; }
.lg-section p{ margin-top: 12px; color: var(--ink); line-height: 1.7; }
.lg-facts{ margin-top: 20px; border-top: var(--rule); }
.lg-facts div{ display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 14px 0; border-bottom: var(--rule); }
.lg-facts dt{ font-size: 13.5px; font-weight: 500; color: var(--slate); }
.lg-facts dd{ margin: 0; }
.lg-copy{ user-select: all; color: var(--blue); }

@media (max-width: 1080px){
  .ap-faq .container, .lg-grid, .ab-story-grid{ grid-template-columns: 1fr; }
  .ap-faq .section-head{ margin-bottom: 32px; }
  .lg-toc{ position: static; }
  .ab-partner-list{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px){
  .ap-steps{ padding-left: 36px; }
  .ap-steps::before{ left: 4px; }
  .ap-step{ grid-template-columns: 1fr; gap: 10px; }
  .ap-step::before{ left: -37px; }
  .ap-split{ grid-template-columns: 1fr; }
  .ap-not-list, .ab-range-grid, .ab-partner-list{ grid-template-columns: 1fr; }
  .lg-facts div{ grid-template-columns: 1fr; gap: 4px; }
}
.wt-close .jr-close-actions .text-link{ color: var(--warm); }
.nf-links{ margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.nf-links a{ padding: 14px 22px; border: 1px solid var(--blue); color: var(--blue); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; transition: background 300ms var(--ease), color 300ms var(--ease); }
.nf-links a:hover{ background: var(--blue); color: var(--warm); }

/* =========================================================
   Compact pages (Our Approach, About, Request a Journey):
   smaller openings, smaller headings, calmer spacing
   ========================================================= */
.page-compact .wt-hero{ padding: clamp(120px, 15vh, 150px) 0 clamp(36px, 4.5vw, 56px); }
.page-compact .wt-title{ margin-top: 14px; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.12; max-width: 24ch; }
.page-compact .wt-hero .lede{ margin-top: 14px; font-size: 16px; max-width: 56ch; }
.page-compact .section-pad{ padding-top: clamp(56px, 6.5vw, 96px); padding-bottom: clamp(56px, 6.5vw, 96px); }
.page-compact .section-head h2,
.page-compact .ap-not h2, .page-compact .ab-range h2, .page-compact .ab-partners h2{ font-size: clamp(26px, 2.4vw, 34px); line-height: 1.18; }
.page-compact .wt-close h2{ font-size: clamp(28px, 2.8vw, 40px); max-width: 24ch; }

/* approach */
.page-compact .ap-step{ grid-template-columns: 56px 1fr; padding-bottom: clamp(36px, 4.5vw, 56px); }
.page-compact .ap-num{ font-size: clamp(26px, 2.4vw, 34px); }
.page-compact .ap-body h3{ font-size: clamp(22px, 2vw, 28px); }
.page-compact .ap-body > p{ font-size: 15.5px; }
.page-compact .ap-split li{ font-size: 14px; }
.page-compact .ap-not-list li{ padding: 18px 0; }
.page-compact .ap-not-list h3{ font-size: clamp(19px, 1.6vw, 22px); }
.page-compact .ap-not-list p{ font-size: 15px; }
.page-compact .faq-item summary{ font-size: clamp(18px, 1.5vw, 21px); padding: 18px 0; }
.page-compact .faq-item p{ font-size: 15px; }

/* about */
.page-compact .ab-lead{ font-size: clamp(20px, 1.8vw, 25px); }
.page-compact .ab-copy p:not(.ab-lead){ font-size: 15.5px; }
.page-compact .ab-range-grid h3, .page-compact .ab-partner-list h3{ font-size: clamp(19px, 1.6vw, 22px); }
.page-compact .ab-range-grid p, .page-compact .ab-partner-list p{ font-size: 14.5px; }
.page-compact .ab-partner-list .ap-num{ font-size: 22px; }

/* request */
.page-compact .rq-ways{ margin-top: clamp(24px, 3vw, 36px); }
.page-compact .rq-ways a{ padding-top: 18px; padding-bottom: 18px; }
.page-compact .rq-way-t{ font-size: clamp(20px, 1.7vw, 24px); }
.page-compact .rq-way-d{ font-size: 13.5px; }
.page-compact .rq-form-head h2{ font-size: clamp(22px, 2vw, 28px); }
.page-compact .rq-call-card h2{ font-size: clamp(22px, 1.9vw, 27px); }
.page-compact .rq-done h2{ font-size: clamp(24px, 2.2vw, 32px); }
.page-compact .rq-steps h3{ font-size: clamp(20px, 1.7vw, 24px); }
.page-compact .rq-steps p{ font-size: 15px; }
.rq-call-card .field textarea{ background: rgba(246, 241, 233, 0.06); color: var(--warm); border-bottom-color: rgba(188, 195, 198, 0.35); min-height: 84px; }
.rq-call-card .field textarea:focus{ background: rgba(246, 241, 233, 0.1); border-color: var(--warm); }
.rq-call-card .field textarea::placeholder{ color: rgba(188, 195, 198, 0.6); }
.page-compact .wt-hero .wt-title{ max-width: 30ch; }

/* =========================================================
   Accessibility pass: footer contrast and tap size
   ========================================================= */
.footer-col .eyebrow{ color: rgba(188,195,198,0.78); }
.footer-bottom{ color: rgba(188,195,198,0.82); }
.footer-col ul{ gap: 6px; }
.footer-col a{ display: inline-block; padding: 3px 0; }
.page-index a{ display: inline-block; padding-top: 4px; padding-bottom: 4px; }
/* Journey route: stages not being read are softened, but stay legible */
.jr-route.is-live .jr-stage{ opacity: 0.6; }
.jr-route.is-live .jr-stage.is-current{ opacity: 1; }

/* The brand name inside a banner headline, set as the wordmark (matches the header) */
.wm-inline{
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.09em; /* a touch tighter than the header's 0.14em: large type needs less to look the same */
  margin-right: -0.09em; /* cancels the tracking after the last letter, so a full stop sits close */
  text-transform: lowercase;
  white-space: nowrap;
}

/* Constellation labels stay readable on phones, where the drawing scales down */
@media (max-width: 700px){
  .const-node text{ font-size: 22px; letter-spacing: 0.02em; }
}

/* Home panels: per-photo framing, so the subject stays in view when a panel is narrow */
.ds-panel[href="destination-lapland.html"] .media-frame img{ object-position: 72% 50%; }

/* About: why we travel, the emotional centre of the page */
.ab-why{ background: var(--ink); color: var(--warm); }
.ab-why-head{ max-width: 760px; }
.ab-why .eyebrow{ color: var(--mist); }
.ab-why h2{ margin-top: 16px; color: var(--warm); font-size: clamp(32px, 3.6vw, 52px); line-height: 1.12; text-wrap: pretty; }
.ab-why h2 em{ font-style: italic; display: block; }
.ab-why .lede{ margin-top: 20px; color: var(--mist); max-width: 58ch; }
.ab-why-list{ margin-top: clamp(44px, 5.5vw, 72px); list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.ab-why-list li{ border-top: 1px solid rgba(188, 195, 198, 0.35); padding-top: 22px; }
.ab-why-list .ap-num{ font-size: 26px; color: var(--mist); }
.ab-why-list h3{ margin-top: 14px; color: var(--warm); font-size: clamp(22px, 1.9vw, 28px); }
.ab-why-list p{ margin-top: 10px; color: var(--mist); font-size: 15.5px; line-height: 1.7; }
.ab-why-close{ margin-top: clamp(40px, 5vw, 64px); font-family: var(--font-head); font-style: italic; font-weight: 300; font-size: clamp(22px, 2vw, 30px); color: var(--warm); }
.page-compact .ab-why h2{ font-size: clamp(28px, 2.8vw, 40px); }
@media (max-width: 1080px){ .ab-why-list{ grid-template-columns: 1fr; gap: 0; } .ab-why-list li{ padding-bottom: 28px; } }

/* Home positioning: the emotional line, close to the top of the page */
.positioning .pos-why{ margin-top: 18px; max-width: 60ch; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.7; color: var(--slate); text-wrap: pretty; }
.positioning .pos-why span{ display: block; text-wrap: balance; }
@media (max-width: 700px){ .positioning h2 br{ display: none; } .positioning h2{ text-wrap: balance; } }

/* Header logo: the lockup, drawn inline so it follows the header colour */
.wordmark-lockup{ display: inline-flex; align-items: center; letter-spacing: 0; line-height: 0; }
.wordmark-lockup .wm-svg{ display: block; height: 25px; width: auto; }
@media (max-width: 700px){ .wordmark-lockup .wm-svg{ height: 24px; } }
/* on hover: the sail swings as if it caught the wind, and the star grows a little brighter */
.wordmark-lockup .wm-svg g path,
.wordmark-lockup .wm-svg g circle{ transform-box: fill-box; transition: transform 900ms var(--ease), opacity 600ms var(--ease); }
.wordmark-lockup .wm-svg g path{ transform-origin: 50% 0%; }
.wordmark-lockup .wm-svg g circle{ transform-origin: 50% 50%; opacity: 0.85; }
.wordmark-lockup:hover .wm-svg g path,
.wordmark-lockup:focus-visible .wm-svg g path{ transform: rotate(-7deg); }
.wordmark-lockup:hover .wm-svg g circle,
.wordmark-lockup:focus-visible .wm-svg g circle{ transform: translate(14%, -14%) scale(1.45); opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .wordmark-lockup .wm-svg g path,
  .wordmark-lockup .wm-svg g circle{ transition: opacity 300ms linear; }
  .wordmark-lockup:hover .wm-svg g path,
  .wordmark-lockup:focus-visible .wm-svg g path{ transform: none; }
  .wordmark-lockup:hover .wm-svg g circle,
  .wordmark-lockup:focus-visible .wm-svg g circle{ transform: none; }
}