/* ------------------------------------------------------------------
   VLX Travel — styles
   ------------------------------------------------------------------ */

:root {
  --ivory: #f4efe6;
  --paper: #fbf9f4;
  --sand: #e6dccb;
  --stone: #8b8377;
  --ink: #17140f;
  --ink-soft: #3a352e;
  --clay: #b5673a;
  --night: #152243;
  --navy: #152243;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
em { font-style: italic; }
::selection { background: var(--ink); color: var(--ivory); }

/* --- type ------------------------------------------------------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--stone);
  margin-bottom: 22px;
}
.h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.4vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.h2 em { font-weight: 300; color: var(--clay); }
.line { display: block; overflow: hidden; }
.line > span { display: block; will-change: transform; }

/* --- buttons & links -------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.6s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn--solid { background: var(--navy); color: var(--ivory); }
.btn--solid::before { background: var(--clay); }
.btn--line { border: 1px solid currentColor; }
.btn--line::before { background: var(--ink); }
.btn--line:hover { color: var(--ivory); border-color: var(--ink); }
.btn--light { background: var(--ivory); color: var(--ink); }
.btn--light::before { background: var(--clay); }
.btn--light:hover { color: var(--ivory); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.link-arrow span { position: relative; }
.link-arrow span::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.link-arrow:hover span::after { transform: scaleX(1); transform-origin: left; }
.link-arrow i {
  width: 28px; height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.5s var(--ease);
}
.link-arrow i::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.link-arrow:hover i { width: 40px; }

/* --- curtain (intro) --------------------------------------------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--navy);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.logo { display: block; fill: currentColor; aspect-ratio: 500.5 / 298.8; }
.curtain__mark {
  width: clamp(110px, 14vw, 200px);
  color: var(--ivory);
  opacity: 0;
  transform: scale(0.92);
}

/* --- nav ----------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  color: #fff;
  mix-blend-mode: difference;
  transition: transform 0.6s var(--ease);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__brand { display: flex; align-items: flex-end; gap: 12px; }
.nav__mark { width: 54px; }
.nav__sub { font-size: 11px; letter-spacing: 0.08em; opacity: 0.8; line-height: 1; padding-bottom: 2px; }
.nav__links { display: flex; gap: 34px; font-size: 13px; font-weight: 500; }
.nav__links a { position: relative; padding: 6px 0; }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { justify-self: end; padding: 12px 22px; }
.nav__cta::before { background: #fff; }
.nav__cta:hover { color: #000; border-color: #fff; }
.nav__burger { display: none; justify-self: end; width: 40px; height: 40px; position: relative; }
.nav__burger span {
  position: absolute; left: 8px; right: 8px; height: 1px; background: currentColor;
  transition: transform 0.5s var(--ease), top 0.5s var(--ease);
}
.nav__burger span:first-child { top: 16px; }
.nav__burger span:last-child { top: 24px; }
.nav__burger.is-open span:first-child { top: 20px; transform: rotate(45deg); }
.nav__burger.is-open span:last-child { top: 20px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--ink); color: var(--ivory);
  display: grid; place-items: center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__inner { display: grid; gap: 14px; text-align: center; }
.menu__link {
  font-family: var(--serif); font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 300; line-height: 1.1;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.menu.is-open .menu__link { opacity: 1; transform: none; }
.menu.is-open .menu__link:nth-child(1) { transition-delay: 0.25s; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 0.3s; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 0.35s; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 0.4s; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 0.45s; }
.menu.is-open .menu__link:nth-child(6) { transition-delay: 0.5s; }
.menu__link--accent { color: var(--clay); font-style: italic; }

/* --- hero ---------------------------------------------------------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ivory);
  overflow: hidden;
}
.hero__media { position: relative; overflow: hidden; }
.hero__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(180deg, rgba(23,20,15,0), rgba(23,20,15,0.6));
  pointer-events: none;
}
.hero__img-wrap {
  position: absolute; inset: 0;
  clip-path: inset(100% 0 0 0);
}
.hero__img {
  width: 100%; height: 118%;
  object-fit: cover;
  object-position: 50% 40%;
  transform: scale(1.12);
  will-change: transform;
}
.hero__caption {
  position: absolute;
  left: var(--gutter); bottom: 36px;
  display: flex; gap: 16px; align-items: baseline;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 12px rgba(23,20,15,0.6);
  opacity: 0;
  z-index: 1;
}
.hero__caption-index { font-family: var(--serif); font-size: 18px; }
.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 120px;
}
.hero__eyebrow { opacity: 0; }
.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 5.6vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin-bottom: 36px;
}
.hero__title em { color: var(--clay); }
.hero__lead {
  max-width: 44ch;
  font-size: 16px;
  color: var(--ink-soft);
  margin-bottom: 44px;
  opacity: 0;
}
.hero__actions { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; opacity: 0; }
.hero__scroll {
  position: absolute;
  right: var(--gutter); bottom: 36px;
  display: flex; align-items: center; gap: 16px;
  font-size: 12px; color: var(--stone);
  opacity: 0;
}
.hero__scroll-line { width: 1px; height: 56px; background: var(--sand); position: relative; overflow: hidden; }
.hero__scroll-line span {
  position: absolute; inset: 0; background: var(--ink);
  transform-origin: top; animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- statement ----------------------------------------------------- */
.statement {
  padding: clamp(120px, 16vw, 220px) var(--gutter) clamp(100px, 12vw, 180px);
  background: var(--paper);
}
.statement__text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  line-height: 1.22;
  max-width: 30ch;
  margin-bottom: clamp(90px, 10vw, 150px);
}
.statement__text .w { display: inline-block; opacity: 0.12; }
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--sand);
}
.pillar {
  padding: 36px 32px 36px 0;
  border-right: 1px solid var(--sand);
}
.pillar:not(:first-child) { padding-left: 32px; }
.pillar:last-child { border-right: 0; }
.pillar__num { font-family: var(--serif); font-size: 15px; color: var(--clay); display: block; margin-bottom: 40px; }
.pillar__title { font-family: var(--serif); font-weight: 400; font-size: 26px; margin-bottom: 12px; line-height: 1.1; }
.pillar p { font-size: 14px; color: var(--stone); max-width: 30ch; }

