/* =========================================================================
   Mathew Tours — "Serendib" design system
   Palette drawn from the island itself: the terracotta of Sigiriya rock,
   temple brass, laterite earth, and the warm paper of an old chart.
   ========================================================================= */

:root {
  /* ---- primitive colour ---- */
  /* Terracotta, taken from the rock itself. Sampling the sunlit face of Sigiriya
     gives warm browns around rgb(90,80,60) to rgb(120,90,60); those set the dark
     grounds, and the mid tones lift into the clay red the rock shows at distance.
     The sun, the roof red and the cream still come from the logo artwork, which
     is why the mark still sits in the page rather than on top of it. */
  --clay-900:   #2a1410;  /* deepest — hero veil, footer */
  --clay-800:   #48211a;  /* the main dark ground */
  --clay-700:   #5e2c22;
  --clay-600:   #7a3a2c;
  --terra-600:  #a34a30;  /* kickers and secondary accents */
  --terra-400:  #c2603f;
  --gold-500:   #d99a1f;
  --gold-400:   #f0a824;  /* the logo's sun */
  --gold-200:   #f7dda6;
  --laterite:   #b8481f;  /* the logo's roof, darkened to stay legible as text */
  --paper-50:   #fdf8f1;
  --paper-100:  #fcf0e4;  /* the logo's cream */
  --paper-200:  #f0e5d6;
  --paper-300:  #ddcdb8;
  --ink-900:    #2b1a15;  /* warm near-black, not the old green-black */
  --ink-700:    #4a352d;
  --ink-500:    #6b564f;

  /* ---- semantic ---- */
  --bg:            var(--paper-100);
  --bg-raised:     var(--paper-50);
  --bg-inverse:    var(--clay-800);
  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-inverse:  var(--paper-100);
  --text-inverse-muted: rgba(245, 240, 230, .72);
  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-400);
  --rule:          rgba(43, 26, 21, .14);
  --rule-inverse:  rgba(245, 240, 230, .18);

  /* ---- type ---- */
  /* One family throughout. Hierarchy comes from weight, size and tracking rather
     than from mixing typefaces — simpler to read and much lighter to load. */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    var(--font-display);
  --font-mono:    var(--font-display);

  --step--1: clamp(.82rem, .79rem + .14vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.12rem + .38vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.33rem + .82vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.7vw, 3.1rem);
  --step-4:  clamp(2.5rem, 1.8rem + 3.4vw, 5rem);

  /* ---- space & shape ---- */
  --wrap: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --radius: 2px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 220ms;
  --dur: 520ms;
  --dur-slow: 900ms;
}

/* =========================================================================
   Reset / base
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* fixed header offset for in-page anchors */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* guard against any accidental horizontal scroll */
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold-200); color: var(--ink-900); }

/* Visible, high-contrast focus for keyboard users only */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--clay-800);
  color: var(--paper-100);
  padding: .75rem 1.25rem;
  font-size: var(--step--1);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* =========================================================================
   Shared type components
   ========================================================================= */

.kicker {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terra-600);
}
.kicker__rule {
  width: clamp(1.5rem, 5vw, 3rem);
  height: 1px;
  background: currentColor;
  opacity: .5;
  flex: none;
}
.kicker--light { color: var(--gold-400); }