/* --- journeys (horizontal) ---------------------------------------- */
.journeys { background: var(--paper); }
.journeys__pin { height: 100vh; overflow: hidden; display: flex; align-items: center; }
.journeys__track {
  display: flex;
  align-items: stretch;
  height: 100vh;
  will-change: transform;
}
.journeys__intro {
  flex: 0 0 auto;
  width: 44vw;
  min-width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter);
}
.journeys__intro .h2 { max-width: 12ch; }
.journeys__hint {
  margin-top: 48px;
  font-size: 12px; color: var(--stone);
  display: flex; align-items: center; gap: 14px;
}
.journeys__hint::after {
  content: ""; width: 60px; height: 1px; background: var(--ink);
  animation: hintLine 2s var(--ease) infinite;
}
@keyframes hintLine {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  51% { transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
.journey {
  flex: 0 0 auto;
  width: 76vw;
  min-width: 820px;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  height: 100vh;
  padding: 8vh 0;
  padding-right: 6vw;
}
.journey__media {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.journey__media img {
  width: 112%; height: 100%;
  object-fit: cover;
  will-change: transform;
  transition: filter 0.8s var(--ease);
}
.journey__media img:not([data-parallax-x]) { width: 100%; }
.journey__media:hover img { filter: saturate(1.08); }
.journey__body {
  align-self: end;
  padding: 0 0 4vh 4vw;
}
.journey__num { font-family: var(--serif); color: var(--clay); font-size: 16px; display: block; margin-bottom: 22px; }
.journey__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  line-height: 1.05;
  margin-bottom: 20px;
}
.journey__body p { font-size: 15px; color: var(--ink-soft); max-width: 34ch; margin-bottom: 28px; }
.journey--custom {
  width: 46vw;
  min-width: 520px;
  grid-template-columns: 1fr;
  background: var(--ink);
  color: var(--ivory);
  padding: 8vh 6vw;
}
.journey--custom .journey__body { align-self: center; padding: 0; }
.journey--custom p { color: rgba(244, 239, 230, 0.7); }
.journey--custom .btn--line::before { background: var(--ivory); }
.journey--custom .btn--line:hover { color: var(--ink); border-color: var(--ivory); }

/* --- process ------------------------------------------------------- */
.process {
  background: var(--paper);
  padding: clamp(120px, 14vw, 200px) var(--gutter);
}
.process__head { margin-bottom: clamp(70px, 8vw, 120px); }
.process__grid {
  display: grid;
  grid-template-columns: 1px 1.1fr 1fr;
  gap: 0 clamp(40px, 6vw, 110px);
  position: relative;
}
.process__rail { position: relative; background: var(--sand); }
.process__rail-fill { position: absolute; inset: 0; background: var(--ink); transform: scaleY(0); transform-origin: top; }
.process__steps { display: grid; gap: clamp(50px, 6vw, 90px); }
.step { display: grid; grid-template-columns: 60px 1fr; gap: 20px; }
.step__num { font-family: var(--serif); font-size: 18px; color: var(--clay); padding-top: 8px; }
.step__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.05; margin-bottom: 14px; }
.step p { color: var(--ink-soft); max-width: 42ch; font-size: 15px; }
.process__figure { position: sticky; top: 120px; align-self: start; }
.process__img-wrap { aspect-ratio: 4 / 5; overflow: hidden; }
.process__img-wrap img { width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.process__figure figcaption { margin-top: 14px; font-size: 12px; color: var(--stone); }

/* --- software (pinned, phone) ------------------------------------- */
.software { background: var(--ivory); }
.software__pin { height: 100vh; overflow: hidden; }
.software__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  gap: 40px;
}
.software__title { margin-bottom: 20px; }
.software__lead { max-width: 40ch; color: var(--ink-soft); margin-bottom: 44px; font-size: 15px; }
.software__steps { display: grid; gap: 6px; max-width: 460px; }
.sstep {
  display: grid;
  grid-template-columns: 2px 1fr;
  gap: 22px;
  padding: 12px 0;
  opacity: 0.4;
  transition: opacity 0.6s var(--ease);
}
.sstep.is-active { opacity: 1; }
.sstep__bar { position: relative; background: var(--sand); }
.sstep__bar span { position: absolute; inset: 0; background: var(--ink); transform: scaleY(0); transform-origin: top; }
.sstep h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.1; margin-bottom: 6px; }
.sstep p { font-size: 14px; color: var(--stone); max-width: 36ch; }