.coord {
  font-size: .92em;
  font-weight: 500;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.h2 {
  font-size: var(--step-3);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.h2--light { color: var(--text-inverse); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}
.lede--narrow { max-width: 46ch; }
.lede--light { color: var(--text-inverse-muted); max-width: 52ch; }

.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 60rem; }
/* extra air between a section heading and the paragraph under it */
.section__head--airy .h2 { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  --btn-bd: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px minimum touch target */
  min-height: 44px;
  padding: .8rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold {
  --btn-bg: var(--gold-500);
  --btn-fg: var(--clay-900);
  --btn-bd: var(--gold-500);
}
.btn--gold:hover { --btn-bg: var(--gold-400); --btn-bd: var(--gold-400); }

.btn--ghost {
  --btn-fg: var(--paper-100);
  --btn-bd: rgba(245, 240, 230, .45);
}
.btn--ghost:hover { --btn-bg: rgba(245, 240, 230, .1); --btn-bd: var(--paper-100); }

.btn--sm { padding: .6rem 1.15rem; font-size: .78rem; }
.btn--lg { padding: 1rem 2.1rem; font-size: var(--step-0); text-transform: none; letter-spacing: .01em; }
.btn--caps { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.btn--full { width: 100%; }

/* =========================================================================
   Header / navigation
   ========================================================================= */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1rem var(--gutter);
}

.nav.is-stuck {
  background: rgba(72, 33, 26, .92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(245, 240, 230, .1);
}
.nav.is-stuck .nav__inner { padding-block: .7rem; }

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  margin-right: auto;
  color: var(--paper-100);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -.01em;
}
.brand__mark { width: 52px; height: auto; flex: none; }

.brand__wm { display: block; line-height: 1; }
.brand__name {
  display: block;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.brand__sub {
  display: block;
  margin-top: .28em;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.brand__wm--lg .brand__name { font-size: 1.3rem; }
.brand__wm--lg .brand__sub { font-size: .66rem; }

.nav__links { display: none; gap: 1.75rem; }
.nav__links a {
  position: relative;
  color: rgba(245, 240, 230, .82);
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: .02em;
  padding-block: .5rem;
  transition: color var(--dur-fast) var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: .15rem;
  width: 100%; height: 1px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__links a:hover { color: var(--paper-100); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { display: none; }

/* =========================================================================
   Language switcher
   ========================================================================= */

.flagdefs { position: absolute; width: 0; height: 0; overflow: hidden; }

.flag {
  width: 20px;
  height: 14px;
  flex: none;
  border-radius: 1px;
  /* a hairline keeps white-edged flags off a light ground */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

.lang { position: relative; flex: none; }

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .45rem .7rem;
  background: transparent;
  border: 1px solid rgba(245, 240, 230, .28);
  border-radius: var(--radius);
  color: var(--paper-100);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lang__btn:hover { border-color: var(--paper-100); background: rgba(245, 240, 230, .08); }

.lang__code {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.lang__chev { width: 10px; height: 7px; opacity: .7; transition: transform var(--dur-fast) var(--ease); }
.lang__btn[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 10;
  min-width: 12rem;
  margin: 0;
  padding: .35rem;
  list-style: none;
  background: var(--clay-800);
  border: 1px solid var(--rule-inverse);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
}
.lang__menu li {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding: .5rem .65rem;
  border-radius: var(--radius);
  color: var(--text-inverse-muted);
  cursor: pointer;
  font-size: var(--step--1);
}
.lang__menu li:hover,
.lang__menu li:focus-visible { background: rgba(245, 240, 230, .1); color: var(--paper-100); }
.lang__menu li[aria-selected="true"] { color: var(--gold-400); }
.lang__name { margin-left: auto; }

.nav__toggle {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.nav__toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--paper-100);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.mobile {
  background: rgba(7, 23, 17, .97);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule-inverse);
}
.mobile nav { display: flex; flex-direction: column; padding: .5rem var(--gutter) 1.5rem; }
.mobile a {
  padding: .95rem 0;
  color: var(--paper-100);
  text-decoration: none;
  font-size: var(--step-1);
  font-family: var(--font-display);
  border-bottom: 1px solid var(--rule-inverse);
}
.mobile__cta { color: var(--gold-400) !important; border-bottom: 0 !important; }

@media (min-width: 62rem) {
  .nav__links, .nav__cta { display: flex; }
  .nav__toggle { display: none; }
  .mobile { display: none !important; }
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* dvh avoids the mobile browser-chrome jump; vh is the fallback */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 9rem 0 clamp(3rem, 8vw, 6rem);
  overflow: hidden;
  background: var(--clay-900);
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--clay-900); }
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
/* The video carries its own motion, so the Ken Burns drift is only applied to
   the still fallback — running both at once reads as a wobble. */
.hero__media img { animation: kenburns 26s var(--ease) infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(0, -1.5%, 0); }
}

.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  /* Horizontal wash keeps the type on darkness while the rock itself stays lit;
     the vertical wash anchors the lower content and the header. */
  background:
    linear-gradient(to right, rgba(42,20,16,.93) 0%, rgba(42,20,16,.78) 30%, rgba(42,20,16,.34) 58%, rgba(42,20,16,.06) 82%),
    linear-gradient(to top, rgba(42,20,16,.92) 0%, rgba(42,20,16,.55) 34%, rgba(42,20,16,.22) 60%, rgba(42,20,16,.5) 100%);
}

.hero__body { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); width: 100%; }

.hero__title {
  font-size: var(--step-4);
  font-weight: 800;
  /* 1.02 was tighter than the font's own ascent+descent, so the reveal mask on
     each line was cutting the tops and the tails of g, p and y. This is the
     smallest leading that clears the glyphs without opening the lines up. */
  line-height: 1.14;
  letter-spacing: -.045em;
  color: var(--paper-50);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  max-width: 18ch;
}
.hero__title em {
  font-style: normal;
  color: var(--gold-400);
}

/* Line-by-line mask reveal.
   The padding gives the mask room for ascenders and descenders; the matching
   negative margin cancels it again, so the extra room costs no visual spacing. */
.line {
  display: block;
  overflow: hidden;
  padding-block: .14em;
  margin-block: -.14em;
}
.line > span { display: block; }

.hero__lede {
  max-width: 48ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgba(245, 240, 230, .88);
}
.hero__lede strong { color: var(--gold-200); font-weight: 500; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3rem, 8vw, 6rem);
  display: none;
  align-items: center;
  gap: .7rem;
  color: rgba(245, 240, 230, .7);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero__scrollLine {
  width: 1px; height: 3.5rem;
  background: linear-gradient(to bottom, var(--gold-400), transparent);
  animation: scrollpulse 2.4s var(--ease) infinite;
}
@keyframes scrollpulse {
  0%, 100% { transform: scaleY(.4); opacity: .4; transform-origin: top; }
  50%      { transform: scaleY(1); opacity: 1; transform-origin: top; }
}
@media (min-width: 62rem) { .hero__scroll { display: flex; } }

/* =========================================================================
   Island / premise
   ========================================================================= */

/* The premise and the register share a background and read as one thought, so the
   seam between them carries about one section gap instead of two stacked ones. */
.island { padding-bottom: calc(var(--section-y) * .6); }
.landmarks { padding-top: calc(var(--section-y) * .6); }

.island { background: var(--bg); }
.island__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
/* same breathing room under the heading as the section heads below */
.island__text .h2 { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

@media (min-width: 56rem) {
  .island__grid { grid-template-columns: 1.35fr 1fr; align-items: start; }
}

.stats {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.stats li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .05rem .3rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.stats__k {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--clay-700);
  /* tabular figures stop the number jittering while it counts up */
  font-variant-numeric: tabular-nums;
}
.stats__u { font-size: .82rem; font-weight: 600; color: var(--terra-600); }
.stats__v { flex-basis: 100%; margin-top: .2rem; font-size: var(--step--1); color: var(--text-muted); }

/* =========================================================================
   Landmarks
   ========================================================================= */

.landmarks { background: var(--bg); padding-bottom: clamp(2rem, 4vw, 4rem); }

.lm { display: flex; flex-direction: column; gap: clamp(3.5rem, 8vw, 7rem); }

.lm__item {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
  align-items: center;
}

@media (min-width: 56rem) {
  .lm__item { grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .lm__item--flip .lm__figure { order: 2; }
}

.lm__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  /* reserving the box prevents layout shift as images stream in */
  aspect-ratio: 3 / 2;
  background: var(--paper-200);
}
.lm__figure img {
  width: 100%;
  height: 112%;          /* headroom so the parallax never exposes an edge */
  object-fit: cover;
  will-change: transform;
}

.lm__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem;
  color: var(--terra-600);
  font-size: var(--step--1);
}
.lm__region {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: .75rem;
  border-left: 1px solid var(--rule);
}
/* used where there are no coordinates to sit beside — the divider would dangle */
.lm__region--first { padding-left: 0; border-left: 0; }

.lm__title {
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: .6rem;
}

.lm__desc { color: var(--text-muted); margin-bottom: 1rem; text-wrap: pretty; }

.lm__cta,
.her__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-top: .35rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  width: 100%;
  color: var(--laterite);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}
.lm__cta span,
.her__cta span { transition: transform var(--dur-fast) var(--ease); }
.lm__cta:hover span,
.her__cta:hover span { transform: translateX(4px); }

/* =========================================================================
   The heritage
   ========================================================================= */

.heritage { background: var(--paper-50); border-top: 1px solid var(--rule); }

.her { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 46rem) { .her { grid-template-columns: repeat(2, 1fr); } }

.her__item { display: flex; flex-direction: column; }

.her__figure {
  margin: 0 0 1.25rem;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  background: var(--paper-200);
}
.her__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.her__item:hover .her__figure img { transform: scale(1.04); }

.her__body { display: flex; flex-direction: column; flex: 1; }

.her__meta { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.her__year {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold-500);
  font-variant-numeric: tabular-nums;
}
.her__region {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: .75rem;
  border-left: 1px solid var(--rule);
}
.her__title {
  font-size: var(--step-1);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: .55rem;
}
.her__desc { font-size: var(--step--1); color: var(--text-muted); margin-bottom: auto; }
.her__cta { margin-top: 1.25rem; }

/* =========================================================================
   Journeys
   ========================================================================= */

.journeys { background: var(--bg); border-top: 1px solid var(--rule); }

.cards {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 44rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* An odd card count leaves a dead cell in a 2- or 3-column grid. The closing card
   of a group takes the extra width instead, which fills the row and earns it. */
@media (min-width: 44rem) { .card--feature { grid-column: span 2; } }

.card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper-50);
  transition: background var(--dur) var(--ease);
}
.card:hover { background: #fff; }

.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.card__title {
  font-size: var(--step-1);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.card__days {
  margin: 0;
  flex: none;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terra-600);
}
.card__route {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--terra-600);
  letter-spacing: .01em;
}
/* group headings inside the journeys section */
.group { margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.25rem, 2.5vw, 2rem); }
.group:first-of-type { margin-top: 0; }
.group__title {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--clay-700);
}
.group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.group__note { margin: .5rem 0 0; font-size: var(--step--1); color: var(--text-muted); max-width: 52ch; }

.card__desc { margin: .35rem 0 auto; font-size: var(--step--1); color: var(--text-muted); }

/* the day-by-day plan, closed by default so the cards stay scannable */
.plan { margin-top: 1.1rem; border-top: 1px solid var(--rule); padding-top: .9rem; }
.plan summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--terra-600);
}
.plan summary::-webkit-details-marker { display: none; }
.plan summary::after {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--dur-fast) var(--ease);
}
.plan[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.plan__list {
  margin: .5rem 0 0;
  padding: 0 0 0 0;
  list-style: none;
  display: grid;
  gap: .7rem;
}
.plan__list li {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-muted);
  padding-left: .9rem;
  border-left: 2px solid var(--paper-300);
}
.plan__list b {
  display: block;
  font-weight: 700;
  color: var(--clay-700);
  letter-spacing: .02em;
}
.plan__list i { font-style: normal; color: var(--laterite); font-weight: 600; }

.card--feature .plan { border-top-color: var(--rule-inverse); }
.card--feature .plan summary { color: var(--gold-400); }
.card--feature .plan__list li { color: var(--text-inverse-muted); border-left-color: rgba(245,240,230,.25); }
.card--feature .plan__list b { color: var(--paper-50); }
.card--feature .plan__list i { color: var(--gold-400); }