.software__device {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  perspective: 1400px;
}
.software__counter {
  position: absolute;
  right: 0; bottom: 8vh;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--stone);
  display: flex; gap: 8px; align-items: baseline;
}
.software__counter span { color: var(--ink); font-size: 34px; font-weight: 300; }

.phone {
  --w: min(360px, 76vh * 0.478);
  position: relative;
  width: var(--w);
  aspect-ratio: 0.478;
  will-change: transform;
  transform-style: preserve-3d;
}
/* current-generation iPhone: slim bezels, metal rim, Dynamic Island */
.phone__frame {
  position: absolute; inset: 0;
  border-radius: calc(var(--w) * 0.165);
  padding: calc(var(--w) * 0.022);
  border: calc(var(--w) * 0.011) solid transparent;
  background:
    linear-gradient(#050505, #050505) padding-box,
    linear-gradient(145deg, #e6e7ea 0%, #8e9095 16%, #f5f5f7 32%, #74767b 52%, #cfd0d3 74%, #8a8c91 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 60px 100px -30px rgba(23, 20, 15, 0.55),
    0 20px 40px -20px rgba(23, 20, 15, 0.4);
}
.phone__btn {
  position: absolute;
  width: calc(var(--w) * 0.013);
  border-radius: 3px;
  background: linear-gradient(90deg, #6f7176, #dadbde 50%, #85878c);
}
.phone__btn--action  { left: calc(var(--w) * -0.009); top: 18%;  height: 4.5%; }
.phone__btn--volup   { left: calc(var(--w) * -0.009); top: 25%;  height: 7.5%; }
.phone__btn--voldown { left: calc(var(--w) * -0.009); top: 34%;  height: 7.5%; }
.phone__btn--power   { right: calc(var(--w) * -0.009); top: 27%; height: 11%; }
.phone__btn--camera  { right: calc(var(--w) * -0.006); top: 55%; height: 7%; width: calc(var(--w) * 0.009); background: linear-gradient(90deg, #3c3d41, #9a9ca1 50%, #4a4b50); }
.phone__island {
  position: absolute;
  top: calc(var(--w) * 0.05);
  left: 50%;
  transform: translateX(-50%);
  width: 31%;
  height: calc(var(--w) * 0.09);
  background: #000;
  border-radius: 999px;
  z-index: 5;
}
.phone__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: calc(var(--w) * 0.132);
  overflow: hidden;
  background: #fff;
}
.phone__home {
  position: absolute;
  left: 50%; bottom: calc(var(--w) * 0.045);
  transform: translateX(-50%);
  width: 34%; height: calc(var(--w) * 0.013);
  border-radius: 999px;
  background: #111;
  z-index: 6;
  transition: background 0.4s;
}
.phone:has(.screen--day.is-current) .phone__home { background: #fff; }
.phone__glow {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(181, 103, 58, 0.22), transparent 70%);
  filter: blur(30px);
  transform: translateZ(-100px);
}

/* phone screens — sized relative to the phone width via container units */
.screen {
  position: absolute; inset: 0;
  background: #fbfaf7;
  color: #17140f;
  font-family: var(--sans);
  font-size: calc(var(--w) * 0.036);
  line-height: 1.35;
  display: flex; flex-direction: column;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
.screen.is-current { opacity: 1; visibility: visible; }
.s-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(var(--w) * 0.052) calc(var(--w) * 0.085) 0 calc(var(--w) * 0.105);
  font-size: calc(var(--w) * 0.042);
  font-weight: 600;
  height: calc(var(--w) * 0.15);
  flex: 0 0 auto;
  letter-spacing: -0.01em;
}
.s-status--dark { color: #fff; }
.s-status__icons { display: flex; gap: calc(var(--w) * 0.014); align-items: center; }
.s-status__icons svg { height: calc(var(--w) * 0.03); width: auto; fill: currentColor; }
.s-status__icons .s-battery { height: calc(var(--w) * 0.034); }
.s-muted { color: #8b8377; }

/* screen 1 */
.screen--trip .s-status { position: absolute; top: 0; left: 0; right: 0; color: #fff; z-index: 2; }
.s-hero { position: relative; height: 40%; flex: 0 0 auto; }
.s-hero img { width: 100%; height: 100%; object-fit: cover; }
.s-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0) 40%, rgba(0,0,0,0.55)); }
.s-hero__text {
  position: absolute; left: calc(var(--w) * 0.07); right: calc(var(--w) * 0.07); bottom: calc(var(--w) * 0.06);
  color: #fff; z-index: 1; display: grid; gap: 4px;
}
.s-hero__text span { font-size: calc(var(--w) * 0.032); opacity: 0.85; }
.s-hero__text strong { font-family: var(--serif); font-weight: 400; font-size: calc(var(--w) * 0.085); line-height: 1; }
.s-section { padding: calc(var(--w) * 0.045) calc(var(--w) * 0.07); }
.s-section__head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: calc(var(--w) * 0.04); }
.s-list li { display: flex; gap: calc(var(--w) * 0.035); align-items: center; padding: calc(var(--w) * 0.028) 0; border-bottom: 1px solid #eee7da; }
.s-list img { width: calc(var(--w) * 0.13); height: calc(var(--w) * 0.13); object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.s-list strong { display: block; font-weight: 600; }
.s-list span { color: #8b8377; font-size: 0.9em; }

/* screen 1 extras: countdown + quick access */
.s-countdown { justify-self: start; display: inline-flex; align-items: baseline; gap: 5px; background: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 3px 10px; border-radius: 999px; opacity: 1 !important; margin-bottom: 4px; }
.s-countdown b { font-weight: 600; }
.s-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--w) * 0.02); padding: calc(var(--w) * 0.045) calc(var(--w) * 0.06) 0; }
.s-quick span { display: grid; justify-items: center; gap: 5px; font-size: 0.78em; font-weight: 500; color: #3a352e; }
.s-ico { width: calc(var(--w) * 0.11); height: calc(var(--w) * 0.11); border-radius: 30%; background: #efe9dd; position: relative; }
.s-ico::after { content: ""; position: absolute; inset: 27%; background: #17140f; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.s-ico--plane  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 15.5v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0v5l-8 5v2l8-2.5v5.5l-2 1.5V22l3.5-1 3.5 1v-1.5l-2-1.5V13z'/%3E%3C/svg%3E"); }
.s-ico--wallet { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4H18v3h1.5A1.5 1.5 0 0 1 21 8.5v10a1.5 1.5 0 0 1-1.5 1.5h-13A2.5 2.5 0 0 1 4 17.5zM16 12.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.s-ico--list   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h3v3H3zM9 5.5h12v2H9zM3 10.5h3v3H3zM9 11h12v2H9zM3 16h3v3H3zM9 16.5h12v2H9z'/%3E%3C/svg%3E"); }
.s-ico--phone  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 3h2.8l1.5 4.3-2 1.4a11 11 0 0 0 6.4 6.4l1.4-2 4.3 1.5v2.8A2.3 2.3 0 0 1 18.7 20 16 16 0 0 1 4 5.3 2.3 2.3 0 0 1 6.6 3z'/%3E%3C/svg%3E"); }
/* screen 3 extras */
.s-progress { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#17140f 0 78%, #e6dccb 78% 100%); position: relative; }
.s-progress b { position: absolute; inset: 3px; border-radius: 50%; background: #fbfaf7; }

/* screen 1 — welcome + countdown (modelled on the Travel Portal app) */
.screen--welcome { background: #0f1115; color: #fff; }
.w-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen--welcome::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,20,0.55) 0%, rgba(10,12,20,0.15) 35%, rgba(10,12,20,0.25) 60%, rgba(10,12,20,0.8) 100%); }
.screen--welcome > *:not(.w-bg) { position: relative; z-index: 1; }
.w-top { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--w) * 0.02) calc(var(--w) * 0.06); font-weight: 600; font-size: 0.95em; }
.w-top__r { display: flex; gap: 6px; align-items: center; }
.w-top__r b { background: #fff; color: #111; font-size: 0.72em; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.w-bell { width: calc(var(--w) * 0.075); height: calc(var(--w) * 0.075); border-radius: 50%; background: #fff; position: relative; display: inline-block; }
.w-bell::after { content: ""; position: absolute; inset: 26%; background: #111; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0-6 6v4l-2 3h16l-2-3V9a6 6 0 0 0-6-6zm-2.5 15a2.5 2.5 0 0 0 5 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0-6 6v4l-2 3h16l-2-3V9a6 6 0 0 0-6-6zm-2.5 15a2.5 2.5 0 0 0 5 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
.w-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--w) * 0.03); padding: 0 calc(var(--w) * 0.08); }
.w-count { background: rgba(20, 22, 30, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 10px; padding: calc(var(--w) * 0.025) calc(var(--w) * 0.05); margin-bottom: calc(var(--w) * 0.05); }
.w-count small { display: block; font-size: 0.66em; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; margin-bottom: 4px; }
.w-count > div { display: flex; align-items: flex-start; justify-content: center; gap: calc(var(--w) * 0.03); }
.w-count span { display: grid; justify-items: center; font-size: 0.6em; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.w-count span b { font-size: 2.2em; font-weight: 500; letter-spacing: 0; line-height: 1.1; opacity: 1; }
.w-count em { font-style: normal; font-size: 1.1em; opacity: 0.7; }
.w-logo { width: calc(var(--w) * 0.14); color: #fff; }
.w-center strong { font-family: var(--serif); font-weight: 400; font-size: calc(var(--w) * 0.1); line-height: 1; }
.w-center p { font-family: var(--serif); font-style: italic; font-size: 1.15em; opacity: 0.9; }
.w-actions { display: grid; gap: calc(var(--w) * 0.025); padding: 0 calc(var(--w) * 0.06) calc(var(--w) * 0.11); }
.w-btn { display: flex; justify-content: center; align-items: center; gap: 8px; background: #fff; color: #111; border-radius: 999px; padding: calc(var(--w) * 0.03); font-weight: 600; font-size: 0.9em; }
.w-btn--dark { background: var(--navy); color: #fff; }
.w-cloud { width: 1.2em; height: 1.2em; background: #111; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a4.5 4.5 0 0 1-.6-9 6 6 0 0 1 11.4 1.5A3.8 3.8 0 0 1 17.5 18zm5-8v5m-2.2-2.2L12 15l2.2-2.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a4.5 4.5 0 0 1-.6-9 6 6 0 0 1 11.4 1.5A3.8 3.8 0 0 1 17.5 18zm5-8v5m-2.2-2.2L12 15l2.2-2.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* screen 2 — travel dashboard */
.d-top { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--w) * 0.01) calc(var(--w) * 0.06) calc(var(--w) * 0.03); }
.d-back { border: 1px solid #e3ddd0; border-radius: 999px; padding: 4px 11px; font-size: 0.85em; font-weight: 500; }
.screen--dash .w-bell { background: #fff; box-shadow: inset 0 0 0 1px #e3ddd0; }
.d-tabs { display: flex; gap: calc(var(--w) * 0.06); padding: 0 calc(var(--w) * 0.06); border-bottom: 1px solid #eee7da; font-size: 0.85em; color: #8b8377; }
.d-tabs span { padding-bottom: 8px; }
.d-tabs .is-on { color: #17140f; font-weight: 600; box-shadow: inset 0 -2px 0 var(--navy); }
.d-card { position: relative; margin: calc(var(--w) * 0.045) calc(var(--w) * 0.06) 0; height: calc(var(--w) * 0.42); border-radius: 12px; overflow: hidden; flex: 0 0 auto; }
.d-card img { width: 100%; height: 100%; object-fit: cover; }
.d-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6)); }
.d-tag { position: absolute; left: 10px; top: 10px; z-index: 1; background: var(--navy); color: #fff; font-size: 0.62em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; }
.d-card__text { position: absolute; left: 12px; bottom: 10px; z-index: 1; color: #fff; display: grid; gap: 1px; }
.d-card__text strong { font-weight: 600; }
.d-card__text span { font-size: 0.8em; opacity: 0.85; }
.d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--w) * 0.025); padding: calc(var(--w) * 0.04) calc(var(--w) * 0.06) 0; }
.d-grid > div { background: #fff; border: 1px solid #eee7da; border-radius: 10px; padding: calc(var(--w) * 0.03); display: grid; gap: 1px; }
.d-grid .s-ico { width: calc(var(--w) * 0.075); height: calc(var(--w) * 0.075); margin-bottom: 5px; }
.d-grid strong { font-weight: 600; font-size: 0.92em; }
.d-grid span { font-size: 0.78em; color: #8b8377; }
.s-ico--cal  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2zM5 9v10h14V9z'/%3E%3C/svg%3E"); }
.s-ico--sun  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.s-ico--pass { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h11a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm5.5 5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM8 17v1.5h7V17z'/%3E%3C/svg%3E"); }
.phone:has(.screen--welcome.is-current) .phone__home { background: #fff; }

/* screen 2 */
.screen--day { background: #17140f; color: #f4efe6; }
.s-day-head { padding: calc(var(--w) * 0.02) calc(var(--w) * 0.08) calc(var(--w) * 0.05); display: grid; gap: 4px; }
.s-day-head strong { font-family: var(--serif); font-weight: 400; font-size: calc(var(--w) * 0.09); line-height: 1; }
.s-day-head p { color: rgba(244,239,230,0.65); font-size: 0.92em; margin-top: 4px; }
.s-map { position: relative; height: 26%; margin: 0 calc(var(--w) * 0.06); border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.s-map img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.s-map__pin {
  position: absolute; left: 58%; top: 52%; width: 10px; height: 10px; border-radius: 50%; background: #b5673a;
  box-shadow: 0 0 0 4px rgba(181,103,58,0.35);
  animation: pinPulse 2s ease-out infinite;
}
@keyframes pinPulse { 0% { box-shadow: 0 0 0 0 rgba(181,103,58,0.6); } 100% { box-shadow: 0 0 0 14px rgba(181,103,58,0); } }
.s-timeline { padding: calc(var(--w) * 0.05) calc(var(--w) * 0.08); display: grid; gap: calc(var(--w) * 0.03); }
.s-timeline li { display: grid; grid-template-columns: calc(var(--w) * 0.12) 1fr; gap: 10px; align-items: start; opacity: 0.55; }
.s-timeline li.is-now { opacity: 1; }
.s-timeline time { font-weight: 600; font-variant-numeric: tabular-nums; }
.s-timeline strong { display: block; font-weight: 500; }
.s-timeline span { font-size: 0.88em; color: rgba(244,239,230,0.6); }
.s-timeline li.is-now strong { color: #e6b391; }

/* screen 3 */
.s-docs-head { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--w) * 0.02) calc(var(--w) * 0.08) calc(var(--w) * 0.05); }
.s-docs-head strong { font-family: var(--serif); font-weight: 400; font-size: calc(var(--w) * 0.09); }
.s-pill { font-size: 0.8em; font-weight: 600; color: #2f6b3f; background: #e4efe4; padding: 4px 10px; border-radius: 999px; }
.s-docs { padding: 0 calc(var(--w) * 0.07); display: grid; }
.s-docs li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: calc(var(--w) * 0.035) 0; border-bottom: 1px solid #eee7da; }
.s-doc__type { font-size: 0.72em; font-weight: 600; color: #8b8377; width: calc(var(--w) * 0.16); }
.s-docs strong { display: block; font-weight: 600; }
.s-docs span:not(.s-doc__type) { font-size: 0.88em; color: #8b8377; }
.s-check { width: 16px; height: 16px; border-radius: 50%; background: #17140f; position: relative; }
.s-check::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 8px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg); }
.s-offline { margin: auto calc(var(--w) * 0.08) calc(var(--w) * 0.08); display: flex; align-items: center; gap: 8px; font-size: 0.85em; color: #8b8377; }
.s-offline i { width: 8px; height: 8px; border-radius: 50%; background: #2f6b3f; }

/* screen 4 — WhatsApp-style chat */
.screen--chat { background-color: #efeae2; background-image: radial-gradient(rgba(120, 100, 70, 0.07) 1px, transparent 1.4px); background-size: 14px 14px; }
.wa-top { background: #f6f5f3; border-bottom: 1px solid #dedad3; flex: 0 0 auto; }
.wa-head { display: flex; align-items: center; gap: calc(var(--w) * 0.025); padding: calc(var(--w) * 0.01) calc(var(--w) * 0.05) calc(var(--w) * 0.03) calc(var(--w) * 0.035); }
.wa-back { font-size: 2.1em; line-height: 0.8; font-weight: 300; color: #111; margin-top: -0.1em; }
.wa-head img { width: calc(var(--w) * 0.1); height: calc(var(--w) * 0.1); border-radius: 50%; object-fit: cover; object-position: 50% 15%; flex: 0 0 auto; }
.wa-who { flex: 1; min-width: 0; line-height: 1.2; }
.wa-who strong { display: block; font-weight: 600; font-size: 0.98em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-who span { font-size: 0.8em; color: #667781; }
.wa-icons { display: flex; gap: calc(var(--w) * 0.045); color: #111; }
.wa-icons svg { width: calc(var(--w) * 0.06); height: calc(var(--w) * 0.06); }
.wa-body { flex: 1; min-height: 0; overflow: hidden; padding: calc(var(--w) * 0.035) calc(var(--w) * 0.04); display: flex; flex-direction: column; gap: calc(var(--w) * 0.016); }
.wa-chip { align-self: center; background: rgba(255, 255, 255, 0.92); color: #54656f; font-size: 0.74em; padding: 3px 10px; border-radius: 7px; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); margin-bottom: 2px; }
.wa-msg {
  align-self: flex-start;
  max-width: 80%;
  background: #fff;
  color: #111b21;
  padding: calc(var(--w) * 0.018) calc(var(--w) * 0.025) calc(var(--w) * 0.012);
  border-radius: 0 8px 8px 8px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  font-size: 0.93em;
  line-height: 1.3;
  transform: translateY(8px); opacity: 0;
}
.wa-msg--me { align-self: flex-end; background: #d9fdd3; border-radius: 8px 0 8px 8px; }
.wa-msg time { float: right; margin: 0.45em 0 -0.15em 0.7em; font-size: 0.72em; color: #667781; display: inline-flex; align-items: center; gap: 3px; }
.wa-ticks { display: inline-block; width: 1.45em; height: 0.9em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5.3l2.6 2.6L9.4 1.6M6.2 7.9l.4.4 5.8-6.7' fill='none' stroke='%2353bdeb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.wa-msg--photo { padding: 3px; position: relative; }
.wa-msg--photo img { display: block; width: calc(var(--w) * 0.5); height: calc(var(--w) * 0.34); object-fit: cover; border-radius: 6px; }
.wa-msg--photo time { position: absolute; right: 8px; bottom: 6px; margin: 0; float: none; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.screen--chat.is-current .wa-msg { animation: bubbleIn 0.6s var(--ease) forwards; }
.screen--chat.is-current .wa-msg:nth-child(2) { animation-delay: 0.3s; }
.screen--chat.is-current .wa-msg:nth-child(3) { animation-delay: 0.8s; }
.screen--chat.is-current .wa-msg:nth-child(4) { animation-delay: 1.3s; }
.screen--chat.is-current .wa-msg:nth-child(5) { animation-delay: 1.9s; }
.screen--chat.is-current .wa-msg:nth-child(6) { animation-delay: 2.4s; }
.screen--chat.is-current .wa-msg:nth-child(7) { animation-delay: 3.0s; }
@keyframes bubbleIn { to { transform: none; opacity: 1; } }
.wa-input {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: calc(var(--w) * 0.035);
  background: #f6f5f3; border-top: 1px solid #dedad3;
  padding: calc(var(--w) * 0.025) calc(var(--w) * 0.045) calc(var(--w) * 0.085);
  color: #111;
}
.wa-input svg { width: calc(var(--w) * 0.062); height: calc(var(--w) * 0.062); flex: 0 0 auto; }
.wa-plus { font-size: 1.7em; font-weight: 300; line-height: 1; }
.wa-field { flex: 1; background: #fff; border: 1px solid #e3e0da; border-radius: 999px; padding: calc(var(--w) * 0.017) calc(var(--w) * 0.035); color: #8696a0; font-size: 0.9em; }

/* --- team --------------------------------------------------------- */
.team { background: var(--ivory); padding: clamp(120px, 14vw, 200px) var(--gutter); }
.team__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(24px, 2.6vw, 40px) clamp(14px, 1.6vw, 24px);
}
.team__intro { padding-right: 8%; display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; }
.team__intro .h2 { margin-bottom: 4px; }
.team__intro p:not(.eyebrow) { font-size: 15px; color: var(--ink-soft); }
.member__img { aspect-ratio: 3 / 4; overflow: hidden; background: var(--ivory); }
.member__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease);
}
/* white-background portraits: blend the white into a warm studio backdrop */
.member__img--studio { isolation: isolate; background: radial-gradient(120% 90% at 50% 30%, #efe7d9 0%, #e2d6c2 60%, #d6c7ae 100%); }
.member__img--studio img { mix-blend-mode: multiply; }
.member:hover .member__img img { transform: scale(1.05); }
.member figcaption, .member__cap { margin-top: 16px; display: grid; gap: 2px; }
.member--link { display: block; }
.member .member__more { font-size: 12px; color: var(--ink); margin-top: 6px; opacity: 0.55; transition: opacity 0.3s; }
.member--link:hover .member__more { opacity: 1; }
.member strong { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.member span { font-size: 12px; color: var(--stone); }
.member__dba { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--clay); margin-top: 2px; }
@media (min-width: 1101px) { .team__intro { grid-column: 1 / -1; max-width: 60ch; padding-right: 0; margin-bottom: 28px; } }
.team__grid .member strong { font-size: 19px; line-height: 1.2; }
.team__grid .member span { font-size: 11.5px; line-height: 1.35; }
.team__grid .member__cap { margin-top: 12px; }

/* --- quote --------------------------------------------------------- */
.quote {
  position: relative;
  min-height: 100vh;
  background: var(--night);
  color: var(--ivory);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: 140px var(--gutter);
  overflow: hidden;
}
.quote__bg { position: absolute; inset: 0; opacity: 0.28; }
.quote__bg img { width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.quote__text {
  position: relative;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 3.6rem);
  line-height: 1.25;
  max-width: 26ch;
}
.quote__text .w { display: inline-block; opacity: 0.15; }
.quote__cite { position: relative; margin-top: 44px; font-size: 12px; color: rgba(244,239,230,0.6); letter-spacing: 0.03em; }

/* --- direct --------------------------------------------------------- */
.direct {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ivory);
}
.direct__media { position: relative; min-height: 100vh; }
.direct__img-wrap { position: absolute; inset: 0; overflow: hidden; }
.direct__img-wrap img { width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.direct__card {
  position: absolute;
  left: var(--gutter); bottom: 56px;
  background: rgba(251, 249, 244, 0.92);
  backdrop-filter: blur(10px);
  padding: 22px 26px;
  max-width: 300px;
  display: grid; gap: 4px;
}
.direct__card-label { font-size: 11px; color: var(--clay); font-weight: 600; letter-spacing: 0.03em; }
.direct__card strong { font-family: var(--serif); font-weight: 400; font-size: 24px; }
.direct__card p { font-size: 13px; color: var(--stone); }
.direct__content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px var(--gutter);
  gap: 24px;
}
.direct__content .eyebrow { margin-bottom: 0; }
.direct__content > p:not(.eyebrow) { max-width: 44ch; color: var(--ink-soft); font-size: 15px; }
.direct__note { font-size: 13px !important; color: var(--stone) !important; border-left: 1px solid var(--clay); padding-left: 16px; }

/* --- journal ------------------------------------------------------- */
.journal { background: var(--paper); padding: clamp(120px, 14vw, 200px) var(--gutter); }
.journal__head {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  margin-bottom: clamp(50px, 6vw, 80px);
}
.journal__head .eyebrow { grid-column: 1 / -1; }
.journal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 36px); }
.post__img { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 18px; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.post:hover .post__img img { transform: scale(1.06); }
.post__by { font-size: 12px; color: var(--stone); display: block; margin-bottom: 8px; }
.post__by em { font-family: var(--serif); font-size: 14px; color: var(--clay); }
.journal__subs { font-size: 13px; color: var(--stone); max-width: 38ch; text-align: right; justify-self: end; align-self: end; line-height: 1.7; }
.journal__subs a { color: var(--ink); border-bottom: 1px solid var(--sand); transition: border-color 0.3s; }
.journal__subs a:hover { border-color: var(--ink); }
.post h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; }

/* --- closing ------------------------------------------------------ */
.closing {
  position: relative;
  min-height: 100vh;
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--ivory);
  text-align: center;
}
.closing__bg { position: absolute; inset: 0; }
.closing__bg img { width: 100%; height: 125%; object-fit: cover; will-change: transform; }
.closing__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,19,15,0.25), rgba(21,19,15,0.55)); }
.closing__content { position: relative; display: grid; gap: 44px; justify-items: center; padding: 0 var(--gutter); }
.closing__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 1;
}
.closing__title em { color: #e6b391; }

/* --- footer -------------------------------------------------------- */
.footer { background: var(--night); color: rgba(244,239,230,0.75); padding: 90px var(--gutter) 36px; }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 64px; }
.footer__col address { font-style: normal; }
.footer__bottom a:hover { color: var(--ivory); }
.footer__mark { width: 72px; color: var(--ivory); margin-bottom: 22px; }
.footer__brand p { max-width: 28ch; font-size: 14px; }
.footer__col { display: grid; gap: 10px; align-content: start; font-size: 14px; }
.footer__col h4 { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ivory); margin-bottom: 8px; }
.footer__col a { width: fit-content; position: relative; }
.footer__col a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); }
.footer__col a:hover::after { transform: scaleX(1); transform-origin: left; }
/* affiliations: logos shown in ivory so every mark matches the navy footer */
.footer__partners { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 80px; padding: 40px 0; margin-bottom: 36px; border-top: 1px solid rgba(244,239,230,0.12); }
.partners__group { display: grid; gap: 18px; }
.partners__label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,239,230,0.55); }
.partners__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; }
.partner img { display: block; height: 34px; width: auto; max-width: 180px; object-fit: contain; opacity: 0.9; transition: opacity 0.3s; }
.partner--coastline img { height: 36px; }
.partner--virtuoso img { height: 58px; max-width: none; }
.partner--award img { height: 84px; }
.partner:hover img { opacity: 1; }
.partner b { display: none; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ivory); }
.partner.is-text img { display: none; }
.partner.is-text b { display: block; }
.footer__bottom { display: flex; justify-content: space-between; font-size: 12px; border-top: 1px solid rgba(244,239,230,0.12); padding-top: 24px; }

/* --- reveal defaults (JS animates these) -------------------------- */
[data-reveal] { opacity: 0; transform: translateY(36px); }
.no-js [data-reveal], .no-js .hero__eyebrow, .no-js .hero__lead, .no-js .hero__actions, .no-js .hero__scroll, .no-js .hero__caption { opacity: 1; transform: none; }
.no-js .hero__img-wrap { clip-path: none; }
.no-js .curtain { display: none; }

/* --- responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .pillar { border-right: 0; border-bottom: 1px solid var(--sand); padding-left: 0 !important; }
  .team__grid { grid-template-columns: repeat(4, 1fr); }
  .team__intro { grid-column: 1 / -1; padding-right: 0; max-width: 60ch; margin-bottom: 20px; }
  .journal__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --nav-h: 68px; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }

  .hero { grid-template-columns: 1fr; grid-template-rows: 56vh auto; min-height: 0; }
  .hero__media { min-height: 56vh; }
  .hero__content { padding: 56px var(--gutter) 90px; }
  .hero__scroll { display: none; }

  .journeys__pin { height: auto; overflow: visible; display: block; }
  .journeys__track { flex-direction: column; height: auto; transform: none !important; }
  .journeys__intro { width: auto; min-width: 0; padding: 100px var(--gutter) 40px; }
  .journeys__hint { display: none; }
  .journey { width: auto; min-width: 0; height: auto; grid-template-columns: 1fr; padding: 24px var(--gutter); }
  .journey__media { height: 62vw; }
  .journey__media img { width: 100%; }
  .journey__body { padding: 28px 0 24px; }
  .journey--custom { width: auto; min-width: 0; margin-top: 24px; padding: 64px var(--gutter); }

  .process__grid { grid-template-columns: 1px 1fr; }
  .process__figure { display: none; }

  .software__pin { height: 100vh; }
  .software__inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; padding-top: var(--nav-h); }
  .software__title { font-size: clamp(1.8rem, 6vw, 2.6rem); margin-bottom: 8px; }
  .software__lead { display: none; }
  .software__copy { padding-top: 20px; }
  .software__steps { position: relative; height: 92px; max-width: none; }
  .sstep { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .sstep.is-active { opacity: 1; }
  .sstep h3 { font-size: 19px; }
  .sstep p { font-size: 13px; }
  .phone { --w: min(300px, 52vh * 0.478); }
  .software__counter { display: none; }
  .software__device { padding-bottom: 16px; }

  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .direct { grid-template-columns: 1fr; }
  .direct__media { min-height: 70vh; }
  .direct__content { padding: 80px var(--gutter); }
  .journal__head { grid-template-columns: 1fr; gap: 16px; }
  .journal__subs { text-align: left; justify-self: start; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__bottom { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line span, .journeys__hint::after, .s-map__pin { animation: none; }
}

/* legal line in the footer */
.footer__legal { font-size: 12px; line-height: 1.7; color: rgba(244,239,230,0.55); max-width: 80ch; margin-top: 18px; }
.footer__legal a { color: rgba(244,239,230,0.8); border-bottom: 1px solid rgba(244,239,230,0.3); }
.footer__legal a:hover { color: var(--ivory); }