.card__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-top: 1.25rem;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--laterite);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
}
.card__link span { transition: transform var(--dur-fast) var(--ease); }
.card__link:hover span { transform: translateX(4px); }

.card--feature { background: var(--clay-800); color: var(--paper-100); }
.card--feature:hover { background: var(--clay-700); }
.card--feature .card__title { color: var(--paper-50); }
.card--feature .card__days,
.card--feature .card__route { color: var(--gold-400); }
.card--feature .card__desc { color: var(--text-inverse-muted); }
.card--feature .card__link { color: var(--gold-400); }

/* =========================================================================
   Tailor-made / Calendly
   ========================================================================= */

.tailor {
  position: relative;
  padding-block: clamp(5rem, 10vw, 9rem);
  overflow: hidden;
  background: var(--clay-900);
  isolation: isolate;
}
.tailor__media { position: absolute; inset: 0; z-index: -2; }
.tailor__media img { width: 100%; height: 100%; object-fit: cover; }
.tailor__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(42,20,16,.96) 0%, rgba(42,20,16,.88) 45%, rgba(42,20,16,.62) 100%);
}
.tailor__body { position: relative; }

.tailor__actions { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* =========================================================================
   About / pillars
   ========================================================================= */

.about { background: var(--bg); }
.pillars { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 44rem) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .pillars { grid-template-columns: repeat(4, 1fr); } }

.pillar { display: flex; flex-direction: column; }
.pillar__figure {
  margin: 0 0 1.15rem;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  background: var(--paper-200);
}
.pillar__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.pillar:hover .pillar__figure img { transform: scale(1.05); }

/* Waiting on the agency's own photograph. Replace the figure contents with an
   <img> and drop this modifier — see README.md. */
.pillar__figure--soon {
  display: grid;
  place-items: center;
  background: var(--paper-200);
  box-shadow: inset 0 0 0 1px var(--paper-300);
}
.pillar__figure--soon span {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: .6;
}

.pillar__title {
  padding-top: .9rem;
  border-top: 2px solid var(--clay-700);
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.pillar p { font-size: var(--step--1); color: var(--text-muted); }

/* =========================================================================
   Contact
   ========================================================================= */

.contact { background: var(--paper-50); border-top: 1px solid var(--rule); }
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 56rem) { .contact__grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.contact__direct { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.contact__direct li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.25rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
}
.contact__label {
  flex: none;
  min-width: 6rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Every link in this list is a tap target in its own right (not inline in a
   sentence), so each one carries the full 44px minimum. */
.contact__direct a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  color: var(--laterite);
  font-weight: 600;
  text-decoration: none;
}
.contact__direct a:hover { text-decoration: underline; }

.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .4rem; }
.field--row { display: grid; grid-template-columns: 1fr; gap: 1.15rem; }
@media (min-width: 30rem) { .field--row { grid-template-columns: 1fr 1fr; } }
.field--row > div { display: grid; gap: .4rem; }

/* the arriving/leaving pair, grouped so screen readers announce them as one question */
.field--dates { margin: 0; padding: 0; border: 0; }
.field--dates legend {
  padding: 0;
  margin-bottom: .55rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-700);
}
.field--dates .field__hint { margin-top: .45rem; }

.field label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: .7rem .85rem;
  background: #fff;
  border: 1px solid var(--paper-300);
  border-radius: var(--radius);
  font-size: var(--step-0);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: auto; resize: vertical; line-height: 1.5; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--terra-600);
  box-shadow: 0 0 0 3px rgba(31, 111, 107, .16);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #a8321c; }

/* phone: small country-code picker glued to the number */
.phone { display: flex; gap: .5rem; }
.field .phone__prefix {
  flex: 0 0 auto;
  width: auto;
  padding-inline: .6rem 1.6rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a5a50' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .6rem center;
}
.phone input { flex: 1 1 auto; min-width: 0; }

.field__hint { margin: 0; font-size: .8rem; color: var(--text-muted); }

/* the human check: question, then a small answer box */
.human { display: flex; align-items: center; gap: .7rem; }
.human__q {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--clay-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.human input { max-width: 7rem; text-align: center; font-variant-numeric: tabular-nums; }
.field__error { margin: 0; font-size: .8rem; font-weight: 600; color: #a8321c; }

.form__status { margin: 0; font-size: var(--step--1); font-weight: 600; min-height: 1.5em; }
.form__status.is-ok { color: var(--terra-600); }
.form__status.is-err { color: #a8321c; }
.form__legal { margin: 0; font-size: .78rem; color: var(--text-muted); }

/* =========================================================================
   Footer
   ========================================================================= */

.footer { background: var(--clay-900); color: var(--text-inverse); padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer__inner { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .footer__inner { grid-template-columns: 1.2fr 1fr 1.2fr; align-items: start; } }

.footer__logo { width: 132px; height: auto; margin-bottom: .75rem; }
.footer__tag { margin: .75rem 0 0; font-size: var(--step--1); color: var(--text-inverse-muted); }
/* One vertical pile, evenly spaced — easier to scan than a wrapped row. */
.footer__nav { display: flex; flex-direction: column; gap: .35rem; }
.footer__nav a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  color: var(--text-inverse-muted);
  text-decoration: none;
  font-size: var(--step--1);
  transition: color var(--dur-fast) var(--ease);
}
.footer__nav a:hover { color: var(--gold-400); }
.footer__legal { margin: 0; font-size: .78rem; line-height: 1.7; color: rgba(245,240,230,.55); }
.footer__legal a { color: var(--gold-400); }

/* =========================================================================
   Live local time
   ========================================================================= */

.footer__meta { display: flex; flex-direction: column; gap: 1.5rem; }

.clock {
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-inverse);
}
.clock p { margin: 0; }

.clock__label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, .45);
}
.clock__time {
  margin-top: .3rem !important;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--gold-400);
  /* tabular figures stop the seconds shifting the digits beside them */
  font-variant-numeric: tabular-nums;
}
.clock__day {
  margin-top: .2rem !important;
  font-size: .82rem;
  color: var(--text-inverse-muted);
}
.clock__tz {
  margin-top: .45rem !important;
  font-size: .7rem;
  color: rgba(245, 240, 230, .45);
}
.clock__diff:not(:empty)::before { content: " · "; }

/* =========================================================================
   Social bar
   ========================================================================= */

.social {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule-inverse);
}
.social__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
}
.social__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(252, 240, 228, .55);
}
.social__list {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social__list a {
  display: grid;
  place-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--text-inverse-muted);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.social__list a:hover { color: var(--gold-400); background: rgba(252, 240, 228, .08); }
.social__list svg { width: 21px; height: 21px; }

/* =========================================================================
   Floating WhatsApp
   ========================================================================= */

/* The supplied icon carries its own WhatsApp green edge to edge, so the button
   adds no background of its own — it just clips the square into a circle. */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(42, 20, 16, .35);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.wa-float img { width: 100%; height: 100%; object-fit: cover; }
.wa-float:hover { transform: scale(1.07); box-shadow: 0 8px 28px rgba(42, 20, 16, .45); }

/* =========================================================================
   Scroll-reveal animation
   Elements start hidden ONLY when JS is running and motion is allowed;
   `js-motion` is set on <html> by main.js, so no-JS users see everything.
   ========================================================================= */

.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-motion [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); }

.js-motion [data-line] > span {
  /* must clear the mask's padding as well as its own height, or the top of the
     text peeks out before the reveal starts */
  transform: translate3d(0, 125%, 0);
  transition: transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--line-delay, 0ms);
}
.js-motion [data-line].is-in > span { transform: translate3d(0, 0, 0); }

/* =========================================================================
   Reduced motion — honour the OS setting completely
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__media img { animation: none; transform: none; }
  .hero__scrollLine { animation: none; }
  .js-motion [data-reveal] { opacity: 1; transform: none; }
  .js-motion [data-line] > span { transform: none; }
  .lm__figure img { transform: none !important; height: 100%; }
  .btn:hover, .wa-float:hover { transform: none; }
}

/* Respect users who disable JS entirely */
.no-js [data-reveal] { opacity: 1; transform: none; }